Skip to content

Commit c2022f6

Browse files
tylandavistylandavis
authored
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
1 parent aa84385 commit c2022f6

File tree

16 files changed

+769
-644
lines changed

16 files changed

+769
-644
lines changed

‎examples/auth/next-app/app/_css/colors.scss

Lines changed: 77 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -21,63 +21,83 @@
2121
--color-base-950: rgb(7, 7, 7);
2222
--color-base-1000: rgb(0, 0, 0);
2323

24-
--color-success-50: rgb(247, 255, 251);
25-
--color-success-100: rgb(240, 255, 247);
26-
--color-success-150: rgb(232, 255, 243);
27-
--color-success-200: rgb(224, 255, 239);
28-
--color-success-250: rgb(217, 255, 235);
29-
--color-success-300: rgb(209, 255, 230);
30-
--color-success-350: rgb(201, 255, 226);
31-
--color-success-400: rgb(193, 255, 222);
32-
--color-success-450: rgb(186, 255, 218);
33-
--color-success-500: rgb(178, 255, 214);
34-
--color-success-550: rgb(160, 230, 193);
35-
--color-success-600: rgb(142, 204, 171);
36-
--color-success-650: rgb(125, 179, 150);
37-
--color-success-700: rgb(107, 153, 128);
38-
--color-success-750: rgb(89, 128, 107);
39-
--color-success-800: rgb(71, 102, 86);
40-
--color-success-850: rgb(53, 77, 64);
41-
--color-success-900: rgb(36, 51, 43);
42-
--color-success-950: rgb(18, 25, 21);
24+
--color-success-50: rgb(237, 245, 249);
25+
--color-success-100: rgb(218, 237, 248);
26+
--color-success-150: rgb(188, 225, 248);
27+
--color-success-200: rgb(156, 216, 253);
28+
--color-success-250: rgb(125, 204, 248);
29+
--color-success-300: rgb(97, 190, 241);
30+
--color-success-350: rgb(65, 178, 236);
31+
--color-success-400: rgb(36, 164, 223);
32+
--color-success-450: rgb(18, 148, 204);
33+
--color-success-500: rgb(21, 135, 186);
34+
--color-success-550: rgb(12, 121, 168);
35+
--color-success-600: rgb(11, 110, 153);
36+
--color-success-650: rgb(11, 97, 135);
37+
--color-success-700: rgb(17, 88, 121);
38+
--color-success-750: rgb(17, 76, 105);
39+
--color-success-800: rgb(18, 66, 90);
40+
--color-success-850: rgb(18, 56, 76);
41+
--color-success-900: rgb(19, 44, 58);
42+
--color-success-950: rgb(22, 33, 39);
4343

44-
--color-warning-50: rgb(255, 255, 246);
45-
--color-warning-100: rgb(255, 255, 237);
46-
--color-warning-150: rgb(254, 255, 228);
47-
--color-warning-200: rgb(254, 255, 219);
48-
--color-warning-250: rgb(254, 255, 210);
49-
--color-warning-300: rgb(254, 255, 200);
50-
--color-warning-350: rgb(254, 255, 191);
51-
--color-warning-400: rgb(253, 255, 182);
52-
--color-warning-450: rgb(253, 255, 173);
53-
--color-warning-500: rgb(253, 255, 164);
54-
--color-warning-550: rgb(228, 230, 148);
55-
--color-warning-600: rgb(202, 204, 131);
56-
--color-warning-650: rgb(177, 179, 115);
57-
--color-warning-700: rgb(152, 153, 98);
58-
--color-warning-750: rgb(127, 128, 82);
59-
--color-warning-800: rgb(101, 102, 66);
60-
--color-warning-850: rgb(76, 77, 49);
61-
--color-warning-900: rgb(51, 51, 33);
62-
--color-warning-950: rgb(25, 25, 16);
44+
--color-error-50: rgb(250, 241, 240);
45+
--color-error-100: rgb(252, 229, 227);
46+
--color-error-150: rgb(247, 208, 204);
47+
--color-error-200: rgb(254, 193, 188);
48+
--color-error-250: rgb(253, 177, 170);
49+
--color-error-300: rgb(253, 154, 146);
50+
--color-error-350: rgb(253, 131, 123);
51+
--color-error-400: rgb(246, 109, 103);
52+
--color-error-450: rgb(234, 90, 86);
53+
--color-error-500: rgb(218, 75, 72);
54+
--color-error-550: rgb(200, 62, 61);
55+
--color-error-600: rgb(182, 54, 54);
56+
--color-error-650: rgb(161, 47, 47);
57+
--color-error-700: rgb(144, 44, 43);
58+
--color-error-750: rgb(123, 41, 39);
59+
--color-error-800: rgb(105, 39, 37);
60+
--color-error-850: rgb(86, 36, 33);
61+
--color-error-900: rgb(64, 32, 29);
62+
--color-error-950: rgb(44, 26, 24);
6363

64-
--color-error-50: rgb(255, 241, 241);
65-
--color-error-100: rgb(255, 226, 228);
66-
--color-error-150: rgb(255, 212, 214);
67-
--color-error-200: rgb(255, 197, 200);
68-
--color-error-250: rgb(255, 183, 187);
69-
--color-error-300: rgb(255, 169, 173);
70-
--color-error-350: rgb(255, 154, 159);
71-
--color-error-400: rgb(255, 140, 145);
72-
--color-error-450: rgb(255, 125, 132);
73-
--color-error-500: rgb(255, 111, 118);
74-
--color-error-550: rgb(230, 100, 106);
75-
--color-error-600: rgb(204, 89, 94);
76-
--color-error-650: rgb(179, 78, 83);
77-
--color-error-700: rgb(153, 67, 71);
78-
--color-error-750: rgb(128, 56, 59);
79-
--color-error-800: rgb(102, 44, 47);
80-
--color-error-850: rgb(77, 33, 35);
81-
--color-error-900: rgb(51, 22, 24);
82-
--color-error-950: rgb(25, 11, 12);
64+
--color-warning-50: rgb(249, 242, 237);
65+
--color-warning-100: rgb(248, 232, 219);
66+
--color-warning-150: rgb(243, 212, 186);
67+
--color-warning-200: rgb(243, 200, 162);
68+
--color-warning-250: rgb(240, 185, 136);
69+
--color-warning-300: rgb(238, 166, 98);
70+
--color-warning-350: rgb(234, 148, 58);
71+
--color-warning-400: rgb(223, 132, 17);
72+
--color-warning-450: rgb(204, 120, 15);
73+
--color-warning-500: rgb(185, 108, 13);
74+
--color-warning-550: rgb(167, 97, 10);
75+
--color-warning-600: rgb(150, 87, 11);
76+
--color-warning-650: rgb(134, 78, 11);
77+
--color-warning-700: rgb(120, 70, 13);
78+
--color-warning-750: rgb(105, 61, 13);
79+
--color-warning-800: rgb(90, 55, 19);
80+
--color-warning-850: rgb(73, 47, 21);
81+
--color-warning-900: rgb(56, 38, 20);
82+
--color-warning-950: rgb(38, 29, 21);
83+
84+
--color-blue-50: rgb(237, 245, 249);
85+
--color-blue-100: rgb(218, 237, 248);
86+
--color-blue-150: rgb(188, 225, 248);
87+
--color-blue-200: rgb(156, 216, 253);
88+
--color-blue-250: rgb(125, 204, 248);
89+
--color-blue-300: rgb(97, 190, 241);
90+
--color-blue-350: rgb(65, 178, 236);
91+
--color-blue-400: rgb(36, 164, 223);
92+
--color-blue-450: rgb(18, 148, 204);
93+
--color-blue-500: rgb(21, 135, 186);
94+
--color-blue-550: rgb(12, 121, 168);
95+
--color-blue-600: rgb(11, 110, 153);
96+
--color-blue-650: rgb(11, 97, 135);
97+
--color-blue-700: rgb(17, 88, 121);
98+
--color-blue-750: rgb(17, 76, 105);
99+
--color-blue-800: rgb(18, 66, 90);
100+
--color-blue-850: rgb(18, 56, 76);
101+
--color-blue-900: rgb(19, 44, 58);
102+
--color-blue-950: rgb(22, 33, 39);
83103
}

‎examples/auth/next-pages/src/css/colors.scss

Lines changed: 77 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -21,63 +21,83 @@
2121
--color-base-950: rgb(7, 7, 7);
2222
--color-base-1000: rgb(0, 0, 0);
2323

24-
--color-success-50: rgb(247, 255, 251);
25-
--color-success-100: rgb(240, 255, 247);
26-
--color-success-150: rgb(232, 255, 243);
27-
--color-success-200: rgb(224, 255, 239);
28-
--color-success-250: rgb(217, 255, 235);
29-
--color-success-300: rgb(209, 255, 230);
30-
--color-success-350: rgb(201, 255, 226);
31-
--color-success-400: rgb(193, 255, 222);
32-
--color-success-450: rgb(186, 255, 218);
33-
--color-success-500: rgb(178, 255, 214);
34-
--color-success-550: rgb(160, 230, 193);
35-
--color-success-600: rgb(142, 204, 171);
36-
--color-success-650: rgb(125, 179, 150);
37-
--color-success-700: rgb(107, 153, 128);
38-
--color-success-750: rgb(89, 128, 107);
39-
--color-success-800: rgb(71, 102, 86);
40-
--color-success-850: rgb(53, 77, 64);
41-
--color-success-900: rgb(36, 51, 43);
42-
--color-success-950: rgb(18, 25, 21);
24+
--color-success-50: rgb(237, 245, 249);
25+
--color-success-100: rgb(218, 237, 248);
26+
--color-success-150: rgb(188, 225, 248);
27+
--color-success-200: rgb(156, 216, 253);
28+
--color-success-250: rgb(125, 204, 248);
29+
--color-success-300: rgb(97, 190, 241);
30+
--color-success-350: rgb(65, 178, 236);
31+
--color-success-400: rgb(36, 164, 223);
32+
--color-success-450: rgb(18, 148, 204);
33+
--color-success-500: rgb(21, 135, 186);
34+
--color-success-550: rgb(12, 121, 168);
35+
--color-success-600: rgb(11, 110, 153);
36+
--color-success-650: rgb(11, 97, 135);
37+
--color-success-700: rgb(17, 88, 121);
38+
--color-success-750: rgb(17, 76, 105);
39+
--color-success-800: rgb(18, 66, 90);
40+
--color-success-850: rgb(18, 56, 76);
41+
--color-success-900: rgb(19, 44, 58);
42+
--color-success-950: rgb(22, 33, 39);
4343

44-
--color-warning-50: rgb(255, 255, 246);
45-
--color-warning-100: rgb(255, 255, 237);
46-
--color-warning-150: rgb(254, 255, 228);
47-
--color-warning-200: rgb(254, 255, 219);
48-
--color-warning-250: rgb(254, 255, 210);
49-
--color-warning-300: rgb(254, 255, 200);
50-
--color-warning-350: rgb(254, 255, 191);
51-
--color-warning-400: rgb(253, 255, 182);
52-
--color-warning-450: rgb(253, 255, 173);
53-
--color-warning-500: rgb(253, 255, 164);
54-
--color-warning-550: rgb(228, 230, 148);
55-
--color-warning-600: rgb(202, 204, 131);
56-
--color-warning-650: rgb(177, 179, 115);
57-
--color-warning-700: rgb(152, 153, 98);
58-
--color-warning-750: rgb(127, 128, 82);
59-
--color-warning-800: rgb(101, 102, 66);
60-
--color-warning-850: rgb(76, 77, 49);
61-
--color-warning-900: rgb(51, 51, 33);
62-
--color-warning-950: rgb(25, 25, 16);
44+
--color-error-50: rgb(250, 241, 240);
45+
--color-error-100: rgb(252, 229, 227);
46+
--color-error-150: rgb(247, 208, 204);
47+
--color-error-200: rgb(254, 193, 188);
48+
--color-error-250: rgb(253, 177, 170);
49+
--color-error-300: rgb(253, 154, 146);
50+
--color-error-350: rgb(253, 131, 123);
51+
--color-error-400: rgb(246, 109, 103);
52+
--color-error-450: rgb(234, 90, 86);
53+
--color-error-500: rgb(218, 75, 72);
54+
--color-error-550: rgb(200, 62, 61);
55+
--color-error-600: rgb(182, 54, 54);
56+
--color-error-650: rgb(161, 47, 47);
57+
--color-error-700: rgb(144, 44, 43);
58+
--color-error-750: rgb(123, 41, 39);
59+
--color-error-800: rgb(105, 39, 37);
60+
--color-error-850: rgb(86, 36, 33);
61+
--color-error-900: rgb(64, 32, 29);
62+
--color-error-950: rgb(44, 26, 24);
6363

64-
--color-error-50: rgb(255, 241, 241);
65-
--color-error-100: rgb(255, 226, 228);
66-
--color-error-150: rgb(255, 212, 214);
67-
--color-error-200: rgb(255, 197, 200);
68-
--color-error-250: rgb(255, 183, 187);
69-
--color-error-300: rgb(255, 169, 173);
70-
--color-error-350: rgb(255, 154, 159);
71-
--color-error-400: rgb(255, 140, 145);
72-
--color-error-450: rgb(255, 125, 132);
73-
--color-error-500: rgb(255, 111, 118);
74-
--color-error-550: rgb(230, 100, 106);
75-
--color-error-600: rgb(204, 89, 94);
76-
--color-error-650: rgb(179, 78, 83);
77-
--color-error-700: rgb(153, 67, 71);
78-
--color-error-750: rgb(128, 56, 59);
79-
--color-error-800: rgb(102, 44, 47);
80-
--color-error-850: rgb(77, 33, 35);
81-
--color-error-900: rgb(51, 22, 24);
82-
--color-error-950: rgb(25, 11, 12);
64+
--color-warning-50: rgb(249, 242, 237);
65+
--color-warning-100: rgb(248, 232, 219);
66+
--color-warning-150: rgb(243, 212, 186);
67+
--color-warning-200: rgb(243, 200, 162);
68+
--color-warning-250: rgb(240, 185, 136);
69+
--color-warning-300: rgb(238, 166, 98);
70+
--color-warning-350: rgb(234, 148, 58);
71+
--color-warning-400: rgb(223, 132, 17);
72+
--color-warning-450: rgb(204, 120, 15);
73+
--color-warning-500: rgb(185, 108, 13);
74+
--color-warning-550: rgb(167, 97, 10);
75+
--color-warning-600: rgb(150, 87, 11);
76+
--color-warning-650: rgb(134, 78, 11);
77+
--color-warning-700: rgb(120, 70, 13);
78+
--color-warning-750: rgb(105, 61, 13);
79+
--color-warning-800: rgb(90, 55, 19);
80+
--color-warning-850: rgb(73, 47, 21);
81+
--color-warning-900: rgb(56, 38, 20);
82+
--color-warning-950: rgb(38, 29, 21);
83+
84+
--color-blue-50: rgb(237, 245, 249);
85+
--color-blue-100: rgb(218, 237, 248);
86+
--color-blue-150: rgb(188, 225, 248);
87+
--color-blue-200: rgb(156, 216, 253);
88+
--color-blue-250: rgb(125, 204, 248);
89+
--color-blue-300: rgb(97, 190, 241);
90+
--color-blue-350: rgb(65, 178, 236);
91+
--color-blue-400: rgb(36, 164, 223);
92+
--color-blue-450: rgb(18, 148, 204);
93+
--color-blue-500: rgb(21, 135, 186);
94+
--color-blue-550: rgb(12, 121, 168);
95+
--color-blue-600: rgb(11, 110, 153);
96+
--color-blue-650: rgb(11, 97, 135);
97+
--color-blue-700: rgb(17, 88, 121);
98+
--color-blue-750: rgb(17, 76, 105);
99+
--color-blue-800: rgb(18, 66, 90);
100+
--color-blue-850: rgb(18, 56, 76);
101+
--color-blue-900: rgb(19, 44, 58);
102+
--color-blue-950: rgb(22, 33, 39);
83103
}

0 commit comments

Comments
 (0)