wave-ui
wave-ui copied to clipboard
antoniandre
[Colors] Re-work how colors are generated
Summary
This PR aims to standardize how wave treats colors across the board. Currently we have a beautiful color palette that was hand crafted with love by @antoniandre choosing the increments and offsets for each base color. However the shade generation that we're using for colors coming from JavaScript are using a different shading algorithm and only shading out 3 light and dark shades.
With these changes in place the color palette AND the colors coming from JavaScript will use the same algorithm and all generate the same number of shades.
Rationale
There are several reasons behind proposing this change.
- When trying to use colors as design tokens, such as using the colors
primary,secondary,success,deep-purpleand trying to do some consistent shading surrounding those colors, only having the 3 shades for configured colors is limiting when the range of 6 shades gives you so much fine grained control with the palette colors. - The math equation we're currently implementing to shade the colors coming from JavaScript doesn't work nearly as well as the shading done in SCSS. The
warningstatus color ranges from yellow with it'slight3shade to red with thedark3. Both of which are pretty far off the orange that we started with.
New Configuration
With the changes proposed, we will now be able to have more control from the config on how colors are handled. Here is a screenshot from the new documentation page demonstrating the new possibilities:
I have brought over the lighten and darken functions from SCSS to JavaScript. These function almost identically (See note 2). And allow us to get the same functionality that @antoniandre had for generating the shades within SCSS. A user can define a base color, the light and dark increment values, and the light and dark offset values. Or they can stick to just using a hex color and the new shading will use the same defaults as outlined in the SCSS.
And now 6 shades are being generated per color. Here is an example of how the new shading looks on the status colors:
Notes
- This change removes the color generation from the SCSS file and makes the palette available to configure from JavaScript. This has some tradeoffs that we can discuss. It means that we'll have to generate the colors on the client when the page is first loading. So there's a bit more work on the client upfront. However it allows for customizing it which is awesome. I'm okay if we want to omit the palette portion of this change and leave it in SCSS, but I am always in favor of more customization.
- In the SCSS @antoniandre was using the builtin
lightenanddarkenmethods which work well, however there are a few caveats with how they shade outlined in the SCSS documentation:Because lighten() is usually not the best way to make a color lighter, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, lighten($color, $amount) can be written [adjust($color, $lightness: $amount)](https://sass-lang.com/documentation/modules/color/#adjust).So the new JavaScript implementation follows theadjustmethod more closely using color mixing to get the shading. Because of this, the hex codes do not ALWAYS line up 1:1 between the old shading method and the new one for the palette. But they are VERY close. IMHO to have more consistency it's worth it
Final thoughts
This is a large change and would likely require a major version bump because it could break peoples sites somewhat given that their color shades may vary.
If we want to have this be a little more opt-in we could add a shadeCount option for each color when you're defining them the more configurable way. This would let us maybe have defaults that mimic the current configuration and make it less of a breaking change but maintain the customization for those who desire it.
Hi @DerrikMilligan, Thanks for your PR and hard work again!
TL;DR;
I'm open to add up to 6 shades per color if that helps (in the current javascript process), and to update the algorithm (even if it may change some color codes) if that makes sense, but not adding more work than that at runtime (no to moving SCSS work to JS). I do always want to support new features and customization, but not if it has an impact (even a small one) on the overall efficiency. In the case there would be, we should discuss the benefits and tradeoffs, like below. :)
there are things that I agree with in this PR, like all the color adjustment to make it similar to SCSS calculation, and smarter lightening darkening than the one I have done if you have found a way :) But one thing I try to avoid as much as possible is to make the init heavier.
Atm, this is the generated CSS output with no custom config:
:root{--w-base-increment:4px;--w-css-scope:.w-app;background-color:rgb(var(--w-base-bg-color-rgb));color:rgb(var(--w-base-color-rgb))}:root[data-theme=light]{--w-base-bg-color-rgb:255,255,255;--w-base-color-rgb:0,0,0;--w-contrast-bg-color-rgb:0,0,0;--w-contrast-color-rgb:255,255,255;--w-caption-color-rgb:80,80,80,.7;--w-disabled-color-rgb:204,204,204}:root[data-theme=dark]{--w-base-bg-color-rgb:34,34,34;--w-base-color-rgb:255,255,255;--w-contrast-bg-color-rgb:255,255,255;--w-contrast-color-rgb:0,0,0;--w-caption-color-rgb:175,175,175,.7;--w-disabled-color-rgb:74,74,74}*{margin:0;outline:none;padding:0}body{overflow-x:hidden}a{text-decoration:none}.w-app{display:flex;flex-direction:column;min-height:100dvh;position:relative}.w-app,.w-app *,.w-app :after,.w-app :before{box-sizing:border-box}.w-app.row{flex-direction:row}.w-app.d-block{display:block}.w-app.align-center{align-items:center}.w-app.align-end{align-items:flex-end}.w-app.justify-center{justify-content:center}.w-app.justify-end{justify-content:flex-end}.w-app.justify-space-between{justify-content:space-between}.w-app.justify-space-around{justify-content:space-around}.w-app.justify-space-evenly{justify-content:space-evenly}.w-app.text-center{text-align:center}.w-app.text-right{text-align:right}.w-main{padding-left:12px;padding-right:12px}.w-app .headline,.w-app .title1{font-size:31px;font-weight:100;letter-spacing:1px}.w-app .title2{font-size:24px;font-weight:400}.w-app .title3{font-size:20px;font-weight:400}.w-app .title4{font-size:18px;font-weight:400}.w-app .title5{font-size:15px;font-weight:600}.w-app .body{font-size:14px;font-weight:400}.w-app .caption{color:rgb(var(--w-caption-color-rgb));font-size:12px;font-style:italic}.w-app .text-upper{text-transform:uppercase}.w-app .text-lower{text-transform:lowercase}.w-app .text-capitalize{text-transform:capitalize}.w-app .text-light{font-weight:400}.w-app .text-bold{font-weight:700}.w-app .text-italic{font-style:italic}.w-app .show{display:block}.w-app .hide{display:none}.w-app .spacer{flex-grow:1}.w-app .grow{flex-basis:auto;flex-grow:1}.w-app .no-grow{flex-grow:0}.w-app .shrink{flex-shrink:1}.w-app .no-shrink{flex-shrink:0}.w-app .fill-width{width:100%}.w-app .fill-height{height:100%}.w-app .basis-zero{flex-basis:0}.w-app .align-start{align-items:flex-start}.w-app .align-center{align-items:center}.w-app .align-end{align-items:flex-end}.w-app .align-self-start{align-self:flex-start}.w-app .align-self-center{align-self:center}.w-app .align-self-end{align-self:flex-end}.w-app .align-self-stretch{align-self:stretch}.w-app .justify-start{justify-content:flex-start}.w-app .justify-center{justify-content:center}.w-app .justify-end{justify-content:flex-end}.w-app .justify-space-between{justify-content:space-between}.w-app .justify-space-around{justify-content:space-around}.w-app .justify-space-evenly{justify-content:space-evenly}.w-app .text-left{text-align:left}.w-app .text-center{text-align:center}.w-app .text-right{text-align:right}.w-app .text-nowrap{white-space:nowrap}.w-app .lh0{line-height:1}.w-app .lh1{line-height:1.2}.w-app .lh2{line-height:1.4}.w-app .lh3{line-height:1.6}.w-app .lh4{line-height:1.8}.w-app .lh5{line-height:2}.w-app .d-flex{display:flex}.w-app .d-iflex{display:inline-flex}.w-app .d-block{display:block}.w-app .d-iblock{display:inline-block}.w-app .bd1{border:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd2{border:2px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd3{border:3px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd4{border:4px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd5{border:5px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd6{border:6px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdx1{border-left:1px solid rgba(var(--w-contrast-bg-color-rgb),.12);border-right:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdy1{border-bottom:1px solid rgba(var(--w-contrast-bg-color-rgb),.12);border-top:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdl1{border-left:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdr1{border-right:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdt1{border-top:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bdb1{border-bottom:1px solid rgba(var(--w-contrast-bg-color-rgb),.12)}.w-app .bd0{border:none}.w-app .bdrs1{border-radius:4px}.w-app .bdrs2{border-radius:8px}.w-app .bdrs3{border-radius:12px}.w-app .bdrs4{border-radius:16px}.w-app .bdrs5{border-radius:20px}.w-app .bdrs6{border-radius:24px}.w-app .bdrsr{border-radius:999em}.w-app .bdrsm{border-radius:100%}.w-app .bdrs0{border-radius:0}.w-app .sh-6{box-shadow:inset 0 0 24px #00000073}.w-app .sh-5{box-shadow:inset 0 0 20px #00000060}.w-app .sh-4{box-shadow:inset 0 0 16px #0000004d}.w-app .sh-3{box-shadow:inset 0 0 12px #00000039}.w-app .sh-2{box-shadow:inset 0 0 8px #00000026}.w-app .sh-1{box-shadow:inset 0 0 4px #00000026}.w-app .sh1{box-shadow:0 0 1px #0000001a,1px 1px 4px #00000026}.w-app .sh2{box-shadow:0 0 1px #0000001a,2px 2px 8px #00000026}.w-app .sh3{box-shadow:0 0 1px #0000001a,3px 3px 12px #00000039}.w-app .sh4{box-shadow:0 0 1px #0000001a,4px 4px 16px #0000004d}.w-app .sh5{box-shadow:0 0 1px #0000001a,5px 5px 20px #00000060}.w-app .sh6{box-shadow:0 0 1px #0000001a,6px 6px 24px #00000073}.w-app .sh0{box-shadow:none}.w-app .ma1{margin:4px}.w-app .ma-1{margin:-4px}.w-app .ma2{margin:8px}.w-app .ma-2{margin:-8px}.w-app .ma3{margin:12px}.w-app .ma-3{margin:-12px}.w-app .ma4{margin:16px}.w-app .ma-4{margin:-16px}.w-app .ma5{margin:20px}.w-app .ma-5{margin:-20px}.w-app .ma6{margin:24px}.w-app .ma-6{margin:-24px}.w-app .ma7{margin:28px}.w-app .ma-7{margin:-28px}.w-app .ma8{margin:32px}.w-app .ma-8{margin:-32px}.w-app .ma9{margin:36px}.w-app .ma-9{margin:-36px}.w-app .ma10{margin:40px}.w-app .ma-10{margin:-40px}.w-app .ma11{margin:44px}.w-app .ma-11{margin:-44px}.w-app .ma12{margin:48px}.w-app .ma-12{margin:-48px}.w-app .maa{margin:auto}.w-app .ma0{margin:0}.w-app .mx1{margin-left:4px;margin-right:4px}.w-app .my1{margin-bottom:4px;margin-top:4px}.w-app .mx-1{margin-left:-4px;margin-right:-4px}.w-app .my-1{margin-bottom:-4px;margin-top:-4px}.w-app .mx2{margin-left:8px;margin-right:8px}.w-app .my2{margin-bottom:8px;margin-top:8px}.w-app .mx-2{margin-left:-8px;margin-right:-8px}.w-app .my-2{margin-bottom:-8px;margin-top:-8px}.w-app .mx3{margin-left:12px;margin-right:12px}.w-app .my3{margin-bottom:12px;margin-top:12px}.w-app .mx-3{margin-left:-12px;margin-right:-12px}.w-app .my-3{margin-bottom:-12px;margin-top:-12px}.w-app .mx4{margin-left:16px;margin-right:16px}.w-app .my4{margin-bottom:16px;margin-top:16px}.w-app .mx-4{margin-left:-16px;margin-right:-16px}.w-app .my-4{margin-bottom:-16px;margin-top:-16px}.w-app .mx5{margin-left:20px;margin-right:20px}.w-app .my5{margin-bottom:20px;margin-top:20px}.w-app .mx-5{margin-left:-20px;margin-right:-20px}.w-app .my-5{margin-bottom:-20px;margin-top:-20px}.w-app .mx6{margin-left:24px;margin-right:24px}.w-app .my6{margin-bottom:24px;margin-top:24px}.w-app .mx-6{margin-left:-24px;margin-right:-24px}.w-app .my-6{margin-bottom:-24px;margin-top:-24px}.w-app .mx7{margin-left:28px;margin-right:28px}.w-app .my7{margin-bottom:28px;margin-top:28px}.w-app .mx-7{margin-left:-28px;margin-right:-28px}.w-app .my-7{margin-bottom:-28px;margin-top:-28px}.w-app .mx8{margin-left:32px;margin-right:32px}.w-app .my8{margin-bottom:32px;margin-top:32px}.w-app .mx-8{margin-left:-32px;margin-right:-32px}.w-app .my-8{margin-bottom:-32px;margin-top:-32px}.w-app .mx9{margin-left:36px;margin-right:36px}.w-app .my9{margin-bottom:36px;margin-top:36px}.w-app .mx-9{margin-left:-36px;margin-right:-36px}.w-app .my-9{margin-bottom:-36px;margin-top:-36px}.w-app .mx10{margin-left:40px;margin-right:40px}.w-app .my10{margin-bottom:40px;margin-top:40px}.w-app .mx-10{margin-left:-40px;margin-right:-40px}.w-app .my-10{margin-bottom:-40px;margin-top:-40px}.w-app .mx11{margin-left:44px;margin-right:44px}.w-app .my11{margin-bottom:44px;margin-top:44px}.w-app .mx-11{margin-left:-44px;margin-right:-44px}.w-app .my-11{margin-bottom:-44px;margin-top:-44px}.w-app .mx12{margin-left:48px;margin-right:48px}.w-app .my12{margin-bottom:48px;margin-top:48px}.w-app .mx-12{margin-left:-48px;margin-right:-48px}.w-app .my-12{margin-bottom:-48px;margin-top:-48px}.w-app .mxa{margin-left:auto;margin-right:auto}.w-app .mya{margin-bottom:auto;margin-top:auto}.w-app .mx0{margin-left:0;margin-right:0}.w-app .my0{margin-bottom:0;margin-top:0}.w-app .mt1{margin-top:4px}.w-app .mr1{margin-right:4px}.w-app .mb1{margin-bottom:4px}.w-app .ml1{margin-left:4px}.w-app .mt-1{margin-top:-4px}.w-app .mr-1{margin-right:-4px}.w-app .mb-1{margin-bottom:-4px}.w-app .ml-1{margin-left:-4px}.w-app .mt2{margin-top:8px}.w-app .mr2{margin-right:8px}.w-app .mb2{margin-bottom:8px}.w-app .ml2{margin-left:8px}.w-app .mt-2{margin-top:-8px}.w-app .mr-2{margin-right:-8px}.w-app .mb-2{margin-bottom:-8px}.w-app .ml-2{margin-left:-8px}.w-app .mt3{margin-top:12px}.w-app .mr3{margin-right:12px}.w-app .mb3{margin-bottom:12px}.w-app .ml3{margin-left:12px}.w-app .mt-3{margin-top:-12px}.w-app .mr-3{margin-right:-12px}.w-app .mb-3{margin-bottom:-12px}.w-app .ml-3{margin-left:-12px}.w-app .mt4{margin-top:16px}.w-app .mr4{margin-right:16px}.w-app .mb4{margin-bottom:16px}.w-app .ml4{margin-left:16px}.w-app .mt-4{margin-top:-16px}.w-app .mr-4{margin-right:-16px}.w-app .mb-4{margin-bottom:-16px}.w-app .ml-4{margin-left:-16px}.w-app .mt5{margin-top:20px}.w-app .mr5{margin-right:20px}.w-app .mb5{margin-bottom:20px}.w-app .ml5{margin-left:20px}.w-app .mt-5{margin-top:-20px}.w-app .mr-5{margin-right:-20px}.w-app .mb-5{margin-bottom:-20px}.w-app .ml-5{margin-left:-20px}.w-app .mt6{margin-top:24px}.w-app .mr6{margin-right:24px}.w-app .mb6{margin-bottom:24px}.w-app .ml6{margin-left:24px}.w-app .mt-6{margin-top:-24px}.w-app .mr-6{margin-right:-24px}.w-app .mb-6{margin-bottom:-24px}.w-app .ml-6{margin-left:-24px}.w-app .mt7{margin-top:28px}.w-app .mr7{margin-right:28px}.w-app .mb7{margin-bottom:28px}.w-app .ml7{margin-left:28px}.w-app .mt-7{margin-top:-28px}.w-app .mr-7{margin-right:-28px}.w-app .mb-7{margin-bottom:-28px}.w-app .ml-7{margin-left:-28px}.w-app .mt8{margin-top:32px}.w-app .mr8{margin-right:32px}.w-app .mb8{margin-bottom:32px}.w-app .ml8{margin-left:32px}.w-app .mt-8{margin-top:-32px}.w-app .mr-8{margin-right:-32px}.w-app .mb-8{margin-bottom:-32px}.w-app .ml-8{margin-left:-32px}.w-app .mt9{margin-top:36px}.w-app .mr9{margin-right:36px}.w-app .mb9{margin-bottom:36px}.w-app .ml9{margin-left:36px}.w-app .mt-9{margin-top:-36px}.w-app .mr-9{margin-right:-36px}.w-app .mb-9{margin-bottom:-36px}.w-app .ml-9{margin-left:-36px}.w-app .mt10{margin-top:40px}.w-app .mr10{margin-right:40px}.w-app .mb10{margin-bottom:40px}.w-app .ml10{margin-left:40px}.w-app .mt-10{margin-top:-40px}.w-app .mr-10{margin-right:-40px}.w-app .mb-10{margin-bottom:-40px}.w-app .ml-10{margin-left:-40px}.w-app .mt11{margin-top:44px}.w-app .mr11{margin-right:44px}.w-app .mb11{margin-bottom:44px}.w-app .ml11{margin-left:44px}.w-app .mt-11{margin-top:-44px}.w-app .mr-11{margin-right:-44px}.w-app .mb-11{margin-bottom:-44px}.w-app .ml-11{margin-left:-44px}.w-app .mt12{margin-top:48px}.w-app .mr12{margin-right:48px}.w-app .mb12{margin-bottom:48px}.w-app .ml12{margin-left:48px}.w-app .mt-12{margin-top:-48px}.w-app .mr-12{margin-right:-48px}.w-app .mb-12{margin-bottom:-48px}.w-app .ml-12{margin-left:-48px}.w-app .mta{margin-top:auto}.w-app .mra{margin-right:auto}.w-app .mba{margin-bottom:auto}.w-app .mla{margin-left:auto}.w-app .mt0{margin-top:0}.w-app .mr0{margin-right:0}.w-app .mb0{margin-bottom:0}.w-app .ml0{margin-left:0}.w-app .pa1{padding:4px}.w-app .pa2{padding:8px}.w-app .pa3{padding:12px}.w-app .pa4{padding:16px}.w-app .pa5{padding:20px}.w-app .pa6{padding:24px}.w-app .pa7{padding:28px}.w-app .pa8{padding:32px}.w-app .pa9{padding:36px}.w-app .pa10{padding:40px}.w-app .pa11{padding:44px}.w-app .pa12{padding:48px}.w-app .pa0{padding:0}.w-app .px1{padding-left:4px;padding-right:4px}.w-app .py1{padding-bottom:4px;padding-top:4px}.w-app .px2{padding-left:8px;padding-right:8px}.w-app .py2{padding-bottom:8px;padding-top:8px}.w-app .px3{padding-left:12px;padding-right:12px}.w-app .py3{padding-bottom:12px;padding-top:12px}.w-app .px4{padding-left:16px;padding-right:16px}.w-app .py4{padding-bottom:16px;padding-top:16px}.w-app .px5{padding-left:20px;padding-right:20px}.w-app .py5{padding-bottom:20px;padding-top:20px}.w-app .px6{padding-left:24px;padding-right:24px}.w-app .py6{padding-bottom:24px;padding-top:24px}.w-app .px7{padding-left:28px;padding-right:28px}.w-app .py7{padding-bottom:28px;padding-top:28px}.w-app .px8{padding-left:32px;padding-right:32px}.w-app .py8{padding-bottom:32px;padding-top:32px}.w-app .px9{padding-left:36px;padding-right:36px}.w-app .py9{padding-bottom:36px;padding-top:36px}.w-app .px10{padding-left:40px;padding-right:40px}.w-app .py10{padding-bottom:40px;padding-top:40px}.w-app .px11{padding-left:44px;padding-right:44px}.w-app .py11{padding-bottom:44px;padding-top:44px}.w-app .px12{padding-left:48px;padding-right:48px}.w-app .py12{padding-bottom:48px;padding-top:48px}.w-app .px0{padding-left:0;padding-right:0}.w-app .py0{padding-bottom:0;padding-top:0}.w-app .pt1{padding-top:4px}.w-app .pr1{padding-right:4px}.w-app .pb1{padding-bottom:4px}.w-app .pl1{padding-left:4px}.w-app .pt2{padding-top:8px}.w-app .pr2{padding-right:8px}.w-app .pb2{padding-bottom:8px}.w-app .pl2{padding-left:8px}.w-app .pt3{padding-top:12px}.w-app .pr3{padding-right:12px}.w-app .pb3{padding-bottom:12px}.w-app .pl3{padding-left:12px}.w-app .pt4{padding-top:16px}.w-app .pr4{padding-right:16px}.w-app .pb4{padding-bottom:16px}.w-app .pl4{padding-left:16px}.w-app .pt5{padding-top:20px}.w-app .pr5{padding-right:20px}.w-app .pb5{padding-bottom:20px}.w-app .pl5{padding-left:20px}.w-app .pt6{padding-top:24px}.w-app .pr6{padding-right:24px}.w-app .pb6{padding-bottom:24px}.w-app .pl6{padding-left:24px}.w-app .pt7{padding-top:28px}.w-app .pr7{padding-right:28px}.w-app .pb7{padding-bottom:28px}.w-app .pl7{padding-left:28px}.w-app .pt8{padding-top:32px}.w-app .pr8{padding-right:32px}.w-app .pb8{padding-bottom:32px}.w-app .pl8{padding-left:32px}.w-app .pt9{padding-top:36px}.w-app .pr9{padding-right:36px}.w-app .pb9{padding-bottom:36px}.w-app .pl9{padding-left:36px}.w-app .pt10{padding-top:40px}.w-app .pr10{padding-right:40px}.w-app .pb10{padding-bottom:40px}.w-app .pl10{padding-left:40px}.w-app .pt11{padding-top:44px}.w-app .pr11{padding-right:44px}.w-app .pb11{padding-bottom:44px}.w-app .pl11{padding-left:44px}.w-app .pt12{padding-top:48px}.w-app .pr12{padding-right:48px}.w-app .pb12{padding-bottom:48px}.w-app .pl12{padding-left:48px}.w-app .pt0{padding-top:0}.w-app .pr0{padding-right:0}.w-app .pb0{padding-bottom:0}.w-app .pl0{padding-left:0}.w-app .size--xs{font-size:12px}.w-app .size--sm{font-size:14px}.w-app .size--md{font-size:15px}.w-app .size--lg{font-size:20px}.w-app .size--xl{font-size:23px}.w-flex.gap1,.w-grid.gap1{gap:4px}.w-flex.gap2,.w-grid.gap2{gap:8px}.w-flex.gap3,.w-grid.gap3{gap:12px}.w-flex.gap4,.w-grid.gap4{gap:16px}.w-flex.gap5,.w-grid.gap5{gap:20px}.w-flex.gap6,.w-grid.gap6{gap:24px}.w-flex.gap7,.w-grid.gap7{gap:28px}.w-flex.gap8,.w-grid.gap8{gap:32px}.w-flex.gap9,.w-grid.gap9{gap:36px}.w-flex.gap10,.w-grid.gap10{gap:40px}.w-flex.gap11,.w-grid.gap11{gap:44px}.w-flex.gap12,.w-grid.gap12{gap:48px}.w-flex.gap0,.w-grid.gap0{gap:0}.w-app .pink--bg{background-color:#e91e63}.w-app .pink{color:#e91e63}.w-app .pink-light1--bg{background-color:#ee5085}.w-app .pink-light1{color:#ee5085}.w-app .pink-dark1--bg{background-color:#d31555}.w-app .pink-dark1{color:#d31555}.w-app .pink-light2--bg{background-color:#f16f9b}.w-app .pink-light2{color:#f16f9b}.w-app .pink-dark2--bg{background-color:#b6124a}.w-app .pink-dark2{color:#b6124a}.w-app .pink-light3--bg{background-color:#f48eb1}.w-app .pink-light3{color:#f48eb1}.w-app .pink-dark3--bg{background-color:#990f3e}.w-app .pink-dark3{color:#990f3e}.w-app .pink-light4--bg{background-color:#f7adc6}.w-app .pink-light4{color:#f7adc6}.w-app .pink-dark4--bg{background-color:#7c0c32}.w-app .pink-dark4{color:#7c0c32}.w-app .pink-light5--bg{background-color:#faccdc}.w-app .pink-light5{color:#faccdc}.w-app .pink-dark5--bg{background-color:#600927}.w-app .pink-dark5{color:#600927}.w-app .pink-light6--bg{background-color:#fdebf1}.w-app .pink-light6{color:#fdebf1}.w-app .pink-dark6--bg{background-color:#43071b}.w-app .pink-dark6{color:#43071b}.w-app .purple--bg{background-color:#a741b9}.w-app .purple{color:#a741b9}.w-app .purple-light1--bg{background-color:#c277cf}.w-app .purple-light1{color:#c277cf}.w-app .purple-dark1--bg{background-color:#9239a2}.w-app .purple-dark1{color:#9239a2}.w-app .purple-light2--bg{background-color:#cd90d8}.w-app .purple-light2{color:#cd90d8}.w-app .purple-dark2--bg{background-color:#7d318a}.w-app .purple-dark2{color:#7d318a}.w-app .purple-light3--bg{background-color:#d8a8e1}.w-app .purple-light3{color:#d8a8e1}.w-app .purple-dark3--bg{background-color:#682873}.w-app .purple-dark3{color:#682873}.w-app .purple-light4--bg{background-color:#e3c1e9}.w-app .purple-light4{color:#e3c1e9}.w-app .purple-dark4--bg{background-color:#53205b}.w-app .purple-dark4{color:#53205b}.w-app .purple-light5--bg{background-color:#eed9f2}.w-app .purple-light5{color:#eed9f2}.w-app .purple-dark5--bg{background-color:#3d1844}.w-app .purple-dark5{color:#3d1844}.w-app .purple-light6--bg{background-color:#f9f2fa}.w-app .purple-light6{color:#f9f2fa}.w-app .purple-dark6--bg{background-color:#28102d}.w-app .purple-dark6{color:#28102d}.w-app .deep-purple--bg{background-color:#673ab7}.w-app .deep-purple{color:#673ab7}.w-app .deep-purple-light1--bg{background-color:#7c52c8}.w-app .deep-purple-light1{color:#7c52c8}.w-app .deep-purple-dark1--bg{background-color:#5b33a1}.w-app .deep-purple-dark1{color:#5b33a1}.w-app .deep-purple-light2--bg{background-color:#9471d2}.w-app .deep-purple-light2{color:#9471d2}.w-app .deep-purple-dark2--bg{background-color:#4e2c8b}.w-app .deep-purple-dark2{color:#4e2c8b}.w-app .deep-purple-light3--bg{background-color:#ab90dc}.w-app .deep-purple-light3{color:#ab90dc}.w-app .deep-purple-dark3--bg{background-color:#422575}.w-app .deep-purple-dark3{color:#422575}.w-app .deep-purple-light4--bg{background-color:#c2afe6}.w-app .deep-purple-light4{color:#c2afe6}.w-app .deep-purple-dark4--bg{background-color:#351e5f}.w-app .deep-purple-dark4{color:#351e5f}.w-app .deep-purple-light5--bg{background-color:#daceef}.w-app .deep-purple-light5{color:#daceef}.w-app .deep-purple-dark5--bg{background-color:#291749}.w-app .deep-purple-dark5{color:#291749}.w-app .deep-purple-light6--bg{background-color:#f1edf9}.w-app .deep-purple-light6{color:#f1edf9}.w-app .deep-purple-dark6--bg{background-color:#1c1033}.w-app .deep-purple-dark6{color:#1c1033}.w-app .indigo--bg{background-color:#3f51b5}.w-app .indigo{color:#3f51b5}.w-app .indigo-light1--bg{background-color:#5869c5}.w-app .indigo-light1{color:#5869c5}.w-app .indigo-dark1--bg{background-color:#37479f}.w-app .indigo-dark1{color:#37479f}.w-app .indigo-light2--bg{background-color:#7684cf}.w-app .indigo-light2{color:#7684cf}.w-app .indigo-dark2--bg{background-color:#303e8a}.w-app .indigo-dark2{color:#303e8a}.w-app .indigo-light3--bg{background-color:#949fda}.w-app .indigo-light3{color:#949fda}.w-app .indigo-dark3--bg{background-color:#283474}.w-app .indigo-dark3{color:#283474}.w-app .indigo-light4--bg{background-color:#b3bae4}.w-app .indigo-light4{color:#b3bae4}.w-app .indigo-dark4--bg{background-color:#212a5f}.w-app .indigo-dark4{color:#212a5f}.w-app .indigo-light5--bg{background-color:#d1d6ef}.w-app .indigo-light5{color:#d1d6ef}.w-app .indigo-dark5--bg{background-color:#192149}.w-app .indigo-dark5{color:#192149}.w-app .indigo-light6--bg{background-color:#eff1fa}.w-app .indigo-light6{color:#eff1fa}.w-app .indigo-dark6--bg{background-color:#121734}.w-app .indigo-dark6{color:#121734}.w-app .blue--bg{background-color:#2196f3}.w-app .blue{color:#2196f3}.w-app .blue-light1--bg{background-color:#42a6f5}.w-app .blue-light1{color:#42a6f5}.w-app .blue-dark1--bg{background-color:#0c85e5}.w-app .blue-dark1{color:#0c85e5}.w-app .blue-light2--bg{background-color:#63b5f7}.w-app .blue-light2{color:#63b5f7}.w-app .blue-dark2--bg{background-color:#0b72c4}.w-app .blue-dark2{color:#0b72c4}.w-app .blue-light3--bg{background-color:#84c5f8}.w-app .blue-light3{color:#84c5f8}.w-app .blue-dark3--bg{background-color:#095fa3}.w-app .blue-dark3{color:#095fa3}.w-app .blue-light4--bg{background-color:#a5d4fa}.w-app .blue-light4{color:#a5d4fa}.w-app .blue-dark4--bg{background-color:#074c82}.w-app .blue-dark4{color:#074c82}.w-app .blue-light5--bg{background-color:#c6e4fc}.w-app .blue-light5{color:#c6e4fc}.w-app .blue-dark5--bg{background-color:#053961}.w-app .blue-dark5{color:#053961}.w-app .blue-light6--bg{background-color:#e6f3fe}.w-app .blue-light6{color:#e6f3fe}.w-app .blue-dark6--bg{background-color:#032540}.w-app .blue-dark6{color:#032540}.w-app .light-blue--bg{background-color:#03a9f4}.w-app .light-blue{color:#03a9f4}.w-app .light-blue-light1--bg{background-color:#22b9fc}.w-app .light-blue-light1{color:#22b9fc}.w-app .light-blue-dark1--bg{background-color:#0393d5}.w-app .light-blue-dark1{color:#0393d5}.w-app .light-blue-light2--bg{background-color:#4ac5fd}.w-app .light-blue-light2{color:#4ac5fd}.w-app .light-blue-dark2--bg{background-color:#027eb6}.w-app .light-blue-dark2{color:#027eb6}.w-app .light-blue-light3--bg{background-color:#71d2fd}.w-app .light-blue-light3{color:#71d2fd}.w-app .light-blue-dark3--bg{background-color:#026896}.w-app .light-blue-dark3{color:#026896}.w-app .light-blue-light4--bg{background-color:#98defe}.w-app .light-blue-light4{color:#98defe}.w-app .light-blue-dark4--bg{background-color:#015277}.w-app .light-blue-dark4{color:#015277}.w-app .light-blue-light5--bg{background-color:#c0ebfe}.w-app .light-blue-light5{color:#c0ebfe}.w-app .light-blue-dark5--bg{background-color:#013d58}.w-app .light-blue-dark5{color:#013d58}.w-app .light-blue-light6--bg{background-color:#e7f7ff}.w-app .light-blue-light6{color:#e7f7ff}.w-app .light-blue-dark6--bg{background-color:#012739}.w-app .light-blue-dark6{color:#012739}.w-app .cyan--bg{background-color:#04cbe5}.w-app .cyan{color:#04cbe5}.w-app .cyan-light1--bg{background-color:#04d8f4}.w-app .cyan-light1{color:#04d8f4}.w-app .cyan-dark1--bg{background-color:#04b2c8}.w-app .cyan-dark1{color:#04b2c8}.w-app .cyan-light2--bg{background-color:#2ce3fb}.w-app .cyan-light2{color:#2ce3fb}.w-app .cyan-dark2--bg{background-color:#0398ac}.w-app .cyan-dark2{color:#0398ac}.w-app .cyan-light3--bg{background-color:#5ceafc}.w-app .cyan-light3{color:#5ceafc}.w-app .cyan-dark3--bg{background-color:#037f8f}.w-app .cyan-dark3{color:#037f8f}.w-app .cyan-light4--bg{background-color:#8bf0fd}.w-app .cyan-light4{color:#8bf0fd}.w-app .cyan-dark4--bg{background-color:#026673}.w-app .cyan-dark4{color:#026673}.w-app .cyan-light5--bg{background-color:#baf6fe}.w-app .cyan-light5{color:#baf6fe}.w-app .cyan-dark5--bg{background-color:#024c56}.w-app .cyan-dark5{color:#024c56}.w-app .cyan-light6--bg{background-color:#e9fcff}.w-app .cyan-light6{color:#e9fcff}.w-app .cyan-dark6--bg{background-color:#01333a}.w-app .cyan-dark6{color:#01333a}.w-app .teal--bg{background-color:#1db3a8}.w-app .teal{color:#1db3a8}.w-app .teal-light1--bg{background-color:#20c7bb}.w-app .teal-light1{color:#20c7bb}.w-app .teal-dark1--bg{background-color:#199b92}.w-app .teal-dark1{color:#199b92}.w-app .teal-light2--bg{background-color:#39dfd3}.w-app .teal-light2{color:#39dfd3}.w-app .teal-dark2--bg{background-color:#15847c}.w-app .teal-dark2{color:#15847c}.w-app .teal-light3--bg{background-color:#64e6dc}.w-app .teal-light3{color:#64e6dc}.w-app .teal-dark3--bg{background-color:#116c65}.w-app .teal-dark3{color:#116c65}.w-app .teal-light4--bg{background-color:#8eede6}.w-app .teal-light4{color:#8eede6}.w-app .teal-dark4--bg{background-color:#0e544f}.w-app .teal-dark4{color:#0e544f}.w-app .teal-light5--bg{background-color:#b8f3ef}.w-app .teal-light5{color:#b8f3ef}.w-app .teal-dark5--bg{background-color:#0a3c39}.w-app .teal-dark5{color:#0a3c39}.w-app .teal-light6--bg{background-color:#e2faf9}.w-app .teal-light6{color:#e2faf9}.w-app .teal-dark6--bg{background-color:#062523}.w-app .teal-dark6{color:#062523}.w-app .green--bg{background-color:#4caf50}.w-app .green{color:#4caf50}.w-app .green-light1--bg{background-color:#65bc69}.w-app .green-light1{color:#65bc69}.w-app .green-dark1--bg{background-color:#439b47}.w-app .green-dark1{color:#439b47}.w-app .green-light2--bg{background-color:#80c883}.w-app .green-light2{color:#80c883}.w-app .green-dark2--bg{background-color:#3a863d}.w-app .green-dark2{color:#3a863d}.w-app .green-light3--bg{background-color:#9bd49e}.w-app .green-light3{color:#9bd49e}.w-app .green-dark3--bg{background-color:#327234}.w-app .green-dark3{color:#327234}.w-app .green-light4--bg{background-color:#b7e0b8}.w-app .green-light4{color:#b7e0b8}.w-app .green-dark4--bg{background-color:#295e2b}.w-app .green-dark4{color:#295e2b}.w-app .green-light5--bg{background-color:#d2ebd3}.w-app .green-light5{color:#d2ebd3}.w-app .green-dark5--bg{background-color:#204a22}.w-app .green-dark5{color:#204a22}.w-app .green-light6--bg{background-color:#edf7ed}.w-app .green-light6{color:#edf7ed}.w-app .green-dark6--bg{background-color:#173518}.w-app .green-dark6{color:#173518}.w-app .light-green--bg{background-color:#90d73f}.w-app .light-green{color:#90d73f}.w-app .light-green-light1--bg{background-color:#abe16d}.w-app .light-green-light1{color:#abe16d}.w-app .light-green-dark1--bg{background-color:#80cc2a}.w-app .light-green-dark1{color:#80cc2a}.w-app .light-green-light2--bg{background-color:#b9e687}.w-app .light-green-light2{color:#b9e687}.w-app .light-green-dark2--bg{background-color:#70b225}.w-app .light-green-dark2{color:#70b225}.w-app .light-green-light3--bg{background-color:#c8eba0}.w-app .light-green-light3{color:#c8eba0}.w-app .light-green-dark3--bg{background-color:#609820}.w-app .light-green-dark3{color:#609820}.w-app .light-green-light4--bg{background-color:#d7f1b9}.w-app .light-green-light4{color:#d7f1b9}.w-app .light-green-dark4--bg{background-color:#4f7d1a}.w-app .light-green-dark4{color:#4f7d1a}.w-app .light-green-light5--bg{background-color:#e5f6d3}.w-app .light-green-light5{color:#e5f6d3}.w-app .light-green-dark5--bg{background-color:#3f6315}.w-app .light-green-dark5{color:#3f6315}.w-app .light-green-light6--bg{background-color:#f4fbec}.w-app .light-green-light6{color:#f4fbec}.w-app .light-green-dark6--bg{background-color:#2e490f}.w-app .light-green-dark6{color:#2e490f}.w-app .lime--bg{background-color:#cee029}.w-app .lime{color:#cee029}.w-app .lime-light1--bg{background-color:#dae85f}.w-app .lime-light1{color:#dae85f}.w-app .lime-dark1--bg{background-color:#bbcc1e}.w-app .lime-dark1{color:#bbcc1e}.w-app .lime-light2--bg{background-color:#e1ec7b}.w-app .lime-light2{color:#e1ec7b}.w-app .lime-dark2--bg{background-color:#a1b01a}.w-app .lime-dark2{color:#a1b01a}.w-app .lime-light3--bg{background-color:#e7f097}.w-app .lime-light3{color:#e7f097}.w-app .lime-dark3--bg{background-color:#889516}.w-app .lime-dark3{color:#889516}.w-app .lime-light4--bg{background-color:#edf4b2}.w-app .lime-light4{color:#edf4b2}.w-app .lime-dark4--bg{background-color:#6f7912}.w-app .lime-dark4{color:#6f7912}.w-app .lime-light5--bg{background-color:#f4f8ce}.w-app .lime-light5{color:#f4f8ce}.w-app .lime-dark5--bg{background-color:#565d0e}.w-app .lime-dark5{color:#565d0e}.w-app .lime-light6--bg{background-color:#fafce9}.w-app .lime-light6{color:#fafce9}.w-app .lime-dark6--bg{background-color:#3c420a}.w-app .lime-dark6{color:#3c420a}.w-app .yellow--bg{background-color:#ffe70f}.w-app .yellow{color:#ffe70f}.w-app .yellow-light1--bg{background-color:#ffee54}.w-app .yellow-light1{color:#ffee54}.w-app .yellow-dark1--bg{background-color:#eed700}.w-app .yellow-dark1{color:#eed700}.w-app .yellow-light2--bg{background-color:#fff170}.w-app .yellow-light2{color:#fff170}.w-app .yellow-dark2--bg{background-color:#cfba00}.w-app .yellow-dark2{color:#cfba00}.w-app .yellow-light3--bg{background-color:#fff38c}.w-app .yellow-light3{color:#fff38c}.w-app .yellow-dark3--bg{background-color:#af9e00}.w-app .yellow-dark3{color:#af9e00}.w-app .yellow-light4--bg{background-color:#fff6a8}.w-app .yellow-light4{color:#fff6a8}.w-app .yellow-dark4--bg{background-color:#908100}.w-app .yellow-dark4{color:#908100}.w-app .yellow-light5--bg{background-color:#fff9c4}.w-app .yellow-light5{color:#fff9c4}.w-app .yellow-dark5--bg{background-color:#706500}.w-app .yellow-dark5{color:#706500}.w-app .yellow-light6--bg{background-color:#fffce0}.w-app .yellow-light6{color:#fffce0}.w-app .yellow-dark6--bg{background-color:#504800}.w-app .yellow-dark6{color:#504800}.w-app .amber--bg{background-color:#ffc107}.w-app .amber{color:#ffc107}.w-app .amber-light1--bg{background-color:#ffcb2d}.w-app .amber-light1{color:#ffcb2d}.w-app .amber-dark1--bg{background-color:#e6ad00}.w-app .amber-dark1{color:#e6ad00}.w-app .amber-light2--bg{background-color:#ffd454}.w-app .amber-light2{color:#ffd454}.w-app .amber-dark2--bg{background-color:#c79500}.w-app .amber-dark2{color:#c79500}.w-app .amber-light3--bg{background-color:#ffde7a}.w-app .amber-light3{color:#ffde7a}.w-app .amber-dark3--bg{background-color:#a77d00}.w-app .amber-dark3{color:#a77d00}.w-app .amber-light4--bg{background-color:#ffe7a0}.w-app .amber-light4{color:#ffe7a0}.w-app .amber-dark4--bg{background-color:#860}.w-app .amber-dark4{color:#860}.w-app .amber-light5--bg{background-color:#fff1c6}.w-app .amber-light5{color:#fff1c6}.w-app .amber-dark5--bg{background-color:#684e00}.w-app .amber-dark5{color:#684e00}.w-app .amber-light6--bg{background-color:#fffaed}.w-app .amber-light6{color:#fffaed}.w-app .amber-dark6--bg{background-color:#483600}.w-app .amber-dark6{color:#483600}.w-app .orange--bg{background-color:#ff9800}.w-app .orange{color:#ff9800}.w-app .orange-light1--bg{background-color:#ffa726}.w-app .orange-light1{color:#ffa726}.w-app .orange-dark1--bg{background-color:#df8500}.w-app .orange-dark1{color:#df8500}.w-app .orange-light2--bg{background-color:#ffb74d}.w-app .orange-light2{color:#ffb74d}.w-app .orange-dark2--bg{background-color:#c07200}.w-app .orange-dark2{color:#c07200}.w-app .orange-light3--bg{background-color:#ffc673}.w-app .orange-light3{color:#ffc673}.w-app .orange-dark3--bg{background-color:#a05f00}.w-app .orange-dark3{color:#a05f00}.w-app .orange-light4--bg{background-color:#ffd699}.w-app .orange-light4{color:#ffd699}.w-app .orange-dark4--bg{background-color:#814d00}.w-app .orange-dark4{color:#814d00}.w-app .orange-light5--bg{background-color:#ffe5bf}.w-app .orange-light5{color:#ffe5bf}.w-app .orange-dark5--bg{background-color:#613a00}.w-app .orange-dark5{color:#613a00}.w-app .orange-light6--bg{background-color:#fff5e6}.w-app .orange-light6{color:#fff5e6}.w-app .orange-dark6--bg{background-color:#412700}.w-app .orange-dark6{color:#412700}.w-app .deep-orange--bg{background-color:#ff6825}.w-app .deep-orange{color:#ff6825}.w-app .deep-orange-light1--bg{background-color:#ff7f46}.w-app .deep-orange-light1{color:#ff7f46}.w-app .deep-orange-dark1--bg{background-color:#ff5205}.w-app .deep-orange-dark1{color:#ff5205}.w-app .deep-orange-light2--bg{background-color:#ff9566}.w-app .deep-orange-light2{color:#ff9566}.w-app .deep-orange-dark2--bg{background-color:#e54600}.w-app .deep-orange-dark2{color:#e54600}.w-app .deep-orange-light3--bg{background-color:#ffac87}.w-app .deep-orange-light3{color:#ffac87}.w-app .deep-orange-dark3--bg{background-color:#c53d00}.w-app .deep-orange-dark3{color:#c53d00}.w-app .deep-orange-light4--bg{background-color:#ffc2a8}.w-app .deep-orange-light4{color:#ffc2a8}.w-app .deep-orange-dark4--bg{background-color:#a63300}.w-app .deep-orange-dark4{color:#a63300}.w-app .deep-orange-light5--bg{background-color:#ffd9c8}.w-app .deep-orange-light5{color:#ffd9c8}.w-app .deep-orange-dark5--bg{background-color:#862900}.w-app .deep-orange-dark5{color:#862900}.w-app .deep-orange-light6--bg{background-color:#fff0e9}.w-app .deep-orange-light6{color:#fff0e9}.w-app .deep-orange-dark6--bg{background-color:#661f00}.w-app .deep-orange-dark6{color:#661f00}.w-app .red--bg{background-color:#fa3317}.w-app .red{color:#fa3317}.w-app .red-light1--bg{background-color:#fb543c}.w-app .red-light1{color:#fb543c}.w-app .red-dark1--bg{background-color:#ec2205}.w-app .red-dark1{color:#ec2205}.w-app .red-light2--bg{background-color:#fc705d}.w-app .red-light2{color:#fc705d}.w-app .red-dark2--bg{background-color:#cd1d04}.w-app .red-dark2{color:#cd1d04}.w-app .red-light3--bg{background-color:#fc8d7d}.w-app .red-light3{color:#fc8d7d}.w-app .red-dark3--bg{background-color:#ae1904}.w-app .red-dark3{color:#ae1904}.w-app .red-light4--bg{background-color:#fdaa9e}.w-app .red-light4{color:#fdaa9e}.w-app .red-dark4--bg{background-color:#8f1403}.w-app .red-dark4{color:#8f1403}.w-app .red-light5--bg{background-color:#fec6be}.w-app .red-light5{color:#fec6be}.w-app .red-dark5--bg{background-color:#701002}.w-app .red-dark5{color:#701002}.w-app .red-light6--bg{background-color:#fee3df}.w-app .red-light6{color:#fee3df}.w-app .red-dark6--bg{background-color:#520c02}.w-app .red-dark6{color:#520c02}.w-app .brown--bg{background-color:#845848}.w-app .brown{color:#845848}.w-app .brown-light1--bg{background-color:#a16b58}.w-app .brown-light1{color:#a16b58}.w-app .brown-dark1--bg{background-color:#744d3f}.w-app .brown-dark1{color:#744d3f}.w-app .brown-light2--bg{background-color:#b38473}.w-app .brown-light2{color:#b38473}.w-app .brown-dark2--bg{background-color:#634236}.w-app .brown-dark2{color:#634236}.w-app .brown-light3--bg{background-color:#c39e90}.w-app .brown-light3{color:#c39e90}.w-app .brown-dark3--bg{background-color:#53372d}.w-app .brown-dark3{color:#53372d}.w-app .brown-light4--bg{background-color:#d2b7ad}.w-app .brown-light4{color:#d2b7ad}.w-app .brown-dark4--bg{background-color:#422c24}.w-app .brown-dark4{color:#422c24}.w-app .brown-light5--bg{background-color:#e2d1ca}.w-app .brown-light5{color:#e2d1ca}.w-app .brown-dark5--bg{background-color:#32211b}.w-app .brown-dark5{color:#32211b}.w-app .brown-light6--bg{background-color:#f2eae7}.w-app .brown-light6{color:#f2eae7}.w-app .brown-dark6--bg{background-color:#211612}.w-app .brown-dark6{color:#211612}.w-app .blue-grey--bg{background-color:#6c8693}.w-app .blue-grey{color:#6c8693}.w-app .blue-grey-light1--bg{background-color:#8298a3}.w-app .blue-grey-light1{color:#8298a3}.w-app .blue-grey-dark1--bg{background-color:#5f7581}.w-app .blue-grey-dark1{color:#5f7581}.w-app .blue-grey-light2--bg{background-color:#98aab3}.w-app .blue-grey-light2{color:#98aab3}.w-app .blue-grey-dark2--bg{background-color:#51656f}.w-app .blue-grey-dark2{color:#51656f}.w-app .blue-grey-light3--bg{background-color:#aebcc4}.w-app .blue-grey-light3{color:#aebcc4}.w-app .blue-grey-dark3--bg{background-color:#44545c}.w-app .blue-grey-dark3{color:#44545c}.w-app .blue-grey-light4--bg{background-color:#c4cfd4}.w-app .blue-grey-light4{color:#c4cfd4}.w-app .blue-grey-dark4--bg{background-color:#36444a}.w-app .blue-grey-dark4{color:#36444a}.w-app .blue-grey-light5--bg{background-color:#dae1e4}.w-app .blue-grey-light5{color:#dae1e4}.w-app .blue-grey-dark5--bg{background-color:#293338}.w-app .blue-grey-dark5{color:#293338}.w-app .blue-grey-light6--bg{background-color:#f0f3f4}.w-app .blue-grey-light6{color:#f0f3f4}.w-app .blue-grey-dark6--bg{background-color:#1c2226}.w-app .blue-grey-dark6{color:#1c2226}.w-app .grey--bg{background-color:#848484}.w-app .grey{color:#848484}.w-app .grey-light1--bg{background-color:#979797}.w-app .grey-light1{color:#979797}.w-app .grey-dark1--bg{background-color:#747474}.w-app .grey-dark1{color:#747474}.w-app .grey-light2--bg{background-color:#aaa}.w-app .grey-light2{color:#aaa}.w-app .grey-dark2--bg{background-color:#646464}.w-app .grey-dark2{color:#646464}.w-app .grey-light3--bg{background-color:#bdbdbd}.w-app .grey-light3{color:#bdbdbd}.w-app .grey-dark3--bg{background-color:#555}.w-app .grey-dark3{color:#555}.w-app .grey-light4--bg{background-color:#d1d1d1}.w-app .grey-light4{color:#d1d1d1}.w-app .grey-dark4--bg{background-color:#454545}.w-app .grey-dark4{color:#454545}.w-app .grey-light5--bg{background-color:#e4e4e4}.w-app .grey-light5{color:#e4e4e4}.w-app .grey-dark5--bg{background-color:#353535}.w-app .grey-dark5{color:#353535}.w-app .grey-light6--bg{background-color:#f7f7f7}.w-app .grey-light6{color:#f7f7f7}.w-app .grey-dark6--bg{background-color:#252525}.w-app .grey-dark6{color:#252525}.w-app .primary--bg{color:rgb(var(--w-base-bg-color-rgb))}.w-app .white--bg{background-color:#fff}.w-app .white{color:#fff}.w-app .black--bg{background-color:#000}.w-app .black{color:#000}.w-app .transparent--bg{background-color:transparent}.w-app .transparent{color:transparent}.w-app .inherit--bg{background-color:inherit}.w-app .inherit{color:inherit}.w-app .base-color{color:rgba(var(--w-base-color-rgb),.7)}.w-app .base-color--bg{background-color:rgb(var(--w-base-bg-color-rgb))}.w-app .contrast-color{color:rgba(var(--w-contrast-color-rgb),.7)}.w-app .contrast-color--bg{background-color:rgb(var(--w-contrast-bg-color-rgb))}.w-app .info{color:var(--w-info-color)}.w-app .info--bg{background-color:var(--w-info-color);color:#fff}.w-app .warning{color:var(--w-warning-color)}.w-app .warning--bg{background-color:var(--w-warning-color);color:#fff}.w-app .success{color:var(--w-success-color)}.w-app .success--bg{background-color:var(--w-success-color);color:#fff}.w-app .error{color:var(--w-error-color)}.w-app .error--bg{background-color:var(--w-error-color);color:#fff}@font-face{font-family:wave-ui;font-style:normal;font-weight:400;src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAiwAAsAAAAAC4gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAACtAAABZcAAAavq6CQ8kZGVE0AAAhoAAAAGgAAAByQtWO/R0RFRgAACEwAAAAcAAAAHgAnAB9PUy8yAAABUAAAAEcAAABgL7xMfWNtYXAAAAJoAAAAPAAAAUrAKCK3aGVhZAAAAQgAAAAoAAAANhvmXwNoaGVhAAABMAAAABgAAAAkBC8CA2htdHgAAAiEAAAAKgAAADYHggOmbWF4cAAAAUgAAAAGAAAABgAZUABuYW1lAAABmAAAANAAAAF3qsrPi3Bvc3QAAAKkAAAAEAAAACAAAwABeJxjYGRgYADi6H4Pjnh+m68M3EwMIHA3hZ8ZmWZiAItzQCgAvpwFnXicY2BkYGBiAAI9MAliMzKgAiYABdAAOQAAUAAAGQAAeJxjYGZiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbByMsCBAILJEJDmmsLg8IDhgTjjg/8PGPSYIMKMcAUKQMgIAPSyCq0AeJx1jj1uwkAQhT+DIUJEiApRoY2o17K3gwP4CPQUFnJjS+bvFGnTUeYYOQBH4DZ5a6ahYFej+ebpzQ/wyQ8J8SV8MDce6K+Mh6ypjVN5bsYjpvwZj6U/5EzSiZRZ3xV5oI6l8ZCSL+NUnm/jEQt+jcfS71zZc6HCc9ZmrvtL5c+CvopQ0tJw6nPHQVZHICNX3ipeBzy1Qg7PRhHkC6op2+ZUtt2hciHL3dbZIlER/MaHPMj07pidtI6jtHhLnB/3s6u6Y902rsjyt73/xoczrnicY2BgYGaAYBkGRgYQcAHyGMF8FgYNIM0GpBkZmBgYHoj//w9S8IABRCswQtUDASMbA4IzQgEAdUIGvnicY2BmQAaMDGgAAACOAAV4nE1Uf0wTVxx/D/vj0jI2tecwIWC3RVNDl0miS9QV/Wdm6qKLuCyiwwoFrnAtu9YWHVCh5a7X19KfSBEGCGp24oaBMbIxu2gic874IzOOubjo4pZIQrJkkdfkTNw7fhjzyb33/fH5/ngv73sQqFQAQkh5rR6b+SgDYA6AYHt2Q062ZFk2XxXOhSh3GcpVFerA6n0rniP0QsjVIpTtzKbUBdD5agEArxXAgeUFILdAs20FyFfSvAJWg7XgHbAZ7AC7wUfgEGCAF7SBEEiDr8EYyIAr4Bq4AW6Du+AP8Fdlrc3DOR3mKqfXsSTX26rdSzLH1NS+UI42WDnO6Z0nuznG6qipty1FVtZVck6Xa14yVzJcZb1t3rAoe62cg3HULGqMo9q5RFICjjgbl3azjW1wH3uhMY4qm9vGsYzDSjZrFeOcXxZYLreVc9msXGWtcpPVTL3N1cA4Fm916XIBgAIMQhGGIIJhkAvOwQjsgFEYg3GYgEmYgp3wJOyCadgNT8Ee2AtWKxeZA14HxWA7+BgcBSdANzgDvgOPwX9wFXwbvg8bYCsJHYUZ+DBn3bKwKl9lz8MleJZmWWyQDZiAlUwmdR5+gN+jTbOzs6wkzztkAzHuwu/SEosNC1yWnVWYJXgXTYgmSVrgKcxsKU7RJDRX1iOctiIkp2U91tezuFQuJTEm/CM9t2ZujjBN2EePK5FWJdSqZBjHBu2SI2PV5uEyvIUueUx61JMsKZxiJSUwq1dK6BVg/YJTAWlQr4BIkuIh5RhsotfoZBM20EZdHn6Od5ADW6YtFlaanrZMSxJZpiXWYlGzmJmnSKQ46WVcI9tV1m/HNR4sLdrv0oqumBW3B5fN2xcqzKnkjMbV6HUXyRmtu887VIgzmqG+/sEinNEONva7CpW2y+g3dIcJU84Qq9KNj5bt49iuGcelxJWHUw/pN3VZg8qoM6r2lpfv3TtZPjU1OTk1VT65t+hlN5HxWzTO31KL12PqX9mc3oONe2SjbG7B1NpaeT05+z+4ksY5co7dLkOcg3oDcTXnsbfUImrr7uv371//5ff713dtLUI1LXUejkrwalmz6srExOUrFRNl+ysqyvZPVFwmRe9kt9IDaCh4quliWEJDtlhr3Cf6xOPNvuYAF0le4MKH/E2b4/VUl+WS43agM9QZ7hQioZAQDPmEFuQLuyJc1N21/6z7ZufPVELqHj7TV9vUNur2cA2Nh9urQvZ03aAn3p4Uov6IwPMComwD7jE0ERrrHR260JoIpFsi9dEjbeyxEXS+ue2IGAi1+YPUCaEt2Rr+rON4WYpNudJNZz0xISZ2tCOeDwVFPhzsEMKUo9c5Io6Ghjv7e77gkSjwQUHwi0Ks+suaQ032puqItY+hIkJUDAuID6Cg6Otq7+F7WkdCY4mR9M3JoZ86rk78On4NUdFmukqw+RjvxZN94QFvTEiGo9Herr5gT3MyGE+FE6EzXJdLpPDyEvp8N3Nr3+eR1mhroO1sbCCQrqXkq1H6QPDDE82bhr6/+M0lNt5x+vQo1/VVTdIRovKyB7Pr6JK/1XzMH20j8Ef8iJJTGj9qD/J8Oy8GUIB69qkWBSKBOB/j48EkorIGTRLFO2KxeCySQAkK/6lFiVBKIOATfIySV96h42JUjIjU4w3qDjEiRHhKBhryJh7Qz3KyO3GDrNMg/0spsV6Td+8eHR8bjalrRrw/oAz19NGjp4XDw3XDavK6tATGIrTj3M7Jcgp/sI3GRqwlILZbDTfKJ6n2yipePVLTfwB9Qhk3bjQW1tWRgU0ZEI1ydeS/vxKoIHzVtPOgcU6SfivFm/AmqV6tl3XFxbJO1s0UYx3Wzcwoa/GMrCvSk7FyexfHqt87qIzVYP/iWHn73YV6s2X6yZNp5bOYzRaLuUj/P0Do8bIAeJxjYGRgYOABYjEgZmJgBEIJIGYB8xgABKYAR3icY2BgYGQAgqtvXXeA6Lsp/MwwGgBHnAVnAAB4nGNiYGBgYmBoYFjNsB1IhjJMZcgGQk8g1oZCBzCEsRkYVBkYAOJKBy0AAA==) format("woff")}[class*=" wi-"]:before,[class^=wi-]:before{font-family:wave-ui!important;font-style:normal!important;font-variant:normal!important;font-weight:400!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wi-chevron-down:before{content:""}.wi-chevron-left:before{content:""}.wi-chevron-right:before{content:""}.wi-chevron-up:before{content:""}.wi-arrow-down:before{content:""}.wi-triangle-down:before{content:""}.wi-plus:before{content:""}.wi-minus:before{content:""}.wi-check:before{content:""}.wi-cross:before{content:""}.wi-check-circle:before{content:""}.wi-cross-circle:before{content:""}.wi-warning-circle:before{content:""}.wi-info-circle:before{content:""}.wi-checkbox:before{content:""}.wi-checkbox-empty:before{content:""}.wi-checkbox-indeterminate:before{content:""}.wi-radio:before{content:""}.wi-radio-empty:before{content:""}.wi-star:before{content:""}.wi-search:before{content:""}.wi-wave:before{content:""}.wi-file:before{content:""}.wi-spinner:before{content:""}.fade-enter-active{animation:w-fade .25s}.fade-leave-active{animation:w-fade .25s reverse}@keyframes w-fade{0%{opacity:0}to{opacity:1}}.slide-right-enter-active,.slide-right-leave-active{transform:translate(0);transition:.25s cubic-bezier(.4,0,.2,1);transition-property:transform,left,margin-left}.slide-right-enter-from,.slide-right-leave-to{left:0!important;margin-left:0!important;transform:translate(-100%)}.slide-left-enter-active,.slide-left-leave-active{transform:translate(0);transition:.25s;transition-property:transform,right,margin-right}.slide-left-enter-from,.slide-left-leave-to{margin-right:0!important;right:0!important;transform:translate(100%)}.slide-down-enter-active,.slide-down-leave-active{transform:translateY(0);transition:transform .25s cubic-bezier(.4,0,.2,1);transition-property:transform,top,margin-top}.slide-down-enter-from,.slide-down-leave-to{margin-top:0!important;top:0!important;transform:translateY(-100%)}.slide-up-enter-active,.slide-up-leave-active{transform:translateY(0);transition:transform .25s cubic-bezier(.4,0,.2,1);transition-property:transform,bottom,margin-bottom}.slide-up-enter-from,.slide-up-leave-to{bottom:0!important;margin-bottom:0!important;transform:translateY(100%)}.slide-fade-left-enter-active,.slide-fade-left-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}.slide-fade-left-enter-from,.slide-fade-left-leave-to{opacity:0;transform:translate(12px)}.slide-fade-right-enter-active,.slide-fade-right-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}.slide-fade-right-enter-from,.slide-fade-right-leave-to{opacity:0;transform:translate(-12px)}.slide-fade-up-enter-active,.slide-fade-up-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}.slide-fade-up-enter-from,.slide-fade-up-leave-to{opacity:0;transform:translateY(12px)}.slide-fade-down-enter-active,.slide-fade-down-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}.slide-fade-down-enter-from,.slide-fade-down-leave-to{opacity:0;transform:translateY(-12px)}.scale-enter-active{animation:w-scale .25s}.scale-leave-active{animation:w-scale .25s reverse}@keyframes w-scale{0%{transform:scale(0)}to{transform:scale(1)}}.scale-fade-enter-active{animation:w-scale-fade .25s}.scale-fade-leave-active{animation:w-scale-fade .25s reverse}@keyframes w-scale-fade{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.bounce-enter-active{animation:w-bounce .3s}.bounce-leave-active{animation:w-bounce .3s reverse}@keyframes w-bounce{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}.twist-enter-active{animation:w-twist .5s}.twist-leave-active{animation:w-twist .5s reverse}@keyframes w-twist{0%{transform:scale(0) rotate(-70deg)}60%{transform:scale(1.03) rotate(6deg)}to{transform:scale(1) rotate(0)}}.content-wrap{padding:16px;position:relative}
IMO, this is already a fair chunk of CSS, in a quite decent efficiency compromise. Adding 6 new shades per status color is OK (6x4 = +24 css rules), and adding 6 shades per custom color is also OK up to a certain point. And that's why the color palette is fine grained and tries to offer a maximum of precompiled shades.
One thing that we should avoid is moving all the generated colors from SCSS (precompiled, so no computing time) to computing on the fly. Even if moving this to JS does not seem to have a significant impact now, it is adding up toward a a longer FOUC. And how can we set a limit for later other customization requests if we agree to do this. haha
Also just a useful side note that the styles generated in the client side are divided in 2
Does it makes sense to you?
Thnaks again!
I agree. I will revert the SCSS changes and keep the JS changes and see where we're at there.
Okay this has been updated to revert the SCSS colors being moved to JS. I agree that moving it added a lot of overhead.
Hey @DerrikMilligan, thanks for this PR. I've reviewed and I'm ready to merge after you adjust a few things I've commented in your commits :) let me know if you have further questions
I went through all the commits and didn't see any additional comments. What else were you specifically meaning you'd like to see adjusted?
Was it this section from your original comment?
Also just a useful side note that the styles generated in the client side are divided in 2
Thanks for all the changes @DerrikMilligan, good work, I'll merge in.
Regarding the shadesCount prop you mentioned, would be nice to not generate all the extra shades if we don't need, but setting a default of 6 (3 dark + 3 light) will still be inconsistent from the color palette shading. So let's leave it like that, and we can already disable all the shading together with colorShades: false. 👌