diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel index cb8ffe0b090b..bb7390e06214 100644 --- a/src/material-experimental/mdc-theming/BUILD.bazel +++ b/src/material-experimental/mdc-theming/BUILD.bazel @@ -6,7 +6,10 @@ filegroup( name = "mdc-theming", srcs = [ ":all_themes", + ":deeppurple_amber_prebuilt", ":indigo_pink_prebuilt", + ":pink_bluegrey_prebuilt", + ":purple_green_prebuilt", ], ) @@ -54,3 +57,39 @@ sass_binary( "//src/material-experimental/mdc-typography:all_typography", ], ) + +sass_binary( + name = "deeppurple_amber_prebuilt", + src = "prebuilt/deeppurple-amber.scss", + include_paths = [ + "external/npm/node_modules", + ], + deps = [ + ":all_themes", + "//src/material-experimental/mdc-typography:all_typography", + ], +) + +sass_binary( + name = "pink_bluegrey_prebuilt", + src = "prebuilt/pink-bluegrey.scss", + include_paths = [ + "external/npm/node_modules", + ], + deps = [ + ":all_themes", + "//src/material-experimental/mdc-typography:all_typography", + ], +) + +sass_binary( + name = "purple_green_prebuilt", + src = "prebuilt/purple-green.scss", + include_paths = [ + "external/npm/node_modules", + ], + deps = [ + ":all_themes", + "//src/material-experimental/mdc-typography:all_typography", + ], +) diff --git a/src/material-experimental/mdc-theming/prebuilt/deeppurple-amber.scss b/src/material-experimental/mdc-theming/prebuilt/deeppurple-amber.scss new file mode 100644 index 000000000000..87c14812ee2b --- /dev/null +++ b/src/material-experimental/mdc-theming/prebuilt/deeppurple-amber.scss @@ -0,0 +1,24 @@ +@use '../all-theme'; +@use '../../../material/core/core'; +@use '../../../material/core/core-theme'; +@use '../../../material/core/theming/palette'; +@use '../../../material/core/theming/theming'; +@use '../../../material/core/typography/typography'; + +// Define a theme. +$primary: theming.define-palette(palette.$deep-purple-palette); +$accent: theming.define-palette(palette.$amber-palette, A200, A100, A400); + +$theme: ( + color: theming.define-light-theme($primary, $accent), + // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle + // 2018 configs. + typography: typography.define-typography-config() +); + +// Include non-theme styles for core. +@include core.core($theme); + +// Include all theme styles for the components. +@include core-theme.theme($theme); +@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-theming/prebuilt/pink-bluegrey.scss b/src/material-experimental/mdc-theming/prebuilt/pink-bluegrey.scss new file mode 100644 index 000000000000..934fc2ca9f92 --- /dev/null +++ b/src/material-experimental/mdc-theming/prebuilt/pink-bluegrey.scss @@ -0,0 +1,24 @@ +@use '../all-theme'; +@use '../../../material/core/core'; +@use '../../../material/core/core-theme'; +@use '../../../material/core/theming/palette'; +@use '../../../material/core/theming/theming'; +@use '../../../material/core/typography/typography'; + +// Define a theme. +$primary: theming.define-palette(palette.$pink-palette, 700, 500, 900); +$accent: theming.define-palette(palette.$blue-grey-palette, A200, A100, A400); + +$theme: ( + color: theming.define-dark-theme($primary, $accent), + // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle + // 2018 configs. + typography: typography.define-typography-config() +); + +// Include non-theme styles for core. +@include core.core($theme); + +// Include all theme styles for the components. +@include core-theme.theme($theme); +@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-theming/prebuilt/purple-green.scss b/src/material-experimental/mdc-theming/prebuilt/purple-green.scss new file mode 100644 index 000000000000..45dc1462643b --- /dev/null +++ b/src/material-experimental/mdc-theming/prebuilt/purple-green.scss @@ -0,0 +1,24 @@ +@use '../all-theme'; +@use '../../../material/core/core'; +@use '../../../material/core/core-theme'; +@use '../../../material/core/theming/palette'; +@use '../../../material/core/theming/theming'; +@use '../../../material/core/typography/typography'; + +// Define a theme. +$primary: theming.define-palette(palette.$purple-palette, 700, 500, 800); +$accent: theming.define-palette(palette.$green-palette, A200, A100, A400); + +$theme: ( + color: theming.define-dark-theme($primary, $accent), + // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle + // 2018 configs. + typography: typography.define-typography-config() +); + +// Include non-theme styles for core. +@include core.core($theme); + +// Include all theme styles for the components. +@include core-theme.theme($theme); +@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/package.json b/src/material-experimental/package.json index 14ee78052353..d734f924c53c 100644 --- a/src/material-experimental/package.json +++ b/src/material-experimental/package.json @@ -18,6 +18,15 @@ "./mdc-theming/prebuilt/indigo-pink.css": { "style": "./mdc-theming/prebuilt/indigo-pink.css" }, + "./mdc-theming/prebuilt/deeppurple-amber.css": { + "style": "./mdc-theming/prebuilt/deeppurple-amber.css" + }, + "./mdc-theming/prebuilt/pink-bluegrey.css": { + "style": "./mdc-theming/prebuilt/pink-bluegrey.css" + }, + "./mdc-theming/prebuilt/purple-green.css": { + "style": "./mdc-theming/prebuilt/purple-green.css" + }, "./mdc-theming/prebuilt/*": { "style": "./mdc-theming/prebuilt/*.css" }