@ardium-pl/ui 5.0.0-alpha.106

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

@@ -0,0 +1,330 @@
+@layer ard-ui {
+  :root {
+    --ard-fab-size-standard: 3.5rem;
+    --ard-fab-size-small: 2.5rem;
+    --ard-fab-margin: 0.5rem;
+    --ard-fab-size-standard-font-size: 1.75rem;
+    --ard-fab-size-small-font-size: 1.375rem;
+    --ard-fab-font-weight: 900;
+    --ard-fab-extended-gap: 0.75em;
+  }
+  ard-fab {
+    margin: var(--ard-fab-margin, 0.5rem);
+    display: block;
+    width: max-content;
+    height: max-content;
+  }
+  .ard-fab {
+    font-family: var(--ard-font-family);
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    font-weight: var(--ard-fab-font-weight, 900);
+    font-size: unset;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    height: var(--ard-_fab-size);
+    width: var(--ard-_fab-size);
+    max-height: var(--ard-_fab-size);
+    max-width: var(--ard-_fab-size);
+    min-height: var(--ard-_fab-size);
+    min-width: var(--ard-_fab-size);
+    user-select: none;
+    border-radius: 9999px;
+    justify-content: center;
+    margin: 0;
+    font-weight: 500;
+    overflow: hidden;
+    transition: max-width 0.5s ease;
+  }
+  .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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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--on-bg-colored-light: var(--ard-text);
+    --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::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * 0px);
+    bottom: calc(-1 * 0px);
+    left: calc(-1 * 0px);
+    right: calc(-1 * 0px);
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    background-color: var(--ard-cmpcl--overlay);
+  }
+  .ard-fab:hover::before {
+    opacity: var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
+  }
+  .ard-fab:focus::before {
+    opacity: var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12));
+  }
+  .ard-fab.ard-active::before, .ard-fab:active::before {
+    opacity: var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18));
+  }
+  .ard-fab:focus-visible::before {
+    opacity: var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24));
+  }
+  .ard-fab.ard-appearance-transparent, .ard-fab.ard-appearance-raised {
+    background: transparent;
+    color: var(--ard-cmpcl--content);
+    border: none;
+  }
+  .ard-fab.ard-appearance-transparent::before, .ard-fab.ard-appearance-raised::before {
+    background: var(--ard-cmpcl--overlay-colored);
+  }
+  .ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
+    background: var(--ard-bg);
+    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-visible, .ard-fab.ard-appearance-raised-strong:hover, .ard-fab.ard-appearance-raised-strong:focus-visible {
+    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: var(--ard-fab-border-width, var(--ard-button-border-width, 1px)) var(--ard-fab-border-style, var(--ard-button-border-style, solid)) var(--ard-border-light);
+  }
+  .ard-fab.ard-appearance-outlined::before {
+    background: var(--ard-cmpcl--overlay-colored);
+  }
+  .ard-fab.ard-appearance-outlined-strong {
+    background: var(--ard-bg);
+    color: var(--ard-cmpcl--content);
+    border: var(--ard-fab-border-width, var(--ard-button-border-width, 1px)) var(--ard-fab-border-style, var(--ard-button-border-style, solid)) var(--ard-border-light);
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+  .ard-fab.ard-appearance-outlined-strong::before {
+    display: none;
+  }
+  .ard-fab.ard-appearance-outlined-strong:hover, .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-flat, .ard-fab.ard-appearance-raised-strong {
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
+  }
+  .ard-fab.ard-appearance-flat::before, .ard-fab.ard-appearance-raised-strong::before {
+    background: var(--ard-cmpcl--on-bg);
+  }
+  .ard-fab.ard-appearance-flat:focus-visible, .ard-fab.ard-appearance-raised-strong: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::before {
+    background: var(--ard-cmpcl--overlay-colored-light);
+  }
+  .ard-fab.ard-fab-size-standard {
+    --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
+    font-size: var(--ard-fab-size-standard-font-size, 1.75rem);
+  }
+  .ard-fab.ard-fab-size-small {
+    --ard-_fab-size: var(--ard-fab-size-small, 2.5rem);
+    font-size: var(--ard-fab-size-small-font-size, 1.375rem);
+  }
+  .ard-fab.ard-fab-extended {
+    min-width: var(--ard-_fab-size);
+    width: max-content;
+    font-weight: unset;
+    gap: var(--ard-fab-extended-gap, 1em);
+    max-width: 10em;
+  }
+  .ard-fab ard-icon {
+    font-size: 1em;
+  }
+  .ard-fab.ard-appearance-transparent {
+    --_ard-focus-overlay-scale: 0.2;
+  }
+  .ard-fab.ard-appearance-transparent > .ard-focus-overlay {
+    transform: scale(var(--_ard-focus-overlay-scale));
+    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, .ard-fab.ard-appearance-transparent:focus-visible > .ard-focus-overlay {
+    --_ard-focus-overlay-scale: 1;
+  }
+  ard-fab.ard-disabled > .ard-fab {
+    pointer-events: none;
+    opacity: var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
+    cursor: not-allowed;
+  }
+  ard-fab.ard-disabled > .ard-fab::before {
+    opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
+    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: var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
+  }
+  ard-fab.ard-disabled > .ard-fab.ard-color-none::before {
+    background: var(--ard-cmpcl--overlay);
+  }
+  ard-fab.ard-disabled.ard-fab-with-pointer-events-when-disabled {
+    pointer-events: all;
+  }
+  ard-fab.ard-disabled.ard-fab-with-pointer-events-when-disabled > .ard-fab {
+    pointer-events: all;
+    cursor: var(--ard-fab-disabled-cursor, var(--ard-button-disabled-cursor, not-allowed));
+  }
+}
+@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;EAGE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAYF;IACE;IACA;IACA;IACA;;EAGF;ICfA;IACA,QDgBI;ICfJ,SDgBI;ICfJ;IACA,aDgBI;ICfJ,WDcI;ICbJ;IACA;IACA;IACA;IACA;IACA;IDiBE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EEtDF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ED9GF;IACE;IEnBF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IFYE;;EAGA;IACE;;EAIF;IACE,SDJA;;ECSF;IACE,SDTA;;ECaF;IACE,SDbA;;ECiBJ;IAEE;IACA;IACA;;EAEA;IACE;;EAGJ;IAEE,YGtEC;IHuED;IACA,YGtCY;;EHwCZ;IAEE,YGzCW;;EH2Cb;IACE,YG3CW;;EH8Cf;IACE,YGnFC;IHoFD;IACA;;EAEA;IACE;;EAGJ;IACE,YG5FC;IH6FD;IACA;IAMA;;EAJA;IACE;;EAIF;IAEE;IACA;;EAGJ;IAEE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAIJ;IACE;;EAEA;IACE;;EDlEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAEF;IGrDF;;EACA;IACE;IAEA,YACE;;EAOF;IACE;;EH8CF;ICgDF;IACA,SD/CM;ICgDN;;EAEA;IACE,SDlDI;ICmDJ;;EAKA;AAAA;IAEE,SD3DE;;EC6DJ;IACE;;ED1DF;IACE;;EAEA;IACE;IACA;;;AAMR;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}

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

@@ -0,0 +1,304 @@
+@layer ard-ui {
+  :root {
+    --ard-icon-button-size: 2.1875em;
+    --ard-icon-button-size-compact: 2.25em;
+    --ard-icon-button-margin: 0;
+    --ard-icon-button-font-size: 1rem;
+    --ard-icon-button-icon-font-size: 1.5em;
+    --ard-icon-button-font-size-compact: 0.75rem;
+    --ard-icon-button-font-weight: 600;
+  }
+  ard-icon-button {
+    height: max-content;
+    width: max-content;
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    display: inline-block;
+    margin: var(--ard-icon-button-margin, 0);
+    font-size: var(--ard-icon-button-font-size, 1rem);
+  }
+  .ard-icon-button {
+    font-family: var(--ard-font-family);
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    font-weight: inherit;
+    font-size: inherit;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    background: transparent;
+    height: var(--ard-icon-button-size, 2.1875em);
+    aspect-ratio: 1;
+    border-radius: 9999px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    overflow: hidden;
+    color: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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--on-bg-colored-light: var(--ard-text);
+    --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-icon-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-icon-button::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * 0px);
+    bottom: calc(-1 * 0px);
+    left: calc(-1 * 0px);
+    right: calc(-1 * 0px);
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    background-color: var(--ard-cmpcl--overlay);
+  }
+  .ard-icon-button:hover::before {
+    opacity: var(--ard-icon-button-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
+  }
+  .ard-icon-button:focus::before {
+    opacity: var(--ard-icon-button-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12));
+  }
+  .ard-icon-button.ard-active::before, .ard-icon-button:active::before {
+    opacity: var(--ard-icon-button-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18));
+  }
+  .ard-icon-button:focus-visible::before {
+    opacity: var(--ard-icon-button-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24));
+  }
+  .ard-icon-button.ard-appearance-transparent, .ard-icon-button.ard-appearance-raised {
+    background: transparent;
+    color: var(--ard-cmpcl--content);
+    border: none;
+  }
+  .ard-icon-button.ard-appearance-transparent::before, .ard-icon-button.ard-appearance-raised::before {
+    background: var(--ard-cmpcl--overlay-colored);
+  }
+  .ard-icon-button.ard-appearance-raised, .ard-icon-button.ard-appearance-raised-strong {
+    background: var(--ard-bg);
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: var(--ard-simple-shadow);
+  }
+  .ard-icon-button.ard-appearance-raised:hover, .ard-icon-button.ard-appearance-raised:focus-visible, .ard-icon-button.ard-appearance-raised-strong:hover, .ard-icon-button.ard-appearance-raised-strong:focus-visible {
+    box-shadow: var(--ard-simple-shadow2);
+  }
+  .ard-icon-button.ard-appearance-raised:active, .ard-icon-button.ard-appearance-raised-strong:active {
+    box-shadow: var(--ard-simple-shadow3);
+  }
+  .ard-icon-button.ard-appearance-outlined {
+    background: var(--ard-bg);
+    color: var(--ard-cmpcl--content);
+    border: 0 solid var(--ard-border-light);
+  }
+  .ard-icon-button.ard-appearance-outlined::before {
+    background: var(--ard-cmpcl--overlay-colored);
+  }
+  .ard-icon-button.ard-appearance-outlined-strong {
+    background: var(--ard-bg);
+    color: var(--ard-cmpcl--content);
+    border: 0 solid var(--ard-border-light);
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+  .ard-icon-button.ard-appearance-outlined-strong::before {
+    display: none;
+  }
+  .ard-icon-button.ard-appearance-outlined-strong:hover, .ard-icon-button.ard-appearance-outlined-strong:focus-visible {
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+  }
+  .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
+  }
+  .ard-icon-button.ard-appearance-flat::before, .ard-icon-button.ard-appearance-raised-strong::before {
+    background: var(--ard-cmpcl--on-bg);
+  }
+  .ard-icon-button.ard-appearance-flat:focus-visible, .ard-icon-button.ard-appearance-raised-strong:focus-visible {
+    outline: solid black;
+  }
+  .ard-icon-button.ard-appearance-transparent.ard-light-coloring {
+    color: var(--ard-cmpcl--content-light);
+  }
+  .ard-icon-button.ard-appearance-transparent.ard-light-coloring::before {
+    background: var(--ard-cmpcl--overlay-colored-light);
+  }
+  .ard-icon-button > ard-icon {
+    font-weight: 500;
+    font-size: var(--ard-icon-button-icon-font-size);
+  }
+  .ard-icon-button.ard-compact {
+    height: var(--ard-icon-button-size-compact, 2.25em);
+    font-size: var(--ard-icon-button-font-size-compact, 0.75rem);
+  }
+  .ard-icon-button.ard-light-coloring {
+    color: var(--ard-cmpcl--bg-colored-light);
+  }
+  ard-icon-button.ard-disabled > .ard-icon-button {
+    pointer-events: none;
+    opacity: var(--ard-icon-button-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
+    cursor: not-allowed;
+  }
+  ard-icon-button.ard-disabled > .ard-icon-button::before {
+    opacity: var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
+    transform: scale(1);
+  }
+  ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none .ard-button-icon,
+  ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none .ard-button-content {
+    opacity: var(--ard-icon-button-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
+  }
+  ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none::before {
+    background: var(--ard-cmpcl--overlay);
+  }
+  ard-icon-button.ard-disabled > .ard-icon-button .ard-focus-overlay {
+    opacity: 0;
+  }
+  ard-icon-button.ard-disabled.ard-icon-button-with-pointer-events-when-disabled {
+    pointer-events: all;
+  }
+  ard-icon-button.ard-disabled.ard-icon-button-with-pointer-events-when-disabled > .ard-icon-button {
+    pointer-events: all;
+    cursor: var(--ard-icon-button-disabled-cursor, var(--ard-button-disabled-cursor, not-allowed));
+  }
+}
+
+/*# sourceMappingURL=icon-button.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/icon-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;EAGE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAUF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;ICfA;IACA,QDgBI;ICfJ,SDgBI;ICfJ;IACA,aDgBI;ICfJ,WDcI;ICbJ;IACA;IACA;IACA;IACA;IACA;IDiBE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EElDF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ED9GF;IACE;IEnBF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IFYE;;EAGA;IACE;;EAIF;IACE,SDJA;;ECSF;IACE,SDTA;;ECaF;IACE,SDbA;;ECiBJ;IAEE;IACA;IACA;;EAEA;IACE;;EAGJ;IAEE,YGtEC;IHuED;IACA,YGtCY;;EHwCZ;IAEE,YGzCW;;EH2Cb;IACE,YG3CW;;EH8Cf;IACE,YGnFC;IHoFD;IACA;;EAEA;IACE;;EAGJ;IACE,YG5FC;IH6FD;IACA;IAMA;;EAJA;IACE;;EAIF;IAEE;IACA;;EAGJ;IAEE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAIJ;IACE;;EAEA;IACE;;EDtEF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAKF;IC6DF;IACA,SD5DM;IC6DN;;EAEA;IACE,SD/DI;ICgEJ;;EAKA;AAAA;IAEE,SDxEE;;EC0EJ;IACE;;EDvEA;IACE;;EAGJ;IACE;;EAEA;IACE;IACA","file":"icon-button.css"}