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

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

:root, .light, .light-theme {
    --mint-1: #f9fefd;
    --mint-2: #f2fbf9;
    --mint-3: #ddf9f2;
    --mint-4: #c8f4e9;
    --mint-5: #b3ecde;
    --mint-6: #9ce0d0;
    --mint-7: #7ecfbd;
    --mint-8: #4cbba5;
    --mint-9: #86ead4;
    --mint-10: #7de0cb;
    --mint-11: #027864;
    --mint-12: #16433c;
    --mint-a1: #00d5aa06;
    --mint-a2: #00b18a0d;
    --mint-a3: #00d29e22;
    --mint-a4: #00cc9937;
    --mint-a5: #00c0914c;
    --mint-a6: #00b08663;
    --mint-a7: #00a17d81;
    --mint-a8: #009e7fb3;
    --mint-a9: #00d3a579;
    --mint-a10: #00c39982;
    --mint-a11: #007763fd;
    --mint-a12: #00312ae9;
    --mint-surface: #effaf8cc;
    --mint-indicator: var(--mint-9);
    --mint-track: var(--mint-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --mint-1: color(display-p3 0.98 0.995 0.992);
            --mint-2: color(display-p3 0.957 0.985 0.977);
            --mint-3: color(display-p3 0.888 0.972 0.95);
            --mint-4: color(display-p3 0.819 0.951 0.916);
            --mint-5: color(display-p3 0.747 0.918 0.873);
            --mint-6: color(display-p3 0.668 0.87 0.818);
            --mint-7: color(display-p3 0.567 0.805 0.744);
            --mint-8: color(display-p3 0.42 0.724 0.649);
            --mint-9: color(display-p3 0.62 0.908 0.834);
            --mint-10: color(display-p3 0.585 0.871 0.797);
            --mint-11: color(display-p3 0.203 0.463 0.397);
            --mint-12: color(display-p3 0.136 0.259 0.236);
            --mint-a1: color(display-p3 0.02 0.804 0.608 / 0.02);
            --mint-a2: color(display-p3 0.02 0.647 0.467 / 0.044);
            --mint-a3: color(display-p3 0.004 0.761 0.553 / 0.114);
            --mint-a4: color(display-p3 0.004 0.741 0.545 / 0.181);
            --mint-a5: color(display-p3 0.004 0.678 0.51 / 0.255);
            --mint-a6: color(display-p3 0.004 0.616 0.463 / 0.334);
            --mint-a7: color(display-p3 0.004 0.549 0.412 / 0.432);
            --mint-a8: color(display-p3 0 0.529 0.392 / 0.581);
            --mint-a9: color(display-p3 0.004 0.765 0.569 / 0.381);
            --mint-a10: color(display-p3 0.004 0.69 0.51 / 0.416);
            --mint-a11: color(display-p3 0.203 0.463 0.397);
            --mint-a12: color(display-p3 0.136 0.259 0.236);
            --mint-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --mint-1: #0e1515;
    --mint-2: #0f1b1b;
    --mint-3: #092c2b;
    --mint-4: #003a38;
    --mint-5: #004744;
    --mint-6: #105650;
    --mint-7: #1e685f;
    --mint-8: #277f70;
    --mint-9: #86ead4;
    --mint-10: #a8f5e5;
    --mint-11: #58d5ba;
    --mint-12: #c4f5e1;
    --mint-a1: #00dede05;
    --mint-a2: #00f9f90b;
    --mint-a3: #00fff61d;
    --mint-a4: #00fff42c;
    --mint-a5: #00fff23a;
    --mint-a6: #0effeb4a;
    --mint-a7: #34fde55e;
    --mint-a8: #41ffdf76;
    --mint-a9: #92ffe7e9;
    --mint-a10: #aefeedf5;
    --mint-a11: #67ffded2;
    --mint-a12: #cbfee9f5;
    --mint-surface: #15272780;
    --mint-indicator: var(--mint-9);
    --mint-track: var(--mint-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --mint-1: color(display-p3 0.059 0.082 0.081);
            --mint-2: color(display-p3 0.068 0.104 0.105);
            --mint-3: color(display-p3 0.077 0.17 0.168);
            --mint-4: color(display-p3 0.068 0.224 0.22);
            --mint-5: color(display-p3 0.104 0.275 0.264);
            --mint-6: color(display-p3 0.154 0.332 0.313);
            --mint-7: color(display-p3 0.207 0.403 0.373);
            --mint-8: color(display-p3 0.258 0.49 0.441);
            --mint-9: color(display-p3 0.62 0.908 0.834);
            --mint-10: color(display-p3 0.725 0.954 0.898);
            --mint-11: color(display-p3 0.482 0.825 0.733);
            --mint-12: color(display-p3 0.807 0.955 0.887);
            --mint-a1: color(display-p3 0 0.992 0.992 / 0.017);
            --mint-a2: color(display-p3 0.071 0.98 0.98 / 0.043);
            --mint-a3: color(display-p3 0.176 0.996 0.996 / 0.11);
            --mint-a4: color(display-p3 0.071 0.996 0.973 / 0.169);
            --mint-a5: color(display-p3 0.243 1 0.949 / 0.223);
            --mint-a6: color(display-p3 0.369 1 0.933 / 0.286);
            --mint-a7: color(display-p3 0.459 1 0.914 / 0.362);
            --mint-a8: color(display-p3 0.49 1 0.89 / 0.454);
            --mint-a9: color(display-p3 0.678 0.996 0.914 / 0.904);
            --mint-a10: color(display-p3 0.761 1 0.941 / 0.95);
            --mint-a11: color(display-p3 0.482 0.825 0.733);
            --mint-a12: color(display-p3 0.807 0.955 0.887);
            --mint-surface: color(display-p3 0.0941 0.149 0.1412 / 0.5);
        }
    }
}
:root {
    --mint-contrast: #1a211e;
}
@supports (color: color-mix(in oklab, white, black)) {
    .dark,
.dark-theme {
        --mint-track: color-mix(in oklab, var(--mint-8), var(--mint-9) 65%);
    }
}