@nebutra/tokens 0.1.3 → 3.0.0

package/skins/raycast.css

@@ -1,19 +1,10 @@
 /**
  * Brand carrier skin: Raycast (raycast) v1.0.0
  * darkDefault=true dualMode=false button=solid
- * fonts=1 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Inter";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 :root,
 .dark,
 html[data-brand="raycast"] {
@@ -27,9 +18,9 @@ html[data-brand="raycast"] {
   --role-quiet: 220 5% 11%;
   --role-quiet-fg: 0 0% 100%;
   --role-muted: 220 8% 7%;
-  --role-muted-fg: 210 1% 42%;
+  --role-muted-fg: 210 1% 48%;
   --role-border: 210 2% 19%;
-  --role-input: 220 8% 7%;
+  --role-input: 210 2% 19%;
   --role-ring: 240 1% 61%;
   --role-brand: 0 100% 69%;
   --role-brand-fg: 210 1% 27%;
@@ -48,13 +39,13 @@ html[data-brand="raycast"] {
   --secondary: 220 5% 11%;
   --secondary-foreground: 0 0% 100%;
   --muted: 220 8% 7%;
-  --muted-foreground: 210 1% 42%;
+  --muted-foreground: 210 1% 48%;
   --accent: 0 100% 69%;
   --accent-foreground: 210 1% 27%;
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 210 2% 19%;
-  --input: 220 8% 7%;
+  --input: 210 2% 19%;
   --ring: 240 1% 61%;
   --success: 151 59% 59%;
   --success-foreground: 210 20% 2%;
@@ -68,17 +59,35 @@ html[data-brand="raycast"] {
   --sidebar-accent-foreground: 210 1% 27%;
   --sidebar-border: 210 2% 19%;
   --sidebar-ring: 240 1% 61%;
+  --brand-primary: hsl(0 100% 69%);
+  --brand-accent: hsl(0 0% 90%);
+  --brand-accent-foreground: hsl(210 1% 27%);
+  --brand-tertiary: hsl(0 0% 90%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(210 20% 2%);
+  --neutral-2: hsl(220 18% 3%);
+  --neutral-3: color-mix(in oklab, hsl(210 2% 19%) 20%, hsl(220 18% 3%));
+  --neutral-4: color-mix(in oklab, hsl(210 2% 19%) 40%, hsl(220 18% 3%));
+  --neutral-5: color-mix(in oklab, hsl(210 2% 19%) 60%, hsl(220 18% 3%));
+  --neutral-6: color-mix(in oklab, hsl(210 2% 19%) 80%, hsl(220 18% 3%));
+  --neutral-7: hsl(210 2% 19%);
+  --neutral-8: color-mix(in oklab, hsl(210 1% 48%) 25%, hsl(210 2% 19%));
+  --neutral-9: color-mix(in oklab, hsl(210 1% 48%) 50%, hsl(210 2% 19%));
+  --neutral-10: color-mix(in oklab, hsl(210 1% 48%) 75%, hsl(210 2% 19%));
+  --neutral-11: hsl(210 1% 48%);
+  --neutral-12: hsl(0 0% 100%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 8px;
   --radius-button: 8px;
   --radius-buttons: 8px;
-  --radius-md: 8px;
+  --radius-md: min(8px, 16px);
   --radius-card: 16px;
   --radius-lg: 16px;
   --radius-badge: 6px;
@@ -148,10 +157,19 @@ html[data-brand="raycast"] {
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
+  --font-sans:
+    var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
+    system-ui, -apple-system, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
+    system-ui, -apple-system, sans-serif;
+  --font-heading:
+    var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
+    system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
+    system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
   --font-weight-heading: 400;
 
   /* Motion */

package/skins/stripe.css

@@ -1,18 +1,10 @@
 /**
  * Brand carrier skin: Stripe (stripe) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=1 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "sohne-var";
-  src: url("/brand-assets/sohne-var.woff2") format("woff2");
-  font-weight: 300 400;
-  font-display: swap;
-}
-
 :root,
 html[data-brand="stripe"] {
   /* ── Color roles (carrier) ── */
@@ -27,7 +19,7 @@ html[data-brand="stripe"] {
   --role-muted: 216 56% 98%;
   --role-muted-fg: 217 17% 47%;
   --role-border: 210 44% 93%;
-  --role-input: 0 0% 100%;
+  --role-input: 210 44% 93%;
   --role-ring: 248 98% 61%;
   --role-brand: 211 78% 11%;
   --role-brand-fg: 0 0% 100%;
@@ -52,7 +44,7 @@ html[data-brand="stripe"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 210 44% 93%;
-  --input: 0 0% 100%;
+  --input: 210 44% 93%;
   --ring: 248 98% 61%;
   --info: 231 100% 73%;
   --info-foreground: 211 78% 11%;
@@ -64,17 +56,35 @@ html[data-brand="stripe"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 210 44% 93%;
   --sidebar-ring: 248 98% 61%;
+  --brand-primary: hsl(211 78% 11%);
+  --brand-accent: hsl(248 98% 61%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(248 98% 61%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 100%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(210 44% 93%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(210 44% 93%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(210 44% 93%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(210 44% 93%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(210 44% 93%);
+  --neutral-8: color-mix(in oklab, hsl(217 17% 47%) 25%, hsl(210 44% 93%));
+  --neutral-9: color-mix(in oklab, hsl(217 17% 47%) 50%, hsl(210 44% 93%));
+  --neutral-10: color-mix(in oklab, hsl(217 17% 47%) 75%, hsl(210 44% 93%));
+  --neutral-11: hsl(217 17% 47%);
+  --neutral-12: hsl(211 78% 11%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 4px;
   --radius-button: 4px;
   --radius-buttons: 4px;
-  --radius-md: 4px;
+  --radius-md: min(4px, 4px);
   --radius-card: 4px;
   --radius-lg: 4px;
   --radius-badge: 9999px;
@@ -104,9 +114,18 @@ html[data-brand="stripe"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "sohne-var", "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-reg-inter-tight), "sohne-var", "Inter Tight", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 300;
 
   /* Motion */

package/skins/vanta.css

@@ -1,33 +1,10 @@
 /**
  * Brand carrier skin: Vanta (vanta) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=3 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Inter Variable";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Reckless";
-  src: url("/brand-assets/reckless-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Reckless";
-  src: url("/brand-assets/reckless-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-display: swap;
-}
-
 :root,
 html[data-brand="vanta"] {
   /* ── Color roles (carrier) ── */
@@ -42,7 +19,7 @@ html[data-brand="vanta"] {
   --role-muted: 240 20% 93%;
   --role-muted-fg: 238 11% 48%;
   --role-border: 240 17% 11%;
-  --role-input: 0 0% 100%;
+  --role-input: 240 17% 11%;
   --role-ring: 268 95% 39%;
   --role-brand: 272 100% 14%;
   --role-brand-fg: 0 0% 100%;
@@ -67,7 +44,7 @@ html[data-brand="vanta"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 240 17% 11%;
-  --input: 0 0% 100%;
+  --input: 240 17% 11%;
   --ring: 268 95% 39%;
   --warning: 44 100% 53%;
   --warning-foreground: 240 17% 11%;
@@ -81,17 +58,35 @@ html[data-brand="vanta"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 240 17% 11%;
   --sidebar-ring: 268 95% 39%;
+  --brand-primary: hsl(272 100% 14%);
+  --brand-accent: hsl(268 95% 39%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(268 95% 39%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(220 23% 97%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(240 17% 11%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(240 17% 11%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(240 17% 11%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(240 17% 11%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(240 17% 11%);
+  --neutral-8: color-mix(in oklab, hsl(238 11% 48%) 25%, hsl(240 17% 11%));
+  --neutral-9: color-mix(in oklab, hsl(238 11% 48%) 50%, hsl(240 17% 11%));
+  --neutral-10: color-mix(in oklab, hsl(238 11% 48%) 75%, hsl(240 17% 11%));
+  --neutral-11: hsl(238 11% 48%);
+  --neutral-12: hsl(240 17% 11%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 999px;
   --radius-button: 999px;
   --radius-buttons: 999px;
-  --radius-md: 999px;
+  --radius-md: min(999px, 16px);
   --radius-card: 16px;
   --radius-lg: 16px;
   --radius-badge: 999px;
@@ -121,9 +116,18 @@ html[data-brand="vanta"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
-  --font-display: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
+  --font-sans:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
+    var(--font-misans, "MiSans"), "PingFang SC", ui-serif, Georgia, serif;
+  --font-display:
+    var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
+    var(--font-misans, "MiSans"), "PingFang SC", ui-serif, Georgia, serif;
   --font-weight-heading: 500;
 
   /* Motion */

package/skins/vercel.css

@@ -1,19 +1,10 @@
 /**
  * Brand carrier skin: Vercel (vercel) v1.0.0
  * darkDefault=false dualMode=true button=solid
- * fonts=1 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Geist Sans";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 :root,
 html[data-brand="vercel"] {
   /* ── Color roles (carrier) ── */
@@ -28,7 +19,7 @@ html[data-brand="vercel"] {
   --role-muted: 0 0% 92%;
   --role-muted-fg: 0 0% 40%;
   --role-border: 0 0% 92%;
-  --role-input: 0 0% 100%;
+  --role-input: 0 0% 92%;
   --role-ring: 0 0% 9%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -49,7 +40,7 @@ html[data-brand="vercel"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 0 0% 92%;
-  --input: 0 0% 100%;
+  --input: 0 0% 92%;
   --ring: 0 0% 9%;
   --success: 133 50% 32%;
   --success-foreground: 0 0% 100%;
@@ -63,17 +54,35 @@ html[data-brand="vercel"] {
   --sidebar-accent-foreground: 0 0% 30%;
   --sidebar-border: 0 0% 92%;
   --sidebar-ring: 0 0% 9%;
+  --brand-primary: hsl(0 0% 9%);
+  --brand-accent: hsl(0 0% 9%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(0 0% 9%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 98%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(0 0% 92%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(0 0% 92%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(0 0% 92%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(0 0% 92%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(0 0% 92%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 40%) 25%, hsl(0 0% 92%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 40%) 50%, hsl(0 0% 92%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 40%) 75%, hsl(0 0% 92%));
+  --neutral-11: hsl(0 0% 40%);
+  --neutral-12: hsl(0 0% 9%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 6px;
   --radius-button: 6px;
   --radius-buttons: 6px;
-  --radius-md: 6px;
+  --radius-md: min(6px, 6px);
   --radius-card: 6px;
   --radius-lg: 6px;
   --radius-badge: 6px;
@@ -113,10 +122,19 @@ html[data-brand="vercel"] {
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
+  --font-sans:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, Menlo, monospace;
   --font-weight-heading: 450;
 
   /* Motion */
@@ -160,7 +178,7 @@ html.dark[data-brand="vercel"] {
   --role-muted: 0 0% 12%;
   --role-muted-fg: 0 0% 63%;
   --role-border: 0 0% 16%;
-  --role-input: 0 0% 4%;
+  --role-input: 0 0% 16%;
   --role-ring: 0 0% 100%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -181,7 +199,7 @@ html.dark[data-brand="vercel"] {
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
   --border: 0 0% 16%;
-  --input: 0 0% 4%;
+  --input: 0 0% 16%;
   --ring: 0 0% 100%;
   --success: 133 49% 40%;
   --success-foreground: 0 0% 100%;
@@ -195,8 +213,26 @@ html.dark[data-brand="vercel"] {
   --sidebar-accent-foreground: 0 0% 93%;
   --sidebar-border: 0 0% 16%;
   --sidebar-ring: 0 0% 100%;
+  --brand-primary: hsl(0 0% 100%);
+  --brand-accent: hsl(0 0% 100%);
+  --brand-accent-foreground: hsl(0 0% 0%);
+  --brand-tertiary: hsl(0 0% 100%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 0%);
+  --neutral-2: hsl(0 0% 4%);
+  --neutral-3: color-mix(in oklab, hsl(0 0% 16%) 20%, hsl(0 0% 4%));
+  --neutral-4: color-mix(in oklab, hsl(0 0% 16%) 40%, hsl(0 0% 4%));
+  --neutral-5: color-mix(in oklab, hsl(0 0% 16%) 60%, hsl(0 0% 4%));
+  --neutral-6: color-mix(in oklab, hsl(0 0% 16%) 80%, hsl(0 0% 4%));
+  --neutral-7: hsl(0 0% 16%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 63%) 25%, hsl(0 0% 16%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 63%) 50%, hsl(0 0% 16%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 63%) 75%, hsl(0 0% 16%));
+  --neutral-11: hsl(0 0% 63%);
+  --neutral-12: hsl(0 0% 93%);
 }