@yarcl/react 0.1.0 → 0.2.0

package/src/themes/editorial.ts

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

@@ -1,47 +0,0 @@
-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/yarcl.config.ts

@@ -1,104 +0,0 @@
-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' },
-  },
-});