@uncinq/design-tokens 0.1.3 → 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.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/tokens/primitive/blur.css +10 -0
  3. package/tokens/primitive/color.css +2 -0
  4. package/tokens/primitive/shadow.css +3 -0
  5. package/tokens/primitive.css +1 -0
  6. package/tokens/semantic/blur.css +6 -0
  7. package/tokens/semantic/color.css +9 -4
  8. package/tokens/semantic/form.css +25 -32
  9. package/tokens/semantic/icon.css +10 -0
  10. package/tokens/semantic/motion.css +3 -0
  11. package/tokens/semantic/opacity.css +1 -0
  12. package/tokens/semantic.css +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Framework-agnostic CSS design tokens — primitive and semantic layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/primitive/blur.css ADDED
@@ -0,0 +1,10 @@
1
+ /* primitive/blur.css */
2
+ @layer config {
3
+ :root {
4
+ --blur-xs: 2px;
5
+ --blur-sm: 4px;
6
+ --blur-md: 8px;
7
+ --blur-lg: 16px;
8
+ --blur-xl: 32px;
9
+ }
10
+ }
package/tokens/primitive/color.css 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/shadow.css CHANGED
@@ -12,5 +12,8 @@
12
12
  --shadow-center-sm: 0 0 2px 2px rgb(0 0 0 / 0.05);
13
13
  --shadow-center-md: 0 0 5px 5px rgb(0 0 0 / 0.05);
14
14
  --shadow-center-lg: 0 0 10px 10px rgb(0 0 0 / 0.05);
15
+
16
+ /* Surface */
17
+ --shadow-surface: var(--shadow-sm);
15
18
  }
16
19
  }
package/tokens/primitive.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* @uncinq/design-tokens — primitive.css */
2
2
  @layer config;
3
3
 
4
+ @import 'primitive/blur.css';
4
5
  @import 'primitive/color.css';
5
6
  @import 'primitive/font.css';
6
7
  @import 'primitive/opacity.css';
package/tokens/semantic/blur.css ADDED
@@ -0,0 +1,6 @@
1
+ /* semantic/blur.css */
2
+ @layer config {
3
+ :root {
4
+ --blur-backdrop: var(--blur-sm);
5
+ }
6
+ }
package/tokens/semantic/color.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: var(--color-white);
24
- --color-bg-accent: var(--color-accent);
25
- --color-bg-media: var(--color-gray-200);
26
- --color-bg-muted: var(--color-gray-100);
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-color-accent: var(--color-black);
6
- --form-color-bg: var(--color-white);
7
- --form-color-border: var(--color-border);
8
- --form-color-text: var(--color-text);
9
- --form-border-radius: var(--radius-xs);
10
- --form-border-width: var(--border-width-normal);
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 ─────────────────────────────────────────────────────────── */
14
+ --input-border-radius: var(--form-border-radius);
15
+ --input-border-width: var(--form-border-width);
13
16
  --input-color-bg: var(--form-color-bg);
14
17
  --input-color-border: var(--form-color-border);
15
- --input-color-border-hover: var(--form-color-accent);
18
+ --input-color-border-hover: var(--form-color-border-hover);
16
19
  --input-color-placeholder: var(--color-text-muted);
17
20
  --input-color-text: var(--form-color-text);
18
- --input-border-radius: var(--form-border-radius);
19
- --input-border-width: var(--form-border-width);
20
21
  --input-padding: var(--spacing-control);
21
22
 
22
23
  /* ── Textarea ──────────────────────────────────────────────────────── */
24
+ --textarea-border-radius: var(--form-border-radius);
25
+ --textarea-border-width: var(--form-border-width);
23
26
  --textarea-color-bg: var(--form-color-bg);
24
27
  --textarea-color-border: var(--form-color-border);
25
- --textarea-color-border-hover: var(--textarea-color-border);
28
+ --textarea-color-border-hover: var(--form-color-border-hover);
26
29
  --textarea-color-placeholder: var(--color-text-muted);
27
30
  --textarea-color-text: var(--form-color-text);
28
- --textarea-border-radius: var(--form-border-radius);
29
- --textarea-border-width: var(--form-border-width);
30
31
 
31
32
  /* ── Select ────────────────────────────────────────────────────────── */
33
+ --select-border-radius: var(--form-border-radius);
34
+ --select-border-width: var(--form-border-width);
32
35
  --select-color-bg: var(--form-color-bg);
33
36
  --select-color-border: var(--form-color-border);
34
- --select-color-border-hover: var(--select-color-border);
37
+ --select-color-border-hover: var(--form-color-border-hover);
35
38
  --select-color-optgroup: var(--color-text-muted);
36
39
  --select-color-text: var(--form-color-text);
37
- --select-border-radius: var(--form-border-radius);
38
- --select-border-width: var(--form-border-width);
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);
@@ -55,36 +58,26 @@
55
58
  --checkable-size: 1.25em;
56
59
 
57
60
  /* ── Checkbox ──────────────────────────────────────────────────────── */
61
+ --checkbox-border-radius: 0;
62
+ --checkbox-border-width: var(--form-border-width);
58
63
  --checkbox-color-bg: var(--form-color-bg);
59
64
  --checkbox-color-bg-checked: var(--form-color-bg);
60
65
  --checkbox-color-bg-hover: var(--form-color-bg);
61
66
  --checkbox-color-border: var(--form-color-border);
62
67
  --checkbox-color-border-checked: var(--checkable-color);
63
68
  --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;
69
+ --checkbox-mask-checked: var(--icon-tick) center no-repeat;
70
+ --checkbox-mask-indeterminate: var(--icon-dash) center no-repeat;
68
71
 
69
72
  /* ── Radio ─────────────────────────────────────────────────────────── */
73
+ --radio-border-radius: var(--radius-pill);
74
+ --radio-border-width: var(--form-border-width);
70
75
  --radio-color-bg: var(--form-color-bg);
71
- --radio-color-bg-checked: var(--form-color-bg);
76
+ --radio-color-bg-checked: var(--checkable-color);
72
77
  --radio-color-bg-hover: var(--form-color-bg);
73
78
  --radio-color-border: var(--form-color-border);
74
79
  --radio-color-border-checked: var(--checkable-color);
75
80
  --radio-color-border-hover: var(--form-color-border-hover);
76
- --radio-border-radius: var(--radius-pill);
77
- --radio-border-width: var(--form-border-width);
78
-
79
- /* ── Switch ────────────────────────────────────────────────────────── */
80
- --switch-color-border: var(--checkable-color-border);
81
- --switch-color-thumb: var(--color-white);
82
- --switch-color-track: var(--form-color-bg);
83
- --switch-color-track-checked: var(--form-color-accent);
84
- --switch-border-radius: var(--radius-pill);
85
- --switch-border-width: var(--border-width-normal);
86
- --switch-height: var(--size-24);
87
- --switch-width: var(--size-40);
88
81
 
89
82
  /* ── Range ─────────────────────────────────────────────────────────── */
90
83
  --range-color-accent: var(--form-color-accent);
package/tokens/semantic/icon.css ADDED
@@ -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
+ }
package/tokens/semantic/motion.css CHANGED
@@ -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/opacity.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* semantic/opacity.css */
2
2
  @layer config {
3
3
  :root {
4
+ --opacity-backdrop: var(--opacity-50);
4
5
  --opacity-disabled: var(--opacity-25);
5
6
  --opacity-overlay: var(--opacity-75);
6
7
  --opacity-subtle: var(--opacity-10);
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';