@abrasileirado/dsgovbr-bootstraped 0.1.0

package/src/scss/_bootstrap-settings.scss

@@ -0,0 +1,142 @@
+// Sobrescritas de variáveis Sass do Bootstrap, a partir dos tokens em
+// _tokens.scss. Precisam ser definidas ANTES do @import do Bootstrap em
+// index.scss (build autônoma — DP-02 de docs/requisitos.md). Todas as
+// variáveis do Bootstrap usam `!default`, então só são sobrescritas aqui as
+// que definimos explicitamente abaixo.
+
+@import "tokens";
+
+// --- Cores de tema ---
+$primary: $govbr-interactive;
+$success: $govbr-success;
+$info: $govbr-info;
+$warning: $govbr-warning;
+$danger: $govbr-danger;
+$light: $govbr-gray-5;
+$dark: $govbr-gray-90;
+
+$body-color: $govbr-gray-80;
+$body-bg: $govbr-background;
+$border-color: $govbr-gray-20;
+
+// --- Tipografia ---
+// $govbr-font-family já é a lista completa ("Rawline", "Raleway", sans-serif)
+// terminando num fallback genérico — não concatenar com mais fontes aqui:
+// isso aninharia a lista (viraria `("Rawline", ...), Arial, ...` no CSS
+// final) em vez de uma pilha de fontes plana.
+$font-family-base: $govbr-font-family;
+
+// DP-10: o font-size base do GOV.BR DS (14px) é aplicado apenas à
+// tipografia ($font-size-base), não ao elemento raiz ($font-size-root
+// permanece no padrão do navegador). O próprio GOV.BR DS trata espaçamento
+// (spacer 8px) como uma escala independente do tamanho de fonte — replicamos
+// essa mesma separação aqui. Por isso o padding/margem do Bootstrap em rem
+// (relativos à raiz, não ao font-size-base) NÃO são reescalados por esta
+// mudança; apenas texto, headings, lead e o tamanho de fonte de inputs/botões
+// (que derivam de $font-size-base) diminuem proporcionalmente.
+//
+// 0.875rem = 14px, assumindo a raiz do navegador em 16px (não alterada).
+$font-size-base: 0.875rem;
+
+// --- Botão (RF-04) ---
+// Forma de pílula via variáveis (sem CSS adicional): GOV.BR DS usa
+// --button-radius: 100em em vendor/govbr-ds-core/.../button/_mixins.scss.
+//
+// Usamos o valor literal (não $border-radius-pill) porque estas sobrescritas
+// rodam ANTES do Bootstrap definir suas próprias variáveis — $border-radius-pill
+// ainda não existe neste ponto do build. `50rem` é o próprio valor padrão do
+// Bootstrap para $border-radius-pill (vendor/bootstrap/scss/_variables.scss).
+$btn-border-radius: 50rem;
+$btn-border-radius-sm: 50rem;
+$btn-border-radius-lg: 50rem;
+
+$btn-font-weight: $govbr-font-weight-semibold;
+
+// Padding horizontal alinhado ao spacing-scale-3x do GOV.BR DS (24px) no
+// tamanho padrão; sm/lg escalam proporcionalmente pela própria convenção do
+// Bootstrap (o GOV.BR DS não varia o padding horizontal por tamanho).
+$btn-padding-x: 1.5rem; // 24px
+$btn-padding-x-sm: 1rem; // 16px
+$btn-padding-x-lg: 2rem; // 32px
+
+// Padding vertical ajustado para aproximar as alturas de referência do
+// GOV.BR DS (32/40/48px — ver _tokens.scss). É uma aproximação deliberada,
+// não paridade de pixel: a matriz de compatibilidade (docs/requisitos.md §6)
+// não exige identidade exata, só declarar a aproximação.
+$btn-padding-y: 0.5rem;     // ~40px de altura total (padrão)
+$btn-padding-y-sm: 0.375rem; // ~32px de altura total
+$btn-padding-y-lg: 0.625rem; // ~48px de altura total
+
+// Diferença conhecida e documentada (não replicada nesta issue): o GOV.BR DS
+// usa border: 0 por padrão e cor de foco dourada (--focus-color-light,
+// gold-vivid-40 #c2850c) com contorno tracejado; o Bootstrap mantém sua
+// borda padrão e o anel de foco (`$focus-ring-color`) segue $primary, não a
+// paleta de foco do GOV.BR DS. Ver ficha de fixture em tests/fixtures/btn.html.
+
+// --- Campos de texto (RF-05) ---
+// vendor/govbr-ds-core/src/components/input/_mixins.scss (input-tokens,
+// input-default, input-states). Alturas de referência: 32/40/48px — as
+// mesmas do botão (issue #3); por isso reaproveitamos o mesmo padding-y
+// calibrado ali, e o resultado é coerente (o próprio GOV.BR DS usa a mesma
+// escala de altura para os dois componentes).
+$input-color: $govbr-gray-80;             // --color-light
+$input-border-color: $govbr-gray-40;      // --border-color-alternative
+$input-font-weight: $govbr-font-weight-medium;
+
+$input-border-radius: $govbr-radius-sm;      // --surface-rounder-sm (4px)
+$input-border-radius-sm: $govbr-radius-sm;
+$input-border-radius-lg: $govbr-radius-sm;   // GOV.BR DS não varia o raio por tamanho
+
+$input-padding-x: 1rem;      // 16px = spacing-scale-2x
+$input-padding-y: 0.5rem;    // ~40px de altura total (padrão) — igual ao botão
+$input-padding-y-sm: 0.375rem; // ~32px
+$input-padding-y-lg: 0.625rem; // ~48px
+
+$form-label-font-weight: $govbr-font-weight-medium;
+
+// Diferença conhecida: o GOV.BR DS engrossa a borda (2px) nos estados de
+// validação (.success/.danger/.warning/.info); o Bootstrap só troca a cor
+// da borda em .is-valid/.is-invalid, mantendo a espessura padrão. Não
+// replicado nesta issue (exigiria CSS específico além de variáveis).
+
+// --- Checkbox e radio (RF-05) ---
+// vendor/govbr-ds-core/src/components/checkbox/_mixins.scss e
+// .../radio/_mixins.scss (checkbox-tokens, radio-tokens): ambos usam uma
+// caixa de 24px. $form-check-radio-border-radius (50%) já bate com o radio
+// do GOV.BR DS por padrão do Bootstrap — não precisa de override.
+$form-check-input-width: 24px;
+// $form-check-padding-start soma $form-check-input-width + .5em por padrão;
+// como .5em não é compatível em Sass com um $form-check-input-width em px,
+// sobrescrevemos o resultado final também: 24px (caixa) + 8px (espaçamento,
+// spacing-scale-base do GOV.BR DS) = 32px.
+$form-check-padding-start: 2rem;
+$form-check-input-border-radius: $govbr-radius-sm; // 4px (só a caixa do checkbox)
+$form-check-label-cursor: pointer;
+
+// Diferença conhecida: o GOV.BR DS desenha o "check" com bordas rotacionadas
+// via pseudo-elemento; mantemos o ícone SVG nativo do Bootstrap
+// ($form-check-input-checked-bg-image), só recolorido pelo $primary já
+// mapeado (issue #3) — aproximação visual, não replicação de anatomia.
+
+// --- Alertas (RF-06) ---
+// vendor/govbr-ds-core/src/components/message/_mixins.scss: sem borda, sem
+// raio de canto, fundo tingido por cor semântica (--{cor}-alternative). O
+// Bootstrap 5.3 já gera automaticamente fundo/texto/borda "subtle" por cor
+// de tema a partir de $success/$info/$warning/$danger (mapeados na issue
+// #3) — não precisamos redefinir cores aqui, só remover borda e raio.
+$alert-border-width: 0;
+$alert-border-radius: 0;
+
+// --- Cards (RF-06) ---
+// vendor/govbr-ds-core/src/components/card/_mixins.scss: sem borda, sombra
+// em vez de borda, cabeçalho/rodapé com o MESMO fundo do corpo (sem
+// "cap" diferenciado), padding = spacing-scale-2x (16px) = já é o padrão
+// do Bootstrap ($card-spacer-y/x = $spacer = 1rem), por isso não overamos.
+$card-border-width: 0;
+$card-border-radius: 0;
+$card-box-shadow: $govbr-shadow-sm;
+$card-cap-bg: transparent;
+// Valor literal (não $spacer): estas sobrescritas rodam antes do Bootstrap
+// definir suas variáveis (mesmo motivo do $btn-border-radius acima). 1rem é
+// o próprio valor padrão de $spacer no Bootstrap.
+$card-cap-padding-y: 1rem; // GOV.BR DS usa o spacer inteiro (16px), não a metade

package/src/scss/_tokens.scss

@@ -0,0 +1,78 @@
+// Tokens do GOV.BR DS mapeados para variáveis Sass do Bootstrap.
+//
+// Os valores abaixo são cópias literais, extraídas do submodule
+// vendor/govbr-ds-core (tag v3.7.0) — não são importados via @import/@use
+// porque os parciais de origem dependem de um conjunto próprio de mixins e
+// funções (family-blue, get-rgb, tokens()) que geram custom properties e
+// trariam risco de colisão de seletores com o Bootstrap (RNF-04). Cada valor
+// cita o arquivo de origem para rastreabilidade (RF-02). Revalidar estas
+// cópias sempre que a tag do submodule for atualizada (DP-09).
+
+// --- Cores semânticas ---
+// vendor/govbr-ds-core/src/partial/scss/_tokens.scss (bloco :root)
+
+// --interactive: var(--blue-warm-vivid-70)
+// vendor/govbr-ds-core/.../configs/colors/_blue-warm-vivid.scss
+$govbr-interactive: #1351b4;
+
+// --info: var(--blue-warm-vivid-60)
+$govbr-info: #155bcb;
+
+// --success: var(--green-cool-vivid-50)
+// vendor/govbr-ds-core/.../configs/colors/_green-cool-vivid.scss
+$govbr-success: #168821;
+
+// --warning: var(--yellow-vivid-20)
+// vendor/govbr-ds-core/.../configs/colors/_yellow-vivid.scss
+$govbr-warning: #ffcd07;
+
+// --danger: var(--red-vivid-50)
+// vendor/govbr-ds-core/.../configs/colors/_red-vivid.scss
+$govbr-danger: #e52207;
+
+// --- Neutros ---
+// vendor/govbr-ds-core/.../configs/colors/_gray.scss
+$govbr-gray-90: #1b1b1b; // tom mais escuro (usado como $dark)
+$govbr-gray-80: #333;    // --color-light (texto padrão)
+$govbr-gray-20: #ccc;    // --border-color
+$govbr-gray-5: #f0f0f0;  // fundo alternativo (usado como $light)
+
+// --background-light: var(--pure-0)
+// vendor/govbr-ds-core/.../configs/colors/_pure.scss
+$govbr-background: #fff;
+
+// --- Tipografia ---
+// vendor/govbr-ds-core/src/partial/scss/configs/_typography.scss
+$govbr-font-family: "Rawline", "Raleway", sans-serif;
+$govbr-font-size-base: 14px;    // DP-10 — ver nota em _bootstrap-settings.scss
+$govbr-font-weight-medium: 500;
+$govbr-font-weight-semibold: 600;
+
+// --- Neutro adicional (issue #4) ---
+// --border-color-alternative: var(--gray-40)
+// vendor/govbr-ds-core/.../configs/colors/_gray.scss
+$govbr-gray-40: #888;
+
+// --- Superfície (raio de borda) ---
+// vendor/govbr-ds-core/src/partial/scss/configs/_surface.scss ($rounder-sm)
+$govbr-radius-sm: 4px;
+
+// --- Sombra (issue #5: card) ---
+// vendor/govbr-ds-core/src/partial/scss/configs/_elevation.scss ($shadow-sm)
+// = offset-none(0) offset-sm(1px) blur-lg(6px), cor secondary-09 (#000) a 16%
+$govbr-shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.16);
+
+// --- Espaçamento ---
+// vendor/govbr-ds-core/src/partial/scss/configs/_spacing.scss ($spacer)
+// Não é remapeado nesta issue (ver matriz em docs/requisitos.md §6: Layout
+// mantém o Bootstrap); registrado aqui apenas para referência futura.
+$govbr-spacer: 8px;
+
+// --- Botão ---
+// vendor/govbr-ds-core/src/components/button/_mixins.scss
+// (button-tokens, button-default)
+$govbr-button-radius: 100em;         // --button-radius: pílula
+$govbr-button-height-small: 32px;    // --button-small
+$govbr-button-height-medium: 40px;   // --button-medium (padrão)
+$govbr-button-height-large: 48px;    // --button-large
+$govbr-button-padding-x: 24px;       // padding: 0 var(--spacing-scale-3x)

package/src/scss/components/_card.scss

@@ -0,0 +1,8 @@
+// Ajuste que as variáveis, sozinhas, não resolvem: o mixin box-shadow() do
+// Bootstrap só gera CSS quando $enable-shadows está ativo (padrão: false).
+// Ativar esse flag globalmente também afetaria botões e campos de texto
+// (que ganhariam sombras que o GOV.BR DS não usa nesses componentes), então
+// aplicamos a sombra do card diretamente, sem depender do flag.
+.card {
+  box-shadow: var(--bs-card-box-shadow);
+}

package/src/scss/index.scss

@@ -0,0 +1,18 @@
+// Ponto de entrada do dsgovbr-bootstraped.
+//
+// Build autônoma (DP-02 de docs/requisitos.md): recompila o Bootstrap a
+// partir do submodule vendorizado, com as variáveis Sass sobrescritas por
+// _bootstrap-settings.scss ANTES do @import do Bootstrap — caminho de
+// customização oficialmente documentado pelo próprio Bootstrap.
+//
+// O caminho de import usa @import (não @use/@forward) porque o próprio
+// Bootstrap 5.3.8 ainda importa seus parciais dessa forma internamente;
+// o contrato de Sass definitivo deste pacote é a decisão DP-04, ainda
+// pendente em docs/requisitos.md §12.2.
+
+@import "bootstrap-settings";
+@import "../../vendor/bootstrap/scss/bootstrap";
+
+// Ajustes que as variáveis de tema, sozinhas, não resolvem — um adaptador
+// por componente (ver docs/desenvolvimento.md).
+@import "components/card";