@ardium-ui/ui 3.1.1 → 3.2.0

package/themes/default/form-field-frame.scss

@@ -1,5 +1,5 @@
 @use './mixins' as defaultMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-form-field-frame {
   box-sizing: border-box;
@@ -44,14 +44,14 @@
   @include defaultMixins.formVariants();
   background: var(--ard-appearance-background);
   border: var(--ard-appearance-border);
-  transition: border-color 0.15s $timing-fn;
+  transition: border-color 0.15s ARD.$timing-fn;
 
   .ard-form-field-overlay {
-    background: $overlay;
+    background: ARD.$overlay;
     opacity: 0;
     transition:
-      opacity 0.15s $timing-fn,
-      background-color 0.15s $timing-fn;
+      opacity 0.15s ARD.$timing-fn,
+      background-color 0.15s ARD.$timing-fn;
   }
 
   &:hover {
@@ -63,7 +63,7 @@
     .ard-form-field-overlay {
       opacity: 6%;
     }
-    border-color: $border-dark;
+    border-color: ARD.$border-dark;
   }
 }
 .ard-disabled .ard-form-field-frame {

package/themes/default/inputs/_shared.scss

@@ -1,4 +1,4 @@
-@import '../../variables';
+@use '../../variables' as ARD;
 
 /**
  * Should be applied to the first element in the component's template.

package/themes/default/inputs/digit-input.scss

@@ -1,10 +1,10 @@
 @use '../coloring' as CM;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 ard-digit-input {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
-  color: $text;
+  color: ARD.$text;
 }
 
 .ard-digit-input,
@@ -26,7 +26,7 @@ ard-digit-input {
       width: 2.0625em;
       box-sizing: border-box;
       text-align: center;
-      caret-color: $text3;
+      caret-color: ARD.$text3;
 
       &:not(.ard-digit-input__input-empty) {
         caret-color: transparent;

package/themes/default/inputs/file-input.scss

@@ -2,7 +2,7 @@
 @use '../mixins' as defaultMixins;
 @use '../clear-button' as CB;
 @use '../coloring' as CM;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 .ard-file-input-form-field-frame {
   .ard-form-field-overlay {
@@ -50,7 +50,7 @@
 
     .ard-focus-overlay {
       @include defaultMixins.focus-overlay();
-      background: $overlay;
+      background: ARD.$overlay;
       border-radius: 9999px;
     }
     &:hover {

package/themes/default/inputs/hex-input.scss

@@ -1,7 +1,7 @@
 @use './shared' as inputMixin;
 @use '../mixins' as defaultMixins;
 @use '../clear-button' as CB;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 .ard-hex-input {
   @include inputMixin.genericInput();
@@ -19,7 +19,7 @@
 
   .ard-hash-container {
     margin-right: -0.5rem;
-    color: $text3;
+    color: ARD.$text3;
     opacity: 70%;
     user-select: none;
     font-family: monospace;

package/themes/default/inputs/input.scss

@@ -1,7 +1,7 @@
 @use './shared' as inputMixin;
 @use '../mixins' as defaultMixins;
 @use '../clear-button' as CB;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 .ard-input {
   @include inputMixin.genericInput();
@@ -20,16 +20,16 @@
   .ard-option {
     padding: 0.375rem 0.625rem;
     font-size: 1rem;
-    color: $text2;
+    color: ARD.$text2;
     cursor: pointer;
 
     &.ard-option-highlighted {
-      background: $darken-overlay-light;
+      background: ARD.$darken-overlay-light;
     }
 
     &.ard-option-selected {
       font-weight: 500;
-      background: $darken-overlay-medium;
+      background: ARD.$darken-overlay-medium;
     }
 
     &.ard-option-disabled {

package/themes/default/inputs/number-input.scss

@@ -1,6 +1,6 @@
 @use './shared' as inputMixin;
 @use '../mixins' as defaultMixins;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 .ard-number-input {
   @include inputMixin.genericInput();
@@ -24,7 +24,7 @@
       height: 100%;
       aspect-ratio: 1;
       padding: 0;
-      border-color: $border;
+      border-color: ARD.$border;
       display: flex;
       justify-content: center;
       margin: 0;
@@ -116,6 +116,6 @@
       opacity: 0;
     }
 
-    background: $bg-f;
+    background: ARD.$bg-f;
   }
 }

package/themes/default/inputs/password-input.scss

@@ -1,7 +1,7 @@
 @use './shared' as inputMixin;
 @use '../mixins' as defaultMixins;
 @use '../clear-button' as CB;
-@import '../../variables';
+@use '../../variables' as ARD;
 
 .ard-password-input {
   @include inputMixin.genericInput();
@@ -28,7 +28,7 @@
     outline: none;
     cursor: pointer;
 
-    transition: background-color 0.2s $timing-fn;
+    transition: background-color 0.2s ARD.$timing-fn;
 
     &:hover {
       background: rgba(0, 0, 0, 4%);

package/themes/default/kbd-shortcut.scss

@@ -1,8 +1,8 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-kbd-shortcut {
   font-family: monospace;
-  color: $text2;
+  color: ARD.$text2;
 
   > span {
     font-size: 0.9em;

package/themes/default/kbd.scss

@@ -1,20 +1,20 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-kbd {
   border-radius: 0.2em;
   font-family: monospace;
   font-size: 0.9em;
   margin: 0 0.125em;
-  color: $text2;
+  color: ARD.$text2;
 
   //! appearance
   &.ard-appearance-outlined,
   &.ard-appearance-filled {
-    border: 1px solid $detail-ultralight;
-    box-shadow: inset 0 -1px 0 $darken-overlay;
+    border: 1px solid ARD.$detail-ultralight;
+    box-shadow: inset 0 -1px 0 ARD.$darken-overlay;
     padding: 0.15em 0.35em;
   }
   &.ard-appearance-filled {
-    background: $bg-d;
+    background: ARD.$bg-d;
   }
 }

package/themes/default/modal.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-modal {
   position: fixed;
@@ -10,11 +10,11 @@
   place-items: center;
 
   &.ard-modal-backdrop {
-    background: $darken-overlay-strong;
+    background: ARD.$darken-overlay-strong;
   }
   .ard-modal-panel {
     padding: 1.25rem 3rem 1.5rem 3rem;
-    background: $bg;
+    background: ARD.$bg;
     max-width: calc(100vw - 4rem);
     position: relative;
     display: flex;
@@ -44,7 +44,7 @@
 
     .ard-modal-heading-text {
       font-size: 1.25rem;
-      color: $text;
+      color: ARD.$text;
       font-weight: 500;
       font-family: Roboto;
     }
@@ -57,7 +57,7 @@
   //! appearances
   &.ard-appearance-raised {
     .ard-modal-panel {
-      box-shadow: $simple-shadow2;
+      box-shadow: ARD.$simple-shadow2;
     }
   }
   //! variants

package/themes/default/progress-bar.scss

@@ -1,5 +1,5 @@
 @use './coloring' as CM;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-progress-bar {
   @include CM.typeColors();
@@ -47,7 +47,7 @@
   &.ard-progress-bar__mode-determinate,
   &.ard-progress-bar__mode-buffer {
     .ard-progress-bar__overlay {
-      transition: width 0.1s $timing-fn;
+      transition: width 0.1s ARD.$timing-fn;
     }
   }
   &.ard-progress-bar__mode-indeterminate,
@@ -100,7 +100,7 @@
       width: var(--ard-_progress-bar-buffer, 0);
       top: 0;
       bottom: 0;
-      transition: width 0.1s $timing-fn;
+      transition: width 0.1s ARD.$timing-fn;
     }
   }
 

package/themes/default/progress-circle.scss

@@ -1,5 +1,5 @@
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-progress-circle {
   @include coloringMixins.typeColors;
@@ -15,7 +15,7 @@
   }
   &.ard-appearance-colorless {
     .ard-progress-circle-background {
-      background: $darken-overlay-medium;
+      background: ARD.$darken-overlay-medium;
     }
   }
   &.ard-appearance-colored {

package/themes/default/radio.scss

@@ -1,6 +1,6 @@
 @use './coloring' as CM;
 @use './mixins' as GM;
-@import '../variables';
+@use '../variables' as ARD;
 
 ard-radio-group {
   display: flex;
@@ -34,9 +34,9 @@ ard-radio {
       right: 0;
       top: 0;
       bottom: 0;
-      border: 2px solid $detail;
+      border: 2px solid ARD.$detail;
       border-radius: 9999px;
-      transition: border-color 0.2s $timing-fn;
+      transition: border-color 0.2s ARD.$timing-fn;
     }
     > .ard-radio-inner-circle {
       position: absolute;
@@ -47,12 +47,12 @@ ard-radio {
       background: var(--ard-cmpcl--bg-colored);
       border-radius: 9999px;
       transform: scale(0);
-      transition: transform 0.2s $timing-fn;
+      transition: transform 0.2s ARD.$timing-fn;
     }
     > .ard-focus-overlay {
       @include GM.focus-overlay(0.375em);
       border-radius: 9999px;
-      background-color: $overlay;
+      background-color: ARD.$overlay;
 
       transition:
         opacity 0.2s ease,

package/themes/default/segment.scss

@@ -1,6 +1,6 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-segment-container {
   @include coloringMixins.typeColors();
@@ -42,10 +42,10 @@
       position: relative;
       cursor: pointer;
       transition:
-        color 0.1s $timing-fn,
-        opacity 0.1s $timing-fn,
-        border-color 0.1s $timing-fn,
-        background-color 0.1s $timing-fn;
+        color 0.1s ARD.$timing-fn,
+        opacity 0.1s ARD.$timing-fn,
+        border-color 0.1s ARD.$timing-fn,
+        background-color 0.1s ARD.$timing-fn;
       outline: none;
       display: flex;
       align-items: center;
@@ -123,11 +123,11 @@
   }
   &.ard-appearance-outlined,
   &.ard-appearance-outlined-strong {
-    background: $bg;
+    background: ARD.$bg;
     padding: 0;
 
     .ard-segment-option {
-      border: 1px solid $border-light;
+      border: 1px solid ARD.$border-light;
 
       &.ard-option-selected {
         border-color: var(--ard-cmpcl--content);

package/themes/default/select.scss

@@ -1,6 +1,6 @@
 @use './clear-button' as CB;
 @use './mixins' as defaultMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-select {
   box-sizing: border-box;
@@ -35,7 +35,7 @@
     .ard-placeholder {
       font: inherit;
       position: absolute;
-      color: $text3;
+      color: ARD.$text3;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -130,10 +130,10 @@
     cursor: pointer;
 
     .ard-dropdown-arrow {
-      border: calc($dropdown-button-size / 2) solid transparent;
+      border: calc(ARD.$dropdown-button-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%);
     }
   }
@@ -148,7 +148,7 @@
     padding-right: 0.625em;
 
     .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
-      border-width: calc($dropdown-button-size / 2.4);
+      border-width: calc(ARD.$dropdown-button-size / 2.4);
     }
   }
 }
@@ -184,16 +184,16 @@
 
   .ard-option {
     padding: 0.375em 0.625em;
-    color: $text2;
+    color: ARD.$text2;
     cursor: pointer;
 
     &.ard-option-highlighted {
-      background: $darken-overlay-light;
+      background: ARD.$darken-overlay-light;
     }
 
     &.ard-option-selected {
       font-weight: 500;
-      background: $darken-overlay-medium;
+      background: ARD.$darken-overlay-medium;
     }
 
     &.ard-option-disabled {
@@ -206,7 +206,7 @@
     width: calc(100% - 1.25em);
     margin: 0.375em 0.625em;
     border: none;
-    border-bottom: 1px solid $darken-overlay-strong;
+    border-bottom: 1px solid ARD.$darken-overlay-strong;
   }
 
   .ard-optgroup:first-child > hr.ard-divider {

package/themes/default/slide-toggle.scss

@@ -1,6 +1,6 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-slide-toggle {
   @include coloringMixins.typeColors();
@@ -27,7 +27,7 @@
     font-size: inherit;
     border-radius: 999px;
     overflow: hidden;
-    background: $bg;
+    background: ARD.$bg;
 
     .ard-slide-toggle-track-overlay {
       position: absolute;
@@ -35,7 +35,7 @@
       right: 0;
       bottom: 0;
       top: 0;
-      background: $overlay;
+      background: ARD.$overlay;
       opacity: 20%;
     }
   }
@@ -44,15 +44,15 @@
     height: 1.25em;
     font-size: inherit;
     border-radius: 999px;
-    background: $bg-f;
+    background: ARD.$bg-f;
     position: absolute;
     top: 0;
     left: 0;
-    box-shadow: $simple-shadow;
+    box-shadow: ARD.$simple-shadow;
     overflow: hidden;
 
     transition:
-      box-shadow 0.28s $timing-fn,
+      box-shadow 0.28s ARD.$timing-fn,
       left 0.1s ease,
       background-color 0.1s ease,
       transform 0.1s ease;
@@ -64,7 +64,7 @@
     .ard-slide-toggle-icon {
       @include defaultMixins.icon(0, 600);
       font-size: 0.95em;
-      color: $text;
+      color: ARD.$text;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -82,7 +82,7 @@
   &:hover,
   &:focus {
     .ard-slide-toggle-handle {
-      box-shadow: $simple-shadow2;
+      box-shadow: ARD.$simple-shadow2;
 
       .ard-focus-overlay {
         opacity: 4%;
@@ -91,7 +91,7 @@
   }
   &:active {
     .ard-slide-toggle-handle {
-      box-shadow: $simple-shadow3;
+      box-shadow: ARD.$simple-shadow3;
 
       .ard-focus-overlay {
         opacity: 12%;

package/themes/default/slider.scss

@@ -1,7 +1,7 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
 @use 'sass:math';
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-slider-container-master,
 .ard-range-slider-container-master {
@@ -39,7 +39,7 @@
   .ard-slider-track {
     width: 100%;
     height: 0.25em;
-    background: $bg;
+    background: ARD.$bg;
 
     .ard-slider-track-overlay {
       position: absolute;
@@ -74,7 +74,7 @@
       width: 0.125em;
       height: 0.125em;
       border-radius: 9999px;
-      background: $text;
+      background: ARD.$text;
       opacity: 30%;
       transform: translate(-50%, -50%);
     }
@@ -100,7 +100,7 @@
     transition:
       box-shadow 0.15s ease,
       left var(--_ard-slider-transition) ease;
-    box-shadow: $simple-shadow;
+    box-shadow: ARD.$simple-shadow;
 
     // cursor: grab;
     // &.ard-grabbed {
@@ -124,7 +124,7 @@
       }
     }
     &:focus {
-      box-shadow: $simple-shadow2;
+      box-shadow: ARD.$simple-shadow2;
       .ard-focus-overlay {
         opacity: 15%;
       }
@@ -153,9 +153,9 @@
     z-index: 2;
   }
   .ard-slider-tooltip {
-    --ard-background: #{$text3};
+    --ard-background: #{ARD.$text3};
     background: var(--ard-background);
-    color: $text2-alt;
+    color: ARD.$text2-alt;
     font-size: 0.875em;
     border-radius: 0.375em;
     height: 2em;
@@ -168,7 +168,7 @@
     user-select: none;
 
     transform: scale(0);
-    transition: transform 0.1s $timing-fn;
+    transition: transform 0.1s ARD.$timing-fn;
 
     &::before {
       content: '';

package/themes/default/snackbar.scss

@@ -1,5 +1,5 @@
 @use './coloring' as C;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-snackbar {
   @include C.typeColors();
@@ -14,7 +14,7 @@
   gap: 0.625rem;
   border-radius: 6px;
   transform-origin: bottom center;
-  background-color: $bg-f-alt;
+  background-color: ARD.$bg-f-alt;
   padding: 0 0.5rem 0 1rem;
 
   opacity: 100%;
@@ -27,7 +27,7 @@
     gap: 0.625rem;
     align-items: center;
     flex-grow: 1;
-    color: $text2-alt;
+    color: ARD.$text2-alt;
 
     ard-icon {
       color: var(--ard-cmpcl--content-light);

package/themes/default/stars.scss

@@ -1,6 +1,6 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-star,
 .ard-star-button,
@@ -10,7 +10,7 @@
   color: var(--ard-cmpcl--bg-colored);
 
   &.ard-color-star {
-    color: $star;
+    color: ARD.$star;
   }
 }
 .ard-star {

package/themes/default/statebox.scss

@@ -1,6 +1,6 @@
 @use './mixins' as defaultMixins;
 @use './coloring' as coloringMixins;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-statebox {
   @include coloringMixins.typeColors();
@@ -35,7 +35,7 @@
   .ard-statebox-icon,
   .ard-statebox-frame::after {
     @include defaultMixins.icon;
-    transition: opacity 0.2s $timing-fn;
+    transition: opacity 0.2s ARD.$timing-fn;
     color: currentColor;
     position: absolute;
     left: 50%;

package/themes/default/tabber.scss

@@ -1,6 +1,6 @@
 @use './coloring' as CM;
 @use './mixins' as M;
-@import '../variables';
+@use '../variables' as ARD;
 
 ard-tabber {
   max-width: 100%;
@@ -19,7 +19,7 @@ ard-tabber {
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid $detail-ultralight;
+    border-bottom: 1px solid ARD.$detail-ultralight;
 
     &.ard-tab-align-left {
       justify-content: left;
@@ -52,7 +52,7 @@ ard-tabber {
 
       .ard-focus-overlay {
         @include M.focus-overlay();
-        background: $bg-alt;
+        background: ARD.$bg-alt;
       }
 
       &:hover,