Variáveis do Tema

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

Começando

Referência

Tema Rocket