🪟 🔧 Use CSS Custom Properties for colors (#19344)

* use css custom properties for colors * separate tokens by hue * adjust stylelint * fix code editor color transformations * remove blue-transparent from color palette * scope opacity to bg only * rename to theme-light * avoid transparent blue, use palette color instead * bring back expanding hex values * replace tooltip colors * define overlay color in theme * fix tooltip colors * slightly darker link color * remove unused SC colors * add box shadow variables * light tooltip table variant * inline one-off colors for login * add new colors to theme-light * fix import name * fix merge conflict with box shadows * fix overlay bg color Co-authored-by: lmossman <lake@airbyte.io>
airbytehq · Jan 10, 2023 · 6033b11 · 6033b11
1 parent a8e1037
commit 6033b11
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 139 deletions.
diff --git a/airbyte-webapp/.stylelintrc b/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,

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -60,7 +60,7 @@ $icon-size: 20px;
 }
 
 .purpleBackground {
-  background-color: colors.$blue-transparent;
+  background-color: colors.$blue-40;
 }
 
 .noHeader {

diff --git a/.../components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss b/.../components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
@@ -1,9 +1,9 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 @use "scss/z-indices";
 
-$container-left-space: vars.$spacing-xl;
-$container-right-space: vars.$spacing-xl * 2;
+$container-left-space: variables.$spacing-xl;
+$container-right-space: variables.$spacing-xl * 2;
 
 .dialog {
   z-index: z-indices.$modal;
@@ -12,13 +12,13 @@ $container-right-space: vars.$spacing-xl * 2;
 .container {
   position: fixed;
   bottom: 0;
-  left: vars.$width-size-menu + $container-left-space;
-  width: calc(100% - (vars.$width-size-menu + $container-right-space));
+  left: variables.$width-size-menu + $container-left-space;
+  width: calc(100% - (variables.$width-size-menu + $container-right-space));
   z-index: 1000;
   height: calc(100vh - 100px);
   background: colors.$white;
-  border-radius: vars.$border-radius-2xl vars.$border-radius-2xl 0 0;
-  box-shadow: 0 0 22px rgba(colors.$dark-blue-900, 12%);
+  border-radius: variables.$border-radius-2xl variables.$border-radius-2xl 0 0;
+  box-shadow: variables.$box-shadow-popup;
 }
 
 .tableContainer {

diff --git a/...te-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss b/...te-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
@@ -71,7 +71,7 @@
 
   &:hover,
   &:focus-visible {
-    box-shadow: 0 10px 19px rgba(colors.$dark-blue-900, 0.16);
+    box-shadow: variables.$box-shadow-raised;
   }
 }
 

diff --git a/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx b/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
@@ -18,6 +18,7 @@ interface CodeEditorProps {
 
 // Converts 3-character hex values into 6-character ones.
 // Required for custom monaco theme, because it fails when receiving 3-character hex values.
+// Only needed for non-dev mode, as that is when hex values get minified to 3 characters.
 function expandHexValue(input: string) {
   const match = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(input);
   if (match) {
@@ -26,6 +27,12 @@ function expandHexValue(input: string) {
   return input;
 }
 
+function cssCustomPropToHex(cssCustomProperty: string) {
+  const varName = cssCustomProperty.replace(/var\(|\)/g, "");
+  const bodyStyles = window.getComputedStyle(document.body);
+  return expandHexValue(bodyStyles.getPropertyValue(varName).trim());
+}
+
 export const CodeEditor: React.FC<CodeEditorProps> = ({
   value,
   language,
@@ -41,14 +48,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
@@ -59,19 +66,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),
       },
     });
   };

diff --git a/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss b/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
@@ -8,6 +8,6 @@
   bottom: 0;
 
   &.dark {
-    background: rgba(colors.$dark-blue, 0.5);
+    background: colors.$overlay-background;
   }
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss b/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;
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx b/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>}

diff --git a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
@@ -17,15 +17,15 @@
   border-radius: variables.$border-radius-sm;
   max-width: 300px;
   z-index: z-indices.$tooltip;
-  background: rgba(colors.$dark-blue, 0.9);
+  background: colors.$dark-blue-900;
   color: colors.$white;
 
   a {
-    color: rgba(colors.$white, 0.5);
+    color: colors.$dark-blue-200;
   }
 
   &.light {
-    background: rgba(colors.$white, 0.9);
+    background: colors.$white;
     color: colors.$dark-blue;
 
     a {

diff --git a/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
@@ -2,12 +2,12 @@
 @use "../../../scss/variables";
 
 .label {
-  color: rgba(colors.$white, 0.7);
+  color: colors.$dark-blue-200;
   padding-right: variables.$spacing-sm;
 }
 
 .light {
   .label {
-    color: rgba(colors.$dark-blue, 0.7);
+    color: colors.$dark-blue-400;
   }
 }
diff --git a/...pp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss b/...pp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
@@ -26,8 +26,8 @@
   background-image: linear-gradient(
     45deg,
     colors.$orange-400 10%,
-    rgba(colors.$orange-400, 0.8) 30%,
-    rgba(colors.$blue-400, 0.8) 80%,
+    rgba(255 106 77 / 80%) 30%,
+    rgba(97 94 255 / 80%) 80%,
     colors.$blue-400 100%
   );
   background-repeat: no-repeat;

diff --git a/airbyte-webapp/src/scss/_colors.scss b/airbyte-webapp/src/scss/_colors.scss
@@ -1,99 +1,100 @@
 /* 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-30: #f4fcfd;
-$green-40: #f0fcfd;
-$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-30: var(--color-green-30);
+$green-40: var(--color-green-40);
+$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-30: #fff4f6;
-$red-40: #ffeff2;
-$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-30: var(--color-red-30);
+$red-40: var(--color-red-40);
+$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);
+
+$overlay-background: var(--color-overlay-background);
 
 // LEGACY - DEPRECATED