@salutejs/flamingo-themes
v0.14.0
Published
Flamingo-themes package
Downloads
122
Keywords
Readme
Flamingo Themes
Пакет предоставляет набор дизайн-токенов, а также тем, реализующих дизайн вертикали «Flamingo».
Конфигурация пакета
| Тема | Библиотека | Шрифты |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| flamingo | - | SB Sans Display, SB Sans Text |
Установка и подключение
Установка зависимости:
npm i --save @salutejs/flamingo-themesТипографическая система основана на фирменных шрифтах. Для того чтобы шрифт было удобно поставлять в 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 { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/flamingo';
import { flamingo__light } from '@salutejs/flamingo-themes';
const Theme = createGlobalStyle(flamingo__light);
const App = () => {
return (
<>
<Theme />
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;Подключение с помощью импорта css файла:
import React from 'react';
import { Button, BodyL } from '@salutejs/flamingo';
import '@salutejs/flamingo-themes/css/flamingo__dark.css';
const App = () => {
return (
<>
<BodyL>Hello world</BodyL>
<Button text="This is themed button" />
</>
);
};
export default App;Подключение с помощью импорта модульного css файла:
Потребуется дополнительно настроить TypeScript
import React from 'react';
import { Button, BodyL } from '@salutejs/flamingo';
import styles from '@salutejs/flamingo-themes/css/flamingo.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 from 'styled-components';
import { textAccent, backgroundPrimary, textL } from '@salutejs/flamingo-themes/tokens';
const AppStyled = styled.div`
padding: 30px;
color: ${textAccent};
background-color: ${backgroundPrimary};
`;
const Container = styled.div`
${textL};
margin: 15px;
`;
const App = () => {
return (
<AppStyled>
<Container>
<span>Hello world</span>
</Container>
</AppStyled>
);
};
export default App;