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

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

@@ -1,52 +1,52 @@
 @use './coloring' as CM;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-file-drop-area-min-width: 15rem;
-  --ard-file-drop-area-min-height: 10rem;
-  --ard-file-drop-area-padding: 0.625rem;
-  --ard-file-drop-area-outline-border-width: 2px;
-  --ard-file-drop-area-outline-border-style: dashed;
-  --ard-file-drop-area-outline-padding: 0.375rem;
-  --ard-file-drop-area-content-gap-min: 0.2rem;
-  --ard-file-drop-area-content-gap-preferred: 10%;
-  --ard-file-drop-area-content-gap-max: 1rem;
-  --ard-file-drop-area-icon-font-size: 220%;
-  --ard-file-drop-area-drop-text-font-weight: 500;
-  --ard-file-drop-area-drop-text-font-size: 105%;
-  --ard-file-drop-area-or-text-font-weight: 400;
-  --ard-file-drop-area-or-text-font-size: 95%;
-  --ard-file-drop-area-dragover-text-font-weight: 500;
-  --ard-file-drop-area-dragover-text-font-size: 105%;
-  --ard-file-drop-area-dragover-amount-font-weight: 600;
-  --ard-file-drop-area-dragover-amount-font-size: 120%;
-  --ard-file-drop-area-uploaded-container-gap: 0.75rem;
-  --ard-file-drop-area-uploaded-message-font-weight: 500;
-  --ard-file-drop-area-uploaded-message-font-size: 105%;
-  --ard-file-drop-area-uploaded-amount-font-weight: 600;
-  --ard-file-drop-area-uploaded-amount-font-size: 100%;
-  --ard-file-drop-area-uploaded-files-gap: 0.45rem;
-  --ard-file-drop-area-file-gap: 0.75rem;
-  --ard-file-drop-area-file-icon-font-size: 220%;
-  --ard-file-drop-area-file-info-gap: 0.5ch;
-  --ard-file-drop-area-filename-gap: 0;
-  --ard-file-drop-area-filename-name-line-height: 1;
-  --ard-file-drop-area-filename-name-height: 1em;
-  --ard-file-drop-area-filesize-font-weight: 500;
-  --ard-file-drop-area-filesize-font-size: 83%;
-  --ard-file-drop-area-filesize-opacity: 60%;
-  --ard-file-drop-area-variant-rounded-corner-radius: 0.875rem;
-  --ard-file-drop-area-outline-corner-radius: 0.25rem;
-  --ard-file-drop-area-font-size-compact: 85%;
-  --ard-file-drop-area-min-width-compact: 12rem;
-  --ard-file-drop-area-min-height-compact: 8rem;
-  --ard-file-drop-area-content-gap-min-compact: 0.1667rem;
-  --ard-file-drop-area-content-gap-preferred-compact: 10%;
-  --ard-file-drop-area-content-gap-max-compact: 0.75rem;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-file-drop-area-min-width: 15rem;
+    --ard-file-drop-area-min-height: 10rem;
+    --ard-file-drop-area-padding: 0.625rem;
+    --ard-file-drop-area-outline-border-width: 2px;
+    --ard-file-drop-area-outline-border-style: dashed;
+    --ard-file-drop-area-outline-padding: 0.375rem;
+    --ard-file-drop-area-content-gap-min: 0.2rem;
+    --ard-file-drop-area-content-gap-preferred: 10%;
+    --ard-file-drop-area-content-gap-max: 1rem;
+    --ard-file-drop-area-icon-font-size: 220%;
+    --ard-file-drop-area-drop-text-font-weight: 500;
+    --ard-file-drop-area-drop-text-font-size: 105%;
+    --ard-file-drop-area-or-text-font-weight: 400;
+    --ard-file-drop-area-or-text-font-size: 95%;
+    --ard-file-drop-area-dragover-text-font-weight: 500;
+    --ard-file-drop-area-dragover-text-font-size: 105%;
+    --ard-file-drop-area-dragover-amount-font-weight: 600;
+    --ard-file-drop-area-dragover-amount-font-size: 120%;
+    --ard-file-drop-area-uploaded-container-gap: 0.75rem;
+    --ard-file-drop-area-uploaded-message-font-weight: 500;
+    --ard-file-drop-area-uploaded-message-font-size: 105%;
+    --ard-file-drop-area-uploaded-amount-font-weight: 600;
+    --ard-file-drop-area-uploaded-amount-font-size: 100%;
+    --ard-file-drop-area-uploaded-files-gap: 0.45rem;
+    --ard-file-drop-area-file-gap: 0.75rem;
+    --ard-file-drop-area-file-icon-font-size: 220%;
+    --ard-file-drop-area-file-info-gap: 0.5ch;
+    --ard-file-drop-area-filename-gap: 0;
+    --ard-file-drop-area-filename-name-line-height: 1;
+    --ard-file-drop-area-filename-name-height: 1em;
+    --ard-file-drop-area-filesize-font-weight: 500;
+    --ard-file-drop-area-filesize-font-size: 83%;
+    --ard-file-drop-area-filesize-opacity: 60%;
+    --ard-file-drop-area-variant-rounded-corner-radius: 0.875rem;
+    --ard-file-drop-area-outline-corner-radius: 0.25rem;
+    --ard-file-drop-area-font-size-compact: 85%;
+    --ard-file-drop-area-min-width-compact: 12rem;
+    --ard-file-drop-area-min-height-compact: 8rem;
+    --ard-file-drop-area-content-gap-min-compact: 0.1667rem;
+    --ard-file-drop-area-content-gap-preferred-compact: 10%;
+    --ard-file-drop-area-content-gap-max-compact: 0.75rem;
+  }
 
-@layer ard-theme {
   ard-file-drop-area {
     display: block;
     width: 100%;
@@ -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,33 +1,33 @@
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
-  --ard-form-field-label-font-size: 0.9375rem;
-  --ard-form-field-label-font-weight: 500;
-  --ard-form-field-label-required-font-weight: 500;
-  --ard-form-field-label-required-font-size: 112.5%;
-  --ard-form-field-label-required-color: orangered;
-  --ard-form-field-label-optional-font-weight: 400;
-  --ard-form-field-label-optional-font-size: 0.8125rem;
-  // --ard-form-field-label-optional-color: ;
-  --ard-form-field-label-optional-font-style: italic;
-  // --ard-form-field-error-color: ;
-  // --ard-form-field-success-color: ;
-  --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
-  --ard-form-field-hint-font-size: 0.8125rem;
-  --ard-form-field-hint-line-height: 1.2;
-  --ard-form-field-hint-right-padding-left: 0.5rem;
-  --ard-form-field-hint-error-line-height: 1.2;
-  --ard-form-field-hint-error-gap: 0.375em;
-  --ard-form-field-label-disabled-opacity: 40%;
-  --ard-form-field-hint-disabled-opacity: 50%;
-  --ard-form-field-error-animation-duration: 0.25s;
-  --ard-horizontal-form-field-gap: 0.5rem;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
+    --ard-form-field-label-font-size: 0.9375rem;
+    --ard-form-field-label-font-weight: 500;
+    --ard-form-field-label-required-font-weight: 500;
+    --ard-form-field-label-required-font-size: 112.5%;
+    --ard-form-field-label-required-color: orangered;
+    --ard-form-field-label-optional-font-weight: 400;
+    --ard-form-field-label-optional-font-size: 0.8125rem;
+    // --ard-form-field-label-optional-color: ;
+    --ard-form-field-label-optional-font-style: italic;
+    // --ard-form-field-error-color: ;
+    // --ard-form-field-success-color: ;
+    --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
+    --ard-form-field-hint-font-size: 0.8125rem;
+    --ard-form-field-hint-line-height: 1.2;
+    --ard-form-field-hint-right-padding-left: 0.5rem;
+    --ard-form-field-hint-error-line-height: 1.2;
+    --ard-form-field-hint-error-gap: 0.375em;
+    --ard-form-field-label-disabled-opacity: 40%;
+    --ard-form-field-hint-disabled-opacity: 50%;
+    --ard-form-field-error-animation-duration: 0.25s;
+    --ard-horizontal-form-field-gap: 0.5rem;
+  }
 
-@layer ard-theme {
   ard-form-field,
   ard-horizontal-form-field {
     display: block;

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

@@ -3,47 +3,47 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-autocomplete-input-height: ;
-  // --ard-autocomplete-input-height-compact: ;
-  --ard-autocomplete-input-gap: 0.625rem;
-  // --ard-autocomplete-input-font-size: ;
-  // --ard-autocomplete-input-font-size-compact: ;
-  --ard-autocomplete-input-line-height: 1.25;
-  --ard-autocomplete-input-line-height-compact: 1;
-  --ard-autocomplete-input-font-weight: 400;
-  // --ard-autocomplete-input-padding-top: ;
-  // --ard-autocomplete-input-padding-right: ;
-  // --ard-autocomplete-input-padding-bottom: ;
-  // --ard-autocomplete-input-padding-left: ;
-  // --ard-autocomplete-input-padding-top-compact: ;
-  // --ard-autocomplete-input-padding-right-compact: ;
-  // --ard-autocomplete-input-padding-bottom-compact: ;
-  // --ard-autocomplete-input-padding-left-compact: ;
-  // --ard-autocomplete-input-color: ;
-  // --ard-autocomplete-input-placeholder-color: ;
-  --ard-autocomplete-input-placeholder-opacity: 60%;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-autocomplete-input-height: ;
+    // --ard-autocomplete-input-height-compact: ;
+    --ard-autocomplete-input-gap: 0.625rem;
+    // --ard-autocomplete-input-font-size: ;
+    // --ard-autocomplete-input-font-size-compact: ;
+    --ard-autocomplete-input-line-height: 1.25;
+    --ard-autocomplete-input-line-height-compact: 1;
+    --ard-autocomplete-input-font-weight: 400;
+    // --ard-autocomplete-input-padding-top: ;
+    // --ard-autocomplete-input-padding-right: ;
+    // --ard-autocomplete-input-padding-bottom: ;
+    // --ard-autocomplete-input-padding-left: ;
+    // --ard-autocomplete-input-padding-top-compact: ;
+    // --ard-autocomplete-input-padding-right-compact: ;
+    // --ard-autocomplete-input-padding-bottom-compact: ;
+    // --ard-autocomplete-input-padding-left-compact: ;
+    // --ard-autocomplete-input-color: ;
+    // --ard-autocomplete-input-placeholder-color: ;
+    --ard-autocomplete-input-placeholder-opacity: 60%;
 
-  --ard-autocomplete-input-min-width: 10rem;
-  --ard-autocomplete-input-max-width: 100%;
-  --ard-autocomplete-input-autocomplete-opacity: 37.5%;
-  --ard-autocomplete-input-dropdown-padding: 0;
-  --ard-autocomplete-input-dropdown-max-height: 15rem;
-  --ard-autocomplete-input-dropdown-gap: 0;
-  --ard-autocomplete-input-option-padding: 0.375rem 0.625rem;
-  --ard-autocomplete-input-option-padding-compact: 0.25rem 0.5rem;
-  --ard-autocomplete-input-font-size: 1rem;
-  --ard-autocomplete-input-font-size-compact: 0.875rem;
-  // --ard-autocomplete-input-highlighted-background: ;
-  --ard-autocomplete-input-highlighted-font-weight: 400;
-  // --ard-autocomplete-input-selected-background: ;
-  --ard-autocomplete-input-selected-font-weight: 500;
-  --ard-autocomplete-input-disabled-opacity: 50%;
-}
+    --ard-autocomplete-input-min-width: 10rem;
+    --ard-autocomplete-input-max-width: 100%;
+    --ard-autocomplete-input-autocomplete-opacity: 37.5%;
+    --ard-autocomplete-input-dropdown-padding: 0;
+    --ard-autocomplete-input-dropdown-max-height: 15rem;
+    --ard-autocomplete-input-dropdown-gap: 0;
+    --ard-autocomplete-input-option-padding: 0.375rem 0.625rem;
+    --ard-autocomplete-input-option-padding-compact: 0.25rem 0.5rem;
+    --ard-autocomplete-input-font-size: 1rem;
+    --ard-autocomplete-input-font-size-compact: 0.875rem;
+    // --ard-autocomplete-input-highlighted-background: ;
+    --ard-autocomplete-input-highlighted-font-weight: 400;
+    // --ard-autocomplete-input-selected-background: ;
+    --ard-autocomplete-input-selected-font-weight: 500;
+    --ard-autocomplete-input-disabled-opacity: 50%;
+  }
 
-@layer ard-theme {
   .ard-autocomplete-input {
     @include inputMixin.genericInput(
       var(--ard-autocomplete-input-height, var(--ard-form-field-height, 2.3125rem)),

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,34 +1,34 @@
 @use './shared' as S;
 @use '../../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-date-input-height: ;
-  // --ard-date-input-height-compact: ;
-  --ard-date-input-gap: 0.625rem;
-  // --ard-date-input-font-size: ;
-  // --ard-date-input-font-size-compact: ;
-  --ard-date-input-line-height: 1.25;
-  --ard-date-input-line-height-compact: 1;
-  --ard-date-input-font-weight: 400;
-  // --ard-date-input-padding-top: ;
-  // --ard-date-input-padding-right: ;
-  // --ard-date-input-padding-bottom: ;
-  // --ard-date-input-padding-left: ;
-  // --ard-date-input-padding-top-compact: ;
-  // --ard-date-input-padding-right-compact: ;
-  // --ard-date-input-padding-bottom-compact: ;
-  // --ard-date-input-padding-left-compact: ;
-  // --ard-date-input-color: ;
-  // --ard-date-input-placeholder-color: ;
-  --ard-date-input-placeholder-opacity: 60%;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-date-input-height: ;
+    // --ard-date-input-height-compact: ;
+    --ard-date-input-gap: 0.625rem;
+    // --ard-date-input-font-size: ;
+    // --ard-date-input-font-size-compact: ;
+    --ard-date-input-line-height: 1.25;
+    --ard-date-input-line-height-compact: 1;
+    --ard-date-input-font-weight: 400;
+    // --ard-date-input-padding-top: ;
+    // --ard-date-input-padding-right: ;
+    // --ard-date-input-padding-bottom: ;
+    // --ard-date-input-padding-left: ;
+    // --ard-date-input-padding-top-compact: ;
+    // --ard-date-input-padding-right-compact: ;
+    // --ard-date-input-padding-bottom-compact: ;
+    // --ard-date-input-padding-left-compact: ;
+    // --ard-date-input-color: ;
+    // --ard-date-input-placeholder-color: ;
+    --ard-date-input-placeholder-opacity: 60%;
 
-  --ard-date-input-input-padding: 0 2.625rem 0 0.375rem;
-  --ard-date-input-multipage-gap: 0;
-}
+    --ard-date-input-input-padding: 0 2.625rem 0 0.375rem;
+    --ard-date-input-multipage-gap: 0;
+  }
 
-@layer ard-theme {
   ard-date-input .ard-date-input,
   ard-date-range-input .ard-date-range-input,
   ard-multipage-date-range-input .ard-multipage-date-range-input {

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

@@ -2,28 +2,28 @@
 @use '../../variables' as ARD;
 @use '../mixins' as defaultMixins;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-digit-input-font-family: ;
-  --ard-digit-input-font-weight: 500;
-  // --ard-digit-input-color: ;
-  --ard-digit-input-gap: 0.375em;
-  --ard-digit-input-size: 2.0625em;
-  // --ard-digit-input-caret-color: ;
-  // --ard-digit-input-placeholder-color: ;
-  --ard-digit-input-placeholder-opacity: 60%;
-  --ard-digit-input-transition-duration: 150ms;
-  // --ard-digit-input-rectangle-height: ;
-  --ard-digit-input-rectangle-font-size: 1.25em;
-  --ard-digit-input-success-background-color: transparent;
-  // --ard-digit-input-success-border-color: ;
-  // --ard-digit-input-error-background-color: ;
-  // --ard-digit-input-error-border-color: ;
-  --ard-digit-input-disabled-opacity: 50%;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-digit-input-font-family: ;
+    --ard-digit-input-font-weight: 500;
+    // --ard-digit-input-color: ;
+    --ard-digit-input-gap: 0.375em;
+    --ard-digit-input-size: 2.0625em;
+    // --ard-digit-input-caret-color: ;
+    // --ard-digit-input-placeholder-color: ;
+    --ard-digit-input-placeholder-opacity: 60%;
+    --ard-digit-input-transition-duration: 150ms;
+    // --ard-digit-input-rectangle-height: ;
+    --ard-digit-input-rectangle-font-size: 1.25em;
+    --ard-digit-input-success-background-color: transparent;
+    // --ard-digit-input-success-border-color: ;
+    // --ard-digit-input-error-background-color: ;
+    // --ard-digit-input-error-border-color: ;
+    --ard-digit-input-disabled-opacity: 50%;
+  }
 
-@layer ard-theme {
   ard-digit-input {
     font-family: var(--ard-digit-input-font-family, var(--ard-font-family));
     font-weight: var(--ard-digit-input-font-weight, 500);

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

@@ -4,55 +4,55 @@
 @use '../coloring' as CM;
 @use '../../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-file-input-height: ;
-  // --ard-file-input-height-compact: ;
-  --ard-file-input-gap: 0.625rem;
-  // --ard-file-input-font-size: ;
-  // --ard-file-input-font-size-compact: ;
-  --ard-file-input-line-height: 1.25;
-  --ard-file-input-line-height-compact: 1;
-  --ard-file-input-font-weight: 400;
-  // --ard-file-input-padding-top: ;
-  // --ard-file-input-padding-right: ;
-  // --ard-file-input-padding-bottom: ;
-  // --ard-file-input-padding-left: ;
-  // --ard-file-input-padding-top-compact: ;
-  // --ard-file-input-padding-right-compact: ;
-  // --ard-file-input-padding-bottom-compact: ;
-  // --ard-file-input-padding-left-compact: ;
-  // --ard-file-input-color: ;
-  // --ard-file-input-placeholder-color: ;
-  --ard-file-input-placeholder-opacity: 60%;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-file-input-height: ;
+    // --ard-file-input-height-compact: ;
+    --ard-file-input-gap: 0.625rem;
+    // --ard-file-input-font-size: ;
+    // --ard-file-input-font-size-compact: ;
+    --ard-file-input-line-height: 1.25;
+    --ard-file-input-line-height-compact: 1;
+    --ard-file-input-font-weight: 400;
+    // --ard-file-input-padding-top: ;
+    // --ard-file-input-padding-right: ;
+    // --ard-file-input-padding-bottom: ;
+    // --ard-file-input-padding-left: ;
+    // --ard-file-input-padding-top-compact: ;
+    // --ard-file-input-padding-right-compact: ;
+    // --ard-file-input-padding-bottom-compact: ;
+    // --ard-file-input-padding-left-compact: ;
+    // --ard-file-input-color: ;
+    // --ard-file-input-placeholder-color: ;
+    --ard-file-input-placeholder-opacity: 60%;
 
-  --ard-file-input-min-width: 10rem;
-  --ard-file-input-max-width: 100%;
-  --ard-file-input-gap: 0.375rem;
-  --ard-file-input-dragover-outline-width: 2px;
-  --ard-file-input-dragover-outline-style: solid;
-  --ard-file-input-browse-button-height: calc(100% - 0.25rem);
-  --ard-file-input-browse-button-width: unset;
-  --ard-file-input-browse-button-margin: 0.125rem;
-  --ard-file-input-browse-button-aspect-ratio: 1;
-  --ard-file-input-browse-button-border: none;
-  --ard-file-input-browse-button-border-radius: 9999px;
-  --ard-file-input-browse-button-background: none;
-  --ard-file-input-browse-button-padding: 0;
-  // --ard-file-input-browse-button-color: ;
-  // --ard-file-input-browse-button-color-error: ;
-  --ard-file-input-browse-button-overlay-offset: 0rem;
-  // --ard-file-input-browse-button-overlay-color: ;
-  --ard-file-input-browse-button-overlay-hover-opacity: 4%;
-  --ard-file-input-browse-button-overlay-focus-opacity: 0;
-  --ard-file-input-browse-button-overlay-active-opacity: 12%;
-  --ard-file-input-browse-button-overlay-focus-visible-opacity: 16%;
-  --ard-file-input-file-name-font-weight: 500;
-  --ard-file-input-file-ext-font-weight: 500;
-}
+    --ard-file-input-min-width: 10rem;
+    --ard-file-input-max-width: 100%;
+    --ard-file-input-gap: 0.375rem;
+    --ard-file-input-dragover-outline-width: 2px;
+    --ard-file-input-dragover-outline-style: solid;
+    --ard-file-input-browse-button-height: calc(100% - 0.25rem);
+    --ard-file-input-browse-button-width: unset;
+    --ard-file-input-browse-button-margin: 0.125rem;
+    --ard-file-input-browse-button-aspect-ratio: 1;
+    --ard-file-input-browse-button-border: none;
+    --ard-file-input-browse-button-border-radius: 9999px;
+    --ard-file-input-browse-button-background: none;
+    --ard-file-input-browse-button-padding: 0;
+    // --ard-file-input-browse-button-color: ;
+    // --ard-file-input-browse-button-color-error: ;
+    --ard-file-input-browse-button-overlay-offset: 0rem;
+    // --ard-file-input-browse-button-overlay-color: ;
+    --ard-file-input-browse-button-overlay-hover-opacity: 4%;
+    --ard-file-input-browse-button-overlay-focus-opacity: 0;
+    --ard-file-input-browse-button-overlay-active-opacity: 12%;
+    --ard-file-input-browse-button-overlay-focus-visible-opacity: 16%;
+    --ard-file-input-file-name-font-weight: 500;
+    --ard-file-input-file-ext-font-weight: 500;
+  }
 
-@layer ard-theme {
   .ard-file-input-form-field-frame {
     .ard-form-field-overlay {
       display: none;
@@ -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,36 +3,36 @@
 @use '../clear-button' as CB;
 @use '../../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-hex-input-height: ;
-  // --ard-hex-input-height-compact: ;
-  --ard-hex-input-gap: 0.625rem;
-  // --ard-hex-input-font-size: ;
-  // --ard-hex-input-font-size-compact: ;
-  --ard-hex-input-line-height: 1.25;
-  --ard-hex-input-line-height-compact: 1;
-  --ard-hex-input-font-weight: 400;
-  // --ard-hex-input-padding-top: ;
-  // --ard-hex-input-padding-right: ;
-  // --ard-hex-input-padding-bottom: ;
-  // --ard-hex-input-padding-left: ;
-  // --ard-hex-input-padding-top-compact: ;
-  // --ard-hex-input-padding-right-compact: ;
-  // --ard-hex-input-padding-bottom-compact: ;
-  // --ard-hex-input-padding-left-compact: ;
-  // --ard-hex-input-color: ;
-  // --ard-hex-input-placeholder-color: ;
-  --ard-hex-input-placeholder-opacity: 60%;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-hex-input-height: ;
+    // --ard-hex-input-height-compact: ;
+    --ard-hex-input-gap: 0.625rem;
+    // --ard-hex-input-font-size: ;
+    // --ard-hex-input-font-size-compact: ;
+    --ard-hex-input-line-height: 1.25;
+    --ard-hex-input-line-height-compact: 1;
+    --ard-hex-input-font-weight: 400;
+    // --ard-hex-input-padding-top: ;
+    // --ard-hex-input-padding-right: ;
+    // --ard-hex-input-padding-bottom: ;
+    // --ard-hex-input-padding-left: ;
+    // --ard-hex-input-padding-top-compact: ;
+    // --ard-hex-input-padding-right-compact: ;
+    // --ard-hex-input-padding-bottom-compact: ;
+    // --ard-hex-input-padding-left-compact: ;
+    // --ard-hex-input-color: ;
+    // --ard-hex-input-placeholder-color: ;
+    --ard-hex-input-placeholder-opacity: 60%;
 
-  --ard-hex-input-min-width: 10rem;
-  --ard-hex-input-max-width: 100%;
-  // --ard-hex-input-hash-color: ;
-  --ard-hex-input-hash-opacity: 70%;
-}
+    --ard-hex-input-min-width: 10rem;
+    --ard-hex-input-max-width: 100%;
+    // --ard-hex-input-hash-color: ;
+    --ard-hex-input-hash-opacity: 70%;
+  }
 
-@layer ard-theme {
   .ard-hex-input {
     @include inputMixin.genericInput(
       var(--ard-hex-input-height, var(--ard-form-field-height, 2.3125rem)),