@hraness/design-kit 0.31.1

package/src/palette-themes.ts

@@ -0,0 +1,23 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ConcreteDesignTheme } from "./appearance.js";
+import { paletteColors, type DesignPalette } from "./palettes.js";
+import {
+  catppuccinDark, catppuccinLight, gruvboxDark, gruvboxLight,
+  rosePineDark, rosePineLight, tokyoNightDark, tokyoNightLight, paperDark, paperLight,
+} from "./palette-tokens.stylex.js";
+
+const classes = {
+  paper: { light: stylex.props(paperLight).className, dark: stylex.props(paperDark).className },
+  catppuccin: { light: stylex.props(catppuccinLight).className, dark: stylex.props(catppuccinDark).className },
+  gruvbox: { light: stylex.props(gruvboxLight).className, dark: stylex.props(gruvboxDark).className },
+  "rose-pine": { light: stylex.props(rosePineLight).className, dark: stylex.props(rosePineDark).className },
+  "tokyo-night": { light: stylex.props(tokyoNightLight).className, dark: stylex.props(tokyoNightDark).className },
+} as const;
+
+/** Compiled classes only: this helper never injects CSS or writes browser state. */
+export function getDesignPaletteTheme(palette: DesignPalette, mode: ConcreteDesignTheme): Readonly<{ className: string; background: string }> {
+  return {
+    className: `hraness-palette ${classes[palette][mode]}`,
+    background: paletteColors[palette][mode].background,
+  };
+}

package/src/palette-tokens.stylex.ts

@@ -0,0 +1,519 @@
+// Generated by scripts/generate-palettes.ts from src/palettes.ts. Do not edit.
+import * as stylex from "@stylexjs/stylex";
+
+export const paletteTokens = stylex.defineVars({
+  "--hraness-palette-background": "#1e1e2e",
+  "--hraness-palette-foreground": "#dbe1f7",
+  "--hraness-palette-muted": "#b2b8cf",
+  "--hraness-palette-faint": "#b2b8cf",
+  "--hraness-palette-grid": "#313244",
+  "--hraness-palette-line": "#45475a",
+  "--hraness-palette-control-border": "#9296ab",
+  "--hraness-palette-surface": "#181825",
+  "--hraness-palette-surface-raised": "#313244",
+  "--hraness-palette-surface-hover": "#45475a",
+  "--hraness-palette-card": "#181825",
+  "--hraness-palette-card-foreground": "#dbe1f7",
+  "--hraness-palette-popover": "#313244",
+  "--hraness-palette-popover-foreground": "#dbe1f7",
+  "--hraness-palette-primary": "#92bafa",
+  "--hraness-palette-primary-foreground": "#1e1e2e",
+  "--hraness-palette-primary-soft": "#2b3046",
+  "--hraness-palette-secondary": "#313244",
+  "--hraness-palette-secondary-foreground": "#dbe1f7",
+  "--hraness-palette-accent": "#2b3046",
+  "--hraness-palette-accent-foreground": "#dbe1f7",
+  "--hraness-palette-focus": "#92bafa",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#313244",
+  "--hraness-palette-disabled-foreground": "#b2b8cf",
+  "--hraness-palette-inverse": "#dbe1f7",
+  "--hraness-palette-inverse-foreground": "#1e1e2e",
+  "--hraness-palette-danger": "#f5a0b8",
+  "--hraness-palette-danger-foreground": "#1e1e2e",
+  "--hraness-palette-danger-soft": "#382b3d",
+  "--hraness-palette-warning": "#f9e2af",
+  "--hraness-palette-warning-foreground": "#1e1e2e",
+  "--hraness-palette-warning-soft": "#38363d",
+  "--hraness-palette-success": "#a6e3a1",
+  "--hraness-palette-success-foreground": "#1e1e2e",
+  "--hraness-palette-success-soft": "#2e363c",
+  "--hraness-palette-info": "#89dceb",
+  "--hraness-palette-info-foreground": "#1e1e2e",
+  "--hraness-palette-info-soft": "#2b3545",
+  "--hraness-palette-chart1": "#f5c2e7",
+  "--hraness-palette-chart2": "#a6e3a1",
+  "--hraness-palette-chart3": "#89dceb",
+  "--hraness-palette-chart4": "#f9e2af",
+  "--hraness-palette-chart5": "#cda9f7",
+});
+
+export const catppuccinLight = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#eff1f5",
+  "--hraness-palette-foreground": "#3a3c50",
+  "--hraness-palette-muted": "#545768",
+  "--hraness-palette-faint": "#545768",
+  "--hraness-palette-grid": "#dce0e8",
+  "--hraness-palette-line": "#ccd0da",
+  "--hraness-palette-control-border": "#6e7183",
+  "--hraness-palette-surface": "#e6e9ef",
+  "--hraness-palette-surface-raised": "#dce0e8",
+  "--hraness-palette-surface-hover": "#ccd0da",
+  "--hraness-palette-card": "#e6e9ef",
+  "--hraness-palette-card-foreground": "#3a3c50",
+  "--hraness-palette-popover": "#dce0e8",
+  "--hraness-palette-popover-foreground": "#3a3c50",
+  "--hraness-palette-primary": "#1750bf",
+  "--hraness-palette-primary-foreground": "#eff1f5",
+  "--hraness-palette-primary-soft": "#d6e0f5",
+  "--hraness-palette-secondary": "#dce0e8",
+  "--hraness-palette-secondary-foreground": "#3a3c50",
+  "--hraness-palette-accent": "#d6e0f5",
+  "--hraness-palette-accent-foreground": "#3a3c50",
+  "--hraness-palette-focus": "#1750bf",
+  "--hraness-palette-scrim": "#00000070",
+  "--hraness-palette-disabled": "#dce0e8",
+  "--hraness-palette-disabled-foreground": "#545768",
+  "--hraness-palette-inverse": "#3a3c50",
+  "--hraness-palette-inverse-foreground": "#eff1f5",
+  "--hraness-palette-danger": "#b00d30",
+  "--hraness-palette-danger-foreground": "#eff1f5",
+  "--hraness-palette-danger-soft": "#ecd6de",
+  "--hraness-palette-warning": "#7b4e10",
+  "--hraness-palette-warning-foreground": "#eff1f5",
+  "--hraness-palette-warning-soft": "#ede5db",
+  "--hraness-palette-success": "#28631b",
+  "--hraness-palette-success-foreground": "#eff1f5",
+  "--hraness-palette-success-soft": "#dae7dd",
+  "--hraness-palette-info": "#0f6065",
+  "--hraness-palette-info-foreground": "#eff1f5",
+  "--hraness-palette-info-soft": "#d5e6ea",
+  "--hraness-palette-chart1": "#814170",
+  "--hraness-palette-chart2": "#28631b",
+  "--hraness-palette-chart3": "#0f6065",
+  "--hraness-palette-chart4": "#7b4e10",
+  "--hraness-palette-chart5": "#712fc6",
+});
+
+export const catppuccinDark = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#1e1e2e",
+  "--hraness-palette-foreground": "#dbe1f7",
+  "--hraness-palette-muted": "#b2b8cf",
+  "--hraness-palette-faint": "#b2b8cf",
+  "--hraness-palette-grid": "#313244",
+  "--hraness-palette-line": "#45475a",
+  "--hraness-palette-control-border": "#9296ab",
+  "--hraness-palette-surface": "#181825",
+  "--hraness-palette-surface-raised": "#313244",
+  "--hraness-palette-surface-hover": "#45475a",
+  "--hraness-palette-card": "#181825",
+  "--hraness-palette-card-foreground": "#dbe1f7",
+  "--hraness-palette-popover": "#313244",
+  "--hraness-palette-popover-foreground": "#dbe1f7",
+  "--hraness-palette-primary": "#92bafa",
+  "--hraness-palette-primary-foreground": "#1e1e2e",
+  "--hraness-palette-primary-soft": "#2b3046",
+  "--hraness-palette-secondary": "#313244",
+  "--hraness-palette-secondary-foreground": "#dbe1f7",
+  "--hraness-palette-accent": "#2b3046",
+  "--hraness-palette-accent-foreground": "#dbe1f7",
+  "--hraness-palette-focus": "#92bafa",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#313244",
+  "--hraness-palette-disabled-foreground": "#b2b8cf",
+  "--hraness-palette-inverse": "#dbe1f7",
+  "--hraness-palette-inverse-foreground": "#1e1e2e",
+  "--hraness-palette-danger": "#f5a0b8",
+  "--hraness-palette-danger-foreground": "#1e1e2e",
+  "--hraness-palette-danger-soft": "#382b3d",
+  "--hraness-palette-warning": "#f9e2af",
+  "--hraness-palette-warning-foreground": "#1e1e2e",
+  "--hraness-palette-warning-soft": "#38363d",
+  "--hraness-palette-success": "#a6e3a1",
+  "--hraness-palette-success-foreground": "#1e1e2e",
+  "--hraness-palette-success-soft": "#2e363c",
+  "--hraness-palette-info": "#89dceb",
+  "--hraness-palette-info-foreground": "#1e1e2e",
+  "--hraness-palette-info-soft": "#2b3545",
+  "--hraness-palette-chart1": "#f5c2e7",
+  "--hraness-palette-chart2": "#a6e3a1",
+  "--hraness-palette-chart3": "#89dceb",
+  "--hraness-palette-chart4": "#f9e2af",
+  "--hraness-palette-chart5": "#cda9f7",
+});
+
+export const gruvboxLight = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#fbf1c7",
+  "--hraness-palette-foreground": "#393533",
+  "--hraness-palette-muted": "#584f48",
+  "--hraness-palette-faint": "#584f48",
+  "--hraness-palette-grid": "#ebdbb2",
+  "--hraness-palette-line": "#d5c4a1",
+  "--hraness-palette-control-border": "#75685e",
+  "--hraness-palette-surface": "#f9f5d7",
+  "--hraness-palette-surface-raised": "#ebdbb2",
+  "--hraness-palette-surface-hover": "#d5c4a1",
+  "--hraness-palette-card": "#f9f5d7",
+  "--hraness-palette-card-foreground": "#393533",
+  "--hraness-palette-popover": "#ebdbb2",
+  "--hraness-palette-popover-foreground": "#393533",
+  "--hraness-palette-primary": "#065968",
+  "--hraness-palette-primary-foreground": "#fbf1c7",
+  "--hraness-palette-primary-soft": "#dee0be",
+  "--hraness-palette-secondary": "#ebdbb2",
+  "--hraness-palette-secondary-foreground": "#393533",
+  "--hraness-palette-accent": "#dee0be",
+  "--hraness-palette-accent-foreground": "#393533",
+  "--hraness-palette-focus": "#065968",
+  "--hraness-palette-scrim": "#00000070",
+  "--hraness-palette-disabled": "#ebdbb2",
+  "--hraness-palette-disabled-foreground": "#584f48",
+  "--hraness-palette-inverse": "#393533",
+  "--hraness-palette-inverse-foreground": "#fbf1c7",
+  "--hraness-palette-danger": "#9d0006",
+  "--hraness-palette-danger-foreground": "#fbf1c7",
+  "--hraness-palette-danger-soft": "#f0d4b0",
+  "--hraness-palette-warning": "#70490c",
+  "--hraness-palette-warning-foreground": "#fbf1c7",
+  "--hraness-palette-warning-soft": "#f3e2b2",
+  "--hraness-palette-success": "#56520a",
+  "--hraness-palette-success-foreground": "#fbf1c7",
+  "--hraness-palette-success-soft": "#ebe2b1",
+  "--hraness-palette-info": "#30593f",
+  "--hraness-palette-info-foreground": "#fbf1c7",
+  "--hraness-palette-info-soft": "#e5e3ba",
+  "--hraness-palette-chart1": "#913002",
+  "--hraness-palette-chart2": "#56520a",
+  "--hraness-palette-chart3": "#30593f",
+  "--hraness-palette-chart4": "#70490c",
+  "--hraness-palette-chart5": "#7f3865",
+});
+
+export const gruvboxDark = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#282828",
+  "--hraness-palette-foreground": "#f0e5c7",
+  "--hraness-palette-muted": "#c7baa3",
+  "--hraness-palette-faint": "#c7baa3",
+  "--hraness-palette-grid": "#3c3836",
+  "--hraness-palette-line": "#504945",
+  "--hraness-palette-control-border": "#a5988c",
+  "--hraness-palette-surface": "#1d2021",
+  "--hraness-palette-surface-raised": "#3c3836",
+  "--hraness-palette-surface-hover": "#504945",
+  "--hraness-palette-card": "#1d2021",
+  "--hraness-palette-card-foreground": "#f0e5c7",
+  "--hraness-palette-popover": "#3c3836",
+  "--hraness-palette-popover-foreground": "#f0e5c7",
+  "--hraness-palette-primary": "#a9c1b8",
+  "--hraness-palette-primary-foreground": "#282828",
+  "--hraness-palette-primary-soft": "#333735",
+  "--hraness-palette-secondary": "#3c3836",
+  "--hraness-palette-secondary-foreground": "#f0e5c7",
+  "--hraness-palette-accent": "#333735",
+  "--hraness-palette-accent-foreground": "#f0e5c7",
+  "--hraness-palette-focus": "#a9c1b8",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#3c3836",
+  "--hraness-palette-disabled-foreground": "#c7baa3",
+  "--hraness-palette-inverse": "#f0e5c7",
+  "--hraness-palette-inverse-foreground": "#282828",
+  "--hraness-palette-danger": "#fda49a",
+  "--hraness-palette-danger-foreground": "#282828",
+  "--hraness-palette-danger-soft": "#412c29",
+  "--hraness-palette-warning": "#fabd2f",
+  "--hraness-palette-warning-foreground": "#282828",
+  "--hraness-palette-warning-soft": "#413a29",
+  "--hraness-palette-success": "#bfc23c",
+  "--hraness-palette-success-foreground": "#282828",
+  "--hraness-palette-success-soft": "#393a28",
+  "--hraness-palette-info": "#9cc88c",
+  "--hraness-palette-info-foreground": "#282828",
+  "--hraness-palette-info-soft": "#343a32",
+  "--hraness-palette-chart1": "#fea963",
+  "--hraness-palette-chart2": "#bfc23c",
+  "--hraness-palette-chart3": "#9cc88c",
+  "--hraness-palette-chart4": "#fabd2f",
+  "--hraness-palette-chart5": "#e2aebc",
+});
+
+export const rosePineLight = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#faf4ed",
+  "--hraness-palette-foreground": "#44405e",
+  "--hraness-palette-muted": "#605c74",
+  "--hraness-palette-faint": "#605c74",
+  "--hraness-palette-grid": "#f2e9e1",
+  "--hraness-palette-line": "#dfdad9",
+  "--hraness-palette-control-border": "#797593",
+  "--hraness-palette-surface": "#fffaf3",
+  "--hraness-palette-surface-raised": "#f2e9e1",
+  "--hraness-palette-surface-hover": "#dfdad9",
+  "--hraness-palette-card": "#fffaf3",
+  "--hraness-palette-card-foreground": "#44405e",
+  "--hraness-palette-popover": "#f2e9e1",
+  "--hraness-palette-popover-foreground": "#44405e",
+  "--hraness-palette-primary": "#68587a",
+  "--hraness-palette-primary-foreground": "#faf4ed",
+  "--hraness-palette-primary-soft": "#ede5e5",
+  "--hraness-palette-secondary": "#f2e9e1",
+  "--hraness-palette-secondary-foreground": "#44405e",
+  "--hraness-palette-accent": "#ede5e5",
+  "--hraness-palette-accent-foreground": "#44405e",
+  "--hraness-palette-focus": "#68587a",
+  "--hraness-palette-scrim": "#00000070",
+  "--hraness-palette-disabled": "#f2e9e1",
+  "--hraness-palette-disabled-foreground": "#605c74",
+  "--hraness-palette-inverse": "#44405e",
+  "--hraness-palette-inverse-foreground": "#faf4ed",
+  "--hraness-palette-danger": "#8b4c5e",
+  "--hraness-palette-danger-foreground": "#faf4ed",
+  "--hraness-palette-danger-soft": "#f2e3df",
+  "--hraness-palette-warning": "#81561d",
+  "--hraness-palette-warning-foreground": "#faf4ed",
+  "--hraness-palette-warning-soft": "#f8ead7",
+  "--hraness-palette-success": "#27667f",
+  "--hraness-palette-success-foreground": "#faf4ed",
+  "--hraness-palette-success-soft": "#e1e3e0",
+  "--hraness-palette-info": "#3a656c",
+  "--hraness-palette-info-foreground": "#faf4ed",
+  "--hraness-palette-info-soft": "#e6e8e4",
+  "--hraness-palette-chart1": "#85514e",
+  "--hraness-palette-chart2": "#27667f",
+  "--hraness-palette-chart3": "#3a656c",
+  "--hraness-palette-chart4": "#81561d",
+  "--hraness-palette-chart5": "#68587a",
+});
+
+export const rosePineDark = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#191724",
+  "--hraness-palette-foreground": "#e0def4",
+  "--hraness-palette-muted": "#adaac0",
+  "--hraness-palette-faint": "#adaac0",
+  "--hraness-palette-grid": "#26233a",
+  "--hraness-palette-line": "#403d52",
+  "--hraness-palette-control-border": "#908caa",
+  "--hraness-palette-surface": "#1f1d2e",
+  "--hraness-palette-surface-raised": "#26233a",
+  "--hraness-palette-surface-hover": "#403d52",
+  "--hraness-palette-card": "#1f1d2e",
+  "--hraness-palette-card-foreground": "#e0def4",
+  "--hraness-palette-popover": "#26233a",
+  "--hraness-palette-popover-foreground": "#e0def4",
+  "--hraness-palette-primary": "#c4a7e7",
+  "--hraness-palette-primary-foreground": "#191724",
+  "--hraness-palette-primary-soft": "#2e283b",
+  "--hraness-palette-secondary": "#26233a",
+  "--hraness-palette-secondary-foreground": "#e0def4",
+  "--hraness-palette-accent": "#2e283b",
+  "--hraness-palette-accent-foreground": "#e0def4",
+  "--hraness-palette-focus": "#c4a7e7",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#26233a",
+  "--hraness-palette-disabled-foreground": "#adaac0",
+  "--hraness-palette-inverse": "#e0def4",
+  "--hraness-palette-inverse-foreground": "#191724",
+  "--hraness-palette-danger": "#f090ab",
+  "--hraness-palette-danger-foreground": "#191724",
+  "--hraness-palette-danger-soft": "#322231",
+  "--hraness-palette-warning": "#f6c177",
+  "--hraness-palette-warning-foreground": "#191724",
+  "--hraness-palette-warning-soft": "#342b2e",
+  "--hraness-palette-success": "#9ccfd8",
+  "--hraness-palette-success-foreground": "#191724",
+  "--hraness-palette-success-soft": "#292d3a",
+  "--hraness-palette-info": "#ebbcba",
+  "--hraness-palette-info-foreground": "#191724",
+  "--hraness-palette-info-soft": "#322b36",
+  "--hraness-palette-chart1": "#ebbcba",
+  "--hraness-palette-chart2": "#9ccfd8",
+  "--hraness-palette-chart3": "#ebbcba",
+  "--hraness-palette-chart4": "#f6c177",
+  "--hraness-palette-chart5": "#c4a7e7",
+});
+
+export const tokyoNightLight = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#e1e2e7",
+  "--hraness-palette-foreground": "#1c3161",
+  "--hraness-palette-muted": "#414c76",
+  "--hraness-palette-faint": "#414c76",
+  "--hraness-palette-grid": "#c4c8da",
+  "--hraness-palette-line": "#b7c1e3",
+  "--hraness-palette-control-border": "#56659d",
+  "--hraness-palette-surface": "#d0d5e3",
+  "--hraness-palette-surface-raised": "#c4c8da",
+  "--hraness-palette-surface-hover": "#b7c1e3",
+  "--hraness-palette-card": "#d0d5e3",
+  "--hraness-palette-card-foreground": "#1c3161",
+  "--hraness-palette-popover": "#c4c8da",
+  "--hraness-palette-popover-foreground": "#1c3161",
+  "--hraness-palette-primary": "#1d4e90",
+  "--hraness-palette-primary-foreground": "#e1e2e7",
+  "--hraness-palette-primary-soft": "#ccd6e7",
+  "--hraness-palette-secondary": "#c4c8da",
+  "--hraness-palette-secondary-foreground": "#1c3161",
+  "--hraness-palette-accent": "#ccd6e7",
+  "--hraness-palette-accent-foreground": "#1c3161",
+  "--hraness-palette-focus": "#1d4e90",
+  "--hraness-palette-scrim": "#00000070",
+  "--hraness-palette-disabled": "#c4c8da",
+  "--hraness-palette-disabled-foreground": "#414c76",
+  "--hraness-palette-inverse": "#1c3161",
+  "--hraness-palette-inverse-foreground": "#e1e2e7",
+  "--hraness-palette-danger": "#951a3e",
+  "--hraness-palette-danger-foreground": "#e1e2e7",
+  "--hraness-palette-danger-soft": "#e3ccd7",
+  "--hraness-palette-warning": "#614b2b",
+  "--hraness-palette-warning-foreground": "#e1e2e7",
+  "--hraness-palette-warning-soft": "#d7d4d3",
+  "--hraness-palette-success": "#40552a",
+  "--hraness-palette-success-foreground": "#e1e2e7",
+  "--hraness-palette-success-soft": "#d1d5d2",
+  "--hraness-palette-info": "#005571",
+  "--hraness-palette-info-foreground": "#e1e2e7",
+  "--hraness-palette-info-soft": "#c6d4dd",
+  "--hraness-palette-chart1": "#7a3f00",
+  "--hraness-palette-chart2": "#40552a",
+  "--hraness-palette-chart3": "#005571",
+  "--hraness-palette-chart4": "#614b2b",
+  "--hraness-palette-chart5": "#61369a",
+});
+
+export const tokyoNightDark = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#1a1b26",
+  "--hraness-palette-foreground": "#c0caf5",
+  "--hraness-palette-muted": "#a9b1d6",
+  "--hraness-palette-faint": "#a9b1d6",
+  "--hraness-palette-grid": "#24283b",
+  "--hraness-palette-line": "#292e42",
+  "--hraness-palette-control-border": "#737aa2",
+  "--hraness-palette-surface": "#16161e",
+  "--hraness-palette-surface-raised": "#24283b",
+  "--hraness-palette-surface-hover": "#292e42",
+  "--hraness-palette-card": "#16161e",
+  "--hraness-palette-card-foreground": "#c0caf5",
+  "--hraness-palette-popover": "#24283b",
+  "--hraness-palette-popover-foreground": "#c0caf5",
+  "--hraness-palette-primary": "#7aa2f7",
+  "--hraness-palette-primary-foreground": "#1a1b26",
+  "--hraness-palette-primary-soft": "#262b3f",
+  "--hraness-palette-secondary": "#24283b",
+  "--hraness-palette-secondary-foreground": "#c0caf5",
+  "--hraness-palette-accent": "#262b3f",
+  "--hraness-palette-accent-foreground": "#c0caf5",
+  "--hraness-palette-focus": "#7aa2f7",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#24283b",
+  "--hraness-palette-disabled-foreground": "#a9b1d6",
+  "--hraness-palette-inverse": "#c0caf5",
+  "--hraness-palette-inverse-foreground": "#1a1b26",
+  "--hraness-palette-danger": "#f7768e",
+  "--hraness-palette-danger-foreground": "#1a1b26",
+  "--hraness-palette-danger-soft": "#352632",
+  "--hraness-palette-warning": "#e0af68",
+  "--hraness-palette-warning-foreground": "#1a1b26",
+  "--hraness-palette-warning-soft": "#322d2e",
+  "--hraness-palette-success": "#9ece6a",
+  "--hraness-palette-success-foreground": "#1a1b26",
+  "--hraness-palette-success-soft": "#2a302e",
+  "--hraness-palette-info": "#7dcfff",
+  "--hraness-palette-info-foreground": "#1a1b26",
+  "--hraness-palette-info-soft": "#263140",
+  "--hraness-palette-chart1": "#ff9e64",
+  "--hraness-palette-chart2": "#9ece6a",
+  "--hraness-palette-chart3": "#7dcfff",
+  "--hraness-palette-chart4": "#e0af68",
+  "--hraness-palette-chart5": "#bb9af7",
+});
+
+export const paperLight = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#f8f7f4",
+  "--hraness-palette-foreground": "#1c1917",
+  "--hraness-palette-muted": "#6c665f",
+  "--hraness-palette-faint": "#6c665f",
+  "--hraness-palette-grid": "#dfdcd6",
+  "--hraness-palette-line": "#b9b3ab",
+  "--hraness-palette-control-border": "#8a8177",
+  "--hraness-palette-surface": "#fffefa",
+  "--hraness-palette-surface-raised": "#fffefa",
+  "--hraness-palette-surface-hover": "#ebe8e3",
+  "--hraness-palette-card": "#fffefa",
+  "--hraness-palette-card-foreground": "#1c1917",
+  "--hraness-palette-popover": "#fffefa",
+  "--hraness-palette-popover-foreground": "#1c1917",
+  "--hraness-palette-primary": "#1e5ae1",
+  "--hraness-palette-primary-foreground": "#f8f7f4",
+  "--hraness-palette-primary-soft": "#dee5f3",
+  "--hraness-palette-secondary": "#ebe8e3",
+  "--hraness-palette-secondary-foreground": "#1c1917",
+  "--hraness-palette-accent": "#dee5f3",
+  "--hraness-palette-accent-foreground": "#1c1917",
+  "--hraness-palette-focus": "#1e5ae1",
+  "--hraness-palette-scrim": "#00000070",
+  "--hraness-palette-disabled": "#fffefa",
+  "--hraness-palette-disabled-foreground": "#6c665f",
+  "--hraness-palette-inverse": "#1c1917",
+  "--hraness-palette-inverse-foreground": "#f8f7f4",
+  "--hraness-palette-danger": "#b23c34",
+  "--hraness-palette-danger-foreground": "#f8f7f4",
+  "--hraness-palette-danger-soft": "#f0e1dd",
+  "--hraness-palette-warning": "#975600",
+  "--hraness-palette-warning-foreground": "#f8f7f4",
+  "--hraness-palette-warning-soft": "#eee5d7",
+  "--hraness-palette-success": "#227445",
+  "--hraness-palette-success-foreground": "#f8f7f4",
+  "--hraness-palette-success-soft": "#dfe9e0",
+  "--hraness-palette-info": "#1e5ae1",
+  "--hraness-palette-info-foreground": "#f8f7f4",
+  "--hraness-palette-info-soft": "#dee5f3",
+  "--hraness-palette-chart1": "#a24a64",
+  "--hraness-palette-chart2": "#227445",
+  "--hraness-palette-chart3": "#1e5ae1",
+  "--hraness-palette-chart4": "#975600",
+  "--hraness-palette-chart5": "#7858a3",
+});
+
+export const paperDark = stylex.createTheme(paletteTokens, {
+  "--hraness-palette-background": "#12100f",
+  "--hraness-palette-foreground": "#f5f2ed",
+  "--hraness-palette-muted": "#aaa29a",
+  "--hraness-palette-faint": "#aaa29a",
+  "--hraness-palette-grid": "#302b27",
+  "--hraness-palette-line": "#514a44",
+  "--hraness-palette-control-border": "#827a72",
+  "--hraness-palette-surface": "#1d1a18",
+  "--hraness-palette-surface-raised": "#211d1a",
+  "--hraness-palette-surface-hover": "#292522",
+  "--hraness-palette-card": "#1d1a18",
+  "--hraness-palette-card-foreground": "#f5f2ed",
+  "--hraness-palette-popover": "#211d1a",
+  "--hraness-palette-popover-foreground": "#f5f2ed",
+  "--hraness-palette-primary": "#8fb0ff",
+  "--hraness-palette-primary-foreground": "#12100f",
+  "--hraness-palette-primary-soft": "#21232c",
+  "--hraness-palette-secondary": "#292522",
+  "--hraness-palette-secondary-foreground": "#f5f2ed",
+  "--hraness-palette-accent": "#21232c",
+  "--hraness-palette-accent-foreground": "#f5f2ed",
+  "--hraness-palette-focus": "#8fb0ff",
+  "--hraness-palette-scrim": "#000000b8",
+  "--hraness-palette-disabled": "#211d1a",
+  "--hraness-palette-disabled-foreground": "#aaa29a",
+  "--hraness-palette-inverse": "#f5f2ed",
+  "--hraness-palette-inverse-foreground": "#12100f",
+  "--hraness-palette-danger": "#ef8c82",
+  "--hraness-palette-danger-foreground": "#12100f",
+  "--hraness-palette-danger-soft": "#2d1f1d",
+  "--hraness-palette-warning": "#efae55",
+  "--hraness-palette-warning-foreground": "#12100f",
+  "--hraness-palette-warning-soft": "#2d2317",
+  "--hraness-palette-success": "#5fc98b",
+  "--hraness-palette-success-foreground": "#12100f",
+  "--hraness-palette-success-soft": "#1b261e",
+  "--hraness-palette-info": "#8fb0ff",
+  "--hraness-palette-info-foreground": "#12100f",
+  "--hraness-palette-info-soft": "#21232c",
+  "--hraness-palette-chart1": "#db91aa",
+  "--hraness-palette-chart2": "#5fc98b",
+  "--hraness-palette-chart3": "#8fb0ff",
+  "--hraness-palette-chart4": "#efae55",
+  "--hraness-palette-chart5": "#b7a0dc",
+});

package/src/palettes.css

@@ -0,0 +1,3 @@
+/* Opt-in palette delivery without fonts, resets, or product grammar. */
+@import "../dist/stylex.css";
+@import "./palette-bridge.css";