Meta do trimestre
Glass
Camadas foscas e translúcidas sobre cor suave. Leve, arejado, um pouco luxuoso.
Glass
Camadas foscas e translúcidas sobre cor suave. Leve, arejado, um pouco luxuoso.
AaPlus Jakarta Sans
- Família
- Profundidade suave
- Fontes
- Plus Jakarta Sans
- Raio
- controles 12px · superfícies 20px
- Bordas e profundidade
- preenchimento fosco · borda de luz · desfoque
- Movimento
- 180 / 280ms
Como usar
import "@camaleo/styles/base.css";
import "@camaleo/styles/glass.css";
<StyleProvider styleName="glass">…</StyleProvider>
As fontes não vêm no pacote. O estilo pede Plus Jakarta Sans 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 { Plus_Jakarta_Sans } from "next/font/google";
const plusjakartasans = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-plusjakartasans" });
<html className={`${plusjakartasans.variable}`}>
Quando usar
Combina com
- Páginas de marketing, mídia e seções de destaque
- Dashboards e widgets que flutuam sobre imagens
- Superfícies pequenas, em que o fundo pode aparecer
Pense duas vezes
- Aparelhos modestos: o desfoque custa caro (fica opaco com transparência reduzida ou sem backdrop-filter)
- Formulários longos sobre fundos carregados
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 Glass
Componentes reais da biblioteca, em Glass, 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 Glass →
Tokens
Os valores que este estilo define, lidos de glass.css. Sobrescreva qualquer um deles num elemento pai para ajustar localmente.
Tipografia
--cml-font-body"Plus Jakarta Sans", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayherdavar(--cml-font-body)
--cml-font-sizeherda0.9375rem
--cml-font-weight-control600500
--cml-font-weight-display600600
Cor
--cml-surfacelight-dark(#eef1f8, #0a0f1e)light-dark(#ffffff, #09090b)
--cml-surface-raisedvar(--cml-glass-surface)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#0f172a, #f1f5f9)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#3f4c63, #a3afc4)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-glass-line)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#64748b, #8190a6)light-dark(#8e8e98, #71717a)
--cml-accentherdalight-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgherdalight-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textherdalight-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringherdavar(--cml-accent-text)
--cml-dangerlight-dark(#a51f16, #fc8f86)light-dark(#b42318, #f97066)
Forma e profundidade
--cml-border-widthherda1px
--cml-radius-control12px8px
--cml-radius-surface20px12px
--cml-radius-popover16px10px
--cml-shadow-controlherdanone
--cml-shadow-surfaceinset 0 1px 0 var(--cml-glass-hl), 0 24px 48px -20px light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.75))0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-widthherda2px
Densidade
--cml-control-height2.375rem2.25rem
--cml-field-height2.5rem2.375rem
--cml-surface-paddingherda1.5rem
--cml-gapherda0.5rem
Movimento
--cml-duration-fastherda180ms
--cml-duration-baseherda280ms
--cml-ease-standardherdacubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translateherda0px
Todas as 255 propriedades que este estilo define
- --cml-glass-surface
- light-dark(rgb(255 255 255 / 0.58), rgb(30 41 66 / 0.5))
- --cml-glass-surface-soft
- light-dark(rgb(255 255 255 / 0.5), rgb(30 41 66 / 0.42))
- --cml-glass-field
- light-dark(rgb(255 255 255 / 0.62), rgb(10 16 34 / 0.45))
- --cml-glass-float
- light-dark(rgb(255 255 255 / 0.74), rgb(26 34 58 / 0.92))
- --cml-glass-modal
- light-dark(rgb(255 255 255 / 0.86), rgb(26 34 58 / 0.9))
- --cml-glass-control
- light-dark(rgb(255 255 255 / 0.58), rgb(255 255 255 / 0.08))
- --cml-glass-control-hover
- light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.14))
- --cml-glass-track
- light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.05))
- --cml-glass-pill
- light-dark(rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.12))
- --cml-glass-rail
- light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08))
- --cml-glass-smoked
- light-dark(rgb(15 23 42 / 0.86), rgb(241 245 249 / 0.9))
- --cml-glass-smoked-fg
- light-dark(#f8fafc, #0f172a)
- --cml-glass-tint
- light-dark(rgb(255 255 255 / 0.78), rgb(30 41 66 / 0.55))
- --cml-glass-edge
- light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.12))
- --cml-glass-edge-float
- var(--cml-glass-edge)
- --cml-glass-edge-surface
- var(--cml-glass-edge)
- --cml-glass-hl
- light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.07))
- --cml-glass-line
- light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.1))
- --cml-glass-blur
- blur(20px) saturate(170%)
- --cml-glass-blur-field
- blur(14px) saturate(160%)
- --cml-glass-blur-control
- blur(16px) saturate(170%)
- --cml-glass-blur-float
- blur(24px) saturate(180%)
- --cml-glass-shadow-control
- inset 0 1px 0 var(--cml-glass-hl), 0 0 0 1px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.25)), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.5))
- --cml-glass-shadow-track
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.05)), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.45))
- --cml-glass-shadow-pill
- 0 1px 3px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(15 23 42 / 0.04), rgb(255 255 255 / 0.06))
- --cml-glass-shadow-surface
- inset 0 1px 0 var(--cml-glass-hl), 0 1px 2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.2)), 0 12px 32px -16px light-dark(rgb(15 23 42 / 0.22), rgb(0 0 0 / 0.6))
- --cml-glass-shadow-rail
- inset 0 1px 2px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.4)), 0 0 0 1px light-dark(rgb(100 116 139 / 0.3), rgb(148 163 184 / 0.25))
- --cml-glass-backdrop
- radial-gradient(ellipse 44% 40% at 6% 4%, light-dark(oklch(from var(--cml-brand) 0.88 min(c, 0.09) h), oklch(from var(--cml-brand) 0.3 min(c, 0.09) h)), transparent 70%), radial-gradient(ellipse 34% 36% at 96% 12%, light-dark(rgb(222 210 255), rgb(58 40 120)), transparent 70%), radial-gradient(ellipse 30% 30% at 34% 56%, light-dark(rgb(214 206 253 / 0.85), rgb(48 36 110 / 0.85)), transparent 70%), radial-gradient(ellipse 40% 38% at 74% 70%, light-dark(rgb(182 230 238), rgb(14 66 80)), transparent 70%), radial-gradient(ellipse 42% 36% at 10% 100%, light-dark(rgb(255 208 222), rgb(92 30 64)), transparent 70%), linear-gradient(160deg, light-dark(#f3f5fb, #0c1124), light-dark(#edf0f8, #080c1a))
- --cml-font-body
- "Plus Jakarta Sans", system-ui, sans-serif
- --cml-font-weight-control
- 600
- --cml-font-weight-label
- 600
- --cml-font-weight-display
- 600
- --cml-font-weight-error
- 600
- --cml-surface
- light-dark(#eef1f8, #0a0f1e)
- --cml-surface-raised
- var(--cml-glass-surface)
- --cml-fg
- light-dark(#0f172a, #f1f5f9)
- --cml-fg-secondary
- light-dark(#334155, #cbd5e1)
- --cml-fg-muted
- light-dark(#3f4c63, #a3afc4)
- --cml-border
- var(--cml-glass-line)
- --cml-border-control
- light-dark(#64748b, #8190a6)
- --cml-backdrop
- light-dark(rgb(30 41 82 / 0.3), rgb(2 6 23 / 0.55))
- --cml-item-highlight
- light-dark(rgb(15 23 42 / 0.07), rgb(255 255 255 / 0.09))
- --cml-success
- light-dark(#166534, #4ade80)
- --cml-danger
- light-dark(#a51f16, #fc8f86)
- --cml-info
- light-dark(#1d4ed8, #93c5fd)
- --cml-radius-control
- 12px
- --cml-radius-control-sm
- 10px
- --cml-radius-control-lg
- 14px
- --cml-radius-surface
- 20px
- --cml-radius-popover
- 16px
- --cml-radius-check
- 6px
- --cml-radius-item
- 10px
- --cml-shadow-surface
- inset 0 1px 0 var(--cml-glass-hl), 0 24px 48px -20px light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.75))
- --cml-shadow-popover
- inset 0 1px 0 var(--cml-glass-hl), 0 2px 6px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.2)), 0 20px 40px -18px light-dark(rgb(15 23 42 / 0.3), rgb(0 0 0 / 0.7))
- --cml-control-height
- 2.375rem
- --cml-control-height-sm
- 1.875rem
- --cml-control-height-lg
- 2.875rem
- --cml-control-padding
- 1rem
- --cml-control-padding-sm
- 0.75rem
- --cml-control-padding-lg
- 1.375rem
- --cml-button-solid-image
- linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(15 23 42 / 0.06))
- --cml-button-solid-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(15 23 42 / 0.12), 0 6px 16px -8px color-mix(in srgb, var(--cml-accent) 60%, transparent)
- --cml-button-danger-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 16px -8px color-mix(in srgb, var(--cml-danger) 60%, transparent)
- --cml-button-outline-bg
- var(--cml-glass-control)
- --cml-button-outline-border
- light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.14))
- --cml-button-outline-shadow
- var(--cml-glass-shadow-control)
- --cml-toggle-pressed-bg
- var(--cml-glass-smoked)
- --cml-toggle-pressed-fg
- var(--cml-glass-smoked-fg)
- --cml-toggle-pressed-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.16), 0 6px 14px -8px light-dark(rgb(15 23 42 / 0.4), rgb(0 0 0 / 0.5))
- --cml-field-height
- 2.5rem
- --cml-field-padding
- 0.875rem
- --cml-field-bg
- var(--cml-glass-field)
- --cml-field-shadow
- inset 0 1px 0 var(--cml-glass-hl), 0 1px 2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.2))
- --cml-field-focus-halo
- 0 0 0 0 transparent
- --cml-check-size
- 1.25rem
- --cml-check-border-width
- 1.5px
- --cml-check-shadow
- inset 0 1px 0 var(--cml-glass-hl)
- --cml-check-on-shadow
- inset 0 1px 0 rgb(255 255 255 / 0.25), 0 3px 8px -3px color-mix(in srgb, var(--cml-accent) 60%, transparent)
- --cml-switch-width
- 2.5rem
- --cml-switch-height
- 1.375rem
- --cml-switch-border
- 1.5px
- --cml-switch-pad
- 3px
- --cml-switch-knob
- 12px
- --cml-switch-knob-on
- 16px
- --cml-switch-track
- var(--cml-glass-field)
- --cml-switch-on-shadow
- inset 0 1px 2px rgb(15 23 42 / 0.2)
- --cml-switch-knob-on-shadow
- 0 1px 3px rgb(15 23 42 / 0.3)
- --cml-slider-track-h
- 6px
- --cml-slider-track
- var(--cml-glass-rail)
- --cml-slider-thumb-w
- 1.25rem
- --cml-slider-thumb-h
- 1.25rem
- --cml-slider-thumb-shadow
- 0 2px 6px rgb(15 23 42 / 0.2)
- --cml-number-weight
- 600
- --cml-number-btn-size
- 2.5rem
- --cml-number-btn-bg
- light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.05))
- --cml-number-divider
- 1px solid light-dark(rgb(100 116 139 / 0.35), rgb(148 163 184 / 0.25))
- --cml-popover-bg
- var(--cml-glass-float)
- --cml-popover-border
- var(--cml-glass-edge-float)
- --cml-popover-padding
- 6px
- --cml-dialog-border
- var(--cml-glass-edge-float)
- --cml-tabs-gap
- 2px
- --cml-tabs-list-bg
- var(--cml-glass-track)
- --cml-tabs-list-border
- var(--cml-glass-edge)
- --cml-tabs-list-shadow
- var(--cml-glass-shadow-track)
- --cml-tabs-list-padding
- 3px
- --cml-tabs-list-radius
- 14px
- --cml-tab-radius
- 10px
- --cml-tab-active-bg
- var(--cml-glass-pill)
- --cml-tab-active-shadow
- var(--cml-glass-shadow-pill)
- --cml-card-border
- var(--cml-glass-edge-surface)
- --cml-card-shadow
- var(--cml-glass-shadow-surface)
- --cml-avatar-bg
- color-mix(in oklab, var(--cml-accent) 12%, light-dark(rgb(255 255 255 / 0.6), rgb(10 16 34 / 0.6)))
- --cml-avatar-ring
- light-dark(rgb(255 255 255 / 0.9), rgb(15 22 42 / 0.9))
- --cml-skeleton
- light-dark(rgb(15 23 42 / 0.07), rgb(255 255 255 / 0.08))
- --cml-tooltip-bg
- var(--cml-glass-smoked)
- --cml-tooltip-fg
- var(--cml-glass-smoked-fg)
- --cml-scrollbar-size
- 10px
- --cml-scrollbar-track
- var(--cml-glass-track)
- --cml-scrollbar-track-shadow
- inset 0 0 0 1px var(--cml-glass-edge)
- --cml-scrollbar-thumb
- light-dark(rgb(100 116 139 / 0.7), rgb(203 213 225 / 0.45))
- --cml-scrollbar-idle-opacity
- 0.8
- --cml-input-addon-bg
- var(--cml-number-btn-bg)
- --cml-input-addon-divider
- var(--cml-number-divider)
- --cml-input-button-on-bg
- light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.1))
- --cml-otp-cell-height
- 3.125rem
- --cml-otp-font-weight
- 700
- --cml-otp-separator
- var(--cml-border-control)
- --cml-tag-height
- 1.75rem
- --cml-tag-bg
- var(--cml-glass-pill)
- --cml-tag-border
- 1px solid var(--cml-glass-edge)
- --cml-tag-radius
- 9px
- --cml-tag-font-weight
- 600
- --cml-dropzone-bg
- var(--cml-glass-track)
- --cml-dropzone-shadow
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.05))
- --cml-dropzone-active-bg
- color-mix(in oklab, var(--cml-accent-text) 8%, var(--cml-glass-tint))
- --cml-dropzone-icon-bg
- var(--cml-glass-control-hover)
- --cml-dropzone-icon-fg
- var(--cml-accent-text)
- --cml-dropzone-icon-border
- 1px solid var(--cml-button-outline-border)
- --cml-dropzone-icon-shadow
- var(--cml-glass-shadow-control)
- --cml-file-item-bg
- var(--cml-glass-surface)
- --cml-file-item-border
- 1px solid var(--cml-glass-edge-surface)
- --cml-file-item-radius
- 16px
- --cml-file-item-shadow
- var(--cml-glass-shadow-surface)
- --cml-file-icon-bg
- light-dark(rgb(15 23 42 / 0.06), rgb(255 255 255 / 0.07))
- --cml-file-icon-radius
- 10px
- --cml-chip-bg
- var(--cml-glass-control)
- --cml-chip-border
- 1px solid var(--cml-button-outline-border)
- --cml-chip-shadow
- var(--cml-glass-shadow-control)
- --cml-chip-on-bg
- color-mix(in oklab, var(--cml-accent-text) 14%, var(--cml-glass-tint))
- --cml-chip-on-border
- 1px solid color-mix(in oklab, var(--cml-accent-text) 45%, transparent)
- --cml-chip-on-shadow
- inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06)), 0 6px 14px -8px color-mix(in srgb, var(--cml-accent) 35%, transparent)
- --cml-calendar-bg
- var(--cml-glass-surface)
- --cml-calendar-border
- 1px solid var(--cml-glass-edge-surface)
- --cml-calendar-radius
- 20px
- --cml-calendar-shadow
- var(--cml-glass-shadow-surface)
- --cml-calendar-title-weight
- 700
- --cml-calendar-nav-radius
- 9px
- --cml-calendar-nav-bg
- var(--cml-glass-control)
- --cml-calendar-nav-border
- 1px solid var(--cml-button-outline-border)
- --cml-calendar-nav-shadow
- var(--cml-glass-shadow-control)
- --cml-calendar-header-weight
- 700
- --cml-calendar-cell-radius
- 9px
- --cml-calendar-cell-weight
- 600
- --cml-calendar-selected-border
- 1px solid rgb(255 255 255 / 0.22)
- --cml-calendar-selected-shadow
- var(--cml-button-solid-shadow)
- --cml-calendar-range-bg
- color-mix(in oklab, var(--cml-accent) 18%, var(--cml-glass-tint))
- --cml-calendar-range-fg
- var(--cml-fg)
- --cml-segment-radius
- 5px
- --cml-segment-focus-shadow
- 0 2px 6px -2px color-mix(in srgb, var(--cml-accent) 45%, transparent)
- --cml-stat-bg
- var(--cml-glass-surface)
- --cml-stat-border
- var(--cml-glass-edge-surface)
- --cml-stat-radius
- 18px
- --cml-stat-shadow
- var(--cml-glass-shadow-surface)
- --cml-stat-value-weight
- 700
- --cml-table-row-selected-bg
- color-mix(in oklab, var(--cml-accent-text) 12%, var(--cml-glass-tint))
- --cml-tree-row-radius
- 8px
- --cml-tree-selected-bg
- color-mix(in oklab, var(--cml-accent-text) 14%, var(--cml-glass-tint))
- --cml-tree-selected-border
- 1px solid color-mix(in oklab, var(--cml-accent-text) 45%, transparent)
- --cml-code-bg
- #0f172a
- --cml-code-fg
- #f8fafc
- --cml-code-header-bg
- #1e293b
- --cml-code-header-fg
- #e2e8f0
- --cml-code-header-border
- #334155
- --cml-code-border
- var(--cml-border-control)
- --cml-code-radius
- 18px
- --cml-code-shadow
- var(--cml-glass-shadow-surface)
- --cml-carousel-slide-bg
- var(--cml-glass-control)
- --cml-carousel-slide-border
- var(--cml-glass-edge)
- --cml-carousel-slide-radius
- 12px
- --cml-app-shell-bg
- var(--cml-surface)
- --cml-app-shell-header-bg
- var(--cml-glass-surface)
- --cml-app-shell-header-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-bg
- var(--cml-glass-surface)
- --cml-sidebar-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-brand-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-footer-border
- 1px solid var(--cml-glass-edge)
- --cml-sidebar-item-radius
- 10px
- --cml-sidebar-item-active-bg
- var(--cml-glass-tint)
- --cml-sidebar-item-active-fg
- var(--cml-fg)
- --cml-sidebar-indicator-bg
- var(--cml-accent-text)
- --cml-sidebar-indicator-width
- 3px
- --cml-nav-popup-bg
- var(--cml-glass-float)
- --cml-nav-popup-border
- 1px solid var(--cml-glass-edge-float)
- --cml-nav-popup-radius
- 18px
- --cml-nav-item-radius
- 10px
- --cml-nav-trigger-open-bg
- var(--cml-glass-control)
- --cml-menubar-bg
- var(--cml-glass-surface)
- --cml-menubar-border
- 1px solid var(--cml-glass-edge)
- --cml-menubar-radius
- 12px
- --cml-menubar-shadow
- var(--cml-glass-shadow-surface)
- --cml-menubar-active-bg
- var(--cml-glass-control)
- --cml-menubar-active-fg
- var(--cml-fg)
- --cml-menubar-trigger-radius
- 8px
- --cml-menubar-popup-bg
- var(--cml-glass-float)
- --cml-menubar-popup-border
- 1px solid var(--cml-glass-edge-float)
- --cml-context-menu-bg
- var(--cml-glass-float)
- --cml-context-menu-border
- 1px solid var(--cml-glass-edge-float)
- --cml-toolbar-bg
- var(--cml-glass-surface)
- --cml-toolbar-border
- 1px solid var(--cml-glass-edge)
- --cml-toolbar-radius
- 12px
- --cml-toolbar-shadow
- var(--cml-glass-shadow-surface)
- --cml-toolbar-btn-radius
- 8px
- --cml-toolbar-toggle-active-bg
- var(--cml-glass-control)
- --cml-toolbar-toggle-active-border
- 1px solid var(--cml-glass-edge)
- --cml-toolbar-toggle-active-fg
- var(--cml-fg)
- --cml-stepper-line
- 1px solid color-mix(in oklab, var(--cml-border-control) 60%, transparent)
- --cml-stepper-completed-line
- 2px solid var(--cml-accent)
- --cml-stepper-completed-bg
- var(--cml-accent)
- --cml-stepper-completed-fg
- var(--cml-accent-fg)
- --cml-stepper-completed-border
- 1px solid var(--cml-accent)
- --cml-stepper-current-bg
- var(--cml-glass-tint)
- --cml-stepper-current-fg
- var(--cml-accent-text)
- --cml-stepper-current-border
- 2px solid var(--cml-accent-text)
- --cml-step-indicator-radius
- var(--cml-radius-pill)
- --cml-step-indicator-bg
- var(--cml-glass-control)
- --cml-step-indicator-fg
- var(--cml-fg-secondary)
- --cml-step-indicator-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-bg
- var(--cml-glass-modal)
- --cml-cmd-border
- 1px solid var(--cml-glass-edge-float)
- --cml-cmd-radius
- 20px
- --cml-cmd-header-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-footer-border
- 1px solid var(--cml-glass-edge)
- --cml-cmd-active-bg
- var(--cml-glass-tint)
- --cml-cmd-active-fg
- var(--cml-fg)
- --cml-hover-card-bg
- var(--cml-glass-float)
- --cml-hover-card-border
- 1px solid var(--cml-glass-edge-float)
- --cml-hover-card-radius
- 16px
- --cml-toggletip-bg
- var(--cml-glass-float)
- --cml-toggletip-border
- 1px solid var(--cml-glass-edge-float)
- --cml-toggletip-radius
- 12px
- --cml-splitter-border
- 1px solid var(--cml-glass-edge)
- --cml-splitter-handle-bg
- var(--cml-glass-control)
- --cml-splitter-radius
- 8px
- --cml-splitter-active-bg
- var(--cml-glass-tint)
- --cml-splitter-grip
- var(--cml-accent-text)
Mesma família
Outros estilos da família Profundidade suave. Comparar lado a lado →
NeumorphismUma superfície moldada pela luz: em relevo para ações, afundada para campos.ClayFormas fofas em tons pastel, como se fossem de massinha. Simpático e tátil.
Esta página foi útil? · Editar esta página no GitHub