Skip to content

Commit

Permalink
docs(colours): Set font-size to 1rem
Browse files Browse the repository at this point in the history 
To math the font-size rendered by the Paragraph component and move the Foundational elements section
up to fix the weird rendering issue we bumped into
  • Loading branch information
@lzcabrera
lzcabrera committed Oct 27, 2017
1 parent 8852dcc commit 9ebb36e
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 167 deletions.
76 changes: 38 additions & 38 deletions config/styleguide.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,44 @@ module.exports = {
},
],
},
{
name: 'Foundational elements',
content: path.resolve('docs/elements/intro.md'),
sections: [
{
name: 'Colours',
content: path.resolve('docs/elements/colours.md'),
},
{
name: 'Forms',
content: path.resolve('docs/elements/forms-with-deprecated-input.md'),
},
{
name: 'Grid',
content: path.resolve('docs/elements/grid.md'),
},
{
name: 'Lists',
content: path.resolve('docs/elements/lists-deprecated.md'),
},
{
name: 'Typography',
content: path.resolve('docs/elements/typography.md'),
},
{
name: 'Utility icons',
content: path.resolve('docs/elements/utility-icons-deprecated.md'),
},
{
name: 'Utility mixins',
content: path.resolve('docs/elements/utility-mixins.md'),
},
{
name: 'Design tokens',
content: path.resolve('docs/elements/design-tokens.md'),
},
],
},
{
name: 'Components',
sections: [
Expand Down Expand Up @@ -224,44 +262,6 @@ module.exports = {
},
],
},
{
name: 'Foundational elements',
content: path.resolve('docs/elements/intro.md'),
sections: [
{
name: 'Colours',
content: path.resolve('docs/elements/colours.md'),
},
{
name: 'Forms',
content: path.resolve('docs/elements/forms-with-deprecated-input.md'),
},
{
name: 'Grid',
content: path.resolve('docs/elements/grid.md'),
},
{
name: 'Lists',
content: path.resolve('docs/elements/lists-deprecated.md'),
},
{
name: 'Typography',
content: path.resolve('docs/elements/typography.md'),
},
{
name: 'Utility icons',
content: path.resolve('docs/elements/utility-icons-deprecated.md'),
},
{
name: 'Utility mixins',
content: path.resolve('docs/elements/utility-mixins.md'),
},
{
name: 'Design tokens',
content: path.resolve('docs/elements/design-tokens.md'),
},
],
},
],

template: path.resolve('docs/index.html'),
Expand Down
175 changes: 46 additions & 129 deletions docs/elements/colours.md
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,64 @@

## Overview

---

Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change. At a minimum; colours use the WCAG 2.0 Level AA contrast ratio of at least 4.5:1.

These colours are use cases and are intended to be specific to digital experiences only. For the full guidelines on using colour, including traditional media and other forms of communications, visit [BrandHub](https://brand.telus.com/guidelines/telus-colours).

## Brand colours

---

White is the most dominant colour in our palette and should be the foundation of every page. Purple and green are used to accent white space through buttons, text colour, and links.

For more insight in how we use whitespace and our colour palette, go to [BrandHub](http://brand.telus.com/).

## Buttons / links / headings / body

---

<div class="container colors">
<div class="grid-row">
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(36,135,0);"></span>
<p>
<strong>Accessible Green</strong>
</p>
<p>`$color-accessible-green`</p>
<p>#248700</p>
<p><strong>Accessible Green</strong></p>
<p>$color-accessible-green</p>
<p>Hex: #248700</p>
<p>Usage: Primary button backgrounds/outline, text links</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(102, 204, 0);"></span>
<p>
<strong>TELUS Green</strong>
</p>
<p>`$color-telus-green`</p>
<p>#66CC00</p>
<p><strong>TELUS Green</strong></p>
<p>$color-telus-green</p>
<p>Hex: #66CC00</p>
<p>Usage: Decorative elements (graphs/charts).</p>
<p class="text--small">
* use only for decorative items (when it doesn't need to be colour accessible)
</p>
<p>Use only for decorative items (when it doesn't need to be colour accessible)</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(75,40,109);"></span>
<p>
<strong>TELUS Purple</strong>
</p>
<p>`$color-telus-purple`</p>
<p>#4B286D</p>
<p><strong>TELUS Purple</strong></p>
<p>$color-telus-purple</p>
<p>Hex: #4B286D</p>
<p>Usage: Headings, secondary button background/outline, chevron links</p>
</div>
</div>
</div>

<div class="container colors">
<div class="grid-row">
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(42, 44, 46);"></span>
<p>
<strong>Shark</strong>
</p>
<p>`$color-shark`</p>
<p>#2A2C2E</p>
<p><strong>Shark</strong></p>
<p>$color-shark</p>
<p>Hex: #2A2C2E</p>
<p>Usage: Sub headings (H3, H4), body text, and focus form objects borders</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(84,89,95);"></span>
<p>
<strong>Shuttle Grey</strong>
</p>
<p>`$color-shuttle-grey`
</p>
<p>
#54595F
</p>
<p>
Usage: Colour for default links
</p>
<p><strong>Shuttle Grey</strong></p>
<p>$color-shuttle-grey</p>
<p>Hex: #54595F</p>
<p>Usage: Colour for default links</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(255, 255, 255);"></span>
<p>
<strong>White</strong>
</p>
<p>
`$color-white`
</p>
<p>
#FFFFFF
</p>
<p>
Usage: Page background, inverted links/buttons
</p>
<p><strong>White</strong></p>
<p>$color-white</p>
<p>Hex: #FFFFFF</p>
<p>Usage: Page background, inverted links/buttons</p>
</div>
</div>
</div>
Expand All @@ -102,100 +68,51 @@ For more insight in how we use whitespace and our colour palette, go to [BrandHu

These colours are not part of the TELUS brand colour palette, however are used sparingly, but intentionally to play a functional role and support a positive user experience.

---

<div class="container colors">
<div class="grid-row">
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(193,35,53);"></span>
<p>
<strong>Cardinal</strong>
</p>
<p>
`$color-cardinal`
</p>
<p>
#C12335
</p>
<p>
Usage: Error body text and icons
</p>
<p><strong>Cardinal</strong></p>
<p>$color-cardinal</p>
<p>Hex: #C12335</p>
<p>Usage: Error body text and icons</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(255,246,248);"></span>
<p>
<strong>Lavender Blush</strong>
</p>
<p>
`$color-lavender-blush`
</p>
<p>
#FFF6F8
</p>
<p>
Usage: Notification/error messaging background
</p>
<p><strong>Lavender Blush</strong></p>
<p>$color-lavender-blush</p>
<p>Hex: #FFF6F8</p>
<p>Usage: Notification/error messaging background</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(242,239,244);"></span>
<p>
<strong>White Lilac</strong>
</p>
<p>
`$color-white-lilac`
</p>
<p>
#F2EFF4
</p>
<p>
Usage: Branded messaging background
</p>
<p><strong>White Lilac</strong></p>
<p>$color-white-lilac</p>
<p>Hex: #F2EFF4</p>
<p>Usage: Branded messaging background</p>
</div>
</div>
<div class="grid-row">
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(216,216,216);"></span>
<p>
<strong>Gainsboro</strong>
</p>
<p>
`$color-gainsboro`
</p>
<p>
#D8D8D8
</p>
<p>
Usage: Horizontal, vertical and wave dividers
</p>
<p><strong>Gainsboro</strong></p>
<p>$color-gainsboro</p>
<p>Hex: #D8D8D8</p>
<p>Usage: Horizontal, vertical and wave dividers</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(247,247,248);"></span>
<p>
<strong>Athens Grey</strong>
</p>
<p>
`$color-athens-grey`
</p>
<p>
#F7F7F8
</p>
<p>
Usage: Helper/disabled state background
</p>
<p><strong>Athens Grey</strong></p>
<p>$color-athens-grey</p>
<p>Hex: #F7F7F8</p>
<p>Usage: Helper/disabled state background</p>
</div>
<div class="medium-4">
<span class="color-preview" style="background-color: rgb(244,249,242);"></span>
<p>
<strong>Panache</strong>
</p>
<p>
`$color-panache`
</p>
<p>
#F4F9F2
</p>
<p>
Usage: Success messaging background
</p>
<p><strong>Panache</strong></p>
<p>$color-panache</p>
<p>Hex: #F4F9F2</p>
<p>Usage: Success messaging background</p>
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions docs/scss/_colours.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,7 @@
line-height: 90px;
width: 90px;
}

.container.colors p {
font-size: 1rem;
}

0 comments on commit 9ebb36e

Please sign in to comment.