@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_upload.scss

@@ -1,25 +1,87 @@
 @use "sass:list";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$upload-draggable-border: 1px dashed var(--#{$prefix}grey-light) !default;
-$upload-draggable-border-radius: var(--#{$prefix}base-border-radius) !default;
-$upload-draggable-disabled-opacity: var(
-    --#{$prefix}base-disabled-opacity
+$upload-draggable-padding: calc(4 * h.useVar("control-spacer")) !default;
+$upload-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+
+$upload-draggable-background-color: h.useVar(
+    "control-background-color"
+) !default;
+$upload-draggable-border-color: h.useVar("control-border-color") !default;
+$upload-draggable-border-style: dashed !default;
+$upload-draggable-border-radius: h.useVar("border-radius") !default;
+$upload-draggable-border-width: h.useVar("control-border-width") !default;
+$upload-draggable-hover-border-color: h.useVar("secondary") !default;
+$upload-draggable-hover-background-color: h.useVar(
+    "control-background-color"
 ) !default;
-$upload-draggable-hover-border-color: var(--#{$prefix}grey) !default;
-$upload-draggable-padding: 2em !default;
 /* @docs */
 
 .o-upload {
+    @include h.defineVar("upload-draggable-padding", $upload-draggable-padding);
+    @include h.defineVar("upload-disabled-opacity", $upload-disabled-opacity);
+
+    @include h.defineVar(
+        "upload-draggable-background-color",
+        $upload-draggable-background-color
+    );
+    @include h.defineVar(
+        "upload-draggable-border-color",
+        $upload-draggable-border-color
+    );
+    @include h.defineVar(
+        "upload-draggable-border-style",
+        $upload-draggable-border-style
+    );
+    @include h.defineVar(
+        "upload-draggable-border-radius",
+        $upload-draggable-border-radius
+    );
+    @include h.defineVar(
+        "upload-draggable-border-radius",
+        $upload-draggable-border-radius
+    );
+    @include h.defineVar(
+        "upload-draggable-border-width",
+        $upload-draggable-border-width
+    );
+    @include h.defineVar(
+        "upload-draggable-hover-border-color",
+        $upload-draggable-hover-border-color
+    );
+    @include h.defineVar(
+        "upload-draggable-hover-background-color",
+        $upload-draggable-hover-background-color
+    );
+
     position: relative;
     display: inline-flex;
 
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar(
+                "upload-draggable-border-color",
+                h.useVar($name)
+            );
+            @include h.defineVar(
+                "upload-draggable-hover-background-color",
+                h.useVar("#{$name}-lighter")
+            );
+            @include h.defineVar(
+                "upload-draggable-hover-border-color",
+                h.useVar($name)
+            );
+        }
+    }
+
+    // add clickable cursor
+    @include h.clickable;
+
     &--disabled {
-        opacity: var(
-            --#{$prefix}upload-draggable-disabled-opacity,
-            $upload-draggable-disabled-opacity
-        );
-        cursor: not-allowed;
+        @include h.disabled(h.useVar("upload-disabled-opacity"));
     }
 
     &--expanded {
@@ -27,35 +89,21 @@ $upload-draggable-padding: 2em !default;
     }
 
     &__draggable {
-        cursor: pointer;
         width: 100%;
+        padding: h.useVar("upload-draggable-padding");
 
-        padding: var(
-            --#{$prefix}upload-draggable-padding,
-            $upload-draggable-padding
-        );
-        border: var(
-            --#{$prefix}upload-draggable-border,
-            $upload-draggable-border
-        );
-        border-radius: var(
-            --#{$prefix}upload-draggable-border-radius,
-            $upload-draggable-border-radius
-        );
+        background-color: h.useVar("upload-draggable-background-color");
+        border-radius: h.useVar("upload-draggable-border-radius");
+        border-width: h.useVar("upload-draggable-border-width");
+        border-color: h.useVar("upload-draggable-border-color");
+        border-style: h.useVar("upload-draggable-border-style");
 
+        &:hover,
         &--hovered {
-            border-color: var(
-                --#{$prefix}upload-draggable-hover-border-color,
-                $upload-draggable-hover-border-color
+            border-color: h.useVar("upload-draggable-hover-border-color");
+            background-color: h.useVar(
+                "upload-draggable-hover-background-color"
             );
-
-            @each $name, $pair in $colors {
-                $color: list.nth($pair, 1);
-
-                &-#{$name} {
-                    border-color: var(--#{$prefix}variant-#{$name}, $color);
-                }
-            }
         }
     }
 

package/dist/scss/theme-build.scss

@@ -0,0 +1,9 @@
+/***********************
+*   Theme Full Build
+************************/
+
+// import theme variables
+@forward "utils/variables";
+
+// import theme styles
+@forward "./theme";

package/dist/scss/theme.scss

@@ -0,0 +1,44 @@
+/******************
+*   Theme Styles
+*******************/
+
+// import globals, helpers and functions
+@forward "utils/animations";
+@forward "utils/helpers";
+@forward "utils/root";
+@forward "utils/base";
+
+// import theme components
+@forward "components/autocomplete";
+@forward "components/breadcrumb";
+@forward "components/button";
+@forward "components/carousel";
+@forward "components/checkbox";
+@forward "components/collapse";
+@forward "components/datepicker";
+@forward "components/datetimepicker";
+@forward "components/dialog";
+@forward "components/dropdown";
+@forward "components/field";
+@forward "components/icon";
+@forward "components/input";
+@forward "components/listbox";
+@forward "components/loading";
+@forward "components/menu";
+@forward "components/modal";
+@forward "components/notification";
+@forward "components/pagination";
+@forward "components/radio";
+@forward "components/select";
+@forward "components/skeleton";
+@forward "components/sidebar";
+@forward "components/slider";
+@forward "components/steps";
+@forward "components/switch";
+@forward "components/table";
+@forward "components/tabs";
+@forward "components/tag";
+@forward "components/taginput";
+@forward "components/timepicker";
+@forward "components/tooltip";
+@forward "components/upload";

package/dist/scss/utils/_animations.scss

@@ -1,5 +1,21 @@
 // Some of the animations are from animate.css (https://daneden.github.io/animate.css)
 
+@use "./helpers" as h;
+@use "./variables" as vars;
+
+// Spin around
+@keyframes spinAround {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    to {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
 // Fade out
 @keyframes fadeOut {
     from {
@@ -111,7 +127,8 @@
 // Fade
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity $animation-speed $animation-timing;
+    transition: opacity h.useVar("animation-speed-fast")
+        h.useVar("animation-timing");
 }
 
 .fade-enter,
@@ -123,10 +140,12 @@
 // Zoom In
 .zoom-in-enter-active,
 .zoom-in-leave-active {
-    transition: opacity $animation-speed $animation-timing;
+    transition: opacity h.useVar("animation-speed-fast")
+        h.useVar("animation-timing");
 
     .animation-content {
-        transition: transform $animation-speed $animation-timing;
+        transition: transform h.useVar("animation-speed-fast")
+            h.useVar("animation-timing");
     }
 }
 
@@ -143,10 +162,12 @@
 // Zoom Out
 .zoom-out-enter-active,
 .zoom-out-leave-active {
-    transition: opacity $animation-speed $animation-timing;
+    transition: opacity h.useVar("animation-speed-fast")
+        h.useVar("animation-timing");
 
     .animation-content {
-        transition: transform $animation-speed $animation-timing;
+        transition: transform h.useVar("animation-speed-fast")
+            h.useVar("animation-timing");
     }
 }
 
@@ -165,7 +186,7 @@
 .slide-next-leave-active,
 .slide-prev-enter-active,
 .slide-prev-leave-active {
-    transition: transform $animation-speed-fast
+    transition: transform vars.$animation-speed
         cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
@@ -189,7 +210,7 @@
 .slide-down-leave-active,
 .slide-up-enter-active,
 .slide-up-leave-active {
-    transition: transform $animation-speed-fast
+    transition: transform vars.$animation-speed
         cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
@@ -210,11 +231,11 @@
 }
 
 .slide-enter-active {
-    transition: $animation-speed $animation-timing;
+    transition: h.useVar("animation-speed-fast") h.useVar("animation-timing");
 }
 
 .slide-leave-active {
-    transition: $animation-speed $animation-timing;
+    transition: h.useVar("animation-speed-fast") h.useVar("animation-timing");
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 

package/dist/scss/utils/_base.scss

@@ -1,3 +1,5 @@
+@use "./helpers" as h;
+
 *,
 :after,
 :before {
@@ -12,10 +14,10 @@ body {
     margin: 0;
     padding: 0;
 
-    font-family: var(--#{$prefix}base-font-family, $base-font-family);
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    font-weight: var(--#{$prefix}base-font-weight, $base-font-weight);
-    line-height: var(--#{$prefix}base-line-height, $base-line-height);
+    font-family: h.useVar("font-family");
+    font-size: h.useVar("font-size");
+    font-weight: h.useVar("font-weight");
+    line-height: h.useVar("line-height");
 }
 
 img,

package/dist/scss/utils/_helpers.scss

@@ -1,10 +1,25 @@
+/**********************************
+*   Utility mixins and functions
+***********************************/
 @use "sass:string";
 @use "sass:math";
 @use "sass:color";
 
-/**********************************
-*   Utility mixins and functions
-***********************************/
+@use "./variables" as vars;
+
+/// register a css variable with global prefix
+@mixin defineVar($name, $value) {
+    $varName: "--#{vars.$prefix}-#{$name}";
+
+    #{$varName}: #{$value};
+}
+
+/// use a css variable with global prefix
+@function useVar($name) {
+    $varName: "--#{vars.$prefix}-#{$name}";
+
+    @return var(#{$varName});
+}
 
 /// Replaces characters in a string
 ///
@@ -60,24 +75,6 @@
     @return "data:image/svg+xml,#{$encoded}";
 }
 
-@mixin unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-@mixin side-flex-gap($gap) {
-    //flex-wrap: wrap;
-    margin-left: -$gap;
-    margin-right: -$gap;
-
-    & > * {
-        margin-left: $gap;
-        margin-right: $gap;
-    }
-}
-
 // Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
 // Replaces old slash division deprecated in Dart Sass
 @function divide($dividend, $divisor, $precision: 10) {
@@ -86,12 +83,15 @@
     $divisor: math.abs($divisor);
     $quotient: 0;
     $remainder: $dividend;
+
     @if $dividend == 0 {
         @return 0;
     }
+
     @if $divisor == 0 {
         @error "Cannot divide by 0";
     }
+
     @if $divisor == 1 {
         @return $dividend;
     }
@@ -100,6 +100,7 @@
         $quotient: $quotient + 1;
         $remainder: $remainder - $divisor;
     }
+
     @if $remainder > 0 and $precision > 0 {
         $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
     }
@@ -107,7 +108,68 @@
     @return ($quotient + $remainder) * $sign;
 }
 
-// create a focus color based on a given color
+/// create a focus color variant based on a given color
 @function createFocus($color) {
     @return color.adjust($color, $alpha: -0.75);
 }
+
+/// create a lighter color variant based on a given color
+@function createLighter($color) {
+    @return color.scale($color, $lightness: 95%);
+}
+
+/// create a darker color variant based on a given color
+@function createDarker($color) {
+    @return color.scale($color, $lightness: -10%);
+}
+
+/// define disabled state
+@mixin disabled($opacity) {
+    opacity: $opacity;
+    cursor: unset;
+    pointer-events: none;
+    text-decoration: none;
+
+    // define unselectable state
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+/// define clickable state
+@mixin clickable {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+/// remove default appearance
+@mixin removeAppearance {
+    appearance: none;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+
+/// add focus effect
+@mixin focusable($selector: "&") {
+    &:not(&--disabled) {
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:focus-within {
+            #{$selector} {
+                box-shadow: vars.$control-focus-box-shadow useVar("focus");
+                outline: none;
+            }
+        }
+    }
+
+    @each $name, $pair in vars.$colors {
+        &--#{$name},
+        &--#{$name}-passive {
+            @include defineVar("focus", useVar("#{$name}-focus"));
+        }
+    }
+}

package/dist/scss/utils/_root.scss

@@ -4,44 +4,97 @@
 @use "sass:list";
 @use "sass:meta";
 
-$host-selector: if($enable-host, ":root, :host", ":root");
+@use "./variables" as vars;
+@use "./helpers" as h;
+
+$host-selector: if(vars.$enable-host, ":root, :host", ":root");
 
 #{$host-selector} {
     // define color variables
-    @each $name, $color in $colors {
-        @if meta.type-of($color) == list {
-            --#{$prefix}#{$name}: #{list.nth($color, 1)};
-            --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
-        } @else {
-            --#{$prefix}#{$name}: $color;
-        }
+    @each $name, $pair in vars.$colors {
+        @include h.defineVar($name, list.nth($pair, 1));
+        @include h.defineVar("#{$name}-invert", list.nth($pair, 2));
+        @include h.defineVar(
+            "#{$name}-focus",
+            h.createFocus(list.nth($pair, 1))
+        );
+        @include h.defineVar(
+            "#{$name}-lighter",
+            h.createLighter(list.nth($pair, 1))
+        );
+        @include h.defineVar(
+            "#{$name}-darker",
+            h.createDarker(list.nth($pair, 1))
+        );
     }
 
+    // define focus box-shadow color variable
+    @include h.defineVar("focus", h.createFocus(vars.$grey));
+
     // define additional colors
-    --#{$prefix}white: #{$white};
-    --#{$prefix}black: #{$black};
-    --#{$prefix}grey: #{$grey};
-    --#{$prefix}grey-light: #{$grey-light};
-    --#{$prefix}grey-lighter: #{$grey-lighter};
-    --#{$prefix}grey-dark: #{$grey-dark};
-    --#{$prefix}focus: #{createFocus($primary)};
+    @include h.defineVar("white", vars.$white);
+    @include h.defineVar("black", vars.$black);
+    @include h.defineVar("grey", vars.$grey);
+    @include h.defineVar("grey-light", vars.$grey-light);
+    @include h.defineVar("grey-lighter", vars.$grey-lighter);
+    @include h.defineVar("grey-lightest", vars.$grey-lightest);
+    @include h.defineVar("grey-dark", vars.$grey-dark);
+    @include h.defineVar("grey-darker", vars.$grey-darker);
+    @include h.defineVar("grey-darkest", vars.$grey-darkest);
 
     // define size variables
-    @each $name, $size in $sizes {
-        --#{$prefix}size-#{$name}: #{$size};
+    @each $name, $size in vars.$sizes {
+        @include h.defineVar("size-#{$name}", $size);
     }
 
     // define base variables
-    --#{$prefix}base-font-family: #{$base-font-family};
-    --#{$prefix}base-font-size: #{$base-font-size};
-    --#{$prefix}base-font-weight: #{$base-font-weight};
-    --#{$prefix}base-line-height: #{$base-line-height};
-
-    --#{$prefix}base-border-radius: #{$base-border-radius};
-    --#{$prefix}base-border-radius-rounded: #{$base-border-radius-rounded};
-    --#{$prefix}base-line-height: #{$base-line-height};
-    --#{$prefix}base-disabled-opacity: #{$base-disabled-opacity};
-
-    --#{$prefix}transition-duration: #{$animation-speed};
-    --#{$prefix}transition-timing: #{$animation-timing};
+    @include h.defineVar("font-family", vars.$font-family);
+    @include h.defineVar("font-size", vars.$font-size);
+    @include h.defineVar("font-color", vars.$font-color);
+    @include h.defineVar("font-weight", vars.$font-weight);
+    @include h.defineVar("line-height", vars.$line-height);
+
+    @include h.defineVar("border-radius", vars.$border-radius);
+    @include h.defineVar("border-radius-rounded", vars.$border-radius-rounded);
+
+    // define control variables
+    @include h.defineVar("control-spacer", vars.$control-spacer);
+    @include h.defineVar("control-height", vars.$control-height);
+    @include h.defineVar(
+        "control-padding-vertical",
+        vars.$control-padding-vertical
+    );
+    @include h.defineVar(
+        "control-padding-horizontal",
+        vars.$control-padding-horizontal
+    );
+    @include h.defineVar("control-shadow-color", vars.$control-shadow-color);
+    @include h.defineVar("control-box-shadow", vars.$control-box-shadow);
+    @include h.defineVar(
+        "control-box-shadow-inset",
+        vars.$control-box-shadow-inset
+    );
+    @include h.defineVar(
+        "control-brackground-color",
+        vars.$control-brackground-color
+    );
+    @include h.defineVar("control-border-color", vars.$control-border-color);
+    @include h.defineVar("control-border-width", vars.$control-border-width);
+    @include h.defineVar(
+        "control-disabled-opacity",
+        vars.$control-disabled-opacity
+    );
+
+    @include h.defineVar(
+        "overlay-background-color",
+        vars.$overlay-background-color
+    );
+    @include h.defineVar("overlay-box-shadow", vars.$overlay-box-shadow);
+
+    // define animation variables
+    @include h.defineVar("animation-speed-slow", vars.$animation-speed-slow);
+    @include h.defineVar("animation-speed", vars.$animation-speed);
+    @include h.defineVar("animation-speed-fast", vars.$animation-speed-fast);
+    @include h.defineVar("transition-duration", vars.$animation-speed-fast);
+    @include h.defineVar("transition-timing", vars.$animation-timing);
 }