@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/src/assets/scss/components/_upload.scss

@@ -1,10 +1,12 @@
 @use "sass:list";
 
 /* @docs */
-$upload-draggable-border: 1px dashed $grey-light !default;
-$upload-draggable-border-radius: $base-border-radius !default;
-$upload-draggable-disabled-opacity: $base-disabled-opacity !default;
-$upload-draggable-hover-border-color: $grey !default;
+$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
+) !default;
+$upload-draggable-hover-border-color: var(--#{$prefix}grey) !default;
 $upload-draggable-padding: 0.25em !default;
 /* @docs */
 
@@ -13,9 +15,8 @@ $upload-draggable-padding: 0.25em !default;
   display: inline-flex;
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "upload-draggable-disabled-opacity",
+    opacity: var(
+      --#{$prefix}upload-draggable-disabled-opacity,
       $upload-draggable-disabled-opacity
     );
     cursor: not-allowed;
@@ -29,33 +30,27 @@ $upload-draggable-padding: 0.25em !default;
     cursor: pointer;
     width: 100%;
 
-    @include avariable(
-      "padding",
-      "upload-draggable-padding",
+    padding: var(
+      --#{$prefix}upload-draggable-padding,
       $upload-draggable-padding
     );
-    @include avariable(
-      "border",
-      "upload-draggable-border",
-      $upload-draggable-border
-    );
-    @include avariable(
-      "border-radius",
-      "upload-draggable-border-radius",
+    border: var(--#{$prefix}upload-draggable-border, $upload-draggable-border);
+    border-radius: var(
+      --#{$prefix}upload-draggable-border-radius,
       $upload-draggable-border-radius
     );
 
     &--hovered {
-      @include avariable(
-        "border-color",
-        "upload-draggable-hover-border-color",
+      border-color: var(
+        --#{$prefix}upload-draggable-hover-border-color,
         $upload-draggable-hover-border-color
       );
 
       @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);
         }
       }
     }

package/src/assets/scss/oruga-build.scss

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

package/src/assets/scss/oruga.scss

@@ -1,192 +1,41 @@
-/***************************************
-*   Oruga Default Theme Minimal Style
-****************************************/
+/******************
+*   Oruga Theme 
+*******************/
 
-// Define empty Maps
-$colors: () !default;
-$sizes: () !default;
-
-// Import Ourga Theme variables
-@import "utils/variables";
+// import globals, helpers and functions
+@import "utils/animations";
 @import "utils/helpers";
-
-// Button
-$whitelist: add-to-whitelist(
-  "button-background-color",
-  "button-color",
-  "button-disabled-opacity",
-  "button-outlined-background-color"
-);
-
-// Carousel
-$whitelist: add-to-whitelist(
-  "carousel-overlay-zindex",
-  "carousel-indicator-size",
-  "carousel-indicator-background",
-  "carousel-indicator-border",
-  "carousel-indicator-active-background",
-  "carousel-indicator-active-border",
-  "carousel-indicator-size",
-  "carousel-indicator-dots-border-radius",
-  "carousel-arrow-size",
-  "carousel-arrow-background",
-  "carousel-arrow-color",
-  "carousel-arrow-top",
-  "carousel-arrow-icon-spaced"
-);
-
-// Checkbox
-$whitelist: add-to-whitelist(
-  "checkbox-size",
-  "checkbox-active-background-color",
-  "checkbox-checkmark-color",
-  "checkbox-border-color",
-  "checkbox-disabled-opacity"
-);
-
-// Datepicker
-$whitelist: add-to-whitelist(
-  "datepicker-btn-border-color",
-  "datepicker-btn-color",
-  "datepicker-item-disabled-color",
-  "datepicker-item-hovered-background-color",
-  "datepicker-item-hovered-color",
-  "datepicker-item-selectable-color",
-  "datepicker-item-selected-background-color",
-  "datepicker-item-selected-color",
-  "datepicker-item-selected-within-background-color",
-  "datepicker-event-background-color"
-);
-
-// Dropdown
-$whitelist: add-to-whitelist(
-  "dropdown-disabled-opacity",
-  "dropdown-menu-background",
-  "dropdown-menu-zindex",
-  "dropdown-menu-spacer",
-  "dropdown-mobile-overlay-color",
-  "dropdown-mobile-overlay-zindex",
-  "dropdown-mobile-zindex",
-  "dropdown-item-active-background-color",
-  "dropdown-item-active-color",
-  "dropdown-item-disabled-opacity"
-);
-
-// Icon
-$whitelist: add-to-whitelist("icon-spin-duration");
-
-// Input
-$whitelist: add-to-whitelist();
-
-// Modal
-$whitelist: add-to-whitelist(
-  "modal-zindex",
-  "modal-content-background-color",
-  "modal-overlay-background-color",
-  "moda-close-size",
-  "modal-close-top",
-  "modal-close-right"
-);
-
-// Notification
-$whitelist: add-to-whitelist(
-  "notification-background-color",
-  "notification-color",
-  "notification-close-right",
-  "notification-close-top",
-  "notification-notices-padding",
-  "notification-notices-zindex"
-);
-
-// Pagination
-$whitelist: add-to-whitelist(
-  "pagination-link-current-background-color",
-  "pagination-link-current-border-color",
-  "pagination-link-current-color"
-);
-
-// Radio
-$whitelist: add-to-whitelist(
-  "radio-size",
-  "radio-active-background-color",
-  "radio-disabled-opacity"
-);
-
-// Select
-$whitelist: add-to-whitelist("select-arrow-size");
-
-// Sidebar
-$whitelist: add-to-whitelist(
-  "sidebar-zindex",
-  "sidebar-overlay",
-  "sidebar-content-background-color"
-);
-
-// Slider
-$whitelist: add-to-whitelist(
-  "slider-track-background",
-  "slider-tick-background",
-  "slider-fill-background",
-  "slider-thumb-size",
-  "slider-thumb-background",
-  "slider-thumb-border",
-  "slider-background",
-  "slider-tick-width",
-  "slider-track-height"
-);
-
-// Skeleton
-$whitelist: add-to-whitelist("skeleton-background", "skeleton-duration");
-
-// Steps
-$whitelist: add-to-whitelist(
-  "steps-marker-color",
-  "steps-marker-border",
-  "steps-marker-background",
-  "steps-previous-color",
-  "steps-active-color",
-  "steps-details-background-color"
-);
-
-// Switch
-$whitelist: add-to-whitelist(
-  "switch-width",
-  "switch-padding",
-  "switch-background",
-  "switch-action-background",
-  "switch-active-background-color",
-  "switch-disabled-opacity",
-  "switch-rounded-border-radius"
-);
-
-// Tabs
-$whitelist: add-to-whitelist(
-  "tabs-disabled-opacity",
-  "tabs-link-active-color",
-  "tabs-link-active-border-bottom-color",
-  "tabs-link-color"
-);
-
-// Taginput
-$whitelist: add-to-whitelist(
-  "taginput-border-style",
-  "taginput-border-color",
-  "taginput-border-width",
-  "taginput-color",
-  "taginput-item-color",
-  "taginput-item-background-color"
-);
-
-// Timepicker
-$whitelist: add-to-whitelist("timepicker-select-placeholder-opacity");
-
-// Tooltip
-$whitelist: add-to-whitelist(
-  "tooltip-arrow-size",
-  "tooltip-arrow-margin",
-  "tooltip-content-zindex",
-  "tooltip-background-color"
-);
-
-// Import Oruga Theme styles
-@import "./oruga-common";
+@import "utils/root";
+
+@import "utils/base";
+
+// import Oruga components
+@import "components/autocomplete";
+@import "components/button";
+@import "components/carousel";
+@import "components/checkbox";
+@import "components/collapse";
+@import "components/datepicker";
+@import "components/datetimepicker";
+@import "components/dropdown";
+@import "components/field";
+@import "components/icon";
+@import "components/input";
+@import "components/loading";
+@import "components/menu";
+@import "components/modal";
+@import "components/notification";
+@import "components/pagination";
+@import "components/radio";
+@import "components/select";
+@import "components/skeleton";
+@import "components/sidebar";
+@import "components/slider";
+@import "components/steps";
+@import "components/switch";
+@import "components/table";
+@import "components/tabs";
+@import "components/taginput";
+@import "components/timepicker";
+@import "components/tooltip";
+@import "components/upload";

package/src/assets/scss/utils/_animations.scss

@@ -111,7 +111,7 @@
 // Fade
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 }
 
 .fade-enter,
@@ -123,10 +123,10 @@
 // Zoom In
 .zoom-in-enter-active,
 .zoom-in-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 
   .animation-content {
-    transition: transform $speed-slow $easing;
+    transition: transform $animation-speed $animation-timing;
   }
 }
 
@@ -143,10 +143,10 @@
 // Zoom Out
 .zoom-out-enter-active,
 .zoom-out-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 
   .animation-content {
-    transition: transform $speed-slow $easing;
+    transition: transform $animation-speed $animation-timing;
   }
 }
 
@@ -165,7 +165,8 @@
 .slide-next-leave-active,
 .slide-prev-enter-active,
 .slide-prev-leave-active {
-  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition: transform $animation-speed-fast
+    cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-prev-leave-to,
@@ -188,7 +189,8 @@
 .slide-down-leave-active,
 .slide-up-enter-active,
 .slide-up-leave-active {
-  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition: transform $animation-speed-fast
+    cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-down-enter,
@@ -208,11 +210,11 @@
 }
 
 .slide-enter-active {
-  transition: $speed-slow $easing;
+  transition: $animation-speed $animation-timing;
 }
 
 .slide-leave-active {
-  transition: $speed-slow $easing;
+  transition: $animation-speed $animation-timing;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 

package/src/assets/scss/utils/_base.scss

@@ -12,10 +12,10 @@ body {
   margin: 0;
   padding: 0;
 
-  @include avariable("font-family", "base-font-family", $base-font-family);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("font-weight", "base-font-weight", $base-font-weight);
-  @include avariable("line-height", "base-line-height", $base-line-height);
+  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);
 }
 
 .o-noscroll {

package/src/assets/scss/utils/_helpers.scss

@@ -1,6 +1,10 @@
-@use "sass:list";
 @use "sass:string";
 @use "sass:math";
+@use "sass:color";
+
+/**********************************
+*   Utility mixins and functions
+***********************************/
 
 /// Replaces characters in a string
 ///
@@ -16,9 +20,9 @@
 
   @return if(
     $index,
-    str-slice($string, 1, $index - 1) + $replace +
+    string.slice($string, 1, $index - 1) + $replace +
       str-replace(
-        str-slice($string, $index + str-length($search)),
+        string.slice($string, $index + string.length($search)),
         $search,
         $replace
       ),
@@ -56,109 +60,6 @@
   @return "data:image/svg+xml,#{$encoded}";
 }
 
-/// Appends a list of variables to $whitelist and return a new whitelist.
-///
-/// @param {...} $variables
-///   Variables to whitelist
-/// @return {list} new whitelist.
-///
-/// Example (in components/_radio.scss)
-/// $whitelist: add-to-whitelist('radio-active-background-color','radio-focus-sibiling-box-shadow');
-@function add-to-whitelist($variables...) {
-  @return list.join($whitelist, $variables);
-}
-
-/// Checks if a variable is in $whitelist.
-///
-/// @param {string} $variable
-///   Variable to check if present in whitelist
-/// @return {boolean} true if $variable is in $whitelist, else false.
-@function is-in-whitelist($variable) {
-  @return list.index($whitelist, $variable) != null;
-}
-
-/// Checks if $whitelist is empty
-///
-/// @return {boolean} true if $whitelist is empty, else false.
-@function is-empty-whitelist() {
-  @return list.length($whitelist) == 0;
-}
-
-/// Returns a variable.
-///
-/// @param {string} $name
-///   Variable name
-/// @param {string} $value
-///   Variable value
-/// @param {string} $forceval
-///   By default is `false`, if `true` it allows to bypass whitelist and set the value
-/// @return {string} the variable or null if not in whitelist when $css-vars == false.
-@function variable($name, $value, $forceval: false) {
-  @if is-empty-whitelist() or is-in-whitelist($name) or $forceval {
-    @if $css-vars {
-      @return var(--#{$prefix}#{$name}, #{$value});
-    } @else {
-      @return #{$value};
-    }
-  }
-
-  @return null;
-}
-
-/// Returns a pair of `(key,value)` to pass to `evariable` function.
-///
-/// @param {string} $key
-///   Key of the parameter
-/// @param {string} $value
-///   Value of the parameter
-/// @return {list} list of two elements representing an `eparam` `(key, value)`.
-@function eparam($key, $value) {
-  @return $key, $value;
-}
-
-/// Assigns a specific expression to an attribute
-///
-/// @param {string} $attribute
-///   The attribute we want to include
-/// @param {string} $expression
-///   The body of the function we want to write (e.g. `calc($width/$height)`)
-/// @param {...} $parameters
-///   List of `eparam` to apply to the function
-@mixin evariable($attribute, $expression, $parameters...) {
-  $is_valid: true;
-
-  @each $parameter in $parameters {
-    @if not list.nth($parameter, 2) {
-      $is_valid: false;
-    }
-    @if str-slice(list.nth($parameter, 1), 0, 1) != "$" {
-      @error "Parameter #{list.nth($parameter, 1)} should start with $.";
-    }
-    $expression: str-replace(
-      $expression,
-      list.nth($parameter, 1),
-      list.nth($parameter, 2)
-    );
-  }
-  @if $is_valid {
-    #{$attribute}: #{$expression};
-  }
-}
-
-/// Assigns a specific variable to an attribute
-///
-/// @param {string} $attribute
-///   The attribute we want to include
-/// @param {string} $name
-///   Variable name
-/// @param {string} $value
-///   Variable value
-@mixin avariable($attribute, $name, $value) {
-  $variable: variable($name, $value);
-  @if $variable {
-    #{$attribute}: $variable;
-  }
-}
 @mixin unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -205,3 +106,8 @@
 
   @return ($quotient + $remainder) * $sign;
 }
+
+// create a focus color based on a given color
+@function createFocus($color) {
+  @return color.adjust($color, $alpha: -0.75);
+}

package/src/assets/scss/utils/_root.scss

@@ -1,32 +1,54 @@
 @use "sass:list";
+@use "sass:meta";
 
-:root {
-  @if $css-vars {
-    // generate color variables
-    @each $name, $color in $colors {
-      @if type-of($color) == list {
-        --#{$prefix}#{$name}: #{list.nth($color, 1)};
-        --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
-      } @else {
-        --#{$prefix}#{$name}: $color;
-      }
-    }
+@mixin root() {
+  $host-selector: if($enable-host, ":host", ":root");
 
-    --#{$prefix}white: #{$white};
-    --#{$prefix}black: #{$black};
-    --#{$prefix}grey: #{$grey};
-    --#{$prefix}grey-light: #{$grey-light};
-    --#{$prefix}grey-lighter: #{$grey-lighter};
-    --#{$prefix}grey-dark: #{$grey-dark};
+  #{$host-selector} {
+    @content;
+  }
+}
 
-    // generate size variables
-    @each $name, $size in $sizes {
-      --#{$prefix}size-#{$name}: #{$size};
+/*******************************
+*   Root variables extensions
+********************************/
+
+@include root() {
+  // 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;
     }
+  }
 
-    --#{$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};
+  // 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)};
+
+  // define size variables
+  @each $name, $size in $sizes {
+    --#{$prefix}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};
 }

package/src/assets/scss/utils/_variables.scss

@@ -3,15 +3,13 @@
 **********************/
 
 // Settings
-$whitelist: () !default;
-$css-vars: true !default;
 $prefix: "oruga-" !default;
+$enable-host: false !default;
 
 // Animations
-$speed: 300ms !default;
-$speed-slow: 150ms !default;
-$speed-slower: 250ms !default;
-$easing: ease-out !default;
+$animation-speed: 150ms !default;
+$animation-speed-fast: 300ms !default;
+$animation-timing: ease-out !default;
 
 // Font
 $base-font-family: 
@@ -38,7 +36,7 @@ $base-line-height: 1.5 !default;
 
 // Base Style
 $base-border-radius: 4px !default;
-$base-rounded-border-radius: 9999px !default;
+$base-border-radius-rounded: 9999px !default;
 $base-line-height: 1.5 !default;
 $base-disabled-opacity: 0.5 !default;
 
@@ -46,6 +44,7 @@ $control-border-width: 1px !default;
 $control-height: 2.25em !default;
 $control-padding-vertical: calc(0.375em - #{$control-border-width});
 $control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$control-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
 
 // Sizes
 $sizes: (