@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_field.scss

@@ -1,60 +1,88 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$field-label-color: #363636 !default;
+$field-spacer: h.useVar("control-spacer") !default;
+$field-margin-bottom: calc(1.5 * $field-spacer) !default;
+
+$field-label-color: h.useVar("font-color") !default;
+$field-label-font-size: h.useVar("font-size") !default;
 $field-label-font-weight: 600 !default;
-$field-margin-bottom: 0.75rem !default;
-$field-message-font-size: 0.75rem !default;
-$field-message-margin-top: 0.25rem !default;
-$field-spacer: 0.5rem !default;
-$field-horizontal-spacer: 0 1.5rem 0 0 !default;
+$field-label-line-height: h.useVar("line-height") !default;
+
+$field-message-spacer: calc(0.5 * $field-spacer) !default;
+$field-message-color: h.useVar("secondary") !default;
+$field-message-font-size: 0.75em !default;
+$field-message-font-weight: h.useVar("font-weight") !default;
+$field-message-line-height: h.useVar("line-height") !default;
 /* @docs */
 
 .o-field {
-    flex-grow: 1;
+    @include h.defineVar("field-spacer", $field-spacer);
+    @include h.defineVar("field-margin-bottom", $field-margin-bottom);
+    @include h.defineVar("field-label-color", $field-label-color);
+    @include h.defineVar("field-label-font-size", $field-label-font-size);
+    @include h.defineVar("field-label-font-weight", $field-label-font-weight);
+    @include h.defineVar("field-label-line-height", $field-label-line-height);
+    @include h.defineVar("field-message-color", $field-message-color);
+    @include h.defineVar("field-message-font-size", $field-message-font-size);
+    @include h.defineVar(
+        "field-message-font-weight",
+        $field-message-font-weight
+    );
+    @include h.defineVar(
+        "field-message-line-height",
+        $field-message-line-height
+    );
+    @include h.defineVar("field-message-spacer", $field-message-spacer);
 
     &:not(:last-child) {
-        margin-bottom: var(
-            --#{$prefix}field-margin-bottom,
-            $field-margin-bottom
-        );
+        margin-bottom: h.useVar("field-margin-bottom");
     }
 
     &__label {
         display: block;
-        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 {
+        color: h.useVar("field-label-color");
+        font-size: h.useVar("field-label-font-size");
+        font-weight: h.useVar("field-label-font-weight");
+        line-height: h.useVar("field-label-line-weight");
+
+        // size variants
+        @each $name, $value in vars.$sizes {
             &--#{$name} {
-                font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
+                @include h.defineVar(
+                    "field-label-font-size",
+                    h.useVar("size-#{$name}")
+                );
             }
         }
     }
 
     &__message {
         display: block;
-        font-size: var(
-            --#{$prefix}field-message-font-size,
-            $field-message-font-size
-        );
-        margin-top: var(
-            --#{$prefix}field-message-margin-top,
-            $field-message-margin-top
-        );
-
-        @each $name, $pair in $colors {
-            $color: list.nth($pair, 1);
+        color: h.useVar("field-message-color");
+        font-size: h.useVar("field-message-font-size");
+        font-weight: h.useVar("field-message-font-weight");
+        line-height: h.useVar("field-message-line-height");
+
+        margin-top: h.useVar("field-message-spacer");
+
+        // color variants
+        @each $name, $pair in vars.$colors {
             &--#{$name} {
-                color: var(--#{$prefix}variant-#{$name}, $color);
+                @include h.defineVar("field-message-color", h.useVar($name));
             }
         }
     }
 
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar("field-message-color", h.useVar($name));
+        }
+    }
+
     &--addons {
         display: flex;
         justify-content: flex-start;
@@ -89,15 +117,14 @@ $field-horizontal-spacer: 0 1.5rem 0 0 !default;
         }
     }
 
+    &--multiline,
     &--grouped {
         display: flex;
-        gap: var(--#{$prefix}field-spacer, $field-spacer);
+        gap: h.useVar("field-spacer");
     }
 
     &--multiline {
-        display: flex;
         flex-wrap: wrap;
-        gap: var(--#{$prefix}field-spacer, $field-spacer);
     }
 
     &__horizontal-body {
@@ -105,6 +132,10 @@ $field-horizontal-spacer: 0 1.5rem 0 0 !default;
         flex-basis: 0;
         flex-grow: 5;
         flex-shrink: 1;
+
+        & > .o-field:not(:last-child) {
+            margin-inline-end: h.useVar("field-spacer");
+        }
     }
 
     &--horizontal {
@@ -115,11 +146,9 @@ $field-horizontal-spacer: 0 1.5rem 0 0 !default;
         flex-basis: 0;
         flex-grow: 1;
         flex-shrink: 0;
-        margin: var(
-            --#{$prefix}field-horizontal-spacer,
-            $field-horizontal-spacer
-        );
         text-align: right;
+
+        padding-right: h.useVar("field-spacer");
     }
 
     &--mobile {

package/dist/scss/components/_icon.scss

@@ -1,57 +1,52 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$icon-spin-duration: 2s !default;
+$icon-color: inherit;
+$icon-font-size: inherit;
+$icon-spin-animation-duration: 2s !default;
 /* @docs */
 
-@keyframes icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
 .o-icon {
+    @include h.defineVar("icon-color", $icon-color);
+    @include h.defineVar("icon-font-size", $icon-font-size);
+    @include h.defineVar(
+        "icon-spin-animation-duration",
+        $icon-spin-animation-duration
+    );
+
     align-items: center;
     display: inline-flex;
     justify-content: center;
+    color: h.useVar("icon-color");
+    font-size: h.useVar("icon-font-size");
     transition:
-        transform $animation-speed $animation-timing,
-        opacity $animation-speed-fast $animation-timing;
+        transform h.useVar("animation-speed-fast") h.useVar("animation-timing"),
+        opacity h.useVar("animation-speed") h.useVar("animation-timing");
 
-    // sizes
-    @each $name, $value in $sizes {
+    // size variants
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
+            @include h.defineVar("icon-font-size", h.useVar("size-#{$name}"));
         }
     }
 
     // color variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
+    @each $name, $pair in vars.$colors {
         &--#{$name} {
-            color: var(--#{$prefix}variant-#{$name}, $color);
+            @include h.defineVar("icon-color", h.useVar($name));
         }
     }
 
     &--clickable {
-        pointer-events: auto;
-        cursor: pointer;
+        @include h.clickable;
     }
 
     &--spin {
-        animation-name: icon-spin;
+        animation-name: spinAround;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
-        animation-duration: var(
-            --#{$prefix}icon-spin-duration,
-            $icon-spin-duration
-        );
+        animation-duration: h.useVar("icon-spin-animation-duration");
     }
 }

package/dist/scss/components/_input.scss

@@ -1,69 +1,120 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$input-background-color: #ffffff !default;
-$input-border-color: var(--#{$prefix}grey-lighter) !default;
+$input-color: h.useVar("font-color") !default;
+$input-font-size: h.useVar("font-size") !default;
+$input-font-weight: h.useVar("font-weight") !default;
+$input-line-height: h.useVar("line-height") !default;
+$input-height: h.useVar("control-height") !default;
+
+$input-padding: h.useVar("control-padding-vertical")
+    h.useVar("control-padding-horizontal") !default;
+$input-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$input-box-shadow: h.useVar("control-box-shadow-inset") !default;
+$input-border-width: h.useVar("control-border-width") !default;
 $input-border-style: solid !default;
-$input-border-width: 1px !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-height: $control-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.5rem !default;
-$input-textarea-max-height: 600px !default;
+$input-border-color: h.useVar("control-border-color") !default;
+$input-border-radius: h.useVar("border-radius") !default;
+$input-border-radius-rounded: h.useVar("border-radius-rounded") !default;
+$input-background-color: h.useVar("control-brackground-color") !default;
+
 $input-textarea-min-height: 120px !default;
-$input-textarea-padding: 0.625em !default;
+$input-textarea-max-height: 600px !default;
+$input-textarea-padding: h.useVar("control-spacer") !default;
+
+$input-counter-font-size: 0.75rem !default;
+$input-counter-padding: 0.25rem 0.5rem !default;
 /* @docs */
 
 .o-input {
+    @include h.defineVar("input-height", $input-height);
+    @include h.defineVar("input-padding", $input-padding);
+    @include h.defineVar("input-disabled-opacity", $input-disabled-opacity);
+
+    @include h.defineVar("input-color", $input-color);
+    @include h.defineVar("input-font-size", $input-font-size);
+    @include h.defineVar("input-font-weight", $input-font-weight);
+    @include h.defineVar("input-line-height", $input-line-height);
+
+    @include h.defineVar("input-box-shadow", $input-box-shadow);
+    @include h.defineVar("input-background-color", $input-background-color);
+    @include h.defineVar("input-border-width", $input-border-width);
+    @include h.defineVar("input-border-style", $input-border-style);
+    @include h.defineVar("input-border-color", $input-border-color);
+    @include h.defineVar("input-border-radius", $input-border-radius);
+    @include h.defineVar(
+        "input-border-radius-rounded",
+        $input-border-radius-rounded
+    );
+
+    @include h.defineVar(
+        "input-textarea-min-height",
+        $input-textarea-min-height
+    );
+    @include h.defineVar(
+        "input-textarea-max-height",
+        $input-textarea-max-height
+    );
+    @include h.defineVar("input-textarea-padding", $input-textarea-padding);
+
+    @include h.defineVar("input-counter-font-size", $input-counter-font-size);
+    @include h.defineVar("input-counter-padding", $input-counter-padding);
+
+    // define focus shadow effect
+    @include h.focusable(".o-input__input");
+
+    // add clickable cursor
+    @include h.clickable;
+
     display: inline-block;
     position: relative;
 
+    // size variants
+    @each $name, $value in vars.$sizes {
+        &--#{$name} {
+            @include h.defineVar("input-font-size", h.useVar("size-#{$name}"));
+        }
+    }
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar("input-border-color", h.useVar($name));
+        }
+    }
+
     &__input {
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        display: inline-flex;
+        // remove default appearance
+        @include h.removeAppearance;
+
+        display: inline-block;
         position: relative;
-        vertical-align: top;
-
-        color: var(--#{$prefix}input-color, $input-color);
-        font-size: var(--#{$prefix}base-font-size, $base-font-size);
-        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
-        );
 
-        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);
+        height: h.useVar("input-height");
+        padding: h.useVar("input-padding");
+
+        color: h.useVar("input-color");
+        font-size: h.useVar("input-font-size");
+        font-weight: h.useVar("input-font-weight");
+        line-height: h.useVar("input-line-height");
+
+        box-shadow: h.useVar("input-box-shadow");
+        background-color: h.useVar("input-background-color");
+
+        border-color: h.useVar("input-border-color");
+        border-style: h.useVar("input-border-style");
+        border-width: h.useVar("input-border-width");
+        border-radius: h.useVar("input-border-radius");
 
         &--iconspace-left {
-            padding-left: var(--#{$prefix}input-height, $input-height);
+            padding-left: h.useVar("input-height");
         }
 
         &--iconspace-right {
-            padding-right: var(--#{$prefix}input-height, $input-height);
-        }
-
-        &[disabled] {
-            cursor: inherit;
+            padding-right: h.useVar("input-height");
         }
     }
 
@@ -73,46 +124,23 @@ $input-textarea-padding: 0.625em !default;
         min-width: 100%;
         height: auto;
         resize: vertical;
-        padding: var(
-            --#{$prefix}input-textarea-padding,
-            $input-textarea-padding
-        );
+        padding: h.useVar("input-textarea-padding");
 
         &:not([rows]) {
-            max-height: var(
-                --#{$prefix}input-textarea-max-height,
-                $input-textarea-max-height
-            );
-            min-height: var(
-                --#{$prefix}input-textarea-min-height,
-                $input-textarea-min-height
-            );
+            max-height: h.useVar("input-textarea-max-height");
+            min-height: h.useVar("input-textarea-min-height");
         }
     }
 
-    // size variants
-    @each $name, $value in $sizes {
-        &--#{$name} .o-input__input {
-            font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
-        }
-    }
-
-    // colar variants
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
-        &--#{$name} .o-input__input {
-            --#{$prefix}focus: #{createFocus($color)};
-
-            border-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
+    &--rounded {
+        @include h.defineVar(
+            "input-border-radius",
+            h.useVar("input-border-radius-rounded")
+        );
     }
 
-    &--rounded .o-input__input {
-        border-radius: var(
-            --#{$prefix}input-rounded-border-radius,
-            $input-rounded-border-radius
-        );
+    &--disabled {
+        @include h.disabled(h.useVar("input-disabled-opacity"));
     }
 
     &--expanded {
@@ -128,11 +156,9 @@ $input-textarea-padding: 0.625em !default;
     &__counter {
         display: block;
         float: right;
-        font-size: var(
-            --#{$prefix}input-counter-font-size,
-            $input-counter-font-size
-        );
-        margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
+        font-size: h.useVar("input-counter-font-size");
+        padding: h.useVar("input-counter-padding");
+        height: h.useVar("input-height");
     }
 
     &__icon-left,
@@ -140,8 +166,7 @@ $input-textarea-padding: 0.625em !default;
         position: absolute;
         top: 0;
         height: 100%;
-        width: var(--#{$prefix}input-height, $input-height);
-        z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
+        width: h.useVar("input-height");
     }
 
     &__icon-right {
@@ -151,14 +176,4 @@ $input-textarea-padding: 0.625em !default;
     &__icon-left {
         left: 0;
     }
-
-    // focus effect
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        .o-input__input {
-            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-            outline: none;
-        }
-    }
 }

package/dist/scss/components/_listbox.scss

@@ -0,0 +1,176 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
+/* @docs */
+$listbox-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+$listbox-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;
+$listbox-background-color: h.useVar("control-brackground-color") !default;
+$listbox-border-color: h.useVar("control-border-color") !default;
+$listbox-border-style: solid !default;
+$listbox-border-width: h.useVar("control-border-width") !default;
+$listbox-border-radius: h.useVar("border-radius") !default;
+
+$listbox-item-padding: h.useVar("control-spacer")
+    calc(h.useVar("control-spacer") * 2) !default;
+$listbox-item-color: h.useVar("font-color") !default;
+$listbox-item-font-size: h.useVar("font-size") !default;
+$listbox-item-font-weight: h.useVar("font-weight") !default;
+$listbox-item-line-height: h.useVar("line-height") !default;
+
+$listbox-item-background-color: transparent !default;
+$listbox-item-active-color: h.useVar("primary-invert") !default;
+$listbox-item-active-background-color: h.useVar("primary") !default;
+$listbox-item-hover-background-color: h.useVar("grey-lighter") !default;
+$listbox-item-hover-color: h.useVar("font-color") !default;
+/* @docs */
+
+.o-listbox {
+    @include h.defineVar("listbox-disabled-opacity", $listbox-disabled-opacity);
+    @include h.defineVar("listbox-box-shadow", $listbox-box-shadow);
+
+    @include h.defineVar("listbox-background-color", $listbox-background-color);
+    @include h.defineVar("listbox-border-style", $listbox-border-style);
+    @include h.defineVar("listbox-border-color", $listbox-border-color);
+    @include h.defineVar("listbox-border-width", $listbox-border-width);
+    @include h.defineVar("listbox-border-radius", $listbox-border-radius);
+
+    @include h.defineVar("listbox-item-color", $listbox-item-color);
+    @include h.defineVar("listbox-item-font-size", $listbox-item-font-size);
+    @include h.defineVar("listbox-item-font-weight", $listbox-item-font-weight);
+    @include h.defineVar("listbox-item-line-height", $listbox-item-line-height);
+    @include h.defineVar("listbox-item-padding", $listbox-item-padding);
+    @include h.defineVar(
+        "listbox-item-background-color",
+        $listbox-item-background-color
+    );
+    @include h.defineVar(
+        "listbox-item-active-color",
+        $listbox-item-active-color
+    );
+    @include h.defineVar(
+        "listbox-item-active-background-color",
+        $listbox-item-active-background-color
+    );
+    @include h.defineVar("listbox-item-hover-color", $listbox-item-hover-color);
+    @include h.defineVar(
+        "listbox-item-hover-background-color",
+        $listbox-item-hover-background-color
+    );
+
+    // define focus shadow effect
+    @include h.focusable();
+
+    display: block;
+    position: relative;
+    overflow: hidden;
+
+    box-shadow: h.useVar("listbox-box-shadow");
+    background-color: h.useVar("listbox-background-color");
+    border-color: h.useVar("listbox-border-color");
+    border-style: h.useVar("listbox-border-style");
+    border-width: h.useVar("listbox-border-width");
+    border-radius: h.useVar("listbox-border-radius");
+
+    &--disabled {
+        @include h.disabled(h.useVar("listbox-disabled-opacity"));
+    }
+
+    &__header,
+    &__filter {
+        padding: h.useVar("listbox-item-padding");
+
+        border-bottom-color: h.useVar("listbox-border-color");
+        border-bottom-style: h.useVar("listbox-border-style");
+        border-bottom-width: h.useVar("listbox-border-width");
+    }
+
+    &__footer,
+    &__empty {
+        padding: h.useVar("listbox-item-padding");
+    }
+
+    &__list {
+        outline: none;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        &:only-child {
+            border-radius: h.useVar("listbox-border-radius");
+        }
+
+        &:first-child {
+            border-top-left-radius: h.useVar("listbox-border-radius");
+            border-top-right-radius: h.useVar("listbox-border-radius");
+        }
+
+        &:last-child {
+            border-bottom-left-radius: h.useVar("listbox-border-radius");
+            border-bottom-right-radius: h.useVar("listbox-border-radius");
+        }
+
+        &:not(:last-child) {
+            .o-listbox__item:last-child {
+                border-bottom-color: h.useVar("listbox-border-color");
+                border-bottom-style: h.useVar("listbox-border-style");
+                border-bottom-width: h.useVar("listbox-border-width");
+            }
+        }
+    }
+
+    &__item {
+        display: block;
+        position: relative;
+
+        padding: h.useVar("listbox-item-padding");
+
+        color: h.useVar("listbox-item-color");
+        font-size: h.useVar("listbox-item-font-size");
+        font-weight: h.useVar("listbox-item-font-weight");
+        line-height: h.useVar("listbox-item-line-height");
+
+        background-color: h.useVar("listbox-item-background-color");
+
+        &:not(:last-child) {
+            border-bottom-color: h.useVar("listbox-border-color");
+            border-bottom-style: h.useVar("listbox-border-style");
+            border-bottom-width: h.useVar("listbox-border-width");
+        }
+
+        &--selected,
+        &--active {
+            @include h.defineVar(
+                "listbox-item-color",
+                h.useVar("listbox-item-active-color")
+            );
+            @include h.defineVar(
+                "listbox-item-background-color",
+                h.useVar("listbox-item-active-background-color")
+            );
+        }
+
+        &--clickable {
+            @include h.clickable;
+        }
+
+        &--clickable:not(&--active) {
+            &:hover,
+            &.o-listbox__item--focused {
+                @include h.defineVar(
+                    "listbox-item-color",
+                    h.useVar("listbox-item-hover-color")
+                );
+                @include h.defineVar(
+                    "listbox-item-background-color",
+                    h.useVar("listbox-item-hover-background-color")
+                );
+            }
+        }
+
+        &--disabled {
+            @include h.disabled(h.useVar("listbox-disabled-opacity"));
+        }
+    }
+}