zeus-css 1.0.0

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

@@ -0,0 +1,198 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Shadows                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for shadows based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../../zeus.config" as config;
+@use "../../../core/design/effects/shadows" as *;
+
+@mixin load-shadows($prefix: "") {
+@if config.$zeus-enable-shadow-classes {
+
+// -----------------------------------------------------------------------------
+// BASE SHADOW CLASSES
+// -----------------------------------------------------------------------------
+
+// No shadow
+.#{$prefix}shadow-none {
+  box-shadow: none !important;
+}
+
+// Elevation levels
+.#{$prefix}shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+
+.#{$prefix}shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.#{$prefix}shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.#{$prefix}shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.#{$prefix}shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.#{$prefix}shadow-2xl {
+  box-shadow: var(--shadow-2xl);
+}
+
+// -----------------------------------------------------------------------------
+// SEMANTIC SHADOW CLASSES
+// -----------------------------------------------------------------------------
+
+.#{$prefix}shadow-primary {
+  box-shadow: var(--shadow-primary);
+}
+
+.#{$prefix}shadow-secondary {
+  box-shadow: var(--shadow-secondary);
+}
+
+.#{$prefix}shadow-success {
+  box-shadow: var(--shadow-success);
+}
+
+.#{$prefix}shadow-warning {
+  box-shadow: var(--shadow-warning);
+}
+
+.#{$prefix}shadow-danger {
+  box-shadow: var(--shadow-danger);
+}
+
+.#{$prefix}shadow-info {
+  box-shadow: var(--shadow-info);
+}
+
+// -----------------------------------------------------------------------------
+// INNER SHADOW CLASSES
+// -----------------------------------------------------------------------------
+
+.#{$prefix}shadow-inner {
+  box-shadow: var(--shadow-inner);
+}
+
+.#{$prefix}shadow-inner-lg {
+  box-shadow: var(--shadow-inner-lg);
+}
+
+// -----------------------------------------------------------------------------
+// SPECIAL EFFECT CLASSES
+// -----------------------------------------------------------------------------
+
+.#{$prefix}shadow-glow {
+  box-shadow: var(--shadow-glow);
+}
+
+.#{$prefix}shadow-glow-lg {
+  box-shadow: var(--shadow-glow-lg);
+}
+
+.#{$prefix}shadow-outline {
+  box-shadow: var(--shadow-outline);
+}
+
+// -----------------------------------------------------------------------------
+// COMPONENT SHADOW CLASSES
+// -----------------------------------------------------------------------------
+
+.#{$prefix}shadow-card {
+  box-shadow: var(--shadow-card);
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: var(--shadow-card-hover);
+  }
+}
+
+.#{$prefix}shadow-card-hover {
+  box-shadow: var(--shadow-card-hover);
+}
+
+.#{$prefix}shadow-dropdown {
+  box-shadow: var(--shadow-dropdown);
+}
+
+.#{$prefix}shadow-modal {
+  box-shadow: var(--shadow-modal);
+}
+
+// -----------------------------------------------------------------------------
+// HOVER VARIANTS
+// -----------------------------------------------------------------------------
+
+.hover\:#{$prefix}shadow-xs:hover {
+  box-shadow: var(--shadow-xs);
+}
+
+.hover\:#{$prefix}shadow-sm:hover {
+  box-shadow: var(--shadow-sm);
+}
+
+.hover\:#{$prefix}shadow-md:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.hover\:#{$prefix}shadow-lg:hover {
+  box-shadow: var(--shadow-lg);
+}
+
+.hover\:#{$prefix}shadow-xl:hover {
+  box-shadow: var(--shadow-xl);
+}
+
+.hover\:#{$prefix}shadow-2xl:hover {
+  box-shadow: var(--shadow-2xl);
+}
+
+.hover\:#{$prefix}shadow-none:hover {
+  box-shadow: none !important;
+}
+
+// -----------------------------------------------------------------------------
+// FOCUS VARIANTS
+// -----------------------------------------------------------------------------
+
+// Transparent, not none: invisible in normal rendering (box-shadow is the
+// real affordance) but forced-colors mode paints outlines with a system
+// color regardless of author color, so focus survives box-shadow being
+// stripped entirely under forced-colors.
+.focus\:#{$prefix}shadow-outline:focus-visible {
+  box-shadow: var(--shadow-outline);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:#{$prefix}shadow-primary:focus-visible {
+  box-shadow: var(--shadow-primary);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+// -----------------------------------------------------------------------------
+// TRANSITION HELPERS
+// -----------------------------------------------------------------------------
+
+.#{$prefix}shadow-transition {
+  transition: box-shadow 0.3s ease;
+}
+
+.#{$prefix}shadow-transition-fast {
+  transition: box-shadow 0.15s ease;
+}
+
+.#{$prefix}shadow-transition-slow {
+  transition: box-shadow 0.5s ease;
+}
+
+} // end @if zeus-enable-shadow-classes
+
+}

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

@@ -0,0 +1,39 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Sizes                                           ║
+// ║                                                               ║
+// ║  Generates utility classes for sizes based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+
+@use "../../../core/engine" as *;
+@use "../../../core/design/dimensions/sizes" as sizing-tokens;
+
+@mixin load-sizes($prefix: "") {
+$box-sizes: sizing-tokens.$icon-size;
+$box-classes: map.keys($box-sizes);
+
+@each $size in $box-classes {
+  .#{$prefix}box-#{$size} {
+    @include box-size($size);
+  }
+}
+
+@each $size in $box-classes {
+  .#{$prefix}icon-#{$size} {
+    @include box-size($size);
+  }
+}
+
+// @each $size in $element-classes {
+//   .element-#{$size} {
+//     &,
+//     img {
+//       @include elementSize($size);
+//     }
+//   }
+// }
+
+}

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

@@ -0,0 +1,53 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Sizing Utils                                    ║
+// ║                                                               ║
+// ║  Generates width/height utility classes.                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📐 Width / Height Utilities                                 ║
+// ║                                                              ║
+// ║  min-w-0 in particular matters for flex/grid children: a flex ║
+// ║  item's default min-width is `auto`, which can force it wider ║
+// ║  than its container when it holds unbreakable content (long   ║
+// ║  text, a code block) — the exact class of bug fixed in the    ║
+// ║  grid utilities via minmax(0, 1fr). min-w-0 is the equivalent ║
+// ║  escape hatch for flex children.                              ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@mixin load-sizing-utils($prefix: "") {
+
+// ── Width ─────────────────────────────────────────────────────
+.#{$prefix}w-auto  { width: auto; }
+.#{$prefix}w-full  { width: 100%; }
+.#{$prefix}w-screen { width: 100dvw; }
+.#{$prefix}w-fit   { width: fit-content; }
+.#{$prefix}w-min   { width: min-content; }
+.#{$prefix}w-max   { width: max-content; }
+
+.#{$prefix}w-1\/2 { width: 50%; }
+.#{$prefix}w-1\/3 { width: 33.3333%; }
+.#{$prefix}w-2\/3 { width: 66.6667%; }
+.#{$prefix}w-1\/4 { width: 25%; }
+.#{$prefix}w-3\/4 { width: 75%; }
+
+.#{$prefix}min-w-0    { min-width: 0; }
+.#{$prefix}min-w-full { min-width: 100%; }
+.#{$prefix}max-w-none { max-width: none; }
+.#{$prefix}max-w-full { max-width: 100%; }
+
+// ── Height ────────────────────────────────────────────────────
+.#{$prefix}h-auto   { height: auto; }
+.#{$prefix}h-full   { height: 100%; }
+.#{$prefix}h-screen { height: 100dvh; }
+.#{$prefix}h-fit    { height: fit-content; }
+.#{$prefix}h-min    { height: min-content; }
+.#{$prefix}h-max    { height: max-content; }
+
+.#{$prefix}min-h-0      { min-height: 0; }
+.#{$prefix}min-h-full   { min-height: 100%; }
+.#{$prefix}min-h-screen { min-height: 100dvh; }
+.#{$prefix}max-h-none   { max-height: none; }
+.#{$prefix}max-h-full   { max-height: 100%; }
+
+}

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

@@ -0,0 +1,91 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Spacing                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for spacing based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+@use "../../../core/engine" as *;
+@use "../../../core/design/dimensions/spaces" as spacing-tokens;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📐 Spacing Utility Classes                                  ║
+// ║                                                              ║
+// ║  Auto-generated from $space token map.                       ║
+// ║  padding-{dir}-{size}, margin-{dir}-{size}, gap-{dir}-{size} ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@mixin load-spacing($prefix: "") {
+$spacing-sizes: map.keys(spacing-tokens.$space);
+
+// ── Padding & Margin ─────────────────────────────────────────
+// Directions: null (all sides), top, right, bottom, left, inline, block
+$spacing-properties: ("padding", "margin");
+$spacing-directions: (
+  null,
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "inline",
+  "block"
+);
+
+@each $property in $spacing-properties {
+  @each $size in $spacing-sizes {
+    @each $direction in $spacing-directions {
+      @if $direction {
+        .#{$prefix}#{$property}-#{$direction}-#{$size} {
+          @if $property == "padding" {
+            @include padding($size, $direction);
+          } @else {
+            @include margin($size, $direction);
+          }
+        }
+      } @else {
+        .#{$prefix}#{$property}-#{$size} {
+          @if $property == "padding" {
+            @include padding($size);
+          } @else {
+            @include margin($size);
+          }
+        }
+      }
+    }
+  }
+}
+
+// ── Gap ──────────────────────────────────────────────────────
+// gap() mixin accepts: null (all), "x" / "column" (column-gap),
+//                      "y" / "row" (row-gap)
+// Does NOT support top/right/bottom/left — separate loop required.
+//
+// Generated classes:
+//   .gap-sm          → gap: clamp(...)
+//   .gap-x-lg        → column-gap: clamp(...)
+//   .gap-y-2xl       → row-gap: clamp(...)
+
+$gap-directions: (
+  null,   // .gap-{size}    → gap (all)
+  "x",    // .gap-x-{size}  → column-gap
+  "y",    // .gap-y-{size}  → row-gap
+);
+
+@each $size in $spacing-sizes {
+  @each $dir in $gap-directions {
+    @if $dir {
+      .#{$prefix}gap-#{$dir}-#{$size} {
+        @include gap($size, $dir);
+      }
+    } @else {
+      .#{$prefix}gap-#{$size} {
+        @include gap($size);
+      }
+    }
+  }
+}
+
+}
+

package/scss/foundation/views/render/classes/_state-variants.scss

@@ -0,0 +1,47 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — State Variants                                  ║
+// ║                                                               ║
+// ║  Generates hover:/focus: variants for color utilities.        ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../../zeus.config" as config;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🎯 hover:/focus: state variants — colors & borders only     ║
+// ║                                                              ║
+// ║  Deliberately NOT generalized to every utility family (sizing,║
+// ║  spacing, shadows already have their own dedicated hover      ║
+// ║  variants). Also deliberately excludes the bg-{name}-{step}   ║
+// ║  opacity variants in _colors.scss — 17 colors × 13 steps × 2   ║
+// ║  states would add ~440 rarely-used selectors for one color    ║
+// ║  family alone. Base bg-*/color-*/border-color-* only:         ║
+// ║  17 colors × 3 properties × 2 states ≈ 100 selectors.         ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@mixin load-state-variants($prefix: "") {
+@if config.$zeus-enable-color-utilities {
+
+@each $name, $value in config.$zeus-colors {
+  .hover\:#{$prefix}bg-#{$name}:hover {
+    background-color: var(--color-#{$name});
+  }
+  .hover\:#{$prefix}color-#{$name}:hover {
+    color: var(--color-#{$name});
+  }
+  .hover\:#{$prefix}border-color-#{$name}:hover {
+    border-color: var(--color-#{$name});
+  }
+
+  .focus\:#{$prefix}bg-#{$name}:focus-visible {
+    background-color: var(--color-#{$name});
+  }
+  .focus\:#{$prefix}color-#{$name}:focus-visible {
+    color: var(--color-#{$name});
+  }
+  .focus\:#{$prefix}border-color-#{$name}:focus-visible {
+    border-color: var(--color-#{$name});
+  }
+}
+
+} // end @if zeus-enable-color-utilities
+}

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

@@ -0,0 +1,32 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Typography                                      ║
+// ║                                                               ║
+// ║  Generates utility classes for typography based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+
+@use "../../../core/engine" as *;
+@use "../../../core/design/typography/typography" as typo-tokens;
+
+@mixin load-typography($prefix: "") {
+$typo-classes: map.keys(typo-tokens.$typography);
+
+// font sizes
+@each $type in $typo-classes {
+  .#{$prefix}text-#{$type} {
+    @include text($type);
+  }
+}
+
+// font weights
+@for $i from 1 through 9 {
+  $w: $i * 100;
+  .#{$prefix}text-#{$w} {
+    font-weight: #{$w} !important;
+  }
+}
+
+}

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

@@ -0,0 +1,103 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Utilities                                       ║
+// ║                                                               ║
+// ║  Generates utility classes for utilities based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../../zeus.config" as config;
+@use "../../../core/engine/responsive" as *;
+
+@mixin load-utilities($prefix: "") {
+.#{$prefix}w-unset {
+  width: unset !important;
+}
+.#{$prefix}h-unset {
+  height: unset !important;
+}
+
+// Opt-in horizontal overflow clipping — apply to <html>/<body> or any
+// container that genuinely needs it. Not global by default: it masks real
+// layout overflow bugs and can interfere with position: sticky.
+.#{$prefix}no-overflow-x {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+:where(.#{$prefix}highlight) {
+  :is(strong, b, em, i) {
+    font-weight: inherit;
+    font-style: normal;
+    color: var(--color-primary);
+  }
+}
+
+// Was ":where(.zeus-article), :where(.article)" — a redundant synonym pair
+// for the same selector. Renamed 25.07: .article is now the single name.
+:where(.#{$prefix}article) {
+  > p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+
+    &:hover {
+      color: var(--color-primary-light);
+    }
+  }
+
+  > * + * {
+    margin-top: var(--space-md);
+  }
+}
+
+// Visibility classes
+@if config.$zeus-enable-responsive-classes {
+
+.#{$prefix}hidden-desktops {
+  @include screen-above(lg) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-tablets {
+  @include screen-between(md, lg) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-tablets-desktops {
+  @include screen-above(md) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-mobiles {
+  @include screen-below(md) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-devices {
+  @include screen-below(lg) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-upto-ml {
+  @include screen-below(ml) {
+    display: none !important;
+  }
+}
+
+.#{$prefix}hidden-from-ml {
+  @include screen-above(ml) {
+    display: none !important;
+  }
+}
+
+}
+
+}

package/scss/foundation/views/render/classes/_z-index.scss

@@ -0,0 +1,22 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Z-Index                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for the stacking-order scale.      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../core/design/effects/z-index" as z-tokens;
+
+// Named ".layer-*" (not ".z-*") deliberately — the "z-" prefix is already
+// the framework's BEM component namespace (.z-card, .z-modal, .z-field, …);
+// reusing it here would collide with component class names.
+@mixin load-z-index($prefix: "") {
+$z-names: map.keys(z-tokens.$z-index);
+
+@each $name in $z-names {
+  .#{$prefix}layer-#{$name} {
+    z-index: var(--z-#{$name});
+  }
+}
+
+}

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

@@ -0,0 +1,56 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Flexbox                                         ║
+// ║                                                               ║
+// ║  Generates utility classes for flexbox based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+
+@mixin load-flexbox($prefix: "") {
+  .#{$prefix}flex {
+    display: flex;
+  }
+  .#{$prefix}flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+  .#{$prefix}flex-wrap {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .#{$prefix}flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+  .#{$prefix}flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .#{$prefix}flex-space-between {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  // Display helpers
+  .#{$prefix}d-none {
+    display: none !important;
+  }
+  .#{$prefix}d-block {
+    display: block;
+  }
+  .#{$prefix}d-inline-block {
+    display: inline-block;
+  }
+
+  // Alignment helpers
+  .#{$prefix}align-center  { align-items: center; }
+  .#{$prefix}align-start   { align-items: flex-start; }
+  .#{$prefix}align-end     { align-items: flex-end; }
+  .#{$prefix}justify-center { justify-content: center; }
+  .#{$prefix}justify-start  { justify-content: flex-start; }
+  .#{$prefix}justify-end    { justify-content: flex-end; }
+  .#{$prefix}justify-between { justify-content: space-between; }
+  .#{$prefix}justify-around  { justify-content: space-around; }
+}