@breadstone/mosaik-themes 0.0.76 → 0.0.79

package/Themes/joy-tokens.scss

@@ -19,7 +19,7 @@ $scheme-dark-highlight: #2e2e2e;
 $scheme-dark-middlelight: #757575;
 $scheme-dark-lowlight: #a3a3a3;
 $scheme-dark-transparent: rgba(255, 255, 255, 0);
-$scheme-dark-semi-transparent: rgba(0, 0, 0, 0.67);
+$scheme-dark-semi-transparent: rgba(255, 255, 255, 0.03);
 $scheme-dark-disabled: #474747;
 $scheme-dark-contrast: #000000;
 $scheme-dark-selection: rgba(204, 204, 204, 0.44);
@@ -432,6 +432,16 @@ $elevation-dark-extrabold-spread-0: 0px;
 $elevation-dark-extrabold-spread-1: 0px;
 $elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
 $elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
 $typography-key-headline1: "headline1";
 $typography-key-headline2: "headline2";
 $typography-key-headline3: "headline3";
@@ -465,11 +475,6 @@ $variant-success: "success";
 $variant-info: "info";
 $variant-highlight: "highlight";
 $variant-neutral: "neutral";
-$size-tiny: "tiny";
-$size-small: "small";
-$size-medium: "medium";
-$size-large: "large";
-$size-giant: "giant";
 $duration-short: 200ms;
 $duration-medium: 400ms;
 $duration-long: 600ms;
@@ -486,9 +491,9 @@ $typography-body2-font-family: $font-family;
 $typography-caption-font-family: $font-family;
 $typography-button-font-family: $font-family;
 $typography-overline-font-family: $font-family;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
 $elevation2-light-light: $elevation-light-light-offset-x-0 $elevation-light-light-offset-y-0 $elevation-light-light-blur-0 $elevation-light-light-spread-0 $elevation-light-light-color-0, $elevation-light-light-offset-x-1 $elevation-light-light-offset-y-1 $elevation-light-light-blur-1 $elevation-light-light-spread-1 $elevation-light-light-color-1;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
 $appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
 $variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;
-$size: $size-tiny $size-small $size-medium $size-large $size-giant;
 $duration: $duration-short $duration-medium $duration-long;

package/Themes/joy.scss

@@ -91,7 +91,7 @@ $scheme-dark-highlight: #2e2e2e;
 $scheme-dark-middlelight: #757575;
 $scheme-dark-lowlight: #a3a3a3;
 $scheme-dark-transparent: rgba(255, 255, 255, 0);
-$scheme-dark-semi-transparent: rgba(0, 0, 0, 0.67);
+$scheme-dark-semi-transparent: rgba(255, 255, 255, 0.03);
 $scheme-dark-disabled: #474747;
 $scheme-dark-contrast: #000000;
 $scheme-dark-selection: rgba(204, 204, 204, 0.44);
@@ -504,6 +504,16 @@ $elevation-dark-extrabold-spread-0: 0px;
 $elevation-dark-extrabold-spread-1: 0px;
 $elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
 $elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
 $typography-key-headline1: "headline1";
 $typography-key-headline2: "headline2";
 $typography-key-headline3: "headline3";
@@ -537,11 +547,6 @@ $variant-success: "success";
 $variant-info: "info";
 $variant-highlight: "highlight";
 $variant-neutral: "neutral";
-$size-tiny: "tiny";
-$size-small: "small";
-$size-medium: "medium";
-$size-large: "large";
-$size-giant: "giant";
 $duration-short: 200ms;
 $duration-medium: 400ms;
 $duration-long: 600ms;
@@ -558,11 +563,11 @@ $typography-body2-font-family: $font-family;
 $typography-caption-font-family: $font-family;
 $typography-button-font-family: $font-family;
 $typography-overline-font-family: $font-family;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
 $elevation2-light-light: $elevation-light-light-offset-x-0 $elevation-light-light-offset-y-0 $elevation-light-light-blur-0 $elevation-light-light-spread-0 $elevation-light-light-color-0, $elevation-light-light-offset-x-1 $elevation-light-light-offset-y-1 $elevation-light-light-blur-1 $elevation-light-light-spread-1 $elevation-light-light-color-1;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
 $appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
 $variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;
-$size: $size-tiny $size-small $size-medium $size-large $size-giant;
 $duration: $duration-short $duration-medium $duration-long;
 $_color-light: (
     primary: (
@@ -1568,6 +1573,9 @@ $anchor-props: (
 );
 $app-props: (
   'background-color': var(--joy-scheme-background),
+  'border-radius': unset,
+  'drawer-height': 100%,
+  'drawer-width': 320px,
   'font-family': var(--joy-typography-body1-font-family),
   'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
   'font-line-height': var(--joy-typography-body1-line-height),
@@ -1939,6 +1947,10 @@ $button-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
   'height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -2992,6 +3004,10 @@ $color-thumb-props: (
   'translate': unset
 );
 $combo-props: (
+  'focus-ring-active-width': 8px,
+  'focus-ring-color': unset,
+  'focus-ring-inward-offset': 2px,
+  'focus-ring-outward-offset': 2px,
   'font-family': unset,
   'font-letter-spacing': unset,
   'font-line-height': unset,
@@ -3080,6 +3096,10 @@ $compound-button-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
   'height': auto,
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -3397,6 +3417,24 @@ $disclosure-props: (
   'transition-property': unset,
   'translate': unset
 );
+$dismiss-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
+);
 $divider-props: (
   'background-color': var(--joy-scheme-highlight),
   'font-family': var(--joy-font-family),
@@ -3527,7 +3565,11 @@ $drop-down-button-props: (
   'font-weight': var(--joy-typography-button-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
   'line-height': calc(var(--dropdown-button-font-line-height)  - 4px),
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -4086,6 +4128,10 @@ $floating-action-button-props: (
   'font-weight': var(--joy-typography-button-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -5215,6 +5261,24 @@ $portal-props: (
   'transition-property': unset,
   'translate': unset
 );
+$portal-host-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
+);
 $portal-projection-props: (
   'font-family': unset,
   'font-letter-spacing': unset,
@@ -5391,7 +5455,11 @@ $repeat-button-props: (
   'font-weight': var(--joy-typography-button-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
   'line-height': calc(var(--repeat-button-font-line-height)  - 4px),
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -5715,6 +5783,10 @@ $select-props: (
   'border-radius': var(--joy-layout-radius),
   'border-style': solid,
   'border-width': var(--joy-layout-thickness),
+  '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,
@@ -5997,7 +6069,11 @@ $split-button-props: (
   'font-weight': var(--joy-typography-button-font-weight),
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
   'line-height': calc(var(--split-button-font-line-height)  - 4px),
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),
@@ -6436,7 +6512,9 @@ $text-box-props: (
   'padding-left': calc(var(--joy-layout-space) * 1.5),
   'padding-right': calc(var(--joy-layout-space) * 1.5),
   'padding-top': var(--joy-layout-space),
+  'prefix-icon-size': 20px,
   'shadow': var(--joy-elevation-none),
+  'suffix-icon-size': 20px,
   'transition-duration': var(--joy-duration-short),
   'transition-mode': ease,
   'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -6642,7 +6720,11 @@ $toggle-button-props: (
   'foreground-color': var(--joy-scheme-foreground),
   'gap': var(--joy-layout-space),
   'height': auto,
+  'icon-min-width': 36px,
+  'icon-min-height': 36px,
   'line-height': calc(var(--toggle-button-font-line-height)  - 4px),
+  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
+  'min-width': 64px,
   'padding-bottom': var(--joy-layout-space),
   'padding-left': var(--joy-layout-space),
   'padding-right': var(--joy-layout-space),

package/Themes/material-tokens.scss

@@ -7,3 +7,14 @@ $color-light-primary: #6200EE;
 $color-light-secondary: #3700B3;
 $color-light-tertiary: #03DAC6;
 $elevation-none: none;
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;

package/Themes/material.scss

@@ -78,6 +78,17 @@ $color-light-primary: #6200EE;
 $color-light-secondary: #3700B3;
 $color-light-tertiary: #03DAC6;
 $elevation-none: none;
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
 @mixin material-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $theme: 'material';
 }

package/Themes/retro-tokens.scss

@@ -302,6 +302,16 @@ $elevation-dark-extrabold-offset-x-0: 7px;
 $elevation-dark-extrabold-offset-y-0: 7px;
 $elevation-dark-extrabold-blur-0: 0px;
 $elevation-dark-extrabold-spread-0: 0px;
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
 $typography-key-headline1: "headline1";
 $typography-key-headline2: "headline2";
 $typography-key-headline3: "headline3";
@@ -333,11 +343,6 @@ $variant-warning: "warning";
 $variant-danger: "danger";
 $variant-success: "success";
 $variant-neutral: "neutral";
-$size-tiny: "tiny";
-$size-small: "small";
-$size-medium: "medium";
-$size-large: "large";
-$size-giant: "giant";
 $duration-short: 200ms;
 $duration-medium: 400ms;
 $duration-long: 600ms;
@@ -378,7 +383,7 @@ $elevation-dark-bold: 6px 6px 0px 0px $scheme-dark-contrast;
 $elevation-dark-bold-color-0: $scheme-dark-contrast;
 $elevation-dark-extrabold: 7px 7px 0px 0px $scheme-dark-contrast;
 $elevation-dark-extrabold-color-0: $scheme-dark-contrast;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
 $appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
 $variant: $variant-primary $variant-secondary $variant-info $variant-warning $variant-danger $variant-success $variant-neutral;
-$size: $size-tiny $size-small $size-medium $size-large $size-giant;