Atualizar as variáveis CSS no checkout | Documentação para Web Designers

Os estilos do checkout agora incluem um novo esquema de variáveis CSS. Essa melhoria aumenta a consistência visual, simplifica futuras personalizações e garante a compatibilidade com novos componentes e aplicativos.

Este tutorial vai mostrar, passo a passo, como você pode implementar essa atualização no arquivo checkout.scss.tpl do seu layout.

Artigo relacionado: Como aplicar CSS no checkout

Importante: este guia é destinado a lojas com FTP aberto antes de 30 de maio de 2025. Se esse não for o caso da sua loja, você não precisa fazer nenhuma alteração.

Por que essa atualização é necessária?

A incorporação de variáveis CSS (ou propriedades personalizadas) permite centralizar e tornar mais flexível a gestão dos estilos do checkout. As principais vantagens são:

Modernização e manutenção: Centraliza os estilos do checkout com um padrão moderno de CSS. Isso simplifica futuras personalizações e mantém o código alinhado às práticas atuais.
Maior consistência: Garante que todos os componentes do checkout usem os mesmos valores de design. Além disso, permite que os aplicativos instalados na sua loja acessem essas variáveis, respeitando melhor o estilo da sua marca.
Flexibilidade para o futuro: Facilita a criação e adaptação de novos componentes, garantindo que sua loja esteja pronta para futuras atualizações.

A ausência dessas variáveis CSS pode gerar diferenças visuais entre os novos componentes do checkout e os estilos personalizados da sua loja.

Imagine que um novo componente de botão use essas variáveis:

Sem as variáveis definidas, o botão será exibido com suas cores padrão.
Com as variáveis definidas, o botão usará os valores personalizados e ficará integrado ao design da sua loja.

Processo de atualização

A seguir, explicamos como adicionar o novo esquema de variáveis ao seu arquivo checkout.scss.tpl.

Etapa 1: Analise seu arquivo atual

Antes de começar, é fundamental que você se familiarize com a configuração atual do arquivo checkout.scss.tpl.

Identifique as variáveis existentes e verifique quais configurações estão sendo usadas atualmente para definir cores, tipografias e outros estilos no layout.

Etapa 2: Crie a estrutura básica de variáveis

Agora, vamos preparar a base para o novo esquema.

Se ainda não existir, adicione o bloco :root

No início do seu arquivo, adicione o seletor :root {}. É aqui que vamos declarar as novas variáveis.
Defina as variáveis auxiliares de cor

Certifique-se de que as seguintes variáveis estejam definidas, de acordo com o seu layout. Elas capturam as cores principais configuradas no editor de design da loja. Por exemplo:
```
:root {
  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}
}
```

Defina as variáveis de opacidade

Essas variáveis auxiliares permitem gerar diferentes tons das cores base de forma simples.

:root {
  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}
}

Etapa 3: Incorpore as variáveis principais de cor

Com a estrutura básica pronta, é hora de adicionar as novas variáveis de cor.

Defina as variáveis CSS em :root

Adicione as variáveis das cores principais dentro do bloco :root.

:root {
  /* ... */

  /* Accent color */
  --accent-color: {{ accent_color }};

  /* Main foreground */
  --main-foreground: {{ main_foreground }};

  /* Main background */
  --main-background: {{ main_background }};
}

Adicione as variações com opacidade

Usando as variáveis auxiliares da etapa anterior, crie as variações para cada cor principal.

:root {
  /* ... */

  /* Accent color com diferentes níveis de opacidade */
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  /* Main foreground com diferentes níveis de opacidade */
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  /* Main background com diferentes níveis de opacidade */
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};
}

Etapa 4: Defina variáveis para componentes (Recomendado)

Recomendamos criar também variáveis específicas para os componentes do checkout, como botões, labels e cabeçalhos. Para isso, é necessário analisar as variáveis SASS existentes e replicá-las nas novas. Por exemplo:

:root {
  /* ... */

  /* General */
  --border-radius: 3px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--main-foreground-opacity-30);

  /* Buttons */
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);
  --button-border-width: 0;

  /* Labels */
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  /* Header */
  --header-foreground: var(--main-foreground);
  --header-background: var(--main-background);

  /* Footer */
  --footer-foreground: var(--main-foreground);
  --footer-background: var(--main-background);
}

Etapa 5: Adicione variáveis de tipografia (Opcional)

Assim como na etapa anterior, você também pode declarar variáveis para os estilos gráficos de títulos e do cabeçalho.

:root {
  /* ... */

  /* Headings */
  --heading-font: {{ settings.font_headings | default('Open Sans') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  /* Header logo */
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Não se esqueça de ativar os estilos!

Para que o seu arquivo checkout.scss.tpl seja aplicado, certifique-se de que a opção esteja ativada no seu administrador:

Acesse Configurações > Opções do checkout.
Marque a caixa "Usar as cores do seu layout no checkout".

Código de exemplo por layout

Você pode usar os códigos a seguir como referência para o seu arquivo checkout.scss.tpl, de acordo com o layout que estiver utilizando.

Amazonas

:root {
  {#### Color tokens #}

  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 10px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-10);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: 40px;

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ settings.head_background == 'light' ? 'var(--main-foreground)' : 'var(--main-background)' }};
  --header-background: {{
    settings.head_background == 'light' ? 'var(--main-background)' :
    settings.head_background == 'dark' ? 'var(--main-foreground)' :
    'var(--accent-color)'
  }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--accent-color)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-foreground-opacity-10)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Muli') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Atlántico

:root {
  {#### Color tokens #}

  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.positive_color %}
  {% set main_background = settings.negative_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 10px;
  --box-border-radius: var(--border-radius);
  --border-color: #{$box-border-color}; {# Relies on Sass darken/lighten functions #}
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: var(--main-background);
  --header-background: var(--main-foreground);
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: var(--main-foreground);
  --footer-background: var(--main-background);

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Fraunces') | raw }};
  --heading-font-weight: 700;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: {{ settings.font_headings | default('Fraunces') | raw }};
  --header-logo-font-size: 24px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: 1px;
}

Bahía

:root {
  {#### Color tokens #}

  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 10px;
  --box-border-radius: var(--border-radius);
  --border-color: #{$box-border-color}; {# Relies on Sass darken/lighten functions #}
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: var(--accent-color);
  --button-background: var(--main-background);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);
  --button-border-width: 0;

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ settings.head_background == 'light' ? 'var(--main-foreground)' : 'var(--main-background)' }};
  --header-background: {{
    settings.head_background == 'light' ? 'var(--main-background)' :
    settings.head_background == 'dark' ? 'var(--main-foreground)' :
    'var(--accent-color)'
  }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: var(--main-background-opacity-80);
  --footer-background: var(--main-foreground-opacity-80);

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Muli') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: {{ settings.font_headings | default('Muli') | raw }};
  --header-logo-font-size: 24px;
  --header-logo-font-weight: 900;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Baires

:root {
  {#### Colors settings #}

  {# Main colors #}

  {% set main_background = settings.background_color %}
  {% set main_foreground = settings.text_color %}
  {% set accent_color = settings.accent_color %}

  {% set button_background = settings.button_background_color %}
  {% set button_foreground = settings.button_foreground_color %}
  
  {% set label_background = settings.label_background_color %}
  {% set label_foreground = settings.label_foreground_color %}

  {% set header_background = settings.header_colors ? settings.header_background_color : main_background %}
  {% set header_foreground = settings.header_colors ? settings.header_foreground_color : main_foreground %}

  {#### Color tokens #}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_15 = '26' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-15: {{ accent_color }}{{ opacity_15 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-15: {{ main_foreground }}{{ opacity_15 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-15: {{ main_background }}{{ opacity_15 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-50);
  --box-border-color: var(--main-foreground);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: {{ button_foreground }};
  --button-background: {{ button_background }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ label_foreground }};
  --label-background: {{ label_background }};

  {# Header #}
  --header-foreground: {{ header_foreground }};
  --header-background: {{ header_background }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Lexend') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;

  {# Body #}
  --body-font: {{ settings.font_rest | default('Lexend') | raw }};

  {# Danger #}
  --danger: #c13a3a;
}

Base

:root {
  {#### Color tokens #}

  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: #{$box-border-color}; {# Relies on Sass darken/lighten functions #}
  --box-border-color: var(--main-foreground-opacity-10);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: var(--main-foreground);
  --header-background: var(--main-background);

  {# Footer #}
  --footer-foreground: var(--main-foreground);
  --footer-background: var(--main-background);

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Muli') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: {{ settings.font_headings | default('Muli') | raw }};
  --header-logo-font-size: 20px;
  --header-logo-font-weight: bold;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Brasilia

:root {
  {#### Colors settings #}

  {# Main colors #}

  {% set main_background = settings.background_color %}
  {% set main_foreground = settings.text_color %}
  {% set accent_color = settings.accent_color %}

  {% set button_background = settings.button_background_color %}
  {% set button_foreground = settings.button_foreground_color %}
  
  {% set label_background = settings.label_background_color %}
  {% set label_foreground = settings.label_foreground_color %}

  {% set header_background = settings.header_colors ? settings.header_background_color : main_background %}
  {% set header_foreground = settings.header_colors ? settings.header_foreground_color : main_foreground %}

  {#### Color tokens #}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_15 = '26' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-15: {{ accent_color }}{{ opacity_15 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-15: {{ main_foreground }}{{ opacity_15 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-15: {{ main_background }}{{ opacity_15 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 4px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-50);
  --box-border-color: var(--main-foreground-opacity-10);

  {# Buttons #}
  --button-foreground: {{ button_foreground }};
  --button-background: {{ button_background }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ label_foreground }};
  --label-background: {{ label_background }};

  {# Header #}
  --header-foreground: {{ header_foreground }};
  --header-background: {{ header_background }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Lexend') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;

  {# Body #}
  --body-font: {{ settings.font_rest | default('Lexend') | raw }};

  {#### Misc tokens #}

  {# Font sizes #}
  --font-base: 1rem;
  --font-medium: 0.875rem;
  --font-small: 0.75rem;
  --font-smallest: 0.625rem;

  {# Danger #}
  --danger: #c13a3a;
}

Cali

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 3px;
  --box-border-radius: {{ settings.theme_rounded ? '24px' : '6px' }};
  --border-color: var(--main-foreground-opacity-50);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: {{ settings.button_background_color }};
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 60px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--main-foreground)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-background)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Manrope') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Cubo

:root {
  {#### Color tokens #}

  {% set accent_color = settings.brand_color %}
  {% set main_foreground = settings.secondary_color %}
  {% set main_background = settings.primary_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ settings.head_background == 'light' ? 'var(--main-foreground)' : 'var(--main-background)' }};
  --header-background: {{
    settings.head_background == 'light' ? 'var(--main-background)' :
    settings.head_background == 'dark' ? 'var(--main-foreground)' :
    'var(--accent-color)'
  }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 60px;

  {# Footer #}
  --footer-foreground: var(--main-background);
  --footer-background: var(--main-foreground-opacity-80);

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Plus Jakarta Sans') | raw }};
  --heading-font-weight: 700;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: {{ settings.font_headings | default('Plus Jakarta Sans') | raw }};
  --header-logo-font-size: 34px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Flex

:root {
  {#### Colors settings #}

  {# Main colors #}

  {% set main_background = settings.background_color %}
  {% set main_foreground = settings.text_color %}
  {% set accent_color = settings.accent_color %}

  {% set button_background = settings.add_button_background_color %}
  {% set button_foreground = settings.add_button_foreground_color %}
  
  {% set label_background = settings.label_background_color %}
  {% set label_foreground = settings.label_foreground_color %}

  {% set header_background = settings.header_colors ? settings.header_background_color : main_background %}
  {% set header_foreground = settings.header_colors ? settings.header_foreground_color : main_foreground %}

  {#### Color tokens #}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 3px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);

  {# Buttons #}
  --button-foreground: {{ button_foreground }};
  --button-background: {{ button_background }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ label_foreground }};
  --label-background: {{ label_background }};

  {# Header #}
  --header-foreground: {{ header_foreground }};
  --header-background: {{ header_background }};
  --header-logo-max-width: 50%;
  --header-logo-max-height: 50px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Open Sans Condensed') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 34px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;

  {# Body #}
  --body-font: {{ settings.font_rest | default('Open Sans Condensed') | raw }};
}

Guadalajara

:root {
  {#### Colors settings #}

  {# Main colors #}

  {% set main_background = settings.background_color %}
  {% set main_foreground = settings.text_color %}
  {% set accent_color = settings.accent_color %}

  {% set button_background = settings.button_background_color %}
  {% set button_foreground = settings.button_foreground_color %}
  
  {% set label_background = settings.label_background_color %}
  {% set label_foreground = settings.label_foreground_color %}

  {% set header_background = settings.header_colors ? settings.header_background_color : main_background %}
  {% set header_foreground = settings.header_colors ? settings.header_foreground_color : main_foreground %}

  {#### Color tokens #}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_15 = '26' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-15: {{ accent_color }}{{ opacity_15 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-15: {{ main_foreground }}{{ opacity_15 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-15: {{ main_background }}{{ opacity_15 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  
  --border-color: var(--main-foreground-opacity-50);
  --box-border-color: var(--main-foreground);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: {{ button_foreground }};
  --button-background: {{ button_background }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ label_foreground }};
  --label-background: {{ label_background }};

  {# Header #}
  --header-foreground: {{ header_foreground }};
  --header-background: {{ header_background }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Lexend') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;

  {# Body #}
  --body-font: {{ settings.font_rest | default('Lexend') | raw }};

  {# Danger #}
  --danger: #c13a3a;
}

Idea

:root {
  {#### Color tokens #}

  {% set accent_color = settings.primary_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: {{ settings.theme_variant == 'squared' ? '0' : '10px' }};
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-20);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ settings.head_background == 'light' ? 'var(--main-foreground)' : 'var(--main-background)' }};
  --header-background: {{
    settings.head_background == 'light' ? 'var(--main-background)' :
    settings.head_background == 'dark' ? 'var(--main-foreground)' :
    'var(--accent-color)'
  }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 60px;

  {# Footer #}
  --footer-foreground: {{
    settings.footer_background == 'light' or
    settings.footer_background == 'default' ? 'var(--main-foreground)' :
    'var(--main-background)'
  }};
  --footer-background: {{
    settings.footer_background == 'light' ? 'var(--main-background)' :
    settings.footer_background == 'dark' ? 'var(--main-foreground)' :
    settings.footer_background == 'primary' ? 'var(--accent-color)' :
    settings.theme_variant == 'squared' ? 'var(--main-foreground-opacity-10)' :
    'var(--main-background)'
  }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Muli') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 22px;
  --header-logo-font-weight: 300;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Lima

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 6px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: {{ settings.button_background_color }};
  --button-border-radius: 48px;

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 60px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--main-foreground)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-background)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Lexend') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Lifestyle (luxury)

:root {
  {#### Color tokens #}

  {% set accent_color = settings.brand_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: var(--main-foreground);
  --header-background: var(--main-background);
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: var(--accent-color);
  --footer-background: var(--accent-color-opacity-20);

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Arvo') | raw }};
  --heading-font-weight: 700;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: {{ settings.font_logo | default('Arvo') | raw }};
  --header-logo-font-size: 34px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Material

:root {
  {#### Color tokens #}

  {% set primary_color = settings.primary_brand_color %}
  {% set accent_color = settings.accent_brand_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 6px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-60);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ primary_color }};
  --header-background: var(--main-background);
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: var(--main-background);
  --footer-background: {{ primary_color }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Roboto') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 36px;
  --header-logo-font-weight: 400;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Morelia

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-50);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: {{ settings.button_background_color }};
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--main-foreground)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-background)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Golos Text') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Simple (new_linkedman)

:root {
  {#### Color tokens #}

  {% set accent_color = settings.button_bg %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{
    settings.head_background == 'dark' and
    settings.version_theme != 'box' ? 'var(--main-background)' :
    'var(--main-foreground)'
  }};
  --header-background: {{
    settings.head_background == 'dark' and
    settings.version_theme != 'box' ? 'var(--main-foreground)' :
    'var(--main-background)'
  }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 170px;

  {# Footer #}
  --footer-foreground: {{ settings.actual_footer_text ? settings.actual_footer_text : 'var(--accent-color)' }};
  --footer-background: {{ settings.footer_bg ? settings.footer_bg : 'var(--main-foreground-opacity-10)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Open Sans Condensed') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 28px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Recife

:root {
  {#### Colors settings #}

  {# Main colors #}

  {% set main_background = settings.background_color %}
  {% set main_foreground = settings.text_color %}
  {% set accent_color = settings.accent_color %}

  {% set button_background = settings.button_background_color %}
  {% set button_foreground = settings.button_foreground_color %}
  
  {% set label_background = settings.label_background_color %}
  {% set label_foreground = settings.label_foreground_color %}

  {% set header_background = settings.header_colors ? settings.header_background_color : main_background %}
  {% set header_foreground = settings.header_colors ? settings.header_foreground_color : main_foreground %}

  {#### Color tokens #}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_15 = '26' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-15: {{ accent_color }}{{ opacity_15 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-15: {{ main_foreground }}{{ opacity_15 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-15: {{ main_background }}{{ opacity_15 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-50);

  {# Buttons #}
  --button-foreground: {{ button_foreground }};
  --button-background: {{ button_background }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ label_foreground }};
  --label-background: {{ label_background }};

  {# Header #}
  --header-foreground: {{ header_foreground }};
  --header-background: {{ header_background }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Lexend') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;

  {# Body #}
  --body-font: {{ settings.font_rest | default('Lexend') | raw }};

  {# Danger #}
  --danger: #c13a3a;
}

Rio

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 4px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: {{ settings.button_background_color }};
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 60px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--main-foreground)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-background)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Muli') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: none;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Trend (style)

:root {
  {#### Color tokens #}

  {% set primary_color = settings.primary_color %}
  {% set accent_color = settings.secondary_color %}
  {% set main_foreground = settings.text_primary_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 4px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: {{ primary_color }};
  --header-background: var(--main-background);
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{
    settings.footer_background == 'secondary' or
    settings.footer_background == 'foreground' or
    settings.footer_background == 'primary' ? 'var(--main-background)' :
    'var(--main-foreground)'
  }};
  --footer-background: {{
    settings.footer_background == 'secondary' ? 'var(--accent-color)' :
    settings.footer_background == 'foreground' ? 'var(--main-foreground)' :
    settings.footer_background == 'primary' ? primary_color :
    'var(--main-background)'
  }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.main_font | default('Roboto') | raw }};
  --heading-font-weight: bold;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: 2px;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 24px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: uppercase;
  --header-logo-letter-spacing: normal;
}

Toluca

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 4px;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-20);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: var(--button-background);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : 'var(--main-foreground)' }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : 'var(--main-background)' }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Golos Text') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Uyuni

:root {
  {#### Color tokens #}

  {% set accent_color = settings.accent_color %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: {{ settings.border_color }};
  --box-border-color: var(--border-color);
  --input-border-color: var(--main-foreground-opacity-50);

  {# Buttons #}
  --button-foreground: {{ settings.button_foreground_color }};
  --button-background: {{ settings.button_background_color }};
  --button-border-color: {{ settings.button_background_color }};
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: {{ settings.label_foreground_color }};
  --label-background: {{ settings.label_background_color }};

  {# Header #}
  --header-foreground: {{ settings.header_colors ? settings.header_foreground_color : 'var(--main-foreground)' }};
  --header-background: {{ settings.header_colors ? settings.header_background_color : 'var(--main-background)' }};
  --header-logo-max-width: 100%;
  --header-logo-max-height: 40px;

  {# Footer #}
  --footer-foreground: {{ settings.footer_colors ? settings.footer_foreground_color : main_foreground }};
  --footer-background: {{ settings.footer_colors ? settings.footer_background_color : main_background }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Golos Text') | raw }};
  --heading-font-weight: 400;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: normal;

  {# Header #}
  --header-logo-font: var(--heading-font);
  --header-logo-font-size: 20px;
  --header-logo-font-weight: 700;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}

Silent (zen)

:root {
  {#### Color tokens #}

  {% set accent_color = settings.brand_color %}
  {% set background_color_secondary = settings.background_color_secondary %}
  {% set main_foreground = settings.text_color %}
  {% set main_background = settings.background_color %}

  {# Auxiliar opacity hex levels #}
  {% set opacity_05 = '0D' %}
  {% set opacity_10 = '1A' %}
  {% set opacity_20 = '33' %}
  {% set opacity_30 = '4D' %}
  {% set opacity_50 = '80' %}
  {% set opacity_60 = '99' %}
  {% set opacity_80 = 'CC' %}

  {# Accent color #}
  --accent-color: {{ accent_color }};
  --accent-color-opacity-05: {{ accent_color }}{{ opacity_05 }};
  --accent-color-opacity-10: {{ accent_color }}{{ opacity_10 }};
  --accent-color-opacity-20: {{ accent_color }}{{ opacity_20 }};
  --accent-color-opacity-30: {{ accent_color }}{{ opacity_30 }};
  --accent-color-opacity-50: {{ accent_color }}{{ opacity_50 }};
  --accent-color-opacity-60: {{ accent_color }}{{ opacity_60 }};
  --accent-color-opacity-80: {{ accent_color }}{{ opacity_80 }};

  {# Foreground color #}
  --main-foreground: {{ main_foreground }};
  --main-foreground-opacity-05: {{ main_foreground }}{{ opacity_05 }};
  --main-foreground-opacity-10: {{ main_foreground }}{{ opacity_10 }};
  --main-foreground-opacity-20: {{ main_foreground }}{{ opacity_20 }};
  --main-foreground-opacity-30: {{ main_foreground }}{{ opacity_30 }};
  --main-foreground-opacity-50: {{ main_foreground }}{{ opacity_50 }};
  --main-foreground-opacity-60: {{ main_foreground }}{{ opacity_60 }};
  --main-foreground-opacity-80: {{ main_foreground }}{{ opacity_80 }};

  {# Background color #}
  --main-background: {{ main_background }};
  --main-background-opacity-05: {{ main_background }}{{ opacity_05 }};
  --main-background-opacity-10: {{ main_background }}{{ opacity_10 }};
  --main-background-opacity-20: {{ main_background }}{{ opacity_20 }};
  --main-background-opacity-30: {{ main_background }}{{ opacity_30 }};
  --main-background-opacity-50: {{ main_background }}{{ opacity_50 }};
  --main-background-opacity-60: {{ main_background }}{{ opacity_60 }};
  --main-background-opacity-80: {{ main_background }}{{ opacity_80 }};

  {#### Component tokens #}

  {# General #}
  --border-radius: 0;
  --box-border-radius: var(--border-radius);
  --border-color: var(--main-foreground-opacity-30);
  --box-border-color: var(--main-foreground-opacity-10);
  --input-border-color: var(--border-color);

  {# Buttons #}
  --button-foreground: var(--main-background);
  --button-background: var(--accent-color);
  --button-border-color: var(--accent-color);
  --button-border-radius: var(--border-radius);

  {# Labels #}
  --label-foreground: var(--main-background);
  --label-background: var(--accent-color);

  {# Header #}
  --header-foreground: var(--accent-color);
  --header-background: var(--main-background);
  --header-logo-max-width: 100%;
  --header-logo-max-height: 80px;

  {# Footer #}
  --footer-foreground: {{ background_color_secondary }};
  --footer-background: {{ background_color_secondary }}{{ opacity_20 }};

  {#### Typography #}

  {# Headings #}
  --heading-font: {{ settings.font_headings | default('Roboto') | raw }};
  --heading-font-weight: 300;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: 1px;

  {# Header #}
  --header-logo-font: {{ settings.font_logo | default('Roboto') | raw }};
  --header-logo-font-size: 24px;
  --header-logo-font-weight: 400;
  --header-logo-text-transform: none;
  --header-logo-letter-spacing: normal;
}