squarex-ui-component-lib 1.0.4 → 1.0.5

package/src/tokens/semantic/typography.ts

@@ -0,0 +1,284 @@
+/**
+ * Semantic Typography Tokens
+ * Pre-configured text styles for common use cases
+ * @layer tokens/semantic
+ */
+
+import { fontFamily, fontWeight, fontSize, lineHeight, letterSpacing } from '../core/typography';
+
+/**
+ * Typography styles for different text roles
+ */
+export const typography = {
+  // Hero titles (largest)
+  heroTitle: {
+    fontFamily: fontFamily.sans,
+    fontSize: fontSize.scale11,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight,
+  },
+
+  // Page titles
+  titlePage: {
+    small: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale07,
+      fontWeight: fontWeight.bold,
+      lineHeight: lineHeight.tight,
+      letterSpacing: letterSpacing.tight,
+    },
+    base: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale08,
+      fontWeight: fontWeight.bold,
+      lineHeight: lineHeight.tight,
+      letterSpacing: letterSpacing.tight,
+    },
+    large: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale09,
+      fontWeight: fontWeight.bold,
+      lineHeight: lineHeight.tight,
+      letterSpacing: letterSpacing.tight,
+    },
+  },
+
+  // Headings
+  heading: {
+    small: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale05,
+      fontWeight: fontWeight.medium,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    base: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale06,
+      fontWeight: fontWeight.medium,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    large: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale07,
+      fontWeight: fontWeight.medium,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+  },
+
+  // Subheadings
+  subheading: {
+    small: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale04,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    base: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale05,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    large: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale06,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+  },
+
+  // Subtitles
+  subtitle: {
+    small: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale06,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    base: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale07,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+    large: {
+      fontFamily: fontFamily.sans,
+      fontSize: fontSize.scale08,
+      fontWeight: fontWeight.regular,
+      lineHeight: lineHeight.normal,
+      letterSpacing: letterSpacing.normal,
+    },
+  },
+
+  // Body text
+  body: {
+    xs: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale02,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.normal,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale02,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.normal,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    s: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale03,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale03,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    m: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale04,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale04,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    l: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale05,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale05,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.relaxed,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+  },
+
+  // Single line text (UI elements)
+  singleLine: {
+    xxs: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale01,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale01,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    xs: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale02,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale02,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    s: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale03,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale03,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    m: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale04,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale04,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+    l: {
+      regular: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale05,
+        fontWeight: fontWeight.regular,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+      strong: {
+        fontFamily: fontFamily.sans,
+        fontSize: fontSize.scale05,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.tight,
+        letterSpacing: letterSpacing.normal,
+      },
+    },
+  },
+
+  // Code/monospace
+  code: {
+    fontFamily: fontFamily.mono,
+    fontSize: fontSize.scale03,
+    fontWeight: fontWeight.regular,
+    lineHeight: lineHeight.relaxed,
+    letterSpacing: letterSpacing.normal,
+  },
+} as const;
+
+export type TypographyToken = typeof typography;

package/src/tokens/tailwind/config.ts

@@ -0,0 +1,188 @@
+/**
+ * Tailwind Configuration from Design Tokens
+ * Converts design tokens to Tailwind theme configuration
+ */
+
+import { primitives, tokens } from '../index';
+
+/**
+ * Convert color objects to Tailwind format
+ */
+function convertColors(colorObj: any): Record<string, any> {
+  const result: Record<string, any> = {};
+
+  for (const [key, value] of Object.entries(colorObj)) {
+    if (typeof value === 'string') {
+      result[key] = value;
+    } else if (typeof value === 'object') {
+      result[key] = convertColors(value);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Tailwind theme configuration generated from design tokens
+ * Use this in your tailwind.config.js
+ */
+export const tailwindTheme = {
+  colors: {
+    // Core colors
+    ...convertColors(primitives.colors),
+
+    // Semantic colors for direct use
+    brand: {
+      DEFAULT: tokens.color.background.brand.default,
+      hover: tokens.color.background.brand.hover,
+      light: tokens.color.background.brand.tertiary,
+    },
+    action: {
+      DEFAULT: tokens.color.background.action.default,
+      hover: tokens.color.background.action.hover,
+      light: tokens.color.background.action.tertiary,
+    },
+    success: {
+      DEFAULT: tokens.color.background.success.default,
+      hover: tokens.color.background.success.hover,
+      light: tokens.color.background.success.tertiary,
+    },
+    warning: {
+      DEFAULT: tokens.color.background.warning.default,
+      hover: tokens.color.background.warning.hover,
+      light: tokens.color.background.warning.tertiary,
+    },
+    danger: {
+      DEFAULT: tokens.color.background.danger.default,
+      hover: tokens.color.background.danger.hover,
+      light: tokens.color.background.danger.tertiary,
+    },
+    info: {
+      DEFAULT: tokens.color.background.info.default,
+      hover: tokens.color.background.info.hover,
+      light: tokens.color.background.info.tertiary,
+    },
+  },
+
+  fontFamily: {
+    sans: primitives.fontFamily.sans.split(', '),
+    mono: primitives.fontFamily.mono.split(', '),
+  },
+
+  fontSize: {
+    xxs: `${primitives.fontSize.scale01}px`,
+    xs: `${primitives.fontSize.scale02}px`,
+    sm: `${primitives.fontSize.scale03}px`,
+    base: `${primitives.fontSize.scale04}px`,
+    lg: `${primitives.fontSize.scale05}px`,
+    xl: `${primitives.fontSize.scale06}px`,
+    '2xl': `${primitives.fontSize.scale07}px`,
+    '3xl': `${primitives.fontSize.scale08}px`,
+    '4xl': `${primitives.fontSize.scale09}px`,
+    '5xl': `${primitives.fontSize.scale10}px`,
+    '6xl': `${primitives.fontSize.scale11}px`,
+  },
+
+  fontWeight: {
+    normal: primitives.fontWeight.regular,
+    medium: primitives.fontWeight.medium,
+    semibold: primitives.fontWeight.semibold,
+    bold: primitives.fontWeight.bold,
+  },
+
+  lineHeight: {
+    tight: tokens.typography.heroTitle.lineHeight,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+
+  spacing: {
+    0: '0',
+    50: `${primitives.space[50]}px`,
+    100: `${primitives.space[100]}px`,
+    150: `${primitives.space[150]}px`,
+    200: `${primitives.space[200]}px`,
+    300: `${primitives.space[300]}px`,
+    400: `${primitives.space[400]}px`,
+    500: `${primitives.space[500]}px`,
+    600: `${primitives.space[600]}px`,
+    800: `${primitives.space[800]}px`,
+    1200: `${primitives.space[1200]}px`,
+    1600: `${primitives.space[1600]}px`,
+    2400: `${primitives.space[2400]}px`,
+    4000: `${primitives.space[4000]}px`,
+  },
+
+  borderRadius: {
+    none: `${primitives.radius.none}px`,
+    sm: `${primitives.radius.sm}px`,
+    DEFAULT: `${primitives.radius.md}px`,
+    md: `${primitives.radius.md}px`,
+    lg: `${primitives.radius.lg}px`,
+    xl: `${primitives.radius.xl}px`,
+    full: `${primitives.radius.full}px`,
+  },
+
+  borderWidth: {
+    DEFAULT: `${primitives.borderWidth.thin}px`,
+    0: '0',
+    thin: `${primitives.borderWidth.thin}px`,
+    medium: `${primitives.borderWidth.medium}px`,
+    thick: `${primitives.borderWidth.thick}px`,
+  },
+
+  boxShadow: {
+    none: tokens.shadow.none,
+    xs: tokens.shadow.xs,
+    sm: tokens.shadow.sm,
+    DEFAULT: tokens.shadow.md,
+    md: tokens.shadow.md,
+    lg: tokens.shadow.lg,
+    xl: tokens.shadow.xl,
+  },
+
+  backdropBlur: {
+    none: tokens.blur.none,
+    soft: tokens.blur.soft,
+    light: tokens.blur.light,
+    DEFAULT: tokens.blur.medium,
+    medium: tokens.blur.medium,
+    heavy: tokens.blur.heavy,
+    intense: tokens.blur.intense,
+  },
+
+  transitionDuration: {
+    fast: `${tokens.duration.fast}ms`,
+    DEFAULT: `${tokens.duration.base}ms`,
+    base: `${tokens.duration.base}ms`,
+    slow: `${tokens.duration.slow}ms`,
+    'very-slow': `${tokens.duration.verySlow}ms`,
+  },
+
+  transitionTimingFunction: {
+    DEFAULT: 'ease-in-out',
+    linear: tokens.easing.linear,
+    in: tokens.easing.easeIn,
+    out: tokens.easing.easeOut,
+    'in-out': tokens.easing.easeInOut,
+    spring: tokens.easing.spring,
+  },
+
+  screens: {
+    mobile: `${primitives.breakpoints.mobile}px`,
+    tablet: `${primitives.breakpoints.tablet}px`,
+    desktop: `${primitives.breakpoints.desktop}px`,
+    wide: `${primitives.breakpoints.wide}px`,
+  },
+
+  zIndex: {
+    0: primitives.depth[0],
+    10: primitives.depth[100],
+    20: primitives.depth[200],
+    30: primitives.depth[400],
+    40: primitives.depth[800],
+    50: primitives.depth[1200],
+  },
+} as const;
+
+export default tailwindTheme;

package/src/tokens/tailwind/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Tailwind Integration
+ * Export Tailwind configuration
+ */
+
+export { tailwindTheme } from './config';
+export { default } from './config';