@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
124 lines (123 loc) • 5.07 kB
CSS
:root, .light, .light-theme {
--purple-1: #fefcfe;
--purple-2: #fbf7fe;
--purple-3: #f7edfe;
--purple-4: #f2e2fc;
--purple-5: #ead5f9;
--purple-6: #e0c4f4;
--purple-7: #d1afec;
--purple-8: #be93e4;
--purple-9: #8e4ec6;
--purple-10: #8347b9;
--purple-11: #8145b5;
--purple-12: #402060;
--purple-a1: #aa00aa03;
--purple-a2: #8000e008;
--purple-a3: #8e00f112;
--purple-a4: #8d00e51d;
--purple-a5: #8000db2a;
--purple-a6: #7a01d03b;
--purple-a7: #6d00c350;
--purple-a8: #6600c06c;
--purple-a9: #5c00adb1;
--purple-a10: #53009eb8;
--purple-a11: #52009aba;
--purple-a12: #250049df;
--purple-surface: #faf5fecc;
--purple-indicator: var(--purple-9);
--purple-track: var(--purple-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .light, .light-theme {
--purple-1: color(display-p3 0.995 0.988 0.996);
--purple-2: color(display-p3 0.983 0.971 0.993);
--purple-3: color(display-p3 0.963 0.931 0.989);
--purple-4: color(display-p3 0.937 0.888 0.981);
--purple-5: color(display-p3 0.904 0.837 0.966);
--purple-6: color(display-p3 0.86 0.774 0.942);
--purple-7: color(display-p3 0.799 0.69 0.91);
--purple-8: color(display-p3 0.719 0.583 0.874);
--purple-9: color(display-p3 0.523 0.318 0.751);
--purple-10: color(display-p3 0.483 0.289 0.7);
--purple-11: color(display-p3 0.473 0.281 0.687);
--purple-12: color(display-p3 0.234 0.132 0.363);
--purple-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
--purple-a2: color(display-p3 0.443 0.024 0.722 / 0.028);
--purple-a3: color(display-p3 0.506 0.008 0.835 / 0.071);
--purple-a4: color(display-p3 0.451 0.004 0.831 / 0.114);
--purple-a5: color(display-p3 0.431 0.004 0.788 / 0.165);
--purple-a6: color(display-p3 0.384 0.004 0.745 / 0.228);
--purple-a7: color(display-p3 0.357 0.004 0.71 / 0.31);
--purple-a8: color(display-p3 0.322 0.004 0.702 / 0.416);
--purple-a9: color(display-p3 0.298 0 0.639 / 0.683);
--purple-a10: color(display-p3 0.271 0 0.58 / 0.71);
--purple-a11: color(display-p3 0.473 0.281 0.687);
--purple-a12: color(display-p3 0.234 0.132 0.363);
--purple-surface: color(display-p3 0.9804 0.9647 0.9922 / 0.8);
}
}
}
.dark, .dark-theme {
--purple-1: #18111b;
--purple-2: #1e1523;
--purple-3: #301c3b;
--purple-4: #3d224e;
--purple-5: #48295c;
--purple-6: #54346b;
--purple-7: #664282;
--purple-8: #8457aa;
--purple-9: #8e4ec6;
--purple-10: #9a5cd0;
--purple-11: #d19dff;
--purple-12: #ecd9fa;
--purple-a1: #b412f90b;
--purple-a2: #b744f714;
--purple-a3: #c150ff2d;
--purple-a4: #bb53fd42;
--purple-a5: #be5cfd51;
--purple-a6: #c16dfd61;
--purple-a7: #c378fd7a;
--purple-a8: #c47effa4;
--purple-a9: #b661ffc2;
--purple-a10: #bc6fffcd;
--purple-a11: #d19dff;
--purple-a12: #f1ddfffa;
--purple-surface: #2b173580;
--purple-indicator: var(--purple-9);
--purple-track: var(--purple-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.dark, .dark-theme {
--purple-1: color(display-p3 0.09 0.068 0.103);
--purple-2: color(display-p3 0.113 0.082 0.134);
--purple-3: color(display-p3 0.175 0.112 0.224);
--purple-4: color(display-p3 0.224 0.137 0.297);
--purple-5: color(display-p3 0.264 0.167 0.349);
--purple-6: color(display-p3 0.311 0.208 0.406);
--purple-7: color(display-p3 0.381 0.266 0.496);
--purple-8: color(display-p3 0.49 0.349 0.649);
--purple-9: color(display-p3 0.523 0.318 0.751);
--purple-10: color(display-p3 0.57 0.373 0.791);
--purple-11: color(display-p3 0.8 0.62 1);
--purple-12: color(display-p3 0.913 0.854 0.971);
--purple-a1: color(display-p3 0.686 0.071 0.996 / 0.038);
--purple-a2: color(display-p3 0.722 0.286 0.996 / 0.072);
--purple-a3: color(display-p3 0.718 0.349 0.996 / 0.169);
--purple-a4: color(display-p3 0.702 0.353 1 / 0.248);
--purple-a5: color(display-p3 0.718 0.404 1 / 0.303);
--purple-a6: color(display-p3 0.733 0.455 1 / 0.366);
--purple-a7: color(display-p3 0.753 0.506 1 / 0.458);
--purple-a8: color(display-p3 0.749 0.522 1 / 0.622);
--purple-a9: color(display-p3 0.686 0.408 1 / 0.736);
--purple-a10: color(display-p3 0.71 0.459 1 / 0.778);
--purple-a11: color(display-p3 0.8 0.62 1);
--purple-a12: color(display-p3 0.913 0.854 0.971);
--purple-surface: color(display-p3 0.149 0.0941 0.1961 / 0.5);
}
}
}
:root {
--purple-contrast: white;
}