@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/assets/scss/components/_timepicker.scss

@@ -1,32 +1,26 @@
 /* @docs */
-$timepicker-font-size: $base-font-size !default;
-$timepicker-box-line-height: $base-line-height !default;
+$timepicker-font-size: var(--#{$prefix}base-font-size) !default;
+$timepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
 $timepicker-box-padding: 0.375rem 1rem !default;
 $timepicker-footer-padding: 0 0.5rem !default;
 $timepicker-footer-margin: 0.875rem 0 0 0 !default;
-$timepicker-select-line-height: $base-line-height !default;
+$timepicker-select-line-height: var(--#{$prefix}base-line-height) !default;
 $timepicker-select-padding: $control-padding-vertical
   $control-padding-horizontal !default;
 $timepicker-select-color: #363636 !default;
 $timepicker-select-font-weight: 600 !default;
-$timepicker-select-placeholder-opacity: $base-disabled-opacity !default;
+$timepicker-select-placeholder-opacity: var(
+  --#{$prefix}base-disabled-opacity
+) !default;
 $timepicker-separator-font-weight: 600 !default;
 /* @docs */
 
 .o-tpck {
-  @include avariable(
-    "font-size",
-    "timepicker-font-size",
-    $timepicker-font-size
-  );
+  font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("timepicker-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
     }
   }
 
@@ -38,17 +32,11 @@ $timepicker-separator-font-weight: 600 !default;
     display: flex;
     justify-content: center;
     align-items: center;
-
-    @include avariable(
-      "line-height",
-      "timepicker-box-line-height",
+    line-height: var(
+      --#{$prefix}timepicker-box-line-height,
       $timepicker-box-line-height
     );
-    @include avariable(
-      "padding",
-      "timepicker-box-padding",
-      $timepicker-box-padding
-    );
+    padding: var(--#{$prefix}timepicker-box-padding, $timepicker-box-padding);
   }
 
   &__select {
@@ -62,54 +50,42 @@ $timepicker-separator-font-weight: 600 !default;
     align-items: center;
     border: 0;
     font-size: inherit;
-
-    @include avariable(
-      "font-weight",
-      "timepicker-select-font-weight",
+    font-weight: var(
+      --#{$prefix}timepicker-select-font-weight,
       $timepicker-select-font-weight
     );
-    @include avariable(
-      "line-height",
-      "timepicker-select-line-height",
+    line-height: var(
+      --#{$prefix}timepicker-select-line-height,
       $timepicker-select-line-height
     );
-    @include avariable(
-      "padding",
-      "timepicker-select-padding",
+    color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
+    padding: var(
+      --#{$prefix}timepicker-select-padding,
       $timepicker-select-padding
     );
-    @include avariable(
-      "color",
-      "timepicker-select-color",
-      $timepicker-select-color
-    );
   }
 
   &__select-placeholder {
-    @include avariable(
-      "opacity",
-      "timepicker-select-placeholder-opacity",
+    opacity: var(
+      --#{$prefix}timepicker-select-placeholder-opacity,
       $timepicker-select-placeholder-opacity
     );
   }
 
   &__separator {
-    @include avariable(
-      "font-weight",
-      "timepicker-separator-font-weight",
+    font-weight: var(
+      --#{$prefix}timepicker-separator-font-weight,
       $timepicker-separator-font-weight
     );
   }
 
   &__footer {
-    @include avariable(
-      "padding",
-      "timepicker-header-padding",
+    padding: var(
+      --#{$prefix}timepicker-header-padding,
       $timepicker-footer-padding
     );
-    @include avariable(
-      "margin",
-      "timepicker-header-margin",
+    margin: var(
+      --#{$prefix}timepicker-header-margin,
       $timepicker-footer-margin
     );
   }

package/src/assets/scss/components/_tooltip.scss

@@ -3,8 +3,8 @@
 /* @docs */
 $tooltip-arrow-margin: 2px !default;
 $tooltip-arrow-size: 5px !default;
-$tooltip-background-color: $primary !default;
-$tooltip-color: $primary-invert !default;
+$tooltip-background-color: var(--#{$prefix}primary) !default;
+$tooltip-color: var(--#{$prefix}primary-invert) !default;
 $tooltip-content-box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
 $tooltip-content-font-size: 0.85rem !default;
 $tooltip-content-max-width: 300px !default;
@@ -25,23 +25,16 @@ $tooltip-content-zindex: 38 !default;
     content: "";
     pointer-events: none;
 
-    @include avariable(
-      "z-index",
-      "tooltip-content-zindex",
-      $tooltip-content-zindex
-    );
-    @include avariable(
-      "color",
-      "tooltip-background-color",
-      $tooltip-background-color
-    );
+    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
+    color: var(--#{$prefix}tooltip-background-color, $tooltip-background-color);
 
     // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
 
@@ -60,19 +53,16 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -91,19 +81,16 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -121,19 +108,16 @@ $tooltip-content-zindex: 38 !default;
       border-bottom-style: solid;
       border-bottom-color: transparent;
 
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -151,19 +135,16 @@ $tooltip-content-zindex: 38 !default;
       border-bottom-style: solid;
       border-bottom-color: transparent;
 
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -182,15 +163,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-right-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-right-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-left-width: 0;
     }
@@ -209,15 +187,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-left-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-left-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-right-width: 0;
     }
@@ -236,15 +211,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-left-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-left-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-right-width: 0;
     }
@@ -263,15 +235,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-right-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-right-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-left-width: 0;
     }
@@ -281,59 +250,42 @@ $tooltip-content-zindex: 38 !default;
     position: absolute;
     white-space: nowrap;
 
-    @include avariable(
-      "max-width",
-      "tooltip-content-max-width",
+    max-width: var(
+      --#{$prefix}tooltip-content-max-width,
       $tooltip-content-max-width
     );
-    @include avariable(
-      "padding",
-      "tooltip-content-padding",
-      $tooltip-content-padding
-    );
-    @include avariable(
-      "border-radius",
-      "tooltip-content-radius-large",
+    padding: var(--#{$prefix}tooltip-content-padding, $tooltip-content-padding);
+    border-radius: var(
+      --#{$prefix}tooltip-content-radius-large,
       $tooltip-content-radius-large
     );
-    @include avariable(
-      "font-size",
-      "tooltip-content-font-size",
+    font-size: var(
+      --#{$prefix}tooltip-content-font-size,
       $tooltip-content-font-size
     );
-    @include avariable(
-      "font-weight",
-      "tooltip-content-weight-normal",
+    font-weight: var(
+      --#{$prefix}tooltip-content-weight-normal,
       $tooltip-content-weight-normal
     );
-    @include avariable(
-      "box-shadow",
-      "tooltip-content-box-shadow",
+    box-shadow: var(
+      --#{$prefix}tooltip-content-box-shadow,
       $tooltip-content-box-shadow
     );
-    @include avariable(
-      "z-index",
-      "tooltip-content-zindex",
-      $tooltip-content-zindex
-    );
-    @include avariable(
-      "background-color",
-      "tooltip-background-color",
+    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
+    background-color: var(
+      --#{$prefix}tooltip-background-color,
       $tooltip-background-color
     );
-    @include avariable("color", "tooltip-color", $tooltip-color);
+    color: var(--#{$prefix}tooltip-color, $tooltip-color);
 
     // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
-        @include avariable("background", ("variant-" + #{$name}), $color);
-        @include avariable(
-          "color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
+        background: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
       }
     }
 
@@ -342,28 +294,22 @@ $tooltip-content-zindex: 38 !default;
       top: auto;
       right: auto;
 
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       left: 50%;
       transform: translateX(-50%);
     }
 
     &--bottom {
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       right: auto;
       bottom: auto;
@@ -375,30 +321,22 @@ $tooltip-content-zindex: 38 !default;
       top: 50%;
       right: auto;
       bottom: auto;
-
-      @include evariable(
-        "left",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      left: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateY(-50%);
     }
 
     &--left {
       top: 50%;
-
-      @include evariable(
-        "right",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      right: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       bottom: auto;
       left: auto;
@@ -408,15 +346,11 @@ $tooltip-content-zindex: 38 !default;
     &--top-right {
       left: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(50%);
     }
@@ -424,15 +358,11 @@ $tooltip-content-zindex: 38 !default;
     &--top-left {
       right: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(-50%);
     }
@@ -440,15 +370,11 @@ $tooltip-content-zindex: 38 !default;
     &--bottom-right {
       left: auto;
       bottom: auto;
-
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(50%);
     }
@@ -456,15 +382,11 @@ $tooltip-content-zindex: 38 !default;
     &--bottom-left {
       left: auto;
       bottom: auto;
-
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(-50%);
     }
@@ -477,10 +399,8 @@ $tooltip-content-zindex: 38 !default;
     &--multiline {
       text-align: center;
       white-space: normal;
-
-      @include avariable(
-        "width",
-        "tooltip-content-multiline-width",
+      width: var(
+        --#{$prefix}tooltip-content-multiline-width,
         $tooltip-content-multiline-width
       );
     }
@@ -492,52 +412,36 @@ $tooltip-content-zindex: 38 !default;
       &--top,
       &--top-left,
       &--top-right {
-        @include evariable(
-          "margin-top",
-          "calc(-1 * ($size + $margin))",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-          )
+        margin-top: calc(
+          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
         );
       }
 
       &--bottom,
       &--bottom-left,
       &--bottom-right {
-        @include evariable(
-          "margin-top",
-          "calc($size + $margin)",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        margin-top: calc(
+          (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
           )
         );
       }
 
       &--right {
-        @include evariable(
-          "margin-left",
-          "calc($size + $margin)",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        margin-left: calc(
+          (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
           )
         );
       }
 
       &--left {
-        @include evariable(
-          "margin-left",
-          "calc(-1 * ($size + $margin))",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-          )
+        margin-left: calc(
+          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
         );
       }
     }