@fragments-sdk/ui 0.17.1 → 0.19.0

package/src/tokens/_variables.scss

@@ -57,13 +57,15 @@ $fui-font-mono:
   "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace !default;
 
 // Font sizes (rem based on 14px root)
+// Compressed scale: base/md = 14px (1rem). No 16px step.
+// Hierarchy driven by weight, not size jumps.
 $fui-font-size-2xs: 0.714rem !default; // 10px
 $fui-font-size-xs: 0.857rem !default; // 12px
 $fui-font-size-sm: 1rem !default; // 14px (base)
-$fui-font-size-base: 1.143rem !default; // 16px
+$fui-font-size-base: 1rem !default; // 14px (= sm, body base)
 $fui-font-size-lg: 1.286rem !default; // 18px
-$fui-font-size-xl: 1.714rem !default; // 24px
-$fui-font-size-2xl: 2.143rem !default; // 30px
+$fui-font-size-xl: 1.429rem !default; // 20px
+$fui-font-size-2xl: 1.714rem !default; // 24px
 
 $fui-font-weight-normal: 400 !default;
 $fui-font-weight-medium: 500 !default;
@@ -74,6 +76,10 @@ $fui-line-height-tight: 1.25 !default;
 $fui-line-height-normal: 1.5 !default;
 $fui-line-height-relaxed: 1.625 !default;
 
+// Letter spacing (Linear-inspired tight tracking for headings)
+$fui-letter-spacing-tight: -0.02em !default; // for xl+ headings
+$fui-letter-spacing-normal: normal !default;
+
 // --------------------------------------------
 // Spacing (derived from density seed)
 // --------------------------------------------
@@ -105,14 +111,15 @@ $fui-radius-full: computed.$computed-radius-full !default;
 // --------------------------------------------
 // Transitions
 // --------------------------------------------
-$fui-transition-fast: 150ms ease !default;
-$fui-transition-normal: 200ms ease !default;
+$fui-transition-fast: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !default; // Linear's easing
+$fui-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1) !default; // ChatGPT's easing
 
 // --------------------------------------------
 // Colors - Light Mode (derived from brand/neutral seeds)
 // --------------------------------------------
 // Accent colors (derived from $fui-brand seed)
 $fui-color-accent: computed.$computed-color-accent !default;
+$fui-color-on-accent: computed.$computed-color-on-accent !default;
 $fui-color-accent-hover: computed.$computed-color-accent-hover !default;
 $fui-color-accent-active: computed.$computed-color-accent-active !default;
 
@@ -174,8 +181,9 @@ $fui-scrollbar-thumb-hover: computed.$computed-scrollbar-thumb-hover !default;
 // --------------------------------------------
 // Colors - Dark Mode (derived from seeds)
 // --------------------------------------------
-// Accent colors (light on dark background)
+// Accent colors (brand used directly in dark mode; on-accent handles text contrast)
 $fui-dark-color-accent: computed.$computed-dark-color-accent !default;
+$fui-dark-color-on-accent: computed.$computed-dark-color-on-accent !default;
 $fui-dark-color-accent-hover: computed.$computed-dark-color-accent-hover !default;
 $fui-dark-color-accent-active: computed.$computed-dark-color-accent-active !default;
 
@@ -265,15 +273,15 @@ $fui-touch-lg: computed.$computed-touch-lg !default;
 $fui-target-size-min: 1.714rem !default; // 24px
 $fui-target-size-comfortable: $fui-touch-md !default;
 
-// Toggle/Switch (iOS-proportioned: ~1.65:1 width:height ratio)
-$fui-toggle-width-sm: 2.857rem !default; // 40px
-$fui-toggle-width-md: 3.643rem !default; // 51px (iOS standard)
-$fui-toggle-width-lg: 4.286rem !default; // 60px
-$fui-toggle-height-sm: $fui-target-size-min !default; // 24px
-$fui-toggle-height-md: 2.214rem !default; // 31px (iOS standard)
-$fui-toggle-height-lg: 2.571rem !default; // 36px
-$fui-toggle-thumb-sm: 1.286rem !default; // 18px
-$fui-toggle-thumb-md: 1.929rem !default; // 27px (iOS standard)
+// Toggle/Switch (web-proportioned: ~1.8:1 width:height ratio)
+$fui-toggle-width-sm: 1.857rem !default; // 26px
+$fui-toggle-width-md: 2.571rem !default; // 36px
+$fui-toggle-width-lg: 3.286rem !default; // 46px
+$fui-toggle-height-sm: 1.143rem !default; // 16px
+$fui-toggle-height-md: 1.429rem !default; // 20px
+$fui-toggle-height-lg: 1.857rem !default; // 26px
+$fui-toggle-thumb-sm: 0.857rem !default; // 12px
+$fui-toggle-thumb-md: 1.143rem !default; // 16px
 $fui-toggle-thumb-offset: 2px !default; // Thumb inset from track edge
 
 // Badge
@@ -430,6 +438,8 @@ $fui-dark-tooltip-shadow:
     --fui-line-height-tight: #{$fui-line-height-tight};
     --fui-line-height-normal: #{$fui-line-height-normal};
     --fui-line-height-relaxed: #{$fui-line-height-relaxed};
+    --fui-letter-spacing-tight: #{$fui-letter-spacing-tight};
+    --fui-letter-spacing-normal: #{$fui-letter-spacing-normal};
 
     // Spacing (micro)
     --fui-space-px: #{$fui-space-px};
@@ -460,6 +470,7 @@ $fui-dark-tooltip-shadow:
 
     // Colors — Accent (light-dark for automatic dark mode)
     --fui-color-accent: light-dark(#{$fui-color-accent}, #{$fui-dark-color-accent});
+    --fui-color-on-accent: light-dark(#{$fui-color-on-accent}, #{$fui-dark-color-on-accent});
     --fui-color-accent-hover: light-dark(#{$fui-color-accent-hover}, #{$fui-dark-color-accent-hover});
     --fui-color-accent-active: light-dark(#{$fui-color-accent-active}, #{$fui-dark-color-accent-active});
 
@@ -506,7 +517,7 @@ $fui-dark-tooltip-shadow:
     --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
 
     // Form chrome (derived from theme surfaces + seed-driven accent)
-    --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-bg-primary));
+    --fui-field-bg: var(--fui-bg-tertiary);
     --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 88%, var(--fui-bg-primary));
     --fui-field-border: color-mix(in srgb, var(--fui-border-strong) 78%, var(--fui-bg-primary));
     --fui-field-border-hover: color-mix(in srgb, var(--fui-text-tertiary) 58%, var(--fui-border-strong));
@@ -590,18 +601,22 @@ $fui-dark-tooltip-shadow:
   @supports (color: oklch(from red l c h)) {
     :root {
       // Accent derived from seed-brand
-      // Light mode: brand as-is; dark mode: inverted lightness, reduced chroma
+      // Light mode: brand as-is. Dark mode: lightened for visibility on dark surfaces.
       --fui-color-accent: light-dark(
         var(--fui-seed-brand),
-        oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.45, l, 0.85) min(c, 0.12) h)
       );
+
+      // Auto-contrast text for elements on accent backgrounds (buttons, chips, etc.)
+      // Lightness > 0.6 → dark text; otherwise → white. Users can override this token.
+      --fui-color-on-accent: oklch(from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0);
       --fui-color-accent-hover: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.06)) c h),
-        oklch(from var(--fui-seed-brand) clamp(0.80, calc(1 - l + 0.02), 0.90) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.52, calc(l + 0.07), 0.90) min(c, 0.12) h)
       );
       --fui-color-accent-active: light-dark(
         oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.12)) c h),
-        oklch(from var(--fui-seed-brand) clamp(0.73, calc(1 - l - 0.05), 0.85) min(c, 0.05) h)
+        oklch(from var(--fui-seed-brand) clamp(0.40, calc(l - 0.05), 0.80) min(c, 0.12) h)
       );
 
       // Semantic hover derived from seed
@@ -626,23 +641,23 @@ $fui-dark-tooltip-shadow:
       );
 
       // Focus ring derived from seed-brand
-      --fui-focus-ring-color: light-dark(
-        var(--fui-seed-brand),
-        oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h)
-      );
+      --fui-focus-ring-color: var(--fui-seed-brand);
     }
 
     // Runtime-derived dark mode overrides (replaces SCSS-computed when supported)
+    // Dark brands are lightened so the button stands out against dark backgrounds.
+    // Hover goes slightly lighter, active slightly darker. on-accent handles text.
     :root[data-theme="dark"],
     :root.dark {
-      --fui-color-accent: oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h);
-      --fui-color-accent-hover: oklch(from var(--fui-seed-brand) clamp(0.80, calc(1 - l + 0.02), 0.90) min(c, 0.05) h);
-      --fui-color-accent-active: oklch(from var(--fui-seed-brand) clamp(0.73, calc(1 - l - 0.05), 0.85) min(c, 0.05) h);
+      --fui-color-accent: oklch(from var(--fui-seed-brand) clamp(0.45, l, 0.85) min(c, 0.12) h);
+      --fui-color-on-accent: oklch(from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0);
+      --fui-color-accent-hover: oklch(from var(--fui-seed-brand) clamp(0.52, calc(l + 0.07), 0.90) min(c, 0.12) h);
+      --fui-color-accent-active: oklch(from var(--fui-seed-brand) clamp(0.40, calc(l - 0.05), 0.80) min(c, 0.12) h);
       --fui-color-danger-bg: color-mix(in oklch, var(--fui-seed-danger) 15%, transparent);
       --fui-color-success-bg: color-mix(in oklch, var(--fui-seed-success) 15%, transparent);
       --fui-color-warning-bg: color-mix(in oklch, var(--fui-seed-warning) 15%, transparent);
       --fui-color-info-bg: color-mix(in oklch, var(--fui-seed-info) 15%, transparent);
-      --fui-focus-ring-color: oklch(from var(--fui-seed-brand) clamp(0.88, calc(1 - l + 0.1), 0.96) min(c, 0.05) h);
+      --fui-focus-ring-color: var(--fui-seed-brand);
     }
   }
 
@@ -717,8 +732,9 @@ $fui-dark-tooltip-shadow:
 
 // Private mixin for dark mode token values
 @mixin _fui-dark-tokens {
-  // Accent colors invert for dark mode (light on dark)
+  // Accent colors — brand used directly; on-accent handles text contrast
   --fui-color-accent: #{$fui-dark-color-accent};
+  --fui-color-on-accent: #{$fui-dark-color-on-accent};
   --fui-color-accent-hover: #{$fui-dark-color-accent-hover};
   --fui-color-accent-active: #{$fui-dark-color-accent-active};
 

package/src/utils/seed-derivation.ts

@@ -13,7 +13,7 @@
 // Types
 // ============================================
 
-export type NeutralPalette = 'stone' | 'ice' | 'sand' | 'earth' | 'fire';
+export type NeutralPalette = 'stone' | 'ice' | 'sand' | 'earth' | 'fire' | 'fragments';
 export type DensityPreset = 'compact' | 'default' | 'relaxed';
 export type RadiusStyle = 'sharp' | 'subtle' | 'default' | 'rounded' | 'pill';
 
@@ -128,6 +128,21 @@ export const PALETTES: Record<NeutralPalette, PaletteShades> = {
     900: '#1c100a',  // Darkened and desaturated for dark mode
     950: '#120a06',  // Very dark warm gray for dark mode bg
   },
+  // Fragments - Rich saturated green tones (the Fragments brand palette)
+  // Dark shades anchor to the Fragments marketing aesthetic
+  fragments: {
+    50: '#f0f7f3',
+    100: '#dceee3',
+    200: '#b8ddc6',
+    300: '#88c5a0',
+    400: '#5aaa7a',
+    500: '#3d8f60',
+    600: '#2d7049',
+    700: '#235536',
+    800: '#1a3025',  // Dark card surface
+    900: '#142318',  // Dark surface
+    950: '#0d1f17',  // Darkest bg
+  },
 };
 
 // ============================================
@@ -181,6 +196,13 @@ export const PALETTE_SEMANTIC_COLORS: Record<NeutralPalette, SemanticColors> = {
     danger: '#dc2626',  // Red 600 (complements orange)
     info: '#2563eb',    // Blue 600
   },
+  // Fragments - Brand-complementary semantic colors
+  fragments: {
+    success: '#39d98a', // Vibrant green (brand signature)
+    warning: '#f59e0b', // Amber 500
+    danger: '#ef4444',  // Red 500
+    info: '#3b82f6',    // Blue 500
+  },
 };
 
 /**