Skip to content

Commit 6a19e94

Browse files
SarmagedSarmaged
committed
fix: variables
1 parent 5c6ab12 commit 6a19e94

12 files changed

+86
-86
lines changed

‎form.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/button.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
font-weight: 400;
1818
line-height: 1;
1919

20-
color: hsl(var(--sf-form-c-txt));
21-
background: hsl(var(--sf-form-c-bg) / 20%);
22-
border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
20+
color: hsl(var(--sf-c-form-txt));
21+
background: hsl(var(--sf-c-form-bg) / 20%);
22+
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
2323

2424
text-align: center;
2525
text-decoration: none;
@@ -45,7 +45,7 @@ a.sf-button:not([href]),
4545

4646
.sf-button:focus-visible
4747
{
48-
outline: 1px solid hsl(var(--sf-form-c-info));
48+
outline: 1px solid hsl(var(--sf-c-form-info));
4949
outline-offset: -1px;
5050
}
5151

‎src/checkbox-radio.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ label.sf-checkbox input::before
5353
height: 16px;
5454
content: '';
5555

56-
background-color: hsl(var(--sf-form-c-bg) / 20%);
57-
border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
56+
background-color: hsl(var(--sf-c-form-bg) / 20%);
57+
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
5858
}
5959
label.sf-radio input::after,
6060
label.sf-checkbox input::after
@@ -70,11 +70,11 @@ label.sf-checkbox input::after
7070

7171
label.sf-radio input:checked::before,
7272
label.sf-checkbox input:checked::before
73-
{ border-color: hsl(var(--sf-form-c-info)) }
73+
{ border-color: hsl(var(--sf-c-form-info)) }
7474

7575
label.sf-radio input:checked::after,
7676
label.sf-checkbox input:checked::after
77-
{ background-color: hsl(var(--sf-form-c-info)) }
77+
{ background-color: hsl(var(--sf-c-form-info)) }
7878

7979
label.sf-radio input::before,
8080
label.sf-radio input::after
@@ -84,7 +84,7 @@ label.sf-radio input::after
8484
.sf-checkbox input:focus-visible
8585
{
8686
border-color: transparent;
87-
outline: 2px solid hsl(var(--sf-form-c-info));
87+
outline: 2px solid hsl(var(--sf-c-form-info));
8888
outline-offset: 2px;
8989
}
9090
.sf-radio input:focus-visible { border-radius: 50% }

‎src/color.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525

2626
.sf-input[type='color']::-webkit-color-swatch-wrapper { padding: 3px }
2727
.sf-input[type='color']::-webkit-color-swatch {
28-
border: 2px solid hsl(var(--sf-form-c-white));
28+
border: 2px solid hsl(var(--sf-c-form-white));
2929
border-radius: 50%;
3030
}
3131
.sf-input[type='color']::-moz-color-swatch {
32-
border: 2px solid hsl(var(--sf-form-c-white));
32+
border: 2px solid hsl(var(--sf-c-form-white));
3333
border-radius: 50%;
3434
}
3535

‎src/file.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,17 @@
3636
text-transform: none;
3737
text-decoration: none;
3838

39-
color: hsl(var(--sf-form-c-txt));
40-
background: hsl(var(--sf-form-c-bg) / 20%);
41-
border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
39+
color: hsl(var(--sf-c-form-txt));
40+
background: hsl(var(--sf-c-form-bg) / 20%);
41+
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
4242

4343
height: 32px;
4444

4545
border-radius: var(--sf-form-radius);
4646
}
4747
.sf-input[type='file']:focus-visible { outline: none }
4848
.sf-input[type='file']:focus-visible::file-selector-button {
49-
outline: 1px solid hsl(var(--sf-form-c-info));
49+
outline: 1px solid hsl(var(--sf-c-form-info));
5050
outline-offset: -1px;
5151
}
5252

‎src/input.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828

2929
text-transform: none;
3030

31-
color: hsl(var(--sf-form-c-txt));
32-
background: hsl(var(--sf-form-c-bg) / 20%);
31+
color: hsl(var(--sf-c-form-txt));
32+
background: hsl(var(--sf-c-form-bg) / 20%);
3333

3434
border-style: solid;
35-
border-color: hsl(var(--sf-form-c-bd) / 20%);
35+
border-color: hsl(var(--sf-c-form-bd) / 20%);
3636
border-width: 0 0 1px;
3737
border-radius: 0;
3838

@@ -68,17 +68,17 @@
6868
}
6969
.sf-input:hover::-webkit-calendar-picker-indicator { opacity: 1 }
7070

71-
.sf-input::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) }
71+
.sf-input::placeholder { color: hsl(var(--sf-c-form-txt) / 40%) }
7272

7373
.sf-input:focus {
74-
border-color: transparent transparent hsl(var(--sf-form-c-info));
74+
border-color: transparent transparent hsl(var(--sf-c-form-info));
7575
outline: none;
7676
}
7777

7878
.sf-input[type='color']:focus-visible,
7979
.sf-input[type='image']:focus-visible,
8080
.sf-input[type='range']:focus-visible {
81-
outline: 2px solid hsl(var(--sf-form-c-info));
81+
outline: 2px solid hsl(var(--sf-c-form-info));
8282
outline-offset: 2px;
8383
}
8484

‎src/loading.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ a.sf-loading.sf-button:not([href]),
99
.sf-loading.sf-input:not([type='color']):disabled
1010
{
1111
--c1: transparent;
12-
--c2: hsl(var(--sf-form-c-loading) / 5%);
12+
--c2: hsl(var(--sf-c-form-loading) / 5%);
1313

1414
cursor: progress;
1515
background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 10px, var(--c2) 10px, var(--c2) 20px);

‎src/select.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525
.sf-select {
2626
cursor: pointer;
2727

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

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

3535
width: 100%;
@@ -50,7 +50,7 @@
5050
}
5151

5252
.sf-select:focus-visible {
53-
outline: 1px solid hsl(var(--sf-form-c-info));
53+
outline: 1px solid hsl(var(--sf-c-form-info));
5454
outline-offset: -1px;
5555
}
5656

‎src/switch.css

+10-10
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ label.sf-switch input[type='checkbox']::before {
5151
height: var(--sf-form-switch-size);
5252
content: '';
5353

54-
background: hsl(var(--sf-form-c-bd) / 20%);
54+
background: hsl(var(--sf-c-form-bd) / 20%);
5555
border-radius: calc(var(--sf-form-switch-size) / 2);
5656
}
5757
label.sf-switch input[type='checkbox']::after {
@@ -66,13 +66,13 @@ label.sf-switch input[type='checkbox']::after {
6666

6767
content: '';
6868

69-
background: hsl(var(--sf-form-c-white));
69+
background: hsl(var(--sf-c-form-white));
7070
border-radius: calc(var(--sf-form-switch-size) / 2);
71-
box-shadow: 0 0 0 1px hsl(var(--sf-form-c-white));
71+
box-shadow: 0 0 0 1px hsl(var(--sf-c-form-white));
7272

7373
transition: transform 0.05s ease-in;
7474
}
75-
label.sf-switch input[type='checkbox']:checked::before { background: hsl(var(--sf-form-c-info)) }
75+
label.sf-switch input[type='checkbox']:checked::before { background: hsl(var(--sf-c-form-info)) }
7676
label.sf-switch input[type='checkbox']:checked::after { transform: translate3d(var(--sf-form-switch-size), 0, 0) }
7777

7878
label.sf-switch input[type='radio'] ~ *,
@@ -82,8 +82,8 @@ label.sf-switch input[type='checkbox'] ~ *
8282
.sf-switch.multiple .sf-switch-toggle {
8383
display: inline-block;
8484

85-
background: hsl(var(--sf-form-c-bg) / 20%);
86-
box-shadow: 1px 2px 8px 0 hsl(var(--sf-form-c-bd) / 15%);
85+
background: hsl(var(--sf-c-form-bg) / 20%);
86+
box-shadow: 1px 2px 8px 0 hsl(var(--sf-c-form-bd) / 15%);
8787
}
8888
.sf-switch.multiple .sf-switch-toggle * { display: inline-block }
8989
.sf-switch.multiple .sf-switch-toggle label { position: relative }
@@ -95,7 +95,7 @@ label.sf-switch input[type='checkbox'] ~ *
9595

9696
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
9797

98-
background: hsl(var(--sf-form-c-bd) / 5%);
98+
background: hsl(var(--sf-c-form-bd) / 5%);
9999
}
100100

101101
.sf-switch.multiple input[type='checkbox'],
@@ -130,8 +130,8 @@ label.sf-switch input[type='checkbox'] ~ *
130130
.sf-switch.multiple input[type='checkbox']:checked ~ span,
131131
.sf-switch.multiple input[type='radio']:checked ~ span
132132
{
133-
color: hsl(var(--sf-form-c-white));
134-
background: hsl(var(--sf-form-c-info));
133+
color: hsl(var(--sf-c-form-white));
134+
background: hsl(var(--sf-c-form-info));
135135
}
136136

137137
.sf-switch.multiple.vert .sf-switch-toggle { flex-flow: column }
@@ -164,7 +164,7 @@ label.sf-switch input[type='checkbox'] ~ *
164164
.sf-switch input[type='radio']:focus-visible
165165
{
166166
border-color: transparent;
167-
outline: 2px solid hsl(var(--sf-form-c-info));
167+
outline: 2px solid hsl(var(--sf-c-form-info));
168168
}
169169
.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,
170170
.sf-switch:not(.multiple) input[type='radio']:focus-visible

‎src/textarea.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
font-weight: 400;
1414
line-height: 1.499535;
1515

16-
color: hsl(var(--sf-form-c-txt));
17-
background: hsl(var(--sf-form-c-bg) / 20%);
18-
border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
16+
color: hsl(var(--sf-c-form-txt));
17+
background: hsl(var(--sf-c-form-bg) / 20%);
18+
border: 1px solid hsl(var(--sf-c-form-bd) / 20%);
1919

2020
width: 100%;
2121
max-width: 100%;
@@ -32,7 +32,7 @@
3232
box-sizing: border-box;
3333
}
3434

35-
.sf-textarea::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) }
35+
.sf-textarea::placeholder { color: hsl(var(--sf-c-form-txt) / 40%) }
3636

3737
.sf-textarea:disabled {
3838
cursor: not-allowed;
@@ -43,7 +43,7 @@
4343
}
4444

4545
.sf-textarea:focus-visible {
46-
outline: 1px solid hsl(var(--sf-form-c-info));
46+
outline: 1px solid hsl(var(--sf-c-form-info));
4747
outline-offset: -1px;
4848
}
4949

‎src/validate.css

+8-8
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.sf-description, .sf-invalid, .sf-valid {
9-
color: hsl(var(--sf-form-c-txt) / 40%);
9+
color: hsl(var(--sf-c-form-txt) / 40%);
1010

1111
font-size: var(--sf-form-fz-small);
1212
font-family: var(--sf-form-ff);
@@ -22,8 +22,8 @@
2222
html .sf-description, html .sf-invalid, html .sf-valid { display: none }
2323
html .sf-description { display: block }
2424

25-
.sf-invalid { color: hsl(var(--sf-form-c-error)) }
26-
.sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) }
25+
.sf-invalid { color: hsl(var(--sf-c-form-error)) }
26+
.sf-valid:not(.sf-description) { color: hsl(var(--sf-c-form-txt)) }
2727

2828
.show.sf-description, .show.sf-invalid, .show.sf-valid { display: block }
2929
.hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none }
@@ -60,17 +60,17 @@ html .sf-description { display: block }
6060
.validates input[type='checkbox']:invalid ~ .sf-invalid { display: block }
6161
.validates input[type='checkbox']:valid ~ .sf-valid { display: block }
6262

63-
.validates:required:invalid:not(:focus) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
64-
.validates:required:invalid:not(:disabled) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
63+
.validates:required:invalid:not(:focus) { border-bottom-color: hsl(var(--sf-c-form-warning)) }
64+
.validates:required:invalid:not(:disabled) { border-bottom-color: hsl(var(--sf-c-form-warning)) }
6565

6666
.validates input[type='radio']:invalid::before,
6767
.validates input[type='checkbox']:invalid::before
68-
{ border-color: hsl(var(--sf-form-c-error)) }
68+
{ border-color: hsl(var(--sf-c-form-error)) }
6969

7070
.error:not(:disabled),
7171
.validates:required:invalid:focus
7272
{
73-
border-bottom-color: hsl(var(--sf-form-c-error));
73+
border-bottom-color: hsl(var(--sf-c-form-error));
7474
outline: none;
7575
}
7676

@@ -88,7 +88,7 @@ form.validates:invalid .sf-button[type='submit'] {
8888
cursor: not-allowed;
8989
text-decoration: none;
9090
opacity: var(--sf-disabled);
91-
-webkit-text-fill-color: hsl(var(--sf-form-c-txt));
91+
-webkit-text-fill-color: hsl(var(--sf-c-form-txt));
9292
}
9393

9494
/* /// */

0 commit comments

Comments
 (0)