squarex-ui-component-lib 1.0.4 → 1.0.5

package/src/tokens/themes/dark.ts

@@ -0,0 +1,311 @@
+/**
+ * Dark Theme
+ * Dark mode color scheme (inverted from light theme)
+ */
+
+import { colors, alphas } from '../core/colors';
+
+export const darkTheme = {
+  color: {
+    background: {
+      brand: {
+        default: colors.purple[400],
+        secondary: colors.purple[600],
+        tertiary: colors.purple[800],
+        hover: colors.purple[300],
+        secondaryHover: colors.purple[500],
+        tertiaryHover: colors.purple[700],
+        subtleLow: alphas.purple[100],
+        subtleMedium: alphas.purple[200],
+      },
+      action: {
+        default: colors.violet[400],
+        secondary: colors.violet[600],
+        tertiary: colors.violet[800],
+        hover: colors.violet[300],
+        secondaryHover: colors.violet[500],
+        tertiaryHover: colors.violet[700],
+        subtleLow: alphas.violet[100],
+        subtleMedium: alphas.violet[200],
+      },
+      success: {
+        default: colors.green[600],
+        secondary: colors.green[800],
+        tertiary: colors.green[950],
+        hover: colors.green[500],
+        secondaryHover: colors.green[700],
+        tertiaryHover: colors.green[800],
+        subtleLow: colors.green[900],
+        subtleMedium: colors.green[800],
+      },
+      warning: {
+        default: colors.yellow[600],
+        secondary: colors.yellow[800],
+        tertiary: colors.yellow[950],
+        hover: colors.yellow[500],
+        secondaryHover: colors.yellow[700],
+        tertiaryHover: colors.yellow[900],
+        subtleLow: colors.yellow[900],
+        subtleMedium: colors.yellow[800],
+      },
+      danger: {
+        default: colors.red[600],
+        secondary: colors.red[800],
+        tertiary: colors.red[950],
+        hover: colors.red[500],
+        secondaryHover: colors.red[700],
+        tertiaryHover: colors.red[900],
+        subtleLow: alphas.red[100],
+        subtleMedium: alphas.red[200],
+      },
+      info: {
+        default: colors.blue[600],
+        secondary: colors.blue[800],
+        tertiary: colors.blue[950],
+        hover: colors.blue[500],
+        secondaryHover: colors.blue[700],
+        tertiaryHover: colors.blue[900],
+        subtleLow: colors.blue[900],
+        subtleMedium: colors.blue[800],
+      },
+      neutral: {
+        default: colors.slate[600],
+        secondary: colors.slate[800],
+        tertiary: colors.slate[950],
+        hover: colors.slate[500],
+        secondaryHover: colors.slate[700],
+        tertiaryHover: colors.slate[900],
+        subtleLow: alphas.slate[100],
+        subtleMedium: alphas.slate[200],
+      },
+      default: {
+        default: colors.slate[950],
+        hover: colors.slate[900],
+        glass: alphas.black[300],
+        onGlass: alphas.black[600],
+        onGlassSecondary: alphas.black[700],
+        onGlassTertiary: alphas.black[800],
+        onGlassHover: alphas.black[800],
+      },
+      disabled: {
+        default: colors.gray[800],
+        secondary: colors.gray[900],
+      },
+      utilities: {
+        scrim: 'rgba(0, 0, 0, 0.7)',
+        overlay: 'rgba(255, 255, 255, 0.1)',
+        blanket: 'rgba(255, 255, 255, 0.15)',
+        bgOnGlass: 'rgba(0, 0, 0, 0.45)',
+        bgOnGlassOnGlass: 'rgba(0, 0, 0, 0.6)',
+        hoverOverlay: 'rgba(255, 255, 255, 0.1)',
+      },
+    },
+    text: {
+      default: {
+        default: colors.slate[50],
+        secondary: colors.slate[300],
+        tertiary: colors.slate[500],
+      },
+      brand: {
+        default: colors.purple[300],
+        secondary: colors.purple[400],
+        tertiary: colors.purple[600],
+        onBrand: colors.purple[950],
+        onBrandSecondary: colors.purple[200],
+        onBrandTertiary: colors.purple[300],
+      },
+      action: {
+        default: colors.violet[300],
+        secondary: colors.violet[400],
+        tertiary: colors.violet[600],
+        onAction: colors.violet[950],
+        onActionSecondary: colors.violet[200],
+        onActionTertiary: colors.violet[300],
+      },
+      success: {
+        default: colors.green[300],
+        secondary: colors.green[400],
+        tertiary: colors.green[500],
+        onSuccess: colors.green[950],
+        onSuccessSecondary: colors.green[200],
+        onSuccessTertiary: colors.green[300],
+      },
+      warning: {
+        default: colors.yellow[300],
+        secondary: colors.yellow[400],
+        tertiary: colors.yellow[500],
+        onWarning: colors.yellow[950],
+        onWarningSecondary: colors.yellow[200],
+        onWarningTertiary: colors.yellow[300],
+      },
+      danger: {
+        default: colors.red[400],
+        secondary: colors.red[500],
+        tertiary: colors.red[600],
+        onDanger: colors.red[950],
+        onDangerSecondary: colors.red[200],
+        onDangerTertiary: colors.red[300],
+      },
+      info: {
+        default: colors.blue[400],
+        secondary: colors.blue[500],
+        tertiary: colors.blue[600],
+        onInfo: colors.blue[950],
+        onInfoSecondary: colors.blue[200],
+        onInfoTertiary: colors.blue[300],
+      },
+      neutral: {
+        default: colors.slate[50],
+        secondary: colors.slate[300],
+        tertiary: colors.slate[500],
+        onNeutral: colors.slate[950],
+        onNeutralSecondary: colors.slate[200],
+        onNeutralTertiary: colors.slate[300],
+      },
+      disabled: {
+        default: colors.gray[600],
+        secondary: colors.gray[700],
+        onDisabled: colors.gray[400],
+        onDisabledSecondary: colors.gray[500],
+      },
+      utilities: {
+        onOverlay: alphas.white[800],
+      },
+    },
+    border: {
+      default: {
+        default: colors.slate[800],
+        secondary: colors.slate[700],
+        tertiary: colors.slate[500],
+        subtleLow: alphas.black[800],
+        subtleMedium: alphas.slate[200],
+        subtleHigh: alphas.black[400],
+      },
+      brand: {
+        default: colors.purple[700],
+        secondary: colors.purple[600],
+        tertiary: colors.purple[800],
+        onBrand: colors.purple[950],
+        onBrandSecondary: colors.purple[200],
+        onBrandTertiary: colors.purple[400],
+      },
+      action: {
+        default: colors.violet[600],
+        secondary: colors.violet[700],
+        tertiary: colors.violet[800],
+        onAction: colors.violet[950],
+        onActionSecondary: colors.violet[300],
+        onActionTertiary: colors.violet[200],
+      },
+      success: {
+        default: colors.green[300],
+        secondary: colors.green[400],
+        tertiary: colors.green[500],
+      },
+      warning: {
+        default: colors.yellow[300],
+        secondary: colors.yellow[400],
+        tertiary: colors.yellow[500],
+      },
+      danger: {
+        default: colors.red[500],
+        secondary: colors.red[600],
+        tertiary: colors.red[800],
+        onDanger: colors.red[400],
+      },
+      info: {
+        default: colors.blue[500],
+        secondary: colors.blue[600],
+        tertiary: colors.blue[800],
+      },
+      neutral: {
+        default: colors.slate[300],
+        secondary: colors.slate[500],
+        tertiary: colors.slate[700],
+        onNeutral: colors.slate[950],
+        onNeutralSecondary: colors.slate[200],
+        onNeutralTertiary: colors.slate[300],
+      },
+      disabled: {
+        default: colors.gray[700],
+      },
+      utilities: {
+        swatch: 'rgba(255, 255, 255, 0.24)',
+      },
+    },
+    icon: {
+      default: {
+        default: colors.slate[100],
+        secondary: colors.slate[400],
+        tertiary: colors.slate[600],
+      },
+      brand: {
+        default: colors.purple[300],
+        secondary: colors.purple[400],
+        tertiary: colors.purple[500],
+        onBrand: colors.purple[950],
+        onBrandSecondary: colors.purple[200],
+        onBrandTertiary: colors.purple[300],
+      },
+      action: {
+        default: colors.violet[400],
+        secondary: colors.violet[500],
+        tertiary: colors.violet[700],
+        onAction: colors.violet[950],
+        onActionSecondary: colors.violet[200],
+        onActionTertiary: colors.violet[300],
+      },
+      success: {
+        default: colors.green[400],
+        secondary: colors.green[600],
+        tertiary: colors.green[800],
+        onSuccess: colors.green[950],
+        onSuccessSecondary: colors.green[200],
+        onSuccessTertiary: colors.green[300],
+      },
+      warning: {
+        default: colors.yellow[400],
+        secondary: colors.yellow[600],
+        tertiary: colors.yellow[800],
+        onWarning: colors.yellow[950],
+        onWarningSecondary: colors.yellow[200],
+        onWarningTertiary: colors.yellow[300],
+      },
+      danger: {
+        default: colors.red[400],
+        secondary: colors.red[500],
+        tertiary: colors.red[600],
+        onDanger: colors.red[950],
+        onDangerSecondary: colors.red[200],
+        onDangerTertiary: colors.red[300],
+      },
+      info: {
+        default: colors.blue[400],
+        secondary: colors.blue[600],
+        tertiary: colors.blue[800],
+        onInfo: colors.blue[950],
+        onInfoSecondary: colors.blue[200],
+        onInfoTertiary: colors.blue[300],
+      },
+      neutral: {
+        default: colors.slate[100],
+        secondary: colors.slate[400],
+        tertiary: colors.slate[600],
+        onNeutral: colors.slate[950],
+        onNeutralSecondary: colors.slate[200],
+        onNeutralTertiary: colors.slate[300],
+      },
+      disabled: {
+        default: colors.gray[600],
+        secondary: colors.gray[700],
+        onDisabled: colors.gray[400],
+        onDisabledSecondary: colors.gray[500],
+      },
+      utilities: {
+        onOverlay: alphas.white[800],
+      },
+    },
+  },
+} as const;
+
+export type DarkTheme = typeof darkTheme;

package/src/tokens/themes/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Theme System
+ * Export all available themes
+ */
+
+export { lightTheme } from './light';
+export { darkTheme } from './dark';
+
+export type { LightTheme } from './light';
+export type { DarkTheme } from './dark';

package/src/tokens/themes/light.ts

@@ -0,0 +1,17 @@
+/**
+ * Light Theme
+ * Default light mode color scheme
+ */
+
+import { background, text, border, icon } from '../semantic/colors';
+
+export const lightTheme = {
+  color: {
+    background,
+    text,
+    border,
+    icon,
+  },
+} as const;
+
+export type LightTheme = typeof lightTheme;

package/src/tokens/utils/cssVariables.ts

@@ -0,0 +1,88 @@
+/**
+ * CSS Custom Properties Generator
+ * Converts design tokens to CSS variables for runtime theming
+ */
+
+import { Theme } from '../index';
+
+/**
+ * Flattens nested object into CSS variable names
+ */
+function flattenObject(
+  obj: any,
+  prefix = '',
+  result: Record<string, string> = {}
+): Record<string, string> {
+  for (const key in obj) {
+    const value = obj[key];
+    const newKey = prefix ? `${prefix}-${kebabCase(key)}` : kebabCase(key);
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      flattenObject(value, newKey, result);
+    } else {
+      result[`--${newKey}`] = String(value);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Converts camelCase to kebab-case
+ */
+function kebabCase(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+}
+
+/**
+ * Generates CSS custom properties from theme object
+ */
+export function generateCSSVariables(theme: Theme): Record<string, string> {
+  return flattenObject(theme);
+}
+
+/**
+ * Applies CSS variables to a DOM element (usually :root or a container)
+ */
+export function applyCSSVariables(
+  element: HTMLElement,
+  variables: Record<string, string>
+): void {
+  for (const [key, value] of Object.entries(variables)) {
+    element.style.setProperty(key, value);
+  }
+}
+
+/**
+ * Removes CSS variables from a DOM element
+ */
+export function removeCSSVariables(
+  element: HTMLElement,
+  variables: Record<string, string>
+): void {
+  for (const key of Object.keys(variables)) {
+    element.style.removeProperty(key);
+  }
+}
+
+/**
+ * Gets current value of a CSS variable
+ */
+export function getCSSVariable(name: string, element: HTMLElement = document.documentElement): string {
+  return getComputedStyle(element).getPropertyValue(name).trim();
+}
+
+/**
+ * Generates a CSS string with all variables
+ */
+export function generateCSSString(theme: Theme, selector = ':root'): string {
+  const variables = generateCSSVariables(theme);
+  const cssVars = Object.entries(variables)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join('\n');
+
+  return `${selector} {\n${cssVars}\n}`;
+}

package/src/tokens/utils/hooks.ts

@@ -0,0 +1,192 @@
+/**
+ * React Hooks for Design Tokens
+ * Provides easy access to tokens and theming in React components
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { tokens, themes, type ThemeMode, type Theme } from '../index';
+import { applyCSSVariables, generateCSSVariables } from './cssVariables';
+
+const THEME_STORAGE_KEY = 'squarex-ui-theme';
+
+/**
+ * Hook to access design tokens
+ * @returns The tokens object
+ *
+ * @example
+ * const MyComponent = () => {
+ *   const tokens = useTokens();
+ *   return <div style={{ color: tokens.color.text.brand.default }}>Hello</div>;
+ * };
+ */
+export function useTokens() {
+  return tokens;
+}
+
+/**
+ * Hook for theme management
+ * @param defaultTheme - The default theme mode ('light' or 'dark')
+ * @param persist - Whether to persist theme preference to localStorage
+ *
+ * @example
+ * const MyApp = () => {
+ *   const { theme, themeMode, setTheme, toggleTheme } = useTheme('light', true);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current theme: {themeMode}</p>
+ *       <button onClick={toggleTheme}>Toggle Theme</button>
+ *     </div>
+ *   );
+ * };
+ */
+export function useTheme(defaultTheme: ThemeMode = 'light', persist: boolean = true) {
+  // Initialize theme from localStorage or default
+  const [themeMode, setThemeMode] = useState<ThemeMode>(() => {
+    if (persist && typeof window !== 'undefined') {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null;
+      return stored || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  // Get current theme object
+  const theme = useMemo<Theme>(() => themes[themeMode], [themeMode]);
+
+  // Apply theme to document root
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const cssVariables = generateCSSVariables(theme);
+    applyCSSVariables(document.documentElement, cssVariables);
+
+    // Add data attribute for CSS selectors
+    document.documentElement.setAttribute('data-theme', themeMode);
+
+    // Persist to localStorage
+    if (persist) {
+      localStorage.setItem(THEME_STORAGE_KEY, themeMode);
+    }
+  }, [theme, themeMode, persist]);
+
+  // Set theme mode
+  const setTheme = useCallback((mode: ThemeMode) => {
+    setThemeMode(mode);
+  }, []);
+
+  // Toggle between light and dark
+  const toggleTheme = useCallback(() => {
+    setThemeMode((current) => (current === 'light' ? 'dark' : 'light'));
+  }, []);
+
+  return {
+    theme,
+    themeMode,
+    setTheme,
+    toggleTheme,
+  };
+}
+
+/**
+ * Hook to detect system color scheme preference
+ *
+ * @example
+ * const MyApp = () => {
+ *   const prefersDark = usePrefersDarkMode();
+ *   const { setTheme } = useTheme();
+ *
+ *   useEffect(() => {
+ *     setTheme(prefersDark ? 'dark' : 'light');
+ *   }, [prefersDark, setTheme]);
+ * };
+ */
+export function usePrefersDarkMode(): boolean {
+  const [prefersDark, setPrefersDark] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setPrefersDark(e.matches);
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+    // Legacy browsers
+    else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handler);
+      return () => mediaQuery.removeListener(handler);
+    }
+  }, []);
+
+  return prefersDark;
+}
+
+/**
+ * Hook to get responsive breakpoint information
+ *
+ * @example
+ * const MyComponent = () => {
+ *   const { isMobile, isTablet, isDesktop } = useBreakpoint();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile && <MobileNav />}
+ *       {isDesktop && <DesktopNav />}
+ *     </div>
+ *   );
+ * };
+ */
+export function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState<{
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isWide: boolean;
+    width: number;
+  }>(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isMobile: false,
+        isTablet: false,
+        isDesktop: false,
+        isWide: false,
+        width: 0,
+      };
+    }
+
+    const width = window.innerWidth;
+    return {
+      isMobile: width >= tokens.breakpoint.mobile && width < tokens.breakpoint.tablet,
+      isTablet: width >= tokens.breakpoint.tablet && width < tokens.breakpoint.desktop,
+      isDesktop: width >= tokens.breakpoint.desktop && width < tokens.breakpoint.wide,
+      isWide: width >= tokens.breakpoint.wide,
+      width,
+    };
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setBreakpoint({
+        isMobile: width >= tokens.breakpoint.mobile && width < tokens.breakpoint.tablet,
+        isTablet: width >= tokens.breakpoint.tablet && width < tokens.breakpoint.desktop,
+        isDesktop: width >= tokens.breakpoint.desktop && width < tokens.breakpoint.wide,
+        isWide: width >= tokens.breakpoint.wide,
+        width,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return breakpoint;
+}

package/src/tokens/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Token Utilities
+ * Helper functions and hooks for working with design tokens
+ */
+
+export * from './cssVariables';
+export * from './hooks';