Qeyd: Dəyişiklikləri yayımladıqdan sonra etdiyiniz dəyişikliklərin görünməsi üçün brauzerinizin keşinin təmizlənməsi lazım ola bilər.
- Firefox / Safari: Reload düyməsinə basılı tutarkən Shift düyməsinə basın, və ya Ctrl+F5 və ya Ctrl+R (Mac üçün ⌘-R )
- Google Chrome: Ctrl-Shift-R (Mac üçün ⌘-Shift-R)
- Edge: Ctrl düyməsini basılı tutarkən Refresh düyməsinə basın, və ya sadəcə Ctrl+F5.
:root {
/* https://doc.wikimedia.org/codex/latest/style-guide/colors.html ünvanından rənglər */
--gray-50: #f8f9fa;
--gray-100: #eaecf0;
--gray-200: #dadde3;
--gray-300: #c8ccd1;
--gray-400: #a2a9b1;
--gray-500: #72777d;
--gray-600: #54595d;
--gray-700: #404244;
--gray-800: #27292d;
--gray-900: #202122;
--gray-1000: #101418;
--red-50: #ffe9e5;
--red-100: #ffdad3;
--red-200: #ffc8bd;
--red-300: #fea898;
--red-400: #fd7865;
--red-500: #f54739;
--red-600: #d74032;
--red-700: #bf3c2c;
--red-800: #9f3526;
--red-900: #612419;
--red-1000: #3c1a13;
--orange-50: #ffead4;
--orange-100: #ffdcb8;
--orange-200: #ffc894;
--orange-300: #ffa758;
--orange-400: #f97f26;
--orange-500: #d46926;
--orange-600: #bb5c26;
--orange-700: #a95226;
--orange-800: #8e4424;
--orange-900: #572c19;
--orange-1000: #361d13;
--yellow-50: #fdf2d5;
--yellow-100: #fbe2a2;
--yellow-200: #fecc44;
--yellow-300: #eeb533;
--yellow-400: #ca982e;
--yellow-500: #ab7f2a;
--yellow-600: #987027;
--yellow-700: #886425;
--yellow-800: #735421;
--yellow-900: #453217;
--yellow-1000: #2d2212;
--lime-50: #e3f2e4;
--lime-100: #d1e9d2;
--lime-200: #b9debc;
--lime-300: #94cb9a;
--lime-400: #5db26c;
--lime-500: #259948;
--lime-600: #1f893f;
--lime-700: #1f7a39;
--lime-800: #1f6631;
--lime-900: #183f20;
--lime-1000: #142817;
--green-50: #dff2eb;
--green-100: #c9eadd;
--green-200: #aedfcd;
--green-300: #80cdb3;
--green-400: #2cb491;
--green-500: #099979;
--green-600: #14876b;
--green-700: #177860;
--green-800: #196551;
--green-900: #153d31;
--green-1000: #132821;
--blue-50: #f1f4fd;
--blue-100: #dce3f9;
--blue-200: #cbd6f6;
--blue-300: #b0c1f0;
--blue-400: #88a3e8;
--blue-500: #6485d1;
--blue-600: #4b77d6;
--blue-700: #36c;
--blue-800: #3056a9;
--blue-900: #233566;
--blue-1000: #1b223d;
--purple-50: #f0ecf6;
--purple-100: #e6e0f0;
--purple-200: #d9d0e9;
--purple-300: #c5b9dd;
--purple-400: #a799cd;
--purple-500: #8d7ebd;
--purple-600: #7a6db7;
--purple-700: #6a60b0;
--purple-800: #534fa3;
--purple-900: #353262;
--purple-1000: #23203b;
--pink-50: #f5ebf2;
--pink-100: #eedeea;
--pink-200: #e6cede;
--pink-300: #d9b4cd;
--pink-400: #c690b4;
--pink-500: #b5739e;
--pink-600: #ac5c90;
--pink-700: #9b527f;
--pink-800: #82456a;
--pink-900: #4e2c40;
--pink-1000: #311e28;
--maroon-50: #f6ebeb;
--maroon-100: #f0dedd;
--maroon-200: #e8cecd;
--maroon-300: #dcb5b3;
--maroon-400: #c99391;
--maroon-500: #b57775;
--maroon-600: #ac6262;
--maroon-700: #9f5555;
--maroon-800: #854848;
--maroon-900: #512e2e;
--maroon-1000: #321f1e;
/* yuxarıdakı palitr əsasında rəng tokenləri */
--background-color-red-subtle: var(--red-50);
--background-color-red: var(--red-100);
--background-color-orange-subtle: var(--orange-50);
--background-color-orange: var(--orange-100);
--background-color-yellow-subtle: var(--yellow-50);
--background-color-yellow: var(--yellow-100);
--background-color-lime-subtle: var(--lime-50);
--background-color-lime: var(--lime-100);
--background-color-green-subtle: var(--green-50);
--background-color-green: var(--green-100);
--background-color-blue-subtle: var(--blue-50);
--background-color-blue: var(--blue-100);
--background-color-purple-subtle: var(--purple-50);
--background-color-purple: var(--purple-100);
--background-color-pink-subtle: var(--pink-50);
--background-color-pink: var(--pink-100);
--background-color-maroon-subtle: var(--maroon-50);
--background-color-maroon: var(--maroon-100);
}
/* rəng tokenləri üçün tünd rejim dəstəyi */
@media screen {
html.skin-theme-clientpref-night {
--background-color-red-subtle: var(--red-1000);
--background-color-red: var(--red-900);
--background-color-orange-subtle: var(--orange-1000);
--background-color-orange: var(--orange-900);
--background-color-yellow-subtle: var(--yellow-1000);
--background-color-yellow: var(--yellow-900);
--background-color-lime-subtle: var(--lime-1000);
--background-color-lime: var(--lime-900);
--background-color-green-subtle: var(--green-1000);
--background-color-green: var(--green-900);
--background-color-blue-subtle: var(--blue-1000);
--background-color-blue: var(--blue-900);
--background-color-purple-subtle: var(--purple-1000);
--background-color-purple: var(--purple-900);
--background-color-pink-subtle: var(--pink-1000);
--background-color-pink: var(--pink-900);
--background-color-maroon-subtle: var(--maroon-1000);
--background-color-maroon: var(--maroon-900);
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--background-color-red-subtle: var(--red-1000);
--background-color-red: var(--red-900);
--background-color-orange-subtle: var(--orange-1000);
--background-color-orange: var(--orange-900);
--background-color-yellow-subtle: var(--yellow-1000);
--background-color-yellow: var(--yellow-900);
--background-color-lime-subtle: var(--lime-1000);
--background-color-lime: var(--lime-900);
--background-color-green-subtle: var(--green-1000);
--background-color-green: var(--green-900);
--background-color-blue-subtle: var(--blue-1000);
--background-color-blue: var(--blue-900);
--background-color-purple-subtle: var(--purple-1000);
--background-color-purple: var(--purple-900);
--background-color-pink-subtle: var(--pink-1000);
--background-color-pink: var(--pink-900);
--background-color-maroon-subtle: var(--maroon-1000);
--background-color-maroon: var(--maroon-900);
}
}