@raintonic/formaui 0.3.1 → 0.9.0

package/styles/partials/_theme.scss

@@ -1,276 +1,49 @@
-// Theme system with CSS variables
-@use 'constants' as *;
-@use './themes/light' as light;
-@use './themes/dark' as dark;
+// Theme system — bridges Style Dictionary generated tokens to FormaUI selectors.
+@use '../generated/tokens' as tokens;
 
-// Re-export mixins so existing @use "theme" still works
 @mixin fui-light-theme {
-  @include light.fui-light-theme;
+  @include tokens.fui-light-theme;
 }
 @mixin fui-dark-theme {
-  @include dark.fui-dark-theme;
+  @include tokens.fui-dark-theme;
 }
 
-// Default theme setup
+// Mode-invariant tokens.
 :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.75rem; // 28px
-  --fui-button-height-md: 2.25rem; // 36px
-  --fui-button-height-lg: 2.75rem; // 44px
-  --fui-button-height-xl: 3.25rem; // 52px
-  --fui-button-height-2xl: 4rem; // 64px
-
-  // Input heights
-  --fui-input-height: 2.25rem; // 36px (matches --fui-button-height-md)
-
-  // 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));
+  @include tokens.fui-tokens-root();
+}
 
-  // 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));
+// Light = default (anche senza attributo) + scopabile via data-theme.
+:root,
+:root[data-theme='light'],
+[data-theme='light'] {
+  @include fui-light-theme();
 }
 
-// Dark theme class
-.fui-theme-dark {
+// Dark via data-theme (scopabile su qualsiasi sottoalbero).
+:root[data-theme='dark'],
+[data-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)
+// High contrast (WCAG 2.1 AA).
 @media (prefers-contrast: more) {
-  :root {
-    --fui-border-color: #000;
+  :root,
+  [data-theme='light'] {
+    --fui-border-default: #000;
     --fui-text-primary: #000;
-    --fui-focus-ring-color: #000;
+    // Il focus-ring mixin (lib/styles/partials/_mixins.scss) usa --fui-border-primary:
+    // sovrascrivere QUELLO per ottenere il ring nero in HC (non --fui-state-focus-ring,
+    // che non è consumato dal ring renderizzato).
+    --fui-border-primary: #000;
+    --fui-state-focus-ring: #000;
     --fui-border-width-sm: 2px;
     --fui-border-width-md: 3px;
   }
-
-  .fui-theme-dark {
-    --fui-border-color: #fff;
+  [data-theme='dark'] {
+    --fui-border-default: #fff;
     --fui-text-primary: #fff;
-    --fui-focus-ring-color: #fff;
+    --fui-border-primary: #fff;
+    --fui-state-focus-ring: #fff;
   }
 }

package/styles/partials/_type.scss

@@ -0,0 +1,117 @@
+// FormaUI — Composed type scale (PRD). SCSS mixins + public .fui-type-* classes.
+// Each role bundles font-size + line-height + weight via primitive CSS vars.
+
+@mixin fui-type-display {
+  font-size: var(--fui-text-5xl);
+  line-height: var(--fui-leading-tight);
+  font-weight: var(--fui-weight-bold);
+}
+@mixin fui-type-h1 {
+  font-size: var(--fui-text-4xl);
+  line-height: var(--fui-leading-tight);
+  font-weight: var(--fui-weight-bold);
+}
+@mixin fui-type-h2 {
+  font-size: var(--fui-text-3xl);
+  line-height: var(--fui-leading-tight);
+  font-weight: var(--fui-weight-semibold);
+}
+@mixin fui-type-h3 {
+  font-size: var(--fui-text-2xl);
+  line-height: var(--fui-leading-snug);
+  font-weight: var(--fui-weight-semibold);
+}
+@mixin fui-type-h4 {
+  font-size: var(--fui-text-xl);
+  line-height: var(--fui-leading-snug);
+  font-weight: var(--fui-weight-semibold);
+}
+@mixin fui-type-h5 {
+  font-size: var(--fui-text-lg);
+  line-height: var(--fui-leading-snug);
+  font-weight: var(--fui-weight-semibold);
+}
+@mixin fui-type-h6 {
+  font-size: var(--fui-text-md);
+  line-height: var(--fui-leading-snug);
+  font-weight: var(--fui-weight-semibold);
+}
+@mixin fui-type-body-lg {
+  font-size: var(--fui-text-md);
+  line-height: var(--fui-leading-relaxed);
+  font-weight: var(--fui-weight-regular);
+}
+@mixin fui-type-body {
+  font-size: var(--fui-text-base);
+  line-height: var(--fui-leading-normal);
+  font-weight: var(--fui-weight-regular);
+}
+@mixin fui-type-body-sm {
+  font-size: var(--fui-text-sm);
+  line-height: var(--fui-leading-normal);
+  font-weight: var(--fui-weight-regular);
+}
+@mixin fui-type-label {
+  font-size: var(--fui-text-sm);
+  line-height: var(--fui-leading-normal);
+  font-weight: var(--fui-weight-medium);
+}
+@mixin fui-type-label-sm {
+  font-size: var(--fui-text-xs);
+  line-height: var(--fui-leading-normal);
+  font-weight: var(--fui-weight-medium);
+}
+@mixin fui-type-caption {
+  font-size: var(--fui-text-xs);
+  line-height: var(--fui-leading-snug);
+  font-weight: var(--fui-weight-regular);
+}
+@mixin fui-type-code {
+  font-family: var(--fui-font-mono);
+  font-size: var(--fui-text-sm);
+  line-height: var(--fui-leading-normal);
+  font-weight: var(--fui-weight-regular);
+}
+
+.fui-type-display {
+  @include fui-type-display;
+}
+.fui-type-h1 {
+  @include fui-type-h1;
+}
+.fui-type-h2 {
+  @include fui-type-h2;
+}
+.fui-type-h3 {
+  @include fui-type-h3;
+}
+.fui-type-h4 {
+  @include fui-type-h4;
+}
+.fui-type-h5 {
+  @include fui-type-h5;
+}
+.fui-type-h6 {
+  @include fui-type-h6;
+}
+.fui-type-body-lg {
+  @include fui-type-body-lg;
+}
+.fui-type-body {
+  @include fui-type-body;
+}
+.fui-type-body-sm {
+  @include fui-type-body-sm;
+}
+.fui-type-label {
+  @include fui-type-label;
+}
+.fui-type-label-sm {
+  @include fui-type-label-sm;
+}
+.fui-type-caption {
+  @include fui-type-caption;
+}
+.fui-type-code {
+  @include fui-type-code;
+}

package/styles/partials/_typography.scss

@@ -1,112 +1,112 @@
-.fui-text-xs {
-  font-size: var(--fui-font-size-01);
+.fui-text-xs {
+  font-size: var(--fui-text-sm);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-text-xs);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-normal);
   letter-spacing: 0.24px;
 }
 
 .fui-text-sm {
-  font-size: var(--fui-font-size-02);
+  font-size: var(--fui-text-base);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-text-sm);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-normal);
   letter-spacing: 0.56px;
 }
 
 .fui-text-md {
-  font-size: var(--fui-font-size-03);
+  font-size: var(--fui-text-md);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-text-md);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-normal);
 }
 
 .fui-text-lg {
-  font-size: var(--fui-font-size-04);
+  font-size: var(--fui-text-lg);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-text-lg);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-normal);
 }
 
 .fui-text-xl {
-  font-size: var(--fui-font-size-05);
+  font-size: var(--fui-text-xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-text-xl);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-normal);
 }
 
 // Display text
 .fui-display-xs {
-  font-size: var(--fui-font-size-06);
+  font-size: var(--fui-text-2xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-xs);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-snug);
   letter-spacing: 0.48px;
 }
 
 .fui-display-sm {
-  font-size: var(--fui-font-size-07);
+  font-size: var(--fui-text-3xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-sm);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-tight);
 }
 
 .fui-display-md {
-  font-size: var(--fui-font-size-08);
+  font-size: var(--fui-text-4xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-md);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-tight);
 }
 
 .fui-display-lg {
-  font-size: var(--fui-font-size-09);
+  font-size: var(--fui-text-5xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-lg);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-tight);
 }
 
 .fui-display-xl {
-  font-size: var(--fui-font-size-10);
+  font-size: var(--fui-text-6xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-xl);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-tight);
   letter-spacing: -1.2px;
 }
 
 .fui-display-2xl {
-  font-size: var(--fui-font-size-11);
+  font-size: var(--fui-text-7xl);
   font-style: normal;
-  font-weight: var(--fui-font-weight-regular);
-  line-height: var(--fui-line-height-display-2xl);
+  font-weight: var(--fui-weight-regular);
+  line-height: var(--fui-leading-tight);
   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);
+  font-family: var(--fui-font-mono);
+  font-size: var(--fui-text-sm);
+  line-height: var(--fui-leading-loose);
 }
 
 .fui-code-02 {
-  font-family: var(--fui-font-family-mono);
-  font-size: var(--fui-font-size-02);
-  line-height: var(--fui-line-height-04);
+  font-family: var(--fui-font-mono);
+  font-size: var(--fui-text-base);
+  line-height: var(--fui-leading-relaxed);
 }
 
 // Helper classes
 .fui-font-light {
-  font-weight: var(--fui-font-weight-light);
+  font-weight: var(--fui-weight-light);
 }
 .fui-font-regular {
-  font-weight: var(--fui-font-weight-regular);
+  font-weight: var(--fui-weight-regular);
 }
 .fui-font-medium {
-  font-weight: var(--fui-font-weight-medium);
+  font-weight: var(--fui-weight-medium);
 }
 .fui-font-semibold {
-  font-weight: var(--fui-font-weight-semibold);
+  font-weight: var(--fui-weight-semibold);
 }
 .fui-font-bold {
-  font-weight: var(--fui-font-weight-bold);
+  font-weight: var(--fui-weight-bold);
 }