@frosted-ui/react-native 0.0.1-canary.100

package/dist/lib/panel-styles.js

@@ -0,0 +1,96 @@
+import { Platform } from 'react-native';
+/**
+ * Get padding and border radius for panel content based on size
+ */
+function getPanelSizeStyle(size) {
+    switch (size) {
+        case '1':
+            return { padding: 12, borderRadius: 8 }; // space-3, 8px
+        case '2':
+            return { padding: 16, borderRadius: 12 }; // space-4, 12px
+        case '3':
+            return { padding: 24, borderRadius: 16 }; // space-5, 16px
+        case '4':
+            return { padding: 32, borderRadius: 20 }; // space-6, 20px
+    }
+}
+/**
+ * Get backdrop filter style for translucent panels (web only)
+ */
+function getPanelBackdropStyle(variant, isDark) {
+    if (variant !== 'translucent' || Platform.OS !== 'web') {
+        return undefined;
+    }
+    const backdropFilter = isDark
+        ? 'blur(20px) saturate(190%) contrast(90%) brightness(80%)'
+        : 'blur(20px) saturate(190%) contrast(50%) brightness(130%)';
+    return {
+        backdropFilter,
+        WebkitBackdropFilter: backdropFilter,
+    };
+}
+/**
+ * Get shadow style for panel content
+ * Includes outline via boxShadow on web:
+ * - Light mode: 1px gray.a6 outline (no border)
+ * - Dark mode: 0.5px black outline (+ border)
+ */
+function getPanelShadowStyle(colors, isDark) {
+    const baseShadow = '0px 12px 60px rgba(0, 0, 0, 0.25), 0px 2px 8px rgba(0, 0, 0, 0.12)';
+    const outlineShadow = isDark
+        ? `, 0 0 0 0.5px black`
+        : `, 0 0 0 1px ${colors.palettes.gray.a6}`;
+    return Platform.select({
+        web: {
+            boxShadow: baseShadow + outlineShadow,
+        },
+        default: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 12 },
+            shadowOpacity: 0.25,
+            shadowRadius: 30,
+            elevation: 24,
+        },
+    });
+}
+/**
+ * Get border style for panel content
+ * Dark mode has 1px gray.a6 border on all platforms
+ * Light mode: no border on web (uses boxShadow outline), border on native as fallback
+ */
+function getPanelBorderStyle(colors, isDark) {
+    if (isDark || Platform.OS !== 'web') {
+        return {
+            borderWidth: 1,
+            borderColor: colors.palettes.gray.a6,
+        };
+    }
+    return undefined;
+}
+/**
+ * Get complete panel content style
+ */
+function getPanelContentStyle(options) {
+    const { size, variant, colors, isDark } = options;
+    const sizeStyle = getPanelSizeStyle(size);
+    // TODO: Handle translucent variant properly on native (iOS/Android) with blur effect
+    // For now, native always uses solid background since backdrop-filter is web-only
+    // and native blur requires additional setup (expo-blur or @react-native-community/blur)
+    const backgroundColor = Platform.OS === 'web' && variant === 'translucent'
+        ? colors.panelTranslucent
+        : colors.panelSolid;
+    const backdropStyle = getPanelBackdropStyle(variant, isDark);
+    const shadowStyle = getPanelShadowStyle(colors, isDark);
+    const borderStyle = getPanelBorderStyle(colors, isDark);
+    return {
+        backgroundColor,
+        padding: sizeStyle.padding,
+        borderRadius: sizeStyle.borderRadius,
+        overflow: 'hidden',
+        ...shadowStyle,
+        ...backdropStyle,
+        ...borderStyle,
+    };
+}
+export { getPanelContentStyle, getPanelSizeStyle };
+//# sourceMappingURL=panel-styles.js.map

package/dist/lib/panel-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-styles.js","sourceRoot":"","sources":["../../src/lib/panel-styles.ts"],"names":[],"mappings":"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"}

package/dist/lib/text-input-styles.d.ts

@@ -0,0 +1,36 @@
+import type { Color } from '../lib/types';
+import { useThemeTokens } from '../lib/use-theme-tokens';
+import { type ViewStyle } from 'react-native';
+export type TextInputSize = '1' | '2' | '3' | '4';
+export type TextInputVariant = 'surface' | 'soft';
+type PaletteKey = Color | 'accent' | 'gray';
+/**
+ * Convert hex color to rgba with specified opacity
+ */
+export declare function hexToRgba(hex: string, opacity: number): string;
+/**
+ * Get background and border styles for surface variant
+ */
+export declare function getSurfaceVariantStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
+/**
+ * Get background style for soft variant
+ */
+export declare function getSoftVariantStyle(colors: ReturnType<typeof useThemeTokens>['colors'], paletteKey: PaletteKey): ViewStyle;
+/**
+ * Get text and placeholder colors based on variant
+ */
+export declare function getTextInputColors(variant: TextInputVariant, colors: ReturnType<typeof useThemeTokens>['colors'], paletteKey: PaletteKey, disabled?: boolean): {
+    textColor: string;
+    placeholderColor: string;
+};
+/**
+ * Get disabled background style for surface variant
+ * Uses gray-a3 overlay (simulated with opacity/background)
+ */
+export declare function getDisabledSurfaceStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
+/**
+ * Get disabled background style for soft variant
+ */
+export declare function getDisabledSoftStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
+export {};
+//# sourceMappingURL=text-input-styles.d.ts.map

package/dist/lib/text-input-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-styles.d.ts","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;AAGlD,KAAK,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAO9D;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAiBX;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,EACnD,UAAU,EAAE,UAAU,GACrB,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,EACnD,UAAU,EAAE,UAAU,EACtB,QAAQ,CAAC,EAAE,OAAO,GACjB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAyBjD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAIX"}

package/dist/lib/text-input-styles.js

@@ -0,0 +1,88 @@
+import { Platform } from 'react-native';
+/**
+ * Convert hex color to rgba with specified opacity
+ */
+export function hexToRgba(hex, opacity) {
+    // Remove # if present
+    const cleanHex = hex.replace('#', '');
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+// ============================================================================
+// Variant Styles
+// ============================================================================
+/**
+ * Get background and border styles for surface variant
+ */
+export function getSurfaceVariantStyle(colors) {
+    return {
+        backgroundColor: colors.surface,
+        borderWidth: 1,
+        borderColor: colors.palettes.gray.a5,
+        ...(Platform.OS === 'web'
+            ? {
+                boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
+            }
+            : {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.05,
+                shadowRadius: 2,
+                elevation: 1,
+            }),
+    };
+}
+/**
+ * Get background style for soft variant
+ */
+export function getSoftVariantStyle(colors, paletteKey) {
+    return {
+        backgroundColor: colors.palettes[paletteKey].a3,
+    };
+}
+/**
+ * Get text and placeholder colors based on variant
+ */
+export function getTextInputColors(variant, colors, paletteKey, disabled) {
+    const grayPalette = colors.palettes.gray;
+    const palette = colors.palettes[paletteKey];
+    // Disabled state: always use gray-a11 for text
+    // Placeholder uses gray-a5 (lighter alpha shade approximating gray-a11 at 0.5 opacity)
+    if (disabled) {
+        return {
+            textColor: grayPalette.a11,
+            placeholderColor: grayPalette.a5,
+        };
+    }
+    if (variant === 'surface') {
+        return {
+            textColor: grayPalette['12'],
+            placeholderColor: grayPalette.a10,
+        };
+    }
+    // Soft variant
+    return {
+        textColor: palette['12'],
+        placeholderColor: hexToRgba(palette['12'], 0.65), // TextArea uses 0.65, TextField uses 0.6
+    };
+}
+/**
+ * Get disabled background style for surface variant
+ * Uses gray-a3 overlay (simulated with opacity/background)
+ */
+export function getDisabledSurfaceStyle(colors) {
+    return {
+        backgroundColor: colors.palettes.gray.a3,
+    };
+}
+/**
+ * Get disabled background style for soft variant
+ */
+export function getDisabledSoftStyle(colors) {
+    return {
+        backgroundColor: colors.palettes.gray.a4,
+    };
+}
+//# sourceMappingURL=text-input-styles.js.map

package/dist/lib/text-input-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-styles.js","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"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"}

package/dist/lib/theme-context.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { AccentColor } from './types';
+type ColorScheme = 'light' | 'dark';
+type DangerColor = 'tomato' | 'red' | 'ruby';
+type WarningColor = 'yellow' | 'amber';
+type SuccessColor = 'teal' | 'jade' | 'green' | 'grass';
+type InfoColor = 'blue' | 'sky';
+type SemanticColorConfig = {
+    accentColor: AccentColor;
+    dangerColor: DangerColor;
+    warningColor: WarningColor;
+    successColor: SuccessColor;
+    infoColor: InfoColor;
+};
+declare const defaultSemanticColors: SemanticColorConfig;
+type ThemeContextValue = {
+    colorScheme: ColorScheme;
+    setColorScheme: (scheme: ColorScheme) => void;
+    toggleColorScheme: () => void;
+} & SemanticColorConfig;
+declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** Initial color scheme. Defaults to system preference. */
+    defaultColorScheme?: ColorScheme;
+    /** Accent color for primary actions and highlights. Defaults to 'blue'. */
+    accentColor?: AccentColor;
+    /** Color for danger/error states. Defaults to 'red'. */
+    dangerColor?: DangerColor;
+    /** Color for warning states. Defaults to 'amber'. */
+    warningColor?: WarningColor;
+    /** Color for success states. Defaults to 'green'. */
+    successColor?: SuccessColor;
+    /** Color for informational states. Defaults to 'sky'. */
+    infoColor?: InfoColor;
+};
+/**
+ * Provider for theme context that allows programmatic color scheme control
+ * and semantic color customization.
+ *
+ * Wrap your app with this provider to enable theme toggling and custom colors.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       accentColor="purple"
+ *       dangerColor="tomato"
+ *       warningColor="yellow"
+ *       successColor="teal"
+ *       infoColor="blue"
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+declare function ThemeProvider({ children, defaultColorScheme, accentColor, dangerColor, warningColor, successColor, infoColor, }: ThemeProviderProps): React.JSX.Element;
+/**
+ * Hook to access and control the current color scheme.
+ * Must be used within a ThemeProvider.
+ *
+ * @example
+ * const { colorScheme, toggleColorScheme, accentColor } = useTheme();
+ */
+declare function useTheme(): ThemeContextValue;
+/**
+ * Internal hook to get the current color scheme.
+ * Checks ThemeContext first, falls back to system preference.
+ * Used by useThemeTokens.
+ */
+declare function useColorScheme(): ColorScheme;
+/**
+ * Internal hook to get the semantic color configuration.
+ * Returns defaults if not within a ThemeProvider.
+ */
+declare function useSemanticColors(): SemanticColorConfig;
+export { defaultSemanticColors, ThemeContext, ThemeProvider, useColorScheme, useSemanticColors, useTheme, };
+export type { ColorScheme, DangerColor, InfoColor, SemanticColorConfig, SuccessColor, ThemeContextValue, ThemeProviderProps, WarningColor, };
+//# sourceMappingURL=theme-context.d.ts.map

package/dist/lib/theme-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.d.ts","sourceRoot":"","sources":["../../src/lib/theme-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAGpC,KAAK,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAC7C,KAAK,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvC,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AACxD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAGhC,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAGF,QAAA,MAAM,qBAAqB,EAAE,mBAM5B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,GAAG,mBAAmB,CAAC;AAExB,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,wDAAwD;IACxD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qDAAqD;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qDAAqD;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,yDAAyD;IACzD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,kBAAkB,EAClB,WAA+C,EAC/C,WAA+C,EAC/C,YAAiD,EACjD,YAAiD,EACjD,SAA2C,GAC5C,EAAE,kBAAkB,qBAiCpB;AAED;;;;;;GAMG;AACH,iBAAS,QAAQ,IAAI,iBAAiB,CAMrC;AAED;;;;GAIG;AACH,iBAAS,cAAc,IAAI,WAAW,CAWrC;AAED;;;GAGG;AACH,iBAAS,iBAAiB,IAAI,mBAAmB,CAGhD;AAED,OAAO,EACL,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,QAAQ,GACT,CAAC;AACF,YAAY,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,GACb,CAAC"}

package/dist/lib/theme-context.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useColorScheme as useSystemColorScheme } from 'react-native';
+// Default semantic colors (matching web defaults)
+const defaultSemanticColors = {
+    accentColor: 'blue',
+    dangerColor: 'red',
+    warningColor: 'amber',
+    successColor: 'green',
+    infoColor: 'sky',
+};
+const ThemeContext = React.createContext(undefined);
+/**
+ * Provider for theme context that allows programmatic color scheme control
+ * and semantic color customization.
+ *
+ * Wrap your app with this provider to enable theme toggling and custom colors.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       accentColor="purple"
+ *       dangerColor="tomato"
+ *       warningColor="yellow"
+ *       successColor="teal"
+ *       infoColor="blue"
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+function ThemeProvider({ children, defaultColorScheme, accentColor = defaultSemanticColors.accentColor, dangerColor = defaultSemanticColors.dangerColor, warningColor = defaultSemanticColors.warningColor, successColor = defaultSemanticColors.successColor, infoColor = defaultSemanticColors.infoColor, }) {
+    const systemColorScheme = useSystemColorScheme();
+    const [colorScheme, setColorScheme] = React.useState(defaultColorScheme ?? (systemColorScheme === 'dark' ? 'dark' : 'light'));
+    const toggleColorScheme = React.useCallback(() => {
+        setColorScheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    }, []);
+    const value = React.useMemo(() => ({
+        colorScheme,
+        setColorScheme,
+        toggleColorScheme,
+        accentColor,
+        dangerColor,
+        warningColor,
+        successColor,
+        infoColor,
+    }), [
+        colorScheme,
+        toggleColorScheme,
+        accentColor,
+        dangerColor,
+        warningColor,
+        successColor,
+        infoColor,
+    ]);
+    return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+/**
+ * Hook to access and control the current color scheme.
+ * Must be used within a ThemeProvider.
+ *
+ * @example
+ * const { colorScheme, toggleColorScheme, accentColor } = useTheme();
+ */
+function useTheme() {
+    const context = React.useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+/**
+ * Internal hook to get the current color scheme.
+ * Checks ThemeContext first, falls back to system preference.
+ * Used by useThemeTokens.
+ */
+function useColorScheme() {
+    const context = React.useContext(ThemeContext);
+    const systemColorScheme = useSystemColorScheme();
+    // If ThemeProvider is used, respect the programmatic value
+    if (context) {
+        return context.colorScheme;
+    }
+    // Otherwise fall back to system preference
+    return systemColorScheme === 'dark' ? 'dark' : 'light';
+}
+/**
+ * Internal hook to get the semantic color configuration.
+ * Returns defaults if not within a ThemeProvider.
+ */
+function useSemanticColors() {
+    const context = React.useContext(ThemeContext);
+    return context ?? defaultSemanticColors;
+}
+export { defaultSemanticColors, ThemeContext, ThemeProvider, useColorScheme, useSemanticColors, useTheme, };
+//# sourceMappingURL=theme-context.js.map

package/dist/lib/theme-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.js","sourceRoot":"","sources":["../../src/lib/theme-context.tsx"],"names":[],"mappings":"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"}

package/dist/lib/theme-tokens.d.ts

@@ -0,0 +1,222 @@
+declare const typography: {
+    readonly '0': {
+        readonly fontSize: 10;
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '1': {
+        readonly fontSize: 12;
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '2': {
+        readonly fontSize: 14;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '3': {
+        readonly fontSize: 16;
+        readonly lineHeight: 24;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '4': {
+        readonly fontSize: 18;
+        readonly lineHeight: 26;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '5': {
+        readonly fontSize: 20;
+        readonly lineHeight: 28;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '6': {
+        readonly fontSize: 24;
+        readonly lineHeight: 30;
+        readonly letterSpacing: 0.01;
+    };
+    readonly '7': {
+        readonly fontSize: 28;
+        readonly lineHeight: 34;
+        readonly letterSpacing: 0.005;
+    };
+    readonly '8': {
+        readonly fontSize: 32;
+        readonly lineHeight: 38;
+        readonly letterSpacing: 0;
+    };
+    readonly '9': {
+        readonly fontSize: 40;
+        readonly lineHeight: 48;
+        readonly letterSpacing: 0;
+    };
+};
+type TypographyStepKey = keyof typeof typography;
+declare const fontWeights: {
+    readonly light: "300";
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly 'semi-bold': "600";
+    readonly bold: "700";
+};
+type FontWeightKey = keyof typeof fontWeights;
+type ShadeKey = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+type AlphaShadeKey = 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6' | 'a7' | 'a8' | 'a9' | 'a10' | 'a11' | 'a12';
+type ColorShades = {
+    [K in ShadeKey]: string;
+} & {
+    '9-contrast': string;
+} & {
+    [K in AlphaShadeKey]: string;
+};
+type AlphaOnlyShades = {
+    [K in AlphaShadeKey]: string;
+};
+export declare function blackAndWhitePalettes(): {
+    black: AlphaOnlyShades;
+    white: AlphaOnlyShades;
+};
+export declare const themeTokens: {
+    typography: {
+        readonly '0': {
+            readonly fontSize: 10;
+            readonly lineHeight: 12;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '1': {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '2': {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '3': {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '4': {
+            readonly fontSize: 18;
+            readonly lineHeight: 26;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '5': {
+            readonly fontSize: 20;
+            readonly lineHeight: 28;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '6': {
+            readonly fontSize: 24;
+            readonly lineHeight: 30;
+            readonly letterSpacing: 0.01;
+        };
+        readonly '7': {
+            readonly fontSize: 28;
+            readonly lineHeight: 34;
+            readonly letterSpacing: 0.005;
+        };
+        readonly '8': {
+            readonly fontSize: 32;
+            readonly lineHeight: 38;
+            readonly letterSpacing: 0;
+        };
+        readonly '9': {
+            readonly fontSize: 40;
+            readonly lineHeight: 48;
+            readonly letterSpacing: 0;
+        };
+    };
+    fontWeights: {
+        readonly light: "300";
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly 'semi-bold': "600";
+        readonly bold: "700";
+    };
+    colors: {
+        light: {
+            palettes: {
+                black: AlphaOnlyShades;
+                white: AlphaOnlyShades;
+                tomato: ColorShades;
+                red: ColorShades;
+                ruby: ColorShades;
+                crimson: ColorShades;
+                pink: ColorShades;
+                plum: ColorShades;
+                purple: ColorShades;
+                violet: ColorShades;
+                iris: ColorShades;
+                cyan: ColorShades;
+                teal: ColorShades;
+                jade: ColorShades;
+                green: ColorShades;
+                grass: ColorShades;
+                brown: ColorShades;
+                blue: ColorShades;
+                orange: ColorShades;
+                indigo: ColorShades;
+                sky: ColorShades;
+                mint: ColorShades;
+                yellow: ColorShades;
+                amber: ColorShades;
+                lime: ColorShades;
+                lemon: ColorShades;
+                magenta: ColorShades;
+                gold: ColorShades;
+                bronze: ColorShades;
+                gray: ColorShades;
+            };
+            background: string;
+            overlay: string;
+            panelSolid: string;
+            panelTranslucent: string;
+            surface: string;
+            stroke: string;
+        };
+        dark: {
+            palettes: {
+                black: AlphaOnlyShades;
+                white: AlphaOnlyShades;
+                tomato: ColorShades;
+                red: ColorShades;
+                ruby: ColorShades;
+                crimson: ColorShades;
+                pink: ColorShades;
+                plum: ColorShades;
+                purple: ColorShades;
+                violet: ColorShades;
+                iris: ColorShades;
+                cyan: ColorShades;
+                teal: ColorShades;
+                jade: ColorShades;
+                green: ColorShades;
+                grass: ColorShades;
+                brown: ColorShades;
+                blue: ColorShades;
+                orange: ColorShades;
+                indigo: ColorShades;
+                sky: ColorShades;
+                mint: ColorShades;
+                yellow: ColorShades;
+                amber: ColorShades;
+                lime: ColorShades;
+                lemon: ColorShades;
+                magenta: ColorShades;
+                gold: ColorShades;
+                bronze: ColorShades;
+                gray: ColorShades;
+            };
+            background: string;
+            overlay: string;
+            panelSolid: string;
+            panelTranslucent: string;
+            surface: string;
+            stroke: string;
+        };
+    };
+};
+export type { ColorShades, FontWeightKey, TypographyStepKey };
+//# sourceMappingURL=theme-tokens.d.ts.map

package/dist/lib/theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.d.ts","sourceRoot":"","sources":["../../src/lib/theme-tokens.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWN,CAAC;AAEX,KAAK,iBAAiB,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,QAAA,MAAM,WAAW;;;;;;CAMP,CAAC;AAEX,KAAK,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AAK9C,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzF,KAAK,aAAa,GACd,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,WAAW,GAAG;KAChB,CAAC,IAAI,QAAQ,GAAG,MAAM;CACxB,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG;KACD,CAAC,IAAI,aAAa,GAAG,MAAM;CAC7B,CAAC;AAqHF,KAAK,eAAe,GAAG;KAAG,CAAC,IAAI,aAAa,GAAG,MAAM;CAAE,CAAC;AAqBxD,wBAAgB,qBAAqB;;;EAKpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBvB,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC"}