@ardium-ui/ui 3.1.3-0 → 3.2.1

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,

package/themes/default/table.scss

@@ -1,13 +1,13 @@
 @use './coloring' as CM;
-@import '../variables';
+@use '../variables' as ARD;
 
 .ard-table {
   @include CM.typeColors();
   border-collapse: collapse;
-  background: $bg;
+  background: ARD.$bg;
 
   .ard-table__body {
-    border: 1px solid $detail-ultralight;
+    border: 1px solid ARD.$detail-ultralight;
   }
   .ard-table__header-cell,
   .ard-table__body-cell {
@@ -58,7 +58,7 @@
     }
   }
   .ard-table__body-row .ard-table__body-cell {
-    border-bottom: 1px solid $detail-ultralight;
+    border-bottom: 1px solid ARD.$detail-ultralight;
   }
 
   //! empty rows
@@ -85,10 +85,10 @@
     }
   }
   .ard-table__progress-bar-row {
-    background-color: $bg;
-    border-left: 1px solid $detail-ultralight;
-    border-right: 1px solid $detail-ultralight;
-    border-bottom: 1px solid $bg;
+    background-color: ARD.$bg;
+    border-left: 1px solid ARD.$detail-ultralight;
+    border-right: 1px solid ARD.$detail-ultralight;
+    border-bottom: 1px solid ARD.$bg;
 
     .ard-table__progress-bar-cell {
       height: 0.1875rem;
@@ -140,9 +140,9 @@
     caption-side: bottom;
     height: 3.125rem;
     box-sizing: border-box;
-    color: $detail;
-    background: $bg;
-    border: 1px solid $detail-ultralight;
+    color: ARD.$detail;
+    background: ARD.$bg;
+    border: 1px solid ARD.$detail-ultralight;
     border-top: none;
     padding: 0 0.75rem;
 
@@ -156,14 +156,14 @@
   //! footer
   .ard-table__foot {
     .ard-table__pagination-cell {
-      border: 1px solid $detail-ultralight;
+      border: 1px solid ARD.$detail-ultralight;
     }
   }
 
   //! color
   --ard-_table-header-border: var(--ard-cmpcl--border);
   --ard-_table-header-border-light: var(--ard-cmpcl--border-light);
-  --ard-_table-border: $border;
+  --ard-_table-border: ARD.$border;
   --ard-_table-header-background: var(--ard-cmpcl--bg);
   --ard-_table-header-background-light: var(--ard-cmpcl--bg-header);
   --ard-_table-header-color: var(--ard-cmpcl--content);
@@ -174,7 +174,7 @@
   //! appearances
   &.ard-appearance-strong {
     .ard-table__header {
-      border-bottom: 1px solid $detail-ultralight;
+      border-bottom: 1px solid ARD.$detail-ultralight;
       background-color: var(--ard-_table-header-background);
     }
     .ard-table__header-cell {
@@ -196,14 +196,14 @@
   }
   &.ard-appearance-colorless {
     .ard-table__header-cell {
-      color: $text;
+      color: ARD.$text;
     }
     .ard-table__header {
-      border: 1px solid $detail-ultralight;
-      background-color: $bg;
+      border: 1px solid ARD.$detail-ultralight;
+      background-color: ARD.$bg;
     }
     .ard-table__header-row .ard-table__header-cell {
-      border-bottom: 1px solid $detail-ultralight;
+      border-bottom: 1px solid ARD.$detail-ultralight;
     }
   }
   //! variants
@@ -293,7 +293,7 @@
   //! zebra
   &.ard-zebra-table {
     .ard-table__body-row:nth-of-type(2n-1) {
-      background: $darken-overlay-ultralight;
+      background: ARD.$darken-overlay-ultralight;
     }
   }