chore(ui): compute CSS properties for WDS tokens - WF-149

writer · Dec 16, 2024 · 3ff5303 · 3ff5303
1 parent 402d159
commit 3ff5303
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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,
+		]),
+	]),
+);