Switch to packaged version of Spirit

no issue - remove the manually copied Spirit CSS files - remove the manually copied Spirit helpers - install `ember-cli-ghost-spirit` addon - remove manual postcss configuration - update all `color()` functions in CSS to `color-mod()` - fixed invalid `color-mod()` usage in `power-calendar.css` - bump sub-dependencies
TryGhost · Apr 3, 2018 · 04b5396 · 04b5396
1 parent abdc3b9
commit 04b5396
Show file tree

Hide file tree

Showing 104 changed files with 996 additions and 10,129 deletions.
diff --git a/app/styles/app-dark.css b/app/styles/app-dark.css
@@ -1,3 +1,11 @@
+/* Spirit - Ghost's CSS framework
+/* ---------------------------------------------------------- */
+/*
+    includes normalize v7 so must come first to avoid clobbering
+    our old non-Spirit classes
+*/
+@import "spirit/spirit-product.css";
+
 /* Patterns: Groups of Styles
 /* ---------------------------------------------------------- */
 @import "patterns/global.css";
@@ -61,21 +69,21 @@ body {
 }
 
 pre {
-    border: color(var(--lightgrey) l(+5%));
+    border: color-mod(var(--lightgrey) l(+5%));
     background: var(--lightgrey);
 }
 
 hr {
-    border-color: color(var(--lightgrey) l(+5%));
+    border-color: color-mod(var(--lightgrey) l(+5%));
 }
 
 input,
 .gh-input,
 .gh-select,
 .gh-select select {
     color: var(--darkgrey);
-    border-color: color(var(--lightgrey));
-    background: color(var(--lightgrey));
+    border-color: color-mod(var(--lightgrey));
+    background: color-mod(var(--lightgrey));
 }
 
 .gh-nav,
@@ -94,13 +102,13 @@ input,
 }
 
 .gh-nav-search .ember-power-select-trigger {
-    border-color: color(var(--lightgrey));
-    background: color(var(--lightgrey));
+    border-color: color-mod(var(--lightgrey));
+    background: color-mod(var(--lightgrey));
 }
 
 .ember-power-select-multiple-trigger {
-    border-color: color(var(--lightgrey));
-    background: color(var(--lightgrey));
+    border-color: color-mod(var(--lightgrey));
+    background: color-mod(var(--lightgrey));
 }
 
 .ember-power-select-dropdown {
@@ -110,14 +118,14 @@ input,
 .ember-power-select-dropdown,
 .ember-power-select-options:not([role="group"]),
 .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
-    border-color: color(var(--lightgrey));
-    background: color(var(--lightgrey));
+    border-color: color-mod(var(--lightgrey));
+    background: color-mod(var(--lightgrey));
 }
 
 .ember-basic-dropdown--opened > .ember-power-select-trigger,
 .ember-power-select-trigger[aria-expanded="true"],
 .ember-power-select-search input {
-    border-color: color(var(--lightgrey));
+    border-color: color-mod(var(--lightgrey));
 }
 
 .ember-power-calendar-weekdays,
@@ -140,8 +148,8 @@ input,
 }
 
 .gh-btn {
-    border: color(var(--darkgrey) l(-27%) blackness(+15%)) 1px solid ;
-    color: color(var(--darkgrey) l(-27%) blackness(+15%));
+    border: color-mod(var(--darkgrey) l(-27%) blackness(+15%)) 1px solid ;
+    color: color-mod(var(--darkgrey) l(-27%) blackness(+15%));
     text-shadow: none;
 }
 .gh-btn-blue,
@@ -170,7 +178,7 @@ input,
 
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
-    color: color(var(--lightgrey) lightness(+20%));
+    color: color-mod(var(--lightgrey) lightness(+20%));
 }
 
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > button:hover, .dropdown-menu > li > button:focus {
@@ -222,7 +230,7 @@ input,
 }
 
 .gh-main > section.gh-editor-fullscreen {
-    background: color(#212A2E l(+2%));
+    background: color-mod(#212A2E l(+2%));
 }
 
 .dropdown-menu {
@@ -250,7 +258,7 @@ input,
 }
 
 .seo-preview-title {
-    color: color(#1e0fbe l(+25%));
+    color: color-mod(#1e0fbe l(+25%));
 }
 
 .seo-preview-description {
@@ -300,7 +308,7 @@ input,
 }
 
 .gh-unsplash-search:focus {
-    background-color: color(var(--lightgrey));
+    background-color: color-mod(var(--lightgrey));
 }
 
 .gh-unsplash-zoom {
@@ -326,5 +334,5 @@ input,
 }
 
 .CodeMirror .CodeMirror-code .cm-string {
-    color: color(#183691 l(+25%));
+    color: color-mod(#183691 l(+25%));
 }
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1,3 +1,11 @@
+/* Spirit - Ghost's CSS framework
+/* ---------------------------------------------------------- */
+/*
+    includes normalize v7 so must come first to avoid clobbering
+    our old non-Spirit classes
+*/
+@import "spirit/spirit-product.css";
+
 /* Patterns: Groups of Styles
 /* ---------------------------------------------------------- */
 @import "patterns/global.css";

diff --git a/app/styles/components/badges.css b/app/styles/components/badges.css
@@ -4,7 +4,7 @@
 .gh-badge {
     display: inline-block;
     padding: 2px 4px 3px;
-    border: color(var(--green) blackness(+8%)) 1px solid;
+    border: color-mod(var(--green) blackness(+8%)) 1px solid;
     color: #fff;
     font-size: 0.8em;
     line-height: 1em;
@@ -15,39 +15,39 @@
     white-space: nowrap;
     user-select: none;
     background: linear-gradient(
-    color(var(--green) whiteness(+4%)),
-    color(var(--green) blackness(+4%))
+    color-mod(var(--green) whiteness(+4%)),
+    color-mod(var(--green) blackness(+4%))
     );
     border-radius: 3px;
 }
 
 .gh-badge-blue {
-    border: color(var(--blue) blackness(+8%)) 1px solid;
+    border: color-mod(var(--blue) blackness(+8%)) 1px solid;
     background: linear-gradient(
-    color(var(--blue) whiteness(+10%)),
-    color(var(--blue) blackness(+4%))
+    color-mod(var(--blue) whiteness(+10%)),
+    color-mod(var(--blue) blackness(+4%))
     );
 }
 
 .gh-badge-red {
-    border: color(var(--red) blackness(+8%)) 1px solid;
+    border: color-mod(var(--red) blackness(+8%)) 1px solid;
     background: linear-gradient(
-    color(var(--red) whiteness(+10%)),
-    color(var(--red) blackness(+4%))
+    color-mod(var(--red) whiteness(+10%)),
+    color-mod(var(--red) blackness(+4%))
     );
 }
 
 .gh-badge-black {
-    border: color(var(--darkgrey) blackness(+8%)) 1px solid;
+    border: color-mod(var(--darkgrey) blackness(+8%)) 1px solid;
     background: linear-gradient(
-    color(var(--darkgrey) whiteness(+10%)),
-    color(var(--darkgrey) blackness(+4%))
+    color-mod(var(--darkgrey) whiteness(+10%)),
+    color-mod(var(--darkgrey) blackness(+4%))
     );
 }
 
 .gh-badge-outline {
-    border-color: color(var(--midgrey) l(+35%));
-    color: color(var(--midgrey) l(+25%));
+    border-color: color-mod(var(--midgrey) l(+35%));
+    color: color-mod(var(--midgrey) l(+25%));
     font-weight: 400;
     background: transparent;
     box-shadow: none;

diff --git a/app/styles/components/dropdowns.css b/app/styles/components/dropdowns.css
@@ -42,7 +42,7 @@
     overflow: hidden;
     margin: 8px 0;
     height: 1px;
-    background: color(#dfe1e3 lightness(+5%));
+    background: color-mod(#dfe1e3 lightness(+5%));
 }
 
 .dropdown-menu li {
@@ -57,7 +57,7 @@
     padding: 6px 10px;
     width: 100%;
     border-radius: 3px;
-    color: color(var(--darkgrey) lightness(+20%));
+    color: color-mod(var(--darkgrey) lightness(+20%));
     text-align: left;
     white-space: nowrap;
     font-size: 1.3rem;
@@ -71,11 +71,11 @@
     height: 14px;
     width: 14px;
     line-height: 1em;
-    fill: color(var(--darkgrey) lightness(+20%));
+    fill: color-mod(var(--darkgrey) lightness(+20%));
 }
 
 .dropdown-menu svg path {
-    stroke: color(var(--darkgrey) lightness(+20%));
+    stroke: color-mod(var(--darkgrey) lightness(+20%));
 }
 
 @media (max-width: 500px) {
@@ -98,7 +98,7 @@
 .dropdown-menu > li > a:focus,
 .dropdown-menu > li > button:hover,
 .dropdown-menu > li > button:focus {
-    background: color(var(--blue) alpha(-85%));
+    background: color-mod(var(--blue) alpha(-85%));
     color: var(--darkgrey);
     text-decoration: none;
 }

diff --git a/app/styles/components/koenig.css b/app/styles/components/koenig.css
@@ -51,13 +51,13 @@
     text-align: center;
     user-select: none;
     cursor: pointer;
-    color: color(var(--lightgrey) l(-10%));
+    color: color-mod(var(--lightgrey) l(-10%));
     background: linear-gradient(
-        color(var(--darkgrey) l(-3%)),
-        color(var(--darkgrey) l(-8%))
+        color-mod(var(--darkgrey) l(-3%)),
+        color-mod(var(--darkgrey) l(-8%))
     );
     border-radius: 5px;
-    box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
+    box-shadow: 0 0 0 1px color-mod(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
     z-index:110; /* places it above the title */
     pointer-events: none !important; /* no interactivity when hidden */
     opacity: 0;
@@ -81,7 +81,7 @@
     height: 0;
     border-left: transparent 10px solid;
     border-right: transparent 10px solid;
-    border-top: color(var(--darkgrey) l(-10%)) 8px solid;
+    border-top: color-mod(var(--darkgrey) l(-10%)) 8px solid;
     transition-property: left;
     transition-duration: 100ms;
 }
@@ -136,10 +136,10 @@
 
 .koenig-toolbar-btn svg g {
     stroke-width: 2px;
-    stroke: color(var(--lightgrey) l(-10%));
+    stroke: color-mod(var(--lightgrey) l(-10%));
 }
 .koenig-toolbar-btn-list svg path {
-    fill: color(var(--lightgrey) l(-10%));
+    fill: color-mod(var(--lightgrey) l(-10%));
 }
 
 .koenig-toolbar-btn:hover,
@@ -203,7 +203,7 @@
     height: 40px;
     width: 1px;
     margin: 0 9px 0 8px;
-    background: color(var(--darkgrey) l(-10%));
+    background: color-mod(var(--darkgrey) l(-10%));
     box-shadow: rgba(255,255,255,0.04) 1px 0 0 0;
 }
 
@@ -361,7 +361,7 @@
 
 .koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
     cursor: pointer;
-    background: color(var(--lightgrey) l(+3%) s(-10%));
+    background: color-mod(var(--lightgrey) l(+3%) s(-10%));
 }
 .koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
     color: var(--darkgrey);
@@ -375,7 +375,7 @@
     margin: 12px -15px;
     font-size: 1.2rem;
     text-align: center;
-    background: color(var(--lightgrey) l(+3%) s(-10%));
+    background: color-mod(var(--lightgrey) l(+3%) s(-10%));
 }
 
 
@@ -387,7 +387,7 @@
     position: relative;
     display: flex;
     width: calc(100% + 60px);
-    border: 2px solid  color(var(--blue) alpha(-85%));
+    border: 2px solid  color-mod(var(--blue) alpha(-85%));
     flex-direction: row;
     border-radius: 4px;
     padding: 10px;
@@ -398,7 +398,7 @@
 }
 
 .koenig-card:hover {
-    border-color: color(var(--blue) alpha(-25%));
+    border-color: color-mod(var(--blue) alpha(-25%));
 }
 
 .koenig-card--selected {

diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css
@@ -143,7 +143,7 @@
 
 .modal-body .gh-image-uploader {
     margin: 0;
-    background: color(var(--lightgrey) l(+4%));
+    background: color-mod(var(--lightgrey) l(+4%));
 }