@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
124 lines (123 loc) • 4.86 kB
CSS
:root, .light, .light-theme {
--sand-1: #fdfdfc;
--sand-2: #f9f9f8;
--sand-3: #f1f0ef;
--sand-4: #e9e8e6;
--sand-5: #e2e1de;
--sand-6: #dad9d6;
--sand-7: #cfceca;
--sand-8: #bcbbb5;
--sand-9: #8d8d86;
--sand-10: #82827c;
--sand-11: #63635e;
--sand-12: #21201c;
--sand-a1: #55550003;
--sand-a2: #25250007;
--sand-a3: #20100010;
--sand-a4: #1f150019;
--sand-a5: #1f180021;
--sand-a6: #19130029;
--sand-a7: #19140035;
--sand-a8: #1915014a;
--sand-a9: #0f0f0079;
--sand-a10: #0c0c0083;
--sand-a11: #080800a1;
--sand-a12: #060500e3;
--sand-surface: #ffffffcc;
--sand-indicator: var(--sand-9);
--sand-track: var(--sand-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .light, .light-theme {
--sand-1: color(display-p3 0.992 0.992 0.989);
--sand-2: color(display-p3 0.977 0.977 0.973);
--sand-3: color(display-p3 0.943 0.942 0.936);
--sand-4: color(display-p3 0.913 0.912 0.903);
--sand-5: color(display-p3 0.885 0.883 0.873);
--sand-6: color(display-p3 0.854 0.852 0.839);
--sand-7: color(display-p3 0.813 0.81 0.794);
--sand-8: color(display-p3 0.738 0.734 0.713);
--sand-9: color(display-p3 0.553 0.553 0.528);
--sand-10: color(display-p3 0.511 0.511 0.488);
--sand-11: color(display-p3 0.388 0.388 0.37);
--sand-12: color(display-p3 0.129 0.126 0.111);
--sand-a1: color(display-p3 0.349 0.349 0.024 / 0.012);
--sand-a2: color(display-p3 0.161 0.161 0.024 / 0.028);
--sand-a3: color(display-p3 0.067 0.067 0.008 / 0.063);
--sand-a4: color(display-p3 0.129 0.129 0.012 / 0.099);
--sand-a5: color(display-p3 0.098 0.067 0.008 / 0.126);
--sand-a6: color(display-p3 0.102 0.075 0.004 / 0.161);
--sand-a7: color(display-p3 0.098 0.098 0.004 / 0.208);
--sand-a8: color(display-p3 0.086 0.075 0.004 / 0.287);
--sand-a9: color(display-p3 0.051 0.051 0.004 / 0.471);
--sand-a10: color(display-p3 0.047 0.047 0 / 0.514);
--sand-a11: color(display-p3 0.031 0.031 0 / 0.632);
--sand-a12: color(display-p3 0.024 0.02 0 / 0.891);
--sand-surface: color(display-p3 1 1 1 / 0.8);
}
}
}
.dark, .dark-theme {
--sand-1: #111110;
--sand-2: #191918;
--sand-3: #222221;
--sand-4: #2a2a28;
--sand-5: #31312e;
--sand-6: #3b3a37;
--sand-7: #494844;
--sand-8: #62605b;
--sand-9: #6f6d66;
--sand-10: #7c7b74;
--sand-11: #b5b3ad;
--sand-12: #eeeeec;
--sand-a1: #00000000;
--sand-a2: #f4f4f309;
--sand-a3: #f6f6f513;
--sand-a4: #fefef31b;
--sand-a5: #fbfbeb23;
--sand-a6: #fffaed2d;
--sand-a7: #fffbed3c;
--sand-a8: #fff9eb57;
--sand-a9: #fffae965;
--sand-a10: #fffdee73;
--sand-a11: #fffcf4b0;
--sand-a12: #fffffded;
--sand-surface: #21212080;
--sand-indicator: var(--sand-9);
--sand-track: var(--sand-9);
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.dark, .dark-theme {
--sand-1: color(display-p3 0.067 0.067 0.063);
--sand-2: color(display-p3 0.098 0.098 0.094);
--sand-3: color(display-p3 0.135 0.135 0.129);
--sand-4: color(display-p3 0.164 0.163 0.156);
--sand-5: color(display-p3 0.193 0.192 0.183);
--sand-6: color(display-p3 0.23 0.229 0.217);
--sand-7: color(display-p3 0.285 0.282 0.267);
--sand-8: color(display-p3 0.384 0.378 0.357);
--sand-9: color(display-p3 0.434 0.428 0.403);
--sand-10: color(display-p3 0.487 0.481 0.456);
--sand-11: color(display-p3 0.707 0.703 0.68);
--sand-12: color(display-p3 0.933 0.933 0.926);
--sand-a1: color(display-p3 0 0 0 / 0);
--sand-a2: color(display-p3 0.992 0.992 0.988 / 0.034);
--sand-a3: color(display-p3 0.996 0.996 0.992 / 0.072);
--sand-a4: color(display-p3 0.992 0.992 0.953 / 0.106);
--sand-a5: color(display-p3 1 1 0.965 / 0.135);
--sand-a6: color(display-p3 1 0.976 0.929 / 0.177);
--sand-a7: color(display-p3 1 0.984 0.929 / 0.236);
--sand-a8: color(display-p3 1 0.976 0.925 / 0.341);
--sand-a9: color(display-p3 1 0.98 0.925 / 0.395);
--sand-a10: color(display-p3 1 0.992 0.933 / 0.45);
--sand-a11: color(display-p3 1 0.996 0.961 / 0.685);
--sand-a12: color(display-p3 1 1 0.992 / 0.929);
--sand-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
}
}
}
:root {
--sand-contrast: white;
}