import React from 'react' ; import styled , { createGlobalStyle } from 'styled-components' ; import { sberBox } from '@sberdevices/plasma-tokens/typo' ; import { body1 , headline2 } from '@sberdevices/plasma-tokens' ; import { darkJoy } from '@sberdevices/plasma-tokens' ; import { text , background , gradient } from '@sberdevices/plasma-tokens' ; const AppStyled = styled . div `
    padding: 30px;
    ${ body1 }
` ; const TypoScale = createGlobalStyle ( sberBox ) ; const DocStyles = createGlobalStyle `
    /* stylelint-disable-next-line selector-nested-pattern */
    html {
        color: ${ text };
        background-color: ${ background };
        background-image: ${ gradient };

        /** необходимо залить градиентом всю подложку */
        min-height: 100vh;
    }
` ; const Theme = createGlobalStyle ( darkJoy ) ; const App = ( ) => { return ( < AppStyled > { } < TypoScale / > < DocStyles /> < Theme / > < h2 style = { headline2 } > Hello Plasma Tokens < /h2> < div > < span > Сил человеческих хватает до известного предела . < /span> < br / > < span > Кто виноват , что именно этот предел играет решающую роль ? < /span> < /div> < /AppStyled>); } ; export default App ;