@breadstone/mosaik-themes 0.0.206 → 0.0.210

package/themes/joy-tokens.scss

@@ -3,6 +3,7 @@ $font-family: Nunito, sans-serif;
 $layout-radius: 12px;
 $layout-space: 8px;
 $layout-thickness: 2px;
+$scheme-light-surface: #f5f5f5;
 $scheme-light-background: #eaeaea;
 $scheme-light-foreground: #3c454f;
 $scheme-light-highlight: #d1d1d1;
@@ -13,6 +14,7 @@ $scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
 $scheme-light-disabled: #686868;
 $scheme-light-contrast: #ffffff;
 $scheme-light-selection: rgba(204, 204, 204, 0.44);
+$scheme-dark-surface: #1e1e1e;
 $scheme-dark-background: #151515;
 $scheme-dark-foreground: #c3bab0;
 $scheme-dark-highlight: #2e2e2e;

package/themes/joy.scss

@@ -75,6 +75,7 @@ $font-family: Nunito, sans-serif;
 $layout-radius: 12px;
 $layout-space: 8px;
 $layout-thickness: 2px;
+$scheme-light-surface: #f5f5f5;
 $scheme-light-background: #eaeaea;
 $scheme-light-foreground: #3c454f;
 $scheme-light-highlight: #d1d1d1;
@@ -85,6 +86,7 @@ $scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
 $scheme-light-disabled: #686868;
 $scheme-light-contrast: #ffffff;
 $scheme-light-selection: rgba(204, 204, 204, 0.44);
+$scheme-dark-surface: #1e1e1e;
 $scheme-dark-background: #151515;
 $scheme-dark-foreground: #c3bab0;
 $scheme-dark-highlight: #2e2e2e;
@@ -818,7 +820,7 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$key}'}: #{$value};
             }
         }
-        // remap the light colors to the default colors
+        // remap light colors to default colors
         @each $key, $value in $_color-light {
             @if meta.type-of($value) == 'map' {
                 @each $k, $v in $value {
@@ -839,7 +841,7 @@ $_color-dark: (
                     #{'--#{$prefix}-color-dark-#{$key}'}: #{$value};
                 }
             }
-            // remap the dark colors to the default colors
+            // remap dark colors to default colors
             @each $key, $value in $_color-dark {
                 @if meta.type-of($value) == 'map' {
                     @each $k, $v in $value {
@@ -1186,6 +1188,7 @@ $_shadows-dark: (
     }
 }
 $_scheme-light: (
+    surface: $scheme-light-surface,
     background: $scheme-light-background,
     foreground: $scheme-light-foreground,
     highlight: $scheme-light-highlight,
@@ -1198,6 +1201,7 @@ $_scheme-light: (
     selection: $scheme-light-selection
 );
 $_scheme-dark: (
+    surface: $scheme-dark-surface,
     background: $scheme-dark-background,
     foreground: $scheme-dark-foreground,
     highlight: $scheme-dark-highlight,
@@ -1235,6 +1239,7 @@ $_scheme-dark: (
     }
     $schemes: (
         '': (
+            'surface': --#{$name}-scheme-surface,
             'background': --#{$name}-scheme-background,
             'foreground': --#{$name}-scheme-foreground,
             'highlight': --#{$name}-scheme-highlight,
@@ -1247,6 +1252,7 @@ $_scheme-dark: (
             'selection': --#{$name}-scheme-selection
         ),
         'light': (
+            'surface': --#{$name}-scheme-light-surface,
             'background': --#{$name}-scheme-light-background,
             'foreground': --#{$name}-scheme-light-foreground,
             'highlight': --#{$name}-scheme-light-highlight,
@@ -1259,6 +1265,7 @@ $_scheme-dark: (
             'selection': --#{$name}-scheme-light-selection
         ),
         'dark': (
+            'surface': --#{$name}-scheme-dark-surface,
             'background': --#{$name}-scheme-dark-background,
             'foreground': --#{$name}-scheme-dark-foreground,
             'highlight': --#{$name}-scheme-dark-highlight,
@@ -1596,7 +1603,7 @@ $app-props: (
   'translate': unset
 );
 $app-header-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
@@ -1659,28 +1666,27 @@ $auto-complete-box-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
-  'font-family': unset,
+  'focus-ring-active-width': 8px,
+  'focus-ring-color': unset,
+  'focus-ring-inward-offset': 2px,
+  'focus-ring-outward-offset': 2px,
+  'font-family': var(--joy-font-family),
   'font-letter-spacing': unset,
   'font-line-height': unset,
-  'font-size': unset,
+  'font-size': 16px,
   'font-text-decoration': unset,
   'font-text-transform': unset,
-  'font-weight': unset,
+  'font-weight': normal,
   'foreground-color': var(--joy-scheme-foreground),
-  'gap': var(--joy-layout-space),
-  'height': 56px,
-  'padding-bottom': var(--joy-layout-space),
-  'padding-left': calc(var(--joy-layout-space) * 1.5),
-  'padding-right': calc(var(--joy-layout-space) * 1.5),
-  'padding-top': var(--joy-layout-space),
-  'shadow-blur': unset,
-  'shadow-color': unset,
-  'shadow-offset-x': unset,
-  'shadow-offset-y': unset,
-  'shadow-spread': unset,
-  'transition-duration': unset,
-  'transition-mode': unset,
-  'transition-property': unset,
+  'gap': 8px,
+  'padding-bottom': 8px,
+  'padding-left': 12px,
+  'padding-right': 12px,
+  'padding-top': 8px,
+  'shadow': unset,
+  'transition-duration': var(--joy-duration-short),
+  'transition-mode': ease,
+  'transition-property': all,
   'translate': unset
 );
 $avatar-props: (
@@ -1767,6 +1773,7 @@ $back-top-props: (
 );
 $backdrop-props: (
   'background-color': var(--joy-scheme-semi-transparent),
+  'blur': 6px,
   'font-family': unset,
   'font-letter-spacing': unset,
   'font-line-height': unset,
@@ -1894,28 +1901,6 @@ $banner-sub-header-props: (
   'transition-property': unset,
   'translate': unset
 );
-$bottom-sheet-props: (
-  'background-color': var(--joy-scheme-background),
-  'border-color': var(--joy-scheme-highlight),
-  'border-width': 2px,
-  'font-family': var(--joy-font-family),
-  'font-letter-spacing': var(--joy-typography-button-letter-spacing),
-  'font-line-height': var(--joy-typography-button-line-height),
-  'font-size': var(--joy-typography-button-font-size),
-  'font-text-decoration': var(--joy-typography-button-text-decoration),
-  'font-text-transform': var(--joy-typography-button-text-transform),
-  'font-weight': var(--joy-typography-button-font-weight),
-  'foreground-color': var(--joy-scheme-foreground),
-  'gap': unset,
-  'padding-bottom': 8px,
-  'padding-left': 16px,
-  'padding-right': 16px,
-  'padding-top': 8px,
-  'transition-duration': unset,
-  'transition-mode': unset,
-  'transition-property': unset,
-  'translate': unset
-);
 $box-props: (
   'background-color': var(--joy-scheme-transparent),
   'border-color': unset,
@@ -2462,6 +2447,7 @@ $carousel-item2-props: (
   'translate': unset
 );
 $cell-props: (
+  'background-color': var(--joy-scheme-background),
   'font-family': var(--joy-font-family),
   'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
   'font-line-height': var(--joy-typography-body1-line-height),
@@ -3245,7 +3231,7 @@ $comment-props: (
   'translate': unset
 );
 $compound-button-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
@@ -3406,7 +3392,7 @@ $date-time-box-props: (
   'translate': unset
 );
 $dialog-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
@@ -3508,7 +3494,7 @@ $dialog-header-props: (
   'translate': unset
 );
 $dialog-header-sub-text-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'font-family': var(--joy-font-family),
   'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
@@ -3529,7 +3515,7 @@ $dialog-header-sub-text-props: (
   'translate': unset
 );
 $dialog-header-text-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-transparent),
   'border-color': var(--joy-scheme-highlight),
   'font-family': var(--joy-font-family),
   'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
@@ -3670,7 +3656,7 @@ $dot-props: (
   'translate': unset
 );
 $drawer-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
@@ -3693,7 +3679,7 @@ $drawer-props: (
   'shadow': var(--joy-elevation-none),
   'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
-  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
+  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin, width, height),
   'translate': unset,
   'width': 320px
 );
@@ -3733,6 +3719,84 @@ $drawer-content-props: (
   'transition-property': unset,
   'translate': unset
 );
+$drawer-footer-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': var(--joy-layout-space),
+  'padding-bottom': calc(var(--joy-layout-space) * 2),
+  'padding-left': calc(var(--joy-layout-space) * 2),
+  'padding-right': calc(var(--joy-layout-space) * 2),
+  'padding-top': calc(var(--joy-layout-space) * 2),
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-sub-text-props: (
+  'background-color': var(--joy-scheme-transparent),
+  'border-color': var(--joy-scheme-highlight),
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
+  'font-line-height': var(--joy-typography-subtitle2-line-height),
+  'font-size': var(--joy-typography-subtitle2-font-size),
+  'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
+  'font-text-transform': var(--joy-typography-subtitle2-text-transform),
+  'font-weight': var(--joy-typography-subtitle2-font-weight),
+  'foreground-color': var(--joy-scheme-middlelight),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-text-props: (
+  'background-color': var(--joy-scheme-transparent),
+  'border-color': var(--joy-scheme-highlight),
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
+  'font-line-height': var(--joy-typography-headline6-line-height),
+  'font-size': var(--joy-typography-headline6-font-size),
+  'font-text-decoration': var(--joy-typography-headline6-text-decoration),
+  'font-text-transform': var(--joy-typography-headline6-text-transform),
+  'font-weight': var(--joy-typography-headline6-font-weight),
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $drop-down-button-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
@@ -4277,7 +4341,7 @@ $floating-props: (
   'arrow-padding-offset': calc(var(--floating-arrow-size-diagonal)  - var(--floating-arrow-size)),
   'arrow-size': 6px,
   'arrow-size-diagonal': calc(var(--floating-arrow-size) * .7071),
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': none,
@@ -5425,7 +5489,7 @@ $pin-box-props: (
   'translate': unset
 );
 $popup-props: (
-  'background-color': var(--joy-scheme-background),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
@@ -5648,6 +5712,42 @@ $rating-props: (
   'transition-property': unset,
   'translate': unset
 );
+$region-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$region-view-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $repeat-button-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
@@ -6130,6 +6230,28 @@ $select-item-group-props: (
   'transition-property': all,
   'translate': unset
 );
+$sheet-props: (
+  'background-color': var(--joy-scheme-background),
+  'border-color': var(--joy-scheme-highlight),
+  'border-width': 2px,
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': var(--joy-typography-button-letter-spacing),
+  'font-line-height': var(--joy-typography-button-line-height),
+  'font-size': var(--joy-typography-button-font-size),
+  'font-text-decoration': var(--joy-typography-button-text-decoration),
+  'font-text-transform': var(--joy-typography-button-text-transform),
+  'font-weight': var(--joy-typography-button-font-weight),
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': 8px,
+  'padding-left': 16px,
+  'padding-right': 16px,
+  'padding-top': 8px,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $signature-pad-props: (
   'background-color': var(--joy-scheme-background),
   'border-color': var(--joy-scheme-highlight),
@@ -6303,8 +6425,6 @@ $split-props: (
   'font-text-transform': unset,
   'font-weight': unset,
   'gap': unset,
-  'max': 100%,
-  'min': 0%,
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
@@ -6372,6 +6492,63 @@ $stack-props: (
   'transition-property': unset,
   'translate': unset
 );
+$stepper-props: (
+  'connector-background': var(--joy-scheme-highlight),
+  'connector-margin': calc(var(--joy-layout-space) / 2),
+  'connector-radius': 999px,
+  'connector-size': var(--joy-layout-thickness),
+  'content-gap': calc(var(--joy-layout-space) * 2),
+  'description-size': 0.875rem,
+  'focus-outline-offset': 4px,
+  'focus-outline-width': var(--joy-layout-thickness),
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': var(--joy-layout-space),
+  'header-padding-vertical': var(--joy-layout-space),
+  'icon-border-width': calc(var(--joy-layout-thickness) * 3),
+  'icon-radius': 999px,
+  'icon-shadow': 0 1px 2px rgba(0,0,0,0.12),
+  'icon-size': calc(var(--joy-layout-space) * 3),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'step-padding-vertical': calc(var(--joy-layout-space) / 2),
+  'text-gap': 0.15rem,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset,
+  'vertical-connector-length': calc(var(--joy-layout-space) * 3),
+  'vertical-connector-margin': calc(var(--joy-layout-space) * 0.5)
+);
+$stepper-item-props: (
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'panel-padding': calc(var(--joy-layout-space) * 2),
+  'panel-radius': var(--joy-layout-radius),
+  'panel-shadow': 0 1px 2px rgba(0,0,0,0.08),
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $sticky-props: (
   'font-family': unset,
   'font-letter-spacing': unset,
@@ -6923,6 +7100,117 @@ $time-box-props: (
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
   'translate': unset
 );
+$timeline-props: (
+  'content-gap': var(--joy-layout-space),
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': calc(var(--joy-layout-space) * 2),
+  'line-color': var(--joy-scheme-highlight),
+  'line-offset': calc(var(--joy-layout-space) * 4),
+  'line-thickness': var(--joy-layout-thickness),
+  'marker-border-color': var(--joy-scheme-highlight),
+  'marker-border-width': var(--joy-layout-thickness),
+  'marker-color': var(--joy-scheme-background),
+  'marker-size': calc(var(--joy-layout-space) * 2.5),
+  'padding-bottom': var(--joy-layout-space),
+  'padding-left': var(--joy-layout-space),
+  'padding-right': var(--joy-layout-space),
+  'padding-top': var(--joy-layout-space),
+  'transition-duration': var(--joy-duration-short),
+  'transition-mode': ease,
+  'transition-property': (color, background-color, transform),
+  'translate': unset
+);
+$timeline-content-props: (
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-item-props: (
+  'content-gap': var(--joy-layout-space),
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'line-offset': calc(var(--joy-layout-space) * 3),
+  'marker-border-color': var(--joy-scheme-highlight),
+  'marker-border-width': var(--joy-layout-thickness),
+  'marker-color': var(--joy-scheme-background),
+  'marker-size': calc(var(--joy-layout-space) * 2.5),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-marker-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'marker-border-color': var(--joy-scheme-highlight),
+  'marker-border-width': var(--joy-layout-thickness),
+  'marker-color': var(--joy-scheme-background),
+  'marker-size': calc(var(--joy-layout-space) * 2.5),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-opposite-props: (
+  'font-family': var(--joy-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--joy-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $title-bar-props: (
   'font-family': var(--joy-font-family),
   'font-letter-spacing': var(--joy-typography-headline4-letter-spacing),
@@ -7122,7 +7410,7 @@ $toolbar-props: (
   'translate': unset
 );
 $tooltip-props: (
-  'background-color': var(--joy-scheme-highlight),
+  'background-color': var(--joy-scheme-surface),
   'border-color': var(--joy-scheme-highlight),
   'border-radius': var(--joy-layout-radius),
   'border-style': none,