From 3ff5303a0f602d1813c1bdda48768b34b1687d17 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Mon, 16 Dec 2024 15:42:28 +0100
Subject: [PATCH] chore(ui): compute CSS properties for WDS tokens - WF-149

---
 src/ui/src/builder/BuilderApp.vue         |  3 +-
 src/ui/src/main.ts                        |  1 -
 src/ui/src/renderer/ComponentRenderer.vue |  2 ++
 src/ui/src/wds/tokens.css                 | 40 -----------------------
 src/ui/src/wds/tokens.ts                  | 19 +++++++++--
 5 files changed, 21 insertions(+), 44 deletions(-)
 delete mode 100644 src/ui/src/wds/tokens.css

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index e02dde2a4..739e924ec 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderApp" tabindex="-1">
+	<div class="BuilderApp" tabindex="-1" :style="WDS_CSS_PROPERTIES">
 		<div
 			class="mainGrid"
 			:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
@@ -81,6 +81,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
diff --git a/src/ui/src/main.ts b/src/ui/src/main.ts
index 48257596e..71893929c 100644
--- a/src/ui/src/main.ts
+++ b/src/ui/src/main.ts
@@ -4,7 +4,6 @@ import VueDOMPurifyHTML from "vue-dompurify-html";
 import { generateBuilderManager } from "./builder/builderManager.js";
 import { generateCore } from "./core";
 import "./fonts";
-import "./wds/tokens.css";
 import injectionKeys from "./injectionKeys";
 import { setCaptureTabsDirective } from "./directives.js";
 
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 96a18c8f9..0feb6cd02 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -41,6 +41,7 @@ import {
 	changeRouteVarsInHash,
 	serializeParsedHash,
 } from "@/core/navigation";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
@@ -59,6 +60,7 @@ const coreRootFields = templateEvaluator.getEvaluatedFields([
 
 const rootStyle = computed(() => {
 	return {
+		...WDS_CSS_PROPERTIES,
 		"--accentColor": coreRootFields.accentColor?.value,
 		"--emptinessColor": coreRootFields.emptinessColor?.value,
 		"--containerBackgroundColor":
diff --git a/src/ui/src/wds/tokens.css b/src/ui/src/wds/tokens.css
deleted file mode 100644
index d1cf02c87..000000000
--- a/src/ui/src/wds/tokens.css
+++ /dev/null
@@ -1,40 +0,0 @@
-:root {
-	--wdsColorWhite: #ffffff;
-	--wdsColorBlack: #000000;
-
-	--wdsColorBlue1: #f3f5ff;
-	--wdsColorBlue2: #e4e9ff;
-	--wdsColorBlue3: #bfcbff;
-	--wdsColorBlue4: #6985ff;
-	--wdsColorBlue5: #5551ff;
-	--wdsColorBlue6: #4a46da;
-
-	--wdsColorGray0: #fbfbfd;
-	--wdsColorGray1: #f5f5f9;
-	--wdsColorGray2: #e4e7ed;
-	--wdsColorGray3: #d2d4d7;
-	--wdsColorGray4: #828282;
-	--wdsColorGray5: #4f4f4f;
-	--wdsColorGray6: #333333;
-
-	--wdsColorPurple1: #f6effd;
-	--wdsColorPurple2: #ede2ff;
-	--wdsColorPurple3: #d4b2f7;
-	--wdsColorPurple4: #a95ef8;
-	--wdsColorPurple5: #721cc9;
-
-	--wdsColorOrange1: #fff4f1;
-	--wdsColorOrange2: #ffcfc2;
-	--wdsColorOrange4: #ff8866;
-	--wdsColorOrange5: #ff643c;
-
-	--wdsColorGreen1: #f2fffb;
-	--wdsColorGreen2: #d4fff2;
-	--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 80b1e88a6..a0ee9b303 100644
--- a/src/ui/src/wds/tokens.ts
+++ b/src/ui/src/wds/tokens.ts
@@ -1,7 +1,9 @@
+import type { CSSProperties } from "vue";
+
 /**
  * Colors from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-2)
  */
-export const enum WdsColor {
+export enum WdsColor {
 	White = "#ffffff",
 	Black = "#000000",
 
@@ -41,8 +43,21 @@ export const enum WdsColor {
 /**
  * Shadows from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-14)
  */
-export const enum WdsShadow {
+export enum WdsShadow {
 	Box = "0px 2px 0px 0px #f3f3f3",
 	Menu = "0px 1px 8px 0px #bfcbff40",
 	Large = "0px 3px 40px 0px #acb9dc66",
 }
+
+export const WDS_CSS_PROPERTIES = Object.freeze<CSSProperties>(
+	Object.fromEntries([
+		...Object.entries(WdsColor).map(([key, value]) => [
+			`--wdsColor${key}`,
+			value,
+		]),
+		...Object.entries(WdsShadow).map(([key, value]) => [
+			`--wdsShadow${key}`,
+			value,
+		]),
+	]),
+);