@tds/core-colours - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [2.1.0](https://github.com/telusdigital/tds/compare/@tds/core-colours@2.0.0...@tds/core-colours@2.1.0) (2019-08-09)
+
+
+### Bug Fixes
+
+* **core-colours:** update colorAccessibleGreen ([cdccb45](https://github.com/telusdigital/tds/commit/cdccb45))
+
+
+### Features
+
+* **core-colours:** add raja ([b66742b](https://github.com/telusdigital/tds/commit/b66742b))
+* **core-colours:** add ravenGrey ([38a044f](https://github.com/telusdigital/tds/commit/38a044f))
+
+
+
+
+
 # [2.0.0](https://github.com/telusdigital/tds/compare/@tds/core-colours@1.1.2...@tds/core-colours@2.0.0) (2019-08-01)
@@ -8,0 +25,0 @@

colours.js

 // colours
-export const colorAccessibleGreen = '#248700'
+export const colorAccessibleGreen = '#2B8000'
 export const colorTelusGreen = '#6c0'
@@ -9,2 +9,3 @@ export const colorPanache = '#f4f9f2'
 export const colorAthensGrey = '#f7f7f8'
+export const colorGreyRaven = '#71757b'
 
@@ -19,2 +20,6 @@ export const colorTelusPurple = '#4b286d'
 
+export const colorLightRaja = '#FFF9EE'
+export const colorRaja = '#FACA69'
+export const colorDarkRaja = '#8C5415'
+
 // typography
@@ -21,0 +26,0 @@ export const colorLink = colorShuttleGrey

Colours.md

@@ -21,3 +21,3 @@ ```js static
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(36,135,0)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(43,128,0)' }} />
         <Box between={3}>
@@ -28,3 +28,3 @@ <Paragraph>
           <Paragraph>colorAccessibleGreen</Paragraph>
-          <Paragraph>Hex: #248700</Paragraph>
+          <Paragraph>Hex: #2B8000</Paragraph>
         </Box>
@@ -83,2 +83,38 @@ </Box>
       <Box vertical={3}>
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(113,117,123)' }} />
+        <Box between={3}>
+          <Paragraph>
+            <Strong>Raven Grey</Strong>
+          </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(216,216,216)' }} />
+        <Box between={3}>
+          <Paragraph>
+            <Strong>Gainsboro</Strong>
+          </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(247,247,248)' }} />
+        <Box between={3}>
+          <Paragraph>
+            <Strong>Athens Grey</Strong>
+          </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(255, 255, 255)' }} />
@@ -132,9 +168,9 @@ <Box between={3}>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(216,216,216)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(244,249,242)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Gainsboro</Strong>
+            <Strong>Panache</Strong>
           </Paragraph>
-          <Paragraph>colorGainsboro</Paragraph>
-          <Paragraph>Hex: #D8D8D8</Paragraph>
+          <Paragraph>colorPanache</Paragraph>
+          <Paragraph>Hex: #F4F9F2</Paragraph>
         </Box>
@@ -145,9 +181,9 @@ </Box>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(247,247,248)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(255,249,238)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Athens Grey</Strong>
+            <Strong>Light Raja</Strong>
           </Paragraph>
-          <Paragraph>colorAthensGrey</Paragraph>
-          <Paragraph>Hex: #F7F7F8</Paragraph>
+          <Paragraph>colorLightRaja</Paragraph>
+          <Paragraph>Hex: #FFF9EE</Paragraph>
         </Box>
@@ -158,39 +194,26 @@ </Box>
       <Box vertical={3}>
-        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(244,249,242)' }} />
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(250,202,105)' }} />
         <Box between={3}>
           <Paragraph>
-            <Strong>Panache</Strong>
+            <Strong>Raja</Strong>
           </Paragraph>
-          <Paragraph>colorPanache</Paragraph>
-          <Paragraph>Hex: #F4F9F2</Paragraph>
+          <Paragraph>colorRaja</Paragraph>
+          <Paragraph>Hex: #FACA69</Paragraph>
         </Box>
       </Box>
     </FlexGrid.Col>
+    <FlexGrid.Col xs={4}>
+      <Box vertical={3}>
+        <span className="docs_color-preview" style={{ backgroundColor: 'rgb(140,84,21)' }} />
+        <Box between={3}>
+          <Paragraph>
+            <Strong>Dark Raja</Strong>
+          </Paragraph>
+          <Paragraph>colorDarkRaja</Paragraph>
+          <Paragraph>Hex: #8C5415</Paragraph>
+        </Box>
+      </Box>
+    </FlexGrid.Col>
   </FlexGrid.Row>
 </FlexGrid>
 ```
-
-### SASS
-
-**Deprecated, please use JS variables instead.**
-
-```scss static
-@import '~@tds/core-colours/colours';
-```
-
-See the table below for the full list of JS variables and their corresponding SASS variables.
-
-| JS                     | SASS                      |
-| ---------------------- | ------------------------- |
-| `colorAccessibleGreen` | `$color-accessible-green` |
-| `colorTelusGreen`      | `$color-telus-green`      |
-| `colorTelusPurple`     | `$color-telus-purple`     |
-| `colorShark`           | `$color-shark`            |
-| `colorShuttleGrey`     | `$color-shuttle-grey`     |
-| `colorWhite`           | `$color-white`            |
-| `colorCardinal`        | `$color-cardinal`         |
-| `colorLavenderBlush`   | `$color-labendar-blush`   |
-| `colorWhiteLilac`      | `$color-white-lilac`      |
-| `colorGainsboro`       | `$color-gainsboro`        |
-| `colorAthensGrey`      | `$color-athens-grey`      |
-| `colorPanache`         | `$color-panache`          |

dist/index.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 // colours
-var colorAccessibleGreen = '#248700';
+var colorAccessibleGreen = '#2B8000';
 var colorTelusGreen = '#6c0';
@@ -13,2 +13,3 @@ var colorPanache = '#f4f9f2';
 var colorAthensGrey = '#f7f7f8';
+var colorGreyRaven = '#71757b';
 var colorTelusPurple = '#4b286d';
@@ -19,3 +20,6 @@ var colorWhiteLilac = '#f2eff4';
 var colorWhite = '#fff';
-var colorGainsboro = '#d8d8d8'; // typography
+var colorGainsboro = '#d8d8d8';
+var colorLightRaja = '#FFF9EE';
+var colorRaja = '#FACA69';
+var colorDarkRaja = '#8C5415'; // typography
 
@@ -36,3 +40,5 @@ var colorLink = colorShuttleGrey;
 exports.colorCardinal = colorCardinal;
+exports.colorDarkRaja = colorDarkRaja;
 exports.colorGainsboro = colorGainsboro;
+exports.colorGreyRaven = colorGreyRaven;
 exports.colorIconDisabled = colorIconDisabled;
@@ -43,5 +49,7 @@ exports.colorIconError = colorIconError;
 exports.colorLavenderBlush = colorLavenderBlush;
+exports.colorLightRaja = colorLightRaja;
 exports.colorLink = colorLink;
 exports.colorPanache = colorPanache;
 exports.colorPrimary = colorPrimary;
+exports.colorRaja = colorRaja;
 exports.colorSecondary = colorSecondary;
@@ -48,0 +56,0 @@ exports.colorShark = colorShark;

dist/index.es.js

 // colours
-var colorAccessibleGreen = '#248700';
+var colorAccessibleGreen = '#2B8000';
 var colorTelusGreen = '#6c0';
@@ -8,2 +8,3 @@ var colorPanache = '#f4f9f2';
 var colorAthensGrey = '#f7f7f8';
+var colorGreyRaven = '#71757b';
 var colorTelusPurple = '#4b286d';
@@ -14,3 +15,6 @@ var colorWhiteLilac = '#f2eff4';
 var colorWhite = '#fff';
-var colorGainsboro = '#d8d8d8'; // typography
+var colorGainsboro = '#d8d8d8';
+var colorLightRaja = '#FFF9EE';
+var colorRaja = '#FACA69';
+var colorDarkRaja = '#8C5415'; // typography
 
@@ -28,2 +32,2 @@ var colorLink = colorShuttleGrey;
 
-export { colorAccessibleGreen, colorAthensGrey, colorCardinal, colorGainsboro, colorIconDisabled, colorIconError, colorIconPrimary, colorIconSecondary, colorLavenderBlush, colorLink, colorPanache, colorPrimary, colorSecondary, colorShark, colorShuttleGrey, colorTelusGreen, colorTelusPurple, colorText, colorWhite, colorWhiteLilac };
+export { colorAccessibleGreen, colorAthensGrey, colorCardinal, colorDarkRaja, colorGainsboro, colorGreyRaven, colorIconDisabled, colorIconError, colorIconPrimary, colorIconSecondary, colorLavenderBlush, colorLightRaja, colorLink, colorPanache, colorPrimary, colorRaja, colorSecondary, colorShark, colorShuttleGrey, colorTelusGreen, colorTelusPurple, colorText, colorWhite, colorWhiteLilac };

package.json

 {
   "name": "@tds/core-colours",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "The TDS colour palatte",
@@ -23,3 +23,3 @@ "main": "index.cjs.js",
   "homepage": "http://tds.telus.com",
-  "gitHead": "584cb652519a1676af6b022d25dc545963d7689b"
+  "gitHead": "56cee5f41176b371248ff7d0325ecfa998c04aa4"
 }

No alert changes

Improved metrics

Total package byte prevSize

14986

increased by12.53%

Lines of code

114

increased by16.33%

No dependency changes