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

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

@@ -18,310 +18,311 @@
   --ard-button-disabled-opacity: 0.6;
 }
 
-ard-button {
-  display: flex;
-  width: max-content;
-  height: max-content;
-  justify-content: stretch;
-}
-
-.ard-button {
-  font-family: var(--ard-font-family);
-  margin: var(--ard-button-margin, 0.125rem);
-  padding: var(--ard-button-padding, 0 1.2em);
-  border: 1px solid transparent;
-  font-weight: var(--ard-button-font-weight, 500);
-  font-size: var(--ard-button-font-size, 0.875rem);
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  outline: none;
-  background: transparent;
-  gap: var(--ard-button-gap, 0.375rem);
-  font-size: var(--ard-button-font-size, 0.875rem);
-  height: var(--ard-button-height, 2.5em);
-  padding: var(--ard-button-padding, 0 1.2em);
-  width: max-content;
-  min-width: max-content;
-  letter-spacing: 0.5px;
-  justify-content: center;
-  margin: 0;
-  user-select: none;
-  text-decoration: none;
-  flex-grow: 1;
-}
-.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--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-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-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-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-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-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-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-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::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-button:hover::before {
-  opacity: var(--ard-button-overlay-hover-opacity, 0.04);
-}
-.ard-button:focus::before {
-  opacity: var(--ard-button-overlay-focus-opacity, 0.12);
-}
-.ard-button.ard-active::before, .ard-button:active::before {
-  opacity: var(--ard-button-overlay-active-opacity, 0.18);
-}
-.ard-button:focus-visible::before {
-  opacity: var(--ard-button-overlay-focus-visible-opacity, 0.24);
-}
-.ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
-  background: transparent;
-  color: var(--ard-cmpcl--content);
-  border: none;
-}
-.ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
-  background: var(--ard-cmpcl--overlay-colored);
-}
-.ard-button.ard-appearance-raised, .ard-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-button.ard-appearance-raised:hover, .ard-button.ard-appearance-raised:focus-visible, .ard-button.ard-appearance-raised-strong:hover, .ard-button.ard-appearance-raised-strong:focus-visible {
-  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::before {
-  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::before {
-  display: none;
-}
-.ard-button.ard-appearance-outlined-strong:hover, .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-flat, .ard-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-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
-  background: var(--ard-cmpcl--on-bg);
-}
-.ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong: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::before {
-  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: var(--ard-button-padding-vertical, 0.3em 1em);
-  gap: 2px;
-  flex-direction: column;
-}
-.ard-button.ard-variant-rounded, .ard-button.ard-variant-pill.ard-button-vertical {
-  border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
-}
-.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: var(--ard-button-font-size-compact, 0.75rem);
-  height: var(--ard-button-height-compact, 2.25em);
-  padding: var(--ard-button-padding-compact, 0 0.9em);
-}
-.ard-button.ard-compact.ard-button-vertical {
-  height: max-content;
-  padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
-  gap: 0;
-}
-.ard-button.ard-disabled {
-  pointer-events: none;
-  opacity: var(--ard-button-disabled-opacity, 0.6);
-  cursor: not-allowed;
-}
-.ard-button.ard-disabled::before {
-  opacity: var(--ard-button-overlay-disabled-opacity, 0.2);
-  transform: scale(1);
-}
-.ard-button.ard-disabled.ard-color-none .ard-button-icon,
-.ard-button.ard-disabled.ard-color-none .ard-button-content {
-  opacity: var(--ard-button-disabled-opacity, 0.6);
-}
-.ard-button.ard-disabled.ard-color-none::before {
-  background: var(--ard-cmpcl--overlay);
-}
-.ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
-  pointer-events: all;
+@layer ard-theme {
+  ard-button {
+    display: flex;
+    width: max-content;
+    height: max-content;
+    justify-content: stretch;
+  }
+  .ard-button {
+    font-family: var(--ard-font-family);
+    margin: var(--ard-button-margin, 0.125rem);
+    padding: var(--ard-button-padding, 0 1.2em);
+    border: 1px solid transparent;
+    font-weight: var(--ard-button-font-weight, 500);
+    font-size: var(--ard-button-font-size, 0.875rem);
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    background: transparent;
+    gap: var(--ard-button-gap, 0.375rem);
+    font-size: var(--ard-button-font-size, 0.875rem);
+    height: var(--ard-button-height, 2.5em);
+    padding: var(--ard-button-padding, 0 1.2em);
+    width: max-content;
+    min-width: max-content;
+    letter-spacing: 0.5px;
+    justify-content: center;
+    margin: 0;
+    user-select: none;
+    text-decoration: none;
+    flex-grow: 1;
+  }
+  .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--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-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-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-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-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-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-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-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::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-button:hover::before {
+    opacity: var(--ard-button-overlay-hover-opacity, 0.04);
+  }
+  .ard-button:focus::before {
+    opacity: var(--ard-button-overlay-focus-opacity, 0.12);
+  }
+  .ard-button.ard-active::before, .ard-button:active::before {
+    opacity: var(--ard-button-overlay-active-opacity, 0.18);
+  }
+  .ard-button:focus-visible::before {
+    opacity: var(--ard-button-overlay-focus-visible-opacity, 0.24);
+  }
+  .ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
+    background: transparent;
+    color: var(--ard-cmpcl--content);
+    border: none;
+  }
+  .ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
+    background: var(--ard-cmpcl--overlay-colored);
+  }
+  .ard-button.ard-appearance-raised, .ard-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-button.ard-appearance-raised:hover, .ard-button.ard-appearance-raised:focus-visible, .ard-button.ard-appearance-raised-strong:hover, .ard-button.ard-appearance-raised-strong:focus-visible {
+    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::before {
+    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::before {
+    display: none;
+  }
+  .ard-button.ard-appearance-outlined-strong:hover, .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-flat, .ard-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-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
+    background: var(--ard-cmpcl--on-bg);
+  }
+  .ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong: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::before {
+    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: var(--ard-button-padding-vertical, 0.3em 1em);
+    gap: 2px;
+    flex-direction: column;
+  }
+  .ard-button.ard-variant-rounded, .ard-button.ard-variant-pill.ard-button-vertical {
+    border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
+  }
+  .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: var(--ard-button-font-size-compact, 0.75rem);
+    height: var(--ard-button-height-compact, 2.25em);
+    padding: var(--ard-button-padding-compact, 0 0.9em);
+  }
+  .ard-button.ard-compact.ard-button-vertical {
+    height: max-content;
+    padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
+    gap: 0;
+  }
+  .ard-button.ard-disabled {
+    pointer-events: none;
+    opacity: var(--ard-button-disabled-opacity, 0.6);
+    cursor: not-allowed;
+  }
+  .ard-button.ard-disabled::before {
+    opacity: var(--ard-button-overlay-disabled-opacity, 0.2);
+    transform: scale(1);
+  }
+  .ard-button.ard-disabled.ard-color-none .ard-button-icon,
+  .ard-button.ard-disabled.ard-color-none .ard-button-content {
+    opacity: var(--ard-button-disabled-opacity, 0.6);
+  }
+  .ard-button.ard-disabled.ard-color-none::before {
+    background: var(--ard-cmpcl--overlay);
+  }
+  .ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
+    pointer-events: all;
+  }
 }
 
 /*# sourceMappingURL=button.css.map */

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

@@ -1 +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":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECjBE;EACA,QDkBE;ECjBF,SDkBE;ECjBF;EACA,aDkBE;ECjBF,WDgBE;ECfF;EACA;EACA;EACA;EACA;EDkBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEpDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjHF;EACE;EEhBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFSE;;AAGA;EACE,SDGF;;ACCA;EACE,SDDF;;ACMA;EACE,SDNF;;ACUA;EACE,SDVF;;ACcF;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGnEC;EHoED;EACA,YGnCY;;AHqCZ;EAEE,YGtCW;;AHwCb;EACE,YGxCW;;AH2Cf;EACE,YGhFC;EHiFD;EACA;;AAEA;EACE;;AAGJ;EACE,YGzFC;EH0FD;EACA;EAMA;;AAJA;EACE;;AAIF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;ADhEJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;ECiCA;EACA,SDjCkC;ECkClC;;AAEA;EACE,SDrCyE;ECsCzE;;AAKA;AAAA;EAEE,SD7C8B;;AC+ChC;EACE;;AD9CF;EACE","file":"button.css"}
+{"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":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;EAGF;IClBA;IACA,QDmBI;IClBJ,SDmBI;IClBJ;IACA,aDmBI;IClBJ,WDiBI;IChBJ;IACA;IACA;IACA;IACA;IDmBE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EErDF;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;;EDjHF;IACE;IEhBF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IFSE;;EAGA;IACE,SDIA;;ECAF;IACE;;EAKF;IACE,SDLA;;ECSF;IACE,SDTA;;ECaJ;IAEE;IACA;IACA;;EAEA;IACE;;EAGJ;IAEE,YGnEC;IHoED;IACA,YGnCY;;EHqCZ;IAEE,YGtCW;;EHwCb;IACE,YGxCW;;EH2Cf;IACE,YGhFC;IHiFD;IACA;;EAEA;IACE;;EAGJ;IACE,YGzFC;IH0FD;IACA;IAMA;;EAJA;IACE;;EAIF;IAEE;IACA;;EAGJ;IAEE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAIJ;IACE;;EAEA;IACE;;ED/DF;IACE;;EAEF;IACE;;EAIF;IACE;IACA;IACA;IACA;;EAEF;IAEE;;EAEF;IACE;;EAEF;IACE;;EAIF;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;ICgCF;IACA,SDhCoC;ICiCpC;;EAEA;IACE,SDpC2E;ICqC3E;;EAKA;AAAA;IAEE,SD5CgC;;EC8ClC;IACE;;ED7CA;IACE","file":"button.css"}