@ardium-ui/ui 3.1.1 → 3.2.0

package/themes/default/_coloring.scss

@@ -1,136 +1,136 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 @mixin typeColors($prefix: 'cmpcl') {
   &.ard-color-none {
-    --ard-#{$prefix}--bg: #{$bg};
-    --ard-#{$prefix}--bg-colored: #{$bg-alt};
-    --ard-#{$prefix}--bg-colored-light: #{$detail-light};
-    --ard-#{$prefix}--bg-header: #{$bg-f};
-    --ard-#{$prefix}--bg-colored-verylight: #{$bg-d};
-    --ard-#{$prefix}--on-bg: #{$text};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$text};
-    --ard-#{$prefix}--border-light: #{$text2};
-    --ard-#{$prefix}--content: #{$text};
-    --ard-#{$prefix}--content-light: #{$text-alt};
-    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$overlay};
-    --ard-#{$prefix}--overlay-colored-light: #{$text-alt};
+    --ard-#{$prefix}--bg: #{ARD.$bg};
+    --ard-#{$prefix}--bg-colored: #{ARD.$bg-alt};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$detail-light};
+    --ard-#{$prefix}--bg-header: #{ARD.$bg-f};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$bg-d};
+    --ard-#{$prefix}--on-bg: #{ARD.$text};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$text};
+    --ard-#{$prefix}--border-light: #{ARD.$text2};
+    --ard-#{$prefix}--content: #{ARD.$text};
+    --ard-#{$prefix}--content-light: #{ARD.$text-alt};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$text-alt};
   }
   &.ard-color-primary {
-    --ard-#{$prefix}--bg: #{$main500};
-    --ard-#{$prefix}--bg-colored: #{$main500};
-    --ard-#{$prefix}--bg-colored-light: #{$main100};
-    --ard-#{$prefix}--bg-header: #{$main100};
-    --ard-#{$prefix}--bg-colored-verylight: #{$main50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$main300};
-    --ard-#{$prefix}--border-light: #{$main100};
-    --ard-#{$prefix}--content: #{$main700};
-    --ard-#{$prefix}--content-light: #{$main300};
-    --ard-#{$prefix}--overlay-rgb: #{$main500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$main700};
-    --ard-#{$prefix}--overlay-colored-light: #{$main100};
+    --ard-#{$prefix}--bg: #{ARD.$main500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$main500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$main100};
+    --ard-#{$prefix}--bg-header: #{ARD.$main100};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$main50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$main300};
+    --ard-#{$prefix}--border-light: #{ARD.$main100};
+    --ard-#{$prefix}--content: #{ARD.$main700};
+    --ard-#{$prefix}--content-light: #{ARD.$main300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$main500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$main700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$main100};
   }
   &.ard-color-secondary {
-    --ard-#{$prefix}--bg: #{$scnd500};
-    --ard-#{$prefix}--bg-colored: #{$scnd500};
-    --ard-#{$prefix}--bg-colored-light: #{$scnd50};
-    --ard-#{$prefix}--bg-header: #{$scnd50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$scnd50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$scnd300};
-    --ard-#{$prefix}--border-light: #{$scnd100};
-    --ard-#{$prefix}--content: #{$scnd700};
-    --ard-#{$prefix}--content-light: #{$scnd300};
-    --ard-#{$prefix}--overlay-rgb: #{$scnd500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$scnd700};
-    --ard-#{$prefix}--overlay-colored-light: #{$scnd100};
+    --ard-#{$prefix}--bg: #{ARD.$scnd500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$scnd500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$scnd50};
+    --ard-#{$prefix}--bg-header: #{ARD.$scnd50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$scnd50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$scnd300};
+    --ard-#{$prefix}--border-light: #{ARD.$scnd100};
+    --ard-#{$prefix}--content: #{ARD.$scnd700};
+    --ard-#{$prefix}--content-light: #{ARD.$scnd300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$scnd500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$scnd700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$scnd100};
   }
   &.ard-color-warn {
-    --ard-#{$prefix}--bg: #{$warn500};
-    --ard-#{$prefix}--bg-colored: #{$warn500};
-    --ard-#{$prefix}--bg-colored-light: #{$warn50};
-    --ard-#{$prefix}--bg-header: #{$warn50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$warn50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$warn300};
-    --ard-#{$prefix}--border-light: #{$warn100};
-    --ard-#{$prefix}--content: #{$warn700};
-    --ard-#{$prefix}--content-light: #{$warn100};
-    --ard-#{$prefix}--overlay-rgb: #{$warn500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$warn700};
-    --ard-#{$prefix}--overlay-colored-light: #{$warn100};
+    --ard-#{$prefix}--bg: #{ARD.$warn500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$warn500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$warn50};
+    --ard-#{$prefix}--bg-header: #{ARD.$warn50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$warn50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$warn300};
+    --ard-#{$prefix}--border-light: #{ARD.$warn100};
+    --ard-#{$prefix}--content: #{ARD.$warn700};
+    --ard-#{$prefix}--content-light: #{ARD.$warn100};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$warn500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$warn700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$warn100};
   }
   &.ard-color-danger {
-    --ard-#{$prefix}--bg: #{$danger700};
-    --ard-#{$prefix}--bg-colored: #{$danger700};
-    --ard-#{$prefix}--bg-colored-light: #{$danger100};
-    --ard-#{$prefix}--bg-header: #{$danger100};
-    --ard-#{$prefix}--bg-colored-verylight: #{$danger50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$danger300};
-    --ard-#{$prefix}--border-light: #{$danger100};
-    --ard-#{$prefix}--content: #{$danger900};
-    --ard-#{$prefix}--content-light: #{$danger500};
-    --ard-#{$prefix}--overlay-rgb: #{$danger700-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$danger700};
-    --ard-#{$prefix}--overlay-colored-light: #{$danger300};
+    --ard-#{$prefix}--bg: #{ARD.$danger700};
+    --ard-#{$prefix}--bg-colored: #{ARD.$danger700};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$danger100};
+    --ard-#{$prefix}--bg-header: #{ARD.$danger100};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$danger50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$danger300};
+    --ard-#{$prefix}--border-light: #{ARD.$danger100};
+    --ard-#{$prefix}--content: #{ARD.$danger900};
+    --ard-#{$prefix}--content-light: #{ARD.$danger500};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$danger700-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$danger700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$danger300};
   }
   &.ard-color-success {
-    --ard-#{$prefix}--bg: #{$success700};
-    --ard-#{$prefix}--bg-colored: #{$success700};
-    --ard-#{$prefix}--bg-colored-light: #{$success50};
-    --ard-#{$prefix}--bg-header: #{$success50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$success50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$success300};
-    --ard-#{$prefix}--border-light: #{$success100};
-    --ard-#{$prefix}--content: #{$success900};
-    --ard-#{$prefix}--content-light: #{$success300};
-    --ard-#{$prefix}--overlay-rgb: #{$success700-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$success700};
-    --ard-#{$prefix}--overlay-colored-light: #{$success300};
+    --ard-#{$prefix}--bg: #{ARD.$success700};
+    --ard-#{$prefix}--bg-colored: #{ARD.$success700};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$success50};
+    --ard-#{$prefix}--bg-header: #{ARD.$success50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$success50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$success300};
+    --ard-#{$prefix}--border-light: #{ARD.$success100};
+    --ard-#{$prefix}--content: #{ARD.$success900};
+    --ard-#{$prefix}--content-light: #{ARD.$success300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$success700-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$success700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$success300};
   }
   &.ard-color-info {
-    --ard-#{$prefix}--bg: #{$info500};
-    --ard-#{$prefix}--bg-colored: #{$info500};
-    --ard-#{$prefix}--bg-colored-light: #{$info50};
-    --ard-#{$prefix}--bg-header: #{$info50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$info50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$info300};
-    --ard-#{$prefix}--border-light: #{$info100};
-    --ard-#{$prefix}--content: #{$info700};
-    --ard-#{$prefix}--content-light: #{$info300};
-    --ard-#{$prefix}--overlay-rgb: #{$info500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$info700};
-    --ard-#{$prefix}--overlay-colored-light: #{$info100};
+    --ard-#{$prefix}--bg: #{ARD.$info500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$info500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$info50};
+    --ard-#{$prefix}--bg-header: #{ARD.$info50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$info50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: #{ARD.$info300};
+    --ard-#{$prefix}--border-light: #{ARD.$info100};
+    --ard-#{$prefix}--content: #{ARD.$info700};
+    --ard-#{$prefix}--content-light: #{ARD.$info300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$info500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$info700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$info100};
   }
   &.ard-color-currentColor {
-    --ard-#{$prefix}--bg: #{$bg};
+    --ard-#{$prefix}--bg: #{ARD.$bg};
     --ard-#{$prefix}--bg-colored: currentColor;
     --ard-#{$prefix}--on-bg: currentColor;
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
     --ard-#{$prefix}--border: currentColor;
     --ard-#{$prefix}--border-light: currentColor;
     --ard-#{$prefix}--content: currentColor;
     --ard-#{$prefix}--content-light: currentColor;
-    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
     --ard-#{$prefix}--overlay-colored: currentColor;
     --ard-#{$prefix}--overlay-colored-light: currentColor;
   }

package/themes/default/_dropdown-arrow.scss

@@ -1,12 +1,12 @@
-@import '../variables';
+@use '../variables' as ARD;
 
-@mixin dropdown-arrow($size: $dropdown-button-size) {
+@mixin dropdown-arrow($size: ARD.$dropdown-button-size) {
   width: $size;
   height: $size;
   border: calc($size / 2) solid transparent;
   position: relative;
-  border-bottom-color: $detail;
-  border-right-color: $detail;
+  border-bottom-color: ARD.$detail;
+  border-right-color: ARD.$detail;
   transform: rotate(45deg) translate(-17.67771%, -17.67771%);
   box-sizing: border-box;
 }

package/themes/default/_mixins.scss

@@ -1,13 +1,9 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 @mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
   font-family: 'Material Symbols Outlined';
   font-size: 1.5em;
-  font-variation-settings:
-    'FILL' #{$fill},
-    'wght' #{$wght},
-    'GRAD' #{$grad},
-    'opsz' #{$opsz};
+  font-variation-settings: 'FILL' #{$fill}, 'wght' #{$wght}, 'GRAD' #{$grad}, 'opsz' #{$opsz};
 }
 
 @mixin focus-overlay($size: 0) {
@@ -26,9 +22,7 @@
   > .ard-focus-overlay {
     transform: scale(0.2);
 
-    transition:
-      opacity 0.2s ease,
-      transform 0.1s ease;
+    transition: opacity 0.2s ease, transform 0.1s ease;
   }
 
   &:hover,
@@ -41,11 +35,11 @@
 
 @mixin formAppearances() {
   &.ard-appearance-outlined {
-    --ard-appearance-background: #{$bg};
-    --ard-appearance-border: 1px solid #{$border};
+    --ard-appearance-background: #{ARD.$bg};
+    --ard-appearance-border: 1px solid #{ARD.$border};
   }
   &.ard-appearance-filled {
-    --ard-appearance-background: #{$bg-f};
+    --ard-appearance-background: #{ARD.$bg-f};
     --ard-appearance-border: none;
   }
   &.ard-appearance-transparent {

package/themes/default/buttons/_button-mixins.scss

@@ -1,6 +1,6 @@
 @use '../mixins' as defaultMixins;
 @use '../coloring' as coloringMixins;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 @mixin button {
   @include coloringMixins.typeColors();
@@ -63,38 +63,36 @@
   }
   &.ard-appearance-raised,
   &.ard-appearance-raised-strong {
-    transition: box-shadow 0.28s $timing-fn;
-    box-shadow: $simple-shadow;
+    transition: box-shadow 0.28s ARD.$timing-fn;
+    box-shadow: ARD.$simple-shadow;
 
     &:hover,
     &:focus {
-      box-shadow: $simple-shadow2;
+      box-shadow: ARD.$simple-shadow2;
     }
     &:active {
-      box-shadow: $simple-shadow3;
+      box-shadow: ARD.$simple-shadow3;
     }
   }
   &.ard-appearance-outlined {
-    background: $bg;
+    background: ARD.$bg;
     color: var(--ard-cmpcl--content);
-    border: 1px solid $border-light;
+    border: 1px solid ARD.$border-light;
 
     .ard-focus-overlay {
       background: var(--ard-cmpcl--overlay-colored);
     }
   }
   &.ard-appearance-outlined-strong {
-    background: $bg;
+    background: ARD.$bg;
     color: var(--ard-cmpcl--content);
-    border: 1px solid $border-light;
+    border: 1px solid ARD.$border-light;
 
     .ard-focus-overlay {
       display: none;
     }
 
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease;
     &:hover,
     &:focus,
     &:focus-visible {

package/themes/default/calendar.scss

@@ -1,12 +1,12 @@
 @use './dropdown-arrow.scss' as DA;
 @use './mixins.scss' as DM;
 @use './coloring.scss' as CM;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-calendar {
   @include CM.typeColors();
   width: 18.5rem;
-  background: $bg;
+  background: ARD.$bg;
   user-select: none;
 
   .ard-calendar-header-container {
@@ -76,7 +76,7 @@
     }
     &.ard-calendar-today {
       .ard-calendar-entry-button {
-        border-color: $detail;
+        border-color: ARD.$detail;
       }
     }
     &.ard-calendar-entry-highlighted {
@@ -94,7 +94,7 @@
 
       &.ard-calendar-today {
         .ard-focus-overlay {
-          border-color: $bg;
+          border-color: ARD.$bg;
         }
       }
     }
@@ -112,7 +112,7 @@
   }
   .ard-calendar-day-labels {
     font-size: 0.8125rem;
-    color: $text3;
+    color: ARD.$text3;
     height: 1.25rem;
     position: relative;
 
@@ -127,7 +127,7 @@
       position: absolute;
       width: 100%;
       height: 1px;
-      background: $detail-ultralight;
+      background: ARD.$detail-ultralight;
       bottom: 0;
     }
   }
@@ -135,7 +135,7 @@
     position: relative;
 
     &.ard-reserve-top-row {
-      padding-top: 14.285714%;
+      padding-top: 100% / 7;
     }
     .ard-calendar-floating-month {
       position: absolute;
@@ -149,13 +149,13 @@
       align-items: center;
       font-size: 0.875rem;
       font-weight: 500;
-      color: $text3;
+      color: ARD.$text3;
       letter-spacing: 0.5px;
     }
   }
   //! years & months view
   .ard-calendar-simple-grid {
-    border-top: 1px solid $detail-ultralight;
+    border-top: 1px solid ARD.$detail-ultralight;
     margin-top: 0.25rem;
     display: grid;
     grid-template-columns: repeat(4, 1fr);

package/themes/default/card.scss

@@ -1,9 +1,9 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 ard-card,
 .ard-card {
   position: relative;
-  background: $bg;
+  background: ARD.$bg;
   box-sizing: border-box;
   width: 100%;
   height: max-content;
@@ -11,10 +11,10 @@ ard-card,
 
   //! appearances
   &.ard-appearance-outlined {
-    border: 1px solid $border-light;
+    border: 1px solid ARD.$border-light;
   }
   &.ard-appearance-raised {
-    box-shadow: $card-shadow;
+    box-shadow: ARD.$card-shadow;
   }
   //! variants
   &.ard-variant-sharp {
@@ -52,12 +52,12 @@ ard-card-header {
 .ard-card-title {
   font-size: 1.375em;
   letter-spacing: 0.0125em;
-  color: $text;
+  color: ARD.$text;
 }
 .ard-card-subtitle {
   font-size: 1em;
   letter-spacing: 0.0078125em;
-  color: $text3;
+  color: ARD.$text3;
   margin-top: 0.125rem;
 }
 .ard-card-avatar {

package/themes/default/checkbox-list.scss

@@ -1,5 +1,5 @@
 @use './mixins' as CM;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-checkbox-list {
   display: flex;
@@ -20,7 +20,7 @@
     }
     > .ard-focus-overlay {
       @include CM.focus-overlay();
-      background: $overlay;
+      background: ARD.$overlay;
     }
     &.ard-item-highlighted {
       > .ard-focus-overlay {

package/themes/default/checkbox.scss

@@ -1,6 +1,6 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-checkbox {
   @include coloringMixins.typeColors();
@@ -17,7 +17,7 @@
   background: none;
   padding: 0;
   outline: none;
-  color: $text2;
+  color: ARD.$text2;
 
   &.ard-color-currentColor {
     color: currentColor;
@@ -43,7 +43,7 @@
     height: 1.8em; //the height of the icon
     display: none;
     opacity: 80%;
-    transition: opacity 0.2s $timing-fn;
+    transition: opacity 0.2s ARD.$timing-fn;
 
     &::after {
       @include defaultMixins.icon(0, 600);

package/themes/default/chips.scss

@@ -1,7 +1,7 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
 @use './clear-button' as clearButton;
-@import '../variables';
+@use '../variables' as ARD;
 
 //! general css
 .ard-chip-wrapper {
@@ -10,8 +10,8 @@
   @include defaultMixins.formVariants();
 
   font-family: 'Roboto', sans-serif;
-  color: $text2;
-  background: $bg;
+  color: ARD.$text2;
+  background: ARD.$bg;
   border-radius: var(--ard-variant-border-radius);
   padding: 0;
   margin: 6px;
@@ -30,7 +30,7 @@
   }
   > .ard-focus-overlay {
     @include defaultMixins.focus-overlay;
-    background: $overlay;
+    background: ARD.$overlay;
     border-radius: 0;
   }
 
@@ -66,8 +66,8 @@
     border: none;
 
     &.ard-chip-selectable {
-      background-color: $bg-f;
-      color: $text2;
+      background-color: ARD.$bg-f;
+      color: ARD.$text2;
       transition:
         color 0.15s ease,
         border-color 0.15s ease,

package/themes/default/color-display.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-color-display-wrapper {
   gap: 0.3ch;
@@ -35,7 +35,7 @@
   }
   &.ard-with-border {
     .ard-color-display {
-      border-color: $text;
+      border-color: ARD.$text;
     }
   }
 }

package/themes/default/color-picker.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-color-picker {
   width: 15rem;
@@ -14,10 +14,10 @@
     .ard-color-picker-shade-map,
     .ard-color-picker-hue-map,
     .ard-color-picker-opacity-map {
-      border: 1px solid $detail-ultralight-solid;
+      border: 1px solid ARD.$detail-ultralight-solid;
 
       &:focus-visible {
-        outline: 2px solid $overlay;
+        outline: 2px solid ARD.$overlay;
         outline-offset: 1px;
       }
     }
@@ -30,7 +30,7 @@
       width: 1rem;
     }
     .ard-color-picker-opacity-map {
-      --ard-color-picker-opacity-checkerboard-color: #{$detail-ultralight-solid};
+      --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
       --ard-color-picker-opacity-checkerboard-size: 0.5rem;
     }
     .ard-color-picker-shade-indicator {
@@ -94,14 +94,14 @@
       }
     }
     .ard-color-picker-reference {
-      --ard-color-picker-opacity-checkerboard-color: #{$detail-ultralight-solid};
+      --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
       --ard-color-picker-opacity-checkerboard-size: 0.5rem;
 
       display: grid;
       grid-template-columns: 1fr 1fr;
       width: 4rem;
       height: 100%;
-      border: 1px solid $detail-ultralight-solid;
+      border: 1px solid ARD.$detail-ultralight-solid;
       box-sizing: border-box;
     }
   }

package/themes/default/divider.scss

@@ -1,13 +1,13 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 ard-divider {
   margin: 0;
 
   &:not(.ard-divider-vertical) {
-    border-top: 1px solid $detail-ultralight;
+    border-top: 1px solid ARD.$detail-ultralight;
   }
 
   &.ard-divider-vertical {
-    border-left: 1px solid $detail-ultralight;
+    border-left: 1px solid ARD.$detail-ultralight;
   }
 }

package/themes/default/dropdown-panel.scss

@@ -1,11 +1,11 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 ard-dropdown-panel {
   width: 100%;
 }
 .ard-dropdown-panel-container {
   position: relative;
-  background: $bg;
+  background: ARD.$bg;
   margin: 0.375rem 0;
   z-index: 5;
   width: 100%;
@@ -22,10 +22,10 @@ ard-dropdown-panel {
 
   //! appearances
   &.ard-appearance-outlined {
-    border: 1px solid $border;
+    border: 1px solid ARD.$border;
   }
   &.ard-appearance-raised {
-    box-shadow: $box-shadow;
+    box-shadow: ARD.$box-shadow;
   }
 
   //! connected