zeus-css 1.0.0

package/scss/foundation/views/render/classes/_animations.scss

@@ -0,0 +1,233 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Animations                                      ║
+// ║                                                               ║
+// ║  Generates utility classes for animations based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../../zeus.config" as config;
+@use "../../../core/engine/animations" as *;
+@use "../../../core/engine/responsive" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🎬 Zeus Animation Keyframes & Scroll-Driven Classes          ║
+// ║                                                              ║
+// ║  Defined ONCE here, at top level, so this CSS is emitted     ║
+// ║  exactly once as part of foundation.scss. The mixins in       ║
+// ║  core/engine/animations.scss (used by zeus.scss's module-only ║
+// ║  entry point) reference these @keyframes names but do NOT     ║
+// ║  define them, to avoid leaking duplicate CSS into every       ║
+// ║  .module.scss component that does @use "zeus" as *.           ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@keyframes zeus-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes zeus-slide-in-bottom {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes zeus-slide-in-top {
+  from { opacity: 0; transform: translateY(-30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes zeus-slide-in-left {
+  from { opacity: 0; transform: translateX(-30px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes zeus-slide-in-right {
+  from { opacity: 0; transform: translateX(30px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes zeus-bounce {
+  0%,  20%, 50%, 80%, 100% { transform: translateY(0); }
+  40%  { transform: translateY(-20px); }
+  60%  { transform: translateY(-10px); }
+}
+
+@keyframes zeus-pulse {
+  0%, 100% { transform: scale(1);    opacity: 1; }
+  50%       { transform: scale(1.05); opacity: 0.8; }
+}
+
+// rotate uses a CSS custom property so the mixin can pass any angle
+// while the @keyframes itself stays a single top-level definition.
+@keyframes zeus-rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(var(--_zeus-rotate-deg, 360deg)); }
+}
+
+// Used directly by .z-skeleton (views/components/_skeleton.scss) — not
+// exposed as an engine mixin since it's single-purpose, unlike the
+// reusable ones above.
+@keyframes zeus-skeleton-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@if config.$zeus-enable-animation-classes {
+  @layer utilities {
+    // ─── SCROLL-DRIVEN ANIMATIONS (Native CSS) ─────────────────────
+    // animation-timeline: view() — zero JavaScript required.
+    // prefers-reduced-motion guards included — WCAG 2.3.3 compliant.
+
+    // 1. Scroll Fade In (Reveal)
+    .z-scroll-reveal {
+      animation: zeus-scroll-fade-in linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 25vh;
+    }
+
+    // 2. Scroll Tilt
+    .z-scroll-tilt {
+      animation: zeus-scroll-tilt-up linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 25vh;
+      transform-origin: bottom center;
+    }
+
+    // 3. Scroll Scale Up
+    .z-scroll-scale {
+      animation: zeus-scroll-scale-up linear both;
+      animation-timeline: view();
+      animation-range: entry 0% cover 25vh;
+    }
+
+    // ─── prefers-reduced-motion guard (WCAG 2.3.3) ───────────────────
+    @media (prefers-reduced-motion: reduce) {
+      .z-scroll-reveal,
+      .z-scroll-tilt,
+      .z-scroll-scale,
+      [class*="animate-"] {
+        animation: none !important;
+        opacity: 1 !important;
+        transform: none !important;
+        filter: none !important;
+      }
+    }
+
+    // ─── mobile viewport guard ─────────────────────────────────────
+    @include screen-below(md) {
+      .z-scroll-reveal,
+      .z-scroll-tilt,
+      .z-scroll-scale {
+        animation: none !important;
+        opacity: 1 !important;
+        transform: none !important;
+        filter: none !important;
+      }
+    }
+  }
+}
+
+@keyframes zeus-scroll-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes zeus-scroll-tilt-up {
+  from {
+    opacity: 0;
+    transform: perspective(1000px) scale(0.98) rotateX(45deg) translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1000px) scale(1) rotateX(0deg) translateY(0);
+  }
+}
+
+@keyframes zeus-scroll-scale-up {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@mixin load-animations($prefix: "") {
+@if config.$zeus-enable-animation-classes {
+
+.#{$prefix}animate-fade-in {
+  @include fade-in();
+}
+
+.#{$prefix}animate-fade-in-slow {
+  @include fade-in(0.6s);
+}
+
+.#{$prefix}animate-fade-in-fast {
+  @include fade-in(0.15s);
+}
+
+.#{$prefix}animate-slide-up {
+  @include slide-in(bottom);
+}
+
+.#{$prefix}animate-slide-down {
+  @include slide-in(top);
+}
+
+.#{$prefix}animate-slide-left {
+  @include slide-in(right);
+}
+
+.#{$prefix}animate-slide-right {
+  @include slide-in(left);
+}
+
+.#{$prefix}animate-bounce {
+  @include bounce();
+}
+
+.#{$prefix}animate-pulse {
+  @include pulse();
+}
+
+.#{$prefix}animate-rotate {
+  @include rotate();
+}
+
+.hover\:#{$prefix}animate-scale {
+  @include scale(1.05);
+}
+
+.hover\:#{$prefix}animate-scale-sm {
+  @include scale(1.02);
+}
+
+.hover\:#{$prefix}animate-scale-lg {
+  @include scale(1.1);
+}
+
+// Delay utilities
+.#{$prefix}delay-100 { animation-delay: 100ms; }
+.#{$prefix}delay-200 { animation-delay: 200ms; }
+.#{$prefix}delay-300 { animation-delay: 300ms; }
+.#{$prefix}delay-500 { animation-delay: 500ms; }
+.#{$prefix}delay-700 { animation-delay: 700ms; }
+.#{$prefix}delay-1000 { animation-delay: 1000ms; }
+
+// Duration utilities
+.#{$prefix}duration-150 { animation-duration: 150ms; }
+.#{$prefix}duration-300 { animation-duration: 300ms; }
+.#{$prefix}duration-500 { animation-duration: 500ms; }
+.#{$prefix}duration-700 { animation-duration: 700ms; }
+.#{$prefix}duration-1000 { animation-duration: 1000ms; }
+
+} // end @if zeus-enable-animation-classes
+
+}

package/scss/foundation/views/render/classes/_aspect-ratio.scss

@@ -0,0 +1,17 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Aspect Ratio                                    ║
+// ║                                                               ║
+// ║  Generates utility classes for aspect ratio based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@mixin load-aspect-ratio($prefix: "") {
+.#{$prefix}aspect-auto    { aspect-ratio: auto; }
+.#{$prefix}aspect-1-1     { aspect-ratio: 1 / 1; }
+.#{$prefix}aspect-4-3     { aspect-ratio: 4 / 3; }
+.#{$prefix}aspect-3-2     { aspect-ratio: 3 / 2; }
+.#{$prefix}aspect-16-9    { aspect-ratio: 16 / 9; }
+.#{$prefix}aspect-21-9    { aspect-ratio: 21 / 9; }
+.#{$prefix}aspect-3-4     { aspect-ratio: 3 / 4; }
+.#{$prefix}aspect-9-16    { aspect-ratio: 9 / 16; }
+
+}

package/scss/foundation/views/render/classes/_borders.scss

@@ -0,0 +1,31 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Borders                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for borders based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+
+@use "../../../core/engine" as *;
+@use "../../../core/design/borders/border-radius" as border-radius-tokens;
+@use "../../../core/design/borders/border-line" as border-line-tokens;
+
+@mixin load-borders($prefix: "") {
+$border-classes: map.keys(border-radius-tokens.$border-radius);
+$border-line-classes: map.keys(border-line-tokens.$border-line);
+
+@each $size in $border-classes {
+  .#{$prefix}border-radius-#{$size} {
+    @include border-radius($size);
+  }
+}
+
+@each $size in $border-line-classes {
+  .#{$prefix}border-line-#{$size} {
+    @include border-line($size);
+  }
+}
+
+}

package/scss/foundation/views/render/classes/_buttons.scss

@@ -0,0 +1,40 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Buttons                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for buttons based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../../zeus.config" as config;
+
+
+@use "../../../core/engine" as *;
+@use "../../../core/design/core/basic" as *;
+@use "../../../core/design/buttons/sizes" as *;
+@use "../../../core/buttons/variants" as *;
+@use "sass:map";
+
+@mixin load-buttons($prefix: "") {
+// :where() keeps this reset at zero specificity so it never fights with
+// third-party widget button styles or Zeus's own component-level overrides.
+:where(button) {
+  @include button-base-reset();
+  &:focus-visible {
+    outline: $focus-ring;
+  }
+}
+
+// Dynamic button variant classes generation
+@each $variant in map.keys($button-variants) {
+  .#{$prefix}btn-#{$variant} {
+    @include btn-variant($variant);
+  }
+}
+
+// Dynamic button size classes generation
+@each $size in map.keys($button-sizes) {
+  .#{$prefix}btn-#{$size} {
+    @include btn-size($size);
+  }
+}
+
+}

package/scss/foundation/views/render/classes/_colors.scss

@@ -0,0 +1,83 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Colors                                          ║
+// ║                                                               ║
+// ║  Generates utility classes for colors based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+@mixin load-colors($prefix: "") {
+@if config.$zeus-enable-color-utilities {
+
+// ========================================================================================
+// THEME TOKEN UTILITIES (AUTO-GENERATED)
+// ========================================================================================
+
+@each $name, $value in config.$zeus-colors {
+  // Backgrounds
+  .#{$prefix}bg-#{$name} {
+    background-color: var(--color-#{$name});
+  }
+  // Typography Color Rules
+  .#{$prefix}color-#{$name} {
+    color: var(--color-#{$name});
+  }
+  // Borders
+  .#{$prefix}border-color-#{$name} {
+    border-color: var(--color-#{$name});
+  }
+}
+
+// ========================================================================================
+// SPECIAL UTILITIES
+// ========================================================================================
+
+.#{$prefix}bg-transparent { background-color: transparent; }
+.#{$prefix}color-inherit { color: inherit; }
+.#{$prefix}color-current { color: currentColor; }
+.#{$prefix}border-color-transparent { border-color: transparent; }
+.#{$prefix}border-color-currentColor { border-color: currentColor; }
+
+// ========================================================================================
+// BACKGROUND OPACITY VARIANTS — using OKLCH relative color syntax
+// ========================================================================================
+// CORRECT approach: oklch(from var(--color-X) l c h / 0.10)
+//   → modifies ONLY the background-color alpha channel
+//   → element content, text, border and children remain 100% visible
+//
+// WRONG approach (removed): opacity: 0.1
+//   → makes the ENTIRE element (content, text, children) transparent
+//   → causes text inside to become invisible — critical UX bug
+//
+// Generated for ALL $zeus-colors tokens × 5 opacity steps.
+// ========================================================================================
+
+$_opacity-steps: (
+  5:  0.05,
+  10: 0.10,
+  20: 0.20,
+  25: 0.25,
+  30: 0.30,
+  40: 0.40,
+  50: 0.50,
+  60: 0.60,
+  70: 0.70,
+  75: 0.75,
+  80: 0.80,
+  90: 0.90,
+  95: 0.95
+);
+
+@each $name, $value in config.$zeus-colors {
+  @each $step, $alpha in $_opacity-steps {
+    .#{$prefix}bg-#{$name}-#{$step} {
+      background-color: oklch(from var(--color-#{$name}) l c h / #{$alpha});
+    }
+  }
+}
+
+} // end @if zeus-enable-color-utilities
+
+}
+

package/scss/foundation/views/render/classes/_compounds.scss

@@ -0,0 +1,103 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Compounds                                       ║
+// ║                                                               ║
+// ║  Generates utility classes for compounds based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../core/engine" as *;
+
+@mixin load-compounds($prefix: "") {
+// NOTE: .surface (below) and .z-card (views/components/_card.scss) are both
+// intentional, in active use, and NOT duplicates: .surface is a single-class
+// utility card meant to be combined/overridden with other utility classes
+// (padding-*, shadow-*, bg-*, …) on the same element; .z-card is a full BEM
+// component with dedicated __media/__body/__title/__footer sub-elements for
+// structured card layouts. Reach for .surface for a quick styled box, .z-card
+// when you need the structured markup. (Renamed from .zeus-card 25.07 — see
+// naming-convention decision: .z-* is reserved for the framework's fixed
+// BEM components, everything else ships bare and is prefixable via
+// $zeus-use-prefix. Named .surface, not .box, because .box-{size} already
+// exists in _sizes.scss as the icon/box-dimension utility family — .box would
+// have looked like a member of that family instead of an unrelated card.)
+.#{$prefix}surface {
+  @include padding("lg");
+  @include border-radius("md");
+  @include card-shadow();
+  background: var(--color-surface);
+  border: var(--border-line-xs) solid var(--color-border);
+}
+
+.#{$prefix}surface-flat {
+  @include padding("lg");
+  @include border-radius("md");
+  background: var(--color-surface);
+  border: var(--border-line-xs) solid var(--color-border);
+}
+
+// ── Legacy Section Aliases ───────────────────────────────
+// These are maintained for backwards compatibility. They are equivalent to
+// the new `.section-*` sizes but they ALSO inject hardcoded inline padding.
+// Named .section-wrap(-narrow), not .section-<size>, so they can never be
+// mistaken for a member of the .section-sm/lg/none/full size scale.
+// 👉 Modern approach: Use `<section class="section-3xl"><div class="container">`
+.#{$prefix}section-wrap {
+  @include padding("3xl", "block");
+  @include padding("xl", "inline");
+}
+
+.#{$prefix}section-wrap-narrow {
+  @include padding("2xl", "block");
+  @include padding("lg", "inline");
+  max-width: 960px;
+  margin-inline: auto;
+}
+
+.#{$prefix}glass {
+  background: color-mix(in oklch, var(--color-surface) 10%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: var(--border-line-xs) solid color-mix(in oklch, var(--color-surface) 15%, transparent);
+  @include border-radius("md");
+}
+
+.#{$prefix}divider {
+  border: none;
+  border-top: var(--border-line-xs) solid var(--color-border);
+  margin: var(--space-xl) 0;
+}
+
+.#{$prefix}sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.#{$prefix}truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$prefix}line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.#{$prefix}line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+}

package/scss/foundation/views/render/classes/_containers.scss

@@ -0,0 +1,20 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Containers                                      ║
+// ║                                                               ║
+// ║  Generates utility classes for containers based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../core/design/layout/grid" as *;
+
+@mixin load-containers($prefix: "") {
+.#{$prefix}container {
+  width: 100%;
+  max-width: $outer-max-width;
+  margin-inline: auto;
+
+  // Single fluid clamp for horizontal padding that scales with viewport width
+  // Uses the container bounds from config to calculate a linear clamp() function
+  padding-inline: var(--padding-outer);
+}
+
+}

package/scss/foundation/views/render/classes/_misc-utils.scss

@@ -0,0 +1,51 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Misc Utils                                      ║
+// ║                                                               ║
+// ║  Generates opacity/overflow/object-fit/order/flex utilities.  ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:math";
+
+@mixin load-misc-utils($prefix: "") {
+
+// ── Opacity (step 5) ──────────────────────────────────────────
+@for $i from 0 through 20 {
+  $step: $i * 5;
+  .#{$prefix}opacity-#{$step} {
+    opacity: math.div($step, 100);
+  }
+}
+
+// ── Overflow ──────────────────────────────────────────────────
+.#{$prefix}overflow-auto    { overflow: auto; }
+.#{$prefix}overflow-hidden  { overflow: hidden; }
+.#{$prefix}overflow-scroll  { overflow: scroll; }
+.#{$prefix}overflow-visible { overflow: visible; }
+
+.#{$prefix}overflow-y-auto    { overflow-y: auto; }
+.#{$prefix}overflow-y-hidden  { overflow-y: hidden; }
+.#{$prefix}overflow-y-scroll  { overflow-y: scroll; }
+
+// ── Object fit / position ────────────────────────────────────
+.#{$prefix}object-cover   { object-fit: cover; }
+.#{$prefix}object-contain { object-fit: contain; }
+.#{$prefix}object-fill    { object-fit: fill; }
+.#{$prefix}object-center  { object-position: center; }
+
+// ── Flex item behavior ────────────────────────────────────────
+.#{$prefix}flex-grow-0   { flex-grow: 0; }
+.#{$prefix}flex-grow-1   { flex-grow: 1; }
+.#{$prefix}flex-shrink-0 { flex-shrink: 0; }
+.#{$prefix}flex-shrink-1 { flex-shrink: 1; }
+
+// ── Order ─────────────────────────────────────────────────────
+.#{$prefix}order-first { order: -1; }
+.#{$prefix}order-last  { order: 999; }
+.#{$prefix}order-none  { order: 0; }
+@for $i from 1 through 6 {
+  .#{$prefix}order-#{$i} {
+    order: #{$i};
+  }
+}
+
+}

package/scss/foundation/views/render/classes/_position.scss

@@ -0,0 +1,56 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Position                                        ║
+// ║                                                               ║
+// ║  Generates position/inset utility classes.                    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../core/design/dimensions/spaces" as spacing-tokens;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📍 Position & Inset Utilities                               ║
+// ║                                                              ║
+// ║  Logical-first: inset-inline-*/inset-block-* rather than       ║
+// ║  left/right, so overlays and offsets flip correctly under RTL. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@mixin load-position($prefix: "") {
+
+// ── Position ──────────────────────────────────────────────────
+.#{$prefix}static   { position: static; }
+.#{$prefix}relative { position: relative; }
+.#{$prefix}absolute  { position: absolute; }
+.#{$prefix}fixed    { position: fixed; }
+.#{$prefix}sticky   { position: sticky; }
+
+// ── Inset shorthand ───────────────────────────────────────────
+// .inset-0 is generated below from the space scale (it includes a "0" key)
+.#{$prefix}inset-auto { inset: auto; }
+
+// ── Logical inset offsets, from the fluid space scale ─────────
+$sizes: map.keys(spacing-tokens.$space);
+
+@each $size in $sizes {
+  .#{$prefix}inset-#{$size} {
+    inset: var(--space-#{$size});
+  }
+  .#{$prefix}top-#{$size} {
+    top: var(--space-#{$size});
+  }
+  .#{$prefix}bottom-#{$size} {
+    bottom: var(--space-#{$size});
+  }
+  .#{$prefix}inset-inline-start-#{$size} {
+    inset-inline-start: var(--space-#{$size});
+  }
+  .#{$prefix}inset-inline-end-#{$size} {
+    inset-inline-end: var(--space-#{$size});
+  }
+}
+
+.#{$prefix}top-auto    { top: auto; }
+.#{$prefix}bottom-auto { bottom: auto; }
+.#{$prefix}inset-inline-start-auto { inset-inline-start: auto; }
+.#{$prefix}inset-inline-end-auto   { inset-inline-end: auto; }
+
+}

package/scss/foundation/views/render/classes/_sections.scss

@@ -0,0 +1,30 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Sections                                        ║
+// ║                                                               ║
+// ║  Generates utility classes for sections based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../core/engine" as *;
+@use "../../../core/design/dimensions/spaces" as spacing-tokens;
+
+@mixin load-sections($prefix: "") {
+$spacing-sizes: map.keys(spacing-tokens.$space);
+
+  // .section-0 (from the "0" key below) already covers the zero-padding
+  // case — no separate .section-none needed. (Removed 26.07, P2-20: the two
+  // were an exact duplicate, .section-none hardcoded literal 0 instead of
+  // going through --space-0 like every other size in this family.)
+  @each $size in $spacing-sizes {
+    .#{$prefix}section-#{$size} {
+      padding-block: var(--space-#{$size});
+    }
+  }
+
+  .#{$prefix}section-full {
+    min-height: 100svh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}