🪟 🎨 Connector Builder light yaml editor theme

airbyte-webapp/src/components/StreamTestingPanel/ConfigMenu.module.scss

@@ -2,5 +2,6 @@
 
 .modalContent {
  height: 60vh;
- background-color: colors.$dark-blue;
+ overflow: visible;
+ background-color: colors.$grey-100;
 }

airbyte-webapp/src/components/StreamTestingPanel/ConfigMenu.tsx

@@ -38,7 +38,7 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className }) => {
  <CodeEditor
  value={configString}
  language="json"
- theme="airbyte"
+ theme="airbyte-light"
  onChange={(val: string | undefined) => {
  setConfigString(val ?? "");
  }}

airbyte-webapp/src/components/YamlEditor/YamlEditor.module.scss

@@ -9,7 +9,7 @@
 
 .control {
  flex: 0 0 auto;
- background-color: colors.$dark-blue;
+ background-color: transparent;
  display: flex;
  padding: variables.$spacing-md;
  flex-direction: row;

airbyte-webapp/src/components/YamlEditor/YamlEditor.tsx

@@ -70,7 +70,7 @@ export const YamlEditor: React.FC = () => {
  <CodeEditor
  value={yamlValue}
  language="yaml"
- theme="airbyte"
+ theme="airbyte-light"
  onChange={(value) => setYamlValue(value ?? "")}
  lineNumberCharacterWidth={6}
  onMount={(editor) => (yamlEditorRef.current = editor)}

airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.module.scss

@@ -2,9 +2,16 @@
 
 // Export colors to be used in monaco editor
 :export {
- tokenString: colors.$white;
- tokenType: colors.$blue-300;
- tokenNumber: colors.$orange-300;
- tokenDelimiter: colors.$yellow-300;
- tokenKeyword: colors.$green-300;
+ darkString: colors.$white;
+ darkType: colors.$blue-300;
+ darkNumber: colors.$orange-300;
+ darkDelimiter: colors.$yellow-300;
+ darkKeyword: colors.$green-300;
+ lightString: colors.$dark-blue;
+ lightType: colors.$blue-500;
+ lightNumber: colors.$orange-600;
+ lightDelimiter: colors.$black;
+ lightKeyword: colors.$green-600;
+ lightLineNumber: colors.$dark-blue-300;
+ lightLineNumberActive: colors.$dark-blue;
 }

airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx

@@ -7,7 +7,7 @@ import styles from "./CodeEditor.module.scss";
 interface CodeEditorProps {
  value: string;
  language?: string;
- theme?: "airbyte" | "vs-dark" | "light";
+ theme?: "airbyte-dark" | "airbyte-light" | "vs-dark" | "light";
  readOnly?: boolean;
  onChange?: (value: string | undefined) => void;
  height?: string;
@@ -36,22 +36,43 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
  onMount,
 }) => {
  const setAirbyteTheme = (monaco: Monaco) => {
- monaco.editor.defineTheme("airbyte", {
+ monaco.editor.defineTheme("airbyte-dark", {
  base: "vs-dark",
  inherit: true,
  rules: [
- { token: "string", foreground: expandHexValue(styles.tokenString) },
- { token: "type", foreground: expandHexValue(styles.tokenType) },
- { token: "number", foreground: expandHexValue(styles.tokenNumber) },
- { token: "delimiter", foreground: expandHexValue(styles.tokenDelimiter) },
- { token: "keyword", foreground: expandHexValue(styles.tokenKeyword) },
+ { token: "string", foreground: expandHexValue(styles.darkString) },
+ { token: "string.yaml", foreground: expandHexValue(styles.darkString) },
+ { token: "string.value.json", foreground: expandHexValue(styles.darkType) },
+ { token: "string.key.json", foreground: expandHexValue(styles.darkType) },
+ { token: "type", foreground: expandHexValue(styles.darkType) },
+ { token: "number", foreground: expandHexValue(styles.darkNumber) },
+ { token: "delimiter", foreground: expandHexValue(styles.darkDelimiter) },
+ { token: "keyword", foreground: expandHexValue(styles.darkKeyword) },
  ],
  colors: {
  "editor.background": "#00000000", // transparent, so that parent background is shown instead
  },
  });
 
- monaco.editor.setTheme("airbyte");
+ monaco.editor.defineTheme("airbyte-light", {
+ base: "vs",
+ inherit: true,
+ rules: [
+ { token: "string", foreground: expandHexValue(styles.lightString) },
+ { token: "string.yaml", foreground: expandHexValue(styles.lightString) },
+ { token: "string.value.json", foreground: expandHexValue(styles.lightString) },
+ { token: "string.key.json", foreground: expandHexValue(styles.lightType) },
+ { token: "type", foreground: expandHexValue(styles.lightType) },
+ { token: "number", foreground: expandHexValue(styles.lightNumber) },
+ { token: "delimiter", foreground: expandHexValue(styles.lightDelimiter) },
+ { token: "keyword", foreground: expandHexValue(styles.lightKeyword) },
+ ],
+ colors: {
+ "editor.background": "#00000000", // transparent, so that parent background is shown instead
+ "editorLineNumber.foreground": expandHexValue(styles.lightLineNumber),
+ "editorLineNumber.activeForeground": expandHexValue(styles.lightLineNumberActive),
+ },
+ });
  };
 
  return (

airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.module.scss

@@ -12,5 +12,5 @@
 }
 
 .container {
- background-image: linear-gradient(colors.$dark-blue-900, colors.$dark-blue-1000);
+ background-image: linear-gradient(colors.$grey-50, colors.$grey-100);
 }