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

package/prebuilt-themes/default/kbd.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-kbd-border-radius: 0.1875em;
     --ard-kbd-margin: 0 0.125em;

package/prebuilt-themes/default/modal.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-modal-viewport-spacing: 2rem;
     --ard-modal-padding: 1.25rem;

package/prebuilt-themes/default/progress-bar.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-progress-bar-width: 100%;
     --ard-progress-bar-height: 0.25rem;
@@ -160,13 +160,13 @@
   .ard-progress-bar .ard-progress-bar__background,
   .ard-progress-bar .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 .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;
@@ -225,10 +225,10 @@
     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.ard-progress-bar__mode-buffer .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;
@@ -242,11 +242,11 @@
   }
   .ard-progress-bar.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.ard-color-currentColor .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);
   }
 }
 @keyframes indeterminate {

package/prebuilt-themes/default/progress-circle.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-progress-circle-size: 3em;
     --ard-progress-circle-colorless-background-opacity: 100%;
@@ -8,7 +8,7 @@
   .ard-progress-circle {
     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);
   }
   .ard-progress-circle.ard-color-none {
     --ard-cmpcl--bg: var(--ard-bg);
@@ -159,7 +159,7 @@
   }
   .ard-progress-circle.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);
   }
   .ard-progress-circle.ard-progress-circle-variant-ring .ard-progress-circle-background,
   .ard-progress-circle.ard-progress-circle-variant-ring .ard-progress-circle-overlay {

package/prebuilt-themes/default/radio.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-radio-group-gap: 0.5rem 1rem;
     --ard-radio-gap: 0.75rem;
@@ -194,7 +194,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) cubic-bezier(0.4, 0, 0.2, 1);
@@ -225,13 +225,13 @@
     opacity: var(--ard-radio-hover-overlay-opacity, 7.5%);
   }
   .ard-radio.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.ard-radio-selected > .ard-radio-circles > .ard-radio-inner-circle {
     transform: scale(1);
   }
   .ard-radio.ard-radio-selected > .ard-radio-circles > .ard-focus-overlay {
-    background-color: var(--ard-cmpcl--bg-colored);
+    background-color: var(--ard-uicl--bg-colored);
   }
   .ard-radio:focus > .ard-radio-circles > .ard-focus-overlay {
     opacity: var(--ard-radio-focus-overlay-opacity, 15%);

package/prebuilt-themes/default/segment.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-segment-margin: 0;
     --ard-segment-padding: 0.15rem;
@@ -216,7 +216,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-cmpcl--content);
+    background-color: var(--ard-uicl--content);
   }
   .ard-segment-container .ard-segment-row {
     gap: var(--ard-segment-option-gap, var(--ard-segment-padding, 0.15rem));
@@ -274,10 +274,10 @@
     background: transparent;
   }
   .ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option .ard-focus-overlay {
-    background-color: var(--ard-cmpcl--content);
+    background-color: var(--ard-uicl--content);
   }
   .ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option.ard-option-selected {
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--content);
   }
   .ard-segment-container.ard-appearance-outlined, .ard-segment-container.ard-appearance-outlined-strong {
     background: var(--ard-bg);
@@ -287,8 +287,8 @@
     border: 1px solid var(--ard-segment-border-color, var(--ard-border-light));
   }
   .ard-segment-container.ard-appearance-outlined .ard-segment-option.ard-option-selected, .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.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-segment-container.ard-appearance-outlined.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected {
     gap: 0;
@@ -343,8 +343,8 @@
     padding-right: 1.25em;
   }
   .ard-segment-container.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-segment-container.ard-appearance-filled {
     position: relative;
@@ -357,25 +357,25 @@
     left: 0;
     right: 0;
     border-radius: inherit;
-    background: var(--ard-cmpcl--bg);
+    background: var(--ard-uicl--bg);
     opacity: 15%;
   }
   .ard-segment-container.ard-appearance-filled-strong {
-    background: var(--ard-cmpcl--bg);
+    background: var(--ard-uicl--bg);
     border-radius: var(--ard-_variant-border-radius);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option {
-    color: var(--ard-cmpcl--on-bg);
+    color: var(--ard-uicl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option .ard-focus-overlay {
-    background-color: var(--ard-cmpcl--on-bg);
+    background-color: var(--ard-uicl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
     opacity: var(--ard-segment-option-highlighted-filled-bg-opacity, 16%);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.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-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-selected .ard-focus-overlay {
     opacity: 0;
@@ -428,7 +428,7 @@
     opacity: calc(var(--ard-segment-option-disabled-opacity, 50%) * 1.2);
   }
   .ard-segment-container.ard-disabled.ard-color-none .ard-focus-overlay {
-    background: var(--ard-cmpcl--overlay);
+    background: var(--ard-uicl--overlay);
   }
 }
 

package/prebuilt-themes/default/select.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-select-gap: 0.625rem;
     --ard-select-gap-compact: 0.5rem;

package/prebuilt-themes/default/slide-toggle.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-slide-toggle-height: 1.25em;
     --ard-slide-toggle-hitbox-offset: -4px;
@@ -218,7 +218,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--overlay-colored);
   }
   .ard-slide-toggle .ard-slide-toggle-handle .ard-slide-toggle-icon {
     font-family: "Material Symbols Outlined";
@@ -248,16 +248,16 @@
     opacity: var(--ard-slide-toggle-active-overlay-opacity, 12%);
   }
   .ard-slide-toggle.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.ard-slide-toggle-selected .ard-slide-toggle-handle {
     left: 100%;
     transform: translateX(-100%);
-    background: var(--ard-cmpcl--bg);
+    background: var(--ard-uicl--bg);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-handle .ard-slide-toggle-icon {
-    color: var(--ard-cmpcl--on-bg);
+    color: var(--ard-uicl--on-bg);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-handle .ard-slide-toggle-icon.ard-icon-for-selected {
     display: block;
@@ -278,7 +278,7 @@
     box-sizing: border-box;
   }
   .ard-slide-toggle.ard-appearance-contained .ard-slide-toggle-track .ard-slide-toggle-track-overlay {
-    background: var(--ard-cmpcl--content);
+    background: var(--ard-uicl--content);
     opacity: 0;
   }
   .ard-slide-toggle.ard-appearance-contained .ard-slide-toggle-handle {
@@ -293,7 +293,7 @@
     transform: translateX(-1px) translateY(-50%);
   }
   .ard-slide-toggle.ard-appearance-contained.ard-slide-toggle-selected .ard-slide-toggle-track {
-    border-color: var(--ard-cmpcl--content);
+    border-color: var(--ard-uicl--content);
   }
   .ard-slide-toggle.ard-appearance-contained.ard-slide-toggle-selected .ard-slide-toggle-track-overlay {
     opacity: 100%;

package/prebuilt-themes/default/slider.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-slider-width: 100%;
     --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
@@ -214,7 +214,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);
   }
@@ -224,7 +224,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, left var(--_ard-slider-transition) ease;
   }
@@ -257,7 +257,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/prebuilt-themes/default/snackbar.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-snackbar-min-width: min(21rem, 90vw);
     --ard-snackbar-max-width: min(42rem, 90vw);
@@ -178,7 +178,7 @@
     color: var(--ard-snackbar-content-color, var(--ard-text2-alt));
   }
   .ard-snackbar .ard-snackbar-content ard-icon {
-    color: var(--ard-cmpcl--content-light);
+    color: var(--ard-uicl--content-light);
   }
   .ard-snackbar.ard-snackbar-closing {
     animation: hide var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;

package/prebuilt-themes/default/spinner.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-spinner-size: 2rem;
     --ard-spinner-margin: 0.25rem;
@@ -157,7 +157,7 @@
     --ard-cmpcl--overlay-colored-light: currentColor;
   }
   .ard-spinner > circle {
-    stroke: var(--ard-cmpcl--content);
+    stroke: var(--ard-uicl--content);
   }
 }
 

package/prebuilt-themes/default/stars.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-star-size: 1.5em;
     --ard-star-button-hitbox-offset: -4px;
@@ -15,7 +15,7 @@
   .ard-star-button,
   .ard-rating-display,
   .ard-rating-input {
-    color: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--bg-colored);
   }
   .ard-star.ard-color-none,
   .ard-star-button.ard-color-none,

package/prebuilt-themes/default/tabber.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-tabber-tab-height: 2.5em;
     --ard-tabber-tab-font-size: 0.875rem;
@@ -235,7 +235,7 @@
     right: 0;
     bottom: 0;
     height: 2px;
-    background: var(--ard-cmpcl--bg-colored);
+    background: var(--ard-uicl--bg-colored);
   }
   .ard-tabber .ard-tabber-tabs .ard-tab-button.ard-tab-disabled {
     opacity: var(--ard-tabber-tab-disabled-opacity);

package/prebuilt-themes/default/table-pagination.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-table-pagination-height: 2.9375rem;
     --ard-table-pagination-gap: 2rem;

package/prebuilt-themes/default/table.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-table-cell-padding: 0 0.75rem;
     --ard-table-header-gap: 0.75rem;
@@ -25,14 +25,14 @@
   .ard-table {
     border-collapse: collapse;
     background: var(--ard-table-background, var(--ard-bg));
-    --ard-_table-header-border: var(--ard-cmpcl--border);
-    --ard-_table-header-border-light: var(--ard-cmpcl--border-light);
+    --ard-_table-header-border: var(--ard-uicl--border);
+    --ard-_table-header-border-light: var(--ard-uicl--border-light);
     --ard-_table-border: var(--ard-table-border-color-strong, var(--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);
-    --ard-_table-header-color-on-bg: var(--ard-cmpcl--on-bg);
-    --ard-_table-overlay: var(--ard-cmpcl--overlay-rgb);
+    --ard-_table-header-background: var(--ard-uicl--bg);
+    --ard-_table-header-background-light: var(--ard-uicl--bg-header);
+    --ard-_table-header-color: var(--ard-uicl--content);
+    --ard-_table-header-color-on-bg: var(--ard-uicl--on-bg);
+    --ard-_table-overlay: var(--ard-uicl--overlay-rgb);
     --ard-_table-overlay-colorless: var(--ard-overlay-rgb);
   }
   .ard-table.ard-color-none {

package/themes/default/badge.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 {
@@ -36,8 +36,8 @@
     pointer-events: none;
 
     //! colors
-    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);
 
     //! variants
     &.ard-variant-pill {

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

@@ -29,7 +29,7 @@
   &::before {
     content: '';
     @include defaultMixins.focus-overlay;
-    background-color: var(--ard-cmpcl--overlay);
+    background-color: var(--ard-uicl--overlay);
   }
   &:hover {
     &::before {
@@ -56,11 +56,11 @@
   &.ard-appearance-transparent,
   &.ard-appearance-raised {
     background: transparent;
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: none;
 
     &::before {
-      background: var(--ard-cmpcl--overlay-colored);
+      background: var(--ard-uicl--overlay-colored);
     }
   }
   &.ard-appearance-raised,
@@ -79,16 +79,16 @@
   }
   &.ard-appearance-outlined {
     background: ARD.$bg;
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: 1px solid ARD.$border-light;
 
     &::before {
-      background: var(--ard-cmpcl--overlay-colored);
+      background: var(--ard-uicl--overlay-colored);
     }
   }
   &.ard-appearance-outlined-strong {
     background: ARD.$bg;
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: 1px solid ARD.$border-light;
 
     &::before {
@@ -98,18 +98,18 @@
     transition: background-color 0.2s ease, color 0.2s ease;
     &:hover,
     &:focus-visible {
-      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-flat,
   &.ard-appearance-raised-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
+    border: 1px solid var(--ard-uicl--bg-colored);
 
     &::before {
-      background: var(--ard-cmpcl--on-bg);
+      background: var(--ard-uicl--on-bg);
     }
     &:focus-visible {
       outline: solid black;
@@ -117,10 +117,10 @@
   }
   //! light coloring
   &.ard-appearance-transparent.ard-light-coloring {
-    color: var(--ard-cmpcl--content-light);
+    color: var(--ard-uicl--content-light);
 
     &::before {
-      background: var(--ard-cmpcl--overlay-colored-light);
+      background: var(--ard-uicl--overlay-colored-light);
     }
   }
 }
@@ -143,7 +143,7 @@
       opacity: $opacity;
     }
     &::before {
-      background: var(--ard-cmpcl--overlay);
+      background: var(--ard-uicl--overlay);
     }
   }
 }

package/themes/default/buttons/button.scss

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

package/themes/default/buttons/fab.scss

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

package/themes/default/buttons/icon-button.scss

@@ -1,6 +1,6 @@
 @use './button-mixins' as shared;
 
-@layer ard-theme {
+@layer ard-ui {
   // the variables are commented out intentionally
   // read more in docs/dev/css-variables.md
   :root {
@@ -48,7 +48,7 @@
     justify-content: center;
     padding: 0;
     overflow: hidden;
-    color: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--bg-colored);
 
     > ard-icon {
       font-weight: 500;
@@ -61,7 +61,7 @@
     }
     //! light coloring
     &.ard-light-coloring {
-      color: var(--ard-cmpcl--bg-colored-light);
+      color: var(--ard-uicl--bg-colored-light);
     }
   }
 

package/themes/default/calendar.scss

@@ -3,7 +3,7 @@
 @use './coloring.scss' 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 {
@@ -158,7 +158,7 @@
         .ard-focus-overlay {
           @include DM.focus-overlay();
           z-index: -1;
-          background: var(--ard-cmpcl--overlay);
+          background: var(--ard-uicl--overlay);
           transition:
             border-color 0.1s ease,
             opacity 0.1s ease;
@@ -187,18 +187,18 @@
       &.ard-calendar__entry-highlighted-in-range {
         .ard-range-overlay {
           opacity: 1;
-          border-top-color: var(--ard-cmpcl--bg-colored);
-          border-bottom-color: var(--ard-cmpcl--bg-colored);
+          border-top-color: var(--ard-uicl--bg-colored);
+          border-bottom-color: var(--ard-uicl--bg-colored);
         }
         &.ard-calendar__entry-selected-start {
           .ard-range-overlay {
-            border-left-color: var(--ard-cmpcl--bg-colored);
+            border-left-color: var(--ard-uicl--bg-colored);
           }
         }
         &.ard-calendar__entry-selected-end,
         &.ard-calendar__entry-highlighted {
           .ard-range-overlay {
-            border-right-color: var(--ard-cmpcl--bg-colored);
+            border-right-color: var(--ard-uicl--bg-colored);
           }
         }
       }
@@ -225,16 +225,16 @@
       &.ard-calendar__entry-selected-in-range {
         .ard-range-overlay {
           opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
-          background-color: var(--ard-cmpcl--bg-colored);
+          background-color: var(--ard-uicl--bg-colored);
         }
       }
       &.ard-calendar__entry-selected {
         .ard-calendar__entry-button {
-          color: var(--ard-cmpcl--on-bg-colored);
+          color: var(--ard-uicl--on-bg-colored);
         }
         .ard-focus-overlay {
           opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
-          background: var(--ard-cmpcl--bg-colored);
+          background: var(--ard-uicl--bg-colored);
         }
 
         &.ard-calendar-today {
@@ -251,7 +251,7 @@
           cursor: default;
         }
         .ard-focus-overlay {
-          background: var(--ard-cmpcl--overlay);
+          background: var(--ard-uicl--overlay);
         }
         &.ard-calendar__entry-highlighted {
           .ard-focus-overlay {

package/themes/default/card.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/checkbox-list.scss

@@ -1,7 +1,7 @@
 @use './mixins' as CM;
 @use '../variables' as ARD;
 
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-checkbox-list-padding: 0.375rem 0;
     --ard-checkbox-list-item-hover-opacity: 5%;

package/themes/default/checkbox.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 {