@knadh/oat/css/01-theme.css

Ultra-lightweight, zero dependency, semantic HTML/CSS/JS UI library

@layer theme {
  :root {
    color-scheme: light dark;

    --background: light-dark(#fff, #09090b);
    --foreground: light-dark(#09090b, #fafafa);
    --card: light-dark(#fff, #18181b);
    --card-foreground: light-dark(#09090b, #fafafa);
    --primary: light-dark(#574747, #fafafa);
    --primary-foreground: light-dark(#fafafa, #18181b);
    --secondary: light-dark(#f4f4f5, #27272a);
    --secondary-foreground: light-dark(#574747, #fafafa);
    --muted: light-dark(#f4f4f5, #27272a);
    --muted-foreground: light-dark(#71717a, #a1a1aa);
    --faint: light-dark(#fafafa, #1e1e21);
    --faint-foreground: light-dark(#a1a1aa, #71717a);
    --accent: light-dark(#f4f4f5, #27272a);
    --danger: light-dark(#d32f2f, #f4807b);
    --danger-foreground: light-dark(#fafafa, #18181b);
    --success: light-dark(#008032, #6cc070);
    --success-foreground: light-dark(#fafafa, #18181b);
    --warning: light-dark(#a65b00, #f0a030);
    --warning-foreground: #09090b;
    --border: light-dark(#d4d4d8, #52525b);
    --input: light-dark(#d4d4d8, #52525b);
    --ring: light-dark(#574747, #d4d4d8);

    /* ==================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;

    --radius-small: 0.125rem;
    --radius-medium: 0.375rem;
    --radius-large: 0.75rem;
    --radius-full: 9999px;

    --bar-height: 0.5rem;

    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, Consolas, monospace;

    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-5: 1.125rem;
    --text-6: 1rem;
    --text-7: 0.875rem;
    --text-8: 0.75rem;
    --text-regular: var(--text-6);

    --leading-normal: 1.5;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 600;

    --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-dropdown: 50;
    --z-modal: 200;
  }
}