Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🔧 Use CSS Custom Properties for colors #19344

Merged
merged 34 commits into from
Jan 10, 2023
Merged

🪟 🔧 Use CSS Custom Properties for colors #19344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
e95928b
use css custom properties for colors
josephkmh Nov 11, 2022
0463e8f
separate tokens by hue
josephkmh Nov 11, 2022
c3f920f
adjust stylelint
josephkmh Nov 11, 2022
b209bc7
fix code editor color transformations
josephkmh Nov 14, 2022
2498eff
remove blue-transparent from color palette
josephkmh Nov 14, 2022
31c4459
scope opacity to bg only
josephkmh Nov 14, 2022
34e4c53
rename to theme-light
josephkmh Nov 14, 2022
d845040
avoid transparent blue, use palette color instead
josephkmh Nov 14, 2022
c9ce27b
bring back expanding hex values
lmossman Nov 14, 2022
3793909
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Nov 28, 2022
24ae5b8
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Dec 4, 2022
dc99cfe
replace tooltip colors
josephkmh Dec 4, 2022
57e9089
define overlay color in theme
josephkmh Dec 4, 2022
64ff476
fix tooltip colors
josephkmh Dec 4, 2022
c0b2e77
slightly darker link color
josephkmh Dec 4, 2022
247f487
remove unused SC colors
josephkmh Dec 4, 2022
d3072db
add box shadow variables
josephkmh Dec 5, 2022
e64d3b3
light tooltip table variant
josephkmh Dec 5, 2022
0ec5ea7
inline one-off colors for login
josephkmh Dec 5, 2022
c6dac64
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Dec 7, 2022
71b8c4b
add new colors to theme-light
josephkmh Dec 7, 2022
8cfe14b
merge conflicts in master
josephkmh Dec 9, 2022
916e857
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Dec 9, 2022
e0c11ed
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Dec 12, 2022
8006797
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Dec 13, 2022
ed14a2c
fix import name
josephkmh Dec 13, 2022
b89be05
fix merge conflict with box shadows
josephkmh Dec 13, 2022
995ebe3
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 2, 2023
c7b33fc
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 9, 2023
796c2c6
fix overlay bg color
josephkmh Jan 9, 2023
3f9c3e5
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 10, 2023
b2d0796
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 10, 2023
16f5dc9
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 10, 2023
e57d17f
Merge branch 'master' into joey/css-custom-properties-colors
josephkmh Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions airbyte-webapp/.stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $icon-size: 20px;
}

.purpleBackground {
background-color: colors.$blue-transparent;
background-color: colors.$blue-40;
josephkmh marked this conversation as resolved.
Show resolved Hide resolved
}

.noHeader {
Expand Down
14 changes: 7 additions & 7 deletions .../components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion ...te-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
43 changes: 25 additions & 18 deletions airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
Expand All @@ -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) },
josephkmh marked this conversation as resolved.
Show resolved Hide resolved
],
colors: {
"editor.background": "#00000000", // transparent, so that parent background is shown instead
Expand All @@ -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),
},
});
};
Expand Down
2 changes: 1 addition & 1 deletion airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
bottom: 0;

&.dark {
background: rgba(colors.$dark-blue, 0.5);
background: colors.$overlay-background;
}
}
3 changes: 1 addition & 2 deletions airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,5 @@

:export {
// Export colors to be used in SVG gradients
gradientStart: colors.$blue;
gradientStop: colors.$blue-transparent;
gradientColor: colors.$blue;
}
4 changes: 2 additions & 2 deletions airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand Down
6 changes: 3 additions & 3 deletions airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
4 changes: 2 additions & 2 deletions ...pp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%,
Comment on lines +29 to +30
Copy link
Contributor Author

@josephkmh josephkmh Dec 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two colors are kind of one-off colors that are part of a gradient, so I felt better defining them inline here than in a global variable.

colors.$blue-400 100%
);
background-repeat: no-repeat;
Expand Down
177 changes: 89 additions & 88 deletions airbyte-webapp/src/scss/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
Loading