@ardium-ui/ui 5.0.0-alpha.77 → 5.0.0-alpha.78

package/themes/default/chips.scss

@@ -3,7 +3,7 @@
 @use './clear-button' as clearButton;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -111,24 +111,24 @@
           background-color var(--ard-chip-transition, 0.15s ease);
 
         &.ard-chip-selected {
-          color: var(--ard-cmpcl--on-bg-colored);
-          background: var(--ard-cmpcl--bg-colored);
+          color: var(--ard-uicl--on-bg-colored);
+          background: var(--ard-uicl--bg-colored);
         }
       }
     }
     &.ard-appearance-filled {
-      background: var(--ard-cmpcl--bg-colored-light);
-      color: var(--ard-cmpcl--on-bg-colored-light);
+      background: var(--ard-uicl--bg-colored-light);
+      color: var(--ard-uicl--on-bg-colored-light);
     }
     &.ard-appearance-filled-strong {
-      background: var(--ard-cmpcl--bg-colored);
-      color: var(--ard-cmpcl--on-bg-colored);
+      background: var(--ard-uicl--bg-colored);
+      color: var(--ard-uicl--on-bg-colored);
     }
     &.ard-appearance-outlined,
     &.ard-appearance-outlined-strong {
       background: transparent;
-      color: var(--ard-cmpcl--content);
-      border: 1px solid var(--ard-cmpcl--bg-colored);
+      color: var(--ard-uicl--content);
+      border: 1px solid var(--ard-uicl--bg-colored);
       border-radius: var(--ard-variant-border-radius);
       font-weight: 600;
 
@@ -139,7 +139,7 @@
 
         > .ard-focus-overlay {
           opacity: 0;
-          background: var(--ard-cmpcl--bg-colored);
+          background: var(--ard-uicl--bg-colored);
         }
         &:hover,
         &:focus {
@@ -154,8 +154,8 @@
         }
 
         &.ard-chip-selected {
-          color: var(--ard-cmpcl--content);
-          border-color: var(--ard-cmpcl--content);
+          color: var(--ard-uicl--content);
+          border-color: var(--ard-uicl--content);
 
           > .ard-focus-overlay {
             opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
@@ -186,7 +186,7 @@
     &.ard-appearance-outlined-strong {
       > .ard-focus-overlay {
         opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
-        background: var(--ard-cmpcl--bg-colored);
+        background: var(--ard-uicl--bg-colored);
       }
       &.ard-chip-selectable {
         color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));

package/themes/default/color-display.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/color-picker.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   .ard-color-picker {
     width: 15rem;
     padding: 0.5rem;

package/themes/default/core.scss

@@ -3,7 +3,7 @@
 @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');
 
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-bg: white;
     --ard-bg-alt: black;

package/themes/default/dialog.scss

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/divider.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/dropdown-panel.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/file-drop-area.scss

@@ -1,6 +1,6 @@
 @use './coloring' as CM;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -65,7 +65,7 @@
     min-height: var(--ard-file-drop-area-min-height, 10rem);
     padding: var(--ard-file-drop-area-padding, 0.625rem);
     box-sizing: border-box;
-    background: var(--ard-cmpcl--bg-colored-verylight);
+    background: var(--ard-uicl--bg-colored-verylight);
     display: flex;
 
     .ard-file-drop-area-outline {
@@ -73,7 +73,7 @@
       min-height: 100%;
       box-sizing: border-box;
       border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed)
-        var(--ard-cmpcl--border);
+        var(--ard-uicl--border);
       padding: var(--ard-file-drop-area-outline-padding, 0.375rem);
       pointer-events: none;
 
@@ -111,7 +111,7 @@
       font-size: var(--ard-file-drop-area-or-text-font-size, 95%);
     }
     .ard-file-drop-area-browse-button > button {
-      border: 1px solid var(--ard-cmpcl--border);
+      border: 1px solid var(--ard-uicl--border);
       pointer-events: all;
     }
     //dragover

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

@@ -1,7 +1,7 @@
 @use './mixins' as defaultMixins;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   .ard-form-field-frame {
     box-sizing: border-box;
     min-height: ARD.$form-field-height;

package/themes/default/form-field.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -3,7 +3,7 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -2,7 +2,7 @@
 @use '../mixins' as defaultMixins;
 @use '../clear-button' as CB;
 
-@layer ard-theme {
+@layer ard-ui {
   .ard-color-input {
     // @include inputMixin.genericInput();
     padding: 0 0.375rem;

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

@@ -1,7 +1,7 @@
 @use './shared' as S;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -2,7 +2,7 @@
 @use '../../variables' as ARD;
 @use '../mixins' as defaultMixins;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -4,7 +4,7 @@
 @use '../coloring' as CM;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -94,7 +94,7 @@
 
     &.ard-state-dragover {
       outline: var(--ard-file-input-dragover-outline-width, 2px) var(--ard-file-input-dragover-outline-style, solid)
-        var(--ard-cmpcl--content-light);
+        var(--ard-uicl--content-light);
     }
 
     .ard-file-input__value {

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

@@ -3,7 +3,7 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/inputs/input.scss

@@ -3,7 +3,7 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -2,7 +2,7 @@
 @use '../mixins' as defaultMixins;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

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

@@ -3,7 +3,7 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/kbd-shortcut.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/kbd.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/modal.scss

@@ -1,6 +1,6 @@
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/progress-bar.scss

@@ -1,7 +1,7 @@
 @use './coloring' as CM;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -30,13 +30,13 @@
     .ard-progress-bar__background,
     .ard-progress-bar__overlay {
       position: absolute;
-      background-color: var(--ard-progress-bar-foreground-color, var(--ard-cmpcl--bg-colored));
+      background-color: var(--ard-progress-bar-foreground-color, var(--ard-uicl--bg-colored));
       top: 0;
       bottom: 0;
       left: 0;
     }
     .ard-progress-bar__background {
-      background-color: var(--ard-progress-bar-background-color, var(--ard-cmpcl--bg-colored-light));
+      background-color: var(--ard-progress-bar-background-color, var(--ard-uicl--bg-colored-light));
       top: 0;
       bottom: 0;
       left: 0;
@@ -112,11 +112,11 @@
           bottom: 0;
           width: 9999px;
           animation: buffer var(--ard-progress-bar-buffer-animation-duration, 0.4s) linear infinite;
-          border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-cmpcl--bg-colored);
+          border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-uicl--bg-colored);
         }
       }
       .ard-progress-bar__overlay-buffer {
-        background: var(--ard-progress-bar-buffer-color, var(--ard-cmpcl--bg-colored-light));
+        background: var(--ard-progress-bar-buffer-color, var(--ard-uicl--bg-colored-light));
         opacity: var(--ard-progress-bar-buffer-opacity, 100%);
         position: absolute;
         left: 0;
@@ -140,11 +140,11 @@
     &.ard-color-currentColor {
       .ard-progress-bar__background {
         opacity: var(--ard-progress-bar-currentColor-background-opacity, 22.5%);
-        background: var(--ard-cmpcl--bg-colored);
+        background: var(--ard-uicl--bg-colored);
       }
       .ard-progress-bar__overlay-buffer {
         opacity: var(--ard-progress-bar-currentColor-overlay-buffer-opacity, 30%);
-        background: var(--ard-cmpcl--bg-colored);
+        background: var(--ard-uicl--bg-colored);
       }
     }
   }

package/themes/default/progress-circle.scss

@@ -1,7 +1,7 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -17,7 +17,7 @@
     width: var(--ard-progress-circle-size, 3em);
     height: var(--ard-progress-circle-size, 3em);
 
-    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+    --ard-_progress-circle-fill-color: var(--ard-uicl--bg-colored);
 
     //! appearances
     &.ard-appearance-transparent {
@@ -34,7 +34,7 @@
     &.ard-appearance-colored {
       .ard-progress-circle-background {
         opacity: var(--ard-progress-circle-colored-background-opacity, 100%);
-        background: var(--ard-cmpcl--bg-colored);
+        background: var(--ard-uicl--bg-colored);
       }
     }
     //! ring variant

package/themes/default/radio.scss

@@ -2,7 +2,7 @@
 @use './mixins' as GM;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -66,7 +66,7 @@
         right: var(--ard-radio-inner-circle-inset, 25%);
         top: var(--ard-radio-inner-circle-inset, 25%);
         bottom: var(--ard-radio-inner-circle-inset, 25%);
-        background: var(--ard-cmpcl--bg-colored);
+        background: var(--ard-uicl--bg-colored);
         border-radius: var(--ard-radio-border-radius, 9999px);
         transform: scale(0);
         transition: transform var(--ard-radio-transition-duration, 0.2s) ARD.$timing-fn;
@@ -99,13 +99,13 @@
     &.ard-radio-selected {
       > .ard-radio-circles {
         > .ard-radio-outer-circle {
-          border-color: var(--ard-cmpcl--bg-colored);
+          border-color: var(--ard-uicl--bg-colored);
         }
         > .ard-radio-inner-circle {
           transform: scale(1);
         }
         > .ard-focus-overlay {
-          background-color: var(--ard-cmpcl--bg-colored);
+          background-color: var(--ard-uicl--bg-colored);
         }
       }
     }

package/themes/default/segment.scss

@@ -2,7 +2,7 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -44,7 +44,7 @@
     //! button focus inficator
     .ard-focus-overlay {
       @include defaultMixins.focus-overlay;
-      background-color: var(--ard-cmpcl--content);
+      background-color: var(--ard-uicl--content);
     }
 
     //! row & option styling
@@ -134,11 +134,11 @@
       .ard-segment-row {
         .ard-segment-option {
           .ard-focus-overlay {
-            background-color: var(--ard-cmpcl--content);
+            background-color: var(--ard-uicl--content);
           }
 
           &.ard-option-selected {
-            color: var(--ard-cmpcl--content);
+            color: var(--ard-uicl--content);
           }
         }
       }
@@ -152,8 +152,8 @@
         border: 1px solid var(--ard-segment-border-color, ARD.$border-light);
 
         &.ard-option-selected {
-          border-color: var(--ard-cmpcl--content);
-          color: var(--ard-cmpcl--content);
+          border-color: var(--ard-uicl--content);
+          color: var(--ard-uicl--content);
         }
       }
       &.ard-variant-rounded-connected,
@@ -237,8 +237,8 @@
     }
     &.ard-appearance-outlined-strong {
       .ard-segment-option.ard-option-selected {
-        background-color: var(--ard-cmpcl--bg);
-        color: var(--ard-cmpcl--on-bg);
+        background-color: var(--ard-uicl--bg);
+        color: var(--ard-uicl--on-bg);
       }
     }
     &.ard-appearance-filled {
@@ -252,20 +252,20 @@
         left: 0;
         right: 0;
         border-radius: inherit;
-        background: var(--ard-cmpcl--bg);
+        background: var(--ard-uicl--bg);
         opacity: 15%;
       }
     }
     &.ard-appearance-filled-strong {
-      background: var(--ard-cmpcl--bg);
+      background: var(--ard-uicl--bg);
       border-radius: var(--ard-_variant-border-radius);
 
       .ard-segment-row {
         .ard-segment-option {
-          color: var(--ard-cmpcl--on-bg);
+          color: var(--ard-uicl--on-bg);
 
           .ard-focus-overlay {
-            background-color: var(--ard-cmpcl--on-bg);
+            background-color: var(--ard-uicl--on-bg);
           }
           &.ard-option-highlighted {
             .ard-focus-overlay {
@@ -273,8 +273,8 @@
             }
           }
           &.ard-option-selected {
-            color: var(--ard-cmpcl--content);
-            background: var(--ard-cmpcl--on-bg);
+            color: var(--ard-uicl--content);
+            background: var(--ard-uicl--on-bg);
 
             .ard-focus-overlay {
               opacity: 0;
@@ -362,7 +362,7 @@
           opacity: calc(var(--ard-segment-option-disabled-opacity, 50%) * 1.2);
         }
         .ard-focus-overlay {
-          background: var(--ard-cmpcl--overlay);
+          background: var(--ard-uicl--overlay);
         }
       }
     }

package/themes/default/select.scss

@@ -2,7 +2,7 @@
 @use './mixins' as defaultMixins;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {

package/themes/default/slide-toggle.scss

@@ -2,7 +2,7 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -89,7 +89,7 @@
 
       .ard-focus-overlay {
         @include defaultMixins.focus-overlay;
-        background: var(--ard-cmpcl--overlay-colored);
+        background: var(--ard-uicl--overlay-colored);
       }
 
       .ard-slide-toggle-icon {
@@ -133,17 +133,17 @@
     //! selected state
     &.ard-slide-toggle-selected {
       .ard-slide-toggle-track-overlay {
-        background: var(--ard-cmpcl--content);
+        background: var(--ard-uicl--content);
         opacity: var(--ard-slide-toggle-track-selected-opacity, 40%);
       }
 
       .ard-slide-toggle-handle {
         left: 100%;
         transform: translateX(-100%);
-        background: var(--ard-cmpcl--bg);
+        background: var(--ard-uicl--bg);
 
         .ard-slide-toggle-icon {
-          color: var(--ard-cmpcl--on-bg);
+          color: var(--ard-uicl--on-bg);
 
           &.ard-icon-for-selected {
             display: block;
@@ -170,7 +170,7 @@
         box-sizing: border-box;
 
         .ard-slide-toggle-track-overlay {
-          background: var(--ard-cmpcl--content);
+          background: var(--ard-uicl--content);
           opacity: 0;
         }
       }
@@ -189,7 +189,7 @@
 
       &.ard-slide-toggle-selected {
         .ard-slide-toggle-track {
-          border-color: var(--ard-cmpcl--content);
+          border-color: var(--ard-uicl--content);
         }
 
         .ard-slide-toggle-track-overlay {

package/themes/default/slider.scss

@@ -3,7 +3,7 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -83,7 +83,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        background: var(--ard-slider-track-color, var(--ard-cmpcl--bg-colored));
+        background: var(--ard-slider-track-color, var(--ard-uicl--bg-colored));
         opacity: var(--ard-slider-track-opacity, 20%);
         border-radius: var(--ard-slider-track-border-radius, 9999px);
 
@@ -92,7 +92,7 @@
           height: var(--ard-slider-active-track-height, calc(100% + 0.125em));
           top: 50%;
           transform: translateY(-50%);
-          background: var(--ard-slider-active-color, var(--ard-cmpcl--bg-colored));
+          background: var(--ard-slider-active-color, var(--ard-uicl--bg-colored));
           opacity: var(--ard-slider-active-track-opacity, 100%);
           transition:
             width var(--_ard-slider-transition) ease,
@@ -126,7 +126,7 @@
       width: var(--ard-slider-handle-size, 1.25em);
       height: var(--ard-slider-handle-size, 1.25em);
       color: inherit;
-      background: var(--ard-slider-handle-bg, var(--ard-cmpcl--bg-colored));
+      background: var(--ard-slider-handle-bg, var(--ard-uicl--bg-colored));
       border-radius: var(--ard-slider-handle-border-radius, 9999px);
       border: var(--ard-slider-handle-border, none);
       z-index: 1;

package/themes/default/snackbar.scss

@@ -1,7 +1,7 @@
 @use './coloring' as C;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -49,7 +49,7 @@
       color: var(--ard-snackbar-content-color, #{ARD.$text2-alt});
 
       ard-icon {
-        color: var(--ard-cmpcl--content-light);
+        color: var(--ard-uicl--content-light);
       }
     }
 

package/themes/default/spinner.scss

@@ -1,6 +1,6 @@
 @use './coloring' as CM;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -25,7 +25,7 @@
     scale: 2.3; //magic number
 
     > circle {
-      stroke: var(--ard-cmpcl--content);
+      stroke: var(--ard-uicl--content);
     }
   }
 }