@raintonic/formaui 0.2.0

package/styles/partials/_theme.scss

@@ -0,0 +1,275 @@
+// Theme system with CSS variables
+@use 'constants' as *;
+@use './themes/light' as light;
+@use './themes/dark' as dark;
+
+// Re-export mixins so existing @use "theme" still works
+@mixin fui-light-theme {
+  @include light.fui-light-theme;
+}
+@mixin fui-dark-theme {
+  @include dark.fui-dark-theme;
+}
+
+// Default theme setup
+:root {
+  @include fui-light-theme();
+
+  // === SPACING SYSTEM ===
+  --fui-spacing-01: #{$fui-spacing-01};
+  --fui-spacing-02: #{$fui-spacing-02};
+  --fui-spacing-03: #{$fui-spacing-03};
+  --fui-spacing-04: #{$fui-spacing-04};
+  --fui-spacing-05: #{$fui-spacing-05};
+  --fui-spacing-06: #{$fui-spacing-06};
+  --fui-spacing-07: #{$fui-spacing-07};
+  --fui-spacing-08: #{$fui-spacing-08};
+  --fui-spacing-09: #{$fui-spacing-09};
+  --fui-spacing-10: #{$fui-spacing-10};
+  --fui-spacing-11: #{$fui-spacing-11};
+  --fui-spacing-12: #{$fui-spacing-12};
+
+  // === GAP TOKENS (Figma: forma-gap) ===
+  --fui-gap-4: 4px;
+  --fui-gap-8: 8px;
+  --fui-gap-10: 10px;
+  --fui-gap-16: 16px;
+  --fui-gap-24: 24px;
+  --fui-gap-32: 32px;
+  --fui-gap-40: 40px;
+  --fui-gap-48: 48px;
+
+  // === PADDING TOKENS (Figma: forma-padding) ===
+  --fui-padding-8: 8px;
+  --fui-padding-10: 10px;
+  --fui-padding-12: 12px;
+  --fui-padding-16: 16px;
+  --fui-padding-24: 24px;
+  --fui-padding-32: 32px;
+  --fui-padding-40: 40px;
+  --fui-padding-48: 48px;
+
+  // === TYPOGRAPHY SCALE ===
+  // Font families
+  --fui-font-family-sans: 'Inter Tight', sans-serif;
+  --fui-font-family-mono: 'DM Mono', monospace;
+
+  // Font sizes (rem)
+  --fui-font-size-01: 0.75rem;
+  --fui-font-size-02: 0.875rem;
+  --fui-font-size-03: 1rem;
+  --fui-font-size-04: 1.125rem;
+  --fui-font-size-05: 1.25rem;
+  --fui-font-size-06: 1.5rem;
+  --fui-font-size-07: 1.875rem;
+  --fui-font-size-08: 2.25rem;
+  --fui-font-size-09: 3rem;
+  --fui-font-size-10: 3.75rem;
+  --fui-font-size-11: 4.5rem;
+
+  // Font weights
+  --fui-font-weight-light: 300;
+  --fui-font-weight-regular: 400;
+  --fui-font-weight-medium: 500;
+  --fui-font-weight-semibold: 600;
+  --fui-font-weight-bold: 700;
+
+  // Line heights
+  --fui-line-height-condensed: 1.25rem;
+  --fui-line-height-body: 1.5rem;
+  --fui-line-height-heading: 1.125rem;
+  // Detailed line-height scale for utilities
+  --fui-line-height-01: 1.125rem;
+  --fui-line-height-02: 1.25rem;
+  --fui-line-height-03: 1.375rem;
+  --fui-line-height-04: 1.5rem;
+  --fui-line-height-05: 1.625rem;
+  --fui-line-height-06: 1.75rem;
+  --fui-line-height-07: 2rem;
+
+  // Specific line-heights for typography utilities
+  --fui-line-height-text-xs: 18px;
+  --fui-line-height-text-sm: 20px;
+  --fui-line-height-text-md: 24px;
+  --fui-line-height-text-lg: 28px;
+  --fui-line-height-text-xl: 30px;
+
+  --fui-line-height-display-xs: 32px;
+  --fui-line-height-display-sm: 38px;
+  --fui-line-height-display-md: 44px;
+  // For display-lg original design uses 80% (≈38.4px at 3rem); keep multiplier
+  --fui-line-height-display-lg: 0.8;
+  --fui-line-height-display-xl: 72px;
+  --fui-line-height-display-2xl: 90px;
+
+  // Letter spacing
+  --fui-letter-spacing-tight: -0.01em;
+  --fui-letter-spacing-normal: 0;
+  --fui-letter-spacing-wide: 0.02em;
+
+  // === MOTION SYSTEM ===
+  // Durations
+  --fui-duration-fast-01: 70ms;
+  --fui-duration-fast-02: 110ms;
+  --fui-duration-moderate-01: 150ms;
+  --fui-duration-moderate-02: 240ms;
+  --fui-duration-slow-01: 400ms;
+  --fui-duration-slow-02: 700ms;
+
+  // Easings
+  --fui-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --fui-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
+  --fui-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
+  --fui-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+
+  // === LAYOUT SYSTEM ===
+  // Border radius (Figma: forma-radius)
+  --fui-border-radius-xs: 4px;
+  --fui-border-radius-sm: 8px;
+  --fui-border-radius-md: 10px;
+  --fui-border-radius-lg: 16px;
+  --fui-border-radius-xl: 24px;
+  --fui-border-radius-pill: 999px;
+
+  // Border widths
+  --fui-border-width-sm: 1px;
+  --fui-border-width-md: 2px;
+  --fui-border-width-lg: 3px;
+
+  // Shadows
+  --fui-shadow-01: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --fui-shadow-02: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --fui-shadow-03: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
+  --fui-shadow-04: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
+  --fui-shadow-05: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
+
+  // === COMPONENT SIZES ===
+  // Button heights
+  --fui-button-height-sm: 1.5rem; // 32px
+  --fui-button-height-md: 2.5rem; // 40px
+  --fui-button-height-lg: 3rem; // 48px
+  --fui-button-height-xl: 4rem; // 64px
+
+  // Input heights
+  --fui-input-height: 2.5rem; // 44px
+
+  // Icon sizes
+  --fui-icon-size-sm: 0.75rem; // 16px
+  --fui-icon-size-md: 1.25rem; // 20px
+  --fui-icon-size-lg: 1.5rem; // 24px
+  --fui-icon-size-xl: 2rem; // 32px
+
+  // === Z-INDEX SCALE ===
+  --fui-z-dropdown: 1000;
+  --fui-z-sticky: 1020;
+  --fui-z-fixed: 1030;
+  --fui-z-modal-backdrop: 1040;
+  --fui-z-modal: 1050;
+  --fui-z-popover: 1060;
+  --fui-z-tooltip: 1070;
+
+  // === BREAKPOINTS ===
+  --fui-breakpoint-xs: #{$fui-breakpoint-xs};
+  --fui-breakpoint-sm: #{$fui-breakpoint-sm};
+  --fui-breakpoint-md: #{$fui-breakpoint-md};
+  --fui-breakpoint-lg: #{$fui-breakpoint-lg};
+  --fui-breakpoint-xl: #{$fui-breakpoint-xl};
+  --fui-breakpoint-xxl: #{$fui-breakpoint-xxl};
+
+  // === GRID SYSTEM ===
+  --fui-grid-columns: #{$fui-grid-columns};
+  --fui-grid-gutter: #{$fui-grid-gutter};
+  --fui-container-max-width: #{$fui-container-max-width};
+
+  // === TRANSITIONS ===
+  // Standard transitions for consistency
+  --fui-transition-all: all var(--fui-duration-fast-02) var(--fui-ease-standard);
+  --fui-transition-colors:
+    background-color var(--fui-duration-fast-02) var(--fui-ease-standard),
+    border-color var(--fui-duration-fast-02) var(--fui-ease-standard),
+    color var(--fui-duration-fast-02) var(--fui-ease-standard);
+  --fui-transition-transform: transform var(--fui-duration-moderate-01) var(--fui-ease-standard);
+  --fui-transition-opacity: opacity var(--fui-duration-fast-02) var(--fui-ease-standard);
+  --fui-transition-shadow: box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard);
+
+  // === MOTION: ANIMATION DEFAULTS ===
+  // Component-level animation tokens that can be themed
+  --fui-icon-spin-duration: var(--fui-duration-moderate-01);
+  --fui-icon-spin-timing: linear;
+  --fui-icon-pulse-duration: var(--fui-duration-slow-01);
+  --fui-icon-pulse-timing: var(--fui-ease-expressive);
+
+  --fui-opacity-disabled: 0.5;
+
+  --fui-tooltip-background: #334155;
+  --fui-tooltip-text: #f8fafc;
+
+  // === ADDITIONAL LAYOUT TOKENS ===
+  --fui-border-radius-none: 0;
+
+  // === FONT SIZE ALIASES (semantic) ===
+  --fui-font-size-xs: var(--fui-font-size-01);
+  --fui-font-size-sm: var(--fui-font-size-02);
+  --fui-font-size-md: var(--fui-font-size-03);
+
+  // === SHADOW ALIASES ===
+  --fui-shadow-lg: var(--fui-shadow-04);
+
+  // === CARD COMPONENT TOKENS ===
+  --fui-card-shadow: var(--fui-shadow-02);
+  --fui-card-shadow-hover: var(--fui-shadow-04);
+  --fui-card-padding: var(--fui-spacing-05);
+  --fui-card-border-radius: var(--fui-border-radius-xl);
+
+  // === FOCUS RING TOKENS ===
+  --fui-focus-ring-width: 2px;
+  --fui-focus-ring-color: var(--fui-primary-50);
+  --fui-focus-ring-offset: 2px;
+
+  // === DENSITY SYSTEM ===
+  --fui-density-scale: 1;
+
+  // Control heights
+  --fui-control-height-sm: calc(1.5rem * var(--fui-density-scale));
+  --fui-control-height-md: calc(2.5rem * var(--fui-density-scale));
+  --fui-control-height-lg: calc(3rem * var(--fui-density-scale));
+
+  // Control padding
+  --fui-control-padding-sm: calc(var(--fui-spacing-02) * var(--fui-density-scale));
+  --fui-control-padding-md: calc(var(--fui-spacing-03) * var(--fui-density-scale));
+  --fui-control-padding-lg: calc(var(--fui-spacing-04) * var(--fui-density-scale));
+
+  // Cell spacing (for tables)
+  --fui-cell-padding-y: calc(var(--fui-spacing-03) * var(--fui-density-scale));
+  --fui-cell-padding-x: calc(var(--fui-spacing-04) * var(--fui-density-scale));
+}
+
+// Dark theme class
+.fui-theme-dark {
+  @include fui-dark-theme();
+}
+
+// Theme toggle utility
+//@media (prefers-color-scheme: dark) {
+//  :root:not(.fui-theme-light) {
+//    @include fui-theme($fui-default-primary, $fui-default-secondary, true);
+//    @include fui-dark-theme();
+//  }
+//}
+
+// High contrast mode support (WCAG 2.1 AA)
+@media (prefers-contrast: more) {
+  :root {
+    --fui-border-color: #000;
+    --fui-text-primary: #000;
+    --fui-focus-ring-color: #000;
+    --fui-border-width-sm: 2px;
+    --fui-border-width-md: 3px;
+  }
+
+  .fui-theme-dark {
+    --fui-border-color: #fff;
+    --fui-text-primary: #fff;
+    --fui-focus-ring-color: #fff;
+  }
+}

package/styles/partials/_typography.scss

@@ -0,0 +1,112 @@
+.fui-text-xs {
+  font-size: var(--fui-font-size-01);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-text-xs);
+  letter-spacing: 0.24px;
+}
+
+.fui-text-sm {
+  font-size: var(--fui-font-size-02);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-text-sm);
+  letter-spacing: 0.56px;
+}
+
+.fui-text-md {
+  font-size: var(--fui-font-size-03);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-text-md);
+}
+
+.fui-text-lg {
+  font-size: var(--fui-font-size-04);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-text-lg);
+}
+
+.fui-text-xl {
+  font-size: var(--fui-font-size-05);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-text-xl);
+}
+
+// Display text
+.fui-display-xs {
+  font-size: var(--fui-font-size-06);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-xs);
+  letter-spacing: 0.48px;
+}
+
+.fui-display-sm {
+  font-size: var(--fui-font-size-07);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-sm);
+}
+
+.fui-display-md {
+  font-size: var(--fui-font-size-08);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-md);
+}
+
+.fui-display-lg {
+  font-size: var(--fui-font-size-09);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-lg);
+}
+
+.fui-display-xl {
+  font-size: var(--fui-font-size-10);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-xl);
+  letter-spacing: -1.2px;
+}
+
+.fui-display-2xl {
+  font-size: var(--fui-font-size-11);
+  font-style: normal;
+  font-weight: var(--fui-font-weight-regular);
+  line-height: var(--fui-line-height-display-2xl);
+  letter-spacing: -1.44px;
+}
+
+// Code text
+.fui-code-01 {
+  font-family: var(--fui-font-family-mono);
+  font-size: var(--fui-font-size-01);
+  line-height: var(--fui-line-height-04);
+}
+
+.fui-code-02 {
+  font-family: var(--fui-font-family-mono);
+  font-size: var(--fui-font-size-02);
+  line-height: var(--fui-line-height-04);
+}
+
+// Helper classes
+.fui-font-light {
+  font-weight: var(--fui-font-weight-light);
+}
+.fui-font-regular {
+  font-weight: var(--fui-font-weight-regular);
+}
+.fui-font-medium {
+  font-weight: var(--fui-font-weight-medium);
+}
+.fui-font-semibold {
+  font-weight: var(--fui-font-weight-semibold);
+}
+.fui-font-bold {
+  font-weight: var(--fui-font-weight-bold);
+}