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

package/src/styles/components/footer.scss

@@ -1,256 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-footer-background-color: $theme-body-background-color !default;
-$theme-footer-primary-link-color: $theme-link-color !default;
-$theme-footer-secondary-link-color: "ink" !default;
-$theme-footer-title-color: "ink" !default;
-$theme-footer-text-color: "ink" !default;
-$theme-footer-separator-color: "ink" !default;
-
-// LAYOUT
-.blocks-footer.usa-footer--slim {
-  .usa-footer__primary-section > .grid-container,
-  .usa-footer__secondary-section > .grid-container {
-    section {
-      padding-bottom: units(3);
-    }
-  }
-
-  .usa-footer__primary-section {
-    > .grid-container {
-      padding-top: units(4);
-
-      @include at-media("desktop") {
-        padding-top: units(5);
-      }
-    }
-  }
-
-  .usa-footer__secondary-section {
-    padding-top: 0;
-    padding-bottom: 0;
-
-    > .grid-container {
-      padding-bottom: units(3);
-
-      @include at-media("desktop") {
-        padding-bottom: units(7);
-      }
-    }
-  }
-
-  .blocks-footer__primary-section-lower {
-    display: grid;
-    gap: units(5);
-
-    @include at-media("desktop") {
-      align-items: start;
-      column-gap: units(8);
-      grid-template-columns: (units(10) * 4) minmax(0, 1fr);
-    }
-  }
-
-  .blocks-footer__secondary-section-lower {
-    display: grid;
-    gap: units(4);
-    padding-top: units(3);
-
-    @include at-media("desktop") {
-      align-items: start;
-      column-gap: units(8);
-      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
-    }
-  }
-
-  .blocks-footer__secondary-meta {
-    display: flex;
-    flex-direction: column;
-    gap: units(4);
-
-    @include at-media("desktop") {
-      column-gap: units(6);
-      flex-direction: row;
-      flex-wrap: wrap-reverse;
-      justify-content: flex-end;
-    }
-  }
-
-  .blocks-footer__title {
-    display: grid;
-    gap: units(1.5);
-  }
-
-  .usa-footer__primary-section,
-  .usa-footer__secondary-section {
-    nav {
-      ul {
-        display: flex;
-        flex-direction: column;
-        gap: units(3);
-        @include add-list-reset;
-
-        @include at-media("desktop") {
-          flex-direction: row;
-          flex-wrap: wrap;
-          gap: units(5);
-        }
-      }
-    }
-  }
-
-  .blocks-footer__primary-nav,
-  .blocks-footer__secondary-nav {
-    padding-top: units(2);
-
-    @include at-media("desktop") {
-      padding-top: units(3);
-    }
-  }
-
-  .blocks-footer__primary-nav {
-    ul {
-      justify-content: flex-end;
-    }
-  }
-
-  .usa-footer__secondary-link {
-    line-height: inherit;
-    margin-left: 0;
-    padding: 0;
-
-    & + .usa-footer__secondary-link {
-      padding-top: 0;
-    }
-  }
-
-  .blocks-footer__utility-nav,
-  .blocks-footer__contacts-nav {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(2);
-
-    li {
-      align-items: center;
-      display: flex;
-      gap: units(1.5);
-
-      a {
-        display: inline-flex;
-        gap: units(1);
-        align-items: center;
-      }
-    }
-  }
-
-  .blocks-footer__utility-nav ul {
-    gap: units(1);
-  }
-
-  .blocks-footer__contacts-nav ul {
-    gap: units(3);
-
-    @include at-media("desktop") {
-      align-items: center;
-      gap: units(3);
-      justify-content: flex-end;
-    }
-  }
-
-  .blocks-footer__secondary-meta > p {
-    margin: 0;
-
-    @include at-media("desktop") {
-      text-align: right;
-    }
-  }
-}
-
-// THEME
-.blocks-footer.usa-footer--slim {
-  .usa-footer__primary-section,
-  .usa-footer__secondary-section {
-    background-color: color($theme-footer-background-color);
-    color: color($theme-text-color);
-  }
-
-  .blocks-footer__primary-section-lower,
-  .blocks-footer__secondary-section-upper {
-    border-bottom: 1px solid rgba(color($theme-footer-separator-color), 0.1);
-  }
-
-  .blocks-footer__title {
-    span {
-      color: color($theme-footer-title-color);
-      font-size: size("body", "lg");
-      font-weight: font-weight("bold");
-      text-decoration: none;
-    }
-
-    p {
-      color: color($theme-footer-text-color);
-      margin: 0;
-      font-size: size("body", "2xs");
-      line-height: line-height("body", 5);
-    }
-  }
-
-  .usa-footer__primary-link {
-    border: 0;
-    color: color($theme-footer-primary-link-color);
-    font-size: size("body", "2xs");
-    font-weight: font-weight("bold");
-    padding: 0;
-    text-decoration: none;
-
-    &:visited {
-      color: color($theme-footer-primary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-primary-link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.18em;
-    }
-  }
-
-  .usa-footer__secondary-link > a {
-    color: color($theme-footer-secondary-link-color);
-    font-size: size("body", "2xs");
-    line-height: line-height("body", 5);
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.18em;
-
-    &:visited {
-      color: color($theme-footer-secondary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-secondary-link-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-
-  .blocks-footer__secondary-section-lower {
-    color: color($theme-footer-text-color);
-    font-size: size("body", "2xs");
-  }
-
-  .blocks-footer__secondary-section-lower a {
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.18em;
-    color: color($theme-footer-primary-link-color);
-    &:visited {
-      color: color($theme-footer-primary-link-color);
-    }
-
-    &:hover,
-    &:active {
-      color: color($theme-footer-primary-link-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-}

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);
-}