diff --git a/editor/assets/stylesheets/_admin-schemes.scss b/editor/assets/stylesheets/_admin-schemes.scss new file mode 100644 index 00000000000000..bf181b1b9b6b9e --- /dev/null +++ b/editor/assets/stylesheets/_admin-schemes.scss @@ -0,0 +1,63 @@ +/** + * Admin Color Scheme Overrides + */ + +// All color schemes, body.admin-color ... +// -fresh (default, needs no overriding) +// -light (needs no overriding) +// -blue +// -coffee +// -ectoplasm +// -midnight +// -ocean +// -sunrise + +// List of Gutenberg elements that need to be overridden +// - primary buttons (parent bleeds in) +// - switches +// - tab indicators + +// List of spot colors (eyedropped from the primary button) +$scheme-fresh__spot-color: #0083b8; +$scheme-blue__spot-color: #e1a84b; +$scheme-coffee__spot-color: #c6a488; +$scheme-ectoplasm__spot-color: #a0b748; +$scheme-midnight__spot-color: #e34e46; +$scheme-ocean__spot-color: #9bb99f; +$scheme-sunrise__spot-color: #de823f; + +// Color override mixin +@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color ) { + body.admin-color-#{ ( $scheme ) } { + // Tab indicators + .editor-sidebar__panel-tab.is-active, + .editor-inserter__tab.is-active { + border-bottom-color: $spot-color; + } + + // Switch + .components-form-toggle.is-checked { + .components-form-toggle__track { + background-color: $spot-color; + border-color: $spot-color; + } + + .components-form-toggle__thumb { + background-color: $spot-color; + } + + &:before { + background-color: $spot-color; + border-color: $spot-color; + } + } + } +} + +// Output overrides for each scheme +@include admin-scheme-color-overrides( 'blue', $scheme-blue__spot-color ); +@include admin-scheme-color-overrides( 'coffee', $scheme-coffee__spot-color ); +@include admin-scheme-color-overrides( 'ectoplasm', $scheme-ectoplasm__spot-color ); +@include admin-scheme-color-overrides( 'midnight', $scheme-midnight__spot-color ); +@include admin-scheme-color-overrides( 'ocean', $scheme-ocean__spot-color ); +@include admin-scheme-color-overrides( 'sunrise', $scheme-sunrise__spot-color ); diff --git a/webpack.config.js b/webpack.config.js index 0ba7feda8176f4..c8bfd992ba0f8f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -36,7 +36,7 @@ const extractConfig = { loader: 'sass-loader', query: { includePaths: [ 'editor/assets/stylesheets' ], - data: '@import "colors"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";', + data: '@import "colors"; @import "admin-schemes"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";', outputStyle: 'production' === process.env.NODE_ENV ? 'compressed' : 'nested', },