@oruga-ui/theme-oruga 0.7.1 → 0.8.1

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}"));
         }
     }
 }

package/dist/scss/components/_modal.scss

@@ -1,94 +1,156 @@
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$modal-content-background-color: var(--#{$prefix}white) !default;
-$modal-content-border-radius: var(--#{$prefix}base-border-radius) !default;
-$modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
-$modal-close-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$modal-close-right: 20px !default;
-$modal-close-top: 20px !default;
-$modal-close-size: 32px !default;
-$modal-close-color: var(--#{$prefix}white) !default;
-$modal-content-fullscreen-background-color: $control-brackground-color !default;
+$modal-zindex: map.get(vars.$zindex, "fixed") !default;
+
+$modal-overlay-background-color: h.useVar("overlay-background-color") !default;
+$modal-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
+
+$modal-content-zindex: map.get(vars.$zindex, "modal") !default;
 $modal-content-max-height: calc(100vh - 160px) !default;
-$modal-content-margin: 0 auto !default;
-$modal-zindex: 40 !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-close-top: 20px !default;
+$modal-close-right: 20px !default;
+$modal-close-color: h.useVar("white") !default;
+$modal-close-size: 2rem !default;
+$modal-close-border-radius: h.useVar("border-radius-rounded") !default;
+$modal-close-background-color: h.useVar("control-shadow-color") !default;
 /* @docs */
 
 .o-modal {
+    @include h.defineVar("modal-zindex", $modal-zindex);
+    @include h.defineVar(
+        "modal-overlay-background-color",
+        $modal-overlay-background-color
+    );
+    @include h.defineVar("modal-overlay-zindex", $modal-overlay-zindex);
+
+    @include h.defineVar("modal-content-zindex", $modal-content-zindex);
+    @include h.defineVar("modal-content-box-shadow", $modal-content-box-shadow);
+    @include h.defineVar("modal-content-max-height", $modal-content-max-height);
+    @include h.defineVar("modal-content-max-width", $modal-content-max-width);
+    @include h.defineVar(
+        "modal-content-border-radius",
+        $modal-content-border-radius
+    );
+    @include h.defineVar(
+        "modal-content-background-color",
+        $modal-content-background-color
+    );
+
+    @include h.defineVar("modal-close-top", $modal-close-top);
+    @include h.defineVar("modal-close-right", $modal-close-right);
+    @include h.defineVar("modal-close-color", $modal-close-color);
+    @include h.defineVar("modal-close-size", $modal-close-size);
+    @include h.defineVar(
+        "modal-close-border-radius",
+        $modal-close-border-radius
+    );
+    @include h.defineVar(
+        "modal-close-background-color",
+        $modal-close-background-color
+    );
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
+
+    // disable clickable
+    pointer-events: none;
+
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
-    z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
+    height: 100%;
+    width: 100%;
+    z-index: h.useVar("modal-zindex");
 
     &__overlay {
+        pointer-events: auto;
+        position: absolute;
         bottom: 0;
         left: 0;
-        position: absolute;
         right: 0;
         top: 0;
-        background-color: var(
-            --#{$prefix}modal-overlay-background-color,
-            $modal-overlay-background-color
-        );
+        background-color: h.useVar("modal-overlay-background-color");
+        z-index: h.useVar("modal-overlay-zindex");
     }
 
     &__content {
-        overflow: auto;
+        pointer-events: auto;
         position: relative;
-        margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
-        max-height: var(
-            --#{$prefix}modal-content-max-height,
-            $modal-content-max-height
-        );
-        background-color: var(
-            --#{$prefix}modal-content-background-color,
-            $modal-content-background-color
-        );
-        border-radius: var(
-            --#{$prefix}modal-content-border-radius,
-            $modal-content-border-radius
-        );
+        overflow: auto;
+        margin: 0 auto;
+        z-index: h.useVar("modal-content-zindex");
+
+        max-height: h.useVar("modal-content-max-height");
+        max-width: h.useVar("modal-content-max-width");
+        background-color: h.useVar("modal-content-background-color");
+        border-radius: h.useVar("modal-content-border-radius");
 
+        box-shadow: h.useVar("modal-content-box-shadow");
+
+        /// @deprecated
         &--full-screen {
             width: 100%;
             height: 100%;
+            max-width: 100vh;
             max-height: 100vh;
             margin: 0;
-            background-color: var(
-                --#{$prefix}modal-content-fullscreen-background-color,
-                $modal-content-fullscreen-background-color
-            );
+        }
+
+        &--fullwidth {
+            width: 100%;
+            max-width: 100%;
+        }
+
+        &--fullheight {
+            height: 100%;
+            max-height: 100%;
         }
     }
 
     &__close {
-        background: none;
+        // add clickable cursor
+        @include h.clickable;
+
         position: fixed;
+        top: h.useVar("modal-close-top");
+        right: h.useVar("modal-close-right");
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        height: h.useVar("modal-close-size");
+        width: h.useVar("modal-close-size");
+        padding: 0;
+
+        color: h.useVar("modal-close-color");
+
         border: none;
-        display: inline-block;
-        vertical-align: top;
-        border-radius: var(
-            --#{$prefix}modal-close-border-radius,
-            $modal-close-border-radius
-        );
-        right: var(--#{$prefix}modal-close-right, $modal-close-right);
-        top: var(--#{$prefix}modal-close-top, $modal-close-top);
-        height: var(--#{$prefix}modal-close-size, $modal-close-size);
-        width: var(--#{$prefix}modal-close-size, $modal-close-size);
-        color: var(--#{$prefix}modal-close-color, $modal-close-color);
+        border-radius: h.useVar("modal-close-border-radius");
+        background-color: h.useVar("modal-close-background-color");
     }
 
     &--mobile {
         .o-modal__content {
-            width: 100%;
+            @media screen and (max-width: 1199px) {
+                width: 75vw;
+            }
+            @media screen and (max-width: 575px) {
+                width: 90vw;
+            }
         }
     }
 }