farvist 0.5.0

package/scss/abstracts/_variables.scss

@@ -0,0 +1,252 @@
+// =============================================================================
+// Farvist · Abstracts · Variables
+// -----------------------------------------------------------------------------
+// Every design decision in Farvist is a token defined here. Components and the
+// utility generators read from these maps, so changing one value cascades
+// everywhere. Override any token at import time:
+//
+//   @use 'farvist' with ($primary: #00e0ff, $glass-blur: 22px);
+//
+// Each token carries `!default` so a `with (...)` configuration wins.
+//
+// The default look is a dark, futuristic "glass" theme. A light theme ships as
+// a [data-theme="light"] override in base/_root.scss.
+// =============================================================================
+
+@use 'sass:map';
+
+// -- Brand / theme colors (neon-leaning) --------------------------------------
+$primary:   #6d4af5 !default; // electric violet (AA: white text 5.3:1)
+$secondary: #7c8aa5 !default; // cool slate
+$success:   #34d399 !default; // emerald
+$danger:    #fb5b78 !default; // rose
+$warning:   #fbbf24 !default; // amber
+$info:      #22d3ee !default; // cyan
+$accent:    #e879f9 !default; // fuchsia
+$light:     #e7ecf5 !default;
+$dark:      #0b0f1d !default;
+
+// A map of the theme colors lets `@each` loops stamp out every color variant
+// of a utility or component in a single pass. Add a key here and `.btn-*`,
+// `.badge-*`, `.alert-*`, `.text-*`, `.bg-*`, `.glow-*` all gain it for free.
+$theme-colors: (
+  'primary':   $primary,
+  'secondary': $secondary,
+  'success':   $success,
+  'danger':    $danger,
+  'warning':   $warning,
+  'info':      $info,
+  'accent':    $accent,
+  'light':     $light,
+  'dark':      $dark,
+) !default;
+
+// -- Greyscale ----------------------------------------------------------------
+$white: #ffffff !default;
+$black: #000000 !default;
+
+$grays: (
+  '100': #f1f5f9,
+  '200': #e2e8f0,
+  '300': #cbd5e1,
+  '400': #94a3b8,
+  '500': #64748b,
+  '600': #475569,
+  '700': #334155,
+  '800': #1e293b,
+  '900': #0f172a,
+) !default;
+
+// -- Surfaces (dark theme defaults) -------------------------------------------
+$body-bg-dark:   #060912 !default; // deep space base
+$body-text-dark: #e6ebf5 !default;
+$muted-dark:     #95a3c4 !default;
+
+// Light theme surfaces (used by the [data-theme="light"] override).
+$body-bg-light:   #eef1f8 !default;
+$body-text-light: #0f172a !default;
+$muted-light:     #586b8f !default;
+
+$border-color: rgba($white, 0.10) !default;
+
+// -- Glassmorphism ------------------------------------------------------------
+// The frosted-glass surface is built from translucent fills + a backdrop blur.
+$glass-blur:        16px !default;
+$glass-saturate:    140% !default;
+
+$glass-bg-dark:        rgba(255, 255, 255, 0.06) !default;
+$glass-bg-strong-dark: rgba(255, 255, 255, 0.10) !default;
+$glass-border-dark:    rgba(255, 255, 255, 0.14) !default;
+$surface-solid-dark:   #121a2e !default; // opaque fallback when blur unsupported
+
+$glass-bg-light:        rgba(255, 255, 255, 0.55) !default;
+$glass-bg-strong-light: rgba(255, 255, 255, 0.70) !default;
+$glass-border-light:    rgba(255, 255, 255, 0.80) !default;
+$surface-solid-light:   #ffffff !default;
+
+// -- Gradients ----------------------------------------------------------------
+// Built from the color tokens so a palette change cascades automatically.
+$gradients: (
+  'primary': linear-gradient(135deg, $primary 0%, $info 100%),
+  'accent':  linear-gradient(135deg, $accent 0%, $primary 100%),
+  'sunset':  linear-gradient(135deg, $danger 0%, $warning 100%),
+  'aurora':  linear-gradient(135deg, $success 0%, $info 100%),
+) !default;
+
+// Radial "orbs" painted behind the page so glass surfaces have color to blur.
+$bg-gradient-dark:
+  radial-gradient(48rem 48rem at 82% -12%, rgba($primary, 0.28), transparent 60%),
+  radial-gradient(36rem 36rem at -8% 18%, rgba($info, 0.20), transparent 58%),
+  radial-gradient(40rem 40rem at 50% 118%, rgba($accent, 0.18), transparent 58%) !default;
+$bg-gradient-light:
+  radial-gradient(48rem 48rem at 82% -12%, rgba($primary, 0.18), transparent 60%),
+  radial-gradient(36rem 36rem at -8% 18%, rgba($info, 0.16), transparent 58%),
+  radial-gradient(40rem 40rem at 50% 118%, rgba($accent, 0.14), transparent 58%) !default;
+
+// -- Neon glows ---------------------------------------------------------------
+$glows: (
+  'primary': 0 0 26px rgba($primary, 0.55),
+  'accent':  0 0 26px rgba($accent, 0.55),
+  'info':    0 0 26px rgba($info, 0.55),
+  'success': 0 0 26px rgba($success, 0.50),
+  'danger':  0 0 26px rgba($danger, 0.50),
+  'warning': 0 0 26px rgba($warning, 0.50),
+) !default;
+
+// -- Mesh gradient backdrops --------------------------------------------------
+// Each value is a stack of radial "orbs" used as a background-image. Drives the
+// `.bg-mesh-*` utilities — the headline free feature Tailwind/Bootstrap lack.
+$bg-meshes: (
+  'aurora': (
+    radial-gradient(55rem 55rem at 80% -10%, rgba($primary, 0.35), transparent 60%),
+    radial-gradient(45rem 45rem at -10% 25%, rgba($info, 0.28), transparent 58%),
+    radial-gradient(50rem 50rem at 55% 120%, rgba($accent, 0.24), transparent 58%)
+  ),
+  'sunset': (
+    radial-gradient(55rem 55rem at 85% 0%, rgba($warning, 0.30), transparent 60%),
+    radial-gradient(50rem 50rem at 8% 18%, rgba($danger, 0.28), transparent 58%),
+    radial-gradient(45rem 45rem at 60% 120%, rgba($accent, 0.22), transparent 58%)
+  ),
+  'ocean': (
+    radial-gradient(55rem 55rem at 80% -10%, rgba($info, 0.32), transparent 60%),
+    radial-gradient(50rem 50rem at 0% 30%, rgba($success, 0.24), transparent 58%),
+    radial-gradient(45rem 45rem at 50% 120%, rgba($primary, 0.22), transparent 58%)
+  ),
+  'nebula': (
+    radial-gradient(50rem 50rem at 75% 8%, rgba($primary, 0.40), transparent 55%),
+    radial-gradient(40rem 40rem at 18% 28%, rgba($accent, 0.30), transparent 55%),
+    radial-gradient(45rem 45rem at 55% 115%, rgba($info, 0.25), transparent 58%)
+  ),
+) !default;
+
+// -- Spacing scale ------------------------------------------------------------
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,  //  4px
+  2: $spacer * 0.5,   //  8px
+  3: $spacer * 0.75,  // 12px
+  4: $spacer,         // 16px
+  5: $spacer * 1.5,   // 24px
+  6: $spacer * 2,     // 32px
+  7: $spacer * 3,     // 48px
+  8: $spacer * 4,     // 64px
+) !default;
+
+// -- Typography ---------------------------------------------------------------
+$font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
+  Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
+$font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo,
+  Consolas, 'Liberation Mono', monospace !default;
+
+$font-size-root: 16px !default;
+$font-size-base: 1rem !default;
+
+$font-sizes: (
+  'xs':   0.75rem,
+  'sm':   0.875rem,
+  'base': 1rem,
+  'lg':   1.125rem,
+  'xl':   1.25rem,
+  '2xl':  1.5rem,
+  '3xl':  1.875rem,
+  '4xl':  2.25rem,
+  '5xl':  3.25rem,
+) !default;
+
+$font-weights: (
+  'light':    300,
+  'normal':   400,
+  'medium':   500,
+  'semibold': 600,
+  'bold':     700,
+  'black':    800,
+) !default;
+
+$line-height-base:     1.6 !default;
+$headings-line-height: 1.15 !default;
+$headings-font-weight: 700 !default;
+
+$headings: (
+  1: map.get($font-sizes, '4xl'),
+  2: map.get($font-sizes, '3xl'),
+  3: map.get($font-sizes, '2xl'),
+  4: map.get($font-sizes, 'xl'),
+  5: map.get($font-sizes, 'lg'),
+  6: map.get($font-sizes, 'base'),
+) !default;
+
+// -- Borders & radius ---------------------------------------------------------
+$border-width:  1px !default;
+$border-radius: 0.75rem !default; // softer, more modern default
+
+$radii: (
+  'none': 0,
+  'sm':   0.375rem,
+  'md':   0.625rem,
+  'lg':   0.875rem,
+  'xl':   1.125rem,
+  '2xl':  1.5rem,
+  'pill': 50rem,
+  'full': 50%,
+) !default;
+
+// -- Elevation (deep, for dark surfaces) --------------------------------------
+$shadows: (
+  'sm': (0 1px 2px rgba($black, 0.30)),
+  'md': (0 8px 20px rgba($black, 0.35)),
+  'lg': (0 18px 44px rgba($black, 0.45)),
+  'xl': (0 30px 70px rgba($black, 0.55)),
+) !default;
+
+// -- Grid & breakpoints -------------------------------------------------------
+$grid-columns: 12 !default;
+$grid-gutter:  1.5rem !default;
+
+$grid-breakpoints: (
+  'xs':  0,
+  'sm':  576px,
+  'md':  768px,
+  'lg':  992px,
+  'xl':  1200px,
+  'xxl': 1400px,
+) !default;
+
+$container-max-widths: (
+  'sm':  540px,
+  'md':  720px,
+  'lg':  960px,
+  'xl':  1140px,
+  'xxl': 1320px,
+) !default;
+
+// -- Motion & layering --------------------------------------------------------
+$transition-base: 0.2s ease !default;
+
+$z-layers: (
+  'dropdown': 1000,
+  'sticky':   1020,
+  'fixed':    1030,
+  'modal':    1050,
+  'tooltip':  1070,
+) !default;

package/scss/base/_reset.scss

@@ -0,0 +1,120 @@
+// =============================================================================
+// Farvist · Base · Modern reset
+// A compact, opinionated reset (in the spirit of Andy Bell / normalize) that
+// removes default margins, fixes box-sizing, and respects user preferences.
+// =============================================================================
+
+@use '../abstracts' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  font-size: $font-size-root;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: var(--fv-body-color);
+  // Base color plus fixed radial "orbs" so glass surfaces have color to blur.
+  background-color: var(--fv-body-bg);
+  background-image: var(--fv-bg-gradient);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  transition: background-color $transition-base, color $transition-base;
+}
+
+// Media defaults: block-level and never overflow their container.
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+// Inputs should inherit typography rather than impose browser defaults.
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+// Avoid long words breaking layout.
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+// Opt-in: strip list styling only when an author marks a list as a "list" role.
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+// A clear, consistent focus ring for keyboard users only.
+:focus-visible {
+  outline: 2px solid $primary;
+  outline-offset: 2px;
+}
+
+// Honour users who ask for less motion.
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/scss/base/_root.scss

@@ -0,0 +1,87 @@
+// =============================================================================
+// Farvist · Base · :root custom properties + themes
+// The Sass tokens are mirrored into CSS custom properties so the whole system
+// can be re-themed at runtime. The default is the dark "glass" theme; adding
+// `data-theme="light"` to <html> swaps the surface variables.
+// =============================================================================
+
+@use '../abstracts' as *;
+
+:root {
+  color-scheme: dark;
+
+  // Theme colors -> --fv-primary, --fv-accent, --fv-danger, ...
+  @each $name, $value in $theme-colors {
+    --fv-#{$name}: #{$value};
+  }
+
+  // Greyscale -> --fv-gray-100 ... --fv-gray-900
+  @each $key, $value in $grays {
+    --fv-gray-#{$key}: #{$value};
+  }
+
+  --fv-white: #{$white};
+  --fv-black: #{$black};
+
+  // Surfaces & text (dark theme)
+  --fv-body-bg: #{$body-bg-dark};
+  --fv-bg-gradient: #{$bg-gradient-dark};
+  --fv-body-color: #{$body-text-dark};
+  --fv-muted: #{$muted-dark};
+  --fv-border-color: #{$border-color};
+  --fv-code-bg: rgba(255, 255, 255, 0.07);
+  --fv-bg-pattern: rgba(255, 255, 255, 0.10); // ink for .bg-grid/.bg-dots/etc.
+
+  // Glass surface variables (consumed by the glass() mixin & .glass utilities)
+  --fv-glass-bg: #{$glass-bg-dark};
+  --fv-glass-bg-strong: #{$glass-bg-strong-dark};
+  --fv-glass-border: #{$glass-border-dark};
+  --fv-glass-blur: #{$glass-blur};
+  --fv-glass-saturate: #{$glass-saturate};
+  --fv-surface-solid: #{$surface-solid-dark};
+
+  // Typography
+  --fv-font-base: #{$font-family-base};
+  --fv-font-mono: #{$font-family-mono};
+  --fv-line-height: #{$line-height-base};
+
+  // Shape & motion
+  --fv-border-radius: #{$border-radius};
+  --fv-border-width: #{$border-width};
+  --fv-transition: #{$transition-base};
+  --fv-focus-ring: 0 0 0 3px #{rgba($primary, 0.45)};
+
+  // Elevation -> --fv-shadow-sm ... --fv-shadow-xl
+  @each $name, $value in $shadows {
+    --fv-shadow-#{$name}: #{$value};
+  }
+
+  // Neon glows -> --fv-glow-primary ...
+  @each $name, $value in $glows {
+    --fv-glow-#{$name}: #{$value};
+  }
+
+  // Gradients -> --fv-gradient-primary ...
+  @each $name, $value in $gradients {
+    --fv-gradient-#{$name}: #{$value};
+  }
+}
+
+// -- Light theme --------------------------------------------------------------
+:root[data-theme='light'],
+[data-theme='light'] {
+  color-scheme: light;
+
+  --fv-body-bg: #{$body-bg-light};
+  --fv-bg-gradient: #{$bg-gradient-light};
+  --fv-body-color: #{$body-text-light};
+  --fv-muted: #{$muted-light};
+  --fv-border-color: rgba(15, 23, 42, 0.12);
+  --fv-code-bg: rgba(15, 23, 42, 0.06);
+  --fv-bg-pattern: rgba(15, 23, 42, 0.10); // dark ink so patterns read on the light surface
+
+  --fv-glass-bg: #{$glass-bg-light};
+  --fv-glass-bg-strong: #{$glass-bg-strong-light};
+  --fv-glass-border: #{$glass-border-light};
+  --fv-surface-solid: #{$surface-solid-light};
+}

package/scss/base/_typography.scss

@@ -0,0 +1,102 @@
+// =============================================================================
+// Farvist · Base · Typography
+// Default element styles. Headings are generated from the `$headings` map so
+// the type scale stays the single source of truth. Surface colors reference
+// theme custom properties so they adapt to dark/light.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+// Generate h1..h6 (and matching .h1..-.h6 classes) from one map.
+@each $level, $size in $headings {
+  h#{$level},
+  .h#{$level} {
+    margin-bottom: spacer(3);
+    font-size: $size;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    letter-spacing: -0.01em;
+  }
+}
+
+p {
+  margin-bottom: spacer(4);
+}
+
+a {
+  transition: color $transition-base;
+}
+
+small,
+.text-small {
+  font-size: map.get($font-sizes, 'sm');
+}
+
+strong,
+b {
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+// Inline & block code share the mono stack.
+code,
+pre,
+kbd,
+samp {
+  font-family: $font-family-mono;
+}
+
+code {
+  padding: 0.2em 0.45em;
+  font-size: 0.875em;
+  color: var(--fv-info);
+  background-color: var(--fv-code-bg);
+  border: $border-width solid var(--fv-border-color);
+  border-radius: map.get($radii, 'sm');
+}
+
+pre {
+  padding: spacer(4);
+  margin-bottom: spacer(4);
+  overflow: auto;
+  font-size: map.get($font-sizes, 'sm');
+  background-color: var(--fv-code-bg);
+  border: $border-width solid var(--fv-border-color);
+  border-radius: map.get($radii, 'md');
+
+  code {
+    padding: 0;
+    color: inherit;
+    background: none;
+    border: 0;
+  }
+}
+
+kbd {
+  padding: 0.15em 0.45em;
+  font-size: 0.85em;
+  color: var(--fv-body-color);
+  background-color: var(--fv-code-bg);
+  border: $border-width solid var(--fv-border-color);
+  border-radius: map.get($radii, 'sm');
+}
+
+blockquote {
+  padding-left: spacer(4);
+  margin-bottom: spacer(4);
+  color: var(--fv-muted);
+  border-left: 3px solid var(--fv-primary);
+}
+
+hr {
+  height: 0;
+  margin: spacer(5) 0;
+  border: 0;
+  border-top: $border-width solid var(--fv-border-color);
+}
+
+ul,
+ol {
+  margin-bottom: spacer(4);
+  padding-left: spacer(5);
+}

package/scss/components/_accordion.scss

@@ -0,0 +1,64 @@
+// =============================================================================
+// Farvist · Components · Accordion (native <details>, no JS)
+// Markup:
+//   <details class="accordion-item">
+//     <summary>Question</summary>
+//     <div class="accordion-body">Answer…</div>
+//   </details>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.accordion-item {
+  margin-bottom: spacer(2);
+  border-radius: map.get($radii, 'lg');
+  overflow: hidden;
+  @include glass;
+
+  > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: spacer(3);
+    padding: spacer(3) spacer(4);
+    font-weight: map.get($font-weights, 'semibold');
+    list-style: none;
+    cursor: pointer;
+    transition: background-color $transition-base;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    // CSS chevron that flips when open.
+    &::after {
+      content: '';
+      flex-shrink: 0;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-right: 2px solid var(--fv-muted);
+      border-bottom: 2px solid var(--fv-muted);
+      transform: rotate(45deg);
+      transition: transform $transition-base;
+    }
+
+    &:hover {
+      background-color: var(--fv-glass-bg);
+    }
+
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--fv-focus-ring);
+    }
+  }
+
+  &[open] > summary::after {
+    transform: rotate(-135deg);
+  }
+}
+
+.accordion-body {
+  padding: 0 spacer(4) spacer(4);
+  color: var(--fv-muted);
+}

package/scss/components/_alerts.scss

@@ -0,0 +1,63 @@
+// =============================================================================
+// Farvist · Components · Alerts
+// Glass-tinted feedback banners. Each variant derives a translucent fill, a
+// colored border, and a light-tinted text from a single theme color.
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:color';
+@use '../abstracts' as *;
+
+.alert {
+  position: relative;
+  // Neutral, theme-aware text stays readable on both dark and light glass.
+  color: var(--fv-body-color);
+  padding: spacer(4) spacer(5);
+  margin-bottom: spacer(4);
+  border: $border-width solid transparent;
+  border-radius: map.get($radii, 'lg');
+  backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
+}
+
+.alert-heading {
+  margin-bottom: spacer(2);
+  font-weight: map.get($font-weights, 'bold');
+}
+
+.alert > :last-child {
+  margin-bottom: 0;
+}
+
+// Each variant contributes the hue via a translucent fill, a colored border
+// and a colored left accent — readable in either theme.
+@each $name, $clr in $theme-colors {
+  .alert-#{$name} {
+    background-color: rgba($clr, 0.13);
+    border-color: rgba($clr, 0.42);
+    border-left: 3px solid $clr;
+
+    .alert-heading {
+      color: $clr;
+    }
+
+    .alert-link {
+      color: $clr;
+      font-weight: map.get($font-weights, 'semibold');
+      text-decoration: underline;
+    }
+  }
+}
+
+// In the light theme the near-white alert fill needs darker accent text. Mix
+// the hue toward the light ink so the heading/link clear WCAG AA (≥ 4.5:1).
+[data-theme='light'] {
+  @each $name, $clr in $theme-colors {
+    .alert-#{$name} {
+      .alert-heading,
+      .alert-link {
+        color: color.mix($body-text-light, $clr, 65%);
+      }
+    }
+  }
+}