@flux-ui/components 3.0.0-next.8 → 3.0.0

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .action {
     composes: button from './base/Button.module.scss';
@@ -8,15 +8,15 @@
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius-half);
     box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-3));
+        background: var(--gray-100);
     }
 
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-200);
     }
 
     .spinner {
@@ -32,7 +32,7 @@
 }
 
 .action.isDestructive .actionIcon {
-    color: rgb(var(--danger-7));
+    color: var(--danger-600);
 }
 
 .actionLabel {
@@ -57,9 +57,9 @@
 }
 
 .basePaneStructure > .actionBar {
-    padding: 15px 21px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    padding: 12px 18px;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-100);
     border-left: 0;
     border-right: 0;
 
@@ -76,10 +76,6 @@
     }
 }
 
-.paneHeader + .actionBar {
-    margin-top: 21px;
-}
-
 .actionPane {
     container: actionPane / inline-size;
 
@@ -99,6 +95,9 @@
 
 .actionPaneBody {
     position: relative;
-    padding: 0;
     text-wrap: pretty;
+
+    &:local(.paneBody) {
+        padding: 0;
+    }
 }

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 {