@comms-id/theme 0.1.0

package/dist/fonts.css

@@ -0,0 +1,186 @@
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-ff2310f5.woff2") format("woff2");
+  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-875ccdd4.woff2") format("woff2");
+  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
+}
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-52306abf.woff2") format("woff2");
+  unicode-range:
+    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304,
+    U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-001175b1.woff2") format("woff2");
+  unicode-range:
+    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-98bbbccb.woff2") format("woff2");
+  unicode-range:
+    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial");
+  ascent-override: 95.94%;
+  descent-override: 28.16%;
+  line-gap-override: 0%;
+  size-adjust: 104.76%;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-a883c2ae.woff2") format("woff2");
+  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-9c439270.woff2") format("woff2");
+  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-656587c1.woff2") format("woff2");
+  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-4d8234ac.woff2") format("woff2");
+  unicode-range:
+    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304,
+    U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-6a465c75.woff2") format("woff2");
+  unicode-range:
+    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-4f7c2feb.woff2") format("woff2");
+  unicode-range:
+    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Geist Mono Fallback";
+  src: local("Arial");
+  ascent-override: 74.67%;
+  descent-override: 21.92%;
+  line-gap-override: 0%;
+  size-adjust: 134.59%;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-7249155f.woff2") format("woff2");
+  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-e34c5f1b.woff2") format("woff2");
+  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-6e1a6b2b.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-656bbed6.woff2") format("woff2");
+  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-fc83e075.woff2") format("woff2");
+  unicode-range:
+    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304,
+    U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-749a3084.woff2") format("woff2");
+  unicode-range:
+    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-1ab1ad55.woff2") format("woff2");
+  unicode-range:
+    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter Fallback";
+  src: local("Arial");
+  ascent-override: 90.44%;
+  descent-override: 22.52%;
+  line-gap-override: 0%;
+  size-adjust: 107.12%;
+}

package/dist/index.d.ts

@@ -0,0 +1,327 @@
+/** Shared Comms.ID design tokens. Colours are sRGB HEX. */
+export type Hex = `#${string}`;
+export declare const colors: {
+    readonly light: {
+        readonly accent: "#f5f5f5";
+        readonly "accent-foreground": "#171717";
+        readonly background: "#ffffff";
+        readonly border: "#e5e5e5";
+        readonly card: "#ffffff";
+        readonly "card-foreground": "#0a0a0a";
+        readonly "chart-1": "#8ec5ff";
+        readonly "chart-2": "#2b7fff";
+        readonly "chart-3": "#155dfc";
+        readonly "chart-4": "#1447e6";
+        readonly "chart-5": "#193cb8";
+        readonly code: "#f8f8f8";
+        readonly "code-foreground": "#0a0a0a";
+        readonly "code-highlight": "#f2f2f2";
+        readonly "code-number": "#747474";
+        readonly destructive: "#e7000b";
+        readonly foreground: "#0a0a0a";
+        readonly input: "#e5e5e5";
+        readonly muted: "#f5f5f5";
+        readonly "muted-foreground": "#737373";
+        readonly popover: "#ffffff";
+        readonly "popover-foreground": "#0a0a0a";
+        readonly primary: "#171717";
+        readonly "primary-foreground": "#fafafa";
+        readonly ring: "#a1a1a1";
+        readonly secondary: "#f5f5f5";
+        readonly "secondary-foreground": "#171717";
+        readonly selection: "#0a0a0a";
+        readonly "selection-foreground": "#ffffff";
+        readonly sidebar: "#fafafa";
+        readonly "sidebar-accent": "#f5f5f5";
+        readonly "sidebar-accent-foreground": "#171717";
+        readonly "sidebar-border": "#e5e5e5";
+        readonly "sidebar-foreground": "#0a0a0a";
+        readonly "sidebar-primary": "#171717";
+        readonly "sidebar-primary-foreground": "#fafafa";
+        readonly "sidebar-ring": "#a1a1a1";
+        readonly surface: "#f8f8f8";
+        readonly "surface-foreground": "#0a0a0a";
+        readonly focus: "#737373";
+        readonly "control-border": "#737373";
+        readonly "subtle-foreground": "#666666";
+        readonly success: "#15803d";
+        readonly warning: "#92400e";
+        readonly "destructive-foreground": "#ffffff";
+    };
+    readonly dark: {
+        readonly accent: "#404040";
+        readonly "accent-foreground": "#fafafa";
+        readonly background: "#0a0a0a";
+        readonly border: "#ffffff1a";
+        readonly card: "#171717";
+        readonly "card-foreground": "#fafafa";
+        readonly "chart-1": "#8ec5ff";
+        readonly "chart-2": "#2b7fff";
+        readonly "chart-3": "#155dfc";
+        readonly "chart-4": "#1447e6";
+        readonly "chart-5": "#193cb8";
+        readonly code: "#161616";
+        readonly "code-foreground": "#a1a1a1";
+        readonly "code-highlight": "#262626";
+        readonly "code-number": "#a4a4a4";
+        readonly destructive: "#ff6467";
+        readonly foreground: "#fafafa";
+        readonly input: "#ffffff26";
+        readonly muted: "#262626";
+        readonly "muted-foreground": "#a1a1a1";
+        readonly popover: "#262626";
+        readonly "popover-foreground": "#fafafa";
+        readonly primary: "#e5e5e5";
+        readonly "primary-foreground": "#171717";
+        readonly ring: "#737373";
+        readonly secondary: "#262626";
+        readonly "secondary-foreground": "#fafafa";
+        readonly selection: "#e5e5e5";
+        readonly "selection-foreground": "#171717";
+        readonly sidebar: "#171717";
+        readonly "sidebar-accent": "#262626";
+        readonly "sidebar-accent-foreground": "#fafafa";
+        readonly "sidebar-border": "#ffffff1a";
+        readonly "sidebar-foreground": "#fafafa";
+        readonly "sidebar-primary": "#1447e6";
+        readonly "sidebar-primary-foreground": "#fafafa";
+        readonly "sidebar-ring": "#525252";
+        readonly surface: "#161616";
+        readonly "surface-foreground": "#a1a1a1";
+        readonly focus: "#a1a1a1";
+        readonly "control-border": "#a1a1a1";
+        readonly "subtle-foreground": "#b3b3b3";
+        readonly success: "#4ade80";
+        readonly warning: "#fbbf24";
+        readonly "destructive-foreground": "#171717";
+    };
+};
+export type Mode = keyof typeof colors;
+export type Color = keyof typeof colors.light;
+/** Dimensions are pixels; CSS output uses rem at a 16px root. */
+export declare const spacing: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly "2xl": 32;
+    readonly "3xl": 48;
+    readonly "4xl": 64;
+};
+export declare const radius: {
+    readonly none: 0;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 10;
+    readonly xl: 14;
+    readonly full: 9999;
+};
+export declare const typography: {
+    readonly size: {
+        readonly xs: 12;
+        readonly sm: 14;
+        readonly base: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly "2xl": 24;
+        readonly "3xl": 30;
+        readonly "4xl": 36;
+        readonly "5xl": 48;
+    };
+    readonly weight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+export declare const fonts: {
+    readonly sans: '"Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif';
+    readonly mono: '"Geist Mono", "Geist Mono Fallback", ui-monospace, monospace';
+    readonly inter: '"Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif';
+};
+export declare const motion: {
+    readonly fast: 100;
+    readonly normal: 150;
+    readonly slow: 300;
+    readonly reduced: 0;
+    readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+};
+export declare const focus: {
+    readonly width: 2;
+    readonly offset: 2;
+};
+/** CSS fallback expressions, not declarations on :host: ancestor RP overrides win. */
+export declare const elementDefaults: {
+    readonly surface: "var(--comms-id-surface, var(--comms-id-theme-background, #ffffff))";
+    readonly text: "var(--comms-id-text, var(--comms-id-theme-foreground, #0a0a0a))";
+    readonly border: "var(--comms-id-border, var(--comms-id-theme-control-border, #737373))";
+    readonly focus: "var(--comms-id-focus, var(--comms-id-theme-focus, #737373))";
+    readonly active: "var(--comms-id-active, var(--comms-id-theme-accent, #f5f5f5))";
+    readonly radius: "var(--comms-id-radius, 6px)";
+};
+/** Native consumers choose mode and load the font family through their own runtime. */
+export declare const native: {
+    readonly colors: {
+        readonly light: {
+            readonly accent: "#f5f5f5";
+            readonly "accent-foreground": "#171717";
+            readonly background: "#ffffff";
+            readonly border: "#e5e5e5";
+            readonly card: "#ffffff";
+            readonly "card-foreground": "#0a0a0a";
+            readonly "chart-1": "#8ec5ff";
+            readonly "chart-2": "#2b7fff";
+            readonly "chart-3": "#155dfc";
+            readonly "chart-4": "#1447e6";
+            readonly "chart-5": "#193cb8";
+            readonly code: "#f8f8f8";
+            readonly "code-foreground": "#0a0a0a";
+            readonly "code-highlight": "#f2f2f2";
+            readonly "code-number": "#747474";
+            readonly destructive: "#e7000b";
+            readonly foreground: "#0a0a0a";
+            readonly input: "#e5e5e5";
+            readonly muted: "#f5f5f5";
+            readonly "muted-foreground": "#737373";
+            readonly popover: "#ffffff";
+            readonly "popover-foreground": "#0a0a0a";
+            readonly primary: "#171717";
+            readonly "primary-foreground": "#fafafa";
+            readonly ring: "#a1a1a1";
+            readonly secondary: "#f5f5f5";
+            readonly "secondary-foreground": "#171717";
+            readonly selection: "#0a0a0a";
+            readonly "selection-foreground": "#ffffff";
+            readonly sidebar: "#fafafa";
+            readonly "sidebar-accent": "#f5f5f5";
+            readonly "sidebar-accent-foreground": "#171717";
+            readonly "sidebar-border": "#e5e5e5";
+            readonly "sidebar-foreground": "#0a0a0a";
+            readonly "sidebar-primary": "#171717";
+            readonly "sidebar-primary-foreground": "#fafafa";
+            readonly "sidebar-ring": "#a1a1a1";
+            readonly surface: "#f8f8f8";
+            readonly "surface-foreground": "#0a0a0a";
+            readonly focus: "#737373";
+            readonly "control-border": "#737373";
+            readonly "subtle-foreground": "#666666";
+            readonly success: "#15803d";
+            readonly warning: "#92400e";
+            readonly "destructive-foreground": "#ffffff";
+        };
+        readonly dark: {
+            readonly accent: "#404040";
+            readonly "accent-foreground": "#fafafa";
+            readonly background: "#0a0a0a";
+            readonly border: "#ffffff1a";
+            readonly card: "#171717";
+            readonly "card-foreground": "#fafafa";
+            readonly "chart-1": "#8ec5ff";
+            readonly "chart-2": "#2b7fff";
+            readonly "chart-3": "#155dfc";
+            readonly "chart-4": "#1447e6";
+            readonly "chart-5": "#193cb8";
+            readonly code: "#161616";
+            readonly "code-foreground": "#a1a1a1";
+            readonly "code-highlight": "#262626";
+            readonly "code-number": "#a4a4a4";
+            readonly destructive: "#ff6467";
+            readonly foreground: "#fafafa";
+            readonly input: "#ffffff26";
+            readonly muted: "#262626";
+            readonly "muted-foreground": "#a1a1a1";
+            readonly popover: "#262626";
+            readonly "popover-foreground": "#fafafa";
+            readonly primary: "#e5e5e5";
+            readonly "primary-foreground": "#171717";
+            readonly ring: "#737373";
+            readonly secondary: "#262626";
+            readonly "secondary-foreground": "#fafafa";
+            readonly selection: "#e5e5e5";
+            readonly "selection-foreground": "#171717";
+            readonly sidebar: "#171717";
+            readonly "sidebar-accent": "#262626";
+            readonly "sidebar-accent-foreground": "#fafafa";
+            readonly "sidebar-border": "#ffffff1a";
+            readonly "sidebar-foreground": "#fafafa";
+            readonly "sidebar-primary": "#1447e6";
+            readonly "sidebar-primary-foreground": "#fafafa";
+            readonly "sidebar-ring": "#525252";
+            readonly surface: "#161616";
+            readonly "surface-foreground": "#a1a1a1";
+            readonly focus: "#a1a1a1";
+            readonly "control-border": "#a1a1a1";
+            readonly "subtle-foreground": "#b3b3b3";
+            readonly success: "#4ade80";
+            readonly warning: "#fbbf24";
+            readonly "destructive-foreground": "#171717";
+        };
+    };
+    readonly spacing: {
+        readonly none: 0;
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 24;
+        readonly "2xl": 32;
+        readonly "3xl": 48;
+        readonly "4xl": 64;
+    };
+    readonly radius: {
+        readonly none: 0;
+        readonly sm: 6;
+        readonly md: 8;
+        readonly lg: 10;
+        readonly xl: 14;
+        readonly full: 9999;
+    };
+    readonly typography: {
+        readonly size: {
+            readonly xs: 12;
+            readonly sm: 14;
+            readonly base: 16;
+            readonly lg: 18;
+            readonly xl: 20;
+            readonly "2xl": 24;
+            readonly "3xl": 30;
+            readonly "4xl": 36;
+            readonly "5xl": 48;
+        };
+        readonly weight: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
+    };
+    readonly motion: {
+        readonly fast: 100;
+        readonly normal: 150;
+        readonly slow: 300;
+        readonly reduced: 0;
+        readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly focus: {
+        readonly width: 2;
+        readonly offset: 2;
+    };
+    readonly fonts: {
+        readonly sans: "Geist";
+        readonly mono: "Geist Mono";
+        readonly inter: "Inter";
+    };
+};

package/dist/index.js

@@ -0,0 +1,146 @@
+export const colors = {
+    light: {
+        accent: "#f5f5f5",
+        "accent-foreground": "#171717",
+        background: "#ffffff",
+        border: "#e5e5e5",
+        card: "#ffffff",
+        "card-foreground": "#0a0a0a",
+        "chart-1": "#8ec5ff",
+        "chart-2": "#2b7fff",
+        "chart-3": "#155dfc",
+        "chart-4": "#1447e6",
+        "chart-5": "#193cb8",
+        code: "#f8f8f8",
+        "code-foreground": "#0a0a0a",
+        "code-highlight": "#f2f2f2",
+        "code-number": "#747474",
+        destructive: "#e7000b",
+        foreground: "#0a0a0a",
+        input: "#e5e5e5",
+        muted: "#f5f5f5",
+        "muted-foreground": "#737373",
+        popover: "#ffffff",
+        "popover-foreground": "#0a0a0a",
+        primary: "#171717",
+        "primary-foreground": "#fafafa",
+        ring: "#a1a1a1",
+        secondary: "#f5f5f5",
+        "secondary-foreground": "#171717",
+        selection: "#0a0a0a",
+        "selection-foreground": "#ffffff",
+        sidebar: "#fafafa",
+        "sidebar-accent": "#f5f5f5",
+        "sidebar-accent-foreground": "#171717",
+        "sidebar-border": "#e5e5e5",
+        "sidebar-foreground": "#0a0a0a",
+        "sidebar-primary": "#171717",
+        "sidebar-primary-foreground": "#fafafa",
+        "sidebar-ring": "#a1a1a1",
+        surface: "#f8f8f8",
+        "surface-foreground": "#0a0a0a",
+        focus: "#737373",
+        "control-border": "#737373",
+        "subtle-foreground": "#666666",
+        success: "#15803d",
+        warning: "#92400e",
+        "destructive-foreground": "#ffffff",
+    },
+    dark: {
+        accent: "#404040",
+        "accent-foreground": "#fafafa",
+        background: "#0a0a0a",
+        border: "#ffffff1a",
+        card: "#171717",
+        "card-foreground": "#fafafa",
+        "chart-1": "#8ec5ff",
+        "chart-2": "#2b7fff",
+        "chart-3": "#155dfc",
+        "chart-4": "#1447e6",
+        "chart-5": "#193cb8",
+        code: "#161616",
+        "code-foreground": "#a1a1a1",
+        "code-highlight": "#262626",
+        "code-number": "#a4a4a4",
+        destructive: "#ff6467",
+        foreground: "#fafafa",
+        input: "#ffffff26",
+        muted: "#262626",
+        "muted-foreground": "#a1a1a1",
+        popover: "#262626",
+        "popover-foreground": "#fafafa",
+        primary: "#e5e5e5",
+        "primary-foreground": "#171717",
+        ring: "#737373",
+        secondary: "#262626",
+        "secondary-foreground": "#fafafa",
+        selection: "#e5e5e5",
+        "selection-foreground": "#171717",
+        sidebar: "#171717",
+        "sidebar-accent": "#262626",
+        "sidebar-accent-foreground": "#fafafa",
+        "sidebar-border": "#ffffff1a",
+        "sidebar-foreground": "#fafafa",
+        "sidebar-primary": "#1447e6",
+        "sidebar-primary-foreground": "#fafafa",
+        "sidebar-ring": "#525252",
+        surface: "#161616",
+        "surface-foreground": "#a1a1a1",
+        focus: "#a1a1a1",
+        "control-border": "#a1a1a1",
+        "subtle-foreground": "#b3b3b3",
+        success: "#4ade80",
+        warning: "#fbbf24",
+        "destructive-foreground": "#171717",
+    },
+};
+/** Dimensions are pixels; CSS output uses rem at a 16px root. */
+export const spacing = {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    "2xl": 32,
+    "3xl": 48,
+    "4xl": 64,
+};
+export const radius = { none: 0, sm: 6, md: 8, lg: 10, xl: 14, full: 9999 };
+export const typography = {
+    size: { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36, "5xl": 48 },
+    weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
+    lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
+};
+export const fonts = {
+    sans: '"Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif',
+    mono: '"Geist Mono", "Geist Mono Fallback", ui-monospace, monospace',
+    inter: '"Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif',
+};
+export const motion = {
+    fast: 100,
+    normal: 150,
+    slow: 300,
+    reduced: 0,
+    easing: "cubic-bezier(0.2, 0, 0, 1)",
+};
+export const focus = { width: 2, offset: 2 };
+/** CSS fallback expressions, not declarations on :host: ancestor RP overrides win. */
+export const elementDefaults = {
+    surface: `var(--comms-id-surface, var(--comms-id-theme-background, ${colors.light.background}))`,
+    text: `var(--comms-id-text, var(--comms-id-theme-foreground, ${colors.light.foreground}))`,
+    border: `var(--comms-id-border, var(--comms-id-theme-control-border, ${colors.light["control-border"]}))`,
+    focus: `var(--comms-id-focus, var(--comms-id-theme-focus, ${colors.light.focus}))`,
+    active: `var(--comms-id-active, var(--comms-id-theme-accent, ${colors.light.accent}))`,
+    radius: `var(--comms-id-radius, ${radius.sm}px)`,
+};
+/** Native consumers choose mode and load the font family through their own runtime. */
+export const native = {
+    colors,
+    spacing,
+    radius,
+    typography,
+    motion,
+    focus,
+    fonts: { sans: "Geist", mono: "Geist Mono", inter: "Inter" },
+};