Added design components page

ghost/admin/app/controllers/designsystem.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import {inject as service} from '@ember/service';
+
+export default class DashboardController extends Controller {
+    @service feature;
+    @service session;
+}

ghost/admin/app/router.js

@@ -77,6 +77,8 @@ Router.map(function () {
     this.route('member', {path: '/members/:member_id'});
 
     this.route('error404', {path: '/*path'});
+
+    this.route('designsystem');
 });
 
 export default Router;

ghost/admin/app/routes/designsystem.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import {inject as service} from '@ember/service';
+
+export default Route.extend({
+    config: service(),
+
+    beforeModel() {
+        this._super(...arguments);
+        if (!this.get('config.enableDeveloperExperiments')) {
+            return this.transitionTo('home');
+        }
+    }
+});

ghost/admin/app/styles/components/lists.css

@@ -1,3 +1,14 @@
+ul.nostyle {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+ul.nostyle li {
+    margin: 0;
+    padding: 0;
+}
+
 .gh-list {
     margin: 0;
     padding: 0;
@@ -45,7 +56,7 @@
     display: table-cell;
     vertical-align: middle;
     border-bottom: var(--main-color-area-divider) 1px solid;
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     font-weight: 500;
     letter-spacing: 0.1px;
     color: var(--black);

ghost/admin/app/styles/layouts/main.css

@@ -3,7 +3,7 @@
     --mainmenu-color-hover-bg: var(--whitegrey);
     --mainmenu-color-active: var(--black);
     --mainmenu-color-active-bg: var(--whitegrey);
-    --mainmenu-width: 340px;
+    --mainmenu-width: 310px;
     --mainmenu-padding: var(--main-layout-area-padding);
 }
 
@@ -1193,3 +1193,17 @@
         padding: 0 4vw 4vw;
     }
 }
+
+section.gh-ds ul {
+    margin-bottom: 5vw;
+}
+
+section.gh-ds ul li {
+    margin-bottom: 12px;
+}
+
+section.gh-ds h2 {
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--whitegrey);
+}

ghost/admin/app/styles/layouts/members.css

@@ -172,10 +172,6 @@ p.gh-members-list-email {
     margin-right: 32px;
 }
 
-.gh-members-chart {
-    padding-bottom: var(--main-layout-area-padding);
-}
-
 .gh-members-chart-box {
     margin-right: var(--main-layout-area-padding);
 }
@@ -218,7 +214,7 @@ p.gh-members-list-email {
 .gh-members-chart-summary-heading {
     font-size: 1.2rem;
     text-transform: uppercase;
-    font-weight: 400;
+    font-weight: 500;
     letter-spacing: 0.2px;
     margin: 0;
     padding: 0;

ghost/admin/app/styles/patterns/buttons.css

@@ -3,15 +3,16 @@
 
 /* Base button style */
 /* Should only be applied to <a> tags */
-.gh-btn {
+.gh-btn,
+.gh-btn-grey {
     display: inline-block;
     outline: none;
-    background: var(--white);
+    background: var(--whitegrey);
-    box-shadow: 0 2px 5px -3px rgba(0,0,0,.12);
     color: var(--darkgrey);
     text-decoration: none !important;
     user-select: none;
     fill: var(--white);
+    font-weight: 400;
     border-radius: 3px;
     transition: all 0.2s ease;
     transition-property: color, border-color, background, width, height, box-shadow;
@@ -20,14 +21,14 @@
 }
 
 /* ALL buttons must have a span for content */
-.gh-btn span {
+.gh-btn span,
+.gh-btn-grey span {
     display: block;
     overflow: hidden;
     padding: 0 11px;
     height: 33px;
     font-size: 1.35rem;
     line-height: 33px;
-    font-weight: 500;
     text-align: center;
     letter-spacing: 0.2px;
     border-radius: 3px;
@@ -44,17 +45,16 @@
     letter-spacing: .4px;
 }
 
-.gh-btn:hover {
+.gh-btn:hover,
+.gh-btn-grey:hover {
     color: var(--darkgrey);
-    box-shadow: 0 3px 4px -3px rgba(0,0,0,.13);
+    background: var(--whitegrey-d1);
-    border-color: color-mod(var(--midgrey) l(+25%) s(+10%));
 }
 
 /* When disabled */
 .gh-btn.disabled,
 .gh-btn[disabled],
 fieldset[disabled] .gh-btn {
-    box-shadow: none;
     opacity: 0.8;
     cursor: not-allowed;
     pointer-events: none;
@@ -69,19 +69,123 @@ fieldset[disabled] .gh-btn {
 /* ---------------------------------------------------------- */
 .gh-btn-primary,
 .gh-btn-black {
-    background: var(--black);
-    border: none;
     color: var(--white);
-    font-weight: 600;
+    background: var(--black);
-    box-shadow: none;
+    font-weight: 500;
 }
 
 .gh-btn-primary:hover,
 .gh-btn-black:hover {
+    color: var(--white);
     background: color-mod(var(--black) l(-20%)) !important;
 }
 
 
+/* Blue button
+/* ---------------------------------------------------------- */
+
+/* The background of the button creates 1px gradient border */
+.gh-btn-blue {
+    color: #fff;
+    fill: #fff;
+    background: var(--blue);
+    font-weight: 500;
+}
+
+.gh-btn-blue:hover {
+    color: #fff;
+    background: color-mod(var(--blue) l(-4%));
+}
+
+/* When clicked or focused with keyboard */
+.gh-btn-blue:active,
+.gh-btn-blue:focus {
+    background: color-mod(var(--blue) l(-7%));
+}
+
+/* Green button
+/* ---------------------------------------------------------- */
+
+/* The background of the button creates 1px gradient border */
+.gh-btn-green {
+    color: #fff;
+    fill: #fff;
+    background: var(--green);
+    font-weight: 500;
+}
+
+.gh-btn-green:hover {
+    color: #fff;
+    background: color-mod(var(--green) l(-4%));
+}
+
+/* When clicked or focused with keyboard */
+.gh-btn-green:active,
+.gh-btn-green:focus {
+    background: color-mod(var(--green) l(-7%));
+}
+
+
+/* Red button
+/* ---------------------------------------------------------- */
+
+/* The background of the button creates 1px gradient border */
+.gh-btn-red {
+    color: #fff;
+    fill: #fff;
+    box-shadow: none;
+    background: var(--red);
+    font-weight: 500;
+}
+
+.gh-btn-red:hover {
+    color: #fff;
+    background: color-mod(var(--red) l(-4%));
+}
+
+/* When clicked or focused with keyboard */
+.gh-btn-red:active,
+.gh-btn-red:focus {
+    background: color-mod(var(--red) l(-7%));
+}
+
+/* Outline button
+/* ---------------------------------------------------------- */
+
+/* The background of the button creates 1px gradient border */
+.gh-btn-outline {
+    color: var(--darkgrey);
+    fill: var(--darkgrey);
+    border: 1px solid var(--lightgrey-l1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    background: none;
+}
+
+.gh-btn-outline:hover {
+    color: var(--black);
+    background: none;
+    border-color: color-mod(var(--lightgrey-l1) l(-8%));
+}
+
+/* When clicked or focused with keyboard */
+.gh-btn-outline:active,
+.gh-btn-outline:focus {
+    border-color: color-mod(var(--lightgrey-l1) l(-15%));
+}
+
+.gh-btn-outline.blue {
+    border-color: var(--blue);
+    color: var(--blue);
+    box-shadow: none;
+}
+
+.gh-btn-outline.blue:hover {
+    border-color: color-mod(var(--blue) l(-10%));
+    color: color-mod(var(--blue) l(-10%));
+    box-shadow: none;
+}
+
+
 /* Button highlights
 /* ---------------------------------------------------------- */
 
@@ -101,147 +205,6 @@ fieldset[disabled] .gh-btn {
 }
 
 
-/* Grey button - First so that other colors will override
-/* ---------------------------------------------------------- */
-
-/* The background of the button creates 1px gradient border */
-.gh-btn-grey {
-    padding: 1px;
-    border: 0;
-    fill: var(--darkgrey);
-    transition: none !important;
-}
-
-/* The background of the span is the main visual element */
-.gh-btn-grey span {
-    background: color-mod(var(--lightgrey) l(-5%));
-}
-
-/* When clicked or focused with keyboard */
-.gh-btn-grey:active,
-.gh-btn-grey:focus {
-    background: color-mod(var(--midgrey) l(+25%));
-}
-.gh-btn-grey:active span,
-.gh-btn-grey:focus span {
-    background: color-mod(var(--lightgrey) l(+15%));
-    box-shadow: none;
-}
-
-
-/* Blue button
-/* ---------------------------------------------------------- */
-
-/* The background of the button creates 1px gradient border */
-.gh-btn-blue,
-.gh-btn-blue:hover {
-    color: #fff;
-    fill: #fff;
-    box-shadow: none;
-    transition-property: box-shadow;
-}
-
-.gh-btn-blue:hover {
-    box-shadow: none;
-}
-
-/* The background of the span is the main visual element */
-.gh-btn-blue span {
-    background: var(--blue);
-    font-weight: 500;
-}
-
-.gh-btn-blue:hover span {
-    background: color-mod(var(--blue) l(+5%));
-}
-
-/* When clicked or focused with keyboard */
-.gh-btn-blue:active,
-.gh-btn-blue:focus {
-    background: var(--blue);
-}
-.gh-btn-blue:active span,
-.gh-btn-blue:focus span {
-    background: var(--blue);
-    box-shadow: none;
-}
-
-/* Green button
-/* ---------------------------------------------------------- */
-
-/* The background of the button creates 1px gradient border */
-.gh-btn-green,
-.gh-btn-green:hover {
-    color: #fff;
-    fill: #fff;
-    box-shadow: none;
-    transition-property: box-shadow;
-}
-
-.gh-btn-green:hover {
-    box-shadow: none;
-}
-
-/* The background of the span is the main visual element */
-.gh-btn-green span {
-    background: var(--green);
-    font-weight: 500;
-}
-
-.gh-btn-green:hover span {
-    background: color-mod(var(--green) l(+5%));
-}
-
-/* When clicked or focused with keyboard */
-.gh-btn-green:active,
-.gh-btn-green:focus {
-    background: var(--green);
-}
-.gh-btn-green:active span,
-.gh-btn-green:focus span {
-    background: var(--green);
-    box-shadow: none;
-}
-
-
-/* Red button
-/* ---------------------------------------------------------- */
-
-/* The background of the button creates 1px gradient border */
-.gh-btn-red,
-.gh-btn-red:hover {
-    color: #fff;
-    fill: #fff;
-    box-shadow: none;
-    transition-property: box-shadow;
-}
-
-.gh-btn-red:hover {
-    box-shadow: none;
-}
-
-/* The background of the span is the main visual element */
-.gh-btn-red span {
-    background: var(--red);
-    font-weight: 500;
-}
-
-.gh-btn-red:hover span {
-    background: color-mod(var(--red) l(+5%));
-}
-
-/* When clicked or focused with keyboard */
-.gh-btn-red:active,
-.gh-btn-red:focus {
-    background: var(--red);
-}
-.gh-btn-red:active span,
-.gh-btn-red:focus span {
-    background: var(--red);
-    box-shadow: none;
-}
-
-
 /* Special Buttons
 /* ---------------------------------------------------------- */
 
@@ -366,22 +329,6 @@ svg.gh-btn-icon-right {
     color: color-mod(var(--yellow) l(-10%));
 }
 
-.gh-btn-outline,
-.gh-btn-outline:hover {
-    background: none;
-    box-shadow: none;
-}
-
-.gh-btn-outline.blue {
-    border-color: var(--blue);
-    color: var(--blue);
-}
-
-.gh-btn-outline.blue:hover {
-    border-color: color-mod(var(--blue) l(-10%));
-    color: color-mod(var(--blue) l(-10%));
-}
-
 .gh-btn-textfield-group span {
     height: 36px;
     line-height: 36px;

ghost/admin/app/templates/designsystem.hbs

@@ -0,0 +1,64 @@
+<section class="gh-canvas">
+    <GhCanvasHeader class="gh-canvas-header">
+        <h2 class="gh-canvas-title" data-test-screen-title>
+            Components
+        </h2>
+    </GhCanvasHeader>
+
+    <section class="view-container gh-main-width gh-ds">
+        <h2 class="">Buttons</h2>
+        <ul class="nostyle">
+            <li><button class="gh-btn gh-btn-primary"><span>Primary button</span></button></li>
+            <li><button class="gh-btn"><span>Regular button</span></button></li>
+            <li><button class="gh-btn gh-btn-blue"><span>Blue button</span></button></li>
+            <li><button class="gh-btn gh-btn-green"><span>Green button</span></button></li>
+            <li><button class="gh-btn gh-btn-red"><span>Red button</span></button></li>
+            <li><button class="gh-btn gh-btn-outline"><span>Outline button</span></button></li>
+            <li><button class="gh-btn gh-btn-primary gh-btn-large"><span>Large button</span></button></li>
+        </ul>
+
+        <h2 class="">Lists</h2>
+        
+        <div class="gh-list">
+            <div class="gh-list-row header">
+                <div class="gh-list-header">Column 1</div>
+                <div class="gh-list-header">Column 2</div>
+                <div class="gh-list-header">Column 3</div>
+            </div>
+            <div class="gh-list-row">
+                <div class="gh-list-data">
+                    <h3>Data</h3>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+            </div>
+            <div class="gh-list-row">
+                <div class="gh-list-data">
+                    <h3>Data</h3>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+            </div>
+            <div class="gh-list-row">
+                <div class="gh-list-data">
+                    <h3>Data</h3>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+                <div class="gh-list-data">
+                    <span>Data</span>
+                </div>
+            </div>
+        </div>
+
+    </section>
+</section>