@fragments-sdk/ui 0.4.0 → 0.5.0

package/src/tokens/_palettes.scss

@@ -0,0 +1,185 @@
+// ============================================
+// @fragments/ui Elemental Palettes
+// ============================================
+//
+// Defines 5 elemental palettes with 11 shades (50-950).
+// Each palette has a distinct tonal character.
+//
+// ============================================
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// --------------------------------------------
+// Wind - Muted cool neutrals (Default)
+// Subtle, balanced feel - matches current zinc-like palette
+// --------------------------------------------
+$palette-wind: (
+  50:  #fafafa,
+  100: #f4f4f5,
+  200: #e4e4e7,
+  300: #d4d4d8,
+  400: #a1a1aa,
+  500: #71717a,
+  600: #52525b,
+  700: #3f3f46,
+  800: #27272a,
+  900: #18181b,
+  950: #09090b
+);
+
+// --------------------------------------------
+// Ice - Cool blue tones
+// Professional, tech feel
+// --------------------------------------------
+$palette-ice: (
+  50:  #f0f9ff,
+  100: #e0f2fe,
+  200: #bae6fd,
+  300: #7dd3fc,
+  400: #38bdf8,
+  500: #0ea5e9,
+  600: #0284c7,
+  700: #0369a1,
+  800: #075985,
+  900: #0c4a6e,
+  950: #082f49
+);
+
+// --------------------------------------------
+// Sand - Warm brown/terracotta tones
+// Organic, earthy feel
+// --------------------------------------------
+$palette-sand: (
+  50:  #fdf8f3,
+  100: #f5ebe0,
+  200: #e8d5c4,
+  300: #d4b89c,
+  400: #c19a6b,
+  500: #a67c52,
+  600: #8b5e34,
+  700: #6f4518,
+  800: #553311,
+  900: #3d240c,
+  950: #261607
+);
+
+// --------------------------------------------
+// Earth - Green/olive tones
+// Natural, growth feel
+// --------------------------------------------
+$palette-earth: (
+  50:  #f5f7f2,
+  100: #e8ede3,
+  200: #d1dbc6,
+  300: #b3c4a0,
+  400: #8fa872,
+  500: #6b8c4e,
+  600: #517035,
+  700: #3d5527,
+  800: #2b3d1c,
+  900: #1c2912,
+  950: #0f170a
+);
+
+// --------------------------------------------
+// Fire - Warm red/orange tones
+// Energy, passion feel
+// --------------------------------------------
+$palette-fire: (
+  50:  #fff7ed,
+  100: #ffedd5,
+  200: #fed7aa,
+  300: #fdba74,
+  400: #fb923c,
+  500: #f97316,
+  600: #ea580c,
+  700: #c2410c,
+  800: #9a3412,
+  900: #7c2d12,
+  950: #431407
+);
+
+// --------------------------------------------
+// Palette Map for Dynamic Access
+// --------------------------------------------
+$palettes: (
+  "wind": $palette-wind,
+  "ice": $palette-ice,
+  "sand": $palette-sand,
+  "earth": $palette-earth,
+  "fire": $palette-fire
+);
+
+// --------------------------------------------
+// Helper Functions
+// --------------------------------------------
+
+/// Get a palette map by name
+/// @param {String} $name - Palette name (wind, ice, sand, earth, fire)
+/// @return {Map} The palette map with shades 50-950
+@function get-palette($name) {
+  @if not map.has-key($palettes, $name) {
+    @warn "Unknown palette '#{$name}'. Using 'wind' as fallback.";
+    @return $palette-wind;
+  }
+  @return map.get($palettes, $name);
+}
+
+/// Get a specific shade from a palette
+/// @param {Map} $palette - A palette map
+/// @param {Number} $level - Shade level (50, 100, 200, ..., 950)
+/// @return {Color} The color at that shade level
+@function get-shade($palette, $level) {
+  @if not map.has-key($palette, $level) {
+    @warn "Unknown shade level '#{$level}'. Using 500 as fallback.";
+    @return map.get($palette, 500);
+  }
+  @return map.get($palette, $level);
+}
+
+/// Interpolate between two shade levels for half-steps (e.g., 925)
+/// @param {Map} $palette - A palette map
+/// @param {Number} $level - Target shade level (can be non-standard like 925)
+/// @return {Color} The interpolated color
+@function interpolate-shade($palette, $level) {
+  // Handle standard levels
+  @if map.has-key($palette, $level) {
+    @return map.get($palette, $level);
+  }
+
+  // Find surrounding levels for interpolation
+  $levels: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+  $lower: null;
+  $upper: null;
+
+  @each $l in $levels {
+    @if $l < $level {
+      $lower: $l;
+    }
+    @if $l > $level and $upper == null {
+      $upper: $l;
+    }
+  }
+
+  @if $lower == null or $upper == null {
+    @warn "Cannot interpolate shade '#{$level}'. Using 500 as fallback.";
+    @return map.get($palette, 500);
+  }
+
+  $lower-color: map.get($palette, $lower);
+  $upper-color: map.get($palette, $upper);
+  $ratio: math.div($level - $lower, $upper - $lower);
+
+  @return color.mix($upper-color, $lower-color, $ratio * 100%);
+}
+
+/// Get a palette by name and return a specific shade
+/// @param {String} $name - Palette name
+/// @param {Number} $level - Shade level
+/// @return {Color} The color
+@function palette-shade($name, $level) {
+  $palette: get-palette($name);
+  @return get-shade($palette, $level);
+}

package/src/tokens/_radius.scss

@@ -0,0 +1,107 @@
+// ============================================
+// @fragments/ui Radius Styles
+// ============================================
+//
+// Defines 5 radius style presets that control corner rounding.
+// Each style maps to sm, md, lg, xl values.
+//
+// ============================================
+
+@use 'sass:map';
+
+// --------------------------------------------
+// Radius Style Definitions
+// --------------------------------------------
+
+// Sharp - No visible rounding (technical, precise)
+$radius-sharp: (
+  sm: 0,
+  md: 0,
+  lg: 0,
+  xl: 0
+);
+
+// Subtle - Minimal rounding (modern minimal)
+$radius-subtle: (
+  sm: 0.125rem,   // 2px
+  md: 0.25rem,    // 4px
+  lg: 0.375rem,   // 6px
+  xl: 0.5rem      // 8px
+);
+
+// Default - Balanced rounding (current values)
+$radius-default: (
+  sm: 0.25rem,    // 3.5px -> 4px
+  md: 0.429rem,   // 6px
+  lg: 0.571rem,   // 8px
+  xl: 0.857rem    // 12px
+);
+
+// Rounded - More prominent rounding (friendly)
+$radius-rounded: (
+  sm: 0.375rem,   // 6px
+  md: 0.5rem,     // 8px
+  lg: 0.75rem,    // 12px
+  xl: 1rem        // 16px
+);
+
+// Pill - Maximum rounding (playful, soft)
+$radius-pill: (
+  sm: 0.5rem,     // 8px
+  md: 0.75rem,    // 12px
+  lg: 1rem,       // 16px
+  xl: 1.5rem      // 24px
+);
+
+// --------------------------------------------
+// Radius Map for Dynamic Access
+// --------------------------------------------
+$radius-styles: (
+  "sharp": $radius-sharp,
+  "subtle": $radius-subtle,
+  "default": $radius-default,
+  "rounded": $radius-rounded,
+  "pill": $radius-pill
+);
+
+// --------------------------------------------
+// Helper Functions
+// --------------------------------------------
+
+/// Get a radius style configuration by name
+/// @param {String} $name - Radius style name (sharp, subtle, default, rounded, pill)
+/// @return {Map} The radius configuration map
+@function get-radius-style($name) {
+  @if not map.has-key($radius-styles, $name) {
+    @warn "Unknown radius style '#{$name}'. Using 'default' as fallback.";
+    @return $radius-default;
+  }
+  @return map.get($radius-styles, $name);
+}
+
+/// Get a specific radius value from a style
+/// @param {Map} $style - A radius style map
+/// @param {String} $size - Size key (sm, md, lg, xl)
+/// @return {Number} The radius value
+@function radius-value($style, $size) {
+  @if not map.has-key($style, $size) {
+    @warn "Unknown radius size '#{$size}'.";
+    @return map.get($style, md);
+  }
+  @return map.get($style, $size);
+}
+
+/// Get radius by style name and size
+/// @param {String} $style-name - Radius style name
+/// @param {String} $size - Size key (sm, md, lg, xl)
+/// @return {Number} The radius value
+@function radius($style-name, $size) {
+  $style: get-radius-style($style-name);
+  @return radius-value($style, $size);
+}
+
+/// Full/circular radius (always the same)
+/// @return {Number} The full radius value
+@function radius-full() {
+  @return 9999px;
+}

package/src/tokens/_seeds.scss

@@ -0,0 +1,59 @@
+// ============================================
+// @fragments/ui Design Token Seeds
+// ============================================
+//
+// User-configurable seed tokens for the design system.
+// Override these before importing to customize your theme.
+//
+// Example:
+//   $fui-brand: #0066ff;
+//   $fui-neutral: "steel";
+//   $fui-density: "compact";
+//   @use '@fragments-sdk/ui/globals';
+//
+// ============================================
+
+// --------------------------------------------
+// Core Seeds
+// --------------------------------------------
+
+/// Primary brand color - derives accent colors, focus rings, etc.
+/// @type Color
+$fui-brand: #18181b !default;
+
+/// Neutral palette name for surfaces, text, and borders
+/// Options: "wind" | "ice" | "earth" | "sand" | "fire"
+/// @type String
+$fui-neutral: "wind" !default;
+
+/// Density preset controlling spacing scale
+/// Options: "compact" | "default" | "relaxed"
+/// @type String
+$fui-density: "default" !default;
+
+/// Radius style for borders and corners
+/// Options: "sharp" | "subtle" | "default" | "rounded" | "pill"
+/// @type String
+$fui-radius-style: "default" !default;
+
+// --------------------------------------------
+// Semantic Color Overrides (Optional)
+// --------------------------------------------
+// Override these to customize semantic colors.
+// If not overridden, they use sensible defaults.
+
+/// Danger/error color (defaults to red-500)
+/// @type Color
+$fui-danger: #ef4444 !default;
+
+/// Success color (defaults to green-500)
+/// @type Color
+$fui-success: #22c55e !default;
+
+/// Warning color (defaults to amber-500)
+/// @type Color
+$fui-warning: #f59e0b !default;
+
+/// Info color (defaults to blue-500)
+/// @type Color
+$fui-info: #3b82f6 !default;