UNPKG

@radix-ui/themes

Version:

[![Radix Themes Logo](https://radix-ui.com/social/themes.png)](https://radix-ui.com/themes)

124 lines (123 loc) 5.07 kB
: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; }