@ardium-ui/ui 3.6.0 → 4.0.0

package/prebuilt-themes/default/modal.css

@@ -11,7 +11,8 @@
   background: var(--ard-darken-overlay-strong);
 }
 .ard-modal .ard-modal-panel {
-  padding: 1.25rem 3rem 1.5rem 3rem;
+  padding: 1.25rem;
+  padding-top: 1rem;
   background: var(--ard-bg);
   max-width: calc(100vw - 4rem);
   position: relative;
@@ -29,7 +30,7 @@
   top: 0.5rem;
 }
 .ard-modal .ard-modal-panel.ard-modal-has-close-button .ard-modal-heading {
-  padding-right: 1rem;
+  padding-right: 2rem;
 }
 .ard-modal .ard-modal-heading {
   display: flex;

package/prebuilt-themes/default/modal.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/modal.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YCcoB;;ADZtB;EACE;EACA,YChBC;EDiBD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAIF;EACE;;AAIN;EACE;EACA;EACA;;AAEA;EACE;EACA,OCvCC;EDwCD;EACA;;AAEF;EACE;EACA;EACA;;AAKF;EACE,YCzBW;;AD8Bb;EACE;;AAIF;EACE;;AAMF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA","file":"modal.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/modal.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YCcoB;;ADZtB;EACE;EACA;EACA,YCjBC;EDkBD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAIF;EACE;;AAIN;EACE;EACA;EACA;;AAEA;EACE;EACA,OCxCC;EDyCD;EACA;;AAEF;EACE;EACA;EACA;;AAKF;EACE,YC1BW;;AD+Bb;EACE;;AAIF;EACE;;AAMF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA","file":"modal.css"}

package/prebuilt-themes/default/spinner.css

@@ -1,7 +1,7 @@
 ard-spinner {
   display: inline-block;
-  height: 2rem;
   width: 2rem;
+  aspect-ratio: 1;
   position: relative;
   margin: 0.25rem;
 }

package/prebuilt-themes/default/stars.css

@@ -1,13 +1,13 @@
 .ard-star,
 .ard-star-button,
-.ard-star-display,
-.ard-star-input {
+.ard-rating-display,
+.ard-rating-input {
   color: var(--ard-cmpcl--bg-colored);
 }
 .ard-star.ard-color-none,
 .ard-star-button.ard-color-none,
-.ard-star-display.ard-color-none,
-.ard-star-input.ard-color-none {
+.ard-rating-display.ard-color-none,
+.ard-rating-input.ard-color-none {
   --ard-cmpcl--bg: var(--ard-bg);
   --ard-cmpcl--bg-colored: var(--ard-bg-alt);
   --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
@@ -26,8 +26,8 @@
 }
 .ard-star.ard-color-primary,
 .ard-star-button.ard-color-primary,
-.ard-star-display.ard-color-primary,
-.ard-star-input.ard-color-primary {
+.ard-rating-display.ard-color-primary,
+.ard-rating-input.ard-color-primary {
   --ard-cmpcl--bg: rgb(var(--ard-primary-500));
   --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
@@ -46,8 +46,8 @@
 }
 .ard-star.ard-color-secondary,
 .ard-star-button.ard-color-secondary,
-.ard-star-display.ard-color-secondary,
-.ard-star-input.ard-color-secondary {
+.ard-rating-display.ard-color-secondary,
+.ard-rating-input.ard-color-secondary {
   --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
   --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
@@ -66,8 +66,8 @@
 }
 .ard-star.ard-color-warn,
 .ard-star-button.ard-color-warn,
-.ard-star-display.ard-color-warn,
-.ard-star-input.ard-color-warn {
+.ard-rating-display.ard-color-warn,
+.ard-rating-input.ard-color-warn {
   --ard-cmpcl--bg: rgb(var(--ard-warn-500));
   --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
@@ -86,8 +86,8 @@
 }
 .ard-star.ard-color-danger,
 .ard-star-button.ard-color-danger,
-.ard-star-display.ard-color-danger,
-.ard-star-input.ard-color-danger {
+.ard-rating-display.ard-color-danger,
+.ard-rating-input.ard-color-danger {
   --ard-cmpcl--bg: rgb(var(--ard-danger-700));
   --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
@@ -106,8 +106,8 @@
 }
 .ard-star.ard-color-success,
 .ard-star-button.ard-color-success,
-.ard-star-display.ard-color-success,
-.ard-star-input.ard-color-success {
+.ard-rating-display.ard-color-success,
+.ard-rating-input.ard-color-success {
   --ard-cmpcl--bg: rgb(var(--ard-success-700));
   --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
@@ -126,8 +126,8 @@
 }
 .ard-star.ard-color-info,
 .ard-star-button.ard-color-info,
-.ard-star-display.ard-color-info,
-.ard-star-input.ard-color-info {
+.ard-rating-display.ard-color-info,
+.ard-rating-input.ard-color-info {
   --ard-cmpcl--bg: rgb(var(--ard-info-500));
   --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
   --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
@@ -146,8 +146,8 @@
 }
 .ard-star.ard-color-currentColor,
 .ard-star-button.ard-color-currentColor,
-.ard-star-display.ard-color-currentColor,
-.ard-star-input.ard-color-currentColor {
+.ard-rating-display.ard-color-currentColor,
+.ard-rating-input.ard-color-currentColor {
   --ard-cmpcl--bg: var(--ard-bg);
   --ard-cmpcl--bg-colored: currentColor;
   --ard-cmpcl--on-bg: currentColor;
@@ -161,72 +161,30 @@
   --ard-cmpcl--overlay-colored: currentColor;
   --ard-cmpcl--overlay-colored-light: currentColor;
 }
-.ard-star.ard-color-star,
-.ard-star-button.ard-color-star,
-.ard-star-display.ard-color-star,
-.ard-star-input.ard-color-star {
-  color: var(--ard-star);
+.ard-star.ard-color-gold,
+.ard-star-button.ard-color-gold,
+.ard-rating-display.ard-color-gold,
+.ard-rating-input.ard-color-gold {
+  color: var(--ard-gold);
 }
 
 .ard-star {
-  font-size: 1.5em;
-  width: 1em;
-  height: 1em;
+  font-size: inherit;
+  width: 1.5em;
+  height: 1.5em;
   position: relative;
 }
-.ard-star .ard-star-icon {
-  display: none;
-}
-.ard-star .ard-star-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.ard-star .ard-star-selected::after {
-  content: "star";
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
-  font-size: 1em;
-  line-height: unset;
-}
-.ard-star .ard-star-half::after {
-  content: "star_half";
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-  font-size: 1em;
-  line-height: unset;
-}
-.ard-star .ard-star-unselected::after {
-  content: "star";
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-  font-size: 1em;
-  line-height: unset;
-}
-.ard-star.ard-star-fill-none .ard-star-unselected {
-  display: block;
-}
-.ard-star.ard-star-fill-half .ard-star-half {
-  display: block;
-}
-.ard-star.ard-star-fill-filled .ard-star-selected {
-  display: block;
-}
 
-.ard-star-display,
-.ard-star-input {
+.ard-rating-display,
+.ard-rating-input {
   display: flex;
   user-select: none;
 }
 
-.ard-star-input {
+.ard-rating-input {
   cursor: pointer;
 }
-.ard-star-input .ard-star-not-in-value {
+.ard-rating-input .ard-star-not-in-value {
   opacity: 50%;
 }
 
@@ -283,7 +241,7 @@
 }
 
 .ard-disabled > .ard-star-button,
-.ard-disabled > .ard-star-input {
+.ard-disabled > .ard-rating-input {
   pointer-events: none;
   opacity: 50%;
 }

package/prebuilt-themes/default/stars.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/stars.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;AAAA;EAKE;;ACNA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD3HF;AAAA;AAAA;AAAA;EACE,OE8BG;;;AF3BP;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EG5BF;EACA;EACA;EH4BE;EACA;;AAEF;EACE;EGlCF;EACA;EACA;EHkCE;EACA;;AAEF;EACE;EGxCF;EACA;EACA;EHwCE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACE;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EGlFA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EH2EE;EACA;EACA;EACA;EACA;EACA;EACA;;AG9EF;EACE;EAEA;;AAKA;EACE;;AH0EF;EACE;;AAIF;EACE;;;AAMJ;AAAA;EAEE;EACA","file":"stars.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/stars.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;AAAA;EAKE;;ACNA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD3HF;AAAA;AAAA;AAAA;EACE,OE8BG;;;AF3BP;EACE;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;EACE;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EG7CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EHsCE;EACA;EACA;EACA;EACA;EACA;EACA;;AGzCF;EACE;EAEA;;AAKA;EACE;;AHqCF;EACE;;AAIF;EACE;;;AAMJ;AAAA;EAEE;EACA","file":"stars.css"}

package/public-api.d.ts

@@ -20,8 +20,8 @@ export * from './lib/radio';
 export * from './lib/segment';
 export * from './lib/slide-toggle';
 export * from './lib/slider';
+export * from './lib/star/rating-input';
 export * from './lib/star/star-button';
-export * from './lib/star/star-input';
 export * from './lib/statebox';
 export * from './lib/calendar';
 export * from './lib/checkbox-list';
@@ -36,7 +36,7 @@ export * from './lib/form-field-frame';
 export * from './lib/kbd';
 export * from './lib/kbd-shortcut';
 export * from './lib/star';
-export * from './lib/star/star-display';
+export * from './lib/star/rating-display';
 export * from './lib/table';
 export * from './lib/table-from-csv';
 export * from './lib/table-pagination';

package/themes/_variables.scss

@@ -1,121 +1,121 @@
-$bg: var(--ard-bg);
-$bg-alt: var(--ard-bg-alt);
-$overlay: var(--ard-overlay);
-$overlay-rgb: var(--ard-overlay-rgb);
-$bg-d: var(--ard-bg-darker);
-$bg-f: var(--ard-bg-filled);
-$bg-f-alt: var(--ard-bg-filled-alt);
-$text: var(--ard-text);
-$text2: var(--ard-text2);
-$text3: var(--ard-text3);
-$text-alt: var(--ard-text-alt);
-$text2-alt: var(--ard-text2-alt);
-$text3-alt: var(--ard-text3-alt);
-$border-dark: var(--ard-border-dark);
-$border: var(--ard-border);
-$border-light: var(--ard-border-light);
-$detail: var(--ard-detail);
-$detail-light: var(--ard-detail-light);
-$detail-ultralight: var(--ard-detail-ultralight);
-$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
-
-$lighten-overlay: var(--ard-lighten-overlay);
-$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
-$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
-$lighten-overlay-light: var(--ard-lighten-overlay-light);
-$darken-overlay: var(--ard-darken-overlay);
-$darken-overlay-strong: var(--ard-darken-overlay-strong);
-$darken-overlay-medium: var(--ard-darken-overlay-medium);
-$darken-overlay-light: var(--ard-darken-overlay-light);
-$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
-
-$box-shadow: var(--ard-box-shadow);
-$card-shadow: var(--ard-card-shadow);
-$simple-shadow: var(--ard-simple-shadow);
-$simple-shadow2: var(--ard-simple-shadow2);
-$simple-shadow3: var(--ard-simple-shadow3);
-
-$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
-
-$clear-button-size: var(--ard-clear-button-size);
-$dropdown-button-size: var(--ard-dropdown-button-size);
-
-$star: var(--ard-star);
-
-$main50: rgb(var(--ard-primary-50));
-$main50-rgb: var(--ard-primary-50);
-$main100: rgb(var(--ard-primary-100));
-$main100-rgb: var(--ard-primary-100);
-$main300: rgb(var(--ard-primary-300));
-$main300-rgb: var(--ard-primary-300);
-$main500: rgb(var(--ard-primary-500));
-$main500-rgb: var(--ard-primary-500);
-$main700: rgb(var(--ard-primary-700));
-$main700-rgb: var(--ard-primary-700);
-$main900: rgb(var(--ard-primary-900));
-$main900-rgb: var(--ard-primary-900);
-
-$scnd50: rgb(var(--ard-secondary-50));
-$scnd50-rgb: var(--ard-secondary-50);
-$scnd100: rgb(var(--ard-secondary-100));
-$scnd100-rgb: var(--ard-secondary-100);
-$scnd300: rgb(var(--ard-secondary-300));
-$scnd300-rgb: var(--ard-secondary-300);
-$scnd500: rgb(var(--ard-secondary-500));
-$scnd500-rgb: var(--ard-secondary-500);
-$scnd700: rgb(var(--ard-secondary-700));
-$scnd700-rgb: var(--ard-secondary-700);
-$scnd900: rgb(var(--ard-secondary-900));
-$scnd900-rgb: var(--ard-secondary-900);
-
-$danger50: rgb(var(--ard-danger-50));
-$danger50-rgb: var(--ard-danger-50);
-$danger100: rgb(var(--ard-danger-100));
-$danger100-rgb: var(--ard-danger-100);
-$danger300: rgb(var(--ard-danger-300));
-$danger300-rgb: var(--ard-danger-300);
-$danger500: rgb(var(--ard-danger-500));
-$danger500-rgb: var(--ard-danger-500);
-$danger700: rgb(var(--ard-danger-700));
-$danger700-rgb: var(--ard-danger-700);
-$danger900: rgb(var(--ard-danger-900));
-$danger900-rgb: var(--ard-danger-900);
-
-$warn50: rgb(var(--ard-warn-50));
-$warn50-rgb: var(--ard-warn-50);
-$warn100: rgb(var(--ard-warn-100));
-$warn100-rgb: var(--ard-warn-100);
-$warn300: rgb(var(--ard-warn-300));
-$warn300-rgb: var(--ard-warn-300);
-$warn500: rgb(var(--ard-warn-500));
-$warn500-rgb: var(--ard-warn-500);
-$warn700: rgb(var(--ard-warn-700));
-$warn700-rgb: var(--ard-warn-700);
-$warn900: rgb(var(--ard-warn-900));
-$warn900-rgb: var(--ard-warn-900);
-
-$success50: rgb(var(--ard-success-50));
-$success50-rgb: var(--ard-success-50);
-$success100: rgb(var(--ard-success-100));
-$success100-rgb: var(--ard-success-100);
-$success300: rgb(var(--ard-success-300));
-$success300-rgb: var(--ard-success-300);
-$success500: rgb(var(--ard-success-500));
-$success500-rgb: var(--ard-success-500);
-$success700: rgb(var(--ard-success-700));
-$success700-rgb: var(--ard-success-700);
-$success900: rgb(var(--ard-success-900));
-$success900-rgb: var(--ard-success-900);
-
-$info50: rgb(var(--ard-info-50));
-$info50-rgb: var(--ard-info-50);
-$info100: rgb(var(--ard-info-100));
-$info100-rgb: var(--ard-info-100);
-$info300: rgb(var(--ard-info-300));
-$info300-rgb: var(--ard-info-300);
-$info500: rgb(var(--ard-info-500));
-$info500-rgb: var(--ard-info-500);
-$info700: rgb(var(--ard-info-700));
-$info700-rgb: var(--ard-info-700);
-$info900: rgb(var(--ard-info-900));
-$info900-rgb: var(--ard-info-900);
+$bg: var(--ard-bg);
+$bg-alt: var(--ard-bg-alt);
+$overlay: var(--ard-overlay);
+$overlay-rgb: var(--ard-overlay-rgb);
+$bg-d: var(--ard-bg-darker);
+$bg-f: var(--ard-bg-filled);
+$bg-f-alt: var(--ard-bg-filled-alt);
+$text: var(--ard-text);
+$text2: var(--ard-text2);
+$text3: var(--ard-text3);
+$text-alt: var(--ard-text-alt);
+$text2-alt: var(--ard-text2-alt);
+$text3-alt: var(--ard-text3-alt);
+$border-dark: var(--ard-border-dark);
+$border: var(--ard-border);
+$border-light: var(--ard-border-light);
+$detail: var(--ard-detail);
+$detail-light: var(--ard-detail-light);
+$detail-ultralight: var(--ard-detail-ultralight);
+$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
+
+$lighten-overlay: var(--ard-lighten-overlay);
+$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
+$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
+$lighten-overlay-light: var(--ard-lighten-overlay-light);
+$darken-overlay: var(--ard-darken-overlay);
+$darken-overlay-strong: var(--ard-darken-overlay-strong);
+$darken-overlay-medium: var(--ard-darken-overlay-medium);
+$darken-overlay-light: var(--ard-darken-overlay-light);
+$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
+
+$box-shadow: var(--ard-box-shadow);
+$card-shadow: var(--ard-card-shadow);
+$simple-shadow: var(--ard-simple-shadow);
+$simple-shadow2: var(--ard-simple-shadow2);
+$simple-shadow3: var(--ard-simple-shadow3);
+
+$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
+
+$clear-button-size: var(--ard-clear-button-size);
+$dropdown-button-size: var(--ard-dropdown-button-size);
+
+$gold: var(--ard-gold);
+
+$main50: rgb(var(--ard-primary-50));
+$main50-rgb: var(--ard-primary-50);
+$main100: rgb(var(--ard-primary-100));
+$main100-rgb: var(--ard-primary-100);
+$main300: rgb(var(--ard-primary-300));
+$main300-rgb: var(--ard-primary-300);
+$main500: rgb(var(--ard-primary-500));
+$main500-rgb: var(--ard-primary-500);
+$main700: rgb(var(--ard-primary-700));
+$main700-rgb: var(--ard-primary-700);
+$main900: rgb(var(--ard-primary-900));
+$main900-rgb: var(--ard-primary-900);
+
+$scnd50: rgb(var(--ard-secondary-50));
+$scnd50-rgb: var(--ard-secondary-50);
+$scnd100: rgb(var(--ard-secondary-100));
+$scnd100-rgb: var(--ard-secondary-100);
+$scnd300: rgb(var(--ard-secondary-300));
+$scnd300-rgb: var(--ard-secondary-300);
+$scnd500: rgb(var(--ard-secondary-500));
+$scnd500-rgb: var(--ard-secondary-500);
+$scnd700: rgb(var(--ard-secondary-700));
+$scnd700-rgb: var(--ard-secondary-700);
+$scnd900: rgb(var(--ard-secondary-900));
+$scnd900-rgb: var(--ard-secondary-900);
+
+$danger50: rgb(var(--ard-danger-50));
+$danger50-rgb: var(--ard-danger-50);
+$danger100: rgb(var(--ard-danger-100));
+$danger100-rgb: var(--ard-danger-100);
+$danger300: rgb(var(--ard-danger-300));
+$danger300-rgb: var(--ard-danger-300);
+$danger500: rgb(var(--ard-danger-500));
+$danger500-rgb: var(--ard-danger-500);
+$danger700: rgb(var(--ard-danger-700));
+$danger700-rgb: var(--ard-danger-700);
+$danger900: rgb(var(--ard-danger-900));
+$danger900-rgb: var(--ard-danger-900);
+
+$warn50: rgb(var(--ard-warn-50));
+$warn50-rgb: var(--ard-warn-50);
+$warn100: rgb(var(--ard-warn-100));
+$warn100-rgb: var(--ard-warn-100);
+$warn300: rgb(var(--ard-warn-300));
+$warn300-rgb: var(--ard-warn-300);
+$warn500: rgb(var(--ard-warn-500));
+$warn500-rgb: var(--ard-warn-500);
+$warn700: rgb(var(--ard-warn-700));
+$warn700-rgb: var(--ard-warn-700);
+$warn900: rgb(var(--ard-warn-900));
+$warn900-rgb: var(--ard-warn-900);
+
+$success50: rgb(var(--ard-success-50));
+$success50-rgb: var(--ard-success-50);
+$success100: rgb(var(--ard-success-100));
+$success100-rgb: var(--ard-success-100);
+$success300: rgb(var(--ard-success-300));
+$success300-rgb: var(--ard-success-300);
+$success500: rgb(var(--ard-success-500));
+$success500-rgb: var(--ard-success-500);
+$success700: rgb(var(--ard-success-700));
+$success700-rgb: var(--ard-success-700);
+$success900: rgb(var(--ard-success-900));
+$success900-rgb: var(--ard-success-900);
+
+$info50: rgb(var(--ard-info-50));
+$info50-rgb: var(--ard-info-50);
+$info100: rgb(var(--ard-info-100));
+$info100-rgb: var(--ard-info-100);
+$info300: rgb(var(--ard-info-300));
+$info300-rgb: var(--ard-info-300);
+$info500: rgb(var(--ard-info-500));
+$info500-rgb: var(--ard-info-500);
+$info700: rgb(var(--ard-info-700));
+$info700-rgb: var(--ard-info-700);
+$info900: rgb(var(--ard-info-900));
+$info900-rgb: var(--ard-info-900);