From 7fe7302191d5fd1db6edaf381ac0662b1d6e12ef Mon Sep 17 00:00:00 2001 From: Alexandre Rousseau Date: Mon, 16 Dec 2024 13:18:22 +0100 Subject: [PATCH 1/5] chore(ui): use WDS colors tokens - WF-149 --- src/ui/src/builder/BuilderApp.vue | 20 +++++----- .../src/builder/panels/BuilderCodePanel.vue | 4 +- .../builder/panels/BuilderLogIndicator.vue | 4 +- src/ui/src/builder/panels/BuilderLogPanel.vue | 2 +- .../panels/BuilderLogWorkflowExecution.vue | 6 +-- src/ui/src/builder/sharedStyles.css | 6 +-- .../components/core/base/BaseEmptiness.vue | 4 +- .../core/content/CoreAnnotatedText.vue | 3 +- .../components/core/content/CoreChatbot.vue | 9 +++-- .../components/core/content/CoreDataframe.vue | 3 +- .../core/content/CoreDataframeLegacy.vue | 3 +- .../components/core/content/CoreMessage.vue | 9 +++-- .../components/core/content/CoreMetric.vue | 5 ++- .../core/content/CorePlotlyGraph.vue | 13 ++++--- .../src/components/core/content/CoreTags.vue | 3 +- .../components/core/input/CoreColorInput.vue | 7 ++-- .../core/input/CoreMultiselectInput.vue | 3 +- .../components/core/input/CoreSelectInput.vue | 3 +- .../workflows/abstract/WorkflowsNode.vue | 10 ++--- .../workflows/base/WorkflowMiniMap.vue | 4 +- src/ui/src/main.ts | 1 + src/ui/src/renderer/ComponentRenderer.vue | 16 ++++---- src/ui/src/renderer/RendererNotifications.vue | 2 +- src/ui/src/wds/WdsButton.vue | 30 +++++++-------- src/ui/src/wds/WdsDropdownMenu.vue | 6 +-- src/ui/src/wds/WdsTab.vue | 8 ++-- src/ui/src/wds/WdsTextInput.vue | 2 +- src/ui/src/wds/tokens.css | 37 +++++++++++++++++++ src/ui/src/wds/tokens.ts | 36 ++++++++++++++++++ 29 files changed, 171 insertions(+), 88 deletions(-) create mode 100644 src/ui/src/wds/tokens.css create mode 100644 src/ui/src/wds/tokens.ts diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue index 421a08bac..d33f56c29 100644 --- a/src/ui/src/builder/BuilderApp.vue +++ b/src/ui/src/builder/BuilderApp.vue @@ -270,19 +270,19 @@ onMounted(() => { @import "./sharedStyles.css"; .BuilderApp { - --builderBackgroundColor: #ffffff; - --builderAccentColor: #5551ff; + --builderBackgroundColor: var(--wdsColorWhite); + --builderAccentColor: var(--wdsColorBlue5); --builderSuccessColor: #3be19b; --builderErrorColor: #ff3d00; - --builderHeaderBackgroundColor: #333333; - --builderHeaderBackgroundHoleColor: #000000; + --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; + --builderSeparatorColor: var(--wdsColorGray2); + --builderSubtleSeparatorColor: var(--wdsColorGray1); + --builderIntenseSeparatorColor: var(--wdsColorGray3); + --builderSelectedColor: var(--wdsColorBlue2); --builderMatchingColor: #f8dccc; --builderIntenseSelectedColor: #0094d1; --builderSubtleHighlightColor: rgba(0, 0, 0, 0.05); @@ -290,14 +290,14 @@ onMounted(() => { --builderDisabledColor: rgb(180, 180, 180); --builderSidebarWidth: 265px; --builderSettingsWidth: 450px; - --builderActionOngoingColor: #333333; + --builderActionOngoingColor: var(--wdsColorGray6); --builderTopBarHeight: 48px; --builderWarningTextColor: white; --builderWarningColor: #ff3d00; --builderPanelSwitcherHeight: 48px; --builderPanelSwitcherExpandedHeight: calc(50% - 24px); - --buttonColor: #5551ff; + --buttonColor: var(--wdsColorBlue5); --buttonTextColor: white; --accentColor: var(--builderAccentColor); --primaryTextColor: var(--builderPrimaryTextColor); diff --git a/src/ui/src/builder/panels/BuilderCodePanel.vue b/src/ui/src/builder/panels/BuilderCodePanel.vue index 0f331cc39..129acd83c 100644 --- a/src/ui/src/builder/panels/BuilderCodePanel.vue +++ b/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); } diff --git a/src/ui/src/builder/panels/BuilderLogIndicator.vue b/src/ui/src/builder/panels/BuilderLogIndicator.vue index 503b729d1..ddaf1e9fb 100644 --- a/src/ui/src/builder/panels/BuilderLogIndicator.vue +++ b/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); } diff --git a/src/ui/src/builder/panels/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue index 58d2f058a..4f5297229 100644 --- a/src/ui/src/builder/panels/BuilderLogPanel.vue +++ b/src/ui/src/builder/panels/BuilderLogPanel.vue @@ -114,7 +114,7 @@ const logEntries = computed(() => { .entry.error { border: 1px solid #ffcfc2; - background: #fff4f1; + background: var(--wdsColorOrange1); } .entry .icon { diff --git a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue index 805fda66c..69837003e 100644 --- a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue +++ b/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 { diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css index 0c8d33133..35e4df80a 100644 --- a/src/ui/src/builder/sharedStyles.css +++ b/src/ui/src/builder/sharedStyles.css @@ -1,6 +1,6 @@ .BuilderApp { - --builderBackgroundColor: #ffffff; - --builderAccentColor: #5551ff; + --builderBackgroundColor: var(--wdsColorWhite); + --builderAccentColor: var(--wdsColorBlue5); --builderSuccessColor: #29cf00; --builderErrorColor: #ff3d00; --builderHeaderBackgroundColor: #353535; @@ -12,7 +12,7 @@ --builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05); --builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2); --builderSelectedColor: rgba(210, 234, 244, 0.8); - --builderIntenseSelectedColor: #6985ff; + --builderIntenseSelectedColor: var(--wdsColorBlue4); --builderSubtleHighlightColor: rgba(0, 0, 0, 0.05); --builderSubtleHighlightColorSolid: #f2f2f2; --builderDisabledColor: rgb(180, 180, 180); diff --git a/src/ui/src/components/core/base/BaseEmptiness.vue b/src/ui/src/components/core/base/BaseEmptiness.vue index a833f0855..6edfff9e9 100644 --- a/src/ui/src/components/core/base/BaseEmptiness.vue +++ b/src/ui/src/components/core/base/BaseEmptiness.vue @@ -32,7 +32,7 @@ const definition = computed(() => .BaseEmptiness { background: #e4e7ed; - color: #4f4f4f; + 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 { diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue index aefb891cb..b89a9bb03 100644 --- a/src/ui/src/components/core/content/CoreAnnotatedText.vue +++ b/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: { diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue index 70064df84..76a36e538 100644 --- a/src/ui/src/components/core/content/CoreChatbot.vue +++ b/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,7 +242,7 @@ export default { }, userRoleColor: { name: "User role", - default: "#F5F5F9", + default: WdsColor.Gray1, type: FieldType.Color, category: FieldCategory.Style, applyStyleVariable: true, @@ -255,7 +256,7 @@ export default { }, 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, }, diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue index fa9470da4..50a76f8d3 100644 --- a/src/ui/src/components/core/content/CoreDataframe.vue +++ b/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."; @@ -272,7 +273,7 @@ export default { name: "Background", type: FieldType.Color, category: FieldCategory.Style, - default: "#ffffff", + default: WdsColor.White, applyStyleVariable: true, }, fontStyle: { diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue index cddbe3073..f3f9d44e1 100644 --- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue +++ b/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: { diff --git a/src/ui/src/components/core/content/CoreMessage.vue b/src/ui/src/components/core/content/CoreMessage.vue index 640a9e3eb..8a2e600cf 100644 --- a/src/ui/src/components/core/content/CoreMessage.vue +++ b/src/ui/src/components/core/content/CoreMessage.vue @@ -31,6 +31,7 @@ else: