@jirawatpyk/aura-tokens 4.8.0 → 4.10.0

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 (11) hide show
  1. package/README.md +15 -4
  2. package/aura-tailwind.css +169 -0
  3. package/aura.css +54 -4
  4. package/components/aura.bundle.js +1457 -634
  5. package/components/aura.components.css +150 -2
  6. package/components/index.d.ts +171 -34
  7. package/figma-variables.csv +44 -6
  8. package/package.json +5 -2
  9. package/scripts/a11y-check.js +12 -0
  10. package/tailwind.tokens.cjs +20 -1
  11. package/tokens.json +59 -12
package/README.md CHANGED
@@ -9,7 +9,8 @@ Enterprise Standard, Human Creative. Tokens, Tailwind preset, Figma variables a
9
9
  | `tokens.json` | **Source of truth.** 3-tier: primitive → semantic (light/dark) → component, plus spacing, radius, shadow (per theme), size, motion, opacity, z-index, typography. |
10
10
  | `aura.css` | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.** |
11
11
  | `aura-fonts.css` | The Google Fonts `@import` (Fraunces, Inter, JetBrains Mono, Noto Sans Thai). Kept separate so a network that blocks Google can't break `aura.css`. **Generated.** |
12
- | `tailwind.config.ts` + `tailwind.tokens.cjs` | Tailwind theme wired to the variables (`bg-bg-surface`, `text-fg-danger`, `rounded-aura-xl`, `shadow-aura-overlay` …). The `.cjs` is **generated**. |
12
+ | `tailwind.config.ts` + `tailwind.tokens.cjs` | Tailwind v3 theme wired to the variables (`bg-bg-surface`, `text-fg-danger`, `rounded-aura-xl`, `shadow-aura-overlay` …). The `.cjs` is **generated**. |
13
+ | `aura-tailwind.css` | The same class names for Tailwind v4 (`@theme inline`, CSS-first). **Generated**; exported as `@jirawatpyk/aura-tokens/tailwind.css`. |
13
14
  | `figma-variables.csv` | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.** |
14
15
  | `components/` | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`. |
15
16
  | `eslint-plugin-aura.js` | `aura/no-hardcoded-color`: hex, rgb()/hsl() and Tailwind `bg-[#…]` classes. |
@@ -41,10 +42,20 @@ import '@aura/react/styles.css' // component styles (with @aura/react
41
42
 
42
43
  Dark theme: put `class="dark"` (or `data-theme="dark"`) on `<html>`.
43
44
 
44
- ### Tailwind
45
+ ### Tailwind v4
46
+
47
+ ```css
48
+ /* app/globals.css */
49
+ @import "tailwindcss";
50
+ @import "@jirawatpyk/aura-tokens/tailwind.css"; /* imports aura.css too */
51
+ ```
52
+
53
+ Classes: `bg-bg-surface`, `text-fg-primary`, `border-border-strong`, `text-fg-danger`, `bg-alert-warning-bg`, `fill-chart-1`, `p-aura-6`, `gap-aura-4`, `rounded-aura-xl`, `shadow-aura-overlay`, `ease-aura-ease`, `duration-aura-fast`, `z-aura-dialog`, `font-display` / `font-sans` / `font-mono`. They point at the `--aura-*` variables, so `.dark` or `data-theme="dark"` switches them with no `dark:` prefix; the file also makes `dark:` follow those two switches. `npm run check:tailwind4` compiles it with Tailwind v4 in CI.
54
+
55
+ ### Tailwind v3
45
56
 
46
57
  ```ts
47
- // tailwind.config.ts — copy this file, or spread the maps from '@aura/tokens/tailwind'
58
+ // tailwind.config.ts — copy this file, or spread the maps from '@jirawatpyk/aura-tokens/tailwind'
48
59
  ```
49
60
 
50
61
  ```tsx
@@ -70,7 +81,7 @@ Types for every component are in `components/index.d.ts`.
70
81
 
71
82
  ## Changing a token
72
83
 
73
- 1. Edit `tokens.json` (never `aura.css`, `tailwind.tokens.cjs` or the CSV).
84
+ 1. Edit `tokens.json` (never `aura.css`, `tailwind.tokens.cjs`, `aura-tailwind.css` or the CSV).
74
85
  2. `npm run build:tokens` (regenerates the generated files).
75
86
  3. `npm run a11y` (every text/ground pair in both themes must pass AA).
76
87
  4. Open a PR; see `GOVERNANCE.md`.
package/aura-tailwind.css ADDED
@@ -0,0 +1,169 @@
1
+ /* AURA v4.10.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
2
+ * @import "tailwindcss";
3
+ * @import "@jirawatpyk/aura-tokens/tailwind.css";
4
+ * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,
5
+ * ease-aura-ease, duration-aura-fast, z-aura-dialog, font-display … (the v3 preset's names). */
6
+ @import "./aura.css";
7
+
8
+ /* dark: follows .dark and data-theme="dark", the same switches aura.css uses. */
9
+ @custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
10
+
11
+ @theme inline {
12
+ --color-aura-violet-50: var(--aura-violet-50);
13
+ --color-aura-violet-100: var(--aura-violet-100);
14
+ --color-aura-violet-200: var(--aura-violet-200);
15
+ --color-aura-violet-300: var(--aura-violet-300);
16
+ --color-aura-violet-400: var(--aura-violet-400);
17
+ --color-aura-violet-500: var(--aura-violet-500);
18
+ --color-aura-violet-600: var(--aura-violet-600);
19
+ --color-aura-violet-700: var(--aura-violet-700);
20
+ --color-aura-violet-800: var(--aura-violet-800);
21
+ --color-aura-violet-900: var(--aura-violet-900);
22
+ --color-aura-zinc-0: var(--aura-zinc-0);
23
+ --color-aura-zinc-50: var(--aura-zinc-50);
24
+ --color-aura-zinc-100: var(--aura-zinc-100);
25
+ --color-aura-zinc-200: var(--aura-zinc-200);
26
+ --color-aura-zinc-300: var(--aura-zinc-300);
27
+ --color-aura-zinc-400: var(--aura-zinc-400);
28
+ --color-aura-zinc-450: var(--aura-zinc-450);
29
+ --color-aura-zinc-500: var(--aura-zinc-500);
30
+ --color-aura-zinc-600: var(--aura-zinc-600);
31
+ --color-aura-zinc-700: var(--aura-zinc-700);
32
+ --color-aura-zinc-800: var(--aura-zinc-800);
33
+ --color-aura-zinc-900: var(--aura-zinc-900);
34
+ --color-aura-zinc-950: var(--aura-zinc-950);
35
+ --color-aura-lime-50: var(--aura-lime-50);
36
+ --color-aura-lime-100: var(--aura-lime-100);
37
+ --color-aura-lime-200: var(--aura-lime-200);
38
+ --color-aura-lime-300: var(--aura-lime-300);
39
+ --color-aura-lime-400: var(--aura-lime-400);
40
+ --color-aura-lime-500: var(--aura-lime-500);
41
+ --color-aura-lime-600: var(--aura-lime-600);
42
+ --color-aura-lime-800: var(--aura-lime-800);
43
+ --color-aura-red-50: var(--aura-red-50);
44
+ --color-aura-red-200: var(--aura-red-200);
45
+ --color-aura-red-300: var(--aura-red-300);
46
+ --color-aura-red-400: var(--aura-red-400);
47
+ --color-aura-red-600: var(--aura-red-600);
48
+ --color-aura-red-700: var(--aura-red-700);
49
+ --color-aura-red-800: var(--aura-red-800);
50
+ --color-aura-amber-50: var(--aura-amber-50);
51
+ --color-aura-amber-200: var(--aura-amber-200);
52
+ --color-aura-amber-300: var(--aura-amber-300);
53
+ --color-aura-amber-800: var(--aura-amber-800);
54
+ --color-aura-ink: var(--aura-ink);
55
+ --color-aura-white: var(--aura-white);
56
+ --color-bg-surface: var(--aura-bg-surface);
57
+ --color-bg-surface-hover: var(--aura-bg-surface-hover);
58
+ --color-bg-surface-strong: var(--aura-bg-surface-strong);
59
+ --color-bg-canvas: var(--aura-bg-canvas);
60
+ --color-bg-inverted: var(--aura-bg-inverted);
61
+ --color-bg-selected: var(--aura-bg-selected);
62
+ --color-bg-skeleton: var(--aura-bg-skeleton);
63
+ --color-bg-input: var(--aura-bg-input);
64
+ --color-bg-input-disabled: var(--aura-bg-input-disabled);
65
+ --color-bg-scrim: var(--aura-bg-scrim);
66
+ --color-bg-hover: var(--aura-bg-surface-hover);
67
+ --color-bg-strong: var(--aura-bg-surface-strong);
68
+ --color-fg-primary: var(--aura-fg-primary);
69
+ --color-fg-secondary: var(--aura-fg-secondary);
70
+ --color-fg-tertiary: var(--aura-fg-tertiary);
71
+ --color-fg-inverted: var(--aura-fg-inverted);
72
+ --color-fg-accent: var(--aura-fg-accent);
73
+ --color-fg-danger: var(--aura-fg-danger);
74
+ --color-fg-positive: var(--aura-fg-positive);
75
+ --color-border: var(--aura-border-default);
76
+ --color-border-default: var(--aura-border-default);
77
+ --color-border-strong: var(--aura-border-strong);
78
+ --color-border-subtle: var(--aura-border-subtle);
79
+ --color-border-control: var(--aura-border-control);
80
+ --color-border-danger: var(--aura-border-danger);
81
+ --color-accent-dot: var(--aura-accent-dot);
82
+ --color-accent-violet: var(--aura-accent-violet);
83
+ --color-accent-lime: var(--aura-accent-lime);
84
+ --color-status-neutral-bg: var(--aura-status-neutral-bg);
85
+ --color-status-neutral-fg: var(--aura-status-neutral-fg);
86
+ --color-status-progress-bg: var(--aura-status-progress-bg);
87
+ --color-status-progress-fg: var(--aura-status-progress-fg);
88
+ --color-status-ready-bg: var(--aura-status-ready-bg);
89
+ --color-status-ready-fg: var(--aura-status-ready-fg);
90
+ --color-status-blocked-bg: var(--aura-status-blocked-bg);
91
+ --color-status-blocked-fg: var(--aura-status-blocked-fg);
92
+ --color-chart-1: var(--aura-chart-1);
93
+ --color-chart-2: var(--aura-chart-2);
94
+ --color-chart-3: var(--aura-chart-3);
95
+ --color-chart-4: var(--aura-chart-4);
96
+ --color-chart-5: var(--aura-chart-5);
97
+ --color-chart-6: var(--aura-chart-6);
98
+ --color-chart-7: var(--aura-chart-7);
99
+ --color-chart-8: var(--aura-chart-8);
100
+ --color-chart-seq-1: var(--aura-chart-seq-1);
101
+ --color-chart-seq-2: var(--aura-chart-seq-2);
102
+ --color-chart-seq-3: var(--aura-chart-seq-3);
103
+ --color-chart-seq-4: var(--aura-chart-seq-4);
104
+ --color-chart-seq-5: var(--aura-chart-seq-5);
105
+ --color-chart-grid: var(--aura-chart-grid);
106
+ --color-chart-axis: var(--aura-chart-axis);
107
+ --color-alert-info-bg: var(--aura-alert-info-bg);
108
+ --color-alert-info-fg: var(--aura-alert-info-fg);
109
+ --color-alert-info-border: var(--aura-alert-info-border);
110
+ --color-alert-success-bg: var(--aura-alert-success-bg);
111
+ --color-alert-success-fg: var(--aura-alert-success-fg);
112
+ --color-alert-success-border: var(--aura-alert-success-border);
113
+ --color-alert-warning-bg: var(--aura-alert-warning-bg);
114
+ --color-alert-warning-fg: var(--aura-alert-warning-fg);
115
+ --color-alert-warning-border: var(--aura-alert-warning-border);
116
+ --color-alert-danger-bg: var(--aura-alert-danger-bg);
117
+ --color-alert-danger-fg: var(--aura-alert-danger-fg);
118
+ --color-alert-danger-border: var(--aura-alert-danger-border);
119
+ --color-focus-ring: var(--aura-focus-ring);
120
+ --spacing-aura-0: var(--aura-space-0);
121
+ --spacing-aura-1: var(--aura-space-1);
122
+ --spacing-aura-2: var(--aura-space-2);
123
+ --spacing-aura-3: var(--aura-space-3);
124
+ --spacing-aura-4: var(--aura-space-4);
125
+ --spacing-aura-5: var(--aura-space-5);
126
+ --spacing-aura-6: var(--aura-space-6);
127
+ --spacing-aura-8: var(--aura-space-8);
128
+ --spacing-aura-10: var(--aura-space-10);
129
+ --spacing-aura-12: var(--aura-space-12);
130
+ --spacing-aura-16: var(--aura-space-16);
131
+ --spacing-aura-card-padding: var(--aura-card-padding);
132
+ --radius-aura-xs: var(--aura-radius-xs);
133
+ --radius-aura-sm: var(--aura-radius-sm);
134
+ --radius-aura-md: var(--aura-radius-md);
135
+ --radius-aura-lg: var(--aura-radius-lg);
136
+ --radius-aura-xl: var(--aura-radius-xl);
137
+ --radius-aura-2xl: var(--aura-radius-2xl);
138
+ --radius-aura-full: var(--aura-radius-full);
139
+ --radius-aura-squircle: var(--aura-radius-squircle);
140
+ --radius-aura-card-radius: var(--aura-card-radius);
141
+ --radius-aura-button-radius: var(--aura-button-radius);
142
+ --shadow-aura-enterprise: var(--aura-shadow-enterprise);
143
+ --shadow-aura-overlay: var(--aura-shadow-overlay);
144
+ --shadow-aura-creative: var(--aura-shadow-creative);
145
+ --shadow-aura-creative-hover: var(--aura-shadow-creative-hover);
146
+ --shadow-aura-card-shadow-creative: var(--aura-card-shadow-creative);
147
+ --ease-aura-ease: var(--aura-ease);
148
+ --ease-aura-spring: var(--aura-spring);
149
+ }
150
+
151
+ @theme inline reference {
152
+ --font-display: var(--font-display);
153
+ --font-sans: var(--font-sans);
154
+ --font-mono: var(--font-mono);
155
+ --font-thai: var(--font-thai);
156
+ }
157
+
158
+ /* Tailwind v4 has no theme keys for durations or z-index, so these are plain utilities. */
159
+ @utility duration-aura-fast { transition-duration: var(--aura-duration-fast); }
160
+ @utility duration-aura-base { transition-duration: var(--aura-duration-base); }
161
+ @utility duration-aura-slow { transition-duration: var(--aura-duration-slow); }
162
+ @utility duration-aura-spin { transition-duration: var(--aura-duration-spin); }
163
+ @utility duration-aura-pulse { transition-duration: var(--aura-duration-pulse); }
164
+ @utility duration-aura-toast { transition-duration: var(--aura-duration-toast); }
165
+ @utility duration-aura-tooltip { transition-duration: var(--aura-duration-tooltip); }
166
+ @utility z-aura-menu { z-index: var(--aura-z-menu); }
167
+ @utility z-aura-dialog { z-index: var(--aura-z-dialog); }
168
+ @utility z-aura-toast { z-index: var(--aura-z-toast); }
169
+ @utility z-aura-tooltip { z-index: var(--aura-z-tooltip); }
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.8.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v4.10.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
2
2
  /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
3
3
 
4
4
  :root, [data-theme="light"] {
@@ -37,7 +37,9 @@
37
37
  --aura-red-200: #fecaca;
38
38
  --aura-red-300: #fca5a5;
39
39
  --aura-red-400: #f87171;
40
+ --aura-red-600: #dc2626;
40
41
  --aura-red-700: #b91c1c;
42
+ --aura-red-800: #991b1b;
41
43
  --aura-amber-50: #fffbeb;
42
44
  --aura-amber-200: #fde68a;
43
45
  --aura-amber-300: #fcd34d;
@@ -76,7 +78,7 @@
76
78
  --aura-status-blocked-fg: var(--aura-white);
77
79
  --aura-bg-selected: var(--aura-violet-50);
78
80
  --aura-border-control: var(--aura-zinc-500);
79
- --aura-bg-skeleton: var(--aura-zinc-100);
81
+ --aura-bg-skeleton: var(--aura-zinc-200);
80
82
  --aura-fg-danger: var(--aura-red-700);
81
83
  --aura-border-danger: var(--aura-red-700);
82
84
  --aura-bg-input: var(--aura-zinc-0);
@@ -95,10 +97,28 @@
95
97
  --aura-alert-danger-fg: var(--aura-red-700);
96
98
  --aura-alert-danger-border: var(--aura-red-200);
97
99
  --aura-fg-positive: var(--aura-lime-800);
100
+ --aura-chart-1: #5e2cb5;
101
+ --aura-chart-2: #0a8b7a;
102
+ --aura-chart-3: #803900;
103
+ --aura-chart-4: #057ed8;
104
+ --aura-chart-5: #95006c;
105
+ --aura-chart-6: #2a8e02;
106
+ --aura-chart-7: #634902;
107
+ --aura-chart-8: #e23d4e;
108
+ --aura-chart-seq-1: #9972fe;
109
+ --aura-chart-seq-2: #8056df;
110
+ --aura-chart-seq-3: #693ac3;
111
+ --aura-chart-seq-4: #541ca8;
112
+ --aura-chart-seq-5: #3f0087;
113
+ --aura-chart-grid: var(--aura-zinc-200);
114
+ --aura-chart-axis: var(--aura-zinc-600);
98
115
  --aura-button-primary-bg: var(--aura-zinc-900);
99
116
  --aura-button-primary-fg: var(--aura-zinc-0);
100
117
  --aura-button-primary-bg-hover: var(--aura-zinc-800);
101
118
  --aura-button-secondary-border: var(--aura-zinc-450);
119
+ --aura-button-danger-bg: var(--aura-red-700);
120
+ --aura-button-danger-bg-hover: var(--aura-red-800);
121
+ --aura-button-danger-fg: var(--aura-white);
102
122
  --aura-button-creative-bg: var(--aura-white);
103
123
  --aura-button-creative-border: var(--aura-zinc-900);
104
124
  --aura-card-border: var(--aura-zinc-200);
@@ -126,9 +146,11 @@
126
146
  --aura-border-subtle: rgba(255,255,255,0.06);
127
147
  --aura-accent-violet: var(--aura-violet-400);
128
148
  --aura-focus-ring: var(--aura-violet-400);
149
+ --aura-status-neutral-bg: var(--aura-zinc-800);
150
+ --aura-status-neutral-fg: var(--aura-zinc-300);
129
151
  --aura-bg-selected: #2c283a;
130
152
  --aura-border-control: var(--aura-zinc-400);
131
- --aura-bg-skeleton: var(--aura-zinc-800);
153
+ --aura-bg-skeleton: var(--aura-zinc-700);
132
154
  --aura-fg-danger: var(--aura-red-400);
133
155
  --aura-border-danger: var(--aura-red-400);
134
156
  --aura-bg-input: var(--aura-zinc-900);
@@ -147,10 +169,23 @@
147
169
  --aura-alert-danger-fg: var(--aura-red-300);
148
170
  --aura-alert-danger-border: #6e2a2b;
149
171
  --aura-fg-positive: var(--aura-lime-300);
172
+ --aura-chart-1: #bba9ff;
173
+ --aura-chart-3: #fe9c63;
174
+ --aura-chart-5: #ff91d1;
175
+ --aura-chart-7: #e4ac06;
176
+ --aura-chart-seq-1: #784cd6;
177
+ --aura-chart-seq-2: #8f67f2;
178
+ --aura-chart-seq-3: #a78bfe;
179
+ --aura-chart-seq-4: #c1b1fe;
180
+ --aura-chart-seq-5: #dcd5fe;
181
+ --aura-chart-grid: var(--aura-zinc-800);
182
+ --aura-chart-axis: var(--aura-zinc-400);
150
183
  --aura-button-primary-bg: var(--aura-zinc-0);
151
184
  --aura-button-primary-fg: var(--aura-zinc-900);
152
185
  --aura-button-primary-bg-hover: var(--aura-zinc-200);
153
186
  --aura-button-secondary-border: var(--aura-zinc-500);
187
+ --aura-button-danger-bg: var(--aura-red-600);
188
+ --aura-button-danger-bg-hover: var(--aura-red-700);
154
189
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
155
190
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
156
191
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -176,9 +211,11 @@
176
211
  --aura-border-subtle: rgba(255,255,255,0.06);
177
212
  --aura-accent-violet: var(--aura-violet-400);
178
213
  --aura-focus-ring: var(--aura-violet-400);
214
+ --aura-status-neutral-bg: var(--aura-zinc-800);
215
+ --aura-status-neutral-fg: var(--aura-zinc-300);
179
216
  --aura-bg-selected: #2c283a;
180
217
  --aura-border-control: var(--aura-zinc-400);
181
- --aura-bg-skeleton: var(--aura-zinc-800);
218
+ --aura-bg-skeleton: var(--aura-zinc-700);
182
219
  --aura-fg-danger: var(--aura-red-400);
183
220
  --aura-border-danger: var(--aura-red-400);
184
221
  --aura-bg-input: var(--aura-zinc-900);
@@ -197,10 +234,23 @@
197
234
  --aura-alert-danger-fg: var(--aura-red-300);
198
235
  --aura-alert-danger-border: #6e2a2b;
199
236
  --aura-fg-positive: var(--aura-lime-300);
237
+ --aura-chart-1: #bba9ff;
238
+ --aura-chart-3: #fe9c63;
239
+ --aura-chart-5: #ff91d1;
240
+ --aura-chart-7: #e4ac06;
241
+ --aura-chart-seq-1: #784cd6;
242
+ --aura-chart-seq-2: #8f67f2;
243
+ --aura-chart-seq-3: #a78bfe;
244
+ --aura-chart-seq-4: #c1b1fe;
245
+ --aura-chart-seq-5: #dcd5fe;
246
+ --aura-chart-grid: var(--aura-zinc-800);
247
+ --aura-chart-axis: var(--aura-zinc-400);
200
248
  --aura-button-primary-bg: var(--aura-zinc-0);
201
249
  --aura-button-primary-fg: var(--aura-zinc-900);
202
250
  --aura-button-primary-bg-hover: var(--aura-zinc-200);
203
251
  --aura-button-secondary-border: var(--aura-zinc-500);
252
+ --aura-button-danger-bg: var(--aura-red-600);
253
+ --aura-button-danger-bg-hover: var(--aura-red-700);
204
254
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
205
255
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
206
256
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;