diff --git a/src/material-experimental/theming/_definition.scss b/src/material-experimental/theming/_definition.scss index 4119c5b1593a..9d3e2a251e0c 100644 --- a/src/material-experimental/theming/_definition.scss +++ b/src/material-experimental/theming/_definition.scss @@ -38,7 +38,7 @@ $theme-version: 1; } $type: map.get($config, theme-type) or light; - $primary: map.get($config, primary) or m3-palettes.$indigo-palette; + $primary: map.get($config, primary) or m3-palettes.$purple-palette; $secondary: map.get($config, secondary) or $primary; $tertiary: map.get($config, tertiary) or $secondary; @@ -47,15 +47,15 @@ $theme-version: 1; theme-version: $theme-version, theme-type: $type, palettes: ( - primary: map.remove($primary, neutral-variant), - secondary: map.remove($secondary, neutral-variant), - tertiary: map.remove($tertiary, neutral-variant), - neutral: m3-palettes.$neutral-palette, + primary: map.remove($primary, neutral, neutral-variant), + secondary: map.remove($secondary, neutral, neutral-variant), + tertiary: map.remove($tertiary, neutral, neutral-variant), + neutral: map.get($primary, neutral), neutral-variant: map.get($primary, neutral-variant), - error: m3-palettes.$red-palette + error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant), ), - color-tokens: m3-tokens.generate-color-tokens($type, $primary, $secondary, $tertiary, - m3-palettes.$neutral-palette, m3-palettes.$red-palette) + color-tokens: m3-tokens.generate-color-tokens( + $type, $primary, $secondary, $tertiary, m3-palettes.$red-palette) ) ); } diff --git a/src/material-experimental/theming/_m3-palettes.scss b/src/material-experimental/theming/_m3-palettes.scss index bcd3e96061a1..5064e49f7a25 100644 --- a/src/material-experimental/theming/_m3-palettes.scss +++ b/src/material-experimental/theming/_m3-palettes.scss @@ -1,105 +1,123 @@ -/// Red color palette to be used as primary, secondary, or tertiary palette. -$red-palette: ( - 0: #000, - 10: #410000, - 20: #690100, - 30: #930100, - 40: #c00100, - 50: #ef0000, - 60: #ff5540, - 70: #ff8a78, - 80: #ffb4a8, - 90: #ffdad4, - 95: #ffedea, +/// Blue color palette to be used as primary, secondary, or tertiary palette. +$blue-palette: ( + 0: #000000, + 10: #00006e, + 20: #0001ac, + 25: #0001cd, + 30: #0000ef, + 35: #1a21ff, + 40: #343dff, + 50: #5a64ff, + 60: #7c84ff, + 70: #9da3ff, + 80: #bec2ff, + 90: #e0e0ff, + 95: #f1efff, + 98: #fbf8ff, 99: #fffbff, - 100: #fff, - neutral-variant: ( - 0: #000, - 10: #251917, - 20: #3b2d2b, - 30: #534341, - 40: #6c5a58, - 50: #857370, - 60: #a08c89, - 70: #bca7a3, - 80: #d8c2be, - 90: #f5ddda, - 95: #ffedea, + 100: #ffffff, + neutral: ( + 0: #000000, + 10: #1b1b1f, + 20: #303034, + 25: #3c3b3f, + 30: #47464a, + 35: #535256, + 40: #5f5e62, + 50: #78767a, + 60: #929094, + 70: #adaaaf, + 80: #c8c5ca, + 90: #e5e1e6, + 95: #f3eff4, + 98: #fcf8fd, 99: #fffbff, - 100: #fff, + 100: #ffffff, ), -); - -/// Orange color palette to be used as primary, secondary, or tertiary palette. -$orange-palette: ( - 0: #000, - 10: #2a1700, - 20: #462a00, - 30: #653e00, - 40: #855400, - 50: #a66a00, - 60: #c98100, - 70: #ed9900, - 80: #ffb95c, - 90: #ffddb7, - 95: #ffeede, - 99: #fffbff, - 100: #fff, neutral-variant: ( - 0: #000, - 10: #221a10, - 20: #382f24, - 30: #504539, - 40: #685c50, - 50: #827568, - 60: #9c8e80, - 70: #b8a99a, - 80: #d4c4b5, - 90: #f0e0d0, - 95: #ffeede, + 0: #000000, + 10: #1b1b23, + 20: #303038, + 25: #3b3b43, + 30: #46464f, + 35: #52515b, + 40: #5e5d67, + 50: #777680, + 60: #91909a, + 70: #acaab4, + 80: #c7c5d0, + 90: #e4e1ec, + 95: #f2effa, + 98: #fbf8ff, 99: #fffbff, - 100: #fff, + 100: #ffffff, ), ); -/// Yellow color palette to be used as primary, secondary, or tertiary palette. -$yellow-palette: ( - 0: #000, - 10: #1d1d00, - 20: #323200, - 30: #494900, - 40: #626200, - 50: #7b7b00, - 60: #969600, - 70: #b1b100, - 80: #cdcd00, - 90: #eaea00, - 95: #f9f900, - 99: #fffbff, - 100: #fff, +/// Cyan color palette to be used as primary, secondary, or tertiary palette. +$cyan-palette: ( + 0: #000000, + 10: #002020, + 20: #003737, + 25: #004343, + 30: #004f4f, + 35: #005c5c, + 40: #006a6a, + 50: #008585, + 60: #00a1a1, + 70: #00bebe, + 80: #00dddd, + 90: #00fbfb, + 95: #adfffe, + 98: #e2fffe, + 99: #f1fffe, + 100: #ffffff, + neutral: ( + 0: #000000, + 10: #191c1c, + 20: #2d3131, + 25: #383c3c, + 30: #444747, + 35: #4f5353, + 40: #5b5f5f, + 50: #747877, + 60: #8e9191, + 70: #a9acab, + 80: #c4c7c6, + 90: #e0e3e2, + 95: #eff1f0, + 98: #f7faf9, + 99: #fafdfc, + 100: #ffffff, + ), neutral-variant: ( - 0: #000, - 10: #1c1c11, - 20: #313125, - 30: #48473a, - 40: #605f51, - 50: #797869, - 60: #939182, - 70: #aeac9b, - 80: #cac7b6, - 90: #e6e3d1, - 95: #f4f1df, - 99: #fffbff, - 100: #fff, + 0: #000000, + 10: #141d1d, + 20: #293232, + 25: #343d3d, + 30: #3f4948, + 35: #4a5454, + 40: #566060, + 50: #6f7979, + 60: #889392, + 70: #a3adad, + 80: #bec9c8, + 90: #dae5e4, + 95: #e9f3f2, + 98: #f1fbfa, + 99: #f4fefd, + 100: #ffffff, ), ); /// Green color palette to be used as primary, secondary, or tertiary palette. $green-palette: ( - 0: #000, + 0: #000000, 10: #002200, 20: #013a00, + 25: #014600, 30: #015300, + 35: #026100, 40: #026e00, 50: #038b00, 60: #03a800, @@ -107,13 +125,16 @@ $green-palette: ( 80: #02e600, 90: #77ff61, 95: #cbffb8, + 98: #edffe1, 99: #f7ffee, - 100: #fff, - neutral-variant: ( - 0: #000, + 100: #ffffff, + neutral: ( + 0: #000000, 10: #1a1c18, 20: #2f312d, + 25: #3a3c38, 30: #454743, + 35: #51534e, 40: #5d5f5a, 50: #767872, 60: #90918c, @@ -121,131 +142,306 @@ $green-palette: ( 80: #c6c7c1, 90: #e2e3dc, 95: #f1f1eb, + 98: #f9faf3, 99: #fcfdf6, - 100: #fff, + 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, secondary, or tertiary palette. -$blue-palette: ( - 0: #000, - 10: #00006e, - 20: #0001ac, - 30: #0000ef, - 40: #343dff, - 50: #5a64ff, - 60: #7c84ff, - 70: #9da3ff, - 80: #bec2ff, - 90: #e0e0ff, - 95: #f1efff, +/// Magenta color palette to be used as primary, secondary, or tertiary palette. +$magenta-palette: ( + 0: #000000, + 10: #380038, + 20: #5b005b, + 25: #6e006e, + 30: #810081, + 35: #950094, + 40: #a900a9, + 50: #d200d2, + 60: #fe00fe, + 70: #ff76f6, + 80: #ffabf3, + 90: #ffd7f5, + 95: #ffebf8, + 98: #fff7f9, 99: #fffbff, - 100: #fff, + 100: #ffffff, + neutral: ( + 0: #000000, + 10: #1e1a1d, + 20: #342f32, + 25: #3f3a3d, + 30: #4b4548, + 35: #575154, + 40: #635d60, + 50: #7c7579, + 60: #968f92, + 70: #b1a9ad, + 80: #cdc4c8, + 90: #e9e0e4, + 95: #f8eef2, + 98: #fff7f9, + 99: #fffbff, + 100: #ffffff, + ), neutral-variant: ( - 0: #000, - 10: #1b1b23, - 20: #303038, - 30: #46464f, - 40: #5e5d67, - 50: #777680, - 60: #91909a, - 70: #acaab4, - 80: #c7c5d0, - 90: #e4e1ec, - 95: #f2effa, + 0: #000000, + 10: #21191f, + 20: #372e34, + 25: #423940, + 30: #4e444b, + 35: #5a4f57, + 40: #665b63, + 50: #80747c, + 60: #9a8d95, + 70: #b5a7b0, + 80: #d1c2cb, + 90: #eedee7, + 95: #fcecf5, + 98: #fff7f9, 99: #fffbff, - 100: #fff, + 100: #ffffff, ), ); -/// Indigo color palette to be used as primary, secondary, or tertiary palette. -$indigo-palette: ( - 0: #000, - 10: #2c0050, - 20: #4a0080, - 30: #622599, - 40: #7b41b3, - 50: #965bce, - 60: #b175ea, - 70: #cb93ff, - 80: #ddb7ff, - 90: #f0dbff, - 95: #faecff, +/// Orange color palette to be used as primary, secondary, or tertiary palette. +$orange-palette: ( + 0: #000000, + 10: #311300, + 20: #502400, + 25: #612d00, + 30: #723600, + 35: #843f00, + 40: #964900, + 50: #bc5d00, + 60: #e37100, + 70: #ff8e36, + 80: #ffb787, + 90: #ffdcc7, + 95: #ffede4, + 98: #fff8f5, 99: #fffbff, - 100: #fff, + 100: #ffffff, + neutral: ( + 0: #000000, + 10: #201a17, + 20: #362f2b, + 25: #413a36, + 30: #4d4541, + 35: #59514d, + 40: #655d58, + 50: #7e7571, + 60: #998f8a, + 70: #b4a9a4, + 80: #d0c4bf, + 90: #ece0da, + 95: #fbeee8, + 98: #fff8f5, + 99: #fffbff, + 100: #ffffff, + ), neutral-variant: ( - 0: #000, - 10: #1e1a22, - 20: #342f37, - 30: #4a454e, - 40: #625c65, - 50: #7c757e, - 60: #968e98, - 70: #b1a8b3, - 80: #cdc4ce, - 90: #e9dfeb, - 95: #f7eef9, + 0: #000000, + 10: #241912, + 20: #3a2e26, + 25: #463931, + 30: #52443c, + 35: #5e4f47, + 40: #6b5b52, + 50: #84746a, + 60: #9f8d83, + 70: #baa79d, + 80: #d7c3b8, + 90: #f4ded3, + 95: #ffede4, + 98: #fff8f5, 99: #fffbff, - 100: #fff, + 100: #ffffff, ), ); -/// Violet color palette to be used as primary, secondary, or tertiary palette. -$violet-palette: ( - 0: #000, +/// Purple color palette to be used as primary, secondary, or tertiary palette. +$purple-palette: ( + 0: #000000, 10: #270057, 20: #42008a, - 30: #5e00c1, + 25: #5000a4, + 30: #5f00c0, + 35: #6e00dc, 40: #7d00fa, - 50: #934bff, + 50: #944aff, 60: #a974ff, 70: #bf98ff, 80: #d5baff, 90: #ecdcff, 95: #f7edff, + 98: #fef7ff, 99: #fffbff, - 100: #fff, + 100: #ffffff, + neutral: ( + 0: #000000, + 10: #1d1b1e, + 20: #323033, + 25: #3d3a3e, + 30: #49464a, + 35: #545155, + 40: #605d61, + 50: #7a767a, + 60: #948f94, + 70: #aeaaae, + 80: #cac5ca, + 90: #e6e1e6, + 95: #f5eff4, + 98: #fef8fc, + 99: #fffbff, + 100: #ffffff, + ), neutral-variant: ( - 0: #000, + 0: #000000, 10: #1d1a22, 20: #332f37, + 25: #3e3a42, 30: #49454e, + 35: #55515a, 40: #615c66, 50: #7b757f, 60: #958e99, - 70: #afa9b3, + 70: #b0a9b3, 80: #cbc4cf, 90: #e8e0eb, 95: #f6eef9, + 98: #fef7ff, 99: #fffbff, - 100: #fff, + 100: #ffffff, ), ); -/// Gray palette used for backgrounds and surfaces. -$neutral-palette: ( - 0: #000, - 4: #0e0e11, - 6: #141317, - 10: #1c1b1f, - 12: #201f23, - 17: #2b292d, - 20: #313033, - 22: #313033, - 24: #313033, - 30: #484649, - 40: #605d62, - 50: #787579, - 60: #939094, - 70: #aeaaae, - 80: #c9c5ca, - 87: #ddd8dd, - 90: #e6e1e5, - 92: #ece7ec, - 94: #f1ecf1, - 95: #f4eff4, - 96: #f7f2f7, - 98: #fdf8fd, - 99: #fffbfe, - 100: #fff, +/// Red color palette to be used as primary, secondary, or tertiary palette. +$red-palette: ( + 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, + 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, + ), +); + +/// Yellow color palette to be used as primary, secondary, or tertiary palette. +$yellow-palette: ( + 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, + 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, + ), ); diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 1dd47ddf9403..e3566f7f9ab0 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -65,7 +65,7 @@ /// @param {String} $prefix The key prefix used to name the tokens /// @return {Map} A set of tokens for the given palette @function _generate-palette-tokens($palette, $prefix) { - $palette: map.remove($palette, neutral-variant); + $palette: map.remove($palette, neutral, neutral-variant); $result: (); @each $hue, $value in $palette { $result: map.set($result, '#{$prefix}#{$hue}', $value); @@ -78,16 +78,15 @@ /// @param {Map} $primary The primary palette /// @param {Map} $secondary The secondary palette /// @param {Map} $tertiary The tertiary palette -/// @param {Map} $neutral The neutral palette /// @param {Map} $error The error palette /// @return {Map} A set of `md-ref-palette` tokens -@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $neutral, $error) { +@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error) { @return mat.private-merge-all( (black: #000, white: #fff), _generate-palette-tokens($primary, primary), _generate-palette-tokens($secondary, secondary), _generate-palette-tokens($tertiary, tertiary), - _generate-palette-tokens($neutral, neutral), + _generate-palette-tokens(map.get($primary, neutral), neutral), _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant), _generate-palette-tokens($error, error), ); @@ -329,12 +328,11 @@ /// @param {Map} $primary The primary palette /// @param {Map} $secondary The secondary palette /// @param {Map} $tertiary The tertiary palette -/// @param {Map} $neutral The neutral palette /// @param {Map} $error The error palette /// @return {Map} A map of namespaced color tokens -@function generate-color-tokens($type, $primary, $secondary, $tertiary, $neutral, $error) { +@function generate-color-tokens($type, $primary, $secondary, $tertiary, $error) { $ref: ( - md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $neutral, $error) + md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $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 e2e56a235f0f..93ee46da3afd 100644 --- a/src/material/core/theming/tests/theming-definition-api.spec.ts +++ b/src/material/core/theming/tests/theming-definition-api.spec.ts @@ -129,12 +129,12 @@ describe('theming definition api', () => { } `); const vars = getRootVars(css); - expect(vars['token-surface']).toBe('#1c1b1f'); + expect(vars['token-surface']).toBe('#1c1c17'); expect(vars['token-primary']).toBe('#cdcd00'); - expect(vars['token-secondary']).toBe('#ffb95c'); + expect(vars['token-secondary']).toBe('#ffb787'); expect(vars['token-tertiary']).toBe('#ffb4a8'); expect(vars['palette-primary']).toBe('#7b7b00'); - expect(vars['palette-secondary']).toBe('#a66a00'); + expect(vars['palette-secondary']).toBe('#bc5d00'); expect(vars['palette-tertiary']).toBe('#ef0000'); expect(vars['type']).toBe('dark'); }); diff --git a/src/material/core/theming/tests/theming-inspection-api.spec.ts b/src/material/core/theming/tests/theming-inspection-api.spec.ts index 74c72bf5aa17..d64000977a33 100644 --- a/src/material/core/theming/tests/theming-inspection-api.spec.ts +++ b/src/material/core/theming/tests/theming-inspection-api.spec.ts @@ -273,7 +273,7 @@ describe('theming inspection api', () => { color: mat.get-theme-color($theme, primary-container); } `), - ).toMatch('color: #f0dbff;'); + ).toMatch('color: #ecdcff;'); }); it('should error on invalid color role', () => { @@ -295,7 +295,7 @@ describe('theming inspection api', () => { color: mat.get-theme-color($theme, tertiary, 20); } `), - ).toMatch('color: #4a0080;'); + ).toMatch('color: #42008a;'); }); it('should error on invalid color palette', () => {