> ## Documentation Index > Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt > Use this file to discover all available pages before exploring further. # Variáveis do Tema > Variáveis CSS geradas a partir das configurações do tema. Refletem cores, fontes, bordas e comportamentos definidos no painel do Editor de Código. export const ColorDisplay = ({color, name}) => { return
{color}
; }; Variáveis geradas automaticamente a partir dos parâmetros do tema (`pageConfig.data.theme.params`). Usadas em todo o SCSS do Rocket e disponíveis para customização nos arquivos do seu tema. | Variável | Descrição | Valor padrão | Parâmetro relacionado | | :-------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :--------------------------------- | :--------------------------------------------------------------------- | | `--container-max-width` | Largura máxima do container principal da página. | 1200px | N/A | | `--box-product-max-width` | Largura máxima de um box de produto. | 275px | N/A | | `--background-color` | Cor de fundo padrão. | | color\_general\_background | | `--default-background-color` | Cor de fundo para áreas secundárias. Tom de branco ou cinza dependendo do `color_general_background`. | | color\_general\_background | | `--default-opacity` | Opacidade padrão utilizada no tema. | 0.8 | N/A | | `--modal-transition-time` | Tempo de transição para animações de modais. | 0.5s | N/A | | `--error-color` | Cor utilizada para mensagens de erro. | | N/A | | `--light-error-color` | Variação de cor leve para erros ou alertas. | | N/A | | `--light-error-color-rgb` | Valor RGB da cor de erro leve. | 254, 247, 247 | N/A | | `--error-color-background` | Cor de fundo para mensagens de erro. | | N/A | | `--categories-filter-tag-background` | Cor de fundo dos filtros selecionados. | | N/A | | `--product-not-found-alert` | Cor de fundo do alerta de produto não encontrado. | | N/A | | `--product-not-found-alert-border` | Cor da borda do alerta de produto não encontrado. | | N/A | | `--input-background` | Cor de fundo dos campos de input. | | N/A | | `--input-border-color` | Cor da borda dos campos de input. | | N/A | | `--section-slide-splide-arrow-bg-color` | Cor de fundo das setas do carrossel. | | N/A | | `--section-slide-splide-arrow-bg-color-disabled` | Cor de fundo das setas desabilitadas do carrossel. | | N/A | | `--card-general-background-color` | Cor de fundo dos cards gerais. | | N/A | | `--product-card-background` | Cor de fundo do card de produto. | | N/A | | `--product-card-smoky-background` | Cor de fundo alternativa do card de produto. | | N/A | | `--close-modal-border-color` | Cor da borda do botão de fechar modal. | Calculado | N/A | | `--cashback-text-color` | Cor do texto de cashback. | Calculado | N/A | | `--buy-together-total-value` | Cor do valor total no "compre junto". | Calculado | N/A | | `--splide-pagination-color-contrast` | Cor da paginação do carrossel. | Calculado | N/A | | `--section-title-color` | Cor do título das seções. | Calculado | N/A | | `--product-title-color` | Cor do título do produto. | Calculado | N/A | | `--product-description-color` | Cor da descrição do produto. | Calculado | N/A | | `--top-rating-message-color` | Cor da mensagem na seção de Avaliações em destaque. | Calculado | N/A | | `--header-dropdown-color` | Cor de texto no dropdown do cabeçalho. | Calculado | N/A | | `--breadcrumbs-color-contrast` | Cor do texto do breadcrumb. | Calculado | N/A | | `--breadcrumbs-active-color-contrast` | Cor do item ativo do breadcrumb. | Calculado | N/A | | `--product-reviews-tab-color-contrast` | Cor das abas de avaliações do produto. | Calculado | N/A | | `--review-start-stop-color` | Cor do fundo das estrelas de avaliação. | Calculado | N/A | | `--divisior-default-color` | Cor dos divisores (HR) gerais. | Calculado | N/A | | `--color-general-primary` | Cor primária do tema. | N/A | color\_general\_primary | | `--color-general-secundary` | Cor secundária do tema. | N/A | color\_general\_secundary | | `--color-btn-primary-background` | Cor de fundo do botão primário (estilo sólido). | N/A | color\_btn\_primary\_background | | `--color-btn-primary-background-rgb` | Valor RGB da cor de fundo do botão primário. | N/A | color\_btn\_primary\_background | | `--color-btn-primary-background-outline` | Cor da borda do botão primário. | N/A | color\_btn\_primary\_background | | `--color-btn-primary-text` | Cor do texto do botão primário. | N/A | color\_btn\_primary\_text | | `--color-btn-secundary-background` | Cor de fundo do botão secundário (estilo sólido). | N/A | color\_btn\_secundary\_background | | `--color-btn-secundary-background-outline` | Cor da borda do botão secundário. | N/A | color\_btn\_secundary\_background | | `--color-btn-secundary-text` | Cor do texto do botão secundário. | N/A | color\_btn\_secundary\_text | | `--discount-tag-background` | Cor de fundo da tag de desconto. | N/A | color\_tag\_background | | `--discount-tag-color` | Cor do texto da tag de desconto. | N/A | color\_tag\_text | | `--fonts-texts-family` | Família de fontes para textos gerais. | N/A | fonts\_texts\_family | | `--fonts-texts-size` | Tamanho da fonte para textos gerais. | N/A | fonts\_texts\_size | | `--fonts-titles-family` | Família de fontes para títulos. | N/A | fonts\_titles\_family | | `--fonts-titles-weight` | Peso da fonte para títulos. | N/A | fonts\_titles\_family, fonts\_titles\_weight | | `--fonts-titles-uppercase` | Transformação de texto para títulos (`uppercase` ou `initial`). | N/A | fonts\_titles\_uppercase | | `--fonts-buttons-uppercase` | Transformação de texto para botões (`uppercase` ou `initial`). | N/A | fonts\_buttons\_uppercase | | `--theme-border-radius` | Raio de borda padrão do tema. | N/A | buttons\_general\_format | | `--grids-products-images-border` | Raio de borda das imagens de produto na vitrine. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--grids-products-images-margin` | Margem das imagens de produto na vitrine. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--grids-products-tags-radius` | Raio de borda das tags de produto. | N/A | buttons\_general\_format | | `--product-page-image-border-radius` | Raio de borda da imagem na página do produto. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--product-page-nav-border-radius` | Raio de borda das miniaturas de imagem do produto. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--product-page-flag-border-radius` | Raio de borda das flags na página do produto. | N/A | buttons\_general\_format | | `--product-page-buy-together-image-border-radius` | Raio de borda da imagem do "compre junto". | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--product-page-buy-together-image-mobile` | Raio de borda da imagem do "compre junto" no mobile. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--slides-border-radius` | Raio de borda das imagens em carrosséis. | N/A | buttons\_general\_format | | `--banner-border-radius` | Raio de borda dos banners. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--section-border-radius` | Raio de borda de seções. | N/A | buttons\_general\_format | | `--grid-collection-banner` | Raio de borda do banner na seção de Banner e produtos. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--mini-cart-product-border-radius` | Raio de borda do produto no carrinho. | N/A | border\_apply\_on\_images, buttons\_general\_format | | `--mini-cart-buy-together--border-radius` | Raio de borda dos itens de "compre junto" no carrinho. | N/A | buttons\_general\_format | | `--mini-cart-flags-border-radius` | Raio de borda das tags de desconto no carrinho. | N/A | buttons\_general\_format | | `--category-pagination-border-radius` | Raio de borda da paginação na página de categorias. | N/A | buttons\_general\_format | | `--social-media-icons-border` | Raio de borda dos ícones de redes sociais no rodapé. | N/A | buttons\_general\_format | | `--product-name-size` | Tamanho da fonte do nome do produto na vitrine. | 14px | grids\_product\_name\_size | | `--product-name-color` | Cor do nome do produto na vitrine. | | grids\_product\_name\_color | | `--product-price-size` | Tamanho da fonte do preço do produto na vitrine. | 14px | grids\_product\_price\_size | | `--product-price-color` | Cor do preço do produto na vitrine. | | grids\_product\_prices\_color | | `--product-price-font-weight` | Peso da fonte do preço do produto na vitrine. | 500 | grids\_product\_price\_bold | | `--product-old-price-color` | Cor do preço antigo do produto na vitrine. | | grids\_product\_old\_price\_color | | `--product-installment-price-highlight-font-weight` | Peso da fonte do valor da parcela. | 500 | grids\_product\_installment\_price\_highlight | | `--product-installment-price-highlight-color` | Cor do valor da parcela. | | grids\_product\_installment\_price\_highlight, color\_general\_primary | | `--add-to-cart-button-color` | Cor do botão de Compra rápida (estilo "Apenas ícone"). | | grids\_add\_to\_cart\_button\_color | | `--add-to-cart-icon-text-button-color` | Cor de fundo do botão de Compra rápida (estilo "Ícone + texto"). | N/A | grids\_add\_to\_cart\_icon\_text\_button\_color | | `--add-to-cart-icon-text-button-border-color` | Cor da borda do botão de Compra rápida. | N/A | grids\_add\_to\_cart\_icon\_text\_button\_color | | `--add-to-cart-icon-text-button-text-color` | Cor do texto do botão de Compra rápida. | N/A | grids\_add\_to\_cart\_icon\_text\_button\_text\_color | | `--add-to-cart-icon-text-button-width` | Largura do botão de Compra rápida. | `auto` | grids\_add\_to\_cart\_icon\_text\_button\_full\_width | | `--review-average-star-color` | Cor das estrelas de avaliação. | | grids\_review\_average\_star\_color | | `--brand-name-color` | Cor do nome da marca na vitrine. | | grids\_brand\_name\_color | | `--brand-name-text-case` | Transformação de texto do nome da marca (`uppercase` ou `initial`). | `initial` | grids\_brand\_name\_uppercase |