@jirawatpyk/aura-tokens 4.17.0 → 4.19.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 +13 -11
  2. package/aura-tailwind.css +2 -1
  3. package/aura-tailwind.prefixed.css +2 -1
  4. package/aura.css +3 -1
  5. package/components/aura.bundle.js +468 -190
  6. package/components/aura.components.css +88 -3
  7. package/components/index.d.ts +106 -5
  8. package/figma-variables.csv +1 -0
  9. package/package.json +1 -1
  10. package/tailwind.tokens.cjs +1 -0
  11. package/tokens.json +6 -2
package/README.md CHANGED
@@ -29,20 +29,12 @@ npm install @aura/tokens@npm:@jirawatpyk/aura-tokens @aura/react@npm:@jirawatpyk
29
29
 
30
30
  ```tsx
31
31
  // app/layout.tsx
32
- import '@aura/tokens/aura-fonts.css'; // Google Fonts (or use the <link> tags below instead)
32
+ import '@aura/tokens/aura-fonts.local.css'; // fonts, self-hosted from the package: works under a font-src 'self' CSP
33
33
  import '@aura/tokens/aura.css'; // tokens
34
34
  import '@aura/react/styles.css'; // component styles (with @aura/react)
35
35
  ```
36
36
 
37
- ```html
38
- <!-- Preferred: load the fonts from <head> instead of aura-fonts.css — faster, and a blocked host fails quietly -->
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
- ```
37
+ Next.js can load the same families with `next/font` instead, and a site with no CSP can use Google Fonts (`aura-fonts.css` or `<link>` tags). Both are under Fonts below.
46
38
 
47
39
  ### Fonts
48
40
 
@@ -52,7 +44,17 @@ Pick one of three ways to load Fraunces, Inter, JetBrains Mono and Noto Sans Tha
52
44
  | ------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
53
45
  | 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
46
  | `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` |
47
+ | Google Fonts | No CSP, or one that allows `fonts.googleapis.com` and `fonts.gstatic.com` | `aura-fonts.css`, or the `<link>` tags below (faster; a blocked host fails quietly) |
48
+
49
+ ```html
50
+ <!-- Google Fonts from <head> (only without a strict CSP) -->
51
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
52
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
53
+ <link
54
+ rel="stylesheet"
55
+ 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"
56
+ />
57
+ ```
56
58
 
57
59
  ```tsx
58
60
  // app/layout.tsx — next/font (downloads at build time and self-hosts, so font-src 'self' is enough)
package/aura-tailwind.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.17.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
1
+ /* AURA v4.19.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,
@@ -165,5 +165,6 @@
165
165
  @utility duration-aura-tooltip { transition-duration: var(--aura-duration-tooltip); }
166
166
  @utility z-aura-menu { z-index: var(--aura-z-menu); }
167
167
  @utility z-aura-dialog { z-index: var(--aura-z-dialog); }
168
+ @utility z-aura-bar { z-index: var(--aura-z-bar); }
168
169
  @utility z-aura-toast { z-index: var(--aura-z-toast); }
169
170
  @utility z-aura-tooltip { z-index: var(--aura-z-tooltip); }
package/aura-tailwind.prefixed.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.17.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
1
+ /* AURA v4.19.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";
@@ -161,5 +161,6 @@
161
161
  @utility duration-aura-tooltip { transition-duration: var(--aura-duration-tooltip); }
162
162
  @utility z-aura-menu { z-index: var(--aura-z-menu); }
163
163
  @utility z-aura-dialog { z-index: var(--aura-z-dialog); }
164
+ @utility z-aura-bar { z-index: var(--aura-z-bar); }
164
165
  @utility z-aura-toast { z-index: var(--aura-z-toast); }
165
166
  @utility z-aura-tooltip { z-index: var(--aura-z-tooltip); }
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.17.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v4.19.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"] {
@@ -312,6 +312,7 @@
312
312
  --aura-dialog-lg: 720px;
313
313
  --aura-sidenav-width: 240px;
314
314
  --aura-sidenav-rail-width: 64px;
315
+ --aura-bottomnav-height: 56px;
315
316
  --aura-tooltip-max: 240px;
316
317
  --aura-drawer-sm: 360px;
317
318
  --aura-drawer-md: 480px;
@@ -331,6 +332,7 @@
331
332
  --aura-disabled-opacity: 0.5;
332
333
  --aura-z-menu: 1000;
333
334
  --aura-z-dialog: 900;
335
+ --aura-z-bar: 800;
334
336
  --aura-z-toast: 1200;
335
337
  --aura-z-tooltip: 1300;
336
338
  --aura-ease: cubic-bezier(0.16, 1, 0.3, 1);