@ardium-ui/ui 3.1.3-0 → 3.2.1

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/core.scss

@@ -1,3 +1,5 @@
+@use '../variables';
+
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
 
@@ -95,5 +97,3 @@
 .ard-disabled {
   pointer-events: none;
 }
-
-@import '../variables';

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

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