diff --git a/ghost/admin/app/helpers/ui-btn-span.js b/ghost/admin/app/helpers/ui-btn-span.js
new file mode 100644
index 0000000000..7c53c16802
--- /dev/null
+++ b/ghost/admin/app/helpers/ui-btn-span.js
@@ -0,0 +1,8 @@
+import {btnStyles} from './ui-btn';
+import {helper} from '@ember/component/helper';
+
+export function uiBtnSpan([style], hash) {
+ return btnStyles(Object.assign({}, {style}, hash)).span;
+}
+
+export default helper(uiBtnSpan);
diff --git a/ghost/admin/app/helpers/ui-btn.js b/ghost/admin/app/helpers/ui-btn.js
new file mode 100644
index 0000000000..14299905b4
--- /dev/null
+++ b/ghost/admin/app/helpers/ui-btn.js
@@ -0,0 +1,60 @@
+import {helper} from '@ember/component/helper';
+
+export function btnStyles(options = {}) {
+ let button = 'dib midgrey btn-base br3 ba b--lightgrey-l1 pointer glow';
+ let span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+
+ // Set style
+ if (options.style) {
+ switch (options.style) {
+ case 'outline-white':
+ case 'outline-white--s':
+ button = 'bg-transparent dib white btn-base br3 ba b--white-60 pointer highlight-white';
+ span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+ break;
+ case 'outline-blue':
+ case 'outline-blue--s':
+ button = 'bg-transparent dib blue btn-base br3 ba b--lightgrey pointer glow';
+ span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+ break;
+ case 'blue':
+ case 'blue--s':
+ button = 'dib bw0 white br3 btn-base btn-blue pointer';
+ span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+ break;
+ case 'green':
+ case 'green--s':
+ button = 'dib bw0 white br3 btn-base btn-green pointer';
+ span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+ break;
+ case 'red':
+ case 'red--s':
+ button = 'dib bw0 white br3 btn-base btn-red pointer';
+ span = 'f8 fw5 tracked-2 dib pt0 pb0 tc';
+ break;
+ }
+
+ // Style ending with '--s' means small button
+ if (options.style.substr(options.style.length - 3) === '--s') {
+ button = `${button} btn-small`;
+ }
+ }
+
+ if (options.class) {
+ button = `${button} ${options.class}`;
+ }
+
+ button = `sans-serif ${button} flex-shrink-0`;
+ span = `${span} inline-flex items-center`;
+
+ return {
+ button: button,
+ span: span
+ };
+}
+
+export function uiBtn([style], hash) {
+ return btnStyles(Object.assign({}, {style}, hash)).button;
+}
+
+export default helper(uiBtn);
diff --git a/ghost/admin/app/helpers/ui-text.js b/ghost/admin/app/helpers/ui-text.js
new file mode 100644
index 0000000000..ddd28bc699
--- /dev/null
+++ b/ghost/admin/app/helpers/ui-text.js
@@ -0,0 +1,42 @@
+import {helper} from '@ember/component/helper';
+
+export function uiText([style]) {
+ let cssClass = '';
+
+ switch (style) {
+ case 'h1':
+ cssClass = 'f-subheadline fw7 tracked-3 lh-heading ma0 pa0';
+ break;
+ case 'h2':
+ cssClass = 'f2 fw6 tracked-2 tracked-3 lh-title ma0 pa0';
+ break;
+ case 'h3':
+ cssClass = 'f5 fw6 tracked-2 lh-title ma0 pa0';
+ break;
+ case 'h4':
+ cssClass = 'f7 fw6 tracked-2 lh-copy ma0 pa0';
+ break;
+ case 'h5':
+ cssClass = 'f8 fw6 tracked-2 lh-copy ma0 pa0';
+ break;
+ case 'h6':
+ cssClass = 'f-small ttu fw4 tracked-3 lh-copy ma0 pa0';
+ break;
+ case 'tl':
+ cssClass = 'f6 fw3 lh-copy tracked-1 ma0 pa0';
+ break;
+ case 't':
+ cssClass = 'f7 fw3 lh-copy tracked-1 ma0 pa0';
+ break;
+ case 'ts':
+ cssClass = 'f8 fw3 lh-copy tracked-2 ma0 pa0';
+ break;
+ case 'txs':
+ cssClass = 'f-small fw3 lh-copy tracked-3 ma0 pa0';
+ break;
+ }
+
+ return cssClass;
+}
+
+export default helper(uiText);
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index ccb15d1b1e..63a3d2cb89 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -4,7 +4,7 @@
includes normalize v7 so must come first to avoid clobbering
our old non-Spirit classes
*/
-@import "spirit/spirit-product-dark.css";
+@import "spirit/spirit-dark.css";
/* Patterns: Groups of Styles
/* ---------------------------------------------------------- */
diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css
index 89073d2673..fec2aafe80 100644
--- a/ghost/admin/app/styles/app.css
+++ b/ghost/admin/app/styles/app.css
@@ -4,7 +4,7 @@
includes normalize v7 so must come first to avoid clobbering
our old non-Spirit classes
*/
-@import "spirit/spirit-product.css";
+@import "spirit/spirit.css";
/* Patterns: Groups of Styles
/* ---------------------------------------------------------- */
diff --git a/ghost/admin/app/styles/spirit/_animations.css b/ghost/admin/app/styles/spirit/_animations.css
new file mode 100644
index 0000000000..0c53d715cf
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_animations.css
@@ -0,0 +1,260 @@
+/*
+ HOVER EFFECTS
+
+ - Dim
+ - Glow
+ - Hide Child
+ - Underline text
+ - Grow
+ - Pointer
+ - Shadow
+*/
+
+:root {
+ --animation-speed-fast: 0.15s;
+ --animation-speed-normal: 0.3s;
+ --animation-speed-slow: 0.45s;
+}
+
+
+
+/* Animations
+/* -------------------------------------------------------- */
+.anim-fast { transition: all var(--animation-speed-fast) ease; }
+.anim-normal { transition: all var(--animation-speed-normal) ease; }
+.anim-slow { transition: all var(--animation-speed-slow) ease; }
+
+.anim-fast-bezier { transition: all var(--animation-speed-fast) cubic-bezier(.71,.16,.52,.88); }
+.anim-normal-bezier { transition: all var(--animation-speed-normal) cubic-bezier(.71,.16,.52,.88); }
+.anim-slow-bezier { transition: all var(--animation-speed-slow) cubic-bezier(.71,.16,.52,.88); }
+
+
+/*
+
+ Dim element on hover by adding the dim class.
+
+*/
+.dim {
+ opacity: 1;
+ transition: opacity var(--animation-speed-fast) ease-in;
+ will-change: opacity;
+}
+.dim:hover,
+.dim:focus {
+ opacity: .5;
+ transition: opacity var(--animation-speed-fast) ease-in;
+}
+.dim:active {
+ opacity: .8; transition: opacity var(--animation-speed-fast) ease-out;
+}
+
+
+/*
+
+ Lighter variation
+
+*/
+.dim-lite {
+ opacity: 1;
+ transition: opacity var(--animation-speed-fast) ease-in;
+ will-change: opacity;
+}
+.dim-lite:hover,
+.dim-lite:focus {
+ opacity: .75;
+ transition: opacity var(--animation-speed-fast) ease-in;
+}
+.dim-lite:active {
+ opacity: .9; transition: opacity var(--animation-speed-fast) ease-out;
+}
+
+
+/*
+
+ Glow
+
+ */
+.glow {
+ transition: border var(--animation-speed-slow) ease!important;
+}
+
+.glow:hover {
+ border: 1px solid var(--blue);
+}
+
+
+/*
+
+ Highlight with white background
+
+*/
+.highlight-white {
+ transition: all var(--animation-speed-fast) ease!important;
+}
+
+.highlight-white:hover {
+ background-color: rgba(255, 255, 255, 0.15)!important;
+}
+
+
+
+/*
+
+ Hide child & reveal on hover:
+
+ Put the hide-child class on a parent element and any nested element with the
+ child class will be hidden and displayed on hover or focus.
+
+
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/
+
+.hide-child .child {
+ opacity: 0;
+ transition: all var(--animation-speed-normal) ease-in;
+}
+.hide-child:hover .child,
+.hide-child:focus .child,
+.hide-child:active .child {
+ opacity: 1;
+ transition: all var(--animation-speed-normal) ease-in;
+}
+
+.underline-hover:hover,
+.underline-hover:focus {
+ text-decoration: underline;
+}
+
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+
+.grow {
+ -moz-osx-font-smoothing: grayscale;
+ backface-visibility: hidden;
+ transform: translateY(0) translateZ(0);
+ transition: transform var(--animation-speed-normal) ease-out;
+}
+
+.grow:hover,
+.grow:focus {
+ transform: translateY(-0.6rem) scale(1.002);
+}
+
+.grow:active {
+ transform: scale(.90);
+}
+
+/* Add pointer on hover */
+
+.pointer:hover {
+ cursor: pointer;
+}
+
+
+/*
+Pop: Appear from bottom, disappear to bottom
+*/
+.pop-down {
+ transform: translateY(0.5rem) scale(0.98);
+}
+
+
+/*
+ Add shadow on hover.
+
+ Performant box-shadow animation pattern from
+ http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+
+.shadow-hover {
+ position: relative;
+ transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover::after {
+ content: '';
+ box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.09);
+ border-radius: inherit;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+ opacity: 1;
+}
+
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+ transition: background-color var(--animation-speed-normal) ease-in-out;
+}
+
+
+/* Spinner */
+
+ .ghost-spinner {
+ animation: spin 1s linear infinite;
+ border: 4px solid;
+ border-color: var(--black-20);
+ border-radius: 100px;
+ box-sizing: border-box;
+ display: inline-block;
+ margin: -2px 0;
+ position: relative;
+ width: 20px;
+ height: 20px;
+ }
+
+ .ghost-spinner:before {
+ background: var(--black-60);
+ border-radius: 100px;
+ content: "";
+ display: block;
+ height: 4px;
+ margin-top: 11px;
+ width: 4px;
+ }
+
+.spinner-s {
+ width: 14px;
+ height: 14px;
+}
+.spinner-s:before { margin-top: 6px; }
+
+.spinner-xl {
+ width: 32px;
+ height: 32px;
+}
+.spinner-xl:before { margin-top: 20px; }
+
+.spinner-blue { border-color: rgba(62,176,239,.2);}
+.spinner-blue:before { background: rgba(62,176,239,.7); }
+
+.spinner-white { border-color: rgba(255,255,255,.2); }
+.spinner-white:before { background:rgba(255,255,255,.7);}
+
+.spinner-xxl {
+ width: 52px;
+ height: 52px;
+ border: 1px solid;
+}
+.spinner-xxl:before {
+ margin-top: 9px;
+ height: 6px;
+ width: 6px;
+ background: var(--darkgrey-l2);
+}
diff --git a/ghost/admin/app/styles/spirit/_aspect-ratios.css b/ghost/admin/app/styles/spirit/_aspect-ratios.css
new file mode 100644
index 0000000000..1ee67e1d96
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_aspect-ratios.css
@@ -0,0 +1,135 @@
+/*
+
+ ASPECT RATIOS
+
+*/
+
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ *
+ *
+ *
+ *
+ * */
+
+.aspect-ratio {
+ height: 0;
+ position: relative;
+}
+
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+
+.aspect-ratio--4x3 { padding-bottom: 75%; }
+.aspect-ratio--3x4 { padding-bottom: 133.33%; }
+
+.aspect-ratio--6x4 { padding-bottom: 66.6%; }
+.aspect-ratio--4x6 { padding-bottom: 150%; }
+
+.aspect-ratio--8x5 { padding-bottom: 62.5%; }
+.aspect-ratio--5x8 { padding-bottom: 160%; }
+
+.aspect-ratio--7x5 { padding-bottom: 71.42%; }
+.aspect-ratio--5x7 { padding-bottom: 140%; }
+
+.aspect-ratio--1x1 { padding-bottom: 100%; }
+
+.aspect-ratio--object {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+}
+
+@media (--breakpoint-not-small){
+ .aspect-ratio-ns {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
+ .aspect-ratio--object-ns {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
+
+@media (--breakpoint-medium){
+ .aspect-ratio-m {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
+ .aspect-ratio--object-m {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
+
+@media (--breakpoint-large){
+ .aspect-ratio-l {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
+ .aspect-ratio--object-l {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_background-position.css b/ghost/admin/app/styles/spirit/_background-position.css
new file mode 100644
index 0000000000..4d850b6a55
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_background-position.css
@@ -0,0 +1,126 @@
+/*
+
+ BACKGROUND POSITION
+
+ Base:
+ bg = background
+
+ Modifiers:
+ -center = center center
+ -top = top center
+ -right = center right
+ -bottom = bottom center
+ -left = center left
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+.bg-center {
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.bg-top {
+ background-repeat: no-repeat;
+ background-position: top center;
+}
+
+.bg-right {
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+
+.bg-bottom {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+}
+
+.bg-left {
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+
+@media (--breakpoint-not-small) {
+ .bg-center-ns {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-ns {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-ns {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-ns {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-ns {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .bg-center-m {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-m {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-m {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-m {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-m {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+
+@media (--breakpoint-large) {
+ .bg-center-l {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-l {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-l {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-l {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-l {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_background-size.css b/ghost/admin/app/styles/spirit/_background-size.css
new file mode 100644
index 0000000000..bcb90a00c8
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_background-size.css
@@ -0,0 +1,17 @@
+.cover { background-size: cover!important; }
+.contain { background-size: contain!important; }
+
+@media (--breakpoint-not-small) {
+ .cover-ns { background-size: cover!important; }
+ .contain-ns { background-size: contain!important; }
+}
+
+@media (--breakpoint-medium) {
+ .cover-m { background-size: cover!important; }
+ .contain-m { background-size: contain!important; }
+}
+
+@media (--breakpoint-large) {
+ .cover-l { background-size: cover!important; }
+ .contain-l { background-size: contain!important; }
+}
diff --git a/ghost/admin/app/styles/spirit/_border-colors.css b/ghost/admin/app/styles/spirit/_border-colors.css
new file mode 100644
index 0000000000..bec837ea13
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_border-colors.css
@@ -0,0 +1,129 @@
+/*
+
+ BORDER COLORS
+
+ Border colors can be used to extend the base
+ border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+ The base border class by default will set the color of the border
+ to that of the current text color. These classes are for the cases
+ where you desire for the text and border colors to be different.
+
+ Base:
+ b = border
+
+ Modifiers:
+ --color-name = each color variable name is also a border color name
+
+*/
+
+.b--blue { border-color: var(--blue); }
+.b--green { border-color: var(--green); }
+.b--purple { border-color: var(--purple); }
+.b--yellow { border-color: var(--yellow); }
+.b--red { border-color: var(--red); }
+.b--pink { border-color: var(--pink); }
+.b--white { border-color: var(--white); }
+
+.b--white-10 { border-color: var(--white-10); }
+.b--white-20 { border-color: var(--white-20); }
+.b--white-30 { border-color: var(--white-30); }
+.b--white-40 { border-color: var(--white-40); }
+.b--white-50 { border-color: var(--white-50); }
+.b--white-60 { border-color: var(--white-60); }
+.b--white-70 { border-color: var(--white-70); }
+.b--white-80 { border-color: var(--white-80); }
+.b--white-90 { border-color: var(--white-90); }
+
+.b--black-10 { border-color: var(--black-10); }
+.b--black-20 { border-color: var(--black-20); }
+.b--black-30 { border-color: var(--black-30); }
+.b--black-40 { border-color: var(--black-40); }
+.b--black-50 { border-color: var(--black-50); }
+.b--black-60 { border-color: var(--black-60); }
+.b--black-70 { border-color: var(--black-70); }
+.b--black-80 { border-color: var(--black-80); }
+.b--black-90 { border-color: var(--black-90); }
+
+.b--darkgrey { border-color: var(--darkgrey); }
+.b--middarkgrey { border-color: var(--middarkgrey); }
+.b--midgrey { border-color: var(--midgrey); }
+.b--midlightgrey { border-color: var(--midlightgrey); }
+.b--lightgrey { border-color: var(--lightgrey); }
+.b--whitegrey { border-color: var(--whitegrey); }
+
+/* Shades */
+.b--blue-l3 { border-color: var(--blue-l3); }
+.b--blue-l2 { border-color: var(--blue-l2); }
+.b--blue-l1 { border-color: var(--blue-l1); }
+.b--blue-d1 { border-color: var(--blue-d1); }
+.b--blue-d2 { border-color: var(--blue-d2); }
+.b--blue-d3 { border-color: var(--blue-d3); }
+
+.b--green-l3 { border-color: var(--green-l3); }
+.b--green-l2 { border-color: var(--green-l2); }
+.b--green-l1 { border-color: var(--green-l1); }
+.b--green-d1 { border-color: var(--green-d1); }
+.b--green-d2 { border-color: var(--green-d2); }
+.b--green-d3 { border-color: var(--green-d3); }
+
+.b--purple-l3 { border-color: var(--purple-l3); }
+.b--purple-l2 { border-color: var(--purple-l2); }
+.b--purple-l1 { border-color: var(--purple-l1); }
+.b--purple-d1 { border-color: var(--purple-d1); }
+.b--purple-d2 { border-color: var(--purple-d2); }
+.b--purple-d3 { border-color: var(--purple-d3); }
+
+.b--yellow-l3 { border-color: var(--yellow-l3); }
+.b--yellow-l2 { border-color: var(--yellow-l2); }
+.b--yellow-l1 { border-color: var(--yellow-l1); }
+.b--yellow-d1 { border-color: var(--yellow-d1); }
+.b--yellow-d2 { border-color: var(--yellow-d2); }
+.b--yellow-d3 { border-color: var(--yellow-d3); }
+
+.b--red-l3 { border-color: var(--red-l3); }
+.b--red-l2 { border-color: var(--red-l2); }
+.b--red-l1 { border-color: var(--red-l1); }
+.b--red-d1 { border-color: var(--red-d1); }
+.b--red-d2 { border-color: var(--red-d2); }
+.b--red-d3 { border-color: var(--red-d3); }
+
+.b--pink-l3 { border-color: var(--pink-l3); }
+.b--pink-l2 { border-color: var(--pink-l2); }
+.b--pink-l1 { border-color: var(--pink-l1); }
+.b--pink-d1 { border-color: var(--pink-d1); }
+.b--pink-d2 { border-color: var(--pink-d2); }
+.b--pink-d3 { border-color: var(--pink-d3); }
+
+.b--darkgrey-l2 { border-color: var(--darkgrey-l2); }
+.b--darkgrey-l1 { border-color: var(--darkgrey-l1); }
+.b--darkgrey-d1 { border-color: var(--darkgrey-d1); }
+.b--darkgrey-d2 { border-color: var(--darkgrey-d2); }
+
+.b--middarkgrey-l2 { border-color: var(--middarkgrey-l2); }
+.b--middarkgrey-l1 { border-color: var(--middarkgrey-l1); }
+.b--middarkgrey-d1 { border-color: var(--middarkgrey-d1); }
+.b--middarkgrey-d2 { border-color: var(--middarkgrey-d2); }
+
+.b--midgrey-l2 { border-color: var(--midgrey-l2); }
+.b--midgrey-l1 { border-color: var(--midgrey-l1); }
+.b--midgrey-d1 { border-color: var(--midgrey-d1); }
+.b--midgrey-d2 { border-color: var(--midgrey-d2); }
+
+.b--midlightgrey-l2 { border-color: var(--midlightgrey-l2); }
+.b--midlightgrey-l1 { border-color: var(--midlightgrey-l1); }
+.b--midlightgrey-d1 { border-color: var(--midlightgrey-d1); }
+.b--midlightgrey-d2 { border-color: var(--midlightgrey-d2); }
+
+.b--lightgrey-l2 { border-color: var(--lightgrey-l2); }
+.b--lightgrey-l1 { border-color: var(--lightgrey-l1); }
+.b--lightgrey-d1 { border-color: var(--lightgrey-d1); }
+.b--lightgrey-d2 { border-color: var(--lightgrey-d2); }
+
+.b--whitegrey-l2 { border-color: var(--whitegrey-l2); }
+.b--whitegrey-l1 { border-color: var(--whitegrey-l1); }
+.b--whitegrey-d1 { border-color: var(--whitegrey-d1); }
+.b--whitegrey-d2 { border-color: var(--whitegrey-d2); }
+
+.b--transparent { border-color: var(--transparent); }
+.b--inherit { border-color: inherit; }
diff --git a/ghost/admin/app/styles/spirit/_border-radius.css b/ghost/admin/app/styles/spirit/_border-radius.css
new file mode 100644
index 0000000000..5bdd913769
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_border-radius.css
@@ -0,0 +1,126 @@
+/*
+
+ BORDER RADIUS
+
+ Base:
+ br = border-radius
+
+ Modifiers:
+ 0 = 0/none
+ 1 = 1st step in scale
+ 2 = 2nd step in scale
+ 3 = 3rd step in scale
+ 4 = 4th step in scale
+
+ Literal values:
+ -100 = 100%
+ -pill = 9999px
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+ .br0 { border-radius: 0; }
+ .br1 { border-radius: .2rem; }
+ .br2 { border-radius: .3rem; }
+ .br3 { border-radius: .4rem; }
+ .br4 { border-radius: .8rem; }
+ .br-100 { border-radius: 100%; }
+ .br-pill { border-radius: 9999px; }
+ .br--bottom {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+@media (--breakpoint-not-small) {
+ .br0-ns { border-radius: 0; }
+ .br1-ns { border-radius: .2rem; }
+ .br2-ns { border-radius: .3rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: .8rem; }
+ .br-100-ns { border-radius: 100%; }
+ .br-pill-ns { border-radius: 9999px; }
+ .br--bottom-ns {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-ns {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-ns {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-ns {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .br0-m { border-radius: 0; }
+ .br1-m { border-radius: .2rem; }
+ .br2-m { border-radius: .3rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: .8rem; }
+ .br-100-m { border-radius: 100%; }
+ .br-pill-m { border-radius: 9999px; }
+ .br--bottom-m {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-m {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-m {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-m {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
+@media (--breakpoint-large) {
+ .br0-l { border-radius: 0; }
+ .br1-l { border-radius: .2rem; }
+ .br2-l { border-radius: .3rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: .8rem; }
+ .br-100-l { border-radius: 100%; }
+ .br-pill-l { border-radius: 9999px; }
+ .br--bottom-l {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-l {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-l {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-l {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_border-style.css b/ghost/admin/app/styles/spirit/_border-style.css
new file mode 100644
index 0000000000..46c2517e41
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_border-style.css
@@ -0,0 +1,47 @@
+/*
+
+ BORDER STYLES
+
+ Depends on base border module in _borders.css
+
+ Base:
+ b = border-style
+
+ Modifiers:
+ --none = none
+ --dotted = dotted
+ --dashed = dashed
+ --solid = solid
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+.b--dotted { border-style: dotted; }
+.b--dashed { border-style: dashed; }
+.b--solid { border-style: solid; }
+.b--none { border-style: none; }
+
+@media (--breakpoint-not-small) {
+ .b--dotted-ns { border-style: dotted; }
+ .b--dashed-ns { border-style: dashed; }
+ .b--solid-ns { border-style: solid; }
+ .b--none-ns { border-style: none; }
+}
+
+@media (--breakpoint-medium) {
+ .b--dotted-m { border-style: dotted; }
+ .b--dashed-m { border-style: dashed; }
+ .b--solid-m { border-style: solid; }
+ .b--none-m { border-style: none; }
+}
+
+@media (--breakpoint-large) {
+ .b--dotted-l { border-style: dotted; }
+ .b--dashed-l { border-style: dashed; }
+ .b--solid-l { border-style: solid; }
+ .b--none-l { border-style: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_border-widths.css b/ghost/admin/app/styles/spirit/_border-widths.css
new file mode 100644
index 0000000000..1a95091e57
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_border-widths.css
@@ -0,0 +1,73 @@
+/*
+
+ BORDER WIDTHS
+
+ Base:
+ bw = border-width
+
+ Modifiers:
+ 0 = 0 width border
+ 1 = 1st step in border-width scale
+ 2 = 2nd step in border-width scale
+ 3 = 3rd step in border-width scale
+ 4 = 4th step in border-width scale
+ 5 = 5th step in border-width scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
+
+/* Resets */
+.bt-0 { border-top-width: 0; }
+.br-0 { border-right-width: 0; }
+.bb-0 { border-bottom-width: 0; }
+.bl-0 { border-left-width: 0; }
+
+@media (--breakpoint-not-small) {
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+ .bt-0-ns { border-top-width: 0; }
+ .br-0-ns { border-right-width: 0; }
+ .bb-0-ns { border-bottom-width: 0; }
+ .bl-0-ns { border-left-width: 0; }
+}
+
+@media (--breakpoint-medium) {
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
+ .bt-0-m { border-top-width: 0; }
+ .br-0-m { border-right-width: 0; }
+ .bb-0-m { border-bottom-width: 0; }
+ .bl-0-m { border-left-width: 0; }
+}
+
+@media (--breakpoint-large) {
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
+ .bt-0-l { border-top-width: 0; }
+ .br-0-l { border-right-width: 0; }
+ .bb-0-l { border-bottom-width: 0; }
+ .bl-0-l { border-left-width: 0; }
+}
diff --git a/ghost/admin/app/styles/spirit/_borders.css b/ghost/admin/app/styles/spirit/_borders.css
new file mode 100644
index 0000000000..ddb6d59ad4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_borders.css
@@ -0,0 +1,60 @@
+/*
+
+ BORDERS
+
+ Base:
+ b = border
+
+ Modifiers:
+ a = all
+ t = top
+ r = right
+ b = bottom
+ l = left
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+ .ba { border-style: solid; border-width: 1px; }
+ .bt { border-top-style: solid; border-top-width: 1px; }
+ .br { border-right-style: solid; border-right-width: 1px; }
+ .bb { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl { border-left-style: solid; border-left-width: 1px; }
+ .bn { border-style: none; border-width: 0; }
+ .oln { outline: none; }
+
+
+@media (--breakpoint-not-small) {
+ .ba-ns { border-style: solid; border-width: 1px; }
+ .bt-ns { border-top-style: solid; border-top-width: 1px; }
+ .br-ns { border-right-style: solid; border-right-width: 1px; }
+ .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-ns { border-left-style: solid; border-left-width: 1px; }
+ .bn-ns { border-style: none; border-width: 0; }
+ .oln-ns { outline: none; }
+}
+
+@media (--breakpoint-medium) {
+ .ba-m { border-style: solid; border-width: 1px; }
+ .bt-m { border-top-style: solid; border-top-width: 1px; }
+ .br-m { border-right-style: solid; border-right-width: 1px; }
+ .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-m { border-left-style: solid; border-left-width: 1px; }
+ .bn-m { border-style: none; border-width: 0; }
+ .oln-m { outline: none; }
+}
+
+@media (--breakpoint-large) {
+ .ba-l { border-style: solid; border-width: 1px; }
+ .bt-l { border-top-style: solid; border-top-width: 1px; }
+ .br-l { border-right-style: solid; border-right-width: 1px; }
+ .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-l { border-left-style: solid; border-left-width: 1px; }
+ .bn-l { border-style: none; border-width: 0; }
+ .oln-l { outline: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_box-shadow.css b/ghost/admin/app/styles/spirit/_box-shadow.css
new file mode 100644
index 0000000000..8bc45942c5
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_box-shadow.css
@@ -0,0 +1,15 @@
+/*
+
+ BOX-SHADOW
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+.shadow-1 { box-shadow: 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.03); }
+.shadow-1-strong { box-shadow: 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.03); }
+.shadow-2 { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08); }
+.shadow-3 { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.12); }
diff --git a/ghost/admin/app/styles/spirit/_box-sizing.css b/ghost/admin/app/styles/spirit/_box-sizing.css
new file mode 100644
index 0000000000..8a965e0902
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_box-sizing.css
@@ -0,0 +1,48 @@
+/*
+
+ BOX SIZING
+
+*/
+
+html,
+body,
+div,
+article,
+aside,
+section,
+main,
+nav,
+footer,
+header,
+form,
+fieldset,
+legend,
+pre,
+code,
+a,
+h1,h2,h3,h4,h5,h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figcaption,
+figure,
+textarea,
+table,
+td,
+th,
+tr,
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+.border-box {
+ box-sizing: border-box;
+}
+
diff --git a/ghost/admin/app/styles/spirit/_clears.css b/ghost/admin/app/styles/spirit/_clears.css
new file mode 100644
index 0000000000..4366b91363
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_clears.css
@@ -0,0 +1,39 @@
+/*
+
+ CLEARFIX
+
+*/
+
+/* Nicolas Gallaghers Clearfix solution
+ Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.cf:before,
+.cf:after { content: " "; display: table; }
+.cf:after { clear: both; }
+.cf { *zoom: 1; }
+
+.cl { clear: left; }
+.cr { clear: right; }
+.cb { clear: both; }
+.cn { clear: none; }
+
+@media (--breakpoint-not-small) {
+ .cl-ns { clear: left; }
+ .cr-ns { clear: right; }
+ .cb-ns { clear: both; }
+ .cn-ns { clear: none; }
+}
+
+@media (--breakpoint-medium) {
+ .cl-m { clear: left; }
+ .cr-m { clear: right; }
+ .cb-m { clear: both; }
+ .cn-m { clear: none; }
+}
+
+@media (--breakpoint-large) {
+ .cl-l { clear: left; }
+ .cr-l { clear: right; }
+ .cb-l { clear: both; }
+ .cn-l { clear: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_code.css b/ghost/admin/app/styles/spirit/_code.css
new file mode 100644
index 0000000000..ac691f30d4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_code.css
@@ -0,0 +1,11 @@
+/*
+
+ CODE
+
+*/
+
+.pre {
+ overflow-x: auto;
+ overflow-y: hidden;
+ overflow: scroll;
+}
diff --git a/ghost/admin/app/styles/spirit/_colors-dark.css b/ghost/admin/app/styles/spirit/_colors-dark.css
new file mode 100644
index 0000000000..f5dc84936a
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_colors-dark.css
@@ -0,0 +1,123 @@
+/*
+
+ Ghost color variables
+ Modifications use PostCSS color mod function: https://github.com/postcss/postcss-color-mod-function
+
+*/
+
+:root {
+ /* Base colors */
+ --blue: #3eb0ef;
+ --green: #a4d037;
+ --purple: #ad26b4;
+ --yellow: #fecd35;
+ --red: #f05230;
+ --pink: #fa3a57;
+ --white: #263238;
+ --extra-darkgrey: #212A2E;
+
+ --black-10: rgba(255, 255, 255, 0.1);
+ --black-20: rgba(255, 255, 255, 0.2);
+ --black-30: rgba(255, 255, 255, 0.3);
+ --black-40: rgba(255, 255, 255, 0.4);
+ --black-50: rgba(255, 255, 255, 0.5);
+ --black-60: rgba(255, 255, 255, 0.6);
+ --black-70: rgba(255, 255, 255, 0.7);
+ --black-80: rgba(255, 255, 255, 0.8);
+ --black-90: rgba(255, 255, 255, 0.9);
+
+ --white-10: rgba(38, 50, 56, 0.1);
+ --white-20: rgba(38, 50, 56, 0.2);
+ --white-30: rgba(38, 50, 56, 0.3);
+ --white-40: rgba(38, 50, 56, 0.4);
+ --white-50: rgba(38, 50, 56, 0.5);
+ --white-60: rgba(38, 50, 56, 0.6);
+ --white-70: rgba(38, 50, 56, 0.7);
+ --white-80: rgba(38, 50, 56, 0.8);
+ --white-90: rgba(38, 50, 56, 0.9);
+
+ --whitegrey: #343f44;
+ --lightgrey: #54666D;
+ --midlightgrey: #738a94;
+ --midgrey: #9BAEB8;
+ --middarkgrey: #c5d2d9;
+ --darkgrey: #e5eff5;
+
+ --transparent:transparent;
+
+ /* Tone variations */
+ --blue-d3: color-mod(var(--blue) l(+15%));
+ --blue-d2: color-mod(var(--blue) l(+10%));
+ --blue-d1: color-mod(var(--blue) l(+5%));
+ --blue-l1: color-mod(var(--blue) l(-5%));
+ --blue-l2: color-mod(var(--blue) l(-10%));
+ --blue-l3: color-mod(var(--blue) l(-15%));
+
+ --green-d3: color-mod(var(--green) l(+15%));
+ --green-d2: color-mod(var(--green) l(+10%));
+ --green-d1: color-mod(var(--green) l(+5%));
+ --green-l1: color-mod(var(--green) l(-5%));
+ --green-l2: color-mod(var(--green) l(-10%));
+ --green-l3: color-mod(var(--green) l(-15%));
+
+ --purple-d3: color-mod(var(--purple) l(+15%));
+ --purple-d2: color-mod(var(--purple) l(+10%));
+ --purple-d1: color-mod(var(--purple) l(+5%));
+ --purple-l1: color-mod(var(--purple) l(-5%));
+ --purple-l2: color-mod(var(--purple) l(-10%));
+ --purple-l3: color-mod(var(--purple) l(-15%));
+
+ --yellow-d3: color-mod(var(--yellow) l(+15%));
+ --yellow-d2: color-mod(var(--yellow) l(+10%));
+ --yellow-d1: color-mod(var(--yellow) l(+5%));
+ --yellow-l1: color-mod(var(--yellow) l(-5%));
+ --yellow-l2: color-mod(var(--yellow) l(-10%));
+ --yellow-l3: color-mod(var(--yellow) l(-13%));
+
+ --red-d3: color-mod(var(--red) l(+15%));
+ --red-d2: color-mod(var(--red) l(+10%));
+ --red-d1: color-mod(var(--red) l(+5%));
+ --red-l1: color-mod(var(--red) l(-5%));
+ --red-l2: color-mod(var(--red) l(-10%));
+ --red-l3: color-mod(var(--red) l(-15%));
+
+ --pink-d3: color-mod(var(--pink) l(+15%));
+ --pink-d2: color-mod(var(--pink) l(+10%));
+ --pink-d1: color-mod(var(--pink) l(+5%));
+ --pink-l1: color-mod(var(--pink) l(-5%));
+ --pink-l2: color-mod(var(--pink) l(-10%));
+ --pink-l3: color-mod(var(--pink) l(-15%));
+
+ --darkgrey-d2: color-mod(var(--darkgrey) h(-1) l(+7%));
+ --darkgrey-d1: color-mod(var(--darkgrey) h(+1) l(+3%));
+ --darkgrey-l1: color-mod(var(--darkgrey) l(-3%));
+ --darkgrey-l2: color-mod(var(--darkgrey) l(-6%));
+
+ --middarkgrey-d2: color-mod(var(--middarkgrey) h(+1) l(+7%));
+ --middarkgrey-d1: color-mod(var(--middarkgrey) h(+2) l(+4%));
+ --middarkgrey-l1: color-mod(var(--middarkgrey) h(+2) l(-3%));
+ --middarkgrey-l2: color-mod(var(--middarkgrey) h(+1) l(-7%));
+
+ --midgrey-d2: color-mod(var(--midgrey) h(+2) s(+2%) l(+7%));
+ --midgrey-d1: color-mod(var(--midgrey) h(+1) s(+1%) l(+4%));
+ --midgrey-l1: color-mod(var(--midgrey) h(+1) l(-3%));
+ --midgrey-l2: color-mod(var(--midgrey) l(-7%));
+
+ --midlightgrey-d2: color-mod(var(--midlightgrey) h(-3) s(+2%) l(+8%));
+ --midlightgrey-d1: color-mod(var(--midlightgrey) h(-1) s(+1%) l(+4%));
+ --midlightgrey-l1: color-mod(var(--midlightgrey) h(+1) s(-1%) l(-3%));
+ --midlightgrey-l2: color-mod(var(--midlightgrey) h(-3) s(-2%) l(-7%));
+
+ --lightgrey-d2: color-mod(var(--lightgrey) h(+1) s(+14%) l(+8%));
+ --lightgrey-d1: color-mod(var(--lightgrey) h(+1) s(+12%) l(+6%));
+ --lightgrey-l1: color-mod(var(--lightgrey) s(-1%) l(-4%));
+ --lightgrey-l2: color-mod(var(--lightgrey) h(-2) s(-2%) l(-7%));
+
+ --whitegrey-d2: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
+ --whitegrey-d1: color-mod(var(--whitegrey) h(+1) s(-2%) l(+3%));
+ --whitegrey-l1: color-mod(var(--whitegrey) h(-1) s(-7%) l(-3%));
+ --whitegrey-l2: color-mod(var(--whitegrey) h(-1) s(-11%) l(-6%));
+
+ /* Special colors */
+ --errorbg-lightred: rgba(240, 82, 48, 0.05);
+}
diff --git a/ghost/admin/app/styles/spirit/_colors.css b/ghost/admin/app/styles/spirit/_colors.css
new file mode 100644
index 0000000000..db43d5a8e5
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_colors.css
@@ -0,0 +1,122 @@
+/*
+
+ Ghost color variables
+ Modifications use PostCSS color mod function: https://github.com/postcss/postcss-color-mod-function
+
+*/
+
+:root {
+ /* Base colors */
+ --blue: #3eb0ef;
+ --green: #a4d037;
+ --purple: #ad26b4;
+ --yellow: #fecd35;
+ --red: #f05230;
+ --pink: #fa3a57;
+ --white: #ffffff;
+
+ --white-10: rgba(255, 255, 255, 0.1);
+ --white-20: rgba(255, 255, 255, 0.2);
+ --white-30: rgba(255, 255, 255, 0.3);
+ --white-40: rgba(255, 255, 255, 0.4);
+ --white-50: rgba(255, 255, 255, 0.5);
+ --white-60: rgba(255, 255, 255, 0.6);
+ --white-70: rgba(255, 255, 255, 0.7);
+ --white-80: rgba(255, 255, 255, 0.8);
+ --white-90: rgba(255, 255, 255, 0.9);
+
+ --black-10: rgba(40, 48, 52, 0.1);
+ --black-20: rgba(40, 48, 52, 0.2);
+ --black-30: rgba(40, 48, 52, 0.3);
+ --black-40: rgba(40, 48, 52, 0.4);
+ --black-50: rgba(40, 48, 52, 0.5);
+ --black-60: rgba(40, 48, 52, 0.6);
+ --black-70: rgba(40, 48, 52, 0.7);
+ --black-80: rgba(40, 48, 52, 0.8);
+ --black-90: rgba(40, 48, 52, 0.9);
+
+ --darkgrey: #343f44;
+ --middarkgrey: #54666D;
+ --midgrey: #738a94;
+ --midlightgrey: #9BAEB8;
+ --lightgrey: #c5d2d9;
+ --whitegrey: #e5eff5;
+
+ --transparent:transparent;
+
+ /* Tone variations */
+ --blue-l3: color-mod(var(--blue) l(+15%));
+ --blue-l2: color-mod(var(--blue) l(+10%));
+ --blue-l1: color-mod(var(--blue) l(+5%));
+ --blue-d1: color-mod(var(--blue) l(-5%));
+ --blue-d2: color-mod(var(--blue) l(-10%));
+ --blue-d3: color-mod(var(--blue) l(-15%));
+
+ --green-l3: color-mod(var(--green) l(+15%));
+ --green-l2: color-mod(var(--green) l(+10%));
+ --green-l1: color-mod(var(--green) l(+5%));
+ --green-d1: color-mod(var(--green) l(-5%));
+ --green-d2: color-mod(var(--green) l(-10%));
+ --green-d3: color-mod(var(--green) l(-15%));
+
+ --purple-l3: color-mod(var(--purple) l(+15%));
+ --purple-l2: color-mod(var(--purple) l(+10%));
+ --purple-l1: color-mod(var(--purple) l(+5%));
+ --purple-d1: color-mod(var(--purple) l(-5%));
+ --purple-d2: color-mod(var(--purple) l(-10%));
+ --purple-d3: color-mod(var(--purple) l(-15%));
+
+ --yellow-l3: color-mod(var(--yellow) l(+15%));
+ --yellow-l2: color-mod(var(--yellow) l(+10%));
+ --yellow-l1: color-mod(var(--yellow) l(+5%));
+ --yellow-d1: color-mod(var(--yellow) l(-5%));
+ --yellow-d2: color-mod(var(--yellow) l(-10%));
+ --yellow-d3: color-mod(var(--yellow) l(-13%));
+
+ --red-l3: color-mod(var(--red) l(+15%));
+ --red-l2: color-mod(var(--red) l(+10%));
+ --red-l1: color-mod(var(--red) l(+5%));
+ --red-d1: color-mod(var(--red) l(-5%));
+ --red-d2: color-mod(var(--red) l(-10%));
+ --red-d3: color-mod(var(--red) l(-15%));
+
+ --pink-l3: color-mod(var(--pink) l(+15%));
+ --pink-l2: color-mod(var(--pink) l(+10%));
+ --pink-l1: color-mod(var(--pink) l(+5%));
+ --pink-d1: color-mod(var(--pink) l(-5%));
+ --pink-d2: color-mod(var(--pink) l(-10%));
+ --pink-d3: color-mod(var(--pink) l(-15%));
+
+ --darkgrey-l2: color-mod(var(--darkgrey) h(-1) l(+7%));
+ --darkgrey-l1: color-mod(var(--darkgrey) h(+1) l(+3%));
+ --darkgrey-d1: color-mod(var(--darkgrey) l(-3%));
+ --darkgrey-d2: color-mod(var(--darkgrey) l(-6%));
+
+ --middarkgrey-l2: color-mod(var(--middarkgrey) h(+1) l(+7%));
+ --middarkgrey-l1: color-mod(var(--middarkgrey) h(+2) l(+4%));
+ --middarkgrey-d1: color-mod(var(--middarkgrey) h(+2) l(-3%));
+ --middarkgrey-d2: color-mod(var(--middarkgrey) h(+1) l(-7%));
+
+ --midgrey-l2: color-mod(var(--midgrey) h(+2) s(+2%) l(+7%));
+ --midgrey-l1: color-mod(var(--midgrey) h(+1) s(+1%) l(+4%));
+ --midgrey-d1: color-mod(var(--midgrey) h(+1) l(-3%));
+ --midgrey-d2: color-mod(var(--midgrey) l(-7%));
+
+ --midlightgrey-l2: color-mod(var(--midlightgrey) h(-3) s(+2%) l(+8%));
+ --midlightgrey-l1: color-mod(var(--midlightgrey) h(-1) s(+1%) l(+4%));
+ --midlightgrey-d1: color-mod(var(--midlightgrey) h(+1) s(-1%) l(-3%));
+ --midlightgrey-d2: color-mod(var(--midlightgrey) h(-3) s(-2%) l(-7%));
+
+ --lightgrey-l2: color-mod(var(--lightgrey) h(+1) s(+14%) l(+8%));
+ --lightgrey-l1: color-mod(var(--lightgrey) h(+1) s(+12%) l(+6%));
+ --lightgrey-d1: color-mod(var(--lightgrey) s(-1%) l(-4%));
+ --lightgrey-d2: color-mod(var(--lightgrey) h(-2) s(-2%) l(-7%));
+
+ --whitegrey-l2: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
+ --whitegrey-l1: color-mod(var(--whitegrey) h(+1) s(-2%) l(+3%));
+ --whitegrey-d1: color-mod(var(--whitegrey) h(-1) s(-7%) l(-3%));
+ --whitegrey-d2: color-mod(var(--whitegrey) h(-1) s(-11%) l(-6%));
+
+ /* Special colors */
+ --errorbg-lightred: rgba(240, 82, 48, 0.05);
+}
diff --git a/ghost/admin/app/styles/spirit/_coordinates.css b/ghost/admin/app/styles/spirit/_coordinates.css
new file mode 100644
index 0000000000..4f2756e758
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_coordinates.css
@@ -0,0 +1,468 @@
+/*
+
+ Base:
+ top
+ right
+ bottom
+ left
+
+ Value:
+ -(n) = (n * grid)
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.top-0 { top: 0; }
+.top-1 { top: calc(var(--grid-size) * 1); }
+.top-2 { top: calc(var(--grid-size) * 2); }
+.top-3 { top: calc(var(--grid-size) * 3); }
+.top-4 { top: calc(var(--grid-size) * 4); }
+.top-5 { top: calc(var(--grid-size) * 5); }
+.top-6 { top: calc(var(--grid-size) * 6); }
+.top-7 { top: calc(var(--grid-size) * 7); }
+.top-8 { top: calc(var(--grid-size) * 8); }
+.top-9 { top: calc(var(--grid-size) * 9); }
+.top-10 { top: calc(var(--grid-size) * 10); }
+.top-11 { top: calc(var(--grid-size) * 11); }
+.top-12 { top: calc(var(--grid-size) * 12); }
+.top-13 { top: calc(var(--grid-size) * 13); }
+.top-14 { top: calc(var(--grid-size) * 14); }
+.top-15 { top: calc(var(--grid-size) * 15); }
+.top-16 { top: calc(var(--grid-size) * 16); }
+.top-17 { top: calc(var(--grid-size) * 17); }
+.top-18 { top: calc(var(--grid-size) * 18); }
+.top-19 { top: calc(var(--grid-size) * 19); }
+.top-20 { top: calc(var(--grid-size) * 20); }
+.top-25 { top: calc(var(--grid-size) * 25); }
+.top-30 { top: calc(var(--grid-size) * 30); }
+.top-40 { top: calc(var(--grid-size) * 40); }
+.top-50 { top: calc(var(--grid-size) * 50); }
+
+.right-0 { right: 0; }
+.right-1 { right: calc(var(--grid-size) * 1); }
+.right-2 { right: calc(var(--grid-size) * 2); }
+.right-3 { right: calc(var(--grid-size) * 3); }
+.right-4 { right: calc(var(--grid-size) * 4); }
+.right-5 { right: calc(var(--grid-size) * 5); }
+.right-6 { right: calc(var(--grid-size) * 6); }
+.right-7 { right: calc(var(--grid-size) * 7); }
+.right-8 { right: calc(var(--grid-size) * 8); }
+.right-9 { right: calc(var(--grid-size) * 9); }
+.right-10 { right: calc(var(--grid-size) * 10); }
+.right-11 { right: calc(var(--grid-size) * 11); }
+.right-12 { right: calc(var(--grid-size) * 12); }
+.right-13 { right: calc(var(--grid-size) * 13); }
+.right-14 { right: calc(var(--grid-size) * 14); }
+.right-15 { right: calc(var(--grid-size) * 15); }
+.right-16 { right: calc(var(--grid-size) * 16); }
+.right-17 { right: calc(var(--grid-size) * 17); }
+.right-18 { right: calc(var(--grid-size) * 18); }
+.right-19 { right: calc(var(--grid-size) * 19); }
+.right-20 { right: calc(var(--grid-size) * 20); }
+.right-25 { right: calc(var(--grid-size) * 25); }
+.right-30 { right: calc(var(--grid-size) * 30); }
+.right-40 { right: calc(var(--grid-size) * 40); }
+.right-50 { right: calc(var(--grid-size) * 50); }
+
+.bottom-0 { bottom: 0; }
+.bottom-1 { bottom: calc(var(--grid-size) * 1); }
+.bottom-2 { bottom: calc(var(--grid-size) * 2); }
+.bottom-3 { bottom: calc(var(--grid-size) * 3); }
+.bottom-4 { bottom: calc(var(--grid-size) * 4); }
+.bottom-5 { bottom: calc(var(--grid-size) * 5); }
+.bottom-6 { bottom: calc(var(--grid-size) * 6); }
+.bottom-7 { bottom: calc(var(--grid-size) * 7); }
+.bottom-8 { bottom: calc(var(--grid-size) * 8); }
+.bottom-9 { bottom: calc(var(--grid-size) * 9); }
+.bottom-10 { bottom: calc(var(--grid-size) * 10); }
+.bottom-11 { bottom: calc(var(--grid-size) * 11); }
+.bottom-12 { bottom: calc(var(--grid-size) * 12); }
+.bottom-13 { bottom: calc(var(--grid-size) * 13); }
+.bottom-14 { bottom: calc(var(--grid-size) * 14); }
+.bottom-15 { bottom: calc(var(--grid-size) * 15); }
+.bottom-16 { bottom: calc(var(--grid-size) * 16); }
+.bottom-17 { bottom: calc(var(--grid-size) * 17); }
+.bottom-18 { bottom: calc(var(--grid-size) * 18); }
+.bottom-19 { bottom: calc(var(--grid-size) * 19); }
+.bottom-20 { bottom: calc(var(--grid-size) * 20); }
+.bottom-25 { bottom: calc(var(--grid-size) * 25); }
+.bottom-30 { bottom: calc(var(--grid-size) * 30); }
+.bottom-40 { bottom: calc(var(--grid-size) * 40); }
+.bottom-50 { bottom: calc(var(--grid-size) * 50); }
+
+.left-0 { left: 0; }
+.left-1 { left: calc(var(--grid-size) * 1); }
+.left-2 { left: calc(var(--grid-size) * 2); }
+.left-3 { left: calc(var(--grid-size) * 3); }
+.left-4 { left: calc(var(--grid-size) * 4); }
+.left-5 { left: calc(var(--grid-size) * 5); }
+.left-6 { left: calc(var(--grid-size) * 6); }
+.left-7 { left: calc(var(--grid-size) * 7); }
+.left-8 { left: calc(var(--grid-size) * 8); }
+.left-9 { left: calc(var(--grid-size) * 9); }
+.left-10 { left: calc(var(--grid-size) * 10); }
+.left-11 { left: calc(var(--grid-size) * 11); }
+.left-12 { left: calc(var(--grid-size) * 12); }
+.left-13 { left: calc(var(--grid-size) * 13); }
+.left-14 { left: calc(var(--grid-size) * 14); }
+.left-15 { left: calc(var(--grid-size) * 15); }
+.left-16 { left: calc(var(--grid-size) * 16); }
+.left-17 { left: calc(var(--grid-size) * 17); }
+.left-18 { left: calc(var(--grid-size) * 18); }
+.left-19 { left: calc(var(--grid-size) * 19); }
+.left-20 { left: calc(var(--grid-size) * 20); }
+.left-25 { left: calc(var(--grid-size) * 25); }
+.left-30 { left: calc(var(--grid-size) * 30); }
+.left-40 { left: calc(var(--grid-size) * 40); }
+.left-50 { left: calc(var(--grid-size) * 50); }
+
+.absolute--fill {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+
+@media (--breakpoint-not-small) {
+ .top-0-ns { top: 0; }
+ .top-1-ns { top: calc(var(--grid-size) * 1); }
+ .top-2-ns { top: calc(var(--grid-size) * 2); }
+ .top-3-ns { top: calc(var(--grid-size) * 3); }
+ .top-4-ns { top: calc(var(--grid-size) * 4); }
+ .top-5-ns { top: calc(var(--grid-size) * 5); }
+ .top-6-ns { top: calc(var(--grid-size) * 6); }
+ .top-7-ns { top: calc(var(--grid-size) * 7); }
+ .top-8-ns { top: calc(var(--grid-size) * 8); }
+ .top-9-ns { top: calc(var(--grid-size) * 9); }
+ .top-10-ns { top: calc(var(--grid-size) * 10); }
+ .top-11-ns { top: calc(var(--grid-size) * 11); }
+ .top-12-ns { top: calc(var(--grid-size) * 12); }
+ .top-13-ns { top: calc(var(--grid-size) * 13); }
+ .top-14-ns { top: calc(var(--grid-size) * 14); }
+ .top-15-ns { top: calc(var(--grid-size) * 15); }
+ .top-16-ns { top: calc(var(--grid-size) * 16); }
+ .top-17-ns { top: calc(var(--grid-size) * 17); }
+ .top-18-ns { top: calc(var(--grid-size) * 18); }
+ .top-19-ns { top: calc(var(--grid-size) * 19); }
+ .top-20-ns { top: calc(var(--grid-size) * 20); }
+ .top-25-ns { top: calc(var(--grid-size) * 25); }
+ .top-30-ns { top: calc(var(--grid-size) * 30); }
+ .top-40-ns { top: calc(var(--grid-size) * 40); }
+ .top-50-ns { top: calc(var(--grid-size) * 50); }
+
+ .right-0-ns { right: 0; }
+ .right-1-ns { right: calc(var(--grid-size) * 1); }
+ .right-2-ns { right: calc(var(--grid-size) * 2); }
+ .right-3-ns { right: calc(var(--grid-size) * 3); }
+ .right-4-ns { right: calc(var(--grid-size) * 4); }
+ .right-5-ns { right: calc(var(--grid-size) * 5); }
+ .right-6-ns { right: calc(var(--grid-size) * 6); }
+ .right-7-ns { right: calc(var(--grid-size) * 7); }
+ .right-8-ns { right: calc(var(--grid-size) * 8); }
+ .right-9-ns { right: calc(var(--grid-size) * 9); }
+ .right-10-ns { right: calc(var(--grid-size) * 10); }
+ .right-11-ns { right: calc(var(--grid-size) * 11); }
+ .right-12-ns { right: calc(var(--grid-size) * 12); }
+ .right-13-ns { right: calc(var(--grid-size) * 13); }
+ .right-14-ns { right: calc(var(--grid-size) * 14); }
+ .right-15-ns { right: calc(var(--grid-size) * 15); }
+ .right-16-ns { right: calc(var(--grid-size) * 16); }
+ .right-17-ns { right: calc(var(--grid-size) * 17); }
+ .right-18-ns { right: calc(var(--grid-size) * 18); }
+ .right-19-ns { right: calc(var(--grid-size) * 19); }
+ .right-20-ns { right: calc(var(--grid-size) * 20); }
+ .right-25-ns { right: calc(var(--grid-size) * 25); }
+ .right-30-ns { right: calc(var(--grid-size) * 30); }
+ .right-40-ns { right: calc(var(--grid-size) * 40); }
+ .right-50-ns { right: calc(var(--grid-size) * 50); }
+
+ .bottom-0-ns { bottom: 0; }
+ .bottom-1-ns { bottom: calc(var(--grid-size) * 1); }
+ .bottom-2-ns { bottom: calc(var(--grid-size) * 2); }
+ .bottom-3-ns { bottom: calc(var(--grid-size) * 3); }
+ .bottom-4-ns { bottom: calc(var(--grid-size) * 4); }
+ .bottom-5-ns { bottom: calc(var(--grid-size) * 5); }
+ .bottom-6-ns { bottom: calc(var(--grid-size) * 6); }
+ .bottom-7-ns { bottom: calc(var(--grid-size) * 7); }
+ .bottom-8-ns { bottom: calc(var(--grid-size) * 8); }
+ .bottom-9-ns { bottom: calc(var(--grid-size) * 9); }
+ .bottom-10-ns { bottom: calc(var(--grid-size) * 10); }
+ .bottom-11-ns { bottom: calc(var(--grid-size) * 11); }
+ .bottom-12-ns { bottom: calc(var(--grid-size) * 12); }
+ .bottom-13-ns { bottom: calc(var(--grid-size) * 13); }
+ .bottom-14-ns { bottom: calc(var(--grid-size) * 14); }
+ .bottom-15-ns { bottom: calc(var(--grid-size) * 15); }
+ .bottom-16-ns { bottom: calc(var(--grid-size) * 16); }
+ .bottom-17-ns { bottom: calc(var(--grid-size) * 17); }
+ .bottom-18-ns { bottom: calc(var(--grid-size) * 18); }
+ .bottom-19-ns { bottom: calc(var(--grid-size) * 19); }
+ .bottom-20-ns { bottom: calc(var(--grid-size) * 20); }
+ .bottom-25-ns { bottom: calc(var(--grid-size) * 25); }
+ .bottom-30-ns { bottom: calc(var(--grid-size) * 30); }
+ .bottom-40-ns { bottom: calc(var(--grid-size) * 40); }
+ .bottom-50-ns { bottom: calc(var(--grid-size) * 50); }
+
+ .left-0-ns { left: 0; }
+ .left-1-ns { left: calc(var(--grid-size) * 1); }
+ .left-2-ns { left: calc(var(--grid-size) * 2); }
+ .left-3-ns { left: calc(var(--grid-size) * 3); }
+ .left-4-ns { left: calc(var(--grid-size) * 4); }
+ .left-5-ns { left: calc(var(--grid-size) * 5); }
+ .left-6-ns { left: calc(var(--grid-size) * 6); }
+ .left-7-ns { left: calc(var(--grid-size) * 7); }
+ .left-8-ns { left: calc(var(--grid-size) * 8); }
+ .left-9-ns { left: calc(var(--grid-size) * 9); }
+ .left-10-ns { left: calc(var(--grid-size) * 10); }
+ .left-11-ns { left: calc(var(--grid-size) * 11); }
+ .left-12-ns { left: calc(var(--grid-size) * 12); }
+ .left-13-ns { left: calc(var(--grid-size) * 13); }
+ .left-14-ns { left: calc(var(--grid-size) * 14); }
+ .left-15-ns { left: calc(var(--grid-size) * 15); }
+ .left-16-ns { left: calc(var(--grid-size) * 16); }
+ .left-17-ns { left: calc(var(--grid-size) * 17); }
+ .left-18-ns { left: calc(var(--grid-size) * 18); }
+ .left-19-ns { left: calc(var(--grid-size) * 19); }
+ .left-20-ns { left: calc(var(--grid-size) * 20); }
+ .left-25-ns { left: calc(var(--grid-size) * 25); }
+ .left-30-ns { left: calc(var(--grid-size) * 30); }
+ .left-40-ns { left: calc(var(--grid-size) * 40); }
+ .left-50-ns { left: calc(var(--grid-size) * 50); }
+
+ .absolute--fill-ns {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .top-0-m { top: 0; }
+ .top-1-m { top: calc(var(--grid-size) * 1); }
+ .top-2-m { top: calc(var(--grid-size) * 2); }
+ .top-3-m { top: calc(var(--grid-size) * 3); }
+ .top-4-m { top: calc(var(--grid-size) * 4); }
+ .top-5-m { top: calc(var(--grid-size) * 5); }
+ .top-6-m { top: calc(var(--grid-size) * 6); }
+ .top-7-m { top: calc(var(--grid-size) * 7); }
+ .top-8-m { top: calc(var(--grid-size) * 8); }
+ .top-9-m { top: calc(var(--grid-size) * 9); }
+ .top-10-m { top: calc(var(--grid-size) * 10); }
+ .top-11-m { top: calc(var(--grid-size) * 11); }
+ .top-12-m { top: calc(var(--grid-size) * 12); }
+ .top-13-m { top: calc(var(--grid-size) * 13); }
+ .top-14-m { top: calc(var(--grid-size) * 14); }
+ .top-15-m { top: calc(var(--grid-size) * 15); }
+ .top-16-m { top: calc(var(--grid-size) * 16); }
+ .top-17-m { top: calc(var(--grid-size) * 17); }
+ .top-18-m { top: calc(var(--grid-size) * 18); }
+ .top-19-m { top: calc(var(--grid-size) * 19); }
+ .top-20-m { top: calc(var(--grid-size) * 20); }
+ .top-25-m { top: calc(var(--grid-size) * 25); }
+ .top-30-m { top: calc(var(--grid-size) * 30); }
+ .top-40-m { top: calc(var(--grid-size) * 40); }
+ .top-50-m { top: calc(var(--grid-size) * 50); }
+
+ .right-0-m { right: 0; }
+ .right-1-m { right: calc(var(--grid-size) * 1); }
+ .right-2-m { right: calc(var(--grid-size) * 2); }
+ .right-3-m { right: calc(var(--grid-size) * 3); }
+ .right-4-m { right: calc(var(--grid-size) * 4); }
+ .right-5-m { right: calc(var(--grid-size) * 5); }
+ .right-6-m { right: calc(var(--grid-size) * 6); }
+ .right-7-m { right: calc(var(--grid-size) * 7); }
+ .right-8-m { right: calc(var(--grid-size) * 8); }
+ .right-9-m { right: calc(var(--grid-size) * 9); }
+ .right-10-m { right: calc(var(--grid-size) * 10); }
+ .right-11-m { right: calc(var(--grid-size) * 11); }
+ .right-12-m { right: calc(var(--grid-size) * 12); }
+ .right-13-m { right: calc(var(--grid-size) * 13); }
+ .right-14-m { right: calc(var(--grid-size) * 14); }
+ .right-15-m { right: calc(var(--grid-size) * 15); }
+ .right-16-m { right: calc(var(--grid-size) * 16); }
+ .right-17-m { right: calc(var(--grid-size) * 17); }
+ .right-18-m { right: calc(var(--grid-size) * 18); }
+ .right-19-m { right: calc(var(--grid-size) * 19); }
+ .right-20-m { right: calc(var(--grid-size) * 20); }
+ .right-25-m { right: calc(var(--grid-size) * 25); }
+ .right-30-m { right: calc(var(--grid-size) * 30); }
+ .right-40-m { right: calc(var(--grid-size) * 40); }
+ .right-50-m { right: calc(var(--grid-size) * 50); }
+
+ .bottom-0-m { bottom: 0; }
+ .bottom-1-m { bottom: calc(var(--grid-size) * 1); }
+ .bottom-2-m { bottom: calc(var(--grid-size) * 2); }
+ .bottom-3-m { bottom: calc(var(--grid-size) * 3); }
+ .bottom-4-m { bottom: calc(var(--grid-size) * 4); }
+ .bottom-5-m { bottom: calc(var(--grid-size) * 5); }
+ .bottom-6-m { bottom: calc(var(--grid-size) * 6); }
+ .bottom-7-m { bottom: calc(var(--grid-size) * 7); }
+ .bottom-8-m { bottom: calc(var(--grid-size) * 8); }
+ .bottom-9-m { bottom: calc(var(--grid-size) * 9); }
+ .bottom-10-m { bottom: calc(var(--grid-size) * 10); }
+ .bottom-11-m { bottom: calc(var(--grid-size) * 11); }
+ .bottom-12-m { bottom: calc(var(--grid-size) * 12); }
+ .bottom-13-m { bottom: calc(var(--grid-size) * 13); }
+ .bottom-14-m { bottom: calc(var(--grid-size) * 14); }
+ .bottom-15-m { bottom: calc(var(--grid-size) * 15); }
+ .bottom-16-m { bottom: calc(var(--grid-size) * 16); }
+ .bottom-17-m { bottom: calc(var(--grid-size) * 17); }
+ .bottom-18-m { bottom: calc(var(--grid-size) * 18); }
+ .bottom-19-m { bottom: calc(var(--grid-size) * 19); }
+ .bottom-20-m { bottom: calc(var(--grid-size) * 20); }
+ .bottom-25-m { bottom: calc(var(--grid-size) * 25); }
+ .bottom-30-m { bottom: calc(var(--grid-size) * 30); }
+ .bottom-40-m { bottom: calc(var(--grid-size) * 40); }
+ .bottom-50-m { bottom: calc(var(--grid-size) * 50); }
+
+ .left-0-m { left: 0; }
+ .left-1-m { left: calc(var(--grid-size) * 1); }
+ .left-2-m { left: calc(var(--grid-size) * 2); }
+ .left-3-m { left: calc(var(--grid-size) * 3); }
+ .left-4-m { left: calc(var(--grid-size) * 4); }
+ .left-5-m { left: calc(var(--grid-size) * 5); }
+ .left-6-m { left: calc(var(--grid-size) * 6); }
+ .left-7-m { left: calc(var(--grid-size) * 7); }
+ .left-8-m { left: calc(var(--grid-size) * 8); }
+ .left-9-m { left: calc(var(--grid-size) * 9); }
+ .left-10-m { left: calc(var(--grid-size) * 10); }
+ .left-11-m { left: calc(var(--grid-size) * 11); }
+ .left-12-m { left: calc(var(--grid-size) * 12); }
+ .left-13-m { left: calc(var(--grid-size) * 13); }
+ .left-14-m { left: calc(var(--grid-size) * 14); }
+ .left-15-m { left: calc(var(--grid-size) * 15); }
+ .left-16-m { left: calc(var(--grid-size) * 16); }
+ .left-17-m { left: calc(var(--grid-size) * 17); }
+ .left-18-m { left: calc(var(--grid-size) * 18); }
+ .left-19-m { left: calc(var(--grid-size) * 19); }
+ .left-20-m { left: calc(var(--grid-size) * 20); }
+ .left-25-m { left: calc(var(--grid-size) * 25); }
+ .left-30-m { left: calc(var(--grid-size) * 30); }
+ .left-40-m { left: calc(var(--grid-size) * 40); }
+ .left-50-m { left: calc(var(--grid-size) * 50); }
+
+ .absolute--fill-m {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+
+@media (--breakpoint-large) {
+ .top-0-l { top: 0; }
+ .top-1-l { top: calc(var(--grid-size) * 1); }
+ .top-2-l { top: calc(var(--grid-size) * 2); }
+ .top-3-l { top: calc(var(--grid-size) * 3); }
+ .top-4-l { top: calc(var(--grid-size) * 4); }
+ .top-5-l { top: calc(var(--grid-size) * 5); }
+ .top-6-l { top: calc(var(--grid-size) * 6); }
+ .top-7-l { top: calc(var(--grid-size) * 7); }
+ .top-8-l { top: calc(var(--grid-size) * 8); }
+ .top-9-l { top: calc(var(--grid-size) * 9); }
+ .top-10-l { top: calc(var(--grid-size) * 10); }
+ .top-11-l { top: calc(var(--grid-size) * 11); }
+ .top-12-l { top: calc(var(--grid-size) * 12); }
+ .top-13-l { top: calc(var(--grid-size) * 13); }
+ .top-14-l { top: calc(var(--grid-size) * 14); }
+ .top-15-l { top: calc(var(--grid-size) * 15); }
+ .top-16-l { top: calc(var(--grid-size) * 16); }
+ .top-17-l { top: calc(var(--grid-size) * 17); }
+ .top-18-l { top: calc(var(--grid-size) * 18); }
+ .top-19-l { top: calc(var(--grid-size) * 19); }
+ .top-20-l { top: calc(var(--grid-size) * 20); }
+ .top-25-l { top: calc(var(--grid-size) * 25); }
+ .top-30-l { top: calc(var(--grid-size) * 30); }
+ .top-40-l { top: calc(var(--grid-size) * 40); }
+ .top-50-l { top: calc(var(--grid-size) * 50); }
+
+ .right-0-l { right: 0; }
+ .right-1-l { right: calc(var(--grid-size) * 1); }
+ .right-2-l { right: calc(var(--grid-size) * 2); }
+ .right-3-l { right: calc(var(--grid-size) * 3); }
+ .right-4-l { right: calc(var(--grid-size) * 4); }
+ .right-5-l { right: calc(var(--grid-size) * 5); }
+ .right-6-l { right: calc(var(--grid-size) * 6); }
+ .right-7-l { right: calc(var(--grid-size) * 7); }
+ .right-8-l { right: calc(var(--grid-size) * 8); }
+ .right-9-l { right: calc(var(--grid-size) * 9); }
+ .right-10-l { right: calc(var(--grid-size) * 10); }
+ .right-11-l { right: calc(var(--grid-size) * 11); }
+ .right-12-l { right: calc(var(--grid-size) * 12); }
+ .right-13-l { right: calc(var(--grid-size) * 13); }
+ .right-14-l { right: calc(var(--grid-size) * 14); }
+ .right-15-l { right: calc(var(--grid-size) * 15); }
+ .right-16-l { right: calc(var(--grid-size) * 16); }
+ .right-17-l { right: calc(var(--grid-size) * 17); }
+ .right-18-l { right: calc(var(--grid-size) * 18); }
+ .right-19-l { right: calc(var(--grid-size) * 19); }
+ .right-20-l { right: calc(var(--grid-size) * 20); }
+ .right-25-l { right: calc(var(--grid-size) * 25); }
+ .right-30-l { right: calc(var(--grid-size) * 30); }
+ .right-40-l { right: calc(var(--grid-size) * 40); }
+ .right-50-l { right: calc(var(--grid-size) * 50); }
+
+ .bottom-0-l { bottom: 0; }
+ .bottom-1-l { bottom: calc(var(--grid-size) * 1); }
+ .bottom-2-l { bottom: calc(var(--grid-size) * 2); }
+ .bottom-3-l { bottom: calc(var(--grid-size) * 3); }
+ .bottom-4-l { bottom: calc(var(--grid-size) * 4); }
+ .bottom-5-l { bottom: calc(var(--grid-size) * 5); }
+ .bottom-6-l { bottom: calc(var(--grid-size) * 6); }
+ .bottom-7-l { bottom: calc(var(--grid-size) * 7); }
+ .bottom-8-l { bottom: calc(var(--grid-size) * 8); }
+ .bottom-9-l { bottom: calc(var(--grid-size) * 9); }
+ .bottom-10-l { bottom: calc(var(--grid-size) * 10); }
+ .bottom-11-l { bottom: calc(var(--grid-size) * 11); }
+ .bottom-12-l { bottom: calc(var(--grid-size) * 12); }
+ .bottom-13-l { bottom: calc(var(--grid-size) * 13); }
+ .bottom-14-l { bottom: calc(var(--grid-size) * 14); }
+ .bottom-15-l { bottom: calc(var(--grid-size) * 15); }
+ .bottom-16-l { bottom: calc(var(--grid-size) * 16); }
+ .bottom-17-l { bottom: calc(var(--grid-size) * 17); }
+ .bottom-18-l { bottom: calc(var(--grid-size) * 18); }
+ .bottom-19-l { bottom: calc(var(--grid-size) * 19); }
+ .bottom-20-l { bottom: calc(var(--grid-size) * 20); }
+ .bottom-25-l { bottom: calc(var(--grid-size) * 25); }
+ .bottom-30-l { bottom: calc(var(--grid-size) * 30); }
+ .bottom-40-l { bottom: calc(var(--grid-size) * 40); }
+ .bottom-50-l { bottom: calc(var(--grid-size) * 50); }
+
+ .left-0-l { left: 0; }
+ .left-1-l { left: calc(var(--grid-size) * 1); }
+ .left-2-l { left: calc(var(--grid-size) * 2); }
+ .left-3-l { left: calc(var(--grid-size) * 3); }
+ .left-4-l { left: calc(var(--grid-size) * 4); }
+ .left-5-l { left: calc(var(--grid-size) * 5); }
+ .left-6-l { left: calc(var(--grid-size) * 6); }
+ .left-7-l { left: calc(var(--grid-size) * 7); }
+ .left-8-l { left: calc(var(--grid-size) * 8); }
+ .left-9-l { left: calc(var(--grid-size) * 9); }
+ .left-10-l { left: calc(var(--grid-size) * 10); }
+ .left-11-l { left: calc(var(--grid-size) * 11); }
+ .left-12-l { left: calc(var(--grid-size) * 12); }
+ .left-13-l { left: calc(var(--grid-size) * 13); }
+ .left-14-l { left: calc(var(--grid-size) * 14); }
+ .left-15-l { left: calc(var(--grid-size) * 15); }
+ .left-16-l { left: calc(var(--grid-size) * 16); }
+ .left-17-l { left: calc(var(--grid-size) * 17); }
+ .left-18-l { left: calc(var(--grid-size) * 18); }
+ .left-19-l { left: calc(var(--grid-size) * 19); }
+ .left-20-l { left: calc(var(--grid-size) * 20); }
+ .left-25-l { left: calc(var(--grid-size) * 25); }
+ .left-30-l { left: calc(var(--grid-size) * 30); }
+ .left-40-l { left: calc(var(--grid-size) * 40); }
+ .left-50-l { left: calc(var(--grid-size) * 50); }
+
+ .absolute--fill-l {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_custom-styles.css b/ghost/admin/app/styles/spirit/_custom-styles.css
new file mode 100644
index 0000000000..12364d2224
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_custom-styles.css
@@ -0,0 +1,315 @@
+/*
+
+ Namespaces:
+ gh- = client related classes
+
+*/
+
+
+/*
+* Generic
+---------------------------------------------------------- */
+.pointer {
+ cursor: pointer;
+}
+
+
+/* Buttons */
+button, .btn-base {
+ transition: none;
+ text-decoration: none!important;
+ user-select: none;
+ outline: none;
+ padding: 0px;
+}
+
+.btn-base span {
+ padding: 0 14px;
+ height: 33px;
+ line-height: 33px;
+ border-radius: 4px;
+}
+
+/* Blue button */
+.btn-blue {
+ padding: 1px;
+ background: linear-gradient(
+ color-mod(var(--blue) blackness(+10%)),
+ color-mod(var(--blue) lightness(-15%) saturation(-15%))
+ );
+ text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+ box-shadow: 0 1px 0 rgba(0,0,0,.12);
+}
+
+.btn-blue span {
+ background: linear-gradient(
+ color-mod(var(--blue) whiteness(+7%)),
+ color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+ color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+ color-mod(var(--blue) lightness(-4%) saturation(-10%))
+ );
+ box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
+}
+.btn-blue:active,
+.btn-blue:focus {
+ background: color-mod(var(--blue) lightness(-20%) saturation(-15%));
+}
+.btn-blue:active span,
+.btn-blue:focus span {
+ background: color-mod(var(--blue) lightness(-7%) saturation(-10%));
+ box-shadow: none;
+}
+
+/* Green button */
+.btn-green {
+ padding: 1px;
+ background: linear-gradient(
+ color-mod(var(--green) blackness(+7%)),
+ color-mod(var(--green) lightness(-10%) saturation(-10%))
+ );
+ text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+ box-shadow: 0 1px 0 rgba(0,0,0,.12);
+}
+
+.btn-green span {
+ background: linear-gradient(
+ color-mod(var(--green) whiteness(+5%)),
+ color-mod(var(--green) lightness(-4%) saturation(-8%)) 60%,
+ color-mod(var(--green) lightness(-4%) saturation(-8%)) 90%,
+ color-mod(var(--green) lightness(-4%) saturation(-10%))
+ );
+ box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
+}
+
+.btn-green:active,
+.btn-green:focus {
+ background: color-mod(var(--green) lightness(-10%) saturation(-10%));
+}
+.btn-green:active span,
+.btn-green:focus span {
+ background: color-mod(var(--green) lightness(-4%) saturation(-8%));
+ box-shadow: none;
+}
+
+
+/* Red button */
+.btn-red {
+ padding: 1px;
+ background: linear-gradient(
+ color-mod(var(--red) blackness(+10%)),
+ color-mod(var(--red) lightness(-15%) saturation(-15%))
+ );
+ text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+ box-shadow: 0 1px 0 rgba(0,0,0,.12);
+}
+
+.btn-red span {
+ background: linear-gradient(
+ color-mod(var(--red) whiteness(+7%)),
+ color-mod(var(--red) lightness(-7%) saturation(-10%)) 60%,
+ color-mod(var(--red) lightness(-7%) saturation(-10%)) 90%,
+ color-mod(var(--red) lightness(-4%) saturation(-10%))
+ );
+ box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
+}
+
+.btn-red:active,
+.btn-red:focus {
+ background: color-mod(var(--red) lightness(-20%) saturation(-15%));
+}
+.btn-red:active span,
+.btn-red:focus span {
+ background: color-mod(var(--red) lightness(-7%) saturation(-10%));
+ box-shadow: none;
+}
+
+.btn-small span {
+ padding: 0 10px;
+ height: 26px;
+ line-height: 26px;
+}
+
+
+/*
+* Client styles
+---------------------------------------------------------- */
+.gh-nav-link:hover {
+ background: rgba(62,176,239,.15);
+}
+
+.gh-logo svg g {
+ fill: white;
+ opacity: 1.0;
+}
+
+.overlay-dark {
+ background: rgba(50,71,80,.85);
+}
+
+.list-miw {
+ min-height: 92px;
+}
+
+.list-item-hover:hover {
+ background: rgba(62,176,239,.08);
+ /* background: rgba(62, 176, 239, 0.08); */
+}
+
+.dropdown-arrow {
+ width: 10px;
+ height: 10px;
+}
+
+
+/* Tooltip Styles */
+[data-tooltip] {
+ position: relative;
+ z-index: 2;
+ cursor: pointer;
+}
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+ transition: all 200ms ease;
+}
+
+[data-tooltip]:before {
+ position: absolute;
+ bottom: 110%;
+ white-space: nowrap;
+ padding: 6px 8px;
+ border-radius: 4px;
+ background-color: var(--darkgrey);
+ color: var(--white);
+ content: attr(data-tooltip);
+ text-align: center;
+ font-size: 1.3rem;
+ letter-spacing: 0.2px;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+ visibility: visible;
+ opacity: 1;
+}
+
+
+/* Errors */
+.error-background {
+ width: 406px;
+ height: 288px;
+}
+
+.error-code-size {
+ font-size: 7.8rem;
+ line-height: 0.4em;
+}
+
+/* 404 Error animation */
+
+@keyframes travel-1 {
+ 5% {
+ opacity: 1.0;
+ }
+ 25% {
+ opacity: 1.0;
+ }
+ 30% {
+ left: 406px;
+ opacity: 0.0;
+ }
+}
+
+@keyframes bounce-1 {
+ from, to {
+ bottom: 0px;
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ bottom: 20px;
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ transform: rotate(1400deg);
+ }
+}
+
+@keyframes travel-2 {
+ 2% {
+ opacity: 1.0;
+ }
+ 16% {
+ opacity: 1.0;
+ }
+ 20% {
+ left: 0px;
+ opacity: 0.0;
+ }
+}
+
+@keyframes bounce-2 {
+ from, to {
+ bottom: -20px;
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ bottom: 30px;
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ transform: rotate(-1200deg);
+ }
+}
+
+.traveler-1 {
+ position: absolute;
+ width: 24px;
+ height: 240px;
+ opacity: 0.0;
+ top: 10px;
+ left: 0;
+
+ animation-name: travel-1;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-duration: 4.5s;
+ animation-delay: 3.7s;
+}
+
+.bouncer-1 {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+
+ animation-name: bounce-1;
+ animation-iteration-count: infinite;
+ animation-duration: 0.55s;
+}
+
+.traveler-2 {
+ position: absolute;
+ width: 44px;
+ height: 240px;
+ opacity: 0.0;
+ top: 10px;
+ left: 406px;
+
+ animation-name: travel-2;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-duration: 6.5s;
+ animation-delay: 1.5s;
+}
+
+.bouncer-2 {
+ position: absolute;
+ width: 44px;
+ height: 44px;
+
+ animation-name: bounce-2;
+ animation-iteration-count: infinite;
+ animation-duration: 0.7s;
+}
diff --git a/ghost/admin/app/styles/spirit/_debug-children.css b/ghost/admin/app/styles/spirit/_debug-children.css
new file mode 100644
index 0000000000..10204dacc2
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_debug-children.css
@@ -0,0 +1,14 @@
+/*
+
+ DEBUG CHILDREN
+ Docs: http://tachyons.io/docs/debug/
+
+ Just add the debug class to any element to see outlines on its
+ children.
+
+*/
+
+.debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
+
diff --git a/ghost/admin/app/styles/spirit/_debug-grid.css b/ghost/admin/app/styles/spirit/_debug-grid.css
new file mode 100644
index 0000000000..8bb85bc567
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_debug-grid.css
@@ -0,0 +1,26 @@
+/*
+
+ DEBUG GRID
+ http://tachyons.io/docs/debug-grid/
+
+ Can be useful for debugging layout issues
+ or helping to make sure things line up perfectly.
+ Just tack one of these classes onto a parent element.
+
+*/
+
+.debug-grid {
+ background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-16 {
+ background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-8-solid {
+ background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
+}
+
+.debug-grid-16-solid {
+ background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
+}
diff --git a/ghost/admin/app/styles/spirit/_debug.css b/ghost/admin/app/styles/spirit/_debug.css
new file mode 100644
index 0000000000..f09f2b5190
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_debug.css
@@ -0,0 +1,132 @@
+/*
+
+ DEBUG (PESTICIDE)
+ Docs: http://tachyons.io/docs/debug/
+
+ This is a partial you have to manually include in your
+ build file. It places a different colored outline on
+ each element which can help you debug layout issues.
+ There is also a handy chrome extension that can
+ be found at http://pesticide.io
+
+*/
+
+body { outline: 1px solid #2980B9!important; }
+article { outline: 1px solid #3498DB!important; }
+nav { outline: 1px solid #0088C3!important; }
+aside { outline: 1px solid #33A0CE!important; }
+section { outline: 1px solid #66B8DA!important; }
+header { outline: 1px solid #99CFE7!important; }
+footer { outline: 1px solid #CCE7F3!important; }
+h1 { outline: 1px solid #162544!important; }
+h2 { outline: 1px solid #314E6E!important; }
+h3 { outline: 1px solid #3E5E85!important; }
+h4 { outline: 1px solid #449BAF!important; }
+h5 { outline: 1px solid #C7D1CB!important; }
+h6 { outline: 1px solid #4371D0!important; }
+main { outline: 1px solid #2F4F90!important; }
+address { outline: 1px solid #1A2C51!important; }
+div { outline: 1px solid #036CDB!important; }
+
+
+p { outline: 1px solid #AC050B!important; }
+hr { outline: 1px solid #FF063F!important; }
+pre { outline: 1px solid #850440!important; }
+blockquote { outline: 1px solid #F1B8E7!important; }
+ol { outline: 1px solid #FF050C!important; }
+ul { outline: 1px solid #D90416!important; }
+li { outline: 1px solid #D90416!important; }
+dl { outline: 1px solid #FD3427!important; }
+dt { outline: 1px solid #FF0043!important; }
+dd { outline: 1px solid #E80174!important; }
+figure { outline: 1px solid #FF00BB!important; }
+figcaption { outline: 1px solid #BF0032!important; }
+
+
+
+table { outline: 1px solid #00CC99!important; }
+caption { outline: 1px solid #37FFC4!important; }
+thead { outline: 1px solid #98DACA!important; }
+tbody { outline: 1px solid #64A7A0!important; }
+tfoot { outline: 1px solid #22746B!important; }
+tr { outline: 1px solid #86C0B2!important; }
+th { outline: 1px solid #A1E7D6!important; }
+td { outline: 1px solid #3F5A54!important; }
+col { outline: 1px solid #6C9A8F!important; }
+colgroup { outline: 1px solid #6C9A9D!important; }
+
+
+button { outline: 1px solid #DA8301!important; }
+datalist { outline: 1px solid #C06000!important; }
+fieldset { outline: 1px solid #D95100!important; }
+form { outline: 1px solid #D23600!important; }
+input { outline: 1px solid #FCA600!important; }
+keygen { outline: 1px solid #B31E00!important; }
+label { outline: 1px solid #EE8900!important; }
+legend { outline: 1px solid #DE6D00!important; }
+meter { outline: 1px solid #E8630C!important; }
+optgroup { outline: 1px solid #B33600!important; }
+option { outline: 1px solid #FF8A00!important; }
+output { outline: 1px solid #FF9619!important; }
+progress { outline: 1px solid #E57C00!important; }
+select { outline: 1px solid #E26E0F!important; }
+textarea { outline: 1px solid #CC5400!important; }
+
+
+
+details { outline: 1px solid #33848F!important; }
+summary { outline: 1px solid #60A1A6!important; }
+command { outline: 1px solid #438DA1!important; }
+menu { outline: 1px solid #449DA6!important; }
+
+
+
+del { outline: 1px solid #BF0000!important; }
+ins { outline: 1px solid #400000!important; }
+
+
+
+img { outline: 1px solid #22746B!important; }
+iframe { outline: 1px solid #64A7A0!important; }
+embed { outline: 1px solid #98DACA!important; }
+object { outline: 1px solid #00CC99!important; }
+param { outline: 1px solid #37FFC4!important; }
+video { outline: 1px solid #6EE866!important; }
+audio { outline: 1px solid #027353!important; }
+source { outline: 1px solid #012426!important; }
+canvas { outline: 1px solid #A2F570!important; }
+track { outline: 1px solid #59A600!important; }
+map { outline: 1px solid #7BE500!important; }
+area { outline: 1px solid #305900!important; }
+
+
+
+a { outline: 1px solid #FF62AB!important; }
+em { outline: 1px solid #800B41!important; }
+strong { outline: 1px solid #FF1583!important; }
+i { outline: 1px solid #803156!important; }
+b { outline: 1px solid #CC1169!important; }
+u { outline: 1px solid #FF0430!important; }
+s { outline: 1px solid #F805E3!important; }
+small { outline: 1px solid #D107B2!important; }
+abbr { outline: 1px solid #4A0263!important; }
+q { outline: 1px solid #240018!important; }
+cite { outline: 1px solid #64003C!important; }
+dfn { outline: 1px solid #B4005A!important; }
+sub { outline: 1px solid #DBA0C8!important; }
+sup { outline: 1px solid #CC0256!important; }
+time { outline: 1px solid #D6606D!important; }
+code { outline: 1px solid #E04251!important; }
+kbd { outline: 1px solid #5E001F!important; }
+samp { outline: 1px solid #9C0033!important; }
+var { outline: 1px solid #D90047!important; }
+mark { outline: 1px solid #FF0053!important; }
+bdi { outline: 1px solid #BF3668!important; }
+bdo { outline: 1px solid #6F1400!important; }
+ruby { outline: 1px solid #FF7B93!important; }
+rt { outline: 1px solid #FF2F54!important; }
+rp { outline: 1px solid #803E49!important; }
+span { outline: 1px solid #CC2643!important; }
+br { outline: 1px solid #DB687D!important; }
+wbr { outline: 1px solid #DB175B!important; }
+
diff --git a/ghost/admin/app/styles/spirit/_display.css b/ghost/admin/app/styles/spirit/_display.css
new file mode 100644
index 0000000000..d145d07ddf
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_display.css
@@ -0,0 +1,100 @@
+/*
+
+ Base:
+ d = display
+
+ Modifiers:
+ n = none
+ b = block
+ ib = inline-block
+ it = inline-table
+ t = table
+ tc = table-cell
+ t-row = table-row
+ t-columm = table-column
+ t-column-group = table-column-group
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.dn { display: none; }
+.di { display: inline; }
+.db { display: block; }
+.dib { display: inline-block; }
+.dit { display: inline-table; }
+.dt { display: table; }
+.dtc { display: table-cell; }
+.dt-row { display: table-row; }
+.dt-row-group { display: table-row-group; }
+.dt-column { display: table-column; }
+.dt-column-group { display: table-column-group; }
+
+/*
+ This will set table to full width and then
+ all cells will be equal width
+*/
+.dt--fixed {
+ table-layout: fixed;
+ width: 100%;
+}
+
+@media (--breakpoint-not-small) {
+ .dn-ns { display: none; }
+ .di-ns { display: inline; }
+ .db-ns { display: block; }
+ .dib-ns { display: inline-block; }
+ .dit-ns { display: inline-table; }
+ .dt-ns { display: table; }
+ .dtc-ns { display: table-cell; }
+ .dt-row-ns { display: table-row; }
+ .dt-row-group-ns { display: table-row-group; }
+ .dt-column-ns { display: table-column; }
+ .dt-column-group-ns { display: table-column-group; }
+
+ .dt--fixed-ns {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .dn-m { display: none; }
+ .di-m { display: inline; }
+ .db-m { display: block; }
+ .dib-m { display: inline-block; }
+ .dit-m { display: inline-table; }
+ .dt-m { display: table; }
+ .dtc-m { display: table-cell; }
+ .dt-row-m { display: table-row; }
+ .dt-row-group-m { display: table-row-group; }
+ .dt-column-m { display: table-column; }
+ .dt-column-group-m { display: table-column-group; }
+
+ .dt--fixed-m {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
+
+@media (--breakpoint-large) {
+ .dn-l { display: none; }
+ .di-l { display: inline; }
+ .db-l { display: block; }
+ .dib-l { display: inline-block; }
+ .dit-l { display: inline-table; }
+ .dt-l { display: table; }
+ .dtc-l { display: table-cell; }
+ .dt-row-l { display: table-row; }
+ .dt-row-group-l { display: table-row-group; }
+ .dt-column-l { display: table-column; }
+ .dt-column-group-l { display: table-column-group; }
+
+ .dt--fixed-l {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_dropdown.css b/ghost/admin/app/styles/spirit/_dropdown.css
new file mode 100644
index 0000000000..6028e99ada
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_dropdown.css
@@ -0,0 +1,94 @@
+/* Ghost Dropdown
+/* -------------------------------------------------------- */
+.trans-from-up { transform: scale(0.9) translateY(-10px); }
+
+.dd-w1,
+.dd-w2,
+.dd-w3 {
+ margin-right: 50%;
+ pointer-events: none;
+}
+
+.dd-w1 { width: 16rem; right: -8rem; }
+.dd-w2 { width: 20rem; right: -10rem; }
+.dd-w3 { width: 24rem; right: -12rem; }
+
+.gd-drop.active .dd-w1,
+.gd-drop.active .dd-w2,
+.gd-drop.active .dd-w3,
+.gd-drop.dropdown-expanded .dd-w1,
+.gd-drop.dropdown-expanded .dd-w2,
+.gd-drop.dropdown-expanded .dd-w3 {
+ opacity: 1;
+ transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+ transform: scale(1) translateY(0px);
+ pointer-events: auto;
+}
+
+/* Dropdown triagle */
+.dd-w1:after,
+.dd-w3:after,
+.dd-w2:after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ width: 0;
+ height: 0;
+ border-width: 0 0.6rem 0.6rem 0.6rem;
+ border-style: solid;
+ border-color: #fff transparent;
+ left: calc(50% - 6px);
+}
+
+.dd-w1:before,
+.dd-w3:before,
+.dd-w2:before {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ width: 0;
+ height: 0;
+ border-width: 0 8px 8px 8px;
+ border-style: solid;
+ border-color: rgba(0,0,0,0.07) transparent;
+ left: calc(50% - 8px);
+}
+
+.dd-up {
+ top: auto;
+ bottom: 85%;
+ right: calc(50% - 12rem);
+ margin-right: 0;
+}
+
+.dd-up:after,
+.dd-up:before {
+ content: "";
+ position: absolute;
+ top: 100%;
+ right: auto;
+ bottom: auto;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.dd-up:before {
+ left: calc(50% - 8px);
+ border-width: 8px 8px 0;
+ border-color: rgba(0,0,0,.07) transparent;
+}
+
+.dd-up:after {
+ left: calc(50% - 6px);
+ border-width: 6px 6px 0;
+ border-color: #fff transparent;
+}
+
+
+/* TO BE DONE: add all classes (per group) to media queries */
+@media (--breakpoint-not-small) { }
+
+@media (--breakpoint-medium) { }
+
+@media (--breakpoint-large) { }
diff --git a/ghost/admin/app/styles/spirit/_flexbox.css b/ghost/admin/app/styles/spirit/_flexbox.css
new file mode 100644
index 0000000000..5002be7cd7
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_flexbox.css
@@ -0,0 +1,250 @@
+/*
+
+ FLEXBOX
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+
+/* 1. Fix for Chrome 44 bug.
+ * https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+}
+
+.flex-none { flex: none; }
+
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-column-reverse { flex-direction: column-reverse; }
+.flex-row-reverse { flex-direction: row-reverse; }
+
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+.self-start { align-self: flex-start; }
+.self-end { align-self: flex-end; }
+.self-center { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch { align-self: stretch; }
+
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+
+.content-start { align-content: flex-start; }
+.content-end { align-content: flex-end; }
+.content-center { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+.order-0 { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-last { order: 99999; }
+
+.flex-grow-0 { flex-grow: 0; }
+.flex-grow-1 { flex-grow: 1; }
+
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+
+@media (--breakpoint-not-small) {
+ .flex-ns { display: flex; }
+ .inline-flex-ns { display: inline-flex; }
+ .flex-auto-ns {
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-ns { flex: none; }
+ .flex-column-ns { flex-direction: column; }
+ .flex-row-ns { flex-direction: row; }
+ .flex-wrap-ns { flex-wrap: wrap; }
+ .flex-nowrap-ns { flex-wrap: nowrap; }
+ .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-ns { flex-direction: column-reverse; }
+ .flex-row-reverse-ns { flex-direction: row-reverse; }
+ .items-start-ns { align-items: flex-start; }
+ .items-end-ns { align-items: flex-end; }
+ .items-center-ns { align-items: center; }
+ .items-baseline-ns { align-items: baseline; }
+ .items-stretch-ns { align-items: stretch; }
+
+ .self-start-ns { align-self: flex-start; }
+ .self-end-ns { align-self: flex-end; }
+ .self-center-ns { align-self: center; }
+ .self-baseline-ns { align-self: baseline; }
+ .self-stretch-ns { align-self: stretch; }
+
+ .justify-start-ns { justify-content: flex-start; }
+ .justify-end-ns { justify-content: flex-end; }
+ .justify-center-ns { justify-content: center; }
+ .justify-between-ns { justify-content: space-between; }
+ .justify-around-ns { justify-content: space-around; }
+
+ .content-start-ns { align-content: flex-start; }
+ .content-end-ns { align-content: flex-end; }
+ .content-center-ns { align-content: center; }
+ .content-between-ns { align-content: space-between; }
+ .content-around-ns { align-content: space-around; }
+ .content-stretch-ns { align-content: stretch; }
+
+ .order-0-ns { order: 0; }
+ .order-1-ns { order: 1; }
+ .order-2-ns { order: 2; }
+ .order-3-ns { order: 3; }
+ .order-4-ns { order: 4; }
+ .order-5-ns { order: 5; }
+ .order-6-ns { order: 6; }
+ .order-7-ns { order: 7; }
+ .order-8-ns { order: 8; }
+ .order-last-ns { order: 99999; }
+
+ .flex-grow-0-ns { flex-grow: 0; }
+ .flex-grow-1-ns { flex-grow: 1; }
+
+ .flex-shrink-0-ns { flex-shrink: 0; }
+ .flex-shrink-1-ns { flex-shrink: 1; }
+}
+@media (--breakpoint-medium) {
+ .flex-m { display: flex; }
+ .inline-flex-m { display: inline-flex; }
+ .flex-auto-m {
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-m { flex: none; }
+ .flex-column-m { flex-direction: column; }
+ .flex-row-m { flex-direction: row; }
+ .flex-wrap-m { flex-wrap: wrap; }
+ .flex-nowrap-m { flex-wrap: nowrap; }
+ .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-m { flex-direction: column-reverse; }
+ .flex-row-reverse-m { flex-direction: row-reverse; }
+ .items-start-m { align-items: flex-start; }
+ .items-end-m { align-items: flex-end; }
+ .items-center-m { align-items: center; }
+ .items-baseline-m { align-items: baseline; }
+ .items-stretch-m { align-items: stretch; }
+
+ .self-start-m { align-self: flex-start; }
+ .self-end-m { align-self: flex-end; }
+ .self-center-m { align-self: center; }
+ .self-baseline-m { align-self: baseline; }
+ .self-stretch-m { align-self: stretch; }
+
+ .justify-start-m { justify-content: flex-start; }
+ .justify-end-m { justify-content: flex-end; }
+ .justify-center-m { justify-content: center; }
+ .justify-between-m { justify-content: space-between; }
+ .justify-around-m { justify-content: space-around; }
+
+ .content-start-m { align-content: flex-start; }
+ .content-end-m { align-content: flex-end; }
+ .content-center-m { align-content: center; }
+ .content-between-m { align-content: space-between; }
+ .content-around-m { align-content: space-around; }
+ .content-stretch-m { align-content: stretch; }
+
+ .order-0-m { order: 0; }
+ .order-1-m { order: 1; }
+ .order-2-m { order: 2; }
+ .order-3-m { order: 3; }
+ .order-4-m { order: 4; }
+ .order-5-m { order: 5; }
+ .order-6-m { order: 6; }
+ .order-7-m { order: 7; }
+ .order-8-m { order: 8; }
+ .order-last-m { order: 99999; }
+
+ .flex-grow-0-m { flex-grow: 0; }
+ .flex-grow-1-m { flex-grow: 1; }
+
+ .flex-shrink-0-m { flex-shrink: 0; }
+ .flex-shrink-1-m { flex-shrink: 1; }
+}
+
+@media (--breakpoint-large) {
+ .flex-l { display: flex; }
+ .inline-flex-l { display: inline-flex; }
+ .flex-auto-l {
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-l { flex: none; }
+ .flex-column-l { flex-direction: column; }
+ .flex-row-l { flex-direction: row; }
+ .flex-wrap-l { flex-wrap: wrap; }
+ .flex-nowrap-l { flex-wrap: nowrap; }
+ .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-l { flex-direction: column-reverse; }
+ .flex-row-reverse-l { flex-direction: row-reverse; }
+
+ .items-start-l { align-items: flex-start; }
+ .items-end-l { align-items: flex-end; }
+ .items-center-l { align-items: center; }
+ .items-baseline-l { align-items: baseline; }
+ .items-stretch-l { align-items: stretch; }
+
+ .self-start-l { align-self: flex-start; }
+ .self-end-l { align-self: flex-end; }
+ .self-center-l { align-self: center; }
+ .self-baseline-l { align-self: baseline; }
+ .self-stretch-l { align-self: stretch; }
+
+ .justify-start-l { justify-content: flex-start; }
+ .justify-end-l { justify-content: flex-end; }
+ .justify-center-l { justify-content: center; }
+ .justify-between-l { justify-content: space-between; }
+ .justify-around-l { justify-content: space-around; }
+
+ .content-start-l { align-content: flex-start; }
+ .content-end-l { align-content: flex-end; }
+ .content-center-l { align-content: center; }
+ .content-between-l { align-content: space-between; }
+ .content-around-l { align-content: space-around; }
+ .content-stretch-l { align-content: stretch; }
+
+ .order-0-l { order: 0; }
+ .order-1-l { order: 1; }
+ .order-2-l { order: 2; }
+ .order-3-l { order: 3; }
+ .order-4-l { order: 4; }
+ .order-5-l { order: 5; }
+ .order-6-l { order: 6; }
+ .order-7-l { order: 7; }
+ .order-8-l { order: 8; }
+ .order-last-l { order: 99999; }
+
+ .flex-grow-0-l { flex-grow: 0; }
+ .flex-grow-1-l { flex-grow: 1; }
+
+ .flex-shrink-0-l { flex-shrink: 0; }
+ .flex-shrink-1-l { flex-shrink: 1; }
+}
diff --git a/ghost/admin/app/styles/spirit/_floats.css b/ghost/admin/app/styles/spirit/_floats.css
new file mode 100644
index 0000000000..5b878917eb
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_floats.css
@@ -0,0 +1,46 @@
+/*
+
+ 1. Floated elements are automatically rendered as block level elements.
+ Setting floats to display inline will fix the double margin bug in
+ ie6. You know... just in case.
+
+ 2. Don't forget to clearfix your floats with .cf
+
+ Base:
+ f = float
+
+ Modifiers:
+ l = left
+ r = right
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+
+
+.fl { float: left; _display: inline; }
+.fr { float: right; _display: inline; }
+.fn { float: none; }
+
+@media (--breakpoint-not-small) {
+ .fl-ns { float: left; _display: inline; }
+ .fr-ns { float: right; _display: inline; }
+ .fn-ns { float: none; }
+}
+
+@media (--breakpoint-medium) {
+ .fl-m { float: left; _display: inline; }
+ .fr-m { float: right; _display: inline; }
+ .fn-m { float: none; }
+}
+
+@media (--breakpoint-large) {
+ .fl-l { float: left; _display: inline; }
+ .fr-l { float: right; _display: inline; }
+ .fn-l { float: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_font-family.css b/ghost/admin/app/styles/spirit/_font-family.css
new file mode 100644
index 0000000000..c8b9a238aa
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_font-family.css
@@ -0,0 +1,44 @@
+.sans-serif {
+ font-family: -apple-system, BlinkMacSystemFont,
+ 'avenir next', avenir,
+ 'helvetica neue', helvetica,
+ ubuntu,
+ roboto, noto,
+ 'segoe ui', arial,
+ sans-serif;
+}
+
+.serif {
+ font-family: georgia,
+ serif;
+}
+
+.system-sans-serif {
+ font-family: sans-serif;
+}
+
+.system-serif {
+ font-family: serif;
+}
+
+
+/* Monospaced Typefaces (for code) */
+
+/* From http://cssfontstack.com */
+code, .code {
+ font-family: monospace,monospace;
+}
+
+.courier {
+ font-family: 'Courier Next',
+ courier,
+ monospace;
+}
+
+
+/* Sans-Serif Typefaces */
+
+.whitney {
+ font-family: "Whitney SSm A", "Whitney SSm B",
+ sans-serif;
+}
diff --git a/ghost/admin/app/styles/spirit/_font-style.css b/ghost/admin/app/styles/spirit/_font-style.css
new file mode 100644
index 0000000000..f8869f9ee7
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_font-style.css
@@ -0,0 +1,26 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.i { font-style: italic; }
+.fs-normal { font-style: normal; }
+
+@media (--breakpoint-not-small) {
+ .i-ns { font-style: italic; }
+ .fs-normal-ns { font-style: normal; }
+}
+
+@media (--breakpoint-medium) {
+ .i-m { font-style: italic; }
+ .fs-normal-m { font-style: normal; }
+}
+
+@media (--breakpoint-large) {
+ .i-l { font-style: italic; }
+ .fs-normal-l { font-style: normal; }
+}
diff --git a/ghost/admin/app/styles/spirit/_font-weight.css b/ghost/admin/app/styles/spirit/_font-weight.css
new file mode 100644
index 0000000000..c5ef1a0fd5
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_font-weight.css
@@ -0,0 +1,42 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.normal { font-weight: 300; }
+.b, b, strong { font-weight: 700; }
+
+.fw1 { font-weight: 100; }
+.fw3 { font-weight: 300; }
+.fw4 { font-weight: 400; }
+.fw6 { font-weight: 600; }
+.fw7 { font-weight: 700; }
+
+
+@media (--breakpoint-not-small) {
+ .fw1-ns { font-weight: 100; }
+ .fw3-ns { font-weight: 300; }
+ .fw4-ns { font-weight: 400; }
+ .fw6-ns { font-weight: 600; }
+ .fw7-ns { font-weight: 700; }
+}
+
+@media (--breakpoint-medium) {
+ .fw1-m { font-weight: 100; }
+ .fw3-m { font-weight: 300; }
+ .fw4-m { font-weight: 400; }
+ .fw6-m { font-weight: 600; }
+ .fw7-m { font-weight: 700; }
+}
+
+@media (--breakpoint-large) {
+ .fw1-l { font-weight: 100; }
+ .fw3-l { font-weight: 300; }
+ .fw4-l { font-weight: 400; }
+ .fw6-l { font-weight: 600; }
+ .fw7-l { font-weight: 700; }
+}
diff --git a/ghost/admin/app/styles/spirit/_forms.css b/ghost/admin/app/styles/spirit/_forms.css
new file mode 100644
index 0000000000..9f20a6c731
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_forms.css
@@ -0,0 +1,134 @@
+/*
+
+ FORMS
+
+*/
+
+.input-reset {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+.form-icon {
+ position: absolute;
+ top: calc(50% + 2px);
+ left: 12px;
+ z-index: 100;
+ height: 14px;
+ fill: #a6bac5;
+}
+
+.form-text {
+ transition: border-color .15s linear;
+ -webkit-appearance: none;
+ outline: none;
+}
+
+.form-text::placeholder {
+ color: var(--midlightgrey);
+}
+
+.form-input-w-icon {
+ padding-left: 35px;
+}
+
+.form-input-w-button {
+ padding-right: 77px;
+}
+
+.form-btn-forgot {
+ right: 1px;
+ padding: 5px 11px 5px 12px;
+ border: none;
+ border-left: 1px solid var(--lightgrey);
+ background-color: transparent;
+ top: 27px;
+ line-height: 1.1em;
+}
+
+.form-response {
+ top: 0;
+ right: 0;
+}
+
+.form-checkbox:before {
+ height: 6px;
+ left: 6px;
+ top: 7px;
+ width: 15px;
+ border: 2px solid #fff;
+ border-right: none;
+ border-top: none;
+ content: "";
+ position: absolute;
+ transform: rotate(-45deg);
+ transition: opacity .15s ease-in-out;
+}
+
+
+/* The slider */
+.slider {
+ transition: .4s;
+}
+
+.slider:before {
+ z-index: 999;
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 1px;
+ bottom: 1px;
+ background-color: white;
+ transition: .3s;
+ border-radius: 50%;
+}
+
+input:checked + .slider {
+ background-color: var(--green);
+ border-color: var(--green-d1);
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(36px);
+ -ms-transform: translateX(36px);
+ transform: translateX(36px);
+}
+
+.onofflabel:before {
+ position: absolute;
+ content: "ON";
+ top: 8px;
+ left: 12px;
+ color: var(--white-80);
+ opacity: 0;
+ transition: .3s;
+}
+
+.onofflabel:after {
+ position: absolute;
+ content: "OFF";
+ top: 8px;
+ left: 34px;
+ color: var(--lightgrey-d2);
+ opacity: 1;
+ transition: .3s;
+}
+
+input:checked + .slider + .onofflabel:before {
+ opacity: 1;
+}
+
+input:checked + .slider + .onofflabel:after {
+ opacity: 0;
+}
diff --git a/ghost/admin/app/styles/spirit/_gradients.css b/ghost/admin/app/styles/spirit/_gradients.css
new file mode 100644
index 0000000000..3cb497eb85
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_gradients.css
@@ -0,0 +1,99 @@
+.bg-lgr-blue {
+ background: linear-gradient(color-mod(var(--blue-l3)), color-mod(var(--blue)));
+}
+.bg-rgr-blue {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--blue-l3)) 0%, color-mod(var(--blue))) 100%;
+}
+
+.bg-lgr-green {
+ background: linear-gradient(color-mod(var(--green-l3)), color-mod(var(--green)));
+}
+.bg-rgr-green {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--green-l3)) 0%, color-mod(var(--green))) 100%;
+}
+
+.bg-lgr-purple {
+ background: linear-gradient(color-mod(var(--purple-l3)), color-mod(var(--purple)));
+}
+.bg-rgr-purple {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--purple-l3)) 0%, color-mod(var(--purple))) 100%;
+}
+
+.bg-lgr-yellow {
+ background: linear-gradient(color-mod(var(--yellow-l3)), color-mod(var(--yellow)));
+}
+.bg-rgr-yellow {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--yellow-l3)) 0%, color-mod(var(--yellow))) 100%;
+}
+
+.bg-lgr-red {
+ background: linear-gradient(color-mod(var(--red-l3)), color-mod(var(--red)));
+}
+.bg-rgr-red {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--red-l3)) 0%, color-mod(var(--red))) 100%;
+}
+
+.bg-lgr-pink {
+ background: linear-gradient(color-mod(var(--pink-l3)), color-mod(var(--pink)));
+}
+.bg-rgr-pink {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--pink-l3)) 0%, color-mod(var(--pink))) 100%;
+}
+
+.bg-lgr-whitegrey {
+ background: linear-gradient(color-mod(var(--whitegrey-l2)), color-mod(var(--whitegrey)));
+}
+.bg-rgr-whitegrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--whitegrey-l2)) 0%, color-mod(var(--whitegrey))) 100%;
+}
+
+.bg-lgr-lightgrey {
+ background: linear-gradient(color-mod(var(--lightgrey-l2)), color-mod(var(--lightgrey)));
+}
+.bg-rgr-lightgrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--lightgrey-l2)) 0%, color-mod(var(--lightgrey))) 100%;
+}
+
+.bg-lgr-midlightgrey {
+ background: linear-gradient(color-mod(var(--midlightgrey-l2)), color-mod(var(--midlightgrey)));
+}
+.bg-rgr-midlightgrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--midlightgrey-l2)) 0%, color-mod(var(--midlightgrey))) 100%;
+}
+
+.bg-lgr-midgrey {
+ background: linear-gradient(color-mod(var(--midgrey-l2)), color-mod(var(--midgrey-d1)));
+}
+.bg-rgr-midgrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--midgrey-l2)) 0%, color-mod(var(--midgrey-d1))) 100%;
+}
+
+.bg-lgr-middarkgrey {
+ background: linear-gradient(color-mod(var(--middarkgrey-l2)), color-mod(var(--middarkgrey-d1)));
+}
+.bg-rgr-middarkgrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--middarkgrey-l2)) 0%, color-mod(var(--middarkgrey-d1))) 100%;
+}
+
+.bg-lgr-darkgrey {
+ background: linear-gradient(color-mod(var(--darkgrey-l2)), color-mod(var(--darkgrey-d2)));
+}
+.bg-rgr-darkgrey {
+ background: radial-gradient(circle farthest-corner at left bottom, color-mod(var(--darkgrey-l2)) 0%, color-mod(var(--darkgrey-d2))) 100%;
+}
+
+.bg-image-overlay-top {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 20px;
+ color: #fff;
+ background-image: linear-gradient(180deg,rgba(0,0,0,0.2) 0,transparent 40%,transparent 100%);
+ opacity: 0;
+ transition: all 0.15s ease-in-out;
+}
diff --git a/ghost/admin/app/styles/spirit/_heights.css b/ghost/admin/app/styles/spirit/_heights.css
new file mode 100644
index 0000000000..95c6875327
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_heights.css
@@ -0,0 +1,187 @@
+/*
+
+ Base:
+ h = height
+
+ Value:
+ (n) = (n * grid size)
+ -(m) = (m)%
+ -auto = auto
+ -inherit = inherit
+
+ ---------------------------------------------
+
+ Base:
+ vh = viewport based height
+
+ Value:
+ -(m) = (m)vh
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.h1 { height: calc(var(--grid-size) * 1); }
+.h2 { height: calc(var(--grid-size) * 2); }
+.h3 { height: calc(var(--grid-size) * 3); }
+.h4 { height: calc(var(--grid-size) * 4); }
+.h5 { height: calc(var(--grid-size) * 5); }
+.h6 { height: calc(var(--grid-size) * 6); }
+.h7 { height: calc(var(--grid-size) * 7); }
+.h8 { height: calc(var(--grid-size) * 8); }
+.h9 { height: calc(var(--grid-size) * 9); }
+.h10 { height: calc(var(--grid-size) * 10); }
+.h11 { height: calc(var(--grid-size) * 11); }
+.h12 { height: calc(var(--grid-size) * 12); }
+.h13 { height: calc(var(--grid-size) * 13); }
+.h14 { height: calc(var(--grid-size) * 14); }
+.h15 { height: calc(var(--grid-size) * 15); }
+.h16 { height: calc(var(--grid-size) * 16); }
+.h17 { height: calc(var(--grid-size) * 17); }
+.h18 { height: calc(var(--grid-size) * 18); }
+.h19 { height: calc(var(--grid-size) * 19); }
+.h20 { height: calc(var(--grid-size) * 20); }
+.h25 { height: calc(var(--grid-size) * 25); }
+.h30 { height: calc(var(--grid-size) * 30); }
+.h40 { height: calc(var(--grid-size) * 40); }
+.h50 { height: calc(var(--grid-size) * 50); }
+.h70 { height: calc(var(--grid-size) * 70); }
+
+.h-25 { height: 25%; }
+.h-50 { height: 50%; }
+.h-75 { height: 75%; }
+.h-100 { height: 100%; }
+
+.vh-25 { height: 25vh; }
+.vh-50 { height: 50vh; }
+.vh-75 { height: 75vh; }
+.vh-100 { height: 100vh; }
+
+.h-auto { height: auto; }
+.h-inherit { height: inherit; }
+
+@media (--breakpoint-not-small) {
+ .h1-ns { height: calc(var(--grid-size) * 1); }
+ .h2-ns { height: calc(var(--grid-size) * 2); }
+ .h3-ns { height: calc(var(--grid-size) * 3); }
+ .h4-ns { height: calc(var(--grid-size) * 4); }
+ .h5-ns { height: calc(var(--grid-size) * 5); }
+ .h6-ns { height: calc(var(--grid-size) * 6); }
+ .h7-ns { height: calc(var(--grid-size) * 7); }
+ .h8-ns { height: calc(var(--grid-size) * 8); }
+ .h9-ns { height: calc(var(--grid-size) * 9); }
+ .h10-ns { height: calc(var(--grid-size) * 10); }
+ .h11-ns { height: calc(var(--grid-size) * 11); }
+ .h12-ns { height: calc(var(--grid-size) * 12); }
+ .h13-ns { height: calc(var(--grid-size) * 13); }
+ .h14-ns { height: calc(var(--grid-size) * 14); }
+ .h15-ns { height: calc(var(--grid-size) * 15); }
+ .h16-ns { height: calc(var(--grid-size) * 16); }
+ .h17-ns { height: calc(var(--grid-size) * 17); }
+ .h18-ns { height: calc(var(--grid-size) * 18); }
+ .h19-ns { height: calc(var(--grid-size) * 19); }
+ .h20-ns { height: calc(var(--grid-size) * 20); }
+ .h25-ns { height: calc(var(--grid-size) * 25); }
+ .h30-ns { height: calc(var(--grid-size) * 30); }
+ .h40-ns { height: calc(var(--grid-size) * 40); }
+ .h50-ns { height: calc(var(--grid-size) * 50); }
+ .h70-ns { height: calc(var(--grid-size) * 70); }
+
+ .h-25-ns { height: 25%; }
+ .h-50-ns { height: 50%; }
+ .h-75-ns { height: 75%; }
+ .h-100-ns { height: 100%; }
+
+ .vh-25-ns { height: 25vh; }
+ .vh-50-ns { height: 50vh; }
+ .vh-75-ns { height: 75vh; }
+ .vh-100-ns { height: 100vh; }
+
+ .h-auto-ns { height: auto; }
+ .h-inherit-ns { height: inherit; }
+}
+
+@media (--breakpoint-medium) {
+ .h1-m { height: calc(var(--grid-size) * 1); }
+ .h2-m { height: calc(var(--grid-size) * 2); }
+ .h3-m { height: calc(var(--grid-size) * 3); }
+ .h4-m { height: calc(var(--grid-size) * 4); }
+ .h5-m { height: calc(var(--grid-size) * 5); }
+ .h6-m { height: calc(var(--grid-size) * 6); }
+ .h7-m { height: calc(var(--grid-size) * 7); }
+ .h8-m { height: calc(var(--grid-size) * 8); }
+ .h9-m { height: calc(var(--grid-size) * 9); }
+ .h10-m { height: calc(var(--grid-size) * 10); }
+ .h11-m { height: calc(var(--grid-size) * 11); }
+ .h12-m { height: calc(var(--grid-size) * 12); }
+ .h13-m { height: calc(var(--grid-size) * 13); }
+ .h14-m { height: calc(var(--grid-size) * 14); }
+ .h15-m { height: calc(var(--grid-size) * 15); }
+ .h16-m { height: calc(var(--grid-size) * 16); }
+ .h17-m { height: calc(var(--grid-size) * 17); }
+ .h18-m { height: calc(var(--grid-size) * 18); }
+ .h19-m { height: calc(var(--grid-size) * 19); }
+ .h20-m { height: calc(var(--grid-size) * 20); }
+ .h25-m { height: calc(var(--grid-size) * 25); }
+ .h30-m { height: calc(var(--grid-size) * 30); }
+ .h40-m { height: calc(var(--grid-size) * 40); }
+ .h50-m { height: calc(var(--grid-size) * 50); }
+ .h70-m { height: calc(var(--grid-size) * 70); }
+
+ .h-25-m { height: 25%; }
+ .h-50-m { height: 50%; }
+ .h-75-m { height: 75%; }
+ .h-100-m { height: 100%; }
+
+ .vh-25-m { height: 25vh; }
+ .vh-50-m { height: 50vh; }
+ .vh-75-m { height: 75vh; }
+ .vh-100-m { height: 100vh; }
+
+ .h-auto-m { height: auto; }
+ .h-inherit-m { height: inherit; }
+}
+
+@media (--breakpoint-large) {
+ .h1-l { height: calc(var(--grid-size) * 1); }
+ .h2-l { height: calc(var(--grid-size) * 2); }
+ .h3-l { height: calc(var(--grid-size) * 3); }
+ .h4-l { height: calc(var(--grid-size) * 4); }
+ .h5-l { height: calc(var(--grid-size) * 5); }
+ .h6-l { height: calc(var(--grid-size) * 6); }
+ .h7-l { height: calc(var(--grid-size) * 7); }
+ .h8-l { height: calc(var(--grid-size) * 8); }
+ .h9-l { height: calc(var(--grid-size) * 9); }
+ .h10-l { height: calc(var(--grid-size) * 10); }
+ .h11-l { height: calc(var(--grid-size) * 11); }
+ .h12-l { height: calc(var(--grid-size) * 12); }
+ .h13-l { height: calc(var(--grid-size) * 13); }
+ .h14-l { height: calc(var(--grid-size) * 14); }
+ .h15-l { height: calc(var(--grid-size) * 15); }
+ .h16-l { height: calc(var(--grid-size) * 16); }
+ .h17-l { height: calc(var(--grid-size) * 17); }
+ .h18-l { height: calc(var(--grid-size) * 18); }
+ .h19-l { height: calc(var(--grid-size) * 19); }
+ .h20-l { height: calc(var(--grid-size) * 20); }
+ .h25-l { height: calc(var(--grid-size) * 25); }
+ .h30-l { height: calc(var(--grid-size) * 30); }
+ .h40-l { height: calc(var(--grid-size) * 40); }
+ .h50-l { height: calc(var(--grid-size) * 50); }
+ .h70-l { height: calc(var(--grid-size) * 70); }
+
+ .h-25-l { height: 25%; }
+ .h-50-l { height: 50%; }
+ .h-75-l { height: 75%; }
+ .h-100-l { height: 100%; }
+
+ .vh-25-l { height: 25vh; }
+ .vh-50-l { height: 50vh; }
+ .vh-75-l { height: 75vh; }
+ .vh-100-l { height: 100vh; }
+
+ .h-auto-l { height: auto; }
+ .h-inherit-l { height: inherit; }
+}
diff --git a/ghost/admin/app/styles/spirit/_hovers.css b/ghost/admin/app/styles/spirit/_hovers.css
new file mode 100644
index 0000000000..c06f1bae03
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_hovers.css
@@ -0,0 +1,403 @@
+/* Text colors */
+
+.hover-blue:hover,
+.hover-blue:focus { color: var(--blue); }
+.hover-green:hover,
+.hover-green:focus { color: var(--green); }
+.hover-purple:hover,
+.hover-purple:focus { color: var(--purple); }
+.hover-yellow:hover,
+.hover-yellow:focus { color: var(--yellow); }
+.hover-red:hover,
+.hover-red:focus { color: var(--red); }
+.hover-pink:hover,
+.hover-pink:focus { color: var(--pink); }
+.hover-white:hover,
+.hover-white:focus { color: var(--white); }
+
+.hover-white-10:hover,
+.hover-white-10:focus { color: var(--white-10); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: var(--white-20); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: var(--white-30); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: var(--white-40); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: var(--white-50); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: var(--white-60); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: var(--white-70); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: var(--white-80); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: var(--white-90); }
+
+.hover-black-10:hover,
+.hover-black-10:focus { color: var(--black-10); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: var(--black-20); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: var(--black-30); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: var(--black-40); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: var(--black-50); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: var(--black-60); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: var(--black-70); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: var(--black-80); }
+.hover-black-90:hover,
+.hover-black-90:focus { color: var(--black-90); }
+
+.hover-darkgrey:hover,
+.hover-darkgrey:focus { color: var(--darkgrey); }
+.hover-middarkgrey:hover,
+.hover-middarkgrey:focus { color: var(--middarkgrey); }
+.hover-midgrey:hover,
+.hover-midgrey:focus { color: var(--midgrey); }
+.hover-midlightgrey:hover,
+.hover-midlightgrey:focus { color: var(--midlightgrey); }
+.hover-lightgrey:hover,
+.hover-lightgrey:focus { color: var(--lightgrey); }
+.hover-whitegrey:hover,
+.hover-whitegrey:focus { color: var(--whitegrey); }
+
+/* Shades */
+.hover-blue-l3:hover,
+.hover-blue-l3:focus { color: var(--blue-l3); }
+.hover-blue-l2:hover,
+.hover-blue-l2:focus { color: var(--blue-l2); }
+.hover-blue-l1:hover,
+.hover-blue-l1:focus { color: var(--blue-l1); }
+.hover-blue-d1:hover,
+.hover-blue-d1:focus { color: var(--blue-d1); }
+.hover-blue-d2:hover,
+.hover-blue-d2:focus { color: var(--blue-d2); }
+.hover-blue-d3:hover,
+.hover-blue-d3:focus { color: var(--blue-d3); }
+
+.hover-green-l3:hover,
+.hover-green-l3:focus { color: var(--green-l3); }
+.hover-green-l2:hover,
+.hover-green-l2:focus { color: var(--green-l2); }
+.hover-green-l1:hover,
+.hover-green-l1:focus { color: var(--green-l1); }
+.hover-green-d1:hover,
+.hover-green-d1:focus { color: var(--green-d1); }
+.hover-green-d2:hover,
+.hover-green-d2:focus { color: var(--green-d2); }
+.hover-green-d3:hover,
+.hover-green-d3:focus { color: var(--green-d3); }
+
+.hover-purple-l3:hover,
+.hover-purple-l3:focus { color: var(--purple-l3); }
+.hover-purple-l2:hover,
+.hover-purple-l2:focus { color: var(--purple-l2); }
+.hover-purple-l1:hover,
+.hover-purple-l1:focus { color: var(--purple-l1); }
+.hover-purple-d1:hover,
+.hover-purple-d1:focus { color: var(--purple-d1); }
+.hover-purple-d2:hover,
+.hover-purple-d2:focus { color: var(--purple-d2); }
+.hover-purple-d3:hover,
+.hover-purple-d3:focus { color: var(--purple-d3); }
+
+.hover-yellow-l3:hover,
+.hover-yellow-l3:focus { color: var(--yellow-l3); }
+.hover-yellow-l2:hover,
+.hover-yellow-l2:focus { color: var(--yellow-l2); }
+.hover-yellow-l1:hover,
+.hover-yellow-l1:focus { color: var(--yellow-l1); }
+.hover-yellow-d1:hover,
+.hover-yellow-d1:focus { color: var(--yellow-d1); }
+.hover-yellow-d2:hover,
+.hover-yellow-d2:focus { color: var(--yellow-d2); }
+.hover-yellow-d3:hover,
+.hover-yellow-d3:focus { color: var(--yellow-d3); }
+
+.hover-red-l3:hover,
+.hover-red-l3:focus { color: var(--red-l3); }
+.hover-red-l2:hover,
+.hover-red-l2:focus { color: var(--red-l2); }
+.hover-red-l1:hover,
+.hover-red-l1:focus { color: var(--red-l1); }
+.hover-red-d1:hover,
+.hover-red-d1:focus { color: var(--red-d1); }
+.hover-red-d2:hover,
+.hover-red-d2:focus { color: var(--red-d2); }
+.hover-red-d3:hover,
+.hover-red-d3:focus { color: var(--red-d3); }
+
+.hover-pink-l3:hover,
+.hover-pink-l3:focus { color: var(--pink-l3); }
+.hover-pink-l2:hover,
+.hover-pink-l2:focus { color: var(--pink-l2); }
+.hover-pink-l1:hover,
+.hover-pink-l1:focus { color: var(--pink-l1); }
+.hover-pink-d1:hover,
+.hover-pink-d1:focus { color: var(--pink-d1); }
+.hover-pink-d2:hover,
+.hover-pink-d2:focus { color: var(--pink-d2); }
+.hover-pink-d3:hover,
+.hover-pink-d3:focus { color: var(--pink-d3); }
+
+.hover-darkgrey-l2:hover,
+.hover-darkgrey-l2:focus { color: var(--darkgrey-l2); }
+.hover-darkgrey-l1:hover,
+.hover-darkgrey-l1:focus { color: var(--darkgrey-l1); }
+.hover-darkgrey-d1:hover,
+.hover-darkgrey-d1:focus { color: var(--darkgrey-d1); }
+.hover-darkgrey-d2:hover,
+.hover-darkgrey-d2:focus { color: var(--darkgrey-d2); }
+
+.hover-middarkgrey-l2:hover,
+.hover-middarkgrey-l2:focus { color: var(--middarkgrey-l2); }
+.hover-middarkgrey-l1:hover,
+.hover-middarkgrey-l1:focus { color: var(--middarkgrey-l1); }
+.hover-middarkgrey-d1:hover,
+.hover-middarkgrey-d1:focus { color: var(--middarkgrey-d1); }
+.hover-middarkgrey-d2:hover,
+.hover-middarkgrey-d2:focus { color: var(--middarkgrey-d2); }
+
+.hover-midgrey-l2:hover,
+.hover-midgrey-l2:focus { color: var(--midgrey-l2); }
+.hover-midgrey-l1:hover,
+.hover-midgrey-l1:focus { color: var(--midgrey-l1); }
+.hover-midgrey-d1:hover,
+.hover-midgrey-d1:focus { color: var(--midgrey-d1); }
+.hover-midgrey-d2:hover,
+.hover-midgrey-d2:focus { color: var(--midgrey-d2); }
+
+.hover-midlightgrey-l2:hover,
+.hover-midlightgrey-l2:focus { color: var(--midlightgrey-l2); }
+.hover-midlightgrey-l1:hover,
+.hover-midlightgrey-l1:focus { color: var(--midlightgrey-l1); }
+.hover-midlightgrey-d1:hover,
+.hover-midlightgrey-d1:focus { color: var(--midlightgrey-d1); }
+.hover-midlightgrey-d2:hover,
+.hover-midlightgrey-d2:focus { color: var(--midlightgrey-d2); }
+
+.hover-lightgrey-l2:hover,
+.hover-lightgrey-l2:focus { color: var(--lightgrey-l2); }
+.hover-lightgrey-l1:hover,
+.hover-lightgrey-l1:focus { color: var(--lightgrey-l1); }
+.hover-lightgrey-d1:hover,
+.hover-lightgrey-d1:focus { color: var(--lightgrey-d1); }
+.hover-lightgrey-d2:hover,
+.hover-lightgrey-d2:focus { color: var(--lightgrey-d2); }
+
+.hover-whitegrey-l2:hover,
+.hover-whitegrey-l2:focus { color: var(--whitegrey-l2); }
+.hover-whitegrey-l1:hover,
+.hover-whitegrey-l1:focus { color: var(--whitegrey-l1); }
+.hover-whitegrey-d1:hover,
+.hover-whitegrey-d1:focus { color: var(--whitegrey-d1); }
+.hover-whitegrey-d2:hover,
+.hover-whitegrey-d2:focus { color: var(--whitegrey-d2); }
+
+.hover-color-inherit:hover,
+.hover-color-inherit:focus { color: inherit; }
+
+/* Background colors */
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: var(--blue); }
+.hover-bg-green:hover,
+.hover-bg-green:focus { background-color: var(--green); }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: var(--purple); }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: var(--yellow); }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: var(--red); }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: var(--pink); }
+.hover-bg-white:hover,
+.hover-bg-white:focus { background-color: var(--white); }
+
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: var(--white-10); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: var(--white-20); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: var(--white-30); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: var(--white-40); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: var(--white-50); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: var(--white-60); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: var(--white-70); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: var(--white-80); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: var(--white-90); }
+
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: var(--black-10); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: var(--black-20); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: var(--black-30); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: var(--black-40); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: var(--black-50); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: var(--black-60); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: var(--black-70); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: var(--black-80); }
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: var(--black-90); }
+
+.hover-bg-darkgrey:hover,
+.hover-bg-darkgrey:focus { background-color: var(--darkgrey); }
+.hover-bg-middarkgrey:hover,
+.hover-bg-middarkgrey:focus { background-color: var(--middarkgrey); }
+.hover-bg-midgrey:hover,
+.hover-bg-midgrey:focus { background-color: var(--midgrey); }
+.hover-bg-midlightgrey:hover,
+.hover-bg-midlightgrey:focus { background-color: var(--midlightgrey); }
+.hover-bg-lightgrey:hover,
+.hover-bg-lightgrey:focus { background-color: var(--lightgrey); }
+.hover-bg-whitegrey:hover,
+.hover-bg-whitegrey:focus { background-color: var(--whitegrey); }
+
+/* Shades */
+.hover-bg-blue-l3:hover,
+.hover-bg-blue-l3:focus { background-color: var(--blue-l3); }
+.hover-bg-blue-l2:hover,
+.hover-bg-blue-l2:focus { background-color: var(--blue-l2); }
+.hover-bg-blue-l1:hover,
+.hover-bg-blue-l1:focus { background-color: var(--blue-l1); }
+.hover-bg-blue-d1:hover,
+.hover-bg-blue-d1:focus { background-color: var(--blue-d1); }
+.hover-bg-blue-d2:hover,
+.hover-bg-blue-d2:focus { background-color: var(--blue-d2); }
+.hover-bg-blue-d3:hover,
+.hover-bg-blue-d3:focus { background-color: var(--blue-d3); }
+
+.hover-bg-green-l3:hover,
+.hover-bg-green-l3:focus { background-color: var(--green-l3); }
+.hover-bg-green-l2:hover,
+.hover-bg-green-l2:focus { background-color: var(--green-l2); }
+.hover-bg-green-l1:hover,
+.hover-bg-green-l1:focus { background-color: var(--green-l1); }
+.hover-bg-green-d1:hover,
+.hover-bg-green-d1:focus { background-color: var(--green-d1); }
+.hover-bg-green-d2:hover,
+.hover-bg-green-d2:focus { background-color: var(--green-d2); }
+.hover-bg-green-d3:hover,
+.hover-bg-green-d3:focus { background-color: var(--green-d3); }
+
+.hover-bg-purple-l3:hover,
+.hover-bg-purple-l3:focus { background-color: var(--purple-l3); }
+.hover-bg-purple-l2:hover,
+.hover-bg-purple-l2:focus { background-color: var(--purple-l2); }
+.hover-bg-purple-l1:hover,
+.hover-bg-purple-l1:focus { background-color: var(--purple-l1); }
+.hover-bg-purple-d1:hover,
+.hover-bg-purple-d1:focus { background-color: var(--purple-d1); }
+.hover-bg-purple-d2:hover,
+.hover-bg-purple-d2:focus { background-color: var(--purple-d2); }
+.hover-bg-purple-d3:hover,
+.hover-bg-purple-d3:focus { background-color: var(--purple-d3); }
+
+.hover-bg-yellow-l3:hover,
+.hover-bg-yellow-l3:focus { background-color: var(--yellow-l3); }
+.hover-bg-yellow-l2:hover,
+.hover-bg-yellow-l2:focus { background-color: var(--yellow-l2); }
+.hover-bg-yellow-l1:hover,
+.hover-bg-yellow-l1:focus { background-color: var(--yellow-l1); }
+.hover-bg-yellow-d1:hover,
+.hover-bg-yellow-d1:focus { background-color: var(--yellow-d1); }
+.hover-bg-yellow-d2:hover,
+.hover-bg-yellow-d2:focus { background-color: var(--yellow-d2); }
+.hover-bg-yellow-d3:hover,
+.hover-bg-yellow-d3:focus { background-color: var(--yellow-d3); }
+
+.hover-bg-red-l3:hover,
+.hover-bg-red-l3:focus { background-color: var(--red-l3); }
+.hover-bg-red-l2:hover,
+.hover-bg-red-l2:focus { background-color: var(--red-l2); }
+.hover-bg-red-l1:hover,
+.hover-bg-red-l1:focus { background-color: var(--red-l1); }
+.hover-bg-red-d1:hover,
+.hover-bg-red-d1:focus { background-color: var(--red-d1); }
+.hover-bg-red-d2:hover,
+.hover-bg-red-d2:focus { background-color: var(--red-d2); }
+.hover-bg-red-d3:hover,
+.hover-bg-red-d3:focus { background-color: var(--red-d3); }
+
+.hover-bg-pink-l3:hover,
+.hover-bg-pink-l3:focus { background-color: var(--pink-l3); }
+.hover-bg-pink-l2:hover,
+.hover-bg-pink-l2:focus { background-color: var(--pink-l2); }
+.hover-bg-pink-l1:hover,
+.hover-bg-pink-l1:focus { background-color: var(--pink-l1); }
+.hover-bg-pink-d1:hover,
+.hover-bg-pink-d1:focus { background-color: var(--pink-d1); }
+.hover-bg-pink-d2:hover,
+.hover-bg-pink-d2:focus { background-color: var(--pink-d2); }
+.hover-bg-pink-d3:hover,
+.hover-bg-pink-d3:focus { background-color: var(--pink-d3); }
+
+.hover-bg-darkgrey-l2:hover,
+.hover-bg-darkgrey-l2:focus { background-color: var(--darkgrey-l2); }
+.hover-bg-darkgrey-l1:hover,
+.hover-bg-darkgrey-l1:focus { background-color: var(--darkgrey-l1); }
+.hover-bg-darkgrey-d1:hover,
+.hover-bg-darkgrey-d1:focus { background-color: var(--darkgrey-d1); }
+.hover-bg-darkgrey-d2:hover,
+.hover-bg-darkgrey-d2:focus { background-color: var(--darkgrey-d2); }
+
+.hover-bg-middarkgrey-l2:hover,
+.hover-bg-middarkgrey-l2:focus { background-color: var(--middarkgrey-l2); }
+.hover-bg-middarkgrey-l1:hover,
+.hover-bg-middarkgrey-l1:focus { background-color: var(--middarkgrey-l1); }
+.hover-bg-middarkgrey-d1:hover,
+.hover-bg-middarkgrey-d1:focus { background-color: var(--middarkgrey-d1); }
+.hover-bg-middarkgrey-d2:hover,
+.hover-bg-middarkgrey-d2:focus { background-color: var(--middarkgrey-d2); }
+
+.hover-bg-midgrey-l2:hover,
+.hover-bg-midgrey-l2:focus { background-color: var(--midgrey-l2); }
+.hover-bg-midgrey-l1:hover,
+.hover-bg-midgrey-l1:focus { background-color: var(--midgrey-l1); }
+.hover-bg-midgrey-d1:hover,
+.hover-bg-midgrey-d1:focus { background-color: var(--midgrey-d1); }
+.hover-bg-midgrey-d2:hover,
+.hover-bg-midgrey-d2:focus { background-color: var(--midgrey-d2); }
+
+.hover-bg-midlightgrey-l2:hover,
+.hover-bg-midlightgrey-l2:focus { background-color: var(--midlightgrey-l2); }
+.hover-bg-midlightgrey-l1:hover,
+.hover-bg-midlightgrey-l1:focus { background-color: var(--midlightgrey-l1); }
+.hover-bg-midlightgrey-d1:hover,
+.hover-bg-midlightgrey-d1:focus { background-color: var(--midlightgrey-d1); }
+.hover-bg-midlightgrey-d2:hover,
+.hover-bg-midlightgrey-d2:focus { background-color: var(--midlightgrey-d2); }
+
+.hover-bg-lightgrey-l2:hover,
+.hover-bg-lightgrey-l2:focus { background-color: var(--lightgrey-l2); }
+.hover-bg-lightgrey-l1:hover,
+.hover-bg-lightgrey-l1:focus { background-color: var(--lightgrey-l1); }
+.hover-bg-lightgrey-d1:hover,
+.hover-bg-lightgrey-d1:focus { background-color: var(--lightgrey-d1); }
+.hover-bg-lightgrey-d2:hover,
+.hover-bg-lightgrey-d2:focus { background-color: var(--lightgrey-d2); }
+
+.hover-bg-whitegrey-l2:hover,
+.hover-bg-whitegrey-l2:focus { background-color: var(--whitegrey-l2); }
+.hover-bg-whitegrey-l1:hover,
+.hover-bg-whitegrey-l1:focus { background-color: var(--whitegrey-l1); }
+.hover-bg-whitegrey-d1:hover,
+.hover-bg-whitegrey-d1:focus { background-color: var(--whitegrey-d1); }
+.hover-bg-whitegrey-d2:hover,
+.hover-bg-whitegrey-d2:focus { background-color: var(--whitegrey-d2); }
diff --git a/ghost/admin/app/styles/spirit/_icons.css b/ghost/admin/app/styles/spirit/_icons.css
new file mode 100644
index 0000000000..5d37d81e1e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_icons.css
@@ -0,0 +1,519 @@
+/*
+
+ COLORING ICONS
+ ----------------------------------------
+ Base:
+ fill = filled icon
+ stroke = outlined icon
+
+ Value:
+ -(color) = color
+
+ See _colors.css for available colors.
+
+
+ ICON SIZES
+ ----------------------------------------
+ Base:
+ iw = icon width
+ ih = icon height
+
+ Value:
+ 1-6 = size scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+/* Icon fill colors */
+.filter-invert { filter: invert(100%); }
+
+.fill-blue path,
+.fill-blue g { fill: var(--blue); }
+.fill-green path,
+.fill-green g { fill: var(--green); }
+.fill-purple path,
+.fill-purple g { fill: var(--purple); }
+.fill-yellow path,
+.fill-yellow g { fill: var(--yellow); }
+.fill-red path,
+.fill-red g { fill: var(--red); }
+.fill-pink path,
+.fill-pink g { fill: var(--pink); }
+.fill-white path,
+.fill-white g { fill: var(--white); }
+
+.fill-white-10 path,
+.fill-white-10 g { fill: var(--white-10); }
+.fill-white-20 path,
+.fill-white-20 g { fill: var(--white-20); }
+.fill-white-30 path,
+.fill-white-30 g { fill: var(--white-30); }
+.fill-white-40 path,
+.fill-white-40 g { fill: var(--white-40); }
+.fill-white-50 path,
+.fill-white-50 g { fill: var(--white-50); }
+.fill-white-60 path,
+.fill-white-60 g { fill: var(--white-60); }
+.fill-white-70 path,
+.fill-white-70 g { fill: var(--white-70); }
+.fill-white-80 path,
+.fill-white-80 g { fill: var(--white-80); }
+.fill-white-90 path,
+.fill-white-90 g { fill: var(--white-90); }
+
+.fill-black-10 path,
+.fill-black-10 g { fill: var(--black-10); }
+.fill-black-20 path,
+.fill-black-20 g { fill: var(--black-20); }
+.fill-black-30 path,
+.fill-black-30 g { fill: var(--black-30); }
+.fill-black-40 path,
+.fill-black-40 g { fill: var(--black-40); }
+.fill-black-50 path,
+.fill-black-50 g { fill: var(--black-50); }
+.fill-black-60 path,
+.fill-black-60 g { fill: var(--black-60); }
+.fill-black-70 path,
+.fill-black-70 g { fill: var(--black-70); }
+.fill-black-80 path,
+.fill-black-80 g { fill: var(--black-80); }
+.fill-black-90 path,
+.fill-black-90 g { fill: var(--black-90); }
+
+.fill-darkgrey path,
+.fill-darkgrey g { fill: var(--darkgrey); }
+.fill-middarkgrey path,
+.fill-middarkgrey g { fill: var(--middarkgrey); }
+.fill-midgrey path,
+.fill-midgrey g { fill: var(--midgrey); }
+.fill-midlightgrey path,
+.fill-midlightgrey g { fill: var(--midlightgrey); }
+.fill-lightgrey path,
+.fill-lightgrey g { fill: var(--lightgrey); }
+.fill-whitegrey path,
+.fill-whitegrey g { fill: var(--whitegrey); }
+
+/* Shades */
+.fill-blue-l3 path,
+.fill-blue-l3 g { fill: var(--blue-l3); }
+.fill-blue-l2 path,
+.fill-blue-l2 g { fill: var(--blue-l2); }
+.fill-blue-l1 path,
+.fill-blue-l1 g { fill: var(--blue-l1); }
+.fill-blue-d1 path,
+.fill-blue-d1 g { fill: var(--blue-d1); }
+.fill-blue-d2 path,
+.fill-blue-d2 g { fill: var(--blue-d2); }
+.fill-blue-d3 path,
+.fill-blue-d3 g { fill: var(--blue-d3); }
+
+.fill-green-l3 path,
+.fill-green-l3 g { fill: var(--green-l3); }
+.fill-green-l2 path,
+.fill-green-l2 g { fill: var(--green-l2); }
+.fill-green-l1 path,
+.fill-green-l1 g { fill: var(--green-l1); }
+.fill-green-d1 path,
+.fill-green-d1 g { fill: var(--green-d1); }
+.fill-green-d2 path,
+.fill-green-d2 g { fill: var(--green-d2); }
+.fill-green-d3 path,
+.fill-green-d3 g { fill: var(--green-d3); }
+
+.fill-purple-l3 path,
+.fill-purple-l3 g { fill: var(--purple-l3); }
+.fill-purple-l2 path,
+.fill-purple-l2 g { fill: var(--purple-l2); }
+.fill-purple-l1 path,
+.fill-purple-l1 g { fill: var(--purple-l1); }
+.fill-purple-d1 path,
+.fill-purple-d1 g { fill: var(--purple-d1); }
+.fill-purple-d2 path,
+.fill-purple-d2 g { fill: var(--purple-d2); }
+.fill-purple-d3 path,
+.fill-purple-d3 g { fill: var(--purple-d3); }
+
+.fill-yellow-l3 path,
+.fill-yellow-l3 g { fill: var(--yellow-l3); }
+.fill-yellow-l2 path,
+.fill-yellow-l2 g { fill: var(--yellow-l2); }
+.fill-yellow-l1 path,
+.fill-yellow-l1 g { fill: var(--yellow-l1); }
+.fill-yellow-d1 path,
+.fill-yellow-d1 g { fill: var(--yellow-d1); }
+.fill-yellow-d2 path,
+.fill-yellow-d2 g { fill: var(--yellow-d2); }
+.fill-yellow-d3 path,
+.fill-yellow-d3 g { fill: var(--yellow-d3); }
+
+.fill-red-l3 path,
+.fill-red-l3 g { fill: var(--red-l3); }
+.fill-red-l2 path,
+.fill-red-l2 g { fill: var(--red-l2); }
+.fill-red-l1 path,
+.fill-red-l1 g { fill: var(--red-l1); }
+.fill-red-d1 path,
+.fill-red-d1 g { fill: var(--red-d1); }
+.fill-red-d2 path,
+.fill-red-d2 g { fill: var(--red-d2); }
+.fill-red-d3 path,
+.fill-red-d3 g { fill: var(--red-d3); }
+
+.fill-pink-l3 path,
+.fill-pink-l3 g { fill: var(--pink-l3); }
+.fill-pink-l2 path,
+.fill-pink-l2 g { fill: var(--pink-l2); }
+.fill-pink-l1 path,
+.fill-pink-l1 g { fill: var(--pink-l1); }
+.fill-pink-d1 path,
+.fill-pink-d1 g { fill: var(--pink-d1); }
+.fill-pink-d2 path,
+.fill-pink-d2 g { fill: var(--pink-d2); }
+.fill-pink-d3 path,
+.fill-pink-d3 g { fill: var(--pink-d3); }
+
+.fill-darkgrey-l2 path,
+.fill-darkgrey-l2 g { fill: var(--darkgrey-l2); }
+.fill-darkgrey-l1 path,
+.fill-darkgrey-l1 g { fill: var(--darkgrey-l1); }
+.fill-darkgrey-d1 path,
+.fill-darkgrey-d1 g { fill: var(--darkgrey-d1); }
+.fill-darkgrey-d2 path,
+.fill-darkgrey-d2 g { fill: var(--darkgrey-d2); }
+
+.fill-middarkgrey-l2 path,
+.fill-middarkgrey-l2 g { fill: var(--middarkgrey-l2); }
+.fill-middarkgrey-l1 path,
+.fill-middarkgrey-l1 g { fill: var(--middarkgrey-l1); }
+.fill-middarkgrey-d1 path,
+.fill-middarkgrey-d1 g { fill: var(--middarkgrey-d1); }
+.fill-middarkgrey-d2 path,
+.fill-middarkgrey-d2 g { fill: var(--middarkgrey-d2); }
+
+.fill-midgrey-l2 path,
+.fill-midgrey-l2 g { fill: var(--midgrey-l2); }
+.fill-midgrey-l1 path,
+.fill-midgrey-l1 g { fill: var(--midgrey-l1); }
+.fill-midgrey-d1 path,
+.fill-midgrey-d1 g { fill: var(--midgrey-d1); }
+.fill-midgrey-d2 path,
+.fill-midgrey-d2 g { fill: var(--midgrey-d2); }
+
+.fill-midlightgrey-l2 path,
+.fill-midlightgrey-l2 g { fill: var(--midlightgrey-l2); }
+.fill-midlightgrey-l1 path,
+.fill-midlightgrey-l1 g { fill: var(--midlightgrey-l1); }
+.fill-midlightgrey-d1 path,
+.fill-midlightgrey-d1 g { fill: var(--midlightgrey-d1); }
+.fill-midlightgrey-d2 path,
+.fill-midlightgrey-d2 g { fill: var(--midlightgrey-d2); }
+
+.fill-lightgrey-l2 path,
+.fill-lightgrey-l2 g { fill: var(--lightgrey-l2); }
+.fill-lightgrey-l1 path,
+.fill-lightgrey-l1 g { fill: var(--lightgrey-l1); }
+.fill-lightgrey-d1 path,
+.fill-lightgrey-d1 g { fill: var(--lightgrey-d1); }
+.fill-lightgrey-d2 path,
+.fill-lightgrey-d2 g { fill: var(--lightgrey-d2); }
+
+.fill-whitegrey-l2 path,
+.fill-whitegrey-l2 g { fill: var(--whitegrey-l2); }
+.fill-whitegrey-l1 path,
+.fill-whitegrey-l1 g { fill: var(--whitegrey-l1); }
+.fill-whitegrey-d1 path,
+.fill-whitegrey-d1 g { fill: var(--whitegrey-d1); }
+.fill-whitegrey-d2 path,
+.fill-whitegrey-d2 g { fill: var(--whitegrey-d2); }
+
+.fill-color-inherit path,
+.fill-color-inherit g { fill: inherit; }
+
+.fill-white path,
+.fill-white g { fill: var(--white) }
+
+
+.stroke-blue path,
+.stroke-blue path path,
+.stroke-blue g { stroke: var(--blue); }
+.stroke-green path,
+.stroke-green g { stroke: var(--green); }
+.stroke-purple path,
+.stroke-purple g { stroke: var(--purple); }
+.stroke-yellow path,
+.stroke-yellow g { stroke: var(--yellow); }
+.stroke-red path,
+.stroke-red g { stroke: var(--red); }
+.stroke-pink path,
+.stroke-pink g { stroke: var(--pink); }
+.stroke-white path,
+.stroke-white g { stroke: var(--white); }
+
+.stroke-white-10 path,
+.stroke-white-10 g { stroke: var(--white-10); }
+.stroke-white-20 path,
+.stroke-white-20 g { stroke: var(--white-20); }
+.stroke-white-30 path,
+.stroke-white-30 g { stroke: var(--white-30); }
+.stroke-white-40 path,
+.stroke-white-40 g { stroke: var(--white-40); }
+.stroke-white-50 path,
+.stroke-white-50 g { stroke: var(--white-50); }
+.stroke-white-60 path,
+.stroke-white-60 g { stroke: var(--white-60); }
+.stroke-white-70 path,
+.stroke-white-70 g { stroke: var(--white-70); }
+.stroke-white-80 path,
+.stroke-white-80 g { stroke: var(--white-80); }
+.stroke-white-90 path,
+.stroke-white-90 g { stroke: var(--white-90); }
+
+.stroke-black-10 path,
+.stroke-black-10 g { stroke: var(--black-10); }
+.stroke-black-20 path,
+.stroke-black-20 g { stroke: var(--black-20); }
+.stroke-black-30 path,
+.stroke-black-30 g { stroke: var(--black-30); }
+.stroke-black-40 path,
+.stroke-black-40 g { stroke: var(--black-40); }
+.stroke-black-50 path,
+.stroke-black-50 g { stroke: var(--black-50); }
+.stroke-black-60 path,
+.stroke-black-60 g { stroke: var(--black-60); }
+.stroke-black-70 path,
+.stroke-black-70 g { stroke: var(--black-70); }
+.stroke-black-80 path,
+.stroke-black-80 g { stroke: var(--black-80); }
+.stroke-black-90 path,
+.stroke-black-90 g { stroke: var(--black-90); }
+
+.stroke-darkgrey path,
+.stroke-darkgrey g { stroke: var(--darkgrey); }
+.stroke-middarkgrey path,
+.stroke-middarkgrey g { stroke: var(--middarkgrey); }
+.stroke-midgrey path,
+.stroke-midgrey g { stroke: var(--midgrey); }
+.stroke-midlightgrey path,
+.stroke-midlightgrey g { stroke: var(--midlightgrey); }
+.stroke-lightgrey path,
+.stroke-lightgrey g { stroke: var(--lightgrey); }
+.stroke-whitegrey path,
+.stroke-whitegrey g { stroke: var(--whitegrey); }
+
+/* Shades */
+.stroke-blue-l3 path,
+.stroke-blue-l3 g { stroke: var(--blue-l3); }
+.stroke-blue-l2 path,
+.stroke-blue-l2 g { stroke: var(--blue-l2); }
+.stroke-blue-l1 path,
+.stroke-blue-l1 g { stroke: var(--blue-l1); }
+.stroke-blue-d1 path,
+.stroke-blue-d1 g { stroke: var(--blue-d1); }
+.stroke-blue-d2 path,
+.stroke-blue-d2 g { stroke: var(--blue-d2); }
+.stroke-blue-d3 path,
+.stroke-blue-d3 g { stroke: var(--blue-d3); }
+
+.stroke-green-l3 path,
+.stroke-green-l3 g { stroke: var(--green-l3); }
+.stroke-green-l2 path,
+.stroke-green-l2 g { stroke: var(--green-l2); }
+.stroke-green-l1 path,
+.stroke-green-l1 g { stroke: var(--green-l1); }
+.stroke-green-d1 path,
+.stroke-green-d1 g { stroke: var(--green-d1); }
+.stroke-green-d2 path,
+.stroke-green-d2 g { stroke: var(--green-d2); }
+.stroke-green-d3 path,
+.stroke-green-d3 g { stroke: var(--green-d3); }
+
+.stroke-purple-l3 path,
+.stroke-purple-l3 g { stroke: var(--purple-l3); }
+.stroke-purple-l2 path,
+.stroke-purple-l2 g { stroke: var(--purple-l2); }
+.stroke-purple-l1 path,
+.stroke-purple-l1 g { stroke: var(--purple-l1); }
+.stroke-purple-d1 path,
+.stroke-purple-d1 g { stroke: var(--purple-d1); }
+.stroke-purple-d2 path,
+.stroke-purple-d2 g { stroke: var(--purple-d2); }
+.stroke-purple-d3 path,
+.stroke-purple-d3 g { stroke: var(--purple-d3); }
+
+.stroke-yellow-l3 path,
+.stroke-yellow-l3 g { stroke: var(--yellow-l3); }
+.stroke-yellow-l2 path,
+.stroke-yellow-l2 g { stroke: var(--yellow-l2); }
+.stroke-yellow-l1 path,
+.stroke-yellow-l1 g { stroke: var(--yellow-l1); }
+.stroke-yellow-d1 path,
+.stroke-yellow-d1 g { stroke: var(--yellow-d1); }
+.stroke-yellow-d2 path,
+.stroke-yellow-d2 g { stroke: var(--yellow-d2); }
+.stroke-yellow-d3 path,
+.stroke-yellow-d3 g { stroke: var(--yellow-d3); }
+
+.stroke-red-l3 path,
+.stroke-red-l3 g { stroke: var(--red-l3); }
+.stroke-red-l2 path,
+.stroke-red-l2 g { stroke: var(--red-l2); }
+.stroke-red-l1 path,
+.stroke-red-l1 g { stroke: var(--red-l1); }
+.stroke-red-d1 path,
+.stroke-red-d1 g { stroke: var(--red-d1); }
+.stroke-red-d2 path,
+.stroke-red-d2 g { stroke: var(--red-d2); }
+.stroke-red-d3 path,
+.stroke-red-d3 g { stroke: var(--red-d3); }
+
+.stroke-pink-l3 path,
+.stroke-pink-l3 g { stroke: var(--pink-l3); }
+.stroke-pink-l2 path,
+.stroke-pink-l2 g { stroke: var(--pink-l2); }
+.stroke-pink-l1 path,
+.stroke-pink-l1 g { stroke: var(--pink-l1); }
+.stroke-pink-d1 path,
+.stroke-pink-d1 g { stroke: var(--pink-d1); }
+.stroke-pink-d2 path,
+.stroke-pink-d2 g { stroke: var(--pink-d2); }
+.stroke-pink-d3 path,
+.stroke-pink-d3 g { stroke: var(--pink-d3); }
+
+.stroke-darkgrey-l2 path,
+.stroke-darkgrey-l2 g { stroke: var(--darkgrey-l2); }
+.stroke-darkgrey-l1 path,
+.stroke-darkgrey-l1 g { stroke: var(--darkgrey-l1); }
+.stroke-darkgrey-d1 path,
+.stroke-darkgrey-d1 g { stroke: var(--darkgrey-d1); }
+.stroke-darkgrey-d2 path,
+.stroke-darkgrey-d2 g { stroke: var(--darkgrey-d2); }
+
+.stroke-middarkgrey-l2 path,
+.stroke-middarkgrey-l2 g { stroke: var(--middarkgrey-l2); }
+.stroke-middarkgrey-l1 path,
+.stroke-middarkgrey-l1 g { stroke: var(--middarkgrey-l1); }
+.stroke-middarkgrey-d1 path,
+.stroke-middarkgrey-d1 g { stroke: var(--middarkgrey-d1); }
+.stroke-middarkgrey-d2 path,
+.stroke-middarkgrey-d2 g { stroke: var(--middarkgrey-d2); }
+
+.stroke-midgrey-l2 path,
+.stroke-midgrey-l2 g { stroke: var(--midgrey-l2); }
+.stroke-midgrey-l1 path,
+.stroke-midgrey-l1 g { stroke: var(--midgrey-l1); }
+.stroke-midgrey-d1 path,
+.stroke-midgrey-d1 g { stroke: var(--midgrey-d1); }
+.stroke-midgrey-d2 path,
+.stroke-midgrey-d2 g { stroke: var(--midgrey-d2); }
+
+.stroke-midlightgrey-l2 path,
+.stroke-midlightgrey-l2 g { stroke: var(--midlightgrey-l2); }
+.stroke-midlightgrey-l1 path,
+.stroke-midlightgrey-l1 g { stroke: var(--midlightgrey-l1); }
+.stroke-midlightgrey-d1 path,
+.stroke-midlightgrey-d1 g { stroke: var(--midlightgrey-d1); }
+.stroke-midlightgrey-d2 path,
+.stroke-midlightgrey-d2 g { stroke: var(--midlightgrey-d2); }
+
+.stroke-lightgrey-l2 path,
+.stroke-lightgrey-l2 g { stroke: var(--lightgrey-l2); }
+.stroke-lightgrey-l1 path,
+.stroke-lightgrey-l1 g { stroke: var(--lightgrey-l1); }
+.stroke-lightgrey-d1 path,
+.stroke-lightgrey-d1 g { stroke: var(--lightgrey-d1); }
+.stroke-lightgrey-d2 path,
+.stroke-lightgrey-d2 g { stroke: var(--lightgrey-d2); }
+
+.stroke-whitegrey-l2 path,
+.stroke-whitegrey-l2 g { stroke: var(--whitegrey-l2); }
+.stroke-whitegrey-l1 path,
+.stroke-whitegrey-l1 g { stroke: var(--whitegrey-l1); }
+.stroke-whitegrey-d1 path,
+.stroke-whitegrey-d1 g { stroke: var(--whitegrey-d1); }
+.stroke-whitegrey-d2 path,
+.stroke-whitegrey-d2 g { stroke: var(--whitegrey-d2); }
+
+.stroke-color-inherit path,
+.stroke-color-inherit g { stroke: inherit; }
+
+.stroke-white path,
+.stroke-white g { stroke: var(--white) }
+
+
+/* Custom icon sizes */
+.ih1 { height: .8rem; }
+.iw1 { width: .8rem; }
+
+.ih2 { height: 1.2rem; }
+.iw2 { width: 1.2rem; }
+
+.ih3 { height: 1.6rem; }
+.iw3 { width: 1.6rem; }
+
+.ih4 { height: 2.0rem; }
+.iw4 { width: 2.0rem; }
+
+.ih5 { height: 2.4rem; }
+.iw5 { width: 2.4rem; }
+
+.ih6 { height: 3.2rem; }
+.iw6 { width: 3.2rem; }
+
+/* Custom icon stroke sizes */
+.i-strokew--1 path {
+ stroke-width: 1px;
+}
+
+.i-strokew--2 path {
+ stroke-width: 2px;
+}
+
+
+@media (--breakpoint-not-small) {
+ .ih1-ns { height: .8rem; }
+ .iw1-ns { width: .8rem; }
+ .ih2-ns { height: 1.2rem; }
+ .iw2-ns { width: 1.2rem; }
+ .ih3-ns { height: 1.6rem; }
+ .iw3-ns { width: 1.6rem; }
+ .ih4-ns { height: 2.0rem; }
+ .iw4-ns { width: 2.0rem; }
+ .ih5-ns { height: 2.4rem; }
+ .iw5-ns { width: 2.4rem; }
+ .ih6-ns { height: 3.2rem; }
+ .iw6-ns { width: 3.2rem; }
+}
+
+@media (--breakpoint-medium) {
+ .ih1-m { height: .8rem; }
+ .iw1-m { width: .8rem; }
+ .ih2-m { height: 1.2rem; }
+ .iw2-m { width: 1.2rem; }
+ .ih3-m { height: 1.6rem; }
+ .iw3-m { width: 1.6rem; }
+ .ih4-m { height: 2.0rem; }
+ .iw4-m { width: 2.0rem; }
+ .ih5-m { height: 2.4rem; }
+ .iw5-m { width: 2.4rem; }
+ .ih6-m { height: 3.2rem; }
+ .iw6-m { width: 3.2rem; }
+}
+
+@media (--breakpoint-large) {
+ .ih1-l { height: .8rem; }
+ .iw1-l { width: .8rem; }
+ .ih2-l { height: 1.2rem; }
+ .iw2-l { width: 1.2rem; }
+ .ih3-l { height: 1.6rem; }
+ .iw3-l { width: 1.6rem; }
+ .ih4-l { height: 2.0rem; }
+ .iw4-l { width: 2.0rem; }
+ .ih5-l { height: 2.4rem; }
+ .iw5-l { width: 2.4rem; }
+ .ih6-l { height: 3.2rem; }
+ .iw6-l { width: 3.2rem; }
+}
diff --git a/ghost/admin/app/styles/spirit/_images.css b/ghost/admin/app/styles/spirit/_images.css
new file mode 100644
index 0000000000..73380eacd7
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_images.css
@@ -0,0 +1,3 @@
+/* Responsive images! */
+
+img { max-width: 100%; }
diff --git a/ghost/admin/app/styles/spirit/_koenig-dark.css b/ghost/admin/app/styles/spirit/_koenig-dark.css
new file mode 100644
index 0000000000..9538ee33fb
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_koenig-dark.css
@@ -0,0 +1,96 @@
+/* Koenig overrides for dark theme
+/* -------------------------------------------------------------------- */
+
+
+/* Action bar */
+
+.kg-card-left-border {
+ border-left-color: var(--lightgrey-d1);
+}
+
+.kg-action-bar {
+ background: var(--extra-darkgrey);
+ border: 1px solid var(--whitegrey);
+}
+
+.kg-action-bar:after {
+ border-top-color: var(--extra-darkgrey);
+}
+
+.kg-action-bar:before {
+ position: absolute;
+ top: 40px;
+ left: calc(50% - 10px);
+ width: 0;
+ border-top: 10px solid var(--whitegrey);
+ border-right: 10px solid transparent;
+ border-left: 10px solid transparent;
+ content: "";
+ font-size: 0;
+ line-height: 0;
+}
+
+.kg-action-bar-divider {
+ background: var(--lightgrey);
+}
+
+.kg-action-bar .fill-white g,
+.kg-action-bar .fill-white path {
+ fill: var(--darkgrey);
+}
+
+
+/* Card menu */
+.koenig-cardmenu {
+ background: var(--extra-darkgrey);
+ box-shadow: 0 0 0 1px rgba(99,114,130,.16), 0 8px 16px rgba(27,39,51,.08);
+}
+
+.kg-cardmenu-card-hover div {
+ color: var(--middarkgrey-l1);
+}
+
+.kg-cardmenu-card-selected,
+.kg-cardmenu-card-hover:hover {
+ background: var(--whitegrey);
+}
+
+.kg-card-type-codepen g,
+.kg-card-type-codepen svg,
+.kg-card-type-unsplash g,
+.kg-card-type-unsplash svg {
+ fill: var(--darkgrey);
+}
+
+
+/* Card styles */
+
+.koenig-editor__editor pre {
+ border: none;
+}
+
+.koenig-editor .gh-markdown-editor .editor-toolbar {
+ background: color-mod(var(--whitegrey) l(-2%) s(+2%));
+ border-top-color: var(--whitegrey-d2);
+}
+
+.koenig-card-html--editor .CodeMirror {
+ background: var(--white);
+}
+
+.kg-input-bar:after {
+ border-top-color: var(--lightgrey);
+}
+
+.kg-link-toolbar {
+ background: var(--lightgrey);
+}
+
+.kg-link-toolbar a {
+ color: var(--middarkgrey);
+}
+
+.kg-link-toolbar svg g,
+.kg-link-toolbar svg path {
+ fill: var(--middarkgrey);
+}
diff --git a/ghost/admin/app/styles/spirit/_koenig.css b/ghost/admin/app/styles/spirit/_koenig.css
new file mode 100644
index 0000000000..becf037280
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_koenig.css
@@ -0,0 +1,922 @@
+/* Content Styles
+/*
+/* We use only margin-top to set the vertical spacings. The styles below
+/* set up the margin for content pairs (e.g. paragraph preceded by a heading).
+/* -------------------------------------------------------------------- */
+
+/* Global Koenig content styles
+/* -------------------------------------------------------------------- */
+.koenig-editor__editor {
+ font-family: var(--font-family);
+ font-size: 1.7rem;
+ font-weight: 200;
+ letter-spacing: 0.1px;
+ color: var(--darkgrey);
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+}
+
+.koenig-editor__editor.__has-no-content:after {
+ font-family: georgia,serif;
+ font-weight: 300;
+ letter-spacing: .02rem;
+ line-height: 1.6em;
+ font-size: 2rem;
+ color: var(--midgrey-l2);
+}
+
+.koenig-editor__editor video {
+ max-width: 100%;
+}
+
+/* Reset margins */
+
+.koenig-editor__editor p,
+.koenig-editor__editor h1,
+.koenig-editor__editor h2,
+.koenig-editor__editor h3,
+.koenig-editor__editor h4,
+.koenig-editor__editor h5,
+.koenig-editor__editor h6,
+.koenig-editor__editor blockquote {
+ margin: 1.6rem 0 0;
+ min-width: 100%;
+ max-width: 100%;
+}
+
+
+/* Heading
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor h1,
+.koenig-editor__editor h2,
+.koenig-editor__editor h3,
+.koenig-editor__editor h4,
+.koenig-editor__editor h5,
+.koenig-editor__editor h6 {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
+ font-weight: 700;
+}
+
+.koenig-editor__editor h1 {
+ font-size: 3.3rem;
+ line-height: 1.4em;
+ letter-spacing: .04rem;
+}
+
+.koenig-editor__editor h2 {
+ font-size: 2.8rem;
+ line-height: 1.4em;
+ letter-spacing: .04rem;
+}
+
+.koenig-editor__editor h3 {
+ font-size: 2.3rem;
+ line-height: 1.6em;
+ letter-spacing: .04rem;
+}
+
+.koenig-editor__editor h4 {
+ font-size: 2.0rem;
+ line-height: 1.4em;
+ letter-spacing: .04rem;
+}
+
+.koenig-editor__editor h5 {
+ font-size: 1.9rem;
+ line-height: 1.4em;
+ letter-spacing: .06rem;
+}
+
+.koenig-editor__editor h6 {
+ font-size: 1.75rem;
+ line-height: 1.6em;
+ letter-spacing: .04rem;
+}
+
+
+
+.koenig-editor__editor p + h1,
+.koenig-editor__editor p + h2,
+.koenig-editor__editor p + h3,
+.koenig-editor__editor p + h4,
+.koenig-editor__editor p + h5,
+.koenig-editor__editor p + h6,
+
+.koenig-editor__editor blockquote + h1,
+.koenig-editor__editor blockquote + h2,
+.koenig-editor__editor blockquote + h3,
+.koenig-editor__editor blockquote + h4,
+.koenig-editor__editor blockquote + h5,
+.koenig-editor__editor blockquote + h6,
+
+.koenig-editor__editor ul + h1,
+.koenig-editor__editor ul + h2,
+.koenig-editor__editor ul + h3,
+.koenig-editor__editor ul + h4,
+.koenig-editor__editor ul + h5,
+.koenig-editor__editor ul + h6,
+
+.koenig-editor__editor ol + h1,
+.koenig-editor__editor ol + h2,
+.koenig-editor__editor ol + h3,
+.koenig-editor__editor ol + h4,
+.koenig-editor__editor ol + h5,
+.koenig-editor__editor ol + h6 {
+ margin: 4.8rem 0 0;
+}
+
+/* Heading 1 vertical rhythm */
+
+.koenig-editor__editor h1 + h1 {
+ margin: 1.4rem 0 0;
+}
+
+.koenig-editor__editor h2 + h1,
+.koenig-editor__editor h3 + h1 {
+ margin: 1.0rem 0 0;
+}
+
+.koenig-editor__editor h4 + h1,
+.koenig-editor__editor h5 + h1 {
+ margin: 0.8rem 0 0;
+}
+
+.koenig-editor__editor h6 + h1 {
+ margin: 0.6rem 0 0;
+}
+
+.koenig-editor__editor div + h1 {
+ margin: 4.8rem 0 0;
+}
+
+
+/* Heading 2 */
+
+.koenig-editor__editor h1 + h2 {
+ margin: 1.6rem 0 0;
+}
+
+.koenig-editor__editor h2 + h2,
+.koenig-editor__editor h3 + h2,
+.koenig-editor__editor h4 + h2,
+.koenig-editor__editor h5 + h2 {
+ margin: 0.8rem 0 0;
+}
+
+.koenig-editor__editor h6 + h2 {
+ margin: 0.4rem 0 0;
+}
+
+.koenig-editor__editor div + h2 {
+ margin: 4.8rem 0 0;
+}
+
+
+/* Heading 3 - 6 (share common styles) */
+
+.koenig-editor__editor h1 + h3,
+.koenig-editor__editor h2 + h3,
+
+.koenig-editor__editor h1 + h4,
+.koenig-editor__editor h2 + h4,
+
+.koenig-editor__editor h1 + h5,
+.koenig-editor__editor h2 + h5,
+
+.koenig-editor__editor h1 + h6,
+.koenig-editor__editor h2 + h6 {
+ margin: 1.2rem 0 0;
+}
+
+.koenig-editor__editor h3 + h4 {
+ margin: 0.8rem 0 0;
+}
+
+.koenig-editor__editor h3 + h3,
+.koenig-editor__editor h4 + h3,
+.koenig-editor__editor h5 + h3,
+
+.koenig-editor__editor h4 + h4,
+.koenig-editor__editor h5 + h4,
+
+.koenig-editor__editor h3 + h5,
+.koenig-editor__editor h4 + h5,
+.koenig-editor__editor h5 + h5,
+
+.koenig-editor__editor h3 + h6,
+.koenig-editor__editor h4 + h6 {
+ margin: 0.8rem 0 0;
+}
+
+.koenig-editor__editor h5 + h6 {
+ margin: 0.4rem 0 0;
+}
+
+.koenig-editor__editor h6 + h3,
+.koenig-editor__editor h6 + h4,
+.koenig-editor__editor h6 + h5,
+.koenig-editor__editor h6 + h6 {
+ margin: 0.4rem 0 0;
+}
+
+.koenig-editor__editor div + h3,
+.koenig-editor__editor div + h4,
+.koenig-editor__editor div + h5,
+.koenig-editor__editor div + h6 {
+ margin: 2.8rem 0 0;
+}
+
+
+/* Paragraph
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor p,
+.koenig-editor__editor blockquote,
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ol
+ {
+ font-family: georgia,serif;
+ font-weight: 300;
+ letter-spacing: .02rem;
+ line-height: 1.6em;
+ font-size: 2rem;
+}
+
+.koenig-editor__editor h1 + p {
+ margin: 1.2rem 0 0;
+}
+
+.koenig-editor__editor h2 + p {
+ margin: 0.8rem 0 0;
+}
+
+.koenig-editor__editor h3 + p,
+.koenig-editor__editor h4 + p,
+.koenig-editor__editor h5 + p,
+.koenig-editor__editor h6 + p {
+ margin: .8rem 0 0;
+}
+
+.koenig-editor__editor p + p,
+.koenig-editor__editor blockquote + p,
+.koenig-editor__editor ul + p,
+.koenig-editor__editor ol + p
+ {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */
+ margin: 2.8rem 0 0;
+}
+
+
+/* Lists
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ol {
+ margin: 1.6rem 0 0;
+ padding: 0;
+ min-width: 100%;
+ max-width: 100%;
+}
+
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li {
+ margin: 1.0rem 0 0 2.4rem;
+ padding: 0 0 0 0.6rem;
+ line-height: 3.2rem;
+}
+
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) li:first-child {
+ margin: 0 0 0 2.4rem;
+}
+
+.koenig-editor__editor ol li {
+ margin: 1.0rem 0 0 2.2rem;
+ padding: 0 0 0 0.8rem;
+ line-height: 3.2rem;
+}
+
+.koenig-editor__editor ol li:first-child {
+ margin: 0 0 0 2.2rem;
+}
+
+.koenig-editor__editor p + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor p + ol,
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) + ol,
+.koenig-editor__editor ol + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ol + ol,
+.koenig-editor__editor blockquote + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor blockquote + ol {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-editor__editor h1 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h1 + ol,
+.koenig-editor__editor h2 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h2 + ol {
+ margin: .8rem 0 0;
+}
+.koenig-editor__editor h3 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h3 + ol,
+.koenig-editor__editor h4 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h4 + ol,
+.koenig-editor__editor h5 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h5 + ol,
+.koenig-editor__editor h6 + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor h6 + ol {
+ margin: 1.2rem 0 0;
+}
+
+.koenig-editor__editor div + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor div + ol {
+ margin: 2.8rem 0 0;
+}
+
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar) ol,
+.koenig-editor__editor ol ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor ol ol {
+ margin: 1.0rem 0 2rem;
+}
+
+
+/* Cards in general
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor > div {
+ line-height: 0;
+ min-width: 100%;
+}
+
+.koenig-editor__editor > div + div {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-editor__editor > p + div,
+.koenig-editor__editor > blockquote + div,
+.koenig-editor__editor > ul + div,
+.koenig-editor__editor > ol + div {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-editor__editor > h1 + div {
+ margin: 2.8rem 0 0;
+}
+
+.koenig-editor__editor > h2 + div,
+.koenig-editor__editor > h3 + div,
+.koenig-editor__editor > h4 + div,
+.koenig-editor__editor > h5 + div,
+.koenig-editor__editor > h6 + div {
+ margin: 1.6rem 0 0;
+}
+
+.koenig-editor__editor hr {
+ margin: 1.6rem 0;
+}
+
+
+/* Links
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor a {
+ color: var(--darkgrey);
+ text-decoration: none;
+ box-shadow: 0 1px 0 var(--white), 0 2px 0 var(--blue);
+}
+
+
+/* Blockquote
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor blockquote p {
+ margin: 0;
+}
+
+.koenig-editor__editor blockquote {
+ border-left: 0.25rem solid var(--blue);
+ padding-left: 2.0rem;
+ font-style: italic;
+}
+
+.koenig-editor__editor h1 + blockquote,
+.koenig-editor__editor h2 + blockquote {
+ margin: .8rem 0 0;
+}
+
+.koenig-editor__editor h3 + blockquote,
+.koenig-editor__editor h4 + blockquote,
+.koenig-editor__editor h5 + blockquote,
+.koenig-editor__editor h6 + blockquote {
+ margin: .4rem 0 0;
+}
+
+.koenig-editor__editor p + blockquote,
+.koenig-editor__editor blockquote + blockquote {
+ margin: 3.2rem 0 0;
+}
+
+
+/* Mobiledoc cards can be selected by their wrapper div element */
+.koenig-editor__editor div + blockquote {
+ margin: 2.8rem 0 0;
+}
+
+
+/* Code
+/* ------------------------------------------------------------------ */
+.koenig-card-html--editor .CodeMirror,
+.koenig-editor__editor code,
+.koenig-editor__editor pre {
+ font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
+ background: color-mod(var(--lightgrey) lightness(+4%));
+ border: 1px solid var(--lightgrey);
+}
+
+.koenig-editor__editor code {
+ border-radius: 2px;
+ color: var(--pink);
+ font-size: 1.65rem;
+ line-height: 1em;
+ padding: .4rem .4rem .2rem;
+ vertical-align: middle;
+ white-space: pre-wrap;
+}
+
+.koenig-editor__editor pre code {
+ border: none;
+ font-size: 1.6rem;
+ color: var(--pink);
+ padding: 0;
+}
+
+.koenig-editor__editor pre {
+ line-height: 1.4em;
+ padding: .8rem .8rem .4rem;
+ border-radius: .4rem;
+ font-size: 1.6rem;
+ overflow: auto;
+ white-space: pre;
+ width: 100%;
+ color: var(--darkgrey);
+}
+
+.koenig-editor__editor pre.js-embed-placeholder,
+.koenig-editor__editor pre.iframe-embed-placeholder {
+ margin: 0.4rem 0 !important;
+ color: var(--midgrey);
+}
+
+
+/* Markdown
+/* --------------------------------------------------------------- */
+
+/*
+ Resetting the default top margin of the redered markdown content. This is
+ needed because the top margin is applied to the card itself. It's the 2nd
+ child because there's an SVG at the first place.
+ NOTE: this is not too elegant.
+*/
+
+.koenig-card-markdown-rendered > :nth-child(2) {
+ margin: 0;
+}
+
+.koenig-card-markdown-rendered hr {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-card-markdown-rendered hr + p {
+ margin: 3.2rem 0 0;
+}
+
+.koenig-editor .gh-markdown-editor pre {
+ border: none;
+ background: none;
+ white-space: normal;
+}
+
+.koenig-editor .gh-markdown-editor a {
+ box-shadow: none;
+}
+
+
+/* HTML editor
+/* --------------------------------------------------------------- */
+
+.koenig-card-html-rendered {
+ line-height: 1.8em;
+}
+
+.koenig-card-html-rendered > :first-child {
+ margin: 0;
+}
+
+.koenig-card-html--editor pre {
+ border: none;
+ background: none;
+ white-space: pre-line;
+ padding: 0 .8rem;
+ line-height: 1.4em;
+}
+
+.koenig-card-html--editor .CodeMirror {
+ border: none;
+ margin: 0 -8px;
+}
+
+.koenig-card-html--editor .CodeMirror-linenumber {
+ padding: 12px 3px 0 5px;
+ color: var(--midlightgrey-l2);
+}
+
+.koenig-card-html--editor .CodeMirror-gutters {
+ border: none;
+ background: none;
+}
+
+
+/* Images
+/* --------------------------------------------------------------- */
+
+.koenig-breakout-wide {
+ margin: auto calc(50% - 50vw - .8rem);
+ width: calc(65vw + 2px);
+ min-width: calc(100% + 18rem);
+ transform: translateX(calc(50vw - 50% + .8rem));
+}
+
+@media (min-width: 500px) and (max-width: 1080px) {
+ .koenig-breakout-wide {
+ min-width: calc(100% + 10rem);
+ }
+}
+
+@media (max-width: 500px) {
+ .koenig-breakout-wide {
+ min-width: calc(100% + 3.6rem);
+ }
+}
+
+.koenig-breakout-full {
+ margin-left: calc(50% - 50vw);
+ margin-right: calc(50% - 50vw);
+}
+
+.mw-100vw.kg-image-full--sidebar {
+ max-width: calc(100vw - 280px);
+}
+
+/* Table
+/* --------------------------------------------------------------- */
+
+.koenig-editor__editor table {
+ font-size: 1.75rem;
+ margin: 0;
+ font-family: georgia,serif;
+ letter-spacing: .02rem;
+ line-height: 1.6em;
+}
+
+.koenig-editor__editor table tr td,
+.koenig-editor__editor table tr th {
+ vertical-align: top;
+ border-bottom: 1px solid var(--lightgrey);
+}
+
+/* Captions
+/* --------------------------------------------------------------- */
+
+/* override `.koenig-editor__editor p` by inheriting styles from parent figcaption classes */
+.koenig-editor__editor figcaption p {
+ margin: 0;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
+}
+
+.koenig-basic-html-input__editor code {
+ font-size: 1.4rem;
+}
+
+/*
+/* UI Styles
+/*
+/* Styles that extend Spirit classes.
+/* -------------------------------------------------------------------- */
+.kg-card-left-border {
+ border-left-color: var(--lightgrey);
+}
+
+.kg-card-hover:hover {
+ box-shadow: 0 0 0 1px var(--blue);
+}
+
+.kg-card-selected,
+.kg-card-selected:hover
+ {
+ box-shadow: 0 0 0 2px var(--blue);
+}
+
+/* Force a 16:10 aspect ratio */
+.kg-media-placeholder:before {
+ content: "";
+ float: left;
+ padding-bottom: 62.5%;
+}
+
+.kg-media-placeholder:after {
+ clear: left;
+ content: " ";
+ display: table;
+}
+
+.kg-image-button svg {
+ transform: scale(1.0);
+ transition: var(--animation-speed-normal) ease-out;
+ opacity: 0.85;
+}
+
+.kg-image-button:hover svg {
+ transform: scale(1.05);
+ opacity: 1.0;
+}
+
+.kg-placeholder-image-summer {
+ width: 152px;
+ height: 122px;
+}
+
+.kg-placeholder-gallery {
+ width: 141px;
+ height: 131px;
+}
+
+/* Link hover tooltip - override inherited styles from .koenig-editor__editor */
+.kg-link-toolbar a {
+ color: inherit;
+ -webkit-font-smoothing: initial;
+}
+
+/* Link input bar */
+.kg-link-input {
+ min-width: 225px; /* Same width as text toolbar */
+}
+
+.kg-input-bar-close {
+ position: absolute;
+ top: 22px;
+ right: 10px;
+ left: auto;
+ line-height: 1.2rem;
+ z-index: 100;
+ cursor: pointer;
+}
+
+.kg-input-bar:before,
+.kg-input-bar:after {
+ position: absolute;
+ top: 47px;
+ left: calc(50% - 8px);
+ width: 0;
+ content: "";
+ font-size: 0;
+ line-height: 0;
+}
+
+.kg-input-bar:before {
+ border-top: 9px solid var(--blue);
+ border-right: 9px solid transparent;
+ border-left: 9px solid transparent;
+}
+
+.kg-input-bar:after {
+ border-top: 8px solid var(--white);
+ border-right: 8px solid transparent;
+ border-left: 8px solid transparent;
+ margin-left: 1px;
+}
+
+/* Action bar styles */
+.kg-action-bar {
+ top: 8px;
+}
+
+.kg-action-bar a {
+ min-height: 34px;
+}
+
+.kg-action-bar:after {
+ position: absolute;
+ top: 40px;
+ left: calc(50% - 8px);
+ width: 0;
+ border-top: 8px solid var(--darkgrey-d1);
+ border-right: 8px solid transparent;
+ border-left: 8px solid transparent;
+ content: "";
+ font-size: 0;
+ line-height: 0;
+ transition: left ease 0.06s;
+}
+
+.kg-action-bar-divider {
+ width: 1px;
+}
+
+.kg-cardmenu-card-selected,
+.kg-cardmenu-card-hover:hover {
+ cursor: pointer;
+ background: var(--whitegrey-l1);
+}
+
+.kg-cardmenu-card-selected div {
+ color: var(--darkgrey);
+}
+
+/* Padded container housing title + editor canvas, scrollable content */
+.gh-koenig-editor-pane {
+ padding: 11vw 92px;
+}
+
+@media (min-width: 500px) and (max-width: 960px) {
+ .gh-koenig-editor-pane {
+ padding: 15vw 92px;
+ }
+}
+
+@media (max-width: 500px) {
+ .gh-koenig-editor-pane {
+ padding: 15vw 40px;
+ }
+}
+
+/* Use flex-grow to fill the available vertical space so clicks outside the
+ editor content can trigger focus */
+.gh-koenig-editor-pane .koenig-editor {
+ cursor: text;
+}
+
+.koenig-editor {
+ max-width: 760px;
+}
+
+/* ⨁ menu
+/* --------------------------------------------------------------- */
+.koenig-plus-menu-button {
+ margin: -2px 0 0 -66px;
+}
+
+.koenig-plus-menu-button:hover {
+ border-color: var(--darkgrey);
+}
+
+.koenig-plus-menu-button:hover svg path,
+.koenig-plus-menu-button:hover svg g {
+ stroke: var(--darkgrey);
+}
+
+
+@media (max-width: 1024px) {
+ .koenig-plus-menu-button {
+ right:10px;
+ }
+}
+
+
+/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
+.koenig-cardmenu {
+ width: 272px;
+ max-height: 500px;
+ background-clip: padding-box;
+ z-index: 9999999; /* have to compete with codemirror */
+ left: -16px;
+}
+
+
+/* Cards
+/* --------------------------------------------------------------- */
+.koenig-card-click-overlay {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 400;
+}
+
+
+/* Codemirror overrides
+/* --------------------------------------------------------------- */
+.koenig-editor .CodeMirror pre {
+ white-space: pre;
+}
+
+.koenig-editor .CodeMirror-wrap pre {
+ white-space: pre-wrap;
+}
+
+.koenig-card-html--editor .CodeMirror {
+ min-height: 170px;
+ padding: 0;
+ overflow: auto;
+ background-color: #ffffff;
+}
+
+.koenig-card-html--editor .CodeMirror:hover {
+ cursor: text;
+}
+
+.koenig-card-html--editor .CodeMirror-scroll {
+ min-height: 170px;
+ overflow: hidden !important;
+ margin-right: 0;
+}
+
+.koenig-editor .gh-markdown-editor .CodeMirror {
+ min-height: 130px;
+ /* margin to account for absolutely positioned toolbar */
+ margin-bottom: 49px;
+}
+
+.koenig-editor .gh-markdown-editor .CodeMirror-scroll {
+ min-height: 130px;
+}
+
+
+/* 1.0 Markdown editor overrides
+/* --------------------------------------------------------------- */
+.koenig-editor .gh-markdown-editor {
+ position: static;
+ overflow: visible;
+ padding-top: 2px;
+}
+
+.koenig-editor .gh-markdown-editor .editor-toolbar {
+ display: flex;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border-left: none;
+ border-right: none;
+ border-radius: 0 0 .4rem .4rem;
+ z-index: 9999;
+ background-color: #fff;
+ opacity: 1;
+ padding: 6px;
+ border-top: 1px solid #E5EFF5;
+}
+
+.koenig-editor .gh-markdown-editor .editor-toolbar .fa-check {
+ margin-left: auto;
+}
+
+.koenig-editor .gh-markdown-editor .editor-toolbar .separator:last-of-type {
+ display: none;
+}
+
+
+/* Mobiledoc-kit base styles
+/* NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
+/* --------------------------------------------------------------- */
+
+.__mobiledoc-editor {
+ position: relative;
+ resize: none;
+ min-height: 1em;
+}
+
+.__mobiledoc-editor:focus {
+ outline: none;
+}
+
+.__mobiledoc-editor > * {
+ position: relative;
+}
+
+.__mobiledoc-editor i {
+ display: inline;
+}
+
+.__mobiledoc-card {
+ display: inline-block;
+ width: 100%;
+}
+
+.__mobiledoc-editor.__has-no-content:after {
+ min-width: 100%;
+ content: attr(data-placeholder);
+ cursor: text;
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: var(--midlightgrey);
+}
diff --git a/ghost/admin/app/styles/spirit/_letter-spacing.css b/ghost/admin/app/styles/spirit/_letter-spacing.css
new file mode 100644
index 0000000000..37e111a4e0
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_letter-spacing.css
@@ -0,0 +1,32 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+
+.tracked-1 { letter-spacing: .02rem; }
+.tracked-2 { letter-spacing: .04rem; }
+.tracked-3 { letter-spacing: .06rem; }
+
+
+@media (--breakpoint-not-small) {
+ .tracked-1-ns { letter-spacing: .02rem; }
+ .tracked-2-ns { letter-spacing: .04rem; }
+ .tracked-3-ns { letter-spacing: .06rem; }
+}
+
+@media (--breakpoint-medium) {
+ .tracked-1-m { letter-spacing: .02rem; }
+ .tracked-2-m { letter-spacing: .04rem; }
+ .tracked-3-m { letter-spacing: .06rem; }
+}
+
+@media (--breakpoint-large) {
+ .tracked-1-l { letter-spacing: .02rem; }
+ .tracked-2-l { letter-spacing: .04rem; }
+ .tracked-3-l { letter-spacing: .06rem; }
+}
diff --git a/ghost/admin/app/styles/spirit/_line-height.css b/ghost/admin/app/styles/spirit/_line-height.css
new file mode 100644
index 0000000000..2ee1182545
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_line-height.css
@@ -0,0 +1,50 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+:root {
+ --lh-1-1: 1.1em;
+ --lh-1-3: 1.333em;
+ --lh-1-4: 1.4em;
+ --lh-1-6: 1.6em;
+ --lh-2-0: 2.0em;
+}
+
+.lh-solid { line-height: var(--lh-1-1); }
+.lh-heading { line-height: var(--lh-1-3); }
+.lh-title { line-height: var(--lh-1-4); }
+.lh-copy { line-height: var(--lh-1-6); }
+.lh-list { line-height: 3.2rem; }
+.lh-code { line-height: var(--lh-1-3); }
+
+@media (--breakpoint-not-small) {
+ .lh-solid-ns { line-height: var(--lh-1-1); }
+ .lh-heading-ns { line-height: var(--lh-1-3); }
+ .lh-title-ns { line-height: var(--lh-1-4); }
+ .lh-copy-ns { line-height: var(--lh-1-6); }
+ .lh-list-ns { line-height: var(--lh-2-0); }
+ .lh-code-ns { line-height: var(--lh-1-3); }
+}
+
+@media (--breakpoint-medium) {
+ .lh-solid-m { line-height: var(--lh-1-1); }
+ .lh-heading-m { line-height: var(--lh-1-3); }
+ .lh-title-m { line-height: var(--lh-1-4); }
+ .lh-copy-m { line-height: var(--lh-1-6); }
+ .lh-list-m { line-height: var(--lh-2-0); }
+ .lh-code-m { line-height: var(--lh-1-3); }
+}
+
+@media (--breakpoint-large) {
+ .lh-solid-l { line-height: var(--lh-1-1); }
+ .lh-heading-l { line-height: var(--lh-1-3); }
+ .lh-title-l { line-height: var(--lh-1-4); }
+ .lh-copy-l { line-height: var(--lh-1-6); }
+ .lh-list-l { line-height: var(--lh-2-0); }
+ .lh-code-l { line-height: var(--lh-1-3); }
+}
diff --git a/ghost/admin/app/styles/spirit/_links.css b/ghost/admin/app/styles/spirit/_links.css
new file mode 100644
index 0000000000..35ef50903f
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_links.css
@@ -0,0 +1,19 @@
+.link {
+ text-decoration: none;
+ transition: color .15s ease-in;
+}
+
+.link:link,
+.link:visited {
+ transition: color .15s ease-in;
+}
+.link:hover {
+ transition: color .15s ease-in;
+}
+.link:active {
+ transition: color .15s ease-in;
+}
+.link:focus {
+ transition: color .15s ease-in;
+ outline: 1px dotted currentColor;
+}
diff --git a/ghost/admin/app/styles/spirit/_lists.css b/ghost/admin/app/styles/spirit/_lists.css
new file mode 100644
index 0000000000..8015f12f62
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_lists.css
@@ -0,0 +1 @@
+.list { list-style-type: none; }
diff --git a/ghost/admin/app/styles/spirit/_max-widths.css b/ghost/admin/app/styles/spirit/_max-widths.css
new file mode 100644
index 0000000000..64d41c29a1
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_max-widths.css
@@ -0,0 +1,195 @@
+/*
+
+ Base:
+ mw = max width
+
+ Value:
+ (n) = (n * grid size)
+ -(m) = (m)%
+ -s = small
+ -m = medium
+ -l = large
+ -xl = extra large
+ -none = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.mw1 { max-width: calc(var(--grid-size) * 1); }
+.mw2 { max-width: calc(var(--grid-size) * 2); }
+.mw3 { max-width: calc(var(--grid-size) * 3); }
+.mw4 { max-width: calc(var(--grid-size) * 4); }
+.mw5 { max-width: calc(var(--grid-size) * 5); }
+.mw6 { max-width: calc(var(--grid-size) * 6); }
+.mw7 { max-width: calc(var(--grid-size) * 7); }
+.mw8 { max-width: calc(var(--grid-size) * 8); }
+.mw9 { max-width: calc(var(--grid-size) * 9); }
+.mw10 { max-width: calc(var(--grid-size) * 10); }
+.mw11 { max-width: calc(var(--grid-size) * 11); }
+.mw12 { max-width: calc(var(--grid-size) * 12); }
+.mw13 { max-width: calc(var(--grid-size) * 13); }
+.mw14 { max-width: calc(var(--grid-size) * 14); }
+.mw15 { max-width: calc(var(--grid-size) * 15); }
+.mw16 { max-width: calc(var(--grid-size) * 16); }
+.mw17 { max-width: calc(var(--grid-size) * 17); }
+.mw18 { max-width: calc(var(--grid-size) * 18); }
+.mw19 { max-width: calc(var(--grid-size) * 19); }
+.mw20 { max-width: calc(var(--grid-size) * 20); }
+.mw25 { max-width: calc(var(--grid-size) * 25); }
+.mw30 { max-width: calc(var(--grid-size) * 30); }
+.mw40 { max-width: calc(var(--grid-size) * 40); }
+.mw50 { max-width: calc(var(--grid-size) * 50); }
+.mw70 { max-width: calc(var(--grid-size) * 70); }
+.mw88 { max-width: calc(var(--grid-size) * 88); }
+
+.mw-70 { max-width: 70%; }
+.mw-80 { max-width: 80%; }
+.mw-90 { max-width: 90%; }
+.mw-100 { max-width: 100%; }
+
+.mw-s { max-width: 48rem; }
+.mw-m { max-width: 68rem; }
+.mw-l { max-width: 98rem; }
+.mw-xl { max-width: 114rem; }
+.mw-none { max-width: none; }
+
+.mw-65vw { max-width: 65vw; }
+.mw-100vw { max-width: 100vw; }
+.mw-100vw--sidebar { max-width: calc(100vw - 280px); }
+
+
+@media (--breakpoint-not-small) {
+ .mw1-ns { max-width: calc(var(--grid-size) * 1); }
+ .mw2-ns { max-width: calc(var(--grid-size) * 2); }
+ .mw3-ns { max-width: calc(var(--grid-size) * 3); }
+ .mw4-ns { max-width: calc(var(--grid-size) * 4); }
+ .mw5-ns { max-width: calc(var(--grid-size) * 5); }
+ .mw6-ns { max-width: calc(var(--grid-size) * 6); }
+ .mw7-ns { max-width: calc(var(--grid-size) * 7); }
+ .mw8-ns { max-width: calc(var(--grid-size) * 8); }
+ .mw9-ns { max-width: calc(var(--grid-size) * 9); }
+ .mw10-ns { max-width: calc(var(--grid-size) * 10); }
+ .mw11-ns { max-width: calc(var(--grid-size) * 11); }
+ .mw12-ns { max-width: calc(var(--grid-size) * 12); }
+ .mw13-ns { max-width: calc(var(--grid-size) * 13); }
+ .mw14-ns { max-width: calc(var(--grid-size) * 14); }
+ .mw15-ns { max-width: calc(var(--grid-size) * 15); }
+ .mw16-ns { max-width: calc(var(--grid-size) * 16); }
+ .mw17-ns { max-width: calc(var(--grid-size) * 17); }
+ .mw18-ns { max-width: calc(var(--grid-size) * 18); }
+ .mw19-ns { max-width: calc(var(--grid-size) * 19); }
+ .mw20-ns { max-width: calc(var(--grid-size) * 20); }
+ .mw25-ns { max-width: calc(var(--grid-size) * 25); }
+ .mw30-ns { max-width: calc(var(--grid-size) * 30); }
+ .mw40-ns { max-width: calc(var(--grid-size) * 40); }
+ .mw50-ns { max-width: calc(var(--grid-size) * 50); }
+ .mw70-ns { max-width: calc(var(--grid-size) * 70); }
+ .mw88-ns { max-width: calc(var(--grid-size) * 88); }
+
+ .mw-70-ns { max-width: 70%; }
+ .mw-80-ns { max-width: 80%; }
+ .mw-90-ns { max-width: 90%; }
+ .mw-100-ns { max-width: 100%; }
+
+ .mw-s-ns { max-width: 48rem; }
+ .mw-m-ns { max-width: 68rem; }
+ .mw-l-ns { max-width: 98rem; }
+ .mw-xl-ns { max-width: 114rem; }
+ .mw-none-ns { max-width: none; }
+
+ .mw-65vw-ns { max-width: 65vw; }
+ .mw-100vw-ns { max-width: 100vw; }
+ .mw-100vw--sidebar-ns { max-width: calc(100vw - 280px); }
+}
+
+@media (--breakpoint-medium) {
+ .mw1-m { max-width: calc(var(--grid-size) * 1); }
+ .mw2-m { max-width: calc(var(--grid-size) * 2); }
+ .mw3-m { max-width: calc(var(--grid-size) * 3); }
+ .mw4-m { max-width: calc(var(--grid-size) * 4); }
+ .mw5-m { max-width: calc(var(--grid-size) * 5); }
+ .mw6-m { max-width: calc(var(--grid-size) * 6); }
+ .mw7-m { max-width: calc(var(--grid-size) * 7); }
+ .mw8-m { max-width: calc(var(--grid-size) * 8); }
+ .mw9-m { max-width: calc(var(--grid-size) * 9); }
+ .mw10-m { max-width: calc(var(--grid-size) * 10); }
+ .mw11-m { max-width: calc(var(--grid-size) * 11); }
+ .mw12-m { max-width: calc(var(--grid-size) * 12); }
+ .mw13-m { max-width: calc(var(--grid-size) * 13); }
+ .mw14-m { max-width: calc(var(--grid-size) * 14); }
+ .mw15-m { max-width: calc(var(--grid-size) * 15); }
+ .mw16-m { max-width: calc(var(--grid-size) * 16); }
+ .mw17-m { max-width: calc(var(--grid-size) * 17); }
+ .mw18-m { max-width: calc(var(--grid-size) * 18); }
+ .mw19-m { max-width: calc(var(--grid-size) * 19); }
+ .mw20-m { max-width: calc(var(--grid-size) * 20); }
+ .mw25-m { max-width: calc(var(--grid-size) * 25); }
+ .mw30-m { max-width: calc(var(--grid-size) * 30); }
+ .mw40-m { max-width: calc(var(--grid-size) * 40); }
+ .mw50-m { max-width: calc(var(--grid-size) * 50); }
+ .mw70-m { max-width: calc(var(--grid-size) * 70); }
+ .mw88-m { max-width: calc(var(--grid-size) * 88); }
+
+ .mw-70-m { max-width: 70%; }
+ .mw-80-m { max-width: 80%; }
+ .mw-90-m { max-width: 90%; }
+ .mw-100-m { max-width: 100%; }
+
+ .mw-s-m { max-width: 48rem; }
+ .mw-m-m { max-width: 68rem; }
+ .mw-l-m { max-width: 98rem; }
+ .mw-xl-m { max-width: 114rem; }
+ .mw-none-m { max-width: none; }
+
+ .mw-65vw-m { max-width: 65vw; }
+ .mw-100vw-m { max-width: 100vw; }
+ .mw-100vw--sidebar-m { max-width: calc(100vw - 280px); }
+}
+
+@media (--breakpoint-large) {
+ .mw1-l { max-width: calc(var(--grid-size) * 1); }
+ .mw2-l { max-width: calc(var(--grid-size) * 2); }
+ .mw3-l { max-width: calc(var(--grid-size) * 3); }
+ .mw4-l { max-width: calc(var(--grid-size) * 4); }
+ .mw5-l { max-width: calc(var(--grid-size) * 5); }
+ .mw6-l { max-width: calc(var(--grid-size) * 6); }
+ .mw7-l { max-width: calc(var(--grid-size) * 7); }
+ .mw8-l { max-width: calc(var(--grid-size) * 8); }
+ .mw9-l { max-width: calc(var(--grid-size) * 9); }
+ .mw10-l { max-width: calc(var(--grid-size) * 10); }
+ .mw11-l { max-width: calc(var(--grid-size) * 11); }
+ .mw12-l { max-width: calc(var(--grid-size) * 12); }
+ .mw13-l { max-width: calc(var(--grid-size) * 13); }
+ .mw14-l { max-width: calc(var(--grid-size) * 14); }
+ .mw15-l { max-width: calc(var(--grid-size) * 15); }
+ .mw16-l { max-width: calc(var(--grid-size) * 16); }
+ .mw17-l { max-width: calc(var(--grid-size) * 17); }
+ .mw18-l { max-width: calc(var(--grid-size) * 18); }
+ .mw19-l { max-width: calc(var(--grid-size) * 19); }
+ .mw20-l { max-width: calc(var(--grid-size) * 20); }
+ .mw25-l { max-width: calc(var(--grid-size) * 25); }
+ .mw30-l { max-width: calc(var(--grid-size) * 30); }
+ .mw40-l { max-width: calc(var(--grid-size) * 40); }
+ .mw50-l { max-width: calc(var(--grid-size) * 50); }
+ .mw70-l { max-width: calc(var(--grid-size) * 70); }
+ .mw88-l { max-width: calc(var(--grid-size) * 88); }
+
+ .mw-70-l { max-width: 70%; }
+ .mw-80-l { max-width: 80%; }
+ .mw-90-l { max-width: 90%; }
+ .mw-100-l { max-width: 100%; }
+
+ .mw-s-l { max-width: 48rem; }
+ .mw-l-l { max-width: 68rem; }
+ .mw-l-l { max-width: 98rem; }
+ .mw-xl-l { max-width: 114rem; }
+ .mw-none-l { max-width: none; }
+
+ .mw-65vw-l { max-width: 65vw; }
+ .mw-100vw-l { max-width: 100vw; }
+ .mw-100vw--sidebar-l { max-width: calc(100vw - 280px); }
+}
diff --git a/ghost/admin/app/styles/spirit/_media-queries.css b/ghost/admin/app/styles/spirit/_media-queries.css
new file mode 100644
index 0000000000..2853aa6a02
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_media-queries.css
@@ -0,0 +1,28 @@
+/*
+
+ The media queries can be referenced like so:
+
+ @media (--breakpoint-not-small) {
+ .medium-and-larger-specific-style {
+ background-color: red;
+ }
+ }
+
+ @media (--breakpoint-medium) {
+ .medium-screen-specific-style {
+ background-color: red;
+ }
+ }
+
+ @media (--breakpoint-large) {
+ .large-and-larger-screen-specific-style {
+ background-color: red;
+ }
+ }
+
+*/
+
+/* Media Queries */
+@custom-media --breakpoint-not-small screen and (min-width: 44rem);
+@custom-media --breakpoint-medium screen and (min-width: 44rem) and (max-width: 66rem);
+@custom-media --breakpoint-large screen and (min-width: 66rem);
diff --git a/ghost/admin/app/styles/spirit/_min-heights.css b/ghost/admin/app/styles/spirit/_min-heights.css
new file mode 100644
index 0000000000..d9c4834972
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_min-heights.css
@@ -0,0 +1,158 @@
+/*
+
+ Base:
+ mih = min height
+
+ Value:
+ (n) = (n * grid size)
+ -(m) = percentage value
+ -none = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.mih1 { min-height: calc(var(--grid-size) * 1); }
+.mih2 { min-height: calc(var(--grid-size) * 2); }
+.mih3 { min-height: calc(var(--grid-size) * 3); }
+.mih4 { min-height: calc(var(--grid-size) * 4); }
+.mih5 { min-height: calc(var(--grid-size) * 5); }
+.mih6 { min-height: calc(var(--grid-size) * 6); }
+.mih7 { min-height: calc(var(--grid-size) * 7); }
+.mih8 { min-height: calc(var(--grid-size) * 8); }
+.mih9 { min-height: calc(var(--grid-size) * 9); }
+.mih10 { min-height: calc(var(--grid-size) * 10); }
+.mih11 { min-height: calc(var(--grid-size) * 11); }
+.mih12 { min-height: calc(var(--grid-size) * 12); }
+.mih13 { min-height: calc(var(--grid-size) * 13); }
+.mih14 { min-height: calc(var(--grid-size) * 14); }
+.mih15 { min-height: calc(var(--grid-size) * 15); }
+.mih16 { min-height: calc(var(--grid-size) * 16); }
+.mih17 { min-height: calc(var(--grid-size) * 17); }
+.mih18 { min-height: calc(var(--grid-size) * 18); }
+.mih19 { min-height: calc(var(--grid-size) * 19); }
+.mih20 { min-height: calc(var(--grid-size) * 20); }
+.mih25 { min-height: calc(var(--grid-size) * 25); }
+.mih30 { min-height: calc(var(--grid-size) * 30); }
+.mih40 { min-height: calc(var(--grid-size) * 40); }
+.mih50 { min-height: calc(var(--grid-size) * 50); }
+.mih70 { min-height: calc(var(--grid-size) * 70); }
+.mih88 { min-height: calc(var(--grid-size) * 88); }
+
+.mih-70 { min-height: 70%; }
+.mih-80 { min-height: 80%; }
+.mih-90 { min-height: 90%; }
+.mih-100 { min-height: 100%; }
+
+.mih-none { min-height: none; }
+
+@media (--breakpoint-not-small) {
+ .mih1-ns { min-height: calc(var(--grid-size) * 1); }
+ .mih2-ns { min-height: calc(var(--grid-size) * 2); }
+ .mih3-ns { min-height: calc(var(--grid-size) * 3); }
+ .mih4-ns { min-height: calc(var(--grid-size) * 4); }
+ .mih5-ns { min-height: calc(var(--grid-size) * 5); }
+ .mih6-ns { min-height: calc(var(--grid-size) * 6); }
+ .mih7-ns { min-height: calc(var(--grid-size) * 7); }
+ .mih8-ns { min-height: calc(var(--grid-size) * 8); }
+ .mih9-ns { min-height: calc(var(--grid-size) * 9); }
+ .mih10-ns { min-height: calc(var(--grid-size) * 10); }
+ .mih11-ns { min-height: calc(var(--grid-size) * 11); }
+ .mih12-ns { min-height: calc(var(--grid-size) * 12); }
+ .mih13-ns { min-height: calc(var(--grid-size) * 13); }
+ .mih14-ns { min-height: calc(var(--grid-size) * 14); }
+ .mih15-ns { min-height: calc(var(--grid-size) * 15); }
+ .mih16-ns { min-height: calc(var(--grid-size) * 16); }
+ .mih17-ns { min-height: calc(var(--grid-size) * 17); }
+ .mih18-ns { min-height: calc(var(--grid-size) * 18); }
+ .mih19-ns { min-height: calc(var(--grid-size) * 19); }
+ .mih20-ns { min-height: calc(var(--grid-size) * 20); }
+ .mih25-ns { min-height: calc(var(--grid-size) * 25); }
+ .mih30-ns { min-height: calc(var(--grid-size) * 30); }
+ .mih40-ns { min-height: calc(var(--grid-size) * 40); }
+ .mih50-ns { min-height: calc(var(--grid-size) * 50); }
+ .mih70-ns { min-height: calc(var(--grid-size) * 70); }
+ .mih88-ns { min-height: calc(var(--grid-size) * 88); }
+
+ .mih-70-ns { min-height: 70%; }
+ .mih-80-ns { min-height: 80%; }
+ .mih-90-ns { min-height: 90%; }
+ .mih-100-ns { min-height: 100%; }
+
+ .mih-none-ns { min-height: none; }
+}
+
+@media (--breakpoint-medium) {
+ .mih1-m { min-height: calc(var(--grid-size) * 1); }
+ .mih2-m { min-height: calc(var(--grid-size) * 2); }
+ .mih3-m { min-height: calc(var(--grid-size) * 3); }
+ .mih4-m { min-height: calc(var(--grid-size) * 4); }
+ .mih5-m { min-height: calc(var(--grid-size) * 5); }
+ .mih6-m { min-height: calc(var(--grid-size) * 6); }
+ .mih7-m { min-height: calc(var(--grid-size) * 7); }
+ .mih8-m { min-height: calc(var(--grid-size) * 8); }
+ .mih9-m { min-height: calc(var(--grid-size) * 9); }
+ .mih10-m { min-height: calc(var(--grid-size) * 10); }
+ .mih11-m { min-height: calc(var(--grid-size) * 11); }
+ .mih12-m { min-height: calc(var(--grid-size) * 12); }
+ .mih13-m { min-height: calc(var(--grid-size) * 13); }
+ .mih14-m { min-height: calc(var(--grid-size) * 14); }
+ .mih15-m { min-height: calc(var(--grid-size) * 15); }
+ .mih16-m { min-height: calc(var(--grid-size) * 16); }
+ .mih17-m { min-height: calc(var(--grid-size) * 17); }
+ .mih18-m { min-height: calc(var(--grid-size) * 18); }
+ .mih19-m { min-height: calc(var(--grid-size) * 19); }
+ .mih20-m { min-height: calc(var(--grid-size) * 20); }
+ .mih25-m { min-height: calc(var(--grid-size) * 25); }
+ .mih30-m { min-height: calc(var(--grid-size) * 30); }
+ .mih40-m { min-height: calc(var(--grid-size) * 40); }
+ .mih50-m { min-height: calc(var(--grid-size) * 50); }
+ .mih70-m { min-height: calc(var(--grid-size) * 70); }
+ .mih88-m { min-height: calc(var(--grid-size) * 88); }
+
+ .mih-70-m { min-height: 70%; }
+ .mih-80-m { min-height: 80%; }
+ .mih-90-m { min-height: 90%; }
+ .mih-100-m { min-height: 100%; }
+
+ .mih-none-m { min-height: none; }
+}
+
+@media (--breakpoint-large) {
+ .mih-70-l { min-height: 70%; }
+ .mih-80-l { min-height: 80%; }
+ .mih-90-l { min-height: 90%; }
+ .mih-100-l { min-height: 100%; }
+
+ .mih1-l { min-height: calc(var(--grid-size) * 1); }
+ .mih2-l { min-height: calc(var(--grid-size) * 2); }
+ .mih3-l { min-height: calc(var(--grid-size) * 3); }
+ .mih4-l { min-height: calc(var(--grid-size) * 4); }
+ .mih5-l { min-height: calc(var(--grid-size) * 5); }
+ .mih6-l { min-height: calc(var(--grid-size) * 6); }
+ .mih7-l { min-height: calc(var(--grid-size) * 7); }
+ .mih8-l { min-height: calc(var(--grid-size) * 8); }
+ .mih9-l { min-height: calc(var(--grid-size) * 9); }
+ .mih10-l { min-height: calc(var(--grid-size) * 10); }
+ .mih11-l { min-height: calc(var(--grid-size) * 11); }
+ .mih12-l { min-height: calc(var(--grid-size) * 12); }
+ .mih13-l { min-height: calc(var(--grid-size) * 13); }
+ .mih14-l { min-height: calc(var(--grid-size) * 14); }
+ .mih15-l { min-height: calc(var(--grid-size) * 15); }
+ .mih16-l { min-height: calc(var(--grid-size) * 16); }
+ .mih17-l { min-height: calc(var(--grid-size) * 17); }
+ .mih18-l { min-height: calc(var(--grid-size) * 18); }
+ .mih19-l { min-height: calc(var(--grid-size) * 19); }
+ .mih20-l { min-height: calc(var(--grid-size) * 20); }
+ .mih25-l { min-height: calc(var(--grid-size) * 25); }
+ .mih30-l { min-height: calc(var(--grid-size) * 30); }
+ .mih40-l { min-height: calc(var(--grid-size) * 40); }
+ .mih50-l { min-height: calc(var(--grid-size) * 50); }
+ .mih70-l { min-height: calc(var(--grid-size) * 70); }
+ .mih88-l { min-height: calc(var(--grid-size) * 88); }
+
+ .mih-none-l { min-height: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_min-widths.css b/ghost/admin/app/styles/spirit/_min-widths.css
new file mode 100644
index 0000000000..40b298c6a3
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_min-widths.css
@@ -0,0 +1,178 @@
+/*
+
+ Base:
+ miw = min width
+
+ Value:
+ (n) = (n * grid size)
+ -(m) = (m)%
+ -s = small
+ -m = medium
+ -l = large
+ -xl = extra large
+ -none = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.miw1 { min-width: calc(var(--grid-size) * 1); }
+.miw2 { min-width: calc(var(--grid-size) * 2); }
+.miw3 { min-width: calc(var(--grid-size) * 3); }
+.miw4 { min-width: calc(var(--grid-size) * 4); }
+.miw5 { min-width: calc(var(--grid-size) * 5); }
+.miw6 { min-width: calc(var(--grid-size) * 6); }
+.miw7 { min-width: calc(var(--grid-size) * 7); }
+.miw8 { min-width: calc(var(--grid-size) * 8); }
+.miw9 { min-width: calc(var(--grid-size) * 9); }
+.miw10 { min-width: calc(var(--grid-size) * 10); }
+.miw11 { min-width: calc(var(--grid-size) * 11); }
+.miw12 { min-width: calc(var(--grid-size) * 12); }
+.miw13 { min-width: calc(var(--grid-size) * 13); }
+.miw14 { min-width: calc(var(--grid-size) * 14); }
+.miw15 { min-width: calc(var(--grid-size) * 15); }
+.miw16 { min-width: calc(var(--grid-size) * 16); }
+.miw17 { min-width: calc(var(--grid-size) * 17); }
+.miw18 { min-width: calc(var(--grid-size) * 18); }
+.miw19 { min-width: calc(var(--grid-size) * 19); }
+.miw20 { min-width: calc(var(--grid-size) * 20); }
+.miw25 { min-width: calc(var(--grid-size) * 25); }
+.miw30 { min-width: calc(var(--grid-size) * 30); }
+.miw40 { min-width: calc(var(--grid-size) * 40); }
+.miw50 { min-width: calc(var(--grid-size) * 50); }
+.miw70 { min-width: calc(var(--grid-size) * 70); }
+.miw88 { min-width: calc(var(--grid-size) * 88); }
+
+.miw-70 { min-width: 70%; }
+.miw-80 { min-width: 80%; }
+.miw-90 { min-width: 90%; }
+.miw-100 { min-width: 100%; }
+
+.miw-s { min-width: 48rem; }
+.miw-m { min-width: 68rem; }
+.miw-l { min-width: 98rem; }
+.miw-xl { min-width: 114rem; }
+.miw-none { min-width: none; }
+
+@media (--breakpoint-not-small) {
+ .miw1-ns { min-width: calc(var(--grid-size) * 1); }
+ .miw2-ns { min-width: calc(var(--grid-size) * 2); }
+ .miw3-ns { min-width: calc(var(--grid-size) * 3); }
+ .miw4-ns { min-width: calc(var(--grid-size) * 4); }
+ .miw5-ns { min-width: calc(var(--grid-size) * 5); }
+ .miw6-ns { min-width: calc(var(--grid-size) * 6); }
+ .miw7-ns { min-width: calc(var(--grid-size) * 7); }
+ .miw8-ns { min-width: calc(var(--grid-size) * 8); }
+ .miw9-ns { min-width: calc(var(--grid-size) * 9); }
+ .miw10-ns { min-width: calc(var(--grid-size) * 10); }
+ .miw11-ns { min-width: calc(var(--grid-size) * 11); }
+ .miw12-ns { min-width: calc(var(--grid-size) * 12); }
+ .miw13-ns { min-width: calc(var(--grid-size) * 13); }
+ .miw14-ns { min-width: calc(var(--grid-size) * 14); }
+ .miw15-ns { min-width: calc(var(--grid-size) * 15); }
+ .miw16-ns { min-width: calc(var(--grid-size) * 16); }
+ .miw17-ns { min-width: calc(var(--grid-size) * 17); }
+ .miw18-ns { min-width: calc(var(--grid-size) * 18); }
+ .miw19-ns { min-width: calc(var(--grid-size) * 19); }
+ .miw20-ns { min-width: calc(var(--grid-size) * 20); }
+ .miw25-ns { min-width: calc(var(--grid-size) * 25); }
+ .miw30-ns { min-width: calc(var(--grid-size) * 30); }
+ .miw40-ns { min-width: calc(var(--grid-size) * 40); }
+ .miw50-ns { min-width: calc(var(--grid-size) * 50); }
+ .miw70-ns { min-width: calc(var(--grid-size) * 70); }
+ .miw88-ns { min-width: calc(var(--grid-size) * 88); }
+
+ .miw-70-ns { min-width: 70%; }
+ .miw-80-ns { min-width: 80%; }
+ .miw-90-ns { min-width: 90%; }
+ .miw-100-ns { min-width: 100%; }
+
+ .miw-s-ns { min-width: 48rem; }
+ .miw-m-ns { min-width: 68rem; }
+ .miw-l-ns { min-width: 98rem; }
+ .miw-xl-ns { min-width: 114rem; }
+ .miw-none-ns { min-width: none; }
+}
+
+@media (--breakpoint-medium) {
+ .miw1-m { min-width: calc(var(--grid-size) * 1); }
+ .miw2-m { min-width: calc(var(--grid-size) * 2); }
+ .miw3-m { min-width: calc(var(--grid-size) * 3); }
+ .miw4-m { min-width: calc(var(--grid-size) * 4); }
+ .miw5-m { min-width: calc(var(--grid-size) * 5); }
+ .miw6-m { min-width: calc(var(--grid-size) * 6); }
+ .miw7-m { min-width: calc(var(--grid-size) * 7); }
+ .miw8-m { min-width: calc(var(--grid-size) * 8); }
+ .miw9-m { min-width: calc(var(--grid-size) * 9); }
+ .miw10-m { min-width: calc(var(--grid-size) * 10); }
+ .miw11-m { min-width: calc(var(--grid-size) * 11); }
+ .miw12-m { min-width: calc(var(--grid-size) * 12); }
+ .miw13-m { min-width: calc(var(--grid-size) * 13); }
+ .miw14-m { min-width: calc(var(--grid-size) * 14); }
+ .miw15-m { min-width: calc(var(--grid-size) * 15); }
+ .miw16-m { min-width: calc(var(--grid-size) * 16); }
+ .miw17-m { min-width: calc(var(--grid-size) * 17); }
+ .miw18-m { min-width: calc(var(--grid-size) * 18); }
+ .miw19-m { min-width: calc(var(--grid-size) * 19); }
+ .miw20-m { min-width: calc(var(--grid-size) * 20); }
+ .miw25-m { min-width: calc(var(--grid-size) * 25); }
+ .miw30-m { min-width: calc(var(--grid-size) * 30); }
+ .miw40-m { min-width: calc(var(--grid-size) * 40); }
+ .miw50-m { min-width: calc(var(--grid-size) * 50); }
+ .miw70-m { min-width: calc(var(--grid-size) * 70); }
+ .miw88-m { min-width: calc(var(--grid-size) * 88); }
+
+ .miw-70-m { min-width: 70%; }
+ .miw-80-m { min-width: 80%; }
+ .miw-90-m { min-width: 90%; }
+ .miw-100-m { min-width: 100%; }
+
+ .miw-s-m { min-width: 48rem; }
+ .miw-m-m { min-width: 68rem; }
+ .miw-l-m { min-width: 98rem; }
+ .miw-xl-m { min-width: 114rem; }
+ .miw-none-m { min-width: none; }
+}
+
+@media (--breakpoint-large) {
+ .miw1-l { min-width: calc(var(--grid-size) * 1); }
+ .miw2-l { min-width: calc(var(--grid-size) * 2); }
+ .miw3-l { min-width: calc(var(--grid-size) * 3); }
+ .miw4-l { min-width: calc(var(--grid-size) * 4); }
+ .miw5-l { min-width: calc(var(--grid-size) * 5); }
+ .miw6-l { min-width: calc(var(--grid-size) * 6); }
+ .miw7-l { min-width: calc(var(--grid-size) * 7); }
+ .miw8-l { min-width: calc(var(--grid-size) * 8); }
+ .miw9-l { min-width: calc(var(--grid-size) * 9); }
+ .miw10-l { min-width: calc(var(--grid-size) * 10); }
+ .miw11-l { min-width: calc(var(--grid-size) * 11); }
+ .miw12-l { min-width: calc(var(--grid-size) * 12); }
+ .miw13-l { min-width: calc(var(--grid-size) * 13); }
+ .miw14-l { min-width: calc(var(--grid-size) * 14); }
+ .miw15-l { min-width: calc(var(--grid-size) * 15); }
+ .miw16-l { min-width: calc(var(--grid-size) * 16); }
+ .miw17-l { min-width: calc(var(--grid-size) * 17); }
+ .miw18-l { min-width: calc(var(--grid-size) * 18); }
+ .miw19-l { min-width: calc(var(--grid-size) * 19); }
+ .miw20-l { min-width: calc(var(--grid-size) * 20); }
+ .miw25-l { min-width: calc(var(--grid-size) * 25); }
+ .miw30-l { min-width: calc(var(--grid-size) * 30); }
+ .miw40-l { min-width: calc(var(--grid-size) * 40); }
+ .miw50-l { min-width: calc(var(--grid-size) * 50); }
+ .miw70-l { min-width: calc(var(--grid-size) * 70); }
+ .miw88-l { min-width: calc(var(--grid-size) * 88); }
+
+ .miw-70-l { min-width: 70%; }
+ .miw-80-l { min-width: 80%; }
+ .miw-90-l { min-width: 90%; }
+ .miw-100-l { min-width: 100%; }
+
+ .miw-s-l { min-width: 48rem; }
+ .miw-m-l { min-width: 68rem; }
+ .miw-l-l { min-width: 98rem; }
+ .miw-xl-l { min-width: 114rem; }
+ .miw-none-l { min-width: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_module-template.css b/ghost/admin/app/styles/spirit/_module-template.css
new file mode 100644
index 0000000000..0447e0c1e4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_module-template.css
@@ -0,0 +1,22 @@
+/*
+
+ MODULE NAME
+
+ Use this scaffolding to create or extend your own modules with tachyons
+ style architecture.
+
+*/
+
+
+@media (--breakpoint-not-small) {
+
+}
+
+@media (--breakpoint-medium) {
+
+}
+
+@media (--breakpoint-large) {
+
+}
+
diff --git a/ghost/admin/app/styles/spirit/_negative-margins.css b/ghost/admin/app/styles/spirit/_negative-margins.css
new file mode 100644
index 0000000000..3aec8d5273
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_negative-margins.css
@@ -0,0 +1,526 @@
+.na0 { margin: 0; }
+.na1 { margin: calc(-1 * var(--grid-size) * 1); }
+.na2 { margin: calc(-1 * var(--grid-size) * 2); }
+.na3 { margin: calc(-1 * var(--grid-size) * 3); }
+.na4 { margin: calc(-1 * var(--grid-size) * 4); }
+.na5 { margin: calc(-1 * var(--grid-size) * 5); }
+.na6 { margin: calc(-1 * var(--grid-size) * 6); }
+.na7 { margin: calc(-1 * var(--grid-size) * 7); }
+.na8 { margin: calc(-1 * var(--grid-size) * 8); }
+.na9 { margin: calc(-1 * var(--grid-size) * 9); }
+.na10 { margin: calc(-1 * var(--grid-size) * 10); }
+.na11 { margin: calc(-1 * var(--grid-size) * 11); }
+.na12 { margin: calc(-1 * var(--grid-size) * 12); }
+.na13 { margin: calc(-1 * var(--grid-size) * 13); }
+.na14 { margin: calc(-1 * var(--grid-size) * 14); }
+.na15 { margin: calc(-1 * var(--grid-size) * 15); }
+.na16 { margin: calc(-1 * var(--grid-size) * 16); }
+.na17 { margin: calc(-1 * var(--grid-size) * 17); }
+.na18 { margin: calc(-1 * var(--grid-size) * 18); }
+.na19 { margin: calc(-1 * var(--grid-size) * 19); }
+.na20 { margin: calc(-1 * var(--grid-size) * 20); }
+.na25 { margin: calc(-1 * var(--grid-size) * 25); }
+.na30 { margin: calc(-1 * var(--grid-size) * 30); }
+.na40 { margin: calc(-1 * var(--grid-size) * 40); }
+.na50 { margin: calc(-1 * var(--grid-size) * 50); }
+
+.nr0 { margin-right: 0; }
+.nr1 { margin-right: calc(-1 * var(--grid-size) * 1); }
+.nr2 { margin-right: calc(-1 * var(--grid-size) * 2); }
+.nr3 { margin-right: calc(-1 * var(--grid-size) * 3); }
+.nr4 { margin-right: calc(-1 * var(--grid-size) * 4); }
+.nr5 { margin-right: calc(-1 * var(--grid-size) * 5); }
+.nr6 { margin-right: calc(-1 * var(--grid-size) * 6); }
+.nr7 { margin-right: calc(-1 * var(--grid-size) * 7); }
+.nr8 { margin-right: calc(-1 * var(--grid-size) * 8); }
+.nr9 { margin-right: calc(-1 * var(--grid-size) * 9); }
+.nr10 { margin-right: calc(-1 * var(--grid-size) * 10); }
+.nr11 { margin-right: calc(-1 * var(--grid-size) * 11); }
+.nr12 { margin-right: calc(-1 * var(--grid-size) * 12); }
+.nr13 { margin-right: calc(-1 * var(--grid-size) * 13); }
+.nr14 { margin-right: calc(-1 * var(--grid-size) * 14); }
+.nr15 { margin-right: calc(-1 * var(--grid-size) * 15); }
+.nr16 { margin-right: calc(-1 * var(--grid-size) * 16); }
+.nr17 { margin-right: calc(-1 * var(--grid-size) * 17); }
+.nr18 { margin-right: calc(-1 * var(--grid-size) * 18); }
+.nr19 { margin-right: calc(-1 * var(--grid-size) * 19); }
+.nr20 { margin-right: calc(-1 * var(--grid-size) * 20); }
+.nr25 { margin-right: calc(-1 * var(--grid-size) * 25); }
+.nr30 { margin-right: calc(-1 * var(--grid-size) * 30); }
+.nr40 { margin-right: calc(-1 * var(--grid-size) * 40); }
+.nr50 { margin-right: calc(-1 * var(--grid-size) * 50); }
+
+.nb0 { margin-bottom: 0; }
+.nb1 { margin-bottom: calc(-1 * var(--grid-size) * 1); }
+.nb2 { margin-bottom: calc(-1 * var(--grid-size) * 2); }
+.nb3 { margin-bottom: calc(-1 * var(--grid-size) * 3); }
+.nb4 { margin-bottom: calc(-1 * var(--grid-size) * 4); }
+.nb5 { margin-bottom: calc(-1 * var(--grid-size) * 5); }
+.nb6 { margin-bottom: calc(-1 * var(--grid-size) * 6); }
+.nb7 { margin-bottom: calc(-1 * var(--grid-size) * 7); }
+.nb8 { margin-bottom: calc(-1 * var(--grid-size) * 8); }
+.nb9 { margin-bottom: calc(-1 * var(--grid-size) * 9); }
+.nb10 { margin-bottom: calc(-1 * var(--grid-size) * 10); }
+.nb11 { margin-bottom: calc(-1 * var(--grid-size) * 11); }
+.nb12 { margin-bottom: calc(-1 * var(--grid-size) * 12); }
+.nb13 { margin-bottom: calc(-1 * var(--grid-size) * 13); }
+.nb14 { margin-bottom: calc(-1 * var(--grid-size) * 14); }
+.nb15 { margin-bottom: calc(-1 * var(--grid-size) * 15); }
+.nb16 { margin-bottom: calc(-1 * var(--grid-size) * 16); }
+.nb17 { margin-bottom: calc(-1 * var(--grid-size) * 17); }
+.nb18 { margin-bottom: calc(-1 * var(--grid-size) * 18); }
+.nb19 { margin-bottom: calc(-1 * var(--grid-size) * 19); }
+.nb20 { margin-bottom: calc(-1 * var(--grid-size) * 20); }
+.nb25 { margin-bottom: calc(-1 * var(--grid-size) * 25); }
+.nb30 { margin-bottom: calc(-1 * var(--grid-size) * 30); }
+.nb40 { margin-bottom: calc(-1 * var(--grid-size) * 40); }
+.nb50 { margin-bottom: calc(-1 * var(--grid-size) * 50); }
+
+.nl0 { margin-left: 0; }
+.nl1 { margin-left: calc(-1 * var(--grid-size) * 1); }
+.nl2 { margin-left: calc(-1 * var(--grid-size) * 2); }
+.nl3 { margin-left: calc(-1 * var(--grid-size) * 3); }
+.nl4 { margin-left: calc(-1 * var(--grid-size) * 4); }
+.nl5 { margin-left: calc(-1 * var(--grid-size) * 5); }
+.nl6 { margin-left: calc(-1 * var(--grid-size) * 6); }
+.nl7 { margin-left: calc(-1 * var(--grid-size) * 7); }
+.nl8 { margin-left: calc(-1 * var(--grid-size) * 8); }
+.nl9 { margin-left: calc(-1 * var(--grid-size) * 9); }
+.nl10 { margin-left: calc(-1 * var(--grid-size) * 10); }
+.nl11 { margin-left: calc(-1 * var(--grid-size) * 11); }
+.nl12 { margin-left: calc(-1 * var(--grid-size) * 12); }
+.nl13 { margin-left: calc(-1 * var(--grid-size) * 13); }
+.nl14 { margin-left: calc(-1 * var(--grid-size) * 14); }
+.nl15 { margin-left: calc(-1 * var(--grid-size) * 15); }
+.nl16 { margin-left: calc(-1 * var(--grid-size) * 16); }
+.nl17 { margin-left: calc(-1 * var(--grid-size) * 17); }
+.nl18 { margin-left: calc(-1 * var(--grid-size) * 18); }
+.nl19 { margin-left: calc(-1 * var(--grid-size) * 19); }
+.nl20 { margin-left: calc(-1 * var(--grid-size) * 20); }
+.nl25 { margin-left: calc(-1 * var(--grid-size) * 25); }
+.nl30 { margin-left: calc(-1 * var(--grid-size) * 30); }
+.nl40 { margin-left: calc(-1 * var(--grid-size) * 40); }
+.nl50 { margin-left: calc(-1 * var(--grid-size) * 50); }
+
+.nt0 { margin-top: 0; }
+.nt1 { margin-top: calc(-1 * var(--grid-size) * 1); }
+.nt2 { margin-top: calc(-1 * var(--grid-size) * 2); }
+.nt3 { margin-top: calc(-1 * var(--grid-size) * 3); }
+.nt4 { margin-top: calc(-1 * var(--grid-size) * 4); }
+.nt5 { margin-top: calc(-1 * var(--grid-size) * 5); }
+.nt6 { margin-top: calc(-1 * var(--grid-size) * 6); }
+.nt7 { margin-top: calc(-1 * var(--grid-size) * 7); }
+.nt8 { margin-top: calc(-1 * var(--grid-size) * 8); }
+.nt9 { margin-top: calc(-1 * var(--grid-size) * 9); }
+.nt10 { margin-top: calc(-1 * var(--grid-size) * 10); }
+.nt11 { margin-top: calc(-1 * var(--grid-size) * 11); }
+.nt12 { margin-top: calc(-1 * var(--grid-size) * 12); }
+.nt13 { margin-top: calc(-1 * var(--grid-size) * 13); }
+.nt14 { margin-top: calc(-1 * var(--grid-size) * 14); }
+.nt15 { margin-top: calc(-1 * var(--grid-size) * 15); }
+.nt16 { margin-top: calc(-1 * var(--grid-size) * 16); }
+.nt17 { margin-top: calc(-1 * var(--grid-size) * 17); }
+.nt18 { margin-top: calc(-1 * var(--grid-size) * 18); }
+.nt19 { margin-top: calc(-1 * var(--grid-size) * 19); }
+.nt20 { margin-top: calc(-1 * var(--grid-size) * 20); }
+.nt25 { margin-top: calc(-1 * var(--grid-size) * 25); }
+.nt30 { margin-top: calc(-1 * var(--grid-size) * 30); }
+.nt40 { margin-top: calc(-1 * var(--grid-size) * 40); }
+.nt50 { margin-top: calc(-1 * var(--grid-size) * 50); }
+
+
+@media (--breakpoint-not-small) {
+ .na0-ns { margin: 0; }
+ .na1-ns { margin: calc(-1 * var(--grid-size) * 1); }
+ .na2-ns { margin: calc(-1 * var(--grid-size) * 2); }
+ .na3-ns { margin: calc(-1 * var(--grid-size) * 3); }
+ .na4-ns { margin: calc(-1 * var(--grid-size) * 4); }
+ .na5-ns { margin: calc(-1 * var(--grid-size) * 5); }
+ .na6-ns { margin: calc(-1 * var(--grid-size) * 6); }
+ .na7-ns { margin: calc(-1 * var(--grid-size) * 7); }
+ .na8-ns { margin: calc(-1 * var(--grid-size) * 8); }
+ .na9-ns { margin: calc(-1 * var(--grid-size) * 9); }
+ .na10-ns { margin: calc(-1 * var(--grid-size) * 10); }
+ .na11-ns { margin: calc(-1 * var(--grid-size) * 11); }
+ .na12-ns { margin: calc(-1 * var(--grid-size) * 12); }
+ .na13-ns { margin: calc(-1 * var(--grid-size) * 13); }
+ .na14-ns { margin: calc(-1 * var(--grid-size) * 14); }
+ .na15-ns { margin: calc(-1 * var(--grid-size) * 15); }
+ .na16-ns { margin: calc(-1 * var(--grid-size) * 16); }
+ .na17-ns { margin: calc(-1 * var(--grid-size) * 17); }
+ .na18-ns { margin: calc(-1 * var(--grid-size) * 18); }
+ .na19-ns { margin: calc(-1 * var(--grid-size) * 19); }
+ .na20-ns { margin: calc(-1 * var(--grid-size) * 20); }
+ .na25-ns { margin: calc(-1 * var(--grid-size) * 25); }
+ .na30-ns { margin: calc(-1 * var(--grid-size) * 30); }
+ .na40-ns { margin: calc(-1 * var(--grid-size) * 40); }
+ .na50-ns { margin: calc(-1 * var(--grid-size) * 50); }
+
+ .nr0-ns { margin-right: 0; }
+ .nr1-ns { margin-right: calc(-1 * var(--grid-size) * 1); }
+ .nr2-ns { margin-right: calc(-1 * var(--grid-size) * 2); }
+ .nr3-ns { margin-right: calc(-1 * var(--grid-size) * 3); }
+ .nr4-ns { margin-right: calc(-1 * var(--grid-size) * 4); }
+ .nr5-ns { margin-right: calc(-1 * var(--grid-size) * 5); }
+ .nr6-ns { margin-right: calc(-1 * var(--grid-size) * 6); }
+ .nr7-ns { margin-right: calc(-1 * var(--grid-size) * 7); }
+ .nr8-ns { margin-right: calc(-1 * var(--grid-size) * 8); }
+ .nr9-ns { margin-right: calc(-1 * var(--grid-size) * 9); }
+ .nr10-ns { margin-right: calc(-1 * var(--grid-size) * 10); }
+ .nr11-ns { margin-right: calc(-1 * var(--grid-size) * 11); }
+ .nr12-ns { margin-right: calc(-1 * var(--grid-size) * 12); }
+ .nr13-ns { margin-right: calc(-1 * var(--grid-size) * 13); }
+ .nr14-ns { margin-right: calc(-1 * var(--grid-size) * 14); }
+ .nr15-ns { margin-right: calc(-1 * var(--grid-size) * 15); }
+ .nr16-ns { margin-right: calc(-1 * var(--grid-size) * 16); }
+ .nr17-ns { margin-right: calc(-1 * var(--grid-size) * 17); }
+ .nr18-ns { margin-right: calc(-1 * var(--grid-size) * 18); }
+ .nr19-ns { margin-right: calc(-1 * var(--grid-size) * 19); }
+ .nr20-ns { margin-right: calc(-1 * var(--grid-size) * 20); }
+ .nr25-ns { margin-right: calc(-1 * var(--grid-size) * 25); }
+ .nr30-ns { margin-right: calc(-1 * var(--grid-size) * 30); }
+ .nr40-ns { margin-right: calc(-1 * var(--grid-size) * 40); }
+ .nr50-ns { margin-right: calc(-1 * var(--grid-size) * 50); }
+
+ .nb0-ns { margin-bottom: 0; }
+ .nb1-ns { margin-bottom: calc(-1 * var(--grid-size) * 1); }
+ .nb2-ns { margin-bottom: calc(-1 * var(--grid-size) * 2); }
+ .nb3-ns { margin-bottom: calc(-1 * var(--grid-size) * 3); }
+ .nb4-ns { margin-bottom: calc(-1 * var(--grid-size) * 4); }
+ .nb5-ns { margin-bottom: calc(-1 * var(--grid-size) * 5); }
+ .nb6-ns { margin-bottom: calc(-1 * var(--grid-size) * 6); }
+ .nb7-ns { margin-bottom: calc(-1 * var(--grid-size) * 7); }
+ .nb8-ns { margin-bottom: calc(-1 * var(--grid-size) * 8); }
+ .nb9-ns { margin-bottom: calc(-1 * var(--grid-size) * 9); }
+ .nb10-ns { margin-bottom: calc(-1 * var(--grid-size) * 10); }
+ .nb11-ns { margin-bottom: calc(-1 * var(--grid-size) * 11); }
+ .nb12-ns { margin-bottom: calc(-1 * var(--grid-size) * 12); }
+ .nb13-ns { margin-bottom: calc(-1 * var(--grid-size) * 13); }
+ .nb14-ns { margin-bottom: calc(-1 * var(--grid-size) * 14); }
+ .nb15-ns { margin-bottom: calc(-1 * var(--grid-size) * 15); }
+ .nb16-ns { margin-bottom: calc(-1 * var(--grid-size) * 16); }
+ .nb17-ns { margin-bottom: calc(-1 * var(--grid-size) * 17); }
+ .nb18-ns { margin-bottom: calc(-1 * var(--grid-size) * 18); }
+ .nb19-ns { margin-bottom: calc(-1 * var(--grid-size) * 19); }
+ .nb20-ns { margin-bottom: calc(-1 * var(--grid-size) * 20); }
+ .nb25-ns { margin-bottom: calc(-1 * var(--grid-size) * 25); }
+ .nb30-ns { margin-bottom: calc(-1 * var(--grid-size) * 30); }
+ .nb40-ns { margin-bottom: calc(-1 * var(--grid-size) * 40); }
+ .nb50-ns { margin-bottom: calc(-1 * var(--grid-size) * 50); }
+
+ .nl0-ns { margin-left: 0; }
+ .nl1-ns { margin-left: calc(-1 * var(--grid-size) * 1); }
+ .nl2-ns { margin-left: calc(-1 * var(--grid-size) * 2); }
+ .nl3-ns { margin-left: calc(-1 * var(--grid-size) * 3); }
+ .nl4-ns { margin-left: calc(-1 * var(--grid-size) * 4); }
+ .nl5-ns { margin-left: calc(-1 * var(--grid-size) * 5); }
+ .nl6-ns { margin-left: calc(-1 * var(--grid-size) * 6); }
+ .nl7-ns { margin-left: calc(-1 * var(--grid-size) * 7); }
+ .nl8-ns { margin-left: calc(-1 * var(--grid-size) * 8); }
+ .nl9-ns { margin-left: calc(-1 * var(--grid-size) * 9); }
+ .nl10-ns { margin-left: calc(-1 * var(--grid-size) * 10); }
+ .nl11-ns { margin-left: calc(-1 * var(--grid-size) * 11); }
+ .nl12-ns { margin-left: calc(-1 * var(--grid-size) * 12); }
+ .nl13-ns { margin-left: calc(-1 * var(--grid-size) * 13); }
+ .nl14-ns { margin-left: calc(-1 * var(--grid-size) * 14); }
+ .nl15-ns { margin-left: calc(-1 * var(--grid-size) * 15); }
+ .nl16-ns { margin-left: calc(-1 * var(--grid-size) * 16); }
+ .nl17-ns { margin-left: calc(-1 * var(--grid-size) * 17); }
+ .nl18-ns { margin-left: calc(-1 * var(--grid-size) * 18); }
+ .nl19-ns { margin-left: calc(-1 * var(--grid-size) * 19); }
+ .nl20-ns { margin-left: calc(-1 * var(--grid-size) * 20); }
+ .nl25-ns { margin-left: calc(-1 * var(--grid-size) * 25); }
+ .nl30-ns { margin-left: calc(-1 * var(--grid-size) * 30); }
+ .nl40-ns { margin-left: calc(-1 * var(--grid-size) * 40); }
+ .nl50-ns { margin-left: calc(-1 * var(--grid-size) * 50); }
+
+ .nt0-ns { margin-top: 0; }
+ .nt1-ns { margin-top: calc(-1 * var(--grid-size) * 1); }
+ .nt2-ns { margin-top: calc(-1 * var(--grid-size) * 2); }
+ .nt3-ns { margin-top: calc(-1 * var(--grid-size) * 3); }
+ .nt4-ns { margin-top: calc(-1 * var(--grid-size) * 4); }
+ .nt5-ns { margin-top: calc(-1 * var(--grid-size) * 5); }
+ .nt6-ns { margin-top: calc(-1 * var(--grid-size) * 6); }
+ .nt7-ns { margin-top: calc(-1 * var(--grid-size) * 7); }
+ .nt8-ns { margin-top: calc(-1 * var(--grid-size) * 8); }
+ .nt9-ns { margin-top: calc(-1 * var(--grid-size) * 9); }
+ .nt10-ns { margin-top: calc(-1 * var(--grid-size) * 10); }
+ .nt11-ns { margin-top: calc(-1 * var(--grid-size) * 11); }
+ .nt12-ns { margin-top: calc(-1 * var(--grid-size) * 12); }
+ .nt13-ns { margin-top: calc(-1 * var(--grid-size) * 13); }
+ .nt14-ns { margin-top: calc(-1 * var(--grid-size) * 14); }
+ .nt15-ns { margin-top: calc(-1 * var(--grid-size) * 15); }
+ .nt16-ns { margin-top: calc(-1 * var(--grid-size) * 16); }
+ .nt17-ns { margin-top: calc(-1 * var(--grid-size) * 17); }
+ .nt18-ns { margin-top: calc(-1 * var(--grid-size) * 18); }
+ .nt19-ns { margin-top: calc(-1 * var(--grid-size) * 19); }
+ .nt20-ns { margin-top: calc(-1 * var(--grid-size) * 20); }
+ .nt25-ns { margin-top: calc(-1 * var(--grid-size) * 25); }
+ .nt30-ns { margin-top: calc(-1 * var(--grid-size) * 30); }
+ .nt40-ns { margin-top: calc(-1 * var(--grid-size) * 40); }
+ .nt50-ns { margin-top: calc(-1 * var(--grid-size) * 50); }
+}
+
+@media (--breakpoint-medium) {
+ .na0-m { margin: 0; }
+ .na1-m { margin: calc(-1 * var(--grid-size) * 1); }
+ .na2-m { margin: calc(-1 * var(--grid-size) * 2); }
+ .na3-m { margin: calc(-1 * var(--grid-size) * 3); }
+ .na4-m { margin: calc(-1 * var(--grid-size) * 4); }
+ .na5-m { margin: calc(-1 * var(--grid-size) * 5); }
+ .na6-m { margin: calc(-1 * var(--grid-size) * 6); }
+ .na7-m { margin: calc(-1 * var(--grid-size) * 7); }
+ .na8-m { margin: calc(-1 * var(--grid-size) * 8); }
+ .na9-m { margin: calc(-1 * var(--grid-size) * 9); }
+ .na10-m { margin: calc(-1 * var(--grid-size) * 10); }
+ .na11-m { margin: calc(-1 * var(--grid-size) * 11); }
+ .na12-m { margin: calc(-1 * var(--grid-size) * 12); }
+ .na13-m { margin: calc(-1 * var(--grid-size) * 13); }
+ .na14-m { margin: calc(-1 * var(--grid-size) * 14); }
+ .na15-m { margin: calc(-1 * var(--grid-size) * 15); }
+ .na16-m { margin: calc(-1 * var(--grid-size) * 16); }
+ .na17-m { margin: calc(-1 * var(--grid-size) * 17); }
+ .na18-m { margin: calc(-1 * var(--grid-size) * 18); }
+ .na19-m { margin: calc(-1 * var(--grid-size) * 19); }
+ .na20-m { margin: calc(-1 * var(--grid-size) * 20); }
+ .na25-m { margin: calc(-1 * var(--grid-size) * 25); }
+ .na30-m { margin: calc(-1 * var(--grid-size) * 30); }
+ .na40-m { margin: calc(-1 * var(--grid-size) * 40); }
+ .na50-m { margin: calc(-1 * var(--grid-size) * 50); }
+
+ .nr0-m { margin-right: 0; }
+ .nr1-m { margin-right: calc(-1 * var(--grid-size) * 1); }
+ .nr2-m { margin-right: calc(-1 * var(--grid-size) * 2); }
+ .nr3-m { margin-right: calc(-1 * var(--grid-size) * 3); }
+ .nr4-m { margin-right: calc(-1 * var(--grid-size) * 4); }
+ .nr5-m { margin-right: calc(-1 * var(--grid-size) * 5); }
+ .nr6-m { margin-right: calc(-1 * var(--grid-size) * 6); }
+ .nr7-m { margin-right: calc(-1 * var(--grid-size) * 7); }
+ .nr8-m { margin-right: calc(-1 * var(--grid-size) * 8); }
+ .nr9-m { margin-right: calc(-1 * var(--grid-size) * 9); }
+ .nr10-m { margin-right: calc(-1 * var(--grid-size) * 10); }
+ .nr11-m { margin-right: calc(-1 * var(--grid-size) * 11); }
+ .nr12-m { margin-right: calc(-1 * var(--grid-size) * 12); }
+ .nr13-m { margin-right: calc(-1 * var(--grid-size) * 13); }
+ .nr14-m { margin-right: calc(-1 * var(--grid-size) * 14); }
+ .nr15-m { margin-right: calc(-1 * var(--grid-size) * 15); }
+ .nr16-m { margin-right: calc(-1 * var(--grid-size) * 16); }
+ .nr17-m { margin-right: calc(-1 * var(--grid-size) * 17); }
+ .nr18-m { margin-right: calc(-1 * var(--grid-size) * 18); }
+ .nr19-m { margin-right: calc(-1 * var(--grid-size) * 19); }
+ .nr20-m { margin-right: calc(-1 * var(--grid-size) * 20); }
+ .nr25-m { margin-right: calc(-1 * var(--grid-size) * 25); }
+ .nr30-m { margin-right: calc(-1 * var(--grid-size) * 30); }
+ .nr40-m { margin-right: calc(-1 * var(--grid-size) * 40); }
+ .nr50-m { margin-right: calc(-1 * var(--grid-size) * 50); }
+
+ .nb0-m { margin-bottom: 0; }
+ .nb1-m { margin-bottom: calc(-1 * var(--grid-size) * 1); }
+ .nb2-m { margin-bottom: calc(-1 * var(--grid-size) * 2); }
+ .nb3-m { margin-bottom: calc(-1 * var(--grid-size) * 3); }
+ .nb4-m { margin-bottom: calc(-1 * var(--grid-size) * 4); }
+ .nb5-m { margin-bottom: calc(-1 * var(--grid-size) * 5); }
+ .nb6-m { margin-bottom: calc(-1 * var(--grid-size) * 6); }
+ .nb7-m { margin-bottom: calc(-1 * var(--grid-size) * 7); }
+ .nb8-m { margin-bottom: calc(-1 * var(--grid-size) * 8); }
+ .nb9-m { margin-bottom: calc(-1 * var(--grid-size) * 9); }
+ .nb10-m { margin-bottom: calc(-1 * var(--grid-size) * 10); }
+ .nb11-m { margin-bottom: calc(-1 * var(--grid-size) * 11); }
+ .nb12-m { margin-bottom: calc(-1 * var(--grid-size) * 12); }
+ .nb13-m { margin-bottom: calc(-1 * var(--grid-size) * 13); }
+ .nb14-m { margin-bottom: calc(-1 * var(--grid-size) * 14); }
+ .nb15-m { margin-bottom: calc(-1 * var(--grid-size) * 15); }
+ .nb16-m { margin-bottom: calc(-1 * var(--grid-size) * 16); }
+ .nb17-m { margin-bottom: calc(-1 * var(--grid-size) * 17); }
+ .nb18-m { margin-bottom: calc(-1 * var(--grid-size) * 18); }
+ .nb19-m { margin-bottom: calc(-1 * var(--grid-size) * 19); }
+ .nb20-m { margin-bottom: calc(-1 * var(--grid-size) * 20); }
+ .nb25-m { margin-bottom: calc(-1 * var(--grid-size) * 25); }
+ .nb30-m { margin-bottom: calc(-1 * var(--grid-size) * 30); }
+ .nb40-m { margin-bottom: calc(-1 * var(--grid-size) * 40); }
+ .nb50-m { margin-bottom: calc(-1 * var(--grid-size) * 50); }
+
+ .nl0-m { margin-left: 0; }
+ .nl1-m { margin-left: calc(-1 * var(--grid-size) * 1); }
+ .nl2-m { margin-left: calc(-1 * var(--grid-size) * 2); }
+ .nl3-m { margin-left: calc(-1 * var(--grid-size) * 3); }
+ .nl4-m { margin-left: calc(-1 * var(--grid-size) * 4); }
+ .nl5-m { margin-left: calc(-1 * var(--grid-size) * 5); }
+ .nl6-m { margin-left: calc(-1 * var(--grid-size) * 6); }
+ .nl7-m { margin-left: calc(-1 * var(--grid-size) * 7); }
+ .nl8-m { margin-left: calc(-1 * var(--grid-size) * 8); }
+ .nl9-m { margin-left: calc(-1 * var(--grid-size) * 9); }
+ .nl10-m { margin-left: calc(-1 * var(--grid-size) * 10); }
+ .nl11-m { margin-left: calc(-1 * var(--grid-size) * 11); }
+ .nl12-m { margin-left: calc(-1 * var(--grid-size) * 12); }
+ .nl13-m { margin-left: calc(-1 * var(--grid-size) * 13); }
+ .nl14-m { margin-left: calc(-1 * var(--grid-size) * 14); }
+ .nl15-m { margin-left: calc(-1 * var(--grid-size) * 15); }
+ .nl16-m { margin-left: calc(-1 * var(--grid-size) * 16); }
+ .nl17-m { margin-left: calc(-1 * var(--grid-size) * 17); }
+ .nl18-m { margin-left: calc(-1 * var(--grid-size) * 18); }
+ .nl19-m { margin-left: calc(-1 * var(--grid-size) * 19); }
+ .nl20-m { margin-left: calc(-1 * var(--grid-size) * 20); }
+ .nl25-m { margin-left: calc(-1 * var(--grid-size) * 25); }
+ .nl30-m { margin-left: calc(-1 * var(--grid-size) * 30); }
+ .nl40-m { margin-left: calc(-1 * var(--grid-size) * 40); }
+ .nl50-m { margin-left: calc(-1 * var(--grid-size) * 50); }
+
+ .nt0-m { margin-top: 0; }
+ .nt1-m { margin-top: calc(-1 * var(--grid-size) * 1); }
+ .nt2-m { margin-top: calc(-1 * var(--grid-size) * 2); }
+ .nt3-m { margin-top: calc(-1 * var(--grid-size) * 3); }
+ .nt4-m { margin-top: calc(-1 * var(--grid-size) * 4); }
+ .nt5-m { margin-top: calc(-1 * var(--grid-size) * 5); }
+ .nt6-m { margin-top: calc(-1 * var(--grid-size) * 6); }
+ .nt7-m { margin-top: calc(-1 * var(--grid-size) * 7); }
+ .nt8-m { margin-top: calc(-1 * var(--grid-size) * 8); }
+ .nt9-m { margin-top: calc(-1 * var(--grid-size) * 9); }
+ .nt10-m { margin-top: calc(-1 * var(--grid-size) * 10); }
+ .nt11-m { margin-top: calc(-1 * var(--grid-size) * 11); }
+ .nt12-m { margin-top: calc(-1 * var(--grid-size) * 12); }
+ .nt13-m { margin-top: calc(-1 * var(--grid-size) * 13); }
+ .nt14-m { margin-top: calc(-1 * var(--grid-size) * 14); }
+ .nt15-m { margin-top: calc(-1 * var(--grid-size) * 15); }
+ .nt16-m { margin-top: calc(-1 * var(--grid-size) * 16); }
+ .nt17-m { margin-top: calc(-1 * var(--grid-size) * 17); }
+ .nt18-m { margin-top: calc(-1 * var(--grid-size) * 18); }
+ .nt19-m { margin-top: calc(-1 * var(--grid-size) * 19); }
+ .nt20-m { margin-top: calc(-1 * var(--grid-size) * 20); }
+ .nt25-m { margin-top: calc(-1 * var(--grid-size) * 25); }
+ .nt30-m { margin-top: calc(-1 * var(--grid-size) * 30); }
+ .nt40-m { margin-top: calc(-1 * var(--grid-size) * 40); }
+ .nt50-m { margin-top: calc(-1 * var(--grid-size) * 50); }
+}
+
+@media (--breakpoint-large) {
+ .na0-l { margin: 0; }
+ .na1-l { margin: calc(-1 * var(--grid-size) * 1); }
+ .na2-l { margin: calc(-1 * var(--grid-size) * 2); }
+ .na3-l { margin: calc(-1 * var(--grid-size) * 3); }
+ .na4-l { margin: calc(-1 * var(--grid-size) * 4); }
+ .na5-l { margin: calc(-1 * var(--grid-size) * 5); }
+ .na6-l { margin: calc(-1 * var(--grid-size) * 6); }
+ .na7-l { margin: calc(-1 * var(--grid-size) * 7); }
+ .na8-l { margin: calc(-1 * var(--grid-size) * 8); }
+ .na9-l { margin: calc(-1 * var(--grid-size) * 9); }
+ .na10-l { margin: calc(-1 * var(--grid-size) * 10); }
+ .na11-l { margin: calc(-1 * var(--grid-size) * 11); }
+ .na12-l { margin: calc(-1 * var(--grid-size) * 12); }
+ .na13-l { margin: calc(-1 * var(--grid-size) * 13); }
+ .na14-l { margin: calc(-1 * var(--grid-size) * 14); }
+ .na15-l { margin: calc(-1 * var(--grid-size) * 15); }
+ .na16-l { margin: calc(-1 * var(--grid-size) * 16); }
+ .na17-l { margin: calc(-1 * var(--grid-size) * 17); }
+ .na18-l { margin: calc(-1 * var(--grid-size) * 18); }
+ .na19-l { margin: calc(-1 * var(--grid-size) * 19); }
+ .na20-l { margin: calc(-1 * var(--grid-size) * 20); }
+ .na25-l { margin: calc(-1 * var(--grid-size) * 25); }
+ .na30-l { margin: calc(-1 * var(--grid-size) * 30); }
+ .na40-l { margin: calc(-1 * var(--grid-size) * 40); }
+ .na50-l { margin: calc(-1 * var(--grid-size) * 50); }
+
+ .nr0-l { margin-right: 0; }
+ .nr1-l { margin-right: calc(-1 * var(--grid-size) * 1); }
+ .nr2-l { margin-right: calc(-1 * var(--grid-size) * 2); }
+ .nr3-l { margin-right: calc(-1 * var(--grid-size) * 3); }
+ .nr4-l { margin-right: calc(-1 * var(--grid-size) * 4); }
+ .nr5-l { margin-right: calc(-1 * var(--grid-size) * 5); }
+ .nr6-l { margin-right: calc(-1 * var(--grid-size) * 6); }
+ .nr7-l { margin-right: calc(-1 * var(--grid-size) * 7); }
+ .nr8-l { margin-right: calc(-1 * var(--grid-size) * 8); }
+ .nr9-l { margin-right: calc(-1 * var(--grid-size) * 9); }
+ .nr10-l { margin-right: calc(-1 * var(--grid-size) * 10); }
+ .nr11-l { margin-right: calc(-1 * var(--grid-size) * 11); }
+ .nr12-l { margin-right: calc(-1 * var(--grid-size) * 12); }
+ .nr13-l { margin-right: calc(-1 * var(--grid-size) * 13); }
+ .nr14-l { margin-right: calc(-1 * var(--grid-size) * 14); }
+ .nr15-l { margin-right: calc(-1 * var(--grid-size) * 15); }
+ .nr16-l { margin-right: calc(-1 * var(--grid-size) * 16); }
+ .nr17-l { margin-right: calc(-1 * var(--grid-size) * 17); }
+ .nr18-l { margin-right: calc(-1 * var(--grid-size) * 18); }
+ .nr19-l { margin-right: calc(-1 * var(--grid-size) * 19); }
+ .nr20-l { margin-right: calc(-1 * var(--grid-size) * 20); }
+ .nr25-l { margin-right: calc(-1 * var(--grid-size) * 25); }
+ .nr30-l { margin-right: calc(-1 * var(--grid-size) * 30); }
+ .nr40-l { margin-right: calc(-1 * var(--grid-size) * 40); }
+ .nr50-l { margin-right: calc(-1 * var(--grid-size) * 50); }
+
+ .nb0-l { margin-bottom: 0; }
+ .nb1-l { margin-bottom: calc(-1 * var(--grid-size) * 1); }
+ .nb2-l { margin-bottom: calc(-1 * var(--grid-size) * 2); }
+ .nb3-l { margin-bottom: calc(-1 * var(--grid-size) * 3); }
+ .nb4-l { margin-bottom: calc(-1 * var(--grid-size) * 4); }
+ .nb5-l { margin-bottom: calc(-1 * var(--grid-size) * 5); }
+ .nb6-l { margin-bottom: calc(-1 * var(--grid-size) * 6); }
+ .nb7-l { margin-bottom: calc(-1 * var(--grid-size) * 7); }
+ .nb8-l { margin-bottom: calc(-1 * var(--grid-size) * 8); }
+ .nb9-l { margin-bottom: calc(-1 * var(--grid-size) * 9); }
+ .nb10-l { margin-bottom: calc(-1 * var(--grid-size) * 10); }
+ .nb11-l { margin-bottom: calc(-1 * var(--grid-size) * 11); }
+ .nb12-l { margin-bottom: calc(-1 * var(--grid-size) * 12); }
+ .nb13-l { margin-bottom: calc(-1 * var(--grid-size) * 13); }
+ .nb14-l { margin-bottom: calc(-1 * var(--grid-size) * 14); }
+ .nb15-l { margin-bottom: calc(-1 * var(--grid-size) * 15); }
+ .nb16-l { margin-bottom: calc(-1 * var(--grid-size) * 16); }
+ .nb17-l { margin-bottom: calc(-1 * var(--grid-size) * 17); }
+ .nb18-l { margin-bottom: calc(-1 * var(--grid-size) * 18); }
+ .nb19-l { margin-bottom: calc(-1 * var(--grid-size) * 19); }
+ .nb20-l { margin-bottom: calc(-1 * var(--grid-size) * 20); }
+ .nb25-l { margin-bottom: calc(-1 * var(--grid-size) * 25); }
+ .nb30-l { margin-bottom: calc(-1 * var(--grid-size) * 30); }
+ .nb40-l { margin-bottom: calc(-1 * var(--grid-size) * 40); }
+ .nb50-l { margin-bottom: calc(-1 * var(--grid-size) * 50); }
+
+ .nl0-l { margin-left: 0; }
+ .nl1-l { margin-left: calc(-1 * var(--grid-size) * 1); }
+ .nl2-l { margin-left: calc(-1 * var(--grid-size) * 2); }
+ .nl3-l { margin-left: calc(-1 * var(--grid-size) * 3); }
+ .nl4-l { margin-left: calc(-1 * var(--grid-size) * 4); }
+ .nl5-l { margin-left: calc(-1 * var(--grid-size) * 5); }
+ .nl6-l { margin-left: calc(-1 * var(--grid-size) * 6); }
+ .nl7-l { margin-left: calc(-1 * var(--grid-size) * 7); }
+ .nl8-l { margin-left: calc(-1 * var(--grid-size) * 8); }
+ .nl9-l { margin-left: calc(-1 * var(--grid-size) * 9); }
+ .nl10-l { margin-left: calc(-1 * var(--grid-size) * 10); }
+ .nl11-l { margin-left: calc(-1 * var(--grid-size) * 11); }
+ .nl12-l { margin-left: calc(-1 * var(--grid-size) * 12); }
+ .nl13-l { margin-left: calc(-1 * var(--grid-size) * 13); }
+ .nl14-l { margin-left: calc(-1 * var(--grid-size) * 14); }
+ .nl15-l { margin-left: calc(-1 * var(--grid-size) * 15); }
+ .nl16-l { margin-left: calc(-1 * var(--grid-size) * 16); }
+ .nl17-l { margin-left: calc(-1 * var(--grid-size) * 17); }
+ .nl18-l { margin-left: calc(-1 * var(--grid-size) * 18); }
+ .nl19-l { margin-left: calc(-1 * var(--grid-size) * 19); }
+ .nl20-l { margin-left: calc(-1 * var(--grid-size) * 20); }
+ .nl25-l { margin-left: calc(-1 * var(--grid-size) * 25); }
+ .nl30-l { margin-left: calc(-1 * var(--grid-size) * 30); }
+ .nl40-l { margin-left: calc(-1 * var(--grid-size) * 40); }
+ .nl50-l { margin-left: calc(-1 * var(--grid-size) * 50); }
+
+ .nt0-l { margin-top: 0; }
+ .nt1-l { margin-top: calc(-1 * var(--grid-size) * 1); }
+ .nt2-l { margin-top: calc(-1 * var(--grid-size) * 2); }
+ .nt3-l { margin-top: calc(-1 * var(--grid-size) * 3); }
+ .nt4-l { margin-top: calc(-1 * var(--grid-size) * 4); }
+ .nt5-l { margin-top: calc(-1 * var(--grid-size) * 5); }
+ .nt6-l { margin-top: calc(-1 * var(--grid-size) * 6); }
+ .nt7-l { margin-top: calc(-1 * var(--grid-size) * 7); }
+ .nt8-l { margin-top: calc(-1 * var(--grid-size) * 8); }
+ .nt9-l { margin-top: calc(-1 * var(--grid-size) * 9); }
+ .nt10-l { margin-top: calc(-1 * var(--grid-size) * 10); }
+ .nt11-l { margin-top: calc(-1 * var(--grid-size) * 11); }
+ .nt12-l { margin-top: calc(-1 * var(--grid-size) * 12); }
+ .nt13-l { margin-top: calc(-1 * var(--grid-size) * 13); }
+ .nt14-l { margin-top: calc(-1 * var(--grid-size) * 14); }
+ .nt15-l { margin-top: calc(-1 * var(--grid-size) * 15); }
+ .nt16-l { margin-top: calc(-1 * var(--grid-size) * 16); }
+ .nt17-l { margin-top: calc(-1 * var(--grid-size) * 17); }
+ .nt18-l { margin-top: calc(-1 * var(--grid-size) * 18); }
+ .nt19-l { margin-top: calc(-1 * var(--grid-size) * 19); }
+ .nt20-l { margin-top: calc(-1 * var(--grid-size) * 20); }
+ .nt25-l { margin-top: calc(-1 * var(--grid-size) * 25); }
+ .nt30-l { margin-top: calc(-1 * var(--grid-size) * 30); }
+ .nt40-l { margin-top: calc(-1 * var(--grid-size) * 40); }
+ .nt50-l { margin-top: calc(-1 * var(--grid-size) * 50); }
+}
diff --git a/ghost/admin/app/styles/spirit/_nested.css b/ghost/admin/app/styles/spirit/_nested.css
new file mode 100644
index 0000000000..dc833b608f
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_nested.css
@@ -0,0 +1,56 @@
+/*
+
+ NESTED
+ Tachyons module for styling nested elements
+ that are generated by a cms.
+
+*/
+
+.nested-copy-line-height p,
+.nested-copy-line-height ul,
+.nested-copy-line-height ol {
+ line-height: 1.5;
+}
+
+.nested-headline-line-height h1,
+.nested-headline-line-height h2,
+.nested-headline-line-height h3,
+.nested-headline-line-height h4,
+.nested-headline-line-height h5,
+.nested-headline-line-height h6 {
+ line-height: 1.25;
+}
+
+.nested-list-reset ul,
+.nested-list-reset ol {
+ padding-left: 0;
+ margin-left: 0;
+ list-style-type: none;
+}
+
+.nested-copy-indent p+p {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.nested-copy-separator p+p {
+ margin-top: 1.5em;
+}
+
+.nested-img img {
+ width: 100%;
+ max-width: 100%;
+ display: block;
+}
+
+.nested-links a {
+ color: var(--blue);
+ transition: color .15s ease-in;
+}
+
+.nested-links a:hover,
+.nested-links a:focus {
+ color: var(--blue);
+ transition: color .15s ease-in;
+}
diff --git a/ghost/admin/app/styles/spirit/_normalize.css b/ghost/admin/app/styles/spirit/_normalize.css
new file mode 100644
index 0000000000..b944659343
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_normalize.css
@@ -0,0 +1,449 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+ display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+ border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ /* font-family: sans-serif; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Scripting
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+ display: none;
+}
+
+/* Hidden
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/ghost/admin/app/styles/spirit/_nudge.css b/ghost/admin/app/styles/spirit/_nudge.css
new file mode 100644
index 0000000000..f3812766eb
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_nudge.css
@@ -0,0 +1,682 @@
+/*
+
+ Base:
+ nudge
+
+ Modifier:
+ -top = nudge from top (downwards)
+ -right = nudge from right (to left)
+ -bottom = nudge from bottom (upwards)
+ -left = nudge from left (to right)
+
+ Value:
+ --(n) = n px to nudge by
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.nudge-top--1 {
+ position: relative;
+ top: 1px;
+}
+.nudge-top--2 {
+ position: relative;
+ top: 2px;
+}
+.nudge-top--3 {
+ position: relative;
+ top: 3px;
+}
+.nudge-top--4 {
+ position: relative;
+ top: 4px;
+}
+.nudge-top--5 {
+ position: relative;
+ top: 5px;
+}
+.nudge-top--6 {
+ position: relative;
+ top: 6px;
+}
+.nudge-top--7 {
+ position: relative;
+ top: 7px;
+}
+.nudge-top--8 {
+ position: relative;
+ top: 8px;
+}
+.nudge-top--9 {
+ position: relative;
+ top: 9px;
+}
+.nudge-top--10 {
+ position: relative;
+ top: 10px;
+}
+
+.nudge-right--1 {
+ position: relative;
+ right: 1px;
+}
+.nudge-right--2 {
+ position: relative;
+ right: 2px;
+}
+.nudge-right--3 {
+ position: relative;
+ right: 3px;
+}
+.nudge-right--4 {
+ position: relative;
+ right: 4px;
+}
+.nudge-right--5 {
+ position: relative;
+ right: 5px;
+}
+.nudge-right--6 {
+ position: relative;
+ right: 6px;
+}
+.nudge-right--7 {
+ position: relative;
+ right: 7px;
+}
+.nudge-right--8 {
+ position: relative;
+ right: 8px;
+}
+.nudge-right--9 {
+ position: relative;
+ right: 9px;
+}
+.nudge-right--10 {
+ position: relative;
+ right: 10px;
+}
+
+.nudge-bottom--1 {
+ position: relative;
+ bottom: 1px;
+}
+.nudge-bottom--2 {
+ position: relative;
+ bottom: 2px;
+}
+.nudge-bottom--3 {
+ position: relative;
+ bottom: 3px;
+}
+.nudge-bottom--4 {
+ position: relative;
+ bottom: 4px;
+}
+.nudge-bottom--5 {
+ position: relative;
+ bottom: 5px;
+}
+.nudge-bottom--6 {
+ position: relative;
+ bottom: 6px;
+}
+.nudge-bottom--7 {
+ position: relative;
+ bottom: 7px;
+}
+.nudge-bottom--8 {
+ position: relative;
+ bottom: 8px;
+}
+.nudge-bottom--9 {
+ position: relative;
+ bottom: 9px;
+}
+.nudge-bottom--10 {
+ position: relative;
+ bottom: 10px;
+}
+
+.nudge-left--1 {
+ position: relative;
+ left: 1px;
+}
+.nudge-left--2 {
+ position: relative;
+ left: 2px;
+}
+.nudge-left--3 {
+ position: relative;
+ left: 3px;
+}
+.nudge-left--4 {
+ position: relative;
+ left: 4px;
+}
+.nudge-left--5 {
+ position: relative;
+ left: 5px;
+}
+.nudge-left--6 {
+ position: relative;
+ left: 6px;
+}
+.nudge-left--7 {
+ position: relative;
+ left: 7px;
+}
+.nudge-left--8 {
+ position: relative;
+ left: 8px;
+}
+.nudge-left--9 {
+ position: relative;
+ left: 9px;
+}
+.nudge-left--10 {
+ position: relative;
+ left: 10px;
+}
+
+@media (--breakpoint-not-small) {
+ .nudge-top--1-ns {
+ position: relative;
+ top: 1px;
+ }
+ .nudge-top--2-ns {
+ position: relative;
+ top: 2px;
+ }
+ .nudge-top--3-ns {
+ position: relative;
+ top: 3px;
+ }
+ .nudge-top--4-ns {
+ position: relative;
+ top: 4px;
+ }
+ .nudge-top--5-ns {
+ position: relative;
+ top: 5px;
+ }
+ .nudge-top--6-ns {
+ position: relative;
+ top: 6px;
+ }
+ .nudge-top--7-ns {
+ position: relative;
+ top: 7px;
+ }
+ .nudge-top--8-ns {
+ position: relative;
+ top: 8px;
+ }
+ .nudge-top--9-ns {
+ position: relative;
+ top: 9px;
+ }
+ .nudge-top--10-ns {
+ position: relative;
+ top: 10px;
+ }
+
+ .nudge-right--1-ns {
+ position: relative;
+ right: 1px;
+ }
+ .nudge-right--2-ns {
+ position: relative;
+ right: 2px;
+ }
+ .nudge-right--3-ns {
+ position: relative;
+ right: 3px;
+ }
+ .nudge-right--4-ns {
+ position: relative;
+ right: 4px;
+ }
+ .nudge-right--5-ns {
+ position: relative;
+ right: 5px;
+ }
+ .nudge-right--6-ns {
+ position: relative;
+ right: 6px;
+ }
+ .nudge-right--7-ns {
+ position: relative;
+ right: 7px;
+ }
+ .nudge-right--8-ns {
+ position: relative;
+ right: 8px;
+ }
+ .nudge-right--9-ns {
+ position: relative;
+ right: 9px;
+ }
+ .nudge-right--10-ns {
+ position: relative;
+ right: 10px;
+ }
+
+ .nudge-bottom--1-ns {
+ position: relative;
+ bottom: 1px;
+ }
+ .nudge-bottom--2-ns {
+ position: relative;
+ bottom: 2px;
+ }
+ .nudge-bottom--3-ns {
+ position: relative;
+ bottom: 3px;
+ }
+ .nudge-bottom--4-ns {
+ position: relative;
+ bottom: 4px;
+ }
+ .nudge-bottom--5-ns {
+ position: relative;
+ bottom: 5px;
+ }
+ .nudge-bottom--6-ns {
+ position: relative;
+ bottom: 6px;
+ }
+ .nudge-bottom--7-ns {
+ position: relative;
+ bottom: 7px;
+ }
+ .nudge-bottom--8-ns {
+ position: relative;
+ bottom: 8px;
+ }
+ .nudge-bottom--9-ns {
+ position: relative;
+ bottom: 9px;
+ }
+ .nudge-bottom--10-ns {
+ position: relative;
+ bottom: 10px;
+ }
+
+ .nudge-left--1-ns {
+ position: relative;
+ left: 1px;
+ }
+ .nudge-left--2-ns {
+ position: relative;
+ left: 2px;
+ }
+ .nudge-left--3-ns {
+ position: relative;
+ left: 3px;
+ }
+ .nudge-left--4-ns {
+ position: relative;
+ left: 4px;
+ }
+ .nudge-left--5-ns {
+ position: relative;
+ left: 5px;
+ }
+ .nudge-left--6-ns {
+ position: relative;
+ left: 6px;
+ }
+ .nudge-left--7-ns {
+ position: relative;
+ left: 7px;
+ }
+ .nudge-left--8-ns {
+ position: relative;
+ left: 8px;
+ }
+ .nudge-left--9-ns {
+ position: relative;
+ left: 9px;
+ }
+ .nudge-left--10-ns {
+ position: relative;
+ left: 10px;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .nudge-top--1-m {
+ position: relative;
+ top: 1px;
+ }
+ .nudge-top--2-m {
+ position: relative;
+ top: 2px;
+ }
+ .nudge-top--3-m {
+ position: relative;
+ top: 3px;
+ }
+ .nudge-top--4-m {
+ position: relative;
+ top: 4px;
+ }
+ .nudge-top--5-m {
+ position: relative;
+ top: 5px;
+ }
+ .nudge-top--6-m {
+ position: relative;
+ top: 6px;
+ }
+ .nudge-top--7-m {
+ position: relative;
+ top: 7px;
+ }
+ .nudge-top--8-m {
+ position: relative;
+ top: 8px;
+ }
+ .nudge-top--9-m {
+ position: relative;
+ top: 9px;
+ }
+ .nudge-top--10-m {
+ position: relative;
+ top: 10px;
+ }
+
+ .nudge-right--1-m {
+ position: relative;
+ right: 1px;
+ }
+ .nudge-right--2-m {
+ position: relative;
+ right: 2px;
+ }
+ .nudge-right--3-m {
+ position: relative;
+ right: 3px;
+ }
+ .nudge-right--4-m {
+ position: relative;
+ right: 4px;
+ }
+ .nudge-right--5-m {
+ position: relative;
+ right: 5px;
+ }
+ .nudge-right--6-m {
+ position: relative;
+ right: 6px;
+ }
+ .nudge-right--7-m {
+ position: relative;
+ right: 7px;
+ }
+ .nudge-right--8-m {
+ position: relative;
+ right: 8px;
+ }
+ .nudge-right--9-m {
+ position: relative;
+ right: 9px;
+ }
+ .nudge-right--10-m {
+ position: relative;
+ right: 10px;
+ }
+
+ .nudge-bottom--1-m {
+ position: relative;
+ bottom: 1px;
+ }
+ .nudge-bottom--2-m {
+ position: relative;
+ bottom: 2px;
+ }
+ .nudge-bottom--3-m {
+ position: relative;
+ bottom: 3px;
+ }
+ .nudge-bottom--4-m {
+ position: relative;
+ bottom: 4px;
+ }
+ .nudge-bottom--5-m {
+ position: relative;
+ bottom: 5px;
+ }
+ .nudge-bottom--6-m {
+ position: relative;
+ bottom: 6px;
+ }
+ .nudge-bottom--7-m {
+ position: relative;
+ bottom: 7px;
+ }
+ .nudge-bottom--8-m {
+ position: relative;
+ bottom: 8px;
+ }
+ .nudge-bottom--9-m {
+ position: relative;
+ bottom: 9px;
+ }
+ .nudge-bottom--10-m {
+ position: relative;
+ bottom: 10px;
+ }
+
+ .nudge-left--1-m {
+ position: relative;
+ left: 1px;
+ }
+ .nudge-left--2-m {
+ position: relative;
+ left: 2px;
+ }
+ .nudge-left--3-m {
+ position: relative;
+ left: 3px;
+ }
+ .nudge-left--4-m {
+ position: relative;
+ left: 4px;
+ }
+ .nudge-left--5-m {
+ position: relative;
+ left: 5px;
+ }
+ .nudge-left--6-m {
+ position: relative;
+ left: 6px;
+ }
+ .nudge-left--7-m {
+ position: relative;
+ left: 7px;
+ }
+ .nudge-left--8-m {
+ position: relative;
+ left: 8px;
+ }
+ .nudge-left--9-m {
+ position: relative;
+ left: 9px;
+ }
+ .nudge-left--10-m {
+ position: relative;
+ left: 10px;
+ }
+}
+
+@media (--breakpoint-large) {
+ .nudge-top--1-l {
+ position: relative;
+ top: 1px;
+ }
+ .nudge-top--2-l {
+ position: relative;
+ top: 2px;
+ }
+ .nudge-top--3-l {
+ position: relative;
+ top: 3px;
+ }
+ .nudge-top--4-l {
+ position: relative;
+ top: 4px;
+ }
+ .nudge-top--5-l {
+ position: relative;
+ top: 5px;
+ }
+ .nudge-top--6-l {
+ position: relative;
+ top: 6px;
+ }
+ .nudge-top--7-l {
+ position: relative;
+ top: 7px;
+ }
+ .nudge-top--8-l {
+ position: relative;
+ top: 8px;
+ }
+ .nudge-top--9-l {
+ position: relative;
+ top: 9px;
+ }
+ .nudge-top--10-l {
+ position: relative;
+ top: 10px;
+ }
+
+ .nudge-right--1-l {
+ position: relative;
+ right: 1px;
+ }
+ .nudge-right--2-l {
+ position: relative;
+ right: 2px;
+ }
+ .nudge-right--3-l {
+ position: relative;
+ right: 3px;
+ }
+ .nudge-right--4-l {
+ position: relative;
+ right: 4px;
+ }
+ .nudge-right--5-l {
+ position: relative;
+ right: 5px;
+ }
+ .nudge-right--6-l {
+ position: relative;
+ right: 6px;
+ }
+ .nudge-right--7-l {
+ position: relative;
+ right: 7px;
+ }
+ .nudge-right--8-l {
+ position: relative;
+ right: 8px;
+ }
+ .nudge-right--9-l {
+ position: relative;
+ right: 9px;
+ }
+ .nudge-right--10-l {
+ position: relative;
+ right: 10px;
+ }
+
+ .nudge-bottom--1-l {
+ position: relative;
+ bottom: 1px;
+ }
+ .nudge-bottom--2-l {
+ position: relative;
+ bottom: 2px;
+ }
+ .nudge-bottom--3-l {
+ position: relative;
+ bottom: 3px;
+ }
+ .nudge-bottom--4-l {
+ position: relative;
+ bottom: 4px;
+ }
+ .nudge-bottom--5-l {
+ position: relative;
+ bottom: 5px;
+ }
+ .nudge-bottom--6-l {
+ position: relative;
+ bottom: 6px;
+ }
+ .nudge-bottom--7-l {
+ position: relative;
+ bottom: 7px;
+ }
+ .nudge-bottom--8-l {
+ position: relative;
+ bottom: 8px;
+ }
+ .nudge-bottom--9-l {
+ position: relative;
+ bottom: 9px;
+ }
+ .nudge-bottom--10-l {
+ position: relative;
+ bottom: 10px;
+ }
+
+ .nudge-left--1-l {
+ position: relative;
+ left: 1px;
+ }
+ .nudge-left--2-l {
+ position: relative;
+ left: 2px;
+ }
+ .nudge-left--3-l {
+ position: relative;
+ left: 3px;
+ }
+ .nudge-left--4-l {
+ position: relative;
+ left: 4px;
+ }
+ .nudge-left--5-l {
+ position: relative;
+ left: 5px;
+ }
+ .nudge-left--6-l {
+ position: relative;
+ left: 6px;
+ }
+ .nudge-left--7-l {
+ position: relative;
+ left: 7px;
+ }
+ .nudge-left--8-l {
+ position: relative;
+ left: 8px;
+ }
+ .nudge-left--9-l {
+ position: relative;
+ left: 9px;
+ }
+ .nudge-left--10-l {
+ position: relative;
+ left: 10px;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_opacity.css b/ghost/admin/app/styles/spirit/_opacity.css
new file mode 100644
index 0000000000..9f3de143ee
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_opacity.css
@@ -0,0 +1,13 @@
+.o-100 { opacity: 1; }
+.o-90 { opacity: .9; }
+.o-80 { opacity: .8; }
+.o-70 { opacity: .7; }
+.o-60 { opacity: .6; }
+.o-50 { opacity: .5; }
+.o-40 { opacity: .4; }
+.o-30 { opacity: .3; }
+.o-20 { opacity: .2; }
+.o-10 { opacity: .1; }
+.o-05 { opacity: .05; }
+.o-025 { opacity: .025; }
+.o-0 { opacity: 0; }
diff --git a/ghost/admin/app/styles/spirit/_outlines.css b/ghost/admin/app/styles/spirit/_outlines.css
new file mode 100644
index 0000000000..e9b0ed996b
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_outlines.css
@@ -0,0 +1,32 @@
+/*
+
+ OUTLINES
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.outline { outline: 1px solid; }
+.outline-transparent { outline: 1px solid transparent; }
+.outline-0 { outline: 0; }
+
+@media (--breakpoint-not-small) {
+ .outline-ns { outline: 1px solid; }
+ .outline-transparent-ns { outline: 1px solid transparent; }
+ .outline-0-ns { outline: 0; }
+}
+
+@media (--breakpoint-medium) {
+ .outline-m { outline: 1px solid; }
+ .outline-transparent-m { outline: 1px solid transparent; }
+ .outline-0-m { outline: 0; }
+}
+
+@media (--breakpoint-large) {
+ .outline-l { outline: 1px solid; }
+ .outline-transparent-l { outline: 1px solid transparent; }
+ .outline-0-l { outline: 0; }
+}
diff --git a/ghost/admin/app/styles/spirit/_overflow.css b/ghost/admin/app/styles/spirit/_overflow.css
new file mode 100644
index 0000000000..82ca8ebbc4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_overflow.css
@@ -0,0 +1,75 @@
+/*
+
+ OVERFLOW
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+
+@media (--breakpoint-not-small) {
+ .overflow-visible-ns { overflow: visible; }
+ .overflow-hidden-ns { overflow: hidden; }
+ .overflow-scroll-ns { overflow: scroll; }
+ .overflow-auto-ns { overflow: auto; }
+ .overflow-x-visible-ns { overflow-x: visible; }
+ .overflow-x-hidden-ns { overflow-x: hidden; }
+ .overflow-x-scroll-ns { overflow-x: scroll; }
+ .overflow-x-auto-ns { overflow-x: auto; }
+
+ .overflow-y-visible-ns { overflow-y: visible; }
+ .overflow-y-hidden-ns { overflow-y: hidden; }
+ .overflow-y-scroll-ns { overflow-y: scroll; }
+ .overflow-y-auto-ns { overflow-y: auto; }
+}
+
+@media (--breakpoint-medium) {
+ .overflow-visible-m { overflow: visible; }
+ .overflow-hidden-m { overflow: hidden; }
+ .overflow-scroll-m { overflow: scroll; }
+ .overflow-auto-m { overflow: auto; }
+
+ .overflow-x-visible-m { overflow-x: visible; }
+ .overflow-x-hidden-m { overflow-x: hidden; }
+ .overflow-x-scroll-m { overflow-x: scroll; }
+ .overflow-x-auto-m { overflow-x: auto; }
+
+ .overflow-y-visible-m { overflow-y: visible; }
+ .overflow-y-hidden-m { overflow-y: hidden; }
+ .overflow-y-scroll-m { overflow-y: scroll; }
+ .overflow-y-auto-m { overflow-y: auto; }
+}
+
+@media (--breakpoint-large) {
+ .overflow-visible-l { overflow: visible; }
+ .overflow-hidden-l { overflow: hidden; }
+ .overflow-scroll-l { overflow: scroll; }
+ .overflow-auto-l { overflow: auto; }
+
+ .overflow-x-visible-l { overflow-x: visible; }
+ .overflow-x-hidden-l { overflow-x: hidden; }
+ .overflow-x-scroll-l { overflow-x: scroll; }
+ .overflow-x-auto-l { overflow-x: auto; }
+
+ .overflow-y-visible-l { overflow-y: visible; }
+ .overflow-y-hidden-l { overflow-y: hidden; }
+ .overflow-y-scroll-l { overflow-y: scroll; }
+ .overflow-y-auto-l { overflow-y: auto; }
+}
diff --git a/ghost/admin/app/styles/spirit/_pointer-events.css b/ghost/admin/app/styles/spirit/_pointer-events.css
new file mode 100644
index 0000000000..d93c35be7d
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_pointer-events.css
@@ -0,0 +1,24 @@
+/*
+
+ POINTER EVENTS
+
+ Base:
+ pe = pointer-events
+
+*/
+
+.pe-auto { pointer-events: auto; }
+.pe-none { pointer-events: none; }
+.pe-inherit { pointer-events: inherit; }
+.pe-initial { pointer-events: initial; }
+.pe-unset { pointer-events: unset; }
+
+/* SVG only events */
+.pe-visiblePainted { pointer-events: visiblePainted; }
+.pe-visibleFill { pointer-events: visibleFill; }
+.pe-visibleStroke { pointer-events: visibleStroke; }
+.pe-visible { pointer-events: visible; }
+.pe-painted { pointer-events: painted; }
+.pe-fill { pointer-events: fill; }
+.pe-stroke { pointer-events: stroke; }
+.pe-all { pointer-events: all; }
diff --git a/ghost/admin/app/styles/spirit/_position.css b/ghost/admin/app/styles/spirit/_position.css
new file mode 100644
index 0000000000..b8f7331985
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_position.css
@@ -0,0 +1,38 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+@media (--breakpoint-not-small) {
+ .static-ns { position: static; }
+ .relative-ns { position: relative; }
+ .absolute-ns { position: absolute; }
+ .fixed-ns { position: fixed; }
+ .sticky-ns { position: sticky; }
+}
+
+@media (--breakpoint-medium) {
+ .static-m { position: static; }
+ .relative-m { position: relative; }
+ .absolute-m { position: absolute; }
+ .fixed-m { position: fixed; }
+ .sticky-m { position: sticky; }
+}
+
+@media (--breakpoint-large) {
+ .static-l { position: static; }
+ .relative-l { position: relative; }
+ .absolute-l { position: absolute; }
+ .fixed-l { position: fixed; }
+ .sticky-l { position: sticky; }
+}
diff --git a/ghost/admin/app/styles/spirit/_rotations.css b/ghost/admin/app/styles/spirit/_rotations.css
new file mode 100644
index 0000000000..5adf7aad28
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_rotations.css
@@ -0,0 +1,43 @@
+/*
+
+ ROTATIONS
+
+*/
+
+.rotate-45 { transform: rotate(45deg); }
+.rotate-90 { transform: rotate(90deg); }
+.rotate-135 { transform: rotate(135deg); }
+.rotate-180 { transform: rotate(180deg); }
+.rotate-225 { transform: rotate(225deg); }
+.rotate-270 { transform: rotate(270deg); }
+.rotate-315 { transform: rotate(315deg); }
+
+@media (--breakpoint-not-small){
+ .rotate-45-ns { transform: rotate(45deg); }
+ .rotate-90-ns { transform: rotate(90deg); }
+ .rotate-135-ns { transform: rotate(135deg); }
+ .rotate-180-ns { transform: rotate(180deg); }
+ .rotate-225-ns { transform: rotate(225deg); }
+ .rotate-270-ns { transform: rotate(270deg); }
+ .rotate-315-ns { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-medium){
+ .rotate-45-m { transform: rotate(45deg); }
+ .rotate-90-m { transform: rotate(90deg); }
+ .rotate-135-m { transform: rotate(135deg); }
+ .rotate-180-m { transform: rotate(180deg); }
+ .rotate-225-m { transform: rotate(225deg); }
+ .rotate-270-m { transform: rotate(270deg); }
+ .rotate-315-m { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-large){
+ .rotate-45-l { transform: rotate(45deg); }
+ .rotate-90-l { transform: rotate(90deg); }
+ .rotate-135-l { transform: rotate(135deg); }
+ .rotate-180-l { transform: rotate(180deg); }
+ .rotate-225-l { transform: rotate(225deg); }
+ .rotate-270-l { transform: rotate(270deg); }
+ .rotate-315-l { transform: rotate(315deg); }
+}
diff --git a/ghost/admin/app/styles/spirit/_skins.css b/ghost/admin/app/styles/spirit/_skins.css
new file mode 100644
index 0000000000..6aff5e84e2
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_skins.css
@@ -0,0 +1,224 @@
+/* Text colors */
+
+.blue { color: var(--blue); }
+.green { color: var(--green); }
+.purple { color: var(--purple); }
+.yellow { color: var(--yellow); }
+.red { color: var(--red); }
+.pink { color: var(--pink); }
+.white { color: var(--white); }
+
+.white-10 { color: var(--white-10); }
+.white-20 { color: var(--white-20); }
+.white-30 { color: var(--white-30); }
+.white-40 { color: var(--white-40); }
+.white-50 { color: var(--white-50); }
+.white-60 { color: var(--white-60); }
+.white-70 { color: var(--white-70); }
+.white-80 { color: var(--white-80); }
+.white-90 { color: var(--white-90); }
+
+.black-10 { color: var(--black-10); }
+.black-20 { color: var(--black-20); }
+.black-30 { color: var(--black-30); }
+.black-40 { color: var(--black-40); }
+.black-50 { color: var(--black-50); }
+.black-60 { color: var(--black-60); }
+.black-70 { color: var(--black-70); }
+.black-80 { color: var(--black-80); }
+.black-90 { color: var(--black-90); }
+
+.darkgrey { color: var(--darkgrey); }
+.middarkgrey { color: var(--middarkgrey); }
+.midgrey { color: var(--midgrey); }
+.midlightgrey { color: var(--midlightgrey); }
+.lightgrey { color: var(--lightgrey); }
+.whitegrey { color: var(--whitegrey); }
+
+/* Shades */
+.blue-l3 { color: var(--blue-l3); }
+.blue-l2 { color: var(--blue-l2); }
+.blue-l1 { color: var(--blue-l1); }
+.blue-d1 { color: var(--blue-d1); }
+.blue-d2 { color: var(--blue-d2); }
+.blue-d3 { color: var(--blue-d3); }
+
+.green-l3 { color: var(--green-l3); }
+.green-l2 { color: var(--green-l2); }
+.green-l1 { color: var(--green-l1); }
+.green-d1 { color: var(--green-d1); }
+.green-d2 { color: var(--green-d2); }
+.green-d3 { color: var(--green-d3); }
+
+.purple-l3 { color: var(--purple-l3); }
+.purple-l2 { color: var(--purple-l2); }
+.purple-l1 { color: var(--purple-l1); }
+.purple-d1 { color: var(--purple-d1); }
+.purple-d2 { color: var(--purple-d2); }
+.purple-d3 { color: var(--purple-d3); }
+
+.yellow-l3 { color: var(--yellow-l3); }
+.yellow-l2 { color: var(--yellow-l2); }
+.yellow-l1 { color: var(--yellow-l1); }
+.yellow-d1 { color: var(--yellow-d1); }
+.yellow-d2 { color: var(--yellow-d2); }
+.yellow-d3 { color: var(--yellow-d3); }
+
+.red-l3 { color: var(--red-l3); }
+.red-l2 { color: var(--red-l2); }
+.red-l1 { color: var(--red-l1); }
+.red-d1 { color: var(--red-d1); }
+.red-d2 { color: var(--red-d2); }
+.red-d3 { color: var(--red-d3); }
+
+.pink-l3 { color: var(--pink-l3); }
+.pink-l2 { color: var(--pink-l2); }
+.pink-l1 { color: var(--pink-l1); }
+.pink-d1 { color: var(--pink-d1); }
+.pink-d2 { color: var(--pink-d2); }
+.pink-d3 { color: var(--pink-d3); }
+
+.darkgrey-l2 { color: var(--darkgrey-l2); }
+.darkgrey-l1 { color: var(--darkgrey-l1); }
+.darkgrey-d1 { color: var(--darkgrey-d1); }
+.darkgrey-d2 { color: var(--darkgrey-d2); }
+
+.middarkgrey-l2 { color: var(--middarkgrey-l2); }
+.middarkgrey-l1 { color: var(--middarkgrey-l1); }
+.middarkgrey-d1 { color: var(--middarkgrey-d1); }
+.middarkgrey-d2 { color: var(--middarkgrey-d2); }
+
+.midgrey-l2 { color: var(--midgrey-l2); }
+.midgrey-l1 { color: var(--midgrey-l1); }
+.midgrey-d1 { color: var(--midgrey-d1); }
+.midgrey-d2 { color: var(--midgrey-d2); }
+
+.midlightgrey-l2 { color: var(--midlightgrey-l2); }
+.midlightgrey-l1 { color: var(--midlightgrey-l1); }
+.midlightgrey-d1 { color: var(--midlightgrey-d1); }
+.midlightgrey-d2 { color: var(--midlightgrey-d2); }
+
+.lightgrey-l2 { color: var(--lightgrey-l2); }
+.lightgrey-l1 { color: var(--lightgrey-l1); }
+.lightgrey-d1 { color: var(--lightgrey-d1); }
+.lightgrey-d2 { color: var(--lightgrey-d2); }
+
+.whitegrey-l2 { color: var(--whitegrey-l2); }
+.whitegrey-l1 { color: var(--whitegrey-l1); }
+.whitegrey-d1 { color: var(--whitegrey-d1); }
+.whitegrey-d2 { color: var(--whitegrey-d2); }
+
+.color-inherit { color: inherit; }
+
+/* Background colors */
+.bg-blue { background-color: var(--blue); }
+.bg-green { background-color: var(--green); }
+.bg-purple { background-color: var(--purple); }
+.bg-yellow { background-color: var(--yellow); }
+.bg-red { background-color: var(--red); }
+.bg-pink { background-color: var(--pink); }
+.bg-white { background-color: var(--white); }
+.bg-transparent { background-color: transparent !important;}
+
+.bg-white-10 { background-color: var(--white-10); }
+.bg-white-20 { background-color: var(--white-20); }
+.bg-white-30 { background-color: var(--white-30); }
+.bg-white-40 { background-color: var(--white-40); }
+.bg-white-50 { background-color: var(--white-50); }
+.bg-white-60 { background-color: var(--white-60); }
+.bg-white-70 { background-color: var(--white-70); }
+.bg-white-80 { background-color: var(--white-80); }
+.bg-white-90 { background-color: var(--white-90); }
+
+.bg-black-10 { background-color: var(--black-10); }
+.bg-black-20 { background-color: var(--black-20); }
+.bg-black-30 { background-color: var(--black-30); }
+.bg-black-40 { background-color: var(--black-40); }
+.bg-black-50 { background-color: var(--black-50); }
+.bg-black-60 { background-color: var(--black-60); }
+.bg-black-70 { background-color: var(--black-70); }
+.bg-black-80 { background-color: var(--black-80); }
+.bg-black-90 { background-color: var(--black-90); }
+
+.bg-darkgrey { background-color: var(--darkgrey); }
+.bg-middarkgrey { background-color: var(--middarkgrey); }
+.bg-midgrey { background-color: var(--midgrey); }
+.bg-midlightgrey { background-color: var(--midlightgrey); }
+.bg-lightgrey { background-color: var(--lightgrey); }
+.bg-whitegrey { background-color: var(--whitegrey); }
+
+/* Shades */
+.bg-blue-l3 { background-color: var(--blue-l3); }
+.bg-blue-l2 { background-color: var(--blue-l2); }
+.bg-blue-l1 { background-color: var(--blue-l1); }
+.bg-blue-d1 { background-color: var(--blue-d1); }
+.bg-blue-d2 { background-color: var(--blue-d2); }
+.bg-blue-d3 { background-color: var(--blue-d3); }
+
+.bg-green-l3 { background-color: var(--green-l3); }
+.bg-green-l2 { background-color: var(--green-l2); }
+.bg-green-l1 { background-color: var(--green-l1); }
+.bg-green-d1 { background-color: var(--green-d1); }
+.bg-green-d2 { background-color: var(--green-d2); }
+.bg-green-d3 { background-color: var(--green-d3); }
+
+.bg-purple-l3 { background-color: var(--purple-l3); }
+.bg-purple-l2 { background-color: var(--purple-l2); }
+.bg-purple-l1 { background-color: var(--purple-l1); }
+.bg-purple-d1 { background-color: var(--purple-d1); }
+.bg-purple-d2 { background-color: var(--purple-d2); }
+.bg-purple-d3 { background-color: var(--purple-d3); }
+
+.bg-yellow-l3 { background-color: var(--yellow-l3); }
+.bg-yellow-l2 { background-color: var(--yellow-l2); }
+.bg-yellow-l1 { background-color: var(--yellow-l1); }
+.bg-yellow-d1 { background-color: var(--yellow-d1); }
+.bg-yellow-d2 { background-color: var(--yellow-d2); }
+.bg-yellow-d3 { background-color: var(--yellow-d3); }
+
+.bg-red-l3 { background-color: var(--red-l3); }
+.bg-red-l2 { background-color: var(--red-l2); }
+.bg-red-l1 { background-color: var(--red-l1); }
+.bg-red-d1 { background-color: var(--red-d1); }
+.bg-red-d2 { background-color: var(--red-d2); }
+.bg-red-d3 { background-color: var(--red-d3); }
+
+.bg-pink-l3 { background-color: var(--pink-l3); }
+.bg-pink-l2 { background-color: var(--pink-l2); }
+.bg-pink-l1 { background-color: var(--pink-l1); }
+.bg-pink-d1 { background-color: var(--pink-d1); }
+.bg-pink-d2 { background-color: var(--pink-d2); }
+.bg-pink-d3 { background-color: var(--pink-d3); }
+
+.bg-darkgrey-l2 { background-color: var(--darkgrey-l2); }
+.bg-darkgrey-l1 { background-color: var(--darkgrey-l1); }
+.bg-darkgrey-d1 { background-color: var(--darkgrey-d1); }
+.bg-darkgrey-d2 { background-color: var(--darkgrey-d2); }
+
+.bg-middarkgrey-l2 { background-color: var(--middarkgrey-l2); }
+.bg-middarkgrey-l1 { background-color: var(--middarkgrey-l1); }
+.bg-middarkgrey-d1 { background-color: var(--middarkgrey-d1); }
+.bg-middarkgrey-d2 { background-color: var(--middarkgrey-d2); }
+
+.bg-midgrey-l2 { background-color: var(--midgrey-l2); }
+.bg-midgrey-l1 { background-color: var(--midgrey-l1); }
+.bg-midgrey-d1 { background-color: var(--midgrey-d1); }
+.bg-midgrey-d2 { background-color: var(--midgrey-d2); }
+
+.bg-midlightgrey-l2 { background-color: var(--midlightgrey-l2); }
+.bg-midlightgrey-l1 { background-color: var(--midlightgrey-l1); }
+.bg-midlightgrey-d1 { background-color: var(--midlightgrey-d1); }
+.bg-midlightgrey-d2 { background-color: var(--midlightgrey-d2); }
+
+.bg-lightgrey-l2 { background-color: var(--lightgrey-l2); }
+.bg-lightgrey-l1 { background-color: var(--lightgrey-l1); }
+.bg-lightgrey-d1 { background-color: var(--lightgrey-d1); }
+.bg-lightgrey-d2 { background-color: var(--lightgrey-d2); }
+
+.bg-whitegrey-l2 { background-color: var(--whitegrey-l2); }
+.bg-whitegrey-l1 { background-color: var(--whitegrey-l1); }
+.bg-whitegrey-d1 { background-color: var(--whitegrey-d1); }
+.bg-whitegrey-d2 { background-color: var(--whitegrey-d2); }
+
+/* Special colors */
+.bg-error-red { background-color: var(--errorbg-lightred); }
diff --git a/ghost/admin/app/styles/spirit/_spacing.css b/ghost/admin/app/styles/spirit/_spacing.css
new file mode 100644
index 0000000000..369d19b502
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_spacing.css
@@ -0,0 +1,1072 @@
+/*
+
+ Base:
+ p = padding
+ m = margin
+
+ Modifier:
+ a = all
+ r = right
+ b = bottom
+ l = left
+ t = top
+
+ Value:
+ (n) = (n * grid size)
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+:root {
+ --grid-size: .4rem;
+}
+
+.pa0 { padding: 0; }
+.pa1 { padding: calc(var(--grid-size) * 1); }
+.pa2 { padding: calc(var(--grid-size) * 2); }
+.pa3 { padding: calc(var(--grid-size) * 3); }
+.pa4 { padding: calc(var(--grid-size) * 4); }
+.pa5 { padding: calc(var(--grid-size) * 5); }
+.pa6 { padding: calc(var(--grid-size) * 6); }
+.pa7 { padding: calc(var(--grid-size) * 7); }
+.pa8 { padding: calc(var(--grid-size) * 8); }
+.pa9 { padding: calc(var(--grid-size) * 9); }
+.pa10 { padding: calc(var(--grid-size) * 10); }
+.pa11 { padding: calc(var(--grid-size) * 11); }
+.pa12 { padding: calc(var(--grid-size) * 12); }
+.pa13 { padding: calc(var(--grid-size) * 13); }
+.pa14 { padding: calc(var(--grid-size) * 14); }
+.pa15 { padding: calc(var(--grid-size) * 15); }
+.pa16 { padding: calc(var(--grid-size) * 16); }
+.pa17 { padding: calc(var(--grid-size) * 17); }
+.pa18 { padding: calc(var(--grid-size) * 18); }
+.pa19 { padding: calc(var(--grid-size) * 19); }
+.pa20 { padding: calc(var(--grid-size) * 20); }
+.pa25 { padding: calc(var(--grid-size) * 25); }
+.pa30 { padding: calc(var(--grid-size) * 30); }
+.pa40 { padding: calc(var(--grid-size) * 40); }
+.pa50 { padding: calc(var(--grid-size) * 50); }
+
+.pr0 { padding-right: 0; }
+.pr1 { padding-right: calc(var(--grid-size) * 1); }
+.pr2 { padding-right: calc(var(--grid-size) * 2); }
+.pr3 { padding-right: calc(var(--grid-size) * 3); }
+.pr4 { padding-right: calc(var(--grid-size) * 4); }
+.pr5 { padding-right: calc(var(--grid-size) * 5); }
+.pr6 { padding-right: calc(var(--grid-size) * 6); }
+.pr7 { padding-right: calc(var(--grid-size) * 7); }
+.pr8 { padding-right: calc(var(--grid-size) * 8); }
+.pr9 { padding-right: calc(var(--grid-size) * 9); }
+.pr10 { padding-right: calc(var(--grid-size) * 10); }
+.pr11 { padding-right: calc(var(--grid-size) * 11); }
+.pr12 { padding-right: calc(var(--grid-size) * 12); }
+.pr13 { padding-right: calc(var(--grid-size) * 13); }
+.pr14 { padding-right: calc(var(--grid-size) * 14); }
+.pr15 { padding-right: calc(var(--grid-size) * 15); }
+.pr16 { padding-right: calc(var(--grid-size) * 16); }
+.pr17 { padding-right: calc(var(--grid-size) * 17); }
+.pr18 { padding-right: calc(var(--grid-size) * 18); }
+.pr19 { padding-right: calc(var(--grid-size) * 19); }
+.pr20 { padding-right: calc(var(--grid-size) * 20); }
+.pr25 { padding-right: calc(var(--grid-size) * 25); }
+.pr30 { padding-right: calc(var(--grid-size) * 30); }
+.pr40 { padding-right: calc(var(--grid-size) * 40); }
+.pr50 { padding-right: calc(var(--grid-size) * 50); }
+
+.pb0 { padding-bottom: 0; }
+.pb1 { padding-bottom: calc(var(--grid-size) * 1); }
+.pb2 { padding-bottom: calc(var(--grid-size) * 2); }
+.pb3 { padding-bottom: calc(var(--grid-size) * 3); }
+.pb4 { padding-bottom: calc(var(--grid-size) * 4); }
+.pb5 { padding-bottom: calc(var(--grid-size) * 5); }
+.pb6 { padding-bottom: calc(var(--grid-size) * 6); }
+.pb7 { padding-bottom: calc(var(--grid-size) * 7); }
+.pb8 { padding-bottom: calc(var(--grid-size) * 8); }
+.pb9 { padding-bottom: calc(var(--grid-size) * 9); }
+.pb10 { padding-bottom: calc(var(--grid-size) * 10); }
+.pb11 { padding-bottom: calc(var(--grid-size) * 11); }
+.pb12 { padding-bottom: calc(var(--grid-size) * 12); }
+.pb13 { padding-bottom: calc(var(--grid-size) * 13); }
+.pb14 { padding-bottom: calc(var(--grid-size) * 14); }
+.pb15 { padding-bottom: calc(var(--grid-size) * 15); }
+.pb16 { padding-bottom: calc(var(--grid-size) * 16); }
+.pb17 { padding-bottom: calc(var(--grid-size) * 17); }
+.pb18 { padding-bottom: calc(var(--grid-size) * 18); }
+.pb19 { padding-bottom: calc(var(--grid-size) * 19); }
+.pb20 { padding-bottom: calc(var(--grid-size) * 20); }
+.pb25 { padding-bottom: calc(var(--grid-size) * 25); }
+.pb30 { padding-bottom: calc(var(--grid-size) * 30); }
+.pb40 { padding-bottom: calc(var(--grid-size) * 40); }
+.pb50 { padding-bottom: calc(var(--grid-size) * 50); }
+
+.pl0 { padding-left: 0; }
+.pl1 { padding-left: calc(var(--grid-size) * 1); }
+.pl2 { padding-left: calc(var(--grid-size) * 2); }
+.pl3 { padding-left: calc(var(--grid-size) * 3); }
+.pl4 { padding-left: calc(var(--grid-size) * 4); }
+.pl5 { padding-left: calc(var(--grid-size) * 5); }
+.pl6 { padding-left: calc(var(--grid-size) * 6); }
+.pl7 { padding-left: calc(var(--grid-size) * 7); }
+.pl8 { padding-left: calc(var(--grid-size) * 8); }
+.pl9 { padding-left: calc(var(--grid-size) * 9); }
+.pl10 { padding-left: calc(var(--grid-size) * 10); }
+.pl11 { padding-left: calc(var(--grid-size) * 11); }
+.pl12 { padding-left: calc(var(--grid-size) * 12); }
+.pl13 { padding-left: calc(var(--grid-size) * 13); }
+.pl14 { padding-left: calc(var(--grid-size) * 14); }
+.pl15 { padding-left: calc(var(--grid-size) * 15); }
+.pl16 { padding-left: calc(var(--grid-size) * 16); }
+.pl17 { padding-left: calc(var(--grid-size) * 17); }
+.pl18 { padding-left: calc(var(--grid-size) * 18); }
+.pl19 { padding-left: calc(var(--grid-size) * 19); }
+.pl20 { padding-left: calc(var(--grid-size) * 20); }
+.pl25 { padding-left: calc(var(--grid-size) * 25); }
+.pl30 { padding-left: calc(var(--grid-size) * 30); }
+.pl40 { padding-left: calc(var(--grid-size) * 40); }
+.pl50 { padding-left: calc(var(--grid-size) * 50); }
+
+.pt0 { padding-top: 0; }
+.pt1 { padding-top: calc(var(--grid-size) * 1); }
+.pt2 { padding-top: calc(var(--grid-size) * 2); }
+.pt3 { padding-top: calc(var(--grid-size) * 3); }
+.pt4 { padding-top: calc(var(--grid-size) * 4); }
+.pt5 { padding-top: calc(var(--grid-size) * 5); }
+.pt6 { padding-top: calc(var(--grid-size) * 6); }
+.pt7 { padding-top: calc(var(--grid-size) * 7); }
+.pt8 { padding-top: calc(var(--grid-size) * 8); }
+.pt9 { padding-top: calc(var(--grid-size) * 9); }
+.pt10 { padding-top: calc(var(--grid-size) * 10); }
+.pt11 { padding-top: calc(var(--grid-size) * 11); }
+.pt12 { padding-top: calc(var(--grid-size) * 12); }
+.pt13 { padding-top: calc(var(--grid-size) * 13); }
+.pt14 { padding-top: calc(var(--grid-size) * 14); }
+.pt15 { padding-top: calc(var(--grid-size) * 15); }
+.pt16 { padding-top: calc(var(--grid-size) * 16); }
+.pt17 { padding-top: calc(var(--grid-size) * 17); }
+.pt18 { padding-top: calc(var(--grid-size) * 18); }
+.pt19 { padding-top: calc(var(--grid-size) * 19); }
+.pt20 { padding-top: calc(var(--grid-size) * 20); }
+.pt25 { padding-top: calc(var(--grid-size) * 25); }
+.pt30 { padding-top: calc(var(--grid-size) * 30); }
+.pt40 { padding-top: calc(var(--grid-size) * 40); }
+.pt50 { padding-top: calc(var(--grid-size) * 50); }
+
+.ma0 { margin: 0; }
+.ma1 { margin: calc(var(--grid-size) * 1); }
+.ma2 { margin: calc(var(--grid-size) * 2); }
+.ma3 { margin: calc(var(--grid-size) * 3); }
+.ma4 { margin: calc(var(--grid-size) * 4); }
+.ma5 { margin: calc(var(--grid-size) * 5); }
+.ma6 { margin: calc(var(--grid-size) * 6); }
+.ma7 { margin: calc(var(--grid-size) * 7); }
+.ma8 { margin: calc(var(--grid-size) * 8); }
+.ma9 { margin: calc(var(--grid-size) * 9); }
+.ma10 { margin: calc(var(--grid-size) * 10); }
+.ma11 { margin: calc(var(--grid-size) * 11); }
+.ma12 { margin: calc(var(--grid-size) * 12); }
+.ma13 { margin: calc(var(--grid-size) * 13); }
+.ma14 { margin: calc(var(--grid-size) * 14); }
+.ma15 { margin: calc(var(--grid-size) * 15); }
+.ma16 { margin: calc(var(--grid-size) * 16); }
+.ma17 { margin: calc(var(--grid-size) * 17); }
+.ma18 { margin: calc(var(--grid-size) * 18); }
+.ma19 { margin: calc(var(--grid-size) * 19); }
+.ma20 { margin: calc(var(--grid-size) * 20); }
+.ma25 { margin: calc(var(--grid-size) * 25); }
+.ma30 { margin: calc(var(--grid-size) * 30); }
+.ma40 { margin: calc(var(--grid-size) * 40); }
+.ma50 { margin: calc(var(--grid-size) * 50); }
+
+.mr0 { margin-right: 0; }
+.mr1 { margin-right: calc(var(--grid-size) * 1); }
+.mr2 { margin-right: calc(var(--grid-size) * 2); }
+.mr3 { margin-right: calc(var(--grid-size) * 3); }
+.mr4 { margin-right: calc(var(--grid-size) * 4); }
+.mr5 { margin-right: calc(var(--grid-size) * 5); }
+.mr6 { margin-right: calc(var(--grid-size) * 6); }
+.mr7 { margin-right: calc(var(--grid-size) * 7); }
+.mr8 { margin-right: calc(var(--grid-size) * 8); }
+.mr9 { margin-right: calc(var(--grid-size) * 9); }
+.mr10 { margin-right: calc(var(--grid-size) * 10); }
+.mr11 { margin-right: calc(var(--grid-size) * 11); }
+.mr12 { margin-right: calc(var(--grid-size) * 12); }
+.mr13 { margin-right: calc(var(--grid-size) * 13); }
+.mr14 { margin-right: calc(var(--grid-size) * 14); }
+.mr15 { margin-right: calc(var(--grid-size) * 15); }
+.mr16 { margin-right: calc(var(--grid-size) * 16); }
+.mr17 { margin-right: calc(var(--grid-size) * 17); }
+.mr18 { margin-right: calc(var(--grid-size) * 18); }
+.mr19 { margin-right: calc(var(--grid-size) * 19); }
+.mr20 { margin-right: calc(var(--grid-size) * 20); }
+.mr25 { margin-right: calc(var(--grid-size) * 25); }
+.mr30 { margin-right: calc(var(--grid-size) * 30); }
+.mr40 { margin-right: calc(var(--grid-size) * 40); }
+.mr50 { margin-right: calc(var(--grid-size) * 50); }
+
+.mb0 { margin-bottom: 0; }
+.mb1 { margin-bottom: calc(var(--grid-size) * 1); }
+.mb2 { margin-bottom: calc(var(--grid-size) * 2); }
+.mb3 { margin-bottom: calc(var(--grid-size) * 3); }
+.mb4 { margin-bottom: calc(var(--grid-size) * 4); }
+.mb5 { margin-bottom: calc(var(--grid-size) * 5); }
+.mb6 { margin-bottom: calc(var(--grid-size) * 6); }
+.mb7 { margin-bottom: calc(var(--grid-size) * 7); }
+.mb8 { margin-bottom: calc(var(--grid-size) * 8); }
+.mb9 { margin-bottom: calc(var(--grid-size) * 9); }
+.mb10 { margin-bottom: calc(var(--grid-size) * 10); }
+.mb11 { margin-bottom: calc(var(--grid-size) * 11); }
+.mb12 { margin-bottom: calc(var(--grid-size) * 12); }
+.mb13 { margin-bottom: calc(var(--grid-size) * 13); }
+.mb14 { margin-bottom: calc(var(--grid-size) * 14); }
+.mb15 { margin-bottom: calc(var(--grid-size) * 15); }
+.mb16 { margin-bottom: calc(var(--grid-size) * 16); }
+.mb17 { margin-bottom: calc(var(--grid-size) * 17); }
+.mb18 { margin-bottom: calc(var(--grid-size) * 18); }
+.mb19 { margin-bottom: calc(var(--grid-size) * 19); }
+.mb20 { margin-bottom: calc(var(--grid-size) * 20); }
+.mb25 { margin-bottom: calc(var(--grid-size) * 25); }
+.mb30 { margin-bottom: calc(var(--grid-size) * 30); }
+.mb40 { margin-bottom: calc(var(--grid-size) * 40); }
+.mb50 { margin-bottom: calc(var(--grid-size) * 50); }
+
+.ml0 { margin-left: 0; }
+.ml1 { margin-left: calc(var(--grid-size) * 1); }
+.ml2 { margin-left: calc(var(--grid-size) * 2); }
+.ml3 { margin-left: calc(var(--grid-size) * 3); }
+.ml4 { margin-left: calc(var(--grid-size) * 4); }
+.ml5 { margin-left: calc(var(--grid-size) * 5); }
+.ml6 { margin-left: calc(var(--grid-size) * 6); }
+.ml7 { margin-left: calc(var(--grid-size) * 7); }
+.ml8 { margin-left: calc(var(--grid-size) * 8); }
+.ml9 { margin-left: calc(var(--grid-size) * 9); }
+.ml10 { margin-left: calc(var(--grid-size) * 10); }
+.ml11 { margin-left: calc(var(--grid-size) * 11); }
+.ml12 { margin-left: calc(var(--grid-size) * 12); }
+.ml13 { margin-left: calc(var(--grid-size) * 13); }
+.ml14 { margin-left: calc(var(--grid-size) * 14); }
+.ml15 { margin-left: calc(var(--grid-size) * 15); }
+.ml16 { margin-left: calc(var(--grid-size) * 16); }
+.ml17 { margin-left: calc(var(--grid-size) * 17); }
+.ml18 { margin-left: calc(var(--grid-size) * 18); }
+.ml19 { margin-left: calc(var(--grid-size) * 19); }
+.ml20 { margin-left: calc(var(--grid-size) * 20); }
+.ml25 { margin-left: calc(var(--grid-size) * 25); }
+.ml30 { margin-left: calc(var(--grid-size) * 30); }
+.ml40 { margin-left: calc(var(--grid-size) * 40); }
+.ml50 { margin-left: calc(var(--grid-size) * 50); }
+
+.mt0 { margin-top: 0; }
+.mt1 { margin-top: calc(var(--grid-size) * 1); }
+.mt2 { margin-top: calc(var(--grid-size) * 2); }
+.mt3 { margin-top: calc(var(--grid-size) * 3); }
+.mt4 { margin-top: calc(var(--grid-size) * 4); }
+.mt5 { margin-top: calc(var(--grid-size) * 5); }
+.mt6 { margin-top: calc(var(--grid-size) * 6); }
+.mt7 { margin-top: calc(var(--grid-size) * 7); }
+.mt8 { margin-top: calc(var(--grid-size) * 8); }
+.mt9 { margin-top: calc(var(--grid-size) * 9); }
+.mt10 { margin-top: calc(var(--grid-size) * 10); }
+.mt11 { margin-top: calc(var(--grid-size) * 11); }
+.mt12 { margin-top: calc(var(--grid-size) * 12); }
+.mt13 { margin-top: calc(var(--grid-size) * 13); }
+.mt14 { margin-top: calc(var(--grid-size) * 14); }
+.mt15 { margin-top: calc(var(--grid-size) * 15); }
+.mt16 { margin-top: calc(var(--grid-size) * 16); }
+.mt17 { margin-top: calc(var(--grid-size) * 17); }
+.mt18 { margin-top: calc(var(--grid-size) * 18); }
+.mt19 { margin-top: calc(var(--grid-size) * 19); }
+.mt20 { margin-top: calc(var(--grid-size) * 20); }
+.mt25 { margin-top: calc(var(--grid-size) * 25); }
+.mt30 { margin-top: calc(var(--grid-size) * 30); }
+.mt40 { margin-top: calc(var(--grid-size) * 40); }
+.mt50 { margin-top: calc(var(--grid-size) * 50); }
+
+@media (--breakpoint-not-small) {
+ .pa0-ns { padding: 0; }
+ .pa1-ns { padding: calc(var(--grid-size) * 1); }
+ .pa2-ns { padding: calc(var(--grid-size) * 2); }
+ .pa3-ns { padding: calc(var(--grid-size) * 3); }
+ .pa4-ns { padding: calc(var(--grid-size) * 4); }
+ .pa5-ns { padding: calc(var(--grid-size) * 5); }
+ .pa6-ns { padding: calc(var(--grid-size) * 6); }
+ .pa7-ns { padding: calc(var(--grid-size) * 7); }
+ .pa8-ns { padding: calc(var(--grid-size) * 8); }
+ .pa9-ns { padding: calc(var(--grid-size) * 9); }
+ .pa10-ns { padding: calc(var(--grid-size) * 10); }
+ .pa11-ns { padding: calc(var(--grid-size) * 11); }
+ .pa12-ns { padding: calc(var(--grid-size) * 12); }
+ .pa13-ns { padding: calc(var(--grid-size) * 13); }
+ .pa14-ns { padding: calc(var(--grid-size) * 14); }
+ .pa15-ns { padding: calc(var(--grid-size) * 15); }
+ .pa16-ns { padding: calc(var(--grid-size) * 16); }
+ .pa17-ns { padding: calc(var(--grid-size) * 17); }
+ .pa18-ns { padding: calc(var(--grid-size) * 18); }
+ .pa19-ns { padding: calc(var(--grid-size) * 19); }
+ .pa20-ns { padding: calc(var(--grid-size) * 20); }
+ .pa25-ns { padding: calc(var(--grid-size) * 25); }
+ .pa30-ns { padding: calc(var(--grid-size) * 30); }
+ .pa40-ns { padding: calc(var(--grid-size) * 40); }
+ .pa50-ns { padding: calc(var(--grid-size) * 50); }
+
+ .pr0-ns { padding-right: 0; }
+ .pr1-ns { padding-right: calc(var(--grid-size) * 1); }
+ .pr2-ns { padding-right: calc(var(--grid-size) * 2); }
+ .pr3-ns { padding-right: calc(var(--grid-size) * 3); }
+ .pr4-ns { padding-right: calc(var(--grid-size) * 4); }
+ .pr5-ns { padding-right: calc(var(--grid-size) * 5); }
+ .pr6-ns { padding-right: calc(var(--grid-size) * 6); }
+ .pr7-ns { padding-right: calc(var(--grid-size) * 7); }
+ .pr8-ns { padding-right: calc(var(--grid-size) * 8); }
+ .pr9-ns { padding-right: calc(var(--grid-size) * 9); }
+ .pr10-ns { padding-right: calc(var(--grid-size) * 10); }
+ .pr11-ns { padding-right: calc(var(--grid-size) * 11); }
+ .pr12-ns { padding-right: calc(var(--grid-size) * 12); }
+ .pr13-ns { padding-right: calc(var(--grid-size) * 13); }
+ .pr14-ns { padding-right: calc(var(--grid-size) * 14); }
+ .pr15-ns { padding-right: calc(var(--grid-size) * 15); }
+ .pr16-ns { padding-right: calc(var(--grid-size) * 16); }
+ .pr17-ns { padding-right: calc(var(--grid-size) * 17); }
+ .pr18-ns { padding-right: calc(var(--grid-size) * 18); }
+ .pr19-ns { padding-right: calc(var(--grid-size) * 19); }
+ .pr20-ns { padding-right: calc(var(--grid-size) * 20); }
+ .pr25-ns { padding-right: calc(var(--grid-size) * 25); }
+ .pr30-ns { padding-right: calc(var(--grid-size) * 30); }
+ .pr40-ns { padding-right: calc(var(--grid-size) * 40); }
+ .pr50-ns { padding-right: calc(var(--grid-size) * 50); }
+
+ .pb0-ns { padding-bottom: 0; }
+ .pb1-ns { padding-bottom: calc(var(--grid-size) * 1); }
+ .pb2-ns { padding-bottom: calc(var(--grid-size) * 2); }
+ .pb3-ns { padding-bottom: calc(var(--grid-size) * 3); }
+ .pb4-ns { padding-bottom: calc(var(--grid-size) * 4); }
+ .pb5-ns { padding-bottom: calc(var(--grid-size) * 5); }
+ .pb6-ns { padding-bottom: calc(var(--grid-size) * 6); }
+ .pb7-ns { padding-bottom: calc(var(--grid-size) * 7); }
+ .pb8-ns { padding-bottom: calc(var(--grid-size) * 8); }
+ .pb9-ns { padding-bottom: calc(var(--grid-size) * 9); }
+ .pb10-ns { padding-bottom: calc(var(--grid-size) * 10); }
+ .pb11-ns { padding-bottom: calc(var(--grid-size) * 11); }
+ .pb12-ns { padding-bottom: calc(var(--grid-size) * 12); }
+ .pb13-ns { padding-bottom: calc(var(--grid-size) * 13); }
+ .pb14-ns { padding-bottom: calc(var(--grid-size) * 14); }
+ .pb15-ns { padding-bottom: calc(var(--grid-size) * 15); }
+ .pb16-ns { padding-bottom: calc(var(--grid-size) * 16); }
+ .pb17-ns { padding-bottom: calc(var(--grid-size) * 17); }
+ .pb18-ns { padding-bottom: calc(var(--grid-size) * 18); }
+ .pb19-ns { padding-bottom: calc(var(--grid-size) * 19); }
+ .pb20-ns { padding-bottom: calc(var(--grid-size) * 20); }
+ .pb25-ns { padding-bottom: calc(var(--grid-size) * 25); }
+ .pb30-ns { padding-bottom: calc(var(--grid-size) * 30); }
+ .pb40-ns { padding-bottom: calc(var(--grid-size) * 40); }
+ .pb50-ns { padding-bottom: calc(var(--grid-size) * 50); }
+
+ .pl0-ns { padding-left: 0; }
+ .pl1-ns { padding-left: calc(var(--grid-size) * 1); }
+ .pl2-ns { padding-left: calc(var(--grid-size) * 2); }
+ .pl3-ns { padding-left: calc(var(--grid-size) * 3); }
+ .pl4-ns { padding-left: calc(var(--grid-size) * 4); }
+ .pl5-ns { padding-left: calc(var(--grid-size) * 5); }
+ .pl6-ns { padding-left: calc(var(--grid-size) * 6); }
+ .pl7-ns { padding-left: calc(var(--grid-size) * 7); }
+ .pl8-ns { padding-left: calc(var(--grid-size) * 8); }
+ .pl9-ns { padding-left: calc(var(--grid-size) * 9); }
+ .pl10-ns { padding-left: calc(var(--grid-size) * 10); }
+ .pl11-ns { padding-left: calc(var(--grid-size) * 11); }
+ .pl12-ns { padding-left: calc(var(--grid-size) * 12); }
+ .pl13-ns { padding-left: calc(var(--grid-size) * 13); }
+ .pl14-ns { padding-left: calc(var(--grid-size) * 14); }
+ .pl15-ns { padding-left: calc(var(--grid-size) * 15); }
+ .pl16-ns { padding-left: calc(var(--grid-size) * 16); }
+ .pl17-ns { padding-left: calc(var(--grid-size) * 17); }
+ .pl18-ns { padding-left: calc(var(--grid-size) * 18); }
+ .pl19-ns { padding-left: calc(var(--grid-size) * 19); }
+ .pl20-ns { padding-left: calc(var(--grid-size) * 20); }
+ .pl25-ns { padding-left: calc(var(--grid-size) * 25); }
+ .pl30-ns { padding-left: calc(var(--grid-size) * 30); }
+ .pl40-ns { padding-left: calc(var(--grid-size) * 40); }
+ .pl50-ns { padding-left: calc(var(--grid-size) * 50); }
+
+ .pt0-ns { padding-top: 0; }
+ .pt1-ns { padding-top: calc(var(--grid-size) * 1); }
+ .pt2-ns { padding-top: calc(var(--grid-size) * 2); }
+ .pt3-ns { padding-top: calc(var(--grid-size) * 3); }
+ .pt4-ns { padding-top: calc(var(--grid-size) * 4); }
+ .pt5-ns { padding-top: calc(var(--grid-size) * 5); }
+ .pt6-ns { padding-top: calc(var(--grid-size) * 6); }
+ .pt7-ns { padding-top: calc(var(--grid-size) * 7); }
+ .pt8-ns { padding-top: calc(var(--grid-size) * 8); }
+ .pt9-ns { padding-top: calc(var(--grid-size) * 9); }
+ .pt10-ns { padding-top: calc(var(--grid-size) * 10); }
+ .pt11-ns { padding-top: calc(var(--grid-size) * 11); }
+ .pt12-ns { padding-top: calc(var(--grid-size) * 12); }
+ .pt13-ns { padding-top: calc(var(--grid-size) * 13); }
+ .pt14-ns { padding-top: calc(var(--grid-size) * 14); }
+ .pt15-ns { padding-top: calc(var(--grid-size) * 15); }
+ .pt16-ns { padding-top: calc(var(--grid-size) * 16); }
+ .pt17-ns { padding-top: calc(var(--grid-size) * 17); }
+ .pt18-ns { padding-top: calc(var(--grid-size) * 18); }
+ .pt19-ns { padding-top: calc(var(--grid-size) * 19); }
+ .pt20-ns { padding-top: calc(var(--grid-size) * 20); }
+ .pt25-ns { padding-top: calc(var(--grid-size) * 25); }
+ .pt30-ns { padding-top: calc(var(--grid-size) * 30); }
+ .pt40-ns { padding-top: calc(var(--grid-size) * 40); }
+ .pt50-ns { padding-top: calc(var(--grid-size) * 50); }
+
+ .ma0-ns { margin: 0; }
+ .ma1-ns { margin: calc(var(--grid-size) * 1); }
+ .ma2-ns { margin: calc(var(--grid-size) * 2); }
+ .ma3-ns { margin: calc(var(--grid-size) * 3); }
+ .ma4-ns { margin: calc(var(--grid-size) * 4); }
+ .ma5-ns { margin: calc(var(--grid-size) * 5); }
+ .ma6-ns { margin: calc(var(--grid-size) * 6); }
+ .ma7-ns { margin: calc(var(--grid-size) * 7); }
+ .ma8-ns { margin: calc(var(--grid-size) * 8); }
+ .ma9-ns { margin: calc(var(--grid-size) * 9); }
+ .ma10-ns { margin: calc(var(--grid-size) * 10); }
+ .ma11-ns { margin: calc(var(--grid-size) * 11); }
+ .ma12-ns { margin: calc(var(--grid-size) * 12); }
+ .ma13-ns { margin: calc(var(--grid-size) * 13); }
+ .ma14-ns { margin: calc(var(--grid-size) * 14); }
+ .ma15-ns { margin: calc(var(--grid-size) * 15); }
+ .ma16-ns { margin: calc(var(--grid-size) * 16); }
+ .ma17-ns { margin: calc(var(--grid-size) * 17); }
+ .ma18-ns { margin: calc(var(--grid-size) * 18); }
+ .ma19-ns { margin: calc(var(--grid-size) * 19); }
+ .ma20-ns { margin: calc(var(--grid-size) * 20); }
+ .ma25-ns { margin: calc(var(--grid-size) * 25); }
+ .ma30-ns { margin: calc(var(--grid-size) * 30); }
+ .ma40-ns { margin: calc(var(--grid-size) * 40); }
+ .ma50-ns { margin: calc(var(--grid-size) * 50); }
+
+ .mr0-ns { margin-right: 0; }
+ .mr1-ns { margin-right: calc(var(--grid-size) * 1); }
+ .mr2-ns { margin-right: calc(var(--grid-size) * 2); }
+ .mr3-ns { margin-right: calc(var(--grid-size) * 3); }
+ .mr4-ns { margin-right: calc(var(--grid-size) * 4); }
+ .mr5-ns { margin-right: calc(var(--grid-size) * 5); }
+ .mr6-ns { margin-right: calc(var(--grid-size) * 6); }
+ .mr7-ns { margin-right: calc(var(--grid-size) * 7); }
+ .mr8-ns { margin-right: calc(var(--grid-size) * 8); }
+ .mr9-ns { margin-right: calc(var(--grid-size) * 9); }
+ .mr10-ns { margin-right: calc(var(--grid-size) * 10); }
+ .mr11-ns { margin-right: calc(var(--grid-size) * 11); }
+ .mr12-ns { margin-right: calc(var(--grid-size) * 12); }
+ .mr13-ns { margin-right: calc(var(--grid-size) * 13); }
+ .mr14-ns { margin-right: calc(var(--grid-size) * 14); }
+ .mr15-ns { margin-right: calc(var(--grid-size) * 15); }
+ .mr16-ns { margin-right: calc(var(--grid-size) * 16); }
+ .mr17-ns { margin-right: calc(var(--grid-size) * 17); }
+ .mr18-ns { margin-right: calc(var(--grid-size) * 18); }
+ .mr19-ns { margin-right: calc(var(--grid-size) * 19); }
+ .mr20-ns { margin-right: calc(var(--grid-size) * 20); }
+ .mr25-ns { margin-right: calc(var(--grid-size) * 25); }
+ .mr30-ns { margin-right: calc(var(--grid-size) * 30); }
+ .mr40-ns { margin-right: calc(var(--grid-size) * 40); }
+ .mr50-ns { margin-right: calc(var(--grid-size) * 50); }
+
+ .mb0-ns { margin-bottom: 0; }
+ .mb1-ns { margin-bottom: calc(var(--grid-size) * 1); }
+ .mb2-ns { margin-bottom: calc(var(--grid-size) * 2); }
+ .mb3-ns { margin-bottom: calc(var(--grid-size) * 3); }
+ .mb4-ns { margin-bottom: calc(var(--grid-size) * 4); }
+ .mb5-ns { margin-bottom: calc(var(--grid-size) * 5); }
+ .mb6-ns { margin-bottom: calc(var(--grid-size) * 6); }
+ .mb7-ns { margin-bottom: calc(var(--grid-size) * 7); }
+ .mb8-ns { margin-bottom: calc(var(--grid-size) * 8); }
+ .mb9-ns { margin-bottom: calc(var(--grid-size) * 9); }
+ .mb10-ns { margin-bottom: calc(var(--grid-size) * 10); }
+ .mb11-ns { margin-bottom: calc(var(--grid-size) * 11); }
+ .mb12-ns { margin-bottom: calc(var(--grid-size) * 12); }
+ .mb13-ns { margin-bottom: calc(var(--grid-size) * 13); }
+ .mb14-ns { margin-bottom: calc(var(--grid-size) * 14); }
+ .mb15-ns { margin-bottom: calc(var(--grid-size) * 15); }
+ .mb16-ns { margin-bottom: calc(var(--grid-size) * 16); }
+ .mb17-ns { margin-bottom: calc(var(--grid-size) * 17); }
+ .mb18-ns { margin-bottom: calc(var(--grid-size) * 18); }
+ .mb19-ns { margin-bottom: calc(var(--grid-size) * 19); }
+ .mb20-ns { margin-bottom: calc(var(--grid-size) * 20); }
+ .mb25-ns { margin-bottom: calc(var(--grid-size) * 25); }
+ .mb30-ns { margin-bottom: calc(var(--grid-size) * 30); }
+ .mb40-ns { margin-bottom: calc(var(--grid-size) * 40); }
+ .mb50-ns { margin-bottom: calc(var(--grid-size) * 50); }
+
+ .ml0-ns { margin-left: 0; }
+ .ml1-ns { margin-left: calc(var(--grid-size) * 1); }
+ .ml2-ns { margin-left: calc(var(--grid-size) * 2); }
+ .ml3-ns { margin-left: calc(var(--grid-size) * 3); }
+ .ml4-ns { margin-left: calc(var(--grid-size) * 4); }
+ .ml5-ns { margin-left: calc(var(--grid-size) * 5); }
+ .ml6-ns { margin-left: calc(var(--grid-size) * 6); }
+ .ml7-ns { margin-left: calc(var(--grid-size) * 7); }
+ .ml8-ns { margin-left: calc(var(--grid-size) * 8); }
+ .ml9-ns { margin-left: calc(var(--grid-size) * 9); }
+ .ml10-ns { margin-left: calc(var(--grid-size) * 10); }
+ .ml11-ns { margin-left: calc(var(--grid-size) * 11); }
+ .ml12-ns { margin-left: calc(var(--grid-size) * 12); }
+ .ml13-ns { margin-left: calc(var(--grid-size) * 13); }
+ .ml14-ns { margin-left: calc(var(--grid-size) * 14); }
+ .ml15-ns { margin-left: calc(var(--grid-size) * 15); }
+ .ml16-ns { margin-left: calc(var(--grid-size) * 16); }
+ .ml17-ns { margin-left: calc(var(--grid-size) * 17); }
+ .ml18-ns { margin-left: calc(var(--grid-size) * 18); }
+ .ml19-ns { margin-left: calc(var(--grid-size) * 19); }
+ .ml20-ns { margin-left: calc(var(--grid-size) * 20); }
+ .ml25-ns { margin-left: calc(var(--grid-size) * 25); }
+ .ml30-ns { margin-left: calc(var(--grid-size) * 30); }
+ .ml40-ns { margin-left: calc(var(--grid-size) * 40); }
+ .ml50-ns { margin-left: calc(var(--grid-size) * 50); }
+
+ .mt0-ns { margin-top: 0; }
+ .mt1-ns { margin-top: calc(var(--grid-size) * 1); }
+ .mt2-ns { margin-top: calc(var(--grid-size) * 2); }
+ .mt3-ns { margin-top: calc(var(--grid-size) * 3); }
+ .mt4-ns { margin-top: calc(var(--grid-size) * 4); }
+ .mt5-ns { margin-top: calc(var(--grid-size) * 5); }
+ .mt6-ns { margin-top: calc(var(--grid-size) * 6); }
+ .mt7-ns { margin-top: calc(var(--grid-size) * 7); }
+ .mt8-ns { margin-top: calc(var(--grid-size) * 8); }
+ .mt9-ns { margin-top: calc(var(--grid-size) * 9); }
+ .mt10-ns { margin-top: calc(var(--grid-size) * 10); }
+ .mt11-ns { margin-top: calc(var(--grid-size) * 11); }
+ .mt12-ns { margin-top: calc(var(--grid-size) * 12); }
+ .mt13-ns { margin-top: calc(var(--grid-size) * 13); }
+ .mt14-ns { margin-top: calc(var(--grid-size) * 14); }
+ .mt15-ns { margin-top: calc(var(--grid-size) * 15); }
+ .mt16-ns { margin-top: calc(var(--grid-size) * 16); }
+ .mt17-ns { margin-top: calc(var(--grid-size) * 17); }
+ .mt18-ns { margin-top: calc(var(--grid-size) * 18); }
+ .mt19-ns { margin-top: calc(var(--grid-size) * 19); }
+ .mt20-ns { margin-top: calc(var(--grid-size) * 20); }
+ .mt25-ns { margin-top: calc(var(--grid-size) * 25); }
+ .mt30-ns { margin-top: calc(var(--grid-size) * 30); }
+ .mt40-ns { margin-top: calc(var(--grid-size) * 40); }
+ .mt50-ns { margin-top: calc(var(--grid-size) * 50); }
+}
+
+@media (--breakpoint-medium) {
+ .pa0-m { padding: 0; }
+ .pa1-m { padding: calc(var(--grid-size) * 1); }
+ .pa2-m { padding: calc(var(--grid-size) * 2); }
+ .pa3-m { padding: calc(var(--grid-size) * 3); }
+ .pa4-m { padding: calc(var(--grid-size) * 4); }
+ .pa5-m { padding: calc(var(--grid-size) * 5); }
+ .pa6-m { padding: calc(var(--grid-size) * 6); }
+ .pa7-m { padding: calc(var(--grid-size) * 7); }
+ .pa8-m { padding: calc(var(--grid-size) * 8); }
+ .pa9-m { padding: calc(var(--grid-size) * 9); }
+ .pa10-m { padding: calc(var(--grid-size) * 10); }
+ .pa11-m { padding: calc(var(--grid-size) * 11); }
+ .pa12-m { padding: calc(var(--grid-size) * 12); }
+ .pa13-m { padding: calc(var(--grid-size) * 13); }
+ .pa14-m { padding: calc(var(--grid-size) * 14); }
+ .pa15-m { padding: calc(var(--grid-size) * 15); }
+ .pa16-m { padding: calc(var(--grid-size) * 16); }
+ .pa17-m { padding: calc(var(--grid-size) * 17); }
+ .pa18-m { padding: calc(var(--grid-size) * 18); }
+ .pa19-m { padding: calc(var(--grid-size) * 19); }
+ .pa20-m { padding: calc(var(--grid-size) * 20); }
+ .pa25-m { padding: calc(var(--grid-size) * 25); }
+ .pa30-m { padding: calc(var(--grid-size) * 30); }
+ .pa40-m { padding: calc(var(--grid-size) * 40); }
+ .pa50-m { padding: calc(var(--grid-size) * 50); }
+
+ .pr0-m { padding-right: 0; }
+ .pr1-m { padding-right: calc(var(--grid-size) * 1); }
+ .pr2-m { padding-right: calc(var(--grid-size) * 2); }
+ .pr3-m { padding-right: calc(var(--grid-size) * 3); }
+ .pr4-m { padding-right: calc(var(--grid-size) * 4); }
+ .pr5-m { padding-right: calc(var(--grid-size) * 5); }
+ .pr6-m { padding-right: calc(var(--grid-size) * 6); }
+ .pr7-m { padding-right: calc(var(--grid-size) * 7); }
+ .pr8-m { padding-right: calc(var(--grid-size) * 8); }
+ .pr9-m { padding-right: calc(var(--grid-size) * 9); }
+ .pr10-m { padding-right: calc(var(--grid-size) * 10); }
+ .pr11-m { padding-right: calc(var(--grid-size) * 11); }
+ .pr12-m { padding-right: calc(var(--grid-size) * 12); }
+ .pr13-m { padding-right: calc(var(--grid-size) * 13); }
+ .pr14-m { padding-right: calc(var(--grid-size) * 14); }
+ .pr15-m { padding-right: calc(var(--grid-size) * 15); }
+ .pr16-m { padding-right: calc(var(--grid-size) * 16); }
+ .pr17-m { padding-right: calc(var(--grid-size) * 17); }
+ .pr18-m { padding-right: calc(var(--grid-size) * 18); }
+ .pr19-m { padding-right: calc(var(--grid-size) * 19); }
+ .pr20-m { padding-right: calc(var(--grid-size) * 20); }
+ .pr25-m { padding-right: calc(var(--grid-size) * 25); }
+ .pr30-m { padding-right: calc(var(--grid-size) * 30); }
+ .pr40-m { padding-right: calc(var(--grid-size) * 40); }
+ .pr50-m { padding-right: calc(var(--grid-size) * 50); }
+
+ .pb0-m { padding-bottom: 0; }
+ .pb1-m { padding-bottom: calc(var(--grid-size) * 1); }
+ .pb2-m { padding-bottom: calc(var(--grid-size) * 2); }
+ .pb3-m { padding-bottom: calc(var(--grid-size) * 3); }
+ .pb4-m { padding-bottom: calc(var(--grid-size) * 4); }
+ .pb5-m { padding-bottom: calc(var(--grid-size) * 5); }
+ .pb6-m { padding-bottom: calc(var(--grid-size) * 6); }
+ .pb7-m { padding-bottom: calc(var(--grid-size) * 7); }
+ .pb8-m { padding-bottom: calc(var(--grid-size) * 8); }
+ .pb9-m { padding-bottom: calc(var(--grid-size) * 9); }
+ .pb10-m { padding-bottom: calc(var(--grid-size) * 10); }
+ .pb11-m { padding-bottom: calc(var(--grid-size) * 11); }
+ .pb12-m { padding-bottom: calc(var(--grid-size) * 12); }
+ .pb13-m { padding-bottom: calc(var(--grid-size) * 13); }
+ .pb14-m { padding-bottom: calc(var(--grid-size) * 14); }
+ .pb15-m { padding-bottom: calc(var(--grid-size) * 15); }
+ .pb16-m { padding-bottom: calc(var(--grid-size) * 16); }
+ .pb17-m { padding-bottom: calc(var(--grid-size) * 17); }
+ .pb18-m { padding-bottom: calc(var(--grid-size) * 18); }
+ .pb19-m { padding-bottom: calc(var(--grid-size) * 19); }
+ .pb20-m { padding-bottom: calc(var(--grid-size) * 20); }
+ .pb25-m { padding-bottom: calc(var(--grid-size) * 25); }
+ .pb30-m { padding-bottom: calc(var(--grid-size) * 30); }
+ .pb40-m { padding-bottom: calc(var(--grid-size) * 40); }
+ .pb50-m { padding-bottom: calc(var(--grid-size) * 50); }
+
+ .pl0-m { padding-left: 0; }
+ .pl1-m { padding-left: calc(var(--grid-size) * 1); }
+ .pl2-m { padding-left: calc(var(--grid-size) * 2); }
+ .pl3-m { padding-left: calc(var(--grid-size) * 3); }
+ .pl4-m { padding-left: calc(var(--grid-size) * 4); }
+ .pl5-m { padding-left: calc(var(--grid-size) * 5); }
+ .pl6-m { padding-left: calc(var(--grid-size) * 6); }
+ .pl7-m { padding-left: calc(var(--grid-size) * 7); }
+ .pl8-m { padding-left: calc(var(--grid-size) * 8); }
+ .pl9-m { padding-left: calc(var(--grid-size) * 9); }
+ .pl10-m { padding-left: calc(var(--grid-size) * 10); }
+ .pl11-m { padding-left: calc(var(--grid-size) * 11); }
+ .pl12-m { padding-left: calc(var(--grid-size) * 12); }
+ .pl13-m { padding-left: calc(var(--grid-size) * 13); }
+ .pl14-m { padding-left: calc(var(--grid-size) * 14); }
+ .pl15-m { padding-left: calc(var(--grid-size) * 15); }
+ .pl16-m { padding-left: calc(var(--grid-size) * 16); }
+ .pl17-m { padding-left: calc(var(--grid-size) * 17); }
+ .pl18-m { padding-left: calc(var(--grid-size) * 18); }
+ .pl19-m { padding-left: calc(var(--grid-size) * 19); }
+ .pl20-m { padding-left: calc(var(--grid-size) * 20); }
+ .pl25-m { padding-left: calc(var(--grid-size) * 25); }
+ .pl30-m { padding-left: calc(var(--grid-size) * 30); }
+ .pl40-m { padding-left: calc(var(--grid-size) * 40); }
+ .pl50-m { padding-left: calc(var(--grid-size) * 50); }
+
+ .pt0-m { padding-top: 0; }
+ .pt1-m { padding-top: calc(var(--grid-size) * 1); }
+ .pt2-m { padding-top: calc(var(--grid-size) * 2); }
+ .pt3-m { padding-top: calc(var(--grid-size) * 3); }
+ .pt4-m { padding-top: calc(var(--grid-size) * 4); }
+ .pt5-m { padding-top: calc(var(--grid-size) * 5); }
+ .pt6-m { padding-top: calc(var(--grid-size) * 6); }
+ .pt7-m { padding-top: calc(var(--grid-size) * 7); }
+ .pt8-m { padding-top: calc(var(--grid-size) * 8); }
+ .pt9-m { padding-top: calc(var(--grid-size) * 9); }
+ .pt10-m { padding-top: calc(var(--grid-size) * 10); }
+ .pt11-m { padding-top: calc(var(--grid-size) * 11); }
+ .pt12-m { padding-top: calc(var(--grid-size) * 12); }
+ .pt13-m { padding-top: calc(var(--grid-size) * 13); }
+ .pt14-m { padding-top: calc(var(--grid-size) * 14); }
+ .pt15-m { padding-top: calc(var(--grid-size) * 15); }
+ .pt16-m { padding-top: calc(var(--grid-size) * 16); }
+ .pt17-m { padding-top: calc(var(--grid-size) * 17); }
+ .pt18-m { padding-top: calc(var(--grid-size) * 18); }
+ .pt19-m { padding-top: calc(var(--grid-size) * 19); }
+ .pt20-m { padding-top: calc(var(--grid-size) * 20); }
+ .pt25-m { padding-top: calc(var(--grid-size) * 25); }
+ .pt30-m { padding-top: calc(var(--grid-size) * 30); }
+ .pt40-m { padding-top: calc(var(--grid-size) * 40); }
+ .pt50-m { padding-top: calc(var(--grid-size) * 50); }
+
+ .ma0-m { margin: 0; }
+ .ma1-m { margin: calc(var(--grid-size) * 1); }
+ .ma2-m { margin: calc(var(--grid-size) * 2); }
+ .ma3-m { margin: calc(var(--grid-size) * 3); }
+ .ma4-m { margin: calc(var(--grid-size) * 4); }
+ .ma5-m { margin: calc(var(--grid-size) * 5); }
+ .ma6-m { margin: calc(var(--grid-size) * 6); }
+ .ma7-m { margin: calc(var(--grid-size) * 7); }
+ .ma8-m { margin: calc(var(--grid-size) * 8); }
+ .ma9-m { margin: calc(var(--grid-size) * 9); }
+ .ma10-m { margin: calc(var(--grid-size) * 10); }
+ .ma11-m { margin: calc(var(--grid-size) * 11); }
+ .ma12-m { margin: calc(var(--grid-size) * 12); }
+ .ma13-m { margin: calc(var(--grid-size) * 13); }
+ .ma14-m { margin: calc(var(--grid-size) * 14); }
+ .ma15-m { margin: calc(var(--grid-size) * 15); }
+ .ma16-m { margin: calc(var(--grid-size) * 16); }
+ .ma17-m { margin: calc(var(--grid-size) * 17); }
+ .ma18-m { margin: calc(var(--grid-size) * 18); }
+ .ma19-m { margin: calc(var(--grid-size) * 19); }
+ .ma20-m { margin: calc(var(--grid-size) * 20); }
+ .ma25-m { margin: calc(var(--grid-size) * 25); }
+ .ma30-m { margin: calc(var(--grid-size) * 30); }
+ .ma40-m { margin: calc(var(--grid-size) * 40); }
+ .ma50-m { margin: calc(var(--grid-size) * 50); }
+
+ .mr0-m { margin-right: 0; }
+ .mr1-m { margin-right: calc(var(--grid-size) * 1); }
+ .mr2-m { margin-right: calc(var(--grid-size) * 2); }
+ .mr3-m { margin-right: calc(var(--grid-size) * 3); }
+ .mr4-m { margin-right: calc(var(--grid-size) * 4); }
+ .mr5-m { margin-right: calc(var(--grid-size) * 5); }
+ .mr6-m { margin-right: calc(var(--grid-size) * 6); }
+ .mr7-m { margin-right: calc(var(--grid-size) * 7); }
+ .mr8-m { margin-right: calc(var(--grid-size) * 8); }
+ .mr9-m { margin-right: calc(var(--grid-size) * 9); }
+ .mr10-m { margin-right: calc(var(--grid-size) * 10); }
+ .mr11-m { margin-right: calc(var(--grid-size) * 11); }
+ .mr12-m { margin-right: calc(var(--grid-size) * 12); }
+ .mr13-m { margin-right: calc(var(--grid-size) * 13); }
+ .mr14-m { margin-right: calc(var(--grid-size) * 14); }
+ .mr15-m { margin-right: calc(var(--grid-size) * 15); }
+ .mr16-m { margin-right: calc(var(--grid-size) * 16); }
+ .mr17-m { margin-right: calc(var(--grid-size) * 17); }
+ .mr18-m { margin-right: calc(var(--grid-size) * 18); }
+ .mr19-m { margin-right: calc(var(--grid-size) * 19); }
+ .mr20-m { margin-right: calc(var(--grid-size) * 20); }
+ .mr25-m { margin-right: calc(var(--grid-size) * 25); }
+ .mr30-m { margin-right: calc(var(--grid-size) * 30); }
+ .mr40-m { margin-right: calc(var(--grid-size) * 40); }
+ .mr50-m { margin-right: calc(var(--grid-size) * 50); }
+
+ .mb0-m { margin-bottom: 0; }
+ .mb1-m { margin-bottom: calc(var(--grid-size) * 1); }
+ .mb2-m { margin-bottom: calc(var(--grid-size) * 2); }
+ .mb3-m { margin-bottom: calc(var(--grid-size) * 3); }
+ .mb4-m { margin-bottom: calc(var(--grid-size) * 4); }
+ .mb5-m { margin-bottom: calc(var(--grid-size) * 5); }
+ .mb6-m { margin-bottom: calc(var(--grid-size) * 6); }
+ .mb7-m { margin-bottom: calc(var(--grid-size) * 7); }
+ .mb8-m { margin-bottom: calc(var(--grid-size) * 8); }
+ .mb9-m { margin-bottom: calc(var(--grid-size) * 9); }
+ .mb10-m { margin-bottom: calc(var(--grid-size) * 10); }
+ .mb11-m { margin-bottom: calc(var(--grid-size) * 11); }
+ .mb12-m { margin-bottom: calc(var(--grid-size) * 12); }
+ .mb13-m { margin-bottom: calc(var(--grid-size) * 13); }
+ .mb14-m { margin-bottom: calc(var(--grid-size) * 14); }
+ .mb15-m { margin-bottom: calc(var(--grid-size) * 15); }
+ .mb16-m { margin-bottom: calc(var(--grid-size) * 16); }
+ .mb17-m { margin-bottom: calc(var(--grid-size) * 17); }
+ .mb18-m { margin-bottom: calc(var(--grid-size) * 18); }
+ .mb19-m { margin-bottom: calc(var(--grid-size) * 19); }
+ .mb20-m { margin-bottom: calc(var(--grid-size) * 20); }
+ .mb25-m { margin-bottom: calc(var(--grid-size) * 25); }
+ .mb30-m { margin-bottom: calc(var(--grid-size) * 30); }
+ .mb40-m { margin-bottom: calc(var(--grid-size) * 40); }
+ .mb50-m { margin-bottom: calc(var(--grid-size) * 50); }
+
+ .ml0-m { margin-left: 0; }
+ .ml1-m { margin-left: calc(var(--grid-size) * 1); }
+ .ml2-m { margin-left: calc(var(--grid-size) * 2); }
+ .ml3-m { margin-left: calc(var(--grid-size) * 3); }
+ .ml4-m { margin-left: calc(var(--grid-size) * 4); }
+ .ml5-m { margin-left: calc(var(--grid-size) * 5); }
+ .ml6-m { margin-left: calc(var(--grid-size) * 6); }
+ .ml7-m { margin-left: calc(var(--grid-size) * 7); }
+ .ml8-m { margin-left: calc(var(--grid-size) * 8); }
+ .ml9-m { margin-left: calc(var(--grid-size) * 9); }
+ .ml10-m { margin-left: calc(var(--grid-size) * 10); }
+ .ml11-m { margin-left: calc(var(--grid-size) * 11); }
+ .ml12-m { margin-left: calc(var(--grid-size) * 12); }
+ .ml13-m { margin-left: calc(var(--grid-size) * 13); }
+ .ml14-m { margin-left: calc(var(--grid-size) * 14); }
+ .ml15-m { margin-left: calc(var(--grid-size) * 15); }
+ .ml16-m { margin-left: calc(var(--grid-size) * 16); }
+ .ml17-m { margin-left: calc(var(--grid-size) * 17); }
+ .ml18-m { margin-left: calc(var(--grid-size) * 18); }
+ .ml19-m { margin-left: calc(var(--grid-size) * 19); }
+ .ml20-m { margin-left: calc(var(--grid-size) * 20); }
+ .ml25-m { margin-left: calc(var(--grid-size) * 25); }
+ .ml30-m { margin-left: calc(var(--grid-size) * 30); }
+ .ml40-m { margin-left: calc(var(--grid-size) * 40); }
+ .ml50-m { margin-left: calc(var(--grid-size) * 50); }
+
+ .mt0-m { margin-top: 0; }
+ .mt1-m { margin-top: calc(var(--grid-size) * 1); }
+ .mt2-m { margin-top: calc(var(--grid-size) * 2); }
+ .mt3-m { margin-top: calc(var(--grid-size) * 3); }
+ .mt4-m { margin-top: calc(var(--grid-size) * 4); }
+ .mt5-m { margin-top: calc(var(--grid-size) * 5); }
+ .mt6-m { margin-top: calc(var(--grid-size) * 6); }
+ .mt7-m { margin-top: calc(var(--grid-size) * 7); }
+ .mt8-m { margin-top: calc(var(--grid-size) * 8); }
+ .mt9-m { margin-top: calc(var(--grid-size) * 9); }
+ .mt10-m { margin-top: calc(var(--grid-size) * 10); }
+ .mt11-m { margin-top: calc(var(--grid-size) * 11); }
+ .mt12-m { margin-top: calc(var(--grid-size) * 12); }
+ .mt13-m { margin-top: calc(var(--grid-size) * 13); }
+ .mt14-m { margin-top: calc(var(--grid-size) * 14); }
+ .mt15-m { margin-top: calc(var(--grid-size) * 15); }
+ .mt16-m { margin-top: calc(var(--grid-size) * 16); }
+ .mt17-m { margin-top: calc(var(--grid-size) * 17); }
+ .mt18-m { margin-top: calc(var(--grid-size) * 18); }
+ .mt19-m { margin-top: calc(var(--grid-size) * 19); }
+ .mt20-m { margin-top: calc(var(--grid-size) * 20); }
+ .mt25-m { margin-top: calc(var(--grid-size) * 25); }
+ .mt30-m { margin-top: calc(var(--grid-size) * 30); }
+ .mt40-m { margin-top: calc(var(--grid-size) * 40); }
+ .mt50-m { margin-top: calc(var(--grid-size) * 50); }
+}
+
+@media (--breakpoint-large) {
+ .pa0-l { padding: 0; }
+ .pa1-l { padding: calc(var(--grid-size) * 1); }
+ .pa2-l { padding: calc(var(--grid-size) * 2); }
+ .pa3-l { padding: calc(var(--grid-size) * 3); }
+ .pa4-l { padding: calc(var(--grid-size) * 4); }
+ .pa5-l { padding: calc(var(--grid-size) * 5); }
+ .pa6-l { padding: calc(var(--grid-size) * 6); }
+ .pa7-l { padding: calc(var(--grid-size) * 7); }
+ .pa8-l { padding: calc(var(--grid-size) * 8); }
+ .pa9-l { padding: calc(var(--grid-size) * 9); }
+ .pa10-l { padding: calc(var(--grid-size) * 10); }
+ .pa11-l { padding: calc(var(--grid-size) * 11); }
+ .pa12-l { padding: calc(var(--grid-size) * 12); }
+ .pa13-l { padding: calc(var(--grid-size) * 13); }
+ .pa14-l { padding: calc(var(--grid-size) * 14); }
+ .pa15-l { padding: calc(var(--grid-size) * 15); }
+ .pa16-l { padding: calc(var(--grid-size) * 16); }
+ .pa17-l { padding: calc(var(--grid-size) * 17); }
+ .pa18-l { padding: calc(var(--grid-size) * 18); }
+ .pa19-l { padding: calc(var(--grid-size) * 19); }
+ .pa20-l { padding: calc(var(--grid-size) * 20); }
+ .pa25-l { padding: calc(var(--grid-size) * 25); }
+ .pa30-l { padding: calc(var(--grid-size) * 30); }
+ .pa40-l { padding: calc(var(--grid-size) * 40); }
+ .pa50-l { padding: calc(var(--grid-size) * 50); }
+
+ .pr0-l { padding-right: 0; }
+ .pr1-l { padding-right: calc(var(--grid-size) * 1); }
+ .pr2-l { padding-right: calc(var(--grid-size) * 2); }
+ .pr3-l { padding-right: calc(var(--grid-size) * 3); }
+ .pr4-l { padding-right: calc(var(--grid-size) * 4); }
+ .pr5-l { padding-right: calc(var(--grid-size) * 5); }
+ .pr6-l { padding-right: calc(var(--grid-size) * 6); }
+ .pr7-l { padding-right: calc(var(--grid-size) * 7); }
+ .pr8-l { padding-right: calc(var(--grid-size) * 8); }
+ .pr9-l { padding-right: calc(var(--grid-size) * 9); }
+ .pr10-l { padding-right: calc(var(--grid-size) * 10); }
+ .pr11-l { padding-right: calc(var(--grid-size) * 11); }
+ .pr12-l { padding-right: calc(var(--grid-size) * 12); }
+ .pr13-l { padding-right: calc(var(--grid-size) * 13); }
+ .pr14-l { padding-right: calc(var(--grid-size) * 14); }
+ .pr15-l { padding-right: calc(var(--grid-size) * 15); }
+ .pr16-l { padding-right: calc(var(--grid-size) * 16); }
+ .pr17-l { padding-right: calc(var(--grid-size) * 17); }
+ .pr18-l { padding-right: calc(var(--grid-size) * 18); }
+ .pr19-l { padding-right: calc(var(--grid-size) * 19); }
+ .pr20-l { padding-right: calc(var(--grid-size) * 20); }
+ .pr25-l { padding-right: calc(var(--grid-size) * 25); }
+ .pr30-l { padding-right: calc(var(--grid-size) * 30); }
+ .pr40-l { padding-right: calc(var(--grid-size) * 40); }
+ .pr50-l { padding-right: calc(var(--grid-size) * 50); }
+
+ .pb0-l { padding-bottom: 0; }
+ .pb1-l { padding-bottom: calc(var(--grid-size) * 1); }
+ .pb2-l { padding-bottom: calc(var(--grid-size) * 2); }
+ .pb3-l { padding-bottom: calc(var(--grid-size) * 3); }
+ .pb4-l { padding-bottom: calc(var(--grid-size) * 4); }
+ .pb5-l { padding-bottom: calc(var(--grid-size) * 5); }
+ .pb6-l { padding-bottom: calc(var(--grid-size) * 6); }
+ .pb7-l { padding-bottom: calc(var(--grid-size) * 7); }
+ .pb8-l { padding-bottom: calc(var(--grid-size) * 8); }
+ .pb9-l { padding-bottom: calc(var(--grid-size) * 9); }
+ .pb10-l { padding-bottom: calc(var(--grid-size) * 10); }
+ .pb11-l { padding-bottom: calc(var(--grid-size) * 11); }
+ .pb12-l { padding-bottom: calc(var(--grid-size) * 12); }
+ .pb13-l { padding-bottom: calc(var(--grid-size) * 13); }
+ .pb14-l { padding-bottom: calc(var(--grid-size) * 14); }
+ .pb15-l { padding-bottom: calc(var(--grid-size) * 15); }
+ .pb16-l { padding-bottom: calc(var(--grid-size) * 16); }
+ .pb17-l { padding-bottom: calc(var(--grid-size) * 17); }
+ .pb18-l { padding-bottom: calc(var(--grid-size) * 18); }
+ .pb19-l { padding-bottom: calc(var(--grid-size) * 19); }
+ .pb20-l { padding-bottom: calc(var(--grid-size) * 20); }
+ .pb25-l { padding-bottom: calc(var(--grid-size) * 25); }
+ .pb30-l { padding-bottom: calc(var(--grid-size) * 30); }
+ .pb40-l { padding-bottom: calc(var(--grid-size) * 40); }
+ .pb50-l { padding-bottom: calc(var(--grid-size) * 50); }
+
+ .pl0-l { padding-left: 0; }
+ .pl1-l { padding-left: calc(var(--grid-size) * 1); }
+ .pl2-l { padding-left: calc(var(--grid-size) * 2); }
+ .pl3-l { padding-left: calc(var(--grid-size) * 3); }
+ .pl4-l { padding-left: calc(var(--grid-size) * 4); }
+ .pl5-l { padding-left: calc(var(--grid-size) * 5); }
+ .pl6-l { padding-left: calc(var(--grid-size) * 6); }
+ .pl7-l { padding-left: calc(var(--grid-size) * 7); }
+ .pl8-l { padding-left: calc(var(--grid-size) * 8); }
+ .pl9-l { padding-left: calc(var(--grid-size) * 9); }
+ .pl10-l { padding-left: calc(var(--grid-size) * 10); }
+ .pl11-l { padding-left: calc(var(--grid-size) * 11); }
+ .pl12-l { padding-left: calc(var(--grid-size) * 12); }
+ .pl13-l { padding-left: calc(var(--grid-size) * 13); }
+ .pl14-l { padding-left: calc(var(--grid-size) * 14); }
+ .pl15-l { padding-left: calc(var(--grid-size) * 15); }
+ .pl16-l { padding-left: calc(var(--grid-size) * 16); }
+ .pl17-l { padding-left: calc(var(--grid-size) * 17); }
+ .pl18-l { padding-left: calc(var(--grid-size) * 18); }
+ .pl19-l { padding-left: calc(var(--grid-size) * 19); }
+ .pl20-l { padding-left: calc(var(--grid-size) * 20); }
+ .pl25-l { padding-left: calc(var(--grid-size) * 25); }
+ .pl30-l { padding-left: calc(var(--grid-size) * 30); }
+ .pl40-l { padding-left: calc(var(--grid-size) * 40); }
+ .pl50-l { padding-left: calc(var(--grid-size) * 50); }
+
+ .pt0-l { padding-top: 0; }
+ .pt1-l { padding-top: calc(var(--grid-size) * 1); }
+ .pt2-l { padding-top: calc(var(--grid-size) * 2); }
+ .pt3-l { padding-top: calc(var(--grid-size) * 3); }
+ .pt4-l { padding-top: calc(var(--grid-size) * 4); }
+ .pt5-l { padding-top: calc(var(--grid-size) * 5); }
+ .pt6-l { padding-top: calc(var(--grid-size) * 6); }
+ .pt7-l { padding-top: calc(var(--grid-size) * 7); }
+ .pt8-l { padding-top: calc(var(--grid-size) * 8); }
+ .pt9-l { padding-top: calc(var(--grid-size) * 9); }
+ .pt10-l { padding-top: calc(var(--grid-size) * 10); }
+ .pt11-l { padding-top: calc(var(--grid-size) * 11); }
+ .pt12-l { padding-top: calc(var(--grid-size) * 12); }
+ .pt13-l { padding-top: calc(var(--grid-size) * 13); }
+ .pt14-l { padding-top: calc(var(--grid-size) * 14); }
+ .pt15-l { padding-top: calc(var(--grid-size) * 15); }
+ .pt16-l { padding-top: calc(var(--grid-size) * 16); }
+ .pt17-l { padding-top: calc(var(--grid-size) * 17); }
+ .pt18-l { padding-top: calc(var(--grid-size) * 18); }
+ .pt19-l { padding-top: calc(var(--grid-size) * 19); }
+ .pt20-l { padding-top: calc(var(--grid-size) * 20); }
+ .pt25-l { padding-top: calc(var(--grid-size) * 25); }
+ .pt30-l { padding-top: calc(var(--grid-size) * 30); }
+ .pt40-l { padding-top: calc(var(--grid-size) * 40); }
+ .pt50-l { padding-top: calc(var(--grid-size) * 50); }
+
+ .ma0-l { margin: 0; }
+ .ma1-l { margin: calc(var(--grid-size) * 1); }
+ .ma2-l { margin: calc(var(--grid-size) * 2); }
+ .ma3-l { margin: calc(var(--grid-size) * 3); }
+ .ma4-l { margin: calc(var(--grid-size) * 4); }
+ .ma5-l { margin: calc(var(--grid-size) * 5); }
+ .ma6-l { margin: calc(var(--grid-size) * 6); }
+ .ma7-l { margin: calc(var(--grid-size) * 7); }
+ .ma8-l { margin: calc(var(--grid-size) * 8); }
+ .ma9-l { margin: calc(var(--grid-size) * 9); }
+ .ma10-l { margin: calc(var(--grid-size) * 10); }
+ .ma11-l { margin: calc(var(--grid-size) * 11); }
+ .ma12-l { margin: calc(var(--grid-size) * 12); }
+ .ma13-l { margin: calc(var(--grid-size) * 13); }
+ .ma14-l { margin: calc(var(--grid-size) * 14); }
+ .ma15-l { margin: calc(var(--grid-size) * 15); }
+ .ma16-l { margin: calc(var(--grid-size) * 16); }
+ .ma17-l { margin: calc(var(--grid-size) * 17); }
+ .ma18-l { margin: calc(var(--grid-size) * 18); }
+ .ma19-l { margin: calc(var(--grid-size) * 19); }
+ .ma20-l { margin: calc(var(--grid-size) * 20); }
+ .ma25-l { margin: calc(var(--grid-size) * 25); }
+ .ma30-l { margin: calc(var(--grid-size) * 30); }
+ .ma40-l { margin: calc(var(--grid-size) * 40); }
+ .ma50-l { margin: calc(var(--grid-size) * 50); }
+
+ .mr0-l { margin-right: 0; }
+ .mr1-l { margin-right: calc(var(--grid-size) * 1); }
+ .mr2-l { margin-right: calc(var(--grid-size) * 2); }
+ .mr3-l { margin-right: calc(var(--grid-size) * 3); }
+ .mr4-l { margin-right: calc(var(--grid-size) * 4); }
+ .mr5-l { margin-right: calc(var(--grid-size) * 5); }
+ .mr6-l { margin-right: calc(var(--grid-size) * 6); }
+ .mr7-l { margin-right: calc(var(--grid-size) * 7); }
+ .mr8-l { margin-right: calc(var(--grid-size) * 8); }
+ .mr9-l { margin-right: calc(var(--grid-size) * 9); }
+ .mr10-l { margin-right: calc(var(--grid-size) * 10); }
+ .mr11-l { margin-right: calc(var(--grid-size) * 11); }
+ .mr12-l { margin-right: calc(var(--grid-size) * 12); }
+ .mr13-l { margin-right: calc(var(--grid-size) * 13); }
+ .mr14-l { margin-right: calc(var(--grid-size) * 14); }
+ .mr15-l { margin-right: calc(var(--grid-size) * 15); }
+ .mr16-l { margin-right: calc(var(--grid-size) * 16); }
+ .mr17-l { margin-right: calc(var(--grid-size) * 17); }
+ .mr18-l { margin-right: calc(var(--grid-size) * 18); }
+ .mr19-l { margin-right: calc(var(--grid-size) * 19); }
+ .mr20-l { margin-right: calc(var(--grid-size) * 20); }
+ .mr25-l { margin-right: calc(var(--grid-size) * 25); }
+ .mr30-l { margin-right: calc(var(--grid-size) * 30); }
+ .mr40-l { margin-right: calc(var(--grid-size) * 40); }
+ .mr50-l { margin-right: calc(var(--grid-size) * 50); }
+
+ .mb0-l { margin-bottom: 0; }
+ .mb1-l { margin-bottom: calc(var(--grid-size) * 1); }
+ .mb2-l { margin-bottom: calc(var(--grid-size) * 2); }
+ .mb3-l { margin-bottom: calc(var(--grid-size) * 3); }
+ .mb4-l { margin-bottom: calc(var(--grid-size) * 4); }
+ .mb5-l { margin-bottom: calc(var(--grid-size) * 5); }
+ .mb6-l { margin-bottom: calc(var(--grid-size) * 6); }
+ .mb7-l { margin-bottom: calc(var(--grid-size) * 7); }
+ .mb8-l { margin-bottom: calc(var(--grid-size) * 8); }
+ .mb9-l { margin-bottom: calc(var(--grid-size) * 9); }
+ .mb10-l { margin-bottom: calc(var(--grid-size) * 10); }
+ .mb11-l { margin-bottom: calc(var(--grid-size) * 11); }
+ .mb12-l { margin-bottom: calc(var(--grid-size) * 12); }
+ .mb13-l { margin-bottom: calc(var(--grid-size) * 13); }
+ .mb14-l { margin-bottom: calc(var(--grid-size) * 14); }
+ .mb15-l { margin-bottom: calc(var(--grid-size) * 15); }
+ .mb16-l { margin-bottom: calc(var(--grid-size) * 16); }
+ .mb17-l { margin-bottom: calc(var(--grid-size) * 17); }
+ .mb18-l { margin-bottom: calc(var(--grid-size) * 18); }
+ .mb19-l { margin-bottom: calc(var(--grid-size) * 19); }
+ .mb20-l { margin-bottom: calc(var(--grid-size) * 20); }
+ .mb25-l { margin-bottom: calc(var(--grid-size) * 25); }
+ .mb30-l { margin-bottom: calc(var(--grid-size) * 30); }
+ .mb40-l { margin-bottom: calc(var(--grid-size) * 40); }
+ .mb50-l { margin-bottom: calc(var(--grid-size) * 50); }
+
+ .ml0-l { margin-left: 0; }
+ .ml1-l { margin-left: calc(var(--grid-size) * 1); }
+ .ml2-l { margin-left: calc(var(--grid-size) * 2); }
+ .ml3-l { margin-left: calc(var(--grid-size) * 3); }
+ .ml4-l { margin-left: calc(var(--grid-size) * 4); }
+ .ml5-l { margin-left: calc(var(--grid-size) * 5); }
+ .ml6-l { margin-left: calc(var(--grid-size) * 6); }
+ .ml7-l { margin-left: calc(var(--grid-size) * 7); }
+ .ml8-l { margin-left: calc(var(--grid-size) * 8); }
+ .ml9-l { margin-left: calc(var(--grid-size) * 9); }
+ .ml10-l { margin-left: calc(var(--grid-size) * 10); }
+ .ml11-l { margin-left: calc(var(--grid-size) * 11); }
+ .ml12-l { margin-left: calc(var(--grid-size) * 12); }
+ .ml13-l { margin-left: calc(var(--grid-size) * 13); }
+ .ml14-l { margin-left: calc(var(--grid-size) * 14); }
+ .ml15-l { margin-left: calc(var(--grid-size) * 15); }
+ .ml16-l { margin-left: calc(var(--grid-size) * 16); }
+ .ml17-l { margin-left: calc(var(--grid-size) * 17); }
+ .ml18-l { margin-left: calc(var(--grid-size) * 18); }
+ .ml19-l { margin-left: calc(var(--grid-size) * 19); }
+ .ml20-l { margin-left: calc(var(--grid-size) * 20); }
+ .ml25-l { margin-left: calc(var(--grid-size) * 25); }
+ .ml30-l { margin-left: calc(var(--grid-size) * 30); }
+ .ml40-l { margin-left: calc(var(--grid-size) * 40); }
+ .ml50-l { margin-left: calc(var(--grid-size) * 50); }
+
+ .mt0-l { margin-top: 0; }
+ .mt1-l { margin-top: calc(var(--grid-size) * 1); }
+ .mt2-l { margin-top: calc(var(--grid-size) * 2); }
+ .mt3-l { margin-top: calc(var(--grid-size) * 3); }
+ .mt4-l { margin-top: calc(var(--grid-size) * 4); }
+ .mt5-l { margin-top: calc(var(--grid-size) * 5); }
+ .mt6-l { margin-top: calc(var(--grid-size) * 6); }
+ .mt7-l { margin-top: calc(var(--grid-size) * 7); }
+ .mt8-l { margin-top: calc(var(--grid-size) * 8); }
+ .mt9-l { margin-top: calc(var(--grid-size) * 9); }
+ .mt10-l { margin-top: calc(var(--grid-size) * 10); }
+ .mt11-l { margin-top: calc(var(--grid-size) * 11); }
+ .mt12-l { margin-top: calc(var(--grid-size) * 12); }
+ .mt13-l { margin-top: calc(var(--grid-size) * 13); }
+ .mt14-l { margin-top: calc(var(--grid-size) * 14); }
+ .mt15-l { margin-top: calc(var(--grid-size) * 15); }
+ .mt16-l { margin-top: calc(var(--grid-size) * 16); }
+ .mt17-l { margin-top: calc(var(--grid-size) * 17); }
+ .mt18-l { margin-top: calc(var(--grid-size) * 18); }
+ .mt19-l { margin-top: calc(var(--grid-size) * 19); }
+ .mt20-l { margin-top: calc(var(--grid-size) * 20); }
+ .mt25-l { margin-top: calc(var(--grid-size) * 25); }
+ .mt30-l { margin-top: calc(var(--grid-size) * 30); }
+ .mt40-l { margin-top: calc(var(--grid-size) * 40); }
+ .mt50-l { margin-top: calc(var(--grid-size) * 50); }
+}
diff --git a/ghost/admin/app/styles/spirit/_tables.css b/ghost/admin/app/styles/spirit/_tables.css
new file mode 100644
index 0000000000..846583be1e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_tables.css
@@ -0,0 +1,17 @@
+.collapse {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+.striped:nth-child(odd) {
+ border-bottom: 1px solid var(--whitegrey);
+}
+
+.striped:nth-child(even) {
+ background-color: var(--whitegrey-l2);
+ border-bottom: 1px solid var(--whitegrey);
+}
+
+th, td {
+ vertical-align: top;
+}
diff --git a/ghost/admin/app/styles/spirit/_text-align.css b/ghost/admin/app/styles/spirit/_text-align.css
new file mode 100644
index 0000000000..d31796960e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_text-align.css
@@ -0,0 +1,43 @@
+/*
+
+ Base
+ t = text-align
+
+ Modifiers
+ l = left
+ r = right
+ c = center
+ j = justify
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.tl { text-align: left; }
+.tr { text-align: right; }
+.tc { text-align: center; }
+.tj { text-align: justify; }
+
+@media (--breakpoint-not-small) {
+ .tl-ns { text-align: left; }
+ .tr-ns { text-align: right; }
+ .tc-ns { text-align: center; }
+ .tj-ns { text-align: justify; }
+}
+
+@media (--breakpoint-medium) {
+ .tl-m { text-align: left; }
+ .tr-m { text-align: right; }
+ .tc-m { text-align: center; }
+ .tj-m { text-align: justify; }
+}
+
+@media (--breakpoint-large) {
+ .tl-l { text-align: left; }
+ .tr-l { text-align: right; }
+ .tc-l { text-align: center; }
+ .tj-l { text-align: justify; }
+}
diff --git a/ghost/admin/app/styles/spirit/_text-block-spacings.css b/ghost/admin/app/styles/spirit/_text-block-spacings.css
new file mode 100644
index 0000000000..119b9eab40
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_text-block-spacings.css
@@ -0,0 +1,53 @@
+:root {
+ --baseline-grid: 1.6rem;
+}
+
+.tmb { margin: 0 0 calc(var(--baseline-grid)); }
+.tmb--0 { margin: 0; }
+.tmb--0-25x { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+.tmb--0-5x { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+.tmb--0-75x { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+.tmb--1-25x { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+.tmb--1-5x { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+.tmb--2-0x { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+.tmb--2-5x { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+.tmb--3-0x { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+
+@media (--breakpoint-not-small) {
+ .tmb-ns { margin: 0 0 calc(var(--baseline-grid)); }
+ .tmb--0-ns { margin: 0; }
+ .tmb--0-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+ .tmb--0-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+ .tmb--0-75x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+ .tmb--1-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+ .tmb--1-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+ .tmb--2-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+ .tmb--2-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+ .tmb--3-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
+
+@media (--breakpoint-medium) {
+ .tmb-m { margin: 0 0 calc(var(--baseline-grid)); }
+ .tmb--0-m { margin: 0; }
+ .tmb--0-25x-m { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+ .tmb--0-5x-m { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+ .tmb--0-75x-m { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+ .tmb--1-25x-m { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+ .tmb--1-5x-m { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+ .tmb--2-0x-m { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+ .tmb--2-5x-m { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+ .tmb--3-0x-m { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
+
+@media (--breakpoint-large) {
+ .tmb-l { margin: 0 0 calc(var(--baseline-grid)); }
+ .tmb--0-l { margin: 0; }
+ .tmb--0-25x-l { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+ .tmb--0-5x-l { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+ .tmb--0-75x-l { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+ .tmb--1-25x-l { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+ .tmb--1-5x-l { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+ .tmb--2-0x-l { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+ .tmb--2-5x-l { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+ .tmb--3-0x-l { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
diff --git a/ghost/admin/app/styles/spirit/_text-decoration.css b/ghost/admin/app/styles/spirit/_text-decoration.css
new file mode 100644
index 0000000000..d69032c51c
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_text-decoration.css
@@ -0,0 +1,31 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.strike { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+
+
+@media (--breakpoint-not-small) {
+ .strike-ns { text-decoration: line-through; }
+ .underline-ns { text-decoration: underline; }
+ .no-underline-ns { text-decoration: none; }
+}
+
+@media (--breakpoint-medium) {
+ .strike-m { text-decoration: line-through; }
+ .underline-m { text-decoration: underline; }
+ .no-underline-m { text-decoration: none; }
+}
+
+@media (--breakpoint-large) {
+ .strike-l { text-decoration: line-through; }
+ .underline-l { text-decoration: underline; }
+ .no-underline-l { text-decoration: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_text-transform.css b/ghost/admin/app/styles/spirit/_text-transform.css
new file mode 100644
index 0000000000..a7c2b19700
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_text-transform.css
@@ -0,0 +1,43 @@
+/*
+
+ Base:
+ tt = text-transform
+
+ Modifiers
+ c = capitalize
+ l = lowercase
+ u = uppercase
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
+.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
+
+@media (--breakpoint-not-small) {
+ .ttc-ns { text-transform: capitalize; }
+ .ttl-ns { text-transform: lowercase; }
+ .ttu-ns { text-transform: uppercase; }
+ .ttn-ns { text-transform: none; }
+}
+
+@media (--breakpoint-medium) {
+ .ttc-m { text-transform: capitalize; }
+ .ttl-m { text-transform: lowercase; }
+ .ttu-m { text-transform: uppercase; }
+ .ttn-m { text-transform: none; }
+}
+
+@media (--breakpoint-large) {
+ .ttc-l { text-transform: capitalize; }
+ .ttl-l { text-transform: lowercase; }
+ .ttu-l { text-transform: uppercase; }
+ .ttn-l { text-transform: none; }
+}
diff --git a/ghost/admin/app/styles/spirit/_type-scale.css b/ghost/admin/app/styles/spirit/_type-scale.css
new file mode 100644
index 0000000000..f0bbca7ed7
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_type-scale.css
@@ -0,0 +1,95 @@
+/*
+
+ Vertical rhythm = 1.067
+ Tools that can help with experimenting with type scale:
+ http://type-scale.com/
+ https://www.gridlover.net/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+ :root {
+ --ts-base-fontsize: 62.5%;
+
+ --ts-headline: 3.6rem;
+ --ts-subheadline: 2.8rem;
+
+ --ts-1: 2.3rem;
+ --ts-2: 2.1rem;
+ --ts-3: 2.0rem;
+ --ts-4: 1.9rem;
+ --ts-5: 1.75rem;
+ --ts-6: 1.6rem;
+ --ts-7: 1.4rem;
+ --ts-8: 1.3rem;
+ --ts-small: 1.2rem;
+ --ts-supersmall: 1.1rem;
+ }
+
+
+.fs-base { font-size: var(--ts-base-fontsize); }
+.f-headline { font-size: var(--ts-headline); }
+.f-subheadline { font-size: var(--ts-subheadline); }
+.f1 { font-size: var(--ts-1); }
+.f2 { font-size: var(--ts-2); }
+.f3 { font-size: var(--ts-3); }
+.f4 { font-size: var(--ts-4); }
+.f5 { font-size: var(--ts-5); }
+.f6 { font-size: var(--ts-6); }
+.f7 { font-size: var(--ts-7); }
+.f8, .f-default { font-size: var(--ts-8); }
+.f-small { font-size: var(--ts-small); }
+.f-supersmall { font-size: var(--ts-supersmall); }
+
+
+@media (--breakpoint-not-small){
+ .fs-base-ns { font-size: var(--ts-base-fontsize); }
+ .f-headline-ns { font-size: var(--ts-headline); }
+ .f-subheadline-ns { font-size: var(--ts-subheadline); }
+ .f1-ns { font-size: var(--ts-1); }
+ .f2-ns { font-size: var(--ts-2); }
+ .f3-ns { font-size: var(--ts-3); }
+ .f4-ns { font-size: var(--ts-4); }
+ .f5-ns { font-size: var(--ts-5); }
+ .f6-ns { font-size: var(--ts-6); }
+ .f7-ns { font-size: var(--ts-7); }
+ .f8-ns, .f-default-ns { font-size: var(--ts-8); }
+ .fsmall-ns { font-size: var(--ts-small); }
+ .f-supersmall-ns { font-size: var(--ts-supersmall); }
+}
+
+@media (--breakpoint-medium) {
+ .fs-base-m { font-size: var(--ts-base-fontsize); }
+ .f-headline-m { font-size: var(--ts-headline); }
+ .f-subheadline-m { font-size: var(--ts-subheadline); }
+ .f1-m { font-size: var(--ts-1); }
+ .f2-m { font-size: var(--ts-2); }
+ .f3-m { font-size: var(--ts-3); }
+ .f4-m { font-size: var(--ts-4); }
+ .f5-m { font-size: var(--ts-5); }
+ .f6-m { font-size: var(--ts-6); }
+ .f7-m { font-size: var(--ts-7); }
+ .f8-m, .f-default-m { font-size: var(--ts-8); }
+ .fsmall-m { font-size: var(--ts-small); }
+ .f-supersmall-m { font-size: var(--ts-supersmall); }
+}
+
+@media (--breakpoint-large) {
+ .fs-base-l { font-size: var(--ts-base-fontsize); }
+ .f-headline-l { font-size: var(--ts-headline); }
+ .f-subheadline-l { font-size: var(--ts-subheadline); }
+ .f1-l { font-size: var(--ts-1); }
+ .f2-l { font-size: var(--ts-2); }
+ .f3-l { font-size: var(--ts-3); }
+ .f4-l { font-size: var(--ts-4); }
+ .f5-l { font-size: var(--ts-5); }
+ .f6-l { font-size: var(--ts-6); }
+ .f7-l { font-size: var(--ts-7); }
+ .f8-l, .f-default-l { font-size: var(--ts-8); }
+ .fsmall-l { font-size: var(--ts-small); }
+ .f-supersmall-l { font-size: var(--ts-supersmall); }
+}
diff --git a/ghost/admin/app/styles/spirit/_typography.css b/ghost/admin/app/styles/spirit/_typography.css
new file mode 100644
index 0000000000..93ce6cb879
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_typography.css
@@ -0,0 +1,144 @@
+/*
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+
+
+/* Measure is limited to ~66 characters */
+.measure {
+ max-width: 30em;
+}
+
+/* Measure is limited to ~80 characters */
+.measure-wide {
+ max-width: 42em;
+}
+
+/* Measure is limited to ~45 characters */
+.measure-narrow {
+ max-width: 20em;
+}
+
+/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.small-caps {
+ font-variant: small-caps;
+}
+
+/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
+
+.truncate {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.readability {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+}
+
+@media (--breakpoint-not-small) {
+ .measure-ns {
+ max-width: 30em;
+ }
+ .measure-wide-ns {
+ max-width: 34em;
+ }
+ .measure-narrow-ns {
+ max-width: 20em;
+ }
+ .indent-ns {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-ns {
+ font-variant: small-caps;
+ }
+ .truncate-ns {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .readability-ns {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+ }
+}
+
+@media (--breakpoint-medium) {
+ .measure-m {
+ max-width: 30em;
+ }
+ .measure-wide-m {
+ max-width: 34em;
+ }
+ .measure-narrow-m {
+ max-width: 20em;
+ }
+ .indent-m {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-m {
+ font-variant: small-caps;
+ }
+ .truncate-m {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .readability-m {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+ }
+}
+
+@media (--breakpoint-large) {
+ .measure-l {
+ max-width: 30em;
+ }
+ .measure-wide-l {
+ max-width: 34em;
+ }
+ .measure-narrow-l {
+ max-width: 20em;
+ }
+ .indent-l {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-l {
+ font-variant: small-caps;
+ }
+ .truncate-l {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .readability-l {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+ }
+}
diff --git a/ghost/admin/app/styles/spirit/_utilities.css b/ghost/admin/app/styles/spirit/_utilities.css
new file mode 100644
index 0000000000..6dc7c55fe3
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_utilities.css
@@ -0,0 +1,50 @@
+/*
+
+ UTILITIES
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+ overflow-y: scroll;
+}
+
+.center {
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left: auto; }
+
+@media (--breakpoint-not-small){
+ .center-ns {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-ns { margin-right: auto; }
+ .ml-auto-ns { margin-left: auto; }
+}
+
+@media (--breakpoint-medium){
+ .center-m {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-m { margin-right: auto; }
+ .ml-auto-m { margin-left: auto; }
+}
+
+@media (--breakpoint-large){
+ .center-l {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-l { margin-right: auto; }
+ .ml-auto-l { margin-left: auto; }
+}
diff --git a/ghost/admin/app/styles/spirit/_vertical-align.css b/ghost/admin/app/styles/spirit/_vertical-align.css
new file mode 100644
index 0000000000..83f9114842
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_vertical-align.css
@@ -0,0 +1,36 @@
+/*
+
+ VERTICAL ALIGN
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.v-base { vertical-align: baseline; }
+.v-mid { vertical-align: middle; }
+.v-top { vertical-align: top; }
+.v-btm { vertical-align: bottom; }
+
+@media (--breakpoint-not-small) {
+ .v-base-ns { vertical-align: baseline; }
+ .v-mid-ns { vertical-align: middle; }
+ .v-top-ns { vertical-align: top; }
+ .v-btm-ns { vertical-align: bottom; }
+}
+
+@media (--breakpoint-medium) {
+ .v-base-m { vertical-align: baseline; }
+ .v-mid-m { vertical-align: middle; }
+ .v-top-m { vertical-align: top; }
+ .v-btm-m { vertical-align: bottom; }
+}
+
+@media (--breakpoint-large) {
+ .v-base-l { vertical-align: baseline; }
+ .v-mid-l { vertical-align: middle; }
+ .v-top-l { vertical-align: top; }
+ .v-btm-l { vertical-align: bottom; }
+}
diff --git a/ghost/admin/app/styles/spirit/_visibility.css b/ghost/admin/app/styles/spirit/_visibility.css
new file mode 100644
index 0000000000..f5a8c44b6e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_visibility.css
@@ -0,0 +1,51 @@
+/*
+
+ VISIBILITY
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+
+/*
+ Text that is hidden but accessible
+ Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+
+.clip {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media (--breakpoint-not-small) {
+ .clip-ns {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+
+@media (--breakpoint-medium) {
+ .clip-m {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+
+@media (--breakpoint-large) {
+ .clip-l {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+
diff --git a/ghost/admin/app/styles/spirit/_white-space.css b/ghost/admin/app/styles/spirit/_white-space.css
new file mode 100644
index 0000000000..3902f1f7c1
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_white-space.css
@@ -0,0 +1,34 @@
+/*
+
+ WHITE SPACE
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+
+.ws-normal { white-space: normal; }
+.nowrap { white-space: nowrap; }
+.pre { white-space: pre; }
+
+@media (--breakpoint-not-small) {
+ .ws-normal-ns { white-space: normal; }
+ .nowrap-ns { white-space: nowrap; }
+ .pre-ns { white-space: pre; }
+}
+
+@media (--breakpoint-medium) {
+ .ws-normal-m { white-space: normal; }
+ .nowrap-m { white-space: nowrap; }
+ .pre-m { white-space: pre; }
+}
+
+@media (--breakpoint-large) {
+ .ws-normal-l { white-space: normal; }
+ .nowrap-l { white-space: nowrap; }
+ .pre-l { white-space: pre; }
+}
+
diff --git a/ghost/admin/app/styles/spirit/_widths.css b/ghost/admin/app/styles/spirit/_widths.css
new file mode 100644
index 0000000000..dcfbc1816e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_widths.css
@@ -0,0 +1,208 @@
+/*
+
+ Base:
+ w = width
+
+ Value:
+ (n) = (n * grid size)
+ -(m) = (m)%
+ -third = third of full width
+ -two-thirds = two thirds of full width
+ -auto = auto
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.w1 { width: calc(var(--grid-size) * 1); }
+.w2 { width: calc(var(--grid-size) * 2); }
+.w3 { width: calc(var(--grid-size) * 3); }
+.w4 { width: calc(var(--grid-size) * 4); }
+.w5 { width: calc(var(--grid-size) * 5); }
+.w6 { width: calc(var(--grid-size) * 6); }
+.w7 { width: calc(var(--grid-size) * 7); }
+.w8 { width: calc(var(--grid-size) * 8); }
+.w9 { width: calc(var(--grid-size) * 9); }
+.w10 { width: calc(var(--grid-size) * 10); }
+.w11 { width: calc(var(--grid-size) * 11); }
+.w12 { width: calc(var(--grid-size) * 12); }
+.w13 { width: calc(var(--grid-size) * 13); }
+.w14 { width: calc(var(--grid-size) * 14); }
+.w15 { width: calc(var(--grid-size) * 15); }
+.w16 { width: calc(var(--grid-size) * 16); }
+.w17 { width: calc(var(--grid-size) * 17); }
+.w18 { width: calc(var(--grid-size) * 18); }
+.w19 { width: calc(var(--grid-size) * 19); }
+.w20 { width: calc(var(--grid-size) * 20); }
+.w25 { width: calc(var(--grid-size) * 25); }
+.w30 { width: calc(var(--grid-size) * 30); }
+.w40 { width: calc(var(--grid-size) * 40); }
+.w50 { width: calc(var(--grid-size) * 50); }
+.w70 { width: calc(var(--grid-size) * 70); }
+.w88 { width: calc(var(--grid-size) * 88); }
+
+.w-10 { width: 10%; }
+.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
+.w-50 { width: 50%; }
+.w-60 { width: 60%; }
+.w-70 { width: 70%; }
+.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-90 { width: 90%; }
+.w-100 { width: 100%; }
+
+.w-third { width: calc(100% / 3); }
+.w-two-thirds { width: calc(100% / 1.5); }
+.w-auto { width: auto; }
+
+@media (--breakpoint-not-small) {
+ .w1-ns { width: calc(var(--grid-size) * 1); }
+ .w2-ns { width: calc(var(--grid-size) * 2); }
+ .w3-ns { width: calc(var(--grid-size) * 3); }
+ .w4-ns { width: calc(var(--grid-size) * 4); }
+ .w5-ns { width: calc(var(--grid-size) * 5); }
+ .w6-ns { width: calc(var(--grid-size) * 6); }
+ .w7-ns { width: calc(var(--grid-size) * 7); }
+ .w8-ns { width: calc(var(--grid-size) * 8); }
+ .w9-ns { width: calc(var(--grid-size) * 9); }
+ .w10-ns { width: calc(var(--grid-size) * 10); }
+ .w11-ns { width: calc(var(--grid-size) * 11); }
+ .w12-ns { width: calc(var(--grid-size) * 12); }
+ .w13-ns { width: calc(var(--grid-size) * 13); }
+ .w14-ns { width: calc(var(--grid-size) * 14); }
+ .w15-ns { width: calc(var(--grid-size) * 15); }
+ .w16-ns { width: calc(var(--grid-size) * 16); }
+ .w17-ns { width: calc(var(--grid-size) * 17); }
+ .w18-ns { width: calc(var(--grid-size) * 18); }
+ .w19-ns { width: calc(var(--grid-size) * 19); }
+ .w20-ns { width: calc(var(--grid-size) * 20); }
+ .w25-ns { width: calc(var(--grid-size) * 25); }
+ .w30-ns { width: calc(var(--grid-size) * 30); }
+ .w40-ns { width: calc(var(--grid-size) * 40); }
+ .w50-ns { width: calc(var(--grid-size) * 50); }
+ .w70-ns { width: calc(var(--grid-size) * 70); }
+ .w88-ns { width: calc(var(--grid-size) * 88); }
+
+ .w-10-ns { width: 10%; }
+ .w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
+ .w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
+ .w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
+ .w-80-ns { width: 80%; }
+ .w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+
+ .w-third-ns { width: calc(100% / 3); }
+ .w-two-thirds-ns { width: calc(100% / 1.5); }
+ .w-auto-ns { width: auto; }
+}
+
+@media (--breakpoint-medium) {
+ .w1-m { width: calc(var(--grid-size) * 1); }
+ .w2-m { width: calc(var(--grid-size) * 2); }
+ .w3-m { width: calc(var(--grid-size) * 3); }
+ .w4-m { width: calc(var(--grid-size) * 4); }
+ .w5-m { width: calc(var(--grid-size) * 5); }
+ .w6-m { width: calc(var(--grid-size) * 6); }
+ .w7-m { width: calc(var(--grid-size) * 7); }
+ .w8-m { width: calc(var(--grid-size) * 8); }
+ .w9-m { width: calc(var(--grid-size) * 9); }
+ .w10-m { width: calc(var(--grid-size) * 10); }
+ .w11-m { width: calc(var(--grid-size) * 11); }
+ .w12-m { width: calc(var(--grid-size) * 12); }
+ .w13-m { width: calc(var(--grid-size) * 13); }
+ .w14-m { width: calc(var(--grid-size) * 14); }
+ .w15-m { width: calc(var(--grid-size) * 15); }
+ .w16-m { width: calc(var(--grid-size) * 16); }
+ .w17-m { width: calc(var(--grid-size) * 17); }
+ .w18-m { width: calc(var(--grid-size) * 18); }
+ .w19-m { width: calc(var(--grid-size) * 19); }
+ .w20-m { width: calc(var(--grid-size) * 20); }
+ .w25-m { width: calc(var(--grid-size) * 25); }
+ .w30-m { width: calc(var(--grid-size) * 30); }
+ .w40-m { width: calc(var(--grid-size) * 40); }
+ .w50-m { width: calc(var(--grid-size) * 50); }
+ .w70-m { width: calc(var(--grid-size) * 70); }
+ .w88-m { width: calc(var(--grid-size) * 88); }
+
+ .w-10-m { width: 10%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
+ .w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
+ .w-100-m { width: 100%; }
+
+ .w-third-m { width: calc(100% / 3); }
+ .w-two-thirds-m { width: calc(100% / 1.5); }
+ .w-auto-m { width: auto; }
+}
+
+@media (--breakpoint-large) {
+ .w1-l { width: calc(var(--grid-size) * 1); }
+ .w2-l { width: calc(var(--grid-size) * 2); }
+ .w3-l { width: calc(var(--grid-size) * 3); }
+ .w4-l { width: calc(var(--grid-size) * 4); }
+ .w5-l { width: calc(var(--grid-size) * 5); }
+ .w6-l { width: calc(var(--grid-size) * 6); }
+ .w7-l { width: calc(var(--grid-size) * 7); }
+ .w8-l { width: calc(var(--grid-size) * 8); }
+ .w9-l { width: calc(var(--grid-size) * 9); }
+ .w10-l { width: calc(var(--grid-size) * 10); }
+ .w11-l { width: calc(var(--grid-size) * 11); }
+ .w12-l { width: calc(var(--grid-size) * 12); }
+ .w13-l { width: calc(var(--grid-size) * 13); }
+ .w14-l { width: calc(var(--grid-size) * 14); }
+ .w15-l { width: calc(var(--grid-size) * 15); }
+ .w16-l { width: calc(var(--grid-size) * 16); }
+ .w17-l { width: calc(var(--grid-size) * 17); }
+ .w18-l { width: calc(var(--grid-size) * 18); }
+ .w19-l { width: calc(var(--grid-size) * 19); }
+ .w20-l { width: calc(var(--grid-size) * 20); }
+ .w25-l { width: calc(var(--grid-size) * 25); }
+ .w30-l { width: calc(var(--grid-size) * 30); }
+ .w40-l { width: calc(var(--grid-size) * 40); }
+ .w50-l { width: calc(var(--grid-size) * 50); }
+ .w70-l { width: calc(var(--grid-size) * 70); }
+ .w88-l { width: calc(var(--grid-size) * 88); }
+
+ .w-10-l { width: 10%; }
+ .w-20-l { width: 20%; }
+ .w-25-l { width: 25%; }
+ .w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
+ .w-40-l { width: 40%; }
+ .w-50-l { width: 50%; }
+ .w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
+ .w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-90-l { width: 90%; }
+ .w-100-l { width: 100%; }
+
+ .w-third-l { width: calc(100% / 3); }
+ .w-two-thirds-l { width: calc(100% / 1.5); }
+ .w-auto-l { width: auto; }
+}
diff --git a/ghost/admin/app/styles/spirit/_word-break.css b/ghost/admin/app/styles/spirit/_word-break.css
new file mode 100644
index 0000000000..bc88931a0d
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_word-break.css
@@ -0,0 +1,36 @@
+/*
+
+ WORD BREAK
+
+ Base:
+ word = word-break
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.word-normal { word-break: normal; }
+.word-wrap { word-break: break-all; }
+.word-nowrap { word-break: keep-all; }
+
+@media (--breakpoint-not-small) {
+ .word-normal-ns { word-break: normal; }
+ .word-wrap-ns { word-break: break-all; }
+ .word-nowrap-ns { word-break: keep-all; }
+}
+
+@media (--breakpoint-medium) {
+ .word-normal-m { word-break: normal; }
+ .word-wrap-m { word-break: break-all; }
+ .word-nowrap-m { word-break: keep-all; }
+}
+
+@media (--breakpoint-large) {
+ .word-normal-l { word-break: normal; }
+ .word-wrap-l { word-break: break-all; }
+ .word-nowrap-l { word-break: keep-all; }
+}
+
diff --git a/ghost/admin/app/styles/spirit/_z-index.css b/ghost/admin/app/styles/spirit/_z-index.css
new file mode 100644
index 0000000000..a45da72f33
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/_z-index.css
@@ -0,0 +1,55 @@
+/*
+
+ Z-INDEX
+
+ Base
+ z = z-index
+
+ Modifiers
+ -0 = literal value 0
+ -1 = literal value 1
+ -2 = literal value 2
+ -3 = literal value 3
+ -4 = literal value 4
+ -5 = literal value 5
+ -999 = literal value 999
+ -9999 = literal value 9999
+
+ -max = largest accepted z-index value as integer
+
+ -inherit = string value inherit
+ -initial = string value initial
+ -unset = string value unset
+
+ MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
+ Spec: http://www.w3.org/TR/CSS2/zindex.html
+ Articles:
+ https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+
+ Tips on extending:
+ There might be a time worth using negative z-index values.
+ Or if you are using tachyons with another project, you might need to
+ adjust these values to suit your needs.
+
+*/
+
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
+.z-5 { z-index: 5; }
+
+.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+
+.z--999 { z-index: -999; }
+.z--9999 { z-index: -9999; }
+
+.z-max {
+ z-index: 2147483647;
+}
+
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: initial; }
+.z-unset { z-index: unset; }
diff --git a/ghost/admin/app/styles/spirit/spirit-dark.css b/ghost/admin/app/styles/spirit/spirit-dark.css
new file mode 100644
index 0000000000..907910a4a9
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/spirit-dark.css
@@ -0,0 +1,5 @@
+@import "./spirit.css";
+
+/* Import dark theme overrides */
+@import "./_colors-dark.css";
+@import "./_koenig-dark.css";
diff --git a/ghost/admin/app/styles/spirit/spirit.css b/ghost/admin/app/styles/spirit/spirit.css
new file mode 100644
index 0000000000..d482e27678
--- /dev/null
+++ b/ghost/admin/app/styles/spirit/spirit.css
@@ -0,0 +1,77 @@
+/* External Library Includes */
+@import './_normalize';
+
+/* Modules */
+@import './_spacing';
+@import './_box-sizing';
+@import './_aspect-ratios';
+@import './_images';
+@import './_background-size';
+@import './_background-position';
+@import './_outlines';
+@import './_borders';
+@import './_border-colors';
+@import './_border-radius';
+@import './_border-style';
+@import './_border-widths';
+@import './_box-shadow';
+@import './_code';
+@import './_coordinates';
+@import './_clears';
+@import './_display';
+@import './_flexbox';
+@import './_floats';
+@import './_font-family';
+@import './_font-style';
+@import './_font-weight';
+@import './_forms';
+@import './_heights';
+@import './_letter-spacing';
+@import './_line-height';
+@import './_links';
+@import './_lists';
+@import './_max-widths';
+@import './_min-widths';
+@import './_min-heights';
+@import './_widths';
+@import './_overflow';
+@import './_position';
+@import './_opacity';
+@import './_rotations';
+@import './_skins';
+@import './_gradients';
+@import './_hovers';
+@import './_text-block-spacings';
+@import './_negative-margins';
+@import './_tables';
+@import './_text-decoration';
+@import './_text-align';
+@import './_text-transform';
+@import './_type-scale';
+@import './_typography';
+@import './_utilities';
+@import './_visibility';
+@import './_white-space';
+@import './_vertical-align';
+@import './_hovers';
+@import './_z-index';
+@import './_nested';
+@import './_dropdown';
+@import './_nudge';
+@import './_icons';
+@import './_animations';
+@import './_pointer-events';
+
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
+@import './_colors';
+@import './_media-queries';
+
+/* Debugging */
+@import './_debug-children';
+@import './_debug-grid';
+
+/* Uncomment out the line below to help debug layout issues */
+/* @import './_debug'; */
+@import './_koenig';
+@import './_custom-styles';
diff --git a/ghost/admin/ember-cli-build.js b/ghost/admin/ember-cli-build.js
index 334b6b5709..84a3c05392 100644
--- a/ghost/admin/ember-cli-build.js
+++ b/ghost/admin/ember-cli-build.js
@@ -9,6 +9,13 @@ const Funnel = require('broccoli-funnel');
const environment = EmberApp.env();
const isProduction = environment === 'production';
+const postcssEasyImport = require('postcss-easy-import');
+const postcssCustomProperties = require('postcss-custom-properties');
+const postcssColorModFunction = require('postcss-color-mod-function');
+const postcssCustomMedia = require('postcss-custom-media');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
const assetLocation = function (fileName) {
if (isProduction) {
fileName = fileName.replace('.', '.min.');
@@ -137,6 +144,48 @@ module.exports = function (defaults) {
codemirror: codemirrorAssets(),
simplemde: simplemdeAssets()
},
+ postcssOptions: {
+ compile: {
+ enabled: true,
+ plugins: [
+ {
+ module: postcssEasyImport,
+ options: {
+ path: ['app/styles']
+ }
+ },
+ {
+ module: postcssCustomProperties,
+ options: {
+ preserve: false
+ }
+ },
+ {
+ module: postcssColorModFunction
+ },
+ {
+ module: postcssCustomMedia
+ },
+ {
+ module: autoprefixer
+ },
+ {
+ module: cssnano,
+ options: {
+ zindex: false,
+ // cssnano sometimes minifies animations incorrectly causing them to break
+ // See: https://github.com/ben-eb/gulp-cssnano/issues/33#issuecomment-210518957
+ reduceIdents: {
+ keyframes: false
+ },
+ discardUnused: {
+ keyframes: false
+ }
+ }
+ }
+ ]
+ }
+ },
svgJar: {
strategy: 'inline',
stripPath: false,
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js
index e599f666e0..38dca555db 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-caption-input.js
@@ -1,8 +1,8 @@
import Component from '@ember/component';
import Key from 'mobiledoc-kit/utils/key';
+import kgStyle from '../helpers/kg-style';
import layout from '../templates/components/koenig-caption-input';
import {computed} from '@ember/object';
-import {kgStyle} from 'ember-cli-ghost-spirit/helpers/kg-style';
import {run} from '@ember/runloop';
export default Component.extend({
diff --git a/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
new file mode 100644
index 0000000000..3f40048003
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
@@ -0,0 +1,68 @@
+import {helper} from '@ember/component/helper';
+
+export function kgStyle([style], options) {
+ let cssClass = '';
+
+ let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif';
+ let cardBorderStyle = 'pt2 pb2 pl3 nl3 pr3 nr3 ba b--white relative kg-card-left-border kg-card-hover';
+
+ switch (style) {
+ // Card menu
+ case 'cardmenu':
+ cssClass = 'koenig-cardmenu absolute top-0 flex flex-wrap justify-start mt0 mr0 mb5 ml0 pa4 overflow-y-auto bg-white br3 shadow-3 ttn f7 normal';
+ break;
+
+ case 'cardmenu-card':
+ cssClass = 'flex flex-column justify-center items-center w20 h19 br3 midgrey ba b--transparent hover-darkgrey kg-cardmenu-card-hover pt1 anim-fast';
+ break;
+
+ case 'cardmenu-icon':
+ cssClass = 'flex items-center';
+ break;
+
+ case 'cardmenu-label':
+ cssClass = 'f-supersmall tracked-1 fw1 ma0 mt1';
+ break;
+
+ // Container cards
+ case 'container-card':
+ cssClass = cardBorderStyle;
+ break;
+
+ // Generic media card
+ case 'media-card':
+ cssClass = `${pFontStyle} ma0 ba b--transparent kg-card-hover`;
+ break;
+
+ // Media styles & figure caption
+ case 'image-normal':
+ cssClass = 'center db';
+ break;
+ case 'image-wide':
+ cssClass = 'center mw-100 db';
+ break;
+ case 'image-full':
+ cssClass = 'center mw-100vw db';
+ if (options.sidebar) {
+ cssClass = `${cssClass} kg-image-full--sidebar`;
+ }
+ break;
+ case 'figcaption':
+ cssClass = 'db pa2 center lh-title sans-serif fw4 f7 middarkgrey tracked-2 tc';
+ break;
+
+ // Media breakout styles
+ case 'breakout':
+ if (options.size === 'wide') {
+ cssClass = `${cssClass} koenig-breakout-wide`;
+ }
+ if (options.size === 'full') {
+ cssClass = `${cssClass} koenig-breakout-full`;
+ }
+ break;
+ }
+
+ return cssClass;
+}
+
+export default helper(kgStyle);
diff --git a/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js
new file mode 100644
index 0000000000..969a63e893
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js
@@ -0,0 +1 @@
+export {default, kgStyle} from 'koenig-editor/helpers/kg-style';
diff --git a/ghost/admin/package.json b/ghost/admin/package.json
index b370eda8f7..1beb963b05 100644
--- a/ghost/admin/package.json
+++ b/ghost/admin/package.json
@@ -30,6 +30,7 @@
"@ember/optional-features": "0.7.0",
"@html-next/vertical-collection": "1.0.0-beta.12",
"@tryghost/mobiledoc-kit": "0.11.1-ghost.6",
+ "autoprefixer": "9.4.8",
"blueimp-md5": "2.10.0",
"broccoli-asset-rev": "3.0.0",
"broccoli-concat": "3.7.3",
@@ -40,6 +41,7 @@
"codemirror": "5.42.2",
"coveralls": "3.0.2",
"csscomb": "4.2.0",
+ "cssnano": "4.1.10",
"current-device": "0.7.8",
"element-resize-detector": "^1.1.14",
"ember-ajax": "4.0.2",
@@ -54,14 +56,13 @@
"ember-cli-dependency-checker": "3.1.0",
"ember-cli-es6-transform": "0.0.5",
"ember-cli-eslint": "4.2.3",
- "ember-cli-ghost-spirit": "0.0.6",
"ember-cli-htmlbars": "3.0.1",
"ember-cli-htmlbars-inline-precompile": "2.1.0",
"ember-cli-inject-live-reload": "2.0.1",
"ember-cli-mirage": "0.4.12",
"ember-cli-moment-shim": "3.7.1",
"ember-cli-node-assets": "0.2.2",
- "ember-cli-postcss": "4.0.0",
+ "ember-cli-postcss": "4.2.0",
"ember-cli-pretender": "3.0.0",
"ember-cli-shims": "1.2.0",
"ember-cli-string-helpers": "2.0.0",
@@ -99,7 +100,6 @@
"eslint": "4.19.1",
"eslint-plugin-ghost": "0.1.0",
"fs-extra": "4.0.3",
- "ghost-spirit": "0.0.50",
"glob": "7.1.3",
"google-caja-bower": "https://github.com/acburdine/google-caja-bower#ghost",
"grunt": "1.0.3",
@@ -116,6 +116,10 @@
"matchdep": "2.0.0",
"normalize.css": "3.0.3",
"password-generator": "2.2.0",
+ "postcss-color-mod-function": "3.0.3",
+ "postcss-custom-media": "7.0.7",
+ "postcss-custom-properties": "8.0.9",
+ "postcss-easy-import": "3.0.0",
"reframe.js": "2.2.5",
"simplemde": "https://github.com/kevinansfield/simplemde-markdown-editor.git#ghost",
"testem": "2.14.0",
diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock
index ef0fa7a667..bccc29b50d 100644
--- a/ghost/admin/yarn.lock
+++ b/ghost/admin/yarn.lock
@@ -725,6 +725,11 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+"@types/minimatch@^3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+ integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
"@types/node@*":
version "10.12.18"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67"
@@ -1049,13 +1054,6 @@ amdefine@>=0.0.4:
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
-ansi-cyan@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
- integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
- dependencies:
- ansi-wrap "0.1.0"
-
ansi-escapes@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@@ -1066,20 +1064,6 @@ ansi-escapes@^3.0.0:
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
-ansi-gray@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
- integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
- dependencies:
- ansi-wrap "0.1.0"
-
-ansi-red@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
- integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
- dependencies:
- ansi-wrap "0.1.0"
-
ansi-regex@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1107,11 +1091,6 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.1:
dependencies:
color-convert "^1.9.0"
-ansi-wrap@0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
- integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
-
ansicolors@~0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
@@ -1152,14 +1131,6 @@ argparse@^1.0.2, argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
-arr-diff@^1.0.1:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
- integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo=
- dependencies:
- arr-flatten "^1.0.1"
- array-slice "^0.2.3"
-
arr-diff@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -1177,11 +1148,6 @@ arr-flatten@^1.0.1, arr-flatten@^1.1.0:
resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-arr-union@^2.0.1:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
- integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=
-
arr-union@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
@@ -1207,11 +1173,6 @@ array-from@^2.1.1:
resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
-array-slice@^0.2.3:
- version "0.2.3"
- resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
- integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
-
array-to-error@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/array-to-error/-/array-to-error-1.1.1.tgz#d68812926d14097a205579a667eeaf1856a44c07"
@@ -1340,7 +1301,7 @@ async-promise-queue@^1.0.3, async-promise-queue@^1.0.4:
async "^2.4.1"
debug "^2.6.8"
-async@1.x, async@^1.4.0, async@^1.5.2, async@~1.5.2:
+async@1.x, async@^1.5.2, async@~1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
@@ -1367,17 +1328,17 @@ atob@^2.1.1:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-autoprefixer@8.2.0:
- version "8.2.0"
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a"
- integrity sha512-xBVQpGAcSNNS1PBnEfT+F9VF8ZJeoKZ121I3OVQ0n1F0SqVuj4oLI6yFeEviPV8Z/GjoqBRXcYis0oSS8zjNEg==
+autoprefixer@9.4.8:
+ version "9.4.8"
+ resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.8.tgz#575dcdfd984228c7bccbc08c5fe53f0ea6915593"
+ integrity sha512-DIhd0KMi9Nql3oJkJ2HCeOVihrXFPtWXc6ckwaUNwliDOt9OGr0fk8vV8jCLWXnZc1EXvQ2uLUzGpcPxFAQHEQ==
dependencies:
- browserslist "^3.2.0"
- caniuse-lite "^1.0.30000817"
+ browserslist "^4.4.1"
+ caniuse-lite "^1.0.30000938"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
- postcss "^6.0.20"
- postcss-value-parser "^3.2.3"
+ postcss "^7.0.14"
+ postcss-value-parser "^3.3.1"
aws-sign2@~0.7.0:
version "0.7.0"
@@ -2227,7 +2188,7 @@ bluebird@^2.9.33:
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1"
integrity sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=
-bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.3:
+bluebird@^3.1.1, bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
@@ -2415,7 +2376,7 @@ broccoli-builder@^0.18.14:
rsvp "^3.0.17"
silent-error "^1.0.1"
-broccoli-caching-writer@3.0.3, broccoli-caching-writer@^3.0.3:
+broccoli-caching-writer@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/broccoli-caching-writer/-/broccoli-caching-writer-3.0.3.tgz#0bd2c96a9738d6a6ab590f07ba35c5157d7db476"
integrity sha1-C9LJapc41qarWQ8HujXFFX19tHY=
@@ -2642,25 +2603,6 @@ broccoli-node-info@^1.1.0:
resolved "https://registry.yarnpkg.com/broccoli-node-info/-/broccoli-node-info-1.1.0.tgz#3aa2e31e07e5bdb516dd25214f7c45ba1c459412"
integrity sha1-OqLjHgflvbUW3SUhT3xFuhxFlBI=
-broccoli-persistent-filter@1.4.3:
- version "1.4.3"
- resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.3.tgz#3511bc52fc53740cda51621f58a28152d9911bc1"
- integrity sha512-JwNLDvvXJlhUmr+CHcbVhCyp33NbCIAITjQZmJY9e8QzANXh3jpFWlhSFvkWghwKA8rTAKcXkW12agtiZjxr4g==
- dependencies:
- async-disk-cache "^1.2.1"
- async-promise-queue "^1.0.3"
- broccoli-plugin "^1.0.0"
- fs-tree-diff "^0.5.2"
- hash-for-dep "^1.0.2"
- heimdalljs "^0.2.1"
- heimdalljs-logger "^0.1.7"
- mkdirp "^0.5.1"
- promise-map-series "^0.2.1"
- rimraf "^2.6.1"
- rsvp "^3.0.18"
- symlink-or-copy "^1.0.1"
- walk-sync "^0.3.1"
-
broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.2.0, broccoli-persistent-filter@^1.4.2, broccoli-persistent-filter@^1.4.3:
version "1.4.6"
resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
@@ -2680,6 +2622,25 @@ broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-p
symlink-or-copy "^1.0.1"
walk-sync "^0.3.1"
+broccoli-persistent-filter@^2.1.0:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-2.2.1.tgz#d2a911ec02ebbbcfb382242c517159cb7a9c10d7"
+ integrity sha512-07rUlzzhsyrly4Waq/eMK/fhWcN3g0txirzx4EKqQ9pF4w+XXI/oRPibRyHRa5NL6DfNGC54fPFRwMYHjjm5nw==
+ dependencies:
+ async-disk-cache "^1.2.1"
+ async-promise-queue "^1.0.3"
+ broccoli-plugin "^1.0.0"
+ fs-tree-diff "^1.0.2"
+ hash-for-dep "^1.0.2"
+ heimdalljs "^0.2.1"
+ heimdalljs-logger "^0.1.7"
+ mkdirp "^0.5.1"
+ promise-map-series "^0.2.1"
+ rimraf "^2.6.1"
+ rsvp "^4.7.0"
+ symlink-or-copy "^1.0.1"
+ walk-sync "^1.0.0"
+
broccoli-persistent-filter@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-2.1.1.tgz#7bb2b1015baedf5cf58b5b2608495f3d78f81b12"
@@ -2709,26 +2670,26 @@ broccoli-plugin@^1.0.0, broccoli-plugin@^1.1.0, broccoli-plugin@^1.2.0, broccoli
rimraf "^2.3.4"
symlink-or-copy "^1.1.8"
-broccoli-postcss-single@^1.6.0:
- version "1.6.0"
- resolved "https://registry.yarnpkg.com/broccoli-postcss-single/-/broccoli-postcss-single-1.6.0.tgz#da008ba24087f5cd1d7ec851d3d8921c9896a8ff"
- integrity sha512-cE89P8mEmNPQS3VdxY8r2cUWTbdPyZMfkbsXLQ3bKrJ+oX8L0H1u3P0ryVXwkFGpgs9bfJiQF+m7HYK+iWcV9g==
+broccoli-postcss-single@^2.1.0:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/broccoli-postcss-single/-/broccoli-postcss-single-2.1.2.tgz#cca8d3cab37985aef6e24d87a2defeb492a81ec2"
+ integrity sha512-YBM/CvU55oHUk33KlUCIrHkHY73PTyjDVQO1CooIyesbbzp/c75Ux2365PSMz3w/O8rUdGPAYS5Ha8YhJvebOQ==
dependencies:
- broccoli-caching-writer "3.0.3"
- include-path-searcher "0.1.0"
- mkdirp "0.5.1"
- object-assign "4.1.1"
- postcss "6.0.16"
+ broccoli-caching-writer "^3.0.3"
+ include-path-searcher "^0.1.0"
+ mkdirp "^0.5.1"
+ object-assign "^4.1.1"
+ postcss "^7.0.0"
-broccoli-postcss@^3.5.3:
- version "3.5.3"
- resolved "https://registry.yarnpkg.com/broccoli-postcss/-/broccoli-postcss-3.5.3.tgz#bfbb12531d8c774d23651b462c3ed23f0227a8e8"
- integrity sha512-eJNDuvdE3eVplT+236EYzlbz2ONN13q0RNcphJXnlIqv3d4qm4Ho+QRhSbZJao6UpBTTOK6OCSkQBNAVtVTdDQ==
+broccoli-postcss@^4.0.1:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/broccoli-postcss/-/broccoli-postcss-4.0.3.tgz#9a2839660888dc5544189fc7faa4552e6bfb72b0"
+ integrity sha512-sparRjTNnP83v11F7F+kbSv1yH2LrdPvHUIzh0KyisVlYTjaBkS/B0tdccmk0VjXXO8H23IMn5msxuJxoeJ5/w==
dependencies:
- broccoli-funnel "2.0.1"
- broccoli-persistent-filter "1.4.3"
- object-assign "4.1.1"
- postcss "6.0.22"
+ broccoli-funnel "^2.0.1"
+ broccoli-persistent-filter "^2.1.0"
+ object-assign "^4.1.1"
+ postcss "^7.0.5"
broccoli-rollup@^1.0.3:
version "1.3.0"
@@ -2943,7 +2904,7 @@ browserify-zlib@^0.2.0:
dependencies:
pako "~1.0.5"
-browserslist@^3.1.1, browserslist@^3.2.0, browserslist@^3.2.6:
+browserslist@^3.1.1, browserslist@^3.2.6:
version "3.2.8"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
@@ -2960,6 +2921,15 @@ browserslist@^4.0.0, browserslist@^4.3.4:
electron-to-chromium "^1.3.96"
node-releases "^1.1.3"
+browserslist@^4.4.1:
+ version "4.4.2"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2"
+ integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg==
+ dependencies:
+ caniuse-lite "^1.0.30000939"
+ electron-to-chromium "^1.3.113"
+ node-releases "^1.1.8"
+
bser@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -3024,24 +2994,6 @@ builtins@^1.0.3:
resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
-bunyan-loggly@^1.3.1:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/bunyan-loggly/-/bunyan-loggly-1.4.0.tgz#a10b61d7b32422e1c648031185d8e0413427db8f"
- integrity sha512-AgpiqhaeAhFCjPdCeZqUEaTDG7Mf9XyjBUY+Piqkmas2MGun4KePcYXwQ3j9yoI1mJTlSCFQwQ5ajBpLUM8GtA==
- dependencies:
- json-stringify-safe "^5.0.1"
- node-loggly-bulk "^2.2.4"
-
-bunyan@1.8.12:
- version "1.8.12"
- resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
- integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=
- optionalDependencies:
- dtrace-provider "~0.8"
- moment "^2.10.6"
- mv "~2"
- safe-json-stringify "~1"
-
bytes@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"
@@ -3115,11 +3067,6 @@ caller-path@^2.0.0:
dependencies:
caller-callsite "^2.0.0"
-caller@1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/caller/-/caller-1.0.1.tgz#b851860f70e195db3d277395aa1a7e23ea30ecf5"
- integrity sha1-uFGGD3Dhlds9J3OVqhp+I+ow7PU=
-
callsite@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
@@ -3143,12 +3090,12 @@ camelcase-keys@^2.0.0:
camelcase "^2.0.0"
map-obj "^1.0.0"
-camelcase@^1.0.2, camelcase@^1.2.1:
+camelcase@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
-camelcase@^2.0.0, camelcase@^2.0.1:
+camelcase@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
@@ -3175,11 +3122,16 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0"
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000817, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000925:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000925:
version "1.0.30000928"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000928.tgz#805e828dc72b06498e3683a32e61c7507fd67b88"
integrity sha512-aSpMWRXL6ZXNnzm8hgE4QDLibG5pVJ2Ujzsuj3icazlIkxXkPXtL+BWnMx6FBkWmkZgBHGUxPZQvrbRw2ZTxhg==
+caniuse-lite@^1.0.30000938, caniuse-lite@^1.0.30000939:
+ version "1.0.30000939"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000939.tgz#b9ab7ac9e861bf78840b80c5dfbc471a5cd7e679"
+ integrity sha512-oXB23ImDJOgQpGjRv1tCtzAvJr4/OvrHi5SO2vUgB0g0xpdZZoA/BxfImiWfdwoYdUTtQrPsXsvYU/dmCSM8gg==
+
capture-exit@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -3423,15 +3375,6 @@ cliui@^2.1.0:
right-align "^0.1.1"
wordwrap "0.0.2"
-cliui@^3.0.3:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
- integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
- dependencies:
- string-width "^1.0.1"
- strip-ansi "^3.0.1"
- wrap-ansi "^2.0.0"
-
clone@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
@@ -3516,11 +3459,6 @@ color-string@^1.5.2:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
-color-support@^1.1.3:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
- integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
color@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.0.tgz#d8e9fb096732875774c84bf922815df0308d0ffc"
@@ -3534,11 +3472,6 @@ colors@1.0.3:
resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
-colors@^1.1.2:
- version "1.3.3"
- resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d"
- integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==
-
colors@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -3568,7 +3501,7 @@ commander@2.8.x:
dependencies:
graceful-readlink ">= 1.0.0"
-commander@^2.5.0, commander@^2.6.0, commander@^2.9.0:
+commander@^2.5.0, commander@^2.6.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -3653,14 +3586,6 @@ concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.6.0:
readable-stream "^2.2.2"
typedarray "^0.0.6"
-config-chain@~1.1.5:
- version "1.1.12"
- resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
- integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
- dependencies:
- ini "^1.3.4"
- proto-list "~1.2.1"
-
configstore@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7"
@@ -3673,11 +3598,6 @@ configstore@^4.0.0:
write-file-atomic "^2.0.0"
xdg-basedir "^3.0.0"
-connect-slashes@^1.3.1:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/connect-slashes/-/connect-slashes-1.3.1.tgz#95d61830d0f9d5853c8688f0b5f43988b186ac37"
- integrity sha1-ldYYMND51YU8hojwtfQ5iLGGrDc=
-
console-browserify@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -3790,27 +3710,15 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
- integrity sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==
- dependencies:
- is-directory "^0.3.1"
- js-yaml "^3.4.3"
- minimist "^1.2.0"
- object-assign "^4.1.0"
- os-homedir "^1.0.1"
- parse-json "^2.2.0"
- require-from-string "^1.1.0"
-
cosmiconfig@^5.0.0:
- version "5.0.7"
- resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04"
- integrity sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA==
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.1.0.tgz#6c5c35e97f37f985061cdf653f114784231185cf"
+ integrity sha512-kCNPvthka8gvLtzAxQXvWo4FxqRB+ftRZyPZNuab5ngvM9Y7yw7hbEysglptLgpkGX9nAOKTBVkHUAe8xtYR6Q==
dependencies:
import-fresh "^2.0.0"
is-directory "^0.3.1"
js-yaml "^3.9.0"
+ lodash.get "^4.4.2"
parse-json "^4.0.0"
coveralls@3.0.2:
@@ -3962,11 +3870,16 @@ css-url-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=
-css-what@2.1, css-what@^2.1.2:
+css-what@2.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
+css-what@^2.1.2:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+ integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
+
csscomb@4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csscomb/-/csscomb-4.2.0.tgz#5f948bc94afa61c033c3984e4192f0e6fef67fdb"
@@ -3985,40 +3898,40 @@ cssesc@^2.0.0:
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
-cssnano-preset-default@^4.0.6:
- version "4.0.6"
- resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.6.tgz#92379e2a6db4a91c0ea727f5f556eeac693eab6a"
- integrity sha512-UPboYbFaJFtDUhJ4fqctThWbbyF4q01/7UhsZbLzp35l+nUxtzh1SifoVlEfyLM3n3Z0htd8B1YlCxy9i+bQvg==
+cssnano-preset-default@^4.0.7:
+ version "4.0.7"
+ resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
+ integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
dependencies:
css-declaration-sorter "^4.0.1"
cssnano-util-raw-cache "^4.0.1"
postcss "^7.0.0"
- postcss-calc "^7.0.0"
- postcss-colormin "^4.0.2"
+ postcss-calc "^7.0.1"
+ postcss-colormin "^4.0.3"
postcss-convert-values "^4.0.1"
- postcss-discard-comments "^4.0.1"
+ postcss-discard-comments "^4.0.2"
postcss-discard-duplicates "^4.0.2"
postcss-discard-empty "^4.0.1"
postcss-discard-overridden "^4.0.1"
- postcss-merge-longhand "^4.0.10"
- postcss-merge-rules "^4.0.2"
+ postcss-merge-longhand "^4.0.11"
+ postcss-merge-rules "^4.0.3"
postcss-minify-font-values "^4.0.2"
- postcss-minify-gradients "^4.0.1"
- postcss-minify-params "^4.0.1"
- postcss-minify-selectors "^4.0.1"
+ postcss-minify-gradients "^4.0.2"
+ postcss-minify-params "^4.0.2"
+ postcss-minify-selectors "^4.0.2"
postcss-normalize-charset "^4.0.1"
- postcss-normalize-display-values "^4.0.1"
- postcss-normalize-positions "^4.0.1"
- postcss-normalize-repeat-style "^4.0.1"
- postcss-normalize-string "^4.0.1"
- postcss-normalize-timing-functions "^4.0.1"
+ postcss-normalize-display-values "^4.0.2"
+ postcss-normalize-positions "^4.0.2"
+ postcss-normalize-repeat-style "^4.0.2"
+ postcss-normalize-string "^4.0.2"
+ postcss-normalize-timing-functions "^4.0.2"
postcss-normalize-unicode "^4.0.1"
postcss-normalize-url "^4.0.1"
- postcss-normalize-whitespace "^4.0.1"
- postcss-ordered-values "^4.1.1"
- postcss-reduce-initial "^4.0.2"
- postcss-reduce-transforms "^4.0.1"
- postcss-svgo "^4.0.1"
+ postcss-normalize-whitespace "^4.0.2"
+ postcss-ordered-values "^4.1.2"
+ postcss-reduce-initial "^4.0.3"
+ postcss-reduce-transforms "^4.0.2"
+ postcss-svgo "^4.0.2"
postcss-unique-selectors "^4.0.1"
cssnano-util-get-arguments@^4.0.0:
@@ -4043,13 +3956,13 @@ cssnano-util-same-parent@^4.0.0:
resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-cssnano@^4.0.0-rc.2:
- version "4.1.8"
- resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.8.tgz#8014989679d5fd42491e4499a521dbfb85c95fd1"
- integrity sha512-5GIY0VzAHORpbKiL3rMXp4w4M1Ki+XlXgEXyuWXVd3h6hlASb+9Vo76dNP56/elLMVBBsUfusCo1q56uW0UWig==
+cssnano@4.1.10:
+ version "4.1.10"
+ resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
+ integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
dependencies:
cosmiconfig "^5.0.0"
- cssnano-preset-default "^4.0.6"
+ cssnano-preset-default "^4.0.7"
is-resolvable "^1.0.0"
postcss "^7.0.0"
@@ -4180,7 +4093,7 @@ debug@^4.1.0, debug@~4.1.0:
dependencies:
ms "^2.1.1"
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+decamelize@^1.0.0, decamelize@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -4417,13 +4330,6 @@ dot-prop@^4.1.0, dot-prop@^4.1.1:
dependencies:
is-obj "^1.0.0"
-dtrace-provider@~0.8:
- version "0.8.7"
- resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.7.tgz#dc939b4d3e0620cfe0c1cd803d0d2d7ed04ffd04"
- integrity sha1-3JObTT4GIM/gwc2APQ0tftBP/QQ=
- dependencies:
- nan "^2.10.0"
-
duplexify@^3.4.2, duplexify@^3.6.0:
version "3.6.1"
resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
@@ -4447,22 +4353,16 @@ editions@^1.1.1:
resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
-editorconfig@^0.13.2:
- version "0.13.3"
- resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.13.3.tgz#e5219e587951d60958fd94ea9a9a008cdeff1b34"
- integrity sha512-WkjsUNVCu+ITKDj73QDvi0trvpdDWdkDyHybDGSXPfekLCqwmpD7CP7iPbvBgosNuLcI96XTDwNa75JyFl7tEQ==
- dependencies:
- bluebird "^3.0.5"
- commander "^2.9.0"
- lru-cache "^3.2.0"
- semver "^5.1.0"
- sigmund "^1.0.1"
-
ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+electron-to-chromium@^1.3.113:
+ version "1.3.113"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
+ integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
+
electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.96:
version "1.3.100"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.100.tgz#899fb088def210aee6b838a47655bbb299190e13"
@@ -4667,7 +4567,7 @@ ember-cli-chai@0.5.0:
rollup-plugin-commonjs "^8.0.2"
rollup-plugin-node-resolve "^3.0.0"
-ember-cli-cjs-transform@1.3.0, ember-cli-cjs-transform@^1.2.0, ember-cli-cjs-transform@^1.3.0:
+ember-cli-cjs-transform@1.3.0, ember-cli-cjs-transform@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/ember-cli-cjs-transform/-/ember-cli-cjs-transform-1.3.0.tgz#73a24a9335067b83a4acac9c5fe4deb51a62391a"
integrity sha1-c6JKkzUGe4OkrKycX+TetRpiORo=
@@ -4740,19 +4640,6 @@ ember-cli-get-component-path-option@^1.0.0:
resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
-ember-cli-ghost-spirit@0.0.6:
- version "0.0.6"
- resolved "https://registry.yarnpkg.com/ember-cli-ghost-spirit/-/ember-cli-ghost-spirit-0.0.6.tgz#38f370da5943429e180622875a1db0010f29ea32"
- integrity sha1-OPNw2llDQp4YBiKHWh2wAQ8p6jI=
- dependencies:
- broccoli-file-creator "^2.1.1"
- broccoli-funnel "^2.0.1"
- broccoli-merge-trees "^3.0.0"
- ember-cli-babel "^6.6.0"
- ember-cli-cjs-transform "^1.2.0"
- ember-cli-postcss "4.0.0"
- ghost-spirit ">=0.0.18"
-
ember-cli-htmlbars-inline-precompile@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars-inline-precompile/-/ember-cli-htmlbars-inline-precompile-2.1.0.tgz#61b91ff1879d44ae504cadb46fb1f2604995ae08"
@@ -4885,16 +4772,16 @@ ember-cli-path-utils@^1.0.0:
resolved "https://registry.yarnpkg.com/ember-cli-path-utils/-/ember-cli-path-utils-1.0.0.tgz#4e39af8b55301cddc5017739b77a804fba2071ed"
integrity sha1-Tjmvi1UwHN3FAXc5t3qAT7ogce0=
-ember-cli-postcss@4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/ember-cli-postcss/-/ember-cli-postcss-4.0.0.tgz#d32c4ab5539122e3bc8fe26bb9cc18d8ac377739"
- integrity sha512-PApMjEhR6cIDegoI8OlNIESdYKoECsbByqsBJ239BNfwne5BaqwvoUlj+RaZV5isye7uHR8cjG5aD2BX0ES97A==
+ember-cli-postcss@4.2.0:
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/ember-cli-postcss/-/ember-cli-postcss-4.2.0.tgz#7c840c0b5317923f35f062ff6882189dc55b8c13"
+ integrity sha512-TkSl+v94Wx3eiX24773nv7Wk61+mrDg+WIqYu1Fvkm+HCmt09UuUJJHnpZUk2d+Uv0FZcXe2aay/6unIAmZufw==
dependencies:
broccoli-file-creator "^2.1.1"
broccoli-merge-trees "^3.0.0"
- broccoli-postcss "^3.5.3"
- broccoli-postcss-single "^1.6.0"
- ember-cli-babel "^6.12.0"
+ broccoli-postcss "^4.0.1"
+ broccoli-postcss-single "^2.1.0"
+ ember-cli-babel "^7.1.0"
merge "^1.2.0"
ember-cli-preprocess-registry@^3.1.2:
@@ -5723,6 +5610,11 @@ ensure-posix-path@^1.0.0, ensure-posix-path@^1.0.1, ensure-posix-path@^1.0.2:
resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.0.2.tgz#a65b3e42d0b71cfc585eb774f9943c8d9b91b0c2"
integrity sha1-pls+QtC3HPxYXrd0+ZQ8jZuRsMI=
+ensure-posix-path@^1.1.0:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.1.1.tgz#3c62bdb19fa4681544289edb2b382adc029179ce"
+ integrity sha512-VWU0/zXzVbeJNXvME/5EmLuEj2TauvoaTz6aFYK1Z92JCBlDlZ3Gu0tuGR42kpW1754ywTs+QB0g5TP0oj9Zaw==
+
entities@^1.1.1, entities@~1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -6169,16 +6061,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
dependencies:
homedir-polyfill "^1.0.1"
-express-hbs@^1.0.2:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/express-hbs/-/express-hbs-1.0.4.tgz#c4480d6e8a9f8c23500d3b1a1394f17eae451786"
- integrity sha1-xEgNboqfjCNQDTsaE5Txfq5FF4Y=
- dependencies:
- handlebars "4.0.6"
- js-beautify "1.6.8"
- readdirp "2.1.0"
-
-express@^4.10.7, express@^4.14.0, express@^4.16.3:
+express@^4.10.7, express@^4.16.3:
version "4.16.4"
resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==
@@ -6214,13 +6097,6 @@ express@^4.10.7, express@^4.14.0, express@^4.16.3:
utils-merge "1.0.1"
vary "~1.1.2"
-extend-shallow@^1.1.2:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
- integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=
- dependencies:
- kind-of "^1.1.0"
-
extend-shallow@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -6300,16 +6176,6 @@ faker@^3.0.0:
resolved "https://registry.yarnpkg.com/faker/-/faker-3.1.0.tgz#0f908faf4e6ec02524e54a57e432c5c013e08c9f"
integrity sha1-D5CPr05uwCUk5UpX5DLFwBPgjJ8=
-fancy-log@^1.3.2:
- version "1.3.3"
- resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
- integrity sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==
- dependencies:
- ansi-gray "^0.1.1"
- color-support "^1.1.3"
- parse-node-version "^1.0.0"
- time-stamp "^1.0.0"
-
fast-deep-equal@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
@@ -6451,11 +6317,6 @@ find-index@^1.1.0:
resolved "https://registry.yarnpkg.com/find-index/-/find-index-1.1.0.tgz#53007c79cd30040d6816d79458e8837d5c5705ef"
integrity sha1-UwB8ec0wBA1oFteUWOiDfVxXBe8=
-find-root@1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
- integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
find-up@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -6652,15 +6513,6 @@ fs-extra@^0.30.0:
path-is-absolute "^1.0.0"
rimraf "^2.2.8"
-fs-extra@^3.0.1:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
- integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=
- dependencies:
- graceful-fs "^4.1.2"
- jsonfile "^3.0.0"
- universalify "^0.1.0"
-
fs-extra@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
@@ -6710,6 +6562,16 @@ fs-tree-diff@^0.5.2, fs-tree-diff@^0.5.3, fs-tree-diff@^0.5.4, fs-tree-diff@^0.5
path-posix "^1.0.0"
symlink-or-copy "^1.1.8"
+fs-tree-diff@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/fs-tree-diff/-/fs-tree-diff-1.0.2.tgz#0e2931733a85b55feb3472c0b89a20b0c03ac0de"
+ integrity sha512-Zro2ACaPVDgVOx9+s5s5AfPlAD0kMJdbwGvTGF6KC1SjxjiGWxJvV4mUTDkFVSy3OUw2C/f1qpdjF81hGqSBAw==
+ dependencies:
+ heimdalljs-logger "^0.1.7"
+ object-assign "^4.1.0"
+ path-posix "^1.0.0"
+ symlink-or-copy "^1.1.8"
+
fs-updater@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/fs-updater/-/fs-updater-1.0.4.tgz#2329980f99ae9176e9a0e84f7637538a182ce63b"
@@ -6812,64 +6674,6 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
-ghost-ignition@^2.7.0:
- version "2.9.6"
- resolved "https://registry.yarnpkg.com/ghost-ignition/-/ghost-ignition-2.9.6.tgz#cc8358f0a356bae490e5abeca3c3bda8383352fe"
- integrity sha512-4C/z6PZOxp8xjqcHR+QqYBjt0T7IRdfUwHcN86gKNXMhybaWwsH7JDyfnxLfgDfQDunx7wTHmFiSo3UT//f7MQ==
- dependencies:
- bunyan "1.8.12"
- bunyan-loggly "^1.3.1"
- caller "1.0.1"
- debug "^2.6.9"
- find-root "1.1.0"
- fs-extra "^3.0.1"
- json-stringify-safe "^5.0.1"
- lodash "^4.16.4"
- moment "^2.15.2"
- nconf "^0.10.0"
- prettyjson "^1.1.3"
- uuid "^3.0.0"
-
-ghost-spirit@0.0.50:
- version "0.0.50"
- resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.50.tgz#d880226dff7be3feef96905e486eee21ad3bd6c4"
- integrity sha512-Law87t/V/I8wve28gqrBHcOiT0mB9K0gNqwKKo15HIR9PFWX8Kxyru/NfmWJi5RcjEukpnd7BWLap9iYGc74mg==
- dependencies:
- autoprefixer "8.2.0"
- bluebird "^3.4.6"
- connect-slashes "^1.3.1"
- cssnano "^4.0.0-rc.2"
- express "^4.14.0"
- express-hbs "^1.0.2"
- ghost-ignition "^2.7.0"
- gulp-postcss "7.0.1"
- lodash "^4.15.0"
- postcss-color-mod-function "2.4.2"
- postcss-custom-media "6.0.0"
- postcss-custom-properties "7.0.0"
- postcss-easy-import "3.0.0"
- postcss-prefix-selector "1.6.0"
-
-ghost-spirit@>=0.0.18:
- version "0.0.49"
- resolved "https://registry.yarnpkg.com/ghost-spirit/-/ghost-spirit-0.0.49.tgz#e806f896803b0a31976060ad6f656d333ebeb7dd"
- integrity sha512-gmbPXYenZ1BpeI/2+pw7RJCXOAduUxNu8eXl2b0YA/5oU8mbtJtVoitF93NJ/C4CvrJ3E0Q1z4li30TupmmPgQ==
- dependencies:
- autoprefixer "8.2.0"
- bluebird "^3.4.6"
- connect-slashes "^1.3.1"
- cssnano "^4.0.0-rc.2"
- express "^4.14.0"
- express-hbs "^1.0.2"
- ghost-ignition "^2.7.0"
- gulp-postcss "7.0.1"
- lodash "^4.15.0"
- postcss-color-mod-function "2.4.2"
- postcss-custom-media "6.0.0"
- postcss-custom-properties "7.0.0"
- postcss-easy-import "3.0.0"
- postcss-prefix-selector "1.6.0"
-
git-repo-info@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/git-repo-info/-/git-repo-info-1.4.1.tgz#2a072823254aaf62fcf0766007d7b6651bd41943"
@@ -6941,17 +6745,6 @@ glob@^5.0.10, glob@^5.0.15, glob@~5.0.0:
once "^1.3.0"
path-is-absolute "^1.0.0"
-glob@^6.0.1:
- version "6.0.4"
- resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
- integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
- dependencies:
- inflight "^1.0.4"
- inherits "2"
- minimatch "2 || 3"
- once "^1.3.0"
- path-is-absolute "^1.0.0"
-
glob@~7.0.0:
version "7.0.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
@@ -7124,28 +6917,6 @@ grunt@1.0.3:
path-is-absolute "~1.0.0"
rimraf "~2.6.2"
-gulp-postcss@7.0.1:
- version "7.0.1"
- resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-7.0.1.tgz#3f1c36db1197140c399c252ddff339129638e395"
- integrity sha1-Pxw22xGXFAw5nCUt3/M5EpY445U=
- dependencies:
- fancy-log "^1.3.2"
- plugin-error "^0.1.2"
- postcss "^6.0.0"
- postcss-load-config "^1.2.0"
- vinyl-sourcemaps-apply "^0.2.1"
-
-handlebars@4.0.6:
- version "4.0.6"
- resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
- integrity sha1-LORISFBTf5yXqAJtU5m5NcTtTtc=
- dependencies:
- async "^1.4.0"
- optimist "^0.6.1"
- source-map "^0.4.4"
- optionalDependencies:
- uglify-js "^2.6"
-
handlebars@^4.0.1, handlebars@^4.0.11, handlebars@^4.0.4:
version "4.0.12"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.12.tgz#2c15c8a96d46da5e266700518ba8cb8d919d5bc5"
@@ -7476,7 +7247,7 @@ imurmurhash@^0.1.4:
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-include-path-searcher@0.1.0:
+include-path-searcher@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/include-path-searcher/-/include-path-searcher-0.1.0.tgz#c0cf2ddfa164fb2eae07bc7ca43a7f191cb4d7bd"
integrity sha1-wM8t36Fk+y6uB7x8pDp/GRy0170=
@@ -7521,7 +7292,7 @@ inherits@2.0.1:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-ini@^1.3.0, ini@^1.3.4, ini@~1.3.0:
+ini@^1.3.4, ini@~1.3.0:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -7999,21 +7770,6 @@ jquery@^3.3.1:
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
-js-base64@^2.1.9:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
- integrity sha512-wlEBIZ5LP8usDylWbDNhKPEFVFdI5hCHpnVoT/Ysvoi/PRhJENm/Rlh9TvjYB38HFfKZN7OzEbRjmjvLkFw11g==
-
-js-beautify@1.6.8:
- version "1.6.8"
- resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.6.8.tgz#da1146d34431145309c89be7f69ed16e8e0ff07e"
- integrity sha1-2hFG00QxFFMJyJvn9p7Rbo4P8H4=
- dependencies:
- config-chain "~1.1.5"
- editorconfig "^0.13.2"
- mkdirp "~0.5.0"
- nopt "~3.0.1"
-
js-levenshtein@^1.1.3:
version "1.1.5"
resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.5.tgz#57e4b1b5cc35e6d2721f118bd5245b36ac56b253"
@@ -8039,7 +7795,7 @@ js-tokens@^3.0.2:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-js-yaml@3.x, js-yaml@^3.11.0, js-yaml@^3.12.0, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.4.3, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@3.x, js-yaml@^3.11.0, js-yaml@^3.12.0, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.9.0, js-yaml@^3.9.1:
version "3.12.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==
@@ -8152,7 +7908,7 @@ json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
dependencies:
jsonify "~0.0.0"
-json-stringify-safe@5.0.x, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
+json-stringify-safe@~5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -8188,13 +7944,6 @@ jsonfile@^2.1.0:
optionalDependencies:
graceful-fs "^4.1.6"
-jsonfile@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
- integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=
- optionalDependencies:
- graceful-fs "^4.1.6"
-
jsonfile@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -8226,11 +7975,6 @@ just-extend@^4.0.2:
version "1.6.3"
resolved "https://github.com/madrobby/keymaster.git#f8f43ddafad663b505dc0908e72853bcf8daea49"
-kind-of@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
- integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=
-
kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
version "3.2.2"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -8862,7 +8606,7 @@ lodash@^3.10.0, lodash@^3.9.3:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
-lodash@^4.11.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.10, lodash@~4.17.5:
+lodash@^4.11.1, lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.10, lodash@~4.17.5:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -8919,13 +8663,6 @@ lru-cache@2:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
integrity sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=
-lru-cache@^3.2.0:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee"
- integrity sha1-cXibO39Tmb7IVl3aOKow0qCX7+4=
- dependencies:
- pseudomap "^1.0.1"
-
lru-cache@^4.0.1:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -9052,6 +8789,13 @@ matcher-collection@^1.0.0, matcher-collection@^1.0.4, matcher-collection@^1.0.5:
dependencies:
minimatch "^3.0.2"
+matcher-collection@^1.1.1:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/matcher-collection/-/matcher-collection-1.1.2.tgz#1076f506f10ca85897b53d14ef54f90a5c426838"
+ integrity sha512-YQ/teqaOIIfUHedRam08PB3NK7Mjct6BvzRnJmpGDm8uFXpNr1sbY4yuflI5JcEs6COpYA0FpRQhSDBf1tT95g==
+ dependencies:
+ minimatch "^3.0.2"
+
math-random@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -9389,7 +9133,7 @@ moment-timezone@^0.5.13:
dependencies:
moment ">= 2.9.0"
-"moment@>= 2.9.0", moment@^2.10.6, moment@^2.15.2, moment@^2.18.1, moment@^2.19.3:
+"moment@>= 2.9.0", moment@^2.19.3:
version "2.23.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.23.0.tgz#759ea491ac97d54bac5ad776996e2a58cc1bc225"
integrity sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==
@@ -9452,15 +9196,6 @@ mute-stream@0.0.7:
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
-mv@~2:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
- integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
- dependencies:
- mkdirp "~0.5.1"
- ncp "~2.0.0"
- rimraf "~2.4.0"
-
najax@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/najax/-/najax-1.0.4.tgz#63fd8dbf15d18f24dc895b3a16fec66c136b8084"
@@ -9470,7 +9205,7 @@ najax@^1.0.3:
lodash.defaultsdeep "^4.6.0"
qs "^6.2.0"
-nan@^2.10.0, nan@^2.9.2:
+nan@^2.9.2:
version "2.12.1"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.12.1.tgz#7b1aa193e9aa86057e3c7bbd0ac448e770925552"
integrity sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==
@@ -9497,21 +9232,6 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
-nconf@^0.10.0:
- version "0.10.0"
- resolved "https://registry.yarnpkg.com/nconf/-/nconf-0.10.0.tgz#da1285ee95d0a922ca6cee75adcf861f48205ad2"
- integrity sha512-fKiXMQrpP7CYWJQzKkPPx9hPgmq+YLDyxcG9N8RpiE9FoCkCbzD0NyW0YhE3xn3Aupe7nnDeIx4PFzYehpHT9Q==
- dependencies:
- async "^1.4.0"
- ini "^1.3.0"
- secure-keys "^1.0.0"
- yargs "^3.19.0"
-
-ncp@~2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
- integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
-
needle@^2.2.1:
version "2.2.4"
resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
@@ -9605,15 +9325,6 @@ node-libs-browser@^2.0.0:
util "^0.10.3"
vm-browserify "0.0.4"
-node-loggly-bulk@^2.2.4:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/node-loggly-bulk/-/node-loggly-bulk-2.2.4.tgz#bdd8638d97c43ecf1e1831ca98b250968fa6dee9"
- integrity sha512-DfhtsDfkSBU6Dp1zvK+H1MgHRcA2yb4z07ctyA6uo+bNwKtv1exhohN910zcWNkdSYq1TImCq+O+3bOTuYHvmQ==
- dependencies:
- json-stringify-safe "5.0.x"
- moment "^2.18.1"
- request ">=2.76.0 <3.0.0"
-
node-modules-path@^1.0.0, node-modules-path@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.2.tgz#e3acede9b7baf4bc336e3496b58e5b40d517056e"
@@ -9652,7 +9363,14 @@ node-releases@^1.1.3:
dependencies:
semver "^5.3.0"
-nopt@3.x, nopt@^3.0.6, nopt@~3.0.1, nopt@~3.0.6:
+node-releases@^1.1.8:
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.8.tgz#32a63fff63c5e51b7e0f540ac95947d220fc6862"
+ integrity sha512-gQm+K9mGCiT/NXHy+V/ZZS1N/LOaGGqRAAJJs3X9Ah1g+CIbRcBgNyoNYQ+SEtcyAtB9KqDruu+fF7nWjsqRaA==
+ dependencies:
+ semver "^5.3.0"
+
+nopt@3.x, nopt@^3.0.6, nopt@~3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
@@ -9771,7 +9489,7 @@ oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -10045,11 +9763,6 @@ parse-ms@^1.0.0:
resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d"
integrity sha1-VjRtR0nXjyNDDKDHE4UK75GqNh0=
-parse-node-version@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.0.tgz#33d9aa8920dcc3c0d33658ec18ce237009a56d53"
- integrity sha512-02GTVHD1u0nWc20n2G7WX/PgdhNFG04j5fi1OkaJzPWLTcf6vh6229Lta1wTmXG/7Dg42tCssgkccVt7qvd8Kg==
-
parse-passwd@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -10242,17 +9955,6 @@ pkg-up@^2.0.0:
dependencies:
find-up "^2.1.0"
-plugin-error@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
- integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=
- dependencies:
- ansi-cyan "^0.1.1"
- ansi-red "^0.1.1"
- arr-diff "^1.0.1"
- arr-union "^2.0.1"
- extend-shallow "^1.1.2"
-
pluralize@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -10277,7 +9979,7 @@ posix-character-classes@^0.1.0:
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-postcss-calc@^7.0.0:
+postcss-calc@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
integrity sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==
@@ -10287,19 +9989,19 @@ postcss-calc@^7.0.0:
postcss-selector-parser "^5.0.0-rc.4"
postcss-value-parser "^3.3.1"
-postcss-color-mod-function@2.4.2:
- version "2.4.2"
- resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-2.4.2.tgz#bdf408f152bc3201517a4c38b7eb5cd2996114fb"
- integrity sha512-j9RM33ybsEJUvIc22Y5I4ucvSJVHMliiW0I34JDLV0gVdvCo7/Y+zW6QMBANj+M4VZJLmyGz2mafIK4Tb5GVyg==
+postcss-color-mod-function@3.0.3:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+ integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
dependencies:
"@csstools/convert-colors" "^1.4.0"
- postcss "^6.0.19"
- postcss-values-parser "^1.3.2"
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
-postcss-colormin@^4.0.2:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.2.tgz#93cd1fa11280008696887db1a528048b18e7ed99"
- integrity sha512-1QJc2coIehnVFsz0otges8kQLsryi4lo19WD+U5xCWvXd0uw/Z+KKYnbiNDCnO9GP+PvErPHCG0jNvWTngk9Rw==
+postcss-colormin@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+ integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
dependencies:
browserslist "^4.0.0"
color "^3.0.0"
@@ -10315,25 +10017,25 @@ postcss-convert-values@^4.0.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-custom-media@6.0.0:
- version "6.0.0"
- resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737"
- integrity sha1-vlMnhBEOyylQRPtTlaGABushpzc=
+postcss-custom-media@7.0.7:
+ version "7.0.7"
+ resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz#bbc698ed3089ded61aad0f5bfb1fb48bf6969e73"
+ integrity sha512-bWPCdZKdH60wKOTG4HKEgxWnZVjAIVNOJDvi3lkuTa90xo/K0YHa2ZnlKLC5e2qF8qCcMQXt0yzQITBp8d0OFA==
dependencies:
- postcss "^6.0.1"
+ postcss "^7.0.5"
-postcss-custom-properties@7.0.0:
- version "7.0.0"
- resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-7.0.0.tgz#24dc4fbe6d6ed550ea4fd3b11204660e9ffa3b33"
- integrity sha512-dl/CNaM6z2RBa0vZZqsV6Hunj4HD6Spu7FcAkiVp5B2tgm6xReKKYzI7x7QNx3wTMBNj5v+ylfVcQGMW4xdkHw==
+postcss-custom-properties@8.0.9:
+ version "8.0.9"
+ resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.9.tgz#8943870528a6eae4c8e8d285b6ccc9fd1f97e69c"
+ integrity sha512-/Lbn5GP2JkKhgUO2elMs4NnbUJcvHX4AaF5nuJDaNkd2chYW1KA5qtOGGgdkBEWcXtKSQfHXzT7C6grEVyb13w==
dependencies:
- balanced-match "^1.0.0"
- postcss "^6.0.18"
+ postcss "^7.0.5"
+ postcss-values-parser "^2.0.0"
-postcss-discard-comments@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.1.tgz#30697735b0c476852a7a11050eb84387a67ef55d"
- integrity sha512-Ay+rZu1Sz6g8IdzRjUgG2NafSNpp2MSMOQUb+9kkzzzP+kh07fP0yNbhtFejURnyVXSX3FYy2nVNW1QTnNjgBQ==
+postcss-discard-comments@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+ integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
dependencies:
postcss "^7.0.0"
@@ -10383,46 +10085,20 @@ postcss-import@^10.0.0:
read-cache "^1.0.0"
resolve "^1.1.7"
-postcss-load-config@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
- integrity sha1-U56a/J3chiASHr+djDZz4M5Q0oo=
- dependencies:
- cosmiconfig "^2.1.0"
- object-assign "^4.1.0"
- postcss-load-options "^1.2.0"
- postcss-load-plugins "^2.3.0"
-
-postcss-load-options@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
- integrity sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=
- dependencies:
- cosmiconfig "^2.1.0"
- object-assign "^4.1.0"
-
-postcss-load-plugins@^2.3.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
- integrity sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=
- dependencies:
- cosmiconfig "^2.1.1"
- object-assign "^4.1.0"
-
-postcss-merge-longhand@^4.0.10:
- version "4.0.10"
- resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.10.tgz#c4d63ab57bdc054ab4067ab075d488c8c2978380"
- integrity sha512-hME10s6CSjm9nlVIcO1ukR7Jr5RisTaaC1y83jWCivpuBtPohA3pZE7cGTIVSYjXvLnXozHTiVOkG4dnnl756g==
+postcss-merge-longhand@^4.0.11:
+ version "4.0.11"
+ resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+ integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
dependencies:
css-color-names "0.0.4"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
stylehacks "^4.0.0"
-postcss-merge-rules@^4.0.2:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.2.tgz#2be44401bf19856f27f32b8b12c0df5af1b88e74"
- integrity sha512-UiuXwCCJtQy9tAIxsnurfF0mrNHKc4NnNx6NxqmzNNjXpQwLSukUxELHTRF0Rg1pAmcoKLih8PwvZbiordchag==
+postcss-merge-rules@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+ integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
dependencies:
browserslist "^4.0.0"
caniuse-api "^3.0.0"
@@ -10439,20 +10115,20 @@ postcss-minify-font-values@^4.0.2:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-minify-gradients@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.1.tgz#6da95c6e92a809f956bb76bf0c04494953e1a7dd"
- integrity sha512-pySEW3E6Ly5mHm18rekbWiAjVi/Wj8KKt2vwSfVFAWdW6wOIekgqxKxLU7vJfb107o3FDNPkaYFCxGAJBFyogA==
+postcss-minify-gradients@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+ integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
dependencies:
cssnano-util-get-arguments "^4.0.0"
is-color-stop "^1.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-minify-params@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.1.tgz#5b2e2d0264dd645ef5d68f8fec0d4c38c1cf93d2"
- integrity sha512-h4W0FEMEzBLxpxIVelRtMheskOKKp52ND6rJv+nBS33G1twu2tCyurYj/YtgU76+UDCvWeNs0hs8HFAWE2OUFg==
+postcss-minify-params@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+ integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
dependencies:
alphanum-sort "^1.0.0"
browserslist "^4.0.0"
@@ -10461,10 +10137,10 @@ postcss-minify-params@^4.0.1:
postcss-value-parser "^3.0.0"
uniqs "^2.0.0"
-postcss-minify-selectors@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.1.tgz#a891c197977cc37abf60b3ea06b84248b1c1e9cd"
- integrity sha512-8+plQkomve3G+CodLCgbhAKrb5lekAnLYuL1d7Nz+/7RANpBEVdgBkPNwljfSKvZ9xkkZTZITd04KP+zeJTJqg==
+postcss-minify-selectors@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+ integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
dependencies:
alphanum-sort "^1.0.0"
has "^1.0.0"
@@ -10478,48 +10154,48 @@ postcss-normalize-charset@^4.0.1:
dependencies:
postcss "^7.0.0"
-postcss-normalize-display-values@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.1.tgz#d9a83d47c716e8a980f22f632c8b0458cfb48a4c"
- integrity sha512-R5mC4vaDdvsrku96yXP7zak+O3Mm9Y8IslUobk7IMP+u/g+lXvcN4jngmHY5zeJnrQvE13dfAg5ViU05ZFDwdg==
+postcss-normalize-display-values@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+ integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
dependencies:
cssnano-util-get-match "^4.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-normalize-positions@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.1.tgz#ee2d4b67818c961964c6be09d179894b94fd6ba1"
- integrity sha512-GNoOaLRBM0gvH+ZRb2vKCIujzz4aclli64MBwDuYGU2EY53LwiP7MxOZGE46UGtotrSnmarPPZ69l2S/uxdaWA==
+postcss-normalize-positions@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+ integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
dependencies:
cssnano-util-get-arguments "^4.0.0"
has "^1.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-normalize-repeat-style@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.1.tgz#5293f234b94d7669a9f805495d35b82a581c50e5"
- integrity sha512-fFHPGIjBUyUiswY2rd9rsFcC0t3oRta4wxE1h3lpwfQZwFeFjXFSiDtdJ7APCmHQOnUZnqYBADNRPKPwFAONgA==
+postcss-normalize-repeat-style@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+ integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
dependencies:
cssnano-util-get-arguments "^4.0.0"
cssnano-util-get-match "^4.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-normalize-string@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.1.tgz#23c5030c2cc24175f66c914fa5199e2e3c10fef3"
- integrity sha512-IJoexFTkAvAq5UZVxWXAGE0yLoNN/012v7TQh5nDo6imZJl2Fwgbhy3J2qnIoaDBrtUP0H7JrXlX1jjn2YcvCQ==
+postcss-normalize-string@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+ integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
dependencies:
has "^1.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-normalize-timing-functions@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.1.tgz#8be83e0b9cb3ff2d1abddee032a49108f05f95d7"
- integrity sha512-1nOtk7ze36+63ONWD8RCaRDYsnzorrj+Q6fxkQV+mlY5+471Qx9kspqv0O/qQNMeApg8KNrRf496zHwJ3tBZ7w==
+postcss-normalize-timing-functions@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+ integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
dependencies:
cssnano-util-get-match "^4.0.0"
postcss "^7.0.0"
@@ -10544,44 +10220,37 @@ postcss-normalize-url@^4.0.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-normalize-whitespace@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.1.tgz#d14cb639b61238418ac8bc8d3b7bdd65fc86575e"
- integrity sha512-U8MBODMB2L+nStzOk6VvWWjZgi5kQNShCyjRhMT3s+W9Jw93yIjOnrEkKYD3Ul7ChWbEcjDWmXq0qOL9MIAnAw==
+postcss-normalize-whitespace@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+ integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
dependencies:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-ordered-values@^4.1.1:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.1.tgz#2e3b432ef3e489b18333aeca1f1295eb89be9fc2"
- integrity sha512-PeJiLgJWPzkVF8JuKSBcylaU+hDJ/TX3zqAMIjlghgn1JBi6QwQaDZoDIlqWRcCAI8SxKrt3FCPSRmOgKRB97Q==
+postcss-ordered-values@^4.1.2:
+ version "4.1.2"
+ resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+ integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
dependencies:
cssnano-util-get-arguments "^4.0.0"
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
-postcss-prefix-selector@1.6.0:
- version "1.6.0"
- resolved "https://registry.yarnpkg.com/postcss-prefix-selector/-/postcss-prefix-selector-1.6.0.tgz#b495949d639c63147145648326853216f3c10900"
- integrity sha1-tJWUnWOcYxRxRWSDJoUyFvPBCQA=
- dependencies:
- postcss "^5.0.8"
-
-postcss-reduce-initial@^4.0.2:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.2.tgz#bac8e325d67510ee01fa460676dc8ea9e3b40f15"
- integrity sha512-epUiC39NonKUKG+P3eAOKKZtm5OtAtQJL7Ye0CBN1f+UQTHzqotudp+hki7zxXm7tT0ZAKDMBj1uihpPjP25ug==
+postcss-reduce-initial@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+ integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
dependencies:
browserslist "^4.0.0"
caniuse-api "^3.0.0"
has "^1.0.0"
postcss "^7.0.0"
-postcss-reduce-transforms@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561"
- integrity sha512-sZVr3QlGs0pjh6JAIe6DzWvBaqYw05V1t3d9Tp+VnFRT5j+rsqoWsysh/iSD7YNsULjq9IAylCznIwVd5oU/zA==
+postcss-reduce-transforms@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+ integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
dependencies:
cssnano-util-get-match "^4.0.0"
has "^1.0.0"
@@ -10606,10 +10275,10 @@ postcss-selector-parser@^5.0.0-rc.4:
indexes-of "^1.0.1"
uniq "^1.0.1"
-postcss-svgo@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.1.tgz#5628cdb38f015de6b588ce6d0bf0724b492b581d"
- integrity sha512-YD5uIk5NDRySy0hcI+ZJHwqemv2WiqqzDgtvgMzO8EGSkK5aONyX8HMVFRFJSdO8wUWTuisUFn/d7yRRbBr5Qw==
+postcss-svgo@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+ integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
dependencies:
is-svg "^3.0.0"
postcss "^7.0.0"
@@ -10630,44 +10299,16 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-postcss-values-parser@^1.3.2:
- version "1.5.0"
- resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047"
- integrity sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==
+postcss-values-parser@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+ integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
dependencies:
flatten "^1.0.2"
indexes-of "^1.0.1"
uniq "^1.0.1"
-postcss@6.0.16:
- version "6.0.16"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
- integrity sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==
- dependencies:
- chalk "^2.3.0"
- source-map "^0.6.1"
- supports-color "^5.1.0"
-
-postcss@6.0.22:
- version "6.0.22"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
- integrity sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA==
- dependencies:
- chalk "^2.4.1"
- source-map "^0.6.1"
- supports-color "^5.4.0"
-
-postcss@^5.0.8:
- version "5.2.18"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
- integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
- dependencies:
- chalk "^1.1.3"
- js-base64 "^2.1.9"
- source-map "^0.5.6"
- supports-color "^3.2.3"
-
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.18, postcss@^6.0.19, postcss@^6.0.20:
+postcss@^6.0.1, postcss@^6.0.11:
version "6.0.23"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -10676,14 +10317,14 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.18, postcss@^6.0.1
source-map "^0.6.1"
supports-color "^5.4.0"
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.5:
- version "7.0.8"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.8.tgz#2a3c5f2bdd00240cd0d0901fd998347c93d36696"
- integrity sha512-WudsIzuTKRw9IInRTPBgVXJ7DKR26HT09Rxp0g3w0Fqh3TUtYICcUmvC0xURj04o3vdcDtnjCAUCECg/p341iQ==
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5:
+ version "7.0.14"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+ integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
dependencies:
chalk "^2.4.2"
source-map "^0.6.1"
- supports-color "^6.0.0"
+ supports-color "^6.1.0"
prelude-ls@~1.1.2:
version "1.1.2"
@@ -10720,14 +10361,6 @@ pretty-ms@^3.1.0:
dependencies:
parse-ms "^1.0.0"
-prettyjson@^1.1.3:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/prettyjson/-/prettyjson-1.2.1.tgz#fcffab41d19cab4dfae5e575e64246619b12d289"
- integrity sha1-/P+rQdGcq0365eV15kJGYZsS0ok=
- dependencies:
- colors "^1.1.2"
- minimist "^1.2.0"
-
printf@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.1.tgz#e0466788260859ed153006dc6867f09ddf240cf3"
@@ -10772,11 +10405,6 @@ promise-map-series@^0.2.1, promise-map-series@^0.2.3:
dependencies:
rsvp "^3.0.14"
-proto-list@~1.2.1:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
- integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
-
proxy-addr@~2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
@@ -10790,7 +10418,7 @@ prr@~1.0.1:
resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-pseudomap@^1.0.1, pseudomap@^1.0.2:
+pseudomap@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
@@ -11004,16 +10632,6 @@ readable-stream@~1.0.2:
isarray "0.0.1"
string_decoder "~0.10.x"
-readdirp@2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
- integrity sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=
- dependencies:
- graceful-fs "^4.1.2"
- minimatch "^3.0.2"
- readable-stream "^2.0.2"
- set-immediate-shim "^1.0.1"
-
readdirp@^2.0.0:
version "2.2.1"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -11254,7 +10872,7 @@ request-promise-native@^1.0.5:
stealthy-require "^1.1.0"
tough-cookie ">=2.3.3"
-"request@>=2.76.0 <3.0.0", request@^2.72.0, request@^2.85.0, request@^2.87.0:
+request@^2.72.0, request@^2.85.0, request@^2.87.0:
version "2.88.0"
resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -11280,11 +10898,6 @@ request-promise-native@^1.0.5:
tunnel-agent "^0.6.0"
uuid "^3.3.2"
-require-from-string@^1.1.0:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
- integrity sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=
-
require-relative@^0.8.7:
version "0.8.7"
resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
@@ -11393,13 +11006,6 @@ rimraf@~2.2.6:
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=
-rimraf@~2.4.0:
- version "2.4.5"
- resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
- integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
- dependencies:
- glob "^6.0.1"
-
ripemd160@^2.0.0, ripemd160@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -11557,11 +11163,6 @@ safe-json-parse@~1.0.1:
resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-1.0.1.tgz#3e76723e38dfdda13c9b1d29a1e07ffee4b30b57"
integrity sha1-PnZyPjjf3aE8mx0poeB//uSzC1c=
-safe-json-stringify@~1:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
- integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
-
safe-regex@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -11629,12 +11230,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
-secure-keys@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca"
- integrity sha1-8MgtmKOxOah3aogIBQuCRDEIf8o=
-
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
@@ -11678,11 +11274,6 @@ set-blocking@~2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-set-immediate-shim@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
- integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
-
set-value@^0.4.3:
version "0.4.3"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
@@ -11738,7 +11329,7 @@ shellwords@^0.1.1:
resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
-sigmund@^1.0.1, sigmund@~1.0.0:
+sigmund@~1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
@@ -11952,7 +11543,7 @@ source-map@0.1.32:
dependencies:
amdefine ">=0.0.4"
-source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
+source-map@0.4.x, source-map@^0.4.2:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
@@ -11964,7 +11555,7 @@ source-map@0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -12258,9 +11849,9 @@ styled_string@0.0.1:
integrity sha1-0ieCvYEpVFm8Tx3xjEutjpTdEko=
stylehacks@^4.0.0:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.1.tgz#3186595d047ab0df813d213e51c8b94e0b9010f2"
- integrity sha512-TK5zEPeD9NyC1uPIdjikzsgWxdQQN/ry1X3d1iOz1UkYDCmcr928gWD1KHgyC27F50UnE0xCTrBOO1l6KR8M4w==
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
+ integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
dependencies:
browserslist "^4.0.0"
postcss "^7.0.0"
@@ -12283,24 +11874,24 @@ supports-color@^2.0.0:
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-supports-color@^3.1.0, supports-color@^3.2.3:
+supports-color@^3.1.0:
version "3.2.3"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
dependencies:
has-flag "^1.0.0"
-supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
dependencies:
has-flag "^3.0.0"
-supports-color@^6.0.0:
- version "6.0.0"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
- integrity sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==
+supports-color@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+ integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
dependencies:
has-flag "^3.0.0"
@@ -12484,11 +12075,6 @@ through@^2.3.6, through@^2.3.8, through@~2.3.8:
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-time-stamp@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
- integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
-
time-zone@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/time-zone/-/time-zone-1.0.0.tgz#99c5bf55958966af6d06d83bdf3800dc82faec5d"
@@ -12723,16 +12309,6 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.5.tgz#0c65f15f815aa08b560a61ce8b4db7ffc3f45376"
integrity sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==
-uglify-js@^2.6:
- version "2.8.29"
- resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
- integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
- dependencies:
- source-map "~0.5.1"
- yargs "~3.10.0"
- optionalDependencies:
- uglify-to-browserify "~1.0.0"
-
uglify-js@^3.1.4:
version "3.4.9"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
@@ -12741,11 +12317,6 @@ uglify-js@^3.1.4:
commander "~2.17.1"
source-map "~0.6.1"
-uglify-to-browserify@~1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
- integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
-
underscore.string@~3.3.4:
version "3.3.5"
resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"
@@ -12954,7 +12525,7 @@ uuid@^2.0.2:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
-uuid@^3.0.0, uuid@^3.3.2:
+uuid@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
@@ -13003,13 +12574,6 @@ verror@1.10.0:
core-util-is "1.0.2"
extsprintf "^1.2.0"
-vinyl-sourcemaps-apply@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
- integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
- dependencies:
- source-map "^0.5.1"
-
vlq@^0.2.2:
version "0.2.3"
resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
@@ -13072,6 +12636,15 @@ walk-sync@^0.3.0, walk-sync@^0.3.1, walk-sync@^0.3.2, walk-sync@^0.3.3:
ensure-posix-path "^1.0.0"
matcher-collection "^1.0.0"
+walk-sync@^1.0.0:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-1.1.3.tgz#3b7b6468f068b5eba2278c931c57db3d39092969"
+ integrity sha512-23ivbET0Q/389y3EHpiIgxx881AS2mwdXA7iBqUDNSymoTPYb2jWlF3gkuuAP1iLgdNXmiHw/kZ/wZwrELU6Ag==
+ dependencies:
+ "@types/minimatch" "^3.0.3"
+ ensure-posix-path "^1.1.0"
+ matcher-collection "^1.1.1"
+
walker@~1.0.5:
version "1.0.7"
resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -13224,12 +12797,7 @@ wide-align@^1.1.0:
dependencies:
string-width "^1.0.2 || 2"
-window-size@0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
- integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
-
-window-size@^0.1.2, window-size@^0.1.4:
+window-size@^0.1.2:
version "0.1.4"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
integrity sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=
@@ -13263,14 +12831,6 @@ workerpool@^2.3.0, workerpool@^2.3.1:
dependencies:
object-assign "4.1.1"
-wrap-ansi@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
- integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
- dependencies:
- string-width "^1.0.1"
- strip-ansi "^3.0.1"
-
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -13366,29 +12926,6 @@ yargs-parser@^8.0.0:
dependencies:
camelcase "^4.1.0"
-yargs@^3.19.0:
- version "3.32.0"
- resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
- integrity sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=
- dependencies:
- camelcase "^2.0.1"
- cliui "^3.0.3"
- decamelize "^1.1.1"
- os-locale "^1.4.0"
- string-width "^1.0.1"
- window-size "^0.1.4"
- y18n "^3.2.0"
-
-yargs@~3.10.0:
- version "3.10.0"
- resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
- integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
- dependencies:
- camelcase "^1.0.2"
- cliui "^2.1.0"
- decamelize "^1.0.0"
- window-size "0.1.0"
-
yargs@~3.27.0:
version "3.27.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.27.0.tgz#21205469316e939131d59f2da0c6d7f98221ea40"