@uncinq/design-tokens 0.1.1 → 0.1.3

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 (4) hide show
  1. package/package.json +1 -1
  2. package/tokens/semantic/color.css +4 -4
  3. package/tokens/semantic/form.css +39 -35
  4. package/tokens/semantic/ratio.css +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Framework-agnostic CSS design tokens — primitive and semantic layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/semantic/color.css CHANGED
@@ -51,10 +51,10 @@
51
51
  /* ── Semantic variants ─────────────────────────────────────────────── */
52
52
 
53
53
  /* Primary (alias of accent) */
54
- --color-primary: var(--color-accent);
55
- --color-primary-muted: var(--color-accent-muted);
56
- --color-primary-hover: var(--color-accent-hover);
57
- --color-primary-strong: var(--color-accent-strong);
54
+ --color-primary: var(--color-brand);
55
+ --color-primary-muted: var(--color-brand-muted);
56
+ --color-primary-hover: var(--color-brand-hover);
57
+ --color-primary-strong: var(--color-brand-strong);
58
58
 
59
59
  /* Secondary */
60
60
  --color-secondary: var(--color-gray-500);
package/tokens/semantic/form.css CHANGED
@@ -3,25 +3,25 @@
3
3
  :root {
4
4
  /* ── Base form ─────────────────────────────────────────────────────── */
5
5
  --form-color-accent: var(--color-black);
6
- --form-color-background: var(--color-white);
6
+ --form-color-bg: var(--color-white);
7
7
  --form-color-border: var(--color-border);
8
8
  --form-color-text: var(--color-text);
9
9
  --form-border-radius: var(--radius-xs);
10
10
  --form-border-width: var(--border-width-normal);
11
11
 
12
12
  /* ── 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);
21
21
 
22
22
  /* ── 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);
25
25
  --textarea-color-border-hover: var(--textarea-color-border);
26
26
  --textarea-color-placeholder: var(--color-text-muted);
27
27
  --textarea-color-text: var(--form-color-text);
@@ -29,13 +29,13 @@
29
29
  --textarea-border-width: var(--form-border-width);
30
30
 
31
31
  /* ── 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);
39
39
 
40
40
  /* ── Label ─────────────────────────────────────────────────────────── */
41
41
  --label-color-text: var(--form-color-text);
@@ -51,31 +51,35 @@
51
51
  --help-margin: 0;
52
52
 
53
53
  /* ── 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;
56
56
 
57
57
  /* ── 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;
65
68
 
66
69
  /* ── 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);
74
78
 
75
79
  /* ── Switch ────────────────────────────────────────────────────────── */
76
80
  --switch-color-border: var(--checkable-color-border);
77
81
  --switch-color-thumb: var(--color-white);
78
- --switch-color-track: var(--form-color-background);
82
+ --switch-color-track: var(--form-color-bg);
79
83
  --switch-color-track-checked: var(--form-color-accent);
80
84
  --switch-border-radius: var(--radius-pill);
81
85
  --switch-border-width: var(--border-width-normal);
package/tokens/semantic/ratio.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* semantic/ratio.css */
2
2
  @layer config {
3
3
  :root {
4
+ /* Generic ratios */
4
5
  --ratio-1-1: 1 / 1;
5
6
  --ratio-2-3: 2 / 3;
6
7
  --ratio-3-2: 3 / 2;
@@ -9,5 +10,14 @@
9
10
  --ratio-9-16: 9 / 16;
10
11
  --ratio-16-9: 16 / 9;
11
12
  --ratio-21-9: 21 / 9;
13
+
14
+ /* Specific ratios */
15
+ --ratio-banner: 21 / 9;
16
+ --ratio-cinema: 21 / 9;
17
+ --ratio-hero: 4 / 1;
18
+ --ratio-portrait: 4 / 5;
19
+ --ratio-square: 1 / 1;
20
+ --ratio-story: 9 / 16;
21
+ --ratio-video: 16 / 9;
12
22
  }
13
23
  }