Tintless color variables

(definition only for now)

src/styles/color/anodized.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #562317;
   --wa-color-red-10: #36130a;
   --wa-color-red-05: #240a05;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff2b8;
   --wa-color-yellow-90: #ffe578;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #482b21;
   --wa-color-yellow-10: #2c1912;
   --wa-color-yellow-05: #1d0e0a;
+  --wa-color-yellow: var(--wa-color-yellow-90);
 
   --wa-color-green-95: #dcf8ea;
   --wa-color-green-90: #bcf1d8;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003a2d;
   --wa-color-green-10: #00231b;
   --wa-color-green-05: #001610;
+  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #cbfaf9;
   --wa-color-teal-90: #9ff4f3;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #083936;
   --wa-color-teal-10: #04221f;
   --wa-color-teal-05: #021513;
+  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ecf3ff;
   --wa-color-blue-90: #d9e7ff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #1b325b;
   --wa-color-blue-10: #101d35;
   --wa-color-blue-05: #0a1222;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #f5efff;
   --wa-color-indigo-90: #ede0ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #381d7f;
   --wa-color-indigo-10: #210e53;
   --wa-color-indigo-05: #150739;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #fbedfd;
   --wa-color-violet-90: #f7defa;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #561658;
   --wa-color-violet-10: #340d36;
   --wa-color-violet-05: #210822;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e2e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #18354a;
   --wa-color-gray-10: #012034;
   --wa-color-gray-05: #001421;
+  --wa-color-gray: var(--wa-color-gray-10);
 }

src/styles/color/bright.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #6d0000;
   --wa-color-red-10: #450000;
   --wa-color-red-05: #300000;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef3c1;
   --wa-color-yellow-90: #fee682;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #532600;
   --wa-color-yellow-10: #341500;
   --wa-color-yellow-05: #220c00;
+  --wa-color-yellow: var(--wa-color-yellow-60);
 
   --wa-color-green-95: #e0fae4;
   --wa-color-green-90: #baf4c2;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #123a1a;
   --wa-color-green-10: #0b2210;
   --wa-color-green-05: #07150a;
+  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #cafae6;
   --wa-color-teal-90: #aaf3d7;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #00483d;
   --wa-color-teal-10: #00312b;
   --wa-color-teal-05: #001613;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e7f5ff;
   --wa-color-blue-90: #ceeaff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #0d3459;
   --wa-color-blue-10: #071f35;
   --wa-color-blue-05: #051321;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #edf2ff;
   --wa-color-indigo-90: #dce5ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #1e2c70;
   --wa-color-indigo-10: #121a43;
   --wa-color-indigo-05: #0b102a;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f3f0ff;
   --wa-color-violet-90: #eae2ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #372372;
   --wa-color-violet-10: #211544;
   --wa-color-violet-05: #150d2a;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5ea;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #1a3356;
   --wa-color-gray-10: #0e1e35;
   --wa-color-gray-05: #081220;
+  --wa-color-gray: var(--wa-color-gray-20);
 }

src/styles/color/classic.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #631111;
   --wa-color-red-10: #3b0d0d;
   --wa-color-red-05: #260606;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef2c4;
   --wa-color-yellow-90: #fde494;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #532408;
   --wa-color-yellow-10: #321606;
   --wa-color-yellow-05: #1f0c01;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #e9f5ed;
   --wa-color-green-90: #cfedd9;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #0c391d;
   --wa-color-green-10: #082213;
   --wa-color-green-05: #02140a;
+  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #d0fbf3;
   --wa-color-teal-90: #a9f4e8;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #0a3835;
   --wa-color-teal-10: #082120;
   --wa-color-teal-05: #021413;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e5f4fe;
   --wa-color-blue-90: #c8ebfd;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #04354f;
   --wa-color-blue-10: #05202f;
   --wa-color-blue-05: #04121b;
+  --wa-color-blue: var(--wa-color-blue-60);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dee5fd;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #29247a;
   --wa-color-indigo-10: #191843;
   --wa-color-indigo-05: #0f0e26;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #48176e;
   --wa-color-violet-10: #2e054e;
   --wa-color-violet-05: #1d0331;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e5e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #313134;
   --wa-color-gray-10: #1d1d20;
   --wa-color-gray-05: #101113;
+  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/default.css

@@ -19,6 +19,7 @@
   --wa-color-red-20: #641122;
   --wa-color-red-10: #400712;
   --wa-color-red-05: #2a030a;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fdf3ba;
   --wa-color-yellow-90: #fee590;
@@ -31,6 +32,7 @@
   --wa-color-yellow-20: #572300;
   --wa-color-yellow-10: #361300;
   --wa-color-yellow-05: #240b00;
+  --wa-color-yellow: var(--wa-color-yellow-70);
 
   --wa-color-green-95: #e2f9e2;
   --wa-color-green-90: #c2f2c1;
@@ -43,6 +45,7 @@
   --wa-color-green-20: #003c00;
   --wa-color-green-10: #002400;
   --wa-color-green-05: #001700;
+  --wa-color-green: var(--wa-color-green-60);
 
   --wa-color-teal-95: #e3f7f5;
   --wa-color-teal-90: #c6eeeb;
@@ -55,6 +58,7 @@
   --wa-color-teal-20: #003935;
   --wa-color-teal-10: #002220;
   --wa-color-teal-05: #001513;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #ebf4ff;
   --wa-color-blue-90: #d4e7ff;
@@ -67,6 +71,7 @@
   --wa-color-blue-20: #00306c;
   --wa-color-blue-10: #001c45;
   --wa-color-blue-05: #00112f;
+  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f0f2fe;
   --wa-color-indigo-90: #e2e4fc;
@@ -79,6 +84,7 @@
   --wa-color-indigo-20: #321393;
   --wa-color-indigo-10: #1c006a;
   --wa-color-indigo-05: #130049;
+  --wa-color-indigo: var(--wa-color-indigo-30);
 
   --wa-color-violet-95: #f9effd;
   --wa-color-violet-90: #f4defb;
@@ -91,6 +97,7 @@
   --wa-color-violet-20: #521564;
   --wa-color-violet-10: #330940;
   --wa-color-violet-05: #22042b;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f3;
   --wa-color-gray-90: #e4e5e9;
@@ -103,4 +110,5 @@
   --wa-color-gray-20: #2f323f;
   --wa-color-gray-10: #1b1d26;
   --wa-color-gray-05: #101219;
+  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/elegant.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #6b001c;
   --wa-color-red-10: #44000d;
   --wa-color-red-05: #2e0006;
+  --wa-color-red: var(--wa-color-red-40);
 
   --wa-color-yellow-95: #f5f2e5;
   --wa-color-yellow-90: #ece6cc;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #492c05;
   --wa-color-yellow-10: #2b1a02;
   --wa-color-yellow-05: #191008;
+  --wa-color-yellow: var(--wa-color-yellow-60);
 
   --wa-color-green-95: #ecf4f1;
   --wa-color-green-90: #dae9e3;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003b24;
   --wa-color-green-10: #002316;
   --wa-color-green-05: #00160d;
+  --wa-color-green: var(--wa-color-green-40);
 
   --wa-color-teal-95: #ebf4f4;
   --wa-color-teal-90: #d9e9e9;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #00393b;
   --wa-color-teal-10: #002223;
   --wa-color-teal-05: #001415;
+  --wa-color-teal: var(--wa-color-teal-50);
 
   --wa-color-blue-95: #ebf3fa;
   --wa-color-blue-90: #d8e8f5;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #00345d;
   --wa-color-blue-10: #001f37;
   --wa-color-blue-05: #001221;
+  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1f1fa;
   --wa-color-indigo-90: #e4e4f6;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #272972;
   --wa-color-indigo-10: #171844;
   --wa-color-indigo-05: #0d0e27;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f6f0f9;
   --wa-color-violet-90: #eee2f2;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #501862;
   --wa-color-violet-10: #300e3b;
   --wa-color-violet-05: #1c0823;
+  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f2f2f3;
   --wa-color-gray-90: #e6e5e8;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #35313c;
   --wa-color-gray-10: #1f1c23;
   --wa-color-gray-05: #131115;
+  --wa-color-gray: var(--wa-color-gray-40);
 }

src/styles/color/natural.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #562318;
   --wa-color-red-10: #36130b;
   --wa-color-red-05: #240a05;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #f5f0e8;
   --wa-color-yellow-90: #ede4d5;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #442f00;
   --wa-color-yellow-10: #2a1b00;
   --wa-color-yellow-05: #1b1000;
+  --wa-color-yellow: var(--wa-color-yellow-50);
 
   --wa-color-green-95: #edf2ee;
   --wa-color-green-90: #dde8df;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #193922;
   --wa-color-green-10: #0c2212;
   --wa-color-green-05: #051509;
+  --wa-color-green: var(--wa-color-green-50);
 
   --wa-color-teal-95: #eff3f4;
   --wa-color-teal-90: #dee7e9;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #0a383e;
   --wa-color-teal-10: #022125;
   --wa-color-teal-05: #011518;
+  --wa-color-teal: var(--wa-color-teal-40);
 
   --wa-color-blue-95: #eef1f5;
   --wa-color-blue-90: #e1e6ef;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #203351;
   --wa-color-blue-10: #101e34;
   --wa-color-blue-05: #081223;
+  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #f2f2f7;
   --wa-color-indigo-90: #e6e5f1;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #332e50;
   --wa-color-indigo-10: #1e1a32;
   --wa-color-indigo-05: #121021;
+  --wa-color-indigo: var(--wa-color-indigo-50);
 
   --wa-color-violet-95: #f4f1f6;
   --wa-color-violet-90: #eae4ef;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #3e2b4b;
   --wa-color-violet-10: #26182f;
   --wa-color-violet-05: #180e1f;
+  --wa-color-violet: var(--wa-color-violet-40);
 
   --wa-color-gray-95: #f1f1f0;
   --wa-color-gray-90: #e7e6e4;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #35322d;
   --wa-color-gray-10: #1f1d1a;
   --wa-color-gray-05: #131210;
+  --wa-color-gray: var(--wa-color-gray-50);
 }

src/styles/color/rudimentary.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #601a00;
   --wa-color-red-10: #3d0d00;
   --wa-color-red-05: #290600;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fff497;
   --wa-color-yellow-90: #ffe571;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #53251c;
   --wa-color-yellow-10: #311613;
   --wa-color-yellow-05: #1f0d0b;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #dafadc;
   --wa-color-green-90: #b9f4bc;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #003b1c;
   --wa-color-green-10: #00230e;
   --wa-color-green-05: #001607;
+  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #d1f9f1;
   --wa-color-teal-90: #a9f4e6;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #003843;
   --wa-color-teal-10: #002129;
   --wa-color-teal-05: #00151b;
+  --wa-color-teal: var(--wa-color-teal-70);
 
   --wa-color-blue-95: #e1f4ff;
   --wa-color-blue-90: #caebff;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #002e76;
   --wa-color-blue-10: #001a4e;
   --wa-color-blue-05: #000f36;
+  --wa-color-blue: var(--wa-color-blue-50);
 
   --wa-color-indigo-95: #f1efff;
   --wa-color-indigo-90: #e7e3ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #3a009b;
   --wa-color-indigo-10: #220064;
   --wa-color-indigo-05: #160046;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f8edfd;
   --wa-color-violet-90: #f2e0fc;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #4f1568;
   --wa-color-violet-10: #310a42;
   --wa-color-violet-05: #20052d;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f2f2f2;
   --wa-color-gray-90: #e6e6e6;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #313131;
   --wa-color-gray-10: #1d1d1d;
   --wa-color-gray-05: #131313;
+  --wa-color-gray: var(--wa-color-gray-95);
 }

src/styles/color/vogue.css

@@ -11,6 +11,7 @@
   --wa-color-red-20: #641414;
   --wa-color-red-10: #400809;
   --wa-color-red-05: #2b0404;
+  --wa-color-red: var(--wa-color-red-50);
 
   --wa-color-yellow-95: #fef6ab;
   --wa-color-yellow-90: #ffe759;
@@ -23,6 +24,7 @@
   --wa-color-yellow-20: #502809;
   --wa-color-yellow-10: #311704;
   --wa-color-yellow-05: #1f0e02;
+  --wa-color-yellow: var(--wa-color-yellow-80);
 
   --wa-color-green-95: #d6fbe3;
   --wa-color-green-90: #acf5c6;
@@ -35,6 +37,7 @@
   --wa-color-green-20: #093a1d;
   --wa-color-green-10: #032311;
   --wa-color-green-05: #02160a;
+  --wa-color-green: var(--wa-color-green-70);
 
   --wa-color-teal-95: #d1fbf2;
   --wa-color-teal-90: #9bf6e4;
@@ -47,6 +50,7 @@
   --wa-color-teal-20: #073938;
   --wa-color-teal-10: #022222;
   --wa-color-teal-05: #011515;
+  --wa-color-teal: var(--wa-color-teal-80);
 
   --wa-color-blue-95: #ebf3ff;
   --wa-color-blue-90: #d6e7fe;
@@ -59,6 +63,7 @@
   --wa-color-blue-20: #1c2e69;
   --wa-color-blue-10: #101b41;
   --wa-color-blue-05: #09102c;
+  --wa-color-blue: var(--wa-color-blue-40);
 
   --wa-color-indigo-95: #eef2ff;
   --wa-color-indigo-90: #dde5ff;
@@ -71,6 +76,7 @@
   --wa-color-indigo-20: #2b2871;
   --wa-color-indigo-10: #1b1842;
   --wa-color-indigo-05: #100f29;
+  --wa-color-indigo: var(--wa-color-indigo-40);
 
   --wa-color-violet-95: #f7efff;
   --wa-color-violet-90: #efe0ff;
@@ -83,6 +89,7 @@
   --wa-color-violet-20: #4b1079;
   --wa-color-violet-10: #2f0451;
   --wa-color-violet-05: #1e0238;
+  --wa-color-violet: var(--wa-color-violet-50);
 
   --wa-color-gray-95: #f1f2f4;
   --wa-color-gray-90: #e3e5e9;
@@ -95,4 +102,5 @@
   --wa-color-gray-20: #293342;
   --wa-color-gray-10: #161e2d;
   --wa-color-gray-05: #0c1220;
+  --wa-color-gray: var(--wa-color-gray-10);
 }