@nebutra/tokens 0.1.1 → 0.1.3

package/skins/stripe.css

@@ -0,0 +1,146 @@
+/**
+ * Brand carrier skin: Stripe (stripe) v1.0.0
+ * darkDefault=false dualMode=false button=solid
+ * fonts=1 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) ── */
+  --role-canvas: 0 0% 100%;
+  --role-canvas-fg: 211 78% 11%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 211 78% 11%;
+  --role-action: 248 98% 61%;
+  --role-action-fg: 0 0% 100%;
+  --role-quiet: 237 100% 95%;
+  --role-quiet-fg: 248 98% 61%;
+  --role-muted: 216 56% 98%;
+  --role-muted-fg: 217 17% 47%;
+  --role-border: 210 44% 93%;
+  --role-input: 0 0% 100%;
+  --role-ring: 248 98% 61%;
+  --role-brand: 211 78% 11%;
+  --role-brand-fg: 0 0% 100%;
+  --brand-mark: 211 78% 11%;
+  --brand-mark-foreground: 0 0% 100%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 100%;
+  --foreground: 211 78% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 211 78% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 211 78% 11%;
+  --primary: 248 98% 61%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 237 100% 95%;
+  --secondary-foreground: 248 98% 61%;
+  --muted: 216 56% 98%;
+  --muted-foreground: 217 17% 47%;
+  --accent: 211 78% 11%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 44% 93%;
+  --input: 0 0% 100%;
+  --ring: 248 98% 61%;
+  --info: 231 100% 73%;
+  --info-foreground: 211 78% 11%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 211 78% 11%;
+  --sidebar-primary: 248 98% 61%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 211 78% 11%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 210 44% 93%;
+  --sidebar-ring: 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));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 4px;
+  --radius-button: 4px;
+  --radius-buttons: 4px;
+  --radius-md: 4px;
+  --radius-card: 4px;
+  --radius-lg: 4px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 4px;
+  --input-radius: 4px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 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: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --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-weight-heading: 300;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --duration-micro: 100ms;
+  --motion-duration-micro: 100ms;
+  --duration-flow: 180ms;
+  --motion-duration-flow: 180ms;
+  --duration-reveal: 260ms;
+  --motion-duration-reveal: 260ms;
+  --duration-cinematic: 400ms;
+  --motion-duration-cinematic: 400ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.75rem;
+  --space-source-md: 1.125rem;
+  --space-source-lg: 1.75rem;
+  --space-source-xl: 2.25rem;
+  --space-source-2xl: 3.25rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-brand: #061b31;
+  --brand-category-action: #533afd;
+  --brand-category-link: #533afd;
+  --brand-category-hover: #7389ff;
+  --brand-category-ghostborder: #b9b9f9;
+  --brand-category-wash: #e8e9ff;
+  --brand-category-deep: #182659;
+  --brand-category-smoke: #839bc8;
+  --brand-category-steel: #50617a;
+  --brand-decorative-section-band: #f8fafd;
+  --brand-decorative-frost: #e5edf5;
+}

package/skins/vanta.css

@@ -0,0 +1,160 @@
+/**
+ * Brand carrier skin: Vanta (vanta) v1.0.0
+ * darkDefault=false dualMode=false button=solid
+ * fonts=3 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) ── */
+  --role-canvas: 220 23% 97%;
+  --role-canvas-fg: 240 17% 11%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 240 17% 11%;
+  --role-action: 268 95% 39%;
+  --role-action-fg: 0 0% 100%;
+  --role-quiet: 250 100% 92%;
+  --role-quiet-fg: 272 100% 14%;
+  --role-muted: 240 20% 93%;
+  --role-muted-fg: 238 11% 48%;
+  --role-border: 240 17% 11%;
+  --role-input: 0 0% 100%;
+  --role-ring: 268 95% 39%;
+  --role-brand: 272 100% 14%;
+  --role-brand-fg: 0 0% 100%;
+  --brand-mark: 272 100% 14%;
+  --brand-mark-foreground: 0 0% 100%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 220 23% 97%;
+  --foreground: 240 17% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 17% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 17% 11%;
+  --primary: 268 95% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 250 100% 92%;
+  --secondary-foreground: 272 100% 14%;
+  --muted: 240 20% 93%;
+  --muted-foreground: 238 11% 48%;
+  --accent: 272 100% 14%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 240 17% 11%;
+  --input: 0 0% 100%;
+  --ring: 268 95% 39%;
+  --warning: 44 100% 53%;
+  --warning-foreground: 240 17% 11%;
+  --info: 270 63% 56%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 240 17% 11%;
+  --sidebar-primary: 268 95% 39%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 272 100% 14%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 240 17% 11%;
+  --sidebar-ring: 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));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 999px;
+  --radius-button: 999px;
+  --radius-buttons: 999px;
+  --radius-md: 999px;
+  --radius-card: 16px;
+  --radius-lg: 16px;
+  --radius-badge: 999px;
+  --badge-default-radius: 999px;
+  --radius-inputs: 999px;
+  --input-radius: 999px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 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: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --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-weight-heading: 500;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
+  --motion-ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 240ms;
+  --motion-duration-flow: 240ms;
+  --duration-reveal: 380ms;
+  --motion-duration-reveal: 380ms;
+  --duration-cinematic: 620ms;
+  --motion-duration-cinematic: 620ms;
+
+  /* Spacing */
+  --space-source-xs: 0.75rem;
+  --space-source-sm: 1.125rem;
+  --space-source-md: 1.75rem;
+  --space-source-lg: 2.5rem;
+  --space-source-xl: 3.5rem;
+  --space-source-2xl: 5rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-brand: #260048;
+  --brand-category-action: #5e05c4;
+  --brand-category-link: #8f47d5;
+  --brand-category-herowash: #ddd6ff;
+  --brand-category-warning: #ffbe0f;
+  --brand-category-steel: #9e9fb7;
+  --brand-category-ash: #dfdfe9;
+  --brand-decorative-hero-wash: #ddd6ff;
+}

package/skins/vercel.css

@@ -0,0 +1,202 @@
+/**
+ * Brand carrier skin: Vercel (vercel) v1.0.0
+ * darkDefault=false dualMode=true button=solid
+ * fonts=1 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) ── */
+  --role-canvas: 0 0% 98%;
+  --role-canvas-fg: 0 0% 9%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 0 0% 9%;
+  --role-action: 0 0% 9%;
+  --role-action-fg: 0 0% 100%;
+  --role-quiet: 0 0% 92%;
+  --role-quiet-fg: 0 0% 30%;
+  --role-muted: 0 0% 92%;
+  --role-muted-fg: 0 0% 40%;
+  --role-border: 0 0% 92%;
+  --role-input: 0 0% 100%;
+  --role-ring: 0 0% 9%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 98%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 92%;
+  --secondary-foreground: 0 0% 30%;
+  --muted: 0 0% 92%;
+  --muted-foreground: 0 0% 40%;
+  --accent: 0 0% 92%;
+  --accent-foreground: 0 0% 30%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 92%;
+  --input: 0 0% 100%;
+  --ring: 0 0% 9%;
+  --success: 133 50% 32%;
+  --success-foreground: 0 0% 100%;
+  --info: 0 0% 30%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 9%;
+  --sidebar-primary: 0 0% 9%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 92%;
+  --sidebar-accent-foreground: 0 0% 30%;
+  --sidebar-border: 0 0% 92%;
+  --sidebar-ring: 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));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 6px;
+  --radius-button: 6px;
+  --radius-buttons: 6px;
+  --radius-md: 6px;
+  --radius-card: 6px;
+  --radius-lg: 6px;
+  --radius-badge: 6px;
+  --badge-default-radius: 6px;
+  --radius-inputs: 6px;
+  --input-radius: 6px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --elevation-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-bg: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --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 */
+  --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-weight-heading: 450;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 100ms;
+  --motion-duration-micro: 100ms;
+  --duration-flow: 150ms;
+  --motion-duration-flow: 150ms;
+  --duration-reveal: 200ms;
+  --motion-duration-reveal: 200ms;
+  --duration-cinematic: 300ms;
+  --motion-duration-cinematic: 300ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.75rem;
+  --space-source-md: 1rem;
+  --space-source-lg: 1.5rem;
+  --space-source-xl: 2rem;
+  --space-source-2xl: 3rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-carbon: #000000;
+  --brand-category-terminal: #297a3a;
+}
+
+.dark,
+html.dark[data-brand="vercel"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 0%;
+  --role-canvas-fg: 0 0% 93%;
+  --role-surface: 0 0% 4%;
+  --role-surface-fg: 0 0% 93%;
+  --role-action: 0 0% 100%;
+  --role-action-fg: 0 0% 0%;
+  --role-quiet: 0 0% 12%;
+  --role-quiet-fg: 0 0% 93%;
+  --role-muted: 0 0% 12%;
+  --role-muted-fg: 0 0% 63%;
+  --role-border: 0 0% 16%;
+  --role-input: 0 0% 4%;
+  --role-ring: 0 0% 100%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 0%;
+  --foreground: 0 0% 93%;
+  --card: 0 0% 4%;
+  --card-foreground: 0 0% 93%;
+  --popover: 0 0% 4%;
+  --popover-foreground: 0 0% 93%;
+  --primary: 0 0% 100%;
+  --primary-foreground: 0 0% 0%;
+  --secondary: 0 0% 12%;
+  --secondary-foreground: 0 0% 93%;
+  --muted: 0 0% 12%;
+  --muted-foreground: 0 0% 63%;
+  --accent: 0 0% 12%;
+  --accent-foreground: 0 0% 93%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 16%;
+  --input: 0 0% 4%;
+  --ring: 0 0% 100%;
+  --success: 133 49% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 0 0% 70%;
+  --info-foreground: 0 0% 0%;
+  --sidebar: 0 0% 4%;
+  --sidebar-foreground: 0 0% 93%;
+  --sidebar-primary: 0 0% 100%;
+  --sidebar-primary-foreground: 0 0% 0%;
+  --sidebar-accent: 0 0% 12%;
+  --sidebar-accent-foreground: 0 0% 93%;
+  --sidebar-border: 0 0% 16%;
+  --sidebar-ring: 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));
+}