fix: update box shadow tokens

libs/core/src/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { BoxColumnType, BoxTShirtSizeType } from "./utils/types";
+import { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
 import { TextareaChangeEventDetail } from "./components/pds-textarea/textarea-interface";
-export { BoxColumnType, BoxTShirtSizeType } from "./utils/types";
+export { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
 export { TextareaChangeEventDetail } from "./components/pds-textarea/textarea-interface";
 export namespace Components {
@@ -162,7 +162,7 @@ export namespace Components {
           * Defines the box shadow.
           * @defaultValue none
          */
-        "shadow"?: BoxTShirtSizeType;
+        "shadow"?: BoxShadowSizeType;
         /**
           * Size of the column for all screen sizes that are not explicitly set.
          */
@@ -1431,7 +1431,7 @@ declare namespace LocalJSX {
           * Defines the box shadow.
           * @defaultValue none
          */
-        "shadow"?: BoxTShirtSizeType;
+        "shadow"?: BoxShadowSizeType;
         /**
           * Size of the column for all screen sizes that are not explicitly set.
          */

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

@@ -182,20 +182,32 @@ $pine-spacing-tokens: (
 }
 
 // Box shadow helpers
-.pds-shadow-xs {
-  box-shadow: var(--pine-box-shadow-xs);
+.pds-shadow-050 {
+  box-shadow: var(--pine-box-shadow-050);
 }
 
-.pds-shadow-sm {
-  box-shadow: var(--pine-box-shadow-sm);
+.pds-shadow-100 {
+  box-shadow: var(--pine-box-shadow-100);
 }
 
-.pds-shadow-md {
-  box-shadow: var(--pine-box-shadow-md);
+.pds-shadow-150 {
+  box-shadow: var(--pine-box-shadow-150);
 }
 
-.pds-shadow-lg {
-  box-shadow: var(--pine-box-shadow-lg);
+.pds-shadow-200 {
+  box-shadow: var(--pine-box-shadow-200);
+}
+
+.pds-shadow-300 {
+  box-shadow: var(--pine-box-shadow-300);
+}
+
+.pds-shadow-400 {
+  box-shadow: var(--pine-box-shadow-400);
+}
+
+.pds-shadow-500 {
+  box-shadow: var(--pine-box-shadow-500);
 }
 
 // Gap helpers

libs/core/src/components/pds-box/pds-box.tsx

@@ -1,6 +1,6 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
-import { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';
+import { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';
 
 @Component({
   tag: 'pds-box',
@@ -124,7 +124,7 @@ export class PdsBox {
    * Defines the box shadow.
    * @defaultValue none
   */
-  @Prop() shadow?: BoxTShirtSizeType;
+  @Prop() shadow?: BoxShadowSizeType;
 
   /**
    * Size of the column for all screen sizes that are not explicitly set.
@@ -163,7 +163,7 @@ export class PdsBox {
     ${this.border ? 'pds-box--border' : ''}
     ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
     ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
-    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
+    ${this.display !== undefined && this.display.trim() !== '' ? `pds---display-${this.display}` : ''}
     ${this.fit ? 'pds-box--fit' : ''}
     ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
     ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}

libs/core/src/components/pds-box/readme.md

@@ -30,7 +30,7 @@
 | `offsetXl`        | `offset-xl`        | Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns. | `"0" \| "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `undefined` |
 | `offsetXs`        | `offset-xs`        | Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns. | `"0" \| "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `undefined` |
 | `padding`         | `padding`          | Defines the spacing between the box items.                                                                                                    | `"lg" \| "md" \| "none" \| "sm" \| "xl" \| "xs" \| "xxl" \| "xxs"`                           | `undefined` |
-| `shadow`          | `shadow`           | Defines the box shadow.                                                                                                                       | `"lg" \| "md" \| "none" \| "sm" \| "xl" \| "xs" \| "xxl" \| "xxs"`                           | `undefined` |
+| `shadow`          | `shadow`           | Defines the box shadow.                                                                                                                       | `"050" \| "100" \| "150" \| "200" \| "300" \| "400" \| "500" \| "none"`                      | `undefined` |
 | `size`            | `size`             | Size of the column for all screen sizes that are not explicitly set.                                                                          | `"0" \| "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `undefined` |
 | `sizeLg`          | `size-lg`          | At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.                                             | `"0" \| "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `undefined` |
 | `sizeMd`          | `size-md`          | At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.                                             | `"0" \| "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"` | `undefined` |

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

@@ -45,7 +45,7 @@
   --border-radius-typing: var(--pine-border-radius-200);
   --border-radius-typing-dot: var(--pine-border-radius-round);
 
-  --box-shadow-typing: var(--pine-box-shadow-sm);
+  --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);

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

@@ -3,7 +3,7 @@
 
   --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
 
-  --box-shadow: var(--pine-box-shadow-lg);
+  --box-shadow: var(--pine-box-shadow-400);
 
   --color-background-default: var(--pine-color-white);
   --color-background-interactive: var(--pine-color-grey-200);

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

@@ -6,7 +6,7 @@
   --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);
+  --box-shadow-default: var(--pine-box-shadow-200);
 
   --color-background-default: var(--pine-color-grey-900);
   --color-text-default: var(--pine-color-white);

libs/core/src/utils/types.ts

@@ -13,13 +13,13 @@ export type TooltipPlacementType =
   | 'bottom-end';
 
 export type BoxColumnType =
-  '0' 
-  | '1' 
-  | '2' 
-  | '3' 
-  | '4' 
-  | '5' 
-  | '6' 
+  '0'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
   | '7'
   | '8'
   | '9'
@@ -35,4 +35,14 @@ export type BoxColumnType =
   | 'md'
   | 'lg'
   | 'xl'
-  | 'xxl'
+  | 'xxl'
+
+  export type BoxShadowSizeType =
+  'none'
+  | '050'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'

libs/doc-components/src/components/docTokenTable/docTokenTable.tsx

@@ -63,11 +63,9 @@ const DocTokenTable: React.FC<DocTokenTableProps> = ({ category }) => {
 
     // sets and sorts data based on numerical value
     // and ignores box-shadow and color
-    const data = ['box-shadow', 'color'].includes(category)
-      ? entries
-      : entries.sort(([ , tokenA], [ , tokenB]) =>
-          parseInt(tokenA.value as string) - parseInt(tokenB.value as string)
-        )
+    const data = entries.sort((tokenKeyA, tokenKeyB) =>
+        parseInt(tokenKeyA[0]) - parseInt(tokenKeyB[0])
+    );
 
     return data.map(([key, token]): JSX.Element => {