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

package/themes/default/segment.scss

@@ -2,31 +2,31 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-segment-margin: 0;
-  --ard-segment-padding: 0.15rem;
-  // --ard-segment-option-gap: ;
-  // --ard-segment-font-family: ;
-  --ard-segment-font-size: 0.875rem;
-  --ard-segment-font-size-compact: 0.75rem;
-  --ard-segment-rounded-border-radius: 0.5rem;
-  --ard-segment-row-height: 2.42em;
-  --ard-segment-row-height-compact: 1.85em;
-  --ard-segment-option-padding: 0 1em;
-  --ard-segment-option-padding-compact: 0 0.5em;
-  --ard-segment-option-disabled-opacity: 50%;
-  --ard-segment-option-highlighted-bg-opacity: 4%;
-  --ard-segment-option-highlighted-filled-bg-opacity: 16%;
-  --ard-segment-option-highlighted-keyboard-bg-opacity: 28%;
-  --ard-segment-option-active-bg-opacity: 12%;
-  --ard-segment-option-active-keyboard-bg-opacity: 34%;
-  --ard-segment-option-selected-bg-opacity: 16%;
-  // --ard-segment-border-color: ;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-segment-margin: 0;
+    --ard-segment-padding: 0.15rem;
+    // --ard-segment-option-gap: ;
+    // --ard-segment-font-family: ;
+    --ard-segment-font-size: 0.875rem;
+    --ard-segment-font-size-compact: 0.75rem;
+    --ard-segment-rounded-border-radius: 0.5rem;
+    --ard-segment-row-height: 2.42em;
+    --ard-segment-row-height-compact: 1.85em;
+    --ard-segment-option-padding: 0 1em;
+    --ard-segment-option-padding-compact: 0 0.5em;
+    --ard-segment-option-disabled-opacity: 50%;
+    --ard-segment-option-highlighted-bg-opacity: 4%;
+    --ard-segment-option-highlighted-filled-bg-opacity: 16%;
+    --ard-segment-option-highlighted-keyboard-bg-opacity: 28%;
+    --ard-segment-option-active-bg-opacity: 12%;
+    --ard-segment-option-active-keyboard-bg-opacity: 34%;
+    --ard-segment-option-selected-bg-opacity: 16%;
+    // --ard-segment-border-color: ;
+  }
 
-@layer ard-theme {
   .ard-segment-container {
     @include coloringMixins.typeColors();
     padding: var(--ard-segment-padding, 0.15rem);
@@ -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,57 +2,57 @@
 @use './mixins' as defaultMixins;
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-select-height: ;
-  // --ard-select-height-compact: ;
-  --ard-select-gap: 0.625rem;
-  --ard-select-gap-compact: 0.5rem;
-  --ard-select-controls-gap: 0.625rem;
-  --ard-select-controls-gap-compact: 0.5rem;
-  --ard-select-padding: 0 1em 0 0.375em;
-  --ard-select-padding-compact: 0 0.625em 0 0.375em;
-
-  // --ard-select-font-size: ;
-  // --ard-select-font-size-compact: ;
-  // --ard-select-text-color: ;
-  // --ard-select-placeholder-color: ;
-  --ard-select-search-min-width: 10ch;
-  // --ard-select-dropdown-arrow-color: ;
-  --ard-select-dropdown-arrow-active-transform: rotate(180deg);
-  --ard-select-dropdown-arrow-transition: 0.2s ease-in-out;
-
-  --ard-select-multiselect-padding: 0.25em 0;
-  --ard-select-multiselect-chip-gap: 0.375rem;
-
-  --ard-select-dropdown-width: max-content;
-  --ard-select-dropdown-max-width: max(25em, 100%);
-  --ard-select-dropdown-min-width: 100%;
-  --ard-select-dropdown-max-height: 15em;
-  // --ard-select-dropdown-font-size: ;
-  // --ard-select-dropdown-font-size-compact: ;
-  --ard-select-dropdown-padding: 0.375em 0.625em;
-  --ard-select-dropdown-gap: 0;
-
-  --ard-select-dropdown-optgroup-label-font-size: 0.875em;
-  --ard-select-dropdown-optgroup-label-font-weight: 600;
-  --ard-select-dropdown-optgroup-label-letter-spacing: 0.25px;
-  --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
-
-  --ard-select-dropdown-option-padding: 0.375em 0.625em;
-  // --ard-select-dropdown-option-text-color: ;
-  // --ard-select-dropdown-option-highlighted-bg: ;
-  --ard-select-dropdown-option-selected-font-weight: 500;
-  // --ard-select-dropdown-option-selected-bg: ;
-  // --ard-select-dropdown-option-selected-highlighted-bg: ;
-  --ard-select-dropdown-option-disabled-opacity: 50%;
-
-  --ard-select-dropdown-add-custom-gap: 0.375rem;
-  --ard-select-dropdown-add-custom-label-font-size: 85%;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-select-height: ;
+    // --ard-select-height-compact: ;
+    --ard-select-gap: 0.625rem;
+    --ard-select-gap-compact: 0.5rem;
+    --ard-select-controls-gap: 0.625rem;
+    --ard-select-controls-gap-compact: 0.5rem;
+    --ard-select-padding: 0 1em 0 0.375em;
+    --ard-select-padding-compact: 0 0.625em 0 0.375em;
+
+    // --ard-select-font-size: ;
+    // --ard-select-font-size-compact: ;
+    // --ard-select-text-color: ;
+    // --ard-select-placeholder-color: ;
+    --ard-select-search-min-width: 10ch;
+    // --ard-select-dropdown-arrow-color: ;
+    --ard-select-dropdown-arrow-active-transform: rotate(180deg);
+    --ard-select-dropdown-arrow-transition: 0.2s ease-in-out;
+
+    --ard-select-multiselect-padding: 0.25em 0;
+    --ard-select-multiselect-chip-gap: 0.375rem;
+
+    --ard-select-dropdown-width: max-content;
+    --ard-select-dropdown-max-width: max(25em, 100%);
+    --ard-select-dropdown-min-width: 100%;
+    --ard-select-dropdown-max-height: 15em;
+    // --ard-select-dropdown-font-size: ;
+    // --ard-select-dropdown-font-size-compact: ;
+    --ard-select-dropdown-padding: 0.375em 0.625em;
+    --ard-select-dropdown-gap: 0;
+
+    --ard-select-dropdown-optgroup-label-font-size: 0.875em;
+    --ard-select-dropdown-optgroup-label-font-weight: 600;
+    --ard-select-dropdown-optgroup-label-letter-spacing: 0.25px;
+    --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
+
+    --ard-select-dropdown-option-padding: 0.375em 0.625em;
+    // --ard-select-dropdown-option-text-color: ;
+    // --ard-select-dropdown-option-highlighted-bg: ;
+    --ard-select-dropdown-option-selected-font-weight: 500;
+    // --ard-select-dropdown-option-selected-bg: ;
+    // --ard-select-dropdown-option-selected-highlighted-bg: ;
+    --ard-select-dropdown-option-disabled-opacity: 50%;
+
+    --ard-select-dropdown-add-custom-gap: 0.375rem;
+    --ard-select-dropdown-add-custom-label-font-size: 85%;
+  }
 
-@layer ard-theme {
   .ard-select {
     box-sizing: border-box;
     width: 100%;

package/themes/default/slide-toggle.scss

@@ -2,35 +2,35 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-slide-toggle-height: 1.25em;
-  --ard-slide-toggle-hitbox-offset: -4px;
-  --ard-slide-toggle-track-width: 2.25em;
-  --ard-slide-toggle-track-height: 0.75em;
-  --ard-slide-toggle-track-opacity: 20%;
-  --ard-slide-toggle-track-selected-opacity: 40%;
-  --ard-slide-toggle-track-selected-opacity-no-color: 35%;
-  --ard-slide-toggle-handle-size: 1.25em;
-  --ard-slide-toggle-handle-icon-size: 0.95em;
-  --ard-slide-toggle-border-radius: 9999px;
-  --ard-slide-toggle-transition-duration: 0.1s;
-  --ard-slide-toggle-box-shadow-transition: 0.28s;
-  --ard-slide-toggle-hover-overlay-opacity: 4%;
-  --ard-slide-toggle-active-overlay-opacity: 12%;
-  --ard-slide-toggle-contained-height: 1.5em;
-  --ard-slide-toggle-contained-handle-size: 1.125em;
-  --ard-slide-toggle-contained-handle-margin: 0.25em;
-  --ard-slide-toggle-contained-border: 1px solid ARD.$detail-ultralight;
-  --ard-slide-toggle-disabled-opacity: 60%;
-  --ard-slide-toggle-disabled-track-opacity: 20%;
-  --ard-slide-toggle-disabled-track-opacity-unselected: 12.5%;
-  --ard-slide-toggle-disabled-overlay-opacity: 20%;
-  --ard-slide-toggle-disabled-icon-opacity: 60%;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-slide-toggle-height: 1.25em;
+    --ard-slide-toggle-hitbox-offset: -4px;
+    --ard-slide-toggle-track-width: 2.25em;
+    --ard-slide-toggle-track-height: 0.75em;
+    --ard-slide-toggle-track-opacity: 20%;
+    --ard-slide-toggle-track-selected-opacity: 40%;
+    --ard-slide-toggle-track-selected-opacity-no-color: 35%;
+    --ard-slide-toggle-handle-size: 1.25em;
+    --ard-slide-toggle-handle-icon-size: 0.95em;
+    --ard-slide-toggle-border-radius: 9999px;
+    --ard-slide-toggle-transition-duration: 0.1s;
+    --ard-slide-toggle-box-shadow-transition: 0.28s;
+    --ard-slide-toggle-hover-overlay-opacity: 4%;
+    --ard-slide-toggle-active-overlay-opacity: 12%;
+    --ard-slide-toggle-contained-height: 1.5em;
+    --ard-slide-toggle-contained-handle-size: 1.125em;
+    --ard-slide-toggle-contained-handle-margin: 0.25em;
+    --ard-slide-toggle-contained-border: 1px solid ARD.$detail-ultralight;
+    --ard-slide-toggle-disabled-opacity: 60%;
+    --ard-slide-toggle-disabled-track-opacity: 20%;
+    --ard-slide-toggle-disabled-track-opacity-unselected: 12.5%;
+    --ard-slide-toggle-disabled-overlay-opacity: 20%;
+    --ard-slide-toggle-disabled-icon-opacity: 60%;
+  }
 
-@layer ard-theme {
   .ard-slide-toggle {
     @include coloringMixins.typeColors();
 
@@ -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,46 +3,46 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-slider-font-size: ;
-  // --ard-slider-font-size-compact: ;
-  --ard-slider-width: 100%;
-  --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
-  --ard-slider-track-height: 0.25em;
-  // --ard-slider-track-color: ;
-  --ard-slider-track-opacity: 20%;
-  --ard-slider-track-border-radius: 9999px;
-  --ard-slider-active-track-height: calc(100% + 0.125em);
-  // --ard-slider-active-color: ;
-  --ard-slider-active-track-opacity: 100%;
-  --ard-slider-value-tick-size: 0.125em;
-  --ard-slider-value-tick-opacity: 30%;
-  --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
-  --ard-slider-handle-size: 1.25em;
-  // --ard-slider-handle-bg: ;
-  --ard-slider-handle-border: none;
-  --ard-slider-handle-border-radius: 9999px;
-  --ard-slider-handle-hitbox-size: 0.375em;
-  --ard-slider-handle-overlay-size: 0.5em;
-  --ard-slider-handle-overlay-hover-opacity: 7.5%;
-  --ard-slider-handle-overlay-focus-opacity: 15%;
-  --ard-slider-handle-overlay-active-opacity: 25%;
-  --ard-slider-label-font-size: 0.875rem;
-  --ard-slider-label-padding-top: 0.2em;
-  // --ard-slider-label-bg: ;
-  // --ard-slider-label-color: ;
-  --ard-slider-label-height: 2em;
-  --ard-slider-label-border: none;
-  --ard-slider-label-border-radius: 0.375em;
-  --ard-slider-label-padding: 0 0.75em;
-  --ard-slider-label-font-weight: 500;
-  --ard-slider-label-arrow-size: 0.375em;
-  --ard-slider-label-offset: 0.5em;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-slider-font-size: ;
+    // --ard-slider-font-size-compact: ;
+    --ard-slider-width: 100%;
+    --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
+    --ard-slider-track-height: 0.25em;
+    // --ard-slider-track-color: ;
+    --ard-slider-track-opacity: 20%;
+    --ard-slider-track-border-radius: 9999px;
+    --ard-slider-active-track-height: calc(100% + 0.125em);
+    // --ard-slider-active-color: ;
+    --ard-slider-active-track-opacity: 100%;
+    --ard-slider-value-tick-size: 0.125em;
+    --ard-slider-value-tick-opacity: 30%;
+    --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
+    --ard-slider-handle-size: 1.25em;
+    // --ard-slider-handle-bg: ;
+    --ard-slider-handle-border: none;
+    --ard-slider-handle-border-radius: 9999px;
+    --ard-slider-handle-hitbox-size: 0.375em;
+    --ard-slider-handle-overlay-size: 0.5em;
+    --ard-slider-handle-overlay-hover-opacity: 7.5%;
+    --ard-slider-handle-overlay-focus-opacity: 15%;
+    --ard-slider-handle-overlay-active-opacity: 25%;
+    --ard-slider-label-font-size: 0.875rem;
+    --ard-slider-label-padding-top: 0.2em;
+    // --ard-slider-label-bg: ;
+    // --ard-slider-label-color: ;
+    --ard-slider-label-height: 2em;
+    --ard-slider-label-border: none;
+    --ard-slider-label-border-radius: 0.375em;
+    --ard-slider-label-padding: 0 0.75em;
+    --ard-slider-label-font-weight: 500;
+    --ard-slider-label-arrow-size: 0.375em;
+    --ard-slider-label-offset: 0.5em;
+  }
 
-@layer ard-theme {
   .ard-slider-container-master,
   .ard-range-slider-container-master {
     @include coloringMixins.typeColors();
@@ -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,25 +1,25 @@
 @use './coloring' as C;
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-snackbar-min-width: min(21rem, 90vw);
-  --ard-snackbar-max-width: min(42rem, 90vw);
-  --ard-snackbar-min-height: 3rem;
-  // --ard-snackbar-background-color: ;
-  // --ard-snackbar-content-color: ;
-  --ard-snackbar-gap: 0.625rem;
-  --ard-snackbar-margin: 0.625rem;
-  --ard-snackbar-padding: 0 0.5rem 0 1rem;
-  // --ard-snackbar-border-radius: ;
-  --ard-snackbar-content-gap: 0.625rem;
-  --ard-snackbar-animation-duration: 150ms;
-  --ard-snackbar-animation-bottom: -0.375rem;
-  --ard-snackbar-animation-scale: 60%;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-snackbar-min-width: min(21rem, 90vw);
+    --ard-snackbar-max-width: min(42rem, 90vw);
+    --ard-snackbar-min-height: 3rem;
+    // --ard-snackbar-background-color: ;
+    // --ard-snackbar-content-color: ;
+    --ard-snackbar-gap: 0.625rem;
+    --ard-snackbar-margin: 0.625rem;
+    --ard-snackbar-padding: 0 0.5rem 0 1rem;
+    // --ard-snackbar-border-radius: ;
+    --ard-snackbar-content-gap: 0.625rem;
+    --ard-snackbar-animation-duration: 150ms;
+    --ard-snackbar-animation-bottom: -0.375rem;
+    --ard-snackbar-animation-scale: 60%;
+  }
 
-@layer ard-theme {
   .ard-snackbar {
     @include C.typeColors();
     min-width: var(--ard-snackbar-min-width, min(21rem, 90vw));
@@ -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,14 +1,14 @@
 @use './coloring' as CM;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-spinner-size: 2rem;
-  --ard-spinner-margin: 0.25rem;
-  --ard-spinner-duration: 1.4s;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-spinner-size: 2rem;
+    --ard-spinner-margin: 0.25rem;
+    --ard-spinner-duration: 1.4s;
+  }
 
-@layer ard-theme {
   ard-spinner {
     display: inline-block;
     width: var(--ard-spinner-size, 2rem);
@@ -25,7 +25,7 @@
     scale: 2.3; //magic number
 
     > circle {
-      stroke: var(--ard-cmpcl--content);
+      stroke: var(--ard-uicl--content);
     }
   }
 }

package/themes/default/stars.scss

@@ -2,30 +2,30 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-star-size: 1.5em;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-star-size: 1.5em;
 
-  --ard-star-button-hitbox-offset: -4px;
-  --ard-star-button-overlay-offset: -0.125em;
-  --ard-star-button-hover-overlay-opacity: 10%;
-  --ard-star-button-focus-overlay-opacity: 0;
-  --ard-star-button-focus-visible-overlay-opacity: 10%;
-  --ard-star-button-active-overlay-opacity: 20%;
-  --ard-star-button-disabled-opacity: 50%;
+    --ard-star-button-hitbox-offset: -4px;
+    --ard-star-button-overlay-offset: -0.125em;
+    --ard-star-button-hover-overlay-opacity: 10%;
+    --ard-star-button-focus-overlay-opacity: 0;
+    --ard-star-button-focus-visible-overlay-opacity: 10%;
+    --ard-star-button-active-overlay-opacity: 20%;
+    --ard-star-button-disabled-opacity: 50%;
 
-  --ard-rating-input-not-in-value-opacity: 50%;
-  --ard-rating-input-disabled-opacity: 50%;
-}
+    --ard-rating-input-not-in-value-opacity: 50%;
+    --ard-rating-input-disabled-opacity: 50%;
+  }
 
-@layer ard-theme {
   .ard-star,
   .ard-star-button,
   .ard-rating-display,
   .ard-rating-input {
     @include coloringMixins.typeColors();
-    color: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--bg-colored);
 
     &.ard-color-gold {
       color: ARD.$gold;