SCSS - Copan Platform

SCSS

Para utilizar os tokens via variáveis em conjunto com SCSS, basta importar as variáveis em formato CSS no arquivo raiz do seu projeto (_app.tsx no caso de projetos React.JS + Next.JS, por exemplo). Lembre-se também que, em caso de React.JS + Next.JS, talvez seja necessário adicionar algumas libs para o funcionamento de SCSS, como a sass ou a node-sass.

_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 SCSS:

Component.module.scss

.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

<>
  {/*
    * 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>
</>

<>
  {/*
    * 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>
</>