diff --git a/libs/core/src/components.d.ts b/libs/core/src/components.d.ts index 0708f96bd..dbdbc5498 100644 --- a/libs/core/src/components.d.ts +++ b/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. */ diff --git a/libs/core/src/components/pds-box/pds-box.scss b/libs/core/src/components/pds-box/pds-box.scss index b99553aa9..d293a3f40 100644 --- a/libs/core/src/components/pds-box/pds-box.scss +++ b/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 diff --git a/libs/core/src/components/pds-box/pds-box.tsx b/libs/core/src/components/pds-box/pds-box.tsx index 2f3482b0e..658d6e47f 100644 --- a/libs/core/src/components/pds-box/pds-box.tsx +++ b/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. diff --git a/libs/core/src/components/pds-box/readme.md b/libs/core/src/components/pds-box/readme.md index 9afc8b725..576e7a797 100644 --- a/libs/core/src/components/pds-box/readme.md +++ b/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` | diff --git a/libs/core/src/components/pds-loader/pds-loader.scss b/libs/core/src/components/pds-loader/pds-loader.scss index 1d7f41e97..0edb05542 100644 --- a/libs/core/src/components/pds-loader/pds-loader.scss +++ b/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); 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 index 3ca13c513..cb029bc6f 100644 --- 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 @@ -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); diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.scss b/libs/core/src/components/pds-tooltip/pds-tooltip.scss index ce7605730..d05c042a5 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.scss +++ b/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); diff --git a/libs/core/src/global/styles/tokens/core/_core.scss b/libs/core/src/global/styles/tokens/core/_core.scss index 7d8304feb..f6360b21d 100644 --- a/libs/core/src/global/styles/tokens/core/_core.scss +++ b/libs/core/src/global/styles/tokens/core/_core.scss @@ -15,10 +15,13 @@ --pine-border-width-none: 0rem; --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; diff --git a/libs/core/src/global/styles/tokens/core/core.json b/libs/core/src/global/styles/tokens/core/core.json index de3b3aa86..d9bf3c813 100644 --- a/libs/core/src/global/styles/tokens/core/core.json +++ b/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": { diff --git a/libs/core/src/utils/types.ts b/libs/core/src/utils/types.ts index a7e9812e1..8c85c723a 100644 --- a/libs/core/src/utils/types.ts +++ b/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' \ No newline at end of file + | 'xxl' + + export type BoxShadowSizeType = + 'none' + | '050' + | '100' + | '150' + | '200' + | '300' + | '400' + | '500' \ No newline at end of file