@uncinq/design-tokens 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/tokens/primitive/blur.css +10 -0
- package/tokens/primitive/color.css +2 -0
- package/tokens/primitive/shadow.css +3 -0
- package/tokens/primitive.css +1 -0
- package/tokens/semantic/blur.css +6 -0
- package/tokens/semantic/color.css +9 -4
- package/tokens/semantic/form.css +49 -52
- package/tokens/semantic/icon.css +10 -0
- package/tokens/semantic/motion.css +3 -0
- package/tokens/semantic/opacity.css +1 -0
- package/tokens/semantic.css +2 -0
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@layer config {
|
|
3
3
|
:root {
|
|
4
4
|
--color-black: #000000;
|
|
5
|
+
--color-black-rgb: 0 0 0;
|
|
5
6
|
|
|
6
7
|
--color-amber-100: #fef3c7;
|
|
7
8
|
--color-amber-200: #fde68a;
|
|
@@ -114,6 +115,7 @@
|
|
|
114
115
|
--color-teal-900: #134e4a;
|
|
115
116
|
|
|
116
117
|
--color-white: #ffffff;
|
|
118
|
+
--color-white-rgb: 255 255 255;
|
|
117
119
|
|
|
118
120
|
--color-yellow-100: #fef9c3;
|
|
119
121
|
--color-yellow-200: #fef08a;
|
package/tokens/primitive.css
CHANGED
|
@@ -19,11 +19,15 @@
|
|
|
19
19
|
--color-brand-hover: var(--color-indigo-700);
|
|
20
20
|
--color-brand-strong: var(--color-indigo-900);
|
|
21
21
|
|
|
22
|
+
/* ── Overlay ───────────────────────────────────────────────────────── */
|
|
23
|
+
--color-backdrop: rgb(var(--color-black-rgb) / var(--opacity-backdrop));
|
|
24
|
+
|
|
22
25
|
/* ── Backgrounds ───────────────────────────────────────────────────── */
|
|
23
|
-
--color-bg:
|
|
24
|
-
--color-bg-accent:
|
|
25
|
-
--color-bg-media:
|
|
26
|
-
--color-bg-muted:
|
|
26
|
+
--color-bg: var(--color-white);
|
|
27
|
+
--color-bg-accent: var(--color-accent);
|
|
28
|
+
--color-bg-media: var(--color-gray-200);
|
|
29
|
+
--color-bg-muted: var(--color-gray-100);
|
|
30
|
+
--color-bg-surface: var(--color-bg);
|
|
27
31
|
|
|
28
32
|
/* ── Borders & focus ───────────────────────────────────────────────── */
|
|
29
33
|
--color-border: var(--color-gray-200);
|
|
@@ -45,6 +49,7 @@
|
|
|
45
49
|
--color-text-on-light: var(--color-gray-900);
|
|
46
50
|
--color-text-on-primary: var(--color-white);
|
|
47
51
|
--color-text-on-secondary: var(--color-white);
|
|
52
|
+
--color-text-on-surface: var(--color-text);
|
|
48
53
|
--color-text-on-success: var(--color-white);
|
|
49
54
|
--color-text-on-warning: var(--color-gray-900);
|
|
50
55
|
|
package/tokens/semantic/form.css
CHANGED
|
@@ -2,40 +2,43 @@
|
|
|
2
2
|
@layer config {
|
|
3
3
|
:root {
|
|
4
4
|
/* ── Base form ─────────────────────────────────────────────────────── */
|
|
5
|
-
--form-
|
|
6
|
-
--form-
|
|
7
|
-
--form-color-
|
|
8
|
-
--form-color-
|
|
9
|
-
--form-border
|
|
10
|
-
--form-border-
|
|
5
|
+
--form-border-radius: var(--radius-xs);
|
|
6
|
+
--form-border-width: var(--border-width-normal);
|
|
7
|
+
--form-color-accent: var(--color-black);
|
|
8
|
+
--form-color-bg: var(--color-white);
|
|
9
|
+
--form-color-border: var(--color-border);
|
|
10
|
+
--form-color-border-hover: var(--form-color-accent);
|
|
11
|
+
--form-color-text: var(--color-text);
|
|
11
12
|
|
|
12
13
|
/* ── Input ─────────────────────────────────────────────────────────── */
|
|
13
|
-
--input-
|
|
14
|
-
--input-
|
|
15
|
-
--input-color-
|
|
16
|
-
--input-color-
|
|
17
|
-
--input-color-
|
|
18
|
-
--input-
|
|
19
|
-
--input-
|
|
20
|
-
--input-padding:
|
|
14
|
+
--input-border-radius: var(--form-border-radius);
|
|
15
|
+
--input-border-width: var(--form-border-width);
|
|
16
|
+
--input-color-bg: var(--form-color-bg);
|
|
17
|
+
--input-color-border: var(--form-color-border);
|
|
18
|
+
--input-color-border-hover: var(--form-color-border-hover);
|
|
19
|
+
--input-color-placeholder: var(--color-text-muted);
|
|
20
|
+
--input-color-text: var(--form-color-text);
|
|
21
|
+
--input-padding: var(--spacing-control);
|
|
21
22
|
|
|
22
23
|
/* ── Textarea ──────────────────────────────────────────────────────── */
|
|
23
|
-
--textarea-color-background: var(--form-color-background);
|
|
24
|
-
--textarea-color-border: var(--form-color-border);
|
|
25
|
-
--textarea-color-border-hover: var(--textarea-color-border);
|
|
26
|
-
--textarea-color-placeholder: var(--color-text-muted);
|
|
27
|
-
--textarea-color-text: var(--form-color-text);
|
|
28
24
|
--textarea-border-radius: var(--form-border-radius);
|
|
29
25
|
--textarea-border-width: var(--form-border-width);
|
|
26
|
+
--textarea-color-bg: var(--form-color-bg);
|
|
27
|
+
--textarea-color-border: var(--form-color-border);
|
|
28
|
+
--textarea-color-border-hover: var(--form-color-border-hover);
|
|
29
|
+
--textarea-color-placeholder: var(--color-text-muted);
|
|
30
|
+
--textarea-color-text: var(--form-color-text);
|
|
30
31
|
|
|
31
32
|
/* ── Select ────────────────────────────────────────────────────────── */
|
|
32
|
-
--select-
|
|
33
|
-
--select-
|
|
34
|
-
--select-color-
|
|
35
|
-
--select-color-
|
|
36
|
-
--select-color-
|
|
37
|
-
--select-
|
|
38
|
-
--select-
|
|
33
|
+
--select-border-radius: var(--form-border-radius);
|
|
34
|
+
--select-border-width: var(--form-border-width);
|
|
35
|
+
--select-color-bg: var(--form-color-bg);
|
|
36
|
+
--select-color-border: var(--form-color-border);
|
|
37
|
+
--select-color-border-hover: var(--form-color-border-hover);
|
|
38
|
+
--select-color-optgroup: var(--color-text-muted);
|
|
39
|
+
--select-color-text: var(--form-color-text);
|
|
40
|
+
--select-icon: var(--icon-chevron);
|
|
41
|
+
--select-icon-size: var(--size-16);
|
|
39
42
|
|
|
40
43
|
/* ── Label ─────────────────────────────────────────────────────────── */
|
|
41
44
|
--label-color-text: var(--form-color-text);
|
|
@@ -51,36 +54,30 @@
|
|
|
51
54
|
--help-margin: 0;
|
|
52
55
|
|
|
53
56
|
/* ── Checkables (checkbox + radio shared) ──────────────────────────── */
|
|
54
|
-
--checkable-color
|
|
55
|
-
--checkable-
|
|
57
|
+
--checkable-color: var(--form-color-accent);
|
|
58
|
+
--checkable-size: 1.25em;
|
|
56
59
|
|
|
57
60
|
/* ── Checkbox ──────────────────────────────────────────────────────── */
|
|
58
|
-
--checkbox-
|
|
59
|
-
--checkbox-
|
|
60
|
-
--checkbox-color-
|
|
61
|
-
--checkbox-color-
|
|
62
|
-
--checkbox-color-
|
|
63
|
-
--checkbox-border-
|
|
64
|
-
--checkbox-border-
|
|
61
|
+
--checkbox-border-radius: 0;
|
|
62
|
+
--checkbox-border-width: var(--form-border-width);
|
|
63
|
+
--checkbox-color-bg: var(--form-color-bg);
|
|
64
|
+
--checkbox-color-bg-checked: var(--form-color-bg);
|
|
65
|
+
--checkbox-color-bg-hover: var(--form-color-bg);
|
|
66
|
+
--checkbox-color-border: var(--form-color-border);
|
|
67
|
+
--checkbox-color-border-checked: var(--checkable-color);
|
|
68
|
+
--checkbox-color-border-hover: var(--form-color-border-hover);
|
|
69
|
+
--checkbox-mask-checked: var(--icon-tick) center no-repeat;
|
|
70
|
+
--checkbox-mask-indeterminate: var(--icon-dash) center no-repeat;
|
|
65
71
|
|
|
66
72
|
/* ── Radio ─────────────────────────────────────────────────────────── */
|
|
67
|
-
--radio-
|
|
68
|
-
--radio-
|
|
69
|
-
--radio-color-
|
|
70
|
-
--radio-color-
|
|
71
|
-
--radio-color-
|
|
72
|
-
--radio-border
|
|
73
|
-
--radio-border-
|
|
74
|
-
|
|
75
|
-
/* ── Switch ────────────────────────────────────────────────────────── */
|
|
76
|
-
--switch-color-border: var(--checkable-color-border);
|
|
77
|
-
--switch-color-thumb: var(--color-white);
|
|
78
|
-
--switch-color-track: var(--form-color-background);
|
|
79
|
-
--switch-color-track-checked: var(--form-color-accent);
|
|
80
|
-
--switch-border-radius: var(--radius-pill);
|
|
81
|
-
--switch-border-width: var(--border-width-normal);
|
|
82
|
-
--switch-height: var(--size-24);
|
|
83
|
-
--switch-width: var(--size-40);
|
|
73
|
+
--radio-border-radius: var(--radius-pill);
|
|
74
|
+
--radio-border-width: var(--form-border-width);
|
|
75
|
+
--radio-color-bg: var(--form-color-bg);
|
|
76
|
+
--radio-color-bg-checked: var(--checkable-color);
|
|
77
|
+
--radio-color-bg-hover: var(--form-color-bg);
|
|
78
|
+
--radio-color-border: var(--form-color-border);
|
|
79
|
+
--radio-color-border-checked: var(--checkable-color);
|
|
80
|
+
--radio-color-border-hover: var(--form-color-border-hover);
|
|
84
81
|
|
|
85
82
|
/* ── Range ─────────────────────────────────────────────────────────── */
|
|
86
83
|
--range-color-accent: var(--form-color-accent);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* semantic/icon.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
--icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 5 8 11 14 5"/></svg>');
|
|
5
|
+
--icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>');
|
|
6
|
+
--icon-dash: 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>');
|
|
7
|
+
--icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="8" y1="3" x2="8" y2="13"/><line x1="3" y1="8" x2="13" y2="8"/></svg>');
|
|
8
|
+
--icon-tick: 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>');
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -29,6 +29,9 @@
|
|
|
29
29
|
0.962, 1.065, 1.12, 1.14, 1.12 30.9%, 1.034, 0.997, 0.986, 0.998, 1
|
|
30
30
|
);
|
|
31
31
|
|
|
32
|
+
/* ── Blur ───────────────────────────────────────────────────────────── */
|
|
33
|
+
--blur-overlay: 4px;
|
|
34
|
+
|
|
32
35
|
/* ── Transition shorthands ──────────────────────────────────────────── */
|
|
33
36
|
--transition-fast: all var(--duration-fast) var(--easing-default);
|
|
34
37
|
--transition-normal: all var(--duration-normal) var(--easing-default);
|
package/tokens/semantic.css
CHANGED
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
@layer config;
|
|
3
3
|
|
|
4
4
|
@import 'semantic/border.css';
|
|
5
|
+
@import 'semantic/blur.css';
|
|
5
6
|
@import 'semantic/color.css';
|
|
6
7
|
@import 'semantic/focus.css';
|
|
7
8
|
@import 'semantic/form.css';
|
|
8
9
|
@import 'semantic/grid.css';
|
|
10
|
+
@import 'semantic/icon.css';
|
|
9
11
|
@import 'semantic/motion.css';
|
|
10
12
|
@import 'semantic/opacity.css';
|
|
11
13
|
@import 'semantic/radius.css';
|