@breadstone/mosaik-elements-foundation 0.1.28 → 0.1.31

package/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.js

@@ -28,6 +28,7 @@ export function toastElementJoyStyle() {
   --toast-font-weight: var(--joy-typography-body1-font-weight);
   --toast-foreground-color: var(--joy-scheme-foreground);
   --toast-gap: var(--joy-layout-space);
+  --toast-offset-x: var(--joy-layout-space);
   --toast-offset-y: var(--joy-layout-space);
   --toast-padding-bottom: var(--joy-layout-space);
   --toast-padding-left: calc(var(--joy-layout-space) * 2);
@@ -113,7 +114,6 @@ export function toastElementJoyStyle() {
   padding-right: var(--toast-padding-right);
   padding-bottom: var(--toast-padding-bottom);
   padding-left: var(--toast-padding-left);
-  gap: var(--toast-gap);
   margin: auto;
   position: fixed;
   left: 50%;
@@ -121,6 +121,18 @@ export function toastElementJoyStyle() {
   translate: -50%;
 }
 
+:host [part="root"] [part="body"] {
+  align-items: center;
+  gap: var(--toast-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="root"] [part="text"] {
+  flex-direction: column;
+  display: flex;
+}
+
 :host [part="root"] [part="header"], :host [part="root"] [part="content"] {
   font-family: inherit;
   font-size: inherit;
@@ -132,6 +144,11 @@ export function toastElementJoyStyle() {
   color: inherit;
 }
 
+:host [part="root"] [part="icon"] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -157,24 +174,72 @@ export function toastElementJoyStyle() {
   pointer-events: none;
 }
 
-:host([position="bottom"]) [part="root"] {
-  top: unset;
-  bottom: var(--toast-offset-y);
+:host([position="top"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
-:host([position="middle"]) [part="root"] {
+:host([position="top-left"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="top-right"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="left"]) [part="root"] {
   top: 50%;
   bottom: unset;
+  left: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="center"]) [part="root"] {
+  top: 50%;
+  bottom: unset;
+  left: 50%;
   translate: -50% -50%;
 }
 
-:host([position="top"]) [part="root"] {
+:host([position="right"]) [part="root"] {
+  top: 50%;
   bottom: unset;
-  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="bottom"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
+:host([position="bottom-left"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="bottom-right"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
 :host [part="root"] {
   padding: calc(var(--joy-layout-space) * 2) calc(var(--joy-layout-space) * 3);
 }
@@ -224,6 +289,203 @@ export function toastElementJoyStyle() {
   --toast-foreground-color: var(--joy-color-neutral-0);
 }
 
+:host([appearance="outline"]) {
+  --toast-background-color: var(--joy-scheme-background);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-color: var(--joy-scheme-highlight);
+  --toast-border-width: var(--joy-layout-thickness);
+  --toast-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]) {
+  --toast-foreground-color: var(--joy-color-primary-500);
+  --toast-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]) {
+  --toast-foreground-color: var(--joy-color-secondary-500);
+  --toast-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]) {
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+  --toast-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]) {
+  --toast-foreground-color: var(--joy-color-danger-500);
+  --toast-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]) {
+  --toast-foreground-color: var(--joy-color-warning-500);
+  --toast-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]) {
+  --toast-foreground-color: var(--joy-color-success-500);
+  --toast-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]) {
+  --toast-foreground-color: var(--joy-color-info-500);
+  --toast-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]) {
+  --toast-foreground-color: var(--joy-color-highlight-500);
+  --toast-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]) {
+  --toast-foreground-color: var(--joy-color-neutral-500);
+  --toast-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --toast-background-color: var(--joy-scheme-highlight);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]) {
+  --toast-background-color: var(--joy-color-primary-100);
+  --toast-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]) {
+  --toast-background-color: var(--joy-color-secondary-100);
+  --toast-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]) {
+  --toast-background-color: var(--joy-color-tertiary-100);
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]) {
+  --toast-background-color: var(--joy-color-danger-100);
+  --toast-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]) {
+  --toast-background-color: var(--joy-color-warning-100);
+  --toast-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]) {
+  --toast-background-color: var(--joy-color-success-100);
+  --toast-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]) {
+  --toast-background-color: var(--joy-color-info-100);
+  --toast-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]) {
+  --toast-background-color: var(--joy-color-highlight-100);
+  --toast-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]) {
+  --toast-background-color: var(--joy-color-neutral-100);
+  --toast-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --toast-background-color: var(--joy-scheme-background);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]) {
+  --toast-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]) {
+  --toast-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]) {
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]) {
+  --toast-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]) {
+  --toast-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]) {
+  --toast-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]) {
+  --toast-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]) {
+  --toast-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]) {
+  --toast-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --toast-background-color: var(--joy-scheme-highlight);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]) {
+  --toast-background-color: var(--joy-color-primary-500);
+  --toast-foreground-color: var(--joy-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]) {
+  --toast-background-color: var(--joy-color-secondary-500);
+  --toast-foreground-color: var(--joy-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]) {
+  --toast-background-color: var(--joy-color-tertiary-500);
+  --toast-foreground-color: var(--joy-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]) {
+  --toast-background-color: var(--joy-color-danger-500);
+  --toast-foreground-color: var(--joy-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]) {
+  --toast-background-color: var(--joy-color-warning-500);
+  --toast-foreground-color: var(--joy-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]) {
+  --toast-background-color: var(--joy-color-success-500);
+  --toast-foreground-color: var(--joy-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]) {
+  --toast-background-color: var(--joy-color-info-500);
+  --toast-foreground-color: var(--joy-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]) {
+  --toast-background-color: var(--joy-color-highlight-500);
+  --toast-foreground-color: var(--joy-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]) {
+  --toast-background-color: var(--joy-color-neutral-500);
+  --toast-foreground-color: var(--joy-color-neutral-0);
+}
+
     `;
 }
 //# sourceMappingURL=ToastElement.Joy.js.map

package/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqNT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ToastElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2dT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Toast/Themes/ToastElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAsKpD"}
+{"version":3,"file":"ToastElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Toast/Themes/ToastElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAydpD"}

package/Controls/Components/Overlays/Toast/Themes/ToastElement.Memphis.js

@@ -28,6 +28,7 @@ export function toastElementMemphisStyle() {
   --toast-font-weight: var(--memphis-typography-body2-font-weight);
   --toast-foreground-color: var(--memphis-scheme-foreground);
   --toast-gap: var(--memphis-layout-space);
+  --toast-offset-x: var(--memphis-layout-space);
   --toast-offset-y: var(--memphis-layout-space);
   --toast-padding-bottom: calc(var(--memphis-layout-space) * 1.2);
   --toast-padding-left: calc(var(--memphis-layout-space) * 2.4);
@@ -113,7 +114,6 @@ export function toastElementMemphisStyle() {
   padding-right: var(--toast-padding-right);
   padding-bottom: var(--toast-padding-bottom);
   padding-left: var(--toast-padding-left);
-  gap: var(--toast-gap);
   margin: auto;
   position: fixed;
   left: 50%;
@@ -121,6 +121,18 @@ export function toastElementMemphisStyle() {
   translate: -50%;
 }
 
+:host [part="root"] [part="body"] {
+  align-items: center;
+  gap: var(--toast-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="root"] [part="text"] {
+  flex-direction: column;
+  display: flex;
+}
+
 :host [part="root"] [part="header"], :host [part="root"] [part="content"] {
   font-family: inherit;
   font-size: inherit;
@@ -132,6 +144,11 @@ export function toastElementMemphisStyle() {
   color: inherit;
 }
 
+:host [part="root"] [part="icon"] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -157,24 +174,314 @@ export function toastElementMemphisStyle() {
   pointer-events: none;
 }
 
-:host([position="bottom"]) [part="root"] {
-  top: unset;
-  bottom: var(--toast-offset-y);
+:host([position="top"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
-:host([position="middle"]) [part="root"] {
+:host([position="top-left"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="top-right"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="left"]) [part="root"] {
+  top: 50%;
+  bottom: unset;
+  left: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="center"]) [part="root"] {
   top: 50%;
   bottom: unset;
+  left: 50%;
   translate: -50% -50%;
 }
 
-:host([position="top"]) [part="root"] {
+:host([position="right"]) [part="root"] {
+  top: 50%;
   bottom: unset;
-  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="bottom"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
+:host([position="bottom-left"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="bottom-right"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-500);
+  --toast-foreground-color: var(--memphis-color-primary-0);
+}
+
+:host([variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-500);
+  --toast-foreground-color: var(--memphis-color-secondary-0);
+}
+
+:host([variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-500);
+  --toast-foreground-color: var(--memphis-color-tertiary-0);
+}
+
+:host([variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-500);
+  --toast-foreground-color: var(--memphis-color-danger-0);
+}
+
+:host([variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-500);
+  --toast-foreground-color: var(--memphis-color-warning-0);
+}
+
+:host([variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-500);
+  --toast-foreground-color: var(--memphis-color-success-0);
+}
+
+:host([variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-500);
+  --toast-foreground-color: var(--memphis-color-info-0);
+}
+
+:host([variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-500);
+  --toast-foreground-color: var(--memphis-color-highlight-0);
+}
+
+:host([variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-500);
+  --toast-foreground-color: var(--memphis-color-neutral-0);
+}
+
+:host([appearance="outline"]) {
+  --toast-background-color: var(--memphis-scheme-background);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-color: var(--memphis-scheme-contrast);
+  --toast-border-width: var(--memphis-layout-thickness);
+  --toast-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]) {
+  --toast-foreground-color: var(--memphis-color-primary-500);
+  --toast-border-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]) {
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+  --toast-border-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]) {
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+  --toast-border-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]) {
+  --toast-foreground-color: var(--memphis-color-danger-500);
+  --toast-border-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]) {
+  --toast-foreground-color: var(--memphis-color-warning-500);
+  --toast-border-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]) {
+  --toast-foreground-color: var(--memphis-color-success-500);
+  --toast-border-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]) {
+  --toast-foreground-color: var(--memphis-color-info-500);
+  --toast-border-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]) {
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+  --toast-border-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]) {
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+  --toast-border-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --toast-background-color: var(--memphis-scheme-highlight);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-100);
+  --toast-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-100);
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-100);
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-100);
+  --toast-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-100);
+  --toast-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-100);
+  --toast-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-100);
+  --toast-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-100);
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-100);
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --toast-background-color: var(--memphis-scheme-background);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]) {
+  --toast-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]) {
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]) {
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]) {
+  --toast-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]) {
+  --toast-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]) {
+  --toast-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]) {
+  --toast-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]) {
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]) {
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --toast-background-color: var(--memphis-scheme-highlight);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-500);
+  --toast-foreground-color: var(--memphis-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-500);
+  --toast-foreground-color: var(--memphis-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-500);
+  --toast-foreground-color: var(--memphis-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-500);
+  --toast-foreground-color: var(--memphis-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-500);
+  --toast-foreground-color: var(--memphis-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-500);
+  --toast-foreground-color: var(--memphis-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-500);
+  --toast-foreground-color: var(--memphis-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-500);
+  --toast-foreground-color: var(--memphis-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-500);
+  --toast-foreground-color: var(--memphis-color-neutral-0);
+}
+
     `;
 }
 //# sourceMappingURL=ToastElement.Memphis.js.map