@breadstone/mosaik-elements-foundation 0.1.22 → 0.1.23

package/Controls/Components/Media/ColorSwatch/Themes/ColorSwatchElement.Joy.js

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

package/Controls/Components/Media/ColorSwatch/Themes/ColorSwatchGroupElement.Joy.js

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

package/Controls/Components/Media/ColorThumb/Themes/ColorThumbElement.Joy.js

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

package/Controls/Components/Media/Comment/Themes/CommentElement.Cosmopolitan.js

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

package/Controls/Components/Media/Comment/Themes/CommentElement.Joy.js

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

package/Controls/Components/Media/Comment/Themes/CommentElement.Memphis.js

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

package/Controls/Components/Media/FontEditor/Themes/FontEditorElement.Cosmopolitan.js

@@ -64,7 +64,7 @@ export function fontEditorElementCosmopolitanStyle() {
   --font-editor-shadow-offset-x: unset;
   --font-editor-shadow-offset-y: unset;
   --font-editor-shadow-spread: unset;
-  --font-editor-transition-duration: var(--cosmopolitan-duration-short);
+  --font-editor-transition-duration: var(--mosaik-duration-short);
   --font-editor-transition-mode: ease;
   --font-editor-transition-property: unset;
   --font-editor-translate: none;

package/Controls/Components/Media/FontEditor/Themes/FontEditorElement.Joy.js

@@ -64,7 +64,7 @@ export function fontEditorElementJoyStyle() {
   --font-editor-shadow-offset-x: unset;
   --font-editor-shadow-offset-y: unset;
   --font-editor-shadow-spread: unset;
-  --font-editor-transition-duration: var(--joy-duration-short);
+  --font-editor-transition-duration: var(--mosaik-duration-short);
   --font-editor-transition-mode: ease;
   --font-editor-transition-property: unset;
   --font-editor-translate: none;

package/Controls/Components/Media/FontEditor/Themes/FontEditorElement.Memphis.js

@@ -64,7 +64,7 @@ export function fontEditorElementMemphisStyle() {
   --font-editor-shadow-offset-x: unset;
   --font-editor-shadow-offset-y: unset;
   --font-editor-shadow-spread: unset;
-  --font-editor-transition-duration: var(--memphis-duration-short);
+  --font-editor-transition-duration: var(--mosaik-duration-short);
   --font-editor-transition-mode: ease;
   --font-editor-transition-property: unset;
   --font-editor-translate: none;

package/Controls/Components/Media/Icon/Themes/IconElement.Joy.js

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

package/Controls/Components/Media/Image/Themes/ImageElement.Joy.js

@@ -46,7 +46,7 @@ export function imageElementJoyStyle() {
   --image-shadow-offset-y: unset;
   --image-shadow-spread: unset;
   --image-thumbnail-blur: 2px;
-  --image-transition-duration: var(--joy-duration-short);
+  --image-transition-duration: var(--mosaik-duration-short);
   --image-transition-mode: ease;
   --image-transition-property: color, background-color, border-color, opacity, box-shadow;
   --image-translate: none;

package/Controls/Components/Media/Persona/Themes/PersonaElement.Joy.js

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

package/Controls/Components/Media/Timeline/Themes/TimelineElement.Cosmopolitan.js

@@ -40,7 +40,7 @@ export function timelineElementCosmopolitanStyle() {
   --timeline-shadow-offset-x: unset;
   --timeline-shadow-offset-y: unset;
   --timeline-shadow-spread: unset;
-  --timeline-transition-duration: var(--cosmopolitan-duration-short);
+  --timeline-transition-duration: var(--mosaik-duration-short);
   --timeline-transition-mode: ease;
   --timeline-transition-property: color, background-color, transform;
   --timeline-translate: unset;

package/Controls/Components/Media/Timeline/Themes/TimelineElement.Joy.js

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

package/Controls/Components/Media/Timeline/Themes/TimelineElement.Memphis.js

@@ -40,7 +40,7 @@ export function timelineElementMemphisStyle() {
   --timeline-shadow-offset-x: unset;
   --timeline-shadow-offset-y: unset;
   --timeline-shadow-spread: unset;
-  --timeline-transition-duration: var(--memphis-duration-medium);
+  --timeline-transition-duration: var(--mosaik-duration-medium);
   --timeline-transition-mode: ease;
   --timeline-transition-property: color, background-color, transform;
   --timeline-translate: unset;

package/Controls/Components/Media/Video/Themes/VideoElement.Joy.js

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

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js

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

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Memphis.js

@@ -32,12 +32,12 @@ export function dialogElementMemphisStyle() {
   --dialog-padding-left: calc(var(--memphis-layout-space) * 2);
   --dialog-padding-right: calc(var(--memphis-layout-space) * 2);
   --dialog-padding-top: var(--memphis-layout-space);
-  --dialog-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);
-  --dialog-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --dialog-shadow-color: var(--memphis-elevation-bold-color-0);
-  --dialog-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --dialog-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --dialog-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --dialog-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);
+  --dialog-shadow-blur: var(--memphis-elevation-bold-blur);
+  --dialog-shadow-color: var(--memphis-elevation-bold-color);
+  --dialog-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --dialog-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --dialog-shadow-spread: var(--memphis-elevation-bold-spread);
   --dialog-transition-duration: .2s;
   --dialog-transition-mode: ease;
   --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;

package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js

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

package/Controls/Components/Overlays/MessageBox/Themes/MessageBoxElement.Joy.js

@@ -40,12 +40,12 @@ export function messageBoxElementJoyStyle() {
   --message-box-padding-left: calc(var(--joy-layout-space) * 2);
   --message-box-padding-right: calc(var(--joy-layout-space) * 2);
   --message-box-padding-top: var(--joy-layout-space);
-  --message-box-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);
-  --message-box-shadow-blur: var(--joy-elevation-regular-blur-0);
-  --message-box-shadow-color: var(--joy-elevation-regular-color-0);
-  --message-box-shadow-offset-x: var(--joy-elevation-regular-offset-x-0);
-  --message-box-shadow-offset-y: var(--joy-elevation-regular-offset-y-0);
-  --message-box-shadow-spread: var(--joy-elevation-regular-spread-0);
+  --message-box-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);
+  --message-box-shadow-blur: var(--joy-elevation-regular-blur);
+  --message-box-shadow-color: var(--joy-elevation-regular-color);
+  --message-box-shadow-offset-x: var(--joy-elevation-regular-offset-x);
+  --message-box-shadow-offset-y: var(--joy-elevation-regular-offset-y);
+  --message-box-shadow-spread: var(--joy-elevation-regular-spread);
   --message-box-sub-header-font-family: var(--joy-font-family);
   --message-box-sub-header-font-letter-spacing: var(--joy-typography-subtitle2-letter-spacing);
   --message-box-sub-header-font-line-height: var(--joy-typography-subtitle2-line-height);
@@ -54,7 +54,7 @@ export function messageBoxElementJoyStyle() {
   --message-box-sub-header-font-text-transform: var(--joy-typography-subtitle2-text-transform);
   --message-box-sub-header-font-weight: var(--joy-typography-subtitle2-font-weight);
   --message-box-sub-header-foreground-color: var(--joy-scheme-middlelight);
-  --message-box-transition-duration: var(--joy-duration-short);
+  --message-box-transition-duration: var(--mosaik-duration-short);
   --message-box-transition-mode: ease;
   --message-box-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --message-box-translate: none;

package/Controls/Components/Overlays/MessageBox/Themes/MessageBoxElement.Memphis.js

@@ -40,12 +40,12 @@ export function messageBoxElementMemphisStyle() {
   --message-box-padding-left: calc(var(--memphis-layout-space) * 2);
   --message-box-padding-right: calc(var(--memphis-layout-space) * 2);
   --message-box-padding-top: var(--memphis-layout-space);
-  --message-box-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);
-  --message-box-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --message-box-shadow-color: var(--memphis-elevation-bold-color-0);
-  --message-box-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --message-box-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --message-box-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --message-box-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);
+  --message-box-shadow-blur: var(--memphis-elevation-bold-blur);
+  --message-box-shadow-color: var(--memphis-elevation-bold-color);
+  --message-box-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --message-box-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --message-box-shadow-spread: var(--memphis-elevation-bold-spread);
   --message-box-sub-header-font-family: var(--memphis-font-family);
   --message-box-sub-header-font-letter-spacing: var(--memphis-typography-subtitle2-letter-spacing);
   --message-box-sub-header-font-line-height: var(--memphis-typography-subtitle2-line-height);

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

@@ -35,7 +35,7 @@ export function sheetElementCosmopolitanStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
-  --sheet-transition-duration: var(--cosmopolitan-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.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;