@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/assets/scss/components/_radio.scss

@@ -4,116 +4,101 @@
 $radio-active-background-color: $primary !default;
 $radio-checked-box-shadow-length: 0 0 0.5em !default;
 $radio-checked-box-shadow-opacity: 0.8 !default;
-$radio-disabled-opacity: $base-disabled-opacity !default;
+$radio-box-shadow: $control-box-shadow !default;
+$radio-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $radio-label-padding: 0 0 0 0.5em !default;
 $radio-margin-sibiling: 0.5em !default;
 $radio-size: 1rem !default;
 $radio-line-height: 1.25 !default;
 /* @docs */
 
-@function svg_radio_fill($color, $background-color: "transparent") {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" 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.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
+// filled svg calculation
+@function svg_radio_fill() {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#e11919" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
+    '<g id="SVGRepo_iconCarrier">' +
+    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
+    '<circle cx="256" cy="256" r="144"></circle>' + "</g>";
+
   $end: "</svg>";
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
-@function svg_radio_empty($color) {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" 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(10.1032,0,0,10.1032,-255.068,-313.298)"><circle cx="30.195" cy="35.959" r="4.85" style="fill:#{$color};"/></g>';
+
+// empty svg calculation
+@function svg_radio_empty() {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
+    '<g id="SVGRepo_iconCarrier">' +
+    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
+    "</g>";
   $end: "</svg>";
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
 
 .o-radio {
+  @include unselectable;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-
-  @include unselectable;
-  @include avariable("line-height", "radio-line-height", $radio-line-height);
-  @include avariable(
-    "margin-right",
-    "radio-margin-sibiling",
-    $radio-margin-sibiling
-  );
+  line-height: var(--#{$prefix}radio-line-height, $radio-line-height);
+  margin-right: var(--#{$prefix}radio-margin-sibiling, $radio-margin-sibiling);
 
   &__input {
-    @include avariable("width", "radio-size", $radio-size);
-    @include avariable("height", "radio-size", $radio-size);
+    font-size: var(--#{$prefix}radio-font-size, inherit);
+    width: var(--#{$prefix}radio-size, $radio-size);
+    height: var(--#{$prefix}radio-size, $radio-size);
     margin: 0;
     vertical-align: top;
-    background-position: center;
-    background-size: contain;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-    border-radius: 50%;
     cursor: pointer;
-    background-repeat: no-repeat;
-    transition-property: background;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
+    box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
+    border-radius: 50%;
+    background: var(
+      --oruga-radio-active-background-color,
+      $radio-active-background-color
     );
+    mask-image: url(svg_radio_empty());
+    background-image: none;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
 
-    background-image: url(svg_radio_empty(
-      variable("radio-active-background-color", $radio-active-background-color)
-    ));
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
 
     &--checked {
-      background-image: url(svg_radio_fill(
-        variable(
-          "radio-active-background-color",
-          $radio-active-background-color
-        )
-      ));
+      mask-image: url(svg_radio_fill());
     }
   }
 
   &__label {
-    @include avariable("padding", "radio-label-padding", $radio-label-padding);
+    padding: var(--#{$prefix}radio-label-padding, $radio-label-padding);
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "radio-disabled-opacity",
-      $radio-disabled-opacity
-    );
+    opacity: var(--#{$prefix}radio-disabled-opacity, $radio-disabled-opacity);
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("radio-font-size-" + #{$name}), $value);
+      --#{$prefix}radio-font-size: #{$value};
+      --#{$prefix}radio-size: #{$value};
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
-      .o-radio__input {
-        background-image: url(svg_radio_empty(
-          variable(("variant-" + #{$name}), $color)
-        ));
-
-        &--checked {
-          background-image: url(svg_radio_fill(
-            variable(("variant-" + #{$name}), $color),
-            variable(("variant-invert-" + #{$name}), $color-invert)
-          ));
-        }
-      }
+      --oruga-radio-active-background-color: #{$color};
     }
   }
 }

package/src/assets/scss/components/_select.scss

@@ -2,22 +2,23 @@
 
 /* @docs */
 $select-background-color: #fff !default;
-$select-border-color: $grey-lighter !default;
-$select-border-width: 1px !default;
+$select-border-color: var(--#{$prefix}grey-lighter) !default;
 $select-border-style: solid !default;
-$select-border-radius: $base-border-radius !default;
-$select-rounded-border-radius: $base-rounded-border-radius !default;
-$select-box-shadow: none !default;
+$select-border-width: 1px !default;
+$select-border-radius: var(--#{$prefix}base-border-radius) !default;
+$select-rounded-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
+$select-box-shadow: $control-box-shadow !default;
 $select-color: #363636 !default;
 $select-icon-zindex: 4 !default;
 $select-height: $control-height !default;
-$select-arrow-size: 1rem !default;
-$select-line-height: $base-line-height !default;
+$select-line-height: var(--#{$prefix}base-line-height) !default;
 $select-margin: 0 !default;
-$select-max-width: 100% !default;
-$select-width: 100% !default;
-$select-placeholder-opacity: $base-disabled-opacity !default;
 $select-padding: $control-padding-vertical $control-padding-horizontal !default;
+$select-arrow-color: $select-color !default;
+$select-arrow-size: 1rem !default;
+$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 /* @docs */
 
 @function svg_arrow($color) {
@@ -49,88 +50,61 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
   justify-content: flex-start;
   align-items: center;
 
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("max-width", "select-max-width", $select-max-width);
-  @include avariable("width", "select-width", $select-width);
-  @include avariable(
-    "background-color",
-    "select-background-color",
+  box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
+  background-color: var(
+    --#{$prefix}select-background-color,
     $select-background-color
   );
-  @include avariable(
-    "border-color",
-    "select-border-color",
-    $select-border-color
-  );
-  @include avariable(
-    "border-width",
-    "select-border-width",
-    $select-border-width
-  );
-  @include avariable(
-    "border-style",
-    "select-border-style",
-    $select-border-style
-  );
-  @include avariable(
-    "border-radius",
-    "select-border-radius",
-    $select-border-radius
-  );
-  @include avariable("color", "select-color", $select-color);
-  @include avariable("margin", "select-margin", $select-margin);
-  @include avariable("box-shadow", "select-box-shadow", $select-box-shadow);
-  @include avariable("line-height", "select-line-height", $select-line-height);
-  @include avariable("padding", "select-padding", $select-padding);
-  @include avariable("height", "select-height", $select-height);
+  border-color: var(--#{$prefix}select-border-color, $select-border-color);
+  border-width: var(--#{$prefix}select-border-width, $select-border-width);
+  border-style: var(--#{$prefix}select-border-style, $select-border-style);
+  border-radius: var(--#{$prefix}select-border-radius, $select-border-radius);
+  color: var(--#{$prefix}select-color, $select-color);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  height: var(--#{$prefix}select-height, $select-height);
+  line-height: var(--#{$prefix}select-line-height, $select-line-height);
+  padding: var(--#{$prefix}select-padding, $select-padding);
+  margin: var(--#{$prefix}select-margin, $select-margin);
 
   &-arrow {
-    background-image: url(svg_arrow(
-      variable("select-arrow-color", $select-color)
-    ));
+    background-image: url(svg_arrow($select-arrow-color));
     background-repeat: no-repeat;
-
-    @include avariable(
-      "background-size",
-      "select-arrow-size",
-      $select-arrow-size
-    );
-    @include evariable(
-      "background-position",
-      "calc(100% - $param * 0.5) center",
-      eparam("$param", variable("select-arrow-size", $select-arrow-size))
-    );
-    @include evariable(
-      "padding-right",
-      "calc($param * 2)",
-      eparam("$param", variable("select-arrow-size", $select-arrow-size))
+    background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
+    background-position: calc(
+        100% - var(--#{$prefix}select-arrow-size, $select-arrow-size) * 0.5
+      )
+      center;
+    padding-right: calc(
+      var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
     );
   }
 
   &-iconspace-left {
-    @include avariable("padding-left", "select-height", $select-height);
+    padding-left: var(--#{$prefix}select-height, $select-height);
   }
 
   &-iconspace-right {
-    @include avariable("padding-right", "select-height", $select-height);
+    padding-right: var(--#{$prefix}select-height, $select-height);
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("select-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
-      @include avariable("border-color", ("variant-" + #{$name}), $color);
+      border-color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "select-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}select-rounded-border-radius,
       $select-rounded-border-radius
     );
   }
@@ -141,9 +115,8 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
   }
 
   &--placeholder {
-    @include avariable(
-      "opacity",
-      "select-placeholder-opacity",
+    opacity: var(
+      --#{$prefix}select-placeholder-opacity,
       $select-placeholder-opacity
     );
   }
@@ -153,9 +126,8 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
     position: absolute;
     top: 0;
     height: 100%;
-
-    @include avariable("width", "select-height", $select-height);
-    @include avariable("z-index", "select-icon-zindex", $select-icon-zindex);
+    width: var(--#{$prefix}select-height, $select-height);
+    z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
   }
 
   &__icon-right {

package/src/assets/scss/components/_sidebar.scss

@@ -2,9 +2,9 @@
 
 /* @docs */
 $sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
-$sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
-$sidebar-content-background-color: $grey-lighter !default;
-$sidebar-border-radius: $base-border-radius !default;
+$sidebar-box-shadow: 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) !default;
+$sidebar-content-background-color: var(--#{$prefix}grey-lighter) !default;
+$sidebar-border-radius: var(--#{$prefix}base-border-radius) !default;
 $sidebar-border-width: 1px !default;
 $sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
 $sidebar-reduced-width: 80px !default;
@@ -20,156 +20,79 @@ $sidebar-zindex: 100 !default;
   width: 100%;
   display: none;
 
-  @include avariable("z-index", "sidebar-zindex", $sidebar-zindex);
-
   &__content {
     position: absolute;
-
-    @include avariable(
-      "background-color",
-      "sidebar-content-background-color",
+    background-color: var(
+      --#{$prefix}sidebar-content-background-color,
       $sidebar-content-background-color
     );
-    @include avariable(
-      "border-radius",
-      "sidebar-border-radius",
+    border-radius: var(
+      --#{$prefix}sidebar-border-radius,
       $sidebar-border-radius
     );
-    @include avariable("box-shadow", "sidebar-box-shadow", $sidebar-box-shadow);
+    box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       &--#{$name} {
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        background-color: var(--#{$prefix}variant-#{$name}), $color;
       }
     }
 
     // position
     &--right,
     &--left {
-      @include avariable(
-        "transition-duration",
-        "transition-duration",
-        $speed-slow
-      );
-      @include avariable(
-        "transition-timing-function",
-        "transition-timing",
-        $easing
-      );
-      @include avariable("width", "sidebar-width", $sidebar-width);
-      transition: width;
+      transition: width var(--#{$prefix}transition-duration)
+        var(--#{$prefix}transition-timing);
+      width: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
     &--top,
     &--bottom {
-      @include avariable(
-        "transition-duration",
-        "transition-duration",
-        $speed-slow
-      );
-      @include avariable(
-        "transition-timing-function",
-        "transition-timing",
-        $easing
-      );
-      @include avariable("height", "sidebar-width", $sidebar-width);
-      transition: height;
+      transition: height var(--#{$prefix}transition-duration)
+        var(--#{$prefix}transition-timing);
+      height: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
     &--right {
       left: auto;
       right: 0;
-
-      @include evariable(
-        "border-left",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-left: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--left {
       left: 0;
       right: auto;
-
-      @include evariable(
-        "border-right",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-right: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--top {
       top: 0;
       bottom: auto;
-
-      @include evariable(
-        "border-bottom",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
+      border-bottom: var(
+          --#{$prefix}sidebar-border-width,
+          $sidebar-border-width
         )
-      );
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--bottom {
       top: auto;
       bottom: 0;
-
-      @include evariable(
-        "border-top",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-top: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--reduced {
-      @include avariable(
-        "width",
-        "sidebar-reduced-width",
-        $sidebar-reduced-width
-      );
+      width: var(--#{$prefix}sidebar-reduced-width, $sidebar-reduced-width);
 
       &-expand {
         &:hover {
-          @include avariable(
-            "transition-duration",
-            "transition-duration",
-            $speed-slow
-          );
-          @include avariable(
-            "transition-timing-function",
-            "transition-timing",
-            $easing
-          );
-          @include avariable("width", "sidebar-width", $sidebar-width);
-          transition: width;
+          transition: width var(--#{$prefix}transition-duration)
+            var(--#{$prefix}transition-timing);
+          width: var(--#{$prefix}sidebar-width, $sidebar-width);
         }
       }
     }
@@ -191,8 +114,7 @@ $sidebar-zindex: 100 !default;
     left: 0;
     right: 0;
     top: 0;
-
-    @include avariable("background", "sidebar-overlay", $sidebar-overlay);
+    background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
   }
 
   &--active {
@@ -210,4 +132,8 @@ $sidebar-zindex: 100 !default;
       position: relative;
     }
   }
+
+  &:not(&--inline) {
+    z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
+  }
 }

package/src/assets/scss/components/_skeleton.scss

@@ -5,7 +5,7 @@ $skeleton-background: linear-gradient(
   rgba($grey-lighter, 0.5) 50%,
   $grey-lighter 75%
 ) !default;
-$skeleton-border-radius: $base-border-radius !default;
+$skeleton-border-radius: var(--#{$prefix}base-border-radius) !default;
 $skeleton-duration: 1.5s !default;
 $skeleton-margin: 0.5rem 0 0 0 !default;
 /* @docs */
@@ -22,13 +22,9 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
 @mixin steps-size($size, $name: null) {
   @if $name {
-    @include avariable(
-      "line-height",
-      ("skeleton-font-size-" + #{$name}),
-      $size
-    );
+    line-height: var(--#{$prefix}skeleton-font-size-#{$name}, $size);
   } @else {
-    @include avariable("line-height", "skeleton-font-size", $size);
+    line-height: var(--#{$prefix}skeleton-font-size, $size);
   }
 }
 
@@ -40,17 +36,12 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
   &__item {
     width: 100%;
-
-    @include avariable(
-      "background",
-      "skeleton-background",
-      $skeleton-background
-    );
+    background: var(--#{$prefix}skeleton-background, $skeleton-background);
+    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "skeleton-border-radius",
+      border-radius: var(
+        --#{$prefix}skeleton-border-radius,
         $skeleton-border-radius
       );
     }
@@ -59,10 +50,8 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
       background-size: 400% 100%;
       animation-name: skeleton-loading;
       animation-iteration-count: infinite;
-
-      @include avariable(
-        "animation-duration",
-        "skeleton-duration",
+      animation-duration: var(
+        --#{$prefix}skeleton-duration,
         $skeleton-duration
       );
     }
@@ -71,7 +60,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
       content: "\00a0";
     }
 
-    @include avariable("margin", "skeleton-margin", $skeleton-margin);
     @include steps-size($base-font-size);
 
     @each $name, $value in $sizes {
@@ -87,7 +75,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
   &--right {
     align-items: flex-end;
-
-    @include avariable("margin", "skeleton-margin", $skeleton-margin);
+    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
   }
 }