@oruga-ui/theme-oruga 0.7.1 → 0.8.0

package/dist/scss/components/_icon.scss

@@ -1,57 +1,52 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$icon-spin-duration: 2s !default;
+$icon-color: inherit;
+$icon-font-size: inherit;
+$icon-spin-animation-duration: 2s !default;
 /* @docs */
 
-@keyframes icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
 .o-icon {
+    @include h.defineVar("icon-color", $icon-color);
+    @include h.defineVar("icon-font-size", $icon-font-size);
+    @include h.defineVar(
+        "icon-spin-animation-duration",
+        $icon-spin-animation-duration
+    );
+
     align-items: center;
     display: inline-flex;
     justify-content: center;
+    color: h.useVar("icon-color");
+    font-size: h.useVar("icon-font-size");
     transition:
-        transform $animation-speed $animation-timing,
-        opacity $animation-speed-fast $animation-timing;
+        transform h.useVar("animation-speed-fast") h.useVar("animation-timing"),
+        opacity h.useVar("animation-speed") h.useVar("animation-timing");
 
-    // sizes
-    @each $name, $value in $sizes {
+    // size variants
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
+            @include h.defineVar("icon-font-size", h.useVar("size-#{$name}"));
         }
     }
 
     // color variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
+    @each $name, $pair in vars.$colors {
         &--#{$name} {
-            color: var(--#{$prefix}variant-#{$name}, $color);
+            @include h.defineVar("icon-color", h.useVar($name));
         }
     }
 
     &--clickable {
-        pointer-events: auto;
-        cursor: pointer;
+        @include h.clickable;
     }
 
     &--spin {
-        animation-name: icon-spin;
+        animation-name: spinAround;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
-        animation-duration: var(
-            --#{$prefix}icon-spin-duration,
-            $icon-spin-duration
-        );
+        animation-duration: h.useVar("icon-spin-animation-duration");
     }
 }

package/dist/scss/components/_input.scss

@@ -1,69 +1,120 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$input-background-color: #ffffff !default;
-$input-border-color: var(--#{$prefix}grey-lighter) !default;
+$input-color: h.useVar("font-color") !default;
+$input-font-size: h.useVar("font-size") !default;
+$input-font-weight: h.useVar("font-weight") !default;
+$input-line-height: h.useVar("line-height") !default;
+$input-height: h.useVar("control-height") !default;
+
+$input-padding: h.useVar("control-padding-vertical")
+    h.useVar("control-padding-horizontal") !default;
+$input-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$input-box-shadow: h.useVar("control-box-shadow-inset") !default;
+$input-border-width: h.useVar("control-border-width") !default;
 $input-border-style: solid !default;
-$input-border-width: 1px !default;
-$input-border-radius: var(--#{$prefix}base-border-radius) !default;
-$input-rounded-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$input-box-shadow: $control-box-shadow !default;
-$input-color: #363636 !default;
-$input-icon-zindex: 4 !default;
-$input-height: $control-height !default;
-$input-line-height: var(--#{$prefix}base-line-height) !default;
-$input-margin: 0 !default;
-$input-padding: $control-padding-vertical $control-padding-horizontal !default;
-$input-counter-font-size: 0.75rem !default;
-$input-counter-margin: 0.25rem 0.5rem !default;
-$input-textarea-max-height: 600px !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-textarea-min-height: 120px !default;
-$input-textarea-padding: 0.625em !default;
+$input-textarea-max-height: 600px !default;
+$input-textarea-padding: h.useVar("control-spacer") !default;
+
+$input-counter-font-size: 0.75rem !default;
+$input-counter-padding: 0.25rem 0.5rem !default;
 /* @docs */
 
 .o-input {
+    @include h.defineVar("input-height", $input-height);
+    @include h.defineVar("input-padding", $input-padding);
+    @include h.defineVar("input-disabled-opacity", $input-disabled-opacity);
+
+    @include h.defineVar("input-color", $input-color);
+    @include h.defineVar("input-font-size", $input-font-size);
+    @include h.defineVar("input-font-weight", $input-font-weight);
+    @include h.defineVar("input-line-height", $input-line-height);
+
+    @include h.defineVar("input-box-shadow", $input-box-shadow);
+    @include h.defineVar("input-background-color", $input-background-color);
+    @include h.defineVar("input-border-width", $input-border-width);
+    @include h.defineVar("input-border-style", $input-border-style);
+    @include h.defineVar("input-border-color", $input-border-color);
+    @include h.defineVar("input-border-radius", $input-border-radius);
+    @include h.defineVar(
+        "input-border-radius-rounded",
+        $input-border-radius-rounded
+    );
+
+    @include h.defineVar(
+        "input-textarea-min-height",
+        $input-textarea-min-height
+    );
+    @include h.defineVar(
+        "input-textarea-max-height",
+        $input-textarea-max-height
+    );
+    @include h.defineVar("input-textarea-padding", $input-textarea-padding);
+
+    @include h.defineVar("input-counter-font-size", $input-counter-font-size);
+    @include h.defineVar("input-counter-padding", $input-counter-padding);
+
+    // define focus shadow effect
+    @include h.focusable(".o-input__input");
+
+    // add clickable cursor
+    @include h.clickable;
+
     display: inline-block;
     position: relative;
 
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("input-font-size", h.useVar("size-#{$name}"));
+        }
+    }
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar("input-border-color", h.useVar($name));
+        }
+    }
+
     &__input {
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        display: inline-flex;
+        // remove default appearance
+        @include h.removeAppearance;
+
+        display: inline-block;
         position: relative;
-        vertical-align: top;
-
-        color: var(--#{$prefix}input-color, $input-color);
-        font-size: var(--#{$prefix}base-font-size, $base-font-size);
-        box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
-        background-color: var(
-            --#{$prefix}input-background-color,
-            $input-background-color
-        );
-        border-color: var(--#{$prefix}input-border-color, $input-border-color);
-        border-style: var(--#{$prefix}input-border-style, $input-border-style);
-        border-width: var(--#{$prefix}input-border-width, $input-border-width);
-        border-radius: var(
-            --#{$prefix}input-border-radius,
-            $input-border-radius
-        );
 
-        height: var(--#{$prefix}input-height, $input-height);
-        line-height: var(--#{$prefix}input-line-height, $input-line-height);
-        padding: var(--#{$prefix}input-padding, $input-padding);
-        margin: var(--#{$prefix}input-margin, $input-margin);
+        height: h.useVar("input-height");
+        padding: h.useVar("input-padding");
+
+        color: h.useVar("input-color");
+        font-size: h.useVar("input-font-size");
+        font-weight: h.useVar("input-font-weight");
+        line-height: h.useVar("input-line-height");
+
+        box-shadow: h.useVar("input-box-shadow");
+        background-color: h.useVar("input-background-color");
+
+        border-color: h.useVar("input-border-color");
+        border-style: h.useVar("input-border-style");
+        border-width: h.useVar("input-border-width");
+        border-radius: h.useVar("input-border-radius");
 
         &--iconspace-left {
-            padding-left: var(--#{$prefix}input-height, $input-height);
+            padding-left: h.useVar("input-height");
         }
 
         &--iconspace-right {
-            padding-right: var(--#{$prefix}input-height, $input-height);
-        }
-
-        &[disabled] {
-            cursor: inherit;
+            padding-right: h.useVar("input-height");
         }
     }
 
@@ -73,46 +124,23 @@ $input-textarea-padding: 0.625em !default;
         min-width: 100%;
         height: auto;
         resize: vertical;
-        padding: var(
-            --#{$prefix}input-textarea-padding,
-            $input-textarea-padding
-        );
+        padding: h.useVar("input-textarea-padding");
 
         &:not([rows]) {
-            max-height: var(
-                --#{$prefix}input-textarea-max-height,
-                $input-textarea-max-height
-            );
-            min-height: var(
-                --#{$prefix}input-textarea-min-height,
-                $input-textarea-min-height
-            );
+            max-height: h.useVar("input-textarea-max-height");
+            min-height: h.useVar("input-textarea-min-height");
         }
     }
 
-    // size variants
-    @each $name, $value in $sizes {
-        &--#{$name} .o-input__input {
-            font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
-        }
-    }
-
-    // colar variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
-        &--#{$name} .o-input__input {
-            --#{$prefix}focus: #{createFocus($color)};
-
-            border-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
+    &--rounded {
+        @include h.defineVar(
+            "input-border-radius",
+            h.useVar("input-border-radius-rounded")
+        );
     }
 
-    &--rounded .o-input__input {
-        border-radius: var(
-            --#{$prefix}input-rounded-border-radius,
-            $input-rounded-border-radius
-        );
+    &--disabled {
+        @include h.disabled(h.useVar("input-disabled-opacity"));
     }
 
     &--expanded {
@@ -128,11 +156,9 @@ $input-textarea-padding: 0.625em !default;
     &__counter {
         display: block;
         float: right;
-        font-size: var(
-            --#{$prefix}input-counter-font-size,
-            $input-counter-font-size
-        );
-        margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
+        font-size: h.useVar("input-counter-font-size");
+        padding: h.useVar("input-counter-padding");
+        height: h.useVar("input-height");
     }
 
     &__icon-left,
@@ -140,8 +166,7 @@ $input-textarea-padding: 0.625em !default;
         position: absolute;
         top: 0;
         height: 100%;
-        width: var(--#{$prefix}input-height, $input-height);
-        z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
+        width: h.useVar("input-height");
     }
 
     &__icon-right {
@@ -151,14 +176,4 @@ $input-textarea-padding: 0.625em !default;
     &__icon-left {
         left: 0;
     }
-
-    // focus effect
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        .o-input__input {
-            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-            outline: none;
-        }
-    }
 }

package/dist/scss/components/_loading.scss

@@ -1,28 +1,44 @@
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$loading-overlay-legacy: #7f7f7f !default;
-$loading-overlay: rgba(255, 255, 255, 0.5) !default;
-$loading-zindex: 29 !default;
-$loading-fullpage-zindex: 999 !default;
+$loading-spacer: h.useVar("control-spacer") !default;
+$loading-color: h.useVar("font-color") !default;
+$loading-font-size: h.useVar("font-size") !default;
+$loading-font-weight: h.useVar("font-weight") !default;
+$loading-zindex: map.get(vars.$zindex, "sticky") !default;
+$loading-fullpage-zindex: map.get(vars.$zindex, "fixed") !default;
+$loading-overlay-background-color: rgba(255, 255, 255, 0.5) !default;
 /* @docs */
 
 .o-loading {
+    @include h.defineVar("loading-spacer", $loading-spacer);
+    @include h.defineVar("loading-color", $loading-color);
+    @include h.defineVar("loading-size", $loading-font-size);
+    @include h.defineVar("loading-weight", $loading-font-weight);
+    @include h.defineVar("loading-zindex", $loading-zindex);
+    @include h.defineVar("loading-fullpage-zindex", $loading-fullpage-zindex);
+    @include h.defineVar(
+        "loading-overlay-background-color",
+        $loading-overlay-background-color
+    );
+
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
-    align-items: center;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
     overflow: hidden;
-    z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
+    z-index: h.useVar("loading-zindex");
 
     &--fullpage {
         position: fixed;
-        z-index: var(
-            --#{$prefix}loading-fullpage-zindex,
-            $loading-fullpage-zindex
-        );
+        z-index: h.useVar("loading-fullpage-zindex");
     }
 
     &__overlay {
@@ -31,10 +47,14 @@ $loading-fullpage-zindex: 999 !default;
         left: 0;
         right: 0;
         top: 0;
-        background: var(
-            --#{$prefix}loading-overlay-legacy,
-            $loading-overlay-legacy
-        );
-        background: var(--#{$prefix}loading-overlay, $loading-overlay);
+        background: h.useVar("loading-overlay-background-color");
+    }
+
+    &__label {
+        z-index: 1;
+        color: h.useVar("loading-color");
+        font-size: h.useVar("loading-size");
+        font-weight: h.useVar("loading-weight");
+        padding: 0 h.useVar("loading-spacer");
     }
 }

package/dist/scss/components/_menu.scss

@@ -1,134 +1,138 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$menu-item-color: var(--#{$prefix}grey-dark) !default;
-$menu-item-background-color: transparent !default;
-$menu-item-hover-color: var(--#{$prefix}white) !default;
-$menu-item-hover-background-color: var(--#{$prefix}secondary) !default;
-$menu-item-active-color: var(--#{$prefix}primary-invert) !default;
-$menu-item-active-background-color: var(--#{$prefix}primary) !default;
-$menu-item-disabled-color: var(--#{$prefix}grey-light) !default;
-$menu-list-border-left: 1px solid var(--#{$prefix}primary) !default;
-$menu-list-border-radius: var(--#{$prefix}base-border-radius) !default;
-$menu-list-line-height: 1.25em !default;
-$menu-item-padding: 0.5em 0.75em !default;
-$menu-nested-list-margin: 0.75em 1.25em !default;
-$menu-nested-list-padding-left: 0.75em !default;
-$menu-label-color: $grey !default;
-$menu-label-font-size: 0.75em !default;
-$menu-label-spacing: 1em !default;
-$menu-icon-spacer: 0.5rem !default;
-/* @docs */
+$menu-spacer: 0.5rem !default;
+$menu-border: 1px solid h.useVar("primary") !default;
+$menu-disabled-opacity: h.useVar("control-disabled-opacity") !default;
 
-.o-menu {
-    // size variants
-    @each $name, $value in $sizes {
-        &--#{$name} {
-            font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
-        }
-    }
+$menu-label-color: h.useVar("font-color") !default;
+$menu-label-font-size: calc(h.useVar("font-size") * 0.75) !default;
+$menu-label-font-weight: h.useVar("font-weight") !default;
+$menu-label-line-heigth: h.useVar("line-heigth") !default;
 
-    &__list,
-    &__item {
-        list-style: none;
-    }
+$menu-item-padding: 0.5em 0.75em !default;
+$menu-item-color: h.useVar("font-color") !default;
+$menu-item-font-size: h.useVar("font-size") !default;
+$menu-item-font-weight: h.useVar("font-weight") !default;
+$menu-item-line-heigth: h.useVar("line-heigth") !default;
 
-    &__list {
-        padding: unset;
-        line-height: var(
-            --#{$prefix}menu-list-line-height,
-            $menu-list-line-height
-        );
-        padding-left: var(
-            --#{$prefix}menu-nested-list-padding-left,
-            $menu-nested-list-padding-left
-        );
-    }
+$menu-item-border: unset !default;
+$menu-item-border-radius: h.useVar("border-radius") !default;
+$menu-item-background-color: transparent !default;
 
-    &__item__submenu {
-        border-left: var(
-            --#{$prefix}menu-list-border-left,
-            $menu-list-border-left
-        );
-        padding-left: var(
-            --#{$prefix}menu-nested-list-padding-left,
-            $menu-nested-list-padding-left
-        );
-        margin: var(
-            --#{$prefix}menu-nested-list-margin,
-            $menu-nested-list-margin
-        );
-    }
+$menu-item-hover-color: h.useVar("white") !default;
+$menu-item-hover-background-color: h.useVar("secondary") !default;
+$menu-item-active-color: h.useVar("primary-invert") !default;
+$menu-item-active-background-color: h.useVar("primary") !default;
+/* @docs */
+
+.o-menu {
+    @include h.defineVar("menu-spacer", $menu-spacer);
+    @include h.defineVar("menu-label-color", $menu-label-color);
+    @include h.defineVar("menu-label-font-size", $menu-label-font-size);
+    @include h.defineVar("menu-label-font-weight", $menu-label-font-weight);
+    @include h.defineVar("menu-label-line-heigth", $menu-label-line-heigth);
+    @include h.defineVar("menu-border", $menu-border);
+    @include h.defineVar("menu-item-padding", $menu-item-padding);
+    @include h.defineVar("menu-item-color", $menu-item-color);
+    @include h.defineVar("menu-item-font-weight", $menu-item-font-weight);
+    @include h.defineVar("menu-item-line-heigth", $menu-item-line-heigth);
+    @include h.defineVar("menu-item-border", $menu-item-border);
+    @include h.defineVar("menu-item-border-radius", $menu-item-border-radius);
+    @include h.defineVar(
+        "menu-item-background-color",
+        $menu-item-background-color
+    );
+    @include h.defineVar("menu-item-hover-color", $menu-item-hover-color);
+    @include h.defineVar(
+        "menu-item-hover-background-color",
+        $menu-item-hover-background-color
+    );
+    @include h.defineVar("menu-item-active-color", $menu-item-active-color);
+    @include h.defineVar(
+        "menu-item-active-background-color",
+        $menu-item-active-background-color
+    );
+    @include h.defineVar("menu-disabled-opacity", $menu-disabled-opacity);
 
     &__label {
         text-transform: uppercase;
-        color: var(--#{$prefix}menu-label-color, $menu-label-color);
-        font-size: var(--#{$prefix}menu-label-font-size, $menu-label-font-size);
+        color: h.useVar("menu-label-color");
+        font-size: h.useVar("menu-label-font-size");
+        font-weight: h.useVar("menu-label-font-weight");
+        line-height: h.useVar("menu-label-line-height");
 
         &:not(:first-child) {
-            margin-top: var(
-                --#{$prefix}menu-label-spacing,
-                $menu-label-spacing
-            );
+            padding-top: h.useVar("menu-spacer");
         }
 
         &:not(:last-child) {
-            margin-bottom: var(
-                --#{$prefix}menu-label-spacing,
-                $menu-label-spacing
-            );
+            padding-bottom: h.useVar("menu-spacer");
         }
     }
 
-    &__item__button {
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        display: block;
+    &__list,
+    &__item {
         list-style: none;
-        cursor: pointer;
-        border: transparent;
-        background-color: var(
-            --#{$prefix}menu-item-background-color,
-            $menu-item-background-color
-        );
-        color: var(--#{$prefix}menu-item-color, $menu-item-color);
-        padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
-        font-size: var(--#{$prefix}menu-item-size, $base-font-size);
-        border-radius: var(
-            --#{$prefix}menu-list-border-radius,
-            $menu-list-border-radius
-        );
-
-        &:hover:not(&--active):not(&--disabled) {
-            color: var(
-                --#{$prefix}menu-item-hover-color,
-                $menu-item-hover-color
-            );
-            background-color: var(
-                --#{$prefix}menu-item-hover-background-color,
-                $menu-item-hover-background-color
-            );
-        }
+        padding: unset;
+        margin: unset;
+    }
 
-        &--icon .o-icon {
-            margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
+    &__item {
+        &__submenu {
+            border-left: h.useVar("menu-border");
+            padding-left: h.useVar("menu-spacer");
+            margin: calc(1.5 * h.useVar("menu-spacer"))
+                calc(2.5 * h.useVar("menu-spacer"));
         }
 
-        &--active {
-            color: var(
-                --#{$prefix}menu-item-active-color,
-                $menu-item-active-color
-            );
-            background-color: var(
-                --#{$prefix}menu-item-active-background-color,
-                $menu-item-active-background-color
-            );
+        &__button {
+            // add clickable cursor
+            @include h.clickable;
+
+            // disable default appearance
+            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+
+            display: block;
+            padding: h.useVar("menu-item-padding");
+
+            color: h.useVar("menu-item-color");
+            font-size: h.useVar("menu-item-font-size");
+            font-weight: h.useVar("menu-item-font-weight");
+            line-height: h.useVar("menu-item-line-height");
+
+            background-color: h.useVar("menu-item-background-color");
+            border: h.useVar("menu-item-border");
+            border-radius: h.useVar("menu-item-border-radius");
+
+            &--focused,
+            &:hover:not(&--active):not(&--disabled) {
+                color: h.useVar("menu-item-hover-color");
+                background-color: h.useVar("menu-item-hover-background-color");
+            }
+
+            &--active {
+                color: h.useVar("menu-item-active-color");
+                background-color: h.useVar("menu-item-active-background-color");
+            }
+
+            &--icon .o-icon {
+                margin-right: h.useVar("menu-spacer");
+            }
+
+            &--disabled {
+                @include h.disabled(h.useVar("menu-disabled-opacity"));
+            }
         }
+    }
 
-        &--disabled {
-            cursor: inherit;
-            color: var(
-                --#{$prefix}menu-item-disabled-color,
-                $menu-item-disabled-color
-            );
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("menu-font-size", h.useVar("size-#{$name}"));
         }
     }
 }