@oruga-ui/theme-oruga 0.8.2 → 0.9.0

package/dist/scss/components/_button.scss

@@ -20,7 +20,7 @@ $button-border-width: h.useVar("control-border-width") !default;
 $button-border-style: solid !default;
 $button-border-color: h.useVar("control-border-color") !default;
 $button-border-radius: h.useVar("border-radius") !default;
-$button-background-color: h.useVar("control-brackground-color") !default;
+$button-background-color: h.useVar("control-background-color") !default;
 
 $button-hover-color: $button-color;
 $button-hover-background-color: $button-background-color;

package/dist/scss/components/_dialog.scss

@@ -6,7 +6,7 @@
 $dialog-spacer: calc(2 * h.useVar("control-spacer")) !default;
 $dialog-zindex: map.get(vars.$zindex, "fixed") !default;
 $dialog-box-shadow: h.useVar("overlay-box-shadow") !default;
-$dialog-background-color: h.useVar("control-brackground-color") !default;
+$dialog-background-color: h.useVar("control-background-color") !default;
 $dialog-border-width: h.useVar("control-border-width") !default;
 $dialog-border-style: solid !default;
 $dialog-border-color: h.useVar("control-border-color") !default;
@@ -138,6 +138,16 @@ $dialog-close-background-color: inherit !default;
     &--fullscreen {
         width: 100%;
         height: 100%;
+
+        .o-dialog__wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            .o-dialog__body {
+                flex-grow: 1;
+            }
+        }
     }
 
     &__wrapper {

package/dist/scss/components/_dropdown.scss

@@ -11,7 +11,7 @@ $dropdown-menu-padding: h.useVar("control-spacer") 0 !default;
 $dropdown-menu-box-shadow:
     0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
     0 0 0 1px rgba(10, 10, 10, 0.02) !default;
-$dropdown-menu-background-color: h.useVar("control-brackground-color") !default;
+$dropdown-menu-background-color: h.useVar("control-background-color") !default;
 $dropdown-menu-border-color: h.useVar("control-border-color") !default;
 $dropdown-menu-border-style: solid !default;
 $dropdown-menu-border-width: h.useVar("control-border-width") !default;

package/dist/scss/components/_input.scss

@@ -19,7 +19,7 @@ $input-border-style: solid !default;
 $input-border-color: h.useVar("control-border-color") !default;
 $input-border-radius: h.useVar("border-radius") !default;
 $input-border-radius-rounded: h.useVar("border-radius-rounded") !default;
-$input-background-color: h.useVar("control-brackground-color") !default;
+$input-background-color: h.useVar("control-background-color") !default;
 
 $input-textarea-min-height: 120px !default;
 $input-textarea-max-height: 600px !default;
@@ -167,6 +167,7 @@ $input-counter-padding: 0.25rem 0.5rem !default;
         top: 0;
         height: 100%;
         width: h.useVar("input-height");
+        z-index: 1;
     }
 
     &__icon-right {

package/dist/scss/components/_listbox.scss

@@ -3,10 +3,7 @@
 
 /* @docs */
 $listbox-disabled-opacity: h.useVar("control-disabled-opacity") !default;
-$listbox-box-shadow:
-    0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
-    0 0 0 1px rgba(10, 10, 10, 0.02) !default;
-$listbox-background-color: h.useVar("control-brackground-color") !default;
+$listbox-background-color: h.useVar("control-background-color") !default;
 $listbox-border-color: h.useVar("control-border-color") !default;
 $listbox-border-style: solid !default;
 $listbox-border-width: h.useVar("control-border-width") !default;
@@ -28,7 +25,6 @@ $listbox-item-hover-color: h.useVar("font-color") !default;
 
 .o-listbox {
     @include h.defineVar("listbox-disabled-opacity", $listbox-disabled-opacity);
-    @include h.defineVar("listbox-box-shadow", $listbox-box-shadow);
 
     @include h.defineVar("listbox-background-color", $listbox-background-color);
     @include h.defineVar("listbox-border-style", $listbox-border-style);
@@ -66,7 +62,6 @@ $listbox-item-hover-color: h.useVar("font-color") !default;
     position: relative;
     overflow: hidden;
 
-    box-shadow: h.useVar("listbox-box-shadow");
     background-color: h.useVar("listbox-background-color");
     border-color: h.useVar("listbox-border-color");
     border-style: h.useVar("listbox-border-style");
@@ -92,10 +87,13 @@ $listbox-item-hover-color: h.useVar("font-color") !default;
     }
 
     &__list {
-        outline: none;
-        list-style: none;
-        padding: 0;
-        margin: 0;
+        &,
+        > ul {
+            outline: none;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
 
         &:only-child {
             border-radius: h.useVar("listbox-border-radius");
@@ -151,11 +149,11 @@ $listbox-item-hover-color: h.useVar("font-color") !default;
             );
         }
 
-        &--clickable {
+        &--selectable {
             @include h.clickable;
         }
 
-        &--clickable:not(&--active) {
+        &--selectable:not(&--selected) {
             &:hover,
             &.o-listbox__item--focused {
                 @include h.defineVar(

package/dist/scss/components/_modal.scss

@@ -13,7 +13,7 @@ $modal-content-max-height: calc(100vh - 160px) !default;
 $modal-content-max-width: calc(100vw - 160px) !default;
 $modal-content-box-shadow: h.useVar("overlay-box-shadow") !default;
 $modal-content-border-radius: h.useVar("border-radius") !default;
-$modal-content-background-color: h.useVar("control-brackground-color") !default;
+$modal-content-background-color: h.useVar("control-background-color") !default;
 
 $modal-close-top: 20px !default;
 $modal-close-right: 20px !default;

package/dist/scss/components/_pagination.scss

@@ -24,7 +24,7 @@ $pagination-button-border-radius-rounded: h.useVar(
     "border-radius-rounded"
 ) !default;
 $pagination-button-background-color: h.useVar(
-    "control-brackground-color"
+    "control-background-color"
 ) !default;
 
 $pagination-button-hover-color: $pagination-button-color;

package/dist/scss/components/_select.scss

@@ -14,7 +14,7 @@ $select-font-weight: h.useVar("font-weight") !default;
 $select-line-height: h.useVar("line-height") !default;
 
 $select-box-shadow: h.useVar("control-box-shadow-inset") !default;
-$select-background-color: h.useVar("control-brackground-color") !default;
+$select-background-color: h.useVar("control-background-color") !default;
 $select-border-color: h.useVar("control-border-color") !default;
 $select-border-style: solid !default;
 $select-border-width: h.useVar("control-border-width") !default;
@@ -160,6 +160,7 @@ $select-arrow-size: 1em !default;
         top: 0;
         height: 100%;
         width: h.useVar("select-height");
+        z-index: 1;
     }
 
     &__icon-right {

package/dist/scss/components/_sidebar.scss

@@ -15,7 +15,7 @@ $sidebar-content-max-width: 50vw !default;
 $sidebar-content-max-height: 50vh !default;
 $sidebar-content-box-shadow: h.useVar("overlay-box-shadow") !default;
 $sidebar-content-background-color: h.useVar(
-    "control-brackground-color"
+    "control-background-color"
 ) !default;
 $sidebar-content-border-radius: h.useVar("border-radius") !default;
 $sidebar-content-border-width: h.useVar("control-border-width") !default;

package/dist/scss/components/_slider.scss

@@ -19,7 +19,7 @@ $slider-track-border-color: h.useVar("grey") !default;
 $slider-track-border-radius: h.useVar("border-radius") !default;
 $slider-track-background-color: h.useVar("grey-lighter") !default;
 
-$slider-fill-box-shadow: h.useVar("control-focus-box-shadow") !default;
+$slider-fill-box-shadow: h.useVar("control-box-shadow") !default;
 $slider-fill-background-color: h.useVar("primary") !default;
 
 $slider-thumb-size: h.useVar("slider-font-size");
@@ -33,7 +33,7 @@ $slider-thumb-border-style: solid !default;
 $slider-thumb-border-color: h.useVar("grey-light") !default;
 $slider-thumb-border-radius: h.useVar("border-radius") !default;
 $slider-thumb-border-radius-rounded: h.useVar("border-radius-rounded") !default;
-$slider-thumb-background-color: h.useVar("control-brackground-color") !default;
+$slider-thumb-background-color: h.useVar("control-background-color") !default;
 $slider-thumb-transform: scale(1.25) !default;
 
 $slider-tick-to-track-ratio: 0.5 !default;
@@ -265,7 +265,7 @@ $slider-tick-radius: h.useVar("border-radius") !default;
         color: h.useVar("slider-tick-color");
         font-size: h.useVar("slider-tick-font-size");
         font-weight: h.useVar("slider-tick-font-weight");
-        line-height: h.useVar("$slider-tick-line-height");
+        line-height: h.useVar("slider-tick-line-height");
     }
 
     &--disabled {

package/dist/scss/components/_steps.scss

@@ -12,7 +12,7 @@ $steps-step-font-weight: 500 !default;
 $steps-step-line-height: h.useVar("line-height") !default;
 
 $steps-step-border-color: h.useVar(
-    "control-brackground-color"
+    "control-background-color"
 ) !default; // color scheme is inverted for steps
 $steps-step-background-color: h.useVar(
     "control-border-color"

package/dist/scss/components/_switch.scss

@@ -20,7 +20,7 @@ $switch-border-width: h.useVar("control-border-width") !default;
 $switch-border-radius: h.useVar("border-radius") !default;
 $switch-border-radius-rounded: h.useVar("border-radius-rounded") !default;
 $switch-background-color: h.useVar("grey-light") !default;
-$switch-toggle-background-color: vars.$control-brackground-color !default;
+$switch-toggle-background-color: vars.$control-background-color !default;
 
 $switch-checked-background-color: h.useVar("primary") !default;
 $switch-checked-border-color: h.useVar("primary") !default;

package/dist/scss/components/_table.scss

@@ -8,7 +8,7 @@ $table-border-width: h.useVar("control-border-width") !default;
 $table-border-style: solid !default;
 $table-border-color: transparent !default;
 $table-border-radius: h.useVar("border-radius") !default;
-$table-background-color: h.useVar("control-brackground-color") !default;
+$table-background-color: h.useVar("control-background-color") !default;
 
 $table-focus-border-color: h.useVar("primary") !default;
 $table-focus-box-shadow: vars.$control-focus-box-shadow h.useVar("focus") !default;
@@ -254,12 +254,15 @@ $table-card-margin: 0 0 1rem 0;
             height: h.useVar("table-sticky-header-height");
             overflow-y: auto;
 
-            .o-table__th:not(.o-table__th--sticky) {
+            .o-table__th {
                 position: -webkit-sticky;
                 position: sticky;
                 top: 0;
                 background: h.useVar("table-background-color");
-                z-index: calc(h.useVar("table-sticky-zindex") + 1);
+
+                &:not(.o-table__th--sticky) {
+                    z-index: calc(h.useVar("table-sticky-zindex") + 1);
+                }
             }
         }
 
@@ -444,12 +447,12 @@ $table-card-margin: 0 0 1rem 0;
             position: -webkit-sticky;
             position: sticky;
             left: 0;
-            z-index: calc(h.useVar("table-sticky-zindex") + 1);
+            z-index: calc(h.useVar("table-sticky-zindex") + 2);
             background-color: h.useVar("table-background-color");
         }
 
         &-detailed {
-            width: h.useVar("table-th-detail-width");
+            width: h.useVar("table-td-detail-chevron-width");
         }
     }
 

package/dist/scss/components/_tag.scss

@@ -87,7 +87,7 @@ $tag-border-radius-rounded: h.useVar("border-radius-rounded") !default;
         position: absolute;
         top: 0;
         left: 100%;
-        transform: translateX(-50%);
+        transform: translateX(-50%) translateY(-5px);
     }
 
     &__icon {

package/dist/scss/components/_tree.scss

@@ -0,0 +1,136 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
+/* @docs */
+$tree-spacer: 0.25rem !default;
+$tree-border: 1px solid h.useVar("secondary") !default;
+$tree-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$tree-item-padding: 0.5em 0.75em !default;
+$tree-item-color: h.useVar("font-color") !default;
+$tree-item-font-size: h.useVar("font-size") !default;
+$tree-item-font-weight: h.useVar("font-weight") !default;
+$tree-item-line-heigth: h.useVar("line-height") !default;
+
+$tree-item-border: unset !default;
+$tree-item-border-radius: h.useVar("border-radius") !default;
+$tree-item-background-color: transparent !default;
+
+$tree-item-hover-color: h.useVar("black") !default;
+$tree-item-hover-background-color: h.useVar("grey-lightest") !default;
+$tree-item-active-color: h.useVar("primary-invert") !default;
+$tree-item-active-background-color: h.useVar("primary") !default;
+/* @docs */
+
+.o-tree {
+    @include h.defineVar("tree-spacer", $tree-spacer);
+    @include h.defineVar("tree-border", $tree-border);
+    @include h.defineVar("tree-item-padding", $tree-item-padding);
+    @include h.defineVar("tree-item-color", $tree-item-color);
+    @include h.defineVar("tree-item-font-size", $tree-item-font-size);
+    @include h.defineVar("tree-item-font-weight", $tree-item-font-weight);
+    @include h.defineVar("tree-item-line-heigth", $tree-item-line-heigth);
+    @include h.defineVar("tree-item-border", $tree-item-border);
+    @include h.defineVar("tree-item-border-radius", $tree-item-border-radius);
+    @include h.defineVar(
+        "tree-item-background-color",
+        $tree-item-background-color
+    );
+    @include h.defineVar("tree-item-hover-color", $tree-item-hover-color);
+    @include h.defineVar(
+        "tree-item-hover-background-color",
+        $tree-item-hover-background-color
+    );
+    @include h.defineVar("tree-item-active-color", $tree-item-active-color);
+    @include h.defineVar(
+        "tree-item-active-background-color",
+        $tree-item-active-background-color
+    );
+    @include h.defineVar("tree-disabled-opacity", $tree-disabled-opacity);
+
+    &__list,
+    &__item {
+        list-style: none;
+        padding: unset;
+        margin: unset;
+    }
+
+    &__subtree {
+        border-left: h.useVar("tree-border");
+        padding-left: calc(2 * h.useVar("tree-spacer"));
+        margin-left: calc(5 * h.useVar("tree-spacer"));
+        margin-top: h.useVar("tree-spacer");
+        margin-bottom: h.useVar("tree-spacer");
+    }
+
+    &__item {
+        & + & {
+            margin-top: h.useVar("tree-spacer");
+        }
+
+        &-icon,
+        &-toggle-icon {
+            margin-right: h.useVar("tree-spacer");
+        }
+
+        &-label {
+            // add clickable cursor
+            @include h.clickable;
+
+            // disable default appearance
+            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+
+            display: block;
+            padding: h.useVar("tree-item-padding");
+
+            color: h.useVar("tree-item-color");
+            font-size: h.useVar("tree-item-font-size");
+            font-weight: h.useVar("tree-item-font-weight");
+            line-height: h.useVar("tree-item-line-height");
+            background-color: h.useVar("tree-item-background-color");
+            border: h.useVar("tree-item-border");
+            border-radius: h.useVar("tree-item-border-radius");
+        }
+
+        &:focus-visible,
+        &--focused {
+            & > .o-tree__item-label {
+                @include h.defineVar(
+                    "tree-item-color",
+                    h.useVar("tree-item-hover-color")
+                );
+                @include h.defineVar(
+                    "tree-item-background-color",
+                    h.useVar("tree-item-hover-background-color")
+                );
+            }
+        }
+
+        &--selected > .o-tree__item-label {
+            @include h.defineVar(
+                "tree-item-color",
+                h.useVar("tree-item-active-color")
+            );
+            @include h.defineVar(
+                "tree-item-background-color",
+                h.useVar("tree-item-active-background-color")
+            );
+        }
+
+        &--disabled {
+            @include h.disabled(h.useVar("tree-disabled-opacity"));
+        }
+    }
+
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar(
+                "tree-item-font-size",
+                h.useVar("size-#{$name}")
+            );
+        }
+    }
+}

package/dist/scss/theme.scss

@@ -41,4 +41,5 @@
 @forward "components/taginput";
 @forward "components/timepicker";
 @forward "components/tooltip";
+@forward "components/tree";
 @forward "components/upload";

package/dist/scss/utils/_root.scss

@@ -79,8 +79,8 @@ $host-selector: if(vars.$enable-host, ":root, :host", ":root");
         vars.$control-focus-box-shadow
     );
     @include h.defineVar(
-        "control-brackground-color",
-        vars.$control-brackground-color
+        "control-background-color",
+        vars.$control-background-color
     );
     @include h.defineVar("control-border-color", vars.$control-border-color);
     @include h.defineVar("control-border-width", vars.$control-border-width);

package/dist/scss/utils/_variables.scss

@@ -110,7 +110,7 @@ $border-radius: 4px !default;
 $border-radius-rounded: 9999px !default;
 
 $control-spacer: 0.5em !default;
-$control-brackground-color: $white !default;
+$control-background-color: $white !default;
 $control-border-color: $grey-lighter !default;
 $control-border-width: 1px !default;
 $control-height: 2.25em !default;