diff --git a/editor/assets/stylesheets/_breakpoints.scss b/editor/assets/stylesheets/_breakpoints.scss new file mode 100644 index 00000000000000..57ec965a73eca2 --- /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 00000000000000..24e4a4d8424ce0 --- /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 be785e8e28f703..1035fc4bb351ea 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 1e493a4a88ee69..6e67b88ed86b72 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', },