From 44dd09dfef006f071afeb69501643bd18f7ccf75 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 2 Jun 2023 10:56:36 +0100 Subject: [PATCH] UI colours updated --- .../src/components/common/CodeEditor/index.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js index 8815b1aec2..d44a446f08 100644 --- a/packages/builder/src/components/common/CodeEditor/index.js +++ b/packages/builder/src/components/common/CodeEditor/index.js @@ -64,25 +64,38 @@ export const getDefaultTheme = opts => { fontStyle: "unset", textTransform: "uppercase", fontSize: "10px", + backgroundColor: "var(--spectrum-global-color-gray-100)", + color: "var(--spectrum-global-color-gray-600)", + }, + "& .cm-completionLabel": { + marginLeft: + "calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))", }, "& .info-bubble": { fontSize: "var(--font-size-s)", display: "grid", gridGap: "var(--spacing-s)", gridTemplateColumns: "1fr", + color: "var(--spectrum-global-color-gray-800)", }, "& .cm-tooltip": { marginLeft: "var(--spacing-s)", border: "1px solid var(--spectrum-global-color-gray-300)", borderRadius: "var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )", + backgroundColor: "var(--spectrum-global-color-gray-50)", }, // Section header "& .info-section": { display: "flex", padding: "var(--spacing-s)", gap: "var(--spacing-m)", - borderBottom: "1px solid var(--spectrum-global-color-gray-300)", + borderBottom: "1px solid var(--spectrum-global-color-gray-200)", + color: "var(--spectrum-global-color-gray-800)", + fontWeight: "bold", + }, + "& .info-section .spectrum-Icon": { + color: "var(--spectrum-global-color-gray-600)", }, // Autocomplete Option "& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": { @@ -91,10 +104,10 @@ export const getDefaultTheme = opts => { alignItems: "center", fontSize: "var(--spectrum-alias-font-size-default)", padding: "var(--spacing-s)", + color: "var(--spectrum-global-color-gray-800)", }, "& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": { backgroundColor: "var(--spectrum-global-color-gray-200)", - color: "var(--ink)", }, "& .binding-wrap": { color: "var(--spectrum-global-color-blue-700)",