@breadstone/mosaik-elements-foundation 0.1.21 → 0.1.23

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorElement.Joy.js

@@ -19,7 +19,7 @@ export function colorEditorElementJoyStyle() {
   --color-editor-border-style: solid;
   --color-editor-border-width: var(--joy-layout-thickness);
   --color-editor-focus-ring-active-width: 8px;
-  --color-editor-focus-ring-color: var(--joy-color-primary-500);
+  --color-editor-focus-ring-color: var(--joy-scheme-highlight);
   --color-editor-focus-ring-inward-offset: 2px;
   --color-editor-focus-ring-outward-offset: 2px;
   --color-editor-font-family: var(--joy-font-family);
@@ -42,7 +42,7 @@ export function colorEditorElementJoyStyle() {
   --color-editor-shadow-offset-x: unset;
   --color-editor-shadow-offset-y: unset;
   --color-editor-shadow-spread: unset;
-  --color-editor-transition-duration: var(--joy-duration-short);
+  --color-editor-transition-duration: var(--mosaik-duration-short);
   --color-editor-transition-mode: ease;
   --color-editor-transition-property: background-color, border-color, box-shadow;
   --color-editor-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorElement.Memphis.js

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

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Cosmopolitan.js

@@ -36,19 +36,19 @@ export function colorEditorHueSliderElementCosmopolitanStyle() {
   --color-editor-hue-slider-padding-left: unset;
   --color-editor-hue-slider-padding-right: unset;
   --color-editor-hue-slider-padding-top: unset;
-  --color-editor-hue-slider-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);
-  --color-editor-hue-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --color-editor-hue-slider-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-hue-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --color-editor-hue-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --color-editor-hue-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --color-editor-hue-slider-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);
+  --color-editor-hue-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --color-editor-hue-slider-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --color-editor-hue-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --color-editor-hue-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --color-editor-hue-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --color-editor-hue-slider-thumb-background-color: var(--cosmopolitan-scheme-neutral-container);
   --color-editor-hue-slider-thumb-border-color: transparent;
   --color-editor-hue-slider-thumb-border-radius: 50%;
   --color-editor-hue-slider-thumb-border-width: 0;
-  --color-editor-hue-slider-thumb-shadow: var(--cosmopolitan-elevation-light-1);
+  --color-editor-hue-slider-thumb-shadow: var(--cosmopolitan-elevation-light);
   --color-editor-hue-slider-thumb-size: calc(var(--cosmopolitan-layout-space) * 1.75);
-  --color-editor-hue-slider-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-hue-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-hue-slider-transition-mode: ease;
   --color-editor-hue-slider-transition-property: box-shadow, border-color;
   --color-editor-hue-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Joy.js

@@ -19,7 +19,7 @@ export function colorEditorHueSliderElementJoyStyle() {
   --color-editor-hue-slider-border-style: none;
   --color-editor-hue-slider-border-width: 0;
   --color-editor-hue-slider-focus-ring-active-width: 8px;
-  --color-editor-hue-slider-focus-ring-color: var(--joy-color-primary-500);
+  --color-editor-hue-slider-focus-ring-color: var(--joy-scheme-highlight);
   --color-editor-hue-slider-focus-ring-inward-offset: 2px;
   --color-editor-hue-slider-focus-ring-outward-offset: 2px;
   --color-editor-hue-slider-font-family: unset;
@@ -36,19 +36,19 @@ export function colorEditorHueSliderElementJoyStyle() {
   --color-editor-hue-slider-padding-left: unset;
   --color-editor-hue-slider-padding-right: unset;
   --color-editor-hue-slider-padding-top: unset;
-  --color-editor-hue-slider-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);
-  --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-blur-1);
-  --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-color-1);
-  --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-spread-1);
+  --color-editor-hue-slider-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);
+  --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-blur);
+  --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-color);
+  --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-spread);
   --color-editor-hue-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-hue-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-hue-slider-thumb-border-radius: 50%;
   --color-editor-hue-slider-thumb-border-width: var(--joy-layout-thickness);
   --color-editor-hue-slider-thumb-shadow: var(--joy-elevation-light-light);
   --color-editor-hue-slider-thumb-size: 14px;
-  --color-editor-hue-slider-transition-duration: var(--joy-duration-short);
+  --color-editor-hue-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-hue-slider-transition-mode: ease;
   --color-editor-hue-slider-transition-property: box-shadow, border-color;
   --color-editor-hue-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Memphis.js

@@ -36,19 +36,19 @@ export function colorEditorHueSliderElementMemphisStyle() {
   --color-editor-hue-slider-padding-left: unset;
   --color-editor-hue-slider-padding-right: unset;
   --color-editor-hue-slider-padding-top: unset;
-  --color-editor-hue-slider-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);
-  --color-editor-hue-slider-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --color-editor-hue-slider-shadow-color: var(--memphis-elevation-light-color-1);
-  --color-editor-hue-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --color-editor-hue-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --color-editor-hue-slider-shadow-spread: var(--memphis-elevation-light-spread-1);
+  --color-editor-hue-slider-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);
+  --color-editor-hue-slider-shadow-blur: var(--memphis-elevation-light-blur);
+  --color-editor-hue-slider-shadow-color: var(--memphis-elevation-light-color);
+  --color-editor-hue-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --color-editor-hue-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --color-editor-hue-slider-shadow-spread: var(--memphis-elevation-light-spread);
   --color-editor-hue-slider-thumb-background-color: var(--memphis-scheme-surface);
   --color-editor-hue-slider-thumb-border-color: var(--memphis-scheme-contrast);
   --color-editor-hue-slider-thumb-border-radius: 0;
   --color-editor-hue-slider-thumb-border-width: var(--memphis-layout-thickness);
   --color-editor-hue-slider-thumb-shadow: var(--memphis-shadow-1);
   --color-editor-hue-slider-thumb-size: calc(var(--memphis-layout-space) * 1.75);
-  --color-editor-hue-slider-transition-duration: var(--memphis-duration-short);
+  --color-editor-hue-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-hue-slider-transition-mode: ease;
   --color-editor-hue-slider-transition-property: box-shadow, border-color;
   --color-editor-hue-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorInputsElement.Cosmopolitan.js

@@ -45,7 +45,7 @@ export function colorEditorInputsElementCosmopolitanStyle() {
   --color-editor-inputs-shadow-offset-x: unset;
   --color-editor-inputs-shadow-offset-y: unset;
   --color-editor-inputs-shadow-spread: unset;
-  --color-editor-inputs-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-inputs-transition-duration: var(--mosaik-duration-short);
   --color-editor-inputs-transition-mode: ease;
   --color-editor-inputs-transition-property: border-color, background-color;
   --color-editor-inputs-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorInputsElement.Joy.js

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

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorInputsElement.Memphis.js

@@ -45,7 +45,7 @@ export function colorEditorInputsElementMemphisStyle() {
   --color-editor-inputs-shadow-offset-x: unset;
   --color-editor-inputs-shadow-offset-y: unset;
   --color-editor-inputs-shadow-spread: unset;
-  --color-editor-inputs-transition-duration: var(--memphis-duration-short);
+  --color-editor-inputs-transition-duration: var(--mosaik-duration-short);
   --color-editor-inputs-transition-mode: ease;
   --color-editor-inputs-transition-property: border-color, background-color;
   --color-editor-inputs-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorPaletteElement.Cosmopolitan.js

@@ -44,7 +44,7 @@ export function colorEditorPaletteElementCosmopolitanStyle() {
   --color-editor-palette-shadow-offset-x: unset;
   --color-editor-palette-shadow-offset-y: unset;
   --color-editor-palette-shadow-spread: unset;
-  --color-editor-palette-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-palette-transition-duration: var(--mosaik-duration-short);
   --color-editor-palette-transition-mode: ease;
   --color-editor-palette-transition-property: transform, border-color;
   --color-editor-palette-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorPaletteElement.Joy.js

@@ -44,7 +44,7 @@ export function colorEditorPaletteElementJoyStyle() {
   --color-editor-palette-shadow-offset-x: unset;
   --color-editor-palette-shadow-offset-y: unset;
   --color-editor-palette-shadow-spread: unset;
-  --color-editor-palette-transition-duration: var(--joy-duration-short);
+  --color-editor-palette-transition-duration: var(--mosaik-duration-short);
   --color-editor-palette-transition-mode: ease;
   --color-editor-palette-transition-property: transform, border-color;
   --color-editor-palette-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorPaletteElement.Memphis.js

@@ -44,7 +44,7 @@ export function colorEditorPaletteElementMemphisStyle() {
   --color-editor-palette-shadow-offset-x: unset;
   --color-editor-palette-shadow-offset-y: unset;
   --color-editor-palette-shadow-spread: unset;
-  --color-editor-palette-transition-duration: var(--memphis-duration-short);
+  --color-editor-palette-transition-duration: var(--mosaik-duration-short);
   --color-editor-palette-transition-mode: ease;
   --color-editor-palette-transition-property: transform, border-color;
   --color-editor-palette-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Cosmopolitan.js

@@ -36,19 +36,19 @@ export function colorEditorShadeSliderElementCosmopolitanStyle() {
   --color-editor-shade-slider-padding-left: unset;
   --color-editor-shade-slider-padding-right: unset;
   --color-editor-shade-slider-padding-top: unset;
-  --color-editor-shade-slider-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);
-  --color-editor-shade-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --color-editor-shade-slider-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-shade-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --color-editor-shade-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --color-editor-shade-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --color-editor-shade-slider-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);
+  --color-editor-shade-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --color-editor-shade-slider-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --color-editor-shade-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --color-editor-shade-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --color-editor-shade-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --color-editor-shade-slider-thumb-background-color: var(--cosmopolitan-scheme-background);
   --color-editor-shade-slider-thumb-border-color: transparent;
   --color-editor-shade-slider-thumb-border-radius: 50%;
   --color-editor-shade-slider-thumb-border-width: 0;
-  --color-editor-shade-slider-thumb-shadow: var(--cosmopolitan-elevation-light-1);
+  --color-editor-shade-slider-thumb-shadow: var(--cosmopolitan-elevation-light);
   --color-editor-shade-slider-thumb-size: calc(var(--cosmopolitan-layout-space) * 1.75);
-  --color-editor-shade-slider-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-shade-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-shade-slider-transition-mode: ease;
   --color-editor-shade-slider-transition-property: box-shadow, border-color;
   --color-editor-shade-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Joy.js

@@ -19,7 +19,7 @@ export function colorEditorShadeSliderElementJoyStyle() {
   --color-editor-shade-slider-border-style: none;
   --color-editor-shade-slider-border-width: 0;
   --color-editor-shade-slider-focus-ring-active-width: 8px;
-  --color-editor-shade-slider-focus-ring-color: var(--joy-color-primary-500);
+  --color-editor-shade-slider-focus-ring-color: var(--joy-scheme-highlight);
   --color-editor-shade-slider-focus-ring-inward-offset: 2px;
   --color-editor-shade-slider-focus-ring-outward-offset: 2px;
   --color-editor-shade-slider-font-family: unset;
@@ -36,19 +36,19 @@ export function colorEditorShadeSliderElementJoyStyle() {
   --color-editor-shade-slider-padding-left: unset;
   --color-editor-shade-slider-padding-right: unset;
   --color-editor-shade-slider-padding-top: unset;
-  --color-editor-shade-slider-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);
-  --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-blur-1);
-  --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-color-1);
-  --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-spread-1);
+  --color-editor-shade-slider-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);
+  --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-blur);
+  --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-color);
+  --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-spread);
   --color-editor-shade-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-shade-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-shade-slider-thumb-border-radius: 50%;
   --color-editor-shade-slider-thumb-border-width: var(--joy-layout-thickness);
   --color-editor-shade-slider-thumb-shadow: var(--joy-elevation-light-light);
   --color-editor-shade-slider-thumb-size: 14px;
-  --color-editor-shade-slider-transition-duration: var(--joy-duration-short);
+  --color-editor-shade-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-shade-slider-transition-mode: ease;
   --color-editor-shade-slider-transition-property: box-shadow, border-color;
   --color-editor-shade-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Memphis.js

@@ -36,19 +36,19 @@ export function colorEditorShadeSliderElementMemphisStyle() {
   --color-editor-shade-slider-padding-left: unset;
   --color-editor-shade-slider-padding-right: unset;
   --color-editor-shade-slider-padding-top: unset;
-  --color-editor-shade-slider-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);
-  --color-editor-shade-slider-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --color-editor-shade-slider-shadow-color: var(--memphis-elevation-light-color-1);
-  --color-editor-shade-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --color-editor-shade-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --color-editor-shade-slider-shadow-spread: var(--memphis-elevation-light-spread-1);
+  --color-editor-shade-slider-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);
+  --color-editor-shade-slider-shadow-blur: var(--memphis-elevation-light-blur);
+  --color-editor-shade-slider-shadow-color: var(--memphis-elevation-light-color);
+  --color-editor-shade-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --color-editor-shade-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --color-editor-shade-slider-shadow-spread: var(--memphis-elevation-light-spread);
   --color-editor-shade-slider-thumb-background-color: var(--memphis-scheme-surface);
   --color-editor-shade-slider-thumb-border-color: var(--memphis-scheme-contrast);
   --color-editor-shade-slider-thumb-border-radius: 0;
   --color-editor-shade-slider-thumb-border-width: var(--memphis-layout-thickness);
   --color-editor-shade-slider-thumb-shadow: var(--memphis-shadow-1);
   --color-editor-shade-slider-thumb-size: calc(var(--memphis-layout-space) * 1.75);
-  --color-editor-shade-slider-transition-duration: var(--memphis-duration-short);
+  --color-editor-shade-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-shade-slider-transition-mode: ease;
   --color-editor-shade-slider-transition-property: box-shadow, border-color;
   --color-editor-shade-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorSwatchElement.Cosmopolitan.js

@@ -39,7 +39,7 @@ export function colorEditorSwatchElementCosmopolitanStyle() {
   --color-editor-swatch-shadow-offset-x: unset;
   --color-editor-swatch-shadow-offset-y: unset;
   --color-editor-swatch-shadow-spread: unset;
-  --color-editor-swatch-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-swatch-transition-duration: var(--mosaik-duration-short);
   --color-editor-swatch-transition-mode: ease;
   --color-editor-swatch-transition-property: opacity, background-color;
   --color-editor-swatch-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorSwatchElement.Joy.js

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

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorSwatchElement.Memphis.js

@@ -39,7 +39,7 @@ export function colorEditorSwatchElementMemphisStyle() {
   --color-editor-swatch-shadow-offset-x: unset;
   --color-editor-swatch-shadow-offset-y: unset;
   --color-editor-swatch-shadow-spread: unset;
-  --color-editor-swatch-transition-duration: var(--memphis-duration-short);
+  --color-editor-swatch-transition-duration: var(--mosaik-duration-short);
   --color-editor-swatch-transition-mode: ease;
   --color-editor-swatch-transition-property: opacity, background-color;
   --color-editor-swatch-translate: none;

package/Controls/Components/Media/ColorPicker/Themes/ColorPickerElement.Joy.js

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

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

@@ -28,7 +28,7 @@ export function fontEditorElementJoyStyle() {
   --font-editor-border-style: solid;
   --font-editor-border-width: var(--joy-layout-thickness);
   --font-editor-focus-ring-active-width: 8px;
-  --font-editor-focus-ring-color: var(--joy-color-primary-500);
+  --font-editor-focus-ring-color: var(--joy-scheme-highlight);
   --font-editor-focus-ring-inward-offset: 2px;
   --font-editor-focus-ring-outward-offset: 2px;
   --font-editor-font-category-font-size: var(--joy-typography-caption-font-size);
@@ -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;