fix: update box shadow tokens (#241)

* fix: add box shadow tokens

* fix: add box shadow build tokens

* fix: update box-shadow tokens

* fix: update box shadow tokens

* fix: add and apply box shadow tokens

* fix: update sort function

* fix: typo

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.

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/global/styles/tokens/core/_core.scss

@@ -15,10 +15,13 @@
   --pine-border-width-none: 0;
   --pine-border-width-thin: 1px;
   --pine-border-width-thick: 2px;
-  --pine-box-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.1);
-  --pine-box-shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.08);
-  --pine-box-shadow-md: 0 8px 14px 0 rgba(0,0,0,0.16), 0 0 4px 0 rgba(0,0,0,0.08);
-  --pine-box-shadow-lg: 0 8px 40px 0 rgba(0,0,0,0.24);
+  --pine-box-shadow-100: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
+  --pine-box-shadow-150: 0 4px 8px -2px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
+  --pine-box-shadow-200: 0 12px 16px -4px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
+  --pine-box-shadow-300: 0 20px 24px -4px rgba(0,0,0,0.08), 0 8px 8px -4px rgba(0,0,0,0.03);
+  --pine-box-shadow-400: 0 24px 48px -12px rgba(0,0,0,0.18);
+  --pine-box-shadow-500: 0 32px 64px -12px rgba(0,0,0,0.14);
+  --pine-box-shadow-050: 0 1px 2px 0 rgba(0,0,0,0.05);
   --pine-color-white: #ffffff;
   --pine-color-black: #000000;
   --pine-color-grey-100: #f8f8f8;

libs/core/src/global/styles/tokens/core/core.json

@@ -68,79 +68,124 @@
     }
   },
   "box-shadow": {
-    "xs": {
+    "100": {
       "value": [
         {
           "x": "0",
           "y": "1px",
-          "blur": "2px",
+          "blur": "3px",
           "spread": "0",
-          "color": "rgba(0,0,0,0.06)",
+          "color": "rgba(0,0,0,0.1)",
           "type": "dropShadow"
         },
         {
           "x": "0",
           "y": "1px",
-          "blur": "3px",
+          "blur": "2px",
           "spread": "0",
-          "color": "rgba(0,0,0,0.1)",
+          "color": "rgba(0,0,0,0.06)",
           "type": "dropShadow"
         }
       ],
       "type": "boxShadow"
     },
-    "sm": {
+    "150": {
       "value": [
+        {
+          "x": "0",
+          "y": "4px",
+          "blur": "8px",
+          "spread": "-2px",
+          "color": "rgba(0,0,0,0.1)",
+          "type": "dropShadow"
+        },
         {
           "x": "0",
           "y": "2px",
           "blur": "4px",
-          "spread": "0",
-          "color": "rgba(0,0,0,0.12)",
+          "spread": "-2px",
+          "color": "rgba(0,0,0,0.06)",
           "type": "dropShadow"
-        },
+        }
+      ],
+      "type": "boxShadow"
+    },
+    "200": {
+      "value": [
         {
           "x": "0",
-          "y": "0",
-          "blur": "2px",
-          "spread": "0",
+          "y": "12px",
+          "blur": "16px",
+          "spread": "-4px",
           "color": "rgba(0,0,0,0.08)",
           "type": "dropShadow"
+        },
+        {
+          "x": "0",
+          "y": "4px",
+          "blur": "6px",
+          "spread": "-2px",
+          "color": "rgba(0,0,0,0.03)",
+          "type": "dropShadow"
         }
       ],
       "type": "boxShadow"
     },
-    "md": {
+    "300": {
       "value": [
         {
           "x": "0",
-          "y": "8px",
-          "blur": "14px",
-          "spread": "0",
-          "color": "rgba(0,0,0,0.16)",
+          "y": "20px",
+          "blur": "24px",
+          "spread": "-4px",
+          "color": "rgba(0,0,0,0.08)",
           "type": "dropShadow"
         },
         {
           "x": "0",
-          "y": "0",
-          "blur": "4px",
-          "spread": "0",
-          "color": "rgba(0,0,0,0.08)",
+          "y": "8px",
+          "blur": "8px",
+          "spread": "-4px",
+          "color": "rgba(0,0,0,0.03)",
           "type": "dropShadow"
         }
       ],
       "type": "boxShadow"
     },
-    "lg": {
+    "400": {
       "value": {
         "x": "0",
-        "y": "8px",
-        "blur": "40px",
-        "spread": "0",
-        "color": "rgba(0,0,0,0.24)",
+        "y": "24px",
+        "blur": "48px",
+        "spread": "-12px",
+        "color": "rgba(0,0,0,0.18)",
         "type": "dropShadow"
       },
       "type": "boxShadow"
+    },
+    "500": {
+      "value": {
+        "x": "0",
+        "y": "32px",
+        "blur": "64px",
+        "spread": "-12px",
+        "color": "rgba(0,0,0,0.14)",
+        "type": "dropShadow"
+      },
+      "type": "boxShadow"
+    },
+    "050": {
+      "value": [
+        {
+          "x": "0",
+          "y": "1px",
+          "blur": "2px",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.05)",
+          "type": "dropShadow"
+        }
+      ],
+      "type": "boxShadow"
     }
   },
   "color": {

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'