From 994b7d6d17b476ccffe024b77d312550467eaec8 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 17 Nov 2020 16:13:53 +0100 Subject: [PATCH 01/34] Admin Color Schemes: generate wp-admin color schemes from Calypso counterparts --- .../class-admin-color-schemes.php | 19 + .../admin-color-schemes/colors/_admin.scss | 761 ++++++++++++++++++ .../admin-color-schemes/colors/_mixins.scss | 37 + .../colors/_variables.scss | 65 ++ .../colors/classic-bright/colors.scss | 17 + tools/builder/sass.js | 34 +- 6 files changed, 932 insertions(+), 1 deletion(-) create mode 100644 modules/masterbar/admin-color-schemes/colors/_admin.scss create mode 100644 modules/masterbar/admin-color-schemes/colors/_mixins.scss create mode 100644 modules/masterbar/admin-color-schemes/colors/_variables.scss create mode 100644 modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index af7539df085b9..5faaf569336a0 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -16,6 +16,7 @@ class Admin_Color_Schemes { * Admin_Color_Schemes constructor. */ public function __construct() { + add_action( 'admin_init', array( $this, 'register_admin_color_schemes' ) ); add_action( 'rest_api_init', array( $this, 'register_admin_color_meta' ) ); } @@ -49,4 +50,22 @@ public function register_admin_color_meta() { public function update_admin_color_permissions_check( $allowed, $meta_key, $object_id ) { // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter, VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable return current_user_can( 'edit_user', $object_id ); } + + /** + * Registers new admin color schemes + */ + public function register_admin_color_schemes() { + + wp_admin_css_color( + 'classic-bright', + __( 'Classic Bright', 'jetpack' ), + plugins_url( 'colors/classic-bright/colors.css', __FILE__ ), + array( '#135e96', '#c9256e', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/_admin.scss b/modules/masterbar/admin-color-schemes/colors/_admin.scss new file mode 100644 index 0000000000000..acdc1beb24175 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/_admin.scss @@ -0,0 +1,761 @@ + +@import 'variables'; +@import 'mixins'; + +@function url-friendly-colour( $color ) { + @return '%23' + str-slice( '#{ $color }', 2, -1 ); +} + +body { + background: $body-background; +} + + +/* Links */ + +a { + color: $link; + + &:hover, + &:active, + &:focus { + color: $link-focus; + } +} + +#post-body .misc-pub-post-status:before, +#post-body #visibility:before, +.curtime #timestamp:before, +#post-body .misc-pub-revisions:before, +span.wp-media-buttons-icon:before { + color: currentColor; +} + +.wp-core-ui .button-link { + color: $link; + + &:hover, + &:active, + &:focus { + color: $link-focus; + } +} + +.media-modal .delete-attachment, +.media-modal .trash-attachment, +.media-modal .untrash-attachment, +.wp-core-ui .button-link-delete { + color: #a00; +} + +.media-modal .delete-attachment:hover, +.media-modal .trash-attachment:hover, +.media-modal .untrash-attachment:hover, +.media-modal .delete-attachment:focus, +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:focus, +.wp-core-ui .button-link-delete:hover, +.wp-core-ui .button-link-delete:focus { + color: #dc3232; +} + +/* Forms */ + +input[type=checkbox]:checked::before { + content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E"); +} + +input[type=radio]:checked::before { + background: $form-checked; +} + +.wp-core-ui input[type="reset"]:hover, +.wp-core-ui input[type="reset"]:active { + color: $link-focus; +} + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="color"]:focus, +input[type="date"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="email"]:focus, +input[type="month"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="text"]:focus, +input[type="time"]:focus, +input[type="url"]:focus, +input[type="week"]:focus, +input[type="checkbox"]:focus, +input[type="radio"]:focus, +select:focus, +textarea:focus { + border-color: $highlight-color; + box-shadow: 0 0 0 1px $highlight-color; +} + + +/* Core UI */ + +.wp-core-ui { + + .button { + border-color: #7e8993; + color: #32373c; + } + + .button.hover, + .button:hover, + .button.focus, + .button:focus { + border-color: darken( #7e8993, 5% ); + color: darken( #32373c, 5% ); + } + + .button.focus, + .button:focus { + border-color: #7e8993; + color: darken( #32373c, 5% ); + box-shadow: 0 0 0 1px #32373c; + } + + .button:active { + border-color: #7e8993; + color: darken( #32373c, 5% ); + box-shadow: none; + } + + .button.active, + .button.active:focus, + .button.active:hover { + border-color: $button-color; + color: darken( #32373c, 5% ); + box-shadow: inset 0 2px 5px -3px $button-color; + } + + .button.active:focus { + box-shadow: 0 0 0 1px #32373c; + } + + @if ( $low-contrast-theme != "true" ) { + .button, + .button-secondary { + color: $highlight-color; + border-color: $highlight-color; + } + + .button.hover, + .button:hover, + .button-secondary:hover{ + border-color: darken($highlight-color, 10); + color: darken($highlight-color, 10); + } + + .button.focus, + .button:focus, + .button-secondary:focus { + border-color: lighten($highlight-color, 10); + color: darken($highlight-color, 20);; + box-shadow: 0 0 0 1px lighten($highlight-color, 10); + } + + .button-primary { + &:hover { + color: #fff; + } + } + } + + .button-primary { + @include button( $button-color ); + } + + .button-group > .button.active { + border-color: $button-color; + } + + .wp-ui-primary { + color: $text-color; + background-color: $base-color; + } + .wp-ui-text-primary { + color: $base-color; + } + + .wp-ui-highlight { + color: $menu-highlight-text; + background-color: $menu-highlight-background; + } + .wp-ui-text-highlight { + color: $menu-highlight-background; + } + + .wp-ui-notification { + color: $menu-bubble-text; + background-color: $menu-bubble-background; + } + .wp-ui-text-notification { + color: $menu-bubble-background; + } + + .wp-ui-text-icon { + color: $menu-icon; + } +} + + +/* List tables */ +@if $low-contrast-theme == "true" { + .wrap .page-title-action:hover { + color: $menu-text; + background-color: $menu-background; + } +} @else { + .wrap .page-title-action, + .wrap .page-title-action:active { + border: 1px solid $highlight-color; + color: $highlight-color; + } + + .wrap .page-title-action:hover { + color: darken($highlight-color, 10); + border-color: darken($highlight-color, 10); + } + + .wrap .page-title-action:focus { + border-color: lighten($highlight-color, 10); + color: darken($highlight-color, 20);; + box-shadow: 0 0 0 1px lighten($highlight-color, 10); + } +} + +.view-switch a.current:before { + color: $menu-background; +} + +.view-switch a:hover:before { + color: $menu-bubble-background; +} + + +/* Admin Menu */ + +#adminmenuback, +#adminmenuwrap, +#adminmenu { + background: $menu-background; +} + +#adminmenu a { + color: $menu-text; +} + +#adminmenu div.wp-menu-image:before { + color: $menu-icon; +} + +#adminmenu a:hover, +#adminmenu li.menu-top:hover, +#adminmenu li.opensub > a.menu-top, +#adminmenu li > a.menu-top:focus { + color: $menu-highlight-text; + background-color: $menu-highlight-background; +} + +#adminmenu li.menu-top:hover div.wp-menu-image:before, +#adminmenu li.opensub > a.menu-top div.wp-menu-image:before { + color: $menu-highlight-icon; +} + + +/* Active tabs use a bottom border color that matches the page background color. */ + +.about-wrap .nav-tab-active, +.nav-tab-active, +.nav-tab-active:hover { + background-color: $body-background; + border-bottom-color: $body-background; +} + + +/* Admin Menu: submenu */ + +#adminmenu .wp-submenu, +#adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu, +.folded #adminmenu .wp-has-current-submenu .wp-submenu, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + background: $menu-submenu-background; +} + +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { + border-right-color: $menu-submenu-background; +} + +#adminmenu .wp-submenu .wp-submenu-head { + color: $menu-submenu-text; +} + +#adminmenu .wp-submenu a, +#adminmenu .wp-has-current-submenu .wp-submenu a, +.folded #adminmenu .wp-has-current-submenu .wp-submenu a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu a { + color: $menu-submenu-text; + + &:focus, &:hover { + color: $menu-submenu-focus-text; + } +} + + +/* Admin Menu: current */ + +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + color: $menu-submenu-current-text; + + &:hover, &:focus { + color: $menu-submenu-focus-text; + } +} + +ul#adminmenu a.wp-has-current-submenu:after, +ul#adminmenu > li.current > a.current:after { + border-right-color: $body-background; +} + +#adminmenu li.current a.menu-top, +#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, +#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, +.folded #adminmenu li.current.menu-top { + color: $menu-current-text; + background: $menu-current-background; +} + +#adminmenu li.wp-has-current-submenu div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, +#adminmenu li:hover div.wp-menu-image:before, +#adminmenu li a:focus div.wp-menu-image:before, +#adminmenu li.opensub div.wp-menu-image:before { + color: $menu-current-icon; +} + + +/* Admin Menu: bubble */ + +#adminmenu .awaiting-mod, +#adminmenu .update-plugins { + color: $menu-bubble-text; + background: $menu-bubble-background; +} + +#adminmenu li.current a .awaiting-mod, +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + color: $menu-bubble-current-text; + background: $menu-bubble-current-background; +} + + +/* Admin Menu: collapse button */ + +#collapse-button { + color: $menu-collapse-text; +} + +#collapse-button:hover, +#collapse-button:focus { + color: $menu-submenu-focus-text; +} + +/* Admin Bar */ + +#wpadminbar { + color: $menu-text; + background: $menu-background; +} + +#wpadminbar .ab-item, +#wpadminbar a.ab-item, +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { + color: $menu-text; +} + +#wpadminbar .ab-icon, +#wpadminbar .ab-icon:before, +#wpadminbar .ab-item:before, +#wpadminbar .ab-item:after { + color: $menu-icon; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + color: $menu-submenu-focus-text; + background: $menu-submenu-background; +} + +#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, +#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { + color: $menu-submenu-focus-text; +} + +#wpadminbar:not(.mobile) li:hover .ab-icon:before, +#wpadminbar:not(.mobile) li:hover .ab-item:before, +#wpadminbar:not(.mobile) li:hover .ab-item:after, +#wpadminbar:not(.mobile) li:hover #adminbarsearch:before { + color: $menu-highlight-icon; +} + + +/* Admin Bar: submenu */ + +#wpadminbar .menupop .ab-sub-wrapper { + background: $menu-submenu-background; +} + +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary, +#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { + background: $menu-submenu-background-alt; +} + +#wpadminbar .ab-submenu .ab-item, +#wpadminbar .quicklinks .menupop ul li a, +#wpadminbar .quicklinks .menupop.hover ul li a, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a { + color: $menu-submenu-text; +} + +#wpadminbar .quicklinks li .blavatar, +#wpadminbar .menupop .menupop > .ab-item:before { + color: $menu-icon; +} + +#wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, +#wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li .ab-item:focus .ab-icon:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before, +#wpadminbar li #adminbarsearch.adminbar-focused:before { + color: $menu-submenu-focus-text; +} + +#wpadminbar .quicklinks li a:hover .blavatar, +#wpadminbar .quicklinks li a:focus .blavatar, +#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, +#wpadminbar .menupop .menupop > .ab-item:hover:before, +#wpadminbar.mobile .quicklinks .ab-icon:before, +#wpadminbar.mobile .quicklinks .ab-item:before { + color: $menu-submenu-focus-text; +} + +#wpadminbar.mobile .quicklinks .hover .ab-icon:before, +#wpadminbar.mobile .quicklinks .hover .ab-item:before { + color: $menu-icon; +} + + +/* Admin Bar: search */ + +#wpadminbar #adminbarsearch:before { + color: $menu-icon; +} + +#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { + color: $menu-text; + background: $adminbar-input-background; +} + +/* Admin Bar: recovery mode */ + +#wpadminbar #wp-admin-bar-recovery-mode { + color: $adminbar-recovery-exit-text; + background-color: $adminbar-recovery-exit-background; +} + +#wpadminbar #wp-admin-bar-recovery-mode .ab-item, +#wpadminbar #wp-admin-bar-recovery-mode a.ab-item { + color: $adminbar-recovery-exit-text; +} + +#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item, +#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { + color: $adminbar-recovery-exit-text; + background-color: $adminbar-recovery-exit-background-alt; +} + +/* Admin Bar: my account */ + +#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + border-color: $adminbar-avatar-frame; + background-color: $adminbar-avatar-frame; +} + +#wpadminbar #wp-admin-bar-user-info .display-name { + color: $menu-text; +} + +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: $menu-submenu-focus-text; +} + +#wpadminbar #wp-admin-bar-user-info .username { + color: $menu-submenu-text; +} + + +/* Pointers */ + +.wp-pointer .wp-pointer-content h3 { + background-color: $highlight-color; + border-color: darken( $highlight-color, 5% ); +} + +.wp-pointer .wp-pointer-content h3:before { + color: $highlight-color; +} + +.wp-pointer.wp-pointer-top .wp-pointer-arrow, +.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow, +.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { + border-bottom-color: $highlight-color; +} + + +/* Media */ + +.media-item .bar, +.media-progress-bar div { + background-color: $highlight-color; +} + +.details.attachment { + box-shadow: + inset 0 0 0 3px #fff, + inset 0 0 0 7px $highlight-color; +} + +.attachment.details .check { + background-color: $highlight-color; + box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color; +} + +.media-selection .attachment.selection.details .thumbnail { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color; +} + + +/* Themes */ + +.theme-browser .theme.active .theme-name, +.theme-browser .theme.add-new-theme a:hover:after, +.theme-browser .theme.add-new-theme a:focus:after { + background: $highlight-color; +} + +.theme-browser .theme.add-new-theme a:hover span:after, +.theme-browser .theme.add-new-theme a:focus span:after { + color: $highlight-color; +} + +.theme-section.current, +.theme-filter.current { + border-bottom-color: $menu-background; +} + +body.more-filters-opened .more-filters { + color: $menu-text; + background-color: $menu-background; +} + +body.more-filters-opened .more-filters:before { + color: $menu-text; +} + +body.more-filters-opened .more-filters:hover, +body.more-filters-opened .more-filters:focus { + background-color: $menu-highlight-background; + color: $menu-highlight-text; +} + +body.more-filters-opened .more-filters:hover:before, +body.more-filters-opened .more-filters:focus:before { + color: $menu-highlight-text; +} + +/* Widgets */ + +.widgets-chooser li.widgets-chooser-selected { + background-color: $menu-highlight-background; + color: $menu-highlight-text; +} + +.widgets-chooser li.widgets-chooser-selected:before, +.widgets-chooser li.widgets-chooser-selected:focus:before { + color: $menu-highlight-text; +} + +/* Responsive Component */ + +div#wp-responsive-toggle a:before { + color: $menu-icon; +} + +.wp-responsive-open div#wp-responsive-toggle a { + // ToDo: make inset border + border-color: transparent; + background: $menu-highlight-background; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: $menu-submenu-background; +} + +.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { + color: $menu-icon; +} + +/* TinyMCE */ + +.mce-container.mce-menu .mce-menu-item:hover, +.mce-container.mce-menu .mce-menu-item.mce-selected, +.mce-container.mce-menu .mce-menu-item:focus, +.mce-container.mce-menu .mce-menu-item-normal.mce-active, +.mce-container.mce-menu .mce-menu-item-preview.mce-active { + background: $highlight-color; +} + +/* Customizer */ +#customize-controls .control-section:hover > .accordion-section-title, +#customize-controls .control-section .accordion-section-title:hover, +#customize-controls .control-section.open .accordion-section-title, +#customize-controls .control-section .accordion-section-title:focus { + color: $highlight-color; + border-left-color: $highlight-color; +} + +.customize-controls-close:focus, +.customize-controls-close:hover, +.customize-controls-preview-toggle:focus, +.customize-controls-preview-toggle:hover { + color: $highlight-color; + border-top-color: $highlight-color; +} + +.customize-panel-back:hover, +.customize-panel-back:focus, +.customize-section-back:hover, +.customize-section-back:focus { + color: $highlight-color; + border-left-color: $highlight-color; +} + +.customize-screen-options-toggle:hover, +.customize-screen-options-toggle:active, +.customize-screen-options-toggle:focus, +.active-menu-screen-options .customize-screen-options-toggle, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, +#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { + color: $highlight-color; +} + +.wp-customizer .menu-item .submitbox .submitdelete:focus, +.customize-screen-options-toggle:focus:before, +#customize-controls .customize-info .customize-help-toggle:focus:before, +.wp-customizer button:focus .toggle-indicator:before, +.menu-delete:focus, +.menu-item-bar .item-delete:focus:before, +#available-menu-items .item-add:focus:before { + box-shadow: + 0 0 0 1px lighten($highlight-color, 10), + 0 0 2px 1px $highlight-color; +} + +#customize-controls .customize-info.open .customize-help-toggle, +#customize-controls .customize-info .customize-help-toggle:focus, +#customize-controls .customize-info .customize-help-toggle:hover { + color: $highlight-color; +} + +.control-panel-themes .customize-themes-section-title:focus, +.control-panel-themes .customize-themes-section-title:hover { + border-left-color: $highlight-color; + color: $highlight-color; +} + +.control-panel-themes .theme-section .customize-themes-section-title.selected:after { + background: $highlight-color; +} + +.control-panel-themes .customize-themes-section-title.selected { + color: $highlight-color; +} + +#customize-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:hover:after, +#customize-theme-controls .control-section.open .accordion-section-title:after, +#customize-theme-controls .control-section .accordion-section-title:focus:after, +#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:hover:after, +#customize-outer-theme-controls .control-section.open .accordion-section-title:after, +#customize-outer-theme-controls .control-section .accordion-section-title:focus:after { + color: $highlight-color; +} + +.customize-control .attachment-media-view .button-add-media:focus { + background-color: #fbfbfc; + border-color: $highlight-color; + border-style: solid; + box-shadow: 0 0 0 1px $highlight-color; + outline: 2px solid transparent; +} + +.wp-full-overlay-footer .devices button:focus, +.wp-full-overlay-footer .devices button.active:hover { + border-bottom-color: $highlight-color; +} + +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { + color: $highlight-color; +} + +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + box-shadow: + 0 0 0 1px lighten($highlight-color, 10), + 0 0 2px 1px $highlight-color; +} + +.wp-full-overlay-footer .devices button:hover:before, +.wp-full-overlay-footer .devices button:focus:before { + color: $highlight-color; +} \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/_mixins.scss b/modules/masterbar/admin-color-schemes/colors/_mixins.scss new file mode 100644 index 0000000000000..8b98922bb14d9 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/_mixins.scss @@ -0,0 +1,37 @@ +/* + * Button mixin- creates a button effect with correct + * highlights/shadows, based on a base color. + */ + @mixin button( $button-color, $button-text-color: #fff ) { + background: $button-color; + border-color: $button-color; + color: $button-text-color; + + &:hover, + &:focus { + background: lighten( $button-color, 3% ); + border-color: darken( $button-color, 3% ); + color: $button-text-color; + } + + &:focus { + box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px $button-color; + } + + &:active { + background: darken( $button-color, 5% ); + border-color: darken( $button-color, 5% ); + color: $button-text-color; + } + + &.active, + &.active:focus, + &.active:hover { + background: $button-color; + color: $button-text-color; + border-color: darken( $button-color, 15% ); + box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% ); + } +} \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/_variables.scss b/modules/masterbar/admin-color-schemes/colors/_variables.scss new file mode 100644 index 0000000000000..ed38e26c8c7e4 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/_variables.scss @@ -0,0 +1,65 @@ +// assign default value to all undefined variables + + +// core variables + +$text-color: #fff !default; +$base-color: #23282d !default; +$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default; +$highlight-color: #0073aa !default; +$notification-color: #d54e21 !default; + + +// global + +$body-background: #f1f1f1 !default; + +$link: #0073aa !default; +$link-focus: lighten( $link, 10% ) !default; + +$button-color: $highlight-color !default; +$button-text-color: $text-color !default; + +$form-checked: #7e8993 !default; + +// admin menu & admin-bar + +$menu-text: $text-color !default; +$menu-icon: $icon-color !default; +$menu-background: $base-color !default; + +$menu-highlight-text: $text-color !default; +$menu-highlight-icon: $text-color !default; +$menu-highlight-background: $highlight-color !default; + +$menu-current-text: $menu-highlight-text !default; +$menu-current-icon: $menu-highlight-icon !default; +$menu-current-background: $menu-highlight-background !default; + +$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default; +$menu-submenu-background: darken( $base-color, 7% ) !default; +$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default; + +$menu-submenu-focus-text: $highlight-color !default; +$menu-submenu-current-text: $text-color !default; + +$menu-bubble-text: $text-color !default; +$menu-bubble-background: $notification-color !default; +$menu-bubble-current-text: $text-color !default; +$menu-bubble-current-background: $menu-submenu-background !default; + +$menu-collapse-text: $menu-icon !default; +$menu-collapse-icon: $menu-icon !default; +$menu-collapse-focus-text: $text-color !default; +$menu-collapse-focus-icon: $menu-highlight-icon !default; + +$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default; +$adminbar-input-background: lighten( $menu-background, 7% ) !default; + +$adminbar-recovery-exit-text: $menu-bubble-text !default; +$adminbar-recovery-exit-background: $menu-bubble-background !default; +$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default; + +$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default; + +$low-contrast-theme: "false" !default; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss new file mode 100644 index 0000000000000..a61f8eb7633f2 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss @@ -0,0 +1,17 @@ +$base-color: #135e96; +$icon-color: #646970; +$highlight-color: #c9256e; +$notification-color: $highlight-color; + +$body-background: #f6f7f7; + +$menu-text: #2c3338; +$menu-background: #ffffff; +$menu-highlight-text: #0a4b78; +$menu-highlight-icon: #0a4b78; +$menu-highlight-background: #c5d9ed; +$menu-submenu-text: $menu-highlight-text; +$menu-submenu-background: lighten( $menu-highlight-background, 7% ); +$menu-submenu-current-text: $highlight-color; + +@import "../admin"; \ No newline at end of file diff --git a/tools/builder/sass.js b/tools/builder/sass.js index 6f1dad9833d8e..9849bfed1db23 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -52,6 +52,25 @@ gulp.task( 'sass:calypsoify', function ( done ) { } ); } ); +gulp.task( 'sass:colorschemes', function ( done ) { + log( 'Building Color schemes CSS...' ); + + return gulp + .src( './modules/masterbar/admin-color-schemes/colors/**/*.scss' ) + .pipe( sass( { outputStyle: 'compressed' } ) ) + .pipe( + prepend.prependText( '/* Do not modify this file directly. It is compiled SASS code. */\n' ) + ) + .pipe( autoprefixer() ) + .pipe( rename( { suffix: '.min' } ) ) + .pipe( gulp.dest( './modules/masterbar/admin-color-schemes/colors' ) ) + .on( 'end', function () { + log( 'Color Schemes CSS finished.' ); + doRTL( 'colorschemes', done ); + } ); +} ); + +// eslint-disable-next-line jsdoc/require-jsdoc function doRTL( files, done ) { let dest = './_inc/build', renameArgs = { suffix: '.rtl' }, @@ -72,6 +91,18 @@ function doRTL( files, done ) { pathx.extname = '-rtl.min.css'; }; break; + case 'colorschemes': + path = [ + './modules/masterbar/admin-color-schemes/colors/**/*.min.css', + '!/modules/masterbar/admin-color-schemes/colors/**/*rtl.min.css', + ]; + dest = './modules/masterbar/admin-color-schemes/colors'; + success = 'Color Schemes RTL CSS finished.'; + renameArgs = function ( pathx ) { + pathx.basename = pathx.basename.replace( '.min', '' ); + pathx.extname = '-rtl.min.css'; + }; + break; default: // unknown value, fail out return; @@ -214,6 +245,7 @@ gulp.task( export const build = gulp.parallel( gulp.series( 'sass:dashboard', 'sass:calypsoify' ), + 'sass:colorschemes', 'sass:old', 'sass:packages' ); @@ -221,7 +253,7 @@ export const build = gulp.parallel( export const watch = function () { return gulp.watch( [ './**/*.scss', ...alwaysIgnoredPaths ], - gulp.series( 'sass:dashboard', 'sass:calypsoify', 'sass:old' ) + gulp.series( 'sass:dashboard', 'sass:calypsoify', 'sass:colorschemes', 'sass:old' ) ); }; From 12098789ae141d8847a5bba293e7b2458dc955dd Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 15:46:45 +0100 Subject: [PATCH 02/34] Add Aquatic scaffolding --- .../class-admin-color-schemes.php | 13 +++++++++++++ .../admin-color-schemes/colors/aquatic/colors.scss | 3 +++ 2 files changed, 16 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 5faaf569336a0..231e767d47f0d 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -56,6 +56,18 @@ public function update_admin_color_permissions_check( $allowed, $meta_key, $obje */ public function register_admin_color_schemes() { + wp_admin_css_color( + 'aquatic', + __( 'Aquatic', 'jetpack' ), + plugins_url( 'colors/aquatic/colors.css', __FILE__ ), + array( '#135e96', '#043959', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), @@ -67,5 +79,6 @@ public function register_admin_color_schemes() { 'current' => '#fff', ) ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss new file mode 100644 index 0000000000000..de20a7db8dfd4 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss @@ -0,0 +1,3 @@ +$base-color: #135e96; + +@import "../admin"; \ No newline at end of file From 1de16b17d4e3c02019acb0e401fcbd5eeec0c975 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 15:49:43 +0100 Subject: [PATCH 03/34] Add Classic Blue scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../colors/classic-blue/colors.scss | 4 ++++ 2 files changed, 16 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 231e767d47f0d..5741336936abc 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -68,6 +68,18 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'classic-blue', + __( 'Classic Blue', 'jetpack' ), + plugins_url( 'colors/classic-blue/colors.css', __FILE__ ), + array( '#135e96', '#dcdcde', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), diff --git a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss new file mode 100644 index 0000000000000..c5442da8e483c --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss @@ -0,0 +1,4 @@ + +$base-color: #dcdcde; + +@import "../admin"; \ No newline at end of file From b8bb6d6a7fc5c963906ab46834c111d8437b13c4 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 15:52:05 +0100 Subject: [PATCH 04/34] Add Classic Dark scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../colors/classic-dark/colors.scss | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 5741336936abc..018d05abf9f05 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -92,5 +92,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'classic-dark', + __( 'Classic Dark', 'jetpack' ), + plugins_url( 'colors/classic-dark/colors.css', __FILE__ ), + array( '#101517', '#23282d', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss new file mode 100644 index 0000000000000..b60d9085862ff --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss @@ -0,0 +1,3 @@ +$base-color: #23282d; + +@import "../admin"; \ No newline at end of file From 1a9e6870406a91aaade5d6fef034b9995c553ec1 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 15:55:37 +0100 Subject: [PATCH 05/34] Add Contrast scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../admin-color-schemes/colors/contrast/colors.scss | 4 ++++ 2 files changed, 16 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/contrast/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 018d05abf9f05..016d103216d2f 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -104,5 +104,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'contrast', + __( 'Contrast', 'jetpack' ), + plugins_url( 'colors/contrast/colors.css', __FILE__ ), + array( '#101517', '#ffffff', '#1d2327', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss new file mode 100644 index 0000000000000..ea9658b728764 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss @@ -0,0 +1,4 @@ +$base-color: #fff; +$text-color: #1d2327; + +@import "../admin"; \ No newline at end of file From fb74df011e706bd904b14b1cee087574b7df6bf5 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 15:57:40 +0100 Subject: [PATCH 06/34] Add Nightfall scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../admin-color-schemes/colors/nightfall/colors.scss | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 016d103216d2f..12c6e2a30af93 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -116,5 +116,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'nightfall', + __( 'Nightfall', 'jetpack' ), + plugins_url( 'colors/nightfall/colors.css', __FILE__ ), + array( '#00131c', '#043959', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss new file mode 100644 index 0000000000000..6b761dd2811d7 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss @@ -0,0 +1,3 @@ +$base-color: #043959; + +@import "../admin"; \ No newline at end of file From a9303c4749afeddca91079a3114f2db979a26be2 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 16:00:37 +0100 Subject: [PATCH 07/34] Add Powder Snow scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../colors/powder-snow/colors.scss | 4 ++++ 2 files changed, 16 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 12c6e2a30af93..70cbd2d218841 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -128,5 +128,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'powder-snow', + __( 'Powder Snow', 'jetpack' ), + plugins_url( 'colors/powder-snow/colors.css', __FILE__ ), + array( '#101517', '#dcdcde', '#2c3338', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss new file mode 100644 index 0000000000000..f12162b910876 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss @@ -0,0 +1,4 @@ +$base-color: #dcdcde; +$text-color: #2c3338; + +@import "../admin"; \ No newline at end of file From f6c6897e68a5361c1568d17fc24880d06791a0a8 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 16:06:24 +0100 Subject: [PATCH 08/34] Add Sakura scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../admin-color-schemes/colors/sakura/colors.scss | 4 ++++ 2 files changed, 16 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/sakura/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 70cbd2d218841..64a0e4ec6538a 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -140,5 +140,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'sakura', + __( 'Sakura', 'jetpack' ), + plugins_url( 'colors/sakura/colors.css', __FILE__ ), + array( '#005042', '#f2ceda', '#700f3b', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss new file mode 100644 index 0000000000000..5e630a25e50ec --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss @@ -0,0 +1,4 @@ +$base-color: #f2ceda; +$text-color: #700f3b; + +@import "../admin"; \ No newline at end of file From 63a23b872ee360d79240b677c80663507a7d61db Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 18 Nov 2020 16:08:28 +0100 Subject: [PATCH 09/34] Add Sunset scaffolding --- .../class-admin-color-schemes.php | 12 ++++++++++++ .../admin-color-schemes/colors/sunset/colors.scss | 3 +++ 2 files changed, 15 insertions(+) create mode 100644 modules/masterbar/admin-color-schemes/colors/sunset/colors.scss diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 64a0e4ec6538a..ccfe0dabc1afd 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -152,5 +152,17 @@ public function register_admin_color_schemes() { ) ); + wp_admin_css_color( + 'sunset', + __( 'Sunset', 'jetpack' ), + plugins_url( 'colors/sunset/colors.css', __FILE__ ), + array( '#691c1c', '#8a2424', '#ffffff', '#646970' ), + array( + 'base' => '#646970', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + } } diff --git a/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss new file mode 100644 index 0000000000000..07b0ff7c5bb92 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss @@ -0,0 +1,3 @@ +$base-color: #8a2424; + +@import "../admin"; \ No newline at end of file From a00e46204fc0ca5a2226c250d958c363b6c13138 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 19 Nov 2020 10:32:05 +0100 Subject: [PATCH 10/34] Prevent multiple rtl files in build output --- tools/builder/sass.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tools/builder/sass.js b/tools/builder/sass.js index 9849bfed1db23..5d55c957eae1b 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -92,10 +92,7 @@ function doRTL( files, done ) { }; break; case 'colorschemes': - path = [ - './modules/masterbar/admin-color-schemes/colors/**/*.min.css', - '!/modules/masterbar/admin-color-schemes/colors/**/*rtl.min.css', - ]; + path = './modules/masterbar/admin-color-schemes/colors/**/colors.min.css'; dest = './modules/masterbar/admin-color-schemes/colors'; success = 'Color Schemes RTL CSS finished.'; renameArgs = function ( pathx ) { From 5863641682e5cca244fc057cd386048b19ddc037 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 19 Nov 2020 11:48:09 +0100 Subject: [PATCH 11/34] Refine Aquatic color scheme --- .../class-admin-color-schemes.php | 4 ++-- .../admin-color-schemes/colors/aquatic/colors.scss | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index ccfe0dabc1afd..a30792f534234 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -60,9 +60,9 @@ public function register_admin_color_schemes() { 'aquatic', __( 'Aquatic', 'jetpack' ), plugins_url( 'colors/aquatic/colors.css', __FILE__ ), - array( '#135e96', '#043959', '#ffffff', '#646970' ), + array( '#135e96', '#007e65', '#043959', '#c5d9ed' ), array( - 'base' => '#646970', + 'base' => '#c5d9ed', 'focus' => '#fff', 'current' => '#fff', ) diff --git a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss index de20a7db8dfd4..c1de5792f4358 100644 --- a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss @@ -1,3 +1,17 @@ $base-color: #135e96; +$icon-color: #c5d9ed; +$highlight-color: #007e65; //Calypso button color +$notification-color: $highlight-color; + +$body-background: #f6f7f7; + +$menu-text: #ffffff; +$menu-highlight-background: #2271b1; +$menu-current-text: #01263a; +$menu-current-icon: $menu-current-text; +$menu-current-background: #f0c930; +$menu-submenu-text: $menu-text; +$menu-submenu-background: #043959; //Calypso main nav color +$menu-submenu-focus-text: #f0c930; @import "../admin"; \ No newline at end of file From 261c63440a6a95dfae3ebb398f42b6186f8ba790 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 24 Nov 2020 11:40:02 +0100 Subject: [PATCH 12/34] Add admin scheme overrides to match Calypso --- .../admin-color-schemes/colors/_admin.scss | 11 ++++++++- .../colors/_overrides.scss | 23 +++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 modules/masterbar/admin-color-schemes/colors/_overrides.scss diff --git a/modules/masterbar/admin-color-schemes/colors/_admin.scss b/modules/masterbar/admin-color-schemes/colors/_admin.scss index acdc1beb24175..de3fc0d49e78c 100644 --- a/modules/masterbar/admin-color-schemes/colors/_admin.scss +++ b/modules/masterbar/admin-color-schemes/colors/_admin.scss @@ -1,3 +1,9 @@ +/* + * This file is the basis for generating all admin color scheme stylesheets. + * It consists of two parts: + * 1. All styles from core _admin.scss (keep in sync with changes in core!). + * 2. An import of the overrides necessary to match Calypso color schemes. + */ @import 'variables'; @import 'mixins'; @@ -758,4 +764,7 @@ div#wp-responsive-toggle a:before { .wp-full-overlay-footer .devices button:hover:before, .wp-full-overlay-footer .devices button:focus:before { color: $highlight-color; -} \ No newline at end of file +} + +/* Overrides */ +@import 'overrides'; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/_overrides.scss b/modules/masterbar/admin-color-schemes/colors/_overrides.scss new file mode 100644 index 0000000000000..06a9ba39b4350 --- /dev/null +++ b/modules/masterbar/admin-color-schemes/colors/_overrides.scss @@ -0,0 +1,23 @@ + +// This file cotains overrides to _admin.scss necessary to match Calypso color schemes + +// Make current submenu icon color stay the same on hover +#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu .wp-has-current-submenu div.wp-menu-image:before, +#adminmenu .current div.wp-menu-image:before, +#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, +#adminmenu a.current:hover div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, +#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before { + color: $menu-current-text; +} + +// Make current submenu item color stay the same on hover/focus +#adminmenu .wp-submenu li.current a, +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, +#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { + + &:hover, &:focus { + color: $menu-submenu-current-text; + } +} \ No newline at end of file From e312e8a8fde22df2afd8259da66cd54f988ec2aa Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 24 Nov 2020 12:34:07 +0100 Subject: [PATCH 13/34] Add override for main nav background color to be different from sidebar --- .../admin-color-schemes/colors/_overrides.scss | 13 +++++++++++++ .../admin-color-schemes/colors/aquatic/colors.scss | 7 +++++++ .../colors/classic-blue/colors.scss | 4 ++++ .../colors/classic-bright/colors.scss | 4 ++++ .../colors/classic-dark/colors.scss | 4 ++++ .../admin-color-schemes/colors/contrast/colors.scss | 4 ++++ .../colors/nightfall/colors.scss | 4 ++++ .../colors/powder-snow/colors.scss | 4 ++++ .../admin-color-schemes/colors/sakura/colors.scss | 4 ++++ .../admin-color-schemes/colors/sunset/colors.scss | 4 ++++ 10 files changed, 52 insertions(+) diff --git a/modules/masterbar/admin-color-schemes/colors/_overrides.scss b/modules/masterbar/admin-color-schemes/colors/_overrides.scss index 06a9ba39b4350..534ffcf7290b9 100644 --- a/modules/masterbar/admin-color-schemes/colors/_overrides.scss +++ b/modules/masterbar/admin-color-schemes/colors/_overrides.scss @@ -1,6 +1,19 @@ // This file cotains overrides to _admin.scss necessary to match Calypso color schemes +// Make wpadminbar colors differ from submenu colors +#wpadminbar { + background: $masterbar-background; +} + +#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, +#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, +#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + background: $masterbar-highlight-background; +} + // Make current submenu icon color stay the same on hover #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, #adminmenu .wp-has-current-submenu div.wp-menu-image:before, diff --git a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss index c1de5792f4358..baef5e1265569 100644 --- a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss @@ -1,10 +1,13 @@ +// core variables (core _variables.scss) $base-color: #135e96; $icon-color: #c5d9ed; $highlight-color: #007e65; //Calypso button color $notification-color: $highlight-color; +// global (core _variables.scss) $body-background: #f6f7f7; +// admin menu & admin-bar (core _variables.scss) $menu-text: #ffffff; $menu-highlight-background: #2271b1; $menu-current-text: #01263a; @@ -14,4 +17,8 @@ $menu-submenu-text: $menu-text; $menu-submenu-background: #043959; //Calypso main nav color $menu-submenu-focus-text: #f0c930; +// masterbar overrides +$masterbar-background: #043959; +$masterbar-highlight-background: #01263a; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss index c5442da8e483c..094b7dd3701c1 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss @@ -1,4 +1,8 @@ $base-color: #dcdcde; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss index a61f8eb7633f2..41c8557191fcd 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss @@ -14,4 +14,8 @@ $menu-submenu-text: $menu-highlight-text; $menu-submenu-background: lighten( $menu-highlight-background, 7% ); $menu-submenu-current-text: $highlight-color; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss index b60d9085862ff..6f81a39f18db1 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss @@ -1,3 +1,7 @@ $base-color: #23282d; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss index ea9658b728764..17842e4bef535 100644 --- a/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss @@ -1,4 +1,8 @@ $base-color: #fff; $text-color: #1d2327; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss index 6b761dd2811d7..61e8044b43fcd 100644 --- a/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss @@ -1,3 +1,7 @@ $base-color: #043959; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss index f12162b910876..b5c9686c418f6 100644 --- a/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss @@ -1,4 +1,8 @@ $base-color: #dcdcde; $text-color: #2c3338; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss index 5e630a25e50ec..b56052b352c28 100644 --- a/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss @@ -1,4 +1,8 @@ $base-color: #f2ceda; $text-color: #700f3b; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file diff --git a/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss index 07b0ff7c5bb92..04a1d1a4739d9 100644 --- a/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss @@ -1,3 +1,7 @@ $base-color: #8a2424; +// masterbar overrides +$masterbar-background: $base-color; +$masterbar-highlight-background: $base-color; + @import "../admin"; \ No newline at end of file From 289c91edba28ad6bc13af1edaa400bdc55978b9f Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 24 Nov 2020 12:49:45 +0100 Subject: [PATCH 14/34] Use minified css --- .../class-admin-color-schemes.php | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index a30792f534234..9016eaacd0aa3 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -59,7 +59,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'aquatic', __( 'Aquatic', 'jetpack' ), - plugins_url( 'colors/aquatic/colors.css', __FILE__ ), + plugins_url( 'colors/aquatic/colors.min.css', __FILE__ ), array( '#135e96', '#007e65', '#043959', '#c5d9ed' ), array( 'base' => '#c5d9ed', @@ -71,7 +71,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-blue', __( 'Classic Blue', 'jetpack' ), - plugins_url( 'colors/classic-blue/colors.css', __FILE__ ), + plugins_url( 'colors/classic-blue/colors.min.css', __FILE__ ), array( '#135e96', '#dcdcde', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -83,7 +83,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), - plugins_url( 'colors/classic-bright/colors.css', __FILE__ ), + plugins_url( 'colors/classic-bright/colors.min.css', __FILE__ ), array( '#135e96', '#c9256e', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -95,7 +95,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-dark', __( 'Classic Dark', 'jetpack' ), - plugins_url( 'colors/classic-dark/colors.css', __FILE__ ), + plugins_url( 'colors/classic-dark/colors.min.css', __FILE__ ), array( '#101517', '#23282d', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -107,7 +107,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'contrast', __( 'Contrast', 'jetpack' ), - plugins_url( 'colors/contrast/colors.css', __FILE__ ), + plugins_url( 'colors/contrast/colors.min.css', __FILE__ ), array( '#101517', '#ffffff', '#1d2327', '#646970' ), array( 'base' => '#646970', @@ -119,7 +119,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'nightfall', __( 'Nightfall', 'jetpack' ), - plugins_url( 'colors/nightfall/colors.css', __FILE__ ), + plugins_url( 'colors/nightfall/colors.min.css', __FILE__ ), array( '#00131c', '#043959', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -131,7 +131,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'powder-snow', __( 'Powder Snow', 'jetpack' ), - plugins_url( 'colors/powder-snow/colors.css', __FILE__ ), + plugins_url( 'colors/powder-snow/colors.min.css', __FILE__ ), array( '#101517', '#dcdcde', '#2c3338', '#646970' ), array( 'base' => '#646970', @@ -143,7 +143,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sakura', __( 'Sakura', 'jetpack' ), - plugins_url( 'colors/sakura/colors.css', __FILE__ ), + plugins_url( 'colors/sakura/colors.min.css', __FILE__ ), array( '#005042', '#f2ceda', '#700f3b', '#646970' ), array( 'base' => '#646970', @@ -155,7 +155,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sunset', __( 'Sunset', 'jetpack' ), - plugins_url( 'colors/sunset/colors.css', __FILE__ ), + plugins_url( 'colors/sunset/colors.min.css', __FILE__ ), array( '#691c1c', '#8a2424', '#ffffff', '#646970' ), array( 'base' => '#646970', From bd825a28dac67fa822175478f09785bce36fbdf1 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 24 Nov 2020 13:15:13 +0100 Subject: [PATCH 15/34] wp-admin jQuery expects non-min path --- .gitignore | 1 + .../class-admin-color-schemes.php | 18 +++++++++--------- tools/builder/sass.js | 6 ++---- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index ca6ff39bb2b19..0178909c69e0a 100644 --- a/.gitignore +++ b/.gitignore @@ -63,6 +63,7 @@ phpcs.xml /_inc/build /modules/**/*.min.css /modules/**/*-rtl.css +/modules/masterbar/admin-color-schemes/**/*.css* /css /modules/**/*/block.js /vendor/automattic/ diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 9016eaacd0aa3..a30792f534234 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -59,7 +59,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'aquatic', __( 'Aquatic', 'jetpack' ), - plugins_url( 'colors/aquatic/colors.min.css', __FILE__ ), + plugins_url( 'colors/aquatic/colors.css', __FILE__ ), array( '#135e96', '#007e65', '#043959', '#c5d9ed' ), array( 'base' => '#c5d9ed', @@ -71,7 +71,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-blue', __( 'Classic Blue', 'jetpack' ), - plugins_url( 'colors/classic-blue/colors.min.css', __FILE__ ), + plugins_url( 'colors/classic-blue/colors.css', __FILE__ ), array( '#135e96', '#dcdcde', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -83,7 +83,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), - plugins_url( 'colors/classic-bright/colors.min.css', __FILE__ ), + plugins_url( 'colors/classic-bright/colors.css', __FILE__ ), array( '#135e96', '#c9256e', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -95,7 +95,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-dark', __( 'Classic Dark', 'jetpack' ), - plugins_url( 'colors/classic-dark/colors.min.css', __FILE__ ), + plugins_url( 'colors/classic-dark/colors.css', __FILE__ ), array( '#101517', '#23282d', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -107,7 +107,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'contrast', __( 'Contrast', 'jetpack' ), - plugins_url( 'colors/contrast/colors.min.css', __FILE__ ), + plugins_url( 'colors/contrast/colors.css', __FILE__ ), array( '#101517', '#ffffff', '#1d2327', '#646970' ), array( 'base' => '#646970', @@ -119,7 +119,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'nightfall', __( 'Nightfall', 'jetpack' ), - plugins_url( 'colors/nightfall/colors.min.css', __FILE__ ), + plugins_url( 'colors/nightfall/colors.css', __FILE__ ), array( '#00131c', '#043959', '#ffffff', '#646970' ), array( 'base' => '#646970', @@ -131,7 +131,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'powder-snow', __( 'Powder Snow', 'jetpack' ), - plugins_url( 'colors/powder-snow/colors.min.css', __FILE__ ), + plugins_url( 'colors/powder-snow/colors.css', __FILE__ ), array( '#101517', '#dcdcde', '#2c3338', '#646970' ), array( 'base' => '#646970', @@ -143,7 +143,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sakura', __( 'Sakura', 'jetpack' ), - plugins_url( 'colors/sakura/colors.min.css', __FILE__ ), + plugins_url( 'colors/sakura/colors.css', __FILE__ ), array( '#005042', '#f2ceda', '#700f3b', '#646970' ), array( 'base' => '#646970', @@ -155,7 +155,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sunset', __( 'Sunset', 'jetpack' ), - plugins_url( 'colors/sunset/colors.min.css', __FILE__ ), + plugins_url( 'colors/sunset/colors.css', __FILE__ ), array( '#691c1c', '#8a2424', '#ffffff', '#646970' ), array( 'base' => '#646970', diff --git a/tools/builder/sass.js b/tools/builder/sass.js index 5d55c957eae1b..5c8253b5fa5e0 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -62,7 +62,6 @@ gulp.task( 'sass:colorschemes', function ( done ) { prepend.prependText( '/* Do not modify this file directly. It is compiled SASS code. */\n' ) ) .pipe( autoprefixer() ) - .pipe( rename( { suffix: '.min' } ) ) .pipe( gulp.dest( './modules/masterbar/admin-color-schemes/colors' ) ) .on( 'end', function () { log( 'Color Schemes CSS finished.' ); @@ -92,12 +91,11 @@ function doRTL( files, done ) { }; break; case 'colorschemes': - path = './modules/masterbar/admin-color-schemes/colors/**/colors.min.css'; + path = './modules/masterbar/admin-color-schemes/colors/**/colors.css'; dest = './modules/masterbar/admin-color-schemes/colors'; success = 'Color Schemes RTL CSS finished.'; renameArgs = function ( pathx ) { - pathx.basename = pathx.basename.replace( '.min', '' ); - pathx.extname = '-rtl.min.css'; + pathx.extname = '-rtl.css'; }; break; default: From e827f7cf0f01d0f26ef2495087aca486cad53e55 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 24 Nov 2020 16:27:45 +0100 Subject: [PATCH 16/34] Refine Classic Blue color scheme --- .../class-admin-color-schemes.php | 2 +- .../colors/classic-blue/colors.scss | 24 ++++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index a30792f534234..b7bf2d26a4845 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -72,7 +72,7 @@ public function register_admin_color_schemes() { 'classic-blue', __( 'Classic Blue', 'jetpack' ), plugins_url( 'colors/classic-blue/colors.css', __FILE__ ), - array( '#135e96', '#dcdcde', '#ffffff', '#646970' ), + array( '#135e96', '#b26200', '#dcdcde', '#646970' ), array( 'base' => '#646970', 'focus' => '#fff', diff --git a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss index 094b7dd3701c1..a99b4d7f4629e 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss @@ -1,8 +1,26 @@ - +// core variables (core _variables.scss) $base-color: #dcdcde; +$icon-color: #646970; +$highlight-color: #b26200; //Calypso button color +$notification-color: $highlight-color; + +// global (core _variables.scss) +$body-background: #f6f7f7; + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #2c3338; +$menu-highlight-text: #2271b1; +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #ffffff; +$menu-current-text: #ffffff; +$menu-current-icon: $menu-current-text; +$menu-current-background: #50575e; +$menu-submenu-text: #ffffff; +$menu-submenu-background: #135e96; //Calypso main nav color +$menu-submenu-focus-text: #e68b28; // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: #135e96; +$masterbar-highlight-background: #0a4b78; @import "../admin"; \ No newline at end of file From 98cf25d94a17a8572be527cb4db2856f72f7c432 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 25 Nov 2020 09:28:17 +0100 Subject: [PATCH 17/34] Refine Classic Bright color scheme --- .../class-admin-color-schemes.php | 2 +- .../colors/classic-bright/colors.scss | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index b7bf2d26a4845..5ed03bfdffd93 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -84,7 +84,7 @@ public function register_admin_color_schemes() { 'classic-bright', __( 'Classic Bright', 'jetpack' ), plugins_url( 'colors/classic-bright/colors.css', __FILE__ ), - array( '#135e96', '#c9256e', '#ffffff', '#646970' ), + array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ), array( 'base' => '#646970', 'focus' => '#fff', diff --git a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss index 41c8557191fcd..18228b8d06292 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss @@ -1,21 +1,27 @@ +// core variables (core _variables.scss) $base-color: #135e96; $icon-color: #646970; $highlight-color: #c9256e; $notification-color: $highlight-color; +// global (core _variables.scss) $body-background: #f6f7f7; +// admin menu & admin-bar (core _variables.scss) $menu-text: #2c3338; $menu-background: #ffffff; -$menu-highlight-text: #0a4b78; -$menu-highlight-icon: #0a4b78; -$menu-highlight-background: #c5d9ed; -$menu-submenu-text: $menu-highlight-text; -$menu-submenu-background: lighten( $menu-highlight-background, 7% ); +$menu-highlight-text: #1d2327; +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #dcdcde; +$menu-current-text: #0a4b78; +$menu-current-icon: $menu-current-text; +$menu-current-background: #c5d9ed; +$menu-submenu-text: #0a4b78; +$menu-submenu-background: #e9eff5; $menu-submenu-current-text: $highlight-color; // masterbar overrides $masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-highlight-background: #0a4b78; @import "../admin"; \ No newline at end of file From ab3bae0c0e2cc0c9e4612b701cdae67ce0148113 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 25 Nov 2020 12:33:58 +0100 Subject: [PATCH 18/34] Refine Classic Dark color scheme --- .../class-admin-color-schemes.php | 4 +-- .../colors/classic-dark/colors.scss | 27 ++++++++++++++++--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 5ed03bfdffd93..e3bda21fc3d7c 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -96,9 +96,9 @@ public function register_admin_color_schemes() { 'classic-dark', __( 'Classic Dark', 'jetpack' ), plugins_url( 'colors/classic-dark/colors.css', __FILE__ ), - array( '#101517', '#23282d', '#ffffff', '#646970' ), + array( '#101517', '#c9356e', '#32373c', '#0073aa' ), array( - 'base' => '#646970', + 'base' => '#a2aab2', 'focus' => '#fff', 'current' => '#fff', ) diff --git a/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss index 6f81a39f18db1..ca440b409b622 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-dark/colors.scss @@ -1,7 +1,28 @@ -$base-color: #23282d; +// core variables (core _variables.scss) +$base-color: #101517; // Calypso --color-masterbar-background +$icon-color: #a2aab2; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #c9356e;// Calypso --color-accent +$notification-color: $highlight-color; + +// global (core _variables.scss) +$body-background: #f6f7f7; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #eeeeee; // Calypso --color-sidebar-text +$menu-background: #23282d; // Calypso --color-sidebar-background +$menu-highlight-text: #00b9eb; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #1a1e23; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #0073aa; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #b4b9be; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #32373c; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: $base-color; // Calypso --color-masterbar-background +$masterbar-highlight-background: #333; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From 38806181b57ce26a75952552afa96158b91f3517 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 25 Nov 2020 16:31:06 +0100 Subject: [PATCH 19/34] Refine Contrast color scheme --- .../class-admin-color-schemes.php | 4 +-- .../colors/contrast/colors.scss | 28 ++++++++++++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index e3bda21fc3d7c..28894a42c16a9 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -108,9 +108,9 @@ public function register_admin_color_schemes() { 'contrast', __( 'Contrast', 'jetpack' ), plugins_url( 'colors/contrast/colors.css', __FILE__ ), - array( '#101517', '#ffffff', '#1d2327', '#646970' ), + array( '#101517', '#ffffff', '#32373c', '#b4b9be' ), array( - 'base' => '#646970', + 'base' => '#1d2327', 'focus' => '#fff', 'current' => '#fff', ) diff --git a/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss index 17842e4bef535..758499378bfd0 100644 --- a/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/contrast/colors.scss @@ -1,8 +1,28 @@ -$base-color: #fff; -$text-color: #1d2327; +// core variables (core _variables.scss) +$base-color: #101517; // Calypso --color-masterbar-background +$icon-color: #1d2327; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #0a4b78;// Calypso --color-accent +$notification-color: #f0c930; // Calypso --color-masterbar-unread-dot-background + +// global (core _variables.scss) +$body-background: #ffffff; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #1d2327; // Calypso --color-sidebar-text +$menu-background: #ffffff; // Calypso --color-sidebar-background +$menu-highlight-text: #ffffff; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #50575e; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #101517; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #c3c4c7; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #1d2327; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #f0c930; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: $base-color; // Calypso --color-masterbar-background +$masterbar-highlight-background: #2c3338; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From b239feadd2665fc84c20bcee214e9a0bf88a5ad8 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 25 Nov 2020 17:16:51 +0100 Subject: [PATCH 20/34] Refine Nightfall color scheme --- .../class-admin-color-schemes.php | 4 +-- .../colors/nightfall/colors.scss | 27 ++++++++++++++++--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 28894a42c16a9..7846763039423 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -120,9 +120,9 @@ public function register_admin_color_schemes() { 'nightfall', __( 'Nightfall', 'jetpack' ), plugins_url( 'colors/nightfall/colors.css', __FILE__ ), - array( '#00131c', '#043959', '#ffffff', '#646970' ), + array( '#00131c', '#043959', '#2271b1', '#9ec2e6' ), array( - 'base' => '#646970', + 'base' => '#9ec2e6', 'focus' => '#fff', 'current' => '#fff', ) diff --git a/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss index 61e8044b43fcd..7f4ef82bc60a7 100644 --- a/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/nightfall/colors.scss @@ -1,7 +1,28 @@ -$base-color: #043959; +// core variables (core _variables.scss) +$base-color: #00131c; // Calypso --color-masterbar-background +$icon-color: #9ec2e6; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #2271b1;// Calypso --color-accent +$notification-color: #5198d9; // Calypso --color-masterbar-unread-dot-background + +// global (core _variables.scss) +$body-background: #f6f7f7; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #c5d9ed; // Calypso --color-sidebar-text +$menu-background: #043959; // Calypso --color-sidebar-background +$menu-highlight-text: #ffffff; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #0a4b78; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #00131c; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #ffffff; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #01263a; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #72aee6; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: #00131c; // Calypso --color-masterbar-background +$masterbar-highlight-background: #01263a; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From a81ac56b9b07d8f6aa26d5ee391f01aeac8bc513 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 25 Nov 2020 18:01:11 +0100 Subject: [PATCH 21/34] Refine Powder Snow color scheme --- .../class-admin-color-schemes.php | 4 +-- .../colors/powder-snow/colors.scss | 28 ++++++++++++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 7846763039423..c610d46e08962 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -132,10 +132,10 @@ public function register_admin_color_schemes() { 'powder-snow', __( 'Powder Snow', 'jetpack' ), plugins_url( 'colors/powder-snow/colors.css', __FILE__ ), - array( '#101517', '#dcdcde', '#2c3338', '#646970' ), + array( '#101517', '#2271b1', '#dcdcde', '#646970' ), array( 'base' => '#646970', - 'focus' => '#fff', + 'focus' => '#135e96', 'current' => '#fff', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss index b5c9686c418f6..dc8a331da993c 100644 --- a/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/powder-snow/colors.scss @@ -1,8 +1,28 @@ -$base-color: #dcdcde; -$text-color: #2c3338; +// core variables (core _variables.scss) +$base-color: #101517; // Calypso --color-masterbar-background +$icon-color: #646970; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #2271b1; // Calypso --color-accent +$notification-color: #5198d9; // Calypso --color-masterbar-unread-dot-background + +// global (core _variables.scss) +$body-background: #f6f7f7; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #2c3338; // Calypso --color-sidebar-text +$menu-background: #dcdcde; // Calypso --color-sidebar-background +$menu-highlight-text: #135e96; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #ffffff; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #50575e; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #2c3338; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #c3c4c7; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #135e96; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #2c3338; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: #101517; // Calypso --color-masterbar-background +$masterbar-highlight-background: #2c3338; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From ca2a75d4aad6401ff42491c7a5ca90492c8066ca Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 09:51:02 +0100 Subject: [PATCH 22/34] Refine Sakura color scheme --- .../class-admin-color-schemes.php | 6 ++-- .../colors/sakura/colors.scss | 28 ++++++++++++++++--- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index c610d46e08962..a98685bf041d0 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -144,10 +144,10 @@ public function register_admin_color_schemes() { 'sakura', __( 'Sakura', 'jetpack' ), plugins_url( 'colors/sakura/colors.css', __FILE__ ), - array( '#005042', '#f2ceda', '#700f3b', '#646970' ), + array( '#005042', '#f2ceda', '#2271b1', '#8c1749' ), array( - 'base' => '#646970', - 'focus' => '#fff', + 'base' => '#8c1749', + 'focus' => '#4f092a', 'current' => '#fff', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss index b56052b352c28..eda962e703da9 100644 --- a/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/sakura/colors.scss @@ -1,8 +1,28 @@ -$base-color: #f2ceda; -$text-color: #700f3b; +// core variables (core _variables.scss) +$base-color: #005042; // Calypso --color-masterbar-background +$icon-color: #8c1749; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #2271b1; // Calypso --color-accent +$notification-color: #c9356e; // Calypso --color-masterbar-unread-dot-background + +// global (core _variables.scss) +$body-background: #f6f7f7; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #700f3b; // Calypso --color-sidebar-text +$menu-background: #f2ceda; // Calypso --color-sidebar-background +$menu-highlight-text: #4f092a; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #f7a8c3; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #2271b1; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #f5e9ed; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #4f092a; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #72aee6; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #f5e9ed; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: #005042; // Calypso --color-masterbar-background +$masterbar-highlight-background: #003b30; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From 17665acf3bf2661ea76d56b47b19ac009d962c87 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 11:01:24 +0100 Subject: [PATCH 23/34] Refine Sunset color scheme --- .../class-admin-color-schemes.php | 6 ++--- .../colors/sunset/colors.scss | 27 ++++++++++++++++--- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index a98685bf041d0..142e24aca49f4 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -156,11 +156,11 @@ public function register_admin_color_schemes() { 'sunset', __( 'Sunset', 'jetpack' ), plugins_url( 'colors/sunset/colors.css', __FILE__ ), - array( '#691c1c', '#8a2424', '#ffffff', '#646970' ), + array( '#691c1c', '#b26200', '#f0c930', '#facfd2' ), array( - 'base' => '#646970', + 'base' => '#facfd2', 'focus' => '#fff', - 'current' => '#fff', + 'current' => '#4f3500', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss index 04a1d1a4739d9..df35e3aef967f 100644 --- a/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/sunset/colors.scss @@ -1,7 +1,28 @@ -$base-color: #8a2424; +// core variables (core _variables.scss) +$base-color: #691c1c; // Calypso --color-masterbar-background +$icon-color: #facfd2; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #b26200; // Calypso --color-accent +$notification-color: #c9356e; // Calypso --color-masterbar-unread-dot-background + +// global (core _variables.scss) +$body-background: #f6f7f7; // Calypso --color-surface-backdrop + +// admin menu & admin-bar (core _variables.scss) +$menu-text: #ffffff; // Calypso --color-sidebar-text +$menu-background: #8a2424; // Calypso --color-sidebar-background +$menu-highlight-text: #ffffff; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #691c1c; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #4f3500; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: $menu-current-text; +$menu-current-background: #f0c930; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #ffffff; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #b32d2e; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #f0c930; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: $base-color; +$masterbar-background: #691c1c; // Calypso --color-masterbar-background +$masterbar-highlight-background: #451313; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From d7b7bcaa6fb42a19fca430012c5b4b5509bff27c Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 11:31:44 +0100 Subject: [PATCH 24/34] Iterate on Aquatic color scheme --- .../class-admin-color-schemes.php | 2 +- .../colors/aquatic/colors.scss | 32 +++++++++++-------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 142e24aca49f4..7347b7036d593 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -64,7 +64,7 @@ public function register_admin_color_schemes() { array( 'base' => '#c5d9ed', 'focus' => '#fff', - 'current' => '#fff', + 'current' => '#01263a', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss index baef5e1265569..d0d982ba644df 100644 --- a/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/aquatic/colors.scss @@ -1,24 +1,28 @@ // core variables (core _variables.scss) -$base-color: #135e96; -$icon-color: #c5d9ed; -$highlight-color: #007e65; //Calypso button color -$notification-color: $highlight-color; +$base-color: #043959; // Calypso --color-masterbar-background +$icon-color: #c5d9ed; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #007e65; // Calypso --color-accent +$notification-color: #09a884; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: #f6f7f7; +$body-background: #f6f7f7; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: #ffffff; -$menu-highlight-background: #2271b1; -$menu-current-text: #01263a; +$menu-text: #ffffff; // Calypso --color-sidebar-text +$menu-background: #135e96; // Calypso --color-sidebar-background +$menu-highlight-text: #ffffff; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: $menu-highlight-text; +$menu-highlight-background: #2271b1; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #01263a; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: #f0c930; -$menu-submenu-text: $menu-text; -$menu-submenu-background: #043959; //Calypso main nav color -$menu-submenu-focus-text: #f0c930; +$menu-current-background: #f0c930; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #ffffff; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #043959; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #f0c930; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: #043959; -$masterbar-highlight-background: #01263a; +$masterbar-background: #043959; // Calypso --color-masterbar-background +$masterbar-highlight-background: #01263a; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From 940538549982c2ebce407fe5ead4320a43e694b7 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 12:03:12 +0100 Subject: [PATCH 25/34] Iterate on Classic Blue color scheme --- .../class-admin-color-schemes.php | 2 +- .../colors/classic-blue/colors.scss | 32 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 7347b7036d593..976cff1ae22fd 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -75,7 +75,7 @@ public function register_admin_color_schemes() { array( '#135e96', '#b26200', '#dcdcde', '#646970' ), array( 'base' => '#646970', - 'focus' => '#fff', + 'focus' => '#2271b1', 'current' => '#fff', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss index a99b4d7f4629e..3a907e7b765da 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-blue/colors.scss @@ -1,26 +1,28 @@ // core variables (core _variables.scss) -$base-color: #dcdcde; -$icon-color: #646970; -$highlight-color: #b26200; //Calypso button color -$notification-color: $highlight-color; +$base-color: #135e96; // Calypso --color-masterbar-background +$icon-color: #646970; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #b26200; // Calypso --color-accent +$notification-color: #e68b28; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: #f6f7f7; +$body-background: #f6f7f7; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: #2c3338; -$menu-highlight-text: #2271b1; +$menu-text: #2c3338; // Calypso --color-sidebar-text +$menu-background: #dcdcde; // Calypso --color-sidebar-background +$menu-highlight-text: #2271b1; // Calypso --color-sidebar-menu-hover-text $menu-highlight-icon: $menu-highlight-text; -$menu-highlight-background: #ffffff; -$menu-current-text: #ffffff; +$menu-highlight-background: #ffffff; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: #50575e; -$menu-submenu-text: #ffffff; -$menu-submenu-background: #135e96; //Calypso main nav color -$menu-submenu-focus-text: #e68b28; +$menu-current-background: #50575e; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #ffffff; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #135e96; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #e68b28; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #ffffff; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: #135e96; -$masterbar-highlight-background: #0a4b78; +$masterbar-background: #135e96; // Calypso --color-masterbar-background +$masterbar-highlight-background: #0a4b78; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From c3c19e5c1e53c105c5ad0c702508002c0cd0f811 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 12:37:14 +0100 Subject: [PATCH 26/34] Iterate on Classic Bright color scheme --- .../class-admin-color-schemes.php | 4 +-- .../colors/classic-bright/colors.scss | 33 ++++++++++--------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 976cff1ae22fd..c55d4b7d1b2f7 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -87,8 +87,8 @@ public function register_admin_color_schemes() { array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ), array( 'base' => '#646970', - 'focus' => '#fff', - 'current' => '#fff', + 'focus' => '#1d2327', + 'current' => '#0a4b78', ) ); diff --git a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss index 18228b8d06292..c4635b9de2acc 100644 --- a/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss +++ b/modules/masterbar/admin-color-schemes/colors/classic-bright/colors.scss @@ -1,27 +1,28 @@ // core variables (core _variables.scss) -$base-color: #135e96; -$icon-color: #646970; -$highlight-color: #c9256e; -$notification-color: $highlight-color; +$base-color: #135e96; // Calypso --color-masterbar-background +$icon-color: #646970; // Calypso --color-sidebar-gridicon-fill +$highlight-color: #c9356e; // Calypso --color-accent +$notification-color: #f283aa; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: #f6f7f7; +$body-background: #f6f7f7; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: #2c3338; -$menu-background: #ffffff; -$menu-highlight-text: #1d2327; +$menu-text: #2c3338; // Calypso --color-sidebar-text +$menu-background: #ffffff; // Calypso --color-sidebar-background +$menu-highlight-text: #1d2327; // Calypso --color-sidebar-menu-hover-text $menu-highlight-icon: $menu-highlight-text; -$menu-highlight-background: #dcdcde; -$menu-current-text: #0a4b78; +$menu-highlight-background: #dcdcde; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: #0a4b78; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: #c5d9ed; -$menu-submenu-text: #0a4b78; -$menu-submenu-background: #e9eff5; -$menu-submenu-current-text: $highlight-color; +$menu-current-background: #c5d9ed; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: #0a4b78; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: #e9eff5; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: #c9356e; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: #c9356e; // Calypso --color-sidebar-submenu-selected-text // masterbar overrides -$masterbar-background: $base-color; -$masterbar-highlight-background: #0a4b78; +$masterbar-background: #135e96; // Calypso --color-masterbar-background +$masterbar-highlight-background: #0a4b78; // Calypso --color-masterbar-item-hover-background @import "../admin"; \ No newline at end of file From d762ebb045f7a21357281061e98b5481b696151f Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 12:39:56 +0100 Subject: [PATCH 27/34] Change Classic Dark icon hover color --- .../masterbar/admin-color-schemes/class-admin-color-schemes.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index c55d4b7d1b2f7..bd19d37a537b6 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -99,7 +99,7 @@ public function register_admin_color_schemes() { array( '#101517', '#c9356e', '#32373c', '#0073aa' ), array( 'base' => '#a2aab2', - 'focus' => '#fff', + 'focus' => '#00b9eb', 'current' => '#fff', ) ); From 84060ab6686a91fee3301456842ef21530d693fd Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 26 Nov 2020 12:58:30 +0100 Subject: [PATCH 28/34] Increase specificity to ensure #wpadminbar override --- .../colors/_overrides.scss | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/colors/_overrides.scss b/modules/masterbar/admin-color-schemes/colors/_overrides.scss index 534ffcf7290b9..b270f2f1a2e43 100644 --- a/modules/masterbar/admin-color-schemes/colors/_overrides.scss +++ b/modules/masterbar/admin-color-schemes/colors/_overrides.scss @@ -2,16 +2,29 @@ // This file cotains overrides to _admin.scss necessary to match Calypso color schemes // Make wpadminbar colors differ from submenu colors -#wpadminbar { - background: $masterbar-background; -} -#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, -#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, -#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, -#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, -#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { - background: $masterbar-highlight-background; +.admin-color-aquatic, +.admin-color-classic-blue, +.admin-color-classic-bright, +.admin-color-classic-dark, +.admin-color-contrast, +.admin-color-nightfall, +.admin-color-powder-snow, +.admin-color-sakura, +.admin-color-sunset { + + #wpadminbar{ + background: $masterbar-background !important; + } + + #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, + #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, + #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, + #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, + #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { + background: $masterbar-highlight-background; + } + } // Make current submenu icon color stay the same on hover From d1e6498f3a4f6aa7dadd215dcabdc490e1586d6b Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Mon, 7 Dec 2020 16:38:52 +0100 Subject: [PATCH 29/34] Remove RTL build --- tools/builder/sass.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/tools/builder/sass.js b/tools/builder/sass.js index 5c8253b5fa5e0..49ad74ac97dd1 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -65,7 +65,6 @@ gulp.task( 'sass:colorschemes', function ( done ) { .pipe( gulp.dest( './modules/masterbar/admin-color-schemes/colors' ) ) .on( 'end', function () { log( 'Color Schemes CSS finished.' ); - doRTL( 'colorschemes', done ); } ); } ); @@ -90,14 +89,6 @@ function doRTL( files, done ) { pathx.extname = '-rtl.min.css'; }; break; - case 'colorschemes': - path = './modules/masterbar/admin-color-schemes/colors/**/colors.css'; - dest = './modules/masterbar/admin-color-schemes/colors'; - success = 'Color Schemes RTL CSS finished.'; - renameArgs = function ( pathx ) { - pathx.extname = '-rtl.css'; - }; - break; default: // unknown value, fail out return; From ffb15b9737798d473b8fa136514a422362adfbc0 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 8 Dec 2020 16:49:14 +0100 Subject: [PATCH 30/34] Build to _inc directory --- .../class-admin-color-schemes.php | 20 ++++++++++--------- tools/builder/sass.js | 9 +++++---- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index bd19d37a537b6..2d9b3c7488425 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -56,10 +56,12 @@ public function update_admin_color_permissions_check( $allowed, $meta_key, $obje */ public function register_admin_color_schemes() { + $style_relative_path = '_inc/build/masterbar/admin-color-schemes/colors/'; + wp_admin_css_color( 'aquatic', __( 'Aquatic', 'jetpack' ), - plugins_url( 'colors/aquatic/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'aquatic/colors.css', JETPACK__PLUGIN_FILE ), array( '#135e96', '#007e65', '#043959', '#c5d9ed' ), array( 'base' => '#c5d9ed', @@ -71,7 +73,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-blue', __( 'Classic Blue', 'jetpack' ), - plugins_url( 'colors/classic-blue/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'classic-blue/colors.css', JETPACK__PLUGIN_FILE ), array( '#135e96', '#b26200', '#dcdcde', '#646970' ), array( 'base' => '#646970', @@ -83,7 +85,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), - plugins_url( 'colors/classic-bright/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'classic-bright/colors.css', JETPACK__PLUGIN_FILE ), array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ), array( 'base' => '#646970', @@ -95,7 +97,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-dark', __( 'Classic Dark', 'jetpack' ), - plugins_url( 'colors/classic-dark/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'classic-dark/colors.css', JETPACK__PLUGIN_FILE ), array( '#101517', '#c9356e', '#32373c', '#0073aa' ), array( 'base' => '#a2aab2', @@ -107,7 +109,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'contrast', __( 'Contrast', 'jetpack' ), - plugins_url( 'colors/contrast/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'contrast/colors.css', JETPACK__PLUGIN_FILE ), array( '#101517', '#ffffff', '#32373c', '#b4b9be' ), array( 'base' => '#1d2327', @@ -119,7 +121,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'nightfall', __( 'Nightfall', 'jetpack' ), - plugins_url( 'colors/nightfall/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'nightfall/colors.css', JETPACK__PLUGIN_FILE ), array( '#00131c', '#043959', '#2271b1', '#9ec2e6' ), array( 'base' => '#9ec2e6', @@ -131,7 +133,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'powder-snow', __( 'Powder Snow', 'jetpack' ), - plugins_url( 'colors/powder-snow/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'powder-snow/colors.css', JETPACK__PLUGIN_FILE ), array( '#101517', '#2271b1', '#dcdcde', '#646970' ), array( 'base' => '#646970', @@ -143,7 +145,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sakura', __( 'Sakura', 'jetpack' ), - plugins_url( 'colors/sakura/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'sakura/colors.css', JETPACK__PLUGIN_FILE ), array( '#005042', '#f2ceda', '#2271b1', '#8c1749' ), array( 'base' => '#8c1749', @@ -155,7 +157,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sunset', __( 'Sunset', 'jetpack' ), - plugins_url( 'colors/sunset/colors.css', __FILE__ ), + plugins_url( $style_relative_path . 'sunset/colors.css', JETPACK__PLUGIN_FILE ), array( '#691c1c', '#b26200', '#f0c930', '#facfd2' ), array( 'base' => '#facfd2', diff --git a/tools/builder/sass.js b/tools/builder/sass.js index 49ad74ac97dd1..f654f41b1edf6 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -52,7 +52,7 @@ gulp.task( 'sass:calypsoify', function ( done ) { } ); } ); -gulp.task( 'sass:colorschemes', function ( done ) { +gulp.task( 'sass:color-schemes', function ( done ) { log( 'Building Color schemes CSS...' ); return gulp @@ -62,9 +62,10 @@ gulp.task( 'sass:colorschemes', function ( done ) { prepend.prependText( '/* Do not modify this file directly. It is compiled SASS code. */\n' ) ) .pipe( autoprefixer() ) - .pipe( gulp.dest( './modules/masterbar/admin-color-schemes/colors' ) ) + .pipe( gulp.dest( './_inc/build/masterbar/admin-color-schemes/colors' ) ) .on( 'end', function () { log( 'Color Schemes CSS finished.' ); + done(); } ); } ); @@ -231,7 +232,7 @@ gulp.task( export const build = gulp.parallel( gulp.series( 'sass:dashboard', 'sass:calypsoify' ), - 'sass:colorschemes', + 'sass:color-schemes', 'sass:old', 'sass:packages' ); @@ -239,7 +240,7 @@ export const build = gulp.parallel( export const watch = function () { return gulp.watch( [ './**/*.scss', ...alwaysIgnoredPaths ], - gulp.series( 'sass:dashboard', 'sass:calypsoify', 'sass:colorschemes', 'sass:old' ) + gulp.series( 'sass:dashboard', 'sass:calypsoify', 'sass:color-schemes', 'sass:old' ) ); }; From 56955dc2f5fce8fa56692886eaa2f53c370021b6 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 8 Dec 2020 16:51:01 +0100 Subject: [PATCH 31/34] Add build-color-schemes task to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index fd762a72a7d26..7352d709d3a19 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "add-textdomain": "wpi18n addtextdomain --textdomain=jetpack --glob-pattern='!(docker|node_modules|tests|tools|vendor){*.php,**/*.php}'", "build": "yarn install-if-deps-outdated && yarn clean && yarn build-client && yarn build-php && yarn build-extensions && yarn build-search && yarn build-packages", "build-client": "gulp", + "build-color-schemes": "gulp sass:color-schemes", "build-concurrently": "yarn install-if-deps-outdated && yarn clean && yarn concurrently 'yarn build-client' 'yarn build-php' 'yarn build-extensions' 'yarn build-search' 'yarn build-packages'", "build-extensions": "webpack --config ./webpack.config.extensions.js", "build-packages": "webpack --config ./webpack.config.packages.js", From 3810ba657dde038193974a9406f34f63f62c70e7 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 9 Dec 2020 15:12:38 +0100 Subject: [PATCH 32/34] Remove gitignore addition after build target change --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 0178909c69e0a..ca6ff39bb2b19 100644 --- a/.gitignore +++ b/.gitignore @@ -63,7 +63,6 @@ phpcs.xml /_inc/build /modules/**/*.min.css /modules/**/*-rtl.css -/modules/masterbar/admin-color-schemes/**/*.css* /css /modules/**/*/block.js /vendor/automattic/ From 4f812088c8c7c6e704da75c2e44d351da2e0a329 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 9 Dec 2020 20:18:33 +0100 Subject: [PATCH 33/34] Account for different paths on wpcom --- .../class-admin-color-schemes.php | 34 +++++++++++++------ package.json | 2 +- tools/builder/sass.js | 13 +++++-- 3 files changed, 35 insertions(+), 14 deletions(-) diff --git a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php index 2d9b3c7488425..18094acc5c6e5 100644 --- a/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php +++ b/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php @@ -51,17 +51,29 @@ public function update_admin_color_permissions_check( $allowed, $meta_key, $obje return current_user_can( 'edit_user', $object_id ); } + /** + * Get the admin color scheme URL based on the environment + * + * @param string $color_scheme The color scheme to get the URL for. + * @return string + */ + public function get_admin_color_scheme_url( $color_scheme ) { + if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) { + return plugins_url( 'colors/' . $color_scheme . '/colors.css', __FILE__ ); + } else { + return plugins_url( '_inc/build/masterbar/admin-color-schemes/colors/' . $color_scheme . '/colors.css', JETPACK__PLUGIN_FILE ); + } + } + /** * Registers new admin color schemes */ public function register_admin_color_schemes() { - $style_relative_path = '_inc/build/masterbar/admin-color-schemes/colors/'; - wp_admin_css_color( 'aquatic', __( 'Aquatic', 'jetpack' ), - plugins_url( $style_relative_path . 'aquatic/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'aquatic' ), array( '#135e96', '#007e65', '#043959', '#c5d9ed' ), array( 'base' => '#c5d9ed', @@ -73,7 +85,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-blue', __( 'Classic Blue', 'jetpack' ), - plugins_url( $style_relative_path . 'classic-blue/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'classic-blue' ), array( '#135e96', '#b26200', '#dcdcde', '#646970' ), array( 'base' => '#646970', @@ -85,7 +97,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-bright', __( 'Classic Bright', 'jetpack' ), - plugins_url( $style_relative_path . 'classic-bright/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'classic-bright' ), array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ), array( 'base' => '#646970', @@ -97,7 +109,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'classic-dark', __( 'Classic Dark', 'jetpack' ), - plugins_url( $style_relative_path . 'classic-dark/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'classic-dark' ), array( '#101517', '#c9356e', '#32373c', '#0073aa' ), array( 'base' => '#a2aab2', @@ -109,7 +121,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'contrast', __( 'Contrast', 'jetpack' ), - plugins_url( $style_relative_path . 'contrast/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'contrast' ), array( '#101517', '#ffffff', '#32373c', '#b4b9be' ), array( 'base' => '#1d2327', @@ -121,7 +133,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'nightfall', __( 'Nightfall', 'jetpack' ), - plugins_url( $style_relative_path . 'nightfall/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'nightfall' ), array( '#00131c', '#043959', '#2271b1', '#9ec2e6' ), array( 'base' => '#9ec2e6', @@ -133,7 +145,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'powder-snow', __( 'Powder Snow', 'jetpack' ), - plugins_url( $style_relative_path . 'powder-snow/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'powder-snow' ), array( '#101517', '#2271b1', '#dcdcde', '#646970' ), array( 'base' => '#646970', @@ -145,7 +157,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sakura', __( 'Sakura', 'jetpack' ), - plugins_url( $style_relative_path . 'sakura/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'sakura' ), array( '#005042', '#f2ceda', '#2271b1', '#8c1749' ), array( 'base' => '#8c1749', @@ -157,7 +169,7 @@ public function register_admin_color_schemes() { wp_admin_css_color( 'sunset', __( 'Sunset', 'jetpack' ), - plugins_url( $style_relative_path . 'sunset/colors.css', JETPACK__PLUGIN_FILE ), + $this->get_admin_color_scheme_url( 'sunset' ), array( '#691c1c', '#b26200', '#f0c930', '#facfd2' ), array( 'base' => '#facfd2', diff --git a/package.json b/package.json index 7352d709d3a19..0e3b3bc19e513 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "add-textdomain": "wpi18n addtextdomain --textdomain=jetpack --glob-pattern='!(docker|node_modules|tests|tools|vendor){*.php,**/*.php}'", "build": "yarn install-if-deps-outdated && yarn clean && yarn build-client && yarn build-php && yarn build-extensions && yarn build-search && yarn build-packages", "build-client": "gulp", - "build-color-schemes": "gulp sass:color-schemes", + "build-color-schemes-wpcom": "GULP_ENV=wpcom gulp sass:color-schemes", "build-concurrently": "yarn install-if-deps-outdated && yarn clean && yarn concurrently 'yarn build-client' 'yarn build-php' 'yarn build-extensions' 'yarn build-search' 'yarn build-packages'", "build-extensions": "webpack --config ./webpack.config.extensions.js", "build-packages": "webpack --config ./webpack.config.packages.js", diff --git a/tools/builder/sass.js b/tools/builder/sass.js index f654f41b1edf6..a9d20a6d1271d 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -55,14 +55,23 @@ gulp.task( 'sass:calypsoify', function ( done ) { gulp.task( 'sass:color-schemes', function ( done ) { log( 'Building Color schemes CSS...' ); + const src = + process.env.GULP_ENV === 'wpcom' + ? '../masterbar/admin-color-schemes/colors/**/*.scss' + : './modules/masterbar/admin-color-schemes/colors/**/*.scss'; + const dest = + process.env.GULP_ENV === 'wpcom' + ? '../masterbar/admin-color-schemes/colors' + : './_inc/build/masterbar/admin-color-schemes/colors'; + return gulp - .src( './modules/masterbar/admin-color-schemes/colors/**/*.scss' ) + .src( src ) .pipe( sass( { outputStyle: 'compressed' } ) ) .pipe( prepend.prependText( '/* Do not modify this file directly. It is compiled SASS code. */\n' ) ) .pipe( autoprefixer() ) - .pipe( gulp.dest( './_inc/build/masterbar/admin-color-schemes/colors' ) ) + .pipe( gulp.dest( dest ) ) .on( 'end', function () { log( 'Color Schemes CSS finished.' ); done(); From 92722752d9d48e4c4b336edfb3a2edd6cffd482e Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 10 Dec 2020 14:47:39 +0100 Subject: [PATCH 34/34] Remove gulp variation in favor of Compass on wpcom --- package.json | 3 +-- tools/builder/sass.js | 10 ++-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 0e3b3bc19e513..6c1d9789550ad 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "add-textdomain": "wpi18n addtextdomain --textdomain=jetpack --glob-pattern='!(docker|node_modules|tests|tools|vendor){*.php,**/*.php}'", "build": "yarn install-if-deps-outdated && yarn clean && yarn build-client && yarn build-php && yarn build-extensions && yarn build-search && yarn build-packages", "build-client": "gulp", - "build-color-schemes-wpcom": "GULP_ENV=wpcom gulp sass:color-schemes", "build-concurrently": "yarn install-if-deps-outdated && yarn clean && yarn concurrently 'yarn build-client' 'yarn build-php' 'yarn build-extensions' 'yarn build-search' 'yarn build-packages'", "build-extensions": "webpack --config ./webpack.config.extensions.js", "build-packages": "webpack --config ./webpack.config.packages.js", @@ -72,8 +71,8 @@ "php:lint": "composer phpcs:lint", "reformat-files": "./node_modules/.bin/prettier --ignore-path .eslintignore --write \"**/*.{js,jsx,json}\"", "test-adminpage": "yarn test-client && yarn test-gui", - "test-client": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js", "test-adminpage-and-extensions-and-search": "yarn concurrently 'yarn test-adminpage' 'yarn test-extensions' 'yarn test-search'", + "test-client": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js", "test-decrypt-config": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./tests/e2e/config/encrypted.enc -out ./tests/e2e/config/local-test.js", "test-e2e": "NODE_CONFIG_DIR='./tests/e2e/config' NODE_CONFIG_ENV=test JEST_PUPPETEER_CONFIG=tests/e2e/jest-puppeteer.config.js jest --config tests/e2e/jest.config.js --runInBand --verbose", "test-encrypt-config": "openssl enc -md sha1 -aes-256-cbc -pass env:CONFIG_KEY -in ./tests/e2e/config/local-test.js -out ./tests/e2e/config/encrypted.enc", diff --git a/tools/builder/sass.js b/tools/builder/sass.js index a9d20a6d1271d..6adb9a58ca391 100644 --- a/tools/builder/sass.js +++ b/tools/builder/sass.js @@ -55,14 +55,8 @@ gulp.task( 'sass:calypsoify', function ( done ) { gulp.task( 'sass:color-schemes', function ( done ) { log( 'Building Color schemes CSS...' ); - const src = - process.env.GULP_ENV === 'wpcom' - ? '../masterbar/admin-color-schemes/colors/**/*.scss' - : './modules/masterbar/admin-color-schemes/colors/**/*.scss'; - const dest = - process.env.GULP_ENV === 'wpcom' - ? '../masterbar/admin-color-schemes/colors' - : './_inc/build/masterbar/admin-color-schemes/colors'; + const src = './modules/masterbar/admin-color-schemes/colors/**/*.scss'; + const dest = './_inc/build/masterbar/admin-color-schemes/colors'; return gulp .src( src )