diff --git a/packages/react/src/TreeView/TreeView.module.css b/packages/react/src/TreeView/TreeView.module.css index 830ec06af6d..b62add139d2 100644 --- a/packages/react/src/TreeView/TreeView.module.css +++ b/packages/react/src/TreeView/TreeView.module.css @@ -22,7 +22,7 @@ &:focus-visible > div, &.focus-visible > div { - box-shadow: inset 0 0 0 2px var(--fgColor-accent, var(--color-accent-fg, #0969da)); + box-shadow: inset 0 0 0 2px var(--fgColor-accent); @media (forced-colors: active) { outline: 2px solid HighlightText; outline-offset: -2; @@ -45,12 +45,12 @@ grid-template-areas: 'spacer leadingAction toggle content'; width: 100%; font-size: var(--base-size-14); - color: var(--fgColor-default, var(--color-fg-default, #1F2328)); + color: var(--fgColor-default); border-radius: var(--borderRadius-medium); cursor: pointer; &:hover { - background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg, rgba(208, 215, 222, 0.32))); + background-color: var(--control-transparent-bgColor-hover); @media (forced-colors: active) { outline: 2px solid transparent; @@ -78,7 +78,7 @@ } .PRIVATE_TreeView-item[aria-current='true'] > .PRIVATE_TreeView-item-container { - background-color: var(--control-transparent-bgColor-selected, var(--color-action-list-item-default-selected-bg, rgba(208, 215, 222, 0.24))); + background-color: var(--control-transparent-bgColor-selected); /* Current item indicator */ &::after { @@ -88,7 +88,7 @@ left: var(--base-size-8); width: 0.25rem; /* 4px */ height: 1.5rem; /* 24px */ - background-color: var(--fgColor-accent, var(--color-accent-fg, #0969da)); + background-color: var(--fgColor-accent); border-radius: var(--borderRadius-medium); @media (forced-colors: active) { @@ -106,11 +106,11 @@ across more lines. */ padding-top: calc(var(--min-item-height) / 2 - 12px / 2); height: 100%; - color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76))); + color: var(--fgColor-muted); } .PRIVATE_TreeView-item-toggle--hover:hover { - background-color: var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208, 215, 222, 0.32))); + background-color: var(--color-tree-view-item-chevron-hover-bg); } .PRIVATE_TreeView-item-toggle--end { @@ -148,7 +148,7 @@ .PRIVATE_TreeView-item-visual { display: flex; align-items: center; - color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76))); + color: var(--fgColor-muted); /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap across more lines. */ height: var(--custom-line-height, 1.3rem); @@ -156,7 +156,7 @@ .PRIVATE_TreeView-item-leading-action { display: flex; - color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76))); + color: var(--fgColor-muted); grid-area: leadingAction; } @@ -169,7 +169,7 @@ * On devices without hover, the nesting indicator lines * appear at all times. */ - border-color: var(--borderColor-muted, var(--color-border-subtle, rgba(31, 35, 40, 0.15))); + border-color: var(--borderColor-muted); } /* @@ -185,13 +185,13 @@ &:hover .PRIVATE_TreeView-item-level-line, &:focus-within .PRIVATE_TreeView-item-level-line { - border-color: var(--borderColor-muted, var(--color-border-subtle, rgba(31, 35, 40, 0.15))); + border-color: var(--borderColor-muted); } } .PRIVATE_TreeView-directory-icon { display: grid; - color: var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9)); + color: var(--treeViewItem-leadingVisual-bgColor-rest); } .PRIVATE_VisuallyHidden { @@ -207,7 +207,6 @@ } } - .TreeViewSkeletonItemContainerStyle { display: flex; align-items: center;