zeus-css 1.0.0

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

@@ -0,0 +1,195 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Grid                                            ║
+// ║                                                               ║
+// ║  Generates utility classes for grid based on the framework's design tokens. ║
+// ╚══════════════════════════════════════════════════════════════╝
+// ========================================================================================
+// ZEUS GRID SYSTEM - Modern CSS Grid Based Layout
+// ========================================================================================
+// Zeus Grid System is based on classes that apply to parent divs, so they affect all children.
+// This is different from other classes that apply to individual elements (e.g. typography, borders, spacing, etc).
+// This approach is different from bootstrap and similar frameworks, but it allows for more flexibility and easier maintenance.
+// Bootstrap's approach is to apply classes to individual elements, which can lead to a lot of repetitive code and harder maintenance.
+// In Zeus, we apply classes to parent divs, which allows us to change the layout of multiple elements by changing a single class on the parent div.
+// This also allows for easier responsive design, as we can change the layout of multiple elements by
+// changing a single class on the parent div for different screen sizes.
+//
+// Examples:
+// <div class="grid grid-cols-3 gap-4">...</div>
+// <div class="grid grid-auto-fit gap-3">...</div>
+// <div class="grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3">...</div>
+// ========================================================================================
+
+@use "sass:map";
+@use "../../../../zeus.config" as config;
+@use "../../../core/design/layout/grid" as *;
+@use "../../../core/engine/responsive" as *;
+@use "../../../core/design/dimensions/spaces" as spacing-tokens;
+@use "../../../core/engine/layout" as layout-engine;
+
+@mixin load-grid($prefix: "") {
+@if config.$zeus-enable-grid-system {
+
+// ========================================================================================
+// BASE GRID DISPLAY UTILITIES
+// ========================================================================================
+.#{$prefix}d-grid {
+  display: grid;
+}
+
+.#{$prefix}d-inline-grid {
+  display: inline-grid;
+}
+
+// ========================================================================================
+// GRID COLUMNS - Fixed column layouts (1-12 columns)
+// ========================================================================================
+.#{$prefix}grid {
+  display: grid;
+  
+  // Fixed columns 1-12
+  // minmax(0, 1fr) — not bare 1fr. Bare 1fr means minmax(auto, 1fr): a child
+  // with wide min-content (pre/code blocks, long monospace strings, unbroken
+  // URLs) becomes a hard floor and the whole grid blows out past its container,
+  // forcing a page-level horizontal scrollbar. minmax(0, 1fr) keeps columns
+  // truly equal and lets the child's own overflow handling take over.
+  &-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  &-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  &-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  &-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  &-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  &-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  &-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  &-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  &-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  &-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  // ========================================================================================
+  // AUTO-FIT & AUTO-FILL - Smart responsive grids
+  // ========================================================================================
+  &-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-min, 250px), 1fr));
+  }
+  
+  &-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-min, 250px), 1fr));
+  }
+
+  // ========================================================================================
+  // ADVANCED GRID FEATURES
+  // ========================================================================================
+  &-dense {
+    grid-auto-flow: dense;
+  }
+}
+
+// ========================================================================================
+// GRID COLUMN SPANS
+// ========================================================================================
+@for $i from 1 through 12 {
+  .#{$prefix}col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+}
+.#{$prefix}col-span-full {
+  grid-column: 1 / -1;
+}
+
+@for $i from 2 through 12 {
+  .#{$prefix}col-start-#{$i} {
+    grid-column-start: #{$i};
+  }
+}
+
+@for $i from 1 through 13 {
+  .#{$prefix}col-end-#{$i} {
+    grid-column-end: #{$i};
+  }
+}
+
+} // end @if zeus-enable-grid-system
+
+}
+
+// ========================================================================================
+// COMMON GRID PATTERNS - Pre-built layouts
+// ========================================================================================
+// These are complete, self-contained components with their own internal breakpoint
+// behavior — NOT meant to have breakpoint-prefixed variants (e.g. "md:grid-sidebar"
+// is meaningless, since the responsive behavior is already baked in below).
+// Emitted ONCE at the base level only — never inside the responsive breakpoint loop
+// in classes.scss, otherwise the internal screen-below() gets nested inside an outer
+// screen-above() and can produce impossible/dead media queries at higher breakpoints.
+@mixin load-grid-patterns($prefix: "") {
+@if config.$zeus-enable-grid-system {
+
+// Cards layout with auto-fit
+.#{$prefix}grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--col-gap-md);
+}
+
+// Sidebar layout (250px sidebar + fluid main)
+// minmax(0, 1fr) everywhere below (not bare 1fr) — see .grid-cols-* comment.
+.#{$prefix}grid-sidebar {
+  display: grid;
+  grid-template-columns: 250px minmax(0, 1fr);
+  gap: var(--col-gap-md);
+
+  @include screen-below(lg) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+// Two column layout (equal width)
+.#{$prefix}grid-split {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--col-gap-md);
+
+  @include screen-below(lg) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+// Three column layout
+.#{$prefix}grid-thirds {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--col-gap-md);
+
+  @include screen-below(lg) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+} // end @if zeus-enable-grid-system
+
+}

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

@@ -0,0 +1,116 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Classes                                         ║
+// ║                                                               ║
+// ║  Core styles and definitions for classes.                     ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine/responsive" as *;
+
+@use "./classes/typography";
+@use "./classes/colors";
+@use "./classes/state-variants";
+@use "./classes/borders";
+@use "./classes/shadows";
+@use "./classes/z-index";
+@use "./classes/sizes";
+@use "./classes/sizing-utils";
+@use "./classes/position";
+@use "./classes/misc-utils";
+@use "./classes/spacing";
+@use "./classes/sections";
+@use "./classes/buttons";
+@use "./classes/utilities";
+@use "./classes/containers";
+@use "./classes/flexbox";
+@use "./classes/grid";
+@use "./classes/animations";
+@use "./classes/aspect-ratio";
+@use "./classes/compounds";
+
+// ============================================================================
+// MIXINS FOR DIFFERENT UTILITY GROUPS
+// ============================================================================
+
+// 1. Heavy components that do NOT need responsive breakpoints
+@mixin load-components($prefix: "") {
+@include buttons.load-buttons($prefix);
+  @include animations.load-animations($prefix);
+  @include compounds.load-compounds($prefix);
+  @include aspect-ratio.load-aspect-ratio($prefix);
+  @include sections.load-sections($prefix);
+  @include grid.load-grid-patterns($prefix);
+}
+
+// 2. Fluid & Static utilities (clamp() based or binary) that do NOT need breakpoints
+// .container and the .hidden-*/.article/.highlight utilities live here too:
+// they have no breakpoint-dependent variants of their own (hidden-* already encodes
+// its breakpoint in the class name via its own screen-*() call), so generating
+// "md:hidden-desktops" etc. inside the responsive loop below would nest an outer
+// breakpoint check around an already-fixed inner one — producing impossible/dead
+// media queries at higher breakpoints (e.g. min-width:2560px AND max-width:1279px).
+@mixin load-base-only-utilities($prefix: "") {
+@include typography.load-typography($prefix);
+  @include colors.load-colors($prefix);
+  @include state-variants.load-state-variants($prefix);
+  @include borders.load-borders($prefix);
+  @include shadows.load-shadows($prefix);
+  @include z-index.load-z-index($prefix);
+  @include spacing.load-spacing($prefix);
+  @include utilities.load-utilities($prefix);
+  @include containers.load-containers($prefix);
+}
+
+// 3. Structural & Layout utilities that MUST be responsive (breakpoints)
+@mixin load-responsive-utilities($prefix: "") {
+@include sizes.load-sizes($prefix);
+  @include sizing-utils.load-sizing-utils($prefix);
+  @include position.load-position($prefix);
+  @include misc-utils.load-misc-utils($prefix);
+  @include flexbox.load-flexbox($prefix);
+  @include grid.load-grid($prefix);
+}
+
+// Global mixin to load EVERYTHING for the base level
+@mixin load-all-classes($prefix: "") {
+@include load-components($prefix);
+  @include load-base-only-utilities($prefix);
+  @include load-responsive-utilities($prefix);
+}
+
+// ============================================================================
+// GENERATE CSS CLASSES
+// ============================================================================
+
+$_zp: "";
+@if config.$zeus-use-prefix {
+  $_zp: config.$zeus-class-prefix;
+}
+
+// STEP 1: Generate Components
+@layer components {
+  @include load-components($_zp);
+}
+
+// STEP 2: Generate Utilities (Base & Responsive)
+@layer utilities {
+  @include load-base-only-utilities($_zp);
+  @include load-responsive-utilities($_zp);
+
+  // STEP 3: Generate Breakpoint Responsive Classes
+  // By looping breakpoints at the top level, we guarantee that all `lg:` classes
+  // come after all `md:` classes, completely eliminating CSS specificity bugs.
+  //
+  // OPTIMIZATION: We ONLY load structural utilities (Grid, Flex, etc) inside 
+  // breakpoints to drastically reduce CSS bloat. Colors, Spacing, and Typography 
+  // are intentionally excluded because they are handled by the Fluid Engine.
+  @if config.$zeus-enable-responsive-classes {
+    @each $bp-name, $bp-value in config.$zeus-breakpoints {
+      @if $bp-value != 0 {
+        @include screen-above($bp-name) {
+          @include load-responsive-utilities("#{$bp-name}\\:#{$_zp}");
+        }
+      }
+    }
+  }
+}

package/scss/foundation/views/render/html-body.scss

@@ -0,0 +1,54 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Html Body                                       ║
+// ║                                                               ║
+// ║  Core styles and definitions for html body.                   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "../../core/design" as *;
+@use "../../core/engine" as *;
+@use "../../../zeus.config" as config;
+
+$_zp: "";
+@if config.$zeus-use-prefix {
+  $_zp: config.$zeus-class-prefix;
+}
+
+@layer base {
+  html {
+    box-sizing: border-box;
+    // 100% respects the user's browser font-size preference.
+    // $root-font-size (basic.scss) is only the px→rem conversion base, not an override.
+    font-size: 100%;
+    -ms-overflow-style: scrollbar;
+    // scroll-behavior is handled by reset.scss under a prefers-reduced-motion guard
+    //
+    // No global overflow-x/max-width clipping here — that hides real horizontal
+    // overflow bugs instead of surfacing them, and can break position: sticky in
+    // some browsers. Use the opt-in .no-overflow-x utility (classes/_utilities.scss)
+    // if a specific project genuinely needs it.
+  }
+
+  // Container Context for CQI typography & sizing.
+  // .grid is deliberately NOT included: it's a structural/layout tool, not a
+  // "give me a reference frame" tool. Including it caused compounding shrink —
+  // every nested .grid reset the fluid reference frame, so a grid inside a
+  // grid inside a narrow column made every token (spacing/borders/icons/
+  // typography) smaller with each level. Use the opt-in .cq class below on
+  // any specific .grid that should size its own contents.
+  body, main, .#{$_zp}container {
+    container-type: inline-size;
+  }
+
+  // Opt-in Container Queries for Developers
+  .#{$_zp}cq { container-type: inline-size; }
+  .#{$_zp}cq-size { container-type: size; }
+
+  body {
+    color: var(--color-text);
+    background-color: var(--color-background);
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    @include text(body);
+  }
+}

package/scss/foundation/views/render/property-registration.scss

@@ -0,0 +1,77 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Property Registration                           ║
+// ║                                                               ║
+// ║  Core styles and definitions for property registration.       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "sass:map";
+@use "sass:meta";
+@use "../../../zeus.config" as config;
+@use "../../core/design/dimensions/spaces" as *;
+@use "../../core/design/dimensions/sizes" as *;
+@use "../../core/design/borders/border-radius" as *;
+@use "../../core/design/borders/border-line" as *;
+@use "../../core/design/typography/typography" as *;
+@use "../../core/design/colors/semantic-colors" as *;
+
+// ── Private generators ──────────────────────────────────────────
+//
+// These mixins are called at TOP LEVEL below (outside any selector),
+// which is the only valid location for @property rules per CSS spec.
+// SCSS mixins called at top level DO output top-level @property rules.
+
+// Registers all tokens from a (floor, ceil) map as <length> @property.
+// initial-value = min value (mobile baseline).
+// Adding a token to the source map auto-registers it here.
+@mixin _register-length-tokens($prefix, $token-map) {
+  @each $name, $config in $token-map {
+    $min: map.get($config, "floor");
+    @property --#{$prefix}-#{$name} {
+      syntax: "<length>";
+      inherits: true;
+      initial-value: #{$min}px;
+    }
+  }
+}
+
+// Registers all color tokens from the universal palette map as <color> @property.
+// Structure: flat $zeus-colors map
+// initial-value = the color value.
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  WHAT IS @property                                           ║
+// ║                                                              ║
+// ║  Standard CSS custom property:                               ║
+// ║    :root { --space-sm: 8px; }                                ║
+// ║    → The browser DOES NOT know the type and accepts anything.║
+// ║                                                              ║
+// ║  With @property:                                             ║
+// ║    @property --space-sm { syntax: "<length>"; }              ║
+// ║    → The browser KNOWS the type. Invalid values are rejected ║
+// ║      and replaced by the initial-value fallback.             ║
+// ║                                                              ║
+// ║  WHAT IT PROVIDES:                                           ║
+// ║  1. TYPE SAFETY - Rejects invalid values                     ║
+// ║  2. FALLBACK - Initial value acts as a safe baseline         ║
+// ║  3. TRANSITIONS - Enables CSS transitions on custom properties║
+// ╚══════════════════════════════════════════════════════════════╝
+@mixin _register-color-tokens($colors-map) {
+  @each $name, $value in $colors-map {
+    @if meta.type-of($value) == "color" or meta.type-of($value) == "string" {
+      @property --color-#{$name} {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: #{$value};
+      }
+    }
+  }
+}
+
+// ── Registration — runs only if flag is enabled ─────────────────
+
+@if config.$zeus-enable-property-registration {
+  @layer tokens {
+    // 🎨 Colors — all $zeus-colors universal tokens → --color-{name}
+    // Provides CSS type safety and enables smooth transitions for color variables.
+    @include _register-color-tokens(config.$zeus-colors);
+  }
+} // end @if zeus-enable-property-registration

package/scss/foundation/views/render/reset.scss

@@ -0,0 +1,147 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Reset                                           ║
+// ║                                                               ║
+// ║  Core styles and definitions for reset.                       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/design" as *;
+
+/**
+ * Zeus CSS Reset
+ */
+
+@layer reset {
+  // Document normalization
+  :where(html) {
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    text-rendering: optimizeLegibility;
+  }
+
+  // Smooth scrolling with motion preference
+  @media (prefers-reduced-motion: no-preference) {
+    :where(html) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  // Body foundation
+  :where(html, body) {
+    margin: 0;
+    padding: 0;
+  }
+
+  // Universal box-sizing
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // Remove default margins
+  :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre) {
+    margin: 0;
+  }
+
+  :where(iframe) {
+    border: 0;
+  }
+
+  // Form elements inherit font
+  :where(input, button, textarea, select) {
+    font: inherit;
+    color: inherit;
+  }
+
+  // Button reset
+  :where(button) {
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // Input reset
+  :where(input, textarea, select) {
+    background: transparent;
+    border: 0;
+  }
+
+  // Remove fieldset borders
+  :where(fieldset) {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+  }
+
+  // List reset for semantic lists
+  :where(ul, ol)[role="list"] {
+    list-style: none;
+    padding: 0;
+  }
+
+  // Table normalization
+  :where(table) {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  // Anchor Elements and Hyperlinks
+  :where(a) {
+    color: inherit;
+    text-decoration-skip-ink: auto;
+  }
+
+  // Hidden elements
+  :where([hidden]) {
+    display: none !important;
+  }
+
+  // Focus visible
+  :where(:focus-visible) {
+    outline: #{config.$zeus-focus-ring};
+    outline-offset: 2px;
+  }
+
+  :where(:focus:not(:focus-visible)) {
+    outline: none;
+  }
+
+  // Remove number input spinners
+  :where(input[type="number"]::-webkit-inner-spin-button),
+  :where(input[type="number"]::-webkit-outer-spin-button) {
+    appearance: none;
+  }
+
+  :where(input[type="number"]) {
+    appearance: textfield;
+  }
+
+  // Search input
+  :where(input[type="search"]::-webkit-search-decoration) {
+    appearance: none;
+  }
+
+  // Code elements
+  :where(pre, code, kbd, samp) {
+    font-family: ui-monospace, monospace;
+  }
+
+  // Small text
+  :where(small) {
+    font-size: 0.875em;
+  }
+
+  // HR element
+  :where(hr) {
+    border: 0;
+    border-top: 1px solid;
+    color: inherit;
+  }
+}