@flux-ui/components 3.0.0-next.7 → 3.0.0-next.70

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

@@ -0,0 +1,23 @@
+.adaptiveGroup {
+    display: flex;
+    min-width: 0;
+    flex-flow: row nowrap;
+    gap: var(--gap, 9px);
+}
+
+.adaptiveSlot {
+    display: flex;
+    min-width: 0;
+    flex-flow: row nowrap;
+}
+
+.adaptiveSlotMeasurer {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: max-content;
+    flex-flow: row nowrap;
+    pointer-events: none;
+    visibility: hidden;
+}

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .avatar {
     position: relative;
@@ -6,7 +6,7 @@
     height: 1em;
     width: 1em;
     flex: 0 0 1em;
-    border-radius: .5em;
+    border-radius: .3em;
     user-select: none;
 }
 
@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: rgb(var(--gray-1));
+    background: var(--gray-50);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    box-shadow: inset 0 0 0 1px var(--gray-100);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: rgb(var(--gray-3));
+    background: var(--gray-100);
     color: var(--foreground-secondary);
 }
 
@@ -62,61 +62,60 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    background: rgb(from var(--gray-50) r g b / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-100);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
     :local(.spinner) {
-        --track: rgb(0 0 0 / .12);
+        --track: rgb(from var(--gray-950) r g b / .12);
     }
 }
 
 .avatarStatus {
     position: absolute;
     display: block;
-    right: 0.0238095238em;
-    bottom: 0.0238095238em;
-    height: 0.285714286em;
-    width: 0.285714286em;
-    background: black;
-    border-radius: 99px;
+    right: .021em;
+    bottom: .021em;
+    height: .27em;
+    width: .27em;
+    border-radius: var(--radius-full);
 }
 
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: rgb(var(--gray-6));
+    background: var(--gray-500);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: rgb(var(--primary-7));
+    background: var(--primary-600);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: rgb(var(--danger-7));
+    background: var(--danger-600);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: rgb(var(--info-7));
+    background: var(--info-600);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: rgb(var(--success-7));
+    background: var(--success-600);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: rgb(var(--warning-7));
+    background: var(--warning-600);
 }
 
 .avatarClickable {
@@ -134,8 +133,8 @@
 
 .statusAvatar .avatarFallback,
 .statusAvatar .avatarImage {
-    mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
-    -webkit-mask: url('$flux/image/avatar-mask.svg') no-repeat center center / cover;
+    mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
+    -webkit-mask: radial-gradient(circle .18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
 }
 
 .persona {
@@ -148,13 +147,13 @@
     border-radius: var(--radius);
     cursor: pointer;
     text-align: left;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
     }
 }
 

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .badge {
     display: inline-flex;
@@ -10,21 +10,22 @@
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: rgb(var(--gray-0));
-    border: 1px solid rgb(var(--gray-3));
-    border-radius: 99px;
+    background: var(--surface);
+    border: 1px solid var(--surface-stroke);
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 13px;
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
 
-    &:is(a) {
+    &:is(a, button) {
         color: var(--foreground-prominent);
         cursor: pointer;
         text-decoration: none;
-        transition: background 180ms var(--swift-out);
+        transition: background var(--transition-default);
 
         @include mixin.hover {
-            background: rgb(var(--gray-1));
+            background: var(--gray-50);
             color: var(--foreground-prominent);
         }
     }
@@ -44,17 +45,17 @@
     justify-content: center;
     background: unset;
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-secondary);
     cursor: pointer;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         color: var(--foreground);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-200);
         color: var(--foreground);
     }
 
@@ -68,7 +69,7 @@
     height: 9px;
     width: 9px;
     background: var(--color);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .badgeIcon {
@@ -91,60 +92,67 @@
 .badgeGray {
     composes: badge;
 
-    --color: rgb(var(--gray-8));
+    --color: var(--foreground);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: rgb(var(--primary-7));
+        --value: var(--primary-600);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: rgb(var(--primary-7));
+    --color: var(--primary-600);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: rgb(var(--danger-7));
+    --color: var(--danger-600);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: rgb(var(--info-7));
+    --color: var(--info-600);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: rgb(var(--success-7));
+    --color: var(--success-600);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: rgb(var(--warning-7));
+    --color: var(--warning-600);
 }
 
 .tag {
     composes: badge;
 
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
-    border-radius: calc(var(--radius) / 2);
+    background: var(--gray-50);
+    border-color: var(--gray-200);
+    border-radius: var(--radius-half);
     font-weight: 400;
 }
 
+.tagKeyboardShortcut {
+    composes: tag;
+
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
 .tagClose {
     composes: badgeClose;
 
-    border-radius: calc(var(--radius) / 3);
+    border-radius: var(--radius-half);
 }
 
 .tagDot {

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

@@ -1,32 +1,30 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .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;