@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/src/assets/scss/components/_carousel.scss

@@ -1,26 +1,33 @@
 /* @docs */
-$carousel-arrow-background: $white !default;
-$carousel-arrow-color: $primary !default;
+$carousel-arrow-background: var(--#{$prefix}white) !default;
+$carousel-arrow-color: var(--#{$prefix}primary) !default;
 $carousel-arrow-icon-spaced: 1.5rem !default;
 $carousel-arrow-top: 50% !default;
 $carousel-arrow-size: 1.5rem !default;
-$carousel-arrow-border-radius: $base-rounded-border-radius !default;
+$carousel-arrow-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
 $carousel-arrow-border: 1px solid $carousel-arrow-background !default;
-$carousel-arrow-transition: $speed-slow $easing !default;
-$carousel-indicators-background: rgba($white, 0.5) !default;
+$carousel-arrow-transition: var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) !default;
+$carousel-indicators-background: rgba(var(--#{$prefix}white), 0.5) !default;
 $carousel-indicators-padding: 0.5rem !default;
 $carousel-indicator-margin: 0 0.5rem 0 0 !default;
-$carousel-indicator-color: $primary !default;
-$carousel-indicator-background: $white !default;
+$carousel-indicator-color: var(--#{$prefix}primary) !default;
+$carousel-indicator-background: var(--#{$prefix}white) !default;
 $carousel-indicator-border: 1px solid $carousel-indicator-color !default;
 $carousel-indicator-active-background: $carousel-indicator-color !default;
 $carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;
-$carousel-indicator-transition: $speed-slow $easing !default;
+$carousel-indicator-transition: var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) !default;
 $carousel-indicator-size: 10px !default;
-$carousel-indicator-dots-border-radius: $base-border-radius !default;
+$carousel-indicator-dots-border-radius: var(
+  --#{$prefix}base-border-radius
+) !default;
 $carousel-indicator-lines-height: 5px !default;
 $carousel-indicator-lines-width: 25px !default;
-$carousel-items-transition: all $speed-slower ease-out 0s !default;
+$carousel-items-transition: all var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) 0s !default;
 $carousel-item-border: 2px solid transparent !default;
 $carousel-overlay-background: hsla(0, 0%, 4%, 0.86) !default;
 $carousel-overlay-zindex: 40 !default;
@@ -44,16 +51,11 @@ $carousel-overlay-zindex: 40 !default;
     max-height: 100vh;
     position: fixed;
 
-    @include avariable(
-      "background-color",
-      "carousel-overlay-background",
+    background-color: var(
+      --#{$prefix}carousel-overlay-background,
       $carousel-overlay-background
     );
-    @include avariable(
-      "z-index",
-      "carousel-overlay-zindex",
-      $carousel-overlay-zindex
-    );
+    z-index: var(--#{$prefix}carousel-overlay-zindex, $carousel-overlay-zindex);
   }
 
   &__wrapper {
@@ -66,16 +68,15 @@ $carousel-overlay-zindex: 40 !default;
     width: 100%;
 
     &:not(&--dragging) {
-      @include avariable(
-        "transition",
-        "carousel-items-transition",
+      transition: var(
+        --#{$prefix}carousel-items-transition,
         $carousel-items-transition
       );
     }
   }
 
   &__item {
-    @include avariable("border", "carousel-item-border", $carousel-item-border);
+    border: var(--#{$prefix}carousel-item-border, $carousel-item-border);
     flex-shrink: 0;
 
     &--clickable {
@@ -89,14 +90,12 @@ $carousel-overlay-zindex: 40 !default;
     align-items: center;
     justify-content: center;
 
-    @include avariable(
-      "padding",
-      "carousel-indicators-padding",
+    padding: var(
+      --#{$prefix}carousel-indicators-padding,
       $carousel-indicators-padding
     );
-    @include avariable(
-      "background",
-      "carousel-indicators-background",
+    background: var(
+      --#{$prefix}carousel-indicators-background,
       $carousel-indicators-background
     );
 
@@ -115,9 +114,8 @@ $carousel-overlay-zindex: 40 !default;
 
   &__indicator {
     &:not(:last-child) {
-      @include avariable(
-        "margin",
-        "carousel-indicator-margin",
+      margin: var(
+        --#{$prefix}carousel-indicator-margin,
         $carousel-indicator-margin
       );
     }
@@ -125,76 +123,64 @@ $carousel-overlay-zindex: 40 !default;
     &__item {
       display: block;
 
-      @include avariable(
-        "border",
-        "carousel-indicator-border",
+      border: var(
+        --#{$prefix}carousel-indicator-border,
         $carousel-indicator-border
       );
-      @include avariable(
-        "background",
-        "carousel-indicator-background",
+      background: var(
+        --#{$prefix}carousel-indicator-background,
         $carousel-indicator-background
       );
-      @include avariable(
-        "transition",
-        "carousel-indicator-transition",
+      transition: var(
+        --#{$prefix}carousel-indicator-transition,
         $carousel-indicator-transition
       );
 
       &--active,
       :hover {
-        @include avariable(
-          "background",
-          "carousel-indicator-active-background",
+        background: var(
+          --#{$prefix}carousel-indicator-active-background,
           $carousel-indicator-active-background
         );
-        @include avariable(
-          "border",
-          "carousel-indicator-active-border",
+        border: var(
+          --#{$prefix}carousel-indicator-active-border,
           $carousel-indicator-active-border
         );
       }
 
       &--boxes {
-        @include avariable(
-          "width",
-          "carousel-indicator-size",
+        width: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-size",
+        height: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
       }
 
       &--dots {
-        @include avariable(
-          "border-radius",
-          "carousel-indicator-dots-border-radius",
+        border-radius: var(
+          --#{$prefix}carousel-indicator-dots-border-radius,
           $carousel-indicator-dots-border-radius
         );
-        @include avariable(
-          "width",
-          "carousel-indicator-size",
+        width: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-size",
+        height: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
       }
 
       &--lines {
-        @include avariable(
-          "width",
-          "carousel-indicator-lines-width",
+        width: var(
+          --#{$prefix}carousel-indicator-lines-width,
           $carousel-indicator-lines-width
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-lines-height",
+        height: var(
+          --#{$prefix}carousel-indicator-lines-height,
           $carousel-indicator-lines-height
         );
       }
@@ -203,28 +189,20 @@ $carousel-overlay-zindex: 40 !default;
 
   &__arrow__icon {
     cursor: pointer;
-
-    @include avariable(
-      "background",
-      "carousel-arrow-background",
+    background: var(
+      --#{$prefix}carousel-arrow-background,
       $carousel-arrow-background
     );
-    @include avariable("color", "carousel-arrow-color", $carousel-arrow-color);
-    @include avariable("width", "carousel-arrow-size", $carousel-arrow-size);
-    @include avariable("height", "carousel-arrow-size", $carousel-arrow-size);
-    @include avariable(
-      "border-radius",
-      "carousel-arrow-border-radius",
+    color: var(--#{$prefix}carousel-arrow-color, $carousel-arrow-color);
+    width: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
+    height: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
+    border-radius: var(
+      --#{$prefix}carousel-arrow-border-radius,
       $carousel-arrow-border-radius
     );
-    @include avariable(
-      "border",
-      "carousel-arrow-border",
-      $carousel-arrow-border
-    );
-    @include avariable(
-      "transition",
-      "carousel-arrow-transition",
+    border: var(--#{$prefix}carousel-arrow-border, $carousel-arrow-border);
+    transition: var(
+      --#{$prefix}carousel-arrow-transition,
       $carousel-arrow-transition
     );
   }
@@ -232,28 +210,23 @@ $carousel-overlay-zindex: 40 !default;
   &__arrow__icon-prev,
   &__arrow__icon-next {
     position: absolute;
-
-    @include avariable("top", "carousel-arrow-top", $carousel-arrow-top);
-    @include evariable(
-      "transform",
-      "translateY($length)",
-      eparam("$length", variable("carousel-arrow-top", -$carousel-arrow-top))
+    top: var(--#{$prefix}carousel-arrow-top, $carousel-arrow-top);
+    transform: translateY(
+      var(--#{$prefix}carousel-arrow-top, -$carousel-arrow-top)
     );
     z-index: 1;
   }
 
   &__arrow__icon-prev {
-    @include avariable(
-      "left",
-      "carousel-arrow-icon-spaced",
+    left: var(
+      --#{$prefix}carousel-arrow-icon-spaced,
       $carousel-arrow-icon-spaced
     );
   }
 
   &__arrow__icon-next {
-    @include avariable(
-      "right",
-      "carousel-arrow-icon-spaced",
+    right: var(
+      --#{$prefix}carousel-arrow-icon-spaced,
       $carousel-arrow-icon-spaced
     );
   }

package/src/assets/scss/components/_checkbox.scss

@@ -1,21 +1,24 @@
 @use "sass:list";
 
 /* @docs */
-$checkbox-active-background-color: $primary !default;
-$checkbox-background-color: $primary !default;
-$checkbox-border-color: $primary !default;
-$checkbox-border-radius: $base-border-radius !default;
+$checkbox-active-background-color: var(--#{$prefix}primary) !default;
+$checkbox-background-color: var(--#{$prefix}primary) !default;
+$checkbox-box-shadow: $control-box-shadow !default;
+$checkbox-border-color: var(--#{$prefix}primary) !default;
+$checkbox-border-style: solid !default;
+$checkbox-border-radius: var(--#{$prefix}base-border-radius) !default;
 $checkbox-border-width: 2px !default;
 $checkbox-checked-box-shadow-length: 0 0 0.5em !default;
 $checkbox-checked-box-shadow-opacity: 0.8 !default;
 $checkbox-checkmark-color: $primary-invert !default;
-$checkbox-disabled-opacity: $base-disabled-opacity !default;
+$checkbox-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $checkbox-label-padding: 0 0 0 0.5em !default;
 $checkbox-margin-sibiling: 0.5em !default;
 $checkbox-size: 1rem !default;
 $checkbox-line-height: 1.5 !default;
 /* @docs */
 
+// checkmark svg calculation
 @function svg_checkmark($color) {
   $start: '<svg width="100%" height="100%" viewBox="0 0 234 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
   $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)"><path style="fill:#{$color}" d="M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z"></path></g></g>';
@@ -23,6 +26,8 @@ $checkbox-line-height: 1.5 !default;
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
+
+// indeterminate svg calculation
 @function svg_indeterminate($color) {
   $start: '<svg width="100%" height="100%" viewBox="0 0 417 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
   $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(6.96176,0,0,20.5682,-118.661,-806.753)"><path style="fill:#{$color}" d="M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z"/></g></g>';
@@ -32,31 +37,24 @@ $checkbox-line-height: 1.5 !default;
 }
 
 .o-chk {
+  @include unselectable;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   position: relative;
 
-  @include unselectable;
-  @include avariable(
-    "line-height",
-    "checkbox-line-height",
-    $checkbox-line-height
-  );
-  @include avariable(
-    "margin-right",
-    "checkbox-margin-sibiling",
+  line-height: var(--#{$prefix}checkbox-line-height, $checkbox-line-height);
+  margin-right: var(
+    --#{$prefix}checkbox-margin-sibiling,
     $checkbox-margin-sibiling
   );
 
   &__input {
-    @include avariable("width", "checkbox-size", $checkbox-size);
-    @include avariable("height", "checkbox-size", $checkbox-size);
-    outline: none;
+    width: var(--#{$prefix}checkbox-size, $checkbox-size);
+    height: var(--#{$prefix}checkbox-size, $checkbox-size);
     margin: 0;
+    outline: none;
     vertical-align: top;
-    background-position: center;
-    background-size: contain;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -64,120 +62,105 @@ $checkbox-line-height: 1.5 !default;
     print-color-adjust: exact;
     flex-shrink: 0;
     cursor: pointer;
-    background-repeat: no-repeat;
 
-    @include avariable(
-      "background-color",
-      "checkbox-background-color",
+    box-shadow: var(--#{$prefix}checkbox-box-shadow, $checkbox-box-shadow);
+    background-color: var(
+      --#{$prefix}checkbox-background-color,
       $checkbox-background-color
     );
-    @include avariable(
-      "border-radius",
-      "checkbox-border-radius",
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
+
+    border-radius: var(
+      --#{$prefix}checkbox-border-radius,
       $checkbox-border-radius
     );
-    @include avariable(
-      "border-width",
-      "checkbox-border-width",
+    border-width: var(
+      --#{$prefix}checkbox-border-width,
       $checkbox-border-width
     );
-    @include avariable(
-      "border-color",
-      "checkbox-border-color",
+    border-color: var(
+      --#{$prefix}checkbox-border-color,
       $checkbox-border-color
     );
-    border-style: solid;
-    transition-property: background;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
+    border-style: var(
+      --#{$prefix}checkbox-border-style,
+      $checkbox-border-style
     );
 
     &--checked {
-      @include avariable(
-        "background-color",
-        "checkbox-active-background-color",
+      background-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      @include avariable(
-        "border-color",
-        "checkbox-active-background-color",
+      border-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      background-image: url(svg_checkmark(
-        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
-      ));
+      background-image: url(svg_checkmark($checkbox-checkmark-color));
     }
 
     &--indeterminate {
-      @include avariable(
-        "background-color",
-        "checkbox-active-background-color",
+      background-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      @include avariable(
-        "border-color",
-        "checkbox-active-background-color",
+      border-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      background-image: url(svg_indeterminate(
-        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
-      ));
+      background-image: url(svg_indeterminate($checkbox-checkmark-color));
     }
   }
 
   &__label {
-    @include avariable(
-      "padding",
-      "checkbox-label-padding",
-      $checkbox-label-padding
-    );
+    padding: var(--#{$prefix}checkbox-label-padding, $checkbox-label-padding);
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "checkbox-disabled-opacity",
+    opacity: var(
+      --#{$prefix}checkbox-disabled-opacity,
       $checkbox-disabled-opacity
     );
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("checkbox-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-chk__input {
-        @include avariable("border-color", ("variant-" + #{$name}), $color);
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-#{$name}, $color);
+        background-color: var(--#{$prefix}variant-#{$name}, $color);
       }
 
       .o-chk__input--checked {
-        background-image: url(svg_checkmark(
-          variable(("variant-invert-" + #{$name}), $color-invert)
-        ));
+        background-image: url(svg_checkmark($color-invert));
       }
 
       .o-chk__input--indeterminate {
-        background-image: url(svg_indeterminate(
-          variable(("variant-invert-" + #{$name}), $color-invert)
-        ));
+        background-image: url(svg_indeterminate($color-invert));
       }
     }
   }
+
+  // focus effect
+  &:focus &__input,
+  &:focus-within &__input {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_collapse.scss

@@ -2,8 +2,11 @@
 /* @docs */
 
 .o-clps {
+  width: 100%;
+
   &__trigger {
     cursor: pointer;
+    display: inline-block;
   }
 
   &__content {