@ardium-ui/ui 1.0.0

package/prebuilt-themes/default/buttons/button.css

@@ -0,0 +1,290 @@
+ard-button {
+  display: block;
+  width: max-content;
+  height: max-content;
+}
+
+.ard-button {
+  font-family: "Roboto", sans-serif;
+  margin: 2px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  background: transparent;
+  gap: 6px;
+  font-size: 0.875rem;
+  height: 2.5em;
+  padding: 0 1.2em;
+  letter-spacing: 0.5px;
+}
+.ard-button.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);
+  --ard-cmpcl--bg-header: var(--ard-bg-filled);
+  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+  --ard-cmpcl--on-bg: var(--ard-text);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: var(--ard-text);
+  --ard-cmpcl--border-light: var(--ard-text2);
+  --ard-cmpcl--content: var(--ard-text);
+  --ard-cmpcl--content-light: var(--ard-text-alt);
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-primary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+  --ard-cmpcl--content: rgb(var(--ard-primary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-warn-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--content: rgb(var(--ard-warn-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-danger-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+  --ard-cmpcl--content: rgb(var(--ard-danger-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-success-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+  --ard-cmpcl--content: rgb(var(--ard-success-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+}
+.ard-button.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-info-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+  --ard-cmpcl--content: rgb(var(--ard-info-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+}
+.ard-button.ard-color-currentColor {
+  --ard-cmpcl--bg: var(--ard-bg);
+  --ard-cmpcl--bg-colored: currentColor;
+  --ard-cmpcl--on-bg: currentColor;
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: currentColor;
+  --ard-cmpcl--border-light: currentColor;
+  --ard-cmpcl--content: currentColor;
+  --ard-cmpcl--content-light: currentColor;
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: currentColor;
+  --ard-cmpcl--overlay-colored-light: currentColor;
+}
+.ard-button .ard-button-icon {
+  font-family: "Material Symbols Outlined";
+  font-size: 1.5em;
+  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
+}
+.ard-button .ard-focus-overlay {
+  position: absolute;
+  top: -0;
+  bottom: -0;
+  left: -0;
+  right: -0;
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  background-color: var(--ard-cmpcl--overlay);
+}
+.ard-button:hover .ard-focus-overlay, .ard-button:focus .ard-focus-overlay {
+  opacity: 4%;
+}
+.ard-button.ard-active .ard-focus-overlay, .ard-button:active .ard-focus-overlay {
+  opacity: 12%;
+}
+.ard-button:focus-visible .ard-focus-overlay {
+  opacity: 18%;
+}
+.ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
+  background: transparent;
+  color: var(--ard-cmpcl--content);
+  border: none;
+}
+.ard-button.ard-appearance-transparent .ard-focus-overlay, .ard-button.ard-appearance-raised .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored);
+}
+.ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
+  background: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+  border: none;
+}
+.ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
+  background: var(--ard-cmpcl--on-bg);
+}
+.ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--ard-simple-shadow);
+}
+.ard-button.ard-appearance-raised:hover, .ard-button.ard-appearance-raised:focus, .ard-button.ard-appearance-raised-strong:hover, .ard-button.ard-appearance-raised-strong:focus {
+  box-shadow: var(--ard-simple-shadow2);
+}
+.ard-button.ard-appearance-raised:active, .ard-button.ard-appearance-raised-strong:active {
+  box-shadow: var(--ard-simple-shadow3);
+}
+.ard-button.ard-appearance-outlined {
+  background: var(--ard-bg);
+  color: var(--ard-cmpcl--content);
+  border: 1px solid var(--ard-border-light);
+}
+.ard-button.ard-appearance-outlined .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored);
+}
+.ard-button.ard-appearance-outlined-strong {
+  background: var(--ard-bg);
+  color: var(--ard-cmpcl--content);
+  border: 1px solid var(--ard-border-light);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.ard-button.ard-appearance-outlined-strong .ard-focus-overlay {
+  display: none;
+}
+.ard-button.ard-appearance-outlined-strong:hover, .ard-button.ard-appearance-outlined-strong:focus, .ard-button.ard-appearance-outlined-strong:focus-visible {
+  background: var(--ard-cmpcl--bg-colored);
+  color: var(--ard-cmpcl--on-bg-colored);
+}
+.ard-button.ard-appearance-raised-strong .ard-focus-overlay, .ard-button.ard-appearance-flat .ard-focus-overlay {
+  background: var(--ard-cmpcl--on-bg);
+}
+.ard-button.ard-appearance-raised-strong:focus-visible, .ard-button.ard-appearance-flat:focus-visible {
+  outline: solid black;
+}
+.ard-button.ard-appearance-transparent.ard-light-coloring {
+  color: var(--ard-cmpcl--content-light);
+}
+.ard-button.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored-light);
+}
+.ard-button.ard-align-left {
+  flex-direction: row;
+}
+.ard-button.ard-align-right {
+  flex-direction: row-reverse;
+}
+.ard-button.ard-button-vertical {
+  height: max-content;
+  padding: 0.3em 1em;
+  gap: 2px;
+  flex-direction: column;
+}
+.ard-button.ard-variant-rounded, .ard-button.ard-variant-pill.ard-button-vertical {
+  border-radius: 6px;
+}
+.ard-button.ard-variant-pill:not(.ard-button-vertical) {
+  border-radius: 9999px;
+}
+.ard-button.ard-variant-sharp {
+  border-radius: 0;
+}
+.ard-button.ard-compact {
+  font-size: 0.75rem;
+  height: 2.25em;
+  padding: 0 0.9em;
+}
+.ard-button.ard-compact.ard-button-vertical {
+  height: max-content;
+  padding: 0.2em 0.8em;
+  gap: 0;
+}
+
+ard-button.ard-disabled > .ard-button {
+  pointer-events: none;
+  opacity: 60%;
+}
+ard-button.ard-disabled > .ard-button .ard-focus-overlay {
+  opacity: 20%;
+  transform: scale(1);
+}
+ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-icon,
+ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-content {
+  opacity: 60%;
+}
+ard-button.ard-disabled > .ard-button.ard-color-none .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay);
+}
+
+/*# sourceMappingURL=button.css.map */

package/prebuilt-themes/default/buttons/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;;;AAGJ;ECFI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDJA;EACA;EACA;EACA;EACA;EACA;;AEZA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADrHJ;EEdA;EACA;EACA,yBACI;;AFeJ;EERA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFCI;;AAIA;EACI;;AAKJ;EACI;;AAIJ;EACI;;AAIR;EAEI;EACA;EACA;;AAEA;EACI;;AAGR;EAEI;EACA;EACA;;AAEA;EACI;;AAGR;EAEI;EACA,YGjCQ;;AHmCR;EAEI,YGpCK;;AHsCT;EACI,YGtCK;;AHyCb;EACI,YG7EH;EH8EG;EACA;;AAEA;EACI;;AAGR;EACI,YGtFH;EHuFG;EACA;EAMA,YACI;;AALJ;EACI;;AAMJ;EAGI;EACA;;AAKJ;EACI;;AAEJ;EACI;;AAIR;EACI;;AAEA;EACI;;ADpGR;EACI;;AAEJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAMR;ECmEA;EACA;;AAEA;EACI;EACA;;AAKA;AAAA;EAEI;;AAEJ;EACI","file":"button.css"}

package/prebuilt-themes/default/buttons/fab.css

@@ -0,0 +1,307 @@
+ard-fab {
+  margin: 8px;
+  display: block;
+  width: max-content;
+  height: max-content;
+}
+
+.ard-fab {
+  font-family: "Roboto", sans-serif;
+  margin: 2px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  height: var(--ard-_fab-size);
+  width: var(--ard-_fab-size);
+  font-weight: 900;
+  user-select: none;
+  border-radius: 999px;
+  justify-content: center;
+  margin: 0;
+  padding: 1rem;
+}
+.ard-fab.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);
+  --ard-cmpcl--bg-header: var(--ard-bg-filled);
+  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+  --ard-cmpcl--on-bg: var(--ard-text);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: var(--ard-text);
+  --ard-cmpcl--border-light: var(--ard-text2);
+  --ard-cmpcl--content: var(--ard-text);
+  --ard-cmpcl--content-light: var(--ard-text-alt);
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-primary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+  --ard-cmpcl--content: rgb(var(--ard-primary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-warn-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--content: rgb(var(--ard-warn-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-danger-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+  --ard-cmpcl--content: rgb(var(--ard-danger-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-success-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+  --ard-cmpcl--content: rgb(var(--ard-success-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+}
+.ard-fab.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));
+  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-info-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+  --ard-cmpcl--content: rgb(var(--ard-info-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+}
+.ard-fab.ard-color-currentColor {
+  --ard-cmpcl--bg: var(--ard-bg);
+  --ard-cmpcl--bg-colored: currentColor;
+  --ard-cmpcl--on-bg: currentColor;
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: currentColor;
+  --ard-cmpcl--border-light: currentColor;
+  --ard-cmpcl--content: currentColor;
+  --ard-cmpcl--content-light: currentColor;
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: currentColor;
+  --ard-cmpcl--overlay-colored-light: currentColor;
+}
+.ard-fab .ard-button-icon {
+  font-family: "Material Symbols Outlined";
+  font-size: 1.5em;
+  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
+}
+.ard-fab .ard-focus-overlay {
+  position: absolute;
+  top: -0;
+  bottom: -0;
+  left: -0;
+  right: -0;
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  background-color: var(--ard-cmpcl--overlay);
+}
+.ard-fab:hover .ard-focus-overlay, .ard-fab:focus .ard-focus-overlay {
+  opacity: 4%;
+}
+.ard-fab.ard-active .ard-focus-overlay, .ard-fab:active .ard-focus-overlay {
+  opacity: 12%;
+}
+.ard-fab:focus-visible .ard-focus-overlay {
+  opacity: 18%;
+}
+.ard-fab.ard-appearance-transparent, .ard-fab.ard-appearance-raised {
+  background: transparent;
+  color: var(--ard-cmpcl--content);
+  border: none;
+}
+.ard-fab.ard-appearance-transparent .ard-focus-overlay, .ard-fab.ard-appearance-raised .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored);
+}
+.ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
+  background: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+  border: none;
+}
+.ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
+  background: var(--ard-cmpcl--on-bg);
+}
+.ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--ard-simple-shadow);
+}
+.ard-fab.ard-appearance-raised:hover, .ard-fab.ard-appearance-raised:focus, .ard-fab.ard-appearance-raised-strong:hover, .ard-fab.ard-appearance-raised-strong:focus {
+  box-shadow: var(--ard-simple-shadow2);
+}
+.ard-fab.ard-appearance-raised:active, .ard-fab.ard-appearance-raised-strong:active {
+  box-shadow: var(--ard-simple-shadow3);
+}
+.ard-fab.ard-appearance-outlined {
+  background: var(--ard-bg);
+  color: var(--ard-cmpcl--content);
+  border: 1px solid var(--ard-border-light);
+}
+.ard-fab.ard-appearance-outlined .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored);
+}
+.ard-fab.ard-appearance-outlined-strong {
+  background: var(--ard-bg);
+  color: var(--ard-cmpcl--content);
+  border: 1px solid var(--ard-border-light);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.ard-fab.ard-appearance-outlined-strong .ard-focus-overlay {
+  display: none;
+}
+.ard-fab.ard-appearance-outlined-strong:hover, .ard-fab.ard-appearance-outlined-strong:focus, .ard-fab.ard-appearance-outlined-strong:focus-visible {
+  background: var(--ard-cmpcl--bg-colored);
+  color: var(--ard-cmpcl--on-bg-colored);
+}
+.ard-fab.ard-appearance-raised-strong .ard-focus-overlay, .ard-fab.ard-appearance-flat .ard-focus-overlay {
+  background: var(--ard-cmpcl--on-bg);
+}
+.ard-fab.ard-appearance-raised-strong:focus-visible, .ard-fab.ard-appearance-flat:focus-visible {
+  outline: solid black;
+}
+.ard-fab.ard-appearance-transparent.ard-light-coloring {
+  color: var(--ard-cmpcl--content-light);
+}
+.ard-fab.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay-colored-light);
+}
+.ard-fab.ard-fab-size-standard {
+  --ard-_fab-size: 3.5rem;
+  font-size: 1rem;
+}
+.ard-fab.ard-fab-size-small {
+  --ard-_fab-size: 2.5rem;
+  font-size: 0.875rem;
+  padding: 0.5625rem;
+}
+.ard-fab.ard-fab-extended {
+  min-width: var(--ard-_fab-size);
+  width: max-content;
+  font-weight: unset;
+}
+.ard-fab.ard-fab-extended .ard-button-content {
+  gap: 0.75em;
+  max-width: 10em;
+}
+.ard-fab .ard-button-content {
+  gap: 1em;
+  font-weight: 500;
+  justify-content: flex-start !important;
+  max-width: 1.5em;
+  overflow: hidden;
+  transition: max-width 0.5s ease;
+}
+.ard-fab.ard-appearance-transparent > .ard-focus-overlay {
+  transform: scale(0.2);
+  transition: opacity 0.2s ease, transform 0.1s ease;
+}
+.ard-fab.ard-appearance-transparent:hover > .ard-focus-overlay, .ard-fab.ard-appearance-transparent:focus > .ard-focus-overlay {
+  transform: scale(1);
+}
+
+ard-fab.ard-disabled > .ard-fab {
+  pointer-events: none;
+  opacity: 60%;
+}
+ard-fab.ard-disabled > .ard-fab .ard-focus-overlay {
+  opacity: 20%;
+  transform: scale(1);
+}
+ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-icon,
+ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-content {
+  opacity: 60%;
+}
+ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay);
+}
+
+@keyframes maxWidth {
+  0% {
+    max-width: 1.5em;
+  }
+  99% {
+    max-width: 21em;
+  }
+  100% {
+    max-width: unset;
+  }
+}
+
+/*# sourceMappingURL=fab.css.map */

package/prebuilt-themes/default/buttons/fab.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;;;AAGJ;ECJI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDFA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEhBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADrHJ;EEdA;EACA;EACA,yBACI;;AFeJ;EERA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFCI;;AAIA;EACI;;AAKJ;EACI;;AAIJ;EACI;;AAIR;EAEI;EACA;EACA;;AAEA;EACI;;AAGR;EAEI;EACA;EACA;;AAEA;EACI;;AAGR;EAEI;EACA,YGjCQ;;AHmCR;EAEI,YGpCK;;AHsCT;EACI,YGtCK;;AHyCb;EACI,YG7EH;EH8EG;EACA;;AAEA;EACI;;AAGR;EACI,YGtFH;EHuFG;EACA;EAMA,YACI;;AALJ;EACI;;AAMJ;EAGI;EACA;;AAKJ;EACI;;AAEJ;EACI;;AAIR;EACI;;AAEA;EACI;;ADjGR;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AGtBJ;EACI;EAEA,YACI;;AAMJ;EACI;;;AHoBR;ECqEA;EACA;;AAEA;EACI;EACA;;AAKA;AAAA;EAEI;;AAEJ;EACI;;;AD/EZ;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI","file":"fab.css"}