From b0005524808f9f16b1e440276029767ac2668e0e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 4 Dec 2017 17:12:14 +0100 Subject: [PATCH] Split variables stylesheet into multiple This PR splits out breakpoints and colors from the _variables.scss stylesheet, in a hope to fix #964. It also uses `//` for comments that should be eaten in compilation. Further improvements can probably be made if we find either the need for more variables in either of the current sections in _variables.scss, or if we can move some of those variables to live in context of the components that use them. As of now, though, the remaining variables don't feel like enough to split further, and the are used across many components. --- editor/assets/stylesheets/_breakpoints.scss | 39 ++++++++ editor/assets/stylesheets/_colors.scss | 43 +++++++++ editor/assets/stylesheets/_variables.scss | 100 +++----------------- webpack.config.js | 2 +- 4 files changed, 97 insertions(+), 87 deletions(-) create mode 100644 editor/assets/stylesheets/_breakpoints.scss create mode 100644 editor/assets/stylesheets/_colors.scss diff --git a/editor/assets/stylesheets/_breakpoints.scss b/editor/assets/stylesheets/_breakpoints.scss new file mode 100644 index 0000000000000..57ec965a73eca --- /dev/null +++ b/editor/assets/stylesheets/_breakpoints.scss @@ -0,0 +1,39 @@ +/** + * Breakpoints & Media Queries + */ + +// Most used breakpoints +$break-huge: 1440px; +$break-wide: 1280px; +$break-large: 960px; // admin sidebar auto folds +$break-medium: 782px; // adminbar goes big +$break-small: 600px; +$break-mobile: 480px; + +// All media queries currently in WordPress: +// +// min-width: 2000px +// min-width: 1680px +// min-width: 1250px +// max-width: 1120px * +// max-width: 1000px +// min-width: 769px and max-width: 1000px +// max-width: 960px * +// max-width: 900px +// max-width: 850px +// min-width: 800px and max-width: 1499px +// max-width: 800px +// max-width: 799px +// max-width: 782px * +// max-width: 768px +// max-width: 640px * +// max-width: 600px * +// max-width: 520px +// max-width: 500px +// max-width: 480px * +// max-width: 400px * +// max-width: 380px +// max-width: 320px * +// +// Those marked * seem to be more commonly used than the others. +// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse diff --git a/editor/assets/stylesheets/_colors.scss b/editor/assets/stylesheets/_colors.scss new file mode 100644 index 0000000000000..24e4a4d8424ce --- /dev/null +++ b/editor/assets/stylesheets/_colors.scss @@ -0,0 +1,43 @@ +/** + * Colors + */ + +// Hugo's new WordPress shades of gray +// from http://codepen.io/hugobaeta/pen/grJjVp +$black: #000; +$dark-gray-900: #191e23; +$dark-gray-800: #23282d; +$dark-gray-700: #32373c; +$dark-gray-600: #40464d; +$dark-gray-500: #555d66; // use this most of the time for dark items +$dark-gray-400: #606a73; +$dark-gray-300: #6c7781; +$dark-gray-200: #7e8993; +$dark-gray-100: #8f98a1; +$light-gray-900: #a2aab2; +$light-gray-800: #b5bcc2; +$light-gray-700: #ccd0d4; +$light-gray-600: #d7dade; +$light-gray-500: #e2e4e7; // good for "grayed" items and borders +$light-gray-400: #e8eaeb; +$light-gray-300: #edeff0; +$light-gray-200: #f3f4f5; +$light-gray-100: #f8f9f9; +$white: #fff; + +// Additional colors +// some from https://make.wordpress.org/design/handbook/foundations/colors/ +$blue-wordpress-700: #00669b; +$blue-wordpress: #0073aa; +$blue-dark-900: #0071a1; +$blue-medium-500: #00a0d2; +$blue-medium-400: #33B3DB; +$blue-medium-300: #66C6E4; +$blue-medium-200: #BFE7F3; +$blue-medium-100: #E5F5FA; +$blue-medium-highlight: #b3e7fe; + +// Alert colors +$alert-yellow: #f0b849; +$alert-red: #d94f4f; +$alert-green: #4ab866; diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index be785e8e28f70..1035fc4bb351e 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -1,43 +1,8 @@ -/* Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp */ -$black: #000; -$dark-gray-900: #191e23; -$dark-gray-800: #23282d; -$dark-gray-700: #32373c; -$dark-gray-600: #40464d; -$dark-gray-500: #555d66; // use this most of the time for dark items -$dark-gray-400: #606a73; -$dark-gray-300: #6c7781; -$dark-gray-200: #7e8993; -$dark-gray-100: #8f98a1; -$light-gray-900: #a2aab2; -$light-gray-800: #b5bcc2; -$light-gray-700: #ccd0d4; -$light-gray-600: #d7dade; -$light-gray-500: #e2e4e7; // good for "grayed" items and borders -$light-gray-400: #e8eaeb; -$light-gray-300: #edeff0; -$light-gray-200: #f3f4f5; -$light-gray-100: #f8f9f9; -$white: #fff; +/** + * Often re-used variables + */ -/* Extra colors, some from https://make.wordpress.org/design/handbook/foundations/colors/ */ -$blue-wordpress-700: #00669b; -$blue-wordpress: #0073aa; - -$blue-dark-900: #0071a1; -$blue-medium-500: #00a0d2; -$blue-medium-400: #33B3DB; -$blue-medium-300: #66C6E4; -$blue-medium-200: #BFE7F3; -$blue-medium-100: #E5F5FA; -$blue-medium-highlight: #b3e7fe; - -/* Alerts */ -$alert-yellow: #f0b849; -$alert-red: #d94f4f; -$alert-green: #4ab866; - -/* Other */ +// Fonts & basics $default-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; $default-font-size: 13px; $default-line-height: 1.4; @@ -47,75 +12,38 @@ $editor-font-size: 16px; $text-editor-font-size: 14px; $editor-line-height: 1.8; $big-font-size: 18px; + +// Widths, heights & dimensions $item-spacing: 10px; $panel-padding: 16px; $header-height: 56px; -$inserter-tabs-height: 36px; -$block-toolbar-height: 37px; -$sidebar-width: 280px; $panel-header-height: 50px; $admin-bar-height: 32px; $admin-bar-height-big: 46px; $admin-sidebar-width: 160px; $admin-sidebar-width-big: 190px; $admin-sidebar-width-collapsed: 36px; + +// Visuals $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 ); $shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 ); -$text-editor-max-width: 760px; -/* Editor */ +// Editor $text-editor-max-width: 760px; $visual-editor-max-width: 636px; $block-controls-height: 36px; $icon-button-size: 36px; +$inserter-tabs-height: 36px; +$block-toolbar-height: 37px; +$sidebar-width: 280px; -/* Blocks */ +// Blocks $block-padding: 14px; $block-mover-margin: 18px; $block-mover-padding-hidden: 10px; $block-mover-padding-visible: 32px; $block-spacing: 4px; -/* Button styles */ +// Buttons & UI Widgets $button-style__radius-roundrect: 4px; $button-style__radius-round: 50%; - -/* Media Queries */ - -/* All media queries currently in WordPress: - -min-width: 2000px -min-width: 1680px -min-width: 1250px -max-width: 1120px * -max-width: 1000px -min-width: 769px and max-width: 1000px -max-width: 960px * -max-width: 900px -max-width: 850px -min-width: 800px and max-width: 1499px -max-width: 800px -max-width: 799px -max-width: 782px * -max-width: 768px -max-width: 640px * -max-width: 600px * -max-width: 520px -max-width: 500px -max-width: 480px * -max-width: 400px * -max-width: 380px -max-width: 320px * - -Those marked * seem to be more commonly used than the others. - -Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse - -*/ - -$break-huge: 1440px; -$break-wide: 1280px; -$break-large: 960px; // admin sidebar auto folds -$break-medium: 782px; // adminbar goes big -$break-small: 600px; -$break-mobile: 480px; diff --git a/webpack.config.js b/webpack.config.js index 1e493a4a88ee6..6e67b88ed86b7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,7 +35,7 @@ const extractConfig = { loader: 'sass-loader', query: { includePaths: [ 'editor/assets/stylesheets' ], - data: '@import "variables"; @import "mixins"; @import "animations";@import "z-index";', + data: '@import "colors"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";', outputStyle: 'production' === process.env.NODE_ENV ? 'compressed' : 'nested', },