Merge pull request #696 from madeindjs/WF-149

chore(ui): use WDS colors tokens - WF-149

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"),
@@ -270,34 +271,33 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #3be19b;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #333333;
-	--builderHeaderBackgroundHoleColor: #000000;
+	--builderBackgroundColor: var(--wdsColorWhite);
+	--builderAccentColor: var(--wdsColorBlue5);
+	--builderSuccessColor: var(--wdsColorGreen5);
+	--builderErrorColor: var(--wdsColorOrange5);
+	--builderHeaderBackgroundColor: var(--wdsColorGray6);
+	--builderHeaderBackgroundHoleColor: var(--wdsColorBlack);
 	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
 	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
 	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: #e4e7ed;
-	--builderSubtleSeparatorColor: #f5f5f9;
-	--builderIntenseSeparatorColor: #d2d4d7;
-	--builderSelectedColor: #e4e9ff;
-	--builderMatchingColor: #f8dccc;
-	--builderIntenseSelectedColor: #0094d1;
+	--builderSeparatorColor: var(--wdsColorGray2);
+	--builderSubtleSeparatorColor: var(--wdsColorGray1);
+	--builderIntenseSeparatorColor: var(--wdsColorGray3);
+	--builderSelectedColor: var(--wdsColorBlue2);
+	--builderMatchingColor: var(--wdsColorOrange2);
+	--builderIntenseSelectedColor: var(--wdsColorBlue4);
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
+	--builderSubtleHighlightColorSolid: var(--wdsColorGray1);
 	--builderSidebarWidth: 265px;
 	--builderSettingsWidth: 450px;
-	--builderActionOngoingColor: #333333;
+	--builderActionOngoingColor: var(--wdsColorGray6);
 	--builderTopBarHeight: 48px;
 	--builderWarningTextColor: white;
-	--builderWarningColor: #ff3d00;
+	--builderWarningColor: var(--wdsColorOrange5);
 	--builderPanelSwitcherHeight: 48px;
 	--builderPanelSwitcherExpandedHeight: calc(50% - 24px);
 
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 	--buttonTextColor: white;
 	--accentColor: var(--builderAccentColor);
 	--primaryTextColor: var(--builderPrimaryTextColor);

src/ui/src/builder/BuilderHeader.vue

@@ -140,7 +140,7 @@ const customHandlerModalCloseAction: ModalAction = {
 .panelToggler:hover {
 	font-size: 12px;
 	--buttonColor: black;
-	--builderSeparatorColor: #303030;
+	--builderSeparatorColor: var(--wdsColorGray6);
 	--buttonTextColor: white;
 }
 

src/ui/src/builder/BuilderSelect.vue

@@ -149,7 +149,6 @@ function onSelect(value: string) {
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
-	color: #000000e6;
 	cursor: pointer;
 }
 </style>

src/ui/src/builder/panels/BuilderCodePanel.vue

@@ -117,7 +117,7 @@ async function save() {
 }
 
 .status.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 </style>

src/ui/src/builder/panels/BuilderLogIndicator.vue

@@ -64,10 +64,10 @@ const entryCountByType = computed(() => {
 }
 
 .number.error .icon {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .number.info .icon {
-	background: #6985ff;
+	background: var(--wdsColorBlue4);
 }
 </style>

src/ui/src/builder/panels/BuilderLogPanel.vue

@@ -113,8 +113,8 @@ const logEntries = computed(() => {
 }
 
 .entry.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 
 .entry .icon {

src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue

@@ -267,15 +267,15 @@ function formatExecutionTime(timeInSeconds: number): string {
 }
 
 .item .outcome .ball.success {
-	background: #3bdcab;
+	background: var(--wdsColorGreen5);
 }
 
 .item .outcome .ball.error {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .item .outcome .ball.dynamic {
-	background: #a95ef8;
+	background: var(--wdsColorPurple4);
 }
 
 .item .result {

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`");
 }

src/ui/src/builder/sharedStyles.css

@@ -1,26 +1,3 @@
-.BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #29cf00;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #353535;
-	--builderHeaderBackgroundHoleColor: #202020;
-	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
-	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
-	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: rgba(0, 0, 0, 0.1);
-	--builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05);
-	--builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSelectedColor: rgba(210, 234, 244, 0.8);
-	--builderIntenseSelectedColor: #6985ff;
-	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
-	--builderSidebarWidth: max(265px, 27vh);
-	--builderSettingsWidth: max(265px, 27vh);
-	--builderActionOngoingColor: rgba(0, 0, 0, 0.7);
-}
-
 h1,
 h2,
 h3 {

src/ui/src/components/core/base/BaseEmptiness.vue

@@ -31,8 +31,8 @@ const definition = computed(() =>
 @import "@/renderer/sharedStyles.css";
 
 .BaseEmptiness {
-	background: #e4e7ed;
-	color: #4f4f4f;
+	background: var(--wdsColorGray2);
+	color: var(--wdsColorGray5);
 	padding: 16px;
 	display: flex;
 	align-items: center;
@@ -46,7 +46,7 @@ const definition = computed(() =>
 }
 
 .title > h3 {
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 }
 
 .message {

src/ui/src/components/core/content/CoreAnnotatedText.vue

@@ -33,6 +33,7 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import SharedControlBar from "@/components/shared/SharedControlBar.vue";
+import { WdsColor } from "@/wds/tokens";
 export default {
 	writer: {
 		name: "Annotated text",
@@ -49,7 +50,7 @@ export default {
 				name: "Reference",
 				desc: "The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.",
 				type: FieldType.Color,
-				default: "#5551FF",
+				default: WdsColor.Blue5,
 				category: FieldCategory.Style,
 			},
 			seed: {

src/ui/src/components/core/content/CoreChatbot.vue

@@ -110,6 +110,7 @@ import {
 import prettyBytes from "pretty-bytes";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -241,21 +242,21 @@ export default {
 			},
 			userRoleColor: {
 				name: "User role",
-				default: "#F5F5F9",
+				default: WdsColor.Gray1,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarBackgroundColor: {
 				name: "Avatar",
-				default: "#2C2D30",
+				default: WdsColor.Gray6,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarTextColor: {
 				name: "Avatar text",
-				default: "#FFFFFF",
+				default: WdsColor.White,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
@@ -267,11 +268,11 @@ export default {
 			separatorColor,
 			buttonColor: {
 				...buttonColor,
-				default: "#000000",
+				default: WdsColor.Black,
 			},
 			buttonTextColor: {
 				...buttonTextColor,
-				default: "#ffffff",
+				default: WdsColor.White,
 			},
 			cssClasses,
 		},

src/ui/src/components/core/content/CoreDataframe.vue

@@ -134,6 +134,7 @@ import {
 	UNNAMED_INDEX_COLUMN_PATTERN,
 } from "./CoreDataframe/constants";
 import WdsButton from "@/wds/WdsButton.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 
@@ -279,7 +280,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {

src/ui/src/components/core/content/CoreDataframeLegacy.vue

@@ -125,6 +125,7 @@ import { onUnmounted } from "vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
@@ -205,7 +206,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {

src/ui/src/components/core/content/CoreMessage.vue

@@ -31,6 +31,7 @@ else:
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -48,13 +49,13 @@ export default {
 			},
 			successColor: {
 				name: "Success",
-				default: "#A9F9E1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			errorColor: {
 				name: "Error",
-				default: "#FFCFC2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -66,13 +67,13 @@ export default {
 			},
 			infoColor: {
 				name: "Info",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			loadingColor: {
 				name: "Loading",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},

src/ui/src/components/core/content/CoreMetric.vue

@@ -16,6 +16,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -51,7 +52,7 @@ export default {
 			secondaryTextColor,
 			positiveColor: {
 				name: "Positive",
-				default: "#a9f9e1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -63,7 +64,7 @@ export default {
 			},
 			negativeColor: {
 				name: "Negative",
-				default: "#ffcfc2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},

src/ui/src/components/core/content/CorePlotlyGraph.vue

@@ -12,6 +12,7 @@ For example, implement cross-filtering.
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -64,17 +65,22 @@ const fields = inject(injectionKeys.evaluatedFields);
 const spec = computed(() => fields.spec.value);
 
 const defaultLayout = {
-	paper_bgcolor: "#ffffff",
-	plot_bgcolor: "#f5f5f9",
-	colorway: ["#6985FF", "#A95EF8", "#F86", "#3BDCAB"],
+	paper_bgcolor: WdsColor.White,
+	plot_bgcolor: WdsColor.Gray1,
+	colorway: [
+		WdsColor.Blue4,
+		WdsColor.Blue4,
+		WdsColor.Orange4,
+		WdsColor.Green5,
+	],
 	font: {
 		family: "Poppins, sans-serif",
 		size: 12,
-		color: "#000000",
+		color: WdsColor.Black,
 	},
 	hoverlabel: {
-		color: "#ffffff",
-		bgcolor: "#000000",
+		color: WdsColor.White,
+		bgcolor: WdsColor.Black,
 	},
 };