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

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

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult } from "lit";
 import { DropdownMenuContainer } from "../../../utils/dropdown-menu.utils.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
-import { ButtonSize, ButtonVariant, EunomiaButtonAppearance } from "../../../mixins/button.mixin.js";
+import { ButtonSize, ButtonColor, EunomiaButtonAppearance } from "../../../mixins/button.mixin.js";
 import { EunomiaSeverity } from "../../../types/variant.type.js";
 /**
  * Tag name of the dropdown-button component.
@@ -25,7 +25,7 @@ export interface EunomiaDropdownOption {
 export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right" | "bottom-end" | "bottom" | "bottom-start" | "left";
 /**
  * A button that opens a menu of actions on click. Its trigger is a regular
- * button, so every button variant, size, and appearance works the same way.
+ * button, so every button color, size, and appearance works the same way.
  *
  * Choosing an option doesn't persist a value on the component itself, since
  * this is a menu of actions rather than a form field. Each choice fires an
@@ -47,14 +47,16 @@ export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right"
  * @slot start - An icon or other content shown at the start of the trigger. Takes priority over the default icon from icon or severity
  * @prop {string} label - The trigger button's label
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon for the trigger button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
- * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
+ * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by color
  * @prop {Array<EunomiaDropdownOption>} [options=[]] - The menu options
  * @attr {string} [options] - The menu options, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {string[]} [disabledKeys=[]] - Keys of options to disable in addition to any option already marked disabled
  * @attr {string} [disabled-keys] - The disabled option keys, written as a JSON string for use directly in markup instead of the JavaScript property
  * @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 {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} color - The color 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 colors
+ * @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 colors
  * @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
@@ -98,7 +100,7 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
      * trigger `eun-button`. By default, once `severity` is set and `icon`
      * isn't (and nothing is slotted into `start`), the leading icon is set
      * according to it — same vocabulary as `eun-alert`/`eun-tag`. Has no
-     * effect on color, which stays driven by `variant` : the two genuinely
+     * effect on color, which stays driven by `color` : the two genuinely
      * differ here, since a full severity range (`info`/`neutral` included)
      * doesn't have a matching action color.
      */
@@ -132,7 +134,12 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
     /**
      * Forwarded to the trigger `eun-button`.
      */
-    variant?: ButtonVariant;
+    color?: ButtonColor;
+    /**
+     * Forwarded to the trigger `eun-button`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * Forwarded to the trigger `eun-button`.
      * @default false

package/dist/components/action/dropdown-button/dropdown-button.js

@@ -18,7 +18,7 @@ import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
 /**
  * A button that opens a menu of actions on click. Its trigger is a regular
- * button, so every button variant, size, and appearance works the same way.
+ * button, so every button color, size, and appearance works the same way.
  *
  * Choosing an option doesn't persist a value on the component itself, since
  * this is a menu of actions rather than a form field. Each choice fires an
@@ -40,14 +40,16 @@ export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
  * @slot start - An icon or other content shown at the start of the trigger. Takes priority over the default icon from icon or severity
  * @prop {string} label - The trigger button's label
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon for the trigger button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
- * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
+ * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by color
  * @prop {Array<EunomiaDropdownOption>} [options=[]] - The menu options
  * @attr {string} [options] - The menu options, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {string[]} [disabledKeys=[]] - Keys of options to disable in addition to any option already marked disabled
  * @attr {string} [disabled-keys] - The disabled option keys, written as a JSON string for use directly in markup instead of the JavaScript property
  * @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 {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} color - The color 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 colors
+ * @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 colors
  * @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
@@ -96,6 +98,11 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
          * @default m
          */
         this.size = "m";
+        /**
+         * Forwarded to the trigger `eun-button`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * Forwarded to the trigger `eun-button`.
          * @default false
@@ -1064,7 +1071,8 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         id="trigger"
         type="button"
         size=${this.size}
-        variant=${ifDefined(this.variant)}
+        color=${ifDefined(this.color)}
+        ?fixed-color=${this.fixedColor}
         appearance=${this.appearance}
         ?rounded=${this.rounded}
         ?disabled=${this.disabled}
@@ -1120,7 +1128,10 @@ __decorate([
 ], EunomiaDropdownButton.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
-], EunomiaDropdownButton.prototype, "variant", void 0);
+], EunomiaDropdownButton.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaDropdownButton.prototype, "fixedColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDropdownButton.prototype, "rounded", void 0);

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

@@ -34,17 +34,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,
@@ -118,7 +118,7 @@ const base = css `
   }
   #menu li.active,
   .submenu li.active {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(
       --dropdown-menu-accent-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -152,7 +152,7 @@ const base = css `
   }
   #menu li .description,
   .submenu li .description {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
       var(--eun-text-secondary, #484e61)
@@ -171,17 +171,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,

package/dist/components/action/dropdown-button/dropdown-item.styles.js

@@ -20,7 +20,7 @@ const base = css `
     display: block;
     white-space: nowrap;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     outline: none;
   }
   .content {
@@ -62,7 +62,7 @@ const base = css `
     );
   }
   :host([active]) .content {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(
       --dropdown-menu-accent-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -90,7 +90,7 @@ const base = css `
     text-overflow: ellipsis;
   }
   .description {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
       var(--eun-text-secondary, #484e61)
@@ -109,17 +109,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,

package/dist/components/action/fab/fab.d.ts

@@ -8,10 +8,10 @@ export declare const EunomiaFabTagName = "eun-fab";
  * The corner a positioned FAB is fixed to.
  */
 export type EunomiaFabPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
-declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
+declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A circular icon button for a screen's single primary action. It shares
- * its variant, size, href, loading, and keyboard behavior with the regular
+ * its color, size, href, loading, and keyboard behavior with the regular
  * button.
  *
  * When label is set, the button becomes extendable. It stays a plain circle
@@ -25,11 +25,14 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @prop {EunomiaIconName} icon - The icon displayed at all times
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='primary'] - The color applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark 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 colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark 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 colors
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically announces it to assistive technology, and adds an external link icon when label is also set
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @prop {boolean} [loading=false] - Whether the button shows a loading indicator. Like disabled, it blocks interaction, but keeps the icon and label in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
@@ -38,7 +41,7 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color
+ * @cssprop [--fab-background] - Sets the background color, for every color
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline

package/dist/components/action/fab/fab.js

@@ -10,6 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { ButtonMixin } from "../../../mixins/button.mixin.js";
 import { CommandMixin } from "../../../mixins/command.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 import { fabStyles } from "./fab.styles.js";
 /**
@@ -18,7 +19,7 @@ import { fabStyles } from "./fab.styles.js";
 export const EunomiaFabTagName = "eun-fab";
 /**
  * A circular icon button for a screen's single primary action. It shares
- * its variant, size, href, loading, and keyboard behavior with the regular
+ * its color, size, href, loading, and keyboard behavior with the regular
  * button.
  *
  * When label is set, the button becomes extendable. It stays a plain circle
@@ -32,11 +33,14 @@ export const EunomiaFabTagName = "eun-fab";
  * @prop {EunomiaIconName} icon - The icon displayed at all times
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='primary'] - The color applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark 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 colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark 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 colors
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically announces it to assistive technology, and adds an external link icon when label is also set
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @prop {boolean} [loading=false] - Whether the button shows a loading indicator. Like disabled, it blocks interaction, but keeps the icon and label in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
@@ -45,7 +49,7 @@ export const EunomiaFabTagName = "eun-fab";
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color
+ * @cssprop [--fab-background] - Sets the background color, for every color
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline
@@ -54,7 +58,7 @@ export const EunomiaFabTagName = "eun-fab";
  * @cssprop [--fab-offset] - Sets the distance from the viewport edge for a positioned button
  * @element eun-fab
  */
-let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin(LitElement))) {
+let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin(LocalizableMixin(LitElement)))) {
     constructor() {
         super(...arguments);
         /**
@@ -130,7 +134,8 @@ let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin
         if (!this.isBlank || this.ariaLabel) {
             return nothing;
         }
-        return html `<span class="sr-only"> (opens in a new tab)</span>`;
+        const hint = this.dictionary.link.opensInNewTab;
+        return html `<span class="sr-only"> (${hint})</span>`;
     }
     /**
      * Renders `label`, with an appended external-link icon (mirroring
@@ -196,7 +201,7 @@ let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin
           rel=${ifDefined(this.isBlank ? "noopener noreferrer" : undefined)}
           download=${ifDefined(this.download)}
           aria-label=${ifDefined(this.isBlank && this.ariaLabel
-                ? `${this.ariaLabel} (opens in a new tab)`
+                ? `${this.ariaLabel} (${this.dictionary.link.opensInNewTab})`
                 : (this.ariaLabel ?? undefined))}
           aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
           aria-busy=${ifDefined(this.loading ? "true" : undefined)}

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

@@ -1,18 +1,17 @@
 import { css } from "lit";
+import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
 /**
  * Base style for the floating action button.
  *
- * The color/hover/text/focus custom-property convention (`--_mainColor`,
- * `--_mainColor-hover`, ...) mirrors `eun-button`'s own stylesheet, adapted
- * to a single circular `#fab` element instead of `#button` plus a default
- * slot — `button.styles.ts` only exports its final composed array, not the
- * individual pieces, so this re-derives the same pattern rather than
- * importing it.
+ * The color palette is shared with `eun-button` (see
+ * {@link buttonPaletteStyles}) and read *behind* the `--fab-*` custom
+ * properties, so those win over every color. A fab only has a solid look,
+ * so it only reads the solid slots.
  *
  * Custom css variables:
- * [--fab-background] - Set a custom background color
- * [--fab-background-hover] - Set a custom background color for hover state
- * [--fab-text] - Set a custom text/icon color
+ * [--fab-background] - Set a custom background color, for every color
+ * [--fab-background-hover] - Set a custom background color for hover state. Derived from --fab-background when only that one is set
+ * [--fab-text] - Set a custom text/icon color, for every color
  * [--fab-focus-outline] - Set a custom color to the focus outline
  * [--fab-transition] - Set a custom transition time, shared by the slide-open animation and the hover/focus color changes (mirrors `eun-button`'s own `--button-transition`)
  * [--fab-z-index] - Set a custom z-index for a positioned FAB
@@ -20,16 +19,8 @@ import { css } from "lit";
  */
 const base = css `
   :host {
-    --_mainColor: var(--fab-background, var(--eun-color-primary-500, #3d6fff));
-    --_mainColor-hover: var(
-      --fab-background-hover,
-      var(--eun-color-primary-700, #3662e0)
-    );
-    --_mainColor-text: var(
-      --fab-text,
-      var(--eun-color-on-primary-500, #ffffff)
-    );
-    --_focusIndicator: var(--fab-focus-outline, var(--_mainColor));
+    --_focusIndicator: var(--fab-focus-outline, var(--_solid));
+    --_hoverFromCustom: color-mix(in srgb, var(--fab-background) 88%, black);
     --_transition: var(--fab-transition, 0.3s);
     --_gap: var(--eun-space-xs, 4px);
     --_circleSize: 56px;
@@ -39,7 +30,7 @@ const base = css `
     user-select: none;
     outline: 2px solid transparent;
     z-index: 0;
-    border-radius: var(--eun-borderRadius-xl);
+    border-radius: var(--eun-border-radius-xl);
     transition:
       background 0.3s ease-out,
       box-shadow 0.3s ease-out,
@@ -69,32 +60,15 @@ const base = css `
     --_circleSize: 88px;
     --icon-size: 34px;
   }
-  :host([variant="secondary"]) {
-    --_mainColor: var(--eun-color-secondary-500, #e5a030);
-    --_mainColor-hover: var(--eun-color-secondary-700, #ca8d2a);
-    --_mainColor-text: var(--eun-color-on-secondary-500, #000000de);
-  }
-  :host([variant="critical"]) {
-    --_mainColor: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-hover: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-text: #fff;
-  }
-  :host([variant="success"]) {
-    --_mainColor: var(--eun-color-success-100, #1a9948);
-    --_mainColor-hover: var(--eun-color-success-100, #1a9948);
-    --_mainColor-text: #fff;
-  }
-  :host([variant="warning"]) {
-    --_mainColor: var(--eun-color-warning-100, #c85207);
-    --_mainColor-hover: var(--eun-color-warning-100, #c85207);
-    --_mainColor-text: #fff;
-  }
   :host([disabled]) {
-    --_mainColor: var(--eun-disabled-color, #ecedf0);
-    --_mainColor-hover: var(--eun-disabled-color, #ecedf0);
-    --_mainColor-text: var(--eun-text-disabled-color, #8d93aa);
+    --_solid: var(--eun-disabled-color, #ecedf0);
+    --_solid-hover: var(--eun-disabled-color, #ecedf0);
+    --_onSolid: var(--eun-text-disabled-color, #8d93aa);
   }
+  /* A disabled fab never loses its look to a custom property. */
   :host([disabled]) #fab {
+    background: var(--_solid);
+    color: var(--_onSolid);
     cursor: not-allowed;
     pointer-events: none;
     box-shadow: none;
@@ -112,11 +86,11 @@ const base = css `
     box-sizing: border-box;
     overflow: hidden;
     border: none;
-    border-radius: var(--eun-borderRadius-xl, 999px);
-    background: var(--_mainColor);
-    color: var(--_mainColor-text);
+    border-radius: var(--eun-border-radius-xl, 999px);
+    background: var(--fab-background, var(--_solid));
+    color: var(--fab-text, var(--_onSolid));
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     text-decoration: none;
     cursor: pointer;
     outline: 2px solid transparent;
@@ -139,7 +113,10 @@ const base = css `
     transform: rotate(-45deg);
   }
   :host(:not([disabled]):not([loading])) #fab:hover {
-    background: var(--_mainColor-hover);
+    background: var(
+      --fab-background-hover,
+      var(--_hoverFromCustom, var(--_solid-hover))
+    );
     box-shadow: var(
       --eun-shadow-l,
       0 10px 15px -3px rgba(0, 0, 0, 0.15),
@@ -242,4 +219,4 @@ const position = css `
     left: var(--fab-offset, var(--eun-space-l, 32px));
   }
 `;
-export const fabStyles = [base, slide, position];
+export const fabStyles = [buttonPaletteStyles, base, slide, position];