From 9e32706ec90649e76c3f96754884c23b45f4bb96 Mon Sep 17 00:00:00 2001 From: Alexandre Rousseau Date: Mon, 16 Dec 2024 15:09:17 +0100 Subject: [PATCH] chore(ui): introduce WDS shadow tokens - WF-149 --- src/ui/src/builder/settings/BuilderSettings.vue | 2 +- .../src/components/workflows/abstract/WorkflowsNode.vue | 2 +- src/ui/src/wds/WdsDropdownMenu.vue | 2 +- src/ui/src/wds/tokens.css | 4 ++++ src/ui/src/wds/tokens.ts | 9 +++++++++ 5 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue index 06edb8b10..9a1750112 100644 --- a/src/ui/src/builder/settings/BuilderSettings.vue +++ b/src/ui/src/builder/settings/BuilderSettings.vue @@ -114,7 +114,7 @@ const toggleMiniDocs = () => { overflow: hidden; border-width: 1px solid var(--builderAreaSeparatorColor); background: var(--builderBackgroundColor); - box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4); + box-shadow: var(--wdsShadowLarge); border-radius: 12px; top: v-bind("ssbm.getMode() == `workflows` ? `72px` : `20px`"); } diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue index 988c9ca30..d2e6f1163 100644 --- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue +++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue @@ -188,7 +188,7 @@ watch(isEngaged, () => { border-radius: 8px; width: 240px; position: absolute; - box-shadow: 0px 2px 0px 0px #f3f3f3; + box-shadow: var(--wdsShadowBox); user-select: none; } diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue index ac9b40154..899305b98 100644 --- a/src/ui/src/wds/WdsDropdownMenu.vue +++ b/src/ui/src/wds/WdsDropdownMenu.vue @@ -97,7 +97,7 @@ watch(searchTerm, () => emits("search", searchTerm.value)); padding: 8px 10px; - box-shadow: 0px 1px 8px 0px #bfcbff40; + box-shadow: var(--wdsShadowMenu); box-sizing: border-box; } .WdsDropdownMenu:has(.WdsDropdownMenu__search) { diff --git a/src/ui/src/wds/tokens.css b/src/ui/src/wds/tokens.css index d356f6823..d1cf02c87 100644 --- a/src/ui/src/wds/tokens.css +++ b/src/ui/src/wds/tokens.css @@ -33,4 +33,8 @@ --wdsColorGreen3: #a9f9e1; --wdsColorGreen5: #3bdcab; --wdsColorGreen6: #078660; + + --wdsShadowBox: 0px 2px 0px 0px #f3f3f3; + --wdsShadowMenu: 0px 1px 8px 0px #bfcbff40; + --wdsShadowLarge: 0px 3px 40px 0px #acb9dc66; } diff --git a/src/ui/src/wds/tokens.ts b/src/ui/src/wds/tokens.ts index ecc5aa3f8..80b1e88a6 100644 --- a/src/ui/src/wds/tokens.ts +++ b/src/ui/src/wds/tokens.ts @@ -37,3 +37,12 @@ export const enum WdsColor { Green5 = "#3bdcab", Green6 = "#078660", } + +/** + * Shadows from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-14) + */ +export const enum WdsShadow { + Box = "0px 2px 0px 0px #f3f3f3", + Menu = "0px 1px 8px 0px #bfcbff40", + Large = "0px 3px 40px 0px #acb9dc66", +}