@pine-ds/core 0.2.4 → 1.0.0

package/dist/collection/components/pds-button/pds-button.css

@@ -1,124 +1,131 @@
 :host {
-  --border-color: transparent;
-  --border-color-hover: transparent;
-  --border-color-focus: transparent;
-  --border-color-disabled: transparent;
-  --background-color-primary: var(--pine-color-neutral-charcoal-400);
-  --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);
-  --background-color-disabled-primary: var(--pine-color-neutral-grey-300);
-  --color-primary: var(--pine-color-base-white);
-  --color-disabled-primary: var(--pine-color-neutral-charcoal-100);
-  --outline-color-primary: var(--pine-color-primary-200);
-  --border-color-secondary: var(--pine-color-neutral-grey-400);
-  --border-color-hover-secondary: var(--pine-color-neutral-grey-500);
-  --border-color-focus-secondary: var(--pine-color-neutral-grey-300);
-  --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);
-  --color-secondary: var(--pine-color-neutral-charcoal-400);
-  --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);
-  --outline-color-secondary: var(--pine-color-primary-200);
-  --background-color-accent: var(--pine-color-primary-300);
-  --background-color-hover-accent: var(--pine-color-primary-400);
-  --background-color-disabled-accent: var(--pine-color-primary-100);
-  --color-accent: var(--pine-color-base-white);
-  --color-disabled-accent: var(--pine-color-primary-200);
-  --outline-color-accent: var(--pine-color-primary-200);
-  --background-color-destructive: var(--pine-color-red-300);
-  --background-color-hover-destructive: var(--pine-color-red-400);
-  --background-color-disabled-destructive: var(--pine-color-red-100);
-  --color-destructive: var(--pine-color-base-white);
-  --color-disabled-destructive: var(--pine-color-red-200);
-  --outline-color-destructive: var(--pine-color-red-200);
+  --border-width-default: var(--pine-border-width-thin);
+  --border-width-unstyled: var(--pine-border-radius-0);
+  --color-border-default: transparent;
+  --color-border-disabled: transparent;
+  --color-border-focus: transparent;
+  --color-border-hover: transparent;
+  --color-background-primary-default: var(--pine-color-background-action-primary-default);
+  --color-background-primary-disabled: var(--pine-color-background-action-primary-disabled);
+  --color-background-primary-hover: var(--pine-color-background-action-primary-hover);
+  --color-text-primary-default: var(--pine-color-text-action-primary-default);
+  --color-text-primary-disabled: var(--pine-color-text-action-primary-disabled);
+  --color-outline-primary: var(--pine-color-blue-200);
+  --color-border-secondary-default: var(--pine-color-grey-400);
+  --color-border-secondary-disabled: var(--pine-color-grey-300);
+  --color-border-secondary-focus: var(--pine-color-grey-300);
+  --color-border-secondary-hover: var(--pine-color-grey-500);
+  --color-text-secondary-default: var(--pine-color-text-body-default);
+  --color-text-secondary-disabled: var(--pine-color-text-action-primary-disabled);
+  --color-outline-secondary: var(--pine-color-blue-200);
+  --color-background-accent-default: var(--pine-color-background-action-accent-default);
+  --color-background-accent-disabled: var(--pine-color-background-action-accent-disabled);
+  --color-background-accent-hover: var(--pine-color-background-action-accent-hover);
+  --color-text-accent-default: var(--pine-color-text-action-accent-default);
+  --color-text-accent-disabled: var(--pine-color-text-action-accent-disabled);
+  --color-outline-accent: var(--pine-color-blue-200);
+  --color-background-destructive-default: var(--pine-color-background-action-destructive-default);
+  --color-background-destructive-disabled: var(--pine-color-background-action-destructive-disabled);
+  --color-background-destructive-hover: var(--pine-color-background-action-destructive-hover);
+  --color-text-destructive-default: var(--pine-color-text-action-destructive-default);
+  --color-text-destructive-disabled: var(--pine-color-text-action-destructive-disabled);
+  --color-outline-destructive: var(--pine-color-red-200);
+  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);
+  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);
+  --spacing-icon-margin-inline-end: var(--pine-spacing-100);
+  --spacing-padding-block: var(--pine-spacing-100);
+  --spacing-padding-inline: var(--pine-spacing-200);
+  --spacing-unstyled: var(--pine-spacing-0);
+  --typography-default: var(--pine-body-med);
   display: inline-flex;
   vertical-align: middle;
 }
 
 .pds-button {
   align-items: center;
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  color: var(--color);
+  background-color: var(--color-background-default);
+  border: var(--border-width-default) solid var(--color-border-default);
+  border-radius: var(--pine-border-radius-125);
+  color: var(--color-text-default);
   display: flex;
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 500;
+  font: var(--typography-default);
   min-height: 40px;
-  padding: 0.5rem 1rem;
+  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
 }
 .pds-button pds-icon {
   fill: currentColor;
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--spacing-icon-margin-inline-end);
 }
 .pds-button:hover {
-  background-color: var(--background-color-hover);
-  border-color: var(--border-color-hover);
+  background-color: var(--color-background-hover);
+  border-color: var(--color-border-hover);
 }
 .pds-button:focus-visible {
   --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);
-  border-color: var(--border-color-focus);
+  border-color: var(--color-border-focus);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 .pds-button:disabled {
-  background-color: var(--background-color-disabled);
-  border-color: var(--border-color-disabled);
-  color: var(--color-disabled);
+  background-color: var(--color-background-disabled);
+  border-color: var(--color-border-disabled);
+  color: var(--color-text-disabled);
 }
 
 .pds-button--primary {
-  --background-color: var(--background-color-primary);
-  --background-color-hover: var(--background-color-hover-primary);
-  --background-color-disabled: var(--background-color-disabled-primary);
-  --color: var(--color-primary);
-  --color-disabled: var(--color-disabled-primary);
-  --outline-color: var(--outline-color-primary);
+  --color-background-default: var(--color-background-primary-default);
+  --color-background-hover: var(--color-background-primary-hover);
+  --color-background-disabled: var(--color-background-primary-disabled);
+  --color-text-default: var(--color-text-primary-default);
+  --color-text-disabled: var(--color-text-primary-disabled);
+  --color-outline: var(--color-outline-primary);
 }
 
 .pds-button--accent {
-  --background-color: var(--background-color-accent);
-  --background-color-hover: var(--background-color-hover-accent);
-  --background-color-disabled: var(--background-color-disabled-accent);
-  --color: var(--color-accent);
-  --color-disabled: var(--color-disabled-accent);
-  --outline-color: var(--outline-color-accent);
+  --color-background-default: var(--color-background-accent-default);
+  --color-background-hover: var(--color-background-accent-hover);
+  --color-background-disabled: var(--color-background-accent-disabled);
+  --color-text-default: var(--color-text-accent-default);
+  --color-text-disabled: var(--color-text-accent-disabled);
+  --color-outline: var(--color-outline-accent);
 }
 
 .pds-button--destructive {
-  --background-color: var(--background-color-destructive);
-  --background-color-hover: var(--background-color-hover-destructive);
-  --background-color-disabled: var(--background-color-disabled-destructive);
-  --color: var(--color-destructive);
-  --color-disabled: var(--color-disabled-destructive);
-  --outline-color: var(--outline-color-destructive);
+  --color-background-default: var(--color-background-destructive-default);
+  --color-background-hover: var(--color-background-destructive-hover);
+  --color-background-disabled: var(--color-background-destructive-disabled);
+  --color-text-default: var(--color-text-destructive-default);
+  --color-text-disabled: var(--color-text-destructive-disabled);
+  --color-outline: var(--color-outline-destructive);
 }
 
 .pds-button--secondary,
 .pds-button--disclosure {
-  --background-color: transparent;
-  --background-color-hover: transparent;
-  --background-color-disabled: transparent;
-  --border-color-disabled: var(--border-color-disabled-secondary);
-  --border-color-focus: var(--border-color-focus-secondary);
-  --border-color-hover: var(--border-color-hover-secondary);
-  --border-color: var(--border-color-secondary);
-  --color: var(--color-secondary);
-  --color-disabled: var(--color-disabled-secondary);
-  --outline-color: var(--outline-color-secondary);
+  --color-background-default: transparent;
+  --color-background-hover: transparent;
+  --color-background-disabled: transparent;
+  --color-border-disabled: var(--color-border-secondary-disabled);
+  --color-border-focus: var(--color-border-secondary-focus);
+  --color-border-hover: var(--color-border-secondary-hover);
+  --color-border-default: var(--color-border-secondary-default);
+  --color-text-default: var(--color-text-secondary-default);
+  --color-text-disabled: var(--color-text-secondary-disabled);
+  --color-outline: var(--color-outline-secondary);
 }
 
 .pds-button--disclosure pds-icon {
-  margin-inline-end: 0;
-  margin-inline-start: 0.5rem;
+  margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);
+  margin-inline-start: var(--spacing-disclosure-margin-inline-start);
 }
 
 .pds-button--unstyled {
-  --background-color: transparent;
-  --background-color-hover: transparent;
-  --background-color-disabled: transparent;
-  --color: inherit;
-  border: 0;
-  margin: 0;
+  --color-background-default: transparent;
+  --color-background-hover: transparent;
+  --color-background-disabled: transparent;
+  --color-text-default: inherit;
+  border: var(--border-width-unstyled);
+  margin: var(--spacing-unstyled);
   min-height: auto;
-  padding: 0;
+  padding: var(--spacing-unstyled);
   width: inherit;
 }

package/dist/collection/components/pds-checkbox/pds-checkbox.css

@@ -1,22 +1,20 @@
 :host {
-  --background-color: var(--pine-color-base-white);
-  --background-color-disabled: var(--pine-color-neutral-grey-200);
-  --background-color-hover: var(--pine-color-neutral-grey-100);
-  --border: var(--pine-border-interactive);
-  --border-color-disabled: var(--pine-color-neutral-charcoal-100);
-  --border-color-hover: var(--pine-border-interactive-hover-color);
-  --border-color-icon: var(--pine-color-base-white);
-  --border-radius: var(--pine-border-radius-xs);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
+  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);
+  --border-radius: var(--pine-border-radius-050);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
   --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);
-  --color-checked: var(--pine-color-neutral-charcoal-500);
-  --color-disabled: var(--pine-color-neutral-grey-300);
-  --color-focus: var(--pine-color-primary-200);
-  --color-invalid-focus: var(--pine-color-red-200);
+  --color-background: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-background-hover: var(--pine-color-grey-100);
+  --color-border-disabled: var(--pine-color-charcoal-100);
+  --color-border-icon: var(--pine-color-white);
+  --color-checked: var(--pine-color-charcoal-500);
+  --color-disabled: var(--pine-color-grey-300);
   --color-invalid: var(--pine-color-red-300);
-  --message-color-disabled: var(--pine-color-neutral-grey-500);
-  --message-color: var(--pine-color-neutral-charcoal-200);
-  --input-size: 16px;
+  --color-text-disabled: var(--pine-color-grey-500);
+  --color-text-message: var(--pine-color-charcoal-200);
+  --sizing-input: var(--pine-font-size-100);
   align-items: center;
   display: flex;
   flex-flow: row wrap;
@@ -44,24 +42,24 @@
 
 input {
   appearance: none;
-  background-color: var(--background-color);
-  border: var(--border);
+  background-color: var(--color-background);
+  border: var(--border-default);
   border-radius: var(--border-radius);
-  height: var(--input-size);
+  height: var(--sizing-input);
   margin: 0;
   position: relative;
-  width: var(--input-size);
+  width: var(--sizing-input);
 }
 input:hover {
-  background: var(--background-color-hover);
-  border-color: var(--border-color-hover);
+  background: var(--color-background-hover);
+  border: var(--border-color-interactive-hover);
 }
 input:checked {
   background: var(--color-checked);
   border-color: var(--color-checked);
 }
 input:checked::after {
-  border: 1px solid var(--border-color-icon);
+  border: 1px solid var(--color-border-icon);
   border-left: 0;
   border-top: 0;
   content: "";
@@ -74,7 +72,7 @@ input:checked::after {
   width: 4px;
 }
 input:disabled {
-  background: var(--background-color-disabled);
+  background: var(--color-background-disabled);
   border-color: var(--color-disabled);
   cursor: not-allowed;
 }
@@ -83,14 +81,14 @@ input:disabled:checked {
   border-color: var(--color-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--border-color-disabled);
+  border-color: var(--color-border-disabled);
 }
 input:disabled + label {
-  color: var(--border-color-hover);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-checkbox__message {
-  color: var(--message-color-disabled);
+  color: var(--color-text-disabled);
 }
 input:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -115,7 +113,7 @@ label {
 }
 
 .pds-checkbox__message {
-  color: var(--message-color);
+  color: var(--color-text-message);
   font-size: 14px;
   margin-block-start: 6px;
   margin-inline-start: 26px;

package/dist/collection/components/pds-chip/pds-chip.css

@@ -1,172 +1,166 @@
 :host {
-  --background-danger: var(--pine-color-red-100);
-  --background-danger-dot: var(--pine-color-red-300);
-  --background-danger-interactive: var(--pine-color-red-200);
-  --background-neutral: var(--pine-color-neutral-grey-300);
-  --background-neutral-dot: var(--pine-color-neutral-charcoal-100);
-  --background-neutral-interactive: var(--pine-color-neutral-grey-400);
-  --background-info: var(--pine-color-primary-100);
-  --background-info-dot: var(--pine-color-primary-300);
-  --background-info-interactive: var(--pine-color-primary-200);
-  --background-accent: var(--pine-color-purple-100);
-  --background-accent-dot: var(--pine-color-purple-300);
-  --background-accent-interactive: var(--pine-color-purple-200);
-  --background-success: var(--pine-color-green-100);
-  --background-success-dot: var(--pine-color-green-300);
-  --background-success-interactive: var(--pine-color-green-200);
-  --background-warning: var(--pine-color-yellow-100);
-  --background-warning-dot: var(--pine-color-yellow-300);
-  --background-warning-interactive: var(--pine-color-yellow-200);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);
-  --border-radius: var(--pine-border-radius-lg);
-  --font-size: var(--pine-font-size-body-sm);
-  --font-size-lg: var(--pine-font-size-body);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --border-radius: var(--pine-border-radius-200);
+  --color-background-accent: var(--pine-color-purple-100);
+  --color-background-accent-dot: var(--pine-color-purple-300);
+  --color-background-accent-interactive: var(--pine-color-purple-200);
+  --color-background-danger: var(--pine-color-red-100);
+  --color-background-danger-dot: var(--pine-color-red-300);
+  --color-background-danger-interactive: var(--pine-color-red-200);
+  --color-background-info: var(--pine-color-blue-100);
+  --color-background-info-dot: var(--pine-color-blue-300);
+  --color-background-info-interactive: var(--pine-color-blue-200);
+  --color-background-neutral: var(--pine-color-grey-300);
+  --color-background-neutral-dot: var(--pine-color-charcoal-100);
+  --color-background-neutral-interactive: var(--pine-color-grey-400);
+  --color-background-success: var(--pine-color-green-100);
+  --color-background-success-dot: var(--pine-color-green-300);
+  --color-background-success-interactive: var(--pine-color-green-200);
+  --color-background-warning: var(--pine-color-yellow-100);
+  --color-background-warning-dot: var(--pine-color-yellow-300);
+  --color-background-warning-interactive: var(--pine-color-yellow-200);
+  --font-size-sm: var(--pine-font-size-087);
+  --font-size-body: var(--pine-font-size-100);
   --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-sm);
-  --padding-block-sm: calc(var(--pine-spacing-xxs) / 2);
-  --padding-block: var(--pine-spacing-xxs);
-  --padding-block-lg: 6px;
-  --padding-inline-sm: calc(var(--pine-spacing-xxs) / 2);
-  --padding-inline: 10px;
-  --padding-inline-lg: calc(var(--pine-spacing-md) / 2);
-  --padding-inline-xl: 14px;
-  --margin-block-xs: calc(var(--pine-spacing-xxs) / 2);
-  --margin-inline-sm: calc(var(--pine-spacing-xs) / 2);
-  --margin-inline-xs: calc(var(--pine-spacing-xxs) / 2);
-  --margin-inline: 4px;
-  --margin-inline-lg: var(--pine-spacing-xs);
-  --margin-inline-xl: calc(var(--pine-spacing-md) / 2);
-  --dot-size: 4px;
-  --close-size: 10px;
-  --close-size-lg: 24px;
+  --line-height: var(--pine-line-height-100);
+  --spacing-xxs: calc(var(--pine-spacing-050) / 2);
+  --spacing-xs: var(--pine-spacing-050);
+  --spacing-sm: calc(var(--pine-spacing-150) / 2);
+  --spacing-md: var(--pine-spacing-100);
+  --spacing-lg: calc(var(--pine-spacing-250) / 2);
+  --spacing-xl: var(--pine-spacing-150);
+  --spacing-xxl: calc(var(--pine-spacing-350) / 2);
+  --sizing-close: 10px;
+  --sizing-close-lg: 24px;
+  --sizing-dot: 4px;
   align-items: center;
   border-radius: var(--border-radius);
   display: inline-flex;
-  font-size: var(--font-size);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
-  padding-block: var(--padding-block-sm);
-  padding-inline: var(--padding-inline);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-lg);
 }
 
 :host(.pds-chip--accent) {
-  background: var(--background-accent);
+  background: var(--color-background-accent);
 }
 :host(.pds-chip--accent) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-accent-dot);
+  background: var(--color-background-accent-dot);
 }
 :host(.pds-chip--accent) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-accent-interactive);
+  background: var(--color-background-accent-interactive);
 }
 
 :host(.pds-chip--accent.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-accent-interactive);
+  background: var(--color-background-accent-interactive);
 }
 
 :host(.pds-chip--danger) {
-  background: var(--background-danger);
+  background: var(--color-background-danger);
 }
 :host(.pds-chip--danger) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-danger-dot);
+  background: var(--color-background-danger-dot);
 }
 :host(.pds-chip--danger) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-danger-interactive);
+  background: var(--color-background-danger-interactive);
 }
 
 :host(.pds-chip--danger.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-danger-interactive);
+  background: var(--color-background-danger-interactive);
 }
 
 :host(.pds-chip--info) {
-  background: var(--background-info);
+  background: var(--color-background-info);
 }
 :host(.pds-chip--info) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-info-dot);
+  background: var(--color-background-info-dot);
 }
 :host(.pds-chip--info) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-info-interactive);
+  background: var(--color-background-info-interactive);
 }
 
 :host(.pds-chip--info.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-info-interactive);
+  background: var(--color-background-info-interactive);
 }
 
 :host(.pds-chip--neutral) {
-  background: var(--background-neutral);
+  background: var(--color-background-neutral);
 }
 :host(.pds-chip--neutral) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-neutral-dot);
+  background: var(--color-background-neutral-dot);
 }
 :host(.pds-chip--neutral) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-neutral-interactive);
+  background: var(--color-background-neutral-interactive);
 }
 
 :host(.pds-chip--neutral.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-neutral-interactive);
+  background: var(--color-background-neutral-interactive);
 }
 
 :host(.pds-chip--success) {
-  background: var(--background-success);
+  background: var(--color-background-success);
 }
 :host(.pds-chip--success) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-success-dot);
+  background: var(--color-background-success-dot);
 }
 :host(.pds-chip--success) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-success-interactive);
+  background: var(--color-background-success-interactive);
 }
 
 :host(.pds-chip--success.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-success-interactive);
+  background: var(--color-background-success-interactive);
 }
 
 :host(.pds-chip--warning) {
-  background: var(--background-warning);
+  background: var(--color-background-warning);
 }
 :host(.pds-chip--warning) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--background-warning-dot);
+  background: var(--color-background-warning-dot);
 }
 :host(.pds-chip--warning) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--background-warning-interactive);
+  background: var(--color-background-warning-interactive);
 }
 
 :host(.pds-chip--warning.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--background-warning-interactive);
+  background: var(--color-background-warning-interactive);
 }
 
 .pds-chip__dot {
   border: 1px solid transparent;
   border-radius: 50%;
   display: inline-block;
-  height: var(--dot-size);
-  margin-block-end: var(--margin-block-xs);
-  margin-inline-end: var(--margin-inline-sm);
-  width: var(--dot-size);
+  height: var(--sizing-dot);
+  margin-block-end: var(--spacing-xxs);
+  margin-inline-end: var(--spacing-xs);
+  width: var(--sizing-dot);
 }
 
 :host(.pds-chip--dropdown) {
   padding: 0;
 }
 :host(.pds-chip--dropdown) .pds-chip__dot {
-  margin-block-end: 1px;
-  margin-block-start: var(--margin-block-xs);
+  margin-block-end: calc(var(--spacing-xxs) / 4);
+  margin-block-start: var(--spacing-xxs);
 }
 
 .pds-chip__button {
@@ -177,23 +171,23 @@
   border-radius: var(--border-radius);
   display: flex;
   font-family: inherit;
-  font-size: var(--font-size);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
-  padding-block: var(--padding-block-sm);
-  padding-inline: var(--padding-inline);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-lg);
 }
 .pds-chip__button:focus-visible {
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 .pds-chip__button pds-icon {
-  margin-inline-end: calc(var(--margin-inline-xs) * -1);
-  margin-inline-start: var(--margin-inline);
+  margin-inline-end: calc(var(--spacing-xxs) * -1);
+  margin-inline-start: var(--spacing-xs);
 }
 
 :host(.pds-chip--tag) {
-  padding-block: var(--padding-block-sm);
+  padding-block: var(--spacing-xxs);
 }
 
 .pds-chip__close {
@@ -201,12 +195,12 @@
   background: transparent;
   border: 0;
   border-radius: 50%;
-  height: var(--close-size);
-  margin-inline-end: calc(var(--margin-inline-lg) * -1);
-  margin-inline-start: var(--margin-inline);
-  padding: var(--close-size);
+  height: var(--sizing-close);
+  margin-inline-end: calc(var(--spacing-md) * -1);
+  margin-inline-start: var(--spacing-xs);
+  padding: var(--sizing-close);
   position: relative;
-  width: var(--close-size);
+  width: var(--sizing-close);
 }
 .pds-chip__close pds-icon {
   left: 50%;
@@ -220,26 +214,26 @@
 }
 
 :host(.pds-chip--large) {
-  font-size: var(--font-size-lg);
-  padding-block: var(--padding-block-lg);
-  padding-inline: var(--padding-inline-xl);
+  font-size: var(--font-size-body);
+  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-xxl);
 }
 :host(.pds-chip--large):host(.pds-chip--dropdown) {
-  padding-block: var(--padding-block);
-  padding-inline: var(--padding-inline-sm);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
 }
 :host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot {
   margin-block-end: 0;
 }
 :host(.pds-chip--large) .pds-chip__button {
-  font-size: var(--font-size-lg);
-  padding-inline: var(--padding-inline-lg);
+  font-size: var(--font-size-body);
+  padding-inline: var(--spacing-xl);
 }
 :host(.pds-chip--large) .pds-chip__close {
-  height: var(--close-size-lg);
-  margin-inline-end: calc(var(--margin-inline-xl) * -1);
-  width: var(--close-size-lg);
+  height: var(--sizing-close-lg);
+  margin-inline-end: calc(var(--spacing-xl) * -1);
+  width: var(--sizing-close-lg);
 }
 :host(.pds-chip--large):host(.pds-chip--tag) {
-  padding-block: var(--padding-block);
+  padding-block: var(--spacing-xs);
 }