Skip to content

Commit

Permalink
Extract bgColor tokens to a separate file (#1155)
Browse files Browse the repository at this point in the history 
* mode dark and light to bgColor

* add light & dark tritanopia overrides

* dark & light protanopia

* add dark & light HC

* fix
  • Loading branch information
@lukasoppermann
lukasoppermann authored Jan 17, 2025
1 parent 3218978 commit 20b3dda
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 787 deletions.
176 changes: 175 additions & 1 deletion ...tional/color/light/primitives-light.json5 → src/tokens/functional/color/bgColor.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
web: 'var(--bgColor-default) /* utility class: .color-bg-default */',
},
},
'org.primer.overrides': {
dark: '{base.color.neutral.1}',
"dark-high-contrast": "{base.color.neutral.0}",
},
},
},
muted: {
Expand All @@ -26,6 +30,11 @@
web: 'var(--bgColor-muted) /* utility class: .color-bg-muted */',
},
},
'org.primer.overrides': {
dark: '{base.color.neutral.2}',
"light-high-contrast": "{base.color.neutral.3}",
"dark-high-contrast": "{base.color.neutral.2}",
},
},
},
inset: {
Expand All @@ -40,6 +49,10 @@
web: 'var(--bgColor-inset) /* utility class: .color-bg-inset */',
},
},
'org.primer.overrides': {
dark: '{base.color.neutral.0}',
"light-high-contrast": "{base.color.neutral.2}",
},
},
},
emphasis: {
Expand All @@ -54,6 +67,9 @@
web: 'var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */',
},
},
'org.primer.overrides': {
dark: '{base.color.neutral.7}',
},
},
},
inverse: {
Expand All @@ -65,6 +81,9 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
dark: '{base.color.neutral.13}',
},
},
},
white: {
Expand All @@ -76,6 +95,9 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
dark: '{base.color.neutral.13}',
},
},
},
black: {
Expand All @@ -87,6 +109,9 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
dark: '{base.color.neutral.0}',
},
},
},
disabled: {
Expand All @@ -98,6 +123,11 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
dark: '{base.color.neutral.3}',
"light-high-contrast": "{base.color.neutral.4}",
"dark-high-contrast": "{base.color.neutral.4}",
},
},
},
transparent: {
Expand All @@ -124,8 +154,19 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
light: {
$value: '{base.color.neutral.8}',
alpha: 0.12,
},
dark: {
$value: '{base.color.neutral.8}',
alpha: 0.2,
},
"light-high-contrast": "{base.color.neutral.4}",
"dark-high-contrast": "{base.color.neutral.3}",
},
},
alpha: 0.12,
},
emphasis: {
$value: '{base.color.neutral.9}',
Expand All @@ -136,6 +177,11 @@
group: 'semantic',
scopes: ['bgColor'],
},
'org.primer.overrides': {
dark: '{base.color.neutral.8}',
"light-high-contrast": "{base.color.neutral.10}",
"dark-high-contrast": "{base.color.neutral.7}",
},
},
},
},
Expand All @@ -152,6 +198,12 @@
web: 'var(--bgColor-accent-muted) /* utility class: .color-bg-accent */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.blue.4}',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -166,6 +218,10 @@
web: 'var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */',
},
},
'org.primer.overrides': {
dark: '{base.color.blue.5}',
"dark-high-contrast": "{base.color.blue.9}",
},
},
},
},
Expand All @@ -182,6 +238,23 @@
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.green.4}',
alpha: 0.15,
},
'light-tritanopia': '{base.color.blue.0}',
'dark-tritanopia': {
$value: '{base.color.blue.4}',
alpha: 0.15,
},
'light-protanopia-deuteranopia': '{base.color.blue.0}',
'dark-protanopia-deuteranopia': {
$value: '{base.color.blue.4}',
alpha: 0.2,
},

},
},
},
emphasis: {
Expand All @@ -196,6 +269,15 @@
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
},
},
'org.primer.overrides': {
dark: '{base.color.green.5}',
'light-tritanopia': '{base.color.blue.5}',
'dark-tritanopia': '{base.color.blue.5}',
'light-protanopia-deuteranopia': '{base.color.blue.5}',
'dark-protanopia-deuteranopia': '{base.color.blue.5}',
"light-high-contrast": "{base.color.green.5}",
"dark-high-contrast": "{base.color.green.9}",
},
},
},
},
Expand All @@ -212,6 +294,13 @@
web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
},
},
'org.primer.overrides': {
'light-tritanopia': '{base.color.red.0}',
'dark-tritanopia': {
$value: '{base.color.red.4}',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -226,6 +315,10 @@
web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
},
},
'org.primer.overrides': {
'light-tritanopia': '{base.color.red.5}',
'dark-tritanopia': '{base.color.red.5}',
},
},
},
},
Expand All @@ -242,6 +335,12 @@
web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.yellow.4}',
alpha: 0.15,
},
},
},
},
emphasis: {
Expand All @@ -256,6 +355,9 @@
web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
},
},
'org.primer.overrides': {
"dark-high-contrast": "{base.color.yellow.9}",
},
},
},
},
Expand All @@ -272,6 +374,17 @@
web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.orange.4}',
alpha: 0.1,
},
'light-tritanopia': '{base.color.red.0}',
'dark-tritanopia': {
$value: '{base.color.red.4}',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -286,6 +399,11 @@
web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
},
},
'org.primer.overrides': {
'light-tritanopia': '{base.color.red.5}',
'dark-tritanopia': '{base.color.red.5}',
"dark-high-contrast": "{base.color.orange.9}",
},
},
},
},
Expand All @@ -302,6 +420,17 @@
web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.red.4}',
alpha: 0.1,
},
'light-protanopia-deuteranopia': '{base.color.orange.0}',
'dark-protanopia-deuteranopia': {
$value: '{base.color.orange.4}',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -316,6 +445,11 @@
web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
},
},
'org.primer.overrides': {
'light-protanopia-deuteranopia': '{base.color.orange.5}',
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
"dark-high-contrast": "{base.color.red.9}",
},
},
},
},
Expand All @@ -332,6 +466,18 @@
web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
},
},
'org.primer.overrides': {
'light-tritanopia': '{bgColor.neutral.muted}',
'dark-tritanopia': {
$value: '{bgColor.neutral.muted}',
alpha: 0.1,
},
'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
'dark-protanopia-deuteranopia': {
$value: '{bgColor.neutral.muted}',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -346,6 +492,12 @@
web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
},
},
'org.primer.overrides': {
'light-tritanopia': '{bgColor.neutral.emphasis}',
'dark-tritanopia': '{bgColor.neutral.emphasis}',
'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
},
},
},
},
Expand All @@ -362,6 +514,12 @@
web: 'var(--bgColor-done-muted) /* utility class: .color-bg-done */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.purple.4}',
alpha: 0.15,
},
},
},
},
emphasis: {
Expand All @@ -376,6 +534,9 @@
web: 'var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */',
},
},
'org.primer.overrides': {
"dark-high-contrast": "{base.color.purple.9}",
},
},
},
},
Expand Down Expand Up @@ -422,6 +583,16 @@
web: 'var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */',
},
},
'org.primer.overrides': {
dark: {
$value: '{base.color.pink.4}',
alpha: 0.1,
},
'dark-tritanopia': {
$value: '#db61a2',
alpha: 0.1,
},
},
},
},
emphasis: {
Expand All @@ -436,6 +607,9 @@
web: 'var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */',
},
},
'org.primer.overrides': {
"dark-high-contrast": "{base.color.pink.9}",
},
},
},
},
Expand Down
Loading

0 comments on commit 20b3dda

Please sign in to comment.