diff --git a/.changeset/thirty-drinks-destroy.md b/.changeset/thirty-drinks-destroy.md new file mode 100644 index 000000000..7ccdece56 --- /dev/null +++ b/.changeset/thirty-drinks-destroy.md @@ -0,0 +1,5 @@ +--- +"@primer/primitives": patch +--- + +Danger button contrast fix + tests diff --git a/blob-report/report.zip b/blob-report/report.zip index 228c1404c..44194d2de 100644 Binary files a/blob-report/report.zip and b/blob-report/report.zip differ diff --git a/scripts/color-contrast.config.ts b/scripts/color-contrast.config.ts index 18b898304..bd0dceb60 100644 --- a/scripts/color-contrast.config.ts +++ b/scripts/color-contrast.config.ts @@ -51,6 +51,12 @@ const baseRequirements: ContrastRequirementBlueprint[] = [ ['contrast.text', 'button-invisible-fgColor-hover', 'button-invisible-bgColor-hover'], ['contrast.text', 'button-invisible-iconColor-rest', 'bgColor-muted'], ['contrast.text', 'button-invisible-iconColor-hover', 'button-invisible-bgColor-hover'], + ['contrast.text', 'button-danger-fgColor-rest', 'button-danger-bgColor-rest'], + ['contrast.text', 'button-danger-fgColor-hover', 'button-danger-bgColor-hover'], + ['contrast.text', 'button-danger-fgColor-active', 'button-danger-bgColor-active'], + ['contrast.text', 'button-danger-iconColor-rest', 'button-danger-bgColor-rest'], + ['contrast.text', 'button-danger-iconColor-hover', 'button-danger-bgColor-hover'], + ['contrast.text', 'button-primary-fgColor-rest', 'button-primary-bgColor-rest'], // default text on role bg // TODO: contrast does not work with semi-transparent colors ['contrast.text', 'fgColor-default', 'bgColor-neutral-muted'], diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 index f967c23f0..a9ab23137 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -436,7 +436,7 @@ danger: { fgColor: { rest: { - $value: '{base.color.red.3}', + $value: '{base.color.red.2}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -468,11 +468,7 @@ active: { $value: '{bgColor.danger.emphasis}', $type: 'color', - alpha: 1, - mix: { - color: '{base.color.red.7}', - weight: 0.4, - }, + mix: null }, }, }, diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 0fdc18f19..849604c20 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -1359,7 +1359,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{base.color.red.4}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1369,6 +1369,10 @@ scopes: ['fgColor'], }, }, + mix: { + color: '{base.color.red.3}', + weight: 0.3, + }, }, hover: { $value: '{base.color.neutral.13}', @@ -1410,7 +1414,7 @@ }, iconColor: { rest: { - $value: '{fgColor.danger}', + $value: '{button.danger.fgColor.rest}', $type: 'color', $extensions: { 'org.primer.figma': {