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

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

:root, .light, .light-theme {
    --tomato-1: #fffcfc;
    --tomato-2: #fff8f7;
    --tomato-3: #feebe7;
    --tomato-4: #ffdcd3;
    --tomato-5: #ffcdc2;
    --tomato-6: #fdbdaf;
    --tomato-7: #f5a898;
    --tomato-8: #ec8e7b;
    --tomato-9: #e54d2e;
    --tomato-10: #dd4425;
    --tomato-11: #d13415;
    --tomato-12: #5c271f;
    --tomato-a1: #ff000003;
    --tomato-a2: #ff200008;
    --tomato-a3: #f52b0018;
    --tomato-a4: #ff35002c;
    --tomato-a5: #ff2e003d;
    --tomato-a6: #f92d0050;
    --tomato-a7: #e7280067;
    --tomato-a8: #db250084;
    --tomato-a9: #df2600d1;
    --tomato-a10: #d72400da;
    --tomato-a11: #cd2200ea;
    --tomato-a12: #460900e0;
    --tomato-surface: #fff6f5cc;
    --tomato-indicator: var(--tomato-9);
    --tomato-track: var(--tomato-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --tomato-1: color(display-p3 0.998 0.989 0.988);
            --tomato-2: color(display-p3 0.994 0.974 0.969);
            --tomato-3: color(display-p3 0.985 0.924 0.909);
            --tomato-4: color(display-p3 0.996 0.868 0.835);
            --tomato-5: color(display-p3 0.98 0.812 0.77);
            --tomato-6: color(display-p3 0.953 0.75 0.698);
            --tomato-7: color(display-p3 0.917 0.673 0.611);
            --tomato-8: color(display-p3 0.875 0.575 0.502);
            --tomato-9: color(display-p3 0.831 0.345 0.231);
            --tomato-10: color(display-p3 0.802 0.313 0.2);
            --tomato-11: color(display-p3 0.755 0.259 0.152);
            --tomato-12: color(display-p3 0.335 0.165 0.132);
            --tomato-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
            --tomato-a2: color(display-p3 0.757 0.145 0.02 / 0.032);
            --tomato-a3: color(display-p3 0.831 0.184 0.012 / 0.091);
            --tomato-a4: color(display-p3 0.976 0.192 0.004 / 0.165);
            --tomato-a5: color(display-p3 0.918 0.192 0.004 / 0.232);
            --tomato-a6: color(display-p3 0.847 0.173 0.004 / 0.302);
            --tomato-a7: color(display-p3 0.788 0.165 0.004 / 0.389);
            --tomato-a8: color(display-p3 0.749 0.153 0.004 / 0.499);
            --tomato-a9: color(display-p3 0.78 0.149 0 / 0.769);
            --tomato-a10: color(display-p3 0.757 0.141 0 / 0.8);
            --tomato-a11: color(display-p3 0.755 0.259 0.152);
            --tomato-a12: color(display-p3 0.335 0.165 0.132);
            --tomato-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --tomato-1: #181111;
    --tomato-2: #1f1513;
    --tomato-3: #391714;
    --tomato-4: #4e1511;
    --tomato-5: #5e1c16;
    --tomato-6: #6e2920;
    --tomato-7: #853a2d;
    --tomato-8: #ac4d39;
    --tomato-9: #e54d2e;
    --tomato-10: #ec6142;
    --tomato-11: #ff977d;
    --tomato-12: #fbd3cb;
    --tomato-a1: #f1121208;
    --tomato-a2: #ff55330f;
    --tomato-a3: #ff35232b;
    --tomato-a4: #fd201142;
    --tomato-a5: #fe332153;
    --tomato-a6: #ff4f3864;
    --tomato-a7: #fd644a7d;
    --tomato-a8: #fe6d4ea7;
    --tomato-a9: #fe5431e4;
    --tomato-a10: #ff6847eb;
    --tomato-a11: #ff977d;
    --tomato-a12: #ffd6cefb;
    --tomato-surface: #2d191580;
    --tomato-indicator: var(--tomato-9);
    --tomato-track: var(--tomato-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --tomato-1: color(display-p3 0.09 0.068 0.067);
            --tomato-2: color(display-p3 0.115 0.084 0.076);
            --tomato-3: color(display-p3 0.205 0.097 0.083);
            --tomato-4: color(display-p3 0.282 0.099 0.077);
            --tomato-5: color(display-p3 0.339 0.129 0.101);
            --tomato-6: color(display-p3 0.398 0.179 0.141);
            --tomato-7: color(display-p3 0.487 0.245 0.194);
            --tomato-8: color(display-p3 0.629 0.322 0.248);
            --tomato-9: color(display-p3 0.831 0.345 0.231);
            --tomato-10: color(display-p3 0.862 0.415 0.298);
            --tomato-11: color(display-p3 1 0.585 0.455);
            --tomato-12: color(display-p3 0.959 0.833 0.802);
            --tomato-a1: color(display-p3 0.973 0.071 0.071 / 0.026);
            --tomato-a2: color(display-p3 0.992 0.376 0.224 / 0.051);
            --tomato-a3: color(display-p3 0.996 0.282 0.176 / 0.148);
            --tomato-a4: color(display-p3 1 0.204 0.118 / 0.232);
            --tomato-a5: color(display-p3 1 0.286 0.192 / 0.29);
            --tomato-a6: color(display-p3 1 0.392 0.278 / 0.353);
            --tomato-a7: color(display-p3 1 0.459 0.349 / 0.45);
            --tomato-a8: color(display-p3 1 0.49 0.369 / 0.601);
            --tomato-a9: color(display-p3 1 0.408 0.267 / 0.82);
            --tomato-a10: color(display-p3 1 0.478 0.341 / 0.853);
            --tomato-a11: color(display-p3 1 0.585 0.455);
            --tomato-a12: color(display-p3 0.959 0.833 0.802);
            --tomato-surface: color(display-p3 0.1569 0.0941 0.0784 / 0.5);
        }
    }
}
:root {
    --tomato-contrast: white;
}