lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/pillContainer/listbox.slds.css

@@ -7,109 +7,109 @@
      align-items: center;
    }
 
-   :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
-     display: flex;
-   }
+  :host([data-render-mode="shadow"]) .slds-listbox_horizontal li {
+    display: flex;
+  }
 
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
      padding-inline-start: 0.125rem;
    }
 
-   /* Vertical listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
-   .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
-   .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
-     background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
-     text-decoration: none;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
-   .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
-     background-color: transparent;
-     cursor: default;
-   }
-
-   /* Modifies the listbox option if it contains an entity object */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
-     padding-block: var(--sds-g-spacing-1, 0.25rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
-   /* Modifies the listbox option if it contains a plain object or string */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
-     padding-block: var(--sds-g-spacing-2, 0.5rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
-     padding-block: var(--sds-g-spacing-2, 0.5rem);
-     padding-inline: var(--sds-g-spacing-3, 0.75rem);
-   }
-
-   /* Choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
-     cursor: pointer;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
-     outline: 0;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
-     color: var(--sds-g-color-neutral-base-80, #c9c9c9);
-   }
-
-   /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
-
-   /* the _vertical variations only apply to combobox's */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
-     margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-   }
-
-   /* If the listbox option has metadata or secondary information that sits below its primary text */
-   :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
-     margin-block-start: var(--sds-g-spacing-1, 0.25rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
-     display: inline-block;
-     vertical-align: middle;
-   }
-
-   /* Header for choosable option within listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-header {
-     font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-     font-weight: 700;
-   }
-
-   /* Container for listbox option icon */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
-     width: var(--sds-g-sizing-7, 1.5rem);
-     display: inline-flex;
-     align-content: center;
-     align-items: center;
-     justify-content: center;
-     color: var(--sds-g-color-neutral-base-50, #747474);
-   }
+  /* Vertical listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option:focus,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option:hover,:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
+    background-color: var(--slds-g-color-surface-container-2);
+    text-decoration: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"],:host([data-render-mode="shadow"]) 
+  .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  /* Modifies the listbox option if it contains an entity object */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity {
+    padding-block: var(--slds-g-spacing-1);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  /* Modifies the listbox option if it contains a plain object or string */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_plain {
+    padding-block: var(--slds-g-spacing-2);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_term {
+    padding-block: var(--slds-g-spacing-2);
+    padding-inline: var(--slds-g-spacing-3);
+  }
+
+  /* Choosable option within listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option:hover {
+    cursor: pointer;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option:focus {
+    outline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] {
+    color: var(--slds-g-color-disabled-2);
+  }
+
+  /* ------------------------------- PULL OUT FOR COMBOBOX LISTBOX-OPTION ---------------------------------------------- */
+
+  /* the _vertical variations only apply to combobox's */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-2);
+  }
+
+  /* If the listbox option has metadata or secondary information that sits below its primary text */
+  :host([data-render-mode="shadow"]) .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure {
+    margin-block-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox__option .slds-truncate {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  /* Header for choosable option within listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-header {
+    font-size: var(--slds-g-font-scale-neg-1);
+    font-weight: 700;
+  }
+
+  /* Container for listbox option icon */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-icon {
+    width: var(--slds-g-sizing-7);
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    color: var(--slds-g-color-accent-2);
+  }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
      color: currentcolor;
    }
 
-   /* The icon within a plain listbox that indicates if an option has been selected or not. */
-   :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
-     opacity: 0;
-     fill: var(--sds-g-color-brand-base-50, #0176d3);
-   }
+  /* The icon within a plain listbox that indicates if an option has been selected or not. */
+  :host([data-render-mode="shadow"]) .slds-listbox__icon-selected {
+    opacity: 0;
+    fill: var(--slds-g-color-accent-2);
+  }
 
-   /* Modifier that makes selected icon visible */
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
-     opacity: 1;
-   }
+  /* Modifier that makes selected icon visible */
+  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected {
+    opacity: 1;
+  }
 
-   :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
-     color: var(--sds-g-color-brand-base-50, #0176d3);
-   }
+  :host([data-render-mode="shadow"]) .slds-listbox__option.slds-is-selected .slds-listbox__option-icon {
+    color: var(--slds-g-color-accent-2);
+  }
 
    /* The main text of an entity listbox */
    :host([data-render-mode="shadow"]) .slds-listbox__option-text_entity {
@@ -121,12 +121,12 @@
      margin-block-end: 0.125rem;
    }
 
-   /* The metadata or secondary text of an entity listbox */
-   :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
-     display: block;
-     margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-     color: var(--sds-g-color-neutral-base-30, #444444);
-   }
+  /* The metadata or secondary text of an entity listbox */
+  :host([data-render-mode="shadow"]) .slds-listbox__option-meta {
+    display: block;
+    margin-block-start: calc(var(--slds-g-spacing-1) * -1);
+    color: var(--slds-g-color-neutral-base-30);
+  }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
      color: currentcolor;
@@ -134,7 +134,7 @@
 
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
 
-   /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
+  /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
 
    /* The container of pill selections found inside of a combobox group */
 
@@ -142,16 +142,16 @@
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
      position: relative;
      padding: 0;
-     padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) + var(--sds-g-spacing-3, 0.75rem));
+     padding-inline-end: calc(var(--slds-g-spacing-8) + var(--slds-g-spacing-3));
      height: 1.875rem;
      overflow: hidden;
    }
 
-   /* Expanded state of a selection group */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
-     height: auto;
-     padding: 0;
-   }
+  /* Expanded state of a selection group */
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group.slds-is-expanded {
+    height: auto;
+    padding: 0;
+  }
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
@@ -165,87 +165,87 @@
      padding-inline: 0.125rem;
    }
 
-   /* Toggle button to show all of the pill selections */
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
-     position: absolute;
-     top: 50%;
-     transform: translateY(-50%);
-     right: var(--sds-g-spacing-2, 0.5rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
-     line-height: 1;
-   }
-
-   /* Media Object classes need to be pulled out for reusability */
-   :host([data-render-mode="shadow"]) .slds-media {
-     display: flex;
-     align-items: flex-start;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media__figure {
-     flex-shrink: 0;
-     margin-inline-end: var(--sds-g-spacing-3, 0.75rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
-     min-width: var(--sds-g-sizing-10, 3rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media__body {
-     flex: 1;
-     min-width: 0;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
-   .slds-media__body> :last-child {
-     margin-block-end: 0;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media-body-iefix {
-     flex-shrink: 0;
-     flex-basis: auto;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
-     margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
-     margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
-     margin-inline-end: var(--sds-g-spacing-5, 1.5rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
-     margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
-     flex: 0 1 auto;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media_center {
-     align-items: center;
-   }
-
-   :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
-     margin-block: 0;
-     margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
-     margin-inline-end: 0;
-   }
+  /* Toggle button to show all of the pill selections */
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: var(--slds-g-spacing-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-toggle .slds-button {
+    line-height: 1;
+  }
+
+  /* Media Object classes need to be pulled out for reusability */
+  :host([data-render-mode="shadow"]) .slds-media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure {
+    flex-shrink: 0;
+    margin-inline-end: var(--slds-g-spacing-3);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_fixed-width {
+    min-width: var(--slds-g-sizing-10);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__body,:host([data-render-mode="shadow"]) 
+  .slds-media__body> :last-child {
+    margin-block-end: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media-body-iefix {
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_small .slds-media__figure_reverse {
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure {
+    margin-inline-end: var(--slds-g-spacing-5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_large .slds-media__figure_reverse {
+    margin-inline-start: var(--slds-g-spacing-5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_inline .slds-media__body {
+    flex: 0 1 auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media_center {
+    align-items: center;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-media__figure_reverse {
+    margin-block: 0;
+    margin-inline-start: var(--slds-g-spacing-3);
+    margin-inline-end: 0;
+  }
 
    @media (width <= 48em) {
 
-     :host([data-render-mode="shadow"]) .slds-media_responsive {
-       display: block;
-     }
+    :host([data-render-mode="shadow"]) .slds-media_responsive {
+      display: block;
+    }
 
      :host([data-render-mode="shadow"]) .slds-media_responsive .slds-media__figure {
        margin-block: 0;
-       margin-inline-start: var(--sds-g-spacing-3, 0.75rem);
+       margin-inline-start: var(--slds-g-spacing-3);
        margin-inline-end: 0;
      }
    }

package/src/lightning/pillContainer/pill-container.slds.css

@@ -12,18 +12,24 @@
     --slds-c-pill-radius-border: var(--slds-c-pillcontainer-radius-border);
   }
 
+  /* When single-line attribute is present */
+
+  :host([data-render-mode="shadow"][single-line]) .slds-listbox_horizontal {
+    flex-wrap: nowrap;
+  }
+
   :host([data-render-mode="shadow"]) .slds-pill_container {
     display: flex;
-    min-height: calc(calc((var(--sds-g-sizing-1, 0.125rem) * 3) + var(--sds-g-sizing-7, 1.5rem)) + 2px);
-    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pillcontainer-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    min-height: calc(calc((var(--slds-g-sizing-1) * 3) + var(--slds-g-sizing-7)) + 2px);
+    padding-block-start: var(--slds-c-pillcontainer-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pillcontainer-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
+    padding-block-end: var(--slds-c-pillcontainer-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pillcontainer-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+    border-width: var(--slds-c-pillcontainer-sizing-border, var(--slds-g-sizing-border-1));
     border-style: solid;
-    border-color: var(--slds-c-pillcontainer-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pillcontainer-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    background-color: var(--slds-c-pillcontainer-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pillcontainer-color-border, var(--slds-g-color-border-1));
+    border-radius: var(--slds-c-pillcontainer-radius-border, var(--slds-g-radius-border-2));
+    background-color: var(--slds-c-pillcontainer-color-background, var(--slds-g-color-surface-container-1));
   }
 
   :host([data-render-mode="shadow"]) .slds-pill_container .slds-listbox_inline {

package/src/lightning/pillContainer/pill.slds.css

@@ -12,48 +12,48 @@
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
-    line-height: var(--sds-g-font-lineheight-4, 1.5);
+    line-height: var(--slds-g-font-lineheight-4);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+    border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-spacing-1, 0.25rem));
-    background-color: var(--slds-c-pill-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-spacing-1));
+    background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1));
     box-shadow: var(--slds-c-pill-shadow);
     position: relative;
-    min-height: calc(var(--sds-g-sizing-7, 1.5rem) + var(--sds-g-sizing-1, 0.125rem));
+    min-height: calc(var(--slds-g-sizing-7) + var(--slds-g-sizing-1));
   }
 
   :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
-    margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill:hover {
-    --slds-c-pill-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    --slds-c-pill-color-background: var(--slds-g-color-surface-container-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill:focus {
     outline: 0;
-    --slds-c-pill-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-    --slds-c-pill-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-pill-color-border: var(--slds-g-color-border-accent-3);
+    --slds-c-pill-shadow: 0 0 3px var(--slds-g-color-border-accent-3);
   }
 
  :host([data-render-mode="shadow"]) a {
     text-decoration: none;
-    color: var(--sds-g-color-brand-base-50, #0176d3);
+    color: var(--slds-g-color-accent-2);
   }
 
   :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
     text-decoration: none;
-    color:var(--sds-g-color-brand-base-30, #014486);
+    color:var(--slds-g-color-accent-4);
   }
 
   :host([data-render-mode="shadow"]) a:active{
-    color:var(--sds-g-color-brand-base-30, #014486);
+    color:var(--slds-g-color-accent-4);
   }
 
   :host([data-render-mode="shadow"]) .slds-truncate {
@@ -80,44 +80,44 @@
 
   :host([data-render-mode="shadow"]) .slds-pill__label:focus {
     outline: 0;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
-    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    border-radius: var(--slds-g-radius-border-2);
+    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--slds-g-color-border-accent-3));
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
   .slds-pill__icon_container {
-    width: var(--sds-g-sizing-6, 1.25rem);
-    height: var(--sds-g-sizing-6, 1.25rem);
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+    width: var(--slds-g-sizing-6);
+    height: var(--slds-g-sizing-6);
+    margin-inline-end: var(--slds-g-spacing-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
-    --slds-c-avatar-sizing: var(--sds-g-sizing-6, 1.25rem);
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-6, 1.25rem) - var(--sds-g-sizing-border-2, 2px));
+    --slds-c-avatar-sizing: var(--slds-g-sizing-6);
+    --slds-c-icon-sizing: calc(var(--slds-g-sizing-6) - var(--slds-g-sizing-border-2));
 
-    color: var(--slds-c-pill-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    color: var(--slds-c-pill-text-color, var(--slds-g-color-neutral-base-100));
     display: block;
-    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    font-size: var(--slds-g-font-scale-neg-4);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
   .slds-pill__icon_container ~ .slds-pill__action {
-    padding-inline-start: calc(var(--sds-g-spacing-5, 1.5rem) + 2px);
+    padding-inline-start: calc(var(--slds-g-spacing-5) + 2px);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__remove {
-    width: var(--sds-g-sizing-5, 1rem);
-    height: var(--sds-g-sizing-5, 1rem);
+    width: var(--slds-g-sizing-5);
+    height: var(--slds-g-sizing-5);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-inline-start: var(--sds-g-sizing-2, 0.25rem);
-    border-radius: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    margin-inline-start: var(--slds-g-sizing-2);
+    border-radius: calc(var(--slds-g-spacing-1) / 2);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__remove svg {
-    width: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
-    height: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+    width: calc(var(--slds-g-sizing-1) * 3);
+    height: calc(var(--slds-g-sizing-1) * 3);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill_link {
@@ -129,26 +129,26 @@
     display: inline-block;
     position: absolute;
     top: 50%;
-    left: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    left: calc(var(--slds-g-spacing-1) / 2);
     transform: translateY(-50%);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
     position: absolute;
     top: 50%;
-    right: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    right: calc(var(--slds-g-spacing-1) / 2);
     transform: translateY(-50%);
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--slds-g-spacing-2) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-2));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -157,20 +157,25 @@
 
   :host([data-render-mode="shadow"]) .slds-pill__action:focus {
     outline: 0;
-    border-color: var(--slds-c-pill-action-color-border, var(--sds-g-color-brand-base-60, #1b96ff));
-    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    border-color: var(--slds-c-pill-action-color-border, var(--slds-g-color-border-accent-3));
+    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--slds-g-color-border-accent-2));
   }
 
   :host([data-render-mode="shadow"]) .slds-has-error {
-    border-color: var(--slds-c-pill-error-color-border, var(--sds-g-color-error-base-50, #ea001e));
+    border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1));
   }
 
   :host([data-render-mode="shadow"]) .slds-has-error:active {
-    border-color: var(--slds-c-pill-error-color-border-active, var(--sds-g-color-error-base-50, #ea001e));
+    border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1));
   }
 
   :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
-    font-weight: var(--sds-g-font-weight-7, 700);
-    color: var(--sds-g-color-error-base-50, #ea001e);
+    font-weight: var(--slds-g-font-weight-7);
+    color: var(--slds-g-color-error-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-pill__action:hover {
+    text-decoration: underline;
+    color: var(--slds-g-color-accent-4);
   }
 }