@fastwork/xosmoz-theme 0.0.3

package/dist/index.mjs

@@ -0,0 +1,839 @@
+// src/tokens/colors.ts
+var primary = {
+  50: "#E5F0FF",
+  100: "#CCE0FF",
+  200: "#99C2FF",
+  300: "#66A3FF",
+  400: "#3385FF",
+  500: "#0569FF",
+  600: "#0052CC",
+  700: "#003D99",
+  800: "#002966",
+  900: "#001433"
+};
+var neutral = {
+  50: "#FFFFFF",
+  100: "#FBFBFC",
+  200: "#F6F7F8",
+  300: "#E8EAEE",
+  400: "#D6DAE1",
+  500: "#9BA6B5",
+  600: "#8793A6",
+  700: "#728197",
+  800: "#485261",
+  900: "#38404C",
+  1e3: "#2B313B",
+  1100: "#000000"
+};
+var green = {
+  50: "#EBFFF3",
+  100: "#D7F1E2",
+  200: "#AFE3C5",
+  300: "#87D5A7",
+  400: "#5FC78A",
+  500: "#37B96D",
+  600: "#2C9457",
+  700: "#216F41",
+  800: "#164A2C",
+  900: "#0B2516"
+};
+var yellow = {
+  50: "#FFF8E5",
+  100: "#FFF4CC",
+  200: "#FFE999",
+  300: "#FFDE66",
+  400: "#FFD333",
+  500: "#FFC800",
+  600: "#CCA000",
+  700: "#997800",
+  800: "#665000",
+  900: "#332800"
+};
+var red = {
+  50: "#FCE3E3",
+  100: "#FAD8D7",
+  200: "#F5B0AF",
+  300: "#F08987",
+  400: "#EC615F",
+  500: "#E73A37",
+  600: "#B92E2C",
+  700: "#8A2321",
+  800: "#5C1716",
+  900: "#411110"
+};
+var orange = {
+  50: "#FEF0E6",
+  100: "#FEE1CD",
+  200: "#FCC49C",
+  300: "#FBA66A",
+  400: "#FA8938",
+  500: "#F97416",
+  600: "#C75605",
+  700: "#954004",
+  800: "#632B03",
+  900: "#321501"
+};
+var purple = {
+  50: "#F0F2FD",
+  100: "#E9E8FA",
+  200: "#D2D1F6",
+  300: "#BCBBF1",
+  400: "#A5A4ED",
+  500: "#8F8DE8",
+  600: "#7271BA",
+  700: "#56558B",
+  800: "#39385D",
+  900: "#1D1C2E"
+};
+var cyan = {
+  50: "#E5F5FC",
+  100: "#D7EFF8",
+  200: "#AFDEF1",
+  300: "#88CEEA",
+  400: "#60BDE3",
+  500: "#38ADDC",
+  600: "#2D8AB0",
+  700: "#226884",
+  800: "#164558",
+  900: "#0B232C"
+};
+var blackAlpha = {
+  50: "rgb(0 0 0 / 0.05)",
+  100: "rgb(0 0 0 / 0.1)",
+  200: "rgb(0 0 0 / 0.2)",
+  300: "rgb(0 0 0 / 0.3)",
+  400: "rgb(0 0 0 / 0.4)",
+  500: "rgb(0 0 0 / 0.5)",
+  600: "rgb(0 0 0 / 0.6)",
+  700: "rgb(0 0 0 / 0.7)",
+  800: "rgb(0 0 0 / 0.8)",
+  900: "rgb(0 0 0 / 0.9)"
+};
+var whiteAlpha = {
+  50: "rgb(255 255 255 / 0.05)",
+  100: "rgb(255 255 255 / 0.1)",
+  200: "rgb(255 255 255 / 0.2)",
+  300: "rgb(255 255 255 / 0.3)",
+  400: "rgb(255 255 255 / 0.4)",
+  500: "rgb(255 255 255 / 0.5)",
+  600: "rgb(255 255 255 / 0.6)",
+  700: "rgb(255 255 255 / 0.7)",
+  800: "rgb(255 255 255 / 0.8)",
+  900: "rgb(255 255 255 / 0.9)"
+};
+var colors = {
+  primary,
+  neutral,
+  green,
+  yellow,
+  red,
+  orange,
+  purple,
+  cyan,
+  "black-alpha": blackAlpha,
+  "white-alpha": whiteAlpha
+};
+
+// src/tokens/typography.ts
+var fontSize = {
+  50: "0.5rem",
+  // 8px
+  100: "0.625rem",
+  // 10px
+  200: "0.75rem",
+  // 12px
+  300: "0.875rem",
+  // 14px
+  400: "1rem",
+  // 16px
+  500: "1.125rem",
+  // 18px
+  600: "1.25rem",
+  // 20px
+  700: "1.5rem",
+  // 24px
+  800: "1.625rem",
+  // 26px
+  900: "2rem",
+  // 32px
+  1e3: "2.375rem",
+  // 38px
+  1100: "2.5rem",
+  // 40px
+  1200: "2.6875rem",
+  // 43px
+  1300: "3rem",
+  // 48px
+  1400: "3.5rem",
+  // 56px
+  1500: "4rem",
+  // 64px
+  1600: "4.5rem"
+  // 72px
+};
+var fontWeight = {
+  100: 100,
+  200: 200,
+  300: 300,
+  400: 400,
+  500: 500,
+  600: 600,
+  700: 700,
+  800: 800,
+  900: 900
+};
+var fontFamily = {
+  primary: '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+  secondary: '"Fastwork", "Noto Sans Thai", "Noto Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif'
+};
+var lineHeight = {
+  "100pct": "1",
+  "125pct": "1.25",
+  "135pct": "1.35",
+  "150pct": "1.5",
+  "165pct": "1.65",
+  "200pct": "2"
+};
+var headings = {
+  h1: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[1600],
+      // 72px
+      mobile: fontSize[1300]
+      // 48px
+    },
+    fontWeight: fontWeight[700]
+  },
+  h2: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[1500],
+      // 64px
+      mobile: fontSize[1200]
+      // 43px
+    },
+    fontWeight: fontWeight[700]
+  },
+  h3: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[1400],
+      // 56px
+      mobile: fontSize[1e3]
+      // 38px
+    },
+    fontWeight: fontWeight[700]
+  },
+  h4: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[1300],
+      // 48px
+      mobile: fontSize[900]
+      // 32px
+    },
+    fontWeight: fontWeight[700]
+  },
+  h5: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[1100],
+      // 40px
+      mobile: fontSize[800]
+      // 26px
+    },
+    fontWeight: fontWeight[700]
+  },
+  h6: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[900],
+      // 32px
+      mobile: fontSize[700]
+      // 24px
+    },
+    fontWeight: fontWeight[700]
+  }
+};
+var titles = {
+  title1: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[700],
+      // 24px
+      mobile: fontSize[600]
+      // 20px
+    },
+    fontWeight: fontWeight[700]
+  },
+  title2: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[600],
+      // 20px
+      mobile: fontSize[500]
+      // 18px
+    },
+    fontWeight: fontWeight[700]
+  },
+  title3: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[500],
+      // 18px
+      mobile: fontSize[400]
+      // 16px
+    },
+    fontWeight: fontWeight[700]
+  },
+  title4: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[400],
+      // 16px
+      mobile: fontSize[300]
+      // 14px
+    },
+    fontWeight: fontWeight[700]
+  }
+};
+var subtitles = {
+  subtitle1Bold: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[400],
+      // 16px
+      mobile: fontSize[300]
+      // 14px
+    },
+    fontWeight: fontWeight[700]
+  },
+  subtitle1Regular: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[400],
+      // 16px
+      mobile: fontSize[300]
+      // 14px
+    },
+    fontWeight: fontWeight[400]
+  },
+  subtitle2Bold: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[300],
+      // 14px
+      mobile: fontSize[200]
+      // 12px
+    },
+    fontWeight: fontWeight[700]
+  },
+  subtitle2Regular: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[300],
+      // 14px
+      mobile: fontSize[200]
+      // 12px
+    },
+    fontWeight: fontWeight[400]
+  },
+  subtitle3Bold: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[200],
+      // 12px
+      mobile: fontSize[100]
+      // 10px
+    },
+    fontWeight: fontWeight[700]
+  },
+  subtitle3Regular: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[200],
+      // 12px
+      mobile: fontSize[100]
+      // 10px
+    },
+    fontWeight: fontWeight[400]
+  }
+};
+var body = {
+  body1: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[400],
+      // 16px
+      mobile: fontSize[300]
+      // 14px
+    },
+    fontWeight: fontWeight[400]
+  },
+  body2: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[300],
+      // 14px
+      mobile: fontSize[200]
+      // 12px
+    },
+    fontWeight: fontWeight[400]
+  },
+  body3: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[200],
+      // 12px
+      mobile: fontSize[100]
+      // 10px
+    },
+    fontWeight: fontWeight[400]
+  },
+  body4: {
+    fontFamily: fontFamily.secondary,
+    fontSize: {
+      desktop: fontSize[100],
+      // 10px
+      mobile: fontSize[50]
+      // 8px
+    },
+    fontWeight: fontWeight[400]
+  }
+};
+var typography = {
+  fontSize,
+  fontWeight,
+  fontFamily,
+  lineHeight,
+  headings,
+  titles,
+  subtitles,
+  body
+};
+
+// src/tokens/spacing.ts
+var 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
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  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)",
+  none: "0 0 #0000"
+};
+
+// src/tokens/radius.ts
+var borderRadius = {
+  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"
+};
+
+// src/theme.ts
+var defaultTheme = {
+  colors,
+  typography,
+  spacing,
+  borderRadius,
+  shadows
+};
+function createTheme(overrides = {}) {
+  return {
+    ...defaultTheme,
+    ...overrides,
+    colors: {
+      ...defaultTheme.colors,
+      ...overrides.colors
+    },
+    typography: {
+      ...defaultTheme.typography,
+      ...overrides.typography
+    },
+    spacing: {
+      ...defaultTheme.spacing,
+      ...overrides.spacing
+    },
+    borderRadius: {
+      ...defaultTheme.borderRadius,
+      ...overrides.borderRadius
+    },
+    shadows: {
+      ...defaultTheme.shadows,
+      ...overrides.shadows
+    }
+  };
+}
+function themeToCSSVariables(theme) {
+  const cssVars = {};
+  Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
+    Object.entries(colorScale).forEach(([shade, value]) => {
+      cssVars[`--xosmoz-color-${colorName}-${shade}`] = value;
+    });
+  });
+  Object.entries(theme.typography.fontSize).forEach(([key, value]) => {
+    cssVars[`--xosmoz-font-size-${key}`] = value;
+  });
+  Object.entries(theme.typography.fontWeight).forEach(([key, value]) => {
+    cssVars[`--xosmoz-font-weight-${key}`] = String(value);
+  });
+  Object.entries(theme.typography.lineHeight).forEach(([key, value]) => {
+    cssVars[`--xosmoz-line-height-${key}`] = value;
+  });
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    cssVars[`--xosmoz-spacing-${key}`] = value;
+  });
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    cssVars[`--xosmoz-radius-${key}`] = value;
+  });
+  Object.entries(theme.shadows).forEach(([key, value]) => {
+    cssVars[`--xosmoz-shadow-${key}`] = value;
+  });
+  return cssVars;
+}
+function generateCSSVariables(theme = defaultTheme) {
+  const cssVars = themeToCSSVariables(theme);
+  const cssLines = Object.entries(cssVars).map(
+    ([key, value]) => `  ${key}: ${value};`
+  );
+  return `:root {
+${cssLines.join("\n")}
+}`;
+}
+
+// src/themes/light.ts
+var lightTheme = {
+  name: "light",
+  colors: {
+    // Base
+    background: colors.neutral[50],
+    foreground: colors.neutral[900],
+    // Muted
+    muted: colors.neutral[100],
+    mutedForeground: colors.neutral[600],
+    // Border and input
+    border: colors.neutral[200],
+    input: colors.neutral[200],
+    ring: colors.primary[500],
+    // Card
+    card: colors.neutral[50],
+    cardForeground: colors.neutral[900],
+    // Popover
+    popover: colors.neutral[50],
+    popoverForeground: colors.neutral[900],
+    // Primary
+    primary: colors.primary[500],
+    primaryForeground: colors.neutral[50],
+    // Secondary
+    secondary: colors.neutral[600],
+    secondaryForeground: colors.neutral[50],
+    // Accent
+    accent: colors.primary[600],
+    accentForeground: colors.neutral[50],
+    // Destructive
+    destructive: colors.red[500],
+    destructiveForeground: colors.neutral[50],
+    // Success
+    success: colors.green[500],
+    successForeground: colors.neutral[50],
+    // Warning
+    warning: colors.yellow[500],
+    warningForeground: colors.neutral[900],
+    // Info
+    info: colors.cyan[500],
+    infoForeground: colors.neutral[50]
+  }
+};
+
+// src/themes/dark.ts
+var darkTheme = {
+  name: "dark",
+  colors: {
+    // Base
+    background: colors.neutral[900],
+    foreground: colors.neutral[50],
+    // Muted
+    muted: colors.neutral[900],
+    mutedForeground: colors.neutral[400],
+    // Border and input
+    border: colors.neutral[800],
+    input: colors.neutral[800],
+    ring: colors.primary[400],
+    // Card
+    card: colors.neutral[900],
+    cardForeground: colors.neutral[50],
+    // Popover
+    popover: colors.neutral[900],
+    popoverForeground: colors.neutral[50],
+    // Primary
+    primary: colors.primary[500],
+    primaryForeground: colors.neutral[50],
+    // Secondary
+    secondary: colors.neutral[400],
+    secondaryForeground: colors.neutral[900],
+    // Accent
+    accent: colors.primary[400],
+    accentForeground: colors.neutral[50],
+    // Destructive
+    destructive: colors.red[500],
+    destructiveForeground: colors.neutral[50],
+    // Success
+    success: colors.green[500],
+    successForeground: colors.neutral[50],
+    // Warning
+    warning: colors.yellow[500],
+    warningForeground: colors.neutral[900],
+    // Info
+    info: colors.cyan[500],
+    infoForeground: colors.neutral[50]
+  }
+};
+
+// src/themes/cyberpunk.ts
+var cyberpunkTheme = {
+  name: "cyberpunk",
+  colors: {
+    // Base - Deep dark with slight purple tint
+    background: "#0a0118",
+    foreground: "#e0e7ff",
+    // Muted - Dark purple
+    muted: "#1e1432",
+    mutedForeground: "#a78bfa",
+    // Border and input - Neon purple
+    border: "#6d28d9",
+    input: "#4c1d95",
+    ring: "#a855f7",
+    // Card - Slightly lighter dark
+    card: "#150828",
+    cardForeground: "#e0e7ff",
+    // Popover
+    popover: "#1e1432",
+    popoverForeground: "#e0e7ff",
+    // Primary - Neon pink/magenta
+    primary: "#f0abfc",
+    primaryForeground: "#0a0118",
+    // Secondary - Neon cyan
+    secondary: "#22d3ee",
+    secondaryForeground: "#0a0118",
+    // Accent - Neon yellow
+    accent: "#fde047",
+    accentForeground: "#0a0118",
+    // Destructive - Hot pink
+    destructive: "#ec4899",
+    destructiveForeground: "#0a0118",
+    // Success - Neon green
+    success: "#10b981",
+    successForeground: "#0a0118",
+    // Warning - Electric orange
+    warning: "#fb923c",
+    warningForeground: "#0a0118",
+    // Info - Neon blue
+    info: "#3b82f6",
+    infoForeground: "#0a0118"
+  }
+};
+
+// src/themes/forest.ts
+var forestTheme = {
+  name: "forest",
+  colors: {
+    // Base - Soft cream/beige
+    background: "#faf8f3",
+    foreground: "#1c3d29",
+    // Muted - Light sage
+    muted: "#e8f0e6",
+    mutedForeground: "#4a6f58",
+    // Border and input - Moss green
+    border: "#c4d9c4",
+    input: "#d4e4d4",
+    ring: "#2d7d46",
+    // Card - White with slight green tint
+    card: "#f5faf5",
+    cardForeground: "#1c3d29",
+    // Popover
+    popover: "#ffffff",
+    popoverForeground: "#1c3d29",
+    // Primary - Forest green
+    primary: "#2d7d46",
+    primaryForeground: "#ffffff",
+    // Secondary - Olive
+    secondary: "#6b8e4e",
+    secondaryForeground: "#ffffff",
+    // Accent - Amber
+    accent: "#d97706",
+    accentForeground: "#ffffff",
+    // Destructive - Rust red
+    destructive: "#b91c1c",
+    destructiveForeground: "#ffffff",
+    // Success - Vibrant green
+    success: "#059669",
+    successForeground: "#ffffff",
+    // Warning - Golden yellow
+    warning: "#ca8a04",
+    warningForeground: "#1c3d29",
+    // Info - Sky blue
+    info: "#0284c7",
+    infoForeground: "#ffffff"
+  }
+};
+
+// src/themes/ocean.ts
+var oceanTheme = {
+  name: "ocean",
+  colors: {
+    // Base - Deep navy blue
+    background: "#0c1e2e",
+    foreground: "#e0f2fe",
+    // Muted - Dark ocean blue
+    muted: "#1e3a4f",
+    mutedForeground: "#94c5d9",
+    // Border and input - Teal
+    border: "#155e75",
+    input: "#164e63",
+    ring: "#06b6d4",
+    // Card - Slightly lighter navy
+    card: "#14293d",
+    cardForeground: "#e0f2fe",
+    // Popover
+    popover: "#1e3a4f",
+    popoverForeground: "#e0f2fe",
+    // Primary - Bright cyan
+    primary: "#06b6d4",
+    primaryForeground: "#0c1e2e",
+    // Secondary - Aqua
+    secondary: "#14b8a6",
+    secondaryForeground: "#0c1e2e",
+    // Accent - Coral
+    accent: "#fb7185",
+    accentForeground: "#ffffff",
+    // Destructive - Bright red
+    destructive: "#ef4444",
+    destructiveForeground: "#ffffff",
+    // Success - Sea green
+    success: "#10b981",
+    successForeground: "#ffffff",
+    // Warning - Sandy yellow
+    warning: "#eab308",
+    warningForeground: "#0c1e2e",
+    // Info - Sky blue
+    info: "#38bdf8",
+    infoForeground: "#0c1e2e"
+  }
+};
+
+// src/themes/index.ts
+var themes = {
+  light: lightTheme,
+  dark: darkTheme,
+  cyberpunk: cyberpunkTheme,
+  forest: forestTheme,
+  ocean: oceanTheme
+};
+function getTheme(name) {
+  return themes[name];
+}
+function getThemeNames() {
+  return Object.keys(themes);
+}
+function createCustomTheme(name, colors2, baseTheme = "light") {
+  const base = themes[baseTheme];
+  return {
+    name,
+    colors: {
+      ...base.colors,
+      ...colors2
+    }
+  };
+}
+
+export { blackAlpha, body, borderRadius, colors, createCustomTheme, createTheme, cyan, cyberpunkTheme, darkTheme, defaultTheme, fontFamily, fontSize, fontWeight, forestTheme, generateCSSVariables, getTheme, getThemeNames, green, headings, lightTheme, lineHeight, neutral, oceanTheme, orange, primary, purple, red, shadows, spacing, subtitles, themeToCSSVariables, themes, titles, typography, whiteAlpha, yellow };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map