@jirawatpyk/aura-tokens 5.0.1 → 5.1.1

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/GOVERNANCE.md +1 -0
  2. package/aura-tailwind.css +5 -1
  3. package/aura-tailwind.prefixed.css +5 -1
  4. package/aura.css +11 -1
  5. package/components/aura.bundle.js +464 -154
  6. package/components/aura.components.css +23 -3
  7. package/components/index.d.ts +13 -6
  8. package/figma-variables.csv +6 -0
  9. package/package.json +1 -1
  10. package/scripts/a11y-check.js +3 -1
  11. package/tailwind.tokens.cjs +5 -1
  12. package/tokens.json +11 -1
package/GOVERNANCE.md CHANGED
@@ -43,6 +43,7 @@ Semver `MAJOR.MINOR.PATCH`:
43
43
  Made by the design-system owner in one pass, instead of separate Proposals. Each change is marked ADDED in its token note.
44
44
 
45
45
  - **Status palette adopted.** Four tones (neutral, progress, ready, blocked). `aura-red-700` is the only warm hue for state, chosen dark so Ready (lime-200) and Blocked differ by lightness (5.5:1), not only by hue.
46
+ - **5.1: a fifth tone, warning** (from DxT Monitor: a monitored host with a problem that still works). Solid amber — amber-600 light, amber-500 dark, ink label — so it differs from Ready and Blocked by lightness as well as hue (light 2.7:1 and 2.0:1). Amber stays the warning hue only: the warning alert and this pill.
46
47
  - **Alert palette adopted.** Info (violet), success (lime), warning (amber), danger (red), each with its own fill, edge and text for light and dark. Amber is limited to warning.
47
48
  - **Lucide adopted** as the only icon set, 52 icons. New icons come from Lucide unchanged.
48
49
  - **Focus ring adopted**: 2px violet, 2px offset, on every interactive element.
package/aura-tailwind.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v5.0.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
1
+ /* AURA v5.1.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
2
2
  * @import "tailwindcss";
3
3
  * @import "@jirawatpyk/aura-tokens/tailwind.css";
4
4
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,
@@ -50,6 +50,8 @@
50
50
  --color-aura-amber-50: var(--aura-amber-50);
51
51
  --color-aura-amber-200: var(--aura-amber-200);
52
52
  --color-aura-amber-300: var(--aura-amber-300);
53
+ --color-aura-amber-500: var(--aura-amber-500);
54
+ --color-aura-amber-600: var(--aura-amber-600);
53
55
  --color-aura-amber-800: var(--aura-amber-800);
54
56
  --color-aura-ink: var(--aura-ink);
55
57
  --color-aura-white: var(--aura-white);
@@ -89,6 +91,8 @@
89
91
  --color-status-ready-fg: var(--aura-status-ready-fg);
90
92
  --color-status-blocked-bg: var(--aura-status-blocked-bg);
91
93
  --color-status-blocked-fg: var(--aura-status-blocked-fg);
94
+ --color-status-warning-bg: var(--aura-status-warning-bg);
95
+ --color-status-warning-fg: var(--aura-status-warning-fg);
92
96
  --color-chart-1: var(--aura-chart-1);
93
97
  --color-chart-2: var(--aura-chart-2);
94
98
  --color-chart-3: var(--aura-chart-3);
package/aura-tailwind.prefixed.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v5.0.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
1
+ /* AURA v5.1.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
2
2
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
3
3
  * @layer aura-tokens, theme, base, aura, components, utilities;
4
4
  * @import "tailwindcss";
@@ -50,6 +50,8 @@
50
50
  --color-aura-amber-50: var(--aura-amber-50);
51
51
  --color-aura-amber-200: var(--aura-amber-200);
52
52
  --color-aura-amber-300: var(--aura-amber-300);
53
+ --color-aura-amber-500: var(--aura-amber-500);
54
+ --color-aura-amber-600: var(--aura-amber-600);
53
55
  --color-aura-amber-800: var(--aura-amber-800);
54
56
  --color-aura-ink: var(--aura-ink);
55
57
  --color-aura-white: var(--aura-white);
@@ -89,6 +91,8 @@
89
91
  --color-aura-status-ready-fg: var(--aura-status-ready-fg);
90
92
  --color-aura-status-blocked-bg: var(--aura-status-blocked-bg);
91
93
  --color-aura-status-blocked-fg: var(--aura-status-blocked-fg);
94
+ --color-aura-status-warning-bg: var(--aura-status-warning-bg);
95
+ --color-aura-status-warning-fg: var(--aura-status-warning-fg);
92
96
  --color-aura-chart-1: var(--aura-chart-1);
93
97
  --color-aura-chart-2: var(--aura-chart-2);
94
98
  --color-aura-chart-3: var(--aura-chart-3);
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v5.0.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v5.1.1 — 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"] {
@@ -43,6 +43,8 @@
43
43
  --aura-amber-50: #fffbeb;
44
44
  --aura-amber-200: #fde68a;
45
45
  --aura-amber-300: #fcd34d;
46
+ --aura-amber-500: #f59e0b;
47
+ --aura-amber-600: #d97706;
46
48
  --aura-amber-800: #92400e;
47
49
  --aura-ink: #08080a;
48
50
  --aura-white: #ffffff;
@@ -76,6 +78,8 @@
76
78
  --aura-status-ready-fg: var(--aura-ink);
77
79
  --aura-status-blocked-bg: var(--aura-red-700);
78
80
  --aura-status-blocked-fg: var(--aura-white);
81
+ --aura-status-warning-bg: var(--aura-amber-600);
82
+ --aura-status-warning-fg: var(--aura-ink);
79
83
  --aura-bg-selected: var(--aura-violet-50);
80
84
  --aura-border-control: var(--aura-zinc-500);
81
85
  --aura-bg-skeleton: var(--aura-zinc-200);
@@ -154,6 +158,7 @@
154
158
  --aura-status-progress-fg: var(--aura-violet-300);
155
159
  --aura-status-ready-bg: #2b351f;
156
160
  --aura-status-ready-fg: var(--aura-lime-300);
161
+ --aura-status-warning-bg: var(--aura-amber-500);
157
162
  --aura-bg-selected: #2c283a;
158
163
  --aura-border-control: var(--aura-zinc-400);
159
164
  --aura-bg-skeleton: var(--aura-zinc-700);
@@ -192,6 +197,8 @@
192
197
  --aura-button-secondary-border: var(--aura-zinc-500);
193
198
  --aura-button-danger-bg: var(--aura-red-600);
194
199
  --aura-button-danger-bg-hover: var(--aura-red-700);
200
+ --aura-progress-track: var(--aura-bg-skeleton);
201
+ --aura-progress-track-edge: var(--aura-button-secondary-border);
195
202
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
196
203
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
197
204
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -223,6 +230,7 @@
223
230
  --aura-status-progress-fg: var(--aura-violet-300);
224
231
  --aura-status-ready-bg: #2b351f;
225
232
  --aura-status-ready-fg: var(--aura-lime-300);
233
+ --aura-status-warning-bg: var(--aura-amber-500);
226
234
  --aura-bg-selected: #2c283a;
227
235
  --aura-border-control: var(--aura-zinc-400);
228
236
  --aura-bg-skeleton: var(--aura-zinc-700);
@@ -261,6 +269,8 @@
261
269
  --aura-button-secondary-border: var(--aura-zinc-500);
262
270
  --aura-button-danger-bg: var(--aura-red-600);
263
271
  --aura-button-danger-bg-hover: var(--aura-red-700);
272
+ --aura-progress-track: var(--aura-bg-skeleton);
273
+ --aura-progress-track-edge: var(--aura-button-secondary-border);
264
274
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
265
275
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
266
276
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;