zeus-css 1.0.0

package/scss/foundation/core/design/dimensions/spaces.scss

@@ -0,0 +1,42 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Spaces                                          ║
+// ║                                                               ║
+// ║  Design tokens and configuration for spaces.                  ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+@use "../_validate" as validate;
+
+// ╔══════════════════════════════════════════════════════════╗
+// ║  📐 SPACING TOKENS — Edit values here                   
+// ║                                                         
+// ║  Format: "name": (floor: N, ceil: N)
+// ║  • min   = mobile size (px, unitless number)             
+// ║  • max   = desktop size (px, unitless number)            
+// ║  • Always fluid — clamp() by default                    
+// ║                                                          
+// ║  Output CSS variable: --space-{name}                     
+// ╚══════════════════════════════════════════════════════════╝
+
+// ── Defaults ─────────────────────────────────────────────────
+$_space-defaults: (
+  "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),
+);
+
+// ── Developer can set $space BEFORE @use to override specific keys ──
+$space: map.deep-merge($_space-defaults, config.$zeus-space);
+@include validate.validate-all-responsive("space", $space);
+
+// spaces can be used in padding, margin, gap, etc. throughout the design system. 

package/scss/foundation/core/design/effects/_z-index.scss

@@ -0,0 +1,30 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Z-Index                                         ║
+// ║                                                               ║
+// ║  Design tokens and configuration for the stacking scale.      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+// ╔══════════════════════════════════════════════════════════╗
+// ║  🧱 Z-INDEX SCALE                                       ║
+// ║                                                         ║
+// ║  Format: "name": N (unitless integer)                    ║
+// ║  Output CSS variable: --z-{name}                         ║
+// ╚══════════════════════════════════════════════════════════╝
+
+// ── Defaults ─────────────────────────────────────────────────
+$_z-index-defaults: (
+  "base":           0,
+  "dropdown":       100,
+  "sticky":         200,
+  "overlay":        900,
+  "modal-backdrop": 999,
+  "modal":          1000,
+  "toast":          1100,
+  "tooltip":        1200,
+);
+
+// ── Developer Override ──
+$z-index: map.merge($_z-index-defaults, config.$zeus-z-index);

package/scss/foundation/core/design/effects/shadows.scss

@@ -0,0 +1,65 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Shadows                                         ║
+// ║                                                               ║
+// ║  Design tokens and configuration for shadows.                 ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+// ╔══════════════════════════════════════════════════════════╗
+// ║  ☁️ SHADOW TOKENS                                       
+// ║                                                         
+// ║  Format: "name": shadow-value                           
+// ║  Output CSS variable: --shadow-{name}                   
+// ╚══════════════════════════════════════════════════════════╝
+
+// ── Defaults ─────────────────────────────────────────────────
+$_shadows-defaults: (
+  "none": none,
+
+  // Elevation
+  "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)),
+
+  // Semantic (Glows for colored elements) — derived from the brand's own
+  // CSS custom properties at runtime, via OKLCH relative-color syntax, so
+  // changing $zeus-colors also re-colors these shadows automatically
+  // instead of leaving them locked to a hardcoded blue/purple.
+  "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
+  "inner":    (inset 0px 2px 4px 0px rgba(0, 0, 0, 0.06)),
+  "inner-lg": (inset 0px 4px 8px 0px rgb(132 132 132 / 43%)),
+
+  // Special effects — same brand-derivation rationale as above
+  "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)),
+
+  // Component specific recommendations
+  "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)),
+);
+
+// ── Developer Override ──
+$shadows: map.merge($_shadows-defaults, config.$zeus-shadows);
+
+// -----------------------------------------------------------------------------
+// HELPER FUNCTION
+// -----------------------------------------------------------------------------
+
+@function shadow($key) {
+  @return map.get($shadows, $key);
+}

package/scss/foundation/core/design/layout/grid.scss

@@ -0,0 +1,86 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Grid                                            ║
+// ║                                                               ║
+// ║  Design tokens and configuration for grid.                    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+@use "../_validate" as validate;
+
+// ============================================================
+// ZEUS GRID — Layout Tokens
+// ============================================================
+
+$outer-max-width: config.$zeus-outer-max-width !default;
+
+// ─── Breakpoints ─────────────────────────────────────────────
+$_breakpoints-base-defaults: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  ml: 1024px,
+  lg: 1280px,
+  xl: 1920px,
+  xxl: $outer-max-width,
+);
+$_breakpoints-defaults: map.merge($_breakpoints-base-defaults, config.$zeus-breakpoints);
+$_breakpoints-defaults: map.merge(
+  $_breakpoints-defaults,
+  (
+    xxl: map.get(config.$zeus-breakpoints, xxl) or $outer-max-width,
+  )
+);
+$breakpoints: () !default;
+$breakpoints: map.merge($_breakpoints-defaults, $breakpoints);
+
+// ─── Column gap tokens (fluid: min → max) ────────────────────
+// Format: (floor: N, ceil: N) — unitless px numbers, resolved by useclamp-sizing() at :root
+// Output CSS vars: --col-gap-xs, --col-gap-sm, --col-gap-md, --col-gap-lg, --col-gap-xl, --col-gap-xxl
+$_column-gaps-base-defaults: (
+  xs: (
+    floor: 12,
+    ceil: 16,
+  ),
+  sm: (
+    floor: 16,
+    ceil: 20,
+  ),
+  md: (
+    floor: 20,
+    ceil: 28,
+  ),
+  lg: (
+    floor: 28,
+    ceil: 40,
+  ),
+  xl: (
+    floor: 36,
+    ceil: 48,
+  ),
+  xxl: (
+    floor: 40,
+    ceil: 64,
+  ),
+);
+$_column-gaps-defaults: map.deep-merge($_column-gaps-base-defaults, config.$zeus-column-gaps);
+$column-gaps: () !default;
+$column-gaps: map.deep-merge($_column-gaps-defaults, $column-gaps);
+@include validate.validate-all-responsive("column-gaps", $column-gaps);
+
+// ─── Container outer padding — fluid ─────────────────────────
+// Format: (floor: N, ceil: N) — unitless px numbers
+// Output CSS var: --padding-outer
+// floor = mobile minimum, ceil = wide desktop maximum
+
+// Based on useclamp-sizing() which defaults to the $container-bounds range
+// (320px–2560px, see core/design/core/basic.scss).
+// floor: 16 -> 16px padding at the 320px container floor (small mobile)
+// ceil: 128 -> 128px padding at the 2560px container ceiling (ultra-wide desktop)
+$_outer-padding-base-defaults: (
+  floor: 16,
+  ceil: 64,
+);
+$_outer-padding-defaults: map.merge($_outer-padding-base-defaults, config.$zeus-outer-padding);
+$outer-padding: () !default;
+$outer-padding: map.merge($_outer-padding-defaults, $outer-padding);

package/scss/foundation/core/design/typography/typography.scss

@@ -0,0 +1,435 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Typography                                      ║
+// ║                                                               ║
+// ║  Design tokens and configuration for typography.              ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+@use "../_validate" as validate;
+
+// ╔══════════════════════════════════════════════════════════╗
+// ║  🔤 FONT FAMILY — declared once here                    
+// ║  Inter for all roles · JetBrains Mono for code          
+// ╚══════════════════════════════════════════════════════════╝
+$_inter: (
+  "Inter",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  system-ui,
+  sans-serif
+);
+$_mono: (
+  "JetBrains Mono",
+  "Fira Code",
+  "Cascadia Code",
+  "Courier New",
+  monospace
+);
+
+$_font-family-defaults: (
+  "primary": $_inter,
+  "secondary": $_inter,
+  "tertiary": $_inter,
+  "code": $_mono,
+);
+
+// ── Developer Override ──
+$font-family: map.deep-merge($_font-family-defaults, config.$zeus-font-family);
+
+// ╔══════════════════════════════════════════════════════════╗
+// ║  🔤 TYPOGRAPHY TOKENS — Edit values here
+// ║
+// ║  Each variant has:
+// ║  family = key from $font-family map above
+// ║  size   = (floor: N, ceil: N)  ← always fluid (clamp)
+// ║  lh     = line-height (unitless ratio)
+// ║  ls     = letter-spacing (em, 0 = none)
+// ║  weight = font-weight (100-900)
+// ║
+// ║  Output CSS variable: --text-{name}
+// ╚══════════════════════════════════════════════════════════╝
+
+// ── Defaults ─────────────────────────────────────────────────
+$_typography-defaults: (
+  // ── 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",
+  ),
+  // ── Typographic Heading Levels ─────────────────────────
+  "h1": (family: "primary",
+    size: (floor: 36,
+      ceil: 52,
+    ),
+    lh: 1.2,
+    ls: -0.01,
+    weight: 700,
+    role: "heading",
+  ),
+  "h1-light": (family: "primary",
+    size: (floor: 36,
+      ceil: 52,
+    ),
+    lh: 1.2,
+    ls: -0.01,
+    weight: 300,
+    role: "heading",
+  ),
+  "h2": (family: "primary",
+    size: (floor: 30,
+      ceil: 44,
+    ),
+    lh: 1.2,
+    ls: -0.01,
+    weight: 600,
+    role: "heading",
+  ),
+  "h2-light": (family: "primary",
+    size: (floor: 30,
+      ceil: 44,
+    ),
+    lh: 1.2,
+    ls: -0.01,
+    weight: 300,
+    role: "heading",
+  ),
+  "h3": (family: "primary",
+    size: (floor: 26,
+      ceil: 40,
+    ),
+    lh: 1.25,
+    ls: 0,
+    weight: 600,
+    role: "heading",
+  ),
+  "h3-light": (family: "primary",
+    size: (floor: 26,
+      ceil: 40,
+    ),
+    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 text ───────────────────────────────────────────
+  "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 text ─────────────────────────────────────────────
+  "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",
+  ),
+  // ── Monospaced & Raw Code Blocks ───────────────────────
+  "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",
+  )
+);
+
+// ── Developer Override ──
+$typography: map.deep-merge($_typography-defaults, config.$zeus-typography);
+@include validate.validate-all-typography($typography);