diff --git a/package-lock.json b/package-lock.json index 57772ad..ab021f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@primer/primitives": { - "version": "0.0.0-2020111574337", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-2020111574337.tgz", - "integrity": "sha512-sfLz+ibw9QEXQVH0G8x40cRzq566p6t0hVTqog7eVQx5wzh7jptrhtKAeuMfjTGN7Iyxfht/Am8OC/MGE5vRBw==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-2.0.1.tgz", + "integrity": "sha512-1zMGwqAfeTU3bOcsxzVgJlCPKTeDtDIP3h+Hm7qTvU0ez/87WZqjLKY6Jl7EBp9WH5VSm+LNwo56KfajInd3/w==", "dev": true }, "@sindresorhus/is": { @@ -213,15 +213,6 @@ "readdirp": "~3.4.0" } }, - "chroma-js": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.0.tgz", - "integrity": "sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==", - "dev": true, - "requires": { - "cross-env": "^6.0.3" - } - }, "ci-info": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", @@ -243,6 +234,33 @@ "mimic-response": "^1.0.0" } }, + "color": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", + "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", + "dev": true, + "requires": { + "color-convert": "^1.9.1", + "color-string": "^1.5.2" + }, + "dependencies": { + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + } + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -258,6 +276,16 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "color-string": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", + "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "dev": true, + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -278,26 +306,6 @@ "xdg-basedir": "^4.0.0" } }, - "cross-env": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz", - "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.0" - } - }, - "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, "crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -480,6 +488,12 @@ "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true }, + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true + }, "is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -565,12 +579,6 @@ "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==", "dev": true }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, "json-buffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", @@ -719,12 +727,6 @@ } } }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, "picomatch": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", @@ -833,27 +835,21 @@ } } }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", "dev": true }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "dev": true, + "requires": { + "is-arrayish": "^0.3.1" + } + }, "string-width": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", @@ -1028,15 +1024,6 @@ "prepend-http": "^2.0.0" } }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, "widest-line": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz", diff --git a/package.json b/package.json index ab68b44..db77a96 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,7 @@ "theme", "github", "light", - "dark", - "dimmed" + "dark" ], "contributes": { "themes": [ @@ -46,8 +45,8 @@ ] }, "devDependencies": { - "@primer/primitives": "0.0.0-2020111574337", - "chroma-js": "^2.1.0", + "@primer/primitives": "^2.0.1", + "color": "^3.1.2", "nodemon": "^2.0.3" }, "scripts": { diff --git a/src/colors.js b/src/colors.js deleted file mode 100644 index 8c93cf7..0000000 --- a/src/colors.js +++ /dev/null @@ -1,17 +0,0 @@ -const lightColors = require("@primer/primitives/dist/json/colors/light.json"); -const darkColors = require("@primer/primitives/dist/json/colors/dark.json"); -const dimmedColors = require("@primer/primitives/dist/json/colors/dimmed.json"); - -function getColors(theme) { - if (theme === "light") { - return lightColors; - } else if (theme === "dark") { - return darkColors; - } else if (theme === "dimmed") { - return dimmedColors; - } -} - -module.exports = { - getColors, -}; diff --git a/src/index.js b/src/index.js index 3e912e5..fa99a5d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,24 +2,18 @@ const fs = require("fs").promises; const getTheme = require("./theme"); const lightTheme = getTheme({ - theme: "light", + style: "light", name: "GitHub Light", }); const darkTheme = getTheme({ - theme: "dark", + style: "dark", name: "GitHub Dark", }); -// const dimmedTheme = getTheme({ -// theme: "dimmed", -// name: "GitHub Dimmed", -// }); - fs.mkdir("./themes", { recursive: true }) .then(() => Promise.all([ fs.writeFile("./themes/light.json", JSON.stringify(lightTheme, null, 2)), fs.writeFile("./themes/dark.json", JSON.stringify(darkTheme, null, 2)), - // fs.writeFile("./themes/dimmed.json", JSON.stringify(dimmedTheme, null, 2)), ])) .catch(() => process.exit(1)) diff --git a/src/primer.js b/src/primer.js new file mode 100644 index 0000000..89a7d63 --- /dev/null +++ b/src/primer.js @@ -0,0 +1,24 @@ +const { colors } = require("@primer/primitives"); + +function getColors(style) { + if (style === "dark") { + /* The array of light to dark colors are reversed to auto-generate dark theme */ + const darkColors = {}; + Object.entries(colors).forEach(([name, val]) => { + if (name === "black") { + darkColors.white = val; + } else if (name === "white") { + darkColors.black = val; + } else { + darkColors[name] = [...val].reverse(); + } + }); + return darkColors; + } else { + return colors; + } +} + +module.exports = { + getColors, +}; diff --git a/src/process.js b/src/process.js new file mode 100644 index 0000000..c3c2add --- /dev/null +++ b/src/process.js @@ -0,0 +1,22 @@ +const Color = require("color"); + +/* + * Generate color variant by inverting + * luminance in the HSL representation + */ +function getVariant(hex, style) { + if (style === "dark") { + const c = Color(hex); + return c + .hsl() + .lightness(100 - c.lightness()) + .hex() + .toLowerCase(); + } else { + return hex; + } +} + +module.exports = { + getVariant, +}; diff --git a/src/theme.js b/src/theme.js index dd7b51e..fb89249 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,213 +1,207 @@ -const chroma = require("chroma-js"); -const { getColors } = require("./colors"); +const { getVariant } = require("./process"); +const { getColors } = require("./primer"); -// Choosing colors -// There are two ways to define what color is used: +function getTheme({ style, name }) { + // Usage: `auto('pink')` + const auto = (hex) => getVariant(hex, style); -// 1. Color scale from primer/primitives. -// e.g. "textLink.foreground": themes({ light: scale.blue[5], dark: scale.blue[2], dimmed: scale.blue[3] }), -// 2. Hex value: All themes will use this scale. Only use for exceptions -// e.g. "textLink.foreground": "#fff", + // Usage: `pick({ light: "lightblue", dark: "darkblue" })` + const pick = (options) => options[style]; -function getTheme({ theme, name }) { - // Usage: themes({ light: "lightblue", dark: "darkblue", dimmed: "royalblue" }) - const themes = (options) => options[theme]; - // Usage: color.text.primary - const color = getColors(theme); - // Usage: scale.blue[6] - const scale = color.scale; + const primer = getColors(style); - const editorForeground = themes({ light: color.text.primary, dark: color.text.primary, dimmed: scale.gray[0] }); + const workbenchForeground = pick({ light: primer.gray[8], dark: primer.gray[7] }); + const editorForeground = pick({ light: primer.gray[9], dark: primer.gray[7] }); return { name: name, colors: { - focusBorder : color.state.focus.border, - foreground : color.text.primary, - descriptionForeground: color.text.tertiary, - errorForeground : color.text.danger, + focusBorder: pick({ light: primer.blue[4], dark: primer.blue[3] }), + foreground: pick({ light: primer.gray[7], dark: primer.gray[6] }), + descriptionForeground: primer.gray[5], + errorForeground: primer.red[6], - "textLink.foreground" : color.text.link, - "textLink.activeForeground": color.text.link, - "textBlockQuote.background": color.bg.canvasInset, - "textBlockQuote.border" : color.markdown.blockquoteBorder, - "textCodeBlock.background" : chroma(color.markdown.codeBg).hex(), - "textPreformat.foreground" : color.text.secondary, - "textSeparator.foreground" : color.border.secondary, + "textLink.foreground": pick({ light: primer.blue[5], dark: primer.blue[6] }), + "textLink.activeForeground": pick({ light: primer.blue[6], dark: primer.blue[7] }), + "textBlockQuote.background": primer.gray[0], + "textBlockQuote.border": primer.gray[2], + "textCodeBlock.background": primer.gray[1], + "textPreformat.foreground": primer.gray[6], + "textSeparator.foreground": primer.gray[3], - "button.background" : color.btn.primary.bg, - "button.foreground" : color.btn.primary.text, - "button.hoverBackground": color.btn.primary.hoverBg, + "button.background": pick({ light: "#159739", dark: primer.green[2] }), + "button.foreground": pick({ light: primer.white, dark: primer.green[8] }), + "button.hoverBackground": pick({ light: "#138934", dark: primer.green[3] }), - "checkbox.background": color.bg.tertiary, - "checkbox.border" : color.border.primary, + "checkbox.background": pick({ light: primer.gray[0], dark: primer.gray[2] }), + "checkbox.border": pick({ light: primer.gray[3], dark: primer.white }), - "dropdown.background" : color.bg.overlay, - "dropdown.border" : color.border.overlay, - "dropdown.foreground" : color.text.primary, - "dropdown.listBackground": color.bg.overlay, + "dropdown.background": pick({ light: primer.gray[0], dark: primer.gray[1] }), + "dropdown.border": pick({ light: primer.gray[2], dark: primer.white }), + "dropdown.foreground": workbenchForeground, + "dropdown.listBackground": pick({ light: primer.white, dark: primer.gray[0] }), - "input.background" : color.input.bg, - "input.border" : color.input.border, - "input.foreground" : color.text.primary, - "input.placeholderForeground": color.text.placeholder, + "input.background": pick({ light: primer.gray[0], dark: primer.gray[1] }), + "input.border": pick({ light: primer.gray[2], dark: primer.white }), + "input.foreground": workbenchForeground, + "input.placeholderForeground": pick({ light: primer.gray[4], dark: primer.gray[5] }), - "badge.foreground": themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), - "badge.background": themes({ light: scale.blue[1], dark: scale.blue[7], dimmed: scale.blue[7] }), + "badge.foreground": pick({ light: primer.blue[6], dark: primer.blue[7] }), + "badge.background": pick({ light: primer.blue[1], dark: primer.blue[2] }), - "progressBar.background": themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }), + "progressBar.background": primer.blue[4], - "titleBar.activeForeground" : color.text.secondary, - "titleBar.activeBackground" : color.bg.canvas, - "titleBar.inactiveForeground": color.text.tertiary, - "titleBar.inactiveBackground": color.bg.canvasInset, - "titleBar.border" : color.border.primary, + "titleBar.activeForeground": workbenchForeground, + "titleBar.activeBackground": pick({ light: primer.white, dark: primer.gray[0] }), + "titleBar.inactiveForeground": primer.gray[5], + "titleBar.inactiveBackground": pick({ light: primer.gray[1], dark: "#1f2428" }), + "titleBar.border": pick({ light: primer.gray[2], dark: primer.white }), - "activityBar.foreground" : color.text.primary, - "activityBar.inactiveForeground": color.text.tertiary, - "activityBar.background" : color.bg.canvas, - "activityBarBadge.foreground" : scale.white, - "activityBarBadge.background" : themes({ light: scale.blue[4], dark: scale.blue[5], dimmed: scale.blue[5] }), - "activityBar.activeBorder" : "#f9826c", - "activityBar.border" : color.border.primary, + "activityBar.foreground": workbenchForeground, + "activityBar.inactiveForeground": primer.gray[4], + "activityBar.background": pick({ light: primer.white, dark: primer.gray[0] }), + "activityBarBadge.foreground": pick({ light: primer.white, dark: primer.black }), + "activityBarBadge.background": pick({ light: primer.blue[4], dark: primer.blue[4] }), + "activityBar.activeBorder": "#f9826c", + "activityBar.border": pick({ light: primer.gray[2], dark: primer.white }), - "sideBar.foreground" : color.text.secondary, - "sideBar.background" : color.bg.canvasInset, - "sideBar.border" : color.border.primary, - "sideBarTitle.foreground" : color.text.primary, - "sideBarSectionHeader.foreground": color.text.primary, - "sideBarSectionHeader.background": color.bg.canvasInset, - "sideBarSectionHeader.border" : color.border.primary, + "sideBar.foreground": primer.gray[6], + "sideBar.background": pick({ light: primer.gray[1], dark: "#1f2428" }), + "sideBar.border": pick({ light: primer.gray[2], dark: primer.white }), + "sideBarTitle.foreground": workbenchForeground, + "sideBarSectionHeader.foreground": workbenchForeground, + "sideBarSectionHeader.background": pick({ light: primer.gray[1], dark: "#1f2428" }), + "sideBarSectionHeader.border": pick({ light: primer.gray[2], dark: primer.white }), - "list.hoverForeground" : color.text.secondary, - "list.inactiveSelectionForeground": color.text.secondary, - "list.activeSelectionForeground" : color.text.secondary, - "list.hoverBackground" : themes({ light: "#ebf0f4", dark: scale.gray[8], dimmed: scale.gray[8] }), - "list.inactiveSelectionBackground": themes({ light: "#e8eaed", dark: scale.gray[8], dimmed: scale.gray[8] }), - "list.activeSelectionBackground" : themes({ light: "#e2e5e9", dark: scale.gray[7], dimmed: scale.gray[7] }), - "list.inactiveFocusBackground" : themes({ light: scale.blue[1], dark: scale.blue[9], dimmed: scale.blue[9] }), - "list.focusBackground" : themes({ light: "#cce5ff", dark: scale.blue[8], dimmed: scale.blue[8] }), + "list.hoverForeground": workbenchForeground, + "list.inactiveSelectionForeground": workbenchForeground, + "list.activeSelectionForeground": workbenchForeground, + "list.hoverBackground": pick({ light: "#ebf0f4", dark: "#282e34" }), + "list.inactiveSelectionBackground": pick({ light: "#e8eaed", dark: "#282e34" }), + "list.activeSelectionBackground": pick({ light: "#e2e5e9", dark: "#39414a" }), + "list.inactiveFocusBackground": pick({ light: primer.blue[1], dark: "#1d2d3e" }), + "list.focusBackground": pick({ light: "#cce5ff", dark: primer.blue[2] }), - "tree.indentGuidesStroke": color.border.secondary, + "tree.indentGuidesStroke": pick({ light: primer.gray[2], dark: primer.gray[1] }), - "notificationCenterHeader.foreground": themes({ light: scale.gray[5], dark: scale.gray[4], dimmed: scale.gray[4] }), - "notificationCenterHeader.background": themes({ light: scale.gray[2], dark: scale.gray[9], dimmed: scale.gray[9] }), - "notifications.foreground" : color.text.secondary, - "notifications.background" : themes({ light: scale.gray[0], dark: scale.gray[8], dimmed: scale.gray[8] }), - "notifications.border" : color.border.primary, - "notificationsErrorIcon.foreground" : themes({ light: scale.red[5], dark: scale.red[4], dimmed: scale.red[4] }), - "notificationsWarningIcon.foreground": themes({ light: scale.orange[6], dark: scale.orange[3], dimmed: scale.orange[3] }), - "notificationsInfoIcon.foreground" : themes({ light: scale.blue[6], dark: scale.blue[3], dimmed: scale.blue[3] }), + "notificationCenterHeader.foreground": primer.gray[5], + "notificationCenterHeader.background": pick({ light: primer.gray[2], dark: primer.gray[0] }), + "notifications.foreground": workbenchForeground, + "notifications.background": pick({ light: primer.gray[0], dark: primer.gray[1] }), + "notifications.border": pick({ light: primer.gray[2], dark: primer.white }), + "notificationsErrorIcon.foreground": primer.red[5], + "notificationsWarningIcon.foreground": primer.orange[6], + "notificationsInfoIcon.foreground": primer.blue[6], - "pickerGroup.border" : themes({ light: scale.gray[2], dark: scale.gray[7], dimmed: scale.gray[7] }), - "pickerGroup.foreground": color.text.secondary, - "quickInput.background" : themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }), - "quickInput.foreground" : color.text.secondary, + "pickerGroup.border": primer.gray[2], + "pickerGroup.foreground": workbenchForeground, + "quickInput.background": primer.gray[0], + "quickInput.foreground": workbenchForeground, - "statusBar.foreground" : color.text.secondary, - "statusBar.background" : color.bg.canvas, - "statusBar.border" : color.border.primary, - "statusBar.noFolderBackground" : color.bg.canvas, - "statusBar.debuggingBackground" : color.bg.dangerInverse, - "statusBar.debuggingForeground" : scale.white, - "statusBarItem.prominentBackground": color.bg.tertiary, + "statusBar.foreground": primer.gray[6], + "statusBar.background": pick({ light: primer.white, dark: primer.gray[0] }), + "statusBar.border": pick({ light: primer.gray[2], dark: primer.white }), + "statusBar.noFolderBackground": pick({ light: primer.white, dark: primer.gray[0] }), + "statusBar.debuggingBackground": auto("#f9826c"), + "statusBar.debuggingForeground": pick({ light: primer.white, dark: primer.black }), + "statusBarItem.prominentBackground": pick({ light: "#e8eaed", dark: "#282e34" }), - "editorGroupHeader.tabsBackground": color.bg.canvasInset, - "editorGroupHeader.tabsBorder" : color.border.primary, - "editorGroup.border" : color.border.primary, + "editorGroupHeader.tabsBackground": pick({ light: primer.gray[1], dark: "#1f2428" }), + "editorGroupHeader.tabsBorder": pick({ light: primer.gray[2], dark: primer.white }), + "editorGroup.border": pick({ light: primer.gray[2], dark: primer.white }), - "tab.activeForeground" : color.text.primary, - "tab.inactiveForeground" : color.text.tertiary, - "tab.inactiveBackground" : color.bg.canvasInset, - "tab.activeBackground" : color.bg.canvas, - "tab.hoverBackground" : color.bg.canvas, - "tab.unfocusedHoverBackground": color.state.hover.secondaryBg, - "tab.border" : color.border.primary, - "tab.unfocusedActiveBorderTop": color.border.primary, - "tab.activeBorder" : color.bg.canvas, - "tab.unfocusedActiveBorder" : color.bg.canvas, - "tab.activeBorderTop" : "#f9826c", + "tab.activeForeground": workbenchForeground, + "tab.inactiveForeground": primer.gray[5], + "tab.inactiveBackground": pick({ light: primer.gray[1], dark: "#1f2428" }), + "tab.activeBackground": pick({ light: primer.white, dark: primer.gray[0] }), + "tab.hoverBackground": pick({ light: primer.white, dark: primer.gray[0] }), + "tab.unfocusedHoverBackground": pick({ light: primer.white, dark: primer.gray[0] }), + "tab.border": pick({ light: primer.gray[2], dark: primer.white }), + "tab.unfocusedActiveBorderTop": pick({ light: primer.gray[2], dark: primer.white }), + "tab.activeBorder": pick({ light: primer.white, dark: primer.gray[0] }), + "tab.unfocusedActiveBorder": pick({ light: primer.white, dark: primer.gray[0] }), + "tab.activeBorderTop": "#f9826c", - "breadcrumb.foreground" : color.text.tertiary, - "breadcrumb.focusForeground" : color.text.primary, - "breadcrumb.activeSelectionForeground": color.text.secondary, - "breadcrumbPicker.background" : color.bg.overlay, + "breadcrumb.foreground": primer.gray[5], + "breadcrumb.focusForeground": workbenchForeground, + "breadcrumb.activeSelectionForeground": primer.gray[6], + "breadcrumbPicker.background": pick({ light: primer.gray[0], dark: "#2b3036" }), - "editor.foreground" : editorForeground, - "editor.background" : color.bg.canvas, - "editorWidget.background" : color.bg.overlay, - "editor.foldBackground" : color.bg.canvasInset, - "editor.lineHighlightBackground" : color.codemirror.activelineBg, - "editorLineNumber.foreground" : color.codemirror.linenumberText, - "editorLineNumber.activeForeground" : color.text.primary, - "editorIndentGuide.background" : color.border.secondary, - "editorIndentGuide.activeBackground": color.border.primary, - "editorWhitespace.foreground" : color.border.tertiary, - "editorCursor.foreground" : themes({ light: scale.blue[7], dark: scale.blue[2], dimmed: scale.blue[2] }), + "editor.foreground": editorForeground, + "editor.background": pick({ light: primer.white, dark: primer.gray[0] }), + "editorWidget.background": pick({ light: primer.gray[1], dark: "#1f2428" }), + "editor.foldBackground": pick({ light: primer.gray[0], dark: "#282e33" }), + "editor.lineHighlightBackground": pick({ light: primer.gray[1], dark: "#2b3036" }), + "editorLineNumber.foreground": pick({ light: "#1b1f234d", dark: primer.gray[2] }), + "editorLineNumber.activeForeground": editorForeground, + "editorIndentGuide.background": pick({ light: "#eff2f6", dark: primer.gray[1] }), + "editorIndentGuide.activeBackground": pick({ light: "#d7dbe0", dark: primer.gray[2] }), + "editorWhitespace.foreground": pick({ light: primer.gray[3], dark: primer.gray[2] }), + "editorCursor.foreground": primer.blue[7], - "editor.findMatchBackground" : themes({ light: scale.yellow[4], dark: "#ffd33d44", dimmed: "#ffd33d44" }), - "editor.findMatchHighlightBackground" : themes({ light: "#ffdf5d66", dark: "#ffd33d22", dimmed: "#ffd33d22" }), - "editor.inactiveSelectionBackground" : themes({ light: "#0366d611", dark: "#3392FF22", dimmed: "#3392FF22" }), - "editor.selectionBackground" : themes({ light: "#0366d625", dark: "#3392FF44", dimmed: "#3392FF44" }), - "editor.selectionHighlightBackground" : themes({ light: "#34d05840", dark: "#17E5E633", dimmed: "#17E5E633" }), - "editor.selectionHighlightBorder" : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }), - "editor.wordHighlightBackground" : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }), - "editor.wordHighlightStrongBackground": themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }), - "editor.wordHighlightBorder" : themes({ light: "#24943e99", dark: "#17E5E699", dimmed: "#17E5E699" }), - "editor.wordHighlightStrongBorder" : themes({ light: "#24943e50", dark: "#17E5E666", dimmed: "#17E5E666" }), - "editorBracketMatch.background" : themes({ light: "#34d05840", dark: "#17E5E650", dimmed: "#17E5E650" }), - "editorBracketMatch.border" : themes({ light: "#34d05800", dark: "#17E5E600", dimmed: "#17E5E600" }), + "editor.findMatchBackground": pick({ light: primer.yellow[4], dark: "#ffd33d44" }), + "editor.findMatchHighlightBackground": pick({ light: "#ffdf5d66", dark: "#ffd33d22" }), + "editor.inactiveSelectionBackground": pick({ light: "#0366d611", dark: "#3392FF22" }), + "editor.selectionBackground": pick({ light: "#0366d625", dark: "#3392FF44" }), + "editor.selectionHighlightBackground": pick({ light: "#34d05840", dark: "#17E5E633" }), + "editor.selectionHighlightBorder": pick({ light: "#34d05800", dark: "#17E5E600" }), + "editor.wordHighlightBackground": pick({ light: "#34d05800", dark: "#17E5E600" }), + "editor.wordHighlightStrongBackground": pick({ light: "#34d05800", dark: "#17E5E600" }), + "editor.wordHighlightBorder": pick({ light: "#24943e99", dark: "#17E5E699" }), + "editor.wordHighlightStrongBorder": pick({ light: "#24943e50", dark: "#17E5E666" }), + "editorBracketMatch.background": pick({ light: "#34d05840", dark: "#17E5E650" }), + "editorBracketMatch.border": pick({ light: "#34d05800", dark: "#17E5E600" }), - "editorGutter.modifiedBackground": color.diff.change.border, - "editorGutter.addedBackground" : color.diff.addition.border, - "editorGutter.deletedBackground" : color.diff.deletion.border, + "editorGutter.modifiedBackground": pick({ light: primer.blue[4], dark: primer.blue[5] }), + "editorGutter.addedBackground": pick({ light: primer.green[5], dark: primer.green[4] }), + "editorGutter.deletedBackground": primer.red[5], - "diffEditor.insertedTextBackground": chroma(color.diff.addition.bg).hex(), - "diffEditor.removedTextBackground": chroma(color.diff.deletion.bg).hex(), + "diffEditor.insertedTextBackground": pick({ light: "#34d05822", dark: "#28a74530" }), + "diffEditor.removedTextBackground": pick({ light: "#d73a4922", dark: "#d73a4930" }), - "scrollbar.shadow" : themes({ light: "#6a737d33", dark: "#0008", dimmed: "#0008" }), - "scrollbarSlider.background" : themes({ light: "#959da533", dark: "#484F5833", dimmed: "#484F5833" }), - "scrollbarSlider.hoverBackground" : themes({ light: "#959da544", dark: "#484F5844", dimmed: "#484F5844" }), - "scrollbarSlider.activeBackground": themes({ light: "#959da588", dark: "#484F5888", dimmed: "#484F5888" }), - "editorOverviewRuler.border" : themes({ light: scale.white, dark: scale.black, dimmed: scale.black }), + "scrollbar.shadow": pick({ light: "#6a737d33", dark: "#0008" }), + "scrollbarSlider.background": pick({ light: "#959da533", dark: "#6a737d33" }), + "scrollbarSlider.hoverBackground": pick({ light: "#959da544", dark: "#6a737d44" }), + "scrollbarSlider.activeBackground": pick({ light: "#959da588", dark: "#6a737d88" }), + "editorOverviewRuler.border": primer.white, - "panel.background" : color.bg.canvasInset, - "panel.border" : color.border.primary, - "panelTitle.activeBorder" : "#f9826c", - "panelTitle.activeForeground" : color.text.primary, - "panelTitle.inactiveForeground": color.text.tertiary, - "panelInput.border" : color.border.primary, + "panel.background": pick({ light: primer.gray[1], dark: "#1f2428" }), + "panel.border": pick({ light: primer.gray[2], dark: primer.white }), + "panelTitle.activeBorder": "#f9826c", + "panelTitle.activeForeground": workbenchForeground, + "panelTitle.inactiveForeground": primer.gray[5], + "panelInput.border": pick({ light: primer.gray[2], dark: primer.gray[1] }), - "terminal.foreground": color.text.secondary, + "terminal.foreground": primer.gray[6], - "gitDecoration.addedResourceForeground" : color.diff.addition.text, - "gitDecoration.modifiedResourceForeground" : color.diff.change.text, - "gitDecoration.deletedResourceForeground" : color.diff.deletion.text, - "gitDecoration.untrackedResourceForeground" : color.diff.addition.text, - "gitDecoration.ignoredResourceForeground" : color.text.disabled, - "gitDecoration.conflictingResourceForeground": color.text.warning, - "gitDecoration.submoduleResourceForeground" : color.text.secondary, + "gitDecoration.addedResourceForeground": primer.green[5], + "gitDecoration.modifiedResourceForeground": primer.blue[6], + "gitDecoration.deletedResourceForeground": primer.red[5], + "gitDecoration.untrackedResourceForeground": primer.green[5], + "gitDecoration.ignoredResourceForeground": primer.gray[4], + "gitDecoration.conflictingResourceForeground": primer.orange[6], + "gitDecoration.submoduleResourceForeground": primer.gray[4], - "debugToolBar.background" : color.bg.overlay, - "editor.stackFrameHighlightBackground" : themes({ light: scale.yellow[1], dark: "#a707", dimmed: "#a707" }), - "editor.focusedStackFrameHighlightBackground": themes({ light: scale.yellow[2], dark: "#b808", dimmed: "#b808" }), + "debugToolBar.background": pick({ light: primer.white, dark: "#2b3036" }), + "editor.stackFrameHighlightBackground": pick({ light: primer.yellow[1], dark: "#a707" }), + "editor.focusedStackFrameHighlightBackground": pick({ light: primer.yellow[2], dark: "#b808" }), - "peekViewEditor.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33" }), - "peekViewResult.matchHighlightBackground": themes({ dark: "#ffd33d33", dimmed: "#ffd33d33" }), - "peekViewEditor.background" : themes({ dark: "#0d111788", dimmed: "#0d111788" }), - "peekViewResult.background" : themes({ dark: scale.gray[9], dimmed: scale.gray[9] }), + "peekViewEditor.matchHighlightBackground": pick({ dark: "#ffd33d33" }), + "peekViewResult.matchHighlightBackground": pick({ dark: "#ffd33d33" }), + "peekViewEditor.background": pick({ dark: "#1f242888" }), + "peekViewResult.background": pick({ dark: "#1f2428" }), - "settings.headerForeground" : color.text.secondary, - "settings.modifiedItemIndicator" : color.diff.change.border, - "welcomePage.buttonBackground" : color.btn.bg, - "welcomePage.buttonHoverBackground": color.btn.hoverBg, + "settings.headerForeground": workbenchForeground, + "settings.modifiedItemIndicator": primer.blue[4], + "welcomePage.buttonBackground": primer.gray[1], + "welcomePage.buttonHoverBackground": primer.gray[2], }, semanticHighlighting: true, tokenColors: [ { scope: ["comment", "punctuation.definition.comment", "string.comment"], settings: { - foreground: themes({ light: scale.gray[5], dark: scale.gray[3], dimmed: scale.gray[3] }), + foreground: pick({ light: primer.gray[5], dark: primer.gray[4] }), }, }, { @@ -218,13 +212,13 @@ function getTheme({ theme, name }) { "variable.language", ], settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: ["entity", "entity.name"], settings: { - foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2] }), + foreground: pick({ light: primer.purple[5], dark: primer.purple[6] }), }, }, { @@ -236,19 +230,19 @@ function getTheme({ theme, name }) { { scope: "entity.name.tag", settings: { - foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }), + foreground: primer.green[6], }, }, { scope: "keyword", settings: { - foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }), + foreground: pick({ light: primer.red[5], dark: primer.red[6] }), }, }, { scope: ["storage", "storage.type"], settings: { - foreground: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }), + foreground: pick({ light: primer.red[5], dark: primer.red[6] }), }, }, { @@ -268,25 +262,25 @@ function getTheme({ theme, name }) { "string punctuation.section.embedded source", ], settings: { - foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }), + foreground: pick({ light: primer.blue[8], dark: "#9ecbff" }), }, }, { scope: "support", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "meta.property-name", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "variable", settings: { - foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }), + foreground: primer.orange[6], }, }, { @@ -299,43 +293,43 @@ function getTheme({ theme, name }) { scope: "invalid.broken", settings: { fontStyle: "italic", - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { scope: "invalid.deprecated", settings: { fontStyle: "italic", - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { scope: "invalid.illegal", settings: { fontStyle: "italic", - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { scope: "invalid.unimplemented", settings: { fontStyle: "italic", - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { scope: "carriage-return", settings: { fontStyle: "italic underline", - background: themes({ light: scale.red[5], dark: scale.red[3], dimmed: scale.red[3] }), - foreground: themes({ light: scale.gray[0], dark: scale.gray[9], dimmed: scale.gray[9] }), + background: pick({ light: primer.red[5], dark: primer.red[6] }), + foreground: primer.gray[0], content: "^M", }, }, { scope: "message.error", settings: { - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { @@ -347,13 +341,13 @@ function getTheme({ theme, name }) { { scope: "string variable", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: ["source.regexp", "string.regexp"], settings: { - foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }), + foreground: primer.blue[8], }, }, { @@ -364,51 +358,51 @@ function getTheme({ theme, name }) { "string.regexp string.regexp.arbitrary-repitition", ], settings: { - foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }), + foreground: primer.blue[8], }, }, { scope: "string.regexp constant.character.escape", settings: { fontStyle: "bold", - foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }), + foreground: primer.green[6], }, }, { scope: "support.constant", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "support.variable", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "meta.module-reference", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "punctuation.definition.list.begin.markdown", settings: { - foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }), + foreground: primer.orange[6], }, }, { scope: ["markup.heading", "markup.heading entity.name"], settings: { fontStyle: "bold", - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "markup.quote", settings: { - foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }), + foreground: primer.green[6], }, }, { @@ -428,7 +422,7 @@ function getTheme({ theme, name }) { { scope: "markup.raw", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { @@ -438,8 +432,8 @@ function getTheme({ theme, name }) { "punctuation.definition.deleted", ], settings: { - background: themes({ light: scale.red[0], dark: scale.red[9], dimmed: scale.red[9] }), - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + background: primer.red[0], + foreground: primer.red[7], }, }, { @@ -449,48 +443,48 @@ function getTheme({ theme, name }) { "punctuation.definition.inserted", ], settings: { - background: themes({ light: scale.green[0], dark: scale.green[9], dimmed: scale.green[9] }), - foreground: themes({ light: scale.green[6], dark: scale.green[1], dimmed: scale.green[1] }), + background: primer.green[0], + foreground: primer.green[6], }, }, { scope: ["markup.changed", "punctuation.definition.changed"], settings: { - background: themes({ light: scale.orange[1], dark: scale.orange[8], dimmed: scale.orange[8] }), - foreground: themes({ light: scale.orange[6], dark: scale.orange[2], dimmed: scale.orange[2] }), + background: primer.orange[1], + foreground: primer.orange[6], }, }, { scope: ["markup.ignored", "markup.untracked"], settings: { - foreground: themes({ light: scale.gray[1], dark: scale.gray[8], dimmed: scale.gray[8] }), - background: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.gray[1], + background: primer.blue[6], }, }, { scope: "meta.diff.range", settings: { - foreground: themes({ light: scale.purple[5], dark: scale.purple[2], dimmed: scale.purple[2] }), + foreground: pick({ light: primer.purple[5], dark: primer.purple[6] }), fontStyle: "bold", }, }, { scope: "meta.diff.header", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "meta.separator", settings: { fontStyle: "bold", - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { scope: "meta.output", settings: { - foreground: themes({ light: scale.blue[6], dark: scale.blue[2], dimmed: scale.blue[2] }), + foreground: primer.blue[6], }, }, { @@ -503,19 +497,19 @@ function getTheme({ theme, name }) { "brackethighlighter.quote", ], settings: { - foreground: themes({ light: scale.gray[6], dark: scale.gray[3], dimmed: scale.gray[3] }), + foreground: primer.gray[6], }, }, { scope: "brackethighlighter.unmatched", settings: { - foreground: themes({ light: scale.red[7], dark: scale.red[2], dimmed: scale.red[2] }), + foreground: primer.red[7], }, }, { scope: ["constant.other.reference.link", "string.other.link"], settings: { - foreground: themes({ light: scale.blue[8], dark: scale.blue[1], dimmed: scale.blue[1] }), + foreground: primer.blue[8], fontStyle: "underline", }, },