This attempts to be one big reconciliation push to standardize and clean-up our site colors and svgs, and bring them in accordance with the Figma component guide.
Let's go through all the changes...
Colors
There are several changes to call out here...
Color Definitions
First, I've created a separate CSS files to just provide raw hex values for color names (like gray-100). This is in colors.css. These come directly from the Figma component guide.
Color Variables
I've used those color definitions to then provide color variables for the app in variables.css. Why the distinction?
Essentially, our variables.css file is our site theming document. The idea is that in the future, we could create multiple different versions of this and use those to swap out the look and feel of the site with one file!
For naming conventions, I think that what works best for Bugomattic is actually combination of "Semantic naming" (describing the intent of a color, e.g. "primary", "neutral", "error") and "Contextual naming" (describing the components a color should be associated with, e.g. "text", "border", "shaded-background).
For color weights, I didn't want to overdo things too much! Using a numeric weighting scale felt a little clunky, especially because we often don't have too many weighting variations. What I settled on was allowing a maximum of +3 or -3 in terms of weight intensity, and using "light, lighter, lightest" and "dark, darker, darkest" to describe those weights.
I updated a lot of the icons to all be from the component guide. This helped a lot, as is standardized their sizing and made them all fit a bit better!
Also, the illustrations were a bit out of date (mostly the blue color), so I updated those from the color guide.
Defer (almost) all icon coloring
For consistency, I decided it was best to have all svgs icons be neutral colored, and then we set their color in css using the path { fill: color } trick. This ties all the icon coloring into the site theming from variables.css and gives us more re-use and flexibility!
The one exception of course is the slack icon, which is by default multi-colored.
Call out "illustrations"
All SVGs that aren't icons and thus can't be re-colored easily should have something in their name to distinguish them (like "logo" or "illustration")
Testing Instructions
Again, very unlikely there will be any functional breaks here -- the main thing is styling! We should just make sure everything looks right 😁
What Does This PR Add/Change?
This PR is long overdue!
This attempts to be one big reconciliation push to standardize and clean-up our site colors and svgs, and bring them in accordance with the Figma component guide.
Let's go through all the changes...
Colors
There are several changes to call out here...
Color Definitions
First, I've created a separate CSS files to just provide raw hex values for color names (like gray-100). This is in
colors.css. These come directly from the Figma component guide.Color Variables
I've used those color definitions to then provide color variables for the app in
variables.css. Why the distinction?Essentially, our
variables.cssfile is our site theming document. The idea is that in the future, we could create multiple different versions of this and use those to swap out the look and feel of the site with one file!For naming conventions, I think that what works best for Bugomattic is actually combination of "Semantic naming" (describing the intent of a color, e.g. "primary", "neutral", "error") and "Contextual naming" (describing the components a color should be associated with, e.g. "text", "border", "shaded-background).
For color weights, I didn't want to overdo things too much! Using a numeric weighting scale felt a little clunky, especially because we often don't have too many weighting variations. What I settled on was allowing a maximum of +3 or -3 in terms of weight intensity, and using "light, lighter, lightest" and "dark, darker, darkest" to describe those weights.
So, in maximum, it would look like:
SVGs
There was a lot of clean-up to do with our SVGs!
Updating from component guide
I updated a lot of the icons to all be from the component guide. This helped a lot, as is standardized their sizing and made them all fit a bit better!
Also, the illustrations were a bit out of date (mostly the blue color), so I updated those from the color guide.
Defer (almost) all icon coloring
For consistency, I decided it was best to have all svgs icons be neutral colored, and then we set their color in css using the
path { fill: color }trick. This ties all the icon coloring into the site theming fromvariables.cssand gives us more re-use and flexibility!The one exception of course is the slack icon, which is by default multi-colored.
Call out "illustrations"
All SVGs that aren't icons and thus can't be re-colored easily should have something in their name to distinguish them (like "logo" or "illustration")
Testing Instructions
Again, very unlikely there will be any functional breaks here -- the main thing is styling! We should just make sure everything looks right 😁
Issues
Related to #
Closes #75