zyzz 0.0.0 → 0.0.2

package/src/default.ts

@@ -0,0 +1,484 @@
+/**
+ * Opt-in default configuration with appearance controls and bundled design tokens.
+ * @module
+ */
+import { Config } from 'zyzz'
+
+/**
+ * Raw bundled values, independent of portable references.
+ *
+ * Breakpoints, containers, spacing, radii, font sizes, weights, tracking, and
+ * leading use the conventional named and quarter-rem scales. Fractional spacing
+ * steps are omitted because token paths reserve the dot separator. Colors are
+ * ten-step light/dark scales plus `background`, `grayAlpha`, `black`, and
+ * `white`. `foreground` aliases `gray.1000` and `surface` aliases
+ * `background.100`. Font stacks lead with the named faces and fall back to
+ * system fonts. No fonts are loaded.
+ */
+export const tokens = {
+  borderRadius: {
+    xs: '0.125rem',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    '4xl': '2rem',
+  },
+  breakpoints: {
+    sm: '40rem',
+    md: '48rem',
+    lg: '64rem',
+    xl: '80rem',
+    '2xl': '96rem',
+  },
+  color: {
+    amber: {
+      100: { dark: '#291800', light: '#fff6e1' },
+      200: { dark: '#331b00', light: '#fff4d4' },
+      300: { dark: '#4f2900', light: '#fff1c8' },
+      400: { dark: '#573200', light: '#ffdd84' },
+      500: { dark: '#6c4100', light: '#ffc85e' },
+      600: { dark: '#e99c00', light: '#fa0' },
+      700: '#ffb200',
+      800: '#f90',
+      900: { dark: '#f90', light: '#a64f00' },
+      1000: { dark: '#fff3d9', light: '#541c00' },
+    },
+    background: {
+      100: { dark: '#000', light: '#fff' },
+      200: { dark: '#000', light: '#fafafa' },
+    },
+    black: '#000',
+    blue: {
+      100: { dark: '#06193a', light: '#f0f7ff' },
+      200: { dark: '#022248', light: '#eaf4ff' },
+      300: { dark: '#002f62', light: '#e0efff' },
+      400: { dark: '#003771', light: '#cce7ff' },
+      500: { dark: '#004287', light: '#97ccff' },
+      600: { dark: '#0090ff', light: '#51aeff' },
+      700: { dark: '#0071f6', light: '#0070f7' },
+      800: { dark: '#005fd8', light: '#005edc' },
+      900: { dark: '#50a8ff', light: '#0064e2' },
+      1000: { dark: '#ebf6ff', light: '#002453' },
+    },
+    foreground: { dark: '#ededed', light: '#171717' },
+    gray: {
+      100: { dark: '#1a1a1a', light: '#f2f2f2' },
+      200: { dark: '#1f1f1f', light: '#ebebeb' },
+      300: { dark: '#292929', light: '#e6e6e6' },
+      400: { dark: '#2e2e2e', light: '#eaeaea' },
+      500: { dark: '#454545', light: '#c9c9c9' },
+      600: { dark: '#878787', light: '#a8a8a8' },
+      700: '#8f8f8f',
+      800: '#7d7d7d',
+      900: { dark: '#a0a0a0', light: '#4d4d4d' },
+      1000: { dark: '#ededed', light: '#171717' },
+    },
+    grayAlpha: {
+      100: { dark: '#ffffff0f', light: '#0000000d' },
+      200: { dark: '#ffffff17', light: '#00000015' },
+      300: { dark: '#ffffff21', light: '#0000001a' },
+      400: { dark: '#ffffff24', light: '#00000014' },
+      500: { dark: '#ffffff3d', light: '#00000036' },
+      600: { dark: '#ffffff82', light: '#0000003d' },
+      700: { dark: '#ffffff8a', light: '#00000070' },
+      800: { dark: '#ffffff78', light: '#00000082' },
+      900: { dark: '#ffffff9c', light: '#000000b3' },
+      1000: { dark: '#ffffffeb', light: '#000000e8' },
+    },
+    green: {
+      100: { dark: '#00250a', light: '#ecfdec' },
+      200: { dark: '#003110', light: '#e5fce7' },
+      300: { dark: '#003814', light: '#d3fad1' },
+      400: { dark: '#004616', light: '#b9f5bc' },
+      500: { dark: '#00661d', light: '#82eb8d' },
+      600: { dark: '#009431', light: '#4ce15e' },
+      700: { dark: '#00ab3e', light: '#28a948' },
+      800: { dark: '#009335', light: '#279141' },
+      900: { dark: '#00ca52', light: '#107d32' },
+      1000: { dark: '#daffe5', light: '#00370d' },
+    },
+    pink: {
+      100: { dark: '#310d1e', light: '#ffeaf5' },
+      200: { dark: '#420c25', light: '#ffeaf2' },
+      300: { dark: '#571032', light: '#ffe0eb' },
+      400: { dark: '#5d0c34', light: '#ffd5e1' },
+      500: { dark: '#76063f', light: '#fdb3cc' },
+      600: { dark: '#b90056', light: '#f97ea7' },
+      700: { dark: '#f12b82', light: '#f22782' },
+      800: { dark: '#e6006e', light: '#e4106e' },
+      900: { dark: '#ff518d', light: '#c41562' },
+      1000: { dark: '#ffeaf4', light: '#460523' },
+    },
+    purple: {
+      100: { dark: '#290c33', light: '#f9f0ff' },
+      200: { dark: '#341142', light: '#f9f1ff' },
+      300: { dark: '#47185e', light: '#f5e8ff' },
+      400: { dark: '#541a76', light: '#f1d9ff' },
+      500: { dark: '#642290', light: '#dda9ff' },
+      600: { dark: '#9440d5', light: '#c77dff' },
+      700: { dark: '#9440d5', light: '#9f00f4' },
+      800: { dark: '#7d2bba', light: '#8400cd' },
+      900: { dark: '#c472fb', light: '#7c00c9' },
+      1000: { dark: '#faedff', light: '#2e004d' },
+    },
+    red: {
+      100: { dark: '#330a11', light: '#ffeef0' },
+      200: { dark: '#440d13', light: '#ffe9ea' },
+      300: { dark: '#5d0e17', light: '#ffe4e5' },
+      400: { dark: '#6f101b', light: '#ffd8d7' },
+      500: { dark: '#88151f', light: '#ffb5b6' },
+      600: { dark: '#f32e40', light: '#ff6a6e' },
+      700: { dark: '#f13242', light: '#fc0035' },
+      800: { dark: '#e2162a', light: '#e70022' },
+      900: { dark: '#ff5e63', light: '#d60020' },
+      1000: { dark: '#ffeaed', light: '#46000c' },
+    },
+    surface: { dark: '#000', light: '#fff' },
+    teal: {
+      100: { dark: '#00211b', light: '#dffffb' },
+      200: { dark: '#002922', light: '#ddfef6' },
+      300: { dark: '#003b33', light: '#ccf9f1' },
+      400: { dark: '#003f35', light: '#b1f7ec' },
+      500: { dark: '#005f53', light: '#52f0db' },
+      600: { dark: '#009885', light: '#00e2c4' },
+      700: { dark: '#00a794', light: '#00a694' },
+      800: '#008d7d',
+      900: { dark: '#00c9b5', light: '#007a6e' },
+      1000: { dark: '#cefff5', light: '#003d34' },
+    },
+    white: '#fff',
+  },
+  containers: {
+    '3xs': '16rem',
+    '2xs': '18rem',
+    xs: '20rem',
+    sm: '24rem',
+    md: '28rem',
+    lg: '32rem',
+    xl: '36rem',
+    '2xl': '42rem',
+    '3xl': '48rem',
+    '4xl': '56rem',
+    '5xl': '64rem',
+    '6xl': '72rem',
+    '7xl': '80rem',
+  },
+  fontFamily: {
+    mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    sans: 'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    '9xl': '8rem',
+  },
+  fontWeight: {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+  letterSpacing: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0em',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+  lineHeight: {
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+  },
+  spacing: {
+    0: '0rem',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    11: '2.75rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    28: '7rem',
+    32: '8rem',
+    36: '9rem',
+    40: '10rem',
+    44: '11rem',
+    48: '12rem',
+    52: '13rem',
+    56: '14rem',
+    60: '15rem',
+    64: '16rem',
+    72: '18rem',
+    80: '20rem',
+    96: '24rem',
+    px: '1px',
+  },
+} as const
+
+/** Default appearance, restoration script, and authoring helpers with bundled light/dark tokens. */
+// Generated from tokens by scripts/default-theme.ts; edit tokens and regenerate.
+export const { appearance, script, style, theme, variants } = Config.create({
+  theme: {
+    borderRadius: {
+      xs: '0.125rem',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      '2xl': '1rem',
+      '3xl': '1.5rem',
+      '4xl': '2rem',
+    },
+    breakpoints: {
+      sm: '40rem',
+      md: '48rem',
+      lg: '64rem',
+      xl: '80rem',
+      '2xl': '96rem',
+    },
+    color: {
+      amber: {
+        100: { dark: '#291800', light: '#fff6e1' },
+        200: { dark: '#331b00', light: '#fff4d4' },
+        300: { dark: '#4f2900', light: '#fff1c8' },
+        400: { dark: '#573200', light: '#ffdd84' },
+        500: { dark: '#6c4100', light: '#ffc85e' },
+        600: { dark: '#e99c00', light: '#fa0' },
+        700: '#ffb200',
+        800: '#f90',
+        900: { dark: '#f90', light: '#a64f00' },
+        1000: { dark: '#fff3d9', light: '#541c00' },
+      },
+      background: {
+        100: { dark: '#000', light: '#fff' },
+        200: { dark: '#000', light: '#fafafa' },
+      },
+      black: '#000',
+      blue: {
+        100: { dark: '#06193a', light: '#f0f7ff' },
+        200: { dark: '#022248', light: '#eaf4ff' },
+        300: { dark: '#002f62', light: '#e0efff' },
+        400: { dark: '#003771', light: '#cce7ff' },
+        500: { dark: '#004287', light: '#97ccff' },
+        600: { dark: '#0090ff', light: '#51aeff' },
+        700: { dark: '#0071f6', light: '#0070f7' },
+        800: { dark: '#005fd8', light: '#005edc' },
+        900: { dark: '#50a8ff', light: '#0064e2' },
+        1000: { dark: '#ebf6ff', light: '#002453' },
+      },
+      foreground: { dark: '#ededed', light: '#171717' },
+      gray: {
+        100: { dark: '#1a1a1a', light: '#f2f2f2' },
+        200: { dark: '#1f1f1f', light: '#ebebeb' },
+        300: { dark: '#292929', light: '#e6e6e6' },
+        400: { dark: '#2e2e2e', light: '#eaeaea' },
+        500: { dark: '#454545', light: '#c9c9c9' },
+        600: { dark: '#878787', light: '#a8a8a8' },
+        700: '#8f8f8f',
+        800: '#7d7d7d',
+        900: { dark: '#a0a0a0', light: '#4d4d4d' },
+        1000: { dark: '#ededed', light: '#171717' },
+      },
+      grayAlpha: {
+        100: { dark: '#ffffff0f', light: '#0000000d' },
+        200: { dark: '#ffffff17', light: '#00000015' },
+        300: { dark: '#ffffff21', light: '#0000001a' },
+        400: { dark: '#ffffff24', light: '#00000014' },
+        500: { dark: '#ffffff3d', light: '#00000036' },
+        600: { dark: '#ffffff82', light: '#0000003d' },
+        700: { dark: '#ffffff8a', light: '#00000070' },
+        800: { dark: '#ffffff78', light: '#00000082' },
+        900: { dark: '#ffffff9c', light: '#000000b3' },
+        1000: { dark: '#ffffffeb', light: '#000000e8' },
+      },
+      green: {
+        100: { dark: '#00250a', light: '#ecfdec' },
+        200: { dark: '#003110', light: '#e5fce7' },
+        300: { dark: '#003814', light: '#d3fad1' },
+        400: { dark: '#004616', light: '#b9f5bc' },
+        500: { dark: '#00661d', light: '#82eb8d' },
+        600: { dark: '#009431', light: '#4ce15e' },
+        700: { dark: '#00ab3e', light: '#28a948' },
+        800: { dark: '#009335', light: '#279141' },
+        900: { dark: '#00ca52', light: '#107d32' },
+        1000: { dark: '#daffe5', light: '#00370d' },
+      },
+      pink: {
+        100: { dark: '#310d1e', light: '#ffeaf5' },
+        200: { dark: '#420c25', light: '#ffeaf2' },
+        300: { dark: '#571032', light: '#ffe0eb' },
+        400: { dark: '#5d0c34', light: '#ffd5e1' },
+        500: { dark: '#76063f', light: '#fdb3cc' },
+        600: { dark: '#b90056', light: '#f97ea7' },
+        700: { dark: '#f12b82', light: '#f22782' },
+        800: { dark: '#e6006e', light: '#e4106e' },
+        900: { dark: '#ff518d', light: '#c41562' },
+        1000: { dark: '#ffeaf4', light: '#460523' },
+      },
+      purple: {
+        100: { dark: '#290c33', light: '#f9f0ff' },
+        200: { dark: '#341142', light: '#f9f1ff' },
+        300: { dark: '#47185e', light: '#f5e8ff' },
+        400: { dark: '#541a76', light: '#f1d9ff' },
+        500: { dark: '#642290', light: '#dda9ff' },
+        600: { dark: '#9440d5', light: '#c77dff' },
+        700: { dark: '#9440d5', light: '#9f00f4' },
+        800: { dark: '#7d2bba', light: '#8400cd' },
+        900: { dark: '#c472fb', light: '#7c00c9' },
+        1000: { dark: '#faedff', light: '#2e004d' },
+      },
+      red: {
+        100: { dark: '#330a11', light: '#ffeef0' },
+        200: { dark: '#440d13', light: '#ffe9ea' },
+        300: { dark: '#5d0e17', light: '#ffe4e5' },
+        400: { dark: '#6f101b', light: '#ffd8d7' },
+        500: { dark: '#88151f', light: '#ffb5b6' },
+        600: { dark: '#f32e40', light: '#ff6a6e' },
+        700: { dark: '#f13242', light: '#fc0035' },
+        800: { dark: '#e2162a', light: '#e70022' },
+        900: { dark: '#ff5e63', light: '#d60020' },
+        1000: { dark: '#ffeaed', light: '#46000c' },
+      },
+      surface: { dark: '#000', light: '#fff' },
+      teal: {
+        100: { dark: '#00211b', light: '#dffffb' },
+        200: { dark: '#002922', light: '#ddfef6' },
+        300: { dark: '#003b33', light: '#ccf9f1' },
+        400: { dark: '#003f35', light: '#b1f7ec' },
+        500: { dark: '#005f53', light: '#52f0db' },
+        600: { dark: '#009885', light: '#00e2c4' },
+        700: { dark: '#00a794', light: '#00a694' },
+        800: '#008d7d',
+        900: { dark: '#00c9b5', light: '#007a6e' },
+        1000: { dark: '#cefff5', light: '#003d34' },
+      },
+      white: '#fff',
+    },
+    containers: {
+      '3xs': '16rem',
+      '2xs': '18rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    },
+    fontFamily: {
+      mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      sans: 'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '3.75rem',
+      '7xl': '4.5rem',
+      '8xl': '6rem',
+      '9xl': '8rem',
+    },
+    fontWeight: {
+      thin: 100,
+      extralight: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0em',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      tight: 1.25,
+      snug: 1.375,
+      normal: 1.5,
+      relaxed: 1.625,
+      loose: 2,
+    },
+    spacing: {
+      0: '0rem',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+      11: '2.75rem',
+      12: '3rem',
+      14: '3.5rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      80: '20rem',
+      96: '24rem',
+      px: '1px',
+    },
+  },
+})

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Exposes token-free authoring, ordered style definitions, and theme contracts.
+ * @module
+ */
+/** Explicit theme and layer authoring contracts. */
+export * as Config from './Config.js'
+/** Token-free literal authoring; requires a compile-time source transform. */
+export { style } from './styleFunction.js'
+/** Ordered composition of applied styling props. */
+export { cx } from './cx.js'
+/** Inferred component inputs from callable style definitions. */
+export type * as Props from './Props.js'
+/** Typed literal style definitions and validation diagnostics. */
+export * as Style from './Style.js'
+/** Typed theme contracts and compatible token overrides. */
+export * as Theme from './Theme.js'
+/** Typed CSS variable declarations and inline assignments. */
+export { variable } from './variable.js'
+/** Single-element finite recipes compiled ahead of time. */
+export { variants } from './variants.js'