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
2024-07-08 10:35:19 -04:00
committed by GitHub
parent aa84385642
commit c2022f60df
16 changed files with 771 additions and 646 deletions

View File

@@ -21,63 +21,83 @@
--color-base-950: rgb(7, 7, 7);
--color-base-1000: rgb(0, 0, 0);
--color-success-50: rgb(247, 255, 251);
--color-success-100: rgb(240, 255, 247);
--color-success-150: rgb(232, 255, 243);
--color-success-200: rgb(224, 255, 239);
--color-success-250: rgb(217, 255, 235);
--color-success-300: rgb(209, 255, 230);
--color-success-350: rgb(201, 255, 226);
--color-success-400: rgb(193, 255, 222);
--color-success-450: rgb(186, 255, 218);
--color-success-500: rgb(178, 255, 214);
--color-success-550: rgb(160, 230, 193);
--color-success-600: rgb(142, 204, 171);
--color-success-650: rgb(125, 179, 150);
--color-success-700: rgb(107, 153, 128);
--color-success-750: rgb(89, 128, 107);
--color-success-800: rgb(71, 102, 86);
--color-success-850: rgb(53, 77, 64);
--color-success-900: rgb(36, 51, 43);
--color-success-950: rgb(18, 25, 21);
--color-success-50: rgb(237, 245, 249);
--color-success-100: rgb(218, 237, 248);
--color-success-150: rgb(188, 225, 248);
--color-success-200: rgb(156, 216, 253);
--color-success-250: rgb(125, 204, 248);
--color-success-300: rgb(97, 190, 241);
--color-success-350: rgb(65, 178, 236);
--color-success-400: rgb(36, 164, 223);
--color-success-450: rgb(18, 148, 204);
--color-success-500: rgb(21, 135, 186);
--color-success-550: rgb(12, 121, 168);
--color-success-600: rgb(11, 110, 153);
--color-success-650: rgb(11, 97, 135);
--color-success-700: rgb(17, 88, 121);
--color-success-750: rgb(17, 76, 105);
--color-success-800: rgb(18, 66, 90);
--color-success-850: rgb(18, 56, 76);
--color-success-900: rgb(19, 44, 58);
--color-success-950: rgb(22, 33, 39);
--color-warning-50: rgb(255, 255, 246);
--color-warning-100: rgb(255, 255, 237);
--color-warning-150: rgb(254, 255, 228);
--color-warning-200: rgb(254, 255, 219);
--color-warning-250: rgb(254, 255, 210);
--color-warning-300: rgb(254, 255, 200);
--color-warning-350: rgb(254, 255, 191);
--color-warning-400: rgb(253, 255, 182);
--color-warning-450: rgb(253, 255, 173);
--color-warning-500: rgb(253, 255, 164);
--color-warning-550: rgb(228, 230, 148);
--color-warning-600: rgb(202, 204, 131);
--color-warning-650: rgb(177, 179, 115);
--color-warning-700: rgb(152, 153, 98);
--color-warning-750: rgb(127, 128, 82);
--color-warning-800: rgb(101, 102, 66);
--color-warning-850: rgb(76, 77, 49);
--color-warning-900: rgb(51, 51, 33);
--color-warning-950: rgb(25, 25, 16);
--color-error-50: rgb(250, 241, 240);
--color-error-100: rgb(252, 229, 227);
--color-error-150: rgb(247, 208, 204);
--color-error-200: rgb(254, 193, 188);
--color-error-250: rgb(253, 177, 170);
--color-error-300: rgb(253, 154, 146);
--color-error-350: rgb(253, 131, 123);
--color-error-400: rgb(246, 109, 103);
--color-error-450: rgb(234, 90, 86);
--color-error-500: rgb(218, 75, 72);
--color-error-550: rgb(200, 62, 61);
--color-error-600: rgb(182, 54, 54);
--color-error-650: rgb(161, 47, 47);
--color-error-700: rgb(144, 44, 43);
--color-error-750: rgb(123, 41, 39);
--color-error-800: rgb(105, 39, 37);
--color-error-850: rgb(86, 36, 33);
--color-error-900: rgb(64, 32, 29);
--color-error-950: rgb(44, 26, 24);
--color-error-50: rgb(255, 241, 241);
--color-error-100: rgb(255, 226, 228);
--color-error-150: rgb(255, 212, 214);
--color-error-200: rgb(255, 197, 200);
--color-error-250: rgb(255, 183, 187);
--color-error-300: rgb(255, 169, 173);
--color-error-350: rgb(255, 154, 159);
--color-error-400: rgb(255, 140, 145);
--color-error-450: rgb(255, 125, 132);
--color-error-500: rgb(255, 111, 118);
--color-error-550: rgb(230, 100, 106);
--color-error-600: rgb(204, 89, 94);
--color-error-650: rgb(179, 78, 83);
--color-error-700: rgb(153, 67, 71);
--color-error-750: rgb(128, 56, 59);
--color-error-800: rgb(102, 44, 47);
--color-error-850: rgb(77, 33, 35);
--color-error-900: rgb(51, 22, 24);
--color-error-950: rgb(25, 11, 12);
--color-warning-50: rgb(249, 242, 237);
--color-warning-100: rgb(248, 232, 219);
--color-warning-150: rgb(243, 212, 186);
--color-warning-200: rgb(243, 200, 162);
--color-warning-250: rgb(240, 185, 136);
--color-warning-300: rgb(238, 166, 98);
--color-warning-350: rgb(234, 148, 58);
--color-warning-400: rgb(223, 132, 17);
--color-warning-450: rgb(204, 120, 15);
--color-warning-500: rgb(185, 108, 13);
--color-warning-550: rgb(167, 97, 10);
--color-warning-600: rgb(150, 87, 11);
--color-warning-650: rgb(134, 78, 11);
--color-warning-700: rgb(120, 70, 13);
--color-warning-750: rgb(105, 61, 13);
--color-warning-800: rgb(90, 55, 19);
--color-warning-850: rgb(73, 47, 21);
--color-warning-900: rgb(56, 38, 20);
--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);
}

View File

@@ -21,63 +21,83 @@
--color-base-950: rgb(7, 7, 7);
--color-base-1000: rgb(0, 0, 0);
--color-success-50: rgb(247, 255, 251);
--color-success-100: rgb(240, 255, 247);
--color-success-150: rgb(232, 255, 243);
--color-success-200: rgb(224, 255, 239);
--color-success-250: rgb(217, 255, 235);
--color-success-300: rgb(209, 255, 230);
--color-success-350: rgb(201, 255, 226);
--color-success-400: rgb(193, 255, 222);
--color-success-450: rgb(186, 255, 218);
--color-success-500: rgb(178, 255, 214);
--color-success-550: rgb(160, 230, 193);
--color-success-600: rgb(142, 204, 171);
--color-success-650: rgb(125, 179, 150);
--color-success-700: rgb(107, 153, 128);
--color-success-750: rgb(89, 128, 107);
--color-success-800: rgb(71, 102, 86);
--color-success-850: rgb(53, 77, 64);
--color-success-900: rgb(36, 51, 43);
--color-success-950: rgb(18, 25, 21);
--color-success-50: rgb(237, 245, 249);
--color-success-100: rgb(218, 237, 248);
--color-success-150: rgb(188, 225, 248);
--color-success-200: rgb(156, 216, 253);
--color-success-250: rgb(125, 204, 248);
--color-success-300: rgb(97, 190, 241);
--color-success-350: rgb(65, 178, 236);
--color-success-400: rgb(36, 164, 223);
--color-success-450: rgb(18, 148, 204);
--color-success-500: rgb(21, 135, 186);
--color-success-550: rgb(12, 121, 168);
--color-success-600: rgb(11, 110, 153);
--color-success-650: rgb(11, 97, 135);
--color-success-700: rgb(17, 88, 121);
--color-success-750: rgb(17, 76, 105);
--color-success-800: rgb(18, 66, 90);
--color-success-850: rgb(18, 56, 76);
--color-success-900: rgb(19, 44, 58);
--color-success-950: rgb(22, 33, 39);
--color-warning-50: rgb(255, 255, 246);
--color-warning-100: rgb(255, 255, 237);
--color-warning-150: rgb(254, 255, 228);
--color-warning-200: rgb(254, 255, 219);
--color-warning-250: rgb(254, 255, 210);
--color-warning-300: rgb(254, 255, 200);
--color-warning-350: rgb(254, 255, 191);
--color-warning-400: rgb(253, 255, 182);
--color-warning-450: rgb(253, 255, 173);
--color-warning-500: rgb(253, 255, 164);
--color-warning-550: rgb(228, 230, 148);
--color-warning-600: rgb(202, 204, 131);
--color-warning-650: rgb(177, 179, 115);
--color-warning-700: rgb(152, 153, 98);
--color-warning-750: rgb(127, 128, 82);
--color-warning-800: rgb(101, 102, 66);
--color-warning-850: rgb(76, 77, 49);
--color-warning-900: rgb(51, 51, 33);
--color-warning-950: rgb(25, 25, 16);
--color-error-50: rgb(250, 241, 240);
--color-error-100: rgb(252, 229, 227);
--color-error-150: rgb(247, 208, 204);
--color-error-200: rgb(254, 193, 188);
--color-error-250: rgb(253, 177, 170);
--color-error-300: rgb(253, 154, 146);
--color-error-350: rgb(253, 131, 123);
--color-error-400: rgb(246, 109, 103);
--color-error-450: rgb(234, 90, 86);
--color-error-500: rgb(218, 75, 72);
--color-error-550: rgb(200, 62, 61);
--color-error-600: rgb(182, 54, 54);
--color-error-650: rgb(161, 47, 47);
--color-error-700: rgb(144, 44, 43);
--color-error-750: rgb(123, 41, 39);
--color-error-800: rgb(105, 39, 37);
--color-error-850: rgb(86, 36, 33);
--color-error-900: rgb(64, 32, 29);
--color-error-950: rgb(44, 26, 24);
--color-error-50: rgb(255, 241, 241);
--color-error-100: rgb(255, 226, 228);
--color-error-150: rgb(255, 212, 214);
--color-error-200: rgb(255, 197, 200);
--color-error-250: rgb(255, 183, 187);
--color-error-300: rgb(255, 169, 173);
--color-error-350: rgb(255, 154, 159);
--color-error-400: rgb(255, 140, 145);
--color-error-450: rgb(255, 125, 132);
--color-error-500: rgb(255, 111, 118);
--color-error-550: rgb(230, 100, 106);
--color-error-600: rgb(204, 89, 94);
--color-error-650: rgb(179, 78, 83);
--color-error-700: rgb(153, 67, 71);
--color-error-750: rgb(128, 56, 59);
--color-error-800: rgb(102, 44, 47);
--color-error-850: rgb(77, 33, 35);
--color-error-900: rgb(51, 22, 24);
--color-error-950: rgb(25, 11, 12);
--color-warning-50: rgb(249, 242, 237);
--color-warning-100: rgb(248, 232, 219);
--color-warning-150: rgb(243, 212, 186);
--color-warning-200: rgb(243, 200, 162);
--color-warning-250: rgb(240, 185, 136);
--color-warning-300: rgb(238, 166, 98);
--color-warning-350: rgb(234, 148, 58);
--color-warning-400: rgb(223, 132, 17);
--color-warning-450: rgb(204, 120, 15);
--color-warning-500: rgb(185, 108, 13);
--color-warning-550: rgb(167, 97, 10);
--color-warning-600: rgb(150, 87, 11);
--color-warning-650: rgb(134, 78, 11);
--color-warning-700: rgb(120, 70, 13);
--color-warning-750: rgb(105, 61, 13);
--color-warning-800: rgb(90, 55, 19);
--color-warning-850: rgb(73, 47, 21);
--color-warning-900: rgb(56, 38, 20);
--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);
}

View File

@@ -21,63 +21,83 @@
--color-base-950: rgb(7, 7, 7);
--color-base-1000: rgb(0, 0, 0);
--color-success-50: rgb(247, 255, 251);
--color-success-100: rgb(240, 255, 247);
--color-success-150: rgb(232, 255, 243);
--color-success-200: rgb(224, 255, 239);
--color-success-250: rgb(217, 255, 235);
--color-success-300: rgb(209, 255, 230);
--color-success-350: rgb(201, 255, 226);
--color-success-400: rgb(193, 255, 222);
--color-success-450: rgb(186, 255, 218);
--color-success-500: rgb(178, 255, 214);
--color-success-550: rgb(160, 230, 193);
--color-success-600: rgb(142, 204, 171);
--color-success-650: rgb(125, 179, 150);
--color-success-700: rgb(107, 153, 128);
--color-success-750: rgb(89, 128, 107);
--color-success-800: rgb(71, 102, 86);
--color-success-850: rgb(53, 77, 64);
--color-success-900: rgb(36, 51, 43);
--color-success-950: rgb(18, 25, 21);
--color-success-50: rgb(237, 245, 249);
--color-success-100: rgb(218, 237, 248);
--color-success-150: rgb(188, 225, 248);
--color-success-200: rgb(156, 216, 253);
--color-success-250: rgb(125, 204, 248);
--color-success-300: rgb(97, 190, 241);
--color-success-350: rgb(65, 178, 236);
--color-success-400: rgb(36, 164, 223);
--color-success-450: rgb(18, 148, 204);
--color-success-500: rgb(21, 135, 186);
--color-success-550: rgb(12, 121, 168);
--color-success-600: rgb(11, 110, 153);
--color-success-650: rgb(11, 97, 135);
--color-success-700: rgb(17, 88, 121);
--color-success-750: rgb(17, 76, 105);
--color-success-800: rgb(18, 66, 90);
--color-success-850: rgb(18, 56, 76);
--color-success-900: rgb(19, 44, 58);
--color-success-950: rgb(22, 33, 39);
--color-warning-50: rgb(255, 255, 246);
--color-warning-100: rgb(255, 255, 237);
--color-warning-150: rgb(254, 255, 228);
--color-warning-200: rgb(254, 255, 219);
--color-warning-250: rgb(254, 255, 210);
--color-warning-300: rgb(254, 255, 200);
--color-warning-350: rgb(254, 255, 191);
--color-warning-400: rgb(253, 255, 182);
--color-warning-450: rgb(253, 255, 173);
--color-warning-500: rgb(253, 255, 164);
--color-warning-550: rgb(228, 230, 148);
--color-warning-600: rgb(202, 204, 131);
--color-warning-650: rgb(177, 179, 115);
--color-warning-700: rgb(152, 153, 98);
--color-warning-750: rgb(127, 128, 82);
--color-warning-800: rgb(101, 102, 66);
--color-warning-850: rgb(76, 77, 49);
--color-warning-900: rgb(51, 51, 33);
--color-warning-950: rgb(25, 25, 16);
--color-error-50: rgb(250, 241, 240);
--color-error-100: rgb(252, 229, 227);
--color-error-150: rgb(247, 208, 204);
--color-error-200: rgb(254, 193, 188);
--color-error-250: rgb(253, 177, 170);
--color-error-300: rgb(253, 154, 146);
--color-error-350: rgb(253, 131, 123);
--color-error-400: rgb(246, 109, 103);
--color-error-450: rgb(234, 90, 86);
--color-error-500: rgb(218, 75, 72);
--color-error-550: rgb(200, 62, 61);
--color-error-600: rgb(182, 54, 54);
--color-error-650: rgb(161, 47, 47);
--color-error-700: rgb(144, 44, 43);
--color-error-750: rgb(123, 41, 39);
--color-error-800: rgb(105, 39, 37);
--color-error-850: rgb(86, 36, 33);
--color-error-900: rgb(64, 32, 29);
--color-error-950: rgb(44, 26, 24);
--color-error-50: rgb(255, 241, 241);
--color-error-100: rgb(255, 226, 228);
--color-error-150: rgb(255, 212, 214);
--color-error-200: rgb(255, 197, 200);
--color-error-250: rgb(255, 183, 187);
--color-error-300: rgb(255, 169, 173);
--color-error-350: rgb(255, 154, 159);
--color-error-400: rgb(255, 140, 145);
--color-error-450: rgb(255, 125, 132);
--color-error-500: rgb(255, 111, 118);
--color-error-550: rgb(230, 100, 106);
--color-error-600: rgb(204, 89, 94);
--color-error-650: rgb(179, 78, 83);
--color-error-700: rgb(153, 67, 71);
--color-error-750: rgb(128, 56, 59);
--color-error-800: rgb(102, 44, 47);
--color-error-850: rgb(77, 33, 35);
--color-error-900: rgb(51, 22, 24);
--color-error-950: rgb(25, 11, 12);
--color-warning-50: rgb(249, 242, 237);
--color-warning-100: rgb(248, 232, 219);
--color-warning-150: rgb(243, 212, 186);
--color-warning-200: rgb(243, 200, 162);
--color-warning-250: rgb(240, 185, 136);
--color-warning-300: rgb(238, 166, 98);
--color-warning-350: rgb(234, 148, 58);
--color-warning-400: rgb(223, 132, 17);
--color-warning-450: rgb(204, 120, 15);
--color-warning-500: rgb(185, 108, 13);
--color-warning-550: rgb(167, 97, 10);
--color-warning-600: rgb(150, 87, 11);
--color-warning-650: rgb(134, 78, 11);
--color-warning-700: rgb(120, 70, 13);
--color-warning-750: rgb(105, 61, 13);
--color-warning-800: rgb(90, 55, 19);
--color-warning-850: rgb(73, 47, 21);
--color-warning-900: rgb(56, 38, 20);
--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);
}