/* =========================================================================== * Tema "Jade" — re-tematização do dash com os tokens REAIS do Jade Design * System (stone-payments/jade-design-tokens, formato DTCG). Ativado por * . * * PARTE 1 — variáveis raiz (cores/fonte/radius). Como o dash é estilizado via * essas vars, troca o visual inteiro. * PARTE 2 — componentes (Patamar A): clona a aparência dos componentes do Jade * (botões, inputs, chips, segmented, tabelas) com os valores reais dos * tokens comp.* resolvidos (height size.large=40 / medium=32, radius * small=8, padding space.small=12 / medium=16, label Inter 600). * ===========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ===== PARTE 1 — tokens (paletas slate/green/red reais) ===== */ body.theme-jade { --green-vivid: hsla(151, 55%, 42%, 1); /* green-4 (brand) */ --green-500: hsla(151, 55%, 42%, 1); /* green-4 */ --green-700: hsla(151, 55%, 38%, 1); /* green-3 (brand-hover) */ --green-900: hsla(151, 55%, 14%, 1); /* green-1 (content-brand) */ --green-50: hsla(137, 47%, 97%, 1); /* green-11 (brand-subtle) */ --gray-900: hsla(210, 13%, 13%, 1); /* slate-1 */ --gray-700: hsla(222, 7%, 38%, 1); /* slate-2 */ --gray-600: hsla(222, 7%, 38%, 1); /* slate-2 (muted) */ --gray-400: hsla(231, 6%, 57%, 1); /* slate-4 */ --gray-300: hsla(233, 10%, 82%, 1); /* slate-6 (borda) */ --gray-200: hsla(240, 10%, 86%, 1); /* slate-7 (borda sutil) */ --gray-100: hsla(240, 10%, 92%, 1); /* slate-9 */ --gray-50: hsla(240, 11%, 95%, 1); /* slate-10 (fundo) */ --red-600: hsla(358, 75%, 53%, 1); /* red-3 */ --red-50: hsla(357, 90%, 96%, 1); /* red-10 */ --amber-800: hsla(23, 100%, 28%, 1); /* content-warning */ --amber-100: hsla(37, 100%, 50%, 0.16); /* warning-subtle */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Radius do Jade: medium(12) em superfícies, small(8) em controles. */ body.theme-jade .card, body.theme-jade .stage-card, body.theme-jade .modal, body.theme-jade .k-card, body.theme-jade .k-col, body.theme-jade .v-card-emerald, body.theme-jade .leads-modal { border-radius: 12px; } /* ===== PARTE 2 — componentes (Patamar A) ===== */ /* Botões — comp.button (height large=40 / medium=32, radius small=8, Inter 600) */ body.theme-jade .btn { height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease; } body.theme-jade .btn:active { transform: translateY(1px); } body.theme-jade .btn-sm { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; } /* Primário/solid = background-brand (green-4) + content-on-brand (branco) */ body.theme-jade .btn-primary { background: hsla(151,55%,42%,1); border-color: hsla(151,55%,42%,1); color: #fff; } body.theme-jade .btn-primary:hover { background: hsla(151,55%,38%,1); border-color: hsla(151,55%,38%,1); } /* Ghost = background-neutral-subtle + content.high */ body.theme-jade .btn-ghost { background: hsla(240,100%,10%,0.06); border-color: transparent; color: var(--gray-900); } body.theme-jade .btn-ghost:hover { background: hsla(240,100%,9%,0.09); } /* Negative */ body.theme-jade .btn.danger { color: hsla(358,75%,53%,1); border-color: hsla(358,70%,86%,1); background: transparent; } body.theme-jade .btn.danger:hover { background: hsla(357,90%,96%,1); } /* Inputs/selects — height large(40), radius small(8), borda slate-7, focus brand */ body.theme-jade input, body.theme-jade select, body.theme-jade .v-select, body.theme-jade textarea { height: 40px; border-radius: 8px; border: 1px solid hsla(240,10%,86%,1); background: #fff; color: var(--gray-900); font-family: inherit; } body.theme-jade textarea { height: auto; } body.theme-jade input:focus, body.theme-jade select:focus, body.theme-jade .v-select:focus, body.theme-jade textarea:focus { outline: 2px solid hsla(151,55%,42%,0.55); outline-offset: 1px; border-color: hsla(151,55%,42%,1); } /* Chips / pills / badges — pill radius + peso */ body.theme-jade .cell-pill, body.theme-jade .badge-pill, body.theme-jade .badge-status, body.theme-jade .k-badge, body.theme-jade .cnpj-flag { border-radius: 500px; font-weight: 600; } /* Segmented control (toggles de visão/tema) */ body.theme-jade .seg { border-radius: 8px; background: hsla(240,100%,10%,0.05); padding: 2px; gap: 2px; } body.theme-jade .seg-btn { border-radius: 6px; font-weight: 600; } body.theme-jade .seg-btn.active { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); } /* Tabelas — header sutil, linhas com hover, bordas slate */ body.theme-jade table thead th { background: hsla(240,11%,95%,1); color: var(--gray-700); border-bottom: 1px solid hsla(240,10%,86%,1); } body.theme-jade table tbody tr { border-bottom: 1px solid hsla(240,10%,92%,1); } body.theme-jade .k-list-row:hover, body.theme-jade tbody tr.clickable:hover { background: hsla(240,100%,10%,0.04); } /* Grade de import: o input/select de edição não deve herdar height 40px do Jade */ body.theme-jade .bcell-edit { height: auto; border-radius: 3px; }