From bb833f2fa8f19d5da18c0c90bb0bd8fe42121e5b Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 12:55:16 -0700 Subject: [PATCH 01/43] Support ts data files --- data/colors_v2/dark.ts | 6 ++++++ data/colors_v2/index.ts | 7 +++++++ data/colors_v2/light.ts | 6 ++++++ package.json | 1 + script/build.ts | 32 +++++++++++++++---------------- script/lib/variable-collection.ts | 13 +++++++++++-- yarn.lock | 5 +++++ 7 files changed, 52 insertions(+), 18 deletions(-) create mode 100644 data/colors_v2/dark.ts create mode 100644 data/colors_v2/index.ts create mode 100644 data/colors_v2/light.ts diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts new file mode 100644 index 000000000..be44fa19c --- /dev/null +++ b/data/colors_v2/dark.ts @@ -0,0 +1,6 @@ +export default { + fg: { + default: "#fff", + }, + red: ["red", "blue"], +}; diff --git a/data/colors_v2/index.ts b/data/colors_v2/index.ts new file mode 100644 index 000000000..7cfd149ea --- /dev/null +++ b/data/colors_v2/index.ts @@ -0,0 +1,7 @@ +import light from "./light"; +import dark from "./dark"; + +export default { + light, + dark, +}; diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts new file mode 100644 index 000000000..0ce41cf16 --- /dev/null +++ b/data/colors_v2/light.ts @@ -0,0 +1,6 @@ +export default { + fg: { + default: "#000", + }, + red: ["red", "blue"], +}; diff --git a/package.json b/package.json index 3a13d2b73..987c776f3 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@changesets/cli": "^2.11.2", "@octokit/rest": "^18.5.3", "@types/chalk": "^2.2.0", + "@types/flat": "^5.0.1", "@types/lodash": "^4.14.163", "@types/mkdirp": "^1.0.1", "@types/node": "^14.0.26", diff --git a/script/build.ts b/script/build.ts index 29cf6de8f..9bf865d58 100644 --- a/script/build.ts +++ b/script/build.ts @@ -6,6 +6,7 @@ import { Document } from 'sass-extract' import chalk from 'chalk' import { parseScssFile } from './lib/scss' import ModeCollection from './lib/mode-collection' +import VariableCollection from './lib/variable-collection' interface Skip { type: string @@ -52,31 +53,30 @@ async function build() { } async function getModeCollectionForType(type: string, toSkip: string[]): Promise { - const filenames = fs.readdirSync(path.join(dataDir, type)) - .map(file => path.join(dataDir, type, file)) - .filter(file => file.endsWith('.scss')) - let prefix = type - const prefixFile = path.join(dataDir, type, "prefix") + const prefixFile = path.join(dataDir, type, 'prefix') if (fs.existsSync(prefixFile)) { - prefix = fs.readFileSync(prefixFile, "utf8").trim() + prefix = fs.readFileSync(prefixFile, 'utf8').trim() } const collection = new ModeCollection(type, prefix) - const renderedScss: [string, Document][] = await Promise.all(filenames.map(async (file) => { - const name = path.basename(file, ".scss") - const rendered = await parseScssFile(file) + const indexFile = path.join(dataDir, type, 'index.ts') - return [name, rendered] as [string, Document] - })) + // TODO: log error if file doesn't exist + if (fs.existsSync(indexFile)) { + // TODO: check that modes is an object + const { default: modes } = require(indexFile) - for (const [name, rendered] of renderedScss) { - if (toSkip.includes(name)) { - continue - } + for (const mode in modes) { + if (toSkip.includes(mode)) { + continue + } - collection.addFromSassExports(name, rendered.vars.global.$export) + const vars = new VariableCollection(mode, prefix, null) + vars.addFromObject(modes[mode]) + collection.add(mode, vars) + } } collection.finalize() diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 0d60f3b1f..5a25c6ad2 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,6 +1,7 @@ import set from 'lodash/set' import chalk from 'chalk' -import { SassMap, stringifySassPrimitive, renderSassList } from "./scss" +import flatten from 'flat' +import kebabCase from 'lodash/kebabCase' function exhaustiveCheck(anything: never) {} @@ -33,7 +34,15 @@ export default class VariableCollection { }) } - private iterateVarsFromSassExports(data: SassMap, callback: (path: PathItem[], value: any) => void, path: string[] = []) { + public addFromObject(data: Record) { + const flattened: Record = flatten(data) + + for (const [key, value] of Object.entries(flattened)) { + const path = key.split('.').map(kebabCase) + this.add(path, value) + } + } + for (let key of Object.keys(data.value)) { // [MKT] Numeric keys for Sass maps are not supported due to // lookup semantics in non-CSS projects (like Primer React) diff --git a/yarn.lock b/yarn.lock index 0746d7b56..7f394dced 100644 --- a/yarn.lock +++ b/yarn.lock @@ -415,6 +415,11 @@ resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== +"@types/flat@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@types/flat/-/flat-5.0.1.tgz#9d703bbfb59ad9ec9ce376bdeb93a0f85da27059" + integrity sha512-ykRODHi9G9exJdTZvQggsqCUtB7jqiwLHcXCjNMb7zgWx6Lc2bydIUYBG1+It6VXZVFaeROv6HqPjDCAsoPG3w== + "@types/lodash@^4.14.163": version "4.14.163" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.163.tgz#6026f73c8267a0b7d41c7c8aadacfa2a5255774f" From 248e62097ec44a2934e961acd6f7b13e16e2fd7f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 13:03:21 -0700 Subject: [PATCH 02/43] Format with prettier --- index.ts | 10 ++++----- package.json | 4 ++++ script/build.ts | 36 ++++++++++++++----------------- script/lib/mode-collection.ts | 26 ++++++++++++---------- script/lib/scss.ts | 18 ++++++++++------ script/lib/variable-collection.ts | 14 ++++++++++-- yarn.lock | 5 +++++ 7 files changed, 68 insertions(+), 45 deletions(-) diff --git a/index.ts b/index.ts index d6bd6d5e8..f31967435 100644 --- a/index.ts +++ b/index.ts @@ -1,6 +1,6 @@ -import {colors} from "./primitives/colors"; -import {spacing} from "./primitives/spacing"; -import {typography} from "./primitives/typography"; -import {theme} from "./theme"; +import {colors} from './primitives/colors' +import {spacing} from './primitives/spacing' +import {typography} from './primitives/typography' +import {theme} from './theme' -export {theme, colors, spacing, typography}; +export {theme, colors, spacing, typography} diff --git a/package.json b/package.json index 987c776f3..bafad482b 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'", "release": "yarn build && changeset publish" }, + "prettier": "@github/prettier-config", "devDependencies": { "@actions/core": "^1.2.7", "@actions/github": "^4.0.0", @@ -50,5 +51,8 @@ "sass-extract": "^2.1.0", "ts-node": "^8.10.2", "typescript": "^3.7.2" + }, + "dependencies": { + "@github/prettier-config": "^0.0.4" } } diff --git a/script/build.ts b/script/build.ts index 9bf865d58..c111b76d9 100644 --- a/script/build.ts +++ b/script/build.ts @@ -1,10 +1,8 @@ -import fs from 'fs' -import path from 'path' -import mkdirp from 'mkdirp' import camelcaseKeys from 'camelcase-keys' -import { Document } from 'sass-extract' import chalk from 'chalk' -import { parseScssFile } from './lib/scss' +import fs from 'fs' +import mkdirp from 'mkdirp' +import path from 'path' import ModeCollection from './lib/mode-collection' import VariableCollection from './lib/variable-collection' @@ -13,19 +11,17 @@ interface Skip { name: string } -let SKIP: Skip[] = (process.env['PRIMER_SKIP'] || "") - .split(',') - .map(skip => { - const [type, name] = skip.split('/') - return {type, name} - }) +let SKIP: Skip[] = (process.env['PRIMER_SKIP'] || '').split(',').map(skip => { + const [type, name] = skip.split('/') + return {type, name} +}) -const dataDir = path.join(__dirname, "..", "data") -const outDir = path.join(__dirname, "..", "dist") +const dataDir = path.join(__dirname, '..', 'data') +const outDir = path.join(__dirname, '..', 'dist') -const scssDir = path.join(outDir, "scss") -const tsDir = path.join(outDir, "ts") -const jsonDir = path.join(outDir, "json") +const scssDir = path.join(outDir, 'scss') +const tsDir = path.join(outDir, 'ts') +const jsonDir = path.join(outDir, 'json') async function build() { const modeTypes = fs.readdirSync(dataDir) @@ -42,7 +38,7 @@ async function build() { console.log(err) } console.log(chalk.red`===============================================`) - console.log("") + console.log('') process.exit(1) } @@ -66,7 +62,7 @@ async function getModeCollectionForType(type: string, toSkip: string[]): Promise // TODO: log error if file doesn't exist if (fs.existsSync(indexFile)) { // TODO: check that modes is an object - const { default: modes } = require(indexFile) + const {default: modes} = require(indexFile) for (const mode in modes) { if (toSkip.includes(mode)) { @@ -94,7 +90,7 @@ async function writeModeOutput(collection: ModeCollection): Promise { async function writeScssOutput(collection: ModeCollection): Promise { for (const [_name, vars] of collection) { let output = `@mixin primer-${collection.type}-${vars.name} {\n` - output += " & {\n" + output += ' & {\n' for (const variable of vars) { output += ` --${variable.name}: ${variable.value};\n` } @@ -154,6 +150,6 @@ async function writeMainTsIndex(types: string[]) { if (require.main === module) { build() - .then(() => console.log("✨ Built mode data 🎉")) + .then(() => console.log('✨ Built mode data 🎉')) .catch(err => console.error(err)) } diff --git a/script/lib/mode-collection.ts b/script/lib/mode-collection.ts index f0aec7b1e..e389ee492 100644 --- a/script/lib/mode-collection.ts +++ b/script/lib/mode-collection.ts @@ -1,7 +1,7 @@ -import flatMap from "lodash/flatMap"; -import chalk from "chalk"; -import VariableCollection from "./variable-collection"; -import { SassMap } from "./scss"; +import flatMap from 'lodash/flatMap' +import chalk from 'chalk' +import VariableCollection from './variable-collection' +import {SassMap} from './scss' export default class ModeCollection { public readonly type: string @@ -28,7 +28,7 @@ export default class ModeCollection { this.modes.set(modeName, vars) } - public validate(): {isValid: boolean, errors: string[]} { + public validate(): {isValid: boolean; errors: string[]} { const errors = [] // Ensure that every mode in this collection has the same variables defined @@ -36,7 +36,9 @@ export default class ModeCollection { if (missingVarsPerMode.length > 0) { errors.push(`\n> The following variables are missing in one or more modes:\n`) for (const {modes, variableName} of missingVarsPerMode) { - const msg = chalk`* Variable {bold.red ${variableName}} is missing in modes: ${modes.map(mode => chalk.bold.bgBlack.white(mode.name)).join(', ')}` + const msg = chalk`* Variable {bold.red ${variableName}} is missing in modes: ${modes + .map(mode => chalk.bold.bgBlack.white(mode.name)) + .join(', ')}` errors.push(msg) } } @@ -45,7 +47,9 @@ export default class ModeCollection { // other CSS variables defined inside the same file can be resolved const unresolvableBindings = this.getUnresolvableLateBindings() if (unresolvableBindings.length > 0) { - errors.push(`\n> The following CSS variables were referenced as values but could not be resolved at build-time:\n`) + errors.push( + `\n> The following CSS variables were referenced as values but could not be resolved at build-time:\n` + ) for (const {ref, from, mode} of unresolvableBindings) { const msg = chalk`* Variable {bold.red var(--${ref})} referenced by {bold.bgBlack.white ${from}} in mode {bold.bgBlack.white ${mode.name}}` errors.push(msg) @@ -70,12 +74,12 @@ export default class ModeCollection { } } - private getMissingVarsPerMode(): {modes: VariableCollection[], variableName: string}[] { + private getMissingVarsPerMode(): {modes: VariableCollection[]; variableName: string}[] { if (this.modes.size === 1) { return [] } - const result: {modes: VariableCollection[], variableName: string}[] = [] + const result: {modes: VariableCollection[]; variableName: string}[] = [] const modes = [...this.modes.values()] const allVarNames = flatMap(modes, mode => { @@ -93,8 +97,8 @@ export default class ModeCollection { return result } - private getUnresolvableLateBindings(): {mode: VariableCollection, from: string, ref: string}[] { - const result: {mode: VariableCollection, from: string, ref: string}[] = [] + private getUnresolvableLateBindings(): {mode: VariableCollection; from: string; ref: string}[] { + const result: {mode: VariableCollection; from: string; ref: string}[] = [] for (const [_name, mode] of this.modes) { const lateBindings = mode.flattened().filter(v => !!v.ref) diff --git a/script/lib/scss.ts b/script/lib/scss.ts index aa74725ae..97ccd512a 100644 --- a/script/lib/scss.ts +++ b/script/lib/scss.ts @@ -41,16 +41,20 @@ export interface SassMapValue { } export async function parseScssFile(file: string): Promise { - const { vars } = await renderSass({ file }) - return { vars } + const {vars} = await renderSass({file}) + return {vars} } export function stringifySassPrimitive(val: SassValue): string { switch (val.type) { - case 'SassColor': return sassColorToString(val.value) - case 'SassNumber': return `${val.value}${val.unit}` - case 'SassString': return val.value - default: throw new Error(`Cannot stringify Sass value type: ${val.type}`) + case 'SassColor': + return sassColorToString(val.value) + case 'SassNumber': + return `${val.value}${val.unit}` + case 'SassString': + return val.value + default: + throw new Error(`Cannot stringify Sass value type: ${val.type}`) } } @@ -66,7 +70,7 @@ export function renderSassList(val: SassList): string | string[] { if (isSassListHomogeneous(val)) { return val.value.map(stringifySassPrimitive) } else { - return val.value.map(stringifySassPrimitive).join(" ") + return val.value.map(stringifySassPrimitive).join(' ') } } diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 5a25c6ad2..66ae3afef 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,5 +1,6 @@ import set from 'lodash/set' import chalk from 'chalk' +import {SassMap, stringifySassPrimitive, renderSassList} from './scss' import flatten from 'flat' import kebabCase from 'lodash/kebabCase' @@ -43,11 +44,20 @@ export default class VariableCollection { } } + private iterateVarsFromSassExports( + data: SassMap, + callback: (path: PathItem[], value: any) => void, + path: string[] = [] + ) { for (let key of Object.keys(data.value)) { // [MKT] Numeric keys for Sass maps are not supported due to // lookup semantics in non-CSS projects (like Primer React) if (!isNaN(Number(key))) { - console.log(chalk`{bold.red [FATAL]} Map keys cannot be numeric; found numeric key {bold.red ${key}} in ${path.join('-')}-${key} in mode ${this.name}`) + console.log( + chalk`{bold.red [FATAL]} Map keys cannot be numeric; found numeric key {bold.red ${key}} in ${path.join( + '-' + )}-${key} in mode ${this.name}` + ) process.exit(1) } @@ -111,7 +121,7 @@ export default class VariableCollection { } public flattened(): ReadonlyArray { - return [...this.data.values()].map((variable) => { + return [...this.data.values()].map(variable => { return { ...variable, value: variable.ref ? this.resolveRef(variable.ref) : variable.value diff --git a/yarn.lock b/yarn.lock index 7f394dced..06309c1d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -252,6 +252,11 @@ human-id "^1.0.2" prettier "^1.18.2" +"@github/prettier-config@^0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@github/prettier-config/-/prettier-config-0.0.4.tgz#cbfddb36a7f29a81c5af155dc5827e95b23b9ccd" + integrity sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA== + "@manypkg/find-root@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f" From 848481b199ada982774dd50a2628c671b110dcd6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 14:30:00 -0700 Subject: [PATCH 03/43] Allow function values --- data/colors_v2/dark.ts | 15 ++++++--- data/colors_v2/deprecated_vars.ts | 8 +++++ data/colors_v2/index.ts | 8 ++--- data/colors_v2/light.ts | 15 ++++++--- index.ts | 6 ---- package.json | 1 + script/lib/mode-collection.ts | 31 +++++++++---------- script/lib/variable-collection.ts | 51 +++++++++++-------------------- src/utils.ts | 3 ++ yarn.lock | 5 +++ 10 files changed, 73 insertions(+), 70 deletions(-) create mode 100644 data/colors_v2/deprecated_vars.ts delete mode 100644 index.ts create mode 100644 src/utils.ts diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index be44fa19c..7bd310e34 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,6 +1,11 @@ -export default { +import merge from 'deepmerge' +import deprecatedVars from './deprecated_vars' + +const vars = { fg: { - default: "#fff", - }, - red: ["red", "blue"], -}; + default: '#fff', + muted: '#ccc' + } +} + +export default merge(deprecatedVars, vars) diff --git a/data/colors_v2/deprecated_vars.ts b/data/colors_v2/deprecated_vars.ts new file mode 100644 index 000000000..2502bdf50 --- /dev/null +++ b/data/colors_v2/deprecated_vars.ts @@ -0,0 +1,8 @@ +import {get} from '../../src/utils' + +export default { + text: { + primary: get('fg.default'), + secondary: get('fg.muted') + } +} diff --git a/data/colors_v2/index.ts b/data/colors_v2/index.ts index 7cfd149ea..c44634acc 100644 --- a/data/colors_v2/index.ts +++ b/data/colors_v2/index.ts @@ -1,7 +1,7 @@ -import light from "./light"; -import dark from "./dark"; +import light from './light' +import dark from './dark' export default { light, - dark, -}; + dark +} diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 0ce41cf16..adb324890 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,6 +1,11 @@ -export default { +import merge from 'deepmerge' +import deprecatedVars from './deprecated_vars' + +const vars = { fg: { - default: "#000", - }, - red: ["red", "blue"], -}; + default: '#000', + muted: '#333' + } +} + +export default merge(deprecatedVars, vars) diff --git a/index.ts b/index.ts deleted file mode 100644 index f31967435..000000000 --- a/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {colors} from './primitives/colors' -import {spacing} from './primitives/spacing' -import {typography} from './primitives/typography' -import {theme} from './theme' - -export {theme, colors, spacing, typography} diff --git a/package.json b/package.json index bafad482b..423d737ef 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "camelcase-keys": "^6.2.2", "chalk": "^4.1.0", "deep-shape-equals": "^0.1.2", + "deepmerge": "^4.2.2", "flat": "^5.0.2", "lodash": "^4.17.20", "mkdirp": "^1.0.4", diff --git a/script/lib/mode-collection.ts b/script/lib/mode-collection.ts index e389ee492..9d4539a4d 100644 --- a/script/lib/mode-collection.ts +++ b/script/lib/mode-collection.ts @@ -43,18 +43,17 @@ export default class ModeCollection { } } - // Ensure that any variables with late-binding to - // other CSS variables defined inside the same file can be resolved - const unresolvableBindings = this.getUnresolvableLateBindings() - if (unresolvableBindings.length > 0) { - errors.push( - `\n> The following CSS variables were referenced as values but could not be resolved at build-time:\n` - ) - for (const {ref, from, mode} of unresolvableBindings) { - const msg = chalk`* Variable {bold.red var(--${ref})} referenced by {bold.bgBlack.white ${from}} in mode {bold.bgBlack.white ${mode.name}}` + // Ensure that all variables variables are defined + const undefinedVars = this.getUndefinedVars() + if (undefinedVars.length > 0) { + errors.push(`\n> The following variables are undefined:\n`) + + for (const {from, mode} of undefinedVars) { + const msg = chalk`* Variable {bold.bgBlack.white ${from}} in mode {bold.bgBlack.white ${mode.name}} is {bold.red undefined}` errors.push(msg) } - errors.push(`Check to make sure CSS variable references do not create an infinite loop.`) + + errors.push(`Check to make sure variable references do not create an infinite loop.`) } return {isValid: errors.length === 0, errors} @@ -97,15 +96,13 @@ export default class ModeCollection { return result } - private getUnresolvableLateBindings(): {mode: VariableCollection; from: string; ref: string}[] { - const result: {mode: VariableCollection; from: string; ref: string}[] = [] + private getUndefinedVars(): {mode: VariableCollection; from: string}[] { + const result: {mode: VariableCollection; from: string}[] = [] for (const [_name, mode] of this.modes) { - const lateBindings = mode.flattened().filter(v => !!v.ref) - for (const v of lateBindings) { - if (!mode.resolveRef(v.ref!)) { - result.push({mode, from: v.name, ref: v.ref!}) - } + const undefinedVars = mode.flattened().filter(v => !v.value) + for (const v of undefinedVars) { + result.push({mode, from: v.name}) } } diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 66ae3afef..e51963ab3 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,8 +1,9 @@ -import set from 'lodash/set' import chalk from 'chalk' -import {SassMap, stringifySassPrimitive, renderSassList} from './scss' import flatten from 'flat' +import isFunction from 'lodash/isFunction' import kebabCase from 'lodash/kebabCase' +import set from 'lodash/set' +import {renderSassList, SassMap, stringifySassPrimitive} from './scss' function exhaustiveCheck(anything: never) {} @@ -12,7 +13,6 @@ export interface ModeVariable { name: string path: PathItem[] value: any - ref: string | null } const CSS_VAR_REGEX = /var\(--(.*)\)/ @@ -100,14 +100,7 @@ export default class VariableCollection { } const fullName = [this.prefix, ...path].join('-') - const variable: ModeVariable = {name: fullName, path, value, ref: null} - - // If the value is a CSS variable, we need to set a ref - // so that it gets lazy-evaluated during validation and compilation. - if (typeof value === 'string' && value.match(CSS_VAR_REGEX)) { - const [_, needle] = value.match(CSS_VAR_REGEX)! - variable.ref = needle! - } + const variable: ModeVariable = {name: fullName, path, value} this.data.set(fullName, variable) } @@ -121,10 +114,11 @@ export default class VariableCollection { } public flattened(): ReadonlyArray { + const tree = this.unresolvedTree() return [...this.data.values()].map(variable => { return { ...variable, - value: variable.ref ? this.resolveRef(variable.ref) : variable.value + value: isFunction(variable.value) ? variable.value(tree) : variable.value } }) } @@ -133,31 +127,12 @@ export default class VariableCollection { return this.data.get(fullName) } - public resolveRef(fullName: string, checked = new Set()): any { - // Prevent blowing the stack from reference loops - if (checked.has(fullName)) { - return undefined - } - checked.add(fullName) - - const mappedVariable = this.data.get(fullName) - - if (!mappedVariable) { - return undefined - } - - if (mappedVariable.ref) { - return this.resolveRef(mappedVariable.ref, checked) - } else { - return mappedVariable.value - } - } - public tree(): Readonly> { let output = {} as Record + const tree = this.unresolvedTree() for (const variable of this.data.values()) { - const value = variable.ref ? this.resolveRef(variable.ref) : variable.value + const value = isFunction(variable.value) ? variable.value(tree) : variable.value set(output, variable.path, value) } @@ -167,4 +142,14 @@ export default class VariableCollection { public [Symbol.iterator]() { return this.flattened()[Symbol.iterator]() } + + private unresolvedTree(): Readonly> { + let output = {} as Record + + for (const variable of this.data.values()) { + set(output, variable.path, variable.value) + } + + return output + } } diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 000000000..e6cb3a0fd --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,3 @@ +import _get from 'lodash/get' + +export const get = (path: string) => (obj: any) => _get(obj, path) diff --git a/yarn.lock b/yarn.lock index 06309c1d3..aafb65f7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -935,6 +935,11 @@ deep-shape-equals@^0.1.2: resolved "https://registry.yarnpkg.com/deep-shape-equals/-/deep-shape-equals-0.1.2.tgz#010042f05416be750f873f0d0bf362884e59b5d5" integrity sha512-a+hmeuEQph58aZ0lvNHZZXxAxYlvccKIMD1g5fWIcCtR9gNnvrAytVkpCtZGdbsts8oychlBZ1SYr5RSg4pHSA== +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + defaults@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d" From 43e941be7f93277232ed913bc06a106cd92b7e40 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 14:32:46 -0700 Subject: [PATCH 04/43] Move deprecated vars --- data/colors_v2/dark.ts | 2 +- data/colors_v2/light.ts | 2 +- data/colors_v2/{ => utils}/deprecated_vars.ts | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) rename data/colors_v2/{ => utils}/deprecated_vars.ts (51%) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 7bd310e34..71a417026 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,5 +1,5 @@ import merge from 'deepmerge' -import deprecatedVars from './deprecated_vars' +import deprecatedVars from './utils/deprecated_vars' const vars = { fg: { diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index adb324890..dc12aeaa7 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,5 +1,5 @@ import merge from 'deepmerge' -import deprecatedVars from './deprecated_vars' +import deprecatedVars from './utils/deprecated_vars' const vars = { fg: { diff --git a/data/colors_v2/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts similarity index 51% rename from data/colors_v2/deprecated_vars.ts rename to data/colors_v2/utils/deprecated_vars.ts index 2502bdf50..917d3604a 100644 --- a/data/colors_v2/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -1,5 +1,6 @@ -import {get} from '../../src/utils' +import {get} from '../../../src/utils' +// Variables to be removed in the next major release export default { text: { primary: get('fg.default'), From a665dfc06ace61aa468721e21d3be26158045f72 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 17:15:25 -0700 Subject: [PATCH 05/43] Implement alpha function --- package.json | 1 + src/utils.ts | 14 +++++++++++++- yarn.lock | 5 +++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 423d737ef..c3af14f55 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@types/node": "^14.0.26", "camelcase-keys": "^6.2.2", "chalk": "^4.1.0", + "color2k": "^1.2.4", "deep-shape-equals": "^0.1.2", "deepmerge": "^4.2.2", "flat": "^5.0.2", diff --git a/src/utils.ts b/src/utils.ts index e6cb3a0fd..ceacf3f6d 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,3 +1,15 @@ import _get from 'lodash/get' +import * as color2k from 'color2k' +import isFunction from 'lodash/isFunction' -export const get = (path: string) => (obj: any) => _get(obj, path) +function resolve(value: string | ((obj: any) => string), obj: any) { + return isFunction(value) ? value(obj) : value +} + +export function get(path: string) { + return (obj: any) => _get(obj, path) +} + +export function alpha(value: string | ((obj: any) => string), amount: number) { + return (obj: any) => color2k.transparentize(resolve(value, obj), 1 - amount) +} diff --git a/yarn.lock b/yarn.lock index aafb65f7d..4e4a97602 100644 --- a/yarn.lock +++ b/yarn.lock @@ -834,6 +834,11 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color2k@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.4.tgz#af34950ac58e23cf224a01cb8dd0c9911a79605e" + integrity sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q== + combined-stream@^1.0.6, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" From 09faa73f9fd0ee3f6f7ae2d62a8cf4c27f910549 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 17:18:55 -0700 Subject: [PATCH 06/43] Add lighten and darken functions --- src/utils.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/utils.ts b/src/utils.ts index ceacf3f6d..a30f21ac3 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -13,3 +13,11 @@ export function get(path: string) { export function alpha(value: string | ((obj: any) => string), amount: number) { return (obj: any) => color2k.transparentize(resolve(value, obj), 1 - amount) } + +export function lighten(value: string | ((obj: any) => string), amount: number) { + return (obj: any) => color2k.lighten(resolve(value, obj), amount) +} + +export function darken(value: string | ((obj: any) => string), amount: number) { + return (obj: any) => color2k.darken(resolve(value, obj), amount) +} From 31774ba7dceb61c36906cbd3fc8ca7e44615123b Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 18:49:31 -0700 Subject: [PATCH 07/43] Update validation --- script/lib/mode-collection.ts | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/script/lib/mode-collection.ts b/script/lib/mode-collection.ts index 9d4539a4d..e40465fb7 100644 --- a/script/lib/mode-collection.ts +++ b/script/lib/mode-collection.ts @@ -1,7 +1,9 @@ import flatMap from 'lodash/flatMap' import chalk from 'chalk' -import VariableCollection from './variable-collection' +import VariableCollection, {ModeVariable} from './variable-collection' import {SassMap} from './scss' +import isNumber from 'lodash/isNumber' +import isString from 'lodash/isString' export default class ModeCollection { public readonly type: string @@ -44,12 +46,14 @@ export default class ModeCollection { } // Ensure that all variables variables are defined - const undefinedVars = this.getUndefinedVars() - if (undefinedVars.length > 0) { - errors.push(`\n> The following variables are undefined:\n`) - - for (const {from, mode} of undefinedVars) { - const msg = chalk`* Variable {bold.bgBlack.white ${from}} in mode {bold.bgBlack.white ${mode.name}} is {bold.red undefined}` + const invalidVars = this.getInvalidVars() + if (invalidVars.length > 0) { + errors.push(`\n> The following variables are invalid:\n`) + + for (const {variable, mode} of invalidVars) { + const msg = chalk`* {bold.red ${variable.value.toString()}} cannot be assigned to {bold.bgBlack.white ${ + variable.name + }} in mode {bold.bgBlack.white ${mode.name}} ` errors.push(msg) } @@ -96,13 +100,13 @@ export default class ModeCollection { return result } - private getUndefinedVars(): {mode: VariableCollection; from: string}[] { - const result: {mode: VariableCollection; from: string}[] = [] + private getInvalidVars(): {mode: VariableCollection; variable: ModeVariable}[] { + const result: {mode: VariableCollection; variable: ModeVariable}[] = [] for (const [_name, mode] of this.modes) { - const undefinedVars = mode.flattened().filter(v => !v.value) - for (const v of undefinedVars) { - result.push({mode, from: v.name}) + const invalidVars = mode.flattened().filter(v => !(isNumber(v.value) || isString(v.value))) + for (const v of invalidVars) { + result.push({mode, variable: v}) } } From 7ee2074797ec9eec4ee9e4e0ae76e1e2c77c2fc8 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:06:49 -0700 Subject: [PATCH 08/43] Recursively resolve values --- script/lib/variable-collection.ts | 6 +++--- src/utils.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index e51963ab3..047dcbc58 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,8 +1,8 @@ import chalk from 'chalk' import flatten from 'flat' -import isFunction from 'lodash/isFunction' import kebabCase from 'lodash/kebabCase' import set from 'lodash/set' +import {resolveValue} from '../../src/utils' import {renderSassList, SassMap, stringifySassPrimitive} from './scss' function exhaustiveCheck(anything: never) {} @@ -118,7 +118,7 @@ export default class VariableCollection { return [...this.data.values()].map(variable => { return { ...variable, - value: isFunction(variable.value) ? variable.value(tree) : variable.value + value: resolveValue(variable.value, tree) } }) } @@ -132,7 +132,7 @@ export default class VariableCollection { const tree = this.unresolvedTree() for (const variable of this.data.values()) { - const value = isFunction(variable.value) ? variable.value(tree) : variable.value + const value = resolveValue(variable.value, tree) set(output, variable.path, value) } diff --git a/src/utils.ts b/src/utils.ts index a30f21ac3..96c3fc1a8 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,9 +1,9 @@ -import _get from 'lodash/get' import * as color2k from 'color2k' +import _get from 'lodash/get' import isFunction from 'lodash/isFunction' -function resolve(value: string | ((obj: any) => string), obj: any) { - return isFunction(value) ? value(obj) : value +export function resolveValue(value: string | ((obj: any) => string), obj: any): string { + return isFunction(value) ? resolveValue(value(obj), obj) : value } export function get(path: string) { @@ -11,13 +11,13 @@ export function get(path: string) { } export function alpha(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.transparentize(resolve(value, obj), 1 - amount) + return (obj: any) => color2k.transparentize(resolveValue(value, obj), 1 - amount) } export function lighten(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.lighten(resolve(value, obj), amount) + return (obj: any) => color2k.lighten(resolveValue(value, obj), amount) } export function darken(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.darken(resolve(value, obj), amount) + return (obj: any) => color2k.darken(resolveValue(value, obj), amount) } From d213ebdfae63fc052d1ec3e14b4cc86974bf7690 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:09:15 -0700 Subject: [PATCH 09/43] Update error message --- script/lib/mode-collection.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/script/lib/mode-collection.ts b/script/lib/mode-collection.ts index e40465fb7..debbc9e3c 100644 --- a/script/lib/mode-collection.ts +++ b/script/lib/mode-collection.ts @@ -51,13 +51,11 @@ export default class ModeCollection { errors.push(`\n> The following variables are invalid:\n`) for (const {variable, mode} of invalidVars) { - const msg = chalk`* {bold.red ${variable.value.toString()}} cannot be assigned to {bold.bgBlack.white ${ - variable.name - }} in mode {bold.bgBlack.white ${mode.name}} ` + const msg = chalk`* {bold.red ${variable.value}} cannot be assigned to {bold.bgBlack.white ${variable.name}} in mode {bold.bgBlack.white ${mode.name}} ` errors.push(msg) } - errors.push(`Check to make sure variable references do not create an infinite loop.`) + errors.push(`\nCheck to make sure variable references do not create an infinite loop.`) } return {isValid: errors.length === 0, errors} From d5b31bcbcd209b12499427012970016183bfb36a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:09:48 -0700 Subject: [PATCH 10/43] Add v2 variables --- data/colors_v2/dark.ts | 149 +++++++++++++++++++++++++++++++++++++++- data/colors_v2/light.ts | 148 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 293 insertions(+), 4 deletions(-) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 71a417026..be8b7f341 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,10 +1,155 @@ import merge from 'deepmerge' +import {alpha, get} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' const vars = { + // Scales + scale: { + black: '#010409', + white: '#f0f6fc', + gray: [ + '#f0f6fc', + '#c9d1d9', + '#b1bac4', + '#8b949e', + '#6e7681', + '#484f58', + '#30363d', + '#21262d', + '#161b22', + '#0d1117' + ], + blue: [ + '#cae8ff', + '#a5d6ff', + '#79c0ff', + '#58a6ff', + '#388bfd', + '#1f6feb', + '#1158c7', + '#0d419d', + '#0c2d6b', + '#051d4d' + ], + green: [ + '#aff5b4', + '#7ee787', + '#56d364', + '#3fb950', + '#2ea043', + '#238636', + '#196c2e', + '#0f5323', + '#033a16', + '#04260f' + ], + yellow: [ + '#f8e3a1', + '#f2cc60', + '#e3b341', + '#d29922', + '#bb8009', + '#9e6a03', + '#845306', + '#693e00', + '#4b2900', + '#341a00' + ], + orange: [ + '#ffdfb6', + '#ffc680', + '#ffa657', + '#f0883e', + '#db6d28', + '#bd561d', + '#9b4215', + '#762d0a', + '#5a1e02', + '#3d1300' + ], + red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], + purple: [ + '#eddeff', + '#e2c5ff', + '#d2a8ff', + '#bc8cff', + '#a371f7', + '#8957e5', + '#6e40c9', + '#553098', + '#3c1e70', + '#271052' + ], + pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] + }, + + // Foundations fg: { - default: '#fff', - muted: '#ccc' + default: get('scale.gray.1'), + muted: get('scale.gray.3'), + inactive: get('scale.gray.5'), + onEmphasis: get('scale.white') + }, + canvas: { + default: get('scale.gray.9'), + overlay: get('scale.gray.8'), + inset: get('scale.black'), + backdrop: alpha(get('scale.black'), 0.8), + mobile: get('scale.black') + }, + border: { + default: get('scale.gray.6'), + divider: get('scale.gray.7') + }, + + // Roles + neutral: { + fg: get('scale.gray.4'), + emphasis: get('scale.gray.5'), + highlighter: alpha(get('scale.gray.4'), 0.4), + muted: alpha(get('scale.gray.4'), 0.1) + }, + accent: { + fg: get('scale.blue.4'), + emphasis: get('scale.blue.5'), + highlighter: alpha(get('scale.blue.4'), 0.4), + muted: alpha(get('scale.blue.4'), 0.1) + }, + success: { + fg: get('scale.green.4'), + emphasis: get('scale.green.5'), + highlighter: alpha(get('scale.green.4'), 0.4), + muted: alpha(get('scale.green.4'), 0.1) + }, + warning: { + fg: get('scale.yellow.4'), + emphasis: get('scale.yellow.5'), + highlighter: alpha(get('scale.yellow.4'), 0.4), + muted: alpha(get('scale.yellow.4'), 0.1) + }, + severe: { + fg: get('scale.orange.4'), + emphasis: get('scale.orange.5'), + highlighter: alpha(get('scale.orange.4'), 0.4), + muted: alpha(get('scale.orange.4'), 0.1) + }, + danger: { + fg: get('scale.red.4'), + emphasis: get('scale.red.5'), + highlighter: alpha(get('scale.red.4'), 0.4), + muted: alpha(get('scale.red.4'), 0.1) + }, + done: { + fg: get('scale.purple.4'), + emphasis: get('scale.purple.5'), + highlighter: alpha(get('scale.purple.4'), 0.4), + muted: alpha(get('scale.purple.4'), 0.1) + }, + sponsors: { + fg: get('scale.pink.4'), + emphasis: get('scale.pink.5'), + highlighter: alpha(get('scale.pink.4'), 0.4), + muted: alpha(get('scale.pink.4'), 0.1) } } diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index dc12aeaa7..56ffaaa78 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,10 +1,154 @@ import merge from 'deepmerge' +import {alpha, get, lighten} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' const vars = { + scale: { + black: '#1b1f23', + white: '#ffffff', + gray: [ + '#fafbfc', + '#f6f8fa', + '#e1e4e8', + '#d1d5da', + '#959da5', + '#6a737d', + '#586069', + '#444d56', + '#2f363d', + '#24292e' + ], + blue: [ + '#f1f8ff', + '#dbedff', + '#c8e1ff', + '#79b8ff', + '#2188ff', + '#0366d6', + '#005cc5', + '#044289', + '#032f62', + '#05264c' + ], + green: [ + '#f0fff4', + '#dcffe4', + '#bef5cb', + '#85e89d', + '#34d058', + '#28a745', + '#22863a', + '#176f2c', + '#165c26', + '#144620' + ], + yellow: [ + '#fffdef', + '#fffbdd', + '#fff5b1', + '#ffea7f', + '#ffdf5d', + '#ffd33d', + '#f9c513', + '#dbab09', + '#b08800', + '#735c0f' + ], + orange: [ + '#fff8f2', + '#ffebda', + '#ffd1ac', + '#ffab70', + '#fb8532', + '#f66a0a', + '#e36209', + '#d15704', + '#c24e00', + '#a04100' + ], + red: ['#ffeef0', '#ffdce0', '#fdaeb7', '#f97583', '#ea4a5a', '#d73a49', '#cb2431', '#b31d28', '#9e1c23', '#86181d'], + purple: [ + '#f5f0ff', + '#e6dcfd', + '#d1bcf9', + '#b392f0', + '#8a63d2', + '#6f42c1', + '#5a32a3', + '#4c2889', + '#3a1d6e', + '#29134e' + ], + pink: ['#ffeef8', '#fedbf0', '#f9b3dd', '#f692ce', '#ec6cb9', '#ea4aaa', '#d03592', '#b93a86', '#99306f', '#6d224f'] + }, + + // Foundations fg: { - default: '#000', - muted: '#333' + default: get('scale.gray.9'), + muted: get('scale.gray.6'), + inactive: get('scale.gray.5'), + onEmphasis: get('scale.white') + }, + canvas: { + default: get('scale.white'), + overlay: get('scale.white'), + inset: get('scale.gray.1'), + backdrop: alpha(get('scale.black'), 0.8), + mobile: get('scale.white') + }, + border: { + default: get('scale.gray.2'), + divider: lighten(get('scale.gray.2'), 0.03) + }, + + // Roles + neutral: { + fg: get('scale.gray.5'), + emphasis: get('scale.gray.5'), + highlighter: get('scale.gray.3'), + muted: get('scale.gray.1') + }, + accent: { + fg: get('scale.blue.5'), + emphasis: get('scale.blue.5'), + highlighter: get('scale.blue.2'), + muted: get('scale.blue.0') + }, + success: { + fg: get('scale.green.6'), + emphasis: get('scale.green.5'), + highlighter: get('scale.green.3'), + muted: get('scale.green.1') + }, + warning: { + fg: get('scale.yellow.8'), + emphasis: get('scale.yellow.5'), + highlighter: get('scale.yellow.3'), + muted: get('scale.yellow.2') + }, + severe: { + fg: get('scale.orange.5'), + emphasis: get('scale.orange.5'), + highlighter: get('scale.orange.3'), + muted: get('scale.orange.1') + }, + danger: { + fg: get('scale.red.6'), + emphasis: get('scale.red.5'), + highlighter: get('scale.red.2'), + muted: get('scale.red.0') + }, + done: { + fg: get('scale.purple.5'), + emphasis: get('scale.purple.5'), + highlighter: get('scale.purple.2'), + muted: get('scale.purple.0') + }, + sponsors: { + fg: get('scale.pink.5'), + emphasis: get('scale.pink.5'), + highlighter: get('scale.pink.2'), + muted: get('scale.pink.0') } } From 4f3d5ebd7cd03df91aa6898a61c9479318720220 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:22:44 -0700 Subject: [PATCH 11/43] Update merge function --- data/colors_v2/dark.ts | 3 +-- data/colors_v2/light.ts | 3 +-- src/utils.ts | 5 +++++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index be8b7f341..338c4684b 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,5 +1,4 @@ -import merge from 'deepmerge' -import {alpha, get} from '../../src/utils' +import {alpha, get, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' const vars = { diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 56ffaaa78..e41bdaab1 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,5 +1,4 @@ -import merge from 'deepmerge' -import {alpha, get, lighten} from '../../src/utils' +import {alpha, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' const vars = { diff --git a/src/utils.ts b/src/utils.ts index 96c3fc1a8..15cbdbd16 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,5 @@ import * as color2k from 'color2k' +import deepmerge from 'deepmerge' import _get from 'lodash/get' import isFunction from 'lodash/isFunction' @@ -6,6 +7,10 @@ export function resolveValue(value: string | ((obj: any) => string), obj: any): return isFunction(value) ? resolveValue(value(obj), obj) : value } +export function merge(...objects: object[]) { + return deepmerge.all(objects, {arrayMerge: (target, source) => source}) +} + export function get(path: string) { return (obj: any) => _get(obj, path) } From a99cfb7282c89aedbdd51d9bfb0a46d6e4272037 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:22:56 -0700 Subject: [PATCH 12/43] Add dark high contrast theme --- data/colors_v2/dark_high_contrast.ts | 86 ++++++++++++++++++++++++++++ data/colors_v2/index.ts | 4 +- 2 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 data/colors_v2/dark_high_contrast.ts diff --git a/data/colors_v2/dark_high_contrast.ts b/data/colors_v2/dark_high_contrast.ts new file mode 100644 index 000000000..74ae38094 --- /dev/null +++ b/data/colors_v2/dark_high_contrast.ts @@ -0,0 +1,86 @@ +import {merge} from '../../src/utils' +import dark from './dark' + +const vars = { + // Scales + scale: { + black: '#010409', + white: '#f0f6fc', + gray: [ + '#f0f6fc', + '#c9d1d9', + '#b1bac4', + '#8b949e', + '#6e7681', + '#484f58', + '#30363d', + '#21262d', + '#161b22', + '#0d1117' + ], + blue: [ + '#cae8ff', + '#a5d6ff', + '#79c0ff', + '#58a6ff', + '#388bfd', + '#1f6feb', + '#1158c7', + '#0d419d', + '#0c2d6b', + '#051d4d' + ], + green: [ + '#aff5b4', + '#7ee787', + '#56d364', + '#3fb950', + '#2ea043', + '#238636', + '#196c2e', + '#0f5323', + '#033a16', + '#04260f' + ], + yellow: [ + '#f8e3a1', + '#f2cc60', + '#e3b341', + '#d29922', + '#bb8009', + '#9e6a03', + '#845306', + '#693e00', + '#4b2900', + '#341a00' + ], + orange: [ + '#ffdfb6', + '#ffc680', + '#ffa657', + '#f0883e', + '#db6d28', + '#bd561d', + '#9b4215', + '#762d0a', + '#5a1e02', + '#3d1300' + ], + red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], + purple: [ + '#eddeff', + '#e2c5ff', + '#d2a8ff', + '#bc8cff', + '#a371f7', + '#8957e5', + '#6e40c9', + '#553098', + '#3c1e70', + '#271052' + ], + pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] + } +} + +export default merge(dark, vars) diff --git a/data/colors_v2/index.ts b/data/colors_v2/index.ts index c44634acc..f1fa2634e 100644 --- a/data/colors_v2/index.ts +++ b/data/colors_v2/index.ts @@ -1,7 +1,9 @@ import light from './light' import dark from './dark' +import dark_high_contrast from './dark_high_contrast' export default { light, - dark + dark, + dark_high_contrast } From e931cc043f8fb8526d1c30d080e4f8bf1c152b07 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:23:42 -0700 Subject: [PATCH 13/43] Remove scss files --- data/colors_v2/dark.scss | 206 ------------------------ data/colors_v2/dark_dimmed.scss | 206 ------------------------ data/colors_v2/dark_high_contrast.scss | 209 ------------------------- data/colors_v2/light.scss | 206 ------------------------ 4 files changed, 827 deletions(-) delete mode 100644 data/colors_v2/dark.scss delete mode 100644 data/colors_v2/dark_dimmed.scss delete mode 100644 data/colors_v2/dark_high_contrast.scss delete mode 100644 data/colors_v2/light.scss diff --git a/data/colors_v2/dark.scss b/data/colors_v2/dark.scss deleted file mode 100644 index 677c0c3d0..000000000 --- a/data/colors_v2/dark.scss +++ /dev/null @@ -1,206 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -// Dark theme - -$black: #010409; -$white: #f0f6fc; - -// Gray -$gray-0: #f0f6fc; -$gray-1: #c9d1d9; -$gray-2: #b1bac4; -$gray-3: #8b949e; -$gray-4: #6e7681; -$gray-5: #484f58; -$gray-6: #30363d; -$gray-7: #21262d; -$gray-8: #161b22; -$gray-9: #0d1117; - -// Blue -$blue-0: #cae8ff; -$blue-1: #a5d6ff; -$blue-2: #79c0ff; -$blue-3: #58a6ff; -$blue-4: #388bfd; -$blue-5: #1f6feb; -$blue-6: #1158c7; -$blue-7: #0d419d; -$blue-8: #0c2d6b; -$blue-9: #051d4d; - -// Green -$green-0: #aff5b4; -$green-1: #7ee787; -$green-2: #56d364; -$green-3: #3fb950; -$green-4: #2ea043; -$green-5: #238636; -$green-6: #196c2e; -$green-7: #0f5323; -$green-8: #033a16; -$green-9: #04260f; - -// Yellow -$yellow-0: #f8e3a1; -$yellow-1: #f2cc60; -$yellow-2: #e3b341; -$yellow-3: #d29922; -$yellow-4: #bb8009; -$yellow-5: #9e6a03; -$yellow-6: #845306; -$yellow-7: #693e00; -$yellow-8: #4b2900; -$yellow-9: #341a00; - -// Orange -$orange-0: #ffdfb6; -$orange-1: #ffc680; -$orange-2: #ffa657; -$orange-3: #f0883e; -$orange-4: #db6d28; -$orange-5: #bd561d; -$orange-6: #9b4215; -$orange-7: #762d0a; -$orange-8: #5a1e02; -$orange-9: #3d1300; - -// Red -$red-0: #ffdcd7; -$red-1: #ffc1ba; -$red-2: #ffa198; -$red-3: #ff7b72; -$red-4: #f85149; -$red-5: #da3633; -$red-6: #b62324; -$red-7: #8e1519; -$red-8: #67060c; -$red-9: #490202; - -// Purple -$purple-0: #eddeff; -$purple-1: #e2c5ff; -$purple-2: #d2a8ff; -$purple-3: #bc8cff; -$purple-4: #a371f7; -$purple-5: #8957e5; -$purple-6: #6e40c9; -$purple-7: #553098; -$purple-8: #3c1e70; -$purple-9: #271052; - -// Pink -$pink-0: #ffdaec; -$pink-1: #ffbedd; -$pink-2: #ff9bce; -$pink-3: #f778ba; -$pink-4: #db61a2; -$pink-5: #bf4b8a; -$pink-6: #9e3670; -$pink-7: #7d2457; -$pink-8: #5e103e; -$pink-9: #42062a; - -// Scale -$scale: ( - black: $black, - white: $white, - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ), -); - -@import "./mixins/dark_mode.scss"; diff --git a/data/colors_v2/dark_dimmed.scss b/data/colors_v2/dark_dimmed.scss deleted file mode 100644 index 70b6d4d79..000000000 --- a/data/colors_v2/dark_dimmed.scss +++ /dev/null @@ -1,206 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -// Dark dimmed theme - -$black: #1c2128; -$white: #cdd9e5; - -// Gray -$gray-0: #cdd9e5; -$gray-1: #adbac7; -$gray-2: #909dab; -$gray-3: #768390; -$gray-4: #636e7b; -$gray-5: #545d68; -$gray-6: #444c56; -$gray-7: #373e47; -$gray-8: #2d333b; -$gray-9: #22272e; - -// Blue -$blue-0: #c6e6ff; -$blue-1: #96d0ff; -$blue-2: #6cb6ff; -$blue-3: #539bf5; -$blue-4: #4184e4; -$blue-5: #316dca; -$blue-6: #255ab2; -$blue-7: #1b4b91; -$blue-8: #143d79; -$blue-9: #0f2d5c; - -// Green -$green-0: #b4f1b4; -$green-1: #8ddb8c; -$green-2: #6bc46d; -$green-3: #57ab5a; -$green-4: #46954a; -$green-5: #347d39; -$green-6: #2b6a30; -$green-7: #245829; -$green-8: #1b4721; -$green-9: #113417; - -// Yellow -$yellow-0: #fbe090; -$yellow-1: #eac55f; -$yellow-2: #daaa3f; -$yellow-3: #c69026; -$yellow-4: #ae7c14; -$yellow-5: #966600; -$yellow-6: #805400; -$yellow-7: #6c4400; -$yellow-8: #593600; -$yellow-9: #452700; - -// Orange -$orange-0: #ffddb0; -$orange-1: #ffbc6f; -$orange-2: #f69d50; -$orange-3: #e0823d; -$orange-4: #cc6b2c; -$orange-5: #ae5622; -$orange-6: #94471b; -$orange-7: #7f3913; -$orange-8: #682d0f; -$orange-9: #4d210c; - -// Red -$red-0: #ffd8d3; -$red-1: #ffb8b0; -$red-2: #ff938a; -$red-3: #f47067; -$red-4: #e5534b; -$red-5: #c93c37; -$red-6: #ad2e2c; -$red-7: #922323; -$red-8: #78191b; -$red-9: #78191b; - -// Purple -$purple-0: #eedcff; -$purple-1: #dcbdfb; -$purple-2: #dcbdfb; -$purple-3: #b083f0; -$purple-4: #986ee2; -$purple-5: #8256d0; -$purple-6: #6b44bc; -$purple-7: #5936a2; -$purple-8: #472c82; -$purple-9: #352160; - -// Pink -$pink-0: #ffd7eb; -$pink-1: #ffb3d8; -$pink-2: #fc8dc7; -$pink-3: #e275ad; -$pink-4: #c96198; -$pink-5: #ae4c82; -$pink-6: #983b6e; -$pink-7: #7e325a; -$pink-8: #69264a; -$pink-9: #551639; - -// Scale -$scale: ( - black: $black, - white: $white, - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ), -); - -@import "./mixins/dark_mode.scss"; diff --git a/data/colors_v2/dark_high_contrast.scss b/data/colors_v2/dark_high_contrast.scss deleted file mode 100644 index 1a718575b..000000000 --- a/data/colors_v2/dark_high_contrast.scss +++ /dev/null @@ -1,209 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -// Dark theme - -$black: #010409; -$white: #FFFFFF; - -// Gray -$gray-0: #FFFFFF; -$gray-1: #F1F3F6; -$gray-2: #D7DBDF; -$gray-3: #B9BFC6; -$gray-4: #98A1AD; -$gray-5: #79828E; -$gray-6: #5B616B; -$gray-7: #272B33; -$gray-8: #272B33; -$gray-9: #090C11; - -// Blue -$blue-0: #C4E9FF; -$blue-1: #ADDEFF; -$blue-2: #8DCEFF; -$blue-3: #69BAFF; -$blue-4: #3798FF; -$blue-5: #1153B6; -$blue-6: #093C8D; -$blue-7: #062B6D; -$blue-8: #061F4F; -$blue-9: #041741; - -// Green -$green-0: #b2f4b5; -$green-1: #82ee8b; -$green-2: #5ce16b; -$green-3: #40cc54; -$green-4: #1eb246; -$green-5: #18662b; -$green-6: #0e4b1f; -$green-7: #073715; -$green-8: #02290d; -$green-9: #031f0b; - -// Yellow -$yellow-0: #FCE38F; -$yellow-1: #F8D461; -$yellow-2: #EFC147; -$yellow-3: #DEAB31; -$yellow-4: #CB901A; -$yellow-5: #804C00; -$yellow-6: #603703; -$yellow-7: #482700; -$yellow-8: #371C00; -$yellow-9: #2B1500; - -// Orange -// TODO: Add pink high contrast color scale -$orange-0: #ffdfb6; -$orange-1: #ffc680; -$orange-2: #ffa657; -$orange-3: #f0883e; -$orange-4: #db6d28; -$orange-5: #bd561d; -$orange-6: #9b4215; -$orange-7: #762d0a; -$orange-8: #5a1e02; -$orange-9: #3d1300; - -// Red -$red-0: #FFDCD7; -$red-1: #FFCBC4; -$red-2: #FFB4AC; -$red-3: #FF978D; -$red-4: #FF6C62; -$red-5: #A72725; -$red-6: #811616; -$red-7: #620B0E; -$red-8: #4B0306; -$red-9: #3D0101; - -// Purple -// TODO: Add pink high contrast color scale -$purple-0: #eddeff; -$purple-1: #e2c5ff; -$purple-2: #d2a8ff; -$purple-3: #bc8cff; -$purple-4: #a371f7; -$purple-5: #8957e5; -$purple-6: #6e40c9; -$purple-7: #553098; -$purple-8: #3c1e70; -$purple-9: #271052; - -// Pink -// TODO: Add pink high contrast color scale -$pink-0: #ffdaec; -$pink-1: #ffbedd; -$pink-2: #ff9bce; -$pink-3: #f778ba; -$pink-4: #db61a2; -$pink-5: #bf4b8a; -$pink-6: #9e3670; -$pink-7: #7d2457; -$pink-8: #5e103e; -$pink-9: #42062a; - -// Scale -$scale: ( - black: $black, - white: $white, - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ), -); - -@import "./mixins/dark_mode.scss"; diff --git a/data/colors_v2/light.scss b/data/colors_v2/light.scss deleted file mode 100644 index fda5c20ef..000000000 --- a/data/colors_v2/light.scss +++ /dev/null @@ -1,206 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -// Light theme - -$black: #1b1f23; -$white: #fff; - -// Gray -$gray-0: #fafbfc; -$gray-1: #f6f8fa; -$gray-2: #e1e4e8; -$gray-3: #d1d5da; -$gray-4: #959da5; -$gray-5: #6a737d; -$gray-6: #586069; -$gray-7: #444d56; -$gray-8: #2f363d; -$gray-9: #24292e; - -// Blue -$blue-0: #f1f8ff; -$blue-1: #dbedff; -$blue-2: #c8e1ff; -$blue-3: #79b8ff; -$blue-4: #2188ff; -$blue-5: #0366d6; -$blue-6: #005cc5; -$blue-7: #044289; -$blue-8: #032f62; -$blue-9: #05264c; - -// Green -$green-0: #f0fff4; -$green-1: #dcffe4; -$green-2: #bef5cb; -$green-3: #85e89d; -$green-4: #34d058; -$green-5: #28a745; -$green-6: #22863a; -$green-7: #176f2c; -$green-8: #165c26; -$green-9: #144620; - -// Yellow -$yellow-0: #fffdef; -$yellow-1: #fffbdd; -$yellow-2: #fff5b1; -$yellow-3: #ffea7f; -$yellow-4: #ffdf5d; -$yellow-5: #ffd33d; -$yellow-6: #f9c513; -$yellow-7: #dbab09; -$yellow-8: #b08800; -$yellow-9: #735c0f; - -// Orange -$orange-0: #fff8f2; -$orange-1: #ffebda; -$orange-2: #ffd1ac; -$orange-3: #ffab70; -$orange-4: #fb8532; -$orange-5: #f66a0a; -$orange-6: #e36209; -$orange-7: #d15704; -$orange-8: #c24e00; -$orange-9: #a04100; - -// Red -$red-0: #ffeef0; -$red-1: #ffdce0; -$red-2: #fdaeb7; -$red-3: #f97583; -$red-4: #ea4a5a; -$red-5: #d73a49; -$red-6: #cb2431; -$red-7: #b31d28; -$red-8: #9e1c23; -$red-9: #86181d; - -// Purple -$purple-0: #f5f0ff; -$purple-1: #e6dcfd; -$purple-2: #d1bcf9; -$purple-3: #b392f0; -$purple-4: #8a63d2; -$purple-5: #6f42c1; -$purple-6: #5a32a3; -$purple-7: #4c2889; -$purple-8: #3a1d6e; -$purple-9: #29134e; - -// Pink -$pink-0: #ffeef8; -$pink-1: #fedbf0; -$pink-2: #f9b3dd; -$pink-3: #f692ce; -$pink-4: #ec6cb9; -$pink-5: #ea4aaa; -$pink-6: #d03592; -$pink-7: #b93a86; -$pink-8: #99306f; -$pink-9: #6d224f; - -// Scale -$scale: ( - black: $black, - white: $white, - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ), -); - -@import "./mixins/light_mode.scss"; From 72173c93b0cfa5ec5d8872e325aa4cef006016fb Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:36:30 -0700 Subject: [PATCH 14/43] Update variable name casing --- script/lib/variable-collection.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 047dcbc58..8384bf025 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,6 +1,7 @@ import chalk from 'chalk' import flatten from 'flat' import kebabCase from 'lodash/kebabCase' +import isString from 'lodash/isString' import set from 'lodash/set' import {resolveValue} from '../../src/utils' import {renderSassList, SassMap, stringifySassPrimitive} from './scss' @@ -39,7 +40,7 @@ export default class VariableCollection { const flattened: Record = flatten(data) for (const [key, value] of Object.entries(flattened)) { - const path = key.split('.').map(kebabCase) + const path = key.split('.') this.add(path, value) } } @@ -99,7 +100,7 @@ export default class VariableCollection { return } - const fullName = [this.prefix, ...path].join('-') + const fullName = [this.prefix, ...path].map(value => (isString(value) ? kebabCase(value) : value)).join('-') const variable: ModeVariable = {name: fullName, path, value} this.data.set(fullName, variable) @@ -115,6 +116,7 @@ export default class VariableCollection { public flattened(): ReadonlyArray { const tree = this.unresolvedTree() + console.log(tree) return [...this.data.values()].map(variable => { return { ...variable, From 5dd2326ec76337267a64a43c608aed9a7ad17c9c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:40:55 -0700 Subject: [PATCH 15/43] Remove console.log --- script/lib/variable-collection.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 8384bf025..8c159170a 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -116,7 +116,6 @@ export default class VariableCollection { public flattened(): ReadonlyArray { const tree = this.unresolvedTree() - console.log(tree) return [...this.data.values()].map(variable => { return { ...variable, From 34fcc39fd9156f63e1e5a4db50f1078a5854f357 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:43:27 -0700 Subject: [PATCH 16/43] Update deprecated variables --- data/colors_v2/utils/deprecated_vars.ts | 52 ++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 917d3604a..34c133a9d 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -1,9 +1,57 @@ import {get} from '../../../src/utils' -// Variables to be removed in the next major release +// Variables to be removed in the next major release (must map to system variables) export default { text: { primary: get('fg.default'), - secondary: get('fg.muted') + secondary: get('fg.muted'), + tertiary: get('fg.inactive'), + placeholder: get('fg.inactive'), + disabled: get('fg.inactive'), + inverse: get('fg.onEmphasis'), + link: get('accent.fg'), + danger: get('danger.fg'), + success: get('success.fg'), + warning: get('warning.fg'), + white: get('fg.onEmphasis') + }, + icon: { + primary: get('fg.default'), + secondary: get('fg.muted'), + tertiary: get('fg.inactive'), + info: get('accent.fg'), + danger: get('danger.fg'), + success: get('success.fg'), + warning: get('warning.fg') + }, + border: { + primary: get('border.default'), + secondary: get('border.divider'), + // tertiary + overlay: get('border.default'), + // inverse + info: get('accent.emphasis'), + danger: get('danger.emphasis'), + success: get('success.emphasis'), + warning: get('warning.emphasis') + }, + bg: { + canvas: get('canvas.default'), + canvasMobile: get('canvas.mobile'), + canvasInverse: get('neutral.emphasis'), + canvasInset: get('canvas.inset'), + primary: get('canvas.default'), + // secondary + // teritary + overlay: get('canvas.overlay'), + backdrop: get('canvas.backdrop'), + info: get('accent.muted'), + infoInverse: get('accent.emphasis'), + danger: get('danger.muted'), + dangerInverse: get('danger.emphasis'), + success: get('success.muted'), + successInverse: get('success.emphasis'), + warning: get('warning.muted'), + warningInverse: get('warning.emphasis') } } From 3bdb5b9c16dc6d5b2710ee0a8670aeb2d38f5edf Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:55:36 -0700 Subject: [PATCH 17/43] Add app variables --- data/colors_v2/dark.ts | 3 ++- data/colors_v2/light.ts | 3 ++- data/colors_v2/utils/dark_github_vars.ts | 9 +++++++++ data/colors_v2/utils/light_github_vars.ts | 7 +++++++ 4 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 data/colors_v2/utils/dark_github_vars.ts create mode 100644 data/colors_v2/utils/light_github_vars.ts diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 338c4684b..75af9bfcd 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,5 +1,6 @@ import {alpha, get, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' +import darkGithubVars from './utils/dark_github_vars' const vars = { // Scales @@ -152,4 +153,4 @@ const vars = { } } -export default merge(deprecatedVars, vars) +export default merge(deprecatedVars, darkGithubVars, vars) diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index e41bdaab1..ad13ec0ce 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,5 +1,6 @@ import {alpha, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' +import lightGithubVars from './utils/light_github_vars' const vars = { scale: { @@ -151,4 +152,4 @@ const vars = { } } -export default merge(deprecatedVars, vars) +export default merge(deprecatedVars, lightGithubVars, vars) diff --git a/data/colors_v2/utils/dark_github_vars.ts b/data/colors_v2/utils/dark_github_vars.ts new file mode 100644 index 000000000..f8a51af1e --- /dev/null +++ b/data/colors_v2/utils/dark_github_vars.ts @@ -0,0 +1,9 @@ +import {get} from '../../../src/utils' + +// Variables to be moved to github/github + +export default { + calendarGraph: { + dayBg: get('scale.gray.8') + } +} diff --git a/data/colors_v2/utils/light_github_vars.ts b/data/colors_v2/utils/light_github_vars.ts new file mode 100644 index 000000000..2b56a0e0e --- /dev/null +++ b/data/colors_v2/utils/light_github_vars.ts @@ -0,0 +1,7 @@ +// Variables to be moved to github/github + +export default { + calendarGraph: { + dayBg: '#EBEDF0' + } +} From ece97101300112972d498bef0d37ca932b062e2d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:55:55 -0700 Subject: [PATCH 18/43] Add file description --- data/colors_v2/utils/deprecated_vars.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 34c133a9d..671e69772 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -1,6 +1,10 @@ import {get} from '../../../src/utils' -// Variables to be removed in the next major release (must map to system variables) +// Variables to be removed in the next major release + +// Every variable in this file must map to a functional variable (e.g. get('fg.default')). +// No hex codes (e.g. '#ff0000') or scale variables (e.g. get('scale.gray.5')) allowed. + export default { text: { primary: get('fg.default'), From 524e2e067de7005aa870558fb59b1d330818be7f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 21 May 2021 19:57:04 -0700 Subject: [PATCH 19/43] Remove scss files --- data/colors_v2/mixins/dark_mode.scss | 93 --------------------------- data/colors_v2/mixins/light_mode.scss | 93 --------------------------- data/colors_v2/mixins/migration.scss | 59 ----------------- 3 files changed, 245 deletions(-) delete mode 100644 data/colors_v2/mixins/dark_mode.scss delete mode 100644 data/colors_v2/mixins/light_mode.scss delete mode 100644 data/colors_v2/mixins/migration.scss diff --git a/data/colors_v2/mixins/dark_mode.scss b/data/colors_v2/mixins/dark_mode.scss deleted file mode 100644 index cd70163c6..000000000 --- a/data/colors_v2/mixins/dark_mode.scss +++ /dev/null @@ -1,93 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -@import "./migration.scss"; - -$export: ( - // Scales - scale: $scale, - - // Foundations - fg: ( - default: $gray-1, - muted: $gray-3, - inactive: $gray-5, - on-emphasis: $white, - ), - canvas: ( - default: $gray-9, - overlay: $gray-8, - inset: $black, - backdrop: rgba($black, 0.8), - mobile: $black, - ), - border:( - default: $gray-6, - divider: $gray-7, - - // Mapping of v1 variables to v2 variables - primary: var(--color-border-default), - secondary: var(--color-border-divider), - // tertiary - overlay: var(--color-border-default), - // inverse - info: var(--color-accent-emphasis), - danger: var(--color-danger-emphasis), - success: var(--color-success-emphasis), - warning: var(--color-warning-emphasis), - ), - - // Roles - neutral: ( - fg: $gray-4, - emphasis: $gray-5, - highlighter: rgba($gray-4, 0.4), - muted: rgba($gray-4, 0.1), - ), - accent: ( - fg: $blue-4, - emphasis: $blue-5, - highlighter: rgba($blue-4, 0.4), - muted: rgba($blue-4, 0.1), - ), - success: ( - fg: $green-4, - emphasis: $green-5, - highlighter: rgba($green-4, 0.4), - muted: rgba($green-4, 0.1), - ), - warning: ( - fg: $yellow-4, - emphasis: $yellow-5, - highlighter: rgba($yellow-4, 0.4), - muted: rgba($yellow-4, 0.1), - ), - severe: ( - fg: $orange-4, - emphasis: $orange-5, - highlighter: rgba($orange-4, 0.4), - muted: rgba($orange-4, 0.1), - ), - danger: ( - fg: $red-4, - emphasis: $red-5, - highlighter: rgba($red-4, 0.4), - muted: rgba($red-4, 0.1), - ), - done: ( - fg: $purple-4, - emphasis: $purple-5, - highlighter: rgba($purple-4, 0.4), - muted: rgba($purple-4, 0.1), - ), - sponsors: ( - fg: $pink-4, - emphasis: $pink-5, - highlighter: rgba($pink-4, 0.4), - muted: rgba($pink-4, 0.1), - ), - - // Mapping of v1 variables to v2 variables - text: $text, - icon: $icon, - bg: $bg, -); diff --git a/data/colors_v2/mixins/light_mode.scss b/data/colors_v2/mixins/light_mode.scss deleted file mode 100644 index f4cae32c0..000000000 --- a/data/colors_v2/mixins/light_mode.scss +++ /dev/null @@ -1,93 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -@import "./migration.scss"; - -$export: ( - // Scales - scale: $scale, - - // Foundations - fg: ( - default: $gray-9, - muted: $gray-6, - inactive: $gray-5, - on-emphasis: $white, - ), - canvas: ( - default: $white, - overlay: $white, - inset: $gray-1, - backdrop: rgba($black, 0.5), - mobile: $white, - ), - border: ( - default: $gray-2, - divider: lighten($gray-2, 3%), - - // Mapping of v1 variables to v2 variables - primary: var(--color-border-default), - secondary: var(--color-border-divider), - // tertiary - overlay: var(--color-border-default), - // inverse - info: var(--color-accent-emphasis), - danger: var(--color-danger-emphasis), - success: var(--color-success-emphasis), - warning: var(--color-warning-emphasis), - ), - - // Roles - neutral: ( - fg: $gray-5, - emphasis: $gray-5, - highlighter: $gray-3, - muted: $gray-1, - ), - accent: ( - fg: $blue-5, - emphasis: $blue-5, - highlighter: $blue-2, - muted: $blue-0, - ), - success: ( - fg: $green-6, - emphasis: $green-5, - highlighter: $green-3, - muted: $green-1, - ), - warning: ( - fg: $yellow-8, - emphasis: $yellow-5, - highlighter: $yellow-3, - muted: $yellow-2, - ), - severe: ( - fg: $orange-5, - emphasis: $orange-5, - highlighter: $orange-3, - muted: $orange-1, - ), - danger: ( - fg: $red-6, - emphasis: $red-5, - highlighter: $red-2, - muted: $red-0, - ), - done: ( - fg: $purple-5, - emphasis: $purple-5, - highlighter: $purple-2, - muted: $purple-0, - ), - sponsors: ( - fg: $pink-5, - emphasis: $pink-5, - highlighter: $pink-2, - muted: $pink-0, - ), - - // Mapping of v1 variables to v2 variables - text: $text, - icon: $icon, - bg: $bg -); diff --git a/data/colors_v2/mixins/migration.scss b/data/colors_v2/mixins/migration.scss deleted file mode 100644 index 2bc9e9f06..000000000 --- a/data/colors_v2/mixins/migration.scss +++ /dev/null @@ -1,59 +0,0 @@ -// EXPERIMENTAL. DO NOT USE. - -// Mapping of v1 variables to v2 variables - -$text: ( - primary: var(--color-fg-default), - secondary: var(--color-fg-muted), - tertiary: var(--color-fg-inactive), - placeholder: var(--color-fg-inactive), - disabled: var(--color-fg-inactive), - inverse: var(--color-fg-on-emphasis), - link: var(--color-accent-fg), - danger: var(--color-danger-fg), - success: var(--color-success-fg), - warning: var(--color-warning-fg), - white: var(--color-fg-on-emphasis), -); - -$icon: ( - primary: var(--color-fg-default), - secondary: var(--color-fg-muted), - tertiary: var(--color-fg-inactive), - info: var(--color-accent-fg), - danger: var(--color-danger-fg), - success: var(--color-success-fg), - warning: var(--color-warning-fg), -); - -$border: ( - primary: var(--color-border-default), - secondary: var(--color-border-divider), - // tertiary - overlay: var(--color-border-default), - // inverse - info: var(--color-accent-emphasis), - danger: var(--color-danger-emphasis), - success: var(--color-success-emphasis), - warning: var(--color-warning-emphasis), -); - -$bg: ( - canvas: var(--color-canvas-default), - canvas-mobile: var(--color-canvas-mobile), - canvas-inverse: var(--color-neutral-emphasis), - canvas-inset: var(--color-canvas-inset), - primary: var(--color-canvas-default), - // secondary - // tertiary - overlay: var(--color-canvas-overlay), - backdrop: var(--color-canvas-backdrop), - info: var(--color-accent-muted), - info-inverse: var(--color-accent-emphasis), - danger: var(--color-danger-muted), - danger-inverse: var(--color-danger-emphasis), - success: var(--color-success-muted), - success-inverse: var(--color-success-emphasis), - warning: var(--color-warning-muted), - warning-inverse: var(--color-warning-emphasis), -); From 6f5f043aa4f765a1f333750198274b27292a6a48 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 23 May 2021 16:26:17 -0500 Subject: [PATCH 20/43] Update comment --- data/colors_v2/utils/deprecated_vars.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 671e69772..a60fc285b 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -3,7 +3,7 @@ import {get} from '../../../src/utils' // Variables to be removed in the next major release // Every variable in this file must map to a functional variable (e.g. get('fg.default')). -// No hex codes (e.g. '#ff0000') or scale variables (e.g. get('scale.gray.5')) allowed. +// Don't use hex codes (e.g. '#ff0000') or scale variables (e.g. get('scale.gray.5')). export default { text: { From 8daffaf9d91d97dbca274967c3b7e8f674a32a20 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 23 May 2021 17:57:18 -0500 Subject: [PATCH 21/43] Remove dead code --- script/lib/mode-collection.ts | 16 +------ script/lib/scss.ts | 80 ------------------------------- script/lib/variable-collection.ts | 59 +---------------------- 3 files changed, 3 insertions(+), 152 deletions(-) delete mode 100644 script/lib/scss.ts diff --git a/script/lib/mode-collection.ts b/script/lib/mode-collection.ts index debbc9e3c..cbb5928ec 100644 --- a/script/lib/mode-collection.ts +++ b/script/lib/mode-collection.ts @@ -1,9 +1,8 @@ -import flatMap from 'lodash/flatMap' import chalk from 'chalk' -import VariableCollection, {ModeVariable} from './variable-collection' -import {SassMap} from './scss' +import flatMap from 'lodash/flatMap' import isNumber from 'lodash/isNumber' import isString from 'lodash/isString' +import VariableCollection, {ModeVariable} from './variable-collection' export default class ModeCollection { public readonly type: string @@ -15,17 +14,6 @@ export default class ModeCollection { this.prefix = prefix } - public addFromSassExports(name: string, data: SassMap) { - let parent: string | null = null - if (data.value.__parent) { - parent = data.value.__parent.value as string - delete data.value.__parent - } - const vars = new VariableCollection(name, this.prefix, parent) - vars.addFromSassExports(data) - this.add(name, vars) - } - public add(modeName: string, vars: VariableCollection) { this.modes.set(modeName, vars) } diff --git a/script/lib/scss.ts b/script/lib/scss.ts deleted file mode 100644 index 97ccd512a..000000000 --- a/script/lib/scss.ts +++ /dev/null @@ -1,80 +0,0 @@ -import {render as renderSass, Document} from 'sass-extract' - -export type SassValue = SassMap | SassList | SassColor | SassNumber | SassString - -export interface SassColor { - type: 'SassColor' - value: SassColorValue -} - -export interface SassMap { - type: 'SassMap' - value: SassMapValue -} - -export interface SassList { - type: 'SassList' - value: SassValue[] -} - -export interface SassNumber { - type: 'SassNumber' - value: number - unit: string -} - -export interface SassString { - type: 'SassString' - value: string -} - -export interface SassColorValue { - r: number - g: number - b: number - a: number - hex: string -} - -export interface SassMapValue { - [key: string]: SassValue -} - -export async function parseScssFile(file: string): Promise { - const {vars} = await renderSass({file}) - return {vars} -} - -export function stringifySassPrimitive(val: SassValue): string { - switch (val.type) { - case 'SassColor': - return sassColorToString(val.value) - case 'SassNumber': - return `${val.value}${val.unit}` - case 'SassString': - return val.value - default: - throw new Error(`Cannot stringify Sass value type: ${val.type}`) - } -} - -function sassColorToString({r, g, b, a, hex}: SassColorValue): string { - return a === 1 ? hex : `rgba(${r},${g},${b},${a})` -} - -export function renderSassList(val: SassList): string | string[] { - // A homogeneous Sass list means the list is probably a list of values, - // e.g. a list of colors in a scale. Otherwise, it is likely a list - // of CSS primitives, like `inset 0 1px 0 black`, and should be - // joined into a single string value. - if (isSassListHomogeneous(val)) { - return val.value.map(stringifySassPrimitive) - } else { - return val.value.map(stringifySassPrimitive).join(' ') - } -} - -export function isSassListHomogeneous(val: SassList) { - const firstType = val.value[0].type - return val.value.every(item => item.type === firstType) -} diff --git a/script/lib/variable-collection.ts b/script/lib/variable-collection.ts index 8c159170a..03f84bec1 100644 --- a/script/lib/variable-collection.ts +++ b/script/lib/variable-collection.ts @@ -1,12 +1,8 @@ -import chalk from 'chalk' import flatten from 'flat' -import kebabCase from 'lodash/kebabCase' import isString from 'lodash/isString' +import kebabCase from 'lodash/kebabCase' import set from 'lodash/set' import {resolveValue} from '../../src/utils' -import {renderSassList, SassMap, stringifySassPrimitive} from './scss' - -function exhaustiveCheck(anything: never) {} type PathItem = string | number @@ -16,8 +12,6 @@ export interface ModeVariable { value: any } -const CSS_VAR_REGEX = /var\(--(.*)\)/ - export default class VariableCollection { public readonly name: string public readonly prefix: string @@ -30,12 +24,6 @@ export default class VariableCollection { this.parent = parent } - public addFromSassExports(data: SassMap) { - this.iterateVarsFromSassExports(data, (path: PathItem[], value: any) => { - this.add(path, value) - }) - } - public addFromObject(data: Record) { const flattened: Record = flatten(data) @@ -45,51 +33,6 @@ export default class VariableCollection { } } - private iterateVarsFromSassExports( - data: SassMap, - callback: (path: PathItem[], value: any) => void, - path: string[] = [] - ) { - for (let key of Object.keys(data.value)) { - // [MKT] Numeric keys for Sass maps are not supported due to - // lookup semantics in non-CSS projects (like Primer React) - if (!isNaN(Number(key))) { - console.log( - chalk`{bold.red [FATAL]} Map keys cannot be numeric; found numeric key {bold.red ${key}} in ${path.join( - '-' - )}-${key} in mode ${this.name}` - ) - process.exit(1) - } - - if (key === 'grey') { - // [MKT] The Sass parser seems to automatically change `gray` to `grey` during parsing??? - // Thanks Sass, but we'll keep our original spelling. - data.value['gray'] = data.value['grey'] - delete data.value['grey'] - key = 'gray' - } - - const newPath = [...path, key] - const val = data.value[key] - switch (val.type) { - case 'SassColor': - case 'SassNumber': - case 'SassString': - callback(newPath, stringifySassPrimitive(val)) - break - case 'SassList': - callback(newPath, renderSassList(val)) - break - case 'SassMap': - this.iterateVarsFromSassExports(val, callback, newPath) - break - default: - exhaustiveCheck(val) - } - } - } - public add(path: PathItem[], value: any) { if (Array.isArray(value)) { for (const idx in value) { From 7d4168e3e1a314338113c491f7a29d2ce8bf827e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 23 May 2021 18:01:08 -0500 Subject: [PATCH 22/43] Convert typography to TS --- data/typography/index.ts | 10 ++++++++++ data/typography/normal.scss | 18 ------------------ 2 files changed, 10 insertions(+), 18 deletions(-) create mode 100644 data/typography/index.ts delete mode 100644 data/typography/normal.scss diff --git a/data/typography/index.ts b/data/typography/index.ts new file mode 100644 index 000000000..4d51f0818 --- /dev/null +++ b/data/typography/index.ts @@ -0,0 +1,10 @@ +export default { + normal: { + fontSize: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'], + lineHeight: { + condensedUltra: 1, + condensed: 1.25, + default: 1.5 + } + } +} diff --git a/data/typography/normal.scss b/data/typography/normal.scss deleted file mode 100644 index 4953817b6..000000000 --- a/data/typography/normal.scss +++ /dev/null @@ -1,18 +0,0 @@ -$export: ( - font-size: ( - 12px, - 14px, - 16px, - 20px, - 24px, - 32px, - 40px, - 48px - ), - - line-height: ( - condensed-ultra: 1, - condensed: 1.25, - default: 1.5 - ) -); From 69dd4231b02d29d4d9349327fd61cb51612afbf9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 23 May 2021 18:02:23 -0500 Subject: [PATCH 23/43] Convert spacing to TS --- data/spacing/index.ts | 5 ++ data/spacing/normal.scss | 127 --------------------------------------- 2 files changed, 5 insertions(+), 127 deletions(-) create mode 100644 data/spacing/index.ts delete mode 100644 data/spacing/normal.scss diff --git a/data/spacing/index.ts b/data/spacing/index.ts new file mode 100644 index 000000000..a97d7f3f1 --- /dev/null +++ b/data/spacing/index.ts @@ -0,0 +1,5 @@ +export default { + normal: { + spacer: ['0', '4px', '8px', '16px', '24px', '32px', '40px'] + } +} diff --git a/data/spacing/normal.scss b/data/spacing/normal.scss deleted file mode 100644 index ce44b474f..000000000 --- a/data/spacing/normal.scss +++ /dev/null @@ -1,127 +0,0 @@ -// These are our margin and padding utility spacers. The default step size we -// use is 8px. This gives us a key of: -// 0 => 0px -// 1 => 4px -// 2 => 8px -// 3 => 16px -// 4 => 24px -// 5 => 32px -// 6 => 40px -$spacer: 8px !default; - - - -// Our spacing scale -$spacer-0: 0 !default; // 0 -$spacer-1: round($spacer / 2) !default; // 4px -$spacer-2: $spacer !default; // 8px -$spacer-3: $spacer * 2 !default; // 16px -$spacer-4: $spacer * 3 !default; // 24px -$spacer-5: $spacer * 4 !default; // 32px -$spacer-6: $spacer * 5 !default; // 40px - -// The list of spacer values -$spacers: ( - $spacer-0, - $spacer-1, - $spacer-2, - $spacer-3, - $spacer-4, - $spacer-5, - $spacer-6, -) !default; - -// And the map of spacers, for easier looping: -// @each $scale, $length in $spacer-map { ... } -$spacer-map: ( - 0: $spacer-0, - 1: $spacer-1, - 2: $spacer-2, - 3: $spacer-3, - 4: $spacer-4, - 5: $spacer-5, - 6: $spacer-6, -) !default; - -// Em spacer variables -$em-spacer-1: 0.0625em !default; // 1/16 -$em-spacer-2: 0.125em !default; // 1/8 -$em-spacer-3: 0.25em !default; // 1/4 -$em-spacer-4: 0.375em !default; // 3/8 -$em-spacer-5: 0.5em !default; // 1/2 -$em-spacer-6: 0.75em !default; // 3/4 - -// Size scale -// Used for buttons, inputs, labels, avatars etc. -$size: 16px !default; - -$size-0: 0 !default; -$size-1: $size !default; // 16px -$size-2: $size-1 + 4px !default; // 20px -$size-3: $size-2 + 4px !default; // 24px -$size-4: $size-3 + 4px !default; // 28px -$size-5: $size-4 + 4px !default; // 32px -$size-6: $size-5 + 8px !default; // 40px -$size-7: $size-6 + 8px !default; // 48px -$size-8: $size-7 + 16px !default; // 64px - -// Fixed-width container variables -$container-width: 980px !default; -$grid-gutter: 10px !default; - -// Breakpoint widths -$width-xs: 0 !default; -// Small screen / phone -$width-sm: 544px !default; -// Medium screen / tablet -$width-md: 768px !default; -// Large screen / desktop (980 + (16 * 2)) <= container + gutters -$width-lg: 1012px !default; -// Extra large screen / wide desktop -$width-xl: 1280px !default; - -// Responsive container widths -$container-sm: $width-sm !default; -$container-md: $width-md !default; -$container-lg: $width-lg !default; -$container-xl: $width-xl !default; - -// Breakpoints in the form (name: length) -$breakpoints: ( - sm: $width-sm, - md: $width-md, - lg: $width-lg, - xl: $width-xl -) !default; - -// This map in the form (breakpoint: variant) is used to iterate over -// breakpoints and create both responsive and non-responsive classes in one -// loop: -// -// ```scss -// @each $breakpoint, $variant of $responsive-variants { -// @include breakpoint($breakpoint) { -// .foo#{$variant}-bar { foo: bar !important; } -// } -// } -// ``` -$responsive-variants: ( - "": "", - sm: "-sm", - md: "-md", - lg: "-lg", - xl: "-xl", -) !default; - -// responive utility position values -$responsive-positions: ( - static, - relative, - absolute, - fixed, - sticky -) !default; - -$export: ( - spacer: $spacers, -); From ee7d72edf5a59ed62b74841c0e6687ed6a15bba2 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 10:50:10 -0500 Subject: [PATCH 24/43] Add more variables --- data/colors_v2/dark.ts | 23 ++++++++ data/colors_v2/light.ts | 23 ++++++++ data/colors_v2/utils/deprecated_vars.ts | 77 +++++++++++++++++++++++-- 3 files changed, 119 insertions(+), 4 deletions(-) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 75af9bfcd..341aabbd8 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -101,6 +101,12 @@ const vars = { default: get('scale.gray.6'), divider: get('scale.gray.7') }, + shadow: { + small: '0 0 transparent', + medium: (theme: any) => `0 3px 6px ${get('scale.black')(theme)}`, + large: (theme: any) => `0 8px 24px ${get('scale.black')(theme)}`, + extraLarge: (theme: any) => `0 12px 48px ${get('scale.black')(theme)}` + }, // Roles neutral: { @@ -150,6 +156,23 @@ const vars = { emphasis: get('scale.pink.5'), highlighter: alpha(get('scale.pink.4'), 0.4), muted: alpha(get('scale.pink.4'), 0.1) + }, + + // Only meant for Primer components + primer: { + canvas: { + background: alpha(get('scale.black'), 0.8), // use for modal/dialogs + sticky: alpha(get('scale.gray.9'), 0.95) // use for sticky headers + }, + border: { + active: '#F78166', // coral + contrast: alpha(get('scale.white'), 0.2) // use to increase contrast + }, + shadow: { + highlight: '0 0 transparent', // top highlight + inset: '0 0 transparent', // top inner shadow + focus: (theme: any) => `0 0 0 3px ${get('scale.blue.8')(theme)}` // blue focus ring + } } } diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index ad13ec0ce..051f2a777 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -100,6 +100,12 @@ const vars = { default: get('scale.gray.2'), divider: lighten(get('scale.gray.2'), 0.03) }, + shadow: { + small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, + medium: (theme: any) => `0 3px 6px ${alpha(get('scale.gray.4'), 0.15)(theme)}`, + large: (theme: any) => `0 8px 24px ${alpha(get('scale.gray.4'), 0.2)(theme)}`, + extraLarge: (theme: any) => `0 12px 28px ${alpha(get('scale.gray.4'), 0.3)(theme)}` + }, // Roles neutral: { @@ -149,6 +155,23 @@ const vars = { emphasis: get('scale.pink.5'), highlighter: get('scale.pink.2'), muted: get('scale.pink.0') + }, + + // Only meant for Primer components + primer: { + canvas: { + background: alpha(get('scale.black'), 0.5), // use for modal/dialogs + sticky: alpha(get('scale.white'), 0.95) // use for sticky headers + }, + border: { + active: '#f9826c', // coral + contrast: alpha(get('scale.black'), 0.1) // use to increase contrast + }, + shadow: { + highlight: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, // top highlight + inset: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.gray.2'), 0.2)(theme)}`, // top inner shadow + focus: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` // blue focus ring + } } } diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index a60fc285b..5db1a4a54 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -31,9 +31,9 @@ export default { border: { primary: get('border.default'), secondary: get('border.divider'), - // tertiary + tertiary: get('neutral.highlighter'), overlay: get('border.default'), - // inverse + inverse: get('fg.onEmphasis'), // or move to marketing info: get('accent.emphasis'), danger: get('danger.emphasis'), success: get('success.emphasis'), @@ -45,8 +45,8 @@ export default { canvasInverse: get('neutral.emphasis'), canvasInset: get('canvas.inset'), primary: get('canvas.default'), - // secondary - // teritary + secondary: get('neutral.muted'), + teritiary: get('neutral.muted'), overlay: get('canvas.overlay'), backdrop: get('canvas.backdrop'), info: get('accent.muted'), @@ -57,5 +57,74 @@ export default { successInverse: get('success.emphasis'), warning: get('warning.muted'), warningInverse: get('warning.emphasis') + }, + state: { + state: { + hover: { + primaryBg: get('accent.emphasis'), + primaryBorder: get('accent.emphasis'), + primaryText: get('fg.onEmphasis'), + primaryIcon: get('fg.onEmphasis'), + secondaryBg: get('neutral.muted'), + secondaryBorder: get('neutral.muted') + }, + + selected: { + primaryBg: get('accent.emphasis'), + primaryBorder: get('accent.emphasis'), + primaryText: get('fg.onEmphasis'), + primaryIcon: get('fg.onEmphasis') + }, + + focus: { + border: get('accent.emphasis'), + shadow: get('primer.shadow.focus') // blue focus ring + } + } + }, + alert: { + info: { + text: get('fg.default'), + icon: get('accent.fg'), + bg: get('accent.muted'), + border: get('accent.highlighter') + }, + warn: { + text: get('fg.default'), + icon: get('warning.fg'), + bg: get('warning.muted'), + border: get('warning.highlighter') + }, + error: { + text: get('fg.default'), + icon: get('danger.fg'), + bg: get('danger.muted'), + border: get('danger.highlighter') + }, + success: { + text: get('fg.default'), + icon: get('success.fg'), + bg: get('success.muted'), + border: get('success.highlighter') + } + }, + autocomplete: { + shadow: get('shadow.medium'), + rowBorder: get('border.divider') + }, + blankslate: { + icon: get('fg.muted') + }, + counter: { + text: get('fg.default'), + bg: get('neutral.muted'), + primary: { + text: get('fg.onEmphasis'), + bg: get('neutral.emphasis') + }, + secondary: { + text: get('fg.muted'), + bg: get('neutral.muted') + } } } From 67972d79a5b31f1af296a754e66e424651d18f41 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 16:24:08 -0500 Subject: [PATCH 25/43] Add more variables --- data/colors/dark.ts | 1019 +++++++++++++++++++++++++++++++++ data/colors/dark_dimmed.ts | 86 +++ data/colors/index.ts | 9 + data/colors/light.ts | 1004 ++++++++++++++++++++++++++++++++ data/colors_v2/dark_dimmed.ts | 86 +++ data/colors_v2/index.ts | 2 + src/utils.ts | 24 +- 7 files changed, 2223 insertions(+), 7 deletions(-) create mode 100644 data/colors/dark.ts create mode 100644 data/colors/dark_dimmed.ts create mode 100644 data/colors/index.ts create mode 100644 data/colors/light.ts create mode 100644 data/colors_v2/dark_dimmed.ts diff --git a/data/colors/dark.ts b/data/colors/dark.ts new file mode 100644 index 000000000..2b1474703 --- /dev/null +++ b/data/colors/dark.ts @@ -0,0 +1,1019 @@ +import {alpha, darken, get, lighten, desaturate, mix} from '../../src/utils' + +const mktg = { + blue: { + primary: '#4969ed', + secondary: '#3355e0' + }, + green: { + primary: '#2ea44f', + secondary: '#22863a' + }, + purple: { + primary: '#6f57ff', + secondary: '#614eda' + } +} + +export default { + scale: { + black: '#010409', + white: '#f0f6fc', + gray: [ + '#f0f6fc', + '#c9d1d9', + '#b1bac4', + '#8b949e', + '#6e7681', + '#484f58', + '#30363d', + '#21262d', + '#161b22', + '#0d1117' + ], + blue: [ + '#cae8ff', + '#a5d6ff', + '#79c0ff', + '#58a6ff', + '#388bfd', + '#1f6feb', + '#1158c7', + '#0d419d', + '#0c2d6b', + '#051d4d' + ], + green: [ + '#aff5b4', + '#7ee787', + '#56d364', + '#3fb950', + '#2ea043', + '#238636', + '#196c2e', + '#0f5323', + '#033a16', + '#04260f' + ], + yellow: [ + '#f8e3a1', + '#f2cc60', + '#e3b341', + '#d29922', + '#bb8009', + '#9e6a03', + '#845306', + '#693e00', + '#4b2900', + '#341a00' + ], + orange: [ + '#ffdfb6', + '#ffc680', + '#ffa657', + '#f0883e', + '#db6d28', + '#bd561d', + '#9b4215', + '#762d0a', + '#5a1e02', + '#3d1300' + ], + red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], + purple: [ + '#eddeff', + '#e2c5ff', + '#d2a8ff', + '#bc8cff', + '#a371f7', + '#8957e5', + '#6e40c9', + '#553098', + '#3c1e70', + '#271052' + ], + pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] + }, + auto: { + black: get('scale.white'), + white: get('scale.black'), + gray: [ + get('scale.gray.9'), + get('scale.gray.8'), + get('scale.gray.7'), + get('scale.gray.6'), + get('scale.gray.5'), + get('scale.gray.4'), + get('scale.gray.3'), + get('scale.gray.2'), + get('scale.gray.1'), + get('scale.gray.0') + ], + blue: [ + get('scale.blue.9'), + get('scale.blue.8'), + get('scale.blue.7'), + get('scale.blue.6'), + get('scale.blue.5'), + get('scale.blue.4'), + get('scale.blue.3'), + get('scale.blue.2'), + get('scale.blue.1'), + get('scale.blue.0') + ], + green: [ + get('scale.green.9'), + get('scale.green.8'), + get('scale.green.7'), + get('scale.green.6'), + get('scale.green.5'), + get('scale.green.4'), + get('scale.green.3'), + get('scale.green.2'), + get('scale.green.1'), + get('scale.green.0') + ], + yellow: [ + get('scale.yellow.9'), + get('scale.yellow.8'), + get('scale.yellow.7'), + get('scale.yellow.6'), + get('scale.yellow.5'), + get('scale.yellow.4'), + get('scale.yellow.3'), + get('scale.yellow.2'), + get('scale.yellow.1'), + get('scale.yellow.0') + ], + orange: [ + get('scale.orange.9'), + get('scale.orange.8'), + get('scale.orange.7'), + get('scale.orange.6'), + get('scale.orange.5'), + get('scale.orange.4'), + get('scale.orange.3'), + get('scale.orange.2'), + get('scale.orange.1'), + get('scale.orange.0') + ], + red: [ + get('scale.red.9'), + get('scale.red.8'), + get('scale.red.7'), + get('scale.red.6'), + get('scale.red.5'), + get('scale.red.4'), + get('scale.red.3'), + get('scale.red.2'), + get('scale.red.1'), + get('scale.red.0') + ], + purple: [ + get('scale.purple.9'), + get('scale.purple.8'), + get('scale.purple.7'), + get('scale.purple.6'), + get('scale.purple.5'), + get('scale.purple.4'), + get('scale.purple.3'), + get('scale.purple.2'), + get('scale.purple.1'), + get('scale.purple.0') + ], + pink: [ + get('scale.pink.9'), + get('scale.pink.8'), + get('scale.pink.7'), + get('scale.pink.6'), + get('scale.pink.5'), + get('scale.pink.4'), + get('scale.pink.3'), + get('scale.pink.2'), + get('scale.pink.1'), + get('scale.pink.0') + ] + }, + text: { + primary: get('scale.gray.1'), + secondary: get('scale.gray.3'), + tertiary: get('scale.gray.3'), + placeholder: get('scale.gray.5'), + disabled: get('scale.gray.5'), + inverse: get('scale.gray.9'), + link: get('scale.blue.3'), + danger: get('scale.red.4'), + success: get('scale.green.2'), + warning: get('scale.yellow.2'), + white: get('scale.white') + }, + icon: { + primary: get('scale.gray.1'), + secondary: get('scale.gray.4'), + tertiary: get('scale.gray.5'), + info: get('scale.blue.3'), + danger: get('scale.red.4'), + success: get('scale.green.2'), + warning: get('scale.yellow.2') + }, + border: { + primary: get('scale.gray.6'), + secondary: get('scale.gray.7'), + tertiary: get('scale.gray.4'), + overlay: get('scale.gray.6'), + inverse: get('scale.white'), + info: alpha(get('scale.blue.4'), 0.4), + danger: alpha(get('scale.red.4'), 0.4), + success: alpha(get('scale.green.3'), 0.4), + warning: alpha(get('scale.yellow.4'), 0.4) + }, + bg: { + canvas: get('scale.gray.9'), + canvasMobile: get('scale.black'), + canvasInverse: get('scale.white'), + canvasInset: darken(get('scale.gray.9'), 0.02), + primary: get('scale.gray.9'), + secondary: get('scale.gray.9'), + tertiary: get('scale.gray.8'), + overlay: mix(get('scale.gray.7'), get('scale.gray.8')), + backdrop: alpha(get('scale.black'), 0.8), + info: alpha(get('scale.blue.4'), 0.1), + infoInverse: get('scale.blue.4'), + danger: alpha(get('scale.red.4'), 0.1), + dangerInverse: get('scale.red.5'), + success: alpha(get('scale.green.4'), 0.1), + successInverse: get('scale.green.4'), + warning: alpha(get('scale.yellow.4'), 0.1), + warningInverse: get('scale.yellow.4') + }, + shadow: { + small: '0 0 transparent', + medium: (theme: any) => `0 3px 6px ${get('scale.black')(theme)}`, + large: (theme: any) => `0 8px 24px ${get('scale.black')(theme)}`, + extraLarge: (theme: any) => `0 12px 48px ${get('scale.black')(theme)}`, + highlight: '0 0 transparent', + inset: '0 0 transparent' + }, + state: { + hover: { + primaryBg: get('scale.blue.5'), + primaryBorder: get('scale.blue.4'), + primaryText: get('scale.white'), + primaryIcon: get('scale.white'), + secondaryBg: get('scale.gray.8'), + secondaryBorder: get('scale.gray.8') + }, + selected: { + primaryBg: get('scale.blue.5'), + primaryBorder: get('scale.blue.4'), + primaryText: get('scale.white'), + primaryIcon: get('scale.white') + }, + focus: { + border: get('scale.blue.4'), + shadow: (theme: any) => `0 0 0 3px ${get('scale.blue.8')(theme)}` + } + }, + fade: { + fg10: get('fade.white10'), + fg15: get('fade.white15'), + fg30: get('fade.white30'), + fg50: get('fade.white50'), + fg70: get('fade.white70'), + fg85: get('fade.white85'), + black10: alpha(get('scale.black'), 0.1), + black15: alpha(get('scale.black'), 0.15), + black30: alpha(get('scale.black'), 0.3), + black50: alpha(get('scale.black'), 0.5), + black70: alpha(get('scale.black'), 0.7), + black85: alpha(get('scale.black'), 0.85), + white10: alpha(get('scale.white'), 0.1), + white15: alpha(get('scale.white'), 0.15), + white30: alpha(get('scale.white'), 0.3), + white50: alpha(get('scale.white'), 0.5), + white70: alpha(get('scale.white'), 0.7), + white85: alpha(get('scale.white'), 0.85) + }, + alert: { + info: { + text: get('scale.blue.2'), + icon: get('scale.blue.2'), + bg: alpha(get('scale.blue.4'), 0.1), + border: alpha(get('scale.blue.4'), 0.4) + }, + warn: { + text: get('scale.yellow.2'), + icon: get('scale.yellow.2'), + bg: alpha(get('scale.yellow.4'), 0.1), + border: alpha(get('scale.yellow.4'), 0.4) + }, + error: { + text: get('scale.red.3'), + icon: get('scale.red.3'), + bg: alpha(get('scale.red.4'), 0.1), + border: alpha(get('scale.red.4'), 0.4) + }, + success: { + text: get('scale.green.2'), + icon: get('scale.green.2'), + bg: alpha(get('scale.green.4'), 0.1), + border: alpha(get('scale.green.4'), 0.4) + } + }, + autocomplete: { + shadow: (theme: any) => `0 16px 32px ${alpha(get('scale.black'), 0.85)(theme)}`, + rowBorder: get('scale.gray.6') + }, + blankslate: { + icon: lighten(get('scale.gray.5'), 0.05) + }, + btn: { + text: get('scale.gray.1'), + bg: get('scale.gray.7'), + border: get('scale.gray.6'), + shadow: '0 0 transparent', + insetShadow: '0 0 transparent', + hoverBg: get('scale.gray.6'), + hoverBorder: get('scale.gray.3'), + activeBg: darken(get('scale.gray.6'), 0.03), + activeBorder: get('scale.gray.4'), + selectedBg: get('scale.gray.8'), + focusBg: get('scale.gray.7'), + focusBorder: get('scale.gray.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.gray.3'), 0.3)(theme)}`, + shadowActive: (theme: any) => `inset 0 0.15em 0.3em ${alpha(get('scale.black'), 0.15)(theme)}`, + shadowInputFocus: (theme: any) => `0 0 0 0.2em ${alpha(get('scale.blue.5'), 0.3)(theme)}`, + primary: { + text: '#ffffff', + bg: get('scale.green.5'), + border: get('scale.green.4'), + shadow: '0 0 transparent', + insetShadow: '0 0 transparent', + hoverBg: get('scale.green.4'), + hoverBorder: get('scale.green.3'), + selectedBg: get('scale.green.5'), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.white'), 0.5), + disabledBg: alpha(get('scale.green.5'), 0.6), + disabledBorder: 'transparent', + focusBg: get('scale.green.5'), + focusBorder: get('scale.green.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha('#2ea44f', 0.4)(theme)}`, + icon: get('scale.white'), + counterBg: alpha(get('scale.white'), 0.2) + }, + outline: { + text: get('scale.blue.3'), + hoverText: get('scale.blue.3'), + hoverBg: get('scale.gray.6'), + hoverBorder: get('scale.blue.3'), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), + selectedText: get('scale.white'), + selectedBg: get('scale.blue.7'), + selectedBorder: get('fade.white10'), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.blue.5'), 0.5), + disabledBg: get('scale.gray.9'), + disabledCounterBg: alpha(get('scale.blue.5'), 0.05), + focusBorder: get('scale.blue.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.blue.5'), 0.1) + }, + danger: { + text: get('scale.red.4'), + hoverText: '#ffffff', + hoverBg: get('scale.red.5'), + hoverBorder: get('scale.red.4'), + hoverShadow: '0 0 transparent', + hoverInsetShadow: '0 0 transparent', + hoverCounterBg: alpha('#fff', 0.2), + selectedText: '#ffffff', + selectedBg: get('scale.red.6'), + selectedBorder: get('fade.white10'), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.red.4'), 0.5), + disabledBg: get('scale.gray.9'), + disabledCounterBg: alpha(get('scale.red.5'), 0.05), + focusBorder: get('scale.red.4'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.red.5'), 0.1), + icon: get('scale.red.4'), + hoverIcon: get('scale.white') + }, + counterBg: get('scale.gray.6') + }, + counter: { + text: get('scale.gray.1'), + bg: get('scale.gray.6'), + primary: { + text: get('scale.gray.1'), + bg: get('scale.gray.4') + }, + secondary: { + text: get('scale.gray.3'), + bg: alpha(get('scale.gray.3'), 0.2) + } + }, + dropdown: { + shadow: (theme: any) => `0 16px 32px ${alpha(get('scale.black'), 0.85)(theme)}` + }, + label: { + border: get('scale.gray.6'), + primary: { + text: get('scale.gray.2'), + border: get('scale.gray.4') + }, + secondary: { + text: get('scale.gray.3'), + border: get('scale.gray.6') + }, + info: { + text: get('scale.blue.4'), + border: alpha(get('scale.blue.4'), 0.4) + }, + success: { + text: get('scale.green.3'), + border: alpha(get('scale.green.4'), 0.4) + }, + warning: { + text: get('scale.yellow.2'), + border: alpha('#F2D35B', 0.4) + }, + danger: { + text: get('scale.red.4'), + border: alpha(get('scale.red.4'), 0.4) + }, + orange: { + text: get('scale.orange.4'), + border: alpha(get('scale.orange.4'), 0.4) + } + }, + input: { + bg: get('scale.gray.9'), + contrastBg: alpha(get('scale.black'), 0.5), + border: get('scale.gray.7'), + shadow: '0 0 transparent', + disabledBg: get('scale.gray.8'), + disabledBorder: get('scale.gray.6'), + warningBorder: get('scale.yellow.3'), + errorBorder: get('scale.red.4'), + tooltip: { + success: { + text: get('scale.green.2'), + bg: mix(get('scale.gray.9'), get('scale.green.4'), 0.1), + border: mix(get('scale.gray.9'), get('scale.green.4'), 0.46) + }, + warning: { + text: get('scale.yellow.2'), + bg: mix(get('scale.gray.9'), get('scale.yellow.4'), 0.1), + border: mix(get('scale.gray.9'), get('scale.yellow.4'), 0.46) + }, + error: { + text: get('scale.red.3'), + bg: mix(get('scale.gray.9'), get('scale.red.4'), 0.1), + border: mix(get('scale.gray.9'), get('scale.red.4'), 0.46) + } + } + }, + avatar: { + bg: get('fade.white10'), + border: get('fade.white10'), + stackFade: get('scale.gray.6'), + stackFadeMore: get('scale.gray.7'), + childShadow: (theme: any) => `-2px -2px 0 ${get('scale.gray.9')(theme)}` + }, + toast: { + text: get('text.primary'), + bg: get('scale.gray.6'), + border: get('scale.gray.4'), + shadow: get('shadow.large'), + icon: get('scale.white'), + iconBg: get('scale.blue.5'), + iconBorder: get('scale.blue.4'), + success: { + text: get('text.primary'), + border: get('scale.gray.4'), + icon: get('scale.white'), + iconBg: get('scale.green.4'), + iconBorder: get('scale.green.3') + }, + warning: { + text: get('text.primary'), + border: get('scale.gray.4'), + icon: get('scale.white'), + iconBg: get('scale.yellow.4'), + iconBorder: get('scale.yellow.3') + }, + danger: { + text: get('text.primary'), + border: get('scale.gray.4'), + icon: get('scale.white'), + iconBg: get('scale.red.5'), + iconBorder: get('scale.red.4') + }, + loading: { + text: get('text.primary'), + border: get('scale.gray.4'), + icon: get('scale.white'), + iconBg: get('scale.gray.4'), + iconBorder: get('scale.gray.3') + } + }, + timeline: { + text: get('scale.gray.2'), + badgeBg: get('scale.gray.9'), + badgeSuccessBorder: get('scale.green.4'), + targetBadgeBorder: get('scale.blue.5'), + targetBadgeShadow: get('scale.blue.7') + }, + selectMenu: { + borderSecondary: get('scale.gray.6'), + shadow: (theme: any) => `0 0 18px ${alpha(get('scale.black'), 0.4)(theme)}`, + backdropBg: get('fade.black50'), + backdropBorder: get('scale.gray.5'), + tapHighlight: alpha(get('scale.gray.6'), 0.5), + tapFocusBg: get('scale.blue.8') + }, + box: { + blueBorder: get('scale.blue.7'), + rowYellowBg: alpha('#EBC440', 0.1), + rowBlueBg: alpha(get('scale.blue.2'), 0.1), + headerBlueBg: get('scale.gray.9'), + headerBlueBorder: get('scale.gray.6'), + borderInfo: alpha(get('scale.blue.4'), 0.4), + bgInfo: alpha(get('scale.blue.4'), 0.1), + borderWarning: alpha(get('scale.yellow.4'), 0.4), + bgWarning: alpha(get('scale.yellow.4'), 0.1) + }, + branchName: { + text: get('scale.gray.1'), + icon: get('scale.gray.2'), + bg: alpha(get('scale.blue.3'), 0.1), + link: { + text: get('scale.blue.3'), + icon: get('scale.blue.3'), + bg: alpha(get('scale.blue.3'), 0.1) + } + }, + markdown: { + codeBg: alpha(get('scale.gray.0'), 0.15), + frameBorder: lighten(get('scale.gray.6'), 0.05), + blockquoteBorder: lighten(get('scale.gray.6'), 0.05), + tableBorder: lighten(get('scale.gray.6'), 0.05), + tableTrBorder: darken(get('scale.gray.6'), 0.04) + }, + menu: { + headingText: get('scale.gray.3'), + borderActive: '#f78166', + bgActive: get('scale.gray.8') + }, + sidenav: { + selectedBg: get('scale.gray.7'), + borderActive: '#f78166' + }, + header: { + text: get('fade.white70'), + bg: get('scale.gray.8'), + logo: get('scale.white') + }, + filterItem: { + barBg: darken(get('scale.gray.8'), 0.02) + }, + hiddenTextExpander: { + bg: get('scale.gray.7'), + bgHover: get('scale.gray.6') + }, + dragAndDrop: { + border: darken(get('scale.gray.6'), 0.05) + }, + uploadEnabled: { + border: lighten(get('scale.gray.6'), 0.05), + borderFocused: lighten(get('scale.blue.5'), 0.8) + }, + previewableCommentForm: { + border: darken(get('scale.gray.6'), 0.05) + }, + underlinenav: { + border: alpha(get('scale.gray.6'), 0), + borderHover: get('scale.gray.6'), + borderActive: '#f78166', + text: get('scale.gray.3'), + textHover: get('scale.gray.1'), + textActive: get('scale.gray.1'), + icon: get('scale.gray.4'), + iconHover: get('scale.gray.1'), + iconActive: get('scale.gray.1'), + counterText: get('scale.gray.3'), + counterBg: alpha(get('scale.gray.3'), 0.2) + }, + verifiedBadge: { + text: get('scale.green.3'), + bg: alpha(get('scale.green.3'), 0.1), + border: alpha(get('scale.green.3'), 0.4) + }, + socialCount: { + bg: get('scale.gray.7') + }, + tooltip: { + text: get('scale.white'), + bg: get('scale.gray.4') + }, + headerSearch: { + bg: get('scale.gray.9'), + border: get('scale.gray.7') + }, + searchKeyword: { + hl: alpha(get('scale.yellow.4'), 0.4) + }, + diffstat: { + neutralBg: get('scale.gray.6'), + neutralBorder: get('fade.white10'), + deletionBg: get('scale.red.5'), + deletionBorder: get('scale.red.4'), + additionBg: get('scale.green.5'), + additionBorder: get('scale.green.4') + }, + mktg: { + success: mix(get('scale.green.5'), get('scale.green.4')), + info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42), + bgShadeGradient: { + top: alpha(get('scale.black'), 0.065), + bottom: alpha(get('scale.black'), 0) + }, + btn: { + bg: { + top: lighten(mktg.blue.primary, 0.05), + bottom: mktg.blue.primary + }, + bgOverlay: { + top: lighten(mktg.blue.secondary, 0.05), + bottom: mktg.blue.secondary + }, + text: get('scale.white'), + primary: { + bg: { + top: lighten(mktg.green.primary, 0.05), + bottom: mktg.green.primary + }, + bgOverlay: { + top: lighten(mktg.green.secondary, 0.05), + bottom: mktg.green.secondary + }, + text: get('scale.white') + }, + enterprise: { + bg: { + top: lighten(mktg.purple.primary, 0.05), + bottom: mktg.purple.primary + }, + bgOverlay: { + top: lighten(mktg.purple.secondary, 0.05), + bottom: mktg.purple.secondary + }, + text: get('scale.white') + }, + outline: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.3), + hover: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.5) + }, + focus: { + border: get('scale.white'), + borderInset: alpha(get('scale.white'), 0.5) + } + }, + dark: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.3), + hover: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.5) + }, + focus: { + border: get('scale.white'), + borderInset: alpha(get('scale.white'), 0.5) + } + } + } + }, + filesExplorerIcon: get('scale.gray.4'), + hlAuthorBg: get('scale.blue.9'), + hlAuthorBorder: get('scale.blue.7'), + logoSubdued: get('scale.gray.6'), + discussionBorder: desaturate(get('scale.green.6'), 0.4), + discussionBgSuccess: alpha(get('scale.green.4'), 0.1), + actionsWorkflowTableStickyBg: alpha(get('scale.gray.9'), 0.95), + repoLanguageColorBorder: alpha(get('scale.white'), 0.2), + codeSelectionBg: alpha(get('scale.blue.2'), 0.3), + highlight: { + text: '#ffd467', + bg: 'rgba(204,143,44,0.38)' + }, + blob: { + lineHighlightBg: alpha(get('scale.yellow.3'), 0.15), + lineHighlightBorder: get('scale.yellow.2') + }, + diff: { + addition: { + text: get('scale.green.2'), + bg: get('diffBlob.addition.lineBg'), + border: get('scale.green.6') + }, + deletion: { + text: get('scale.red.4'), + bg: get('diffBlob.deletion.lineBg'), + border: get('scale.red.6') + }, + change: { + text: get('scale.yellow.2'), + bg: get('scale.yellow.9'), + border: get('scale.yellow.5') + } + }, + diffBlob: { + numText: get('fade.white30'), + numHoverText: alpha(get('scale.white'), 0.6), + addition: { + numText: get('scale.green.3'), + numHoverText: get('scale.green.1'), + numBg: alpha(get('scale.green.4'), 0.1), + lineBg: alpha(get('scale.green.4'), 0.2), + wordBg: alpha(get('scale.green.4'), 0.55) + }, + deletion: { + numText: get('scale.red.4'), + numHoverText: get('scale.red.2'), + numBg: alpha(get('scale.red.5'), 0.1), + lineBg: alpha(get('scale.red.5'), 0.2), + wordBg: alpha(get('scale.red.5'), 0.5) + }, + hunk: { + text: get('scale.gray.3'), + numBg: alpha(get('scale.blue.3'), 0.15), + lineBg: alpha(get('scale.blue.3'), 0.1) + }, + emptyBlockBg: get('scale.gray.8'), + selectedLineHighlightBg: alpha(get('scale.yellow.4'), 0.1), + selectedLineHighlightBorder: get('scale.yellow.4'), + selectedLineHighlightMixBlendMode: 'normal', + expander: { + icon: get('scale.gray.3'), + hoverIcon: get('scale.white'), + hoverBg: get('scale.blue.5') + }, + commentButton: { + icon: get('scale.white'), + bg: get('scale.blue.5'), + gradientBg: lighten(get('scale.blue.5'), 0.05) + } + }, + globalNav: { + logo: get('scale.white'), + bg: get('scale.gray.8'), + text: get('scale.gray.1'), + icon: get('scale.gray.1'), + inputBg: get('scale.gray.9'), + inputBorder: get('scale.gray.7'), + inputIcon: get('scale.gray.7'), + inputPlaceholder: get('scale.gray.5') + }, + calendarGraph: { + dayBg: get('scale.gray.8'), + dayBorder: 'rgba(27,31,35,0.06)', + dayL1Bg: '#0e4429', + dayL2Bg: '#006d32', + dayL3Bg: '#26a641', + dayL4Bg: '#39d353', + dayL4Border: 'rgba(255,255,255,0.05)', + dayL3Border: 'rgba(255,255,255,0.05)', + dayL2Border: 'rgba(255,255,255,0.05)', + dayL1Border: 'rgba(255,255,255,0.05)' + }, + footerInvertocat: { + octicon: get('scale.gray.6'), + octiconHover: get('scale.gray.4') + }, + prState: { + draft: { + text: get('scale.gray.3'), + bg: alpha(get('scale.gray.3'), 0.1), + border: alpha(get('scale.gray.3'), 0.4) + }, + open: { + text: get('scale.green.3'), + bg: alpha(get('scale.green.3'), 0.1), + border: alpha(get('scale.green.3'), 0.4) + }, + merged: { + text: get('scale.purple.4'), + bg: alpha(get('scale.purple.3'), 0.1), + border: alpha(get('scale.purple.3'), 0.4) + }, + closed: { + text: get('scale.red.4'), + bg: alpha(get('scale.red.5'), 0.1), + border: alpha(get('scale.red.5'), 0.4) + } + }, + topicTag: { + text: get('scale.blue.3'), + bg: alpha(get('scale.blue.4'), 0.1), + hoverBg: alpha(get('scale.blue.4'), 0.2), + activeBg: alpha(get('scale.blue.4'), 0.15) + }, + mergeBox: { + successIconBg: alpha(get('scale.green.4'), 0.1), + successIconText: get('scale.green.3'), + successIconBorder: alpha(get('scale.green.4'), 0.4), + successIndicatorBg: get('scale.green.5'), + successIndicatorBorder: get('scale.green.4'), + mergedIconBg: alpha(get('scale.purple.3'), 0.1), + mergedIconText: get('scale.purple.4'), + mergedIconBorder: alpha(get('scale.purple.3'), 0.4), + mergedBoxBorder: alpha(get('scale.purple.3'), 0.4), + neutralIconBg: alpha(get('scale.gray.1'), 0.1), + neutralIconText: get('scale.gray.3'), + neutralIconBorder: alpha(get('scale.gray.1'), 0.4), + neutralIndicatorBg: get('scale.gray.5'), + neutralIndicatorBorder: get('scale.gray.4'), + warningIconBg: alpha(get('scale.yellow.4'), 0.1), + warningIconText: get('scale.yellow.2'), + warningIconBorder: alpha(get('scale.yellow.4'), 0.4), + warningBoxBorder: alpha(get('scale.yellow.4'), 0.4), + warningMergeHighlight: alpha(get('scale.yellow.4'), 0.1), + errorIconBg: alpha(get('scale.red.4'), 0.1), + errorIconText: get('scale.red.4'), + errorIconBorder: alpha(get('scale.red.4'), 0.4), + errorIndicatorBg: get('scale.red.5'), + errorIndicatorBorder: get('scale.red.4') + }, + project: { + cardBg: get('scale.gray.8'), + headerBg: get('scale.gray.9'), + sidebarBg: get('scale.gray.8'), + gradientIn: get('scale.gray.8'), + gradientOut: alpha(get('scale.gray.8'), 0) + }, + checks: { + bg: get('bg.canvasInset'), + runBorderWidth: '1px', + containerBorderWidth: '1px', + textPrimary: get('text.primary'), + textSecondary: get('text.secondary'), + textLink: get('text.link'), + btnIcon: get('icon.secondary'), + btnHoverIcon: get('text.primary'), + btnHoverBg: get('btn.hoverBg'), + inputText: get('text.secondary'), + inputPlaceholderText: get('text.placeholder'), + inputFocusText: get('text.primary'), + inputBg: get('input.bg'), + inputShadow: (theme: any) => `0 0 0 1px ${get('scale.gray.7')(theme)}`, + dropdownText: get('text.primary'), + dropdownBg: get('bg.overlay'), + dropdownBorder: get('border.overlay'), + dropdownHoverText: get('state.hover.primaryText'), + dropdownHoverBg: get('state.hover.primaryBg'), + dropdownBtnHoverText: get('state.hover.primaryText'), + dropdownBtnHoverBg: get('state.hover.secondaryBg'), + scrollbarThumbBg: get('scale.gray.6'), + headerLabelText: get('text.secondary'), + headerLabelOpenText: get('text.primary'), + headerBorder: get('border.secondary'), + headerIcon: get('icon.secondary'), + lineText: get('text.secondary'), + lineNumText: get('text.tertiary'), + lineTimestampText: get('text.tertiary'), + lineHoverBg: get('state.hover.secondaryBg'), + lineSelectedBg: get('bg.info'), + lineSelectedNumText: get('text.link'), + lineDtFmText: get('text.inverse'), + lineDtFmBg: get('scale.yellow.3'), + gateBg: alpha(get('scale.yellow.6'), 0.15), + gateText: get('text.secondary'), + gateWaitingText: get('text.warning'), + stepHeaderOpenBg: get('state.hover.secondaryBg'), + stepErrorText: get('text.danger'), + stepWarningText: get('text.warning'), + loglineText: get('scale.gray.4'), + loglineNumText: get('text.tertiary'), + loglineDebugText: get('scale.purple.3'), + loglineErrorText: get('text.secondary'), + loglineErrorNumText: get('text.tertiary'), + loglineErrorBg: get('bg.danger'), + loglineWarningText: get('text.secondary'), + loglineWarningNumText: get('text.warning'), + loglineWarningBg: get('bg.warning'), + loglineCommandText: get('scale.blue.3'), + loglineSectionText: get('text.success'), + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.8'), + white: get('scale.gray.2'), + whiteBright: get('scale.gray.2'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#76e3ea', + cyanBright: '#b3f0ff' + } + }, + introShelf: { + gradientLeft: alpha(get('scale.blue.4'), 0.1), + gradientRight: alpha(get('scale.green.4'), 0.1), + gradientIn: get('scale.gray.9'), + gradientOut: alpha(get('scale.gray.9'), 0) + }, + marketingIcon: { + primary: get('scale.blue.2'), + secondary: get('scale.blue.5') + }, + prettylights: { + syntax: { + comment: get('scale.gray.3'), + constant: get('scale.blue.2'), + entity: get('scale.purple.2'), + storageModifierImport: get('scale.gray.1'), + entityTag: get('scale.green.1'), + keyword: get('scale.red.3'), + string: get('scale.blue.1'), + variable: get('scale.orange.2'), + brackethighlighterUnmatched: get('scale.red.4'), + invalidIllegalText: get('scale.white'), + invalidIllegalBg: get('scale.red.7'), + carriageReturnText: get('scale.white'), + carriageReturnBg: get('scale.red.6'), + stringRegexp: get('scale.green.1'), + markupList: get('scale.yellow.1'), + markupHeading: get('scale.blue.5'), + markupItalic: get('scale.gray.1'), + markupBold: get('scale.gray.1'), + markupDeletedText: get('scale.red.0'), + markupDeletedBg: get('scale.red.8'), + markupInsertedText: get('scale.green.0'), + markupInsertedBg: get('scale.green.8'), + markupChangedText: get('scale.orange.0'), + markupChangedBg: get('scale.orange.8'), + markupIgnoredText: get('scale.gray.1'), + markupIgnoredBg: get('scale.blue.6'), + metaDiffRange: get('scale.purple.2'), + brackethighlighterAngle: get('scale.gray.3'), + sublimelinterGutterMark: get('scale.gray.5'), + constantOtherReferenceLink: get('scale.blue.1') + } + }, + codemirror: { + text: get('scale.gray.1'), + bg: get('bg.canvas'), + guttersBg: get('bg.canvas'), + guttermarkerText: get('scale.gray.9'), + guttermarkerSubtleText: get('scale.gray.4'), + linenumberText: get('scale.gray.3'), + cursor: get('scale.white'), + selectionBg: get('codeSelectionBg'), + activelineBg: get('scale.gray.8'), + matchingbracketText: get('scale.gray.1'), + linesBg: get('bg.canvas'), + syntax: { + comment: get('scale.gray.3'), + constant: get('scale.blue.2'), + entity: get('scale.purple.2'), + keyword: get('scale.red.3'), + storage: get('scale.red.3'), + string: get('scale.blue.1'), + support: get('scale.blue.2'), + variable: get('scale.orange.2') + } + }, + ansi: { + black: get('scale.gray.5'), + blackBright: get('scale.gray.4'), + white: get('scale.gray.2'), + whiteBright: get('scale.white'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#39c5cf', + cyanBright: '#56d4dd' + } +} diff --git a/data/colors/dark_dimmed.ts b/data/colors/dark_dimmed.ts new file mode 100644 index 000000000..3ea6474c5 --- /dev/null +++ b/data/colors/dark_dimmed.ts @@ -0,0 +1,86 @@ +import {merge} from '../../src/utils' +import dark from './dark' + +const vars = { + // Scales + scale: { + black: '#1c2128', + white: '#cdd9e5', + gray: [ + '#cdd9e5', + '#adbac7', + '#909dab', + '#768390', + '#636e7b', + '#545d68', + '#444c56', + '#373e47', + '#2d333b', + '#22272e' + ], + blue: [ + '#c6e6ff', + '#96d0ff', + '#6cb6ff', + '#539bf5', + '#4184e4', + '#316dca', + '#255ab2', + '#1b4b91', + '#143d79', + '#0f2d5c' + ], + green: [ + '#b4f1b4', + '#8ddb8c', + '#6bc46d', + '#57ab5a', + '#46954a', + '#347d39', + '#2b6a30', + '#245829', + '#1b4721', + '#113417' + ], + yellow: [ + '#fbe090', + '#eac55f', + '#daaa3f', + '#c69026', + '#ae7c14', + '#966600', + '#805400', + '#6c4400', + '#593600', + '#452700' + ], + orange: [ + '#ffddb0', + '#ffbc6f', + '#f69d50', + '#e0823d', + '#cc6b2c', + '#ae5622', + '#94471b', + '#7f3913', + '#682d0f', + '#4d210c' + ], + red: ['#ffd8d3', '#ffb8b0', '#ff938a', '#f47067', '#e5534b', '#c93c37', '#ad2e2c', '#922323', '#78191b', '#78191b'], + purple: [ + '#eedcff', + '#dcbdfb', + '#dcbdfb', + '#b083f0', + '#986ee2', + '#8256d0', + '#6b44bc', + '#5936a2', + '#472c82', + '#352160' + ], + pink: ['#ffd7eb', '#ffb3d8', '#fc8dc7', '#e275ad', '#c96198', '#ae4c82', '#983b6e', '#7e325a', '#69264a', '#551639'] + } +} + +export default merge(dark, vars) diff --git a/data/colors/index.ts b/data/colors/index.ts new file mode 100644 index 000000000..59894cd39 --- /dev/null +++ b/data/colors/index.ts @@ -0,0 +1,9 @@ +import light from './light' +import dark from './dark' +import dark_dimmed from './dark_dimmed' + +export default { + light, + dark, + dark_dimmed +} diff --git a/data/colors/light.ts b/data/colors/light.ts new file mode 100644 index 000000000..2b7487881 --- /dev/null +++ b/data/colors/light.ts @@ -0,0 +1,1004 @@ +import {alpha, get, lighten, merge} from '../../src/utils' + +export default { + scale: { + black: '#1b1f23', + white: '#ffffff', + gray: [ + '#fafbfc', + '#f6f8fa', + '#e1e4e8', + '#d1d5da', + '#959da5', + '#6a737d', + '#586069', + '#444d56', + '#2f363d', + '#24292e' + ], + blue: [ + '#f1f8ff', + '#dbedff', + '#c8e1ff', + '#79b8ff', + '#2188ff', + '#0366d6', + '#005cc5', + '#044289', + '#032f62', + '#05264c' + ], + green: [ + '#f0fff4', + '#dcffe4', + '#bef5cb', + '#85e89d', + '#34d058', + '#28a745', + '#22863a', + '#176f2c', + '#165c26', + '#144620' + ], + yellow: [ + '#fffdef', + '#fffbdd', + '#fff5b1', + '#ffea7f', + '#ffdf5d', + '#ffd33d', + '#f9c513', + '#dbab09', + '#b08800', + '#735c0f' + ], + orange: [ + '#fff8f2', + '#ffebda', + '#ffd1ac', + '#ffab70', + '#fb8532', + '#f66a0a', + '#e36209', + '#d15704', + '#c24e00', + '#a04100' + ], + red: ['#ffeef0', '#ffdce0', '#fdaeb7', '#f97583', '#ea4a5a', '#d73a49', '#cb2431', '#b31d28', '#9e1c23', '#86181d'], + purple: [ + '#f5f0ff', + '#e6dcfd', + '#d1bcf9', + '#b392f0', + '#8a63d2', + '#6f42c1', + '#5a32a3', + '#4c2889', + '#3a1d6e', + '#29134e' + ], + pink: ['#ffeef8', '#fedbf0', '#f9b3dd', '#f692ce', '#ec6cb9', '#ea4aaa', '#d03592', '#b93a86', '#99306f', '#6d224f'] + }, + auto: { + black: get('scale.black'), + white: get('scale.white'), + gray: [ + get('scale.gray.0'), + get('scale.gray.1'), + get('scale.gray.2'), + get('scale.gray.3'), + get('scale.gray.4'), + get('scale.gray.5'), + get('scale.gray.6'), + get('scale.gray.7'), + get('scale.gray.8'), + get('scale.gray.9') + ], + blue: [ + get('scale.blue.0'), + get('scale.blue.1'), + get('scale.blue.2'), + get('scale.blue.3'), + get('scale.blue.4'), + get('scale.blue.5'), + get('scale.blue.6'), + get('scale.blue.7'), + get('scale.blue.8'), + get('scale.blue.9') + ], + green: [ + get('scale.green.0'), + get('scale.green.1'), + get('scale.green.2'), + get('scale.green.3'), + get('scale.green.4'), + get('scale.green.5'), + get('scale.green.6'), + get('scale.green.7'), + get('scale.green.8'), + get('scale.green.9') + ], + yellow: [ + get('scale.yellow.0'), + get('scale.yellow.1'), + get('scale.yellow.2'), + get('scale.yellow.3'), + get('scale.yellow.4'), + get('scale.yellow.5'), + get('scale.yellow.6'), + get('scale.yellow.7'), + get('scale.yellow.8'), + get('scale.yellow.9') + ], + orange: [ + get('scale.orange.0'), + get('scale.orange.1'), + get('scale.orange.2'), + get('scale.orange.3'), + get('scale.orange.4'), + get('scale.orange.5'), + get('scale.orange.6'), + get('scale.orange.7'), + get('scale.orange.8'), + get('scale.orange.9') + ], + red: [ + get('scale.red.0'), + get('scale.red.1'), + get('scale.red.2'), + get('scale.red.3'), + get('scale.red.4'), + get('scale.red.5'), + get('scale.red.6'), + get('scale.red.7'), + get('scale.red.8'), + get('scale.red.9') + ], + purple: [ + get('scale.purple.0'), + get('scale.purple.1'), + get('scale.purple.2'), + get('scale.purple.3'), + get('scale.purple.4'), + get('scale.purple.5'), + get('scale.purple.6'), + get('scale.purple.7'), + get('scale.purple.8'), + get('scale.purple.9') + ], + pink: [ + get('scale.pink.0'), + get('scale.pink.1'), + get('scale.pink.2'), + get('scale.pink.3'), + get('scale.pink.4'), + get('scale.pink.5'), + get('scale.pink.6'), + get('scale.pink.7'), + get('scale.pink.8'), + get('scale.pink.9') + ] + }, + text: { + primary: get('scale.gray.9'), + secondary: get('scale.gray.6'), + tertiary: get('scale.gray.5'), + placeholder: get('scale.gray.5'), + disabled: get('scale.gray.4'), + inverse: get('scale.white'), + link: get('scale.blue.5'), + danger: get('scale.red.6'), + success: get('scale.green.6'), + warning: get('scale.yellow.8'), + white: get('scale.white') + }, + icon: { + primary: get('scale.gray.9'), + secondary: get('scale.gray.6'), + tertiary: get('scale.gray.4'), + info: get('scale.blue.5'), + danger: get('scale.red.5'), + success: get('scale.green.6'), + warning: get('scale.yellow.8') + }, + border: { + primary: get('scale.gray.2'), + secondary: lighten(get('scale.gray.2'), 0.03), + tertiary: get('scale.gray.3'), + overlay: get('scale.gray.2'), + inverse: get('scale.white'), + info: get('scale.blue.5'), + danger: get('scale.red.5'), + success: get('scale.green.4'), + warning: get('scale.yellow.6') + }, + bg: { + canvas: get('scale.white'), + canvasMobile: get('scale.white'), + canvasInverse: get('scale.gray.9'), + canvasInset: get('scale.gray.1'), + primary: get('scale.white'), + secondary: get('scale.gray.0'), + tertiary: get('scale.gray.1'), + overlay: get('scale.white'), + backdrop: get('fade.black50'), + info: get('scale.blue.0'), + infoInverse: get('scale.blue.5'), + danger: get('scale.red.0'), + dangerInverse: get('scale.red.5'), + success: get('scale.green.1'), + successInverse: get('scale.green.5'), + warning: get('scale.yellow.2'), + warningInverse: get('scale.yellow.5') + }, + shadow: { + small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, + medium: (theme: any) => `0 3px 6px ${alpha(get('scale.gray.4'), 0.15)(theme)}`, + large: (theme: any) => `0 8px 24px ${alpha(get('scale.gray.4'), 0.2)(theme)}`, + extraLarge: (theme: any) => `0 12px 48px ${alpha(get('scale.gray.4'), 0.3)(theme)}`, + highlight: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, + inset: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.gray.2'), 0.2)(theme)}` + }, + state: { + hover: { + primaryBg: get('scale.blue.5'), + primaryBorder: get('scale.blue.5'), + primaryText: get('scale.white'), + primaryIcon: get('scale.white'), + secondaryBg: get('scale.gray.1'), + secondaryBorder: get('scale.gray.1') + }, + selected: { + primaryBg: get('scale.blue.5'), + primaryBorder: get('scale.blue.5'), + primaryText: get('scale.white'), + primaryIcon: get('scale.white') + }, + focus: { + border: get('scale.blue.5'), + shadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` + } + }, + fade: { + fg10: get('fade.black10'), + fg15: get('fade.black15'), + fg30: get('fade.black30'), + fg50: get('fade.black50'), + fg70: get('fade.black70'), + fg85: get('fade.black85'), + black10: alpha(get('scale.black'), 0.1), + black15: alpha(get('scale.black'), 0.15), + black30: alpha(get('scale.black'), 0.3), + black50: alpha(get('scale.black'), 0.5), + black70: alpha(get('scale.black'), 0.7), + black85: alpha(get('scale.black'), 0.85), + white10: alpha(get('scale.white'), 0.1), + white15: alpha(get('scale.white'), 0.15), + white30: alpha(get('scale.white'), 0.3), + white50: alpha(get('scale.white'), 0.5), + white70: alpha(get('scale.white'), 0.7), + white85: alpha(get('scale.white'), 0.85) + }, + alert: { + info: { + text: get('scale.gray.9'), + icon: alpha(get('scale.blue.7'), 0.6), + bg: get('scale.blue.1'), + border: alpha(get('scale.blue.7'), 0.2) + }, + warn: { + text: get('scale.gray.9'), + icon: get('scale.yellow.8'), + bg: get('scale.yellow.1'), + border: alpha(get('scale.yellow.8'), 0.2) + }, + error: { + text: get('scale.gray.9'), + icon: alpha(get('scale.red.8'), 0.6), + bg: '#ffe3e6', + border: alpha(get('scale.red.8'), 0.2) + }, + success: { + text: get('scale.gray.9'), + icon: alpha(get('scale.green.7'), 0.8), + bg: get('scale.green.1'), + border: alpha(get('scale.green.7'), 0.2) + } + }, + autocomplete: { + shadow: (theme: any) => `0 3px 6px ${alpha(get('scale.gray.4'), 0.15)(theme)}`, + rowBorder: lighten(get('scale.gray.2'), 0.03) + }, + blankslate: { + icon: lighten(get('scale.gray.5'), 0.05) + }, + btn: { + text: get('scale.gray.9'), + bg: get('scale.gray.0'), + border: 'rgba(27,31,35,0.15)', + shadow: '0 1px 0 rgba(27,31,35,0.04)', + insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)', + hoverBg: '#f3f4f6', + hoverBorder: get('fade.black15'), + activeBg: '#eaecef', + activeBorder: get('fade.black10'), + selectedBg: '#edeff2', + focusBg: get('scale.gray.0'), + focusBorder: get('fade.black15'), + focusShadow: '0 0 0 3px rgba(3,102,214,0.3)', + shadowActive: 'inset 0 0.15em 0.3em rgba(27,31,35,0.15)', + shadowInputFocus: '0 0 0 0.2em rgba(3,102,214,0.3)', + primary: { + text: get('scale.white'), + bg: '#2ea44f', + border: 'rgba(27,31,35,0.15)', + shadow: '0 1px 0 rgba(27,31,35,0.1)', + insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', + hoverBg: '#2c974b', + hoverBorder: 'rgba(27,31,35,0.15)', + selectedBg: '#2a8f47', + selectedShadow: 'inset 0 1px 0 rgba(20,70,32,0.2)', + disabledText: 'rgba(255,255,255,0.8)', + disabledBg: '#94d3a2', + disabledBorder: 'rgba(27,31,35,0.1)', + focusBg: '#2ea44f', + focusBorder: 'rgba(27,31,35,0.15)', + focusShadow: '0 0 0 3px rgba(46,164,79,0.4)', + icon: 'rgba(255,255,255,0.8)', + counterBg: 'rgba(255,255,255,0.2)' + }, + outline: { + text: get('scale.blue.5'), + hoverText: get('scale.white'), + hoverBg: get('scale.blue.5'), + hoverBorder: 'rgba(27,31,35,0.15)', + hoverShadow: '0 1px 0 rgba(27,31,35,0.1)', + hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', + hoverCounterBg: 'rgba(255,255,255,0.2)', + selectedText: get('scale.white'), + selectedBg: '#035fc7', + selectedBorder: 'rgba(27,31,35,0.15)', + selectedShadow: 'inset 0 1px 0 rgba(5,38,76,0.2)', + disabledText: 'rgba(3,102,214,0.5)', + disabledBg: get('scale.gray.0'), + disabledCounterBg: 'rgba(3,102,214,0.05)', + focusBorder: 'rgba(27,31,35,0.15)', + focusShadow: '0 0 0 3px rgba(0,92,197,0.4)', + counterBg: 'rgba(3,102,214,0.1)' + }, + danger: { + text: get('scale.red.5'), + hoverText: get('scale.white'), + hoverBg: get('scale.red.6'), + hoverBorder: 'rgba(27,31,35,0.15)', + hoverShadow: '0 1px 0 rgba(27,31,35,0.1)', + hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', + hoverCounterBg: 'rgba(255,255,255,0.2)', + selectedText: get('scale.white'), + selectedBg: '#d42d3d', + selectedBorder: 'rgba(27,31,35,0.15)', + selectedShadow: 'inset 0 1px 0 rgba(134,24,29,0.2)', + disabledText: 'rgba(215,58,73,0.5)', + disabledBg: get('scale.gray.0'), + disabledCounterBg: 'rgba(215,58,73,0.05)', + focusBorder: 'rgba(27,31,35,0.15)', + focusShadow: '0 0 0 3px rgba(203,36,49,0.4)', + counterBg: 'rgba(215,58,73,0.1)', + icon: get('scale.red.5'), + hoverIcon: get('scale.white') + }, + counterBg: 'rgba(27,31,35,0.08)' + }, + counter: { + text: get('scale.gray.9'), + bg: 'rgba(209,213,218,0.5)', + primary: { + text: get('scale.white'), + bg: get('scale.gray.5') + }, + secondary: { + text: get('scale.gray.5'), + bg: 'rgba(209,213,218,0.5)' + } + }, + dropdown: { + shadow: '0 8px 24px rgba(149,157,165,0.2)' + }, + label: { + border: get('scale.gray.2'), + primary: { + text: get('scale.gray.9'), + border: get('scale.gray.5') + }, + secondary: { + text: get('scale.gray.6'), + border: get('scale.gray.2') + }, + info: { + text: get('scale.blue.5'), + border: get('scale.blue.5') + }, + success: { + text: get('scale.green.6'), + border: get('scale.green.5') + }, + warning: { + text: get('scale.yellow.9'), + border: get('scale.yellow.8') + }, + danger: { + text: get('scale.red.5'), + border: get('scale.red.6') + }, + orange: { + text: get('scale.orange.8'), + border: get('scale.orange.5') + } + }, + input: { + bg: get('scale.white'), + contrastBg: get('scale.gray.0'), + border: get('scale.gray.2'), + shadow: 'inset 0 1px 2px rgba(27,31,35,0.075)', + disabledBg: get('scale.gray.1'), + disabledBorder: get('scale.gray.2'), + warningBorder: get('scale.yellow.6'), + errorBorder: get('scale.red.6'), + tooltip: { + success: { + text: get('scale.green.9'), + bg: get('scale.green.1'), + border: get('scale.green.4') + }, + warning: { + text: get('scale.yellow.9'), + bg: get('scale.yellow.2'), + border: get('scale.yellow.6') + }, + error: { + text: get('scale.red.9'), + bg: get('scale.red.0'), + border: get('scale.red.3') + } + } + }, + avatar: { + bg: get('scale.white'), + border: 'transparent', + stackFade: get('scale.gray.3'), + stackFadeMore: get('scale.gray.2'), + childShadow: (theme: any) => `-2px -2px 0 ${alpha(get('scale.white'), 0.8)(theme)}` + }, + toast: { + text: get('text.primary'), + bg: get('bg.canvas'), + border: get('border.primary'), + shadow: get('shadow.large'), + icon: get('scale.white'), + iconBg: get('bg.infoInverse'), + iconBorder: 'transparent', + success: { + text: get('text.primary'), + border: get('border.primary'), + icon: get('scale.white'), + iconBg: get('bg.successInverse'), + iconBorder: 'transparent' + }, + warning: { + text: get('text.primary'), + border: get('border.primary'), + icon: get('text.primary'), + iconBg: get('bg.warningInverse'), + iconBorder: 'transparent' + }, + danger: { + text: get('text.primary'), + border: get('border.primary'), + icon: get('scale.white'), + iconBg: get('bg.dangerInverse'), + iconBorder: 'transparent' + }, + loading: { + text: get('text.primary'), + border: get('border.primary'), + icon: get('scale.white'), + iconBg: get('scale.gray.6'), + iconBorder: 'transparent' + } + }, + timeline: { + text: get('scale.gray.7'), + badgeBg: get('scale.gray.2'), + badgeSuccessBorder: 'transparent', + targetBadgeBorder: get('scale.blue.4'), + targetBadgeShadow: get('scale.blue.2') + }, + selectMenu: { + borderSecondary: '#eaecef', + shadow: '0 0 18px rgba(27,31,35,0.4)', + backdropBg: 'rgba(27,31,35,0.5)', + backdropBorder: 'transparent', + tapHighlight: 'rgba(209,213,218,0.5)', + tapFocusBg: get('scale.blue.1') + }, + box: { + blueBorder: get('scale.blue.2'), + rowYellowBg: get('scale.yellow.1'), + rowBlueBg: get('scale.blue.0'), + headerBlueBg: get('scale.blue.0'), + headerBlueBorder: get('scale.blue.2'), + borderInfo: 'rgba(3,102,214,0.2)', + bgInfo: get('scale.blue.0'), + borderWarning: 'rgba(255,211,61,0.4)', + bgWarning: get('scale.yellow.0') + }, + branchName: { + text: get('scale.gray.6'), + icon: '#a8bbd0', + bg: '#eaf5ff', + link: { + text: get('scale.blue.5'), + icon: '#a8bbd0', + bg: '#eaf5ff' + } + }, + markdown: { + codeBg: 'rgba(27,31,35,0.05)', + frameBorder: '#dfe2e5', + blockquoteBorder: '#dfe2e5', + tableBorder: '#dfe2e5', + tableTrBorder: '#c6cbd1' + }, + menu: { + headingText: get('scale.gray.9'), + borderActive: '#f9826c', + bgActive: 'transparent' + }, + sidenav: { + selectedBg: get('scale.white'), + borderActive: '#f9826c' + }, + header: { + text: 'rgba(255,255,255,0.7)', + bg: get('scale.gray.9'), + logo: get('scale.white') + }, + filterItem: { + barBg: '#eff3f6' + }, + hiddenTextExpander: { + bg: '#dfe2e5', + bgHover: '#c6cbd1' + }, + dragAndDrop: { + border: '#c3c8cf' + }, + uploadEnabled: { + border: '#dfe2e5', + borderFocused: '#4a9eff' + }, + previewableCommentForm: { + border: '#c3c8cf' + }, + underlinenav: { + border: 'rgba(209,213,218,0)', + borderHover: get('scale.gray.3'), + borderActive: '#f9826c', + text: get('scale.gray.9'), + textHover: get('scale.gray.9'), + textActive: get('scale.gray.9'), + icon: get('scale.gray.4'), + iconHover: get('scale.gray.4'), + iconActive: get('scale.gray.9'), + counterText: get('scale.gray.9'), + counterBg: get('counter.bg') + }, + verifiedBadge: { + text: get('scale.green.6'), + bg: get('scale.white'), + border: get('scale.gray.2') + }, + socialCount: { + bg: get('scale.white') + }, + tooltip: { + text: get('scale.white'), + bg: get('scale.gray.9') + }, + headerSearch: { + bg: get('scale.gray.9'), + border: get('scale.gray.7') + }, + searchKeyword: { + hl: get('scale.yellow.1') + }, + diffstat: { + neutralBg: get('scale.gray.3'), + neutralBorder: get('scale.gray.3'), + deletionBg: get('scale.red.5'), + deletionBorder: get('scale.red.5'), + additionBg: get('scale.green.5'), + additionBorder: get('scale.green.5') + }, + mktg: { + success: '#2ebc4f', + info: '#1074e7', + bgShadeGradient: { + top: 'rgba(27,31,35,0.065)', + bottom: 'rgba(27,31,35,0)' + }, + btn: { + bg: { + top: '#607cef', + bottom: '#4969ed' + }, + bgOverlay: { + top: '#4967e3', + bottom: '#3355e0' + }, + text: get('scale.white'), + primary: { + bg: { + top: '#34b859', + bottom: '#2ea44f' + }, + bgOverlay: { + top: '#279a43', + bottom: get('scale.green.6') + }, + text: get('scale.white') + }, + enterprise: { + bg: { + top: '#8571ff', + bottom: '#6f57ff' + }, + bgOverlay: { + top: '#7463de', + bottom: '#614eda' + }, + text: get('scale.white') + }, + outline: { + text: '#4969ed', + border: 'rgba(73,105,237,0.3)', + hover: { + text: '#3355e0', + border: 'rgba(73,105,237,0.5)' + }, + focus: { + border: '#4969ed', + borderInset: 'rgba(73,105,237,0.5)' + } + }, + dark: { + text: get('scale.white'), + border: 'rgba(255,255,255,0.3)', + hover: { + text: get('scale.white'), + border: 'rgba(255,255,255,0.5)' + }, + focus: { + border: get('scale.white'), + borderInset: 'rgba(255,255,255,0.5)' + } + } + } + }, + filesExplorerIcon: get('scale.blue.3'), + hlAuthorBg: get('scale.blue.0'), + hlAuthorBorder: get('scale.blue.2'), + logoSubdued: get('scale.gray.3'), + discussionBorder: '#a2cbac', + discussionBgSuccess: get('scale.green.5'), + actionsWorkflowTableStickyBg: 'rgba(255,255,255,0.95)', + repoLanguageColorBorder: 'rgba(27,31,35,0.1)', + codeSelectionBg: get('scale.blue.2'), + highlight: { + text: '#442c12', + bg: '#fff0bb' + }, + blob: { + lineHighlightBg: get('scale.yellow.1'), + lineHighlightBorder: 'transparent' + }, + diff: { + addition: { + text: get('scale.green.6'), + bg: get('diffBlob.addition.lineBg'), + border: get('scale.green.4') + }, + deletion: { + text: get('scale.red.6'), + bg: get('diffBlob.deletion.lineBg'), + border: get('scale.red.5') + }, + change: { + text: get('scale.yellow.8'), + bg: get('scale.yellow.2'), + border: get('scale.yellow.6') + } + }, + diffBlob: { + numText: 'rgba(27,31,35,0.3)', + numHoverText: 'rgba(27,31,35,0.6)', + addition: { + numText: 'rgba(27,31,35,0.3)', + numHoverText: 'rgba(27,31,35,0.6)', + numBg: '#cdffd8', + lineBg: '#e6ffed', + wordBg: '#acf2bd' + }, + deletion: { + numText: 'rgba(27,31,35,0.3)', + numHoverText: 'rgba(27,31,35,0.6)', + numBg: get('scale.red.1'), + lineBg: get('scale.red.0'), + wordBg: '#fdb8c0' + }, + hunk: { + text: 'rgba(27,31,35,0.7)', + numBg: get('scale.blue.1'), + lineBg: get('scale.blue.0') + }, + emptyBlockBg: get('scale.gray.0'), + selectedLineHighlightBg: 'rgba(255,223,93,0.2)', + selectedLineHighlightBorder: get('scale.yellow.5'), + selectedLineHighlightMixBlendMode: 'multiply', + expander: { + icon: get('scale.gray.6'), + hoverIcon: get('scale.white'), + hoverBg: get('scale.blue.5') + }, + commentButton: { + icon: get('scale.white'), + bg: get('scale.blue.5'), + gradientBg: '#0372ef' + } + }, + globalNav: { + logo: get('scale.white'), + bg: get('scale.gray.9'), + text: get('scale.white'), + icon: get('scale.white'), + inputBg: get('scale.gray.0'), + inputBorder: get('scale.gray.0'), + inputIcon: get('scale.gray.3'), + inputPlaceholder: get('scale.gray.4') + }, + calendarGraph: { + dayBg: '#ebedf0', + dayBorder: 'rgba(27,31,35,0.06)', + dayL1Bg: '#9be9a8', + dayL2Bg: '#40c463', + dayL3Bg: '#30a14e', + dayL4Bg: '#216e39', + dayL4Border: 'rgba(27,31,35,0.06)', + dayL3Border: 'rgba(27,31,35,0.06)', + dayL2Border: 'rgba(27,31,35,0.06)', + dayL1Border: 'rgba(27,31,35,0.06)' + }, + footerInvertocat: { + octicon: get('scale.gray.3'), + octiconHover: get('scale.gray.5') + }, + prState: { + draft: { + text: get('scale.white'), + bg: get('scale.gray.5'), + border: 'transparent' + }, + open: { + text: get('scale.white'), + bg: get('scale.green.5'), + border: 'transparent' + }, + merged: { + text: get('scale.white'), + bg: get('scale.purple.5'), + border: 'transparent' + }, + closed: { + text: get('scale.white'), + bg: get('scale.red.5'), + border: 'transparent' + } + }, + topicTag: { + text: get('scale.blue.5'), + bg: get('scale.blue.0'), + hoverBg: '#ddeeff', + activeBg: '#e7f3ff' + }, + mergeBox: { + successIconBg: get('scale.green.5'), + successIconText: get('scale.white'), + successIconBorder: 'transparent', + successIndicatorBg: get('scale.green.5'), + successIndicatorBorder: 'transparent', + mergedIconBg: get('scale.purple.5'), + mergedIconText: get('scale.white'), + mergedIconBorder: 'transparent', + mergedBoxBorder: get('scale.purple.5'), + neutralIconBg: get('scale.gray.5'), + neutralIconText: get('scale.white'), + neutralIconBorder: 'transparent', + neutralIndicatorBg: get('scale.gray.5'), + neutralIndicatorBorder: 'transparent', + warningIconBg: get('scale.yellow.7'), + warningIconText: get('scale.white'), + warningIconBorder: 'transparent', + warningBoxBorder: get('scale.yellow.5'), + warningMergeHighlight: 'transparent', + errorIconBg: get('scale.red.5'), + errorIconText: get('scale.white'), + errorIconBorder: 'transparent', + errorIndicatorBg: get('scale.red.5'), + errorIndicatorBorder: 'transparent' + }, + project: { + cardBg: get('scale.white'), + headerBg: get('scale.gray.9'), + sidebarBg: get('scale.white'), + gradientIn: get('scale.white'), + gradientOut: 'rgba(255,255,255,0)' + }, + checks: { + bg: get('scale.gray.9'), + runBorderWidth: '0px', + containerBorderWidth: '0px', + textPrimary: get('scale.gray.0'), + textSecondary: get('scale.gray.4'), + textLink: get('scale.blue.3'), + btnIcon: get('scale.gray.3'), + btnHoverIcon: get('scale.gray.0'), + btnHoverBg: 'rgba(255,255,255,0.125)', + inputText: get('scale.gray.1'), + inputPlaceholderText: get('scale.gray.4'), + inputFocusText: get('scale.gray.4'), + inputBg: get('scale.gray.8'), + inputShadow: 'none', + dropdownText: get('scale.gray.3'), + dropdownBg: get('scale.gray.8'), + dropdownBorder: get('scale.gray.7'), + dropdownHoverText: get('scale.gray.0'), + dropdownHoverBg: get('scale.gray.7'), + dropdownBtnHoverText: get('scale.gray.0'), + dropdownBtnHoverBg: get('scale.gray.8'), + scrollbarThumbBg: get('scale.gray.6'), + headerLabelText: get('scale.gray.2'), + headerLabelOpenText: get('scale.gray.0'), + headerBorder: get('scale.gray.8'), + headerIcon: get('scale.gray.4'), + lineText: get('scale.gray.2'), + lineNumText: 'rgba(149,157,165,0.75)', + lineTimestampText: get('scale.gray.4'), + lineHoverBg: get('scale.gray.8'), + lineSelectedBg: 'rgba(33,136,255,0.15)', + lineSelectedNumText: get('scale.blue.3'), + lineDtFmText: get('scale.gray.9'), + lineDtFmBg: get('scale.yellow.5'), + gateBg: 'rgba(249,197,19,0.15)', + gateText: get('scale.gray.2'), + gateWaitingText: get('scale.gray.3'), + stepHeaderOpenBg: get('scale.gray.8'), + stepErrorText: get('scale.red.3'), + stepWarningText: get('scale.yellow.3'), + loglineText: get('scale.gray.4'), + loglineNumText: 'rgba(149,157,165,0.75)', + loglineDebugText: get('scale.purple.3'), + loglineErrorText: get('scale.gray.2'), + loglineErrorNumText: get('scale.red.3'), + loglineErrorBg: 'rgba(203,36,49,0.15)', + loglineWarningText: get('scale.gray.2'), + loglineWarningNumText: get('scale.yellow.3'), + loglineWarningBg: 'rgba(249,197,19,0.15)', + loglineCommandText: get('scale.blue.3'), + loglineSectionText: get('scale.green.3'), + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.8'), + white: get('scale.gray.2'), + whiteBright: get('scale.gray.2'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#76e3ea', + cyanBright: '#b3f0ff' + } + }, + introShelf: { + gradientLeft: get('scale.blue.0'), + gradientRight: get('scale.green.1'), + gradientIn: get('scale.white'), + gradientOut: 'rgba(255,255,255,0)' + }, + marketingIcon: { + primary: get('scale.blue.4'), + secondary: get('scale.blue.3') + }, + prettylights: { + syntax: { + comment: get('scale.gray.5'), + constant: get('scale.blue.6'), + entity: get('scale.purple.5'), + storageModifierImport: get('scale.gray.9'), + entityTag: get('scale.green.6'), + keyword: get('scale.red.5'), + string: get('scale.blue.8'), + variable: get('scale.orange.6'), + brackethighlighterUnmatched: get('scale.red.7'), + invalidIllegalText: get('scale.gray.0'), + invalidIllegalBg: get('scale.red.7'), + carriageReturnText: get('scale.gray.0'), + carriageReturnBg: get('scale.red.5'), + stringRegexp: get('scale.green.6'), + markupList: get('scale.yellow.9'), + markupHeading: get('scale.blue.6'), + markupItalic: get('scale.gray.9'), + markupBold: get('scale.gray.9'), + markupDeletedText: get('scale.red.7'), + markupDeletedBg: get('scale.red.0'), + markupInsertedText: get('scale.green.6'), + markupInsertedBg: get('scale.green.0'), + markupChangedText: get('scale.orange.6'), + markupChangedBg: get('scale.orange.1'), + markupIgnoredText: get('scale.gray.1'), + markupIgnoredBg: get('scale.blue.6'), + metaDiffRange: get('scale.purple.5'), + brackethighlighterAngle: get('scale.gray.6'), + sublimelinterGutterMark: get('scale.gray.4'), + constantOtherReferenceLink: get('scale.blue.8') + } + }, + codemirror: { + text: get('text.primary'), + bg: get('bg.canvas'), + guttersBg: get('bg.canvas'), + guttermarkerText: get('scale.white'), + guttermarkerSubtleText: get('scale.gray.3'), + linenumberText: get('scale.gray.4'), + cursor: get('scale.gray.9'), + selectionBg: get('codeSelectionBg'), + activelineBg: get('scale.gray.0'), + matchingbracketText: get('scale.gray.9'), + linesBg: get('bg.canvas'), + syntax: { + comment: get('scale.gray.5'), + constant: get('scale.blue.6'), + entity: get('scale.purple.5'), + keyword: get('scale.red.5'), + storage: get('scale.red.5'), + string: get('scale.blue.8'), + support: get('scale.blue.6'), + variable: get('scale.orange.6') + } + }, + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.6'), + white: get('scale.gray.5'), + whiteBright: get('scale.gray.4'), + gray: get('scale.gray.5'), + red: get('scale.red.5'), + redBright: get('scale.red.6'), + green: get('scale.green.6'), + greenBright: get('scale.green.5'), + yellow: get('scale.yellow.8'), + yellowBright: get('scale.yellow.7'), + blue: get('scale.blue.5'), + blueBright: get('scale.blue.4'), + magenta: get('scale.purple.5'), + magentaBright: get('scale.purple.4'), + cyan: '#1b7c83', + cyanBright: '#3192aa' + } +} diff --git a/data/colors_v2/dark_dimmed.ts b/data/colors_v2/dark_dimmed.ts new file mode 100644 index 000000000..3ea6474c5 --- /dev/null +++ b/data/colors_v2/dark_dimmed.ts @@ -0,0 +1,86 @@ +import {merge} from '../../src/utils' +import dark from './dark' + +const vars = { + // Scales + scale: { + black: '#1c2128', + white: '#cdd9e5', + gray: [ + '#cdd9e5', + '#adbac7', + '#909dab', + '#768390', + '#636e7b', + '#545d68', + '#444c56', + '#373e47', + '#2d333b', + '#22272e' + ], + blue: [ + '#c6e6ff', + '#96d0ff', + '#6cb6ff', + '#539bf5', + '#4184e4', + '#316dca', + '#255ab2', + '#1b4b91', + '#143d79', + '#0f2d5c' + ], + green: [ + '#b4f1b4', + '#8ddb8c', + '#6bc46d', + '#57ab5a', + '#46954a', + '#347d39', + '#2b6a30', + '#245829', + '#1b4721', + '#113417' + ], + yellow: [ + '#fbe090', + '#eac55f', + '#daaa3f', + '#c69026', + '#ae7c14', + '#966600', + '#805400', + '#6c4400', + '#593600', + '#452700' + ], + orange: [ + '#ffddb0', + '#ffbc6f', + '#f69d50', + '#e0823d', + '#cc6b2c', + '#ae5622', + '#94471b', + '#7f3913', + '#682d0f', + '#4d210c' + ], + red: ['#ffd8d3', '#ffb8b0', '#ff938a', '#f47067', '#e5534b', '#c93c37', '#ad2e2c', '#922323', '#78191b', '#78191b'], + purple: [ + '#eedcff', + '#dcbdfb', + '#dcbdfb', + '#b083f0', + '#986ee2', + '#8256d0', + '#6b44bc', + '#5936a2', + '#472c82', + '#352160' + ], + pink: ['#ffd7eb', '#ffb3d8', '#fc8dc7', '#e275ad', '#c96198', '#ae4c82', '#983b6e', '#7e325a', '#69264a', '#551639'] + } +} + +export default merge(dark, vars) diff --git a/data/colors_v2/index.ts b/data/colors_v2/index.ts index f1fa2634e..00acda541 100644 --- a/data/colors_v2/index.ts +++ b/data/colors_v2/index.ts @@ -1,9 +1,11 @@ import light from './light' import dark from './dark' +import dark_dimmed from './dark_dimmed' import dark_high_contrast from './dark_high_contrast' export default { light, dark, + dark_dimmed, dark_high_contrast } diff --git a/src/utils.ts b/src/utils.ts index 15cbdbd16..a90fedf45 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -3,7 +3,9 @@ import deepmerge from 'deepmerge' import _get from 'lodash/get' import isFunction from 'lodash/isFunction' -export function resolveValue(value: string | ((obj: any) => string), obj: any): string { +type Value = string | ((obj: any) => string) + +export function resolveValue(value: Value, obj: any): string { return isFunction(value) ? resolveValue(value(obj), obj) : value } @@ -15,14 +17,22 @@ export function get(path: string) { return (obj: any) => _get(obj, path) } -export function alpha(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.transparentize(resolveValue(value, obj), 1 - amount) +export function alpha(value: Value, amount: number) { + return (obj: any) => color2k.transparentize(resolveValue(value, obj), 1 - amount).replace(/ /g, '') +} + +export function lighten(value: Value, amount: number) { + return (obj: any) => color2k.lighten(resolveValue(value, obj), amount).replace(/ /g, '') +} + +export function darken(value: Value, amount: number) { + return (obj: any) => color2k.darken(resolveValue(value, obj), amount).replace(/ /g, '') } -export function lighten(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.lighten(resolveValue(value, obj), amount) +export function mix(color1: Value, color2: Value, weight: number = 0.5) { + return (obj: any) => color2k.mix(resolveValue(color1, obj), resolveValue(color2, obj), weight).replace(/ /g, '') } -export function darken(value: string | ((obj: any) => string), amount: number) { - return (obj: any) => color2k.darken(resolveValue(value, obj), amount) +export function desaturate(value: Value, amount: number) { + return (obj: any) => color2k.desaturate(resolveValue(value, obj), amount).replace(/ /g, '') } From 07560259c49e20b22a07370fba31c8cba22a74a7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 16:24:19 -0500 Subject: [PATCH 26/43] Remove scss files --- data/colors/dark.scss | 365 ----------- data/colors/dark_dimmed.scss | 364 ----------- data/colors/light.scss | 364 ----------- data/colors/mixins/dark_mode.scss | 991 ----------------------------- data/colors/mixins/light_mode.scss | 991 ----------------------------- 5 files changed, 3075 deletions(-) delete mode 100644 data/colors/dark.scss delete mode 100644 data/colors/dark_dimmed.scss delete mode 100644 data/colors/light.scss delete mode 100644 data/colors/mixins/dark_mode.scss delete mode 100644 data/colors/mixins/light_mode.scss diff --git a/data/colors/dark.scss b/data/colors/dark.scss deleted file mode 100644 index afe3a1523..000000000 --- a/data/colors/dark.scss +++ /dev/null @@ -1,365 +0,0 @@ -// Dark mode - -$black: #010409; -$white: #F0F6FC; - -$tbd: $white; - -// -// -// -------- Grays -------- -$gray-0: #F0F6FC; -$gray-1: #C9D1D9; -$gray-2: #B1BAC4; -$gray-3: #8B949E; -$gray-4: #6E7681; -$gray-5: #484F58; -$gray-6: #30363D; -$gray-7: #21262D; -$gray-8: #161B22; -$gray-9: #0D1117; - -// -------- Blue -------- -$blue-0: #CAE8FF; -$blue-1: #A5D6FF; -$blue-2: #79C0FF; -$blue-3: #58A6FF; -$blue-4: #388BFD; -$blue-5: #1F6FEB; -$blue-6: #1158C7; -$blue-7: #0D419D; -$blue-8: #0C2D6B; -$blue-9: #051D4D; - -// -------- Green -------- -$green-0: #AFF5B4; -$green-1: #7EE787; -$green-2: #56D364; -$green-3: #3FB950; -$green-4: #2EA043; -$green-5: #238636; -$green-6: #196C2E; -$green-7: #0F5323; -$green-8: #033A16; -$green-9: #04260F; - -// -------- Yellow -------- -$yellow-0: #F8E3A1; -$yellow-1: #F2CC60; -$yellow-2: #E3B341; -$yellow-3: #D29922; -$yellow-4: #BB8009; -$yellow-5: #9E6A03; -$yellow-6: #845306; -$yellow-7: #693E00; -$yellow-8: #4B2900; -$yellow-9: #341A00; - -// -------- Orange -------- -$orange-0: #FFDFB6; -$orange-1: #FFC680; -$orange-2: #FFA657; -$orange-3: #F0883E; -$orange-4: #DB6D28; -$orange-5: #BD561D; -$orange-6: #9B4215; -$orange-7: #762D0A; -$orange-8: #5A1E02; -$orange-9: #3D1300; - -// -------- Red -------- -$red-0: #FFDCD7; -$red-1: #FFC1BA; -$red-2: #FFA198; -$red-3: #FF7B72; -$red-4: #F85149; -$red-5: #DA3633; -$red-6: #B62324; -$red-7: #8E1519; -$red-8: #67060C; -$red-9: #490202; - -// -------- Purple -------- -$purple-0: #EDDEFF; -$purple-1: #E2C5FF; -$purple-2: #D2A8FF; -$purple-3: #BC8CFF; -$purple-4: #A371F7; -$purple-5: #8957E5; -$purple-6: #6E40C9; -$purple-7: #553098; -$purple-8: #3C1E70; -$purple-9: #271052; - -// -------- Pink -------- -$pink-0: #FFDAEC; -$pink-1: #FFBEDD; -$pink-2: #FF9BCE; -$pink-3: #F778BA; -$pink-4: #DB61A2; -$pink-5: #BF4B8A; -$pink-6: #9E3670; -$pink-7: #7D2457; -$pink-8: #5E103E; -$pink-9: #42062A; - -// -------- Fades -------- -$black-fade-10: rgba($black, 0.1); -$black-fade-15: rgba($black, 0.15); -$black-fade-30: rgba($black, 0.3); -$black-fade-50: rgba($black, 0.5); -$black-fade-70: rgba($black, 0.7); -$black-fade-85: rgba($black, 0.85); - -$white-fade-10: rgba($white, 0.1); -$white-fade-15: rgba($white, 0.15); -$white-fade-30: rgba($white, 0.3); -$white-fade-50: rgba($white, 0.5); -$white-fade-70: rgba($white, 0.7); -$white-fade-85: rgba($white, 0.85); - -// -------- Marketing -------- -$mktg-blue-primary: #4969ed; -$mktg-blue-secondary: #3355e0; -$mktg-green-primary: #2ea44f; -$mktg-green-secondary: #22863a; -$mktg-purple-primary: #6f57ff; -$mktg-purple-secondary: #614eda; - -// -------- Color defaults -------- -$red: $red-5; -$purple: $purple-5; -$blue: $blue-5; -$green: $green-5; -$yellow: $yellow-5; -$orange: $orange-5; -$pink: $pink-5; -$gray-dark: $gray-9; -$gray-light: $gray-4; -$gray: $gray-5; - -// -------- Color scale -------- - -$scale: ( - black: $black, - white: $white, - - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ) -); - -// -------- Auto scale -------- -// Note: The order of the auto scale is flipped in dark.scss - -$auto: ( - black: $white, - white: $black, - - gray: ( - $gray-9, - $gray-8, - $gray-7, - $gray-6, - $gray-5, - $gray-4, - $gray-3, - $gray-2, - $gray-1, - $gray-0, - ), - - blue: ( - $blue-9, - $blue-8, - $blue-7, - $blue-6, - $blue-5, - $blue-4, - $blue-3, - $blue-2, - $blue-1, - $blue-0, - ), - - green: ( - $green-9, - $green-8, - $green-7, - $green-6, - $green-5, - $green-4, - $green-3, - $green-2, - $green-1, - $green-0, - ), - - yellow: ( - $yellow-9, - $yellow-8, - $yellow-7, - $yellow-6, - $yellow-5, - $yellow-4, - $yellow-3, - $yellow-2, - $yellow-1, - $yellow-0, - ), - - orange: ( - $orange-9, - $orange-8, - $orange-7, - $orange-6, - $orange-5, - $orange-4, - $orange-3, - $orange-2, - $orange-1, - $orange-0, - ), - - red: ( - $red-9, - $red-8, - $red-7, - $red-6, - $red-5, - $red-4, - $red-3, - $red-2, - $red-1, - $red-0, - ), - - purple: ( - $purple-9, - $purple-8, - $purple-7, - $purple-6, - $purple-5, - $purple-4, - $purple-3, - $purple-2, - $purple-1, - $purple-0, - ), - - pink: ( - $pink-9, - $pink-8, - $pink-7, - $pink-6, - $pink-5, - $pink-4, - $pink-3, - $pink-2, - $pink-1, - $pink-0, - ) -); - - -@import "./mixins/dark_mode.scss"; diff --git a/data/colors/dark_dimmed.scss b/data/colors/dark_dimmed.scss deleted file mode 100644 index 22ac672df..000000000 --- a/data/colors/dark_dimmed.scss +++ /dev/null @@ -1,364 +0,0 @@ -// Dark mode - -$black: #1C2128; -$white: #CDD9E5; - -$tbd: $white; - -// -// -// -------- Grays -------- -$gray-0: #CDD9E5; -$gray-1: #ADBAC7; -$gray-2: #909DAB; -$gray-3: #768390; -$gray-4: #636E7B; -$gray-5: #545D68; -$gray-6: #444C56; -$gray-7: #373E47; -$gray-8: #2D333B; -$gray-9: #22272E; - -// -------- Blue -------- -$blue-0: #c6e6ff; -$blue-1: #96d0ff; -$blue-2: #6cb6ff; -$blue-3: #539bf5; -$blue-4: #4184e4; -$blue-5: #316dca; -$blue-6: #255ab2; -$blue-7: #1b4b91; -$blue-8: #143d79; -$blue-9: #0f2d5c; - -// -------- Green -------- -$green-0: #b4f1b4; -$green-1: #8ddb8c; -$green-2: #6bc46d; -$green-3: #57ab5a; -$green-4: #46954a; -$green-5: #347d39; -$green-6: #2b6a30; -$green-7: #245829; -$green-8: #1b4721; -$green-9: #113417; - -// -------- Yellow -------- -$yellow-0: #FBE090; -$yellow-1: #EAC55F; -$yellow-2: #DAAA3F; -$yellow-3: #C69026; -$yellow-4: #AE7C14; -$yellow-5: #966600; -$yellow-6: #805400; -$yellow-7: #6C4400; -$yellow-8: #593600; -$yellow-9: #452700; - -// -------- Orange -------- -$orange-0: #ffddb0; -$orange-1: #ffbc6f; -$orange-2: #f69d50; -$orange-3: #e0823d; -$orange-4: #cc6b2c; -$orange-5: #ae5622; -$orange-6: #94471B; -$orange-7: #7F3913; -$orange-8: #682D0F; -$orange-9: #4D210C; - -// -------- Red -------- -$red-0: #ffd8d3; -$red-1: #ffb8b0; -$red-2: #ff938a; -$red-3: #f47067; -$red-4: #e5534b; -$red-5: #c93c37; -$red-6: #ad2e2c; -$red-7: #922323; -$red-8: #78191b; -$red-9: #78191b; - -// -------- Purple -------- -$purple-0: #eedcff; -$purple-1: #dcbdfb; -$purple-2: #dcbdfb; -$purple-3: #b083f0; -$purple-4: #986ee2; -$purple-5: #8256d0; -$purple-6: #6b44bc; -$purple-7: #5936a2; -$purple-8: #472c82; -$purple-9: #352160; - -// -------- Pink -------- -$pink-0: #FFD7EB; -$pink-1: #FFB3D8; -$pink-2: #FC8DC7; -$pink-3: #E275AD; -$pink-4: #C96198; -$pink-5: #AE4C82; -$pink-6: #983B6E; -$pink-7: #7E325A; -$pink-8: #69264A; -$pink-9: #551639; - -// -------- Fades -------- -$black-fade-10: rgba($black, 0.1); -$black-fade-15: rgba($black, 0.15); -$black-fade-30: rgba($black, 0.3); -$black-fade-50: rgba($black, 0.5); -$black-fade-70: rgba($black, 0.7); -$black-fade-85: rgba($black, 0.85); - -$white-fade-10: rgba($white, 0.1); -$white-fade-15: rgba($white, 0.15); -$white-fade-30: rgba($white, 0.3); -$white-fade-50: rgba($white, 0.5); -$white-fade-70: rgba($white, 0.7); -$white-fade-85: rgba($white, 0.85); - -// -------- Marketing -------- -$mktg-blue-primary: #4969ed; -$mktg-blue-secondary: #3355e0; -$mktg-green-primary: #2ea44f; -$mktg-green-secondary: #22863a; -$mktg-purple-primary: #6f57ff; -$mktg-purple-secondary: #614eda; - -// -------- Color defaults -------- -$red: $red-5; -$purple: $purple-5; -$blue: $blue-5; -$green: $green-5; -$yellow: $yellow-5; -$orange: $orange-5; -$pink: $pink-5; -$gray-dark: $gray-9; -$gray-light: $gray-4; -$gray: $gray-5; - -// -------- Color scale -------- - -$scale: ( - black: $black, - white: $white, - - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ) -); - -// -------- Auto scale -------- -// Note: The order of the auto scale is flipped in dark.scss - -$auto: ( - black: $white, - white: $black, - - gray: ( - $gray-9, - $gray-8, - $gray-7, - $gray-6, - $gray-5, - $gray-4, - $gray-3, - $gray-2, - $gray-1, - $gray-0, - ), - - blue: ( - $blue-9, - $blue-8, - $blue-7, - $blue-6, - $blue-5, - $blue-4, - $blue-3, - $blue-2, - $blue-1, - $blue-0, - ), - - green: ( - $green-9, - $green-8, - $green-7, - $green-6, - $green-5, - $green-4, - $green-3, - $green-2, - $green-1, - $green-0, - ), - - yellow: ( - $yellow-9, - $yellow-8, - $yellow-7, - $yellow-6, - $yellow-5, - $yellow-4, - $yellow-3, - $yellow-2, - $yellow-1, - $yellow-0, - ), - - orange: ( - $orange-9, - $orange-8, - $orange-7, - $orange-6, - $orange-5, - $orange-4, - $orange-3, - $orange-2, - $orange-1, - $orange-0, - ), - - red: ( - $red-9, - $red-8, - $red-7, - $red-6, - $red-5, - $red-4, - $red-3, - $red-2, - $red-1, - $red-0, - ), - - purple: ( - $purple-9, - $purple-8, - $purple-7, - $purple-6, - $purple-5, - $purple-4, - $purple-3, - $purple-2, - $purple-1, - $purple-0, - ), - - pink: ( - $pink-9, - $pink-8, - $pink-7, - $pink-6, - $pink-5, - $pink-4, - $pink-3, - $pink-2, - $pink-1, - $pink-0, - ) -); - -@import "./mixins/dark_mode.scss"; diff --git a/data/colors/light.scss b/data/colors/light.scss deleted file mode 100644 index c78c886a9..000000000 --- a/data/colors/light.scss +++ /dev/null @@ -1,364 +0,0 @@ -// Light mode - -$black: #1b1f23; -$white: #fff; - -$tbd: $black; - -// -// -// -------- Grays -------- -$gray-0: #fafbfc; -$gray-1: #f6f8fa; -$gray-2: #e1e4e8; -$gray-3: #d1d5da; -$gray-4: #959da5; -$gray-5: #6a737d; -$gray-6: #586069; -$gray-7: #444d56; -$gray-8: #2f363d; -$gray-9: #24292e; // body font color - -// -------- Blue -------- -$blue-0: #f1f8ff; -$blue-1: #dbedff; -$blue-2: #c8e1ff; -$blue-3: #79b8ff; -$blue-4: #2188ff; -$blue-5: #0366d6; // Default: Passes AA with #fff -$blue-6: #005cc5; -$blue-7: #044289; -$blue-8: #032f62; -$blue-9: #05264c; // Passes with 1/2/300 blues - -// -------- Green -------- -$green-0: #f0fff4; -$green-1: #dcffe4; -$green-2: #bef5cb; -$green-3: #85e89d; -$green-4: #34d058; -$green-5: #28a745; // Default. passes AA Large -$green-6: #22863a; // Text green, passes AA on #fff -$green-7: #176f2c; -$green-8: #165c26; -$green-9: #144620; - -// -------- Yellow -------- -$yellow-0: #fffdef; -$yellow-1: #fffbdd; -$yellow-2: #fff5b1; -$yellow-3: #ffea7f; -$yellow-4: #ffdf5d; -$yellow-5: #ffd33d; -$yellow-6: #f9c513; -$yellow-7: #dbab09; -$yellow-8: #b08800; -$yellow-9: #735c0f; - -// -------- Orange -------- -$orange-0: #fff8f2; -$orange-1: #ffebda; -$orange-2: #ffd1ac; -$orange-3: #ffab70; -$orange-4: #fb8532; -$orange-5: #f66a0a; // Default. passes AA Large with #fff -$orange-6: #e36209; -$orange-7: #d15704; -$orange-8: #c24e00; -$orange-9: #a04100; - -// -------- Red -------- -$red-0: #ffeef0; -$red-1: #ffdce0; -$red-2: #fdaeb7; -$red-3: #f97583; -$red-4: #ea4a5a; -$red-5: #d73a49; // Default. passes AA -$red-6: #cb2431; -$red-7: #b31d28; -$red-8: #9e1c23; -$red-9: #86181d; - -// -------- Purple -------- -$purple-0: #f5f0ff; -$purple-1: #e6dcfd; -$purple-2: #d1bcf9; -$purple-3: #b392f0; -$purple-4: #8a63d2; -$purple-5: #6f42c1; // passes AA with #fff -$purple-6: #5a32a3; -$purple-7: #4c2889; -$purple-8: #3a1d6e; -$purple-9: #29134e; - -// -------- Pink -------- -$pink-0: #ffeef8; -$pink-1: #fedbf0; -$pink-2: #f9b3dd; -$pink-3: #f692ce; -$pink-4: #ec6cb9; -$pink-5: #ea4aaa; -$pink-6: #d03592; -$pink-7: #b93a86; -$pink-8: #99306f; -$pink-9: #6d224f; - -// -------- Fades -------- -$black-fade-10: rgba($black, 0.1); -$black-fade-15: rgba($black, 0.15); -$black-fade-30: rgba($black, 0.3); -$black-fade-50: rgba($black, 0.5); -$black-fade-70: rgba($black, 0.7); -$black-fade-85: rgba($black, 0.85); - -$white-fade-10: rgba($white, 0.1); -$white-fade-15: rgba($white, 0.15); -$white-fade-30: rgba($white, 0.3); -$white-fade-50: rgba($white, 0.5); -$white-fade-70: rgba($white, 0.7); -$white-fade-85: rgba($white, 0.85); - -// -------- Marketing -------- -$mktg-blue-primary: #4969ed; -$mktg-blue-secondary: #3355e0; -$mktg-green-primary: #2ea44f; -$mktg-green-secondary: #22863a; -$mktg-purple-primary: #6f57ff; -$mktg-purple-secondary: #614eda; - -// -------- Color defaults -------- -$red: $red-5; -$purple: $purple-5; -$blue: $blue-5; -$green: $green-5; -$yellow: $yellow-5; -$orange: $orange-5; -$pink: $pink-5; -$gray-dark: $gray-9; -$gray-light: $gray-4; -$gray: $gray-5; - -// -------- Color scale -------- - -$scale: ( - black: $black, - white: $white, - - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ) -); - -// -------- Auto scale -------- -// Note: The order of the auto scale is flipped in dark.scss - -$auto: ( - black: $black, - white: $white, - - gray: ( - $gray-0, - $gray-1, - $gray-2, - $gray-3, - $gray-4, - $gray-5, - $gray-6, - $gray-7, - $gray-8, - $gray-9, - ), - - blue: ( - $blue-0, - $blue-1, - $blue-2, - $blue-3, - $blue-4, - $blue-5, - $blue-6, - $blue-7, - $blue-8, - $blue-9, - ), - - green: ( - $green-0, - $green-1, - $green-2, - $green-3, - $green-4, - $green-5, - $green-6, - $green-7, - $green-8, - $green-9, - ), - - yellow: ( - $yellow-0, - $yellow-1, - $yellow-2, - $yellow-3, - $yellow-4, - $yellow-5, - $yellow-6, - $yellow-7, - $yellow-8, - $yellow-9, - ), - - orange: ( - $orange-0, - $orange-1, - $orange-2, - $orange-3, - $orange-4, - $orange-5, - $orange-6, - $orange-7, - $orange-8, - $orange-9, - ), - - red: ( - $red-0, - $red-1, - $red-2, - $red-3, - $red-4, - $red-5, - $red-6, - $red-7, - $red-8, - $red-9, - ), - - purple: ( - $purple-0, - $purple-1, - $purple-2, - $purple-3, - $purple-4, - $purple-5, - $purple-6, - $purple-7, - $purple-8, - $purple-9, - ), - - pink: ( - $pink-0, - $pink-1, - $pink-2, - $pink-3, - $pink-4, - $pink-5, - $pink-6, - $pink-7, - $pink-8, - $pink-9, - ) -); - -@import "./mixins/light_mode.scss"; diff --git a/data/colors/mixins/dark_mode.scss b/data/colors/mixins/dark_mode.scss deleted file mode 100644 index 4a4926080..000000000 --- a/data/colors/mixins/dark_mode.scss +++ /dev/null @@ -1,991 +0,0 @@ -// -------- Functional colors ---------- -$export: ( - scale: $scale, - auto: $auto, - - // Pure functional - - text: ( - primary: $gray-1, - secondary: $gray-3, - tertiary: $gray-3, - placeholder: $gray-5, - disabled: $gray-5, - inverse: $gray-9, - link: $blue-3, - danger: $red-4, - success: $green-2, - warning: $yellow-2, - white: $white, - ), - - icon: ( - primary:$gray-1, - secondary: $gray-4, - tertiary: $gray-5, - info: $blue-3, - danger: $red-4, - success: $green-2, - warning: $yellow-2, - ), - - border: ( - primary: $gray-6, - secondary: $gray-7, - tertiary: $gray-4, - overlay: $gray-6, - inverse: $white, - info: rgba($blue-4, 0.4), - danger: rgba($red-4, 0.4), - success: rgba($green-3, 0.4), - warning: rgba($yellow-4, 0.4), - ), - - bg: ( - canvas: $gray-9, - canvas-mobile: $black, - canvas-inverse: $gray-0, - canvas-inset: darken($gray-9, 2%), - primary: $gray-9, - secondary: $gray-9, - tertiary: $gray-8, - overlay: mix($gray-7, $gray-8), - backdrop: rgba($black, 0.8), - info: rgba($blue-4, 0.1), - info-inverse: $blue-4, - danger: rgba($red-4, 0.1), - danger-inverse: $red-5, - success: rgba($green-4, 0.1), - success-inverse: $green-4, - warning: rgba($yellow-4, 0.1), - warning-inverse: $yellow-4, - ), - - shadow: ( - small: 0 0 transparent, - medium: 0 3px 6px $black, - large: 0 8px 24px $black, - extra-large: 0 12px 48px $black, - - highlight: 0 0 transparent, // top highlight - inset: 0 0 transparent, // top inner shadow - ), - - state: ( - hover: ( - primary-bg: $blue-5, - primary-border: $blue-4, - primary-text: $gray-0, - primary-icon: $gray-0, - secondary-bg: $gray-8, - secondary-border: $gray-8, - ), - - selected: ( - primary-bg: $blue-5, - primary-border: $blue-4, - primary-text: $gray-0, - primary-icon: $gray-0, - ), - - focus: ( - border: $blue-4, // blue focus border - shadow: 0 0 0 3px $blue-8, // blue focus ring - ), - ), - - fade: ( - fg-10: $white-fade-10, - fg-15: $white-fade-15, - fg-30: $white-fade-30, - fg-50: $white-fade-50, - fg-70: $white-fade-70, - fg-85: $white-fade-85, - - black-10: $black-fade-10, - black-15: $black-fade-15, - black-30: $black-fade-30, - black-50: $black-fade-50, - black-70: $black-fade-70, - black-85: $black-fade-85, - - white-10: $white-fade-10, - white-15: $white-fade-15, - white-30: $white-fade-30, - white-50: $white-fade-50, - white-70: $white-fade-70, - white-85: $white-fade-85, - ), - - // Components - - alert: ( - info: ( - text: $blue-2, - icon: $blue-2, - bg: rgba($blue-4, 0.1), - border: rgba($blue-4, 0.4), - ), - - warn: ( - text: $yellow-2, - icon: $yellow-2, - bg: rgba($yellow-4, 0.1), - border: rgba($yellow-4, 0.4), - ), - - error: ( - text: $red-3, - icon: $red-3, - bg: rgba($red-4, 0.1), - border: rgba($red-4, 0.4), - ), - - success: ( - text: $green-2, - icon: $green-2, - bg: rgba($green-4, 0.1), - border: rgba($green-4, 0.4), - ), - ), - - autocomplete: ( - shadow: 0 16px 32px $black-fade-85, - row-border: $gray-6, - ), - - blankslate: ( - icon: lighten($gray-5, 5%), - ), - - btn: ( - text: $gray-1, - bg: $gray-7, - border: $gray-6, - shadow: 0 0 transparent, - inset-shadow: 0 0 transparent, - - hover-bg: $gray-6, - hover-border: $gray-3, - - active-bg: darken($gray-6, 3%), - active-border: $gray-4, - - selected-bg: $gray-8, - - focus-bg: $gray-7, - focus-border: $gray-3, - focus-shadow: 0 0 0 3px rgba($gray-3, 0.3), - - shadow-active: inset 0 0.15em 0.3em $black-fade-15, // TODO: Deprecate? Not used in Primer CSS - shadow-input-focus: 0 0 0 0.2em rgba($blue, 0.3), // TODO: Deprecate? - - /* states */ - - primary: ( - text: #fff, - bg: $green-5, - border: $green-4, - shadow: 0 0 transparent, - inset-shadow: 0 0 transparent, - - hover-bg: $green-4, - hover-border: $green-3, - - selected-bg: $green-5, - selected-shadow: 0 0 transparent, - - disabled-text: rgba($white, 0.5), - disabled-bg: rgba($green-5, 0.6), - disabled-border: transparent, - - focus-bg: $green-5, - focus-border: $green-3, - focus-shadow: 0 0 0 3px rgba(#2ea44f, 0.4), - - icon: $white, - counter-bg: rgba($white, 0.2), - ), - - outline: ( - text: $blue-3, - - hover-text: $blue-3, - hover-bg: $gray-6, - hover-border: $blue-3, - hover-shadow: 0 1px 0 $black-fade-10, - hover-inset-shadow: inset 0 1px 0 rgba($white, 0.03), - hover-counter-bg: rgba($white, 0.2), - - selected-text: $white, - selected-bg: $blue-7, - selected-border: $white-fade-10, - selected-shadow: 0 0 transparent, - - disabled-text: rgba($blue-3, 0.5), - disabled-bg: $gray-9, - disabled-counter-bg: rgba($blue-5, 0.05), - - focus-border: $blue-3, - focus-shadow: 0 0 0 3px rgba($blue-6, 0.4), - - counter-bg: rgba($blue-5, 0.1), - ), - - danger: ( - text: $red-4, - - hover-text: #fff, - hover-bg: $red-5, - hover-border: $red-4, - hover-shadow: 0 0 transparent, - hover-inset-shadow: 0 0 transparent, - hover-counter-bg: rgba(#fff, 0.2), - - selected-text: #fff, - selected-bg: $red-6, - selected-border: $white-fade-10, - selected-shadow: 0 0 transparent, - - disabled-text: rgba($red-4, 0.5), - disabled-bg: $gray-9, - disabled-counter-bg: rgba($red-5, 0.05), - - focus-border: $red-4, - focus-shadow: 0 0 0 3px rgba($red-6, 0.4), - - counter-bg: rgba($red-5, 0.1), - - icon: $red-4, - hover-icon: $white, - ), - - counter-bg: $gray-6, - ), - - counter: ( - text: $gray-1, - bg: $gray-6, - - primary: ( - text: $gray-1, - bg: $gray-4, - ), - - secondary: ( - text: $gray-3, - bg: rgba($gray-3, 0.2), - ), - ), - - dropdown: ( - shadow: 0 16px 32px $black-fade-85, - ), - - label: ( - border: $gray-6, - - primary: ( - text: $gray-2, - border: $gray-4, - ), - - secondary: ( - text: $gray-3, - border: $gray-6, - ), - - info: ( - text: $blue-4, - border: rgba($blue-4, 0.4), - ), - - success: ( - text: $green-3, - border: rgba($green-4, 0.4), - ), - - warning: ( - text: $yellow-2, - border: rgba(#F2D35B, 0.4), - ), - - danger: ( - text: $red-4, - border: rgba($red-4, 0.4), - ), - - // Deprecated - orange: ( - text: $orange-4, - border: rgba($orange-4, 0.4), - ), - ), - - input: ( - bg: $gray-9, - contrast-bg: rgba($black, 0.5), - border: $gray-7, - shadow: 0 0 transparent, - - disabled-bg: $gray-8, - disabled-border: $gray-6, - - warning-border: $yellow-3, - error-border: $red-4, - - tooltip: ( - success: ( - text: $green-2, - bg: mix($green-4, $gray-9, 10%), // rgba($green-4, 0.1) - border: mix($green-4, $gray-9, 46%), // rgba($green-4, 0.4) + 6% to adjust for the background - ), - - warning: ( - text: $yellow-2, - bg: mix($yellow-4, $gray-9, 10%), // rgba($yellow-4, 0.1) - border: mix($yellow-4, $gray-9, 46%), // rgba($yellow-4, 0.4) + 6% to adjust for the background - ), - - error: ( - text: $red-3, - bg: mix($red-4, $gray-9, 10%), // rgba($red-4, 0.1) - border: mix($red-4, $gray-9, 46%), // rgba($red-4, 0.4) + 6% to adjust for the background - ), - ), - ), - - avatar: ( - bg: $white-fade-10, - border: $white-fade-10, - stack-fade: $gray-6, - stack-fade-more: $gray-7, - child-shadow: -2px -2px 0 $gray-9, - ), - - toast: ( - text: var(--color-text-primary), - bg: $gray-6, - border: $gray-4, - shadow: var(--color-shadow-large), - icon: $white, - icon-bg: $blue-5, - icon-border: $blue-4, - - success: ( - text: var(--color-text-primary), - border: $gray-4, - icon: $white, - icon-bg: $green-4, - icon-border: $green-3, - ), - - warning: ( - text: var(--color-text-primary), - border: $gray-4, - icon: $white, - icon-bg: $yellow-4, - icon-border: $yellow-3, - ), - - danger: ( - text: var(--color-text-primary), - border: $gray-4, - icon: $white, - icon-bg: $red-5, - icon-border: $red-4, - ), - - loading: ( - text: var(--color-text-primary), - border: $gray-4, - icon: $white, - icon-bg: $gray-4, - icon-border: $gray-3, - ), - ), - - timeline: ( - text: $gray-2, - badge-bg: $gray-9, - badge-success-border: $green-4, - target-badge-border: $blue-5, - target-badge-shadow: $blue-7, - ), - - select-menu: ( - border-secondary: $gray-6, - shadow: 0 0 18px rgba($black, 0.4), - backdrop-bg: $black-fade-50, - backdrop-border: $gray-5, - tap-highlight: rgba($gray-6, 0.5), - tap-focus-bg: $blue-8, - ), - - box: ( - blue-border: $blue-7, - row-yellow-bg: rgba(#EBC440, 0.1), - row-blue-bg: rgba($blue-2, 0.1), - header-blue-bg: $gray-9, - header-blue-border: $gray-6, - border-info: rgba($blue-4, 0.4), - bg-info: rgba($blue-4, 0.1), - border-warning: rgba($yellow-4, 0.4), - bg-warning: rgba($yellow-4, 0.1), - ), - - branch-name: ( - text: $gray-1, - icon: $gray-2, - bg: rgba($blue-3, 0.1), - - link: ( - text: $blue-3, - icon: $blue-3, - bg: rgba($blue-3, 0.1), - ), - ), - - markdown: ( - code-bg: rgba($gray-0, 0.15), - frame-border: lighten($gray-6, 5%), - blockquote-border: lighten($gray-6, 5%), - table-border: lighten($gray-6, 5%), - table-tr-border: darken($gray-6, 4%), - ), - - menu: ( - heading-text: $gray-3, - border-active: #F78166, // coral - bg-active: $gray-8, - ), - - sidenav: ( - selected-bg: $gray-7, - border-active: #F78166, // coral - ), - - header: ( - text: $white-fade-70, - bg: $gray-8, - logo: $gray-0, - ), - - filter-item: ( - bar-bg: darken($gray-8, 2%), - ), - - hidden-text-expander: ( - bg: $gray-7, - bg-hover: $gray-6, - ), - - drag-and-drop: ( - border: darken($gray-6, 5%), - ), - - upload-enabled: ( - border: lighten($gray-6, 5%), - border-focused: lighten($blue-5, 8%), - ), - - previewable-comment-form: ( - border: darken($gray-6, 5%), - ), - - underlinenav: ( - border: rgba($gray-6, 0), - border-hover: $gray-6, - border-active: #F78166, - text: $gray-3, - text-hover: $gray-1, - text-active: $gray-1, - icon: $gray-4, - icon-hover: $gray-1, - icon-active: $gray-1, - counter-text: $gray-3, - counter-bg: rgba($gray-3, 0.2), - ), - - verified-badge: ( - text: $green-3, - bg: rgba($green-3, 0.1), - border: rgba($green-3, 0.4), - ), - - social-count: ( - bg: $gray-7, - ), - - tooltip: ( - text: $white, - bg: $gray-4, - ), - - header-search: ( - bg: $gray-9, - border: $gray-7, - ), - - search-keyword: ( - hl: rgba($yellow-4, 0.4), - ), - - diffstat: ( - neutral-bg: $gray-6, - neutral-border: $white-fade-10, - deletion-bg: $red-5, - deletion-border: $red-4, - addition-bg: $green-5, - addition-border: $green-4, - ), - - // Marketing - - mktg: ( - success: mix($green-5, $green-4, 50%), - info: mix($blue-4, $blue-5, 42%), - - bg-shade-gradient: ( - top: rgba($black, 0.065), - bottom: rgba($black, 0), - ), - - btn: ( - bg: ( - top: lighten($mktg-blue-primary, 5%), - bottom: $mktg-blue-primary, - ), - bg-overlay: ( - top: lighten($mktg-blue-secondary, 5%), - bottom: $mktg-blue-secondary, - ), - text: $white, - - primary: ( - bg: ( - top: lighten($mktg-green-primary, 5%), - bottom: $mktg-green-primary, - ), - bg-overlay: ( - top: lighten($mktg-green-secondary, 5%), - bottom: $mktg-green-secondary, - ), - text: $white, - ), - - enterprise: ( - bg: ( - top: lighten($mktg-purple-primary, 5%), - bottom: $mktg-purple-primary, - ), - bg-overlay: ( - top: lighten($mktg-purple-secondary, 5%), - bottom: $mktg-purple-secondary, - ), - text: $white, - ), - - outline: ( - text: $white, - border: rgba($white, 0.3), - - hover: ( - text: $white, - border: rgba($white, 0.5), - ), - - focus: ( - border: rgba($white, 1), - border-inset: rgba($white, 0.5), - ), - ), - - dark: ( - text: $white, - border: rgba($white, 0.3), - - hover: ( - text: $white, - border: rgba($white, 0.5), - ), - - focus: ( - border: rgba($white, 1), - border-inset: rgba($white, 0.5), - ), - ), - ), - ), - - // App level - - files-explorer-icon: $gray-4, - hl-author-bg: $blue-9, - hl-author-border: $blue-7, - logo-subdued: $gray-6, - discussion-border: desaturate($green-6, 40%), - discussion-bg-success: rgba($green-4, 0.1), - actions-workflow-table-sticky-bg: rgba($gray-9, 0.95), - repo-language-color-border: rgba($white, 0.2), - code-selection-bg: rgba($blue-2, 0.3), // needs to be semi transparent in dark mode - - highlight: ( - text: #ffd467, - bg: rgba(204, 143, 44, 0.38), - ), - - blob: ( - line-highlight-bg: rgba($yellow-3, 0.15), - line-highlight-border: $yellow-2, - ), - - diff: ( - addition: ( - text: $green-2, - bg: var(--color-diff-blob-addition-line-bg), - border: $green-6, - ), - - deletion: ( - text: $red-4, - bg: var(--color-diff-blob-deletion-line-bg), - border: $red-6, - ), - - change: ( - text: $yellow-2, - bg: $yellow-9, - border: $yellow-5, - ), - ), - - diff-blob: ( - num-text: $white-fade-30, - num-hover-text: rgba($white, 0.6), - - addition: ( - num-text: $green-3, - num-hover-text: $green-1, - num-bg: rgba($green-4, 0.10), - line-bg: rgba($green-4, 0.20), - word-bg: rgba($green-4, 0.55), - ), - - deletion: ( - num-text: $red-4, - num-hover-text: $red-2, - num-bg: rgba($red-5, 0.10), - line-bg: rgba($red-5, 0.20), - word-bg: rgba($red-5, 0.50), - ), - - hunk: ( - text: $gray-3, - num-bg: rgba($blue-3, 0.15), - line-bg: rgba($blue-3, 0.10), - ), - - empty-block-bg: $gray-8, // for split diffs - - selected-line-highlight-bg: rgba($yellow-4, 0.1), - selected-line-highlight-border: $yellow-4, - selected-line-highlight-mix-blend-mode: normal, - - expander: ( - icon: $gray-3, - hover-icon: $gray-0, - hover-bg: $blue-5, - ), - - // add line comment button -> blue [+] - comment-button: ( - icon: $white, - bg: $blue-5, - gradient-bg: lighten($blue-5, 5%), // gradient top - ), - ), - - global-nav: ( - logo: $gray-0, - bg: $gray-8, - text: $gray-1, - icon: $gray-1, - input-bg: $gray-9, - input-border: $gray-7, - input-icon: $gray-7, - input-placeholder: $gray-5, - ), - - calendar-graph: ( - /*bg: $white, - border: $white,*/ - day-bg: $gray-8, - day-border: rgba(27, 31, 35, 0.06), - day-L1-bg: #0E4429, - day-L2-bg: #006D32, - day-L3-bg: #26A641, - day-L4-bg: #39D353, - day-L4-border: rgba(255, 255, 255, 0.05), - day-L3-border: rgba(255, 255, 255, 0.05), - day-L2-border: rgba(255, 255, 255, 0.05), - day-L1-border: rgba(255, 255, 255, 0.05), - ), - - footer-invertocat: ( - octicon: $gray-6, - octicon-hover: $gray-4, - ), - - pr-state: ( - draft: ( - text: $gray-3, - bg: rgba($gray-3, 0.1), - border: rgba($gray-3, 0.4), - ), - - open: ( - text: $green-3, - bg: rgba($green-3, 0.1), - border: rgba($green-3, 0.4), - ), - - merged: ( - text: $purple-4, - bg: rgba($purple-3, 0.1), - border: rgba($purple-3, 0.4), - ), - - closed: ( - text: $red-4, - bg: rgba($red-5, 0.1), - border: rgba($red-5, 0.4), - ), - ), - - topic-tag: ( - text: $blue-3, - bg: rgba($blue-4, 0.1), - hover-bg: rgba($blue-4, 0.2), - active-bg: rgba($blue-4, 0.15), - ), - - merge-box: ( - success-icon-bg: rgba($green-4, 0.1), - success-icon-text: $green-3, - success-icon-border: rgba($green-4, 0.4), - success-indicator-bg: $green-5, - success-indicator-border: $green-4, - merged-icon-bg: rgba($purple-3, 0.1), - merged-icon-text: $purple-4, - merged-icon-border: rgba($purple-3, 0.4), - merged-box-border: rgba($purple-3, 0.4), - neutral-icon-bg: rgba($gray-1, 0.1), - neutral-icon-text: $gray-3, - neutral-icon-border: rgba($gray-1, 0.4), - neutral-indicator-bg: $gray-5, - neutral-indicator-border: $gray-4, - warning-icon-bg: rgba($yellow-4, 0.1), - warning-icon-text: $yellow-2, - warning-icon-border: rgba($yellow-4, 0.4), - warning-box-border: rgba($yellow-4, 0.4), - warning-merge-highlight: rgba($yellow-4, 0.1), - error-icon-bg: rgba($red-4, 0.1), - error-icon-text: $red-4, - error-icon-border: rgba($red-4, 0.4), - error-indicator-bg: $red-5, - error-indicator-border: $red-4, - ), - - project: ( - card-bg: $gray-8, - header-bg: $gray-9, - sidebar-bg: $gray-8, - gradient-in: $gray-8, - gradient-out: rgba($gray-8, 0), - ), - - checks: ( - bg: var(--color-bg-canvas-inset), - - run-border-width: 1px, - container-border-width: 1px, - - text-primary: var(--color-text-primary), - text-secondary: var(--color-text-secondary), - text-link: var(--color-text-link), - - btn-icon: var(--color-icon-secondary), - btn-hover-icon: var(--color-text-primary), - btn-hover-bg: var(--color-btn-hover-bg), - - input-text: var(--color-text-secondary), - input-placeholder-text: var(--color-text-placeholder), - input-focus-text: var(--color-text-primary), - input-bg: var(--color-input-bg), - input-shadow: 0 0 0 1px $gray-7, // var(--color-input-border) - - dropdown-text: var(--color-text-primary), - dropdown-bg: var(--color-bg-overlay), - dropdown-border: var(--color-border-overlay), - dropdown-hover-text: var(--color-state-hover-primary-text), - dropdown-hover-bg: var(--color-state-hover-primary-bg), - dropdown-btn-hover-text: var(--color-state-hover-primary-text), - dropdown-btn-hover-bg: var(--color-state-hover-secondary-bg), - - scrollbar-thumb-bg: $gray-6, - - header-label-text: var(--color-text-secondary), - header-label-open-text: var(--color-text-primary), - header-border: var(--color-border-secondary), - header-icon: var(--color-icon-secondary), - - line-text: var(--color-text-secondary), - line-num-text: var(--color-text-tertiary), - line-timestamp-text: var(--color-text-tertiary), - line-hover-bg: var(--color-state-hover-secondary-bg), - line-selected-bg: var(--color-bg-info), - line-selected-num-text: var(--color-text-link), - line-dt-fm-text: var(--color-text-inverse), - line-dt-fm-bg: $yellow-3, - - gate-bg: rgba($yellow-6, 0.15), - gate-text: var(--color-text-secondary), - gate-waiting-text: var(--color-text-warning), - - step-header-open-bg: var(--color-state-hover-secondary-bg), - step-error-text: var(--color-text-danger), - step-warning-text: var(--color-text-warning), - - logline-text: $gray-4, - logline-num-text: var(--color-text-tertiary), - logline-debug-text: $purple-3, - logline-error-text: var(--color-text-secondary), - logline-error-num-text: var(--color-text-tertiary), - logline-error-bg: var(--color-bg-danger), - logline-warning-text: var(--color-text-secondary), - logline-warning-num-text: var(--color-text-warning), - logline-warning-bg: var(--color-bg-warning), - logline-command-text: $blue-3, - logline-section-text: var(--color-text-success), - - // used in the Actions logs - ansi: ( - black: $gray-9, - black-bright: $gray-8, - white: $gray-2, - white-bright: $gray-2, - gray: $gray-4, - red: $red-3, - red-bright: $red-2, - green: $green-3, - green-bright: $green-2, - yellow: $yellow-3, - yellow-bright: $yellow-2, - blue: $blue-3, - blue-bright: $blue-2, - magenta: $purple-3, - magenta-bright: $purple-2, - cyan: #76e3ea, // custom - cyan-bright: #b3f0ff, // custom - ), - ), - - intro-shelf: ( - gradient-left: rgba($blue-4, 0.1), - gradient-right: rgba($green-4, 0.1), - gradient-in: $gray-9, - gradient-out: rgba($gray-9, 0), - ), - - marketing-icon: ( - primary: $blue-2, - secondary: $blue-5, - ), - - // Syntax highlighting - - // when reading code - prettylights: ( - syntax: ( - comment: $gray-3, - constant: $blue-2, - entity: $purple-2, - storage-modifier-import: $gray-1, - entity-tag: $green-1, - keyword: $red-3, - string: $blue-1, - variable: $orange-2, - brackethighlighter-unmatched: $red-4, - invalid-illegal-text: $gray-0, - invalid-illegal-bg: $red-7, - carriage-return-text: $gray-0, - carriage-return-bg: $red-6, - string-regexp: $green-1, - markup-list: $yellow-1, - markup-heading: $blue-5, - markup-italic: $gray-1, - markup-bold: $gray-1, - markup-deleted-text: $red-0, - markup-deleted-bg: $red-8, - markup-inserted-text: $green-0, - markup-inserted-bg: $green-8, - markup-changed-text: $orange-0, - markup-changed-bg: $orange-8, - markup-ignored-text: $gray-1, - markup-ignored-bg: $blue-6, - meta-diff-range: $purple-2, - brackethighlighter-angle: $gray-3, - sublimelinter-gutter-mark: $gray-5, - constant-other-reference-link: $blue-1, - ), - ), - - // when editing code - codemirror: ( - text: $gray-1, - bg: var(--color-bg-canvas), - - gutters-bg: var(--color-bg-canvas), - guttermarker-text: $gray-9, - guttermarker-subtle-text: $gray-4, - linenumber-text: $gray-3, - cursor: $gray-0, - selection-bg: var(--color-code-selection-bg), - activeline-bg: $gray-8, - matchingbracket-text: $gray-1, - lines-bg: var(--color-bg-canvas), - - syntax: ( - comment: $gray-3, - constant: $blue-2, - entity: $purple-2, - keyword: $red-3, - storage: $red-3, - string: $blue-1, - support: $blue-2, - variable: $orange-2, - ), - ), - - // used for terminal-like enviroments - ansi: ( - black: $gray-5, - black-bright: $gray-4, - white: $gray-2, - white-bright: $gray-0, - gray: $gray-4, - red: $red-3, - red-bright: $red-2, - green: $green-3, - green-bright: $green-2, - yellow: $yellow-3, - yellow-bright: $yellow-2, - blue: $blue-3, - blue-bright: $blue-2, - magenta: $purple-3, - magenta-bright: $purple-2, - cyan: #39c5cf, // custom - cyan-bright: #56d4dd, // custom - ), -); diff --git a/data/colors/mixins/light_mode.scss b/data/colors/mixins/light_mode.scss deleted file mode 100644 index 9a952487d..000000000 --- a/data/colors/mixins/light_mode.scss +++ /dev/null @@ -1,991 +0,0 @@ -// -------- Functional colors ---------- -$export: ( - scale: $scale, - auto: $auto, - - // Pure functional - - text: ( - primary: $gray-9, - secondary: $gray-6, - tertiary: $gray-5, - placeholder: $gray-5, - disabled: $gray-4, - inverse: $white, - link: $blue-5, - danger: $red-6, - success: $green-6, - warning: $yellow-8, - white: $white, - ), - - icon: ( - primary:$gray-9, - secondary: $gray-6, - tertiary: $gray-4, - info: $blue-5, - danger: $red-5, - success: $green-6, - warning: $yellow-8, - ), - - border: ( - primary: $gray-2, - secondary: lighten($gray-2, 3%), - tertiary: $gray-3, - overlay: $gray-2, - inverse: $white, - info: $blue-5, - danger: $red-5, - success: $green-4, - warning: $yellow-6, - ), - - bg: ( - canvas: $white, - canvas-mobile: $white, - canvas-inverse: $gray-9, - canvas-inset: $gray-1, - primary: $white, - secondary: $gray-0, - tertiary: $gray-1, - overlay: $white, - backdrop: $black-fade-50, - info: $blue-0, - info-inverse: $blue-5, - danger: $red-0, - danger-inverse: $red-5, - success: $green-1, - success-inverse: $green-5, - warning: $yellow-2, - warning-inverse: $yellow-5, - ), - - shadow: ( - small: 0 1px 0 rgba($black, 0.04), - medium: 0 3px 6px rgba($gray-4, 0.15), - large: 0 8px 24px rgba($gray-4, 0.2), - extra-large: 0 12px 48px rgba($gray-4, 0.3), - - highlight: inset 0 1px 0 rgba($white, 0.25), // top highlight - inset: inset 0 1px 0 rgba($gray-2, 0.2), // top inner shadow - ), - - state: ( - hover: ( - primary-bg: $blue-5,// `$bg-blue` in Primer CSS - primary-border: $blue-5, - primary-text: $white, - primary-icon: $white, - secondary-bg: $gray-1, - secondary-border: $gray-1, - ), - - selected: ( - primary-bg: $blue-5,// `$bg-blue` in Primer CSS - primary-border: $blue-5, - primary-text: $white, - primary-icon: $white, - ), - - focus: ( - border: $blue-5, // blue focus border - shadow: 0 0 0 3px rgba($blue-5, 0.3), // blue focus ring - ), - ), - - fade: ( - fg-10: $black-fade-10, - fg-15: $black-fade-15, - fg-30: $black-fade-30, - fg-50: $black-fade-50, - fg-70: $black-fade-70, - fg-85: $black-fade-85, - - black-10: $black-fade-10, - black-15: $black-fade-15, - black-30: $black-fade-30, - black-50: $black-fade-50, - black-70: $black-fade-70, - black-85: $black-fade-85, - - white-10: $white-fade-10, - white-15: $white-fade-15, - white-30: $white-fade-30, - white-50: $white-fade-50, - white-70: $white-fade-70, - white-85: $white-fade-85, - ), - - // Components - - alert: ( - info: ( - text: $gray-9, - icon: rgba($blue-7, 0.6), - bg: $blue-1, - border: rgba($blue-7, 0.2), - ), - - warn: ( - text: $gray-9, - icon: $yellow-8, - bg: $yellow-1, - border: rgba($yellow-8, 0.2), - ), - - error: ( - text: $gray-9, - icon: rgba($red-8, 0.6), - bg: #ffe3e6, - border: rgba($red-8, 0.2), - ), - - success: ( - text: $gray-9, - icon: rgba($green-7, 0.8), - bg: $green-1, - border: rgba($green-7, 0.2), - ) - ), - - autocomplete: ( - shadow: 0 3px 6px rgba($gray-4, 0.15), - row-border: lighten($gray-2, 3%), - ), - - blankslate: ( - icon: lighten($gray-4, 5%), - ), - - btn: ( - text: $gray-9, - bg: $gray-0, - border: $black-fade-15, - shadow: 0 1px 0 rgba($black, 0.04), - inset-shadow: inset 0 1px 0 rgba($white, 0.25), // top highlight - - hover-bg: #f3f4f6, - hover-border: $black-fade-15, - - active-bg: darken(#f3f4f6, 3%), - active-border: $black-fade-10, - - selected-bg: darken(#f3f4f6, 2%), - - focus-bg: $gray-0, - focus-border: $black-fade-15, - focus-shadow: 0 0 0 3px rgba($blue-5, 0.3), - - shadow-active: inset 0 0.15em 0.3em $black-fade-15, // TODO: Deprecate? Not used in Primer CSS - shadow-input-focus: 0 0 0 0.2em rgba($blue, 0.3), // TODO: Deprecate? - - /* states */ - - primary: ( - text: $white, - bg: #2ea44f, - border: $black-fade-15, - shadow: 0 1px 0 $black-fade-10, - inset-shadow: inset 0 1px 0 rgba($white, 0.03), - - hover-bg: #2c974b, - hover-border: $black-fade-15, - - selected-bg: darken(#2c974b, 2%), - selected-shadow: inset 0 1px 0 rgba($green-9, 0.2), - - disabled-text: rgba($white, 0.8), - disabled-bg: #94d3a2, - disabled-border: $black-fade-10, - - focus-bg: #2ea44f, - focus-border: $black-fade-15, - focus-shadow: 0 0 0 3px rgba(#2ea44f, 0.4), - - icon: rgba($white, 0.8), - counter-bg: rgba($white, 0.2), - ), - - outline: ( - text: $blue-5, - - hover-text: $white, - hover-bg: $blue-5, - hover-border: $black-fade-15, - hover-shadow: 0 1px 0 $black-fade-10, - hover-inset-shadow: inset 0 1px 0 rgba($white, 0.03), - hover-counter-bg: rgba($white, 0.2), - - selected-text: $white, - selected-bg: darken($blue-5, 3%), - selected-border: $black-fade-15, - selected-shadow: inset 0 1px 0 rgba($blue-9, 0.2), - - disabled-text: rgba($blue-5, 0.5), - disabled-bg: $gray-0, - disabled-counter-bg: rgba($blue-5, 0.05), - - focus-border: $black-fade-15, - focus-shadow: 0 0 0 3px rgba($blue-6, 0.4), - - counter-bg: rgba($blue-5, 0.1), - ), - - danger: ( - text: $red-5, - - hover-text: $white, - hover-bg: $red-6, - hover-border: $black-fade-15, - hover-shadow: 0 1px 0 $black-fade-10, - hover-inset-shadow: inset 0 1px 0 rgba($white, 0.03), - hover-counter-bg: rgba($white, 0.2), - - selected-text: $white, - selected-bg: darken($red-5, 3%), - selected-border: $black-fade-15, - selected-shadow: inset 0 1px 0 rgba($red-9, 0.2), - - disabled-text: rgba($red-5, 0.5), - disabled-bg: $gray-0, - disabled-counter-bg: rgba($red-5, 0.05), - - focus-border: $black-fade-15, - focus-shadow: 0 0 0 3px rgba($red-6, 0.4), - - counter-bg: rgba($red-5, 0.1), - - icon: $red-5, - hover-icon: $white, - ), - - counter-bg: rgba($black, 0.08), // Darken for just a tad more contrast against the button background - ), - - counter: ( - text: $gray-9, - bg: rgba($gray-3, 0.5), - - primary: ( - text: $white, - bg: $gray-5, - ), - - secondary: ( - text: $gray-5, - bg: rgba($gray-3, 0.5), - ), - ), - - dropdown: ( - shadow: 0 8px 24px rgba($gray-4, 0.2), - ), - - label: ( - border: $gray-2, - - primary: ( - text: $gray-9, - border: $gray-5, - ), - - secondary: ( - text: $gray-6, - border: $gray-2, - ), - - info: ( - text: $blue-5, - border: $blue-5, - ), - - success: ( - text: $green-6, - border: $green-5, - ), - - warning: ( - text: $yellow-9, - border: $yellow-8, - ), - - danger: ( - text: $red-5, - border: $red-6, - ), - - // Deprecated - orange: ( - text: $orange-8, - border: $orange-5, - ), - ), - - input: ( - bg: $white, - contrast-bg: $gray-0, - border: $gray-2, - shadow: inset 0 1px 2px rgba($black, 0.075), - - disabled-bg: $gray-1, - disabled-border: $gray-2, - - warning-border: $yellow-6, - error-border: $red-6, - - tooltip: ( - success: ( - text: $green-9, - bg: $green-1, - border: $green-4, - ), - - warning: ( - text: $yellow-9, - bg: $yellow-2, - border: $yellow-6, - ), - - error: ( - text: $red-9, - bg: $red-0, - border: $red-3, - ), - ), - ), - - avatar: ( - bg: $white, - border: transparent, - stack-fade: $gray-3, - stack-fade-more: $gray-2, - child-shadow: -2px -2px 0 rgba($white, 0.8), - ), - - toast: ( - text: var(--color-text-primary), - bg: var(--color-bg-canvas), - border: var(--color-border-primary), - shadow: var(--color-shadow-large), - icon: $white, - icon-bg: var(--color-bg-info-inverse), - icon-border: transparent, - - success: ( - text: var(--color-text-primary), - border: var(--color-border-primary), - icon: $white, - icon-bg: var(--color-bg-success-inverse), - icon-border: transparent, - ), - - warning: ( - text: var(--color-text-primary), - border: var(--color-border-primary), - icon: var(--color-text-primary), - icon-bg: var(--color-bg-warning-inverse), - icon-border: transparent, - ), - - danger: ( - text: var(--color-text-primary), - border: var(--color-border-primary), - icon: $white, - icon-bg: var(--color-bg-danger-inverse), - icon-border: transparent, - ), - - loading: ( - text: var(--color-text-primary), - border: var(--color-border-primary), - icon: $white, - icon-bg: $gray-6, - icon-border: transparent, - ), - ), - - timeline: ( - text: $gray-7, - badge-bg: $gray-2, - badge-success-border: transparent, - target-badge-border: $blue-4, - target-badge-shadow: $blue-2, - ), - - select-menu: ( - border-secondary: lighten($gray-2, 3%), - shadow: 0 0 18px rgba($black, 0.4), - backdrop-bg: $black-fade-50, - backdrop-border: transparent, - tap-highlight: rgba($gray-3, 0.5), - tap-focus-bg: $blue-1, - ), - - box: ( - blue-border: $blue-2, - row-yellow-bg: $yellow-1, - row-blue-bg: $blue-0, - header-blue-bg: $blue-0, - header-blue-border: $blue-2, - border-info: rgba($blue-5, 0.2), - bg-info: $blue-0, - border-warning: rgba($yellow-5, 0.4), - bg-warning: $yellow-0, - ), - - branch-name: ( - text: $gray-6, - icon: desaturate($blue-3, 70%), - bg: lighten($blue-1, 3%), - - link: ( - text: $blue-5, - icon: desaturate($blue-3, 70%), - bg: lighten($blue-1, 3%), - ), - ), - - markdown: ( - code-bg: rgba($black, 0.05), - frame-border: lighten($gray-3, 5%), - blockquote-border: lighten($gray-3, 5%), - table-border: lighten($gray-3, 5%), - table-tr-border: darken($gray-3, 4%), - ), - - menu: ( - heading-text: $gray-9, - border-active: #f9826c, // coral - bg-active: transparent, - ), - - sidenav: ( - selected-bg: $white, - border-active: #f9826c, // coral - ), - - header: ( - text: $white-fade-70, - bg: $gray-9, - logo: $white, - ), - - filter-item: ( - bar-bg: darken($gray-1, 2%), - ), - - hidden-text-expander: ( - bg: lighten($gray-3, 5%), - bg-hover: darken($gray-3, 4%), - ), - - drag-and-drop: ( - border: darken($gray-3, 5%), - ), - - upload-enabled: ( - border: lighten($gray-3, 5%), - border-focused: lighten($blue-4, 8%), - ), - - previewable-comment-form: ( - border: darken($gray-3, 5%), - ), - - underlinenav: ( - border: rgba($gray-3, 0), - border-hover: $gray-3, - border-active: #f9826c, - text: $gray-9, - text-hover: $gray-9, - text-active: $gray-9, - icon: $gray-4, - icon-hover: $gray-4, - icon-active: $gray-9, - counter-text: $gray-9, - counter-bg: var(--color-counter-bg), - ), - - verified-badge: ( - text: $green-6, - bg: $white, - border: $gray-2, - ), - - social-count: ( - bg: $white, - ), - - tooltip: ( - text: $white, - bg: $gray-9, - ), - - header-search: ( - bg: $gray-9, - border: $gray-7, - ), - - search-keyword: ( - hl: $yellow-1, - ), - - diffstat: ( - neutral-bg: $gray-3, - neutral-border: $gray-3, - deletion-bg: $red-5, - deletion-border: $red-5, - addition-bg: $green-5, - addition-border: $green-5, - ), - - // Marketing - - mktg: ( - success: mix($green-5, $green-4, 50%), - info: mix($blue-4, $blue-5, 42%), - - bg-shade-gradient: ( - top: rgba($black, 0.065), - bottom: rgba($black, 0), - ), - - btn: ( - bg: ( - top: lighten($mktg-blue-primary, 5%), - bottom: $mktg-blue-primary, - ), - bg-overlay: ( - top: lighten($mktg-blue-secondary, 5%), - bottom: $mktg-blue-secondary, - ), - text: $white, - - primary: ( - bg: ( - top: lighten($mktg-green-primary, 5%), - bottom: $mktg-green-primary, - ), - bg-overlay: ( - top: lighten($mktg-green-secondary, 5%), - bottom: $mktg-green-secondary, - ), - text: $white, - ), - - enterprise: ( - bg: ( - top: lighten($mktg-purple-primary, 5%), - bottom: $mktg-purple-primary, - ), - bg-overlay: ( - top: lighten($mktg-purple-secondary, 5%), - bottom: $mktg-purple-secondary, - ), - text: $white, - ), - - outline: ( - text: $mktg-blue-primary, - border: rgba($mktg-blue-primary, 0.3), - - hover: ( - text: $mktg-blue-secondary, - border: rgba($mktg-blue-primary, 0.5), - ), - - focus: ( - border: rgba($mktg-blue-primary, 1), - border-inset: rgba($mktg-blue-primary, 0.5), - ), - ), - - dark: ( - text: $white, - border: rgba($white, 0.3), - - hover: ( - text: $white, - border: rgba($white, 0.5), - ), - - focus: ( - border: rgba($white, 1), - border-inset: rgba($white, 0.5), - ), - ), - ), - ), - - // App level - - files-explorer-icon: $blue-3, - hl-author-bg: $blue-0, - hl-author-border: $blue-2, - logo-subdued: $gray-3, - discussion-border: desaturate($green-3, 40%), - discussion-bg-success: $green-5, - actions-workflow-table-sticky-bg: rgba($white, 0.95), - repo-language-color-border: rgba($black, 0.1), - code-selection-bg: $blue-2, - - highlight: ( - text: #442c12, - bg: #fff0bb, - ), - - blob: ( - line-highlight-bg: $yellow-1, - line-highlight-border: transparent, - ), - - diff: ( - addition: ( - text: $green-6, - bg: var(--color-diff-blob-addition-line-bg), - border: $green-4, - ), - - deletion: ( - text: $red-6, - bg: var(--color-diff-blob-deletion-line-bg), - border: $red-5, - ), - - change: ( - text: $yellow-8, - bg: $yellow-2, - border: $yellow-6, - ), - ), - - diff-blob: ( - num-text: $black-fade-30, - num-hover-text: rgba($black, 0.6), - - addition: ( - num-text: $black-fade-30, - num-hover-text: rgba($black, 0.6), - num-bg: darken($green-1, 3%), - line-bg: darken($green-0, 2%), - word-bg: darken($green-2, 4%), - ), - - deletion: ( - num-text: $black-fade-30, - num-hover-text: rgba($black, 0.6), - num-bg: $red-1, - line-bg: $red-0, - word-bg: lighten($red-2, 2%), - ), - - hunk: ( - text: $black-fade-70, - num-bg: $blue-1, - line-bg: $blue-0, - ), - - empty-block-bg: $gray-0, // for split diffs - - selected-line-highlight-bg: rgba($yellow-4, 0.2), - selected-line-highlight-border: $yellow-5, - selected-line-highlight-mix-blend-mode: multiply, - - expander: ( - icon: $gray-6, - hover-icon: $white, - hover-bg: $blue-5, - ), - - // add line comment button -> blue [+] - comment-button: ( - icon: $white, - bg: $blue-5, - gradient-bg: lighten($blue-5, 5%), // gradient top - ), - ), - - global-nav: ( - logo: $white, - bg: $gray-9, - text: $white, - icon: $white, - input-bg: $gray-0, - input-border: $gray-0, - input-icon: $gray-3, - input-placeholder: $gray-4, - ), - - calendar-graph: ( - /*bg: $white, - border: $white,*/ - day-bg: #EBEDF0, - day-border: rgba(27, 31, 35, 0.06), - day-L1-bg: #9BE9A8, - day-L2-bg: #40C463, - day-L3-bg: #30A14E, - day-L4-bg: #216E39, - day-L4-border: rgba(27, 31, 35, 0.06), - day-L3-border: rgba(27, 31, 35, 0.06), - day-L2-border: rgba(27, 31, 35, 0.06), - day-L1-border: rgba(27, 31, 35, 0.06), - ), - - footer-invertocat: ( - octicon: $gray-3, - octicon-hover: $gray-5, - ), - - pr-state: ( - draft: ( - text: $white, - bg: $gray-5, - border: transparent, - ), - - open: ( - text: $white, - bg: $green-5, - border: transparent, - ), - - merged: ( - text: $white, - bg: $purple-5, - border: transparent, - ), - - closed: ( - text: $white, - bg: $red-5, - border: transparent, - ), - ), - - topic-tag: ( - text: $blue-5, - bg: $blue-0, - hover-bg: darken($blue-0, 4%), - active-bg: darken($blue-0, 2%), - ), - - merge-box: ( - success-icon-bg: $green-5, - success-icon-text: $white, - success-icon-border: transparent, - success-indicator-bg: $green-5, - success-indicator-border: transparent, - merged-icon-bg: $purple-5, - merged-icon-text: $white, - merged-icon-border: transparent, - merged-box-border: $purple-5, - neutral-icon-bg: $gray-5, - neutral-icon-text: $white, - neutral-icon-border: transparent, - neutral-indicator-bg: $gray-5, - neutral-indicator-border: transparent, - warning-icon-bg: $yellow-7, - warning-icon-text: $white, - warning-icon-border: transparent, - warning-box-border: $yellow-5, - warning-merge-highlight: transparent, - error-icon-bg: $red-5, - error-icon-text: $white, - error-icon-border: transparent, - error-indicator-bg: $red-5, - error-indicator-border: transparent, - ), - - project: ( - card-bg: $white, - header-bg: $gray-9, - sidebar-bg: $white, - gradient-in: $white, - gradient-out: rgba($white, 0), - ), - - checks: ( - bg: $gray-9, - - run-border-width: 0px, - container-border-width: 0px, - - text-primary: $gray-0, - text-secondary: $gray-4, - text-link: $blue-3, - - btn-icon: $gray-3, - btn-hover-icon: $gray-0, - btn-hover-bg: rgba(255, 255, 255, 0.125), - - input-text: $gray-1, - input-placeholder-text: $gray-4, - input-focus-text: $gray-4, - input-bg: $gray-8, - input-shadow: none, - - dropdown-text: $gray-3, - dropdown-bg: $gray-8, - dropdown-border: $gray-7, - dropdown-hover-text: $gray-0, - dropdown-hover-bg: $gray-7, - dropdown-btn-hover-text: $gray-0, - dropdown-btn-hover-bg: $gray-8, - - scrollbar-thumb-bg: $gray-6, - - header-label-text: $gray-2, - header-label-open-text: $gray-0, - header-border: $gray-8, - header-icon: $gray-4, - - line-text: $gray-2, - line-num-text: rgba($gray-4, 0.75), - line-timestamp-text: $gray-4, - line-hover-bg: $gray-8, - line-selected-bg: rgba($blue-4, 0.15), - line-selected-num-text: $blue-3, - line-dt-fm-text: $gray-9, - line-dt-fm-bg: $yellow-5, - - gate-bg: rgba($yellow-6, 0.15), - gate-text: $gray-2, - gate-waiting-text: $gray-3, - - step-header-open-bg: $gray-8, - step-error-text: $red-3, - step-warning-text: $yellow-3, - - logline-text: $gray-4, - logline-num-text: rgba($gray-4, 0.75), - logline-debug-text: $purple-3, - logline-error-text: $gray-2, - logline-error-num-text: $red-3, - logline-error-bg: rgba($red-6, 0.15), - logline-warning-text: $gray-2, - logline-warning-num-text: $yellow-3, - logline-warning-bg: rgba($yellow-6, 0.15), - logline-command-text: $blue-3, - logline-section-text: $green-3, - - // used in the Actions logs - ansi: ( - black: $gray-9, - black-bright: $gray-8, - white: $gray-2, - white-bright: $gray-2, - gray: $gray-4, - red: $red-3, - red-bright: $red-2, - green: $green-3, - green-bright: $green-2, - yellow: $yellow-3, - yellow-bright: $yellow-2, - blue: $blue-3, - blue-bright: $blue-2, - magenta: $purple-3, - magenta-bright: $purple-2, - cyan: #76e3ea, // custom - cyan-bright: #b3f0ff, // custom - ), - ), - - intro-shelf: ( - gradient-left: $blue-0, - gradient-right: $green-1, - gradient-in: $white, - gradient-out: rgba($white, 0), - ), - - marketing-icon: ( - primary: $blue-4, - secondary: $blue-3, - ), - - // Syntax highlighting - - // when reading code - prettylights: ( - syntax: ( - comment: $gray-5, - constant: $blue-6, - entity: $purple-5, - storage-modifier-import: $gray-9, - entity-tag: $green-6, - keyword: $red-5, - string: $blue-8, - variable: $orange-6, - brackethighlighter-unmatched: $red-7, - invalid-illegal-text: $gray-0, - invalid-illegal-bg: $red-7, - carriage-return-text: $gray-0, - carriage-return-bg: $red-5, - string-regexp: $green-6, - markup-list: $yellow-9, - markup-heading: $blue-6, - markup-italic: $gray-9, - markup-bold: $gray-9, - markup-deleted-text: $red-7, - markup-deleted-bg: $red-0, - markup-inserted-text: $green-6, - markup-inserted-bg: $green-0, - markup-changed-text: $orange-6, - markup-changed-bg: $orange-1, - markup-ignored-text: $gray-1, - markup-ignored-bg: $blue-6, - meta-diff-range: $purple-5, - brackethighlighter-angle: $gray-6, - sublimelinter-gutter-mark: $gray-4, - constant-other-reference-link: $blue-8, - ), - ), - - // when editing code - codemirror: ( - text: var(--color-text-primary), - bg: var(--color-bg-canvas), - - gutters-bg: var(--color-bg-canvas), - guttermarker-text: $white, - guttermarker-subtle-text: $gray-3, - linenumber-text: $gray-4, - cursor: $gray-9, - selection-bg: var(--color-code-selection-bg), - activeline-bg: $gray-0, - matchingbracket-text: $gray-9, - lines-bg: var(--color-bg-canvas), - - syntax: ( - comment: $gray-5, - constant: $blue-6, - entity: $purple-5, - keyword: $red-5, - storage: $red-5, - string: $blue-8, - support: $blue-6, - variable: $orange-6, - ), - ), - - // used for terminal-like enviroments - ansi: ( - black: $gray-9, - black-bright: $gray-6, - white: $gray-5, - white-bright: $gray-4, - gray: $gray-5, - red: $red-5, - red-bright: $red-6, - green: $green-6, - green-bright: $green-5, - yellow: $yellow-8, - yellow-bright: $yellow-7, - blue: $blue-5, - blue-bright: $blue-4, - magenta: $purple-5, - magenta-bright: $purple-4, - cyan: #1b7c83, // custom - cyan-bright: #3192aa, // custom - ), -); From ed19e6f9a6a77d3c4da62af792fd9270ed878010 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 16:38:06 -0500 Subject: [PATCH 27/43] Add more deprecated vars --- data/colors_v2/utils/deprecated_vars.ts | 60 +++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 5db1a4a54..c81566870 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -126,5 +126,65 @@ export default { text: get('fg.muted'), bg: get('neutral.muted') } + }, + box: { + blueBorder: get('accent.highlighter'), + rowYellowBg: get('warning.muted'), + rowBlueBg: get('accent.muted'), + headerBlueBg: get('accent.muted'), + headerBlueBorder: get('accent.highlighter'), + borderInfo: get('accent.highlighter'), + bgInfo: get('accent.muted'), + borderWarning: get('warning.highlighter'), + bgWarning: get('warning.muted') + }, + branchName: { + text: get('fg.muted'), + icon: get('fg.muted'), + bg: get('neutral.muted'), + link: { + text: get('accent.fg'), + icon: get('accent.fg'), + bg: get('accent.muted') + } + }, + markdown: { + codeBg: get('neutral.muted'), + frameBorder: get('border.default'), + blockquoteBorder: get('border.default'), + tableBorder: get('border.default'), + tableTrBorder: get('border.divider') + }, + filterItem: { + barBg: get('neutral.muted') + }, + hiddenTextExpander: { + bg: get('neutral.highlighter'), + bgHover: get('accent.highlighter') + }, + dragAndDrop: { + border: get('border.default') + }, + uploadEnabled: { + border: get('border.default'), + borderFocused: get('accent.emphasis') + }, + previewableCommentForm: { + border: get('border.default') + }, + verifiedBadge: { + text: get('success.fg'), + bg: get('canvas.default'), + border: get('border.default') + }, + socialCount: { + bg: get('canvas.default') + }, + tooltip: { + text: get('fg.onEmphasis'), + bg: get('neutral.emphasis') + }, + searchLeyword: { + hl: get('warning.muted') } } From fd7582a69c314939e0b4158d06bba470fda326b2 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 16:45:28 -0500 Subject: [PATCH 28/43] Add more variables --- data/colors_v2/utils/deprecated_vars.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index c81566870..1cfe286c9 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -184,7 +184,24 @@ export default { text: get('fg.onEmphasis'), bg: get('neutral.emphasis') }, - searchLeyword: { + searchKeyword: { hl: get('warning.muted') + }, + filesExplorerIcon: get('accent.fg'), + hlAuthorBg: get('accent.muted'), + hlAuthorBorder: get('accent.highlighter'), + logoSubdued: get('neutral.highlighter'), + discussionBorder: get('success.highlighter'), + discussionBgSuccess: get('success.emphasis'), + actionsWorkflowTableStickyBg: get('primer.canvas.sticky'), + repoLanguageColorBorder: get('primer.border.contrast'), + codeSelectionBg: get('accent.highlighter'), + highlight: { + text: get('fg.default'), + bg: get('warning.muted') + }, + blob: { + lineHighlightBg: get('warning.muted'), + lineHighlightBorder: get('warning.highlighter') } } From e6eed50c23ea62e094ad02b3038d9a97e05fbdb5 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 16:50:45 -0500 Subject: [PATCH 29/43] More variables --- data/colors_v2/utils/dark_github_vars.ts | 4 ++++ data/colors_v2/utils/deprecated_vars.ts | 10 ++++++++++ data/colors_v2/utils/light_github_vars.ts | 6 ++++++ 3 files changed, 20 insertions(+) diff --git a/data/colors_v2/utils/dark_github_vars.ts b/data/colors_v2/utils/dark_github_vars.ts index f8a51af1e..1cfc14c22 100644 --- a/data/colors_v2/utils/dark_github_vars.ts +++ b/data/colors_v2/utils/dark_github_vars.ts @@ -5,5 +5,9 @@ import {get} from '../../../src/utils' export default { calendarGraph: { dayBg: get('scale.gray.8') + }, + marketingIcon: { + primary: get('scale.blue.2'), + secondary: get('scale.blue.5') } } diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 1cfe286c9..798dcd032 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -203,5 +203,15 @@ export default { blob: { lineHighlightBg: get('warning.muted'), lineHighlightBorder: get('warning.highlighter') + }, + topicTag: { + text: get('accent.fg'), + bg: get('accent.muted'), + hoverBg: get('accent.highlighter'), + activeBg: get('accent.muted') + }, + footerInvertocat: { + octicon: get('fg.inactive'), + octiconHover: get('fg.muted') } } diff --git a/data/colors_v2/utils/light_github_vars.ts b/data/colors_v2/utils/light_github_vars.ts index 2b56a0e0e..9906787e2 100644 --- a/data/colors_v2/utils/light_github_vars.ts +++ b/data/colors_v2/utils/light_github_vars.ts @@ -1,7 +1,13 @@ +import {get} from '../../../src/utils' + // Variables to be moved to github/github export default { calendarGraph: { dayBg: '#EBEDF0' + }, + marketingIcon: { + primary: get('scale.blue.4'), + secondary: get('scale.blue.3') } } From 9cb7b8cfc298df7c7d4166578e6648daf0b37598 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 24 May 2021 22:54:15 -0500 Subject: [PATCH 30/43] Add more variables --- data/colors_v2/utils/deprecated_vars.ts | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 798dcd032..14a5d6903 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -213,5 +213,39 @@ export default { footerInvertocat: { octicon: get('fg.inactive'), octiconHover: get('fg.muted') + }, + dropdown: { + shadow: get('shadow.large') + }, + label: { + border: get('border.default'), + primary: { + text: get('fg.default'), + border: get('neutral.emphasis') + }, + secondary: { + text: get('fg.muted'), + border: get('border.default') + }, + info: { + text: get('accent.fg'), + border: get('accent.emphasis') + }, + success: { + text: get('success.fg'), + border: get('success.emphasis') + }, + warning: { + text: get('warning.fg'), + border: get('warning.emphasis') + }, + danger: { + text: get('danger.fg'), + border: get('danger.emphasis') + }, + orange: { + text: get('severe.fg'), + border: get('severe.emphasis') + } } } From 43580052cbe6bbea8004c067d42b75bc9cad02fd Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 11:15:47 -0500 Subject: [PATCH 31/43] Add more variables --- data/colors_v2/dark.ts | 6 +- data/colors_v2/light.ts | 23 +++- data/colors_v2/utils/dark_github_vars.ts | 153 ++++++++++++++++++++- data/colors_v2/utils/deprecated_vars.ts | 152 ++++++++++++++++++++- data/colors_v2/utils/light_github_vars.ts | 155 +++++++++++++++++++++- 5 files changed, 474 insertions(+), 15 deletions(-) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 341aabbd8..09936832f 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -93,9 +93,7 @@ const vars = { canvas: { default: get('scale.gray.9'), overlay: get('scale.gray.8'), - inset: get('scale.black'), - backdrop: alpha(get('scale.black'), 0.8), - mobile: get('scale.black') + inset: get('scale.black') }, border: { default: get('scale.gray.6'), @@ -161,7 +159,7 @@ const vars = { // Only meant for Primer components primer: { canvas: { - background: alpha(get('scale.black'), 0.8), // use for modal/dialogs + backdrop: alpha(get('scale.black'), 0.8), // use for modal/dialogs sticky: alpha(get('scale.gray.9'), 0.95) // use for sticky headers }, border: { diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 051f2a777..f69a2b02d 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -92,9 +92,7 @@ const vars = { canvas: { default: get('scale.white'), overlay: get('scale.white'), - inset: get('scale.gray.1'), - backdrop: alpha(get('scale.black'), 0.8), - mobile: get('scale.white') + inset: get('scale.gray.1') }, border: { default: get('scale.gray.2'), @@ -157,10 +155,10 @@ const vars = { muted: get('scale.pink.0') }, - // Only meant for Primer components + // Only meant to be used by Primer components primer: { canvas: { - background: alpha(get('scale.black'), 0.5), // use for modal/dialogs + backdrop: alpha(get('scale.black'), 0.5), // use for modal/dialogs sticky: alpha(get('scale.white'), 0.95) // use for sticky headers }, border: { @@ -173,6 +171,21 @@ const vars = { focus: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` // blue focus ring } } + + // Components + // avatar: {}, + // btn: {}, + // prState: {}, + // selectMenu: {}, + // sidenav: {}, // ? + // menu: {}, // ? + // header: {}, // ? + // headerSearch: {} // ? + // project; used in memex? + + // Marketing + + // ansi } export default merge(deprecatedVars, lightGithubVars, vars) diff --git a/data/colors_v2/utils/dark_github_vars.ts b/data/colors_v2/utils/dark_github_vars.ts index 1cfc14c22..8d52b10f6 100644 --- a/data/colors_v2/utils/dark_github_vars.ts +++ b/data/colors_v2/utils/dark_github_vars.ts @@ -4,10 +4,161 @@ import {get} from '../../../src/utils' export default { calendarGraph: { - dayBg: get('scale.gray.8') + dayBg: get('scale.gray.8'), + dayBorder: 'rgba(27, 31, 35, 0.06)', + dayL1Bg: '#0E4429', + dayL2Bg: '#006D32', + dayL3Bg: '#26A641', + dayL4Bg: '#39D353', + dayL4Border: 'rgba(255, 255, 255, 0.05)', + dayL3Border: 'rgba(255, 255, 255, 0.05)', + dayL2Border: 'rgba(255, 255, 255, 0.05)', + dayL1Border: 'rgba(255, 255, 255, 0.05)' }, marketingIcon: { primary: get('scale.blue.2'), secondary: get('scale.blue.5') + }, + diffBlob: { + selectedLineHighlightMixBlendMode: 'multiply' + }, + globalNav: { + logo: get('scale.gray.0'), + bg: get('scale.gray.8'), + text: get('scale.gray.1'), + icon: get('scale.gray.1'), + inputBg: get('scale.gray.9'), + inputBorder: get('scale.gray.7'), + inputIcon: get('scale.gray.7'), + inputPlaceholder: get('scale.gray.5') + }, + prettylights: { + syntax: { + comment: get('scale.gray.3'), + constant: get('scale.blue.2'), + entity: get('scale.purple.2'), + storageModifierImport: get('scale.gray.1'), + entityTag: get('scale.green.1'), + keyword: get('scale.red.3'), + string: get('scale.blue.1'), + variable: get('scale.orange.2'), + brackethighlighterUnmatched: get('scale.red.4'), + invalidIllegalText: get('scale.gray.0'), + invalidIllegalBg: get('scale.red.7'), + carriageReturnText: get('scale.gray.0'), + carriageReturnBg: get('scale.red.6'), + stringRegexp: get('scale.green.1'), + markupList: get('scale.yellow.1'), + markupHeading: get('scale.blue.5'), + markupItalic: get('scale.gray.1'), + markupBold: get('scale.gray.1'), + markupDeletedText: get('scale.red.0'), + markupDeletedBg: get('scale.red.8'), + markupInsertedText: get('scale.green.0'), + markupInsertedBg: get('scale.green.8'), + markupChangedText: get('scale.orange.0'), + markupChangedBg: get('scale.orange.8'), + markupIgnoredText: get('scale.gray.1'), + markupIgnoredBg: get('scale.blue.6'), + metaDiffRange: get('scale.purple.2'), + brackethighlighterAngle: get('scale.gray.3'), + sublimelinterGutterMark: get('scale.gray.5'), + constantOtherReferenceLink: get('scale.blue.1') + } + }, + codemirror: { + text: get('fg.default'), + bg: get('canvas.default'), + guttersBg: get('canvas.default'), + guttermarkerText: get('canvas.default'), + guttermarkerSubtleText: get('fg.inactive'), + linenumberText: get('fg.muted'), + cursor: get('fg.default'), + selectionBg: get('accent.muted'), + activelineBg: get('neutral.muted'), + matchingbracketText: get('fg.default'), + linesBg: get('canvas.default'), + syntax: { + comment: get('scale.gray.3'), + constant: get('scale.blue.2'), + entity: get('scale.purple.2'), + keyword: get('scale.red.3'), + storage: get('scale.red.3'), + string: get('scale.blue.1'), + support: get('scale.blue.2'), + variable: get('scale.orange.2') + } + }, + checks: { + bg: get('canvas.inset'), + runBorderWidth: '1px', + containerBorderWidth: '1px', + textPrimary: get('fg.default'), + textSecondary: get('fg.muted'), + textLink: get('accent.fg'), + btnIcon: get('fg.muted'), + btnHoverIcon: get('fg.default'), + btnHoverBg: get('neutral.muted'), + inputText: get('fg.muted'), + inputPlaceholderText: get('fg.inactive'), + inputFocusText: get('fg.default'), + inputBg: get('canvas.default'), + inputShadow: (theme: any) => `0 0 0 1px ${get('border.default')(theme)}`, + dropdownText: get('fg.default'), + dropdownBg: get('canvas.overlay'), + dropdownBorder: get('border.default'), + dropdownHoverText: get('fg.default'), + dropdownHoverBg: get('neutral.muted'), + dropdownBtnHoverText: get('fg.default'), + dropdownBtnHoverBg: get('neutral.muted'), + scrollbarThumbBg: get('neutral.highlighter'), + headerLabelText: get('fg.muted'), + headerLabelOpenText: get('fg.default'), + headerBorder: get('border.divider'), + headerIcon: get('fg.muted'), + lineText: get('fg.muted'), + lineNumText: get('fg.inactive'), + lineTimestampText: get('fg.inactive'), + lineHoverBg: get('neutral.muted'), + lineSelectedBg: get('accent.muted'), + lineSelectedNumText: get('accent.fg'), + lineDtFmText: get('fg.onEmphasis'), + lineDtFmBg: get('warning.emphasis'), + gateBg: get('warning.muted'), + gateText: get('fg.muted'), + gateWaitingText: get('warning.fg'), + stepHeaderOpenBg: get('neutral.muted'), + stepErrorText: get('danger.fg'), + stepWarningText: get('warning.fg'), + loglineText: get('fg.muted'), + loglineNumText: get('fg.inactive'), + loglineDebugText: get('done.fg'), + loglineErrorText: get('fg.muted'), + loglineErrorNumText: get('fg.inactive'), + loglineErrorBg: get('danger.muted'), + loglineWarningText: get('fg.muted'), + loglineWarningNumText: get('warning.fg'), + loglineWarningBg: get('warning.muted'), + loglineCommandText: get('accent.fg'), + loglineSectionText: get('success.fg'), + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.8'), + white: get('scale.gray.2'), + whiteBright: get('scale.gray.2'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#76e3ea', + cyanBright: '#b3f0ff' + } } } diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 14a5d6903..bcf934377 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -3,7 +3,10 @@ import {get} from '../../../src/utils' // Variables to be removed in the next major release // Every variable in this file must map to a functional variable (e.g. get('fg.default')). -// Don't use hex codes (e.g. '#ff0000') or scale variables (e.g. get('scale.gray.5')). +// Don't use hex codes (e.g. '#fff') or scale variables (e.g. get('scale.gray.5')). + +const deprecated = '#ff0000' +const unset = 'transparent' export default { text: { @@ -41,14 +44,14 @@ export default { }, bg: { canvas: get('canvas.default'), - canvasMobile: get('canvas.mobile'), + canvasMobile: unset, canvasInverse: get('neutral.emphasis'), canvasInset: get('canvas.inset'), primary: get('canvas.default'), secondary: get('neutral.muted'), teritiary: get('neutral.muted'), overlay: get('canvas.overlay'), - backdrop: get('canvas.backdrop'), + backdrop: get('primer.canvas.backdrop'), info: get('accent.muted'), infoInverse: get('accent.emphasis'), danger: get('danger.muted'), @@ -247,5 +250,148 @@ export default { text: get('severe.fg'), border: get('severe.emphasis') } + }, + input: { + bg: get('canvas.default'), + contrastBg: get('canvas.inset'), + border: get('border.default'), + shadow: get('primer.shadow.inset'), + disabledBg: get('neutral.muted'), + disabledBorder: get('border.default'), + warningBorder: get('warning.emphasis'), + errorBorder: get('danger.emphasis'), + tooltip: { + success: { + text: get('fg.default'), + bg: get('success.muted'), + border: get('success.highlighter') + }, + warning: { + text: get('fg.default'), + bg: get('warning.muted'), + border: get('warning.highlighter') + }, + error: { + text: get('fg.default'), + bg: get('danger.muted'), + border: get('danger.highlighter') + } + } + }, + toast: { + text: get('fg.default'), + bg: get('canvas.default'), + border: get('border.default'), + shadow: get('shadow.large'), + icon: get('fg.onEmphasis'), + iconBg: get('accent.emphasis'), + iconBorder: unset, + success: { + text: get('fg.default'), + border: get('border.default'), + icon: get('fg.onEmphasis'), + iconBg: get('success.emphasis'), + iconBorder: unset + }, + warning: { + text: get('fg.default'), + border: get('border.default'), + icon: get('fg.default'), + iconBg: get('warning.emphasis'), + iconBorder: unset + }, + danger: { + text: get('fg.default'), + border: get('border.default'), + icon: get('fg.onEmphasis'), + iconBg: get('danger.emphasis'), + iconBorder: unset + }, + loading: { + text: get('fg.default'), + border: get('border.default'), + icon: get('fg.onEmphasis'), + iconBg: get('neutral.emphasis'), + iconBorder: unset + } + }, + timeline: { + text: get('fg.muted'), + badgeBg: get('neutral.muted'), + badgeSuccessBorder: unset, + targetBadgeBorder: get('accent.emphasis'), + targetBadgeShadow: get('accent.highlighter') + }, + diffstat: { + neutralBg: get('neutral.highlighter'), + neutralBorder: get('neutral.highlighter'), + deletionBg: get('danger.emphasis'), + deletionBorder: get('danger.emphasis'), + additionBg: get('success.emphasis'), + additionBorder: get('success.emphasis') + }, + diff: { + addition: { + text: get('success.fg'), + bg: get('success.muted'), + border: get('success.highlighter') + }, + deletion: { + text: get('danger.fg'), + bg: get('danger.muted'), + border: get('danger.highlighter') + }, + change: { + text: get('warning.fg'), + bg: get('warning.muted'), + border: get('warning.highlighter') + } + }, + mergeBox: { + successIconBg: get('success.emphasis'), + successIconText: get('fg.onEmphasis'), + successIconBorder: unset, + successIndicatorBg: get('success.emphasis'), + successIndicatorBorder: unset, + mergedIconBg: get('done.emphasis'), + mergedIconText: get('fg.onEmphasis'), + mergedIconBorder: unset, + mergedBoxBorder: get('done.emphasis'), + neutralIconBg: get('neutral.emphasis'), + neutralIconText: get('fg.onEmphasis'), + neutralIconBorder: unset, + neutralIndicatorBg: get('neutral.emphasis'), + neutralIndicatorBorder: unset, + warningIconBg: get('warning.emphasis'), + warningIconText: get('fg.onEmphasis'), + warningIconBorder: unset, + warningBoxBorder: get('warning.emphasis'), + warningMergeHighlight: unset, + errorIconBg: get('danger.emphasis'), + errorIconText: get('fg.onEmphasis'), + errorIconBorder: unset, + errorIndicatorBg: get('danger.emphasis'), + errorIndicatorBorder: unset + }, + fade: { + fg10: deprecated, + fg15: deprecated, + fg30: deprecated, + fg50: deprecated, + fg70: deprecated, + fg85: deprecated + }, + underlinenav: { + border: unset, + borderHover: get('neutral.highlighter'), + borderActive: get('primer.border.active'), + text: get('fg.default'), + textHover: get('fg.default'), + textActive: get('fg.default'), + icon: get('fg.inactive'), + iconHover: get('fg.inactive'), + iconActive: get('fg.default'), + counterText: get('fg.default'), + counterBg: get('neutral.muted') } } diff --git a/data/colors_v2/utils/light_github_vars.ts b/data/colors_v2/utils/light_github_vars.ts index 9906787e2..134573630 100644 --- a/data/colors_v2/utils/light_github_vars.ts +++ b/data/colors_v2/utils/light_github_vars.ts @@ -1,13 +1,164 @@ -import {get} from '../../../src/utils' +import {alpha, get} from '../../../src/utils' // Variables to be moved to github/github export default { calendarGraph: { - dayBg: '#EBEDF0' + dayBg: '#EBEDF0', + dayBorder: 'rgba(27, 31, 35, 0.06)', + dayL1Bg: '#9BE9A8', + dayL2Bg: '#40C463', + dayL3Bg: '#30A14E', + dayL4Bg: '#216E39', + dayL4Border: 'rgba(27, 31, 35, 0.06)', + dayL3Border: 'rgba(27, 31, 35, 0.06)', + dayL2Border: 'rgba(27, 31, 35, 0.06)', + dayL1Border: 'rgba(27, 31, 35, 0.06)' }, marketingIcon: { primary: get('scale.blue.4'), secondary: get('scale.blue.3') + }, + diffBlob: { + selectedLineHighlightMixBlendMode: 'multiply' + }, + globalNav: { + logo: get('scale.white'), + bg: get('scale.gray.9'), + text: get('scale.white'), + icon: get('scale.white'), + inputBg: get('scale.gray.0'), + inputBorder: get('scale.gray.0'), + inputIcon: get('scale.gray.3'), + inputPlaceholder: get('scale.gray.4') + }, + prettylights: { + syntax: { + comment: get('scale.gray.5'), + constant: get('scale.blue.6'), + entity: get('scale.purple.5'), + storageModifierImport: get('scale.gray.9'), + entityTag: get('scale.green.6'), + keyword: get('scale.red.5'), + string: get('scale.blue.8'), + variable: get('scale.orange.6'), + brackethighlighterUnmatched: get('scale.red.7'), + invalidIllegalText: get('scale.gray.0'), + invalidIllegalBg: get('scale.red.7'), + carriageReturnText: get('scale.gray.0'), + carriageReturnBg: get('scale.red.5'), + stringRegexp: get('scale.green.6'), + markupList: get('scale.yellow.9'), + markupHeading: get('scale.blue.6'), + markupItalic: get('scale.gray.9'), + markupBold: get('scale.gray.9'), + markupDeletedText: get('scale.red.7'), + markupDeletedBg: get('scale.red.0'), + markupInsertedText: get('scale.green.6'), + markupInsertedBg: get('scale.green.0'), + markupChangedText: get('scale.orange.6'), + markupChangedBg: get('scale.orange.1'), + markupIgnoredText: get('scale.gray.1'), + markupIgnoredBg: get('scale.blue.6'), + metaDiffRange: get('scale.purple.5'), + brackethighlighterAngle: get('scale.gray.6'), + sublimelinterGutterMark: get('scale.gray.4'), + constantOtherReferenceLink: get('scale.blue.8') + } + }, + codemirror: { + text: get('fg.default'), + bg: get('canvas.default'), + guttersBg: get('canvas.default'), + guttermarkerText: get('canvas.default'), + guttermarkerSubtleText: get('fg.inactive'), + linenumberText: get('fg.muted'), + cursor: get('fg.default'), + selectionBg: get('accent.muted'), + activelineBg: get('neutral.muted'), + matchingbracketText: get('fg.default'), + linesBg: get('canvas.default'), + syntax: { + comment: get('scale.gray.9'), + constant: get('scale.blue.6'), + entity: get('scale.purple.5'), + keyword: get('scale.red.5'), + storage: get('scale.red.5'), + string: get('scale.blue.8'), + support: get('scale.blue.6'), + variable: get('scale.orange.6') + } + }, + checks: { + bg: get('scale.gray.9'), + runBorderWidth: '0px', + containerBorderWidth: '0px', + textPrimary: get('scale.gray.0'), + textSecondary: get('scale.gray.4'), + textLink: get('scale.blue.3'), + btnIcon: get('scale.gray.3'), + btnHoverIcon: get('scale.gray.0'), + btnHoverBg: 'rgba(255,255,255,0.125)', + inputText: get('scale.gray.1'), + inputPlaceholderText: get('scale.gray.4'), + inputFocusText: get('scale.gray.4'), + inputBg: get('scale.gray.8'), + inputShadow: 'none', + dropdownText: get('scale.gray.3'), + dropdownBg: get('scale.gray.8'), + dropdownBorder: get('scale.gray.7'), + dropdownHoverText: get('scale.gray.0'), + dropdownHoverBg: get('scale.gray.7'), + dropdownBtnHoverText: get('scale.gray.0'), + dropdownBtnHoverBg: get('scale.gray.8'), + scrollbarThumbBg: get('scale.gray.6'), + headerLabelText: get('scale.gray.2'), + headerLabelOpenText: get('scale.gray.0'), + headerBorder: get('scale.gray.8'), + headerIcon: get('scale.gray.4'), + lineText: get('scale.gray.2'), + lineNumText: alpha(get('scale.gray.4'), 0.75), + lineTimestampText: get('scale.gray.4'), + lineHoverBg: get('scale.gray.8'), + lineSelectedBg: alpha(get('scale.blue.4'), 0.15), + lineSelectedNumText: get('scale.blue.3'), + lineDtFmText: get('scale.gray.9'), + lineDtFmBg: get('scale.yellow.5'), + gateBg: alpha(get('scale.yellow.6'), 0.15), + gateText: get('scale.gray.2'), + gateWaitingText: get('scale.gray.3'), + stepHeaderOpenBg: get('scale.gray.8'), + stepErrorText: get('scale.red.3'), + stepWarningText: get('scale.yellow.3'), + loglineText: get('scale.gray.4'), + loglineNumText: alpha(get('scale.gray.4'), 0.75), + loglineDebugText: get('scale.purple.3'), + loglineErrorText: get('scale.gray.2'), + loglineErrorNumText: get('scale.red.3'), + loglineErrorBg: alpha(get('scale.red.6'), 0.15), + loglineWarningText: get('scale.gray.2'), + loglineWarningNumText: get('scale.yellow.3'), + loglineWarningBg: alpha(get('scale.yellow.6'), 0.15), + loglineCommandText: get('scale.blue.3'), + loglineSectionText: get('scale.green.3'), + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.8'), + white: get('scale.gray.2'), + whiteBright: get('scale.gray.2'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#76e3ea', + cyanBright: '#b3f0ff' + } } } From a416ec5e822027337444d14667fda343c918637e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 11:58:56 -0500 Subject: [PATCH 32/43] Moar variables --- data/colors/light.ts | 2 +- data/colors_v2/dark.ts | 30 +++++++- data/colors_v2/light.ts | 38 ++++++---- data/colors_v2/utils/dark_github_vars.ts | 12 +++- data/colors_v2/utils/deprecated_vars.ts | 79 +++++++++++++++------ data/colors_v2/utils/light_github_vars.ts | 10 +++ data/colors_v2/utils/marketing_vars.ts | 85 +++++++++++++++++++++++ 7 files changed, 220 insertions(+), 36 deletions(-) create mode 100644 data/colors_v2/utils/marketing_vars.ts diff --git a/data/colors/light.ts b/data/colors/light.ts index 2b7487881..977c87805 100644 --- a/data/colors/light.ts +++ b/data/colors/light.ts @@ -1,4 +1,4 @@ -import {alpha, get, lighten, merge} from '../../src/utils' +import {alpha, get, lighten} from '../../src/utils' export default { scale: { diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 09936832f..7cd4de7c8 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,6 +1,7 @@ import {alpha, get, merge} from '../../src/utils' -import deprecatedVars from './utils/deprecated_vars' import darkGithubVars from './utils/dark_github_vars' +import deprecatedVars from './utils/deprecated_vars' +import marketingVars from './utils/marketing_vars' const vars = { // Scales @@ -171,7 +172,32 @@ const vars = { inset: '0 0 transparent', // top inner shadow focus: (theme: any) => `0 0 0 3px ${get('scale.blue.8')(theme)}` // blue focus ring } + }, + + // Components + avatar: { + bg: alpha(get('scale.white'), 0.1), + border: alpha(get('scale.white'), 0.1), + stackFade: get('scale.gray.6'), + stackFadeMore: get('scale.gray.7'), + childShadow: (theme: any) => `-2px -2px 0 ${get('scale.gray.9')(theme)}` + }, + selectMenu: { + backdropBorder: get('scale.gray.5'), + tapHighlight: alpha(get('scale.gray.6'), 0.5), + tapFocusBg: get('scale.blue.8') + }, + header: { + text: alpha(get('scale.white'), 0.7), + bg: get('scale.gray.9'), + logo: get('scale.gray.0') + }, + sidenav: { + selectedBg: get('scale.gray.7') + }, + menu: { + bgActive: get('scale.gray.8') } } -export default merge(deprecatedVars, darkGithubVars, vars) +export default merge(deprecatedVars, darkGithubVars, marketingVars, vars) diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index f69a2b02d..02cd49c02 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,6 +1,7 @@ import {alpha, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' import lightGithubVars from './utils/light_github_vars' +import marketingVars from './utils/marketing_vars' const vars = { scale: { @@ -170,22 +171,35 @@ const vars = { inset: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.gray.2'), 0.2)(theme)}`, // top inner shadow focus: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` // blue focus ring } - } + }, // Components - // avatar: {}, + avatar: { + bg: get('scale.white'), + border: 'transparent', + stackFade: get('scale.gray.3'), + stackFadeMore: get('scale.gray.2'), + childShadow: (theme: any) => `-2px -2px 0 ${alpha(get('scale.white'), 0.8)(theme)}` + }, + selectMenu: { + backdropBorder: 'transparent', + tapHighlight: alpha(get('scale.gray.3'), 0.5), + tapFocusBg: get('scale.blue.1') + }, + header: { + text: alpha(get('scale.white'), 0.7), + bg: get('scale.gray.9'), + logo: get('scale.white') + }, + sidenav: { + selectedBg: get('scale.white') + }, + menu: { + bgActive: 'transparent' + } // btn: {}, - // prState: {}, - // selectMenu: {}, - // sidenav: {}, // ? - // menu: {}, // ? - // header: {}, // ? - // headerSearch: {} // ? - // project; used in memex? - - // Marketing // ansi } -export default merge(deprecatedVars, lightGithubVars, vars) +export default merge(deprecatedVars, lightGithubVars, marketingVars, vars) diff --git a/data/colors_v2/utils/dark_github_vars.ts b/data/colors_v2/utils/dark_github_vars.ts index 8d52b10f6..293d579cc 100644 --- a/data/colors_v2/utils/dark_github_vars.ts +++ b/data/colors_v2/utils/dark_github_vars.ts @@ -1,4 +1,4 @@ -import {get} from '../../../src/utils' +import {get, alpha} from '../../../src/utils' // Variables to be moved to github/github @@ -160,5 +160,15 @@ export default { cyan: '#76e3ea', cyanBright: '#b3f0ff' } + }, + project: { + headerBg: get('scale.gray.9'), + sidebarBg: get('scale.gray.8'), + gradientIn: get('scale.gray.8'), + gradientOut: alpha(get('scale.gray.8'), 0) + }, + headerSearch: { + bg: get('scale.gray.9'), + border: get('scale.gray.7') } } diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index bcf934377..61e4c44c3 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -49,7 +49,7 @@ export default { canvasInset: get('canvas.inset'), primary: get('canvas.default'), secondary: get('neutral.muted'), - teritiary: get('neutral.muted'), + tertiary: get('neutral.muted'), overlay: get('canvas.overlay'), backdrop: get('primer.canvas.backdrop'), info: get('accent.muted'), @@ -61,28 +61,30 @@ export default { warning: get('warning.muted'), warningInverse: get('warning.emphasis') }, + shadow: { + highlight: get('primer.shadow.highlight'), + inset: get('primer.shadow.inset') + }, state: { - state: { - hover: { - primaryBg: get('accent.emphasis'), - primaryBorder: get('accent.emphasis'), - primaryText: get('fg.onEmphasis'), - primaryIcon: get('fg.onEmphasis'), - secondaryBg: get('neutral.muted'), - secondaryBorder: get('neutral.muted') - }, + hover: { + primaryBg: get('accent.emphasis'), + primaryBorder: get('accent.emphasis'), + primaryText: get('fg.onEmphasis'), + primaryIcon: get('fg.onEmphasis'), + secondaryBg: get('neutral.muted'), + secondaryBorder: get('neutral.muted') + }, - selected: { - primaryBg: get('accent.emphasis'), - primaryBorder: get('accent.emphasis'), - primaryText: get('fg.onEmphasis'), - primaryIcon: get('fg.onEmphasis') - }, + selected: { + primaryBg: get('accent.emphasis'), + primaryBorder: get('accent.emphasis'), + primaryText: get('fg.onEmphasis'), + primaryIcon: get('fg.onEmphasis') + }, - focus: { - border: get('accent.emphasis'), - shadow: get('primer.shadow.focus') // blue focus ring - } + focus: { + border: get('accent.emphasis'), + shadow: get('primer.shadow.focus') // blue focus ring } }, alert: { @@ -393,5 +395,42 @@ export default { iconActive: get('fg.default'), counterText: get('fg.default'), counterBg: get('neutral.muted') + }, + selectMenu: { + borderSecondary: get('border.divider'), + shadow: get('shadow.large'), + backdropBg: get('primer.canvas.backdrop') + }, + sidenav: { + borderActive: get('primer.border.active') + }, + menu: { + headingText: get('fg.default'), + borderActive: get('primer.border.active') + }, + project: { + cardBg: get('canvas.overlay') + }, + prState: { + draft: { + text: get('fg.onEmphasis'), + bg: get('neutral.emphasis'), + border: unset + }, + open: { + text: get('fg.onEmphasis'), + bg: get('success.emphasis'), + border: unset + }, + merged: { + text: get('fg.onEmphasis'), + bg: get('done.emphasis'), + border: unset + }, + closed: { + text: get('fg.onEmphasis'), + bg: get('danger.emphasis'), + border: unset + } } } diff --git a/data/colors_v2/utils/light_github_vars.ts b/data/colors_v2/utils/light_github_vars.ts index 134573630..1fef7c394 100644 --- a/data/colors_v2/utils/light_github_vars.ts +++ b/data/colors_v2/utils/light_github_vars.ts @@ -160,5 +160,15 @@ export default { cyan: '#76e3ea', cyanBright: '#b3f0ff' } + }, + project: { + headerBg: get('scale.gray.9'), + sidebarBg: get('scale.white'), + gradientIn: get('scale.white'), + gradientOut: alpha(get('scale.white'), 0) + }, + headerSearch: { + bg: get('scale.gray.9'), + border: get('scale.gray.7') } } diff --git a/data/colors_v2/utils/marketing_vars.ts b/data/colors_v2/utils/marketing_vars.ts new file mode 100644 index 000000000..d9ed0caf7 --- /dev/null +++ b/data/colors_v2/utils/marketing_vars.ts @@ -0,0 +1,85 @@ +import {alpha, get, lighten, mix} from '../../../src/utils' + +const mktg = { + blue: { + primary: '#4969ed', + secondary: '#3355e0' + }, + green: { + primary: '#2ea44f', + secondary: '#22863a' + }, + purple: { + primary: '#6f57ff', + secondary: '#614eda' + } +} + +// TODO: Migrate once new marketing colors (lemon, lime, indigo) are added +export default { + mktg: { + success: mix(get('scale.green.5'), get('scale.green.4')), + info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42), + bgShadeGradient: { + top: alpha(get('scale.black'), 0.065), + bottom: alpha(get('scale.black'), 0) + }, + btn: { + bg: { + top: lighten(mktg.blue.primary, 0.05), + bottom: mktg.blue.primary + }, + bgOverlay: { + top: lighten(mktg.blue.secondary, 0.05), + bottom: mktg.blue.secondary + }, + text: get('scale.white'), + primary: { + bg: { + top: lighten(mktg.green.primary, 0.05), + bottom: mktg.green.primary + }, + bgOverlay: { + top: lighten(mktg.green.secondary, 0.05), + bottom: mktg.green.secondary + }, + text: get('scale.white') + }, + enterprise: { + bg: { + top: lighten(mktg.purple.primary, 0.05), + bottom: mktg.purple.primary + }, + bgOverlay: { + top: lighten(mktg.purple.secondary, 0.05), + bottom: mktg.purple.secondary + }, + text: get('scale.white') + }, + outline: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.3), + hover: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.5) + }, + focus: { + border: get('scale.white'), + borderInset: alpha(get('scale.white'), 0.5) + } + }, + dark: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.3), + hover: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.5) + }, + focus: { + border: get('scale.white'), + borderInset: alpha(get('scale.white'), 0.5) + } + } + } + } +} From 7a8875064103f99b3a06870f667d02dea0a00a83 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 12:12:32 -0500 Subject: [PATCH 33/43] Add more variables --- data/colors_v2/dark.ts | 19 +++++++++++++ data/colors_v2/light.ts | 21 ++++++++++++++- data/colors_v2/utils/deprecated_vars.ts | 36 +++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index 7cd4de7c8..fda589a82 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -197,6 +197,25 @@ const vars = { }, menu: { bgActive: get('scale.gray.8') + }, + ansi: { + black: get('scale.gray.5'), + blackBright: get('scale.gray.4'), + white: get('scale.gray.2'), + whiteBright: get('scale.white'), + gray: get('scale.gray.4'), + red: get('scale.red.3'), + redBright: get('scale.red.2'), + green: get('scale.green.3'), + greenBright: get('scale.green.2'), + yellow: get('scale.yellow.3'), + yellowBright: get('scale.yellow.2'), + blue: get('scale.blue.3'), + blueBright: get('scale.blue.2'), + magenta: get('scale.purple.3'), + magentaBright: get('scale.purple.2'), + cyan: '#39c5cf', + cyanBright: '#56d4dd' } } diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 02cd49c02..12a31e68d 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -196,8 +196,27 @@ const vars = { }, menu: { bgActive: 'transparent' - } + }, // btn: {}, + ansi: { + black: get('scale.gray.9'), + blackBright: get('scale.gray.6'), + white: get('scale.gray.5'), + whiteBright: get('scale.gray.4'), + gray: get('scale.gray.5'), + red: get('scale.red.5'), + redBright: get('scale.red.6'), + green: get('scale.green.6'), + greenBright: get('scale.green.5'), + yellow: get('scale.yellow.8'), + yellowBright: get('scale.yellow.7'), + blue: get('scale.blue.5'), + blueBright: get('scale.blue.4'), + magenta: get('scale.purple.5'), + magentaBright: get('scale.purple.4'), + cyan: '#1b7c83', + cyanBright: '#3192aa' + } // ansi } diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 61e4c44c3..66dc95daa 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -432,5 +432,41 @@ export default { bg: get('danger.emphasis'), border: unset } + }, + diffBlob: { + numText: get('neutral.fg'), + numHoverText: get('fg.default'), + addition: { + numText: get('success.fg'), + numHoverText: get('fg.default'), + numBg: get('success.highlighter'), + lineBg: get('success.muted'), + wordBg: get('success.highlighter') + }, + deletion: { + numText: get('danger.fg'), + numHoverText: get('fg.default'), + numBg: get('danger.highlighter'), + lineBg: get('danger.muted'), + wordBg: get('danger.highlighter') + }, + hunk: { + text: get('fg.muted'), + numBg: get('accent.highlighter'), + lineBg: get('accent.muted') + }, + emptyBlockBg: get('neutral.muted'), + selectedLineHighlightBg: get('warning.muted'), + selectedLineHighlightBorder: get('warning.highlighter'), + expander: { + icon: get('fg.muted'), + hoverIcon: get('fg.onEmphasis'), + hoverBg: get('accent.emphasis') + }, + commentButton: { + icon: get('fg.onEmphasis'), + bg: get('accent.emphasis'), + gradientBg: unset + } } } From 8d735b3d11a2a252cb3736a913bcfbb9cfad0236 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 14:40:48 -0500 Subject: [PATCH 34/43] Add more variables --- data/colors/dark.ts | 2 +- data/colors/light.ts | 100 ++++++++++++------------ data/colors_v2/dark.ts | 82 ++++++++++++++++++- data/colors_v2/light.ts | 87 ++++++++++++++++++++- data/colors_v2/utils/deprecated_vars.ts | 8 +- 5 files changed, 222 insertions(+), 57 deletions(-) diff --git a/data/colors/dark.ts b/data/colors/dark.ts index 2b1474703..c009506ec 100644 --- a/data/colors/dark.ts +++ b/data/colors/dark.ts @@ -374,7 +374,7 @@ export default { selectedBg: get('scale.blue.7'), selectedBorder: get('fade.white10'), selectedShadow: '0 0 transparent', - disabledText: alpha(get('scale.blue.5'), 0.5), + disabledText: alpha(get('scale.blue.3'), 0.5), disabledBg: get('scale.gray.9'), disabledCounterBg: alpha(get('scale.blue.5'), 0.05), focusBorder: get('scale.blue.3'), diff --git a/data/colors/light.ts b/data/colors/light.ts index 977c87805..61c8f40f3 100644 --- a/data/colors/light.ts +++ b/data/colors/light.ts @@ -1,4 +1,4 @@ -import {alpha, get, lighten} from '../../src/utils' +import {alpha, get, lighten, darken} from '../../src/utils' export default { scale: { @@ -315,79 +315,79 @@ export default { btn: { text: get('scale.gray.9'), bg: get('scale.gray.0'), - border: 'rgba(27,31,35,0.15)', - shadow: '0 1px 0 rgba(27,31,35,0.04)', - insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)', + border: alpha(get('scale.black'), 0.15), + shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, + insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, hoverBg: '#f3f4f6', - hoverBorder: get('fade.black15'), - activeBg: '#eaecef', - activeBorder: get('fade.black10'), - selectedBg: '#edeff2', + hoverBorder: alpha(get('scale.black'), 0.15), + activeBg: darken(get('btn.hoverBg'), 0.03), + activeBorder: alpha(get('scale.black'), 0.1), + selectedBg: darken(get('btn.hoverBg'), 0.02), focusBg: get('scale.gray.0'), - focusBorder: get('fade.black15'), - focusShadow: '0 0 0 3px rgba(3,102,214,0.3)', - shadowActive: 'inset 0 0.15em 0.3em rgba(27,31,35,0.15)', - shadowInputFocus: '0 0 0 0.2em rgba(3,102,214,0.3)', + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}`, + shadowActive: (theme: any) => `inset 0 0.15em 0.3em ${alpha(get('scale.black'), 0.15)(theme)}`, // TODO: Deprecate? Not used in Primer CSS + shadowInputFocus: (theme: any) => `0 0 0 0.2em ${alpha(get('scale.blue.5'), 0.3)(theme)}`, // TODO: Deprecate? + counterBg: alpha(get('scale.black'), 0.08), primary: { text: get('scale.white'), bg: '#2ea44f', - border: 'rgba(27,31,35,0.15)', - shadow: '0 1px 0 rgba(27,31,35,0.1)', - insetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', + border: alpha(get('scale.black'), 0.15), + shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, hoverBg: '#2c974b', - hoverBorder: 'rgba(27,31,35,0.15)', - selectedBg: '#2a8f47', - selectedShadow: 'inset 0 1px 0 rgba(20,70,32,0.2)', - disabledText: 'rgba(255,255,255,0.8)', + hoverBorder: alpha(get('scale.black'), 0.15), + selectedBg: darken(get('btn.primary.hoverBg'), 0.02), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.green.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.white'), 0.8), disabledBg: '#94d3a2', - disabledBorder: 'rgba(27,31,35,0.1)', + disabledBorder: alpha(get('scale.black'), 0.1), focusBg: '#2ea44f', - focusBorder: 'rgba(27,31,35,0.15)', - focusShadow: '0 0 0 3px rgba(46,164,79,0.4)', - icon: 'rgba(255,255,255,0.8)', - counterBg: 'rgba(255,255,255,0.2)' + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('btn.primary.focusBg'), 0.4)(theme)}`, + icon: alpha(get('scale.white'), 0.8), + counterBg: alpha(get('scale.white'), 0.2) }, outline: { text: get('scale.blue.5'), hoverText: get('scale.white'), hoverBg: get('scale.blue.5'), - hoverBorder: 'rgba(27,31,35,0.15)', - hoverShadow: '0 1px 0 rgba(27,31,35,0.1)', - hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', - hoverCounterBg: 'rgba(255,255,255,0.2)', + hoverBorder: alpha(get('scale.black'), 0.15), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), - selectedBg: '#035fc7', - selectedBorder: 'rgba(27,31,35,0.15)', - selectedShadow: 'inset 0 1px 0 rgba(5,38,76,0.2)', - disabledText: 'rgba(3,102,214,0.5)', + selectedBg: darken(get('scale.blue.5'), 0.03), + selectedBorder: alpha(get('scale.black'), 0.15), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.blue.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.blue.5'), 0.5), disabledBg: get('scale.gray.0'), - disabledCounterBg: 'rgba(3,102,214,0.05)', - focusBorder: 'rgba(27,31,35,0.15)', - focusShadow: '0 0 0 3px rgba(0,92,197,0.4)', - counterBg: 'rgba(3,102,214,0.1)' + disabledCounterBg: alpha(get('scale.blue.5'), 0.05), + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.blue.5'), 0.1) }, danger: { text: get('scale.red.5'), hoverText: get('scale.white'), hoverBg: get('scale.red.6'), - hoverBorder: 'rgba(27,31,35,0.15)', - hoverShadow: '0 1px 0 rgba(27,31,35,0.1)', - hoverInsetShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)', - hoverCounterBg: 'rgba(255,255,255,0.2)', + hoverBorder: alpha(get('scale.black'), 0.15), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), - selectedBg: '#d42d3d', - selectedBorder: 'rgba(27,31,35,0.15)', - selectedShadow: 'inset 0 1px 0 rgba(134,24,29,0.2)', - disabledText: 'rgba(215,58,73,0.5)', + selectedBg: darken(get('scale.red.5'), 0.03), + selectedBorder: alpha(get('scale.black'), 0.15), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.red.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.red.5'), 0.5), disabledBg: get('scale.gray.0'), - disabledCounterBg: 'rgba(215,58,73,0.05)', - focusBorder: 'rgba(27,31,35,0.15)', - focusShadow: '0 0 0 3px rgba(203,36,49,0.4)', - counterBg: 'rgba(215,58,73,0.1)', + disabledCounterBg: alpha(get('scale.red.5'), 0.05), + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.red.5'), 0.1), icon: get('scale.red.5'), hoverIcon: get('scale.white') - }, - counterBg: 'rgba(27,31,35,0.08)' + } }, counter: { text: get('scale.gray.9'), diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index fda589a82..d3a750eb1 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,4 +1,4 @@ -import {alpha, get, merge} from '../../src/utils' +import {alpha, get, merge, darken} from '../../src/utils' import darkGithubVars from './utils/dark_github_vars' import deprecatedVars from './utils/deprecated_vars' import marketingVars from './utils/marketing_vars' @@ -216,6 +216,86 @@ const vars = { magentaBright: get('scale.purple.2'), cyan: '#39c5cf', cyanBright: '#56d4dd' + }, + btn: { + text: get('scale.gray.1'), + bg: get('scale.gray.7'), + border: get('scale.gray.6'), + shadow: '0 0 transparent', + insetShadow: '0 0 transparent', + hoverBg: get('scale.gray.6'), + hoverBorder: get('scale.gray.3'), + activeBg: darken(get('scale.gray.6'), 0.03), + activeBorder: get('scale.gray.4'), + selectedBg: get('scale.gray.8'), + focusBg: get('scale.gray.7'), + focusBorder: get('scale.gray.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.gray.3'), 0.3)(theme)}`, + shadowActive: (theme: any) => `inset 0 0.15em 0.3em ${alpha(get('scale.black'), 0.15)(theme)}`, + shadowInputFocus: (theme: any) => `0 0 0 0.2em ${alpha(get('scale.blue.5'), 0.3)(theme)}`, + counterBg: get('scale.gray.6'), + + primary: { + text: '#ffffff', + bg: get('scale.green.5'), + border: get('scale.green.4'), + shadow: '0 0 transparent', + insetShadow: '0 0 transparent', + hoverBg: get('scale.green.4'), + hoverBorder: get('scale.green.3'), + selectedBg: get('scale.green.5'), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.white'), 0.5), + disabledBg: alpha(get('scale.green.5'), 0.6), + disabledBorder: 'transparent', + focusBg: get('scale.green.5'), + focusBorder: get('scale.green.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha('#2ea44f', 0.4)(theme)}`, + icon: get('scale.white'), + counterBg: alpha(get('scale.white'), 0.2) + }, + + outline: { + text: get('scale.blue.3'), + hoverText: get('scale.blue.3'), + hoverBg: get('scale.gray.6'), + hoverBorder: get('scale.blue.3'), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), + selectedText: get('scale.white'), + selectedBg: get('scale.blue.7'), + selectedBorder: alpha(get('scale.white'), 0.1), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.blue.3'), 0.5), + disabledBg: get('scale.gray.9'), + disabledCounterBg: alpha(get('scale.blue.5'), 0.05), + focusBorder: get('scale.blue.3'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.blue.5'), 0.1) + }, + + danger: { + text: get('scale.red.4'), + hoverText: '#ffffff', + hoverBg: get('scale.red.5'), + hoverBorder: get('scale.red.4'), + hoverShadow: '0 0 transparent', + hoverInsetShadow: '0 0 transparent', + hoverCounterBg: alpha('#fff', 0.2), + selectedText: '#ffffff', + selectedBg: get('scale.red.6'), + selectedBorder: alpha(get('scale.white'), 0.1), + selectedShadow: '0 0 transparent', + disabledText: alpha(get('scale.red.4'), 0.5), + disabledBg: get('scale.gray.9'), + disabledCounterBg: alpha(get('scale.red.5'), 0.05), + focusBorder: get('scale.red.4'), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.red.5'), 0.1), + icon: get('scale.red.4'), + hoverIcon: get('scale.white') + } } } diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 12a31e68d..83d15c519 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,4 +1,4 @@ -import {alpha, get, lighten, merge} from '../../src/utils' +import {alpha, darken, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' import lightGithubVars from './utils/light_github_vars' import marketingVars from './utils/marketing_vars' @@ -197,7 +197,7 @@ const vars = { menu: { bgActive: 'transparent' }, - // btn: {}, + // TODO: Move to VSCode theme? ansi: { black: get('scale.gray.9'), blackBright: get('scale.gray.6'), @@ -216,9 +216,88 @@ const vars = { magentaBright: get('scale.purple.4'), cyan: '#1b7c83', cyanBright: '#3192aa' - } + }, + // Do we need all these btn variables? + btn: { + text: get('scale.gray.9'), + bg: get('scale.gray.0'), + border: alpha(get('scale.black'), 0.15), + shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, + insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, + hoverBg: '#f3f4f6', + hoverBorder: alpha(get('scale.black'), 0.15), + activeBg: darken(get('btn.hoverBg'), 0.03), + activeBorder: alpha(get('scale.black'), 0.1), + selectedBg: darken(get('btn.hoverBg'), 0.02), + focusBg: get('scale.gray.0'), + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}`, + shadowActive: (theme: any) => `inset 0 0.15em 0.3em ${alpha(get('scale.black'), 0.15)(theme)}`, // TODO: Deprecate? Not used in Primer CSS + shadowInputFocus: (theme: any) => `0 0 0 0.2em ${alpha(get('scale.blue.5'), 0.3)(theme)}`, // TODO: Deprecate? + counterBg: alpha(get('scale.black'), 0.08), + + primary: { + text: get('scale.white'), + bg: '#2ea44f', + border: alpha(get('scale.black'), 0.15), + shadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + insetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, + hoverBg: '#2c974b', + hoverBorder: alpha(get('scale.black'), 0.15), + selectedBg: darken(get('btn.primary.hoverBg'), 0.02), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.green.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.white'), 0.8), + disabledBg: '#94d3a2', + disabledBorder: alpha(get('scale.black'), 0.1), + focusBg: '#2ea44f', + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('btn.primary.focusBg'), 0.4)(theme)}`, + icon: alpha(get('scale.white'), 0.8), + counterBg: alpha(get('scale.white'), 0.2) + }, - // ansi + outline: { + text: get('scale.blue.5'), + hoverText: get('scale.white'), + hoverBg: get('scale.blue.5'), + hoverBorder: alpha(get('scale.black'), 0.15), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), + selectedText: get('scale.white'), + selectedBg: darken(get('scale.blue.5'), 0.03), + selectedBorder: alpha(get('scale.black'), 0.15), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.blue.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.blue.5'), 0.5), + disabledBg: get('scale.gray.0'), + disabledCounterBg: alpha(get('scale.blue.5'), 0.05), + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.blue.5'), 0.1) + }, + + danger: { + text: get('scale.red.5'), + hoverText: get('scale.white'), + hoverBg: get('scale.red.6'), + hoverBorder: alpha(get('scale.black'), 0.15), + hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverCounterBg: alpha(get('scale.white'), 0.2), + selectedText: get('scale.white'), + selectedBg: darken(get('scale.red.5'), 0.03), + selectedBorder: alpha(get('scale.black'), 0.15), + selectedShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.red.9'), 0.2)(theme)}`, + disabledText: alpha(get('scale.red.5'), 0.5), + disabledBg: get('scale.gray.0'), + disabledCounterBg: alpha(get('scale.red.5'), 0.05), + focusBorder: alpha(get('scale.black'), 0.15), + focusShadow: (theme: any) => `0 0 0 3px ${alpha(get('scale.red.6'), 0.4)(theme)}`, + counterBg: alpha(get('scale.red.5'), 0.1), + icon: get('scale.red.5'), + hoverIcon: get('scale.white') + } + } } export default merge(deprecatedVars, lightGithubVars, marketingVars, vars) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/utils/deprecated_vars.ts index 66dc95daa..475339c88 100644 --- a/data/colors_v2/utils/deprecated_vars.ts +++ b/data/colors_v2/utils/deprecated_vars.ts @@ -1,4 +1,4 @@ -import {get} from '../../../src/utils' +import {alpha, get} from '../../../src/utils' // Variables to be removed in the next major release @@ -468,5 +468,11 @@ export default { bg: get('accent.emphasis'), gradientBg: unset } + }, + introShelf: { + gradientLeft: get('accent.muted'), + gradientRight: get('success.muted'), + gradientIn: get('canvas.default'), + gradientOut: alpha(get('scale.white'), 0) } } From f8f7c4fd857763339770a497695002b5adf5e930 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 15:09:10 -0500 Subject: [PATCH 35/43] Update variables --- data/colors/light.ts | 179 ++++++++++++++++++++++------------------ data/colors_v2/light.ts | 4 +- 2 files changed, 99 insertions(+), 84 deletions(-) diff --git a/data/colors/light.ts b/data/colors/light.ts index 61c8f40f3..411a674db 100644 --- a/data/colors/light.ts +++ b/data/colors/light.ts @@ -1,4 +1,19 @@ -import {alpha, get, lighten, darken} from '../../src/utils' +import {alpha, darken, desaturate, get, lighten, mix} from '../../src/utils' + +const mktg = { + blue: { + primary: '#4969ed', + secondary: '#3355e0' + }, + green: { + primary: '#2ea44f', + secondary: '#22863a' + }, + purple: { + primary: '#6f57ff', + secondary: '#614eda' + } +} export default { scale: { @@ -354,7 +369,7 @@ export default { hoverBg: get('scale.blue.5'), hoverBorder: alpha(get('scale.black'), 0.15), hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, - hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), selectedBg: darken(get('scale.blue.5'), 0.03), @@ -373,7 +388,7 @@ export default { hoverBg: get('scale.red.6'), hoverBorder: alpha(get('scale.black'), 0.15), hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, - hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), selectedBg: darken(get('scale.red.5'), 0.03), @@ -391,18 +406,18 @@ export default { }, counter: { text: get('scale.gray.9'), - bg: 'rgba(209,213,218,0.5)', + bg: alpha(get('scale.gray.3'), 0.5), primary: { text: get('scale.white'), bg: get('scale.gray.5') }, secondary: { text: get('scale.gray.5'), - bg: 'rgba(209,213,218,0.5)' + bg: alpha(get('scale.gray.3'), 0.5) } }, dropdown: { - shadow: '0 8px 24px rgba(149,157,165,0.2)' + shadow: (theme: any) => `0 8px 24px ${alpha(get('scale.gray.4'), 0.2)(theme)}` }, label: { border: get('scale.gray.2'), @@ -439,7 +454,7 @@ export default { bg: get('scale.white'), contrastBg: get('scale.gray.0'), border: get('scale.gray.2'), - shadow: 'inset 0 1px 2px rgba(27,31,35,0.075)', + shadow: (theme: any) => `inset 0 1px 2px ${alpha(get('scale.black'), 0.075)(theme)}`, disabledBg: get('scale.gray.1'), disabledBorder: get('scale.gray.2'), warningBorder: get('scale.yellow.6'), @@ -514,11 +529,11 @@ export default { targetBadgeShadow: get('scale.blue.2') }, selectMenu: { - borderSecondary: '#eaecef', - shadow: '0 0 18px rgba(27,31,35,0.4)', - backdropBg: 'rgba(27,31,35,0.5)', + borderSecondary: lighten(get('scale.gray.2'), 0.03), + shadow: (theme: any) => `0 0 18px ${alpha(get('scale.black'), 0.4)(theme)}`, + backdropBg: get('fade.black50'), backdropBorder: 'transparent', - tapHighlight: 'rgba(209,213,218,0.5)', + tapHighlight: alpha(get('scale.gray.3'), 0.5), tapFocusBg: get('scale.blue.1') }, box: { @@ -527,27 +542,27 @@ export default { rowBlueBg: get('scale.blue.0'), headerBlueBg: get('scale.blue.0'), headerBlueBorder: get('scale.blue.2'), - borderInfo: 'rgba(3,102,214,0.2)', + borderInfo: alpha(get('scale.blue.5'), 0.2), bgInfo: get('scale.blue.0'), - borderWarning: 'rgba(255,211,61,0.4)', + borderWarning: alpha(get('scale.yellow.5'), 0.4), bgWarning: get('scale.yellow.0') }, branchName: { text: get('scale.gray.6'), - icon: '#a8bbd0', - bg: '#eaf5ff', + icon: desaturate(get('scale.blue.3'), 0.7), + bg: lighten(get('scale.blue.1'), 0.03), link: { text: get('scale.blue.5'), - icon: '#a8bbd0', - bg: '#eaf5ff' + icon: desaturate(get('scale.blue.3'), 0.7), + bg: lighten(get('scale.blue.1'), 0.03) } }, markdown: { - codeBg: 'rgba(27,31,35,0.05)', - frameBorder: '#dfe2e5', - blockquoteBorder: '#dfe2e5', - tableBorder: '#dfe2e5', - tableTrBorder: '#c6cbd1' + codeBg: alpha(get('scale.black'), 0.05), + frameBorder: lighten(get('scale.gray.3'), 0.05), + blockquoteBorder: lighten(get('scale.gray.3'), 0.05), + tableBorder: lighten(get('scale.gray.3'), 0.05), + tableTrBorder: darken(get('scale.gray.3'), 0.04) }, menu: { headingText: get('scale.gray.9'), @@ -559,29 +574,29 @@ export default { borderActive: '#f9826c' }, header: { - text: 'rgba(255,255,255,0.7)', + text: get('fade.white70'), bg: get('scale.gray.9'), logo: get('scale.white') }, filterItem: { - barBg: '#eff3f6' + barBg: darken(get('scale.gray.1'), 0.02) }, hiddenTextExpander: { - bg: '#dfe2e5', - bgHover: '#c6cbd1' + bg: lighten(get('scale.gray.3'), 0.05), + bgHover: darken(get('scale.gray.3'), 0.04) }, dragAndDrop: { - border: '#c3c8cf' + border: darken(get('scale.gray.3'), 0.05) }, uploadEnabled: { - border: '#dfe2e5', - borderFocused: '#4a9eff' + border: lighten(get('scale.gray.3'), 0.05), + borderFocused: lighten(get('scale.blue.4'), 0.08) }, previewableCommentForm: { - border: '#c3c8cf' + border: darken(get('scale.gray.3'), 0.05) }, underlinenav: { - border: 'rgba(209,213,218,0)', + border: alpha(get('scale.gray.3'), 0), borderHover: get('scale.gray.3'), borderActive: '#f9826c', text: get('scale.gray.9'), @@ -621,66 +636,66 @@ export default { additionBorder: get('scale.green.5') }, mktg: { - success: '#2ebc4f', - info: '#1074e7', + success: mix(get('scale.green.5'), get('scale.green.4')), + info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42), bgShadeGradient: { - top: 'rgba(27,31,35,0.065)', - bottom: 'rgba(27,31,35,0)' + top: alpha(get('scale.black'), 0.065), + bottom: alpha(get('scale.black'), 0) }, btn: { bg: { - top: '#607cef', - bottom: '#4969ed' + top: lighten(mktg.blue.primary, 0.05), + bottom: mktg.blue.primary }, bgOverlay: { - top: '#4967e3', - bottom: '#3355e0' + top: lighten(mktg.blue.secondary, 0.05), + bottom: mktg.blue.secondary }, text: get('scale.white'), primary: { bg: { - top: '#34b859', - bottom: '#2ea44f' + top: lighten(mktg.green.primary, 0.05), + bottom: mktg.green.primary }, bgOverlay: { - top: '#279a43', - bottom: get('scale.green.6') + top: lighten(mktg.green.secondary, 0.05), + bottom: mktg.green.secondary }, text: get('scale.white') }, enterprise: { bg: { - top: '#8571ff', - bottom: '#6f57ff' + top: lighten(mktg.purple.primary, 0.05), + bottom: mktg.purple.primary }, bgOverlay: { - top: '#7463de', - bottom: '#614eda' + top: lighten(mktg.purple.secondary, 0.05), + bottom: mktg.purple.secondary }, text: get('scale.white') }, outline: { - text: '#4969ed', - border: 'rgba(73,105,237,0.3)', + text: mktg.blue.primary, + border: alpha(mktg.blue.primary, 0.3), hover: { - text: '#3355e0', - border: 'rgba(73,105,237,0.5)' + text: mktg.blue.secondary, + border: alpha(mktg.blue.secondary, 0.5) }, focus: { - border: '#4969ed', - borderInset: 'rgba(73,105,237,0.5)' + border: mktg.blue.primary, + borderInset: alpha(mktg.blue.primary, 0.5) } }, dark: { text: get('scale.white'), - border: 'rgba(255,255,255,0.3)', + border: alpha(get('scale.white'), 0.3), hover: { text: get('scale.white'), - border: 'rgba(255,255,255,0.5)' + border: alpha(get('scale.white'), 0.5) }, focus: { border: get('scale.white'), - borderInset: 'rgba(255,255,255,0.5)' + borderInset: alpha(get('scale.white'), 0.5) } } } @@ -689,10 +704,10 @@ export default { hlAuthorBg: get('scale.blue.0'), hlAuthorBorder: get('scale.blue.2'), logoSubdued: get('scale.gray.3'), - discussionBorder: '#a2cbac', + discussionBorder: desaturate(get('scale.green.3'), 0.4), discussionBgSuccess: get('scale.green.5'), - actionsWorkflowTableStickyBg: 'rgba(255,255,255,0.95)', - repoLanguageColorBorder: 'rgba(27,31,35,0.1)', + actionsWorkflowTableStickyBg: alpha(get('scale.white'), 0.95), + repoLanguageColorBorder: alpha(get('scale.black'), 0.1), codeSelectionBg: get('scale.blue.2'), highlight: { text: '#442c12', @@ -720,29 +735,29 @@ export default { } }, diffBlob: { - numText: 'rgba(27,31,35,0.3)', - numHoverText: 'rgba(27,31,35,0.6)', + numText: get('fade.black30'), + numHoverText: alpha(get('scale.black'), 0.6), addition: { - numText: 'rgba(27,31,35,0.3)', - numHoverText: 'rgba(27,31,35,0.6)', - numBg: '#cdffd8', - lineBg: '#e6ffed', - wordBg: '#acf2bd' + numText: get('fade.black30'), + numHoverText: alpha(get('scale.black'), 0.6), + numBg: darken(get('scale.green.1'), 0.03), + lineBg: darken(get('scale.green.0'), 0.02), + wordBg: darken(get('scale.green.2'), 0.04) }, deletion: { - numText: 'rgba(27,31,35,0.3)', - numHoverText: 'rgba(27,31,35,0.6)', + numText: get('fade.black30'), + numHoverText: alpha(get('scale.black'), 0.6), numBg: get('scale.red.1'), lineBg: get('scale.red.0'), - wordBg: '#fdb8c0' + wordBg: lighten(get('scale.red.2'), 0.02) }, hunk: { - text: 'rgba(27,31,35,0.7)', + text: get('fade.black70'), numBg: get('scale.blue.1'), lineBg: get('scale.blue.0') }, emptyBlockBg: get('scale.gray.0'), - selectedLineHighlightBg: 'rgba(255,223,93,0.2)', + selectedLineHighlightBg: alpha(get('scale.yellow.4'), 0.2), selectedLineHighlightBorder: get('scale.yellow.5'), selectedLineHighlightMixBlendMode: 'multiply', expander: { @@ -753,7 +768,7 @@ export default { commentButton: { icon: get('scale.white'), bg: get('scale.blue.5'), - gradientBg: '#0372ef' + gradientBg: lighten(get('scale.blue.5'), 0.05) } }, globalNav: { @@ -807,8 +822,8 @@ export default { topicTag: { text: get('scale.blue.5'), bg: get('scale.blue.0'), - hoverBg: '#ddeeff', - activeBg: '#e7f3ff' + hoverBg: darken(get('scale.blue.0'), 0.04), + activeBg: darken(get('scale.blue.0'), 0.02) }, mergeBox: { successIconBg: get('scale.green.5'), @@ -841,7 +856,7 @@ export default { headerBg: get('scale.gray.9'), sidebarBg: get('scale.white'), gradientIn: get('scale.white'), - gradientOut: 'rgba(255,255,255,0)' + gradientOut: alpha(get('scale.white'), 0) }, checks: { bg: get('scale.gray.9'), @@ -871,28 +886,28 @@ export default { headerBorder: get('scale.gray.8'), headerIcon: get('scale.gray.4'), lineText: get('scale.gray.2'), - lineNumText: 'rgba(149,157,165,0.75)', + lineNumText: alpha(get('scale.gray.4'), 0.75), lineTimestampText: get('scale.gray.4'), lineHoverBg: get('scale.gray.8'), - lineSelectedBg: 'rgba(33,136,255,0.15)', + lineSelectedBg: alpha(get('scale.blue.4'), 0.15), lineSelectedNumText: get('scale.blue.3'), lineDtFmText: get('scale.gray.9'), lineDtFmBg: get('scale.yellow.5'), - gateBg: 'rgba(249,197,19,0.15)', + gateBg: alpha(get('scale.yellow.6'), 0.15), gateText: get('scale.gray.2'), gateWaitingText: get('scale.gray.3'), stepHeaderOpenBg: get('scale.gray.8'), stepErrorText: get('scale.red.3'), stepWarningText: get('scale.yellow.3'), loglineText: get('scale.gray.4'), - loglineNumText: 'rgba(149,157,165,0.75)', + loglineNumText: alpha(get('scale.gray.4'), 0.75), loglineDebugText: get('scale.purple.3'), loglineErrorText: get('scale.gray.2'), loglineErrorNumText: get('scale.red.3'), - loglineErrorBg: 'rgba(203,36,49,0.15)', + loglineErrorBg: alpha(get('scale.red.6'), 0.15), loglineWarningText: get('scale.gray.2'), loglineWarningNumText: get('scale.yellow.3'), - loglineWarningBg: 'rgba(249,197,19,0.15)', + loglineWarningBg: alpha(get('scale.yellow.6'), 0.15), loglineCommandText: get('scale.blue.3'), loglineSectionText: get('scale.green.3'), ansi: { @@ -919,7 +934,7 @@ export default { gradientLeft: get('scale.blue.0'), gradientRight: get('scale.green.1'), gradientIn: get('scale.white'), - gradientOut: 'rgba(255,255,255,0)' + gradientOut: alpha(get('scale.white'), 0) }, marketingIcon: { primary: get('scale.blue.4'), diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 83d15c519..64dbb4cfd 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -262,7 +262,7 @@ const vars = { hoverBg: get('scale.blue.5'), hoverBorder: alpha(get('scale.black'), 0.15), hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, - hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), selectedBg: darken(get('scale.blue.5'), 0.03), @@ -282,7 +282,7 @@ const vars = { hoverBg: get('scale.red.6'), hoverBorder: alpha(get('scale.black'), 0.15), hoverShadow: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.1)(theme)}`, - hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.3)(theme)}`, + hoverInsetShadow: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.03)(theme)}`, hoverCounterBg: alpha(get('scale.white'), 0.2), selectedText: get('scale.white'), selectedBg: darken(get('scale.red.5'), 0.03), From 41d77cd9e5271e5e1f77c122c4e4ec44e2f2ed60 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 15:45:10 -0700 Subject: [PATCH 36/43] Update marketing variables --- data/colors_v2/dark.ts | 6 +- data/colors_v2/light.ts | 6 +- ...rketing_vars.ts => dark_marketing_vars.ts} | 0 ...rk_github_vars.ts => dark_product_vars.ts} | 0 data/colors_v2/utils/light_marketing_vars.ts | 85 +++++++++++++++++++ ...t_github_vars.ts => light_product_vars.ts} | 0 6 files changed, 91 insertions(+), 6 deletions(-) rename data/colors_v2/utils/{marketing_vars.ts => dark_marketing_vars.ts} (100%) rename data/colors_v2/utils/{dark_github_vars.ts => dark_product_vars.ts} (100%) create mode 100644 data/colors_v2/utils/light_marketing_vars.ts rename data/colors_v2/utils/{light_github_vars.ts => light_product_vars.ts} (100%) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/dark.ts index d3a750eb1..b84e2b222 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/dark.ts @@ -1,7 +1,7 @@ import {alpha, get, merge, darken} from '../../src/utils' -import darkGithubVars from './utils/dark_github_vars' +import darkProductVars from './utils/dark_product_vars' +import darkMarketingVars from './utils/dark_marketing_vars' import deprecatedVars from './utils/deprecated_vars' -import marketingVars from './utils/marketing_vars' const vars = { // Scales @@ -299,4 +299,4 @@ const vars = { } } -export default merge(deprecatedVars, darkGithubVars, marketingVars, vars) +export default merge(deprecatedVars, darkProductVars, darkMarketingVars, vars) diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 64dbb4cfd..63be1848d 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,7 +1,7 @@ import {alpha, darken, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' -import lightGithubVars from './utils/light_github_vars' -import marketingVars from './utils/marketing_vars' +import lightGithubVars from './utils/light_product_vars' +import lightMarketingVars from './utils/light_marketing_vars' const vars = { scale: { @@ -300,4 +300,4 @@ const vars = { } } -export default merge(deprecatedVars, lightGithubVars, marketingVars, vars) +export default merge(deprecatedVars, lightGithubVars, lightMarketingVars, vars) diff --git a/data/colors_v2/utils/marketing_vars.ts b/data/colors_v2/utils/dark_marketing_vars.ts similarity index 100% rename from data/colors_v2/utils/marketing_vars.ts rename to data/colors_v2/utils/dark_marketing_vars.ts diff --git a/data/colors_v2/utils/dark_github_vars.ts b/data/colors_v2/utils/dark_product_vars.ts similarity index 100% rename from data/colors_v2/utils/dark_github_vars.ts rename to data/colors_v2/utils/dark_product_vars.ts diff --git a/data/colors_v2/utils/light_marketing_vars.ts b/data/colors_v2/utils/light_marketing_vars.ts new file mode 100644 index 000000000..8cb22973f --- /dev/null +++ b/data/colors_v2/utils/light_marketing_vars.ts @@ -0,0 +1,85 @@ +import {alpha, get, lighten, mix} from '../../../src/utils' + +const mktg = { + blue: { + primary: '#4969ed', + secondary: '#3355e0' + }, + green: { + primary: '#2ea44f', + secondary: '#22863a' + }, + purple: { + primary: '#6f57ff', + secondary: '#614eda' + } +} + +// TODO: Migrate once new marketing colors (lemon, lime, indigo) are added +export default { + mktg: { + success: mix(get('scale.green.5'), get('scale.green.4')), + info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42), + bgShadeGradient: { + top: alpha(get('scale.black'), 0.065), + bottom: alpha(get('scale.black'), 0) + }, + btn: { + bg: { + top: lighten(mktg.blue.primary, 0.05), + bottom: mktg.blue.primary + }, + bgOverlay: { + top: lighten(mktg.blue.secondary, 0.05), + bottom: mktg.blue.secondary + }, + text: get('scale.white'), + primary: { + bg: { + top: lighten(mktg.green.primary, 0.05), + bottom: mktg.green.primary + }, + bgOverlay: { + top: lighten(mktg.green.secondary, 0.05), + bottom: mktg.green.secondary + }, + text: get('scale.white') + }, + enterprise: { + bg: { + top: lighten(mktg.purple.primary, 0.05), + bottom: mktg.purple.primary + }, + bgOverlay: { + top: lighten(mktg.purple.secondary, 0.05), + bottom: mktg.purple.secondary + }, + text: get('scale.white') + }, + outline: { + text: mktg.blue.primary, + border: alpha(mktg.blue.primary, 0.3), + hover: { + text: mktg.blue.secondary, + border: alpha(mktg.blue.secondary, 0.5) + }, + focus: { + border: mktg.blue.primary, + borderInset: alpha(mktg.blue.primary, 0.5) + } + }, + dark: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.3), + hover: { + text: get('scale.white'), + border: alpha(get('scale.white'), 0.5) + }, + focus: { + border: get('scale.white'), + borderInset: alpha(get('scale.white'), 0.5) + } + } + } + } +} diff --git a/data/colors_v2/utils/light_github_vars.ts b/data/colors_v2/utils/light_product_vars.ts similarity index 100% rename from data/colors_v2/utils/light_github_vars.ts rename to data/colors_v2/utils/light_product_vars.ts From 9283d9782e3855946781933eee92979b2da12679 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 15:55:42 -0700 Subject: [PATCH 37/43] Update var naming --- data/colors_v2/light.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index 63be1848d..d0022ca36 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -1,6 +1,6 @@ import {alpha, darken, get, lighten, merge} from '../../src/utils' import deprecatedVars from './utils/deprecated_vars' -import lightGithubVars from './utils/light_product_vars' +import lightProductVars from './utils/light_product_vars' import lightMarketingVars from './utils/light_marketing_vars' const vars = { @@ -300,4 +300,4 @@ const vars = { } } -export default merge(deprecatedVars, lightGithubVars, lightMarketingVars, vars) +export default merge(deprecatedVars, lightProductVars, lightMarketingVars, vars) From dd3b5552bc9889e0c460924a412d5f4875581e38 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 16:00:31 -0700 Subject: [PATCH 38/43] Update color scales --- data/colors_v2/dark_high_contrast.ts | 126 +++++++++++++-------------- data/colors_v2/light.ts | 124 +++++++++++++------------- 2 files changed, 125 insertions(+), 125 deletions(-) diff --git a/data/colors_v2/dark_high_contrast.ts b/data/colors_v2/dark_high_contrast.ts index 74ae38094..47e345fcd 100644 --- a/data/colors_v2/dark_high_contrast.ts +++ b/data/colors_v2/dark_high_contrast.ts @@ -5,81 +5,81 @@ const vars = { // Scales scale: { black: '#010409', - white: '#f0f6fc', + white: '#ffffff', gray: [ - '#f0f6fc', - '#c9d1d9', - '#b1bac4', - '#8b949e', - '#6e7681', - '#484f58', - '#30363d', - '#21262d', - '#161b22', - '#0d1117' + '#ffffff', + '#f1f3f6', + '#d7dbdf', + '#b9bfc6', + '#98a1ad', + '#79828e', + '#5b616b', + '#272b33', + '#272b33', + '#090c11' ], blue: [ - '#cae8ff', - '#a5d6ff', - '#79c0ff', - '#58a6ff', - '#388bfd', - '#1f6feb', - '#1158c7', - '#0d419d', - '#0c2d6b', - '#051d4d' + '#cce9ff', + '#aedcff', + '#8eccff', + '#6cb8ff', + '#589df3', + '#1f56aa', + '#0d4091', + '#0c306d', + '#072357', + '#041844' ], green: [ - '#aff5b4', - '#7ee787', - '#56d364', - '#3fb950', - '#2ea043', - '#238636', - '#196c2e', - '#0f5323', - '#033a16', - '#04260f' + '#bcf3bc', + '#88ec90', + '#63de70', + '#4bc95e', + '#35b14d', + '#1d672e', + '#134f23', + '#083c17', + '#022d0f', + '#03200c' ], yellow: [ - '#f8e3a1', - '#f2cc60', - '#e3b341', - '#d29922', - '#bb8009', - '#9e6a03', - '#845306', - '#693e00', - '#4b2900', - '#341a00' + '#f8e4aa', + '#f9d265', + '#ebbf50', + '#daaa3d', + '#c8922b', + '#814d00', + '#613700', + '#4e2b00', + '#3c1f00', + '#2c1600' ], orange: [ - '#ffdfb6', - '#ffc680', - '#ffa657', - '#f0883e', - '#db6d28', - '#bd561d', - '#9b4215', - '#762d0a', - '#5a1e02', - '#3d1300' + '#ffe0bc', + '#ffcd9a', + '#ffb675', + '#f89c57', + '#e78037', + '#934010', + '#772d08', + '#5a2208', + '#481600', + '#350f00' ], - red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], + red: ['#ffded9', '#ffcac4', '#ffb2ab', '#ff958e', '#ff6c66', '#aa2324', '#851819', '#690c0f', '#500a0d', '#400105'], purple: [ - '#eddeff', - '#e2c5ff', - '#d2a8ff', - '#bc8cff', - '#a371f7', - '#8957e5', - '#6e40c9', - '#553098', - '#3c1e70', - '#271052' + '#efdfff', + '#e5ccff', + '#d9b7ff', + '#ca9fff', + '#b384f9', + '#673fbb', + '#512d94', + '#3e2171', + '#30145d', + '#240e44' ], - pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] + pink: ['#ffdbeb', '#ffc6e1', '#ffadd5', '#ee97c5', '#dd7cae', '#933869', '#752652', '#5c183f', '#4b0b31', '#390524'] } } diff --git a/data/colors_v2/light.ts b/data/colors_v2/light.ts index d0022ca36..84ff341a9 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/light.ts @@ -5,82 +5,82 @@ import lightMarketingVars from './utils/light_marketing_vars' const vars = { scale: { - black: '#1b1f23', + black: '#1b1f24', white: '#ffffff', gray: [ '#fafbfc', - '#f6f8fa', - '#e1e4e8', - '#d1d5da', - '#959da5', - '#6a737d', - '#586069', - '#444d56', - '#2f363d', - '#24292e' + '#eaeef2', + '#d4dae0', + '#b7bfc7', + '#949da7', + '#707a84', + '#57606a', + '#424a53', + '#32383f', + '#24292f' ], blue: [ - '#f1f8ff', - '#dbedff', - '#c8e1ff', - '#79b8ff', - '#2188ff', - '#0366d6', - '#005cc5', - '#044289', - '#032f62', - '#05264c' + '#ddf4ff', + '#b6e3ff', + '#80ccff', + '#54aeff', + '#218bff', + '#0969da', + '#0550ae', + '#033d8b', + '#0a3069', + '#002155' ], green: [ - '#f0fff4', - '#dcffe4', - '#bef5cb', - '#85e89d', - '#34d058', - '#28a745', - '#22863a', - '#176f2c', - '#165c26', - '#144620' + '#dafbe1', + '#aceebb', + '#6fdd8b', + '#4ac26b', + '#2da44e', + '#1a7f37', + '#116329', + '#044f1e', + '#003d16', + '#002d11' ], yellow: [ - '#fffdef', - '#fffbdd', - '#fff5b1', - '#ffea7f', - '#ffdf5d', - '#ffd33d', - '#f9c513', - '#dbab09', - '#b08800', - '#735c0f' + '#fff8c5', + '#fae17d', + '#eac54f', + '#d4a72c', + '#bf8700', + '#9a6700', + '#7d4e00', + '#633c01', + '#4d2d00', + '#3b2300' ], orange: [ - '#fff8f2', - '#ffebda', - '#ffd1ac', - '#ffab70', - '#fb8532', - '#f66a0a', - '#e36209', - '#d15704', - '#c24e00', - '#a04100' + '#fff1e5', + '#ffd8b5', + '#ffb77c', + '#fb8f44', + '#e16f24', + '#bc4c00', + '#953800', + '#762c00', + '#5c2200', + '#471700' ], - red: ['#ffeef0', '#ffdce0', '#fdaeb7', '#f97583', '#ea4a5a', '#d73a49', '#cb2431', '#b31d28', '#9e1c23', '#86181d'], + red: ['#ffe7e5', '#ffcecb', '#ffaba8', '#ff8182', '#fa4549', '#cf222e', '#a40e26', '#82071e', '#660018', '#4c0014'], purple: [ - '#f5f0ff', - '#e6dcfd', - '#d1bcf9', - '#b392f0', - '#8a63d2', - '#6f42c1', - '#5a32a3', - '#4c2889', - '#3a1d6e', - '#29134e' + '#fbefff', + '#ecd8ff', + '#d8b9ff', + '#c297ff', + '#a475f9', + '#8250df', + '#6639ba', + '#512a97', + '#3e1f79', + '#2e1461' ], - pink: ['#ffeef8', '#fedbf0', '#f9b3dd', '#f692ce', '#ec6cb9', '#ea4aaa', '#d03592', '#b93a86', '#99306f', '#6d224f'] + pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'] }, // Foundations From ec66b320010899ce1144811cadad39105593efe3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 25 May 2021 16:19:25 -0700 Subject: [PATCH 39/43] Create perfect-singers-stare.md --- .changeset/perfect-singers-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-singers-stare.md diff --git a/.changeset/perfect-singers-stare.md b/.changeset/perfect-singers-stare.md new file mode 100644 index 000000000..8aaab6acf --- /dev/null +++ b/.changeset/perfect-singers-stare.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Internal reorganization of variables. No consumer-facing changes. From b7f94e8cf9c6cf1a94318af9feaf40cb14ac5a4a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 26 May 2021 10:51:49 -0700 Subject: [PATCH 40/43] Reorganize file structure --- data/colors_v2/dark_dimmed.ts | 86 --------- data/colors_v2/dark_high_contrast.ts | 86 --------- data/colors_v2/index.ts | 8 +- data/colors_v2/themes/dark.ts | 52 +++++ data/colors_v2/themes/dark_dimmed.ts | 50 +++++ data/colors_v2/themes/dark_high_contrast.ts | 50 +++++ data/colors_v2/themes/light.ts | 52 +++++ .../{dark.ts => vars/component_dark.ts} | 180 +----------------- .../{light.ts => vars/component_light.ts} | 179 +---------------- .../deprecated_vars.ts => vars/deprecated.ts} | 0 data/colors_v2/vars/global_dark.ts | 92 +++++++++ data/colors_v2/vars/global_light.ts | 92 +++++++++ .../marketing_dark.ts} | 0 .../marketing_light.ts} | 0 .../product_dark.ts} | 0 .../product_light.ts} | 0 16 files changed, 396 insertions(+), 531 deletions(-) delete mode 100644 data/colors_v2/dark_dimmed.ts delete mode 100644 data/colors_v2/dark_high_contrast.ts create mode 100644 data/colors_v2/themes/dark.ts create mode 100644 data/colors_v2/themes/dark_dimmed.ts create mode 100644 data/colors_v2/themes/dark_high_contrast.ts create mode 100644 data/colors_v2/themes/light.ts rename data/colors_v2/{dark.ts => vars/component_dark.ts} (50%) rename data/colors_v2/{light.ts => vars/component_light.ts} (54%) rename data/colors_v2/{utils/deprecated_vars.ts => vars/deprecated.ts} (100%) create mode 100644 data/colors_v2/vars/global_dark.ts create mode 100644 data/colors_v2/vars/global_light.ts rename data/colors_v2/{utils/dark_marketing_vars.ts => vars/marketing_dark.ts} (100%) rename data/colors_v2/{utils/light_marketing_vars.ts => vars/marketing_light.ts} (100%) rename data/colors_v2/{utils/dark_product_vars.ts => vars/product_dark.ts} (100%) rename data/colors_v2/{utils/light_product_vars.ts => vars/product_light.ts} (100%) diff --git a/data/colors_v2/dark_dimmed.ts b/data/colors_v2/dark_dimmed.ts deleted file mode 100644 index 3ea6474c5..000000000 --- a/data/colors_v2/dark_dimmed.ts +++ /dev/null @@ -1,86 +0,0 @@ -import {merge} from '../../src/utils' -import dark from './dark' - -const vars = { - // Scales - scale: { - black: '#1c2128', - white: '#cdd9e5', - gray: [ - '#cdd9e5', - '#adbac7', - '#909dab', - '#768390', - '#636e7b', - '#545d68', - '#444c56', - '#373e47', - '#2d333b', - '#22272e' - ], - blue: [ - '#c6e6ff', - '#96d0ff', - '#6cb6ff', - '#539bf5', - '#4184e4', - '#316dca', - '#255ab2', - '#1b4b91', - '#143d79', - '#0f2d5c' - ], - green: [ - '#b4f1b4', - '#8ddb8c', - '#6bc46d', - '#57ab5a', - '#46954a', - '#347d39', - '#2b6a30', - '#245829', - '#1b4721', - '#113417' - ], - yellow: [ - '#fbe090', - '#eac55f', - '#daaa3f', - '#c69026', - '#ae7c14', - '#966600', - '#805400', - '#6c4400', - '#593600', - '#452700' - ], - orange: [ - '#ffddb0', - '#ffbc6f', - '#f69d50', - '#e0823d', - '#cc6b2c', - '#ae5622', - '#94471b', - '#7f3913', - '#682d0f', - '#4d210c' - ], - red: ['#ffd8d3', '#ffb8b0', '#ff938a', '#f47067', '#e5534b', '#c93c37', '#ad2e2c', '#922323', '#78191b', '#78191b'], - purple: [ - '#eedcff', - '#dcbdfb', - '#dcbdfb', - '#b083f0', - '#986ee2', - '#8256d0', - '#6b44bc', - '#5936a2', - '#472c82', - '#352160' - ], - pink: ['#ffd7eb', '#ffb3d8', '#fc8dc7', '#e275ad', '#c96198', '#ae4c82', '#983b6e', '#7e325a', '#69264a', '#551639'] - } -} - -export default merge(dark, vars) diff --git a/data/colors_v2/dark_high_contrast.ts b/data/colors_v2/dark_high_contrast.ts deleted file mode 100644 index 47e345fcd..000000000 --- a/data/colors_v2/dark_high_contrast.ts +++ /dev/null @@ -1,86 +0,0 @@ -import {merge} from '../../src/utils' -import dark from './dark' - -const vars = { - // Scales - scale: { - black: '#010409', - white: '#ffffff', - gray: [ - '#ffffff', - '#f1f3f6', - '#d7dbdf', - '#b9bfc6', - '#98a1ad', - '#79828e', - '#5b616b', - '#272b33', - '#272b33', - '#090c11' - ], - blue: [ - '#cce9ff', - '#aedcff', - '#8eccff', - '#6cb8ff', - '#589df3', - '#1f56aa', - '#0d4091', - '#0c306d', - '#072357', - '#041844' - ], - green: [ - '#bcf3bc', - '#88ec90', - '#63de70', - '#4bc95e', - '#35b14d', - '#1d672e', - '#134f23', - '#083c17', - '#022d0f', - '#03200c' - ], - yellow: [ - '#f8e4aa', - '#f9d265', - '#ebbf50', - '#daaa3d', - '#c8922b', - '#814d00', - '#613700', - '#4e2b00', - '#3c1f00', - '#2c1600' - ], - orange: [ - '#ffe0bc', - '#ffcd9a', - '#ffb675', - '#f89c57', - '#e78037', - '#934010', - '#772d08', - '#5a2208', - '#481600', - '#350f00' - ], - red: ['#ffded9', '#ffcac4', '#ffb2ab', '#ff958e', '#ff6c66', '#aa2324', '#851819', '#690c0f', '#500a0d', '#400105'], - purple: [ - '#efdfff', - '#e5ccff', - '#d9b7ff', - '#ca9fff', - '#b384f9', - '#673fbb', - '#512d94', - '#3e2171', - '#30145d', - '#240e44' - ], - pink: ['#ffdbeb', '#ffc6e1', '#ffadd5', '#ee97c5', '#dd7cae', '#933869', '#752652', '#5c183f', '#4b0b31', '#390524'] - } -} - -export default merge(dark, vars) diff --git a/data/colors_v2/index.ts b/data/colors_v2/index.ts index 00acda541..f19425b7a 100644 --- a/data/colors_v2/index.ts +++ b/data/colors_v2/index.ts @@ -1,7 +1,7 @@ -import light from './light' -import dark from './dark' -import dark_dimmed from './dark_dimmed' -import dark_high_contrast from './dark_high_contrast' +import light from './themes/light' +import dark from './themes/dark' +import dark_dimmed from './themes/dark_dimmed' +import dark_high_contrast from './themes/dark_high_contrast' export default { light, diff --git a/data/colors_v2/themes/dark.ts b/data/colors_v2/themes/dark.ts new file mode 100644 index 000000000..8f1d0626c --- /dev/null +++ b/data/colors_v2/themes/dark.ts @@ -0,0 +1,52 @@ +import {merge} from '../../../src/utils' +import deprecatedVars from '../vars/deprecated' +import darkMarketingVars from '../vars/marketing_dark' +import darkProductVars from '../vars/product_dark' + +const scale = { + black: '#010409', + white: '#f0f6fc', + gray: ['#f0f6fc', '#c9d1d9', '#b1bac4', '#8b949e', '#6e7681', '#484f58', '#30363d', '#21262d', '#161b22', '#0d1117'], + blue: ['#cae8ff', '#a5d6ff', '#79c0ff', '#58a6ff', '#388bfd', '#1f6feb', '#1158c7', '#0d419d', '#0c2d6b', '#051d4d'], + green: ['#aff5b4', '#7ee787', '#56d364', '#3fb950', '#2ea043', '#238636', '#196c2e', '#0f5323', '#033a16', '#04260f'], + yellow: [ + '#f8e3a1', + '#f2cc60', + '#e3b341', + '#d29922', + '#bb8009', + '#9e6a03', + '#845306', + '#693e00', + '#4b2900', + '#341a00' + ], + orange: [ + '#ffdfb6', + '#ffc680', + '#ffa657', + '#f0883e', + '#db6d28', + '#bd561d', + '#9b4215', + '#762d0a', + '#5a1e02', + '#3d1300' + ], + red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], + purple: [ + '#eddeff', + '#e2c5ff', + '#d2a8ff', + '#bc8cff', + '#a371f7', + '#8957e5', + '#6e40c9', + '#553098', + '#3c1e70', + '#271052' + ], + pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] +} + +export default merge(deprecatedVars, darkProductVars, darkMarketingVars, {scale}) diff --git a/data/colors_v2/themes/dark_dimmed.ts b/data/colors_v2/themes/dark_dimmed.ts new file mode 100644 index 000000000..c9ee99034 --- /dev/null +++ b/data/colors_v2/themes/dark_dimmed.ts @@ -0,0 +1,50 @@ +import {merge} from '../../../src/utils' +import dark from './dark' + +const scale = { + black: '#1c2128', + white: '#cdd9e5', + gray: ['#cdd9e5', '#adbac7', '#909dab', '#768390', '#636e7b', '#545d68', '#444c56', '#373e47', '#2d333b', '#22272e'], + blue: ['#c6e6ff', '#96d0ff', '#6cb6ff', '#539bf5', '#4184e4', '#316dca', '#255ab2', '#1b4b91', '#143d79', '#0f2d5c'], + green: ['#b4f1b4', '#8ddb8c', '#6bc46d', '#57ab5a', '#46954a', '#347d39', '#2b6a30', '#245829', '#1b4721', '#113417'], + yellow: [ + '#fbe090', + '#eac55f', + '#daaa3f', + '#c69026', + '#ae7c14', + '#966600', + '#805400', + '#6c4400', + '#593600', + '#452700' + ], + orange: [ + '#ffddb0', + '#ffbc6f', + '#f69d50', + '#e0823d', + '#cc6b2c', + '#ae5622', + '#94471b', + '#7f3913', + '#682d0f', + '#4d210c' + ], + red: ['#ffd8d3', '#ffb8b0', '#ff938a', '#f47067', '#e5534b', '#c93c37', '#ad2e2c', '#922323', '#78191b', '#78191b'], + purple: [ + '#eedcff', + '#dcbdfb', + '#dcbdfb', + '#b083f0', + '#986ee2', + '#8256d0', + '#6b44bc', + '#5936a2', + '#472c82', + '#352160' + ], + pink: ['#ffd7eb', '#ffb3d8', '#fc8dc7', '#e275ad', '#c96198', '#ae4c82', '#983b6e', '#7e325a', '#69264a', '#551639'] +} + +export default merge(dark, {scale}) diff --git a/data/colors_v2/themes/dark_high_contrast.ts b/data/colors_v2/themes/dark_high_contrast.ts new file mode 100644 index 000000000..4d9682467 --- /dev/null +++ b/data/colors_v2/themes/dark_high_contrast.ts @@ -0,0 +1,50 @@ +import {merge} from '../../../src/utils' +import dark from './dark' + +const scale = { + black: '#010409', + white: '#ffffff', + gray: ['#ffffff', '#f1f3f6', '#d7dbdf', '#b9bfc6', '#98a1ad', '#79828e', '#5b616b', '#272b33', '#272b33', '#090c11'], + blue: ['#cce9ff', '#aedcff', '#8eccff', '#6cb8ff', '#589df3', '#1f56aa', '#0d4091', '#0c306d', '#072357', '#041844'], + green: ['#bcf3bc', '#88ec90', '#63de70', '#4bc95e', '#35b14d', '#1d672e', '#134f23', '#083c17', '#022d0f', '#03200c'], + yellow: [ + '#f8e4aa', + '#f9d265', + '#ebbf50', + '#daaa3d', + '#c8922b', + '#814d00', + '#613700', + '#4e2b00', + '#3c1f00', + '#2c1600' + ], + orange: [ + '#ffe0bc', + '#ffcd9a', + '#ffb675', + '#f89c57', + '#e78037', + '#934010', + '#772d08', + '#5a2208', + '#481600', + '#350f00' + ], + red: ['#ffded9', '#ffcac4', '#ffb2ab', '#ff958e', '#ff6c66', '#aa2324', '#851819', '#690c0f', '#500a0d', '#400105'], + purple: [ + '#efdfff', + '#e5ccff', + '#d9b7ff', + '#ca9fff', + '#b384f9', + '#673fbb', + '#512d94', + '#3e2171', + '#30145d', + '#240e44' + ], + pink: ['#ffdbeb', '#ffc6e1', '#ffadd5', '#ee97c5', '#dd7cae', '#933869', '#752652', '#5c183f', '#4b0b31', '#390524'] +} + +export default merge(dark, {scale}) diff --git a/data/colors_v2/themes/light.ts b/data/colors_v2/themes/light.ts new file mode 100644 index 000000000..b4e9ed2ff --- /dev/null +++ b/data/colors_v2/themes/light.ts @@ -0,0 +1,52 @@ +import {merge} from '../../../src/utils' +import deprecatedVars from '../vars/deprecated' +import lightMarketingVars from '../vars/marketing_light' +import lightProductVars from '../vars/product_light' + +const scale = { + black: '#1b1f24', + white: '#ffffff', + gray: ['#fafbfc', '#eaeef2', '#d4dae0', '#b7bfc7', '#949da7', '#707a84', '#57606a', '#424a53', '#32383f', '#24292f'], + blue: ['#ddf4ff', '#b6e3ff', '#80ccff', '#54aeff', '#218bff', '#0969da', '#0550ae', '#033d8b', '#0a3069', '#002155'], + green: ['#dafbe1', '#aceebb', '#6fdd8b', '#4ac26b', '#2da44e', '#1a7f37', '#116329', '#044f1e', '#003d16', '#002d11'], + yellow: [ + '#fff8c5', + '#fae17d', + '#eac54f', + '#d4a72c', + '#bf8700', + '#9a6700', + '#7d4e00', + '#633c01', + '#4d2d00', + '#3b2300' + ], + orange: [ + '#fff1e5', + '#ffd8b5', + '#ffb77c', + '#fb8f44', + '#e16f24', + '#bc4c00', + '#953800', + '#762c00', + '#5c2200', + '#471700' + ], + red: ['#ffe7e5', '#ffcecb', '#ffaba8', '#ff8182', '#fa4549', '#cf222e', '#a40e26', '#82071e', '#660018', '#4c0014'], + purple: [ + '#fbefff', + '#ecd8ff', + '#d8b9ff', + '#c297ff', + '#a475f9', + '#8250df', + '#6639ba', + '#512a97', + '#3e1f79', + '#2e1461' + ], + pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'] +} + +export default merge(deprecatedVars, lightProductVars, lightMarketingVars, {scale}) diff --git a/data/colors_v2/dark.ts b/data/colors_v2/vars/component_dark.ts similarity index 50% rename from data/colors_v2/dark.ts rename to data/colors_v2/vars/component_dark.ts index b84e2b222..a4f0cede1 100644 --- a/data/colors_v2/dark.ts +++ b/data/colors_v2/vars/component_dark.ts @@ -1,180 +1,6 @@ -import {alpha, get, merge, darken} from '../../src/utils' -import darkProductVars from './utils/dark_product_vars' -import darkMarketingVars from './utils/dark_marketing_vars' -import deprecatedVars from './utils/deprecated_vars' +import {alpha, darken, get} from '../../../src/utils' -const vars = { - // Scales - scale: { - black: '#010409', - white: '#f0f6fc', - gray: [ - '#f0f6fc', - '#c9d1d9', - '#b1bac4', - '#8b949e', - '#6e7681', - '#484f58', - '#30363d', - '#21262d', - '#161b22', - '#0d1117' - ], - blue: [ - '#cae8ff', - '#a5d6ff', - '#79c0ff', - '#58a6ff', - '#388bfd', - '#1f6feb', - '#1158c7', - '#0d419d', - '#0c2d6b', - '#051d4d' - ], - green: [ - '#aff5b4', - '#7ee787', - '#56d364', - '#3fb950', - '#2ea043', - '#238636', - '#196c2e', - '#0f5323', - '#033a16', - '#04260f' - ], - yellow: [ - '#f8e3a1', - '#f2cc60', - '#e3b341', - '#d29922', - '#bb8009', - '#9e6a03', - '#845306', - '#693e00', - '#4b2900', - '#341a00' - ], - orange: [ - '#ffdfb6', - '#ffc680', - '#ffa657', - '#f0883e', - '#db6d28', - '#bd561d', - '#9b4215', - '#762d0a', - '#5a1e02', - '#3d1300' - ], - red: ['#ffdcd7', '#ffc1ba', '#ffa198', '#ff7b72', '#f85149', '#da3633', '#b62324', '#8e1519', '#67060c', '#490202'], - purple: [ - '#eddeff', - '#e2c5ff', - '#d2a8ff', - '#bc8cff', - '#a371f7', - '#8957e5', - '#6e40c9', - '#553098', - '#3c1e70', - '#271052' - ], - pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] - }, - - // Foundations - fg: { - default: get('scale.gray.1'), - muted: get('scale.gray.3'), - inactive: get('scale.gray.5'), - onEmphasis: get('scale.white') - }, - canvas: { - default: get('scale.gray.9'), - overlay: get('scale.gray.8'), - inset: get('scale.black') - }, - border: { - default: get('scale.gray.6'), - divider: get('scale.gray.7') - }, - shadow: { - small: '0 0 transparent', - medium: (theme: any) => `0 3px 6px ${get('scale.black')(theme)}`, - large: (theme: any) => `0 8px 24px ${get('scale.black')(theme)}`, - extraLarge: (theme: any) => `0 12px 48px ${get('scale.black')(theme)}` - }, - - // Roles - neutral: { - fg: get('scale.gray.4'), - emphasis: get('scale.gray.5'), - highlighter: alpha(get('scale.gray.4'), 0.4), - muted: alpha(get('scale.gray.4'), 0.1) - }, - accent: { - fg: get('scale.blue.4'), - emphasis: get('scale.blue.5'), - highlighter: alpha(get('scale.blue.4'), 0.4), - muted: alpha(get('scale.blue.4'), 0.1) - }, - success: { - fg: get('scale.green.4'), - emphasis: get('scale.green.5'), - highlighter: alpha(get('scale.green.4'), 0.4), - muted: alpha(get('scale.green.4'), 0.1) - }, - warning: { - fg: get('scale.yellow.4'), - emphasis: get('scale.yellow.5'), - highlighter: alpha(get('scale.yellow.4'), 0.4), - muted: alpha(get('scale.yellow.4'), 0.1) - }, - severe: { - fg: get('scale.orange.4'), - emphasis: get('scale.orange.5'), - highlighter: alpha(get('scale.orange.4'), 0.4), - muted: alpha(get('scale.orange.4'), 0.1) - }, - danger: { - fg: get('scale.red.4'), - emphasis: get('scale.red.5'), - highlighter: alpha(get('scale.red.4'), 0.4), - muted: alpha(get('scale.red.4'), 0.1) - }, - done: { - fg: get('scale.purple.4'), - emphasis: get('scale.purple.5'), - highlighter: alpha(get('scale.purple.4'), 0.4), - muted: alpha(get('scale.purple.4'), 0.1) - }, - sponsors: { - fg: get('scale.pink.4'), - emphasis: get('scale.pink.5'), - highlighter: alpha(get('scale.pink.4'), 0.4), - muted: alpha(get('scale.pink.4'), 0.1) - }, - - // Only meant for Primer components - primer: { - canvas: { - backdrop: alpha(get('scale.black'), 0.8), // use for modal/dialogs - sticky: alpha(get('scale.gray.9'), 0.95) // use for sticky headers - }, - border: { - active: '#F78166', // coral - contrast: alpha(get('scale.white'), 0.2) // use to increase contrast - }, - shadow: { - highlight: '0 0 transparent', // top highlight - inset: '0 0 transparent', // top inner shadow - focus: (theme: any) => `0 0 0 3px ${get('scale.blue.8')(theme)}` // blue focus ring - } - }, - - // Components +export default { avatar: { bg: alpha(get('scale.white'), 0.1), border: alpha(get('scale.white'), 0.1), @@ -298,5 +124,3 @@ const vars = { } } } - -export default merge(deprecatedVars, darkProductVars, darkMarketingVars, vars) diff --git a/data/colors_v2/light.ts b/data/colors_v2/vars/component_light.ts similarity index 54% rename from data/colors_v2/light.ts rename to data/colors_v2/vars/component_light.ts index 84ff341a9..ded5e75d9 100644 --- a/data/colors_v2/light.ts +++ b/data/colors_v2/vars/component_light.ts @@ -1,179 +1,6 @@ -import {alpha, darken, get, lighten, merge} from '../../src/utils' -import deprecatedVars from './utils/deprecated_vars' -import lightProductVars from './utils/light_product_vars' -import lightMarketingVars from './utils/light_marketing_vars' +import {alpha, darken, get} from '../../../src/utils' -const vars = { - scale: { - black: '#1b1f24', - white: '#ffffff', - gray: [ - '#fafbfc', - '#eaeef2', - '#d4dae0', - '#b7bfc7', - '#949da7', - '#707a84', - '#57606a', - '#424a53', - '#32383f', - '#24292f' - ], - blue: [ - '#ddf4ff', - '#b6e3ff', - '#80ccff', - '#54aeff', - '#218bff', - '#0969da', - '#0550ae', - '#033d8b', - '#0a3069', - '#002155' - ], - green: [ - '#dafbe1', - '#aceebb', - '#6fdd8b', - '#4ac26b', - '#2da44e', - '#1a7f37', - '#116329', - '#044f1e', - '#003d16', - '#002d11' - ], - yellow: [ - '#fff8c5', - '#fae17d', - '#eac54f', - '#d4a72c', - '#bf8700', - '#9a6700', - '#7d4e00', - '#633c01', - '#4d2d00', - '#3b2300' - ], - orange: [ - '#fff1e5', - '#ffd8b5', - '#ffb77c', - '#fb8f44', - '#e16f24', - '#bc4c00', - '#953800', - '#762c00', - '#5c2200', - '#471700' - ], - red: ['#ffe7e5', '#ffcecb', '#ffaba8', '#ff8182', '#fa4549', '#cf222e', '#a40e26', '#82071e', '#660018', '#4c0014'], - purple: [ - '#fbefff', - '#ecd8ff', - '#d8b9ff', - '#c297ff', - '#a475f9', - '#8250df', - '#6639ba', - '#512a97', - '#3e1f79', - '#2e1461' - ], - pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'] - }, - - // Foundations - fg: { - default: get('scale.gray.9'), - muted: get('scale.gray.6'), - inactive: get('scale.gray.5'), - onEmphasis: get('scale.white') - }, - canvas: { - default: get('scale.white'), - overlay: get('scale.white'), - inset: get('scale.gray.1') - }, - border: { - default: get('scale.gray.2'), - divider: lighten(get('scale.gray.2'), 0.03) - }, - shadow: { - small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, - medium: (theme: any) => `0 3px 6px ${alpha(get('scale.gray.4'), 0.15)(theme)}`, - large: (theme: any) => `0 8px 24px ${alpha(get('scale.gray.4'), 0.2)(theme)}`, - extraLarge: (theme: any) => `0 12px 28px ${alpha(get('scale.gray.4'), 0.3)(theme)}` - }, - - // Roles - neutral: { - fg: get('scale.gray.5'), - emphasis: get('scale.gray.5'), - highlighter: get('scale.gray.3'), - muted: get('scale.gray.1') - }, - accent: { - fg: get('scale.blue.5'), - emphasis: get('scale.blue.5'), - highlighter: get('scale.blue.2'), - muted: get('scale.blue.0') - }, - success: { - fg: get('scale.green.6'), - emphasis: get('scale.green.5'), - highlighter: get('scale.green.3'), - muted: get('scale.green.1') - }, - warning: { - fg: get('scale.yellow.8'), - emphasis: get('scale.yellow.5'), - highlighter: get('scale.yellow.3'), - muted: get('scale.yellow.2') - }, - severe: { - fg: get('scale.orange.5'), - emphasis: get('scale.orange.5'), - highlighter: get('scale.orange.3'), - muted: get('scale.orange.1') - }, - danger: { - fg: get('scale.red.6'), - emphasis: get('scale.red.5'), - highlighter: get('scale.red.2'), - muted: get('scale.red.0') - }, - done: { - fg: get('scale.purple.5'), - emphasis: get('scale.purple.5'), - highlighter: get('scale.purple.2'), - muted: get('scale.purple.0') - }, - sponsors: { - fg: get('scale.pink.5'), - emphasis: get('scale.pink.5'), - highlighter: get('scale.pink.2'), - muted: get('scale.pink.0') - }, - - // Only meant to be used by Primer components - primer: { - canvas: { - backdrop: alpha(get('scale.black'), 0.5), // use for modal/dialogs - sticky: alpha(get('scale.white'), 0.95) // use for sticky headers - }, - border: { - active: '#f9826c', // coral - contrast: alpha(get('scale.black'), 0.1) // use to increase contrast - }, - shadow: { - highlight: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, // top highlight - inset: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.gray.2'), 0.2)(theme)}`, // top inner shadow - focus: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` // blue focus ring - } - }, - - // Components +export default { avatar: { bg: get('scale.white'), border: 'transparent', @@ -299,5 +126,3 @@ const vars = { } } } - -export default merge(deprecatedVars, lightProductVars, lightMarketingVars, vars) diff --git a/data/colors_v2/utils/deprecated_vars.ts b/data/colors_v2/vars/deprecated.ts similarity index 100% rename from data/colors_v2/utils/deprecated_vars.ts rename to data/colors_v2/vars/deprecated.ts diff --git a/data/colors_v2/vars/global_dark.ts b/data/colors_v2/vars/global_dark.ts new file mode 100644 index 000000000..7f4f3fcd0 --- /dev/null +++ b/data/colors_v2/vars/global_dark.ts @@ -0,0 +1,92 @@ +import {alpha, get} from '../../../src/utils' + +export default { + fg: { + default: get('scale.gray.1'), + muted: get('scale.gray.3'), + inactive: get('scale.gray.5'), + onEmphasis: get('scale.white') + }, + canvas: { + default: get('scale.gray.9'), + overlay: get('scale.gray.8'), + inset: get('scale.black') + }, + border: { + default: get('scale.gray.6'), + divider: get('scale.gray.7') + }, + shadow: { + small: '0 0 transparent', + medium: (theme: any) => `0 3px 6px ${get('scale.black')(theme)}`, + large: (theme: any) => `0 8px 24px ${get('scale.black')(theme)}`, + extraLarge: (theme: any) => `0 12px 48px ${get('scale.black')(theme)}` + }, + + // Roles + neutral: { + fg: get('scale.gray.4'), + emphasis: get('scale.gray.5'), + highlighter: alpha(get('scale.gray.4'), 0.4), + muted: alpha(get('scale.gray.4'), 0.1) + }, + accent: { + fg: get('scale.blue.4'), + emphasis: get('scale.blue.5'), + highlighter: alpha(get('scale.blue.4'), 0.4), + muted: alpha(get('scale.blue.4'), 0.1) + }, + success: { + fg: get('scale.green.4'), + emphasis: get('scale.green.5'), + highlighter: alpha(get('scale.green.4'), 0.4), + muted: alpha(get('scale.green.4'), 0.1) + }, + warning: { + fg: get('scale.yellow.4'), + emphasis: get('scale.yellow.5'), + highlighter: alpha(get('scale.yellow.4'), 0.4), + muted: alpha(get('scale.yellow.4'), 0.1) + }, + severe: { + fg: get('scale.orange.4'), + emphasis: get('scale.orange.5'), + highlighter: alpha(get('scale.orange.4'), 0.4), + muted: alpha(get('scale.orange.4'), 0.1) + }, + danger: { + fg: get('scale.red.4'), + emphasis: get('scale.red.5'), + highlighter: alpha(get('scale.red.4'), 0.4), + muted: alpha(get('scale.red.4'), 0.1) + }, + done: { + fg: get('scale.purple.4'), + emphasis: get('scale.purple.5'), + highlighter: alpha(get('scale.purple.4'), 0.4), + muted: alpha(get('scale.purple.4'), 0.1) + }, + sponsors: { + fg: get('scale.pink.4'), + emphasis: get('scale.pink.5'), + highlighter: alpha(get('scale.pink.4'), 0.4), + muted: alpha(get('scale.pink.4'), 0.1) + }, + + // Only meant for Primer components + primer: { + canvas: { + backdrop: alpha(get('scale.black'), 0.8), // use for modal/dialogs + sticky: alpha(get('scale.gray.9'), 0.95) // use for sticky headers + }, + border: { + active: '#F78166', // coral + contrast: alpha(get('scale.white'), 0.2) // use to increase contrast + }, + shadow: { + highlight: '0 0 transparent', // top highlight + inset: '0 0 transparent', // top inner shadow + focus: (theme: any) => `0 0 0 3px ${get('scale.blue.8')(theme)}` // blue focus ring + } + } +} diff --git a/data/colors_v2/vars/global_light.ts b/data/colors_v2/vars/global_light.ts new file mode 100644 index 000000000..96108baf5 --- /dev/null +++ b/data/colors_v2/vars/global_light.ts @@ -0,0 +1,92 @@ +import {alpha, get, lighten} from '../../../src/utils' + +export default { + fg: { + default: get('scale.gray.9'), + muted: get('scale.gray.6'), + inactive: get('scale.gray.5'), + onEmphasis: get('scale.white') + }, + canvas: { + default: get('scale.white'), + overlay: get('scale.white'), + inset: get('scale.gray.1') + }, + border: { + default: get('scale.gray.2'), + divider: lighten(get('scale.gray.2'), 0.03) + }, + shadow: { + small: (theme: any) => `0 1px 0 ${alpha(get('scale.black'), 0.04)(theme)}`, + medium: (theme: any) => `0 3px 6px ${alpha(get('scale.gray.4'), 0.15)(theme)}`, + large: (theme: any) => `0 8px 24px ${alpha(get('scale.gray.4'), 0.2)(theme)}`, + extraLarge: (theme: any) => `0 12px 28px ${alpha(get('scale.gray.4'), 0.3)(theme)}` + }, + + // Roles + neutral: { + fg: get('scale.gray.5'), + emphasis: get('scale.gray.5'), + highlighter: get('scale.gray.3'), + muted: get('scale.gray.1') + }, + accent: { + fg: get('scale.blue.5'), + emphasis: get('scale.blue.5'), + highlighter: get('scale.blue.2'), + muted: get('scale.blue.0') + }, + success: { + fg: get('scale.green.6'), + emphasis: get('scale.green.5'), + highlighter: get('scale.green.3'), + muted: get('scale.green.1') + }, + warning: { + fg: get('scale.yellow.8'), + emphasis: get('scale.yellow.5'), + highlighter: get('scale.yellow.3'), + muted: get('scale.yellow.2') + }, + severe: { + fg: get('scale.orange.5'), + emphasis: get('scale.orange.5'), + highlighter: get('scale.orange.3'), + muted: get('scale.orange.1') + }, + danger: { + fg: get('scale.red.6'), + emphasis: get('scale.red.5'), + highlighter: get('scale.red.2'), + muted: get('scale.red.0') + }, + done: { + fg: get('scale.purple.5'), + emphasis: get('scale.purple.5'), + highlighter: get('scale.purple.2'), + muted: get('scale.purple.0') + }, + sponsors: { + fg: get('scale.pink.5'), + emphasis: get('scale.pink.5'), + highlighter: get('scale.pink.2'), + muted: get('scale.pink.0') + }, + + // Only meant to be used by Primer components + primer: { + canvas: { + backdrop: alpha(get('scale.black'), 0.5), // use for modal/dialogs + sticky: alpha(get('scale.white'), 0.95) // use for sticky headers + }, + border: { + active: '#f9826c', // coral + contrast: alpha(get('scale.black'), 0.1) // use to increase contrast + }, + shadow: { + highlight: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.white'), 0.25)(theme)}`, // top highlight + inset: (theme: any) => `inset 0 1px 0 ${alpha(get('scale.gray.2'), 0.2)(theme)}`, // top inner shadow + focus: (theme: any) => `0 0 0 3px ${alpha(get('scale.blue.5'), 0.3)(theme)}` // blue focus ring + } + } +} diff --git a/data/colors_v2/utils/dark_marketing_vars.ts b/data/colors_v2/vars/marketing_dark.ts similarity index 100% rename from data/colors_v2/utils/dark_marketing_vars.ts rename to data/colors_v2/vars/marketing_dark.ts diff --git a/data/colors_v2/utils/light_marketing_vars.ts b/data/colors_v2/vars/marketing_light.ts similarity index 100% rename from data/colors_v2/utils/light_marketing_vars.ts rename to data/colors_v2/vars/marketing_light.ts diff --git a/data/colors_v2/utils/dark_product_vars.ts b/data/colors_v2/vars/product_dark.ts similarity index 100% rename from data/colors_v2/utils/dark_product_vars.ts rename to data/colors_v2/vars/product_dark.ts diff --git a/data/colors_v2/utils/light_product_vars.ts b/data/colors_v2/vars/product_light.ts similarity index 100% rename from data/colors_v2/utils/light_product_vars.ts rename to data/colors_v2/vars/product_light.ts From 61cbf536287f519ee373871d5ec8683d651359ad Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 26 May 2021 11:00:26 -0700 Subject: [PATCH 41/43] Merge global variables --- data/colors_v2/themes/dark.ts | 3 ++- data/colors_v2/themes/light.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/data/colors_v2/themes/dark.ts b/data/colors_v2/themes/dark.ts index 8f1d0626c..20db14281 100644 --- a/data/colors_v2/themes/dark.ts +++ b/data/colors_v2/themes/dark.ts @@ -1,5 +1,6 @@ import {merge} from '../../../src/utils' import deprecatedVars from '../vars/deprecated' +import darkGlobalVars from '../vars/global_dark' import darkMarketingVars from '../vars/marketing_dark' import darkProductVars from '../vars/product_dark' @@ -49,4 +50,4 @@ const scale = { pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] } -export default merge(deprecatedVars, darkProductVars, darkMarketingVars, {scale}) +export default merge(deprecatedVars, darkProductVars, darkMarketingVars, darkGlobalVars, {scale}) diff --git a/data/colors_v2/themes/light.ts b/data/colors_v2/themes/light.ts index b4e9ed2ff..6dfe5e02b 100644 --- a/data/colors_v2/themes/light.ts +++ b/data/colors_v2/themes/light.ts @@ -1,5 +1,6 @@ import {merge} from '../../../src/utils' import deprecatedVars from '../vars/deprecated' +import lightGlobalVars from '../vars/global_light' import lightMarketingVars from '../vars/marketing_light' import lightProductVars from '../vars/product_light' @@ -49,4 +50,4 @@ const scale = { pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'] } -export default merge(deprecatedVars, lightProductVars, lightMarketingVars, {scale}) +export default merge(deprecatedVars, lightProductVars, lightMarketingVars, lightGlobalVars, {scale}) From 1f98487c960ecd3efd68ba1b2f6fc3edee1e7130 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 26 May 2021 11:04:59 -0700 Subject: [PATCH 42/43] Update package.json --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b29a61810..71d2ff005 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,9 @@ "name": "@primer/primitives", "version": "4.3.5", "description": "Typography, spacing, and color primitives for Primer design system", - "files": ["dist"], + "files": [ + "dist" + ], "main": "dist/js/index.js", "types": "dist/js/index.d.ts", "repository": "https://github.com/primer/primitives", @@ -33,6 +35,7 @@ "@actions/github": "^4.0.0", "@changesets/changelog-github": "^0.3.0", "@changesets/cli": "^2.11.2", + "@github/prettier-config": "^0.0.4", "@octokit/rest": "^18.5.3", "@types/chalk": "^2.2.0", "@types/flat": "^5.0.1", @@ -51,8 +54,5 @@ "sass-extract": "^2.1.0", "ts-node": "^8.10.2", "typescript": "^3.7.2" - }, - "dependencies": { - "@github/prettier-config": "^0.0.4" } } From 013c6fa7d9890662cc58d74498172c7a160ecec2 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 26 May 2021 11:16:20 -0700 Subject: [PATCH 43/43] Merge component variables --- data/colors_v2/themes/dark.ts | 3 ++- data/colors_v2/themes/light.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/data/colors_v2/themes/dark.ts b/data/colors_v2/themes/dark.ts index 20db14281..8e080085e 100644 --- a/data/colors_v2/themes/dark.ts +++ b/data/colors_v2/themes/dark.ts @@ -1,4 +1,5 @@ import {merge} from '../../../src/utils' +import darkComponentVars from '../vars/component_dark' import deprecatedVars from '../vars/deprecated' import darkGlobalVars from '../vars/global_dark' import darkMarketingVars from '../vars/marketing_dark' @@ -50,4 +51,4 @@ const scale = { pink: ['#ffdaec', '#ffbedd', '#ff9bce', '#f778ba', '#db61a2', '#bf4b8a', '#9e3670', '#7d2457', '#5e103e', '#42062a'] } -export default merge(deprecatedVars, darkProductVars, darkMarketingVars, darkGlobalVars, {scale}) +export default merge(deprecatedVars, darkProductVars, darkMarketingVars, darkComponentVars, darkGlobalVars, {scale}) diff --git a/data/colors_v2/themes/light.ts b/data/colors_v2/themes/light.ts index 6dfe5e02b..dfb2dd3d3 100644 --- a/data/colors_v2/themes/light.ts +++ b/data/colors_v2/themes/light.ts @@ -1,4 +1,5 @@ import {merge} from '../../../src/utils' +import lightComponentVars from '../vars/component_light' import deprecatedVars from '../vars/deprecated' import lightGlobalVars from '../vars/global_light' import lightMarketingVars from '../vars/marketing_light' @@ -50,4 +51,4 @@ const scale = { pink: ['#ffeff7', '#ffd3eb', '#ffadda', '#ff80c8', '#e85aad', '#bf3989', '#99286e', '#772057', '#611347', '#4d0336'] } -export default merge(deprecatedVars, lightProductVars, lightMarketingVars, lightGlobalVars, {scale}) +export default merge(deprecatedVars, lightProductVars, lightMarketingVars, lightComponentVars, lightGlobalVars, {scale})