From 53f939a117e7f5816d5ec191505c8cde02f63035 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Fri, 28 Jun 2024 13:32:18 +0200 Subject: [PATCH 1/2] simplify contrast --- scripts/color-contrast.config.ts | 606 +++++++----------- .../dark/overrides/dark.high-contrast.json5 | 7 + .../color/dark/primitives-dark.json5 | 6 +- 3 files changed, 240 insertions(+), 379 deletions(-) diff --git a/scripts/color-contrast.config.ts b/scripts/color-contrast.config.ts index 7793ce29c..66b0948ed 100644 --- a/scripts/color-contrast.config.ts +++ b/scripts/color-contrast.config.ts @@ -2,398 +2,252 @@ type Options = { bg: string[] } +type contrastType = 'contrast.text' | 'contrast.border' + +export type ContrastRequirementBlueprint = [ + contrastType | number, // minimumContrast + string, // foregroundColor + string, // backgroundColor + Options?, +] + export type ContrastRequirement = [ number, // minimumContrast string, // foregroundColor string, // backgroundColor Options?, ] + +const contrastRatios = { + default: { + 'contrast.text': 4.5, + 'contrast.border': 3, + }, + highContrast: { + 'contrast.text': 7, + 'contrast.border': 4.5, + }, +} + // basically for all non high contrast modes -const baseRequirements: ContrastRequirement[] = [ +const baseRequirements: ContrastRequirementBlueprint[] = [ // neutral text colors - [4.5, 'fgColor-default', 'bgColor-default'], - [4.5, 'fgColor-muted', 'bgColor-default'], - [4.5, 'fgColor-default', 'bgColor-muted'], - [4.5, 'fgColor-muted', 'bgColor-muted'], - [4.5, 'fgColor-default', 'bgColor-inset'], - [4.5, 'fgColor-muted', 'bgColor-inset'], - [4.5, 'control-fgColor-rest', 'bgColor-default'], - [4.5, 'control-fgColor-rest', 'bgColor-muted'], - [4.5, 'control-fgColor-rest', 'bgColor-inset'], + ['contrast.text', 'fgColor-default', 'bgColor-default'], + ['contrast.text', 'fgColor-muted', 'bgColor-default'], + ['contrast.text', 'fgColor-default', 'bgColor-muted'], + ['contrast.text', 'fgColor-muted', 'bgColor-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-inset'], + ['contrast.text', 'fgColor-muted', 'bgColor-inset'], + ['contrast.text', 'control-fgColor-rest', 'bgColor-default'], + ['contrast.text', 'control-fgColor-rest', 'bgColor-muted'], + ['contrast.text', 'control-fgColor-rest', 'bgColor-inset'], // control colors - [4.5, 'control-fgColor-rest', 'control-bgColor-rest'], - [4.5, 'control-fgColor-placeholder', 'control-bgColor-rest'], - [4.5, 'control-fgColor-rest', 'control-bgColor-active'], - [4.5, 'control-fgColor-rest', 'control-bgColor-hover'], - [4.5, 'control-fgColor-rest', 'control-bgColor-selected'], + ['contrast.text', 'control-fgColor-rest', 'control-bgColor-rest'], + ['contrast.text', 'control-fgColor-placeholder', 'control-bgColor-rest'], + ['contrast.text', 'control-fgColor-rest', 'control-bgColor-active'], + ['contrast.text', 'control-fgColor-rest', 'control-bgColor-hover'], + ['contrast.text', 'control-fgColor-rest', 'control-bgColor-selected'], // default text on role bg // TODO: contrast does not work with semi-transparent colors - [4.5, 'fgColor-default', 'bgColor-neutral-muted'], - [4.5, 'fgColor-default', 'bgColor-accent-muted'], - [4.5, 'fgColor-default', 'bgColor-success-muted'], - [4.5, 'fgColor-default', 'bgColor-open-muted'], - [4.5, 'fgColor-default', 'bgColor-danger-muted'], - [4.5, 'fgColor-default', 'bgColor-closed-muted'], - [4.5, 'fgColor-default', 'bgColor-attention-muted'], - [4.5, 'fgColor-default', 'bgColor-severe-muted'], - [4.5, 'fgColor-default', 'bgColor-done-muted'], - [4.5, 'fgColor-default', 'bgColor-sponsors-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-neutral-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-accent-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-success-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-open-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-danger-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-closed-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-attention-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-severe-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-done-muted'], + ['contrast.text', 'fgColor-default', 'bgColor-sponsors-muted'], // role - [4.5, 'fgColor-neutral', 'bgColor-default'], - [4.5, 'fgColor-neutral', 'bgColor-muted'], - [4.5, 'fgColor-neutral', 'bgColor-inset'], - [4.5, 'fgColor-accent', 'bgColor-default'], - [4.5, 'fgColor-accent', 'bgColor-muted'], - [4.5, 'fgColor-accent', 'bgColor-inset'], - [4.5, 'fgColor-success', 'bgColor-default'], - [4.5, 'fgColor-success', 'bgColor-muted'], - [4.5, 'fgColor-success', 'bgColor-inset'], - [4.5, 'fgColor-open', 'bgColor-default'], - [4.5, 'fgColor-open', 'bgColor-muted'], - [4.5, 'fgColor-open', 'bgColor-inset'], - [4.5, 'fgColor-danger', 'bgColor-default'], - [4.5, 'fgColor-danger', 'bgColor-muted'], - [4.5, 'fgColor-danger', 'bgColor-inset'], - [4.5, 'fgColor-closed', 'bgColor-default'], - [4.5, 'fgColor-closed', 'bgColor-muted'], - [4.5, 'fgColor-closed', 'bgColor-inset'], - [4.5, 'fgColor-attention', 'bgColor-default'], - [4.5, 'fgColor-attention', 'bgColor-muted'], - [4.5, 'fgColor-attention', 'bgColor-inset'], - [4.5, 'fgColor-severe', 'bgColor-default'], - [4.5, 'fgColor-severe', 'bgColor-muted'], - [4.5, 'fgColor-severe', 'bgColor-inset'], - [4.5, 'fgColor-done', 'bgColor-default'], - [4.5, 'fgColor-done', 'bgColor-muted'], - [4.5, 'fgColor-done', 'bgColor-inset'], - [4.5, 'fgColor-upsell', 'bgColor-default'], - [4.5, 'fgColor-upsell', 'bgColor-muted'], - [4.5, 'fgColor-upsell', 'bgColor-inset'], - [4.5, 'fgColor-sponsors', 'bgColor-default'], - [4.5, 'fgColor-sponsors', 'bgColor-muted'], - [4.5, 'fgColor-sponsors', 'bgColor-inset'], + ['contrast.text', 'fgColor-neutral', 'bgColor-default'], + ['contrast.text', 'fgColor-neutral', 'bgColor-muted'], + ['contrast.text', 'fgColor-neutral', 'bgColor-inset'], + ['contrast.text', 'fgColor-accent', 'bgColor-default'], + ['contrast.text', 'fgColor-accent', 'bgColor-muted'], + ['contrast.text', 'fgColor-accent', 'bgColor-inset'], + ['contrast.text', 'fgColor-success', 'bgColor-default'], + ['contrast.text', 'fgColor-success', 'bgColor-muted'], + ['contrast.text', 'fgColor-success', 'bgColor-inset'], + ['contrast.text', 'fgColor-open', 'bgColor-default'], + ['contrast.text', 'fgColor-open', 'bgColor-muted'], + ['contrast.text', 'fgColor-open', 'bgColor-inset'], + ['contrast.text', 'fgColor-danger', 'bgColor-default'], + ['contrast.text', 'fgColor-danger', 'bgColor-muted'], + ['contrast.text', 'fgColor-danger', 'bgColor-inset'], + ['contrast.text', 'fgColor-closed', 'bgColor-default'], + ['contrast.text', 'fgColor-closed', 'bgColor-muted'], + ['contrast.text', 'fgColor-closed', 'bgColor-inset'], + ['contrast.text', 'fgColor-attention', 'bgColor-default'], + ['contrast.text', 'fgColor-attention', 'bgColor-muted'], + ['contrast.text', 'fgColor-attention', 'bgColor-inset'], + ['contrast.text', 'fgColor-severe', 'bgColor-default'], + ['contrast.text', 'fgColor-severe', 'bgColor-muted'], + ['contrast.text', 'fgColor-severe', 'bgColor-inset'], + ['contrast.text', 'fgColor-done', 'bgColor-default'], + ['contrast.text', 'fgColor-done', 'bgColor-muted'], + ['contrast.text', 'fgColor-done', 'bgColor-inset'], + ['contrast.text', 'fgColor-upsell', 'bgColor-default'], + ['contrast.text', 'fgColor-upsell', 'bgColor-muted'], + ['contrast.text', 'fgColor-upsell', 'bgColor-inset'], + ['contrast.text', 'fgColor-sponsors', 'bgColor-default'], + ['contrast.text', 'fgColor-sponsors', 'bgColor-muted'], + ['contrast.text', 'fgColor-sponsors', 'bgColor-inset'], // role text on role bg - [4.5, 'fgColor-neutral', 'bgColor-neutral-muted'], - [4.5, 'fgColor-accent', 'bgColor-accent-muted'], - [4.5, 'fgColor-success', 'bgColor-success-muted'], - [4.5, 'fgColor-open', 'bgColor-open-muted'], - [4.5, 'fgColor-danger', 'bgColor-danger-muted'], - [4.5, 'fgColor-closed', 'bgColor-closed-muted'], - [4.5, 'fgColor-attention', 'bgColor-attention-muted'], - [4.5, 'fgColor-severe', 'bgColor-severe-muted'], - [4.5, 'fgColor-done', 'bgColor-done-muted'], - [4.5, 'fgColor-upsell', 'bgColor-upsell-muted'], - [4.5, 'fgColor-sponsors', 'bgColor-sponsors-muted'], + ['contrast.text', 'fgColor-neutral', 'bgColor-neutral-muted'], + ['contrast.text', 'fgColor-accent', 'bgColor-accent-muted'], + ['contrast.text', 'fgColor-success', 'bgColor-success-muted'], + ['contrast.text', 'fgColor-open', 'bgColor-open-muted'], + ['contrast.text', 'fgColor-danger', 'bgColor-danger-muted'], + ['contrast.text', 'fgColor-closed', 'bgColor-closed-muted'], + ['contrast.text', 'fgColor-attention', 'bgColor-attention-muted'], + ['contrast.text', 'fgColor-severe', 'bgColor-severe-muted'], + ['contrast.text', 'fgColor-done', 'bgColor-done-muted'], + ['contrast.text', 'fgColor-upsell', 'bgColor-upsell-muted'], + ['contrast.text', 'fgColor-sponsors', 'bgColor-sponsors-muted'], // fgColor-onEmphasis - [4.5, 'fgColor-onEmphasis', 'bgColor-neutral-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-accent-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-success-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-open-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-danger-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-closed-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-attention-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-severe-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-done-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-upsell-emphasis'], - [4.5, 'fgColor-onEmphasis', 'bgColor-sponsors-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-neutral-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-accent-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-success-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-open-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-danger-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-closed-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-attention-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-severe-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-done-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-upsell-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'bgColor-sponsors-emphasis'], // borders - [3, 'control-borderColor-emphasis', 'bgColor-default'], - [3, 'control-borderColor-emphasis', 'bgColor-muted'], + ['contrast.border', 'control-borderColor-emphasis', 'bgColor-default'], + ['contrast.border', 'control-borderColor-emphasis', 'bgColor-muted'], +] + +const displayColorRequirements: ContrastRequirementBlueprint[] = [ // TODO: there are no specific border colors for roles // display colors - [4.5, 'display-gray-fgColor', 'display-gray-bgColor-muted'], - [4.5, 'display-indigo-fgColor', 'display-indigo-bgColor-muted'], - [4.5, 'display-blue-fgColor', 'display-blue-bgColor-muted'], - [4.5, 'display-cyan-fgColor', 'display-cyan-bgColor-muted'], - [4.5, 'display-teal-fgColor', 'display-teal-bgColor-muted'], - [4.5, 'display-pine-fgColor', 'display-pine-bgColor-muted'], - [4.5, 'display-green-fgColor', 'display-green-bgColor-muted'], - [4.5, 'display-lime-fgColor', 'display-lime-bgColor-muted'], - [4.5, 'display-olive-fgColor', 'display-olive-bgColor-muted'], - [4.5, 'display-lemon-fgColor', 'display-lemon-bgColor-muted'], - [4.5, 'display-yellow-fgColor', 'display-yellow-bgColor-muted'], - [4.5, 'display-orange-fgColor', 'display-orange-bgColor-muted'], - [4.5, 'display-red-fgColor', 'display-red-bgColor-muted'], - [4.5, 'display-coral-fgColor', 'display-coral-bgColor-muted'], - [4.5, 'display-pink-fgColor', 'display-pink-bgColor-muted'], - [4.5, 'display-plum-fgColor', 'display-plum-bgColor-muted'], - [4.5, 'display-purple-fgColor', 'display-purple-bgColor-muted'], - [4.5, 'display-brown-fgColor', 'display-brown-bgColor-muted'], - [4.5, 'display-auburn-fgColor', 'display-auburn-bgColor-muted'], + ['contrast.text', 'display-gray-fgColor', 'display-gray-bgColor-muted'], + ['contrast.text', 'display-indigo-fgColor', 'display-indigo-bgColor-muted'], + ['contrast.text', 'display-blue-fgColor', 'display-blue-bgColor-muted'], + ['contrast.text', 'display-cyan-fgColor', 'display-cyan-bgColor-muted'], + ['contrast.text', 'display-teal-fgColor', 'display-teal-bgColor-muted'], + ['contrast.text', 'display-pine-fgColor', 'display-pine-bgColor-muted'], + ['contrast.text', 'display-green-fgColor', 'display-green-bgColor-muted'], + ['contrast.text', 'display-lime-fgColor', 'display-lime-bgColor-muted'], + ['contrast.text', 'display-olive-fgColor', 'display-olive-bgColor-muted'], + ['contrast.text', 'display-lemon-fgColor', 'display-lemon-bgColor-muted'], + ['contrast.text', 'display-yellow-fgColor', 'display-yellow-bgColor-muted'], + ['contrast.text', 'display-orange-fgColor', 'display-orange-bgColor-muted'], + ['contrast.text', 'display-red-fgColor', 'display-red-bgColor-muted'], + ['contrast.text', 'display-coral-fgColor', 'display-coral-bgColor-muted'], + ['contrast.text', 'display-pink-fgColor', 'display-pink-bgColor-muted'], + ['contrast.text', 'display-plum-fgColor', 'display-plum-bgColor-muted'], + ['contrast.text', 'display-purple-fgColor', 'display-purple-bgColor-muted'], + ['contrast.text', 'display-brown-fgColor', 'display-brown-bgColor-muted'], + ['contrast.text', 'display-auburn-fgColor', 'display-auburn-bgColor-muted'], // - [4.5, 'fgColor-onEmphasis', 'display-gray-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-indigo-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-blue-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-cyan-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-teal-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-pine-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-green-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-lime-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-olive-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-lemon-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-yellow-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-orange-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-red-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-coral-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-pink-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-plum-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-purple-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-brown-bgColor-emphasis'], - [4.5, 'fgColor-onEmphasis', 'display-auburn-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-gray-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-indigo-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-blue-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-cyan-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-teal-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-pine-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-green-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-lime-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-olive-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-lemon-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-yellow-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-orange-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-red-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-coral-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-pink-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-plum-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-purple-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-brown-bgColor-emphasis'], + ['contrast.text', 'fgColor-onEmphasis', 'display-auburn-bgColor-emphasis'], // - [3, 'bgColor-default', 'display-gray-borderColor-emphasis'], - [3, 'bgColor-default', 'display-indigo-borderColor-emphasis'], - [3, 'bgColor-default', 'display-blue-borderColor-emphasis'], - [3, 'bgColor-default', 'display-cyan-borderColor-emphasis'], - [3, 'bgColor-default', 'display-teal-borderColor-emphasis'], - [3, 'bgColor-default', 'display-pine-borderColor-emphasis'], - [3, 'bgColor-default', 'display-green-borderColor-emphasis'], - [3, 'bgColor-default', 'display-lime-borderColor-emphasis'], - [3, 'bgColor-default', 'display-olive-borderColor-emphasis'], - [3, 'bgColor-default', 'display-lemon-borderColor-emphasis'], - [3, 'bgColor-default', 'display-yellow-borderColor-emphasis'], - [3, 'bgColor-default', 'display-orange-borderColor-emphasis'], - [3, 'bgColor-default', 'display-red-borderColor-emphasis'], - [3, 'bgColor-default', 'display-coral-borderColor-emphasis'], - [3, 'bgColor-default', 'display-pink-borderColor-emphasis'], - [3, 'bgColor-default', 'display-plum-borderColor-emphasis'], - [3, 'bgColor-default', 'display-purple-borderColor-emphasis'], - [3, 'bgColor-default', 'display-brown-borderColor-emphasis'], - [3, 'bgColor-default', 'display-auburn-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-gray-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-indigo-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-blue-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-cyan-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-teal-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-pine-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-green-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-lime-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-olive-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-lemon-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-yellow-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-orange-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-red-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-coral-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-pink-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-plum-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-purple-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-brown-borderColor-emphasis'], + ['contrast.border', 'bgColor-default', 'display-auburn-borderColor-emphasis'], // - [3, 'bgColor-muted', 'display-gray-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-indigo-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-blue-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-cyan-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-teal-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-pine-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-green-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-lime-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-olive-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-lemon-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-yellow-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-orange-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-red-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-coral-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-pink-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-plum-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-purple-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-brown-borderColor-emphasis'], - [3, 'bgColor-muted', 'display-auburn-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-gray-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-indigo-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-blue-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-cyan-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-teal-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-pine-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-green-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-lime-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-olive-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-lemon-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-yellow-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-orange-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-red-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-coral-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-pink-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-plum-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-purple-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-brown-borderColor-emphasis'], + ['contrast.border', 'bgColor-muted', 'display-auburn-borderColor-emphasis'], // - [3, 'display-gray-borderColor-emphasis', 'display-gray-bgColor-muted'], - [3, 'display-indigo-borderColor-emphasis', 'display-indigo-bgColor-muted'], - [3, 'display-blue-borderColor-emphasis', 'display-blue-bgColor-muted'], - [3, 'display-cyan-borderColor-emphasis', 'display-cyan-bgColor-muted'], - [3, 'display-teal-borderColor-emphasis', 'display-teal-bgColor-muted'], - [3, 'display-pine-borderColor-emphasis', 'display-pine-bgColor-muted'], - [3, 'display-green-borderColor-emphasis', 'display-green-bgColor-muted'], - [3, 'display-lime-borderColor-emphasis', 'display-lime-bgColor-muted'], - [3, 'display-olive-borderColor-emphasis', 'display-olive-bgColor-muted'], - [3, 'display-lemon-borderColor-emphasis', 'display-lemon-bgColor-muted'], - [3, 'display-yellow-borderColor-emphasis', 'display-yellow-bgColor-muted'], - [3, 'display-orange-borderColor-emphasis', 'display-orange-bgColor-muted'], - [3, 'display-red-borderColor-emphasis', 'display-red-bgColor-muted'], - [3, 'display-coral-borderColor-emphasis', 'display-coral-bgColor-muted'], - [3, 'display-pink-borderColor-emphasis', 'display-pink-bgColor-muted'], - [3, 'display-plum-borderColor-emphasis', 'display-plum-bgColor-muted'], - [3, 'display-purple-borderColor-emphasis', 'display-purple-bgColor-muted'], - [3, 'display-brown-borderColor-emphasis', 'display-brown-bgColor-muted'], - [3, 'display-auburn-borderColor-emphasis', 'display-auburn-bgColor-muted'], + ['contrast.border', 'display-gray-borderColor-emphasis', 'display-gray-bgColor-muted'], + ['contrast.border', 'display-indigo-borderColor-emphasis', 'display-indigo-bgColor-muted'], + ['contrast.border', 'display-blue-borderColor-emphasis', 'display-blue-bgColor-muted'], + ['contrast.border', 'display-cyan-borderColor-emphasis', 'display-cyan-bgColor-muted'], + ['contrast.border', 'display-teal-borderColor-emphasis', 'display-teal-bgColor-muted'], + ['contrast.border', 'display-pine-borderColor-emphasis', 'display-pine-bgColor-muted'], + ['contrast.border', 'display-green-borderColor-emphasis', 'display-green-bgColor-muted'], + ['contrast.border', 'display-lime-borderColor-emphasis', 'display-lime-bgColor-muted'], + ['contrast.border', 'display-olive-borderColor-emphasis', 'display-olive-bgColor-muted'], + ['contrast.border', 'display-lemon-borderColor-emphasis', 'display-lemon-bgColor-muted'], + ['contrast.border', 'display-yellow-borderColor-emphasis', 'display-yellow-bgColor-muted'], + ['contrast.border', 'display-orange-borderColor-emphasis', 'display-orange-bgColor-muted'], + ['contrast.border', 'display-red-borderColor-emphasis', 'display-red-bgColor-muted'], + ['contrast.border', 'display-coral-borderColor-emphasis', 'display-coral-bgColor-muted'], + ['contrast.border', 'display-pink-borderColor-emphasis', 'display-pink-bgColor-muted'], + ['contrast.border', 'display-plum-borderColor-emphasis', 'display-plum-bgColor-muted'], + ['contrast.border', 'display-purple-borderColor-emphasis', 'display-purple-bgColor-muted'], + ['contrast.border', 'display-brown-borderColor-emphasis', 'display-brown-bgColor-muted'], + ['contrast.border', 'display-auburn-borderColor-emphasis', 'display-auburn-bgColor-muted'], ] -const highContrast: ContrastRequirement[] = [ - // neutral text colors - [7, 'fgColor-default', 'bgColor-default'], - [7, 'fgColor-muted', 'bgColor-default'], - [7, 'fgColor-default', 'bgColor-muted'], - [7, 'fgColor-muted', 'bgColor-muted'], - [7, 'fgColor-default', 'bgColor-inset'], - [7, 'fgColor-muted', 'bgColor-inset'], - [7, 'control-fgColor-rest', 'bgColor-default'], - [7, 'control-fgColor-rest', 'bgColor-muted'], - [7, 'control-fgColor-rest', 'bgColor-inset'], - // control colors - [7, 'control-fgColor-rest', 'control-bgColor-rest'], - [7, 'control-fgColor-placeholder', 'control-bgColor-rest'], - [7, 'control-fgColor-rest', 'control-bgColor-active'], - [7, 'control-fgColor-rest', 'control-bgColor-selected'], - [7, 'control-fgColor-rest', 'control-bgColor-hover'], - // default text on role bg - // TODO: contrast does not work with semi-transparent colors - [7, 'fgColor-default', 'bgColor-neutral-muted'], - [7, 'fgColor-default', 'bgColor-accent-muted'], - [7, 'fgColor-default', 'bgColor-success-muted'], - [7, 'fgColor-default', 'bgColor-open-muted'], - [7, 'fgColor-default', 'bgColor-danger-muted'], - [7, 'fgColor-default', 'bgColor-closed-muted'], - [7, 'fgColor-default', 'bgColor-attention-muted'], - [7, 'fgColor-default', 'bgColor-severe-muted'], - [7, 'fgColor-default', 'bgColor-done-muted'], - [7, 'fgColor-default', 'bgColor-upsell-muted'], - [7, 'fgColor-default', 'bgColor-sponsors-muted'], - // role - [7, 'fgColor-neutral', 'bgColor-default'], - [7, 'fgColor-neutral', 'bgColor-muted'], - [7, 'fgColor-neutral', 'bgColor-inset'], - [7, 'fgColor-accent', 'bgColor-default'], - [7, 'fgColor-accent', 'bgColor-muted'], - [7, 'fgColor-accent', 'bgColor-inset'], - [7, 'fgColor-success', 'bgColor-default'], - [7, 'fgColor-success', 'bgColor-muted'], - [7, 'fgColor-success', 'bgColor-inset'], - [7, 'fgColor-open', 'bgColor-default'], - [7, 'fgColor-open', 'bgColor-muted'], - [7, 'fgColor-open', 'bgColor-inset'], - [7, 'fgColor-danger', 'bgColor-default'], - [7, 'fgColor-danger', 'bgColor-muted'], - [7, 'fgColor-danger', 'bgColor-inset'], - [7, 'fgColor-closed', 'bgColor-default'], - [7, 'fgColor-closed', 'bgColor-muted'], - [7, 'fgColor-closed', 'bgColor-inset'], - [7, 'fgColor-attention', 'bgColor-default'], - [7, 'fgColor-attention', 'bgColor-muted'], - [7, 'fgColor-attention', 'bgColor-inset'], - [7, 'fgColor-severe', 'bgColor-default'], - [7, 'fgColor-severe', 'bgColor-muted'], - [7, 'fgColor-severe', 'bgColor-inset'], - [7, 'fgColor-done', 'bgColor-default'], - [7, 'fgColor-done', 'bgColor-muted'], - [7, 'fgColor-done', 'bgColor-inset'], - [7, 'fgColor-upsell', 'bgColor-default'], - [7, 'fgColor-upsell', 'bgColor-muted'], - [7, 'fgColor-upsell', 'bgColor-inset'], - [7, 'fgColor-sponsors', 'bgColor-default'], - [7, 'fgColor-sponsors', 'bgColor-muted'], - [7, 'fgColor-sponsors', 'bgColor-inset'], - // role text on role bg - [7, 'fgColor-neutral', 'bgColor-neutral-muted'], - [7, 'fgColor-accent', 'bgColor-accent-muted'], - [7, 'fgColor-success', 'bgColor-success-muted'], - [7, 'fgColor-open', 'bgColor-open-muted'], - [7, 'fgColor-danger', 'bgColor-danger-muted'], - [7, 'fgColor-closed', 'bgColor-closed-muted'], - [7, 'fgColor-attention', 'bgColor-attention-muted'], - [7, 'fgColor-severe', 'bgColor-severe-muted'], - [7, 'fgColor-done', 'bgColor-done-muted'], - [7, 'fgColor-upsell', 'bgColor-done-muted'], - [7, 'fgColor-sponsors', 'bgColor-sponsors-muted'], - // fgColor-onEmphasis - [7, 'fgColor-onEmphasis', 'bgColor-neutral-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-accent-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-success-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-open-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-danger-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-closed-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-attention-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-severe-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-done-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-upsell-emphasis'], - [7, 'fgColor-onEmphasis', 'bgColor-sponsors-emphasis'], - // borders - [4.5, 'control-borderColor-emphasis', 'bgColor-default'], - [4.5, 'control-borderColor-emphasis', 'bgColor-muted'], - // display colors - // [7, 'display-gray-fgColor', 'display-gray-bgColor-muted'], - // [7, 'display-indigo-fgColor', 'display-indigo-bgColor-muted'], - // [7, 'display-blue-fgColor', 'display-blue-bgColor-muted'], - // [7, 'display-cyan-fgColor', 'display-cyan-bgColor-muted'], - // [7, 'display-teal-fgColor', 'display-teal-bgColor-muted'], - // [7, 'display-pine-fgColor', 'display-pine-bgColor-muted'], - // [7, 'display-green-fgColor', 'display-green-bgColor-muted'], - // [7, 'display-lime-fgColor', 'display-lime-bgColor-muted'], - // [7, 'display-olive-fgColor', 'display-olive-bgColor-muted'], - // [7, 'display-lemon-fgColor', 'display-lemon-bgColor-muted'], - // [7, 'display-yellow-fgColor', 'display-yellow-bgColor-muted'], - // [7, 'display-orange-fgColor', 'display-orange-bgColor-muted'], - // [7, 'display-red-fgColor', 'display-red-bgColor-muted'], - // [7, 'display-coral-fgColor', 'display-coral-bgColor-muted'], - // [7, 'display-pink-fgColor', 'display-pink-bgColor-muted'], - // [7, 'display-plum-fgColor', 'display-plum-bgColor-muted'], - // [7, 'display-purple-fgColor', 'display-purple-bgColor-muted'], - // [7, 'display-brown-fgColor', 'display-brown-bgColor-muted'], - // [7, 'display-auburn-fgColor', 'display-auburn-bgColor-muted'], - // // - // [7, 'fgColor-onEmphasis', 'display-gray-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-indigo-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-blue-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-cyan-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-teal-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-pine-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-green-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-lime-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-olive-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-lemon-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-yellow-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-orange-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-red-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-coral-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-pink-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-plum-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-purple-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-brown-bgColor-emphasis'], - // [7, 'fgColor-onEmphasis', 'display-auburn-bgColor-emphasis'], - // - // [4.5, 'bgColor-default', 'display-gray-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-indigo-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-blue-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-cyan-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-teal-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-pine-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-green-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-lime-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-olive-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-lemon-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-yellow-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-orange-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-red-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-coral-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-pink-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-plum-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-purple-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-brown-borderColor-emphasis'], - // [4.5, 'bgColor-default', 'display-auburn-borderColor-emphasis'], - // // - // [4.5, 'bgColor-muted', 'display-gray-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-indigo-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-blue-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-cyan-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-teal-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-pine-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-green-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-lime-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-olive-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-lemon-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-yellow-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-orange-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-red-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-coral-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-pink-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-plum-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-purple-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-brown-borderColor-emphasis'], - // [4.5, 'bgColor-muted', 'display-auburn-borderColor-emphasis'], - // // - // [4.5, 'display-gray-borderColor-emphasis', 'display-gray-bgColor-muted'], - // [4.5, 'display-indigo-borderColor-emphasis', 'display-indigo-bgColor-muted'], - // [4.5, 'display-blue-borderColor-emphasis', 'display-blue-bgColor-muted'], - // [4.5, 'display-cyan-borderColor-emphasis', 'display-cyan-bgColor-muted'], - // [4.5, 'display-teal-borderColor-emphasis', 'display-teal-bgColor-muted'], - // [4.5, 'display-pine-borderColor-emphasis', 'display-pine-bgColor-muted'], - // [4.5, 'display-green-borderColor-emphasis', 'display-green-bgColor-muted'], - // [4.5, 'display-lime-borderColor-emphasis', 'display-lime-bgColor-muted'], - // [4.5, 'display-olive-borderColor-emphasis', 'display-olive-bgColor-muted'], - // [4.5, 'display-lemon-borderColor-emphasis', 'display-lemon-bgColor-muted'], - // [4.5, 'display-yellow-borderColor-emphasis', 'display-yellow-bgColor-muted'], - // [4.5, 'display-orange-borderColor-emphasis', 'display-orange-bgColor-muted'], - // [4.5, 'display-red-borderColor-emphasis', 'display-red-bgColor-muted'], - // [4.5, 'display-coral-borderColor-emphasis', 'display-coral-bgColor-muted'], - // [4.5, 'display-pink-borderColor-emphasis', 'display-pink-bgColor-muted'], - // [4.5, 'display-plum-borderColor-emphasis', 'display-plum-bgColor-muted'], - // [4.5, 'display-purple-borderColor-emphasis', 'display-purple-bgColor-muted'], - // [4.5, 'display-brown-borderColor-emphasis', 'display-brown-bgColor-muted'], - // [4.5, 'display-auburn-borderColor-emphasis', 'display-auburn-bgColor-muted'], -] as ContrastRequirement[] +const setContrastRatios = ( + contrast: 'default' | 'highContrast', + requirements: ContrastRequirementBlueprint[], +): ContrastRequirement[] => { + return requirements.map(([contrastType, color1, color2]) => [ + typeof contrastType === 'number' + ? contrastType + : (contrastRatios[contrast][contrastType as contrastType] as number), + color1, + color2, + ]) +} + +const defaultContrast: ContrastRequirement[] = setContrastRatios('default', [ + ...baseRequirements, + ...displayColorRequirements, +]) + +const highContrast: ContrastRequirement[] = setContrastRatios('highContrast', [ + ...baseRequirements, + // add high contrast overwrites or additions +]) export const bgColors: string[] = ['bgColor-default', 'bgColor-muted'] @@ -411,14 +265,14 @@ export type ThemeName = export type ContrastRequirements = {[key in ThemeName]: ContrastRequirement[]} export const contrastRequirements: ContrastRequirements = { // default light mode - light: baseRequirements, + light: defaultContrast, light_high_contrast: highContrast, - light_colorblind: baseRequirements, - light_tritanopia: baseRequirements, + light_colorblind: defaultContrast, + light_tritanopia: defaultContrast, // default dark mode - dark: baseRequirements, - dark_dimmed: baseRequirements, + dark: defaultContrast, + dark_dimmed: defaultContrast, dark_high_contrast: highContrast, - dark_colorblind: baseRequirements, - dark_tritanopia: baseRequirements, + dark_colorblind: defaultContrast, + dark_tritanopia: defaultContrast, } 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 b4d2a01d8..221be5668 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -121,6 +121,13 @@ alpha: 0.09, }, }, + upsell: { + muted: { + $value: '{bgColor.done.muted}', + $type: 'color', + alpha: 0.09, + }, + }, sponsors: { muted: { $value: '{base.color.pink.5}', diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index b45678957..cd247e75a 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -639,7 +639,7 @@ alpha: 0.1, }, emphasis: { - $value: '{base.color.red.5}', + $value: '{bgColor.danger.emphasis}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -689,7 +689,7 @@ }, upsell: { muted: { - $value: '{base.color.purple.4}', + $value: '{bgColor.done.muted}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -705,7 +705,7 @@ alpha: 0.15, }, emphasis: { - $value: '{base.color.purple.5}', + $value: '{bgColor.done.emphasis}', $type: 'color', $extensions: { 'org.primer.figma': { From 4038e7b48f50340bc2009a7a0a3f8408a5faffcf Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Fri, 28 Jun 2024 13:35:27 +0200 Subject: [PATCH 2/2] added changeset --- .changeset/eleven-forks-remember.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eleven-forks-remember.md diff --git a/.changeset/eleven-forks-remember.md b/.changeset/eleven-forks-remember.md new file mode 100644 index 000000000..c71e0df9b --- /dev/null +++ b/.changeset/eleven-forks-remember.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Simplify contrast checker script and bugfix for bgColor.upsell.muted in dark high contrast mode