Fixed text contrast issues in Menu, Dropdown, ComboBox and ListBox an…

…d removed some deprecated token usage (#4195)
jpmorganchase · Sep 27, 2024 · 7eac3b2 · 7eac3b2
1 parent 4f3bec9
commit 7eac3b2
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/metal-pumas-pretend.md b/.changeset/metal-pumas-pretend.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed text contrast issues in Menu, Dropdown, ComboBox and ListBox.
diff --git a/packages/core/src/file-drop-zone/FileDropZone.css b/packages/core/src/file-drop-zone/FileDropZone.css
@@ -1,5 +1,5 @@
 .saltFileDropZone {
-  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
+  color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
   text-align: center;

diff --git a/packages/core/src/menu/MenuGroup.css b/packages/core/src/menu/MenuGroup.css
@@ -1,6 +1,6 @@
 .saltMenuGroup-label {
   background: var(--salt-container-primary-background);
-  color: var(--salt-text-secondary-foreground);
+  color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   font-family: var(--salt-text-label-fontFamily);

diff --git a/packages/core/src/menu/MenuItem.css b/packages/core/src/menu/MenuItem.css
@@ -38,7 +38,7 @@
 .saltMenuItem[aria-disabled="true"],
 .saltMenuItem[aria-disabled="true"]:active {
   background: var(--salt-selectable-background-disabled);
-  color: var(--salt-text-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
   box-shadow: none;
 }

diff --git a/packages/core/src/option/OptionGroup.css b/packages/core/src/option/OptionGroup.css
@@ -1,6 +1,6 @@
 .saltOptionGroup-label {
   background: var(--salt-container-primary-background);
-  color: var(--salt-text-secondary-foreground);
+  color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   font-family: var(--salt-text-label-fontFamily);

diff --git a/packages/core/src/overlay/OverlayPanel.css b/packages/core/src/overlay/OverlayPanel.css
@@ -14,7 +14,7 @@
   background: var(--overlay-background);
   box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
 
-  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
+  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));
   z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));
   width: max-content;
 }
diff --git a/packages/core/src/panel/Panel.css b/packages/core/src/panel/Panel.css
@@ -19,7 +19,7 @@
   color: var(--saltPanel-color, inherit);
   height: var(--saltPanel-height, 100%);
   overflow: auto;
-  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
+  padding: var(--saltPanel-padding, var(--salt-spacing-300));
   width: var(--saltPanel-width, 100%);
   border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;

diff --git a/packages/core/src/tooltip/Tooltip.css b/packages/core/src/tooltip/Tooltip.css
@@ -3,7 +3,7 @@
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
   --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
   /* apply icon margin based on the text line height so it's aligned on all densities */
-  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2);
+  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
   --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
   /* Single line height should be size-base */
   --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);