@raintonic/formaui 0.4.0 → 0.9.0

package/styles/partials/components/_button.scss

@@ -6,17 +6,17 @@
 .fui-button {
   // Component tokens with fallbacks
   --fui-button-height: var(--fui-button-height-md);
-  --fui-button-font-size: var(--fui-font-size-02);
-  --fui-button-border-radius: var(--fui-border-radius-sm);
-  --fui-button-padding-x: var(--fui-spacing-05);
-  --fui-button-padding-y: var(--fui-spacing-03);
-  --fui-button-gap: var(--fui-spacing-03);
-  --fui-button-font-weight: var(--fui-font-weight-semibold);
-  --fui-button-letter-spacing: var(--fui-letter-spacing-wide);
+  --fui-button-font-size: var(--fui-text-base);
+  --fui-button-border-radius: var(--fui-radius-sm);
+  --fui-button-padding-x: var(--fui-spacing-7);
+  --fui-button-padding-y: var(--fui-spacing-4);
+  --fui-button-gap: var(--fui-spacing-4);
+  --fui-button-font-weight: var(--fui-weight-medium);
+  --fui-button-letter-spacing: var(--fui-tracking-wide);
 
   // Default spinner/text foreground used during loading
   @include mixins.fui-button-reset();
-  @include motion.fui-motion(all, var(--fui-duration-fast-02));
+  @include motion.fui-motion(all, var(--fui-duration-fast));
 
   position: relative;
   display: inline-flex;
@@ -25,7 +25,7 @@
   gap: var(--fui-button-gap);
   overflow: hidden;
 
-  font-family: var(--fui-font-family-sans);
+  font-family: var(--fui-font-sans);
   font-weight: var(--fui-button-font-weight);
   text-decoration: none;
   text-align: center;
@@ -50,12 +50,12 @@
   }
 
   &__spinner-icon {
-    width: var(--fui-icon-size-sm);
-    height: var(--fui-icon-size-sm);
+    width: var(--fui-icon-xs);
+    height: var(--fui-icon-xs);
     border: 2px solid currentColor;
     border-top-color: transparent;
     border-radius: 50%;
-    animation: fui-spin var(--fui-duration-slow-02) linear infinite;
+    animation: fui-spin var(--fui-duration-deliberate) linear infinite;
   }
 
   &__leading {
@@ -66,11 +66,10 @@
   &__ripple {
     position: absolute;
     border-radius: 50%;
-    background-color: currentColor;
-    opacity: 0.35;
+    background-color: white;
+    opacity: 0.2;
     pointer-events: none;
-    transform: scale(0);
-    animation: fui-button-ripple var(--fui-duration-slow-01, 400ms) ease-out forwards;
+    animation: fui-button-ripple var(--fui-duration-slow, 400ms) ease-out forwards;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -96,7 +95,7 @@
   // States
   &--disabled {
     cursor: not-allowed;
-    opacity: var(--fui-opacity-disabled);
+    /* opacity: var(--fui-state-disabled-opacity); */
   }
 
   &--loading {
@@ -122,81 +121,81 @@
   // Sizes
   &--sm {
     min-height: var(--fui-button-height-sm);
-    padding: calc(var(--fui-spacing-03) - 2px) var(--fui-spacing-03);
-    font-size: var(--fui-font-size-01);
+    padding: calc(var(--fui-spacing-4) - 2px) var(--fui-spacing-4);
+    font-size: var(--fui-text-sm);
 
     &.fui-button--icon-only {
       width: var(--fui-button-height-sm);
-      padding: calc(var(--fui-spacing-03) - 2px);
+      padding: calc(var(--fui-spacing-4) - 2px);
     }
 
     .fui-icon {
-      width: var(--fui-icon-size-sm);
-      height: var(--fui-icon-size-sm);
+      width: var(--fui-icon-xs);
+      height: var(--fui-icon-xs);
     }
   }
 
   &--md {
     min-height: var(--fui-button-height-md);
-    padding: var(--fui-spacing-03) var(--fui-spacing-05);
-    font-size: var(--fui-font-size-02);
+    padding: var(--fui-spacing-4) var(--fui-spacing-7);
+    font-size: var(--fui-text-base);
 
     &.fui-button--icon-only {
       width: var(--fui-button-height-md);
-      padding: var(--fui-spacing-03);
+      padding: var(--fui-spacing-4);
     }
 
     .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
+      width: var(--fui-icon-md);
+      height: var(--fui-icon-md);
     }
   }
 
   &--lg {
     min-height: var(--fui-button-height-lg);
-    padding: calc(var(--fui-spacing-04) - 2px) var(--fui-spacing-05);
-    font-size: var(--fui-font-size-03);
+    padding: calc(var(--fui-spacing-6) - 2px) var(--fui-spacing-7);
+    font-size: var(--fui-text-md);
 
     &.fui-button--icon-only {
       width: var(--fui-button-height-lg);
-      padding: calc(var(--fui-spacing-04) - 2px);
+      padding: calc(var(--fui-spacing-6) - 2px);
     }
 
     .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
+      width: var(--fui-icon-md);
+      height: var(--fui-icon-md);
     }
   }
 
   &--xl {
     min-height: var(--fui-button-height-xl);
-    padding: var(--fui-spacing-04) var(--fui-spacing-06);
-    font-size: var(--fui-font-size-03);
+    padding: var(--fui-spacing-6) var(--fui-spacing-9);
+    font-size: var(--fui-text-md);
 
     &.fui-button--icon-only {
       width: var(--fui-button-height-xl);
-      padding: var(--fui-spacing-04);
+      padding: var(--fui-spacing-6);
     }
 
     .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
+      width: var(--fui-icon-md);
+      height: var(--fui-icon-md);
     }
   }
 
   &--2xl {
     min-height: var(--fui-button-height-2xl);
-    padding: var(--fui-spacing-05) var(--fui-spacing-06);
-    font-size: var(--fui-font-size-03);
+    padding: var(--fui-spacing-7) var(--fui-spacing-9);
+    font-size: var(--fui-text-md);
 
     &.fui-button--icon-only {
       width: var(--fui-button-height-2xl);
-      padding: var(--fui-spacing-05);
+      padding: var(--fui-spacing-7);
     }
 
     .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
+      width: var(--fui-icon-md);
+      height: var(--fui-icon-md);
     }
   }
 
@@ -205,97 +204,152 @@
 
   // Primary — solid violet
   &--primary {
-    background-color: var(--fui-primary-default);
-    color: var(--fui-primary-text);
+    background-color: var(--fui-primary-bg);
+    color: var(--fui-text-on-fill);
     border-color: transparent;
-    box-shadow: var(--fui-shadow-02);
+    box-shadow: var(--fui-shadow-sm);
 
     &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-hover);
-      box-shadow: var(--fui-shadow-03);
+      background-color: var(--fui-primary-bg-hover);
+      box-shadow: var(--fui-shadow-md);
     }
 
     &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-hover);
+      background-color: var(--fui-primary-bg-hover);
       box-shadow: none;
     }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-bg-disable);
+      color: var(--fui-text-disabled);
+    }
   }
 
-  // Secondary — white bg with border
-  &--secondary {
-    background-color: var(--fui-surface-card);
+  // Accent
+  &--accent {
+    background-color: var(--fui-accent-bg);
     color: var(--fui-text-primary);
-    box-shadow: inset 0 0 0 var(--fui-border-width-md) var(--fui-border-color);
 
     &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-02);
+      background-color: var(--fui-accent-hover);
+      color: var(--fui-text-inverse);
     }
 
     &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-02);
+      background-color: var(--fui-accent-hover);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-bg-disable);
+      color: var(--fui-text-disabled);
+    }
+
+    .fui-button__ripple {
+      background-color: var(--fui-accent-50);
+      opacity: 0.35;
+      animation-name: fui-button-ripple-solid;
     }
   }
 
   // Tertiary — neutral text, no bg/border
   &--tertiary {
     background-color: transparent;
-    color: var(--fui-tertiary-text);
+    color: var(--fui-text-primary);
     border-color: transparent;
 
     &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-tertiary-hover-bg);
+      background-color: var(--fui-primary-muted);
     }
 
     &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-tertiary-hover-bg);
+      background-color: var(--fui-primary-muted);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-bg-default);
+      color: var(--fui-text-disabled);
+    }
+
+    .fui-button__ripple {
+      background-color: var(--fui-primary-30);
+      opacity: 0.45;
     }
   }
 
   // Tertiary-violet — violet text, no bg/border
-  &--tertiary-violet {
+  &--link {
     background-color: transparent;
-    color: var(--fui-tertiary-violet-text);
+    color: var(--fui-primary-fg);
     border-color: transparent;
 
     &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-tertiary-violet-hover-bg);
+      text-decoration: underline;
     }
 
     &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-tertiary-violet-hover-bg);
+    }
+
+    &.fui-button--disabled {
+      color: var(--fui-text-disabled);
+    }
+
+    .fui-button__ripple {
+      background-color: var(--fui-primary-30);
+      opacity: 0.35;
     }
   }
 
-  // Link — underlined violet text on hover
-  &--link {
+  // Outline — bordered, no fill
+  &--outline {
     background-color: transparent;
-    color: var(--fui-primary);
+    border: 1px solid var(--fui-border-default);
+    color: var(--fui-text-primary);
 
     &:hover:not(.fui-button--disabled) {
-      text-decoration: underline;
+      background-color: var(--fui-primary-muted);
     }
 
     &:active:not(.fui-button--disabled) {
-      text-decoration: underline;
+      background-color: var(--fui-primary-muted);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-bg-default);
+      color: var(--fui-text-disabled);
+    }
+
+    .fui-button__ripple {
+      background-color: var(--fui-primary-30);
+      opacity: 0.45;
     }
   }
 
   // Destructive — solid red
   &--destructive {
-    background-color: var(--fui-destructive-default);
-    color: var(--fui-destructive-text);
+    background-color: var(--fui-fill-error);
+    color: var(--fui-text-on-fill);
     border-color: transparent;
-    box-shadow: var(--fui-shadow-02);
+    box-shadow: var(--fui-shadow-sm);
 
     &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-destructive-hover);
-      box-shadow: var(--fui-shadow-03);
+      background-color: var(--fui-fill-error-hover);
+      box-shadow: var(--fui-shadow-md);
     }
 
     &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-destructive-hover);
+      background-color: var(--fui-fill-error-hover);
       box-shadow: none;
     }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-bg-disable);
+      color: var(--fui-text-disabled);
+    }
+
+    .fui-button__ripple {
+      background-color: var(--fui-error-30);
+      opacity: 0.3;
+    }
   }
 
   // Icon adjustments
@@ -313,11 +367,11 @@
   flex-shrink: 0;
 
   &[fuiPrefix] {
-    margin-right: var(--fui-spacing-02);
+    margin-right: var(--fui-spacing-2);
   }
 
   &[fuiSuffix] {
-    margin-left: var(--fui-spacing-02);
+    margin-left: var(--fui-spacing-2);
   }
 }
 
@@ -345,8 +399,23 @@
 }
 
 @keyframes fui-button-ripple {
+  from {
+    transform: scale(0.3);
+    opacity: 0.2;
+  }
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes fui-button-ripple-solid {
+  from {
+    transform: scale(0.3);
+    opacity: 0.35;
+  }
   to {
-    transform: scale(2.5);
+    transform: scale(4);
     opacity: 0;
   }
 }