@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
124 lines (123 loc) • 4.98 kB
CSS
:root, .light, .light-theme {
--slate-1: #fcfcfd;
--slate-2: #f9f9fb;
--slate-3: #f0f0f3;
--slate-4: #e8e8ec;
--slate-5: #e0e1e6;
--slate-6: #d9d9e0;
--slate-7: #cdced6;
--slate-8: #b9bbc6;
--slate-9: #8b8d98;
--slate-10: #80838d;
--slate-11: #60646c;
--slate-12: #1c2024;
--slate-a1: #00005503;
--slate-a2: #00005506;
--slate-a3: #0000330f;
--slate-a4: #00002d17;
--slate-a5: #0009321f;
--slate-a6: #00002f26;
--slate-a7: #00062e32;
--slate-a8: #00083046;
--slate-a9: #00051d74;
--slate-a10: #00071b7f;
--slate-a11: #0007149f;
--slate-a12: #000509e3;
--slate-surface: #ffffffcc;
--slate-indicator: var(--slate-9);
--slate-track: var(--slate-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .light, .light-theme {
--slate-1: color(display-p3 0.988 0.988 0.992);
--slate-2: color(display-p3 0.976 0.976 0.984);
--slate-3: color(display-p3 0.94 0.941 0.953);
--slate-4: color(display-p3 0.908 0.909 0.925);
--slate-5: color(display-p3 0.88 0.881 0.901);
--slate-6: color(display-p3 0.85 0.852 0.876);
--slate-7: color(display-p3 0.805 0.808 0.838);
--slate-8: color(display-p3 0.727 0.733 0.773);
--slate-9: color(display-p3 0.547 0.553 0.592);
--slate-10: color(display-p3 0.503 0.512 0.549);
--slate-11: color(display-p3 0.379 0.392 0.421);
--slate-12: color(display-p3 0.113 0.125 0.14);
--slate-a1: color(display-p3 0.024 0.024 0.349 / 0.012);
--slate-a2: color(display-p3 0.024 0.024 0.349 / 0.024);
--slate-a3: color(display-p3 0.004 0.004 0.204 / 0.059);
--slate-a4: color(display-p3 0.012 0.012 0.184 / 0.091);
--slate-a5: color(display-p3 0.004 0.039 0.2 / 0.122);
--slate-a6: color(display-p3 0.008 0.008 0.165 / 0.15);
--slate-a7: color(display-p3 0.008 0.027 0.184 / 0.197);
--slate-a8: color(display-p3 0.004 0.031 0.176 / 0.275);
--slate-a9: color(display-p3 0.004 0.02 0.106 / 0.455);
--slate-a10: color(display-p3 0.004 0.027 0.098 / 0.499);
--slate-a11: color(display-p3 0 0.02 0.063 / 0.62);
--slate-a12: color(display-p3 0 0.012 0.031 / 0.887);
--slate-surface: color(display-p3 1 1 1 / 0.8);
}
}
}
.dark, .dark-theme {
--slate-1: #111113;
--slate-2: #18191b;
--slate-3: #212225;
--slate-4: #272a2d;
--slate-5: #2e3135;
--slate-6: #363a3f;
--slate-7: #43484e;
--slate-8: #5a6169;
--slate-9: #696e77;
--slate-10: #777b84;
--slate-11: #b0b4ba;
--slate-12: #edeef0;
--slate-a1: #00000000;
--slate-a2: #d8f4f609;
--slate-a3: #ddeaf814;
--slate-a4: #d3edf81d;
--slate-a5: #d9edfe25;
--slate-a6: #d6ebfd30;
--slate-a7: #d9edff40;
--slate-a8: #d9edff5d;
--slate-a9: #dfebfd6d;
--slate-a10: #e5edfd7b;
--slate-a11: #f1f7feb5;
--slate-a12: #fcfdffef;
--slate-surface: #1f212380;
--slate-indicator: var(--slate-9);
--slate-track: var(--slate-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.dark, .dark-theme {
--slate-1: color(display-p3 0.067 0.067 0.074);
--slate-2: color(display-p3 0.095 0.098 0.105);
--slate-3: color(display-p3 0.13 0.135 0.145);
--slate-4: color(display-p3 0.156 0.163 0.176);
--slate-5: color(display-p3 0.183 0.191 0.206);
--slate-6: color(display-p3 0.215 0.226 0.244);
--slate-7: color(display-p3 0.265 0.28 0.302);
--slate-8: color(display-p3 0.357 0.381 0.409);
--slate-9: color(display-p3 0.415 0.431 0.463);
--slate-10: color(display-p3 0.469 0.483 0.514);
--slate-11: color(display-p3 0.692 0.704 0.728);
--slate-12: color(display-p3 0.93 0.933 0.94);
--slate-a1: color(display-p3 0 0 0 / 0);
--slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
--slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
--slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
--slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
--slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
--slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
--slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
--slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
--slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
--slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
--slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
--slate-surface: color(display-p3 0.1176 0.1255 0.1333 / 0.5);
}
}
}
:root {
--slate-contrast: white;
}