@pine-ds/core 2.0.0 → 2.1.0

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

@@ -2,27 +2,32 @@
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
   --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-accent-dot: var(--pine-color-purple-600);
+  --color-background-accent-hover: 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-danger-dot: var(--pine-color-red-600);
+  --color-background-danger-hover: 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-info-dot: var(--pine-color-blue-600);
+  --color-background-info-hover: var(--pine-color-blue-200);
+  --color-background-neutral: var(--pine-color-grey-100);
   --color-background-neutral-dot: var(--pine-color-grey-600);
-  --color-background-neutral-interactive: var(--pine-color-grey-400);
+  --color-background-neutral-hover: 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-success-dot: var(--pine-color-green-600);
+  --color-background-success-hover: 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-085);
-  --font-size-body: var(--pine-font-size-100);
+  --color-background-warning-dot: var(--pine-color-yellow-600);
+  --color-background-warning-hover: var(--pine-color-yellow-200);
+  --color-text-accent: var(--pine-color-purple-950);
+  --color-text-danger: var(--pine-color-red-950);
+  --color-text-info: var(--pine-color-blue-950);
+  --color-text-neutral: var(--pine-color-grey-950);
+  --color-text-success: var(--pine-color-green-950);
+  --color-text-warning: var(--pine-color-yellow-950);
+  --font-size-sm: var(--pine-font-size-body-md);
+  --font-size-lg: var(--pine-font-size-heading-h6);
   --font-weight: var(--pine-font-weight-medium);
-  --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);
@@ -36,9 +41,6 @@
   align-items: center;
   border-radius: var(--border-radius);
   display: inline-flex;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-lg);
 }
@@ -50,14 +52,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-accent-dot);
 }
+:host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-accent);
+}
 :host(.pds-chip--accent) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-interactive);
+  background: var(--color-background-accent-hover);
 }
 
 :host(.pds-chip--accent.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-interactive);
+  background: var(--color-background-accent-hover);
 }
 
 :host(.pds-chip--danger) {
@@ -67,14 +73,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-danger-dot);
 }
+:host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-danger);
+}
 :host(.pds-chip--danger) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-interactive);
+  background: var(--color-background-danger-hover);
 }
 
 :host(.pds-chip--danger.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-interactive);
+  background: var(--color-background-danger-hover);
 }
 
 :host(.pds-chip--info) {
@@ -84,14 +94,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-info-dot);
 }
+:host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-info);
+}
 :host(.pds-chip--info) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-interactive);
+  background: var(--color-background-info-hover);
 }
 
 :host(.pds-chip--info.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-interactive);
+  background: var(--color-background-info-hover);
 }
 
 :host(.pds-chip--neutral) {
@@ -101,14 +115,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-neutral-dot);
 }
+:host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-neutral);
+}
 :host(.pds-chip--neutral) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-interactive);
+  background: var(--color-background-neutral-hover);
 }
 
 :host(.pds-chip--neutral.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-interactive);
+  background: var(--color-background-neutral-hover);
 }
 
 :host(.pds-chip--success) {
@@ -118,14 +136,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-success-dot);
 }
+:host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-success);
+}
 :host(.pds-chip--success) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-interactive);
+  background: var(--color-background-success-hover);
 }
 
 :host(.pds-chip--success.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-interactive);
+  background: var(--color-background-success-hover);
 }
 
 :host(.pds-chip--warning) {
@@ -135,14 +157,18 @@
   /* stylelint-disable-next-line */
   background: var(--color-background-warning-dot);
 }
+:host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button {
+  /* stylelint-disable-next-line */
+  color: var(--color-text-warning);
+}
 :host(.pds-chip--warning) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-interactive);
+  background: var(--color-background-warning-hover);
 }
 
 :host(.pds-chip--warning.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-interactive);
+  background: var(--color-background-warning-hover);
 }
 
 .pds-chip__dot {
@@ -155,6 +181,11 @@
   width: var(--sizing-dot);
 }
 
+.pds-chip__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight);
+}
+
 :host(.pds-chip--dropdown) {
   padding: 0;
 }
@@ -170,10 +201,7 @@
   border: 0;
   border-radius: var(--border-radius);
   display: flex;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
   font-weight: var(--font-weight);
-  line-height: var(--line-height);
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-lg);
 }
@@ -214,7 +242,7 @@
 }
 
 :host(.pds-chip--large) {
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-lg);
   padding-block: var(--spacing-sm);
   padding-inline: var(--spacing-xxl);
 }
@@ -226,7 +254,7 @@
   margin-block-end: 0;
 }
 :host(.pds-chip--large) .pds-chip__button {
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-lg);
   padding-inline: var(--spacing-xl);
 }
 :host(.pds-chip--large) .pds-chip__close {

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

@@ -1,8 +1,7 @@
 :host(.pds-copytext) {
   --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
   --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --border-radius-default: var(--pine-border-radius-125);
-  --border-radius-hover: var(--pine-border-radius-0);
+  --border-radius-default: var(--pine-border-radius-circle);
   --border-width-default: var(--pine-border-width-none);
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
   --color-background-default: var(--pine-color-white);
@@ -10,7 +9,7 @@
   --color-text-hover: var(--pine-color-grey-900);
   --copytext-color-background-hover: var(--pine-color-grey-200);
   --font-size-default: var(--pine-font-size-100);
-  --font-weight-default: var(--pine-font-weight-semi-bold);
+  --font-weight-default: var(--pine-font-weight-body-medium);
   --spacing-bordered-margin-inline-end: var(--pine-spacing-200);
   --spacing-bordered-padding-block: var(--pine-spacing-100);
   --spacing-bordered-padding-inline: var(--pine-spacing-200);
@@ -18,7 +17,7 @@
   --spacing-padding-block: var(--pine-spacing-050);
   --spacing-padding-inline: var(--pine-spacing-100);
   --spacing-padding-none: var(--pine-spacing-0);
-  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading);
 }
 :host(.pds-copytext) pds-button {
   align-items: center;
@@ -30,12 +29,15 @@
   max-width: 100%;
   padding: var(--spacing-padding-block) var(--spacing-padding-inline);
 }
+:host(.pds-copytext) pds-button::part(button) {
+  padding-inline-end: calc(var(--spacing-padding-inline) / 2);
+}
 :host(.pds-copytext) pds-button::part(button):hover {
   background-color: var(--copytext-color-background-hover);
-  border-radius: var(--border-radius-hover);
   color: var(--color-text-hover);
 }
 :host(.pds-copytext) pds-button span {
+  font-weight: var(--font-weight-default);
   margin-inline-end: var(--spacing-margin-inline-end);
   white-space: nowrap;
 }

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

@@ -1,5 +1,5 @@
 :host {
-  --color-background-default: var(--pine-color-grey-400);
+  --color-background-default: var(--pine-color-grey-200);
   --spacing-offset-xxs: var(--pine-spacing-050);
   --spacing-offset-xs: var(--pine-spacing-100);
   --spacing-offset-sm: var(--pine-spacing-200);

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

@@ -8,6 +8,4 @@
 
 img {
   aspect-ratio: var(--dimension-aspect-ratio);
-  height: auto;
-  width: 100%;
 }

package/dist/collection/components/pds-image/stories/pds-image.stories.js

@@ -22,14 +22,16 @@ const SizesAndSrcsetTemplate = (args) => html`<pds-image alt="${args.alt}" sizes
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  alt: 'Random Unsplash',
-  src: '//source.unsplash.com/320x180',
+  alt: 'Random Bear',
+  src: 'https://placebear.com/320/180',
+  height: '180',
+  width: '320'
 }
 
 export const SizesAndSrcset = SizesAndSrcsetTemplate.bind();
 SizesAndSrcset.args = {
-  alt: 'Random Unsplash',
+  alt: 'Random Bear',
   sizes: '(max-width: 450px) 150px, 600px',
-  src: '//source.unsplash.com/600x200',
-  srcset: '//source.unsplash.com/150x150 400w, //source.unsplash.com/600x200',
+  src: 'https://placebear.com/600/200',
+  srcset: 'https://placebear.com/150/150 400w, https://placebear.com/600/200',
 }

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

@@ -1,13 +1,18 @@
 :host {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-grey-950);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);
   --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
+  --color-background-error: var(--pine-color-red-050);
+  --color-border-active: var(--pine-color-grey-400);
+  --color-border-default: var(--pine-color-grey-300);
+  --color-border-disabled: var(--pine-color-grey-200);
+  --color-border-error: var(--pine-color-red-600);
   --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-grey-700);
+  --color-text-default: var(--pine-color-grey-950);
+  --color-text-disabled: var(--pine-color-grey-600);
+  --color-text-error: var(--pine-color-red-600);
+  --color-text-placeholder: var(--pine-color-grey-600);
+  --color-text-placeholder-disabled: var(--pine-color-grey-400);
   --font-size-helper-message: var(--pine-font-size-100);
   --font-size-input-field: var(--pine-font-size-100);
   --font-size-label: var(--pine-font-size-100);
@@ -48,29 +53,46 @@ input {
 }
 input:disabled {
   background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
+  border-color: var(--color-border-disabled);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+input:disabled::-webkit-input-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled::-moz-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled::-moz-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled:-ms-input-placeholder {
+  color: var(--color-text-placeholder-disabled);
 }
 input:hover {
   border-color: var(--color-border-hover);
 }
 input:focus-visible {
+  border-color: var(--color-border-active);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input:has(~ .pds-input__error-message) {
+  background-color: var(--color-background-error);
   border-color: var(--color-border-error);
 }
 input:has(~ .pds-input__error-message):focus-visible {
@@ -88,5 +110,5 @@ input:has(~ .pds-input__error-message):focus-visible {
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  color: var(--color-text-error);
 }

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

@@ -2,15 +2,16 @@
   --border-outline: 4px solid var(--pine-color-blue-200);
   --border-radius: var(--pine-border-radius-075);
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --color-text-default: var(--pine-color-grey-900);
-  --font-size: var(--pine-font-size-100);
-  --font-size-sm: var(--pine-font-size-085);
-  --font-size-xs: var(--pine-font-size-085);
-  --font-weight: var(--pine-font-weight-medium);
+  --color-text-default: var(--pine-color-text-default);
+  --color-text-hover: var(--pine-color-grey-900);
+  --font-size-default: var(--pine-font-size-body-md);
+  --font-size-sm: var(--pine-font-size-body-sm);
+  --font-size-xs: var(--pine-font-size-body-xs);
+  --font-weight: var(--pine-font-weight-body-medium);
   --spacing-inline-start-margin: var(--pine-spacing-050);
-  --sizing-svg-lg: 15px;
-  --sizing-svg-md: 13px;
-  --sizing-svg-sm: 11px;
+  --sizing-svg-lg: var(--font-size-default);
+  --sizing-svg-md: var(--font-size-sm);
+  --sizing-svg-sm: var(--font-size-xs);
   display: inline;
 }
 :host pds-icon {
@@ -21,7 +22,7 @@
   align-items: center;
   color: var(--color-text);
   display: inline-flex;
-  font-weight: inherit;
+  font-weight: var(--font-weight);
 }
 .pds-link:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -46,7 +47,7 @@
 }
 
 .pds-link--lg {
-  font-size: var(--font-size);
+  font-size: var(--font-size-default);
 }
 .pds-link--lg pds-icon {
   height: var(--sizing-svg-lg);
@@ -54,10 +55,10 @@
 }
 
 .pds-link--plain {
-  font-weight: var(--font-weight);
   text-decoration: none;
 }
 .pds-link--plain:hover {
+  color: var(--color-text-hover);
   text-decoration: underline;
 }
 
@@ -65,5 +66,6 @@
   text-decoration: underline;
 }
 .pds-link--default:hover {
+  color: var(--color-text-hover);
   text-decoration: none;
 }

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

@@ -39,10 +39,10 @@
 }
 .pds-loader--typing {
   --border-radius-typing: var(--pine-border-radius-200);
-  --border-radius-typing-dot: var(--pine-border-radius-round);
+  --border-radius-typing-dot: var(--pine-border-radius-circle);
   --box-shadow-typing: var(--pine-box-shadow-100);
-  --color-background-typing-default: var(--pine-color-grey-200);
-  --color-background-typing-dot-default: var(--pine-color-grey-500);
+  --color-background-typing-default: var(--pine-color-grey-100);
+  --color-background-typing-dot-default: var(--pine-color-grey-400);
   --number-typing-timing: 1s;
   --opacity-typing-dot-default: 0.4;
   --opacity-typing-dot-active: 1;

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

@@ -1,5 +1,5 @@
 :host {
-  --color-progress-fill: var(--pine-color-blue-300);
+  --color-progress-fill: var(--pine-color-mercury-500);
   --sizing-progress-bar-height: 8px;
   --sizing-progress-bar-width: 100%;
   align-items: center;
@@ -17,7 +17,7 @@
 }
 .pds-progress {
   --border-radius: var(--pine-border-radius-050);
-  --color-progress-bar-background: var(--pine-color-grey-300);
+  --color-progress-bar-background: var(--pine-color-grey-200);
   align-items: center;
   background-color: var(--color-progress-bar-background);
   border-radius: var(--border-radius);
@@ -44,14 +44,14 @@ progress::-webkit-progress-bar {
 
 progress::-webkit-progress-value {
   --border-radius: var(--pine-border-radius-050);
-  --color-background: var(--pine-color-blue-300);
+  --color-background: var(--pine-color-mercury-500);
   background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
 
 progress::-moz-progress-bar {
-  --color-background: var(--pine-color-blue-300);
   --border-radius: var(--pine-border-radius-050);
+  --color-background: var(--pine-color-mercury-500);
   background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
@@ -68,12 +68,8 @@ progress::-moz-progress-bar {
 }
 
 .pds-progress__percentage {
-  --font-size: var(--pine-font-size-085);
   --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-150);
   --spacing-inline-start-margin: var(--pine-spacing-300);
-  font-size: var(--font-size);
   font-weight: var(--font-weight);
-  line-height: var(--line-height);
   margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
 }

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

@@ -1,20 +1,24 @@
 :host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
-  --border-radius: 50%;
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-invalid-focus);
-  --color: var(--pine-color-grey-700);
-  --color-background: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-grey-100);
-  --color-background-disabled: var(--pine-color-grey-200);
-  --color-border-hover: var(--pine-color-grey-500);
+  --border-interactive-default: var(--pine-border-interactive-default);
+  --border-interactive-hover: var(--pine-border-interactive-hover);
+  --border-radius: var(--pine-border-radius-circle);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);
+  --color-background-checked: var(--pine-color-purple-500);
+  --color-background-checked-hover: var(--pine-color-purple-600);
+  --color-background-default: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-100);
+  --color-background-hover: var(--pine-color-grey-50);
+  --color-background-checked-invalid: var(--pine-color-red-500);
+  --color-background-checked-invalid-hover: var(--pine-color-red-600);
+  --color-border-checked-hover: var(--pine-color-purple-600);
   --color-border-disabled: var(--pine-color-grey-300);
-  --color-checked: var(--pine-color-grey-950);
-  --color-disabled: var(---pine-color-grey-500);
-  --color-focus: var(--pine-color-purple-300);
-  --color-invalid: var(--pine-color-red-300);
-  --color-invalid-focus: var(--pine-color-red-200);
-  --font-size: var(--pine-font-size-085);
+  --color-border-invalid: var(--pine-color-red-500);
+  --color-border-checked-invalid-hover: var(--pine-color-red-600);
+  --color-text-invalid: var(--pine-color-red-500);
+  --color-text-disabled: var(---pine-color-grey-600);
+  --color-text-message-default: var(--pine-color-grey-800);
+  --color-text-message-disabled: var(--pine-color-grey-500);
   --sizing-check-size: 6px;
   --sizing-input-size: 16px;
   --sizing-margin-block-start: 6px;
@@ -24,10 +28,14 @@
 }
 
 :host(.is-invalid) input {
-  border-color: var(--color-invalid);
+  border-color: var(--color-border-invalid);
 }
 :host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+  background: var(--color-background-checked-invalid);
+}
+:host(.is-invalid) input:checked:hover {
+  background: var(--color-background-checked-invalid-hover);
+  border-color: var(--color-border-checked-invalid-hover);
 }
 :host(.is-invalid) input:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -35,7 +43,7 @@
 }
 :host(.is-invalid) label,
 :host(.is-invalid) .pds-radio__message--error {
-  color: var(--color-invalid);
+  color: var(--color-text-invalid);
 }
 
 input {
@@ -49,14 +57,18 @@ input {
 }
 input:hover {
   background: var(--color-background-hover);
-  border-color: var(--color-border-hover);
+  border: var(--border-interactive-hover);
 }
 input:checked {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
+  background: var(--color-background-checked);
+  border-color: var(--color-background-checked);
+}
+input:checked:hover {
+  background: var(--color-background-checked-hover);
+  border-color: var(--color-border-checked-hover);
 }
 input:checked::after {
-  background: var(--color-background);
+  background: var(--color-background-default);
   border-radius: 50%;
   content: "";
   display: block;
@@ -73,7 +85,6 @@ input:disabled {
   cursor: not-allowed;
 }
 input:disabled:checked {
-  background: var(--color-disabled);
   border-color: var(--color-border-disabled);
 }
 input:disabled:checked::after {
@@ -84,7 +95,7 @@ input:disabled + label {
   cursor: not-allowed;
 }
 input:disabled ~ .pds-radio__message {
-  color: var(--color-disabled);
+  color: var(--color-text-message-disabled);
 }
 input:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -96,8 +107,7 @@ label {
 }
 
 .pds-radio__message {
-  color: var(--color);
-  font-size: var(--font-size);
+  color: var(--pine-color-grey-800);
   margin-block-start: var(--sizing-margin-block-start);
   margin-inline-start: 26px;
   width: 100%;