Skip to content

Commit dc78bb6

Browse files
dedestemdedestem
committed
TextField Beta
1 parent 64f5f1f commit dc78bb6

File tree

8 files changed

+278
-229
lines changed

8 files changed

+278
-229
lines changed

‎src/app.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="stylesheet" href="https://design.davidnet.net/global.css" />
78
%sveltekit.head%
89
</head>
910
<body data-sveltekit-preload-data="hover">

‎src/lib/components/Inputs/TextField.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
export let placeholder: string = "Your name";
3+
export let type: "text" | "email" | "password" | "url" = "text";
4+
export let value: string = "";
5+
export let disabled: boolean = false;
6+
export let invalid: boolean = false;
7+
</script>
8+
9+
<div id="root">
10+
<input {type} {placeholder} {disabled} bind:value />
11+
{#if invalid}
12+
<div id="message">
13+
<p><span class="material-symbols-outlined dropdown-arrow" aria-hidden="true">error</span> Invalid</p>
14+
</div>
15+
{/if}
16+
</div>
17+
18+
<style>
19+
#root {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 0px;
23+
}
24+
25+
input {
26+
all: unset;
27+
border-radius: 8px;
28+
cursor: text;
29+
padding: 0.5rem;
30+
font-family: var(--token-font-main);
31+
background-color: var(--token-color-surface-sunken-normal);
32+
}
33+
34+
#message {
35+
color: var(--token-color-text-danger);
36+
}
37+
38+
p {
39+
font-size: 1rem;
40+
vertical-align: middle;
41+
}
42+
43+
span {
44+
font-size: 1.2rem;
45+
vertical-align: middle;
46+
}
47+
</style>

‎src/lib/components/Inputs/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as Dropdown } from "$lib/components/Inputs/Dropdown.svelte";
22
export { default as IconDropdown } from "$lib/components/Inputs/IconDropdown.svelte";
3+
export { default as TextField } from "$lib/components/Inputs/TextField.svelte";

‎src/lib/metadata.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
//! This file is autogenerated! Edit in meta/scripts/GenerateMetaData.ts
22

33
export const metadata = {
4-
version: "1.6.0",
5-
packageName: "@davidnet/svelte-ui",
6-
npmUrl: "https://www.npmjs.com/package/@davidnet/svelte-ui",
7-
commitHash: "2a13538",
8-
fullCommitHash: "2a135388f1d0d885309f120922475fa0989a02e6",
9-
commitDate: "2025-07-26T21:19:19+02:00",
10-
branch: "main",
11-
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/2a135388f1d0d885309f120922475fa0989a02e6",
12-
repoUrl: "https://github.com/davidnet-net/svelte-ui"
4+
version: "1.7.1",
5+
packageName: "@davidnet/svelte-ui",
6+
npmUrl: "https://www.npmjs.com/package/@davidnet/svelte-ui",
7+
commitHash: "64f5f1f",
8+
fullCommitHash: "64f5f1f75adec56dd8a7ac6a164dbf4142ada0ad",
9+
commitDate: "2025-07-26T21:27:40+02:00",
10+
branch: "main",
11+
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/64f5f1f75adec56dd8a7ac6a164dbf4142ada0ad",
12+
repoUrl: "https://github.com/davidnet-net/svelte-ui"
1313
};

‎src/routes/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<h1>Welcome to your library project</h1>
22
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
3-
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
3+
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

‎themes/gen/dark.css

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
11
/* This file is autogenerated. Edit in themes/dev/dark.json */
22

33
:root {
4-
--token-color-text-default-normal: #f1f1f1;
5-
--token-color-text-default-secondary: #cccccc;
6-
--token-color-text-default-tertiary: #999999;
7-
--token-color-text-inverse-normal: #111111;
8-
--token-color-text-inverse-secondary: #444444;
9-
--token-color-text-inverse-tertiary: #666666;
10-
--token-color-text-danger: #ae2e24;
11-
--token-color-text-warning: #f5cd47;
12-
--token-color-text-success: #7ee2b8;
13-
--token-color-text-discover: #b8acf6;
14-
--token-color-text-information: #85b8ff;
15-
--token-color-text-disabled: #666666;
16-
--token-color-text-dark-normal: #f1f1f1;
17-
--token-color-text-dark-secondary: #cccccc;
18-
--token-color-text-dark-tertiary: #999999;
19-
--token-color-text-light-normal: #111111;
20-
--token-color-text-light-secondary: #444444;
21-
--token-color-text-light-tertiary: #666666;
22-
--token-color-background-danger-normal: #8b0f06;
23-
--token-color-background-danger-hover: #b4241a;
24-
--token-color-background-danger-pressed: #2c2c2c;
25-
--token-color-background-warning-normal: #866602;
26-
--token-color-background-warning-hover: #c48b1c;
27-
--token-color-background-warning-pressed: #2c2c2c;
28-
--token-color-background-primary-normal: #0d3e8b;
29-
--token-color-background-primary-hover: #145fcc;
30-
--token-color-background-primary-pressed: #2c2c2c;
31-
--token-color-background-success-normal: #00c48c;
32-
--token-color-background-success-hover: #009f72;
33-
--token-color-background-success-pressed: #2c2c2c;
34-
--token-color-background-discover-normal: #540b7e;
35-
--token-color-background-discover-hover: #7159c4;
36-
--token-color-background-discover-pressed: #2c2c2c;
37-
--token-color-background-information-normal: #4098ff;
38-
--token-color-background-information-hover: #327ad1;
39-
--token-color-background-information-pressed: #2c2c2c;
40-
--token-color-background-disabled-normal: #444444;
41-
--token-color-background-disabled-hover: #3a3a3a;
42-
--token-color-background-disabled-pressed: #2c2c2c;
43-
--token-color-background-subtle-normal: transparent;
44-
--token-color-background-subtle-hover: rgba(255, 255, 255, 0.08);
45-
--token-color-background-subtle-pressed: rgba(255, 255, 255, 0.16);
46-
--token-color-surface-sunken-normal: #161a1d;
47-
--token-color-surface-default-normal: #1d2125;
48-
--token-color-surface-default-hover: #2a2f35;
49-
--token-color-surface-default-pressed: #32383f;
50-
--token-color-surface-raised-normal: #22272b;
51-
--token-color-surface-raised-hover: #2f353a;
52-
--token-color-surface-raised-pressed: #3a4249;
53-
--token-color-surface-overlay-normal: #282e33;
54-
--token-color-surface-overlay-hover: #353c44;
55-
--token-color-surface-overlay-pressed: #404952;
56-
--token-color-surface-inverse-sunken-normal: #f4f5f7;
57-
--token-color-surface-inverse-default-normal: #ffffff;
58-
--token-color-surface-inverse-default-hover: #eaeaea;
59-
--token-color-surface-inverse-default-pressed: #dcdcdc;
60-
--token-color-surface-inverse-overlay-normal: #f0f0f0;
61-
--token-color-surface-inverse-overlay-hover: #dddddd;
62-
--token-color-surface-inverse-overlay-pressed: #cccccc;
63-
--token-color-surface-inverse-raised-normal: #ffffff;
64-
--token-color-surface-inverse-raised-hover: #f3f3f3;
65-
--token-color-surface-inverse-raised-pressed: #e6e6e6;
66-
--token-color-blanket-normal: rgba(0, 0, 0, 0.5);
67-
--token-space-0: 0rem;
68-
--token-space-1: 0.25rem;
69-
--token-space-2: 0.5rem;
70-
--token-space-3: 0.75rem;
71-
--token-space-4: 1rem;
72-
--token-space-5: 1.5rem;
73-
--token-space-6: 2rem;
74-
--token-font-mono: JetBrains Mono;
75-
--token-font-main: Inter;
76-
--token-font-heading: Merriweather Sans;
4+
--token-color-text-default-normal: #f1f1f1;
5+
--token-color-text-default-secondary: #cccccc;
6+
--token-color-text-default-tertiary: #999999;
7+
--token-color-text-inverse-normal: #111111;
8+
--token-color-text-inverse-secondary: #444444;
9+
--token-color-text-inverse-tertiary: #666666;
10+
--token-color-text-danger: #ae2e24;
11+
--token-color-text-warning: #f5cd47;
12+
--token-color-text-success: #7ee2b8;
13+
--token-color-text-discover: #b8acf6;
14+
--token-color-text-information: #85b8ff;
15+
--token-color-text-disabled: #666666;
16+
--token-color-text-dark-normal: #f1f1f1;
17+
--token-color-text-dark-secondary: #cccccc;
18+
--token-color-text-dark-tertiary: #999999;
19+
--token-color-text-light-normal: #111111;
20+
--token-color-text-light-secondary: #444444;
21+
--token-color-text-light-tertiary: #666666;
22+
--token-color-background-danger-normal: #8b0f06;
23+
--token-color-background-danger-hover: #b4241a;
24+
--token-color-background-danger-pressed: #2c2c2c;
25+
--token-color-background-warning-normal: #866602;
26+
--token-color-background-warning-hover: #c48b1c;
27+
--token-color-background-warning-pressed: #2c2c2c;
28+
--token-color-background-primary-normal: #0d3e8b;
29+
--token-color-background-primary-hover: #145fcc;
30+
--token-color-background-primary-pressed: #2c2c2c;
31+
--token-color-background-success-normal: #00c48c;
32+
--token-color-background-success-hover: #009f72;
33+
--token-color-background-success-pressed: #2c2c2c;
34+
--token-color-background-discover-normal: #540b7e;
35+
--token-color-background-discover-hover: #7159c4;
36+
--token-color-background-discover-pressed: #2c2c2c;
37+
--token-color-background-information-normal: #4098ff;
38+
--token-color-background-information-hover: #327ad1;
39+
--token-color-background-information-pressed: #2c2c2c;
40+
--token-color-background-disabled-normal: #444444;
41+
--token-color-background-disabled-hover: #3a3a3a;
42+
--token-color-background-disabled-pressed: #2c2c2c;
43+
--token-color-background-subtle-normal: transparent;
44+
--token-color-background-subtle-hover: rgba(255, 255, 255, 0.08);
45+
--token-color-background-subtle-pressed: rgba(255, 255, 255, 0.16);
46+
--token-color-surface-sunken-normal: #161a1d;
47+
--token-color-surface-default-normal: #1d2125;
48+
--token-color-surface-default-hover: #2a2f35;
49+
--token-color-surface-default-pressed: #32383f;
50+
--token-color-surface-raised-normal: #22272b;
51+
--token-color-surface-raised-hover: #2f353a;
52+
--token-color-surface-raised-pressed: #3a4249;
53+
--token-color-surface-overlay-normal: #282e33;
54+
--token-color-surface-overlay-hover: #353c44;
55+
--token-color-surface-overlay-pressed: #404952;
56+
--token-color-surface-inverse-sunken-normal: #f4f5f7;
57+
--token-color-surface-inverse-default-normal: #ffffff;
58+
--token-color-surface-inverse-default-hover: #eaeaea;
59+
--token-color-surface-inverse-default-pressed: #dcdcdc;
60+
--token-color-surface-inverse-overlay-normal: #f0f0f0;
61+
--token-color-surface-inverse-overlay-hover: #dddddd;
62+
--token-color-surface-inverse-overlay-pressed: #cccccc;
63+
--token-color-surface-inverse-raised-normal: #ffffff;
64+
--token-color-surface-inverse-raised-hover: #f3f3f3;
65+
--token-color-surface-inverse-raised-pressed: #e6e6e6;
66+
--token-color-blanket-normal: rgba(0, 0, 0, 0.5);
67+
--token-space-0: 0rem;
68+
--token-space-1: 0.25rem;
69+
--token-space-2: 0.5rem;
70+
--token-space-3: 0.75rem;
71+
--token-space-4: 1rem;
72+
--token-space-5: 1.5rem;
73+
--token-space-6: 2rem;
74+
--token-font-mono: JetBrains Mono;
75+
--token-font-main: Inter;
76+
--token-font-heading: Merriweather Sans;
7777
}

‎themes/gen/highcontrast.css

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
11
/* This file is autogenerated. Edit in themes/dev/highcontrast.json */
22

33
:root {
4-
--token-color-text-default-normal: #ffffff;
5-
--token-color-text-default-secondary: #ffff00;
6-
--token-color-text-default-tertiary: #00ffff;
7-
--token-color-text-inverse-normal: #000000;
8-
--token-color-text-inverse-secondary: #333300;
9-
--token-color-text-inverse-tertiary: #003333;
10-
--token-color-text-danger: #ff0000;
11-
--token-color-text-warning: #ffd700;
12-
--token-color-text-success: #00ff00;
13-
--token-color-text-discover: #ff00ff;
14-
--token-color-text-information: #00bfff;
15-
--token-color-text-disabled: #777777;
16-
--token-color-text-dark-normal: #ffffff;
17-
--token-color-text-dark-secondary: #ffff00;
18-
--token-color-text-dark-tertiary: #00ffff;
19-
--token-color-text-light-normal: #000000;
20-
--token-color-text-light-secondary: #333300;
21-
--token-color-text-light-tertiary: #003333;
22-
--token-color-background-danger-normal: #8b0000;
23-
--token-color-background-danger-hover: #b22222;
24-
--token-color-background-danger-pressed: #660000;
25-
--token-color-background-warning-normal: #b8860b;
26-
--token-color-background-warning-hover: #ffd700;
27-
--token-color-background-warning-pressed: #665500;
28-
--token-color-background-primary-normal: #000000;
29-
--token-color-background-primary-hover: #222222;
30-
--token-color-background-primary-pressed: #444444;
31-
--token-color-background-success-normal: #008000;
32-
--token-color-background-success-hover: #00ff00;
33-
--token-color-background-success-pressed: #004400;
34-
--token-color-background-discover-normal: #8b008b;
35-
--token-color-background-discover-hover: #ff00ff;
36-
--token-color-background-discover-pressed: #660066;
37-
--token-color-background-information-normal: #00008b;
38-
--token-color-background-information-hover: #0000ff;
39-
--token-color-background-information-pressed: #000044;
40-
--token-color-background-disabled-normal: #555555;
41-
--token-color-background-disabled-hover: #444444;
42-
--token-color-background-disabled-pressed: #333333;
43-
--token-color-background-subtle-normal: transparent;
44-
--token-color-background-subtle-hover: rgba(255, 255, 255, 0.15);
45-
--token-color-background-subtle-pressed: rgba(255, 255, 255, 0.3);
46-
--token-color-surface-sunken-normal: #000000;
47-
--token-color-surface-default-normal: #111111;
48-
--token-color-surface-default-hover: #333333;
49-
--token-color-surface-default-pressed: #555555;
50-
--token-color-surface-raised-normal: #222222;
51-
--token-color-surface-raised-hover: #444444;
52-
--token-color-surface-raised-pressed: #666666;
53-
--token-color-surface-overlay-normal: #111111;
54-
--token-color-surface-overlay-hover: #222222;
55-
--token-color-surface-overlay-pressed: #333333;
56-
--token-color-surface-inverse-sunken-normal: #ffffff;
57-
--token-color-surface-inverse-default-normal: #f0f0f0;
58-
--token-color-surface-inverse-default-hover: #dcdcdc;
59-
--token-color-surface-inverse-default-pressed: #c8c8c8;
60-
--token-color-surface-inverse-overlay-normal: #e0e0e0;
61-
--token-color-surface-inverse-overlay-hover: #cccccc;
62-
--token-color-surface-inverse-overlay-pressed: #b8b8b8;
63-
--token-color-surface-inverse-raised-normal: #ffffff;
64-
--token-color-surface-inverse-raised-hover: #f8f8f8;
65-
--token-color-surface-inverse-raised-pressed: #e8e8e8;
66-
--token-color-blanket-normal: rgba(0, 0, 0, 0.7);
67-
--token-space-0: 0rem;
68-
--token-space-1: 0.25rem;
69-
--token-space-2: 0.5rem;
70-
--token-space-3: 0.75rem;
71-
--token-space-4: 1rem;
72-
--token-space-5: 1.5rem;
73-
--token-space-6: 2rem;
74-
--token-font-mono: JetBrains Mono;
75-
--token-font-main: Inter;
76-
--token-font-heading: Merriweather Sans;
4+
--token-color-text-default-normal: #FFFFFF;
5+
--token-color-text-default-secondary: #FFFF00;
6+
--token-color-text-default-tertiary: #00FFFF;
7+
--token-color-text-inverse-normal: #000000;
8+
--token-color-text-inverse-secondary: #333300;
9+
--token-color-text-inverse-tertiary: #003333;
10+
--token-color-text-danger: #FF0000;
11+
--token-color-text-warning: #FFD700;
12+
--token-color-text-success: #00FF00;
13+
--token-color-text-discover: #FF00FF;
14+
--token-color-text-information: #00BFFF;
15+
--token-color-text-disabled: #777777;
16+
--token-color-text-dark-normal: #FFFFFF;
17+
--token-color-text-dark-secondary: #FFFF00;
18+
--token-color-text-dark-tertiary: #00FFFF;
19+
--token-color-text-light-normal: #000000;
20+
--token-color-text-light-secondary: #333300;
21+
--token-color-text-light-tertiary: #003333;
22+
--token-color-background-danger-normal: #8B0000;
23+
--token-color-background-danger-hover: #B22222;
24+
--token-color-background-danger-pressed: #660000;
25+
--token-color-background-warning-normal: #B8860B;
26+
--token-color-background-warning-hover: #FFD700;
27+
--token-color-background-warning-pressed: #665500;
28+
--token-color-background-primary-normal: #000000;
29+
--token-color-background-primary-hover: #222222;
30+
--token-color-background-primary-pressed: #444444;
31+
--token-color-background-success-normal: #008000;
32+
--token-color-background-success-hover: #00FF00;
33+
--token-color-background-success-pressed: #004400;
34+
--token-color-background-discover-normal: #8B008B;
35+
--token-color-background-discover-hover: #FF00FF;
36+
--token-color-background-discover-pressed: #660066;
37+
--token-color-background-information-normal: #00008B;
38+
--token-color-background-information-hover: #0000FF;
39+
--token-color-background-information-pressed: #000044;
40+
--token-color-background-disabled-normal: #555555;
41+
--token-color-background-disabled-hover: #444444;
42+
--token-color-background-disabled-pressed: #333333;
43+
--token-color-background-subtle-normal: transparent;
44+
--token-color-background-subtle-hover: rgba(255, 255, 255, 0.15);
45+
--token-color-background-subtle-pressed: rgba(255, 255, 255, 0.30);
46+
--token-color-surface-sunken-normal: #000000;
47+
--token-color-surface-default-normal: #111111;
48+
--token-color-surface-default-hover: #333333;
49+
--token-color-surface-default-pressed: #555555;
50+
--token-color-surface-raised-normal: #222222;
51+
--token-color-surface-raised-hover: #444444;
52+
--token-color-surface-raised-pressed: #666666;
53+
--token-color-surface-overlay-normal: #111111;
54+
--token-color-surface-overlay-hover: #222222;
55+
--token-color-surface-overlay-pressed: #333333;
56+
--token-color-surface-inverse-sunken-normal: #FFFFFF;
57+
--token-color-surface-inverse-default-normal: #F0F0F0;
58+
--token-color-surface-inverse-default-hover: #DCDCDC;
59+
--token-color-surface-inverse-default-pressed: #C8C8C8;
60+
--token-color-surface-inverse-overlay-normal: #E0E0E0;
61+
--token-color-surface-inverse-overlay-hover: #CCCCCC;
62+
--token-color-surface-inverse-overlay-pressed: #B8B8B8;
63+
--token-color-surface-inverse-raised-normal: #FFFFFF;
64+
--token-color-surface-inverse-raised-hover: #F8F8F8;
65+
--token-color-surface-inverse-raised-pressed: #E8E8E8;
66+
--token-color-blanket-normal: rgba(0, 0, 0, 0.7);
67+
--token-space-0: 0rem;
68+
--token-space-1: 0.25rem;
69+
--token-space-2: 0.5rem;
70+
--token-space-3: 0.75rem;
71+
--token-space-4: 1rem;
72+
--token-space-5: 1.5rem;
73+
--token-space-6: 2rem;
74+
--token-font-mono: JetBrains Mono;
75+
--token-font-main: Inter;
76+
--token-font-heading: Merriweather Sans;
7777
}

0 commit comments

Comments
 (0)