CSS - Copan Platform

CSS

Para utilizar os tokens via variáveis de CSS, basta importar as variáveis no arquivo raiz do seu projeto (_app.tsx no caso de projetos React.JS + Next.JS, por exemplo).

App.tsx

import '@loft/tokens-loft/build/css/variables.css';

...

import '@loft/tokens-loft/build/css/variables.css';

...

E depois utilizar as variáveis como desejar nos seus módulos CSS:

Component.module.css

.wrapper {
  padding: var(--spacing-inner-base02);
}

.content h1 {
  font: var(--typography-variants-h1-desktop);
}
  
.content p {
  font: var(--typography-variants-paragraph-md-desktop);
}

.wrapper {
  padding: var(--spacing-inner-base02);
}

.content h1 {
  font: var(--typography-variants-h1-desktop);
}
  
.content p {
  font: var(--typography-variants-paragraph-md-desktop);
}

Component.tsx

<div className="loft">
  {/*
    * The following line is used only for demonstration purposes, so that the code in both live edits are linked.
    */}
  <style lang="css" dangerouslySetInnerHTML={{ __html: cssCode }} />
    
  <div className="wrapper">
    <div className="content">
      <h1>Hello World</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eu consectetur consectetur, 
      nisl nisi consectetur nisi, euismod consectetur nisi nisi euismod nisi.</p>
    </div>
    <div className="button-group">
      <Button>
        Botão
      </Button>
    </div>
  </div>
</div>

<div className="loft">
  {/*
    * The following line is used only for demonstration purposes, so that the code in both live edits are linked.
    */}
  <style lang="css" dangerouslySetInnerHTML={{ __html: cssCode }} />
    
  <div className="wrapper">
    <div className="content">
      <h1>Hello World</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eu consectetur consectetur, 
      nisl nisi consectetur nisi, euismod consectetur nisi nisi euismod nisi.</p>
    </div>
    <div className="button-group">
      <Button>
        Botão
      </Button>
    </div>
  </div>
</div>