diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts index 29fcc11f5..5c6454140 100644 --- a/scripts/buildFigma.ts +++ b/scripts/buildFigma.ts @@ -134,7 +134,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 high contrast', + theme: 'light-high-contrast', }, { name: 'light-colorblind', @@ -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 protanopia deuteranopia', + theme: 'light-protanopia-deuteranopia', }, { name: 'light-tritanopia', @@ -158,7 +158,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 tritanopia', + theme: 'light-tritanopia', }, { name: 'dark', @@ -181,7 +181,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 high contrast', + theme: 'dark-high-contrast', }, { name: 'dark-dimmed', @@ -193,7 +193,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 dimmed', + theme: 'dark-dimmed', }, { name: 'dark-colorblind', @@ -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 protanopia deuteranopia', + theme: 'dark-protanopia-deuteranopia', }, { name: 'dark-tritanopia', @@ -217,7 +217,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 tritanopia', + theme: 'dark-tritanopia', }, ] // diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index 145b46c1b..52087314b 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -40,10 +40,10 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = ( Object.entries({ css: css(`css/${filename}.css`, options.prefix, options.buildPath, { themed: options.themed, - theme: [options.theme, getFallbackTheme(options.theme)], + theme: options.theme, }), docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, { - theme: [options.theme, getFallbackTheme(options.theme)], + theme: options.theme, }), styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, { theme: options.theme, diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts index 0e0f1a30c..21667da98 100644 --- a/src/platforms/figma.ts +++ b/src/platforms/figma.ts @@ -20,47 +20,52 @@ const validFigmaToken = async (token: TransformedToken, options: Config) => { return validTypes.includes(token.$type) } -export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({ - prefix, - buildPath, - preprocessors: ['themeOverrides'], - transforms: [ - 'color/rgbaFloat', - 'fontFamily/figma', - 'float/pixelUnitless', - 'dimension/pixelUnitless', - // 'border/figma', - // 'typography/figma', - 'fontWeight/number', - 'figma/attributes', - 'name/pathToFigma', - ], - options: { - basePxFontSize: 16, - fontFamilies: { - 'fontStack/system': 'SF Pro Text', - 'fontStack/sansSerif': 'SF Pro Text', - 'fontStack/sansSerifDisplay': 'SF Pro Display', - 'fontStack/monospace': 'SF Mono', - }, - // should this object be spread here? - ...options, - theme: options?.theme[0].replaceAll('-', ' '), - themeOverrides: { - theme: options?.theme, - }, - }, - files: [ - { - destination: outputFile, - filter: (token: TransformedToken, config: Config) => { - return validFigmaToken(token, config) +export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options = {}): PlatformConfig => { + const {theme} = options + const figmaTheme = (theme?.[0] || '').replaceAll('-', ' ') + + return { + prefix, + buildPath, + preprocessors: ['themeOverrides'], + transforms: [ + 'color/rgbaFloat', + 'fontFamily/figma', + 'float/pixelUnitless', + 'dimension/pixelUnitless', + // 'border/figma', + // 'typography/figma', + 'fontWeight/number', + 'figma/attributes', + 'name/pathToFigma', + ], + options: { + basePxFontSize: 16, + fontFamilies: { + 'fontStack/system': 'SF Pro Text', + 'fontStack/sansSerif': 'SF Pro Text', + 'fontStack/sansSerifDisplay': 'SF Pro Display', + 'fontStack/monospace': 'SF Mono', }, - format: `json/figma`, - options: { - outputReferences: true, - theme: options?.theme[0].replaceAll('-', ' '), + // should this object be spread here? + ...options, + theme: figmaTheme, + themeOverrides: { + theme: options.theme, }, }, - ], -}) + files: [ + { + destination: outputFile, + filter: (token: TransformedToken, config: Config) => { + return validFigmaToken(token, config) + }, + format: `json/figma`, + options: { + outputReferences: true, + theme: figmaTheme, + }, + }, + ], + } +} diff --git a/src/tokens/component/diffBlob.json5 b/src/tokens/component/diffBlob.json5 index 85b36fa24..0b6314d75 100644 --- a/src/tokens/component/diffBlob.json5 +++ b/src/tokens/component/diffBlob.json5 @@ -55,6 +55,11 @@ $value: '{base.color.green.4}', alpha: 0.4, }, + 'light-protanopia-deuteranopia': '{base.color.blue.1}', + 'dark-protanopia-deuteranopia': { + $value: '{base.color.blue.4}', + alpha: 0.4, + }, }, }, }, @@ -85,6 +90,11 @@ $value: '{base.color.green.3}', alpha: 0.3, }, + 'light-protanopia-deuteranopia': '{base.color.blue.1}', + 'dark-protanopia-deuteranopia': { + $value: '{base.color.blue.3}', + alpha: 0.3, + }, }, }, }, @@ -110,6 +120,12 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + 'dark-protanopia-deuteranopia': { + $value: '{base.color.orange.4}', + alpha: 0.15, + }, + }, }, }, }, @@ -139,6 +155,11 @@ $value: '{base.color.red.4}', alpha: 0.4, }, + 'light-protanopia-deuteranopia': '{base.color.orange.1}', + 'dark-protanopia-deuteranopia': { + $value: '{base.color.orange.4}', + alpha: 0.4, + }, }, }, }, @@ -169,6 +190,11 @@ $value: '{base.color.red.4}', alpha: 0.3, }, + 'light-protanopia-deuteranopia': '{base.color.orange.1}', + 'dark-protanopia-deuteranopia': { + $value: '{base.color.orange.4}', + alpha: 0.3, + }, }, }, }, @@ -183,6 +209,10 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{base.color.neutral.1}', + 'dark-protanopia-deuteranopia': '{base.color.neutral.3}', + }, }, }, fgColor: { @@ -219,6 +249,9 @@ group: 'component', scopes: ['fgColor'], }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{fgColor.default}', + }, }, }, }, @@ -234,6 +267,8 @@ }, 'org.primer.overrides': { dark: '{base.color.blue.8}', + 'light-protanopia-deuteranopia': '{base.color.neutral.3}', + 'dark-protanopia-deuteranopia': '{base.color.neutral.6}', }, }, }, @@ -246,6 +281,10 @@ group: 'component', scopes: ['bgColor'], }, + 'org.primer.overrides': { + 'light-protanopia-deuteranopia': '{base.color.neutral.7}', + 'dark-protanopia-deuteranopia': '{base.color.neutral.8}', + }, }, }, }, diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 index 0dbaa8952..f1fa69215 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -186,64 +186,6 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.3}', - $type: 'color', - alpha: 0.3, - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.4}', - $type: 'color', - alpha: 0.4, - }, - }, - deletionNum: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.3, - }, - }, - deletionLine: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.15, - }, - }, - deletionWord: { - bgColor: { - $value: '{base.color.orange.4}', - $type: 'color', - alpha: 0.4, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.6}', - $type: 'color', - alpha: 1, - }, - hover: { - $value: '{base.color.neutral.8}', - $type: 'color', - alpha: 1, - }, - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.3}', - $type: 'color', - alpha: 1, - }, - }, - }, color: { ansi: { green: { diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 index 553498e91..f15cfc505 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -31,6 +31,16 @@ emphasis: { $value: '{base.color.blue.5}', $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + group: 'semantic', + scopes: ['bgColor'], + codeSyntax: { + web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */', + }, + }, + }, }, }, open: { @@ -110,77 +120,6 @@ }, }, }, - diffBlob: { - additionNum: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - additionWord: { - bgColor: { - $value: '{base.color.blue.1}', - $type: 'color', - }, - }, - deletionNum: { - bgColor: { - $value: '{base.color.orange.1}', - $type: 'color', - }, - }, - deletionWord: { - bgColor: { - $value: '{base.color.orange.1}', - $type: 'color', - }, - }, - hunkLine: { - bgColor: { - $value: '{base.color.neutral.1}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - hunkNum: { - bgColor: { - rest: { - $value: '{base.color.neutral.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - hover: { - $value: '{base.color.neutral.7}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - group: 'component', - scopes: ['bgColor'], - }, - }, - }, - }, - fgColor: { - hover: { - $value: '{fgColor.default}', - $type: 'color', - }, - }, - }, - }, codeMirror: { syntax: { fgColor: { diff --git a/src/transformers/figmaAttributes.ts b/src/transformers/figmaAttributes.ts index 3cb5eda3f..643eea6ac 100644 --- a/src/transformers/figmaAttributes.ts +++ b/src/transformers/figmaAttributes.ts @@ -70,6 +70,7 @@ export const figmaAttributes: Transform = { type: `attribute`, transform: (token: TransformedToken, platform: PlatformConfig = {}) => { const {modeOverride, collection, scopes, group, codeSyntax} = token.$extensions?.['org.primer.figma'] || {} + return { mode: asArray(platform.options?.theme)[0] || modeOverride || 'default', collection,