@flux-ui/components 3.0.0-next.9 → 3.1.0

package/src/css/component/Form.module.scss

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 %-form-input-group-inner-styles {
     height: 100%;
@@ -50,10 +50,18 @@
     }
 }
 
+.formGrid {
+    --columns: 2;
+
+    display: grid;
+    gap: 18px;
+    grid-template-columns: repeat(var(--columns), 1fr);
+}
+
 .formRow {
     display: flex;
     flex-grow: 1;
-    gap: 12px;
+    gap: 18px;
 }
 
 .formSectionTitle {
@@ -63,6 +71,10 @@
 }
 
 @include mixin.breakpoint-down(sm) {
+    .formGrid {
+        grid-template-columns: 1fr;
+    }
+
     .formRow {
         flex-flow: column;
         gap: 18px;
@@ -78,8 +90,8 @@
 
 .formFieldHeader {
     display: flex;
-    margin-bottom: 0;
     width: 100%;
+    margin-bottom: 0;
     align-items: center;
     align-self: flex-start;
     gap: 6px;
@@ -126,7 +138,7 @@
 .formFieldAdditionError {
     composes: formFieldAddition;
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .formFieldAdditionHint {
@@ -145,14 +157,14 @@
     height: 42px;
     width: 100%;
     padding: 0 12px;
-    align-self: start;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
-    transition: 180ms var(--swift-out);
+    outline: 0 solid transparent;
+    transition: var(--transition-default);
     transition-property: background, border-color, mixin.focus-ring-transition-properties();
 
     &::placeholder {
@@ -160,16 +172,29 @@
     }
 
     &.isSecondary {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         border-color: transparent;
         box-shadow: none;
     }
+
+    &.isCondensed {
+        height: 34px;
+    }
+
+    &.isInvalid {
+        border-color: var(--danger-500);
+    }
+}
+
+.form .formInput {
+    align-self: start;
 }
 
 .formInputDisabled {
     composes: formInput;
 
-    background: rgb(var(--gray-2));
+    background: var(--surface-disabled);
+    color: var(--foreground-secondary);
     cursor: not-allowed;
 
     input {
@@ -183,7 +208,7 @@
     @include mixin.focus-ring(-1px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--surface-stroke-hover);
     }
 }
 
@@ -245,13 +270,13 @@
 
     &::-webkit-color-swatch {
         border: 0;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
     }
 
     &::-webkit-color-swatch-wrapper {
+        width: calc(100% + 24px);
         margin: 0 -12px;
         padding: 3px;
-        width: calc(100% + 24px);
     }
 }
 
@@ -263,6 +288,63 @@
     padding-right: 42px;
 }
 
+.formNumberInputNative {
+    composes: formInputNative;
+
+    padding-right: 38px;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    font-variant-numeric: tabular-nums;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+    }
+}
+
+.formNumberInputButtons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: 33px;
+    border-left: 1px solid var(--surface-stroke);
+    border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
+    overflow: hidden;
+}
+
+.formNumberInputButton {
+    display: flex;
+    flex: 1 1 0;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface);
+    border: 0;
+    color: var(--foreground-secondary);
+    cursor: pointer;
+    transition: var(--transition-default);
+    transition-property: background, color;
+
+    & + & {
+        border-top: 1px solid var(--surface-stroke);
+    }
+
+    @include mixin.hover {
+        background: var(--surface-hover);
+        color: var(--foreground);
+    }
+
+    &:disabled {
+        color: var(--surface-stroke);
+        cursor: not-allowed;
+    }
+}
+
 .formInputAddition {
     composes: formInput;
 
@@ -271,20 +353,20 @@
     align-items: center;
     flex-grow: 0;
     justify-content: center;
-    background: rgb(var(--gray-1));
+    background: var(--surface-disabled);
     color: var(--foreground-secondary);
     pointer-events: none;
 
     &:has(+ .formInput .formInputNative) {
-        border-right: 1px solid rgb(var(--gray-3));
+        border-right: 1px solid var(--surface-stroke);
     }
 
     + .formInputAddition {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--surface-stroke);
     }
 
     @at-root .formInput:has(.formInputNative) + & {
-        border-left: 1px solid rgb(var(--gray-3));
+        border-left: 1px solid var(--surface-stroke);
     }
 }
 
@@ -301,7 +383,7 @@
 
         + :is(.button, .buttonGroup) {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--surface-stroke);
         }
     }
 
@@ -310,7 +392,7 @@
 
         + .button {
             margin: 0;
-            border-left: 1px solid rgb(var(--gray-3));
+            border-left: 1px solid var(--surface-stroke);
         }
     }
 
@@ -319,6 +401,15 @@
         border-bottom-left-radius: 0;
     }
 
+    &.isCondensed,
+    &.isSecondary {
+        .formInputAddition:not(:last-child) {
+            padding-right: 0;
+            background: unset;
+            border-color: transparent;
+        }
+    }
+
     &.isSecondary {
         .formInput {
             background: transparent;
@@ -326,20 +417,35 @@
             box-shadow: none;
         }
 
-        .formInputAddition:not(:last-child) {
-            padding-right: 0;
-        }
-
         .secondaryButton {
             background: transparent;
-            border-color: rgb(var(--gray-3));
+            border-color: var(--surface-stroke);
             box-shadow: none;
 
             @include mixin.hover {
-                background: rgb(var(--gray-3));
+                background: var(--surface-stroke-hover);
             }
         }
     }
+
+    &:has(*:disabled) {
+        cursor: not-allowed;
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    :is(.button[disabled]),
+    :is(.button[aria-disabled="true"]) {
+        background: var(--surface-disabled);
+        opacity: 1;
+
+        &,
+        .buttonIcon {
+            color: var(--foreground-secondary);
+        }
+    }
 }
 
 .formDateInput {
@@ -398,7 +504,7 @@
         @include mixin.focus-ring(-1px, true);
 
         @include mixin.hover {
-            border-color: rgb(var(--gray-4));
+            border-color: var(--surface-stroke-hover);
         }
     }
 
@@ -430,7 +536,7 @@
     top: 0;
     height: 48px;
     margin-bottom: 9px;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     border-top: 0;
     border-left: 0;
     border-right: 0;
@@ -441,13 +547,14 @@
     @include mixin.focus-ring-remove;
 
     .formInputIcon {
+        right: 0;
         margin: 15px;
         font-size: 18px;
     }
 
     .formInputNative {
-        padding-left: 21px;
-        padding-right: 21px;
+        padding-left: 18px;
+        padding-right: 18px;
     }
 }
 
@@ -459,7 +566,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure from './base/Pane.module.scss';
+    composes: basePane from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -474,7 +581,7 @@
     z-index: 10000;
 
     .menuItem {
-        contain-intrinsic-size: #{'auto 42px'};
+        contain-intrinsic-size: auto 42px;
         content-visibility: auto;
     }
 
@@ -507,8 +614,8 @@
 }
 
 .isDisabled .formSelectSelected {
-    background: rgb(var(--gray-2));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--surface-disabled);
+    border: 1px solid var(--surface-stroke);
     color: var(--foreground-secondary);
     opacity: 1;
 }
@@ -534,36 +641,78 @@
     composes: formTextArea;
 }
 
-.checkbox {
+.formCheckboxGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    &.isInline {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px 20px;
+    }
+}
+
+.formCheckbox {
     display: inline-flex;
     flex-shrink: 0;
+    align-items: flex-start;
     gap: 12px;
+    line-height: 21px;
     outline: 0;
+
+    &.isDisabled {
+        cursor: not-allowed;
+
+        .formCheckboxElement {
+            background: var(--surface-disabled);
+            border-color: var(--surface-stroke);
+            color: var(--foreground-secondary);
+        }
+
+        .formCheckboxLabel {
+            color: var(--foreground-secondary);
+        }
+    }
+
+    &.isReadonly {
+        cursor: default;
+
+        .formCheckboxNative {
+            pointer-events: none;
+        }
+    }
+
+    &.isInvalid .formCheckboxElement {
+        border-color: var(--danger-500);
+    }
 }
 
-.checkboxElement,
-.checkboxNative {
-    margin: 1px 0;
-    height: 22px;
-    width: 22px;
+.formCheckboxElement,
+.formCheckboxNative {
+    margin: 1px 0 0;
+    height: 20px;
+    width: 20px;
 }
 
-.checkboxElement {
+.formCheckboxElement {
     position: relative;
     display: inline-flex;
-    height: 22px;
-    width: 22px;
+    height: 20px;
+    width: 20px;
     padding: 0;
     align-items: center;
+    flex-shrink: 0;
     justify-content: center;
-    background: rgb(var(--gray-3));
-    border: 0;
-    border-radius: calc(var(--radius) / 2);
-    color: rgb(var(--primary-0));
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-half);
+    color: var(--primary-25);
     cursor: pointer;
     pointer-events: none;
     transition: 210ms var(--swift-out);
-    transition-property: background, color, mixin.focus-ring-transition-properties();
+    transition-property: background, border-color, color, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-outline;
 
@@ -574,56 +723,204 @@
         transition-property: opacity;
 
         :is(path) {
-            stroke: white;
+            stroke: currentColor;
             stroke-width: 54px;
         }
     }
 }
 
-.checkboxLabel {
-    align-self: center;
+.formCheckboxText {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.formCheckboxLabel {
+    line-height: 21px;
 }
 
-.checkboxNative {
+.formCheckboxSubLabel {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.formCheckboxNative {
     position: absolute;
+    cursor: pointer;
     opacity: 0;
 
     @include mixin.hover {
-        + .checkboxElement {
-            background: rgb(var(--gray-4));
+        + .formCheckboxElement {
+            background: var(--gray-100);
         }
     }
 
-    &:is(:checked, :indeterminate) + .checkboxElement {
-        background: rgb(var(--primary-7));
+    &:is(:checked, :indeterminate) + .formCheckboxElement {
+        background: var(--primary-600);
+        border-color: var(--primary-600);
 
         .icon {
             opacity: 1;
         }
     }
 
-    &:focus-visible + .checkboxElement {
+    &:focus-visible + .formCheckboxElement {
+        @include mixin.focus-outline-visible(2px);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:disabled + .formCheckboxElement {
+        background: var(--gray-100);
+        border-color: var(--gray-200);
+        color: var(--foreground-secondary);
+    }
+}
+
+.formRadioGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    &.isInline {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 9px 21px;
+    }
+}
+
+.formRadio {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 12px;
+    line-height: 21px;
+    outline: 0;
+    cursor: pointer;
+
+    &.isDisabled {
+        cursor: not-allowed;
+
+        .formRadioElement {
+            background: var(--surface-disabled);
+            border-color: var(--surface-stroke);
+        }
+
+        .formRadioLabel {
+            color: var(--foreground-secondary);
+        }
+    }
+
+    &.isReadonly {
+        cursor: default;
+
+        .formRadioNative {
+            pointer-events: none;
+        }
+    }
+
+    &.isInvalid .formRadioElement {
+        border-color: var(--danger-500);
+    }
+}
+
+.formRadioElement,
+.formRadioNative {
+    margin: 1px 0 0;
+    height: 20px;
+    width: 20px;
+}
+
+.formRadioElement {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 20px;
+    width: 20px;
+    align-items: center;
+    justify-content: center;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 50%;
+    cursor: pointer;
+    pointer-events: none;
+    transition: 210ms var(--swift-out);
+    transition-property: background, border-color, mixin.focus-ring-transition-properties();
+
+    @include mixin.focus-outline;
+
+    &::after {
+        content: '';
+        height: 8px;
+        width: 8px;
+        background: var(--primary-25);
+        border-radius: 50%;
+        scale: 0;
+        transition: inherit;
+        transition-property: scale;
+    }
+}
+
+.formRadioLabel {
+    align-self: center;
+}
+
+.formRadioNative {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+
+    @include mixin.hover {
+        + .formRadioElement {
+            background: var(--gray-100);
+        }
+    }
+
+    &:checked + .formRadioElement {
+        background: var(--primary-600);
+        border-color: var(--primary-600);
+
+        &::after {
+            scale: 1;
+        }
+    }
+
+    &:focus-visible + .formRadioElement {
         @include mixin.focus-outline-visible(2px);
     }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:disabled + .formRadioElement {
+        background: var(--gray-100);
+        border-color: var(--gray-200);
+    }
 }
 
-.quantitySelector {
+.formQuantitySelector {
     min-width: max-content;
     align-self: center;
     justify-self: center;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     overflow: hidden;
+    transition: var(--transition-default);
+    transition-property: border-color, mixin.focus-ring-transition-properties();
 
-    @include mixin.focus-ring-transition(2px, true);
+    @include mixin.focus-ring(2px, true);
 
     @include mixin.hover {
-        border-color: rgb(var(--gray-4));
+        border-color: var(--surface-stroke-hover);
     }
 }
 
-.quantitySelectorButton {
+.formQuantitySelectorButton {
     margin: -1px;
     border: 0;
 
@@ -642,7 +939,7 @@
     }
 }
 
-.quantitySelectorInput {
+.formQuantitySelectorInput {
     composes: formInput;
 
     margin: -1px 0;
@@ -654,7 +951,7 @@
     text-align: center;
 
     &:hover {
-        border-color: rgb(var(--gray-3));
+        border-color: var(--surface-stroke-hover);
     }
 
     &,
@@ -674,7 +971,7 @@
     }
 }
 
-.pinInput {
+.formPinInput {
     display: grid;
     width: min-content;
     gap: .4ch;
@@ -686,75 +983,83 @@
     font-weight: 700;
 }
 
-.pinInputField {
+.formPinInputField {
     padding: 0;
     width: 2.7ch;
-    background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-3));
+    border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     font: inherit;
     line-height: 3.3ch;
     outline: 0;
     text-align: center;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: border-color, mixin.focus-ring-transition-properties();
 }
 
-.pinInputEnabled {
-    composes: pinInput;
+.formPinInputEnabled {
+    composes: formPinInput;
 
-    .pinInputField {
-        background-color: rgb(var(--gray-0));
+    .formPinInputField {
+        background-color: var(--surface);
         color: var(--foreground-prominent);
 
         @include mixin.focus-ring(-1px, true);
     }
 }
 
-.pinInputDisabled {
-    composes: pinInput;
+.formPinInputDisabled {
+    composes: formPinInput;
 
-    .pinInputField {
-        background-color: rgb(var(--gray-2));
+    .formPinInputField {
+        background-color: var(--surface-disabled);
         color: var(--foreground-secondary);
         cursor: not-allowed;
     }
 }
 
-.toggle {
+.formToggle {
     position: relative;
     display: block;
     width: 54px;
     height: 30px;
     flex: 0 0 auto;
-    background: rgb(var(--gray-2));
-    border-radius: 99px;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-full);
     contain: paint;
 
+    @include mixin.focus-outline;
+
+    &:has(.formToggleInput:focus-visible) {
+        @include mixin.focus-outline-visible(2px);
+    }
+
     &.isChecked {
-        .toggleInput::after {
+        border-color: transparent;
+
+        .formToggleInput::after {
             translate: 24px 0;
         }
 
         &:not(.isSwitch) {
-            background: rgb(var(--primary-7));
+            background: var(--primary-600);
 
-            .toggleIcon {
-                color: rgb(var(--primary-0));
+            .formToggleIcon {
+                color: var(--primary-25);
             }
 
-            .toggleInput::after {
+            .formToggleInput::after {
                 border-color: transparent;
             }
         }
 
-        .toggleIconOn {
+        .formToggleIconOn {
             translate: calc(-50% + 24px) -50%;
         }
     }
 
-    &:not(.isChecked) .toggleIconOff {
+    &:not(.isChecked) .formToggleIconOff {
         translate: calc(-50% - 24px) -50%;
     }
 
@@ -762,9 +1067,17 @@
         cursor: not-allowed;
         opacity: .6;
     }
+
+    &.isReadonly .formToggleInput {
+        pointer-events: none;
+    }
+
+    &.isInvalid {
+        border-color: var(--danger-500);
+    }
 }
 
-.toggleIcon {
+.formToggleIcon {
     position: absolute;
     top: 50%;
     color: var(--foreground-secondary);
@@ -772,19 +1085,19 @@
     translate: -50% -50%;
 }
 
-.toggleIconOff {
-    composes: toggleIcon;
+.formToggleIconOff {
+    composes: formToggleIcon;
 
     left: 15px;
 }
 
-.toggleIconOn {
-    composes: toggleIcon;
+.formToggleIconOn {
+    composes: formToggleIcon;
 
     left: 39px;
 }
 
-.toggleInput {
+.formToggleInput {
     -webkit-appearance: none;
     appearance: none;
 
@@ -799,28 +1112,25 @@
     cursor: pointer;
     outline: 0;
 
-    @include mixin.focus-ring(2px);
-
     &::after {
         position: absolute;
         display: block;
-        top: 3px;
-        left: 3px;
+        top: 2px;
+        left: 2px;
         height: 24px;
         width: 24px;
         content: '';
-        background: rgb(var(--gray-0));
-        background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-3));
-        border-radius: 99px;
+        background: var(--surface);
+        border: 1px solid var(--surface-stroke);
+        border-radius: var(--radius-full);
         box-shadow: var(--shadow-sm);
     }
 }
 
-.toggle,
-.toggleIcon,
-.toggleInput,
-.toggleInput::after {
+.formToggle,
+.formToggleIcon,
+.formToggleInput,
+.formToggleInput::after {
     transition: 210ms var(--swift-out);
     transition-property: background, border-color, color, opacity, scale, translate, mixin.focus-ring-transition-properties();
 }