@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_radio.scss

@@ -1,133 +1,140 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$radio-active-background-color: $primary !default;
+$radio-spacer: h.useVar("control-spacer") !default;
+$radio-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+$radio-width: 1em !default;
+$radio-height: 1em !default;
+
+$radio-color: h.useVar("font-color") !default;
+$radio-font-size: h.useVar("font-size") !default;
+$radio-font-weight: h.useVar("font-weight") !default;
+$radio-line-height: h.useVar("line-height") !default;
+
+$radio-box-shadow: h.useVar("control-box-shadow-inset") !default;
+$radio-border-color: h.useVar("primary") !default;
+$radio-border-style: solid !default;
+$radio-border-radius: h.useVar("border-radius-rounded") !default;
+$radio-border-width: calc(2 * h.useVar("control-border-width")) !default;
+$radio-background-color: h.useVar("white") !default;
+$radio-active-background-color: h.useVar("primary") !default;
+
 $radio-checked-box-shadow-length: 0 0 0.5em !default;
 $radio-checked-box-shadow-opacity: 0.8 !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 */
 
 // filled svg calculation
-@function svg_radio_fill() {
+@function svg_radio_filled() {
     $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>";
-
+    $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}");
+    @return h.svg-encode("#{$start}#{$content}#{$end}");
 }
 
 // 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>";
+    $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}");
+    @return h.svg-encode("#{$start}#{$content}#{$end}");
 }
 
 .o-radio {
-    @include unselectable;
+    @include h.defineVar("radio-spacer", $radio-spacer);
+    @include h.defineVar("radio-disabled-opacity", $radio-disabled-opacity);
+    @include h.defineVar("radio-width", $radio-width);
+    @include h.defineVar("radio-height", $radio-height);
+    @include h.defineVar("radio-color", $radio-color);
+    @include h.defineVar("radio-font-size", $radio-font-size);
+    @include h.defineVar("radio-font-weight", $radio-font-weight);
+    @include h.defineVar("radio-line-height", $radio-line-height);
+
+    @include h.defineVar("radio-box-shadow", $radio-box-shadow);
+    @include h.defineVar("radio-background-color", $radio-background-color);
+    @include h.defineVar(
+        "radio-active-background-color",
+        $radio-active-background-color
+    );
+    @include h.defineVar("radio-border-radius", $radio-border-radius);
+    @include h.defineVar("radio-border-width", $radio-border-width);
+    @include h.defineVar("radio-border-style", $radio-border-style);
+    @include h.defineVar("radio-border-color", $radio-border-color);
+
+    // define focus shadow effect
+    @include h.focusable(".o-radio__input");
+
+    // add clickable cursor
+    @include h.clickable;
 
     display: inline-flex;
     align-items: center;
-    cursor: pointer;
-    line-height: var(--#{$prefix}radio-line-height, $radio-line-height);
-    margin-right: var(
-        --#{$prefix}radio-margin-sibiling,
-        $radio-margin-sibiling
-    );
+    position: relative;
+
+    color: h.useVar("radio-color");
+    font-size: h.useVar("radio-font-size");
+    font-weight: h.useVar("radio-font-weight");
+    line-height: h.useVar("radio-line-height");
 
     &__input {
-        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;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
+        // add clickable cursor
+        @include h.clickable;
+
+        // remove default appearance
+        @include h.removeAppearance;
         -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
-        cursor: pointer;
-        box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
-        border-radius: 50%;
-        background-color: var(
-            --#{$prefix}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;
-
-        transition: background var(--#{$prefix}transition-duration)
-            var(--#{$prefix}transition-timing);
+
+        font-size: inherit;
+        vertical-align: top;
+        width: h.useVar("radio-width");
+        height: h.useVar("radio-height");
+
+        transition: background h.useVar("transition-duration")
+            h.useVar("transition-timing");
+
+        box-shadow: h.useVar("radio-box-shadow");
+
+        border-radius: h.useVar("radio-border-radius");
+        /* The background will be the inner filled circle */
+        background-color: h.useVar("radio-background-color");
+        /* The border will be the inner white border circle */
+        border: 2px solid h.useVar("radio-background-color");
+        /* The outline will be the outer circle */
+        outline: h.useVar("radio-border-width") h.useVar("radio-border-style")
+            h.useVar("radio-border-color");
 
         &:checked {
-            mask-image: url(svg_radio_fill());
+            background-color: h.useVar("radio-active-background-color");
         }
     }
 
     &__label {
-        padding: var(--#{$prefix}radio-label-padding, $radio-label-padding);
+        padding: 0 h.useVar("radio-spacer");
     }
 
     &--disabled {
-        opacity: var(
-            --#{$prefix}radio-disabled-opacity,
-            $radio-disabled-opacity
-        );
+        @include h.disabled(h.useVar("radio-disabled-opacity"));
     }
 
     // size variants
-    @each $name, $value in $sizes {
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}radio-font-size-#{$name}, $value);
-
-            .o-radio__input {
-                width: var(--#{$prefix}radio-font-size-#{$name}, $value);
-                height: var(--#{$prefix}radio-font-size-#{$name}, $value);
-            }
+            @include h.defineVar("radio-font-size", h.useVar("size-#{$name}"));
         }
     }
 
     // color variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-        $color-invert: list.nth($pair, 2);
-
+    @each $name, $pair in vars.$colors {
         &--#{$name} {
-            --#{$prefix}focus: #{createFocus($color)};
-
-            .o-radio__input {
-                background-color: var(
-                    --#{$prefix}radio-active-background-color-#{$name},
-                    $color
-                );
-            }
-        }
-    }
-
-    // focus effect
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        .o-radio__input {
-            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-            outline: none;
+            @include h.defineVar("radio-border-color", h.useVar($name));
+            @include h.defineVar(
+                "radio-active-background-color",
+                h.useVar($name)
+            );
         }
     }
 }

package/dist/scss/components/_select.scss

@@ -1,144 +1,148 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$select-background-color: #fff !default;
-$select-border-color: var(--#{$prefix}grey-lighter) !default;
+$select-height: h.useVar("control-height") !default;
+$select-padding: h.useVar("control-padding-vertical")
+    h.useVar("control-padding-horizontal") !default;
+$select-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$select-color: h.useVar("font-color") !default;
+$select-font-size: h.useVar("font-size") !default;
+$select-font-weight: h.useVar("font-weight") !default;
+$select-line-height: h.useVar("line-height") !default;
+
+$select-box-shadow: h.useVar("control-box-shadow-inset") !default;
+$select-background-color: h.useVar("control-brackground-color") !default;
+$select-border-color: h.useVar("control-border-color") !default;
 $select-border-style: solid !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-line-height: var(--#{$prefix}base-line-height) !default;
-$select-margin: 0 !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;
+$select-border-width: h.useVar("control-border-width") !default;
+$select-border-radius: h.useVar("border-radius") !default;
+$select-border-radius-rounded: h.useVar("border-radius-rounded") !default;
+
+$select-multiple-padding: h.useVar("control-spacer") !default;
+$select-arrow-color: vars.$font-color !default;
+$select-arrow-size: 1em !default;
 /* @docs */
 
 @function svg_arrow($color) {
-    $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
+    $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color}"/></g>';
     $end: "</svg>";
 
-    @return svg-encode("#{$start}#{$content}#{$end}");
+    @return h.svg-encode("#{$start}#{$content}#{$end}");
 }
 
 .o-select {
-    display: inline-flex;
+    @include h.defineVar("select-height", $select-height);
+    @include h.defineVar("select-padding", $select-padding);
+    @include h.defineVar("select-disabled-opacity", $select-disabled-opacity);
+
+    @include h.defineVar("select-color", $select-color);
+    @include h.defineVar("select-font-size", $select-font-size);
+    @include h.defineVar("select-font-weight", $select-font-weight);
+    @include h.defineVar("select-line-height", $select-line-height);
+
+    @include h.defineVar("select-box-shadow", $select-box-shadow);
+    @include h.defineVar("select-background-color", $select-background-color);
+    @include h.defineVar("select-border-color", $select-border-color);
+    @include h.defineVar("select-border-style", $select-border-style);
+    @include h.defineVar("select-border-width", $select-border-width);
+    @include h.defineVar("select-border-radius", $select-border-radius);
+    @include h.defineVar(
+        "select-border-radius-rounded",
+        $select-border-radius-rounded
+    );
+    @include h.defineVar("select-arrow-size", $select-arrow-size);
+    @include h.defineVar(
+        "select-arrow-background-image",
+        url(svg_arrow($select-arrow-color))
+    );
+    @include h.defineVar("select-multiple-padding", $select-multiple-padding);
+
+    // define focus shadow effect
+    @include h.focusable(".o-select__input");
+
+    display: inline-block;
     position: relative;
 
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("select-font-size", h.useVar("size-#{$name}"));
+        }
+    }
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        $color: list.nth($pair, 1);
+        &--#{$name} {
+            @include h.defineVar("select-border-color", h.useVar($name));
+            @include h.defineVar(
+                "select-arrow-background-image",
+                url(svg_arrow($color))
+            );
+        }
+    }
+
     &__input {
-        -moz-appearance: none;
-        -webkit-appearance: none;
+        // remove default appearance
+        @include h.removeAppearance;
+
         display: inline-block;
         position: relative;
-        vertical-align: top;
-        cursor: pointer;
-        justify-content: flex-start;
-        align-items: center;
-
-        box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
-        background-color: var(
-            --#{$prefix}select-background-color,
-            $select-background-color
-        );
-        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);
+
+        height: h.useVar("select-height");
+        padding: h.useVar("select-padding");
+
+        color: h.useVar("select-color");
+        font-size: h.useVar("select-font-size");
+        font-weight: h.useVar("select-font-weight");
+        line-height: h.useVar("select-line-height");
+
+        box-shadow: h.useVar("select-box-shadow");
+        background-color: h.useVar("select-background-color");
+        border-color: h.useVar("select-border-color");
+        border-style: h.useVar("select-border-style");
+        border-width: h.useVar("select-border-width");
+        border-radius: h.useVar("select-border-radius");
 
         &--arrowed {
-            background-image: url(svg_arrow($select-arrow-color));
+            background-image: h.useVar("select-arrow-background-image");
             background-repeat: no-repeat;
-            background-size: var(
-                --#{$prefix}select-arrow-size,
-                $select-arrow-size
-            );
+            background-size: h.useVar("select-arrow-size");
             background-position: calc(
-                    100% - var(
-                            --#{$prefix}select-arrow-size,
-                            $select-arrow-size
-                        ) *
-                        0.5
+                    100% - h.useVar("select-arrow-size") * 0.5
                 )
                 center;
-            padding-right: calc(
-                var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
-            );
-        }
-
-        &--placeholder {
-            opacity: var(
-                --#{$prefix}select-placeholder-opacity,
-                $select-placeholder-opacity
-            );
+            padding-right: calc(h.useVar("select-arrow-size") * 2);
         }
 
         &--iconspace-left {
-            padding-left: var(--#{$prefix}select-height, $select-height);
+            padding-left: h.useVar("select-height");
         }
 
         &--iconspace-right {
-            padding-right: var(--#{$prefix}select-height, $select-height);
-        }
-
-        &[disabled] {
-            cursor: inherit;
+            padding-right: h.useVar("select-height");
         }
     }
 
-    // size sizes
-    @each $name, $value in $sizes {
-        &--#{$name} .o-select__input {
-            font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
-        }
-    }
-
-    // color variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
-        &--#{$name} .o-select__input {
-            --#{$prefix}focus: #{createFocus($color)};
-
-            border-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
+    &--rounded {
+        @include h.defineVar(
+            "select-border-radius",
+            h.useVar("select-border-radius-rounded")
+        );
     }
 
-    &--rounded .o-select__input {
-        border-radius: var(
-            --#{$prefix}select-rounded-border-radius,
-            $select-rounded-border-radius
-        );
+    &--disabled {
+        @include h.disabled(h.useVar("select-disabled-opacity"));
     }
 
     &--expanded {
         width: 100%;
         flex-grow: 1;
+        flex-shrink: 1;
 
         .o-select__input {
             width: 100%;
@@ -147,7 +151,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 
     &--multiple .o-select__input {
         height: auto;
-        padding: 0;
+        padding: h.useVar("select-multiple-padding");
     }
 
     &__icon-left,
@@ -155,8 +159,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
         position: absolute;
         top: 0;
         height: 100%;
-        width: var(--#{$prefix}select-height, $select-height);
-        z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
+        width: h.useVar("select-height");
     }
 
     &__icon-right {
@@ -166,14 +169,4 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
     &__icon-left {
         left: 0;
     }
-
-    // focus effect
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        .o-select__input {
-            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-            outline: none;
-        }
-    }
 }