Skip to content

Commit efb083a

Browse files
SarmagedSarmaged
committed
release: version 2025.1.18
1 parent 1894bbb commit efb083a

File tree

9 files changed

+83
-55
lines changed

9 files changed

+83
-55
lines changed

‎form.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "style-forge.form",
3-
"version": "2025.1.10",
3+
"version": "2025.1.18",
44
"description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.",
55
"type": "module",
66
"main": "form.css",

‎src/all.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/* Require */
2-
@import 'var.css';
2+
@import './var.css';
33

44
/* Inputs */
5-
@import 'input.css';
6-
@import 'button.css';
7-
@import 'checkbox-radio.css';
8-
@import 'select.css';
9-
@import 'textarea.css';
10-
@import 'color.css';
11-
@import 'file.css';
5+
@import './input.css';
6+
@import './button.css';
7+
@import './checkbox-radio.css';
8+
@import './select.css';
9+
@import './textarea.css';
10+
@import './color.css';
11+
@import './file.css';
1212

13-
@import 'switch.css';
14-
@import 'loading.css';
15-
@import 'validate.css';
16-
@import 'theme.css';
13+
@import './switch.css';
14+
@import './loading.css';
15+
@import './validate.css';
16+
@import './theme.css';

‎src/button.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
33
--sf-form-fz: 0.9375rem;
44
--sf-disabled: 0.4;
5-
--sf-form-radius: 3px;
5+
--sf-radius: 3px;
66
--sf-form-p-input-block: 0.5em;
77
--sf-form-p-input-inline: 0.5em;
88
}
@@ -19,13 +19,16 @@
1919

2020
color: hsl(var(--sf-c-form-txt));
2121
background: hsl(var(--sf-c-form-bg) / 20%);
22-
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
22+
23+
border-style: solid;
24+
border-color: hsl(var(--sf-c-form-bd) / 20%);
25+
border-width: 1px;
2326

2427
text-align: center;
2528
text-decoration: none;
2629
text-transform: none;
2730

28-
border-radius: var(--sf-form-radius);
31+
border-radius: var(--sf-radius);
2932

3033
height: 32px;
3134

@@ -56,15 +59,17 @@ html.var .sf-button
5659
font-size: 15px;
5760
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
5861

59-
color: hsl(0, 0%, 10%);
60-
background: hsla(0, 0%, 100%, 0.2);
61-
border: 1px solid hsla(0, 0%, 10%, 0.2);
62-
6362
border-radius: 3px;
6463

6564
padding: 8px;
6665
}
6766

67+
html.var .sf-button:not([class*='sf-c-']) {
68+
color: hsl(0, 0%, 10%);
69+
background: hsla(0, 0%, 100%, 0.2);
70+
}
71+
html.var .sf-button:not(.bdc\:i) { border-color: hsla(0, 0%, 10%, 0.2) }
72+
6873
html.var a.sf-button:not([href]),
6974
html.var .sf-button:disabled
7075
{ opacity: 0.4 }

‎src/file.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
33
--sf-form-fz: 0.9375rem;
44
--sf-disabled: 0.4;
5-
--sf-form-radius: 3px;
5+
--sf-radius: 3px;
66
}
77

88
.sf-input[type='file'] {
@@ -42,7 +42,7 @@
4242

4343
height: 32px;
4444

45-
border-radius: var(--sf-form-radius);
45+
border-radius: var(--sf-radius);
4646
}
4747
.sf-input[type='file']:focus-visible { outline: none }
4848
.sf-input[type='file']:focus-visible::file-selector-button {

‎src/input.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
--sf-disabled: 0.4;
77

8-
--sf-form-radius: 3px;
8+
--sf-radius: 3px;
99

1010
--sf-form-p-input-block: 0.5em;
1111
--sf-form-p-input-inline: 0.5em;
@@ -93,13 +93,14 @@ html.var .sf-input {
9393
font-size: 15px;
9494
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
9595

96+
padding: 8px;
97+
}
98+
99+
html.var .sf-input:not([class*='sf-c-']) {
96100
color: hsl(0, 0%, 10%);
97101
background: hsla(0, 0%, 90%, 0.2);
98-
99-
border-color: hsla(0, 0%, 10%, 0.2);
100-
101-
padding: 8px;
102102
}
103+
html.var .sf-input:not(.bdc\:i) { border-color: hsla(0, 0%, 10%, 0.2) }
103104

104105
html.var .sf-input::placeholder { color: hsla(0, 0%, 10%, 0.4) }
105106
html.var .sf-input:placeholder-shown { border-color: hsla(0, 0%, 10%, 0.2) }

‎src/select.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
--sf-form-fz: 0.9375rem;
44
--sf-lh-normal: 1.1875;
55
--sf-disabled: 0.4;
6-
--sf-form-radius: 3px;
6+
--sf-radius: 3px;
77
--sf-form-p-input-block: 0.5em;
88
--sf-form-p-input-inline: 0.5em;
99
}
@@ -27,9 +27,9 @@
2727

2828
background: hsl(var(--sf-c-form-bg) / 20%);
2929

30-
border-width: 1px;
3130
border-style: solid;
3231
border-color: hsl(var(--sf-c-form-bd) / 20%);
32+
border-width: 1px;
3333
border-radius: 0;
3434

3535
width: 100%;
@@ -70,10 +70,10 @@ html.var .sf-select option
7070
html.var .sf-select:not([multiple]) { padding: 0 0 0 8px }
7171
html.var .sf-select { padding: 8px 0 8px 8px }
7272

73-
html.var .sf-select {
73+
html.var .sf-select:not([class*='sf-c-']) {
7474
color: hsl(0, 0%, 10%);
7575
background: hsla(0, 0%, 90%, 0.2);
76-
border-color: hsla(0, 0%, 10%, 0.2);
7776
}
77+
html.var .sf-select:not(.bdc\:i) { border-color: hsla(0, 0%, 10%, 0.2) }
7878

7979
html.var .sf-select:disabled { opacity: 0.4 }

‎src/textarea.css‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
33
--sf-form-fz: 0.9375rem;
44
--sf-disabled: 0.4;
5-
--sf-form-radius: 3px;
5+
--sf-radius: 3px;
66
--sf-form-p-input-block: 0.5em;
77
--sf-form-p-input-inline: 0.5em;
88
}
@@ -15,15 +15,18 @@
1515

1616
color: hsl(var(--sf-c-form-txt));
1717
background: hsl(var(--sf-c-form-bg) / 20%);
18-
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
18+
19+
border-style: solid;
20+
border-color: hsl(var(--sf-c-form-bd) / 20%);
21+
border-width: 1px;
1922

2023
width: 100%;
2124
max-width: 100%;
2225
min-height: calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);
2326

2427
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
2528

26-
border-radius: var(--sf-form-radius);
29+
border-radius: var(--sf-radius);
2730

2831
resize: vertical;
2932

@@ -53,16 +56,19 @@ html.var .sf-textarea {
5356
font-size: 15px;
5457
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
5558

56-
color: hsl(0, 0%, 10%);
57-
background: hsla(0, 0%, 90%, 0.2);
58-
border: 1px solid hsla(0, 0%, 10%, 0.2);
59-
6059
min-height: calc((1.499535em + 2px + 0.5em) * 4);
6160

6261
padding: 8px;
6362

6463
border-radius: 3px;
6564
}
65+
66+
html.var .sf-textarea:not([class*='sf-c-']) {
67+
color: hsl(0, 0%, 10%);
68+
background: hsla(0, 0%, 90%, 0.2);
69+
}
70+
html.var .sf-textarea:not(.bdc\:i) { border-color: hsla(0, 0%, 10%, 0.2) }
71+
6672
html.var .sf-textarea::placeholder { color: hsla(0, 0%, 10%, 0.4) }
6773
html.var .sf-textarea:disabled { opacity: 0.4 }
6874
html.var .sf-textarea:focus:valid { border-color: hsl(200, 100%, 60%) }

‎src/theme.css‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,46 @@ html.var.dark .sf-input[type='file']::file-selector-button {
1212
html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,
1313
html.var.dark .sf-input[type='file']:focus-visible::file-selector-button { outline-color: hsl(219, 79%, 66%) }
1414

15-
html.var[data-theme='dark'] .sf-button,
16-
html.var[data-theme='dark'] .sf-input,
17-
html.var[data-theme='dark'] .sf-textarea,
18-
html.var[data-theme='dark'] .sf-select,
15+
html.var[data-theme='dark'] .sf-button:not([class*='sf-c-']),
16+
html.var[data-theme='dark'] .sf-input:not([class*='sf-c-']),
17+
html.var[data-theme='dark'] .sf-textarea:not([class*='sf-c-']),
18+
html.var[data-theme='dark'] .sf-select:not([class*='sf-c-']),
1919
html.var[data-theme='dark'] option,
20-
html.var.dark .sf-button,
21-
html.var.dark .sf-input,
22-
html.var.dark .sf-textarea,
23-
html.var.dark .sf-select,
20+
html.var.dark .sf-button:not([class*='sf-c-']),
21+
html.var.dark .sf-input:not([class*='sf-c-']),
22+
html.var.dark .sf-textarea:not([class*='sf-c-']),
23+
html.var.dark .sf-select:not([class*='sf-c-']),
2424
html.var.dark option
2525
{
2626
color: hsl(0, 0%, 90%);
2727
background-color: hsl(0, 0%, 20%);
28-
border-color: hsla(0, 0%, 100%, 0.2);
2928
}
3029

31-
html.var[data-theme='dark'] .sf-description,
32-
html.var[data-theme='dark'] .sf-valid,
33-
html.var.dark .sf-description,
34-
html.var.dark .sf-valid
30+
/* reset color */
31+
html.var[data-theme='dark'] .sf-button:not(.bdc\:i),
32+
html.var[data-theme='dark'] .sf-input:not(.bdc\:i),
33+
html.var[data-theme='dark'] .sf-textarea:not(.bdc\:i),
34+
html.var[data-theme='dark'] .sf-select:not(.bdc\:i),
35+
html.var[data-theme='dark'] option,
36+
html.var.dark .sf-button:not(.bdc\:i),
37+
html.var.dark .sf-input:not(.bdc\:i),
38+
html.var.dark .sf-textarea:not(.bdc\:i),
39+
html.var.dark .sf-select:not(.bdc\:i),
40+
html.var.dark option
41+
{ border-color: hsla(0, 0%, 100%, 0.2) }
42+
43+
html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),
44+
html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),
45+
html.var.dark .sf-description:not([class*='sf-c-']),
46+
html.var.dark .sf-valid:not([class*='sf-c-']),
47+
html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),
48+
html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),
49+
html.var.dark .sf-description:not([class*='sf-c-']),
50+
html.var.dark .sf-valid:not([class*='sf-c-'])
3551
{ color: hsla(0, 0%, 90%, 0.4) }
3652

37-
html.var[data-theme='dark'] .sf-invalid,
38-
html.var.dark .sf-invalid
53+
html.var[data-theme='dark'] .sf-invalid:not([class*='sf-c-']),
54+
html.var.dark .sf-invalid:not([class*='sf-c-'])
3955
{ color: hsl(0, 100%, 65%) }
4056

4157
html.var[data-theme='dark'] .sf-button:focus-visible,

0 commit comments

Comments
 (0)