@breadstone/mosaik-elements-foundation 0.0.64 → 0.0.66

package/Controls/Components/Buttons/Anchor/Themes/AnchorElement.Joy.js

@@ -28,7 +28,7 @@ export function anchorElementJoyStyle() {
   --anchor-padding-left: unset;
   --anchor-padding-right: unset;
   --anchor-padding-top: unset;
-  --anchor-transition-duration: .2s;
+  --anchor-transition-duration: var(--joy-duration-short);
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: unset;

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js

@@ -39,7 +39,7 @@ export function buttonElementJoyStyle() {
   --button-progress-thickness: var(--joy-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-transition-duration: var(--joy-layout-transition);
+  --button-transition-duration: var(--joy-duration-short);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --button-translate: none;

package/Controls/Components/Buttons/Button/Themes/ButtonGroupElement.Joy.js

@@ -31,7 +31,7 @@ export function buttonGroupElementJoyStyle() {
   --button-group-padding-left: 0;
   --button-group-padding-right: 0;
   --button-group-padding-top: 0;
-  --button-group-transition-duration: .2s;
+  --button-group-transition-duration: var(--joy-duration-short);
   --button-group-transition-mode: ease;
   --button-group-transition-property: background-color, color, border-color, opacity;
   --button-group-translate: unset;

package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Joy.js

@@ -39,7 +39,7 @@ export function compoundButtonElementJoyStyle() {
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
   --compound-button-shadow: var(--joy-elevation-none);
-  --compound-button-transition-duration: .2s;
+  --compound-button-transition-duration: var(--joy-duration-short);
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --compound-button-translate: none;

package/Controls/Components/Buttons/DropDownButton/Themes/DropDownButtonElement.Joy.js

@@ -40,7 +40,7 @@ export function dropDownButtonElementJoyStyle() {
   --dropdown-button-ripple-duration: .2s;
   --dropdown-button-shadow: var(--joy-elevation-none);
   --dropdown-button-transform: none;
-  --dropdown-button-transition-duration: .2s;
+  --dropdown-button-transition-duration: var(--joy-duration-short);
   --dropdown-button-transition-mode: ease;
   --dropdown-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --dropdown-button-translate: unset;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Joy.js

@@ -38,7 +38,7 @@ export function floatingActionButtonElementJoyStyle() {
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
   --fab-shadow: var(--joy-elevation-none);
-  --fab-transition-duration: var(--joy-layout-transition);
+  --fab-transition-duration: var(--joy-duration-short);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-translate: unset;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonGroupElement.Joy.js

@@ -25,7 +25,7 @@ export function floatingActionButtonGroupElementJoyStyle() {
   --fab-group-padding-left: unset;
   --fab-group-padding-right: unset;
   --fab-group-padding-top: unset;
-  --fab-group-transition-duration: var(--joy-layout-transition);
+  --fab-group-transition-duration: var(--joy-duration-short);
   --fab-group-transition-mode: ease;
   --fab-group-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-group-translate: unset;

package/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.Joy.js

@@ -39,7 +39,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-ripple-color: unset;
   --repeat-button-ripple-duration: .2s;
   --repeat-button-shadow: var(--joy-elevation-none);
-  --repeat-button-transition-duration: .2s;
+  --repeat-button-transition-duration: var(--joy-duration-short);
   --repeat-button-transition-mode: ease;
   --repeat-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --repeat-button-translate: unset;

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.js

@@ -39,7 +39,7 @@ export function splitButtonElementJoyStyle() {
   --split-button-ripple-color: unset;
   --split-button-ripple-duration: .2s;
   --split-button-shadow: var(--joy-elevation-none);
-  --split-button-transition-duration: .2s;
+  --split-button-transition-duration: var(--joy-duration-short);
   --split-button-transition-mode: ease;
   --split-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --split-button-translate: unset;

package/Controls/Components/Buttons/ToggleButton/Themes/ToggleButtonElement.Joy.js

@@ -40,7 +40,7 @@ export function toggleButtonElementJoyStyle() {
   --toggle-button-ripple-color: unset;
   --toggle-button-ripple-duration: .2s;
   --toggle-button-shadow: var(--joy-elevation-none);
-  --toggle-button-transition-duration: .2s;
+  --toggle-button-transition-duration: var(--joy-duration-short);
   --toggle-button-transition-mode: ease;
   --toggle-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --toggle-button-translate: none;

package/Controls/Components/Grouping/Banner/Themes/BannerElement.Joy.js

@@ -32,7 +32,7 @@ export function bannerElementJoyStyle() {
   --banner-padding-right: calc(var(--joy-layout-space) * 2);
   --banner-padding-top: calc(var(--joy-layout-space) * 2);
   --banner-shadow: var(--joy-elevation-none);
-  --banner-transition-duration: .2s;
+  --banner-transition-duration: var(--joy-duration-short);
   --banner-transition-mode: ease;
   --banner-transition-property: all;
   --banner-translate: unset;

package/Controls/Components/Grouping/Card/Themes/CardElement.Joy.js

@@ -37,7 +37,7 @@ export function cardElementJoyStyle() {
   --card-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
   --card-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
   --card-shadow-spread: var(--joy-elevation-light-spread-0);
-  --card-transition-duration: .2s;
+  --card-transition-duration: var(--joy-duration-short);
   --card-transition-mode: ease;
   --card-transition-property: background-color, color, border-color, box-shadow;
   --card-translate: unset;

package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Joy.js

@@ -35,7 +35,7 @@ export function expanderElementJoyStyle() {
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
   --expander-shadow: var(--joy-elevation-light);
-  --expander-transition-duration: .2s;
+  --expander-transition-duration: var(--joy-duration-short);
   --expander-transition-mode: ease;
   --expander-transition-property: background-color, color, border-color, opacity, box-shadow, transform, margin;
   --expander-translate: unset;

package/Controls/Components/Grouping/Expander/Themes/ExpanderGroupElement.Joy.js

@@ -32,7 +32,7 @@ export function expanderGroupElementJoyStyle() {
   --expander-group-padding-right: 0;
   --expander-group-padding-top: 0;
   --expander-group-shadow: var(--joy-elevation-none);
-  --expander-group-transition-duration: .2s;
+  --expander-group-transition-duration: var(--joy-duration-short);
   --expander-group-transition-mode: ease-out;
   --expander-group-transition-property: margin;
   --expander-group-translate: unset;

package/Controls/Components/Grouping/Toolbar/Themes/ToolbarElement.Joy.js

@@ -38,7 +38,7 @@ export function toolbarElementJoyStyle() {
   --toolbar-shadow-offset-x: unset;
   --toolbar-shadow-offset-y: unset;
   --toolbar-shadow-spread: unset;
-  --toolbar-transition-duration: .2s;
+  --toolbar-transition-duration: var(--joy-duration-short);
   --toolbar-transition-mode: ease;
   --toolbar-transition-property: all;
   --toolbar-translate: unset;

package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js

@@ -32,7 +32,7 @@ export function calendarElementJoyStyle() {
   --calendar-padding-left: calc(var(--joy-layout-space) * 2);
   --calendar-padding-right: calc(var(--joy-layout-space) * 2);
   --calendar-padding-top: var(--joy-layout-space);
-  --calendar-transition-duration: .2s;
+  --calendar-transition-duration: var(--joy-duration-short);
   --calendar-transition-mode: ease;
   --calendar-transition-property: background-color, color, border-color, opacity;
   --calendar-translate: unset;

package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js

@@ -37,7 +37,7 @@ export function calendarItemElementJoyStyle() {
   --calendar-item-padding-top: var(--joy-layout-space);
   --calendar-item-ripple-color: unset;
   --calendar-item-ripple-duration: .2s;
-  --calendar-item-transition-duration: .2s;
+  --calendar-item-transition-duration: var(--joy-duration-short);
   --calendar-item-transition-mode: ease;
   --calendar-item-transition-property: background-color, color, border-color, opacity;
   --calendar-item-translate: unset;

package/Controls/Components/Inputs/CheckBox/Themes/CheckBoxElement.Joy.js

@@ -32,7 +32,7 @@ export function checkBoxElementJoyStyle() {
   --checkbox-padding-right: 12px;
   --checkbox-padding-top: 8px;
   --checkbox-shadow: var(--joy-elevation-none);
-  --checkbox-transition-duration: .2s;
+  --checkbox-transition-duration: var(--joy-duration-short);
   --checkbox-transition-mode: ease;
   --checkbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --checkbox-translate: unset;

package/Controls/Components/Inputs/Choice/Themes/ChoiceElement.Joy.js

@@ -32,7 +32,7 @@ export function choiceElementJoyStyle() {
   --choice-padding-right: calc(var(--joy-layout-space) * 2);
   --choice-padding-top: var(--joy-layout-space);
   --choice-shadow: var(--joy-elevation-none);
-  --choice-transition-duration: .2s;
+  --choice-transition-duration: var(--joy-duration-short);
   --choice-transition-mode: ease;
   --choice-transition-property: background-color, color, border-color, box-shadow;
   --choice-translate: unset;

package/Controls/Components/Inputs/ColorBox/Themes/ColorBoxElement.Joy.js

@@ -34,7 +34,7 @@ export function colorBoxElementJoyStyle() {
   --colorbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --colorbox-padding-top: var(--joy-layout-space);
   --colorbox-shadow: var(--joy-elevation-none);
-  --colorbox-transition-duration: .2s;
+  --colorbox-transition-duration: var(--joy-duration-short);
   --colorbox-transition-mode: ease;
   --colorbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --colorbox-translate: unset;

package/Controls/Components/Inputs/DateBox/Themes/DateBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function dateBoxElementJoyStyle() {
   --datebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --datebox-padding-top: var(--joy-layout-space);
   --datebox-shadow: unset;
-  --datebox-transition-duration: .2s;
+  --datebox-transition-duration: var(--joy-duration-short);
   --datebox-transition-mode: ease;
   --datebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --datebox-translate: unset;

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --datetimebox-padding-top: var(--joy-layout-space);
   --datetimebox-shadow: unset;
-  --datetimebox-transition-duration: .2s;
+  --datetimebox-transition-duration: var(--joy-duration-short);
   --datetimebox-transition-mode: ease;
   --datetimebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --datetimebox-translate: unset;

package/Controls/Components/Inputs/NumberBox/Themes/NumberBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function numberBoxElementJoyStyle() {
   --numberbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --numberbox-padding-top: var(--joy-layout-space);
   --numberbox-shadow: unset;
-  --numberbox-transition-duration: .2s;
+  --numberbox-transition-duration: var(--joy-duration-short);
   --numberbox-transition-mode: ease;
   --numberbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --numberbox-translate: unset;

package/Controls/Components/Inputs/PasswordBox/Themes/PasswordBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function passwordBoxElementJoyStyle() {
   --passwordbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --passwordbox-padding-top: var(--joy-layout-space);
   --passwordbox-shadow: unset;
-  --passwordbox-transition-duration: .2s;
+  --passwordbox-transition-duration: var(--joy-duration-short);
   --passwordbox-transition-mode: ease;
   --passwordbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --passwordbox-translate: unset;

package/Controls/Components/Inputs/PinBox/Themes/PinBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function pinBoxElementJoyStyle() {
   --pinbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --pinbox-padding-top: var(--joy-layout-space);
   --pinbox-shadow: var(--joy-elevation-none);
-  --pinbox-transition-duration: .2s;
+  --pinbox-transition-duration: var(--joy-duration-short);
   --pinbox-transition-mode: ease;
   --pinbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --pinbox-translate: unset;

package/Controls/Components/Inputs/Radio/Themes/RadioElement.Joy.js

@@ -32,7 +32,7 @@ export function radioElementJoyStyle() {
   --radio-padding-right: 12px;
   --radio-padding-top: 8px;
   --radio-shadow: unset;
-  --radio-transition-duration: .2s;
+  --radio-transition-duration: var(--joy-duration-short);
   --radio-transition-mode: ease;
   --radio-transition-property: all;
   --radio-translate: unset;

package/Controls/Components/Inputs/RichTextBox/Themes/RichTextBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function richTextBoxElementJoyStyle() {
   --richtextbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --richtextbox-padding-top: var(--joy-layout-space);
   --richtextbox-shadow: unset;
-  --richtextbox-transition-duration: .2s;
+  --richtextbox-transition-duration: var(--joy-duration-short);
   --richtextbox-transition-mode: ease;
   --richtextbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --richtextbox-translate: unset;

package/Controls/Components/Inputs/SearchBox/Themes/SearchBoxElement.Joy.js

@@ -37,7 +37,7 @@ export function searchBoxElementJoyStyle() {
   --searchbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --searchbox-padding-top: var(--joy-layout-space);
   --searchbox-shadow: var(--joy-elevation-none);
-  --searchbox-transition-duration: .2s;
+  --searchbox-transition-duration: var(--joy-duration-short);
   --searchbox-transition-mode: ease;
   --searchbox-transition-property: all;
   --searchbox-translate: unset;

package/Controls/Components/Inputs/Select/Themes/SelectElement.Joy.js

@@ -32,7 +32,7 @@ export function selectElementJoyStyle() {
   --select-padding-right: 12px;
   --select-padding-top: 8px;
   --select-shadow: unset;
-  --select-transition-duration: .2s;
+  --select-transition-duration: var(--joy-duration-short);
   --select-transition-mode: ease;
   --select-transition-property: all;
   --select-translate: unset;

package/Controls/Components/Inputs/Select/Themes/SelectItemElement.Joy.js

@@ -38,7 +38,7 @@ export function selectItemElementJoyStyle() {
   --select-item-ripple-color: unset;
   --select-item-ripple-duration: .2s;
   --select-item-shadow: var(--joy-elevation-none);
-  --select-item-transition-duration: .2s;
+  --select-item-transition-duration: var(--joy-duration-short);
   --select-item-transition-mode: ease;
   --select-item-transition-property: all;
   --select-item-translate: unset;

package/Controls/Components/Inputs/Select/Themes/SelectItemGroupElement.Joy.js

@@ -32,7 +32,7 @@ export function selectItemGroupElementJoyStyle() {
   --select-item-group-padding-right: 16px;
   --select-item-group-padding-top: 8px;
   --select-item-group-shadow: var(--joy-elevation-none);
-  --select-item-group-transition-duration: .2s;
+  --select-item-group-transition-duration: var(--joy-duration-short);
   --select-item-group-transition-mode: ease;
   --select-item-group-transition-property: all;
   --select-item-group-translate: unset;

package/Controls/Components/Inputs/SignaturePad/Themes/SignaturePadElement.Joy.js

@@ -32,7 +32,7 @@ export function signaturePadElementJoyStyle() {
   --signaturepad-padding-right: unset;
   --signaturepad-padding-top: unset;
   --signaturepad-shadow: unset;
-  --signaturepad-transition-duration: .2s;
+  --signaturepad-transition-duration: var(--joy-duration-short);
   --signaturepad-transition-mode: ease;
   --signaturepad-transition-property: all;
   --signaturepad-translate: unset;

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js

@@ -34,7 +34,7 @@ export function textBoxElementJoyStyle() {
   --textbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --textbox-padding-top: var(--joy-layout-space);
   --textbox-shadow: var(--joy-elevation-none);
-  --textbox-transition-duration: .2s;
+  --textbox-transition-duration: var(--joy-duration-short);
   --textbox-transition-mode: ease;
   --textbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --textbox-translate: unset;

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.js

@@ -33,7 +33,7 @@ export function timeBoxElementJoyStyle() {
   --timebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --timebox-padding-top: var(--joy-layout-space);
   --timebox-shadow: unset;
-  --timebox-transition-duration: .2s;
+  --timebox-transition-duration: var(--joy-duration-short);
   --timebox-transition-mode: ease;
   --timebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --timebox-translate: unset;

package/Controls/Components/Layouts/Page/Themes/PageMenuElement.Joy.js

@@ -34,7 +34,7 @@ export function pageMenuElementJoyStyle() {
   --page-menu-padding-right: 12px;
   --page-menu-padding-top: 8px;
   --page-menu-shadow: var(--joy-elevation-none);
-  --page-menu-transition-duration: .2s;
+  --page-menu-transition-duration: var(--joy-duration-short);
   --page-menu-transition-mode: ease;
   --page-menu-transition-property: all;
   --page-menu-translate: unset;

package/Controls/Components/Media/Avatar/Themes/AvatarElement.Joy.js

@@ -42,7 +42,7 @@ export function avatarElementJoyStyle() {
   --avatar-shadow-offset-x: unset;
   --avatar-shadow-offset-y: unset;
   --avatar-shadow-spread: unset;
-  --avatar-transition-duration: .2s;
+  --avatar-transition-duration: var(--joy-duration-short);
   --avatar-transition-mode: ease;
   --avatar-transition-property: background-color, color, border-color, opacity, box-shadow;
   --avatar-translate: unset;

package/Controls/Components/Media/Avatar/Themes/AvatarGroupElement.Joy.js

@@ -36,7 +36,7 @@ export function avatarGroupElementJoyStyle() {
   --avatar-group-shadow-offset-x: unset;
   --avatar-group-shadow-offset-y: unset;
   --avatar-group-shadow-spread: unset;
-  --avatar-group-transition-duration: .2s;
+  --avatar-group-transition-duration: var(--joy-duration-short);
   --avatar-group-transition-mode: ease;
   --avatar-group-transition-property: margin-left;
   --avatar-group-translate: unset;

package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js

@@ -32,7 +32,7 @@ export function badgeElementJoyStyle() {
   --badge-padding-right: 8px;
   --badge-padding-top: 4px;
   --badge-size: unset;
-  --badge-transition-duration: .2s;
+  --badge-transition-duration: var(--joy-duration-short);
   --badge-transition-mode: ease;
   --badge-transition-property: background-color, color, border-color, opacity, box-shadow;
   --badge-translate: unset;

package/Controls/Components/Media/Chat/Themes/ChatElement.Joy.js

@@ -32,7 +32,7 @@ export function chatElementJoyStyle() {
   --chat-padding-right: calc(var(--joy-layout-space) * 2);
   --chat-padding-top: var(--joy-layout-space);
   --chat-shadow: 0;
-  --chat-transition-duration: .2s;
+  --chat-transition-duration: var(--joy-duration-short);
   --chat-transition-mode: ease;
   --chat-transition-property: all;
   --chat-translate: unset;

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js

@@ -32,7 +32,7 @@ export function chatMessageElementJoyStyle() {
   --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
   --chat-message-padding-top: var(--joy-layout-space);
   --chat-message-shadow: 0;
-  --chat-message-transition-duration: .2s;
+  --chat-message-transition-duration: var(--joy-duration-short);
   --chat-message-transition-mode: ease;
   --chat-message-transition-property: all;
   --chat-message-translate: unset;

package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js

@@ -39,7 +39,7 @@ export function chipElementJoyStyle() {
   --chip-ripple-color: unset;
   --chip-ripple-duration: .2s;
   --chip-shadow: var(--joy-elevation-none);
-  --chip-transition-duration: .2s;
+  --chip-transition-duration: var(--joy-duration-short);
   --chip-transition-mode: ease;
   --chip-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chip-translate: unset;

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

@@ -32,7 +32,7 @@ export function colorPickerElementJoyStyle() {
   --color-picker-padding-right: unset;
   --color-picker-padding-top: unset;
   --color-picker-size: 24px;
-  --color-picker-transition-duration: .2s;
+  --color-picker-transition-duration: var(--joy-duration-short);
   --color-picker-transition-mode: ease;
   --color-picker-transition-property: all;
   --color-picker-translate: unset;

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

@@ -32,7 +32,7 @@ export function colorSwatchElementJoyStyle() {
   --color-swatch-padding-right: unset;
   --color-swatch-padding-top: unset;
   --color-swatch-size: 24px;
-  --color-swatch-transition-duration: .2s;
+  --color-swatch-transition-duration: var(--joy-duration-short);
   --color-swatch-transition-mode: ease;
   --color-swatch-transition-property: all;
   --color-swatch-translate: unset;

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

@@ -32,7 +32,7 @@ export function colorSwatchGroupElementJoyStyle() {
   --color-swatch-group-padding-right: 8px;
   --color-swatch-group-padding-top: 4px;
   --color-swatch-group-shadow: unset;
-  --color-swatch-group-transition-duration: .2s;
+  --color-swatch-group-transition-duration: var(--joy-duration-short);
   --color-swatch-group-transition-mode: ease;
   --color-swatch-group-transition-property: margin-left;
   --color-swatch-group-translate: unset;

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

@@ -32,7 +32,7 @@ export function colorThumbElementJoyStyle() {
   --color-thumb-padding-right: unset;
   --color-thumb-padding-top: unset;
   --color-thumb-size: 24px;
-  --color-thumb-transition-duration: .2s;
+  --color-thumb-transition-duration: var(--joy-duration-short);
   --color-thumb-transition-mode: ease;
   --color-thumb-transition-property: all;
   --color-thumb-translate: unset;

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

@@ -33,7 +33,7 @@ export function iconElementJoyStyle() {
   --icon-padding-top: 4px;
   --icon-shadow: unset;
   --icon-size: unset;
-  --icon-transition-duration: .2s;
+  --icon-transition-duration: var(--joy-duration-short);
   --icon-transition-mode: ease;
   --icon-transition-property: all;
   --icon-translate: unset;

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

@@ -40,7 +40,7 @@ export function imageElementJoyStyle() {
   --image-padding-right: 16px;
   --image-padding-top: 16px;
   --image-shadow: unset;
-  --image-transition-duration: .2s;
+  --image-transition-duration: var(--joy-duration-short);
   --image-transition-mode: ease;
   --image-transition-property: color, background-color, border-color, opacity, box-shadow;
   --image-translate: unset;

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

@@ -33,7 +33,7 @@ export function personaElementJoyStyle() {
   --persona-padding-top: 4px;
   --persona-presence-color: unset;
   --persona-shadow: unset;
-  --persona-transition-duration: .2s;
+  --persona-transition-duration: var(--joy-duration-short);
   --persona-transition-mode: ease;
   --persona-transition-property: background-color, color, border-color, opacity, box-shadow;
   --persona-translate: unset;

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

@@ -40,7 +40,7 @@ export function videoElementJoyStyle() {
   --video-padding-right: 16px;
   --video-padding-top: 16px;
   --video-shadow: unset;
-  --video-transition-duration: .2s;
+  --video-transition-duration: var(--joy-duration-short);
   --video-transition-mode: ease;
   --video-transition-property: color, background-color, border-color, opacity, box-shadow;
   --video-translate: unset;

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

@@ -37,7 +37,7 @@ export function dialogElementJoyStyle() {
   --dialog-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
   --dialog-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
   --dialog-shadow-spread: var(--joy-elevation-light-spread-0);
-  --dialog-transition-duration: .2s;
+  --dialog-transition-duration: var(--joy-duration-short);
   --dialog-transition-mode: ease;
   --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --dialog-translate: unset;

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

@@ -33,7 +33,7 @@ export function drawerElementJoyStyle() {
   --drawer-padding-right: 16px;
   --drawer-padding-top: 8px;
   --drawer-shadow: var(--joy-elevation-none);
-  --drawer-transition-duration: .2s;
+  --drawer-transition-duration: var(--joy-duration-short);
   --drawer-transition-mode: ease;
   --drawer-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --drawer-translate: unset;

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

@@ -33,7 +33,7 @@ export function toastElementJoyStyle() {
   --tost-padding-right: 16px;
   --tost-padding-top: 8px;
   --tost-shadow: var(--joy-elevation-bold);
-  --tost-transition-duration: .2s;
+  --tost-transition-duration: var(--joy-duration-short);
   --tost-transition-mode: ease;
   --tost-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --tost-translate: unset;

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

@@ -26,7 +26,7 @@ export function backdropElementJoyStyle() {
   --backdrop-padding-left: unset;
   --backdrop-padding-right: unset;
   --backdrop-padding-top: unset;
-  --backdrop-transition-duration: .2s;
+  --backdrop-transition-duration: var(--joy-duration-short);
   --backdrop-transition-mode: ease;
   --backdrop-transition-property: opacity, backdrop-filter;
   --backdrop-translate: unset;

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

@@ -35,7 +35,7 @@ export function checkmarkElementJoyStyle() {
   --checkmark-padding-top: 4px;
   --checkmark-shadow: var(--joy-elevation-none);
   --checkmark-thickness: 2px;
-  --checkmark-transition-duration: .2s;
+  --checkmark-transition-duration: var(--joy-duration-short);
   --checkmark-transition-mode: ease;
   --checkmark-transition-property: background-color, color;
   --checkmark-translate: unset;

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

@@ -29,7 +29,7 @@ export function dividerElementJoyStyle() {
   --divider-padding-top: 4px;
   --divider-shadow: var(--joy-elevation-none);
   --divider-thickness: var(--joy-layout-thickness);
-  --divider-transition-duration: .2s;
+  --divider-transition-duration: var(--joy-duration-short);
   --divider-transition-mode: ease;
   --divider-transition-property: background-color, color;
   --divider-translate: unset;

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

@@ -33,7 +33,7 @@ export function dotElementJoyStyle() {
   --dot-padding-top: 0px;
   --dot-shadow: unset;
   --dot-size: 16px;
-  --dot-transition-duration: .2s;
+  --dot-transition-duration: var(--joy-duration-short);
   --dot-transition-mode: ease;
   --dot-transition-property: all;
   --dot-translate: unset;

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

@@ -32,7 +32,7 @@ export function errorElementJoyStyle() {
   --error-padding-right: unset;
   --error-padding-top: unset;
   --error-shadow: var(--joy-elevation-none);
-  --error-transition-duration: .2s;
+  --error-transition-duration: var(--joy-duration-short);
   --error-transition-mode: ease;
   --error-transition-property: all;
   --error-translate: unset;

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

@@ -35,7 +35,7 @@ export function floatingElementJoyStyle() {
   --floating-padding-right: 0px;
   --floating-padding-top: 0px;
   --floating-shadow: var(--joy-elevation-light);
-  --floating-transition-duration: .2s;
+  --floating-transition-duration: var(--joy-duration-short);
   --floating-transition-mode: ease;
   --floating-transition-property: background-color, color, border-color, opacity, box-shadow;
   --floating-translate: unset;

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

@@ -36,7 +36,7 @@ export function focusRingElementJoyStyle() {
   --focus-ring-padding-top: unset;
   --focus-ring-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color);
   --focus-ring-shape: 6px;
-  --focus-ring-transition-duration: .2s;
+  --focus-ring-transition-duration: var(--joy-duration-short);
   --focus-ring-transition-mode: ease;
   --focus-ring-transition-property: all;
   --focus-ring-translate: unset;

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

@@ -32,7 +32,7 @@ export function hintElementJoyStyle() {
   --hint-padding-right: unset;
   --hint-padding-top: unset;
   --hint-shadow: var(--joy-elevation-none);
-  --hint-transition-duration: .2s;
+  --hint-transition-duration: var(--joy-duration-short);
   --hint-transition-mode: ease;
   --hint-transition-property: all;
   --hint-translate: unset;