@prasworld/flux-ui 0.0.1

package/styles/_root.scss

@@ -0,0 +1,112 @@
+/**
+ * CSS Custom Properties Initialization
+ * ====================================
+ * Generated programmatically from _variables.scss maps.
+ * 
+ * This file generates the :root block with all CSS custom properties
+ * derived from the SCSS token definitions, enabling CSS-only consumers
+ * and runtime theming.
+ */
+
+@use 'variables' as *;
+
+:root {
+  // ========================================================================
+  // Color Palettes
+  // ========================================================================
+  @each $palette-name, $palette-map in $palette-maps {
+    @each $shade, $value in $palette-map {
+      --vi-color-#{$palette-name}-#{$shade}: #{strip-units($value)};
+    }
+  }
+
+  // ========================================================================
+  // Semantic Colors
+  // ========================================================================
+  @each $color-name, $color-value in $color-map {
+    --vi-color-#{$color-name}: #{strip-units($color-value)};
+  }
+
+  // ========================================================================
+  // Functional Colors
+  // ========================================================================
+  --vi-color-background: #{strip-units($color-background)};
+  --vi-color-foreground: #{strip-units($color-foreground)};
+  --vi-color-border: #{strip-units($color-border)};
+
+  // ========================================================================
+  // Spacing
+  // ========================================================================
+  @each $spacing-name, $spacing-value in $spacing-map {
+    --vi-spacing-#{$spacing-name}: #{strip-units($spacing-value)};
+  }
+
+  // ========================================================================
+  // Typography — Families
+  // ========================================================================
+  --vi-font-family-base: #{strip-units($font-family-base)};
+  --vi-font-family-mono: #{strip-units($font-family-mono)};
+
+  // ========================================================================
+  // Typography — Sizes
+  // ========================================================================
+  --vi-font-size-xs: #{strip-units($font-size-xs)};
+  --vi-font-size-sm: #{strip-units($font-size-sm)};
+  --vi-font-size-base: #{strip-units($font-size-base)};
+  --vi-font-size-lg: #{strip-units($font-size-lg)};
+  --vi-font-size-xl: #{strip-units($font-size-xl)};
+  --vi-font-size-2xl: #{strip-units($font-size-2xl)};
+  --vi-font-size-3xl: #{strip-units($font-size-3xl)};
+
+  // ========================================================================
+  // Typography — Weights
+  // ========================================================================
+  --vi-font-weight-light: #{strip-units($font-weight-light)};
+  --vi-font-weight-normal: #{strip-units($font-weight-normal)};
+  --vi-font-weight-medium: #{strip-units($font-weight-medium)};
+  --vi-font-weight-semibold: #{strip-units($font-weight-semibold)};
+  --vi-font-weight-bold: #{strip-units($font-weight-bold)};
+
+  // ========================================================================
+  // Typography — Line Heights
+  // ========================================================================
+  --vi-line-height-tight: #{strip-units($line-height-tight)};
+  --vi-line-height-normal: #{strip-units($line-height-normal)};
+  --vi-line-height-relaxed: #{strip-units($line-height-relaxed)};
+
+  // ========================================================================
+  // Shadows
+  // ========================================================================
+  @each $shadow-name, $shadow-value in $shadow-map {
+    --vi-shadow-#{$shadow-name}: #{strip-units($shadow-value)};
+  }
+
+  // ========================================================================
+  // Border Radius
+  // ========================================================================
+  --vi-border-radius-sm: #{strip-units($border-radius-sm)};
+  --vi-border-radius-md: #{strip-units($border-radius-md)};
+  --vi-border-radius-lg: #{strip-units($border-radius-lg)};
+  --vi-border-radius-xl: #{strip-units($border-radius-xl)};
+
+  // ========================================================================
+  // Border Widths
+  // ========================================================================
+  --vi-border-width-thin: #{strip-units($border-width-thin)};
+  --vi-border-width-base: #{strip-units($border-width-base)};
+  --vi-border-width-thick: #{strip-units($border-width-thick)};
+}
+
+/**
+ * Strip var() wrapper from CSS custom properties
+ * Used to extract the fallback value for :root initialization
+ */
+@function strip-units($value) {
+  @if type-of($value) == 'string' and str-index($value, 'var(') {
+    // Extracts fallback from var(--vi-token, fallback)
+    $start: str-index($value, ',') + 2;
+    $end: str-length($value) - 1;
+    @return str-slice($value, $start, $end);
+  }
+  @return $value;
+}

package/styles/_theme.scss

@@ -0,0 +1,175 @@
+/**
+ * Theme System
+ * ============
+ * Themeable tokens as composable SCSS maps + vi-theme() mixin.
+ * 
+ * Pattern:
+ *   1. Define theme maps (e.g. $vi-theme--light, $vi-theme--dark)
+ *   2. Call @include vi-theme($theme-map) inside a selector
+ *   3. Mixin emits CSS custom properties for each token in the map
+ * 
+ * Usage:
+ *   :root {
+ *     @include vi-theme($vi-theme--light, $emit-custom-properties: true);
+ *   }
+ * 
+ *   [data-theme="dark"] {
+ *     @include vi-theme($vi-theme--dark, $emit-custom-properties: true, $emit-difference: true);
+ *   }
+ */
+
+@use 'sass:map';
+@use './variables' as *;
+
+// ============================================================================
+// LIGHT THEME
+// ============================================================================
+// Comprehensive token map for light theme.
+// Keys are token names; values are references to palette variables from _variables.scss
+
+$vi-theme--light: (
+  // Text colors
+  'text-primary':           $color-grey-900,
+  'text-secondary':         $color-grey-700,
+  'text-tertiary':          $color-grey-600,
+  'text-inverse':           $color-grey-100,
+  'text-success':           $color-green-700,
+  'text-warning':           $color-yellow-800,
+  'text-error':             $color-red-700,
+  'text-info':              $color-blue-700,
+
+  // Background colors
+  'bg-primary':             $color-grey-100,
+  'bg-secondary':           $color-grey-200,
+  'bg-tertiary':            $color-grey-300,
+  'bg-inverse':             $color-grey-900,
+  'bg-success':             #e6f9f0,
+  'bg-warning':             #fff8e1,
+  'bg-error':               #ffebee,
+  'bg-info':                #e3f2fd,
+
+  // Layer/depth
+  'layer-01':               $color-grey-100,      // Surface
+  'layer-02':               $color-grey-200,      // Raised
+  'layer-03':               $color-grey-300,      // Elevated
+  'layer-hover':            $color-grey-200,
+  'layer-active':           $color-grey-300,
+
+  // Border colors
+  'border-default':         $color-grey-200,
+  'border-strong':          $color-grey-300,
+  'border-subtle':          $color-grey-100,
+
+  // Focus/interaction
+  'focus-ring':             $color-blue-500,
+  'hover-overlay':          rgba(0, 0, 0, 0.04),
+  'active-overlay':         rgba(0, 0, 0, 0.08),
+
+  // Component-specific
+  'button-primary-bg':      $color-blue-600,
+  'button-primary-text':    #ffffff,
+  'button-secondary-bg':    $color-grey-200,
+  'button-secondary-text':  $color-grey-900,
+  'button-danger-bg':       $color-red-600,
+  'button-danger-text':     #ffffff,
+
+  'input-bg':               #ffffff,
+  'input-text':             $color-grey-900,
+  'input-border':           $color-grey-200,
+  'input-placeholder':      $color-grey-500,
+  'input-focus-ring':       $color-blue-500,
+
+  'card-bg':                #ffffff,
+  'card-border':            $color-grey-200,
+);
+
+// ============================================================================
+// DARK THEME
+// ============================================================================
+// Inherits from light theme; overrides tokens for dark adaptation.
+
+$vi-theme--dark: map.merge($vi-theme--light, (
+  // Text colors — inverted
+  'text-primary':           $color-grey-100,
+  'text-secondary':         $color-grey-300,
+  'text-tertiary':          $color-grey-400,
+  'text-inverse':           $color-grey-900,
+
+  // Background colors — dark
+  'bg-primary':             $color-grey-900,
+  'bg-secondary':           $color-grey-800,
+  'bg-tertiary':            $color-grey-700,
+  'bg-inverse':             $color-grey-100,
+
+  // Layer/depth
+  'layer-01':               $color-grey-900,
+  'layer-02':               $color-grey-800,
+  'layer-03':               $color-grey-700,
+  'layer-hover':            $color-grey-800,
+  'layer-active':           $color-grey-700,
+
+  // Border colors — lighter for contrast
+  'border-default':         $color-grey-700,
+  'border-strong':          $color-grey-600,
+  'border-subtle':          $color-grey-800,
+
+  // Focus/interaction — adapted
+  'focus-ring':             $color-blue-400,
+  'hover-overlay':          rgba(255, 255, 255, 0.04),
+  'active-overlay':         rgba(255, 255, 255, 0.08),
+
+  // Component-specific
+  'button-primary-text':    #ffffff,
+  'button-secondary-bg':    $color-grey-700,
+  'button-secondary-text':  $color-grey-100,
+  'button-danger-text':     #ffffff,
+
+  'input-bg':               $color-grey-800,
+  'input-text':             $color-grey-100,
+  'input-border':           $color-grey-700,
+  'input-placeholder':      $color-grey-500,
+
+  'card-bg':                $color-grey-900,
+  'card-border':            $color-grey-800,
+));
+
+// ============================================================================
+// VI-THEME MIXIN
+// ============================================================================
+/**
+ * Apply a theme by setting SCSS variables and optionally emitting CSS custom properties.
+ * 
+ * Parameters:
+ *   $theme                   — Theme token map (e.g., $vi-theme--light)
+ *   $emit-custom-properties  — (default: false) Emit CSS custom properties (--vi-*)
+ *   $emit-difference         — (default: false) Only emit tokens differing from $vi-theme--light
+ *   $parent-theme            — (optional) Explicit parent for diff comparison (default: $vi-theme--light)
+ */
+
+@mixin vi-theme(
+  $theme,
+  $emit-custom-properties: false,
+  $emit-difference: false,
+  $parent-theme: $vi-theme--light
+) {
+  @each $token-key, $token-value in $theme {
+    // Only emit CSS custom properties if requested
+    @if $emit-custom-properties {
+      // Check if we should emit based on emit-difference flag
+      $should-emit: true;
+
+      @if $emit-difference {
+        $parent-value: map.get($parent-theme, $token-key);
+        @if $parent-value == $token-value {
+          $should-emit: false;
+        }
+      }
+
+      @if $should-emit {
+        // Emit: --vi-text-primary: var(--vi-color-grey-900, #111827);
+        // (where $token-value = $color-grey-900 from _variables.scss)
+        --vi-#{$token-key}: #{$token-value};
+      }
+    }
+  }
+}

package/styles/_utilities.scss

@@ -0,0 +1,434 @@
+/**
+ * Utility Classes
+ * ===============
+ * Spacing, typography, and other common utilities.
+ * These are all generated from design tokens.
+ */
+
+@use './variables' as *;
+
+@layer utilities {
+  // ============================================================================
+  // MARGIN
+  // ============================================================================
+
+  @each $name, $value in $spacing-map {
+    .m-#{$name} {
+      margin: $value;
+    }
+
+    .mx-#{$name} {
+      margin-left: $value;
+      margin-right: $value;
+    }
+
+    .my-#{$name} {
+      margin-top: $value;
+      margin-bottom: $value;
+    }
+
+    .mt-#{$name} {
+      margin-top: $value;
+    }
+
+    .mr-#{$name} {
+      margin-right: $value;
+    }
+
+    .mb-#{$name} {
+      margin-bottom: $value;
+    }
+
+    .ml-#{$name} {
+      margin-left: $value;
+    }
+  }
+
+  // ============================================================================
+  // PADDING
+  // ============================================================================
+
+  @each $name, $value in $spacing-map {
+    .p-#{$name} {
+      padding: $value;
+    }
+
+    .px-#{$name} {
+      padding-left: $value;
+      padding-right: $value;
+    }
+
+    .py-#{$name} {
+      padding-top: $value;
+      padding-bottom: $value;
+    }
+
+    .pt-#{$name} {
+      padding-top: $value;
+    }
+
+    .pr-#{$name} {
+      padding-right: $value;
+    }
+
+    .pb-#{$name} {
+      padding-bottom: $value;
+    }
+
+    .pl-#{$name} {
+      padding-left: $value;
+    }
+  }
+
+  // ============================================================================
+  // TYPOGRAPHY
+  // ============================================================================
+
+  .text-xs {
+    font-size: $font-size-xs;
+  }
+
+  .text-sm {
+    font-size: $font-size-sm;
+  }
+
+  .text-base {
+    font-size: $font-size-base;
+  }
+
+  .text-lg {
+    font-size: $font-size-lg;
+  }
+
+  .text-xl {
+    font-size: $font-size-xl;
+  }
+
+  .text-2xl {
+    font-size: $font-size-2xl;
+  }
+
+  .text-3xl {
+    font-size: $font-size-3xl;
+  }
+
+  .font-light {
+    font-weight: $font-weight-light;
+  }
+
+  .font-normal {
+    font-weight: $font-weight-normal;
+  }
+
+  .font-medium {
+    font-weight: $font-weight-medium;
+  }
+
+  .font-semibold {
+    font-weight: $font-weight-semibold;
+  }
+
+  .font-bold {
+    font-weight: $font-weight-bold;
+  }
+
+  .leading-tight {
+    line-height: $line-height-tight;
+  }
+
+  .leading-normal {
+    line-height: $line-height-normal;
+  }
+
+  .leading-relaxed {
+    line-height: $line-height-relaxed;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  // ============================================================================
+  // COLORS
+  // ============================================================================
+
+  @each $name, $value in $color-map {
+    .text-#{$name} {
+      color: $value;
+    }
+
+    .bg-#{$name} {
+      background-color: $value;
+    }
+
+    .border-#{$name} {
+      border-color: $value;
+    }
+  }
+
+  // Palette shades: grey, red, yellow, green, blue, purple — 100–900
+  // Generates .text-{palette}-{shade} and .bg-{palette}-{shade} for all palettes.
+  @each $palette-name, $palette in $palette-maps {
+    @each $shade, $value in $palette {
+      .text-#{$palette-name}-#{$shade} {
+        color: $value;
+      }
+
+      .bg-#{$palette-name}-#{$shade} {
+        background-color: $value;
+      }
+    }
+  }
+
+  // -- Neutral alias for grey (semantic naming) --
+  @each $shade, $value in $color-grey-map {
+    .text-neutral-#{$shade} {
+      color: $value;
+    }
+
+    .bg-neutral-#{$shade} {
+      background-color: $value;
+    }
+
+    .border-neutral-#{$shade} {
+      border-color: $value;
+    }
+  }
+
+  // ============================================================================
+  // SHADOWS
+  // ============================================================================
+
+  @each $name, $value in $shadow-map {
+    .shadow-#{$name} {
+      box-shadow: $value;
+    }
+  }
+
+  // ============================================================================
+  // BORDER RADIUS
+  // ============================================================================
+
+  .rounded-none {
+    border-radius: 0;
+  }
+
+  .rounded-sm {
+    border-radius: $border-radius-sm;
+  }
+
+  .rounded-md {
+    border-radius: $border-radius-md;
+  }
+
+  .rounded-lg {
+    border-radius: $border-radius-lg;
+  }
+
+  .rounded-xl {
+    border-radius: $border-radius-xl;
+  }
+
+  .rounded-full {
+    border-radius: 9999px;
+  }
+
+  // ============================================================================
+  // BORDERS
+  // ============================================================================
+
+  .border-thin {
+    border-width: $border-width-thin;
+    border-style: solid;
+  }
+
+  .border-base {
+    border-width: $border-width-base;
+    border-style: solid;
+  }
+
+  .border-thick {
+    border-width: $border-width-thick;
+    border-style: solid;
+  }
+
+  // ============================================================================
+  // Z-INDEX
+  // ============================================================================
+
+  @each $name, $value in $z-index-map {
+    .z-#{$name} {
+      z-index: $value;
+    }
+  }
+
+  // ============================================================================
+  // OPACITY
+  // ============================================================================
+
+  .opacity-0 { opacity: 0; }
+  .opacity-25 { opacity: 0.25; }
+  .opacity-50 { opacity: 0.5; }
+  .opacity-75 { opacity: 0.75; }
+  .opacity-100 { opacity: 1; }
+
+  // ============================================================================
+  // DISPLAY
+  // ============================================================================
+
+  .block {
+    display: block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  // ============================================================================
+  // FLEXBOX
+  // ============================================================================
+
+  .flex {
+    display: flex;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-around {
+    justify-content: space-around;
+  }
+
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-stretch {
+    align-items: stretch;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .flex-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-none {
+    flex: none;
+  }
+
+  // ============================================================================
+  // GRID
+  // ============================================================================
+
+  .grid {
+    display: grid;
+  }
+
+  @for $i from 1 through 12 {
+    .grid-cols-#{$i} {
+      grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+    }
+  }
+
+  // ============================================================================
+  // GAP
+  // ============================================================================
+
+  @each $name, $value in $spacing-map {
+    .gap-#{$name} {
+      gap: $value;
+    }
+
+    .gap-x-#{$name} {
+      column-gap: $value;
+    }
+
+    .gap-y-#{$name} {
+      row-gap: $value;
+    }
+  }
+
+  // ============================================================================
+  // TRANSITIONS & ANIMATIONS
+  // ============================================================================
+
+  .transition-all {
+    transition: all 0.2s ease-in-out;
+  }
+
+  .transition-colors {
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  }
+
+  .transition-opacity {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .duration-100 { transition-duration: 100ms; }
+  .duration-200 { transition-duration: 200ms; }
+  .duration-300 { transition-duration: 300ms; }
+}