search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
544 stars 39 forks source link

[Colors] Re-work how colors are generated #157

Closed DerrikMilligan closed 3 weeks ago

DerrikMilligan commented 2 months ago

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.

  1. When trying to use colors as design tokens, such as using the colors primary, secondary, success, deep-purple and 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.
  2. 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 warning status color ranges from yellow with it's light3 shade to red with the dark3. Both of which are pretty far off the orange that we started with.

  3. Customizing the palette, if so desired, is difficult in it's present state

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: image

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: image

Notes

  1. 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.
  2. In the SCSS @antoniandre was using the builtin lighten and darken methods 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 the adjust method 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.

antoniandre commented 1 month ago

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,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) 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