style: updates some components with semantic tokens (#325)

* style: updates some components with semantic tokens * style(chip): update chip to use component semantic tokens * style(input): create new component specific semantic tokens created input.json for tokenstudio updated both the themes and metadata.json files --------- Co-authored-by: Julian Skinner <[email protected]>
Kajabi · Dec 3, 2024 · 8d35d5e · 8d35d5e
1 parent dbafc7d
commit 8d35d5e
Show file tree

Hide file tree

Showing 24 changed files with 176 additions and 95 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
@@ -3,12 +3,10 @@
 }
 
 label, pds-label {
-  --color-text-default: var(--pine-color-grey-950);
-  --color-text-disabled: var(--pine-color-grey-600);
-
-  color: var(--color-text-default);
+  color: var(--pine-color-text-label);
+  font-weight: var(--pine-font-weight-medium);
 
   [disabled] &, *:disabled & {
-    color: var(--color-text-disabled);
+    color: var(--pine-color-text-label-disabled);
   }
 }
diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss
@@ -6,7 +6,7 @@ details {
 
   // TODO: Needs discussion
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
-  --color-text-hover: var(--pine-color-grey-800);
+  --color-text-hover: var(--pine-color-text-secondary);
   --number-animation-transform-timing: 200ms;
 
 

diff --git a/libs/core/src/components/pds-avatar/pds-avatar.scss b/libs/core/src/components/pds-avatar/pds-avatar.scss
@@ -5,7 +5,6 @@
 div {
   // These custom props are not reachable
   --color-background-container: var(--pine-color-mercury-050);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
 
   align-items: center;
   background-color: var(--color-background-container);
@@ -52,7 +51,7 @@ div {
 
 .pds-avatar__badge {
   background-color: var(--pine-color-background-container);
-  border: var(--border-default);
+  border: var(--pine-border);
   border-color: var(--pine-color-secondary);
   border-radius: var(--pine-border-radius-round);
   bottom: var(--pine-dimension-none);

diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss
@@ -12,6 +12,7 @@
   align-items: center;
   background-color: var(--color-background-default);
   border: var(--pine-border);
+  border-color: var(--color-border-default);
   border-radius: var(--pine-border-radius-round);
   color: var(--color-text-default); // Set in the variant classes below
   display: flex;
@@ -52,6 +53,8 @@
   --color-background-default: var(--pine-color-primary);
   --color-background-hover: var(--pine-color-primary-hover);
   --color-background-disabled: var(--pine-color-primary-disabled);
+  --color-border-default: var(--pine-color-primary);
+  --color-border-hover: var(--pine-color-primary-hover);
   --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-primary-disabled);
   --color-outline: var(--pine-color-focus-ring);
@@ -61,7 +64,9 @@
   --color-background-default: var(--pine-color-accent);
   --color-background-hover: var(--pine-color-accent-hover);
   --color-background-disabled: var(--pine-color-accent-disabled);
-  --color-text-default: var(--pine-color-text-accent);
+  --color-border-default: var(--pine-color-accent);
+  --color-border-hover: var(--pine-color-accent-hover);
+  --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-accent-disabled);
   --color-outline: var(--pine-color-focus-ring);
 }
@@ -70,7 +75,9 @@
   --color-background-default: var(--pine-color-danger);
   --color-background-hover: var(--pine-color-danger-hover);
   --color-background-disabled: var(--pine-color-danger-disabled);
-  --color-text-default: var(--pine-color-text-danger);
+  --color-border-default: var(--pine-color-danger);
+  --color-border-hover: var(--pine-color-danger-hover);
+  --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-danger-disabled);
   --color-outline: var(--pine-color-focus-ring-danger);
 

diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.scss b/libs/core/src/components/pds-checkbox/pds-checkbox.scss
@@ -29,7 +29,7 @@
 
   label,
   .pds-checkbox__message--error {
-    color: var( --pine-color-danger);
+    color: var(--pine-color-text-message-danger);
   }
 }
 

diff --git a/libs/core/src/components/pds-chip/pds-chip.scss b/libs/core/src/components/pds-chip/pds-chip.scss
@@ -1,24 +1,6 @@
 :host {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
 
-  --color-background-accent-dot: var(--pine-color-purple-600);
-  --color-background-accent-hover: var(--pine-color-purple-200);
-
-  --color-background-danger-dot: var(--pine-color-red-600);
-  --color-background-danger-hover: var(--pine-color-red-200);
-
-  --color-background-info-dot: var(--pine-color-blue-600);
-  --color-background-info-hover: var(--pine-color-blue-200);
-
-  --color-background-neutral-dot: var(--pine-color-grey-600);
-  --color-background-neutral-hover: var(--pine-color-grey-400);
-
-  --color-background-success-dot: var(--pine-color-green-600);
-  --color-background-success-hover: var(--pine-color-green-200);
-
-  --color-background-warning-dot: var(--pine-color-yellow-600);
-  --color-background-warning-hover: var(--pine-color-yellow-200);
-
   --spacing-sm: calc(var(--pine-dimension-150) / 2);
   --spacing-lg: calc(var(--pine-dimension-250) / 2);
   --spacing-xl: var(--pine-dimension-150);
@@ -34,12 +16,12 @@
 }
 
 $pds-chip-sentiment: (
-  accent: var(--pine-color-accent),
-  danger: var(--pine-color-danger),
-  info: var(--pine-color-info),
-  neutral: var(--pine-color-neutral),
-  success: var(--pine-color-success),
-  warning: var(--pine-color-warning),
+  accent: var(--pine-chip-color-accent),
+  danger: var(--pine-chip-color-danger),
+  info: var(--pine-chip-color-info),
+  neutral: var(--pine-chip-color-neutral),
+  success: var(--pine-chip-color-success),
+  warning: var(--pine-chip-color-warning),
 );
 
 $pds-chip-sentiment-text: (
@@ -52,21 +34,21 @@ $pds-chip-sentiment-text: (
 );
 
 $pds-chip-sentiment-dots: (
-  accent: var(--color-background-accent-dot),
-  danger: var(--color-background-danger-dot),
-  info: var(--color-background-info-dot),
-  neutral: var(--color-background-neutral-dot),
-  success: var(--color-background-success-dot),
-  warning: var(--color-background-warning-dot),
+  accent: var(--pine-chip-color-accent-dot),
+  danger: var(--pine-chip-color-danger-dot),
+  info: var(--pine-chip-color-info-dot),
+  neutral: var(--pine-chip-color-neutral-dot),
+  success: var(--pine-chip-color-success-dot),
+  warning: var(--pine-chip-color-warning-dot),
 );
 
 $pds-chip-sentiment-hover: (
   accent: var(--pine-color-accent-hover),
-  danger: var(--color-background-danger-hover),
-  info: var(--color-background-info-hover),
-  neutral: var(--color-background-neutral-hover),
-  success: var(--color-background-success-hover),
-  warning: var(--color-background-warning-hover),
+  danger: var(--pine-chip-color-danger-hover),
+  info: var(--pine-chip-color-info-hover),
+  neutral: var(--pine-chip-color-neutral-hover),
+  success: var(--pine-chip-color-success-hover),
+  warning: var(--pine-chip-color-warning-hover),
 );
 
 @each $sentiment, $value in $pds-chip-sentiment {

diff --git a/libs/core/src/components/pds-chip/pds-chip.tokens.scss b/libs/core/src/components/pds-chip/pds-chip.tokens.scss
@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);
+  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);
+  --pine-chip-color-warning: var(--pine-color-yellow-100);
+  --pine-chip-color-success-dot: var(--pine-color-green-600);
+  --pine-chip-color-success-hover: var(--pine-color-green-300);
+  --pine-chip-color-success: var(--pine-color-green-100);
+  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
+  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
+  --pine-chip-color-neutral: var(--pine-color-grey-100);
+  --pine-chip-color-info-dot: var(--pine-color-blue-600);
+  --pine-chip-color-info-hover: var(--pine-color-blue-300);
+  --pine-chip-color-info: var(--pine-color-blue-100);
+  --pine-chip-color-danger-dot: var(--pine-color-red-600);
+  --pine-chip-color-danger-hover: var(--pine-color-red-300);
+  --pine-chip-color-danger: var(--pine-color-red-100);
+  --pine-chip-color-accent-dot: var(--pine-color-purple-600);
+  --pine-chip-color-accent-hover: var(--pine-color-purple-300);
+  --pine-chip-color-accent: var(--pine-color-purple-100);
+}
diff --git a/libs/core/src/components/pds-chip/pds-chip.tsx b/libs/core/src/components/pds-chip/pds-chip.tsx
@@ -3,7 +3,7 @@ import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';
 
 @Component({
   tag: 'pds-chip',
-  styleUrls: ['pds-chip.scss'],
+  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],
   shadow: true,
 })
 export class PdsChip {

diff --git a/libs/core/src/components/pds-image/pds-image.scss b/libs/core/src/components/pds-image/pds-image.scss
@@ -1,6 +1,6 @@
 :host {
   /**
-   * @prop --image-aspect-ratio: The image's aspect ratio.
+   * @prop --dimension-aspect-ratio: The image's aspect ratio.
   */
 
   --dimension-aspect-ratio: auto;
@@ -9,4 +9,4 @@
 
 img {
   aspect-ratio: var(--dimension-aspect-ratio);
-}
+}
diff --git a/libs/core/src/components/pds-image/readme.md b/libs/core/src/components/pds-image/readme.md
@@ -21,9 +21,10 @@
 
 ## CSS Custom Properties
 
-| Name                   | Description               |
-| ---------------------- | ------------------------- |
-| `--image-aspect-ratio` | The image's aspect ratio. |
+| Name                       | Description               |
+| -------------------------- | ------------------------- |
+| `--dimension-aspect-ratio` | The image's aspect ratio. |
+| `--image-aspect-ratio`     | The image's aspect ratio. |
 
 
 ----------------------------------------------

diff --git a/libs/core/src/components/pds-input/pds-input.scss b/libs/core/src/components/pds-input/pds-input.scss
@@ -78,8 +78,7 @@ input {
 
   &:has(~.pds-input__error-message) {
 
-
-    background-color: var(--pine-color-danger);
+    background-color: var(--pine-input-color-background-danger);
     border-color: var(--pine-color-border-danger);
 
     &:focus-visible {
@@ -93,12 +92,11 @@ input {
 .pds-input__error-message,
 .pds-input__helper-message {
   font-size: var(--pine-font-size);
-  font-weight: var(--pine-color-text-placeholder);
-  line-height: var(--pine-line-height-text-message);
+  font-weight: var(--pine-font-weight-medium);
   margin-block-end: 0;
   margin-block-start: var(--pine-dimension-xs);
 }
 
 .pds-input__error-message {
-  color: var(--pine-color-text-danger);
+  color: var(--pine-color-text-message-danger);
 }
diff --git a/libs/core/src/components/pds-input/pds-input.tokens.scss b/libs/core/src/components/pds-input/pds-input.tokens.scss
@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-input-color-background-danger: var(--pine-color-red-050);
+}
diff --git a/libs/core/src/components/pds-input/pds-input.tsx b/libs/core/src/components/pds-input/pds-input.tsx
@@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 
 @Component({
   tag: 'pds-input',
-  styleUrls: ['pds-input.scss'],
+  styleUrls: ['pds-input.tokens.scss', 'pds-input.scss'],
   shadow: true,
 })
 export class PdsInput {

diff --git a/libs/core/src/components/pds-loader/pds-loader.scss b/libs/core/src/components/pds-loader/pds-loader.scss
@@ -58,10 +58,10 @@
   position: relative;
 
   span {
-    background-color: var(--pine-color-border);
-    block-size: 12px;
+    background-color: var(--pine-color-border-hover);
+    block-size: 6px;
     border-radius: var(--pine-border-radius-circle);
-    inline-size: 12px;
+    inline-size: 6px;
     opacity: var(--opacity-typing-dot-default);
 
     @for $i from 1 through 3 {
@@ -75,7 +75,7 @@
 @keyframes typing {
   50% {
     opacity: var(--opacity-typing-dot-active);
-    transform: scale(1.2);
+    transform: scale(1.25);
   }
 }
 

diff --git a/libs/core/src/components/pds-radio/pds-radio.scss b/libs/core/src/components/pds-radio/pds-radio.scss
@@ -35,7 +35,7 @@
 
   label,
   .pds-radio__message--error {
-    color: var(--pine-color-text-danger);
+    color: var(--pine-color-text-message-danger);
   }
 }
 

diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss b/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss
@@ -1,50 +1,37 @@
 :host(.pds-sortable-item) {
-  --border-radius: var(--pine-border-radius-125);
-
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-
   --box-shadow: var(--pine-box-shadow-400);
 
-  --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);
-  --spacing-padding-inline-start: var(--pine-spacing-300);
-
   align-items: center;
   display: flex;
-  padding-block: var(--spacing-padding-block-xs);
-  padding-inline: var(--spacing-padding-inline);
+  padding-block: var(--pine-dimension-xs);
+  padding-inline: var(--pine-dimension-md);
 
   .pds-sortable-item__actions {
     margin-inline-start: auto;
-    padding-inline-start: var(--spacing-padding-inline-start);
+    padding-inline-start: var(--pine-dimension-md);
   }
 
   .pds-sortable-item__handle {
     line-height: 1;
-    margin-inline-end: var(--spacing-margin-inline-end);
+    margin-inline-end: var(--pine-dimension-md);
   }
 
   // styles when sortable is bordered
   .pds-sortable--bordered & {
     &:first-child {
-      border-start-end-radius: var(--border-radius);
-      border-start-start-radius: var(--border-radius);
+      border-start-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+      border-start-start-radius: calc(var(--pine-dimension-xs) * 1.25);
     }
 
     &:last-child {
-      border-end-end-radius: var(--border-radius);
-      border-end-start-radius: var(--border-radius);
+      border-end-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+      border-end-start-radius: calc(var(--pine-dimension-xs) * 1.25);
     }
   }
 
   // styles when sortable is divided
   .pds-sortable--divided & {
-    border-block-end: var(--border-default);
+    border-block-end: var(--pine-border);
 
     &:last-child {
       border-block-end: 0;
@@ -64,21 +51,21 @@
 }
 
 :host(.pds-sortable-item):hover {
-  background-color: var(--color-background-interactive);
+  background-color: var(--pine-color-background-container-hover);
 
   pds-icon {
-    color: var(--color-interactive-handle)
+    color: var(--pine-color-info)
   }
 }
 
 :host(.pds-sortable-item--drag) {
-  background-color: var(--color-background-default);
+  background-color: var(--pine-color-background-container);
   border-radius: 0;
   box-shadow: var(--box-shadow);
   opacity: 1;
 }
 
 :host(.pds-sortable-item--ghost) {
-  background-color: var(--color-background-interactive);
+  background-color: var(--pine-color-background-container-hover);
   border-radius: 0;
 }
diff --git a/libs/core/src/components/pds-switch/pds-switch.scss b/libs/core/src/components/pds-switch/pds-switch.scss
@@ -22,7 +22,7 @@
 }
 
 :host(.pds-switch--error) {
-  color: var(--pine-color-text-danger);
+  color: var(--pine-color-text-message-danger);
 
   input,
   input:checked,
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
       label,
       .pds-checkbox__message--error {
-        color: var( --pine-color-danger);
+        color: var(--pine-color-text-message-danger);
       }
     }
@@ Expand Down @@