@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/action/button/button.styles.js

@@ -1,68 +1,50 @@
 import { css } from "lit";
+import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
 /**
  * Base style for button.
  *
  * Custom css variables:
- * [--button-background] - Set a custom background color
- * [--button-background-hover] - Set a custom button background color for hover state
- * [--button-background-active] - Set a custom button background color for active state
- * [--button-text] - Set a custom button text color
- * [--button-padding] - Set a custom padding to the button. Note that thee padding is initialized through the `padding` css.
- * [--button-border-radius] - Set a custom radius to the button border
+ * [--button-background] - Set a custom background color, for every appearance and color
+ * [--button-background-hover] - Set a custom button background color for hover state. Derived from --button-background when only that one is set
+ * [--button-background-active] - Set a custom button background color for active state. Derived from --button-background when only that one is set
+ * [--button-text] - Set a custom button text color, for every appearance and color
+ * [--button-padding] - Set a custom padding to the button, for every size
+ * [--button-border-radius] - Set a custom radius to the button border, for every size and over `rounded`
  * [--button-focus-outline] - Set a custom color to the focus outline
  * [--button-transition] - Set a custom button transition time
  * [--button-shadow] - Set a custom box shadow to the button (used by the `raised` variant)
  * [--button-shadow-hover] - Set a custom box shadow to the button on hover state (used by the `raised` variant)
- * [--button-border-color] - Set a custom border color, overriding whatever the active variant would otherwise use
+ * [--button-border-color] - Set a custom border color, for every appearance and color
  * [--button-border-color-hover] - Set a custom border color for hover/focus-visible state, falling back to --button-border-color
  * [--button-border-size] - Set a custom border width
  * [--button-full] - Set to `true` to get the same result as the `full` attribute. Meant to be set from a container query
  */
 const base = css `
   :host {
-    --_mainColor: var(
-      --button-background,
-      var(--eun-color-primary-500, #3d6fff)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-primary-700, #3662e0)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-primary-800, #2d52bd)
-    );
-    --_mainColor-text: var(
-      --button-text,
-      var(--eun-color-on-primary-500, #ffffff)
-    );
-    --_mainColor-outline: var(
-      --button-focus-outline,
-      var(--eun-color-primary-700, #3662e0)
-    );
-    --_focusIndicator: var(--button-focus-outline, var(--_mainColor-outline));
-    --_borderRadius: var(
-      --button-border-radius,
-      var(--eun-borderRadius-m, 8px)
-    );
-    --_backgroundColor: var(--button-background, var(--_mainColor));
-    --_padding: var(
-      --button-padding,
-      var(--eun-space-s, 8px) calc(var(--eun-space-l, 32px) / 2)
-    );
-    --_textColor: var(--button-text, var(--_mainColor-text));
+    --_focusIndicator: var(--button-focus-outline, var(--_ring));
+    --_hoverFromCustom: color-mix(in srgb, var(--button-background) 88%, black);
+    --_activeFromCustom: color-mix(
+      in srgb,
+      var(--button-background) 76%,
+      black
+    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_defaultPadding: var(--eun-space-s, 8px)
+      calc(var(--eun-space-l, 32px) / 2);
+    --_borderRadius: var(--button-border-radius, var(--_defaultBorderRadius));
+    --_padding: var(--button-padding, var(--_defaultPadding));
     --_boxShadow: var(--button-shadow, none);
     --_boxShadow-hover: var(--button-shadow-hover, var(--_boxShadow));
     --_transition: var(--button-transition, 0.2s);
     --_borderSize: var(--button-border-size, 1.5px);
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: var(--eun-space-xs, 4px);
     --_lineHeight: 1rem;
     --icon-size: var(--_lineHeight);
-    --_borderColor: transparent;
     --_before-display: none;
     --_cursor: pointer;
     display: inline-flex;
+    width: fit-content;
     position: relative;
     user-select: none;
     cursor: var(--_cursor);
@@ -80,95 +62,39 @@ const base = css `
     outline-color: var(--_focusIndicator);
   }
   :host([size="xs"]) {
-    --_fontSize: var(--eun-fontSize-xs, 10px);
-    --_padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
+    --_fontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPadding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-borderRadius-s, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="s"]) {
-    --_fontSize: var(--eun-fontSize-xs, 10px);
-    --_padding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
+    --_fontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPadding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-borderRadius-s, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="l"]) {
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: var(--eun-space-m, 16px);
-    --_padding: calc(var(--eun-space-s, 8px) * 1.25) var(--eun-space-l, 32px);
+    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.25)
+      var(--eun-space-l, 32px);
     --_lineHeight: 1.1rem;
   }
   :host([size="xl"]) {
-    --_fontSize: var(--eun-fontSize-l, 1.3rem);
+    --_fontSize: var(--eun-font-size-l, 1.3rem);
     --_gap: var(--eun-space-m, 16px);
-    --_padding: calc(var(--eun-space-s, 8px) * 1.5) var(--eun-space-l, 32px);
+    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.5)
+      var(--eun-space-l, 32px);
     --_lineHeight: 1.3rem;
   }
   :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
-  }
-  :host([variant="secondary"]) {
-    --_mainColor: var(--eun-color-secondary-500, #e5a030);
-    --_mainColor-hover: var(--eun-color-secondary-700, #ca8d2a);
-    --_mainColor-active: var(--eun-color-secondary-800, #a97624);
-    --_mainColor-text: var(--eun-color-on-secondary-500, #000000de);
-    --_mainColor-outline: var(--eun-color-secondary-700, #ca8d2a);
-  }
-  :host([variant="critical"]) {
-    --_mainColor: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-hover: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-active: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-text: #fff;
-    --_mainColor-outline: var(--eun-color-critical-100, #aa0014);
-  }
-  :host([variant="success"]) {
-    --_mainColor: var(--eun-color-success-100, #1a9948);
-    --_mainColor-hover: var(--eun-color-success-100, #1a9948);
-    --_mainColor-active: var(--eun-color-success-100, #1a9948);
-    --_mainColor-text: #fff;
-    --_mainColor-outline: var(--eun-color-success-100, #1a9948);
-  }
-  :host([variant="warning"]) {
-    --_mainColor: var(--eun-color-warning-100, #c85207);
-    --_mainColor-hover: var(--eun-color-warning-100, #c85207);
-    --_mainColor-active: var(--eun-color-warning-100, #c85207);
-    --_mainColor-text: #fff;
-    --_mainColor-outline: var(--eun-color-warning-100, #c85207);
-  }
-  :host([variant="light"]) {
-    --_mainColor: var(--eun-color-grey-0, #ffffff);
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-    --_mainColor-text: var(--eun-color-grey-900, #000000);
-    --_mainColor-outline: var(--eun-color-grey-500, #8d93aa);
-  }
-  :host([variant="medium"]) {
-    --_mainColor: color-mix(
-      in srgb,
-      var(--eun-color-grey-700, #484e61) 20%,
-      transparent
-    );
-    --_mainColor-hover: color-mix(
-      in srgb,
-      var(--eun-color-grey-700, #484e61) 30%,
-      transparent
-    );
-    --_mainColor-active: color-mix(
-      in srgb,
-      var(--eun-color-grey-700, #484e61) 40%,
-      transparent
-    );
-    --_mainColor-text: var(--eun-color-grey-900, #000000);
-    --_mainColor-outline: var(--eun-color-grey-700, #484e61);
-  }
-  :host([variant="dark"]) {
-    --_mainColor: var(--eun-color-grey-800, #071621);
-    --_mainColor-hover: var(--eun-color-grey-900, #000000);
-    --_mainColor-active: var(--eun-color-grey-900, #000000);
-    --_mainColor-text: var(--eun-color-grey-0, #ffffff);
-    --_mainColor-outline: var(--eun-color-grey-800, #071621);
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
   }
   slot::slotted(*) {
     color: var(--_textColor);
+  }
+  slot::slotted(*:not([fill])),
+  slot::slotted(*[fill="currentColor"]) {
     fill: var(--_textColor);
   }
   slot[name="start"]::slotted(eun-icon),
@@ -180,15 +106,15 @@ const base = css `
   }
   #button {
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    background: var(--_backgroundColor);
+    --_textColor: var(--button-text, var(--_fg));
+    background: var(--button-background, var(--_bg));
     border-radius: var(--_borderRadius);
     color: var(--_textColor);
     box-shadow: var(--_boxShadow);
     display: flex;
     width: 100%;
     height: fit-content;
-    border: var(--_borderSize) solid
-      var(--button-border-color, var(--_borderColor));
+    border: var(--_borderSize) solid var(--button-border-color, var(--_bd));
     outline: 2px solid transparent;
     padding: var(--_padding);
     gap: var(--_gap);
@@ -205,7 +131,7 @@ const base = css `
     box-shadow: var(--_boxShadow-hover);
     border-color: var(
       --button-border-color-hover,
-      var(--button-border-color, var(--_borderColor))
+      var(--button-border-color, var(--_bd))
     );
   }
   #external-link-icon {
@@ -244,47 +170,94 @@ const base = css `
     border: 0;
   }
 `;
-const fill = css `
-  :host([appearance="fill"]:not([disabled])) {
-    --_backgroundColor: var(--_mainColor);
-    --_textColor: var(--_mainColor-text);
+const slottedLink = css `
+  #button.slotted-link {
+    position: relative;
   }
-  :host([appearance="fill"]:not([disabled]):is(:hover, :focus-visible)) #button,
-  :host([appearance="fill"]:not([disabled]))
-    #button:is(:hover, :focus-visible) {
-    --_backgroundColor: var(--_mainColor-hover);
+  ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
   }
-  :host([appearance="fill"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--_borderSize));
+    border-radius: var(--_borderRadius);
+    outline: 2px solid transparent;
+    transition: outline ease-out var(--_transition);
   }
-  :host(
-      [appearance="fill"]:is(
-          [variant="critical"],
-          [variant="success"],
-          [variant="warning"]
-        ):not([disabled]):is(:hover, :focus-visible)
-    )
-    #button,
-  :host(
-      [appearance="fill"]:is(
-          [variant="critical"],
-          [variant="success"],
-          [variant="warning"]
-        ):not([disabled])
-    )
-    #button:is(:hover, :focus-visible) {
-    filter: brightness(0.9);
+  ::slotted(a:focus-visible)::after {
+    outline-offset: 2px;
+    outline-color: var(--_focusIndicator);
   }
-  :host([appearance="fill"][variant="critical"]:not([disabled])) #button:active,
-  :host([appearance="fill"][variant="success"]:not([disabled])) #button:active,
-  :host([appearance="fill"][variant="warning"]:not([disabled])) #button:active {
-    filter: brightness(0.8);
+  :host(:focus-within) #button.slotted-link {
+    box-shadow: var(--_boxShadow-hover);
+    border-color: var(
+      --button-border-color-hover,
+      var(--button-border-color, var(--_bd))
+    );
+  }
+  :host(:not([disabled]):focus-within) #button.slotted-link {
+    background: var(
+      --button-background-hover,
+      var(--_hoverFromCustom, var(--_bg-hover))
+    );
+  }
+  :host([slide]:focus-within) #button.slotted-link {
+    grid-template-columns: auto 1fr auto;
+  }
+  :host([slide]:focus-within) #button.slotted-link slot:not([name]) {
+    margin-left: var(--_gap);
+    opacity: 1;
+  }
+  :host([disabled]) ::slotted(a),
+  :host([loading]) ::slotted(a) {
+    pointer-events: none;
+    cursor: inherit;
   }
 `;
-const raised = css `
-  :host([appearance="raised"]:not([disabled])) {
-    --_backgroundColor: transparent;
-    --_textColor: var(--_mainColor);
+const appearances = css `
+  :host([appearance="fill"]),
+  :host(:not([appearance])) {
+    --_bg: var(--_solid);
+    --_bg-hover: var(--_solid-hover);
+    --_bg-active: var(--_solid-active);
+    --_fg: var(--_onSolid);
+    --_bd: transparent;
+  }
+  :host([appearance="default"]) {
+    --_bg: var(--_tint);
+    --_bg-hover: var(--_tint-hover);
+    --_bg-active: var(--_tint-active);
+    --_fg: var(--_fgTint);
+    --_bd: transparent;
+  }
+  :host([appearance="outline"]) {
+    --_bg: transparent;
+    --_bg-hover: var(--_wash-hover);
+    --_bg-active: var(--_wash-active);
+    --_fg: var(--_accent);
+    --_bd: var(--_solid);
+  }
+  :host([appearance="ghost"]) {
+    --_bg: transparent;
+    --_bg-hover: var(--_wash-hover);
+    --_bg-active: var(--_wash-active);
+    --_fg: var(--_accent);
+    --_bd: transparent;
+  }
+  :host([appearance="ghost"]:not([color])) {
+    --_accent: var(--eun-text-secondary, #484e61);
+    --_wash-hover: var(--eun-content-hover, #edeff0);
+    --_wash-active: var(--eun-disabled-color, #ecedf0);
+  }
+  :host([appearance="raised"]) {
+    --_bg: transparent;
+    --_bg-hover: transparent;
+    --_bg-active: transparent;
+    --_fg: var(--_accent);
+    --_bd: transparent;
     --_boxShadow: var(
       --button-shadow,
       var(--eun-shadow-s, "rgba(149, 157, 165, 0.2) 0px 8px 24px")
@@ -297,265 +270,81 @@ const raised = css `
       )
     );
   }
-  :host([appearance="raised"]:not([disabled])) #button:active {
-    box-shadow: var(
-      --eun-shadow-l,
-      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
-    );
-  }
-`;
-const defaultAppearance = css `
-  :host([appearance="default"]:not([disabled])) {
-    --_textColor: var(--_mainColor);
-  }
-  :host([appearance="default"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-primary-transparent, #3d6fff33)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-primary-transparent-hover, #3d6fff4d)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-primary-transparent-active, #3d6fff66)
-    );
-  }
-  :host([appearance="default"][variant="secondary"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-secondary-transparent, #e5a03033)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-secondary-transparent-hover, #e5a0304d)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-secondary-transparent-active, #e5a03066)
-    );
-  }
-  :host([appearance="default"][variant="critical"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-critical-30, #faf0f1)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-critical-50, #f1d6d9)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-critical-90, #e4adb4)
-    );
-  }
-  :host([appearance="default"][variant="success"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-success-30, #f1f9f4)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-success-50, #daefe2)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-success-90, #b6dec4)
-    );
-  }
-  :host([appearance="default"][variant="warning"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-warning-30, #fcf5f0)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-warning-50, #f6e3d7)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-warning-90, #edc8b0)
-    );
-  }
-  :host([appearance="default"][variant="light"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-grey-300, #dee0e7)
-    );
+  :host([appearance="flat"]) {
+    --_bg: var(--_flat);
+    --_bg-hover: var(--_flat-hover);
+    --_bg-active: var(--_flat-hover);
+    --_fg: var(--_flatFg);
+    --_bd: transparent;
   }
-  :host([appearance="default"][variant="medium"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_mainColor-hover: var(
+
+  :host(:not([disabled])) #button:is(:hover, :focus-visible),
+  :host(:not([disabled]):focus-visible) #button {
+    background: var(
       --button-background-hover,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_mainColor-active: var(
-      --button-background-active,
-      var(--eun-color-grey-400, #c1c9d6)
+      var(--_hoverFromCustom, var(--_bg-hover))
     );
   }
-  :host([appearance="default"][variant="dark"]:not([disabled])) {
-    --_backgroundColor: var(
-      --button-background,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_mainColor-hover: var(
-      --button-background-hover,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_mainColor-active: var(
+  :host(:not([disabled])) #button:active {
+    background: var(
       --button-background-active,
-      var(--eun-color-grey-400, #c1c9d6)
+      var(--_activeFromCustom, var(--_bg-active))
     );
   }
-  :host([appearance="default"]:not([disabled]):is(:hover, :focus-visible))
-    #button,
-  :host([appearance="default"]:not([disabled]))
-    #button:is(:hover, :focus-visible) {
-    --_backgroundColor: var(--_mainColor-hover);
-  }
-  :host([appearance="default"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
-  }
-`;
-const outline = css `
-  :host([appearance="outline"]:not([disabled])) {
-    --_backgroundColor: transparent;
-    --_textColor: var(--_mainColor);
-    --_borderColor: var(--_mainColor);
-    --_mainColor-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
-    --_mainColor-active: var(--eun-color-primary-transparent-active, #3d6fff66);
-  }
-  :host([appearance="outline"][variant="secondary"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
-    --_mainColor-active: var(
-      --eun-color-secondary-transparent-active,
-      #ef9c7c66
+  :host([appearance="raised"]:not([disabled])) #button:active {
+    box-shadow: var(
+      --eun-shadow-l,
+      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
     );
   }
-  :host([appearance="outline"][variant="critical"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-critical-50, #f1d6d9);
-    --_mainColor-active: var(--eun-color-critical-90, #e4adb4);
-  }
-  :host([appearance="outline"][variant="success"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-success-50, #daefe2);
-    --_mainColor-active: var(--eun-color-success-90, #b6dec4);
-  }
-  :host([appearance="outline"][variant="warning"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-warning-50, #f6e3d7);
-    --_mainColor-active: var(--eun-color-warning-90, #edc8b0);
-  }
-  :host([appearance="outline"][variant="light"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-  }
-  :host([appearance="outline"][variant="medium"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-300, #dee0e7);
-    --_mainColor-active: var(--eun-color-grey-400, #c1c9d6);
-  }
-  :host([appearance="outline"][variant="dark"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-  }
-  :host([appearance="outline"]:not([disabled]):is(:hover, :focus-visible))
+
+  :host(
+      [appearance="fill"]:is(
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
+        ):not([disabled]):is(:hover, :focus-visible)
+    )
     #button,
-  :host([appearance="outline"]:not([disabled]))
+  :host(
+      [appearance="fill"]:is(
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
+        ):not([disabled])
+    )
     #button:is(:hover, :focus-visible) {
-    --_backgroundColor: var(--_mainColor-hover);
-  }
-  :host([appearance="outline"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
-  }
-`;
-const flat = css `
-  :host([appearance="flat"]:not([disabled])) {
-    --_backgroundColor: var(--eun-color-grey-100, #f7f8fa);
-    --_textColor: var(--eun-text-secondary, #484e61);
-  }
-  :host([appearance="flat"]:not([disabled]):is(:hover, :focus-visible, :active))
-    #button,
-  :host([appearance="flat"]:not([disabled]))
-    #button:is(:hover, :focus-visible, :active) {
-    --_backgroundColor: var(--eun-content-hover, #edeff0);
-  }
-`;
-const ghost = css `
-  :host([appearance="ghost"]:not([disabled])) {
-    --_backgroundColor: transparent;
-    --_borderColor: transparent;
-    --_textColor: var(--button-text, var(--_mainColor));
-    --_mainColor-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
-    --_mainColor-active: var(--eun-color-primary-transparent-active, #3d6fff66);
-  }
-  :host([appearance="ghost"][variant="secondary"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
-    --_mainColor-active: var(
-      --eun-color-secondary-transparent-active,
-      #ef9c7c66
-    );
-  }
-  :host([appearance="ghost"][variant="critical"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-critical-50, #f1d6d9);
-    --_mainColor-active: var(--eun-color-critical-90, #e4adb4);
-  }
-  :host([appearance="ghost"][variant="success"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-success-50, #daefe2);
-    --_mainColor-active: var(--eun-color-success-90, #b6dec4);
-  }
-  :host([appearance="ghost"][variant="warning"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-warning-50, #f6e3d7);
-    --_mainColor-active: var(--eun-color-warning-90, #edc8b0);
-  }
-  :host([appearance="ghost"][variant="light"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-  }
-  :host([appearance="ghost"][variant="medium"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-300, #dee0e7);
-    --_mainColor-active: var(--eun-color-grey-400, #c1c9d6);
-  }
-  :host([appearance="ghost"][variant="dark"]:not([disabled])) {
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-  }
-  :host([appearance="ghost"]:not([variant]):not([disabled])) {
-    --_mainColor: var(--eun-text-secondary, #484e61);
-    --_mainColor-hover: var(--eun-content-hover, #edeff0);
-    --_mainColor-active: var(--eun-disabled-color, #ecedf0);
-  }
-  :host([appearance="ghost"]:not([disabled])) #button:hover,
-  :host([appearance="ghost"]:not([disabled]):focus-visible) #button,
-  :host([appearance="ghost"]:not([disabled])) #button:focus-visible {
-    --_backgroundColor: var(--_mainColor-hover);
+    filter: brightness(0.9);
   }
-  :host([appearance="ghost"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
+  :host([appearance="fill"][color="critical"]:not([disabled])) #button:active,
+  :host([appearance="fill"][color="success"]:not([disabled])) #button:active,
+  :host([appearance="fill"][color="warning"]:not([disabled])) #button:active {
+    filter: brightness(0.8);
   }
 `;
 const disabled = css `
   :host([disabled]) {
-    --_mainColor: var(--eun-disabled-color, #ecedf0);
-    --_textColor: var(--eun-text-disabled-color, #8d93aa);
+    --_bg: var(--eun-disabled-color, #ecedf0);
+    --_bg-hover: var(--eun-disabled-color, #ecedf0);
+    --_bg-active: var(--eun-disabled-color, #ecedf0);
+    --_fg: var(--eun-text-disabled-color, #8d93aa);
+    --_bd: transparent;
+    --_boxShadow: none;
+    --_boxShadow-hover: none;
     --_cursor: not-allowed;
   }
   :host([disabled]) #button {
     --_icon-color: currentColor;
+    --_textColor: var(--_fg);
+    background: var(--_bg);
+    border-color: var(--_bd);
     pointer-events: none;
   }
 `;
 const slide = css `
+  :host([slide]) {
+    width: auto;
+  }
   :host([slide]) #button {
     display: grid;
     grid-template-columns: auto 0fr auto;
@@ -599,7 +388,7 @@ const full = css `
 const fullVariable = css `
   @supports (width: if(style(--a: b): 1px; else: 2px)) {
     :host {
-      width: if(style(--button-full: true): 100%; else: auto);
+      width: if(style(--button-full: true): 100%; else: fit-content);
     }
     #button {
       justify-content: if(style(--button-full: true): center; else: normal);
@@ -607,15 +396,12 @@ const fullVariable = css `
   }
 `;
 export const buttonStyles = [
+    buttonPaletteStyles,
     base,
-    fill,
-    raised,
-    outline,
-    flat,
-    ghost,
-    defaultAppearance,
+    appearances,
     disabled,
     slide,
+    slottedLink,
     fullVariable,
     full,
 ];