@yarcl/react 0.1.0 → 0.2.0

package/src/reference/DesignReference.tsx

@@ -1,374 +0,0 @@
-import type { ReactNode } from 'react';
-import { contrast, parseHex, readableOn } from '../color';
-import type { ColorPair, ColorToken, YarclShape } from '../define';
-import {
-  Button,
-  Card,
-  Heading,
-  IconButton,
-  Inline,
-  Input,
-  Stack,
-  Table,
-  Text,
-  type Color,
-  type Density,
-  type Radius,
-  type Shadow,
-  type Size,
-  type Spacing,
-  type TextStyle,
-  type Variant,
-} from '../index';
-import { useConfig } from '../runtime';
-import './reference.css';
-
-const keys = <T extends string>(group: object) => Object.keys(group) as T[];
-
-function ratio(background: string, token: ColorToken, mode: keyof ColorPair): string {
-  const bg = parseHex(background);
-  if (!bg) return 'n/a';
-  const onValue = typeof token.on === 'string' ? token.on : token.on?.[mode];
-  const fg = parseHex(onValue ?? readableOn(bg));
-  return fg ? `${contrast(bg, fg).toFixed(1)}:1` : 'n/a';
-}
-
-function Section({ title, description, children }: { title: string; description?: ReactNode; children: ReactNode }) {
-  return (
-    <Stack as="section" className="yarcl-ref-section">
-      <Heading level={2}>{title}</Heading>
-      {description != null && (
-        <Text as="p" muted>
-          {description}
-        </Text>
-      )}
-      {children}
-    </Stack>
-  );
-}
-
-function Code({ children }: { children: ReactNode }) {
-  return <code className="yarcl-ref-code">{children}</code>;
-}
-
-function KeyValues({ caption, rows }: { caption: string; rows: [string, ReactNode][] }) {
-  const config = useConfig();
-  return (
-    <Table caption={caption} density={config.defaults.density}>
-      <Table.Body>
-        {rows.map(([key, value]) => (
-          <Table.Row key={key}>
-            <Table.HeaderCell scope="row">{key}</Table.HeaderCell>
-            <Table.Cell>{value}</Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-}
-
-const pair = (value: ColorPair) => (
-  <>
-    <Code>{value.light}</Code> / <Code>{value.dark}</Code>
-  </>
-);
-
-/** Props for {@link DesignReference}. */
-export interface DesignReferenceProps {
-  /**
-   * Page heading.
-   * @default 'Design reference'
-   */
-  title?: ReactNode;
-}
-
-/**
- * A living reference of the active design system, rendered from the consumer's config:
- * colors with contrast ratios, the size scale with live controls, radii, variants, spacing,
- * shadows, fonts, text styles, heading levels, density, other tokens and defaults.
- * Import from `@yarcl/react/reference`.
- *
- * @example
- * ```tsx
- * import { DesignReference } from '@yarcl/react/reference';
- *
- * <DesignReference title="Acme design system" />
- * ```
- */
-export function DesignReference({ title = 'Design reference' }: DesignReferenceProps) {
-  const config = useConfig();
-  const shape = config as unknown as YarclShape;
-  const colors = keys<Color>(config.colors);
-  const variants = keys<Variant>(config.variants);
-  const { typography } = shape;
-
-  return (
-    <Stack gap={config.defaults.padding} className="yarcl-ref">
-      <Heading level={1}>{title}</Heading>
-
-      <Section title="Colors" description="Semantic colors for the color prop. Ratios are foreground on background, light / dark.">
-        <div className="yarcl-ref-grid">
-          {colors.map((key) => {
-            const token = shape.colors[key];
-            return (
-              <Card key={key} padding={config.defaults.gap} className="yarcl-ref-color">
-                <div className={`yarcl-ref-swatch yarcl-color-${key}`}>Aa</div>
-                <Stack gap={config.defaults.gap}>
-                  <Text textStyle={config.defaults.labelStyle}>{key}</Text>
-                  <Text textStyle={config.defaults.helperStyle} muted>
-                    {pair(token)}
-                  </Text>
-                  <Text textStyle={config.defaults.helperStyle} muted>
-                    {ratio(token.light, token, 'light')} / {ratio(token.dark, token, 'dark')}
-                  </Text>
-                </Stack>
-              </Card>
-            );
-          })}
-        </div>
-      </Section>
-
-      <Section title="Neutrals" description="Backgrounds, text and borders.">
-        <div className="yarcl-ref-grid">
-          {Object.entries(shape.neutrals).map(([key, value]) => (
-            <Card key={key} padding={config.defaults.gap} className="yarcl-ref-color">
-              <div className="yarcl-ref-swatch yarcl-ref-neutral" style={{ background: `var(--yarcl-neutral-${key})` }} />
-              <Text textStyle={config.defaults.labelStyle}>{key}</Text>
-              <Text textStyle={config.defaults.helperStyle} muted>
-                {pair(value)}
-              </Text>
-            </Card>
-          ))}
-        </div>
-      </Section>
-
-      <Section title="Sizes" description="One scale shared by every control, so controls of the same size line up.">
-        <Table caption="Control sizes" density={config.defaults.density}>
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Size</Table.HeaderCell>
-              <Table.HeaderCell>Height</Table.HeaderCell>
-              <Table.HeaderCell>Padding X</Table.HeaderCell>
-              <Table.HeaderCell>Font</Table.HeaderCell>
-              <Table.HeaderCell>Icon</Table.HeaderCell>
-              <Table.HeaderCell>Preview</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            {keys<Size>(config.sizes).map((key) => {
-              const size = shape.sizes[key];
-              return (
-                <Table.Row key={key}>
-                  <Table.HeaderCell scope="row">{key}</Table.HeaderCell>
-                  <Table.Cell>
-                    <Code>{size.height}</Code>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Code>{size.paddingX}</Code>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Code>{size.fontSize}</Code>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Code>{size.iconSize}</Code>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Inline gap={config.defaults.gap} wrap={false}>
-                      <Input size={key} placeholder="Input" aria-label={`Input ${key}`} className="yarcl-ref-input" />
-                      <Button size={key}>Button</Button>
-                      <IconButton size={key} aria-label="Add">
-                        +
-                      </IconButton>
-                    </Inline>
-                  </Table.Cell>
-                </Table.Row>
-              );
-            })}
-          </Table.Body>
-        </Table>
-      </Section>
-
-      <Section
-        title="Radii"
-        description={
-          shape.defaults.radius === 'size'
-            ? 'Controls use the radius named like their size; other keys are exceptions.'
-            : `Default radius: ${shape.defaults.radius}.`
-        }
-      >
-        <Inline>
-          {keys<Radius>(config.radii).map((key) => (
-            <Stack key={key} gap={config.defaults.gap} align="center">
-              <div className={`yarcl-ref-radius yarcl-radius-${key}`} />
-              <Text textStyle={config.defaults.labelStyle}>{key}</Text>
-              <Text textStyle={config.defaults.helperStyle} muted>
-                <Code>{shape.radii[key]}</Code>
-              </Text>
-            </Stack>
-          ))}
-        </Inline>
-      </Section>
-
-      <Section title="Variants" description="Recipes applied on top of any color.">
-        {variants.map((key) => {
-          const recipe = shape.variants[key];
-          return (
-            <Inline key={key}>
-              <Text textStyle={config.defaults.labelStyle} className="yarcl-ref-label">
-                {key}
-              </Text>
-              {colors.map((color) => (
-                <Button key={color} variant={key} color={color} size={config.defaults.size}>
-                  {color}
-                </Button>
-              ))}
-              <Text textStyle={config.defaults.helperStyle} muted>
-                background <Code>{recipe.background}</Code>, border <Code>{recipe.border}</Code>, text <Code>{recipe.text}</Code>
-              </Text>
-            </Inline>
-          );
-        })}
-      </Section>
-
-      <Section title="Spacing">
-        {keys<Spacing>(config.spacing).map((key) => (
-          <Inline key={key}>
-            <Text textStyle={config.defaults.labelStyle} className="yarcl-ref-label">
-              {key}
-            </Text>
-            <div className="yarcl-ref-space" style={{ width: `var(--yarcl-space-${key})` }} />
-            <Code>{shape.spacing[key]}</Code>
-          </Inline>
-        ))}
-      </Section>
-
-      <Section title="Shadows">
-        <Inline gap={config.defaults.padding}>
-          {keys<Shadow>(config.shadows).map((key) => (
-            <Card key={key} shadow={key} className="yarcl-ref-shadow">
-              <Text textStyle={config.defaults.labelStyle}>{key}</Text>
-            </Card>
-          ))}
-        </Inline>
-      </Section>
-
-      <Section title="Typography">
-        {(typography.fontFaces?.length ?? 0) > 0 && (
-          <Table caption="Font files" density={config.defaults.density}>
-            <Table.Head>
-              <Table.Row>
-                <Table.HeaderCell>Family</Table.HeaderCell>
-                <Table.HeaderCell>Source</Table.HeaderCell>
-                <Table.HeaderCell>Weight</Table.HeaderCell>
-                <Table.HeaderCell>Style</Table.HeaderCell>
-              </Table.Row>
-            </Table.Head>
-            <Table.Body>
-              {typography.fontFaces!.map((face, i) => (
-                <Table.Row key={i}>
-                  <Table.Cell>{face.family}</Table.Cell>
-                  <Table.Cell>
-                    <Code>{[face.src].flat().join(', ')}</Code>
-                  </Table.Cell>
-                  <Table.Cell>{face.weight ?? 'n/a'}</Table.Cell>
-                  <Table.Cell>{face.style ?? 'normal'}</Table.Cell>
-                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table>
-        )}
-        <KeyValues
-          caption="Families"
-          rows={Object.entries(typography.families).map(([key, stack]) => [
-            key,
-            <span style={{ fontFamily: `var(--yarcl-font-${key})` }}>
-              The quick brown fox <Code>{stack}</Code>
-            </span>,
-          ])}
-        />
-        <Table caption="Text styles" density={config.defaults.density}>
-          <Table.Body>
-            {keys<TextStyle>(config.typography.styles).map((key) => {
-              const style = typography.styles[key];
-              return (
-                <Table.Row key={key}>
-                  <Table.HeaderCell scope="row">{key}</Table.HeaderCell>
-                  <Table.Cell>
-                    <Text textStyle={key}>The quick brown fox</Text>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Text textStyle={config.defaults.helperStyle} muted>
-                      {style.family} · {style.size} · {style.weight} · {style.lineHeight}
-                      {style.letterSpacing ? ` · ${style.letterSpacing}` : ''}
-                    </Text>
-                  </Table.Cell>
-                </Table.Row>
-              );
-            })}
-          </Table.Body>
-        </Table>
-        <KeyValues
-          caption="Heading levels"
-          rows={(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).map((level) => [
-            level,
-            <Text textStyle={config.typography.headings[level]}>
-              {typography.headings[level]}
-            </Text>,
-          ])}
-        />
-      </Section>
-
-      <Section title="Modal sizes" description="Widths of dialogs and drawers.">
-        <KeyValues
-          caption="Modal sizes"
-          rows={Object.entries(shape.modalSizes).map(([key, value]): [string, ReactNode] => [key, <Code>{value}</Code>])}
-        />
-      </Section>
-
-      <Section title="Density">
-        <KeyValues
-          caption="Table density"
-          rows={keys<Density>(config.density).map((key) => {
-            const density = shape.density[key];
-            return [key, <Code>{`${density.paddingY} ${density.paddingX} · ${density.fontSize}`}</Code>];
-          })}
-        />
-      </Section>
-
-      <Section title="Other tokens">
-        <KeyValues
-          caption="Layers, motion, borders and focus"
-          rows={[
-            ...Object.entries(shape.zIndex).map(([k, v]): [string, ReactNode] => [`zIndex.${k}`, <Code>{v}</Code>]),
-            ...Object.entries(shape.motion).map(([k, v]): [string, ReactNode] => [`motion.${k}`, <Code>{v}</Code>]),
-            ...Object.entries(shape.borders).map(([k, v]): [string, ReactNode] => [`borders.${k}`, <Code>{v}</Code>]),
-            ['focusRing', <Code>{`${shape.focusRing.width} · offset ${shape.focusRing.offset} · ${shape.focusRing.color}`}</Code>],
-          ]}
-        />
-      </Section>
-
-      <Section
-        title="Defaults"
-        description="Values used when a component prop is omitted: the prop, then an enclosing group, then component defaults, then global defaults."
-      >
-        {Object.keys(shape.components ?? {}).length > 0 && (
-          <KeyValues
-            caption="Component defaults"
-            rows={Object.entries(shape.components ?? {}).map(([name, values]): [string, ReactNode] => [
-              name,
-              <Code>
-                {Object.entries(values ?? {})
-                  .map(([prop, value]) => `${prop}: ${value}`)
-                  .join(' · ')}
-              </Code>,
-            ])}
-          />
-        )}
-        <KeyValues
-          caption="Global defaults"
-          rows={Object.entries(shape.defaults).map(([key, value]): [string, ReactNode] => [key, <Code>{value}</Code>])}
-        />
-      </Section>
-    </Stack>
-  );
-}

package/src/runtime.ts

@@ -1,38 +0,0 @@
-import buildConfig from '@yarcl/config';
-import { useSyncExternalStore } from 'react';
-import type { ComponentName, YarclShape } from './define';
-import type { ComponentDefaults } from './types';
-
-type Config = typeof buildConfig;
-
-let active: Config = buildConfig;
-const listeners = new Set<() => void>();
-
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-
-export function activeConfig(): Config {
-  return active;
-}
-
-export function setActiveConfig(next: YarclShape | null) {
-  active = (next ?? buildConfig) as Config;
-  listeners.forEach((listener) => listener());
-}
-
-/**
- * The config components currently read their defaults from: the build-time config, or the
- * theme passed to `applyTheme`. Re-renders the caller when the theme changes.
- */
-export function useConfig(): Config {
-  return useSyncExternalStore(subscribe, activeConfig, () => buildConfig);
-}
-
-export function useDefaults(component: ComponentName): ComponentDefaults {
-  const config = useConfig();
-  return ((config as unknown as YarclShape).components?.[component] ?? {}) as ComponentDefaults;
-}

package/src/themes/bloom.ts

@@ -1,72 +0,0 @@
-import { defineConfig } from '../define';
-import defaults from '../yarcl.config';
-import type { ThemeContract } from './contract';
-
-const glow = (geometry: string, alpha: number) =>
-  `${geometry} light-dark(rgb(91 33 182 / ${alpha}), rgb(0 0 0 / ${Math.min(alpha * 5, 0.7)}))`;
-
-/** Friendly and airy: violet on lavender, pill-shaped controls, rounded cards, large targets, soft tinted shadows. */
-export const bloom = defineConfig({
-  ...defaults,
-  colors: {
-    primary: { light: '#7c3aed', dark: '#c4b5fd' },
-    neutral: { light: '#6b6485', dark: '#b5aecf' },
-    success: { light: '#0f8a5f', dark: '#5eead4' },
-    warning: { light: '#c2410c', dark: '#fdba74' },
-    danger: { light: '#e11d48', dark: '#fb7185' },
-    info: { light: '#0369a1', dark: '#7dd3fc' },
-  },
-  neutrals: {
-    bg: { light: '#f7f4ff', dark: '#14111f' },
-    surface: { light: '#ffffff', dark: '#1f1a30' },
-    text: { light: '#2a2540', dark: '#efeafc' },
-    muted: { light: '#6b6485', dark: '#aaa3c4' },
-    border: { light: '#e6dff7', dark: '#342c4d' },
-  },
-  sizes: {
-    xs: { height: '2rem', paddingX: '0.875rem', fontSize: '0.8125rem', iconSize: '0.875rem' },
-    sm: { height: '2.25rem', paddingX: '1rem', fontSize: '0.875rem', iconSize: '1rem' },
-    md: { height: '2.75rem', paddingX: '1.25rem', fontSize: '0.9375rem', iconSize: '1.125rem' },
-    lg: { height: '3.25rem', paddingX: '1.625rem', fontSize: '1.0625rem', iconSize: '1.25rem' },
-    xl: { height: '3.75rem', paddingX: '2rem', fontSize: '1.1875rem', iconSize: '1.5rem' },
-  },
-  radii: { square: '0', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem', rounded: '9999px' },
-  spacing: { xs: '0.375rem', sm: '0.75rem', md: '1.25rem', lg: '1.75rem', xl: '2.5rem' },
-  shadows: {
-    sm: glow('0 2px 8px', 0.08),
-    md: glow('0 10px 30px', 0.14),
-    lg: glow('0 20px 60px', 0.2),
-  },
-  density: {
-    compact: { paddingX: '0.75rem', paddingY: '0.5rem', fontSize: '0.875rem' },
-    comfortable: { paddingX: '1.25rem', paddingY: '0.875rem', fontSize: '0.9375rem' },
-  },
-  typography: {
-    families: {
-      sans: 'Nunito, "SF Pro Rounded", ui-rounded, "Varela Round", system-ui, sans-serif',
-      mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
-    },
-    styles: {
-      display: { family: 'sans', size: '2.5rem', weight: 800, lineHeight: 1.1, letterSpacing: '-0.02em' },
-      heading: { family: 'sans', size: '1.625rem', weight: 800, lineHeight: 1.2 },
-      subheading: { family: 'sans', size: '1.1875rem', weight: 700, lineHeight: 1.35 },
-      body: { family: 'sans', size: '1rem', weight: 500, lineHeight: 1.55 },
-      caption: { family: 'sans', size: '0.8125rem', weight: 500, lineHeight: 1.45 },
-      code: { family: 'mono', size: '0.875rem', weight: 400, lineHeight: 1.5 },
-      label: { family: 'sans', size: '0.9375rem', weight: 700, lineHeight: 1.4 },
-    },
-    headings: { h1: 'display', h2: 'heading', h3: 'heading', h4: 'subheading', h5: 'subheading', h6: 'label' },
-  },
-  focusRing: { width: '3px', offset: '3px', color: 'primary' },
-  components: {
-    ...defaults.components,
-    Button: { radius: 'rounded' },
-    IconButton: { radius: 'rounded' },
-    ToggleGroup: { radius: 'rounded' },
-    Badge: { radius: 'rounded' },
-    Input: { radius: 'rounded' },
-    Select: { radius: 'rounded' },
-    Combobox: { radius: 'rounded' },
-  },
-  defaults: { ...defaults.defaults, radius: 'lg', padding: 'lg', gap: 'md' },
-}) satisfies ThemeContract;

package/src/themes/brutalist.ts

@@ -1,63 +0,0 @@
-import { defineConfig } from '../define';
-import defaults from '../yarcl.config';
-import type { ThemeContract } from './contract';
-
-const ink = 'light-dark(#000000, #ffffff)';
-
-/** Loud and flat: red on black and white, square corners, thick borders, hard offset shadows, monospace type. */
-export const brutalist = defineConfig({
-  ...defaults,
-  colors: {
-    primary: { light: '#ff3d2e', dark: '#ff5a4d' },
-    neutral: { light: '#1a1a1a', dark: '#f5f5f5' },
-    success: { light: '#00b862', dark: '#3dfc9a' },
-    warning: { light: '#ff8a00', dark: '#ffb14a' },
-    danger: { light: '#c2005a', dark: '#ff5ca1' },
-    info: { light: '#2f6bff', dark: '#7aa2ff' },
-  },
-  neutrals: {
-    bg: { light: '#fffdf2', dark: '#0f0f0f' },
-    surface: { light: '#ffffff', dark: '#1a1a1a' },
-    text: { light: '#000000', dark: '#ffffff' },
-    muted: { light: '#3d3d3d', dark: '#cfcfcf' },
-    border: { light: '#000000', dark: '#ffffff' },
-  },
-  sizes: {
-    xs: { height: '1.75rem', paddingX: '0.625rem', fontSize: '0.75rem', iconSize: '0.75rem' },
-    sm: { height: '2rem', paddingX: '0.75rem', fontSize: '0.8125rem', iconSize: '0.875rem' },
-    md: { height: '2.5rem', paddingX: '1rem', fontSize: '0.875rem', iconSize: '1rem' },
-    lg: { height: '3rem', paddingX: '1.25rem', fontSize: '1rem', iconSize: '1.25rem' },
-    xl: { height: '3.5rem', paddingX: '1.5rem', fontSize: '1.125rem', iconSize: '1.5rem' },
-  },
-  radii: { square: '0', sm: '0', md: '0', lg: '0', xl: '0', rounded: '9999px' },
-  variants: {
-    solid: { background: 'fill', border: 'neutral', text: 'on' },
-    soft: { background: 'tint', border: 'neutral', text: 'neutral' },
-    outline: { background: 'none', border: 'neutral', text: 'neutral' },
-    ghost: { background: 'none', border: 'none', text: 'neutral' },
-  },
-  shadows: {
-    sm: `3px 3px 0 0 ${ink}`,
-    md: `5px 5px 0 0 ${ink}`,
-    lg: `8px 8px 0 0 ${ink}`,
-  },
-  borders: { width: '2px' },
-  typography: {
-    families: {
-      sans: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace',
-      mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace',
-    },
-    styles: {
-      display: { family: 'sans', size: '2.5rem', weight: 800, lineHeight: 1, letterSpacing: '-0.04em' },
-      heading: { family: 'sans', size: '1.5rem', weight: 800, lineHeight: 1.15, letterSpacing: '-0.02em' },
-      subheading: { family: 'sans', size: '1.125rem', weight: 700, lineHeight: 1.3 },
-      body: { family: 'sans', size: '0.875rem', weight: 400, lineHeight: 1.55 },
-      caption: { family: 'sans', size: '0.75rem', weight: 400, lineHeight: 1.45 },
-      code: { family: 'mono', size: '0.8125rem', weight: 400, lineHeight: 1.5 },
-      label: { family: 'sans', size: '0.8125rem', weight: 700, lineHeight: 1.4, letterSpacing: '0.04em' },
-    },
-    headings: { h1: 'display', h2: 'heading', h3: 'heading', h4: 'subheading', h5: 'subheading', h6: 'label' },
-  },
-  focusRing: { width: '3px', offset: '3px', color: 'neutral', style: 'dashed' },
-  defaults: { ...defaults.defaults, radius: 'md', padding: 'lg', floatingShadow: 'md' },
-}) satisfies ThemeContract;

package/src/themes/compact.ts

@@ -1,63 +0,0 @@
-import { defineConfig } from '../define';
-import defaults from '../yarcl.config';
-import type { ThemeContract } from './contract';
-
-/** Dense and businesslike: teal on cool gray, small 28px controls, tight spacing, 13px text, compact tables, nearly flat. */
-export const compact = defineConfig({
-  ...defaults,
-  colors: {
-    primary: { light: '#0f766e', dark: '#2dd4bf' },
-    neutral: { light: '#52606d', dark: '#9aa5b1' },
-    success: { light: '#15803d', dark: '#4ade80' },
-    warning: { light: '#a16207', dark: '#facc15' },
-    danger: { light: '#b91c1c', dark: '#f87171' },
-    info: { light: '#1d4ed8', dark: '#60a5fa' },
-  },
-  neutrals: {
-    bg: { light: '#eef1f4', dark: '#0b0f14' },
-    surface: { light: '#ffffff', dark: '#141a21' },
-    text: { light: '#1f2933', dark: '#e4e7eb' },
-    muted: { light: '#52606d', dark: '#9aa5b1' },
-    border: { light: '#cbd2d9', dark: '#2a333d' },
-  },
-  sizes: {
-    xs: { height: '1.25rem', paddingX: '0.375rem', fontSize: '0.6875rem', iconSize: '0.75rem' },
-    sm: { height: '1.5rem', paddingX: '0.5rem', fontSize: '0.75rem', iconSize: '0.75rem' },
-    md: { height: '1.75rem', paddingX: '0.625rem', fontSize: '0.8125rem', iconSize: '0.875rem' },
-    lg: { height: '2.25rem', paddingX: '0.875rem', fontSize: '0.875rem', iconSize: '1rem' },
-    xl: { height: '2.75rem', paddingX: '1rem', fontSize: '1rem', iconSize: '1.125rem' },
-  },
-  radii: { square: '0', sm: '2px', md: '3px', lg: '4px', xl: '6px', rounded: '9999px' },
-  variants: {
-    ...defaults.variants,
-    outline: { background: 'none', border: 'neutral', text: 'neutral' },
-  },
-  spacing: { xs: '0.125rem', sm: '0.25rem', md: '0.5rem', lg: '0.75rem', xl: '1rem' },
-  shadows: {
-    sm: '0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))',
-    md: '0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))',
-    lg: '0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))',
-  },
-  density: {
-    compact: { paddingX: '0.5rem', paddingY: '0.25rem', fontSize: '0.75rem' },
-    comfortable: { paddingX: '0.625rem', paddingY: '0.375rem', fontSize: '0.8125rem' },
-  },
-  typography: {
-    families: {
-      sans: '"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif',
-      mono: '"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace',
-    },
-    styles: {
-      display: { family: 'sans', size: '1.5rem', weight: 600, lineHeight: 1.25 },
-      heading: { family: 'sans', size: '1.125rem', weight: 600, lineHeight: 1.3 },
-      subheading: { family: 'sans', size: '0.9375rem', weight: 600, lineHeight: 1.35 },
-      body: { family: 'sans', size: '0.8125rem', weight: 400, lineHeight: 1.45 },
-      caption: { family: 'sans', size: '0.75rem', weight: 400, lineHeight: 1.4 },
-      code: { family: 'mono', size: '0.75rem', weight: 400, lineHeight: 1.45 },
-      label: { family: 'sans', size: '0.75rem', weight: 600, lineHeight: 1.35, letterSpacing: '0.02em' },
-    },
-    headings: { h1: 'display', h2: 'heading', h3: 'heading', h4: 'subheading', h5: 'subheading', h6: 'label' },
-  },
-  focusRing: { width: '2px', offset: '1px', color: 'info' },
-  defaults: { ...defaults.defaults, radius: 'sm', padding: 'lg', gap: 'md', density: 'compact' },
-}) satisfies ThemeContract;

package/src/themes/contract.ts

@@ -1,24 +0,0 @@
-import type { ColorToken, DensityToken, SizeToken, TextStyleToken, VariantToken } from '../define';
-import type defaults from '../yarcl.config';
-
-type Defaults = typeof defaults;
-
-/**
- * The keys every bundled theme defines: the same keys as the library defaults.
- * Apps written against these keys work with any theme that satisfies the contract.
- * Values are free; extra keys are allowed.
- */
-export interface ThemeContract {
-  colors: Record<keyof Defaults['colors'], ColorToken>;
-  sizes: Record<keyof Defaults['sizes'], SizeToken>;
-  radii: Record<keyof Defaults['radii'], string>;
-  variants: Record<keyof Defaults['variants'], VariantToken>;
-  spacing: Record<keyof Defaults['spacing'], string>;
-  shadows: Record<keyof Defaults['shadows'], string>;
-  density: Record<keyof Defaults['density'], DensityToken>;
-  modalSizes: Record<keyof Defaults['modalSizes'], string>;
-  typography: {
-    families: Record<keyof Defaults['typography']['families'], string>;
-    styles: Record<keyof Defaults['typography']['styles'], TextStyleToken>;
-  };
-}