🪟 🔧 Use CSS Custom Properties for colors

airbyte-webapp/.stylelintrc

@@ -10,6 +10,7 @@
     "color-function-notation": null,
     "font-family-name-quotes": null,
     "no-unknown-animations": true,
+    "custom-property-empty-line-before": null,
     "scss/dollar-variable-empty-line-before": null,
     "scss/dollar-variable-pattern": null,
     "scss/percent-placeholder-pattern": null,

airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss

@@ -58,7 +58,7 @@
 }
 
 .purpleBackground {
-  background-color: colors.$blue-transparent;
+  background-color: colors.$blue-40;
 }
 
 .noHeader {

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss

@@ -36,7 +36,7 @@
   }
 
   &.selected {
-    background-color: colors.$blue-transparent;
+    background-color: colors.$blue-40;
   }
 }
 

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

@@ -15,14 +15,10 @@ interface CodeEditorProps {
   onMount?: (editor: editor.IStandaloneCodeEditor) => void;
 }
 
-// Converts 3-character hex values into 6-character ones.
-// Required for custom monaco theme, because it fails when receiving 3-character hex values.
-function expandHexValue(input: string) {
-  const match = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(input);
-  if (match) {
-    return `#${match[1].repeat(2)}${match[2].repeat(2)}${match[3].repeat(2)}`;
-  }
-  return input;
+function cssCustomPropToHex(cssCustomProperty: string) {
+  const varName = cssCustomProperty.replace(/var\(|\)/g, "");
+  const bodyStyles = window.getComputedStyle(document.body);
+  return bodyStyles.getPropertyValue(varName).trim();
 }
 
 export const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -40,14 +36,14 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       base: "vs-dark",
       inherit: true,
       rules: [
-        { 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) },
+        { token: "string", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.darkNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.darkDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.darkKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
@@ -58,19 +54,19 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       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) },
+        { token: "string", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.lightNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.lightDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.lightKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
-        "editorLineNumber.foreground": expandHexValue(styles.lightLineNumber),
-        "editorLineNumber.activeForeground": expandHexValue(styles.lightLineNumberActive),
+        "editorLineNumber.foreground": cssCustomPropToHex(styles.lightLineNumber),
+        "editorLineNumber.activeForeground": cssCustomPropToHex(styles.lightLineNumberActive),
       },
     });
   };

airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss

@@ -20,6 +20,5 @@
 
 :export {
   // Export colors to be used in SVG gradients
-  gradientStart: colors.$blue;
-  gradientStop: colors.$blue-transparent;
+  gradientColor: colors.$blue;
 }

airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx

@@ -16,8 +16,8 @@ export const CircleLoader = ({ title }: CircleLoaderProps): JSX.Element => (
         spreadMethod="pad"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0%" stopColor={styles.gradientStart} />
-        <stop offset="100%" stopColor={styles.gradientStop} />
+        <stop offset="0%" stopColor={styles.gradientColor} />
+        <stop offset="100%" stopColor={styles.gradientColor} stopOpacity=".1" />
       </linearGradient>
     </defs>
     {title && <title>{title}</title>}

airbyte-webapp/src/scss/_colors.scss

@@ -1,95 +1,94 @@
 /* stylelint-disable color-no-hex, color-hex-length  */
-$blue-30: #f4f4ff;
-$blue-40: #f0efff;
-$blue-50: #eae9ff;
-$blue-100: #cbc8ff;
-$blue-200: #a6a4ff;
-$blue-300: #7f7eff;
-$blue-400: #615eff;
-$blue-500: #433bfb;
-$blue-600: #3f30ee;
-$blue-700: #3622e1;
-$blue-800: #2e0ad7;
-$blue-900: #2800bd;
-$blue: $blue-400;
-$blue-transparent: rgba($blue, 0.1);
+$blue-30: var(--color-blue-30);
+$blue-40: var(--color-blue-40);
+$blue-50: var(--color-blue-50);
+$blue-100: var(--color-blue-100);
+$blue-200: var(--color-blue-200);
+$blue-300: var(--color-blue-300);
+$blue-400: var(--color-blue-400);
+$blue-500: var(--color-blue-500);
+$blue-600: var(--color-blue-600);
+$blue-700: var(--color-blue-700);
+$blue-800: var(--color-blue-800);
+$blue-900: var(--color-blue-900);
+$blue: var(--color-blue-400);
 
-$dark-blue-50: #e6e7ef;
-$dark-blue-100: #c0c3d9;
-$dark-blue-200: #989dbf;
-$dark-blue-300: #989dbf;
-$dark-blue-400: #565c94;
-$dark-blue-500: #3b4283;
-$dark-blue-600: #353b7b;
-$dark-blue-700: #2d3270;
-$dark-blue-800: #262963;
-$dark-blue-900: #1a194d;
-$dark-blue-1000: #0a0a23;
-$dark-blue: $dark-blue-900;
+$dark-blue-50: var(--color-dark-blue-50);
+$dark-blue-100: var(--color-dark-blue-100);
+$dark-blue-200: var(--color-dark-blue-200);
+$dark-blue-300: var(--color-dark-blue-300);
+$dark-blue-400: var(--color-dark-blue-400);
+$dark-blue-500: var(--color-dark-blue-500);
+$dark-blue-600: var(--color-dark-blue-600);
+$dark-blue-700: var(--color-dark-blue-700);
+$dark-blue-800: var(--color-dark-blue-800);
+$dark-blue-900: var(--color-dark-blue-900);
+$dark-blue-1000: var(--color-dark-blue-1000);
+$dark-blue: var(--color-dark-blue-900);
 
-$grey-30: #fcfcfd;
-$grey-50: #f8f8fa;
-$grey-100: #e8e8ed;
-$grey-200: #d9d9e0;
-$grey-300: #afafc1;
-$grey-400: #8b8ba0;
-$grey-500: #717189;
-$grey-600: #595971;
-$grey-700: #494961;
-$grey-800: #35354a;
-$grey-900: #252536;
-$grey: $grey-300;
+$grey-30: var(--color-grey-30);
+$grey-50: var(--color-grey-50);
+$grey-100: var(--color-grey-100);
+$grey-200: var(--color-grey-200);
+$grey-300: var(--color-grey-300);
+$grey-400: var(--color-grey-400);
+$grey-500: var(--color-grey-500);
+$grey-600: var(--color-grey-600);
+$grey-700: var(--color-grey-700);
+$grey-800: var(--color-grey-800);
+$grey-900: var(--color-grey-900);
+$grey: var(--color-grey-300);
 
-$orange-50: #fae9e8;
-$orange-100: #fecbbf;
-$orange-200: #fea996;
-$orange-300: #fe866c;
-$orange-400: #ff6a4d;
-$orange-500: #ff4f31;
-$orange-600: #f4492d;
-$orange-700: #e64228;
-$orange-800: #d83c24;
-$orange-900: #bf2f1b;
-$orange: $orange-400;
+$orange-50: var(--color-orange-50);
+$orange-100: var(--color-orange-100);
+$orange-200: var(--color-orange-200);
+$orange-300: var(--color-orange-300);
+$orange-400: var(--color-orange-400);
+$orange-500: var(--color-orange-500);
+$orange-600: var(--color-orange-600);
+$orange-700: var(--color-orange-700);
+$orange-800: var(--color-orange-800);
+$orange-900: var(--color-orange-900);
+$orange: var(--color-orange-400);
 
-$green-50: #dcf6f8;
-$green-100: #a7e9ec;
-$green-200: #67dae1;
-$green-300: #00cbd6;
-$green-400: #00c0cd;
-$green-500: #00b5c7;
-$green-600: #00a5b5;
-$green-700: #00909b;
-$green-800: #007c84;
-$green-900: #005959;
-$green: $green-200;
+$green-50: var(--color-green-50);
+$green-100: var(--color-green-100);
+$green-200: var(--color-green-200);
+$green-300: var(--color-green-300);
+$green-400: var(--color-green-400);
+$green-500: var(--color-green-500);
+$green-600: var(--color-green-600);
+$green-700: var(--color-green-700);
+$green-800: var(--color-green-800);
+$green-900: var(--color-green-900);
+$green: var(--color-green-200);
 
-$red-50: #ffe4e8;
-$red-100: #ffbac6;
-$red-200: #ff8da1;
-$red-300: #ff5e7b;
-$red-400: #fb395f;
-$red-500: #f51a46;
-$red-600: #e51145;
-$red-700: #d00543;
-$red-800: #bc0042;
-$red-900: #99003f;
-$red: $red-300;
+$red-50: var(--color-red-50);
+$red-100: var(--color-red-100);
+$red-200: var(--color-red-200);
+$red-300: var(--color-red-300);
+$red-400: var(--color-red-400);
+$red-500: var(--color-red-500);
+$red-600: var(--color-red-600);
+$red-700: var(--color-red-700);
+$red-800: var(--color-red-800);
+$red-900: var(--color-red-900);
+$red: var(--color-red-300);
 
-$black: #000000;
-$white: #ffffff;
+$black: var(--color-black);
+$white: var(--color-white);
 
-$yellow-50: #fdf8e1;
-$yellow-100: #fbecb3;
-$yellow-200: #f9e081;
-$yellow-300: #f8d54e;
-$yellow-400: #f7ca26;
-$yellow-500: #f6c000;
-$yellow-600: #f6b300;
-$yellow-700: #f7a000;
-$yellow-800: #f79000;
-$yellow-900: #f77100;
-$yellow: $yellow-500;
+$yellow-50: var(--color-yellow-50);
+$yellow-100: var(--color-yellow-100);
+$yellow-200: var(--color-yellow-200);
+$yellow-300: var(--color-yellow-300);
+$yellow-400: var(--color-yellow-400);
+$yellow-500: var(--color-yellow-500);
+$yellow-600: var(--color-yellow-600);
+$yellow-700: var(--color-yellow-700);
+$yellow-800: var(--color-yellow-800);
+$yellow-900: var(--color-yellow-900);
+$yellow: var(--color-yellow-500);
 
 // LEGACY - DEPRECATED
 

airbyte-webapp/src/scss/_theme-light.scss

@@ -0,0 +1,86 @@
+/* stylelint-disable color-no-hex, color-hex-length  */
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-blue-30: #f4f4ff;
+  --color-blue-40: #f0efff;
+  --color-blue-50: #eae9ff;
+  --color-blue-100: #cbc8ff;
+  --color-blue-200: #a6a4ff;
+  --color-blue-300: #7f7eff;
+  --color-blue-400: #615eff;
+  --color-blue-500: #433bfb;
+  --color-blue-600: #3f30ee;
+  --color-blue-700: #3622e1;
+  --color-blue-800: #2e0ad7;
+  --color-blue-900: #2800bd;
+
+  --color-dark-blue-50: #e6e7ef;
+  --color-dark-blue-100: #c0c3d9;
+  --color-dark-blue-200: #989dbf;
+  --color-dark-blue-300: #989dbf;
+  --color-dark-blue-400: #565c94;
+  --color-dark-blue-500: #3b4283;
+  --color-dark-blue-600: #353b7b;
+  --color-dark-blue-700: #2d3270;
+  --color-dark-blue-800: #262963;
+  --color-dark-blue-900: #1a194d;
+  --color-dark-blue-1000: #0a0a23;
+
+  --color-grey-30: #fcfcfd;
+  --color-grey-50: #f8f8fa;
+  --color-grey-100: #e8e8ed;
+  --color-grey-200: #d9d9e0;
+  --color-grey-300: #afafc1;
+  --color-grey-400: #8b8ba0;
+  --color-grey-500: #717189;
+  --color-grey-600: #595971;
+  --color-grey-700: #494961;
+  --color-grey-800: #35354a;
+  --color-grey-900: #252536;
+
+  --color-orange-50: #fae9e8;
+  --color-orange-100: #fecbbf;
+  --color-orange-200: #fea996;
+  --color-orange-300: #fe866c;
+  --color-orange-400: #ff6a4d;
+  --color-orange-500: #ff4f31;
+  --color-orange-600: #f4492d;
+  --color-orange-700: #e64228;
+  --color-orange-800: #d83c24;
+  --color-orange-900: #bf2f1b;
+
+  --color-green-50: #dcf6f8;
+  --color-green-100: #a7e9ec;
+  --color-green-200: #67dae1;
+  --color-green-300: #00cbd6;
+  --color-green-400: #00c0cd;
+  --color-green-500: #00b5c7;
+  --color-green-600: #00a5b5;
+  --color-green-700: #00909b;
+  --color-green-800: #007c84;
+  --color-green-900: #005959;
+
+  --color-red-50: #ffe4e8;
+  --color-red-100: #ffbac6;
+  --color-red-200: #ff8da1;
+  --color-red-300: #ff5e7b;
+  --color-red-400: #fb395f;
+  --color-red-500: #f51a46;
+  --color-red-600: #e51145;
+  --color-red-700: #d00543;
+  --color-red-800: #bc0042;
+  --color-red-900: #99003f;
+
+  --color-yellow-50: #fdf8e1;
+  --color-yellow-100: #fbecb3;
+  --color-yellow-200: #f9e081;
+  --color-yellow-300: #f8d54e;
+  --color-yellow-400: #f7ca26;
+  --color-yellow-500: #f6c000;
+  --color-yellow-600: #f6b300;
+  --color-yellow-700: #f7a000;
+  --color-yellow-800: #f79000;
+  --color-yellow-900: #f77100;
+}

airbyte-webapp/src/scss/export.module.scss

@@ -21,7 +21,6 @@
   blue800: colors.$blue-800;
   blue900: colors.$blue-900;
   blue: colors.$blue;
-  blueTransparent: colors.$blue-transparent;
 
   darkBlue50: colors.$dark-blue-50;
   darkBlue100: colors.$dark-blue-100;

airbyte-webapp/src/scss/global.scss

@@ -1,3 +1,4 @@
+@use "./theme-light";
 @use "./colors";
 @use "./fonts";