Leverage color design tokens from @shopify/polaris-tokens (#1241)

* Leverage design tokens from @shopify/polaris-tokens * Add tokens to the clean task
Shopify · Apr 13, 2018 · b16feda · b16feda
1 parent bbfdd46
commit b16feda
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,4 @@ node_modules
 *.scss.d.ts
 /playground/.cache
 /playground/assets/*
+/src/styles/polaris-tokens
diff --git a/package.json b/package.json
@@ -34,9 +34,9 @@
     "test:watch": "yarn run test -- --watch",
     "check": "npm-run-all lint ts test",
     "check:ci": "npm-run-all lint ts test:ci",
-    "clean": "rimraf build build-esnext esnext styles types docs 'build-intermediate' 'index.*' 'embedded.js' 'styles.{css,scss}'",
+    "clean": "rimraf build build-esnext esnext styles types docs 'build-intermediate' 'index.*' 'embedded.js' './src/styles/polaris-tokens' 'styles.{css,scss}'",
     "optimize": "node ./scripts/optimize.js",
-    "prebuild": "npm-run-all clean optimize",
+    "prebuild": "npm-run-all clean optimize copy-polaris-tokens",
     "build": "babel-node ./scripts/build.js",
     "prebuild-consumer": "npm-run-all build hide-private-readme",
     "build-consumer": "babel-node ./scripts/build-consumer",
@@ -48,16 +48,18 @@
     "public-release:secrets": "ejson decrypt -o secrets.json secrets.ejson",
     "prepublic-release": "rimraf sandbox && yarn run public-release:secrets",
     "public-release": "babel-node ./scripts/public-repo-deploy.js",
+    "copy-polaris-tokens": "rimraf ./src/styles/polaris-tokens && shx cp -r ./node_modules/@shopify/polaris-tokens/dist ./src/styles/polaris-tokens",
     "hide-private-readme": "shx mv README.md ./public/README-private.md && shx mv ./public/README.md ./README.md",
     "show-private-readme": "shx mv ./README.md ./public/README.md && shx mv ./public/README-private.md ./README.md ",
     "prepublish": "in-publish && npm-run-all build hide-private-readme || :",
     "postpublish": "in-publish && npm-run-all cdn show-private-readme public-release || :",
-    "dev": "webpack-dev-server --config playground/webpack.config.js --content-base playground/ --hot --inline",
-    "dev:host": "webpack-dev-server --config playground/webpack.config.js --content-base playground/ --hot --inline --host $(ipconfig getifaddr en0)",
+    "dev": "yarn copy-polaris-tokens && webpack-dev-server --config playground/webpack.config.js --content-base playground/ --hot --inline",
+    "dev:host": "yarn copy-polaris-tokens && webpack-dev-server --config playground/webpack.config.js --content-base playground/ --hot --inline --host $(ipconfig getifaddr en0)",
     "start": "echo \"Warning: no 'start' task specified. Run 'yarn dev' instead.\" && yarn dev"
   },
   "devDependencies": {
     "@shopify/js-uploader": "github:shopify/js-uploader",
+    "@shopify/polaris-tokens": "0.16.0",
     "@types/enzyme": "^2.8.12",
     "@types/jest": "^21.1.2",
     "@types/lodash": "^4.14.66",

diff --git a/src/styles/foundation/colors.scss b/src/styles/foundation/colors.scss
@@ -1,110 +1,27 @@
-// Need to define the raw colors somewhere!
-// stylelint-disable color-no-hex, function-max-empty-lines, value-list-max-empty-lines
-$color-palette-data: (
-  'white': (
-    'base': #ffffff
-  ),
+@import '../polaris-tokens/colors.color-map';
 
-  'black': (
-    'base': #000000
-  ),
-
-  'sky': (
-    'lighter': #f9fafb,
-    'light': #f4f6f8,
-    'base': #dfe3e8,
-    'dark': #c4cdd5
-  ),
-
-  'ink': (
-    'lightest': #919eab,
-    'lighter': #637381,
-    'light': #454f5b,
-    'base': #212b36
-  ),
-
-  'blue': (
-    'lighter': #ebf5fa,
-    'light': #b4e1fa,
-    'base': #007ace,
-    'dark': #084e8a,
-    'darker': #001429,
-    'text': #3e4e57
-  ),
-
-  'green': (
-    'lighter': #e3f1df,
-    'light': #bbe5b3,
-    'base': #50b83c,
-    'dark': #108043,
-    'darker': #173630,
-    'text': #414f3e
-  ),
-
-  'yellow': (
-    'lighter': #fcf1cd,
-    'light': #ffea8a,
-    'base': #eec200,
-    'dark': #9c6f19,
-    'darker': #573b00,
-    'text': #595130
-  ),
-
-  'orange': (
-    'lighter': #fcebdb,
-    'light': #ffc58b,
-    'base': #f49342,
-    'dark': #c05717,
-    'darker': #4a1504,
-    'text': #594430
-  ),
-
-  'red': (
-    'lighter': #fbeae5,
-    'light': #fead9a,
-    'base': #de3618,
-    'dark': #bf0711,
-    'darker': #330101,
-    'text': #583c35
-  ),
-
-  'purple': (
-    'lighter': #f6f0fd,
-    'light': #e3d0ff,
-    'base': #9c6ade,
-    'dark': #50248f,
-    'darker': #230051,
-    'text': #50495a
-  ),
-
-  'teal': (
-    'lighter': #e0f5f5,
-    'light': #b7ecec,
-    'base': #47c1bf,
-    'dark': #00848e,
-    'darker': #003135,
-    'text': #405352
-  ),
-
-  'indigo': (
-    'lighter': #f4f5fa,
-    'light': #b3bcf5,
-    'base': #5c6ac4,
-    'dark': #202e78,
-    'darker': #000639,
-    'text': #3e4155
-  ),
-
-  'state': (
-    'hover': rgba(223, 227, 232, .3),
-    'focused': rgba(223, 227, 232, .3),
-    'active': rgba(179, 188, 245, .1),
-    'selected': rgba(179, 188, 245, .15),
-    'subdued': rgba(249, 250, 251, 1)
+///
+/// Color data
+///
+/// Shopify color palette, extended specifically for polaris-react.
+///
+/// @type map
+$color-palette-data: $polaris-colors;
+
+
+// Add state colors to the palette
+$color-palette-data: map-extend($color-palette-data,
+  (
+    'state': (
+      'hover': rgba(223, 227, 232, .3),
+      'focused': rgba(223, 227, 232, .3),
+      'active': rgba(179, 188, 245, .1),
+      'selected': rgba(179, 188, 245, .15),
+      'subdued': rgba(249, 250, 251, 1)
+    )
   )
 );
 
-
 /// Returns the color value for a given color name and group.
 ///
 /// @param {String} $hue - The color's hue.

diff --git a/src/styles/foundation/utilities.scss b/src/styles/foundation/utilities.scss
@@ -94,3 +94,21 @@ $base-font-size: 10px;
 
   @return $output;
 }
+
+// Merge multiple maps into one.
+// @param {Map} $map - Initial default map.
+// @param {ArgList} $maps - Other maps to merge.
+// @return {Map} The final merged map.
+@function map-extend($map, $maps...) {
+  @for $i from 1 through length($maps) {
+    @each $key, $value in nth($maps, $i) {
+      $map: map-merge($map,  ($key: $value));
+
+      @if (type-of($value) == map) and (type-of(map-get($map, $key)) == map) {
+        $value: map-extend(map-get($map, $key), $value);
+      }
+    }
+  }
+
+  @return $map;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -75,6 +75,10 @@
     mime-types "2.1.12"
     request "2.78.0"
 
+"@shopify/polaris-tokens@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-0.16.0.tgz#f73dd988b61c74a49caa4dd8df90fce990077ede"
+
 "@shopify/react-utilities@2.0.0-beta.9":
   version "2.0.0-beta.9"
   resolved "https://registry.yarnpkg.com/@shopify/react-utilities/-/react-utilities-2.0.0-beta.9.tgz#0b1df35bb7bc0369adc955c6ea59a743bffc1ef1"