@flux-ui/components 3.0.0-next.5 → 3.0.0-next.52

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

@@ -3,30 +3,28 @@
 .primaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--primary-7));
-    border-color: rgb(var(--primary-9));
-    box-shadow: 0 1px 1px rgb(var(--primary-7) / .25);
-    color: rgb(var(--primary-0));
+    background: var(--primary-600);
+    border-color: var(--primary-700);
+    box-shadow: 0 1px 1px rgb(from var(--primary-600) r g b / .25);
+    color: var(--primary-25);
 
     @include mixin.hover {
-        background: rgb(var(--primary-8));
+        background: var(--primary-700);
+        border-color: var(--primary-800);
     }
 
-    &:active {
-        background: rgb(var(--primary-9));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--primary-800));
 
     .spinner {
-        --track: rgb(var(--primary-8));
-        --value: rgb(var(--primary-0));
+        --track: var(--primary-700);
+        --value: var(--primary-25);
     }
 }
 
 .primaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-0));
+    color: var(--primary-25);
 }
 
 .primaryButtonLabel {
@@ -36,25 +34,21 @@
 .secondaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
-    &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .secondaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: var(--foreground-prominent);
+    color: var(--foreground);
 }
 
 .secondaryButtonLabel {
@@ -64,56 +58,84 @@
 .destructiveButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--surface);
+    border-color: var(--surface-stroke);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
-    &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 
     .spinner {
-        --value: rgb(var(--danger-7));
+        --value: var(--danger-600);
     }
 }
 
 .destructiveButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .destructiveButtonLabel {
     composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
-        color: rgb(var(--danger-7));
+        color: var(--danger-600);
     }
 }
 
-[dark] .secondaryButton,
-[dark] .destructiveButton {
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
+.secondaryButton,
+.destructiveButton {
+    box-shadow: var(--shadow-px), inset 0 -1px rgb(from var(--gray-200) r g b / .15);
+}
+
+.baseLinkButton {
+    composes: button from './base/Button.module.scss';
+
+    gap: 6px;
+    border-color: transparent;
+    box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--surface-hover);
     }
 
-    &:active {
-        background: rgb(var(--gray-3));
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
-.secondaryButton,
-.destructiveButton {
-    box-shadow: var(--shadow-px), inset 0 -1px rgb(var(--gray-3) / .3);
+.primaryLinkButton {
+    composes: baseLinkButton;
+
+    color: var(--primary-700);
+}
+
+.primaryLinkButtonIcon {
+    composes: buttonIcon from './base/Button.module.scss';
+
+    color: var(--primary-700);
+}
+
+.primaryLinkButtonLabel {
+    composes: buttonLabel from './base/Button.module.scss';
+}
+
+.secondaryLinkButton {
+    composes: baseLinkButton;
+
+    color: var(--foreground-prominent);
+}
+
+.secondaryLinkButtonIcon {
+    composes: buttonIcon from './base/Button.module.scss';
+
+    color: var(--foreground);
+}
+
+.secondaryLinkButtonLabel {
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .linkButton {
@@ -124,7 +146,7 @@
     padding: 0;
     border: 0;
     box-shadow: unset;
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -132,7 +154,7 @@
     @include mixin.focus-ring(6px);
 
     @include mixin.hover {
-        color: rgb(var(--primary-10));
+        color: var(--primary-900);
 
         .linkButtonIcon {
             transform: translate3d(6px, 0, 0);
@@ -143,7 +165,7 @@
 .linkButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-7));
+    color: var(--primary-600);
     transition: inherit;
     transition-property: transform;
 

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

@@ -33,7 +33,7 @@
     text-transform: capitalize;
 
     @include mixin.hover {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
     }
 }
 
@@ -56,12 +56,12 @@
     gap: 1px;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: min-content repeat(6, auto);
-    background: rgb(var(--gray-2));
+    background: var(--gray-100);
 }
 
 .calendarCell {
-    padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    padding: 12px 18px;
+    background: var(--gray-25);
 }
 
 .calendarDay {
@@ -85,7 +85,7 @@
     padding-bottom: 39px;
 
     &.isDisabled {
-        background: rgb(var(--gray-1));
+        background: var(--gray-50);
         color: var(--foreground-secondary);
         pointer-events: none;
 
@@ -102,7 +102,7 @@
 
 .calendarEntryDate {
     position: absolute;
-    right: 21px;
+    right: 18px;
     bottom: 15px;
     color: var(--foreground);
     font-size: 15px;
@@ -120,9 +120,9 @@
     margin-left: -9px;
     margin-right: -9px;
     padding: 6px 9px;
-    background: rgb(var(--primary-2));
+    background: var(--primary-100);
     border: 0;
-    color: rgb(var(--primary-9));
+    color: var(--primary-800);
     cursor: pointer;
     font-size: 14px;
     line-height: 1.3em;
@@ -135,7 +135,7 @@
     -webkit-box-orient: vertical;
 
     &.isSingle {
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
     }
 
     &.isMiddle {
@@ -144,15 +144,15 @@
     }
 
     &.isStart {
-        margin-right: -21px;
-        border-top-left-radius: calc(var(--radius) / 2);
-        border-bottom-left-radius: calc(var(--radius) / 2);
+        margin-right: -18px;
+        border-top-left-radius: var(--radius-half);
+        border-bottom-left-radius: var(--radius-half);
     }
 
     &.isEnd {
-        margin-left: -21px;
-        border-top-right-radius: calc(var(--radius) / 2);
-        border-bottom-right-radius: calc(var(--radius) / 2);
+        margin-left: -18px;
+        border-top-right-radius: var(--radius-half);
+        border-bottom-right-radius: var(--radius-half);
     }
 
     &:not(.isSingle):not(.isStart) {
@@ -162,6 +162,6 @@
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-3));
+        background: var(--primary-200);
     }
 }

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

@@ -7,11 +7,11 @@
     align-items: center;
     flex-grow: 0;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
-    border-radius: 99px;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: var(--radius-full);
     color: var(--foreground);
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border, color, mixin.focus-ring-transition-properties();
 
     &.isSelectable {
@@ -19,22 +19,18 @@
 
         @include mixin.focus-ring(2px);
 
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-2));
-            }
+        @include mixin.hover {
+            background: var(--gray-100);
         }
     }
 
     &.isSelected {
-        background: rgb(var(--primary-2));
-        border-color: rgb(var(--primary-4));
-        color: rgb(var(--primary-7));
+        background: var(--primary-50);
+        border-color: var(--primary-200);
+        color: var(--primary-600);
 
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--primary-3));
-            }
+        @include mixin.hover {
+            background: var(--primary-100);
         }
     }
 
@@ -44,15 +40,3 @@
         white-space: nowrap;
     }
 }
-
-[dark] .chip.isSelected {
-    background: rgb(var(--primary-11) / .5);
-    border-color: rgb(var(--primary-11));
-    color: rgb(var(--primary-5));
-
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-10) / .5);
-        }
-    }
-}

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

@@ -4,7 +4,7 @@
     --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     flex-flow: column;
     gap: 15px;
 }
@@ -30,7 +30,7 @@
 
     &::after {
         background: var(--color);
-        box-shadow: inset 0 0 0 1px rgb(var(--gray-11) / .05);
+        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
     }
 }
 
@@ -52,7 +52,7 @@
 
     &::after {
         background: linear-gradient(to top, black, transparent);
-        box-shadow: inset 0 0 0 1px rgb(var(--gray-11) / .05);
+        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
     }
 }
 
@@ -156,8 +156,8 @@
 .colorSelectCustom {
     composes: colorSelectItem;
 
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
 }
 
 .colorSelectCustomPicker {