@yandex/ui/Theme/presets/default/color.css

Yandex UI components

.Theme_color_yandex-default {
    --color-base: #000; /* базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */
    --color-essential: #fff; /* базовый цвет поверхностей */
    --color-project: #fc0; /* проектный цвет, от которого выстраивают акцентные состояния */
    --color-phantom: #000; /* тонирующий цвет, от которого выстраиваются бордеры, паранджа, ... */
    --color-path: #04b; /* ссылочный цвет, от которого выстраиваются все их вариации */
    --color-success: #00985f; /* цвет успеха, от которого выстраивается как статусный фон так и типографика */
    --color-alert: #f33; /* цвет ошибки, от которого выстраивается как статусный фон так и типографика */
    --color-warning: #f90; /* цвет предупреждения, от которого выстраивается как статусный фон так и типографика */
    --color-normal: #dde3e5; /* нейтральный цвет, от которого выстраивается как статусный фон так и типографика */
    --color-system: #778a9b; /* системный цвет, от которого выстраивается как статусный фон так и типографика */
    --color-promo: #0057d3;
    --color-hover: #c00;
    --color-transparent: transparent;
    --color-bg-brand: var(--color-project);
    --color-bg-inverse: var(--color-base);
    --color-bg-action: rgb(255, 219, 77);
    --color-bg-selection: rgb(255, 234, 158);
    --color-bg-hover: rgba(0, 0, 0, 0.15);
    --color-bg-border: rgba(0, 0, 0, 0.05);
    --color-bg-stripe: rgba(0, 0, 0, 0.04);
    --color-bg-ghost: rgba(0, 0, 0, 0.08);
    --color-bg-default: var(--color-essential);
    --color-bg-tone: rgba(0, 0, 0, 0.9);
    --color-bg-soft: rgba(255, 255, 255, 0.97);
    --color-bg-success: var(--color-success);
    --color-bg-alert: var(--color-alert);
    --color-bg-warning: var(--color-warning);
    --color-bg-normal: var(--color-normal);
    --color-bg-system: var(--color-system);
    --color-bg-link: rgba(21, 126, 239, 0.4);
    --color-bg-promo: var(--color-promo);
    --color-typo-brand: var(--color-project);
    --color-typo-primary: var(--color-base); /* цвет основного текста дефолтных контролов */
    --color-typo-inverse: var(--color-essential);
    --color-typo-promo: rgba(0, 0, 0, 0.8);
    --color-typo-secondary: rgba(0, 0, 0, 0.6); /* цвет второстепенного текста контрола */
    --color-typo-ghost: rgba(0, 0, 0, 0.3); /* цвет дополнительного текста контрола */
    --color-typo-disable: rgba(0, 0, 0, 0.3); /* цвет основного текста неактивного контрола */
    --color-typo-success: var(--color-success);
    --color-typo-warning: var(--color-warning);
    --color-typo-alert: rgb(224, 0, 0);
    --color-link: var(--color-path); /* цвет фона ссылки */
    --color-link-external: var(--color-path);
    --color-link-minor: rgb(102, 102, 153);
    --color-link-hover: var(--color-hover); /* цвет фона ссылки по ховеру */
    --color-control-bg-border-focus: rgb(179, 179, 179); /* цвет фона бордеров контрола при фокусе */
    --color-control-bg-border-prism: var(--color-project); /* цвет фона бордера офсетных выделений контрола */
    --color-control-typo-primary: var(--color-base);
    --color-control-typo-secondary: rgba(0, 0, 0, 0.6);
    --color-control-typo-ghost: rgba(0, 0, 0, 0.3);
    --color-control-typo-passive: var(--color-base);
    --color-control-typo-faint: rgb(255, 255, 255);
    --color-control-typo-disable: rgb(128, 128, 128);
    --color-control-typo-link: var(--color-path);
    --color-control-typo-error: rgb(224, 0, 0);
    --color-control-bg-default: rgb(230, 230, 230); /* цвет фона контрола */
    --color-control-bg-default-hover: rgb(219, 219, 219); /* цвет фона контрола по ховеру */
    --color-control-bg-default-press: rgb(219, 219, 219); /* цвет фона контрола по нажатию */
    --color-control-bg-default-disable: rgb(242, 242, 242); /* цвет фона неактивного контрола */
    --color-control-bg-border-default: rgb(179, 179, 179); /* цвет фона бордеров контрола */
    --color-control-bg-border-default-hover: rgb(219, 219, 219); /* цвет фона бордеров контрола по ховеру */
    --color-control-bg-border-default-press: rgb(179, 179, 179); /* цвет фона бордеров контрола по нажатию */
    --color-control-bg-border-default-disable: rgb(232, 232, 232); /* цвет фона бордеров неактивного контрола */
    --color-control-bg-border-default-error: var(--color-alert);
    --color-control-bg-border-default-error-hover: rgb(224, 0, 15);
    --color-control-bg-pseudo: rgb(255, 255, 255); /* цвет фона псевдо контрола */
    --color-control-bg-pseudo-hover: rgb(247, 247, 247); /* цвет фона псевдо контрола по ховеру */
    --color-control-bg-border-pseudo: rgb(204, 204, 204); /* цвет бордеров псевдо контрола */
    --color-control-bg-action: var(--color-project); /* цвет фона активного контрола */
    --color-control-bg-action-hover: rgb(250, 192, 0); /* цвет фона активного контрола по ховеру */
    --color-control-bg-action-press: rgb(250, 192, 0); /* цвет фон активного контролы по нажатию */
    --color-control-bg-passive: var(--color-essential); /* цвет фона пассивной части контрола */
    --color-control-bg-progress: var(--color-project); /* цвет фон активного контрола в прогрессе */
    --color-control-bg-progress-process: rgb(255, 213, 0); /* цвет фон активного контрола в прогрессе выполнения */
    --color-control-bg-blank: var(--color-essential); /* цвет фона пустого контрола */
    --color-control-bg-blank-hover: var(--color-essential); /* цвет фона пустого контрола по ховеру */
    --color-control-bg-blank-disable: rgb(242, 242, 242); /* цвет фона пустого неактивного контрола */
    --color-control-bg-border-blank: rgb(217, 217, 217); /* цвет фона бордеров пустого контрола */
    --color-control-bg-border-blank-hover: rgb(204, 204, 204); /* цвет фона бордеров пустого контрола по ховеру */
    --color-control-bg-border-blank-disable: rgb(242, 242, 242); /* цвет фона бордеров пустого неактивного контрола */
    --color-control-bg-faint: var(--color-essential); /* цвет фона ослабленной части контрола */
    --color-control-bg-faint-disable: rgb(199, 199, 199); /* цвет фона ослабленной части неактивного контрола */
    --color-control-bg-check: rgb(84, 84, 84); /* цвет фона чекнутого контрола */
    --color-control-bg-check-hover: rgb(84, 84, 84); /* цвет фона чекнутого контрола по ховеру */
    --color-control-bg-check-press: rgb(82, 82, 82); /* цвет фона чекнутого контрола по нажатию */
    --color-control-bg-check-disable: rgb(242, 242, 242); /* цвет фона чекнутого неактивного контрола */
    --color-control-bg-border-check: rgb(168, 135, 0); /* цвет фона бордеров чекнутого контрола */
    --color-control-bg-border-check-hover: rgb(168, 135, 0); /* цвет фона бордеров чекнутого контрола по ховеру */
    --color-control-bg-border-check-press: rgb(168, 135, 0); /* цвет фона бордеров чекнутого контрола при фокусе по нажатию */
    --color-control-bg-link-default: var(--color-path);
    --color-control-bg-link-default-hover: rgba(0, 68, 187, 0.3);
    --color-control-bg-border-link-default: rgba(0, 68, 187, 0.6);
    --color-control-bg-border-link-default-hover: rgba(0, 68, 187, 0.6);
    --color-control-typo-raised: #000;
    --color-control-typo-raised-disable: #7f7f7f;
    --color-control-bg-raised: #fff;
    --color-control-bg-raised-hover: #f5f5f5;
    --color-control-bg-raised-disable: #f5f5f5;
    --color-control-bg-raised-check: #fff;
    --attach-typo-color: var(--color-control-typo-primary);
    --badge-border-color: var(--color-bg-default);
    --badge-fill-color: var(--color-bg-alert);
    --badge-typo-color: var(--color-typo-inverse);
    --button-view-action-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-action-fill-color-base: var(--color-control-bg-action);
    --button-view-action-fill-color-disabled: var(--color-control-bg-default-disable);
    --button-view-action-fill-color-hovered: var(--color-control-bg-action-hover);
    --button-view-action-fill-color-progress-base: var(--color-control-bg-progress);
    --button-view-action-fill-color-progress-process: var(--color-control-bg-progress-process);
    --button-view-action-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-action-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-action-typo-color-base: var(--color-control-typo-passive);
    --button-view-action-typo-color-disabled: var(--color-control-typo-disable);
    --button-view-action-typo-color-hovered: var(--color-control-typo-passive);
    --button-view-action-typo-color-progress-base: var(--color-control-typo-passive);
    --button-view-action-typo-color-checked-base: var(--color-control-typo-faint);
    --button-view-action-typo-color-checked-hovered: var(--color-control-typo-faint);
    --button-view-clear-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-clear-fill-color-disabled: var(--color-control-bg-default-disable);
    --button-view-clear-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-clear-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-clear-typo-color-base: var(--color-control-typo-primary);
    --button-view-clear-typo-color-disabled: var(--color-control-typo-disable);
    --button-view-clear-typo-color-checked-base: var(--color-control-typo-faint);
    --button-view-default-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-default-fill-color-base: var(--color-control-bg-default);
    --button-view-default-fill-color-disabled: var(--color-control-bg-default-disable);
    --button-view-default-fill-color-hovered: var(--color-control-bg-default-hover);
    --button-view-default-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-default-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-default-typo-color-base: var(--color-control-typo-primary);
    --button-view-default-typo-color-disabled: var(--color-control-typo-disable);
    --button-view-default-typo-color-checked-base: var(--color-control-typo-faint);
    --button-view-default-typo-color-checked-hovered: var(--color-control-typo-faint);
    --button-view-link-border-color-base: var(--color-control-bg-border-link-default);
    --button-view-link-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-link-fill-color-base: var(--color-control-bg-faint);
    --button-view-link-fill-color-disabled: var(--color-control-bg-default-disable);
    --button-view-link-fill-color-hovered: var(--color-control-bg-link-default-hover);
    --button-view-link-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-link-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-link-typo-color-base: var(--color-control-typo-link);
    --button-view-link-typo-color-disabled: var(--color-control-typo-disable);
    --button-view-link-typo-color-checked-base: var(--color-control-typo-faint);
    --button-view-pseudo-border-color-base: var(--color-control-bg-border-pseudo);
    --button-view-pseudo-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-pseudo-fill-color-disabled: var(--color-control-bg-default-disable);
    --button-view-pseudo-fill-color-hovered: var(--color-control-bg-pseudo-hover);
    --button-view-pseudo-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-pseudo-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-pseudo-typo-color-base: var(--color-control-typo-primary);
    --button-view-pseudo-typo-color-disabled: var(--color-control-typo-disable);
    --button-view-pseudo-typo-color-checked-base: var(--color-control-typo-faint);
    --button-view-raised-border-color-focused: var(--color-control-bg-border-prism);
    --button-view-raised-fill-color-base: var(--color-control-bg-raised);
    --button-view-raised-fill-color-disabled: var(--color-control-bg-raised-disable);
    --button-view-raised-fill-color-hovered: var(--color-control-bg-raised-hover);
    --button-view-raised-fill-color-checked-base: var(--color-control-bg-check);
    --button-view-raised-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --button-view-raised-typo-color-base: var(--color-control-typo-raised);
    --button-view-raised-typo-color-disabled: var(--color-control-typo-raised-disable);
    --button-view-raised-typo-color-checked-base: var(--color-control-typo-faint);
    --checkbox-view-outline-border-color: rgba(0, 0, 0, 0.1);
    --checkbox-view-outline-fill-color-base: transparent;
    --checkbox-view-outline-fill-color-hovered: #d2d2d2;
    --checkbox-view-default-outline-color: var(--color-control-bg-border-prism);
    --checkbox-view-default-fill-color-base: var(--color-control-bg-default);
    --checkbox-view-default-fill-color-hovered: var(--color-control-bg-default-hover);
    --checkbox-view-default-fill-color-checked-base: var(--color-control-bg-check);
    --checkbox-view-default-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --checkbox-view-default-typo-color-base: var(--color-control-typo-primary);
    --checkbox-view-default-typo-color-checked-base: var(--color-control-bg-faint);
    --divider-fill-color: #fc0;
    --header-fill-color: #fff; /* Фон шапки */
    --header-nav-link-color-base: #939cb0; /* Основной цвет текста навигационного таба */
    --header-nav-link-color-hover: #222426; /* Цвет текста навигационного таба при наведении мыши */
    --header-nav-link-color-active: #d00; /* Цвет текста навигационного таба при нажатии */
    --header-search-fill-color-base: #ffdb4d; /* Основной цвет заливки и границ Textinput_view_search-arrow и Button_view_search-arrow */
    --header-search-fill-color-hover: #ffd633; /* Цвет заливки и границ Textinput_view_search-arrow и Button_view_search-arrow при наведении мыши */
    --header-search-fill-color-active: #fc0; /* Цвет заливки и границ Textinput_view_search-arrow и Button_view_search-arrow при нажатии */
    --header-search-button-typo-color: #000; /* Цвет текста Button_view_search-arrow */
    --header-search-textinput-typo-color: #000; /* Цвет текста Button_view_search-arrow */
    --header-search-textinput-fill-color: #fff; /* Цвет заливки Textinput_view_search-arrow Texinput-Box */
    --link-view-default-outline-color: var(--color-control-bg-border-prism);
    --link-view-default-typo-color-base: var(--color-link);
    --link-view-default-typo-color-disabled: var(--color-typo-disable);
    --link-view-default-typo-color-hovered: var(--color-link-hover);
    --menu-view-default-border-color-base: var(--color-control-bg-border-default);
    --menu-view-default-fill-color-base: var(--color-control-bg-default);
    --menu-view-default-fill-color-hovered: var(--color-control-bg-default-hover);
    --menu-view-default-typo-color-base: var(--color-control-typo-primary);
    --menu-view-default-typo-color-secondary: var(--color-control-typo-secondary);
    --menu-view-default-typo-color-disabled: var(--color-control-typo-disable);
    --menu-view-default-typo-color-hovered: var(--color-control-typo-primary);
    --message-box-view-default-typo-color: var(--color-typo-inverse);
    --message-box-view-default-fill-color: var(--color-bg-inverse);
    --message-box-view-promo-typo-color: var(--color-typo-inverse);
    --message-box-view-promo-fill-color: var(--color-bg-promo);
    --message-box-view-inverse-typo-color: var(--color-typo-primary);
    --message-box-view-inverse-fill-color: var(--color-bg-default);
    --popup-view-default-typo-color: var(--color-typo-primary);
    --popup-view-default-fill-color: var(--color-bg-default);
    --progress-outer-fill-color: transparent;
    --progress-inner-fill-color: var(--color-control-bg-progress);
    --radio-button-view-default-outline-color: var(--color-control-bg-border-prism);
    --radio-button-view-default-fill-color-base: var(--color-control-bg-default);
    --radio-button-view-default-fill-color-checked-base: var(--color-control-bg-passive);
    --radio-button-view-default-typo-color-base: var(--color-control-typo-secondary);
    --radio-button-view-default-typo-color-hovered: var(--color-control-typo-primary);
    --radio-button-view-default-typo-color-checked-base: var(--color-control-typo-primary);
    --radiobox-view-default-dot-fill-color: var(--color-control-bg-faint);
    --radiobox-view-default-outline-color: var(--color-control-bg-border-prism);
    --radiobox-view-default-fill-color-base: var(--color-control-bg-default);
    --radiobox-view-default-fill-color-hovered: var(--color-control-bg-default-hover);
    --radiobox-view-default-fill-color-checked-base: var(--color-control-bg-check);
    --radiobox-view-default-fill-color-checked-hovered: var(--color-control-bg-check-hover);
    --radiobox-view-default-typo-color-base: var(--color-control-typo-primary);
    --radiobox-view-outline-border-color: rgba(0, 0, 0, 0.1);
    --radiobox-view-outline-fill-color-base: transparent;
    --radiobox-view-outline-fill-color-hovered: #d9d9d9;
    --slider-view-default-typo-color-base: var(--color-control-typo-primary); /* Цвет типографики внутри слайдера */
    --slider-view-default-track-fill-color-base: rgba(0, 0, 0, 0.15); /* Цвет заливки трека в обычном состоянии */
    --slider-view-default-track-fill-color-hovered: rgba(0, 0, 0, 0.25); /* Цвет заливки трека в состоянии наведения */
    --slider-view-default-range-fill-color-base: var(--color-control-bg-action); /* Цвет заливки диапазона в обычном состоянии */
    --slider-view-default-range-fill-color-hovered: var(--color-control-bg-action-hover); /* Цвет заливки диапазона в состоянии наведения */
    --slider-view-default-range-fill-color-disabled: rgba(0, 0, 0, 0.15); /* Цвет заливки диапазона в неактивном состоянии */
    --slider-view-default-thumb-fill-color-base: var(--color-control-bg-raised); /* Цвет заливки бегунка в обычном состоянии */
    --slider-view-default-thumb-fill-color-disabled: #000; /* Цвет заливки бегунка в неактивном состоянии */
    --slider-view-default-tick-fill-color-base: #fff; /* Цвет заливки метки в обычном состоянии */
    --spin-view-default-border-color: var(--color-control-bg-progress);
    --tabs-menu-view-default-outline-color: var(--color-control-bg-border-prism);
    --tabs-menu-view-default-active-line-fill-color-active: var(--color-typo-primary);
    --tabs-menu-view-default-typo-color-base: var(--color-typo-primary);
    --textarea-view-default-fill-color-base: var(--color-control-bg-blank);
    --textarea-view-default-fill-color-disabled: var(--color-control-bg-blank-disable);
    --textarea-view-default-fill-color-hovered: var(--color-control-bg-blank-hover);
    --textarea-view-default-typo-color-base: var(--color-control-typo-primary);
    --textarea-view-default-typo-color-disabled: var(--color-control-typo-disable);
    --textarea-view-default-placeholder-typo-color-base: var(--color-control-typo-ghost);
    --textarea-view-default-placeholder-typo-color-disabled: var(--color-control-typo-disable);
    --textarea-view-default-icon-fill-color-base: var(--color-control-typo-ghost);
    --textarea-view-default-clear-fill-color-base: var(--color-control-typo-ghost);
    --textarea-view-default-clear-fill-color-hovered: var(--color-control-typo-primary);
    --textarea-view-default-hint-typo-color-state-error-base: var(--color-control-typo-error);
    --textarea-view-default-border-color-base: var(--color-control-bg-border-blank);
    --textarea-view-default-border-color-disabled: var(--color-control-bg-border-blank-disable);
    --textarea-view-default-border-color-focused: var(--color-control-bg-border-focus);
    --textarea-view-default-border-color-hovered: var(--color-control-bg-border-blank-hover);
    --textarea-view-default-border-color-state-error-base: var(--color-control-bg-border-default-error);
    --textarea-view-default-border-color-state-error-hovered: var(--color-control-bg-border-default-error-hover);
    --textinput-view-material-typo-color-base: #000;
    --textinput-view-material-typo-color-disabled: rgba(0, 0, 0, 0.4);
    --textinput-view-material-border-color-base: rgba(0, 0, 0, 0.1);
    --textinput-view-material-border-color-state-error: #FF3737;
    --textinput-view-material-icon-fill-color-base: rgba(0, 0, 0, 0.8);
    --textinput-view-material-icon-fill-color-disabled: rgba(0, 0, 0, 0.5);
    --textinput-view-material-hint-typo-color-base: rgba(0, 0, 0, 0.4);
    --textinput-view-material-hint-typo-color-state-error: #FF3737;
    --textinput-view-material-caret-color-base: #067AFF;
    --textinput-view-material-caret-color-state-error: #FF3737;
    --textinput-view-material-placeholder-typo-color-base: var(--color-control-typo-ghost);
    --textinput-view-material-label-color-base: rgba(0, 0, 0, 0.25);
    --textinput-view-material-label-color-state-error: #FF3737;
    --textinput-view-material-label-color-floated-base: rgba(0, 0, 0, 0.4);
    --textinput-view-material-variant-filled-border-color-focused: #067AFF;
    --textinput-view-material-variant-filled-fill-color: rgba(0, 0, 0, 0.05);
    --textinput-view-material-variant-filled-label-color-floated: #067AFF;
    --textinput-view-material-variant-outlined-border-color-base: rgba(0, 0, 0, 0.1);
    --textinput-view-material-variant-outlined-border-color-focused: #067AFF;
    --textinput-view-material-variant-outlined-label-color-floated: #067AFF;
    --textinput-view-default-fill-color-base: var(--color-control-bg-blank);
    --textinput-view-default-fill-color-disabled: var(--color-control-bg-blank-disable);
    --textinput-view-default-fill-color-hovered: var(--color-control-bg-blank-hover);
    --textinput-view-default-typo-color-base: var(--color-control-typo-primary);
    --textinput-view-default-typo-color-disabled: var(--color-control-typo-disable);
    --textinput-view-default-placeholder-typo-color-base: var(--color-control-typo-ghost);
    --textinput-view-default-placeholder-typo-color-disabled: var(--color-control-typo-disable);
    --textinput-view-default-icon-fill-color-base: var(--color-control-typo-ghost);
    --textinput-view-default-clear-fill-color-base: var(--color-control-typo-ghost);
    --textinput-view-default-clear-fill-color-hovered: var(--color-control-typo-primary);
    --textinput-view-default-hint-typo-color-state-error-base: var(--color-control-typo-error);
    --textinput-view-default-border-color-base: var(--color-control-bg-border-blank);
    --textinput-view-default-border-color-disabled: var(--color-control-bg-border-blank-disable);
    --textinput-view-default-border-color-focused: var(--color-control-bg-border-focus);
    --textinput-view-default-border-color-hovered: var(--color-control-bg-border-blank-hover);
    --textinput-view-default-border-color-state-error-base: var(--color-control-bg-border-default-error);
    --textinput-view-default-border-color-state-error-hovered: var(--color-control-bg-border-default-error-hover);
    --tooltip-view-default-fill-color-base: var(--color-control-bg-default);
    --tooltip-view-default-fill-color-state-success: var(--color-bg-success);
    --tooltip-view-default-fill-color-state-warning: var(--color-bg-warning);
    --tooltip-view-default-fill-color-state-alert: var(--color-bg-alert);
    --tooltip-view-default-typo-color-state-success: var(--color-control-typo-faint);
    --tooltip-view-default-typo-color-state-warning: var(--color-control-typo-faint);
    --tooltip-view-default-typo-color-state-alert: var(--color-control-typo-faint);
    --tumbler-view-default-outline-color: var(--color-control-bg-border-prism);
    --tumbler-view-default-fill-color-base: var(--color-control-bg-default);
    --tumbler-view-default-fill-color-disabled: var(--color-control-bg-default-disable);
    --tumbler-view-default-fill-color-hovered: var(--color-control-bg-default-hover);
    --tumbler-view-default-fill-color-checked-base: var(--color-control-bg-action);
    --tumbler-view-default-fill-color-checked-disabled: var(--color-control-bg-default-disable);
    --tumbler-view-default-fill-color-checked-hovered: var(--color-control-bg-action-hover);
    --tumbler-view-default-button-fill-color-base: var(--color-control-bg-faint);
    --tumbler-view-default-typo-color-base: var(--color-control-typo-primary);
    --tumbler-view-default-typo-color-disabled: var(--color-control-typo-disable);
}