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
Kajabi · Sep 4, 2024 · f456618 · f456618
1 parent 6936856
commit f456618
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 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
@@ -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
@@ -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
@@ -8,20 +8,20 @@
   --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
   --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-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);