Closed DerrikMilligan closed 3 weeks ago
Hi @DerrikMilligan, Thanks for your PR and hard work again!
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
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.
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.warning
status color ranges from yellow with it'slight3
shade 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:![image](https://github.com/antoniandre/wave-ui/assets/37845846/b4b7533d-14d5-4dbc-ad4d-9cdd16de75cb)
I have brought over the
lighten
anddarken
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 darkincrement
values, and the light and darkoffset
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](https://github.com/antoniandre/wave-ui/assets/37845846/52e0e39c-e076-422e-8899-4932b9c160b9)
Notes
lighten
anddarken
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 theadjust
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 itFinal 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.