@ardium-ui/ui 5.0.0-alpha.45 → 5.0.0-alpha.47

package/themes/default/select.scss

@@ -2,9 +2,11 @@
 @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-height: ;
+  // --ard-select-height-compact: ;
   --ard-select-gap: 0.625rem;
   --ard-select-gap-compact: 0.5rem;
   --ard-select-controls-gap: 0.625rem;
@@ -12,12 +14,12 @@
   --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-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-color: ;
   --ard-select-dropdown-arrow-active-transform: rotate(180deg);
   --ard-select-dropdown-arrow-transition: 0.2s ease-in-out;
 
@@ -28,8 +30,8 @@
   --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-font-size: ;
+  // --ard-select-dropdown-font-size-compact: ;
   --ard-select-dropdown-padding: 0.375em 0.625em;
   --ard-select-dropdown-gap: 0;
 
@@ -39,11 +41,11 @@
   --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-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-selected-bg: ;
+  // --ard-select-dropdown-option-selected-highlighted-bg: ;
   --ard-select-dropdown-option-disabled-opacity: 50%;
 
   --ard-select-dropdown-add-custom-gap: 0.375rem;
@@ -60,7 +62,7 @@
   gap: var(--ard-select-gap, 0.625rem);
   padding: var(--ard-select-padding, 0 1em 0 0.375em);
   font-family: var(--ard-font-family);
-  font-size: var(--ard-select-font-size, 1rem);
+  font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
   color: var(--ard-select-text-color, var(--ard-text, rgba(0, 0, 0, 100%)));
 
   @include CB.clearButton();
@@ -71,7 +73,7 @@
     height: 2em;
     display: flex;
     align-items: center;
-    font-size: var(--ard-select-font-size, 1rem);
+    font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
     text-size-adjust: 100%;
     flex-grow: 1;
     overflow: hidden;
@@ -79,7 +81,7 @@
     .ard-placeholder {
       font: inherit;
       position: absolute;
-      color: var(--ard-select-placeholder-color, rgba(0, 0, 0, 75%));
+      color: var(--ard-select-placeholder-color, var(--ard-text3, rgba(0, 0, 0, 75%)));
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -190,8 +192,8 @@
 
   //! compact
   &.ard-compact {
-    font-size: var(--ard-select-font-size-compact, 0.875rem);
-    height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
+    font-size: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
+    min-height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
     padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
 
     .ard-select-controls {
@@ -279,7 +281,7 @@
 
   //! compact
   > .ard-compact {
-    font-size: var(--ard-select-dropdown-font-size-compact, 0.85rem);
+    font-size: var(--ard-select-dropdown-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
   }
 }
 

package/themes/default/slider.scss

@@ -3,23 +3,25 @@
 @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-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-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-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-bg: ;
   --ard-slider-handle-border: none;
   --ard-slider-handle-border-radius: 9999px;
   --ard-slider-handle-hitbox-size: 0.375em;
@@ -29,8 +31,8 @@
   --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-bg: ;
+  // --ard-slider-label-color: ;
   --ard-slider-label-height: 2em;
   --ard-slider-label-border: none;
   --ard-slider-label-border-radius: 0.375em;

package/themes/default/tabber.scss

@@ -1,6 +1,8 @@
 @use './coloring' as CM;
 @use './mixins' as M;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
 :root {
   --ard-tabber-tab-height: 2.5em;
   --ard-tabber-tab-font-size: 0.875rem;
@@ -11,7 +13,7 @@
   --ard-tabber-tab-gap: 0;
   --ard-tabber-tab-content-gap: 0.375rem;
   --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
-  --ard-tabber-tab-overlay-color: ;
+  // --ard-tabber-tab-overlay-color: ;
   --ard-tabber-tab-hover-opacity: 4%;
   --ard-tabber-tab-active-opacity: 12%;
   --ard-tabber-tab-focus-visible-opacity: 18%;

package/themes/default/table.scss

@@ -161,15 +161,15 @@
   }
 
   //! color
-  --ard-_table-header-border: ;
-  --ard-_table-header-border-light: ;
+  // --ard-_table-header-border: ;
+  // --ard-_table-header-border-light: ;
   --ard-_table-border: ARD.$border;
-  --ard-_table-header-background: ;
-  --ard-_table-header-background-light: ;
-  --ard-_table-header-color: ;
-  --ard-_table-header-color-on-bg: ;
-  --ard-_table-overlay: ;
-  --ard-_table-overlay-colorless: ;
+  // --ard-_table-header-background: ;
+  // --ard-_table-header-background-light: ;
+  // --ard-_table-header-color: ;
+  // --ard-_table-header-color-on-bg: ;
+  // --ard-_table-overlay: ;
+  // --ard-_table-overlay-colorless: ;
 
   //! appearances
   &.ard-appearance-strong {