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

package/dist/components/alert/alert/alert.styles.js

@@ -3,9 +3,10 @@ import { css } from "lit";
  * Base style for the alert component.
  *
  * Custom css variables:
- * [--alert-background-color] - Set a custom background color when `severity` is unset
- * [--alert-border-color] - Set a custom border color (outline type, and the default type's leading accent) when `severity` is unset
- * [--alert-color] - Set a custom heading/icon color when `severity` is unset ; the icon always matches this unless --alert-icon-color overrides it
+ * [--alert-background-color] - Set a custom background color, for every appearance and severity
+ * [--alert-border-color] - Set a custom border color, for every appearance and severity : the leading accent of the default appearance, and the border of every other one
+ * [--alert-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --alert-border-color is set
+ * [--alert-color] - Set a custom heading/icon/link color, for every appearance and severity ; the icon always matches this unless --alert-icon-color overrides it
  * [--alert-icon-color] - Set a custom icon color only, independent of the heading — defaults to matching --alert-color/the severity accent
  * [--alert-content-color] - Set a custom color for the description/action content, independent of the heading/icon color
  * [--alert-border-radius] - Set a custom border radius
@@ -23,16 +24,10 @@ const base = css `
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --alert-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-surface-sunken, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --alert-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--alert-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -59,7 +54,8 @@ const base = css `
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
-    --_background: var(--eun-color-grey-200, #ecedf0);
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
+    --_background: var(--eun-surface-sunken-strong, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
     --_titleColor: var(--eun-color-grey-700, #484e61);
@@ -74,9 +70,18 @@ const base = css `
     row-gap: var(--alert-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--alert-padding, var(--eun-space-m, 16px));
-    border-radius: var(--alert-border-radius, var(--eun-borderRadius-m, 8px));
-    font-size: var(--eun-fontSize-s, 14px);
+    --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --alert-border-* never changes the size. */
+    border: var(--_bw) solid
+      var(--alert-border-color, var(--_frame, transparent));
+    padding: var(
+      --alert-padding,
+      max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+    );
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--alert-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -90,44 +95,53 @@ const base = css `
   :host([appearance="default"]) #alert {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--_background) 4px
+      var(--alert-border-color, var(--_borderColor)) 4px,
+      var(--alert-background-color, var(--_background)) 4px
     );
   }
   :host([appearance="flat"]) #alert {
-    background: var(--_background);
+    background: var(--alert-background-color, var(--_background));
   }
   :host([appearance="outline"]) #alert {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(
+      --alert-background-color,
+      var(--eun-surface-color, #ffffff)
+    );
   }
   :host([appearance="fill"]) #alert {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--alert-content-color, #fff);
+    background: var(--alert-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--alert-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, var(--_titleColor));
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_titleColor))
+    );
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, #fff);
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_onFilled, #fff))
+    );
   }
   #heading {
     grid-column: 2;
     grid-row: 1;
     align-self: center;
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   #description,
@@ -145,7 +159,10 @@ const base = css `
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -162,15 +179,19 @@ const base = css `
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #alert {
     padding-right: calc(
-      var(--alert-padding, var(--eun-space-m, 16px)) + var(--eun-space-l, 32px)
+      var(
+          --alert-padding,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        ) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -179,7 +200,7 @@ const base = css `
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--alert-color, var(--_titleColor));
     --button-focus-outline: var(
       --alert-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -188,7 +209,7 @@ const base = css `
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--alert-color, var(--_onFilled, #fff));
   }
 `;
 export const alertStyles = base;

package/dist/components/alert/drawer/drawer.js

@@ -424,7 +424,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
         heading=${this.confirmCloseHeading}
         cancel-label=${this.confirmCloseCancelLabel}
         confirm-label=${this.confirmCloseConfirmLabel}
-        confirm-variant="critical"
+        confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >

package/dist/components/alert/drawer/drawer.styles.js

@@ -105,8 +105,8 @@ const base = css `
   }
   #heading {
     margin: 0;
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: inherit;
   }
   #close-button {
@@ -117,7 +117,7 @@ const base = css `
     min-height: 0;
     overflow-y: auto;
     padding: var(--_gap) var(--_padding);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
     flex: none;

package/dist/components/alert/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
-import { ButtonVariant } from "../../../mixins/button.mixin.js";
-import { EunomiaModalConfirmVariant } from "../../../types/variant.type.js";
+import { ButtonColor } from "../../../mixins/button.mixin.js";
+import { EunomiaModalConfirmColor } from "../../../types/variant.type.js";
 /**
  * Tag name of the modal component.
  */
@@ -34,8 +34,8 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
  * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
  * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
- * @prop {'primary' | 'critical'} [confirmVariant='primary'] - The color theme of the default confirm button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelVariant - The color theme of the default cancel button. Left unset, it renders as a neutral gray ghost button
+ * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
  * @prop {string} ariaLabelClose - The accessible label of the close button
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
@@ -122,16 +122,16 @@ export declare class EunomiaModal extends EunomiaModal_base {
      */
     confirmLabel: string;
     /**
-     * Variant of the default confirm button.
+     * Color of the default confirm button.
      * @default primary
      */
-    confirmVariant: EunomiaModalConfirmVariant;
+    confirmColor: EunomiaModalConfirmColor;
     /**
-     * Variant of the default cancel button. Left unset, it renders as a
+     * Color of the default cancel button. Left unset, it renders as a
      * neutral gray ghost button; set it to color it like any other button
      * instead.
      */
-    cancelVariant?: ButtonVariant;
+    cancelColor?: ButtonColor;
     /**
      * Aria label of the close (X) button.
      * @default Close

package/dist/components/alert/modal/modal.js

@@ -45,8 +45,8 @@ export const EunomiaModalTagName = "eun-modal";
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
  * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
  * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
- * @prop {'primary' | 'critical'} [confirmVariant='primary'] - The color theme of the default confirm button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelVariant - The color theme of the default cancel button. Left unset, it renders as a neutral gray ghost button
+ * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
  * @prop {string} ariaLabelClose - The accessible label of the close button
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
@@ -120,10 +120,10 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
          */
         this.confirmLabel = "Confirm";
         /**
-         * Variant of the default confirm button.
+         * Color of the default confirm button.
          * @default primary
          */
-        this.confirmVariant = "primary";
+        this.confirmColor = "primary";
         /**
          * Aria label of the close (X) button.
          * @default Close
@@ -412,7 +412,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
         heading=${this.confirmCloseHeading}
         cancel-label=${this.confirmCloseCancelLabel}
         confirm-label=${this.confirmCloseConfirmLabel}
-        confirm-variant="critical"
+        confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
@@ -465,12 +465,12 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                   <eun-button
                     id="cancel-button"
                     appearance="ghost"
-                    variant=${ifDefined(this.cancelVariant)}
+                    color=${ifDefined(this.cancelColor)}
                     @click=${() => this.requestClose()}
                     >${this.cancelLabel}</eun-button
                   >
                   <eun-button
-                    variant=${this.confirmVariant}
+                    color=${this.confirmColor}
                     @click=${() => this.confirm()}
                     >${this.confirmLabel}</eun-button
                   >
@@ -521,11 +521,11 @@ __decorate([
     property({ attribute: "confirm-label" })
 ], EunomiaModal.prototype, "confirmLabel", void 0);
 __decorate([
-    property({ attribute: "confirm-variant" })
-], EunomiaModal.prototype, "confirmVariant", void 0);
+    property({ attribute: "confirm-color" })
+], EunomiaModal.prototype, "confirmColor", void 0);
 __decorate([
-    property({ attribute: "cancel-variant" })
-], EunomiaModal.prototype, "cancelVariant", void 0);
+    property({ attribute: "cancel-color" })
+], EunomiaModal.prototype, "cancelColor", void 0);
 __decorate([
     property({ attribute: "aria-label-close" })
 ], EunomiaModal.prototype, "ariaLabelClose", void 0);

package/dist/components/alert/modal/modal.styles.js

@@ -44,7 +44,7 @@ const base = css `
     color: var(--eun-text-color, #071621);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     border: none;
-    border-radius: var(--modal-border-radius, var(--eun-borderRadius-l, 12px));
+    border-radius: var(--modal-border-radius, var(--eun-border-radius-l, 12px));
     box-shadow: var(
       --eun-shadow-l,
       rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
@@ -112,26 +112,26 @@ const base = css `
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #header {
     flex: none;
     padding-bottom: var(--modal-gap, var(--eun-space-s, 8px));
     border-bottom: var(
       --modal-header-border,
-      var(--eun-borderWidth-m, 1.5px) solid var(--eun-border-color, #dee0e7)
+      var(--eun-border-width-m, 1.5px) solid var(--eun-border-color, #dee0e7)
     );
   }
   #heading {
     margin: 0;
     padding-inline-end: var(--eun-space-l, 32px);
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-text-color, #071621);
   }
   #description {
     margin: var(--eun-space-xs, 4px) 0 0;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--eun-text-secondary, #484e61);
   }
   #actions {

package/dist/components/alert/toast/toast.d.ts

@@ -74,9 +74,10 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
  * @cssprop [--toast-width] - Sets the width of the toast
  * @cssprop [--toast-transition-duration] - Sets the duration of the enter, exit, and stack reflow transitions
- * @cssprop [--toast-background-color] - Sets the background color when severity is unset
- * @cssprop [--toast-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--toast-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless toast-icon-color overrides it
+ * @cssprop [--toast-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--toast-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--toast-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--toast-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless toast-icon-color overrides it
  * @cssprop [--toast-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching toast-color or the severity accent
  * @cssprop [--toast-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--toast-border-radius] - Sets the corner radius of the toast

package/dist/components/alert/toast/toast.js

@@ -73,9 +73,10 @@ const EXIT_FALLBACK_MS = 600;
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
  * @cssprop [--toast-width] - Sets the width of the toast
  * @cssprop [--toast-transition-duration] - Sets the duration of the enter, exit, and stack reflow transitions
- * @cssprop [--toast-background-color] - Sets the background color when severity is unset
- * @cssprop [--toast-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--toast-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless toast-icon-color overrides it
+ * @cssprop [--toast-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--toast-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--toast-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--toast-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless toast-icon-color overrides it
  * @cssprop [--toast-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching toast-color or the severity accent
  * @cssprop [--toast-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--toast-border-radius] - Sets the corner radius of the toast

package/dist/components/alert/toast/toast.styles.js

@@ -8,9 +8,10 @@ import { css } from "lit";
  * [--toast-stack-gap] - Set a custom gap between stacked toasts sharing the same `position` ; read by `toast-stack.utils.ts` itself, not just CSS
  * [--toast-width] - Set a custom width
  * [--toast-transition-duration] - Set a custom duration for the enter/exit and stack-reflow transitions
- * [--toast-background-color] - Set a custom background color when `severity` is unset
- * [--toast-border-color] - Set a custom border color (outline type) when `severity` is unset
- * [--toast-color] - Set a custom heading/icon color when `severity` is unset ; the icon always matches this unless --toast-icon-color overrides it
+ * [--toast-background-color] - Set a custom background color, for every appearance and severity
+ * [--toast-border-color] - Set a custom border color, for every appearance and severity : the leading accent of the default appearance, and the border of every other one
+ * [--toast-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --toast-border-color is set
+ * [--toast-color] - Set a custom heading/icon/link color, for every appearance and severity ; the icon always matches this unless --toast-icon-color overrides it
  * [--toast-icon-color] - Set a custom icon color only, independent of the heading — defaults to matching --toast-color
  * [--toast-content-color] - Set a custom color for the description/action content, independent of the heading/icon color
  * [--toast-border-radius] - Set a custom border radius
@@ -138,16 +139,10 @@ const base = css `
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --toast-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-color-grey-100, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --toast-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--toast-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -174,6 +169,7 @@ const base = css `
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
     --_background: var(--eun-color-grey-200, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
@@ -189,8 +185,13 @@ const base = css `
     row-gap: var(--toast-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--toast-padding, var(--eun-space-m, 16px));
-    border-radius: var(--toast-border-radius, var(--eun-borderRadius-m, 8px));
+    --_bw: var(--toast-border-width, var(--eun-border-width-s, 1px));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --toast-border-* never changes the size. */
+    border: var(--_bw) solid var(--toast-border-color, var(--_frame, transparent));
+    padding: var(--toast-padding, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))));
+    border-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
       --toast-shadow,
       var(
@@ -199,7 +200,7 @@ const base = css `
         rgba(0, 0, 0, 0.05) 0 4px 6px -2px
       )
     );
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--toast-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -213,42 +214,42 @@ const base = css `
   :host([appearance="default"]) #toast {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--eun-surface-color, #ffffff) 4px
+      var(--toast-border-color, var(--_borderColor)) 4px,
+      var(--toast-background-color, var(--eun-surface-color, #ffffff)) 4px
     );
   }
   :host([appearance="flat"]) #toast {
-    background: var(--_background);
+    background: var(--toast-background-color, var(--_background));
   }
   :host([appearance="outline"]) #toast {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(--toast-background-color, var(--eun-surface-color, #ffffff));
   }
   :host([appearance="fill"]) #toast {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--toast-content-color, #fff);
+    background: var(--toast-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--toast-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
-    font-weight: var(--eun-fontWeight-l, 700);
+    color: var(--toast-color, var(--_titleColor));
+    font-weight: var(--eun-font-weight-l, 700);
     grid-column: 2;
     grid-row: 1;
     align-self: center;
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, var(--_titleColor));
+    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_titleColor)));
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, #fff);
+    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_onFilled, #fff)));
   }
 
   #description,
@@ -266,7 +267,10 @@ const base = css `
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--toast-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -277,16 +281,17 @@ const base = css `
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
-    --button-text: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
+    --button-text: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #toast {
     padding-right: calc(
-      var(--toast-padding, var(--eun-space-s, 8px)) + var(--eun-space-l, 32px)
+      var(--toast-padding, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -295,7 +300,7 @@ const base = css `
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--toast-color, var(--_titleColor));
     --button-focus-outline: var(
       --toast-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -304,7 +309,7 @@ const base = css `
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--toast-color, var(--_onFilled, #fff));
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/components/content/badge/badge.d.ts

@@ -1,13 +1,13 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
-import { EunomiaActionVariant, EunomiaCompactSize } from "../../../types/variant.type.js";
+import { EunomiaActionColor, EunomiaCompactSize } from "../../../types/variant.type.js";
 /**
  * Tag name of the badge component.
  */
 export declare const EunomiaBadgeTagName = "eun-badge";
 /**
- * All available badge variants.
+ * All available badge colors.
  */
-export type EunomiaBadgeVariant = EunomiaActionVariant;
+export type EunomiaBadgeColor = EunomiaActionColor;
 /**
  * All available badge sizes.
  */
@@ -23,7 +23,7 @@ export type EunomiaBadgeSize = EunomiaCompactSize;
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -43,10 +43,10 @@ export declare class EunomiaBadge extends LitElement {
      */
     static readonly styles: import("lit").CSSResult;
     /**
-     * The color variant to apply.
+     * The color to apply.
      * @default critical
      */
-    variant: EunomiaBadgeVariant;
+    color: EunomiaBadgeColor;
     /**
      * The size of the badge.
      * @default m

package/dist/components/content/badge/badge.js

@@ -22,7 +22,7 @@ export const EunomiaBadgeTagName = "eun-badge";
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -36,10 +36,10 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
     constructor() {
         super(...arguments);
         /**
-         * The color variant to apply.
+         * The color to apply.
          * @default critical
          */
-        this.variant = "critical";
+        this.color = "critical";
         /**
          * The size of the badge.
          * @default m
@@ -129,7 +129,7 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
 EunomiaBadge.styles = badgeStyles;
 __decorate([
     property({ reflect: true })
-], EunomiaBadge.prototype, "variant", void 0);
+], EunomiaBadge.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaBadge.prototype, "size", void 0);