@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/dist/scss/components/_switch.scss

@@ -1,54 +1,60 @@
 @use "sass:list";
 
 /* @docs */
-$switch-active-background-color: $primary !default;
+$switch-active-background-color: var(--#{$prefix}primary) !default;
 $switch-action-background: #f5f5f5 !default;
-$switch-background: $grey-light !default;
-$switch-border-radius: $base-border-radius !default;
+$switch-background: var(--#{$prefix}grey-light) !default;
+$switch-border-radius: var(--#{$prefix}base-border-radius) !default;
 $switch-box-shadow:
   0 3px 1px 0 rgba(0, 0, 0, 0.05),
   0 2px 2px 0 rgba(0, 0, 0, 0.1),
   0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
-$switch-disabled-opacity: $base-disabled-opacity !default;
+$switch-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $switch-margin-label: 0.5em !default;
 $switch-padding: 0.2em !default;
-$switch-rounded-border-radius: $base-rounded-border-radius !default;
+$switch-rounded-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
 $switch-width: 2.75 * 1em !default;
 /* @docs */
 
 .o-switch {
+  @include unselectable;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   position: relative;
+  border-radius: 50rem;
 
-  @include unselectable;
+  // size variants
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      font-size: var(--#{$prefix}font-size-#{name}, $value);
+    }
+  }
 
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-switch__check--checked {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
     &--#{$name}-passive {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-switch__check:not(.o-switch__check--checked) {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
   }
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      @include avariable("font-size", ("font-size-" + #{name}), $value);
-    }
-  }
 
   &__label {
-    @include avariable(
-      "margin-left",
-      "switch-margin-label",
-      $switch-margin-label
-    );
+    margin-left: var(--#{$prefix}switch-margin-label, $switch-margin-label);
   }
 
   &--left {
@@ -56,49 +62,36 @@ $switch-width: 2.75 * 1em !default;
 
     .o-switch__label {
       margin-left: 0;
-
-      @include avariable(
-        "margin-right",
-        "switch-margin-label",
-        $switch-margin-label
-      );
+      margin-right: var(--#{$prefix}switch-margin-label, $switch-margin-label);
     }
   }
 
   &__check-switch {
     content: "";
     display: block;
-
-    @include evariable(
-      "height",
-      "calc(($width - $padding * 2) * 0.5)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    height: calc(
+      (
+          var(--#{$prefix}switch-width, $switch-width) - var(
+              --#{$prefix}switch-padding,
+              $switch-padding
+            ) * 2
+        ) * 0.5
     );
-    @include evariable(
-      "width",
-      "calc(($width - $padding * 2) * 0.5)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    width: calc(
+      (
+          var(--#{$prefix}switch-width, $switch-width) - var(
+              --#{$prefix}switch-padding,
+              $switch-padding
+            ) * 2
+        ) * 0.5
     );
-    @include avariable(
-      "background",
-      "switch-action-background",
+    background: var(
+      --#{$prefix}switch-action-background,
       $switch-action-background
     );
-    @include avariable("box-shadow", "switch-box-shadow", $switch-box-shadow);
-    transition-property: transform;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
+    box-shadow: var(--#{$prefix}switch-box-shadow, $switch-box-shadow);
+    transition: transform var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
     will-change: transform;
     transform-origin: left;
   }
@@ -107,38 +100,21 @@ $switch-width: 2.75 * 1em !default;
     display: flex;
     align-items: center;
     flex-shrink: 0;
-
-    @include avariable("width", "switch-width", $switch-width);
-    @include evariable(
-      "height",
-      "calc($width * 0.5 + $padding)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    width: var(--#{$prefix}switch-width, $switch-width);
+    height: calc(
+      var(--#{$prefix}switch-width, $switch-width) * 0.5 +
+        var(--#{$prefix}switch-padding, $switch-padding)
     );
-    @include avariable("padding", "switch-padding", $switch-padding);
-    @include avariable("background", "switch-background", $switch-background);
-    @include avariable(
-      "border-radius",
-      "switch-border-radius",
-      $switch-border-radius
-    );
-    transition-property: background;
 
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
+    padding: var(--#{$prefix}switch-padding, $switch-padding);
+    background: var(--#{$prefix}switch-background, $switch-background);
+    border-radius: var(--#{$prefix}switch-border-radius, $switch-border-radius);
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
 
     &--checked {
-      @include avariable(
-        "background",
-        "switch-active-background-color",
+      background: var(
+        --#{$prefix}switch-active-background-color,
         $switch-active-background-color
       );
 
@@ -156,18 +132,19 @@ $switch-width: 2.75 * 1em !default;
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "switch-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}switch-rounded-border-radius,
       $switch-rounded-border-radius
     );
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "switch-disabled-opacity",
-      $switch-disabled-opacity
-    );
+    opacity: var(--#{$prefix}switch-disabled-opacity, $switch-disabled-opacity);
+  }
+
+  // focus effect
+  &:focus &__check,
+  &:focus-within &__check {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
   }
 }

package/dist/scss/components/_table.scss

@@ -4,36 +4,36 @@
 $table-background-color: #fff !default;
 $table-background: #f5f5f5 !default;
 $table-boder: 1px solid transparent !default;
-$table-border-radius: $base-border-radius !default;
+$table-border-radius: var(--#{$prefix}base-border-radius) !default;
 $table-card-box-shadow:
-  0 2px 3px rgba($black, 0.1),
-  0 0 0 1px rgba($black, 0.1) !default;
+  0 2px 3px rgba(var(--#{$prefix}black), 0.1),
+  0 0 0 1px rgba(var(--#{$prefix}black), 0.1) !default;
 $table-card-cell-font-weight: 600 !default;
 $table-card-cell-padding: 0 0.5em 0 0 !default;
 $table-card-cell-text-align: left !default;
 $table-card-detail-margin: -1rem 0 0 0;
 $table-card-margin: 0 0 1rem 0;
 $table-color: black !default;
-$table-current-sort-border-color: $grey !default;
+$table-current-sort-border-color: var(--#{$prefix}grey) !default;
 $table-current-sort-font-weight: 700 !default;
-$table-current-sort-hover-border-color: $grey !default;
+$table-current-sort-hover-border-color: var(--#{$prefix}grey) !default;
 $table-detail-background: #fafafa !default;
-$table-detail-box-shadow: inset 0 1px 3px $grey !default;
-$table-detail-chevron-color: $primary !default;
+$table-detail-box-shadow: inset 0 1px 3px var(--#{$prefix}grey) !default;
+$table-detail-chevron-color: var(--#{$prefix}primary) !default;
 $table-detail-chevron-width: 40px !default;
 $table-detail-padding: 1rem !default;
-$table-focus-border-color: $primary !default;
-$table-focus-box-shadow: 0 0 0 0.125em rgba($primary, 0.25) !default;
+$table-focus-border-color: var(--#{$prefix}primary) !default;
+$table-focus-box-shadow: 0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25) !default;
 $table-hoverable-background-color: #fafafa !default;
 $table-narrow-padding: 0.25em 0.5em !default;
-$table-row-active-background-color: $primary !default;
-$table-row-active-color: $primary-invert !default;
+$table-row-active-background-color: var(--#{$prefix}primary) !default;
+$table-row-active-color: var(--#{$prefix}primary-invert) !default;
 $table-sticky-header-height: 300px !default;
 $table-sticky-zindex: 1 !default;
 $table-striped-background-color: #fafafa !default;
-$table-td-border: 1px solid $grey-lighter !default;
+$table-td-border: 1px solid var(--#{$prefix}grey-lighter) !default;
 $table-td-padding: 0.5em 0.75em !default;
-$table-th-border: 2px solid $grey-lighter !default;
+$table-th-border: 2px solid var(--#{$prefix}grey-lighter) !default;
 $table-th-checkbox-width: 40px !default;
 $table-th-color: #363636 !default;
 $table-th-detail-width: 14px !default;
@@ -46,32 +46,25 @@ $table-th-padding: 0.5em 0.75em !default;
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-
-  @include avariable("border", "table-boder", $table-boder);
-  @include avariable(
-    "border-radius",
-    "table-border-radius",
-    $table-border-radius
-  );
-  @include avariable(
-    "background-color",
-    "table-background-color",
+  border: var(--#{$prefix}table-boder, $table-boder);
+  border-radius: var(--#{$prefix}table-border-radius, $table-border-radius);
+  background-color: var(
+    --#{$prefix}table-background-color,
     $table-background-color
   );
-  @include avariable("color", "table-color", $table-color);
+  color: var(--#{$prefix}table-color, $table-color);
 
   &__root {
     position: relative;
   }
 
   &__wrapper {
-    transition: opacity $speed $easing;
+    transition: opacity $animation-speed-fast $animation-timing;
     position: relative;
 
     &--sticky-header {
-      @include avariable(
-        "height",
-        "table-sticky-header-height",
+      height: var(
+        --#{$prefix}table-sticky-header-height,
         $table-sticky-header-height
       );
       overflow-y: auto;
@@ -81,12 +74,13 @@ $table-th-padding: 0.5em 0.75em !default;
         position: sticky;
         left: 0;
         top: 0;
-
-        @include avariable(
-          "background",
-          "table-background-color",
+        background: var(
+          --#{$prefix}table-background-color,
           $table-background-color
         );
+        z-index: calc(
+          var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex) + 1
+        );
       }
     }
 
@@ -134,9 +128,8 @@ $table-th-padding: 0.5em 0.75em !default;
       }
 
       tr {
-        @include avariable(
-          "box-shadow",
-          "table-card-box-shadow",
+        box-shadow: var(
+          --#{$prefix}table-card-box-shadow,
           $table-card-box-shadow
         );
         max-width: 100%;
@@ -153,7 +146,7 @@ $table-th-padding: 0.5em 0.75em !default;
         }
 
         &:not(:last-child) {
-          @include avariable("margin", "table-card-margin", $table-card-margin);
+          margin: var(--#{$prefix}table-card-margin, $table-card-margin);
         }
 
         &:not(.o-table__tr--selected) {
@@ -167,9 +160,8 @@ $table-th-padding: 0.5em 0.75em !default;
         }
 
         &.o-table--detailed {
-          @include avariable(
-            "margin",
-            "table-card-detail-margin",
+          margin: var(
+            --#{$prefix}table-card-detail-margin,
             $table-card-detail-margin
           );
         }
@@ -181,29 +173,23 @@ $table-th-padding: 0.5em 0.75em !default;
           width: auto;
           justify-content: space-between;
           text-align: right;
-
-          @include avariable(
-            "border-bottom",
-            "table-background",
+          border-bottom: var(
+            --#{$prefix}table-background,
             ($table-background 1px solid)
           );
 
           &:before {
             content: attr(data-label);
-
-            @include avariable(
-              "font-weight",
-              "table-card-cell-font-weight",
+            font-weight: var(
+              --#{$prefix}table-card-cell-font-weight,
               $table-card-cell-font-weight
             );
-            @include avariable(
-              "padding-right",
-              "table-card-cell-padding",
+            padding-right: var(
+              --#{$prefix}table-card-cell-padding,
               $table-card-cell-padding
             );
-            @include avariable(
-              "text-align",
-              "table-card-cell-text-align",
+            text-align: var(
+              --#{$prefix}table-card-cell-text-align,
               $table-card-cell-text-align
             );
           }
@@ -220,15 +206,10 @@ $table-th-padding: 0.5em 0.75em !default;
     vertical-align: top;
     text-align: left;
     position: relative;
-
-    @include avariable(
-      "font-weight",
-      "table-th-font-weight",
-      $table-th-font-weight
-    );
-    @include avariable("color", "table-th-color", $table-th-color);
-    @include avariable("border-bottom", "table-th-border", $table-th-border);
-    @include avariable("padding", "table-th-padding", $table-th-padding);
+    font-weight: var(--#{$prefix}table-th-font-weight, $table-th-font-weight);
+    color: var(--#{$prefix}table-th-color, $table-th-color);
+    border-bottom: var(--#{$prefix}table-th-border, $table-th-border);
+    padding: var(--#{$prefix}table-th-padding, $table-th-padding);
 
     &--centered {
       text-align: center;
@@ -244,22 +225,16 @@ $table-th-padding: 0.5em 0.75em !default;
     }
 
     &-checkbox {
-      @include avariable(
-        "width",
-        "table-th-checkbox-width",
-        $table-th-checkbox-width
-      );
+      width: var(--#{$prefix}table-th-checkbox-width, $table-th-checkbox-width);
     }
 
     &-current-sort {
-      @include avariable(
-        "border-color",
-        "table-current-sort-border-color",
+      border-color: var(
+        --#{$prefix}table-current-sort-border-color,
         $table-current-sort-border-color
       );
-      @include avariable(
-        "font-weight",
-        "table-current-sort-font-weight",
+      font-weight: var(
+        --#{$prefix}table-current-sort-font-weight,
         $table-current-sort-font-weight
       );
     }
@@ -268,9 +243,8 @@ $table-th-padding: 0.5em 0.75em !default;
       cursor: pointer;
 
       &:hover {
-        @include avariable(
-          "border-color",
-          "table-current-sort-hover-border-color",
+        border-color: var(
+          --#{$prefix}table-current-sort-hover-border-color,
           $table-current-sort-hover-border-color
         );
       }
@@ -281,16 +255,9 @@ $table-th-padding: 0.5em 0.75em !default;
       position: sticky;
       left: 0;
       top: 0;
-
-      @include evariable(
-        "z-index",
-        "calc($param + $factor)",
-        eparam("$param", variable("table-sticky-zindex", $table-sticky-zindex)),
-        eparam("$factor", 2)
-      );
-      @include avariable(
-        "background",
-        "table-background-color",
+      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
+      background: var(
+        --#{$prefix}table-background-color,
         $table-background-color
       );
     }
@@ -300,34 +267,23 @@ $table-th-padding: 0.5em 0.75em !default;
     }
 
     &--detailed {
-      @include avariable(
-        "width",
-        "table-th-detail-width",
-        $table-th-detail-width
-      );
+      width: var(--#{$prefix}table-th-detail-width, $table-th-detail-width);
     }
   }
 
   &__td {
     vertical-align: top;
     text-align: left;
-
-    @include avariable("border-bottom", "table-td-border", $table-td-border);
-    @include avariable("padding", "table-td-padding", $table-td-padding);
+    border-bottom: var(--#{$prefix}table-td-border, $table-td-border);
+    padding: var(--#{$prefix}table-td-padding, $table-td-padding);
 
     &--sticky {
       position: -webkit-sticky;
       position: sticky;
       left: 0;
-
-      @include avariable(
-        "z-index",
-        "table-sticky-zindex",
-        $table-sticky-zindex
-      );
-      @include avariable(
-        "background",
-        "table-background-color",
+      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
+      background: var(
+        --#{$prefix}table-background-color,
         $table-background-color
       );
     }
@@ -342,29 +298,24 @@ $table-th-padding: 0.5em 0.75em !default;
 
     &-chevron {
       vertical-align: middle;
-
-      @include avariable(
-        "width",
-        "table-detail-chevron-width",
+      width: var(
+        --#{$prefix}table-detail-chevron-width,
         $table-detail-chevron-width
       );
-      @include avariable(
-        "color",
-        "table-detail-chevron-color",
+      color: var(
+        --#{$prefix}table-detail-chevron-color,
         $table-detail-chevron-color
       );
     }
   }
 
   &:focus {
-    @include avariable(
-      "border-color",
-      "table-focus-border-color",
+    border-color: var(
+      --#{$prefix}table-focus-border-color,
       $table-focus-border-color
     );
-    @include avariable(
-      "box-shadow",
-      "table-focus-box-shadow",
+    box-shadow: var(
+      --#{$prefix}table-focus-box-shadow,
       $table-focus-box-shadow
     );
   }
@@ -373,21 +324,20 @@ $table-th-padding: 0.5em 0.75em !default;
     tr:last-child {
       td,
       th {
-        @include avariable("border", "table-td-border", $table-td-border);
+        border: var(--#{$prefix}table-td-border, $table-td-border);
       }
     }
 
     td,
     th {
-      @include avariable("border", "table-td-border", $table-td-border);
+      border: var(--#{$prefix}table-td-border, $table-td-border);
     }
   }
 
   &--striped {
     tbody tr:not(.o-table__tr--selected):nth-child(2n) {
-      @include avariable(
-        "background-color",
-        "table-striped-background-color",
+      background-color: var(
+        --#{$prefix}table-striped-background-color,
         $table-striped-background-color
       );
     }
@@ -396,42 +346,31 @@ $table-th-padding: 0.5em 0.75em !default;
   &--narrowed {
     td,
     th {
-      @include avariable(
-        "padding",
-        "table-narrow-padding",
-        $table-narrow-padding
-      );
+      padding: var(--#{$prefix}table-narrow-padding, $table-narrow-padding);
     }
   }
 
   &--hoverable {
     tbody tr:not(.o-table__tr--selected):hover {
-      @include avariable(
-        "background-color",
-        "table-hoverable-background-color",
+      background-color: var(
+        --#{$prefix}table-hoverable-background-color,
         $table-hoverable-background-color
       );
     }
   }
 
   &__detail {
-    @include avariable(
-      "box-shadow",
-      "table-detail-box-shadow",
+    box-shadow: var(
+      --#{$prefix}table-detail-box-shadow,
       $table-detail-box-shadow
     );
-    @include avariable(
-      "background",
-      "table-detail-background",
+    background: var(
+      --#{$prefix}table-detail-background,
       $table-detail-background
     );
 
     td {
-      @include avariable(
-        "padding",
-        "table-detail-padding",
-        $table-detail-padding
-      );
+      padding: var(--#{$prefix}table-detail-padding, $table-detail-padding);
     }
   }