Skip to content

Commit

Permalink
Add dark dimmed overrides and update combineTheme script (#1177)
Browse files Browse the repository at this point in the history 
* add dark dimmed overrides and update combineTheme script

* fix linting issues
  • Loading branch information
@lukasoppermann
lukasoppermann authored Jan 31, 2025
1 parent a41211d commit 55b6538
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 106 deletions.
59 changes: 59 additions & 0 deletions scripts/combineThemes.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import {readFileSync, writeFileSync} from 'fs'
import {basename, extname} from 'path'
import JSON5 from 'json5'

interface Theme {
[key: string]: unknown
}

function combineThemes(baseFilePath: string, overrideFilePath: string, outputFilePath: string): void {
const baseFile = JSON5.parse(readFileSync(baseFilePath, 'utf8'))
const overrideFile = JSON5.parse(readFileSync(overrideFilePath, 'utf8'))
const overrideFileName = basename(overrideFilePath, extname(overrideFilePath)).replace(/\./g, '-')

const combinedTheme = combine(baseFile, overrideFile, overrideFileName)

writeFileSync(outputFilePath, JSON5.stringify(combinedTheme, null, 2))
}

function combine(base: Theme, override: Theme, overrideFileName: string): Theme {
const result = {...base}

for (const key in override) {
if (Object.prototype.hasOwnProperty.call(override, key) && Object.prototype.hasOwnProperty.call(result, key)) {
const overrideValue = override[key]

if (overrideValue && typeof overrideValue === 'object' && overrideValue.$value) {
if (!result[key].$extensions) {
result[key].$extensions = {}
}
if (!result[key].$extensions['org.primer.overrides']) {
result[key].$extensions['org.primer.overrides'] = {}
}
result[key].$extensions['org.primer.overrides'][overrideFileName] = {
$value: overrideValue.$value,
...(overrideValue.alpha !== undefined && {alpha: overrideValue.alpha}),
}
} else if (typeof overrideValue === 'object' && !Array.isArray(overrideValue)) {
result[key] = combine(result[key], overrideValue, overrideFileName)
}
}
}

return result
}

// Main function to handle CLI arguments
function main() {
const args = process.argv.slice(2)
if (args.length !== 3) {
// eslint-disable-next-line no-console
console.error('Usage: npx tsx combineThemes.ts <baseFilePath> <overrideFilePath> <outputFilePath>')
process.exit(1)
}

const [baseFilePath, overrideFilePath, outputFilePath] = args
combineThemes(baseFilePath, overrideFilePath, outputFilePath)
}

main()
55 changes: 55 additions & 0 deletions src/tokens/functional/color/control.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.4}',
},
'dark-dimmed': {
$value: '{base.color.neutral.5}',
},
},
},
},
Expand All @@ -36,6 +39,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.5}',
},
'dark-dimmed': {
$value: '{base.color.neutral.6}',
},
},
},
},
Expand All @@ -55,6 +61,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.6}',
},
'dark-dimmed': {
$value: '{base.color.neutral.7}',
},
},
},
},
Expand Down Expand Up @@ -158,6 +167,9 @@
},
'org.primer.overrides': {
dark: '{borderColor.default}',
'dark-dimmed': {
$value: '#3d444d',
},
},
},
},
Expand Down Expand Up @@ -193,6 +205,10 @@
},
'org.primer.overrides': {
dark: '{borderColor.disabled}',
'dark-dimmed': {
$value: '{base.color.neutral.8}',
alpha: 0.1,
},
},
},
},
Expand Down Expand Up @@ -317,6 +333,10 @@
$value: '{base.color.neutral.6}',
alpha: 1,
},
'dark-dimmed': {
$value: '{base.color.neutral.8}',
alpha: 0.15,
},
},
},
alpha: 0.1,
Expand All @@ -341,6 +361,10 @@
$value: '{base.color.neutral.7}',
alpha: 1,
},
'dark-dimmed': {
$value: '{base.color.neutral.8}',
alpha: 0.2,
},
},
},
alpha: 0.15,
Expand Down Expand Up @@ -381,6 +405,10 @@
$value: '{base.color.neutral.6}',
alpha: 1,
},
'dark-dimmed': {
$value: '{base.color.neutral.8}',
alpha: 0.1,
},
},
},
alpha: 0.15,
Expand Down Expand Up @@ -562,6 +590,9 @@
'dark-high-contrast': {
$value: '#2b64c1',
},
'dark-dimmed': {
$value: '#3876d3',
},
},
},
},
Expand All @@ -581,6 +612,9 @@
'dark-high-contrast': {
$value: '#3c79d0',
},
'dark-dimmed': {
$value: '#3f7fdb',
},
},
},
},
Expand Down Expand Up @@ -671,6 +705,9 @@
'dark-high-contrast': {
$value: '{base.color.blue.2}',
},
'dark-dimmed': {
$value: '#3876d3',
},
},
},
},
Expand All @@ -690,6 +727,9 @@
'dark-high-contrast': {
$value: '{base.color.blue.2}',
},
'dark-dimmed': {
$value: '#3f7fdb',
},
},
},
},
Expand Down Expand Up @@ -730,6 +770,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.5}',
},
'dark-dimmed': {
$value: '{base.color.neutral.5}',
},
},
},
},
Expand All @@ -749,6 +792,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.6}',
},
'dark-dimmed': {
$value: '{base.color.neutral.6}',
},
},
},
},
Expand All @@ -768,6 +814,9 @@
'dark-high-contrast': {
$value: '{base.color.neutral.7}',
},
'dark-dimmed': {
$value: '{base.color.neutral.7}',
},
},
},
},
Expand Down Expand Up @@ -842,6 +891,9 @@
'dark-high-contrast': {
$value: '{borderColor.emphasis}',
},
'dark-dimmed': {
$value: '{base.color.neutral.7}',
},
},
},
},
Expand Down Expand Up @@ -878,6 +930,9 @@
},
'org.primer.overrides': {
dark: '{bgColor.inset}',
'dark-dimmed': {
$value: '{bgColor.inset}',
},
},
},
},
Expand Down
106 changes: 0 additions & 106 deletions src/tokens/functional/color/dark/overrides/dark.dimmed.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,112 +4,6 @@
* @description All overwrites for functional color tokens for dark dimmed color mode are in this file
*/
{
control: {
bgColor: {
rest: {
$value: '{base.color.neutral.5}',
$type: 'color',
},
hover: {
$value: '{base.color.neutral.6}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
borderColor: {
rest: {
$value: '#3d444d',
$type: 'color',
},
disabled: {
$value: '{base.color.neutral.8}',
$type: 'color',
alpha: 0.1,
},
},
transparent: {
bgColor: {
hover: {
$value: '{base.color.neutral.8}',
$type: 'color',
alpha: 0.15,
},
active: {
$value: '{base.color.neutral.8}',
$type: 'color',
alpha: 0.2,
},
selected: {
$value: '{base.color.neutral.8}',
$type: 'color',
alpha: 0.1,
},
},
},
checked: {
bgColor: {
hover: {
$value: '#3876d3',
$type: 'color',
},
active: {
$value: '#3f7fdb',
$type: 'color',
},
},
borderColor: {
hover: {
$value: '#3876d3',
$type: 'color',
},
active: {
$value: '#3f7fdb',
$type: 'color',
},
},
},
},
controlTrack: {
bgColor: {
rest: {
$value: '{base.color.neutral.5}',
$type: 'color',
},
hover: {
$value: '{base.color.neutral.6}',
$type: 'color',
},
active: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
borderColor: {
rest: {
$value: '{base.color.neutral.7}',
$type: 'color',
},
},
},
controlKnob: {
bgColor: {
rest: {
$value: '{bgColor.inset}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',

group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
},
button: {
primary: {
bgColor: {
Expand Down

0 comments on commit 55b6538

Please sign in to comment.