🎨 Color Modes

package.json

@@ -40,15 +40,16 @@
     "test-migrate": "script/test-migrate"
   },
   "dependencies": {
-    "@primer/octicons": "^9.1.1"
+    "@primer/octicons": "^9.1.1",
+    "@primer/primitives": "0.0.0-18b6150"
   },
   "devDependencies": {
     "@octokit/rest": "^16.34.0",
     "@storybook/addon-viewport": "5.3.18",
     "@storybook/react": "5.3.18",
-    "autoprefixer": "9.4.7",
+    "autoprefixer": "9.8.6",
     "code-blocks": "^1.1.0",
-    "colorette": "^1.1.0",
+    "colorette": "^1.2.1",
     "css-loader": "1.0.0",
     "cssstats": "3.3.0",
     "details-dialog-element": "^1.4.0",
@@ -62,13 +63,13 @@
     "minimist": "1.2.3",
     "node-fetch": "2.4.0",
     "npm-run-all": "4.1.5",
-    "postcss": "7.0.14",
+    "postcss": "7.0.32",
     "postcss-import": "^12.0.1",
-    "postcss-load-config": "2.0.0",
-    "postcss-loader": "^2.0.6",
+    "postcss-load-config": "2.1.0",
+    "postcss-loader": "^3.0.0",
     "postcss-node-sass": "2.1.8",
-    "postcss-scss": "2.0.0",
-    "postcss-value-parser": "^4.0.2",
+    "postcss-scss": "2.1.1",
+    "postcss-value-parser": "^4.1.0",
     "prop-types": "^15.6.2",
     "semantic-release": "^15.13.27",
     "semver": "5.7.1",

postcss.config.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   parser: 'postcss-scss',
   map: {
@@ -6,7 +8,7 @@ module.exports = {
   },
   plugins: {
     'postcss-node-sass': {
-      includePaths: ['node_modules'],
+      includePaths: [path.join(__dirname, 'node_modules')],
       outputStyle: 'compressed'
     },
     'autoprefixer': {}

script/dist.js

@@ -109,12 +109,12 @@ if (require.main === module) {
 }
 
 function writeVariableData() {
-  const analyzeVariables = require('./analyze-variables')
-  return Promise.all([
-    analyzeVariables('src/support/index.scss'),
-    analyzeVariables('src/marketing/support/index.scss')
-  ]).then(([support, marketing]) => {
-    const data = Object.assign({}, support, marketing)
-    writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
-  })
+  // const analyzeVariables = require('./analyze-variables')
+  // return Promise.all([
+  //   analyzeVariables('src/support/index.scss'),
+  //   analyzeVariables('src/marketing/support/index.scss')
+  // ]).then(([support, marketing]) => {
+  //   const data = Object.assign({}, support, marketing)
+  //   writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
+  // })
 }

src/alerts/flash.scss

@@ -5,7 +5,7 @@
   position: relative;
   // stylelint-disable-next-line primer/spacing
   padding: 20px $spacer-3;
-  color: $text-gray-dark;
+  color: var(--text-primary);
   border-style: $border-style;
   border-width: $border-width;
   border-radius: $border-radius;
@@ -66,48 +66,48 @@
 
 .flash {
   // stylelint-disable-next-line primer/colors
-  background-color: $blue-100;
+  background-color: var(--alert-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: rgba($blue-700, 0.2);
+  border-color: var(--alert-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: rgba($blue-700, 0.6);
+    color: var(--alert-icon);
   }
 }
 
 .flash-warn {
   // stylelint-disable-next-line primer/colors
-  background-color: $yellow-100;
+  background-color: var(--alert-warn-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: rgba($yellow-800, 0.2);
+  border-color: var(--alert-warn-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: rgba($yellow-800, 1);
+    color: var(--alert-warn-icon);
   }
 }
 
 .flash-error {
   // stylelint-disable-next-line primer/colors
-  background-color: #ffe3e6; // custom red
+  background-color: var(--alert-error-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: rgba($red-800, 0.2);
+  border-color: var(--alert-error-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: rgba($red-800, 0.6);
+    color: var(--alert-error-icon);
   }
 }
 
 .flash-success {
-  background-color: $bg-green-light;
+  background-color: var(--alert-success-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: rgba($green-700, 0.2);
+  border-color: var(--alert-success-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: rgba($green-700, 0.8);
+    color: var(--alert-success-icon);
   }
 }
 
@@ -141,5 +141,5 @@
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/colors
-  background-color: $yellow-100;
+  background-color: var(--alert-warn-bg);
 }