Package Exports

@salutejs/tokens-sdds
@salutejs/tokens-sdds/es/index.js
@salutejs/tokens-sdds/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@salutejs/tokens-sdds) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tokens SDDS

Пакет предоставляет набор дизайн-токенов реализующих дизайн вертикали «SDDS».

Конфигурация пакета

Тема	Библиотека	Шрифты
`sdds_serv`	`@salutejs/sdds-serv`	SB Sans Display, SB Sans Text

Установка и подключение

Установка зависимости:

npm i --save @salutejs/tokens-sdds

Типографическая система основана на фирменных шрифтах. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN.

Для использования типографической системы необходимо загрузить два css файла в зависимости от используемых шрифтов в теме. Их необходимо добавить внутрь тега head. Если в качестве основы web-приложения вы используете create-react-app, вам необходимо изменить файл ./public/index.html.

<html>
    <head>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
    </head>
    <body>
        ...
    </body>
</html>

Подключение с помощью styled-component:

import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

import { Button, BodyL } from '@salutejs/sdds-serv';
import { sdds_serv__light } from '@salutejs/tokens-sdds';

const Theme = createGlobalStyle(sdds_serv__light);

const App = () => {
    return (
        <>
            <Theme />
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

Подключение с помощью импорта css файла:

import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

import '@salutejs/tokens-sdds/css/sdds_serv__dark.css';

const App = () => {
    return (
        <>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

Подключение с помощью импорта модульного css файла:

Возможно потребуется @ts-ignore

import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

import styles from '@salutejs/tokens-sdds/css/sdds_serv.module.css';

const App = () => {
    return (
        <div className={styles.dark}>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </div>
    );
};

export default App;

Использование токенов

Все css токены завернуты в js переменные для более удобного доступа:

/** Основной цвет текста */
export const textPrimary = 'var(--text-primary, #F5F5F5)';
/** Основной фон */
export const backgroundPrimary = 'var(--background-primary, #000000)';

Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.

/** Токены типографики для компонента DsplL */
export const dsplL = ({
    fontFamily: 'var(--plasma-typo-dspl-l-font-family)',
    fontSize: 'var(--plasma-typo-dspl-l-font-size)',
    fontStyle: 'var(--plasma-typo-dspl-l-font-style)',
    fontWeight: 'var(--plasma-typo-dspl-l-font-weight)',
    letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)',
    lineHeight: 'var(--plasma-typo-dspl-l-line-height)',
} as unknown) as CSSObject;

Пример использования:

import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

import { textAccent, backgroundPrimary, bodyL } from '@salutejs/tokens-sdds/vars';

const AppStyled = styled.div`
    padding: 30px;
    color: ${textAccent};
    background-color: ${backgroundPrimary};
`;

const Container = styled.div`
    ${bodyL};
    margin: 15px;
`;
const App = () => {
    const Theme = themes[theme];

    return (
        <AppStyled>
            <Container>
                <h2>Hello world</h2>
            </Container>
        </AppStyled>
    );
};

export default App;