@radix-ui/themes/tokens/colors/grass.css

[](https://radix-ui.com/themes)

:root, .light, .light-theme {
    --grass-1: #fbfefb;
    --grass-2: #f5fbf5;
    --grass-3: #e9f6e9;
    --grass-4: #daf1db;
    --grass-5: #c9e8ca;
    --grass-6: #b2ddb5;
    --grass-7: #94ce9a;
    --grass-8: #65ba74;
    --grass-9: #46a758;
    --grass-10: #3e9b4f;
    --grass-11: #2a7e3b;
    --grass-12: #203c25;
    --grass-a1: #00c00004;
    --grass-a2: #0099000a;
    --grass-a3: #00970016;
    --grass-a4: #009f0725;
    --grass-a5: #00930536;
    --grass-a6: #008f0a4d;
    --grass-a7: #018b0f6b;
    --grass-a8: #008d199a;
    --grass-a9: #008619b9;
    --grass-a10: #007b17c1;
    --grass-a11: #006514d5;
    --grass-a12: #002006df;
    --grass-surface: #f3faf3cc;
    --grass-indicator: var(--grass-9);
    --grass-track: var(--grass-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --grass-1: color(display-p3 0.986 0.996 0.985);
            --grass-2: color(display-p3 0.966 0.983 0.964);
            --grass-3: color(display-p3 0.923 0.965 0.917);
            --grass-4: color(display-p3 0.872 0.94 0.865);
            --grass-5: color(display-p3 0.811 0.908 0.802);
            --grass-6: color(display-p3 0.733 0.864 0.724);
            --grass-7: color(display-p3 0.628 0.803 0.622);
            --grass-8: color(display-p3 0.477 0.72 0.482);
            --grass-9: color(display-p3 0.38 0.647 0.378);
            --grass-10: color(display-p3 0.344 0.598 0.342);
            --grass-11: color(display-p3 0.263 0.488 0.261);
            --grass-12: color(display-p3 0.151 0.233 0.153);
            --grass-a1: color(display-p3 0.024 0.757 0.024 / 0.016);
            --grass-a2: color(display-p3 0.024 0.565 0.024 / 0.036);
            --grass-a3: color(display-p3 0.059 0.576 0.008 / 0.083);
            --grass-a4: color(display-p3 0.035 0.565 0.008 / 0.134);
            --grass-a5: color(display-p3 0.047 0.545 0.008 / 0.197);
            --grass-a6: color(display-p3 0.031 0.502 0.004 / 0.275);
            --grass-a7: color(display-p3 0.012 0.482 0.004 / 0.377);
            --grass-a8: color(display-p3 0 0.467 0.008 / 0.522);
            --grass-a9: color(display-p3 0.008 0.435 0 / 0.624);
            --grass-a10: color(display-p3 0.008 0.388 0 / 0.659);
            --grass-a11: color(display-p3 0.263 0.488 0.261);
            --grass-a12: color(display-p3 0.151 0.233 0.153);
            --grass-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --grass-1: #0e1511;
    --grass-2: #141a15;
    --grass-3: #1b2a1e;
    --grass-4: #1d3a24;
    --grass-5: #25482d;
    --grass-6: #2d5736;
    --grass-7: #366740;
    --grass-8: #3e7949;
    --grass-9: #46a758;
    --grass-10: #53b365;
    --grass-11: #71d083;
    --grass-12: #c2f0c2;
    --grass-a1: #00de1205;
    --grass-a2: #5ef7780a;
    --grass-a3: #70fe8c1b;
    --grass-a4: #57ff802c;
    --grass-a5: #68ff8b3b;
    --grass-a6: #71ff8f4b;
    --grass-a7: #77fd925d;
    --grass-a8: #77fd9070;
    --grass-a9: #65ff82a1;
    --grass-a10: #72ff8dae;
    --grass-a11: #89ff9fcd;
    --grass-a12: #ceffceef;
    --grass-surface: #19231b80;
    --grass-indicator: var(--grass-9);
    --grass-track: var(--grass-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --grass-1: color(display-p3 0.062 0.083 0.067);
            --grass-2: color(display-p3 0.083 0.103 0.085);
            --grass-3: color(display-p3 0.118 0.163 0.122);
            --grass-4: color(display-p3 0.142 0.225 0.15);
            --grass-5: color(display-p3 0.178 0.279 0.186);
            --grass-6: color(display-p3 0.217 0.337 0.224);
            --grass-7: color(display-p3 0.258 0.4 0.264);
            --grass-8: color(display-p3 0.302 0.47 0.305);
            --grass-9: color(display-p3 0.38 0.647 0.378);
            --grass-10: color(display-p3 0.426 0.694 0.426);
            --grass-11: color(display-p3 0.535 0.807 0.542);
            --grass-12: color(display-p3 0.797 0.936 0.776);
            --grass-a1: color(display-p3 0 0.992 0.071 / 0.017);
            --grass-a2: color(display-p3 0.482 0.996 0.584 / 0.038);
            --grass-a3: color(display-p3 0.549 0.992 0.588 / 0.106);
            --grass-a4: color(display-p3 0.51 0.996 0.557 / 0.169);
            --grass-a5: color(display-p3 0.553 1 0.588 / 0.227);
            --grass-a6: color(display-p3 0.584 1 0.608 / 0.29);
            --grass-a7: color(display-p3 0.604 1 0.616 / 0.358);
            --grass-a8: color(display-p3 0.608 1 0.62 / 0.433);
            --grass-a9: color(display-p3 0.573 1 0.569 / 0.622);
            --grass-a10: color(display-p3 0.6 0.996 0.6 / 0.673);
            --grass-a11: color(display-p3 0.535 0.807 0.542);
            --grass-a12: color(display-p3 0.797 0.936 0.776);
            --grass-surface: color(display-p3 0.102 0.1333 0.102 / 0.5);
        }
    }
}
:root {
    --grass-contrast: white;
}