@fragments-sdk/ui 0.1.0

package/src/styles/globals.scss

@@ -0,0 +1,17 @@
+// ============================================
+// @fragments/ui Global Styles
+// ============================================
+// Import this file once in your app to set up CSS custom properties
+// for theming. This enables automatic dark mode support.
+//
+// Usage in your app:
+//   import '@fragments/ui/styles/globals.scss';
+//
+// Or in SCSS:
+//   @use '@fragments/ui/styles/globals';
+// ============================================
+
+@use '../tokens/variables' as *;
+
+// Output all CSS custom properties
+@include fui-css-variables;

package/src/tokens/_mixins.scss

@@ -0,0 +1,93 @@
+// ============================================
+// @fragments/ui Shared Mixins
+// ============================================
+
+@use 'variables' as *;
+
+// Focus ring for keyboard accessibility
+@mixin focus-ring {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) var(--fui-bg-primary, #{$fui-bg-primary}),
+    0 0 0 calc(var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) + var(--fui-focus-ring-width, #{$fui-focus-ring-width})) var(--fui-focus-ring-color, #{$fui-focus-ring-color});
+}
+
+// Reset button styles
+@mixin button-reset {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Base interactive element
+@mixin interactive-base {
+  transition:
+    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    border-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
+    opacity var(--fui-transition-fast, #{$fui-transition-fast});
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// Typography base
+@mixin text-base {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+  line-height: var(--fui-line-height-normal, #{$fui-line-height-normal});
+  color: var(--fui-text-primary, #{$fui-text-primary});
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Label text
+@mixin label-text {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
+  color: var(--fui-text-primary, #{$fui-text-primary});
+}
+
+// Helper/caption text
+@mixin helper-text {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+  color: var(--fui-text-secondary, #{$fui-text-secondary});
+}
+
+// Card surface
+@mixin surface-elevated {
+  background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
+  border: 1px solid var(--fui-border, #{$fui-border});
+  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+}
+
+// Visually hidden (for screen readers)
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/tokens/_variables.scss

@@ -0,0 +1,276 @@
+// ============================================
+// @fragments/ui Design Tokens
+// ============================================
+//
+// Override these variables in your own SCSS before importing components.
+// Example:
+//   $fui-color-accent: #0066ff;
+//   @use '@fragments/ui/tokens';
+//
+// Or use CSS custom properties for runtime theming.
+// ============================================
+
+// --------------------------------------------
+// Typography
+// --------------------------------------------
+$fui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
+$fui-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace !default;
+
+$fui-font-size-2xs: 0.6875rem !default; // 11px
+$fui-font-size-xs: 0.75rem !default;   // 12px
+$fui-font-size-sm: 0.875rem !default;  // 14px
+$fui-font-size-base: 1rem !default;    // 16px
+$fui-font-size-lg: 1.125rem !default;  // 18px
+$fui-font-size-xl: 1.5rem !default;    // 24px
+
+$fui-font-weight-normal: 400 !default;
+$fui-font-weight-medium: 500 !default;
+$fui-font-weight-semibold: 600 !default;
+
+$fui-line-height-tight: 1.25 !default;
+$fui-line-height-normal: 1.5 !default;
+
+// --------------------------------------------
+// Spacing (4px base unit)
+// --------------------------------------------
+$fui-space-1: 0.25rem !default;  // 4px
+$fui-space-2: 0.5rem !default;   // 8px
+$fui-space-3: 0.75rem !default;  // 12px
+$fui-space-4: 1rem !default;     // 16px
+$fui-space-5: 1.25rem !default;  // 20px
+$fui-space-6: 1.5rem !default;   // 24px
+$fui-space-8: 2rem !default;     // 32px
+$fui-space-10: 2.5rem !default;  // 40px
+$fui-space-12: 3rem !default;    // 48px
+
+// --------------------------------------------
+// Border Radius
+// --------------------------------------------
+$fui-radius-sm: 0.25rem !default;  // 4px
+$fui-radius-md: 0.375rem !default; // 6px
+$fui-radius-lg: 0.5rem !default;   // 8px
+$fui-radius-full: 9999px !default;
+
+// --------------------------------------------
+// Transitions
+// --------------------------------------------
+$fui-transition-fast: 150ms ease !default;
+$fui-transition-normal: 200ms ease !default;
+
+// --------------------------------------------
+// Colors - Light Mode
+// --------------------------------------------
+$fui-color-accent: #6366f1 !default;
+$fui-color-accent-hover: #4f46e5 !default;
+$fui-color-accent-active: #4338ca !default;
+
+$fui-color-danger: #ef4444 !default;
+$fui-color-danger-hover: #dc2626 !default;
+$fui-color-success: #22c55e !default;
+$fui-color-warning: #f59e0b !default;
+$fui-color-info: #3b82f6 !default;
+
+// Semantic backgrounds (light)
+$fui-color-danger-bg: rgba(239, 68, 68, 0.1) !default;
+$fui-color-success-bg: rgba(34, 197, 94, 0.1) !default;
+$fui-color-warning-bg: rgba(245, 158, 11, 0.1) !default;
+$fui-color-info-bg: rgba(59, 130, 246, 0.1) !default;
+
+// Surface colors (light)
+$fui-bg-primary: #ffffff !default;
+$fui-bg-secondary: #f8fafc !default;
+$fui-bg-tertiary: #f1f5f9 !default;
+$fui-bg-elevated: #ffffff !default;
+$fui-bg-hover: rgba(0, 0, 0, 0.04) !default;
+$fui-bg-active: rgba(0, 0, 0, 0.06) !default;
+
+// Text colors (light)
+$fui-text-primary: #0f172a !default;
+$fui-text-secondary: #64748b !default;
+$fui-text-tertiary: #94a3b8 !default;
+$fui-text-inverse: #ffffff !default;
+
+// Border colors (light)
+$fui-border: #e2e8f0 !default;
+$fui-border-strong: #cbd5e1 !default;
+
+// Shadows (light)
+$fui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$fui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !default;
+
+// Focus ring
+$fui-focus-ring-color: $fui-color-accent !default;
+$fui-focus-ring-offset: 2px !default;
+$fui-focus-ring-width: 2px !default;
+
+// --------------------------------------------
+// Colors - Dark Mode
+// --------------------------------------------
+$fui-dark-bg-primary: #0f172a !default;
+$fui-dark-bg-secondary: #1e293b !default;
+$fui-dark-bg-tertiary: #334155 !default;
+$fui-dark-bg-elevated: #1e293b !default;
+$fui-dark-bg-hover: rgba(255, 255, 255, 0.06) !default;
+$fui-dark-bg-active: rgba(255, 255, 255, 0.08) !default;
+
+$fui-dark-text-primary: #f8fafc !default;
+$fui-dark-text-secondary: #94a3b8 !default;
+$fui-dark-text-tertiary: #64748b !default;
+$fui-dark-text-inverse: #0f172a !default;
+
+$fui-dark-border: #334155 !default;
+$fui-dark-border-strong: #475569 !default;
+
+$fui-dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !default;
+$fui-dark-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !default;
+
+// Semantic backgrounds (dark) - increased opacity for visibility
+$fui-dark-color-danger-bg: rgba(239, 68, 68, 0.15) !default;
+$fui-dark-color-success-bg: rgba(34, 197, 94, 0.15) !default;
+$fui-dark-color-warning-bg: rgba(245, 158, 11, 0.15) !default;
+$fui-dark-color-info-bg: rgba(59, 130, 246, 0.15) !default;
+
+// Overlay/backdrop
+$fui-backdrop: rgba(0, 0, 0, 0.5) !default;
+$fui-dark-backdrop: rgba(0, 0, 0, 0.7) !default;
+
+// --------------------------------------------
+// Component-specific tokens
+// --------------------------------------------
+
+// Button
+$fui-button-height-sm: 2rem !default;      // 32px
+$fui-button-height-md: 2.25rem !default;   // 36px
+$fui-button-height-lg: 2.75rem !default;   // 44px
+
+// Input
+$fui-input-height: 2.5rem !default;        // 40px
+
+// Toggle/Switch
+$fui-toggle-width-sm: 2rem !default;       // 32px
+$fui-toggle-width-md: 2.5rem !default;     // 40px
+$fui-toggle-height-sm: 1.125rem !default;  // 18px
+$fui-toggle-height-md: 1.375rem !default;  // 22px
+
+// --------------------------------------------
+// CSS Custom Properties Export
+// --------------------------------------------
+// This mixin outputs CSS custom properties for runtime theming.
+// Call it in your root styles: @include fui-css-variables;
+
+@mixin fui-css-variables {
+  :root {
+    // Typography
+    --fui-font-sans: #{$fui-font-sans};
+    --fui-font-mono: #{$fui-font-mono};
+    --fui-font-size-2xs: #{$fui-font-size-2xs};
+    --fui-font-size-xs: #{$fui-font-size-xs};
+    --fui-font-size-sm: #{$fui-font-size-sm};
+    --fui-font-size-base: #{$fui-font-size-base};
+    --fui-font-size-lg: #{$fui-font-size-lg};
+    --fui-font-size-xl: #{$fui-font-size-xl};
+    --fui-font-weight-normal: #{$fui-font-weight-normal};
+    --fui-font-weight-medium: #{$fui-font-weight-medium};
+    --fui-font-weight-semibold: #{$fui-font-weight-semibold};
+    --fui-line-height-tight: #{$fui-line-height-tight};
+    --fui-line-height-normal: #{$fui-line-height-normal};
+
+    // Spacing
+    --fui-space-1: #{$fui-space-1};
+    --fui-space-2: #{$fui-space-2};
+    --fui-space-3: #{$fui-space-3};
+    --fui-space-4: #{$fui-space-4};
+    --fui-space-5: #{$fui-space-5};
+    --fui-space-6: #{$fui-space-6};
+    --fui-space-8: #{$fui-space-8};
+    --fui-space-10: #{$fui-space-10};
+    --fui-space-12: #{$fui-space-12};
+
+    // Border radius
+    --fui-radius-sm: #{$fui-radius-sm};
+    --fui-radius-md: #{$fui-radius-md};
+    --fui-radius-lg: #{$fui-radius-lg};
+    --fui-radius-full: #{$fui-radius-full};
+
+    // Transitions
+    --fui-transition-fast: #{$fui-transition-fast};
+    --fui-transition-normal: #{$fui-transition-normal};
+
+    // Colors
+    --fui-color-accent: #{$fui-color-accent};
+    --fui-color-accent-hover: #{$fui-color-accent-hover};
+    --fui-color-accent-active: #{$fui-color-accent-active};
+    --fui-color-danger: #{$fui-color-danger};
+    --fui-color-danger-hover: #{$fui-color-danger-hover};
+    --fui-color-success: #{$fui-color-success};
+    --fui-color-warning: #{$fui-color-warning};
+    --fui-color-info: #{$fui-color-info};
+    --fui-color-danger-bg: #{$fui-color-danger-bg};
+    --fui-color-success-bg: #{$fui-color-success-bg};
+    --fui-color-warning-bg: #{$fui-color-warning-bg};
+    --fui-color-info-bg: #{$fui-color-info-bg};
+    --fui-backdrop: #{$fui-backdrop};
+
+    // Surfaces
+    --fui-bg-primary: #{$fui-bg-primary};
+    --fui-bg-secondary: #{$fui-bg-secondary};
+    --fui-bg-tertiary: #{$fui-bg-tertiary};
+    --fui-bg-elevated: #{$fui-bg-elevated};
+    --fui-bg-hover: #{$fui-bg-hover};
+    --fui-bg-active: #{$fui-bg-active};
+
+    // Text
+    --fui-text-primary: #{$fui-text-primary};
+    --fui-text-secondary: #{$fui-text-secondary};
+    --fui-text-tertiary: #{$fui-text-tertiary};
+    --fui-text-inverse: #{$fui-text-inverse};
+
+    // Borders
+    --fui-border: #{$fui-border};
+    --fui-border-strong: #{$fui-border-strong};
+
+    // Shadows
+    --fui-shadow-sm: #{$fui-shadow-sm};
+    --fui-shadow-md: #{$fui-shadow-md};
+
+    // Focus
+    --fui-focus-ring-color: #{$fui-focus-ring-color};
+    --fui-focus-ring-offset: #{$fui-focus-ring-offset};
+    --fui-focus-ring-width: #{$fui-focus-ring-width};
+  }
+
+  // Dark mode via data-theme attribute (manual toggle)
+  :root[data-theme="dark"] {
+    @include _fui-dark-tokens;
+  }
+
+  // Dark mode via .dark class on html (used by viewer and many frameworks)
+  // This is the primary method - applications handle system preference detection
+  // and apply .dark class accordingly
+  :root.dark {
+    @include _fui-dark-tokens;
+  }
+}
+
+// Private mixin for dark mode token values
+@mixin _fui-dark-tokens {
+  --fui-bg-primary: #{$fui-dark-bg-primary};
+  --fui-bg-secondary: #{$fui-dark-bg-secondary};
+  --fui-bg-tertiary: #{$fui-dark-bg-tertiary};
+  --fui-bg-elevated: #{$fui-dark-bg-elevated};
+  --fui-bg-hover: #{$fui-dark-bg-hover};
+  --fui-bg-active: #{$fui-dark-bg-active};
+  --fui-text-primary: #{$fui-dark-text-primary};
+  --fui-text-secondary: #{$fui-dark-text-secondary};
+  --fui-text-tertiary: #{$fui-dark-text-tertiary};
+  --fui-text-inverse: #{$fui-dark-text-inverse};
+  --fui-border: #{$fui-dark-border};
+  --fui-border-strong: #{$fui-dark-border-strong};
+  --fui-shadow-sm: #{$fui-dark-shadow-sm};
+  --fui-shadow-md: #{$fui-dark-shadow-md};
+  --fui-color-danger-bg: #{$fui-dark-color-danger-bg};
+  --fui-color-success-bg: #{$fui-dark-color-success-bg};
+  --fui-color-warning-bg: #{$fui-dark-color-warning-bg};
+  --fui-color-info-bg: #{$fui-dark-color-info-bg};
+  --fui-backdrop: #{$fui-dark-backdrop};
+}