js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tintless variables + OKLCH coords as comments (#596)

Browse Source 
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
2025-01-24 16:55:21 -05:00
committed by GitHub
parent 71c054d6e4
commit a7caf19b34
11 changed files with 1020 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/styles/color/anodized.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-anodized {
--wa-color-red-95: #fbeeeb;
--wa-color-red-90: #f8e0d9;
--wa-color-red-80: #efbdb1;
--wa-color-red-70: #e39f8d;
--wa-color-red-60: #d1806b;
--wa-color-red-50: #b35e49;
--wa-color-red-40: #8e4330;
--wa-color-red-30: #733223;
--wa-color-red-20: #562317;
--wa-color-red-10: #36130a;
--wa-color-red-05: #240a05;
--wa-color-red-95: #fbeeeb /* oklch(95.851% 0.01469 33.071) */;
--wa-color-red-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
--wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
--wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
--wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
--wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
--wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
--wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
--wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
--wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
--wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fff2b8;
--wa-color-yellow-90: #ffe578;
--wa-color-yellow-80: #eac46c;
--wa-color-yellow-70: #d5a766;
--wa-color-yellow-60: #bd8a5e;
--wa-color-yellow-50: #9d6a4f;
--wa-color-yellow-40: #794f3c;
--wa-color-yellow-30: #603d2f;
--wa-color-yellow-20: #482b21;
--wa-color-yellow-10: #2c1912;
--wa-color-yellow-05: #1d0e0a;
--wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
--wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
--wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
--wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
--wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
--wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
--wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
--wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
--wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
--wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
--wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
--wa-color-yellow: var(--wa-color-yellow-90);
--wa-color-green-95: #dcf8ea;
--wa-color-green-90: #bcf1d8;
--wa-color-green-80: #6dddad;
--wa-color-green-70: #33c685;
--wa-color-green-60: #00aa66;
--wa-color-green-50: #008754;
--wa-color-green-40: #006646;
--wa-color-green-30: #00503b;
--wa-color-green-20: #003a2d;
--wa-color-green-10: #00231b;
--wa-color-green-05: #001610;
--wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
--wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
--wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
--wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
--wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
--wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
--wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
--wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
--wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
--wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
--wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
--wa-color-green: var(--wa-color-green-60);
--wa-color-teal-95: #cbfaf9;
--wa-color-teal-90: #9ff4f3;
--wa-color-teal-80: #1adfdb;
--wa-color-teal-70: #00c3be;
--wa-color-teal-60: #1aa6a0;
--wa-color-teal-50: #15837e;
--wa-color-teal-40: #10635e;
--wa-color-teal-30: #0c4e4a;
--wa-color-teal-20: #083936;
--wa-color-teal-10: #04221f;
--wa-color-teal-05: #021513;
--wa-color-teal-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
--wa-color-teal-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
--wa-color-teal-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
--wa-color-teal-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
--wa-color-teal-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
--wa-color-teal-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
--wa-color-teal-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
--wa-color-teal-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
--wa-color-teal-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
--wa-color-teal-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
--wa-color-teal-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
--wa-color-teal: var(--wa-color-teal-80);
--wa-color-blue-95: #ecf3ff;
--wa-color-blue-90: #d9e7ff;
--wa-color-blue-80: #abcaff;
--wa-color-blue-70: #83b0fe;
--wa-color-blue-60: #5593fe;
--wa-color-blue-50: #3d74d2;
--wa-color-blue-40: #2e589f;
--wa-color-blue-30: #24457c;
--wa-color-blue-20: #1b325b;
--wa-color-blue-10: #101d35;
--wa-color-blue-05: #0a1222;
--wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
--wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
--wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
--wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
--wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
--wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
--wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
--wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
--wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
--wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
--wa-color-blue: var(--wa-color-blue-60);
--wa-color-indigo-95: #f5efff;
--wa-color-indigo-90: #ede0ff;
--wa-color-indigo-80: #d7bdff;
--wa-color-indigo-70: #bf9efe;
--wa-color-indigo-60: #a280fa;
--wa-color-indigo-50: #7f5bec;
--wa-color-indigo-40: #603dc8;
--wa-color-indigo-30: #4c2ba5;
--wa-color-indigo-20: #381d7f;
--wa-color-indigo-10: #210e53;
--wa-color-indigo-05: #150739;
--wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
--wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
--wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
--wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
--wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
--wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
--wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
--wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
--wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
--wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
--wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
--wa-color-indigo: var(--wa-color-indigo-50);
--wa-color-violet-95: #fbedfd;
--wa-color-violet-90: #f7defa;
--wa-color-violet-80: #eeb6f5;
--wa-color-violet-70: #e590f0;
--wa-color-violet-60: #d56ae2;
--wa-color-violet-50: #b547be;
--wa-color-violet-40: #952598;
--wa-color-violet-30: #751d79;
--wa-color-violet-20: #561658;
--wa-color-violet-10: #340d36;
--wa-color-violet-05: #210822;
--wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
--wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
--wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
--wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
--wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
--wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
--wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
--wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
--wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
--wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
--wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f1f2f4;
--wa-color-gray-90: #e2e5e8;
--wa-color-gray-80: #c2c9d0;
--wa-color-gray-70: #a6b0ba;
--wa-color-gray-60: #8897a3;
--wa-color-gray-50: #657888;
--wa-color-gray-40: #435c6f;
--wa-color-gray-30: #2d485d;
--wa-color-gray-20: #18354a;
--wa-color-gray-10: #012034;
--wa-color-gray-05: #001421;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
--wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
--wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
--wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
--wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
--wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
--wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
--wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
--wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
--wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
--wa-color-gray: var(--wa-color-gray-40);
}

184
src/styles/color/bright.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-bright {
--wa-color-red-95: #ffefef;
--wa-color-red-90: #ffdddd;
--wa-color-red-80: #ffb7b7;
--wa-color-red-70: #ff8e8e;
--wa-color-red-60: #fd5f5f;
--wa-color-red-50: #de3131;
--wa-color-red-40: #b40917;
--wa-color-red-30: #910000;
--wa-color-red-20: #6d0000;
--wa-color-red-10: #450000;
--wa-color-red-05: #300000;
--wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
--wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
--wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
--wa-color-red-70: #ff8e8e /* oklch(76.851% 0.13692 20.73) */;
--wa-color-red-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
--wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
--wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
--wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fef3c1;
--wa-color-yellow-90: #fee682;
--wa-color-yellow-80: #fbc217;
--wa-color-yellow-70: #f39b00;
--wa-color-yellow-60: #e67700;
--wa-color-yellow-50: #b75d00;
--wa-color-yellow-40: #8c4600;
--wa-color-yellow-30: #6f3600;
--wa-color-yellow-20: #532600;
--wa-color-yellow-10: #341500;
--wa-color-yellow-05: #220c00;
--wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
--wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
--wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
--wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
--wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
--wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
--wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
--wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
--wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
--wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
--wa-color-yellow: var(--wa-color-yellow-60);
--wa-color-green-95: #e0fae4;
--wa-color-green-90: #baf4c2;
--wa-color-green-80: #73e085;
--wa-color-green-70: #46c65c;
--wa-color-green-60: #33aa49;
--wa-color-green-50: #2a863c;
--wa-color-green-40: #20662e;
--wa-color-green-30: #194f24;
--wa-color-green-20: #123a1a;
--wa-color-green-10: #0b2210;
--wa-color-green-05: #07150a;
--wa-color-green-95: #e0fae4 /* oklch(96.026% 0.03986 149.82) */;
--wa-color-green-90: #baf4c2 /* oklch(91.456% 0.0897 148.52) */;
--wa-color-green-80: #73e085 /* oklch(81.974% 0.16188 147.55) */;
--wa-color-green-70: #46c65c /* oklch(73.25% 0.18463 146.42) */;
--wa-color-green-60: #33aa49 /* oklch(65.121% 0.17208 146.32) */;
--wa-color-green-50: #2a863c /* oklch(54.872% 0.13954 146.82) */;
--wa-color-green-40: #20662e /* oklch(45.254% 0.11199 147.1) */;
--wa-color-green-30: #194f24 /* oklch(38.029% 0.09087 147.43) */;
--wa-color-green-20: #123a1a /* oklch(31.086% 0.07165 147.58) */;
--wa-color-green-10: #0b2210 /* oklch(22.733% 0.04522 148.82) */;
--wa-color-green-05: #07150a /* oklch(17.871% 0.03021 149.94) */;
--wa-color-green: var(--wa-color-green-70);
--wa-color-teal-95: #d8fbf0;
--wa-color-teal-90: #a4f5dd;
--wa-color-teal-80: #51e1b5;
--wa-color-teal-70: #1cc693;
--wa-color-teal-60: #0da97a;
--wa-color-teal-50: #088660;
--wa-color-teal-40: #066549;
--wa-color-teal-30: #054f39;
--wa-color-teal-20: #043a2a;
--wa-color-teal-10: #022319;
--wa-color-teal-05: #01160f;
--wa-color-teal-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
--wa-color-teal-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
--wa-color-teal-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
--wa-color-teal-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
--wa-color-teal-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
--wa-color-teal-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
--wa-color-teal-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
--wa-color-teal-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
--wa-color-teal-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
--wa-color-teal-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
--wa-color-teal-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
--wa-color-teal: var(--wa-color-teal-70);
--wa-color-blue-95: #e7f5ff;
--wa-color-blue-90: #ceeaff;
--wa-color-blue-80: #94d0fe;
--wa-color-blue-70: #60b5f9;
--wa-color-blue-60: #3299f0;
--wa-color-blue-50: #1a77cc;
--wa-color-blue-40: #165a9b;
--wa-color-blue-30: #11477a;
--wa-color-blue-20: #0d3459;
--wa-color-blue-10: #071f35;
--wa-color-blue-05: #051321;
--wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
--wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
--wa-color-blue-80: #94d0fe /* oklch(83.329% 0.08941 242.12) */;
--wa-color-blue-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
--wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
--wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
--wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
--wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
--wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
--wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
--wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
--wa-color-blue: var(--wa-color-blue-60);
--wa-color-indigo-95: #edf2ff;
--wa-color-indigo-90: #dce5ff;
--wa-color-indigo-80: #bac8ff;
--wa-color-indigo-70: #96abff;
--wa-color-indigo-60: #738efc;
--wa-color-indigo-50: #486af1;
--wa-color-indigo-40: #354dc3;
--wa-color-indigo-30: #293c98;
--wa-color-indigo-20: #1e2c70;
--wa-color-indigo-10: #121a43;
--wa-color-indigo-05: #0b102a;
--wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
--wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
--wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
--wa-color-indigo-70: #96abff /* oklch(75.857% 0.12332 272.47) */;
--wa-color-indigo-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
--wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
--wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
--wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
--wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
--wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
--wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
--wa-color-indigo: var(--wa-color-indigo-50);
--wa-color-violet-95: #f3f0ff;
--wa-color-violet-90: #eae2ff;
--wa-color-violet-80: #d1c0ff;
--wa-color-violet-70: #b8a0fd;
--wa-color-violet-60: #a080fb;
--wa-color-violet-50: #7f57f5;
--wa-color-violet-40: #603dc7;
--wa-color-violet-30: #4c309c;
--wa-color-violet-20: #372372;
--wa-color-violet-10: #211544;
--wa-color-violet-05: #150d2a;
--wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
--wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
--wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
--wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
--wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
--wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
--wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
--wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
--wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
--wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
--wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f1f2f4;
--wa-color-gray-90: #e3e5ea;
--wa-color-gray-80: #c7cad4;
--wa-color-gray-70: #a9afbe;
--wa-color-gray-60: #8d95a8;
--wa-color-gray-50: #6a7591;
--wa-color-gray-40: #4b5977;
--wa-color-gray-30: #344566;
--wa-color-gray-20: #1a3356;
--wa-color-gray-10: #0e1e35;
--wa-color-gray-05: #081220;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
--wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
--wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
--wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
--wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
--wa-color-gray-40: #4b5977 /* oklch(46.454% 0.05212 265.05) */;
--wa-color-gray-30: #344566 /* oklch(39.129% 0.06051 263) */;
--wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
--wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
--wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
--wa-color-gray: var(--wa-color-gray-40);
}

184
src/styles/color/classic.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-classic {
--wa-color-red-95: #feeeee;
--wa-color-red-90: #fedede;
--wa-color-red-80: #fdb8b8;
--wa-color-red-70: #fa9292;
--wa-color-red-60: #ee6c6c;
--wa-color-red-50: #d43c3c;
--wa-color-red-40: #ac1e1e;
--wa-color-red-30: #640f0f;
--wa-color-red-20: #631111;
--wa-color-red-10: #3b0d0d;
--wa-color-red-05: #260606;
--wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
--wa-color-red-90: #fedede /* oklch(92.701% 0.03551 17.81) */;
--wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
--wa-color-red-70: #fa9292 /* oklch(76.951% 0.12587 20.376) */;
--wa-color-red-60: #ee6c6c /* oklch(68.861% 0.16125 22.227) */;
--wa-color-red-50: #d43c3c /* oklch(58.269% 0.18916 25.263) */;
--wa-color-red-40: #ac1e1e /* oklch(48.229% 0.17712 27.066) */;
--wa-color-red-30: #640f0f /* oklch(32.787% 0.11797 26.73) */;
--wa-color-red-20: #631111 /* oklch(32.78% 0.11503 26.34) */;
--wa-color-red-10: #3b0d0d /* oklch(24.059% 0.07249 24.391) */;
--wa-color-red-05: #260606 /* oklch(18.371% 0.05502 24.325) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fef2c4;
--wa-color-yellow-90: #fde494;
--wa-color-yellow-80: #fbc129;
--wa-color-yellow-70: #f29c0b;
--wa-color-yellow-60: #db7e13;
--wa-color-yellow-50: #af6005;
--wa-color-yellow-40: #904207;
--wa-color-yellow-30: #713406;
--wa-color-yellow-20: #532408;
--wa-color-yellow-10: #321606;
--wa-color-yellow-05: #1f0c01;
--wa-color-yellow-95: #fef2c4 /* oklch(95.928% 0.0607 95.131) */;
--wa-color-yellow-90: #fde494 /* oklch(92.185% 0.10303 92.708) */;
--wa-color-yellow-80: #fbc129 /* oklch(84.088% 0.16334 85.185) */;
--wa-color-yellow-70: #f29c0b /* oklch(76.145% 0.1631 70.065) */;
--wa-color-yellow-60: #db7e13 /* oklch(68.058% 0.15388 60.67) */;
--wa-color-yellow-50: #af6005 /* oklch(56.918% 0.13324 58.984) */;
--wa-color-yellow-40: #904207 /* oklch(47.288% 0.12241 49.414) */;
--wa-color-yellow-30: #713406 /* oklch(40.01% 0.10093 50.35) */;
--wa-color-yellow-20: #532408 /* oklch(32.223% 0.07974 47.215) */;
--wa-color-yellow-10: #321606 /* oklch(23.771% 0.05225 48.671) */;
--wa-color-yellow-05: #1f0c01 /* oklch(18.046% 0.04102 55.818) */;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-green-95: #e9f5ed;
--wa-color-green-90: #cfedd9;
--wa-color-green-80: #a2d5b4;
--wa-color-green-70: #6cc08a;
--wa-color-green-60: #38a961;
--wa-color-green-50: #178640;
--wa-color-green-40: #006823;
--wa-color-green-30: #0d5026;
--wa-color-green-20: #0c391d;
--wa-color-green-10: #082213;
--wa-color-green-05: #02140a;
--wa-color-green-95: #e9f5ed /* oklch(95.897% 0.01651 156.91) */;
--wa-color-green-90: #cfedd9 /* oklch(91.883% 0.04142 156.31) */;
--wa-color-green-80: #a2d5b4 /* oklch(82.826% 0.07031 156.17) */;
--wa-color-green-70: #6cc08a /* oklch(73.992% 0.11416 154.35) */;
--wa-color-green-60: #38a961 /* oklch(65.365% 0.14702 151.78) */;
--wa-color-green-50: #178640 /* oklch(54.51% 0.14175 149.98) */;
--wa-color-green-40: #006823 /* oklch(45.073% 0.13335 147.17) */;
--wa-color-green-30: #0d5026 /* oklch(38.028% 0.09504 150.7) */;
--wa-color-green-20: #0c391d /* oklch(30.614% 0.06954 152.08) */;
--wa-color-green-10: #082213 /* oklch(22.658% 0.04352 155.31) */;
--wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
--wa-color-green: var(--wa-color-green-60);
--wa-color-teal-95: #d0fbf3;
--wa-color-teal-90: #a9f4e8;
--wa-color-teal-80: #5bdecd;
--wa-color-teal-70: #36c2b3;
--wa-color-teal-60: #12a797;
--wa-color-teal-50: #0b8278;
--wa-color-teal-40: #09635b;
--wa-color-teal-30: #0a4e49;
--wa-color-teal-20: #0a3835;
--wa-color-teal-10: #082120;
--wa-color-teal-05: #021413;
--wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
--wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
--wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
--wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
--wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
--wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
--wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
--wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
--wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
--wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
--wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
--wa-color-teal: var(--wa-color-teal-70);
--wa-color-blue-95: #e5f4fe;
--wa-color-blue-90: #c8ebfd;
--wa-color-blue-80: #80d4fc;
--wa-color-blue-70: #37bbf5;
--wa-color-blue-60: #0d9ee0;
--wa-color-blue-50: #027ab9;
--wa-color-blue-40: #015d8d;
--wa-color-blue-30: #024970;
--wa-color-blue-20: #04354f;
--wa-color-blue-10: #05202f;
--wa-color-blue-05: #04121b;
--wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
--wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
--wa-color-blue-80: #80d4fc /* oklch(83.114% 0.09915 230.17) */;
--wa-color-blue-70: #37bbf5 /* oklch(74.731% 0.13762 232.44) */;
--wa-color-blue-60: #0d9ee0 /* oklch(66.354% 0.14388 237.59) */;
--wa-color-blue-50: #027ab9 /* oklch(55.557% 0.13184 242.23) */;
--wa-color-blue-40: #015d8d /* oklch(45.762% 0.10698 241.38) */;
--wa-color-blue-30: #024970 /* oklch(38.805% 0.0903 241.59) */;
--wa-color-blue-20: #04354f /* oklch(31.306% 0.06703 238.73) */;
--wa-color-blue-10: #05202f /* oklch(23.154% 0.04349 236.83) */;
--wa-color-blue-05: #04121b /* oklch(17.393% 0.0282 236.81) */;
--wa-color-blue: var(--wa-color-blue-60);
--wa-color-indigo-95: #eef2ff;
--wa-color-indigo-90: #dee5fd;
--wa-color-indigo-80: #bec8f2;
--wa-color-indigo-70: #9dabf0;
--wa-color-indigo-60: #818cf7;
--wa-color-indigo-50: #6063eb;
--wa-color-indigo-40: #4941d3;
--wa-color-indigo-30: #3930ad;
--wa-color-indigo-20: #29247a;
--wa-color-indigo-10: #191843;
--wa-color-indigo-05: #0f0e26;
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
--wa-color-indigo-90: #dee5fd /* oklch(92.388% 0.03348 272.78) */;
--wa-color-indigo-80: #bec8f2 /* oklch(83.901% 0.05981 274.54) */;
--wa-color-indigo-70: #9dabf0 /* oklch(75.639% 0.10065 274.93) */;
--wa-color-indigo-60: #818cf7 /* oklch(67.953% 0.15693 276.94) */;
--wa-color-indigo-50: #6063eb /* oklch(57.366% 0.20061 277.06) */;
--wa-color-indigo-40: #4941d3 /* oklch(48.251% 0.21482 277.09) */;
--wa-color-indigo-30: #3930ad /* oklch(40.969% 0.18954 277.17) */;
--wa-color-indigo-20: #29247a /* oklch(32.82% 0.14032 277.91) */;
--wa-color-indigo-10: #191843 /* oklch(23.918% 0.07895 279.64) */;
--wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #f7efff;
--wa-color-violet-90: #efe0ff;
--wa-color-violet-80: #dcbdfe;
--wa-color-violet-70: #cb9afd;
--wa-color-violet-60: #b976f9;
--wa-color-violet-50: #9d46ec;
--wa-color-violet-40: #7d22cc;
--wa-color-violet-30: #631f9c;
--wa-color-violet-20: #48176e;
--wa-color-violet-10: #2e054e;
--wa-color-violet-05: #1d0331;
--wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
--wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
--wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
--wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
--wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
--wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
--wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
--wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
--wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
--wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
--wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f2f2f3;
--wa-color-gray-90: #e5e5e8;
--wa-color-gray-80: #c9c9cc;
--wa-color-gray-70: #aeafb1;
--wa-color-gray-60: #94959b;
--wa-color-gray-50: #72747d;
--wa-color-gray-40: #565861;
--wa-color-gray-30: #43454d;
--wa-color-gray-20: #313134;
--wa-color-gray-10: #1d1d20;
--wa-color-gray-05: #101113;
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
--wa-color-gray-80: #c9c9cc /* oklch(83.679% 0.00413 286.31) */;
--wa-color-gray-70: #aeafb1 /* oklch(75.381% 0.00306 264.54) */;
--wa-color-gray-60: #94959b /* oklch(67.089% 0.00884 278.56) */;
--wa-color-gray-50: #72747d /* oklch(56.027% 0.01402 275.93) */;
--wa-color-gray-40: #565861 /* oklch(46.18% 0.01474 275.83) */;
--wa-color-gray-30: #43454d /* oklch(39.154% 0.01373 274.58) */;
--wa-color-gray-20: #313134 /* oklch(31.432% 0.00529 286.09) */;
--wa-color-gray-10: #1d1d20 /* oklch(23.201% 0.00571 285.95) */;
--wa-color-gray-05: #101113 /* oklch(17.739% 0.00442 264.46) */;
--wa-color-gray: var(--wa-color-gray-40);
}

192
src/styles/color/default.css
View File

@@ -1,108 +1,108 @@
/**
* Literal Colors
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
*/
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-default {
--wa-color-red-95: #ffefef;
--wa-color-red-90: #ffdddc;
--wa-color-red-80: #ffb7b6;
--wa-color-red-70: #fc9090;
--wa-color-red-60: #f2676c;
--wa-color-red-50: #de2d44;
--wa-color-red-40: #b11036;
--wa-color-red-30: #861a2f;
--wa-color-red-20: #641122;
--wa-color-red-10: #400712;
--wa-color-red-05: #2a030a;
--wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
--wa-color-red-90: #ffdddc /* oklch(92.547% 0.03785 19.865) */;
--wa-color-red-80: #ffb7b6 /* oklch(84.626% 0.08407 19.872) */;
--wa-color-red-70: #fc9090 /* oklch(76.834% 0.13083 20.537) */;
--wa-color-red-60: #f2676c /* oklch(68.768% 0.17146 20.596) */;
--wa-color-red-50: #de2d44 /* oklch(58.887% 0.20998 20.414) */;
--wa-color-red-40: #b11036 /* oklch(48.766% 0.18763 17.443) */;
--wa-color-red-30: #861a2f /* oklch(40.968% 0.14194 15.902) */;
--wa-color-red-20: #641122 /* oklch(33.29% 0.11505 15.196) */;
--wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
--wa-color-red-05: #2a030a /* oklch(18.798% 0.06593 14.104) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fdf3ba;
--wa-color-yellow-90: #fee590;
--wa-color-yellow-80: #fcc041;
--wa-color-yellow-70: #f39b00;
--wa-color-yellow-60: #e07b00;
--wa-color-yellow-50: #bb5a00;
--wa-color-yellow-40: #924200;
--wa-color-yellow-30: #743200;
--wa-color-yellow-20: #572300;
--wa-color-yellow-10: #361300;
--wa-color-yellow-05: #240b00;
--wa-color-yellow-95: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
--wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
--wa-color-yellow-80: #fcc041 /* oklch(84.136% 0.1524 82.087) */;
--wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
--wa-color-yellow-60: #e07b00 /* oklch(68.175% 0.16203 58.675) */;
--wa-color-yellow-50: #bb5a00 /* oklch(57.639% 0.14858 51.823) */;
--wa-color-yellow-40: #924200 /* oklch(47.573% 0.12584 49.96) */;
--wa-color-yellow-30: #743200 /* oklch(40.128% 0.10738 49.167) */;
--wa-color-yellow-20: #572300 /* oklch(32.668% 0.08836 48.446) */;
--wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
--wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
--wa-color-yellow: var(--wa-color-yellow-70);
--wa-color-green-95: #e2f9e2;
--wa-color-green-90: #c2f2c1;
--wa-color-green-80: #92da97;
--wa-color-green-70: #5dc36f;
--wa-color-green-60: #00ac49;
--wa-color-green-50: #008825;
--wa-color-green-40: #006800;
--wa-color-green-30: #005300;
--wa-color-green-20: #003c00;
--wa-color-green-10: #002400;
--wa-color-green-05: #001700;
--wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
--wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
--wa-color-green-80: #92da97 /* oklch(82.37% 0.11765 146.06) */;
--wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
--wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
--wa-color-green-50: #008825 /* oklch(54.493% 0.16976 145.33) */;
--wa-color-green-40: #006800 /* oklch(44.821% 0.15252 142.5) */;
--wa-color-green-30: #005300 /* oklch(38.319% 0.13039 142.5) */;
--wa-color-green-20: #003c00 /* oklch(30.861% 0.10501 142.5) */;
--wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
--wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
--wa-color-green: var(--wa-color-green-60);
--wa-color-teal-95: #e3f7f5;
--wa-color-teal-90: #c6eeeb;
--wa-color-teal-80: #81d9d3;
--wa-color-teal-70: #34c2b9;
--wa-color-teal-60: #10a69d;
--wa-color-teal-50: #00837c;
--wa-color-teal-40: #00645e;
--wa-color-teal-30: #004e49;
--wa-color-teal-20: #003935;
--wa-color-teal-10: #002220;
--wa-color-teal-05: #001513;
--wa-color-teal-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
--wa-color-teal-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
--wa-color-teal-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
--wa-color-teal-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
--wa-color-teal-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
--wa-color-teal-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
--wa-color-teal-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
--wa-color-teal-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
--wa-color-teal-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
--wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
--wa-color-teal-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
--wa-color-teal: var(--wa-color-teal-70);
--wa-color-blue-95: #ebf4ff;
--wa-color-blue-90: #d4e7ff;
--wa-color-blue-80: #a6ccff;
--wa-color-blue-70: #77b1ff;
--wa-color-blue-60: #4895fd;
--wa-color-blue-50: #0070ef;
--wa-color-blue-40: #0055b8;
--wa-color-blue-30: #004390;
--wa-color-blue-20: #00306c;
--wa-color-blue-10: #001c45;
--wa-color-blue-05: #00112f;
--wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
--wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
--wa-color-blue-80: #a6ccff /* oklch(83.582% 0.08269 255.9) */;
--wa-color-blue-70: #77b1ff /* oklch(75.268% 0.12855 256.14) */;
--wa-color-blue-60: #4895fd /* oklch(67.184% 0.17212 256.8) */;
--wa-color-blue-50: #0070ef /* oklch(56.997% 0.20953 257.84) */;
--wa-color-blue-40: #0055b8 /* oklch(46.934% 0.17173 257.73) */;
--wa-color-blue-30: #004390 /* oklch(39.638% 0.1408 257.02) */;
--wa-color-blue-20: #00306c /* oklch(32.102% 0.11523 257.27) */;
--wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
--wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
--wa-color-blue: var(--wa-color-blue-50);
--wa-color-indigo-95: #f0f2fe;
--wa-color-indigo-90: #e2e4fc;
--wa-color-indigo-80: #c2c6f8;
--wa-color-indigo-70: #a5a9f2;
--wa-color-indigo-60: #8a8beb;
--wa-color-indigo-50: #6b65e2;
--wa-color-indigo-40: #5246c1;
--wa-color-indigo-30: #412eaa;
--wa-color-indigo-20: #321393;
--wa-color-indigo-10: #1c006a;
--wa-color-indigo-05: #130049;
--wa-color-indigo-95: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
--wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
--wa-color-indigo-80: #c2c6f8 /* oklch(84.027% 0.06987 281.2) */;
--wa-color-indigo-70: #a5a9f2 /* oklch(75.915% 0.10451 281.18) */;
--wa-color-indigo-60: #8a8beb /* oklch(67.735% 0.14003 281.54) */;
--wa-color-indigo-50: #6b65e2 /* oklch(57.839% 0.18419 281.11) */;
--wa-color-indigo-40: #5246c1 /* oklch(48.113% 0.18471 281.3) */;
--wa-color-indigo-30: #412eaa /* oklch(41.007% 0.18636 281.32) */;
--wa-color-indigo-20: #321393 /* oklch(34.125% 0.1858 281.27) */;
--wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
--wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #f9effd;
--wa-color-violet-90: #f4defb;
--wa-color-violet-80: #e7baf7;
--wa-color-violet-70: #d996ef;
--wa-color-violet-60: #c674e1;
--wa-color-violet-50: #a94dc6;
--wa-color-violet-40: #8732a1;
--wa-color-violet-30: #6d2283;
--wa-color-violet-20: #521564;
--wa-color-violet-10: #330940;
--wa-color-violet-05: #22042b;
--wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
--wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
--wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
--wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
--wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
--wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
--wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
--wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
--wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
--wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
--wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f1f2f3;
--wa-color-gray-90: #e4e5e9;
--wa-color-gray-80: #c7c9d0;
--wa-color-gray-70: #abaeb9;
--wa-color-gray-60: #9194a2;
--wa-color-gray-50: #717584;
--wa-color-gray-40: #545868;
--wa-color-gray-30: #424554;
--wa-color-gray-20: #2f323f;
--wa-color-gray-10: #1b1d26;
--wa-color-gray-05: #101219;
--wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
--wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
--wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
--wa-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
--wa-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
--wa-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
--wa-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
--wa-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
--wa-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
--wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
--wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
--wa-color-gray: var(--wa-color-gray-40);
}

184
src/styles/color/elegant.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-elegant {
--wa-color-red-95: #fdeeef;
--wa-color-red-90: #fcdfe0;
--wa-color-red-80: #f8b9bc;
--wa-color-red-70: #f0969c;
--wa-color-red-60: #e3727d;
--wa-color-red-50: #cc465a;
--wa-color-red-40: #ac1d3d;
--wa-color-red-30: #8f012c;
--wa-color-red-20: #6b001c;
--wa-color-red-10: #44000d;
--wa-color-red-05: #2e0006;
--wa-color-red-95: #fdeeef /* oklch(96.122% 0.01629 12.781) */;
--wa-color-red-90: #fcdfe0 /* oklch(92.771% 0.0321 15.37) */;
--wa-color-red-80: #f8b9bc /* oklch(84.416% 0.07319 15.56) */;
--wa-color-red-70: #f0969c /* oklch(76.649% 0.10862 15.608) */;
--wa-color-red-60: #e3727d /* oklch(68.562% 0.1405 15.424) */;
--wa-color-red-50: #cc465a /* oklch(58.534% 0.16911 15.341) */;
--wa-color-red-40: #ac1d3d /* oklch(48.628% 0.17601 15.401) */;
--wa-color-red-30: #8f012c /* oklch(41.346% 0.16471 15.45) */;
--wa-color-red-20: #6b001c /* oklch(33.484% 0.13403 16.992) */;
--wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
--wa-color-red-05: #2e0006 /* oklch(19.077% 0.07648 18.657) */;
--wa-color-red: var(--wa-color-red-40);
--wa-color-yellow-95: #f5f2e5;
--wa-color-yellow-90: #ece6cc;
--wa-color-yellow-80: #dac992;
--wa-color-yellow-70: #c9ac5c;
--wa-color-yellow-60: #b98f27;
--wa-color-yellow-50: #9b6d09;
--wa-color-yellow-40: #785007;
--wa-color-yellow-30: #613e06;
--wa-color-yellow-20: #492c05;
--wa-color-yellow-10: #2b1a02;
--wa-color-yellow-05: #191008;
--wa-color-yellow-95: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
--wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
--wa-color-yellow-80: #dac992 /* oklch(83.686% 0.07427 92.946) */;
--wa-color-yellow-70: #c9ac5c /* oklch(75.33% 0.10529 89.848) */;
--wa-color-yellow-60: #b98f27 /* oklch(67.248% 0.12518 85.119) */;
--wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
--wa-color-yellow-40: #785007 /* oklch(46.422% 0.09514 74.644) */;
--wa-color-yellow-30: #613e06 /* oklch(39.54% 0.08123 71.804) */;
--wa-color-yellow-20: #492c05 /* oklch(32.206% 0.06602 68.329) */;
--wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
--wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
--wa-color-yellow: var(--wa-color-yellow-60);
--wa-color-green-95: #ecf4f1;
--wa-color-green-90: #dae9e3;
--wa-color-green-80: #b0d1c4;
--wa-color-green-70: #88b9a6;
--wa-color-green-60: #5fa288;
--wa-color-green-50: #2d8462;
--wa-color-green-40: #00663e;
--wa-color-green-30: #005031;
--wa-color-green-20: #003b24;
--wa-color-green-10: #002316;
--wa-color-green-05: #00160d;
--wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
--wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
--wa-color-green-80: #b0d1c4 /* oklch(83.284% 0.03952 169.54) */;
--wa-color-green-70: #88b9a6 /* oklch(74.553% 0.05874 168.82) */;
--wa-color-green-60: #5fa288 /* oklch(65.987% 0.07948 167.12) */;
--wa-color-green-50: #2d8462 /* oklch(55.19% 0.09885 163.66) */;
--wa-color-green-40: #00663e /* oklch(44.949% 0.10492 158.13) */;
--wa-color-green-30: #005031 /* oklch(38.025% 0.08722 159.15) */;
--wa-color-green-20: #003b24 /* oklch(31.092% 0.0701 160.21) */;
--wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
--wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
--wa-color-green: var(--wa-color-green-40);
--wa-color-teal-95: #ebf4f4;
--wa-color-teal-90: #d9e9e9;
--wa-color-teal-80: #add0d1;
--wa-color-teal-70: #84b8ba;
--wa-color-teal-60: #5aa0a3;
--wa-color-teal-50: #268285;
--wa-color-teal-40: #006366;
--wa-color-teal-30: #004e51;
--wa-color-teal-20: #00393b;
--wa-color-teal-10: #002223;
--wa-color-teal-05: #001415;
--wa-color-teal-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
--wa-color-teal-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
--wa-color-teal-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
--wa-color-teal-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
--wa-color-teal-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
--wa-color-teal-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
--wa-color-teal-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
--wa-color-teal-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
--wa-color-teal-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
--wa-color-teal-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
--wa-color-teal-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
--wa-color-teal: var(--wa-color-teal-50);
--wa-color-blue-95: #ebf3fa;
--wa-color-blue-90: #d8e8f5;
--wa-color-blue-80: #accee9;
--wa-color-blue-70: #81b5dd;
--wa-color-blue-60: #559bd2;
--wa-color-blue-50: #1c7ac3;
--wa-color-blue-40: #005aa0;
--wa-color-blue-30: #00477e;
--wa-color-blue-20: #00345d;
--wa-color-blue-10: #001f37;
--wa-color-blue-05: #001221;
--wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
--wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
--wa-color-blue-80: #accee9 /* oklch(83.556% 0.05253 242.25) */;
--wa-color-blue-70: #81b5dd /* oklch(75.142% 0.07972 242.18) */;
--wa-color-blue-60: #559bd2 /* oklch(66.672% 0.10847 244.18) */;
--wa-color-blue-50: #1c7ac3 /* oklch(56.462% 0.13979 247.89) */;
--wa-color-blue-40: #005aa0 /* oklch(46.253% 0.13415 250.9) */;
--wa-color-blue-30: #00477e /* oklch(39.201% 0.11116 250.07) */;
--wa-color-blue-20: #00345d /* oklch(31.892% 0.08838 249.18) */;
--wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
--wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
--wa-color-blue: var(--wa-color-blue-50);
--wa-color-indigo-95: #f1f1fa;
--wa-color-indigo-90: #e4e4f6;
--wa-color-indigo-80: #c6c7eb;
--wa-color-indigo-70: #a9aae1;
--wa-color-indigo-60: #8d8ed7;
--wa-color-indigo-50: #696ccb;
--wa-color-indigo-40: #4649bf;
--wa-color-indigo-30: #36389c;
--wa-color-indigo-20: #272972;
--wa-color-indigo-10: #171844;
--wa-color-indigo-05: #0d0e27;
--wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
--wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
--wa-color-indigo-80: #c6c7eb /* oklch(84.051% 0.05002 284.01) */;
--wa-color-indigo-70: #a9aae1 /* oklch(75.682% 0.07863 283.54) */;
--wa-color-indigo-60: #8d8ed7 /* oklch(67.514% 0.10716 282.54) */;
--wa-color-indigo-50: #696ccb /* oklch(57.448% 0.14365 279.49) */;
--wa-color-indigo-40: #4649bf /* oklch(47.579% 0.1808 275.97) */;
--wa-color-indigo-30: #36389c /* oklch(40.459% 0.15877 275.79) */;
--wa-color-indigo-20: #272972 /* oklch(32.817% 0.12297 276.06) */;
--wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
--wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #f6f0f9;
--wa-color-violet-90: #eee2f2;
--wa-color-violet-80: #dbc0e4;
--wa-color-violet-70: #c9a1d6;
--wa-color-violet-60: #b781c9;
--wa-color-violet-50: #a059b7;
--wa-color-violet-40: #882ea5;
--wa-color-violet-30: #6d2086;
--wa-color-violet-20: #501862;
--wa-color-violet-10: #300e3b;
--wa-color-violet-05: #1c0823;
--wa-color-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
--wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
--wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
--wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
--wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
--wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
--wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
--wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
--wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
--wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
--wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
--wa-color-violet: var(--wa-color-violet-40);
--wa-color-gray-95: #f2f2f3;
--wa-color-gray-90: #e6e5e8;
--wa-color-gray-80: #cbc8ce;
--wa-color-gray-70: #b1adb6;
--wa-color-gray-60: #98939f;
--wa-color-gray-50: #7a7382;
--wa-color-gray-40: #5d5568;
--wa-color-gray-30: #494352;
--wa-color-gray-20: #35313c;
--wa-color-gray-10: #1f1c23;
--wa-color-gray-05: #131115;
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
--wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
--wa-color-gray-80: #cbc8ce /* oklch(83.695% 0.00885 308.34) */;
--wa-color-gray-70: #b1adb6 /* oklch(75.367% 0.01345 305.97) */;
--wa-color-gray-60: #98939f /* oklch(67.134% 0.01834 304.67) */;
--wa-color-gray-50: #7a7382 /* oklch(56.69% 0.0242 306.59) */;
--wa-color-gray-40: #5d5568 /* oklch(46.422% 0.03185 304.29) */;
--wa-color-gray-30: #494352 /* oklch(39.46% 0.02608 303.4) */;
--wa-color-gray-20: #35313c /* oklch(32.176% 0.01998 301.84) */;
--wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
--wa-color-gray-05: #131115 /* oklch(18.185% 0.00865 307.93) */;
--wa-color-gray: var(--wa-color-gray-40);
}

184
src/styles/color/mild.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-mild {
--wa-color-red-95: #ffeeec;
--wa-color-red-90: #ffddda;
--wa-color-red-80: #f9bbb3;
--wa-color-red-70: #f0978d;
--wa-color-red-60: #e47468;
--wa-color-red-50: #cf443b;
--wa-color-red-40: #b40c12;
--wa-color-red-30: #910000;
--wa-color-red-20: #6d0000;
--wa-color-red-10: #450002;
--wa-color-red-05: #2f0001;
--wa-color-red-95: #ffeeec /* oklch(96.202% 0.01869 25.602) */;
--wa-color-red-90: #ffddda /* oklch(92.494% 0.0381 23.849) */;
--wa-color-red-80: #f9bbb3 /* oklch(84.649% 0.07309 27.063) */;
--wa-color-red-70: #f0978d /* oklch(76.461% 0.10897 26.832) */;
--wa-color-red-60: #e47468 /* oklch(68.546% 0.14136 27.641) */;
--wa-color-red-50: #cf443b /* oklch(58.246% 0.17685 27.636) */;
--wa-color-red-40: #b40c12 /* oklch(48.783% 0.19389 27.697) */;
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
--wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
--wa-color-red-05: #2f0001 /* oklch(19.191% 0.07829 27.331) */;
--wa-color-red: var(--wa-color-red-40);
--wa-color-yellow-95: #fff4b3;
--wa-color-yellow-90: #fee58c;
--wa-color-yellow-80: #e3c868;
--wa-color-yellow-70: #c6ad4f;
--wa-color-yellow-60: #ab933a;
--wa-color-yellow-50: #897421;
--wa-color-yellow-40: #695808;
--wa-color-yellow-30: #534400;
--wa-color-yellow-20: #3d3100;
--wa-color-yellow-10: #251d00;
--wa-color-yellow-05: #171200;
--wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
--wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
--wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */;
--wa-color-yellow-70: #c6ad4f /* oklch(75.09% 0.11724 94.514) */;
--wa-color-yellow-60: #ab933a /* oklch(66.775% 0.11124 94.014) */;
--wa-color-yellow-50: #897421 /* oklch(56.347% 0.10227 94.315) */;
--wa-color-yellow-40: #695808 /* oklch(46.381% 0.09207 95.41) */;
--wa-color-yellow-30: #534400 /* oklch(39.079% 0.08019 94.639) */;
--wa-color-yellow-20: #3d3100 /* oklch(31.711% 0.06501 94.007) */;
--wa-color-yellow-10: #251d00 /* oklch(23.339% 0.04787 94.382) */;
--wa-color-yellow-05: #171200 /* oklch(18.295% 0.03771 96.891) */;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-green-95: #e1f9e1;
--wa-color-green-90: #bff2c0;
--wa-color-green-80: #9fd7a1;
--wa-color-green-70: #86bc88;
--wa-color-green-60: #6ca170;
--wa-color-green-50: #4e8153;
--wa-color-green-40: #336339;
--wa-color-green-30: #224e29;
--wa-color-green-20: #123a1b;
--wa-color-green-10: #01230a;
--wa-color-green-05: #001701;
--wa-color-green-95: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
--wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
--wa-color-green-80: #9fd7a1 /* oklch(82.641% 0.09444 145.54) */;
--wa-color-green-70: #86bc88 /* oklch(74.373% 0.09308 145.46) */;
--wa-color-green-60: #6ca170 /* oklch(65.848% 0.09138 146.27) */;
--wa-color-green-50: #4e8153 /* oklch(55.447% 0.08949 146.53) */;
--wa-color-green-40: #336339 /* oklch(45.387% 0.08557 146.75) */;
--wa-color-green-30: #224e29 /* oklch(38.199% 0.07889 147.22) */;
--wa-color-green-20: #123a1b /* oklch(31.105% 0.0705 148.25) */;
--wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
--wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
--wa-color-green: var(--wa-color-green-80);
--wa-color-teal-95: #edf3f3;
--wa-color-teal-90: #dbe8e7;
--wa-color-teal-80: #b4cfcc;
--wa-color-teal-70: #8db7b3;
--wa-color-teal-60: #679f9b;
--wa-color-teal-50: #36817c;
--wa-color-teal-40: #006461;
--wa-color-teal-30: #004e4b;
--wa-color-teal-20: #003937;
--wa-color-teal-10: #002220;
--wa-color-teal-05: #001514;
--wa-color-teal-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
--wa-color-teal-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
--wa-color-teal-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
--wa-color-teal-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
--wa-color-teal-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
--wa-color-teal-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
--wa-color-teal-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
--wa-color-teal-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
--wa-color-teal-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
--wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
--wa-color-teal-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
--wa-color-teal: var(--wa-color-teal-40);
--wa-color-blue-95: #eaf5ff;
--wa-color-blue-90: #d5e7ff;
--wa-color-blue-80: #b5cced;
--wa-color-blue-70: #95b1d7;
--wa-color-blue-60: #7697c1;
--wa-color-blue-50: #5078a5;
--wa-color-blue-40: #305b88;
--wa-color-blue-30: #1b4771;
--wa-color-blue-20: #0a3458;
--wa-color-blue-10: #011f39;
--wa-color-blue-05: #001327;
--wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
--wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
--wa-color-blue-80: #b5cced /* oklch(83.888% 0.05268 257.37) */;
--wa-color-blue-70: #95b1d7 /* oklch(75.273% 0.06312 256.12) */;
--wa-color-blue-60: #7697c1 /* oklch(66.758% 0.07287 254.73) */;
--wa-color-blue-50: #5078a5 /* oklch(56.23% 0.08347 252.2) */;
--wa-color-blue-40: #305b88 /* oklch(46.183% 0.08806 251.23) */;
--wa-color-blue-30: #1b4771 /* oklch(38.952% 0.0863 250.15) */;
--wa-color-blue-20: #0a3458 /* oklch(31.794% 0.07822 249.27) */;
--wa-color-blue-10: #011f39 /* oklch(23.373% 0.0615 248.28) */;
--wa-color-blue-05: #001327 /* oklch(18.28% 0.04995 248.62) */;
--wa-color-blue: var(--wa-color-blue-40);
--wa-color-indigo-95: #f7efff;
--wa-color-indigo-90: #ede1ff;
--wa-color-indigo-80: #d3c0ff;
--wa-color-indigo-70: #baa1f9;
--wa-color-indigo-60: #9f86e0;
--wa-color-indigo-50: #7f67bd;
--wa-color-indigo-40: #624a9e;
--wa-color-indigo-30: #4e3589;
--wa-color-indigo-20: #3a2074;
--wa-color-indigo-10: #24045f;
--wa-color-indigo-05: #180044;
--wa-color-indigo-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
--wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
--wa-color-indigo-80: #d3c0ff /* oklch(84.487% 0.08877 298.31) */;
--wa-color-indigo-70: #baa1f9 /* oklch(76.409% 0.12586 296.37) */;
--wa-color-indigo-60: #9f86e0 /* oklch(67.937% 0.13169 295.47) */;
--wa-color-indigo-50: #7f67bd /* oklch(57.508% 0.13016 294.83) */;
--wa-color-indigo-40: #624a9e /* oklch(47.598% 0.13133 294.01) */;
--wa-color-indigo-30: #4e3589 /* oklch(40.435% 0.13395 293.19) */;
--wa-color-indigo-20: #3a2074 /* oklch(33.206% 0.1353 291.46) */;
--wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
--wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #ffedff;
--wa-color-violet-90: #fbdbff;
--wa-color-violet-80: #e2bde9;
--wa-color-violet-70: #c8a2d1;
--wa-color-violet-60: #af87b9;
--wa-color-violet-50: #8f679b;
--wa-color-violet-40: #714a7f;
--wa-color-violet-30: #5d366c;
--wa-color-violet-20: #492258;
--wa-color-violet-10: #310c40;
--wa-color-violet-05: #22042d;
--wa-color-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
--wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
--wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
--wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
--wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
--wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
--wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
--wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
--wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
--wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
--wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
--wa-color-violet: var(--wa-color-violet-40);
--wa-color-gray-95: #f4f3f4;
--wa-color-gray-90: #e7e5e8;
--wa-color-gray-80: #ccc8cd;
--wa-color-gray-70: #b2adb2;
--wa-color-gray-60: #979498;
--wa-color-gray-50: #777478;
--wa-color-gray-40: #5b585d;
--wa-color-gray-30: #464547;
--wa-color-gray-20: #333235;
--wa-color-gray-10: #1f1d22;
--wa-color-gray-05: #121214;
--wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
--wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
--wa-color-gray-80: #ccc8cd /* oklch(83.746% 0.00813 319.45) */;
--wa-color-gray-70: #b2adb2 /* oklch(75.325% 0.00901 325.67) */;
--wa-color-gray-60: #979498 /* oklch(67.032% 0.00675 317.75) */;
--wa-color-gray-50: #777478 /* oklch(56.292% 0.00705 317.74) */;
--wa-color-gray-40: #5b585d /* oklch(46.491% 0.0088 312.22) */;
--wa-color-gray-30: #464547 /* oklch(39.209% 0.00357 308.36) */;
--wa-color-gray-20: #333235 /* oklch(31.929% 0.00542 301.22) */;
--wa-color-gray-10: #1f1d22 /* oklch(23.51% 0.0099 303.74) */;
--wa-color-gray-05: #121214 /* oklch(18.309% 0.00404 285.99) */;
--wa-color-gray: var(--wa-color-gray-40);
}

184
src/styles/color/natural.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-natural {
--wa-color-red-95: #f9f0ee;
--wa-color-red-90: #f5e2dd;
--wa-color-red-80: #e8bfb5;
--wa-color-red-70: #dba294;
--wa-color-red-60: #c98373;
--wa-color-red-50: #ae6150;
--wa-color-red-40: #8c4434;
--wa-color-red-30: #713225;
--wa-color-red-20: #562318;
--wa-color-red-10: #36130b;
--wa-color-red-05: #240a05;
--wa-color-red-95: #f9f0ee /* oklch(96.159% 0.0101 32.516) */;
--wa-color-red-90: #f5e2dd /* oklch(92.669% 0.02202 35.121) */;
--wa-color-red-80: #e8bfb5 /* oklch(83.775% 0.0493 33.987) */;
--wa-color-red-70: #dba294 /* oklch(76.229% 0.07115 34.235) */;
--wa-color-red-60: #c98373 /* oklch(67.81% 0.09043 33.504) */;
--wa-color-red-50: #ae6150 /* oklch(57.709% 0.10386 33.445) */;
--wa-color-red-40: #8c4434 /* oklch(47.455% 0.10187 33.787) */;
--wa-color-red-30: #713225 /* oklch(40.002% 0.09248 33.14) */;
--wa-color-red-20: #562318 /* oklch(32.765% 0.07872 33.646) */;
--wa-color-red-10: #36130b /* oklch(23.996% 0.05851 34.254) */;
--wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #f5f0e8;
--wa-color-yellow-90: #ede4d5;
--wa-color-yellow-80: #dac6a4;
--wa-color-yellow-70: #c7ab7b;
--wa-color-yellow-60: #b29054;
--wa-color-yellow-50: #94702b;
--wa-color-yellow-40: #735310;
--wa-color-yellow-30: #5c4003;
--wa-color-yellow-20: #442f00;
--wa-color-yellow-10: #2a1b00;
--wa-color-yellow-05: #1b1000;
--wa-color-yellow-95: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
--wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
--wa-color-yellow-80: #dac6a4 /* oklch(83.455% 0.05079 80.939) */;
--wa-color-yellow-70: #c7ab7b /* oklch(75.433% 0.07174 80.723) */;
--wa-color-yellow-60: #b29054 /* oklch(67.181% 0.08832 80.564) */;
--wa-color-yellow-50: #94702b /* oklch(56.778% 0.09671 80.65) */;
--wa-color-yellow-40: #735310 /* oklch(46.47% 0.08924 80.445) */;
--wa-color-yellow-30: #5c4003 /* oklch(39.286% 0.07968 79.822) */;
--wa-color-yellow-20: #442f00 /* oklch(32.136% 0.06628 81.612) */;
--wa-color-yellow-10: #2a1b00 /* oklch(23.521% 0.04872 79.998) */;
--wa-color-yellow-05: #1b1000 /* oklch(18.327% 0.03796 79.944) */;
--wa-color-yellow: var(--wa-color-yellow-50);
--wa-color-green-95: #edf2ee;
--wa-color-green-90: #dde8df;
--wa-color-green-80: #b8cebc;
--wa-color-green-70: #98b79e;
--wa-color-green-60: #779e7f;
--wa-color-green-50: #53805d;
--wa-color-green-40: #366241;
--wa-color-green-30: #264d31;
--wa-color-green-20: #193922;
--wa-color-green-10: #0c2212;
--wa-color-green-05: #051509;
--wa-color-green-95: #edf2ee /* oklch(95.624% 0.00749 151.89) */;
--wa-color-green-90: #dde8df /* oklch(92.017% 0.01681 151.09) */;
--wa-color-green-80: #b8cebc /* oklch(82.98% 0.03436 150.75) */;
--wa-color-green-70: #98b79e /* oklch(74.921% 0.04904 150.76) */;
--wa-color-green-60: #779e7f /* oklch(66.161% 0.06262 150.64) */;
--wa-color-green-50: #53805d /* oklch(55.706% 0.07344 150.47) */;
--wa-color-green-40: #366241 /* oklch(45.446% 0.07294 150.68) */;
--wa-color-green-30: #264d31 /* oklch(38.285% 0.06543 151.38) */;
--wa-color-green-20: #193922 /* oklch(31.279% 0.05615 151.11) */;
--wa-color-green-10: #0c2212 /* oklch(22.839% 0.04191 150.74) */;
--wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
--wa-color-green: var(--wa-color-green-50);
--wa-color-teal-95: #eff3f4;
--wa-color-teal-90: #dee7e9;
--wa-color-teal-80: #b7cccf;
--wa-color-teal-70: #96b4b9;
--wa-color-teal-60: #759ba1;
--wa-color-teal-50: #4d7d84;
--wa-color-teal-40: #2b6067;
--wa-color-teal-30: #194c53;
--wa-color-teal-20: #0a383e;
--wa-color-teal-10: #022125;
--wa-color-teal-05: #011518;
--wa-color-teal-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
--wa-color-teal-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
--wa-color-teal-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
--wa-color-teal-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
--wa-color-teal-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
--wa-color-teal-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
--wa-color-teal-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
--wa-color-teal-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
--wa-color-teal-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
--wa-color-teal-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
--wa-color-teal-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
--wa-color-teal: var(--wa-color-teal-40);
--wa-color-blue-95: #eef1f5;
--wa-color-blue-90: #e1e6ef;
--wa-color-blue-80: #bdc9dc;
--wa-color-blue-70: #9fb0ca;
--wa-color-blue-60: #8196b8;
--wa-color-blue-50: #5f779e;
--wa-color-blue-40: #415981;
--wa-color-blue-30: #2f466a;
--wa-color-blue-20: #203351;
--wa-color-blue-10: #101e34;
--wa-color-blue-05: #081223;
--wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
--wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
--wa-color-blue-80: #bdc9dc /* oklch(83.261% 0.0297 259.59) */;
--wa-color-blue-70: #9fb0ca /* oklch(75.271% 0.04205 258.8) */;
--wa-color-blue-60: #8196b8 /* oklch(66.901% 0.05611 259.98) */;
--wa-color-blue-50: #5f779e /* oklch(56.593% 0.06705 259.94) */;
--wa-color-blue-40: #415981 /* oklch(46.262% 0.07185 260.29) */;
--wa-color-blue-30: #2f466a /* oklch(39.269% 0.06791 259.08) */;
--wa-color-blue-20: #203351 /* oklch(32.043% 0.05935 259.22) */;
--wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
--wa-color-blue-05: #081223 /* oklch(18.293% 0.03819 260.22) */;
--wa-color-blue: var(--wa-color-blue-40);
--wa-color-indigo-95: #f2f2f7;
--wa-color-indigo-90: #e6e5f1;
--wa-color-indigo-80: #c7c6df;
--wa-color-indigo-70: #aeabcf;
--wa-color-indigo-60: #9490bd;
--wa-color-indigo-50: #7670a3;
--wa-color-indigo-40: #595383;
--wa-color-indigo-30: #46406a;
--wa-color-indigo-20: #332e50;
--wa-color-indigo-10: #1e1a32;
--wa-color-indigo-05: #121021;
--wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
--wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
--wa-color-indigo-80: #c7c6df /* oklch(83.517% 0.03466 287.46) */;
--wa-color-indigo-70: #aeabcf /* oklch(75.572% 0.05131 288.93) */;
--wa-color-indigo-60: #9490bd /* oklch(67.3% 0.06608 288.56) */;
--wa-color-indigo-50: #7670a3 /* oklch(57.087% 0.07793 289.07) */;
--wa-color-indigo-40: #595383 /* oklch(46.888% 0.07683 288.8) */;
--wa-color-indigo-30: #46406a /* oklch(39.689% 0.06998 289.36) */;
--wa-color-indigo-20: #332e50 /* oklch(32.318% 0.05957 289.37) */;
--wa-color-indigo-10: #1e1a32 /* oklch(23.531% 0.04547 290.1) */;
--wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
--wa-color-indigo: var(--wa-color-indigo-50);
--wa-color-violet-95: #f4f1f6;
--wa-color-violet-90: #eae4ef;
--wa-color-violet-80: #d2c4dc;
--wa-color-violet-70: #bca8ca;
--wa-color-violet-60: #a48cb6;
--wa-color-violet-50: #876b9a;
--wa-color-violet-40: #694e7b;
--wa-color-violet-30: #543c64;
--wa-color-violet-20: #3e2b4b;
--wa-color-violet-10: #26182f;
--wa-color-violet-05: #180e1f;
--wa-color-violet-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
--wa-color-violet-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
--wa-color-violet-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
--wa-color-violet-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
--wa-color-violet-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
--wa-color-violet-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
--wa-color-violet-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
--wa-color-violet-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
--wa-color-violet-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
--wa-color-violet-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
--wa-color-violet-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
--wa-color-violet: var(--wa-color-violet-40);
--wa-color-gray-95: #f1f1f0;
--wa-color-gray-90: #e7e6e4;
--wa-color-gray-80: #cac8c3;
--wa-color-gray-70: #b2afa8;
--wa-color-gray-60: #98958c;
--wa-color-gray-50: #7a766a;
--wa-color-gray-40: #5c594f;
--wa-color-gray-30: #49453e;
--wa-color-gray-20: #35322d;
--wa-color-gray-10: #1f1d1a;
--wa-color-gray-05: #131210;
--wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
--wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
--wa-color-gray-80: #cac8c3 /* oklch(83.296% 0.00723 88.651) */;
--wa-color-gray-70: #b2afa8 /* oklch(75.445% 0.01044 87.487) */;
--wa-color-gray-60: #98958c /* oklch(66.972% 0.01348 91.575) */;
--wa-color-gray-50: #7a766a /* oklch(56.579% 0.01864 91.662) */;
--wa-color-gray-40: #5c594f /* oklch(46.366% 0.0162 93.155) */;
--wa-color-gray-30: #49453e /* oklch(39.205% 0.01273 81.754) */;
--wa-color-gray-20: #35322d /* oklch(31.85% 0.00968 80.663) */;
--wa-color-gray-10: #1f1d1a /* oklch(23.185% 0.00644 78.196) */;
--wa-color-gray-05: #131210 /* oklch(18.257% 0.00432 84.592) */;
--wa-color-gray: var(--wa-color-gray-50);
}

5
src/styles/color/palettes.js
View File

@@ -11,7 +11,9 @@ import { fileURLToPath } from 'url';
const __dirname = fileURLToPath(new URL('.', import.meta.url));
export const paletteFiles = fs.readdirSync(__dirname).filter(file => file.endsWith('.css'));
export const declarationRegex = /^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>[^;]+)\s*;$/gm;
export const declarationRegex =
/^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
export const rawCSS = {};
function parse(contents, file) {
// Regex for each declaration
@@ -54,6 +56,7 @@ const palettes = {};
for (let file of paletteFiles) {
let css = fs.readFileSync(path.join(__dirname, file), 'utf8');
rawCSS[file] = css;
let tokens = parse(css, file);
let paletteId = file.replace(/\.css$/, '');

184
src/styles/color/rudimentary.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-rudimentary {
--wa-color-red-95: #ffeeee;
--wa-color-red-90: #ffdddd;
--wa-color-red-80: #ffb6b8;
--wa-color-red-70: #fb9191;
--wa-color-red-60: #f16b5e;
--wa-color-red-50: #da3c06;
--wa-color-red-40: #a62c00;
--wa-color-red-30: #812500;
--wa-color-red-20: #601a00;
--wa-color-red-10: #3d0d00;
--wa-color-red-05: #290600;
--wa-color-red-95: #fee /* oklch(96.257% 0.01846 17.478) */;
--wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
--wa-color-red-80: #ffb6b8 /* oklch(84.502% 0.08518 17.203) */;
--wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
--wa-color-red-60: #f16b5e /* oklch(68.899% 0.16784 27.833) */;
--wa-color-red-50: #da3c06 /* oklch(58.891% 0.20155 35.469) */;
--wa-color-red-40: #a62c00 /* oklch(48.117% 0.16441 36.104) */;
--wa-color-red-30: #812500 /* oklch(40.578% 0.1326 38.082) */;
--wa-color-red-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
--wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
--wa-color-red-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fff497;
--wa-color-yellow-90: #ffe571;
--wa-color-yellow-80: #ffbd31;
--wa-color-yellow-70: #f09d27;
--wa-color-yellow-60: #d67f31;
--wa-color-yellow-50: #b1612d;
--wa-color-yellow-40: #8b4527;
--wa-color-yellow-30: #703422;
--wa-color-yellow-20: #53251c;
--wa-color-yellow-10: #311613;
--wa-color-yellow-05: #1f0d0b;
--wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
--wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
--wa-color-yellow-80: #ffbd31 /* oklch(83.787% 0.16061 80.808) */;
--wa-color-yellow-70: #f09d27 /* oklch(76.177% 0.15513 69.241) */;
--wa-color-yellow-60: #d67f31 /* oklch(67.745% 0.13973 58.256) */;
--wa-color-yellow-50: #b1612d /* oklch(57.606% 0.12242 50.859) */;
--wa-color-yellow-40: #8b4527 /* oklch(47.274% 0.1046 42.804) */;
--wa-color-yellow-30: #703422 /* oklch(40.129% 0.09009 37.442) */;
--wa-color-yellow-20: #53251c /* oklch(32.68% 0.071 32.488) */;
--wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
--wa-color-yellow-05: #1f0d0b /* oklch(18.561% 0.0315 27.209) */;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-green-95: #dafadc;
--wa-color-green-90: #b9f4bc;
--wa-color-green-80: #64e177;
--wa-color-green-70: #2ec859;
--wa-color-green-60: #00ac4a;
--wa-color-green-50: #008840;
--wa-color-green-40: #006734;
--wa-color-green-30: #005128;
--wa-color-green-20: #003b1c;
--wa-color-green-10: #00230e;
--wa-color-green-05: #001607;
--wa-color-green-95: #dafadc /* oklch(95.411% 0.05194 146.87) */;
--wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
--wa-color-green-80: #64e177 /* oklch(81.419% 0.18348 146.66) */;
--wa-color-green-70: #2ec859 /* oklch(73.18% 0.19719 147.79) */;
--wa-color-green-60: #00ac4a /* oklch(64.995% 0.18331 149.02) */;
--wa-color-green-50: #008840 /* oklch(54.827% 0.14802 150.85) */;
--wa-color-green-40: #006734 /* oklch(45.037% 0.11628 152.87) */;
--wa-color-green-30: #005128 /* oklch(38.134% 0.09801 153.08) */;
--wa-color-green-20: #003b1c /* oklch(30.9% 0.07883 153.44) */;
--wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
--wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
--wa-color-green: var(--wa-color-green-70);
--wa-color-teal-95: #d1f9f1;
--wa-color-teal-90: #a9f4e6;
--wa-color-teal-80: #56ddcd;
--wa-color-teal-70: #29c2ba;
--wa-color-teal-60: #11a5a8;
--wa-color-teal-50: #06828e;
--wa-color-teal-40: #006271;
--wa-color-teal-30: #004d5a;
--wa-color-teal-20: #003843;
--wa-color-teal-10: #002129;
--wa-color-teal-05: #00151b;
--wa-color-teal-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
--wa-color-teal-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
--wa-color-teal-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
--wa-color-teal-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
--wa-color-teal-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
--wa-color-teal-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
--wa-color-teal-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
--wa-color-teal-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
--wa-color-teal-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
--wa-color-teal-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
--wa-color-teal-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
--wa-color-teal: var(--wa-color-teal-70);
--wa-color-blue-95: #e1f4ff;
--wa-color-blue-90: #caebff;
--wa-color-blue-80: #87d1ff;
--wa-color-blue-70: #4cb8ff;
--wa-color-blue-60: #0099ff;
--wa-color-blue-50: #0072ed;
--wa-color-blue-40: #0053be;
--wa-color-blue-30: #00409b;
--wa-color-blue-20: #002e76;
--wa-color-blue-10: #001a4e;
--wa-color-blue-05: #000f36;
--wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
--wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
--wa-color-blue-80: #87d1ff /* oklch(82.911% 0.09817 236.93) */;
--wa-color-blue-70: #4cb8ff /* oklch(75.061% 0.14167 241.25) */;
--wa-color-blue-60: #09f /* oklch(66.905% 0.18368 248.81) */;
--wa-color-blue-50: #0072ed /* oklch(57.257% 0.20469 257.18) */;
--wa-color-blue-40: #0053be /* oklch(47.006% 0.18201 258.98) */;
--wa-color-blue-30: #00409b /* oklch(39.927% 0.15956 259.61) */;
--wa-color-blue-20: #002e76 /* oklch(32.56% 0.13217 259.91) */;
--wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
--wa-color-blue-05: #000f36 /* oklch(18.68% 0.08063 260.98) */;
--wa-color-blue: var(--wa-color-blue-50);
--wa-color-indigo-95: #f1efff;
--wa-color-indigo-90: #e7e3ff;
--wa-color-indigo-80: #cbc1ff;
--wa-color-indigo-70: #b3a3ff;
--wa-color-indigo-60: #9b81ff;
--wa-color-indigo-50: #7f56f9;
--wa-color-indigo-40: #6427e7;
--wa-color-indigo-30: #5102ca;
--wa-color-indigo-20: #3a009b;
--wa-color-indigo-10: #220064;
--wa-color-indigo-05: #160046;
--wa-color-indigo-95: #f1efff /* oklch(95.834% 0.02142 291.74) */;
--wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
--wa-color-indigo-80: #cbc1ff /* oklch(84.027% 0.08632 291.82) */;
--wa-color-indigo-70: #b3a3ff /* oklch(76.472% 0.13034 290.97) */;
--wa-color-indigo-60: #9b81ff /* oklch(68.426% 0.17995 290.32) */;
--wa-color-indigo-50: #7f56f9 /* oklch(58.841% 0.22979 288.88) */;
--wa-color-indigo-40: #6427e7 /* oklch(49.439% 0.25627 286.93) */;
--wa-color-indigo-30: #5102ca /* oklch(42.528% 0.24562 286.08) */;
--wa-color-indigo-20: #3a009b /* oklch(34.649% 0.20256 284.92) */;
--wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
--wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #f8edfd;
--wa-color-violet-90: #f2e0fc;
--wa-color-violet-80: #e3baf6;
--wa-color-violet-70: #d498f1;
--wa-color-violet-60: #c76ff2;
--wa-color-violet-50: #ac44dc;
--wa-color-violet-40: #862dad;
--wa-color-violet-30: #6b218a;
--wa-color-violet-20: #4f1568;
--wa-color-violet-10: #310a42;
--wa-color-violet-05: #20052d;
--wa-color-violet-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
--wa-color-violet-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
--wa-color-violet-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
--wa-color-violet-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
--wa-color-violet-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
--wa-color-violet-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
--wa-color-violet-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
--wa-color-violet-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
--wa-color-violet-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
--wa-color-violet-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
--wa-color-violet-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f2f2f2;
--wa-color-gray-90: #e6e6e6;
--wa-color-gray-80: #c9c9c9;
--wa-color-gray-70: #afafaf;
--wa-color-gray-60: #959595;
--wa-color-gray-50: #747474;
--wa-color-gray-40: #585858;
--wa-color-gray-30: #454545;
--wa-color-gray-20: #313131;
--wa-color-gray-10: #1d1d1d;
--wa-color-gray-05: #131313;
--wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
--wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
--wa-color-gray-80: #c9c9c9 /* oklch(83.591% 0 none) */;
--wa-color-gray-70: #afafaf /* oklch(75.402% 0 none) */;
--wa-color-gray-60: #959595 /* oklch(66.984% 0 none) */;
--wa-color-gray-50: #747474 /* oklch(55.897% 0 none) */;
--wa-color-gray-40: #585858 /* oklch(46.04% 0 none) */;
--wa-color-gray-30: #454545 /* oklch(39.042% 0 none) */;
--wa-color-gray-20: #313131 /* oklch(31.317% 0 none) */;
--wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
--wa-color-gray-05: #131313 /* oklch(18.674% 0 none) */;
--wa-color-gray: var(--wa-color-gray-60);
}

152
src/styles/color/tintless.js Normal file
View File

@@ -0,0 +1,152 @@
/**
* Add tintless variables and OKLCH coords as comments to palette CSS files.
* Run via node tintless.js
* Warning: Will overwrite existing files. Check the diff before committing!
*/
import chalk from 'chalk';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import palettes from './palettes.js';
const __dirname = fileURLToPath(new URL('.', import.meta.url));
const selector = paletteId =>
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
',\n',
);
// Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
const defaultAccent = 60;
// Chroma tolerance: Chroma will need to differ more than this to gravitate away from defaultAccent
const chromaTolerance = 0.000001;
// Min and max allowed tints
const minAccentTint = 40;
const maxAccentTint = 90;
// Used for formatting warnings
const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
let issueCount = 0;
let issuePaletteCount = 0;
for (let paletteId in palettes) {
const tokens = palettes[paletteId];
let css = '';
let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
for (let hue in tokens) {
let tints = tokens[hue];
let maxChromaTint = defaultAccent;
let maxChroma = tints[defaultAccent].get('oklch.c');
let tintCSS = '';
for (let tint in tints) {
if (tint === '05') {
// The object has both '5' and '05' keys, but '05' is out of order
continue;
}
let color = tints[tint];
let lchColor = color.to('oklch');
tint = tint.padStart(2, '0');
if (lchColor.c > maxChroma + chromaTolerance) {
maxChroma = lchColor.c;
maxChromaTint = tint;
}
let lchComment = `/* ${lchColor.toString()} */`;
tintCSS = `--wa-color-${hue}-${tint}: ${color} ${lchComment};\n` + tintCSS;
}
if (maxChromaTint < minAccentTint || maxChromaTint > maxAccentTint) {
let fakeMaxChromaTint = clamp(minAccentTint, maxChromaTint, maxAccentTint);
let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
console.warn(
`${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(fakeMaxChromaTint)}, but peak chroma is in ${chalk.bold(maxChromaTint)} (${formatComparison(tints[maxChromaTint].get('oklch.c'), tints[fakeMaxChromaTint].get('oklch.c'))})`,
);
issueCount++;
maxChromaTint = fakeMaxChromaTint;
if (prefix.trim()) {
// First time encountering an issue with this palette
issuePaletteCount++;
// Don't print palette id multiple times
prefix = ' '.repeat(paletteIdMaxChars + 2);
}
}
tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${maxChromaTint});\n`;
css += tintCSS + '\n';
}
let indent = ' ';
css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
fs.writeFileSync(path.join(__dirname, paletteId + '.css'), css, 'utf8');
}
console.info(
`🎨 Wrote ${Object.keys(palettes).length} palette files.` +
(issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
);
function clamp(min, value, max) {
return Math.min(Math.max(min, value), max);
}
/**
* Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
* @param {number} a
* @param {number} b
* @returns {string}
*/
function formatComparison(a, b) {
let op = a < b ? '<' : '>';
for (let i = 1; i < 10; i++) {
let roundedA = a.toPrecision(i);
let roundedB = b.toPrecision(i);
if (roundedA !== roundedB) {
return `${roundedA} ${op} ${roundedB}`;
}
}
return `${a} ${op} ${b}`;
}
function hueToChalk(hue) {
let ret;
if (hue in chalk) {
ret = chalk[hue];
}
switch (hue) {
case 'teal':
ret = chalk.cyan;
break;
case 'indigo':
ret = chalk.hex('#8a8beb');
break;
case 'violet':
ret = chalk.hex('#a94dc6');
break;
}
if (ret) {
return ret.bold;
}
return chalk.bold;
}

184
src/styles/color/vogue.css
View File

@@ -2,99 +2,107 @@
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-palette-vogue {
--wa-color-red-95: #feeeee;
--wa-color-red-90: #fedddd;
--wa-color-red-80: #fdb8b8;
--wa-color-red-70: #fb9191;
--wa-color-red-60: #f66565;
--wa-color-red-50: #e12b2b;
--wa-color-red-40: #af1b1b;
--wa-color-red-30: #851e1e;
--wa-color-red-20: #641414;
--wa-color-red-10: #400809;
--wa-color-red-05: #2b0404;
--wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
--wa-color-red-90: #fedddd /* oklch(92.486% 0.03666 17.834) */;
--wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
--wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
--wa-color-red-60: #f66565 /* oklch(68.965% 0.17872 22.978) */;
--wa-color-red-50: #e12b2b /* oklch(58.974% 0.21613 27.031) */;
--wa-color-red-40: #af1b1b /* oklch(48.576% 0.18205 27.417) */;
--wa-color-red-30: #851e1e /* oklch(40.835% 0.13843 25.838) */;
--wa-color-red-20: #641414 /* oklch(33.307% 0.11308 25.859) */;
--wa-color-red-10: #400809 /* oklch(24.44% 0.08486 25.315) */;
--wa-color-red-05: #2b0404 /* oklch(19.055% 0.06569 26.078) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-yellow-95: #fef6ab;
--wa-color-yellow-90: #ffe759;
--wa-color-yellow-80: #f3c41a;
--wa-color-yellow-70: #e0a502;
--wa-color-yellow-60: #c88804;
--wa-color-yellow-50: #a76706;
--wa-color-yellow-40: #834b0f;
--wa-color-yellow-30: #693910;
--wa-color-yellow-20: #502809;
--wa-color-yellow-10: #311704;
--wa-color-yellow-05: #1f0e02;
--wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
--wa-color-yellow-90: #ffe759 /* oklch(92.242% 0.15928 99.624) */;
--wa-color-yellow-80: #f3c41a /* oklch(83.803% 0.16708 90.67) */;
--wa-color-yellow-70: #e0a502 /* oklch(75.733% 0.15552 82.666) */;
--wa-color-yellow-60: #c88804 /* oklch(67.447% 0.14121 75.44) */;
--wa-color-yellow-50: #a76706 /* oklch(57.104% 0.124 67.484) */;
--wa-color-yellow-40: #834b0f /* oklch(46.963% 0.10211 60.864) */;
--wa-color-yellow-30: #693910 /* oklch(39.742% 0.08578 56.326) */;
--wa-color-yellow-20: #502809 /* oklch(32.489% 0.07269 53.649) */;
--wa-color-yellow-10: #311704 /* oklch(23.775% 0.05173 54.627) */;
--wa-color-yellow-05: #1f0e02 /* oklch(18.545% 0.03815 59.032) */;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-green-95: #d6fbe3;
--wa-color-green-90: #acf5c6;
--wa-color-green-80: #58e38b;
--wa-color-green-70: #25c861;
--wa-color-green-60: #17ab4e;
--wa-color-green-50: #158740;
--wa-color-green-40: #166635;
--wa-color-green-30: #13502b;
--wa-color-green-20: #093a1d;
--wa-color-green-10: #032311;
--wa-color-green-05: #02160a;
--wa-color-green-95: #d6fbe3 /* oklch(95.529% 0.04989 156.89) */;
--wa-color-green-90: #acf5c6 /* oklch(90.962% 0.09709 155.72) */;
--wa-color-green-80: #58e38b /* oklch(81.864% 0.17318 152.51) */;
--wa-color-green-70: #25c861 /* oklch(73.149% 0.19247 149.75) */;
--wa-color-green-60: #17ab4e /* oklch(64.955% 0.17611 149.25) */;
--wa-color-green-50: #158740 /* oklch(54.761% 0.14352 149.99) */;
--wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
--wa-color-green-30: #13502b /* oklch(38.277% 0.08756 152.42) */;
--wa-color-green-20: #093a1d /* oklch(30.848% 0.07243 152.47) */;
--wa-color-green-10: #032311 /* oklch(22.69% 0.05156 154.92) */;
--wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
--wa-color-green: var(--wa-color-green-70);
--wa-color-teal-95: #d1fbf2;
--wa-color-teal-90: #9bf6e4;
--wa-color-teal-80: #43e0ca;
--wa-color-teal-70: #1ac4b0;
--wa-color-teal-60: #0ea798;
--wa-color-teal-50: #0e837a;
--wa-color-teal-40: #11635e;
--wa-color-teal-30: #134d49;
--wa-color-teal-20: #073938;
--wa-color-teal-10: #022222;
--wa-color-teal-05: #011515;
--wa-color-teal-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
--wa-color-teal-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
--wa-color-teal-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
--wa-color-teal-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
--wa-color-teal-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
--wa-color-teal-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
--wa-color-teal-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
--wa-color-teal-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
--wa-color-teal-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
--wa-color-teal-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
--wa-color-teal-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
--wa-color-teal: var(--wa-color-teal-80);
--wa-color-blue-95: #ebf3ff;
--wa-color-blue-90: #d6e7fe;
--wa-color-blue-80: #a4cefe;
--wa-color-blue-70: #73b2fb;
--wa-color-blue-60: #4d95f9;
--wa-color-blue-50: #2b6df0;
--wa-color-blue-40: #1d4bd3;
--wa-color-blue-30: #1e3d9c;
--wa-color-blue-20: #1c2e69;
--wa-color-blue-10: #101b41;
--wa-color-blue-05: #09102c;
--wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
--wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
--wa-color-blue-80: #a4cefe /* oklch(83.833% 0.08104 252.13) */;
--wa-color-blue-70: #73b2fb /* oklch(75.087% 0.12447 253.02) */;
--wa-color-blue-60: #4d95f9 /* oklch(67.127% 0.16539 257.15) */;
--wa-color-blue-50: #2b6df0 /* oklch(57.128% 0.2086 262.06) */;
--wa-color-blue-40: #1d4bd3 /* oklch(47.813% 0.21434 264.65) */;
--wa-color-blue-30: #1e3d9c /* oklch(40.115% 0.15907 265.62) */;
--wa-color-blue-20: #1c2e69 /* oklch(32.363% 0.10583 267.39) */;
--wa-color-blue-10: #101b41 /* oklch(23.741% 0.07371 268.19) */;
--wa-color-blue-05: #09102c /* oklch(18.584% 0.05736 269.49) */;
--wa-color-blue: var(--wa-color-blue-40);
--wa-color-indigo-95: #eef2ff;
--wa-color-indigo-90: #dde5ff;
--wa-color-indigo-80: #bbc8fd;
--wa-color-indigo-70: #9caafb;
--wa-color-indigo-60: #818bf8;
--wa-color-indigo-50: #6164f0;
--wa-color-indigo-40: #493fd8;
--wa-color-indigo-30: #3932aa;
--wa-color-indigo-20: #2b2871;
--wa-color-indigo-10: #1b1842;
--wa-color-indigo-05: #100f29;
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
--wa-color-indigo-90: #dde5ff /* oklch(92.379% 0.03641 272.07) */;
--wa-color-indigo-80: #bbc8fd /* oklch(84.101% 0.07567 273.94) */;
--wa-color-indigo-70: #9caafb /* oklch(75.877% 0.11749 275.74) */;
--wa-color-indigo-60: #818bf8 /* oklch(67.82% 0.15961 277.29) */;
--wa-color-indigo-50: #6164f0 /* oklch(57.986% 0.20564 276.94) */;
--wa-color-indigo-40: #493fd8 /* oklch(48.428% 0.22298 276.96) */;
--wa-color-indigo-30: #3932aa /* oklch(40.976% 0.18359 277.14) */;
--wa-color-indigo-20: #2b2871 /* oklch(32.847% 0.12194 279.13) */;
--wa-color-indigo-10: #1b1842 /* oklch(24.014% 0.0769 282.14) */;
--wa-color-indigo-05: #100f29 /* oklch(18.672% 0.05145 281.93) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-violet-95: #f7efff;
--wa-color-violet-90: #efe0ff;
--wa-color-violet-80: #dcbdfe;
--wa-color-violet-70: #cb99fd;
--wa-color-violet-60: #b875fb;
--wa-color-violet-50: #9e44f3;
--wa-color-violet-40: #7e22cd;
--wa-color-violet-30: #63209a;
--wa-color-violet-20: #4b1079;
--wa-color-violet-10: #2f0451;
--wa-color-violet-05: #1e0238;
--wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
--wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
--wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
--wa-color-violet-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
--wa-color-violet-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
--wa-color-violet-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
--wa-color-violet-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
--wa-color-violet-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
--wa-color-violet-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
--wa-color-violet-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
--wa-color-violet-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
--wa-color-violet: var(--wa-color-violet-50);
--wa-color-gray-95: #f1f2f4;
--wa-color-gray-90: #e3e5e9;
--wa-color-gray-80: #c5cad1;
--wa-color-gray-70: #a9afba;
--wa-color-gray-60: #8e95a2;
--wa-color-gray-50: #6e7583;
--wa-color-gray-40: #505968;
--wa-color-gray-30: #3c4656;
--wa-color-gray-20: #293342;
--wa-color-gray-10: #161e2d;
--wa-color-gray-05: #0c1220;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
--wa-color-gray-80: #c5cad1 /* oklch(83.72% 0.01119 256.7) */;
--wa-color-gray-70: #a9afba /* oklch(75.266% 0.01714 262.74) */;
--wa-color-gray-60: #8e95a2 /* oklch(66.836% 0.02085 262.97) */;
--wa-color-gray-50: #6e7583 /* oklch(56.134% 0.02325 264.37) */;
--wa-color-gray-40: #505968 /* oklch(46.179% 0.02697 260.65) */;
--wa-color-gray-30: #3c4656 /* oklch(39.174% 0.03024 259.75) */;
--wa-color-gray-20: #293342 /* oklch(31.849% 0.03023 258.34) */;
--wa-color-gray-10: #161e2d /* oklch(23.484% 0.03142 262.56) */;
--wa-color-gray-05: #0c1220 /* oklch(18.396% 0.03036 265.82) */;
--wa-color-gray: var(--wa-color-gray-40);
}