Meta do trimestre
Material
Inspirado no Material Design 3: superfícies tonais a partir de uma cor de marca e botões em pílula.
Material
Inspirado no Material Design 3: superfícies tonais a partir de uma cor de marca e botões em pílula.
AaRoboto Flex
- Família
- Plataforma
- Fontes
- Roboto Flex
- Raio
- controles em pílula · superfícies 12px
- Bordas e profundidade
- superfícies tonais · sombras de elevação
- Movimento
- 200 / 300ms
Sem afiliação. Este estilo é inspirado no Material Design. O Camaleo não é afiliado ao Google e não distribui fontes, ícones nem marcas do Google.
Como usar
import "@camaleo/styles/base.css";
import "@camaleo/styles/material.css";
<StyleProvider styleName="material">…</StyleProvider>
As fontes não vêm no pacote. O estilo pede Roboto Flex pelo nome, então qualquer carregador que registre essa família funciona: next/font (abaixo), um <link> para um serviço de fontes ou o seu próprio @font-face.
// app/layout.tsx
import { Roboto_Flex } from "next/font/google";
const robotoflex = Roboto_Flex({ subsets: ["latin"], variable: "--font-robotoflex" });
<html className={`${robotoflex.variable}`}>
Quando usar
Combina com
- Web apps que convivem com produtos Android
- Times que já conhecem os padrões do Material
- Marcas que querem todos os neutros tingidos pela cor da marca
Pense duas vezes
- Projetos que precisam dos componentes, fontes ou ícones oficiais do Google
- Layouts estritamente retos: todo botão é uma pílula completa
Claro e escuro
Os dois modos são desenhados, não invertidos, e passam pelas mesmas verificações de contraste. A cor da marca vem da barra de pré-visualização.
Relatório semanal
Enviado toda segunda às 9h.
Cota do mês
Rascunho
Relatório semanal
Enviado toda segunda às 9h.
Cota do mês
Rascunho
Componentes em Material
Componentes reais da biblioteca, em Material, com o modo e a cor da marca da barra de pré-visualização.
Como está no seu documento. Ele sai na nota fiscal.
Plano
Em revisãoNovoArquivado
Enviando nota-marco.pdf
Armazenamento64,2 de 100 GB
CPERLFMS+3
Como foi sua estadia?
Copiar
Ctrl+C
Colar
Ctrl+V
Buscar em todos os arquivos
Ctrl+Shift+F
Manutenção no domingo
O login fica fora do ar de 2h00 às 2h15 (horário de Brasília) em 02/11. Seus dados não são afetados.
outubro de 2026
| dom. | seg. | ter. | qua. | qui. | sex. | sáb. |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Loja Acme
Loja virtual · criada em 02/03/2025
Aparece nas notas fiscais e nos e-mails para clientes.
Finalizar compra3 itens · R$ 274,00
- Carrinho
- Entrega
- Pagamento
- Revisão
| Fatura | Situação | Valor |
|---|---|---|
| INV-4029 | Paga | R$ 1.740,00 |
| INV-4028 | Pendente | R$ 6.402,50 |
| INV-4027 | Vencida | R$ 375,00 |
Pedido feito
Pedido nº 48920, 3 itens, R$ 214,90.
Pagamento aprovado
Pix recebido.
Entregue
Recebido pela portaria.
Ver todas as páginas de componente em Material →
Tokens
Os valores que este estilo define, lidos de material.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.
Tipografia
--cml-font-body"Roboto Flex", Roboto, system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-size1rem0.9375rem
--cml-font-weight-control500500
--cml-font-weight-display400600
Cor
--cml-surfacelight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #ffffff), color-mix(in oklab, var(--cml-brand-600) 4%, #101010))light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-surface-low)light-dark(#ffffff, #18181b)
--cml-fglight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #191919), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #5e5e5e), color-mix(in oklab, var(--cml-brand-600) 4%, #aeaeae))light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-outline-variant)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #777777), color-mix(in oklab, var(--cml-brand-600) 4%, #929292))light-dark(#8e8e98, #71717a)
--cml-accentlight-dark(var(--cml-brand-600), var(--cml-brand-300))light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fglight-dark(var(--cml-brand-600-fg), var(--cml-brand-300-fg))light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringherdavar(--cml-accent-text)
--cml-dangerlight-dark(#ba1a1a, #ffb4ab)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-controlvar(--cml-radius-pill) = 999px8px
--cml-radius-surface12px12px
--cml-radius-popover4px10px
--cml-shadow-controlherdanone
--cml-shadow-surfacevar(--cml-e3)0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Densidade
--cml-control-height2.5rem2.25rem
--cml-field-height3.5rem2.375rem
--cml-surface-padding1.5rem1.5rem
--cml-gap0.5rem0.5rem
Movimento
--cml-duration-fast200ms180ms
--cml-duration-base300ms280ms
--cml-ease-standardcubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px0px
Todas as 320 propriedades que este estilo define
- --cml-surface-lowest
- light-dark(#ffffff, color-mix(in oklab, var(--cml-brand-600) 4%, #0b0b0b))
- --cml-surface-low
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #fafafa), color-mix(in oklab, var(--cml-brand-600) 4%, #191919))
- --cml-surface-container
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #f3f3f3), color-mix(in oklab, var(--cml-brand-600) 4%, #1d1d1d))
- --cml-surface-high
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #eeeeee), color-mix(in oklab, var(--cml-brand-600) 4%, #272727))
- --cml-surface-highest
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8), color-mix(in oklab, var(--cml-brand-600) 4%, #333333))
- --cml-outline-variant
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca), color-mix(in oklab, var(--cml-brand-600) 4%, #454545))
- --cml-secondary
- light-dark(color-mix(in oklab, var(--cml-brand-200) 50%, #e5e5e5), color-mix(in oklab, var(--cml-brand-800) 50%, #333333))
- --cml-on-secondary
- light-dark(color-mix(in oklab, var(--cml-brand-900) 50%, #1a1a1a), color-mix(in oklab, var(--cml-brand-100) 50%, #e8e8e8))
- --cml-inverse
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #2e2e2e), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))
- --cml-inverse-fg
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #f4f4f4), color-mix(in oklab, var(--cml-brand-600) 4%, #2e2e2e))
- --cml-inverse-secondary
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca), color-mix(in oklab, var(--cml-brand-600) 4%, #454545))
- --cml-inverse-primary
- light-dark(var(--cml-brand-300), var(--cml-brand-700))
- --cml-layer
- var(--cml-surface)
- --cml-shadow-tint
- light-dark(rgb(25 28 32 / 0.16), rgb(0 0 0 / 0.5))
- --cml-shadow-tint-soft
- light-dark(rgb(25 28 32 / 0.08), rgb(0 0 0 / 0.3))
- --cml-e1
- 0 1px 2px var(--cml-shadow-tint), 0 1px 3px 1px var(--cml-shadow-tint-soft)
- --cml-e2
- 0 1px 2px var(--cml-shadow-tint), 0 2px 6px 2px var(--cml-shadow-tint-soft)
- --cml-e3
- 0 1px 3px var(--cml-shadow-tint), 0 4px 8px 3px var(--cml-shadow-tint-soft)
- --cml-ease-emphasized-in
- cubic-bezier(0.05, 0.7, 0.1, 1)
- --cml-ease-emphasized-out
- cubic-bezier(0.3, 0, 0.8, 0.15)
- --cml-font-body
- "Roboto Flex", Roboto, system-ui, sans-serif
- --cml-font-size
- 1rem
- --cml-font-size-control
- 0.875rem
- --cml-font-size-control-sm
- 0.875rem
- --cml-font-size-control-lg
- 1rem
- --cml-font-size-field
- 1rem
- --cml-font-size-label
- 0.75rem
- --cml-font-size-help
- 0.75rem
- --cml-font-weight-control
- 500
- --cml-font-weight-label
- 400
- --cml-font-weight-display
- 400
- --cml-letter-spacing-control
- 0.1px
- --cml-letter-spacing-label
- 0.4px
- --cml-surface
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #ffffff), color-mix(in oklab, var(--cml-brand-600) 4%, #101010))
- --cml-surface-raised
- var(--cml-surface-low)
- --cml-fg
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #191919), color-mix(in oklab, var(--cml-brand-600) 4%, #e8e8e8))
- --cml-fg-secondary
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #454545), color-mix(in oklab, var(--cml-brand-600) 4%, #cacaca))
- --cml-fg-muted
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #5e5e5e), color-mix(in oklab, var(--cml-brand-600) 4%, #aeaeae))
- --cml-border
- var(--cml-outline-variant)
- --cml-border-control
- light-dark(color-mix(in oklab, var(--cml-brand-600) 4%, #777777), color-mix(in oklab, var(--cml-brand-600) 4%, #929292))
- --cml-accent
- light-dark(var(--cml-brand-600), var(--cml-brand-300))
- --cml-accent-fg
- light-dark(var(--cml-brand-600-fg), var(--cml-brand-300-fg))
- --cml-accent-hover
- light-dark(var(--cml-brand-600-hover), var(--cml-brand-300-hover))
- --cml-accent-text
- light-dark(var(--cml-brand-700), var(--cml-brand-300))
- --cml-backdrop
- rgb(0 0 0 / 0.32)
- --cml-danger
- light-dark(#ba1a1a, #ffb4ab)
- --cml-danger-fg
- light-dark(#ffffff, #690005)
- --cml-success
- light-dark(#146c2e, #7bd88f)
- --cml-warning
- light-dark(#7c5800, #f5bd5c)
- --cml-item-highlight
- color-mix(in oklab, var(--cml-fg) 8%, transparent)
- --cml-disabled-opacity
- 0.38
- --cml-radius-control
- var(--cml-radius-pill)
- --cml-radius-control-sm
- var(--cml-radius-pill)
- --cml-radius-control-lg
- var(--cml-radius-pill)
- --cml-radius-surface
- 12px
- --cml-radius-popover
- 4px
- --cml-radius-check
- 2px
- --cml-radius-field
- 4px
- --cml-radius-item
- 0
- --cml-shadow-surface
- var(--cml-e3)
- --cml-shadow-popover
- var(--cml-e2)
- --cml-focus-width
- 3px
- --cml-focus-offset
- 2px
- --cml-control-height
- 2.5rem
- --cml-control-height-sm
- 2rem
- --cml-control-height-lg
- 3.5rem
- --cml-control-padding
- 1.5rem
- --cml-control-padding-sm
- 0.75rem
- --cml-control-padding-lg
- 1.5rem
- --cml-surface-padding
- 1.5rem
- --cml-gap
- 0.5rem
- --cml-button-solid-shadow
- none
- --cml-button-danger-shadow
- none
- --cml-button-outline-bg
- transparent
- --cml-button-outline-border
- var(--cml-border-control)
- --cml-button-outline-shadow
- none
- --cml-button-ghost-fg
- var(--cml-accent-text)
- --cml-toggle-pressed-bg
- var(--cml-accent)
- --cml-toggle-pressed-fg
- var(--cml-accent-fg)
- --cml-toggle-pressed-shadow
- none
- --cml-field-height
- 3.5rem
- --cml-field-padding
- 1rem
- --cml-field-bg
- transparent
- --cml-field-shadow
- 0 0 0 0 transparent
- --cml-field-focus-halo
- inset 0 0 0 1px var(--cml-focus-ring)
- --cml-field-gap
- 0.25rem
- --cml-check-size
- 1.125rem
- --cml-check-border-width
- 2px
- --cml-switch-width
- 3.25rem
- --cml-switch-height
- 2rem
- --cml-switch-border
- 2px
- --cml-switch-pad
- 2px
- --cml-switch-knob
- 16px
- --cml-switch-knob-on
- 24px
- --cml-switch-track
- var(--cml-surface-highest)
- --cml-switch-knob-bg
- var(--cml-border-control)
- --cml-switch-knob-on-bg
- var(--cml-accent-fg)
- --cml-slider-track-h
- 16px
- --cml-slider-track
- var(--cml-secondary)
- --cml-slider-thumb-w
- 4px
- --cml-slider-thumb-h
- 44px
- --cml-slider-thumb-bg
- var(--cml-accent)
- --cml-slider-thumb-border
- 0 solid transparent
- --cml-slider-thumb-shadow
- 0 0 0 6px var(--cml-layer)
- --cml-number-weight
- 400
- --cml-number-btn-size
- 3rem
- --cml-number-btn-bg
- transparent
- --cml-number-divider
- 0
- --cml-popover-bg
- var(--cml-surface-container)
- --cml-popover-border-width
- 0
- --cml-popover-padding
- 8px 0
- --cml-item-height
- 3rem
- --cml-item-padding
- 1rem
- --cml-item-check
- var(--cml-on-secondary)
- --cml-dialog-border
- transparent
- --cml-tabs-gap
- 0
- --cml-tabs-list-border
- var(--cml-outline-variant)
- --cml-tab-active-fg
- var(--cml-accent-text)
- --cml-tab-active-shadow
- none
- --cml-card-shadow
- var(--cml-e1)
- --cml-card-border
- transparent
- --cml-avatar-bg
- var(--cml-surface-highest)
- --cml-avatar-fg
- var(--cml-fg-secondary)
- --cml-avatar-ring
- var(--cml-layer)
- --cml-skeleton
- var(--cml-surface-highest)
- --cml-tooltip-bg
- var(--cml-inverse)
- --cml-tooltip-fg
- var(--cml-inverse-fg)
- --cml-scrollbar-size
- 8px
- --cml-scrollbar-track
- transparent
- --cml-scrollbar-thumb
- color-mix(in oklab, var(--cml-fg-secondary) 55%, transparent)
- --cml-scrollbar-idle-opacity
- 0.6
- --cml-duration-fast
- 200ms
- --cml-duration-base
- 300ms
- --cml-ease-standard
- cubic-bezier(0.2, 0, 0, 1)
- --cml-motion-distance
- 12px
- --cml-motion-scale
- 0.94
- --cml-press-translate
- 0px
- --cml-info-container
- light-dark(var(--cml-brand-100), color-mix(in oklab, var(--cml-brand-800) 60%, #262626))
- --cml-on-info-container
- light-dark(var(--cml-brand-900), var(--cml-brand-100))
- --cml-success-container
- light-dark(#c4eed0, #1f4a2c)
- --cml-on-success-container
- light-dark(#0a3a1e, #c4eed0)
- --cml-warning-container
- light-dark(#ffdfb0, #523b12)
- --cml-on-warning-container
- light-dark(#4f2f00, #ffdfb0)
- --cml-danger-container
- light-dark(#ffdad6, #6e1d19)
- --cml-on-danger-container
- light-dark(#73100c, #ffdad6)
- --cml-tertiary-container
- light-dark(#ffdcbe, #5a3a1c)
- --cml-on-tertiary-container
- light-dark(#5c2c00, #ffdcbe)
- --cml-input-addon-bg
- transparent
- --cml-input-addon-fg
- var(--cml-fg-secondary)
- --cml-input-addon-divider
- 0
- --cml-input-button-on-bg
- var(--cml-secondary)
- --cml-otp-gap
- 0.5rem
- --cml-otp-cell-width
- 3rem
- --cml-otp-cell-height
- 3.5rem
- --cml-otp-cell-radius
- 4px
- --cml-otp-font-size
- 1.5rem
- --cml-otp-font-weight
- 400
- --cml-otp-separator
- var(--cml-border-control)
- --cml-tag-height
- 2rem
- --cml-tag-bg
- transparent
- --cml-tag-fg
- var(--cml-fg-secondary)
- --cml-tag-border
- 1px solid var(--cml-border-control)
- --cml-tag-radius
- 8px
- --cml-tag-font-size
- 0.875rem
- --cml-tag-font-weight
- 500
- --cml-tag-letter-spacing
- 0.1px
- --cml-dropzone-bg
- var(--cml-surface-container)
- --cml-dropzone-border
- 2px dashed var(--cml-border-control)
- --cml-dropzone-radius
- 12px
- --cml-dropzone-shadow
- none
- --cml-dropzone-active-bg
- color-mix(in oklab, var(--cml-accent-text) 8%, var(--cml-surface-container))
- --cml-dropzone-icon-bg
- var(--cml-info-container)
- --cml-dropzone-icon-fg
- var(--cml-on-info-container)
- --cml-dropzone-icon-border
- 0 solid transparent
- --cml-dropzone-icon-shadow
- none
- --cml-file-item-bg
- var(--cml-surface-container)
- --cml-file-item-border
- 0 solid transparent
- --cml-file-item-radius
- 12px
- --cml-file-item-shadow
- none
- --cml-file-icon-bg
- var(--cml-secondary)
- --cml-file-icon-fg
- var(--cml-on-secondary)
- --cml-file-icon-radius
- var(--cml-radius-pill)
- --cml-star-size
- 1.75rem
- --cml-star-color
- var(--cml-accent)
- --cml-star-empty
- var(--cml-border-control)
- --cml-star-on-bg
- var(--cml-secondary)
- --cml-chip-height
- 2rem
- --cml-chip-radius
- 8px
- --cml-chip-bg
- transparent
- --cml-chip-fg
- var(--cml-fg-secondary)
- --cml-chip-border
- 1px solid var(--cml-border-control)
- --cml-chip-shadow
- none
- --cml-chip-font-size
- 0.875rem
- --cml-chip-letter-spacing
- 0.1px
- --cml-chip-on-bg
- var(--cml-secondary)
- --cml-chip-on-fg
- var(--cml-on-secondary)
- --cml-chip-on-border
- 1px solid transparent
- --cml-chip-on-shadow
- none
- --cml-chip-on-translate
- none
- --cml-calendar-width
- 20rem
- --cml-calendar-padding
- 1rem
- --cml-calendar-bg
- var(--cml-surface-high)
- --cml-calendar-border
- 0 solid transparent
- --cml-calendar-radius
- 28px
- --cml-calendar-shadow
- var(--cml-e1)
- --cml-calendar-title-size
- 0.9375rem
- --cml-calendar-title-weight
- 500
- --cml-calendar-title-tracking
- 0.1px
- --cml-calendar-nav-size
- 2.25rem
- --cml-calendar-nav-radius
- var(--cml-radius-pill)
- --cml-calendar-nav-bg
- transparent
- --cml-calendar-nav-border
- 1px solid var(--cml-border-control)
- --cml-calendar-header-size
- 0.75rem
- --cml-calendar-header-weight
- 500
- --cml-calendar-header-tracking
- 0.4px
- --cml-calendar-cell-size
- 2.375rem
- --cml-calendar-cell-radius
- var(--cml-radius-pill)
- --cml-calendar-cell-size-font
- 0.875rem
- --cml-calendar-cell-weight
- 400
- --cml-calendar-today-border
- 1px solid var(--cml-accent-text)
- --cml-calendar-today-fg
- var(--cml-accent-text)
- --cml-calendar-selected-bg
- var(--cml-accent)
- --cml-calendar-selected-fg
- var(--cml-accent-fg)
- --cml-calendar-range-bg
- var(--cml-secondary)
- --cml-calendar-range-fg
- var(--cml-on-secondary)
- --cml-segment-radius
- 4px
- --cml-segment-focus-bg
- var(--cml-secondary)
- --cml-segment-focus-fg
- var(--cml-on-secondary)
- --cml-stat-bg
- var(--cml-surface-lowest)
- --cml-stat-border
- var(--cml-outline-variant)
- --cml-stat-radius
- 16px
- --cml-stat-shadow
- var(--cml-e1)
- --cml-stat-value-weight
- 500
- --cml-table-head-bg
- var(--cml-surface-container)
- --cml-table-row-selected-bg
- var(--cml-secondary)
- --cml-table-row-selected-fg
- var(--cml-on-secondary)
- --cml-table-footer-bg
- var(--cml-surface-container)
- --cml-data-list-term-bg
- var(--cml-surface-container)
- --cml-ring-track
- var(--cml-surface-highest)
- --cml-meter-bg
- var(--cml-surface-container)
- --cml-tree-row-radius
- var(--cml-radius-pill)
- --cml-tree-selected-bg
- var(--cml-secondary)
- --cml-tree-selected-fg
- var(--cml-on-secondary)
- --cml-tree-selected-border
- 1px solid var(--cml-border-control)
- --cml-code-bg
- #1d1b20
- --cml-code-fg
- #f5eff7
- --cml-code-header-bg
- #2b2930
- --cml-code-header-fg
- #e6e0e9
- --cml-code-header-border
- #49454f
- --cml-code-border
- var(--cml-border-control)
- --cml-code-radius
- 16px
- --cml-code-shadow
- var(--cml-e1)
- --cml-carousel-slide-bg
- var(--cml-surface-container)
- --cml-carousel-slide-border
- var(--cml-outline-variant)
- --cml-carousel-slide-radius
- 12px
- --cml-app-shell-bg
- var(--cml-surface-lowest)
- --cml-app-shell-header-bg
- var(--cml-surface-container)
- --cml-app-shell-header-border
- 1px solid var(--cml-outline-variant)
- --cml-sidebar-bg
- var(--cml-surface-container-low)
- --cml-sidebar-border
- 1px solid var(--cml-outline-variant)
- --cml-sidebar-brand-border
- 1px solid var(--cml-outline-variant)
- --cml-sidebar-footer-border
- 1px solid var(--cml-outline-variant)
- --cml-sidebar-item-radius
- var(--cml-radius-pill)
- --cml-sidebar-item-active-bg
- var(--cml-secondary-container)
- --cml-sidebar-item-active-fg
- var(--cml-on-secondary-container)
- --cml-sidebar-indicator-bg
- var(--cml-primary)
- --cml-sidebar-indicator-width
- 3px
- --cml-nav-popup-bg
- var(--cml-surface-high)
- --cml-nav-popup-border
- 0
- --cml-nav-popup-radius
- 20px
- --cml-nav-item-radius
- var(--cml-radius-pill)
- --cml-nav-trigger-open-bg
- var(--cml-surface-container-highest)
- --cml-menubar-bg
- var(--cml-surface-container)
- --cml-menubar-border
- 1px solid var(--cml-outline-variant)
- --cml-menubar-radius
- var(--cml-radius-pill)
- --cml-menubar-shadow
- var(--cml-e1)
- --cml-menubar-active-bg
- var(--cml-secondary-container)
- --cml-menubar-active-fg
- var(--cml-on-secondary-container)
- --cml-menubar-trigger-radius
- var(--cml-radius-pill)
- --cml-toolbar-bg
- var(--cml-surface-container)
- --cml-toolbar-border
- 1px solid var(--cml-outline-variant)
- --cml-toolbar-radius
- var(--cml-radius-pill)
- --cml-toolbar-shadow
- var(--cml-e1)
- --cml-toolbar-btn-radius
- var(--cml-radius-pill)
- --cml-toolbar-toggle-active-bg
- var(--cml-secondary-container)
- --cml-toolbar-toggle-active-border
- 1px solid var(--cml-outline-variant)
- --cml-toolbar-toggle-active-fg
- var(--cml-on-secondary-container)
- --cml-stepper-line
- 2px solid var(--cml-outline-variant)
- --cml-stepper-completed-line
- 2px solid var(--cml-primary)
- --cml-stepper-completed-bg
- var(--cml-primary)
- --cml-stepper-completed-fg
- var(--cml-on-primary)
- --cml-stepper-completed-border
- 0
- --cml-stepper-current-bg
- var(--cml-secondary-container)
- --cml-stepper-current-fg
- var(--cml-on-secondary-container)
- --cml-stepper-current-border
- 2px solid var(--cml-primary)
- --cml-stepper-error-bg
- var(--cml-danger)
- --cml-stepper-error-fg
- var(--cml-danger-fg)
- --cml-stepper-error-border
- 0
- --cml-step-indicator-radius
- var(--cml-radius-pill)
- --cml-step-indicator-bg
- var(--cml-surface-container-highest)
- --cml-step-indicator-fg
- var(--cml-on-surface-variant)
- --cml-step-indicator-border
- 1px solid var(--cml-outline-variant)
- --cml-cmd-bg
- var(--cml-surface-high)
- --cml-cmd-border
- 0
- --cml-cmd-radius
- 28px
- --cml-cmd-header-border
- 1px solid var(--cml-outline-variant)
- --cml-cmd-footer-border
- 1px solid var(--cml-outline-variant)
- --cml-cmd-active-bg
- var(--cml-secondary-container)
- --cml-cmd-active-fg
- var(--cml-on-secondary-container)
- --cml-hover-card-bg
- var(--cml-surface-high)
- --cml-hover-card-border
- 0
- --cml-hover-card-radius
- 16px
- --cml-toggletip-bg
- var(--cml-surface-high)
- --cml-toggletip-border
- 0
- --cml-toggletip-radius
- 12px
- --cml-splitter-border
- 1px solid var(--cml-outline-variant)
- --cml-splitter-handle-bg
- var(--cml-surface-container)
- --cml-splitter-radius
- var(--cml-radius-surface)
- --cml-splitter-active-bg
- var(--cml-secondary-container)
- --cml-splitter-grip
- var(--cml-primary)
Mesma família
Outros estilos da família Plataforma. Comparar lado a lado →
ProgressiveUm visual neutro de app instalável, quente e moderno, sem copiar nenhuma plataforma.CupertinoInspirado nas Human Interface Guidelines da Apple: fios finos, listas agrupadas e cantos contínuos.
Esta página foi útil? · Editar esta página no GitHub