Миксины (mixins)

Раздел содержит функции, которые можно применять для стилизации компонент.

addFocus

Добавляет фокусную рамку к компоненту через псевдоэлемент ::before. Рамка реализована через CSS outline, что исключает влияние на scroll-область контейнера.

Параметры

Параметр	Тип	По умолчанию	Описание
outlineSize	string	'0.125rem'	Толщина фокусной рамки
outlineOffset	string	'0.125rem'	Отступ от элемента: отрицательное — рамка внутри , положительное — снаружи
outlineColor	string	'var(--text-accent)'	Цвет фокусной рамки
outlineRadius	string	'30px'	Скругление углов фокусной рамки
hasTransition	boolean	true	Анимировать появление рамки
customFocusRules	string	—	Переопределяет стили состояния фокуса

import styled from 'styled-components';
import { addFocus } from '@salutejs/sdds-serv';

const FocusableCard = styled.div`
    ${addFocus({
        outlineSize: '0.125rem',
        outlineOffset: '0.125rem',
        outlineRadius: '0.5rem',
        outlineColor: 'var(--text-accent)',
    })}
`;

applyPaper

Позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы sdds_serv:

• backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
• borderRadius - отвечает за скругление углов блока;
• shadow - отвечает за применение стилей теней для блока;
• styles - отвечает за все доступные css свойства.

import { applyPaper } from '@salutejs/sdds-serv';

<div
    style={applyPaper({
        backgroundColor: 'surfaceAccent',
        borderRadius: 'borderRadiusM',
        shadow: 'shadowDownHardM',
        styles: {
            color: 'white',
            width: '10rem',
            height: '10rem',
        },
    })}
>
    Test card
</div>

addScrollbar

caution

Стилизация системного scrollbar возможна только в браузерах: Safari, Chrome и на базе Chromium!

Позволяет изменить внешний вид системного scrollbar согласно цветовым токенам темы.

import { addScrollbar } from '@salutejs/sdds-serv';

type Size = 's' | 'm';

const ScrollbarContainer = styled.div`
    ${addScrollbar('s')};
`;

<ScrollbarContainer>
    { children }
</ScrollbarContainer>