zeus-css 1.0.0

package/scss/zeus.customize.scss

@@ -0,0 +1,246 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Zeus.customize                                  ║
+// ║                                                               ║
+// ║  Core styles and definitions for zeus.customize.              ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🎨 Zeus CSS — Design Token Customization                    ║
+// ║                                                              ║
+// ║  This is the single place to override ALL visual/design      ║
+// ║  tokens for your project. Feature flags and layout engine    ║
+// ║  settings live in zeus.config.scss.                          ║
+// ║                                                              ║
+// ║  Usage: edit the values below, then import zeus.scss as      ║
+// ║  usual. All !default variables are safe to override.         ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// ────────────────────────────────────────────────────────────────
+// 1. COLORS — OKLCH Palette
+// ────────────────────────────────────────────────────────────────
+// Only the 5 base keys are required — every other key below (light/dark
+// variants, muted, inverse, surface, border, border-strong) is derived
+// automatically at compile/paint time from these 5. Uncomment any key to
+// pin an exact value instead of the auto-derived one; the deriver skips
+// You can specify colors using ANY valid CSS format: OKLCH, HEX (#2563eb),
+// RGB, HSL, or named colors. Zeus converts them dynamically via relative CSS syntax.
+$zeus-colors: (
+  "primary":         oklch(50.0% 0.232 259.6), // WCAG AA compliant (> 4.5:1 contrast on white text)
+  "secondary":       oklch(74.7% 0.174 60.6),
+  "accent":          oklch(52.0% 0.153 164.1), // WCAG AA compliant (4.55:1 contrast on white text) — re-audit 27.07.2026, was 71.8%
+  "text":            oklch(21.8% 0.000 0.0),
+  "background":      oklch(97.6% 0.000 0.0),
+
+  // HEX Example Alternative:
+  // "primary": #1d4ed8, "secondary": #f59e0b, "accent": #10b981, "text": #111827, "background": #f9fafb,
+
+  // "primary-light":   oklch(73.7% 0.158 235.9),
+  // "primary-dark":    oklch(41.6% 0.287 264.4),
+  // "secondary-light": oklch(83.5% 0.142 74.3),
+  // "secondary-dark":  oklch(54.5% 0.117 72.2),
+  // "accent-light":    oklch(85%   0.100 164.1),
+  // "accent-dark":     oklch(55%   0.153 164.1),
+  // "text-muted":      oklch(46.8% 0.000 0.0),
+  // "text-inverse":    oklch(97.6% 0.000 0.0),
+  // "surface":         oklch(97.6% 0.000 0.0),
+  // "border":          oklch(79.8% 0.000 0.0),
+  // "border-strong":   oklch(46.8% 0.000 0.0),
+) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 2. TYPOGRAPHY
+// ────────────────────────────────────────────────────────────────
+// Available Keys:
+// • Headings: display-xl, display-lg, display-md, h1, h1-light, h2, h2-light, 
+//             h3, h3-light, h4, h4-light, h5, h5-light, h6, h6-light
+// • Body:     body-xl, body-lg, body, body-md, body-bold, body-md-bold, 
+//             body-semibold, body-md-semibold, body-medium, body-md-medium, 
+//             body-sm, body-sm-bold, body-sm-semibold, body-xs
+// • UI/Other: label, label-bold, caption, caption-bold, overline, 
+//             link, link-bold, button, button-lg, button-sm, code, code-sm
+
+$zeus-font-family: () !default;
+// Example Override:
+// $zeus-font-family: (
+//   "primary": ("Inter", sans-serif),
+// ) !default;
+
+$zeus-typography: () !default;
+// Example Override:
+// $zeus-typography: (
+//   "h1": ( family: "primary", size: (floor: 40, ceil: 64), lh: 1.1, ls: -0.02, weight: 800, role: "heading" )
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 3. SPACING SCALE — Fluid (floor→ceil px)
+// ────────────────────────────────────────────────────────────────
+// Available Keys: 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl
+
+$zeus-space: () !default;
+// Example Override:
+// $zeus-space: (
+//   "lg": (floor: 16, ceil: 24),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 4. BORDER RADIUS — Fluid (floor→ceil px)
+// ────────────────────────────────────────────────────────────────
+// Available Keys: xs, sm, md, lg, xl, rounded
+
+$zeus-border-radius: () !default;
+// Example Override:
+// $zeus-border-radius: (
+//   "md": (floor: 16, ceil: 24),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 5. BORDER WIDTH — Fluid (floor→ceil px)
+// ────────────────────────────────────────────────────────────────
+// Available Keys: xs, sm, md, lg
+
+$zeus-border-line: () !default;
+// Example Override:
+// $zeus-border-line: (
+//   "sm": (floor: 1.5, ceil: 3),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 6. ICON SIZES — Fluid (floor→ceil px)
+// ────────────────────────────────────────────────────────────────
+// Available Keys: xs, sm, md, lg, xl
+
+$zeus-icon-size: () !default;
+// Example Override:
+// $zeus-icon-size: (
+//   "md": (floor: 22, ceil: 32),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 7. SHADOWS
+// ────────────────────────────────────────────────────────────────
+// Available Keys:
+// • Elevation: none, xs, sm, md, lg, xl, 2xl
+// • Semantic:  primary, secondary, success, warning, danger, info
+// • Inner:     inner, inner-lg
+// • Special:   glow, glow-lg, outline
+// • Component: card, card-hover, dropdown, modal
+
+$zeus-shadows: () !default;
+// Example Override:
+// $zeus-shadows: (
+//   "sm": (0px 1px 3px 0px rgba(0,0,0,0.1)),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 8. BUTTON SIZES — Fluid (floor→ceil px)
+// ────────────────────────────────────────────────────────────────
+// Available Keys: 2xs, xs, sm, md, lg, xl, 2xl
+
+$zeus-button-sizes: () !default;
+// Example Override:
+// $zeus-button-sizes: (
+//   "md": (font: (floor: 14, ceil: 16), py: (floor: 10, ceil: 12), px: (floor: 20, ceil: 24)),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 9. BASE / SYSTEM COLORS
+// ────────────────────────────────────────────────────────────────
+$zeus-base-colors: () !default;
+// Example Override:
+// $zeus-base-colors: (
+//   "system": (
+//     "success": oklch(65% 0.20 145),
+//   ),
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 10. Z-INDEX SCALE
+// ────────────────────────────────────────────────────────────────
+// A single stacking-order scale so components never need a magic number.
+// Used internally by .z-modal/.z-modal-backdrop; exposed as both
+// --z-{name} CSS variables and .layer-{name} utility classes.
+// Available Keys: base, dropdown, sticky, overlay, modal-backdrop, modal, toast, tooltip
+
+$zeus-z-index: () !default;
+// Example Override:
+// $zeus-z-index: (
+//   "modal": 2000,
+// ) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 10. CUSTOM RESPONSIVE VARIABLES
+// ────────────────────────────────────────────────────────────────
+// Define your own custom CSS variables that change value based on breakpoints.
+// The variables will be automatically generated inside the :root with media queries.
+// 
+// HOW IT WORKS:
+// - The engine automatically treats the **lowest** defined breakpoint as the base value (no media query).
+// - Higher breakpoints generate `min-width` media queries, creating a clean mobile-first cascade.
+//
+// EXAMPLE BEHAVIOR for "header-height" below:
+// - It starts with `60px` by default (from 0px and up).
+// - From `md` (768px) it changes to `64px`.
+// - From `ml` (1024px) it changes to `72px` and stays `72px` for all larger screens.
+//
+// In your code, you can just use `var(--header-height)` without writing any @media blocks!
+
+$zeus-custom-vars: (
+  "header-height": (
+    sm: 60px,
+    md: 64px,
+    ml: 72px,
+  ),
+  // You can add more responsive variables here!
+  // "sidebar-width": (
+  //   xs: 240px,
+  //   lg: 320px
+  // )
+) !default;
+
+// ────────────────────────────────────────────────────────────────
+// 11. BUTTON VARIANTS
+// ────────────────────────────────────────────────────────────────
+$zeus-button-variants: (
+  "primary": ("default": ("background": var(--color-primary),
+      "color": var(--color-text-inverse),
+      "border": none,
+    ),
+    "hover": ("background": var(--color-primary-dark),
+      "color": var(--color-text-inverse),
+      "border": none,
+    ),
+    "active": ("background": var(--color-primary-dark),
+      "color": var(--color-text-inverse),
+      "border": none,
+    ),
+  ),
+  "secondary": ("default": ("background": transparent,
+      "color": var(--color-primary),
+      "border": var(--border-line-sm) solid var(--color-primary),
+    ),
+    "hover": ("color": var(--color-primary-dark),
+      "border-color": var(--color-primary-dark),
+    ),
+    "active": ("color": var(--color-primary-dark),
+      "border-color": var(--color-primary-dark),
+    ),
+  ),
+  "tertiary": ("default": ("background": transparent,
+      "color": var(--color-primary),
+      "border": none,
+    ),
+    "hover": ("color": var(--color-primary-dark),
+    ),
+    "active": ("color": var(--color-primary-dark),
+    ),
+  ),
+  "icon-only": ("default": ("background": transparent,
+      "color": var(--color-primary),
+      "border": none,
+    ),
+    "hover": ("color": var(--color-primary-dark),
+    ),
+    "active": ("color": var(--color-primary-dark),
+    ),
+  ),
+  ) !default;

package/scss/zeus.scss

@@ -0,0 +1,17 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Zeus                                          ║
+// ║                                                              ║
+// ║  Core styles and definitions for zeus.                       ║
+// ╚══════════════════════════════════════════════════════════════╝
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  Single entry point for component .module.scss files.        ║
+// ║  Exposes design tokens, engine (mixins), and API (functions) ║
+// ║  without emitting any CSS.                                   ║
+// ║                                                              ║
+// ║  Usage: @use "./zeus" as *;                                    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@forward "./zeus.config";
+@forward "./foundation/core/design";
+@forward "./foundation/core/engine";
+@forward "./foundation/core/api";

package/scss/zeus.token.sets.example.scss

@@ -0,0 +1,176 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Zeus.token.sets.example                         ║
+// ║                                                               ║
+// ║  Core styles and definitions for zeus.token.sets.example.     ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📖 Zeus CSS — Design Tokens Reference Guide                 ║
+// ║                                                              ║
+// ║  This file is strictly for REFERENCE. Do not import it.      ║
+// ║  It lists the exact default values for all Zeus tokens so    ║
+// ║  you can easily copy what you need into zeus.customize.scss. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+/*
+// ────────────────────────────────────────────────────────────────
+// 1. TYPOGRAPHY TOKENS
+// ────────────────────────────────────────────────────────────────
+$zeus-typography: (
+  // Display styles
+  "display-xl":       ( family: "primary", size: (floor: 56, ceil: 96), lh: 1.1,  ls: -0.02, weight: 800, role: "heading" ),
+  "display-lg":       ( family: "primary", size: (floor: 48, ceil: 80), lh: 1.1,  ls: -0.02, weight: 800, role: "heading" ),
+  "display-md":       ( family: "primary", size: (floor: 40, ceil: 64), lh: 1.15, ls: -0.01, weight: 700, role: "heading" ),
+  
+  // Headings
+  "h1":               ( family: "primary", size: (floor: 36, ceil: 58), lh: 1.2,  ls: -0.01, weight: 700, role: "heading" ),
+  "h1-light":         ( family: "primary", size: (floor: 36, ceil: 58), lh: 1.2,  ls: -0.01, weight: 300, role: "heading" ),
+  "h2":               ( family: "primary", size: (floor: 30, ceil: 52), lh: 1.2,  ls: -0.01, weight: 600, role: "heading" ),
+  "h2-light":         ( family: "primary", size: (floor: 30, ceil: 52), lh: 1.2,  ls: -0.01, weight: 300, role: "heading" ),
+  "h3":               ( family: "primary", size: (floor: 26, ceil: 44), lh: 1.25, ls: 0,     weight: 600, role: "heading" ),
+  "h3-light":         ( family: "primary", size: (floor: 26, ceil: 44), lh: 1.25, ls: 0,     weight: 300, role: "heading" ),
+  "h4":               ( family: "primary", size: (floor: 24, ceil: 32), lh: 1.3,  ls: 0,     weight: 600, role: "heading" ),
+  "h4-light":         ( family: "primary", size: (floor: 24, ceil: 32), lh: 1.3,  ls: 0,     weight: 300, role: "heading" ),
+  "h5":               ( family: "primary", size: (floor: 20, ceil: 24), lh: 1.4,  ls: 0,     weight: 500, role: "heading" ),
+  "h5-light":         ( family: "primary", size: (floor: 20, ceil: 24), lh: 1.4,  ls: 0,     weight: 300, role: "heading" ),
+  "h6":               ( family: "primary", size: (floor: 18, ceil: 20), lh: 1.4,  ls: 0,     weight: 500, role: "heading" ),
+  "h6-light":         ( family: "primary", size: (floor: 18, ceil: 20), lh: 1.4,  ls: 0,     weight: 300, role: "heading" ),
+
+  // Body
+  "body-xl":          ( family: "primary", size: (floor: 20, ceil: 24), lh: 1.6, ls: 0, weight: 400, role: "body" ),
+  "body-lg":          ( family: "primary", size: (floor: 18, ceil: 20), lh: 1.6, ls: 0, weight: 400, role: "body" ),
+  "body":             ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 400, role: "body" ),
+  "body-md":          ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 400, role: "body" ),
+  "body-bold":        ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 700, role: "body" ),
+  "body-md-bold":     ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 700, role: "body" ),
+  "body-semibold":    ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 600, role: "body" ),
+  "body-md-semibold": ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 600, role: "body" ),
+  "body-medium":      ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 500, role: "body" ),
+  "body-md-medium":   ( family: "primary", size: (floor: 16, ceil: 18), lh: 1.6, ls: 0, weight: 500, role: "body" ),
+  "body-sm":          ( family: "primary", size: (floor: 14, ceil: 16), lh: 1.5, ls: 0, weight: 400, role: "body" ),
+  "body-sm-bold":     ( family: "primary", size: (floor: 14, ceil: 16), lh: 1.5, ls: 0, weight: 700, role: "body" ),
+  "body-sm-semibold": ( family: "primary", size: (floor: 14, ceil: 16), lh: 1.5, ls: 0, weight: 600, role: "body" ),
+  "body-xs":          ( family: "primary", size: (floor: 12, ceil: 14), lh: 1.5, ls: 0, weight: 400, role: "body" ),
+
+  // UI
+  "label":            ( family: "secondary", size: (floor: 12, ceil: 14), lh: 1.4, ls: 0.01, weight: 500, role: "ui" ),
+  "label-bold":       ( family: "secondary", size: (floor: 12, ceil: 14), lh: 1.4, ls: 0.01, weight: 700, role: "ui" ),
+  "caption":          ( family: "secondary", size: (floor: 11, ceil: 12), lh: 1.4, ls: 0.01, weight: 400, role: "ui" ),
+  "caption-bold":     ( family: "secondary", size: (floor: 11, ceil: 12), lh: 1.4, ls: 0.01, weight: 600, role: "ui" ),
+  "overline":         ( family: "secondary", size: (floor: 14, ceil: 16), lh: 1.3, ls: 0.14, weight: 600, role: "ui" ),
+
+  // Interactive
+  "link":             ( family: "tertiary",  size: (floor: 15, ceil: 16), lh: 1.5, ls: 0,    weight: 500, role: "interactive" ),
+  "link-bold":        ( family: "tertiary",  size: (floor: 15, ceil: 16), lh: 1.5, ls: 0,    weight: 700, role: "interactive" ),
+  "button":           ( family: "secondary", size: (floor: 14, ceil: 16), lh: 1.2, ls: 0.02, weight: 600, role: "interactive" ),
+  "button-lg":        ( family: "secondary", size: (floor: 16, ceil: 18), lh: 1.2, ls: 0.02, weight: 600, role: "interactive" ),
+  "button-sm":        ( family: "secondary", size: (floor: 12, ceil: 14), lh: 1.2, ls: 0.02, weight: 600, role: "interactive" ),
+
+  // Code
+  "code":             ( family: "code", size: (floor: 14, ceil: 16), lh: 1.6, ls: 0, weight: 400, role: "code" ),
+  "code-sm":          ( family: "code", size: (floor: 12, ceil: 14), lh: 1.6, ls: 0, weight: 400, role: "code" )
+);
+
+
+// ────────────────────────────────────────────────────────────────
+// 2. SPACING SCALE
+// ────────────────────────────────────────────────────────────────
+$zeus-space: (
+  "0":    (floor:  0, ceil:   0),
+  "4xs":  (floor:  1, ceil:   2),
+  "3xs":  (floor:  2, ceil:   4),
+  "2xs":  (floor:  4, ceil:   6),
+  "xs":   (floor:  6, ceil:   8),
+  "sm":   (floor:  8, ceil:  12),
+  "md":   (floor: 12, ceil:  16),
+  "lg":   (floor: 16, ceil:  24),
+  "xl":   (floor: 24, ceil:  32),
+  "2xl":  (floor: 32, ceil:  48),
+  "3xl":  (floor: 48, ceil:  64),
+  "4xl":  (floor: 64, ceil:  96),
+);
+
+
+// ────────────────────────────────────────────────────────────────
+// 3. BORDER RADIUS & WIDTH
+// ────────────────────────────────────────────────────────────────
+$zeus-border-radius: (
+  "none":    (floor: 0,   ceil: 0),
+  "xs":      (floor: 2,   ceil: 4),
+  "sm":      (floor: 8,   ceil: 12),
+  "md":      (floor: 16,  ceil: 24),
+  "lg":      (floor: 20,  ceil: 32),
+  "xl":      (floor: 38,  ceil: 64),
+  "rounded": (floor: 360, ceil: 360),
+);
+
+$zeus-border-line: (
+  "xs": (floor: 1,   ceil: 2),
+  "sm": (floor: 1.5, ceil: 3),
+  "md": (floor: 2,   ceil: 4),
+  "lg": (floor: 4,   ceil: 8),
+);
+
+
+// ────────────────────────────────────────────────────────────────
+// 4. ICON SIZES
+// ────────────────────────────────────────────────────────────────
+$zeus-icon-size: (
+  "xs": (floor: 14, ceil: 18),
+  "sm": (floor: 20, ceil: 24),
+  "md": (floor: 22, ceil: 32),
+  "lg": (floor: 38, ceil: 48),
+  "xl": (floor: 48, ceil: 64),
+);
+
+
+// ────────────────────────────────────────────────────────────────
+// 5. SHADOWS
+// ────────────────────────────────────────────────────────────────
+$zeus-shadows: (
+  "none": none,
+  "xs":  (0px 1px 2px 0px rgb(132 132 132 / 43%)),
+  "sm":  (0px 1px 3px 0px rgb(132 132 132 / 43%), 0px 1px 2px -1px rgb(132 132 132 / 43%)),
+  "md":  (0px 4px 6px -1px rgb(132 132 132 / 43%), 0px 2px 4px -2px rgb(132 132 132 / 43%)),
+  "lg":  (0px 10px 15px -3px rgb(132 132 132 / 43%), 0px 4px 6px -4px rgb(132 132 132 / 43%)),
+  "xl":  (0px 20px 25px -5px rgb(132 132 132 / 43%), 0px 8px 10px -6px rgb(132 132 132 / 43%)),
+  "2xl": (0px 25px 50px -12px rgba(0, 0, 0, 0.25)),
+
+  // primary/secondary/glow/glow-lg/outline are brand-aware: derived at
+  // runtime from --color-primary/--color-secondary via relative color
+  // syntax, so they follow whatever you set in $zeus-colors automatically.
+  "primary":   (0px 4px 12px 0px oklch(from var(--color-primary) l c h / 0.3)),
+  "secondary": (0px 4px 12px 0px oklch(from var(--color-secondary) l c h / 0.3)),
+  "success":   (0px 4px 12px 0px rgba(34, 197, 94, 0.3)),
+  "warning":   (0px 4px 12px 0px rgba(251, 146, 60, 0.3)),
+  "danger":    (0px 4px 12px 0px rgba(239, 68, 68, 0.3)),
+  "info":      (0px 4px 12px 0px rgba(14, 165, 233, 0.3)),
+
+  "inner":    (inset 0px 2px 4px 0px rgba(0, 0, 0, 0.06)),
+  "inner-lg": (inset 0px 4px 8px 0px rgb(132 132 132 / 43%)),
+
+  "glow":    (0px 0px 20px 0px oklch(from var(--color-primary) l c h / 0.5)),
+  "glow-lg": (0px 0px 40px 0px oklch(from var(--color-primary) l c h / 0.6)),
+  "outline": (0px 0px 0px 3px oklch(from var(--color-primary) l c h / 0.5)),
+
+  "card":       (0px 2px 8px 0px rgba(0,0,0,0.08), 0px 1px 2px 0px rgba(0,0,0,0.06)),
+  "card-hover": (0px 8px 24px 0px rgba(0,0,0,0.12), 0px 2px 6px 0px rgba(0,0,0,0.08)),
+  "dropdown":   (0px 10px 40px 0px rgba(0,0,0,0.15), 0px 2px 8px 0px rgb(132 132 132 / 43%)),
+  "modal":      (0px 20px 60px 0px rgba(0,0,0,0.3), 0px 4px 16px 0px rgba(0,0,0,0.2)),
+);
+
+
+// ────────────────────────────────────────────────────────────────
+// 6. BUTTON SIZES
+// ────────────────────────────────────────────────────────────────
+$zeus-button-sizes: (
+  "2xs": ( font: (floor: 11, ceil: 12), py: (floor: 4, ceil: 6),   px: (floor: 8, ceil: 12) ),
+  "xs":  ( font: (floor: 12, ceil: 13), py: (floor: 6, ceil: 8),   px: (floor: 12, ceil: 16) ),
+  "sm":  ( font: (floor: 13, ceil: 14), py: (floor: 8, ceil: 10),  px: (floor: 16, ceil: 20) ),
+  "md":  ( font: (floor: 14, ceil: 16), py: (floor: 10, ceil: 12), px: (floor: 20, ceil: 24) ),
+  "lg":  ( font: (floor: 16, ceil: 20), py: (floor: 12, ceil: 16), px: (floor: 24, ceil: 32) ),
+  "xl":  ( font: (floor: 18, ceil: 22), py: (floor: 16, ceil: 20), px: (floor: 32, ceil: 40) ),
+  "2xl": ( font: (floor: 20, ceil: 26), py: (floor: 20, ceil: 24), px: (floor: 40, ceil: 48) ),
+);
+
+*/