@raintonic/formaui 0.2.0

package/styles/partials/_utilities.scss

@@ -0,0 +1,480 @@
+// Utility classes
+@use './constants' as *;
+@use './mixins' as *;
+
+// Display utilities
+.fui-hidden {
+  display: none !important;
+}
+.fui-inline {
+  display: inline !important;
+}
+.fui-inline-block {
+  display: inline-block !important;
+}
+.fui-block {
+  display: block !important;
+}
+.fui-grid {
+  display: grid !important;
+}
+.fui-table {
+  display: table !important;
+}
+.fui-table-row {
+  display: table-row !important;
+}
+.fui-table-cell {
+  display: table-cell !important;
+}
+.fui-flex {
+  display: flex !important;
+}
+.fui-inline-flex {
+  display: inline-flex !important;
+}
+
+// Responsive display utilities
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    .fui-#{$breakpoint}-hidden {
+      display: none !important;
+    }
+    .fui-#{$breakpoint}-inline {
+      display: inline !important;
+    }
+    .fui-#{$breakpoint}-inline-block {
+      display: inline-block !important;
+    }
+    .fui-#{$breakpoint}-block {
+      display: block !important;
+    }
+    .fui-#{$breakpoint}-grid {
+      display: grid !important;
+    }
+    .fui-#{$breakpoint}-table {
+      display: table !important;
+    }
+    .fui-#{$breakpoint}-table-row {
+      display: table-row !important;
+    }
+    .fui-#{$breakpoint}-table-cell {
+      display: table-cell !important;
+    }
+    .fui-#{$breakpoint}-flex {
+      display: flex !important;
+    }
+    .fui-#{$breakpoint}-inline-flex {
+      display: inline-flex !important;
+    }
+  }
+}
+
+// Flex utilities
+.fui-flex-row {
+  flex-direction: row !important;
+}
+.fui-flex-col {
+  flex-direction: column !important;
+}
+.fui-flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+.fui-flex-col-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.fui-flex-wrap {
+  flex-wrap: wrap !important;
+}
+.fui-flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+.fui-flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.fui-flex-1 {
+  flex: 1 1 auto !important;
+}
+.fui-grow-0 {
+  flex-grow: 0 !important;
+}
+.fui-grow {
+  flex-grow: 1 !important;
+}
+.fui-shrink-0 {
+  flex-shrink: 0 !important;
+}
+.fui-shrink {
+  flex-shrink: 1 !important;
+}
+
+.fui-justify-start {
+  justify-content: flex-start !important;
+}
+.fui-justify-end {
+  justify-content: flex-end !important;
+}
+.fui-justify-center {
+  justify-content: center !important;
+}
+.fui-justify-between {
+  justify-content: space-between !important;
+}
+.fui-justify-around {
+  justify-content: space-around !important;
+}
+.fui-justify-evenly {
+  justify-content: space-evenly !important;
+}
+
+.fui-items-start {
+  align-items: flex-start !important;
+}
+.fui-items-end {
+  align-items: flex-end !important;
+}
+.fui-items-center {
+  align-items: center !important;
+}
+.fui-items-baseline {
+  align-items: baseline !important;
+}
+.fui-items-stretch {
+  align-items: stretch !important;
+}
+
+.fui-content-start {
+  align-content: flex-start !important;
+}
+.fui-content-end {
+  align-content: flex-end !important;
+}
+.fui-content-center {
+  align-content: center !important;
+}
+.fui-content-between {
+  align-content: space-between !important;
+}
+.fui-content-around {
+  align-content: space-around !important;
+}
+.fui-content-stretch {
+  align-content: stretch !important;
+}
+
+.fui-self-auto {
+  align-self: auto !important;
+}
+.fui-self-start {
+  align-self: flex-start !important;
+}
+.fui-self-end {
+  align-self: flex-end !important;
+}
+.fui-self-center {
+  align-self: center !important;
+}
+.fui-self-baseline {
+  align-self: baseline !important;
+}
+.fui-self-stretch {
+  align-self: stretch !important;
+}
+
+// Spacing utilities
+$spacers: (
+  0: 0,
+  1: $fui-spacing-01,
+  2: $fui-spacing-02,
+  3: $fui-spacing-03,
+  4: $fui-spacing-04,
+  5: $fui-spacing-05,
+  6: $fui-spacing-06,
+  7: $fui-spacing-07,
+  8: $fui-spacing-08,
+  9: $fui-spacing-09,
+  10: $fui-spacing-10,
+  11: $fui-spacing-11,
+  12: $fui-spacing-12,
+  auto: auto,
+);
+
+@each $prop, $abbrev in (margin: m, padding: p, gap: gap) {
+  @each $size, $length in $spacers {
+    .fui-#{$abbrev}-#{$size} {
+      #{$prop}: $length !important;
+    }
+    .fui-#{$abbrev}t-#{$size},
+    .fui-#{$abbrev}y-#{$size} {
+      #{$prop}-top: $length !important;
+    }
+    .fui-#{$abbrev}r-#{$size},
+    .fui-#{$abbrev}x-#{$size} {
+      #{$prop}-right: $length !important;
+    }
+    .fui-#{$abbrev}b-#{$size},
+    .fui-#{$abbrev}y-#{$size} {
+      #{$prop}-bottom: $length !important;
+    }
+    .fui-#{$abbrev}l-#{$size},
+    .fui-#{$abbrev}x-#{$size} {
+      #{$prop}-left: $length !important;
+    }
+  }
+}
+
+// Responsive spacing utilities
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+        .fui-#{$abbrev}-#{$breakpoint}-#{$size} {
+          #{$prop}: $length !important;
+        }
+        .fui-#{$abbrev}t-#{$breakpoint}-#{$size},
+        .fui-#{$abbrev}y-#{$breakpoint}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .fui-#{$abbrev}r-#{$breakpoint}-#{$size},
+        .fui-#{$abbrev}x-#{$breakpoint}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+        .fui-#{$abbrev}b-#{$breakpoint}-#{$size},
+        .fui-#{$abbrev}y-#{$breakpoint}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
+        .fui-#{$abbrev}l-#{$breakpoint}-#{$size},
+        .fui-#{$abbrev}x-#{$breakpoint}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+    }
+  }
+}
+
+// Text alignment
+.fui-text-left {
+  text-align: left !important;
+}
+.fui-text-right {
+  text-align: right !important;
+}
+.fui-text-center {
+  text-align: center !important;
+}
+.fui-text-justify {
+  text-align: justify !important;
+}
+
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    .fui-text-#{$breakpoint}-left {
+      text-align: left !important;
+    }
+    .fui-text-#{$breakpoint}-right {
+      text-align: right !important;
+    }
+    .fui-text-#{$breakpoint}-center {
+      text-align: center !important;
+    }
+    .fui-text-#{$breakpoint}-justify {
+      text-align: justify !important;
+    }
+  }
+}
+// Text colors
+.fui-text-color-primary {
+  color: var(--fui-primary) !important;
+}
+.fui-text-secondary {
+  color: var(--fui-text-secondary) !important;
+}
+// Text transform
+.fui-lowercase {
+  text-transform: lowercase !important;
+}
+.fui-uppercase {
+  text-transform: uppercase !important;
+}
+.fui-capitalize {
+  text-transform: capitalize !important;
+}
+
+// Text decoration
+.fui-no-underline {
+  text-decoration: none !important;
+}
+.fui-underline {
+  text-decoration: underline !important;
+}
+.fui-line-through {
+  text-decoration: line-through !important;
+}
+
+// Position utilities
+.fui-static {
+  position: static !important;
+}
+.fui-relative {
+  position: relative !important;
+}
+.fui-absolute {
+  position: absolute !important;
+}
+.fui-fixed {
+  position: fixed !important;
+}
+.fui-sticky {
+  position: sticky !important;
+}
+
+// Border utilities
+.fui-border {
+  border: 1px solid var(--fui-border-color) !important;
+}
+.fui-border-0 {
+  border: 0 !important;
+}
+.fui-border-t {
+  border-top: 1px solid var(--fui-border-color) !important;
+}
+.fui-border-t-0 {
+  border-top: 0 !important;
+}
+.fui-border-r {
+  border-right: 1px solid var(--fui-border-color) !important;
+}
+.fui-border-r-0 {
+  border-right: 0 !important;
+}
+.fui-border-b {
+  border-bottom: 1px solid var(--fui-border-color) !important;
+}
+.fui-border-b-0 {
+  border-bottom: 0 !important;
+}
+.fui-border-l {
+  border-left: 1px solid var(--fui-border-color) !important;
+}
+.fui-border-l-0 {
+  border-left: 0 !important;
+}
+
+// Border radius
+.fui-rounded {
+  border-radius: var(--fui-border-radius-md) !important;
+}
+.fui-rounded-none {
+  border-radius: 0 !important;
+}
+.fui-rounded-sm {
+  border-radius: var(--fui-border-radius-sm) !important;
+}
+.fui-rounded-md {
+  border-radius: var(--fui-border-radius-md) !important;
+}
+.fui-rounded-lg {
+  border-radius: var(--fui-border-radius-lg) !important;
+}
+.fui-rounded-full {
+  border-radius: 50% !important;
+}
+.fui-rounded-pill {
+  border-radius: 50rem !important;
+}
+
+// Visibility
+.fui-visible {
+  visibility: visible !important;
+}
+.fui-invisible {
+  visibility: hidden !important;
+}
+
+// Overflow
+.fui-overflow-auto {
+  overflow: auto !important;
+}
+.fui-overflow-hidden {
+  overflow: hidden !important;
+}
+.fui-overflow-visible {
+  overflow: visible !important;
+}
+.fui-overflow-scroll {
+  overflow: scroll !important;
+}
+
+// Width and height
+.fui-w-1\/4 {
+  width: 25% !important;
+}
+.fui-w-1\/2 {
+  width: 50% !important;
+}
+.fui-w-3\/4 {
+  width: 75% !important;
+}
+.fui-w-4\/5 {
+  width: 80% !important;
+}
+.fui-w-full {
+  width: 100% !important;
+}
+.fui-w-auto {
+  width: auto !important;
+}
+
+.fui-h-1\/4 {
+  height: 25% !important;
+}
+.fui-h-1\/2 {
+  height: 50% !important;
+}
+.fui-h-3\/4 {
+  height: 75% !important;
+}
+.fui-h-full {
+  height: 100% !important;
+}
+.fui-h-auto {
+  height: auto !important;
+}
+
+// Max width and height
+.fui-max-w-full {
+  max-width: 100% !important;
+}
+.fui-max-h-full {
+  max-height: 100% !important;
+}
+
+// Min width and height
+.fui-min-w-screen {
+  min-width: 100vw !important;
+}
+.fui-min-h-screen {
+  min-height: 100vh !important;
+}
+
+// Viewport width and height
+.fui-w-screen {
+  width: 100vw !important;
+}
+.fui-h-screen {
+  height: 100vh !important;
+}
+
+.fui-flex-2 {
+  flex: 2;
+}
+
+// Density utility classes
+.fui-density-comfortable {
+  --fui-density-scale: 1;
+}
+.fui-density-compact {
+  --fui-density-scale: 0.75;
+}

package/styles/partials/themes/_dark.scss

@@ -0,0 +1,254 @@
+// Dark theme color tokens
+@use '../constants' as *;
+
+@mixin fui-dark-theme {
+  // Primary violet colors (Figma: Violet palette — dark)
+  --fui-primary-10: #0e0b13;
+  --fui-primary-20: #17131f;
+  --fui-primary-30: #251e32;
+  --fui-primary-40: #352752;
+  --fui-primary-50: #875ddf;
+  --fui-primary-60: #a07fe5;
+  --fui-primary-70: #beafde;
+  --fui-primary-80: #d3c8e8;
+  --fui-primary-90: #e5e0ef;
+  --fui-primary-100: #f0eef6;
+  --fui-primary-110: #f9f8fb;
+  --fui-primary: var(--fui-primary-50);
+  --fui-primary-rgb: 135, 93, 223;
+  --fui-primary-text-color: white;
+  --fui-primary-text: white;
+
+  // Secondary slate colors (Figma: Slate palette — dark)
+  --fui-secondary-10: #121113;
+  --fui-secondary-20: #1a191b;
+  --fui-secondary-30: #232225;
+  --fui-secondary-40: #2b292d;
+  --fui-secondary-50: #323035;
+  --fui-secondary-60: #3c393f;
+  --fui-secondary-70: #49474e;
+  --fui-secondary-80: #625f69;
+  --fui-secondary-90: #6f6d78;
+  --fui-secondary-100: #7c7a85;
+  --fui-secondary-110: #b5b2bc;
+  --fui-secondary-120: #eeeef0;
+  --fui-secondary: var(--fui-secondary-60);
+
+  // Danger color palette (Figma: Red-Danger — dark)
+  --fui-danger-10: #191111;
+  --fui-danger-20: #201314;
+  --fui-danger-30: #3b1219;
+  --fui-danger-40: #500f1c;
+  --fui-danger-50: #611623;
+  --fui-danger-60: #72232d;
+  --fui-danger-70: #8c333a;
+  --fui-danger-80: #b54548;
+  --fui-danger-90: #e5484d;
+  --fui-danger-100: #ff9592;
+  --fui-danger-110: #ffd1d9;
+  --fui-danger: var(--fui-danger-60);
+
+  // Success color palette (Figma: Green-success — dark)
+  --fui-success-10: #0d1512;
+  --fui-success-20: #121c18;
+  --fui-success-30: #0f2e22;
+  --fui-success-40: #0b3b2c;
+  --fui-success-50: #114837;
+  --fui-success-60: #1b5745;
+  --fui-success-70: #246854;
+  --fui-success-80: #2a7e68;
+  --fui-success-90: #29a383;
+  --fui-success-100: #1fd8a4;
+  --fui-success-110: #adf0d4;
+  --fui-success: var(--fui-success-60);
+
+  // Warning color palette (Figma: Yellow-warning — dark)
+  --fui-warning-10: #16120c;
+  --fui-warning-20: #1c1812;
+  --fui-warning-30: #302008;
+  --fui-warning-40: #3e2700;
+  --fui-warning-50: #4c3000;
+  --fui-warning-60: #5b3d06;
+  --fui-warning-70: #704f1a;
+  --fui-warning-80: #8f6424;
+  --fui-warning-90: #ffc53d;
+  --fui-warning-100: #ffd60a;
+  --fui-warning-110: #ffe7b3;
+  --fui-warning: var(--fui-warning-60);
+
+  // Info color palette (Figma: Blue-info — dark)
+  --fui-info-10: #0d1520;
+  --fui-info-20: #111927;
+  --fui-info-30: #0d2847;
+  --fui-info-40: #003362;
+  --fui-info-50: #004074;
+  --fui-info-60: #104d87;
+  --fui-info-70: #205d9e;
+  --fui-info-80: #2870bd;
+  --fui-info-90: #0090ff;
+  --fui-info-100: #70b8ff;
+  --fui-info-110: #c2e6ff;
+  --fui-info: var(--fui-info-60);
+
+  // Pink color palette (NEW — Figma: Pink — dark)
+  --fui-pink-10: #191117;
+  --fui-pink-20: #21121d;
+  --fui-pink-30: #37172f;
+  --fui-pink-40: #4b143d;
+  --fui-pink-50: #591c47;
+  --fui-pink-60: #692955;
+  --fui-pink-70: #833869;
+  --fui-pink-80: #a84885;
+  --fui-pink-90: #d6409f;
+  --fui-pink-100: #ff8dcc;
+  --fui-pink-110: #fdd1ea;
+
+  // Orange color palette (NEW — Figma: Orange — dark)
+  --fui-orange-10: #17120e;
+  --fui-orange-20: #1c1712;
+  --fui-orange-30: #331e0b;
+  --fui-orange-40: #462000;
+  --fui-orange-50: #562800;
+  --fui-orange-60: #66350e;
+  --fui-orange-70: #7e451e;
+  --fui-orange-80: #a35829;
+  --fui-orange-90: #f76b15;
+  --fui-orange-100: #ffa057;
+  --fui-orange-110: #ffe0c2;
+
+  // Tomato color palette (NEW — Figma: Tomato — dark)
+  --fui-tomato-10: #181111;
+  --fui-tomato-20: #1f1513;
+  --fui-tomato-30: #391714;
+  --fui-tomato-40: #4e1511;
+  --fui-tomato-50: #5e1c16;
+  --fui-tomato-60: #6e2920;
+  --fui-tomato-70: #853a2d;
+  --fui-tomato-80: #ac4d39;
+  --fui-tomato-90: #e54d2e;
+  --fui-tomato-100: #ec6142;
+  --fui-tomato-110: #ff977d;
+  --fui-tomato-120: #fbd3cb;
+
+  // Base colors (inverted for dark theme)
+  --fui-white: #000000;
+  --fui-black: #ffffff;
+
+  // Black opacity variants (inverted: white with alpha for dark theme)
+  --fui-black-5: rgba(255, 255, 255, 0.05);
+  --fui-black-10: rgba(255, 255, 255, 0.1);
+  --fui-black-15: rgba(255, 255, 255, 0.15);
+  --fui-black-20: rgba(255, 255, 255, 0.2);
+  --fui-black-30: rgba(255, 255, 255, 0.3);
+  --fui-black-40: rgba(255, 255, 255, 0.4);
+  --fui-black-50: rgba(255, 255, 255, 0.5);
+  --fui-black-60: rgba(255, 255, 255, 0.6);
+  --fui-black-70: rgba(255, 255, 255, 0.7);
+  --fui-black-80: rgba(255, 255, 255, 0.8);
+  --fui-black-90: rgba(255, 255, 255, 0.9);
+
+  // White opacity variants (inverted: black with alpha for dark theme)
+  --fui-white-5: rgba(0, 0, 0, 0.05);
+  --fui-white-10: rgba(0, 0, 0, 0.1);
+  --fui-white-15: rgba(0, 0, 0, 0.15);
+  --fui-white-20: rgba(0, 0, 0, 0.2);
+  --fui-white-30: rgba(0, 0, 0, 0.3);
+  --fui-white-40: rgba(0, 0, 0, 0.4);
+  --fui-white-50: rgba(0, 0, 0, 0.5);
+  --fui-white-60: rgba(0, 0, 0, 0.6);
+  --fui-white-70: rgba(0, 0, 0, 0.7);
+  --fui-white-80: rgba(0, 0, 0, 0.8);
+  --fui-white-90: rgba(0, 0, 0, 0.9);
+
+  // Text disabled
+  --fui-text-disabled: var(--fui-secondary-100);
+
+  // Border color
+  --fui-border-color: var(--fui-secondary-50);
+
+  // Surface tokens (Figma: forma-surface)
+  --fui-surface-bg: var(--fui-secondary-20);
+  --fui-surface-card: var(--fui-white);
+  --fui-surface-01: var(--fui-secondary-10);
+  --fui-surface-02: var(--fui-secondary-20);
+  --fui-surface-03: var(--fui-secondary-30);
+  --fui-surface-04: var(--fui-secondary-40);
+
+  // Backward-compatible surface aliases
+  --fui-surface-00: var(--fui-surface-card);
+  --fui-bg: var(--fui-surface-bg);
+  --fui-surface-05: var(--fui-secondary-50);
+
+  // Text colors
+  --fui-text-primary: var(--fui-secondary-120);
+  --fui-text-secondary: var(--fui-secondary-110);
+
+  // Primary component states (Figma: forma-primary semantic)
+  --fui-primary-default: var(--fui-primary-50);
+  --fui-primary-disable: var(--fui-primary-40);
+  --fui-primary-bg: var(--fui-primary-20);
+  --fui-primary-hover: var(--fui-primary-60);
+  --fui-primary-highlights: var(--fui-primary-30);
+
+  // Secondary component states (Figma: forma-secondary semantic)
+  --fui-secondary-default: var(--fui-secondary-60);
+  --fui-secondary-hover: var(--fui-secondary-90);
+  --fui-secondary-disable: var(--fui-secondary-30);
+  --fui-secondary-bg: var(--fui-secondary-20);
+  --fui-secondary-highlights: var(--fui-secondary-20);
+
+  // State colors - Error
+  --fui-state-error: var(--fui-danger-90);
+  --fui-state-error-bg: var(--fui-danger-30);
+  --fui-state-error-hover: var(--fui-danger-110);
+
+  // State colors - Success
+  --fui-state-success: var(--fui-success-110);
+  --fui-state-success-bg: var(--fui-success-30);
+  --fui-state-success-hover: var(--fui-success-110);
+
+  // State colors - Warning
+  --fui-state-warning: var(--fui-warning-110);
+  --fui-state-warning-bg: var(--fui-warning-30);
+  --fui-state-warning-hover: var(--fui-warning-110);
+
+  // State colors - Info
+  --fui-state-info: var(--fui-info-110);
+  --fui-state-info-bg: var(--fui-info-30);
+  --fui-state-info-hover: var(--fui-info-110);
+
+  // Border - strong variant (for hover emphasis)
+  --fui-border-color-strong: var(--fui-secondary-70);
+
+  // Border - active variant (for focus/active states)
+  --fui-border-color-active: var(--fui-primary-default);
+
+  // Form field semantic colors
+  --fui-field-background: var(--fui-surface-00);
+  --fui-field-background-hover: var(--fui-surface-01);
+  --fui-field-background-disabled: var(--fui-surface-02);
+  --fui-field-border-focus: var(--fui-primary-50);
+  --fui-field-border-error: var(--fui-state-error);
+
+  // Icon semantic colors
+  --fui-icon-primary: var(--fui-text-primary);
+  --fui-icon-secondary: var(--fui-text-secondary);
+  --fui-icon-tertiary: var(--fui-secondary-80);
+  --fui-icon-on-color-disabled: var(--fui-text-disabled);
+
+  // Background semantic aliases
+  --fui-background-primary: var(--fui-surface-00);
+  --fui-background-hover: var(--fui-surface-02);
+
+  // Text semantic aliases
+  --fui-text-primary-disabled: var(--fui-text-disabled);
+
+  // Error shorthand
+  --fui-error: var(--fui-state-error);
+
+  // Card component tokens
+  --fui-card-padding: var(--fui-spacing-06);
+  --fui-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --fui-card-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --fui-card-border-radius: var(--fui-border-radius-md);
+}