@nsaa/tokens 0.0.0-stage → 0.1.0-alpha.0

package/src/shadcn.json

@@ -0,0 +1,38 @@
+{
+  "$description": "shadcn/ui base colour 'neutral' (cssVarsV4) and radius, copied 1:1 from ui.shadcn.com/r/colors/neutral.json on 2026-10-28 (MIT). Decision #84: every component mimics shadcn base-nova 1:1 until the Nsaa feel layer is added. Emitted as plain shadcn variables (--background, --primary, ...) plus --nsaa-shadcn-* copies.",
+  "style": "base-nova",
+  "$changes": "Light destructive L 0.577 -> 0.565 (#96): shadcn's text-destructive/90 on white is 4.496:1; #E30002 gives 4.67:1, white text on it 4.92:1. Then 0.565 -> 0.52 (#120, browser axe): text-destructive on bg-destructive/10 (destructive Button and Badge) was 4.12:1; #D20000 gives 4.68:1, white on it 5.6:1. Light muted-foreground L 0.556 -> 0.54 (#105): shadcn's 4.34:1 on muted becomes 4.64:1 (5.06:1 on white). Everything else 1:1.",
+  "radius": "0.625rem",
+  "light": {
+    "background": "oklch(1 0 0)", "foreground": "oklch(0.145 0 0)",
+    "card": "oklch(1 0 0)", "card-foreground": "oklch(0.145 0 0)",
+    "popover": "oklch(1 0 0)", "popover-foreground": "oklch(0.145 0 0)",
+    "primary": "oklch(0.205 0 0)", "primary-foreground": "oklch(0.985 0 0)",
+    "secondary": "oklch(0.97 0 0)", "secondary-foreground": "oklch(0.205 0 0)",
+    "muted": "oklch(0.97 0 0)", "muted-foreground": "oklch(0.54 0 0)",
+    "accent": "oklch(0.97 0 0)", "accent-foreground": "oklch(0.205 0 0)",
+    "destructive": "oklch(0.52 0.245 27.325)",
+    "border": "oklch(0.922 0 0)", "input": "oklch(0.922 0 0)", "ring": "oklch(0.708 0 0)",
+    "chart-1": "oklch(0.87 0 0)", "chart-2": "oklch(0.556 0 0)", "chart-3": "oklch(0.439 0 0)", "chart-4": "oklch(0.371 0 0)", "chart-5": "oklch(0.269 0 0)",
+    "sidebar": "oklch(0.985 0 0)", "sidebar-foreground": "oklch(0.145 0 0)",
+    "sidebar-primary": "oklch(0.205 0 0)", "sidebar-primary-foreground": "oklch(0.985 0 0)",
+    "sidebar-accent": "oklch(0.97 0 0)", "sidebar-accent-foreground": "oklch(0.205 0 0)",
+    "sidebar-border": "oklch(0.922 0 0)", "sidebar-ring": "oklch(0.708 0 0)"
+  },
+  "dark": {
+    "background": "oklch(0.145 0 0)", "foreground": "oklch(0.985 0 0)",
+    "card": "oklch(0.205 0 0)", "card-foreground": "oklch(0.985 0 0)",
+    "popover": "oklch(0.205 0 0)", "popover-foreground": "oklch(0.985 0 0)",
+    "primary": "oklch(0.922 0 0)", "primary-foreground": "oklch(0.205 0 0)",
+    "secondary": "oklch(0.269 0 0)", "secondary-foreground": "oklch(0.985 0 0)",
+    "muted": "oklch(0.269 0 0)", "muted-foreground": "oklch(0.708 0 0)",
+    "accent": "oklch(0.269 0 0)", "accent-foreground": "oklch(0.985 0 0)",
+    "destructive": "oklch(0.704 0.191 22.216)",
+    "border": "oklch(1 0 0 / 10%)", "input": "oklch(1 0 0 / 15%)", "ring": "oklch(0.556 0 0)",
+    "chart-1": "oklch(0.87 0 0)", "chart-2": "oklch(0.556 0 0)", "chart-3": "oklch(0.439 0 0)", "chart-4": "oklch(0.371 0 0)", "chart-5": "oklch(0.269 0 0)",
+    "sidebar": "oklch(0.205 0 0)", "sidebar-foreground": "oklch(0.985 0 0)",
+    "sidebar-primary": "oklch(0.488 0.243 264.376)", "sidebar-primary-foreground": "oklch(0.985 0 0)",
+    "sidebar-accent": "oklch(0.269 0 0)", "sidebar-accent-foreground": "oklch(0.985 0 0)",
+    "sidebar-border": "oklch(1 0 0 / 10%)", "sidebar-ring": "oklch(0.556 0 0)"
+  }
+}

package/src/theme.json

@@ -0,0 +1,70 @@
+{
+  "$description": "The three shape/voice axes. Each axis is set on any element: data-theme, data-corners, data-surface. Mode (light/dark) is .dark or data-mode.",
+  "radiusScale": { "none": 0, "xs": 2, "sm": 6, "md": 8, "lg": 10, "xl": 14, "2xl": 18, "3xl": 22, "4xl": 26, "full": 9999 },
+  "$radiusScale": "shadcn scale at --radius 10px (#84/#85): sm x0.6, md x0.8, lg x1, xl x1.4, 2xl x1.8, 3xl x2.2, 4xl x2.6.",
+  "theme": {
+    "default": {
+      "$note": "shadcn/ui base shapes (#81): the 0.625rem radius scale, sans headings.",
+      "font-heading": "{font.sans}", "font-body": "{font.sans}", "font-code": "{font.mono}",
+      "heading-weight": 500, "heading-tracking": "-0.02em",
+      "radius-button-xs": 6, "radius-button-sm": 8, "radius-button-md": 8, "radius-button-lg": 8, "radius-button-xl": 10,
+      "radius-control": 8, "radius-control-multiline": 8, "radius-badge": 6, "radius-surface": 14, "radius-popover": 8, "radius-dialog": 10
+    },
+    "editorial": {
+      "$note": "Newsreader headings, default (shadcn) shapes.",
+      "font-heading": "{font.serif}", "font-body": "{font.sans}", "font-code": "{font.mono}",
+      "heading-weight": 500, "heading-tracking": "-0.01em",
+      "radius-button-xs": 6, "radius-button-sm": 8, "radius-button-md": 8, "radius-button-lg": 8, "radius-button-xl": 10,
+      "radius-control": 8, "radius-control-multiline": 8, "radius-badge": 6, "radius-surface": 14, "radius-popover": 8, "radius-dialog": 10
+    },
+    "soft": {
+      "$note": "A little rounder than Default everywhere (#78).",
+      "font-heading": "{font.sans}", "font-body": "{font.sans}", "font-code": "{font.mono}",
+      "heading-weight": 500, "heading-tracking": "-0.02em",
+      "radius-button-xs": 8, "radius-button-sm": 10, "radius-button-md": 10, "radius-button-lg": 12, "radius-button-xl": 14,
+      "radius-control": 12, "radius-control-multiline": 12, "radius-badge": 8, "radius-surface": 16, "radius-popover": 16, "radius-dialog": 24
+    },
+    "pill": {
+      "$note": "Fully rounded buttons, badges and controls (inputs, selects); rounder surfaces (#78).",
+      "font-heading": "{font.sans}", "font-body": "{font.sans}", "font-code": "{font.mono}",
+      "heading-weight": 500, "heading-tracking": "-0.02em",
+      "radius-button-xs": 9999, "radius-button-sm": 9999, "radius-button-md": 9999, "radius-button-lg": 9999, "radius-button-xl": 9999,
+      "radius-control": 9999, "radius-control-multiline": 18, "radius-badge": 9999, "radius-surface": 24, "radius-popover": 20, "radius-dialog": 28
+    },
+    "sharp": {
+      "$note": "Square everywhere (#78); radius-full items (avatars, switches, radios) stay round.",
+      "font-heading": "{font.sans}", "font-body": "{font.sans}", "font-code": "{font.mono}",
+      "heading-weight": 500, "heading-tracking": "-0.025em",
+      "radius-button-xs": 0, "radius-button-sm": 0, "radius-button-md": 0, "radius-button-lg": 0, "radius-button-xl": 0,
+      "radius-control": 0, "radius-control-multiline": 0, "radius-badge": 0, "radius-surface": 0, "radius-popover": 0, "radius-dialog": 0
+    }
+  },
+  "corners": {
+    "round": { "radius-multiplier": 1, "corner-shape": "round", "figma-smoothing": 0 },
+    "squircle": {
+      "$note": "Native corner-shape in Chromium 139+; other browsers fall back to round. Figma: 60% smoothing set by script (not bindable to variables).",
+      "radius-multiplier": 1.25, "corner-shape": "superellipse(1.8)", "figma-smoothing": 0.6
+    }
+  },
+  "surface": {
+    "flat": {
+      "light": { "bg": "{@container}", "border": "none", "shadow": "{shadow.default}", "blur": "none", "rim": "none" },
+      "dark":  { "bg": "{@container}", "border": "none", "shadow": "{shadow.default}", "blur": "none", "rim": "none" }
+    },
+    "halo": {
+      "$note": "Frosted fill plus a gradient rim; rim colours are tokens so brands can change them.",
+      "light": { "bg": "{@container}", "border": "1px solid transparent", "shadow": "0 8px 24px -8px {@surface-halo-glow}", "blur": "none", "rim": "linear-gradient(135deg, {blue-a7}, {gray-a4} 50%, {green-a6})" },
+      "dark":  { "bg": "{@container}", "border": "1px solid transparent", "shadow": "0 8px 24px -8px {@surface-halo-glow}", "blur": "none", "rim": "linear-gradient(135deg, {blue-a8}, {gray-a4} 50%, {green-a7})" }
+    },
+    "glass": {
+      "$note": "Falls back to Flat under prefers-reduced-transparency. Text on glass uses the normal foregrounds; keep content behind it low-contrast.",
+      "light": { "bg": "{@surface-glass-fill}", "border": "1px solid {@surface-glass-border}", "shadow": "{shadow.large}", "blur": "blur(20px) saturate(180%)", "rim": "none" },
+      "dark":  { "bg": "{@surface-glass-fill}", "border": "1px solid {@surface-glass-border}", "shadow": "{shadow.large}", "blur": "blur(20px) saturate(160%)", "rim": "none" }
+    },
+    "neu": {
+      "$note": "Soft extruded surfaces; a hairline border keeps edges visible for low-vision users.",
+      "light": { "bg": "{@surface-neu-fill}", "border": "1px solid {@surface-neu-border}", "shadow": "6px 6px 14px {@surface-neu-shadow-dark}, -6px -6px 14px {@surface-neu-shadow-light}", "blur": "none", "rim": "none" },
+      "dark":  { "bg": "{@surface-neu-fill}", "border": "1px solid {@surface-neu-border}", "shadow": "6px 6px 14px {@surface-neu-shadow-dark}, -4px -4px 12px {@surface-neu-shadow-light}", "blur": "none", "rim": "none" }
+    }
+  }
+}

package/src/type.json

@@ -0,0 +1,208 @@
+{
+  "$description": "Typography. Families are swappable roles; headings switch family by theme (see theme.json).",
+  "family": {
+    "sans": "\"Geist\", ui-sans-serif, system-ui, sans-serif",
+    "serif": "\"Newsreader\", ui-serif, Georgia, serif",
+    "mono": "\"Geist Mono\", ui-monospace, \"SFMono-Regular\", monospace",
+    "display-mono": "\"Geist Mono\", ui-monospace, monospace"
+  },
+  "weight": {
+    "normal": 400,
+    "semimedium": 450,
+    "medium": 500,
+    "semimedium-plus": 550,
+    "semibold": 600,
+    "bold": 700
+  },
+  "style": {
+    "heading-1": {
+      "role": "heading",
+      "size": 56,
+      "lineHeight": 60
+    },
+    "heading-2": {
+      "role": "heading",
+      "size": 44,
+      "lineHeight": 52
+    },
+    "heading-3": {
+      "role": "heading",
+      "size": 36,
+      "lineHeight": 44
+    },
+    "heading-4": {
+      "role": "heading",
+      "size": 28,
+      "lineHeight": 36
+    },
+    "heading-5": {
+      "role": "heading",
+      "size": 24,
+      "lineHeight": 32
+    },
+    "heading-6": {
+      "role": "heading",
+      "size": 20,
+      "lineHeight": 28
+    },
+    "body-lg": {
+      "role": "body",
+      "size": 18,
+      "lineHeight": 28,
+      "tracking": "0em"
+    },
+    "body-base": {
+      "role": "body",
+      "size": 16,
+      "lineHeight": 24,
+      "tracking": "0em"
+    },
+    "body-sm": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 20,
+      "tracking": "0em"
+    },
+    "body-sm-relaxed": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 21,
+      "tracking": "0em",
+      "$note": "shadcn FieldDescription: text-sm leading-normal (#85)."
+    },
+    "label-lg": {
+      "role": "body",
+      "size": 16,
+      "lineHeight": 24,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "UI text: buttons, tabs, menu items, form labels."
+    },
+    "label-base": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 20,
+      "weight": 500,
+      "tracking": "0em"
+    },
+    "label-snug": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 19.25,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "shadcn FieldLabel: text-sm font-medium leading-snug (#85)."
+    },
+    "label-tight": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 14,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "shadcn Label: text-sm font-medium leading-none (#85)."
+    },
+    "label-lg-tight": {
+      "role": "body",
+      "size": 16,
+      "lineHeight": 16,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "shadcn DialogTitle (and Sheet, Alert Dialog): text-base font-medium leading-none (#84)."
+    },
+    "label-lg-snug": {
+      "role": "body",
+      "size": 16,
+      "lineHeight": 22,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "shadcn CardTitle: text-base leading-snug font-medium (#99)."
+    },
+    "label-compact": {
+      "role": "body",
+      "size": 12.8,
+      "lineHeight": 18.29,
+      "weight": 500,
+      "tracking": "0em",
+      "$note": "shadcn Button size sm: text-[0.8rem] on text-sm line height (#85)."
+    },
+    "label-sm": {
+      "role": "body",
+      "size": 12,
+      "lineHeight": 16,
+      "weight": 500,
+      "tracking": "0em"
+    },
+    "label-heading": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 20,
+      "weight": 500,
+      "tracking": "-0.025em",
+      "$note": "shadcn EmptyTitle: text-sm font-medium tracking-tight (#122)."
+    },
+    "body-sm-loose": {
+      "role": "body",
+      "size": 14,
+      "lineHeight": 22.75,
+      "tracking": "0em",
+      "$note": "shadcn EmptyDescription: text-sm/relaxed, leading 1.625 (#122). body-sm-relaxed is leading-normal (1.5)."
+    },
+    "shortcut": {
+      "role": "body",
+      "size": 12,
+      "lineHeight": 16,
+      "weight": 400,
+      "tracking": "0.1em",
+      "$note": "shadcn menu and command shortcuts: text-xs tracking-widest (#105)."
+    },
+    "overline-base": {
+      "role": "body",
+      "size": 12,
+      "lineHeight": 16,
+      "weight": 500,
+      "tracking": "0.06em",
+      "transform": "uppercase",
+      "$note": "Eyebrows and section labels."
+    },
+    "overline-sm": {
+      "role": "body",
+      "size": 11,
+      "lineHeight": 16,
+      "weight": 500,
+      "tracking": "0.08em",
+      "transform": "uppercase"
+    },
+    "caption-lg": {
+      "role": "body",
+      "size": 12,
+      "lineHeight": 16,
+      "tracking": "0em"
+    },
+    "caption-base": {
+      "role": "body",
+      "size": 11,
+      "lineHeight": 16,
+      "tracking": "0.005em"
+    },
+    "caption-sm": {
+      "role": "body",
+      "size": 10,
+      "lineHeight": 14,
+      "tracking": "0.01em",
+      "$note": "Labels and metadata only, never body copy."
+    },
+    "code-sm": {
+      "role": "code",
+      "size": 14,
+      "lineHeight": 20,
+      "tracking": "0em"
+    },
+    "code-xs": {
+      "role": "code",
+      "size": 12,
+      "lineHeight": 16,
+      "tracking": "0em"
+    }
+  },
+  "$changes": "From Interfere: Inter/Heldane/Berkeley Mono replaced by Geist/Newsreader/Geist Mono; headings Medium (500) in every theme; heading line heights fixed (h1 56/60 instead of 56/56, h2 44/52 instead of 44/56, h6 20/28); caption-xs (8px) dropped as unreadable."
+}