@yarcl/react 0.1.0

package/src/themes/bloom.ts

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,24 @@
+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>;
+  };
+}

package/src/themes/editorial.ts

@@ -0,0 +1,55 @@
+import { defineConfig } from '../define';
+import defaults from '../yarcl.config';
+import type { ThemeContract } from './contract';
+
+/** Calm and considered: terracotta on cream, light grotesque type, square corners, flat surfaces, generous spacing. */
+export const editorial = defineConfig({
+  ...defaults,
+  colors: {
+    primary: { light: '#9a3412', dark: '#fb923c' },
+    neutral: { light: '#57534e', dark: '#a8a29e' },
+    success: { light: '#3f6212', dark: '#a3e635' },
+    warning: { light: '#a16207', dark: '#fcd34d' },
+    danger: { light: '#9f1239', dark: '#fda4af' },
+    info: { light: '#1e3a8a', dark: '#93c5fd' },
+  },
+  neutrals: {
+    bg: { light: '#f6f1e7', dark: '#1c1917' },
+    surface: { light: '#fffdf8', dark: '#262220' },
+    text: { light: '#1c1917', dark: '#f5efe3' },
+    muted: { light: '#57534e', dark: '#aaa39b' },
+    border: { light: '#d6cdbd', dark: '#48413b' },
+  },
+  sizes: {
+    xs: { height: '1.75rem', paddingX: '0.75rem', fontSize: '0.8125rem', iconSize: '0.75rem' },
+    sm: { height: '2rem', paddingX: '0.875rem', fontSize: '0.875rem', iconSize: '0.875rem' },
+    md: { height: '2.625rem', paddingX: '1.375rem', fontSize: '1rem', iconSize: '1rem' },
+    lg: { height: '3.25rem', paddingX: '1.75rem', fontSize: '1.0625rem', iconSize: '1.25rem' },
+    xl: { height: '3.875rem', paddingX: '2.125rem', fontSize: '1.1875rem', iconSize: '1.375rem' },
+  },
+  radii: { square: '0', sm: '1px', md: '2px', lg: '3px', xl: '4px', rounded: '9999px' },
+  spacing: { xs: '0.375rem', sm: '0.75rem', md: '1.25rem', lg: '2rem', xl: '3rem' },
+  shadows: {
+    sm: 'none',
+    md: '0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))',
+    lg: '0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))',
+  },
+  typography: {
+    families: {
+      sans: '"Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif',
+      mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+    },
+    styles: {
+      display: { family: 'sans', size: '2.75rem', weight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' },
+      heading: { family: 'sans', size: '1.75rem', weight: 300, lineHeight: 1.2, letterSpacing: '-0.015em' },
+      subheading: { family: 'sans', size: '1.25rem', weight: 600, lineHeight: 1.3 },
+      body: { family: 'sans', size: '1rem', weight: 400, lineHeight: 1.6 },
+      caption: { family: 'sans', size: '0.875rem', weight: 400, lineHeight: 1.5 },
+      code: { family: 'mono', size: '0.875rem', weight: 400, lineHeight: 1.5 },
+      label: { family: 'sans', size: '0.8125rem', weight: 700, lineHeight: 1.4, letterSpacing: '0.08em' },
+    },
+    headings: { h1: 'display', h2: 'heading', h3: 'heading', h4: 'subheading', h5: 'subheading', h6: 'label' },
+  },
+  focusRing: { width: '3px', offset: '3px', color: 'primary', style: 'double' },
+  defaults: { ...defaults.defaults, radius: 'square', padding: 'lg', gap: 'md', floatingShadow: 'md' },
+}) satisfies ThemeContract;

package/src/themes/index.ts

@@ -0,0 +1,47 @@
+import defaults from '../yarcl.config';
+import { brutalist } from './brutalist';
+import { compact } from './compact';
+import { editorial } from './editorial';
+import { bloom } from './bloom';
+
+export type { ThemeContract } from './contract';
+export { brutalist, compact, editorial, bloom };
+
+/**
+ * Every bundled theme, keyed by id, including the library defaults as `yarcl`.
+ * All of them satisfy {@link ThemeContract}, so they're interchangeable.
+ *
+ * @example
+ * ```ts
+ * // src/yarcl.config.ts: use a theme as is
+ * export { editorial as default } from '@yarcl/react/themes';
+ * ```
+ *
+ * @example
+ * ```ts
+ * // or start from one and change what you need
+ * import { defineConfig } from '@yarcl/react/define';
+ * import { bloom } from '@yarcl/react/themes';
+ *
+ * export default defineConfig({
+ *   ...bloom,
+ *   colors: { ...bloom.colors, primary: { light: '#db2777', dark: '#f9a8d4' } },
+ * });
+ * ```
+ */
+export const themes = {
+  yarcl: defaults,
+  brutalist,
+  bloom,
+  compact,
+  editorial,
+};
+
+/** Display names of the bundled themes. */
+export const themeNames: Record<keyof typeof themes, string> = {
+  yarcl: 'yarcl (default)',
+  brutalist: 'Brutalist',
+  bloom: 'Bloom',
+  compact: 'Compact',
+  editorial: 'Editorial',
+};

package/src/types.ts

@@ -0,0 +1,69 @@
+import type config from '@yarcl/config';
+
+type Config = typeof config;
+
+/** A key of the consumer's `sizes` config. */
+export type Size = keyof Config['sizes'] & string;
+/** A key of the consumer's `radii` config. */
+export type Radius = keyof Config['radii'] & string;
+/** A key of the consumer's `colors` config. */
+export type Color = keyof Config['colors'] & string;
+/** A key of the consumer's `variants` config. */
+export type Variant = keyof Config['variants'] & string;
+/** A key of the consumer's `spacing` config. */
+export type Spacing = keyof Config['spacing'] & string;
+/** A key of the consumer's `shadows` config. */
+export type Shadow = keyof Config['shadows'] & string;
+/** A key of the consumer's `density` config. */
+export type Density = keyof Config['density'] & string;
+/** A key of the consumer's `modalSizes` config. */
+export type ModalSize = keyof Config['modalSizes'] & string;
+/** A key of the consumer's `typography.styles` config. */
+export type TextStyle = keyof Config['typography']['styles'] & string;
+
+/** Design token props shared by every sized, colored component. */
+export interface TokenProps {
+  /**
+   * Control size, from the `sizes` config.
+   * @default config.defaults.size
+   */
+  size?: Size;
+  /**
+   * Border radius, from the `radii` config, or `'size'` for the radius named like the control's size.
+   * @default config.defaults.radius
+   */
+  radius?: Radius | 'size';
+  /**
+   * Semantic color, from the `colors` config.
+   * @default config.defaults.color
+   */
+  color?: Color;
+}
+
+/** Cross-axis alignment for layout components. */
+export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** Main-axis distribution for layout components. */
+export type Justify = 'start' | 'center' | 'end' | 'between';
+
+/** The `variant` prop shared by components that apply a style recipe. */
+export interface VariantProps {
+  /**
+   * Style recipe, from the `variants` config.
+   * @default config.defaults.variant
+   */
+  variant?: Variant;
+}
+
+/** Values a component can receive from `components` in the config. */
+export interface ComponentDefaults {
+  size?: Size;
+  radius?: Radius | 'size';
+  color?: Color;
+  variant?: Variant;
+  selectedVariant?: Variant;
+  gap?: Spacing;
+  padding?: Spacing;
+  shadow?: Shadow;
+  density?: Density;
+  textStyle?: TextStyle;
+}

package/src/yarcl.config.ts

@@ -0,0 +1,104 @@
+import { defineConfig } from './define';
+
+/** The library's default design system, used when the consumer provides no config. */
+export default defineConfig({
+  colors: {
+    primary: { light: '#2d4bb8', dark: '#8aa2ff' },
+    neutral: { light: '#4b5263', dark: '#a3a9b8' },
+    success: { light: '#15803d', dark: '#4ade80' },
+    warning: { light: '#b45309', dark: '#fbbf24' },
+    danger: { light: '#dc2626', dark: '#f87171' },
+    info: { light: '#0369a1', dark: '#38bdf8' },
+  },
+  neutrals: {
+    bg: { light: '#f8f9fb', dark: '#0f1115' },
+    surface: { light: '#ffffff', dark: '#181b21' },
+    text: { light: '#101828', dark: '#e6e8ec' },
+    muted: { light: '#667085', dark: '#8b93a1' },
+    border: { light: '#d0d5dd', dark: '#2e333d' },
+  },
+  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.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    rounded: '9999px',
+  },
+  variants: {
+    solid: { background: 'fill', border: 'color', text: 'on' },
+    soft: { background: 'tint', border: 'none', text: 'color' },
+    outline: { background: 'none', border: 'color', text: 'color' },
+    ghost: { background: 'none', border: 'none', text: 'color' },
+  },
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+  },
+  shadows: {
+    sm: '0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))',
+    md: '0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))',
+    lg: '0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))',
+  },
+  density: {
+    compact: { paddingX: '0.5rem', paddingY: '0.25rem', fontSize: '0.8125rem' },
+    comfortable: { paddingX: '0.75rem', paddingY: '0.625rem', fontSize: '0.875rem' },
+  },
+  modalSizes: {
+    sm: '24rem',
+    md: '32rem',
+    lg: '48rem',
+    xl: '64rem',
+    full: '100vw',
+  },
+  typography: {
+    families: {
+      sans: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+      mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+    },
+    styles: {
+      display: { family: 'sans', size: '2.25rem', weight: 800, lineHeight: 1.1, letterSpacing: '-0.02em' },
+      heading: { family: 'sans', size: '1.5rem', weight: 700, lineHeight: 1.25, letterSpacing: '-0.01em' },
+      subheading: { family: 'sans', size: '1.125rem', weight: 600, lineHeight: 1.35 },
+      body: { family: 'sans', size: '1rem', weight: 400, lineHeight: 1.5 },
+      caption: { family: 'sans', size: '0.8125rem', weight: 400, lineHeight: 1.4 },
+      code: { family: 'mono', size: '0.875rem', weight: 400, lineHeight: 1.5 },
+      label: { family: 'sans', size: '0.875rem', weight: 500, lineHeight: 1.4 },
+    },
+    headings: { h1: 'display', h2: 'heading', h3: 'subheading', h4: 'subheading', h5: 'label', h6: 'label' },
+  },
+  zIndex: { dropdown: 1000, tooltip: 1100, dialog: 1200, toast: 1300 },
+  motion: { fast: '120ms', base: '200ms', easing: 'cubic-bezier(0.2, 0, 0, 1)' },
+  timing: { tooltipDelay: 400, hoverOpenDelay: 300, hoverCloseDelay: 150, toastDuration: 5000 },
+  borders: { width: '1px' },
+  focusRing: { width: '2px', offset: '2px', color: 'primary' },
+  defaults: {
+    size: 'md',
+    radius: 'md',
+    color: 'primary',
+    variant: 'solid',
+    errorColor: 'danger',
+    textStyle: 'body',
+    labelStyle: 'label',
+    helperStyle: 'caption',
+    gap: 'md',
+    padding: 'lg',
+    floatingShadow: 'md',
+    density: 'comfortable',
+    softVariant: 'soft',
+    modalSize: 'md',
+  },
+  components: {
+    Drawer: { size: 'sm' },
+  },
+});