diff --git a/.changeset/clean-coats-lie.md b/.changeset/clean-coats-lie.md new file mode 100644 index 00000000000..d30cec2f0a8 --- /dev/null +++ b/.changeset/clean-coats-lie.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix `TreeViewItem` folder icon color in legacy fallback theme + update VRT diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png index 12ae1ab1f97..87ab8e84834 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png index 81054b17e8c..7325d273498 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png index 8f3cc309dbc..998d0128eb1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png index dc81c874410..47ad814b608 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png index 12ae1ab1f97..87ab8e84834 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png index 2b309d634e2..ee2eef2252d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png index 86ba24fecf0..a14a3ffac85 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png index 4a6a6bdd442..97584376003 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png index 2b309d634e2..ee2eef2252d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png index a9945c7c97a..246f217ec57 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png index 93984a22924..915db6bcc11 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png index 60c64608b2e..a7ddc08bf61 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png index 087d3050920..c825c2e9d53 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png index a9945c7c97a..246f217ec57 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png index d2755f7b7f1..d84bd7949a8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png index 7bf145d7900..30d7d69c224 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png index d2755f7b7f1..d84bd7949a8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png index d2755f7b7f1..d84bd7949a8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png index 0cd4881456d..9ae47128ca6 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png index 6826d686203..7f37f990bbc 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png index be11d72a4bd..aeb23275d62 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png index f25f67fd3ce..e6e6adcccb9 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png index 80f4f0ad69b..6c45e7b3701 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png index c308d50dbe3..cbbb07b750e 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png index d1b441d80e1..741b2f22541 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png index a9cc60d52b3..ea44200b078 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png index febee9c17e5..1ee261efe3f 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png differ diff --git a/packages/react/src/legacy-theme/ts/colors/dark.ts b/packages/react/src/legacy-theme/ts/colors/dark.ts index 2feae654b40..f9cf43542fd 100644 --- a/packages/react/src/legacy-theme/ts/colors/dark.ts +++ b/packages/react/src/legacy-theme/ts/colors/dark.ts @@ -425,7 +425,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #848d97))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #848d97))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts b/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts index 140fd2676bb..e94e4d7e1c7 100644 --- a/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts +++ b/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts @@ -427,7 +427,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts b/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts index a686bbac3fd..447b1a659e7 100644 --- a/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts +++ b/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts @@ -426,7 +426,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(144,157,171,0.12)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #768390))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #768390))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts b/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts index 6c320e570e5..2502f50d3f2 100644 --- a/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts +++ b/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts @@ -419,7 +419,7 @@ const colors = { hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #525964))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts b/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts index d7660eb43d8..40b01eea46c 100644 --- a/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts +++ b/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts @@ -426,7 +426,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/light.ts b/packages/react/src/legacy-theme/ts/colors/light.ts index 9c00ef95520..6691f8edc08 100644 --- a/packages/react/src/legacy-theme/ts/colors/light.ts +++ b/packages/react/src/legacy-theme/ts/colors/light.ts @@ -430,7 +430,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts b/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts index cf3af4edf55..18ac1904556 100644 --- a/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts +++ b/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts @@ -430,7 +430,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts b/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts index 9a25e6ddbe7..05b75de76d4 100644 --- a/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts +++ b/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts @@ -421,7 +421,7 @@ const colors = { hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #ced5dc))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))', }, }, fg: { diff --git a/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts b/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts index 37c6e97075f..18ecad1b5d5 100644 --- a/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts +++ b/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts @@ -430,7 +430,7 @@ const colors = { 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))', }, directory: { - fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', + fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))', }, }, fg: {