diff --git a/.changeset/quick-camels-promise.md b/.changeset/quick-camels-promise.md new file mode 100644 index 000000000..848b32775 --- /dev/null +++ b/.changeset/quick-camels-promise.md @@ -0,0 +1,8 @@ +--- +"@primer/primitives": patch +--- + +- Minor changes to prepare for adding more borders to high contrast themes +- Adds tooltip pattern to allow for an inverse style in dark high contrast + + diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-onInverse-linux.png new file mode 100644 index 000000000..c891d74a3 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-bgColor-linux.png new file mode 100644 index 000000000..a90e0cb8d Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-fgColor-linux.png new file mode 100644 index 000000000..43f24b870 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-fgColor-onInverse-linux.png new file mode 100644 index 000000000..c891d74a3 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-controlTrack-borderColor-rest-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-controlTrack-borderColor-rest-linux.png index 190b0a621..42c2f04c0 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-controlTrack-borderColor-rest-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-controlTrack-borderColor-rest-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-fgColor-onInverse-linux.png new file mode 100644 index 000000000..8b3404f1b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-bgColor-linux.png new file mode 100644 index 000000000..10f7d8529 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-fgColor-linux.png new file mode 100644 index 000000000..8b3404f1b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-bgColor-linux.png new file mode 100644 index 000000000..a90e0cb8d Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-fgColor-linux.png new file mode 100644 index 000000000..43f24b870 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-fgColor-onInverse-linux.png new file mode 100644 index 000000000..c891d74a3 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-bgColor-linux.png new file mode 100644 index 000000000..a90e0cb8d Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-fgColor-linux.png new file mode 100644 index 000000000..43f24b870 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-onInverse-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-bgColor-linux.png new file mode 100644 index 000000000..842dfb3f5 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-fgColor-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-fgColor-onInverse-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-controlTrack-borderColor-rest-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-controlTrack-borderColor-rest-linux.png index 924f8dc08..2671828d6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-controlTrack-borderColor-rest-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-controlTrack-borderColor-rest-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-fgColor-onInverse-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-bgColor-linux.png new file mode 100644 index 000000000..3a21e2a39 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-fgColor-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-bgColor-linux.png new file mode 100644 index 000000000..842dfb3f5 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-fgColor-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tooltip-fgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-fgColor-onInverse-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-fgColor-onInverse-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-fgColor-onInverse-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-bgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-bgColor-linux.png new file mode 100644 index 000000000..842dfb3f5 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-bgColor-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-fgColor-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-fgColor-linux.png new file mode 100644 index 000000000..7bc68449b Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-tooltip-fgColor-linux.png differ diff --git a/blob-report/report.zip b/blob-report/report.zip index 4e6daf0d8..ca94215ae 100644 Binary files a/blob-report/report.zip and b/blob-report/report.zip differ diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx index e2539cd79..5e75d782d 100644 --- a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx +++ b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx @@ -725,3 +725,56 @@ export const Selection = () => { ) } + +export const Tooltip = () => { + const data = getTokensByName(colorTokens, 'tooltip').map(token => { + return { + id: token.name, + ...token, + } + }) + return ( + +

+ Tooltip +

+ { + return ( + + ) + }, + }, + { + header: 'Token', + field: 'name', + rowHeader: true, + renderCell: row => { + return + }, + }, + { + header: 'Output value', + field: 'value', + rowHeader: true, + renderCell: row => { + return

{row.value}

+ }, + }, + ]} + /> +
+ ) +} 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 399e0f75c..862f00729 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -362,6 +362,12 @@ $type: 'color', }, }, + borderColor: { + rest: { + $value: '{borderColor.emphasis}', + $type: 'color', + }, + }, }, button: { primary: { @@ -902,4 +908,14 @@ }, }, }, + tooltip: { + bgColor: { + $value: '{bgColor.inverse}', + $type: 'color', + }, + fgColor: { + $value: '{fgColor.onInverse}', + $type: 'color', + }, + }, } diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index f3041d173..df37215db 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -3073,4 +3073,30 @@ }, }, }, + tooltip: { + bgColor: { + $value: '{bgColor.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + fgColor: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index cd247e75a..3ca669277 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -53,6 +53,18 @@ }, }, }, + onInverse: { + $value: '{base.color.black}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + group: 'semantic', + scopes: ['fgColor'], + }, + }, + }, white: { $value: '{base.color.white}', $type: 'color', diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 index 8fbcb90f2..6b70ebce8 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -326,6 +326,12 @@ $type: 'color', }, }, + borderColor: { + rest: { + $value: '{borderColor.emphasis}', + $type: 'color', + }, + }, }, button: { default: { diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 22f0b6b57..a69294389 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -3070,4 +3070,30 @@ }, }, }, + tooltip: { + bgColor: { + $value: '{bgColor.emphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'component', + scopes: ['bgColor'], + }, + }, + }, + fgColor: { + $value: '{fgColor.onEmphasis}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'component', + scopes: ['fgColor'], + }, + }, + }, + }, } diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index c27487669..cdfd67727 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -49,6 +49,18 @@ }, }, }, + onInverse: { + $value: '{base.color.white}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + group: 'semantic', + scopes: ['fgColor'], + }, + }, + }, white: { $value: '{base.color.white}', $type: 'color',