From 6f6c1d8f6f9a83e5367263a64d933f5ac02f3c73 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 16 Dec 2024 21:52:48 +0100 Subject: [PATCH] fix for figma --- 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 ++-- 10 files changed, 38 insertions(+), 24 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..1a2cd20f4 --- /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(),