export default App;
`

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

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

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

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

`js
/* Токены типографики для компонента 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;
`

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

`jsx
import React from 'react';
import styled from 'styled-components';

import { textAccent, backgroundPrimary, textL } from '@salutejs/plasma-themes/tokens';

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

const Container = styled.div
${textL};
margin: 15px;
;

const App = () => {
return (


Hello world


);
};

export default App;
`

Смена тем

Пример на styled-components:

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

import { Switch } from '@salutejs/plasma-b2c';
import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';

import './style.css';

const LightTheme = createGlobalStyle(plasma_b2c__light);
const DarkTheme = createGlobalStyle(plasma_b2c__dark);

const App = () => {
const [theme, setTheme] = useState('light');

return (
<>
{theme === 'light' ? : }

export default App;
`

Пример на emotion:

`jsx
import React, { useState } from 'react';

import { Global, css } from '@emotion/react';
import { Switch } from '@salutejs/plasma-b2c';
import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';

import './style.css';

const lightThemeStyle = css(plasma_b2c__light);
const darkThemeStyle = css(plasma_b2c__dark);

const App = () => {
const [theme, setTheme] = useState('light');

return (
<>


export default App;
`

Пример на css-modules:

`jsx
import React, { useLayoutEffect, useState } from 'react';

import { Switch } from '@salutejs/plasma-b2c';
import webThemes from '@salutejs/plasma-themes/css/plasma_b2c.module.css';

import './style.css';

const App = () => {
const [theme, setTheme] = useState('light');

useLayoutEffect(() => {
document.documentElement.className = webThemes[theme];
}, [theme]);

return (


export default App;
`

Пример на css:

`jsx
import React, { useLayoutEffect, useState } from 'react';

import { Switch } from '@salutejs/plasma-b2c';

// добавьте импорт в css файл
// @import '@salutejs/plasma-themes/css/plasma_b2c.module.css';
import './style.css';

const App = () => {
const [theme, setTheme] = useState('light');

useLayoutEffect(() => {
document.documentElement.className = theme;
}, [theme]);

return (


export default App;
``