Skip to content

Commit

Permalink
move overrides for diffBlob to component file (#1137)
Browse files Browse the repository at this point in the history 
* move overrides for diffBlob to component file

* fix for mode override

* fix

* fixes
  • Loading branch information
@lukasoppermann
lukasoppermann authored Dec 18, 2024
1 parent 3e281b1 commit 086fd63
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 179 deletions.
14 changes: 7 additions & 7 deletions scripts/buildFigma.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`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',
Expand All @@ -146,7 +146,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`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',
Expand All @@ -158,7 +158,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/light/primitives-light.json5`,
`src/tokens/functional/color/light/patterns-light.json5`,
],
theme: 'light tritanopia',
theme: 'light-tritanopia',
},
{
name: 'dark',
Expand All @@ -181,7 +181,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`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',
Expand All @@ -193,7 +193,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`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',
Expand All @@ -205,7 +205,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`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',
Expand All @@ -217,7 +217,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
theme: 'dark tritanopia',
theme: 'dark-tritanopia',
},
]
//
Expand Down
4 changes: 2 additions & 2 deletions scripts/buildTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
87 changes: 46 additions & 41 deletions src/platforms/figma.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
],
}
}
39 changes: 39 additions & 0 deletions src/tokens/component/diffBlob.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
},
},
Expand Down Expand Up @@ -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,
},
},
},
},
Expand All @@ -110,6 +120,12 @@
group: 'component',
scopes: ['bgColor'],
},
'org.primer.overrides': {
'dark-protanopia-deuteranopia': {
$value: '{base.color.orange.4}',
alpha: 0.15,
},
},
},
},
},
Expand Down Expand Up @@ -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,
},
},
},
},
Expand Down Expand Up @@ -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,
},
},
},
},
Expand All @@ -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: {
Expand Down Expand Up @@ -219,6 +249,9 @@
group: 'component',
scopes: ['fgColor'],
},
'org.primer.overrides': {
'light-protanopia-deuteranopia': '{fgColor.default}',
},
},
},
},
Expand All @@ -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}',
},
},
},
Expand All @@ -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}',
},
},
},
},
Expand Down
58 changes: 0 additions & 58 deletions src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading

0 comments on commit 086fd63

Please sign in to comment.