diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html index 190d3ed68ff7..d84caffd3dfe 100644 --- a/src/dev-app/select/select-demo.html +++ b/src/dev-app/select/select-demo.html @@ -11,7 +11,7 @@ [class.demo-drinks-width-large]="drinksWidth === '400px'"> Drink + [disabled]="drinksDisabled" #drinkControl="ngModel" [panelClass]="m3ForceSecondary ? 'demo-force-secondary' : ''"> None @for (drink of drinks; track drink; let index = $index) { Disable All Options

+

+ Force secondary color for options in M3 +

diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index 61f2da697ebd..ffa817bd84f9 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -71,6 +71,7 @@ export class SelectDemo { pokemonTheme: ThemePalette = 'primary'; compareByValue = true; selectFormControl = new FormControl('', Validators.required); + m3ForceSecondary = true; sandwichBread = ''; sandwichMeat = ''; diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index eea80f08b06f..46fe1f812c52 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -83,10 +83,10 @@ } .mat-accent { - @include color-variant-styles($theme, secondary); + @include color-variant-styles($theme, tertiary); } .mat-badge-accent { - @include mat.badge-color($theme, $color-variant: secondary); + @include mat.badge-color($theme, $color-variant: tertiary); } .mat-warn { @@ -120,8 +120,7 @@ dev-app { $m3-base-config: ( color: ( primary: matx.$m3-green-palette, - secondary: matx.$m3-blue-palette, - tertiary: matx.$m3-yellow-palette, + tertiary: matx.$m3-violet-palette, ), ); @@ -174,6 +173,10 @@ html { @include color-variants-back-compat($light-theme); +.demo-force-secondary { + @include mat.option-color($light-theme, $color-variant: secondary); +} + // Emit dark theme styles. .demo-unicorn-dark-theme { // TODO(mmalerba): choose colors from the theming API. @@ -219,6 +222,10 @@ html { @include mat.tree-color($dark-theme); @include color-variants-back-compat($dark-theme); + + .demo-force-secondary { + @include mat.option-color($dark-theme, $color-variant: secondary); + } } // Emit density styles for each scale. diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index efb0c3ff415a..90772c3d6ec2 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -6,7 +6,8 @@ // Token-based theming API @forward './theming/definition' show define-theme, define-colors, define-typography, define-density; -@forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-orange-palette, -$m3-yellow-palette, $m3-green-palette, $m3-blue-palette, $m3-indigo-palette, $m3-violet-palette; +@forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-green-palette, $m3-blue-palette, + $m3-yellow-palette, $m3-cyan-palette, $m3-magenta-palette, $m3-orange-palette, + $m3-chartreuse-palette, $m3-azure-palette, $m3-violet-palette, $m3-rose-palette; // Additional public APIs for individual components diff --git a/src/material-experimental/theming/_config-validation.scss b/src/material-experimental/theming/_config-validation.scss index 102d89bd4cca..4dbf6a4dc58d 100644 --- a/src/material-experimental/theming/_config-validation.scss +++ b/src/material-experimental/theming/_config-validation.scss @@ -89,7 +89,7 @@ @if $err { @return (#{'$config should be a color configuration object. Got:'} $config); } - $allowed: (theme-type, primary, secondary, tertiary); + $allowed: (theme-type, primary, tertiary); $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...); @if $err { @return ( diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index dd2b8ac74b36..d364606b0d5c 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -1058,7 +1058,7 @@ focus-state-layer-color: mat.private-safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: 0.2), ), - teriatiary: ( + tertiary: ( ripple-color: map.get($systems, md-sys-color, tertiary), hover-state-layer-color: mat.private-safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: 0.05), diff --git a/src/material-experimental/theming/_definition.scss b/src/material-experimental/theming/_definition.scss index 9d3e2a251e0c..03f47aa0b81a 100644 --- a/src/material-experimental/theming/_definition.scss +++ b/src/material-experimental/theming/_definition.scss @@ -38,24 +38,23 @@ $theme-version: 1; } $type: map.get($config, theme-type) or light; - $primary: map.get($config, primary) or m3-palettes.$purple-palette; - $secondary: map.get($config, secondary) or $primary; - $tertiary: map.get($config, tertiary) or $secondary; + $primary: map.get($config, primary) or m3-palettes.$violet-palette; + $tertiary: map.get($config, tertiary) or $primary; @return ( $internals: ( theme-version: $theme-version, theme-type: $type, palettes: ( - primary: map.remove($primary, neutral, neutral-variant), - secondary: map.remove($secondary, neutral, neutral-variant), - tertiary: map.remove($tertiary, neutral, neutral-variant), + primary: map.remove($primary, neutral, neutral-variant, secondary), + secondary: map.get($primary, secondary), + tertiary: map.remove($tertiary, neutral, neutral-variant, secondary), neutral: map.get($primary, neutral), neutral-variant: map.get($primary, neutral-variant), - error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant), + error: m3-palettes.$private-error-palette, ), color-tokens: m3-tokens.generate-color-tokens( - $type, $primary, $secondary, $tertiary, m3-palettes.$red-palette) + $type, $primary, $tertiary, m3-palettes.$private-error-palette) ) ); } diff --git a/src/material-experimental/theming/_m3-palettes.scss b/src/material-experimental/theming/_m3-palettes.scss index 60bf1a77422c..49b835ebba02 100644 --- a/src/material-experimental/theming/_m3-palettes.scss +++ b/src/material-experimental/theming/_m3-palettes.scss @@ -27,7 +27,155 @@ @return $palette; } -/// Blue color palette to be used as primary, secondary, or tertiary palette. +/// Red color palette to be used as primary or tertiary palette. +$red-palette: _patch-missing-hues(( + 0: #000000, + 10: #410000, + 20: #690100, + 25: #7e0100, + 30: #930100, + 35: #a90100, + 40: #c00100, + 50: #ef0000, + 60: #ff5540, + 70: #ff8a78, + 80: #ffb4a8, + 90: #ffdad4, + 95: #ffedea, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #2c1512, + 20: #442925, + 25: #513430, + 30: #5d3f3b, + 35: #6a4b46, + 40: #775651, + 50: #926f69, + 60: #ae8882, + 70: #caa29c, + 80: #e7bdb6, + 90: #ffdad4, + 95: #ffedea, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #201a19, + 20: #362f2e, + 25: #413a38, + 30: #4d4544, + 35: #59504f, + 40: #655c5b, + 50: #7f7573, + 60: #998e8d, + 70: #b4a9a7, + 80: #d0c4c2, + 90: #ede0dd, + 95: #fbeeec, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #251917, + 20: #3b2d2b, + 25: #473836, + 30: #534341, + 35: #5f4f4c, + 40: #6c5a58, + 50: #857370, + 60: #a08c89, + 70: #bca7a3, + 80: #d8c2be, + 90: #f5ddda, + 95: #ffedea, + 98: #fff8f6, + 99: #fffbff, + 100: #ffffff, + ), +)); + +/// Green color palette to be used as primary or tertiary palette. +$green-palette: _patch-missing-hues(( + 0: #000000, + 10: #002200, + 20: #013a00, + 25: #014600, + 30: #015300, + 35: #026100, + 40: #026e00, + 50: #038b00, + 60: #03a800, + 70: #03c700, + 80: #02e600, + 90: #77ff61, + 95: #cbffb8, + 98: #edffe1, + 99: #f7ffee, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #121f0e, + 20: #263422, + 25: #313f2c, + 30: #3c4b37, + 35: #485642, + 40: #54634d, + 50: #6c7b65, + 60: #86957e, + 70: #a0b097, + 80: #bbcbb2, + 90: #d7e8cd, + 95: #e5f6da, + 98: #eeffe3, + 99: #f7ffee, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1a1c18, + 20: #2f312d, + 25: #3a3c38, + 30: #454743, + 35: #51534e, + 40: #5d5f5a, + 50: #767872, + 60: #90918c, + 70: #abaca6, + 80: #c6c7c1, + 90: #e2e3dc, + 95: #f1f1eb, + 98: #f9faf3, + 99: #fcfdf6, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #181d15, + 20: #2c3229, + 25: #373d34, + 30: #43483f, + 35: #4e544a, + 40: #5a6056, + 50: #73796e, + 60: #8d9387, + 70: #a7ada1, + 80: #c3c8bc, + 90: #dfe4d7, + 95: #edf3e5, + 98: #f6fbee, + 99: #f9fef1, + 100: #ffffff, + ), +)); + +/// Blue color palette to be used as primary or tertiary palette. $blue-palette: _patch-missing-hues(( 0: #000000, 10: #00006e, @@ -45,6 +193,24 @@ $blue-palette: _patch-missing-hues(( 98: #fbf8ff, 99: #fffbff, 100: #ffffff, + secondary: ( + 0: #000000, + 10: #191a2c, + 20: #2e2f42, + 25: #393a4d, + 30: #444559, + 35: #505165, + 40: #5c5d72, + 50: #75758b, + 60: #8f8fa6, + 70: #a9a9c1, + 80: #c5c4dd, + 90: #e1e0f9, + 95: #f1efff, + 98: #fbf8ff, + 99: #fffbff, + 100: #ffffff, + ), neutral: ( 0: #000000, 10: #1b1b1f, @@ -83,7 +249,81 @@ $blue-palette: _patch-missing-hues(( ), )); -/// Cyan color palette to be used as primary, secondary, or tertiary palette. +/// Yellow color palette to be used as primary or tertiary palette. +$yellow-palette: _patch-missing-hues(( + 0: #000000, + 10: #1d1d00, + 20: #323200, + 25: #3e3e00, + 30: #494900, + 35: #555500, + 40: #626200, + 50: #7b7b00, + 60: #969600, + 70: #b1b100, + 80: #cdcd00, + 90: #eaea00, + 95: #f9f900, + 98: #fffeac, + 99: #fffbff, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #1d1d06, + 20: #323218, + 25: #3d3d22, + 30: #49482d, + 35: #545438, + 40: #606043, + 50: #7a795a, + 60: #949272, + 70: #aead8b, + 80: #cac8a5, + 90: #e7e4bf, + 95: #f5f3cd, + 98: #fefbd5, + 99: #fffbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1c1c17, + 20: #31312b, + 25: #3c3c35, + 30: #484741, + 35: #54524c, + 40: #605e58, + 50: #797770, + 60: #939189, + 70: #aeaba3, + 80: #c9c6be, + 90: #e6e2d9, + 95: #f4f0e8, + 98: #fdf9f0, + 99: #fffbff, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #1c1c11, + 20: #313125, + 25: #3d3c2f, + 30: #48473a, + 35: #545345, + 40: #605f51, + 50: #797869, + 60: #939182, + 70: #aeac9b, + 80: #cac7b6, + 90: #e6e3d1, + 95: #f4f1df, + 98: #fdfae7, + 99: #fffbff, + 100: #ffffff, + ), +)); + +/// Cyan color palette to be used as primary or tertiary palette. $cyan-palette: _patch-missing-hues(( 0: #000000, 10: #002020, @@ -101,6 +341,24 @@ $cyan-palette: _patch-missing-hues(( 98: #e2fffe, 99: #f1fffe, 100: #ffffff, + secondary: ( + 0: #000000, + 10: #051f1f, + 20: #1b3534, + 25: #27403f, + 30: #324b4b, + 35: #3e5757, + 40: #4a6363, + 50: #627c7b, + 60: #7b9695, + 70: #95b0b0, + 80: #b0cccb, + 90: #cce8e7, + 95: #daf6f5, + 98: #e3fffe, + 99: #f1fffe, + 100: #ffffff, + ), neutral: ( 0: #000000, 10: #191c1c, @@ -139,63 +397,7 @@ $cyan-palette: _patch-missing-hues(( ), )); -/// Green color palette to be used as primary, secondary, or tertiary palette. -$green-palette: _patch-missing-hues(( - 0: #000000, - 10: #002200, - 20: #013a00, - 25: #014600, - 30: #015300, - 35: #026100, - 40: #026e00, - 50: #038b00, - 60: #03a800, - 70: #03c700, - 80: #02e600, - 90: #77ff61, - 95: #cbffb8, - 98: #edffe1, - 99: #f7ffee, - 100: #ffffff, - neutral: ( - 0: #000000, - 10: #1a1c18, - 20: #2f312d, - 25: #3a3c38, - 30: #454743, - 35: #51534e, - 40: #5d5f5a, - 50: #767872, - 60: #90918c, - 70: #abaca6, - 80: #c6c7c1, - 90: #e2e3dc, - 95: #f1f1eb, - 98: #f9faf3, - 99: #fcfdf6, - 100: #ffffff, - ), - neutral-variant: ( - 0: #000000, - 10: #181d15, - 20: #2c3229, - 25: #373d34, - 30: #43483f, - 35: #4e544a, - 40: #5a6056, - 50: #73796e, - 60: #8d9387, - 70: #a7ada1, - 80: #c3c8bc, - 90: #dfe4d7, - 95: #edf3e5, - 98: #f6fbee, - 99: #f9fef1, - 100: #ffffff, - ), -)); - -/// Magenta color palette to be used as primary, secondary, or tertiary palette. +/// Magenta color palette to be used as primary or tertiary palette. $magenta-palette: _patch-missing-hues(( 0: #000000, 10: #380038, @@ -213,6 +415,24 @@ $magenta-palette: _patch-missing-hues(( 98: #fff7f9, 99: #fffbff, 100: #ffffff, + secondary: ( + 0: #000000, + 10: #271624, + 20: #3d2b3a, + 25: #493545, + 30: #554151, + 35: #614c5d, + 40: #6e5869, + 50: #877082, + 60: #a2899c, + 70: #bea4b7, + 80: #dabfd2, + 90: #f7daef, + 95: #ffebf8, + 98: #fff7f9, + 99: #fffbff, + 100: #ffffff, + ), neutral: ( 0: #000000, 10: #1e1a1d, @@ -251,7 +471,7 @@ $magenta-palette: _patch-missing-hues(( ), )); -/// Orange color palette to be used as primary, secondary, or tertiary palette. +/// Orange color palette to be used as primary or tertiary palette. $orange-palette: _patch-missing-hues(( 0: #000000, 10: #311300, @@ -269,6 +489,24 @@ $orange-palette: _patch-missing-hues(( 98: #fff8f5, 99: #fffbff, 100: #ffffff, + secondary: ( + 0: #000000, + 10: #2b1708, + 20: #422b1b, + 25: #4f3625, + 30: #5b4130, + 35: #684c3b, + 40: #755846, + 50: #90715d, + 60: #ab8a75, + 70: #c8a48e, + 80: #e5bfa8, + 90: #ffdcc7, + 95: #ffede4, + 98: #fff8f5, + 99: #fffbff, + 100: #ffffff, + ), neutral: ( 0: #000000, 10: #201a17, @@ -307,8 +545,230 @@ $orange-palette: _patch-missing-hues(( ), )); -/// Purple color palette to be used as primary, secondary, or tertiary palette. -$purple-palette: _patch-missing-hues(( +/// Chartreuse color palette to be used as primary or tertiary palette. +$chartreuse-palette: _patch-missing-hues(( + 0: #000000, + 10: #0b2000, + 20: #173800, + 25: #1e4400, + 30: #245100, + 35: #2b5e00, + 40: #326b00, + 50: #418700, + 60: #50a400, + 70: #60c100, + 80: #70e000, + 90: #82ff10, + 95: #cfffa9, + 98: #eeffdc, + 99: #f8ffeb, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #141e0c, + 20: #293420, + 25: #333f2a, + 30: #3f4a35, + 35: #4a5640, + 40: #56624b, + 50: #6f7b62, + 60: #88957b, + 70: #a2b094, + 80: #becbaf, + 90: #dae7ca, + 95: #e8f5d7, + 98: #f0fee0, + 99: #f8ffeb, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1a1c18, + 20: #2f312c, + 25: #3a3c37, + 30: #464742, + 35: #52534e, + 40: #5e5f5a, + 50: #767872, + 60: #90918b, + 70: #abaca5, + 80: #c7c7c0, + 90: #e3e3dc, + 95: #f1f1ea, + 98: #fafaf2, + 99: #fdfdf5, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #181d14, + 20: #2d3228, + 25: #383d33, + 30: #44483e, + 35: #4f5449, + 40: #5b6055, + 50: #74796d, + 60: #8e9286, + 70: #a8ada0, + 80: #c4c8bb, + 90: #e0e4d6, + 95: #eef2e4, + 98: #f7fbec, + 99: #fafeef, + 100: #ffffff, + ), +)); + +/// Spring Green color palette to be used as primary or tertiary palette. +$spring-green-palette: _patch-missing-hues(( + 0: #000000, + 10: #00210b, + 20: #003917, + 25: #00461e, + 30: #005225, + 35: #00602c, + 40: #006d33, + 50: #008942, + 60: #00a751, + 70: #00c561, + 80: #00e472, + 90: #63ff94, + 95: #c4ffcb, + 98: #eaffe9, + 99: #f5fff2, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #0e1f12, + 20: #233425, + 25: #2e4030, + 30: #394b3b, + 35: #445746, + 40: #506352, + 50: #697c6a, + 60: #829682, + 70: #9cb19c, + 80: #b7ccb7, + 90: #d3e8d2, + 95: #e1f6e0, + 98: #eaffe9, + 99: #f5fff2, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #191c19, + 20: #2e312e, + 25: #393c39, + 30: #454744, + 35: #51534f, + 40: #5d5f5b, + 50: #757873, + 60: #8f918d, + 70: #aaaca7, + 80: #c5c7c2, + 90: #e2e3de, + 95: #f0f1ec, + 98: #f9faf4, + 99: #fcfdf7, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #161d17, + 20: #2b322b, + 25: #363d36, + 30: #414941, + 35: #4d544c, + 40: #596058, + 50: #717970, + 60: #8b9389, + 70: #a6ada4, + 80: #c1c9be, + 90: #dde5da, + 95: #ebf3e8, + 98: #f4fcf0, + 99: #f7fef3, + 100: #ffffff, + ), +)); + +/// Azure color palette to be used as primary or tertiary palette. +$azure-palette: _patch-missing-hues(( + 0: #000000, + 10: #001b3f, + 20: #002f65, + 25: #003a7a, + 30: #00458f, + 35: #0050a5, + 40: #005cbb, + 50: #0074e9, + 60: #438fff, + 70: #7cabff, + 80: #abc7ff, + 90: #d7e3ff, + 95: #ecf0ff, + 98: #f9f9ff, + 99: #fdfbff, + 100: #ffffff, + secondary: ( + 0: #000000, + 10: #131c2b, + 20: #283041, + 25: #333c4d, + 30: #3e4759, + 35: #4a5365, + 40: #565e71, + 50: #6f778b, + 60: #8891a5, + 70: #a3abc0, + 80: #bec6dc, + 90: #dae2f9, + 95: #ecf0ff, + 98: #f9f9ff, + 99: #fdfbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1a1b1f, + 20: #2f3033, + 25: #3b3b3f, + 30: #46464a, + 35: #525256, + 40: #5e5e62, + 50: #77777a, + 60: #919094, + 70: #ababaf, + 80: #c7c6ca, + 90: #e3e2e6, + 95: #f2f0f4, + 98: #faf9fd, + 99: #fdfbff, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #181c22, + 20: #2d3038, + 25: #383b43, + 30: #44474e, + 35: #4f525a, + 40: #5b5e66, + 50: #74777f, + 60: #8e9099, + 70: #a9abb4, + 80: #c4c6d0, + 90: #e0e2ec, + 95: #eff0fa, + 98: #f9f9ff, + 99: #fdfbff, + 100: #ffffff, + ), +)); + +/// Violet color palette to be used as primary or tertiary palette. +$violet-palette: _patch-missing-hues(( 0: #000000, 10: #270057, 20: #42008a, @@ -325,6 +785,24 @@ $purple-palette: _patch-missing-hues(( 98: #fef7ff, 99: #fffbff, 100: #ffffff, + secondary: ( + 0: #000000, + 10: #1f182a, + 20: #352d40, + 25: #40384c, + 30: #4b4357, + 35: #574f63, + 40: #645b70, + 50: #7d7389, + 60: #978ca4, + 70: #b2a7bf, + 80: #cec2db, + 90: #eadef7, + 95: #f7edff, + 98: #fef7ff, + 99: #fffbff, + 100: #ffffff, + ), neutral: ( 0: #000000, 10: #1d1b1e, @@ -363,114 +841,96 @@ $purple-palette: _patch-missing-hues(( ), )); -/// Red color palette to be used as primary, secondary, or tertiary palette. -$red-palette: _patch-missing-hues(( +/// Rose color palette to be used as primary or tertiary palette. +$rose-palette: _patch-missing-hues(( 0: #000000, - 10: #410000, - 20: #690100, - 25: #7e0100, - 30: #930100, - 35: #a90100, - 40: #c00100, - 50: #ef0000, - 60: #ff5540, - 70: #ff8a78, - 80: #ffb4a8, - 90: #ffdad4, - 95: #ffedea, - 98: #fff8f6, + 10: #3f001b, + 20: #65002f, + 25: #7a003a, + 30: #8f0045, + 35: #a40050, + 40: #ba005c, + 50: #e80074, + 60: #ff4a8e, + 70: #ff84a9, + 80: #ffb1c5, + 90: #ffd9e1, + 95: #ffecef, + 98: #fff8f8, 99: #fffbff, 100: #ffffff, - neutral: ( - 0: #000000, - 10: #201a19, - 20: #362f2e, - 25: #413a38, - 30: #4d4544, - 35: #59504f, - 40: #655c5b, - 50: #7f7573, - 60: #998e8d, - 70: #b4a9a7, - 80: #d0c4c2, - 90: #ede0dd, - 95: #fbeeec, - 98: #fff8f6, - 99: #fffbff, - 100: #ffffff, - ), - neutral-variant: ( + secondary: ( 0: #000000, - 10: #251917, - 20: #3b2d2b, - 25: #473836, - 30: #534341, - 35: #5f4f4c, - 40: #6c5a58, - 50: #857370, - 60: #a08c89, - 70: #bca7a3, - 80: #d8c2be, - 90: #f5ddda, - 95: #ffedea, - 98: #fff8f6, + 10: #2b151b, + 20: #422930, + 25: #4f343b, + 30: #5b3f46, + 35: #684b52, + 40: #74565d, + 50: #8f6f76, + 60: #aa888f, + 70: #c6a2aa, + 80: #e3bdc5, + 90: #ffd9e1, + 95: #ffecef, + 98: #fff8f8, 99: #fffbff, 100: #ffffff, ), -)); - -/// Yellow color palette to be used as primary, secondary, or tertiary palette. -$yellow-palette: _patch-missing-hues(( - 0: #000000, - 10: #1d1d00, - 20: #323200, - 25: #3e3e00, - 30: #494900, - 35: #555500, - 40: #626200, - 50: #7b7b00, - 60: #969600, - 70: #b1b100, - 80: #cdcd00, - 90: #eaea00, - 95: #f9f900, - 98: #fffeac, - 99: #fffbff, - 100: #ffffff, neutral: ( 0: #000000, - 10: #1c1c17, - 20: #31312b, - 25: #3c3c35, - 30: #484741, - 35: #54524c, - 40: #605e58, - 50: #797770, - 60: #939189, - 70: #aeaba3, - 80: #c9c6be, - 90: #e6e2d9, - 95: #f4f0e8, - 98: #fdf9f0, + 10: #201a1b, + 20: #352f30, + 25: #413a3b, + 30: #4c4546, + 35: #585052, + 40: #655c5e, + 50: #7e7576, + 60: #988e90, + 70: #b3a9aa, + 80: #cfc4c5, + 90: #ece0e1, + 95: #faeeef, + 98: #fff8f8, 99: #fffbff, 100: #ffffff, ), neutral-variant: ( 0: #000000, - 10: #1c1c11, - 20: #313125, - 25: #3d3c2f, - 30: #48473a, - 35: #545345, - 40: #605f51, - 50: #797869, - 60: #939182, - 70: #aeac9b, - 80: #cac7b6, - 90: #e6e3d1, - 95: #f4f1df, - 98: #fdfae7, + 10: #24191b, + 20: #3a2d30, + 25: #45383b, + 30: #514346, + 35: #5d4f52, + 40: #6a5a5e, + 50: #847376, + 60: #9e8c90, + 70: #baa7aa, + 80: #d6c2c5, + 90: #f3dde1, + 95: #ffecef, + 98: #fff8f8, 99: #fffbff, 100: #ffffff, ), )); + +/// Color palette to be used for error colors. +$private-error-palette: ( + 0: #000000, + 10: #410002, + 20: #690005, + 25: #7e0007, + 30: #93000a, + 35: #a80710, + 40: #ba1a1a, + 50: #de3730, + 60: #ff5449, + 70: #ff897d, + 80: #ffb4ab, + 90: #ffdad6, + 95: #ffedea, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, +); diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 33c9e8ac9d56..817ef4c4fdf5 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -114,11 +114,11 @@ /// @param {Map} $tertiary The tertiary palette /// @param {Map} $error The error palette /// @return {Map} A set of `md-ref-palette` tokens -@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error) { +@function _generate-ref-palette-tokens($primary, $tertiary, $error) { @return mat.private-merge-all( (black: #000, white: #fff), _generate-palette-tokens($primary, primary), - _generate-palette-tokens($secondary, secondary), + _generate-palette-tokens(map.get($primary, secondary), secondary), _generate-palette-tokens($tertiary, tertiary), _generate-palette-tokens(map.get($primary, neutral), neutral), _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant), @@ -941,13 +941,12 @@ /// Generates a set of namespaced color tokens for all components. /// @param {String} $type The type of theme system (light or dark) /// @param {Map} $primary The primary palette -/// @param {Map} $secondary The secondary palette /// @param {Map} $tertiary The tertiary palette /// @param {Map} $error The error palette /// @return {Map} A map of namespaced color tokens -@function generate-color-tokens($type, $primary, $secondary, $tertiary, $error) { +@function generate-color-tokens($type, $primary, $tertiary, $error) { $ref: ( - md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error) + md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error) ); $sys-color: if($type == dark, mdc-tokens.md-sys-color-values-dark($ref), diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts index 93ee46da3afd..fc47dbc9be76 100644 --- a/src/material/core/theming/tests/theming-definition-api.spec.ts +++ b/src/material/core/theming/tests/theming-definition-api.spec.ts @@ -112,7 +112,6 @@ describe('theming definition api', () => { color: ( theme-type: dark, primary: matx.$m3-yellow-palette, - secondary: matx.$m3-orange-palette, tertiary: matx.$m3-red-palette, ) )); @@ -131,10 +130,10 @@ describe('theming definition api', () => { const vars = getRootVars(css); expect(vars['token-surface']).toBe('#1c1c17'); expect(vars['token-primary']).toBe('#cdcd00'); - expect(vars['token-secondary']).toBe('#ffb787'); + expect(vars['token-secondary']).toBe('#cac8a5'); expect(vars['token-tertiary']).toBe('#ffb4a8'); expect(vars['palette-primary']).toBe('#7b7b00'); - expect(vars['palette-secondary']).toBe('#bc5d00'); + expect(vars['palette-secondary']).toBe('#7a795a'); expect(vars['palette-tertiary']).toBe('#ef0000'); expect(vars['type']).toBe('dark'); });