@raintonic/formaui 0.2.0

package/styles/partials/_grid.scss

@@ -0,0 +1,171 @@
+// Grid system based on Bootstrap principles
+@use 'sass:math';
+@use './constants' as *;
+@use './mixins' as *;
+
+// Container
+.fui-container {
+  width: 100%;
+  padding-right: calc(var(--fui-gutter-x, #{$fui-grid-gutter}) * 0.5);
+  padding-left: calc(var(--fui-gutter-x, #{$fui-grid-gutter}) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.fui-container-sm {
+  max-width: 540px;
+}
+
+.fui-container-md {
+  max-width: 720px;
+}
+
+.fui-container-lg {
+  max-width: 960px;
+}
+
+.fui-container-xl {
+  max-width: 1140px;
+}
+
+.fui-container-xxl {
+  max-width: $fui-container-max-width;
+}
+
+.fui-container-fluid {
+  max-width: none;
+}
+
+// Row
+.fui-row {
+  --fui-gutter-x: #{$fui-grid-gutter};
+  --fui-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--fui-gutter-y));
+  margin-right: calc(-0.5 * var(--fui-gutter-x));
+  margin-left: calc(-0.5 * var(--fui-gutter-x));
+}
+
+.fui-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--fui-gutter-x) * 0.5);
+  padding-left: calc(var(--fui-gutter-x) * 0.5);
+  margin-top: var(--fui-gutter-y);
+}
+
+// Columns
+.fui-col {
+  flex: 1 0 0%;
+}
+
+.fui-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+// Generate column classes
+@for $i from 1 through $fui-grid-columns {
+  .fui-col-#{$i} {
+    flex: 0 0 auto;
+    width: math.div(100% * $i, $fui-grid-columns);
+  }
+}
+
+// Responsive columns
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    .fui-col-#{$breakpoint} {
+      flex: 1 0 0%;
+    }
+
+    .fui-col-#{$breakpoint}-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through $fui-grid-columns {
+      .fui-col-#{$breakpoint}-#{$i} {
+        flex: 0 0 auto;
+        width: math.div(100% * $i, $fui-grid-columns);
+      }
+    }
+  }
+}
+
+// Offset classes
+@for $i from 0 through ($fui-grid-columns - 1) {
+  .fui-offset-#{$i} {
+    @if $i > 0 {
+      margin-left: math.div(100% * $i, $fui-grid-columns);
+    } @else {
+      margin-left: 0;
+    }
+  }
+}
+
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    @for $i from 0 through ($fui-grid-columns - 1) {
+      .fui-offset-#{$breakpoint}-#{$i} {
+        @if $i > 0 {
+          margin-left: math.div(100% * $i, $fui-grid-columns);
+        } @else {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+// Gutters
+.fui-g-0,
+.fui-gx-0 {
+  --fui-gutter-x: 0;
+}
+
+.fui-g-0,
+.fui-gy-0 {
+  --fui-gutter-y: 0;
+}
+
+@for $i from 1 through 5 {
+  .fui-g-#{$i},
+  .fui-gx-#{$i} {
+    --fui-gutter-x: #{$fui-spacing-03 * $i};
+  }
+
+  .fui-g-#{$i},
+  .fui-gy-#{$i} {
+    --fui-gutter-y: #{$fui-spacing-03 * $i};
+  }
+}
+
+// Responsive gutters
+@each $breakpoint in (sm, md, lg, xl, xxl) {
+  @include fui-breakpoint($breakpoint) {
+    .fui-g-#{$breakpoint}-0,
+    .fui-gx-#{$breakpoint}-0 {
+      --fui-gutter-x: 0;
+    }
+
+    .fui-g-#{$breakpoint}-0,
+    .fui-gy-#{$breakpoint}-0 {
+      --fui-gutter-y: 0;
+    }
+
+    @for $i from 1 through 5 {
+      .fui-g-#{$breakpoint}-#{$i},
+      .fui-gx-#{$breakpoint}-#{$i} {
+        --fui-gutter-x: #{$fui-spacing-03 * $i};
+      }
+
+      .fui-g-#{$breakpoint}-#{$i},
+      .fui-gy-#{$breakpoint}-#{$i} {
+        --fui-gutter-y: #{$fui-spacing-03 * $i};
+      }
+    }
+  }
+}

package/styles/partials/_mixins.scss

@@ -0,0 +1,145 @@
+// Mixins for common patterns
+@use 'sass:color';
+@use './constants' as *;
+
+// Focus ring mixin (Carbon Design System style)
+@mixin fui-focus-ring($offset: 2px) {
+  outline: 2px solid var(--fui-primary);
+  outline-offset: $offset;
+}
+
+// Button reset mixin
+@mixin fui-button-reset {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+
+  &:focus-visible {
+    @include fui-focus-ring();
+  }
+}
+
+// Visually hidden (for accessibility)
+@mixin fui-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Truncate text
+@mixin fui-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Flex center
+@mixin fui-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Responsive breakpoint mixin
+@mixin fui-breakpoint($size) {
+  @if $size == xs {
+    @media (min-width: #{$fui-breakpoint-xs}) {
+      @content;
+    }
+  }
+  @if $size == sm {
+    @media (min-width: #{$fui-breakpoint-sm}) {
+      @content;
+    }
+  }
+  @if $size == md {
+    @media (min-width: #{$fui-breakpoint-md}) {
+      @content;
+    }
+  }
+  @if $size == lg {
+    @media (min-width: #{$fui-breakpoint-lg}) {
+      @content;
+    }
+  }
+  @if $size == xl {
+    @media (min-width: #{$fui-breakpoint-xl}) {
+      @content;
+    }
+  }
+  @if $size == xxl {
+    @media (min-width: #{$fui-breakpoint-xxl}) {
+      @content;
+    }
+  }
+}
+
+// Animation mixin is now in _motion.scss
+
+// Surface elevation system
+// Combines shadow and surface color changes to create depth hierarchy
+@mixin fui-elevation($level: 1) {
+  @if $level == 0 {
+    box-shadow: none;
+    background-color: var(--fui-surface-00);
+  } @else if $level == 1 {
+    box-shadow: var(--fui-shadow-01);
+    background-color: var(--fui-surface-01);
+  } @else if $level == 2 {
+    box-shadow: var(--fui-shadow-02);
+    background-color: var(--fui-surface-02);
+  } @else if $level == 3 {
+    box-shadow: var(--fui-shadow-03);
+    background-color: var(--fui-surface-03);
+  } @else if $level == 4 {
+    box-shadow: var(--fui-shadow-04);
+    background-color: var(--fui-surface-04);
+  } @else if $level == 5 {
+    box-shadow: var(--fui-shadow-05);
+    background-color: var(--fui-surface-05);
+  }
+}
+
+// Surface elevation without background color change (for components that need custom backgrounds)
+@mixin fui-elevation-shadow-only($level: 1) {
+  @if $level == 0 {
+    box-shadow: none;
+  } @else if $level == 1 {
+    box-shadow: var(--fui-shadow-01);
+  } @else if $level == 2 {
+    box-shadow: var(--fui-shadow-02);
+  } @else if $level == 3 {
+    box-shadow: var(--fui-shadow-03);
+  } @else if $level == 4 {
+    box-shadow: var(--fui-shadow-04);
+  } @else if $level == 5 {
+    box-shadow: var(--fui-shadow-05);
+  }
+}
+
+// Generate color palette from base color
+@function fui-generate-palette($base-color) {
+  @return (
+    50: color.mix(white, $base-color, 95%),
+    100: color.mix(white, $base-color, 85%),
+    200: color.mix(white, $base-color, 70%),
+    300: color.mix(white, $base-color, 50%),
+    400: color.mix(white, $base-color, 25%),
+    500: $base-color,
+    600: color.mix(black, $base-color, 15%),
+    700: color.mix(black, $base-color, 30%),
+    800: color.mix(black, $base-color, 50%),
+    900: color.mix(black, $base-color, 70%)
+  );
+}

package/styles/partials/_motion.scss

@@ -0,0 +1,252 @@
+// Motion system based on Carbon Design System
+// Provides consistent animation patterns across all components
+
+// Motion CSS variables are defined in _theme-variables.scss to avoid duplication.
+
+// Motion mixins
+@mixin fui-motion(
+  $property: all,
+  $duration: var(--fui-duration-moderate-01),
+  $easing: var(--fui-ease-standard),
+  $delay: 0ms
+) {
+  transition: $property $duration $easing $delay;
+}
+
+// Specific motion patterns
+@mixin fui-motion-fade-in {
+  @include fui-motion(opacity, var(--fui-duration-fast-02), var(--fui-ease-entrance));
+}
+
+@mixin fui-motion-fade-out {
+  @include fui-motion(opacity, var(--fui-duration-fast-01), var(--fui-ease-exit));
+}
+
+@mixin fui-motion-slide-in($direction: 'bottom') {
+  @if $direction == 'bottom' {
+    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    transform: translateY(0);
+
+    &.fui-motion-entering {
+      transform: translateY(1rem);
+    }
+  } @else if $direction == 'top' {
+    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    transform: translateY(0);
+
+    &.fui-motion-entering {
+      transform: translateY(-1rem);
+    }
+  } @else if $direction == 'left' {
+    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    transform: translateX(0);
+
+    &.fui-motion-entering {
+      transform: translateX(-1rem);
+    }
+  } @else if $direction == 'right' {
+    @include fui-motion(transform, var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+    transform: translateX(0);
+
+    &.fui-motion-entering {
+      transform: translateX(1rem);
+    }
+  }
+}
+
+@mixin fui-motion-scale-in {
+  @include fui-motion((transform, opacity), var(--fui-duration-moderate-01), var(--fui-ease-entrance));
+  transform: scale(1);
+  opacity: 1;
+
+  &.fui-motion-entering {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+@mixin fui-motion-expand($direction: 'vertical') {
+  @if $direction == 'vertical' {
+    @include fui-motion(max-height, var(--fui-duration-moderate-02), var(--fui-ease-standard));
+    overflow: hidden;
+  } @else if $direction == 'horizontal' {
+    @include fui-motion(max-width, var(--fui-duration-moderate-02), var(--fui-ease-standard));
+    overflow: hidden;
+  }
+}
+
+// Ripple effect for interactive elements
+@mixin fui-ripple {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background-color: currentColor;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition:
+      width var(--fui-duration-slow-01) var(--fui-ease-expressive),
+      height var(--fui-duration-slow-01) var(--fui-ease-expressive),
+      opacity var(--fui-duration-slow-01) var(--fui-ease-standard);
+  }
+
+  &:active::before {
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+  }
+}
+
+// Skeleton loading animation
+@keyframes fui-skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin fui-skeleton-loading {
+  animation: fui-skeleton-pulse 1.5s ease-in-out infinite;
+  background-color: var(--fui-surface-05);
+  border-radius: var(--fui-border-radius-md);
+}
+
+// Focus transition
+@mixin fui-focus-transition {
+  transition:
+    box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard),
+    outline var(--fui-duration-fast-02) var(--fui-ease-standard);
+}
+
+// Hover lift effect
+@mixin fui-hover-lift {
+  transition:
+    transform var(--fui-duration-fast-02) var(--fui-ease-standard),
+    box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Disabled state transition
+@mixin fui-disabled-transition {
+  transition:
+    opacity var(--fui-duration-fast-02) var(--fui-ease-standard),
+    cursor var(--fui-duration-fast-02) var(--fui-ease-standard);
+}
+
+// Loading spinner
+@keyframes fui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin fui-loading-spinner {
+  animation: fui-spin 1s linear infinite;
+}
+
+// Shake animation for errors
+@keyframes fui-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-2px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(2px);
+  }
+}
+
+@mixin fui-error-shake {
+  animation: fui-shake var(--fui-duration-slow-01) var(--fui-ease-standard);
+}
+
+// Utility classes for motion
+.fui-motion-fade-in {
+  @include fui-motion-fade-in;
+}
+
+.fui-motion-fade-out {
+  @include fui-motion-fade-out;
+}
+
+.fui-motion-slide-in-bottom {
+  @include fui-motion-slide-in('bottom');
+}
+
+.fui-motion-slide-in-top {
+  @include fui-motion-slide-in('top');
+}
+
+.fui-motion-scale-in {
+  @include fui-motion-scale-in;
+}
+
+.fui-no-motion {
+  transition: none !important;
+  animation: none !important;
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// General pulse keyframes for scale/opacity pulsing used by icons and others
+@keyframes fui-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Slide-in animation (merged from _animations.scss)
+@keyframes fui-slide-in {
+  from {
+    transform: translateX(120%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.fui-slide-in {
+  animation: fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance);
+}