thread-ui 0.8.1 → 0.9.0

package/dist/theme/css-name-configurations/theme-css-names.d.ts

@@ -1,4 +1,4 @@
-import { ThemeConfigFull, Theme, ModeColors } from '../../types';
+import { ThemeConfigFull, ModeColors } from '../../types';
 export declare const THREAD_CSS_VARIABLE_PREFIX: "--thread-";
 type AllThemeCssNames = ThemeConfigFull & {
     lightMode: ModeColors;
@@ -8,23 +8,26 @@ type AllThemeCssNames = ThemeConfigFull & {
  */
 export declare const AllBaseCssNames: AllThemeCssNames;
 export declare const LightModeVariablesBaseCssNames: {
-    background: string;
+    canvas: string;
+    inset: string;
     surface: string;
     elevated: string;
-    structure: string;
+    overlay: string;
+    active: string;
+    hover: string;
+    structure: import("../../types").StructureColors;
     text: import("../../types").TextColors;
 }, DarkModeVariablesBaseCssNames: {
-    background: string;
+    canvas: string;
+    inset: string;
     surface: string;
     elevated: string;
-    structure: string;
+    overlay: string;
+    active: string;
+    hover: string;
+    structure: import("../../types").StructureColors;
     text: import("../../types").TextColors;
 }, ThemeBaseCssNames: {
-    background: string;
-    surface: string;
-    elevated: string;
-    structure: string;
-    text: import("../../types").TextColors;
     primary: {
         light: string;
         main: string;
@@ -40,13 +43,6 @@ export declare const LightModeVariablesBaseCssNames: {
         main: string;
         dark: string;
     };
-    white: string;
-    black: string;
-    gray: {
-        light: string;
-        main: string;
-        dark: string;
-    };
     success: {
         light: string;
         main: string;
@@ -67,11 +63,122 @@ export declare const LightModeVariablesBaseCssNames: {
         main: string;
         dark: string;
     };
+    white: string;
+    black: string;
+    gray: {
+        light: string;
+        main: string;
+        dark: string;
+    };
     breakpoints: import("../../types").BreakpointOptions;
     borderRadius: import("../../types").UtilitySizes;
     borderSize: import("../../types").UtilitySizes;
+    scrim: string;
+    canvas: string;
+    inset: string;
+    surface: string;
+    elevated: string;
+    overlay: string;
+    active: string;
+    hover: string;
+    structure: import("../../types").StructureColors;
+    text: import("../../types").TextColors;
+    zIndex: import("../../types").ZIndexScale;
+    shadow: import("../../types").ShadowScale;
+};
+export declare const ThemeCssVariableNames: {
+    primary: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    secondary: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    tertiary: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    success: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    warning: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    error: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    info: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    white: `--thread-${string}`;
+    black: `--thread-${string}`;
+    gray: {
+        light: `--thread-${string}`;
+        main: `--thread-${string}`;
+        dark: `--thread-${string}`;
+    };
+    breakpoints: {
+        sm: `--thread-${string}`;
+        md: `--thread-${string}`;
+        lg: `--thread-${string}`;
+        xl: `--thread-${string}`;
+        xxl: `--thread-${string}`;
+    };
+    borderRadius: {
+        sm: `--thread-${string}`;
+        md: `--thread-${string}`;
+        lg: `--thread-${string}`;
+    };
+    borderSize: {
+        sm: `--thread-${string}`;
+        md: `--thread-${string}`;
+        lg: `--thread-${string}`;
+    };
+    scrim: `--thread-${string}`;
+    canvas: `--thread-${string}`;
+    inset: `--thread-${string}`;
+    surface: `--thread-${string}`;
+    elevated: `--thread-${string}`;
+    overlay: `--thread-${string}`;
+    active: `--thread-${string}`;
+    hover: `--thread-${string}`;
+    structure: {
+        subtle: `--thread-${string}`;
+        default: `--thread-${string}`;
+        strong: `--thread-${string}`;
+    };
+    text: {
+        standard: `--thread-${string}`;
+        secondary: `--thread-${string}`;
+        disabled: `--thread-${string}`;
+        accent: `--thread-${string}`;
+        inverted: `--thread-${string}`;
+    };
+    zIndex: {
+        base: `--thread-${string}`;
+        sticky: `--thread-${string}`;
+        overlay: `--thread-${string}`;
+        modal: `--thread-${string}`;
+        system: `--thread-${string}`;
+    };
+    shadow: {
+        sm: `--thread-${string}`;
+        md: `--thread-${string}`;
+        lg: `--thread-${string}`;
+    };
 };
-export declare const ThemeCssVariableNames: Theme;
 export declare const LightModeVariables: ModeColors;
 export declare const PrefixedLightModeVariables: ModeColors;
 export declare const DarkModeVariables: ModeColors;

package/dist/theme/css-name-configurations/theme-css-names.js

@@ -50,10 +50,19 @@ export const AllBaseCssNames = {
         dark: 'info-dark',
     },
     // Surface Colors
-    background: 'background',
+    canvas: 'canvas',
+    inset: 'inset',
     surface: 'surface',
     elevated: 'elevated',
-    structure: 'structure',
+    overlay: 'overlay',
+    active: 'active',
+    hover: 'hover',
+    // Structure Colors
+    structure: {
+        subtle: 'structure-subtle',
+        default: 'structure-default',
+        strong: 'structure-strong',
+    },
     // Text Colors
     text: {
         standard: 'text-standard',
@@ -62,7 +71,13 @@ export const AllBaseCssNames = {
         accent: 'text-accent',
         inverted: 'text-inverted',
     },
-    // Structure
+    // Shadows
+    shadow: {
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+    },
+    // Layouts
     breakpoints: {
         sm: 'breakpoint-sm',
         md: 'breakpoint-md',
@@ -70,6 +85,16 @@ export const AllBaseCssNames = {
         xl: 'breakpoint-xl',
         xxl: 'breakpoint-xxl',
     },
+    // Z Indexes
+    zIndex: {
+        base: 'z-index-base',
+        sticky: 'z-index-sticky',
+        overlay: 'z-index-overlay',
+        modal: 'z-index-modal',
+        system: 'z-index-system',
+    },
+    // Scrim
+    scrim: 'scrim',
     // Sizing
     borderRadius: {
         sm: 'border-radius-sm',
@@ -84,10 +109,19 @@ export const AllBaseCssNames = {
     // Light/Dark Mode Names
     lightMode: {
         // Surfaces
-        background: 'background-light-mode',
+        canvas: 'canvas-light-mode',
+        inset: 'inset-light-mode',
         surface: 'surface-light-mode',
         elevated: 'elevated-light-mode',
-        structure: 'structure-light-mode',
+        overlay: 'overlay-light-mode',
+        active: 'active-light-mode',
+        hover: 'hover-light-mode',
+        // Structure
+        structure: {
+            subtle: 'structure-subtle-light-mode',
+            default: 'structure-default-light-mode',
+            strong: 'structure-strong-light-mode',
+        },
         // Text
         text: {
             standard: 'text-standard-light-mode',
@@ -99,10 +133,19 @@ export const AllBaseCssNames = {
     },
     darkMode: {
         // Surfaces
-        background: 'background-dark-mode',
+        canvas: 'canvas-dark-mode',
+        inset: 'inset-dark-mode',
         surface: 'surface-dark-mode',
         elevated: 'elevated-dark-mode',
-        structure: 'structure-dark-mode',
+        overlay: 'overlay-dark-mode',
+        active: 'active-dark-mode',
+        hover: 'hover-dark-mode',
+        // Structure
+        structure: {
+            subtle: 'structure-subtle-dark-mode',
+            default: 'structure-default-dark-mode',
+            strong: 'structure-strong-dark-mode',
+        },
         // Text
         text: {
             standard: 'text-standard-dark-mode',

package/dist/theme/css-name-configurations/theme-css-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css-names.js","sourceRoot":"","sources":["../../../src/theme/css-name-configurations/theme-css-names.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-css-names.js","sourceRoot":"","sources":["../../../src/theme/css-name-configurations/theme-css-names.ts"],"names":[],"mappings":"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"}

package/dist/theme/default-theme.js

@@ -45,10 +45,19 @@ export const DefaultThreadTheme = {
         dark: '#1d4ed8',
     },
     // Light Mode Surface Colors
-    background: '#ffffff',
-    surface: '#f9fafb',
-    elevated: '#f3f4f6',
-    structure: '#e2e8f0',
+    canvas: '#FCFCFB',
+    inset: '#F7F7F6',
+    surface: '#FFFFFF',
+    elevated: '#FFFFFF',
+    overlay: '#FFFFFF',
+    active: '#E9ECEF',
+    hover: '#F3F4F6',
+    // Light Mode Structure Colors
+    structure: {
+        subtle: '#E8EAED',
+        default: '#D1D5DB',
+        strong: '#9CA3AF',
+    },
     // Light Mode Text Colors
     text: {
         standard: '#1f2937',
@@ -57,7 +66,13 @@ export const DefaultThreadTheme = {
         accent: '#3c5c49', // resolves to primary.main
         inverted: '#f9fafb', // resolves to dark mode text.standard
     },
-    // Structure
+    // Shadow Layers
+    shadow: {
+        sm: '0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03)',
+        md: '0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04)',
+        lg: '0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)',
+    },
+    // Layouts
     breakpoints: {
         sm: '0',
         md: '768',
@@ -65,6 +80,14 @@ export const DefaultThreadTheme = {
         xl: '1280',
         xxl: '1536',
     },
+    zIndex: {
+        base: '0',
+        sticky: '100',
+        overlay: '200',
+        modal: '300',
+        system: '400',
+    },
+    scrim: 'rgba(0, 0, 0, 0.4)',
     // Sizing
     borderRadius: {
         sm: '0.25rem', // 4px
@@ -78,16 +101,27 @@ export const DefaultThreadTheme = {
     },
     // Dark Mode Colors
     darkMode: {
-        background: '#121212',
-        surface: '#1e1e1e',
-        elevated: '#2d2d2d',
-        structure: '#4b5563',
+        // Dark Mode Surface Colors
+        canvas: '#121212',
+        inset: '#0A0A0A',
+        surface: '#1E1E1E',
+        elevated: '#252525',
+        overlay: '#2D2D2D',
+        active: '#3A3A3A',
+        hover: '#333333',
+        // Dark Mode Structure Colors
+        structure: {
+            subtle: '#2A2A2A',
+            default: '#3D3D3D',
+            strong: '#5A5A5A',
+        },
+        // Dark Mode Text Colors
         text: {
-            standard: '#f9fafb',
-            secondary: '#4b5563',
-            disabled: '#6b7280',
-            accent: '#3c5c49', // resolves to primary.main
-            inverted: '#1f2937', // resolves to light mode text.standard
+            standard: '#F9FAFB',
+            secondary: '#9CA3AF',
+            disabled: '#6B7280',
+            accent: '#7DA88E',
+            inverted: '#1F2937',
         },
     },
 };

package/dist/theme/default-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAoB;IAClD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,SAAS,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,QAAQ,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,iBAAiB;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,gBAAgB;IAChB,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,OAAO,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,KAAK,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,IAAI,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KACf;IACD,4BAA4B;IAC5B,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,yBAAyB;IACzB,IAAI,EAAE;QACL,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;QAC9C,QAAQ,EAAE,SAAS,EAAE,sCAAsC;KAC3D;IACD,YAAY;IACZ,WAAW,EAAE;QACZ,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;KACX;IACD,SAAS;IACT,YAAY,EAAE;QACb,EAAE,EAAE,SAAS,EAAE,MAAM;QACrB,EAAE,EAAE,UAAU,EAAE,MAAM;QACtB,EAAE,EAAE,QAAQ,EAAE,MAAM;KACpB;IACD,UAAU,EAAE;QACX,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,OAAO;KACX;IACD,mBAAmB;IACnB,QAAQ,EAAE;QACT,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,SAAS;YACnB,MAAM,EAAE,SAAS,EAAE,2BAA2B;YAC9C,QAAQ,EAAE,SAAS,EAAE,uCAAuC;SAC5D;KACD;CACD,CAAC"}
+{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/theme/default-theme.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -1,3 +1,4 @@
 export { ThreadTheme } from './thread-theme';
 export { ThreadScript } from './thread-script';
 export { ThemeProvider, useThemeMode } from './theme-provider';
+export { SurfaceLayerMap } from './theme-surface-system';

package/dist/theme/index.js

@@ -1,4 +1,5 @@
 export { ThreadTheme } from './thread-theme';
 export { ThreadScript } from './thread-script';
 export { ThemeProvider, useThemeMode } from './theme-provider';
+export { SurfaceLayerMap } from './theme-surface-system';
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/theme/theme-surface-system.d.ts

@@ -0,0 +1,9 @@
+import type { ShadowOptions, StructureColorOptions, BgColorOptions, SurfaceLayerOptions, ZIndexOptions } from '../types';
+export type SurfaceConfig = {
+    bg: BgColorOptions;
+    shadow: ShadowOptions;
+    structure: StructureColorOptions | 'none';
+    zIndex: ZIndexOptions | 'none';
+};
+/** Surface Layer System — maps each layer to its default bg, shadow, structure, and zIndex */
+export declare const SurfaceLayerMap: Record<SurfaceLayerOptions, SurfaceConfig>;

package/dist/theme/theme-surface-system.js

@@ -0,0 +1,34 @@
+/** Surface Layer System — maps each layer to its default bg, shadow, structure, and zIndex */
+export const SurfaceLayerMap = {
+    canvas: {
+        bg: 'canvas',
+        shadow: 'none',
+        structure: 'none',
+        zIndex: 'none',
+    },
+    inset: {
+        bg: 'inset',
+        shadow: 'none',
+        structure: 'default',
+        zIndex: 'none',
+    },
+    surface: {
+        bg: 'surface',
+        shadow: 'sm',
+        structure: 'subtle',
+        zIndex: 'none',
+    },
+    elevated: {
+        bg: 'elevated',
+        shadow: 'md',
+        structure: 'subtle',
+        zIndex: 'sticky',
+    },
+    overlay: {
+        bg: 'overlay',
+        shadow: 'lg',
+        structure: 'none',
+        zIndex: 'overlay',
+    },
+};
+//# sourceMappingURL=theme-surface-system.js.map

package/dist/theme/theme-surface-system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-surface-system.js","sourceRoot":"","sources":["../../src/theme/theme-surface-system.ts"],"names":[],"mappings":"AAeA,8FAA8F;AAC9F,MAAM,CAAC,MAAM,eAAe,GAA+C;IAC1E,MAAM,EAAE;QACP,EAAE,EAAE,QAAQ;QACZ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,MAAM;KACd;IACD,KAAK,EAAE;QACN,EAAE,EAAE,OAAO;QACX,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;KACd;IACD,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,MAAM;KACd;IACD,QAAQ,EAAE;QACT,EAAE,EAAE,UAAU;QACd,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,QAAQ;KAChB;IACD,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,SAAS;KACjB;CACD,CAAC"}

package/dist/theme/thread-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-theme.js","sourceRoot":"","sources":["../../src/theme/thread-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EACN,iBAAiB,EACjB,0BAA0B,GAC1B,MAAM,2CAA2C,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAU,aAAa,CAAC,iBAAiB,EAAE,0BAA0B,CAAC,CAAC"}
+{"version":3,"file":"thread-theme.js","sourceRoot":"","sources":["../../src/theme/thread-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EACN,iBAAiB,EACjB,0BAA0B,GAC1B,MAAM,2CAA2C,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAU,aAAa,CAC9C,iBAAiB,EACjB,0BAA0B,CACjB,CAAC"}

package/dist/types/theme/theme.types.d.ts

@@ -5,6 +5,7 @@ type ColorShades = {
     main: string;
     dark: string;
 };
+export type ColorShadeOptions = Prettify<keyof ColorShades>;
 /** Semantic text color roles */
 export type TextColors = {
     standard: string;
@@ -37,34 +38,91 @@ export type ExpandedUtilitySizes = Prettify<ExpandedSmallOptions & UtilitySizes
 export type ExpandedUtilitySizeOptions = Prettify<keyof ExpandedUtilitySizes>;
 /** Size scale extended with responsive breakpoint steps */
 export type BreakpointOptions = Omit<ExpandedUtilitySizes, keyof ExpandedSmallOptions>;
-/** Surface and text color tokens that shift between light and dark mode */
+/** Surface Hierarchy and Layer Colors */
 export type SurfaceColors = {
-    background: string;
+    canvas: string;
+    inset: string;
     surface: string;
     elevated: string;
-    structure: string;
+    overlay: string;
 };
-/** Surface color options excluding `structure`, used for component background variants */
-export type SurfaceColorOptions = keyof Omit<SurfaceColors, 'structure'>;
+/** Interactive Surface Status Colors */
+export type SurfaceActivityColors = {
+    active: string;
+    hover: string;
+};
+export type AllSurfaceColors = Prettify<SurfaceColors & SurfaceActivityColors>;
+/** Background color options for component */
+export type BgColorOptions = Prettify<keyof SurfaceColors | 'none'>;
+/** Element Shadow Levels */
+export type ShadowScale = {
+    sm: string;
+    md: string;
+    lg: string;
+};
+/** Element Shadow Options */
+export type ShadowOptions = Prettify<keyof ShadowScale | 'none'>;
+/** Structural Colors, used for borders and dividers etc */
+export type StructureColors = {
+    subtle: string;
+    default: string;
+    strong: string;
+};
+/** Structure color options, used for component variants */
+export type StructureColorOptions = Prettify<keyof StructureColors>;
+/** Z-Index Hierarchy */
+export type ZIndexScale = {
+    base: string;
+    sticky: string;
+    overlay: string;
+    modal: string;
+    system: string;
+};
+/** Z-Index Options */
+export type ZIndexOptions = Prettify<keyof ZIndexScale>;
+/** Modal Overlays */
+export type ScrimColors = {
+    scrim: string;
+};
+/** Surface Layer System Options */
+export type SurfaceLayerOptions = Prettify<keyof SurfaceColors>;
 /** Mode-aware color tokens combining surface colors with text roles */
-export type ModeColors = Prettify<SurfaceColors & {
+export type ModeColors = Prettify<AllSurfaceColors & {
+    structure: StructureColors;
     text: TextColors;
 }>;
-/** Full design token set for the Thread theme */
-export type Theme = Prettify<ModeColors & {
+/** Theme Brand Colors */
+export type ThemePalette = Prettify<{
     primary: ColorShades;
     secondary: ColorShades;
     tertiary: ColorShades;
-    white: string;
-    black: string;
-    gray: ColorShades;
+}>;
+/** Status Colors */
+export type StatusPalette = {
     success: ColorShades;
     warning: ColorShades;
     error: ColorShades;
     info: ColorShades;
+};
+/** Neutral Colors */
+export type NeutralPalette = {
+    white: string;
+    black: string;
+    gray: ColorShades;
+};
+/** Theme Layout Configuration */
+export type ThemeLayout = {
     breakpoints: BreakpointOptions;
+};
+/** Base Border Configuration */
+export type ThemeBorders = {
     borderRadius: UtilitySizes;
     borderSize: UtilitySizes;
+};
+/** Full design token set for the Thread theme */
+export type Theme = Prettify<ThemePalette & StatusPalette & NeutralPalette & ThemeLayout & ThemeBorders & ScrimColors & ModeColors & {
+    zIndex: ZIndexScale;
+    shadow: ShadowScale;
 }>;
 /** Complete theme including dark mode surface and text overrides */
 export type ThemeConfigFull = Prettify<Theme & {

package/dist/types/utility/index.d.ts

@@ -1,3 +1,3 @@
 export type { DeepPartial } from './deep-partial.types';
-export type { OptionalKey, Override, Prettify, ReplaceKey } from './type-production.types';
+export type { DeepStringify, OptionalKey, Override, Prettify, ReplaceKey, } from './type-production.types';
 export type { NotionIcon } from './notion-icon.types';

package/dist/types/utility/type-production.types.d.ts

@@ -48,3 +48,7 @@ export type ReplaceKey<T, K extends string, R> = T extends (infer U)[] ? Replace
 } & {
     [P in Extract<keyof T, K>]: R;
 }> : T;
+/** Recursively Replace values with string  */
+export type DeepStringify<T> = {
+    [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
+};

package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.d.ts

@@ -0,0 +1,11 @@
+import { SurfaceConfig } from '../../../theme/theme-surface-system';
+import { BgColorOptions, ShadowOptions, StructureColorOptions, SurfaceLayerOptions, ZIndexOptions } from '../../../types';
+type GetResolvedLayerValuesProps = {
+    layer: SurfaceLayerOptions;
+    bg?: BgColorOptions;
+    shadow?: ShadowOptions;
+    structure?: 'none' | StructureColorOptions;
+    zIndex?: 'none' | ZIndexOptions;
+};
+export declare const getResolvedLayerValues: ({ layer, bg, shadow, structure, zIndex, }: GetResolvedLayerValuesProps) => SurfaceConfig;
+export {};

package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.js

@@ -0,0 +1,11 @@
+import { SurfaceLayerMap } from '../../../theme/theme-surface-system';
+export const getResolvedLayerValues = ({ layer, bg, shadow, structure, zIndex, }) => {
+    const defaults = SurfaceLayerMap[layer];
+    return {
+        bg: bg ?? defaults.bg,
+        shadow: shadow ?? defaults.shadow,
+        structure: structure ?? defaults.structure,
+        zIndex: zIndex ?? defaults.zIndex,
+    };
+};
+//# sourceMappingURL=get-resolved-layer-values.js.map

package/dist/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-resolved-layer-values.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-resolved-layer-values/get-resolved-layer-values.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAiB9E,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACtC,KAAK,EACL,EAAE,EACF,MAAM,EACN,SAAS,EACT,MAAM,GACuB,EAAiB,EAAE;IAChD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO;QACN,EAAE,EAAE,EAAE,IAAI,QAAQ,CAAC,EAAE;QACrB,MAAM,EAAE,MAAM,IAAI,QAAQ,CAAC,MAAM;QACjC,SAAS,EAAE,SAAS,IAAI,QAAQ,CAAC,SAAS;QAC1C,MAAM,EAAE,MAAM,IAAI,QAAQ,CAAC,MAAM;KACjC,CAAC;AACH,CAAC,CAAC"}

package/dist/utils/theme-utilities/get-resolved-layer-values/index.d.ts

@@ -0,0 +1 @@
+export * from './get-resolved-layer-values';

package/dist/utils/theme-utilities/get-resolved-layer-values/index.js

@@ -0,0 +1,2 @@
+export * from './get-resolved-layer-values';
+//# sourceMappingURL=index.js.map

package/dist/utils/theme-utilities/get-resolved-layer-values/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/theme-utilities/get-resolved-layer-values/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/dist/utils/theme-utilities/get-utility-color/get-utility-color-value.d.ts

@@ -1,7 +1,8 @@
-import { UtilityColorOptions } from '../../../types';
+import { ColorShadeOptions, UtilityColorOptions } from '../../../types';
 /**
  * Returns corresponding default theme color CSS Variable
  * @param color Color Option
+ * @param shade Optional shade (defaults to 'main'). 'black' and 'text' only support 'main'.
  * @returns CSS Theme Variable string
  */
-export declare const getUtilityColorValue: (color: UtilityColorOptions) => string;
+export declare const getUtilityColorValue: (color: UtilityColorOptions, shade?: ColorShadeOptions) => string;