chore: fixes small variable issues

libs/core/src/components/_internal/pds-label/pds-label.scss

@@ -4,7 +4,7 @@
 }
 
 label, pds-label {
-  --color-text-default: var(--pine-color-neutral-charcoal-400);
+  --color-text-default: var(--pine-color-charcoal-400);
 
   --font-family-default: var(--pine-font-family-circular);
 

libs/core/src/components/pds-accordion/pds-accordion.scss

@@ -3,8 +3,6 @@
 }
 
 details {
-  --animation-transform-timing: 200ms;
-
   --border-radius-default: var(--pine-border-radius-100);
 
   --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
@@ -15,6 +13,8 @@ details {
   --color-text-active: var(--pine-color-charcoal-500);
   --color-text-hover: var(--pine-color-charcoal-300);
 
+  --number-animation-transform-timing: 200ms;
+
   --spacing-details-padding-inline: var(--pine-spacing-150);
   --spacing-summary-padding-block: var(--pine-spacing-050);
   --spacing-summary-padding-inline-start: var(--pine-spacing-100);
@@ -27,7 +27,7 @@ details {
 
   pds-icon {
     transform: scaleY(1);
-    transition: transform var(--animation-transform-timing);
+    transition: transform var(--number-animation-transform-timing);
   }
 }
 
@@ -50,15 +50,15 @@ details {
 /* stylelint-disable-next-line */
 details[open] {
   background-color: var(--color-content-background);
-  transition: transform var(--animation-transform-timing);
+  transition: transform var(--number-animation-transform-timing);
 
   summary {
     color: var(--color-text-active);
     font: var(--typography-default);
 
     pds-icon {
       transform: scaleY(-1);
-      transition: transform var(--animation-transform-timing);
+      transition: transform var(--number-animation-transform-timing);
     }
   }
 
@@ -110,7 +110,7 @@ summary {
 }
 
 .pds-accordion__body {
-  animation: slide-down var(--animation-transform-timing);
+  animation: slide-down var(--number-animation-transform-timing);
   max-height: 0;
   overflow: hidden;
 }

libs/core/src/components/pds-button/pds-button.scss

@@ -8,36 +8,36 @@
   --color-border-hover: transparent;
 
   // primary
-  --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-background-primary-default: var(--pine-color-charcoal-400);
+  --color-background-primary-disabled: var(--pine-color-grey-300);
+  --color-background-primary-hover: var(--pine-color-charcoal-500);
+  --color-text-primary-default: var(--pine-color-white);
+  --color-text-primary-disabled: var(--pine-color-charcoal-100);
   --color-outline-primary: var(--pine-color-blue-200);
 
   // secondary
   --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-text-secondary-default: var(--pine-color-charcoal-400);
+  --color-text-secondary-disabled: var(--pine-color-charcoal-100);
   --color-outline-secondary: var(--pine-color-blue-200);
 
   // accent
-  --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-background-accent-default: var(--pine-color-blue-300);
+  --color-background-accent-disabled: var(--pine-color-blue-100);
+  --color-background-accent-hover: var(--pine-color-blue-400);
+  --color-text-accent-default: var(--pine-color-white);
+  --color-text-accent-disabled: var(--pine-color-blue-200);
   --color-outline-accent: var(--pine-color-blue-200);
 
   // destructive
-  --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-background-destructive-default: var(--pine-color-red-300);
+  --color-background-destructive-disabled: var(--pine-color-red-100);
+  --color-background-destructive-hover: var(--pine-color-red-400);
+  --color-text-destructive-default: var(--pine-color-white);
+  --color-text-destructive-disabled: var(--pine-color-red-200);
   --color-outline-destructive: var(--pine-color-red-200);
 
   --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);
@@ -47,7 +47,7 @@
   --spacing-padding-inline: var(--pine-spacing-200);
   --spacing-unstyled: var(--pine-spacing-0);
 
-  --typography-default: var(--pine-body-med);
+  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
 
   display: inline-flex;
   vertical-align: middle;

libs/core/src/components/pds-button/stories/pds-button.stories.js

@@ -54,6 +54,7 @@ Primary.args = {
   disabled: false,
   slot: 'Primary',
   type: 'button',
+  variant: 'primary'
 }
 
 export const Secondary = BaseTemplate.bind({});

libs/core/src/components/pds-checkbox/pds-checkbox.scss

@@ -1,9 +1,13 @@
 :host {
   --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-background: var(--pine-color-white);
   --color-background-disabled: var(--pine-color-grey-200);
   --color-background-hover: var(--pine-color-grey-100);
@@ -14,6 +18,7 @@
   --color-invalid: var(--pine-color-red-300);
   --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;

libs/core/src/components/pds-input/pds-input.scss

@@ -2,7 +2,7 @@
   --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
   --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
 
-  --color-text-default: var(-pine-color-charcoal-500);
+  --color-text-default: var(--pine-color-charcoal-500);
   --color-background-disabled: var(--pine-color-grey-100);
   --color-border-default: var(--pine-color-grey-400);
   --color-border-error: var(--pine-color-red-300);

libs/core/src/components/pds-progress/pds-progress.scss

@@ -1,5 +1,6 @@
 :host {
   --color-progress-fill: var(--pine-color-blue-300);
+
   --sizing-progress-bar-height: 8px;
   --sizing-progress-bar-width: 100%;
 

libs/core/src/components/pds-radio/pds-radio.scss

@@ -1,6 +1,7 @@
 :host {
   --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
   --border-radius: 50%;
+
   --box-shadow-focus: 0 0 0 2px var(--color-focus);
   --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);
 

libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss

@@ -1,10 +1,14 @@
 :host(.pds-sortable-item) {
   --border-radius: var(--pine-border-radius-125);
-  --border-default: var(--pine-border-default);
+
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+
   --box-shadow: var(--pine-box-shadow-lg);
+
   --color-background-default: var(--pine-color-white);
   --color-background-interactive: var(--pine-color-grey-200);
   --color-interactive-handle: var(--pine-color-blue-300);
+
   --spacing-margin-inline-end: var(--pine-spacing-300);
   --spacing-padding-block-xs: var(--pine-spacing-100);
   --spacing-padding-inline: var(--pine-spacing-300);

libs/core/src/components/pds-sortable/pds-sortable.scss

@@ -1,5 +1,6 @@
 :host(.pds-sortable) {
   --border-radius: var(--pine-border-radius-050);
+
   --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
 
   display: flex;

libs/core/src/components/pds-switch/pds-switch.scss

@@ -1,5 +1,6 @@
 :host {
   --border-radius-input: var(--pine-border-radius-200);
+
   --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);
   --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);
   --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
@@ -23,12 +24,13 @@
   --line-height-label: var(--pine-line-height-150);
 
   --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));
-  --sizing-label-gap-size: 12px;
-  --spacing-input-toggle-offset: 2px;
+
+  --spacing-label-gap-size: var(--pine-spacing-150);
+  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);
   --spacing-message-block: var(--pine-spacing-050);
-  --spacing-message-inline: calc(var(--dimension-input-width) + var(--sizing-label-gap-size));
+  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));
 
-  --transition-timing: 0.15s ease-out;
+  --number-transition-timing: 0.15s ease-out;
 
 
   align-items: flex-start;
@@ -66,7 +68,7 @@ input {
   padding: 0;
   position: relative;
   transform: translateY(2px);
-  transition: var(--transition-timing);
+  transition: var(--number-transition-timing);
   transition-property: background, border, color;
   width: var(--dimension-input-width);
 
@@ -82,7 +84,7 @@ input {
     inset-inline-start: 50%;
     position: absolute;
     transform: translate3d(-100%, -50%, 0);
-    transition: transform var(--transition-timing);
+    transition: transform var(--number-transition-timing);
     width: var(--sizing-input-toggle-size);
   }
 }
@@ -92,7 +94,7 @@ label {
   display: inline-flex;
   flex-grow: 1;
   line-height: var(--line-height-label);
-  margin-inline-start: var(--sizing-label-gap-size);
+  margin-inline-start: var(--spacing-label-gap-size);
 
   .pds-switch--error & {
     color: inherit;

libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss

@@ -1,10 +1,11 @@
 :host {
   --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+
   --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
 
   --color-background-fixed: var(--pine-color-white);
   --color-sorting: var(--pine-color-charcoal-500);
-  --color-default: var(--pine-color-charcoal-200);
+  --color-text-default: var(--pine-color-charcoal-200);
 
   --dimension-fixed-cell-position: 0;
 
@@ -20,7 +21,7 @@
   --spacing-padding-block-compact: var(--pine-spacing-050);
 
   border-block-end: var(--border-head-cell-default);
-  color: var(--color-default);
+  color: var(--color-text-default);
   display: table-cell;
   font-size: var(--font-size-head-cell);
   font-style: normal;

libs/core/src/components/pds-table/pds-table-head/pds-table-head.scss

@@ -1,5 +1,6 @@
 :host {
   --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+
   --color-background-fixed: var(--pine-color-base-white);
 
   border-color: inherit;

libs/core/src/components/pds-tabs/pds-tabs.scss

@@ -9,10 +9,10 @@
   --spacing-panel-padding: 0;
 
   --outline: 2px solid var(--pine-color-blue-200);
-  
+
   --spacing-gap-availability: var(--pine-spacing-100);
   --spacing-gap-default: var(--pine-spacing-300);
-  --spacing-gap-filter: 16px var(--pine-spacing-200);
+  --spacing-gap-filter: var(--pine-spacing-200);
 
   display: block;
 }

libs/core/src/components/pds-tooltip/pds-tooltip.scss

@@ -1,17 +1,24 @@
 :host {
   --border-radius-overlay: var(--pine-border-radius-125);
+
   --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
   --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
   --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
   --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
+
   --box-shadow-default: var(--pine-box-shadow-md);
+
   --color-background-default: var(--pine-color-charcoal-400);
   --color-text-default: var(--pine-color-white);
+
   --font-size-overlay: var(--pine-font-size-087);
+
   --line-height-overlay: var(--pine-line-height-125);
+
   --sizing-arrow-default: 6px;
   --sizing-arrow-offset: 14px;
   --sizing-width-default: 320px;
+
   --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
 
   display: inline-block;