@jirawatpyk/aura-tokens 5.1.0 → 5.2.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 (14) hide show
  1. package/README.md +14 -14
  2. package/aura-tailwind.css +16 -3
  3. package/aura-tailwind.prefixed.css +1 -1
  4. package/aura.css +5 -1
  5. package/components/aura.bundle.js +562 -183
  6. package/components/aura.components.css +26 -5
  7. package/components/index.d.ts +6 -1
  8. package/eslint-plugin-aura.d.ts +11 -0
  9. package/eslint-plugin-aura.js +112 -21
  10. package/package.json +22 -5
  11. package/scripts/a11y-check.js +3 -0
  12. package/scripts/lint-tokens.js +31 -4
  13. package/tailwind.tokens.d.cts +16 -0
  14. package/tokens.json +1 -1
package/README.md CHANGED
@@ -4,20 +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
- | `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). |
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, colour functions (rgb, hsl, oklch, color-mix…), named colours in style values and Tailwind palette / `bg-[#…]` classes. ESLint 9: `import aura from '@jirawatpyk/aura-tokens/eslint-plugin'; export default [aura.configs.recommended];` (5.2). |
18
+ | `scripts/build-tokens.js` | Rebuilds the generated files from `tokens.json`. |
19
+ | `scripts/a11y-check.js` | Checks 210 pairs in both themes: text on its grounds (WCAG AA), control edges and state marks at 3:1, neighbouring chart and status fills a lightness step apart. |
20
+ | `scripts/lint-tokens.js` | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason). |
21
21
 
22
22
  ## ใช้งาน (5 นาที)
23
23
 
package/aura-tailwind.css CHANGED
@@ -1,12 +1,25 @@
1
- /* AURA v5.1.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
1
+ /* AURA v5.2.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,
5
5
  * ease-aura-ease, duration-aura-fast, z-aura-dialog, font-display … (the v3 preset's names). */
6
6
  @import "./aura.css";
7
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"] *));
8
+ /* dark: follows .dark and data-theme="dark", the same switches aura.css uses; data-theme="system" when the OS is dark
9
+ * (5.2); and not inside a light island in a dark page (Surface sets data-theme="light"), where the tokens are light. */
10
+ @custom-variant dark {
11
+ &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):not(:where(.dark [data-theme="light"], .dark [data-theme="light"] *, [data-theme="dark"] [data-theme="light"], [data-theme="dark"] [data-theme="light"] *)) {
12
+ @slot;
13
+ }
14
+ &:where([data-theme="light"] [data-theme="dark"], [data-theme="light"] [data-theme="dark"] *):not(:where([data-theme="dark"] [data-theme="light"], [data-theme="dark"] [data-theme="light"] *)) {
15
+ @slot;
16
+ }
17
+ @media (prefers-color-scheme: dark) {
18
+ &:where([data-theme="system"], [data-theme="system"] *):not(:where([data-theme="system"] [data-theme="light"], [data-theme="system"] [data-theme="light"] *)) {
19
+ @slot;
20
+ }
21
+ }
22
+ }
10
23
 
11
24
  @theme inline {
12
25
  --color-aura-violet-50: var(--aura-violet-50);
package/aura-tailwind.prefixed.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v5.1.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
1
+ /* AURA v5.2.0 — 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";
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v5.1.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v5.2.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"] {
@@ -197,6 +197,8 @@
197
197
  --aura-button-secondary-border: var(--aura-zinc-500);
198
198
  --aura-button-danger-bg: var(--aura-red-600);
199
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);
200
202
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
201
203
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
202
204
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -267,6 +269,8 @@
267
269
  --aura-button-secondary-border: var(--aura-zinc-500);
268
270
  --aura-button-danger-bg: var(--aura-red-600);
269
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);
270
274
  --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
271
275
  --aura-shadow-creative: 4px 4px 0px #a78bfa;
272
276
  --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;