🪟 🔧 Use CSS Custom Properties for colors #19344
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
octavia-squidington-iv
added
area/platform
37 tasks
timroes
reviewed
Nov 11, 2022
josephkmh
commented
Nov 14, 2022
edmundito
reviewed
Nov 14, 2022
airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
Outdated
Show resolved
Hide resolved
josephkmh
commented
Nov 14, 2022
airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
Show resolved
Hide resolved
dizel852
approved these changes
Nov 28, 2022
timroes
requested changes
Nov 28, 2022
@timroes this has been addressed now! |
josephkmh
commented
Dec 5, 2022
Comment on lines
+29
to
+30
| rgba(255 106 77 / 80%) 30%, | ||
| rgba(97 94 255 / 80%) 80%, |
There was a problem hiding this comment.
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.
josephkmh
commented
Dec 5, 2022
Comment on lines
-109
to
-110
| textColor90: rgba(colors.$dark-blue, 0.9); | ||
| darkBlue90: rgba(colors.$dark-blue, 0.9); |
There was a problem hiding this comment.
These were unused legacy colors
timroes
approved these changes
Jan 10, 2023
timroes
approved these changes
Jan 10, 2023
jbfbell
pushed a commit
that referenced
this pull request
Jan 13, 2023
* 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Converts our SASS color variables from using hex codes to using CSS custom properties
How
_customProperties.scss_colors.scssto use CSS Custom Properties instead of hex codescolors.$blue-transparentin this commit to avoid SVG<linear-gradient>choking on this syntax:rgba(--var-color-blue, .1)TooltipandTooltipTablecomponentsThere are a few changes in the appearance of the tooltips specifically. They are not longer slightly transparent, and are now instead fully opaque. Instead of the inline transparent values, I used colors from our theme instead. There may be very minor differences, but they should be barely noticeable:
Before:
After:
Recommended reading order
Top to bottom