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

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

:root, .light, .light-theme {
    --ruby-1: #fffcfd;
    --ruby-2: #fff7f8;
    --ruby-3: #feeaed;
    --ruby-4: #ffdce1;
    --ruby-5: #ffced6;
    --ruby-6: #f8bfc8;
    --ruby-7: #efacb8;
    --ruby-8: #e592a3;
    --ruby-9: #e54666;
    --ruby-10: #dc3b5d;
    --ruby-11: #ca244d;
    --ruby-12: #64172b;
    --ruby-a1: #ff005503;
    --ruby-a2: #ff002008;
    --ruby-a3: #f3002515;
    --ruby-a4: #ff002523;
    --ruby-a5: #ff002a31;
    --ruby-a6: #e4002440;
    --ruby-a7: #ce002553;
    --ruby-a8: #c300286d;
    --ruby-a9: #db002cb9;
    --ruby-a10: #d2002cc4;
    --ruby-a11: #c10030db;
    --ruby-a12: #550016e8;
    --ruby-surface: #fff5f6cc;
    --ruby-indicator: var(--ruby-9);
    --ruby-track: var(--ruby-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --ruby-1: color(display-p3 0.998 0.989 0.992);
            --ruby-2: color(display-p3 0.995 0.971 0.974);
            --ruby-3: color(display-p3 0.983 0.92 0.928);
            --ruby-4: color(display-p3 0.987 0.869 0.885);
            --ruby-5: color(display-p3 0.968 0.817 0.839);
            --ruby-6: color(display-p3 0.937 0.758 0.786);
            --ruby-7: color(display-p3 0.897 0.685 0.721);
            --ruby-8: color(display-p3 0.851 0.588 0.639);
            --ruby-9: color(display-p3 0.83 0.323 0.408);
            --ruby-10: color(display-p3 0.795 0.286 0.375);
            --ruby-11: color(display-p3 0.728 0.211 0.311);
            --ruby-12: color(display-p3 0.36 0.115 0.171);
            --ruby-a1: color(display-p3 0.675 0.024 0.349 / 0.012);
            --ruby-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
            --ruby-a3: color(display-p3 0.804 0.008 0.11 / 0.079);
            --ruby-a4: color(display-p3 0.91 0.008 0.125 / 0.13);
            --ruby-a5: color(display-p3 0.831 0.004 0.133 / 0.185);
            --ruby-a6: color(display-p3 0.745 0.004 0.118 / 0.244);
            --ruby-a7: color(display-p3 0.678 0.004 0.114 / 0.314);
            --ruby-a8: color(display-p3 0.639 0.004 0.125 / 0.412);
            --ruby-a9: color(display-p3 0.753 0 0.129 / 0.679);
            --ruby-a10: color(display-p3 0.714 0 0.125 / 0.714);
            --ruby-a11: color(display-p3 0.728 0.211 0.311);
            --ruby-a12: color(display-p3 0.36 0.115 0.171);
            --ruby-surface: color(display-p3 0.9961 0.9647 0.9647 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --ruby-1: #191113;
    --ruby-2: #1e1517;
    --ruby-3: #3a141e;
    --ruby-4: #4e1325;
    --ruby-5: #5e1a2e;
    --ruby-6: #6f2539;
    --ruby-7: #883447;
    --ruby-8: #b3445a;
    --ruby-9: #e54666;
    --ruby-10: #ec5a72;
    --ruby-11: #ff949d;
    --ruby-12: #fed2e1;
    --ruby-a1: #f4124a09;
    --ruby-a2: #fe5a7f0e;
    --ruby-a3: #ff235d2c;
    --ruby-a4: #fd195e42;
    --ruby-a5: #fe2d6b53;
    --ruby-a6: #ff447665;
    --ruby-a7: #ff577d80;
    --ruby-a8: #ff5c7cae;
    --ruby-a9: #fe4c70e4;
    --ruby-a10: #ff617beb;
    --ruby-a11: #ff949d;
    --ruby-a12: #ffd3e2fe;
    --ruby-surface: #2b191d80;
    --ruby-indicator: var(--ruby-9);
    --ruby-track: var(--ruby-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --ruby-1: color(display-p3 0.093 0.068 0.074);
            --ruby-2: color(display-p3 0.113 0.083 0.089);
            --ruby-3: color(display-p3 0.208 0.088 0.117);
            --ruby-4: color(display-p3 0.279 0.092 0.147);
            --ruby-5: color(display-p3 0.337 0.12 0.18);
            --ruby-6: color(display-p3 0.401 0.166 0.223);
            --ruby-7: color(display-p3 0.495 0.224 0.281);
            --ruby-8: color(display-p3 0.652 0.295 0.359);
            --ruby-9: color(display-p3 0.83 0.323 0.408);
            --ruby-10: color(display-p3 0.857 0.392 0.455);
            --ruby-11: color(display-p3 1 0.57 0.59);
            --ruby-12: color(display-p3 0.968 0.83 0.88);
            --ruby-a1: color(display-p3 0.984 0.071 0.329 / 0.03);
            --ruby-a2: color(display-p3 0.992 0.376 0.529 / 0.051);
            --ruby-a3: color(display-p3 0.996 0.196 0.404 / 0.152);
            --ruby-a4: color(display-p3 1 0.173 0.416 / 0.227);
            --ruby-a5: color(display-p3 1 0.259 0.459 / 0.29);
            --ruby-a6: color(display-p3 1 0.341 0.506 / 0.358);
            --ruby-a7: color(display-p3 1 0.412 0.541 / 0.458);
            --ruby-a8: color(display-p3 1 0.431 0.537 / 0.627);
            --ruby-a9: color(display-p3 1 0.376 0.482 / 0.82);
            --ruby-a10: color(display-p3 1 0.447 0.522 / 0.849);
            --ruby-a11: color(display-p3 1 0.57 0.59);
            --ruby-a12: color(display-p3 0.968 0.83 0.88);
            --ruby-surface: color(display-p3 0.1569 0.0941 0.1098 / 0.5);
        }
    }
}
:root {
    --ruby-contrast: white;
}