@sdata/web-vue 4.7.1 → 5.0.0

package/es/style/color/css-variables.scss

@@ -19,387 +19,388 @@
 }
 
 #{theme.$sd-theme-tag} {
-  #{theme.$sd-cssvars-prefix}-red-1: 255, 236, 232;
-  #{theme.$sd-cssvars-prefix}-red-2: 253, 205, 197;
-  #{theme.$sd-cssvars-prefix}-red-3: 251, 172, 163;
-  #{theme.$sd-cssvars-prefix}-red-4: 249, 137, 129;
-  #{theme.$sd-cssvars-prefix}-red-5: 247, 101, 96;
-  #{theme.$sd-cssvars-prefix}-red-6: 245, 63, 63;
-  #{theme.$sd-cssvars-prefix}-red-7: 203, 39, 45;
-  #{theme.$sd-cssvars-prefix}-red-8: 161, 21, 30;
-  #{theme.$sd-cssvars-prefix}-red-9: 119, 8, 19;
-  #{theme.$sd-cssvars-prefix}-red-10: 77, 0, 10;
-  #{theme.$sd-cssvars-prefix}-orangered-1: 255, 243, 232;
-  #{theme.$sd-cssvars-prefix}-orangered-2: 253, 221, 195;
-  #{theme.$sd-cssvars-prefix}-orangered-3: 252, 197, 159;
-  #{theme.$sd-cssvars-prefix}-orangered-4: 250, 172, 123;
-  #{theme.$sd-cssvars-prefix}-orangered-5: 249, 144, 87;
-  #{theme.$sd-cssvars-prefix}-orangered-6: 247, 114, 52;
-  #{theme.$sd-cssvars-prefix}-orangered-7: 204, 81, 32;
-  #{theme.$sd-cssvars-prefix}-orangered-8: 162, 53, 17;
-  #{theme.$sd-cssvars-prefix}-orangered-9: 119, 31, 6;
-  #{theme.$sd-cssvars-prefix}-orangered-10: 77, 14, 0;
-  #{theme.$sd-cssvars-prefix}-orange-1: 255, 247, 232;
-  #{theme.$sd-cssvars-prefix}-orange-2: 255, 228, 186;
-  #{theme.$sd-cssvars-prefix}-orange-3: 255, 207, 139;
-  #{theme.$sd-cssvars-prefix}-orange-4: 255, 182, 93;
-  #{theme.$sd-cssvars-prefix}-orange-5: 255, 154, 46;
-  #{theme.$sd-cssvars-prefix}-orange-6: 255, 125, 0;
-  #{theme.$sd-cssvars-prefix}-orange-7: 210, 95, 0;
-  #{theme.$sd-cssvars-prefix}-orange-8: 166, 69, 0;
-  #{theme.$sd-cssvars-prefix}-orange-9: 121, 46, 0;
-  #{theme.$sd-cssvars-prefix}-orange-10: 77, 27, 0;
-  #{theme.$sd-cssvars-prefix}-gold-1: 255, 252, 232;
-  #{theme.$sd-cssvars-prefix}-gold-2: 253, 244, 191;
-  #{theme.$sd-cssvars-prefix}-gold-3: 252, 233, 150;
-  #{theme.$sd-cssvars-prefix}-gold-4: 250, 220, 109;
-  #{theme.$sd-cssvars-prefix}-gold-5: 249, 204, 69;
-  #{theme.$sd-cssvars-prefix}-gold-6: 247, 186, 30;
-  #{theme.$sd-cssvars-prefix}-gold-7: 204, 146, 19;
-  #{theme.$sd-cssvars-prefix}-gold-8: 162, 109, 10;
-  #{theme.$sd-cssvars-prefix}-gold-9: 119, 75, 4;
-  #{theme.$sd-cssvars-prefix}-gold-10: 77, 45, 0;
-  #{theme.$sd-cssvars-prefix}-yellow-1: 254, 255, 232;
-  #{theme.$sd-cssvars-prefix}-yellow-2: 254, 254, 190;
-  #{theme.$sd-cssvars-prefix}-yellow-3: 253, 250, 148;
-  #{theme.$sd-cssvars-prefix}-yellow-4: 252, 242, 107;
-  #{theme.$sd-cssvars-prefix}-yellow-5: 251, 232, 66;
-  #{theme.$sd-cssvars-prefix}-yellow-6: 250, 220, 25;
-  #{theme.$sd-cssvars-prefix}-yellow-7: 207, 175, 15;
-  #{theme.$sd-cssvars-prefix}-yellow-8: 163, 132, 8;
-  #{theme.$sd-cssvars-prefix}-yellow-9: 120, 93, 3;
-  #{theme.$sd-cssvars-prefix}-yellow-10: 77, 56, 0;
-  #{theme.$sd-cssvars-prefix}-lime-1: 252, 255, 232;
-  #{theme.$sd-cssvars-prefix}-lime-2: 237, 248, 187;
-  #{theme.$sd-cssvars-prefix}-lime-3: 220, 241, 144;
-  #{theme.$sd-cssvars-prefix}-lime-4: 201, 233, 104;
-  #{theme.$sd-cssvars-prefix}-lime-5: 181, 226, 65;
-  #{theme.$sd-cssvars-prefix}-lime-6: 159, 219, 29;
-  #{theme.$sd-cssvars-prefix}-lime-7: 126, 183, 18;
-  #{theme.$sd-cssvars-prefix}-lime-8: 95, 148, 10;
-  #{theme.$sd-cssvars-prefix}-lime-9: 67, 112, 4;
-  #{theme.$sd-cssvars-prefix}-lime-10: 42, 77, 0;
-  #{theme.$sd-cssvars-prefix}-green-1: 232, 255, 234;
-  #{theme.$sd-cssvars-prefix}-green-2: 175, 240, 181;
-  #{theme.$sd-cssvars-prefix}-green-3: 123, 225, 136;
-  #{theme.$sd-cssvars-prefix}-green-4: 76, 210, 99;
-  #{theme.$sd-cssvars-prefix}-green-5: 35, 195, 67;
-  #{theme.$sd-cssvars-prefix}-green-6: 0, 180, 42;
-  #{theme.$sd-cssvars-prefix}-green-7: 0, 154, 41;
-  #{theme.$sd-cssvars-prefix}-green-8: 0, 128, 38;
-  #{theme.$sd-cssvars-prefix}-green-9: 0, 102, 34;
-  #{theme.$sd-cssvars-prefix}-green-10: 0, 77, 28;
-  #{theme.$sd-cssvars-prefix}-cyan-1: 232, 255, 251;
-  #{theme.$sd-cssvars-prefix}-cyan-2: 183, 244, 236;
-  #{theme.$sd-cssvars-prefix}-cyan-3: 137, 233, 224;
-  #{theme.$sd-cssvars-prefix}-cyan-4: 94, 223, 214;
-  #{theme.$sd-cssvars-prefix}-cyan-5: 55, 212, 207;
-  #{theme.$sd-cssvars-prefix}-cyan-6: 20, 201, 201;
-  #{theme.$sd-cssvars-prefix}-cyan-7: 13, 165, 170;
-  #{theme.$sd-cssvars-prefix}-cyan-8: 7, 130, 139;
-  #{theme.$sd-cssvars-prefix}-cyan-9: 3, 97, 108;
-  #{theme.$sd-cssvars-prefix}-cyan-10: 0, 66, 77;
-  #{theme.$sd-cssvars-prefix}-blue-1: 232, 247, 255;
-  #{theme.$sd-cssvars-prefix}-blue-2: 195, 231, 254;
-  #{theme.$sd-cssvars-prefix}-blue-3: 159, 212, 253;
-  #{theme.$sd-cssvars-prefix}-blue-4: 123, 192, 252;
-  #{theme.$sd-cssvars-prefix}-blue-5: 87, 169, 251;
-  #{theme.$sd-cssvars-prefix}-blue-6: 52, 145, 250;
-  #{theme.$sd-cssvars-prefix}-blue-7: 32, 108, 207;
-  #{theme.$sd-cssvars-prefix}-blue-8: 17, 75, 163;
-  #{theme.$sd-cssvars-prefix}-blue-9: 6, 48, 120;
-  #{theme.$sd-cssvars-prefix}-blue-10: 0, 26, 77;
-  #{theme.$sd-cssvars-prefix}-sdblue-1: 232, 243, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-2: 190, 218, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-3: 148, 191, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-4: 106, 161, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-5: 64, 128, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-6: 22, 93, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-7: 14, 66, 210;
-  #{theme.$sd-cssvars-prefix}-sdblue-8: 7, 44, 166;
-  #{theme.$sd-cssvars-prefix}-sdblue-9: 3, 26, 121;
-  #{theme.$sd-cssvars-prefix}-sdblue-10: 0, 13, 77;
-  #{theme.$sd-cssvars-prefix}-purple-1: 245, 232, 255;
-  #{theme.$sd-cssvars-prefix}-purple-2: 221, 190, 246;
-  #{theme.$sd-cssvars-prefix}-purple-3: 195, 150, 237;
-  #{theme.$sd-cssvars-prefix}-purple-4: 168, 113, 227;
-  #{theme.$sd-cssvars-prefix}-purple-5: 141, 78, 218;
-  #{theme.$sd-cssvars-prefix}-purple-6: 114, 46, 209;
-  #{theme.$sd-cssvars-prefix}-purple-7: 85, 29, 176;
-  #{theme.$sd-cssvars-prefix}-purple-8: 60, 16, 143;
-  #{theme.$sd-cssvars-prefix}-purple-9: 39, 6, 110;
-  #{theme.$sd-cssvars-prefix}-purple-10: 22, 0, 77;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-1: 255, 232, 251;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-2: 247, 186, 239;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-3: 240, 142, 230;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-4: 232, 101, 223;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-5: 225, 62, 219;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-6: 217, 26, 217;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-7: 176, 16, 182;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-8: 138, 9, 147;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-9: 101, 3, 112;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-10: 66, 0, 77;
-  #{theme.$sd-cssvars-prefix}-magenta-1: 255, 232, 241;
-  #{theme.$sd-cssvars-prefix}-magenta-2: 253, 194, 219;
-  #{theme.$sd-cssvars-prefix}-magenta-3: 251, 157, 199;
-  #{theme.$sd-cssvars-prefix}-magenta-4: 249, 121, 183;
-  #{theme.$sd-cssvars-prefix}-magenta-5: 247, 84, 168;
-  #{theme.$sd-cssvars-prefix}-magenta-6: 245, 49, 157;
-  #{theme.$sd-cssvars-prefix}-magenta-7: 203, 30, 131;
-  #{theme.$sd-cssvars-prefix}-magenta-8: 161, 16, 105;
-  #{theme.$sd-cssvars-prefix}-magenta-9: 119, 6, 79;
-  #{theme.$sd-cssvars-prefix}-magenta-10: 77, 0, 52;
-  #{theme.$sd-cssvars-prefix}-gray-1: 247, 248, 250;
-  #{theme.$sd-cssvars-prefix}-gray-2: 242, 243, 245;
-  #{theme.$sd-cssvars-prefix}-gray-3: 229, 230, 235;
-  #{theme.$sd-cssvars-prefix}-gray-4: 201, 205, 212;
-  #{theme.$sd-cssvars-prefix}-gray-5: 169, 174, 184;
-  #{theme.$sd-cssvars-prefix}-gray-6: 134, 144, 156;
-  #{theme.$sd-cssvars-prefix}-gray-7: 107, 119, 133;
-  #{theme.$sd-cssvars-prefix}-gray-8: 78, 89, 105;
-  #{theme.$sd-cssvars-prefix}-gray-9: 39, 46, 59;
-  #{theme.$sd-cssvars-prefix}-gray-10: 29, 33, 41;
-  #{theme.$sd-cssvars-prefix}-success-1: rgb-channels($success-1);
-  #{theme.$sd-cssvars-prefix}-success-2: rgb-channels($success-2);
-  #{theme.$sd-cssvars-prefix}-success-3: rgb-channels($success-3);
-  #{theme.$sd-cssvars-prefix}-success-4: rgb-channels($success-4);
-  #{theme.$sd-cssvars-prefix}-success-5: rgb-channels($success-5);
-  #{theme.$sd-cssvars-prefix}-success-6: rgb-channels($success-6);
-  #{theme.$sd-cssvars-prefix}-success-7: rgb-channels($success-7);
-  #{theme.$sd-cssvars-prefix}-success-8: rgb-channels($success-8);
-  #{theme.$sd-cssvars-prefix}-success-9: rgb-channels($success-9);
-  #{theme.$sd-cssvars-prefix}-success-10: rgb-channels($success-10);
-  #{theme.$sd-cssvars-prefix}-primary-1: rgb-channels($primary-1);
-  #{theme.$sd-cssvars-prefix}-primary-2: rgb-channels($primary-2);
-  #{theme.$sd-cssvars-prefix}-primary-3: rgb-channels($primary-3);
-  #{theme.$sd-cssvars-prefix}-primary-4: rgb-channels($primary-4);
-  #{theme.$sd-cssvars-prefix}-primary-5: rgb-channels($primary-5);
-  #{theme.$sd-cssvars-prefix}-primary-6: rgb-channels($primary-6);
-  #{theme.$sd-cssvars-prefix}-primary-7: rgb-channels($primary-7);
-  #{theme.$sd-cssvars-prefix}-primary-8: rgb-channels($primary-8);
-  #{theme.$sd-cssvars-prefix}-primary-9: rgb-channels($primary-9);
-  #{theme.$sd-cssvars-prefix}-primary-10: rgb-channels($primary-10);
-  #{theme.$sd-cssvars-prefix}-danger-1: rgb-channels($danger-1);
-  #{theme.$sd-cssvars-prefix}-danger-2: rgb-channels($danger-2);
-  #{theme.$sd-cssvars-prefix}-danger-3: rgb-channels($danger-3);
-  #{theme.$sd-cssvars-prefix}-danger-4: rgb-channels($danger-4);
-  #{theme.$sd-cssvars-prefix}-danger-5: rgb-channels($danger-5);
-  #{theme.$sd-cssvars-prefix}-danger-6: rgb-channels($danger-6);
-  #{theme.$sd-cssvars-prefix}-danger-7: rgb-channels($danger-7);
-  #{theme.$sd-cssvars-prefix}-danger-8: rgb-channels($danger-8);
-  #{theme.$sd-cssvars-prefix}-danger-9: rgb-channels($danger-9);
-  #{theme.$sd-cssvars-prefix}-danger-10: rgb-channels($danger-10);
-  #{theme.$sd-cssvars-prefix}-warning-1: rgb-channels($warning-1);
-  #{theme.$sd-cssvars-prefix}-warning-2: rgb-channels($warning-2);
-  #{theme.$sd-cssvars-prefix}-warning-3: rgb-channels($warning-3);
-  #{theme.$sd-cssvars-prefix}-warning-4: rgb-channels($warning-4);
-  #{theme.$sd-cssvars-prefix}-warning-5: rgb-channels($warning-5);
-  #{theme.$sd-cssvars-prefix}-warning-6: rgb-channels($warning-6);
-  #{theme.$sd-cssvars-prefix}-warning-7: rgb-channels($warning-7);
-  #{theme.$sd-cssvars-prefix}-warning-8: rgb-channels($warning-8);
-  #{theme.$sd-cssvars-prefix}-warning-9: rgb-channels($warning-9);
-  #{theme.$sd-cssvars-prefix}-warning-10: rgb-channels($warning-10);
-  #{theme.$sd-cssvars-prefix}-link-1: rgb-channels($link-1);
-  #{theme.$sd-cssvars-prefix}-link-2: rgb-channels($link-2);
-  #{theme.$sd-cssvars-prefix}-link-3: rgb-channels($link-3);
-  #{theme.$sd-cssvars-prefix}-link-4: rgb-channels($link-4);
-  #{theme.$sd-cssvars-prefix}-link-5: rgb-channels($link-5);
-  #{theme.$sd-cssvars-prefix}-link-6: rgb-channels($link-6);
-  #{theme.$sd-cssvars-prefix}-link-7: rgb-channels($link-7);
-  #{theme.$sd-cssvars-prefix}-link-8: rgb-channels($link-8);
-  #{theme.$sd-cssvars-prefix}-link-9: rgb-channels($link-9);
-  #{theme.$sd-cssvars-prefix}-link-10: rgb-channels($link-10);
+  #{theme.$sd-cssvars-prefix}-red-1: var(--red-1, #{255, 236, 232});
+  #{theme.$sd-cssvars-prefix}-red-2: var(--red-2, #{253, 205, 197});
+  #{theme.$sd-cssvars-prefix}-red-3: var(--red-3, #{251, 172, 163});
+  #{theme.$sd-cssvars-prefix}-red-4: var(--red-4, #{249, 137, 129});
+  #{theme.$sd-cssvars-prefix}-red-5: var(--red-5, #{247, 101, 96});
+  #{theme.$sd-cssvars-prefix}-red-6: var(--red-6, #{245, 63, 63});
+  #{theme.$sd-cssvars-prefix}-red-7: var(--red-7, #{203, 39, 45});
+  #{theme.$sd-cssvars-prefix}-red-8: var(--red-8, #{161, 21, 30});
+  #{theme.$sd-cssvars-prefix}-red-9: var(--red-9, #{119, 8, 19});
+  #{theme.$sd-cssvars-prefix}-red-10: var(--red-10, #{77, 0, 10});
+  #{theme.$sd-cssvars-prefix}-orangered-1: var(--orangered-1, #{255, 243, 232});
+  #{theme.$sd-cssvars-prefix}-orangered-2: var(--orangered-2, #{253, 221, 195});
+  #{theme.$sd-cssvars-prefix}-orangered-3: var(--orangered-3, #{252, 197, 159});
+  #{theme.$sd-cssvars-prefix}-orangered-4: var(--orangered-4, #{250, 172, 123});
+  #{theme.$sd-cssvars-prefix}-orangered-5: var(--orangered-5, #{249, 144, 87});
+  #{theme.$sd-cssvars-prefix}-orangered-6: var(--orangered-6, #{247, 114, 52});
+  #{theme.$sd-cssvars-prefix}-orangered-7: var(--orangered-7, #{204, 81, 32});
+  #{theme.$sd-cssvars-prefix}-orangered-8: var(--orangered-8, #{162, 53, 17});
+  #{theme.$sd-cssvars-prefix}-orangered-9: var(--orangered-9, #{119, 31, 6});
+  #{theme.$sd-cssvars-prefix}-orangered-10: var(--orangered-10, #{77, 14, 0});
+  #{theme.$sd-cssvars-prefix}-orange-1: var(--orange-1, #{255, 247, 232});
+  #{theme.$sd-cssvars-prefix}-orange-2: var(--orange-2, #{255, 228, 186});
+  #{theme.$sd-cssvars-prefix}-orange-3: var(--orange-3, #{255, 207, 139});
+  #{theme.$sd-cssvars-prefix}-orange-4: var(--orange-4, #{255, 182, 93});
+  #{theme.$sd-cssvars-prefix}-orange-5: var(--orange-5, #{255, 154, 46});
+  #{theme.$sd-cssvars-prefix}-orange-6: var(--orange-6, #{255, 125, 0});
+  #{theme.$sd-cssvars-prefix}-orange-7: var(--orange-7, #{210, 95, 0});
+  #{theme.$sd-cssvars-prefix}-orange-8: var(--orange-8, #{166, 69, 0});
+  #{theme.$sd-cssvars-prefix}-orange-9: var(--orange-9, #{121, 46, 0});
+  #{theme.$sd-cssvars-prefix}-orange-10: var(--orange-10, #{77, 27, 0});
+  #{theme.$sd-cssvars-prefix}-gold-1: var(--gold-1, #{255, 252, 232});
+  #{theme.$sd-cssvars-prefix}-gold-2: var(--gold-2, #{253, 244, 191});
+  #{theme.$sd-cssvars-prefix}-gold-3: var(--gold-3, #{252, 233, 150});
+  #{theme.$sd-cssvars-prefix}-gold-4: var(--gold-4, #{250, 220, 109});
+  #{theme.$sd-cssvars-prefix}-gold-5: var(--gold-5, #{249, 204, 69});
+  #{theme.$sd-cssvars-prefix}-gold-6: var(--gold-6, #{247, 186, 30});
+  #{theme.$sd-cssvars-prefix}-gold-7: var(--gold-7, #{204, 146, 19});
+  #{theme.$sd-cssvars-prefix}-gold-8: var(--gold-8, #{162, 109, 10});
+  #{theme.$sd-cssvars-prefix}-gold-9: var(--gold-9, #{119, 75, 4});
+  #{theme.$sd-cssvars-prefix}-gold-10: var(--gold-10, #{77, 45, 0});
+  #{theme.$sd-cssvars-prefix}-yellow-1: var(--yellow-1, #{254, 255, 232});
+  #{theme.$sd-cssvars-prefix}-yellow-2: var(--yellow-2, #{254, 254, 190});
+  #{theme.$sd-cssvars-prefix}-yellow-3: var(--yellow-3, #{253, 250, 148});
+  #{theme.$sd-cssvars-prefix}-yellow-4: var(--yellow-4, #{252, 242, 107});
+  #{theme.$sd-cssvars-prefix}-yellow-5: var(--yellow-5, #{251, 232, 66});
+  #{theme.$sd-cssvars-prefix}-yellow-6: var(--yellow-6, #{250, 220, 25});
+  #{theme.$sd-cssvars-prefix}-yellow-7: var(--yellow-7, #{207, 175, 15});
+  #{theme.$sd-cssvars-prefix}-yellow-8: var(--yellow-8, #{163, 132, 8});
+  #{theme.$sd-cssvars-prefix}-yellow-9: var(--yellow-9, #{120, 93, 3});
+  #{theme.$sd-cssvars-prefix}-yellow-10: var(--yellow-10, #{77, 56, 0});
+  #{theme.$sd-cssvars-prefix}-lime-1: var(--lime-1, #{252, 255, 232});
+  #{theme.$sd-cssvars-prefix}-lime-2: var(--lime-2, #{237, 248, 187});
+  #{theme.$sd-cssvars-prefix}-lime-3: var(--lime-3, #{220, 241, 144});
+  #{theme.$sd-cssvars-prefix}-lime-4: var(--lime-4, #{201, 233, 104});
+  #{theme.$sd-cssvars-prefix}-lime-5: var(--lime-5, #{181, 226, 65});
+  #{theme.$sd-cssvars-prefix}-lime-6: var(--lime-6, #{159, 219, 29});
+  #{theme.$sd-cssvars-prefix}-lime-7: var(--lime-7, #{126, 183, 18});
+  #{theme.$sd-cssvars-prefix}-lime-8: var(--lime-8, #{95, 148, 10});
+  #{theme.$sd-cssvars-prefix}-lime-9: var(--lime-9, #{67, 112, 4});
+  #{theme.$sd-cssvars-prefix}-lime-10: var(--lime-10, #{42, 77, 0});
+  #{theme.$sd-cssvars-prefix}-green-1: var(--green-1, #{232, 255, 234});
+  #{theme.$sd-cssvars-prefix}-green-2: var(--green-2, #{175, 240, 181});
+  #{theme.$sd-cssvars-prefix}-green-3: var(--green-3, #{123, 225, 136});
+  #{theme.$sd-cssvars-prefix}-green-4: var(--green-4, #{76, 210, 99});
+  #{theme.$sd-cssvars-prefix}-green-5: var(--green-5, #{35, 195, 67});
+  #{theme.$sd-cssvars-prefix}-green-6: var(--green-6, #{0, 180, 42});
+  #{theme.$sd-cssvars-prefix}-green-7: var(--green-7, #{0, 154, 41});
+  #{theme.$sd-cssvars-prefix}-green-8: var(--green-8, #{0, 128, 38});
+  #{theme.$sd-cssvars-prefix}-green-9: var(--green-9, #{0, 102, 34});
+  #{theme.$sd-cssvars-prefix}-green-10: var(--green-10, #{0, 77, 28});
+  #{theme.$sd-cssvars-prefix}-cyan-1: var(--cyan-1, #{232, 255, 251});
+  #{theme.$sd-cssvars-prefix}-cyan-2: var(--cyan-2, #{183, 244, 236});
+  #{theme.$sd-cssvars-prefix}-cyan-3: var(--cyan-3, #{137, 233, 224});
+  #{theme.$sd-cssvars-prefix}-cyan-4: var(--cyan-4, #{94, 223, 214});
+  #{theme.$sd-cssvars-prefix}-cyan-5: var(--cyan-5, #{55, 212, 207});
+  #{theme.$sd-cssvars-prefix}-cyan-6: var(--cyan-6, #{20, 201, 201});
+  #{theme.$sd-cssvars-prefix}-cyan-7: var(--cyan-7, #{13, 165, 170});
+  #{theme.$sd-cssvars-prefix}-cyan-8: var(--cyan-8, #{7, 130, 139});
+  #{theme.$sd-cssvars-prefix}-cyan-9: var(--cyan-9, #{3, 97, 108});
+  #{theme.$sd-cssvars-prefix}-cyan-10: var(--cyan-10, #{0, 66, 77});
+  #{theme.$sd-cssvars-prefix}-blue-1: var(--blue-1, #{232, 247, 255});
+  #{theme.$sd-cssvars-prefix}-blue-2: var(--blue-2, #{195, 231, 254});
+  #{theme.$sd-cssvars-prefix}-blue-3: var(--blue-3, #{159, 212, 253});
+  #{theme.$sd-cssvars-prefix}-blue-4: var(--blue-4, #{123, 192, 252});
+  #{theme.$sd-cssvars-prefix}-blue-5: var(--blue-5, #{87, 169, 251});
+  #{theme.$sd-cssvars-prefix}-blue-6: var(--blue-6, #{52, 145, 250});
+  #{theme.$sd-cssvars-prefix}-blue-7: var(--blue-7, #{32, 108, 207});
+  #{theme.$sd-cssvars-prefix}-blue-8: var(--blue-8, #{17, 75, 163});
+  #{theme.$sd-cssvars-prefix}-blue-9: var(--blue-9, #{6, 48, 120});
+  #{theme.$sd-cssvars-prefix}-blue-10: var(--blue-10, #{0, 26, 77});
+  #{theme.$sd-cssvars-prefix}-sdblue-1: var(--sdblue-1, #{232, 243, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-2: var(--sdblue-2, #{190, 218, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-3: var(--sdblue-3, #{148, 191, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-4: var(--sdblue-4, #{106, 161, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-5: var(--sdblue-5, #{64, 128, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-6: var(--sdblue-6, #{22, 93, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-7: var(--sdblue-7, #{14, 66, 210});
+  #{theme.$sd-cssvars-prefix}-sdblue-8: var(--sdblue-8, #{7, 44, 166});
+  #{theme.$sd-cssvars-prefix}-sdblue-9: var(--sdblue-9, #{3, 26, 121});
+  #{theme.$sd-cssvars-prefix}-sdblue-10: var(--sdblue-10, #{0, 13, 77});
+  #{theme.$sd-cssvars-prefix}-purple-1: var(--purple-1, #{245, 232, 255});
+  #{theme.$sd-cssvars-prefix}-purple-2: var(--purple-2, #{221, 190, 246});
+  #{theme.$sd-cssvars-prefix}-purple-3: var(--purple-3, #{195, 150, 237});
+  #{theme.$sd-cssvars-prefix}-purple-4: var(--purple-4, #{168, 113, 227});
+  #{theme.$sd-cssvars-prefix}-purple-5: var(--purple-5, #{141, 78, 218});
+  #{theme.$sd-cssvars-prefix}-purple-6: var(--purple-6, #{114, 46, 209});
+  #{theme.$sd-cssvars-prefix}-purple-7: var(--purple-7, #{85, 29, 176});
+  #{theme.$sd-cssvars-prefix}-purple-8: var(--purple-8, #{60, 16, 143});
+  #{theme.$sd-cssvars-prefix}-purple-9: var(--purple-9, #{39, 6, 110});
+  #{theme.$sd-cssvars-prefix}-purple-10: var(--purple-10, #{22, 0, 77});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-1: var(--pinkpurple-1, #{255, 232, 251});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-2: var(--pinkpurple-2, #{247, 186, 239});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-3: var(--pinkpurple-3, #{240, 142, 230});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-4: var(--pinkpurple-4, #{232, 101, 223});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-5: var(--pinkpurple-5, #{225, 62, 219});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-6: var(--pinkpurple-6, #{217, 26, 217});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-7: var(--pinkpurple-7, #{176, 16, 182});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-8: var(--pinkpurple-8, #{138, 9, 147});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-9: var(--pinkpurple-9, #{101, 3, 112});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-10: var(--pinkpurple-10, #{66, 0, 77});
+  #{theme.$sd-cssvars-prefix}-magenta-1: var(--magenta-1, #{255, 232, 241});
+  #{theme.$sd-cssvars-prefix}-magenta-2: var(--magenta-2, #{253, 194, 219});
+  #{theme.$sd-cssvars-prefix}-magenta-3: var(--magenta-3, #{251, 157, 199});
+  #{theme.$sd-cssvars-prefix}-magenta-4: var(--magenta-4, #{249, 121, 183});
+  #{theme.$sd-cssvars-prefix}-magenta-5: var(--magenta-5, #{247, 84, 168});
+  #{theme.$sd-cssvars-prefix}-magenta-6: var(--magenta-6, #{245, 49, 157});
+  #{theme.$sd-cssvars-prefix}-magenta-7: var(--magenta-7, #{203, 30, 131});
+  #{theme.$sd-cssvars-prefix}-magenta-8: var(--magenta-8, #{161, 16, 105});
+  #{theme.$sd-cssvars-prefix}-magenta-9: var(--magenta-9, #{119, 6, 79});
+  #{theme.$sd-cssvars-prefix}-magenta-10: var(--magenta-10, #{77, 0, 52});
+  #{theme.$sd-cssvars-prefix}-gray-1: var(--gray-1, #{247, 248, 250});
+  #{theme.$sd-cssvars-prefix}-gray-2: var(--gray-2, #{242, 243, 245});
+  #{theme.$sd-cssvars-prefix}-gray-3: var(--gray-3, #{229, 230, 235});
+  #{theme.$sd-cssvars-prefix}-gray-4: var(--gray-4, #{201, 205, 212});
+  #{theme.$sd-cssvars-prefix}-gray-5: var(--gray-5, #{169, 174, 184});
+  #{theme.$sd-cssvars-prefix}-gray-6: var(--gray-6, #{134, 144, 156});
+  #{theme.$sd-cssvars-prefix}-gray-7: var(--gray-7, #{107, 119, 133});
+  #{theme.$sd-cssvars-prefix}-gray-8: var(--gray-8, #{78, 89, 105});
+  #{theme.$sd-cssvars-prefix}-gray-9: var(--gray-9, #{39, 46, 59});
+  #{theme.$sd-cssvars-prefix}-gray-10: var(--gray-10, #{29, 33, 41});
+  #{theme.$sd-cssvars-prefix}-success-1: var(--success-1, #{rgb-channels($success-1)});
+  #{theme.$sd-cssvars-prefix}-success-2: var(--success-2, #{rgb-channels($success-2)});
+  #{theme.$sd-cssvars-prefix}-success-3: var(--success-3, #{rgb-channels($success-3)});
+  #{theme.$sd-cssvars-prefix}-success-4: var(--success-4, #{rgb-channels($success-4)});
+  #{theme.$sd-cssvars-prefix}-success-5: var(--success-5, #{rgb-channels($success-5)});
+  #{theme.$sd-cssvars-prefix}-success-6: var(--success-6, #{rgb-channels($success-6)});
+  #{theme.$sd-cssvars-prefix}-success-7: var(--success-7, #{rgb-channels($success-7)});
+  #{theme.$sd-cssvars-prefix}-success-8: var(--success-8, #{rgb-channels($success-8)});
+  #{theme.$sd-cssvars-prefix}-success-9: var(--success-9, #{rgb-channels($success-9)});
+  #{theme.$sd-cssvars-prefix}-success-10: var(--success-10, #{rgb-channels($success-10)});
+  #{theme.$sd-cssvars-prefix}-primary-1: var(--primary-1, #{rgb-channels($primary-1)});
+  #{theme.$sd-cssvars-prefix}-primary-2: var(--primary-2, #{rgb-channels($primary-2)});
+  #{theme.$sd-cssvars-prefix}-primary-3: var(--primary-3, #{rgb-channels($primary-3)});
+  #{theme.$sd-cssvars-prefix}-primary-4: var(--primary-4, #{rgb-channels($primary-4)});
+  #{theme.$sd-cssvars-prefix}-primary-5: var(--primary-5, #{rgb-channels($primary-5)});
+  #{theme.$sd-cssvars-prefix}-primary-6: var(--primary-6, #{rgb-channels($primary-6)});
+  #{theme.$sd-cssvars-prefix}-primary-7: var(--primary-7, #{rgb-channels($primary-7)});
+  #{theme.$sd-cssvars-prefix}-primary-8: var(--primary-8, #{rgb-channels($primary-8)});
+  #{theme.$sd-cssvars-prefix}-primary-9: var(--primary-9, #{rgb-channels($primary-9)});
+  #{theme.$sd-cssvars-prefix}-primary-10: var(--primary-10, #{rgb-channels($primary-10)});
+  #{theme.$sd-cssvars-prefix}-danger-1: var(--danger-1, #{rgb-channels($danger-1)});
+  #{theme.$sd-cssvars-prefix}-danger-2: var(--danger-2, #{rgb-channels($danger-2)});
+  #{theme.$sd-cssvars-prefix}-danger-3: var(--danger-3, #{rgb-channels($danger-3)});
+  #{theme.$sd-cssvars-prefix}-danger-4: var(--danger-4, #{rgb-channels($danger-4)});
+  #{theme.$sd-cssvars-prefix}-danger-5: var(--danger-5, #{rgb-channels($danger-5)});
+  #{theme.$sd-cssvars-prefix}-danger-6: var(--danger-6, #{rgb-channels($danger-6)});
+  #{theme.$sd-cssvars-prefix}-danger-7: var(--danger-7, #{rgb-channels($danger-7)});
+  #{theme.$sd-cssvars-prefix}-danger-8: var(--danger-8, #{rgb-channels($danger-8)});
+  #{theme.$sd-cssvars-prefix}-danger-9: var(--danger-9, #{rgb-channels($danger-9)});
+  #{theme.$sd-cssvars-prefix}-danger-10: var(--danger-10, #{rgb-channels($danger-10)});
+  #{theme.$sd-cssvars-prefix}-warning-1: var(--warning-1, #{rgb-channels($warning-1)});
+  #{theme.$sd-cssvars-prefix}-warning-2: var(--warning-2, #{rgb-channels($warning-2)});
+  #{theme.$sd-cssvars-prefix}-warning-3: var(--warning-3, #{rgb-channels($warning-3)});
+  #{theme.$sd-cssvars-prefix}-warning-4: var(--warning-4, #{rgb-channels($warning-4)});
+  #{theme.$sd-cssvars-prefix}-warning-5: var(--warning-5, #{rgb-channels($warning-5)});
+  #{theme.$sd-cssvars-prefix}-warning-6: var(--warning-6, #{rgb-channels($warning-6)});
+  #{theme.$sd-cssvars-prefix}-warning-7: var(--warning-7, #{rgb-channels($warning-7)});
+  #{theme.$sd-cssvars-prefix}-warning-8: var(--warning-8, #{rgb-channels($warning-8)});
+  #{theme.$sd-cssvars-prefix}-warning-9: var(--warning-9, #{rgb-channels($warning-9)});
+  #{theme.$sd-cssvars-prefix}-warning-10: var(--warning-10, #{rgb-channels($warning-10)});
+  #{theme.$sd-cssvars-prefix}-link-1: var(--link-1, #{rgb-channels($link-1)});
+  #{theme.$sd-cssvars-prefix}-link-2: var(--link-2, #{rgb-channels($link-2)});
+  #{theme.$sd-cssvars-prefix}-link-3: var(--link-3, #{rgb-channels($link-3)});
+  #{theme.$sd-cssvars-prefix}-link-4: var(--link-4, #{rgb-channels($link-4)});
+  #{theme.$sd-cssvars-prefix}-link-5: var(--link-5, #{rgb-channels($link-5)});
+  #{theme.$sd-cssvars-prefix}-link-6: var(--link-6, #{rgb-channels($link-6)});
+  #{theme.$sd-cssvars-prefix}-link-7: var(--link-7, #{rgb-channels($link-7)});
+  #{theme.$sd-cssvars-prefix}-link-8: var(--link-8, #{rgb-channels($link-8)});
+  #{theme.$sd-cssvars-prefix}-link-9: var(--link-9, #{rgb-channels($link-9)});
+  #{theme.$sd-cssvars-prefix}-link-10: var(--link-10, #{rgb-channels($link-10)});
 }
 
-#{theme.$sd-theme-tag}[sd-theme='dark'] {
-  #{theme.$sd-cssvars-prefix}-red-1: 77, 0, 10;
-  #{theme.$sd-cssvars-prefix}-red-2: 119, 6, 17;
-  #{theme.$sd-cssvars-prefix}-red-3: 161, 22, 31;
-  #{theme.$sd-cssvars-prefix}-red-4: 203, 46, 52;
-  #{theme.$sd-cssvars-prefix}-red-5: 245, 78, 78;
-  #{theme.$sd-cssvars-prefix}-red-6: 247, 105, 101;
-  #{theme.$sd-cssvars-prefix}-red-7: 249, 141, 134;
-  #{theme.$sd-cssvars-prefix}-red-8: 251, 176, 167;
-  #{theme.$sd-cssvars-prefix}-red-9: 253, 209, 202;
-  #{theme.$sd-cssvars-prefix}-red-10: 255, 240, 236;
-  #{theme.$sd-cssvars-prefix}-orangered-1: 77, 14, 0;
-  #{theme.$sd-cssvars-prefix}-orangered-2: 119, 30, 5;
-  #{theme.$sd-cssvars-prefix}-orangered-3: 162, 55, 20;
-  #{theme.$sd-cssvars-prefix}-orangered-4: 204, 87, 41;
-  #{theme.$sd-cssvars-prefix}-orangered-5: 247, 126, 69;
-  #{theme.$sd-cssvars-prefix}-orangered-6: 249, 146, 90;
-  #{theme.$sd-cssvars-prefix}-orangered-7: 250, 173, 125;
-  #{theme.$sd-cssvars-prefix}-orangered-8: 252, 198, 161;
-  #{theme.$sd-cssvars-prefix}-orangered-9: 253, 222, 197;
-  #{theme.$sd-cssvars-prefix}-orangered-10: 255, 244, 235;
-  #{theme.$sd-cssvars-prefix}-orange-1: 77, 27, 0;
-  #{theme.$sd-cssvars-prefix}-orange-2: 121, 48, 4;
-  #{theme.$sd-cssvars-prefix}-orange-3: 166, 75, 10;
-  #{theme.$sd-cssvars-prefix}-orange-4: 210, 105, 19;
-  #{theme.$sd-cssvars-prefix}-orange-5: 255, 141, 31;
-  #{theme.$sd-cssvars-prefix}-orange-6: 255, 150, 38;
-  #{theme.$sd-cssvars-prefix}-orange-7: 255, 179, 87;
-  #{theme.$sd-cssvars-prefix}-orange-8: 255, 205, 135;
-  #{theme.$sd-cssvars-prefix}-orange-9: 255, 227, 184;
-  #{theme.$sd-cssvars-prefix}-orange-10: 255, 247, 232;
-  #{theme.$sd-cssvars-prefix}-gold-1: 77, 45, 0;
-  #{theme.$sd-cssvars-prefix}-gold-2: 119, 75, 4;
-  #{theme.$sd-cssvars-prefix}-gold-3: 162, 111, 15;
-  #{theme.$sd-cssvars-prefix}-gold-4: 204, 150, 31;
-  #{theme.$sd-cssvars-prefix}-gold-5: 247, 192, 52;
-  #{theme.$sd-cssvars-prefix}-gold-6: 249, 204, 68;
-  #{theme.$sd-cssvars-prefix}-gold-7: 250, 220, 108;
-  #{theme.$sd-cssvars-prefix}-gold-8: 252, 233, 149;
-  #{theme.$sd-cssvars-prefix}-gold-9: 253, 244, 190;
-  #{theme.$sd-cssvars-prefix}-gold-10: 255, 252, 232;
-  #{theme.$sd-cssvars-prefix}-yellow-1: 77, 56, 0;
-  #{theme.$sd-cssvars-prefix}-yellow-2: 120, 94, 7;
-  #{theme.$sd-cssvars-prefix}-yellow-3: 163, 134, 20;
-  #{theme.$sd-cssvars-prefix}-yellow-4: 207, 179, 37;
-  #{theme.$sd-cssvars-prefix}-yellow-5: 250, 225, 60;
-  #{theme.$sd-cssvars-prefix}-yellow-6: 251, 233, 75;
-  #{theme.$sd-cssvars-prefix}-yellow-7: 252, 243, 116;
-  #{theme.$sd-cssvars-prefix}-yellow-8: 253, 250, 157;
-  #{theme.$sd-cssvars-prefix}-yellow-9: 254, 254, 198;
-  #{theme.$sd-cssvars-prefix}-yellow-10: 254, 255, 240;
-  #{theme.$sd-cssvars-prefix}-lime-1: 42, 77, 0;
-  #{theme.$sd-cssvars-prefix}-lime-2: 68, 112, 6;
-  #{theme.$sd-cssvars-prefix}-lime-3: 98, 148, 18;
-  #{theme.$sd-cssvars-prefix}-lime-4: 132, 183, 35;
-  #{theme.$sd-cssvars-prefix}-lime-5: 168, 219, 57;
-  #{theme.$sd-cssvars-prefix}-lime-6: 184, 226, 75;
-  #{theme.$sd-cssvars-prefix}-lime-7: 203, 233, 112;
-  #{theme.$sd-cssvars-prefix}-lime-8: 222, 241, 152;
-  #{theme.$sd-cssvars-prefix}-lime-9: 238, 248, 194;
-  #{theme.$sd-cssvars-prefix}-lime-10: 253, 255, 238;
-  #{theme.$sd-cssvars-prefix}-green-1: 0, 77, 28;
-  #{theme.$sd-cssvars-prefix}-green-2: 4, 102, 37;
-  #{theme.$sd-cssvars-prefix}-green-3: 10, 128, 45;
-  #{theme.$sd-cssvars-prefix}-green-4: 18, 154, 55;
-  #{theme.$sd-cssvars-prefix}-green-5: 29, 180, 64;
-  #{theme.$sd-cssvars-prefix}-green-6: 39, 195, 70;
-  #{theme.$sd-cssvars-prefix}-green-7: 80, 210, 102;
-  #{theme.$sd-cssvars-prefix}-green-8: 126, 225, 139;
-  #{theme.$sd-cssvars-prefix}-green-9: 178, 240, 183;
-  #{theme.$sd-cssvars-prefix}-green-10: 235, 255, 236;
-  #{theme.$sd-cssvars-prefix}-cyan-1: 0, 66, 77;
-  #{theme.$sd-cssvars-prefix}-cyan-2: 6, 97, 108;
-  #{theme.$sd-cssvars-prefix}-cyan-3: 17, 131, 139;
-  #{theme.$sd-cssvars-prefix}-cyan-4: 31, 166, 170;
-  #{theme.$sd-cssvars-prefix}-cyan-5: 48, 201, 201;
-  #{theme.$sd-cssvars-prefix}-cyan-6: 63, 212, 207;
-  #{theme.$sd-cssvars-prefix}-cyan-7: 102, 223, 215;
-  #{theme.$sd-cssvars-prefix}-cyan-8: 144, 233, 225;
-  #{theme.$sd-cssvars-prefix}-cyan-9: 190, 244, 237;
-  #{theme.$sd-cssvars-prefix}-cyan-10: 240, 255, 252;
-  #{theme.$sd-cssvars-prefix}-blue-1: 0, 26, 77;
-  #{theme.$sd-cssvars-prefix}-blue-2: 5, 47, 120;
-  #{theme.$sd-cssvars-prefix}-blue-3: 19, 76, 163;
-  #{theme.$sd-cssvars-prefix}-blue-4: 41, 113, 207;
-  #{theme.$sd-cssvars-prefix}-blue-5: 70, 154, 250;
-  #{theme.$sd-cssvars-prefix}-blue-6: 90, 170, 251;
-  #{theme.$sd-cssvars-prefix}-blue-7: 125, 193, 252;
-  #{theme.$sd-cssvars-prefix}-blue-8: 161, 213, 253;
-  #{theme.$sd-cssvars-prefix}-blue-9: 198, 232, 254;
-  #{theme.$sd-cssvars-prefix}-blue-10: 234, 248, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-1: 0, 13, 77;
-  #{theme.$sd-cssvars-prefix}-sdblue-2: 4, 27, 121;
-  #{theme.$sd-cssvars-prefix}-sdblue-3: 14, 50, 166;
-  #{theme.$sd-cssvars-prefix}-sdblue-4: 29, 77, 210;
-  #{theme.$sd-cssvars-prefix}-sdblue-5: 48, 111, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-6: 60, 126, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-7: 104, 159, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-8: 147, 190, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-9: 190, 218, 255;
-  #{theme.$sd-cssvars-prefix}-sdblue-10: 234, 244, 255;
-  #{theme.$sd-cssvars-prefix}-purple-1: 22, 0, 77;
-  #{theme.$sd-cssvars-prefix}-purple-2: 39, 6, 110;
-  #{theme.$sd-cssvars-prefix}-purple-3: 62, 19, 143;
-  #{theme.$sd-cssvars-prefix}-purple-4: 90, 37, 176;
-  #{theme.$sd-cssvars-prefix}-purple-5: 123, 61, 209;
-  #{theme.$sd-cssvars-prefix}-purple-6: 142, 81, 218;
-  #{theme.$sd-cssvars-prefix}-purple-7: 169, 116, 227;
-  #{theme.$sd-cssvars-prefix}-purple-8: 197, 154, 237;
-  #{theme.$sd-cssvars-prefix}-purple-9: 223, 194, 246;
-  #{theme.$sd-cssvars-prefix}-purple-10: 247, 237, 255;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-1: 66, 0, 77;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-2: 101, 3, 112;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-3: 138, 13, 147;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-4: 176, 27, 182;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-5: 217, 46, 217;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-6: 225, 61, 219;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-7: 232, 102, 223;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-8: 240, 146, 230;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-9: 247, 193, 240;
-  #{theme.$sd-cssvars-prefix}-pinkpurple-10: 255, 242, 253;
-  #{theme.$sd-cssvars-prefix}-magenta-1: 77, 0, 52;
-  #{theme.$sd-cssvars-prefix}-magenta-2: 119, 8, 80;
-  #{theme.$sd-cssvars-prefix}-magenta-3: 161, 23, 108;
-  #{theme.$sd-cssvars-prefix}-magenta-4: 203, 43, 136;
-  #{theme.$sd-cssvars-prefix}-magenta-5: 245, 69, 166;
-  #{theme.$sd-cssvars-prefix}-magenta-6: 247, 86, 169;
-  #{theme.$sd-cssvars-prefix}-magenta-7: 249, 122, 184;
-  #{theme.$sd-cssvars-prefix}-magenta-8: 251, 158, 200;
-  #{theme.$sd-cssvars-prefix}-magenta-9: 253, 195, 219;
-  #{theme.$sd-cssvars-prefix}-magenta-10: 255, 232, 241;
-  #{theme.$sd-cssvars-prefix}-gray-1: 23, 23, 26;
-  #{theme.$sd-cssvars-prefix}-gray-2: 46, 46, 48;
-  #{theme.$sd-cssvars-prefix}-gray-3: 72, 72, 73;
-  #{theme.$sd-cssvars-prefix}-gray-4: 95, 95, 96;
-  #{theme.$sd-cssvars-prefix}-gray-5: 120, 120, 122;
-  #{theme.$sd-cssvars-prefix}-gray-6: 146, 146, 147;
-  #{theme.$sd-cssvars-prefix}-gray-7: 171, 171, 172;
-  #{theme.$sd-cssvars-prefix}-gray-8: 197, 197, 197;
-  #{theme.$sd-cssvars-prefix}-gray-9: 223, 223, 223;
-  #{theme.$sd-cssvars-prefix}-gray-10: 246, 246, 246;
-  #{theme.$sd-cssvars-prefix}-primary-1: rgb-channels($dark-primary-1);
-  #{theme.$sd-cssvars-prefix}-primary-2: rgb-channels($dark-primary-2);
-  #{theme.$sd-cssvars-prefix}-primary-3: rgb-channels($dark-primary-3);
-  #{theme.$sd-cssvars-prefix}-primary-4: rgb-channels($dark-primary-4);
-  #{theme.$sd-cssvars-prefix}-primary-5: rgb-channels($dark-primary-5);
-  #{theme.$sd-cssvars-prefix}-primary-6: rgb-channels($dark-primary-6);
-  #{theme.$sd-cssvars-prefix}-primary-7: rgb-channels($dark-primary-7);
-  #{theme.$sd-cssvars-prefix}-primary-8: rgb-channels($dark-primary-8);
-  #{theme.$sd-cssvars-prefix}-primary-9: rgb-channels($dark-primary-9);
-  #{theme.$sd-cssvars-prefix}-primary-10: rgb-channels($dark-primary-10);
-  #{theme.$sd-cssvars-prefix}-success-1: rgb-channels($dark-success-1);
-  #{theme.$sd-cssvars-prefix}-success-2: rgb-channels($dark-success-2);
-  #{theme.$sd-cssvars-prefix}-success-3: rgb-channels($dark-success-3);
-  #{theme.$sd-cssvars-prefix}-success-4: rgb-channels($dark-success-4);
-  #{theme.$sd-cssvars-prefix}-success-5: rgb-channels($dark-success-5);
-  #{theme.$sd-cssvars-prefix}-success-6: rgb-channels($dark-success-6);
-  #{theme.$sd-cssvars-prefix}-success-7: rgb-channels($dark-success-7);
-  #{theme.$sd-cssvars-prefix}-success-8: rgb-channels($dark-success-8);
-  #{theme.$sd-cssvars-prefix}-success-9: rgb-channels($dark-success-9);
-  #{theme.$sd-cssvars-prefix}-success-10: rgb-channels($dark-success-10);
-  #{theme.$sd-cssvars-prefix}-danger-1: rgb-channels($dark-danger-1);
-  #{theme.$sd-cssvars-prefix}-danger-2: rgb-channels($dark-danger-2);
-  #{theme.$sd-cssvars-prefix}-danger-3: rgb-channels($dark-danger-3);
-  #{theme.$sd-cssvars-prefix}-danger-4: rgb-channels($dark-danger-4);
-  #{theme.$sd-cssvars-prefix}-danger-5: rgb-channels($dark-danger-5);
-  #{theme.$sd-cssvars-prefix}-danger-6: rgb-channels($dark-danger-6);
-  #{theme.$sd-cssvars-prefix}-danger-7: rgb-channels($dark-danger-7);
-  #{theme.$sd-cssvars-prefix}-danger-8: rgb-channels($dark-danger-8);
-  #{theme.$sd-cssvars-prefix}-danger-9: rgb-channels($dark-danger-9);
-  #{theme.$sd-cssvars-prefix}-danger-10: rgb-channels($dark-danger-10);
-  #{theme.$sd-cssvars-prefix}-warning-1: rgb-channels($dark-warning-1);
-  #{theme.$sd-cssvars-prefix}-warning-2: rgb-channels($dark-warning-2);
-  #{theme.$sd-cssvars-prefix}-warning-3: rgb-channels($dark-warning-3);
-  #{theme.$sd-cssvars-prefix}-warning-4: rgb-channels($dark-warning-4);
-  #{theme.$sd-cssvars-prefix}-warning-5: rgb-channels($dark-warning-5);
-  #{theme.$sd-cssvars-prefix}-warning-6: rgb-channels($dark-warning-6);
-  #{theme.$sd-cssvars-prefix}-warning-7: rgb-channels($dark-warning-7);
-  #{theme.$sd-cssvars-prefix}-warning-8: rgb-channels($dark-warning-8);
-  #{theme.$sd-cssvars-prefix}-warning-9: rgb-channels($dark-warning-9);
-  #{theme.$sd-cssvars-prefix}-warning-10: rgb-channels($dark-warning-10);
-  #{theme.$sd-cssvars-prefix}-link-1: rgb-channels($dark-link-1);
-  #{theme.$sd-cssvars-prefix}-link-2: rgb-channels($dark-link-2);
-  #{theme.$sd-cssvars-prefix}-link-3: rgb-channels($dark-link-3);
-  #{theme.$sd-cssvars-prefix}-link-4: rgb-channels($dark-link-4);
-  #{theme.$sd-cssvars-prefix}-link-5: rgb-channels($dark-link-5);
-  #{theme.$sd-cssvars-prefix}-link-6: rgb-channels($dark-link-6);
-  #{theme.$sd-cssvars-prefix}-link-7: rgb-channels($dark-link-7);
-  #{theme.$sd-cssvars-prefix}-link-8: rgb-channels($dark-link-8);
-  #{theme.$sd-cssvars-prefix}-link-9: rgb-channels($dark-link-9);
-  #{theme.$sd-cssvars-prefix}-link-10: rgb-channels($dark-link-10);
+#{theme.$sd-theme-tag}[sd-theme='dark'],
+#{theme.$sd-theme-tag}[data-sd-theme='dark'] {
+  #{theme.$sd-cssvars-prefix}-red-1: var(--red-1, #{77, 0, 10});
+  #{theme.$sd-cssvars-prefix}-red-2: var(--red-2, #{119, 6, 17});
+  #{theme.$sd-cssvars-prefix}-red-3: var(--red-3, #{161, 22, 31});
+  #{theme.$sd-cssvars-prefix}-red-4: var(--red-4, #{203, 46, 52});
+  #{theme.$sd-cssvars-prefix}-red-5: var(--red-5, #{245, 78, 78});
+  #{theme.$sd-cssvars-prefix}-red-6: var(--red-6, #{247, 105, 101});
+  #{theme.$sd-cssvars-prefix}-red-7: var(--red-7, #{249, 141, 134});
+  #{theme.$sd-cssvars-prefix}-red-8: var(--red-8, #{251, 176, 167});
+  #{theme.$sd-cssvars-prefix}-red-9: var(--red-9, #{253, 209, 202});
+  #{theme.$sd-cssvars-prefix}-red-10: var(--red-10, #{255, 240, 236});
+  #{theme.$sd-cssvars-prefix}-orangered-1: var(--orangered-1, #{77, 14, 0});
+  #{theme.$sd-cssvars-prefix}-orangered-2: var(--orangered-2, #{119, 30, 5});
+  #{theme.$sd-cssvars-prefix}-orangered-3: var(--orangered-3, #{162, 55, 20});
+  #{theme.$sd-cssvars-prefix}-orangered-4: var(--orangered-4, #{204, 87, 41});
+  #{theme.$sd-cssvars-prefix}-orangered-5: var(--orangered-5, #{247, 126, 69});
+  #{theme.$sd-cssvars-prefix}-orangered-6: var(--orangered-6, #{249, 146, 90});
+  #{theme.$sd-cssvars-prefix}-orangered-7: var(--orangered-7, #{250, 173, 125});
+  #{theme.$sd-cssvars-prefix}-orangered-8: var(--orangered-8, #{252, 198, 161});
+  #{theme.$sd-cssvars-prefix}-orangered-9: var(--orangered-9, #{253, 222, 197});
+  #{theme.$sd-cssvars-prefix}-orangered-10: var(--orangered-10, #{255, 244, 235});
+  #{theme.$sd-cssvars-prefix}-orange-1: var(--orange-1, #{77, 27, 0});
+  #{theme.$sd-cssvars-prefix}-orange-2: var(--orange-2, #{121, 48, 4});
+  #{theme.$sd-cssvars-prefix}-orange-3: var(--orange-3, #{166, 75, 10});
+  #{theme.$sd-cssvars-prefix}-orange-4: var(--orange-4, #{210, 105, 19});
+  #{theme.$sd-cssvars-prefix}-orange-5: var(--orange-5, #{255, 141, 31});
+  #{theme.$sd-cssvars-prefix}-orange-6: var(--orange-6, #{255, 150, 38});
+  #{theme.$sd-cssvars-prefix}-orange-7: var(--orange-7, #{255, 179, 87});
+  #{theme.$sd-cssvars-prefix}-orange-8: var(--orange-8, #{255, 205, 135});
+  #{theme.$sd-cssvars-prefix}-orange-9: var(--orange-9, #{255, 227, 184});
+  #{theme.$sd-cssvars-prefix}-orange-10: var(--orange-10, #{255, 247, 232});
+  #{theme.$sd-cssvars-prefix}-gold-1: var(--gold-1, #{77, 45, 0});
+  #{theme.$sd-cssvars-prefix}-gold-2: var(--gold-2, #{119, 75, 4});
+  #{theme.$sd-cssvars-prefix}-gold-3: var(--gold-3, #{162, 111, 15});
+  #{theme.$sd-cssvars-prefix}-gold-4: var(--gold-4, #{204, 150, 31});
+  #{theme.$sd-cssvars-prefix}-gold-5: var(--gold-5, #{247, 192, 52});
+  #{theme.$sd-cssvars-prefix}-gold-6: var(--gold-6, #{249, 204, 68});
+  #{theme.$sd-cssvars-prefix}-gold-7: var(--gold-7, #{250, 220, 108});
+  #{theme.$sd-cssvars-prefix}-gold-8: var(--gold-8, #{252, 233, 149});
+  #{theme.$sd-cssvars-prefix}-gold-9: var(--gold-9, #{253, 244, 190});
+  #{theme.$sd-cssvars-prefix}-gold-10: var(--gold-10, #{255, 252, 232});
+  #{theme.$sd-cssvars-prefix}-yellow-1: var(--yellow-1, #{77, 56, 0});
+  #{theme.$sd-cssvars-prefix}-yellow-2: var(--yellow-2, #{120, 94, 7});
+  #{theme.$sd-cssvars-prefix}-yellow-3: var(--yellow-3, #{163, 134, 20});
+  #{theme.$sd-cssvars-prefix}-yellow-4: var(--yellow-4, #{207, 179, 37});
+  #{theme.$sd-cssvars-prefix}-yellow-5: var(--yellow-5, #{250, 225, 60});
+  #{theme.$sd-cssvars-prefix}-yellow-6: var(--yellow-6, #{251, 233, 75});
+  #{theme.$sd-cssvars-prefix}-yellow-7: var(--yellow-7, #{252, 243, 116});
+  #{theme.$sd-cssvars-prefix}-yellow-8: var(--yellow-8, #{253, 250, 157});
+  #{theme.$sd-cssvars-prefix}-yellow-9: var(--yellow-9, #{254, 254, 198});
+  #{theme.$sd-cssvars-prefix}-yellow-10: var(--yellow-10, #{254, 255, 240});
+  #{theme.$sd-cssvars-prefix}-lime-1: var(--lime-1, #{42, 77, 0});
+  #{theme.$sd-cssvars-prefix}-lime-2: var(--lime-2, #{68, 112, 6});
+  #{theme.$sd-cssvars-prefix}-lime-3: var(--lime-3, #{98, 148, 18});
+  #{theme.$sd-cssvars-prefix}-lime-4: var(--lime-4, #{132, 183, 35});
+  #{theme.$sd-cssvars-prefix}-lime-5: var(--lime-5, #{168, 219, 57});
+  #{theme.$sd-cssvars-prefix}-lime-6: var(--lime-6, #{184, 226, 75});
+  #{theme.$sd-cssvars-prefix}-lime-7: var(--lime-7, #{203, 233, 112});
+  #{theme.$sd-cssvars-prefix}-lime-8: var(--lime-8, #{222, 241, 152});
+  #{theme.$sd-cssvars-prefix}-lime-9: var(--lime-9, #{238, 248, 194});
+  #{theme.$sd-cssvars-prefix}-lime-10: var(--lime-10, #{253, 255, 238});
+  #{theme.$sd-cssvars-prefix}-green-1: var(--green-1, #{0, 77, 28});
+  #{theme.$sd-cssvars-prefix}-green-2: var(--green-2, #{4, 102, 37});
+  #{theme.$sd-cssvars-prefix}-green-3: var(--green-3, #{10, 128, 45});
+  #{theme.$sd-cssvars-prefix}-green-4: var(--green-4, #{18, 154, 55});
+  #{theme.$sd-cssvars-prefix}-green-5: var(--green-5, #{29, 180, 64});
+  #{theme.$sd-cssvars-prefix}-green-6: var(--green-6, #{39, 195, 70});
+  #{theme.$sd-cssvars-prefix}-green-7: var(--green-7, #{80, 210, 102});
+  #{theme.$sd-cssvars-prefix}-green-8: var(--green-8, #{126, 225, 139});
+  #{theme.$sd-cssvars-prefix}-green-9: var(--green-9, #{178, 240, 183});
+  #{theme.$sd-cssvars-prefix}-green-10: var(--green-10, #{235, 255, 236});
+  #{theme.$sd-cssvars-prefix}-cyan-1: var(--cyan-1, #{0, 66, 77});
+  #{theme.$sd-cssvars-prefix}-cyan-2: var(--cyan-2, #{6, 97, 108});
+  #{theme.$sd-cssvars-prefix}-cyan-3: var(--cyan-3, #{17, 131, 139});
+  #{theme.$sd-cssvars-prefix}-cyan-4: var(--cyan-4, #{31, 166, 170});
+  #{theme.$sd-cssvars-prefix}-cyan-5: var(--cyan-5, #{48, 201, 201});
+  #{theme.$sd-cssvars-prefix}-cyan-6: var(--cyan-6, #{63, 212, 207});
+  #{theme.$sd-cssvars-prefix}-cyan-7: var(--cyan-7, #{102, 223, 215});
+  #{theme.$sd-cssvars-prefix}-cyan-8: var(--cyan-8, #{144, 233, 225});
+  #{theme.$sd-cssvars-prefix}-cyan-9: var(--cyan-9, #{190, 244, 237});
+  #{theme.$sd-cssvars-prefix}-cyan-10: var(--cyan-10, #{240, 255, 252});
+  #{theme.$sd-cssvars-prefix}-blue-1: var(--blue-1, #{0, 26, 77});
+  #{theme.$sd-cssvars-prefix}-blue-2: var(--blue-2, #{5, 47, 120});
+  #{theme.$sd-cssvars-prefix}-blue-3: var(--blue-3, #{19, 76, 163});
+  #{theme.$sd-cssvars-prefix}-blue-4: var(--blue-4, #{41, 113, 207});
+  #{theme.$sd-cssvars-prefix}-blue-5: var(--blue-5, #{70, 154, 250});
+  #{theme.$sd-cssvars-prefix}-blue-6: var(--blue-6, #{90, 170, 251});
+  #{theme.$sd-cssvars-prefix}-blue-7: var(--blue-7, #{125, 193, 252});
+  #{theme.$sd-cssvars-prefix}-blue-8: var(--blue-8, #{161, 213, 253});
+  #{theme.$sd-cssvars-prefix}-blue-9: var(--blue-9, #{198, 232, 254});
+  #{theme.$sd-cssvars-prefix}-blue-10: var(--blue-10, #{234, 248, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-1: var(--sdblue-1, #{0, 13, 77});
+  #{theme.$sd-cssvars-prefix}-sdblue-2: var(--sdblue-2, #{4, 27, 121});
+  #{theme.$sd-cssvars-prefix}-sdblue-3: var(--sdblue-3, #{14, 50, 166});
+  #{theme.$sd-cssvars-prefix}-sdblue-4: var(--sdblue-4, #{29, 77, 210});
+  #{theme.$sd-cssvars-prefix}-sdblue-5: var(--sdblue-5, #{48, 111, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-6: var(--sdblue-6, #{60, 126, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-7: var(--sdblue-7, #{104, 159, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-8: var(--sdblue-8, #{147, 190, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-9: var(--sdblue-9, #{190, 218, 255});
+  #{theme.$sd-cssvars-prefix}-sdblue-10: var(--sdblue-10, #{234, 244, 255});
+  #{theme.$sd-cssvars-prefix}-purple-1: var(--purple-1, #{22, 0, 77});
+  #{theme.$sd-cssvars-prefix}-purple-2: var(--purple-2, #{39, 6, 110});
+  #{theme.$sd-cssvars-prefix}-purple-3: var(--purple-3, #{62, 19, 143});
+  #{theme.$sd-cssvars-prefix}-purple-4: var(--purple-4, #{90, 37, 176});
+  #{theme.$sd-cssvars-prefix}-purple-5: var(--purple-5, #{123, 61, 209});
+  #{theme.$sd-cssvars-prefix}-purple-6: var(--purple-6, #{142, 81, 218});
+  #{theme.$sd-cssvars-prefix}-purple-7: var(--purple-7, #{169, 116, 227});
+  #{theme.$sd-cssvars-prefix}-purple-8: var(--purple-8, #{197, 154, 237});
+  #{theme.$sd-cssvars-prefix}-purple-9: var(--purple-9, #{223, 194, 246});
+  #{theme.$sd-cssvars-prefix}-purple-10: var(--purple-10, #{247, 237, 255});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-1: var(--pinkpurple-1, #{66, 0, 77});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-2: var(--pinkpurple-2, #{101, 3, 112});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-3: var(--pinkpurple-3, #{138, 13, 147});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-4: var(--pinkpurple-4, #{176, 27, 182});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-5: var(--pinkpurple-5, #{217, 46, 217});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-6: var(--pinkpurple-6, #{225, 61, 219});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-7: var(--pinkpurple-7, #{232, 102, 223});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-8: var(--pinkpurple-8, #{240, 146, 230});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-9: var(--pinkpurple-9, #{247, 193, 240});
+  #{theme.$sd-cssvars-prefix}-pinkpurple-10: var(--pinkpurple-10, #{255, 242, 253});
+  #{theme.$sd-cssvars-prefix}-magenta-1: var(--magenta-1, #{77, 0, 52});
+  #{theme.$sd-cssvars-prefix}-magenta-2: var(--magenta-2, #{119, 8, 80});
+  #{theme.$sd-cssvars-prefix}-magenta-3: var(--magenta-3, #{161, 23, 108});
+  #{theme.$sd-cssvars-prefix}-magenta-4: var(--magenta-4, #{203, 43, 136});
+  #{theme.$sd-cssvars-prefix}-magenta-5: var(--magenta-5, #{245, 69, 166});
+  #{theme.$sd-cssvars-prefix}-magenta-6: var(--magenta-6, #{247, 86, 169});
+  #{theme.$sd-cssvars-prefix}-magenta-7: var(--magenta-7, #{249, 122, 184});
+  #{theme.$sd-cssvars-prefix}-magenta-8: var(--magenta-8, #{251, 158, 200});
+  #{theme.$sd-cssvars-prefix}-magenta-9: var(--magenta-9, #{253, 195, 219});
+  #{theme.$sd-cssvars-prefix}-magenta-10: var(--magenta-10, #{255, 232, 241});
+  #{theme.$sd-cssvars-prefix}-gray-1: var(--gray-1, #{23, 23, 26});
+  #{theme.$sd-cssvars-prefix}-gray-2: var(--gray-2, #{46, 46, 48});
+  #{theme.$sd-cssvars-prefix}-gray-3: var(--gray-3, #{72, 72, 73});
+  #{theme.$sd-cssvars-prefix}-gray-4: var(--gray-4, #{95, 95, 96});
+  #{theme.$sd-cssvars-prefix}-gray-5: var(--gray-5, #{120, 120, 122});
+  #{theme.$sd-cssvars-prefix}-gray-6: var(--gray-6, #{146, 146, 147});
+  #{theme.$sd-cssvars-prefix}-gray-7: var(--gray-7, #{171, 171, 172});
+  #{theme.$sd-cssvars-prefix}-gray-8: var(--gray-8, #{197, 197, 197});
+  #{theme.$sd-cssvars-prefix}-gray-9: var(--gray-9, #{223, 223, 223});
+  #{theme.$sd-cssvars-prefix}-gray-10: var(--gray-10, #{246, 246, 246});
+  #{theme.$sd-cssvars-prefix}-primary-1: var(--primary-1, #{rgb-channels($dark-primary-1)});
+  #{theme.$sd-cssvars-prefix}-primary-2: var(--primary-2, #{rgb-channels($dark-primary-2)});
+  #{theme.$sd-cssvars-prefix}-primary-3: var(--primary-3, #{rgb-channels($dark-primary-3)});
+  #{theme.$sd-cssvars-prefix}-primary-4: var(--primary-4, #{rgb-channels($dark-primary-4)});
+  #{theme.$sd-cssvars-prefix}-primary-5: var(--primary-5, #{rgb-channels($dark-primary-5)});
+  #{theme.$sd-cssvars-prefix}-primary-6: var(--primary-6, #{rgb-channels($dark-primary-6)});
+  #{theme.$sd-cssvars-prefix}-primary-7: var(--primary-7, #{rgb-channels($dark-primary-7)});
+  #{theme.$sd-cssvars-prefix}-primary-8: var(--primary-8, #{rgb-channels($dark-primary-8)});
+  #{theme.$sd-cssvars-prefix}-primary-9: var(--primary-9, #{rgb-channels($dark-primary-9)});
+  #{theme.$sd-cssvars-prefix}-primary-10: var(--primary-10, #{rgb-channels($dark-primary-10)});
+  #{theme.$sd-cssvars-prefix}-success-1: var(--success-1, #{rgb-channels($dark-success-1)});
+  #{theme.$sd-cssvars-prefix}-success-2: var(--success-2, #{rgb-channels($dark-success-2)});
+  #{theme.$sd-cssvars-prefix}-success-3: var(--success-3, #{rgb-channels($dark-success-3)});
+  #{theme.$sd-cssvars-prefix}-success-4: var(--success-4, #{rgb-channels($dark-success-4)});
+  #{theme.$sd-cssvars-prefix}-success-5: var(--success-5, #{rgb-channels($dark-success-5)});
+  #{theme.$sd-cssvars-prefix}-success-6: var(--success-6, #{rgb-channels($dark-success-6)});
+  #{theme.$sd-cssvars-prefix}-success-7: var(--success-7, #{rgb-channels($dark-success-7)});
+  #{theme.$sd-cssvars-prefix}-success-8: var(--success-8, #{rgb-channels($dark-success-8)});
+  #{theme.$sd-cssvars-prefix}-success-9: var(--success-9, #{rgb-channels($dark-success-9)});
+  #{theme.$sd-cssvars-prefix}-success-10: var(--success-10, #{rgb-channels($dark-success-10)});
+  #{theme.$sd-cssvars-prefix}-danger-1: var(--danger-1, #{rgb-channels($dark-danger-1)});
+  #{theme.$sd-cssvars-prefix}-danger-2: var(--danger-2, #{rgb-channels($dark-danger-2)});
+  #{theme.$sd-cssvars-prefix}-danger-3: var(--danger-3, #{rgb-channels($dark-danger-3)});
+  #{theme.$sd-cssvars-prefix}-danger-4: var(--danger-4, #{rgb-channels($dark-danger-4)});
+  #{theme.$sd-cssvars-prefix}-danger-5: var(--danger-5, #{rgb-channels($dark-danger-5)});
+  #{theme.$sd-cssvars-prefix}-danger-6: var(--danger-6, #{rgb-channels($dark-danger-6)});
+  #{theme.$sd-cssvars-prefix}-danger-7: var(--danger-7, #{rgb-channels($dark-danger-7)});
+  #{theme.$sd-cssvars-prefix}-danger-8: var(--danger-8, #{rgb-channels($dark-danger-8)});
+  #{theme.$sd-cssvars-prefix}-danger-9: var(--danger-9, #{rgb-channels($dark-danger-9)});
+  #{theme.$sd-cssvars-prefix}-danger-10: var(--danger-10, #{rgb-channels($dark-danger-10)});
+  #{theme.$sd-cssvars-prefix}-warning-1: var(--warning-1, #{rgb-channels($dark-warning-1)});
+  #{theme.$sd-cssvars-prefix}-warning-2: var(--warning-2, #{rgb-channels($dark-warning-2)});
+  #{theme.$sd-cssvars-prefix}-warning-3: var(--warning-3, #{rgb-channels($dark-warning-3)});
+  #{theme.$sd-cssvars-prefix}-warning-4: var(--warning-4, #{rgb-channels($dark-warning-4)});
+  #{theme.$sd-cssvars-prefix}-warning-5: var(--warning-5, #{rgb-channels($dark-warning-5)});
+  #{theme.$sd-cssvars-prefix}-warning-6: var(--warning-6, #{rgb-channels($dark-warning-6)});
+  #{theme.$sd-cssvars-prefix}-warning-7: var(--warning-7, #{rgb-channels($dark-warning-7)});
+  #{theme.$sd-cssvars-prefix}-warning-8: var(--warning-8, #{rgb-channels($dark-warning-8)});
+  #{theme.$sd-cssvars-prefix}-warning-9: var(--warning-9, #{rgb-channels($dark-warning-9)});
+  #{theme.$sd-cssvars-prefix}-warning-10: var(--warning-10, #{rgb-channels($dark-warning-10)});
+  #{theme.$sd-cssvars-prefix}-link-1: var(--link-1, #{rgb-channels($dark-link-1)});
+  #{theme.$sd-cssvars-prefix}-link-2: var(--link-2, #{rgb-channels($dark-link-2)});
+  #{theme.$sd-cssvars-prefix}-link-3: var(--link-3, #{rgb-channels($dark-link-3)});
+  #{theme.$sd-cssvars-prefix}-link-4: var(--link-4, #{rgb-channels($dark-link-4)});
+  #{theme.$sd-cssvars-prefix}-link-5: var(--link-5, #{rgb-channels($dark-link-5)});
+  #{theme.$sd-cssvars-prefix}-link-6: var(--link-6, #{rgb-channels($dark-link-6)});
+  #{theme.$sd-cssvars-prefix}-link-7: var(--link-7, #{rgb-channels($dark-link-7)});
+  #{theme.$sd-cssvars-prefix}-link-8: var(--link-8, #{rgb-channels($dark-link-8)});
+  #{theme.$sd-cssvars-prefix}-link-9: var(--link-9, #{rgb-channels($dark-link-9)});
+  #{theme.$sd-cssvars-prefix}-link-10: var(--link-10, #{rgb-channels($dark-link-10)});
 }