TreeView folder color #358

mperrotti · 2022-09-29T22:20:09Z

changeset-bot · 2022-09-29T22:20:12Z

🦋 Changeset detected

Latest commit: f9124dd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-09-29T22:20:25Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-10-12 16:54:52.065385362 +0000
+++ dist/scss/colors/_dark.scss	2022-10-12 16:54:30.637588550 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-10-12 16:54:52.077385222 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-10-12 16:54:30.653588360 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-10-12 16:54:52.069385315 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2022-10-12 16:54:30.641588502 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(144,157,171,0.12);
+    --color-tree-view-item-directory-fill: #768390;
     --color-fg-default: #adbac7;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-10-12 16:54:52.073385268 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2022-10-12 16:54:30.645588455 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: #525964;
+    --color-tree-view-item-directory-fill: #f0f3f6;
     --color-fg-default: #f0f3f6;
--- base/dist/scss/colors/_dark_tritanopia.scss	2022-10-12 16:54:52.081385175 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2022-10-12 16:54:30.653588360 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_light.scss	2022-10-12 16:54:52.029385784 +0000
+++ dist/scss/colors/_light.scss	2022-10-12 16:54:30.601588975 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_colorblind.scss	2022-10-12 16:54:52.049385549 +0000
+++ dist/scss/colors/_light_colorblind.scss	2022-10-12 16:54:30.617588786 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_high_contrast.scss	2022-10-12 16:54:52.045385596 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2022-10-12 16:54:30.613588833 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: #ced5dc;
+    --color-tree-view-item-directory-fill: #368cf9;
     --color-fg-default: #0e1116;
--- base/dist/scss/colors/_light_tritanopia.scss	2022-10-12 16:54:52.061385409 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2022-10-12 16:54:30.625588691 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;

github-actions · 2022-09-29T22:21:01Z

🟢 No design token changes found

langermank · 2022-09-29T22:29:11Z

data/colors/vars/component_dark.ts

@@ -209,6 +209,9 @@ export default {
  treeViewItem: {
    chevron: {
      hoverBg: alpha(get('scale.gray.2'), 0.12),
+    },
+    folder: {
+      fill: '#4579CA'


Is there a scale value this can reference?

We currently use fg-muted for dark mode directory icons in dotcom: https://cs.github.com/github/github/blob/e7f27d4cf8902dc3c9e6d8d908f066db54ab4020/app/assets/stylesheets/bundles/global/hx_color-modes.scss?q=org%3Agithub+--color-icon-directory#L34

Suggested change

fill: '#4579CA'

fill: get('fg.muted')

colebemis · 2022-09-29T23:12:08Z

data/colors/themes/dark_high_contrast.ts

+    folder: {
+      fill: get('accent.muted')


I've been calling it directory instead of folder to align with the octicon naming: https://primer.style/octicons/file-directory-fill-16

Suggested change

folder: {

fill: get('accent.muted')

directory: {

fill: get('accent.muted')

colebemis · 2022-09-29T23:14:18Z

data/colors/vars/component_light.ts

@@ -210,6 +210,9 @@ export default {
  treeViewItem: {
    chevron: {
      hoverBg: alpha(get('scale.gray.2'), 0.32),
+    },
+    folder: {
+      fill: '#79B8FF'


We currently use scale-blue-3 for light mode directory icons in dotcom: https://cs.github.com/github/github/blob/e7f27d4cf8902dc3c9e6d8d908f066db54ab4020/app/assets/stylesheets/bundles/global/hx_color-modes.scss?q=org%3Agithub+--color-icon-directory#L34

Suggested change

fill: '#79B8FF'

fill: get('scale.blue.3')

simurai

@colebemis I've been calling it directory instead of folder to align with the octicon naming: https://primer.style/octicons/file-directory-fill-16

@mperrotti Do you have a strong preference for folder? Otherwise, it seems reasonable to align the naming with Octicons (directory).

mperrotti · 2022-10-12T16:51:06Z

I agree with @colebemis that it should be directory. I'm about the push the change...

mperrotti added 2 commits September 29, 2022 18:17

adds color for treeview directory icon

fe45e98

adds changeset

f7515bc

mperrotti requested a review from a team as a code owner September 29, 2022 22:20

mperrotti requested review from a team, simurai and pksjce September 29, 2022 22:20

mperrotti mentioned this pull request Sep 29, 2022

TreeView: Add support for leading and trailing visuals primer/react#2383

Merged

6 tasks

mperrotti temporarily deployed to github-pages September 29, 2022 22:23 Inactive

langermank reviewed Sep 29, 2022

View reviewed changes

colebemis reviewed Sep 29, 2022

View reviewed changes

match folder color token to current dotcom folder color

74203b3

mperrotti temporarily deployed to github-pages September 29, 2022 23:21 Inactive

simurai reviewed Oct 7, 2022

View reviewed changes

rename 'folder' to 'directory'

f9124dd

mperrotti temporarily deployed to github-pages October 12, 2022 16:57 Inactive

colebemis approved these changes Oct 12, 2022

View reviewed changes

mperrotti merged commit a188c78 into main Oct 12, 2022

mperrotti deleted the mp/treeview-folder-color branch October 12, 2022 21:25

primer-css mentioned this pull request Oct 12, 2022

Release Tracking #355

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TreeView folder color #358

TreeView folder color #358

mperrotti commented Sep 29, 2022

changeset-bot bot commented Sep 29, 2022 •

edited

Loading

github-actions bot commented Sep 29, 2022 •

edited

Loading

github-actions bot commented Sep 29, 2022 •

edited

Loading

langermank Sep 29, 2022

colebemis Sep 29, 2022 •

edited

Loading

colebemis Sep 29, 2022

colebemis Sep 29, 2022

simurai left a comment

mperrotti commented Oct 12, 2022

TreeView folder color #358

TreeView folder color #358

Conversation

mperrotti commented Sep 29, 2022

changeset-bot bot commented Sep 29, 2022 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 29, 2022 • edited Loading

github-actions bot commented Sep 29, 2022 • edited Loading

🟢 No design token changes found

langermank Sep 29, 2022

Choose a reason for hiding this comment

colebemis Sep 29, 2022 • edited Loading

Choose a reason for hiding this comment

colebemis Sep 29, 2022

Choose a reason for hiding this comment

colebemis Sep 29, 2022

Choose a reason for hiding this comment

simurai left a comment

Choose a reason for hiding this comment

mperrotti commented Oct 12, 2022

changeset-bot bot commented Sep 29, 2022 •

edited

Loading

github-actions bot commented Sep 29, 2022 •

edited

Loading

github-actions bot commented Sep 29, 2022 •

edited

Loading

colebemis Sep 29, 2022 •

edited

Loading