@grupo-sancon/design

Identidade visual unificada do Grupo Sancon — paletas Vuetify, tokens CSS, overrides SASS e composable Vue 3 prontos pra reutilizar em qualquer aplicação interna.

Conteúdo

• 3 paletas oficiais: sancon, grupo_sancon, sancon_hub.
• Vuetify theme builder (buildVuetifyTheme()) — alimenta o createVuetify({ theme }).
• CSS custom properties (tokens.css) com todos os tokens semânticos (--sancon-primary, --sancon-sidebar-bg, --sancon-radius-card, etc.).
• SASS overrides do Vuetify (vuetify-overrides.scss) — aplica forma e tipografia padrão Sancon em todos os componentes nativos (v-btn, v-card, v-chip, v-text-field...).
• Composable Vue 3 (useAppTheme()) — leitura reativa da paleta + troca de tema persistente em localStorage.

Instalação

npm install @grupo-sancon/design

Sem token, sem .npmrc especial — pacote público no npm registry.

Pré-requisitos: Vue 3 + Vuetify 3 ou 4 + Vite.

Setup mínimo na app destino

1. Vuetify theme + CSS tokens

// src/plugins/vuetify.ts (ou onde você cria o Vuetify)
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { buildVuetifyTheme } from '@grupo-sancon/design';
import '@grupo-sancon/design/tokens.css';

export const vuetify = createVuetify({
  theme: buildVuetifyTheme(),  // default = 'sancon'
});

Pronto: a partir daqui, qualquer <v-btn color="primary">, <v-chip color="accent">, <v-app> background etc. assume as cores do Grupo Sancon.

2. SASS overrides (forma e tipografia)

Pra que <v-btn> não venha em CAIXA-ALTA e tenha raio 8px (entre outros), adicione no vite.config.ts:

import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      styles: {
        configFile: 'node_modules/@grupo-sancon/design/styles/vuetify-overrides.scss',
      },
    }),
  ],
});

Daí em diante, todo componente nativo do Vuetify já nasce com:

• Botões sem MAIÚSCULAS, peso 500, raio 8px
• Cards sem sombra, borda 1px, raio 12px
• Chips raio 6px
• Inputs raio 8px
• Dialogs raio 14px
• Tabelas com header bold

3. Composable (opcional — pra trocar de tema em runtime)

<script setup lang="ts">
import { useAppTheme } from '@grupo-sancon/design';

const { currentTheme, ext, allThemes, applyTheme } = useAppTheme();
</script>

<template>
  <select :value="currentTheme.id" @change="(e) => applyTheme(e.target.value)">
    <option v-for="t in allThemes" :key="t.id" :value="t.id">{{ t.name }}</option>
  </select>

  <!-- Tokens estendidos (sidebar, chat, etc.) — não cobertos pelo Vuetify -->
  <aside :style="{ background: ext.sidebarBg, color: ext.sidebarText }">
    Sidebar do tema atual
  </aside>
</template>

Tokens CSS disponíveis

Após importar @grupo-sancon/design/tokens.css, use em qualquer .vue/.css:

.minha-card {
  background: var(--sancon-surface);
  border: 1px solid var(--sancon-border);
  border-radius: var(--sancon-radius-card);
  padding: var(--sancon-pad-card);
  color: var(--sancon-text-strong);
}

.botao-acento {
  background: var(--sancon-accent);
  color: white;
  border-radius: var(--sancon-radius-button);
  font-weight: var(--sancon-font-weight-button);
}

Lista completa: ver styles/tokens.css.

Trocar a paleta padrão

import { buildVuetifyTheme } from '@grupo-sancon/design';

const vuetify = createVuetify({
  theme: buildVuetifyTheme({ defaultTheme: 'grupo_sancon' }),
});

Build local pra desenvolvimento

npm install
npm run build       # gera dist/
npm run watch       # rebuild em mudanças
npm run lint        # type-check

Publicar (Grupo Sancon)

1. Suba o repo pro GitHub da org Sancon.
2. Configure GITHUB_TOKEN com permissão write:packages (ou use Actions).
3. npm version patch|minor|major e npm publish.

Ver package.json > publishConfig — já está apontando pro npm.pkg.github.com.

Roadmap (fase 2)

Quando consolidar, separar:

• @grupo-sancon/ui — componentes Vue 3 reutilizáveis (PromptEditor, KPI cards, BadgeUser, layouts de página, modal de confirmação genérico…).
• @grupo-sancon/icons — sprite com ícones próprios da marca.

Licença

Propriedade do Grupo Sancon. Uso restrito a aplicações internas.