fixup root styles by removing fallbacks

primer · Nov 12, 2024 · 90debbb · 90debbb
1 parent 047fd97
commit 90debbb
Showing 1 changed file with 12 additions and 13 deletions.
diff --git 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,15 +148,15 @@
   .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);
   }
 
   .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;