115 lines
3.4 KiB
SCSS
115 lines
3.4 KiB
SCSS
/** @format */
|
|
|
|
$fallback-gutter: 24px;
|
|
$fallback-gutter-large: 40px;
|
|
$gutter: var(--main-gap);
|
|
$gutter-large: var(--large-gap);
|
|
|
|
$gap-largest: 40px;
|
|
$gap-larger: 36px;
|
|
$gap-large: 24px;
|
|
$gap: 16px;
|
|
$gap-small: 12px;
|
|
$gap-smaller: 8px;
|
|
$gap-smallest: 4px;
|
|
|
|
// Header
|
|
$header-height: 56px;
|
|
|
|
// Sidebar
|
|
$sidebar-width: 272px;
|
|
|
|
// @todo Remove this spacing variable
|
|
$spacing: 16px;
|
|
|
|
// Gutenberg variables. These are temporary until Gutenberg's variables are exposed.
|
|
$break-huge: 1440px;
|
|
$break-wide: 1280px;
|
|
$break-xlarge: 1080px;
|
|
$break-large: 960px; // admin sidebar auto folds
|
|
$break-medium: 782px; // adminbar goes big
|
|
$break-small: 600px;
|
|
$break-mobile: 480px;
|
|
$break-zoomed-in: 280px;
|
|
$border-width: 1px;
|
|
$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;
|
|
$white: $studio-white;
|
|
$black: $studio-black;
|
|
$blue-medium-900: #006589;
|
|
$blue-medium-800: #00739c;
|
|
$blue-medium-700: #007fac;
|
|
$blue-medium-600: #008dbe;
|
|
$blue-medium-500: #00a0d2;
|
|
$blue-medium-400: #33b3db;
|
|
$blue-medium-300: #66c6e4;
|
|
$blue-medium-200: #bfe7f3;
|
|
$blue-medium-100: #e5f5fa;
|
|
$blue-medium-highlight: #b3e7fe;
|
|
$blue-medium-focus: #007cba;
|
|
$light-gray-100: $core-grey-light-100;
|
|
$light-gray-200: $core-grey-light-200;
|
|
$light-gray-300: $core-grey-light-300;
|
|
$light-gray-400: $core-grey-light-400;
|
|
$light-gray-500: $core-grey-light-500;
|
|
$light-gray-600: $core-grey-light-600;
|
|
$light-gray-700: $core-grey-light-700;
|
|
$light-gray-800: $core-grey-light-800;
|
|
$light-gray-900: $core-grey-light-900;
|
|
$dark-gray-100: $core-grey-dark-100;
|
|
$dark-gray-200: $core-grey-dark-200;
|
|
$dark-gray-300: $core-grey-dark-300; // This & below have 4.5+ contrast against white
|
|
$dark-gray-400: $core-grey-dark-400;
|
|
$dark-gray-500: $core-grey-dark-500;
|
|
$dark-gray-600: $core-grey-dark-600;
|
|
$dark-gray-700: $core-grey-dark-700;
|
|
$dark-gray-800: $core-grey-dark-800;
|
|
$dark-gray-900: $core-grey-dark-900;
|
|
$alert-red: $error-red;
|
|
$alert-yellow: $notice-yellow;
|
|
$alert-green: $valid-green;
|
|
$toggle-border-width: 2px;
|
|
$radius-round-rectangle: 4px;
|
|
$icon-button-size: 36px;
|
|
$icon-button-size-small: 24px;
|
|
$grid-size-small: 4px;
|
|
$grid-size: 8px;
|
|
$grid-size-large: 16px;
|
|
$grid-size-xlarge: 24px;
|
|
|
|
// Newspack variables. These are temporary until we move away from Newspack components.
|
|
$muriel-white: $studio-white;
|
|
$muriel-hot-pink-400: $studio-pink-40;
|
|
$muriel-hot-pink-500: $studio-pink-50;
|
|
$muriel-hot-pink-700: $studio-pink-70;
|
|
$muriel-hot-purple-600: $studio-woocommerce-purple-60;
|
|
$muriel-gray-0: $studio-gray-0;
|
|
$muriel-gray-50: $studio-gray-5;
|
|
$muriel-gray-100: $studio-gray-10;
|
|
$muriel-gray-200: $studio-gray-20;
|
|
$muriel-gray-300: $studio-gray-30;
|
|
$muriel-gray-500: $studio-gray-50;
|
|
$muriel-gray-600: $studio-gray-60;
|
|
$muriel-gray-700: $studio-gray-70;
|
|
$muriel-gray-800: $studio-gray-80;
|
|
$muriel-green-400: $studio-green-40;
|
|
$muriel-red-500: $studio-red-50;
|
|
|
|
// WordPress defaults
|
|
$adminbar-height: 32px;
|
|
$adminbar-height-mobile: 46px;
|
|
|
|
// wp-admin colors
|
|
$wp-admin-background: #f1f1f1;
|
|
$wp-admin-sidebar: #24292d;
|
|
|
|
// Muriel
|
|
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
|
$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12),
|
|
0 6px 10px rgba(0, 0, 0, 0.14);
|
|
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|