@jirawatpyk/aura-tokens 4.6.1 → 4.7.1

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.6.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.7.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {
@@ -98,6 +98,7 @@
   --aura-button-primary-bg: var(--aura-zinc-900);
   --aura-button-primary-fg: var(--aura-zinc-0);
   --aura-button-primary-bg-hover: var(--aura-zinc-800);
+  --aura-button-secondary-border: var(--aura-zinc-450);
   --aura-button-creative-bg: var(--aura-white);
   --aura-button-creative-border: var(--aura-zinc-900);
   --aura-card-border: var(--aura-zinc-200);
@@ -149,6 +150,7 @@
   --aura-button-primary-bg: var(--aura-zinc-0);
   --aura-button-primary-fg: var(--aura-zinc-900);
   --aura-button-primary-bg-hover: var(--aura-zinc-200);
+  --aura-button-secondary-border: var(--aura-zinc-500);
   --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
   --aura-shadow-creative: 4px 4px 0px #a78bfa;
   --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
@@ -198,6 +200,7 @@
     --aura-button-primary-bg: var(--aura-zinc-0);
     --aura-button-primary-fg: var(--aura-zinc-900);
     --aura-button-primary-bg-hover: var(--aura-zinc-200);
+    --aura-button-secondary-border: var(--aura-zinc-500);
     --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
     --aura-shadow-creative: 4px 4px 0px #a78bfa;
     --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;

package/components/aura.bundle.js

@@ -240,28 +240,65 @@ window.Aura = (() => {
 
   // src/Button.tsx
   var React3 = __toESM(require_react(), 1);
-  var Button = React3.forwardRef(function Button2(props, ref) {
+  function ButtonLink(props, ref) {
     const variant = props.variant || "primary";
-    const loading = !!props.loading;
-    const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+    const disabled = !!props.disabled;
+    const rest = omit(props, [
+      "variant",
+      "className",
+      "children",
+      "icon",
+      "iconRight",
+      "disabled",
+      "linkComponent",
+      "href"
+    ]);
+    const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
     return /* @__PURE__ */ React3.createElement(
-      "button",
+      Tag3,
       {
         ...rest,
         ref,
-        type: props.type || "button",
-        className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
-        "aria-busy": loading || void 0,
-        "aria-disabled": loading || void 0,
-        onClick: loading ? function(e) {
-          e.preventDefault();
-        } : props.onClick
+        href: disabled ? void 0 : props.href,
+        role: disabled ? "link" : void 0,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : props.tabIndex,
+        className: cx("aura-btn", "aura-btn--" + variant, props.className),
+        onClick: disabled ? void 0 : props.onClick
       },
-      loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
+      props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
       props.children,
-      props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
+      props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
     );
-  });
+  }
+  var Button = React3.forwardRef(
+    function Button2(all, ref) {
+      if (typeof all.href === "string") {
+        return ButtonLink(all, ref);
+      }
+      const props = all;
+      const variant = props.variant || "primary";
+      const loading = !!props.loading;
+      const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+      return /* @__PURE__ */ React3.createElement(
+        "button",
+        {
+          ...rest,
+          ref,
+          type: props.type || "button",
+          className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || void 0,
+          onClick: loading ? function(e) {
+            e.preventDefault();
+          } : props.onClick
+        },
+        loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
+        props.children,
+        props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
+      );
+    }
+  );
 
   // src/IconButton.tsx
   var React4 = __toESM(require_react(), 1);

package/components/aura.components.css

@@ -26,7 +26,8 @@
   transition-timing-function: var(--aura-ease);
 }
 .aura-btn:active { transform: scale(0.98); }
-.aura-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+.aura-btn:disabled, a.aura-btn[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+a.aura-btn { text-decoration: none; }
 .aura-btn.is-loading { cursor: progress; }
 .aura-btn.is-loading:active { transform: none; }
 
@@ -40,7 +41,7 @@
 .aura-btn--primary { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
 
-.aura-btn--secondary { border: 1px solid var(--aura-border-default); color: var(--aura-fg-primary); }
+.aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
 .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
 
 .aura-btn--creative {

package/components/index.d.ts

@@ -13,6 +13,22 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
 }
+/** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
+export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+	/** Where the link goes. With `href`, Button renders an `<a>` and its ref is the `<a>`. */
+	href: string;
+	/** Visual variant. Default `primary`. */
+	variant?: "primary" | "secondary" | "creative";
+	/** Label text — say where it goes ("View Orders"), not "Click here". */
+	children: React$1.ReactNode;
+	icon?: IconName;
+	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
+	iconRight?: IconName;
+	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
+	disabled?: boolean;
+	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
+	linkComponent?: React$1.ElementType;
+}
 export interface DataTableColumn {
 	/** Key into each row object. */
 	key: string;
@@ -779,8 +795,15 @@ export declare const ICONS: Record<IconName, IconShape[]>;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 /** Every icon name the bundle carries. */
 export declare const iconNames: IconName[];
-/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
-export declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+/** Button with an `href` is a link; without, a button. Two call signatures so each gets the right props and ref. */
+export interface ButtonComponent {
+	(props: ButtonLinkProps & React$1.RefAttributes<HTMLAnchorElement>): React$1.ReactElement | null;
+	(props: ButtonProps & React$1.RefAttributes<HTMLButtonElement>): React$1.ReactElement | null;
+	displayName?: string;
+}
+/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only.
+ * With `href` it renders a link that looks the same (`<a>`, or your router's link via `linkComponent`). */
+export declare const Button: ButtonComponent;
 export declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** Popover list anchored to an element, rendered in a portal. */
 export declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLDivElement>>;

package/figma-variables.csv

@@ -146,12 +146,14 @@ semantic/fg-positive,color,dark,{primitive/lime/300},"Rising-and-good numbers (S
 component/button-primary-bg,color,light,{primitive/zinc/900},"Component: Enterprise (primary) button fill — ink in light, white in dark, as the Storybook story renders it (tokens.json pins it to the light value, which disappears on the dark surface).",ALL_FILLS
 component/button-primary-fg,color,light,{primitive/zinc/0},Component: primary button label on aura-button-primary-bg (17.7:1 both themes).,ALL_FILLS
 component/button-primary-bg-hover,color,light,{primitive/zinc/800},"Component: primary button hover. Light zinc-800 is the source value; dark zinc-200 is an ADDED value (the source has none — its zinc-800 hover hides the dark label at 1.19:1). Label 14.9:1 light, 14.0:1 dark.",ALL_FILLS
+component/button-secondary-border,color,light,{primitive/zinc/450},"Component: secondary button (and secondary Button links) 1px edge. ≥3:1 on aura-bg-surface and -canvas in both themes (zinc-450 light 3.1–3.3:1, zinc-500 dark 3.7–4.1:1), so the pill is visible without its label. ADDED 4.7.1 (was aura-border-default, ~1.3:1).",ALL_FILLS
 component/button-creative-bg,color,light,{primitive/white},Component: Creative button fill (white in every theme). Label in aura-ink.,ALL_FILLS
 component/button-creative-border,color,light,{primitive/zinc/900},Component: Creative button 2px border.,ALL_FILLS
 component/card-border,color,light,{primitive/zinc/200},Component: card outline (light value; use aura-border-default where the card must follow theme).,ALL_FILLS
 component/button-primary-bg,color,dark,{primitive/zinc/0},"Component: Enterprise (primary) button fill — ink in light, white in dark, as the Storybook story renders it (tokens.json pins it to the light value, which disappears on the dark surface).",ALL_FILLS
 component/button-primary-fg,color,dark,{primitive/zinc/900},Component: primary button label on aura-button-primary-bg (17.7:1 both themes).,ALL_FILLS
 component/button-primary-bg-hover,color,dark,{primitive/zinc/200},"Component: primary button hover. Light zinc-800 is the source value; dark zinc-200 is an ADDED value (the source has none — its zinc-800 hover hides the dark label at 1.19:1). Label 14.9:1 light, 14.0:1 dark.",ALL_FILLS
+component/button-secondary-border,color,dark,{primitive/zinc/500},"Component: secondary button (and secondary Button links) 1px edge. ≥3:1 on aura-bg-surface and -canvas in both themes (zinc-450 light 3.1–3.3:1, zinc-500 dark 3.7–4.1:1), so the pill is visible without its label. ADDED 4.7.1 (was aura-border-default, ~1.3:1).",ALL_FILLS
 component/button-creative-bg,color,dark,{primitive/white},Component: Creative button fill (white in every theme). Label in aura-ink.,ALL_FILLS
 component/button-creative-border,color,dark,{primitive/zinc/900},Component: Creative button 2px border.,ALL_FILLS
 component/card-border,color,dark,{primitive/zinc/200},Component: card outline (light value; use aura-border-default where the card must follow theme).,ALL_FILLS

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.6.1",
+  "version": "4.7.1",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/scripts/a11y-check.js

@@ -54,6 +54,7 @@ pairs.push(['on-texture', 'mesh-from', TEXT], ['on-texture', 'mesh-to', TEXT]);
 for (const bg of ['bg-surface', 'bg-canvas', 'bg-input', 'bg-selected']) pairs.push(['border-control', bg, UI]);
 for (const bg of ['bg-surface', 'bg-canvas', 'bg-surface-hover', 'bg-selected']) pairs.push(['focus-ring', bg, UI]);
 pairs.push(['border-danger', 'bg-input', UI]);
+for (const bg of ['bg-surface', 'bg-canvas']) pairs.push(['button-secondary-border', bg, UI]);
 
 const results = [], fails = [];
 for (const theme of ['light', 'dark']) for (const [fg, bg, min] of pairs) {

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.1",
+  "version": "4.7.1",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",
@@ -177,6 +177,7 @@
       "button-primary-bg": "{primitive.zinc.900}",
       "button-primary-fg": "{primitive.zinc.0}",
       "button-primary-bg-hover": "{primitive.zinc.800}",
+      "button-secondary-border": "{primitive.zinc.450}",
       "button-creative-bg": "{primitive.white}",
       "button-creative-border": "{primitive.zinc.900}",
       "card-border": "{primitive.zinc.200}"
@@ -185,6 +186,7 @@
       "button-primary-bg": "{primitive.zinc.0}",
       "button-primary-fg": "{primitive.zinc.900}",
       "button-primary-bg-hover": "{primitive.zinc.200}",
+      "button-secondary-border": "{primitive.zinc.500}",
       "button-creative-bg": "{primitive.white}",
       "button-creative-border": "{primitive.zinc.900}",
       "card-border": "{primitive.zinc.200}"
@@ -479,6 +481,7 @@
     "container-narrow": "Narrow container for forms and reading. ADDED 4.2.",
     "cal-cell": "Calendar day cell (DatePicker). 40px on touch screens via media query. ADDED 4.2.",
     "popover-max-height": "Max height of Combobox listbox and DatePicker popover lists. ADDED 4.2.",
-    "fg-positive": "Rising-and-good numbers (Stat change, positive deltas) on aura-bg-surface / -canvas. Never on lime fills. ADDED 4.3."
+    "fg-positive": "Rising-and-good numbers (Stat change, positive deltas) on aura-bg-surface / -canvas. Never on lime fills. ADDED 4.3.",
+    "button-secondary-border": "Component: secondary button (and secondary Button links) 1px edge. ≥3:1 on aura-bg-surface and -canvas in both themes (zinc-450 light 3.1–3.3:1, zinc-500 dark 3.7–4.1:1), so the pill is visible without its label. ADDED 4.7.1 (was aura-border-default, ~1.3:1)."
   }
 }