@breadstone/mosaik-elements-foundation 0.1.22 → 0.1.23

package/Controls/Components/Buttons/Anchor/Themes/AnchorElement.Joy.js

@@ -34,7 +34,7 @@ export function anchorElementJoyStyle() {
   --anchor-shadow-offset-x: unset;
   --anchor-shadow-offset-y: unset;
   --anchor-shadow-spread: unset;
-  --anchor-transition-duration: var(--joy-duration-short);
+  --anchor-transition-duration: var(--mosaik-duration-short);
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: none;

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Cosmopolitan.js

@@ -43,12 +43,12 @@ export function buttonElementCosmopolitanStyle() {
   --button-progress-ring-width: var(--cosmopolitan-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
-  --button-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
-  --button-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
-  --button-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
-  --button-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
-  --button-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
+  --button-shadow: var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color);
+  --button-shadow-blur: var(--cosmopolitan-elevation-semilight-blur);
+  --button-shadow-color: var(--cosmopolitan-elevation-semilight-color);
+  --button-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x);
+  --button-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y);
+  --button-shadow-spread: var(--cosmopolitan-elevation-semilight-spread);
   --button-transition-duration: var(--cosmopolitan-layout-transition);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js

@@ -43,13 +43,13 @@ export function buttonElementJoyStyle() {
   --button-progress-ring-width: var(--joy-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-shadow: var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0);
-  --button-shadow-blur: var(--joy-elevation-semilight-blur-0);
-  --button-shadow-color: var(--joy-elevation-semilight-color-0);
-  --button-shadow-offset-x: var(--joy-elevation-semilight-offset-x-0);
-  --button-shadow-offset-y: var(--joy-elevation-semilight-offset-y-0);
-  --button-shadow-spread: var(--joy-elevation-semilight-spread-0);
-  --button-transition-duration: var(--joy-duration-short);
+  --button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
+  --button-shadow-blur: var(--joy-elevation-semilight-blur);
+  --button-shadow-color: var(--joy-elevation-semilight-color);
+  --button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
+  --button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
+  --button-shadow-spread: var(--joy-elevation-semilight-spread);
+  --button-transition-duration: var(--mosaik-duration-short);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --button-translate: none;

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.js

@@ -43,12 +43,12 @@ export function buttonElementMemphisStyle() {
   --button-progress-ring-width: var(--memphis-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --button-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --button-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --button-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --button-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --button-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --button-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --button-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --button-shadow-color: var(--memphis-elevation-semilight-color);
+  --button-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --button-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --button-shadow-spread: var(--memphis-elevation-semilight-spread);
   --button-transition-duration: var(--memphis-layout-transition);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/Button/Themes/ButtonGroupElement.Joy.js

@@ -37,7 +37,7 @@ export function buttonGroupElementJoyStyle() {
   --button-group-shadow-offset-x: unset;
   --button-group-shadow-offset-y: unset;
   --button-group-shadow-spread: unset;
-  --button-group-transition-duration: var(--joy-duration-short);
+  --button-group-transition-duration: var(--mosaik-duration-short);
   --button-group-transition-mode: ease;
   --button-group-transition-property: background-color, color, border-color, opacity;
   --button-group-translate: none;

package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Cosmopolitan.js

@@ -43,12 +43,12 @@ export function compoundButtonElementCosmopolitanStyle() {
   --compound-button-progress-ring-width: var(--cosmopolitan-layout-thickness);
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
-  --compound-button-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
-  --compound-button-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
-  --compound-button-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
-  --compound-button-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
-  --compound-button-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
-  --compound-button-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
+  --compound-button-shadow: var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color);
+  --compound-button-shadow-blur: var(--cosmopolitan-elevation-semilight-blur);
+  --compound-button-shadow-color: var(--cosmopolitan-elevation-semilight-color);
+  --compound-button-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x);
+  --compound-button-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y);
+  --compound-button-shadow-spread: var(--cosmopolitan-elevation-semilight-spread);
   --compound-button-transition-duration: .2s;
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Joy.js

@@ -43,13 +43,13 @@ export function compoundButtonElementJoyStyle() {
   --compound-button-progress-ring-width: var(--joy-layout-thickness);
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
-  --compound-button-shadow: var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0);
-  --compound-button-shadow-blur: var(--joy-elevation-semilight-blur-0);
-  --compound-button-shadow-color: var(--joy-elevation-semilight-color-0);
-  --compound-button-shadow-offset-x: var(--joy-elevation-semilight-offset-x-0);
-  --compound-button-shadow-offset-y: var(--joy-elevation-semilight-offset-y-0);
-  --compound-button-shadow-spread: var(--joy-elevation-semilight-spread-0);
-  --compound-button-transition-duration: var(--joy-duration-short);
+  --compound-button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
+  --compound-button-shadow-blur: var(--joy-elevation-semilight-blur);
+  --compound-button-shadow-color: var(--joy-elevation-semilight-color);
+  --compound-button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
+  --compound-button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
+  --compound-button-shadow-spread: var(--joy-elevation-semilight-spread);
+  --compound-button-transition-duration: var(--mosaik-duration-short);
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --compound-button-translate: none;

package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Memphis.js

@@ -43,12 +43,12 @@ export function compoundButtonElementMemphisStyle() {
   --compound-button-progress-ring-width: var(--memphis-layout-thickness);
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
-  --compound-button-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --compound-button-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --compound-button-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --compound-button-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --compound-button-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --compound-button-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --compound-button-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --compound-button-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --compound-button-shadow-color: var(--memphis-elevation-semilight-color);
+  --compound-button-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --compound-button-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --compound-button-shadow-spread: var(--memphis-elevation-semilight-spread);
   --compound-button-transition-duration: .2s;
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/DropDownButton/Themes/DropDownButtonElement.Joy.js

@@ -52,7 +52,7 @@ export function dropDownButtonElementJoyStyle() {
   --dropdown-button-shadow-offset-y: unset;
   --dropdown-button-shadow-spread: unset;
   --dropdown-button-transform: none;
-  --dropdown-button-transition-duration: var(--joy-duration-short);
+  --dropdown-button-transition-duration: var(--mosaik-duration-short);
   --dropdown-button-transition-mode: ease;
   --dropdown-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --dropdown-button-translate: none;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Cosmopolitan.js

@@ -42,13 +42,13 @@ export function floatingActionButtonElementCosmopolitanStyle() {
   --fab-progress-ring-width: var(--cosmopolitan-layout-thickness);
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
-  --fab-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
-  --fab-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
-  --fab-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
-  --fab-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
-  --fab-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
-  --fab-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
-  --fab-transition-duration: var(--cosmopolitan-duration-short);
+  --fab-shadow: var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color);
+  --fab-shadow-blur: var(--cosmopolitan-elevation-semilight-blur);
+  --fab-shadow-color: var(--cosmopolitan-elevation-semilight-color);
+  --fab-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x);
+  --fab-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y);
+  --fab-shadow-spread: var(--cosmopolitan-elevation-semilight-spread);
+  --fab-transition-duration: var(--mosaik-duration-short);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-translate: none;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Joy.js

@@ -42,13 +42,13 @@ export function floatingActionButtonElementJoyStyle() {
   --fab-progress-ring-width: var(--joy-layout-thickness);
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
-  --fab-shadow: var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0);
-  --fab-shadow-blur: var(--joy-elevation-semilight-blur-0);
-  --fab-shadow-color: var(--joy-elevation-semilight-color-0);
-  --fab-shadow-offset-x: var(--joy-elevation-semilight-offset-x-0);
-  --fab-shadow-offset-y: var(--joy-elevation-semilight-offset-y-0);
-  --fab-shadow-spread: var(--joy-elevation-semilight-spread-0);
-  --fab-transition-duration: var(--joy-duration-short);
+  --fab-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
+  --fab-shadow-blur: var(--joy-elevation-semilight-blur);
+  --fab-shadow-color: var(--joy-elevation-semilight-color);
+  --fab-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
+  --fab-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
+  --fab-shadow-spread: var(--joy-elevation-semilight-spread);
+  --fab-transition-duration: var(--mosaik-duration-short);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-translate: none;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Memphis.js

@@ -42,12 +42,12 @@ export function floatingActionButtonElementMemphisStyle() {
   --fab-progress-ring-width: var(--memphis-layout-thickness);
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
-  --fab-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --fab-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --fab-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --fab-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --fab-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --fab-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --fab-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --fab-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --fab-shadow-color: var(--memphis-elevation-semilight-color);
+  --fab-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --fab-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --fab-shadow-spread: var(--memphis-elevation-semilight-spread);
   --fab-transition-duration: var(--memphis-layout-transition);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonGroupElement.Joy.js

@@ -31,7 +31,7 @@ export function floatingActionButtonGroupElementJoyStyle() {
   --fab-group-shadow-offset-x: unset;
   --fab-group-shadow-offset-y: unset;
   --fab-group-shadow-spread: unset;
-  --fab-group-transition-duration: var(--joy-duration-short);
+  --fab-group-transition-duration: var(--mosaik-duration-short);
   --fab-group-transition-mode: ease;
   --fab-group-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-group-translate: none;

package/Controls/Components/Buttons/PressButton/Themes/PressButtonElement.Joy.js

@@ -52,7 +52,7 @@ export function pressButtonElementJoyStyle() {
   --press-button-shadow-offset-x: unset;
   --press-button-shadow-offset-y: unset;
   --press-button-shadow-spread: unset;
-  --press-button-transition-duration: var(--joy-duration-short);
+  --press-button-transition-duration: var(--mosaik-duration-short);
   --press-button-transition-mode: ease;
   --press-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --press-button-translate: none;

package/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.Joy.js

@@ -51,7 +51,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-shadow-offset-x: unset;
   --repeat-button-shadow-offset-y: unset;
   --repeat-button-shadow-spread: unset;
-  --repeat-button-transition-duration: var(--joy-duration-short);
+  --repeat-button-transition-duration: var(--mosaik-duration-short);
   --repeat-button-transition-mode: ease;
   --repeat-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --repeat-button-translate: none;

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.js

@@ -51,7 +51,7 @@ export function splitButtonElementJoyStyle() {
   --split-button-shadow-offset-x: unset;
   --split-button-shadow-offset-y: unset;
   --split-button-shadow-spread: unset;
-  --split-button-transition-duration: var(--joy-duration-short);
+  --split-button-transition-duration: var(--mosaik-duration-short);
   --split-button-transition-mode: ease;
   --split-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --split-button-translate: none;

package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.js

@@ -37,13 +37,13 @@ export function tileElementJoyStyle() {
   --tile-padding-top: var(--joy-layout-space);
   --tile-ripple-color: var(--joy-scheme-highlight);
   --tile-ripple-duration: .2s;
-  --tile-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --tile-shadow-blur: var(--joy-elevation-light-blur-1);
-  --tile-shadow-color: var(--joy-elevation-light-color-1);
-  --tile-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --tile-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --tile-shadow-spread: var(--joy-elevation-light-spread-1);
-  --tile-transition-duration: var(--joy-duration-short);
+  --tile-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --tile-shadow-blur: var(--joy-elevation-light-blur);
+  --tile-shadow-color: var(--joy-elevation-light-color);
+  --tile-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --tile-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --tile-shadow-spread: var(--joy-elevation-light-spread);
+  --tile-transition-duration: var(--mosaik-duration-short);
   --tile-transition-mode: ease;
   --tile-transition-property: background-color, color, border-color, box-shadow;
   --tile-translate: none;

package/Controls/Components/Buttons/Tile/Themes/TileElement.Memphis.js

@@ -37,12 +37,12 @@ export function tileElementMemphisStyle() {
   --tile-padding-top: var(--memphis-layout-space);
   --tile-ripple-color: var(--memphis-scheme-highlight);
   --tile-ripple-duration: .2s;
-  --tile-shadow: var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0);
-  --tile-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --tile-shadow-color: var(--memphis-elevation-bold-color-0);
-  --tile-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --tile-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --tile-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --tile-shadow: var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color);
+  --tile-shadow-blur: var(--memphis-elevation-bold-blur);
+  --tile-shadow-color: var(--memphis-elevation-bold-color);
+  --tile-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --tile-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --tile-shadow-spread: var(--memphis-elevation-bold-spread);
   --tile-transition-duration: .2s;
   --tile-transition-mode: ease;
   --tile-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Buttons/ToggleButton/Themes/ToggleButtonElement.Joy.js

@@ -50,7 +50,7 @@ export function toggleButtonElementJoyStyle() {
   --toggle-button-shadow-offset-x: unset;
   --toggle-button-shadow-offset-y: unset;
   --toggle-button-shadow-spread: unset;
-  --toggle-button-transition-duration: var(--joy-duration-short);
+  --toggle-button-transition-duration: var(--mosaik-duration-short);
   --toggle-button-transition-mode: ease;
   --toggle-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --toggle-button-translate: none;

package/Controls/Components/Buttons/ToggleButton/Themes/ToggleButtonGroupElement.Joy.js

@@ -37,7 +37,7 @@ export function toggleButtonGroupElementJoyStyle() {
   --toggle-button-group-shadow-offset-x: unset;
   --toggle-button-group-shadow-offset-y: unset;
   --toggle-button-group-shadow-spread: unset;
-  --toggle-button-group-transition-duration: var(--joy-duration-short);
+  --toggle-button-group-transition-duration: var(--mosaik-duration-short);
   --toggle-button-group-transition-mode: ease;
   --toggle-button-group-transition-property: background-color, color, border-color, opacity;
   --toggle-button-group-translate: none;

package/Controls/Components/Cells/Themes/CellGroupElement.Cosmopolitan.js

@@ -31,12 +31,12 @@ export function cellGroupElementCosmopolitanStyle() {
   --cell-group-padding-left: unset;
   --cell-group-padding-right: unset;
   --cell-group-padding-top: unset;
-  --cell-group-shadow: var(--cosmopolitan-elevation-bold-offset-x-0) var(--cosmopolitan-elevation-bold-offset-y-0) var(--cosmopolitan-elevation-bold-blur-0) var(--cosmopolitan-elevation-bold-spread-0) var(--cosmopolitan-elevation-bold-color-0);
-  --cell-group-shadow-blur: var(--cosmopolitan-elevation-bold-blur-0);
-  --cell-group-shadow-color: var(--cosmopolitan-elevation-bold-color-0);
-  --cell-group-shadow-offset-x: var(--cosmopolitan-elevation-bold-offset-x-0);
-  --cell-group-shadow-offset-y: var(--cosmopolitan-elevation-bold-offset-y-0);
-  --cell-group-shadow-spread: var(--cosmopolitan-elevation-bold-spread-0);
+  --cell-group-shadow: var(--cosmopolitan-elevation-bold-offset-x) var(--cosmopolitan-elevation-bold-offset-y) var(--cosmopolitan-elevation-bold-blur) var(--cosmopolitan-elevation-bold-spread) var(--cosmopolitan-elevation-bold-color);
+  --cell-group-shadow-blur: var(--cosmopolitan-elevation-bold-blur);
+  --cell-group-shadow-color: var(--cosmopolitan-elevation-bold-color);
+  --cell-group-shadow-offset-x: var(--cosmopolitan-elevation-bold-offset-x);
+  --cell-group-shadow-offset-y: var(--cosmopolitan-elevation-bold-offset-y);
+  --cell-group-shadow-spread: var(--cosmopolitan-elevation-bold-spread);
   --cell-group-transition-duration: unset;
   --cell-group-transition-mode: unset;
   --cell-group-transition-property: unset;

package/Controls/Components/Cells/Themes/CellGroupElement.Joy.js

@@ -31,12 +31,12 @@ export function cellGroupElementJoyStyle() {
   --cell-group-padding-left: unset;
   --cell-group-padding-right: unset;
   --cell-group-padding-top: unset;
-  --cell-group-shadow: var(--joy-elevation-bold-offset-x-0) var(--joy-elevation-bold-offset-y-0) var(--joy-elevation-bold-blur-0) var(--joy-elevation-bold-spread-0) var(--joy-elevation-bold-color-0);
-  --cell-group-shadow-blur: var(--joy-elevation-bold-blur-0);
-  --cell-group-shadow-color: var(--joy-elevation-bold-color-0);
-  --cell-group-shadow-offset-x: var(--joy-elevation-bold-offset-x-0);
-  --cell-group-shadow-offset-y: var(--joy-elevation-bold-offset-y-0);
-  --cell-group-shadow-spread: var(--joy-elevation-bold-spread-0);
+  --cell-group-shadow: var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color);
+  --cell-group-shadow-blur: var(--joy-elevation-bold-blur);
+  --cell-group-shadow-color: var(--joy-elevation-bold-color);
+  --cell-group-shadow-offset-x: var(--joy-elevation-bold-offset-x);
+  --cell-group-shadow-offset-y: var(--joy-elevation-bold-offset-y);
+  --cell-group-shadow-spread: var(--joy-elevation-bold-spread);
   --cell-group-transition-duration: unset;
   --cell-group-transition-mode: unset;
   --cell-group-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Cells/Themes/CellGroupElement.Memphis.js

@@ -31,12 +31,12 @@ export function cellGroupElementMemphisStyle() {
   --cell-group-padding-left: unset;
   --cell-group-padding-right: unset;
   --cell-group-padding-top: unset;
-  --cell-group-shadow: var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0);
-  --cell-group-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --cell-group-shadow-color: var(--memphis-elevation-bold-color-0);
-  --cell-group-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --cell-group-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --cell-group-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --cell-group-shadow: var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color);
+  --cell-group-shadow-blur: var(--memphis-elevation-bold-blur);
+  --cell-group-shadow-color: var(--memphis-elevation-bold-color);
+  --cell-group-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --cell-group-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --cell-group-shadow-spread: var(--memphis-elevation-bold-spread);
   --cell-group-transition-duration: unset;
   --cell-group-transition-mode: unset;
   --cell-group-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Grouping/Banner/Themes/BannerElement.Cosmopolitan.js

@@ -31,12 +31,12 @@ export function bannerElementCosmopolitanStyle() {
   --banner-padding-left: unset;
   --banner-padding-right: unset;
   --banner-padding-top: unset;
-  --banner-shadow: var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1);
-  --banner-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --banner-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --banner-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --banner-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --banner-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --banner-shadow: var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color);
+  --banner-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --banner-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --banner-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --banner-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --banner-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --banner-transition-duration: unset;
   --banner-transition-mode: unset;
   --banner-transition-property: unset;

package/Controls/Components/Grouping/Banner/Themes/BannerElement.Joy.js

@@ -31,13 +31,13 @@ export function bannerElementJoyStyle() {
   --banner-padding-left: calc(var(--joy-layout-space) * 2);
   --banner-padding-right: calc(var(--joy-layout-space) * 2);
   --banner-padding-top: var(--joy-layout-space);
-  --banner-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --banner-shadow-blur: var(--joy-elevation-light-blur-1);
-  --banner-shadow-color: var(--joy-elevation-light-color-1);
-  --banner-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --banner-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --banner-shadow-spread: var(--joy-elevation-light-spread-1);
-  --banner-transition-duration: var(--joy-duration-short);
+  --banner-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --banner-shadow-blur: var(--joy-elevation-light-blur);
+  --banner-shadow-color: var(--joy-elevation-light-color);
+  --banner-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --banner-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --banner-shadow-spread: var(--joy-elevation-light-spread);
+  --banner-transition-duration: var(--mosaik-duration-short);
   --banner-transition-mode: ease;
   --banner-transition-property: background-color, color, border-color, opacity, box-shadow;
   --banner-translate: none;

package/Controls/Components/Grouping/Banner/Themes/BannerElement.Memphis.js

@@ -31,12 +31,12 @@ export function bannerElementMemphisStyle() {
   --banner-padding-left: calc(var(--memphis-layout-space) * 2);
   --banner-padding-right: calc(var(--memphis-layout-space) * 2);
   --banner-padding-top: calc(var(--memphis-layout-space) * 2);
-  --banner-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --banner-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --banner-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --banner-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --banner-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --banner-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --banner-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --banner-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --banner-shadow-color: var(--memphis-elevation-semilight-color);
+  --banner-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --banner-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --banner-shadow-spread: var(--memphis-elevation-semilight-spread);
   --banner-transition-duration: .2s;
   --banner-transition-mode: ease;
   --banner-transition-property: all;

package/Controls/Components/Grouping/Card/Themes/CardElement.Joy.js

@@ -32,13 +32,13 @@ export function cardElementJoyStyle() {
   --card-padding-left: unset;
   --card-padding-right: unset;
   --card-padding-top: unset;
-  --card-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --card-shadow-blur: var(--joy-elevation-light-blur-1);
-  --card-shadow-color: var(--joy-elevation-light-color-1);
-  --card-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --card-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --card-shadow-spread: var(--joy-elevation-light-spread-1);
-  --card-transition-duration: var(--joy-duration-short);
+  --card-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --card-shadow-blur: var(--joy-elevation-light-blur);
+  --card-shadow-color: var(--joy-elevation-light-color);
+  --card-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --card-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --card-shadow-spread: var(--joy-elevation-light-spread);
+  --card-transition-duration: var(--mosaik-duration-short);
   --card-transition-mode: ease;
   --card-transition-property: background-color, color, border-color, box-shadow;
   --card-translate: none;

package/Controls/Components/Grouping/Card/Themes/CardElement.Memphis.js

@@ -32,12 +32,12 @@ export function cardElementMemphisStyle() {
   --card-padding-left: unset;
   --card-padding-right: unset;
   --card-padding-top: unset;
-  --card-shadow: var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0);
-  --card-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --card-shadow-color: var(--memphis-elevation-bold-color-0);
-  --card-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --card-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --card-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --card-shadow: var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color);
+  --card-shadow-blur: var(--memphis-elevation-bold-blur);
+  --card-shadow-color: var(--memphis-elevation-bold-color);
+  --card-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --card-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --card-shadow-spread: var(--memphis-elevation-bold-spread);
   --card-transition-duration: .2s;
   --card-transition-mode: ease;
   --card-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Cosmopolitan.js

@@ -34,12 +34,12 @@ export function expanderElementCosmopolitanStyle() {
   --expander-padding-top: unset;
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
-  --expander-shadow: var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1);
-  --expander-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --expander-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --expander-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --expander-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --expander-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --expander-shadow: var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color);
+  --expander-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --expander-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --expander-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --expander-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --expander-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --expander-transition-duration: unset;
   --expander-transition-mode: unset;
   --expander-transition-property: unset;

package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Joy.js

@@ -34,13 +34,13 @@ export function expanderElementJoyStyle() {
   --expander-padding-top: var(--joy-layout-space);
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
-  --expander-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --expander-shadow-blur: var(--joy-elevation-light-blur-1);
-  --expander-shadow-color: var(--joy-elevation-light-color-1);
-  --expander-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --expander-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --expander-shadow-spread: var(--joy-elevation-light-spread-1);
-  --expander-transition-duration: var(--joy-duration-short);
+  --expander-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --expander-shadow-blur: var(--joy-elevation-light-blur);
+  --expander-shadow-color: var(--joy-elevation-light-color);
+  --expander-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --expander-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --expander-shadow-spread: var(--joy-elevation-light-spread);
+  --expander-transition-duration: var(--mosaik-duration-short);
   --expander-transition-mode: ease;
   --expander-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin;
   --expander-translate: none;

package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Memphis.js

@@ -34,12 +34,12 @@ export function expanderElementMemphisStyle() {
   --expander-padding-top: var(--memphis-layout-space);
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
-  --expander-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --expander-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --expander-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --expander-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --expander-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --expander-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --expander-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --expander-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --expander-shadow-color: var(--memphis-elevation-semilight-color);
+  --expander-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --expander-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --expander-shadow-spread: var(--memphis-elevation-semilight-spread);
   --expander-transition-duration: .2s;
   --expander-transition-mode: ease;
   --expander-transition-property: background-color, color, border-color, opacity, box-shadow, transform, margin;

package/Controls/Components/Grouping/Expander/Themes/ExpanderGroupElement.Joy.js

@@ -37,7 +37,7 @@ export function expanderGroupElementJoyStyle() {
   --expander-group-shadow-offset-x: unset;
   --expander-group-shadow-offset-y: unset;
   --expander-group-shadow-spread: unset;
-  --expander-group-transition-duration: var(--joy-duration-short);
+  --expander-group-transition-duration: var(--mosaik-duration-short);
   --expander-group-transition-mode: ease-out;
   --expander-group-transition-property: margin;
   --expander-group-translate: none;

package/Controls/Components/Grouping/Message/Themes/MessageContentElement.Joy.js

@@ -39,7 +39,7 @@ export function messageContentElementJoyStyle() {
   --message-content-shadow-offset-x: unset;
   --message-content-shadow-offset-y: unset;
   --message-content-shadow-spread: unset;
-  --message-content-transition-duration: var(--joy-duration-short);
+  --message-content-transition-duration: var(--mosaik-duration-short);
   --message-content-transition-mode: ease;
   --message-content-transition-property: color, opacity, box-shadow;
   --message-content-translate: none;

package/Controls/Components/Grouping/Message/Themes/MessageElement.Cosmopolitan.js

@@ -31,12 +31,12 @@ export function messageElementCosmopolitanStyle() {
   --message-padding-left: unset;
   --message-padding-right: unset;
   --message-padding-top: unset;
-  --message-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
-  --message-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
-  --message-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
-  --message-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
-  --message-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
-  --message-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
+  --message-shadow: var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color);
+  --message-shadow-blur: var(--cosmopolitan-elevation-semilight-blur);
+  --message-shadow-color: var(--cosmopolitan-elevation-semilight-color);
+  --message-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x);
+  --message-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y);
+  --message-shadow-spread: var(--cosmopolitan-elevation-semilight-spread);
   --message-transition-duration: unset;
   --message-transition-mode: unset;
   --message-transition-property: unset;