@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/src/assets/scss/components/_tabs.scss

@@ -1,18 +1,18 @@
 /* @docs */
-$tabs-disabled-opacity: $base-disabled-opacity !default;
-$tabs-font-size: $base-font-size !default;
+$tabs-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$tabs-font-size: var(--#{$prefix}base-font-size) !default;
 $tabs-icon-margin: 0.5em !default;
 $tabs-content-padding: 1rem !default;
 $tabs-margin-bottom: 1.5rem !default;
-$tabs-border-bottom-color: $grey-lighter !default;
+$tabs-border-bottom-color: var(--#{$prefix}grey-lighter) !default;
 $tabs-border-bottom-style: solid !default;
 $tabs-border-bottom-width: 1px !default;
 $tabs-link-color: hsl(0, 0%, 29%) !default;
-$tabs-link-active-border-bottom-color: $primary !default;
-$tabs-link-active-color: $primary !default;
-$tabs-link-line-height: $base-line-height !default;
+$tabs-link-active-border-bottom-color: var(--#{$prefix}primary) !default;
+$tabs-link-active-color: var(--#{$prefix}primary) !default;
+$tabs-link-line-height: var(--#{$prefix}base-line-height) !default;
 $tabs-link-padding: 0.5em 1em !default;
-$tabs-boxed-link-radius: $base-border-radius !default;
+$tabs-boxed-link-radius: var(--#{$prefix}base-border-radius) !default;
 $tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
 $tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
 $tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
@@ -23,10 +23,9 @@ $tabs-toggle-link-border-style: solid !default;
 $tabs-toggle-link-border-width: 1px !default;
 $tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
 $tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
-$tabs-toggle-link-radius: $base-border-radius !default;
-$tabs-toggle-link-active-background-color: $primary !default;
-$tabs-toggle-link-active-border-color: $primary !default;
-$tabs-toggle-link-active-color: $primary-invert !default;
+$tabs-toggle-link-active-background-color: var(--#{$prefix}primary) !default;
+$tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
+$tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
 /* @docs */
 
 @mixin item {
@@ -34,37 +33,31 @@ $tabs-toggle-link-active-color: $primary-invert !default;
   -webkit-appearance: none;
   width: 100%;
   margin: 0;
-  padding: 0;
   border: 1px solid transparent;
   background-color: transparent;
   align-items: center;
   line-height: $tabs-link-line-height;
-
-  @include avariable("font-size", "tabs-font-size", $tabs-font-size);
-  @include avariable(
-    "border-bottom-color",
-    "tabs-border-bottom-color",
-    $tabs-border-bottom-color
-  );
-  @include avariable(
-    "border-bottom-style",
-    "tabs-border-bottom-style",
-    $tabs-border-bottom-style
-  );
-  @include avariable(
-    "border-bottom-width",
-    "tabs-border-bottom-width",
-    $tabs-border-bottom-width
-  );
-  @include avariable("color", "tabs-link-color", $tabs-link-color);
   display: flex;
   justify-content: center;
   margin-bottom: -1px;
-
-  @include avariable("padding", "tabs-link-padding", $tabs-link-padding);
   vertical-align: top;
   cursor: pointer;
   text-decoration: none;
+  font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+  border-bottom-color: var(
+    --#{$prefix}tabs-border-bottom-color,
+    $tabs-border-bottom-color
+  );
+  border-bottom-style: var(
+    --#{$prefix}tabs-border-bottom-style,
+    $tabs-border-bottom-style
+  );
+  border-bottom-width: var(
+    --#{$prefix}tabs-border-bottom-width,
+    $tabs-border-bottom-width
+  );
+  color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
+  padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
 }
 
 .o-tabs {
@@ -96,25 +89,21 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
     .o-tabs__nav-item-boxed {
       border-bottom-color: transparent;
-
-      @include avariable(
-        "border-right-color",
-        "tabs-border-bottom-color",
+      border-right-color: var(
+        --#{$prefix}tabs-border-bottom-color,
         $tabs-border-bottom-color
       );
-      @include avariable(
-        "border-radius",
-        "tabs-border-bottom-color",
-        #{$tabs-toggle-link-radius} 0 0 #{$tabs-toggle-link-radius}
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
+        #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
       );
 
       &--active {
-        @include avariable(
-          "border-bottom-color",
-          "tabs-border-bottom-color",
+        border-right-color: transparent;
+        border-bottom-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        border-right-color: transparent;
       }
     }
   }
@@ -125,30 +114,25 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     .o-tabs__nav-item-boxed {
       border-bottom-color: transparent;
       border-right-color: transparent;
-
-      @include avariable(
-        "border-left-color",
-        "tabs-border-bottom-color",
+      border-left-color: var(
+        --#{$prefix}tabs-border-bottom-color,
         $tabs-border-bottom-color
       );
-      @include avariable(
-        "border-radius",
-        "tabs-border-bottom-color",
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
         0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
       );
 
       &--active {
-        @include avariable(
-          "border-bottom-color",
-          "tabs-border-bottom-color",
+        border-left-color: transparent;
+        border-right-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        @include avariable(
-          "border-right-color",
-          "tabs-border-bottom-color",
+        border-bottom-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        border-left-color: transparent;
       }
     }
   }
@@ -162,18 +146,16 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     flex-grow: 1;
     flex-shrink: 0;
     justify-content: flex-start;
-    overflow-x: auto;
     // padding bottom to keep showing the border-bottom
-    @include avariable(
-      "padding-bottom",
-      "tabs-border-bottom-width",
+    padding-bottom: var(
+      --#{$prefix}tabs-border-bottom-width,
       $tabs-border-bottom-width
     );
-    @include avariable("font-size", "tabs-font-size", $tabs-font-size);
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
 
     @each $name, $value in $sizes {
       &--#{$name} {
-        @include avariable("font-size", ("tabs-font-size-" + #{$name}), $value);
+        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
       }
     }
 
@@ -187,25 +169,27 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
     &-item {
       &-icon {
-        @include avariable(
-          "margin-right",
-          "tabs-icon-margin",
-          $tabs-icon-margin
-        );
+        margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
+      }
+
+      // focus effect
+      &:focus,
+      &:focus-within {
+        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+        outline: 0;
+        border-radius: #{$tabs-boxed-link-radius};
       }
 
       &-default {
         @include item;
 
         &--active {
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-active-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-link-active-border-bottom-color,
             $tabs-link-active-border-bottom-color
           );
-          @include avariable(
-            "color",
-            "tabs-link-active-color",
+          color: var(
+            --#{$prefix}tabs-link-active-color,
             $tabs-link-active-color
           );
         }
@@ -213,23 +197,19 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-default--active) {
-          @include avariable(
-            "background-color",
-            "tabs-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-link-hover-background-color,
             $tabs-boxed-link-hover-background-color
           );
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-hover-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-link-hover-border-bottom-color,
             $tabs-boxed-link-hover-border-bottom-color
           );
         }
@@ -237,37 +217,27 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
       &-boxed {
         @include item;
-        @include avariable(
-          "border-radius",
-          "tabs-border-bottom-color",
+        border-bottom-color: transparent;
+        border-radius: var(
+          --#{$prefix}tabs-border-bottom-color,
           #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
         );
-        border-bottom-color: transparent;
 
         &--active {
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-active-border-bottom-color",
-            $tabs-link-active-border-bottom-color
-          );
-          @include avariable(
-            "color",
-            "tabs-link-active-color",
+          color: var(
+            --#{$prefix}tabs-link-active-color,
             $tabs-link-active-color
           );
-          @include avariable(
-            "background-color",
-            "tabs-boxed-link-active-background-color",
+          background-color: var(
+            --#{$prefix}tabs-boxed-link-active-background-color,
             $tabs-boxed-link-active-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-boxed-link-active-border-color",
+          border-color: var(
+            --#{$prefix}tabs-boxed-link-active-border-color,
             $tabs-boxed-link-active-border-color
           );
-          @include avariable(
-            "border-bottom-color",
-            "tabs-boxed-link-active-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-boxed-link-active-border-bottom-color,
             $tabs-boxed-link-active-border-bottom-color
           );
         }
@@ -275,18 +245,15 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-boxed--active) {
-          @include avariable(
-            "background-color",
-            "tabs-boxed-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-boxed-link-hover-background-color,
             $tabs-boxed-link-hover-background-color
           );
         }
@@ -294,38 +261,32 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
       &-toggle {
         @include item;
-        @include avariable(
-          "border-color",
-          "tabs-toggle-link-border-color",
+        position: relative;
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-border-color,
           $tabs-toggle-link-border-color
         );
-        @include avariable(
-          "border-style",
-          "tabs-toggle-link-border-style",
+        border-style: var(
+          --#{$prefix}tabs-toggle-link-border-style,
           $tabs-toggle-link-border-style
         );
-        @include avariable(
-          "border-width",
-          "tabs-toggle-link-border-width",
+        border-width: var(
+          --#{$prefix}tabs-toggle-link-border-width,
           $tabs-toggle-link-border-width
         );
         margin-bottom: 0;
-        position: relative;
 
         &--active {
-          @include avariable(
-            "background-color",
-            "tabs-toggle-link-active-background-color",
+          background-color: var(
+            --#{$prefix}tabs-toggle-link-active-background-color,
             $tabs-toggle-link-active-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-toggle-link-active-border-color",
+          border-color: var(
+            --#{$prefix}tabs-toggle-link-active-border-color,
             $tabs-toggle-link-active-border-color
           );
-          @include avariable(
-            "color",
-            "tabs-toggle-link-active-color",
+          color: var(
+            --#{$prefix}tabs-toggle-link-active-color,
             $tabs-toggle-link-active-color
           );
         }
@@ -333,23 +294,19 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-toggle--active) {
-          @include avariable(
-            "background-color",
-            "tabs-toggle-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-toggle-link-hover-background-color,
             $tabs-toggle-link-hover-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-toggle-link-hover-border-color",
+          border-color: var(
+            --#{$prefix}tabs-toggle-link-hover-border-color,
             $tabs-toggle-link-hover-border-color
           );
         }
@@ -363,12 +320,7 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-
-    @include avariable(
-      "padding",
-      "tabs-content-padding",
-      $tabs-content-padding
-    );
+    padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
 
     &--transitioning {
       overflow: hidden;
@@ -376,10 +328,6 @@ $tabs-toggle-link-active-color: $primary-invert !default;
   }
 
   &:not(:last-child) {
-    @include avariable(
-      "margin-bottom",
-      "tabs-margin-bottom",
-      $tabs-margin-bottom
-    );
+    margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
   }
 }

package/src/assets/scss/components/_taginput.scss

@@ -1,153 +1,101 @@
 @use "sass:list";
 
 /* @docs */
-$taginput-background-color: $input-background-color !default;
-$taginput-height: calc(2em - 1px) !default;
-$taginput-padding: calc(0.275em - 1px) 0 0 !default;
-$taginput-border-color: $grey-lighter !default;
-$taginput-border-style: solid !default;
-$taginput-border-width: 1px !default;
-$taginput-border-radius: $base-border-radius !default;
-$taginput-color: #363636 !default;
-$taginput-line-height: $base-line-height !default;
-$taginput-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
-$taginput-max-width: 100% !default;
-$taginput-width: 100% !default;
 $taginput-counter-font-size: 0.75rem !default;
 $taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
-$taginput-item-background-color: $primary !default;
-$taginput-item-color: $primary-invert !default;
-$taginput-item-border-radius: $base-border-radius !default;
-$taginput-item-margin: 0 0 0 0.275em !default;
+$taginput-item-background-color: var(--#{$prefix}primary) !default;
+$taginput-item-color: var(--#{$prefix}primary-invert) !default;
+$taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
+$taginput-item-margin: 0.275em !default;
 $taginput-item-padding: 0 0.75em 0 0.75em !default;
 $taginput-margin-icon-to-text: 0.1875em !default;
 /* @docs */
 
 .o-taginput {
-  display: block;
+  display: flex;
 
   &__container {
     display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    position: relative;
-    vertical-align: top;
     flex-wrap: wrap;
 
-    @include avariable("max-width", "taginput-max-width", $taginput-max-width);
-    @include avariable("width", "taginput-width", $taginput-width);
-    @include avariable("padding", "taginput-padding", $taginput-padding);
-    @include avariable(
-      "background-color",
-      "taginput-background-color",
-      $taginput-background-color
-    );
-    @include avariable(
-      "border-color",
-      "taginput-border-color",
-      $taginput-border-color
-    );
-    @include avariable(
-      "border-style",
-      "taginput-border-style",
-      $taginput-border-style
-    );
-    @include avariable(
-      "border-width",
-      "taginput-border-width",
-      $taginput-border-width
-    );
-    @include avariable(
-      "border-radius",
-      "taginput-border-radius",
-      $taginput-border-radius
-    );
-    @include avariable("color", "taginput-color", $taginput-color);
-    @include avariable("font-size", "base-font-size", $base-font-size);
-    @include avariable(
-      "line-height",
-      "taginput-line-height",
-      $taginput-line-height
-    );
-    @include avariable(
-      "box-shadow",
-      "taginput-box-shadow",
-      $taginput-box-shadow
+    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);
+    font-size: var(--#{$prefix}base-font-size, $base-font-size);
+    line-height: var(--#{$prefix}input-line-height, $input-line-height);
+    margin: var(--#{$prefix}input-margin, $input-margin);
+    width: var(--#{$prefix}taginput-width, inherit);
 
+    // size variants
     @each $name, $value in $sizes {
       &--#{$name} {
-        @include avariable(
-          "font-size",
-          ("taginput-font-size-" + #{$name}),
-          $value
-        );
+        font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
       }
     }
   }
 
+  &__autocomplete {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: auto;
+  }
+
   &__input {
     border: none;
     box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
+    width: 100%;
   }
 
   &__item {
     display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    @include side-flex-gap($taginput-margin-icon-to-text);
-    @include avariable(
-      "background-color",
-      "taginput-item-background-color",
+    margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
+    padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
+    color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
+    background-color: var(
+      --#{$prefix}taginput-item-background-color,
       $taginput-item-background-color
     );
-    @include avariable("color", "taginput-item-color", $taginput-item-color);
-    @include avariable(
-      "border-radius",
-      "taginput-item-border-radius",
+    border-radius: var(
+      --#{$prefix}taginput-item-border-radius,
       $taginput-item-border-radius
     );
-    @include avariable("margin", "taginput-item-margin", $taginput-item-margin);
-    @include avariable(
-      "padding",
-      "taginput-item-padding",
-      $taginput-item-padding
-    );
 
+    // color variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
-        @include avariable(
-          "color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
+        --#{$prefix}focus: #{createFocus($color)};
+
+        background-color: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
       }
     }
+
+    // focus effect
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+      outline: 0;
+    }
   }
 
   &__counter {
     display: block;
     float: right;
-
-    @include avariable(
-      "font-size",
-      "taginput-counter-font-size",
+    font-size: var(
+      --#{$prefix}taginput-counter-font-size,
       $taginput-counter-font-size
     );
-    @include avariable(
-      "margin",
-      "taginput-counter-margin",
-      $taginput-counter-margin
-    );
+    margin: var(--#{$prefix}taginput-counter-margin, $taginput-counter-margin);
   }
 
   &--expanded {
@@ -155,4 +103,15 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     flex-grow: 1;
     flex-shrink: 1;
   }
+
+  // // focus effect
+  // &:focus &__container,
+  // &:focus-within &__container {
+  //   box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+
+  //   // disable focus effect for inner input
+  //   .o-input {
+  //     --#{$prefix}focus: transparent;
+  //   }
+  // }
 }