feat!: updated admin panel color palette (#7011)
## Description BREAKING CHANGE: Color values have changed and will have different contrasts. If you use any of Payload's colors in your apps, you may need to adjust your use of them to maintain proper styling/accessibility. Colors palettes changed: - `--theme-success-*` - `--theme-error-*` - `--theme-warning-*` - `--color-success-*` - `--color-error-*` - `--color-warning-*` - `--color-blue-*` Updates the color palette used throughout Payload to be more consistent between dark and light values. Contrast values are now more in line with the `theme-elevation` contrasts. Some adjustments to the Toast components as well to match light/dark mode better. - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change <!-- Please delete options that are not relevant. --> - [x] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality) - [x] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality) ## Checklist: - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] Existing test suite passes locally with my changes - [ ] I have made corresponding changes to the documentation
This commit is contained in:
Tylan Davis
@@ -21,63 +21,83 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,63 +21,83 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,63 +21,83 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,85 +21,85 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(230, 247, 253);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(204, 238, 252);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(179, 230, 250);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(153, 221, 249);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(128, 213, 247);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(102, 204, 245);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(77, 196, 244);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(51, 187, 242);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(25, 179, 241);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(0, 170, 239);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(0, 153, 215);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(0, 136, 191);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(0, 119, 167);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(0, 102, 143);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(0, 85, 120);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(0, 68, 96);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(0, 51, 72);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(0, 34, 48);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(0, 17, 24);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
|
|||||||
@@ -21,85 +21,85 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(230, 247, 253);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(204, 238, 252);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(179, 230, 250);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(153, 221, 249);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(128, 213, 247);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(102, 204, 245);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(77, 196, 244);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(51, 187, 242);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(25, 179, 241);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(0, 170, 239);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(0, 153, 215);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(0, 136, 191);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(0, 119, 167);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(0, 102, 143);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(0, 85, 120);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(0, 68, 96);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(0, 51, 72);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(0, 34, 48);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(0, 17, 24);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
|
|||||||
@@ -21,85 +21,85 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(230, 247, 253);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(204, 238, 252);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(179, 230, 250);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(153, 221, 249);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(128, 213, 247);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(102, 204, 245);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(77, 196, 244);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(51, 187, 242);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(25, 179, 241);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(0, 170, 239);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(0, 153, 215);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(0, 136, 191);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(0, 119, 167);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(0, 102, 143);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(0, 85, 120);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(0, 68, 96);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(0, 51, 72);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(0, 34, 48);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(0, 17, 24);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ export const Error: React.FC = () => {
|
|||||||
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
||||||
fill="#FF8C91"
|
fill="var(--theme-error-500)"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M15.4001 10.5996L10.6001 15.3996M10.6001 10.5996L15.4001 15.3996"
|
d="M15.4001 10.5996L10.6001 15.3996M10.6001 10.5996L15.4001 15.3996"
|
||||||
stroke="#2F2F2F"
|
stroke="var(--theme-error-50)"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ export const Info: React.FC = () => {
|
|||||||
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
||||||
fill="#C3C3C3"
|
fill="var(--theme-elevation-500)"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M13 16.1998V12.9998M13 9.7998H13.0077"
|
d="M13 16.1998V12.9998M13 9.7998H13.0077"
|
||||||
stroke="#2F2F2F"
|
stroke="var(--theme-elevation-50)"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ export const Success: React.FC = () => {
|
|||||||
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
||||||
fill="#A0E6C1"
|
fill="var(--theme-success-500)"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M10.6001 13.0004L12.2001 14.6004L15.4001 11.4004"
|
d="M10.6001 13.0004L12.2001 14.6004L15.4001 11.4004"
|
||||||
stroke="#2F2F2F"
|
stroke="var(--theme-success-50)"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ export const Warning: React.FC = () => {
|
|||||||
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
d="M13 21C17.4183 21 21 17.4183 21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 17.4183 8.58172 21 13 21Z"
|
||||||
fill="#E4E694"
|
fill="var(--theme-warning-500)"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M13 10V13.2M13 16.4H13.008"
|
d="M13 10V13.2M13 16.4H13.008"
|
||||||
stroke="black"
|
stroke="var(--theme-warning-50)"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -14,13 +14,14 @@ export const ToastContainer: React.FC = () => {
|
|||||||
closeButton
|
closeButton
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
dir="undefined"
|
dir="undefined"
|
||||||
|
gap={8}
|
||||||
icons={{
|
icons={{
|
||||||
error: <Error />,
|
error: <Error />,
|
||||||
info: <Info />,
|
info: <Info />,
|
||||||
success: <Success />,
|
success: <Success />,
|
||||||
warning: <Warning />,
|
warning: <Warning />,
|
||||||
}}
|
}}
|
||||||
offset="36px"
|
offset="calc(var(--gutter-h) / 2)"
|
||||||
toastOptions={{
|
toastOptions={{
|
||||||
classNames: {
|
classNames: {
|
||||||
closeButton: 'payload-toast-close-button',
|
closeButton: 'payload-toast-close-button',
|
||||||
@@ -29,6 +30,7 @@ export const ToastContainer: React.FC = () => {
|
|||||||
icon: 'toast-icon',
|
icon: 'toast-icon',
|
||||||
info: 'toast-info',
|
info: 'toast-info',
|
||||||
success: 'toast-success',
|
success: 'toast-success',
|
||||||
|
title: 'toast-title',
|
||||||
toast: 'payload-toast-item',
|
toast: 'payload-toast-item',
|
||||||
warning: 'toast-warning',
|
warning: 'toast-warning',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -105,12 +105,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--theme-success-500);
|
background: var(--color-success-250);
|
||||||
color: var(--theme-base-800);
|
color: var(--theme-base-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: var(--theme-success-500);
|
background: var(--color-success-250);
|
||||||
color: var(--theme-base-800);
|
color: var(--theme-base-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -21,85 +21,85 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(230, 247, 253);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(204, 238, 252);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(179, 230, 250);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(153, 221, 249);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(128, 213, 247);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(102, 204, 245);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(77, 196, 244);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(51, 187, 242);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(25, 179, 241);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(0, 170, 239);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(0, 153, 215);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(0, 136, 191);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(0, 119, 167);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(0, 102, 143);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(0, 85, 120);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(0, 68, 96);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(0, 51, 72);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(0, 34, 48);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(0, 17, 24);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
|
|||||||
@@ -1,24 +1,28 @@
|
|||||||
|
@import './styles.scss';
|
||||||
|
|
||||||
.payload-toast-container {
|
.payload-toast-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.payload-toast-close-button {
|
||||||
|
position: absolute;
|
||||||
|
order: 3;
|
||||||
left: unset;
|
left: unset;
|
||||||
right: 0.5rem;
|
inset-inline-end: base(0.5);
|
||||||
top: 1.55rem;
|
top: 50%;
|
||||||
color: var(--theme-elevation-400);
|
transform: translateY(-50%);
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
background: unset;
|
background: unset;
|
||||||
border: none;
|
border: none;
|
||||||
display: flex;
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 2rem;
|
width: base(0.75);
|
||||||
height: 2rem;
|
height: base(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-250);
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir='RTL'] & {
|
[dir='RTL'] & {
|
||||||
@@ -27,16 +31,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast-title {
|
||||||
|
line-height: base(1);
|
||||||
|
}
|
||||||
|
|
||||||
.payload-toast-item {
|
.payload-toast-item {
|
||||||
padding: 1rem 2.5rem 1rem 1rem;
|
padding: base(0.5);
|
||||||
color: var(--theme-text);
|
color: var(--theme-elevation-800);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0.15rem;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--theme-border-color);
|
border: 1px solid var(--theme-border-color);
|
||||||
background: var(--theme-input-bg);
|
background: var(--theme-input-bg);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
@@ -45,6 +53,7 @@
|
|||||||
|
|
||||||
.toast-content {
|
.toast-content {
|
||||||
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-front='false'] {
|
&[data-front='false'] {
|
||||||
@@ -61,50 +70,64 @@
|
|||||||
|
|
||||||
.toast-icon {
|
.toast-icon {
|
||||||
svg {
|
svg {
|
||||||
width: 2.4rem;
|
width: base(1);
|
||||||
height: 2.4rem;
|
height: base(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toast-warning {
|
&.toast-warning {
|
||||||
border-color: var(--theme-warning-200);
|
color: var(--theme-warning-800);
|
||||||
background-color: var(--theme-warning-100);
|
border-color: var(--theme-warning-150);
|
||||||
|
background-color: var(--theme-warning-50);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-warning-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-warning-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toast-error {
|
&.toast-error {
|
||||||
border-color: var(--theme-error-300);
|
color: var(--theme-error-800);
|
||||||
background-color: var(--theme-error-150);
|
border-color: var(--theme-error-150);
|
||||||
|
background-color: var(--theme-error-50);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-error-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toast-success {
|
&.toast-success {
|
||||||
border-color: var(--theme-success-200);
|
color: var(--theme-success-800);
|
||||||
background-color: var(--theme-success-100);
|
border-color: var(--theme-success-150);
|
||||||
|
background-color: var(--theme-success-50);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-success-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-success-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toast-info {
|
&.toast-info {
|
||||||
border-color: var(--theme-elevation-250);
|
color: var(--theme-elevation-800);
|
||||||
background-color: var(--theme-elevation-100);
|
border-color: var(--theme-elevation-150);
|
||||||
}
|
background-color: var(--theme-elevation-50);
|
||||||
|
|
||||||
[data-theme='light'] & {
|
.payload-toast-close-button {
|
||||||
&.toast-warning {
|
color: var(--theme-elevation-600);
|
||||||
border-color: var(--theme-warning-550);
|
|
||||||
background-color: var(--theme-warning-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-error {
|
&:hover {
|
||||||
border-color: var(--theme-error-200);
|
color: var(--theme-elevation-250);
|
||||||
background-color: var(--theme-error-50);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-success {
|
|
||||||
border-color: var(--theme-success-550);
|
|
||||||
background-color: var(--theme-success-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-info {
|
|
||||||
border-color: var(--theme-border-color);
|
|
||||||
background-color: var(--theme-elevation-50);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,63 +23,83 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,63 +23,83 @@
|
|||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(247, 255, 251);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(240, 255, 247);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(232, 255, 243);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(224, 255, 239);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(217, 255, 235);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(209, 255, 230);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(201, 255, 226);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(193, 255, 222);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(186, 255, 218);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(178, 255, 214);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(160, 230, 193);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(142, 204, 171);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(125, 179, 150);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(107, 153, 128);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(89, 128, 107);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(71, 102, 86);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(53, 77, 64);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(36, 51, 43);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(18, 25, 21);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-warning-50: rgb(255, 255, 246);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-warning-100: rgb(255, 255, 237);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-warning-150: rgb(254, 255, 228);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-warning-200: rgb(254, 255, 219);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-warning-250: rgb(254, 255, 210);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-warning-300: rgb(254, 255, 200);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-warning-350: rgb(254, 255, 191);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-warning-400: rgb(253, 255, 182);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-warning-450: rgb(253, 255, 173);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-warning-500: rgb(253, 255, 164);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-warning-550: rgb(228, 230, 148);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-warning-600: rgb(202, 204, 131);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-warning-650: rgb(177, 179, 115);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-warning-700: rgb(152, 153, 98);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-warning-750: rgb(127, 128, 82);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-warning-800: rgb(101, 102, 66);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-warning-850: rgb(76, 77, 49);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-warning-900: rgb(51, 51, 33);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-warning-950: rgb(25, 25, 16);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-error-50: rgb(255, 241, 241);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-error-100: rgb(255, 226, 228);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-error-150: rgb(255, 212, 214);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-error-200: rgb(255, 197, 200);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-error-250: rgb(255, 183, 187);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-error-300: rgb(255, 169, 173);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-error-350: rgb(255, 154, 159);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-error-400: rgb(255, 140, 145);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-error-450: rgb(255, 125, 132);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-error-500: rgb(255, 111, 118);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-error-550: rgb(230, 100, 106);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-error-600: rgb(204, 89, 94);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-error-650: rgb(179, 78, 83);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-error-700: rgb(153, 67, 71);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-error-750: rgb(128, 56, 59);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-error-800: rgb(102, 44, 47);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-error-850: rgb(77, 33, 35);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-error-900: rgb(51, 22, 24);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-error-950: rgb(25, 11, 12);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user