From 3f9754baf4c8c8bf21dc53b06863a19f29e2453b Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 17 Dec 2024 10:09:09 +0100 Subject: [PATCH] light mode (#1134) --- eslint.config.mjs | 4 +- scripts/buildFigma.ts | 12 +- scripts/colorContrast.config.ts | 8 +- scripts/colorContrast.ts | 7 +- scripts/utilities/getThemeFileName.ts | 12 + src/platforms/figma.ts | 3 +- src/schemas/collectionSchema.test.ts | 4 +- src/schemas/collections.ts | 4 +- src/schemas/colorToken.ts | 4 +- src/schemas/shadowToken.ts | 4 +- src/tokens/component/diffBlob.json5 | 32 ++ .../functional/color/dark/app-dark.json5 | 285 ------------------ 12 files changed, 70 insertions(+), 309 deletions(-) create mode 100644 scripts/utilities/getThemeFileName.ts diff --git a/eslint.config.mjs b/eslint.config.mjs index 6a5b1fe3d..9739a3d27 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -96,11 +96,11 @@ export default tseslint.config([ { allow: [ 'light_high_contrast', - 'light_colorblind', + 'light_protanopia_deuteranopia', 'light_tritanopia', 'dark_dimmed', 'dark_high_contrast', - 'dark_colorblind', + 'dark_protanopia_deuteranopia', 'dark_tritanopia', ], }, diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts index 6ad80b5bc..29fcc11f5 100644 --- a/scripts/buildFigma.ts +++ b/scripts/buildFigma.ts @@ -61,14 +61,14 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = await extended.buildAllPlatforms() } // - for (const {filename, source, include} of themes) { + for (const {filename, source, include, theme} of themes) { // build functional scales const extended = await PrimerStyleDictionary.extend({ source, include, platforms: { figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, { - theme: filename.replaceAll('-', ' '), + theme: [theme, getFallbackTheme(theme)], }), }, }) @@ -146,7 +146,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/functional/color/light/primitives-light.json5`, `src/tokens/functional/color/light/patterns-light.json5`, ], - theme: 'light colorblind', + theme: 'light protanopia deuteranopia', }, { name: 'light-tritanopia', @@ -205,7 +205,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = `src/tokens/functional/color/dark/primitives-dark.json5`, `src/tokens/functional/color/dark/patterns-dark.json5`, ], - theme: 'dark colorblind', + theme: 'dark protanopia deuteranopia', }, { name: 'dark-tritanopia', @@ -289,8 +289,8 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = 'dark dimmed', 'light high contrast', 'dark high contrast', - 'light colorblind', - 'dark colorblind', + 'light protanopia deuteranopia', + 'dark protanopia deuteranopia', 'light tritanopia', 'dark tritanopia', ].reverse() diff --git a/scripts/colorContrast.config.ts b/scripts/colorContrast.config.ts index 54d134e33..d7c8c0989 100644 --- a/scripts/colorContrast.config.ts +++ b/scripts/colorContrast.config.ts @@ -254,12 +254,12 @@ export const bgColors: string[] = ['bgColor-default', 'bgColor-muted'] export type ThemeName = | 'light' | 'light_high_contrast' - | 'light_colorblind' + | 'light_protanopia_deuteranopia' | 'light_tritanopia' | 'dark' | 'dark_dimmed' | 'dark_high_contrast' - | 'dark_colorblind' + | 'dark_protanopia_deuteranopia' | 'dark_tritanopia' const defaultContrast: ContrastRequirement[] = setContrastRatios('default', [ @@ -278,12 +278,12 @@ export const contrastRequirements: ContrastRequirements = { // default light mode light: defaultContrast, light_high_contrast: highContrast, - light_colorblind: defaultContrast, + light_protanopia_deuteranopia: defaultContrast, light_tritanopia: defaultContrast, // default dark mode dark: defaultContrast, dark_dimmed: defaultContrast, dark_high_contrast: highContrast, - dark_colorblind: defaultContrast, + dark_protanopia_deuteranopia: defaultContrast, dark_tritanopia: defaultContrast, } diff --git a/scripts/colorContrast.ts b/scripts/colorContrast.ts index 20e006b9d..733d130c7 100644 --- a/scripts/colorContrast.ts +++ b/scripts/colorContrast.ts @@ -5,6 +5,7 @@ import {readFile} from 'fs/promises' import {normal} from 'color-blend' import {getContrast, parseToRgba, rgba} from 'color2k' import {makeConsoleTable, makeMarkdownTable} from './utilities/makeTable.js' +import {getThemeFileName} from './utilities/getThemeFileName.js' /** * Type definitions */ @@ -207,7 +208,7 @@ const getColorsFromFiles = async (filePaths: ThemeName[]): Promise => { [ themeName, await JSON.parse( - await readFile(`./dist/docs/functional/themes/${themeName.replaceAll('_', '-')}.json`, 'utf8'), + await readFile(`./dist/docs/functional/themes/${getThemeFileName(themeName, '_', '-')}.json`, 'utf8'), ), ] as Theme, ) @@ -224,8 +225,8 @@ const runCheck = async () => { 'dark', 'light_high_contrast', 'dark_high_contrast', - 'light_colorblind', - 'dark_colorblind', + 'light_protanopia_deuteranopia', + 'dark_protanopia_deuteranopia', 'light_tritanopia', 'dark_tritanopia', ] as ThemeName[] diff --git a/scripts/utilities/getThemeFileName.ts b/scripts/utilities/getThemeFileName.ts new file mode 100644 index 000000000..01326a475 --- /dev/null +++ b/scripts/utilities/getThemeFileName.ts @@ -0,0 +1,12 @@ +export const getThemeFileName = (theme: string, find: string = '_', replace: string = '-') => { + const themeName = theme.replaceAll(find, replace) + + if (themeName === 'light-protanopia-deuteranopia') { + return 'light-colorblind' + } + if (themeName === 'dark-protanopia-deuteranopia') { + return 'dark-colorblind' + } + + return themeName +} diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts index 5164eb7f9..0e0f1a30c 100644 --- a/src/platforms/figma.ts +++ b/src/platforms/figma.ts @@ -45,6 +45,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option }, // should this object be spread here? ...options, + theme: options?.theme[0].replaceAll('-', ' '), themeOverrides: { theme: options?.theme, }, @@ -58,7 +59,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option format: `json/figma`, options: { outputReferences: true, - theme: options?.theme, + theme: options?.theme[0].replaceAll('-', ' '), }, }, ], diff --git a/src/schemas/collectionSchema.test.ts b/src/schemas/collectionSchema.test.ts index a4c7c5542..4289c4e72 100644 --- a/src/schemas/collectionSchema.test.ts +++ b/src/schemas/collectionSchema.test.ts @@ -34,8 +34,8 @@ describe('Schema: mode', () => { 'dark dimmed', 'light high contrast', 'dark high contrast', - 'light colorblind', - 'dark colorblind', + 'light protanopia deuteranopia', + 'dark protanopia deuteranopia', 'light tritanopia', 'dark tritanopia', ]) diff --git a/src/schemas/collections.ts b/src/schemas/collections.ts index 8e6d1b81a..5ad053075 100644 --- a/src/schemas/collections.ts +++ b/src/schemas/collections.ts @@ -33,8 +33,8 @@ type Modes = | 'dark dimmed' | 'light high contrast' | 'dark high contrast' - | 'light colorblind' - | 'dark colorblind' + | 'light protanopia deuteranopia' + | 'dark protanopia deuteranopia' | 'light tritanopia' | 'dark tritanopia' diff --git a/src/schemas/colorToken.ts b/src/schemas/colorToken.ts index f92b09d20..b41390070 100644 --- a/src/schemas/colorToken.ts +++ b/src/schemas/colorToken.ts @@ -36,8 +36,8 @@ export const colorToken = baseColorToken 'dark dimmed', 'light high contrast', 'dark high contrast', - 'light colorblind', - 'dark colorblind', + 'light protanopia deuteranopia', + 'dark protanopia deuteranopia', 'light tritanopia', 'dark tritanopia', ]).optional(), diff --git a/src/schemas/shadowToken.ts b/src/schemas/shadowToken.ts index a5d223f1f..265924472 100644 --- a/src/schemas/shadowToken.ts +++ b/src/schemas/shadowToken.ts @@ -34,8 +34,8 @@ export const shadowToken = baseToken 'dark dimmed', 'light high contrast', 'dark high contrast', - 'light colorblind', - 'dark colorblind', + 'light protanopia deuteranopia', + 'dark protanopia deuteranopia', 'light tritanopia', 'dark tritanopia', ]).optional(), diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5 index cbe43c8b7..85b36fa24 100644 --- a/src/tokens/component/diffBlob.json5 +++ b/src/tokens/component/diffBlob.json5 @@ -21,6 +21,11 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: { + alpha: 0.15, + }, + }, }, }, }, @@ -45,6 +50,12 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: { + $value: '{base.color.green.4}', + alpha: 0.4, + }, + }, }, }, }, @@ -69,6 +80,12 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: { + $value: '{base.color.green.3}', + alpha: 0.3, + }, + }, }, }, }, @@ -117,6 +134,12 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: { + $value: '{base.color.red.4}', + alpha: 0.4, + }, + }, }, }, }, @@ -141,6 +164,12 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: { + $value: '{base.color.red.4}', + alpha: 0.3, + }, + }, }, }, }, @@ -203,6 +232,9 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + dark: '{base.color.blue.8}', + }, }, }, hover: { diff --git a/src/tokens/functional/color/dark/app-dark.json5 b/src/tokens/functional/color/dark/app-dark.json5 index e87314b4e..f6e5c34ae 100644 --- a/src/tokens/functional/color/dark/app-dark.json5 +++ b/src/tokens/functional/color/dark/app-dark.json5 @@ -15,291 +15,6 @@ }, }, }, - diffBlob: { - additionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.success.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.15, - }, - }, - additionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.4, - }, - }, - additionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.3, - }, - }, - deletionLine: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.danger.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - deletionWord: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.4, - }, - }, - deletionNum: { - fgColor: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - alpha: 0.3, - }, - }, - hunkLine: { - fgColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - bgColor: { - $value: '{bgColor.accent.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkNum: { - fgColor: { - rest: { - $value: '{fgColor.default}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - hover: { - $value: '{fgColor.onEmphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - bgColor: { - rest: { - $value: '{base.color.blue.8}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{bgColor.accent.emphasis}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - }, - emptyNum: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - emptyLine: { - bgColor: { - $value: '{bgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - expander: { - iconColor: { - $value: '{fgColor.muted}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - - group: 'component', - scopes: ['fgColor'], - }, - }, - }, - }, - }, codeMirror: { fgColor: { $value: '{fgColor.default}',