@abrasileirado/dsgovbr-bootstraped 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abrasileirado/dsgovbr-bootstraped",
-  "version": "0.9.0",
+  "version": "0.10.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/_tokens.scss

@@ -147,3 +147,8 @@ $govbr-switch-on: #5992ed !default;    // --on (blue-warm-vivid-40)
 $govbr-switch-width: 52px !default;    // --switch-width-medium
 $govbr-switch-height: 30px !default;   // --switch-height-medium
 $govbr-switch-toggle: 22px !default;   // --switch-toggle-medium
+
+// Sombras grandes: vendor/govbr-ds-core/src/partial/scss/configs/_elevation.scss
+// ($shadow-lg e $shadow-lg-up: offset-lg / offset-lg-n, blur-lg, secondary-09 a opacity-xs).
+$govbr-shadow-lg: 0 6px 6px rgba(0, 0, 0, 0.16) !default;     // skiplink
+$govbr-shadow-lg-up: 0 -6px 6px rgba(0, 0, 0, 0.16) !default; // cookiebar

package/src/scss/components/_button.scss

@@ -68,3 +68,44 @@
 .btn-link.rounded-circle:hover {
   @include govbr-hover;
 }
+
+// Sign-in do GOV.BR DS (vendor/govbr-ds-core/src/components/signin): .btn-light
+// vira a pílula de fundo cinza-claro (--gray-2) com texto e ícone na cor
+// interativa, 16px de respiro lateral e imagem de até 20px ("Entrar com
+// gov.br"). No modo escuro, fundo --background-dark e texto --interactive-dark.
+.btn-light {
+  --#{$prefix}btn-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-color: #{$govbr-interactive};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-active-color: #{$govbr-active};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-padding-x: 16px;
+  gap: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &:hover {
+    @include govbr-hover;
+  }
+
+  img {
+    max-height: 20px;
+  }
+}
+
+[data-bs-theme="dark"] .btn-light {
+  --#{$prefix}btn-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-hover-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive-dark};
+  --#{$prefix}btn-active-bg: #{$govbr-background-dark};
+  --#{$prefix}btn-active-color: #{$govbr-color-dark};
+
+  &:hover {
+    @include govbr-hover($govbr-interactive-dark);
+  }
+}

package/src/scss/components/_cookiebar.scss

@@ -0,0 +1,7 @@
+// Cookiebar do GOV.BR DS (vendor/govbr-ds-core/src/components/cookiebar):
+// composição com .offcanvas-bottom (ver componentes/auxiliares.html). O
+// painel inferior ganha a sombra para cima do cookiebar no lugar da borda.
+.offcanvas-bottom {
+  border-top: 0;
+  box-shadow: $govbr-shadow-lg-up;
+}

package/src/scss/components/_navbar.scss

@@ -77,24 +77,7 @@
   @include govbr-hover($govbr-interactive-dark);
 }
 
-// "Entrar" (Sign-in do GOV.BR DS): pílula de fundo cinza-claro com texto e
-// ícone na cor interativa, 16,8px.
-.navbar .btn-light {
-  --#{$prefix}btn-bg: #{$govbr-gray-2};
-  --#{$prefix}btn-color: #{$govbr-interactive};
-  --#{$prefix}btn-hover-bg: #{$govbr-gray-2};
-  --#{$prefix}btn-hover-color: #{$govbr-interactive};
-  --#{$prefix}btn-active-bg: #{$govbr-gray-2};
-  --#{$prefix}btn-active-color: #{$govbr-active};
-  gap: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-size: $govbr-font-size-up-01;
-
-  &:hover {
-    @include govbr-hover;
-  }
-}
+// O "Entrar" (.btn-light) vem de components/_button.scss (Sign-in).
 
 // Busca do Header: campo de 40px com fundo cinza-claro, sem borda visível e
 // espaço à direita para o botão circular de pesquisa.

package/src/scss/components/_skiplink.scss

@@ -0,0 +1,25 @@
+// Skiplink do GOV.BR DS (vendor/govbr-ds-core/src/components/skiplink):
+// .visually-hidden-focusable, ao receber foco, aparece fixo no topo, a 16px
+// da esquerda, com fundo, sombra grande, largura mínima de 300px e itens de
+// 56px. Um <nav class="visually-hidden-focusable"> com vários links aparece
+// inteiro, em linha (variante "full" do GOV.BR DS).
+.visually-hidden-focusable:focus,
+.visually-hidden-focusable:focus-within {
+  position: fixed;
+  top: 0;
+  left: 16px; // --skiplink-margin
+  z-index: $zindex-toast + 10;
+  display: inline-flex;
+  min-width: 300px; // --skiplink-min-width
+  background-color: var(--#{$prefix}body-bg);
+  box-shadow: $govbr-shadow-lg;
+}
+
+a.visually-hidden-focusable,
+.visually-hidden-focusable a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 56px;
+  padding: 8px 16px;
+  white-space: nowrap;
+}

package/src/scss/index.scss

@@ -40,4 +40,6 @@
 @import "components/navbar";
 @import "components/menu";
 @import "components/footer";
+@import "components/skiplink";
+@import "components/cookiebar";
 @import "components/dark";