Skip to content

Commit 5988ad7

Browse files
sebousansebousan
committed
style: update semantic form token values for improved consistency
1 parent 46d9153 commit 5988ad7

1 file changed

Lines changed: 39 additions & 35 deletions

File tree

‎tokens/semantic/form.css‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
:root {
44
/* ── Base form ─────────────────────────────────────────────────────── */
55
--form-color-accent: var(--color-black);
6-
--form-color-background: var(--color-white);
6+
--form-color-bg: var(--color-white);
77
--form-color-border: var(--color-border);
88
--form-color-text: var(--color-text);
99
--form-border-radius: var(--radius-xs);
1010
--form-border-width: var(--border-width-normal);
1111

1212
/* ── Input ─────────────────────────────────────────────────────────── */
13-
--input-color-background: var(--form-color-background);
14-
--input-color-border: var(--form-color-border);
15-
--input-color-border-hover: var(--form-color-accent);
16-
--input-color-placeholder: var(--color-text-muted);
17-
--input-color-text: var(--form-color-text);
18-
--input-border-radius: var(--form-border-radius);
19-
--input-border-width: var(--form-border-width);
20-
--input-padding: var(--spacing-control);
13+
--input-color-bg: var(--form-color-bg);
14+
--input-color-border: var(--form-color-border);
15+
--input-color-border-hover: var(--form-color-accent);
16+
--input-color-placeholder: var(--color-text-muted);
17+
--input-color-text: var(--form-color-text);
18+
--input-border-radius: var(--form-border-radius);
19+
--input-border-width: var(--form-border-width);
20+
--input-padding: var(--spacing-control);
2121

2222
/* ── Textarea ──────────────────────────────────────────────────────── */
23-
--textarea-color-background: var(--form-color-background);
24-
--textarea-color-border: var(--form-color-border);
23+
--textarea-color-bg: var(--form-color-bg);
24+
--textarea-color-border: var(--form-color-border);
2525
--textarea-color-border-hover: var(--textarea-color-border);
2626
--textarea-color-placeholder: var(--color-text-muted);
2727
--textarea-color-text: var(--form-color-text);
2828
--textarea-border-radius: var(--form-border-radius);
2929
--textarea-border-width: var(--form-border-width);
3030

3131
/* ── Select ────────────────────────────────────────────────────────── */
32-
--select-color-background: var(--form-color-background);
33-
--select-color-border: var(--form-color-border);
34-
--select-color-border-hover: var(--select-color-border);
35-
--select-color-optgroup: var(--color-text-muted);
36-
--select-color-text: var(--form-color-text);
37-
--select-border-radius: var(--form-border-radius);
38-
--select-border-width: var(--form-border-width);
32+
--select-color-bg: var(--form-color-bg);
33+
--select-color-border: var(--form-color-border);
34+
--select-color-border-hover: var(--select-color-border);
35+
--select-color-optgroup: var(--color-text-muted);
36+
--select-color-text: var(--form-color-text);
37+
--select-border-radius: var(--form-border-radius);
38+
--select-border-width: var(--form-border-width);
3939

4040
/* ── Label ─────────────────────────────────────────────────────────── */
4141
--label-color-text: var(--form-color-text);
@@ -51,31 +51,35 @@
5151
--help-margin: 0;
5252

5353
/* ── Checkables (checkbox + radio shared) ──────────────────────────── */
54-
--checkable-color-border: var(--form-color-border);
55-
--checkable-color-border-checked: transparent;
54+
--checkable-color: var(--form-color-accent);
55+
--checkable-size: 1.25em;
5656

5757
/* ── Checkbox ──────────────────────────────────────────────────────── */
58-
--checkbox-color-background: var(--form-color-background);
59-
--checkbox-color-background-checked: transparent;
60-
--checkbox-color-border: var(--checkable-color-border);
61-
--checkbox-color-border-hover: var(--checkbox-color-border);
62-
--checkbox-color-checked: var(--form-color-accent);
63-
--checkbox-border-radius: 0;
64-
--checkbox-border-width: var(--form-border-width);
58+
--checkbox-color-bg: var(--form-color-bg);
59+
--checkbox-color-bg-checked: var(--form-color-bg);
60+
--checkbox-color-bg-hover: var(--form-color-bg);
61+
--checkbox-color-border: var(--form-color-border);
62+
--checkbox-color-border-checked: var(--checkable-color);
63+
--checkbox-color-border-hover: var(--form-color-border-hover);
64+
--checkbox-border-radius: 0;
65+
--checkbox-border-width: var(--form-border-width);
66+
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') center no-repeat;
67+
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>') center no-repeat;
6568

6669
/* ── Radio ─────────────────────────────────────────────────────────── */
67-
--radio-color-background: var(--form-color-background);
68-
--radio-color-border: var(--checkable-color-border);
69-
--radio-color-border-checked: var(--checkable-color-border-checked);
70-
--radio-color-border-hover: var(--radio-color-border);
71-
--radio-color-checked: var(--form-color-accent);
72-
--radio-border-radius: var(--radius-pill);
73-
--radio-border-width: var(--form-border-width);
70+
--radio-color-bg: var(--form-color-bg);
71+
--radio-color-bg-checked: var(--form-color-bg);
72+
--radio-color-bg-hover: var(--form-color-bg);
73+
--radio-color-border: var(--form-color-border);
74+
--radio-color-border-checked: var(--checkable-color);
75+
--radio-color-border-hover: var(--form-color-border-hover);
76+
--radio-border-radius: var(--radius-pill);
77+
--radio-border-width: var(--form-border-width);
7478

7579
/* ── Switch ────────────────────────────────────────────────────────── */
7680
--switch-color-border: var(--checkable-color-border);
7781
--switch-color-thumb: var(--color-white);
78-
--switch-color-track: var(--form-color-background);
82+
--switch-color-track: var(--form-color-bg);
7983
--switch-color-track-checked: var(--form-color-accent);
8084
--switch-border-radius: var(--radius-pill);
8185
--switch-border-width: var(--border-width-normal);

0 commit comments

Comments
 (0)