@flux-ui/components 3.0.0-next.6 → 3.0.0-next.60

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

@@ -0,0 +1,21 @@
+@use '~flux/components/css/mixin';
+
+.treeView {
+    display: flex;
+    flex-flow: column;
+    outline: 0;
+}
+
+.treeNode {
+    composes: treeNode from './primitive/TreeNode.module.scss';
+
+    cursor: pointer;
+
+    @include mixin.hover {
+        background: var(--surface-hover);
+    }
+
+    &.isHighlighted {
+        background: var(--surface-hover);
+    }
+}

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

@@ -0,0 +1,59 @@
+@use '~flux/components/css/mixin';
+
+.treeViewSelectValue {
+    margin-left: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.treeViewSelectList {
+    display: flex;
+    flex-flow: column;
+    padding: 9px;
+}
+
+.treeViewSelectEmpty {
+    padding: 12px 6px;
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    text-align: center;
+}
+
+.treeNode {
+    composes: treeNode from './primitive/TreeNode.module.scss';
+
+    &.isSelectable,
+    &.isExpandable {
+        cursor: pointer;
+
+        @include mixin.hover {
+            background: var(--surface-hover);
+        }
+    }
+
+    &.isSelected {
+        background: var(--primary-50);
+        color: var(--primary-700);
+        font-weight: 600;
+    }
+
+    &.isSelected.isSelectable {
+        @include mixin.hover {
+            background: var(--primary-100);
+        }
+    }
+
+    &.isHighlighted:not(.isSelected) {
+        background: var(--surface-hover);
+    }
+
+    &.isHighlighted.isSelected {
+        background: var(--primary-100);
+    }
+}
+
+.treeNodeCheck {
+    color: var(--primary-600);
+    flex-shrink: 0;
+}

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

@@ -20,7 +20,7 @@
 .dotPattern {
     composes: fillVisual;
 
-    fill: rgb(var(--gray-4));
+    fill: var(--gray-300);
     pointer-events: none;
 }
 
@@ -33,8 +33,8 @@
 .gridPattern {
     composes: fillVisual;
 
-    fill: rgb(var(--gray-2));
-    stroke: rgb(var(--gray-4));
+    fill: var(--gray-100);
+    stroke: var(--gray-300);
     pointer-events: none;
 }
 

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

@@ -1,10 +1,8 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 @layer flux-base {
     .button {
         display: inline-flex;
-        height: 42px;
-        padding: 0 12px;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
@@ -17,7 +15,7 @@
         cursor: pointer;
         font: inherit;
         text-decoration: none;
-        transition: 180ms var(--swift-out);
+        transition: var(--transition-default);
         transition-property: background, border, box-shadow, color, scale, mixin.focus-ring-transition-properties();
         user-select: none;
 
@@ -61,15 +59,25 @@
         &.isFilled {
             align-self: stretch;
         }
+
+        :local(.spinner) {
+            flex-shrink: 0;
+
+            &:only-child {
+                margin-left: -2px;
+                margin-right: -2px;
+            }
+        }
     }
 
     .buttonIcon {
+        margin: 1px;
         flex-shrink: 0;
-        font-size: 20px;
+        font-size: 18px;
 
         &:only-child {
-            margin-left: -2px;
-            margin-right: -2px;
+            margin-left: -1px;
+            margin-right: -1px;
         }
     }
 
@@ -84,4 +92,14 @@
             min-width: 42px;
         }
     }
+
+    .button .badge {
+        &:first-child {
+            margin-left: -6px;
+        }
+
+        &:last-child {
+            margin-right: -6px;
+        }
+    }
 }

package/src/css/component/base/Effect.module.scss

@@ -31,7 +31,8 @@ $-sparkle-r: .5 * $-sparkle-d;
             $-xs: $-xg + $-sparkle-d * cos($-sparkle-curr-angle);
             $-ys: $-yg + $-sparkle-d * sin($-sparkle-curr-angle);
 
-            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl(($i + $j) * $-group-base-angle, 100%, 75%);
+            $-hue: ($i + $j) * $-group-base-angle;
+            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl($-hue, 100%, 75%);
         }
     }
 

package/src/css/component/base/Pane.module.scss

@@ -1,22 +1,18 @@
 .basePane {
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-11) / .05);
+    border: 1px solid var(--surface-stroke-out);
     border-radius: var(--radius);
 }
 
-[dark] .basePane {
-    border-color: rgb(var(--gray-3));
-}
-
 .basePaneLoader {
     position: absolute;
     display: flex;
     inset: 0;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(2px) saturate(180%);
-    background: rgb(var(--gray-0) / .75);
+    backdrop-filter: blur(3px) saturate(180%);
+    background: var(--surface-loader);
     border-radius: inherit;
     z-index: 100;
 }

package/src/css/component/primitive/CoordinatePicker.module.scss

@@ -1,9 +1,9 @@
 .coordinatePicker {
     position: relative;
     aspect-ratio: 5 / 3;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-11) / .05);
-    border-radius: calc(var(--radius) / 2);
+    background: var(--gray-50);
+    border: 1px solid var(--surface-stroke-out);
+    border-radius: var(--radius-half);
     z-index: 0;
 }
 

package/src/css/component/primitive/Slider.module.scss

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .slider {
     position: relative;
@@ -23,10 +23,10 @@
     height: 24px;
     width: 24px;
     padding: 0;
-    background: rgb(var(--gray-0));
+    background: var(--surface);
     background-clip: padding-box;
-    border: 1px solid rgb(var(--gray-11) / .05);
-    border-radius: 99px;
+    border: 1px solid var(--surface-stroke-out);
+    border-radius: var(--radius-full);
     box-shadow: var(--shadow-sm);
     cursor: grab;
     outline: 0;
@@ -34,14 +34,12 @@
 
     @include mixin.focus-ring-transition(2px);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: rgb(var(--gray-2));
-        }
+    @include mixin.hover {
+        background-color: var(--surface-hover);
     }
 
     &.isDisabled {
-        background-color: rgb(var(--gray-1));
+        background-color: var(--surface-disabled);
         box-shadow: none;
         pointer-events: none;
     }
@@ -52,17 +50,13 @@
     }
 }
 
-[dark] .sliderThumb {
-    background-color: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-11) / .4);
-}
-
 .sliderTrack {
     position: relative;
     height: 12px;
-    background: rgb(var(--gray-2));
-    border-radius: calc(var(--radius) / 2);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-3));
+    background: var(--gray-50);
+    background-clip: padding-box;
+    border-radius: var(--radius-half);
+    box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .sliderTrackValue {
@@ -70,12 +64,12 @@
     display: block;
     top: 0;
     height: inherit;
-    background: rgb(var(--primary-7));
+    background: var(--primary-600);
     border-radius: inherit;
 }
 
 .slider.isDisabled .sliderTrackValue {
-    background: rgb(var(--gray-4));
+    background: var(--gray-300);
 }
 
 .tick {
@@ -84,8 +78,8 @@
     bottom: 0;
     height: 9px;
     width: 2px;
-    background: rgb(var(--gray-4));
-    border-radius: 99px;
+    background: var(--gray-300);
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 10px;
     font-weight: 600;

package/src/css/component/primitive/TreeNode.module.scss

@@ -0,0 +1,19 @@
+@use '~flux/components/css/mixin';
+
+.treeNode {
+    display: flex;
+    width: 100%;
+    min-height: 36px;
+    padding: 0 8px;
+    align-items: center;
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    font-size: 14px;
+    gap: 8px;
+    outline: 0;
+    transition: 150ms var(--swift-out);
+    transition-property: background, color;
+    user-select: none;
+}
+
+@include mixin.tree-node-classes();

package/src/css/mixin/breakpoints.scss

@@ -17,19 +17,31 @@ $-breakpoints: (
         @error 'Breakpoint "#{$breakpoint}" not found in "#{$names}".';
     }
 
-    @return if($n < list.length($names), list.nth($names, $n + 1), null);
+    @if $n < list.length($names) {
+        @return list.nth($names, $n + 1);
+    }
+
+    @return null;
 }
 
 @function -maxWidth($breakpoint) {
     $next: -next($breakpoint);
 
-    @return if($next, -minWidth($next) - .02, null);
+    @if $next {
+        @return -minWidth($next) - .02;
+    }
+
+    @return null;
 }
 
 @function -minWidth($breakpoint) {
     $min: map.get($-breakpoints, $breakpoint);
 
-    @return if($min != 0, $min, null);
+    @if $min != 0 {
+        @return $min;
+    }
+
+    @return null;
 }
 
 @mixin breakpoint-between($lower, $upper) {

package/src/css/mixin/button-active.scss

@@ -0,0 +1,6 @@
+@mixin button-active($background) {
+    &:active {
+        background: $background;
+        scale: .9875;
+    }
+}

package/src/css/mixin/focus-ring.scss

@@ -1,10 +1,10 @@
 @mixin focus-outline {
-    outline: 2px solid rgb(var(--primary-7) / 0);
+    outline: 2px solid rgb(from var(--primary-600) r g b / 0);
     outline-offset: 0;
 }
 
 @mixin focus-outline-visible($offset: 0) {
-    outline-color: rgb(var(--primary-7));
+    outline-color: var(--primary-600);
     outline-offset: $offset;
 }
 
@@ -45,7 +45,7 @@
 }
 
 @mixin focus-ring-transition($offset: 0, $within: false) {
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: focus-ring-transition-properties();
 
     @include focus-ring($offset, $within);

package/src/css/mixin/index.scss

@@ -1,3 +1,5 @@
 @forward 'breakpoints';
+@forward 'button-active';
 @forward 'focus-ring';
 @forward 'hover';
+@forward 'tree-node';

package/src/css/mixin/tree-node.scss

@@ -0,0 +1,94 @@
+@mixin tree-node-classes() {
+    // Wrapper for guide lines + expand button — no internal gap so lines align perfectly
+    .treeNodeLineArea {
+        display: flex;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+
+    // Vertical guide line for each ancestor level
+    .treeIndent {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        &.hasLine::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            background: var(--surface-stroke);
+        }
+    }
+
+    // Connector from parent to current node, with rounded elbow
+    .treeConnector {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        // Non-last siblings: full-height vertical continuation line
+        &:not(.isLast)::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            background: var(--surface-stroke);
+        }
+
+        // Rounded elbow: vertical segment from top to midpoint, curves right to expand area
+        // Overlaps the ::before vertical line for non-last nodes (same position, same color)
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 50%;
+            left: 9px;
+            right: 0;
+            border-left: 1px solid var(--surface-stroke);
+            border-bottom: 1px solid var(--surface-stroke);
+            border-bottom-left-radius: 6px;
+        }
+    }
+
+    .treeNodeExpand {
+        display: flex;
+        width: 16px;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        color: var(--foreground-secondary);
+
+        &:not(:empty) {
+            cursor: pointer;
+        }
+    }
+
+    .treeNodeColorDot {
+        display: block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .treeNodeIcon {
+        color: var(--foreground-secondary);
+        flex-shrink: 0;
+    }
+
+    .treeNodeLabel {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/src/css/reset.scss

@@ -9,11 +9,6 @@
         margin: 0;
     }
 
-    // Keyword animations.
-    //html {
-    //    interpolate-size: allow-keywords;
-    //}
-
     body {
         // Accessible line-height.
         line-height: 1.5;
@@ -71,105 +66,3 @@
         isolation: isolate;
     }
 }
-
-//@layer flux-reset {
-//    *,
-//    *::before,
-//    *::after {
-//        box-sizing: border-box;
-//    }
-//
-//    html {
-//        line-height: 1.6;
-//        -webkit-text-size-adjust: 100%;
-//        -webkit-tap-highlight-color: rgb(0 0 0 / 0);
-//        -moz-tab-size: 4;
-//        tab-size: 4;
-//    }
-//
-//    body {
-//        margin: 0;
-//        padding: 0;
-//        line-height: inherit;
-//    }
-//
-//    blockquote,
-//    dl,
-//    dd,
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6,
-//    hr,
-//    figure,
-//    p,
-//    pre {
-//        margin: 0;
-//    }
-//
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6 {
-//        font-size: inherit;
-//        font-weight: inherit;
-//    }
-//
-//    ul,
-//    ol {
-//        margin: 0;
-//    }
-//
-//    code,
-//    kbd,
-//    samp,
-//    pre {
-//        font-family: monospace;
-//        font-size: 1em;
-//    }
-//
-//    small {
-//        font-size: 80%;
-//    }
-//
-//    sub,
-//    sup {
-//        position: relative;
-//        font-size: 75%;
-//        line-height: 0;
-//        vertical-align: baseline;
-//    }
-//
-//    sub {
-//        bottom: -0.25em;
-//    }
-//
-//    sup {
-//        top: -0.5em;
-//    }
-//
-//    button,
-//    select {
-//        text-transform: none;
-//    }
-//
-//    button,
-//    input,
-//    textarea {
-//        font: inherit;
-//    }
-//
-//    a {
-//        color: inherit;
-//        text-decoration: none;
-//    }
-//
-//    b,
-//    strong {
-//        font-weight: bolder;
-//    }
-//}

package/src/css/typography.scss

@@ -1,13 +1,13 @@
 @layer flux-base {
     h1, h2, h3, h4, h5, h6 {
-        font-weight: 700;
+        font-weight: 600;
         line-height: 1.6;
         text-wrap: balance;
     }
 
     h1 {
         color: var(--foreground-prominent);
-        font-size: 30px;
+        font-size: 27px;
     }
 
     h2 {
@@ -33,10 +33,13 @@
     }
 
     a:not([class]), a[class=""] {
-        color: rgb(var(--primary-7));
+        align-self: start;
+        color: var(--primary-600);
         text-decoration: underline;
+        text-decoration-color: currentColor;
+        text-decoration-skip: auto;
         text-decoration-thickness: 1px;
-        text-underline-offset: 4px;
+        text-underline-offset: 2px;
 
         &:hover {
             text-decoration: none;
@@ -44,14 +47,18 @@
     }
 
     p {
-        line-height: 1.8;
+        line-height: 1.6;
+    }
+
+    small {
+        font-size: 14px;
     }
 
     blockquote {
         position: relative;
-        margin: 0 0 0 30px;
+        margin-left: 30px;
         padding: 15px 21px;
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         border-radius: var(--radius);
 
         &::before {
@@ -59,7 +66,7 @@
             top: 5px;
             left: -27px;
             content: '”';
-            color: rgb(var(--primary-7));
+            color: var(--primary-600);
             font-size: 39px;
             font-weight: 700;
         }
@@ -71,7 +78,7 @@
 
     img:not([class]) {
         height: unset;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
         outline: 1px solid rgb(0 0 0 / .025);
         outline-offset: -1px;
     }