Update Pill's styling to align to Button's new styling (#4162)

.changeset/beige-poets-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Updated Pill's styling to align to Button's new styling.

packages/core/src/pill-input/PillInput.css

@@ -273,6 +273,7 @@
   background: var(--salt-content-foreground-highlight);
   color: var(--salt-content-primary-foreground);
   --saltIcon-color: var(--salt-content-primary-foreground);
+  border-color: transparent;
   outline: none;
 }
 

packages/core/src/pill/Pill.css

@@ -3,17 +3,17 @@
   appearance: none;
   display: inline-flex;
   align-items: center;
-  background: var(--saltPill-background, var(--salt-actionable-primary-background));
-  border-radius: var(--saltPill-borderRadius, var(--salt-palette-corner-weaker, 0));
-  border: 0;
+  background: var(--saltPill-background, var(--pill-background));
+  border-radius: var(--salt-palette-corner-weaker, 0);
+  border-style: solid;
+  border-width: var(--salt-size-border, 0);
+  border-color: var(--pill-borderColor);
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   min-height: var(--salt-text-minHeight);
-  outline: 0;
   position: relative;
   gap: var(--salt-spacing-50);
-  padding-left: var(--salt-spacing-50);
-  padding-right: var(--salt-spacing-50);
-  color: var(--saltPill-color, var(--salt-actionable-primary-foreground));
+  padding: 0 calc(var(--salt-spacing-50) - var(--salt-size-border, 0));
+  color: var(--saltPill-color, var(--pill-color));
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
@@ -24,19 +24,24 @@
 
 /* Style applied to Pill if pill is clickable  */
 .saltPill-clickable {
+  --pill-background: var(--salt-actionable-bold-background);
+  --pill-color: var(--salt-actionable-bold-foreground);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor);
   cursor: var(--salt-selectable-cursor-hover);
 }
 
 .saltPill-clickable:hover,
 .saltPill-clickable:focus-visible {
-  color: var(--salt-actionable-primary-foreground-hover);
-  background: var(--salt-actionable-primary-background-hover);
+  --pill-color: var(--salt-actionable-bold-foreground-hover);
+  --pill-background: var(--salt-actionable-bold-background-hover);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);
 }
 
 .saltPill-clickable.saltPill-active,
 .saltPill-clickable:active {
-  background: var(--salt-actionable-primary-background-active);
-  color: var(--salt-actionable-primary-foreground-active);
+  --pill-color: var(--salt-actionable-bold-foreground-active);
+  --pill-background: var(--salt-actionable-bold-background-active);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);
 }
 
 /* Style applied to Pill on focus */
@@ -47,7 +52,8 @@
 /* Style applied to Pill when disabled */
 .saltPill:disabled,
 .saltPill:disabled:hover {
-  color: var(--salt-actionable-primary-foreground-disabled);
-  background: var(--salt-actionable-primary-background-disabled);
-  cursor: var(--salt-selectable-cursor-disabled);
+  --pill-color: var(--salt-actionable-bold-foreground-disabled);
+  --pill-background: var(--salt-actionable-bold-background-disabled);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
 }