farvist 0.5.0

package/scss/utilities/_backgrounds.scss

@@ -0,0 +1,110 @@
+// =============================================================================
+// Farvist · Utilities · Backgrounds  ★ free-tier headline feature ★
+// Mesh gradients, patterns, spotlights, fade-masks and animated drift — the
+// things Tailwind and Bootstrap make you hand-roll. All token-driven and
+// theme-aware. Compose them: `class="bg-grid bg-fade"`, `class="bg-mesh-aurora bg-drift"`.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+// -- Mesh gradient backdrops (generated from the $bg-meshes map) --------------
+@each $name, $layers in $bg-meshes {
+  .bg-mesh-#{$name} {
+    background-color: var(--fv-body-bg);
+    background-image: $layers;
+    background-repeat: no-repeat;
+  }
+}
+// `.bg-mesh` defaults to aurora.
+.bg-mesh {
+  background-color: var(--fv-body-bg);
+  background-image: map.get($bg-meshes, 'aurora');
+  background-repeat: no-repeat;
+}
+
+// -- Pattern backgrounds (theme-aware via --fv-glass-border) -------------------
+.bg-grid {
+  background-image:
+    linear-gradient(var(--fv-bg-pattern) 1px, transparent 1px),
+    linear-gradient(90deg, var(--fv-bg-pattern) 1px, transparent 1px);
+  background-size: 2rem 2rem;
+}
+
+.bg-graph {
+  background-image:
+    linear-gradient(var(--fv-bg-pattern) 1px, transparent 1px),
+    linear-gradient(90deg, var(--fv-bg-pattern) 1px, transparent 1px);
+  background-size: 0.75rem 0.75rem;
+}
+
+.bg-dots {
+  background-image: radial-gradient(var(--fv-bg-pattern) 1.2px, transparent 1.2px);
+  background-size: 1.25rem 1.25rem;
+}
+
+.bg-lines {
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--fv-bg-pattern) 0, var(--fv-bg-pattern) 1px,
+    transparent 1px, transparent 12px
+  );
+}
+
+// Subtle film grain via an inline SVG fractal-noise (no external file needed).
+.bg-noise {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+}
+
+// Pattern tile-size modifiers.
+.bg-pattern-sm { background-size: 1rem 1rem; }
+.bg-pattern-lg { background-size: 3rem 3rem; }
+
+// -- Spotlight (radial glow, themeable per color) -----------------------------
+.bg-spotlight {
+  background-color: var(--fv-body-bg);
+  background-image: radial-gradient(42rem 26rem at 50% -12%, rgba($primary, 0.30), transparent 70%);
+  background-repeat: no-repeat;
+}
+// Chromatic colors only — the light/dark surface tokens make no glow.
+@each $name, $clr in map.remove($theme-colors, 'light', 'dark') {
+  .bg-spotlight-#{$name} {
+    background-color: var(--fv-body-bg);
+    background-image: radial-gradient(42rem 26rem at 50% -12%, rgba($clr, 0.30), transparent 70%);
+    background-repeat: no-repeat;
+  }
+}
+
+// -- Fade masks ----------------------------------------------------------------
+// NOTE: `mask-image` fades the WHOLE element incl. its children, so put these on
+// a dedicated decorative layer (an empty/absolutely-positioned div), not on a box
+// that holds text. Best with the transparent-base PATTERNS (`.bg-grid.bg-fade`);
+// over an opaque `.bg-mesh-*`/`.bg-spotlight*` the fade reveals the parent, not
+// the surface — fade the section's background layer instead.
+.bg-fade {
+  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 35%, transparent 100%);
+  mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 35%, transparent 100%);
+}
+.bg-fade-b {
+  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
+}
+.bg-fade-x {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
+  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
+}
+
+// -- Animated drift (for .bg-mesh-* / .bg-spotlight* — not the tiled patterns) -
+// It forces background-size:150%, which would blow up a pattern's fixed tile size.
+@keyframes fv-bg-drift {
+  0%, 100% { background-position: 0% 0%; }
+  50%      { background-position: 100% 100%; }
+}
+.bg-drift {
+  background-size: 150% 150%;
+  animation: fv-bg-drift 22s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bg-drift { animation: none; }
+}

package/scss/utilities/_effects.scss

@@ -0,0 +1,118 @@
+// =============================================================================
+// Farvist · Utilities · Futuristic effects
+// Glass, neon glow, gradients and motion — generated from the token maps.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+// -- Glass surfaces -----------------------------------------------------------
+.glass        { @include glass; }
+.glass-strong { @include glass($strong: true); }
+
+// Strip blur when you want a plain translucent panel.
+.glass-flat {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+// -- Gradient backgrounds (from the $gradients map) ---------------------------
+@each $name, $grad in $gradients {
+  .bg-gradient-#{$name} {
+    background-image: $grad !important;
+  }
+}
+
+// -- Gradient text ------------------------------------------------------------
+// `-webkit-text-fill-color` keeps the glyphs transparent even if a `.text-*`
+// color utility (which sets `color !important`) lands on the same element.
+.text-gradient {
+  background-image: var(--fv-gradient-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+@each $name, $grad in $gradients {
+  .text-gradient-#{$name} {
+    background-image: $grad;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+// Light theme: the vivid gradients are tuned for a dark page; darken the
+// clipped text so it stays legible on the near-white background.
+[data-theme='light'] [class*='text-gradient'] {
+  filter: brightness(0.5) saturate(1.4);
+}
+
+// -- Neon glows (from the $glows map) -----------------------------------------
+@each $name, $glow in $glows {
+  .glow-#{$name} { box-shadow: $glow !important; }
+}
+.glow      { box-shadow: var(--fv-glow-primary) !important; }
+.glow-none { box-shadow: none !important; }
+
+// Text glow (neon halo on the type itself).
+.text-glow {
+  text-shadow: 0 0 18px rgba($primary, 0.65);
+}
+
+// (Background patterns/meshes/spotlights live in utilities/_backgrounds.scss.)
+
+// -- Motion -------------------------------------------------------------------
+.hover-lift {
+  transition: transform $transition-base, box-shadow $transition-base;
+
+  &:hover {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes fv-gradient-pan {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+// Pair with a .bg-gradient-* class for a slowly drifting gradient.
+.bg-animated {
+  background-size: 200% 200%;
+  animation: fv-gradient-pan 9s ease infinite;
+}
+
+@keyframes fv-float {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-10px); }
+}
+.animate-float {
+  animation: fv-float 6s ease-in-out infinite;
+}
+
+// -- Graceful degradation -----------------------------------------------------
+// When the browser can't blur, fall back to an opaque surface so glass panels
+// stay legible instead of washing out.
+// NB: alerts are intentionally excluded — their translucent colored tint is
+// legible without a blur, and overriding it here would flatten every variant
+// to one opaque surface and erase the semantic color.
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass,
+  .glass-strong,
+  .navbar,
+  .card,
+  .form-control,
+  .form-select {
+    background-color: var(--fv-surface-solid);
+  }
+}
+
+// Respect reduced-motion for the decorative animations.
+@media (prefers-reduced-motion: reduce) {
+  .bg-animated,
+  .animate-float {
+    animation: none;
+  }
+}

package/scss/utilities/_spacing.scss

@@ -0,0 +1,76 @@
+// =============================================================================
+// Farvist · Utilities · Spacing
+// The flagship generator: nested `@each` loops stamp out margin & padding
+// utilities for every side, every step of the spacing scale, at every
+// breakpoint — e.g. .mt-3, .px-4, .m-md-5, .py-lg-0, plus negatives & autos.
+//
+//   property abbrev   m = margin      p = padding
+//   side abbrev       t = top   e = end/right   b = bottom   s = start/left
+//                     x = inline (left+right)   y = block (top+bottom)
+//                     ''= all sides
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+// Side abbreviation -> the physical property/properties it sets.
+$spacing-sides: (
+  't': top,
+  'e': right,
+  'b': bottom,
+  's': left,
+  'x': (left, right),
+  'y': (top, bottom),
+  '':  all,
+);
+
+@each $bp in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($bp);
+
+  @include media-up($bp) {
+    // property loop: margin (m) and padding (p)
+    @each $prop, $abbrev in (margin: 'm', padding: 'p') {
+      // scale loop: every step of $spacers
+      @each $size, $length in $spacers {
+        // side loop: t / e / b / s / x / y / all
+        @each $side, $targets in $spacing-sides {
+          .#{$abbrev}#{$side}#{$infix}-#{$size} {
+            @if $targets == all {
+              #{$prop}: $length !important;
+            } @else {
+              @each $target in $targets {
+                #{$prop}-#{$target}: $length !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Negative margins (handy for pulling elements over gutters).
+    @each $size, $length in $spacers {
+      @if $length != 0 {
+        .m#{$infix}-n#{$size}  { margin: -$length !important; }
+        .mt#{$infix}-n#{$size} { margin-top: -$length !important; }
+        .mb#{$infix}-n#{$size} { margin-bottom: -$length !important; }
+        .ms#{$infix}-n#{$size} { margin-left: -$length !important; }
+        .me#{$infix}-n#{$size} { margin-right: -$length !important; }
+        .mx#{$infix}-n#{$size} {
+          margin-left: -$length !important;
+          margin-right: -$length !important;
+        }
+      }
+    }
+
+    // Auto margins for centering / pushing.
+    .m#{$infix}-auto  { margin: auto !important; }
+    .mt#{$infix}-auto { margin-top: auto !important; }
+    .mb#{$infix}-auto { margin-bottom: auto !important; }
+    .ms#{$infix}-auto { margin-left: auto !important; }
+    .me#{$infix}-auto { margin-right: auto !important; }
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+}

package/scss/utilities/_utilities.scss

@@ -0,0 +1,213 @@
+// =============================================================================
+// Farvist · Utilities · Everything else
+// Generated, single-purpose helper classes. `@each` walks the token maps and
+// `@for` produces numeric scales (opacity steps, sizing fractions).
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:math';
+@use '../abstracts' as *;
+
+// -- Display (responsive) -----------------------------------------------------
+$display-values: none, block, inline, inline-block, flex, inline-flex, grid, table;
+
+@each $bp in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($bp);
+  @include media-up($bp) {
+    @each $value in $display-values {
+      .d#{$infix}-#{$value} { display: $value; }
+    }
+  }
+}
+
+// -- Flexbox (responsive) -----------------------------------------------------
+$justify: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'between': space-between,
+  'around': space-around,
+  'evenly': space-evenly,
+);
+$align: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch,
+);
+
+@each $bp in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($bp);
+  @include media-up($bp) {
+    .flex#{$infix}-row        { flex-direction: row; }
+    .flex#{$infix}-row-reverse { flex-direction: row-reverse; }
+    .flex#{$infix}-column     { flex-direction: column; }
+    .flex#{$infix}-column-reverse { flex-direction: column-reverse; }
+    .flex#{$infix}-wrap       { flex-wrap: wrap; }
+    .flex#{$infix}-nowrap     { flex-wrap: nowrap; }
+    .flex#{$infix}-fill       { flex: 1 1 auto; }
+    .flex#{$infix}-grow-0     { flex-grow: 0; }
+    .flex#{$infix}-grow-1     { flex-grow: 1; }
+    .flex#{$infix}-shrink-0   { flex-shrink: 0; }
+    .flex#{$infix}-shrink-1   { flex-shrink: 1; }
+
+    @each $key, $value in $justify {
+      .justify-content#{$infix}-#{$key} { justify-content: $value; }
+    }
+    @each $key, $value in $align {
+      .align-items#{$infix}-#{$key} { align-items: $value; }
+      .align-self#{$infix}-#{$key}  { align-self: $value; }
+    }
+  }
+}
+
+// Gap utilities from the spacing scale.
+@each $key, $value in $spacers {
+  .gap-#{$key} { gap: $value; }
+}
+
+// -- Text alignment (responsive) ---------------------------------------------
+@each $bp in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($bp);
+  @include media-up($bp) {
+    .text#{$infix}-start  { text-align: left; }
+    .text#{$infix}-center { text-align: center; }
+    .text#{$infix}-end    { text-align: right; }
+  }
+}
+
+// -- Type utilities -----------------------------------------------------------
+@each $key, $size in $font-sizes {
+  .fs-#{$key} { font-size: $size; }
+}
+@each $key, $weight in $font-weights {
+  .fw-#{$key} { font-weight: $weight; }
+}
+
+.fst-italic               { font-style: italic; }
+.fst-normal               { font-style: normal; }
+.text-decoration-underline { text-decoration: underline; }
+.text-decoration-none     { text-decoration: none; }
+.text-uppercase           { text-transform: uppercase; }
+.text-lowercase           { text-transform: lowercase; }
+.text-capitalize          { text-transform: capitalize; }
+.text-nowrap              { white-space: nowrap; }
+.text-break               { overflow-wrap: break-word; }
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lh-1    { line-height: 1; }
+.lh-base { line-height: $line-height-base; }
+.lh-lg   { line-height: 1.8; }
+.font-monospace { font-family: $font-family-mono; }
+
+// -- Color utilities ----------------------------------------------------------
+@each $name, $clr in $theme-colors {
+  .text-#{$name}   { color: $clr !important; }
+  .bg-#{$name}     { background-color: $clr !important; }
+  .border-#{$name} { border-color: $clr !important; }
+}
+
+.text-white       { color: $white !important; }
+.text-body        { color: var(--fv-body-color) !important; }
+.text-muted       { color: var(--fv-muted) !important; }
+.bg-white         { background-color: $white !important; }
+.bg-body          { background-color: var(--fv-body-bg) !important; }
+.bg-surface       { background-color: var(--fv-surface-solid) !important; }
+.bg-transparent   { background-color: transparent !important; }
+
+@each $key, $value in $grays {
+  .text-gray-#{$key} { color: $value !important; }
+  .bg-gray-#{$key}   { background-color: $value !important; }
+}
+
+// -- Borders ------------------------------------------------------------------
+.border        { border: $border-width solid var(--fv-border-color) !important; }
+.border-0      { border: 0 !important; }
+.border-top    { border-top: $border-width solid var(--fv-border-color) !important; }
+.border-end    { border-right: $border-width solid var(--fv-border-color) !important; }
+.border-bottom { border-bottom: $border-width solid var(--fv-border-color) !important; }
+.border-start  { border-left: $border-width solid var(--fv-border-color) !important; }
+
+@each $key, $value in $radii {
+  .rounded-#{$key} { border-radius: $value !important; }
+}
+.rounded        { border-radius: $border-radius !important; }
+.rounded-0      { border-radius: 0 !important; }
+.rounded-circle { border-radius: 50% !important; }
+
+// -- Shadows ------------------------------------------------------------------
+@each $key, $value in $shadows {
+  .shadow-#{$key} { box-shadow: $value !important; }
+}
+.shadow-none { box-shadow: none !important; }
+
+// -- Sizing -------------------------------------------------------------------
+// Fractional width/height built with an @for loop over quartiles.
+@for $i from 1 through 4 {
+  $pct: math.percentage(math.div($i, 4));
+  .w-#{$i * 25} { width: $pct; }
+  .h-#{$i * 25} { height: $pct; }
+}
+.w-auto    { width: auto; }
+.h-auto    { height: auto; }
+.mw-100    { max-width: 100%; }
+.mh-100    { max-height: 100%; }
+.vw-100    { width: 100vw; }
+.vh-100    { height: 100vh; }
+.min-vh-100 { min-height: 100vh; }
+
+// -- Position -----------------------------------------------------------------
+@each $pos in static, relative, absolute, fixed, sticky {
+  .position-#{$pos} { position: $pos; }
+}
+.top-0    { top: 0; }
+.bottom-0 { bottom: 0; }
+.start-0  { left: 0; }
+.end-0    { right: 0; }
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: map.get($z-layers, 'fixed');
+}
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: map.get($z-layers, 'sticky');
+}
+
+// -- Z-index (from the layer map) --------------------------------------------
+@each $key, $value in $z-layers {
+  .z-#{$key} { z-index: $value; }
+}
+
+// -- Opacity (generated with an @for loop, 0–100 in steps of 10) --------------
+@for $i from 0 through 10 {
+  .opacity-#{$i * 10} { opacity: math.div($i, 10); }
+}
+
+// -- Overflow -----------------------------------------------------------------
+@each $value in auto, hidden, visible, scroll {
+  .overflow-#{$value} { overflow: $value; }
+}
+
+// -- Interaction & a11y -------------------------------------------------------
+.visually-hidden     { @include visually-hidden; }
+.user-select-none    { user-select: none; }
+.user-select-all     { user-select: all; }
+.pe-none             { pointer-events: none; }
+.pe-auto             { pointer-events: auto; }
+.cursor-pointer      { cursor: pointer; }
+
+// -- Lists --------------------------------------------------------------------
+.list-unstyled { padding-left: 0; list-style: none; }
+.list-inline   { padding-left: 0; list-style: none; }
+.list-inline-item {
+  display: inline-block;
+  &:not(:last-child) { margin-right: spacer(2); }
+}