npm - @breadstone/mosaik-themes - Versions diffs - 0.0.64 → 0.0.66 - Mend

@breadstone/mosaik-themes 0.0.64 → 0.0.66

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 (4) hide show

package/Themes/cosmopolitan.scss CHANGED Viewed

@@ -953,6 +953,7 @@ $app-props: (
   'font-weight': var(--cosmopolitan-typography-body1-font-weight),
   'foreground-color': var(--cosmopolitan-scheme-foreground),
   'gap': var(--cosmopolitan-layout-space),
+  'line-thickness': var(--cosmopolitan-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
@@ -977,6 +978,7 @@ $app-header-props: (
   'font-weight': var(--cosmopolitan-typography-headline6-font-weight),
   'foreground-color': var(--cosmopolitan-scheme-foreground),
   'gap': var(--cosmopolitan-layout-space),
+  'line-thickness': var(--cosmopolitan-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,

package/Themes/joy.scss CHANGED Viewed

@@ -891,6 +891,19 @@ $_color-dark: (
     @include _scrollbar-style($prefix);
     @include _selection-style($prefix);
 }
+@mixin duration-style($prefix) {
+    $durations: (
+        'short': $duration-short,
+        'medium': $duration-medium,
+        'long': $duration-long
+    );
+    :root,
+    :host {
+        @each $key, $value in $durations {
+            --#{$prefix}-duration-#{$key}: #{$value};
+        }
+    }
+}
 @function get-duration($duration) {
     @return var(--#{$name}-duration-#{$duration});
 }
@@ -1127,7 +1140,7 @@ $_shadows-dark: (
     }
     @return var(map.get(map.get($elevations, $mode), $type));
 }
-@mixin layout-style($prefix, $radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space, $transition: $duration-short) {
+@mixin layout-style($prefix, $radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $layouts: ();
     $layouts: map.merge(
         $layouts,
@@ -1147,12 +1160,6 @@ $_shadows-dark: (
             '#{$prefix}-layout-space': $space
         )
     );
-    $layouts: map.merge(
-        $layouts,
-        (
-            '#{$prefix}-layout-transition': $transition
-        )
-    );
     @if list.length($layouts) {
         :root,
         :host {
@@ -1456,6 +1463,7 @@ $_scheme-dark: (
 @mixin joy-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $theme: 'joy';
     @include layout-style($theme, $radius, $thickness, $space);
+    @include duration-style($theme);
     @include scheme-style($theme);
     @include color-style($theme);
     @include elevation-style($theme);
@@ -1553,7 +1561,7 @@ $anchor-props: (
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -1569,11 +1577,12 @@ $app-props: (
   'font-weight': var(--joy-typography-body1-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'line-thickness': var(--joy-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': unset
@@ -1593,11 +1602,12 @@ $app-header-props: (
   'font-weight': var(--joy-typography-headline6-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'line-thickness': var(--joy-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': unset
@@ -1662,7 +1672,7 @@ $avatar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -1691,7 +1701,7 @@ $avatar-group-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': margin-left,
   'translate': unset
@@ -1728,7 +1738,7 @@ $backdrop-props: (
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (opacity, backdrop-filter),
   'translate': unset
@@ -1753,7 +1763,7 @@ $badge-props: (
   'padding-right': 8px,
   'padding-top': 4px,
   'size': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -1778,7 +1788,7 @@ $banner-props: (
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': calc(var(--joy-layout-space) * 2),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -1936,7 +1946,7 @@ $button-props: (
   'progress-thickness': var(--joy-layout-thickness),
   'ripple-color': unset,
   'ripple-duration': 200ms,
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': none,
@@ -1961,7 +1971,7 @@ $button-group-props: (
   'padding-left': 0,
   'padding-right': 0,
   'padding-top': 0,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity),
   'translate': unset
@@ -1986,7 +1996,7 @@ $calendar-props: (
   'padding-left': calc(var(--joy-layout-space) * 2),
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': var(--joy-layout-space),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity),
   'translate': unset
@@ -2058,7 +2068,7 @@ $calendar-item-props: (
   'padding-top': var(--joy-layout-space),
   'ripple-color': unset,
   'ripple-duration': 200ms,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity),
   'translate': unset
@@ -2171,7 +2181,7 @@ $card-props: (
   'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
   'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
   'shadow-spread': var(--joy-elevation-light-spread-0),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, box-shadow),
   'translate': unset
@@ -2451,7 +2461,7 @@ $chat-props: (
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': var(--joy-layout-space),
   'shadow': 0,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -2539,7 +2549,7 @@ $chat-message-props: (
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': var(--joy-layout-space),
   'shadow': 0,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -2600,7 +2610,7 @@ $check-box-props: (
   'padding-right': 12px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -2653,7 +2663,7 @@ $checkmark-props: (
   'padding-top': 4px,
   'shadow': var(--joy-elevation-none),
   'thickness': 2px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color),
   'translate': unset,
@@ -2686,7 +2696,7 @@ $chip-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -2737,7 +2747,7 @@ $choice-props: (
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, box-shadow),
   'translate': unset
@@ -2851,7 +2861,7 @@ $color-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -2876,7 +2886,7 @@ $color-picker-props: (
   'padding-right': unset,
   'padding-top': unset,
   'size': 24px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -2926,7 +2936,7 @@ $color-swatch-props: (
   'padding-right': unset,
   'padding-top': unset,
   'size': 24px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -2951,7 +2961,7 @@ $color-swatch-group-props: (
   'padding-right': 8px,
   'padding-top': 4px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': margin-left,
   'translate': unset
@@ -2976,7 +2986,7 @@ $color-thumb-props: (
   'padding-right': unset,
   'padding-top': unset,
   'size': 24px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -3025,7 +3035,7 @@ $combo-item-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -3077,7 +3087,7 @@ $compound-button-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': none,
@@ -3176,7 +3186,7 @@ $date-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -3202,7 +3212,7 @@ $date-time-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -3232,7 +3242,7 @@ $dialog-props: (
   'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
   'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
   'shadow-spread': var(--joy-elevation-light-spread-0),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
   'translate': unset
@@ -3404,7 +3414,7 @@ $divider-props: (
   'padding-top': 4px,
   'shadow': var(--joy-elevation-none),
   'thickness': var(--joy-layout-thickness),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color),
   'translate': unset
@@ -3430,7 +3440,7 @@ $dot-props: (
   'padding-top': 0px,
   'shadow': unset,
   'size': 16px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -3456,7 +3466,7 @@ $drawer-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
   'translate': unset,
@@ -3526,7 +3536,7 @@ $drop-down-button-props: (
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
   'transform': none,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -3792,7 +3802,7 @@ $error-props: (
   'padding-right': unset,
   'padding-top': unset,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -3864,7 +3874,7 @@ $expander-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-light),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, transform, margin),
   'translate': unset
@@ -3889,7 +3899,7 @@ $expander-group-props: (
   'padding-right': 0,
   'padding-top': 0,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease-out,
   'transition-property': margin,
   'translate': unset
@@ -4052,7 +4062,7 @@ $floating-props: (
   'padding-right': 0px,
   'padding-top': 0px,
   'shadow': var(--joy-elevation-light),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -4083,7 +4093,7 @@ $floating-action-button-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': unset
@@ -4101,7 +4111,7 @@ $floating-action-button-group-props: (
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': unset
@@ -4148,7 +4158,7 @@ $focus-ring-props: (
   'padding-top': unset,
   'shadow': var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color),
   'shape': 6px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset,
@@ -4329,7 +4339,7 @@ $hint-props: (
   'padding-right': unset,
   'padding-top': unset,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4355,7 +4365,7 @@ $icon-props: (
   'padding-top': 4px,
   'shadow': unset,
   'size': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4388,7 +4398,7 @@ $image-props: (
   'padding-right': 16px,
   'padding-top': 16px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (color, background-color, border-color, opacity, box-shadow),
   'translate': unset
@@ -4413,7 +4423,7 @@ $indicator-props: (
   'padding-right': unset,
   'padding-top': unset,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4461,7 +4471,7 @@ $jumbotron-props: (
   'padding-right': 32px,
   'padding-top': 32px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4589,7 +4599,7 @@ $list-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4620,7 +4630,7 @@ $list-item-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4645,7 +4655,7 @@ $list-item-group-props: (
   'padding-right': 0px,
   'padding-top': 0px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -4709,7 +4719,7 @@ $menu-props: (
   'padding-right': calc(var(--joy-layout-spacing) * 2),
   'padding-top': var(--joy-layout-spacing),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, box-shadow),
   'translate': unset
@@ -4744,7 +4754,7 @@ $menu-item-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -4776,7 +4786,7 @@ $menu-item-group-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, box-shadow),
   'translate': unset
@@ -4848,7 +4858,7 @@ $number-props: (
   'padding-left': 0px,
   'padding-right': 0px,
   'padding-top': 0px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (color, opacity, box-shadow),
   'translate': unset
@@ -4874,7 +4884,7 @@ $number-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -4892,7 +4902,7 @@ $number-counter-props: (
   'padding-left': 0px,
   'padding-right': 0px,
   'padding-top': 0px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (color, opacity, box-shadow),
   'translate': unset
@@ -4981,7 +4991,7 @@ $page-menu-props: (
   'padding-right': 12px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5064,7 +5074,7 @@ $password-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5109,7 +5119,7 @@ $persona-props: (
   'padding-top': 4px,
   'presence-color': unset,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5153,7 +5163,7 @@ $pin-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5182,7 +5192,7 @@ $popup-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset,
-  'transition-duration': 200ms,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, border-color, box-shadow, color, transform),
   'translate': unset
@@ -5262,7 +5272,7 @@ $progress-ring-props: (
   'padding-right': 8px,
   'padding-top': 4px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5307,7 +5317,7 @@ $radio-props: (
   'padding-right': 12px,
   'padding-top': 8px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5389,7 +5399,7 @@ $repeat-button-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5439,7 +5449,7 @@ $ribbon-props: (
   'padding-right': 8px,
   'padding-top': 4px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': background-color foreground-color border-color,
   'translate': unset
@@ -5465,7 +5475,7 @@ $rich-text-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -5548,7 +5558,7 @@ $router-anchor-props: (
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'transition-duration': var(--joy-layout-transition),
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': unset
@@ -5650,7 +5660,7 @@ $search-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5719,7 +5729,7 @@ $select-props: (
   'padding-right': 12px,
   'padding-top': 8px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5750,7 +5760,7 @@ $select-item-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5775,7 +5785,7 @@ $select-item-group-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5800,7 +5810,7 @@ $signature-pad-props: (
   'padding-right': unset,
   'padding-top': unset,
   'shadow': unset,
-  'transition-duration': 200ms,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -5876,11 +5886,11 @@ $slider-props: (
   'tooltip-padding-right': var(--joy-layout-space),
   'tooltip-padding-top': var(--joy-layout-space),
   'tooltip-shadow': var(--joy-elevation-light),
-  'tooltip-transition-duration': .2s,
+  'tooltip-transition-duration': var(--joy-duration-short),
   'tooltip-transition-mode': ease,
   'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
   'track-size': 4px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, transform),
   'translate': unset
@@ -5995,7 +6005,7 @@ $split-button-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -6127,7 +6137,7 @@ $tab-props: (
   'strip-padding-left': 0,
   'strip-padding-right': 0,
   'strip-padding-top': 0,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
   'translate': unset
@@ -6191,7 +6201,7 @@ $tab-strip-props: (
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
   'padding-top': var(--joy-layout-space),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
   'translate': unset
@@ -6224,7 +6234,7 @@ $tab-strip-item-props: (
   'shadow': var(--joy-elevation-none),
   'size': 56px,
   'thickness': 4px,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
   'translate': unset
@@ -6249,7 +6259,7 @@ $table-props: (
   'padding-right': calc(var(--joy-layout-space) * 2),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6274,7 +6284,7 @@ $table-body-props: (
   'padding-right': var(--joy-layout-space),
   'padding-top': calc(var(--joy-layout-space) / 2),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6298,7 +6308,7 @@ $table-cell-props: (
   'padding-right': calc(var(--joy-layout-space)*2),
   'padding-top': 0px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6323,7 +6333,7 @@ $table-footer-props: (
   'padding-right': var(--joy-layout-space),
   'padding-top': calc(var(--joy-layout-space) / 2),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6348,7 +6358,7 @@ $table-header-props: (
   'padding-right': var(--joy-layout-space),
   'padding-top': calc(var(--joy-layout-space) / 2),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6373,7 +6383,7 @@ $table-row-props: (
   'padding-right': 0,
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6400,7 +6410,7 @@ $text-props: (
   'padding-right': 0px,
   'padding-top': 0px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (color, opacity, box-shadow),
   'translate': unset
@@ -6427,7 +6437,7 @@ $text-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -6474,7 +6484,7 @@ $tick-bar-props: (
   'tick-size': 2px,
   'tick-text-gap': 4px,
   'tick-width': var(--joy-layout-thickness),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, transform),
   'translate': unset
@@ -6544,7 +6554,7 @@ $time-box-props: (
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -6607,7 +6617,7 @@ $toast-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-bold),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
   'translate': unset
@@ -6640,7 +6650,7 @@ $toggle-button-props: (
   'ripple-color': unset,
   'ripple-duration': 200ms,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
   'translate': none,
@@ -6713,7 +6723,7 @@ $toolbar-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': all,
   'translate': unset
@@ -6739,7 +6749,7 @@ $tooltip-props: (
   'padding-right': var(--joy-layout-space),
   'padding-top': var(--joy-layout-space),
   'shadow': var(--joy-elevation-light),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
@@ -6785,7 +6795,7 @@ $tree-item-props: (
   'padding-right': 16px,
   'padding-top': 8px,
   'shadow': var(--joy-elevation-none),
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, box-shadow),
   'translate': unset
@@ -6836,7 +6846,7 @@ $video-props: (
   'padding-right': 16px,
   'padding-top': 16px,
   'shadow': unset,
-  'transition-duration': .2s,
+  'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (color, background-color, border-color, opacity, box-shadow),
   'translate': unset

package/Themes/retro.scss CHANGED Viewed

@@ -1338,6 +1338,7 @@ $app-props: (
   'font-weight': var(--retro-typography-body1-font-weight),
   'foreground-color': var(--retro-scheme-foreground),
   'gap': var(--retro-layout-space),
+  'line-thickness': var(--retro-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
@@ -1362,6 +1363,7 @@ $app-header-props: (
   'font-weight': var(--retro-typography-headline6-font-weight),
   'foreground-color': var(--retro-scheme-foreground),
   'gap': var(--retro-layout-space),
+  'line-thickness': var(--retro-layout-thickness),
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-themes",
-    "version": "0.0.64",
+    "version": "0.0.66",
     "description": "Mosaik elements various themes.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,7 +15,7 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.64",
+        "@breadstone/mosaik-elements": "^0.0.66",
         "@ctrl/tinycolor": "^4.1.0",
         "tslib": "^2.8.1"
     },