@breadstone/mosaik-elements-foundation 0.1.22 → 0.1.23

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;

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

@@ -38,7 +38,7 @@ export function wheelPickerElementMemphisStyle() {
   --wheel-picker-shadow-offset-x: unset;
   --wheel-picker-shadow-offset-y: unset;
   --wheel-picker-shadow-spread: unset;
-  --wheel-picker-transition-duration: var(--memphis-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/ghost/themes/GhostElement.Cosmopolitan.js

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

package/Controls/Components/Primitives/ghost/themes/GhostElement.Joy.js

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

package/Controls/Components/Primitives/ghost/themes/GhostElement.Memphis.js

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

package/Controls/Components/Primitives/listing/Themes/ListingElement.Joy.js

@@ -33,7 +33,7 @@ export function listingElementJoyStyle() {
   --listing-shadow-offset-x: 0px;
   --listing-shadow-offset-y: 0px;
   --listing-shadow-spread: 0px;
-  --listing-transition-duration: var(--joy-duration-short);
+  --listing-transition-duration: var(--mosaik-duration-short);
   --listing-transition-mode: ease;
   --listing-transition-property: color, opacity;
   --listing-translate: none;

package/Controls/Components/Primitives/listing/Themes/ListingElement.Memphis.js

@@ -33,7 +33,7 @@ export function listingElementMemphisStyle() {
   --listing-shadow-offset-x: 0px;
   --listing-shadow-offset-y: 0px;
   --listing-shadow-spread: 0px;
-  --listing-transition-duration: var(--memphis-duration-short);
+  --listing-transition-duration: var(--mosaik-duration-short);
   --listing-transition-mode: ease;
   --listing-transition-property: color, opacity;
   --listing-translate: none;

package/Controls/Components/Primitives/listing/Themes/ListingItemElement.Joy.js

@@ -33,7 +33,7 @@ export function listingItemElementJoyStyle() {
   --listing-item-shadow-offset-x: 0px;
   --listing-item-shadow-offset-y: 0px;
   --listing-item-shadow-spread: 0px;
-  --listing-item-transition-duration: var(--joy-duration-short);
+  --listing-item-transition-duration: var(--mosaik-duration-short);
   --listing-item-transition-mode: ease;
   --listing-item-transition-property: color, opacity;
   --listing-item-translate: none;

package/Controls/Components/Primitives/listing/Themes/ListingItemElement.Memphis.js

@@ -33,7 +33,7 @@ export function listingItemElementMemphisStyle() {
   --listing-item-shadow-offset-x: 0px;
   --listing-item-shadow-offset-y: 0px;
   --listing-item-shadow-spread: 0px;
-  --listing-item-transition-duration: var(--memphis-duration-short);
+  --listing-item-transition-duration: var(--mosaik-duration-short);
   --listing-item-transition-mode: ease;
   --listing-item-transition-property: color, opacity;
   --listing-item-translate: none;

package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Cosmopolitan.js

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

package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Joy.js

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

package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Memphis.js

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

package/Controls/Components/Primitives/placeholder/themes/PlaceholderElement.Cosmopolitan.js

@@ -36,7 +36,7 @@ export function placeholderElementCosmopolitanStyle() {
   --placeholder-shadow-offset-x: unset;
   --placeholder-shadow-offset-y: unset;
   --placeholder-shadow-spread: unset;
-  --placeholder-transition-duration: var(--cosmopolitan-duration-short);
+  --placeholder-transition-duration: var(--mosaik-duration-short);
   --placeholder-transition-mode: ease;
   --placeholder-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --placeholder-translate: unset;

package/Controls/Components/Primitives/placeholder/themes/PlaceholderElement.Joy.js

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

package/Controls/Components/Primitives/placeholder/themes/PlaceholderElement.Memphis.js

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

package/Controls/Components/Primitives/thumb/themes/ThumbElement.Cosmopolitan.js

@@ -30,13 +30,13 @@ export function thumbElementCosmopolitanStyle() {
   --thumb-padding-left: unset;
   --thumb-padding-right: unset;
   --thumb-padding-top: unset;
-  --thumb-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);
-  --thumb-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --thumb-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --thumb-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --thumb-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --thumb-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
-  --thumb-transition-duration: var(--cosmopolitan-duration-short);
+  --thumb-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);
+  --thumb-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --thumb-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --thumb-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --thumb-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --thumb-shadow-spread: var(--cosmopolitan-elevation-light-spread);
+  --thumb-transition-duration: var(--mosaik-duration-short);
   --thumb-transition-mode: ease;
   --thumb-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --thumb-translate: none;

package/Controls/Components/Primitives/thumb/themes/ThumbElement.Joy.js

@@ -30,13 +30,13 @@ export function thumbElementJoyStyle() {
   --thumb-padding-left: unset;
   --thumb-padding-right: unset;
   --thumb-padding-top: unset;
-  --thumb-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);
-  --thumb-shadow-blur: var(--joy-elevation-light-blur-1);
-  --thumb-shadow-color: var(--joy-elevation-light-color-1);
-  --thumb-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --thumb-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --thumb-shadow-spread: var(--joy-elevation-light-spread-1);
-  --thumb-transition-duration: var(--joy-duration-short);
+  --thumb-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);
+  --thumb-shadow-blur: var(--joy-elevation-light-blur);
+  --thumb-shadow-color: var(--joy-elevation-light-color);
+  --thumb-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --thumb-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --thumb-shadow-spread: var(--joy-elevation-light-spread);
+  --thumb-transition-duration: var(--mosaik-duration-short);
   --thumb-transition-mode: ease;
   --thumb-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;
   --thumb-translate: none;

package/Controls/Components/Primitives/thumb/themes/ThumbElement.Memphis.js

@@ -30,13 +30,13 @@ export function thumbElementMemphisStyle() {
   --thumb-padding-left: unset;
   --thumb-padding-right: unset;
   --thumb-padding-top: unset;
-  --thumb-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);
-  --thumb-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --thumb-shadow-color: var(--memphis-elevation-light-color-1);
-  --thumb-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --thumb-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --thumb-shadow-spread: var(--memphis-elevation-light-spread-1);
-  --thumb-transition-duration: var(--memphis-duration-short);
+  --thumb-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);
+  --thumb-shadow-blur: var(--memphis-elevation-light-blur);
+  --thumb-shadow-color: var(--memphis-elevation-light-color);
+  --thumb-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --thumb-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --thumb-shadow-spread: var(--memphis-elevation-light-spread);
+  --thumb-transition-duration: var(--mosaik-duration-short);
   --thumb-transition-mode: ease;
   --thumb-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --thumb-translate: none;

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.js

@@ -45,7 +45,7 @@ export function meterRingElementJoyStyle() {
   --meter-ring-shadow-offset-y: unset;
   --meter-ring-shadow-spread: unset;
   --meter-ring-thickness: 6px;
-  --meter-ring-transition-duration: var(--joy-duration-short);
+  --meter-ring-transition-duration: var(--mosaik-duration-short);
   --meter-ring-transition-mode: ease;
   --meter-ring-transition-property: background-color, color, border-color, opacity, box-shadow, stroke-dashoffset;
   --meter-ring-translate: none;

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.js

@@ -45,7 +45,7 @@ export function meterRingElementMemphisStyle() {
   --meter-ring-shadow-offset-y: unset;
   --meter-ring-shadow-spread: unset;
   --meter-ring-thickness: 6px;
-  --meter-ring-transition-duration: var(--memphis-duration-short);
+  --meter-ring-transition-duration: var(--mosaik-duration-short);
   --meter-ring-transition-mode: ease;
   --meter-ring-transition-property: background-color, color, border-color, opacity, box-shadow, stroke-dashoffset;
   --meter-ring-translate: none;

package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Joy.js

@@ -40,7 +40,7 @@ export function progressRingElementJoyStyle() {
   --progress-ring-shadow-offset-y: unset;
   --progress-ring-shadow-spread: unset;
   --progress-ring-thickness: 6px;
-  --progress-ring-transition-duration: var(--joy-duration-short);
+  --progress-ring-transition-duration: var(--mosaik-duration-short);
   --progress-ring-transition-mode: ease;
   --progress-ring-transition-property: background-color, color, border-color, opacity, box-shadow;
   --progress-ring-translate: none;

package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Memphis.js

@@ -40,7 +40,7 @@ export function progressRingElementMemphisStyle() {
   --progress-ring-shadow-offset-y: unset;
   --progress-ring-shadow-spread: unset;
   --progress-ring-thickness: 6px;
-  --progress-ring-transition-duration: var(--memphis-duration-short);
+  --progress-ring-transition-duration: var(--mosaik-duration-short);
   --progress-ring-transition-mode: ease;
   --progress-ring-transition-property: stroke, stroke-dashoffset, stroke-dasharray, transform;
   --progress-ring-translate: none;

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js

@@ -64,11 +64,11 @@ export function scrubSliderElementJoyStyle() {
   --scrub-slider-tooltip-padding-right: var(--joy-layout-space);
   --scrub-slider-tooltip-padding-top: var(--joy-layout-space);
   --scrub-slider-tooltip-shadow: var(--joy-elevation-light);
-  --scrub-slider-tooltip-transition-duration: var(--joy-duration-short);
+  --scrub-slider-tooltip-transition-duration: var(--mosaik-duration-short);
   --scrub-slider-tooltip-transition-mode: ease;
   --scrub-slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
   --scrub-slider-track-size: 4px;
-  --scrub-slider-transition-duration: var(--joy-duration-short);
+  --scrub-slider-transition-duration: var(--mosaik-duration-short);
   --scrub-slider-transition-mode: ease;
   --scrub-slider-transition-property: background-color, color, border-color, opacity, transform;
   --scrub-slider-translate: none;

package/Controls/Components/Ranges/Slider/Themes/SliderElement.Joy.js

@@ -69,11 +69,11 @@ export function sliderElementJoyStyle() {
   --slider-tooltip-padding-right: var(--joy-layout-space);
   --slider-tooltip-padding-top: var(--joy-layout-space);
   --slider-tooltip-shadow: var(--joy-elevation-light);
-  --slider-tooltip-transition-duration: var(--joy-duration-short);
+  --slider-tooltip-transition-duration: var(--mosaik-duration-short);
   --slider-tooltip-transition-mode: ease;
   --slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
   --slider-track-size: 4px;
-  --slider-transition-duration: var(--joy-duration-short);
+  --slider-transition-duration: var(--mosaik-duration-short);
   --slider-transition-mode: ease;
   --slider-transition-property: background-color, color, border-color, opacity, transform;
   --slider-translate: none;