Foundations

Tokens visuais do admin Pedbot — extraídos de _variables.scss, tailwind.config.js e theme.js. Stack: Vue 2 · Vuesax 3 · Tailwind 1.x.

10

Seções

6

Paletas

Cores

Primária & Status (CSS Variables)

Gerenciadas via theme.js como RGB components. Uso: rgba(var(--vs-primary), 1)

Primary

#0491FF

VUE_APP_PRIMARY_COLOR · --vs-primary

botões, links, foco · via env var

Success

#28C76F

$success · --vs-success

sucesso, badges, toasts

Danger

#EA5455

$danger · --vs-danger

erros, alertas críticos

Warning

#FF9F43

$warning · --vs-warning

alertas, avisos

Dark

#1E1E1E

$dark · --vs-dark

UI escura, texto dark

Info

#00CFE8

(uso secundário)

informações, links

Neutras & Conteúdo

Content Color

#626262

$content-color

body text padrão

Headings Color

#2c2c2c

$headings-color

h1–h6 no light mode

Grey

#b8c2cc

$grey

bordas, ícones, placeholders

Grey Light

#dae1e7

$grey-light

bordas de inputs, separadores

Background

#f8f8f8

$theme-background

fundo geral da página

Black

#22292f

$black

texto muito escuro

Dark Theme

Aplicado via classe .dark-layout no body. Definido em _themeDark.scss.

Sidebar BG / Card

#10163a

$sidebar-dark-bg · $dark-card-color

Content BG

#262c49

$content-dark-bg

Secondary BG

#171e49

$theme-dark-secondary-bg

Text Color

#c2c6dc

$theme-dark-text-color

Heading Color

#ebeefd

$theme-dark-heading-color

Border Color

#414561

$theme-dark-border-color

Como usar as CSS Variables

/* theme.js injeta como RGB components (valor vem do .env) */
--vs-primary: 4,145,255;  /* #0491FF — Pedbot default (prod/dev/beta) */
/* Vuexy fallback (nunca usado em runtime no Pedbot): #7367F0 */

/* SCSS — sempre usar rgba() para suportar opacidade */
.btn-primary {
  background: rgba(var(--vs-primary), 1);       /* opaco */
  border: 1px solid rgba(var(--vs-primary), .5); /* 50% opacidade */
  color: rgba(var(--vs-primary), 0.12);          /* fundo sutil */
}

/* OU usar variáveis SCSS para contextos sem necessidade de opacidade */
.heading { color: $headings-color; }
.body    { color: $content-color; }
.border  { border-color: $grey-light; }

Tipografia

Família Principal

Montserrat

"Montserrat", Helvetica, Arial, sans-serif

Importada via Google Fonts. Pesos carregados: 300 · 400 · 500 · 600 · 700

Escala de Headings (base 14px)

h1 · 2rem

Pedbot Design System

28px · fw 500 · lh 1.2

h2 · 1.74rem

Pedbot Design System

24.36px · fw 500

h3 · 1.51rem

Pedbot Design System

21.14px · fw 500

h4 · 1.32rem

Pedbot Design System

18.48px · fw 500

h5 · 1.14rem

Pedbot Design System

15.96px · fw 500

h6 · 1rem

Pedbot Design System

14px · fw 500

Pesos Carregados

Light · 300

O rápido atalho de teclado facilita o fluxo de trabalho do dev.

font-weight: 300

Regular · 400

O rápido atalho de teclado facilita o fluxo de trabalho do dev.

font-weight: 400

Medium · 500

O rápido atalho de teclado facilita o fluxo de trabalho do dev.

font-weight: 500

Semibold · 600

O rápido atalho de teclado facilita o fluxo de trabalho do dev.

font-weight: 600

Bold · 700

O rápido atalho de teclado facilita o fluxo de trabalho do dev.

font-weight: 700

Escala Tailwind (text-*)

Classe	Valor rem	Valor px
`text-xs`	0.75rem	10.5px
`text-sm`	0.875rem	12.25px
`text-base`	1rem	14px
`text-lg`	1.125rem	15.75px
`text-xl`	1.25rem	17.5px
`text-2xl`	1.5rem	21px
`text-3xl`	1.875rem	26.25px
`text-4xl`	2.25rem	31.5px
`text-5xl`	3rem	42px
`text-6xl`	4rem	56px

Line Heights & Letter Spacing

Contexto	Valor
Body / parágrafo	1.45 (global)
HTML element	1.5
Headings	1.2
leading-none (Tailwind)	1
leading-tight (Tailwind)	1.25
leading-normal (Tailwind)	1.5
leading-loose (Tailwind)	2
Letter spacing global (html)	0.01rem
letterSpacing Tailwind	desabilitado no corePlugins

Spacing

SCSS Spacers

$spacer

2.2rem · ~30.8px · base unit

$spacer-sm

1.1rem · ~15.4px · $spacer / 2

$spacer-lg

4.4rem · ~61.6px · $spacer * 2

Escala Tailwind (p-* e m-*)

p-px / m-px

1px

p-1 / m-1

0.25rem · 3.5px

p-2 / m-2

0.5rem · 7px

p-3 / m-3

0.75rem · 10.5px

p-4 / m-4

1rem · 14px

p-5 / m-5

1.25rem · 17.5px

p-6 / m-6

1.5rem · 21px

p-8 / m-8

2rem · 28px

p-base / m-base

2.2rem · ~30.8px · igual $spacer

p-10 / m-10

2.5rem · 35px

p-12 / m-12

3rem · 42px

p-16 / m-16

4rem · 56px

Layout Spacing

Contexto	Valor
Sidebar largura reduzida	80px
Sidebar largura completa	260px
Router-view padding desktop	2.2rem (= $spacer)
Router-view padding mobile	1.2rem

Shadows

default

shadow

shadow-md

md

shadow-lg

lg

shadow-xl

xl

shadow-2xl

2xl

shadow-inner

inner

shadow-drop

custom ★

op-block

app-specific ★

★ = tokens customizados não existentes no Tailwind 1.x padrão

Border Radius

none

0

sm

.125rem · 1.75px

default

.25rem · 3.5px

lg

.5rem · 7px

op-block ★

10px (custom)

full

9999px

★ = token app-specific definido em _layoutCommon.scss

Breakpoints

Idênticos ao Bootstrap 4 / Vuexy padrão. Definidos em tailwind.config.js.

Nome	Min-width	Uso típico
`sm`	576px	Landscape mobile, tablet pequeno
`md`	768px	Tablet, início do layout 2-colunas
`lg`	992px	Desktop pequeno, sidebar completa
`xl`	1200px	Desktop, layout full

Sistema de Z-Index

Escala Tailwind (0–50) + camadas específicas do app. O maior valor documentado é 530001 (dialog Vuesax).

Escala Tailwind

z-0

0

Tailwind

z-10

10

Tailwind

z-20

20

Tailwind

z-30

30

Tailwind

z-40

40

Tailwind

z-50

50

Tailwind

Camadas App-Specific

content-overlay (hidden)

-1

_layoutCommon.scss

date-picker

401

extraComponents/_datePicker.scss

navbar-base

10,000

_theNavbar.scss

footer

40,000

_footer.scss

horizontal-nav-menu

41,000

_layoutHorizontal.scss

content-overlay (show) · navbar-sticky

41,001

_layoutCommon / _theNavbar

navbar-floating

41,002

_theNavbar.scss

navbar-search

50,000

_theNavbar.scss

sidebar-mobile · vertical-nav · context-menu · quill

51,000

sidebar / verticalNavMenu / extras

sidebar-full · vertical-nav-submenu

52,000

sidebar / verticalNavMenu

dropdown

55,000

pages/dropdown.scss

chat-attendance-floating

60,000

chat-attendance-new.scss

internal-chat

99,999

apps/internal-chat.scss

chat-attendance-overlay

100,000

chat-attendance-new.scss

chat-attendance-top

100,002

chat-attendance-new.scss

vuesax-fixes-tooltip

200,000

_fixesVuesax.scss

vuesax-fixes-dialog (máximo)

530,001

_fixesVuesax.scss

Transições

Definidas em _transitions.scss. Usadas via <transition name="zoom-fade"> no Vue 2.

Nome	Duração & Easing	Transform
`zoom-fade`	transform .35s, opacity .28s ease-in-out	scale(0.97) → scale(1.03)
`fade`	opacity .28s ease-in-out	—
`slide-fade`	opacity .35s, transform .4s	translateX(-30%) → +30%
`zoom-out`	opacity .35s ease-in-out, transform .45s ease-out	scale(0)
`fade-bottom`	opacity .3s, transform .35s	translateY(-8%) → +8%
`fade-bottom-2x`	opacity .2s, transform .25s	translateY(-4%) → +4%
`fade-top`	opacity .3s, transform .35s	translateY(8%) → -8%
`fade-top-2x`	opacity .2s, transform .25s	translateY(4%) → -4%
`list`	opacity, translateX(30px)	position: absolute (leave)
`list-enter-up`	opacity, translateY(30px)	transition: none no leave

Whitelabel Overrides

A cor primária do Pedbot é definida via VUE_APP_PRIMARY_COLOR no arquivo .env de cada ambiente. O loader inicial (CSS) e logo também são customizados por tenant.

Primary Color por Ambiente / Tenant

Arquivo .env	Tenant	VUE_APP_PRIMARY_COLOR	Preview
`.env.prod` / `.env.development`	Pedbot (default)	`#0491FF`
`.env.funcional`	Funcional	`#86CE31`
`.env.hekabot`	Hekabot	`#3AAEBD`
`.env.r-bot`	R-Bot	`#5CA032`

O .env padrão (local) tem #86CE31 como valor legado — usar .env.development para desenvolvimento correto.

Loader CSS + Logo por Tenant

Funcional

loader: #86CE31

logo: 771px wide

Hekabot

loader: #3aaebd

logo: 110px wide

R-Bot

loader: #a2d729

logo: 110px wide

Mobile — Paleta Pedbot App

Tema do app React Native (src/themes/pedbot.theme.ts). Usa NativeBase extendTheme().

Cores de Status (= Admin)

primary · #0491FF = admin ✓

success · #28C76F = admin

danger · #EA5455 = admin

warning · #FF9F43 = admin

✓ Admin e mobile usam a mesma cor primária (#0491FF) via VUE_APP_PRIMARY_COLOR

Escala Brand Blue (mobile)

default · #0491FF (primary)

default-light · #4A90E2

400 · #1A75FF

500 · #005CE6

Escala de azul extra usada em elementos específicos do app mobile.