vanilla-jui 1.3.9 → 1.3.10

package/src/css/color.css

@@ -0,0 +1,1176 @@
+/**
+ * 暂时弃用 color & color_p3
+ */
+
+@layer color {
+
+	/**
+	 * gray, olive,
+	 * tomato, ruby, pink,
+	 * violet, indigo, blue,
+	 * teal, grass, mint, lime,
+	 * yellow, orange, gold
+	 */
+	:root,
+	.light,
+	.light-theme {
+		--white: #ffffff;
+		--black: #000000;
+		/* gray */
+		--gray-1: #fcfcfd;
+		--gray-2: #f9f9fb;
+		--gray-3: #eff0f3;
+		--gray-4: #e7e8ec;
+		--gray-5: #e0e1e6;
+		--gray-6: #d8d9e0;
+		--gray-7: #cdced7;
+		--gray-8: #b9bbc6;
+		--gray-9: #8b8d98;
+		--gray-10: #80828d;
+		--gray-11: #62636c;
+		--gray-12: #1e1f24;
+
+		--gray-a1: #00005503;
+		--gray-a2: #00005506;
+		--gray-a3: #00104010;
+		--gray-a4: #000b3618;
+		--gray-a5: #0009321f;
+		--gray-a6: #00073527;
+		--gray-a7: #00063332;
+		--gray-a8: #00083046;
+		--gray-a9: #00051d74;
+		--gray-a10: #00051b7f;
+		--gray-a11: #0002119d;
+		--gray-a12: #000107e1;
+
+		--gray-contrast: #ffffff;
+		--gray-surface: #ffffffcc;
+		--gray-indicator: #8b8d98;
+		--gray-track: #8b8d98;
+
+		/* olive */
+		--olive-1: #fcfdfc;
+		--olive-2: #f8faf8;
+		--olive-3: #eff1ef;
+		--olive-4: #e7e9e6;
+		--olive-5: #e0e2df;
+		--olive-6: #d7dad6;
+		--olive-7: #cccfcb;
+		--olive-8: #b9bcb8;
+		--olive-9: #898e87;
+		--olive-10: #7d827b;
+		--olive-11: #60655e;
+		--olive-12: #1d211c;
+
+		--olive-a1: #00550003;
+		--olive-a2: #00490007;
+		--olive-a3: #00200010;
+		--olive-a4: #0b1f0019;
+		--olive-a5: #08180020;
+		--olive-a6: #07190029;
+		--olive-a7: #05140034;
+		--olive-a8: #040f0047;
+		--olive-a9: #050f0078;
+		--olive-a10: #040e0084;
+		--olive-a11: #030b00a1;
+		--olive-a12: #010600e3;
+
+		--olive-contrast: #fff;
+		--olive-surface: #f6f9f6cc;
+		--olive-indicator: #898e87;
+		--olive-track: #898e87;
+
+		/* tomato */
+		--tomato-1: #fffcfc;
+		--tomato-2: #fff8f7;
+		--tomato-3: #feebe7;
+		--tomato-4: #ffdcd3;
+		--tomato-5: #ffcdc1;
+		--tomato-6: #fdbdae;
+		--tomato-7: #f5a997;
+		--tomato-8: #ec8f7a;
+		--tomato-9: #e54d2e;
+		--tomato-10: #d73d1d;
+		--tomato-11: #cf3716;
+		--tomato-12: #5c281c;
+
+		--tomato-a1: #ff000003;
+		--tomato-a2: #ff200008;
+		--tomato-a3: #f52b0018;
+		--tomato-a4: #ff35002c;
+		--tomato-a5: #ff32003e;
+		--tomato-a6: #f9300051;
+		--tomato-a7: #e72d0068;
+		--tomato-a8: #db290085;
+		--tomato-a9: #df2600d1;
+		--tomato-a10: #d22400e2;
+		--tomato-a11: #cb2400e9;
+		--tomato-a12: #480e00e3;
+
+		--tomato-contrast: #fff;
+		--tomato-surface: #fff6f5cc;
+		--tomato-indicator: #e54d2e;
+		--tomato-track: #e54d2e;
+
+		/* ruby */
+		--ruby-1: #fffcfc;
+		--ruby-2: #fff7f8;
+		--ruby-3: #feeaeb;
+		--ruby-4: #ffdcdf;
+		--ruby-5: #ffcfd2;
+		--ruby-6: #f8bfc4;
+		--ruby-7: #f0acb2;
+		--ruby-8: #e6939b;
+		--ruby-9: #e54666;
+		--ruby-10: #d7365a;
+		--ruby-11: #c8274f;
+		--ruby-12: #651727;
+
+		--ruby-a1: #ff000003;
+		--ruby-a2: #ff002008;
+		--ruby-a3: #f3000d15;
+		--ruby-a4: #ff001623;
+		--ruby-a5: #ff001030;
+		--ruby-a6: #e4001440;
+		--ruby-a7: #d1001353;
+		--ruby-a8: #c400136c;
+		--ruby-a9: #db002cb9;
+		--ruby-a10: #cc002ec9;
+		--ruby-a11: #be002fd8;
+		--ruby-a12: #560012e8;
+
+		--ruby-contrast: #fff;
+		--ruby-surface: #fff5f6cc;
+		--ruby-indicator: #e54666;
+		--ruby-track: #e54666;
+
+		/* pink */
+		--pink-1: #fffcfe;
+		--pink-2: #fff7fb;
+		--pink-3: #ffe9f4;
+		--pink-4: #fcdcec;
+		--pink-5: #f8cee3;
+		--pink-6: #f1bed9;
+		--pink-7: #e9abcc;
+		--pink-8: #e093bd;
+		--pink-9: #d6409f;
+		--pink-10: #c73192;
+		--pink-11: #c02a8c;
+		--pink-12: #651248;
+
+		--pink-a1: #ff00aa03;
+		--pink-a2: #ff008008;
+		--pink-a3: #ff008016;
+		--pink-a4: #ea007523;
+		--pink-a5: #db006e31;
+		--pink-a6: #c9006a41;
+		--pink-a7: #bd006554;
+		--pink-a8: #b600646c;
+		--pink-a9: #c8007fbf;
+		--pink-a10: #ba0078ce;
+		--pink-a11: #b40075d5;
+		--pink-a12: #59003aed;
+
+		--pink-contrast: #fff;
+		--pink-surface: #fff5facc;
+		--pink-indicator: #d6409f;
+		--pink-track: #d6409f;
+
+		/* violet */
+		--violet-1: #fcfcfe;
+		--violet-2: #f9f9ff;
+		--violet-3: #f2f1ff;
+		--violet-4: #e7e6ff;
+		--violet-5: #dddaff;
+		--violet-6: #cfcbff;
+		--violet-7: #bcb7f7;
+		--violet-8: #a49bee;
+		--violet-9: #6e56cf;
+		--violet-10: #614cb5;
+		--violet-11: #6450ba;
+		--violet-12: #30265f;
+
+		--violet-a1: #0000aa03;
+		--violet-a2: #0000ff06;
+		--violet-a3: #1300ff0e;
+		--violet-a4: #0b00ff19;
+		--violet-a5: #1500ff25;
+		--violet-a6: #1400ff34;
+		--violet-a7: #1200e348;
+		--violet-a8: #1700d464;
+		--violet-a9: #2400b7a9;
+		--violet-a10: #1e0096b3;
+		--violet-a11: #1d009baf;
+		--violet-a12: #0c0043d9;
+
+		--violet-contrast: #fff;
+		--violet-surface: #f8f8ffcc;
+		--violet-indicator: #6e56cf;
+		--violet-track: #6e56cf;
+
+		/* indigo */
+		--indigo-1: #fdfdfe;
+		--indigo-2: #f7f9ff;
+		--indigo-3: #edf2fe;
+		--indigo-4: #dfeaff;
+		--indigo-5: #d0dfff;
+		--indigo-6: #bdd1ff;
+		--indigo-7: #a7bff9;
+		--indigo-8: #88a5ef;
+		--indigo-9: #3e63dd;
+		--indigo-10: #3657c3;
+		--indigo-11: #3a5bc7;
+		--indigo-12: #1d2d5c;
+
+		--indigo-a1: #00008002;
+		--indigo-a2: #0040ff08;
+		--indigo-a3: #0047f112;
+		--indigo-a4: #0058ff20;
+		--indigo-a5: #0052ff2f;
+		--indigo-a6: #004eff42;
+		--indigo-a7: #0046ee58;
+		--indigo-a8: #003fdd77;
+		--indigo-a9: #0031d2c1;
+		--indigo-a10: #002ab3c9;
+		--indigo-a11: #002bb7c5;
+		--indigo-a12: #001247e2;
+
+		--indigo-contrast: #fff;
+		--indigo-surface: #f5f8ffcc;
+		--indigo-indicator: #3e63dd;
+		--indigo-track: #3e63dd;
+
+		/* blue */
+		--blue-1: #fbfdff;
+		--blue-2: #f4faff;
+		--blue-3: #e9f3ff;
+		--blue-4: #d9edff;
+		--blue-5: #c7e3ff;
+		--blue-6: #b2d6ff;
+		--blue-7: #97c5f9;
+		--blue-8: #6eadf3;
+		--blue-9: #0090ff;
+		--blue-10: #0084ec;
+		--blue-11: #0073dd;
+		--blue-12: #003463;
+
+		--blue-a1: #0080ff04;
+		--blue-a2: #008cff0b;
+		--blue-a3: #0074ff16;
+		--blue-a4: #0087ff26;
+		--blue-a5: #0080ff38;
+		--blue-a6: #0078ff4d;
+		--blue-a7: #0071f168;
+		--blue-a8: #006fea91;
+		--blue-a9: #0090ff;
+		--blue-a10: #0084ec;
+		--blue-a11: #0073dd;
+		--blue-a12: #003463;
+
+		--blue-contrast: #fff;
+		--blue-surface: #f1f9ffcc;
+		--blue-indicator: #0090ff;
+		--blue-track: #0090ff;
+
+		/* teal */
+		--teal-1: #fafefd;
+		--teal-2: #f3fbf9;
+		--teal-3: #dff8f3;
+		--teal-4: #ccf3eb;
+		--teal-5: #b7ebe1;
+		--teal-6: #a1ded3;
+		--teal-7: #83cdc0;
+		--teal-8: #54b9a9;
+		--teal-9: #12a594;
+		--teal-10: #009888;
+		--teal-11: #008071;
+		--teal-12: #0f3d36;
+
+		--teal-a1: #00cc9905;
+		--teal-a2: #00aa800c;
+		--teal-a3: #00c8a020;
+		--teal-a4: #00c39b33;
+		--teal-a5: #00b99548;
+		--teal-a6: #00a6885e;
+		--teal-a7: #00997e7c;
+		--teal-a8: #00977fab;
+		--teal-a9: #009e8ced;
+		--teal-a10: #009888;
+		--teal-a11: #008071;
+		--teal-a12: #003129f0;
+
+		--teal-contrast: #fff;
+		--teal-surface: #f0faf8cc;
+		--teal-indicator: #12a594;
+		--teal-track: #12a594;
+
+		/* grass */
+		--grass-1: #fbfefb;
+		--grass-2: #f5fbf6;
+		--grass-3: #e8f7e9;
+		--grass-4: #daf0db;
+		--grass-5: #c8e9cb;
+		--grass-6: #b2deb6;
+		--grass-7: #94ce9a;
+		--grass-8: #67b973;
+		--grass-9: #46a758;
+		--grass-10: #3d9a4f;
+		--grass-11: #297e3b;
+		--grass-12: #213c24;
+
+		--grass-a1: #00c00004;
+		--grass-a2: #00991a0a;
+		--grass-a3: #00a70c17;
+		--grass-a4: #00980725;
+		--grass-a5: #00990e37;
+		--grass-a6: #00920e4d;
+		--grass-a7: #018b0f6b;
+		--grass-a8: #008a1498;
+		--grass-a9: #008619b9;
+		--grass-a10: #007a18c2;
+		--grass-a11: #006516d6;
+		--grass-a12: #001f04de;
+
+		--grass-contrast: #fff;
+		--grass-surface: #f3faf4cc;
+		--grass-indicator: #46a758;
+		--grass-track: #46a758;
+
+		/* mint */
+		--mint-1: #f9fefd;
+		--mint-2: #f2fbf9;
+		--mint-3: #ddf9f1;
+		--mint-4: #c8f4e9;
+		--mint-5: #b3ecde;
+		--mint-6: #9ce0d0;
+		--mint-7: #7ecfbd;
+		--mint-8: #4bbba5;
+		--mint-9: #86ead4;
+		--mint-10: #7ce0ca;
+		--mint-11: #007867;
+		--mint-12: #17433a;
+
+		--mint-a1: #00d5aa06;
+		--mint-a2: #00b18a0d;
+		--mint-a3: #00d29622;
+		--mint-a4: #00cc9937;
+		--mint-a5: #00c0914c;
+		--mint-a6: #00b08663;
+		--mint-a7: #00a17d81;
+		--mint-a8: #009f80b4;
+		--mint-a9: #00d3a579;
+		--mint-a10: #00c39883;
+		--mint-a11: #007867;
+		--mint-a12: #003027e8;
+
+		--mint-contrast: #062822;
+		--mint-surface: #effaf8cc;
+		--mint-indicator: #86ead4;
+		--mint-track: #86ead4;
+
+		/* lime */
+		--lime-1: #fcfdfa;
+		--lime-2: #f7faf3;
+		--lime-3: #eaf7d8;
+		--lime-4: #ddf2c0;
+		--lime-5: #cfe8a9;
+		--lime-6: #bedb93;
+		--lime-7: #aac979;
+		--lime-8: #91b551;
+		--lime-9: #bdee63;
+		--lime-10: #b1e54a;
+		--lime-11: #5f7b2c;
+		--lime-12: #34411e;
+
+		--lime-a1: #66990005;
+		--lime-a2: #5595000c;
+		--lime-a3: #76cb0027;
+		--lime-a4: #76cb003f;
+		--lime-a5: #71bb0056;
+		--lime-a6: #66aa006c;
+		--lime-a7: #5e990086;
+		--lime-a8: #5e9300ae;
+		--lime-a9: #93e4009c;
+		--lime-a10: #91db00b5;
+		--lime-a11: #3e6000d3;
+		--lime-a12: #192800e1;
+
+		--lime-contrast: #1d250f;
+		--lime-surface: #f5f9f0cc;
+		--lime-indicator: #bdee63;
+		--lime-track: #bdee63;
+
+		/* yellow */
+		--yellow-1: #fdfdfa;
+		--yellow-2: #fefceb;
+		--yellow-3: #fff9bf;
+		--yellow-4: #fef29f;
+		--yellow-5: #f8e981;
+		--yellow-6: #e9da79;
+		--yellow-7: #d8cb75;
+		--yellow-8: #c4b54f;
+		--yellow-9: #ffe62a;
+		--yellow-10: #f3dd45;
+		--yellow-11: #897a00;
+		--yellow-12: #413d23;
+
+		--yellow-a1: #99990005;
+		--yellow-a2: #f3d90014;
+		--yellow-a3: #ffe80040;
+		--yellow-a4: #fddd0060;
+		--yellow-a5: #f1d3007e;
+		--yellow-a6: #d6b90086;
+		--yellow-a7: #b79f008a;
+		--yellow-a8: #aa9400b0;
+		--yellow-a9: #ffe100d5;
+		--yellow-a10: #efd100ba;
+		--yellow-a11: #897a00;
+		--yellow-a12: #231e00dc;
+
+		--yellow-contrast: #262209;
+		--yellow-surface: #fefbe6cc;
+		--yellow-indicator: #ffe62a;
+		--yellow-track: #ffe62a;
+
+		/* orange */
+		--orange-1: #fefcfb;
+		--orange-2: #fff5f0;
+		--orange-3: #ffeadd;
+		--orange-4: #ffd7c0;
+		--orange-5: #ffcaac;
+		--orange-6: #ffba95;
+		--orange-7: #fca882;
+		--orange-8: #f19063;
+		--orange-9: #f76b15;
+		--orange-10: #eb5d00;
+		--orange-11: #d24d00;
+		--orange-12: #572e1a;
+
+		--orange-a1: #c0400004;
+		--orange-a2: #ff55000f;
+		--orange-a3: #ff620022;
+		--orange-a4: #ff5e003f;
+		--orange-a5: #ff5d0053;
+		--orange-a6: #ff5a016a;
+		--orange-a7: #f94e007d;
+		--orange-a8: #e84a009c;
+		--orange-a9: #f65e00ea;
+		--orange-a10: #eb5d00;
+		--orange-a11: #d24d00;
+		--orange-a12: #441600e5;
+
+		--orange-contrast: #fff;
+		--orange-surface: #fff3eccc;
+		--orange-indicator: #f76b15;
+		--orange-track: #f76b15;
+
+		/* gold */
+		--gold-1: #fdfdfc;
+		--gold-2: #fbf9f7;
+		--gold-3: #f3efea;
+		--gold-4: #ece7de;
+		--gold-5: #e5ded2;
+		--gold-6: #ded3c4;
+		--gold-7: #d4c5b0;
+		--gold-8: #c3b093;
+		--gold-9: #978365;
+		--gold-10: #89775c;
+		--gold-11: #71634e;
+		--gold-12: #302c26;
+
+		--gold-a1: #55550003;
+		--gold-a2: #80400008;
+		--gold-a3: #6e3d0015;
+		--gold-a4: #6d460021;
+		--gold-a5: #6c44002d;
+		--gold-a6: #7141013b;
+		--gold-a7: #7544004f;
+		--gold-a8: #7245006c;
+		--gold-a9: #5332009a;
+		--gold-a10: #472b00a3;
+		--gold-a11: #331e00b1;
+		--gold-a12: #0c0700d9;
+
+		--gold-contrast: #fff;
+		--gold-surface: #faf8f5cc;
+		--gold-indicator: #978365;
+		--gold-track: #978365;
+
+		/* red */
+		--red-1: #fffcfc;
+		--red-2: #fff7f7;
+		--red-3: #ffebea;
+		--red-4: #ffdcd9;
+		--red-5: #ffcdca;
+		--red-6: #febdb9;
+		--red-7: #f5a9a5;
+		--red-8: #eb8f8b;
+		--red-9: #e5484d;
+		--red-10: #d73840;
+		--red-11: #cc2e39;
+		--red-12: #64181b;
+
+		--red-a1: #ff000003;
+		--red-a2: #ff000008;
+		--red-a3: #ff0d0015;
+		--red-a4: #ff150026;
+		--red-a5: #ff0f0035;
+		--red-a6: #fc0f0046;
+		--red-a7: #e30c015a;
+		--red-a8: #d4090074;
+		--red-a9: #db0007b7;
+		--red-a10: #cc000ac7;
+		--red-a11: #c1000ed1;
+		--red-a12: #540003e7;
+
+		--red-contrast: #fff;
+		--red-surface: #fff5f5cc;
+		--red-indicator: #e5484d;
+		--red-track: #e5484d;
+
+		/* green */
+		--green-1: #fbfefc;
+		--green-2: #f4fbf7;
+		--green-3: #e5f6eb;
+		--green-4: #d6f1df;
+		--green-5: #c4e8d1;
+		--green-6: #adddc0;
+		--green-7: #8fcea8;
+		--green-8: #60b887;
+		--green-9: #30a46c;
+		--green-10: #289662;
+		--green-11: #00814c;
+		--green-12: #1d3b2a;
+
+		--green-a1: #00c04004;
+		--green-a2: #00a3460b;
+		--green-a3: #00a73b1a;
+		--green-a4: #00a83829;
+		--green-a5: #019c393b;
+		--green-a6: #00963c52;
+		--green-a7: #00903970;
+		--green-a8: #008d3f9f;
+		--green-a9: #008f4acf;
+		--green-a10: #008345d7;
+		--green-a11: #00814c;
+		--green-a12: #00220fe2;
+
+		--green-contrast: #fff;
+		--green-surface: #f1faf5cc;
+		--green-indicator: #30a46c;
+		--green-track: #30a46c;
+
+		/* amber */
+		--amber-1: #fefdfb;
+		--amber-2: #fffaea;
+		--amber-3: #fff2c3;
+		--amber-4: #ffe9a0;
+		--amber-5: #ffde7f;
+		--amber-6: #fcd27a;
+		--amber-7: #e9c16e;
+		--amber-8: #d7a944;
+		--amber-9: #ffca2f;
+		--amber-10: #fac137;
+		--amber-11: #9b6f00;
+		--amber-12: #463a20;
+
+		--amber-a1: #c0800004;
+		--amber-a2: #ffc30015;
+		--amber-a3: #ffc8003c;
+		--amber-a4: #ffc4005f;
+		--amber-a5: #ffbe0080;
+		--amber-a6: #faa90085;
+		--amber-a7: #d9920091;
+		--amber-a8: #c98a00bb;
+		--amber-a9: #ffbe00d0;
+		--amber-a10: #f9b000c8;
+		--amber-a11: #9b6f00;
+		--amber-a12: #2c1e00df;
+
+		--amber-contrast: #2b2009;
+		--amber-surface: #fff9e5cc;
+		--amber-indicator: #ffca2f;
+		--amber-track: #ffca2f;
+	}
+
+	.dark,
+	.dark-theme {
+		--white: #000000;
+		--black: #ffffff;
+		/* gray */
+		--gray-1: #111113;
+		--gray-2: #19191b;
+		--gray-3: #222325;
+		--gray-4: #292a2e;
+		--gray-5: #303136;
+		--gray-6: #393a40;
+		--gray-7: #46484f;
+		--gray-8: #5f606a;
+		--gray-9: #6c6e79;
+		--gray-10: #797b86;
+		--gray-11: #b2b3bd;
+		--gray-12: #eeeef0;
+
+		--gray-a1: #1111bb03;
+		--gray-a2: #cbcbf90b;
+		--gray-a3: #d6e2f916;
+		--gray-a4: #d1d9f920;
+		--gray-a5: #d7ddfd28;
+		--gray-a6: #d9defc33;
+		--gray-a7: #dae2fd43;
+		--gray-a8: #e0e3fd60;
+		--gray-a9: #e0e4fd70;
+		--gray-a10: #e3e7fd7e;
+		--gray-a11: #eff0feb9;
+		--gray-a12: #fdfdffef;
+
+		--gray-contrast: #ffffff;
+		--gray-surface: rgba(0, 0, 0, 0.05);
+		--gray-indicator: #6c6e79;
+		--gray-track: #6c6e79;
+
+		/* olive */
+		--olive-1: #111113;
+		--olive-2: #19191b;
+		--olive-3: #232226;
+		--olive-4: #2a292e;
+		--olive-5: #323137;
+		--olive-6: #3b3a41;
+		--olive-7: #494851;
+		--olive-8: #62606b;
+		--olive-9: #8e8c99;
+		--olive-10: #82808d;
+		--olive-11: #b6b4bf;
+		--olive-12: #ececf1;
+
+		--olive-a1: #1111bb03;
+		--olive-a2: #cbcbf90b;
+		--olive-a3: #d9cefa17;
+		--olive-a4: #d9d1f920;
+		--olive-a5: #dfd9fe29;
+		--olive-a6: #dfdafc34;
+		--olive-a7: #e0ddfe45;
+		--olive-a8: #e6e0fd61;
+		--olive-a9: #ece8ff92;
+		--olive-a10: #eae6ff85;
+		--olive-a11: #f2effebb;
+		--olive-a12: #fafafff0;
+
+		--olive-contrast: #fff;
+		--olive-surface: #21212580;
+		--olive-indicator: #8e8c99;
+		--olive-track: #8e8c99;
+
+		/* tomato */
+		--tomato-1: #160f0e;
+		--tomato-2: #1e1512;
+		--tomato-3: #381710;
+		--tomato-4: #4e160b;
+		--tomato-5: #5e1d10;
+		--tomato-6: #6d2a1c;
+		--tomato-7: #853b2b;
+		--tomato-8: #ac4d39;
+		--tomato-9: #e54d2e;
+		--tomato-10: #d63e1f;
+		--tomato-11: #ff9277;
+		--tomato-12: #fbd3ca;
+
+		--tomato-a1: #e6000006;
+		--tomato-a2: #fe5a240e;
+		--tomato-a3: #fe360b2a;
+		--tomato-a4: #fd240042;
+		--tomato-a5: #fe360e53;
+		--tomato-a6: #fe522e63;
+		--tomato-a7: #fd67467d;
+		--tomato-a8: #fe6d4ea7;
+		--tomato-a9: #fe5431e4;
+		--tomato-a10: #fe4722d4;
+		--tomato-a11: #ff9277;
+		--tomato-a12: #ffd6cdfb;
+
+		--tomato-contrast: #fff;
+		--tomato-surface: #2b191380;
+		--tomato-indicator: #e54d2e;
+		--tomato-track: #e54d2e;
+
+		/* ruby */
+		--ruby-1: #170f0f;
+		--ruby-2: #1e1415;
+		--ruby-3: #3a141a;
+		--ruby-4: #4f131f;
+		--ruby-5: #5e1a27;
+		--ruby-6: #702632;
+		--ruby-7: #893442;
+		--ruby-8: #b44457;
+		--ruby-9: #e54666;
+		--ruby-10: #d6375a;
+		--ruby-11: #ff8e9d;
+		--ruby-12: #ffd2d6;
+
+		--ruby-a1: #ec000007;
+		--ruby-a2: #fe485a0e;
+		--ruby-a3: #ff23462c;
+		--ruby-a4: #fd184643;
+		--ruby-a5: #fe2d5553;
+		--ruby-a6: #ff466466;
+		--ruby-a7: #ff577281;
+		--ruby-a8: #ff5c77af;
+		--ruby-a9: #fe4c70e4;
+		--ruby-a10: #fe3f69d4;
+		--ruby-a11: #ff8e9d;
+		--ruby-a12: #ffd2d6;
+
+		--ruby-contrast: #fff;
+		--ruby-surface: #2b171980;
+		--ruby-indicator: #e54666;
+		--ruby-track: #e54666;
+
+		/* pink */
+		--pink-1: #170e13;
+		--pink-2: #22111a;
+		--pink-3: #38162a;
+		--pink-4: #4d1338;
+		--pink-5: #5b1b42;
+		--pink-6: #6b2851;
+		--pink-7: #853866;
+		--pink-8: #a94782;
+		--pink-9: #d6409f;
+		--pink-10: #c73092;
+		--pink-11: #ff84d3;
+		--pink-12: #fed1e8;
+
+		--pink-a1: #ec005a07;
+		--pink-a2: #f6118a13;
+		--pink-a3: #fe30a92a;
+		--pink-a4: #fd19aa41;
+		--pink-a5: #fd31ad50;
+		--pink-a6: #fd4db961;
+		--pink-a7: #fd60be7d;
+		--pink-a8: #ff66c2a3;
+		--pink-a9: #fe49bcd4;
+		--pink-a10: #ff3abac3;
+		--pink-a11: #ff84d3;
+		--pink-a12: #ffd2e9fe;
+
+		--pink-contrast: #fff;
+		--pink-surface: #33112380;
+		--pink-indicator: #d6409f;
+		--pink-track: #d6409f;
+
+		/* violet */
+		--violet-1: #100f1c;
+		--violet-2: #171626;
+		--violet-3: #252045;
+		--violet-4: #30265c;
+		--violet-5: #392f6a;
+		--violet-6: #433978;
+		--violet-7: #52478d;
+		--violet-8: #6659ae;
+		--violet-9: #6e56cf;
+		--violet-10: #6052a7;
+		--violet-11: #b3a8ff;
+		--violet-12: #e0deff;
+
+		--violet-a1: #0000fb0c;
+		--violet-a2: #5449fa17;
+		--violet-a3: #6d56fe38;
+		--violet-a4: #7253fd51;
+		--violet-a5: #7b60fd60;
+		--violet-a6: #846dfd6f;
+		--violet-a7: #8e79ff85;
+		--violet-a8: #917dfea9;
+		--violet-a9: #8668ffcc;
+		--violet-a10: #8f78ffa1;
+		--violet-a11: #b3a8ff;
+		--violet-a12: #e0deff;
+
+		--violet-contrast: #fff;
+		--violet-surface: #1d1b3b80;
+		--violet-indicator: #6e56cf;
+		--violet-track: #6e56cf;
+
+		/* indigo */
+		--indigo-1: #0c111c;
+		--indigo-2: #111725;
+		--indigo-3: #172448;
+		--indigo-4: #1d2e61;
+		--indigo-5: #253974;
+		--indigo-6: #2e4484;
+		--indigo-7: #375097;
+		--indigo-8: #415eb1;
+		--indigo-9: #3e63dd;
+		--indigo-10: #3f5cb0;
+		--indigo-11: #93b4ff;
+		--indigo-12: #d5e2ff;
+
+		--indigo-a1: #0012fb0c;
+		--indigo-a2: #1156f916;
+		--indigo-a3: #2b64ff3b;
+		--indigo-a4: #3567ff56;
+		--indigo-a5: #4171fd6b;
+		--indigo-a6: #4d7afd7c;
+		--indigo-a7: #5581ff90;
+		--indigo-a8: #5883feac;
+		--indigo-a9: #4671ffdb;
+		--indigo-a10: #5580feab;
+		--indigo-a11: #93b4ff;
+		--indigo-a12: #d5e2ff;
+
+		--indigo-contrast: #fff;
+		--indigo-surface: #111d3980;
+		--indigo-indicator: #3e63dd;
+		--indigo-track: #3e63dd;
+
+		/* blue */
+		--blue-1: #08121c;
+		--blue-2: #0e1926;
+		--blue-3: #0a2847;
+		--blue-4: #003262;
+		--blue-5: #003f75;
+		--blue-6: #104d86;
+		--blue-7: #1d5e9d;
+		--blue-8: #2371bd;
+		--blue-9: #0090ff;
+		--blue-10: #0083f1;
+		--blue-11: #70b8ff;
+		--blue-12: #c8e3ff;
+
+		--blue-a1: #0027fb0c;
+		--blue-a2: #006afa17;
+		--blue-a3: #0077ff3a;
+		--blue-a4: #0072ff57;
+		--blue-a5: #007efd6c;
+		--blue-a6: #0f8afd7e;
+		--blue-a7: #2694ff96;
+		--blue-a8: #2a95feb9;
+		--blue-a9: #0090ff;
+		--blue-a10: #008afff0;
+		--blue-a11: #70b8ff;
+		--blue-a12: #c8e3ff;
+
+		--blue-contrast: #fff;
+		--blue-surface: #0c213b80;
+		--blue-indicator: #0090ff;
+		--blue-track: #0090ff;
+
+		/* teal */
+		--teal-1: #0b1311;
+		--teal-2: #111c1a;
+		--teal-3: #0e2d28;
+		--teal-4: #043b34;
+		--teal-5: #0b4840;
+		--teal-6: #16574e;
+		--teal-7: #1e695f;
+		--teal-8: #217f72;
+		--teal-9: #12a594;
+		--teal-10: #009888;
+		--teal-11: #55d2c0;
+		--teal-12: #aaf0e3;
+
+		--teal-a1: #00bb1103;
+		--teal-a2: #12fbd10c;
+		--teal-a3: #00ffd51e;
+		--teal-a4: #00ffd82d;
+		--teal-a5: #00ffdd3b;
+		--teal-a6: #23ffe14b;
+		--teal-a7: #34fde25f;
+		--teal-a8: #34ffe376;
+		--teal-a9: #13ffe49f;
+		--teal-a10: #00ffe391;
+		--teal-a11: #65ffe9cf;
+		--teal-a12: #b4fff1ef;
+
+		--teal-contrast: #fff;
+		--teal-surface: #11272380;
+		--teal-indicator: #12a594;
+		--teal-track: #12a594;
+
+		/* grass */
+		--grass-1: #0d130e;
+		--grass-2: #141a14;
+		--grass-3: #1c2a1d;
+		--grass-4: #1f3a23;
+		--grass-5: #27482b;
+		--grass-6: #2f5735;
+		--grass-7: #37673e;
+		--grass-8: #407948;
+		--grass-9: #46a758;
+		--grass-10: #389a4c;
+		--grass-11: #73d081;
+		--grass-12: #c0f0c4;
+
+		--grass-a1: #00bb0003;
+		--grass-a2: #5ef75e0a;
+		--grass-a3: #79fe831b;
+		--grass-a4: #63ff7a2c;
+		--grass-a5: #71ff823b;
+		--grass-a6: #77ff8c4b;
+		--grass-a7: #7afd8d5d;
+		--grass-a8: #7cfd8e70;
+		--grass-a9: #65ff82a1;
+		--grass-a10: #55ff7893;
+		--grass-a11: #8bff9dcd;
+		--grass-a12: #ccffd0ef;
+
+		--grass-contrast: #fff;
+		--grass-surface: #17231780;
+		--grass-indicator: #46a758;
+		--grass-track: #46a758;
+
+		/* mint */
+		--mint-1: #0c1311;
+		--mint-2: #0f1b18;
+		--mint-3: #0c2c26;
+		--mint-4: #003a31;
+		--mint-5: #06483d;
+		--mint-6: #16564a;
+		--mint-7: #22685b;
+		--mint-8: #287f6f;
+		--mint-9: #86ead4;
+		--mint-10: #7ce0ca;
+		--mint-11: #6dd2bc;
+		--mint-12: #c0f5e8;
+
+		--mint-a1: #00bb1103;
+		--mint-a2: #00f9b40b;
+		--mint-a3: #00ffca1d;
+		--mint-a4: #00ffcb2c;
+		--mint-a5: #00ffd03b;
+		--mint-a6: #23ffd64a;
+		--mint-a7: #3ffdda5e;
+		--mint-a8: #43ffdd76;
+		--mint-a9: #92ffe7e9;
+		--mint-a10: #8cffe6de;
+		--mint-a11: #83ffe4cf;
+		--mint-a12: #c7fef0f5;
+
+		--mint-contrast: #062822;
+		--mint-surface: #0e251f80;
+		--mint-indicator: #86ead4;
+		--mint-track: #86ead4;
+
+		/* lime */
+		--lime-1: #0f120b;
+		--lime-2: #151910;
+		--lime-3: #212916;
+		--lime-4: #2c361b;
+		--lime-5: #364321;
+		--lime-6: #415126;
+		--lime-7: #4e612d;
+		--lime-8: #5c7434;
+		--lime-9: #bdee63;
+		--lime-10: #b6e26a;
+		--lime-11: #bae66e;
+		--lime-12: #dff8bc;
+
+		--lime-a1: #00910002;
+		--lime-a2: #83f40009;
+		--lime-a3: #aefd431a;
+		--lime-a4: #befd5128;
+		--lime-a5: #c0fe5d36;
+		--lime-a6: #c3fe5f45;
+		--lime-a7: #c6ff6556;
+		--lime-a8: #c4fd656b;
+		--lime-a9: #caff69ed;
+		--lime-a10: #cdff76e0;
+		--lime-a11: #cdfe78e5;
+		--lime-a12: #e5ffc1f8;
+
+		--lime-contrast: #1d250f;
+		--lime-surface: #19211080;
+		--lime-indicator: #bdee63;
+		--lime-track: #bdee63;
+
+		/* yellow */
+		--yellow-1: #12110b;
+		--yellow-2: #1a1810;
+		--yellow-3: #282409;
+		--yellow-4: #332d00;
+		--yellow-5: #3f3700;
+		--yellow-6: #4c440e;
+		--yellow-7: #5f571f;
+		--yellow-8: #796f2b;
+		--yellow-9: #ffe629;
+		--yellow-10: #f1dd4e;
+		--yellow-11: #f2dd4f;
+		--yellow-12: #f4edb8;
+
+		--yellow-a1: #91110002;
+		--yellow-a2: #f7c4000a;
+		--yellow-a3: #fcd30019;
+		--yellow-a4: #fbd20025;
+		--yellow-a5: #fcd30032;
+		--yellow-a6: #fddd0640;
+		--yellow-a7: #fee63c54;
+		--yellow-a8: #fde74c70;
+		--yellow-a9: #ffe629;
+		--yellow-a10: #ffea52f0;
+		--yellow-a11: #fee852f2;
+		--yellow-a12: #fef7bff4;
+
+		--yellow-contrast: #262209;
+		--yellow-surface: #231f1080;
+		--yellow-indicator: #ffe629;
+		--yellow-track: #ffe629;
+
+		/* orange */
+		--orange-1: #160f0d;
+		--orange-2: #1f1510;
+		--orange-3: #351c10;
+		--orange-4: #4b1c03;
+		--orange-5: #592508;
+		--orange-6: #693318;
+		--orange-7: #804326;
+		--orange-8: #a55630;
+		--orange-9: #f76b15;
+		--orange-10: #e95f00;
+		--orange-11: #ff9c69;
+		--orange-12: #ffdcca;
+
+		--orange-a1: #e6000006;
+		--orange-a2: #ff55000f;
+		--orange-a3: #fd590b27;
+		--orange-a4: #fc3e003f;
+		--orange-a5: #fd53004e;
+		--orange-a6: #fd6c245f;
+		--orange-a7: #ff7d3e77;
+		--orange-a8: #ff80439f;
+		--orange-a9: #fe6d15f7;
+		--orange-a10: #fe6600e8;
+		--orange-a11: #ff9c69;
+		--orange-a12: #ffdcca;
+
+		--orange-contrast: #fff;
+		--orange-surface: #2d191080;
+		--orange-indicator: #f76b15;
+		--orange-track: #f76b15;
+
+		/* gold */
+		--gold-1: #12110f;
+		--gold-2: #1a1917;
+		--gold-3: #25221e;
+		--gold-4: #2e2a24;
+		--gold-5: #37322b;
+		--gold-6: #443d32;
+		--gold-7: #554c3d;
+		--gold-8: #6f624e;
+		--gold-9: #978365;
+		--gold-10: #8a7759;
+		--gold-11: #c8b79f;
+		--gold-12: #efe5d7;
+
+		--gold-a1: #91110002;
+		--gold-a2: #f7deab0a;
+		--gold-a3: #f9d6a816;
+		--gold-a4: #f9d9a920;
+		--gold-a5: #fedfb329;
+		--gold-a6: #feddaa37;
+		--gold-a7: #ffe0ab49;
+		--gold-a8: #ffdeac65;
+		--gold-a9: #ffdba690;
+		--gold-a10: #ffda9f82;
+		--gold-a11: #fee8c9c5;
+		--gold-a12: #fff4e5ee;
+
+		--gold-contrast: #fff;
+		--gold-surface: #23211d80;
+		--gold-indicator: #978365;
+		--gold-track: #978365;
+
+		/* red */
+		--red-1: #170f0e;
+		--red-2: #201312;
+		--red-3: #3b1212;
+		--red-4: #500f13;
+		--red-5: #61171a;
+		--red-6: #732425;
+		--red-7: #8c3434;
+		--red-8: #b54546;
+		--red-9: #e5484d;
+		--red-10: #d63941;
+		--red-11: #ff8f8b;
+		--red-12: #ffd2ce;
+
+		--red-a1: #ec000007;
+		--red-a2: #f22f2011;
+		--red-a3: #ff17172d;
+		--red-a4: #fe0a1944;
+		--red-a5: #ff232c56;
+		--red-a6: #ff404269;
+		--red-a7: #ff555584;
+		--red-a8: #ff5d5eb0;
+		--red-a9: #fe4e54e4;
+		--red-a10: #fe414bd4;
+		--red-a11: #ff8f8b;
+		--red-a12: #ffd2ce;
+
+		--red-contrast: #fff;
+		--red-surface: #2f151380;
+		--red-indicator: #e5484d;
+		--red-track: #e5484d;
+
+		/* green */
+		--green-1: #0c130f;
+		--green-2: #121b16;
+		--green-3: #152c1f;
+		--green-4: #143b27;
+		--green-5: #1b4930;
+		--green-6: #23573b;
+		--green-7: #2b6848;
+		--green-8: #327c55;
+		--green-9: #30a46c;
+		--green-10: #1d9760;
+		--green-11: #63d196;
+		--green-12: #b2f1cb;
+
+		--green-a1: #00bb0003;
+		--green-a2: #29f9850b;
+		--green-a3: #35ff8d1d;
+		--green-a4: #22ff8e2d;
+		--green-a5: #3cff953c;
+		--green-a6: #4fffa04b;
+		--green-a7: #58fda65e;
+		--green-a8: #5bffa873;
+		--green-a9: #44ffa49e;
+		--green-a10: #27ff9d90;
+		--green-a11: #77ffb6ce;
+		--green-a12: #bcffd7f0;
+
+		--green-contrast: #fff;
+		--green-surface: #13251b80;
+		--green-indicator: #30a46c;
+		--green-track: #30a46c;
+
+		/* amber */
+		--amber-1: #13110c;
+		--amber-2: #1c1810;
+		--amber-3: #2c220c;
+		--amber-4: #3b2900;
+		--amber-5: #483300;
+		--amber-6: #554112;
+		--amber-7: #695323;
+		--amber-8: #84692e;
+		--amber-9: #ffc53d;
+		--amber-10: #f4bb2e;
+		--amber-11: #ffcc4c;
+		--amber-12: #fee7ba;
+
+		--amber-a1: #bb110003;
+		--amber-a2: #fba6000c;
+		--amber-a3: #ffa7001d;
+		--amber-a4: #ff99002d;
+		--amber-a5: #ffa4003b;
+		--amber-a6: #ffb91549;
+		--amber-a7: #fdc2415f;
+		--amber-a8: #fdc64d7c;
+		--amber-a9: #ffc53d;
+		--amber-a10: #fec22ff4;
+		--amber-a11: #ffcc4c;
+		--amber-a12: #ffe8bbfe;
+
+		--amber-contrast: #2b2009;
+		--amber-surface: #271f1080;
+		--amber-indicator: #ffc53d;
+		--amber-track: #ffc53d;
+	}
+}