@lunar-js/lunar 0.0.1

package/src/themes/styles/color-scheme.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+const lightColorScheme = style({
+  colorScheme: 'light',
+});
+
+const darkColorScheme = style({
+  colorScheme: 'dark',
+});
+
+export { lightColorScheme, darkColorScheme };

package/src/themes/styles/utilities.ts

@@ -0,0 +1,140 @@
+import { type CSSProperties, type StyleRule } from '@vanilla-extract/css';
+
+import { COLORS__PURE } from '../tokens/primitives/colors.js';
+
+/**
+ * Helper function to create a motion-safe style object with custom CSS properties.
+ * Returns a style object that wraps the provided styles in a `prefers-reduced-motion: no-preference` media query,
+ * ensuring animations only run when users haven't requested reduced motion.
+ *
+ * This function returns a style object that must be used with vanilla-extract's `style()` function or `recipe()` function.
+ *
+ * @param styles - CSS properties object (e.g., { transition: 'opacity 0.3s ease', transform: 'scale(1.1)' })
+ * @returns A style object that applies the CSS properties only when motion is preferred
+ *
+ * @example
+ * import { style } from '@vanilla-extract/css';
+ * import { withSafeTransition } from './utilities.css.ts';
+ *
+ * const fadeTransition = style([
+ *   withSafeTransition({
+ *     transition: 'transform 0.2s ease-out, opacity 0.2s ease-out',
+ *     transform: 'translateY(0)'
+ *   }),
+ *   {
+ *     // Additional styles can be added here
+ *     padding: '16px'
+ *   }
+ * ]);
+ */
+const withSafeTransition = (styles: StyleRule): StyleRule => ({
+  '@media': {
+    '(prefers-reduced-motion: no-preference)': styles,
+  },
+});
+
+/**
+ * Helper function to create a custom focus outline style object.
+ * Returns a style object with focus-visible outline that follows the design system's outline pattern.
+ * Supports an optional selector parameter for targeting specific pseudo-selectors or child elements.
+ *
+ * This function returns a style object that must be used with vanilla-extract's `style()` function or `recipe()` function.
+ *
+ * @param outlineColor - The color for the focus outline (e.g., '#0066cc', 'rgb(255, 0, 0)', CSS custom properties)
+ * @param selector - Optional selector prefix for the focus-visible state (e.g., '&', '& > button', defaults to '')
+ * @returns A style object with custom focus outline styling that uses dynamic selector keys
+ *
+ * @example
+ * import { style } from '@vanilla-extract/css';
+ * import { recipe } from '@vanilla-extract/recipes';
+ * import { withCustomOutline } from './utilities.css.ts';
+ *
+ * const redOutlineButton = style([
+ *   withCustomOutline('#ff0000'),
+ *   {
+ *     padding: '8px 16px',
+ *     background: 'white'
+ *   }
+ * ]);
+ *
+ * // Example with custom selector
+ * const parentWithFocusableChild = style([
+ *   withCustomOutline('#0066cc', '& > button'),
+ *   {
+ *     padding: '12px'
+ *   }
+ * ]);
+ *
+ * const buttonVariants = recipe({
+ *   base: [
+ *     withCustomOutline(themeContract.colors.shadow.interactive),
+ *     {
+ *       // other base styles
+ *       padding: '12px 24px'
+ *     }
+ *   ],
+ *   variants: {
+ *     // variant styles
+ *   }
+ * });
+ */
+const withCustomOutline = (outlineColor: string, selector = ''): Record<`${string}:focus-visible`, CSSProperties> => ({
+  [`${selector}:focus-visible`]: {
+    boxShadow: `0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${outlineColor} 0px 0px 0px 3px, ${outlineColor} 0px 1px 2px 0px`,
+    outline: '2px solid transparent',
+    outlineOffset: '2px',
+  },
+});
+
+/**
+ * Helper function to create a responsive style object with breakpoint media queries.
+ * Returns a style object that applies the provided styles only when the viewport width
+ * meets or exceeds the specified breakpoint value.
+ *
+ * This function returns a style object that must be used with vanilla-extract's `style()` function or `recipe()` function.
+ *
+ * @param breakpoint - The minimum viewport width for the media query (e.g., '768px', '1024px', '48rem')
+ * @param styles - CSS properties object to apply at the breakpoint (e.g., { fontSize: '1.5rem', padding: '24px' })
+ * @returns A style object that applies the CSS properties only when the viewport width meets the breakpoint
+ *
+ * @example
+ * import { style } from '@vanilla-extract/css';
+ * import { recipe } from '@vanilla-extract/recipes';
+ * import { withBreakpoint } from './utilities.css.ts';
+ *
+ * const responsiveText = style([
+ *   withBreakpoint('768px', {
+ *     fontSize: '1.5rem',
+ *     lineHeight: '1.4'
+ *   }),
+ *   {
+ *     // Base styles
+ *     fontSize: '1rem',
+ *     lineHeight: '1.6'
+ *   }
+ * ]);
+ *
+ * const cardVariants = recipe({
+ *   base: [
+ *     withBreakpoint('1024px', {
+ *       padding: '32px',
+ *       maxWidth: '800px'
+ *     }),
+ *     {
+ *       // base styles
+ *       padding: '16px',
+ *       maxWidth: '100%'
+ *     }
+ *   ],
+ *   variants: {
+ *     // variant styles
+ *   }
+ * });
+ */
+const withBreakpoint = (breakpoint: string, styles: CSSProperties): StyleRule => ({
+  '@media': {
+    [`(min-width: ${breakpoint})`]: styles,
+  },
+});
+
+export { withSafeTransition, withCustomOutline, withBreakpoint };

package/src/themes/tokens/primitives/borders.ts

@@ -0,0 +1,21 @@
+const BORDER_RADIUS = {
+  none: '0',
+  sm: '0.125rem', // 2px
+  base: '0.25rem', // 4px
+  md: '0.375rem', // 6px
+  lg: '0.5rem', // 8px
+  xl: '0.75rem', // 12px
+  '2xl': '1rem', // 16px
+  '3xl': '1.5rem', // 24px
+  full: '9999px',
+} as const;
+
+const BORDER_WIDTH = {
+  0: '0',
+  1: '1px',
+  2: '2px',
+  4: '4px',
+  8: '8px',
+} as const;
+
+export { BORDER_WIDTH, BORDER_RADIUS };

package/src/themes/tokens/primitives/colors.ts

@@ -0,0 +1,114 @@
+const COLORS__PURE = {
+  white: '1 0 0',
+  black: '0 0 0',
+  transparent: 'transparent',
+} as const;
+
+const COLORS__STONE = {
+  50: '0.98 0.005 50',
+  100: '0.92 0.010 50',
+  200: '0.85 0.014 50',
+  300: '0.75 0.018 50',
+  400: '0.65 0.022 50',
+  500: '0.55 0.024 50',
+  600: '0.45 0.022 50',
+  700: '0.35 0.018 50',
+  800: '0.25 0.014 50',
+  900: '0.18 0.010 50',
+  950: '0.12 0.006 50',
+} as const;
+
+const COLORS__RED = {
+  50: '0.98 0.02 20',
+  100: '0.92 0.05 20',
+  200: '0.85 0.10 20',
+  300: '0.75 0.16 20',
+  400: '0.65 0.23 20',
+  500: '0.55 0.26 20',
+  600: '0.45 0.24 20',
+  700: '0.35 0.21 20',
+  800: '0.25 0.17 20',
+  900: '0.18 0.12 20',
+  950: '0.12 0.08 20',
+} as const;
+
+const COLORS__GREEN = {
+  50: '0.98 0.02 140',
+  100: '0.92 0.05 140',
+  200: '0.85 0.10 140',
+  300: '0.75 0.15 140',
+  400: '0.65 0.22 140',
+  500: '0.55 0.25 140',
+  600: '0.45 0.23 140',
+  700: '0.35 0.20 140',
+  800: '0.25 0.16 140',
+  900: '0.18 0.12 140',
+  950: '0.12 0.08 140',
+} as const;
+
+const COLORS__GOLD = {
+  50: '0.98 0.025 84.44',
+  100: '0.94 0.05 84.44',
+  200: '0.88 0.09 84.44',
+  300: '0.82 0.13 84.44',
+  400: '0.78 0.155 84.44',
+  500: '0.7446 0.161 84.44',
+  600: '0.65 0.155 84.44',
+  700: '0.52 0.14 84.44',
+  800: '0.38 0.11 84.44',
+  900: '0.26 0.08 84.44',
+  950: '0.17 0.05 84.44',
+} as const;
+
+const COLORS__PEARL = {
+  50: '0.995 0.002 260',
+  100: '0.955 0.004 260',
+  200: '0.90 0.006 260',
+  300: '0.80 0.008 260',
+  400: '0.72 0.010 260',
+  500: '0.68 0.012 260',
+  600: '0.50 0.013 260',
+  700: '0.40 0.014 260',
+  800: '0.38 0.013 260',
+  900: '0.25 0.011 260',
+  950: '0.15 0.009 260',
+} as const;
+
+const COLORS__YELLOW = {
+  50: '0.98 0.03 91.6',
+  100: '0.94 0.05 91.6',
+  200: '0.89 0.08 91.6',
+  300: '0.86 0.12 91.6',
+  400: '0.84 0.16 91.6',
+  500: '0.831 0.1805 91.6',
+  600: '0.75 0.17 91.6',
+  700: '0.65 0.15 91.6',
+  800: '0.52 0.12 91.6',
+  900: '0.38 0.09 91.6',
+  950: '0.26 0.06 91.6',
+} as const;
+
+const COLORS__BLUE = {
+  50: '0.95 0.03 246.61',
+  100: '0.90 0.06 246.61',
+  200: '0.83 0.12 246.61',
+  300: '0.75 0.16 246.61',
+  400: '0.68 0.18 246.61',
+  500: '0.6079 0.1983 246.61',
+  600: '0.52 0.18 246.61',
+  700: '0.42 0.15 246.61',
+  800: '0.32 0.12 246.61',
+  900: '0.22 0.08 246.61',
+  950: '0.15 0.05 246.61',
+} as const;
+
+export {
+  COLORS__PURE,
+  COLORS__STONE,
+  COLORS__RED,
+  COLORS__GREEN,
+  COLORS__GOLD,
+  COLORS__PEARL,
+  COLORS__YELLOW,
+  COLORS__BLUE,
+};

package/src/themes/tokens/primitives/shadows.ts

@@ -0,0 +1,12 @@
+const BOX_SHADOW = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  base: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+} as const;
+
+export { BOX_SHADOW };

package/src/themes/tokens/primitives/spacing.ts

@@ -0,0 +1,39 @@
+const SPACING = {
+  0: '0',
+  px: '1px',
+  0.5: '0.125rem', // 2px
+  1: '0.25rem', // 4px
+  1.5: '0.375rem', // 6px
+  2: '0.5rem', // 8px
+  2.5: '0.625rem', // 10px
+  3: '0.75rem', // 12px
+  3.5: '0.875rem', // 14px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem', // 24px
+  7: '1.75rem', // 28px
+  8: '2rem', // 32px
+  9: '2.25rem', // 36px
+  10: '2.5rem', // 40px
+  11: '2.75rem', // 44px
+  12: '3rem', // 48px
+  14: '3.5rem', // 56px
+  16: '4rem', // 64px
+  20: '5rem', // 80px
+  24: '6rem', // 96px
+  28: '7rem', // 112px
+  32: '8rem', // 128px
+  36: '9rem', // 144px
+  40: '10rem', // 160px
+  44: '11rem', // 176px
+  48: '12rem', // 192px
+  52: '13rem', // 208px
+  56: '14rem', // 224px
+  60: '15rem', // 240px
+  64: '16rem', // 256px
+  72: '18rem', // 288px
+  80: '20rem', // 320px
+  96: '24rem', // 384px
+} as const;
+
+export { SPACING };

package/src/themes/tokens/primitives/typography.ts

@@ -0,0 +1,125 @@
+const FONT_FAMILY = {
+  sans: {
+    primary: 'ui-sans-serif',
+    system: 'system-ui',
+    fallback: 'sans-serif',
+    emoji: {
+      apple: '"Apple Color Emoji"',
+      segoeUI: '"Segoe UI Emoji"',
+      segoeSymbol: '"Segoe UI Symbol"',
+      noto: '"Noto Color Emoji"',
+    },
+  },
+  serif: {
+    primary: 'ui-serif',
+    georgia: 'Georgia',
+    cambria: 'Cambria',
+    timesNewRoman: '"Times New Roman"',
+    times: 'Times',
+    fallback: 'serif',
+  },
+  mono: {
+    primary: 'ui-monospace',
+    sfMono: 'SFMono-Regular',
+    menlo: '"Menlo"',
+    monaco: '"Monaco"',
+    consolas: '"Consolas"',
+    liberation: '"Liberation Mono"',
+    courierNew: '"Courier New"',
+    fallback: 'monospace',
+  },
+} as const;
+
+const FONT_SIZE = {
+  '3xs': '0.625rem', // 10px
+  '2xs': '0.6875rem', // 11px
+  xs: '0.9375rem', // 15px
+  sm: '1.09375rem', // 17.5px
+  base: '1.25rem', // 20px
+  lg: '1.40625rem', // 22.5px
+  xl: '1.5625rem', // 25px
+  '2xl': '1.875rem', // 30px
+  '3xl': '2.34375rem', // 37.5px
+  '4xl': '2.8125rem', // 45px
+  '5xl': '3.75rem', // 60px
+  '6xl': '4.6875rem', // 75px
+  '7xl': '5.625rem', // 90px
+  '8xl': '7.5rem', // 120px
+  '9xl': '10rem', // 160px
+} as const;
+
+const FONT_WEIGHT = {
+  thin: '100',
+  extralight: '200',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+} as const;
+
+const LINE_HEIGHT = {
+  none: '1',
+  tight: '1.25',
+  snug: '1.375',
+  normal: '1.5',
+  relaxed: '1.625',
+  loose: '2',
+  3: '.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+} as const;
+
+const LINE_HEIGHT__TIGHT = {
+  '3xs': '0.75rem', // 12px (10 × 1.14 = 11.4 → 12px)
+  '2xs': '0.75rem', // 12px (11 × 1.14 = 12.54 → 12px)
+  xs: '1rem', // 16px (15 × 1.14 = 17.1 → 16px)
+  sm: '1.25rem', // 20px (17.5 × 1.14 = 19.95 → 20px)
+  base: '1.5rem', // 24px (20 × 1.14 = 22.8 → 24px)
+  lg: '1.75rem', // 28px (22.5 × 1.14 = 25.65 → 28px)
+  xl: '1.75rem', // 28px (25 × 1.14 = 28.5 → 28px)
+  '2xl': '2.25rem', // 36px (30 × 1.14 = 34.2 → 36px)
+  '3xl': '2.75rem', // 44px (37.5 × 1.14 = 42.75 → 44px)
+  '4xl': '3.25rem', // 52px (45 × 1.14 = 51.3 → 52px)
+  '5xl': '4.25rem', // 68px (60 × 1.14 = 68.4 → 68px)
+  '6xl': '5.5rem', // 88px (75 × 1.14 = 85.5 → 88px)
+  '7xl': '6.5rem', // 104px (90 × 1.14 = 102.6 → 104px)
+  '8xl': '8.5rem', // 136px (120 × 1.14 = 136.8 → 136px)
+  '9xl': '11.5rem', // 184px (160 × 1.14 = 182.4 → 184px)
+} as const;
+
+const LINE_HEIGHT__RELAXED = {
+  '3xs': '1rem', // 16px (10 × 1.5 = 15 → 16px)
+  '2xs': '1rem', // 16px (11 × 1.5 = 16.5 → 16px)
+  xs: '1.5rem', // 24px (15 × 1.5 = 22.5 → 24px)
+  sm: '1.75rem', // 28px (17.5 × 1.5 = 26.25 → 28px)
+  base: '2rem', // 32px (20 × 1.5 = 30 → 32px)
+  lg: '2.25rem', // 36px (22.5 × 1.5 = 33.75 → 36px)
+  xl: '2.25rem', // 36px (25 × 1.5 = 37.5 → 36px)
+  '2xl': '2.75rem', // 44px (30 × 1.5 = 45 → 44px)
+  '3xl': '3.5rem', // 56px (37.5 × 1.5 = 56.25 → 56px)
+  '4xl': '4.25rem', // 68px (45 × 1.5 = 67.5 → 68px)
+  '5xl': '5.75rem', // 92px (60 × 1.5 = 90 → 92px)
+  '6xl': '7rem', // 112px (75 × 1.5 = 112.5 → 112px)
+  '7xl': '8.5rem', // 136px (90 × 1.5 = 135 → 136px)
+  '8xl': '11.25rem', // 180px (120 × 1.5 = 180 → 180px)
+  '9xl': '15rem', // 240px (160 × 1.5 = 240 → 240px)
+} as const;
+
+const LETTER_SPACING = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0em',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+} as const;
+
+export { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, LINE_HEIGHT__TIGHT, LINE_HEIGHT__RELAXED, LETTER_SPACING };

package/src/themes/tokens/semantic/borders.ts

@@ -0,0 +1,21 @@
+const BORDER_RADIUS = {
+  none: null,
+  sm: null,
+  base: null,
+  md: null,
+  lg: null,
+  xl: null,
+  '2xl': null,
+  '3xl': null,
+  full: null,
+} as const;
+
+const BORDER_WIDTH = {
+  0: null,
+  1: null,
+  2: null,
+  4: null,
+  8: null,
+} as const;
+
+export { BORDER_RADIUS, BORDER_WIDTH };

package/src/themes/tokens/semantic/colors.ts

@@ -0,0 +1,166 @@
+const ACTION_COLORS = {
+  action: {
+    bg: {
+      primary: {
+        default: null,
+        hover: null,
+        active: null,
+        disabled: null,
+      },
+      secondary: {
+        default: null,
+        hover: null,
+        active: null,
+        disabled: null,
+      },
+      outline: {
+        default: null,
+        hover: null,
+        active: null,
+        disabled: null,
+      },
+    },
+    color: {
+      primary: null,
+      outline: {
+        disabled: null,
+      },
+    },
+    destructive: {
+      default: null,
+      hover: null,
+      active: null,
+      disabled: null,
+    },
+    ghost: {
+      default: null,
+      hover: null,
+      active: null,
+      disabled: null,
+    },
+  },
+} as const;
+
+const BORDER_COLORS = {
+  border: {
+    default: null,
+    subtle: null,
+    strong: null,
+    interactive: {
+      default: null,
+      hover: null,
+      active: null,
+    },
+    focus: null,
+    success: null,
+    warning: null,
+    error: null,
+    info: null,
+    action: {
+      primary: null,
+      secondary: null,
+      destructive: null,
+      disabled: null,
+    },
+  },
+} as const;
+
+const TEXT_COLORS = {
+  text: {
+    primary: null,
+    secondary: null,
+    tertiary: null,
+    interactive: {
+      default: null,
+      hover: null,
+      active: null,
+    },
+    success: null,
+    warning: null,
+    error: null,
+    info: null,
+    inverse: null,
+    disabled: null,
+  },
+} as const;
+
+const SURFACE_COLORS = {
+  surface: {
+    bg: {
+      primary: null,
+      secondary: null,
+      tertiary: null,
+      interactive: {
+        default: null,
+        hover: null,
+        active: null,
+      },
+      success: null,
+      warning: null,
+      error: null,
+      info: null,
+      overlay: null,
+      disabled: null,
+      inverse: null,
+    },
+  },
+} as const;
+
+const ICON_COLORS = {
+  icon: {
+    primary: null,
+    secondary: null,
+    tertiary: null,
+    interactive: {
+      default: null,
+      hover: null,
+      active: null,
+    },
+    success: null,
+    warning: null,
+    error: null,
+    info: null,
+    inverse: null,
+    disabled: null,
+  },
+} as const;
+
+const INPUT_COLORS = {
+  input: {
+    bg: {
+      default: null,
+      hover: null,
+      focus: null,
+      disabled: null,
+      error: null,
+    },
+    border: {
+      default: null,
+      hover: null,
+      focus: null,
+      error: null,
+      disabled: null,
+    },
+    text: {
+      default: null,
+      placeholder: null,
+      disabled: null,
+    },
+  },
+} as const;
+
+const SHADOW_COLORS = {
+  shadow: {
+    default: null,
+    subtle: null,
+    strong: null,
+    interactive: null,
+    focus: null,
+    destructive: null,
+    success: null,
+    warning: null,
+    error: null,
+  },
+} as const;
+
+export { SURFACE_COLORS, BORDER_COLORS, ACTION_COLORS, TEXT_COLORS, ICON_COLORS, INPUT_COLORS, SHADOW_COLORS };

package/src/themes/tokens/semantic/shadows.ts

@@ -0,0 +1,12 @@
+const BOX_SHADOWS = {
+  none: null,
+  sm: null,
+  base: null,
+  md: null,
+  lg: null,
+  xl: null,
+  '2xl': null,
+  inner: null,
+} as const;
+
+export { BOX_SHADOWS };