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

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

@@ -1,90 +0,0 @@
-@use "uswds-core" as *;
-$theme-card-cta-background-color: "white" !default;
-$theme-card-cta-border-radius: "sm" !default;
-$theme-card-cta-border-color: "base-lighter" !default;
-$theme-card-cta-title-color: "ink" !default;
-$theme-card-cta-description-color: "ink" !default;
-$theme-card-cta-accent-color: "primary" !default;
-
-// LAYOUT
-.blocks-card-cta {
-  --blocks-card-cta-custom-accent-color: #{color($theme-card-cta-accent-color)};
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  text-decoration: none;
-
-  &__body {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding: units(2.5);
-    gap: units(1);
-    z-index: 1;
-  }
-
-  &__title {
-    display: flex;
-    align-items: center;
-    gap: units("105");
-    margin: 0;
-  }
-
-  &__icon {
-    color: var(--blocks-card-cta-custom-accent-color);
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    vertical-align: baseline;
-    width: 1cap;
-    height: 1cap;
-
-    > svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__description {
-    margin: 0;
-  }
-}
-
-// THEME
-.blocks-card-cta {
-  background-color: color($theme-card-cta-background-color);
-  border-radius: radius($theme-card-cta-border-radius);
-  border: 1px solid color($theme-card-cta-border-color);
-
-  &:hover,
-  &:focus-visible {
-    text-decoration: none;
-
-    .blocks-card-cta__title {
-      text-decoration-line: underline;
-      text-decoration-color: var(--blocks-card-cta-custom-accent-color);
-      text-decoration-thickness: 2px;
-    }
-  }
-
-  &__title {
-    color: color($theme-card-cta-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "md");
-    font-weight: font-weight("bold");
-    line-height: lh("heading", 1);
-  }
-
-  &__description {
-    color: color($theme-card-cta-description-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "sm");
-    font-weight: font-weight("normal");
-    line-height: lh("body", 4);
-  }
-}

package/src/styles/components/card-detailed.scss

@@ -1,164 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-background-color: $theme-body-background-color !default;
-$theme-card-primary-accent-color: "primary-darker" !default;
-$theme-card-secondary-accent-color: "primary-light" !default;
-
-// LAYOUT
-.blocks-card-detailed {
-  isolation: isolate;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &--image-bottom {
-    .blocks-card-detailed__image-wrapper {
-      order: 1;
-    }
-  }
-
-  &--image-cover {
-    min-height: 15rem;
-
-    .blocks-card-detailed__image-wrapper {
-      position: absolute;
-      inset: 0;
-      z-index: 0;
-
-      > :is(img, svg, video, canvas) {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .blocks-card-detailed__content {
-      position: relative;
-      z-index: 1;
-      margin-top: auto;
-      padding-top: units(7);
-    }
-  }
-
-  &__accent-bar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 3;
-    height: units(1);
-    pointer-events: none;
-  }
-
-  &__image-wrapper {
-    position: relative;
-    order: -1;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  &__content-type-tag {
-    position: absolute;
-    top: units(2.5);
-    left: units(4);
-    z-index: 2;
-  }
-
-  &__image-wrapper > :is(img, svg, video, canvas) {
-    width: 100%;
-    display: block;
-
-    &:is(img, svg, video, canvas) {
-      height: auto;
-    }
-  }
-
-  &__content {
-    padding: units(3) units(4) units(4) units(4);
-    display: flex;
-    flex-direction: column;
-    gap: units(1.5);
-  }
-
-  &__title {
-    margin: 0; // preserve spacing rhythm by removing browser default
-  }
-
-  &__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(0.5);
-  }
-
-  &__action {
-    align-self: flex-start;
-  }
-}
-@include at-media-max("mobile-lg") {
-  .blocks-card-detailed__content {
-    padding: units(2);
-  }
-
-  .blocks-card-detailed__content-type-tag {
-    left: units(2);
-  }
-}
-
-// THEME
-.blocks-card-detailed {
-  background: color($theme-card-background-color);
-  border-radius: radius($theme-card-border-radius);
-  box-shadow: 0 units(0.5) units(2) rgba(color("base-dark"), 0.06);
-
-  &--image-cover {
-    .blocks-card-detailed__content {
-      background: linear-gradient(
-        180deg,
-        rgba(color($theme-card-background-color), 0) 0%,
-        rgba(color($theme-card-background-color), 0.72) 40%,
-        color($theme-card-background-color) 100%
-      );
-    }
-  }
-
-  &__accent-bar {
-    background: linear-gradient(
-      90deg,
-      color($theme-card-primary-accent-color) 0%,
-      color($theme-card-secondary-accent-color) 100%
-    );
-  }
-
-  &__image-wrapper {
-    background: color("base-lighter");
-  }
-
-  &__intro {
-    color: color("base-dark");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("body", "3xs");
-    font-style: normal;
-    font-weight: font-weight("normal");
-    line-height: line-height("body", 1);
-  }
-
-  &__title {
-    color: color("ink");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("heading", "lg");
-    font-style: normal;
-    font-weight: font-weight("bold");
-    line-height: line-height("heading", 3);
-  }
-
-  &__description {
-    color: color("ink");
-    font-family: family($theme-card-font-family);
-    font-size: font-size("body", "3xs");
-    font-style: normal;
-    font-weight: font-weight("normal");
-    line-height: line-height("body", 5);
-  }
-}

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

@@ -1,81 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-mini-border-radius: $theme-card-border-radius !default;
-$theme-card-mini-border-width: 1px !default;
-$theme-card-mini-border-color: "base-lighter" !default;
-$theme-card-mini-bg: "white" !default;
-$theme-card-mini-title-color: "ink" !default;
-$theme-card-mini-title-font-weight: $theme-font-weight-bold !default;
-$theme-card-mini-image-width: 98px !default; // matches Figma
-$theme-card-mini-image-height: 108px !default; // matches Figma
-
-// LAYOUT
-.blocks-card-mini {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  width: 100%;
-  height: $theme-card-mini-image-height;
-  overflow: hidden;
-  gap: units("105");
-  padding-right: units("105");
-  text-decoration: none;
-
-  &__image {
-    flex: 0 0 $theme-card-mini-image-width;
-    width: $theme-card-mini-image-width;
-    overflow: hidden;
-
-    > :is(img, svg, video, canvas) {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
-    }
-  }
-
-  &__body {
-    flex: 1 0 0;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: units(1);
-    justify-content: center;
-  }
-
-  &__tag {
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
-
-  &__title {
-    margin: 0;
-  }
-}
-
-// THEME
-.blocks-card-mini {
-  background-color: color($theme-card-mini-bg);
-  border-radius: radius($theme-card-mini-border-radius);
-  border: $theme-card-mini-border-width solid color($theme-card-mini-border-color);
-
-  &__title {
-    color: color($theme-card-mini-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "lg");
-    font-weight: font-weight($theme-card-mini-title-font-weight);
-    line-height: lh("heading", 4);
-
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &--with-tag &__title {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-}

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

@@ -1,79 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-card-simple-border-radius: "md" !default;
-$theme-card-simple-title-color: "ink" !default;
-$theme-card-simple-title-font-weight: "bold" !default;
-$theme-card-simple-overlay-color: "base-light" !default;
-
-// LAYOUT
-.blocks-card-simple {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  border-radius: radius($theme-card-simple-border-radius);
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-
-  &__media {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-
-    > :is(img, svg, video, canvas) {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
-    }
-  }
-
-  &__overlay {
-    position: absolute;
-    inset: 0;
-  }
-
-  &__body {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: units(3) units(2.5) units(2.5) units(2.5);
-  }
-
-  &__tag {
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
-
-  &__title {
-    margin: 0;
-    margin-top: auto;
-  }
-}
-
-// THEME
-.blocks-card-simple {
-  &__overlay {
-    background: linear-gradient(
-      to bottom,
-      rgba(color($theme-card-simple-overlay-color), 0.1),
-      rgba(color($theme-card-simple-overlay-color), 0.8)
-    );
-  }
-
-  &__title {
-    color: color($theme-card-simple-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "lg");
-    font-weight: font-weight($theme-card-simple-title-font-weight);
-    line-height: lh("heading", 2);
-  }
-
-  &--compact &__title {
-    font-size: size("heading", "md");
-  }
-}

package/src/styles/components/card.scss

@@ -1,284 +0,0 @@
-@use "uswds-core" as *;
-$theme-card-max-width: "desktop-lg" !default;
-$theme-card-title-color: "ink" !default;
-$theme-card-text-color: "ink" !default;
-$theme-card-overlay-color: "base-lightest" !default;
-$theme-card-title-dark-color: "white" !default;
-$theme-card-text-dark-color: "white" !default;
-$theme-card-overlay-dark-color: "base-darkest" !default;
-$theme-card-title-brand-color: "white" !default;
-$theme-card-text-brand-color: "white" !default;
-$theme-card-overlay-brand-color: "primary-dark" !default;
-
-@mixin blocks-card-overlay($color, $direction: 90deg) {
-  background: linear-gradient($direction, rgba(color($color), 1) 0%, rgba(color($color), 0.3) 100%);
-
-  @include at-media("desktop") {
-    background: linear-gradient(
-      $direction,
-      rgba(color($color), 1) 0%,
-      rgba(color($color), 0.3) 70%,
-      rgba(color($color), 0) 100%
-    );
-  }
-}
-
-// LAYOUT
-.blocks-card {
-  display: flex;
-  flex-direction: column;
-  isolation: isolate;
-  min-height: units("mobile");
-  position: relative;
-  width: 100%;
-
-  &__content-container {
-    flex: 1;
-  }
-
-  &__content-container,
-  &__children {
-    align-items: center;
-    display: flex;
-    padding: units(4) units(3);
-    width: 100%;
-    z-index: 1;
-
-    @include at-media("tablet") {
-      padding: units(5) units(8);
-    }
-
-    @include at-media("desktop") {
-      padding: units(5) units(10);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__content-container {
-      align-items: start;
-      flex-direction: column;
-      gap: units(3);
-
-      @include at-media("tablet") {
-        align-items: center;
-        flex-direction: row;
-        gap: units(5);
-      }
-    }
-  }
-
-  &--image-right {
-    .blocks-card__content-container {
-      @include at-media("tablet") {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-
-  &--mast-head {
-    .blocks-card__content-container,
-    .blocks-card__children {
-      @include grid-container($theme-card-max-width);
-    }
-  }
-
-  &__media {
-    inset: 0;
-    min-height: 175px;
-    position: absolute;
-    width: 100%;
-    z-index: 0;
-
-    &:only-child {
-      min-height: 100%;
-    }
-
-    @include at-media("tablet") {
-      min-height: 0;
-    }
-
-    > :is(img, svg, video, canvas) {
-      height: 100%;
-      display: block;
-      inset: 0;
-      object-fit: cover;
-      position: absolute;
-      width: 100%;
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__media {
-      position: relative;
-
-      @include at-media("tablet") {
-        align-self: stretch;
-        flex: 1 1 0;
-      }
-
-      &:only-child {
-        position: unset;
-      }
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: units(2);
-    position: relative;
-
-    @include at-media("tablet") {
-      flex: 1 1 0;
-      max-width: measure(5);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__content {
-      @include at-media("tablet") {
-        max-width: none;
-      }
-    }
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__description {
-    margin: 0;
-  }
-
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: units(1);
-
-    .usa-button {
-      margin-right: 0;
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    .blocks-card__actions {
-      .usa-button {
-        flex: 1 1 0;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-  }
-}
-
-// Visually align card content if placed in a grid column
-@include at-media("tablet") {
-  [class*="grid-col-"] > .blocks-card {
-    .blocks-card__content-container {
-      align-items: stretch;
-    }
-
-    .blocks-card__actions {
-      margin-top: auto;
-    }
-  }
-}
-
-// THEME
-.blocks-card {
-  &::after {
-    @include blocks-card-overlay($theme-card-overlay-color);
-  }
-
-  &--dark {
-    &::after {
-      @include blocks-card-overlay($theme-card-overlay-dark-color);
-    }
-  }
-
-  &--brand {
-    &::after {
-      @include blocks-card-overlay($theme-card-overlay-brand-color);
-    }
-  }
-
-  &--image-left,
-  &--image-right {
-    background-color: color($theme-card-overlay-color);
-
-    &::after {
-      background: none;
-    }
-  }
-
-  &--dark.blocks-card--image-left,
-  &--dark.blocks-card--image-right {
-    background-color: color($theme-card-overlay-dark-color);
-  }
-
-  &--brand.blocks-card--image-left,
-  &--brand.blocks-card--image-right {
-    background-color: color($theme-card-overlay-brand-color);
-  }
-
-  &__title {
-    color: color($theme-card-title-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "xl");
-    font-weight: font-weight("bold");
-    line-height: lh("heading", 1);
-  }
-
-  &__subtitle {
-    color: color($theme-card-text-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("heading", "xl");
-    line-height: lh("heading", 3);
-  }
-
-  &__description {
-    color: color($theme-card-text-color);
-    font-family: family($theme-card-font-family);
-    font-size: size("body", "sm");
-    font-weight: font-weight("normal");
-    line-height: lh("body", 5);
-  }
-
-  &--dark {
-    .blocks-card__title {
-      color: color($theme-card-title-dark-color);
-    }
-
-    .blocks-card__subtitle {
-      color: color($theme-card-text-dark-color);
-    }
-
-    .blocks-card__description {
-      color: color($theme-card-text-dark-color);
-    }
-  }
-
-  &--brand {
-    .blocks-card__title {
-      color: color($theme-card-title-brand-color);
-    }
-
-    .blocks-card__subtitle {
-      color: color($theme-card-text-brand-color);
-    }
-
-    .blocks-card__description {
-      color: color($theme-card-text-brand-color);
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-@use "uswds-core" as *;
-
-$theme-compare-swiper-bgcolor: "primary" !default;
-
-.blocks-compare-map {
-  position: relative;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-
-  // Override mapbox-gl-compare handle color
-  .mapboxgl-compare .compare-swiper-vertical {
-    background-color: color($theme-compare-swiper-bgcolor);
-  }
-}