chore(ui): introduce WDS shadow tokens - WF-149

writer · Dec 16, 2024 · 9e32706 · 9e32706
1 parent f2331c1
commit 9e32706
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",
+}