squarex-ui-component-lib 1.0.3 → 1.0.5

package/src/tokens/core/colors.ts

@@ -0,0 +1,200 @@
+/**
+ * Core Color Tokens (Primitives)
+ * These are the base color values - do not use directly in components
+ * @layer tokens/core
+ */
+
+export const colors = {
+  // Grayscale
+  gray: {
+    50: '#f6f6f6',
+    100: '#ededed',
+    150: '#e4e4e4',
+    200: '#dbdbdb',
+    300: '#cacaca',
+    400: '#b8b8b8',
+    500: '#a6a6a6',
+    600: '#858585',
+    700: '#646464',
+    800: '#424242',
+    900: '#323232',
+    950: '#212121',
+    1000: '#111111',
+  },
+
+  // Brand Colors
+  purple: {
+    50: '#f3eef9',
+    100: '#e7dcf2',
+    150: '#dbcbec',
+    200: '#cfb9e5',
+    300: '#b897d9',
+    400: '#a074cc',
+    500: '#8851bf',
+    600: '#6d4199',
+    700: '#523173',
+    800: '#36204c',
+    900: '#291839',
+    950: '#1b1026',
+    1000: '#0e0813',
+  },
+
+  violet: {
+    50: '#eceaf9',
+    100: '#dad6f2',
+    150: '#c7c1ec',
+    200: '#b4ade5',
+    300: '#8f84d9',
+    400: '#695bcc',
+    500: '#4432bf',
+    600: '#362899',
+    700: '#291e73',
+    800: '#1b144c',
+    900: '#140f39',
+    950: '#0e0a26',
+    1000: '#070513',
+  },
+
+  // Semantic Colors
+  red: {
+    50: '#fde9e9',
+    100: '#fbd3d2',
+    150: '#f9bdbc',
+    200: '#f7a7a5',
+    300: '#f47a79',
+    400: '#f04e4c',
+    500: '#ec221f',
+    600: '#bd1b19',
+    700: '#8e1413',
+    800: '#5e0e0c',
+    900: '#470a09',
+    950: '#2f0706',
+    1000: '#180303',
+  },
+
+  green: {
+    50: '#e7f7ef',
+    100: '#d0efde',
+    150: '#b8e7ce',
+    200: '#a1dfbe',
+    300: '#72ce9d',
+    400: '#43be7d',
+    500: '#14ae5c',
+    600: '#108b4a',
+    700: '#0c6837',
+    800: '#084625',
+    900: '#06341c',
+    950: '#042312',
+    1000: '#021109',
+  },
+
+  yellow: {
+    50: '#fefae6',
+    100: '#fef4ce',
+    150: '#fdefb5',
+    200: '#fdea9d',
+    300: '#fcdf6c',
+    400: '#fbd53b',
+    500: '#faca0a',
+    600: '#c8a208',
+    700: '#967906',
+    800: '#645104',
+    900: '#4b3d03',
+    950: '#322802',
+    1000: '#191401',
+  },
+
+  blue: {
+    50: '#e7f3fe',
+    100: '#cee8fd',
+    150: '#b6ddfc',
+    200: '#9ed1fb',
+    300: '#6dbaf9',
+    400: '#3da3f7',
+    500: '#0c8cf5',
+    600: '#0a70c4',
+    700: '#075493',
+    800: '#053862',
+    900: '#042a4a',
+    950: '#021c31',
+    1000: '#010e19',
+  },
+
+  slate: {
+    50: '#f1f3f4',
+    100: '#e4e6ea',
+    150: '#d6dadf',
+    200: '#c8ced4',
+    300: '#adb5bf',
+    400: '#919da9',
+    500: '#768494',
+    600: '#5e6a76',
+    700: '#474f59',
+    800: '#2f353b',
+    900: '#23282c',
+    950: '#181a1e',
+    1000: '#0c0d0f',
+  },
+
+  // Absolute colors
+  white: '#ffffff',
+  black: '#000000',
+} as const;
+
+/**
+ * Alpha/Transparency colors
+ */
+export const alphas = {
+  white: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.08)',
+    150: 'rgba(255, 255, 255, 0.15)',
+    200: 'rgba(255, 255, 255, 0.20)',
+    300: 'rgba(255, 255, 255, 0.30)',
+    350: 'rgba(255, 255, 255, 0.35)',
+    400: 'rgba(255, 255, 255, 0.40)',
+    500: 'rgba(255, 255, 255, 0.50)',
+    600: 'rgba(255, 255, 255, 0.60)',
+    700: 'rgba(255, 255, 255, 0.70)',
+    800: 'rgba(255, 255, 255, 0.80)',
+  },
+  black: {
+    100: 'rgba(12, 12, 13, 0.05)',
+    200: 'rgba(12, 12, 13, 0.10)',
+    300: 'rgba(12, 12, 13, 0.20)',
+    400: 'rgba(12, 12, 13, 0.40)',
+    500: 'rgba(12, 12, 13, 0.70)',
+    600: 'rgba(12, 12, 13, 0.80)',
+    700: 'rgba(12, 12, 13, 0.85)',
+    800: 'rgba(12, 12, 13, 0.90)',
+    900: 'rgba(12, 12, 13, 0.95)',
+    1000: 'rgba(12, 12, 13, 1.00)',
+  },
+  purple: {
+    100: 'rgba(136, 81, 191, 0.08)',
+    200: 'rgba(136, 81, 191, 0.16)',
+  },
+  violet: {
+    100: 'rgba(68, 50, 191, 0.08)',
+    200: 'rgba(68, 50, 191, 0.16)',
+  },
+  slate: {
+    100: 'rgba(118, 132, 148, 0.08)',
+    200: 'rgba(118, 132, 148, 0.16)',
+  },
+  green: {
+    100: 'rgba(20, 174, 92, 0.08)',
+    200: 'rgba(20, 174, 92, 0.16)',
+  },
+  red: {
+    100: 'rgba(236, 34, 31, 0.08)',
+    200: 'rgba(236, 34, 31, 0.16)',
+  },
+  yellow: {
+    100: 'rgba(229, 160, 0, 0.08)',
+    200: 'rgba(229, 160, 0, 0.16)',
+  },
+} as const;
+
+export type ColorToken = typeof colors;
+export type AlphaToken = typeof alphas;

package/src/tokens/core/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Core Design Tokens
+ *
+ * These are primitive tokens that should NOT be used directly in components.
+ * Instead, use semantic tokens from the semantic layer.
+ *
+ * @example
+ * // ❌ Don't do this in components:
+ * import { colors } from '@/tokens/core';
+ * color: colors.purple[500]
+ *
+ * // ✅ Do this instead:
+ * import { tokens } from '@/tokens';
+ * color: tokens.color.background.brand.default
+ */
+
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './breakpoints';

package/src/tokens/core/spacing.ts

@@ -0,0 +1,114 @@
+/**
+ * Core Spacing Tokens
+ * Spacing, sizing, radius, and other dimensional values
+ * @layer tokens/core
+ */
+
+/**
+ * Spacing scale (in pixels)
+ * Used for margins, paddings, gaps
+ */
+export const space = {
+  0: 0,
+  50: 2,
+  100: 4,
+  150: 6,
+  200: 8,
+  300: 12,
+  400: 16,
+  500: 20,
+  600: 24,
+  800: 32,
+  1200: 48,
+  1600: 64,
+  2400: 96,
+  4000: 160,
+  // Negative values for special cases
+  '-100': -4,
+  '-200': -8,
+  '-300': -12,
+  '-400': -16,
+  '-600': -24,
+} as const;
+
+/**
+ * Border radius values
+ */
+export const radius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+/**
+ * Border width values
+ */
+export const borderWidth = {
+  none: 0,
+  thin: 1,
+  medium: 1.5,
+  thick: 2,
+} as const;
+
+/**
+ * Z-index/depth values
+ */
+export const depth = {
+  0: 0,
+  25: 1,
+  100: 4,
+  200: 8,
+  400: 16,
+  800: 32,
+  1200: 48,
+  // Negative values
+  '-25': -1,
+  '-100': -4,
+  '-200': -8,
+  '-400': -16,
+  '-800': -32,
+  '-1200': -48,
+} as const;
+
+/**
+ * Icon sizes
+ */
+export const iconSize = {
+  sm: 24,
+  md: 32,
+  lg: 40,
+} as const;
+
+/**
+ * Blur values for backdrop filters
+ */
+export const blur = {
+  none: 0,
+  soft: 2,
+  light: 4,
+  medium: 8,
+  heavy: 12,
+  intense: 24,
+} as const;
+
+/**
+ * Shadow elevation values (for box-shadow y-offset)
+ */
+export const elevation = {
+  xs: 1,
+  sm: 2,
+  md: 4,
+  lg: 8,
+  xl: 16,
+} as const;
+
+export type SpaceToken = typeof space;
+export type RadiusToken = typeof radius;
+export type BorderWidthToken = typeof borderWidth;
+export type DepthToken = typeof depth;
+export type IconSizeToken = typeof iconSize;
+export type BlurToken = typeof blur;
+export type ElevationToken = typeof elevation;

package/src/tokens/core/typography.ts

@@ -0,0 +1,58 @@
+/**
+ * Core Typography Tokens
+ * Font families, weights, and type scales
+ * @layer tokens/core
+ */
+
+export const fontFamily = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+} as const;
+
+export const fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+export const fontStyle = {
+  normal: 'normal',
+  italic: 'italic',
+} as const;
+
+/**
+ * Type scale - using a modular scale
+ * Base size: 16px (1rem)
+ */
+export const fontSize = {
+  scale01: 11,  // XXS
+  scale02: 12,  // XS
+  scale03: 13,  // S
+  scale04: 14,  // M (base)
+  scale05: 16,  // L
+  scale06: 18,  // Heading small
+  scale07: 20,  // Heading base / Subtitle
+  scale08: 24,  // Title page base
+  scale09: 28,  // Title page large
+  scale10: 32,  // Extra large
+  scale11: 40,  // Hero
+} as const;
+
+export const lineHeight = {
+  tight: 1.25,
+  normal: 1.5,
+  relaxed: 1.75,
+} as const;
+
+export const letterSpacing = {
+  tight: '-0.01em',
+  normal: '0',
+  wide: '0.01em',
+} as const;
+
+export type FontFamilyToken = typeof fontFamily;
+export type FontWeightToken = typeof fontWeight;
+export type FontSizeToken = typeof fontSize;
+export type LineHeightToken = typeof lineHeight;
+export type LetterSpacingToken = typeof letterSpacing;