@ankh-studio/tokens 0.5.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 (6) hide show
  1. package/README.md +149 -0
  2. package/dist/colors/blue.css +70 -0
  3. package/dist/colors/grayscale.css +70 -0
  4. package/dist/colors/purple.css +70 -0
  5. package/dist/tokens.css +280 -0
  6. package/package.json +45 -0
package/README.md ADDED
@@ -0,0 +1,149 @@
1
+ # @ankh-studio/tokens
2
+
3
+ Low-level CSS design tokens for building themes. **If you're building an application, use `@ankh-studio/themes` instead.**
4
+
5
+ This package provides the foundational design tokens consumed by `@ankh-studio/themes`. It's useful if you're creating custom themes or need granular control over the design system.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @ankh-studio/tokens
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```css
16
+ @import '@ankh-studio/tokens/tokens.css';
17
+ @import '@ankh-studio/tokens/colors/grayscale.css';
18
+ ```
19
+
20
+ Tokens are on `:root` and wrapped in `@layer tokens`.
21
+
22
+ ## Token Reference
23
+
24
+ ### Spacing
25
+
26
+ | Token | Value |
27
+ |-------|-------|
28
+ | `--space-1` | 4px |
29
+ | `--space-2` | 8px |
30
+ | `--space-3` | 12px |
31
+ | `--space-4` | 16px |
32
+ | `--space-5` | 24px |
33
+ | `--space-6` | 32px |
34
+ | `--space-7` | 40px |
35
+ | `--space-8` | 48px |
36
+ | `--space-9` | 64px |
37
+
38
+ ### Typography
39
+
40
+ | Token | Value |
41
+ |-------|-------|
42
+ | `--font-sans` | system-ui, -apple-system, 'Segoe UI', sans-serif |
43
+ | `--font-serif` | georgia, 'Times New Roman', serif |
44
+ | `--font-mono` | 'SF Mono', monaco, 'Courier New', monospace |
45
+ | `--font-size-1` to `--font-size-11` | 11px to 57px |
46
+ | `--font-weight-light/regular/medium/bold` | 300/400/500/700 |
47
+ | `--line-height-1` to `--line-height-11` | 16px to 64px |
48
+
49
+ ### Radius
50
+
51
+ | Token | Value |
52
+ |-------|-------|
53
+ | `--radius-none` | 0 |
54
+ | `--radius-xs` | 4px |
55
+ | `--radius-sm` | 8px |
56
+ | `--radius-md` | 12px |
57
+ | `--radius-lg` | 16px |
58
+ | `--radius-xl` | 28px |
59
+ | `--radius-full` | 9999px |
60
+
61
+ ### Shadow
62
+
63
+ | Token | Description |
64
+ |-------|-------------|
65
+ | `--shadow-0` | none |
66
+ | `--shadow-1` | Subtle |
67
+ | `--shadow-2` | Low |
68
+ | `--shadow-3` | Medium |
69
+ | `--shadow-4` | High |
70
+ | `--shadow-5` | Highest |
71
+
72
+ ### Motion (M3 Expressive)
73
+
74
+ #### Spring Tokens (for JS animation libraries)
75
+
76
+ | Token | Damping | Stiffness | Use Case |
77
+ |-------|---------|-----------|----------|
78
+ | `--spring-fast-spatial-*` | 0.9 | 1400 | Small components (buttons, switches) |
79
+ | `--spring-default-spatial-*` | 0.9 | 700 | Partial screen (sheets, drawers) |
80
+ | `--spring-slow-spatial-*` | 0.9 | 300 | Full screen transitions |
81
+ | `--spring-fast-effects-*` | 1.0 | 3800 | Small component color/opacity |
82
+ | `--spring-default-effects-*` | 1.0 | 1600 | Partial screen effects |
83
+ | `--spring-slow-effects-*` | 1.0 | 800 | Full screen effects |
84
+
85
+ **Spatial** springs allow overshoot (position, scale). **Effects** springs don't (color, opacity).
86
+
87
+ #### Duration Tokens (for CSS)
88
+
89
+ | Token | Value |
90
+ |-------|-------|
91
+ | `--duration-instant` | 0ms |
92
+ | `--duration-short1` to `short4` | 50-200ms |
93
+ | `--duration-medium1` to `medium4` | 250-400ms |
94
+ | `--duration-long1` to `long4` | 450-600ms |
95
+ | `--duration-extra-long1` to `extra-long4` | 700-1000ms |
96
+
97
+ #### Easing Tokens (for CSS)
98
+
99
+ | Token | Value | Use Case |
100
+ |-------|-------|----------|
101
+ | `--easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Utility animations |
102
+ | `--easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) | Exiting screen |
103
+ | `--easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) | Entering screen |
104
+ | `--easing-emphasized` | cubic-bezier(0.2, 0, 0, 1) | Expressive M3 animations |
105
+ | `--easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) | Expressive exit |
106
+ | `--easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) | Expressive enter |
107
+
108
+ ### Colors
109
+
110
+ | Token | Description |
111
+ |-------|-------------|
112
+ | `--color-primary` | Primary brand |
113
+ | `--color-on-primary` | Text on primary |
114
+ | `--color-surface` | Surface background |
115
+ | `--color-on-surface` | Text on surface |
116
+ | `--color-error` | Error states |
117
+ | `--color-outline` | Borders |
118
+
119
+ ## Color Palettes
120
+
121
+ - `colors/grayscale.css` - Neutral (default)
122
+ - `colors/blue.css` - Corporate blue
123
+ - `colors/purple.css` - Creative purple
124
+
125
+ Colors use `light-dark()` for automatic dark mode:
126
+
127
+ ```css
128
+ --color-surface: light-dark(oklch(99% 0.005 264deg), oklch(15% 0.005 264deg));
129
+ ```
130
+
131
+ ## Architecture
132
+
133
+ - **CSS Cascade Layers** - `@layer tokens` for clean cascade control
134
+ - **`light-dark()` function** - Automatic dark mode colors
135
+ - **OKLCH color space** - Perceptual uniformity
136
+ - **Scaling support** - `var(--scaling, 1)` multiplier
137
+
138
+ ## Browser Support
139
+
140
+ Requires browsers supporting:
141
+ - CSS `light-dark()` function
142
+ - OKLCH color space
143
+ - CSS Cascade Layers (`@layer`)
144
+
145
+ **Supported:** Chrome 123+, Safari 17.5+, Firefox 120+
146
+
147
+ ## License
148
+
149
+ MIT
package/dist/colors/blue.css ADDED
@@ -0,0 +1,70 @@
1
+ /**
2
+ * Ankh Studio - Blue Color Palette
3
+ * Corporate blue for healthcare/enterprise applications
4
+ */
5
+
6
+ @layer tokens {
7
+ :root {
8
+ color-scheme: light dark;
9
+
10
+ /* Primary - Corporate Blue */
11
+ --color-primary: light-dark(oklch(52% 0.14 250deg), oklch(75% 0.1 250deg));
12
+ --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(15% 0.14 250deg));
13
+ --color-primary-container: light-dark(oklch(85% 0.08 250deg), oklch(30% 0.14 250deg));
14
+ --color-on-primary-container: light-dark(oklch(20% 0.14 250deg), oklch(88% 0.08 250deg));
15
+
16
+ /* Secondary - Steel Blue/Gray */
17
+ --color-secondary: light-dark(oklch(50% 0.05 245deg), oklch(68% 0.04 245deg));
18
+ --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(12% 0.05 245deg));
19
+ --color-secondary-container: light-dark(oklch(88% 0.03 245deg), oklch(28% 0.05 245deg));
20
+ --color-on-secondary-container: light-dark(oklch(20% 0.05 245deg), oklch(88% 0.03 245deg));
21
+
22
+ /* Tertiary - Teal/Cyan */
23
+ --color-tertiary: light-dark(oklch(58% 0.12 195deg), oklch(72% 0.09 195deg));
24
+ --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(18% 0.12 195deg));
25
+ --color-tertiary-container: light-dark(oklch(88% 0.06 195deg), oklch(32% 0.12 195deg));
26
+ --color-on-tertiary-container: light-dark(oklch(22% 0.12 195deg), oklch(90% 0.06 195deg));
27
+
28
+ /* Error */
29
+ --color-error: light-dark(oklch(66.4% 0.195 29deg), oklch(68.5% 0.195 29deg));
30
+ --color-on-error: light-dark(oklch(20% 0.05 29deg), oklch(20% 0.05 29deg));
31
+ --color-error-container: light-dark(oklch(92% 0.05 29deg), oklch(66.4% 0.195 29deg));
32
+ --color-on-error-container: light-dark(oklch(20% 0.05 29deg), oklch(92% 0.05 29deg));
33
+
34
+ /* Surface */
35
+ --color-surface: light-dark(oklch(99% 0.003 245deg), oklch(7% 0.003 245deg));
36
+ --color-on-surface: light-dark(oklch(12% 0.003 245deg), oklch(92% 0.003 245deg));
37
+ --color-surface-variant: light-dark(oklch(92% 0.01 245deg), oklch(30% 0.02 245deg));
38
+ --color-on-surface-variant: light-dark(oklch(32% 0.02 245deg), oklch(82% 0.01 245deg));
39
+ --color-surface-container: light-dark(oklch(96% 0.005 245deg), oklch(15% 0.003 245deg));
40
+ --color-surface-container-low: light-dark(oklch(98% 0.003 245deg), oklch(12% 0.003 245deg));
41
+ --color-surface-container-high: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
42
+ --color-surface-container-highest: light-dark(oklch(92% 0.005 245deg), oklch(22% 0.003 245deg));
43
+
44
+ /* Surface elevations */
45
+ --color-surface-0: var(--color-surface);
46
+ --color-surface-1: light-dark(oklch(98% 0.005 245deg), oklch(12% 0.003 245deg));
47
+ --color-surface-2: light-dark(oklch(96% 0.005 245deg), oklch(15% 0.003 245deg));
48
+ --color-surface-3: light-dark(oklch(94% 0.005 245deg), oklch(18% 0.003 245deg));
49
+ --color-surface-4: light-dark(oklch(92% 0.005 245deg), oklch(22% 0.003 245deg));
50
+ --color-surface-5: light-dark(oklch(91% 0.005 245deg), oklch(24% 0.003 245deg));
51
+
52
+ /* Background */
53
+ --color-background: var(--color-surface);
54
+ --color-on-background: var(--color-on-surface);
55
+
56
+ /* Outline */
57
+ --color-outline: light-dark(oklch(48% 0.01 245deg), oklch(60% 0.01 245deg));
58
+ --color-outline-variant: light-dark(oklch(92% 0.01 245deg), oklch(30% 0.02 245deg));
59
+ --color-divider: var(--color-outline-variant);
60
+
61
+ /* Inverse */
62
+ --color-inverse-surface: light-dark(oklch(20% 0 0deg), oklch(92% 0.003 245deg));
63
+ --color-inverse-on-surface: light-dark(oklch(96% 0.003 245deg), oklch(20% 0.003 245deg));
64
+ --color-inverse-primary: light-dark(oklch(80% 0.08 250deg), oklch(52% 0.14 250deg));
65
+
66
+ /* Scrim and shadow */
67
+ --color-scrim: oklch(0% 0 0deg);
68
+ --color-shadow: oklch(0% 0 0deg);
69
+ }
70
+ }
package/dist/colors/grayscale.css ADDED
@@ -0,0 +1,70 @@
1
+ /**
2
+ * Ankh Studio - Grayscale Color Palette
3
+ * Neutral grayscale for wireframing and prototyping
4
+ */
5
+
6
+ @layer tokens {
7
+ :root {
8
+ color-scheme: light dark;
9
+
10
+ /* Primary - Dark gray */
11
+ --color-primary: light-dark(oklch(35% 0 0deg), oklch(80% 0 0deg));
12
+ --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg));
13
+ --color-primary-container: light-dark(oklch(85% 0 0deg), oklch(30% 0 0deg));
14
+ --color-on-primary-container: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
15
+
16
+ /* Secondary - Medium gray */
17
+ --color-secondary: light-dark(oklch(50% 0 0deg), oklch(70% 0 0deg));
18
+ --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg));
19
+ --color-secondary-container: light-dark(oklch(88% 0 0deg), oklch(35% 0 0deg));
20
+ --color-on-secondary-container: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
21
+
22
+ /* Tertiary - Light gray */
23
+ --color-tertiary: light-dark(oklch(60% 0 0deg), oklch(75% 0 0deg));
24
+ --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(25% 0 0deg));
25
+ --color-tertiary-container: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
26
+ --color-on-tertiary-container: light-dark(oklch(25% 0 0deg), oklch(92% 0 0deg));
27
+
28
+ /* Error - Keep chromatic for visibility */
29
+ --color-error: light-dark(oklch(55% 0.2 25deg), oklch(70% 0.18 25deg));
30
+ --color-on-error: light-dark(oklch(100% 0 0deg), oklch(20% 0.05 25deg));
31
+ --color-error-container: light-dark(oklch(92% 0.04 25deg), oklch(30% 0.15 25deg));
32
+ --color-on-error-container: light-dark(oklch(25% 0.1 25deg), oklch(95% 0.04 25deg));
33
+
34
+ /* Surface */
35
+ --color-surface: light-dark(oklch(99% 0 0deg), oklch(15% 0 0deg));
36
+ --color-on-surface: light-dark(oklch(20% 0 0deg), oklch(90% 0 0deg));
37
+ --color-surface-variant: light-dark(oklch(92% 0 0deg), oklch(25% 0 0deg));
38
+ --color-on-surface-variant: light-dark(oklch(30% 0 0deg), oklch(80% 0 0deg));
39
+ --color-surface-container: light-dark(oklch(96% 0 0deg), oklch(20% 0 0deg));
40
+ --color-surface-container-low: light-dark(oklch(98% 0 0deg), oklch(17% 0 0deg));
41
+ --color-surface-container-high: light-dark(oklch(94% 0 0deg), oklch(25% 0 0deg));
42
+ --color-surface-container-highest: light-dark(oklch(92% 0 0deg), oklch(30% 0 0deg));
43
+
44
+ /* Surface elevations */
45
+ --color-surface-0: var(--color-surface);
46
+ --color-surface-1: light-dark(oklch(97% 0 0deg), oklch(18% 0 0deg));
47
+ --color-surface-2: light-dark(oklch(95% 0 0deg), oklch(21% 0 0deg));
48
+ --color-surface-3: light-dark(oklch(93% 0 0deg), oklch(24% 0 0deg));
49
+ --color-surface-4: light-dark(oklch(91% 0 0deg), oklch(27% 0 0deg));
50
+ --color-surface-5: light-dark(oklch(89% 0 0deg), oklch(30% 0 0deg));
51
+
52
+ /* Background */
53
+ --color-background: var(--color-surface);
54
+ --color-on-background: var(--color-on-surface);
55
+
56
+ /* Outline */
57
+ --color-outline: light-dark(oklch(50% 0 0deg), oklch(60% 0 0deg));
58
+ --color-outline-variant: light-dark(oklch(80% 0 0deg), oklch(35% 0 0deg));
59
+ --color-divider: var(--color-outline-variant);
60
+
61
+ /* Inverse */
62
+ --color-inverse-surface: light-dark(oklch(25% 0 0deg), oklch(90% 0 0deg));
63
+ --color-inverse-on-surface: light-dark(oklch(95% 0 0deg), oklch(25% 0 0deg));
64
+ --color-inverse-primary: light-dark(oklch(80% 0 0deg), oklch(35% 0 0deg));
65
+
66
+ /* Scrim and shadow */
67
+ --color-scrim: oklch(0% 0 0deg);
68
+ --color-shadow: oklch(0% 0 0deg);
69
+ }
70
+ }
package/dist/colors/purple.css ADDED
@@ -0,0 +1,70 @@
1
+ /**
2
+ * Ankh Studio - Purple Color Palette
3
+ * Modern purple for creative/consumer applications
4
+ */
5
+
6
+ @layer tokens {
7
+ :root {
8
+ color-scheme: light dark;
9
+
10
+ /* Primary - Purple */
11
+ --color-primary: light-dark(oklch(49.4% 0.163 264deg), oklch(79.7% 0.105 264deg));
12
+ --color-on-primary: light-dark(oklch(100% 0 0deg), oklch(15% 0.163 264deg));
13
+ --color-primary-container: light-dark(oklch(79.7% 0.105 264deg), oklch(44.5% 0.163 264deg));
14
+ --color-on-primary-container: light-dark(oklch(20% 0.163 264deg), oklch(91% 0.105 264deg));
15
+
16
+ /* Secondary - Blue/Gray */
17
+ --color-secondary: light-dark(oklch(43.8% 0.029 270deg), oklch(67.5% 0.029 270deg));
18
+ --color-on-secondary: light-dark(oklch(100% 0 0deg), oklch(12% 0.029 270deg));
19
+ --color-secondary-container: light-dark(oklch(88.5% 0.029 270deg), oklch(32% 0.029 270deg));
20
+ --color-on-secondary-container: light-dark(oklch(15.8% 0.029 270deg), oklch(90% 0.029 270deg));
21
+
22
+ /* Tertiary - Pink/Purple */
23
+ --color-tertiary: light-dark(oklch(60% 0.12 320deg), oklch(70% 0.08 320deg));
24
+ --color-on-tertiary: light-dark(oklch(100% 0 0deg), oklch(25% 0.12 320deg));
25
+ --color-tertiary-container: light-dark(oklch(90% 0.08 320deg), oklch(38% 0.08 320deg));
26
+ --color-on-tertiary-container: light-dark(oklch(20% 0.12 320deg), oklch(93% 0.08 320deg));
27
+
28
+ /* Error */
29
+ --color-error: light-dark(oklch(66.4% 0.195 29deg), oklch(68.5% 0.195 29deg));
30
+ --color-on-error: light-dark(oklch(20% 0.05 29deg), oklch(20% 0.05 29deg));
31
+ --color-error-container: light-dark(oklch(92% 0.05 29deg), oklch(66.4% 0.195 29deg));
32
+ --color-on-error-container: light-dark(oklch(20% 0.05 29deg), oklch(92% 0.05 29deg));
33
+
34
+ /* Surface */
35
+ --color-surface: light-dark(oklch(99% 0.005 300deg), oklch(7% 0.005 300deg));
36
+ --color-on-surface: light-dark(oklch(12.5% 0.005 300deg), oklch(91.5% 0.005 300deg));
37
+ --color-surface-variant: light-dark(oklch(91.8% 0.015 300deg), oklch(33.5% 0.025 270deg));
38
+ --color-on-surface-variant: light-dark(oklch(33.5% 0.025 270deg), oklch(82% 0.015 300deg));
39
+ --color-surface-container: light-dark(oklch(95.5% 0.01 300deg), oklch(15% 0.005 300deg));
40
+ --color-surface-container-low: light-dark(oklch(97.5% 0.005 300deg), oklch(12.5% 0.005 300deg));
41
+ --color-surface-container-high: light-dark(oklch(93.5% 0.01 300deg), oklch(19% 0.005 300deg));
42
+ --color-surface-container-highest: light-dark(oklch(91.5% 0.01 300deg), oklch(24% 0.005 300deg));
43
+
44
+ /* Surface elevations */
45
+ --color-surface-0: var(--color-surface);
46
+ --color-surface-1: light-dark(oklch(97.5% 0.01 300deg), oklch(12.5% 0.005 300deg));
47
+ --color-surface-2: light-dark(oklch(95.5% 0.01 300deg), oklch(15% 0.005 300deg));
48
+ --color-surface-3: light-dark(oklch(93.5% 0.01 300deg), oklch(19% 0.005 300deg));
49
+ --color-surface-4: light-dark(oklch(91.5% 0.01 300deg), oklch(24% 0.005 300deg));
50
+ --color-surface-5: light-dark(oklch(90.5% 0.01 300deg), oklch(26% 0.005 300deg));
51
+
52
+ /* Background */
53
+ --color-background: var(--color-surface);
54
+ --color-on-background: var(--color-on-surface);
55
+
56
+ /* Outline */
57
+ --color-outline: light-dark(oklch(50% 0.01 300deg), oklch(61% 0.01 300deg));
58
+ --color-outline-variant: light-dark(oklch(91.8% 0.015 300deg), oklch(33.5% 0.025 270deg));
59
+ --color-divider: var(--color-outline-variant);
60
+
61
+ /* Inverse */
62
+ --color-inverse-surface: light-dark(oklch(22% 0 0deg), oklch(91.5% 0.005 300deg));
63
+ --color-inverse-on-surface: light-dark(oklch(96% 0.005 300deg), oklch(22.5% 0.005 300deg));
64
+ --color-inverse-primary: light-dark(oklch(79.7% 0.105 264deg), oklch(49.4% 0.163 264deg));
65
+
66
+ /* Scrim and shadow */
67
+ --color-scrim: oklch(0% 0 0deg);
68
+ --color-shadow: oklch(0% 0 0deg);
69
+ }
70
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,280 @@
1
+ /**
2
+ * Ankh Studio - Token Base
3
+ * Aggregates all token categories within @layer tokens
4
+ */
5
+
6
+ /**
7
+ * Ankh Studio - Scaling Tokens
8
+ * Global scaling factor for responsive sizing (90%-110%)
9
+ */
10
+
11
+ @layer tokens {
12
+ :root {
13
+ --scaling: 1;
14
+ }
15
+
16
+ [data-scaling='90'] {
17
+ --scaling: 0.9;
18
+ }
19
+
20
+ [data-scaling='95'] {
21
+ --scaling: 0.95;
22
+ }
23
+
24
+ [data-scaling='100'] {
25
+ --scaling: 1;
26
+ }
27
+
28
+ [data-scaling='105'] {
29
+ --scaling: 1.05;
30
+ }
31
+
32
+ [data-scaling='110'] {
33
+ --scaling: 1.1;
34
+ }
35
+ }
36
+
37
+ /**
38
+ * Ankh Studio - Spacing Tokens
39
+ * Spacing scale using 4px base unit with scaling support
40
+ */
41
+
42
+ @layer tokens {
43
+ :root {
44
+ --space-1: calc(4px * var(--scaling, 1));
45
+ --space-2: calc(8px * var(--scaling, 1));
46
+ --space-3: calc(12px * var(--scaling, 1));
47
+ --space-4: calc(16px * var(--scaling, 1));
48
+ --space-5: calc(24px * var(--scaling, 1));
49
+ --space-6: calc(32px * var(--scaling, 1));
50
+ --space-7: calc(40px * var(--scaling, 1));
51
+ --space-8: calc(48px * var(--scaling, 1));
52
+ --space-9: calc(64px * var(--scaling, 1));
53
+ }
54
+ }
55
+
56
+ /**
57
+ * Ankh Studio - Typography Tokens
58
+ * Typography scale with scaling support
59
+ */
60
+
61
+ @layer tokens {
62
+ :root {
63
+ /* Font families */
64
+ --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
65
+ --font-serif: georgia, 'Times New Roman', serif;
66
+ --font-mono: 'SF Mono', monaco, 'Courier New', monospace;
67
+
68
+ /* Font sizes (M3 Expressive aligned) */
69
+ --font-size-1: calc(11px * var(--scaling, 1));
70
+ --font-size-2: calc(12px * var(--scaling, 1));
71
+ --font-size-3: calc(14px * var(--scaling, 1));
72
+ --font-size-4: calc(16px * var(--scaling, 1));
73
+ --font-size-5: calc(22px * var(--scaling, 1));
74
+ --font-size-6: calc(24px * var(--scaling, 1));
75
+ --font-size-7: calc(28px * var(--scaling, 1));
76
+ --font-size-8: calc(32px * var(--scaling, 1));
77
+ --font-size-9: calc(36px * var(--scaling, 1));
78
+ --font-size-10: calc(45px * var(--scaling, 1));
79
+ --font-size-11: calc(57px * var(--scaling, 1));
80
+
81
+ /* Font weights */
82
+ --font-weight-light: 300;
83
+ --font-weight-regular: 400;
84
+ --font-weight-medium: 500;
85
+ --font-weight-bold: 700;
86
+
87
+ /* Line heights (M3 Expressive aligned) */
88
+ --line-height-1: calc(16px * var(--scaling, 1));
89
+ --line-height-2: calc(16px * var(--scaling, 1));
90
+ --line-height-3: calc(20px * var(--scaling, 1));
91
+ --line-height-4: calc(24px * var(--scaling, 1));
92
+ --line-height-5: calc(28px * var(--scaling, 1));
93
+ --line-height-6: calc(32px * var(--scaling, 1));
94
+ --line-height-7: calc(36px * var(--scaling, 1));
95
+ --line-height-8: calc(40px * var(--scaling, 1));
96
+ --line-height-9: calc(44px * var(--scaling, 1));
97
+ --line-height-10: calc(52px * var(--scaling, 1));
98
+ --line-height-11: calc(64px * var(--scaling, 1));
99
+
100
+ /* Letter spacing */
101
+ --letter-spacing-1: 0.0025em;
102
+ --letter-spacing-2: 0em;
103
+ --letter-spacing-3: -0.0025em;
104
+ }
105
+ }
106
+
107
+ /**
108
+ * Ankh Studio - Radius Tokens
109
+ * Border radius tokens with scaling support
110
+ */
111
+
112
+ @layer tokens {
113
+ :root {
114
+ /* Radius factor for variants */
115
+ --radius-factor: 1;
116
+
117
+ /* Border radius scale */
118
+ --radius-none: 0;
119
+ --radius-xs: calc(4px * var(--scaling, 1) * var(--radius-factor, 1));
120
+ --radius-sm: calc(8px * var(--scaling, 1) * var(--radius-factor, 1));
121
+ --radius-md: calc(12px * var(--scaling, 1) * var(--radius-factor, 1));
122
+ --radius-lg: calc(16px * var(--scaling, 1) * var(--radius-factor, 1));
123
+ --radius-xl: calc(28px * var(--scaling, 1) * var(--radius-factor, 1));
124
+ --radius-full: 9999px;
125
+ }
126
+
127
+ [data-radius='none'] {
128
+ --radius-factor: 0;
129
+ }
130
+
131
+ [data-radius='small'] {
132
+ --radius-factor: 0.75;
133
+ }
134
+
135
+ [data-radius='medium'] {
136
+ --radius-factor: 1;
137
+ }
138
+
139
+ [data-radius='large'] {
140
+ --radius-factor: 1.5;
141
+ }
142
+ }
143
+
144
+ /**
145
+ * Ankh Studio - Shadow Tokens
146
+ * Elevation shadows with automatic light/dark mode
147
+ */
148
+
149
+ @layer tokens {
150
+ :root {
151
+ color-scheme: light dark;
152
+
153
+ --shadow-0: none;
154
+ --shadow-1: light-dark(
155
+ 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%),
156
+ 0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 1px 3px 1px rgb(0 0 0 / 25%)
157
+ );
158
+ --shadow-2: light-dark(
159
+ 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%),
160
+ 0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 2px 6px 2px rgb(0 0 0 / 25%)
161
+ );
162
+ --shadow-3: light-dark(
163
+ 0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%),
164
+ 0px 1px 3px 0px rgb(0 0 0 / 50%), 0px 4px 8px 3px rgb(0 0 0 / 25%)
165
+ );
166
+ --shadow-4: light-dark(
167
+ 0px 2px 3px 0px rgb(0 0 0 / 30%), 0px 6px 10px 4px rgb(0 0 0 / 15%),
168
+ 0px 2px 3px 0px rgb(0 0 0 / 50%), 0px 6px 10px 4px rgb(0 0 0 / 25%)
169
+ );
170
+ --shadow-5: light-dark(
171
+ 0px 4px 4px 0px rgb(0 0 0 / 30%), 0px 8px 12px 6px rgb(0 0 0 / 15%),
172
+ 0px 4px 4px 0px rgb(0 0 0 / 50%), 0px 8px 12px 6px rgb(0 0 0 / 25%)
173
+ );
174
+ }
175
+ }
176
+
177
+ /**
178
+ * Ankh Studio - Motion Tokens (M3 Expressive)
179
+ * Spring physics for JS libraries, easing/duration for CSS
180
+ */
181
+
182
+ @layer tokens {
183
+ :root {
184
+ /* ==============================================
185
+ * Spring Tokens (for JS animation libraries)
186
+ * Use with Framer Motion, React Spring, etc.
187
+ * ============================================== */
188
+
189
+ /* Spatial springs - position, scale, rotation (allows overshoot) */
190
+ --spring-fast-spatial-damping: 0.9;
191
+ --spring-fast-spatial-stiffness: 1400;
192
+ --spring-default-spatial-damping: 0.9;
193
+ --spring-default-spatial-stiffness: 700;
194
+ --spring-slow-spatial-damping: 0.9;
195
+ --spring-slow-spatial-stiffness: 300;
196
+
197
+ /* Effects springs - color, opacity (no overshoot) */
198
+ --spring-fast-effects-damping: 1;
199
+ --spring-fast-effects-stiffness: 3800;
200
+ --spring-default-effects-damping: 1;
201
+ --spring-default-effects-stiffness: 1600;
202
+ --spring-slow-effects-damping: 1;
203
+ --spring-slow-effects-stiffness: 800;
204
+
205
+ /* ==============================================
206
+ * Duration Tokens (for CSS transitions)
207
+ * ============================================== */
208
+
209
+ --duration-instant: 0ms;
210
+ --duration-short1: 50ms;
211
+ --duration-short2: 100ms;
212
+ --duration-short3: 150ms;
213
+ --duration-short4: 200ms;
214
+ --duration-medium1: 250ms;
215
+ --duration-medium2: 300ms;
216
+ --duration-medium3: 350ms;
217
+ --duration-medium4: 400ms;
218
+ --duration-long1: 450ms;
219
+ --duration-long2: 500ms;
220
+ --duration-long3: 550ms;
221
+ --duration-long4: 600ms;
222
+ --duration-extra-long1: 700ms;
223
+ --duration-extra-long2: 800ms;
224
+ --duration-extra-long3: 900ms;
225
+ --duration-extra-long4: 1000ms;
226
+
227
+ /* ==============================================
228
+ * Easing Tokens (for CSS transitions)
229
+ * ============================================== */
230
+
231
+ --easing-linear: linear;
232
+
233
+ /* Standard - utility/functional animations */
234
+ --easing-standard: cubic-bezier(0.2, 0, 0, 1);
235
+ --easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
236
+ --easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
237
+
238
+ /* Emphasized - expressive M3 animations */
239
+ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
240
+ --easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
241
+ --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
242
+ }
243
+ }
244
+
245
+ /**
246
+ * Ankh Studio - Cursor & Icon Tokens
247
+ */
248
+
249
+ @layer tokens {
250
+ :root {
251
+ /* Icon sizes */
252
+ --icon-size-sm: calc(18px * var(--scaling, 1));
253
+ --icon-size-md: calc(24px * var(--scaling, 1));
254
+ --icon-size-lg: calc(36px * var(--scaling, 1));
255
+ --icon-size-xl: calc(48px * var(--scaling, 1));
256
+
257
+ /* Cursor styles */
258
+ --cursor-default: default;
259
+ --cursor-pointer: pointer;
260
+ --cursor-not-allowed: not-allowed;
261
+ --cursor-text: text;
262
+ --cursor-move: move;
263
+ --cursor-grab: grab;
264
+ --cursor-grabbing: grabbing;
265
+ }
266
+ }
267
+
268
+ /**
269
+ * Ankh Studio - Layout Tokens
270
+ */
271
+
272
+ @layer tokens {
273
+ :root {
274
+ /* Container max-widths */
275
+ --container-1: 448px;
276
+ --container-2: 688px;
277
+ --container-3: 880px;
278
+ --container-4: 1136px;
279
+ }
280
+ }
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@ankh-studio/tokens",
3
+ "version": "0.5.2",
4
+ "description": "Ankh Studio design tokens - colors, typography, spacing, radius, shadow, motion",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "author": {
8
+ "name": "Matthew Van Dusen",
9
+ "url": "https://github.com/matthewvandusen"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/ankh-studio/tokens.git"
14
+ },
15
+ "publishConfig": {
16
+ "access": "public",
17
+ "provenance": false
18
+ },
19
+ "exports": {
20
+ "./tokens.css": "./dist/tokens.css",
21
+ "./colors/grayscale.css": "./dist/colors/grayscale.css",
22
+ "./colors/blue.css": "./dist/colors/blue.css",
23
+ "./colors/purple.css": "./dist/colors/purple.css",
24
+ "./package.json": "./package.json"
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "sideEffects": [
30
+ "**/*.css"
31
+ ],
32
+ "scripts": {
33
+ "build": "postcss src/base.css -o dist/tokens.css && postcss 'src/colors/*.css' --dir dist/colors --base src/colors",
34
+ "clean": "rimraf dist",
35
+ "lint": "stylelint 'src/**/*.css'"
36
+ },
37
+ "devDependencies": {
38
+ "postcss": "^8.5.6",
39
+ "postcss-cli": "^11.0.1",
40
+ "postcss-import": "^16.1.1",
41
+ "rimraf": "^6.1.2",
42
+ "stylelint": "^16.12.0",
43
+ "stylelint-config-standard": "^37.0.0"
44
+ }
45
+ }