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

package/src/styles/components/header.scss

@@ -1,212 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-// 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

@@ -1,89 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-// 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

@@ -1,84 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-@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

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

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

@@ -1,13 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

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

package/src/styles/disasters/fonts.scss

@@ -1,29 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-// 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

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