zeus-css 1.0.0

package/scss/foundation/views/render/root-generator.scss

@@ -0,0 +1,166 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Root Generator                                  ║
+// ║                                                               ║
+// ║  Core styles and definitions for root generator.              ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "../../../zeus.config" as config;
+@use "../../core/design" as *;
+@use "../../core/engine" as *;
+@use "../../core/design/typography/typography" as typo;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus Root Generator                                      ║
+// ║                                                              ║
+// ║  Single mixin generates ALL CSS custom properties.           ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus Token Pipeline Engine                                ║
+// ║                                                              ║
+// ║  A functional pipeline that resolves, transforms, and         ║
+// ║  emits CSS custom properties from a master dictionary.       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// --- Stage 1: Resolver (Categorize the token) ---
+@function zeus-resolve-type($value) {
+  @if meta.type-of($value) !="map" {
+    @return "atomic";
+  }
+
+  $has-floor: map.has-key($value, "floor");
+  $has-ceil: map.has-key($value, "ceil");
+  @if $has-floor and $has-ceil {
+    @return "fluid-dimension";
+  }
+  // 'floor'/'ceil' are reserved fluid-dimension keys — a map with only one of
+  // them is a malformed override (e.g. a missing 'ceil'), not a legitimately
+  // named nested map. Error loudly instead of silently misfiling it as a
+  // nested map, which used to emit a bogus "{name}-floor" var and drop the
+  // real one entirely.
+  @if $has-floor or $has-ceil {
+    @error "[Zeus] Malformed fluid-dimension token: found only one of 'floor'/'ceil'. Both are required. Got keys: #{map.keys($value)}.";
+  }
+
+  $has-weight: map.has-key($value, "weight");
+  $has-lh: map.has-key($value, "lh");
+  @if $has-weight and $has-lh {
+    @return "typography-set";
+  }
+  @if $has-weight or $has-lh {
+    @error "[Zeus] Malformed typography-set token: found only one of 'weight'/'lh'. Both are required. Got keys: #{map.keys($value)}.";
+  }
+
+  @return "nested-map";
+}
+
+// --- Stage 2: Transformer (Calculate the final value) ---
+@function zeus-transform-value($type, $value, $key: null) {
+  @if $type =="fluid-dimension" {
+    @return useclamp-sizing(map.get($value, "floor"), map.get($value, "ceil"));
+  }
+
+  @if $type =="typography-set" {
+    $family-key: map.get($value, "family");
+    @if not map.has-key(typo.$font-family, $family-key) {
+      @error "[Zeus] Typography token '#{$key}' references unknown font family '#{$family-key}'. Available: #{map.keys(typo.$font-family)}.";
+    }
+    $font-family-val: map.get(typo.$font-family, $family-key);
+    @return #{map.get($value, "weight")} #{useclamp-typography($key)} / #{map.get($value, "lh")} #{$font-family-val};
+  }
+
+  @return $value;
+}
+
+// --- Stage 3: Emitter (Generate the CSS Variable) ---
+@mixin zeus-emit-variable($name, $value) {
+  @if $value !=null {
+    #{$name}: #{$value};
+  }
+}
+
+// --- Stage 4: Orchestrator (Recursive traversal) ---
+@mixin zeus-pipeline-orchestrator($dictionary, $prefix: "--") {
+  @each $key, $value in $dictionary {
+    $type: zeus-resolve-type($value);
+
+    // Dynamic naming logic (removes 'default' suffixes for cleaner aliases)
+    $current-name: null;
+    @if $key == "default" {
+      $current-name: $prefix;
+    } @else {
+      @if $prefix == "--" {
+        $current-name: "#{$prefix}#{$key}";
+      } @else {
+        $current-name: "#{$prefix}-#{$key}";
+      }
+    }
+
+    @if $type =="nested-map" {
+      @include zeus-pipeline-orchestrator($value, $current-name);
+    }
+
+    @else {
+      $transformed-value: zeus-transform-value($type, $value, $key);
+      @include zeus-emit-variable($current-name, $transformed-value);
+    }
+  }
+}
+
+// Ascending-by-pixel-value ordering of a breakpoint map's keys. The custom-vars
+// loop below assumes this order for a correct mobile-first cascade — relying on
+// $zeus-breakpoints' own map-literal insertion order was fragile: an override
+// that appends a new key out of numeric order (e.g. a "tiny" breakpoint typed
+// after "xxl") would silently cascade last instead of where its pixel value
+// puts it. Small, fixed-size map (breakpoint counts are single digits), sorted
+// once per zeus-root-vars() call — negligible compile-time cost.
+@function _zeus-sorted-breakpoint-keys($breakpoints-map) {
+  $keys: map.keys($breakpoints-map);
+  $n: list.length($keys);
+  @for $i from 1 through $n - 1 {
+    @for $j from 1 through $n - $i {
+      $a: list.nth($keys, $j);
+      $b: list.nth($keys, $j + 1);
+      @if map.get($breakpoints-map, $a) > map.get($breakpoints-map, $b) {
+        $keys: list.set-nth($keys, $j, $b);
+        $keys: list.set-nth($keys, $j + 1, $a);
+      }
+    }
+  }
+  @return $keys;
+}
+
+// --- Public API ---
+@mixin zeus-root-vars() {
+
+  // Dynamic Responsive Custom Variables
+  @if meta.type-of(config.$zeus-custom-vars) == "map" {
+    @each $var-name, $breakpoints-map in config.$zeus-custom-vars {
+      $is-first: true;
+      // Loop in ascending pixel order (not map-literal order) to guarantee a
+      // correct mobile-first cascade regardless of how the breakpoint override
+      // map was authored.
+      @each $bp in _zeus-sorted-breakpoint-keys(config.$zeus-breakpoints) {
+        @if map.has-key($breakpoints-map, $bp) {
+          $val: map.get($breakpoints-map, $bp);
+
+          // The lowest defined breakpoint is treated as the base value (no media query)
+          @if $is-first {
+            --#{$var-name}: #{$val};
+            $is-first: false;
+          } @else {
+            @include screen-above($bp) {
+              --#{$var-name}: #{$val};
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Execute the automated token pipeline
+  @include zeus-pipeline-orchestrator($zeus-design-system);
+}

package/scss/foundation/views/render/root.scss

@@ -0,0 +1,19 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Root                                            ║
+// ║                                                               ║
+// ║  Core styles and definitions for root.                        ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "./root-generator" as *;
+
+@use "../../core/design/colors/semantic-colors" as semantic;
+
+@layer tokens {
+  :root {
+    @include zeus-root-vars();
+  }
+
+  // Emits default semantic color tokens under :root
+  @include semantic.generate-semantic-colors();
+}

package/scss/foundation/views/render/typography.scss

@@ -0,0 +1,129 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Typography                                      ║
+// ║                                                               ║
+// ║  Core styles and definitions for typography.                  ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+@layer base {
+  /**
+   * Zeus CSS Typography
+   * Core typographic styles and text element normalization
+   */
+
+  // Anchor Elements and Hyperlinks
+  :where(a) {
+    outline: none;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+
+    // &:hover {
+    //   color: initial;
+    // }
+
+    &:focus-visible {
+      outline: $focus-ring;
+      outline-offset: 2px;
+    }
+
+    // &:active {
+    //   opacity: 0.8;
+    // }
+  }
+
+  // Initialisms and Shortened Terms
+  :where(abbr[title]) {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+
+  // Bulleted & Ordered Collections
+  // Plain <ul>/<ol> keep native browser bullets, numbering and indentation —
+  // this preserves list semantics for assistive tech (VoiceOver/Safari drop the
+  // list role when list-style is stripped without an explicit ARIA role).
+  // Decorative/navigational lists opt out via [role="list"] — see reset.scss.
+
+  // Standard Prose Blocks
+  :where(p) {
+    margin-top: var(--space-xl);
+    margin-bottom: var(--space-xl);
+  }
+
+  p:first-child {
+    margin-top: 0;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  // Text emphasis
+  :where(strong, b) {
+    font-weight: 600;
+  }
+
+  :where(em, i) {
+    font-style: italic;
+  }
+
+  // Code elements
+  :where(code) {
+    padding: 0.125em 0.375em;
+    border-radius: 0.25em;
+    background: var(--color-surface-subtle);
+    font-size: 0.9em;
+  }
+
+  :where(pre) {
+    overflow-x: auto;
+
+    code {
+      padding: 0;
+      background: none;
+    }
+  }
+
+  // Quotes
+  :where(blockquote) {
+    padding-inline-start: var(--space-lg);
+    border-inline-start: 3px solid var(--color-border);
+    font-style: italic;
+  }
+
+  // Mark/Highlight
+  :where(mark) {
+    padding: 0.125em 0.25em;
+    background: var(--color-warning-subtle);
+    color: inherit;
+  }
+
+  // Subscript and Superscript baseline offsets
+  :where(sub, sup) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  :where(sub) {
+    bottom: -0.25em;
+  }
+
+  :where(sup) {
+    top: -0.5em;
+  }
+
+  // Small text
+  :where(small) {
+    font-size: 0.875em;
+  }
+
+  // Text selection
+  ::selection {
+    background: var(--color-primary-light);
+    color: var(--color-text-inverse);
+  }
+}

package/scss/llms.txt

@@ -0,0 +1,247 @@
+# Zeus CSS — LLM Reference
+
+Auto-generated from source (scripts/gen-cheatsheet.mjs). Two entry points:
+  @use "zeus" as *;         — mixins/functions only, zero CSS emitted
+  @use "foundation";        — full compiled CSS, import once at app root
+
+## Mixins & Functions
+
+mixin fade-in($duration: 0.3s, $delay: 0s, $timing: ease-in-out) — Usage: @include fade-in(0.5s, 0.2s); [foundation/core/engine/animations.scss]
+mixin slide-in($direction: bottom, $duration: 0.3s, $delay: 0s, $timing: ease-out) — Usage: @include slide-in(left, 0.4s); [foundation/core/engine/animations.scss]
+mixin scale($scale: 1.05, $duration: 0.3s, $timing: ease-in-out) — Usage: @include scale(1.1, 0.3s); [foundation/core/engine/animations.scss]
+mixin bounce($duration: 0.8s, $iteration: 1, $delay: 0s) — Usage: @include bounce(0.6s, infinite); [foundation/core/engine/animations.scss]
+mixin pulse($duration: 1s, $iteration: infinite) — Usage: @include pulse(1.5s, infinite); [foundation/core/engine/animations.scss]
+mixin rotate($degrees: 360deg, $duration: 1s, $timing: linear, $iteration: 1) — Usage: @include rotate(360deg, 2s, linear, infinite); [foundation/core/engine/animations.scss]
+mixin button-base-reset() [foundation/core/engine/buttons.scss]
+mixin button-structure() [foundation/core/engine/buttons.scss]
+mixin button-apply-variant($variant: "primary") — Uses direct map access instead of a getter function [foundation/core/engine/buttons.scss]
+mixin btn-primary() [foundation/core/engine/buttons.scss]
+mixin btn-secondary() [foundation/core/engine/buttons.scss]
+mixin btn-tertiary() [foundation/core/engine/buttons.scss]
+mixin btn-icon-only() [foundation/core/engine/buttons.scss]
+mixin btn-variant($variant: "primary") [foundation/core/engine/buttons.scss]
+mixin btn-size($size: "md") [foundation/core/engine/buttons.scss]
+function color($name, $alpha: 1) — Retrieve any color from the design palette with optional alpha [foundation/core/engine/color-api.scss]
+function map-get-safe($map, $key) — Extracts values from the provided map structure with type validation and unquoted key normalization [foundation/core/engine/helpers.scss]
+mixin border-radius($type) — Applies dynamically-scaled responsive rounded corners based on predefined maps [foundation/core/engine/layout.scss]
+mixin border-line($type) — Configures responsive border thickness and strokes across viewport ranges [foundation/core/engine/layout.scss]
+mixin box-size($type) — Mixin for icon sizes through devices — always clamp() [foundation/core/engine/layout.scss]
+mixin padding($size, $direction: null) — Mixin for padding with optional direction — references --space-* :root token [foundation/core/engine/layout.scss]
+mixin margin($size, $direction: null) — Mixin for margin with optional direction — references --space-* :root token [foundation/core/engine/layout.scss]
+mixin gap($size, $direction: null) — Mixin for gap with optional direction — references --space-* :root token [foundation/core/engine/layout.scss]
+mixin not-first-child() [foundation/core/engine/layout.scss]
+mixin not-last-child() [foundation/core/engine/layout.scss]
+mixin horizontal-scroll() [foundation/core/engine/layout.scss]
+mixin no-horizontal-scroll() [foundation/core/engine/layout.scss]
+function bp($key) [foundation/core/engine/responsive.scss]
+mixin screen-above($breakpoint) [foundation/core/engine/responsive.scss]
+mixin screen-below($breakpoint) [foundation/core/engine/responsive.scss]
+mixin screen-between($lower, $upper) [foundation/core/engine/responsive.scss]
+mixin suppress-on($scope) — Scopes: 'handheld', 'mobile', 'tablet', 'desktop' (all singular). [foundation/core/engine/responsive.scss]
+mixin apply-shadow($size: "md") — Usage: @include apply-shadow("md"); [foundation/core/engine/shadows.scss]
+mixin elevation($level: 1) — Usage: @include elevation(2); // Applies shadow-md [foundation/core/engine/shadows.scss]
+mixin hover-shadow($default: "md", $hover: "lg") — Usage: @include hover-shadow("sm", "lg"); [foundation/core/engine/shadows.scss]
+mixin focus-shadow($shadow: "outline") — Usage: @include focus-shadow("outline"); [foundation/core/engine/shadows.scss]
+mixin interactive-shadow($default: "md", $hover: "lg", $focus: "outline") — Usage: @include interactive-shadow("md", "lg", "outline"); [foundation/core/engine/shadows.scss]
+mixin card-shadow() — Usage: @include card-shadow(); [foundation/core/engine/shadows.scss]
+mixin semantic-shadow($type: "primary") — Usage: @include semantic-shadow("primary"); [foundation/core/engine/shadows.scss]
+mixin glow-effect($color: rgba(59, 130, 246, 0.5), $blur: 20px) — Usage: @include glow-effect("primary", 0.5); [foundation/core/engine/shadows.scss]
+mixin inner-shadow($size: "inner") — Usage: @include inner-shadow(); [foundation/core/engine/shadows.scss]
+mixin layered-shadow($shadow1, $shadow2) — Usage: @include layered-shadow("md", "primary"); [foundation/core/engine/shadows.scss]
+mixin conditional-shadow($state: "hover", $shadow: "md") — Usage: @include conditional-shadow("hover", "lg"); [foundation/core/engine/shadows.scss]
+mixin no-shadow() — Usage: @include no-shadow(); [foundation/core/engine/shadows.scss]
+mixin p($size, $dir: null) [foundation/core/engine/shortcuts.scss]
+mixin m($size, $dir: null) [foundation/core/engine/shortcuts.scss]
+mixin g($size, $dir: null) [foundation/core/engine/shortcuts.scss]
+mixin r($type) [foundation/core/engine/shortcuts.scss]
+mixin t($type) [foundation/core/engine/shortcuts.scss]
+mixin sz($type) [foundation/core/engine/shortcuts.scss]
+function useclamp-sizing($min, $max, $c-floor: map.get($container-bounds, "floor"), $c-ceil: map.get($container-bounds, "ceil"), $precision: 3) [foundation/core/engine/sizing.scss]
+mixin zeus-theme($name, $config) [foundation/core/engine/theme-builder.scss]
+mixin text($type) — The var is already generated by root-generator.scss. [foundation/core/engine/typographics.scss]
+function useclamp-typography($typeface, $precision: 3) [foundation/core/engine/typography-calc.scss]
+
+## Utility Class Families
+
+.flex  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.flex-row  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.flex-wrap  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.flex-column  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.flex-center  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.flex-space-between  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.d-none  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.d-block  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.d-inline-block  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.align-center  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.align-start  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.align-end  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.justify-center  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.justify-start  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.justify-end  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.justify-between  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.justify-around  (load-flexbox)  [foundation/views/render/classes/flexbox.scss]
+.d-grid  (load-grid)  [foundation/views/render/classes/grid.scss]
+.d-inline-grid  (load-grid)  [foundation/views/render/classes/grid.scss]
+.grid  (load-grid)  [foundation/views/render/classes/grid.scss]
+.col-span-{n}  (load-grid)  [foundation/views/render/classes/grid.scss]
+.col-span-full  (load-grid)  [foundation/views/render/classes/grid.scss]
+.col-start-{n}  (load-grid)  [foundation/views/render/classes/grid.scss]
+.col-end-{n}  (load-grid)  [foundation/views/render/classes/grid.scss]
+.grid-cards  (load-grid)  [foundation/views/render/classes/grid.scss]
+.grid-sidebar  (load-grid)  [foundation/views/render/classes/grid.scss]
+.grid-split  (load-grid)  [foundation/views/render/classes/grid.scss]
+.grid-thirds  (load-grid)  [foundation/views/render/classes/grid.scss]
+.animate-fade-in  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-fade-in-slow  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-fade-in-fast  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-slide-up  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-slide-down  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-slide-left  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-slide-right  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-bounce  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-pulse  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.animate-rotate  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-100  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-200  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-300  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-500  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-700  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.delay-1000  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.duration-150  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.duration-300  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.duration-500  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.duration-700  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.duration-1000  (load-animations)  [foundation/views/render/classes/_animations.scss]
+.aspect-auto  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-1-1  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-4-3  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-3-2  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-16-9  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-21-9  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-3-4  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.aspect-9-16  (load-aspect-ratio)  [foundation/views/render/classes/_aspect-ratio.scss]
+.border-radius-{n}  (load-borders)  [foundation/views/render/classes/_borders.scss]
+.border-line-{n}  (load-borders)  [foundation/views/render/classes/_borders.scss]
+.btn-{n}  (load-buttons)  [foundation/views/render/classes/_buttons.scss]
+.bg-{n}  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.color-{n}  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.border-color-{n}  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.bg-transparent  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.color-inherit  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.color-current  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.border-color-transparent  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.border-color-currentColor  (load-colors)  [foundation/views/render/classes/_colors.scss]
+.surface  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.surface-flat  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.section-wrap  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.section-wrap-narrow  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.glass  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.divider  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.sr-only  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.truncate  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.line-clamp-2  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.line-clamp-3  (load-compounds)  [foundation/views/render/classes/_compounds.scss]
+.container  (load-containers)  [foundation/views/render/classes/_containers.scss]
+.opacity-{n}  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-auto  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-hidden  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-scroll  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-visible  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-y-auto  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-y-hidden  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.overflow-y-scroll  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.object-cover  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.object-contain  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.object-fill  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.object-center  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.flex-grow-0  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.flex-grow-1  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.flex-shrink-0  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.flex-shrink-1  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.order-first  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.order-last  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.order-none  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.order-{n}  (load-misc-utils)  [foundation/views/render/classes/_misc-utils.scss]
+.static  (load-position)  [foundation/views/render/classes/_position.scss]
+.relative  (load-position)  [foundation/views/render/classes/_position.scss]
+.absolute  (load-position)  [foundation/views/render/classes/_position.scss]
+.fixed  (load-position)  [foundation/views/render/classes/_position.scss]
+.sticky  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-auto  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-{n}  (load-position)  [foundation/views/render/classes/_position.scss]
+.top-{n}  (load-position)  [foundation/views/render/classes/_position.scss]
+.bottom-{n}  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-inline-start-{n}  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-inline-end-{n}  (load-position)  [foundation/views/render/classes/_position.scss]
+.top-auto  (load-position)  [foundation/views/render/classes/_position.scss]
+.bottom-auto  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-inline-start-auto  (load-position)  [foundation/views/render/classes/_position.scss]
+.inset-inline-end-auto  (load-position)  [foundation/views/render/classes/_position.scss]
+.section-{n}  (load-sections)  [foundation/views/render/classes/_sections.scss]
+.section-full  (load-sections)  [foundation/views/render/classes/_sections.scss]
+.shadow-none  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-xs  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-sm  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-md  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-lg  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-xl  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-2xl  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-primary  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-secondary  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-success  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-warning  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-danger  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-info  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-inner  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-inner-lg  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-glow  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-glow-lg  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-outline  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-card  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-card-hover  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-dropdown  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-modal  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-transition  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-transition-fast  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.shadow-transition-slow  (load-shadows)  [foundation/views/render/classes/_shadows.scss]
+.box-{n}  (load-sizes)  [foundation/views/render/classes/_sizes.scss]
+.icon-{n}  (load-sizes)  [foundation/views/render/classes/_sizes.scss]
+.w-auto  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-screen  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-fit  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-min  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-max  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-1\  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-2\  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.w-3\  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.min-w-0  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.min-w-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.max-w-none  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.max-w-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-auto  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-screen  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-fit  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-min  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.h-max  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.min-h-0  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.min-h-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.min-h-screen  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.max-h-none  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.max-h-full  (load-sizing-utils)  [foundation/views/render/classes/_sizing-utils.scss]
+.gap-{n}  (load-spacing)  [foundation/views/render/classes/_spacing.scss]
+.text-{n}  (load-typography)  [foundation/views/render/classes/_typography.scss]
+.w-unset  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.h-unset  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.no-overflow-x  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.highlight  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.article  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-desktops  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-tablets  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-tablets-desktops  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-mobiles  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-devices  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-upto-ml  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.hidden-from-ml  (load-utilities)  [foundation/views/render/classes/_utilities.scss]
+.layer-{n}  (load-z-index)  [foundation/views/render/classes/_z-index.scss]

package/scss/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "zeus-css",
+  "version": "1.0.0",
+  "description": "Zeus CSS — a fluid-first SCSS design system: cqi-based fluid scaling, OKLCH semantic color tokens, cascade layers, and an AI-readable token pipeline.",
+  "license": "MIT",
+  "author": "Stavros Kosmas Lazaris",
+  "keywords": [
+    "css",
+    "scss",
+    "sass",
+    "design-system",
+    "design-tokens",
+    "fluid-typography",
+    "css-framework",
+    "oklch",
+    "cascade-layers"
+  ],
+  "main": "foundation/foundation.scss",
+  "sass": "zeus.scss",
+  "style": "dist/zeus.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stevenkoslaz/zeus-ui-initial.git"
+  },
+  "homepage": "https://github.com/stevenkoslaz/zeus-ui-initial#readme",
+  "bugs": {
+    "url": "https://github.com/stevenkoslaz/zeus-ui-initial/issues"
+  },
+  "scripts": {
+    "build:css": "sass foundation/foundation.scss dist/zeus.css --style=expanded && sass foundation/foundation.scss dist/zeus.min.css --style=compressed",
+    "test:compile": "node scripts/test-compile.mjs",
+    "lint:scss": "stylelint \"**/*.scss\"",
+    "gen:tokens": "node scripts/gen-tokens.mjs",
+    "gen:cheatsheet": "node scripts/gen-cheatsheet.mjs",
+    "prepack": "npm run build:css && npm run gen:tokens && npm run gen:cheatsheet"
+  },
+  "exports": {
+    ".": {
+      "sass": "./foundation/foundation.scss",
+      "style": "./dist/zeus.css",
+      "default": "./dist/zeus.css"
+    },
+    "./css": "./dist/zeus.css",
+    "./min": "./dist/zeus.min.css",
+    "./zeus": {
+      "sass": "./zeus.scss",
+      "default": "./zeus.scss"
+    },
+    "./foundation": {
+      "sass": "./foundation/foundation.scss",
+      "default": "./foundation/foundation.scss"
+    },
+    "./config": {
+      "sass": "./zeus.config.scss",
+      "default": "./zeus.config.scss"
+    },
+    "./customize": {
+      "sass": "./zeus.customize.scss",
+      "default": "./zeus.customize.scss"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "foundation/**/*.scss",
+    "zeus.scss",
+    "zeus.config.scss",
+    "zeus.customize.scss",
+    "zeus.token.sets.example.scss",
+    "zeus.tokens.json",
+    "llms.txt",
+    "cheatsheet.md",
+    "API.md",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "sass": "^1.99.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-standard-scss": "^13.0.0"
+  }
+}