@abrasileirado/dsgovbr-bootstraped 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abrasileirado/dsgovbr-bootstraped",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Camada de compatibilidade visual não oficial entre o Bootstrap 5 e o Design System GOV.BR (DSGovBR)",
   "license": "MIT",
   "author": "Kelson da Costa Medeiros",

package/src/scss/_bootstrap-settings.scss

@@ -66,6 +66,38 @@ $btn-padding-y: 0.5rem !default;     // ~40px de altura total (padrão)
 $btn-padding-y-sm: 0.375rem !default; // ~32px de altura total
 $btn-padding-y-lg: 0.625rem !default; // ~48px de altura total
 
+// Badge estático alinhado à tag padrão do GOV.BR DS (issue #36). As classes
+// utilitárias Bootstrap .text-bg-* continuam responsáveis pelas variantes.
+$badge-color: $govbr-background !default;
+$badge-font-size: $govbr-font-size-base !default;
+$badge-font-weight: $govbr-font-weight-medium !default;
+$badge-padding-x: 0.75rem !default; // spacing-scale-baseh = 12px
+$badge-padding-y: 0 !default;
+$badge-border-radius: $govbr-radius-sm !default;
+
+// Paginação estática GOV.BR DS (issue #37).
+$pagination-padding-y: 0 !default;
+$pagination-padding-x: 0.5rem !default;
+$pagination-color: $govbr-interactive !default;
+$pagination-bg: transparent !default;
+$pagination-border-width: 1px !default;
+$pagination-border-color: transparent !default;
+$pagination-border-radius: 50rem !default;
+$pagination-hover-color: $govbr-interactive !default;
+$pagination-hover-bg: transparent !default;
+$pagination-hover-border-color: transparent !default;
+$pagination-focus-color: $govbr-interactive !default;
+$pagination-focus-bg: transparent !default;
+$pagination-focus-box-shadow: none !default;
+$pagination-focus-outline: 4px dashed $govbr-focus !default;
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $govbr-active !default;
+$pagination-active-border-color: $govbr-active !default;
+$pagination-disabled-color: $govbr-gray-40 !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-border-color: transparent !default;
+$pagination-margin-start: 0 !default;
+
 // 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

package/src/scss/_tokens.scss

@@ -14,6 +14,12 @@
 // --interactive: var(--blue-warm-vivid-70)
 // vendor/govbr-ds-core/.../configs/colors/_blue-warm-vivid.scss
 $govbr-interactive: #1351b4 !default;
+// --active: var(--blue-warm-vivid-80)
+// vendor/govbr-ds-core/.../configs/colors/_blue-warm-vivid.scss
+$govbr-active: #0c326f !default;
+// --hover: var(--surface-opacity-xs) = 0.16
+// vendor/govbr-ds-core/.../configs/_states.scss + _elevation.scss
+$govbr-hover-opacity: 0.16 !default;
 
 // --info: var(--blue-warm-vivid-60)
 $govbr-info: #155bcb !default;
@@ -36,6 +42,10 @@ $govbr-danger: #e52207 !default;
 // vendor/govbr-ds-core/.../configs/colors/_yellow-vivid.scss
 $govbr-warning-text: #776017 !default;
 
+// --background-dark: var(--blue-warm-vivid-90) (tag padrão)
+// vendor/govbr-ds-core/.../configs/colors/_blue-warm-vivid.scss
+$govbr-tag-background: #071d41 !default;
+
 // --- Neutros ---
 // vendor/govbr-ds-core/.../configs/colors/_gray.scss
 $govbr-gray-90: #1b1b1b !default; // tom mais escuro (usado como $dark)

package/src/scss/components/_badge.scss

@@ -0,0 +1,17 @@
+// Adapta somente o badge estático do Bootstrap ao formato padrão de .br-tag.
+// Variantes .text-bg-* permanecem sob controle das utilidades Bootstrap, que
+// escolhem a cor de texto para manter contraste conforme o fundo escolhido.
+.badge {
+  align-items: center;
+  background-color: $govbr-tag-background;
+  display: inline-flex;
+  font-size: $govbr-font-size-base;
+  line-height: inherit;
+  margin: 0;
+  min-height: $govbr-spacer * 3.5;
+  padding: 0 $govbr-spacer * 1.5;
+}
+
+.badge + .badge {
+  margin-left: $govbr-spacer * 0.5;
+}

package/src/scss/components/_pagination.scss

@@ -0,0 +1,40 @@
+.pagination {
+  gap: 4px;
+  margin-bottom: 0;
+}
+
+.page-link {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  min-height: 32px;
+  min-width: 32px;
+  outline-offset: 4px;
+  white-space: nowrap;
+}
+
+.page-link:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-image: linear-gradient(
+    rgba($govbr-interactive, $govbr-hover-opacity),
+    rgba($govbr-interactive, $govbr-hover-opacity)
+  );
+  text-decoration: none;
+}
+
+.page-link:focus-visible {
+  outline: 4px dashed $govbr-focus;
+  outline-offset: 4px;
+  position: relative;
+  z-index: 2;
+}
+
+.page-item.active .page-link,
+.page-link.active {
+  font-weight: $govbr-font-weight-semibold;
+}
+
+.page-item.disabled .page-link,
+.page-link:disabled,
+.page-link[aria-disabled="true"] {
+  pointer-events: none;
+}

package/src/scss/index.scss

@@ -17,6 +17,8 @@
 // Ajustes que as variáveis de tema, sozinhas, não resolvem — um adaptador
 // por componente (ver docs/desenvolvimento.md).
 @import "components/alert";
+@import "components/badge";
+@import "components/pagination";
 @import "components/button";
 @import "components/card";
 @import "components/form";