@gainsight-hub/design-tokens 0.1.0

package/dist/theme-manifest.json

@@ -0,0 +1,212 @@
+{
+  "themes": [
+    {
+      "id": "gainsight-light",
+      "label": "Light",
+      "description": "Gainsight design system — default light theme",
+      "selector": null,
+      "cssFile": null,
+      "variables": {}
+    },
+    {
+      "id": "dark",
+      "label": "Dark",
+      "description": "Gainsight design system — dark mode",
+      "selector": "[data-theme=\"dark\"]",
+      "cssFile": "@gainsight-hub/design-tokens/themes/dark.css",
+      "variables": {
+        "--theme-neutral-0": "#2B3346",
+        "--theme-neutral-100": "#3B4254",
+        "--theme-neutral-200": "#4F5663",
+        "--theme-neutral-300": "#696E7C",
+        "--theme-neutral-400": "#7B808E",
+        "--theme-neutral-500": "#8D919B",
+        "--theme-neutral-600": "#B8BBC2",
+        "--theme-neutral-700": "#DEDFE2",
+        "--theme-neutral-800": "#F4F5F6",
+        "--theme-neutral-900": "#FAFAFA",
+        "--theme-neutral-1000": "#FFFFFF",
+        "--config-hero-color": "#FFFFFF",
+        "--theme-brand-100": "#1C2B41",
+        "--theme-brand-200": "#09326C",
+        "--theme-brand-300": "#0055CC",
+        "--theme-brand-400": "#0C66E4",
+        "--theme-brand-500": "#1D7AFC",
+        "--theme-brand-600": "#388BFF",
+        "--theme-brand-700": "#579DFF",
+        "--theme-brand-800": "#85B8FF",
+        "--theme-brand-900": "#CCE0FF",
+        "--theme-brand-1000": "#E9F2FF",
+        "--color-status-success-bold": "#4BCE7F",
+        "--color-status-information-bold": "#579DFF",
+        "--color-status-danger-bold": "#F86A68",
+        "--color-community-answered": "#4BCE7F",
+        "--color-community-highlighted": "#F5CD47",
+        "--color-community-pinned": "#579DFF",
+        "--color-overlay-interactive-hover": "rgba(255, 255, 255, 0.08)",
+        "--color-overlay-interactive-pressed": "rgba(255, 255, 255, 0.14)",
+        "--color-overlay-backdrop": "rgba(9, 30, 66, 0.72)",
+        "--color-skeleton-default": "#4F5663",
+        "--color-skeleton-subtle": "#3B4254"
+      }
+    },
+    {
+      "id": "legacy",
+      "label": "Legacy",
+      "description": "Gainsight legacy defaults (pre design-system migration)",
+      "selector": "[data-theme=\"legacy\"]",
+      "cssFile": "@gainsight-hub/design-tokens/themes/legacy.css",
+      "variables": {
+        "--theme-brand-600": "oklch(from var(--theme-brand-700) calc(l + 0.037) c h)",
+        "--theme-brand-500": "oklch(from var(--theme-brand-700) calc(l + 0.100) c h)",
+        "--theme-brand-400": "oklch(from var(--theme-brand-700) calc(l + 0.185) c h)",
+        "--theme-brand-300": "oklch(from var(--theme-brand-700) calc(l + 0.270) c h)",
+        "--theme-brand-200": "oklch(from var(--theme-brand-700) calc(l + 0.353) c h)",
+        "--theme-brand-100": "oklch(from var(--theme-brand-700) calc(l + 0.415) c h)",
+        "--theme-brand-800": "oklch(from var(--theme-brand-700) calc(l - 0.087) c h)",
+        "--theme-brand-900": "oklch(from var(--theme-brand-700) calc(l - 0.184) c h)",
+        "--theme-brand-1000": "oklch(from var(--theme-brand-700) calc(l - 0.279) c h)",
+        "--theme-neutral-0": "#FFFFFF",
+        "--theme-neutral-100": "oklch(from var(--theme-neutral-1000) calc(l + 0.654) calc(c * 0.003) h)",
+        "--theme-neutral-200": "oklch(from var(--theme-neutral-1000) calc(l + 0.624) calc(c * 0.003) h)",
+        "--theme-neutral-300": "oklch(from var(--theme-neutral-1000) calc(l + 0.567) calc(c * 0.042) h)",
+        "--theme-neutral-400": "oklch(from var(--theme-neutral-1000) calc(l + 0.482) calc(c * 0.087) h)",
+        "--theme-neutral-500": "oklch(from var(--theme-neutral-1000) calc(l + 0.361) calc(c * 0.383) h)",
+        "--theme-neutral-600": "oklch(from var(--theme-neutral-1000) calc(l + 0.291) calc(c * 0.626) h)",
+        "--theme-neutral-700": "oklch(from var(--theme-neutral-1000) calc(l + 0.219) calc(c * 0.888) h)",
+        "--theme-neutral-800": "oklch(from var(--theme-neutral-1000) calc(l + 0.139) calc(c * 1.011) h)",
+        "--theme-neutral-900": "oklch(from var(--theme-neutral-1000) calc(l + 0.066) calc(c * 1.045) h)"
+      }
+    },
+    {
+      "id": "mui",
+      "label": "Material UI",
+      "description": "Material Design 3–inspired theme",
+      "selector": "[data-theme=\"mui\"]",
+      "cssFile": "@gainsight-hub/design-tokens/themes/mui.css",
+      "variables": {
+        "--theme-brand-100": "#E3F2FD",
+        "--theme-brand-200": "#BBDEFB",
+        "--theme-brand-300": "#90CAF9",
+        "--theme-brand-400": "#64B5F6",
+        "--theme-brand-500": "#42A5F5",
+        "--theme-brand-600": "#1E88E5",
+        "--theme-brand-700": "#1976D2",
+        "--theme-brand-800": "#1565C0",
+        "--theme-brand-900": "#0D47A1",
+        "--theme-brand-1000": "#072363",
+        "--theme-neutral-0": "#FFFFFF",
+        "--theme-neutral-100": "#FAFAFA",
+        "--theme-neutral-200": "#F5F5F5",
+        "--theme-neutral-300": "#E0E0E0",
+        "--theme-neutral-400": "#BDBDBD",
+        "--theme-neutral-500": "#9E9E9E",
+        "--theme-neutral-600": "#757575",
+        "--theme-neutral-700": "#616161",
+        "--theme-neutral-800": "#424242",
+        "--theme-neutral-900": "#303030",
+        "--theme-neutral-1000": "#212121",
+        "--font-family-sans": "Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "--font-family-mono": "'Roboto Mono', 'Courier New', monospace",
+        "--radius-025": "1px",
+        "--radius-050": "2px",
+        "--radius-100": "4px",
+        "--radius-150": "6px",
+        "--radius-200": "8px",
+        "--shadow-100": "0px 2px 1px -1px rgba(0,0,0,0.20), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+        "--shadow-200": "0px 2px 4px -1px rgba(0,0,0,0.20), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
+        "--shadow-300": "0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
+        "--color-status-success-bold": "#2E7D32",
+        "--color-status-danger-bold": "#D32F2F",
+        "--color-status-information-bold": "#0288D1"
+      }
+    },
+    {
+      "id": "antd",
+      "label": "Ant Design",
+      "description": "Ant Design 5.x–inspired theme",
+      "selector": "[data-theme=\"antd\"]",
+      "cssFile": "@gainsight-hub/design-tokens/themes/antd.css",
+      "variables": {
+        "--theme-brand-100": "#E6F4FF",
+        "--theme-brand-200": "#BAE0FF",
+        "--theme-brand-300": "#91CAFF",
+        "--theme-brand-400": "#69B1FF",
+        "--theme-brand-500": "#4096FF",
+        "--theme-brand-600": "#2880EB",
+        "--theme-brand-700": "#1677FF",
+        "--theme-brand-800": "#0958D9",
+        "--theme-brand-900": "#003EB3",
+        "--theme-brand-1000": "#002C8C",
+        "--theme-neutral-0": "#FFFFFF",
+        "--theme-neutral-100": "#FAFAFA",
+        "--theme-neutral-200": "#F5F5F5",
+        "--theme-neutral-300": "#D9D9D9",
+        "--theme-neutral-400": "#BFBFBF",
+        "--theme-neutral-500": "#8C8C8C",
+        "--theme-neutral-600": "#595959",
+        "--theme-neutral-700": "#434343",
+        "--theme-neutral-800": "#262626",
+        "--theme-neutral-900": "#1F1F1F",
+        "--theme-neutral-1000": "#141414",
+        "--font-family-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+        "--radius-025": "2px",
+        "--radius-050": "6px",
+        "--radius-100": "8px",
+        "--radius-150": "12px",
+        "--radius-200": "16px",
+        "--shadow-100": "0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)",
+        "--shadow-200": "0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05)",
+        "--shadow-300": "0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px 0 rgba(0,0,0,0.05), 0 12px 48px 16px rgba(0,0,0,0.03)",
+        "--color-status-success-bold": "#52C41A",
+        "--color-status-danger-bold": "#FF4D4F",
+        "--color-status-information-bold": "#1677FF"
+      }
+    },
+    {
+      "id": "spectrum",
+      "label": "Adobe Spectrum",
+      "description": "Adobe Spectrum–inspired theme",
+      "selector": "[data-theme=\"spectrum\"]",
+      "cssFile": "@gainsight-hub/design-tokens/themes/spectrum.css",
+      "variables": {
+        "--theme-brand-100": "#EAF1FB",
+        "--theme-brand-200": "#CBE0F8",
+        "--theme-brand-300": "#A8CCF2",
+        "--theme-brand-400": "#7FB7EB",
+        "--theme-brand-500": "#5093DA",
+        "--theme-brand-600": "#2171C5",
+        "--theme-brand-700": "#0265DC",
+        "--theme-brand-800": "#0550AE",
+        "--theme-brand-900": "#1B3E6E",
+        "--theme-brand-1000": "#0C2143",
+        "--theme-neutral-0": "#FFFFFF",
+        "--theme-neutral-100": "#F5F5F5",
+        "--theme-neutral-200": "#EAEAEA",
+        "--theme-neutral-300": "#D3D3D3",
+        "--theme-neutral-400": "#BCBCBC",
+        "--theme-neutral-500": "#909090",
+        "--theme-neutral-600": "#6E6E6E",
+        "--theme-neutral-700": "#4B4B4B",
+        "--theme-neutral-800": "#2C2C2C",
+        "--theme-neutral-900": "#222222",
+        "--theme-neutral-1000": "#1A1A1A",
+        "--font-family-sans": "'adobe-clean', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif",
+        "--font-family-mono": "'Source Code Pro', 'SFMono-Regular', Consolas, monospace",
+        "--radius-025": "0px",
+        "--radius-050": "0px",
+        "--radius-100": "0px",
+        "--radius-150": "0px",
+        "--radius-200": "0px",
+        "--shadow-100": "0px 1px 4px rgba(0, 0, 0, 0.16)",
+        "--shadow-200": "0px 4px 8px rgba(0, 0, 0, 0.12)",
+        "--shadow-300": "0px 8px 16px rgba(0, 0, 0, 0.08)",
+        "--color-status-success-bold": "#008854",
+        "--color-status-danger-bold": "#D7373F",
+        "--color-status-information-bold": "#0265DC"
+      }
+    }
+  ],
+  "defaultTheme": "gainsight-light"
+}

package/dist/themes/antd.css

@@ -0,0 +1,48 @@
+/* Auto-generated — do not edit manually. Source: themes/antd/index.js */
+/**
+ * Ant Design 5.x–inspired theme
+ *
+ * Usage:
+ *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
+ *   import "@gainsight-hub/design-tokens/themes/antd.css";
+ *   document.documentElement.setAttribute("data-theme", "antd");
+ *
+ * Restore default theme:
+ *   document.documentElement.removeAttribute("data-theme");
+ */
+[data-theme="antd"] {
+  --theme-brand-100: #E6F4FF;
+  --theme-brand-200: #BAE0FF;
+  --theme-brand-300: #91CAFF;
+  --theme-brand-400: #69B1FF;
+  --theme-brand-500: #4096FF;
+  --theme-brand-600: #2880EB;
+  --theme-brand-700: #1677FF;
+  --theme-brand-800: #0958D9;
+  --theme-brand-900: #003EB3;
+  --theme-brand-1000: #002C8C;
+  --theme-neutral-0: #FFFFFF;
+  --theme-neutral-100: #FAFAFA;
+  --theme-neutral-200: #F5F5F5;
+  --theme-neutral-300: #D9D9D9;
+  --theme-neutral-400: #BFBFBF;
+  --theme-neutral-500: #8C8C8C;
+  --theme-neutral-600: #595959;
+  --theme-neutral-700: #434343;
+  --theme-neutral-800: #262626;
+  --theme-neutral-900: #1F1F1F;
+  --theme-neutral-1000: #141414;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --radius-025: 2px;
+  --radius-050: 6px;
+  --radius-100: 8px;
+  --radius-150: 12px;
+  --radius-200: 16px;
+  --shadow-100: 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02);
+  --shadow-200: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
+  --shadow-300: 0 6px 16px -8px rgba(0,0,0,0.08), 0 9px 28px 0 rgba(0,0,0,0.05), 0 12px 48px 16px rgba(0,0,0,0.03);
+  --color-status-success-bold: #52C41A;
+  --color-status-danger-bold: #FF4D4F;
+  --color-status-information-bold: #1677FF;
+}

package/dist/themes/antd.css.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect only — activates [data-theme="antd"] overrides, no exports.
+export {};

package/dist/themes/dark.css

@@ -0,0 +1,47 @@
+/* Auto-generated — do not edit manually. Source: themes/dark/index.js */
+/**
+ * Gainsight design system — dark mode
+ *
+ * Usage:
+ *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
+ *   import "@gainsight-hub/design-tokens/themes/dark.css";
+ *   document.documentElement.setAttribute("data-theme", "dark");
+ *
+ * Restore default theme:
+ *   document.documentElement.removeAttribute("data-theme");
+ */
+[data-theme="dark"] {
+  --theme-neutral-0: #2B3346;
+  --theme-neutral-100: #3B4254;
+  --theme-neutral-200: #4F5663;
+  --theme-neutral-300: #696E7C;
+  --theme-neutral-400: #7B808E;
+  --theme-neutral-500: #8D919B;
+  --theme-neutral-600: #B8BBC2;
+  --theme-neutral-700: #DEDFE2;
+  --theme-neutral-800: #F4F5F6;
+  --theme-neutral-900: #FAFAFA;
+  --theme-neutral-1000: #FFFFFF;
+  --config-hero-color: #FFFFFF;
+  --theme-brand-100: #1C2B41;
+  --theme-brand-200: #09326C;
+  --theme-brand-300: #0055CC;
+  --theme-brand-400: #0C66E4;
+  --theme-brand-500: #1D7AFC;
+  --theme-brand-600: #388BFF;
+  --theme-brand-700: #579DFF;
+  --theme-brand-800: #85B8FF;
+  --theme-brand-900: #CCE0FF;
+  --theme-brand-1000: #E9F2FF;
+  --color-status-success-bold: #4BCE7F;
+  --color-status-information-bold: #579DFF;
+  --color-status-danger-bold: #F86A68;
+  --color-community-answered: #4BCE7F;
+  --color-community-highlighted: #F5CD47;
+  --color-community-pinned: #579DFF;
+  --color-overlay-interactive-hover: rgba(255, 255, 255, 0.08);
+  --color-overlay-interactive-pressed: rgba(255, 255, 255, 0.14);
+  --color-overlay-backdrop: rgba(9, 30, 66, 0.72);
+  --color-skeleton-default: #4F5663;
+  --color-skeleton-subtle: #3B4254;
+}

package/dist/themes/dark.css.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect only — activates [data-theme="dark"] overrides, no exports.
+export {};

package/dist/themes/legacy.css

@@ -0,0 +1,165 @@
+/* Auto-generated — do not edit manually. Source: themes/legacy/index.js */
+/**
+ * Gainsight legacy defaults (pre design-system migration)
+ *
+ * Usage:
+ *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
+ *   import "@gainsight-hub/design-tokens/themes/legacy.css";
+ *   document.documentElement.setAttribute("data-theme", "legacy");
+ *
+ * Restore default theme:
+ *   document.documentElement.removeAttribute("data-theme");
+ */
+[data-theme="legacy"] {
+  --theme-brand-700: var(--config--main-color-brand, #0C66E4);
+  --theme-brand-600: oklch(from var(--theme-brand-700) calc(l + 0.037) c h);
+  --theme-brand-500: oklch(from var(--theme-brand-700) calc(l + 0.100) c h);
+  --theme-brand-400: oklch(from var(--theme-brand-700) calc(l + 0.185) c h);
+  --theme-brand-300: oklch(from var(--theme-brand-700) calc(l + 0.270) c h);
+  --theme-brand-200: oklch(from var(--theme-brand-700) calc(l + 0.353) c h);
+  --theme-brand-100: oklch(from var(--theme-brand-700) calc(l + 0.415) c h);
+  --theme-brand-800: oklch(from var(--theme-brand-700) calc(l - 0.087) c h);
+  --theme-brand-900: oklch(from var(--theme-brand-700) calc(l - 0.184) c h);
+  --theme-brand-1000: oklch(from var(--theme-brand-700) calc(l - 0.279) c h);
+  --theme-neutral-1000: var(--config--main-color-night, #2B3346);
+  --theme-neutral-0: #FFFFFF;
+  --theme-neutral-100: oklch(from var(--theme-neutral-1000) calc(l + 0.654) calc(c * 0.003) h);
+  --theme-neutral-200: oklch(from var(--theme-neutral-1000) calc(l + 0.624) calc(c * 0.003) h);
+  --theme-neutral-300: oklch(from var(--theme-neutral-1000) calc(l + 0.567) calc(c * 0.042) h);
+  --theme-neutral-400: oklch(from var(--theme-neutral-1000) calc(l + 0.482) calc(c * 0.087) h);
+  --theme-neutral-500: oklch(from var(--theme-neutral-1000) calc(l + 0.361) calc(c * 0.383) h);
+  --theme-neutral-600: oklch(from var(--theme-neutral-1000) calc(l + 0.291) calc(c * 0.626) h);
+  --theme-neutral-700: oklch(from var(--theme-neutral-1000) calc(l + 0.219) calc(c * 0.888) h);
+  --theme-neutral-800: oklch(from var(--theme-neutral-1000) calc(l + 0.139) calc(c * 1.011) h);
+  --theme-neutral-900: oklch(from var(--theme-neutral-1000) calc(l + 0.066) calc(c * 1.045) h);
+  --color-action-primary-default: var(--config--main-color-brand, #0C66E4);
+  --color-action-destructive-default: var(--config--main-color-alert, #c92c2f);
+  --color-surface-page: var(--config-body-background-color, #FAFAFA);
+  --color-surface-inverse: var(--config--main-color-night, #2B3346);
+  --color-content-default: var(--config--main-color-night, #2B3346);
+  --color-content-subtle: var(--config-meta-text-color, #4F5663);
+  --color-content-subtlest: var(--config-main-navigation-search-placeholder-color, #696E7C);
+  --color-content-heading-default: var(--config-header-color, #2B3346);
+  --color-content-heading-hero: var(--config-hero-color, #FFFFFF);
+  --color-line-default: var(--config--main-color-disabled, #DEDFE2);
+  --color-status-success-bold: var(--config--main-color-success, #1f8444);
+  --color-status-information-bold: var(--config--main-color-info, #0c66e4);
+  --color-status-danger-bold: var(--config--main-color-alert, #c92c2f);
+  --color-community-answered: var(--config--main-color-success, #1f8444);
+  --color-community-unanswered: var(--config-topic-question-color, #696E7C);
+  --color-community-highlighted: var(--config--main-color-brand, #0C66E4);
+  --color-community-pinned: var(--config--main-color-brand, #0C66E4);
+  --color-link-default: var(--config--main-color-brand, #0C66E4);
+  --color-link-hover: var(--config-link-base-hover-color, #0055CC);
+  --color-skeleton-subtle: var(--color-skeleton-default, #2b33460a);
+  --space-layout-gutter: var(--gutter, 12px);
+  --backtotop-background: var(--config-footer-background-color, #2B3346);
+  --backtotop-content: var(--config-footer-color, #FFFFFF);
+  --button-radius: var(--config-button-border-radius, 8px);
+  --button-border-width: var(--config-button-border-width, 1px);
+  --button-font-weight: var(--config--main-button-base-font-weight, 500);
+  --button-text-transform: var(--config--main-button-base-texttransform, none);
+  --button-primary-background-default: var(--config-button-cta-background-color, #0C66E4);
+  --button-primary-background-hover: var(--config-button-cta-hover-background-color, #0055CC);
+  --button-primary-background-pressed: var(--config-button-cta-active-background-color, #09326C);
+  --button-primary-content-default: var(--config-button-cta-color, #FFFFFF);
+  --button-primary-content-hover: var(--config-button-cta-hover-color, #FFFFFF);
+  --button-primary-content-pressed: var(--config-button-cta-active-color, #FFFFFF);
+  --button-primary-border-default: var(--config-button-cta-border-color, #00000000);
+  --button-primary-border-hover: var(--config-button-cta-hover-border-color, #00000000);
+  --button-primary-border-pressed: var(--config-button-cta-active-border-color, #00000000);
+  --button-primary-shadow: var(--config-button-cta-box-shadow, none);
+  --button-secondary-background-default: var(--config-button-secondary-background-color, #FFFFFF);
+  --button-secondary-background-hover: var(--config-button-secondary-hover-background-color, #FAFAFA);
+  --button-secondary-background-pressed: var(--config-button-secondary-active-background-color, #F4F5F6);
+  --button-secondary-content-default: var(--config-button-secondary-color, #2B3346);
+  --button-secondary-content-hover: var(--config-button-secondary-hover-color, #2B3346);
+  --button-secondary-content-pressed: var(--config-button-secondary-active-color, #2B3346);
+  --button-secondary-border-default: var(--config-button-secondary-border-color, #DEDFE2);
+  --button-secondary-border-hover: var(--config-button-secondary-hover-border-color, #DEDFE2);
+  --button-secondary-border-pressed: var(--config-button-secondary-active-border-color, #DEDFE2);
+  --button-secondary-shadow: var(--config-button-secondary-box-shadow, none);
+  --button-destructive-background-default: var(--config-button-cancel-background-color, #c92c2f);
+  --button-destructive-background-hover: var(--config-button-cancel-hover-background-color, #ae2426);
+  --button-destructive-background-pressed: var(--config-button-cancel-active-background-color, #5d1a1c);
+  --button-destructive-content-default: var(--config-button-cancel-color, #FFFFFF);
+  --button-destructive-content-hover: var(--config-button-cancel-hover-color, #FFFFFF);
+  --button-destructive-content-pressed: var(--config-button-cancel-active-color, #FFFFFF);
+  --button-destructive-border-default: var(--config-button-cancel-border-color, #00000000);
+  --button-destructive-border-hover: var(--config-button-cancel-hover-border-color, #00000000);
+  --button-destructive-border-pressed: var(--config-button-cancel-active-border-color, #00000000);
+  --button-destructive-shadow: var(--config-button-cancel-box-shadow, none);
+  --button-vote-background-default: var(--config-button-toggle-background-color, #FFFFFF);
+  --button-vote-background-hover: var(--config-button-toggle-hover-background-color, #FAFAFA);
+  --button-vote-background-pressed: var(--config-button-toggle-active-background-color, #F4F5F6);
+  --button-vote-content-default: var(--config-button-toggle-color, #2B3346);
+  --button-vote-content-hover: var(--config-button-toggle-hover-color, #2B3346);
+  --button-vote-content-pressed: var(--config-button-toggle-active-color, #2B3346);
+  --button-vote-border-default: var(--config-button-toggle-border-color, #DEDFE2);
+  --button-vote-border-hover: var(--config-button-toggle-hover-border-color, #DEDFE2);
+  --button-vote-border-pressed: var(--config-button-toggle-active-border-color, #DEDFE2);
+  --button-vote-shadow-default: var(--config-button-toggle-box-shadow, none);
+  --button-vote-shadow-hover: var(--config-button-toggle-hover-box-shadow, none);
+  --button-vote-shadow-pressed: var(--config-button-toggle-active-box-shadow, none);
+  --button-vote-selected-background-default: var(--config-button-toggle-on-background-color, #0C66E4);
+  --button-vote-selected-background-hover: var(--config-button-toggle-on-hover-background-color, #0055CC);
+  --button-vote-selected-background-pressed: var(--config-button-toggle-on-active-background-color, #09326C);
+  --button-vote-selected-content-default: var(--config-button-toggle-on-color, #FFFFFF);
+  --button-vote-selected-content-hover: var(--config-button-toggle-on-hover-color, #FFFFFF);
+  --button-vote-selected-content-pressed: var(--config-button-toggle-on-active-color, #FFFFFF);
+  --button-vote-selected-border-default: var(--config-button-toggle-on-border-color, #00000000);
+  --button-vote-selected-border-hover: var(--config-button-toggle-on-hover-border-color, #00000000);
+  --button-vote-selected-border-pressed: var(--config-button-toggle-on-active-border-color, #00000000);
+  --button-vote-selected-shadow-default: var(--config-button-toggle-on-box-shadow, none);
+  --button-vote-selected-shadow-hover: var(--config-button-toggle-on-hover-box-shadow, none);
+  --button-vote-selected-shadow-pressed: var(--config-button-toggle-on-active-box-shadow, none);
+  --card-radius: var(--config-card-border-radius, 8px);
+  --card-border-width: var(--config-card-border-width, 1px);
+  --card-border-default: var(--config-card-border-color, #DEDFE2);
+  --card-border-hover: var(--config-card-hover-border-color, #DEDFE2);
+  --card-border-pressed: var(--config-card-active-border-color, #DEDFE2);
+  --card-background-default: var(--config-card-background-color, #FFFFFF);
+  --card-background-hover: var(--config-card-hover-background-color, #FFFFFF);
+  --card-background-pressed: var(--config-card-active-background-color, #FFFFFF);
+  --card-title-default: var(--config-card-title-color, #2B3346);
+  --card-title-hover: var(--config-card-hover-title-color, #0C66E4);
+  --card-title-pressed: var(--config-card-active-title-color, #2B3346);
+  --card-content-default: var(--config-card-text-color, #2B3346);
+  --card-content-hover: var(--config-card-hover-text-color, #2B3346);
+  --card-content-pressed: var(--config-card-active-text-color, #0055CC);
+  --card-shadow-default: var(--config-card-shadow, none);
+  --card-shadow-hover: var(--config-card-hover-shadow, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
+  --card-shadow-pressed: var(--config-card-active-shadow, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
+  --feed-item-radius: var(--config-list-views-card-border-radius, 8px);
+  --feed-item-border-width: var(--config-list-views-card-border-width, 1px);
+  --feed-item-border-default: var(--config-list-views-card-default-border-color, #DEDFE2);
+  --feed-item-border-hover: var(--config-list-views-card-hover-border-color, #DEDFE2);
+  --feed-item-border-pressed: var(--config-list-views-card-click-border-color, #DEDFE2);
+  --feed-item-background-default: var(--config-list-views-card-default-background-color, #FFFFFF);
+  --feed-item-background-hover: var(--config-list-views-card-hover-background-color, #FFFFFF);
+  --feed-item-background-pressed: var(--config-list-views-card-click-background-color, #FFFFFF);
+  --feed-item-title-default: var(--config-list-views-card-default-title-color, #2B3346);
+  --feed-item-title-hover: var(--config-list-views-card-hover-title-color, #0C66E4);
+  --feed-item-title-pressed: var(--config-list-views-card-click-title-color, #0055CC);
+  --feed-item-content-default: var(--config-list-views-card-default-text-color, #2B3346);
+  --feed-item-content-hover: var(--config-list-views-card-hover-text-color, #2B3346);
+  --feed-item-content-pressed: var(--config-list-views-card-click-text-color, #0055CC);
+  --navigation-background: var(--config-main-navigation-background-color, #FFFFFF);
+  --navigation-content: var(--config-main-navigation-nav-color, #2B3346);
+  --navigation-dropdown-background: var(--config-main-navigation-dropdown-background-color, #FFFFFF);
+  --navigation-dropdown-content: var(--config-main-navigation-dropdown-color, #2B3346);
+  --navigation-border-top: var(--config-main-navigation-border-top-color, #00000000);
+  --navigation-border-bottom: var(--config-main-navigation-border-bottom-color, #DEDFE2);
+  --widget-title: var(--config-header-color, #2B3346);
+  --widget-hero-title: var(--config-hero-color, #FFFFFF);
+  --widget-hero-subtitle: var(--config-hero-color, #FFFFFF);
+  --widget-hero-content-shadow: var(--config-hero-text-shadow, none);
+  --widget-hero-height: var(--hero-height, 240px);
+  --widget-featured-background: var(--config-notification-widget-background-color, #0c66e4);
+  --widget-featured-content: var(--config-notification-widget-color, #FFFFFF);
+  --widget-introduction-background: var(--config-widget-cta-background-color, #FFFFFF);
+  --widget-introduction-content: var(--config-widget-cta-color, #2B3346);
+  --widget-introduction-icon-background: var(--config-cta-icon-background-color, #1f8444);
+  --widget-introduction-icon-content: var(--config-cta-icon-check, #FFFFFF);
+  --widget-introduction-close-content: var(--config-cta-close-button-color, #696E7C);
+}

package/dist/themes/legacy.css.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect only — activates [data-theme="legacy"] overrides, no exports.
+export {};

package/dist/themes/mui.css

@@ -0,0 +1,48 @@
+/* Auto-generated — do not edit manually. Source: themes/mui/index.js */
+/**
+ * Material Design 3–inspired theme
+ *
+ * Usage:
+ *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
+ *   import "@gainsight-hub/design-tokens/themes/mui.css";
+ *   document.documentElement.setAttribute("data-theme", "mui");
+ *
+ * Restore default theme:
+ *   document.documentElement.removeAttribute("data-theme");
+ */
+[data-theme="mui"] {
+  --theme-brand-100: #E3F2FD;
+  --theme-brand-200: #BBDEFB;
+  --theme-brand-300: #90CAF9;
+  --theme-brand-400: #64B5F6;
+  --theme-brand-500: #42A5F5;
+  --theme-brand-600: #1E88E5;
+  --theme-brand-700: #1976D2;
+  --theme-brand-800: #1565C0;
+  --theme-brand-900: #0D47A1;
+  --theme-brand-1000: #072363;
+  --theme-neutral-0: #FFFFFF;
+  --theme-neutral-100: #FAFAFA;
+  --theme-neutral-200: #F5F5F5;
+  --theme-neutral-300: #E0E0E0;
+  --theme-neutral-400: #BDBDBD;
+  --theme-neutral-500: #9E9E9E;
+  --theme-neutral-600: #757575;
+  --theme-neutral-700: #616161;
+  --theme-neutral-800: #424242;
+  --theme-neutral-900: #303030;
+  --theme-neutral-1000: #212121;
+  --font-family-sans: Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'Roboto Mono', 'Courier New', monospace;
+  --radius-025: 1px;
+  --radius-050: 2px;
+  --radius-100: 4px;
+  --radius-150: 6px;
+  --radius-200: 8px;
+  --shadow-100: 0px 2px 1px -1px rgba(0,0,0,0.20), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+  --shadow-200: 0px 2px 4px -1px rgba(0,0,0,0.20), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
+  --shadow-300: 0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+  --color-status-success-bold: #2E7D32;
+  --color-status-danger-bold: #D32F2F;
+  --color-status-information-bold: #0288D1;
+}

package/dist/themes/mui.css.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect only — activates [data-theme="mui"] overrides, no exports.
+export {};

package/dist/themes/spectrum.css

@@ -0,0 +1,48 @@
+/* Auto-generated — do not edit manually. Source: themes/spectrum/index.js */
+/**
+ * Adobe Spectrum–inspired theme
+ *
+ * Usage:
+ *   import "@gainsight-hub/design-tokens/styles.css";        // must load first
+ *   import "@gainsight-hub/design-tokens/themes/spectrum.css";
+ *   document.documentElement.setAttribute("data-theme", "spectrum");
+ *
+ * Restore default theme:
+ *   document.documentElement.removeAttribute("data-theme");
+ */
+[data-theme="spectrum"] {
+  --theme-brand-100: #EAF1FB;
+  --theme-brand-200: #CBE0F8;
+  --theme-brand-300: #A8CCF2;
+  --theme-brand-400: #7FB7EB;
+  --theme-brand-500: #5093DA;
+  --theme-brand-600: #2171C5;
+  --theme-brand-700: #0265DC;
+  --theme-brand-800: #0550AE;
+  --theme-brand-900: #1B3E6E;
+  --theme-brand-1000: #0C2143;
+  --theme-neutral-0: #FFFFFF;
+  --theme-neutral-100: #F5F5F5;
+  --theme-neutral-200: #EAEAEA;
+  --theme-neutral-300: #D3D3D3;
+  --theme-neutral-400: #BCBCBC;
+  --theme-neutral-500: #909090;
+  --theme-neutral-600: #6E6E6E;
+  --theme-neutral-700: #4B4B4B;
+  --theme-neutral-800: #2C2C2C;
+  --theme-neutral-900: #222222;
+  --theme-neutral-1000: #1A1A1A;
+  --font-family-sans: 'adobe-clean', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'Source Code Pro', 'SFMono-Regular', Consolas, monospace;
+  --radius-025: 0px;
+  --radius-050: 0px;
+  --radius-100: 0px;
+  --radius-150: 0px;
+  --radius-200: 0px;
+  --shadow-100: 0px 1px 4px rgba(0, 0, 0, 0.16);
+  --shadow-200: 0px 4px 8px rgba(0, 0, 0, 0.12);
+  --shadow-300: 0px 8px 16px rgba(0, 0, 0, 0.08);
+  --color-status-success-bold: #008854;
+  --color-status-danger-bold: #D7373F;
+  --color-status-information-bold: #0265DC;
+}

package/dist/themes/spectrum.css.d.ts

@@ -0,0 +1,2 @@
+// CSS side-effect only — activates [data-theme="spectrum"] overrides, no exports.
+export {};

package/dist/themes.css

@@ -0,0 +1,8 @@
+/* All design tokens + every theme override in one import.
+   Use this unless you need to control which themes are loaded separately. */
+@import "./styles.css";
+@import "./themes/dark.css";
+@import "./themes/legacy.css";
+@import "./themes/mui.css";
+@import "./themes/antd.css";
+@import "./themes/spectrum.css";