@jirawatpyk/aura-tokens 4.9.0 → 4.11.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 +66 -4
  4. package/components/aura.bundle.js +910 -463
  5. package/components/aura.components.css +71 -5
  6. package/components/index.d.ts +76 -34
  7. package/figma-variables.csv +58 -14
  8. package/package.json +5 -2
  9. package/scripts/a11y-check.js +15 -0
  10. package/tailwind.tokens.cjs +20 -1
  11. package/tokens.json +80 -23
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.11.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.9.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v4.11.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,13 +97,33 @@
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);
125
+ --aura-progress-track: var(--aura-bg-skeleton);
126
+ --aura-progress-track-edge: var(--aura-button-secondary-border);
105
127
  --aura-shadow-enterprise: 0 1px 2px rgba(0,0,0,0.05);
106
128
  --aura-shadow-overlay: 0 16px 48px rgba(8,8,10,0.16), 0 2px 8px rgba(8,8,10,0.08);
107
129
  --aura-shadow-creative: 4px 4px 0px #18181b;
@@ -126,9 +148,15 @@
126
148
  --aura-border-subtle: rgba(255,255,255,0.06);
127
149
  --aura-accent-violet: var(--aura-violet-400);
128
150
  --aura-focus-ring: var(--aura-violet-400);
151
+ --aura-status-neutral-bg: var(--aura-zinc-800);
152
+ --aura-status-neutral-fg: var(--aura-zinc-300);
153
+ --aura-status-progress-bg: #2f2647;
154
+ --aura-status-progress-fg: var(--aura-violet-300);
155
+ --aura-status-ready-bg: #2b351f;
156
+ --aura-status-ready-fg: var(--aura-lime-300);
129
157
  --aura-bg-selected: #2c283a;
130
158
  --aura-border-control: var(--aura-zinc-400);
131
- --aura-bg-skeleton: var(--aura-zinc-800);
159
+ --aura-bg-skeleton: var(--aura-zinc-700);
132
160
  --aura-fg-danger: var(--aura-red-400);
133
161
  --aura-border-danger: var(--aura-red-400);
134
162
  --aura-bg-input: var(--aura-zinc-900);
@@ -147,10 +175,23 @@
147
175
  --aura-alert-danger-fg: var(--aura-red-300);
148
176
  --aura-alert-danger-border: #6e2a2b;
149
177
  --aura-fg-positive: var(--aura-lime-300);
178
+ --aura-chart-1: #bba9ff;
179
+ --aura-chart-3: #fe9c63;
180
+ --aura-chart-5: #ff91d1;
181
+ --aura-chart-7: #e4ac06;
182
+ --aura-chart-seq-1: #784cd6;
183
+ --aura-chart-seq-2: #8f67f2;
184
+ --aura-chart-seq-3: #a78bfe;
185
+ --aura-chart-seq-4: #c1b1fe;
186
+ --aura-chart-seq-5: #dcd5fe;
187
+ --aura-chart-grid: var(--aura-zinc-800);
188
+ --aura-chart-axis: var(--aura-zinc-400);
150
189
  --aura-button-primary-bg: var(--aura-zinc-0);
151
190
  --aura-button-primary-fg: var(--aura-zinc-900);
152
191
  --aura-button-primary-bg-hover: var(--aura-zinc-200);
153
192
  --aura-button-secondary-border: var(--aura-zinc-500);
193
+ --aura-button-danger-bg: var(--aura-red-600);
194
+ --aura-button-danger-bg-hover: var(--aura-red-700);
154
195
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
155
196
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
156
197
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -176,9 +217,15 @@
176
217
  --aura-border-subtle: rgba(255,255,255,0.06);
177
218
  --aura-accent-violet: var(--aura-violet-400);
178
219
  --aura-focus-ring: var(--aura-violet-400);
220
+ --aura-status-neutral-bg: var(--aura-zinc-800);
221
+ --aura-status-neutral-fg: var(--aura-zinc-300);
222
+ --aura-status-progress-bg: #2f2647;
223
+ --aura-status-progress-fg: var(--aura-violet-300);
224
+ --aura-status-ready-bg: #2b351f;
225
+ --aura-status-ready-fg: var(--aura-lime-300);
179
226
  --aura-bg-selected: #2c283a;
180
227
  --aura-border-control: var(--aura-zinc-400);
181
- --aura-bg-skeleton: var(--aura-zinc-800);
228
+ --aura-bg-skeleton: var(--aura-zinc-700);
182
229
  --aura-fg-danger: var(--aura-red-400);
183
230
  --aura-border-danger: var(--aura-red-400);
184
231
  --aura-bg-input: var(--aura-zinc-900);
@@ -197,10 +244,23 @@
197
244
  --aura-alert-danger-fg: var(--aura-red-300);
198
245
  --aura-alert-danger-border: #6e2a2b;
199
246
  --aura-fg-positive: var(--aura-lime-300);
247
+ --aura-chart-1: #bba9ff;
248
+ --aura-chart-3: #fe9c63;
249
+ --aura-chart-5: #ff91d1;
250
+ --aura-chart-7: #e4ac06;
251
+ --aura-chart-seq-1: #784cd6;
252
+ --aura-chart-seq-2: #8f67f2;
253
+ --aura-chart-seq-3: #a78bfe;
254
+ --aura-chart-seq-4: #c1b1fe;
255
+ --aura-chart-seq-5: #dcd5fe;
256
+ --aura-chart-grid: var(--aura-zinc-800);
257
+ --aura-chart-axis: var(--aura-zinc-400);
200
258
  --aura-button-primary-bg: var(--aura-zinc-0);
201
259
  --aura-button-primary-fg: var(--aura-zinc-900);
202
260
  --aura-button-primary-bg-hover: var(--aura-zinc-200);
203
261
  --aura-button-secondary-border: var(--aura-zinc-500);
262
+ --aura-button-danger-bg: var(--aura-red-600);
263
+ --aura-button-danger-bg-hover: var(--aura-red-700);
204
264
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
205
265
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
206
266
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -258,6 +318,8 @@
258
318
  --aura-container-narrow: 720px;
259
319
  --aura-cal-cell: 36px;
260
320
  --aura-popover-max-height: 320px;
321
+ --aura-input-font-size: 14px;
322
+ --aura-touch-target: 44px;
261
323
  --aura-bp-sm: 640px;
262
324
  --aura-bp-md: 768px;
263
325
  --aura-bp-lg: 1024px;