@lunar-js/lunar 0.0.1

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

@@ -0,0 +1,75 @@
+import { SPACING as INTERNAL_SPACING } from '../primitives/spacing.js';
+
+const SPACING = {
+  0: null,
+  px: null,
+  0.5: null,
+  1: null,
+  1.5: null,
+  2: null,
+  2.5: null,
+  3: null,
+  3.5: null,
+  4: null,
+  5: null,
+  6: null,
+  7: null,
+  8: null,
+  9: null,
+  10: null,
+  11: null,
+  12: null,
+  14: null,
+  16: null,
+  20: null,
+  24: null,
+  28: null,
+  32: null,
+  36: null,
+  40: null,
+  44: null,
+  48: null,
+  52: null,
+  56: null,
+  60: null,
+  64: null,
+  72: null,
+  80: null,
+  96: null,
+} as const;
+
+const semanticSpacing = {
+  // Component spacing
+  component: {
+    xs: INTERNAL_SPACING[1], // 4px
+    sm: INTERNAL_SPACING[2], // 8px
+    md: INTERNAL_SPACING[4], // 16px
+    lg: INTERNAL_SPACING[6], // 24px
+    xl: INTERNAL_SPACING[8], // 32px
+    '2xl': INTERNAL_SPACING[12], // 48px
+  },
+
+  // Layout spacing
+  layout: {
+    xs: INTERNAL_SPACING[4], // 16px
+    sm: INTERNAL_SPACING[6], // 24px
+    md: INTERNAL_SPACING[8], // 32px
+    lg: INTERNAL_SPACING[12], // 48px
+    xl: INTERNAL_SPACING[16], // 64px
+    '2xl': INTERNAL_SPACING[24], // 96px
+  },
+
+  // Container spacing
+  container: {
+    xs: INTERNAL_SPACING[4], // 16px
+    sm: INTERNAL_SPACING[6], // 24px
+    md: INTERNAL_SPACING[8], // 32px
+    lg: INTERNAL_SPACING[12], // 48px
+    xl: INTERNAL_SPACING[16], // 64px
+  },
+
+  // All primitive spacing for utilities
+  ...INTERNAL_SPACING,
+} as const;
+
+export { SPACING, semanticSpacing };

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

@@ -0,0 +1,35 @@
+const FONT_FAMILY = {
+  base: null,
+};
+
+const TYPOGRAPHY_STYLE_SET = {
+  fontWeight: null,
+  fontSize: null,
+  lineHeight: null,
+  letterSpacing: null,
+} as const;
+
+const TYPOGRAPHY_THEME_CONTRACT = {
+  xl: {
+    light: TYPOGRAPHY_STYLE_SET,
+    medium: TYPOGRAPHY_STYLE_SET,
+    bold: TYPOGRAPHY_STYLE_SET,
+  },
+  lg: {
+    light: TYPOGRAPHY_STYLE_SET,
+    medium: TYPOGRAPHY_STYLE_SET,
+    bold: TYPOGRAPHY_STYLE_SET,
+  },
+  md: {
+    light: TYPOGRAPHY_STYLE_SET,
+    medium: TYPOGRAPHY_STYLE_SET,
+    bold: TYPOGRAPHY_STYLE_SET,
+  },
+  sm: {
+    light: TYPOGRAPHY_STYLE_SET,
+    medium: TYPOGRAPHY_STYLE_SET,
+    bold: TYPOGRAPHY_STYLE_SET,
+  },
+} as const;
+
+export { FONT_FAMILY, TYPOGRAPHY_THEME_CONTRACT };

package/src/themes/tokens/tokens.css.ts

@@ -0,0 +1,42 @@
+import { createThemeContract } from '@vanilla-extract/css';
+
+import {
+  ACTION_COLORS,
+  BORDER_COLORS,
+  ICON_COLORS,
+  INPUT_COLORS,
+  SHADOW_COLORS,
+  SURFACE_COLORS,
+  TEXT_COLORS,
+} from './semantic/colors.js';
+import { SPACING } from './semantic/spacing.js';
+import { FONT_FAMILY, TYPOGRAPHY_THEME_CONTRACT } from './semantic/typography.js';
+import { BORDER_RADIUS, BORDER_WIDTH } from './semantic/borders.js';
+import { BOX_SHADOWS } from './semantic/shadows.js';
+
+const themeContract = createThemeContract({
+  colors: {
+    ...ACTION_COLORS,
+    ...TEXT_COLORS,
+    ...SURFACE_COLORS,
+    ...BORDER_COLORS,
+    ...ICON_COLORS,
+    ...INPUT_COLORS,
+    ...SHADOW_COLORS,
+  },
+  typography: {
+    fontFamily: FONT_FAMILY,
+    display: TYPOGRAPHY_THEME_CONTRACT,
+    heading: TYPOGRAPHY_THEME_CONTRACT,
+    subheading: TYPOGRAPHY_THEME_CONTRACT,
+    body: TYPOGRAPHY_THEME_CONTRACT,
+    caption: TYPOGRAPHY_THEME_CONTRACT,
+    label: TYPOGRAPHY_THEME_CONTRACT,
+  },
+  spacing: SPACING,
+  borderRadius: BORDER_RADIUS,
+  borderWidth: BORDER_WIDTH,
+  boxShadow: BOX_SHADOWS,
+});
+
+export { themeContract };

package/src/types/theming.ts

@@ -0,0 +1,14 @@
+import type {
+  BREAKPOINT__LG,
+  BREAKPOINT__MD,
+  BREAKPOINT__SM,
+  COLOR_SCHEME__DARK,
+  COLOR_SCHEME__LIGHT,
+  COLOR_SCHEME__SYSTEM,
+} from '../constants/theming.js';
+
+type ColorScheme = typeof COLOR_SCHEME__SYSTEM | typeof COLOR_SCHEME__DARK | typeof COLOR_SCHEME__LIGHT;
+
+type Breakpoint = typeof BREAKPOINT__SM | typeof BREAKPOINT__MD | typeof BREAKPOINT__LG;
+
+export type { ColorScheme, Breakpoint };