@oruga-ui/theme-oruga 0.7.1 → 0.8.0

package/dist/scss/components/_select.scss

@@ -1,144 +1,148 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$select-background-color: #fff !default;
-$select-border-color: var(--#{$prefix}grey-lighter) !default;
+$select-height: h.useVar("control-height") !default;
+$select-padding: h.useVar("control-padding-vertical")
+    h.useVar("control-padding-horizontal") !default;
+$select-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$select-color: h.useVar("font-color") !default;
+$select-font-size: h.useVar("font-size") !default;
+$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-border-color: h.useVar("control-border-color") !default;
 $select-border-style: solid !default;
-$select-border-width: 1px !default;
-$select-border-radius: var(--#{$prefix}base-border-radius) !default;
-$select-rounded-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$select-box-shadow: $control-box-shadow !default;
-$select-color: #363636 !default;
-$select-icon-zindex: 4 !default;
-$select-height: $control-height !default;
-$select-line-height: var(--#{$prefix}base-line-height) !default;
-$select-margin: 0 !default;
-$select-padding: $control-padding-vertical $control-padding-horizontal !default;
-$select-arrow-color: $select-color !default;
-$select-arrow-size: 1rem !default;
-$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$select-border-width: h.useVar("control-border-width") !default;
+$select-border-radius: h.useVar("border-radius") !default;
+$select-border-radius-rounded: h.useVar("border-radius-rounded") !default;
+
+$select-multiple-padding: h.useVar("control-spacer") !default;
+$select-arrow-color: vars.$font-color !default;
+$select-arrow-size: 1em !default;
 /* @docs */
 
 @function svg_arrow($color) {
-    $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
+    $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color}"/></g>';
     $end: "</svg>";
 
-    @return svg-encode("#{$start}#{$content}#{$end}");
+    @return h.svg-encode("#{$start}#{$content}#{$end}");
 }
 
 .o-select {
-    display: inline-flex;
+    @include h.defineVar("select-height", $select-height);
+    @include h.defineVar("select-padding", $select-padding);
+    @include h.defineVar("select-disabled-opacity", $select-disabled-opacity);
+
+    @include h.defineVar("select-color", $select-color);
+    @include h.defineVar("select-font-size", $select-font-size);
+    @include h.defineVar("select-font-weight", $select-font-weight);
+    @include h.defineVar("select-line-height", $select-line-height);
+
+    @include h.defineVar("select-box-shadow", $select-box-shadow);
+    @include h.defineVar("select-background-color", $select-background-color);
+    @include h.defineVar("select-border-color", $select-border-color);
+    @include h.defineVar("select-border-style", $select-border-style);
+    @include h.defineVar("select-border-width", $select-border-width);
+    @include h.defineVar("select-border-radius", $select-border-radius);
+    @include h.defineVar(
+        "select-border-radius-rounded",
+        $select-border-radius-rounded
+    );
+    @include h.defineVar("select-arrow-size", $select-arrow-size);
+    @include h.defineVar(
+        "select-arrow-background-image",
+        url(svg_arrow($select-arrow-color))
+    );
+    @include h.defineVar("select-multiple-padding", $select-multiple-padding);
+
+    // define focus shadow effect
+    @include h.focusable(".o-select__input");
+
+    display: inline-block;
     position: relative;
 
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("select-font-size", h.useVar("size-#{$name}"));
+        }
+    }
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        $color: list.nth($pair, 1);
+        &--#{$name} {
+            @include h.defineVar("select-border-color", h.useVar($name));
+            @include h.defineVar(
+                "select-arrow-background-image",
+                url(svg_arrow($color))
+            );
+        }
+    }
+
     &__input {
-        -moz-appearance: none;
-        -webkit-appearance: none;
+        // remove default appearance
+        @include h.removeAppearance;
+
         display: inline-block;
         position: relative;
-        vertical-align: top;
-        cursor: pointer;
-        justify-content: flex-start;
-        align-items: center;
-
-        box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
-        background-color: var(
-            --#{$prefix}select-background-color,
-            $select-background-color
-        );
-        border-color: var(
-            --#{$prefix}select-border-color,
-            $select-border-color
-        );
-        border-width: var(
-            --#{$prefix}select-border-width,
-            $select-border-width
-        );
-        border-style: var(
-            --#{$prefix}select-border-style,
-            $select-border-style
-        );
-        border-radius: var(
-            --#{$prefix}select-border-radius,
-            $select-border-radius
-        );
-        color: var(--#{$prefix}select-color, $select-color);
-        font-size: var(--#{$prefix}base-font-size, $base-font-size);
-        height: var(--#{$prefix}select-height, $select-height);
-        line-height: var(--#{$prefix}select-line-height, $select-line-height);
-        padding: var(--#{$prefix}select-padding, $select-padding);
-        margin: var(--#{$prefix}select-margin, $select-margin);
+
+        height: h.useVar("select-height");
+        padding: h.useVar("select-padding");
+
+        color: h.useVar("select-color");
+        font-size: h.useVar("select-font-size");
+        font-weight: h.useVar("select-font-weight");
+        line-height: h.useVar("select-line-height");
+
+        box-shadow: h.useVar("select-box-shadow");
+        background-color: h.useVar("select-background-color");
+        border-color: h.useVar("select-border-color");
+        border-style: h.useVar("select-border-style");
+        border-width: h.useVar("select-border-width");
+        border-radius: h.useVar("select-border-radius");
 
         &--arrowed {
-            background-image: url(svg_arrow($select-arrow-color));
+            background-image: h.useVar("select-arrow-background-image");
             background-repeat: no-repeat;
-            background-size: var(
-                --#{$prefix}select-arrow-size,
-                $select-arrow-size
-            );
+            background-size: h.useVar("select-arrow-size");
             background-position: calc(
-                    100% - var(
-                            --#{$prefix}select-arrow-size,
-                            $select-arrow-size
-                        ) *
-                        0.5
+                    100% - h.useVar("select-arrow-size") * 0.5
                 )
                 center;
-            padding-right: calc(
-                var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
-            );
-        }
-
-        &--placeholder {
-            opacity: var(
-                --#{$prefix}select-placeholder-opacity,
-                $select-placeholder-opacity
-            );
+            padding-right: calc(h.useVar("select-arrow-size") * 2);
         }
 
         &--iconspace-left {
-            padding-left: var(--#{$prefix}select-height, $select-height);
+            padding-left: h.useVar("select-height");
         }
 
         &--iconspace-right {
-            padding-right: var(--#{$prefix}select-height, $select-height);
-        }
-
-        &[disabled] {
-            cursor: inherit;
+            padding-right: h.useVar("select-height");
         }
     }
 
-    // size sizes
-    @each $name, $value in $sizes {
-        &--#{$name} .o-select__input {
-            font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
-        }
-    }
-
-    // color variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
-        &--#{$name} .o-select__input {
-            --#{$prefix}focus: #{createFocus($color)};
-
-            border-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
+    &--rounded {
+        @include h.defineVar(
+            "select-border-radius",
+            h.useVar("select-border-radius-rounded")
+        );
     }
 
-    &--rounded .o-select__input {
-        border-radius: var(
-            --#{$prefix}select-rounded-border-radius,
-            $select-rounded-border-radius
-        );
+    &--disabled {
+        @include h.disabled(h.useVar("select-disabled-opacity"));
     }
 
     &--expanded {
         width: 100%;
         flex-grow: 1;
+        flex-shrink: 1;
 
         .o-select__input {
             width: 100%;
@@ -147,7 +151,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 
     &--multiple .o-select__input {
         height: auto;
-        padding: 0;
+        padding: h.useVar("select-multiple-padding");
     }
 
     &__icon-left,
@@ -155,8 +159,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
         position: absolute;
         top: 0;
         height: 100%;
-        width: var(--#{$prefix}select-height, $select-height);
-        z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
+        width: h.useVar("select-height");
     }
 
     &__icon-right {
@@ -166,14 +169,4 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
     &__icon-left {
         left: 0;
     }
-
-    // focus effect
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        .o-select__input {
-            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-            outline: none;
-        }
-    }
 }

package/dist/scss/components/_sidebar.scss

@@ -1,116 +1,132 @@
-@use "sass:list";
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
-$sidebar-box-shadow: 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) !default;
-$sidebar-content-background-color: var(--#{$prefix}grey-lighter) !default;
-$sidebar-border-radius: var(--#{$prefix}base-border-radius) !default;
-$sidebar-border-width: 1px !default;
-$sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
-$sidebar-reduced-width: 80px !default;
-$sidebar-width: 260px !default;
-$sidebar-zindex: 100 !default;
+$sidebar-zindex: map.get(vars.$zindex, "fixed") !default;
+
+$sidebar-overlay-background-color: h.useVar(
+    "overlay-background-color"
+) !default;
+$sidebar-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
+
+$sidebar-content-zindex: map.get(vars.$zindex, "sidebar") !default;
+$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"
+) !default;
+$sidebar-content-border-radius: h.useVar("border-radius") !default;
+$sidebar-content-border-width: h.useVar("control-border-width") !default;
+$sidebar-content-border-style: solid !default;
+$sidebar-content-border-color: h.useVar("control-border-color") !default;
 /* @docs */
 
 .o-sidebar {
+    @include h.defineVar("sidebar-zindex", $sidebar-zindex);
+    @include h.defineVar(
+        "sidebar-overlay-background-color",
+        $sidebar-overlay-background-color
+    );
+    @include h.defineVar("sidebar-overlay-zindex", $sidebar-overlay-zindex);
+
+    @include h.defineVar("sidebar-content-zindex", $sidebar-content-zindex);
+    @include h.defineVar(
+        "sidebar-content-box-shadow",
+        $sidebar-content-box-shadow
+    );
+    @include h.defineVar(
+        "sidebar-content-background-color",
+        $sidebar-content-background-color
+    );
+    @include h.defineVar(
+        "sidebar-content-border-radius",
+        $sidebar-content-border-radius
+    );
+    @include h.defineVar(
+        "sidebar-content-border-width",
+        $sidebar-content-border-width
+    );
+    @include h.defineVar(
+        "sidebar-content-border-style",
+        $sidebar-content-border-style
+    );
+    @include h.defineVar(
+        "sidebar-content-border-color",
+        $sidebar-content-border-color
+    );
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+    // disable clickable
+    pointer-events: none;
+
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
+    right: 0;
+    top: 0;
     height: 100%;
     width: 100%;
-    display: none;
+    z-index: h.useVar("sidebar-zindex");
+
+    &__overlay {
+        pointer-events: auto;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        background-color: h.useVar("sidebar-overlay-background-color");
+        z-index: h.useVar("sidebar-overlay-zindex");
+    }
 
     &__content {
+        pointer-events: auto;
         position: absolute;
-        background-color: var(
-            --#{$prefix}sidebar-content-background-color,
-            $sidebar-content-background-color
-        );
-        border-radius: var(
-            --#{$prefix}sidebar-border-radius,
-            $sidebar-border-radius
-        );
-        box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
-
-        @each $name, $pair in $colors {
-            $color: list.nth($pair, 1);
-            &--#{$name} {
-                background-color: var(--#{$prefix}variant-#{$name}), $color;
-            }
-        }
+        overflow: auto;
+        z-index: h.useVar("sidebar-content-zindex");
 
-        // position
-        &--right,
-        &--left {
-            transition: width var(--#{$prefix}transition-duration)
-                var(--#{$prefix}transition-timing);
-            width: var(--#{$prefix}sidebar-width, $sidebar-width);
-        }
+        background-color: h.useVar("sidebar-content-background-color");
+        border-width: 0;
+        border-style: h.useVar("sidebar-content-border-style");
+        border-color: h.useVar("sidebar-content-border-color");
+        border-radius: h.useVar("sidebar-content-border-radius");
 
-        &--top,
-        &--bottom {
-            transition: height var(--#{$prefix}transition-duration)
-                var(--#{$prefix}transition-timing);
-            height: var(--#{$prefix}sidebar-width, $sidebar-width);
-        }
+        box-shadow: h.useVar("sidebar-content-box-shadow");
+
+        transition:
+            width h.useVar("transition-duration") h.useVar("transition-timing"),
+            height h.useVar("transition-duration") h.useVar("transition-timing");
 
+        // position
         &--right {
             left: auto;
             right: 0;
-            border-left: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-left-width: h.useVar("sidebar-content-border-width");
         }
 
         &--left {
             left: 0;
             right: auto;
-            border-right: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-right-width: h.useVar("sidebar-content-border-width");
         }
 
         &--top {
             top: 0;
             bottom: auto;
-            border-bottom: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-bottom-width: h.useVar("sidebar-content-border-width");
         }
 
         &--bottom {
             top: auto;
             bottom: 0;
-            border-top: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-        }
-
-        &--reduced {
-            width: var(
-                --#{$prefix}sidebar-reduced-width,
-                $sidebar-reduced-width
-            );
-        }
-
-        &--hover-expand {
-            &:hover {
-                transition: width var(--#{$prefix}transition-duration)
-                    var(--#{$prefix}transition-timing);
-                width: var(--#{$prefix}sidebar-width, $sidebar-width);
-            }
+            border-top-width: h.useVar("sidebar-content-border-width");
         }
 
         &--fullwidth {
@@ -124,32 +140,17 @@ $sidebar-zindex: 100 !default;
         }
     }
 
-    &__overlay {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
-    }
-
-    &--active {
-        display: block;
-    }
-
     &--inline {
-        position: relative;
+        @include h.defineVar("sidebar-zindex", "unset");
+        @include h.defineVar("sidebar-content-zindex", "unset");
 
-        .o-sidebar__overlay {
-            position: absolute;
-        }
+        position: relative;
 
         .o-sidebar__content {
             position: relative;
+            border-width: 0;
+            width: 100%;
+            height: 100%;
         }
     }
-
-    &:not(&--inline) {
-        z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
-    }
 }

package/dist/scss/components/_skeleton.scss

@@ -1,34 +1,42 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
+$skeleton-spacer: 0.5em !default;
+$skeleton-duration: 1.5s !default;
+$skeleton-font-size: h.useVar("font-size") !default;
+$skeleton-background-color: vars.$grey-lighter !default;
 $skeleton-background: linear-gradient(
     90deg,
-    $grey-lighter 25%,
-    rgba($grey-lighter, 0.5) 50%,
-    $grey-lighter 75%
+    $skeleton-background-color 25%,
+    rgba($skeleton-background-color, 0.5) 50%,
+    $skeleton-background-color 75%
 ) !default;
-$skeleton-border-radius: var(--#{$prefix}base-border-radius) !default;
-$skeleton-duration: 1.5s !default;
-$skeleton-margin: 0.5rem 0 0 0 !default;
+$skeleton-border-radius: h.useVar("border-radius") !default;
+$skeleton-border-radius-rounded: h.useVar("border-radius-rounded") !default;
 /* @docs */
 
-@keyframes skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
+.o-skeleton {
+    @include h.defineVar("skeleton-duration", $skeleton-duration);
+    @include h.defineVar("skeleton-spacer", $skeleton-spacer);
+    @include h.defineVar("skeleton-font-size", $skeleton-font-size);
+    @include h.defineVar("skeleton-background", $skeleton-background);
+    @include h.defineVar("skeleton-border-radius", $skeleton-border-radius);
+    @include h.defineVar(
+        "skeleton-border-radius-rounded",
+        $skeleton-border-radius-rounded
+    );
 
-    100% {
-        background-position: 0 50%;
-    }
-}
+    @keyframes skeleton-loading {
+        0% {
+            background-position: 100% 50%;
+        }
 
-@mixin steps-size($size, $name: null) {
-    @if $name {
-        line-height: var(--#{$prefix}skeleton-font-size-#{$name}, $size);
-    } @else {
-        line-height: var(--#{$prefix}skeleton-font-size, $size);
+        100% {
+            background-position: 0 50%;
+        }
     }
-}
 
-.o-skeleton {
     display: inline-flex;
     flex-direction: column;
     vertical-align: middle;
@@ -36,21 +44,14 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
     &__item {
         width: 100%;
-        background: var(--#{$prefix}skeleton-background, $skeleton-background);
-        margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
-
-        @include steps-size($base-font-size);
-
-        @each $name, $value in $sizes {
-            &--#{$name} {
-                @include steps-size($value, $name);
-            }
-        }
+        background: h.useVar("skeleton-background");
+        line-height: h.useVar("skeleton-font-size");
+        border-radius: h.useVar("skeleton-border-radius");
 
         &--rounded {
-            border-radius: var(
-                --#{$prefix}skeleton-border-radius,
-                $skeleton-border-radius
+            @include h.defineVar(
+                "skeleton-border-radius",
+                h.useVar("skeleton-border-radius-rounded")
             );
         }
 
@@ -58,15 +59,26 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
             background-size: 400% 100%;
             animation-name: skeleton-loading;
             animation-iteration-count: infinite;
-            animation-duration: var(
-                --#{$prefix}skeleton-duration,
-                $skeleton-duration
-            );
+            animation-duration: h.useVar("skeleton-duration");
         }
 
         &::after {
             content: "\00a0";
         }
+
+        // size variants
+        @each $name, $value in vars.$sizes {
+            &--#{$name} {
+                @include h.defineVar(
+                    "skeleton-font-size",
+                    h.useVar("size-#{$name}")
+                );
+            }
+        }
+
+        & + .o-skeleton__item {
+            margin-top: h.useVar("skeleton-spacer");
+        }
     }
 
     &--centered {
@@ -75,6 +87,5 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
     &--right {
         align-items: flex-end;
-        margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
     }
 }