@raintonic/formaui 0.2.1 → 0.3.0

package/styles/partials/components/_button.scss

@@ -1,367 +1,361 @@
-// Button component styles aligned with theme tokens
-@use '../constants' as *;
-@use '../mixins' as mixins;
-@use '../motion' as motion;
-
-.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);
-
-  // Default spinner/text foreground used during loading
-  @include mixins.fui-button-reset();
-  @include motion.fui-motion(all, var(--fui-duration-fast-02));
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--fui-button-gap);
-  overflow: hidden;
-
-  font-family: var(--fui-font-family-sans);
-  font-weight: var(--fui-button-font-weight);
-  text-decoration: none;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-  user-select: none;
-  letter-spacing: var(--fui-button-letter-spacing);
-  border-radius: var(--fui-button-border-radius);
-  box-sizing: border-box;
-  cursor: pointer;
-  min-height: var(--fui-button-height);
-
-  &:focus-visible {
-    @include mixins.fui-focus-ring();
-  }
-
-  // Loading spinner
-  &__spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__spinner-icon {
-    width: var(--fui-icon-size-sm);
-    height: var(--fui-icon-size-sm);
-    border: 2px solid var(--fui-text-primary);
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: fui-spin var(--fui-duration-slow-02) linear infinite;
-  }
-
-  // WCAG 2.1 AA: ensure minimum 44x44px touch target for smaller sizes
-  // Uses a pseudo-element so visual size remains unchanged
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 50% auto auto 50%;
-    min-width: 44px;
-    min-height: 44px;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-  }
-
-  // States
-  &--disabled {
-    cursor: not-allowed;
-    opacity: var(--fui-opacity-disabled);
-  }
-
-  &--loading {
-    color: transparent !important;
-    cursor: wait;
-  }
-
-  &--full-width {
-    width: 100%;
-  }
-
-  // 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);
-
-    &.fui-button--icon-only {
-      width: var(--fui-button-height-sm);
-      padding: calc(var(--fui-spacing-03) - 2px);
-    }
-
-    .fui-icon {
-      width: var(--fui-icon-size-sm);
-      height: var(--fui-icon-size-sm);
-    }
-  }
-
-  &--md {
-    min-height: var(--fui-button-height-md);
-    padding: calc(var(--fui-spacing-03) + 2px) var(--fui-spacing-05);
-    font-size: var(--fui-font-size-02);
-
-    &.fui-button--icon-only {
-      padding: calc(var(--fui-spacing-03) + 2px);
-    }
-
-    .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-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);
-
-    &.fui-button--icon-only {
-      width: var(--fui-button-height-lg);
-      padding: calc(var(--fui-spacing-04) - 2px);
-    }
-
-    .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-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);
-
-    &.fui-button--icon-only {
-      width: var(--fui-button-height-xl);
-      padding: var(--fui-spacing-04);
-    }
-
-    .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
-    }
-  }
-
-  &--2xl {
-    min-height: var(--fui-spacing-11);
-    padding: var(--fui-spacing-05) var(--fui-spacing-06);
-    font-size: var(--fui-font-size-03);
-
-    &.fui-button--icon-only {
-      width: var(--fui-spacing-11);
-      padding: var(--fui-spacing-05);
-    }
-
-    .fui-icon {
-      width: var(--fui-icon-size-md);
-      height: var(--fui-icon-size-md);
-    }
-  }
-
-  &--field {
-    min-height: var(--fui-input-height); // matches form field height
-    padding: calc(var(--fui-spacing-03) + 2px) var(--fui-spacing-04);
-    font-size: var(--fui-font-size-02);
-
-    &.fui-button--icon-only {
-      width: var(--fui-input-height);
-      padding: calc(var(--fui-spacing-03) + 2px);
-    }
-  }
-
-  // Variant and Kind combinations
-
-  // Primary variant
-  &--primary {
-    background-color: var(--fui-primary);
-    color: var(--fui-primary-text);
-    border-color: transparent;
-    letter-spacing: var(--fui-letter-spacing-wide);
-    box-shadow: var(--fui-shadow-02);
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-hover);
-      box-shadow: var(--fui-shadow-03);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-hover);
-      box-shadow: none;
-    }
-
-    &.fui-button--disabled {
-      background-color: var(--fui-primary);
-    }
-  }
-
-  // Secondary variant
-  &--secondary {
-    background-color: var(--fui-secondary-60);
-    color: var(--fui-text-primary);
-    border-color: var(--fui-border-color);
-    letter-spacing: var(--fui-letter-spacing-wide);
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-secondary-90);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-secondary-90);
-    }
-
-    &.fui-button--disabled {
-      background-color: var(--fui-secondary);
-    }
-  }
-
-  // Secondary variant
-  &--outline {
-    background-color: var(--fui-surface-01);
-    color: var(--fui-text-primary);
-    border: var(--fui-border-width-md) solid var(--fui-surface-03);
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-20);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-primary-20);
-    }
-
-    &.fui-button--disabled {
-      background-color: var(--fui-surface-01);
-    }
-  }
-
-  // Danger variant
-  &--danger {
-    background-color: var(--fui-danger-60);
-    color: var(--fui-text-primary);
-    border-color: transparent;
-    letter-spacing: var(--fui-letter-spacing-wide);
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-danger-80);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-danger-80);
-    }
-
-    &.fui-button--disabled {
-      background-color: var(--fui-danger-60);
-    }
-  }
-
-  // Ghost variant (neutral)
-  &--ghost {
-    background-color: transparent;
-    color: var(--fui-text-primary);
-    border-color: transparent;
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-02);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-05);
-    }
-  }
-
-  &--link {
-    background-color: transparent;
-    color: var(--fui-primary);
-
-    &:hover:not(.fui-button--disabled) {
-      text-decoration: underline;
-    }
-
-    &:active:not(.fui-button--disabled) {
-      text-decoration: underline;
-    }
-  }
-
-  // Icon variant (ghost-like with circular shape)
-  &--icon {
-    background-color: transparent;
-    color: var(--fui-text-primary);
-    border-color: transparent;
-    border-radius: 50%;
-    aspect-ratio: 1;
-    padding: 0;
-
-    &:hover:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-02);
-    }
-
-    &:active:not(.fui-button--disabled) {
-      background-color: var(--fui-surface-05);
-    }
-  }
-
-  // Icon adjustments
-  &--icon-only {
-    gap: 0;
-
-    .fui-icon {
-      margin: 0;
-    }
-  }
-}
-
-// Icon spacing within buttons
-.fui-icon {
-  flex-shrink: 0;
-
-  &[fuiPrefix] {
-    margin-right: var(--fui-spacing-02);
-  }
-
-  &[fuiSuffix] {
-    margin-left: var(--fui-spacing-02);
-  }
-}
-
-// High contrast mode support
-@media (prefers-contrast: more) {
-  .fui-button {
-    &--outlined {
-      border-width: 3px;
-    }
-
-    &:focus-visible {
-      outline-width: 3px;
-    }
-  }
-}
-
-// Keyframes
-@keyframes fui-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Print styles
-@media print {
-  .fui-button {
-    &__spinner {
-      display: none !important;
-    }
-  }
-}
+// Button component styles aligned with theme tokens
+@use '../constants' as *;
+@use '../mixins' as mixins;
+@use '../motion' as motion;
+
+.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);
+
+  // Default spinner/text foreground used during loading
+  @include mixins.fui-button-reset();
+  @include motion.fui-motion(all, var(--fui-duration-fast-02));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fui-button-gap);
+  overflow: hidden;
+
+  font-family: var(--fui-font-family-sans);
+  font-weight: var(--fui-button-font-weight);
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  letter-spacing: var(--fui-button-letter-spacing);
+  border-radius: var(--fui-button-border-radius);
+  box-sizing: border-box;
+  cursor: pointer;
+  min-height: var(--fui-button-height);
+
+  &:focus-visible {
+    @include mixins.fui-focus-ring();
+  }
+
+  // Loading spinner
+  &__spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__spinner-icon {
+    width: var(--fui-icon-size-sm);
+    height: var(--fui-icon-size-sm);
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: fui-spin var(--fui-duration-slow-02) linear infinite;
+  }
+
+  &__leading {
+    display: contents;
+  }
+
+  // Ripple effect on click
+  &__ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: currentColor;
+    opacity: 0.35;
+    pointer-events: none;
+    transform: scale(0);
+    animation: fui-button-ripple var(--fui-duration-slow-01, 400ms) ease-out forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__ripple {
+      animation: none;
+      display: none;
+    }
+  }
+
+  // WCAG 2.1 AA: ensure minimum 44x44px touch target for smaller sizes
+  // Uses a pseudo-element so visual size remains unchanged
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 50%;
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  // States
+  &--disabled {
+    cursor: not-allowed;
+    opacity: var(--fui-opacity-disabled);
+  }
+
+  &--loading {
+    cursor: wait;
+
+    .fui-button__leading {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    // Hide any user-supplied icon child except the spinner
+    > .fui-icon:not(.fui-button__spinner),
+    > fui-icon:not(.fui-button__spinner) {
+      display: none;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  // 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);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-sm);
+      padding: calc(var(--fui-spacing-03) - 2px);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-sm);
+      height: var(--fui-icon-size-sm);
+    }
+  }
+
+  &--md {
+    min-height: var(--fui-button-height-md);
+    padding: var(--fui-spacing-03) var(--fui-spacing-05);
+    font-size: var(--fui-font-size-02);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-md);
+      padding: var(--fui-spacing-03);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-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);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-lg);
+      padding: calc(var(--fui-spacing-04) - 2px);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-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);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-xl);
+      padding: var(--fui-spacing-04);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-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);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-2xl);
+      padding: var(--fui-spacing-05);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-md);
+    }
+  }
+
+  // Variant styles
+  // =============================================================================
+
+  // Primary — solid violet
+  &--primary {
+    background-color: var(--fui-primary-default);
+    color: var(--fui-primary-text);
+    border-color: transparent;
+    box-shadow: var(--fui-shadow-02);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-hover);
+      box-shadow: var(--fui-shadow-03);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-hover);
+      box-shadow: none;
+    }
+  }
+
+  // Secondary — white bg with border
+  &--secondary {
+    background-color: var(--fui-surface-card);
+    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);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-surface-02);
+    }
+  }
+
+  // Tertiary — neutral text, no bg/border
+  &--tertiary {
+    background-color: transparent;
+    color: var(--fui-tertiary-text);
+    border-color: transparent;
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-tertiary-hover-bg);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-tertiary-hover-bg);
+    }
+  }
+
+  // Tertiary-violet — violet text, no bg/border
+  &--tertiary-violet {
+    background-color: transparent;
+    color: var(--fui-tertiary-violet-text);
+    border-color: transparent;
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-tertiary-violet-hover-bg);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-tertiary-violet-hover-bg);
+    }
+  }
+
+  // Link — underlined violet text on hover
+  &--link {
+    background-color: transparent;
+    color: var(--fui-primary);
+
+    &:hover:not(.fui-button--disabled) {
+      text-decoration: underline;
+    }
+
+    &:active:not(.fui-button--disabled) {
+      text-decoration: underline;
+    }
+  }
+
+  // Destructive — solid red
+  &--destructive {
+    background-color: var(--fui-destructive-default);
+    color: var(--fui-destructive-text);
+    border-color: transparent;
+    box-shadow: var(--fui-shadow-02);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-destructive-hover);
+      box-shadow: var(--fui-shadow-03);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-destructive-hover);
+      box-shadow: none;
+    }
+  }
+
+  // Icon adjustments
+  &--icon-only {
+    gap: 0;
+
+    .fui-icon {
+      margin: 0;
+    }
+  }
+}
+
+// Icon spacing within buttons
+.fui-icon {
+  flex-shrink: 0;
+
+  &[fuiPrefix] {
+    margin-right: var(--fui-spacing-02);
+  }
+
+  &[fuiSuffix] {
+    margin-left: var(--fui-spacing-02);
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: more) {
+  .fui-button {
+    &--secondary {
+      border-width: 3px;
+    }
+
+    &:focus-visible {
+      outline-width: 3px;
+    }
+  }
+}
+
+// Keyframes
+@keyframes fui-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fui-button-ripple {
+  to {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+// Print styles
+@media print {
+  .fui-button {
+    &__spinner {
+      display: none !important;
+    }
+  }
+}