@nebutra/tokens 0.1.2 → 0.1.3

package/recipe.css

@@ -23,7 +23,8 @@
   --btn-default-fg: hsl(var(--primary-foreground));
   --btn-default-border: transparent;
   --btn-default-border-width: 0px;
-  --btn-default-stroke-gradient: transparent;
+  /* An image, never a colour — see the @property registration below. */
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --btn-default-radius: var(--radius-button, var(--radius-md, 0.375rem));
   --btn-default-shadow: 0 0 #0000;
@@ -42,6 +43,11 @@
   --control-height-sm: 2rem; /* 32 */
   --control-height-md: 2.5rem; /* 40 */
   --control-height-lg: 3rem; /* 48 */
+  /* Icon-only triggers — orthogonal to the text-button ladder above.
+     apps use 28/32/36 rounded-md squares; circle uses the same boxes. */
+  --control-height-icon-sm: 1.75rem; /* 28 */
+  --control-height-icon-md: 2rem; /* 32 */
+  --control-height-icon-lg: 2.25rem; /* 36 */
   --control-font-size-tiny: 0.6875rem; /* 11 */
   --control-font-size-sm: 0.75rem; /* 12 */
   --control-font-size-md: 0.875rem; /* 14 */
@@ -62,6 +68,321 @@
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--brand-mark)) 80%, transparent);
 }
 
+/**
+ * The stroke slot is consumed as a background-image layer, so its value has to
+ * be an <image>. A colour there is not merely ignored: background-image becomes
+ * invalid as a whole and the browser drops every layer, including the solid
+ * brand fill in front of it. The button then renders with no background at all,
+ * while `color` — a separate declaration — keeps painting white text. That is
+ * what shipped: every default Button outside the gsap skin was white-on-white,
+ * because the slot held `transparent`, which is a colour.
+ *
+ * Registering the property makes that unrepresentable rather than merely
+ * discouraged. A colour written here now fails to parse against `<image>`, so
+ * the declaration is rejected and the slot keeps this initial value — the fill
+ * survives. Skins are generated, and a generator is exactly the place where one
+ * wrong branch reaches every brand at once.
+ *
+ * The var() fallbacks at the use sites stay as the unregistered path, so the
+ * recipe is still correct where @property is unsupported.
+ */
+@property --btn-default-stroke-gradient {
+  syntax: "<image>";
+  inherits: true;
+  initial-value: linear-gradient(transparent, transparent);
+}
+
+/**
+ * ── Type contracts for every other recipe slot ───────────────────────────────
+ *
+ * Same reasoning, generalised. Each slot below is read from a typed CSS position
+ * (a colour, a length, a font weight), so a wrong-typed value written by a skin
+ * does not fail locally — it makes the whole consuming declaration invalid at
+ * computed-value time and the browser silently drops it. Registering the slot
+ * moves the failure to the slot itself: the bad value is rejected, the property
+ * keeps its initial-value, and the declaration that reads it still renders.
+ *
+ * Rules observed here:
+ *   • `inherits: true` on every slot. Custom properties inherit by default, and
+ *     every skin sets these on `:root` / `[data-theme]` for descendants to read.
+ *     `inherits: false` would hand every non-root element the initial-value.
+ *   • `initial-value` is computationally independent: absolute colours and `px`
+ *     only. No `var()`, no `em`/`rem`, no `currentcolor`. The declared values in
+ *     `:root` above are free to keep using `var()` and `rem` — the restriction
+ *     applies to the initial-value alone. The px initials are the rem defaults
+ *     resolved at a 16px root (0.375rem → 6px) so the fallback matches the
+ *     factory ladder rather than inventing a new one.
+ *   • Registering a `<length>` slot absolutises `rem` at computed-value time.
+ *     Every skin writes `rem` or `px`, so this is a no-op today. A skin that
+ *     wants element-relative sizing must not use `em` in these slots: it would
+ *     resolve against the element's own font-size before the slot is read.
+ */
+
+/* ── Colour slots ─────────────────────────────────────────────────────────────
+ * Read inside `linear-gradient()` (button) and `background-color` (badge).
+ * Initial-values are the light-theme action blue (222.8 85% 55.7%) and its
+ * white foreground, i.e. the factory default rendered without a skin.
+ */
+@property --btn-default-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --btn-default-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --btn-default-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --btn-default-hover-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --badge-default-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --badge-default-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --badge-default-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --badge-default-hover-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+/* ── Length slots ─────────────────────────────────────────────────────────────
+ * `border-width` and the control ladder are plain lengths. Radii and padding go
+ * into `border-radius` / `padding`, which both accept percentages, so those get
+ * `<length-percentage>` — a skin expressing a pill as `50%` stays legal.
+ */
+@property --btn-default-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --btn-default-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --btn-default-padding-y {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 8px;
+}
+
+@property --btn-default-padding-x {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --badge-default-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --radius-button {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --radius-card {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 12px;
+}
+
+@property --radius-badge {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --radius-inputs {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --radius-pill {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --control-height-tiny {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 24px;
+}
+
+@property --control-height-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 32px;
+}
+
+@property --control-height-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 40px;
+}
+
+@property --control-height-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 48px;
+}
+
+@property --control-height-icon-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 28px;
+}
+
+@property --control-height-icon-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 32px;
+}
+
+@property --control-height-icon-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 36px;
+}
+
+@property --control-font-size-tiny {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 11px;
+}
+
+@property --control-font-size-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 12px;
+}
+
+@property --control-font-size-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 14px;
+}
+
+@property --control-font-size-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+/* ── Numeric slots ────────────────────────────────────────────────────────────
+ * `font-weight` also accepts `normal` / `bold` in CSS, so those two idents are
+ * spelled into the syntax rather than excluded. `bolder` / `lighter` are left
+ * out on purpose: they are parent-relative and cannot survive as a slot value.
+ * Every skin currently writes a number (300–700).
+ */
+@property --font-weight-medium {
+  syntax: "<number> | normal | bold";
+  inherits: true;
+  initial-value: 500;
+}
+
+@property --font-weight-heading {
+  syntax: "<number> | normal | bold";
+  inherits: true;
+  initial-value: 600;
+}
+
+/* ── Genuinely untypeable: box-shadow lists ───────────────────────────────────
+ * These four are consumed as `box-shadow`, and the `@property` syntax grammar
+ * has no `<shadow>` component — its component names are limited to <length>,
+ * <number>, <percentage>, <length-percentage>, <color>, <image>, <url>,
+ * <integer>, <angle>, <time>, <resolution>, <transform-function>,
+ * <transform-list>, <custom-ident> and <string>, with only `+` / `#`
+ * multipliers. A shadow list ("0 1px 2px 0 rgb(…)", possibly comma-separated)
+ * cannot be spelled in that grammar, so `*` is the honest answer, not a
+ * shortcut. These slots therefore remain unguarded and a colour written into
+ * one still voids the `box-shadow` declaration that reads it. The audit script
+ * is the backstop for them.
+ */
+@property --btn-default-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-card {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-control {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-raised {
+  syntax: "*";
+  inherits: true;
+}
+
+/* ── Genuinely untypeable: bare HSL channel triplets ──────────────────────────
+ * These carry channels ("222 47% 11%"), not colours — they exist to be wrapped
+ * as `hsl(var(--brand-mark))` / `hsl(var(--brand-mark) / 0.08)`, which is what
+ * makes the alpha-suffix idiom possible. `<color>` would reject every one of
+ * them. There is also no typed spelling for the triplet: `@property` syntax has
+ * no space-separated component composition and no <number-percentage>, so
+ * "<number> <percentage> <percentage>" is not expressible. `*` is correct here.
+ * The type error these slots invite is the inverse one — writing a full colour
+ * (`#0033FE`) where channels are expected, which the audit script catches at
+ * the `hsl()` call site.
+ */
+@property --role-action {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --role-action-fg {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --brand-mark {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --brand-mark-foreground {
+  syntax: "*";
+  inherits: true;
+}
+
 /* Tailwind v4: brand-mark as first-class color (Logo / BrandMark / badge) */
 @theme inline {
   --color-brand-mark: hsl(var(--brand-mark));

package/skins/README.md

@@ -1,7 +1,7 @@
 # Design skins & Brand Packages
 
 **Goal:** Create Center users swap a **design language** by applying one **Brand Package**.
-This package is a *carrier* (roles + free elev/radii + zones), not a list of brand hacks.
+This package is a *carrier* (roles + free elev/radii), not a list of brand hacks.
 
 ## Two layers
 
@@ -130,11 +130,9 @@ const { iframeRef, apply: preview, writePreviewDocument } = useBrandIframePrevie
 // preview(brand)  or  writePreviewDocument(brand, "<button class='btn-brand-default'>CTA</button>")
 ```
 
-### Fonts + zones
+### Fonts
 
 - `typography.faces[]` → emitted as `@font-face` (swap URL for Create Center CDN/upload).
-- `zones.product` / `zones.marketing` → CSS vars + `[data-zone="…"]` / `.zone-…` consumers.
-- Marketing may use 224px display; product stays compact.
 
 ### design-sync
 

package/skins/gsap.css

@@ -1,7 +1,7 @@
 /**
  * Brand carrier skin: GSAP (gsap) v1.0.0
  * darkDefault=true dualMode=false button=gradient-stroke
- * fonts=2 zones=yes mode=global
+ * fonts=2 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
@@ -93,10 +93,10 @@ html[data-brand="gsap"] {
   --elevation-card: 0 0 #0000;
   --elevation-control: 0 0 #0000;
   --elevation-raised: 0 0 #0000;
-  --shadow-xs: 0 0 #0000;
-  --shadow-sm: 0 0 #0000;
-  --shadow-md: 0 0 #0000;
-  --shadow-lg: 0 0 #0000;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
   --btn-default-shadow: 0 0 #0000;
   --btn-default-bg: transparent;
   --btn-default-fg: hsl(var(--foreground));
@@ -114,6 +114,9 @@ html[data-brand="gsap"] {
   --control-height-sm: 1.75rem;
   --control-height-md: 2rem;
   --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
@@ -122,44 +125,29 @@ html[data-brand="gsap"] {
   --font-display: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 600;
 
-  /* Zone type scales */
-  --zone-product-caption-size: 14px;
-  --zone-product-caption-leading: 1.4;
-  --zone-product-caption-tracking: -0.14px;
-  --zone-product-caption-weight: 400;
-  --zone-product-body-sm-size: 16px;
-  --zone-product-body-sm-leading: 1.15;
-  --zone-product-body-sm-weight: 400;
-  --zone-product-body-size: 19px;
-  --zone-product-body-leading: 1.15;
-  --zone-product-body-weight: 400;
-  --zone-product-body-lg-size: 23px;
-  --zone-product-body-lg-leading: 1.38;
-  --zone-product-body-lg-tracking: -0.23px;
-  --zone-product-body-lg-weight: 400;
-  --zone-product-subheading-size: 34px;
-  --zone-product-subheading-leading: 1.2;
-  --zone-product-subheading-tracking: -0.34px;
-  --zone-product-subheading-weight: 400;
-  --zone-product-heading-size: 44px;
-  --zone-product-heading-leading: 1.2;
-  --zone-product-heading-tracking: -0.44px;
-  --zone-product-heading-weight: 600;
-  --zone-marketing-body-size: 19px;
-  --zone-marketing-body-leading: 1.15;
-  --zone-marketing-body-weight: 400;
-  --zone-marketing-heading-size: 66px;
-  --zone-marketing-heading-leading: 1.2;
-  --zone-marketing-heading-tracking: -0.66px;
-  --zone-marketing-heading-weight: 600;
-  --zone-marketing-heading-lg-size: 101px;
-  --zone-marketing-heading-lg-leading: 1;
-  --zone-marketing-heading-lg-tracking: -1.11px;
-  --zone-marketing-heading-lg-weight: 600;
-  --zone-marketing-display-size: 224px;
-  --zone-marketing-display-leading: 0.9;
-  --zone-marketing-display-tracking: -4.48px;
-  --zone-marketing-display-weight: 600;
+  /* Motion */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --motion-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 250ms;
+  --motion-duration-flow: 250ms;
+  --duration-reveal: 400ms;
+  --motion-duration-reveal: 400ms;
+  --duration-cinematic: 700ms;
+  --motion-duration-cinematic: 700ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.875rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.75rem;
+  --space-source-xl: 2.5rem;
+  --space-source-2xl: 3.5rem;
 
   /* Taxonomy / decorative (not product CTA) */
   --brand-category-gsap: #0ae448;
@@ -169,79 +157,3 @@ html[data-brand="gsap"] {
   --brand-category-ui: #00bae2;
   --brand-category-other: #abff84;
 }
-
-/* Zone: product — product never inherits marketing display */
-[data-zone="product"],
-.zone-product {
-  font-size: var(--zone-product-body-size, 19px);
-  line-height: var(--zone-product-body-leading, 1.15);
-  font-weight: var(--zone-product-body-weight, 400);
-  --text-caption: var(--zone-product-caption-size, inherit);
-  --leading-caption: var(--zone-product-caption-leading, inherit);
-  --tracking-caption: var(--zone-product-caption-tracking, inherit);
-  --text-body-sm: var(--zone-product-body-sm-size, inherit);
-  --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
-  --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
-  --text-body: var(--zone-product-body-size, inherit);
-  --leading-body: var(--zone-product-body-leading, inherit);
-  --tracking-body: var(--zone-product-body-tracking, inherit);
-  --text-body-lg: var(--zone-product-body-lg-size, inherit);
-  --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
-  --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
-  --text-subheading: var(--zone-product-subheading-size, inherit);
-  --leading-subheading: var(--zone-product-subheading-leading, inherit);
-  --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
-  --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
-  --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
-  --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
-  --text-heading: var(--zone-product-heading-size, inherit);
-  --leading-heading: var(--zone-product-heading-leading, inherit);
-  --tracking-heading: var(--zone-product-heading-tracking, inherit);
-  --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
-  --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
-  --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
-  --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
-  --leading-display: var(--zone-product-display-leading, inherit);
-  --tracking-display: var(--zone-product-display-tracking, inherit);
-}
-
-/* Zone: marketing — product never inherits marketing display */
-[data-zone="marketing"],
-.zone-marketing {
-  font-size: var(--zone-marketing-body-size, 19px);
-  line-height: var(--zone-marketing-body-leading, 1.15);
-  font-weight: var(--zone-marketing-body-weight, 400);
-  --text-caption: var(--zone-marketing-caption-size, inherit);
-  --leading-caption: var(--zone-marketing-caption-leading, inherit);
-  --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
-  --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
-  --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
-  --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
-  --text-body: var(--zone-marketing-body-size, inherit);
-  --leading-body: var(--zone-marketing-body-leading, inherit);
-  --tracking-body: var(--zone-marketing-body-tracking, inherit);
-  --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
-  --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
-  --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
-  --text-subheading: var(--zone-marketing-subheading-size, inherit);
-  --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
-  --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
-  --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
-  --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
-  --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
-  --text-heading: var(--zone-marketing-heading-size, inherit);
-  --leading-heading: var(--zone-marketing-heading-leading, inherit);
-  --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
-  --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
-  --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
-  --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
-  --text-display: var(--zone-marketing-display-size, inherit);
-  --leading-display: var(--zone-marketing-display-leading, inherit);
-  --tracking-display: var(--zone-marketing-display-tracking, inherit);
-}
-
-/* Product chrome must not use decorative gradients as action fills */
-[data-zone="product"] .btn-brand-default,
-.zone-product .btn-brand-default {
-  /* intentional no-op: documents contract; action uses --primary only */
-}