@jirawatpyk/aura-tokens 4.15.0 → 4.17.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 (20) hide show
  1. package/GOVERNANCE.md +1 -1
  2. package/README.md +63 -26
  3. package/aura-fonts.local.css +58 -0
  4. package/aura-tailwind.css +1 -1
  5. package/aura-tailwind.prefixed.css +165 -0
  6. package/aura.css +2 -1
  7. package/components/aura.bundle.js +239 -142
  8. package/components/aura.components.css +69 -4
  9. package/components/index.d.ts +537 -503
  10. package/figma-variables.csv +1 -0
  11. package/fonts/LICENSE.md +396 -0
  12. package/fonts/fraunces-latin-ext-opsz-normal.woff2 +0 -0
  13. package/fonts/fraunces-latin-opsz-normal.woff2 +0 -0
  14. package/fonts/inter-latin-ext-wght-normal.woff2 +0 -0
  15. package/fonts/inter-latin-wght-normal.woff2 +0 -0
  16. package/fonts/jetbrains-mono-latin-400-normal.woff2 +0 -0
  17. package/fonts/jetbrains-mono-latin-ext-400-normal.woff2 +0 -0
  18. package/fonts/noto-sans-thai-thai-wght-normal.woff2 +0 -0
  19. package/package.json +10 -3
  20. package/tokens.json +4 -2
package/GOVERNANCE.md CHANGED
@@ -53,7 +53,7 @@ Made by the design-system owner in one pass, instead of separate Proposals. Each
53
53
  - **Form tokens added**: `aura-bg-input`, `aura-bg-input-disabled`, `aura-fg-danger`, `aura-border-danger`, `aura-border-control`, `aura-input-height`.
54
54
  - **Textures adopted** as Creative-only: mesh and 4% grain.
55
55
  - **Table tokens adopted**: `aura-bg-selected` (opaque in dark), `aura-bg-skeleton`, `aura-table-select-width`, `aura-control-sm`; the header uses `aura-fg-secondary` instead of 60% opacity.
56
- - **Fonts** stay on Google Fonts (no self-hosted files) until a team needs offline use.
56
+ - **Fonts** stay on Google Fonts (no self-hosted files) until a team needs offline use. (4.16: Chamber-OS needed it — its CSP allows only `font-src 'self'` — so the four families now also ship as woff2 files with `aura-fonts.local.css`; Google stays the default for `aura-fonts.css`.)
57
57
 
58
58
  ## Decisions (4.2)
59
59
 
package/README.md CHANGED
@@ -4,19 +4,20 @@ Enterprise Standard, Human Creative. Tokens, Tailwind preset, Figma variables a
4
4
 
5
5
  ## What's inside
6
6
 
7
- | File | What |
8
- |---|---|
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
- | `aura.css` | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.** |
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 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`. |
14
- | `figma-variables.csv` | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.** |
15
- | `components/` | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`. |
16
- | `eslint-plugin-aura.js` | `aura/no-hardcoded-color`: hex, rgb()/hsl() and Tailwind `bg-[#…]` classes. |
17
- | `scripts/build-tokens.js` | Rebuilds the generated files from `tokens.json`. |
18
- | `scripts/a11y-check.js` | Checks 94 text/ground pairs in both themes (WCAG AA). |
19
- | `scripts/lint-tokens.js` | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason). |
7
+ | File | What |
8
+ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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
+ | `aura.css` | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.** |
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
+ | `aura-fonts.local.css` + `fonts/` | The same four families self-hosted: `@font-face` rules over woff2 files in the package (4.16), for a `font-src 'self'` CSP. `npm run check:fonts` loads them under that CSP. **Generated.** |
13
+ | `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**. |
14
+ | `aura-tailwind.css` | The same class names for Tailwind v4 (`@theme inline`, CSS-first). **Generated**; exported as `@jirawatpyk/aura-tokens/tailwind.css`. |
15
+ | `figma-variables.csv` | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.** |
16
+ | `components/` | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`. |
17
+ | `eslint-plugin-aura.js` | `aura/no-hardcoded-color`: hex, rgb()/hsl() and Tailwind `bg-[#…]` classes. |
18
+ | `scripts/build-tokens.js` | Rebuilds the generated files from `tokens.json`. |
19
+ | `scripts/a11y-check.js` | Checks 94 text/ground pairs in both themes (WCAG AA). |
20
+ | `scripts/lint-tokens.js` | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason). |
20
21
 
21
22
  ## ใช้งาน (5 นาที)
22
23
 
@@ -28,16 +29,49 @@ npm install @aura/tokens@npm:@jirawatpyk/aura-tokens @aura/react@npm:@jirawatpyk
28
29
 
29
30
  ```tsx
30
31
  // app/layout.tsx
31
- import '@aura/tokens/aura-fonts.css' // Google Fonts (or use the <link> tags below instead)
32
- import '@aura/tokens/aura.css' // tokens
33
- import '@aura/react/styles.css' // component styles (with @aura/react)
32
+ import '@aura/tokens/aura-fonts.css'; // Google Fonts (or use the <link> tags below instead)
33
+ import '@aura/tokens/aura.css'; // tokens
34
+ import '@aura/react/styles.css'; // component styles (with @aura/react)
34
35
  ```
35
36
 
36
37
  ```html
37
38
  <!-- Preferred: load the fonts from <head> instead of aura-fonts.css — faster, and a blocked host fails quietly -->
38
- <link rel="preconnect" href="https://fonts.googleapis.com">
39
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
40
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap">
39
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
40
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
41
+ <link
42
+ rel="stylesheet"
43
+ href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap"
44
+ />
45
+ ```
46
+
47
+ ### Fonts
48
+
49
+ Pick one of three ways to load Fraunces, Inter, JetBrains Mono and Noto Sans Thai:
50
+
51
+ | Option | Use when | How |
52
+ | ------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
53
+ | Self-hosted (4.16) | Your CSP allows only `font-src 'self'`, or you want no third-party requests | `import '@jirawatpyk/aura-tokens/aura-fonts.local.css'` — woff2 files ship in the package (`fonts/`, OFL-1.1), split by unicode range so a page downloads only what it uses |
54
+ | `next/font` | Next.js apps that want preloading and zero layout shift | Load the families with `next/font` and point the AURA font variables at them (below) |
55
+ | Google Fonts | Anything else | The `<link>` tags below, or `aura-fonts.css` |
56
+
57
+ ```tsx
58
+ // app/layout.tsx — next/font (downloads at build time and self-hosts, so font-src 'self' is enough)
59
+ import { Fraunces, Inter, JetBrains_Mono, Noto_Sans_Thai } from 'next/font/google';
60
+ const display = Fraunces({ subsets: ['latin', 'latin-ext'], axes: ['opsz'], variable: '--next-display' });
61
+ const sans = Inter({ subsets: ['latin', 'latin-ext'], variable: '--next-sans' });
62
+ const mono = JetBrains_Mono({ subsets: ['latin', 'latin-ext'], weight: '400', variable: '--next-mono' });
63
+ const thai = Noto_Sans_Thai({ subsets: ['thai'], variable: '--next-thai' });
64
+ // <html className={[display, sans, mono, thai].map((f) => f.variable).join(' ')}>
65
+ ```
66
+
67
+ ```css
68
+ /* app/globals.css, after aura.css — AURA's stacks now use the next/font families */
69
+ :root {
70
+ --font-display: var(--next-display), var(--next-thai), serif;
71
+ --font-sans: var(--next-sans), var(--next-thai), sans-serif;
72
+ --font-mono: var(--next-mono), monospace;
73
+ --font-thai: var(--next-thai), sans-serif;
74
+ }
41
75
  ```
42
76
 
43
77
  Dark theme: put `class="dark"` (or `data-theme="dark"`) on `<html>`.
@@ -46,12 +80,14 @@ Dark theme: put `class="dark"` (or `data-theme="dark"`) on `<html>`.
46
80
 
47
81
  ```css
48
82
  /* app/globals.css */
49
- @import "tailwindcss";
50
- @import "@jirawatpyk/aura-tokens/tailwind.css"; /* imports aura.css too */
83
+ @import 'tailwindcss';
84
+ @import '@jirawatpyk/aura-tokens/tailwind.css'; /* imports aura.css too */
51
85
  ```
52
86
 
53
87
  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
88
 
89
+ Next to an existing Tailwind theme (shadcn) use `@jirawatpyk/aura-tokens/tailwind.prefixed.css` instead (4.17). Every name carries `aura-` (`bg-aura-bg-surface`, `border-aura-border-strong`, `bg-aura-chart-1`, `font-aura-sans`), with no `@custom-variant` and no `@import`. Import `aura.css` yourself in an early layer so your theme keeps its `--font-*`. The React package README has the full setup, with `@jirawatpyk/aura-react/styles.layer.css`.
90
+
55
91
  ### Tailwind v3
56
92
 
57
93
  ```ts
@@ -70,11 +106,12 @@ Classes: `bg-bg-surface`, `text-fg-primary`, `border-border-strong`, `text-fg-da
70
106
  The bundle is a classic script that reads `window.React` / `window.ReactDOM` and sets `window.Aura`:
71
107
 
72
108
  ```tsx
73
- import React from 'react'
74
- import ReactDOM from 'react-dom'
75
- ;(window as any).React = React; (window as any).ReactDOM = ReactDOM
76
- import '@aura/tokens/components.js'
77
- const { Button, TextField, DataTable, Dialog, toast, Toaster } = (window as any).Aura
109
+ import React from 'react';
110
+ import ReactDOM from 'react-dom';
111
+ (window as any).React = React;
112
+ (window as any).ReactDOM = ReactDOM;
113
+ import '@aura/tokens/components.js';
114
+ const { Button, TextField, DataTable, Dialog, toast, Toaster } = (window as any).Aura;
78
115
  ```
79
116
 
80
117
  Types for every component are in `components/index.d.ts`.
package/aura-fonts.local.css ADDED
@@ -0,0 +1,58 @@
1
+ /* AURA fonts, self-hosted: Fraunces, Inter, JetBrains Mono and Noto Sans Thai from ./fonts (OFL-1.1, see fonts/LICENSE.md).
2
+ * Use instead of aura-fonts.css when your CSP allows only font-src 'self'. GENERATED. */
3
+ @font-face {
4
+ font-family: "Fraunces";
5
+ font-style: normal;
6
+ font-weight: 100 900;
7
+ font-display: swap;
8
+ src: url("./fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
9
+ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
10
+ }
11
+ @font-face {
12
+ font-family: "Fraunces";
13
+ font-style: normal;
14
+ font-weight: 100 900;
15
+ font-display: swap;
16
+ src: url("./fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
17
+ unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
18
+ }
19
+ @font-face {
20
+ font-family: "Inter";
21
+ font-style: normal;
22
+ font-weight: 100 900;
23
+ font-display: swap;
24
+ src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2");
25
+ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
26
+ }
27
+ @font-face {
28
+ font-family: "Inter";
29
+ font-style: normal;
30
+ font-weight: 100 900;
31
+ font-display: swap;
32
+ src: url("./fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
33
+ unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
34
+ }
35
+ @font-face {
36
+ font-family: "JetBrains Mono";
37
+ font-style: normal;
38
+ font-weight: 400;
39
+ font-display: swap;
40
+ src: url("./fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
41
+ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
42
+ }
43
+ @font-face {
44
+ font-family: "JetBrains Mono";
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ font-display: swap;
48
+ src: url("./fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2");
49
+ unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
50
+ }
51
+ @font-face {
52
+ font-family: "Noto Sans Thai";
53
+ font-style: normal;
54
+ font-weight: 100 900;
55
+ font-display: swap;
56
+ src: url("./fonts/noto-sans-thai-thai-wght-normal.woff2") format("woff2");
57
+ unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
58
+ }
package/aura-tailwind.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.15.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
1
+ /* AURA v4.17.0 — 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,
package/aura-tailwind.prefixed.css ADDED
@@ -0,0 +1,165 @@
1
+ /* AURA v4.17.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
2
+ * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
3
+ * @layer aura-tokens, theme, base, aura, components, utilities;
4
+ * @import "tailwindcss";
5
+ * @import "@jirawatpyk/aura-tokens/aura.css" layer(aura-tokens); <- the --aura-* variables; your theme wins for --font-*
6
+ * @import "@jirawatpyk/aura-tokens/tailwind.prefixed.css";
7
+ * @import "@jirawatpyk/aura-react/styles.layer.css"; <- components in @layer aura, so utilities win
8
+ * Classes: bg-aura-bg-surface, text-aura-fg-primary, border-aura-border-strong, bg-aura-chart-1, p-aura-6,
9
+ * rounded-aura-xl, shadow-aura-overlay, font-aura-sans … Use your own dark: variant. */
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-aura-bg-surface: var(--aura-bg-surface);
57
+ --color-aura-bg-surface-hover: var(--aura-bg-surface-hover);
58
+ --color-aura-bg-surface-strong: var(--aura-bg-surface-strong);
59
+ --color-aura-bg-canvas: var(--aura-bg-canvas);
60
+ --color-aura-bg-inverted: var(--aura-bg-inverted);
61
+ --color-aura-bg-selected: var(--aura-bg-selected);
62
+ --color-aura-bg-skeleton: var(--aura-bg-skeleton);
63
+ --color-aura-bg-input: var(--aura-bg-input);
64
+ --color-aura-bg-input-disabled: var(--aura-bg-input-disabled);
65
+ --color-aura-bg-scrim: var(--aura-bg-scrim);
66
+ --color-aura-bg-hover: var(--aura-bg-surface-hover);
67
+ --color-aura-bg-strong: var(--aura-bg-surface-strong);
68
+ --color-aura-fg-primary: var(--aura-fg-primary);
69
+ --color-aura-fg-secondary: var(--aura-fg-secondary);
70
+ --color-aura-fg-tertiary: var(--aura-fg-tertiary);
71
+ --color-aura-fg-inverted: var(--aura-fg-inverted);
72
+ --color-aura-fg-accent: var(--aura-fg-accent);
73
+ --color-aura-fg-danger: var(--aura-fg-danger);
74
+ --color-aura-fg-positive: var(--aura-fg-positive);
75
+ --color-aura-border: var(--aura-border-default);
76
+ --color-aura-border-default: var(--aura-border-default);
77
+ --color-aura-border-strong: var(--aura-border-strong);
78
+ --color-aura-border-subtle: var(--aura-border-subtle);
79
+ --color-aura-border-control: var(--aura-border-control);
80
+ --color-aura-border-danger: var(--aura-border-danger);
81
+ --color-aura-accent-dot: var(--aura-accent-dot);
82
+ --color-aura-accent-violet: var(--aura-accent-violet);
83
+ --color-aura-accent-lime: var(--aura-accent-lime);
84
+ --color-aura-status-neutral-bg: var(--aura-status-neutral-bg);
85
+ --color-aura-status-neutral-fg: var(--aura-status-neutral-fg);
86
+ --color-aura-status-progress-bg: var(--aura-status-progress-bg);
87
+ --color-aura-status-progress-fg: var(--aura-status-progress-fg);
88
+ --color-aura-status-ready-bg: var(--aura-status-ready-bg);
89
+ --color-aura-status-ready-fg: var(--aura-status-ready-fg);
90
+ --color-aura-status-blocked-bg: var(--aura-status-blocked-bg);
91
+ --color-aura-status-blocked-fg: var(--aura-status-blocked-fg);
92
+ --color-aura-chart-1: var(--aura-chart-1);
93
+ --color-aura-chart-2: var(--aura-chart-2);
94
+ --color-aura-chart-3: var(--aura-chart-3);
95
+ --color-aura-chart-4: var(--aura-chart-4);
96
+ --color-aura-chart-5: var(--aura-chart-5);
97
+ --color-aura-chart-6: var(--aura-chart-6);
98
+ --color-aura-chart-7: var(--aura-chart-7);
99
+ --color-aura-chart-8: var(--aura-chart-8);
100
+ --color-aura-chart-seq-1: var(--aura-chart-seq-1);
101
+ --color-aura-chart-seq-2: var(--aura-chart-seq-2);
102
+ --color-aura-chart-seq-3: var(--aura-chart-seq-3);
103
+ --color-aura-chart-seq-4: var(--aura-chart-seq-4);
104
+ --color-aura-chart-seq-5: var(--aura-chart-seq-5);
105
+ --color-aura-chart-grid: var(--aura-chart-grid);
106
+ --color-aura-chart-axis: var(--aura-chart-axis);
107
+ --color-aura-alert-info-bg: var(--aura-alert-info-bg);
108
+ --color-aura-alert-info-fg: var(--aura-alert-info-fg);
109
+ --color-aura-alert-info-border: var(--aura-alert-info-border);
110
+ --color-aura-alert-success-bg: var(--aura-alert-success-bg);
111
+ --color-aura-alert-success-fg: var(--aura-alert-success-fg);
112
+ --color-aura-alert-success-border: var(--aura-alert-success-border);
113
+ --color-aura-alert-warning-bg: var(--aura-alert-warning-bg);
114
+ --color-aura-alert-warning-fg: var(--aura-alert-warning-fg);
115
+ --color-aura-alert-warning-border: var(--aura-alert-warning-border);
116
+ --color-aura-alert-danger-bg: var(--aura-alert-danger-bg);
117
+ --color-aura-alert-danger-fg: var(--aura-alert-danger-fg);
118
+ --color-aura-alert-danger-border: var(--aura-alert-danger-border);
119
+ --color-aura-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
+ --font-aura-display: "Fraunces", "Noto Sans Thai", serif;
150
+ --font-aura-sans: "Inter", "Noto Sans Thai", sans-serif;
151
+ --font-aura-mono: "JetBrains Mono", monospace;
152
+ --font-aura-thai: "Noto Sans Thai", sans-serif;
153
+ }
154
+
155
+ @utility duration-aura-fast { transition-duration: var(--aura-duration-fast); }
156
+ @utility duration-aura-base { transition-duration: var(--aura-duration-base); }
157
+ @utility duration-aura-slow { transition-duration: var(--aura-duration-slow); }
158
+ @utility duration-aura-spin { transition-duration: var(--aura-duration-spin); }
159
+ @utility duration-aura-pulse { transition-duration: var(--aura-duration-pulse); }
160
+ @utility duration-aura-toast { transition-duration: var(--aura-duration-toast); }
161
+ @utility duration-aura-tooltip { transition-duration: var(--aura-duration-tooltip); }
162
+ @utility z-aura-menu { z-index: var(--aura-z-menu); }
163
+ @utility z-aura-dialog { z-index: var(--aura-z-dialog); }
164
+ @utility z-aura-toast { z-index: var(--aura-z-toast); }
165
+ @utility z-aura-tooltip { z-index: var(--aura-z-tooltip); }
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.15.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v4.17.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"] {
@@ -293,6 +293,7 @@
293
293
  --aura-card-radius: 20px;
294
294
  --aura-button-radius: 9999px;
295
295
  --aura-button-height: 44px;
296
+ --aura-button-height-sm: 32px;
296
297
  --aura-icon-sm: 16px;
297
298
  --aura-icon-md: 20px;
298
299
  --aura-icon-lg: 24px;