feat(core-colours): add ravenGrey

telus · Aug 9, 2019 · 38a044f · 38a044f
1 parent 5e8d80a
commit 38a044f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/packages/colours/Colours.md b/packages/colours/Colours.md
@@ -78,73 +78,85 @@ For more information on the usage of each colour please refer to the [colour pri
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(255, 255, 255)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(113,117,123)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>White</Strong>
+            <Strong>Raven Grey</Strong>
           </Paragraph>
-          <Paragraph>colorWhite</Paragraph>
-          <Paragraph>Hex: #FFFFFF</Paragraph>
+          <Paragraph>colorRavenGrey</Paragraph>
+          <Paragraph>Hex: #71757B</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(193,35,53)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(216,216,216)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Cardinal</Strong>
+            <Strong>Gainsboro</Strong>
           </Paragraph>
-          <Paragraph>colorCardinal</Paragraph>
-          <Paragraph>Hex: #C12335</Paragraph>
+          <Paragraph>colorGainsboro</Paragraph>
+          <Paragraph>Hex: #D8D8D8</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(255,246,248)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(247,247,248)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Lavender Blush</Strong>
+            <Strong>Athens Grey</Strong>
           </Paragraph>
-          <Paragraph>colorLavenderBlush</Paragraph>
-          <Paragraph>Hex: #FFF6F8</Paragraph>
+          <Paragraph>colorAthensGrey</Paragraph>
+          <Paragraph>Hex: #F7F7F8</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(242,239,244)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(255, 255, 255)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>White Lilac</Strong>
+            <Strong>White</Strong>
           </Paragraph>
-          <Paragraph>colorWhiteLilac</Paragraph>
-          <Paragraph>Hex: #F2EFF4</Paragraph>
+          <Paragraph>colorWhite</Paragraph>
+          <Paragraph>Hex: #FFFFFF</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(216,216,216)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(193,35,53)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Gainsboro</Strong>
+            <Strong>Cardinal</Strong>
           </Paragraph>
-          <Paragraph>colorGainsboro</Paragraph>
-          <Paragraph>Hex: #D8D8D8</Paragraph>
+          <Paragraph>colorCardinal</Paragraph>
+          <Paragraph>Hex: #C12335</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
     <FlexGrid.Col xs={4}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(247,247,248)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(255,246,248)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Athens Grey</Strong>
+            <Strong>Lavender Blush</Strong>
           </Paragraph>
-          <Paragraph>colorAthensGrey</Paragraph>
-          <Paragraph>Hex: #F7F7F8</Paragraph>
+          <Paragraph>colorLavenderBlush</Paragraph>
+          <Paragraph>Hex: #FFF6F8</Paragraph>
+        </Box>
+      </Box>
+    </FlexGrid.Col>
+    <FlexGrid.Col xs={4}>
+      <Box vertical={3}>
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(242,239,244)' }} />
+        <Box between={3}>
+          <Paragraph>
+            <Strong>White Lilac</Strong>
+          </Paragraph>
+          <Paragraph>colorWhiteLilac</Paragraph>
+          <Paragraph>Hex: #F2EFF4</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>

diff --git a/packages/colours/colours.js b/packages/colours/colours.js
@@ -6,6 +6,7 @@ export const colorPanache = '#f4f9f2'
 export const colorShuttleGrey = '#54595f'
 export const colorShark = '#2a2c2e'
 export const colorAthensGrey = '#f7f7f8'
+export const colorGreyRaven = '#71757b'
 
 export const colorTelusPurple = '#4b286d'