@apple-pie/slice-native 0.1.4 → 0.1.6

package/dist/esm/src/components/SliceIcon/icons.mjs

@@ -0,0 +1,142 @@
+// Generated by native/scripts/generate-icons.mjs from src/components/Icon. Do not edit directly.
+const SliceIcons = {
+    arrows: {
+        arrowLeft: 'arrow left',
+        arrowRight: 'arrow right',
+        arrowUp: 'arrow up',
+        arrowDown: 'arrow down',
+        chevronDown: 'chevron down',
+        chevronUp: 'chevron up',
+        navigateRight: 'navigate right',
+        navigateLeft: 'navigate left',
+        share: 'share',
+    },
+    selection: {
+        check: 'check',
+        checkCircle: 'check circle',
+        checkbox: 'checkbox',
+        checkboxChecked: 'checkbox checked',
+        checkboxPartial: 'checkbox partial',
+        circle: 'circle',
+        circleFill: 'circle fill',
+        plus: 'plus',
+        plusCircle: 'plus circle',
+    },
+    Messaging: {
+        chat: 'chat',
+        mail: 'mail',
+        notification: 'notification',
+        inbox: 'inbox',
+        like: 'like',
+        unlike: 'unlike',
+        at: '@',
+    },
+    media: {
+        camera: 'camera',
+        focus: 'focus',
+        mic: 'mic',
+        micMuted: 'mic muted',
+        video: 'video',
+        videoOff: 'video off',
+        download: 'download',
+        upload: 'upload',
+        speaker: 'speaker',
+        speakerMuted: 'speaker muted',
+        speakerHigh: 'speaker high',
+        speakerLow: 'speaker low',
+        play: 'play',
+        playCircle: 'play circle',
+        pause: 'pause',
+        pauseCircle: 'pause circle',
+    },
+    files: {
+        document: 'document',
+        documentEditor: 'document editor',
+        textDocument: 'text document',
+    },
+    people: {
+        people: 'people',
+        person: 'person',
+        talk: 'talk',
+    },
+    business: {
+        briefcase: 'briefcase',
+        dollar: 'dollar',
+        invoice: 'invoice',
+        payment: 'payment',
+        wallet: 'wallet',
+        laptop: 'laptop',
+    },
+    charts: {
+        barChart: 'bar chart',
+        chart: 'chart',
+        chartArrow: 'chart arrow',
+    },
+    status: {
+        alert: 'alert',
+        exclamation: 'exclamation',
+        help: 'help',
+        info: 'info',
+        issue: 'issue',
+        lightBulb: 'light bulb',
+        target: 'target',
+        openCircle: 'open circle',
+    },
+    brands: {
+        apple: 'apple',
+        google: 'google',
+        googleMono: 'google mono',
+        linkedin: 'linkedin',
+        github: 'github',
+        npm: 'npm',
+        openAI: 'openAI',
+        android: 'android',
+    },
+    edit: {
+        edit: 'edit',
+        trashBin: 'trash bin',
+        copy: 'copy',
+        filter: 'filter',
+        highlight: 'highlight',
+        undo: 'undo',
+        concise: 'concise',
+        expanded: 'expanded',
+        moderate: 'moderate',
+        recent: 'recent',
+    },
+    typography: {
+        fontLarger: 'font larger',
+        fontSmaller: 'font smaller',
+        characterBeam: 'character beam',
+    },
+    weather: {
+        sun: 'sun',
+        moonFull: 'moon full',
+    },
+    ai: {
+        sparkle: 'sparkle',
+        wand: 'wand',
+    },
+    ui: {
+        attach: 'attach',
+        blank: 'blank',
+        book: 'book',
+        globeLocation: 'globe location',
+        heart: 'heart',
+        stop: 'stop',
+        search: 'search',
+        settings: 'settings',
+        view: 'view',
+        refresh: 'refresh',
+        home: 'home',
+        menu: 'menu',
+        more: 'more',
+        sidebar: 'sidebar',
+        sidebarSplit: 'sidebar split',
+        keyboard: 'keyboard',
+        x: 'x',
+        fullscreen: 'fullscreen',
+    },
+};
+
+export { SliceIcons };

package/dist/esm/src/components/SliceText/SliceText.mjs

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { Text } from 'react-native';
+import { useSliceTheme } from '../../providers/SliceThemeProvider.mjs';
+
+/**
+ * Utility wrapper around text component for easier styling of text using slice theme
+ */
+function StyledText(props) {
+    const { textStyle, textColor, style, singleLine, children, ...rest } = props;
+    const { type, colors } = useSliceTheme();
+    const textStyles = textStyle ? type[textStyle] : undefined;
+    const color = { color: textColor ? colors[textColor] : colors['core-text-primary'] };
+    const fontSize = textStyles?.fontSize ?? 16;
+    const height = typeof singleLine === 'number' ? singleLine : 1.2;
+    const lineHeight = { lineHeight: singleLine ? height * fontSize : textStyles?.lineHeight };
+    return (jsx(Text, { ...rest, numberOfLines: singleLine ? 1 : rest.numberOfLines, style: [textStyles, color, lineHeight, style], children: children }));
+}
+
+export { StyledText };

package/dist/esm/src/components/SliceTextInput/SliceTextInput.mjs

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { StyleSheet, View, TextInput } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { useCreateThemedStyles } from '../../hooks/useCreateThemedStyles/useCreateThemedStyles.mjs';
+import { lineHeightTextStyle } from '../../utils/typography/typography.mjs';
+import { SliceIcon } from '../SliceIcon/SliceIcon.mjs';
+
+function SliceTextInput(props) {
+    const themedStyles = useCreateThemedStyles(styles);
+    const { didFocus, layout, icon, focused, blurClears = false, iconColor, iconSize = 24, placeholderTextColor = themedStyles.placeHolder.color, hideIconOnFocus = true, style, onFocus, onBlur, onChangeText, accessibilityState, ...rest } = props;
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    // Only drive native focus when the caller explicitly supplies a preference.
+    useEffect(() => {
+        if (focused === undefined || !inputRef.current)
+            return;
+        if (focused && !inputRef.current.isFocused())
+            inputRef.current.focus();
+        else if (!focused && inputRef.current.isFocused())
+            inputRef.current.blur();
+    }, [focused]);
+    const iconColorComputed = useMemo(() => {
+        if (iconColor)
+            return iconColor;
+        return isFocused ? themedStyles.icon.color : placeholderTextColor;
+    }, [themedStyles, isFocused, iconColor, placeholderTextColor]);
+    const showIcon = useMemo(() => {
+        if (!icon)
+            return false;
+        return !(isFocused && hideIconOnFocus);
+    }, [isFocused, hideIconOnFocus, icon]);
+    const padding = useMemo(() => {
+        return StyleSheet.create({
+            padding: { paddingRight: 18, paddingLeft: showIcon ? 0 : 18 },
+        });
+    }, [showIcon]);
+    return (jsxs(Reanimated.View, { style: themedStyles.inputWrapper, layout: layout, children: [showIcon && (jsx(View, { style: [themedStyles.icon, { height: iconSize, width: iconSize }], children: jsx(SliceIcon, { name: icon, strokeColor: iconColorComputed, size: iconSize, accessible: false, pointerEvents: "none" }) })), jsx(TextInput, { ...rest, ref: inputRef, style: [themedStyles.inputFieldView, padding.padding, style], accessibilityState: {
+                    ...accessibilityState,
+                    disabled: rest.editable === false || accessibilityState?.disabled,
+                }, onChangeText: onChangeText, placeholderTextColor: placeholderTextColor, onFocus: (event) => {
+                    setIsFocused(true);
+                    didFocus?.(true);
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setIsFocused(false);
+                    if (blurClears) {
+                        inputRef.current?.clear();
+                        onChangeText?.('');
+                    }
+                    didFocus?.(false);
+                    onBlur?.(event);
+                } })] }));
+}
+const styles = (theme) => StyleSheet.create({
+    icon: {
+        marginLeft: 16,
+        color: theme.name === 'lightMode' ? theme.colors['core-icon-primary'] : theme.colors['core-link-primary'],
+    },
+    inputWrapper: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: 8,
+        borderWidth: 1,
+        borderColor: theme.colors['core-outline-secondary'],
+        borderRadius: 100,
+        minHeight: 48,
+        backgroundColor: theme.colors['core-surface-primary'],
+        zIndex: 2,
+    },
+    inputFieldView: {
+        ...lineHeightTextStyle(theme.type['body-xl-bold']),
+        color: theme.colors['core-text-primary'],
+        flex: 1,
+        zIndex: 2,
+        minHeight: 48,
+    },
+    placeHolder: {
+        color: theme.colors['core-text-secondary'],
+    },
+});
+
+export { SliceTextInput };

package/dist/esm/src/hooks/useCreateThemedStyles/useCreateThemedStyles.mjs

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { useSliceTheme } from '../../providers/SliceThemeProvider.mjs';
+
+/** Resolve native styles using the current provider theme. Keep the factory stable
+ * (outside the component, or with useCallback) to reuse styles across renders. */
+function useCreateThemedStyles(styles) {
+    const sliceTheme = useSliceTheme();
+    return useMemo(() => styles(sliceTheme), [sliceTheme, styles]);
+}
+
+export { useCreateThemedStyles };

package/dist/esm/src/providers/SliceThemeProvider.mjs

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+import { useColorScheme } from 'react-native';
+import { darkTheme, lightTheme } from '../../theme.mjs';
+
+const ThemeContext = createContext(undefined);
+function SliceThemeProvider({ preference = 'system', onPreferenceChange = undefined, children, }) {
+    const deviceMode = useColorScheme();
+    const mode = preference === 'system' ? (deviceMode === 'dark' ? 'dark' : 'light') : preference;
+    const value = useMemo(() => ({
+        theme: mode === 'dark' ? darkTheme : lightTheme,
+        mode,
+        preference,
+        setPreference: onPreferenceChange,
+    }), [mode, preference, onPreferenceChange]);
+    return jsx(ThemeContext.Provider, { value: value, children: children });
+}
+function useSliceContext() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useSliceContext must be used within SliceThemeProvider');
+    }
+    return context;
+}
+function useSliceTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useSliceTheme must be used within SliceThemeProvider');
+    }
+    return context.theme;
+}
+
+export { SliceThemeProvider, useSliceContext, useSliceTheme };

package/dist/esm/src/theme/colors/colors.mjs

@@ -0,0 +1,249 @@
+const coreColors = {
+    'brand-grey-50': '#f4f7fa',
+    'brand-grey-100': '#e5ecf3',
+    'brand-grey-200': '#d5e0ea',
+    'brand-grey-300': '#98acbf',
+    'brand-grey-400': '#7f96a9',
+    'brand-grey-500': '#657d91',
+    'brand-grey-600': '#4c6273',
+    'brand-grey-700': '#405261',
+    'brand-grey-800': '#37434e',
+    'brand-grey-900': '#2d353d',
+    'brand-grey-950': '#1f262d',
+    'brand-sea-50': '#e8f1ff',
+    'brand-sea-100': '#c7defe',
+    'brand-sea-200': '#a5c9ff',
+    'brand-sea-300': '#7ab3ff',
+    'brand-sea-400': '#4084ff',
+    'brand-sea-500': '#2f45ff',
+    'brand-sea-600': '#2d2fff',
+    'brand-sea-700': '#0000ff',
+    'brand-sea-800': '#0609cd',
+    'brand-sea-900': '#001699',
+    'brand-sea-950': '#0a0b5c',
+    'brand-sky-50': '#eafffe',
+    'brand-sky-100': '#cdfffb',
+    'brand-sky-200': '#a3f8ff',
+    'brand-sky-300': '#6af5ff',
+    'brand-sky-400': '#00edff',
+    'brand-sky-500': '#00c8e0',
+    'brand-sky-600': '#00a6c0',
+    'brand-sky-700': '#03839b',
+    'brand-sky-800': '#0d697d',
+    'brand-sky-900': '#105669',
+    'brand-sky-950': '#033949',
+    'brand-land-50': '#f4ffe5',
+    'brand-land-100': '#e0ffb7',
+    'brand-land-200': '#caff95',
+    'brand-land-300': '#b7fe59',
+    'brand-land-400': '#9cf820',
+    'brand-land-500': '#71e618',
+    'brand-land-600': '#56c900',
+    'brand-land-700': '#2d8c00',
+    'brand-land-800': '#31690b',
+    'brand-land-900': '#2a580f',
+    'brand-land-950': '#123201',
+    'brand-orange-50': '#fff8ec',
+    'brand-orange-100': '#ffebd7',
+    'brand-orange-200': '#ffe3c6',
+    'brand-orange-300': '#ffc182',
+    'brand-orange-400': '#ff972e',
+    'brand-orange-500': '#ff800a',
+    'brand-orange-600': '#ff6700',
+    'brand-orange-700': '#ff3700',
+    'brand-orange-800': '#a02b0b',
+    'brand-orange-900': '#80250b',
+    'brand-orange-950': '#461604',
+    'brand-yellow-50': '#ffffea',
+    'brand-yellow-100': '#fffdca',
+    'brand-yellow-200': '#fff2a0',
+    'brand-yellow-300': '#ffeb72',
+    'brand-yellow-400': '#ffd333',
+    'brand-yellow-500': '#ffc200',
+    'brand-yellow-600': '#ffad00',
+    'brand-yellow-700': '#c68601',
+    'brand-yellow-800': '#8f6307',
+    'brand-yellow-900': '#5f430a',
+    'brand-yellow-950': '#442e00',
+    'brand-purple-50': '#faf0ff',
+    'brand-purple-100': '#f4ddff',
+    'brand-purple-200': '#e5cdff',
+    'brand-purple-300': '#ccafff',
+    'brand-purple-400': '#b891ff',
+    'brand-purple-500': '#7d48ff',
+    'brand-purple-600': '#6a14ff',
+    'brand-purple-700': '#5600f1',
+    'brand-purple-800': '#4d01d6',
+    'brand-purple-900': '#4003af',
+    'brand-purple-950': '#1e007c',
+    'brand-magenta-50': '#fef1fc',
+    'brand-magenta-100': '#ffdcef',
+    'brand-magenta-200': '#ffcae6',
+    'brand-magenta-300': '#ff90cb',
+    'brand-magenta-400': '#ff61ca',
+    'brand-magenta-500': '#ff3ac2',
+    'brand-magenta-600': '#f012aa',
+    'brand-magenta-700': '#df059b',
+    'brand-magenta-800': '#9b0069',
+    'brand-magenta-900': '#790a55',
+    'brand-magenta-950': '#58003a',
+    'brand-white-0': '#ffffff',
+    'product-red-400': '#ff474a',
+    'product-red-500': '#df0529',
+    'core-drop-shadow-light': '#0339491a',
+    'core-drop-shadow-dark': '#0000007a',
+    'core-surface-coverup-translucent-light': '#1f262d52',
+    'core-surface-coverup-translucent-dark': '#0000007a',
+    'core-surface-overlay-translucent-light': '#ffffffcc',
+    'core-surface-overlay-translucent-dark': '#1f262dcc',
+    'surface-primary-tint-light': '#fcfcfc',
+    'surface-primary-tint-dark': '#191e24',
+    'scroll-bar-light': '#e3e8ef',
+    'scroll-bar-dark': 'rgba(255, 255, 255, 0.1)',
+    'scroll-bar-hover-light': '#cdd5df',
+    'scroll-bar-hover-dark': 'rgba(255, 255, 255, 0.15)',
+    'surface-shadow-soft-light': '0px 4px 24px #0339491a',
+    'surface-shadow-soft-dark': '0px 4px 24px #0000007a',
+    'surface-shadow-strong-light': '0px 4px 64px #0339491a',
+    'surface-shadow-strong-dark': '0px 4px 64px #0000007a',
+};
+const light = {
+    'array-land': coreColors['brand-land-100'],
+    'array-land-label': coreColors['brand-land-600'],
+    'array-magenta': coreColors['brand-magenta-100'],
+    'array-magenta-label': coreColors['brand-magenta-600'],
+    'array-orange': coreColors['brand-orange-100'],
+    'array-orange-label': coreColors['brand-orange-600'],
+    'array-purple': coreColors['brand-purple-100'],
+    'array-purple-label': coreColors['brand-purple-600'],
+    'array-sea': coreColors['brand-sea-100'],
+    'array-sea-label': coreColors['brand-sea-600'],
+    'array-sky': coreColors['brand-sky-100'],
+    'array-sky-label': coreColors['brand-sky-600'],
+    'array-yellow': coreColors['brand-yellow-100'],
+    'array-yellow-label': coreColors['brand-yellow-600'],
+    'core-badge-primary': coreColors['brand-sea-500'],
+    'core-badge-secondary': coreColors['brand-grey-100'],
+    'core-button-disabled': coreColors['brand-grey-50'],
+    'core-button-primary': coreColors['brand-sea-500'],
+    'core-drop-shadow': coreColors['core-drop-shadow-light'],
+    'core-gp-logo-primary': coreColors['brand-sea-700'],
+    'core-gp-logo-secondary': coreColors['brand-grey-950'],
+    'core-icon-dark': coreColors['brand-grey-950'],
+    'core-icon-disabled': coreColors['brand-grey-300'],
+    'core-icon-error': coreColors['product-red-500'],
+    'core-icon-light': coreColors['brand-white-0'],
+    'core-icon-primary': coreColors['brand-grey-950'],
+    'core-icon-secondary': coreColors['brand-grey-700'],
+    'core-icon-tertiary': coreColors['brand-sea-500'],
+    'core-outline-secondary': coreColors['brand-grey-100'],
+    'core-outline-primary': coreColors['brand-grey-100'],
+    'core-outline-special': coreColors['brand-sea-100'],
+    'core-outline-tertiary': coreColors['brand-sea-500'],
+    'core-surface-coverup-translucent': coreColors['core-surface-coverup-translucent-light'],
+    'core-surface-overlay-translucent': coreColors['core-surface-overlay-translucent-light'],
+    'core-surface-primary': coreColors['brand-white-0'],
+    'core-surface-primary-tint': coreColors['surface-primary-tint-light'],
+    'core-surface-secondary': coreColors['brand-grey-50'],
+    'core-surface-special': coreColors['brand-sea-50'],
+    'core-text-dark': coreColors['brand-grey-950'],
+    'core-text-disabled': coreColors['brand-grey-300'],
+    'core-text-error': coreColors['product-red-500'],
+    'core-text-light': coreColors['brand-white-0'],
+    'core-text-primary': coreColors['brand-grey-950'],
+    'core-text-secondary': coreColors['brand-grey-700'],
+    'core-text-tertiary': coreColors['brand-grey-600'],
+    'core-text-special': coreColors['brand-sea-500'],
+    'core-text-accent': coreColors['brand-sky-500'],
+    'core-link-primary': coreColors['brand-sea-500'],
+    'eor-tag-employee': coreColors['brand-sky-700'],
+    'eor-tag-overdue': coreColors['product-red-500'],
+    'eor-tag-paid': coreColors['brand-land-700'],
+    'eor-tag-pending': coreColors['brand-orange-500'],
+    'eor-tag-professional': coreColors['brand-sea-500'],
+    'feedback-attention': coreColors['brand-yellow-500'],
+    'feedback-informative': coreColors['brand-sky-700'],
+    'feedback-positive': coreColors['brand-land-700'],
+    'feedback-urgency': coreColors['brand-orange-500'],
+    'feedback-warning': coreColors['product-red-500'],
+    'gia-tag-risk-high': coreColors['product-red-500'],
+    'gia-tag-risk-low': coreColors['brand-sky-700'],
+    'gia-tag-risk-moderate': coreColors['brand-orange-500'],
+    'gia-text-excerpt-highlight': coreColors['brand-orange-100'],
+    'gia-text-selection': coreColors['brand-sea-100'],
+    'scroll-bar': coreColors['scroll-bar-light'],
+    'scroll-bar-hover': coreColors['scroll-bar-hover-light'],
+    'surface-shadow-soft': coreColors['surface-shadow-soft-light'],
+    'surface-shadow-strong': coreColors['surface-shadow-strong-light'],
+};
+const dark = {
+    'array-land': coreColors['brand-land-100'],
+    'array-land-label': coreColors['brand-land-600'],
+    'array-magenta': coreColors['brand-magenta-100'],
+    'array-magenta-label': coreColors['brand-magenta-600'],
+    'array-orange': coreColors['brand-orange-100'],
+    'array-orange-label': coreColors['brand-orange-600'],
+    'array-purple': coreColors['brand-purple-100'],
+    'array-purple-label': coreColors['brand-purple-600'],
+    'array-sea': coreColors['brand-sea-100'],
+    'array-sea-label': coreColors['brand-sea-600'],
+    'array-sky': coreColors['brand-sky-100'],
+    'array-sky-label': coreColors['brand-sky-600'],
+    'array-yellow': coreColors['brand-yellow-100'],
+    'array-yellow-label': coreColors['brand-yellow-600'],
+    'core-badge-primary': coreColors['brand-sea-500'],
+    'core-badge-secondary': coreColors['brand-grey-700'],
+    'core-button-disabled': coreColors['brand-grey-900'],
+    'core-button-primary': coreColors['brand-sea-500'],
+    'core-drop-shadow': coreColors['core-drop-shadow-dark'],
+    'core-gp-logo-primary': coreColors['brand-sea-500'],
+    'core-gp-logo-secondary': coreColors['brand-white-0'],
+    'core-icon-dark': coreColors['brand-grey-950'],
+    'core-icon-disabled': coreColors['brand-grey-500'],
+    'core-icon-error': coreColors['product-red-400'],
+    'core-icon-light': coreColors['brand-white-0'],
+    'core-icon-primary': coreColors['brand-white-0'],
+    'core-icon-secondary': coreColors['brand-grey-200'],
+    'core-icon-tertiary': coreColors['brand-sky-300'],
+    'core-outline-secondary': coreColors['brand-grey-900'],
+    'core-outline-primary': coreColors['brand-grey-700'],
+    'core-outline-special': coreColors['brand-sky-900'],
+    'core-outline-tertiary': coreColors['brand-sky-300'],
+    'core-surface-coverup-translucent': coreColors['core-surface-coverup-translucent-dark'],
+    'core-surface-overlay-translucent': coreColors['core-surface-overlay-translucent-dark'],
+    'core-surface-primary': coreColors['brand-grey-950'],
+    'core-surface-primary-tint': coreColors['surface-primary-tint-dark'],
+    'core-surface-secondary': coreColors['brand-grey-900'],
+    'core-surface-special': coreColors['brand-sky-950'],
+    'core-text-dark': coreColors['brand-grey-950'],
+    'core-text-disabled': coreColors['brand-grey-500'],
+    'core-text-error': coreColors['product-red-400'],
+    'core-text-light': coreColors['brand-white-0'],
+    'core-text-primary': coreColors['brand-white-0'],
+    'core-text-secondary': coreColors['brand-grey-200'],
+    'core-text-tertiary': coreColors['brand-grey-400'],
+    'core-text-special': coreColors['brand-sky-300'],
+    'core-text-accent': coreColors['brand-sky-300'],
+    'core-link-primary': coreColors['brand-sky-300'],
+    'eor-tag-employee': coreColors['brand-sky-700'],
+    'eor-tag-overdue': coreColors['product-red-400'],
+    'eor-tag-paid': coreColors['brand-land-700'],
+    'eor-tag-pending': coreColors['brand-orange-500'],
+    'eor-tag-professional': coreColors['brand-sea-500'],
+    'feedback-attention': coreColors['brand-yellow-400'],
+    'feedback-informative': coreColors['brand-sky-600'],
+    'feedback-positive': coreColors['brand-land-700'],
+    'feedback-urgency': coreColors['brand-orange-500'],
+    'feedback-warning': coreColors['product-red-400'],
+    'gia-tag-risk-high': coreColors['product-red-400'],
+    'gia-tag-risk-low': coreColors['brand-sky-600'],
+    'gia-tag-risk-moderate': coreColors['brand-orange-500'],
+    'gia-text-excerpt-highlight': coreColors['brand-orange-100'],
+    'gia-text-selection': coreColors['brand-sea-900'],
+    'scroll-bar': coreColors['scroll-bar-dark'],
+    'scroll-bar-hover': coreColors['scroll-bar-hover-dark'],
+    'surface-shadow-soft': coreColors['surface-shadow-soft-dark'],
+    'surface-shadow-strong': coreColors['surface-shadow-strong-dark'],
+};
+
+export { coreColors, dark, light };

package/dist/esm/src/theme/corners/corners.mjs

@@ -0,0 +1,12 @@
+const corners = {
+    'corner-none': 0,
+    'corner-xs': 4,
+    'corner-s': 6,
+    'corner-m': 8,
+    'corner-l': 12,
+    'corner-xl': 16,
+    'corner-xxl': 32,
+    'corner-round': 1000,
+};
+
+export { corners };

package/dist/esm/src/theme/elevations/elevations.mjs

@@ -0,0 +1,15 @@
+/**
+ * Elevation levels for UI component types
+ */
+const elevations = {
+    'elevation-below-surface': -100, // items hidden from view
+    'elevation-surface': 0, // default
+    'elevation-float': 100, // toolbars, fab buttons, etc.
+    'elevation-describe': 200, // tooltips, info, etc.
+    'elevation-status': 300, // status bars, toasts, etc.
+    'elevation-notify': 400, // alerts, and other critical status, etc.
+    'elevation-overlay': 500, // overlay covers, etc.
+    'elevation-confirm': 600, // conformation dialogs, etc. requiring action to dismiss
+};
+
+export { elevations };

package/dist/esm/src/theme/motion/motion.mjs

@@ -0,0 +1,13 @@
+/**
+ * Motion for Slice UI
+ */
+const motion = {
+    'motion-magnet': 'cubic-bezier(0.352, 0.003, 0.993, -0.052)',
+    'motion-water': 'cubic-bezier(0.36, 0, 0.64, 1)',
+    'motion-spring': 'linear(0, 0.001 0.3%, 0.008 0.7%, 0.034 1.5%, 0.076 2.3%, 0.138 3.2%, 0.275 4.8%, 0.713 9.4%, 0.836 10.9%, 0.933 12.3%, 1.011 13.7%, 1.074 15.2%, 1.096 15.9%, 1.116 16.7%, 1.132 17.5%, 1.142 18.3%, 1.148 19.1%, 1.15 20%, 1.148 21%, 1.142 22%, 1.133 22.9%, 1.12 24%, 1.048 29.1%, 1.015 31.8%, 1.002 33.3%, 0.991 34.9%, 0.983 36.5%, 0.979 38.1%, 0.977 39.9%, 0.979 42%, 0.997 51.7%, 1.003 57.7%, 1 77%, 1)',
+    'motion-magnet-duration': '0.5s',
+    'motion-water-duration': '0.25s',
+    'motion-spring-duration': '1s',
+};
+
+export { motion };

package/dist/esm/src/theme/motion.mjs

@@ -0,0 +1,45 @@
+/** Convert Slice's explicit CSS curves without importing the React Native runtime. */
+function easing(css) {
+    if (css.startsWith('cubic-bezier(')) {
+        const [x1, y1, x2, y2] = css.slice(13, -1).split(',').map(Number);
+        const sample = (t, a, b) => 3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t ** 2 * b + t ** 3;
+        return (progress) => {
+            if (progress <= 0)
+                return 0;
+            if (progress >= 1)
+                return 1;
+            let low = 0;
+            let high = 1;
+            for (let i = 0; i < 30; i++) {
+                const middle = (low + high) / 2;
+                if (sample(middle, x1, x2) < progress)
+                    low = middle;
+                else
+                    high = middle;
+            }
+            return sample((low + high) / 2, y1, y2);
+        };
+    }
+    if (!css.startsWith('linear('))
+        throw new Error(`Unsupported Slice easing: ${css}`);
+    const points = css
+        .slice(7, -1)
+        .split(',')
+        .map((entry, index, entries) => {
+        const [value, percent] = entry.trim().split(/\s+/).map(Number.parseFloat);
+        return { value, position: percent === undefined ? index / (entries.length - 1) : percent / 100 };
+    });
+    return (progress) => {
+        if (progress <= 0)
+            return points[0].value;
+        for (let i = 1; i < points.length; i++) {
+            const left = points[i - 1];
+            const right = points[i];
+            if (progress <= right.position)
+                return (left.value + ((right.value - left.value) * (progress - left.position)) / (right.position - left.position));
+        }
+        return points[points.length - 1].value;
+    };
+}
+
+export { easing };

package/dist/esm/src/theme/spacing/spacing.mjs

@@ -0,0 +1,12 @@
+const spacing = {
+    xxs: 2,
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 64,
+    h: 128,
+};
+
+export { spacing };