@breadstone/mosaik-elements-foundation 0.1.21 → 0.1.23

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.js

@@ -35,7 +35,7 @@ export function sheetElementJoyStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
-  --sheet-transition-duration: var(--joy-duration-short);
+  --sheet-transition-duration: var(--mosaik-duration-short);
   --sheet-transition-mode: ease;
   --sheet-transition-property: transform, opacity, visibility;
   --sheet-translate: none;

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Memphis.js

@@ -35,7 +35,7 @@ export function sheetElementMemphisStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
-  --sheet-transition-duration: var(--memphis-duration-short);
+  --sheet-transition-duration: var(--mosaik-duration-short);
   --sheet-transition-mode: ease;
   --sheet-transition-property: transform, opacity, visibility;
   --sheet-translate: none;

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

@@ -35,13 +35,13 @@ export function toastElementJoyStyle() {
   --toast-padding-top: var(--joy-layout-space);
   --toast-progress-fill-color: currentColor;
   --toast-progress-ring-fill-color: var(--joy-scheme-foreground);
-  --toast-shadow: var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1) var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1) var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1) var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1) var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1);
-  --toast-shadow-blur: var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1);
-  --toast-shadow-color: var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1);
-  --toast-shadow-offset-x: var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1);
-  --toast-shadow-offset-y: var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1);
-  --toast-shadow-spread: var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1);
-  --toast-transition-duration: var(--joy-duration-short);
+  --toast-shadow: var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color);
+  --toast-shadow-blur: var(--joy-elevation-regular-blur);
+  --toast-shadow-color: var(--joy-elevation-regular-color);
+  --toast-shadow-offset-x: var(--joy-elevation-regular-offset-x);
+  --toast-shadow-offset-y: var(--joy-elevation-regular-offset-y);
+  --toast-shadow-spread: var(--joy-elevation-regular-spread);
+  --toast-transition-duration: var(--mosaik-duration-short);
   --toast-transition-mode: ease;
   --toast-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --toast-translate: none;

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

@@ -41,7 +41,7 @@ export function toastElementMemphisStyle() {
   --toast-shadow-offset-x: unset;
   --toast-shadow-offset-y: unset;
   --toast-shadow-spread: unset;
-  --toast-transition-duration: var(--memphis-duration-short);
+  --toast-transition-duration: var(--mosaik-duration-short);
   --toast-transition-mode: ease;
   --toast-transition-property: transform, opacity, background-color, color, border-color, box-shadow;
   --toast-translate: none;

package/Controls/Components/Overlays/tour/Themes/TourElement.Joy.js

@@ -33,7 +33,7 @@ export function tourElementJoyStyle() {
   --tour-shadow-offset-y: unset;
   --tour-shadow-spread: unset;
   --tour-tooltip-max-width: 340px;
-  --tour-transition-duration: var(--joy-duration-short);
+  --tour-transition-duration: var(--mosaik-duration-short);
   --tour-transition-mode: ease;
   --tour-transition-property: transform, opacity;
   --tour-translate: none;

package/Controls/Components/Overlays/tour/Themes/TourElement.Memphis.js

@@ -33,7 +33,7 @@ export function tourElementMemphisStyle() {
   --tour-shadow-offset-y: unset;
   --tour-shadow-spread: unset;
   --tour-tooltip-max-width: 340px;
-  --tour-transition-duration: var(--memphis-duration-short);
+  --tour-transition-duration: var(--mosaik-duration-short);
   --tour-transition-mode: ease;
   --tour-transition-property: transform, opacity;
   --tour-translate: none;

package/Controls/Components/Overlays/tour/Themes/TourStepElement.Joy.js

@@ -40,7 +40,7 @@ export function tourStepElementJoyStyle() {
   --tour-step-shadow-offset-x: none;
   --tour-step-shadow-offset-y: 16px;
   --tour-step-shadow-spread: none;
-  --tour-step-transition-duration: var(--joy-duration-short);
+  --tour-step-transition-duration: var(--mosaik-duration-short);
   --tour-step-transition-mode: ease;
   --tour-step-transition-property: background-color, color, border-color, opacity, box-shadow;
   --tour-step-translate: none;

package/Controls/Components/Primitives/Backdrop/Themes/BackdropElement.Joy.js

@@ -33,7 +33,7 @@ export function backdropElementJoyStyle() {
   --backdrop-shadow-offset-x: unset;
   --backdrop-shadow-offset-y: unset;
   --backdrop-shadow-spread: unset;
-  --backdrop-transition-duration: var(--joy-duration-short);
+  --backdrop-transition-duration: var(--mosaik-duration-short);
   --backdrop-transition-mode: ease;
   --backdrop-transition-property: opacity, backdrop-filter;
   --backdrop-translate: none;

package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Cosmopolitan.js

@@ -33,12 +33,12 @@ export function checkmarkElementCosmopolitanStyle() {
   --checkmark-padding-left: unset;
   --checkmark-padding-right: unset;
   --checkmark-padding-top: unset;
-  --checkmark-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);
-  --checkmark-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --checkmark-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --checkmark-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --checkmark-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --checkmark-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --checkmark-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);
+  --checkmark-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --checkmark-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --checkmark-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --checkmark-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --checkmark-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --checkmark-thickness: unset;
   --checkmark-transition-duration: unset;
   --checkmark-transition-mode: unset;

package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Joy.js

@@ -33,14 +33,14 @@ export function checkmarkElementJoyStyle() {
   --checkmark-padding-left: var(--joy-layout-space);
   --checkmark-padding-right: var(--joy-layout-space);
   --checkmark-padding-top: calc(var(--joy-layout-space) / 2);
-  --checkmark-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);
-  --checkmark-shadow-blur: var(--joy-elevation-light-blur-1);
-  --checkmark-shadow-color: var(--joy-elevation-light-color-1);
-  --checkmark-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --checkmark-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --checkmark-shadow-spread: var(--joy-elevation-light-spread-1);
+  --checkmark-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);
+  --checkmark-shadow-blur: var(--joy-elevation-light-blur);
+  --checkmark-shadow-color: var(--joy-elevation-light-color);
+  --checkmark-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --checkmark-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --checkmark-shadow-spread: var(--joy-elevation-light-spread);
   --checkmark-thickness: 2px;
-  --checkmark-transition-duration: var(--joy-duration-short);
+  --checkmark-transition-duration: var(--mosaik-duration-short);
   --checkmark-transition-mode: ease;
   --checkmark-transition-property: background-color, color;
   --checkmark-translate: none;

package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Memphis.js

@@ -33,14 +33,14 @@ export function checkmarkElementMemphisStyle() {
   --checkmark-padding-left: calc(var(--memphis-layout-space) / 4);
   --checkmark-padding-right: calc(var(--memphis-layout-space) / 4);
   --checkmark-padding-top: calc(var(--memphis-layout-space) / 4);
-  --checkmark-shadow: var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1);
-  --checkmark-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --checkmark-shadow-color: var(--memphis-elevation-light-color-1);
-  --checkmark-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --checkmark-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --checkmark-shadow-spread: var(--memphis-elevation-light-spread-1);
+  --checkmark-shadow: var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color);
+  --checkmark-shadow-blur: var(--memphis-elevation-light-blur);
+  --checkmark-shadow-color: var(--memphis-elevation-light-color);
+  --checkmark-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --checkmark-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --checkmark-shadow-spread: var(--memphis-elevation-light-spread);
   --checkmark-thickness: var(--memphis-layout-thickness);
-  --checkmark-transition-duration: var(--memphis-duration-short);
+  --checkmark-transition-duration: var(--mosaik-duration-short);
   --checkmark-transition-mode: ease;
   --checkmark-transition-property: background-color, color, border-color, box-shadow, transform;
   --checkmark-translate: none;

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.js

@@ -36,7 +36,7 @@ export function clickableElementCosmopolitanStyle() {
   --clickable-padding-top: 0;
   --clickable-ripple-color: unset;
   --clickable-ripple-duration: .2s;
-  --clickable-transition-duration: var(--cosmopolitan-duration-short);
+  --clickable-transition-duration: var(--mosaik-duration-short);
   --clickable-transition-mode: ease;
   --clickable-transition-property: background-color;
   --clickable-translate: unset;

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.js

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

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.js

@@ -36,7 +36,7 @@ export function clickableElementMemphisStyle() {
   --clickable-padding-top: 0;
   --clickable-ripple-color: unset;
   --clickable-ripple-duration: .2s;
-  --clickable-transition-duration: var(--memphis-duration-short);
+  --clickable-transition-duration: var(--mosaik-duration-short);
   --clickable-transition-mode: ease;
   --clickable-transition-property: background-color;
   --clickable-translate: unset;

package/Controls/Components/Primitives/Divider/Themes/DividerElement.Joy.js

@@ -34,7 +34,7 @@ export function dividerElementJoyStyle() {
   --divider-shadow-offset-y: unset;
   --divider-shadow-spread: unset;
   --divider-thickness: var(--joy-layout-thickness);
-  --divider-transition-duration: var(--joy-duration-short);
+  --divider-transition-duration: var(--mosaik-duration-short);
   --divider-transition-mode: ease;
   --divider-transition-property: background-color, color;
   --divider-translate: none;

package/Controls/Components/Primitives/Dot/Themes/DotElement.Joy.js

@@ -38,7 +38,7 @@ export function dotElementJoyStyle() {
   --dot-shadow-offset-y: unset;
   --dot-shadow-spread: unset;
   --dot-size: 16px;
-  --dot-transition-duration: var(--joy-duration-short);
+  --dot-transition-duration: var(--mosaik-duration-short);
   --dot-transition-mode: ease;
   --dot-transition-property: all;
   --dot-translate: none;

package/Controls/Components/Primitives/Dot/Themes/DotGroupElement.Joy.js

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

package/Controls/Components/Primitives/Error/Themes/ErrorElement.Joy.js

@@ -37,7 +37,7 @@ export function errorElementJoyStyle() {
   --error-shadow-offset-x: unset;
   --error-shadow-offset-y: unset;
   --error-shadow-spread: unset;
-  --error-transition-duration: var(--joy-duration-short);
+  --error-transition-duration: var(--mosaik-duration-short);
   --error-transition-mode: ease;
   --error-transition-property: all;
   --error-translate: none;

package/Controls/Components/Primitives/Floating/Themes/FloatingElement.Joy.js

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

package/Controls/Components/Primitives/FocusRing/Themes/FocusRingElement.Joy.js

@@ -41,7 +41,7 @@ export function focusRingElementJoyStyle() {
   --focus-ring-shadow-offset-y: var(--focus-ring-y, 0);
   --focus-ring-shadow-spread: var(--focus-ring-width);
   --focus-ring-shape: 6px;
-  --focus-ring-transition-duration: var(--joy-duration-short);
+  --focus-ring-transition-duration: var(--mosaik-duration-short);
   --focus-ring-transition-mode: ease;
   --focus-ring-transition-property: all;
   --focus-ring-translate: none;

package/Controls/Components/Primitives/Hint/Themes/HintElement.Joy.js

@@ -37,7 +37,7 @@ export function hintElementJoyStyle() {
   --hint-shadow-offset-x: unset;
   --hint-shadow-offset-y: unset;
   --hint-shadow-spread: unset;
-  --hint-transition-duration: var(--joy-duration-short);
+  --hint-transition-duration: var(--mosaik-duration-short);
   --hint-transition-mode: ease;
   --hint-transition-property: all;
   --hint-translate: none;

package/Controls/Components/Primitives/Indicator/Themes/IndicatorElement.Joy.js

@@ -37,7 +37,7 @@ export function indicatorElementJoyStyle() {
   --indicator-shadow-offset-x: unset;
   --indicator-shadow-offset-y: unset;
   --indicator-shadow-spread: unset;
-  --indicator-transition-duration: var(--joy-duration-short);
+  --indicator-transition-duration: var(--mosaik-duration-short);
   --indicator-transition-mode: ease;
   --indicator-transition-property: all;
   --indicator-translate: none;

package/Controls/Components/Primitives/Jumbotron/Themes/JumbotronElement.Joy.js

@@ -37,7 +37,7 @@ export function jumbotronElementJoyStyle() {
   --jumbotron-shadow-offset-x: unset;
   --jumbotron-shadow-offset-y: unset;
   --jumbotron-shadow-spread: unset;
-  --jumbotron-transition-duration: var(--joy-duration-short);
+  --jumbotron-transition-duration: var(--mosaik-duration-short);
   --jumbotron-transition-mode: ease;
   --jumbotron-transition-property: all;
   --jumbotron-translate: none;

package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Cosmopolitan.js

@@ -31,12 +31,12 @@ export function kbdElementCosmopolitanStyle() {
   --kbd-padding-left: unset;
   --kbd-padding-right: unset;
   --kbd-padding-top: unset;
-  --kbd-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);
-  --kbd-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --kbd-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --kbd-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --kbd-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --kbd-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --kbd-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);
+  --kbd-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --kbd-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --kbd-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --kbd-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --kbd-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --kbd-transition-duration: unset;
   --kbd-transition-mode: unset;
   --kbd-transition-property: unset;

package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Joy.js

@@ -31,12 +31,12 @@ export function kbdElementJoyStyle() {
   --kbd-padding-left: calc(var(--joy-layout-space) / 2);
   --kbd-padding-right: calc(var(--joy-layout-space) / 2);
   --kbd-padding-top: calc(var(--joy-layout-space) / 2);
-  --kbd-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);
-  --kbd-shadow-blur: var(--joy-elevation-light-blur-1);
-  --kbd-shadow-color: var(--joy-elevation-light-color-1);
-  --kbd-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --kbd-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --kbd-shadow-spread: var(--joy-elevation-light-spread-1);
+  --kbd-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);
+  --kbd-shadow-blur: var(--joy-elevation-light-blur);
+  --kbd-shadow-color: var(--joy-elevation-light-color);
+  --kbd-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --kbd-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --kbd-shadow-spread: var(--joy-elevation-light-spread);
   --kbd-transition-duration: unset;
   --kbd-transition-mode: unset;
   --kbd-transition-property: unset;

package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Memphis.js

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

package/Controls/Components/Primitives/Marquee/Themes/MarqueeElement.Joy.js

@@ -32,7 +32,7 @@ export function marqueeElementJoyStyle() {
   --marquee-shadow-offset-x: unset;
   --marquee-shadow-offset-y: unset;
   --marquee-shadow-spread: unset;
-  --marquee-speed: calc(var(--joy-duration-long) * 10);
+  --marquee-speed: calc(var(--mosaik-duration-long) * 10);
   --marquee-transition-duration: unset;
   --marquee-transition-mode: unset;
   --marquee-transition-property: unset;

package/Controls/Components/Primitives/Number/Themes/NumberCounterElement.Joy.js

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

package/Controls/Components/Primitives/Number/Themes/NumberElement.Joy.js

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

package/Controls/Components/Primitives/Pip/Themes/PipElement.Cosmopolitan.js

@@ -32,12 +32,12 @@ export function pipElementCosmopolitanStyle() {
   --pip-padding-left: unset;
   --pip-padding-right: unset;
   --pip-padding-top: unset;
-  --pip-shadow: var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0);
-  --pip-shadow-blur: var(--cosmopolitan-elevation-light-blur-0);
-  --pip-shadow-color: var(--cosmopolitan-elevation-light-color-0);
-  --pip-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-0);
-  --pip-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-0);
-  --pip-shadow-spread: var(--cosmopolitan-elevation-light-spread-0);
+  --pip-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);
+  --pip-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --pip-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --pip-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --pip-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --pip-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --pip-transition-duration: unset;
   --pip-transition-mode: unset;
   --pip-transition-property: unset;

package/Controls/Components/Primitives/Pip/Themes/PipElement.Joy.js

@@ -32,13 +32,13 @@ export function pipElementJoyStyle() {
   --pip-padding-left: calc(var(--joy-layout-space) / 2);
   --pip-padding-right: calc(var(--joy-layout-space) / 2);
   --pip-padding-top: calc(var(--joy-layout-space) / 2);
-  --pip-shadow: var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0);
-  --pip-shadow-blur: var(--joy-elevation-light-blur-0);
-  --pip-shadow-color: var(--joy-elevation-light-color-0);
-  --pip-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
-  --pip-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
-  --pip-shadow-spread: var(--joy-elevation-light-spread-0);
-  --pip-transition-duration: var(--joy-duration-short);
+  --pip-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);
+  --pip-shadow-blur: var(--joy-elevation-light-blur);
+  --pip-shadow-color: var(--joy-elevation-light-color);
+  --pip-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --pip-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --pip-shadow-spread: var(--joy-elevation-light-spread);
+  --pip-transition-duration: var(--mosaik-duration-short);
   --pip-transition-mode: ease;
   --pip-transition-property: background-color, color, border-color, opacity, box-shadow;
   --pip-translate: none;

package/Controls/Components/Primitives/Pip/Themes/PipElement.Memphis.js

@@ -32,12 +32,12 @@ export function pipElementMemphisStyle() {
   --pip-padding-left: var(--memphis-layout-space);
   --pip-padding-right: var(--memphis-layout-space);
   --pip-padding-top: var(--memphis-layout-space);
-  --pip-shadow: var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0);
-  --pip-shadow-blur: var(--memphis-elevation-light-blur-0);
-  --pip-shadow-color: var(--memphis-elevation-light-color-0);
-  --pip-shadow-offset-x: var(--memphis-elevation-light-offset-x-0);
-  --pip-shadow-offset-y: var(--memphis-elevation-light-offset-y-0);
-  --pip-shadow-spread: var(--memphis-elevation-light-spread-0);
+  --pip-shadow: var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color);
+  --pip-shadow-blur: var(--memphis-elevation-light-blur);
+  --pip-shadow-color: var(--memphis-elevation-light-color);
+  --pip-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --pip-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --pip-shadow-spread: var(--memphis-elevation-light-spread);
   --pip-transition-duration: .2s;
   --pip-transition-mode: ease;
   --pip-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Primitives/Popup/Themes/PopupElement.Cosmopolitan.js

@@ -31,13 +31,13 @@ export function popupElementCosmopolitanStyle() {
   --popup-padding-left: calc(var(--cosmopolitan-layout-space) * 1.25);
   --popup-padding-right: calc(var(--cosmopolitan-layout-space) * 1.25);
   --popup-padding-top: calc(var(--cosmopolitan-layout-space) * 1);
-  --popup-shadow: var(--cosmopolitan-elevation-regular-offset-x-0) var(--cosmopolitan-elevation-regular-offset-y-0) var(--cosmopolitan-elevation-regular-blur-0) var(--cosmopolitan-elevation-regular-spread-0) var(--cosmopolitan-elevation-regular-color-0);
-  --popup-shadow-blur: var(--cosmopolitan-elevation-regular-blur-0);
-  --popup-shadow-color: var(--cosmopolitan-elevation-regular-color-0);
-  --popup-shadow-offset-x: var(--cosmopolitan-elevation-regular-offset-x-0);
-  --popup-shadow-offset-y: var(--cosmopolitan-elevation-regular-offset-y-0);
-  --popup-shadow-spread: var(--cosmopolitan-elevation-regular-spread-0);
-  --popup-transition-duration: var(--cosmopolitan-duration-short);
+  --popup-shadow: var(--cosmopolitan-elevation-regular-offset-x) var(--cosmopolitan-elevation-regular-offset-y) var(--cosmopolitan-elevation-regular-blur) var(--cosmopolitan-elevation-regular-spread) var(--cosmopolitan-elevation-regular-color);
+  --popup-shadow-blur: var(--cosmopolitan-elevation-regular-blur);
+  --popup-shadow-color: var(--cosmopolitan-elevation-regular-color);
+  --popup-shadow-offset-x: var(--cosmopolitan-elevation-regular-offset-x);
+  --popup-shadow-offset-y: var(--cosmopolitan-elevation-regular-offset-y);
+  --popup-shadow-spread: var(--cosmopolitan-elevation-regular-spread);
+  --popup-transition-duration: var(--mosaik-duration-short);
   --popup-transition-mode: ease;
   --popup-transition-property: background-color, border-color, box-shadow, color, transform, opacity;
   --popup-translate: none;

package/Controls/Components/Primitives/Popup/Themes/PopupElement.Joy.js

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

package/Controls/Components/Primitives/Popup/Themes/PopupElement.Memphis.js

@@ -31,13 +31,13 @@ export function popupElementMemphisStyle() {
   --popup-padding-left: calc(var(--memphis-layout-space) * 1.8);
   --popup-padding-right: calc(var(--memphis-layout-space) * 1.8);
   --popup-padding-top: calc(var(--memphis-layout-space) * 1.2);
-  --popup-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);
-  --popup-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --popup-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --popup-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --popup-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --popup-shadow-spread: var(--memphis-elevation-semilight-spread-0);
-  --popup-transition-duration: var(--memphis-duration-short);
+  --popup-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);
+  --popup-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --popup-shadow-color: var(--memphis-elevation-semilight-color);
+  --popup-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --popup-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --popup-shadow-spread: var(--memphis-elevation-semilight-spread);
+  --popup-transition-duration: var(--mosaik-duration-short);
   --popup-transition-mode: ease;
   --popup-transition-property: opacity, transform, background-color, color, border-color, box-shadow;
   --popup-translate: none;

package/Controls/Components/Primitives/Ribbon/Themes/RibbonElement.Joy.js

@@ -38,7 +38,7 @@ export function ribbonElementJoyStyle() {
   --ribbon-shadow-offset-x: unset;
   --ribbon-shadow-offset-y: unset;
   --ribbon-shadow-spread: unset;
-  --ribbon-transition-duration: var(--joy-duration-short);
+  --ribbon-transition-duration: var(--mosaik-duration-short);
   --ribbon-transition-mode: ease;
   --ribbon-transition-property: background-color foreground-color border-color;
   --ribbon-translate: none;

package/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Cosmopolitan.js

@@ -33,7 +33,7 @@ export function scrollElementCosmopolitanStyle() {
   --scroll-shadow-offset-x: unset;
   --scroll-shadow-offset-y: unset;
   --scroll-shadow-spread: unset;
-  --scroll-transition-duration: var(--cosmopolitan-duration-medium);
+  --scroll-transition-duration: var(--mosaik-duration-medium);
   --scroll-transition-mode: ease;
   --scroll-transition-property: background-color, box-shadow, transform;
   --scroll-translate: none;

package/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Joy.js

@@ -33,7 +33,7 @@ export function scrollElementJoyStyle() {
   --scroll-shadow-offset-x: unset;
   --scroll-shadow-offset-y: unset;
   --scroll-shadow-spread: unset;
-  --scroll-transition-duration: var(--joy-duration-medium);
+  --scroll-transition-duration: var(--mosaik-duration-medium);
   --scroll-transition-mode: ease;
   --scroll-transition-property: background-color, box-shadow, transform;
   --scroll-translate: none;

package/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Memphis.js

@@ -33,7 +33,7 @@ export function scrollElementMemphisStyle() {
   --scroll-shadow-offset-x: unset;
   --scroll-shadow-offset-y: unset;
   --scroll-shadow-spread: unset;
-  --scroll-transition-duration: var(--memphis-duration-medium);
+  --scroll-transition-duration: var(--mosaik-duration-medium);
   --scroll-transition-mode: ease;
   --scroll-transition-property: background-color, box-shadow, transform;
   --scroll-translate: none;

package/Controls/Components/Primitives/Text/Themes/TextElement.Joy.js

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

package/Controls/Components/Primitives/TickBar/Themes/TickBarElement.Joy.js

@@ -41,7 +41,7 @@ export function tickBarElementJoyStyle() {
   --tick-bar-tick-size: 2px;
   --tick-bar-tick-text-gap: 4px;
   --tick-bar-tick-width: var(--joy-layout-thickness);
-  --tick-bar-transition-duration: var(--joy-duration-short);
+  --tick-bar-transition-duration: var(--mosaik-duration-short);
   --tick-bar-transition-mode: ease;
   --tick-bar-transition-property: background-color, color, border-color, opacity, transform;
   --tick-bar-translate: none;

package/Controls/Components/Primitives/Tooltip/Themes/TooltipElement.Joy.js

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

package/Controls/Components/Primitives/Tooltip/Themes/TooltipElement.Memphis.js

@@ -38,7 +38,7 @@ export function tooltipElementMemphisStyle() {
   --tooltip-shadow-offset-x: unset;
   --tooltip-shadow-offset-y: unset;
   --tooltip-shadow-spread: unset;
-  --tooltip-transition-duration: var(--memphis-duration-short);
+  --tooltip-transition-duration: var(--mosaik-duration-short);
   --tooltip-transition-mode: ease;
   --tooltip-transition-property: opacity, transform, visibility;
   --tooltip-translate: none;

package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.js

@@ -38,7 +38,7 @@ export function wheelPickerElementCosmopolitanStyle() {
   --wheel-picker-shadow-offset-x: unset;
   --wheel-picker-shadow-offset-y: unset;
   --wheel-picker-shadow-spread: unset;
-  --wheel-picker-transition-duration: var(--cosmopolitan-duration-short);
+  --wheel-picker-transition-duration: var(--mosaik-duration-short);
   --wheel-picker-transition-mode: ease;
   --wheel-picker-transition-property: background-color, color;
   --wheel-picker-translate: none;

package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.js

@@ -38,7 +38,7 @@ export function wheelPickerElementJoyStyle() {
   --wheel-picker-shadow-offset-x: unset;
   --wheel-picker-shadow-offset-y: unset;
   --wheel-picker-shadow-spread: unset;
-  --wheel-picker-transition-duration: var(--joy-duration-short);
+  --wheel-picker-transition-duration: var(--mosaik-duration-short);
   --wheel-picker-transition-mode: ease;
   --wheel-picker-transition-property: background-color, color;
   --wheel-picker-translate: none;