🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
Adds a new palette setting text, which is a single shade representing text in the palette's color. For example, if danger is color "red", then the text would simple be "red".
This is how the previous fg setting worked, but there was a hole in the design system of "what text color/palette is used when displaying on top of another palette?". Because of this, the fg setting is now a shade of colors to display on top of the bg. So if a primary button has a "blue" background (bg), then we want "white" text on it (fg).
This change actually works much better, especially in the context of mixins.
Screenshots
Checklist
[x] Build passes with yarn test.
[x] Code is formatted with yarn format.
[x] Tests have been added for my changes.
[x] Code coverage for my change is 100%.
[x] Documentation has been updated for my changes.
Summary
Adds a new palette setting
text, which is a single shade representing text in the palette's color. For example, if danger is color "red", then the text would simple be "red".This is how the previous
fgsetting worked, but there was a hole in the design system of "what text color/palette is used when displaying on top of another palette?". Because of this, thefgsetting is now a shade of colors to display on top of thebg. So if a primary button has a "blue" background (bg), then we want "white" text on it (fg).This change actually works much better, especially in the context of mixins.
Screenshots
Checklist
yarn test.yarn format.