@oruga-ui/theme-oruga 0.2.2 → 0.3.0

package/dist/scss/components/_dropdown.scss

@@ -1,17 +1,19 @@
 /* @docs */
-$dropdown-disabled-opacity: $base-disabled-opacity !default;
-$dropdown-item-active-background-color: $primary !default;
-$dropdown-item-active-color: $primary-invert !default;
+$dropdown-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$dropdown-item-active-background-color: var(--#{$prefix}primary) !default;
+$dropdown-item-active-color: var(--#{$prefix}primary-invert) !default;
 $dropdown-item-color: #000000 !default;
-$dropdown-item-disabled-opacity: $base-disabled-opacity !default;
-$dropdown-item-font-size: $base-font-size !default;
+$dropdown-item-disabled-opacity: var(
+  --#{$prefix}base-disabled-opacity
+) !default;
+$dropdown-item-font-size: var(--#{$prefix}base-font-size) !default;
 $dropdown-item-hover-background-color: #f5f5f5 !default;
 $dropdown-item-hover-color: #000000 !default;
-$dropdown-item-line-height: $base-line-height !default;
+$dropdown-item-line-height: var(--#{$prefix}base-line-height) !default;
 $dropdown-item-padding: 0.375rem 1rem !default;
 $dropdown-item-font-weight: 400 !default;
 $dropdown-menu-background: #ffffff !default;
-$dropdown-menu-border-radius: $base-border-radius !default;
+$dropdown-menu-border-radius: var(--#{$prefix}base-border-radius) !default;
 $dropdown-menu-box-shadow:
   0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
   0 0 0 1px rgba(10, 10, 10, 0.02) !default;
@@ -42,14 +44,12 @@ $dropdown-mobile-zindex: 50 !default;
     cursor: pointer;
     display: none;
 
-    @include avariable(
-      "background-color",
-      "dropdown-mobile-overlay-color",
+    background-color: var(
+      --#{$prefix}dropdown-mobile-overlay-color,
       $dropdown-mobile-overlay-color
     );
-    @include avariable(
-      "z-index",
-      "dropdown-mobile-overlay-zindex",
+    z-index: var(
+      --#{$prefix}dropdown-mobile-overlay-zindex,
       $dropdown-mobile-overlay-zindex
     );
   }
@@ -62,49 +62,28 @@ $dropdown-mobile-zindex: 50 !default;
     position: absolute;
     display: block;
 
-    @include avariable(
-      "min-width",
-      "dropdown-menu-width",
-      $dropdown-menu-width
-    );
-    @include avariable(
-      "z-index",
-      "dropdown-menu-zindex",
-      $dropdown-menu-zindex
-    );
-    @include avariable(
-      "background-color",
-      "dropdown-menu-background",
+    min-width: var(--#{$prefix}dropdown-menu-width, $dropdown-menu-width);
+    z-index: var(--#{$prefix}dropdown-menu-zindex, $dropdown-menu-zindex);
+    background-color: var(
+      --#{$prefix}dropdown-menu-background,
       $dropdown-menu-background
     );
-    @include avariable(
-      "border-radius",
-      "dropdown-menu-border-radius",
+    border-radius: var(
+      --#{$prefix}dropdown-menu-border-radius,
       $dropdown-menu-border-radius
     );
-    @include avariable(
-      "box-shadow",
-      "dropdown-menu-box-shadow",
+    box-shadow: var(
+      --#{$prefix}dropdown-menu-box-shadow,
       $dropdown-menu-box-shadow
     );
-    @include avariable(
-      "padding",
-      "dropdown-menu-padding",
-      $dropdown-menu-padding
-    );
-    @include avariable("margin", "dropdown-menu-margin", $dropdown-menu-margin);
+    padding: var(--#{$prefix}dropdown-menu-padding, $dropdown-menu-padding);
+    margin: var(--#{$prefix}dropdown-menu-margin, $dropdown-menu-margin);
 
     &--bottom {
       left: 50%;
       right: auto;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       bottom: auto;
       transform: translateX(-50%);
@@ -114,26 +93,15 @@ $dropdown-mobile-zindex: 50 !default;
       left: 50%;
       right: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       transform: translateX(-50%);
     }
 
     &--left {
-      @include evariable(
-        "right",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      right: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       left: auto;
       top: 50%;
@@ -143,14 +111,8 @@ $dropdown-mobile-zindex: 50 !default;
 
     &--right {
       right: auto;
-
-      @include evariable(
-        "left",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      left: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       top: 50%;
       bottom: auto;
@@ -161,14 +123,8 @@ $dropdown-mobile-zindex: 50 !default;
       right: 0;
       left: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
     }
 
@@ -176,28 +132,16 @@ $dropdown-mobile-zindex: 50 !default;
       right: auto;
       left: 0;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
     }
 
     &--bottom-right {
       right: 0;
       left: auto;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}"dropdown-menu-spacer", $dropdown-menu-spacer)
       );
       bottom: auto;
     }
@@ -205,14 +149,8 @@ $dropdown-mobile-zindex: 50 !default;
     &--bottom-left {
       right: auto;
       left: 0;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       bottom: auto;
     }
@@ -222,65 +160,53 @@ $dropdown-mobile-zindex: 50 !default;
     display: block;
     position: relative;
 
-    @include avariable("color", "dropdown-item-color", $dropdown-item-color);
-    @include avariable(
-      "font-size",
-      "dropdown-item-font-size",
+    color: var(--#{$prefix}dropdown-item-color, $dropdown-item-color);
+    font-size: var(
+      --#{$prefix}dropdown-item-font-size,
       $dropdown-item-font-size
     );
-    @include avariable(
-      "font-weight",
-      "dropdown-item-font-weight",
+    font-weight: var(
+      --#{$prefix}dropdown-item-font-weight,
       $dropdown-item-font-weight
     );
-    @include avariable(
-      "line-height",
-      "dropdown-item-line-height",
+    line-height: var(
+      --#{$prefix}dropdown-item-line-height,
       $dropdown-item-line-height
     );
-    @include avariable(
-      "padding",
-      "dropdown-item-padding",
-      $dropdown-item-padding
-    );
+    padding: var(--#{$prefix}dropdown-item-padding, $dropdown-item-padding);
 
     &--disabled {
-      @include avariable(
-        "opacity",
-        "dropdown-item-disabled-opacity",
+      opacity: var(
+        --#{$prefix}dropdown-item-disabled-opacity,
         $dropdown-item-disabled-opacity
       );
       pointer-events: none;
     }
 
     &--active {
-      @include avariable(
-        "background-color",
-        "dropdown-item-active-background-color",
+      background-color: var(
+        --#{$prefix}dropdown-item-active-background-color,
         $dropdown-item-active-background-color
       );
-      @include avariable(
-        "color",
-        "dropdown-item-active-color",
+      color: var(
+        --#{$prefix}dropdown-item-active-color,
         $dropdown-item-active-color
       );
     }
 
     &--clickable {
       cursor: pointer;
+    }
 
-      &:hover:not(&--active) {
-        @include avariable(
-          "background-color",
-          "dropdown-item-hover-background-color",
-          $dropdown-item-hover-background-color
-        );
-        @include avariable(
-          "color",
-          "dropdown-item-hover-color",
-          $dropdown-item-hover-color
-        );
-      }
+    &--clickable:not(&--active):hover {
+      background-color: var(
+        --#{$prefix}dropdown-item-hover-background-color,
+        $dropdown-item-hover-background-color
+      );
+      color: var(
+        --#{$prefix}dropdown-item-hover-color,
+        $dropdown-item-hover-color
+      );
     }
   }
 
@@ -303,9 +229,8 @@ $dropdown-mobile-zindex: 50 !default;
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "dropdown-disabled-opacity",
+    opacity: var(
+      --#{$prefix}dropdown-disabled-opacity,
       $dropdown-disabled-opacity
     );
     pointer-events: none;
@@ -320,27 +245,16 @@ $dropdown-mobile-zindex: 50 !default;
       right: auto;
       transform: translate3d(-50%, -25%, 0);
       overflow-y: auto;
-
-      @include avariable(
-        "width",
-        "dropdown-mobile-width",
-        $dropdown-mobile-width
-      );
-      @include avariable(
-        "max-width",
-        "dropdown-mobile-max-width",
+      width: var(--#{$prefix}dropdown-mobile-width, $dropdown-mobile-width);
+      max-width: var(
+        --#{$prefix}dropdown-mobile-max-width,
         $dropdown-mobile-max-width
       );
-      @include avariable(
-        "max-height",
-        "dropdown-mobile-max-height",
+      max-height: var(
+        --#{$prefix}dropdown-mobile-max-height,
         $dropdown-mobile-max-height
       );
-      @include avariable(
-        "z-index",
-        "dropdown-mobile-zindex",
-        $dropdown-mobile-zindex
-      );
+      z-index: var(--#{$prefix}dropdown-mobile-zindex, $dropdown-mobile-zindex);
     }
 
     > .o-drop__overlay {

package/dist/scss/components/_field.scss

@@ -14,53 +14,40 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
   flex-grow: 1;
 
   &:not(:last-child) {
-    @include avariable(
-      "margin-bottom",
-      "field-margin-bottom",
-      $field-margin-bottom
-    );
+    margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
   }
 
   &__label {
     display: block;
-
-    @include avariable("color", "field-label-color", $field-label-color);
-    @include avariable("font-size", "base-font-size", $base-font-size);
-    @include avariable(
-      "font-weight",
-      "field-label-font-weight",
+    color: var(--#{$prefix}field-label-color, $field-label-color);
+    font-size: var(--#{$prefix}base-font-size, $base-font-size);
+    font-weight: var(
+      --#{$prefix}field-label-font-weight,
       $field-label-font-weight
     );
 
     @each $name, $value in $sizes {
       &-#{$name} {
-        @include avariable(
-          "font-size",
-          ("field-font-size-" + #{$name}),
-          $value
-        );
+        font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
       }
     }
   }
 
   &__message {
     display: block;
-
-    @include avariable(
-      "font-size",
-      "field-message-font-size",
+    font-size: var(
+      --#{$prefix}field-message-font-size,
       $field-message-font-size
     );
-    @include avariable(
-      "margin-top",
-      "field-message-margin-top",
+    margin-top: var(
+      --#{$prefix}field-message-margin-top,
       $field-message-margin-top
     );
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       &-#{$name} {
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
   }
@@ -109,11 +96,7 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
     flex-wrap: wrap;
 
     &:last-child {
-      @include avariable(
-        "margin-bottom",
-        "field-margin-bottom",
-        -$field-margin-bottom
-      );
+      margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
     }
   }
 
@@ -139,16 +122,11 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
   }
 
   &--mobile {
+    &.o-field--horizontal,
+    .o-field__horizontal-label,
     .o-field__horizontal-body {
-      all: unset;
-    }
-
-    &.o-field--horizontal {
-      all: unset;
-    }
-
-    .o-field__horizontal-label {
-      all: unset;
+      display: block;
+      text-align: inherit;
     }
   }
 }

package/dist/scss/components/_icon.scss

@@ -21,18 +21,18 @@ $icon-spin-duration: 2s !default;
   display: inline-flex;
   justify-content: center;
   transition:
-    transform $speed-slow $easing,
-    opacity $speed $easing;
+    transform $animation-speed $animation-timing,
+    opacity $animation-speed-fast $animation-timing;
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("icon-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
     }
   }
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
-      @include avariable("color", ("variant-" + #{$name}), $color);
+      color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
 
@@ -45,10 +45,8 @@ $icon-spin-duration: 2s !default;
     animation-name: icon-spin;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
-
-    @include avariable(
-      "animation-duration",
-      "icon-spin-duration",
+    animation-duration: var(
+      --#{$prefix}icon-spin-duration,
       $icon-spin-duration
     );
   }

package/dist/scss/components/_input.scss

@@ -2,20 +2,22 @@
 
 /* @docs */
 $input-background-color: #ffffff !default;
-$input-border-color: $grey-lighter !default;
+$input-border-color: var(--#{$prefix}grey-lighter) !default;
 $input-border-style: solid !default;
 $input-border-width: 1px !default;
-$input-border-radius: $base-border-radius !default;
-$input-rounded-border-radius: $base-rounded-border-radius !default;
-$input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
+$input-border-radius: var(--#{$prefix}base-border-radius) !default;
+$input-rounded-border-radius: var(
+  --#{$prefix}base-border-radius-rounded
+) !default;
+$input-box-shadow: $control-box-shadow !default;
 $input-color: #363636 !default;
 $input-icon-zindex: 4 !default;
-$input-counter-font-size: 0.75rem !default;
-$input-counter-margin: 0.25rem 0 0 0.5rem !default;
 $input-height: $control-height !default;
-$input-line-height: $base-line-height !default;
+$input-line-height: var(--#{$prefix}base-line-height) !default;
 $input-margin: 0 !default;
 $input-padding: $control-padding-vertical $control-padding-horizontal !default;
+$input-counter-font-size: 0.75rem !default;
+$input-counter-margin: 0.25rem 0 0 0.5rem !default;
 $input-textarea-max-height: 600px !default;
 $input-textarea-min-height: 120px !default;
 $input-textarea-padding: 0.625em !default;
@@ -28,26 +30,21 @@ $input-textarea-padding: 0.625em !default;
   position: relative;
   vertical-align: top;
 
-  @include avariable("box-shadow", "input-box-shadow", $input-box-shadow);
-  @include avariable(
-    "background-color",
-    "input-background-color",
+  box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
+  background-color: var(
+    --#{$prefix}input-background-color,
     $input-background-color
   );
-  @include avariable("border-color", "input-border-color", $input-border-color);
-  @include avariable("border-style", "input-border-style", $input-border-style);
-  @include avariable("border-width", "input-border-width", $input-border-width);
-  @include avariable(
-    "border-radius",
-    "input-border-radius",
-    $input-border-radius
-  );
-  @include avariable("color", "input-color", $input-color);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("height", "input-height", $input-height);
-  @include avariable("line-height", "input-line-height", $input-line-height);
-  @include avariable("padding", "input-padding", $input-padding);
-  @include avariable("margin", "input-margin", $input-margin);
+  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);
+  height: var(--#{$prefix}input-height, $input-height);
+  line-height: var(--#{$prefix}input-line-height, $input-line-height);
+  padding: var(--#{$prefix}input-padding, $input-padding);
+  margin: var(--#{$prefix}input-margin, $input-margin);
 
   &__wrapper {
     display: inline-block;
@@ -70,22 +67,15 @@ $input-textarea-padding: 0.625em !default;
     min-width: 100%;
     height: auto;
     resize: vertical;
-
-    @include avariable(
-      "padding",
-      "input-textarea-padding",
-      $input-textarea-padding
-    );
+    padding: var(--#{$prefix}input-textarea-padding, $input-textarea-padding);
 
     &:not([rows]) {
-      @include avariable(
-        "max-height",
-        "input-textarea-max-height",
+      max-height: var(
+        --#{$prefix}input-textarea-max-height,
         $input-textarea-max-height
       );
-      @include avariable(
-        "min-height",
-        "input-textarea-min-height",
+      min-height: var(
+        --#{$prefix}input-textarea-min-height,
         $input-textarea-min-height
       );
     }
@@ -94,13 +84,11 @@ $input-textarea-padding: 0.625em !default;
   &__counter {
     display: block;
     float: right;
-
-    @include avariable(
-      "font-size",
-      "input-counter-font-size",
+    font-size: var(
+      --#{$prefix}input-counter-font-size,
       $input-counter-font-size
     );
-    @include avariable("margin", "input-counter-margin", $input-counter-margin);
+    margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
   }
 
   &__icon-left,
@@ -108,9 +96,8 @@ $input-textarea-padding: 0.625em !default;
     position: absolute;
     top: 0;
     height: 100%;
-
-    @include avariable("width", "input-height", $input-height);
-    @include avariable("z-index", "input-icon-zindex", $input-icon-zindex);
+    width: var(--#{$prefix}input-height, $input-height);
+    z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
   }
 
   &__icon-right {
@@ -122,30 +109,32 @@ $input-textarea-padding: 0.625em !default;
   }
 
   &--iconspace-left {
-    @include avariable("padding-left", "input-height", $input-height);
+    padding-left: var(--#{$prefix}input-height, $input-height);
   }
 
   &--iconspace-right {
-    @include avariable("padding-right", "input-height", $input-height);
+    padding-right: var(--#{$prefix}input-height, $input-height);
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "input-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}input-rounded-border-radius,
       $input-rounded-border-radius
     );
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("input-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
     }
   }
+
+  // colar 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);
     }
   }
 }