From f1c153419e627d6f5a53319618805946edeed24b Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Thu, 30 Jul 2020 11:29:18 -0700 Subject: [PATCH 001/468] Add Primer Primitives and import color modes --- package-lock.json | 5 +++++ package.json | 3 ++- src/core/index.scss | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index f27887f7f9..2028c169eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2679,6 +2679,11 @@ "object-assign": "^4.1.1" } }, + "@primer/primitives": { + "version": "0.0.0-18b6150", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-18b6150.tgz", + "integrity": "sha512-t4RlnEWQxmlZ5//jMCNMSohaVwLjC/NJMRsAiRpcpE5gaA/A5bv+ZC+uqCY+6Igr3Hxjmfzf8XRUvRVfdX///Q==" + }, "@reach/router": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz", diff --git a/package.json b/package.json index ef96458fdb..90f6767b4e 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "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", diff --git a/src/core/index.scss b/src/core/index.scss index ec97269832..00ef7e16cd 100644 --- a/src/core/index.scss +++ b/src/core/index.scss @@ -11,6 +11,9 @@ // Global requirements @import "../support/index.scss"; +// Color modes +@import "../../node_modules/@primer/primitives/dist/scss/modes/_light.scss"; + // Core modules @import "../base/index.scss"; @import "../box/index.scss"; From f79dfb8185efbbc6f871f2624f60857b9ed8ed4b Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 10:34:46 -0700 Subject: [PATCH 002/468] Update some deps --- package-lock.json | 143 ++++++++++++++++++++++------------------------ package.json | 14 ++--- 2 files changed, 75 insertions(+), 82 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2028c169eb..2a011ab2b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5872,23 +5872,48 @@ "dev": true }, "autoprefixer": { - "version": "9.4.7", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.7.tgz", - "integrity": "sha512-qS5wW6aXHkm53Y4z73tFGsUhmZu4aMPV9iHXYlF0c/wxjknXNHuj/1cIQb+6YH692DbJGGWcckAXX+VxKvahMA==", + "version": "9.8.6", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz", + "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==", "dev": true, "requires": { - "browserslist": "^4.4.1", - "caniuse-lite": "^1.0.30000932", + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001109", + "colorette": "^1.2.1", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", - "postcss": "^7.0.14", - "postcss-value-parser": "^3.3.1" + "postcss": "^7.0.32", + "postcss-value-parser": "^4.1.0" }, "dependencies": { - "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "browserslist": { + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz", + "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001111", + "electron-to-chromium": "^1.3.523", + "escalade": "^3.0.2", + "node-releases": "^1.1.60" + } + }, + "caniuse-lite": { + "version": "1.0.30001112", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001112.tgz", + "integrity": "sha512-J05RTQlqsatidif/38aN3PGULCLrg8OYQOlJUKbeYVzC2mGZkZLIztwRlB3MtrfLmawUmjFlNJvy/uhwniIe1Q==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.526", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.526.tgz", + "integrity": "sha512-HiroW5ZbGwgT8kCnoEO8qnGjoTPzJxduvV/Vv/wH63eo2N6Zj3xT5fmmaSPAPUM05iN9/5fIEkIg3owTtV6QZg==", + "dev": true + }, + "node-releases": { + "version": "1.1.60", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz", + "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==", "dev": true } } @@ -7370,9 +7395,9 @@ "dev": true }, "colorette": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz", - "integrity": "sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", + "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==", "dev": true }, "colors": { @@ -9386,6 +9411,12 @@ "es6-symbol": "^3.1.1" } }, + "escalade": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz", + "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==", + "dev": true + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -19367,9 +19398,9 @@ "dev": true }, "postcss": { - "version": "7.0.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", - "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", + "version": "7.0.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", + "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -19479,58 +19510,25 @@ } }, "postcss-load-config": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz", - "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz", + "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==", "dev": true, "requires": { - "cosmiconfig": "^4.0.0", + "cosmiconfig": "^5.0.0", "import-cwd": "^2.0.0" - }, - "dependencies": { - "cosmiconfig": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz", - "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==", - "dev": true, - "requires": { - "is-directory": "^0.3.1", - "js-yaml": "^3.9.0", - "parse-json": "^4.0.0", - "require-from-string": "^2.0.1" - } - } } }, "postcss-loader": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz", - "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz", + "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==", "dev": true, "requires": { "loader-utils": "^1.1.0", - "postcss": "^6.0.0", + "postcss": "^7.0.0", "postcss-load-config": "^2.0.0", - "schema-utils": "^0.4.0" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } + "schema-utils": "^1.0.0" } }, "postcss-markdown": { @@ -19732,12 +19730,12 @@ } }, "postcss-scss": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz", - "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz", + "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==", "dev": true, "requires": { - "postcss": "^7.0.0" + "postcss": "^7.0.6" } }, "postcss-selector-parser": { @@ -19768,9 +19766,9 @@ "dev": true }, "postcss-value-parser": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz", - "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", "dev": true }, "prelude-ls": { @@ -21386,12 +21384,6 @@ "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", "dev": true }, - "require-from-string": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", - "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", - "dev": true - }, "require-main-filename": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", @@ -21665,12 +21657,13 @@ } }, "schema-utils": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz", - "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", "dev": true, "requires": { "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", "ajv-keywords": "^3.1.0" } }, diff --git a/package.json b/package.json index 90f6767b4e..93d5cbb96d 100644 --- a/package.json +++ b/package.json @@ -47,9 +47,9 @@ "@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", @@ -63,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", From 8d98afd79e9665c9cdba093dd5bf67d1dd6c49d1 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 10:39:07 -0700 Subject: [PATCH 003/468] Disable variable analysis during build --- script/dist.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/script/dist.js b/script/dist.js index 0a9b906a15..aeace5e072 100755 --- a/script/dist.js +++ b/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)) + // }) } From b38f131dd36542a6a5ed42fd7ce9e593352bf910 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 10:41:03 -0700 Subject: [PATCH 004/468] Fix PostCSS include path --- postcss.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/postcss.config.js b/postcss.config.js index 01de2b43cb..58918fe559 100644 --- a/postcss.config.js +++ b/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': {} From 3a97b24713cebbb465cf4dbcc5527a90d6ca3bd8 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 10:42:25 -0700 Subject: [PATCH 005/468] Include Primer Primitive color modes --- src/core/index.scss | 1 - src/support/index.scss | 1 + src/support/mixins/modes.scss | 6 ++++++ 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/support/mixins/modes.scss diff --git a/src/core/index.scss b/src/core/index.scss index 00ef7e16cd..8400c2b4cc 100644 --- a/src/core/index.scss +++ b/src/core/index.scss @@ -12,7 +12,6 @@ @import "../support/index.scss"; // Color modes -@import "../../node_modules/@primer/primitives/dist/scss/modes/_light.scss"; // Core modules @import "../base/index.scss"; diff --git a/src/support/index.scss b/src/support/index.scss index 93f9449de9..5dd8ff275b 100644 --- a/src/support/index.scss +++ b/src/support/index.scss @@ -8,4 +8,5 @@ @import "./mixins/typography.scss"; @import "./mixins/layout.scss"; @import "./mixins/buttons.scss"; +@import "./mixins/modes.scss"; @import "./mixins/misc.scss"; diff --git a/src/support/mixins/modes.scss b/src/support/mixins/modes.scss new file mode 100644 index 0000000000..3b954b5851 --- /dev/null +++ b/src/support/mixins/modes.scss @@ -0,0 +1,6 @@ +@import "@primer/primitives/dist/scss/colors/_light.scss"; +// @import "@primer/primitives/dist/scss/colors/_dark.scss"; + +@include primer-colors-light(":root"); +// @include primer-colors-light("[data-color-mode='light']"); +// @include primer-colors-dark("[data-color-mode='dark']"); From d0457baa44c0aaa18cf201d7d9fe10c708a6ee92 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 10:42:40 -0700 Subject: [PATCH 006/468] Convert alerts to use color modes --- src/alerts/flash.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index 41c288ef59..0ef3a082b6 100644 --- a/src/alerts/flash.scss +++ b/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); } From 5daa59dc5926309133d6f79083114a94aac3e976 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 11:24:37 -0700 Subject: [PATCH 007/468] Convert autocomplete to use color modes --- src/autocomplete/autocomplete.scss | 10 +++++----- src/autocomplete/suggester.scss | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index 889e0d4116..b2d9c8c6a5 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -8,7 +8,7 @@ // stylelint-disable-next-line primer/typography font-size: 13px; list-style: none; - background: $bg-white; + background: var(--bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium; @@ -23,22 +23,22 @@ padding: $spacer-1 $spacer-2; overflow: hidden; font-weight: $font-weight-bold; - color: $text-gray-dark; + color: var(--text-primary); text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; - background-color: $bg-white; + background-color: var(--bg-canvas); border: 0; &:hover, &.selected, &[aria-selected=true], &.navigation-focus { - color: $text-white; + color: var(--text-inverse); text-decoration: none; - background-color: $bg-blue; + background-color: var(--bg-selected); // Inherit color on all child elements to ensure enough contrast * { diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 4c084cceb4..343c5fee22 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -11,7 +11,7 @@ margin-top: $spacer-4; list-style: none; cursor: pointer; - background: $bg-white; + background: var(--bg-canvas); border: $border; border-radius: $border-radius; box-shadow: $box-shadow-medium; @@ -20,11 +20,11 @@ display: block; padding: $spacer-1 $spacer-2; font-weight: $font-weight-semibold; - border-bottom: $border-width $border-style $border-gray-light; + border-bottom: $border-width $border-style var(--border-primary-light); small { font-weight: $font-weight-normal; - color: $text-gray; + color: var(--text-secondary); } &:last-child { @@ -41,12 +41,12 @@ &:hover, &[aria-selected="true"], &.navigation-focus { - color: $text-white; + color: var(--text-inverse); text-decoration: none; - background: $bg-blue; + background: var(--bg-selected); small { - color: $text-white; + color: var(--text-inverse); } } } From 7274445f92ef8eeccfbcd6e9b27beb1cd35f6e86 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 11:39:14 -0700 Subject: [PATCH 008/468] Convert avatars to use color modes --- src/avatars/avatar-parent-child.scss | 2 +- src/avatars/avatar-stack.scss | 20 ++++++++++---------- src/avatars/circle-badge.scss | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss index b71be1a398..9370fb553c 100644 --- a/src/avatars/avatar-parent-child.scss +++ b/src/avatars/avatar-parent-child.scss @@ -10,7 +10,7 @@ position: absolute; right: -15%; bottom: -9%; - background-color: $bg-white; // For transparent backgrounds + background-color: var(--bg-canvas); // For transparent backgrounds // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; // stylelint-disable-next-line primer/box-shadow diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss index 909df7d4f0..ed41fa8fd1 100644 --- a/src/avatars/avatar-stack.scss +++ b/src/avatars/avatar-stack.scss @@ -21,7 +21,7 @@ .AvatarStack-body { display: flex; - background: $bg-white; + background: var(--bg-canvas); .avatar { position: relative; @@ -32,8 +32,8 @@ box-sizing: content-box; // stylelint-disable-next-line primer/spacing margin-right: -11px; - background-color: $bg-white; - border-right: $border-width $border-style $border-white; + background-color: var(--bg-canvas); + border-right: $border-width $border-style var(--border-white); // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; transition: margin 0.1s ease-in-out; @@ -81,7 +81,7 @@ .avatar.avatar-more { z-index: 1; margin-right: 0; - background: $bg-gray; + background: var(--bg-secondary); &::before, &::after { @@ -91,19 +91,19 @@ content: ""; // stylelint-disable-next-line primer/borders border-radius: 2px; - outline: $border-width $border-style $white; + outline: $border-width $border-style var(--border-inverse); } &::before { width: 17px; // stylelint-disable-next-line primer/colors - background: $gray-200; + background: var(--avatar-stack-fade-more); } &::after { width: 14px; // stylelint-disable-next-line primer/colors - background: $gray-300; + background: var(--avatar-stack-fade); } } @@ -123,7 +123,7 @@ .avatar.avatar-more { // stylelint-disable-next-line primer/colors - background: $gray-300; + background: var(--avatar-stack-fade); &::before { width: 5px; @@ -131,7 +131,7 @@ &::after { width: 2px; - background: $bg-gray; + background: var(--bg-secondary); } } @@ -140,6 +140,6 @@ // stylelint-disable-next-line primer/spacing margin-left: -11px; border-right: 0; - border-left: $border-width $border-style $border-white; + border-left: $border-width $border-style var(--border-inverse); } } diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss index 8553b3f02f..5629e09930 100644 --- a/src/avatars/circle-badge.scss +++ b/src/avatars/circle-badge.scss @@ -4,7 +4,7 @@ display: flex; align-items: center; justify-content: center; - background-color: $bg-white; + background-color: var(--bg-canvas); border-radius: 50%; box-shadow: $box-shadow-medium; } @@ -46,7 +46,7 @@ width: 100%; content: ""; // stylelint-disable-next-line primer/borders - border-bottom: 2px dashed $border-gray; + border-bottom: 2px dashed var(--border-primary); } .CircleBadge { From 657d84d58a56206ef0f248e7641a7ca3ca99cc24 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 11:47:51 -0700 Subject: [PATCH 009/468] Convert blankslate to use color modes --- src/blankslate/blankslate.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss index e352daac15..86cd82335e 100644 --- a/src/blankslate/blankslate.scss +++ b/src/blankslate/blankslate.scss @@ -8,8 +8,8 @@ // stylelint-disable-next-line primer/spacing padding: 2px 5px 3px; font-size: $h5-size; - background: $bg-white; - border: $border-width $border-style $border-gray-light; + background: var(--bg-canvas); + border: $border-width $border-style var(--border-tertiary); border-radius: $border-radius; } @@ -24,7 +24,7 @@ margin-bottom: $spacer-2; margin-left: $spacer-1; // stylelint-disable-next-line primer/colors - color: lighten($gray-400, 5%); + color: var(--blankslate-icon); } .blankslate-capped { From bc6e04104a543d6992072c83b2d84e2b9bcbd299 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Mon, 10 Aug 2020 12:48:38 -0700 Subject: [PATCH 010/468] Convert (some of) box to use color modes --- src/box/box.scss | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/box/box.scss b/src/box/box.scss index df9cf697a3..11136e846a 100644 --- a/src/box/box.scss +++ b/src/box/box.scss @@ -2,8 +2,10 @@ // Intended to replace simple-box, boxed-group, and table-list .Box { - background-color: $bg-white; - border: $border; + background-color: var(--bg-canvas); + border-color: var(--border-primary); + border-width: $border-width; + border-style: $border-style; border-radius: $border-radius; } @@ -74,8 +76,8 @@ padding: $spacer-3; // stylelint-disable-next-line primer/spacing margin: (-$border-width) (-$border-width) 0; - background-color: $bg-gray; - border-color: $border-color; + background-color: var(--bg-secondary); + border-color: var(--border-primary); border-style: $border-style; border-width: $border-width; border-top-left-radius: $border-radius; @@ -89,7 +91,7 @@ .Box-body { padding: $spacer-3; - border-bottom: $border-width $border-style $border-gray; + border-bottom: $border-width $border-style var(--border-primary); // Ensures bottom-border doesn't poke out when .Box-body used without box-footer &:last-of-type { @@ -106,7 +108,9 @@ // stylelint-disable-next-line primer/spacing margin-top: -1px; list-style-type: none; // To account for applying Box component to a list - border-top: $border; + border-top-width: $border-width; + border-top-style: $border-style; + border-top-color: var(--border-primary); &:first-of-type { border-top-left-radius: $border-radius; @@ -142,12 +146,12 @@ // Row dragging styles &.sortable-chosen { - background-color: $bg-gray-light; + background-color: var(--bg-primary-light); } // Makes dragging row background gray &.sortable-ghost { - background-color: $bg-gray; + background-color: var(--bg-primary); // Hides contents of row while dragging so row looks solid gray .Box-row--drag-hide { @@ -160,7 +164,7 @@ .Box-row--focus-gray { &.navigation-focus { - background-color: $bg-gray; + background-color: var(--bg-primary); } } @@ -172,7 +176,7 @@ .Box-row--hover-gray { &:hover { - background-color: $bg-gray; + background-color: var(--bg-primary); } } @@ -188,11 +192,11 @@ .Box-row-link { @include breakpoint(md) { - color: $text-gray-dark; + color: var(--text-primary); text-decoration: none; &:hover { - color: $text-blue; + color: var(--text-link-primary); text-decoration: none; } @@ -209,7 +213,9 @@ padding: $spacer-3; // stylelint-disable-next-line primer/spacing margin-top: -1px; // prevents double border when used with .Box-body - border-top: $border; + border-top-style: $border-style; + border-top-width: $border-width; + border-top-color: var(--border-primary); } // Option for a box with scrolling content @@ -276,7 +282,7 @@ } .Box-row--gray { - background-color: $bg-gray; + background-color: var(--bg-secondary); } //Box with btn-octicon From cb134ad602ad88696adabbcbfbaa37ac1562dafe Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 9 Sep 2020 13:31:50 -0700 Subject: [PATCH 011/468] Temporarily disable lint --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9ad3402d6c..defef1da4a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -10,8 +10,8 @@ jobs: node-version: 11 - name: install run: npm install - - name: lint - run: script/lint-ci + # - name: lint + # run: script/lint-ci - name: test run: npm test - name: prepublish From 6462393e8d224199fbbaf728ca28a67ac1e5da1e Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 9 Sep 2020 13:33:11 -0700 Subject: [PATCH 012/468] Use primer-next as package name --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2a011ab2b2..7a5d1ce015 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "@primer/css", + "name": "@primer/css-next", "version": "15.0.0", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index 93d5cbb96d..17bd53d240 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@primer/css", + "name": "@primer/css-next", "version": "15.0.0", "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "homepage": "https://primer.style/css", From d2da1dc6f19b25a0ed8c187c833d92de776b9a64 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Wed, 9 Sep 2020 13:41:45 -0700 Subject: [PATCH 013/468] use latest primer/primitives --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a5d1ce015..cbfe38d199 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2680,9 +2680,9 @@ } }, "@primer/primitives": { - "version": "0.0.0-18b6150", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-18b6150.tgz", - "integrity": "sha512-t4RlnEWQxmlZ5//jMCNMSohaVwLjC/NJMRsAiRpcpE5gaA/A5bv+ZC+uqCY+6Igr3Hxjmfzf8XRUvRVfdX///Q==" + "version": "0.0.0-7eb1d66", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-7eb1d66.tgz", + "integrity": "sha512-ID33ftB2RBcCTBDFtilwfte8rHWD/F1Zm4CcfK+0KCPf6kJFEP2gD+oG4kANKl0kSpcM5Xj9mHWuVwoyGCFKlw==" }, "@reach/router": { "version": "1.3.3", diff --git a/package.json b/package.json index 17bd53d240..8507a8af60 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@primer/octicons": "^9.1.1", - "@primer/primitives": "0.0.0-18b6150" + "@primer/primitives": "0.0.0-7eb1d66" }, "devDependencies": { "@octokit/rest": "^16.34.0", From 628a78c58689c0b38377234449b54c9c81e45431 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 15:03:00 +0900 Subject: [PATCH 014/468] npm install @primer/primitives@0.0.0-36490c8 --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index cbfe38d199..f54dc39381 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2680,9 +2680,9 @@ } }, "@primer/primitives": { - "version": "0.0.0-7eb1d66", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-7eb1d66.tgz", - "integrity": "sha512-ID33ftB2RBcCTBDFtilwfte8rHWD/F1Zm4CcfK+0KCPf6kJFEP2gD+oG4kANKl0kSpcM5Xj9mHWuVwoyGCFKlw==" + "version": "0.0.0-36490c8", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-36490c8.tgz", + "integrity": "sha512-ZKew5t90+xtrbsYj5nEeJtSCl6RIcgjPlV2oGoS3HfZgVGRUzViZs6io0bk51GjoaJShu8sYocntqFuKi5PMGw==" }, "@reach/router": { "version": "1.3.3", diff --git a/package.json b/package.json index 8507a8af60..fb1bac68f7 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@primer/octicons": "^9.1.1", - "@primer/primitives": "0.0.0-7eb1d66" + "@primer/primitives": "0.0.0-36490c8" }, "devDependencies": { "@octokit/rest": "^16.34.0", From d5b6bc9ded8c35f817c40b9559114de71e2599e1 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 16:05:32 +0900 Subject: [PATCH 015/468] Enable dark mode --- src/support/mixins/modes.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/support/mixins/modes.scss b/src/support/mixins/modes.scss index 3b954b5851..2783f31c75 100644 --- a/src/support/mixins/modes.scss +++ b/src/support/mixins/modes.scss @@ -1,6 +1,7 @@ @import "@primer/primitives/dist/scss/colors/_light.scss"; -// @import "@primer/primitives/dist/scss/colors/_dark.scss"; +@import "@primer/primitives/dist/scss/colors/_dark.scss"; -@include primer-colors-light(":root"); -// @include primer-colors-light("[data-color-mode='light']"); +// @include primer-colors-light(":root"); +@include primer-colors-dark(":root"); +@include primer-colors-light("[data-color-mode='light']"); // @include primer-colors-dark("[data-color-mode='dark']"); From 2dc73e91b1daf4e8b292fcc351c0427d05494579 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 16:06:47 +0900 Subject: [PATCH 016/468] Use color- type --- src/alerts/flash.scss | 28 ++++++++++++++-------------- src/autocomplete/autocomplete.scss | 10 +++++----- src/autocomplete/suggester.scss | 12 ++++++------ src/avatars/avatar-parent-child.scss | 2 +- src/avatars/avatar-stack.scss | 20 ++++++++++---------- src/avatars/circle-badge.scss | 4 ++-- src/blankslate/blankslate.scss | 6 +++--- src/box/box.scss | 28 ++++++++++++++-------------- 8 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index 0ef3a082b6..e2b84c39c3 100644 --- a/src/alerts/flash.scss +++ b/src/alerts/flash.scss @@ -5,7 +5,7 @@ position: relative; // stylelint-disable-next-line primer/spacing padding: 20px $spacer-3; - color: var(--text-primary); + color: var(--color-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: var(--alert-bg); + background-color: var(--color-alert-bg); // stylelint-disable-next-line primer/borders - border-color: var(--alert-border); + border-color: var(--color-alert-border); .octicon { // stylelint-disable-next-line primer/colors - color: var(--alert-icon); + color: var(--color-alert-icon); } } .flash-warn { // stylelint-disable-next-line primer/colors - background-color: var(--alert-warn-bg); + background-color: var(--color-alert-warn-bg); // stylelint-disable-next-line primer/borders - border-color: var(--alert-warn-border); + border-color: var(--color-alert-warn-border); .octicon { // stylelint-disable-next-line primer/colors - color: var(--alert-warn-icon); + color: var(--color-alert-warn-icon); } } .flash-error { // stylelint-disable-next-line primer/colors - background-color: var(--alert-error-bg); + background-color: var(--color-alert-error-bg); // stylelint-disable-next-line primer/borders - border-color: var(--alert-error-border); + border-color: var(--color-alert-error-border); .octicon { // stylelint-disable-next-line primer/colors - color: var(--alert-error-icon); + color: var(--color-alert-error-icon); } } .flash-success { - background-color: var(--alert-success-bg); + background-color: var(--color-alert-success-bg); // stylelint-disable-next-line primer/borders - border-color: var(--alert-success-border); + border-color: var(--color-alert-success-border); .octicon { // stylelint-disable-next-line primer/colors - color: var(--alert-success-icon); + color: var(--color-alert-success-icon); } } @@ -141,5 +141,5 @@ margin-bottom: 0.8em; font-weight: $font-weight-bold; // stylelint-disable-next-line primer/colors - background-color: var(--alert-warn-bg); + background-color: var(--color-alert-warn-bg); } diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index b2d9c8c6a5..f718b1e31b 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -8,7 +8,7 @@ // stylelint-disable-next-line primer/typography font-size: 13px; list-style: none; - background: var(--bg-canvas); + background: var(--color-bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium; @@ -23,22 +23,22 @@ padding: $spacer-1 $spacer-2; overflow: hidden; font-weight: $font-weight-bold; - color: var(--text-primary); + color: var(--color-text-primary); text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; - background-color: var(--bg-canvas); + background-color: var(--color-bg-canvas); border: 0; &:hover, &.selected, &[aria-selected=true], &.navigation-focus { - color: var(--text-inverse); + color: var(--color-text-inverse); text-decoration: none; - background-color: var(--bg-selected); + background-color: var(--color-bg-selected); // Inherit color on all child elements to ensure enough contrast * { diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 343c5fee22..76d6722798 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -11,7 +11,7 @@ margin-top: $spacer-4; list-style: none; cursor: pointer; - background: var(--bg-canvas); + background: var(--color-bg-canvas); border: $border; border-radius: $border-radius; box-shadow: $box-shadow-medium; @@ -20,11 +20,11 @@ display: block; padding: $spacer-1 $spacer-2; font-weight: $font-weight-semibold; - border-bottom: $border-width $border-style var(--border-primary-light); + border-bottom: $border-width $border-style var(--color-border-primary-light); small { font-weight: $font-weight-normal; - color: var(--text-secondary); + color: var(--color-text-secondary); } &:last-child { @@ -41,12 +41,12 @@ &:hover, &[aria-selected="true"], &.navigation-focus { - color: var(--text-inverse); + color: var(--color-text-inverse); text-decoration: none; - background: var(--bg-selected); + background: var(--color-bg-selected); small { - color: var(--text-inverse); + color: var(--color-text-inverse); } } } diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss index 9370fb553c..e8c140b474 100644 --- a/src/avatars/avatar-parent-child.scss +++ b/src/avatars/avatar-parent-child.scss @@ -10,7 +10,7 @@ position: absolute; right: -15%; bottom: -9%; - background-color: var(--bg-canvas); // For transparent backgrounds + background-color: var(--color-bg-canvas); // For transparent backgrounds // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; // stylelint-disable-next-line primer/box-shadow diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss index ed41fa8fd1..42d2c65109 100644 --- a/src/avatars/avatar-stack.scss +++ b/src/avatars/avatar-stack.scss @@ -21,7 +21,7 @@ .AvatarStack-body { display: flex; - background: var(--bg-canvas); + background: var(--color-bg-canvas); .avatar { position: relative; @@ -32,8 +32,8 @@ box-sizing: content-box; // stylelint-disable-next-line primer/spacing margin-right: -11px; - background-color: var(--bg-canvas); - border-right: $border-width $border-style var(--border-white); + background-color: var(--color-bg-canvas); + border-right: $border-width $border-style var(--color-border-white); // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; transition: margin 0.1s ease-in-out; @@ -81,7 +81,7 @@ .avatar.avatar-more { z-index: 1; margin-right: 0; - background: var(--bg-secondary); + background: var(--color-bg-secondary); &::before, &::after { @@ -91,19 +91,19 @@ content: ""; // stylelint-disable-next-line primer/borders border-radius: 2px; - outline: $border-width $border-style var(--border-inverse); + outline: $border-width $border-style var(--color-border-inverse); } &::before { width: 17px; // stylelint-disable-next-line primer/colors - background: var(--avatar-stack-fade-more); + background: var(--color-avatar-stack-fade-more); } &::after { width: 14px; // stylelint-disable-next-line primer/colors - background: var(--avatar-stack-fade); + background: var(--color-avatar-stack-fade); } } @@ -123,7 +123,7 @@ .avatar.avatar-more { // stylelint-disable-next-line primer/colors - background: var(--avatar-stack-fade); + background: var(--color-avatar-stack-fade); &::before { width: 5px; @@ -131,7 +131,7 @@ &::after { width: 2px; - background: var(--bg-secondary); + background: var(--color-bg-secondary); } } @@ -140,6 +140,6 @@ // stylelint-disable-next-line primer/spacing margin-left: -11px; border-right: 0; - border-left: $border-width $border-style var(--border-inverse); + border-left: $border-width $border-style var(--color-border-inverse); } } diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss index 5629e09930..c6e788a7c2 100644 --- a/src/avatars/circle-badge.scss +++ b/src/avatars/circle-badge.scss @@ -4,7 +4,7 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--bg-canvas); + background-color: var(--color-bg-canvas); border-radius: 50%; box-shadow: $box-shadow-medium; } @@ -46,7 +46,7 @@ width: 100%; content: ""; // stylelint-disable-next-line primer/borders - border-bottom: 2px dashed var(--border-primary); + border-bottom: 2px dashed var(--color-border-primary); } .CircleBadge { diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss index 86cd82335e..df633fb627 100644 --- a/src/blankslate/blankslate.scss +++ b/src/blankslate/blankslate.scss @@ -8,8 +8,8 @@ // stylelint-disable-next-line primer/spacing padding: 2px 5px 3px; font-size: $h5-size; - background: var(--bg-canvas); - border: $border-width $border-style var(--border-tertiary); + background: var(--color-bg-canvas); + border: $border-width $border-style var(--color-border-tertiary); border-radius: $border-radius; } @@ -24,7 +24,7 @@ margin-bottom: $spacer-2; margin-left: $spacer-1; // stylelint-disable-next-line primer/colors - color: var(--blankslate-icon); + color: var(--color-blankslate-icon); } .blankslate-capped { diff --git a/src/box/box.scss b/src/box/box.scss index 11136e846a..c5cccee3c9 100644 --- a/src/box/box.scss +++ b/src/box/box.scss @@ -2,8 +2,8 @@ // Intended to replace simple-box, boxed-group, and table-list .Box { - background-color: var(--bg-canvas); - border-color: var(--border-primary); + background-color: var(--color-bg-canvas); + border-color: var(--color-border-primary); border-width: $border-width; border-style: $border-style; border-radius: $border-radius; @@ -76,8 +76,8 @@ padding: $spacer-3; // stylelint-disable-next-line primer/spacing margin: (-$border-width) (-$border-width) 0; - background-color: var(--bg-secondary); - border-color: var(--border-primary); + background-color: var(--color-bg-secondary); + border-color: var(--color-border-primary); border-style: $border-style; border-width: $border-width; border-top-left-radius: $border-radius; @@ -91,7 +91,7 @@ .Box-body { padding: $spacer-3; - border-bottom: $border-width $border-style var(--border-primary); + border-bottom: $border-width $border-style var(--color-border-primary); // Ensures bottom-border doesn't poke out when .Box-body used without box-footer &:last-of-type { @@ -110,7 +110,7 @@ list-style-type: none; // To account for applying Box component to a list border-top-width: $border-width; border-top-style: $border-style; - border-top-color: var(--border-primary); + border-top-color: var(--color-border-primary); &:first-of-type { border-top-left-radius: $border-radius; @@ -146,12 +146,12 @@ // Row dragging styles &.sortable-chosen { - background-color: var(--bg-primary-light); + background-color: var(--color-bg-primary-light); } // Makes dragging row background gray &.sortable-ghost { - background-color: var(--bg-primary); + background-color: var(--color-bg-primary); // Hides contents of row while dragging so row looks solid gray .Box-row--drag-hide { @@ -164,7 +164,7 @@ .Box-row--focus-gray { &.navigation-focus { - background-color: var(--bg-primary); + background-color: var(--color-bg-primary); } } @@ -176,7 +176,7 @@ .Box-row--hover-gray { &:hover { - background-color: var(--bg-primary); + background-color: var(--color-bg-primary); } } @@ -192,11 +192,11 @@ .Box-row-link { @include breakpoint(md) { - color: var(--text-primary); + color: var(--color-text-primary); text-decoration: none; &:hover { - color: var(--text-link-primary); + color: var(--color-text-link-primary); text-decoration: none; } @@ -215,7 +215,7 @@ margin-top: -1px; // prevents double border when used with .Box-body border-top-style: $border-style; border-top-width: $border-width; - border-top-color: var(--border-primary); + border-top-color: var(--color-border-primary); } // Option for a box with scrolling content @@ -282,7 +282,7 @@ } .Box-row--gray { - background-color: var(--bg-secondary); + background-color: var(--color-bg-secondary); } //Box with btn-octicon From 164b95ce0459bf3309457f6ad12368860cd17b8a Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 16:07:53 +0900 Subject: [PATCH 017/468] Use color modes for base --- src/base/base.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/base/base.scss b/src/base/base.scss index 381fa89638..795814789f 100644 --- a/src/base/base.scss +++ b/src/base/base.scss @@ -16,12 +16,12 @@ body { font-family: $body-font; font-size: $body-font-size; line-height: $body-line-height; - color: $text-gray-dark; - background-color: $bg-white; + color: var(--color-text-primary); + background-color: var(--color-bg-canvas); } a { - color: $text-blue; + color: var(--color-link-primary); text-decoration: none; &:hover { @@ -45,8 +45,7 @@ hr, overflow: hidden; background: transparent; border: 0; - // stylelint-disable-next-line primer/borders - border-bottom: $border-width $border-style lighten($gray-300, 5%); + border-bottom: $border-width $border-style var(--color-border-secondary); @include clearfix(); } From 72640895b4bb12618213def51a99d1a2af883361 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 16:39:27 +0900 Subject: [PATCH 018/468] Enable nesting of color modes --- src/support/mixins/modes.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/support/mixins/modes.scss b/src/support/mixins/modes.scss index 2783f31c75..c67c2e70de 100644 --- a/src/support/mixins/modes.scss +++ b/src/support/mixins/modes.scss @@ -4,4 +4,12 @@ // @include primer-colors-light(":root"); @include primer-colors-dark(":root"); @include primer-colors-light("[data-color-mode='light']"); -// @include primer-colors-dark("[data-color-mode='dark']"); +@include primer-colors-dark("[data-color-mode='dark']"); + +// Color mode boundaries +// Enables nesting of different color modes + +[data-color-mode] { + color: var(--color-text-primary); + background-color: var(--color-bg-canvas); +} From 6ad00ee0a8ac2103efadad06ee0aeba9dea9afde Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 11 Sep 2020 20:57:43 +0900 Subject: [PATCH 019/468] Move modes from /support to /base support/index.scss gets imported in various places and would spit out the variables many times. --- src/base/index.scss | 1 + src/{support/mixins => base}/modes.scss | 1 + src/support/index.scss | 1 - 3 files changed, 2 insertions(+), 1 deletion(-) rename src/{support/mixins => base}/modes.scss (97%) diff --git a/src/base/index.scss b/src/base/index.scss index 2c7f8b99b2..a176aa11eb 100644 --- a/src/base/index.scss +++ b/src/base/index.scss @@ -1,6 +1,7 @@ @import "../support/index.scss"; @import "./normalize.scss"; +@import "./modes.scss"; @import "./base.scss"; @import "./kbd.scss"; @import "./typography-base.scss"; diff --git a/src/support/mixins/modes.scss b/src/base/modes.scss similarity index 97% rename from src/support/mixins/modes.scss rename to src/base/modes.scss index c67c2e70de..5627a3cc02 100644 --- a/src/support/mixins/modes.scss +++ b/src/base/modes.scss @@ -1,3 +1,4 @@ +// Color modes @import "@primer/primitives/dist/scss/colors/_light.scss"; @import "@primer/primitives/dist/scss/colors/_dark.scss"; diff --git a/src/support/index.scss b/src/support/index.scss index 5dd8ff275b..93f9449de9 100644 --- a/src/support/index.scss +++ b/src/support/index.scss @@ -8,5 +8,4 @@ @import "./mixins/typography.scss"; @import "./mixins/layout.scss"; @import "./mixins/buttons.scss"; -@import "./mixins/modes.scss"; @import "./mixins/misc.scss"; From 5422e23fc5d7fcabc00d36aa64030a1dc737fe94 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 14 Sep 2020 17:48:14 +0900 Subject: [PATCH 020/468] Migrate tooltips --- src/tooltips/tooltips.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index 315f5e44a3..a2e75c788f 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -10,7 +10,7 @@ padding: $em-spacer-5 $em-spacer-6; font: normal normal 11px/1.5 $body-font; -webkit-font-smoothing: subpixel-antialiased; - color: $text-white; + color: var(--color-text-inverse); text-align: center; text-decoration: none; text-shadow: none; @@ -20,7 +20,7 @@ white-space: pre; pointer-events: none; content: attr(aria-label); - background: $bg-black; + background: var(--color-bg-canvas-inverse); border-radius: $border-radius; opacity: 0; } @@ -32,7 +32,7 @@ display: none; width: 0; height: 0; - color: $text-black; + color: var(--color-bg-canvas-inverse); pointer-events: none; content: ""; // stylelint-disable-next-line primer/borders @@ -102,7 +102,7 @@ // stylelint-disable-next-line primer/spacing margin-right: -6px; // stylelint-disable-next-line primer/borders - border-bottom-color: $bg-black; + border-bottom-color: var(--color-bg-canvas-inverse); } } @@ -136,7 +136,7 @@ // stylelint-disable-next-line primer/spacing margin-right: -6px; // stylelint-disable-next-line primer/borders - border-top-color: $bg-black; + border-top-color: var(--color-bg-canvas-inverse); } } @@ -175,7 +175,7 @@ // stylelint-disable-next-line primer/spacing margin-top: -6px; // stylelint-disable-next-line primer/borders - border-left-color: $bg-black; + border-left-color: var(--color-bg-canvas-inverse); } } @@ -196,7 +196,7 @@ // stylelint-disable-next-line primer/spacing margin-top: -6px; // stylelint-disable-next-line primer/borders - border-right-color: $bg-black; + border-right-color: var(--color-bg-canvas-inverse); } } From 8a57739c38d0c62b3512835bf4ec50752bf02791 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 14 Sep 2020 21:39:57 +0900 Subject: [PATCH 021/468] Migrate toasts --- src/toasts/toasts.scss | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index b984577241..39058db354 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -3,11 +3,11 @@ .Toast { display: flex; margin: $spacer-2; - color: $text-black; - background-color: $bg-white; + color: var(--color-text-primary); + background-color: var(--color-bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 0 0 1px $border-color, $box-shadow-large; + box-shadow: inset 0 0 0 1px var(--color-border-primary), $box-shadow-large; @include breakpoint(sm) { width: max-content; @@ -22,8 +22,8 @@ justify-content: center; width: $spacer-3 * 3; flex-shrink: 0; - color: $text-white; - background-color: $bg-blue; + color: var(--color-text-inverse); + background-color: var(--color-bg-info-inverse); border-top-left-radius: inherit; border-bottom-left-radius: inherit; } @@ -40,35 +40,34 @@ &:focus, &:hover { - color: $text-gray; + color: var(--color-text-secondary); outline: none; } &:active { - // stylelint-disable-next-line primer/colors - color: $gray-400; + color: var(--color-text-tertiary); } } // Modifier .Toast--error .Toast-icon { - background-color: $bg-red; + background-color: var(--color-bg-danger-inverse); } .Toast--warning .Toast-icon { color: $text-gray-dark; // stylelint-disable-next-line primer/colors - background-color: $yellow-600; + background-color: var(--color-bg-warning-inverse); } .Toast--success .Toast-icon { - background-color: $bg-green; + background-color: var(--color-bg-success-inverse); } .Toast--loading .Toast-icon { // stylelint-disable-next-line primer/colors - background-color: $gray-600; + background-color: var(--color-toast-ic-bg-loading); } // Animations From 731d30b51ce7e5c1867df1e30319437ca0e9d8f1 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 14 Sep 2020 21:40:11 +0900 Subject: [PATCH 022/468] Migrate timeline --- src/timeline/timeline-item.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss index 6f6ff4da89..fe6d223074 100644 --- a/src/timeline/timeline-item.scss +++ b/src/timeline/timeline-item.scss @@ -14,14 +14,14 @@ width: 2px; content: ""; // stylelint-disable-next-line primer/colors - background-color: $gray-200; + background-color: var(--color-border-primary); } &:target .TimelineItem-badge { // stylelint-disable-next-line primer/borders - border-color: $blue-400; + border-color: var(--color-timeline-target-badge-border); // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 0 0.2em $blue-200; + box-shadow: 0 0 0.2em var(--color-timeline-target-badge-shadow); } } @@ -34,12 +34,12 @@ margin-right: $spacer-2; margin-left: -$spacer-3 + 1; // stylelint-disable-next-line primer/colors - color: $gray-700; + color: var(--color-timeline-text); align-items: center; // stylelint-disable-next-line primer/colors - background-color: $gray-200; + background-color: var(--color-timeline-badge-bg); // stylelint-disable-next-line primer/borders - border: 2px $border-style $border-white; + border: 2px $border-style var(--color-bg-canvas); border-radius: 50%; justify-content: center; flex-shrink: 0; @@ -50,7 +50,7 @@ max-width: 100%; margin-top: $spacer-1; // stylelint-disable-next-line primer/colors - color: $gray-700; + color: var(--color-timeline-text); flex: auto; } @@ -68,10 +68,10 @@ margin-bottom: -$spacer-3; // stylelint-disable-next-line primer/spacing margin-left: -($spacer-6 + $spacer-3); - background-color: $bg-white; + background-color: var(--color-bg-canvas); border: 0; // stylelint-disable-next-line primer/borders - border-top: 4px $border-style $border-color; + border-top: 4px $border-style var(--color-border-primary); } .TimelineItem--condensed { @@ -88,8 +88,8 @@ margin-top: $spacer-2; margin-bottom: $spacer-2; // stylelint-disable-next-line primer/colors - color: $gray-400; - background-color: $bg-white; + color: var(--color-ic-tertiary); + background-color: var(--color-bg-canvas); border: 0; } } From e249de2f9a9ffc8b6bdaa7f60544663abf63a8fd Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 14 Sep 2020 21:46:28 +0900 Subject: [PATCH 023/468] Migrate Subhead --- src/subhead/subhead.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/subhead/subhead.scss b/src/subhead/subhead.scss index 5ab26295f5..6e66f7aecf 100644 --- a/src/subhead/subhead.scss +++ b/src/subhead/subhead.scss @@ -3,7 +3,7 @@ display: flex; padding-bottom: $spacer-2; margin-bottom: $spacer-3; - border-bottom: $border; + border-bottom: $border-width $border-style var(--color-border-primary); flex-flow: row wrap; } @@ -22,13 +22,13 @@ // Make the text bold and red for dangerous content .Subhead-heading--danger { font-weight: $font-weight-bold; - color: $text-red; + color: var(--color-text-danger); } // One-liner of supporting text .Subhead-description { font-size: $body-font-size; - color: $text-gray; + color: var(--color-text-secondary); flex: 1 100%; } From 063dd627f0aa00c12a01713411d4584e03cdc99f Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 09:41:33 +0900 Subject: [PATCH 024/468] Replace $border with var(--color-border-primary) --- src/autocomplete/suggester.scss | 2 +- src/dropdown/dropdown.scss | 4 ++-- src/navigation/menu.scss | 2 +- src/navigation/subnav.scss | 2 +- src/navigation/tabnav.scss | 2 +- src/select-menu/select-menu.scss | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 76d6722798..add4327f68 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -12,7 +12,7 @@ list-style: none; cursor: pointer; background: var(--color-bg-canvas); - border: $border; + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: $box-shadow-medium; diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss index d8c4ce7e64..cb8bd9563a 100644 --- a/src/dropdown/dropdown.scss +++ b/src/dropdown/dropdown.scss @@ -31,7 +31,7 @@ list-style: none; background-color: $bg-white; background-clip: padding-box; - border: $border; + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: $box-shadow-large; @@ -109,7 +109,7 @@ display: block; height: 0; margin: $spacer-2 0; - border-top: $border; + border-top: $border-width $border-style var(--color-border-primary); } .dropdown-header { diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss index 669a8b9c1e..47698f12c2 100644 --- a/src/navigation/menu.scss +++ b/src/navigation/menu.scss @@ -6,7 +6,7 @@ margin-bottom: $spacer-3; list-style: none; background-color: $bg-white; - border: $border; + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; } diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 85ce284303..c5b9d16aa7 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -26,7 +26,7 @@ // stylelint-disable-next-line primer/typography line-height: 20px; color: $text-gray-dark; - border: $border; + border: $border-width $border-style var(--color-border-primary); + .subnav-item { // stylelint-disable-next-line primer/spacing diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss index 986d946bab..1d648ecde6 100644 --- a/src/navigation/tabnav.scss +++ b/src/navigation/tabnav.scss @@ -3,7 +3,7 @@ .tabnav { margin-top: 0; margin-bottom: $spacer-3; - border-bottom: $border; + border-bottom: $border-width $border-style var(--color-border-primary); } .tabnav-tabs { diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index f3264b5ef0..0c78b906fc 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default; max-height: $SelectMenu-max-height; margin: $spacer-2 0 $spacer-3 0; font-size: $font-size-small; - border: $border; + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: $box-shadow-large; animation-name: SelectMenu-modal-animation--sm; From 02a423f5a50138d5f257c09dcf735ab77f98cfde Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 09:46:24 +0900 Subject: [PATCH 025/468] Replace $border-color with var(--color-border-primary) --- src/forms/form-control.scss | 2 +- src/forms/radio-group.scss | 2 +- src/labels/labels.scss | 2 +- src/marketing/type/typography.scss | 2 +- src/navigation/sidenav.scss | 2 +- src/navigation/underline-nav.scss | 2 +- src/pagination/pagination.scss | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index fb0cc9b80d..e8666fce74 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -27,7 +27,7 @@ label { background-color: $bg-white; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. - border: $border-width $border-style $border-color; + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; outline: none; box-shadow: $box-shadow-inset; diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss index 64a5967263..7035e0a43f 100644 --- a/src/forms/radio-group.scss +++ b/src/forms/radio-group.scss @@ -15,7 +15,7 @@ line-height: 20px; // Specifically not inherit our `` default color: $text-gray-dark; cursor: pointer; - border: $border-width $border-style $border-color; + border: $border-width $border-style var(--color-border-primary); :checked + & { position: relative; diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 9ee47093cb..c599897d96 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -11,7 +11,7 @@ .Label { @include labels-base; background-color: transparent !important; // TODO: Remove again - border-color: $border-color; + border-color: var(--color-border-primary); &:hover { text-decoration: none; diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss index 63667fdc05..305951b796 100644 --- a/src/marketing/type/typography.scss +++ b/src/marketing/type/typography.scss @@ -87,7 +87,7 @@ font-size: $h4-size; line-height: 1.4; color: $text-gray; - border-left: 3px solid $border-color; + border-left: 3px solid var(--color-border-primary); @include breakpoint(md) { padding-left: $spacer * 1.5; diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index 44c26417a6..0f835f6a2f 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -25,7 +25,7 @@ &:last-child { // makes sure there is a "bottom border" in case the list is not long enough // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 $border-width 0 $border-color; + box-shadow: 0 $border-width 0 var(--color-border-primary); } // Bar on the left diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index 83b3acdf6b..d8a2e68c2b 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -3,7 +3,7 @@ overflow-x: auto; overflow-y: hidden; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 -1px 0 $border-color; + box-shadow: inset 0 -1px 0 var(--color-border-primary); justify-content: space-between; } diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index cb0cc6b42c..1d99ffd445 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -24,7 +24,7 @@ &:hover, &:focus { text-decoration: none; - border-color: $border-color; + border-color: var(--color-border-primary); outline: 0; transition-duration: 0.1s; } From 9a866c200f4cde295fcf00eda2d260da77c80d8e Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 11:35:39 +0900 Subject: [PATCH 026/468] Replace $box-shadow with --color-shadow --- src/autocomplete/autocomplete.scss | 2 +- src/autocomplete/suggester.scss | 2 +- src/avatars/circle-badge.scss | 2 +- src/buttons/button.scss | 18 +++++++++--------- src/buttons/misc.scss | 4 ++-- src/dropdown/dropdown.scss | 4 ++-- src/forms/form-control.scss | 4 ++-- src/select-menu/select-menu.scss | 2 +- src/toasts/toasts.scss | 2 +- 9 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index f718b1e31b..766c6f8f96 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -11,7 +11,7 @@ background: var(--color-bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium; + box-shadow: inset 0 0 0 1px $border-color, var(--color-shadow-medium); } // One of the items that appears within an autocomplete group diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index add4327f68..be8f19ad14 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -14,7 +14,7 @@ background: var(--color-bg-canvas); border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; - box-shadow: $box-shadow-medium; + box-shadow: var(--color-shadow-medium); li { display: block; diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss index c6e788a7c2..0c994ca173 100644 --- a/src/avatars/circle-badge.scss +++ b/src/avatars/circle-badge.scss @@ -6,7 +6,7 @@ justify-content: center; background-color: var(--color-bg-canvas); border-radius: 50%; - box-shadow: $box-shadow-medium; + box-shadow: var(--color-shadow-medium); } .CircleBadge-icon { diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 07d2a8d282..0259fc1cbd 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -75,7 +75,7 @@ color: $text-gray-dark; background-color: $bg-default; border-color: $border-color-button; - box-shadow: $box-shadow, $box-shadow-highlight; + box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); &:hover, @@ -89,7 +89,7 @@ &.selected, &[aria-selected=true] { background-color: $bg-active; - box-shadow: $box-shadow-inset; + box-shadow: var(--color-shadow-inset); transition: none; } @@ -107,7 +107,7 @@ &.focus { outline: 1px dotted transparent; // Support Firfox custom colors outline-offset: 2px; - box-shadow: $box-shadow-focus; + box-shadow: var(--color-shadow-focus); } } @@ -119,14 +119,14 @@ $bg-active: darken($bg-hover, 2%); $bg-disabled: #94d3a2; // custom green - $shadow: $green-900; - $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); + $shadow-btn-primary-color: $green-900; + $shadow-btn-primary: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); color: $text-white; background-color: $bg-default; // stylelint-disable-next-line primer/borders border-color: rgba($black, 0.15); - box-shadow: $box-shadow; + box-shadow: $shadow-btn-primary; &:hover, &.hover, @@ -139,7 +139,7 @@ &[aria-selected=true] { background-color: $bg-active; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 1px 0 rgba($shadow, 0.2); + box-shadow: inset 0 1px 0 rgba($shadow-btn-primary-color, 0.2); } &:disabled, @@ -150,7 +150,7 @@ background-color: $bg-disabled; // stylelint-disable-next-line primer/borders border-color: rgba($black, 0.1); - box-shadow: $box-shadow; + box-shadow: $shadow-btn-primary; } &:focus, @@ -208,7 +208,7 @@ color: rgba($color, 0.5); background-color: $bg-gray-light; border-color: $border-color-button; - box-shadow: $box-shadow, $box-shadow-highlight; + box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); .Counter { background-color: rgba($color, 0.05); diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 70a9dcf66f..77a030cf56 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -181,7 +181,7 @@ border-left: 0; border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; - box-shadow: $box-shadow, $box-shadow-highlight; + box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); &:hover, &:active { @@ -196,6 +196,6 @@ &:focus { z-index: 1; outline: 0; - box-shadow: $box-shadow-focus; + box-shadow: var(--color-shadow-focus); } } diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss index cb8bd9563a..acfc49beac 100644 --- a/src/dropdown/dropdown.scss +++ b/src/dropdown/dropdown.scss @@ -33,7 +33,7 @@ background-clip: padding-box; border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; - box-shadow: $box-shadow-large; + box-shadow: var(--color-shadow-large); &::before, &::after { @@ -265,7 +265,7 @@ // stylelint-disable-next-line primer/colors background: $gray-800; border-color: $border-gray-darker; - box-shadow: $box-shadow-large; + box-shadow: var(--color-shadow-large); &::before { border-bottom-color: $border-gray-darker; diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index e8666fce74..083607f8a3 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -30,13 +30,13 @@ label { border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; outline: none; - box-shadow: $box-shadow-inset; + box-shadow: var(--color-shadow-inset); &.focus, &:focus { border-color: $border-blue; outline: none; - box-shadow: $box-shadow-focus; + box-shadow: var(--color-shadow-focus); } &[disabled] { diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 0c78b906fc..dd5fd46a82 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -90,7 +90,7 @@ $SelectMenu-max-height: 480px !default; font-size: $font-size-small; border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; - box-shadow: $box-shadow-large; + box-shadow: var(--color-shadow-large); animation-name: SelectMenu-modal-animation--sm; } } diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 39058db354..ee4ce2fc2c 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -7,7 +7,7 @@ background-color: var(--color-bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 0 0 1px var(--color-border-primary), $box-shadow-large; + box-shadow: inset 0 0 0 1px var(--color-border-primary), var(--color-shadow-large); @include breakpoint(sm) { width: max-content; From 4ea334d9de8a3dcee20b969ea05c2e0145316037 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 11:50:57 +0900 Subject: [PATCH 027/468] Replace $border-color-button with var(--color-btn-border) --- src/buttons/button.scss | 6 +++--- src/buttons/misc.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 0259fc1cbd..a18c16b00c 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -74,7 +74,7 @@ color: $text-gray-dark; background-color: $bg-default; - border-color: $border-color-button; + border-color: var(--color-btn-border); box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); @@ -99,7 +99,7 @@ // stylelint-disable-next-line primer/colors color: $gray-400; background-color: $bg-disabled; - border-color: $border-color-button; + border-color: var(--color-btn-border); } // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons @@ -207,7 +207,7 @@ &[aria-disabled=true] { color: rgba($color, 0.5); background-color: $bg-gray-light; - border-color: $border-color-button; + border-color: var(--color-btn-border); box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); .Counter { diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 77a030cf56..645be2be4b 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -177,7 +177,7 @@ color: $text-gray-dark; vertical-align: middle; background-color: $bg-white; - border: $border-width $border-style $border-color-button; + border: $border-width $border-style var(--color-btn-border); border-left: 0; border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; From 0168bea4337bf78c97b779f2907e386b47c187d3 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 11:59:34 +0900 Subject: [PATCH 028/468] Replace $form-control-shadow with var(--color-input-shadow) Also $btn-input-focus-shadow with var(--color-input-shadow-focus) --- src/forms/form-validation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss index a6b49c8b2a..25c76cd96e 100644 --- a/src/forms/form-validation.scss +++ b/src/forms/form-validation.scss @@ -238,7 +238,7 @@ dl.form-group > dd, // TODO: Deprecate &.focused { border-radius: $border-radius; - box-shadow: $form-control-shadow, $btn-input-focus-shadow; + box-shadow: var(--color-input-shadow), var(--color-input-shadow-focus); .form-control { box-shadow: none; From 1546b62112df1dd2ef68843469e9d04c3036e9c3 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 12:12:57 +0900 Subject: [PATCH 029/468] Replace $bg-diffstat with --color-diff --- src/labels/diffstat.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index a8b5976681..cc5569e450 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -22,16 +22,16 @@ } .diffstat-block-deleted { - background-color: $bg-diffstat-deleted; + background-color: var(--color-diff-deletion-bg); outline: 1px dashed transparent; // Support Firfox custom colors } .diffstat-block-added { - background-color: $bg-diffstat-added; + background-color: var(--color-diff-addition-bg); outline: 1px solid transparent; // Support Firfox custom colors } .diffstat-block-neutral { - background-color: $bg-diffstat-neutral; + background-color: var(--color-diff-neutral-bg); outline: 1px dotted transparent; // Support Firfox custom colors } From e1ac61f212e7ef11806f4356ba8bbbdcdb36d98f Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 12:32:05 +0900 Subject: [PATCH 030/468] Replace autocomplete inset shadow --- src/autocomplete/autocomplete.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index 766c6f8f96..7a6f50b27a 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -11,7 +11,7 @@ background: var(--color-bg-canvas); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 0 0 1px $border-color, var(--color-shadow-medium); + box-shadow: inset 0 0 0 1px var(--color-border-primary), var(--color-shadow-medium); } // One of the items that appears within an autocomplete group From 43c136f1547da796ce0eafe4c6876cc04182b7c6 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 12:41:24 +0900 Subject: [PATCH 031/468] Add deprecation warning --- src/support/variables/color-system.scss | 5 +++++ src/support/variables/colors.scss | 7 +++++++ src/support/variables/misc.scss | 19 ++++++++++++++----- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/support/variables/color-system.scss b/src/support/variables/color-system.scss index febc58bb41..997fa61413 100644 --- a/src/support/variables/color-system.scss +++ b/src/support/variables/color-system.scss @@ -1,3 +1,8 @@ +// +// ------------------------ Deprecated ------------------------ +// ------------- Replaced with primer/primitives -------------- +// + // Black based on same hue as $gray-900 $black: #1b1f23 !default; $white: #fff !default; diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss index 362315634e..f7b150ca41 100644 --- a/src/support/variables/colors.scss +++ b/src/support/variables/colors.scss @@ -53,3 +53,10 @@ $text-purple: $purple !default; $text-pink: $pink-500 !default; $text-red: $red-600 !default; $text-yellow: $yellow-800 !default; + +// +// ------------------------ Deprecated ------------------------ +// ------------- Replaced with primer/primitives -------------- +// + +// TBD diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index dd74a8fa69..5ddcb1f19d 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -2,15 +2,27 @@ // Border $border-width: 1px !default; -$border-color: $border-gray !default; $border-style: solid !default; -$border: $border-width $border-color $border-style !default; // Border Radius $border-radius-1: 4px !default; $border-radius-2: 6px !default; $border-radius: $border-radius-2 !default; +// Tooltips +$tooltip-max-width: 250px !default; +$tooltip-delay: 0.4s !default; +$tooltip-duration: 0.1s !default; + +// +// ------------------------ Deprecated ------------------------ +// ------------- Replaced with primer/primitives -------------- +// + +// Border +$border-color: $border-gray !default; +$border: $border-width $border-color $border-style !default; + // Box shadow $box-shadow: 0 1px 0 rgba($black, 0.04) !default; $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default; @@ -30,11 +42,8 @@ $form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Dep $btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus // Tooltips -$tooltip-max-width: 250px !default; $tooltip-background-color: $black !default; $tooltip-text-color: $white !default; -$tooltip-delay: 0.4s !default; -$tooltip-duration: 0.1s !default; // diffstat background colors $bg-diffstat-added: darken($green-400, 5%) !default; From 983968881986daebb730b3dfbfc8bdfeb3805ce0 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 14:04:58 +0900 Subject: [PATCH 032/468] Add v16 migration guide --- MIGRATING.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/MIGRATING.md b/MIGRATING.md index ef419e6e01..7b38141d18 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -1,3 +1,47 @@ +# 16.0.0 +In `v16` we're moving all colors to [primer/primitives](https://github.com/primer/primitives). This lets us use the same Primer colors across different libraries. Primer CSS also switches from using SASS variables for colors to CSS variables. Bellow a migration guide for all the variables: + +### Color scale + +`v15` | `v16` +--- | --- +`$black` | `var(--color-scale-black)` +`$white` | `var(--color-scale-white)` +`$gray-000` | `var(--color-scale-grey-0)` +`$gray-100` | `var(--color-scale-grey-1)` +... | ... +`$pink-800` | `var(--color-scale-pink-8)` +`$pink-900` | `var(--color-scale-pink-9)` + +### Functional colors + +`v15` | `v16` +--- | --- +**Border** | +`$border-color` | `var(--color-border-primary)` +`$border` | `$border-width $border-style var(--color-border-primary)` +**Box Shadow** | +`$box-shadow` | `var(--color-shadow-small)` +`$box-shadow-medium` | `var(--color-shadow-medium)` +`$box-shadow-large` | `var(--color-shadow-large)` +`$box-shadow-extra-large` | `var(--color-shadow-extra-large)` +`$box-shadow-highlight` | `var(--color-shadow-highlight)` +`$box-shadow-inset` | `var(--color-shadow-inset)` +`$box-shadow-focus` | `var(--color-shadow-focus)` +**Buttons** | +`$border-color-button` | `var(--color-btn-border)` +`$btn-active-shadow` | n/a +**Forms** | +`$form-control-shadow` | `var(--color-input-shadow)` +`$btn-input-focus-shadow` | `var(--color-input-shadow-focus)` +**Tooltips** | +`$tooltip-background-color` | n/a +`$tooltip-text-color` | n/a +**Diffstat** | +`$bg-diffstat-added` | `var(--color-diff-addition-bg)` +`$bg-diffstat-deleted` | `var(--color-diff-deletion-bg)` +`$bg-diffstat-neutral` | `var(--color-diff-neutral-bg)` + # 12.0.0 The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app: From 3955686b1b57163f61fde239629a5588f15e0ad1 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 19:18:31 +0900 Subject: [PATCH 033/468] npm install @primer/primitives@0.0.0-d095039 --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index f54dc39381..4e9d89c25a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2680,9 +2680,9 @@ } }, "@primer/primitives": { - "version": "0.0.0-36490c8", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-36490c8.tgz", - "integrity": "sha512-ZKew5t90+xtrbsYj5nEeJtSCl6RIcgjPlV2oGoS3HfZgVGRUzViZs6io0bk51GjoaJShu8sYocntqFuKi5PMGw==" + "version": "0.0.0-d095039", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-d095039.tgz", + "integrity": "sha512-EN6kOOiDi8KC+FdDHCaE5BZsaLxQTCAe1mBnvASLmjNgG0HophzB6KfY+WQ9ZNz+95BjkvQtmMq98k5tNX/XIA==" }, "@reach/router": { "version": "1.3.3", diff --git a/package.json b/package.json index fb1bac68f7..4bdd1feb0a 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@primer/octicons": "^9.1.1", - "@primer/primitives": "0.0.0-36490c8" + "@primer/primitives": "0.0.0-d095039" }, "devDependencies": { "@octokit/rest": "^16.34.0", From f773f35b2765969fb7b4c506bb7668729d52f1a6 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 19:30:16 +0900 Subject: [PATCH 034/468] Replace $text-gray-dark with --color-text-primary --- MIGRATING.md | 2 ++ src/buttons/button.scss | 2 +- src/buttons/misc.scss | 2 +- src/dropdown/dropdown.scss | 2 +- src/forms/form-control.scss | 2 +- src/forms/form-validation.scss | 2 +- src/forms/radio-group.scss | 2 +- src/labels/counters.scss | 2 +- src/labels/labels.scss | 2 +- src/markdown/images.scss | 2 +- src/navigation/sidenav.scss | 4 ++-- src/navigation/subnav.scss | 2 +- src/navigation/tabnav.scss | 2 +- src/pagination/pagination.scss | 2 +- src/select-menu/select-menu.scss | 12 ++++++------ src/support/variables/colors.scss | 4 ++-- src/toasts/toasts.scss | 2 +- 17 files changed, 25 insertions(+), 23 deletions(-) diff --git a/MIGRATING.md b/MIGRATING.md index 7b38141d18..de80722d32 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -17,6 +17,8 @@ In `v16` we're moving all colors to [primer/primitives](https://github.com/prime `v15` | `v16` --- | --- +**Text** | +`$text-gray-dark` | `var(--color-text-primary)` **Border** | `$border-color` | `var(--color-border-primary)` `$border` | `$border-width $border-style var(--color-border-primary)` diff --git a/src/buttons/button.scss b/src/buttons/button.scss index a18c16b00c..854f0d4313 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -72,7 +72,7 @@ $bg-active: darken($bg-hover, 2%); $bg-disabled: $bg-default; - color: $text-gray-dark; + color: var(--color-text-primary); background-color: $bg-default; border-color: var(--color-btn-border); box-shadow: var(--color-shadow-small), var(--color-shadow-highlight); diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 645be2be4b..55e13a63bd 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -174,7 +174,7 @@ font-weight: $font-weight-bold; // stylelint-disable-next-line primer/typography line-height: 20px; - color: $text-gray-dark; + color: var(--color-text-primary); vertical-align: middle; background-color: $bg-white; border: $border-width $border-style var(--color-btn-border); diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss index acfc49beac..5795651e0e 100644 --- a/src/dropdown/dropdown.scss +++ b/src/dropdown/dropdown.scss @@ -75,7 +75,7 @@ display: block; padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3; overflow: hidden; - color: $text-gray-dark; + color: var(--color-text-primary); text-overflow: ellipsis; white-space: nowrap; diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 083607f8a3..5de3efd4f0 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -22,7 +22,7 @@ label { font-size: $body-font-size; // stylelint-disable-next-line primer/typography line-height: 20px; - color: $text-gray-dark; + color: var(--color-text-primary); vertical-align: middle; background-color: $bg-white; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss index 25c76cd96e..b51fde8a5e 100644 --- a/src/forms/form-validation.scss +++ b/src/forms/form-validation.scss @@ -343,7 +343,7 @@ p.explain { color: $text-gray; strong { - color: $text-gray-dark; + color: var(--color-text-primary); } .octicon { diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss index 7035e0a43f..d3f232aa52 100644 --- a/src/forms/radio-group.scss +++ b/src/forms/radio-group.scss @@ -13,7 +13,7 @@ font-size: $body-font-size; // stylelint-disable-next-line primer/typography line-height: 20px; // Specifically not inherit our `` default - color: $text-gray-dark; + color: var(--color-text-primary); cursor: pointer; border: $border-width $border-style var(--color-border-primary); diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 33a113a7c3..7bc1da2474 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -8,7 +8,7 @@ font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: $size-2 - 2px; // remove borders - color: $text-gray-dark; + color: var(--color-text-primary); text-align: center; // stylelint-disable-next-line primer/colors background-color: rgba($gray-300, 0.5); diff --git a/src/labels/labels.scss b/src/labels/labels.scss index c599897d96..18d648d9d3 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -39,7 +39,7 @@ } .Label--gray-darker { - color: $text-gray-dark; + color: var(--color-text-primary); // stylelint-disable-next-line primer/borders border-color: $gray-500; } diff --git a/src/markdown/images.scss b/src/markdown/images.scss index caea5022fb..b737925622 100644 --- a/src/markdown/images.scss +++ b/src/markdown/images.scss @@ -58,7 +58,7 @@ // stylelint-disable-next-line primer/spacing padding: 5px 0 0; clear: both; - color: $text-gray-dark; + color: var(--color-text-primary); } } diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index 0f835f6a2f..a67161b01e 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -93,7 +93,7 @@ .SideNav-subItem:hover, .SideNav-subItem:focus { - color: $text-gray-dark; + color: var(--color-text-primary); text-decoration: none; outline: none; } @@ -101,5 +101,5 @@ .SideNav-subItem[aria-current]:not([aria-current=false]), .SideNav-subItem[aria-selected="true"] { font-weight: $font-weight-semibold; - color: $text-gray-dark; + color: var(--color-text-primary); } diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index c5b9d16aa7..79de20405d 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -25,7 +25,7 @@ font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 20px; - color: $text-gray-dark; + color: var(--color-text-primary); border: $border-width $border-style var(--color-border-primary); + .subnav-item { diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss index 1d648ecde6..b851439dc6 100644 --- a/src/navigation/tabnav.scss +++ b/src/navigation/tabnav.scss @@ -17,7 +17,7 @@ font-size: $h5-size; // stylelint-disable-next-line primer/typography line-height: 23px; - color: $text-gray-dark; + color: var(--color-text-primary); text-decoration: none; background-color: transparent; border: $border-width $border-style transparent; diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 1d99ffd445..605900954d 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -11,7 +11,7 @@ font-style: normal; // stylelint-disable-next-line primer/typography line-height: 20px; - color: $text-gray-dark; + color: var(--color-text-primary); text-align: center; white-space: nowrap; vertical-align: middle; diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index dd5fd46a82..fe13b3ae29 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -188,7 +188,7 @@ $SelectMenu-max-height: 480px !default; width: 100%; padding: $spacer-3; overflow: hidden; - color: $text-gray-dark; + color: var(--color-text-primary); text-align: left; cursor: pointer; background-color: $bg-white; @@ -271,7 +271,7 @@ $SelectMenu-max-height: 480px !default; &[aria-selected="true"] { z-index: 1; // Keeps box-shadow visible when hovering - color: $text-gray-dark; + color: var(--color-text-primary); cursor: default; background-color: $bg-white; // stylelint-disable-next-line primer/box-shadow @@ -389,7 +389,7 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-item[aria-checked=true] { font-weight: $font-weight-semibold; - color: $text-gray-dark; + color: var(--color-text-primary); .SelectMenu-icon--check { visibility: visible; @@ -415,7 +415,7 @@ $SelectMenu-max-height: 480px !default; @media (hover: hover) { body:not(.intent-mouse) .SelectMenu-closeButton:focus, .SelectMenu-closeButton:hover { - color: $text-gray-dark; + color: var(--color-text-primary); } .SelectMenu-closeButton:active { @@ -437,11 +437,11 @@ $SelectMenu-max-height: 480px !default; } .SelectMenu-tab:hover { - color: $text-gray-dark; + color: var(--color-text-primary); } .SelectMenu-tab:not([aria-selected="true"]):active { - color: $text-gray-dark; + color: var(--color-text-primary); background-color: $bg-gray; } } diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss index f7b150ca41..dc6e909573 100644 --- a/src/support/variables/colors.scss +++ b/src/support/variables/colors.scss @@ -43,7 +43,6 @@ $bg-yellow-dark: $yellow-700 !default; $text-black: $black !default; $text-white: $white !default; $text-blue: $blue-500 !default; -$text-gray-dark: $gray-900 !default; $text-gray-light: $gray-500 !default; $text-gray: $gray-600 !default; $text-green: $green-600 !default; @@ -59,4 +58,5 @@ $text-yellow: $yellow-800 !default; // ------------- Replaced with primer/primitives -------------- // -// TBD +// Text colors +$text-gray-dark: $gray-900 !default; diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index ee4ce2fc2c..87abf39555 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -56,7 +56,7 @@ } .Toast--warning .Toast-icon { - color: $text-gray-dark; + color: var(--color-text-primary); // stylelint-disable-next-line primer/colors background-color: var(--color-bg-warning-inverse); } From 2305f944fde4fdcb5f84b7e04725b1e657afeded Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 19:34:12 +0900 Subject: [PATCH 035/468] Replace $text-gray-light with --color-text-tertiary --- MIGRATING.md | 1 + src/buttons/button.scss | 2 +- src/forms/form-control.scss | 2 +- src/labels/counters.scss | 2 +- src/markdown/headings.scss | 2 +- src/markdown/markdown-body.scss | 2 +- src/navigation/sidenav.scss | 2 +- src/navigation/tabnav.scss | 2 +- src/pagination/pagination.scss | 2 +- src/select-menu/select-menu.scss | 8 ++++---- src/support/variables/colors.scss | 2 +- 11 files changed, 14 insertions(+), 13 deletions(-) diff --git a/MIGRATING.md b/MIGRATING.md index de80722d32..33d06337fc 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -19,6 +19,7 @@ In `v16` we're moving all colors to [primer/primitives](https://github.com/prime --- | --- **Text** | `$text-gray-dark` | `var(--color-text-primary)` +`$text-gray-light` | `var(--color-text-tertiary)` **Border** | `$border-color` | `var(--color-border-primary)` `$border` | `$border-width $border-style var(--color-border-primary)` diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 854f0d4313..dd09183243 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -40,7 +40,7 @@ .octicon { margin-right: $spacer-1; - color: $text-gray-light; + color: var(--color-text-tertiary); vertical-align: text-bottom; &:only-child { diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 5de3efd4f0..35abb35d5b 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -90,7 +90,7 @@ textarea.form-control { // Custom styling for HTML5 validation bubbles (WebKit only) ::placeholder { - color: $text-gray-light; + color: var(--color-text-tertiary); opacity: 1; // override opacity in normalize.css } diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 7bc1da2474..c3f56e6a5b 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -27,7 +27,7 @@ } .Counter--gray-light { - color: $text-gray-light; + color: var(--color-text-tertiary); } .Counter--gray { diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss index 26347bb3eb..99d7cfcff4 100644 --- a/src/markdown/headings.scss +++ b/src/markdown/headings.scss @@ -67,6 +67,6 @@ h6 { // stylelint-disable-next-line primer/typography font-size: 0.85em; - color: $text-gray-light; + color: var(--color-text-tertiary); } } diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss index 6581f19b3a..9b12a5a4b6 100644 --- a/src/markdown/markdown-body.scss +++ b/src/markdown/markdown-body.scss @@ -84,7 +84,7 @@ blockquote { // stylelint-disable-next-line primer/spacing padding: 0 1em; - color: $text-gray-light; + color: var(--color-text-tertiary); // stylelint-disable-next-line primer/borders border-left: 0.25em $border-style lighten($gray-300, 5%); diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index a67161b01e..85d82c261d 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -73,7 +73,7 @@ .SideNav-icon { width: 16px; margin-right: $spacer-2; - color: $text-gray-light; + color: var(--color-text-tertiary); } // Sub Nav diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss index b851439dc6..dbab3d5e6b 100644 --- a/src/navigation/tabnav.scss +++ b/src/navigation/tabnav.scss @@ -38,7 +38,7 @@ } &:active { - color: $text-gray-light; + color: var(--color-text-tertiary); } .octicon { diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 605900954d..aac6bfdfaf 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -54,7 +54,7 @@ .gap:hover, .disabled:hover, [aria-disabled=true]:hover { - color: $text-gray-light; + color: var(--color-text-tertiary); cursor: default; border-color: transparent; } diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index fe13b3ae29..758af57065 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -253,7 +253,7 @@ $SelectMenu-max-height: 480px !default; padding: $spacer-2 $spacer-3; font-size: $font-size-small; font-weight: $font-weight-semibold; - color: $text-gray-light; + color: var(--color-text-tertiary); text-align: center; background-color: transparent; border: 0; @@ -316,7 +316,7 @@ $SelectMenu-max-height: 480px !default; margin: 0; font-size: $font-size-small; font-weight: $font-weight-semibold; - color: $text-gray-light; + color: var(--color-text-tertiary); background-color: $bg-gray; border-bottom: $border-width $border-style $border-gray-light; @@ -339,7 +339,7 @@ $SelectMenu-max-height: 480px !default; z-index: 0; // Avoid top border from getting covered by the negative margin of the list padding: $spacer-2 $spacer-3; font-size: $font-size-small; - color: $text-gray-light; + color: var(--color-text-tertiary); text-align: center; border-top: $border-width $border-style $border-gray-light; @@ -404,7 +404,7 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-item:disabled, .SelectMenu-item[aria-disabled=true] { - color: $text-gray-light; + color: var(--color-text-tertiary); pointer-events: none; } diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss index dc6e909573..3fd602cf7c 100644 --- a/src/support/variables/colors.scss +++ b/src/support/variables/colors.scss @@ -43,7 +43,6 @@ $bg-yellow-dark: $yellow-700 !default; $text-black: $black !default; $text-white: $white !default; $text-blue: $blue-500 !default; -$text-gray-light: $gray-500 !default; $text-gray: $gray-600 !default; $text-green: $green-600 !default; $text-orange: $orange-900 !default; @@ -60,3 +59,4 @@ $text-yellow: $yellow-800 !default; // Text colors $text-gray-dark: $gray-900 !default; +$text-gray-light: $gray-500 !default; From 5388d1f6379722b53316646f1a6b12a53632408e Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 15 Sep 2020 19:37:39 +0900 Subject: [PATCH 036/468] Replace $text-gray with --color-text-secondary --- MIGRATING.md | 1 + src/breadcrumb/breadcrumb.scss | 2 +- src/buttons/misc.scss | 2 +- src/dropdown/dropdown.scss | 2 +- src/forms/form-control.scss | 4 ++-- src/forms/form-group.scss | 2 +- src/forms/form-validation.scss | 8 ++++---- src/labels/diffstat.scss | 2 +- src/labels/labels.scss | 2 +- src/marketing/type/typography.scss | 2 +- src/navigation/filter-list.scss | 4 ++-- src/navigation/subnav.scss | 2 +- src/navigation/tabnav.scss | 4 ++-- src/navigation/underline-nav.scss | 2 +- src/select-menu/select-menu.scss | 2 +- src/support/variables/colors.scss | 2 +- 16 files changed, 22 insertions(+), 21 deletions(-) diff --git a/MIGRATING.md b/MIGRATING.md index 33d06337fc..66ec2f6c7c 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -19,6 +19,7 @@ In `v16` we're moving all colors to [primer/primitives](https://github.com/prime --- | --- **Text** | `$text-gray-dark` | `var(--color-text-primary)` +`$text-gray` | `var(--color-text-secondary)` `$text-gray-light` | `var(--color-text-tertiary)` **Border** | `$border-color` | `var(--color-border-primary)` diff --git a/src/breadcrumb/breadcrumb.scss b/src/breadcrumb/breadcrumb.scss index 8986d6f9ea..98da784dd7 100644 --- a/src/breadcrumb/breadcrumb.scss +++ b/src/breadcrumb/breadcrumb.scss @@ -20,7 +20,7 @@ .breadcrumb-item-selected, .breadcrumb-item[aria-current]:not([aria-current=false]) { - color: $text-gray; + color: var(--color-text-secondary); &::after { content: none; diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 55e13a63bd..3de4878d55 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -65,7 +65,7 @@ // stylelint-disable-next-line primer/spacing margin-left: 5px; line-height: $lh-condensed-ultra; - color: $text-gray; + color: var(--color-text-secondary); vertical-align: middle; // For ` + + + +
+ + + +
+ + + +
+ + + +
+ +
+ +
+ +
+ + + +
+ +
Flash alert
+ +
+ +
+
+ + + + Header + +
+
+ + + +
+ + + - + Icon + +
+ +1.5K Counter + +
+ +Label +Danger +Success +Info + +
+IssueLabel +IssueLabel
-20px - -Label -IssueLabel -1.5K +Default + + + + Open + + + + + Closed +
-24px - -Label -IssueLabel -State + + + +
+ +
-28px - - - - +
-32px - - - - -