@teamimpact/veda-ui-blocks 0.1.0-beta.7

package/src/styles/components/header.scss

@@ -0,0 +1,212 @@
+@use "uswds-core" as *;
+$theme-header-bgcolor: $theme-body-background-color !default;
+$theme-header-primary-link-text-color: "ink" !default;
+$theme-header-primary-link-hover-border-color: "primary" !default;
+$theme-header-mobile-link-hover-bgcolor: "base-lightest" !default;
+$theme-header-primary-button-link-text-color: $theme-text-reverse-color !default;
+$theme-header-primary-button-link-bgcolor: "primary" !default;
+$theme-header-primary-button-link-hover-bgcolor: "primary-dark" !default;
+
+// LAYOUT
+.blocks-header.usa-header--basic {
+  // remove the default divider border on USWDS header
+  + .usa-hero,
+  + .usa-section,
+  + main {
+    @include at-media($theme-header-min-width) {
+      border-top: none;
+    }
+  }
+
+  .usa-nav-container {
+    align-items: center;
+    display: flex;
+    padding-top: units(1);
+    padding-bottom: units(1);
+    @include grid-container($theme-header-max-width);
+
+    .usa-navbar {
+      border-bottom: none;
+      flex: 1;
+
+      .usa-menu-btn {
+        height: 100%;
+      }
+    }
+
+    @include at-media("desktop") {
+      .usa-nav {
+        padding: 0;
+        width: auto;
+      }
+    }
+  }
+
+  .blocks-header__portal-details {
+    align-items: center;
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: row;
+    gap: units(2);
+
+    .blocks-header__portal-logo {
+      display: inline-flex;
+    }
+
+    .usa-logo {
+      margin: 0;
+      line-height: normal;
+    }
+  }
+
+  .usa-nav__close {
+    cursor: pointer;
+  }
+
+  a.blocks-header__custom-nav-item {
+    margin-right: 0;
+  }
+
+  .usa-nav__primary {
+    @include at-media-max($theme-header-min-width) {
+      margin-top: units(3);
+      order: 2;
+    }
+
+    .usa-nav__primary-item {
+      .usa-nav__link {
+        padding: units(2);
+      }
+
+      @include at-media("desktop") {
+        > button.usa-nav__link {
+          &:hover,
+          &.usa-current {
+            &:after {
+              bottom: units(0.5);
+              content: "";
+              display: block;
+              height: 0.25rem;
+              left: 1rem;
+              position: absolute;
+              right: 1rem;
+            }
+          }
+          &:focus {
+            outline-offset: units(-1);
+          }
+        }
+
+        > a.usa-nav__link {
+          &:hover,
+          &.usa-current {
+            &:after {
+              bottom: units(0.5);
+            }
+          }
+          &:focus {
+            outline-offset: units(-1);
+          }
+        }
+      }
+    }
+
+    @include at-media("desktop") {
+      .usa-nav__submenu {
+        margin-top: 4px;
+        padding-left: units(2);
+        padding-right: units(2);
+
+        .usa-nav__submenu-item a {
+          padding: units(2);
+        }
+      }
+    }
+  }
+}
+
+// THEME
+.blocks-header.usa-header--basic {
+  background-color: color($theme-header-bgcolor);
+
+  .blocks-header__portal-details {
+    a {
+      color: color($theme-header-primary-link-text-color);
+    }
+  }
+
+  .usa-nav.is-visible {
+    background-color: color($theme-header-bgcolor);
+
+    .usa-nav__primary {
+      button,
+      a {
+        &:hover {
+          background-color: color($theme-header-mobile-link-hover-bgcolor);
+        }
+      }
+    }
+  }
+
+  .usa-menu-btn {
+    color: color($theme-header-primary-button-link-text-color);
+    background-color: color($theme-header-primary-button-link-bgcolor);
+    &:hover {
+      background-color: color($theme-header-primary-button-link-hover-bgcolor);
+    }
+  }
+
+  a.blocks-header__custom-nav-item {
+    background-color: color($theme-header-primary-button-link-bgcolor);
+    color: color($theme-header-primary-button-link-text-color);
+    font-size: size("body", "2xs");
+
+    &:hover {
+      background-color: color($theme-header-primary-button-link-hover-bgcolor);
+    }
+  }
+
+  .usa-nav__primary {
+    .usa-nav__primary-item {
+      > a.usa-nav__link {
+        color: color($theme-header-primary-link-text-color);
+        &.usa-current,
+        &:hover {
+          &:after {
+            background-color: color($theme-header-primary-link-hover-border-color);
+          }
+        }
+      }
+
+      > button.usa-nav__link {
+        @include at-media("desktop") {
+          background-color: transparent;
+        }
+
+        color: color($theme-header-primary-link-text-color);
+
+        &:hover,
+        &.usa-current {
+          &:after {
+            background-color: color($theme-header-primary-link-hover-border-color);
+          }
+        }
+
+        > span::after {
+          background-color: color($theme-header-primary-link-text-color);
+        }
+      }
+    }
+
+    .usa-nav__submenu {
+      background-color: color($theme-header-bgcolor);
+
+      .usa-nav__submenu-item > a {
+        color: color($theme-header-primary-link-text-color);
+        @include at-media("desktop") {
+          font-weight: $theme-font-weight-bold;
+        }
+      }
+    }
+  }
+}

package/src/styles/components/index.scss

@@ -0,0 +1,11 @@
+// Shared partials consumed by each theme entry after USWDS is loaded.
+@use "banner";
+@use "compare-map";
+@use "card";
+@use "card-cta";
+@use "card-detailed";
+@use "card-mini";
+@use "card-simple";
+@use "footer";
+@use "header";
+@use "tag";

package/src/styles/components/tag.scss

@@ -0,0 +1,89 @@
+@use "uswds-core" as *;
+
+$theme-tag-border-radius: "sm" !default;
+$theme-tag-font-family: "mono" !default;
+$theme-tag-text-transform: none !default;
+$theme-tag-color: "base" !default;
+$theme-tag-solid-text-color: "white" !default;
+
+//LAYOUT
+.blocks-tag {
+  align-items: center;
+  flex-direction: row;
+  display: inline-flex;
+  gap: units(0.5);
+  padding: units(0.5);
+
+  &--big {
+    padding: units(1);
+  }
+
+  &__icon,
+  &__close-button {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+
+    :where(svg, .usa-icon) {
+      height: 1em;
+      vertical-align: middle;
+      width: auto;
+      color: inherit;
+      fill: currentColor;
+      stroke: currentColor;
+    }
+
+    :where(path) {
+      fill: currentColor;
+      stroke: currentColor;
+    }
+  }
+
+  &__close-button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    line-height: 1;
+    color: inherit;
+  }
+}
+
+// THEME
+.blocks-tag {
+  border-radius: radius($theme-tag-border-radius);
+  border: 1px solid transparent;
+  font-family: family($theme-tag-font-family);
+  font-size: size($theme-tag-font-family, "3xs");
+  font-weight: font-weight("normal");
+  line-height: lh($theme-tag-font-family, 2);
+  text-transform: $theme-tag-text-transform;
+
+  &--solid {
+    color: var(--blocks-tag-custom-text-color, #{color($theme-tag-solid-text-color)});
+    background-color: var(--blocks-tag-custom-color, #{color($theme-tag-color)});
+    border-color: var(--blocks-tag-custom-color, #{color($theme-tag-color)});
+  }
+
+  &--outline {
+    color: var(
+      --blocks-tag-custom-text-color,
+      var(--blocks-tag-custom-color, #{color($theme-tag-color)})
+    );
+    background-color: color("transparent");
+    border-color: var(--blocks-tag-custom-color, #{color($theme-tag-color)});
+  }
+
+  &--text {
+    color: var(
+      --blocks-tag-custom-text-color,
+      var(--blocks-tag-custom-color, #{color($theme-tag-color)})
+    );
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &--big {
+    font-size: size($theme-tag-font-family, "2xs");
+  }
+}

package/src/styles/default/index.scss

@@ -0,0 +1,10 @@
+// Default USWDS theme manifest
+
+// 1. Forward theme token configuration first (must be before uswds-core/@forward)
+@forward "theme-tokens";
+
+// 2. Then forward USWDS itself
+@forward "uswds";
+
+// 3. Forward all custom component styles via default theme component style aggregator
+@forward "../components/index";

package/src/styles/default/theme-tokens.scss

@@ -0,0 +1,84 @@
+// Default USWDS theme configuration
+@use "uswds-core" with (
+  // GENERAL SETTINGS
+  // https://designsystem.digital.gov/documentation/settings/#general-settings-2
+  $theme-show-notifications: false,
+  $theme-show-compile-warnings: false,
+  $theme-image-path: "./img",
+
+  // COLOR SETTINGS
+  // https://designsystem.digital.gov/documentation/settings/#color-settings-2
+  // uses USWDS default color palette
+  // COMPONENT SETTINGS
+  // https://designsystem.digital.gov/documentation/settings/#component-settings-2
+  $theme-banner-max-width: "desktop-lg",
+  $theme-header-max-width: "desktop-lg",
+  $theme-footer-max-width: "desktop-lg",
+
+  // SPACING SETTINGS
+  // https://designsystem.digital.gov/documentation/settings/#spacing-settings-2
+  $theme-grid-container-max-width: "desktop-lg",
+  $theme-site-margins-breakpoint: "desktop-lg",
+  $theme-site-margins-width: 4,
+  $theme-site-margins-mobile-width: 2,
+
+  // TYPE SETTINGS
+  // https: //designsystem.digital.gov/documentation/settings/#typography-settings-2
+  $theme-font-path: "./fonts",
+  $theme-font-type-mono: "roboto-mono",
+  $theme-font-type-sans: "public-sans",
+  $theme-font-type-serif: "merriweather",
+
+  $theme-font-role-ui: "sans",
+  $theme-font-role-heading: "serif",
+  $theme-font-role-body: "sans",
+  $theme-font-role-code: "mono",
+  $theme-font-role-alt: "serif",
+
+  $theme-type-scale-3xs: 1,
+  $theme-type-scale-2xs: 3,
+  $theme-type-scale-xs: 4,
+  $theme-type-scale-sm: 5,
+  $theme-type-scale-md: 7,
+  $theme-type-scale-lg: 9,
+  $theme-type-scale-xl: 12,
+  $theme-type-scale-2xl: 14,
+  $theme-type-scale-3xl: 15,
+
+  $theme-font-weight-thin: false,
+  $theme-font-weight-light: 300,
+  $theme-font-weight-normal: 400,
+  $theme-font-weight-medium: false,
+  $theme-font-weight-semibold: 600,
+  $theme-font-weight-bold: 700,
+  $theme-font-weight-heavy: 900,
+
+  // UTILITY SETTINGS
+  // https://designsystem.digital.gov/documentation/settings/#utilities-settings-2s
+  $utilities-use-important: false,
+  $theme-utility-breakpoints: (
+    "card": false,
+    "card-lg": false,
+    "mobile": true,
+    "mobile-lg": false,
+    "tablet": true,
+    "tablet-lg": false,
+    "desktop": true,
+    "desktop-lg": true,
+    "widescreen": true
+  ),
+
+  $overflow-settings: (responsive: true),
+  $position-settings: (responsive: true),
+  $top-settings: (responsive: true),
+  $right-settings: (responsive: true),
+  $left-settings: (responsive: true),
+  $bottom-settings: (responsive: true),
+  $z-index-settings: (responsive: true),
+  $background-color-settings: (responsive: true),
+  $font-style-settings: (responsive: true),
+  $color-settings: (responsive: true, hover: true),
+  $flex-direction-settings: (responsive: true),
+  $flex-settings: (responsive: true),
+  $order-settings: (responsive: true)
+);

package/src/styles/disasters/card-cta.scss

@@ -0,0 +1,31 @@
+@use "uswds-core" as *;
+@use "../components/card-cta" with (
+  $theme-card-cta-title-color: "white",
+  $theme-card-cta-description-color: "white",
+  $theme-card-cta-accent-color: "accent-warm",
+  $theme-card-cta-border-color: "transparent"
+);
+
+// Disasters-specific overrides
+.blocks-card-cta {
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.05);
+
+  &:hover,
+  &:focus-visible {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &__title {
+    font-size: size("heading", "lg");
+    font-weight: font-weight("bold");
+    line-height: lh("heading", 3);
+    text-underline-offset: units("05");
+  }
+
+  &__description {
+    font-size: size("body", "sm");
+    font-weight: font-weight("bold");
+    line-height: lh("body", 4);
+  }
+}

package/src/styles/disasters/card-mini.scss

@@ -0,0 +1,4 @@
+@use "../components/card-mini" with (
+  $theme-card-mini-border-width: 0,
+  $theme-card-mini-border-color: "transparent"
+);

package/src/styles/disasters/card-simple.scss

@@ -0,0 +1,13 @@
+@use "uswds-core" as *;
+@use "../components/card-simple" with (
+  $theme-card-simple-border-radius: 0,
+  $theme-card-simple-title-color: $theme-body-background-color,
+  $theme-card-simple-title-font-weight: "semibold",
+  $theme-card-simple-overlay-color: "base-darkest"
+);
+
+// Figma node 4030-1098: disasters title carries a subtle drop-shadow absent
+// from the default theme — not expressible as a single token value.
+.blocks-card-simple__title {
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}

package/src/styles/disasters/card.scss

@@ -0,0 +1,13 @@
+@use "uswds-core" as *;
+@use "../components/card" with (
+  $theme-card-max-width: "widescreen",
+  $theme-card-title-color: "primary-dark",
+  $theme-card-text-color: "primary-dark",
+  $theme-card-overlay-color: "base-lighter",
+  $theme-card-title-dark-color: "white",
+  $theme-card-text-dark-color: "white",
+  $theme-card-overlay-dark-color: "base-darkest",
+  $theme-card-title-brand-color: "white",
+  $theme-card-text-brand-color: "base-lighter",
+  $theme-card-overlay-brand-color: "primary-dark"
+);

package/src/styles/disasters/compare-map.scss

@@ -0,0 +1,3 @@
+@use "../components/compare-map" with (
+  $theme-compare-swiper-bgcolor: "primary-dark"
+);

package/src/styles/disasters/fonts.scss

@@ -0,0 +1,29 @@
+// To include custom font families not within USWDS,
+// 1. use https://fontsource.org/ to install the font utilities and font package
+// 2. use the font utilities to generate the font-face declarations in this file
+//    Note, the directory path as "fonts/font-name/...".
+//    This is consistent with our current implementation of USWDS fonts,
+//    which are copied from node_modules to /dist/fonts. See build-assets.sh script for reference.
+// 3. reference the font family in USWDS theme definition via $theme-typeface-tokens in theme-tokens.scss
+//    For more information on font family tokens, see the USWDS documentation:
+//    https://designsystem.digital.gov/design-tokens/typesetting/font-family/
+
+@use "pkg:@fontsource-utils/scss" as fontsource;
+@use "pkg:@fontsource/dm-mono/scss" as dm-mono;
+@use "pkg:@fontsource-variable/inter/scss" as inter;
+
+@include fontsource.faces(
+  $metadata: dm-mono.$metadata,
+  $subsets: latin,
+  $weights: 400,
+  $styles: all,
+  $directory: "fonts/dm-mono/files"
+);
+
+@include fontsource.faces(
+  $metadata: inter.$metadata,
+  $subsets: latin,
+  $weights: 300 400 600 700 900,
+  $styles: normal italic,
+  $directory: "fonts/inter/files"
+);

package/src/styles/disasters/footer.scss

@@ -0,0 +1,9 @@
+@use "uswds-core" as *;
+@use "../components/footer" with (
+  $theme-footer-background-color: "primary-dark",
+  $theme-footer-primary-link-color: "base-lighter",
+  $theme-footer-secondary-link-color: "base-lighter",
+  $theme-footer-title-color: "base-lighter",
+  $theme-footer-text-color: "base-lighter",
+  $theme-footer-separator-color: $theme-link-reverse-color
+);

package/src/styles/disasters/header.scss

@@ -0,0 +1,10 @@
+@use "uswds-core" as *;
+@use "../components/header" with (
+  $theme-header-bgcolor: "primary-dark",
+  $theme-header-primary-link-text-color: $theme-link-reverse-active-color,
+  $theme-header-primary-link-hover-border-color: "primary-vivid",
+  $theme-header-mobile-link-hover-bgcolor: "primary-darker",
+  $theme-header-primary-button-link-text-color: $theme-link-reverse-active-color,
+  $theme-header-primary-button-link-bgcolor: "primary",
+  $theme-header-primary-button-link-hover-bgcolor: "primary-darker"
+);

package/src/styles/disasters/index.scss

@@ -0,0 +1,22 @@
+// Disasters theme manifest
+
+// 1. Forward theme token configuration first (must be before uswds-core/@forward)
+@forward "theme-tokens";
+
+// 2. Then forward USWDS itself
+@forward "uswds";
+
+// 3. Forward all custom component styles via disasters theme component overrides files and
+//    default theme component style aggregator
+@forward "card";
+@forward "card-cta";
+@forward "card-mini";
+@forward "card-simple";
+@forward "compare-map";
+@forward "footer";
+@forward "header";
+@forward "tag";
+@forward "../components/index";
+
+// 4. Forward theme specific custom fonts
+@forward "fonts";

package/src/styles/disasters/tag.scss

@@ -0,0 +1,6 @@
+@use "uswds-core" as *;
+@use "../components/tag" with (
+  $theme-tag-border-radius: 0,
+  $theme-tag-font-family: "mono",
+  $theme-tag-text-transform: uppercase
+);