Цвета
Токены палитры Gravity в обеих темах: поверхности, текст, линии, бренд.
Варианты и состояния
Половина ступеней кита полупрозрачна, и это не оплошность: они рассчитаны лежать поверх поверхности, а не заменять её. Шестнадцатеричное значение поэтому восьмизначное — шесть цифр означали бы непрозрачный цвет, которого на экране нет.
Поверхности
--g-color-base-backgroundсветлая rgb(255, 255, 255) · #FFFFFFтёмная rgb(34, 29, 34) · #221D22--g-color-base-genericсветлая rgba(0, 0, 0, 0.05) · #0000000Dтёмная rgba(255, 255, 255, 0.1) · #FFFFFF1A--g-color-base-generic-hoverсветлая rgba(0, 0, 0, 0.15) · #00000026тёмная rgba(255, 255, 255, 0.15) · #FFFFFF26--g-color-base-simple-hoverсветлая rgba(0, 0, 0, 0.05) · #0000000Dтёмная rgba(255, 255, 255, 0.1) · #FFFFFF1A--g-color-base-floatсветлая rgb(255, 255, 255) · #FFFFFFтёмная rgb(56, 52, 56) · #383438--g-color-base-modalсветлая rgb(255, 255, 255) · #FFFFFFтёмная rgb(34, 29, 34) · #221D22
Текст
--g-color-text-primaryсветлая rgba(0, 0, 0, 0.85) · #000000D9тёмная rgba(255, 255, 255, 0.85) · #FFFFFFD9--g-color-text-complementaryсветлая rgba(0, 0, 0, 0.7) · #000000B3тёмная rgba(255, 255, 255, 0.7) · #FFFFFFB3--g-color-text-secondaryсветлая rgba(0, 0, 0, 0.5) · #00000080тёмная rgba(255, 255, 255, 0.5) · #FFFFFF80--g-color-text-hintсветлая rgba(0, 0, 0, 0.3) · #0000004Dтёмная rgba(255, 255, 255, 0.3) · #FFFFFF4D--g-color-text-brand-contrastсветлая rgb(255, 255, 255) · #FFFFFFтёмная rgb(255, 255, 255) · #FFFFFF
Линии
--g-color-line-genericсветлая rgba(0, 0, 0, 0.1) · #0000001Aтёмная rgba(255, 255, 255, 0.15) · #FFFFFF26--g-color-line-generic-hoverсветлая rgba(0, 0, 0, 0.15) · #00000026тёмная rgba(255, 255, 255, 0.25) · #FFFFFF40--g-color-line-generic-activeсветлая rgba(0, 0, 0, 0.3) · #0000004Dтёмная rgba(255, 255, 255, 0.3) · #FFFFFF4D--g-color-line-focusсветлая rgb(132, 77, 187) · #844DBBтёмная rgb(165, 117, 214) · #A575D6--g-color-line-brandсветлая rgb(132, 77, 187) · #844DBBтёмная rgb(154, 99, 209) · #9A63D1
Бренд
--g-color-base-brandсветлая rgb(143, 82, 204) · #8F52CCтёмная rgb(143, 82, 204) · #8F52CC--g-color-base-brand-hoverсветлая rgb(132, 77, 187) · #844DBBтёмная rgb(132, 77, 187) · #844DBB--g-color-base-selectionсветлая rgba(143, 82, 204, 0.3) · #8F52CC4Dтёмная rgba(143, 82, 204, 0.2) · #8F52CC33--g-color-text-brandсветлая rgb(110, 66, 153) · #6E4299тёмная rgb(165, 117, 214) · #A575D6--g-color-text-linkсветлая rgb(121, 71, 170) · #7947AAтёмная rgb(165, 117, 214) · #A575D6--g-color-text-link-visitedсветлая rgb(92, 111, 129) · #5C6F81тёмная rgb(112, 141, 166) · #708DA6
Смысловые заливки
Вердикт по баллу, информация и служебное — на лестницах кита, а не на своих. Отсюда же берутся цвета серий на графиках: собственной палитры графиков у Gravity нет, а числа рядом посчитаны по его CSS, как и всё на этой странице.
--g-color-base-info-heavyсветлая rgb(52, 139, 220) · #348BDCтёмная rgb(74, 161, 242) · #4AA1F2--g-color-base-positive-heavyсветлая rgb(48, 170, 110) · #30AA6Eтёмная rgb(95, 184, 165) · #5FB8A5--g-color-base-warning-heavyсветлая rgb(255, 190, 92) · #FFBE5Cтёмная rgb(255, 197, 108) · #FFC56C--g-color-base-danger-heavyсветлая rgb(233, 3, 58) · #E9033Aтёмная rgb(232, 71, 109) · #E8476D--g-color-base-utility-heavyсветлая rgb(132, 77, 187) · #844DBBтёмная rgb(154, 99, 209) · #9A63D1--g-color-base-misc-heavyсветлая rgb(100, 122, 141) · #647A8Dтёмная rgb(112, 141, 166) · #708DA6
Токены
--g-color-base-background--g-color-text-primary--g-color-line-generic--g-color-base-brand--g-color-text-link
лестницы кита у нас не переопределены — кроме брендового набора, который внесён целиком и в обе темы
Пример
<div style={{ background: "var(--g-color-base-brand)" }} />