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

Add accent color tint as separate variable (#725)

Browse Source 
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Lea Verou
2025-02-06 18:30:43 -05:00
committed by GitHub
parent 97ab986425
commit 7e8f13b5cb
15 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/brand/blue.css
View File

@@ -14,4 +14,5 @@
--wa-color-brand-10: var(--wa-color-blue-10);
--wa-color-brand-05: var(--wa-color-blue-05);
--wa-color-brand: var(--wa-color-blue);
--wa-color-brand-key: var(--wa-color-blue-key);
}

1
src/styles/brand/cyan.css
View File

@@ -14,4 +14,5 @@
--wa-color-brand-10: var(--wa-color-cyan-10);
--wa-color-brand-05: var(--wa-color-cyan-05);
--wa-color-brand: var(--wa-color-cyan);
--wa-color-brand-key: var(--wa-color-cyan-key);
}

1
src/styles/brand/green.css
View File

@@ -14,4 +14,5 @@
--wa-color-brand-10: var(--wa-color-green-10);
--wa-color-brand-05: var(--wa-color-green-05);
--wa-color-brand: var(--wa-color-green);
--wa-color-brand-key: var(--wa-color-green-key);
}

1
src/styles/brand/indigo.css
View File

@@ -14,4 +14,5 @@
--wa-color-brand-10: var(--wa-color-indigo-10);
--wa-color-brand-05: var(--wa-color-indigo-05);
--wa-color-brand: var(--wa-color-indigo);
--wa-color-brand-key: var(--wa-color-indigo-key);
}

1
src/styles/brand/purple.css
View File

@@ -14,4 +14,5 @@
--wa-color-brand-10: var(--wa-color-purple-10);
--wa-color-brand-05: var(--wa-color-purple-05);
--wa-color-brand: var(--wa-color-purple);
--wa-color-brand-key: var(--wa-color-purple-key);
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
--wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 90;
--wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
--wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
@@ -40,6 +42,7 @@
--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-green-key: 60;
--wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
--wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
--wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
--wa-color-cyan: var(--wa-color-cyan-80);
--wa-color-cyan-key: 80;
--wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
@@ -66,6 +70,7 @@
--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-blue-key: 60;
--wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
--wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 50;
--wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
--wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
--wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
--wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 60;
--wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
--wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
@@ -40,6 +42,7 @@
--wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
--wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
--wa-color-green: var(--wa-color-green-70);
--wa-color-green-key: 70;
--wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
--wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
--wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
--wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
@@ -66,6 +70,7 @@
--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-blue-key: 60;
--wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
--wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 50;
--wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
--wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
--wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
--wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
--wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
@@ -27,6 +28,7 @@
--wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
--wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
--wa-color-yellow: var(--wa-color-yellow-60);
--wa-color-yellow-key: 60;
--wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
--wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
@@ -40,6 +42,7 @@
--wa-color-green-10: #04230f /* oklch(22.692% 0.05324 151.92) */;
--wa-color-green-05: #021608 /* oklch(17.756% 0.04076 152.68) */;
--wa-color-green: var(--wa-color-green-60);
--wa-color-green-key: 60;
--wa-color-cyan-95: #d8fafc /* oklch(96.149% 0.03524 200.93) */;
--wa-color-cyan-90: #a3f2f7 /* oklch(91.187% 0.07744 200.93) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #002127 /* oklch(22.739% 0.03961 211.94) */;
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #e2f6ff /* oklch(96.112% 0.0243 226.47) */;
--wa-color-blue-90: #c0ecff /* oklch(91.822% 0.0523 226) */;
@@ -66,6 +70,7 @@
--wa-color-blue-10: #001f36 /* oklch(23.093% 0.05763 244.59) */;
--wa-color-blue-05: #001325 /* oklch(18.113% 0.04675 246.17) */;
--wa-color-blue: var(--wa-color-blue-60);
--wa-color-blue-key: 60;
--wa-color-indigo-95: #eff2ff /* oklch(96.265% 0.01769 275.64) */;
--wa-color-indigo-90: #e0e5ff /* oklch(92.602% 0.03569 277.03) */;
@@ -79,6 +84,7 @@
--wa-color-indigo-10: #191748 /* oklch(24.174% 0.08853 279.28) */;
--wa-color-indigo-05: #0e0d31 /* oklch(18.772% 0.06933 278.6) */;
--wa-color-indigo: var(--wa-color-indigo-40);
--wa-color-indigo-key: 40;
--wa-color-purple-95: #f6f0ff /* oklch(96.412% 0.02086 304.04) */;
--wa-color-purple-90: #eee0ff /* oklch(92.72% 0.04406 305.89) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #2e094b /* oklch(24.855% 0.11212 304.52) */;
--wa-color-purple-05: #1e0433 /* oklch(19.319% 0.0877 304.85) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
--wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 70;
--wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
--wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
@@ -40,6 +42,7 @@
--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-green-key: 60;
--wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
--wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
--wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
--wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
@@ -66,6 +70,7 @@
--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-blue-key: 50;
--wa-color-indigo-95: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
--wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 40;
--wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
--wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
--wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
--wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 40;
--wa-color-yellow-95: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
--wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 60;
--wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
--wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
@@ -40,6 +42,7 @@
--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-green-key: 40;
--wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
--wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
--wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
--wa-color-cyan: var(--wa-color-cyan-50);
--wa-color-cyan-key: 50;
--wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
--wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
@@ -66,6 +70,7 @@
--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-blue-key: 50;
--wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
--wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 40;
--wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
--wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
--wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
--wa-color-purple: var(--wa-color-purple-40);
--wa-color-purple-key: 40;
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
--wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 40;
--wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
--wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 80;
--wa-color-green-95: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
--wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
@@ -40,6 +42,7 @@
--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-green-key: 80;
--wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
--wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
--wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
--wa-color-cyan: var(--wa-color-cyan-40);
--wa-color-cyan-key: 40;
--wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
--wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
@@ -66,6 +70,7 @@
--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-blue-key: 40;
--wa-color-indigo-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
--wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 40;
--wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
--wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
--wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
--wa-color-purple: var(--wa-color-purple-40);
--wa-color-purple-key: 40;
--wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
--wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
--wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 50;
--wa-color-green-95: #edf2ee /* oklch(95.624% 0.00749 151.89) */;
--wa-color-green-90: #dde8df /* oklch(92.017% 0.01681 151.09) */;
@@ -40,6 +42,7 @@
--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-green-key: 50;
--wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
--wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
--wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
--wa-color-cyan: var(--wa-color-cyan-40);
--wa-color-cyan-key: 40;
--wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
--wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
@@ -66,6 +70,7 @@
--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-blue-key: 40;
--wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
--wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 50;
--wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
--wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
--wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
--wa-color-purple: var(--wa-color-purple-40);
--wa-color-purple-key: 40;
--wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
--wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 50;
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
--wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 80;
--wa-color-green-95: #dafadc /* oklch(95.411% 0.05194 146.87) */;
--wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
@@ -40,6 +42,7 @@
--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-green-key: 70;
--wa-color-cyan-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
--wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
--wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
@@ -66,6 +70,7 @@
--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-blue-key: 50;
--wa-color-indigo-95: #f1efff /* oklch(95.834% 0.02142 291.74) */;
--wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 40;
--wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
--wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
--wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
--wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 60;
}

1
src/styles/color/tintless.js
View File

@@ -73,6 +73,7 @@ for (let paletteId in palettes) {
}
tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
css += tintCSS + '\n';
}

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

@@ -14,6 +14,7 @@
--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-red-key: 50;
--wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
--wa-color-yellow-90: #ffe759 /* oklch(92.242% 0.15928 99.624) */;
@@ -27,6 +28,7 @@
--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-yellow-key: 80;
--wa-color-green-95: #d6fbe3 /* oklch(95.529% 0.04989 156.89) */;
--wa-color-green-90: #acf5c6 /* oklch(90.962% 0.09709 155.72) */;
@@ -40,6 +42,7 @@
--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-green-key: 70;
--wa-color-cyan-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
--wa-color-cyan-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
@@ -53,6 +56,7 @@
--wa-color-cyan-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
--wa-color-cyan-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
--wa-color-cyan: var(--wa-color-cyan-80);
--wa-color-cyan-key: 80;
--wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
--wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
@@ -66,6 +70,7 @@
--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-blue-key: 40;
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
--wa-color-indigo-90: #dde5ff /* oklch(92.379% 0.03641 272.07) */;
@@ -79,6 +84,7 @@
--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-indigo-key: 40;
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
--wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
@@ -92,6 +98,7 @@
--wa-color-purple-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
--wa-color-purple-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
--wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
@@ -105,4 +112,5 @@
--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);
--wa-color-gray-key: 40;
}