@vector-im/compound-design-tokens 0.0.2

package/assets/web/css/cpd-dark-mq.css

@@ -0,0 +1,156 @@
+:root {
+  --cpd-color-pink-1400: #410015;
+  --cpd-color-pink-1300: #4a001c;
+  --cpd-color-pink-1200: #64002f;
+  --cpd-color-pink-1100: #72003a;
+  --cpd-color-pink-1000: #840745;
+  --cpd-color-pink-900: #92084b;
+  --cpd-color-pink-800: #e00c6a;
+  --cpd-color-pink-700: #f94e84;
+  --cpd-color-pink-600: #ff88a6;
+  --cpd-color-pink-500: #ffadc0;
+  --cpd-color-pink-400: #ffd0da;
+  --cpd-color-pink-300: #ffdee5;
+  --cpd-color-pink-200: #ffecf0;
+  --cpd-color-pink-100: #fff5f7;
+  --cpd-color-fuchsia-1400: #32004a;
+  --cpd-color-fuchsia-1300: #3b0053;
+  --cpd-color-fuchsia-1200: #52026c;
+  --cpd-color-fuchsia-1100: #5c0f76;
+  --cpd-color-fuchsia-1000: #6c1785;
+  --cpd-color-fuchsia-900: #781c90;
+  --cpd-color-fuchsia-800: #b937c6;
+  --cpd-color-fuchsia-700: #cb68d4;
+  --cpd-color-fuchsia-600: #db93e1;
+  --cpd-color-fuchsia-500: #e7b2ea;
+  --cpd-color-fuchsia-400: #f1d2f3;
+  --cpd-color-fuchsia-300: #f6dff7;
+  --cpd-color-fuchsia-200: #faeefb;
+  --cpd-color-fuchsia-100: #fcf5fd;
+  --cpd-color-purple-1400: #1f0062;
+  --cpd-color-purple-1300: #240070;
+  --cpd-color-purple-1200: #360094;
+  --cpd-color-purple-1100: #4200a6;
+  --cpd-color-purple-1000: #4f0dba;
+  --cpd-color-purple-900: #571cc4;
+  --cpd-color-purple-800: #824ef9;
+  --cpd-color-purple-700: #9778fe;
+  --cpd-color-purple-600: #b1a0ff;
+  --cpd-color-purple-500: #c5bbff;
+  --cpd-color-purple-400: #ddd8ff;
+  --cpd-color-purple-300: #e6e2ff;
+  --cpd-color-purple-200: #f1efff;
+  --cpd-color-purple-100: #f8f7ff;
+  --cpd-color-blue-1400: #000c63;
+  --cpd-color-blue-1300: #001569;
+  --cpd-color-blue-1200: #03277b;
+  --cpd-color-blue-1100: #043088;
+  --cpd-color-blue-1000: #053b9a;
+  --cpd-color-blue-900: #0543a7;
+  --cpd-color-blue-800: #046ee8;
+  --cpd-color-blue-700: #4a8ef0;
+  --cpd-color-blue-600: #7eaff6;
+  --cpd-color-blue-500: #a3c6fa;
+  --cpd-color-blue-400: #c8ddfd;
+  --cpd-color-blue-300: #d8e7fe;
+  --cpd-color-blue-200: #e9f2ff;
+  --cpd-color-blue-100: #f4f8ff;
+  --cpd-color-cyan-1400: #00174d;
+  --cpd-color-cyan-1300: #001e53;
+  --cpd-color-cyan-1200: #002e64;
+  --cpd-color-cyan-1100: #00376e;
+  --cpd-color-cyan-1000: #00447b;
+  --cpd-color-cyan-900: #004c84;
+  --cpd-color-cyan-800: #007ab3;
+  --cpd-color-cyan-700: #009ac3;
+  --cpd-color-cyan-600: #15becf;
+  --cpd-color-cyan-500: #76d1dd;
+  --cpd-color-cyan-400: #b1e4eb;
+  --cpd-color-cyan-300: #c7ecf0;
+  --cpd-color-cyan-200: #e3f5f8;
+  --cpd-color-cyan-100: #f1fafb;
+  --cpd-color-green-1400: #00210f;
+  --cpd-color-green-1300: #002715;
+  --cpd-color-green-1200: #003723;
+  --cpd-color-green-1100: #00402b;
+  --cpd-color-green-1000: #004d36;
+  --cpd-color-green-900: #00553d;
+  --cpd-color-green-800: #008268;
+  --cpd-color-green-700: #00a27c;
+  --cpd-color-green-600: #0bc491;
+  --cpd-color-green-500: #71d7ae;
+  --cpd-color-green-400: #afe8ce;
+  --cpd-color-green-300: #c6eedb;
+  --cpd-color-green-200: #e3f7ed;
+  --cpd-color-green-100: #f1fbf6;
+  --cpd-color-lime-1400: #002200;
+  --cpd-color-lime-1300: #002900;
+  --cpd-color-lime-1200: #003900;
+  --cpd-color-lime-1100: #004200;
+  --cpd-color-lime-1000: #004f00;
+  --cpd-color-lime-900: #005700;
+  --cpd-color-lime-800: #1f850f;
+  --cpd-color-lime-700: #3aa31a;
+  --cpd-color-lime-600: #54c424;
+  --cpd-color-lime-500: #76db4c;
+  --cpd-color-lime-400: #afeb9b;
+  --cpd-color-lime-300: #c8f1ba;
+  --cpd-color-lime-200: #e0f8d9;
+  --cpd-color-lime-100: #f1fcee;
+  --cpd-color-yellow-1400: #3f0500;
+  --cpd-color-yellow-1300: #450c00;
+  --cpd-color-yellow-1200: #571d00;
+  --cpd-color-yellow-1100: #612600;
+  --cpd-color-yellow-1000: #6e3100;
+  --cpd-color-yellow-900: #773800;
+  --cpd-color-yellow-800: #a76300;
+  --cpd-color-yellow-700: #c38100;
+  --cpd-color-yellow-600: #dea200;
+  --cpd-color-yellow-500: #f1bd00;
+  --cpd-color-yellow-400: #ffda49;
+  --cpd-color-yellow-300: #ffe484;
+  --cpd-color-yellow-200: #fff2c1;
+  --cpd-color-yellow-100: #fff8e0;
+  --cpd-color-orange-1400: #420000;
+  --cpd-color-orange-1300: #4c0000;
+  --cpd-color-orange-1200: #670000;
+  --cpd-color-orange-1100: #770000;
+  --cpd-color-orange-1000: #890800;
+  --cpd-color-orange-900: #931700;
+  --cpd-color-orange-800: #c44d00;
+  --cpd-color-orange-700: #e26e00;
+  --cpd-color-orange-600: #f89440;
+  --cpd-color-orange-500: #fdb37c;
+  --cpd-color-orange-400: #ffd4b5;
+  --cpd-color-orange-300: #ffdfc8;
+  --cpd-color-orange-200: #ffefe4;
+  --cpd-color-orange-100: #fff6ef;
+  --cpd-color-red-1400: #420000;
+  --cpd-color-red-1300: #4c0000;
+  --cpd-color-red-1200: #670000;
+  --cpd-color-red-1100: #770000;
+  --cpd-color-red-1000: #8b000c;
+  --cpd-color-red-900: #99001a;
+  --cpd-color-red-800: #e11e2a;
+  --cpd-color-red-700: #ff4e49;
+  --cpd-color-red-600: #ff8c81;
+  --cpd-color-red-500: #ffafa5;
+  --cpd-color-red-400: #ffd1ca;
+  --cpd-color-red-300: #ffdfda;
+  --cpd-color-red-200: #ffefec;
+  --cpd-color-red-100: #fff7f6;
+  --cpd-color-gray-1400: #0e1d2d;
+  --cpd-color-gray-1300: #122233;
+  --cpd-color-gray-1200: #213143;
+  --cpd-color-gray-1100: #293a4b;
+  --cpd-color-gray-1000: #324456;
+  --cpd-color-gray-900: #3a4b5e;
+  --cpd-color-gray-800: #627589;
+  --cpd-color-gray-700: #8090a2;
+  --cpd-color-gray-600: #a2aebc;
+  --cpd-color-gray-500: #bcc5ce;
+  --cpd-color-gray-400: #d8dde3;
+  --cpd-color-gray-300: #e2e6ea;
+  --cpd-color-gray-200: #eef1f3;
+  --cpd-color-gray-100: #f7f8f9;
+}

package/assets/web/css/cpd-dark.css

@@ -0,0 +1,156 @@
+.cpd-theme-dark {
+  --cpd-color-pink-1400: #410015;
+  --cpd-color-pink-1300: #4a001c;
+  --cpd-color-pink-1200: #64002f;
+  --cpd-color-pink-1100: #72003a;
+  --cpd-color-pink-1000: #840745;
+  --cpd-color-pink-900: #92084b;
+  --cpd-color-pink-800: #e00c6a;
+  --cpd-color-pink-700: #f94e84;
+  --cpd-color-pink-600: #ff88a6;
+  --cpd-color-pink-500: #ffadc0;
+  --cpd-color-pink-400: #ffd0da;
+  --cpd-color-pink-300: #ffdee5;
+  --cpd-color-pink-200: #ffecf0;
+  --cpd-color-pink-100: #fff5f7;
+  --cpd-color-fuchsia-1400: #32004a;
+  --cpd-color-fuchsia-1300: #3b0053;
+  --cpd-color-fuchsia-1200: #52026c;
+  --cpd-color-fuchsia-1100: #5c0f76;
+  --cpd-color-fuchsia-1000: #6c1785;
+  --cpd-color-fuchsia-900: #781c90;
+  --cpd-color-fuchsia-800: #b937c6;
+  --cpd-color-fuchsia-700: #cb68d4;
+  --cpd-color-fuchsia-600: #db93e1;
+  --cpd-color-fuchsia-500: #e7b2ea;
+  --cpd-color-fuchsia-400: #f1d2f3;
+  --cpd-color-fuchsia-300: #f6dff7;
+  --cpd-color-fuchsia-200: #faeefb;
+  --cpd-color-fuchsia-100: #fcf5fd;
+  --cpd-color-purple-1400: #1f0062;
+  --cpd-color-purple-1300: #240070;
+  --cpd-color-purple-1200: #360094;
+  --cpd-color-purple-1100: #4200a6;
+  --cpd-color-purple-1000: #4f0dba;
+  --cpd-color-purple-900: #571cc4;
+  --cpd-color-purple-800: #824ef9;
+  --cpd-color-purple-700: #9778fe;
+  --cpd-color-purple-600: #b1a0ff;
+  --cpd-color-purple-500: #c5bbff;
+  --cpd-color-purple-400: #ddd8ff;
+  --cpd-color-purple-300: #e6e2ff;
+  --cpd-color-purple-200: #f1efff;
+  --cpd-color-purple-100: #f8f7ff;
+  --cpd-color-blue-1400: #000c63;
+  --cpd-color-blue-1300: #001569;
+  --cpd-color-blue-1200: #03277b;
+  --cpd-color-blue-1100: #043088;
+  --cpd-color-blue-1000: #053b9a;
+  --cpd-color-blue-900: #0543a7;
+  --cpd-color-blue-800: #046ee8;
+  --cpd-color-blue-700: #4a8ef0;
+  --cpd-color-blue-600: #7eaff6;
+  --cpd-color-blue-500: #a3c6fa;
+  --cpd-color-blue-400: #c8ddfd;
+  --cpd-color-blue-300: #d8e7fe;
+  --cpd-color-blue-200: #e9f2ff;
+  --cpd-color-blue-100: #f4f8ff;
+  --cpd-color-cyan-1400: #00174d;
+  --cpd-color-cyan-1300: #001e53;
+  --cpd-color-cyan-1200: #002e64;
+  --cpd-color-cyan-1100: #00376e;
+  --cpd-color-cyan-1000: #00447b;
+  --cpd-color-cyan-900: #004c84;
+  --cpd-color-cyan-800: #007ab3;
+  --cpd-color-cyan-700: #009ac3;
+  --cpd-color-cyan-600: #15becf;
+  --cpd-color-cyan-500: #76d1dd;
+  --cpd-color-cyan-400: #b1e4eb;
+  --cpd-color-cyan-300: #c7ecf0;
+  --cpd-color-cyan-200: #e3f5f8;
+  --cpd-color-cyan-100: #f1fafb;
+  --cpd-color-green-1400: #00210f;
+  --cpd-color-green-1300: #002715;
+  --cpd-color-green-1200: #003723;
+  --cpd-color-green-1100: #00402b;
+  --cpd-color-green-1000: #004d36;
+  --cpd-color-green-900: #00553d;
+  --cpd-color-green-800: #008268;
+  --cpd-color-green-700: #00a27c;
+  --cpd-color-green-600: #0bc491;
+  --cpd-color-green-500: #71d7ae;
+  --cpd-color-green-400: #afe8ce;
+  --cpd-color-green-300: #c6eedb;
+  --cpd-color-green-200: #e3f7ed;
+  --cpd-color-green-100: #f1fbf6;
+  --cpd-color-lime-1400: #002200;
+  --cpd-color-lime-1300: #002900;
+  --cpd-color-lime-1200: #003900;
+  --cpd-color-lime-1100: #004200;
+  --cpd-color-lime-1000: #004f00;
+  --cpd-color-lime-900: #005700;
+  --cpd-color-lime-800: #1f850f;
+  --cpd-color-lime-700: #3aa31a;
+  --cpd-color-lime-600: #54c424;
+  --cpd-color-lime-500: #76db4c;
+  --cpd-color-lime-400: #afeb9b;
+  --cpd-color-lime-300: #c8f1ba;
+  --cpd-color-lime-200: #e0f8d9;
+  --cpd-color-lime-100: #f1fcee;
+  --cpd-color-yellow-1400: #3f0500;
+  --cpd-color-yellow-1300: #450c00;
+  --cpd-color-yellow-1200: #571d00;
+  --cpd-color-yellow-1100: #612600;
+  --cpd-color-yellow-1000: #6e3100;
+  --cpd-color-yellow-900: #773800;
+  --cpd-color-yellow-800: #a76300;
+  --cpd-color-yellow-700: #c38100;
+  --cpd-color-yellow-600: #dea200;
+  --cpd-color-yellow-500: #f1bd00;
+  --cpd-color-yellow-400: #ffda49;
+  --cpd-color-yellow-300: #ffe484;
+  --cpd-color-yellow-200: #fff2c1;
+  --cpd-color-yellow-100: #fff8e0;
+  --cpd-color-orange-1400: #420000;
+  --cpd-color-orange-1300: #4c0000;
+  --cpd-color-orange-1200: #670000;
+  --cpd-color-orange-1100: #770000;
+  --cpd-color-orange-1000: #890800;
+  --cpd-color-orange-900: #931700;
+  --cpd-color-orange-800: #c44d00;
+  --cpd-color-orange-700: #e26e00;
+  --cpd-color-orange-600: #f89440;
+  --cpd-color-orange-500: #fdb37c;
+  --cpd-color-orange-400: #ffd4b5;
+  --cpd-color-orange-300: #ffdfc8;
+  --cpd-color-orange-200: #ffefe4;
+  --cpd-color-orange-100: #fff6ef;
+  --cpd-color-red-1400: #420000;
+  --cpd-color-red-1300: #4c0000;
+  --cpd-color-red-1200: #670000;
+  --cpd-color-red-1100: #770000;
+  --cpd-color-red-1000: #8b000c;
+  --cpd-color-red-900: #99001a;
+  --cpd-color-red-800: #e11e2a;
+  --cpd-color-red-700: #ff4e49;
+  --cpd-color-red-600: #ff8c81;
+  --cpd-color-red-500: #ffafa5;
+  --cpd-color-red-400: #ffd1ca;
+  --cpd-color-red-300: #ffdfda;
+  --cpd-color-red-200: #ffefec;
+  --cpd-color-red-100: #fff7f6;
+  --cpd-color-gray-1400: #0e1d2d;
+  --cpd-color-gray-1300: #122233;
+  --cpd-color-gray-1200: #213143;
+  --cpd-color-gray-1100: #293a4b;
+  --cpd-color-gray-1000: #324456;
+  --cpd-color-gray-900: #3a4b5e;
+  --cpd-color-gray-800: #627589;
+  --cpd-color-gray-700: #8090a2;
+  --cpd-color-gray-600: #a2aebc;
+  --cpd-color-gray-500: #bcc5ce;
+  --cpd-color-gray-400: #d8dde3;
+  --cpd-color-gray-300: #e2e6ea;
+  --cpd-color-gray-200: #eef1f3;
+  --cpd-color-gray-100: #f7f8f9;
+}

package/assets/web/css/cpd-light-hc-mq.css

@@ -0,0 +1,156 @@
+:root {
+  --cpd-color-pink-1400: #ffe7ec;
+  --cpd-color-pink-1300: #ffd1db;
+  --cpd-color-pink-1200: #ffabbd;
+  --cpd-color-pink-1100: #fe84a2;
+  --cpd-color-pink-1000: #fa648f;
+  --cpd-color-pink-900: #f4417d;
+  --cpd-color-pink-800: #ce1865;
+  --cpd-color-pink-700: #98114f;
+  --cpd-color-pink-600: #7b0c41;
+  --cpd-color-pink-500: #6c0035;
+  --cpd-color-pink-400: #550024;
+  --cpd-color-pink-300: #450018;
+  --cpd-color-pink-200: #3c0012;
+  --cpd-color-pink-100: #37000f;
+  --cpd-color-fuchsia-1400: #f8e8f9;
+  --cpd-color-fuchsia-1300: #f1d4f3;
+  --cpd-color-fuchsia-1200: #e5b1e9;
+  --cpd-color-fuchsia-1100: #d990de;
+  --cpd-color-fuchsia-1000: #cf78d7;
+  --cpd-color-fuchsia-900: #c55fcf;
+  --cpd-color-fuchsia-800: #aa36ba;
+  --cpd-color-fuchsia-700: #7d2394;
+  --cpd-color-fuchsia-600: #65177d;
+  --cpd-color-fuchsia-500: #560f6f;
+  --cpd-color-fuchsia-400: #44005c;
+  --cpd-color-fuchsia-300: #37004e;
+  --cpd-color-fuchsia-200: #2c0042;
+  --cpd-color-fuchsia-100: #28003d;
+  --cpd-color-purple-1400: #eeebff;
+  --cpd-color-purple-1300: #ded9ff;
+  --cpd-color-purple-1200: #c4baff;
+  --cpd-color-purple-1100: #ad9cfe;
+  --cpd-color-purple-1000: #9e86fc;
+  --cpd-color-purple-900: #9170f9;
+  --cpd-color-purple-800: #7848ec;
+  --cpd-color-purple-700: #5a27c6;
+  --cpd-color-purple-600: #490bb1;
+  --cpd-color-purple-500: #3d009e;
+  --cpd-color-purple-400: #2c0080;
+  --cpd-color-purple-300: #210068;
+  --cpd-color-purple-200: #1c005a;
+  --cpd-color-purple-100: #180050;
+  --cpd-color-blue-1400: #e4eefe;
+  --cpd-color-blue-1300: #cadefc;
+  --cpd-color-blue-1200: #a1c4f8;
+  --cpd-color-blue-1100: #7aabf4;
+  --cpd-color-blue-1000: #5e99f0;
+  --cpd-color-blue-900: #4187eb;
+  --cpd-color-blue-800: #0e67d8;
+  --cpd-color-blue-700: #0b48ab;
+  --cpd-color-blue-600: #083890;
+  --cpd-color-blue-500: #062d80;
+  --cpd-color-blue-400: #001d6e;
+  --cpd-color-blue-300: #001063;
+  --cpd-color-blue-200: #00095d;
+  --cpd-color-blue-100: #00055a;
+  --cpd-color-cyan-1400: #d9f2f5;
+  --cpd-color-cyan-1300: #b8e5eb;
+  --cpd-color-cyan-1200: #76d0db;
+  --cpd-color-cyan-1100: #21bacd;
+  --cpd-color-cyan-1000: #01a6c6;
+  --cpd-color-cyan-900: #0093be;
+  --cpd-color-cyan-800: #0271aa;
+  --cpd-color-cyan-700: #005188;
+  --cpd-color-cyan-600: #003f74;
+  --cpd-color-cyan-500: #003468;
+  --cpd-color-cyan-400: #002559;
+  --cpd-color-cyan-300: #001b4e;
+  --cpd-color-cyan-200: #001448;
+  --cpd-color-cyan-100: #001144;
+  --cpd-color-green-1400: #d9f3e7;
+  --cpd-color-green-1300: #b5e8d1;
+  --cpd-color-green-1200: #70d5ad;
+  --cpd-color-green-1100: #1fc090;
+  --cpd-color-green-1000: #17ac84;
+  --cpd-color-green-900: #129978;
+  --cpd-color-green-800: #007961;
+  --cpd-color-green-700: #005a43;
+  --cpd-color-green-600: #004832;
+  --cpd-color-green-500: #003d29;
+  --cpd-color-green-400: #002e1b;
+  --cpd-color-green-300: #002513;
+  --cpd-color-green-200: #001f0e;
+  --cpd-color-green-100: #001c0b;
+  --cpd-color-lime-1400: #daf6d0;
+  --cpd-color-lime-1300: #b6eba3;
+  --cpd-color-lime-1200: #76d94d;
+  --cpd-color-lime-1100: #56c02c;
+  --cpd-color-lime-1000: #47ad26;
+  --cpd-color-lime-900: #389b20;
+  --cpd-color-lime-800: #1d7c13;
+  --cpd-color-lime-700: #005c00;
+  --cpd-color-lime-600: #004a00;
+  --cpd-color-lime-500: #003e00;
+  --cpd-color-lime-400: #002f00;
+  --cpd-color-lime-300: #002500;
+  --cpd-color-lime-200: #001e00;
+  --cpd-color-lime-100: #001b00;
+  --cpd-color-yellow-1400: #ffedb0;
+  --cpd-color-yellow-1300: #fedb52;
+  --cpd-color-yellow-1200: #efbb0b;
+  --cpd-color-yellow-1100: #db9f00;
+  --cpd-color-yellow-1000: #cc8c00;
+  --cpd-color-yellow-900: #bb7a00;
+  --cpd-color-yellow-800: #9d5b00;
+  --cpd-color-yellow-700: #7b3e03;
+  --cpd-color-yellow-600: #682e03;
+  --cpd-color-yellow-500: #5b2300;
+  --cpd-color-yellow-400: #4c1400;
+  --cpd-color-yellow-300: #410900;
+  --cpd-color-yellow-200: #3a0300;
+  --cpd-color-yellow-100: #360000;
+  --cpd-color-orange-1400: #ffe9db;
+  --cpd-color-orange-1300: #ffd5b8;
+  --cpd-color-orange-1200: #fbb27e;
+  --cpd-color-orange-1100: #f6913d;
+  --cpd-color-orange-1000: #ea7a12;
+  --cpd-color-orange-900: #d9670d;
+  --cpd-color-orange-800: #b94607;
+  --cpd-color-orange-700: #972105;
+  --cpd-color-orange-600: #820300;
+  --cpd-color-orange-500: #710000;
+  --cpd-color-orange-400: #580000;
+  --cpd-color-orange-300: #470000;
+  --cpd-color-orange-200: #3c0000;
+  --cpd-color-orange-100: #380000;
+  --cpd-color-red-1400: #ffe8e5;
+  --cpd-color-red-1300: #ffd3cd;
+  --cpd-color-red-1200: #ffaea4;
+  --cpd-color-red-1100: #ff877b;
+  --cpd-color-red-1000: #ff665d;
+  --cpd-color-red-900: #fd3d3c;
+  --cpd-color-red-800: #d0212a;
+  --cpd-color-red-700: #9e0c1e;
+  --cpd-color-red-600: #830009;
+  --cpd-color-red-500: #710000;
+  --cpd-color-red-400: #570000;
+  --cpd-color-red-300: #470000;
+  --cpd-color-red-200: #3b0000;
+  --cpd-color-red-100: #370000;
+  --cpd-color-gray-1400: #ebedf0;
+  --cpd-color-gray-1300: #d9dde3;
+  --cpd-color-gray-1200: #bbc3cd;
+  --cpd-color-gray-1100: #9fabb8;
+  --cpd-color-gray-1000: #8c9aaa;
+  --cpd-color-gray-900: #79899b;
+  --cpd-color-gray-800: #5b6d7f;
+  --cpd-color-gray-700: #3f5062;
+  --cpd-color-gray-600: #304051;
+  --cpd-color-gray-500: #263646;
+  --cpd-color-gray-400: #1a2939;
+  --cpd-color-gray-300: #11202f;
+  --cpd-color-gray-200: #0c1b29;
+  --cpd-color-gray-100: #081725;
+}

package/assets/web/css/cpd-light-hc.css

@@ -0,0 +1,156 @@
+.cpd-theme-light-hc {
+  --cpd-color-pink-1400: #ffe7ec;
+  --cpd-color-pink-1300: #ffd1db;
+  --cpd-color-pink-1200: #ffabbd;
+  --cpd-color-pink-1100: #fe84a2;
+  --cpd-color-pink-1000: #fa648f;
+  --cpd-color-pink-900: #f4417d;
+  --cpd-color-pink-800: #ce1865;
+  --cpd-color-pink-700: #98114f;
+  --cpd-color-pink-600: #7b0c41;
+  --cpd-color-pink-500: #6c0035;
+  --cpd-color-pink-400: #550024;
+  --cpd-color-pink-300: #450018;
+  --cpd-color-pink-200: #3c0012;
+  --cpd-color-pink-100: #37000f;
+  --cpd-color-fuchsia-1400: #f8e8f9;
+  --cpd-color-fuchsia-1300: #f1d4f3;
+  --cpd-color-fuchsia-1200: #e5b1e9;
+  --cpd-color-fuchsia-1100: #d990de;
+  --cpd-color-fuchsia-1000: #cf78d7;
+  --cpd-color-fuchsia-900: #c55fcf;
+  --cpd-color-fuchsia-800: #aa36ba;
+  --cpd-color-fuchsia-700: #7d2394;
+  --cpd-color-fuchsia-600: #65177d;
+  --cpd-color-fuchsia-500: #560f6f;
+  --cpd-color-fuchsia-400: #44005c;
+  --cpd-color-fuchsia-300: #37004e;
+  --cpd-color-fuchsia-200: #2c0042;
+  --cpd-color-fuchsia-100: #28003d;
+  --cpd-color-purple-1400: #eeebff;
+  --cpd-color-purple-1300: #ded9ff;
+  --cpd-color-purple-1200: #c4baff;
+  --cpd-color-purple-1100: #ad9cfe;
+  --cpd-color-purple-1000: #9e86fc;
+  --cpd-color-purple-900: #9170f9;
+  --cpd-color-purple-800: #7848ec;
+  --cpd-color-purple-700: #5a27c6;
+  --cpd-color-purple-600: #490bb1;
+  --cpd-color-purple-500: #3d009e;
+  --cpd-color-purple-400: #2c0080;
+  --cpd-color-purple-300: #210068;
+  --cpd-color-purple-200: #1c005a;
+  --cpd-color-purple-100: #180050;
+  --cpd-color-blue-1400: #e4eefe;
+  --cpd-color-blue-1300: #cadefc;
+  --cpd-color-blue-1200: #a1c4f8;
+  --cpd-color-blue-1100: #7aabf4;
+  --cpd-color-blue-1000: #5e99f0;
+  --cpd-color-blue-900: #4187eb;
+  --cpd-color-blue-800: #0e67d8;
+  --cpd-color-blue-700: #0b48ab;
+  --cpd-color-blue-600: #083890;
+  --cpd-color-blue-500: #062d80;
+  --cpd-color-blue-400: #001d6e;
+  --cpd-color-blue-300: #001063;
+  --cpd-color-blue-200: #00095d;
+  --cpd-color-blue-100: #00055a;
+  --cpd-color-cyan-1400: #d9f2f5;
+  --cpd-color-cyan-1300: #b8e5eb;
+  --cpd-color-cyan-1200: #76d0db;
+  --cpd-color-cyan-1100: #21bacd;
+  --cpd-color-cyan-1000: #01a6c6;
+  --cpd-color-cyan-900: #0093be;
+  --cpd-color-cyan-800: #0271aa;
+  --cpd-color-cyan-700: #005188;
+  --cpd-color-cyan-600: #003f74;
+  --cpd-color-cyan-500: #003468;
+  --cpd-color-cyan-400: #002559;
+  --cpd-color-cyan-300: #001b4e;
+  --cpd-color-cyan-200: #001448;
+  --cpd-color-cyan-100: #001144;
+  --cpd-color-green-1400: #d9f3e7;
+  --cpd-color-green-1300: #b5e8d1;
+  --cpd-color-green-1200: #70d5ad;
+  --cpd-color-green-1100: #1fc090;
+  --cpd-color-green-1000: #17ac84;
+  --cpd-color-green-900: #129978;
+  --cpd-color-green-800: #007961;
+  --cpd-color-green-700: #005a43;
+  --cpd-color-green-600: #004832;
+  --cpd-color-green-500: #003d29;
+  --cpd-color-green-400: #002e1b;
+  --cpd-color-green-300: #002513;
+  --cpd-color-green-200: #001f0e;
+  --cpd-color-green-100: #001c0b;
+  --cpd-color-lime-1400: #daf6d0;
+  --cpd-color-lime-1300: #b6eba3;
+  --cpd-color-lime-1200: #76d94d;
+  --cpd-color-lime-1100: #56c02c;
+  --cpd-color-lime-1000: #47ad26;
+  --cpd-color-lime-900: #389b20;
+  --cpd-color-lime-800: #1d7c13;
+  --cpd-color-lime-700: #005c00;
+  --cpd-color-lime-600: #004a00;
+  --cpd-color-lime-500: #003e00;
+  --cpd-color-lime-400: #002f00;
+  --cpd-color-lime-300: #002500;
+  --cpd-color-lime-200: #001e00;
+  --cpd-color-lime-100: #001b00;
+  --cpd-color-yellow-1400: #ffedb0;
+  --cpd-color-yellow-1300: #fedb52;
+  --cpd-color-yellow-1200: #efbb0b;
+  --cpd-color-yellow-1100: #db9f00;
+  --cpd-color-yellow-1000: #cc8c00;
+  --cpd-color-yellow-900: #bb7a00;
+  --cpd-color-yellow-800: #9d5b00;
+  --cpd-color-yellow-700: #7b3e03;
+  --cpd-color-yellow-600: #682e03;
+  --cpd-color-yellow-500: #5b2300;
+  --cpd-color-yellow-400: #4c1400;
+  --cpd-color-yellow-300: #410900;
+  --cpd-color-yellow-200: #3a0300;
+  --cpd-color-yellow-100: #360000;
+  --cpd-color-orange-1400: #ffe9db;
+  --cpd-color-orange-1300: #ffd5b8;
+  --cpd-color-orange-1200: #fbb27e;
+  --cpd-color-orange-1100: #f6913d;
+  --cpd-color-orange-1000: #ea7a12;
+  --cpd-color-orange-900: #d9670d;
+  --cpd-color-orange-800: #b94607;
+  --cpd-color-orange-700: #972105;
+  --cpd-color-orange-600: #820300;
+  --cpd-color-orange-500: #710000;
+  --cpd-color-orange-400: #580000;
+  --cpd-color-orange-300: #470000;
+  --cpd-color-orange-200: #3c0000;
+  --cpd-color-orange-100: #380000;
+  --cpd-color-red-1400: #ffe8e5;
+  --cpd-color-red-1300: #ffd3cd;
+  --cpd-color-red-1200: #ffaea4;
+  --cpd-color-red-1100: #ff877b;
+  --cpd-color-red-1000: #ff665d;
+  --cpd-color-red-900: #fd3d3c;
+  --cpd-color-red-800: #d0212a;
+  --cpd-color-red-700: #9e0c1e;
+  --cpd-color-red-600: #830009;
+  --cpd-color-red-500: #710000;
+  --cpd-color-red-400: #570000;
+  --cpd-color-red-300: #470000;
+  --cpd-color-red-200: #3b0000;
+  --cpd-color-red-100: #370000;
+  --cpd-color-gray-1400: #ebedf0;
+  --cpd-color-gray-1300: #d9dde3;
+  --cpd-color-gray-1200: #bbc3cd;
+  --cpd-color-gray-1100: #9fabb8;
+  --cpd-color-gray-1000: #8c9aaa;
+  --cpd-color-gray-900: #79899b;
+  --cpd-color-gray-800: #5b6d7f;
+  --cpd-color-gray-700: #3f5062;
+  --cpd-color-gray-600: #304051;
+  --cpd-color-gray-500: #263646;
+  --cpd-color-gray-400: #1a2939;
+  --cpd-color-gray-300: #11202f;
+  --cpd-color-gray-200: #0c1b29;
+  --cpd-color-gray-100: #081725;
+}