@breadstone/mosaik-elements-foundation 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js +6 -6
  2. package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Joy.js +6 -6
  3. package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Joy.js +6 -6
  4. package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.js +6 -6
  5. package/Controls/Components/Cells/Themes/CellGroupElement.Joy.js +6 -6
  6. package/Controls/Components/Grouping/Banner/Themes/BannerElement.Joy.js +6 -6
  7. package/Controls/Components/Grouping/Card/Themes/CardElement.Joy.js +6 -6
  8. package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Joy.js +6 -6
  9. package/Controls/Components/Grouping/Message/Themes/MessageElement.Joy.js +6 -6
  10. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js +6 -6
  11. package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js +6 -6
  12. package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Joy.js +6 -6
  13. package/Controls/Components/Inputs/ColorBox/Themes/ColorBoxElement.Joy.js +6 -6
  14. package/Controls/Components/Inputs/DateBox/Themes/DateBoxElement.Joy.js +6 -6
  15. package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.js +6 -6
  16. package/Controls/Components/Inputs/PasswordBox/Themes/PasswordBoxElement.Joy.js +6 -6
  17. package/Controls/Components/Inputs/PinBox/Themes/PinBoxElement.Joy.js +6 -6
  18. package/Controls/Components/Inputs/Scheduler/Themes/SchedulerEventElement.Joy.js +6 -6
  19. package/Controls/Components/Inputs/SearchBox/Themes/SearchBoxElement.Joy.js +6 -6
  20. package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js +6 -6
  21. package/Controls/Components/Layouts/FlowBoard/Themes/FlowBoardColumnItemElement.Joy.js +6 -6
  22. package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js +6 -6
  23. package/Controls/Components/Media/Chat/Themes/ChatInputAttachmentListElement.Joy.js +6 -6
  24. package/Controls/Components/Media/Chat/Themes/ChatInputElement.Joy.js +6 -6
  25. package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js +6 -6
  26. package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js +6 -6
  27. package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Joy.js +6 -6
  28. package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Joy.js +6 -6
  29. package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Joy.js +6 -6
  30. package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Joy.js +6 -6
  31. package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js +6 -6
  32. package/Controls/Components/Overlays/MessageBox/Themes/MessageBoxElement.Joy.js +6 -6
  33. package/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.js +6 -6
  34. package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Joy.js +6 -6
  35. package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Joy.js +6 -6
  36. package/Controls/Components/Primitives/Pip/Themes/PipElement.Joy.js +6 -6
  37. package/Controls/Components/Primitives/Popup/Themes/PopupElement.Joy.js +6 -6
  38. package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Joy.js +6 -6
  39. package/Controls/Components/Primitives/thumb/themes/ThumbElement.Joy.js +6 -6
  40. package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js +1 -1
  41. package/Controls/Components/Ranges/Slider/Themes/SliderElement.Joy.js +1 -1
  42. package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Joy.js +6 -6
  43. package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js +6 -6
  44. package/package.json +3 -3
package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js CHANGED
@@ -43,12 +43,12 @@ export function buttonElementJoyStyle() {
43
43
  --button-progress-ring-width: var(--joy-layout-thickness);
44
44
  --button-ripple-color: unset;
45
45
  --button-ripple-duration: .2s;
46
- --button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
47
- --button-shadow-blur: var(--joy-elevation-semilight-blur);
48
- --button-shadow-color: var(--joy-elevation-semilight-color);
49
- --button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
50
- --button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
51
- --button-shadow-spread: var(--joy-elevation-semilight-spread);
46
+ --button-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
47
+ --button-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
48
+ --button-shadow-color: var(--joy-elevation-light-semilight-color-0);
49
+ --button-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
50
+ --button-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
51
+ --button-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
52
52
  --button-transition-duration: var(--mosaik-duration-short);
53
53
  --button-transition-mode: ease;
54
54
  --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Joy.js CHANGED
@@ -43,12 +43,12 @@ export function compoundButtonElementJoyStyle() {
43
43
  --compound-button-progress-ring-width: var(--joy-layout-thickness);
44
44
  --compound-button-ripple-color: unset;
45
45
  --compound-button-ripple-duration: .2s;
46
- --compound-button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
47
- --compound-button-shadow-blur: var(--joy-elevation-semilight-blur);
48
- --compound-button-shadow-color: var(--joy-elevation-semilight-color);
49
- --compound-button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
50
- --compound-button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
51
- --compound-button-shadow-spread: var(--joy-elevation-semilight-spread);
46
+ --compound-button-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
47
+ --compound-button-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
48
+ --compound-button-shadow-color: var(--joy-elevation-light-semilight-color-0);
49
+ --compound-button-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
50
+ --compound-button-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
51
+ --compound-button-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
52
52
  --compound-button-transition-duration: var(--mosaik-duration-short);
53
53
  --compound-button-transition-mode: ease;
54
54
  --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Joy.js CHANGED
@@ -42,12 +42,12 @@ export function floatingActionButtonElementJoyStyle() {
42
42
  --fab-progress-ring-width: var(--joy-layout-thickness);
43
43
  --fab-ripple-color: unset;
44
44
  --fab-ripple-duration: .2s;
45
- --fab-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
46
- --fab-shadow-blur: var(--joy-elevation-semilight-blur);
47
- --fab-shadow-color: var(--joy-elevation-semilight-color);
48
- --fab-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
49
- --fab-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
50
- --fab-shadow-spread: var(--joy-elevation-semilight-spread);
45
+ --fab-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
46
+ --fab-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
47
+ --fab-shadow-color: var(--joy-elevation-light-semilight-color-0);
48
+ --fab-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
49
+ --fab-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
50
+ --fab-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
51
51
  --fab-transition-duration: var(--mosaik-duration-short);
52
52
  --fab-transition-mode: ease;
53
53
  --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function tileElementJoyStyle() {
37
37
  --tile-padding-top: var(--joy-layout-space);
38
38
  --tile-ripple-color: var(--joy-scheme-highlight);
39
39
  --tile-ripple-duration: .2s;
40
- --tile-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
41
- --tile-shadow-blur: var(--joy-elevation-light-blur);
42
- --tile-shadow-color: var(--joy-elevation-light-color);
43
- --tile-shadow-offset-x: var(--joy-elevation-light-offset-x);
44
- --tile-shadow-offset-y: var(--joy-elevation-light-offset-y);
45
- --tile-shadow-spread: var(--joy-elevation-light-spread);
40
+ --tile-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
41
+ --tile-shadow-blur: var(--joy-elevation-light-light-blur-0);
42
+ --tile-shadow-color: var(--joy-elevation-light-light-color-0);
43
+ --tile-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
44
+ --tile-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
45
+ --tile-shadow-spread: var(--joy-elevation-light-light-spread-0);
46
46
  --tile-transition-duration: var(--mosaik-duration-short);
47
47
  --tile-transition-mode: ease;
48
48
  --tile-transition-property: background-color, color, border-color, box-shadow;
package/Controls/Components/Cells/Themes/CellGroupElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function cellGroupElementJoyStyle() {
31
31
  --cell-group-padding-left: unset;
32
32
  --cell-group-padding-right: unset;
33
33
  --cell-group-padding-top: unset;
34
- --cell-group-shadow: var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color);
35
- --cell-group-shadow-blur: var(--joy-elevation-bold-blur);
36
- --cell-group-shadow-color: var(--joy-elevation-bold-color);
37
- --cell-group-shadow-offset-x: var(--joy-elevation-bold-offset-x);
38
- --cell-group-shadow-offset-y: var(--joy-elevation-bold-offset-y);
39
- --cell-group-shadow-spread: var(--joy-elevation-bold-spread);
34
+ --cell-group-shadow: var(--joy-elevation-light-bold-offset-x-0) var(--joy-elevation-light-bold-offset-y-0) var(--joy-elevation-light-bold-blur-0) var(--joy-elevation-light-bold-spread-0) var(--joy-elevation-light-bold-color-0);
35
+ --cell-group-shadow-blur: var(--joy-elevation-light-bold-blur-0);
36
+ --cell-group-shadow-color: var(--joy-elevation-light-bold-color-0);
37
+ --cell-group-shadow-offset-x: var(--joy-elevation-light-bold-offset-x-0);
38
+ --cell-group-shadow-offset-y: var(--joy-elevation-light-bold-offset-y-0);
39
+ --cell-group-shadow-spread: var(--joy-elevation-light-bold-spread-0);
40
40
  --cell-group-transition-duration: unset;
41
41
  --cell-group-transition-mode: unset;
42
42
  --cell-group-transition-property: background-color, color, border-color, box-shadow;
package/Controls/Components/Grouping/Banner/Themes/BannerElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function bannerElementJoyStyle() {
31
31
  --banner-padding-left: calc(var(--joy-layout-space) * 2);
32
32
  --banner-padding-right: calc(var(--joy-layout-space) * 2);
33
33
  --banner-padding-top: var(--joy-layout-space);
34
- --banner-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
35
- --banner-shadow-blur: var(--joy-elevation-light-blur);
36
- --banner-shadow-color: var(--joy-elevation-light-color);
37
- --banner-shadow-offset-x: var(--joy-elevation-light-offset-x);
38
- --banner-shadow-offset-y: var(--joy-elevation-light-offset-y);
39
- --banner-shadow-spread: var(--joy-elevation-light-spread);
34
+ --banner-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
35
+ --banner-shadow-blur: var(--joy-elevation-light-light-blur-0);
36
+ --banner-shadow-color: var(--joy-elevation-light-light-color-0);
37
+ --banner-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
38
+ --banner-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
39
+ --banner-shadow-spread: var(--joy-elevation-light-light-spread-0);
40
40
  --banner-transition-duration: var(--mosaik-duration-short);
41
41
  --banner-transition-mode: ease;
42
42
  --banner-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Grouping/Card/Themes/CardElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function cardElementJoyStyle() {
32
32
  --card-padding-left: unset;
33
33
  --card-padding-right: unset;
34
34
  --card-padding-top: unset;
35
- --card-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
36
- --card-shadow-blur: var(--joy-elevation-light-blur);
37
- --card-shadow-color: var(--joy-elevation-light-color);
38
- --card-shadow-offset-x: var(--joy-elevation-light-offset-x);
39
- --card-shadow-offset-y: var(--joy-elevation-light-offset-y);
40
- --card-shadow-spread: var(--joy-elevation-light-spread);
35
+ --card-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
36
+ --card-shadow-blur: var(--joy-elevation-light-light-blur-0);
37
+ --card-shadow-color: var(--joy-elevation-light-light-color-0);
38
+ --card-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
39
+ --card-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
40
+ --card-shadow-spread: var(--joy-elevation-light-light-spread-0);
41
41
  --card-transition-duration: var(--mosaik-duration-short);
42
42
  --card-transition-mode: ease;
43
43
  --card-transition-property: background-color, color, border-color, box-shadow;
package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Joy.js CHANGED
@@ -34,12 +34,12 @@ export function expanderElementJoyStyle() {
34
34
  --expander-padding-top: var(--joy-layout-space);
35
35
  --expander-ripple-color: unset;
36
36
  --expander-ripple-duration: .2s;
37
- --expander-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
38
- --expander-shadow-blur: var(--joy-elevation-light-blur);
39
- --expander-shadow-color: var(--joy-elevation-light-color);
40
- --expander-shadow-offset-x: var(--joy-elevation-light-offset-x);
41
- --expander-shadow-offset-y: var(--joy-elevation-light-offset-y);
42
- --expander-shadow-spread: var(--joy-elevation-light-spread);
37
+ --expander-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
38
+ --expander-shadow-blur: var(--joy-elevation-light-light-blur-0);
39
+ --expander-shadow-color: var(--joy-elevation-light-light-color-0);
40
+ --expander-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
41
+ --expander-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
42
+ --expander-shadow-spread: var(--joy-elevation-light-light-spread-0);
43
43
  --expander-transition-duration: var(--mosaik-duration-short);
44
44
  --expander-transition-mode: ease;
45
45
  --expander-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin;
package/Controls/Components/Grouping/Message/Themes/MessageElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function messageElementJoyStyle() {
31
31
  --message-padding-left: calc(var(--joy-layout-space) * 2);
32
32
  --message-padding-right: calc(var(--joy-layout-space) * 2);
33
33
  --message-padding-top: var(--joy-layout-space);
34
- --message-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
35
- --message-shadow-blur: var(--joy-elevation-semilight-blur);
36
- --message-shadow-color: var(--joy-elevation-semilight-color);
37
- --message-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
38
- --message-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
39
- --message-shadow-spread: var(--joy-elevation-semilight-spread);
34
+ --message-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
35
+ --message-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
36
+ --message-shadow-color: var(--joy-elevation-light-semilight-color-0);
37
+ --message-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
38
+ --message-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
39
+ --message-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
40
40
  --message-transition-duration: var(--mosaik-duration-short);
41
41
  --message-transition-mode: ease;
42
42
  --message-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function calendarElementJoyStyle() {
32
32
  --calendar-padding-left: calc(var(--joy-layout-space) * 2);
33
33
  --calendar-padding-right: calc(var(--joy-layout-space) * 2);
34
34
  --calendar-padding-top: var(--joy-layout-space);
35
- --calendar-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);
36
- --calendar-shadow-blur: var(--joy-elevation-light-blur);
37
- --calendar-shadow-color: var(--joy-elevation-light-color);
38
- --calendar-shadow-offset-x: var(--joy-elevation-light-offset-x);
39
- --calendar-shadow-offset-y: var(--joy-elevation-light-offset-y);
40
- --calendar-shadow-spread: var(--joy-elevation-light-spread);
35
+ --calendar-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
36
+ --calendar-shadow-blur: var(--joy-elevation-light-light-blur-0);
37
+ --calendar-shadow-color: var(--joy-elevation-light-light-color-0);
38
+ --calendar-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
39
+ --calendar-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
40
+ --calendar-shadow-spread: var(--joy-elevation-light-light-spread-0);
41
41
  --calendar-transition-duration: var(--mosaik-duration-short);
42
42
  --calendar-transition-mode: ease;
43
43
  --calendar-transition-property: background-color, color, border-color, opacity;
package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js CHANGED
@@ -42,12 +42,12 @@ export function calendarItemElementJoyStyle() {
42
42
  --calendar-item-ripple-color: unset;
43
43
  --calendar-item-ripple-duration: .2s;
44
44
  --calendar-item-selection-background-color: var(--joy-scheme-selection);
45
- --calendar-item-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);
46
- --calendar-item-shadow-blur: var(--joy-elevation-light-blur);
47
- --calendar-item-shadow-color: var(--joy-elevation-light-color);
48
- --calendar-item-shadow-offset-x: var(--joy-elevation-light-offset-x);
49
- --calendar-item-shadow-offset-y: var(--joy-elevation-light-offset-y);
50
- --calendar-item-shadow-spread: var(--joy-elevation-light-spread);
45
+ --calendar-item-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
46
+ --calendar-item-shadow-blur: var(--joy-elevation-light-light-blur-0);
47
+ --calendar-item-shadow-color: var(--joy-elevation-light-light-color-0);
48
+ --calendar-item-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
49
+ --calendar-item-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
50
+ --calendar-item-shadow-spread: var(--joy-elevation-light-light-spread-0);
51
51
  --calendar-item-today-border-color: var(--joy-color-primary-500);
52
52
  --calendar-item-today-border-width: 2px;
53
53
  --calendar-item-transition-duration: var(--mosaik-duration-short);
package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Joy.js CHANGED
@@ -38,12 +38,12 @@ export function chipBoxElementJoyStyle() {
38
38
  --chipbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --chipbox-padding-top: var(--joy-layout-space);
40
40
  --chipbox-prefix-icon-size: 20px;
41
- --chipbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
42
- --chipbox-shadow-blur: var(--joy-elevation-semilight-blur);
43
- --chipbox-shadow-color: var(--joy-elevation-semilight-color);
44
- --chipbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
45
- --chipbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
46
- --chipbox-shadow-spread: var(--joy-elevation-semilight-spread);
41
+ --chipbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
42
+ --chipbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
43
+ --chipbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
44
+ --chipbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
45
+ --chipbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
46
+ --chipbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
47
47
  --chipbox-suffix-icon-size: 20px;
48
48
  --chipbox-transition-duration: var(--mosaik-duration-short);
49
49
  --chipbox-transition-mode: ease;
package/Controls/Components/Inputs/ColorBox/Themes/ColorBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function colorBoxElementJoyStyle() {
37
37
  --colorbox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --colorbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --colorbox-padding-top: var(--joy-layout-space);
40
- --colorbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --colorbox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --colorbox-shadow-color: var(--joy-elevation-semilight-color);
43
- --colorbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --colorbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --colorbox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --colorbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --colorbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --colorbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --colorbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --colorbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --colorbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --colorbox-transition-duration: var(--mosaik-duration-short);
47
47
  --colorbox-transition-mode: ease;
48
48
  --colorbox-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/DateBox/Themes/DateBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function dateBoxElementJoyStyle() {
37
37
  --datebox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --datebox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --datebox-padding-top: var(--joy-layout-space);
40
- --datebox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --datebox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --datebox-shadow-color: var(--joy-elevation-semilight-color);
43
- --datebox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --datebox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --datebox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --datebox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --datebox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --datebox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --datebox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --datebox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --datebox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --datebox-transition-duration: var(--mosaik-duration-short);
47
47
  --datebox-transition-mode: ease;
48
48
  --datebox-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function fileBoxElementJoyStyle() {
37
37
  --filebox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --filebox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --filebox-padding-top: var(--joy-layout-space);
40
- --filebox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --filebox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --filebox-shadow-color: var(--joy-elevation-semilight-color);
43
- --filebox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --filebox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --filebox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --filebox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --filebox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --filebox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --filebox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --filebox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --filebox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --filebox-transition-duration: var(--mosaik-duration-short);
47
47
  --filebox-transition-mode: ease;
48
48
  --filebox-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/PasswordBox/Themes/PasswordBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function passwordBoxElementJoyStyle() {
37
37
  --passwordbox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --passwordbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --passwordbox-padding-top: var(--joy-layout-space);
40
- --passwordbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --passwordbox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --passwordbox-shadow-color: var(--joy-elevation-semilight-color);
43
- --passwordbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --passwordbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --passwordbox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --passwordbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --passwordbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --passwordbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --passwordbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --passwordbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --passwordbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --passwordbox-transition-duration: var(--mosaik-duration-short);
47
47
  --passwordbox-transition-mode: ease;
48
48
  --passwordbox-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/PinBox/Themes/PinBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function pinBoxElementJoyStyle() {
37
37
  --pinbox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --pinbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --pinbox-padding-top: var(--joy-layout-space);
40
- --pinbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --pinbox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --pinbox-shadow-color: var(--joy-elevation-semilight-color);
43
- --pinbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --pinbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --pinbox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --pinbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --pinbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --pinbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --pinbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --pinbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --pinbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --pinbox-transition-duration: var(--mosaik-duration-short);
47
47
  --pinbox-transition-mode: ease;
48
48
  --pinbox-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Inputs/Scheduler/Themes/SchedulerEventElement.Joy.js CHANGED
@@ -51,12 +51,12 @@ export function schedulerEventElementJoyStyle() {
51
51
  --scheduler-event-padding-top: unset;
52
52
  --scheduler-event-ripple-color: unset;
53
53
  --scheduler-event-ripple-duration: .2s;
54
- --scheduler-event-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);
55
- --scheduler-event-shadow-blur: var(--joy-elevation-light-blur);
56
- --scheduler-event-shadow-color: var(--joy-elevation-light-color);
57
- --scheduler-event-shadow-offset-x: var(--joy-elevation-light-offset-x);
58
- --scheduler-event-shadow-offset-y: var(--joy-elevation-light-offset-y);
59
- --scheduler-event-shadow-spread: var(--joy-elevation-light-spread);
54
+ --scheduler-event-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
55
+ --scheduler-event-shadow-blur: var(--joy-elevation-light-light-blur-0);
56
+ --scheduler-event-shadow-color: var(--joy-elevation-light-light-color-0);
57
+ --scheduler-event-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
58
+ --scheduler-event-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
59
+ --scheduler-event-shadow-spread: var(--joy-elevation-light-light-spread-0);
60
60
  --scheduler-event-transition-duration: var(--mosaik-duration-medium);
61
61
  --scheduler-event-transition-mode: ease;
62
62
  --scheduler-event-transition-property: background-color, box-shadow, transform;
package/Controls/Components/Inputs/SearchBox/Themes/SearchBoxElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function searchBoxElementJoyStyle() {
37
37
  --searchbox-padding-left: calc(var(--joy-layout-space) * 1.5);
38
38
  --searchbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --searchbox-padding-top: var(--joy-layout-space);
40
- --searchbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
41
- --searchbox-shadow-blur: var(--joy-elevation-semilight-blur);
42
- --searchbox-shadow-color: var(--joy-elevation-semilight-color);
43
- --searchbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
44
- --searchbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
45
- --searchbox-shadow-spread: var(--joy-elevation-semilight-spread);
40
+ --searchbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
41
+ --searchbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
42
+ --searchbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
43
+ --searchbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
44
+ --searchbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
45
+ --searchbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
46
46
  --searchbox-transition-duration: var(--mosaik-duration-short);
47
47
  --searchbox-transition-mode: ease;
48
48
  --searchbox-transition-property: all;
package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js CHANGED
@@ -38,12 +38,12 @@ export function textBoxElementJoyStyle() {
38
38
  --textbox-padding-right: calc(var(--joy-layout-space) * 1.5);
39
39
  --textbox-padding-top: var(--joy-layout-space);
40
40
  --textbox-prefix-icon-size: 20px;
41
- --textbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
42
- --textbox-shadow-blur: var(--joy-elevation-semilight-blur);
43
- --textbox-shadow-color: var(--joy-elevation-semilight-color);
44
- --textbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
45
- --textbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
46
- --textbox-shadow-spread: var(--joy-elevation-semilight-spread);
41
+ --textbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
42
+ --textbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
43
+ --textbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
44
+ --textbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
45
+ --textbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
46
+ --textbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
47
47
  --textbox-suffix-icon-size: 20px;
48
48
  --textbox-transition-duration: var(--mosaik-duration-short);
49
49
  --textbox-transition-mode: ease;
package/Controls/Components/Layouts/FlowBoard/Themes/FlowBoardColumnItemElement.Joy.js CHANGED
@@ -38,12 +38,12 @@ export function flowBoardColumnItemElementJoyStyle() {
38
38
  --flow-board-column-item-padding-right: unset;
39
39
  --flow-board-column-item-padding-top: unset;
40
40
  --flow-board-column-item-pinned-background-color: var(--joy-scheme-surface);
41
- --flow-board-column-item-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);
42
- --flow-board-column-item-shadow-blur: var(--joy-elevation-light-blur);
43
- --flow-board-column-item-shadow-color: var(--joy-elevation-light-color);
44
- --flow-board-column-item-shadow-offset-x: var(--joy-elevation-light-offset-x);
45
- --flow-board-column-item-shadow-offset-y: var(--joy-elevation-light-offset-y);
46
- --flow-board-column-item-shadow-spread: var(--joy-elevation-light-spread);
41
+ --flow-board-column-item-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
42
+ --flow-board-column-item-shadow-blur: var(--joy-elevation-light-light-blur-0);
43
+ --flow-board-column-item-shadow-color: var(--joy-elevation-light-light-color-0);
44
+ --flow-board-column-item-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
45
+ --flow-board-column-item-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
46
+ --flow-board-column-item-shadow-spread: var(--joy-elevation-light-light-spread-0);
47
47
  --flow-board-column-item-transition-duration: var(--mosaik-duration-medium);
48
48
  --flow-board-column-item-transition-mode: ease;
49
49
  --flow-board-column-item-transition-property: background-color, box-shadow, transform;
package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function badgeElementJoyStyle() {
32
32
  --badge-padding-left: var(--joy-layout-space);
33
33
  --badge-padding-right: var(--joy-layout-space);
34
34
  --badge-padding-top: calc(var(--joy-layout-space) / 2);
35
- --badge-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);
36
- --badge-shadow-blur: var(--joy-elevation-light-blur);
37
- --badge-shadow-color: var(--joy-elevation-light-color);
38
- --badge-shadow-offset-x: var(--joy-elevation-light-offset-x);
39
- --badge-shadow-offset-y: var(--joy-elevation-light-offset-y);
40
- --badge-shadow-spread: var(--joy-elevation-light-spread);
35
+ --badge-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
36
+ --badge-shadow-blur: var(--joy-elevation-light-light-blur-0);
37
+ --badge-shadow-color: var(--joy-elevation-light-light-color-0);
38
+ --badge-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
39
+ --badge-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
40
+ --badge-shadow-spread: var(--joy-elevation-light-light-spread-0);
41
41
  --badge-transition-duration: var(--mosaik-duration-short);
42
42
  --badge-transition-mode: ease;
43
43
  --badge-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Media/Chat/Themes/ChatInputAttachmentListElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function chatInputAttachmentListElementJoyStyle() {
31
31
  --chat-input-attachment-list-padding-left: calc(var(--joy-layout-space) * 1.5);
32
32
  --chat-input-attachment-list-padding-right: calc(var(--joy-layout-space) * 1.5);
33
33
  --chat-input-attachment-list-padding-top: var(--joy-layout-space);
34
- --chat-input-attachment-list-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
35
- --chat-input-attachment-list-shadow-blur: var(--joy-elevation-semilight-blur);
36
- --chat-input-attachment-list-shadow-color: var(--joy-elevation-semilight-color);
37
- --chat-input-attachment-list-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
38
- --chat-input-attachment-list-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
39
- --chat-input-attachment-list-shadow-spread: var(--joy-elevation-semilight-spread);
34
+ --chat-input-attachment-list-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
35
+ --chat-input-attachment-list-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
36
+ --chat-input-attachment-list-shadow-color: var(--joy-elevation-light-semilight-color-0);
37
+ --chat-input-attachment-list-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
38
+ --chat-input-attachment-list-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
39
+ --chat-input-attachment-list-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
40
40
  --chat-input-attachment-list-transition-duration: var(--mosaik-duration-short);
41
41
  --chat-input-attachment-list-transition-mode: ease;
42
42
  --chat-input-attachment-list-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Media/Chat/Themes/ChatInputElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function chatInputElementJoyStyle() {
31
31
  --chat-input-padding-left: calc(var(--joy-layout-space) * 1.5);
32
32
  --chat-input-padding-right: calc(var(--joy-layout-space) * 1.5);
33
33
  --chat-input-padding-top: var(--joy-layout-space);
34
- --chat-input-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
35
- --chat-input-shadow-blur: var(--joy-elevation-semilight-blur);
36
- --chat-input-shadow-color: var(--joy-elevation-semilight-color);
37
- --chat-input-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
38
- --chat-input-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
39
- --chat-input-shadow-spread: var(--joy-elevation-semilight-spread);
34
+ --chat-input-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
35
+ --chat-input-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
36
+ --chat-input-shadow-color: var(--joy-elevation-light-semilight-color-0);
37
+ --chat-input-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
38
+ --chat-input-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
39
+ --chat-input-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
40
40
  --chat-input-transition-duration: var(--mosaik-duration-short);
41
41
  --chat-input-transition-mode: ease;
42
42
  --chat-input-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function chatMessageElementJoyStyle() {
31
31
  --chat-message-padding-left: calc(var(--joy-layout-space) * 2);
32
32
  --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
33
33
  --chat-message-padding-top: var(--joy-layout-space);
34
- --chat-message-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);
35
- --chat-message-shadow-blur: var(--joy-elevation-light-blur);
36
- --chat-message-shadow-color: var(--joy-elevation-light-color);
37
- --chat-message-shadow-offset-x: var(--joy-elevation-light-offset-x);
38
- --chat-message-shadow-offset-y: var(--joy-elevation-light-offset-y);
39
- --chat-message-shadow-spread: var(--joy-elevation-light-spread);
34
+ --chat-message-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
35
+ --chat-message-shadow-blur: var(--joy-elevation-light-light-blur-0);
36
+ --chat-message-shadow-color: var(--joy-elevation-light-light-color-0);
37
+ --chat-message-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
38
+ --chat-message-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
39
+ --chat-message-shadow-spread: var(--joy-elevation-light-light-spread-0);
40
40
  --chat-message-transition-duration: var(--mosaik-duration-short);
41
41
  --chat-message-transition-mode: ease;
42
42
  --chat-message-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;
package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js CHANGED
@@ -38,12 +38,12 @@ export function chipElementJoyStyle() {
38
38
  --chip-padding-top: var(--joy-layout-space);
39
39
  --chip-ripple-color: unset;
40
40
  --chip-ripple-duration: .2s;
41
- --chip-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);
42
- --chip-shadow-blur: var(--joy-elevation-light-blur);
43
- --chip-shadow-color: var(--joy-elevation-light-color);
44
- --chip-shadow-offset-x: var(--joy-elevation-light-offset-x);
45
- --chip-shadow-offset-y: var(--joy-elevation-light-offset-y);
46
- --chip-shadow-spread: var(--joy-elevation-light-spread);
41
+ --chip-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
42
+ --chip-shadow-blur: var(--joy-elevation-light-light-blur-0);
43
+ --chip-shadow-color: var(--joy-elevation-light-light-color-0);
44
+ --chip-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
45
+ --chip-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
46
+ --chip-shadow-spread: var(--joy-elevation-light-light-spread-0);
47
47
  --chip-transition-duration: var(--mosaik-duration-short);
48
48
  --chip-transition-mode: ease;
49
49
  --chip-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow;
package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Joy.js CHANGED
@@ -37,12 +37,12 @@ export function colorEditorAlphaSliderElementJoyStyle() {
37
37
  --color-editor-alpha-slider-padding-left: unset;
38
38
  --color-editor-alpha-slider-padding-right: unset;
39
39
  --color-editor-alpha-slider-padding-top: unset;
40
- --color-editor-alpha-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);
41
- --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-blur);
42
- --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-color);
43
- --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
44
- --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
45
- --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-spread);
40
+ --color-editor-alpha-slider-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
41
+ --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
42
+ --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-light-color-0);
43
+ --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
44
+ --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
45
+ --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
46
46
  --color-editor-alpha-slider-thumb-background-color: var(--joy-scheme-highlight);
47
47
  --color-editor-alpha-slider-thumb-border-color: var(--joy-scheme-highlight);
48
48
  --color-editor-alpha-slider-thumb-border-radius: 50%;
package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Joy.js CHANGED
@@ -36,12 +36,12 @@ export function colorEditorAreaElementJoyStyle() {
36
36
  --color-editor-area-padding-left: unset;
37
37
  --color-editor-area-padding-right: unset;
38
38
  --color-editor-area-padding-top: unset;
39
- --color-editor-area-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);
40
- --color-editor-area-shadow-blur: var(--joy-elevation-light-blur);
41
- --color-editor-area-shadow-color: var(--joy-elevation-light-color);
42
- --color-editor-area-shadow-offset-x: var(--joy-elevation-light-offset-x);
43
- --color-editor-area-shadow-offset-y: var(--joy-elevation-light-offset-y);
44
- --color-editor-area-shadow-spread: var(--joy-elevation-light-spread);
39
+ --color-editor-area-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
40
+ --color-editor-area-shadow-blur: var(--joy-elevation-light-light-blur-0);
41
+ --color-editor-area-shadow-color: var(--joy-elevation-light-light-color-0);
42
+ --color-editor-area-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
43
+ --color-editor-area-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
44
+ --color-editor-area-shadow-spread: var(--joy-elevation-light-light-spread-0);
45
45
  --color-editor-area-thumb-border-color: var(--joy-scheme-surface);
46
46
  --color-editor-area-thumb-border-radius: 50%;
47
47
  --color-editor-area-thumb-border-width: var(--joy-layout-thickness);
package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Joy.js CHANGED
@@ -36,12 +36,12 @@ export function colorEditorHueSliderElementJoyStyle() {
36
36
  --color-editor-hue-slider-padding-left: unset;
37
37
  --color-editor-hue-slider-padding-right: unset;
38
38
  --color-editor-hue-slider-padding-top: unset;
39
- --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);
40
- --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-blur);
41
- --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-color);
42
- --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
43
- --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
44
- --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-spread);
39
+ --color-editor-hue-slider-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
40
+ --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
41
+ --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-light-color-0);
42
+ --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
43
+ --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
44
+ --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
45
45
  --color-editor-hue-slider-thumb-background-color: var(--joy-scheme-highlight);
46
46
  --color-editor-hue-slider-thumb-border-color: var(--joy-scheme-highlight);
47
47
  --color-editor-hue-slider-thumb-border-radius: 50%;
package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Joy.js CHANGED
@@ -36,12 +36,12 @@ export function colorEditorShadeSliderElementJoyStyle() {
36
36
  --color-editor-shade-slider-padding-left: unset;
37
37
  --color-editor-shade-slider-padding-right: unset;
38
38
  --color-editor-shade-slider-padding-top: unset;
39
- --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);
40
- --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-blur);
41
- --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-color);
42
- --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
43
- --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
44
- --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-spread);
39
+ --color-editor-shade-slider-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
40
+ --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
41
+ --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-light-color-0);
42
+ --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
43
+ --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
44
+ --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
45
45
  --color-editor-shade-slider-thumb-background-color: var(--joy-scheme-highlight);
46
46
  --color-editor-shade-slider-thumb-border-color: var(--joy-scheme-highlight);
47
47
  --color-editor-shade-slider-thumb-border-radius: 50%;
package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function dialogElementJoyStyle() {
32
32
  --dialog-padding-left: calc(var(--joy-layout-space) * 2);
33
33
  --dialog-padding-right: calc(var(--joy-layout-space) * 2);
34
34
  --dialog-padding-top: var(--joy-layout-space);
35
- --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);
36
- --dialog-shadow-blur: var(--joy-elevation-regular-blur);
37
- --dialog-shadow-color: var(--joy-elevation-regular-color);
38
- --dialog-shadow-offset-x: var(--joy-elevation-regular-offset-x);
39
- --dialog-shadow-offset-y: var(--joy-elevation-regular-offset-y);
40
- --dialog-shadow-spread: var(--joy-elevation-regular-spread);
35
+ --dialog-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
36
+ --dialog-shadow-blur: var(--joy-elevation-light-regular-blur-0);
37
+ --dialog-shadow-color: var(--joy-elevation-light-regular-color-0);
38
+ --dialog-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
39
+ --dialog-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
40
+ --dialog-shadow-spread: var(--joy-elevation-light-regular-spread-0);
41
41
  --dialog-transition-duration: var(--mosaik-duration-short);
42
42
  --dialog-transition-mode: ease;
43
43
  --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
package/Controls/Components/Overlays/MessageBox/Themes/MessageBoxElement.Joy.js CHANGED
@@ -40,12 +40,12 @@ export function messageBoxElementJoyStyle() {
40
40
  --message-box-padding-left: calc(var(--joy-layout-space) * 2);
41
41
  --message-box-padding-right: calc(var(--joy-layout-space) * 2);
42
42
  --message-box-padding-top: var(--joy-layout-space);
43
- --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);
44
- --message-box-shadow-blur: var(--joy-elevation-regular-blur);
45
- --message-box-shadow-color: var(--joy-elevation-regular-color);
46
- --message-box-shadow-offset-x: var(--joy-elevation-regular-offset-x);
47
- --message-box-shadow-offset-y: var(--joy-elevation-regular-offset-y);
48
- --message-box-shadow-spread: var(--joy-elevation-regular-spread);
43
+ --message-box-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
44
+ --message-box-shadow-blur: var(--joy-elevation-light-regular-blur-0);
45
+ --message-box-shadow-color: var(--joy-elevation-light-regular-color-0);
46
+ --message-box-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
47
+ --message-box-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
48
+ --message-box-shadow-spread: var(--joy-elevation-light-regular-spread-0);
49
49
  --message-box-sub-header-font-family: var(--joy-font-family);
50
50
  --message-box-sub-header-font-letter-spacing: var(--joy-typography-subtitle2-letter-spacing);
51
51
  --message-box-sub-header-font-line-height: var(--joy-typography-subtitle2-line-height);
package/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.js CHANGED
@@ -35,12 +35,12 @@ export function toastElementJoyStyle() {
35
35
  --toast-padding-top: var(--joy-layout-space);
36
36
  --toast-progress-fill-color: currentColor;
37
37
  --toast-progress-ring-fill-color: var(--joy-scheme-foreground);
38
- --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);
39
- --toast-shadow-blur: var(--joy-elevation-regular-blur);
40
- --toast-shadow-color: var(--joy-elevation-regular-color);
41
- --toast-shadow-offset-x: var(--joy-elevation-regular-offset-x);
42
- --toast-shadow-offset-y: var(--joy-elevation-regular-offset-y);
43
- --toast-shadow-spread: var(--joy-elevation-regular-spread);
38
+ --toast-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
39
+ --toast-shadow-blur: var(--joy-elevation-light-regular-blur-0);
40
+ --toast-shadow-color: var(--joy-elevation-light-regular-color-0);
41
+ --toast-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
42
+ --toast-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
43
+ --toast-shadow-spread: var(--joy-elevation-light-regular-spread-0);
44
44
  --toast-transition-duration: var(--mosaik-duration-short);
45
45
  --toast-transition-mode: ease;
46
46
  --toast-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Joy.js CHANGED
@@ -33,12 +33,12 @@ export function checkmarkElementJoyStyle() {
33
33
  --checkmark-padding-left: var(--joy-layout-space);
34
34
  --checkmark-padding-right: var(--joy-layout-space);
35
35
  --checkmark-padding-top: calc(var(--joy-layout-space) / 2);
36
- --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);
37
- --checkmark-shadow-blur: var(--joy-elevation-light-blur);
38
- --checkmark-shadow-color: var(--joy-elevation-light-color);
39
- --checkmark-shadow-offset-x: var(--joy-elevation-light-offset-x);
40
- --checkmark-shadow-offset-y: var(--joy-elevation-light-offset-y);
41
- --checkmark-shadow-spread: var(--joy-elevation-light-spread);
36
+ --checkmark-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
37
+ --checkmark-shadow-blur: var(--joy-elevation-light-light-blur-0);
38
+ --checkmark-shadow-color: var(--joy-elevation-light-light-color-0);
39
+ --checkmark-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
40
+ --checkmark-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
41
+ --checkmark-shadow-spread: var(--joy-elevation-light-light-spread-0);
42
42
  --checkmark-thickness: 2px;
43
43
  --checkmark-transition-duration: var(--mosaik-duration-short);
44
44
  --checkmark-transition-mode: ease;
package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function kbdElementJoyStyle() {
31
31
  --kbd-padding-left: calc(var(--joy-layout-space) / 2);
32
32
  --kbd-padding-right: calc(var(--joy-layout-space) / 2);
33
33
  --kbd-padding-top: calc(var(--joy-layout-space) / 2);
34
- --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);
35
- --kbd-shadow-blur: var(--joy-elevation-light-blur);
36
- --kbd-shadow-color: var(--joy-elevation-light-color);
37
- --kbd-shadow-offset-x: var(--joy-elevation-light-offset-x);
38
- --kbd-shadow-offset-y: var(--joy-elevation-light-offset-y);
39
- --kbd-shadow-spread: var(--joy-elevation-light-spread);
34
+ --kbd-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
35
+ --kbd-shadow-blur: var(--joy-elevation-light-light-blur-0);
36
+ --kbd-shadow-color: var(--joy-elevation-light-light-color-0);
37
+ --kbd-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
38
+ --kbd-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
39
+ --kbd-shadow-spread: var(--joy-elevation-light-light-spread-0);
40
40
  --kbd-transition-duration: unset;
41
41
  --kbd-transition-mode: unset;
42
42
  --kbd-transition-property: unset;
package/Controls/Components/Primitives/Pip/Themes/PipElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function pipElementJoyStyle() {
32
32
  --pip-padding-left: calc(var(--joy-layout-space) / 2);
33
33
  --pip-padding-right: calc(var(--joy-layout-space) / 2);
34
34
  --pip-padding-top: calc(var(--joy-layout-space) / 2);
35
- --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);
36
- --pip-shadow-blur: var(--joy-elevation-light-blur);
37
- --pip-shadow-color: var(--joy-elevation-light-color);
38
- --pip-shadow-offset-x: var(--joy-elevation-light-offset-x);
39
- --pip-shadow-offset-y: var(--joy-elevation-light-offset-y);
40
- --pip-shadow-spread: var(--joy-elevation-light-spread);
35
+ --pip-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
36
+ --pip-shadow-blur: var(--joy-elevation-light-light-blur-0);
37
+ --pip-shadow-color: var(--joy-elevation-light-light-color-0);
38
+ --pip-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
39
+ --pip-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
40
+ --pip-shadow-spread: var(--joy-elevation-light-light-spread-0);
41
41
  --pip-transition-duration: var(--mosaik-duration-short);
42
42
  --pip-transition-mode: ease;
43
43
  --pip-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Primitives/Popup/Themes/PopupElement.Joy.js CHANGED
@@ -31,12 +31,12 @@ export function popupElementJoyStyle() {
31
31
  --popup-padding-left: calc(var(--joy-layout-space) * 1.25);
32
32
  --popup-padding-right: calc(var(--joy-layout-space) * 1.25);
33
33
  --popup-padding-top: calc(var(--joy-layout-space) * 1);
34
- --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);
35
- --popup-shadow-blur: var(--joy-elevation-regular-blur);
36
- --popup-shadow-color: var(--joy-elevation-regular-color);
37
- --popup-shadow-offset-x: var(--joy-elevation-regular-offset-x);
38
- --popup-shadow-offset-y: var(--joy-elevation-regular-offset-y);
39
- --popup-shadow-spread: var(--joy-elevation-regular-spread);
34
+ --popup-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
35
+ --popup-shadow-blur: var(--joy-elevation-light-regular-blur-0);
36
+ --popup-shadow-color: var(--joy-elevation-light-regular-color-0);
37
+ --popup-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
38
+ --popup-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
39
+ --popup-shadow-spread: var(--joy-elevation-light-regular-spread-0);
40
40
  --popup-transition-duration: var(--mosaik-duration-short);
41
41
  --popup-transition-mode: ease;
42
42
  --popup-transition-property: background-color, border-color, box-shadow, color, transform, opacity;
package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function listingItemMarkerElementJoyStyle() {
32
32
  --listing-item-marker-padding-left: calc(var(--joy-layout-space) / 2);
33
33
  --listing-item-marker-padding-right: calc(var(--joy-layout-space) / 2);
34
34
  --listing-item-marker-padding-top: calc(var(--joy-layout-space) / 2);
35
- --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);
36
- --listing-item-marker-shadow-blur: var(--joy-elevation-light-blur);
37
- --listing-item-marker-shadow-color: var(--joy-elevation-light-color);
38
- --listing-item-marker-shadow-offset-x: var(--joy-elevation-light-offset-x);
39
- --listing-item-marker-shadow-offset-y: var(--joy-elevation-light-offset-y);
40
- --listing-item-marker-shadow-spread: var(--joy-elevation-light-spread);
35
+ --listing-item-marker-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
36
+ --listing-item-marker-shadow-blur: var(--joy-elevation-light-light-blur-0);
37
+ --listing-item-marker-shadow-color: var(--joy-elevation-light-light-color-0);
38
+ --listing-item-marker-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
39
+ --listing-item-marker-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
40
+ --listing-item-marker-shadow-spread: var(--joy-elevation-light-light-spread-0);
41
41
  --listing-item-marker-transition-duration: var(--mosaik-duration-short);
42
42
  --listing-item-marker-transition-mode: ease;
43
43
  --listing-item-marker-transition-property: background-color, color, border-color, opacity, box-shadow;
package/Controls/Components/Primitives/thumb/themes/ThumbElement.Joy.js CHANGED
@@ -30,12 +30,12 @@ export function thumbElementJoyStyle() {
30
30
  --thumb-padding-left: unset;
31
31
  --thumb-padding-right: unset;
32
32
  --thumb-padding-top: unset;
33
- --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);
34
- --thumb-shadow-blur: var(--joy-elevation-light-blur);
35
- --thumb-shadow-color: var(--joy-elevation-light-color);
36
- --thumb-shadow-offset-x: var(--joy-elevation-light-offset-x);
37
- --thumb-shadow-offset-y: var(--joy-elevation-light-offset-y);
38
- --thumb-shadow-spread: var(--joy-elevation-light-spread);
33
+ --thumb-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
34
+ --thumb-shadow-blur: var(--joy-elevation-light-light-blur-0);
35
+ --thumb-shadow-color: var(--joy-elevation-light-light-color-0);
36
+ --thumb-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
37
+ --thumb-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
38
+ --thumb-shadow-spread: var(--joy-elevation-light-light-spread-0);
39
39
  --thumb-transition-duration: var(--mosaik-duration-short);
40
40
  --thumb-transition-mode: ease;
41
41
  --thumb-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;
package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js CHANGED
@@ -63,7 +63,7 @@ export function scrubSliderElementJoyStyle() {
63
63
  --scrub-slider-tooltip-padding-left: var(--joy-layout-space);
64
64
  --scrub-slider-tooltip-padding-right: var(--joy-layout-space);
65
65
  --scrub-slider-tooltip-padding-top: var(--joy-layout-space);
66
- --scrub-slider-tooltip-shadow: var(--joy-elevation-light);
66
+ --scrub-slider-tooltip-shadow: var(--joy-elevation-light-light);
67
67
  --scrub-slider-tooltip-transition-duration: var(--mosaik-duration-short);
68
68
  --scrub-slider-tooltip-transition-mode: ease;
69
69
  --scrub-slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
package/Controls/Components/Ranges/Slider/Themes/SliderElement.Joy.js CHANGED
@@ -68,7 +68,7 @@ export function sliderElementJoyStyle() {
68
68
  --slider-tooltip-padding-left: var(--joy-layout-space);
69
69
  --slider-tooltip-padding-right: var(--joy-layout-space);
70
70
  --slider-tooltip-padding-top: var(--joy-layout-space);
71
- --slider-tooltip-shadow: var(--joy-elevation-light);
71
+ --slider-tooltip-shadow: var(--joy-elevation-light-light);
72
72
  --slider-tooltip-transition-duration: var(--mosaik-duration-short);
73
73
  --slider-tooltip-transition-mode: ease;
74
74
  --slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Joy.js CHANGED
@@ -32,12 +32,12 @@ export function segmentElementJoyStyle() {
32
32
  --segment-padding-left: var(--joy-layout-space);
33
33
  --segment-padding-right: var(--joy-layout-space);
34
34
  --segment-padding-top: var(--joy-layout-space);
35
- --segment-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
36
- --segment-shadow-blur: var(--joy-elevation-semilight-blur);
37
- --segment-shadow-color: var(--joy-elevation-semilight-color);
38
- --segment-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
39
- --segment-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
40
- --segment-shadow-spread: var(--joy-elevation-semilight-spread);
35
+ --segment-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
36
+ --segment-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
37
+ --segment-shadow-color: var(--joy-elevation-light-semilight-color-0);
38
+ --segment-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
39
+ --segment-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
40
+ --segment-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
41
41
  --segment-transition-duration: var(--joy-layout-transition);
42
42
  --segment-transition-mode: ease;
43
43
  --segment-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js CHANGED
@@ -34,12 +34,12 @@ export function tabElementJoyStyle() {
34
34
  --tab-padding-right: calc(var(--joy-layout-space) * 2);
35
35
  --tab-padding-top: var(--joy-layout-space);
36
36
  --tab-panel-background-color: var(--tab-background-color);
37
- --tab-shadow: var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color);
38
- --tab-shadow-blur: var(--joy-elevation-bold-blur);
39
- --tab-shadow-color: var(--joy-elevation-bold-color);
40
- --tab-shadow-offset-x: var(--joy-elevation-bold-offset-x);
41
- --tab-shadow-offset-y: var(--joy-elevation-bold-offset-y);
42
- --tab-shadow-spread: var(--joy-elevation-bold-spread);
37
+ --tab-shadow: var(--joy-elevation-light-bold-offset-x-0) var(--joy-elevation-light-bold-offset-y-0) var(--joy-elevation-light-bold-blur-0) var(--joy-elevation-light-bold-spread-0) var(--joy-elevation-light-bold-color-0);
38
+ --tab-shadow-blur: var(--joy-elevation-light-bold-blur-0);
39
+ --tab-shadow-color: var(--joy-elevation-light-bold-color-0);
40
+ --tab-shadow-offset-x: var(--joy-elevation-light-bold-offset-x-0);
41
+ --tab-shadow-offset-y: var(--joy-elevation-light-bold-offset-y-0);
42
+ --tab-shadow-spread: var(--joy-elevation-light-bold-spread-0);
43
43
  --tab-strip-background-color: var(--joy-scheme-transparent);
44
44
  --tab-strip-padding-bottom: 0;
45
45
  --tab-strip-padding-left: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@breadstone/mosaik-elements-foundation",
3
- "version": "0.1.23",
3
+ "version": "0.1.25",
4
4
  "description": "Mosaik elements components package.",
5
5
  "license": "MIT",
6
6
  "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
14
14
  "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
15
15
  },
16
16
  "dependencies": {
17
- "@breadstone/mosaik-elements": "0.1.23",
18
- "@breadstone/mosaik-themes": "0.1.23",
17
+ "@breadstone/mosaik-elements": "0.1.25",
18
+ "@breadstone/mosaik-themes": "0.1.25",
19
19
  "tslib": "2.8.1"
20
20
  },
21
21
  "peerDependencies": {