diff --git a/app/assets/stylesheets/email.css.scss b/app/assets/stylesheets/email.css.scss index b312c06ea99..20a619cab65 100644 --- a/app/assets/stylesheets/email.css.scss +++ b/app/assets/stylesheets/email.css.scss @@ -1,7 +1,6 @@ @use 'uswds-core' as *; @use 'variables/app' as *; @use 'variables/email' as *; -@import 'foundation-emails/scss/foundation-emails'; .gray { &:active, diff --git a/app/assets/stylesheets/variables/_email.scss b/app/assets/stylesheets/variables/_email.scss index e670dc8a5f7..134d4856e85 100644 --- a/app/assets/stylesheets/variables/_email.scss +++ b/app/assets/stylesheets/variables/_email.scss @@ -148,3 +148,96 @@ $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; + +@forward 'foundation-emails/scss/foundation-emails' with ( + $primary-color: $primary-color, + $secondary-color: $secondary-color, + $success-color: $success-color, + $warning-color: $warning-color, + $alert-color: $alert-color, + $light-gray: $light-gray, + $black: $black, + $white: $white, + $medium-gray: $medium-gray, + $dark-gray: $dark-gray, + $pre-color: $pre-color, + $global-width: $global-width, + $global-width-small: $global-width-small, + $global-gutter: $global-gutter, + $global-gutter-small: $global-gutter-small, + $body-background: $body-background, + $container-background: $container-background, + $global-padding: $global-padding, + $global-margin: $global-margin, + $global-radius: $global-radius, + $global-rounded: $global-rounded, + $global-breakpoint: $global-breakpoint, + $grid-column-count: $grid-column-count, + $column-padding-bottom: $column-padding-bottom, + $container-radius: $container-radius, + $block-grid-max: $block-grid-max, + $block-grid-gutter: $block-grid-gutter, + $global-font-color: $global-font-color, + $body-font-family: $body-font-family, + $global-font-weight: $global-font-weight, + $header-color: $header-color, + $global-line-height: $global-line-height, + $global-font-size: $global-font-size, + $body-line-height: $body-line-height, + $header-font-family: $header-font-family, + $header-font-weight: $header-font-weight, + $h1-font-size: $h1-font-size, + $h2-font-size: $h2-font-size, + $h3-font-size: $h3-font-size, + $h4-font-size: $h4-font-size, + $h5-font-size: $h5-font-size, + $h6-font-size: $h6-font-size, + $header-margin-bottom: $header-margin-bottom, + $paragraph-margin-bottom: $paragraph-margin-bottom, + $small-font-size: $small-font-size, + $small-font-color: $small-font-color, + $lead-font-size: $lead-font-size, + $lead-line-height: $lead-line-height, + $text-padding: $text-padding, + $subheader-lineheight: $subheader-lineheight, + $subheader-color: $subheader-color, + $subheader-font-weight: $subheader-font-weight, + $subheader-margin-top: $subheader-margin-top, + $subheader-margin-bottom: $subheader-margin-bottom, + $hr-width: $hr-width, + $hr-border: $hr-border, + $hr-margin: $hr-margin, + $anchor-text-decoration: $anchor-text-decoration, + $anchor-color: $anchor-color, + $anchor-color-visited: $anchor-color-visited, + $anchor-color-hover: $anchor-color-hover, + $anchor-color-active: $anchor-color-active, + $stat-font-size: $stat-font-size, + $button-padding: $button-padding, + $button-font-size: $button-font-size, + $button-color: $button-color, + $button-color-alt: $button-color-alt, + $button-font-weight: $button-font-weight, + $button-margin: $button-margin, + $button-background: $button-background, + $button-border: $button-border, + $button-radius: $button-radius, + $button-rounded: $button-rounded, + $callout-background-fade: $callout-background-fade, + $callout-padding: $callout-padding, + $callout-margin-bottom: $callout-margin-bottom, + $callout-border: $callout-border, + $callout-border-secondary: $callout-border-secondary, + $callout-border-success: $callout-border-success, + $callout-border-warning: $callout-border-warning, + $callout-border-alert: $callout-border-alert, + $menu-item-padding: $menu-item-padding, + $menu-item-gutter: $menu-item-gutter, + $menu-item-color: $menu-item-color, + $thumbnail-border: $thumbnail-border, + $thumbnail-margin-bottom: $thumbnail-margin-bottom, + $thumbnail-shadow: $thumbnail-shadow, + $thumbnail-shadow-hover: $thumbnail-shadow-hover, + $thumbnail-transition: $thumbnail-transition, + $thumbnail-radius: $thumbnail-radius +);