@eunomia/elements 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -1,67 +1,60 @@
 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-background] - Set a custom background color, for every appearance and variant
+ * [--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 variant
  * [--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-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 variant
  * [--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
+ */
+/*
+ * The variant fills the palette slots (see {@link buttonPaletteStyles}), the
+ * appearance reads them into --_bg / --_bg-hover / --_bg-active / --_fg /
+ * --_bd, and #button finally reads those *behind* the --button-* custom
+ * properties, so a custom property always wins over any variant, appearance
+ * and state. Only `disabled` stays above them, so it never loses its look.
  */
 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)
+    --_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
     );
-    --_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)
+      var(--eun-border-radius-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));
     --_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);
@@ -79,83 +72,37 @@ const base = css `
     outline-color: var(--_focusIndicator);
   }
   :host([size="xs"]) {
-    --_fontSize: var(--eun-fontSize-xs, 10px);
+    --_fontSize: var(--eun-font-size-xs, 10px);
     --_padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-borderRadius-s, 999px);
+    --_borderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="s"]) {
-    --_fontSize: var(--eun-fontSize-xs, 10px);
+    --_fontSize: var(--eun-font-size-xs, 10px);
     --_padding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-borderRadius-s, 999px);
+    --_borderRadius: 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);
     --_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);
     --_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-100, #f7f8fa);
-    --_mainColor-hover: var(--eun-color-grey-200, #ecedf0);
-    --_mainColor-active: var(--eun-color-grey-300, #dee0e7);
-    --_mainColor-text: var(--eun-color-grey-700, #484e61);
-    --_mainColor-outline: var(--eun-color-grey-500, #8d93aa);
-  }
-  :host([variant="medium"]) {
-    --_mainColor: var(--eun-color-grey-300, #dee0e7);
-    --_mainColor-hover: var(--eun-color-grey-400, #c1c9d6);
-    --_mainColor-active: var(--eun-color-grey-500, #8d93aa);
-    --_mainColor-text: var(--eun-color-grey-900, #000000);
-    --_mainColor-outline: var(--eun-color-grey-600, #666e8a);
-  }
-  :host([variant="dark"]) {
-    --_mainColor: var(--eun-color-grey-800, #071621);
-    --_mainColor-hover: var(--eun-color-grey-700, #484e61);
-    --_mainColor-active: var(--eun-color-grey-900, #000000);
-    --_mainColor-text: var(--eun-color-grey-0, #ffffff);
-    --_mainColor-outline: var(--eun-color-grey-800, #071621);
+    --_borderRadius: 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),
@@ -167,15 +114,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);
@@ -192,7 +139,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 {
@@ -231,19 +178,89 @@ const base = css `
     border: 0;
   }
 `;
-const fill = css `
-  :host([appearance="fill"]:not([disabled])) {
-    --_backgroundColor: var(--_mainColor);
-    --_textColor: var(--_mainColor-text);
+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([variant])) {
+    --_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")
+    );
+    --_boxShadow-hover: var(
+      --button-shadow-hover,
+      var(
+        --eun-shadow-m,
+        "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+      )
+    );
   }
-  :host([appearance="fill"]:not([disabled]):is(:hover, :focus-visible)) #button,
-  :host([appearance="fill"]:not([disabled]))
-    #button:is(:hover, :focus-visible) {
-    --_backgroundColor: var(--_mainColor-hover);
+  :host([appearance="flat"]) {
+    --_bg: var(--_flat);
+    --_bg-hover: var(--_flat-hover);
+    --_bg-active: var(--_flat-hover);
+    --_fg: var(--_flatFg);
+    --_bd: transparent;
   }
-  :host([appearance="fill"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
+
+  /* States : a custom background wins, derived when only the rest one is set. */
+  :host(:not([disabled])) #button:is(:hover, :focus-visible),
+  :host(:not([disabled]):focus-visible) #button {
+    background: var(
+      --button-background-hover,
+      var(--_hoverFromCustom, var(--_bg-hover))
+    );
   }
+  :host(:not([disabled])) #button:active {
+    background: var(
+      --button-background-active,
+      var(--_activeFromCustom, var(--_bg-active))
+    );
+  }
+  :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"
+    );
+  }
+
+  /* A solid semantic button darkens instead of switching color. */
   :host(
       [appearance="fill"]:is(
           [variant="critical"],
@@ -268,281 +285,29 @@ const fill = css `
     filter: brightness(0.8);
   }
 `;
-const raised = css `
-  :host([appearance="raised"]:not([disabled])) {
-    --_backgroundColor: transparent;
-    --_textColor: var(--_mainColor);
-    --_boxShadow: var(
-      --button-shadow,
-      var(--eun-shadow-s, "rgba(149, 157, 165, 0.2) 0px 8px 24px")
-    );
-    --_boxShadow-hover: var(
-      --button-shadow-hover,
-      var(
-        --eun-shadow-m,
-        "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
-      )
-    );
-  }
-  :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="default"][variant="medium"]: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(
-      --button-background-active,
-      var(--eun-color-grey-400, #c1c9d6)
-    );
-  }
-  :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(
-      --button-background-active,
-      var(--eun-color-grey-400, #c1c9d6)
-    );
-  }
-  :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="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))
-    #button,
-  :host([appearance="outline"]: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);
-  }
-  :host([appearance="ghost"]:not([disabled])) #button:active {
-    --_backgroundColor: var(--_mainColor-active);
-  }
-`;
 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;
@@ -578,22 +343,27 @@ const full = css `
   :host([full]) {
     display: flex;
     width: 100%;
-    height: 100%;
   }
   :host([full]) #button {
-    height: 100%;
     justify-content: center;
   }
 `;
+const fullVariable = css `
+  @supports (width: if(style(--a: b): 1px; else: 2px)) {
+    :host {
+      width: if(style(--button-full: true): 100%; else: fit-content);
+    }
+    #button {
+      justify-content: if(style(--button-full: true): center; else: normal);
+    }
+  }
+`;
 export const buttonStyles = [
+    buttonPaletteStyles,
     base,
-    fill,
-    raised,
-    outline,
-    flat,
-    ghost,
-    defaultAppearance,
+    appearances,
     disabled,
     slide,
+    fullVariable,
     full,
 ];

package/dist/components/action/dropdown-button/dropdown-button.d.ts

@@ -55,6 +55,8 @@ export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right"
  * @prop {boolean} [disabled=false] - Whether the trigger button is disabled
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the trigger button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} variant - The color theme applied to the trigger button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
  * @prop {boolean} [rounded=false] - Whether the trigger button has fully rounded corners
  * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='default'] - The trigger button's surface style, using the same values as the button component. Defaults to a paler tint rather than a solid fill, since a menu trigger reads better as a lighter weight control than a standalone primary action
  * @prop {EunomiaDropdownPlacement} [placement='bottom-start'] - Where the menu opens relative to the trigger
@@ -133,6 +135,11 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
      * Forwarded to the trigger `eun-button`.
      */
     variant?: ButtonVariant;
+    /**
+     * Forwarded to the trigger `eun-button`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * Forwarded to the trigger `eun-button`.
      * @default false