@flux-ui/components 3.0.0-next.2 → 3.0.0-next.4

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

@@ -1,63 +1,59 @@
 @use '$flux/css/mixin';
 
-@value baseAutoGrid from './base/Grid.module.scss';
+.aspectRatio {
+    position: relative;
+    flex-shrink: 0;
 
-@layer flux-base {
-    .aspectRatio {
-        position: relative;
-        flex-shrink: 0;
-
-        > * {
-            height: 100%;
-            width: 100%;
-        }
+    > * {
+        height: 100%;
+        width: 100%;
     }
+}
 
-    .autoGrid {
-        composes: baseAutoGrid;
-    }
+.autoGrid {
+    composes: baseAutoGrid from './base/Grid.module.scss';
+}
 
-    .container {
-        margin-left: auto;
-        margin-right: auto;
-        padding-left: var(--gutter);
-        padding-right: var(--gutter);
-        width: 100%;
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
+    width: 100%;
 
-        @include mixin.breakpoint-max-widths;
-    }
+    @include mixin.breakpoint-max-widths;
+}
 
-    .spacer {
-        flex-grow: 1;
-    }
+.spacer {
+    flex-grow: 1;
+}
 
-    .stack {
-        gap: var(--gap, 0);
+.stack {
+    gap: var(--gap, 0);
 
-        &.isCentered {
-            place-content: center;
-            place-items: center;
-        }
+    &.isCentered {
+        place-content: center;
+        place-items: center;
+    }
 
-        &.isFill {
-            width: 100%;
-        }
+    &.isFill {
+        width: 100%;
+    }
 
-        &.isWrapping {
-            flex-wrap: wrap;
-        }
+    &.isWrapping {
+        flex-wrap: wrap;
     }
+}
 
-    .stackHorizontal {
-        composes: stack;
+.stackHorizontal {
+    composes: stack;
 
-        display: flex;
-    }
+    display: flex;
+}
 
-    .stackVertical {
-        composes: stack;
+.stackVertical {
+    composes: stack;
 
-        display: flex;
-        flex-flow: column;
-    }
+    display: flex;
+    flex-flow: column;
 }

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

@@ -1,13 +1,11 @@
-@value stackHorizontal, stackVertical from './Layout.module.scss';
-
 .legendHorizontal {
-    composes: stackHorizontal;
+    composes: stackHorizontal from './Layout.module.scss';
 
     gap: 12px 21px;
 }
 
 .legendVertical {
-    composes: stackVertical;
+    composes: stackVertical from './Layout.module.scss';
 
     gap: 12px;
 }

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

@@ -1,8 +1,5 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
-@value basePane from './base/Pane.module.scss';
-
 .menu {
     display: flex;
     flex-flow: column;
@@ -40,7 +37,7 @@
 }
 
 .menuItem {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     height: unset;
     min-height: 42px;
@@ -62,13 +59,13 @@
 }
 
 .menuItemIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground-prominent);
 }
 
 .menuItemLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     flex-grow: 1;
     font-weight: 400;
@@ -89,10 +86,8 @@
         color: rgb(var(--primary-0));
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-7));
     }
 
     &:active {
@@ -118,10 +113,8 @@
         color: rgb(var(--primary-8));
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-2));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-2));
     }
 
     &:active {
@@ -132,10 +125,8 @@
 [dark] .menuItemHighlighted {
     background: rgb(var(--primary-11) / .5);
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-11) / .5);
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-11) / .5);
     }
 
     &:active {
@@ -148,7 +139,7 @@
 }
 
 .menuItemSelectableIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 }
 
 .menuItemSelected .menuItemSelectableIcon {
@@ -282,7 +273,7 @@
     }
 }
 
-:local(.basePane) > .menu {
+.basePane > .menu {
     margin-left: 9px;
     margin-right: 9px;
 
@@ -299,7 +290,7 @@
     }
 }
 
-:local(.expandableBody) > .menu {
+.expandableBody > .menu {
     margin-left: 9px;
     margin-right: 9px;
 

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value basePane, basePaneElement from './base/Pane.module.scss';
-
 .notice {
-    composes: basePaneElement;
+    composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
     padding: 12px 15px;
@@ -274,7 +272,7 @@
     }
 }
 
-:local(.basePane) > .notice {
+.basePane > .notice {
     padding-left: 21px;
     padding-right: 21px;
 }

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

@@ -4,7 +4,7 @@
     inset: 0;
     height: 100dvh;
     width: 100dvw;
-    background: rgb(var(--gray-3) / .5);
+    background: rgb(var(--gray-8) / .5);
     backdrop-filter: blur(3px) saturate(180%);
     z-index: 10000;
 
@@ -25,6 +25,10 @@
     }
 }
 
+[dark] .overlay {
+    background: rgb(0 0 0 / .5);
+}
+
 .overlaySmall {
     composes: overlay;
 

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

@@ -1,91 +1,86 @@
-@value baseAutoGrid from './base/Grid.module.scss';
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
-@layer flux-base {
-    .pane {
-        composes: basePaneStructure;
-    }
+.pane {
+    composes: basePaneStructure from './base/Pane.module.scss';
+}
 
-    .paneDefault {
-        composes: pane;
+.paneDefault {
+    composes: pane;
 
-        box-shadow: var(--shadow-sm);
-    }
+    box-shadow: var(--shadow-sm);
+}
 
-    .paneFlat {
-        composes: pane;
-    }
+.paneFlat {
+    composes: pane;
+}
 
-    .paneWell {
-        composes: pane;
+.paneWell {
+    composes: pane;
 
-        background: rgb(var(--gray-1));
-    }
-
-    .paneHeader {
-        composes: basePaneElement;
+    background: rgb(var(--gray-1));
+}
 
-        display: flex;
-        padding: 21px 21px 0;
-        gap: 15px;
+.paneHeader {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-        &:only-child {
-            padding: 21px;
-        }
+    display: flex;
+    padding: 21px 21px 0;
+    gap: 15px;
 
-        &:has(+ :local(.basePaneElement):not(.paneBody)) {
-            padding: 21px;
-        }
+    &:only-child {
+        padding: 21px;
     }
 
-    .paneHeaderCaption {
-        display: flex;
-        flex-flow: column;
-        flex-grow: 1;
-        line-height: 24px;
+    &:has(+ .basePaneElement:not(.paneBody)) {
+        padding: 21px;
+    }
+}
 
-        :is(strong) {
-            color: var(--foreground-prominent);
-            font-weight: 600;
+.paneHeaderCaption {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    line-height: 24px;
 
-            &:has(+ :is(span)) {
-                font-size: 16px;
-            }
-        }
+    :is(strong) {
+        color: var(--foreground-prominent);
+        font-weight: 600;
 
-        :is(span) {
-            font-size: 14px;
+        &:has(+ :is(span)) {
+            font-size: 16px;
         }
     }
 
-    .paneHeaderIcon {
-        margin-top: 2px;
-        color: rgb(var(--primary-7));
+    :is(span) {
+        font-size: 14px;
     }
+}
 
-    .paneBody {
-        composes: basePaneElement;
+.paneHeaderIcon {
+    margin-top: 2px;
+    color: rgb(var(--primary-7));
+}
 
-        padding: 21px;
-    }
+.paneBody {
+    composes: basePaneElement from './base/Pane.module.scss';
 
-    .paneBody + .paneBody {
-        padding-top: 0;
-    }
+    padding: 21px;
+}
 
-    .paneFooter {
-        composes: basePaneElement;
+.paneBody + .paneBody {
+    padding-top: 0;
+}
 
-        display: flex;
-        padding: 21px;
-        gap: 9px;
-        background: rgb(var(--gray-1));
-        border-top: 1px solid rgb(var(--gray-2));
-    }
+.paneFooter {
+    composes: basePaneElement from './base/Pane.module.scss';
+
+    display: flex;
+    padding: 21px;
+    gap: 9px;
+    background: rgb(var(--gray-1));
+    border-top: 1px solid rgb(var(--gray-2));
 }
 
 .paneLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .paneTag {
@@ -138,7 +133,7 @@
 
     overflow: hidden;
 
-    > :local(.baseAutoGrid) {
+    > .baseAutoGrid {
         margin-right: -1px;
         margin-bottom: -1px;
 

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .progressBar {
     position: relative;
 }
@@ -55,11 +53,11 @@
     white-space: nowrap;
 }
 
-:local(.basePaneStructure) > .progressBar:first-child {
+.basePaneStructure > .progressBar:first-child {
     margin: 9px 9px 0;
 }
 
-:local(.basePaneStructure) > .progressBar:last-child {
+.basePaneStructure > .progressBar:last-child {
     margin: 0 9px 9px;
 }
 

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .snackbar {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
 
     display: flex;
     box-shadow: var(--shadow-xl), var(--shadow-2xl);

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

@@ -1,5 +1,3 @@
-@value sparklesContainer, sparklesContainerActive, sparklesParticles from './base/Effect.module.scss';
-
 .stepperStep {
     position: relative;
 }
@@ -42,7 +40,7 @@
 }
 
 .stepperStepsItem {
-    composes: sparklesContainer;
+    composes: sparklesContainer from './base/Effect.module.scss';
 
     position: relative;
     display: flex;
@@ -74,7 +72,7 @@
 }
 
 .stepperStepsItemComplete {
-    composes: sparklesContainerActive;
+    composes: sparklesContainerActive from './base/Effect.module.scss';
     composes: stepperStepsItem;
 
     background: rgb(var(--primary-7));
@@ -99,5 +97,5 @@
 }
 
 .stepperStepsItemParticles {
-    composes: sparklesParticles;
+    composes: sparklesParticles from './base/Effect.module.scss';
 }

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

@@ -1,7 +1,5 @@
-@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
-
 .table {
-    composes: basePaneElement;
+    composes: basePaneElement from './base/Pane.module.scss';
 
     position: relative;
     overflow: auto;
@@ -21,7 +19,7 @@
 }
 
 .tableLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .tableRow {
@@ -134,31 +132,31 @@ tfoot .tableCell {
     }
 }
 
-:local(.basePaneStructure) > .table .tableCell:first-child .tableCellContent {
+.basePaneStructure > .table .tableCell:first-child .tableCellContent {
     padding-left: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableCell:last-child .tableCellContent {
+.basePaneStructure > .table .tableCell:last-child .tableCellContent {
     padding-right: 21px;
 }
 
-:local(.basePaneStructure) > .table .tableActions {
+.basePaneStructure > .table .tableActions {
     margin-right: -3px;
 }
 
-:local(.basePaneStructure) > .table :is(caption) {
+.basePaneStructure > .table :is(caption) {
     padding: 12px 21px;
     border-top: 1px solid rgb(var(--gray-3));
 }
 
-:local(.basePaneStructure) > .table .tableLoader {
+.basePaneStructure > .table .tableLoader {
     border-radius: var(--radius);
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
     padding-left: 0;
 }
 
-:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
+:not(.basePaneStructure) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
     padding-right: 0;
 }

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

@@ -1,5 +1,3 @@
-@value basePane, basePaneStructure from './base/Pane.module.scss';
-
 .toolbar {
     padding: 6px;
     contain: paint;
@@ -12,7 +10,7 @@
 }
 
 .toolbarFlat {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: relative;
@@ -21,7 +19,7 @@
 }
 
 .toolbarFloating {
-    composes: basePane;
+    composes: basePane from './base/Pane.module.scss';
     composes: toolbar;
 
     position: absolute;
@@ -55,7 +53,7 @@
     }
 }
 
-:local(.basePaneStructure) > .toolbarFlat {
+.basePaneStructure > .toolbarFlat {
     padding: 12px 15px;
     background: rgb(var(--gray-1));
     border: 1px solid rgb(var(--gray-11) / .05);

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

@@ -1,38 +1,36 @@
-@layer flux-base {
-    .basePane {
-        background: rgb(var(--gray-0));
-        background-clip: padding-box;
-        border: 1px solid rgb(var(--gray-11) / .05);
-        border-radius: var(--radius);
-    }
+.basePane {
+    background: rgb(var(--gray-0));
+    background-clip: padding-box;
+    border: 1px solid rgb(var(--gray-11) / .05);
+    border-radius: var(--radius);
+}
 
-    [dark] .basePane {
-        border-color: rgb(var(--gray-3));
-    }
+[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);
-        border-radius: inherit;
-        z-index: 100;
-    }
+.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);
+    border-radius: inherit;
+    z-index: 100;
+}
 
-    .basePaneStructure {
-        composes: basePane;
+.basePaneStructure {
+    composes: basePane;
 
-        position: relative;
-    }
+    position: relative;
+}
 
-    .basePaneStructure > .basePaneStructure {
-        background: unset;
-        border: 0;
-        box-shadow: none;
-    }
+.basePaneStructure > .basePaneStructure {
+    background: unset;
+    border: 0;
+    box-shadow: none;
 }
 
 .basePane > .basePaneElement,

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

@@ -1,5 +1,3 @@
-@value sliderThumb from './Slider.module.scss';
-
 .coordinatePicker {
     position: relative;
     aspect-ratio: 5 / 3;
@@ -10,7 +8,7 @@
 }
 
 .coordinatePickerThumb {
-    composes: sliderThumb;
+    composes: sliderThumb from './Slider.module.scss';
 
     z-index: 1;