@x-plat/design-system 0.1.1

package/dist/components/Switch/index.css

@@ -0,0 +1,780 @@
+/* src/components/Switch/switch.scss */
+.lib-xplat-switch {
+  position: relative;
+  width: 4rem;
+  height: 2rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+  border: 1px solid transparent;
+  background-color: #D4D4D4;
+  border-color: #D4D4D4;
+}
+.lib-xplat-switch.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.lib-xplat-switch.animating {
+  pointer-events: none;
+  cursor: wait;
+}
+.lib-xplat-switch.checked.xplat-red-50 {
+  background-color: #FFF0F0;
+  border-color: #FFF0F0;
+}
+.lib-xplat-switch.checked.xplat-red-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 199.2, 199.2);
+  border-color: rgb(255, 199.2, 199.2);
+}
+.lib-xplat-switch.checked.xplat-red-100 {
+  background-color: #FFDDDE;
+  border-color: #FFDDDE;
+}
+.lib-xplat-switch.checked.xplat-red-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 180.2, 182.4);
+  border-color: rgb(255, 180.2, 182.4);
+}
+.lib-xplat-switch.checked.xplat-red-200 {
+  background-color: #FFC1C2;
+  border-color: #FFC1C2;
+}
+.lib-xplat-switch.checked.xplat-red-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 152.2, 153.8580645161);
+  border-color: rgb(255, 152.2, 153.8580645161);
+}
+.lib-xplat-switch.checked.xplat-red-300 {
+  background-color: #FF9698;
+  border-color: #FF9698;
+}
+.lib-xplat-switch.checked.xplat-red-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 109.2, 111.9771428571);
+  border-color: rgb(255, 109.2, 111.9771428571);
+}
+.lib-xplat-switch.checked.xplat-red-400 {
+  background-color: #FF5A5D;
+  border-color: #FF5A5D;
+}
+.lib-xplat-switch.checked.xplat-red-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 49.2, 52.9418181818);
+  border-color: rgb(255, 49.2, 52.9418181818);
+}
+.lib-xplat-switch.checked.xplat-red-500 {
+  background-color: #FF272B;
+  border-color: #FF272B;
+}
+.lib-xplat-switch.checked.xplat-red-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(253.2, 0, 4.6888888889);
+  border-color: rgb(253.2, 0, 4.6888888889);
+}
+.lib-xplat-switch.checked.xplat-red-600 {
+  background-color: #F80409;
+  border-color: #F80409;
+}
+.lib-xplat-switch.checked.xplat-red-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(207.8476190476, 3.3523809524, 7.5428571429);
+  border-color: rgb(207.8476190476, 3.3523809524, 7.5428571429);
+}
+.lib-xplat-switch.checked.xplat-red-700 {
+  background-color: #D40105;
+  border-color: #D40105;
+}
+.lib-xplat-switch.checked.xplat-red-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(171.3915492958, 0.8084507042, 4.0422535211);
+  border-color: rgb(171.3915492958, 0.8084507042, 4.0422535211);
+}
+.lib-xplat-switch.checked.xplat-red-800 {
+  background-color: #AE0609;
+  border-color: #AE0609;
+}
+.lib-xplat-switch.checked.xplat-red-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(134.56, 4.64, 6.96);
+  border-color: rgb(134.56, 4.64, 6.96);
+}
+.lib-xplat-switch.checked.xplat-red-900 {
+  background-color: #900C0F;
+  border-color: #900C0F;
+}
+.lib-xplat-switch.checked.xplat-red-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(106.3384615385, 8.8615384615, 11.0769230769);
+  border-color: rgb(106.3384615385, 8.8615384615, 11.0769230769);
+}
+.lib-xplat-switch.checked.xplat-green-50 {
+  background-color: #E5F6EA;
+  border-color: #E5F6EA;
+}
+.lib-xplat-switch.checked.xplat-green-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(198.6914285714, 235.5085714286, 209.52);
+  border-color: rgb(198.6914285714, 235.5085714286, 209.52);
+}
+.lib-xplat-switch.checked.xplat-green-100 {
+  background-color: #C1E7CC;
+  border-color: #C1E7CC;
+}
+.lib-xplat-switch.checked.xplat-green-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(163.5860465116, 219.6139534884, 179.8046511628);
+  border-color: rgb(163.5860465116, 219.6139534884, 179.8046511628);
+}
+.lib-xplat-switch.checked.xplat-green-200 {
+  background-color: #98D8AC;
+  border-color: #98D8AC;
+}
+.lib-xplat-switch.checked.xplat-green-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(122.4056338028, 204.7943661972, 148.1521126761);
+  border-color: rgb(122.4056338028, 204.7943661972, 148.1521126761);
+}
+.lib-xplat-switch.checked.xplat-green-300 {
+  background-color: #6CCA8B;
+  border-color: #6CCA8B;
+}
+.lib-xplat-switch.checked.xplat-green-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(78.012, 191.188, 115.336);
+  border-color: rgb(78.012, 191.188, 115.336);
+}
+.lib-xplat-switch.checked.xplat-green-400 {
+  background-color: #47BE72;
+  border-color: #47BE72;
+}
+.lib-xplat-switch.checked.xplat-green-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(57.4819277108, 162.7180722892, 95.5084337349);
+  border-color: rgb(57.4819277108, 162.7180722892, 95.5084337349);
+}
+.lib-xplat-switch.checked.xplat-green-500 {
+  background-color: #10B259;
+  border-color: #10B259;
+}
+.lib-xplat-switch.checked.xplat-green-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(12.6350515464, 140.5649484536, 70.2824742268);
+  border-color: rgb(12.6350515464, 140.5649484536, 70.2824742268);
+}
+.lib-xplat-switch.checked.xplat-green-600 {
+  background-color: #00A34F;
+  border-color: #00A34F;
+}
+.lib-xplat-switch.checked.xplat-green-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(0, 122.2, 59.2257668712);
+  border-color: rgb(0, 122.2, 59.2257668712);
+}
+.lib-xplat-switch.checked.xplat-green-700 {
+  background-color: #009143;
+  border-color: #009143;
+}
+.lib-xplat-switch.checked.xplat-green-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(0, 104.2, 48.1475862069);
+  border-color: rgb(0, 104.2, 48.1475862069);
+}
+.lib-xplat-switch.checked.xplat-green-800 {
+  background-color: #007F38;
+  border-color: #007F38;
+}
+.lib-xplat-switch.checked.xplat-green-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(0, 86.2, 38.0094488189);
+  border-color: rgb(0, 86.2, 38.0094488189);
+}
+.lib-xplat-switch.checked.xplat-green-900 {
+  background-color: #006024;
+  border-color: #006024;
+}
+.lib-xplat-switch.checked.xplat-green-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(0, 55.2, 20.7);
+  border-color: rgb(0, 55.2, 20.7);
+}
+.lib-xplat-switch.checked.xplat-orange-50 {
+  background-color: #FFF8EC;
+  border-color: #FFF8EC;
+}
+.lib-xplat-switch.checked.xplat-orange-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 232.9684210526, 195.2);
+  border-color: rgb(255, 232.9684210526, 195.2);
+}
+.lib-xplat-switch.checked.xplat-orange-100 {
+  background-color: #FFF0D3;
+  border-color: #FFF0D3;
+}
+.lib-xplat-switch.checked.xplat-orange-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 226.0909090909, 170.2);
+  border-color: rgb(255, 226.0909090909, 170.2);
+}
+.lib-xplat-switch.checked.xplat-orange-200 {
+  background-color: #FFDDA5;
+  border-color: #FFDDA5;
+}
+.lib-xplat-switch.checked.xplat-orange-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 205.5866666667, 124.2);
+  border-color: rgb(255, 205.5866666667, 124.2);
+}
+.lib-xplat-switch.checked.xplat-orange-300 {
+  background-color: #FFC46D;
+  border-color: #FFC46D;
+}
+.lib-xplat-switch.checked.xplat-orange-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 179.5123287671, 68.2);
+  border-color: rgb(255, 179.5123287671, 68.2);
+}
+.lib-xplat-switch.checked.xplat-orange-400 {
+  background-color: #FF9F32;
+  border-color: #FF9F32;
+}
+.lib-xplat-switch.checked.xplat-orange-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 139.8936585366, 9.2);
+  border-color: rgb(255, 139.8936585366, 9.2);
+}
+.lib-xplat-switch.checked.xplat-orange-500 {
+  background-color: #FF820A;
+  border-color: #FF820A;
+}
+.lib-xplat-switch.checked.xplat-orange-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(224.2, 109.812244898, 0);
+  border-color: rgb(224.2, 109.812244898, 0);
+}
+.lib-xplat-switch.checked.xplat-orange-600 {
+  background-color: #FF6900;
+  border-color: #FF6900;
+}
+.lib-xplat-switch.checked.xplat-orange-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(214.2, 88.2, 0);
+  border-color: rgb(214.2, 88.2, 0);
+}
+.lib-xplat-switch.checked.xplat-orange-700 {
+  background-color: #CC4B02;
+  border-color: #CC4B02;
+}
+.lib-xplat-switch.checked.xplat-orange-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(163.5961165049, 60.145631068, 1.6038834951);
+  border-color: rgb(163.5961165049, 60.145631068, 1.6038834951);
+}
+.lib-xplat-switch.checked.xplat-orange-800 {
+  background-color: #A13A0B;
+  border-color: #A13A0B;
+}
+.lib-xplat-switch.checked.xplat-orange-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(122.8093023256, 44.2418604651, 8.3906976744);
+  border-color: rgb(122.8093023256, 44.2418604651, 8.3906976744);
+}
+.lib-xplat-switch.checked.xplat-orange-900 {
+  background-color: #82320C;
+  border-color: #82320C;
+}
+.lib-xplat-switch.checked.xplat-orange-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(92.6478873239, 35.6338028169, 8.5521126761);
+  border-color: rgb(92.6478873239, 35.6338028169, 8.5521126761);
+}
+.lib-xplat-switch.checked.xplat-yellow-50 {
+  background-color: #FFFDE7;
+  border-color: #FFFDE7;
+}
+.lib-xplat-switch.checked.xplat-yellow-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 249.6, 190.2);
+  border-color: rgb(255, 249.6, 190.2);
+}
+.lib-xplat-switch.checked.xplat-yellow-100 {
+  background-color: #FFFAC1;
+  border-color: #FFFAC1;
+}
+.lib-xplat-switch.checked.xplat-yellow-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 246.7096774194, 152.2);
+  border-color: rgb(255, 246.7096774194, 152.2);
+}
+.lib-xplat-switch.checked.xplat-yellow-200 {
+  background-color: #FFF186;
+  border-color: #FFF186;
+}
+.lib-xplat-switch.checked.xplat-yellow-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 236.279338843, 93.2);
+  border-color: rgb(255, 236.279338843, 93.2);
+}
+.lib-xplat-switch.checked.xplat-yellow-300 {
+  background-color: #FFE041;
+  border-color: #FFE041;
+}
+.lib-xplat-switch.checked.xplat-yellow-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 217.3431578947, 24.2);
+  border-color: rgb(255, 217.3431578947, 24.2);
+}
+.lib-xplat-switch.checked.xplat-yellow-400 {
+  background-color: #FFCC0D;
+  border-color: #FFCC0D;
+}
+.lib-xplat-switch.checked.xplat-yellow-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(227.2, 179.3190082645, 0);
+  border-color: rgb(227.2, 179.3190082645, 0);
+}
+.lib-xplat-switch.checked.xplat-yellow-500 {
+  background-color: #F0B100;
+  border-color: #F0B100;
+}
+.lib-xplat-switch.checked.xplat-yellow-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(199.2, 146.91, 0);
+  border-color: rgb(199.2, 146.91, 0);
+}
+.lib-xplat-switch.checked.xplat-yellow-600 {
+  background-color: #D18800;
+  border-color: #D18800;
+}
+.lib-xplat-switch.checked.xplat-yellow-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(168.2, 109.4507177033, 0);
+  border-color: rgb(168.2, 109.4507177033, 0);
+}
+.lib-xplat-switch.checked.xplat-yellow-700 {
+  background-color: #A66002;
+  border-color: #A66002;
+}
+.lib-xplat-switch.checked.xplat-yellow-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(125.6857142857, 72.6857142857, 1.5142857143);
+  border-color: rgb(125.6857142857, 72.6857142857, 1.5142857143);
+}
+.lib-xplat-switch.checked.xplat-yellow-800 {
+  background-color: #894B0A;
+  border-color: #894B0A;
+}
+.lib-xplat-switch.checked.xplat-yellow-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(98.9755102041, 54.1836734694, 7.2244897959);
+  border-color: rgb(98.9755102041, 54.1836734694, 7.2244897959);
+}
+.lib-xplat-switch.checked.xplat-yellow-900 {
+  background-color: #743D0F;
+  border-color: #743D0F;
+}
+.lib-xplat-switch.checked.xplat-yellow-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(79.8717557252, 42.0015267176, 10.3282442748);
+  border-color: rgb(79.8717557252, 42.0015267176, 10.3282442748);
+}
+.lib-xplat-switch.checked.xplat-blue-50 {
+  background-color: #F1F4FD;
+  border-color: #F1F4FD;
+}
+.lib-xplat-switch.checked.xplat-blue-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(205.3, 215.95, 247.9);
+  border-color: rgb(205.3, 215.95, 247.9);
+}
+.lib-xplat-switch.checked.xplat-blue-100 {
+  background-color: #DFE7FA;
+  border-color: #DFE7FA;
+}
+.lib-xplat-switch.checked.xplat-blue-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(187.7135135135, 204.5351351351, 244.4864864865);
+  border-color: rgb(187.7135135135, 204.5351351351, 244.4864864865);
+}
+.lib-xplat-switch.checked.xplat-blue-200 {
+  background-color: #C5D4F8;
+  border-color: #C5D4F8;
+}
+.lib-xplat-switch.checked.xplat-blue-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(160.5938461538, 185.0092307692, 243.6061538462);
+  border-color: rgb(160.5938461538, 185.0092307692, 243.6061538462);
+}
+.lib-xplat-switch.checked.xplat-blue-300 {
+  background-color: #9EB8F2;
+  border-color: #9EB8F2;
+}
+.lib-xplat-switch.checked.xplat-blue-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(122.0218181818, 157.6654545455, 237.1781818182);
+  border-color: rgb(122.0218181818, 157.6654545455, 237.1781818182);
+}
+.lib-xplat-switch.checked.xplat-blue-400 {
+  background-color: #7093EA;
+  border-color: #7093EA;
+}
+.lib-xplat-switch.checked.xplat-blue-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(76.4243902439, 120.1317073171, 228.7756097561);
+  border-color: rgb(76.4243902439, 120.1317073171, 228.7756097561);
+}
+.lib-xplat-switch.checked.xplat-blue-500 {
+  background-color: #4D6DE3;
+  border-color: #4D6DE3;
+}
+.lib-xplat-switch.checked.xplat-blue-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(41.745631068, 80.0834951456, 221.454368932);
+  border-color: rgb(41.745631068, 80.0834951456, 221.454368932);
+}
+.lib-xplat-switch.checked.xplat-blue-600 {
+  background-color: #3950D7;
+  border-color: #3950D7;
+}
+.lib-xplat-switch.checked.xplat-blue-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(38.8571428571, 61.2, 192.3428571429);
+  border-color: rgb(38.8571428571, 61.2, 192.3428571429);
+}
+.lib-xplat-switch.checked.xplat-blue-700 {
+  background-color: #303EC5;
+  border-color: #303EC5;
+}
+.lib-xplat-switch.checked.xplat-blue-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(40.0065306122, 51.6751020408, 164.1934693878);
+  border-color: rgb(40.0065306122, 51.6751020408, 164.1934693878);
+}
+.lib-xplat-switch.checked.xplat-blue-800 {
+  background-color: #2D35A0;
+  border-color: #2D35A0;
+}
+.lib-xplat-switch.checked.xplat-blue-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(36.043902439, 42.4517073171, 128.156097561);
+  border-color: rgb(36.043902439, 42.4517073171, 128.156097561);
+}
+.lib-xplat-switch.checked.xplat-blue-900 {
+  background-color: #29317F;
+  border-color: #29317F;
+}
+.lib-xplat-switch.checked.xplat-blue-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(31.0428571429, 37.1, 96.1571428571);
+  border-color: rgb(31.0428571429, 37.1, 96.1571428571);
+}
+.lib-xplat-switch.checked.xplat-lightblue-50 {
+  background-color: #EEFAFF;
+  border-color: #EEFAFF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(197.2, 238, 255);
+  border-color: rgb(197.2, 238, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-100 {
+  background-color: #D9F4FF;
+  border-color: #D9F4FF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(176.2, 232.1894736842, 255);
+  border-color: rgb(176.2, 232.1894736842, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-200 {
+  background-color: #BBEDFF;
+  border-color: #BBEDFF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(146.2, 226.2, 255);
+  border-color: rgb(146.2, 226.2, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-300 {
+  background-color: #8DE3FF;
+  border-color: #8DE3FF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(100.2, 216.9789473684, 255);
+  border-color: rgb(100.2, 216.9789473684, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-400 {
+  background-color: #57D0FF;
+  border-color: #57D0FF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(46.2, 196.5857142857, 255);
+  border-color: rgb(46.2, 196.5857142857, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-500 {
+  background-color: #30B6FF;
+  border-color: #30B6FF;
+}
+.lib-xplat-switch.checked.xplat-lightblue-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(7.2, 167.6115942029, 255);
+  border-color: rgb(7.2, 167.6115942029, 255);
+}
+.lib-xplat-switch.checked.xplat-lightblue-600 {
+  background-color: #1999F7;
+  border-color: #1999F7;
+}
+.lib-xplat-switch.checked.xplat-lightblue-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(7.7714285714, 132.1142857143, 223.4285714286);
+  border-color: rgb(7.7714285714, 132.1142857143, 223.4285714286);
+}
+.lib-xplat-switch.checked.xplat-lightblue-700 {
+  background-color: #1280E3;
+  border-color: #1280E3;
+}
+.lib-xplat-switch.checked.xplat-lightblue-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(15.0024489796, 106.6840816327, 189.1975510204);
+  border-color: rgb(15.0024489796, 106.6840816327, 189.1975510204);
+}
+.lib-xplat-switch.checked.xplat-lightblue-800 {
+  background-color: #1566B8;
+  border-color: #1566B8;
+}
+.lib-xplat-switch.checked.xplat-lightblue-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(16.8204878049, 81.6995121951, 147.3795121951);
+  border-color: rgb(16.8204878049, 81.6995121951, 147.3795121951);
+}
+.lib-xplat-switch.checked.xplat-lightblue-900 {
+  background-color: #175791;
+  border-color: #175791;
+}
+.lib-xplat-switch.checked.xplat-lightblue-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(17.4142857143, 65.8714285714, 109.7857142857);
+  border-color: rgb(17.4142857143, 65.8714285714, 109.7857142857);
+}
+.lib-xplat-switch.checked.xplat-purple-50 {
+  background-color: #FBF6FE;
+  border-color: #FBF6FE;
+}
+.lib-xplat-switch.checked.xplat-purple-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(234.68, 209.28, 249.92);
+  border-color: rgb(234.68, 209.28, 249.92);
+}
+.lib-xplat-switch.checked.xplat-purple-100 {
+  background-color: #F5EAFD;
+  border-color: #F5EAFD;
+}
+.lib-xplat-switch.checked.xplat-purple-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(227.2608695652, 196.747826087, 249.452173913);
+  border-color: rgb(227.2608695652, 196.747826087, 249.452173913);
+}
+.lib-xplat-switch.checked.xplat-purple-200 {
+  background-color: #EDD8FC;
+  border-color: #EDD8FC;
+}
+.lib-xplat-switch.checked.xplat-purple-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(219.5142857143, 178.1142857143, 249.0857142857);
+  border-color: rgb(219.5142857143, 178.1142857143, 249.0857142857);
+}
+.lib-xplat-switch.checked.xplat-purple-300 {
+  background-color: #E0BAF8;
+  border-color: #E0BAF8;
+}
+.lib-xplat-switch.checked.xplat-purple-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(207.3578947368, 148.9578947368, 244.2421052632);
+  border-color: rgb(207.3578947368, 148.9578947368, 244.2421052632);
+}
+.lib-xplat-switch.checked.xplat-purple-400 {
+  background-color: #CD8DF3;
+  border-color: #CD8DF3;
+}
+.lib-xplat-switch.checked.xplat-purple-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(188.8095238095, 104.0857142857, 239.1142857143);
+  border-color: rgb(188.8095238095, 104.0857142857, 239.1142857143);
+}
+.lib-xplat-switch.checked.xplat-purple-500 {
+  background-color: #B961EB;
+  border-color: #B961EB;
+}
+.lib-xplat-switch.checked.xplat-purple-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(168.9550561798, 60.7842696629, 230.4157303371);
+  border-color: rgb(168.9550561798, 60.7842696629, 230.4157303371);
+}
+.lib-xplat-switch.checked.xplat-purple-600 {
+  background-color: #A541DC;
+  border-color: #A541DC;
+}
+.lib-xplat-switch.checked.xplat-purple-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(146.52, 37.9866666667, 206.2133333333);
+  border-color: rgb(146.52, 37.9866666667, 206.2133333333);
+}
+.lib-xplat-switch.checked.xplat-purple-700 {
+  background-color: #9230C5;
+  border-color: #9230C5;
+}
+.lib-xplat-switch.checked.xplat-purple-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(121.6865306122, 40.0065306122, 164.1934693878);
+  border-color: rgb(121.6865306122, 40.0065306122, 164.1934693878);
+}
+.lib-xplat-switch.checked.xplat-purple-800 {
+  background-color: #782B9E;
+  border-color: #782B9E;
+}
+.lib-xplat-switch.checked.xplat-purple-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(95.6417910448, 34.271641791, 125.928358209);
+  border-color: rgb(95.6417910448, 34.271641791, 125.928358209);
+}
+.lib-xplat-switch.checked.xplat-purple-900 {
+  background-color: #62247F;
+  border-color: #62247F;
+}
+.lib-xplat-switch.checked.xplat-purple-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(73.4699386503, 26.9889570552, 95.2110429448);
+  border-color: rgb(73.4699386503, 26.9889570552, 95.2110429448);
+}
+.lib-xplat-switch.checked.xplat-pink-50 {
+  background-color: #FFF4FE;
+  border-color: #FFF4FE;
+}
+.lib-xplat-switch.checked.xplat-pink-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 203.2, 250.2909090909);
+  border-color: rgb(255, 203.2, 250.2909090909);
+}
+.lib-xplat-switch.checked.xplat-pink-100 {
+  background-color: #FFE7FD;
+  border-color: #FFE7FD;
+}
+.lib-xplat-switch.checked.xplat-pink-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 190.2, 249.6);
+  border-color: rgb(255, 190.2, 249.6);
+}
+.lib-xplat-switch.checked.xplat-pink-200 {
+  background-color: #FFCFFA;
+  border-color: #FFCFFA;
+}
+.lib-xplat-switch.checked.xplat-pink-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(255, 166.2, 245.75);
+  border-color: rgb(255, 166.2, 245.75);
+}
+.lib-xplat-switch.checked.xplat-pink-300 {
+  background-color: #FEA9F1;
+  border-color: #FEA9F1;
+}
+.lib-xplat-switch.checked.xplat-pink-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(253.5310344828, 128.6689655172, 234.4344827586);
+  border-color: rgb(253.5310344828, 128.6689655172, 234.4344827586);
+}
+.lib-xplat-switch.checked.xplat-pink-400 {
+  background-color: #FD75E7;
+  border-color: #FD75E7;
+}
+.lib-xplat-switch.checked.xplat-pink-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(252.4171428571, 76.7828571429, 224.0057142857);
+  border-color: rgb(252.4171428571, 76.7828571429, 224.0057142857);
+}
+.lib-xplat-switch.checked.xplat-pink-500 {
+  background-color: #F553DA;
+  border-color: #F553DA;
+}
+.lib-xplat-switch.checked.xplat-pink-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(242.7582417582, 44.4417582418, 209.7054945055);
+  border-color: rgb(242.7582417582, 44.4417582418, 209.7054945055);
+}
+.lib-xplat-switch.checked.xplat-pink-600 {
+  background-color: #D821B6;
+  border-color: #D821B6;
+}
+.lib-xplat-switch.checked.xplat-pink-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(180.6072289157, 27.5927710843, 152.178313253);
+  border-color: rgb(180.6072289157, 27.5927710843, 152.178313253);
+}
+.lib-xplat-switch.checked.xplat-pink-700 {
+  background-color: #B31892;
+  border-color: #B31892;
+}
+.lib-xplat-switch.checked.xplat-pink-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(143.0236453202, 19.1763546798, 116.6561576355);
+  border-color: rgb(143.0236453202, 19.1763546798, 116.6561576355);
+}
+.lib-xplat-switch.checked.xplat-pink-800 {
+  background-color: #921676;
+  border-color: #921676;
+}
+.lib-xplat-switch.checked.xplat-pink-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(110.5428571429, 16.6571428571, 89.3428571429);
+  border-color: rgb(110.5428571429, 16.6571428571, 89.3428571429);
+}
+.lib-xplat-switch.checked.xplat-pink-900 {
+  background-color: #781761;
+  border-color: #781761;
+}
+.lib-xplat-switch.checked.xplat-pink-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(85.7622377622, 16.4377622378, 69.3244755245);
+  border-color: rgb(85.7622377622, 16.4377622378, 69.3244755245);
+}
+.lib-xplat-switch.checked.xplat-neutral-50 {
+  background-color: #FAFAFA;
+  border-color: #FAFAFA;
+}
+.lib-xplat-switch.checked.xplat-neutral-50:hover:not(.disabled):not(.animating) {
+  background-color: rgb(229.6, 229.6, 229.6);
+  border-color: rgb(229.6, 229.6, 229.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-100 {
+  background-color: #F5F5F5;
+  border-color: #F5F5F5;
+}
+.lib-xplat-switch.checked.xplat-neutral-100:hover:not(.disabled):not(.animating) {
+  background-color: rgb(224.6, 224.6, 224.6);
+  border-color: rgb(224.6, 224.6, 224.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-200 {
+  background-color: #E5E5E5;
+  border-color: #E5E5E5;
+}
+.lib-xplat-switch.checked.xplat-neutral-200:hover:not(.disabled):not(.animating) {
+  background-color: rgb(208.6, 208.6, 208.6);
+  border-color: rgb(208.6, 208.6, 208.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-300 {
+  background-color: #D4D4D4;
+  border-color: #D4D4D4;
+}
+.lib-xplat-switch.checked.xplat-neutral-300:hover:not(.disabled):not(.animating) {
+  background-color: rgb(191.6, 191.6, 191.6);
+  border-color: rgb(191.6, 191.6, 191.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-400 {
+  background-color: #A1A1A1;
+  border-color: #A1A1A1;
+}
+.lib-xplat-switch.checked.xplat-neutral-400:hover:not(.disabled):not(.animating) {
+  background-color: rgb(140.6, 140.6, 140.6);
+  border-color: rgb(140.6, 140.6, 140.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-500 {
+  background-color: #737373;
+  border-color: #737373;
+}
+.lib-xplat-switch.checked.xplat-neutral-500:hover:not(.disabled):not(.animating) {
+  background-color: rgb(94.6, 94.6, 94.6);
+  border-color: rgb(94.6, 94.6, 94.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-600 {
+  background-color: #525252;
+  border-color: #525252;
+}
+.lib-xplat-switch.checked.xplat-neutral-600:hover:not(.disabled):not(.animating) {
+  background-color: rgb(61.6, 61.6, 61.6);
+  border-color: rgb(61.6, 61.6, 61.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-700 {
+  background-color: #404040;
+  border-color: #404040;
+}
+.lib-xplat-switch.checked.xplat-neutral-700:hover:not(.disabled):not(.animating) {
+  background-color: rgb(43.6, 43.6, 43.6);
+  border-color: rgb(43.6, 43.6, 43.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-800 {
+  background-color: #262626;
+  border-color: #262626;
+}
+.lib-xplat-switch.checked.xplat-neutral-800:hover:not(.disabled):not(.animating) {
+  background-color: rgb(17.6, 17.6, 17.6);
+  border-color: rgb(17.6, 17.6, 17.6);
+}
+.lib-xplat-switch.checked.xplat-neutral-900 {
+  background-color: #171717;
+  border-color: #171717;
+}
+.lib-xplat-switch.checked.xplat-neutral-900:hover:not(.disabled):not(.animating) {
+  background-color: rgb(2.6, 2.6, 2.6);
+  border-color: rgb(2.6, 2.6, 2.6);
+}
+.lib-xplat-switch.checked.xplat-black {
+  background-color: #000000;
+  border-color: #000000;
+}
+.lib-xplat-switch.checked.xplat-black:hover:not(.disabled):not(.animating) {
+  background-color: hsl(0, 0%, -8%);
+  border-color: hsl(0, 0%, -8%);
+}
+.lib-xplat-switch.checked.xplat-white {
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.lib-xplat-switch.checked.xplat-white:hover:not(.disabled):not(.animating) {
+  background-color: rgb(234.6, 234.6, 234.6);
+  border-color: rgb(234.6, 234.6, 234.6);
+}
+.lib-xplat-switch.checked.test-default {
+  background-color: #ffffff;
+  border-color: #ffffff;
+}
+.lib-xplat-switch.checked.test-default:hover:not(.disabled):not(.animating) {
+  background-color: rgb(234.6, 234.6, 234.6);
+  border-color: rgb(234.6, 234.6, 234.6);
+}
+.lib-xplat-switch > .knob {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  background-color: #FFFFFF;
+  border-radius: 9999px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transform: translateY(-50%);
+  transition: transform 0.25s;
+}
+.lib-xplat-switch > .knob.checked {
+  transform: translateY(-50%) translateX(2rem);
+}