@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
124 lines (123 loc) • 4.85 kB
CSS
:root, .light, .light-theme {
--jade-1: #fbfefd;
--jade-2: #f4fbf7;
--jade-3: #e6f7ed;
--jade-4: #d6f1e3;
--jade-5: #c3e9d7;
--jade-6: #acdec8;
--jade-7: #8bceb6;
--jade-8: #56ba9f;
--jade-9: #29a383;
--jade-10: #26997b;
--jade-11: #208368;
--jade-12: #1d3b31;
--jade-a1: #00c08004;
--jade-a2: #00a3460b;
--jade-a3: #00ae4819;
--jade-a4: #00a85129;
--jade-a5: #00a2553c;
--jade-a6: #009a5753;
--jade-a7: #00945f74;
--jade-a8: #00976ea9;
--jade-a9: #00916bd6;
--jade-a10: #008764d9;
--jade-a11: #007152df;
--jade-a12: #002217e2;
--jade-surface: #f1faf5cc;
--jade-indicator: var(--jade-9);
--jade-track: var(--jade-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .light, .light-theme {
--jade-1: color(display-p3 0.986 0.996 0.992);
--jade-2: color(display-p3 0.962 0.983 0.969);
--jade-3: color(display-p3 0.912 0.965 0.932);
--jade-4: color(display-p3 0.858 0.941 0.893);
--jade-5: color(display-p3 0.795 0.909 0.847);
--jade-6: color(display-p3 0.715 0.864 0.791);
--jade-7: color(display-p3 0.603 0.802 0.718);
--jade-8: color(display-p3 0.44 0.72 0.629);
--jade-9: color(display-p3 0.319 0.63 0.521);
--jade-10: color(display-p3 0.299 0.592 0.488);
--jade-11: color(display-p3 0.15 0.5 0.37);
--jade-12: color(display-p3 0.142 0.229 0.194);
--jade-a1: color(display-p3 0.024 0.757 0.514 / 0.016);
--jade-a2: color(display-p3 0.024 0.612 0.22 / 0.04);
--jade-a3: color(display-p3 0.012 0.596 0.235 / 0.087);
--jade-a4: color(display-p3 0.008 0.588 0.255 / 0.142);
--jade-a5: color(display-p3 0.004 0.561 0.251 / 0.204);
--jade-a6: color(display-p3 0.004 0.525 0.278 / 0.287);
--jade-a7: color(display-p3 0.004 0.506 0.29 / 0.397);
--jade-a8: color(display-p3 0 0.506 0.337 / 0.561);
--jade-a9: color(display-p3 0 0.459 0.298 / 0.683);
--jade-a10: color(display-p3 0 0.42 0.271 / 0.702);
--jade-a11: color(display-p3 0.15 0.5 0.37);
--jade-a12: color(display-p3 0.142 0.229 0.194);
--jade-surface: color(display-p3 0.9529 0.9804 0.9608 / 0.8);
}
}
}
.dark, .dark-theme {
--jade-1: #0d1512;
--jade-2: #121c18;
--jade-3: #0f2e22;
--jade-4: #0b3b2c;
--jade-5: #114837;
--jade-6: #1b5745;
--jade-7: #246854;
--jade-8: #2a7e68;
--jade-9: #29a383;
--jade-10: #27b08b;
--jade-11: #1fd8a4;
--jade-12: #adf0d4;
--jade-a1: #00de4505;
--jade-a2: #27fba60c;
--jade-a3: #02f99920;
--jade-a4: #00ffaa2d;
--jade-a5: #11ffb63b;
--jade-a6: #34ffc24b;
--jade-a7: #45fdc75e;
--jade-a8: #48ffcf75;
--jade-a9: #38feca9d;
--jade-a10: #31fec7ab;
--jade-a11: #21fec0d6;
--jade-a12: #b8ffe1ef;
--jade-surface: #13271f80;
--jade-indicator: var(--jade-9);
--jade-track: var(--jade-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.dark, .dark-theme {
--jade-1: color(display-p3 0.059 0.083 0.071);
--jade-2: color(display-p3 0.078 0.11 0.094);
--jade-3: color(display-p3 0.091 0.176 0.138);
--jade-4: color(display-p3 0.102 0.228 0.177);
--jade-5: color(display-p3 0.133 0.279 0.221);
--jade-6: color(display-p3 0.174 0.334 0.273);
--jade-7: color(display-p3 0.219 0.402 0.335);
--jade-8: color(display-p3 0.263 0.488 0.411);
--jade-9: color(display-p3 0.319 0.63 0.521);
--jade-10: color(display-p3 0.338 0.68 0.555);
--jade-11: color(display-p3 0.4 0.835 0.656);
--jade-12: color(display-p3 0.734 0.934 0.838);
--jade-a1: color(display-p3 0 0.992 0.298 / 0.017);
--jade-a2: color(display-p3 0.318 0.988 0.651 / 0.047);
--jade-a3: color(display-p3 0.267 1 0.667 / 0.118);
--jade-a4: color(display-p3 0.275 0.996 0.702 / 0.173);
--jade-a5: color(display-p3 0.361 1 0.741 / 0.227);
--jade-a6: color(display-p3 0.439 1 0.796 / 0.286);
--jade-a7: color(display-p3 0.49 1 0.804 / 0.362);
--jade-a8: color(display-p3 0.506 1 0.835 / 0.45);
--jade-a9: color(display-p3 0.478 0.996 0.816 / 0.606);
--jade-a10: color(display-p3 0.478 1 0.816 / 0.656);
--jade-a11: color(display-p3 0.4 0.835 0.656);
--jade-a12: color(display-p3 0.734 0.934 0.838);
--jade-surface: color(display-p3 0.0863 0.149 0.1176 / 0.5);
}
}
}
:root {
--jade-contrast: white;
}