squarex-ui-component-lib 1.0.4 → 1.0.5

package/src/tokens/semantic/colors.ts

@@ -0,0 +1,383 @@
+/**
+ * Semantic Color Tokens
+ * Use these tokens in your components instead of core colors
+ * @layer tokens/semantic
+ */
+
+import { colors, alphas } from '../core/colors';
+
+/**
+ * Background colors organized by intent and state
+ */
+export const background = {
+  // Brand colors
+  brand: {
+    default: colors.purple[500],
+    secondary: colors.purple[300],
+    tertiary: colors.purple[150],
+    hover: colors.purple[600],
+    secondaryHover: colors.purple[400],
+    tertiaryHover: colors.purple[200],
+    subtleLow: alphas.purple[100],
+    subtleMedium: alphas.purple[100],
+  },
+
+  // Action colors
+  action: {
+    default: colors.violet[500],
+    secondary: colors.violet[300],
+    tertiary: colors.violet[100],
+    hover: colors.violet[400],
+    secondaryHover: colors.violet[400],
+    tertiaryHover: colors.violet[150],
+    subtleLow: alphas.violet[100],
+    subtleMedium: alphas.violet[100],
+  },
+
+  // Status colors
+  success: {
+    default: colors.green[500],
+    secondary: colors.green[200],
+    tertiary: colors.green[50],
+    hover: colors.green[600],
+    secondaryHover: colors.green[300],
+    tertiaryHover: colors.green[200],
+    subtleLow: colors.green[200],
+    subtleMedium: colors.green[200],
+  },
+
+  warning: {
+    default: colors.yellow[500],
+    secondary: colors.yellow[300],
+    tertiary: colors.yellow[150],
+    hover: colors.yellow[600],
+    secondaryHover: colors.yellow[400],
+    tertiaryHover: colors.yellow[200],
+    subtleLow: colors.yellow[200],
+    subtleMedium: colors.yellow[200],
+  },
+
+  danger: {
+    default: colors.red[400],
+    secondary: colors.red[200],
+    tertiary: colors.red[50],
+    hover: colors.red[600],
+    secondaryHover: colors.red[300],
+    tertiaryHover: colors.red[150],
+    subtleLow: alphas.red[100],
+    subtleMedium: alphas.red[100],
+  },
+
+  info: {
+    default: colors.blue[500],
+    secondary: colors.blue[300],
+    tertiary: colors.blue[100],
+    hover: colors.blue[600],
+    secondaryHover: colors.blue[400],
+    tertiaryHover: colors.blue[200],
+    subtleLow: colors.blue[200],
+    subtleMedium: colors.blue[200],
+  },
+
+  // Neutral colors
+  neutral: {
+    default: colors.slate[500],
+    secondary: colors.slate[300],
+    tertiary: colors.slate[100],
+    hover: colors.slate[600],
+    secondaryHover: colors.slate[400],
+    tertiaryHover: colors.slate[200],
+    subtleLow: alphas.slate[100],
+    subtleMedium: alphas.slate[200],
+  },
+
+  // Default/surface colors
+  default: {
+    default: colors.slate[50],
+    hover: colors.slate[100],
+    glass: alphas.white[300],
+    onGlass: alphas.white[600],
+    onGlassSecondary: alphas.white[700],
+    onGlassTertiary: alphas.white[800],
+    onGlassHover: alphas.white[800],
+  },
+
+  // Disabled state
+  disabled: {
+    default: colors.gray[200],
+    secondary: colors.gray[100],
+  },
+
+  // Utility backgrounds
+  utilities: {
+    scrim: 'rgba(255, 255, 255, 0.7)',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+    blanket: 'rgba(0, 0, 0, 0.7)',
+    bgOnGlass: 'rgba(255, 255, 255, 0.45)',
+    bgOnGlassOnGlass: 'rgba(255, 255, 255, 0.6)',
+    hoverOverlay: 'rgba(0, 0, 0, 0.2)',
+  },
+} as const;
+
+/**
+ * Text colors organized by intent and context
+ */
+export const text = {
+  // Default text
+  default: {
+    default: colors.slate[800],
+    secondary: colors.slate[500],
+    tertiary: colors.slate[300],
+  },
+
+  // Brand text
+  brand: {
+    default: colors.purple[500],
+    secondary: colors.purple[300],
+    tertiary: colors.purple[150],
+    onBrand: colors.purple[50],
+    onBrandSecondary: colors.purple[800],
+    onBrandTertiary: colors.purple[600],
+  },
+
+  // Action text
+  action: {
+    default: colors.violet[500],
+    secondary: colors.violet[300],
+    tertiary: colors.violet[150],
+    onAction: colors.violet[50],
+    onActionSecondary: colors.violet[700],
+    onActionTertiary: colors.violet[600],
+  },
+
+  // Status text
+  success: {
+    default: colors.green[800],
+    secondary: colors.green[600],
+    tertiary: colors.green[500],
+    onSuccess: colors.green[50],
+    onSuccessSecondary: colors.green[700],
+    onSuccessTertiary: colors.green[800],
+  },
+
+  warning: {
+    default: colors.yellow[900],
+    secondary: colors.yellow[700],
+    tertiary: colors.yellow[600],
+    onWarning: colors.yellow[900],
+    onWarningSecondary: colors.yellow[800],
+    onWarningTertiary: colors.yellow[700],
+  },
+
+  danger: {
+    default: colors.red[500],
+    secondary: colors.red[400],
+    tertiary: colors.red[300],
+    onDanger: colors.red[50],
+    onDangerSecondary: colors.red[800],
+    onDangerTertiary: colors.red[600],
+  },
+
+  info: {
+    default: colors.blue[500],
+    secondary: colors.blue[300],
+    tertiary: colors.blue[150],
+    onInfo: colors.blue[50],
+    onInfoSecondary: colors.blue[800],
+    onInfoTertiary: colors.blue[600],
+  },
+
+  // Neutral text
+  neutral: {
+    default: colors.slate[800],
+    secondary: colors.slate[500],
+    tertiary: colors.slate[300],
+    onNeutral: colors.slate[50],
+    onNeutralSecondary: colors.slate[800],
+    onNeutralTertiary: colors.slate[600],
+  },
+
+  // Disabled text
+  disabled: {
+    default: colors.gray[400],
+    secondary: colors.gray[300],
+    onDisabled: colors.gray[500],
+    onDisabledSecondary: colors.gray[300],
+  },
+
+  // Utility text
+  utilities: {
+    onOverlay: alphas.black[1000],
+  },
+} as const;
+
+/**
+ * Border colors organized by intent
+ */
+export const border = {
+  // Default borders
+  default: {
+    default: colors.white,
+    secondary: colors.slate[150],
+    tertiary: colors.slate[500],
+    subtleLow: alphas.white[800],
+    subtleMedium: alphas.slate[200],
+    subtleHigh: alphas.white[400],
+  },
+
+  // Brand borders
+  brand: {
+    default: colors.purple[200],
+    secondary: colors.purple[300],
+    tertiary: colors.purple[150],
+    onBrand: colors.purple[50],
+    onBrandSecondary: colors.purple[800],
+    onBrandTertiary: colors.purple[600],
+  },
+
+  // Action borders
+  action: {
+    default: colors.violet[500],
+    secondary: colors.violet[300],
+    tertiary: colors.violet[150],
+    onAction: colors.violet[50],
+    onActionSecondary: colors.violet[600],
+    onActionTertiary: colors.violet[800],
+  },
+
+  // Status borders
+  success: {
+    default: colors.green[800],
+    secondary: colors.green[600],
+    tertiary: colors.green[500],
+  },
+
+  warning: {
+    default: colors.yellow[800],
+    secondary: colors.yellow[600],
+    tertiary: colors.yellow[500],
+  },
+
+  danger: {
+    default: colors.red[500],
+    secondary: colors.red[300],
+    tertiary: colors.red[100],
+    onDanger: colors.red[600],
+  },
+
+  info: {
+    default: colors.blue[500],
+    secondary: colors.blue[300],
+    tertiary: colors.blue[150],
+  },
+
+  // Neutral borders
+  neutral: {
+    default: colors.slate[800],
+    secondary: colors.slate[500],
+    tertiary: colors.slate[200],
+    onNeutral: colors.slate[50],
+    onNeutralSecondary: colors.slate[700],
+    onNeutralTertiary: colors.slate[600],
+  },
+
+  // Disabled borders
+  disabled: {
+    default: colors.gray[400],
+  },
+
+  // Utility borders
+  utilities: {
+    swatch: 'rgba(0, 0, 0, 0.24)',
+  },
+} as const;
+
+/**
+ * Icon colors (mirrors text structure)
+ */
+export const icon = {
+  default: {
+    default: colors.slate[800],
+    secondary: colors.slate[500],
+    tertiary: colors.slate[300],
+  },
+
+  brand: {
+    default: colors.purple[800],
+    secondary: colors.purple[600],
+    tertiary: colors.purple[500],
+    onBrand: colors.purple[50],
+    onBrandSecondary: colors.purple[800],
+    onBrandTertiary: colors.purple[600],
+  },
+
+  action: {
+    default: colors.violet[500],
+    secondary: colors.violet[300],
+    tertiary: colors.violet[150],
+    onAction: colors.violet[50],
+    onActionSecondary: colors.violet[700],
+    onActionTertiary: colors.violet[600],
+  },
+
+  success: {
+    default: colors.green[500],
+    secondary: colors.green[200],
+    tertiary: colors.green[100],
+    onSuccess: colors.green[50],
+    onSuccessSecondary: colors.green[700],
+    onSuccessTertiary: colors.green[800],
+  },
+
+  warning: {
+    default: colors.yellow[500],
+    secondary: colors.yellow[300],
+    tertiary: colors.yellow[150],
+    onWarning: colors.yellow[1000],
+    onWarningSecondary: colors.yellow[800],
+    onWarningTertiary: colors.yellow[900],
+  },
+
+  danger: {
+    default: colors.red[500],
+    secondary: colors.red[400],
+    tertiary: colors.red[300],
+    onDanger: colors.red[50],
+    onDangerSecondary: colors.red[700],
+    onDangerTertiary: colors.red[800],
+  },
+
+  info: {
+    default: colors.blue[500],
+    secondary: colors.blue[300],
+    tertiary: colors.blue[150],
+    onInfo: colors.blue[1000],
+    onInfoSecondary: colors.blue[800],
+    onInfoTertiary: colors.blue[900],
+  },
+
+  neutral: {
+    default: colors.slate[800],
+    secondary: colors.slate[500],
+    tertiary: colors.slate[300],
+    onNeutral: colors.slate[50],
+    onNeutralSecondary: colors.slate[700],
+    onNeutralTertiary: colors.slate[600],
+  },
+
+  disabled: {
+    default: colors.gray[400],
+    secondary: colors.gray[300],
+    onDisabled: colors.gray[500],
+    onDisabledSecondary: colors.gray[300],
+  },
+
+  utilities: {
+    onOverlay: alphas.black[1000],
+  },
+} as const;
+
+export type BackgroundToken = typeof background;
+export type TextToken = typeof text;
+export type BorderToken = typeof border;
+export type IconToken = typeof icon;

package/src/tokens/semantic/effects.ts

@@ -0,0 +1,69 @@
+/**
+ * Semantic Effect Tokens
+ * Shadows, blur effects, and other visual effects
+ * @layer tokens/semantic
+ */
+
+import { blur, elevation } from '../core/spacing';
+
+/**
+ * Box shadow definitions based on elevation
+ */
+export const shadows = {
+  xs: `0 ${elevation.xs}px ${elevation.xs * 2}px rgba(0, 0, 0, 0.1)`,
+  sm: `0 ${elevation.sm}px ${elevation.sm * 2}px rgba(0, 0, 0, 0.12)`,
+  md: `0 ${elevation.md}px ${elevation.md * 2}px rgba(0, 0, 0, 0.15)`,
+  lg: `0 ${elevation.lg}px ${elevation.lg * 2}px rgba(0, 0, 0, 0.18)`,
+  xl: `0 ${elevation.xl}px ${elevation.xl * 2}px rgba(0, 0, 0, 0.20)`,
+  none: 'none',
+} as const;
+
+/**
+ * Backdrop blur effects
+ */
+export const backdropBlur = {
+  none: `blur(${blur.none}px)`,
+  soft: `blur(${blur.soft}px)`,
+  light: `blur(${blur.light}px)`,
+  medium: `blur(${blur.medium}px)`,
+  heavy: `blur(${blur.heavy}px)`,
+  intense: `blur(${blur.intense}px)`,
+} as const;
+
+/**
+ * Transition/animation presets
+ */
+export const transitions = {
+  fast: '150ms ease-in-out',
+  base: '250ms ease-in-out',
+  slow: '350ms ease-in-out',
+  verySlow: '500ms ease-in-out',
+} as const;
+
+/**
+ * Animation durations (in ms)
+ */
+export const durations = {
+  instant: 100,
+  fast: 150,
+  base: 250,
+  slow: 350,
+  verySlow: 500,
+} as const;
+
+/**
+ * Easing functions
+ */
+export const easings = {
+  linear: 'linear',
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  spring: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+} as const;
+
+export type ShadowToken = typeof shadows;
+export type BackdropBlurToken = typeof backdropBlur;
+export type TransitionToken = typeof transitions;
+export type DurationToken = typeof durations;
+export type EasingToken = typeof easings;

package/src/tokens/semantic/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Semantic Design Tokens
+ *
+ * These tokens should be used in components.
+ * They provide meaning and context to the primitive values.
+ *
+ * @example
+ * import { tokens } from '@/tokens';
+ *
+ * // ✅ Use semantic tokens in components:
+ * backgroundColor: tokens.color.background.brand.default
+ * color: tokens.color.text.success.default
+ * boxShadow: tokens.shadow.md
+ */
+
+export * from './colors';
+export * from './typography';
+export * from './effects';