@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_tag.scss

@@ -1,29 +1,67 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$tag-color: var(--#{$prefix}grey-dark) !default;
-$tag-background-color: $control-brackground-color !default;
-$tag-border-radius: var(--#{$prefix}base-border-radius) !default;
-$tag-rounded-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
 $tag-padding: 0 0.75em !default;
-$tag-icon-margin: 0.5em !default;
+$tag-color: h.useVar("font-color") !default;
+$tag-font-size: h.useVar("font-size") !default;
+$tag-font-weight: h.useVar("font-weight") !default;
+$tag-line-height: h.useVar("line-height") !default;
+$tag-height: h.useVar("control-height") !default;
+$tag-icon-spacer: h.useVar("control-spacer") !default;
+
+$tag-close-color: h.useVar("font-color") !default;
+
+$tag-box-shadow: unset !default;
+$tag-background-color: h.useVar("grey-lightest") !default;
+$tag-border-color: transparent !default;
+$tag-border-style: solid !default;
+$tag-border-width: h.useVar("control-border-width") !default;
+$tag-border-radius: h.useVar("border-radius") !default;
+$tag-border-radius-rounded: h.useVar("border-radius-rounded") !default;
 /* @docs */
 
 .o-tag {
+    @include h.defineVar("tag-padding", $tag-padding);
+    @include h.defineVar("tag-color", $tag-color);
+    @include h.defineVar("tag-font-size", $tag-font-size);
+    @include h.defineVar("tag-font-weight", $tag-font-weight);
+    @include h.defineVar("tag-line-height", $tag-line-height);
+    @include h.defineVar("tag-height", $tag-height);
+    @include h.defineVar("tag-icon-spacer", $tag-icon-spacer);
+
+    @include h.defineVar("tag-close-color", $tag-close-color);
+
+    @include h.defineVar("tag-box-shadow", $tag-box-shadow);
+    @include h.defineVar("tag-background-color", $tag-background-color);
+    @include h.defineVar("tag-border-color", $tag-border-color);
+    @include h.defineVar("tag-border-style", $tag-border-style);
+    @include h.defineVar("tag-border-width", $tag-border-width);
+    @include h.defineVar("tag-border-radius", $tag-border-radius);
+    @include h.defineVar(
+        "tag-border-radius-rounded",
+        $tag-border-radius-rounded
+    );
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    line-height: 1.5;
     white-space: nowrap;
-    color: var(--#{$prefix}tag-color, $tag-color);
-    background-color: var(
-        --#{$prefix}tag-background-color,
-        $tag-background-color
-    );
-    border-radius: var(--#{$prefix}tag-border-radius, $tag-border-radius);
-    padding: var(--#{$prefix}tag-padding, $tag-padding);
+
+    padding: h.useVar("tag-padding");
+
+    color: h.useVar("tag-color");
+    font-size: calc(0.75 * h.useVar("tag-font-size"));
+    font-weight: h.useVar("tag-font-weight");
+    line-height: h.useVar("tag-line-height");
+
+    box-shadow: h.useVar("tag-box-shadow");
+    background-color: h.useVar("tag-background-color");
+    border-color: h.useVar("tag-border-color");
+    border-style: h.useVar("tag-border-style");
+    border-width: h.useVar("tag-border-width");
+    border-radius: h.useVar("tag-border-radius");
 
     &:empty {
         width: 1em;
@@ -31,10 +69,17 @@ $tag-icon-margin: 0.5em !default;
         padding-right: 0;
     }
 
+    &:focus,
+    &:hover {
+        /* background-color: darken($color-invert, 5%)*/
+        /* IE 11 needs polyfill*/
+        filter: brightness(98%);
+    }
+
     &--rounded {
-        border-radius: var(
-            --#{$prefix}tag-rounded-border-radius,
-            $tag-rounded-border-radius
+        @include h.defineVar(
+            "tag-border-radius",
+            h.useVar("tag-border-radius-rounded")
         );
     }
 
@@ -42,43 +87,54 @@ $tag-icon-margin: 0.5em !default;
         position: absolute;
         top: 0;
         left: 100%;
-        transform: translate(-50%, -50%);
+        transform: translateX(-50%);
     }
 
     &__icon {
-        margin-right: var(--#{$prefix}tag-icon-margin, $tag-icon-margin);
+        margin-right: h.useVar("tag-icon-spacer");
     }
 
     &__close {
-        margin-left: var(--#{$prefix}tag-icon-margin, $tag-icon-margin);
+        margin-left: h.useVar("tag-icon-spacer");
+
+        // add clickable cursor
+        @include h.clickable;
+
+        padding: 0;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        color: h.useVar("tag-close-color");
+
+        border: none;
+        background-color: transparent;
+
+        &:focus,
+        &:hover {
+            // darken color on hover
+            filter: brightness(90%);
+        }
     }
 
     // size variants
-    @each $name, $value in $sizes {
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}tag-font-size-#{$name}, $value);
+            @include h.defineVar("tag-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} {
-            background-color: var(--#{$prefix}variant-#{$name}, $color);
-            border-color: var(
-                --#{$prefix}variant-invert-#{$name},
-                $color-invert
+            @include h.defineVar("tag-background-color", h.useVar($name));
+            @include h.defineVar("tag-border-color", h.useVar($name));
+            @include h.defineVar("tag-color", h.useVar("#{$name}-invert"));
+            @include h.defineVar(
+                "tag-close-color",
+                h.useVar("#{$name}-invert")
             );
-            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-
-            &:focus,
-            &:hover {
-                /* background-color: darken($color-invert, 5%)*/
-                /* IE 11 needs polyfill*/
-                filter: brightness(95%);
-            }
         }
     }
 }

package/dist/scss/components/_taginput.scss

@@ -1,35 +1,50 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+@use "./input";
 
 /* @docs */
-$taginput-counter-font-size: 0.75em !default;
-$taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
-$taginput-item-margin: 0.275em !default;
+$taginput-counter-font-size: 0.85rem !default;
+$taginput-counter-spacer: h.useVar("control-spacer") !default;
+$taginput-item-spacer: h.useVar("control-spacer") !default;
 /* @docs */
 
 .o-taginput {
+    @include h.defineVar(
+        "taginput-counter-font-size",
+        $taginput-counter-font-size
+    );
+    @include h.defineVar("taginput-counter-spacer", $taginput-counter-spacer);
+    @include h.defineVar("taginput-item-spacer", $taginput-item-spacer);
+
     display: flex;
 
+    // extend o-input design
+    @extend .o-input;
+
+    // define focus shadow effect
+    @include h.focusable(".o-taginput__container");
+
+    // disable input focus
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        .o-input__input:not(.o-taginput__container) {
+            box-shadow: unset !important;
+        }
+    }
+
     &__container {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
 
-        box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
-        background-color: var(
-            --#{$prefix}input-background-color,
-            $input-background-color
-        );
-        border-color: var(--#{$prefix}input-border-color, $input-border-color);
-        border-style: var(--#{$prefix}input-border-style, $input-border-style);
-        border-width: var(--#{$prefix}input-border-width, $input-border-width);
-        border-radius: var(
-            --#{$prefix}input-border-radius,
-            $input-border-radius
-        );
-        color: var(--#{$prefix}input-color, $input-color);
-        line-height: var(--#{$prefix}input-line-height, $input-line-height);
-        margin: var(--#{$prefix}input-margin, $input-margin);
-        width: var(--#{$prefix}taginput-width, inherit);
+        padding: 0;
+        height: fit-content;
+
+        // pretend container is input element
+        @extend .o-input__input;
     }
 
     &__autocomplete {
@@ -43,28 +58,25 @@ $taginput-item-margin: 0.275em !default;
         box-shadow: none;
     }
 
-    // size variants
-    @each $name, $value in $sizes {
-        &--#{$name} {
-            font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
-        }
-    }
-
     &__item {
-        margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
+        margin: calc(0.5 * h.useVar("taginput-item-spacer"));
+        font-size: h.useVar("tag-font-size");
+
+        &:first-child {
+            margin-left: h.useVar("taginput-item-spacer");
+        }
     }
 
     &__counter {
-        display: block;
+        display: inline-flex;
         float: right;
-        font-size: var(
-            --#{$prefix}taginput-counter-font-size,
-            $taginput-counter-font-size
-        );
-        margin: var(
-            --#{$prefix}taginput-counter-margin,
-            $taginput-counter-margin
-        );
+        align-items: center;
+        font-size: h.useVar("taginput-counter-font-size");
+        margin: h.useVar("taginput-counter-spacer");
+    }
+
+    &--disabled {
+        @include h.disabled(h.useVar("input-disabled-opacity"));
     }
 
     &--expanded {

package/dist/scss/components/_timepicker.scss

@@ -1,98 +1,97 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$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-font-size: h.useVar("font-size") !default;
+$timepicker-color: h.useVar("font-color") !default;
+$timepicker-line-height: h.useVar("line-height") !default;
+$timepicker-font-weight: 600 !default;
+$timepicker-box-padding: 0 calc(2 * h.useVar("control-spacer")) !default;
+
 $timepicker-footer-padding: 0 0.5rem !default;
-$timepicker-footer-margin: 0.875rem 0 0 0 !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: var(
-    --#{$prefix}base-disabled-opacity
-) !default;
-$timepicker-separator-font-weight: 600 !default;
+
+$timepicker-select-padding: h.useVar("control-padding-vertical")
+    h.useVar("control-padding-horizontal") !default;
+$timepicker-select-placeholder-opacity: h.useVar("disabled-opacity") !default;
 /* @docs */
 
 .o-timepicker {
-    font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
+    @include h.defineVar("timepicker-color", $timepicker-color);
+    @include h.defineVar("timepicker-font-size", $timepicker-font-size);
+    @include h.defineVar("timepicker-font-weight", $timepicker-font-weight);
+    @include h.defineVar("timepicker-line-height", $timepicker-line-height);
+    @include h.defineVar("timepicker-box-padding", $timepicker-box-padding);
+
+    @include h.defineVar(
+        "timepicker-footer-padding",
+        $timepicker-footer-padding
+    );
 
-    @each $name, $value in $sizes {
+    @include h.defineVar(
+        "timepicker-select-padding",
+        $timepicker-select-padding
+    );
+    @include h.defineVar(
+        "timepicker-select-placeholder-opacity",
+        $timepicker-select-placeholder-opacity
+    );
+
+    font-size: h.useVar("timepicker-font-size");
+    font-weight: h.useVar("timepicker-font-weight");
+    line-height: h.useVar("timepicker-line-height");
+    color: h.useVar("timepicker-color");
+
+    // size variants
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
+            @include h.defineVar(
+                "timepicker-font-size",
+                h.useVar("size-#{$name}")
+            );
         }
     }
 
     &__dropdown {
         width: 100%;
+
+        .o-dropdown__menu {
+            min-width: 12rem;
+        }
     }
 
     &__box {
         display: flex;
         justify-content: center;
         align-items: center;
-        line-height: var(
-            --#{$prefix}timepicker-box-line-height,
-            $timepicker-box-line-height
-        );
-        padding: var(
-            --#{$prefix}timepicker-box-padding,
-            $timepicker-box-padding
-        );
+        padding: h.useVar("timepicker-box-padding");
     }
 
     &__select {
-        -moz-appearance: none;
-        -webkit-appearance: none;
+        // remove default appearance
+        @include h.removeAppearance;
+        // add clickable cursor
+        @include h.clickable;
+
         display: inline-block;
         position: relative;
         vertical-align: top;
-        cursor: pointer;
         justify-content: flex-start;
         align-items: center;
         border: 0;
+
         font-size: inherit;
-        font-weight: var(
-            --#{$prefix}timepicker-select-font-weight,
-            $timepicker-select-font-weight
-        );
-        line-height: var(
-            --#{$prefix}timepicker-select-line-height,
-            $timepicker-select-line-height
-        );
-        color: var(
-            --#{$prefix}timepicker-select-color,
-            $timepicker-select-color
-        );
-        padding: var(
-            --#{$prefix}timepicker-select-padding,
-            $timepicker-select-padding
-        );
-    }
+        font-weight: inherit;
+        line-height: inherit;
+        color: inherit;
 
-    &__select-placeholder {
-        opacity: var(
-            --#{$prefix}timepicker-select-placeholder-opacity,
-            $timepicker-select-placeholder-opacity
-        );
+        padding: h.useVar("timepicker-select-padding");
     }
 
-    &__separator {
-        font-weight: var(
-            --#{$prefix}timepicker-separator-font-weight,
-            $timepicker-separator-font-weight
-        );
+    &__select-placeholder {
+        opacity: h.useVar("timepicker-select-placeholder-opacity");
     }
 
     &__footer {
-        padding: var(
-            --#{$prefix}timepicker-header-padding,
-            $timepicker-footer-padding
-        );
-        margin: var(
-            --#{$prefix}timepicker-header-margin,
-            $timepicker-footer-margin
-        );
+        padding: h.useVar("timepicker-header-padding");
     }
 }