From a7b20722beb5e62c9b922b35d038d7e4a0af56d2 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Tue, 13 Aug 2024 12:40:11 -0500
Subject: [PATCH] style: various token changes (#239)

* fix: update font size refs

* fix: remove leading zero and correct font-size

* fix: update charcoal to grey

* fix: add back zeroes

* fix: added zeroes to semantic tokens

* fix: added zeroes to component token refs

* fix: update accordion padding

* fix: added back 0
---
 .../_internal/pds-label/pds-label.scss        |   2 +-
 .../pds-accordion/pds-accordion.scss          |   8 +-
 .../src/components/pds-button/pds-button.scss |  10 +-
 .../components/pds-checkbox/pds-checkbox.scss |   6 +-
 .../src/components/pds-chip/pds-chip.scss     |   4 +-
 .../components/pds-copytext/pds-copytext.scss |   2 +-
 .../src/components/pds-input/pds-input.scss   |   4 +-
 .../src/components/pds-link/pds-link.scss     |   8 +-
 .../components/pds-progress/pds-progress.scss |   2 +-
 .../src/components/pds-radio/pds-radio.scss   |   6 +-
 .../src/components/pds-switch/pds-switch.scss |   8 +-
 .../pds-table-cell/pds-table-cell.scss        |   4 +-
 .../pds-table-head-cell.scss                  |   6 +-
 .../components/pds-tabs/pds-tab/pds-tab.scss  |  12 +-
 .../components/pds-textarea/pds-textarea.scss |   8 +-
 .../components/pds-tooltip/pds-tooltip.scss   |   4 +-
 .../src/global/styles/tokens/core/_core.scss  |  42 ++---
 .../src/global/styles/tokens/core/core.json   | 144 +++++++++---------
 .../styles/tokens/semantic/semantic.json      |  10 +-
 19 files changed, 145 insertions(+), 145 deletions(-)

diff --git a/libs/core/src/components/_internal/pds-label/pds-label.scss b/libs/core/src/components/_internal/pds-label/pds-label.scss
index 6d9b2957e..302811e26 100644
--- a/libs/core/src/components/_internal/pds-label/pds-label.scss
+++ b/libs/core/src/components/_internal/pds-label/pds-label.scss
@@ -4,7 +4,7 @@
 }
 
 label, pds-label {
-  --color-text-default: var(--pine-color-charcoal-400);
+  --color-text-default: var(--pine-color-grey-900);
 
   --font-family-default: var(--pine-font-family-circular);
 
diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss
index 1a535c6d8..3a9d9d56b 100644
--- a/libs/core/src/components/pds-accordion/pds-accordion.scss
+++ b/libs/core/src/components/pds-accordion/pds-accordion.scss
@@ -18,10 +18,10 @@ details {
   --number-animation-transform-timing: 200ms;
 
   --spacing-details-padding-inline: var(--pine-spacing-150);
-  --spacing-details-padding-block: var(--pine-spacing-100);
-  --spacing-summary-padding-block: var(--pine-spacing-50);
+  --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2) //18 + 2 = 18px;
+  --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2) //12 / 2 = 6px;
   --spacing-summary-padding-inline-start: var(--pine-spacing-100);
-  --spacing-summary-padding-inline-end: var(--pine-spacing-50);
+  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
 
   --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-inter);
 
@@ -85,6 +85,6 @@ summary {
 }
 
 .pds-accordion__body {
-  padding-block: var(--spacing-details-padding-block);
+  padding-block-end: var(--spacing-details-padding-block-end);
   padding-inline: var(--spacing-details-padding-inline);
 }
diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss
index 1111a856e..1e6a7b48d 100644
--- a/libs/core/src/components/pds-button/pds-button.scss
+++ b/libs/core/src/components/pds-button/pds-button.scss
@@ -8,11 +8,11 @@
   --color-border-hover: transparent;
 
   // primary
-  --color-background-primary-default: var(--pine-color-charcoal-400);
+  --color-background-primary-default: var(--pine-color-grey-900);
   --color-background-primary-disabled: var(--pine-color-grey-300);
-  --color-background-primary-hover: var(--pine-color-charcoal-500);
+  --color-background-primary-hover: var(--pine-color-grey-950);
   --color-text-primary-default: var(--pine-color-white);
-  --color-text-primary-disabled: var(--pine-color-charcoal-100);
+  --color-text-primary-disabled: var(--pine-color-grey-600);
   --color-outline-primary: var(--pine-color-blue-200);
 
   // secondary
@@ -20,8 +20,8 @@
   --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-charcoal-400);
-  --color-text-secondary-disabled: var(--pine-color-charcoal-100);
+  --color-text-secondary-default: var(--pine-color-grey-900);
+  --color-text-secondary-disabled: var(--pine-color-grey-600);
   --color-outline-secondary: var(--pine-color-blue-200);
 
   // accent
diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.scss b/libs/core/src/components/pds-checkbox/pds-checkbox.scss
index 939ac30e4..581dd4943 100644
--- a/libs/core/src/components/pds-checkbox/pds-checkbox.scss
+++ b/libs/core/src/components/pds-checkbox/pds-checkbox.scss
@@ -11,13 +11,13 @@
   --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-disabled: var(--pine-color-grey-600);
   --color-border-icon: var(--pine-color-white);
-  --color-checked: var(--pine-color-charcoal-500);
+  --color-checked: var(--pine-color-grey-950);
   --color-disabled: var(--pine-color-grey-300);
   --color-invalid: var(--pine-color-red-300);
   --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-message: var(--pine-color-charcoal-200);
+  --color-text-message: var(--pine-color-grey-700);
 
   --sizing-input: var(--pine-font-size-100);
 
diff --git a/libs/core/src/components/pds-chip/pds-chip.scss b/libs/core/src/components/pds-chip/pds-chip.scss
index 31fdb43d7..3a4e13a94 100644
--- a/libs/core/src/components/pds-chip/pds-chip.scss
+++ b/libs/core/src/components/pds-chip/pds-chip.scss
@@ -12,7 +12,7 @@
   --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-dot: var(--pine-color-grey-600);
   --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);
@@ -21,7 +21,7 @@
   --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-sm: var(--pine-font-size-085);
   --font-size-body: var(--pine-font-size-100);
   --font-weight: var(--pine-font-weight-medium);
   --line-height: var(--pine-line-height-100);
diff --git a/libs/core/src/components/pds-copytext/pds-copytext.scss b/libs/core/src/components/pds-copytext/pds-copytext.scss
index 3d8920f62..d20e1991e 100644
--- a/libs/core/src/components/pds-copytext/pds-copytext.scss
+++ b/libs/core/src/components/pds-copytext/pds-copytext.scss
@@ -12,7 +12,7 @@
 
   --color-background-default: var(--pine-color-white);
   --color-border-interactive-hover: var(--pine-color-grey-400);
-  --color-text-hover: var(--pine-color-charcoal-400);
+  --color-text-hover: var(--pine-color-grey-900);
   // Update custom prop usage in Button before changing
   --copytext-color-background-hover: var(--pine-color-grey-200);
 
diff --git a/libs/core/src/components/pds-input/pds-input.scss b/libs/core/src/components/pds-input/pds-input.scss
index b92232342..e6984bd34 100644
--- a/libs/core/src/components/pds-input/pds-input.scss
+++ b/libs/core/src/components/pds-input/pds-input.scss
@@ -2,13 +2,13 @@
   --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-grey-950);
   --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-border-hover: var(--pine-color-grey-500);
   --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-charcoal-200);
+  --color-placeholder-text: var(--pine-color-grey-700);
 
   --font-size-helper-message: var(--pine-font-size-100);
   --font-size-input-field: var(--pine-font-size-100);
diff --git a/libs/core/src/components/pds-link/pds-link.scss b/libs/core/src/components/pds-link/pds-link.scss
index 352f03e13..5669ab53e 100644
--- a/libs/core/src/components/pds-link/pds-link.scss
+++ b/libs/core/src/components/pds-link/pds-link.scss
@@ -4,14 +4,14 @@
   --border-radius: var(--pine-border-radius-075);
   --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
 
-  --color-text-default: var(--pine-color-charcoal-400);
+  --color-text-default: var(--pine-color-grey-900);
 
   --font-size: var(--pine-font-size-100);
-  --font-size-sm: var(--pine-font-size-087);
-  --font-size-xs: var(--pine-font-size-075);
+  --font-size-sm: var(--pine-font-size-085);
+  --font-size-xs: var(--pine-font-size-085);
   --font-weight: var(--pine-font-weight-medium);
 
-  --spacing-inline-start-margin: var(--pine-spacing-50);
+  --spacing-inline-start-margin: var(--pine-spacing-050);
   --sizing-svg-lg: 15px;
   --sizing-svg-md: 13px;
   --sizing-svg-sm: 11px;
diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss
index 767bb2b29..5616690ee 100644
--- a/libs/core/src/components/pds-progress/pds-progress.scss
+++ b/libs/core/src/components/pds-progress/pds-progress.scss
@@ -75,7 +75,7 @@ progress::-moz-progress-bar {
 }
 
 .pds-progress__percentage {
-  --font-size: var(--pine-font-size-087);
+  --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);
diff --git a/libs/core/src/components/pds-radio/pds-radio.scss b/libs/core/src/components/pds-radio/pds-radio.scss
index 8ed8742f5..379504e0a 100644
--- a/libs/core/src/components/pds-radio/pds-radio.scss
+++ b/libs/core/src/components/pds-radio/pds-radio.scss
@@ -5,19 +5,19 @@
   --box-shadow-focus: 0 0 0 2px var(--color-focus);
   --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);
 
-  --color: var(--pine-color-charcoal-200);
+  --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);
   --color-border-disabled: var(--pine-color-grey-300);
-  --color-checked: var(--pine-color-charcoal-500);
+  --color-checked: var(--pine-color-grey-950);
   --color-disabled: var(---pine-color-grey-500);
   --color-focus: var(--pine-color-blue-200);
   --color-invalid: var(--pine-color-red-300);
   --color-invalid-focus: var(--pine-color-red-200);
 
-  --font-size: var(--pine-font-size-087);
+  --font-size: var(--pine-font-size-085);
 
   --sizing-check-size: 6px;
   --sizing-input-size: 16px;
diff --git a/libs/core/src/components/pds-switch/pds-switch.scss b/libs/core/src/components/pds-switch/pds-switch.scss
index a05bf7793..845be731a 100644
--- a/libs/core/src/components/pds-switch/pds-switch.scss
+++ b/libs/core/src/components/pds-switch/pds-switch.scss
@@ -5,16 +5,16 @@
   --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);
 
-  --color-background-checked: var(--pine-color-charcoal-400);
-  --color-background-checked-hover: var(--pine-color-charcoal-400);
+  --color-background-checked: var(--pine-color-grey-900);
+  --color-background-checked-hover: var(--pine-color-grey-900);
   --color-background-disabled: var(--pine-color-grey-300);
   --color-background-hover: var(--pine-color-grey-500);
   --color-background-input-default: var(--pine-color-grey-400);
   --color-input-toggle: var(--pine-color-white);
-  --color-message-text: var(--pine-color-charcoal-200);
+  --color-message-text: var(--pine-color-grey-700);
   --color-outline-focus: var(--pine-color-blue-200);
   --color-outline-focus-error: var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-400);
+  --color-text-default: var(--pine-color-grey-900);
   --color-text-disabled: var(--pine-color-grey-500);
   --color-text-error: var(--pine-color-red-300);
 
diff --git a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.scss b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.scss
index da081fccb..c90398644 100644
--- a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.scss
+++ b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.scss
@@ -2,12 +2,12 @@
   --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);
 
   --color-background-fixed: var(--pine-color-white);
-  --color-cell-default: var(--pine-color-charcoal-200);
+  --color-cell-default: var(--pine-color-grey-700);
 
   --dimension-fixed-cell-position: 0;
   --dimension-max-width-truncated: 100px;
 
-  --font-size-cell-default: var(--pine-font-size-087);
+  --font-size-cell-default: var(--pine-font-size-085);
 
   --number-fixed-column-index: 0;
 
diff --git a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss
index f61d2fd5e..14dc7215d 100644
--- a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss
+++ b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss
@@ -4,12 +4,12 @@
   --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-text-default: var(--pine-color-charcoal-200);
+  --color-sorting: var(--pine-color-grey-950);
+  --color-text-default: var(--pine-color-grey-700);
 
   --dimension-fixed-cell-position: 0;
 
-  --font-size-head-cell: var(--pine-font-size-087);
+  --font-size-head-cell: var(--pine-font-size-085);
   --font-weight-cell-default: var(--pine-font-weight-normal);
 
   --line-height-cell-default: var(--pine-line-height-125);
diff --git a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.scss b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.scss
index 09ec933f7..1d0d5c125 100644
--- a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.scss
+++ b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.scss
@@ -7,18 +7,18 @@ pds-tab {
 
   --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
 
-  --color-background-active: var(--pine-color-charcoal-400);
+  --color-background-active: var(--pine-color-grey-900);
   --color-background-availability: var(--pine-color-white);
   --color-background-default: var(--pine-color-grey-300);
   --color-background-hover: var(--pine-color-grey-400);
-  --color-text-active: var(--pine-color-charcoal-400);
+  --color-text-active: var(--pine-color-grey-900);
   --color-text-active-inverse: var(--pine-color-white);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --color-text-focus: var(--pine-color-charcoal-300);
+  --color-text-default: var(--pine-color-grey-700);
+  --color-text-focus: var(--pine-color-grey-800);
 
-  --font-size-availability-content: var(--pine-font-size-075);
+  --font-size-availability-content: var(--pine-font-size-085);
   --font-size-default: var(--pine-font-size-100);
-  --font-size-filter-content: var(--pine-font-size-087);
+  --font-size-filter-content: var(--pine-font-size-085);
 
   --font-weight-default: var(--pine-font-weight-medium);
 
diff --git a/libs/core/src/components/pds-textarea/pds-textarea.scss b/libs/core/src/components/pds-textarea/pds-textarea.scss
index 7513bb849..c4f6517d8 100644
--- a/libs/core/src/components/pds-textarea/pds-textarea.scss
+++ b/libs/core/src/components/pds-textarea/pds-textarea.scss
@@ -4,21 +4,21 @@
   --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);
   --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);
 
-  --color: var(--pine-color-charcoal-400);
+  --color: var(--pine-color-grey-900);
   --color-background: var(--pine-color-white);
   --color-background-disabled: var(--pine-color-grey-200);
   --color-border-default: var(--pine-color-grey-400);
   --color-border-error: var(--pine-color-red-300);
   --color-border-focus-visible: var(--pine-color-grey-300);
   --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-default: var(--pine-color-charcoal-200);
+  --color-disabled-default: var(--pine-color-grey-700);
   --color-error-default: var(--pine-color-red-300);
   --color-focus-visible-outline: var(--pine-color-blue-200);
   --color-focus-visible-outline-error: var(--pine-color-red-200);
-  --color-placeholder-default: var(--pine-color-charcoal-200);
+  --color-placeholder-default: var(--pine-color-grey-700);
 
   --font-size-field: var(--pine-font-size-100);
-  --font-size-helper-message: var(--pine-font-size-075);
+  --font-size-helper-message: var(--pine-font-size-100);
   --font-size-label: var(--pine-font-size-100);
   --font-weight-field: var(--pine-font-weight-normal);
   --font-weight-helper-message: var(--pine-font-weight-normal);
diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.scss b/libs/core/src/components/pds-tooltip/pds-tooltip.scss
index 36070a338..ce7605730 100644
--- a/libs/core/src/components/pds-tooltip/pds-tooltip.scss
+++ b/libs/core/src/components/pds-tooltip/pds-tooltip.scss
@@ -8,10 +8,10 @@
 
   --box-shadow-default: var(--pine-box-shadow-md);
 
-  --color-background-default: var(--pine-color-charcoal-400);
+  --color-background-default: var(--pine-color-grey-900);
   --color-text-default: var(--pine-color-white);
 
-  --font-size-overlay: var(--pine-font-size-087);
+  --font-size-overlay: var(--pine-font-size-085);
 
   --line-height-overlay: var(--pine-line-height-125);
 
diff --git a/libs/core/src/global/styles/tokens/core/_core.scss b/libs/core/src/global/styles/tokens/core/_core.scss
index 729712196..7d8304feb 100644
--- a/libs/core/src/global/styles/tokens/core/_core.scss
+++ b/libs/core/src/global/styles/tokens/core/_core.scss
@@ -1,7 +1,5 @@
 :root {
-  --pine-border-radius-0: 0;
-  --pine-border-radius-50: 4px;
-  --pine-border-radius-75: 6px;
+  --pine-border-radius-0: 0rem;
   --pine-border-radius-100: 8px;
   --pine-border-radius-125: 10px;
   --pine-border-radius-150: 12px;
@@ -11,6 +9,8 @@
   --pine-border-radius-250: 20px;
   --pine-border-radius-275: 22px;
   --pine-border-radius-300: 24px;
+  --pine-border-radius-050: 4px;
+  --pine-border-radius-075: 6px;
   --pine-border-radius-round: 9999px;
   --pine-border-width-none: 0rem;
   --pine-border-width-thin: 1px;
@@ -21,7 +21,6 @@
   --pine-box-shadow-lg: 0 8px 40px 0 rgba(0,0,0,0.24);
   --pine-color-white: #ffffff;
   --pine-color-black: #000000;
-  --pine-color-grey-50: #fcfcfc;
   --pine-color-grey-100: #f8f8f8;
   --pine-color-grey-150: #f0f0f0;
   --pine-color-grey-200: #e4e4e4;
@@ -33,7 +32,7 @@
   --pine-color-grey-800: #4d4d4c;
   --pine-color-grey-900: #343332;
   --pine-color-grey-950: #1a1a19;
-  --pine-color-blue-50: #fafcff;
+  --pine-color-grey-050: #fcfcfc;
   --pine-color-blue-100: #eff6ff;
   --pine-color-blue-150: #dbe9fe;
   --pine-color-blue-200: #bfdbfe;
@@ -45,7 +44,7 @@
   --pine-color-blue-800: #1e40af;
   --pine-color-blue-900: #1f3a8a;
   --pine-color-blue-950: #172554;
-  --pine-color-green-50: #fbfefc;
+  --pine-color-blue-050: #fafcff;
   --pine-color-green-100: #edfcf2;
   --pine-color-green-150: #d3f8df;
   --pine-color-green-200: #aaf0c4;
@@ -57,7 +56,7 @@
   --pine-color-green-800: #095c37;
   --pine-color-green-900: #084c2e;
   --pine-color-green-950: #052e1c;
-  --pine-color-red-50: #fffafa;
+  --pine-color-green-050: #fbfefc;
   --pine-color-red-100: #fef2f2;
   --pine-color-red-150: #fee2e2;
   --pine-color-red-200: #fecaca;
@@ -69,7 +68,7 @@
   --pine-color-red-800: #991b1b;
   --pine-color-red-900: #7f1c1d;
   --pine-color-red-950: #450a0a;
-  --pine-color-yellow-50: #fffefa;
+  --pine-color-red-050: #fffafa;
   --pine-color-yellow-100: #fffbeb;
   --pine-color-yellow-150: #fff3c6;
   --pine-color-yellow-200: #fee589;
@@ -81,7 +80,7 @@
   --pine-color-yellow-800: #933d0d;
   --pine-color-yellow-900: #79330e;
   --pine-color-yellow-950: #451902;
-  --pine-color-mercury-50: #fffcfa;
+  --pine-color-yellow-050: #fffefa;
   --pine-color-mercury-100: #fff3ed;
   --pine-color-mercury-150: #ffe3d4;
   --pine-color-mercury-200: #ffc3a8;
@@ -93,7 +92,7 @@
   --pine-color-mercury-800: #9e110e;
   --pine-color-mercury-900: #7f120f;
   --pine-color-mercury-950: #450506;
-  --pine-color-purple-50: #fafbff;
+  --pine-color-mercury-050: #fffcfa;
   --pine-color-purple-100: #eef1ff;
   --pine-color-purple-150: #e0e4ff;
   --pine-color-purple-200: #c7cdfe;
@@ -105,11 +104,9 @@
   --pine-color-purple-800: #402fa4;
   --pine-color-purple-900: #372d82;
   --pine-color-purple-950: #221b4b;
+  --pine-color-purple-050: #fafbff;
   --pine-font-family-greet: "GreetStandard";
   --pine-font-family-inter: "Inter";
-  --pine-font-size-57: 8px;
-  --pine-font-size-71: 10px;
-  --pine-font-size-85: 12px;
   --pine-font-size-100: 14px;
   --pine-font-size-116: 16px;
   --pine-font-size-128: 18px;
@@ -124,6 +121,9 @@
   --pine-font-size-257: 36px;
   --pine-font-size-271: 38px;
   --pine-font-size-285: 40px;
+  --pine-font-size-057: 8px;
+  --pine-font-size-071: 10px;
+  --pine-font-size-085: 12px;
   --pine-font-weight-thin: 100;
   --pine-font-weight-extra-light: 200;
   --pine-font-weight-light: 300;
@@ -133,9 +133,6 @@
   --pine-font-weight-bold: 700;
   --pine-font-weight-extra-bold: 800;
   --pine-font-weight-heavy: 900;
-  --pine-line-height-25: 0.625;
-  --pine-line-height-50: 0.78125;
-  --pine-line-height-75: 0.9375;
   --pine-line-height-100: 1;
   --pine-line-height-125: 1.25;
   --pine-line-height-150: 1.5;
@@ -145,8 +142,10 @@
   --pine-line-height-250: 2.5;
   --pine-line-height-275: 2.75;
   --pine-line-height-300: 3;
-  --pine-spacing-0: 0;
-  --pine-spacing-50: 4px;
+  --pine-line-height-025: 0.625;
+  --pine-line-height-050: 0.78125;
+  --pine-line-height-075: 0.9375;
+  --pine-spacing-0: 0rem;
   --pine-spacing-100: 8px;
   --pine-spacing-150: 12px;
   --pine-spacing-200: 16px;
@@ -162,14 +161,15 @@
   --pine-spacing-700: 56px;
   --pine-spacing-750: 60px;
   --pine-spacing-800: 64px;
+  --pine-spacing-050: 4px;
   --pine-letter-spacing-0: 0px;
-  --pine-letter-spacing-78: 0.11px;
-  --pine-letter-spacing-85: 0.12px;
   --pine-letter-spacing-100: 0.14px;
   --pine-letter-spacing-114: 0.16px;
   --pine-letter-spacing-128: 0.18px;
-  --pine-letter-spacing-142: 0.20px;
+  --pine-letter-spacing-142: 0.2px;
   --pine-letter-spacing-157: 0.22px;
   --pine-letter-spacing-171: 0.24px;
   --pine-letter-spacing-185: 0.26px;
+  --pine-letter-spacing-078: 0.11px;
+  --pine-letter-spacing-085: 0.12px;
 }
diff --git a/libs/core/src/global/styles/tokens/core/core.json b/libs/core/src/global/styles/tokens/core/core.json
index 7b9dfd1fc..de3b3aa86 100644
--- a/libs/core/src/global/styles/tokens/core/core.json
+++ b/libs/core/src/global/styles/tokens/core/core.json
@@ -4,14 +4,6 @@
       "value": "0",
       "type": "borderRadius"
     },
-    "50": {
-      "value": "4px",
-      "type": "borderRadius"
-    },
-    "75": {
-      "value": "6px",
-      "type": "borderRadius"
-    },
     "100": {
       "value": "8px",
       "type": "borderRadius"
@@ -48,6 +40,14 @@
       "value": "24px",
       "type": "borderRadius"
     },
+    "050": {
+      "value": "4px",
+      "type": "borderRadius"
+    },
+    "075": {
+      "value": "6px",
+      "type": "borderRadius"
+    },
     "round": {
       "value": "9999px",
       "type": "borderRadius"
@@ -153,10 +153,6 @@
       "type": "color"
     },
     "grey": {
-      "50": {
-        "value": "#FCFCFC",
-        "type": "color"
-      },
       "100": {
         "value": "#F8F8F8",
         "type": "color"
@@ -200,13 +196,13 @@
       "950": {
         "value": "#1A1A19",
         "type": "color"
+      },
+      "050": {
+        "value": "#FCFCFC",
+        "type": "color"
       }
     },
     "blue": {
-      "50": {
-        "value": "#FAFCFF",
-        "type": "color"
-      },
       "100": {
         "value": "#EFF6FF",
         "type": "color"
@@ -250,13 +246,13 @@
       "950": {
         "value": "#172554",
         "type": "color"
+      },
+      "050": {
+        "value": "#FAFCFF",
+        "type": "color"
       }
     },
     "green": {
-      "50": {
-        "value": "#FBFEFC",
-        "type": "color"
-      },
       "100": {
         "value": "#EDFCF2",
         "type": "color"
@@ -300,13 +296,13 @@
       "950": {
         "value": "#052E1C",
         "type": "color"
+      },
+      "050": {
+        "value": "#FBFEFC",
+        "type": "color"
       }
     },
     "red": {
-      "50": {
-        "value": "#FFFAFA",
-        "type": "color"
-      },
       "100": {
         "value": "#FEF2F2",
         "type": "color"
@@ -350,13 +346,13 @@
       "950": {
         "value": "#450A0A",
         "type": "color"
+      },
+      "050": {
+        "value": "#FFFAFA",
+        "type": "color"
       }
     },
     "yellow": {
-      "50": {
-        "value": "#FFFEFA",
-        "type": "color"
-      },
       "100": {
         "value": "#FFFBEB",
         "type": "color"
@@ -400,13 +396,13 @@
       "950": {
         "value": "#451902",
         "type": "color"
+      },
+      "050": {
+        "value": "#FFFEFA",
+        "type": "color"
       }
     },
     "mercury": {
-      "50": {
-        "value": "#FFFCFA",
-        "type": "color"
-      },
       "100": {
         "value": "#FFF3ED",
         "type": "color"
@@ -450,13 +446,13 @@
       "950": {
         "value": "#450506",
         "type": "color"
+      },
+      "050": {
+        "value": "#FFFCFA",
+        "type": "color"
       }
     },
     "purple": {
-      "50": {
-        "value": "#FAFBFF",
-        "type": "color"
-      },
       "100": {
         "value": "#EEF1FF",
         "type": "color"
@@ -500,6 +496,10 @@
       "950": {
         "value": "#221B4B",
         "type": "color"
+      },
+      "050": {
+        "value": "#FAFBFF",
+        "type": "color"
       }
     }
   },
@@ -514,18 +514,6 @@
     }
   },
   "font-size": {
-    "57": {
-      "value": "8px",
-      "type": "fontSizes"
-    },
-    "71": {
-      "value": "10px",
-      "type": "fontSizes"
-    },
-    "85": {
-      "value": "12px",
-      "type": "fontSizes"
-    },
     "100": {
       "value": "14px",
       "type": "fontSizes"
@@ -581,6 +569,18 @@
     "285": {
       "value": "40px",
       "type": "fontSizes"
+    },
+    "057": {
+      "value": "8px",
+      "type": "fontSizes"
+    },
+    "071": {
+      "value": "10px",
+      "type": "fontSizes"
+    },
+    "085": {
+      "value": "12px",
+      "type": "fontSizes"
     }
   },
   "font-weight": {
@@ -622,18 +622,6 @@
     }
   },
   "line-height": {
-    "25": {
-      "value": "0.625",
-      "type": "lineHeights"
-    },
-    "50": {
-      "value": "0.78125",
-      "type": "lineHeights"
-    },
-    "75": {
-      "value": "0.9375",
-      "type": "lineHeights"
-    },
     "100": {
       "value": "1",
       "type": "lineHeights"
@@ -669,6 +657,18 @@
     "300": {
       "value": "3",
       "type": "lineHeights"
+    },
+    "025": {
+      "value": "0.625",
+      "type": "lineHeights"
+    },
+    "050": {
+      "value": "0.78125",
+      "type": "lineHeights"
+    },
+    "075": {
+      "value": "0.9375",
+      "type": "lineHeights"
     }
   },
   "spacing": {
@@ -676,10 +676,6 @@
       "value": "0",
       "type": "spacing"
     },
-    "50": {
-      "value": "4px",
-      "type": "spacing"
-    },
     "100": {
       "value": "8px",
       "type": "spacing"
@@ -739,6 +735,10 @@
     "800": {
       "value": "64px",
       "type": "spacing"
+    },
+    "050": {
+      "value": "4px",
+      "type": "spacing"
     }
   },
   "letter-spacing": {
@@ -746,14 +746,6 @@
       "value": "0px",
       "type": "letterSpacing"
     },
-    "78": {
-      "value": "0.11px",
-      "type": "letterSpacing"
-    },
-    "85": {
-      "value": "0.12px",
-      "type": "letterSpacing"
-    },
     "100": {
       "value": "0.14px",
       "type": "letterSpacing"
@@ -781,6 +773,14 @@
     "185": {
       "value": "0.26px",
       "type": "letterSpacing"
+    },
+    "078": {
+      "value": "0.11px",
+      "type": "letterSpacing"
+    },
+    "085": {
+      "value": "0.12px",
+      "type": "letterSpacing"
     }
   }
 }
\ No newline at end of file
diff --git a/libs/core/src/global/styles/tokens/semantic/semantic.json b/libs/core/src/global/styles/tokens/semantic/semantic.json
index 5b36533bc..ebc2a4b1c 100644
--- a/libs/core/src/global/styles/tokens/semantic/semantic.json
+++ b/libs/core/src/global/styles/tokens/semantic/semantic.json
@@ -180,7 +180,7 @@
           "value": {
             "fontFamily": "{font-family.inter}",
             "fontWeight": "{font-weight.normal}",
-            "fontSize": "{font-size.85}",
+            "fontSize": "{font-size.085}",
             "lineHeight": "{line-height.100} * 1.425"
           },
           "type": "typography"
@@ -189,7 +189,7 @@
           "value": {
             "fontFamily": "{font-family.inter}",
             "fontWeight": "{font-weight.medium}",
-            "fontSize": "{font-size.85}",
+            "fontSize": "{font-size.085}",
             "lineHeight": "{line-height.100} * 1.425"
           },
           "type": "typography"
@@ -198,7 +198,7 @@
           "value": {
             "fontFamily": "{font-family.inter}",
             "fontWeight": "{font-weight.bold}",
-            "fontSize": "{font-size.85}",
+            "fontSize": "{font-size.085}",
             "lineHeight": "{line-height.100} * 1.425"
           },
           "type": "typography"
@@ -209,7 +209,7 @@
           "value": {
             "fontFamily": "{font-family.inter}",
             "fontWeight": "{font-weight.normal}",
-            "fontSize": "{font-size.85}",
+            "fontSize": "{font-size.085}",
             "lineHeight": "{line-height.100} * 1.425"
           },
           "type": "typography"
@@ -218,7 +218,7 @@
           "value": {
             "fontFamily": "{font-family.inter}",
             "fontWeight": "{font-weight.semi-bold}",
-            "fontSize": "{font-size.85}",
+            "fontSize": "{font-size.085}",
             "lineHeight": "{line-height.100} * 1.425"
           },
           "type": "typography"