@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/src/assets/scss/components/_loading.scss

@@ -15,17 +15,11 @@ $loading-fullpage-zindex: 999 !default;
   display: flex;
   justify-content: center;
   overflow: hidden;
-
-  @include avariable("z-index", "loading-zindex", $loading-zindex);
+  z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
 
   &--fullpage {
     position: fixed;
-
-    @include avariable(
-      "z-index",
-      "loading-fullpage-zindex",
-      $loading-fullpage-zindex
-    );
+    z-index: var(--#{$prefix}loading-fullpage-zindex, $loading-fullpage-zindex);
   }
 
   &__overlay {
@@ -34,12 +28,10 @@ $loading-fullpage-zindex: 999 !default;
     left: 0;
     right: 0;
     top: 0;
-
-    @include avariable(
-      "background",
-      "loading-overlay-legacy",
+    background: var(
+      --#{$prefix}loading-overlay-legacy,
       $loading-overlay-legacy
     );
-    @include avariable("background", "loading-overlay", $loading-overlay);
+    background: var(--#{$prefix}loading-overlay, $loading-overlay);
   }
 }

package/src/assets/scss/components/_menu.scss

@@ -1,11 +1,11 @@
 /* @docs */
-$menu-item-color: $grey-dark !default;
-$menu-item-hover-color: $black !default;
-$menu-item-hover-background-color: $grey-light !default;
-$menu-item-active-color: $primary-invert !default;
-$menu-item-active-background-color: $primary !default;
-$menu-item-disabled-color: $grey-light !default;
-$menu-list-border-left: 1px solid $primary !default;
+$menu-item-color: var(--#{$prefix}grey-dark) !default;
+$menu-item-hover-color: var(--#{$prefix}black) !default;
+$menu-item-hover-background-color: var(--#{$prefix}grey-light) !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-line-height: 1.25em !default;
 $menu-item-padding: 0.5em 0.75em !default;
 $menu-nested-list-margin: 0.75em !default;
@@ -13,14 +13,13 @@ $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 */
 
 .o-menu {
-  @include avariable("font-size", "base-font-size", $base-font-size);
-
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("menu-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
     }
   }
 
@@ -30,93 +29,62 @@ $menu-label-spacing: 1em !default;
   }
 
   &__list {
-    @include avariable(
-      "line-height",
-      ("menu-list-line-height"),
-      $menu-list-line-height
-    );
+    line-height: var(--#{$prefix}menu-list-line-height, $menu-list-line-height);
   }
 
   &__item__submenu {
-    @include avariable(
-      "border-left",
-      ("menu-list-border-left"),
-      $menu-list-border-left
-    );
-    @include avariable(
-      "padding-left",
-      ("menu-nested-list-padding-left"),
+    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
     );
-    @include avariable(
-      "margin",
-      ("menu-nested-list-margin"),
-      $menu-nested-list-margin
-    );
+    margin: var(--#{$prefix}menu-nested-list-margin, $menu-nested-list-margin);
   }
 
   &__label {
-    @include avariable("color", ("menu-label-color"), $menu-label-color);
-    @include avariable(
-      "font-size",
-      ("menu-label-font-size"),
-      $menu-label-font-size
-    );
     text-transform: uppercase;
+    color: var(--#{$prefix}menu-label-color, $menu-label-color);
+    font-size: var(--#{$prefix}menu-label-font-size, $menu-label-font-size);
 
     &:not(:first-child) {
-      @include avariable(
-        "margin-top",
-        ("menu-label-spacing"),
-        $menu-label-spacing
-      );
+      margin-top: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
     }
 
     &:not(:last-child) {
-      @include avariable(
-        "margin-bottom",
-        ("menu-label-spacing"),
-        $menu-label-spacing
-      );
+      margin-bottom: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
     }
   }
 
   &__item {
-    @include avariable("color", ("menu-item-color"), $menu-item-color);
-    @include avariable("padding", ("menu-item-padding"), $menu-item-padding);
     display: block;
     list-style: none;
+    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);
 
     &:hover:not(&--active):not(&--disabled) {
-      @include avariable(
-        "color",
-        ("menu-item-hover-color"),
-        $menu-item-hover-color
-      );
-      @include avariable(
-        "background-color",
-        ("menu-item-hover-background-color"),
+      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
       );
     }
 
+    &--icon-text .o-icon {
+      margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
+    }
+
     &--active {
-      @include avariable(
-        "color",
-        ("menu-item-active-color"),
-        $menu-item-active-color
-      );
-      @include avariable(
-        "background-color",
-        ("menu-item-active-background-color"),
+      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
       );
     }
 
     &--disabled {
-      @include avariable(
-        "color",
-        ("menu-item-disabled-color"),
+      color: var(
+        --#{$prefix}menu-item-disabled-color,
         $menu-item-disabled-color
       );
     }

package/src/assets/scss/components/_modal.scss

@@ -1,12 +1,14 @@
 /* @docs */
-$modal-content-background-color: $white !default;
-$modal-content-border-radius: $base-border-radius !default;
+$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: $base-rounded-border-radius !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: $white !default;
+$modal-close-color: var(--#{$prefix}white) !default;
 $modal-content-fullscreen-background-color: #f5f5f5 !default;
 $modal-content-max-height: calc(100vh - 160px) !default;
 $modal-content-margin: 0 auto !default;
@@ -24,8 +26,7 @@ $modal-zindex: 40 !default;
   left: 0;
   right: 0;
   top: 0;
-
-  @include avariable("z-index", "modal-zindex", $modal-zindex);
+  z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
 
   &__overlay {
     bottom: 0;
@@ -33,10 +34,8 @@ $modal-zindex: 40 !default;
     position: absolute;
     right: 0;
     top: 0;
-
-    @include avariable(
-      "background-color",
-      "modal-overlay-background-color",
+    background-color: var(
+      --#{$prefix}modal-overlay-background-color,
       $modal-overlay-background-color
     );
   }
@@ -44,21 +43,17 @@ $modal-zindex: 40 !default;
   &__content {
     overflow: auto;
     position: relative;
-
-    @include avariable("margin", "modal-content-margin", $modal-content-margin);
-    @include avariable(
-      "max-height",
-      "modal-content-max-height",
+    margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
+    max-height: var(
+      --#{$prefix}modal-content-max-height,
       $modal-content-max-height
     );
-    @include avariable(
-      "background-color",
-      "modal-content-background-color",
+    background-color: var(
+      --#{$prefix}modal-content-background-color,
       $modal-content-background-color
     );
-    @include avariable(
-      "border-radius",
-      "modal-content-border-radius",
+    border-radius: var(
+      --#{$prefix}modal-content-border-radius,
       $modal-content-border-radius
     );
 
@@ -67,10 +62,8 @@ $modal-zindex: 40 !default;
       height: 100%;
       max-height: 100vh;
       margin: 0;
-
-      @include avariable(
-        "background-color",
-        "modal-content-fullscreen-background-color",
+      background-color: var(
+        --#{$prefix}modal-content-fullscreen-background-color,
         $modal-content-fullscreen-background-color
       );
     }
@@ -82,17 +75,15 @@ $modal-zindex: 40 !default;
     border: none;
     display: inline-block;
     vertical-align: top;
-
-    @include avariable(
-      "border-radius",
-      "modal-close-border-radius",
+    border-radius: var(
+      --#{$prefix}modal-close-border-radius,
       $modal-close-border-radius
     );
-    @include avariable("right", "modal-close-right", $modal-close-right);
-    @include avariable("top", "modal-close-top", $modal-close-top);
-    @include avariable("height", "modal-close-size", $modal-close-size);
-    @include avariable("width", "modal-close-size", $modal-close-size);
-    @include avariable("color", "modal-close-color", $modal-close-color);
+    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);
   }
 
   &--mobile {

package/src/assets/scss/components/_notification.scss

@@ -1,17 +1,19 @@
 @use "sass:list";
 
 /* @docs */
-$notification-background-color: $primary !default;
+$notification-background-color: var(--#{$prefix}primary) !default;
 $notification-border-radius: 4px !default;
 $notification-padding: 1.75em 1.75em !default;
 $notification-margin-bottom: 1.5rem !default;
 $notification-animantion: append-animate 0.3s linear !default;
-$notification-color: $white !default;
-$notification-close-border-radius: $base-rounded-border-radius !default;
+$notification-color: var(--#{$prefix}white) !default;
+$notification-close-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
 $notification-close-right: 0.5rem !default;
 $notification-close-top: 0.5rem !default;
 $notification-close-size: 20px !default;
-$notification-close-color: $white !default;
+$notification-close-color: var(--#{$prefix}white) !default;
 $notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
 $notification-icon-margin-right: 1rem !default;
 $notification-notices-padding: 2em !default;
@@ -19,28 +21,24 @@ $notification-notices-zindex: 1000 !default;
 /* @docs */
 
 .o-notification {
+  position: relative;
+  transform-origin: 50% 0;
   // Modifiers
-  @include avariable(
-    "background-color",
-    "notification-background-color",
+  background-color: var(
+    --#{$prefix}notification-background-color,
     $notification-background-color
   );
-  @include avariable("color", "notification-color", $notification-color);
-  @include avariable(
-    "border-radius",
-    "notification-border-radius",
+  color: var(--#{$prefix}notification-color, $notification-color);
+  border-radius: var(
+    --#{$prefix}notification-border-radius,
     $notification-border-radius
   );
-  @include avariable("padding", "notification-padding", $notification-padding);
-  @include avariable(
-    "margin-bottom",
-    "notification-margin-bottom",
+  padding: var(--#{$prefix}notification-padding, $notification-padding);
+  margin-bottom: var(
+    --#{$prefix}notification-margin-bottom,
     $notification-margin-bottom
   );
 
-  position: relative;
-  transform-origin: 50% 0;
-
   &__content {
     flex-basis: auto;
     flex-grow: 1;
@@ -62,10 +60,8 @@ $notification-notices-zindex: 1000 !default;
     flex-basis: auto;
     flex-grow: 0;
     flex-shrink: 0;
-
-    @include avariable(
-      "margin-right",
-      "notification-icon-margin-right",
+    margin-right: var(
+      --#{$prefix}notification-icon-margin-right,
       $notification-icon-margin-right
     );
   }
@@ -81,42 +77,19 @@ $notification-notices-zindex: 1000 !default;
     flex-grow: 0;
     flex-shrink: 0;
     vertical-align: top;
-
-    @include avariable(
-      "background-color",
-      "notification-close-background-color",
+    background-color: var(
+      --#{$prefix}notification-close-background-color,
       $notification-close-background-color
     );
-    @include avariable(
-      "border-radius",
-      "notification-close-border-radius",
+    border-radius: var(
+      --#{$prefix}notification-close-border-radius,
       $notification-close-border-radius
     );
-    @include avariable(
-      "right",
-      "notification-close-right",
-      $notification-close-right
-    );
-    @include avariable(
-      "top",
-      "notification-close-top",
-      $notification-close-top
-    );
-    @include avariable(
-      "height",
-      "notification-close-size",
-      $notification-close-size
-    );
-    @include avariable(
-      "width",
-      "notification-close-size",
-      $notification-close-size
-    );
-    @include avariable(
-      "color",
-      "notification-close-color",
-      $notification-close-color
-    );
+    right: var(--#{$prefix}notification-close-right, $notification-close-right);
+    top: var(--#{$prefix}notification-close-top, $notification-close-top);
+    height: var(--#{$prefix}notification-close-size, $notification-close-size);
+    width: var(--#{$prefix}notification-close-size, $notification-close-size);
+    color: var(--#{$prefix}notification-close-color, $notification-close-color);
   }
 
   @each $name, $pair in $colors {
@@ -124,13 +97,8 @@ $notification-notices-zindex: 1000 !default;
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
       border-color: transparent;
-
-      @include avariable("background-color", ("variant-" + #{$name}), $color);
-      @include avariable(
-        "color",
-        ("variant-invert-" + #{$name}),
-        $color-invert
-      );
+      background-color: var(--#{$prefix}variant-#{$name}, $color);
+      color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
 
       &:hover {
         // background-color: darken($color, 2.5%)
@@ -150,25 +118,20 @@ $notification-notices-zindex: 1000 !default;
   right: 0;
   overflow: hidden;
   pointer-events: none;
-
-  @include avariable(
-    "padding",
-    "notification-notices-padding",
+  padding: var(
+    --#{$prefix}notification-notices-padding,
     $notification-notices-padding
   );
-  @include avariable(
-    "z-index",
-    "notification-notices-zindex",
+  z-index: var(
+    --#{$prefix}notification-notices-zindex,
     $notification-notices-zindex
   );
 
   .o-notification {
     pointer-events: stroke;
     max-width: 600px;
-
-    @include avariable(
-      "animation",
-      "notification-animantion",
+    animation: var(
+      --#{$prefix}notification-animantion,
       $notification-animantion
     );
 

package/src/assets/scss/components/_pagination.scss

@@ -1,21 +1,23 @@
 /* @docs */
-$pagination-disabled-opacity: $base-disabled-opacity !default;
-$pagination-ellipsis-color: $grey-light !default;
-$pagination-link-border-color: $grey-lighter !default;
-$pagination-link-border-radius: $base-border-radius !default;
+$pagination-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$pagination-ellipsis-color: var(--#{$prefix}grey-light) !default;
+$pagination-link-border-color: var(--#{$prefix}grey-lighter) !default;
+$pagination-link-border-radius: var(--#{$prefix}base-border-radius) !default;
 $pagination-link-border: 1px solid transparent !default;
 $pagination-link-color: #363636 !default;
-$pagination-link-current-background-color: $primary !default;
-$pagination-link-current-border-color: $primary !default; // !!!
+$pagination-link-current-background-color: var(--#{$prefix}primary) !default;
+$pagination-link-current-border-color: var(--#{$prefix}primary) !default;
 $pagination-link-current-color: #fff !default;
 $pagination-link-height: 2.25em !default;
-$pagination-link-hover-border-color: $grey-light !default;
-$pagination-link-line-height: $base-line-height !default;
+$pagination-link-hover-border-color: var(--#{$prefix}grey-light) !default;
+$pagination-link-line-height: var(--#{$prefix}base-line-height) !default;
 $pagination-link-margin: 0.25rem !default;
 $pagination-link-min-width: 2.25em !default;
 $pagination-link-padding: 0.5em 0.5em !default;
 $pagination-margin: -0.25rem !default;
-$pagination-rounded-border-radius: $base-rounded-border-radius !default;
+$pagination-rounded-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
 /* @docs */
 
 .o-pag {
@@ -23,21 +25,17 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
   display: flex;
   text-align: center;
   justify-content: space-between;
-
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("margin", "pagination-margin", $pagination-margin);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  margin: var(--#{$prefix}pagination-margin, $pagination-margin);
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("pagination-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}pagination-font-size-#{$name}, $value);
     }
   }
 
   &__link {
+    @include unselectable;
     -moz-appearance: none;
     -webkit-appearance: none;
     align-items: center;
@@ -49,98 +47,63 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
-
-    @include unselectable;
-    @include avariable(
-      "line-height",
-      "pagination-link-line-height",
+    line-height: var(
+      --#{$prefix}pagination-link-line-height,
       $pagination-link-line-height
     );
-    @include avariable(
-      "border",
-      "pagination-link-border",
-      $pagination-link-border
-    );
-    @include avariable(
-      "border-radius",
-      "pagination-link-border-radius",
+    border: var(--#{$prefix}pagination-link-border, $pagination-link-border);
+    border-radius: var(
+      --#{$prefix}pagination-link-border-radius,
       $pagination-link-border-radius
     );
-    @include avariable(
-      "border-color",
-      "pagination-link-border-color",
+    border-color: var(
+      --#{$prefix}pagination-link-border-color,
       $pagination-link-border-color
     );
-    @include avariable(
-      "color",
-      "pagination-link-color",
-      $pagination-link-color
-    );
-    @include avariable(
-      "min-width",
-      "pagination-link-min-width",
+    color: var(--#{$prefix}pagination-link-color, $pagination-link-color);
+    min-width: var(
+      --#{$prefix}pagination-link-min-width,
       $pagination-link-min-width
     );
-    @include avariable(
-      "height",
-      "pagination-link-height",
-      $pagination-link-height
-    );
-    @include avariable(
-      "padding",
-      "pagination-link-padding",
-      $pagination-link-padding
-    );
-    @include avariable(
-      "margin",
-      "pagination-link-margin",
-      $pagination-link-margin
-    );
+    height: var(--#{$prefix}pagination-link-height, $pagination-link-height);
+    padding: var(--#{$prefix}pagination-link-padding, $pagination-link-padding);
+    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
 
     &:hover {
       text-decoration: none;
-
-      @include avariable(
-        "border-color",
-        "pagination-link-hover-border-color",
+      border-color: var(
+        --#{$prefix}pagination-link-hover-border-color,
         $pagination-link-hover-border-color
       );
     }
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "pagination-rounded-border-radius",
+      border-radius: var(
+        --#{$prefix}pagination-rounded-border-radius,
         $pagination-rounded-border-radius
       );
     }
 
     &--disabled {
       pointer-events: none;
-
-      @include avariable(
-        "opacity",
-        "pagination-disabled-opacity",
+      opacity: var(
+        --#{$prefix}pagination-disabled-opacity,
         $pagination-disabled-opacity
       );
     }
 
     &--current {
       pointer-events: none;
-
-      @include avariable(
-        "background-color",
-        "pagination-link-current-background-color",
+      background-color: var(
+        --#{$prefix}pagination-link-current-background-color,
         $pagination-link-current-background-color
       );
-      @include avariable(
-        "border-color",
-        "pagination-link-current-border-color",
+      border-color: var(
+        --#{$prefix}pagination-link-current-border-color,
         $pagination-link-current-border-color
       );
-      @include avariable(
-        "color",
-        "pagination-link-current-color",
+      color: var(
+        --#{$prefix}pagination-link-current-color,
         $pagination-link-current-color
       );
     }
@@ -150,15 +113,9 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     justify-content: center;
     text-align: center;
     pointer-events: none;
-
-    @include avariable(
-      "margin",
-      "pagination-link-margin",
-      $pagination-link-margin
-    );
-    @include avariable(
-      "color",
-      "pagination-ellipsis-color",
+    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
+    color: var(
+      --#{$prefix}pagination-ellipsis-color,
       $pagination-ellipsis-color
     );
   }