@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/themes/GlobalStyle.ts

@@ -0,0 +1,273 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { CustomGlobalStyleInterface } from './types';
+
+export const constantGlobalStyle = `
+    --neutral-0:   #FFFFFF;
+    --neutral-100: #F6F7F9;
+    --neutral-200: #EDEFF3;
+    --neutral-300: #E1E5EA;
+    --neutral-400: #C9CFD9;
+    --neutral-500: #B2B9C7;
+    --neutral-600: #8C95A6;
+    --neutral-700: #5B6271;
+    --neutral-750: #30363D;
+    --neutral-800: #23282F;
+    --neutral-900: #16191D;
+    --neutral-1000: #0B0C0E;
+
+    --brand-0:   #E5F1FF;
+    --brand-100: #C2DDFF;
+    --brand-200: #94C4FF;
+    --brand-300: #61A8FF;
+    --brand-400: #2989FF;
+    --brand-500: #0673F9;
+    --brand-600: #005ED1;
+    --brand-700: #004599;
+    --brand-800: #003270;
+    --brand-900: #002452;
+
+    --error-0:   #FFE5E7;
+    --error-100: #FBBBBF;
+    --error-200: #FA9499;
+    --error-300: #F8636B;
+    --error-400: #EE3F44;
+    --error-500: #D22D3A;
+    --error-600: #A01B22;
+    --error-700: #7E1219;
+    --error-800: #63080D;
+    --error-900: #4A040A;
+
+    --success-0: #D9FCED;
+    --success-100: #ACF7D3;
+    --success-200: #7EE7B8;
+    --success-300: #50CE99;
+    --success-400: #13B97C;
+    --success-500: #009965;
+    --success-600: #007A51;
+    --success-700: #005C3D;
+    --success-800: #003D29;
+    --success-900: #002D1E;
+
+    --warning-0: #FFF1E5;
+    --warning-100: #FFD2BA;
+    --warning-200: #FFB286;
+    --warning-300: #FD9254;
+    --warning-400: #F37216;
+    --warning-500: #DE5A02;
+    --warning-600: #A83E00;
+    --warning-700: #802D00;
+    --warning-800: #5C1F00;
+    --warning-900: #441704;
+
+    --yellow-0: #FFF3D6;
+    --yellow-100: #FFE4AD;
+    --yellow-200: #FFD580;
+    --yellow-300: #FEC553;
+    --yellow-400: #FEB000;
+    --yellow-500: #F59700;
+    --yellow-600: #D17300;
+    --yellow-700: #944500;
+    --yellow-800: #5C2900;
+    --yellow-900: #3D1A00;
+
+    --purple-0: #F5E5FF;
+    --purple-100: #E1D1FF;
+    --purple-200: #CEBCFE;
+    --purple-300: #B49DFE;
+    --purple-400: #967CFD;
+    --purple-500: #7B55EE;
+    --purple-600: #6138D3;
+    --purple-700: #46279B;
+    --purple-800: #331D72;
+    --purple-900: #221056;
+
+    --alpha-20: rgba(255, 255, 255, 0.20);
+    --alpha-12: rgba(255, 255, 255, 0.12);
+    --alpha-80: rgba(255, 255, 255, 0.80);
+    --alpha-overlay: rgba(22, 25, 29, 0.80);
+
+    --spacing-0px: 0px;
+    --spacing-1px: 1px;
+    --spacing-2px: 2px;
+    --spacing-3px: 3px;
+    --spacing-4px: 4px;
+    --spacing-5px: 5px;
+    --spacing-6px: 6px;
+    --spacing-7px: 7px;
+    --spacing-8px: 8px;
+    --spacing-9px: 9px;
+    --spacing-10px: 10px;
+    --spacing-12px: 12px;
+    --spacing-14px: 14px;
+    --spacing-16px: 16px;
+    --spacing-18px: 18px;
+    --spacing-20px: 20px;
+    --spacing-24px: 24px;
+    --spacing-28px: 28px;
+    --spacing-32px: 32px;
+    --spacing-36px: 36px;
+    --spacing-40px: 40px;
+    --spacing-48px: 48px;
+    --spacing-56px: 56px;
+    --spacing-64px: 64px;
+    --spacing-72px: 72px;
+    --spacing-80px: 80px;
+    --spacing-128px: 128px;
+    --spacing-160px: 160px;
+
+    --corner-radius-0px: 0px;
+    --corner-radius-2px: 2px;
+    --corner-radius-4px: 4px;
+    --corner-radius-8px: 8px;
+    --corner-radius-12px: 12px;
+    --corner-radius-16px: 16px;
+    --corner-radius-20px: 20px;
+    --corner-radius-24px: 24px;
+    --corner-radius-32px: 32px;
+    --corner-radius-40px: 40px;
+    --corner-radius-50percent: 50%;
+    --corner-radius-100percent: 100%;
+
+    --font-size-2px: 2px;
+    --font-size-4px: 4px;
+    --font-size-6px: 6px;
+    --font-size-8px: 8px;
+    --font-size-10px: 10px;
+    --font-size-11px: 11px;
+    --font-size-12px: 12px;
+    --font-size-14px: 14px;
+    --font-size-16px: 16px;
+    --font-size-18px: 18px;
+    --font-size-20px: 20px;
+    --font-size-24px: 24px;
+    --font-size-28px: 28px;
+    --font-size-32px: 32px;
+    --font-size-36px: 36px;
+    --font-size-40px: 40px;
+    --font-size-48px: 48px;
+    --font-size-56px: 56px;
+    --font-size-64px: 64px;
+    --font-size-72px: 72px;
+    --font-size-80px: 80px;
+    --font-size-96px: 96px;
+
+    --font-weight-100: 100;
+    --font-weight-200: 200;
+    --font-weight-300: 300;
+    --font-weight-400: 400;
+    --font-weight-450: 450;
+    --font-weight-500: 500;
+    --font-weight-550: 550;
+    --font-weight-600: 600;
+    --font-weight-650: 650;
+    --font-weight-700: 700;
+    --font-weight-800: 800;
+    --font-weight-900: 900;
+
+    --font-weight-medium: var(--font-weight-500);
+    --font-weight-semibold: var(--font-weight-600);
+    --font-weight-bold: var(--font-weight-700);
+
+    --backdrop-blur-0: blur(0px);
+    --backdrop-blur-4px: blur(4px);
+    --backdrop-blur-8px: blur(8px);
+    --backdrop-blur-12px: blur(12px);
+    --backdrop-blur-16px: blur(16px);
+    --backdrop-blur-20px: blur(20px);
+
+    --backdrop-blur: var(--backdrop-blur-8px);
+`;
+
+const GlobalStyle = createGlobalStyle<CustomGlobalStyleInterface>`
+    :root {
+        ${constantGlobalStyle}
+
+        // Custom tokens to handle colors based on theme
+        // Text Colors
+        --text-primary: ${(props) => props.theme.colors.text.textPrimary};
+        --text-secondary: ${(props) => props.theme.colors.text.textSecondary};
+        --text-disabled: ${(props) => props.theme.colors.text.textDisabled};
+        --text-action: ${(props) => props.theme.colors.text.textAction};
+        --text-action2: ${(props) => props.theme.colors.text.textAction2};
+        --text-brand: ${(props) => props.theme.colors.text.textBrand};
+        --text-success: ${(props) => props.theme.colors.text.textSuccess};
+        --text-error: ${(props) => props.theme.colors.text.textError};
+        --text-warning: ${(props) => props.theme.colors.text.textWarning};
+        --text-yellow: ${(props) => props.theme.colors.text.textYellow};
+        --text-purple: ${(props) => props.theme.colors.text.textPurple};
+
+        // Background Colors
+        --bg-primary: ${(props) => props.theme.colors.background.bgPrimary};
+        --bg-secondary: ${(props) => props.theme.colors.background.bgSecondary};
+        --bg-tertiary: ${(props) => props.theme.colors.background.bgTertiary};
+        --bg-brand: ${(props) => props.theme.colors.background.bgBrand};
+        --bg-success: ${(props) => props.theme.colors.background.bgSuccess};
+        --bg-error: ${(props) => props.theme.colors.background.bgError};
+        --bg-warning: ${(props) => props.theme.colors.background.bgWarning};
+        --bg-yellow: ${(props) => props.theme.colors.background.bgYellow};
+        --bg-purple: ${(props) => props.theme.colors.background.bgPurple};
+        --bg-disabled: ${(props) => props.theme.colors.background.bgDisabled};
+
+        --bg-action-brand: ${(props) =>
+        props.theme.colors.background.bgActionBrand};
+        --bg-action-success: ${(props) =>
+        props.theme.colors.background.bgActionSuccess};
+        --bg-action-error: ${(props) =>
+        props.theme.colors.background.bgActionError};
+        --bg-action-warning: ${(props) =>
+        props.theme.colors.background.bgActionWarning};
+        --bg-action-yellow: ${(props) =>
+        props.theme.colors.background.bgActionYellow};
+        --bg-action-purple: ${(props) =>
+        props.theme.colors.background.bgActionPurple};
+
+        --bg-invert-primary: ${(props) =>
+        props.theme.colors.background.bgInvertPrimary};
+        --bg-invert-secondary: ${(props) =>
+        props.theme.colors.background.bgInvertSecondary};
+        --bg-invert-tertiary: ${(props) =>
+        props.theme.colors.background.bgInvertTertiary};
+
+        --bg-primary-hover: ${(props) =>
+        props.theme.colors.background.bgPrimaryHover};
+        --bg-invert-primary-hover: ${(props) =>
+        props.theme.colors.background.bgInvertPrimaryHover};
+        --bg-action-brand-hover: ${(props) =>
+        props.theme.colors.background.bgActionBrandHover};
+        --bg-action-success-hover: ${(props) =>
+        props.theme.colors.background.bgActionSuccessHover};
+        --bg-action-error-hover: ${(props) =>
+        props.theme.colors.background.bgActionErrorHover};
+        --bg-action-warning-hover: ${(props) =>
+        props.theme.colors.background.bgActionWarningHover};
+        --bg-action-yellow-hover: ${(props) =>
+        props.theme.colors.background.bgActionYellowHover};
+
+        // Alpha Colors
+        --alpha-hover: ${(props) => props.theme.colors.alpha.alphaHover};
+        --alpha-pressed: ${(props) => props.theme.colors.alpha.alphaPressed};
+        /* --alpha-overlay: ${(props) =>
+        props.theme.colors.alpha.alphaOverlay}; */
+
+        // Border Colors
+        --border: ${(props) => props.theme.colors.border.border};
+        --border-brand: ${(props) => props.theme.colors.border.borderBrand};
+        --border-success: ${(props) => props.theme.colors.border.borderSuccess};
+        --border-error: ${(props) => props.theme.colors.border.borderError};
+        --border-warning: ${(props) => props.theme.colors.border.borderWarning};
+        --border-yellow: ${(props) => props.theme.colors.border.borderYellow};
+        --border-purple: ${(props) => props.theme.colors.border.borderPurple};
+        --border-neutral: ${(props) => props.theme.colors.border.borderNeutral};
+
+        // Font
+        --font-family: ${(props) => props.theme.font.fontFamily};
+        --font-family-code: ${(props) => props.theme.font.fontFamilyCode};
+
+        // Custom tokens to handle visibility based on state
+        --light-visible: ${(props) => props.theme.visibility.lightVisible};
+        --dark-visible: ${(props) => props.theme.visibility.darkVisible};
+    }
+`;
+
+export default GlobalStyle;

package/ui/themes/ThemeContext.tsx

@@ -0,0 +1,140 @@
+import PropTypes from 'prop-types';
+import React, {
+    createContext,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import THEME from './constants';
+import DARK_THEME_OBJ from './darkThemeConstants';
+import GlobalStyle from './GlobalStyle';
+import LIGHT_THEME_OBJ from './lightThemeConstants';
+import { ThemeType } from './types';
+
+const ThemeContext = createContext(null);
+
+interface ThemeWrapperProps {
+    children: React.ReactNode;
+    defaultTheme?: ThemeType;
+    usePreferredColorScheme?: boolean;
+}
+
+const ThemeWrapper = ({
+    children,
+    defaultTheme = THEME.LIGHT,
+    usePreferredColorScheme = false,
+}: ThemeWrapperProps) => {
+    const [theme, setTheme] = useState({
+        themeName: defaultTheme,
+    });
+
+    const [isThemeEnabled, setIsThemeEnabled] = useState(true);
+
+    const handleToggleTheme = useCallback(
+        (themeName: ThemeType) => {
+            setTheme((oldTheme) =>
+                themeName === THEME.LIGHT
+                    ? { ...oldTheme, themeName: THEME.LIGHT }
+                    : { ...oldTheme, themeName: THEME.DARK }
+            );
+        },
+        [setTheme]
+    );
+
+    const value = useMemo(
+        () => ({
+            theme: {
+                ...theme,
+                themeColors:
+                    theme?.themeName === THEME.LIGHT
+                        ? LIGHT_THEME_OBJ
+                        : DARK_THEME_OBJ,
+            },
+            handleToggleTheme,
+            setIsThemeEnabled,
+        }),
+        [theme, handleToggleTheme, theme?.themeName, isThemeEnabled]
+    );
+
+    const defaultValue = useMemo(
+        () => ({
+            theme: {
+                themeName: defaultTheme,
+                themeColors:
+                    defaultTheme === THEME.LIGHT
+                        ? LIGHT_THEME_OBJ
+                        : DARK_THEME_OBJ,
+            },
+            handleToggleTheme,
+            setIsThemeEnabled,
+        }),
+        [defaultTheme]
+    );
+
+    useEffect(() => {
+        if ([THEME.LIGHT, THEME.DARK].includes(defaultTheme)) {
+            setTheme({ themeName: defaultTheme });
+        }
+    }, [defaultTheme]);
+
+    // Check if the user has dark mode enabled system-wide
+    useEffect(() => {
+        let mq: MediaQueryList;
+        if (usePreferredColorScheme) {
+            mq = window.matchMedia('(prefers-color-scheme: dark)');
+            const prefersDarkColorScheme = mq.matches;
+            if (prefersDarkColorScheme) {
+                setTheme({ themeName: THEME.DARK });
+            }
+
+            mq.addEventListener('change', (evt) =>
+                setTheme({ themeName: evt.matches ? THEME.DARK : THEME.LIGHT })
+            );
+        }
+
+        return () => {
+            if (usePreferredColorScheme) {
+                mq.removeEventListener('change', (evt) =>
+                    setTheme({
+                        themeName: evt.matches ? THEME.DARK : THEME.LIGHT,
+                    })
+                );
+            }
+        };
+    }, []);
+
+    return (
+        <ThemeContext.Provider value={isThemeEnabled ? value : defaultValue}>
+            <ThemeProvider
+                theme={
+                    isThemeEnabled
+                        ? { ...value.theme.themeColors }
+                        : { ...defaultValue.theme.themeColors }
+                }
+            >
+                <>
+                    <GlobalStyle />
+                    {children}
+                </>
+            </ThemeProvider>
+        </ThemeContext.Provider>
+    );
+};
+
+ThemeWrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+    defaultTheme: PropTypes.oneOf([THEME.LIGHT, THEME.DARK]),
+    usePreferredColorScheme: PropTypes.bool,
+};
+
+ThemeWrapper.defaultProps = {
+    defaultTheme: THEME.LIGHT,
+    usePreferredColorScheme: false,
+};
+
+const ThemeConsumer = ThemeContext.Consumer;
+
+export { ThemeConsumer, ThemeContext, ThemeWrapper };

package/ui/themes/constants.ts

@@ -0,0 +1,8 @@
+import { ThemeType } from './types';
+
+const THEMES: { [x: string]: ThemeType } = {
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+export default THEMES;

package/ui/themes/darkThemeConstants.ts

@@ -0,0 +1,73 @@
+const DARK_THEME_CONFIG = {
+    colors: {
+        text: {
+            textPrimary: 'var(--neutral-0, #ffffff)',
+            textSecondary: 'var(--neutral-600, #b2b9c7)',
+            textDisabled: 'var(--neutral-700, #5b6271)',
+            textAction: 'var(--neutral-0, #ffffff)',
+            textAction2: 'var(--neutral-900, #16191D)',
+            textBrand: 'var(--brand-300, #0673f9)',
+            textSuccess: 'var(--success-300, #13b97c)',
+            textError: 'var(--error-300, #ee3f44)',
+            textWarning: 'var(--warning-300, #f37216)',
+            textYellow: 'var(--yellow-300, #f59700)',
+            textPurple: 'var(--purple-300, #b49dfe)',
+        },
+        background: {
+            bgPrimary: 'var(--neutral-1000, #0b0c0e)',
+            bgSecondary: 'var(--neutral-900, #16191d)',
+            bgTertiary: 'var(--neutral-800, #23282f)',
+            bgBrand: 'var(--brand-900, #002452)',
+            bgSuccess: 'var(--success-800, #003d29)',
+            bgError: 'var(--error-900, #4a040a)',
+            bgWarning: 'var(--warning-900, #441704)',
+            bgYellow: 'var(--yellow-900, #3d1a00)',
+            bgPurple: 'var(--purple-800, #331d72)',
+            bgDisabled: 'var(--neutral-800, #23282F)',
+
+            bgActionBrand: 'var(--brand-500, #0673f9)',
+            bgActionSuccess: 'var(--success-500, #009965)',
+            bgActionError: 'var(--error-500, #d22d3a)',
+            bgActionWarning: 'var(--warning-400, #f37216)',
+            bgActionYellow: 'var(--yellow-400, #f59700)',
+            bgActionPurple: 'var(--purple-600, #6138d3)',
+
+            bgInvertPrimary: 'var(--neutral-0, #ffffff)',
+            bgInvertSecondary: 'var(--neutral-100, #F6F7F9)',
+            bgInvertTertiary: 'var(--neutral-200, #edeff3)',
+
+            bgPrimaryHover: 'var(--neutral-900, #16191D)',
+            bgInvertPrimaryHover: 'var(--neutral-100, #F6F7F9)',
+            bgActionBrandHover: 'var(--brand-400, #2989FF)',
+            bgActionSuccessHover: 'var(--success-400, #13B97C)',
+            bgActionErrorHover: 'var(--error-400, #EE3F44)',
+            bgActionWarningHover: 'var(--warning-300, #FD9254)',
+            bgActionYellowHover: 'var(--yellow-400, #F37216)',
+        },
+        border: {
+            border: 'var(--neutral-750, #30363d)',
+            borderBrand: 'var(--brand-800, #003270)',
+            borderSuccess: 'var(--success-700, #005c3d)',
+            borderError: 'var(--error-800, #63080d)',
+            borderWarning: 'var(--warning-700, #802d00)',
+            borderYellow: 'var(--yellow-800, #5c2900)',
+            borderPurple: 'var(--purple-700, #46279b)',
+            borderNeutral: 'var(--neutral-800, #23282F)',
+        },
+        alpha: {
+            alphaHover: 'var(--alpha-20, rgba(255, 255, 255, 0.20))',
+            alphaPressed: 'var(--alpha-12, rgba(255, 255, 255, 0.12))',
+            alphaOverlay: 'var(--alpha-overlay, rgba(22, 25, 29, 0.80))',
+        },
+    },
+    visibility: {
+        lightVisible: 'none',
+        darkVisible: 'block',
+    },
+    font: {
+        fontFamily: '"Mona Sans", sans-serif',
+        fontFamilyCode: '"Fira Code", monospace',
+    },
+};
+
+export default DARK_THEME_CONFIG;

package/ui/themes/lightThemeConstants.ts

@@ -0,0 +1,73 @@
+const LIGHT_THEME_CONFIG = {
+    colors: {
+        text: {
+            textPrimary: 'var(--neutral-900, #16191D)',
+            textSecondary: 'var(--neutral-700, #5B6271)',
+            textDisabled: 'var(--neutral-600, #8C95A6)',
+            textAction: 'var(--neutral-0, #FFFFFF)',
+            textAction2: 'var(--neutral-0, #FFFFFF)',
+            textBrand: 'var(--brand-500, #0673F9)',
+            textSuccess: 'var(--success-600, #007A51)',
+            textError: 'var(--error-500, #D22D3A)',
+            textWarning: 'var(--warning-500, #DE5A02)',
+            textYellow: 'var(--yellow-500, #F59700)',
+            textPurple: 'var(--purple-500, #7B55EE)',
+        },
+        background: {
+            bgPrimary: 'var(--neutral-0, #FFFFFF)',
+            bgSecondary: 'var(--neutral-100, #F6F7F9)',
+            bgTertiary: 'var(--neutral-200, #EDEFF3)',
+            bgBrand: 'var(--brand-0, #E5F1FF)',
+            bgSuccess: 'var(--success-0, #D9FCED)',
+            bgError: 'var(--error-0, #FFE5E7)',
+            bgWarning: 'var(--warning-0, #FFF1E5)',
+            bgYellow: 'var(--yellow-0, #FFF3D6)',
+            bgPurple: 'var(--purple-0, #F5E5FF)',
+            bgDisabled: 'var(--neutral-200, #EDEFF3)',
+
+            bgActionBrand: 'var(--brand-500, #0673f9)',
+            bgActionSuccess: 'var(--success-500, #009965)',
+            bgActionError: 'var(--error-500, #d22d3a)',
+            bgActionWarning: 'var(--warning-400, #f37216)',
+            bgActionYellow: 'var(--yellow-400, #f59700)',
+            bgActionPurple: 'var(--purple-600, #6138d3)',
+
+            bgInvertPrimary: 'var(--neutral-1000, #0B0C0E)',
+            bgInvertSecondary: 'var(--neutral-900, #16191D)',
+            bgInvertTertiary: 'var(--neutral-800, #23282F)',
+
+            bgPrimaryHover: 'var(--neutral-100, #F6F7F9)',
+            bgInvertPrimaryHover: 'var(--neutral-900, #16191D)',
+            bgActionBrandHover: 'var(--brand-400, #2989FF)',
+            bgActionSuccessHover: 'var(--success-400, #13B97C)',
+            bgActionErrorHover: 'var(--error-400, #EE3F44)',
+            bgActionWarningHover: 'var(--warning-300, #FD9254)',
+            bgActionYellowHover: 'var(--yellow-400, #F37216)',
+        },
+        border: {
+            border: 'var(--neutral-300, #E1E5EA)',
+            borderBrand: 'var(--brand-200, #94C4FF)',
+            borderSuccess: 'var(--success-100, #ACF7D3)',
+            borderError: 'var(--error-100, #FBBBBF)',
+            borderWarning: 'var(--warning-100, #FFD2BA)',
+            borderYellow: 'var(--yellow-100, #FFD580)',
+            borderPurple: 'var(--purple-100, #CEBCFE)',
+            borderNeutral: 'var(--neutral-300, #E1E5EA)',
+        },
+        alpha: {
+            alphaHover: 'var(--alpha-20, rgba(255, 255, 255, 0.20))',
+            alphaPressed: 'var(--alpha-12, rgba(255, 255, 255, 0.12))',
+            alphaOverlay: 'var(--alpha-overlay, rgba(22, 25, 29, 0.80))',
+        },
+    },
+    visibility: {
+        lightVisible: 'none',
+        darkVisible: 'block',
+    },
+    font: {
+        fontFamily: '"Mona Sans", sans-serif',
+        fontFamilyCode: '"Fira Code", monospace',
+    },
+};
+
+export default LIGHT_THEME_CONFIG;

package/ui/themes/types.ts

@@ -0,0 +1,77 @@
+import { DefaultTheme } from 'styled-components';
+
+export type ThemeType = 'light' | 'dark';
+
+export interface CustomGlobalStyleInterface extends DefaultTheme {
+    theme: {
+        colors: {
+            text: {
+                textPrimary: string;
+                textSecondary: string;
+                textDisabled: string;
+                textAction: string;
+                textAction2: string;
+                textBrand: string;
+                textSuccess: string;
+                textError: string;
+                textWarning: string;
+                textYellow: string;
+                textPurple: string;
+            };
+            background: {
+                bgPrimary: string;
+                bgSecondary: string;
+                bgTertiary: string;
+                bgBrand: string;
+                bgSuccess: string;
+                bgError: string;
+                bgWarning: string;
+                bgYellow: string;
+                bgPurple: string;
+                bgDisabled: string;
+
+                bgActionBrand: string;
+                bgActionSuccess: string;
+                bgActionError: string;
+                bgActionWarning: string;
+                bgActionYellow: string;
+                bgActionPurple: string;
+
+                bgInvertPrimary: string;
+                bgInvertSecondary: string;
+                bgInvertTertiary: string;
+
+                bgPrimaryHover: string;
+                bgInvertPrimaryHover: string;
+                bgActionBrandHover: string;
+                bgActionSuccessHover: string;
+                bgActionErrorHover: string;
+                bgActionWarningHover: string;
+                bgActionYellowHover: string;
+            };
+            alpha: {
+                alphaHover: string;
+                alphaPressed: string;
+                alphaOverlay: string;
+            };
+            border: {
+                border: string;
+                borderBrand: string;
+                borderSuccess: string;
+                borderError: string;
+                borderWarning: string;
+                borderYellow: string;
+                borderPurple: string;
+                borderNeutral: string;
+            };
+        };
+        visibility: {
+            lightVisible: string;
+            darkVisible: string;
+        };
+        font: {
+            fontFamily: string;
+            fontFamilyCode: string;
+        };
+    };
+}

package/dist/core/colors/colorTypes.d.ts

@@ -1,3 +0,0 @@
-export type grauityColorName = 'white' | 'black' | 'grey' | 'blue' | 'red' | 'green' | 'orange' | 'yellow' | 'purple';
-export type grauityIconColorName = 'white' | 'black' | 'grey' | 'blue' | 'red' | 'green' | 'orange' | 'yellow' | 'purple';
-//# sourceMappingURL=colorTypes.d.ts.map

package/dist/core/colors/colorTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colorTypes.d.ts","sourceRoot":"","sources":["../../../ui/core/colors/colorTypes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAC;AAEf,MAAM,MAAM,oBAAoB,GAC1B,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAC"}

package/dist/core/colors/index.d.ts

@@ -1,14 +0,0 @@
-export type { grauityColorName, grauityIconColorName } from './colorTypes';
-export declare enum GRAUITY_COLOR {
-    WHITE = "white",
-    BLACK = "black",
-    GREY = "grey",
-    BLUE = "blue",
-    RED = "red",
-    GREEN = "green",
-    ORANGE = "orange",
-    YELLOW = "yellow",
-    PURPLE = "purple"
-}
-export declare const GRAUITY_ICON_COLORS: GRAUITY_COLOR[];
-//# sourceMappingURL=index.d.ts.map

package/dist/core/colors/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../ui/core/colors/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE3E,oBAAY,aAAa;IACrB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;CACpB;AAED,eAAO,MAAM,mBAAmB,iBAU/B,CAAC"}

package/dist/core/icons/iconTags.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconTags.d.ts","sourceRoot":"","sources":["../../../ui/core/icons/iconTags.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8arB,CAAC;AACF,eAAO,MAAM,SAAS;;;;;;;;;;;CAoKrB,CAAC"}