From 0de8f0fc82993c81f0b68700226aa0af090f8613 Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 14:47:18 +0100 Subject: [PATCH 1/7] Color palette cleanup --- addon/styles/background-shapes.css | 2 +- addon/styles/colors.css | 4 +-- addon/styles/components/es-button.css | 2 +- addon/styles/components/es-header.css | 2 +- addon/styles/global.css | 24 ++++++++++++--- docs/concepts/colours.md | 20 +++++++----- docs/concepts/layout.md | 44 ++++++++++++++++++--------- docs/css/helpers.md | 9 ++++-- docs/css/icons.md | 26 ++++++++-------- 9 files changed, 85 insertions(+), 48 deletions(-) diff --git a/addon/styles/background-shapes.css b/addon/styles/background-shapes.css index 2396dbfb..49cead24 100644 --- a/addon/styles/background-shapes.css +++ b/addon/styles/background-shapes.css @@ -21,7 +21,7 @@ } .bg-shape-swipe-top { - background: var(--color-orange) url('/images/swipe-top.svg') no-repeat bottom left; + background: var(--color-brand) url('/images/swipe-top.svg') no-repeat bottom left; background-size: contain; } diff --git a/addon/styles/colors.css b/addon/styles/colors.css index 12e6fb81..f9ada867 100644 --- a/addon/styles/colors.css +++ b/addon/styles/colors.css @@ -1,5 +1,5 @@ -.bg-orange { - background-color: var(--color-orange); +.bg-brand { + background-color: var(--color-brand); } .bg-muted { diff --git a/addon/styles/components/es-button.css b/addon/styles/components/es-button.css index 4c151b35..ec970b97 100644 --- a/addon/styles/components/es-button.css +++ b/addon/styles/components/es-button.css @@ -1,5 +1,5 @@ .es-button { - background-color: var(--color-orange); + background-color: var(--color-brand); color: var(--color-light); padding-left: 1.5em; padding-right: 1.5em; diff --git a/addon/styles/components/es-header.css b/addon/styles/components/es-header.css index 3c312b02..728bb843 100644 --- a/addon/styles/components/es-header.css +++ b/addon/styles/components/es-header.css @@ -139,7 +139,7 @@ } .navbar-dropdown-list-item-link { - color: var(--color-orange); + color: var(--color-brand); display: block; padding: 1rem 2rem; text-decoration: none; diff --git a/addon/styles/global.css b/addon/styles/global.css index f5887e7c..9292626f 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -2,10 +2,24 @@ --font-family-sans: 'Inter var', 'Inter web', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --color-dark: #1c1e23; - --color-light: #ffffff; - --color-muted: #f4f6f8; - --color-orange: #e04e39; + --white: #fff; + --gray-100: #f4f6f8; + --gray-200: #ebeef2; + --gray-300: #dce0e6; + --gray-400: #bec4cc; + --gray-500: #8f949f; + --gray-600: #6a707a; + --gray-700: #42474f; + --gray-800: #2b2d34; + --gray-900: #1c1e24; + --black: #000; + + --color-brand: #e04e39; + + --color-dark: var(--gray-900); + --color-light: var(--white); + --color-muted: var(--gray-100); + --color-brand: #e04e39; --color-gray: #a2a3a8; --color-success: #d9f9e3; --color-danger: #ffd8e1; @@ -73,7 +87,7 @@ body { } a { - color: var(--color-orange); + color: var(--color-brand); text-decoration: none; } diff --git a/docs/concepts/colours.md b/docs/concepts/colours.md index b4aed612..3f3a5ddd 100644 --- a/docs/concepts/colours.md +++ b/docs/concepts/colours.md @@ -1,35 +1,41 @@ # Colours ### Usage + #### Legibility + Website elements like text and icons should meet accesibility standards when used against colored backgrounds. The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text. ## Primary Colours + The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.
- + - + + + -
## Secondary Colors + The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
- + + + - + - + -
### Examples diff --git a/docs/concepts/layout.md b/docs/concepts/layout.md index e57e70b2..af56847b 100644 --- a/docs/concepts/layout.md +++ b/docs/concepts/layout.md @@ -18,16 +18,22 @@ This container should be used on most pages to keep content aligned with headers ## Grid ### Grid Usage + A grid can be formed with fixed boxes by arranging tiles in an inline block, icons in toolbars, etc. Column count grows with browser width. Tiles wrap to the next line, or are sometimes truncated with an overflow scroll. The column width is defined by the column classes, if no width is defined the columns will resize to fit the row. #### Center Aligned fixed width column + Example of a centered half column. A column class is used to limit its width. ```html

Build with the teams that never stop shipping.

-

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+

+ Some of the best development teams in the world have been iterating on their products for years with Ember. With + scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use + every step of the way. +

``` @@ -38,12 +44,14 @@ Example of a centered half column. A column class is used to limit its width.

A Simple Component

-

Ember Components are a superset of HTML – that means is a full-fledged Ember Component! To pass data into Components, use the @ symbol along with an argument name.

+

+ Ember Components are a superset of HTML – that means is a full-fledged Ember Component! To pass data into + Components, use the @ symbol along with an argument name. +

``` - ### Equally Distributed Columns ```html @@ -74,13 +82,19 @@ Example of a centered half column. A column class is used to limit its width.

Guides

-

If you're familiar with JavaScript and web application development, our Guides will teach you everything you need to know to get started building with Ember.

+

+ If you're familiar with JavaScript and web application development, our Guides will teach you everything you + need to know to get started building with Ember. +

Read Our Blog

-

Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.

+

+ Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember + Blog. +

@@ -91,53 +105,54 @@ Example of a centered half column. A column class is used to limit its width. ```html
- +
- - + +
- +
``` ## Spacing Scale + The spacing scale is used to manage spacing a white-space within layouts and components. The spacing scale can be applied to both margin and padding properties.
-
+

Extra Small Offset

-
+

Small Offset

-
+

Medium Offset

-
+

Large Offset

-
+

Extra Large Offset

@@ -145,7 +160,6 @@ The spacing scale can be applied to both margin and padding properties.
- ## Applying Spacing with Helpers In order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings. diff --git a/docs/css/helpers.md b/docs/css/helpers.md index 905bc732..71a1d4d0 100644 --- a/docs/css/helpers.md +++ b/docs/css/helpers.md @@ -3,6 +3,7 @@ ## Theming Helpers ### Dark Background + If you would like a section or a div to use the dark style then you need to add `class="bg-dark"` to the element that you would like to be dark. This helper class sets the background to the dark colour and automatically sets the text colour to be white ```html @@ -12,12 +13,13 @@ If you would like a section or a div to use the dark style then you need to add ``` ## Border Helpers + If you want to adjust border properties. ### Rounded Corners ```html -
Hello!
+
Hello!
``` ```html @@ -37,6 +39,7 @@ If you want to remove default list styling you can use the `list-unstyled` css h ``` ## Spacing Helpers + In order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings. ### Margin Helpers @@ -60,7 +63,7 @@ In order to apply the spacing scale on pages, a set of predefined helper classes .margin{{direction}}{{size}}
-
Content
+
Content
@@ -89,7 +92,7 @@ In order to apply the spacing scale on pages, a set of predefined helper classes {{direction}} .padding{{direction}}{{size}} -
+
Content
diff --git a/docs/css/icons.md b/docs/css/icons.md index 49013ca7..3654675b 100644 --- a/docs/css/icons.md +++ b/docs/css/icons.md @@ -14,10 +14,10 @@ Icons are used inside an icon-wrapper that defines it's size and styling options ```html
- +
-
- +
+
``` @@ -25,32 +25,33 @@ Icons are used inside an icon-wrapper that defines it's size and styling options ```html
- speech bubble + speech bubble
- speech bubble + speech bubble
- speech bubble + speech bubble
- speech bubble + speech bubble
- speech bubble + speech bubble
``` ### Using icons within components + #### Button ```html ``` @@ -59,12 +60,11 @@ Icons are used inside an icon-wrapper that defines it's size and styling options ```html
-
- +
+

Podcasts

Rock n' Roll with EmberJS.

``` - From f1c2acfb1661848cfcb33138a0b61b27be87ba5f Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 15:21:44 +0100 Subject: [PATCH 2/7] Font scale cleanup --- addon/styles/global.css | 48 +++++++++++++++++-------- addon/styles/typography.css | 32 ++++++++++------- tests/dummy/app/styles/color-pallet.css | 4 +-- 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/addon/styles/global.css b/addon/styles/global.css index 9292626f..f3744b91 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -26,19 +26,21 @@ --color-warning: #fcffc9; --color-info: #e3eefc; - --font-size-1: 1.5rem; - --font-size-2: 1.875rem; /* 15dp, no need to use calc() for such a basic value */ - --font-size-3: 2rem; - --font-size-4: 2.5rem; - --font-size-5: 4.5rem; - --font-size-display: 7.75rem; - - --line-height-1: calc(16 / 12); - --line-height-2: 1.6; - --line-height-3: 1.5; - --line-height-4: 1.2; - --line-height-5: calc(48 / 36); - --line-height-display: calc(64 / 62); + --font-size-xs: 1.375rem; /* 11px */ + --font-size-base: 1.625rem; /* p = 13px */ + --font-size-md: 1.875rem; /* h3 = 15px */ + --font-size-lg: 2.25rem; /* h2 = 18px */ + --font-size-xl: 3.125rem; /* h1 = 25px */ + --font-size-display-1: 4rem; /* display 1 = 32px */ + --font-size-display-2: 1.875rem; /* display 2 = 15px */ + + --line-height-xs: calc(16 / 11); + --line-height-base: calc(24 / 13); + --line-height-md: 1.6; + --line-height-lg: calc(32 / 18); + --line-height-xl: 1.28; + --line-height-display-1: 1.25; + --line-height-display-2: 1.6; --font-weight-1: 200; --font-weight-2: 400; @@ -59,6 +61,22 @@ @media (min-width: 984px) { :root { --grid-gap: 4rem; + + --font-size-xs: 1.5rem; /* 12px */ + --font-size-base: 1.875rem; /* 15px */ + --font-size-md: 2rem; /* 16px */ + --font-size-lg: 2.5rem; /* 20px */ + --font-size-xl: 4.5rem; /* 36px */ + --font-size-display-1: 7.75rem; /* 62px */ + --font-size-display-2: 2.375rem; /* 19px */ + + --line-height-xs: calc(16 / 12); + --line-height-base: 1.6; + --line-height-md: 1.5; + --line-height-lg: 1.2; + --line-height-xl: calc(48 / 36); + --line-height-displaay-1: calc(64 / 62); + --line-height-displaay-2: calc(32 / 19); } } @@ -82,8 +100,8 @@ html { } body { - font-size: var(--font-size-2); - line-height: var(--line-height-2); + font-size: var(--font-size-base); + line-height: var(--line-height-base); } a { diff --git a/addon/styles/typography.css b/addon/styles/typography.css index 70f092cd..5f658c53 100644 --- a/addon/styles/typography.css +++ b/addon/styles/typography.css @@ -51,43 +51,49 @@ p + * { .xsmall, small { - font-size: var(--font-size-1); - line-height: var(--line-height-1); + font-size: var(--font-size-xs); + line-height: var(--line-height-xs); } .small, p { - font-size: var(--font-size-2); - line-height: var(--line-height-2); + font-size: var(--font-size-base); + line-height: var(--line-height-base); } .medium, h3 { - font-size: var(--font-size-3); - line-height: var(--line-height-3); + font-size: var(--font-size-md); + line-height: var(--line-height-md); font-weight: var(--font-weight-3); } .large, h2 { - font-size: var(--font-size-4); - line-height: var(--line-height-4); + font-size: var(--font-size-lg); + line-height: var(--line-height-lg); font-weight: var(--font-weight-3); } .xlarge, h1 { - font-size: var(--font-size-5); - line-height: var(--line-height-5); + font-size: var(--font-size-xl); + line-height: var(--line-height-xl); font-weight: var(--font-weight-2); } -.display { - font-size: var(--font-size-display); - line-height: var(--line-height-display); +.display, +.display-1 { + font-size: var(--font-size-display-1); + line-height: var(--line-height-display-1); font-weight: var(--font-weight-1); } +.display-2 { + font-size: var(--font-size-display-2); + line-height: var(--line-height-display-2); +} + h1, h2, h3 { diff --git a/tests/dummy/app/styles/color-pallet.css b/tests/dummy/app/styles/color-pallet.css index b3caea97..1d33f788 100644 --- a/tests/dummy/app/styles/color-pallet.css +++ b/tests/dummy/app/styles/color-pallet.css @@ -34,11 +34,11 @@ div.color-pallet { .color-pallet__example-text-result span { font-family: monospace; - font-size: var(--font-size-1); + font-size: var(--font-size-xs); background-color: var(--color-dark); color: var(--color-light); border-radius: 4px; - line-height: var(--font-size-2); + line-height: var(--font-size-base); display: inline-block; padding: 0 var(--spacing-1); } From 44b2cff8cc9840a5e7333fc0ac9fb7fbcf79c7b9 Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 15:28:43 +0100 Subject: [PATCH 3/7] Spacing --- addon/styles/global.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/addon/styles/global.css b/addon/styles/global.css index f3744b91..3e241397 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -50,11 +50,11 @@ --grid-gap: 3rem; --grid-margin: 1.5rem; - --spacing-1: 2rem; - --spacing-2: 3rem; - --spacing-3: 6rem; - --spacing-4: 9rem; - --spacing-5: 24rem; + --spacing-1: 1rem; + --spacing-2: 2rem; + --spacing-3: 3rem; + --spacing-4: 5rem; + --spacing-5: 8rem; } /* 984px = 2rem + 119rem + 2rem */ @@ -77,6 +77,12 @@ --line-height-xl: calc(48 / 36); --line-height-displaay-1: calc(64 / 62); --line-height-displaay-2: calc(32 / 19); + + --spacing-1: 2rem; + --spacing-2: 3rem; + --spacing-3: 6rem; + --spacing-4: 9rem; + --spacing-5: 24rem; } } From adc43b5bb1567a66c4fbfcd995a0cd80c8d23743 Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 17:54:58 +0100 Subject: [PATCH 4/7] Cleanup color palette --- addon/styles/colors.css | 40 +++++++++++++++++++------ addon/styles/components/es-button.css | 2 +- addon/styles/components/es-card.css | 4 +-- addon/styles/components/es-footer.css | 12 ++++---- addon/styles/components/es-header.css | 6 ++-- addon/styles/global.css | 36 +++++++++++----------- addon/styles/typography.css | 4 +-- docs/concepts/colours.md | 26 ++++++++-------- tests/dummy/app/styles/app.css | 6 ++-- tests/dummy/app/styles/color-pallet.css | 10 +++---- 10 files changed, 83 insertions(+), 63 deletions(-) diff --git a/addon/styles/colors.css b/addon/styles/colors.css index f9ada867..eae05bde 100644 --- a/addon/styles/colors.css +++ b/addon/styles/colors.css @@ -1,24 +1,46 @@ .bg-brand { background-color: var(--color-brand); + color: var(--color-brand-text); + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6, + & .medium, + & .large, + & .xlarge { + color: var(--color-white); + } +} + +.bg-light { + background-color: var(--color-gray-100); } -.bg-muted { - background-color: var(--color-muted); +.bg-light-muted { + background-color: var(--color-gray-200); } .bg-dark { - background-color: var(--color-dark); - color: var(--color-light); + background-color: var(--color-gray-900); + color: var(--color-gray-300); + & h1, + & h2, + & h3, + & h4, + & h5, + & h6, + & .medium, + & .large, + & .xlarge, & a { - color: var(--color-light); + color: var(--color-white); } } -.bg-muted { - background-color: var(--color-muted); -} - .bg-info { background: var(--color-info); } diff --git a/addon/styles/components/es-button.css b/addon/styles/components/es-button.css index ec970b97..37e673d2 100644 --- a/addon/styles/components/es-button.css +++ b/addon/styles/components/es-button.css @@ -1,6 +1,6 @@ .es-button { background-color: var(--color-brand); - color: var(--color-light); + color: var(--color-white); padding-left: 1.5em; padding-right: 1.5em; padding-top: 1em; diff --git a/addon/styles/components/es-card.css b/addon/styles/components/es-card.css index b3b3cbb8..5c93f974 100644 --- a/addon/styles/components/es-card.css +++ b/addon/styles/components/es-card.css @@ -1,6 +1,6 @@ .card { - border: 1px solid var(--color-gray); border-radius: 4px; + border: 2px solid var(--color-gray-300); height: 100%; overflow: hidden; position: relative; @@ -24,7 +24,7 @@ .card[card-link]:focus-within, .card[card-link]:hover { - background-color: var(--color-muted); + background-color: var(--color-gray-200); } .card__image { diff --git a/addon/styles/components/es-footer.css b/addon/styles/components/es-footer.css index 2ec60276..233ca5d7 100644 --- a/addon/styles/components/es-footer.css +++ b/addon/styles/components/es-footer.css @@ -5,7 +5,7 @@ .es-footer { & a { text-decoration: none; - color: var(--color-dark); + color: var(--color-gray-900); } & .footer-info { @@ -25,7 +25,7 @@ & .footer-hr { border: 0; - border-bottom: 2px solid var(--color-muted); + border-bottom: 2px solid var(--color-gray-200); margin: 0; } @@ -36,7 +36,7 @@ } & .footer-copyright { - color: var(--color-gray); + color: var(--color-gray-600); } & .footer-social { @@ -44,16 +44,16 @@ align-items: center; & svg { - fill: var(--color-gray); + fill: var(--color-gray-600); } } & .footer-contributions-wrapper { - background-color: var(--color-muted); + background-color: var(--color-white); } & .footer-contributions { - color: var(--color-gray); + color: var(--color-gray-600); padding: 0; display: flex; justify-content: space-between; diff --git a/addon/styles/components/es-header.css b/addon/styles/components/es-header.css index 728bb843..c996ecde 100644 --- a/addon/styles/components/es-header.css +++ b/addon/styles/components/es-header.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--color-dark); + background-color: var(--color-gray-900); padding: 1rem var(--grid-margin); } @@ -12,8 +12,8 @@ } .es-navbar { - background-color: var(--color-dark); - color: var(--color-light); + background-color: var(--color-gray-900); + color: var(--color-gray-100); display: flex; flex-direction: column; font-size: 2rem; diff --git a/addon/styles/global.css b/addon/styles/global.css index 3e241397..272256f4 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -2,24 +2,23 @@ --font-family-sans: 'Inter var', 'Inter web', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --white: #fff; - --gray-100: #f4f6f8; - --gray-200: #ebeef2; - --gray-300: #dce0e6; - --gray-400: #bec4cc; - --gray-500: #8f949f; - --gray-600: #6a707a; - --gray-700: #42474f; - --gray-800: #2b2d34; - --gray-900: #1c1e24; - --black: #000; + --color-white: #fff; + --color-gray-100: #f4f6f8; + --color-gray-200: #ebeef2; + --color-gray-300: #dce0e6; + --color-gray-400: #bec4cc; + --color-gray-500: #8f949f; + --color-gray-600: #6a707a; + --color-gray-700: #42474f; + --color-gray-800: #2b2d34; + --color-gray-900: #1c1e24; + --color-black: #000; --color-brand: #e04e39; + --color-brand-text: #ffd7d2; + --color-brand-hc-light: #ff5c44; + --color-brand-hc-dark: #cf2d20; - --color-dark: var(--gray-900); - --color-light: var(--white); - --color-muted: var(--gray-100); - --color-brand: #e04e39; --color-gray: #a2a3a8; --color-success: #d9f9e3; --color-danger: #ffd8e1; @@ -96,8 +95,8 @@ html { margin: 0; padding: 0; font-family: var(--font-family-sans); - background: var(--color-light); - color: var(--color-dark); + background: var(--color-white); + color: var(--color-gray-700); border: 0; } @@ -117,7 +116,7 @@ a { a:active, .active { - color: var(--color-dark); + color: var(--color-gray-900); } p { @@ -132,6 +131,7 @@ h5, h6 { font-weight: 500; margin: 0 0 2rem 0; + color: var(--color-gray-900); } strong { diff --git a/addon/styles/typography.css b/addon/styles/typography.css index 5f658c53..d0a43a1c 100644 --- a/addon/styles/typography.css +++ b/addon/styles/typography.css @@ -138,9 +138,9 @@ strong { } .text-light { - color: var(--color-light); + color: var(--color-gray-100); } .text-muted { - color: var(--color-gray); + color: var(--color-gray-600); } diff --git a/docs/concepts/colours.md b/docs/concepts/colours.md index 3f3a5ddd..98c00ebe 100644 --- a/docs/concepts/colours.md +++ b/docs/concepts/colours.md @@ -11,14 +11,18 @@ Website elements like text and icons should meet accesibility standards when use The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.
- - - - - - - - + + + + + + + + + + + +
## Secondary Colors @@ -26,16 +30,10 @@ The primary palette is applied across every page of the website and contains the The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
- - - - - -
### Examples diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index 3a3dc8c6..f7a34162 100644 --- a/tests/dummy/app/styles/app.css +++ b/tests/dummy/app/styles/app.css @@ -1,4 +1,4 @@ -@import "color-pallet"; +@import 'color-pallet'; .self-executing-code-block { margin-bottom: 2rem; @@ -11,5 +11,5 @@ } .border-dashed { - border: 1px dashed var(--color-gray); -} \ No newline at end of file + border: 1px dashed var(--color-gray-500); +} diff --git a/tests/dummy/app/styles/color-pallet.css b/tests/dummy/app/styles/color-pallet.css index 1d33f788..a75b7f13 100644 --- a/tests/dummy/app/styles/color-pallet.css +++ b/tests/dummy/app/styles/color-pallet.css @@ -1,7 +1,7 @@ div.color-pallet { display: flex; flex-direction: column; - border: 1px solid var(--color-muted); + border: 1px solid var(--color-gray-200); overflow: hidden; border-radius: 4px; margin-bottom: var(--spacing-2); @@ -35,8 +35,8 @@ div.color-pallet { .color-pallet__example-text-result span { font-family: monospace; font-size: var(--font-size-xs); - background-color: var(--color-dark); - color: var(--color-light); + background-color: var(--color-gray-900); + color: var(--color-gray-100); border-radius: 4px; line-height: var(--font-size-base); display: inline-block; @@ -46,12 +46,12 @@ div.color-pallet { .color-pallet__details { flex-grow: 1; min-height: 250px; - background-color: var(--color-muted); + background-color: var(--color-gray-200); padding: 0 1.5rem; } .color-pallet__details-title { - color: var(--color-gray); + color: var(--color-gray-500); text-transform: uppercase; font-size: 0.9rem; } From 79e5ab93414560616a435efe3af7cd9caf16f3cf Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 17:55:19 +0100 Subject: [PATCH 5/7] Cleanup other variables and helpers --- addon/styles/components/es-card.css | 4 +-- addon/styles/components/es-page-header.css | 12 ------- addon/styles/global.css | 17 ++++++---- addon/styles/helpers.css | 8 ++--- addon/styles/layout.css | 2 +- addon/templates/components/es-page-header.hbs | 4 +-- docs/css/helpers.md | 32 ++++++++++++++++--- 7 files changed, 48 insertions(+), 31 deletions(-) diff --git a/addon/styles/components/es-card.css b/addon/styles/components/es-card.css index 5c93f974..32fbcc4e 100644 --- a/addon/styles/components/es-card.css +++ b/addon/styles/components/es-card.css @@ -1,6 +1,6 @@ .card { - border-radius: 4px; border: 2px solid var(--color-gray-300); + border-radius: var(--radius-lg); height: 100%; overflow: hidden; position: relative; @@ -11,7 +11,7 @@ .card[card-link] h3 > a::after, .card[card-link] h4 > a::after { position: absolute; - top:0; + top: 0; left: 0; right: 0; bottom: 0; diff --git a/addon/styles/components/es-page-header.css b/addon/styles/components/es-page-header.css index 2ad25ad4..7dc5ef5b 100644 --- a/addon/styles/components/es-page-header.css +++ b/addon/styles/components/es-page-header.css @@ -1,14 +1,2 @@ .es-page-header { - padding-top: 4.5rem; - padding-bottom: 4.5rem; -} - -.es-page-header__title { - margin-top: 0; - margin-bottom: 0; -} - -.es_page-header__details { - margin-top: 2em; - margin-bottom: 2em; } diff --git a/addon/styles/global.css b/addon/styles/global.css index 272256f4..eef672a0 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -46,7 +46,8 @@ --font-weight-3: 600; --container-width: 119rem; - --grid-gap: 3rem; + --grid-gap-x: 3rem; + --grid-gap-y: 6rem; --grid-margin: 1.5rem; --spacing-1: 1rem; @@ -54,13 +55,14 @@ --spacing-3: 3rem; --spacing-4: 5rem; --spacing-5: 8rem; + + --radius: 0.625rem; + --radius-lg: 1.25rem; } /* 984px = 2rem + 119rem + 2rem */ @media (min-width: 984px) { :root { - --grid-gap: 4rem; - --font-size-xs: 1.5rem; /* 12px */ --font-size-base: 1.875rem; /* 15px */ --font-size-md: 2rem; /* 16px */ @@ -74,14 +76,17 @@ --line-height-md: 1.5; --line-height-lg: 1.2; --line-height-xl: calc(48 / 36); - --line-height-displaay-1: calc(64 / 62); - --line-height-displaay-2: calc(32 / 19); + --line-height-display-1: calc(64 / 62); + --line-height-display-2: calc(32 / 19); --spacing-1: 2rem; --spacing-2: 3rem; --spacing-3: 6rem; --spacing-4: 9rem; --spacing-5: 24rem; + + --grid-gap-x: 4rem; + --grid-gap-y: 9rem; } } @@ -129,7 +134,7 @@ h3, h4, h5, h6 { - font-weight: 500; + font-weight: var(--font-weight-2); margin: 0 0 2rem 0; color: var(--color-gray-900); } diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css index 0b8d524b..2dc07113 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -332,10 +332,10 @@ max-width: 100%; } -.rounded-small { - border-radius: 0.75rem; +.rounded { + border-radius: var(--radius); } -.rounded-large { - border-radius: 1.25rem; +.rounded-lg { + border-radius: var(--radius-lg); } diff --git a/addon/styles/layout.css b/addon/styles/layout.css index 67c3d4e3..31c95e9a 100644 --- a/addon/styles/layout.css +++ b/addon/styles/layout.css @@ -19,7 +19,7 @@ .layout-grid { display: grid; grid-template-columns: repeat(6, 1fr); - grid-gap: var(--grid-gap); + grid-gap: var(--grid-gap-y) var(--grid-gap-x); } .layout-grid > * { diff --git a/addon/templates/components/es-page-header.hbs b/addon/templates/components/es-page-header.hbs index 72a4c233..fe60d95d 100644 --- a/addon/templates/components/es-page-header.hbs +++ b/addon/templates/components/es-page-header.hbs @@ -1,8 +1,8 @@
-

{{@headline}}

+

{{@headline}}

-

{{@detail}}

+

{{@detail}}

{{yield}}
diff --git a/docs/css/helpers.md b/docs/css/helpers.md index 71a1d4d0..65d808da 100644 --- a/docs/css/helpers.md +++ b/docs/css/helpers.md @@ -2,9 +2,31 @@ ## Theming Helpers +All of the below will set the desired background color and ensure corresponding foreground colors as well. + +### Light Background + +If you would like a section or a div to use the dark style then you need to add `class="bg-light"` to the element that you would like to be light. + +```html +
+ hello there +
+``` + +### Light Muted Background + +If you would like a section or a div to use the dark style then you need to add `class="bg-light-muted"` to the element that you would like to be light, but slightly darker. + +```html +
+ hello there +
+``` + ### Dark Background -If you would like a section or a div to use the dark style then you need to add `class="bg-dark"` to the element that you would like to be dark. This helper class sets the background to the dark colour and automatically sets the text colour to be white +If you would like a section or a div to use the dark style then you need to add `class="bg-dark"` to the element that you would like to be dark. ```html
@@ -12,6 +34,8 @@ If you would like a section or a div to use the dark style then you need to add
``` +Please note that there currently is no `bg-dark-muted`, as it's unused. + ## Border Helpers If you want to adjust border properties. @@ -19,11 +43,11 @@ If you want to adjust border properties. ### Rounded Corners ```html -
Hello!
+
Hello!
``` ```html -
Hello!
+
Hello!
``` ## List Styles @@ -62,7 +86,7 @@ In order to apply the spacing scale on pages, a set of predefined helper classes {{direction}} .margin{{direction}}{{size}} -
+
Content
From 9470d1af22756f54eabb93d5d9d5913cdbc0981f Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Wed, 30 Oct 2019 20:19:02 +0100 Subject: [PATCH 6/7] Add helper to force bright text --- addon/styles/colors.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/addon/styles/colors.css b/addon/styles/colors.css index eae05bde..400c2d10 100644 --- a/addon/styles/colors.css +++ b/addon/styles/colors.css @@ -44,3 +44,19 @@ .bg-info { background: var(--color-info); } + +.text-light { + color: var(--color-brand-text); + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6, + & .medium, + & .large, + & .xlarge { + color: var(--color-white); + } +} From 3e37aaf0f91e2ce4d95cdd53d84110e7c33ca67c Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Thu, 31 Oct 2019 09:42:10 +0000 Subject: [PATCH 7/7] using text-light in bg-shape-swipe-top example --- docs/concepts/background-shapes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/concepts/background-shapes.md b/docs/concepts/background-shapes.md index adab2f63..9ef6bbf0 100644 --- a/docs/concepts/background-shapes.md +++ b/docs/concepts/background-shapes.md @@ -75,7 +75,7 @@ The other type of background shape is a "swipe" that can either be a swipe acros ```html
-
+

Build with the teams that never stop shipping.

Some of the best development teams in the world have been iterating on their products for years with Ember. With