@uncinq/design-tokens 0.1.0 → 0.1.2

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 (7) hide show
  1. package/package.json +1 -1
  2. package/tokens/semantic/color.css +26 -20
  3. package/tokens/semantic/ratio.css +10 -0
  4. package/tokens/semantic/spacing.css +25 -5
  5. package/tokens/semantic/typography.css +32 -21
  6. package/tokens/semantic.css +0 -1
  7. package/tokens/semantic/fluid.css +0 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
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
@@ -3,10 +3,16 @@
3
3
  * Purposeful color aliases — reference primitives, never raw values.
4
4
  * Override --color-brand (and optionally --color-*) in your project to rebrand.
5
5
  *
6
- * Default brand: claret (deep red).
6
+ * Default brand: indigo.
7
7
  */
8
8
  @layer config {
9
9
  :root {
10
+ /* ── Accent ─────────────────────────────────────────────────────────── */
11
+ --color-accent: var(--color-indigo-600);
12
+ --color-accent-muted: var(--color-indigo-100);
13
+ --color-accent-hover: var(--color-indigo-700);
14
+ --color-accent-strong: var(--color-indigo-900);
15
+
10
16
  /* ── Brand ─────────────────────────────────────────────────────────── */
11
17
  --color-brand: var(--color-indigo-600);
12
18
  --color-brand-muted: var(--color-indigo-100);
@@ -15,16 +21,16 @@
15
21
 
16
22
  /* ── Backgrounds ───────────────────────────────────────────────────── */
17
23
  --color-bg: var(--color-white);
18
- --color-bg-accent: var(--color-brand);
24
+ --color-bg-accent: var(--color-accent);
19
25
  --color-bg-media: var(--color-gray-200);
20
26
  --color-bg-muted: var(--color-gray-100);
21
27
 
22
28
  /* ── Borders & focus ───────────────────────────────────────────────── */
23
29
  --color-border: var(--color-gray-200);
24
- --color-focus: var(--color-brand);
30
+ --color-focus: var(--color-accent);
25
31
 
26
32
  /* ── Text ──────────────────────────────────────────────────────────── */
27
- --color-active: var(--color-brand);
33
+ --color-active: var(--color-accent);
28
34
  --color-credit: var(--color-text-muted);
29
35
  --color-heading: var(--color-black);
30
36
  --color-link: var(--color-black);
@@ -44,20 +50,20 @@
44
50
 
45
51
  /* ── Semantic variants ─────────────────────────────────────────────── */
46
52
 
47
- /* Primary (alias of brand) */
48
- --color-primary: var(--color-brand);
49
- --color-primary-muted: var(--color-brand-muted);
50
- --color-primary-hover: var(--color-brand-hover);
53
+ /* Primary (alias of accent) */
54
+ --color-primary: var(--color-brand);
55
+ --color-primary-muted: var(--color-brand-muted);
56
+ --color-primary-hover: var(--color-brand-hover);
51
57
  --color-primary-strong: var(--color-brand-strong);
52
58
 
53
59
  /* Secondary */
54
- --color-secondary: var(--color-gray-500);
55
- --color-secondary-muted: var(--color-gray-100);
60
+ --color-secondary: var(--color-gray-500);
61
+ --color-secondary-muted: var(--color-gray-100);
56
62
  --color-secondary-strong: var(--color-gray-800);
57
63
 
58
64
  /* Danger */
59
- --color-danger: var(--color-red-500);
60
- --color-danger-muted: var(--color-red-100);
65
+ --color-danger: var(--color-red-500);
66
+ --color-danger-muted: var(--color-red-100);
61
67
  --color-danger-strong: var(--color-red-900);
62
68
 
63
69
  /* Dark */
@@ -66,23 +72,23 @@
66
72
  --color-dark-strong: var(--color-black);
67
73
 
68
74
  /* Info */
69
- --color-info: var(--color-blue-500);
70
- --color-info-muted: var(--color-blue-100);
75
+ --color-info: var(--color-blue-500);
76
+ --color-info-muted: var(--color-blue-100);
71
77
  --color-info-strong: var(--color-blue-900);
72
78
 
73
79
  /* Light */
74
- --color-light: var(--color-gray-200);
75
- --color-light-muted: var(--color-gray-100);
80
+ --color-light: var(--color-gray-200);
81
+ --color-light-muted: var(--color-gray-100);
76
82
  --color-light-strong: var(--color-gray-700);
77
83
 
78
84
  /* Success */
79
- --color-success: var(--color-green-500);
80
- --color-success-muted: var(--color-green-100);
85
+ --color-success: var(--color-green-500);
86
+ --color-success-muted: var(--color-green-100);
81
87
  --color-success-strong: var(--color-green-900);
82
88
 
83
89
  /* Warning */
84
- --color-warning: var(--color-yellow-500);
85
- --color-warning-muted: var(--color-yellow-100);
90
+ --color-warning: var(--color-yellow-500);
91
+ --color-warning-muted: var(--color-yellow-100);
86
92
  --color-warning-strong: var(--color-yellow-900);
87
93
  }
88
94
  }
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
  }
package/tokens/semantic/spacing.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* semantic/spacing.css */
2
2
  @layer config {
3
3
  :root {
4
+
4
5
  /* ── T-shirt scale ──────────────────────────────────────────────────── */
5
6
  --spacing-2xs: var(--size-5);
6
7
  --spacing-xs: var(--size-10);
@@ -11,11 +12,30 @@
11
12
  --spacing-2xl: var(--size-100);
12
13
  --spacing-3xl: var(--size-150);
13
14
 
15
+ /* ── Fluid spacing scale ────────────────────────────────────────────── */
16
+ /*
17
+ * Fluid spacing using the Utopia method — https://utopia.fyi
18
+ *
19
+ * Each value is a clamp(min, intercept + slope×vw, max) expression where
20
+ * intercept and slope are calculated so the spacing equals exactly `min`
21
+ * at a 360px viewport and exactly `max` at a 1440px viewport.
22
+ *
23
+ * slope = (max_px − min_px) / (1440 − 360)
24
+ * intercept = min_px − slope × 360 (converted to rem)
25
+ */
26
+ --spacing-fluid-2xs: clamp(0.3125rem, 0.2083rem + 0.4630vw, 0.625rem); /* 5 → 10px */
27
+ --spacing-fluid-xs: clamp(0.625rem, 0.4167rem + 0.9259vw, 1.25rem); /* 10 → 20px */
28
+ --spacing-fluid-sm: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem); /* 20 → 40px */
29
+ --spacing-fluid-md: clamp(1.875rem, 1.25rem + 2.7778vw, 3.75rem); /* 30 → 60px */
30
+ --spacing-fluid-lg: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem); /* 40 → 80px */
31
+ --spacing-fluid-xl: clamp(3.125rem, 2.0833rem + 4.6296vw, 6.25rem); /* 50 → 100px */
32
+ --spacing-fluid-2xl: clamp(3.75rem, 2.5rem + 5.5556vw, 7.5rem); /* 60 → 120px */
33
+
14
34
  /* ── Purposeful aliases ─────────────────────────────────────────────── */
15
- --spacing-control: var(--spacing-xs); /* padding inside interactive controls */
16
- --spacing-heading: var(--spacing-sm); /* gap below headings */
17
- --spacing-section: var(--spacing-2xl); /* vertical rhythm between sections */
18
- --spacing-surface: var(--spacing-sm); /* padding inside surfaces (card, panel) */
19
- --spacing-typography: var(--spacing-xs); /* gap between typographic elements */
35
+ --spacing-control: var(--spacing-xs); /* padding inside interactive controls */
36
+ --spacing-heading: var(--spacing-fluid-sm); /* gap below headings */
37
+ --spacing-section: var(--spacing-fluid-2xl); /* vertical rhythm between sections */
38
+ --spacing-surface: var(--spacing-fluid-sm); /* padding inside surfaces (card, panel) */
39
+ --spacing-typography: var(--spacing-fluid-xs); /* gap between typographic elements */
20
40
  }
21
41
  }
package/tokens/semantic/typography.css CHANGED
@@ -26,33 +26,44 @@
26
26
  --font-size-sm: var(--size-16);
27
27
  --font-size-md: var(--size-18);
28
28
  --font-size-lg: var(--size-24);
29
- --font-size-xl: var(--size-40);
29
+ --font-size-xl: var(--size-48);
30
30
  --font-size-2xl: var(--size-64);
31
31
  --font-size-display: var(--size-96); /* hero / marketing */
32
32
 
33
- /* ── Body ───────────────────────────────────────────────────────────── */
34
- --font-size-text: var(--font-size-sm);
35
-
36
- /* ── Headings ───────────────────────────────────────────────────────── */
37
- --font-size-heading-01: var(--font-size-xl);
38
- --font-size-heading-02: var(--font-size-lg);
39
- --font-size-heading-03: var(--font-size-md);
40
- --font-size-heading-04: var(--font-size-sm);
41
- --font-size-heading-05: var(--font-size-sm);
42
- --font-size-heading-06: var(--font-size-sm);
43
-
44
33
  /* ── Fluid font sizes ───────────────────────────────────────────────── */
45
34
  /*
46
- * clamp(min, preferred, max) — scales between ~320px and ~1440px viewport.
47
- * Use these instead of fixed sizes for responsive typography without breakpoints.
48
- * $type: dimension
35
+ * Fluid typography using the Utopia method — https://utopia.fyi
36
+ *
37
+ * Each value is a clamp(min, intercept + slope×vw, max) expression where
38
+ * intercept and slope are calculated so the font size equals exactly `min`
39
+ * at a 320px viewport and exactly `max` at a 1440px viewport, with a
40
+ * perfectly linear scale in between.
41
+ *
42
+ * slope = (max_px − min_px) / (1440 − 320)
43
+ * intercept = min_px − slope × 320 (converted to rem)
44
+ *
45
+ * Use these instead of fixed T-shirt sizes wherever you want type to
46
+ * scale continuously with the viewport, without breakpoints.
49
47
  */
50
- --font-size-fluid-xs: clamp(0.875rem, 1.5vw, 1rem); /* 14 → 16px */
51
- --font-size-fluid-sm: clamp(1rem, 2vw, 1.125rem); /* 16 → 18px */
52
- --font-size-fluid-md: clamp(1.125rem, 2.5vw, 1.5rem); /* 18 → 24px */
53
- --font-size-fluid-lg: clamp(1.5rem, 4vw, 2.5rem); /* 24 → 40px */
54
- --font-size-fluid-xl: clamp(2.5rem, 6vw, 4rem); /* 40 → 64px */
55
- --font-size-fluid-display: clamp(4rem, 8vw, 6rem); /* 64 → 96px */
48
+ --font-size-fluid-2xs: clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem); /* 10 → 12px */
49
+ --font-size-fluid-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem); /* 12 → 14px */
50
+ --font-size-fluid-sm: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem); /* 14 → 16px */
51
+ --font-size-fluid-md: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem); /* 16 → 18px */
52
+ --font-size-fluid-lg: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem); /* 18 → 24px */
53
+ --font-size-fluid-xl: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem); /* 24 → 48px */
54
+ --font-size-fluid-2xl: clamp(3rem, 2.7143rem + 1.4286vw, 4rem); /* 48 → 64px */
55
+ --font-size-fluid-display: clamp(4rem, 3.4286rem + 2.8571vw, 6rem); /* 64 → 96px */
56
+
57
+ /* ── Body ───────────────────────────────────────────────────────────── */
58
+ --font-size-text: var(--font-size-fluid-md);
59
+
60
+ /* ── Headings ───────────────────────────────────────────────────────── */
61
+ --font-size-heading-01: var(--font-size-fluid-xl);
62
+ --font-size-heading-02: var(--font-size-fluid-lg);
63
+ --font-size-heading-03: var(--font-size-fluid-md);
64
+ --font-size-heading-04: var(--font-size-fluid-sm);
65
+ --font-size-heading-05: var(--font-size-fluid-sm);
66
+ --font-size-heading-06: var(--font-size-fluid-sm);
56
67
 
57
68
  /* ── Readability ────────────────────────────────────────────────────── */
58
69
  /*
package/tokens/semantic.css CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  @import 'semantic/border.css';
5
5
  @import 'semantic/color.css';
6
- @import 'semantic/fluid.css';
7
6
  @import 'semantic/focus.css';
8
7
  @import 'semantic/form.css';
9
8
  @import 'semantic/grid.css';
package/tokens/semantic/fluid.css DELETED
@@ -1,30 +0,0 @@
1
- /* semantic/fluid.css */
2
- /*
3
- * Responsive fluid scales using clamp().
4
- * Viewport range: 360px → 1440px (1080px range).
5
- * preferred = intercept + slope×vw (exact linear interpolation, no approximation)
6
- * $type: dimension
7
- *
8
- * https://utopia.fyi/clamp/calculator/
9
- */
10
- @layer config {
11
- :root {
12
-
13
- /* ── Fluid text scale ───────────────────────────────────────────────── */
14
- --fluid-text-2xs: clamp(0.5625rem, 0.5rem + 0.2778vw, 0.75rem); /* 9 → 12px */
15
- --fluid-text-xs: clamp(0.75rem, 0.625rem + 0.5556vw, 1.125rem); /* 12 → 18px */
16
- --fluid-text-sm: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem); /* 18 → 24px */
17
- --fluid-text-md: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem); /* 24 → 36px */
18
- --fluid-text-lg: clamp(2.25rem, 2rem + 1.1111vw, 3rem); /* 36 → 48px */
19
- --fluid-text-xl: clamp(3rem, 2.5rem + 2.2222vw, 4.5rem); /* 48 → 72px */
20
- --fluid-text-2xl: clamp(4.5rem, 4rem + 2.2222vw, 6rem); /* 72 → 96px */
21
-
22
- /* ── Fluid spacing scale ────────────────────────────────────────────── */
23
- --fluid-spacing-xs: clamp(0.625rem, 0.4167rem + 0.9259vw, 1.25rem); /* 10 → 20px */
24
- --fluid-spacing-sm: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem); /* 20 → 40px */
25
- --fluid-spacing-md: clamp(1.875rem, 1.25rem + 2.7778vw, 3.75rem); /* 30 → 60px */
26
- --fluid-spacing-lg: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem); /* 40 → 80px */
27
- --fluid-spacing-xl: clamp(3.125rem, 2.0833rem + 4.6296vw, 6.25rem); /* 50 → 100px */
28
-
29
- }
30
- }