From e485ef3b4db65b1574576ea15f47d38d9286d7a8 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 15 Aug 2023 13:01:56 -0400 Subject: [PATCH 01/15] change page background color --- packages/assets/scss/00-base/_elements.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/assets/scss/00-base/_elements.scss b/packages/assets/scss/00-base/_elements.scss index 924190328e..a19848f82b 100644 --- a/packages/assets/scss/00-base/_elements.scss +++ b/packages/assets/scss/00-base/_elements.scss @@ -42,6 +42,9 @@ body { color: $c-font-base; font-family: $fonts; font-weight: $fonts-light; + + // TEST BACKGROUND + background-color: #121212; } a { From c992b750f5d40e7b29e4299d10b1a2c302dec4c1 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Wed, 16 Aug 2023 17:55:14 -0400 Subject: [PATCH 02/15] test colors --- .../assets/scss/00-base/_color-tokens.scss | 2 +- packages/assets/scss/00-base/_colors.scss | 4 +-- packages/assets/scss/01-atoms/_site-logo.scss | 3 ++ .../scss/02-molecules/_brand-banner.scss | 28 ++++++++++++++----- .../scss/02-molecules/_header-search.scss | 16 +++++++++++ .../assets/scss/02-molecules/_main-nav.scss | 25 ++++++++++++++--- .../assets/scss/03-organisms/_footer-new.scss | 18 ++++++------ .../scss/03-organisms/_search-banner.scss | 11 ++++++-- .../source/_patterns/05-pages/Homepage.json | 4 +-- 9 files changed, 84 insertions(+), 27 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index cb2faa0b34..a814786ec9 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -110,4 +110,4 @@ $c-error-red-lighter: #EEACAC !default; //Commonly used in outline $c-error-red-lightest: #FCF3F3 !default; //Commonly used in background // Focus Highlight (#3e94cf) -$c-focus-hightlight: #3e94cf !default; +$c-focus-hightlight: #1aeaff !default;//#3e94cf !default; diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 9e39abb16a..75cb1868d0 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -32,12 +32,12 @@ $c-font-medium: $c-gray !default; $c-font-heading: $c-black !default; $c-font-inverse: $c-white !default; -$c-font-link: $c-bay-blue !default; +$c-font-link: #1aeaff !default;//$c-bay-blue !default; $c-font-error: $c-error !default; $c-bg-comp-title: $c-gray-dark !default; $c-bg-subtle: $c-gray-lightest !default; -$c-bg-section: $c-gray-lightest !default; +$c-bg-section: #202020;// $c-gray-lightest !default; $c-bd-divider: $c-gray-light !default; $c-bd-divider-dark: $c-gray-dark !default; diff --git a/packages/assets/scss/01-atoms/_site-logo.scss b/packages/assets/scss/01-atoms/_site-logo.scss index fc183b0790..272c79b726 100644 --- a/packages/assets/scss/01-atoms/_site-logo.scss +++ b/packages/assets/scss/01-atoms/_site-logo.scss @@ -16,6 +16,9 @@ line-height: 1; letter-spacing: $letter-spacing-small; + // TEST STYLE + -webkit-text-stroke: 0.5px #777; + @media ($bp-small-max) { width: 102px;// 108px - margin-left(6) margin-left: 0.3rem; diff --git a/packages/assets/scss/02-molecules/_brand-banner.scss b/packages/assets/scss/02-molecules/_brand-banner.scss index d05b0bbf70..4d730ec20e 100644 --- a/packages/assets/scss/02-molecules/_brand-banner.scss +++ b/packages/assets/scss/02-molecules/_brand-banner.scss @@ -4,7 +4,8 @@ width: 100%; background-color: $c-primary-lightest; - font-size: $fonts-xsmall; + font-size: 16px;//$fonts-xsmall; + font-weight: 400; @include background-colors( $lightTheme: ( @@ -30,8 +31,8 @@ @include ma-container; display: flex; width: 100%; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 8px;//5px; + padding-bottom: 8px;//5px; text-align: left; @media ($bp-x-small-min) { @@ -40,9 +41,9 @@ } &-logo { - height: 20px; - width: 20px; - margin-right: 5px; + height: 25px;//20px; + width: 25px;//20px; + margin-right: 10px;//5px; &--dark { // Filter is not supported in IE. When use the dark theme, you should use the white version of seal instead. @@ -123,4 +124,17 @@ } } -} \ No newline at end of file + // TEST STYLE + button { + font-weight: 400; + + .ma__button-icon--quaternary.ma__button-icon--c-white { + font-size: 16px; + border-bottom: 2px solid rgba(255,255,255,.8); + + svg { + fill: rgba(255,255,255,.8); + } + } + } +} diff --git a/packages/assets/scss/02-molecules/_header-search.scss b/packages/assets/scss/02-molecules/_header-search.scss index e33da915ef..6fdde8f167 100644 --- a/packages/assets/scss/02-molecules/_header-search.scss +++ b/packages/assets/scss/02-molecules/_header-search.scss @@ -20,6 +20,11 @@ $bp-header-search-reduce-button: "max-width: 700px"; padding-right: 128px; padding-left: 17px; width: 100%; + // TEST STYLE + background: rgba(225,225,225,.1); + color: #d4d4d4; + font-weight: 400; + border: 2px solid #777; &::-ms-clear { display: none; @@ -43,6 +48,17 @@ $bp-header-search-reduce-button: "max-width: 700px"; right: 0; top: 0; + // TEST STYLE + background: rgba(225,225,225,.1); + color: #d4d4d4; + font-size: 15px;//16px; + font-weight: 500; + border-color: #777 !important; + + & > svg { + fill: #D7E7DD; + } + @media ($bp-header-search-reduce-button) { span { diff --git a/packages/assets/scss/02-molecules/_main-nav.scss b/packages/assets/scss/02-molecules/_main-nav.scss index 932eb0ae6c..9e167ca968 100644 --- a/packages/assets/scss/02-molecules/_main-nav.scss +++ b/packages/assets/scss/02-molecules/_main-nav.scss @@ -82,6 +82,9 @@ transition: all 0.4s ease; width: 100%; + // TEST STYLE + color: #cacaca; + @media ($bp-header-toggle-max) { padding-right: 20px; padding-left: 20px; @@ -261,6 +264,10 @@ &.has-focus { background-color: $c-white; box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25); + + // TEST STYLE + background-color: #cacaca; + box-shadow: 0 0.25rem 0.5rem rgba(#efefef, 0.4); } &.is-active { @@ -269,12 +276,21 @@ } } + // TEST STYLE + .is-open > &__top-link { + color: #202020; + + &:hover { + color: #202020; + } +} + &__subitems { background-color: $c-bg-section; @media ($bp-header-toggle-min) { - background-color: $c-white; - box-shadow: 0 0.25em 0.5rem rgba(#000, 0.25); + background-color: #cacaca;//$c-white; + box-shadow: 0 0.25em 0.5rem rgba(#efefef, 0.4); } } @@ -286,7 +302,7 @@ } &__subitem { - border-bottom-color: $c-bd-divider; + border-bottom-color: #cacaca;//$c-bd-divider; } &__link { @@ -295,7 +311,8 @@ &:hover, &:focus { - background-color: $c-bg-subtle; + background-color: #202020;//$c-bg-subtle; + color: #cacaca; } } diff --git a/packages/assets/scss/03-organisms/_footer-new.scss b/packages/assets/scss/03-organisms/_footer-new.scss index 02cd28f5b4..b5eb309e20 100644 --- a/packages/assets/scss/03-organisms/_footer-new.scss +++ b/packages/assets/scss/03-organisms/_footer-new.scss @@ -4,11 +4,11 @@ // height: 100px; background-color: $c-bg-section; - + &__container { @include ma-container; - + @include clearfix; display: flex; @@ -17,7 +17,7 @@ @media ($bp-medium-max) { flex-direction: column; - } + } } &__logo { @@ -40,7 +40,7 @@ @media ($bp-small-max) { flex-direction: column; } - + & > div { @@ -56,14 +56,14 @@ } & > a { - + @include ma-link-underline; padding-bottom: 3px; - color: $c-font-base; + color: #cacaca;//$c-font-base; font-weight: $fonts-normal; - + &:hover { - border-bottom-color: rgba($c-font-dark,.5); + border-bottom-color: rgba(#cacaca,.5);//rgba($c-font-dark,.5); } } } @@ -72,7 +72,7 @@ &__copyright { font-size: $fonts-xsmall; - color: $c-gray-dark; + color: #ababab;//$c-gray-dark; font-weight: $fonts-lighter; &--bold { diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index f7927c1968..c279d81c50 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -89,7 +89,7 @@ &__form { display: flex; margin: 0 auto 30px; - + @media ($bp-medium-min) { margin: 0 auto 60px; } @@ -183,7 +183,7 @@ margin-right: auto; background-color: rgba(0, 0, 0, 0.5); padding: 10px 20px; - + @media ($bp-medium-min) { padding: 30px 60px; } @@ -224,6 +224,9 @@ @include ma-container; z-index: 3; width: 100%; + + // TEST STYLE + display: none; } // Start backward compatible with v5.7 - converted image-credit to new Banner Credit molecule @@ -283,6 +286,10 @@ background-size: cover; position: relative; + // TEST STYLE + background-color: #505050; + background-image: none; + &:after { background-color: rgba($c-black, .6); } diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json b/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json index 035ba78d91..3bf04396bd 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json @@ -3,8 +3,8 @@ "hideBackTo": true, "floatingAction": null, "searchBanner": { - "bgWide": "../../assets/images/placeholder/1600x800.png", - "bgNarrow": "../../assets/images/placeholder/800x800.png", + "bgWide": "", + "bgNarrow": "", "id": "GUID935283478A", "searchBannerForm": { "action": "", From 743645ce47adafee27d118996324e1613db82f62 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Wed, 16 Aug 2023 18:11:56 -0400 Subject: [PATCH 03/15] error page --- .../assets/scss/03-organisms/_error-page.scss | 15 ++++++++++----- .../scss/04-templates/_narrow-template.scss | 6 +++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index e7940fdcdc..ce0db0dee1 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -45,17 +45,22 @@ .ma__error-page { - &:before { - background-color: rgba($c-warning, .15); + // &:before { + // background-color: rgba($c-warning, .15); + // } + + h1, h3 { + color: #fff; } &__label { color: $c-warning; font-weight: 900; + opacity: .9; } &__type { - color: $c-font-detail; + color: #A1A1A1;//$c-font-detail; font-weight: $fonts-bold; } @@ -64,7 +69,7 @@ } &__message { - color: $c-font-base; - font-weight: $fonts-lighter; + color: #fff;//$c-font-base; + font-weight: 400;//$fonts-lighter; } } diff --git a/packages/assets/scss/04-templates/_narrow-template.scss b/packages/assets/scss/04-templates/_narrow-template.scss index 207fab9e1d..978b3ecb08 100644 --- a/packages/assets/scss/04-templates/_narrow-template.scss +++ b/packages/assets/scss/04-templates/_narrow-template.scss @@ -165,7 +165,7 @@ $narrow-template-header-height: 170px; background-color: rgba($c-primary-alt, .15); } - &--yellow:before { - background-color: rgba($c-highlight, .15); - } + // &--yellow:before { + // background-color: rgba($c-highlight, .15); + // } } From 47720c9f580b37efec4e83b223be1599b70c06a9 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Wed, 16 Aug 2023 18:23:14 -0400 Subject: [PATCH 04/15] error page linklist --- packages/assets/scss/03-organisms/_error-page.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss index ce0db0dee1..030d7f6d29 100644 --- a/packages/assets/scss/03-organisms/_error-page.scss +++ b/packages/assets/scss/03-organisms/_error-page.scss @@ -49,7 +49,7 @@ // background-color: rgba($c-warning, .15); // } - h1, h3 { + h1 { color: #fff; } @@ -73,3 +73,10 @@ font-weight: 400;//$fonts-lighter; } } + +.ma__narrow-template--yellow { + + .ma__link-list .ma__comp-heading { + color: #fff; + } +} From bf7aa18b6401015fa3534012dc71dcb52d7024e3 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 22 Aug 2023 21:44:43 -0400 Subject: [PATCH 05/15] add test styles --- .../assets/scss/01-atoms/_comp-heading.scss | 5 + .../02-molecules/_main-nav-hamburger.scss | 20 +- .../_relationship-indicators.scss | 25 +-- .../scss/03-organisms/_breadcrumbs.scss | 34 ++-- .../scss/03-organisms/_header-hamburger.scss | 47 +++-- .../scss/03-organisms/_page-banner.scss | 4 +- .../_table-of-contents-hierarchy.scss | 4 +- .../source/_patterns/05-pages/topic-new.json | 183 ++++++++++++++++++ .../source/_patterns/05-pages/topic-new.twig | 13 ++ 9 files changed, 276 insertions(+), 59 deletions(-) create mode 100644 packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json create mode 100644 packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig diff --git a/packages/assets/scss/01-atoms/_comp-heading.scss b/packages/assets/scss/01-atoms/_comp-heading.scss index 6d7b77e421..fa4073c636 100644 --- a/packages/assets/scss/01-atoms/_comp-heading.scss +++ b/packages/assets/scss/01-atoms/_comp-heading.scss @@ -5,6 +5,8 @@ &:not(&--sidebar) { @include ma-comp-heading; + + color: #f2f2f2;// OVERRIDE INCLUDE } &--sidebar, @@ -55,6 +57,9 @@ &--sidebar { @include ma-sidebar-heading($c-bd-divider,$c-font-base); + + border-color: #707070; // OVERRIDE INCLUDE + color: #f2f2f2;// OVERRIDE INCLUDE } .sidebar--colored & { diff --git a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss index cee8f4f68f..9dd42e492c 100644 --- a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss +++ b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss @@ -6,7 +6,7 @@ padding: 0; @media ($bp-header-toggle-max) { - border-top: 2px solid $c-bd-divider; + border-top: 2px solid #707070;//$c-bd-divider; } &__items { @@ -15,7 +15,7 @@ } &__item { - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid #707070;//$c-bd-divider; } &__top-link { @@ -31,9 +31,9 @@ text-transform: uppercase; transition: all 0.4s ease; text-align: left; - background-color: $c-gray-lightest; + background-color: #141414;//$c-gray-lightest; width: 100%; - color: inherit; + color: #f2f2f2;// <--$c-gray-lightest inherit; .toggle-indicator { @@ -47,13 +47,14 @@ } } - &:focus { - background-color: $c-bd-divider; + &:focus, &:hover {// hover is added + background-color: #515151;//$c-bd-divider; outline: 2px solid $c-black; } &.cv-alternate-style { background-color: #f7c600; + color: #141414;// keep the original font color for this // Adding chevron for direct link. @@ -72,7 +73,7 @@ &__subitems { text-align: left; z-index: $z-dropdown; - background-color: $c-bg-section; + background-color: #141414;//$c-bg-section; transition: height 0.4s; &.is-closed { @@ -113,10 +114,11 @@ font-weight: 400; line-height: 1.33; padding: 10px 20px 10px 30px; - color: $c-black; + color: #f2f2f2;//$c-black; &:hover { - text-decoration: underline; + // text-decoration: underline; It already has underline at normal state. + background-color: #515151; } &>svg, diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index 8f7090b1e9..e2e9f18e0c 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -55,13 +55,13 @@ height: 14px; path, use { - fill: $c-font-detail; + fill: #bababa;//$c-font-detail; } } } &--label { - color: $c-font-detail; + color: #bababa;//$c-font-detail; text-transform: uppercase; letter-spacing: $letter-spacing-large; margin-right: 10px; @@ -246,11 +246,12 @@ &.single [aria-labelledby="secondary"] { a { - color: $c-primary-alt; - box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt, 0.4); + color: $c-primary; + color: #2CD26E;//$c-primary-alt; + box-shadow: inset 0 0 white, inset 0px -1px rgba(#2CD26E, .4);//$c-primary-alt, 0.4); &:hover { - box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary-alt, 0.7); + box-shadow: inset 0 0 white, inset 0px -2px rgba(#2CD26E, .7);//$c-primary-alt, 0.7); } } } @@ -263,7 +264,7 @@ } button { - color: $c-primary-alt; + color: #2CD26E;//$c-primary-alt; } .ma__relationship-indicators { @@ -282,15 +283,15 @@ &--term { margin: 0 5px 0 0; padding-right: 0; - + @media ($bp-medium-min) { margin: 0 5px; } - + a { margin-right: 10px; position: relative; - + &:before { content: ""; width: 10px; @@ -298,7 +299,7 @@ height: $fonts-smaller; right: -10px; bottom: 1px; - border-right: 1px solid $c-gray-light; + border-right: 1px solid #bababa;//$c-gray-light; } } @@ -309,7 +310,7 @@ &__expand-indicators { margin: 0 5px 0 0; - + @media ($bp-medium-min) { margin: 0 5px; } @@ -353,4 +354,4 @@ padding-left: 10px; } } -} \ No newline at end of file +} diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index f64af9464d..283d0402d1 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -87,7 +87,7 @@ $breadcrumbs-scrollbar-height: 12px; margin-left: 0; margin-right: 3px; width: 7px; - border-color: $c-gray-dark; + border-color: #989898;//$c-gray-dark; } &:first-child { @@ -120,7 +120,7 @@ $breadcrumbs-scrollbar-height: 12px; } button { - border: 2px solid $c-bay-blue-50-tint; + border: 2px solid rgba(26,234,255, .5);//$c-bay-blue-50-tint; background: transparent; width: 27px; height: 25px; @@ -135,7 +135,7 @@ $breadcrumbs-scrollbar-height: 12px; } a, button { - color: $c-primary; + color: #1aeaff;// $c-primary; display: inline-block; font-size: $fonts-xsmall; line-height: 1; @@ -144,7 +144,7 @@ $breadcrumbs-scrollbar-height: 12px; text-decoration: none; &:hover { - text-shadow: 0px 0px 0px $c-primary ; + text-shadow: 0px 0px 0px #1aeaff;// $c-primary ; } } @@ -154,26 +154,26 @@ $breadcrumbs-scrollbar-height: 12px; transition: border 0.4s; &:hover { - border: 2px solid $c-primary; + border: 2px solid #1aeaff;// $c-primary; } } a { - box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary, 0.4); + box-shadow: inset 0 0 white, inset 0px -1px rgba(#1aeaff, .6);//($c-primary, 0.4); svg { - fill: $c-primary; - stroke: $c-primary; + fill: #1aeaff;// $c-primary; + stroke: #1aeaff;// $c-primary; transition: fill 0.4s, stroke 0.4s; will-change: fill, stroke; } &:hover { - box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary, 0.7); + box-shadow: inset 0 0 white, inset 0px -2px rgba(#1aeaff, .7);//$c-primary, 0.7); svg { - fill: $c-bay-blue-50-tint; - stroke: $c-bay-blue-50-tint; + fill: rgba(26,234,255, .5);//$c-bay-blue-50-tint; + stroke: rgba(26,234,255, .5);//$c-bay-blue-50-tint; } } @@ -276,10 +276,10 @@ $breadcrumbs-scrollbar-height: 12px; .ma__breadcrumbs { @media ($bp-medium-min) { - background-color: $c-bg-section; + background-color: #121212;//$c-bg-section; &__items { - border-top-color: $c-bd-divider; + border-top-color: #707070;//$c-bd-divider; } } @@ -289,24 +289,24 @@ $breadcrumbs-scrollbar-height: 12px; &__sub-items { background-color: $c-white; - box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25); + box-shadow: 0 0.25rem 0.5rem rgba(#f2f2f2, .25);//$c-black, 0.25); } &--light { - background-color: $c-white; + background-color: #121212;//$c-white; } &--light &__items { @media ($bp-medium-min) { - border-bottom-color: $c-bd-divider; + border-bottom-color: #707070;//$c-bd-divider; } } &--light &__container { @media ($bp-medium-max) { - border-bottom-color: $c-bd-divider; + border-bottom-color: #707070;//$c-bd-divider; } } } diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index c760f7558b..637783213f 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -191,7 +191,7 @@ body.show-menu { &--mobile { padding: 20px; width: 100%; - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid #707070;//$c-bd-divider; a img { width: 45px; @@ -258,7 +258,7 @@ body.show-menu { } &__nav-container { - background-color: $c-gray-lightest; + background-color: #141414;//$c-gray-lightest; height: calc(100vh - 44px); top: 44px; overflow-y: auto; @@ -513,15 +513,26 @@ body.show-menu { &__item { - border-bottom: 2px solid $c-bd-divider; + border-bottom: 2px solid #707070;//$c-bd-divider; padding: 0; &:hover { - background-color: $c-gray-lightest; + background-color: #515151;//$c-gray-lightest; box-shadow: none; } } + .ma__utility-nav__translate { + + svg { + fill: #A1BBD2; + } + + a { + color: #f2f2f2; + } + } + &__link, a.direct-link { @include ma-button-reset; @@ -535,12 +546,13 @@ body.show-menu { text-transform: uppercase; transition: all 0.4s ease; text-align: left; - background-color: $c-gray-lightest; + background-color: #141414;//$c-gray-lightest; width: 100%; + color: #f2f2f2; - &:focus { - background-color: $c-bd-divider; - outline: 2px solid $c-black; + &:focus, &:hover { + background-color: #515151;//$c-bd-divider; + // outline: 2px solid $c-black; } .toggle-indicator { @@ -559,6 +571,7 @@ body.show-menu { top: auto; left: auto; transform: none; + fill: #A1BBD2; } & > span { @@ -590,7 +603,7 @@ body.show-menu { position: relative; top: auto; right: auto; - color: $c-black; + color: #f2f2f2;//$c-black; z-index: $z-overlay; transition: max-height 0.6s ease-in-out; @@ -613,7 +626,7 @@ body.show-menu { & .ma__utility-nav__container { padding: 0; - background-color: $c-gray-lightest; + background-color: #141414;//$c-gray-lightest; overflow-y: visible; max-height: auto; @@ -637,8 +650,8 @@ body.show-menu { } & .ma__utility-panel { - background-color: $c-gray-lightest; - color: $c-black; + background-color: #141414;//$c-gray-lightest; + color: #f2f2f2;//$c-black; @include ma-reset-list; @@ -652,7 +665,7 @@ body.show-menu { & .ma__rich-text { padding-top: 0.8em; - border-top: 2px solid $c-bd-divider; + border-top: 2px solid #707070;//$c-bd-divider; } } @@ -663,7 +676,7 @@ body.show-menu { position: relative; line-height: 1.33; padding: 0 20px 10px 20px; - color: $c-black; + color: #f2f2f2;//$c-black; margin-bottom: 0; } @@ -672,8 +685,8 @@ body.show-menu { } & .ma__utility-panel__item { - background-color: $c-gray-lightest; - color: $c-black; + background-color: #141414;//$c-gray-lightest; + color: #f2f2f2;//$c-black; margin: 0; display: block; } @@ -694,7 +707,7 @@ body.show-menu { font-weight: 400; line-height: 1.33; padding: 10px 20px 10px 30px; - color: $c-black; + color: #f2f2f2;//$c-black; &:hover { text-decoration: underline; diff --git a/packages/assets/scss/03-organisms/_page-banner.scss b/packages/assets/scss/03-organisms/_page-banner.scss index 16e222fbd1..5b7787424d 100644 --- a/packages/assets/scss/03-organisms/_page-banner.scss +++ b/packages/assets/scss/03-organisms/_page-banner.scss @@ -504,7 +504,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // white background &--white { - background-color: white; + background-color: #121212;//white; color: $c-font-base; &:before { @@ -530,7 +530,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); &--white &__title, &--white &__description { - color: $c-font-base; + color: #f2f2f2;//$c-font-base; } } diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index eb1102609c..7e822a322a 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -151,7 +151,7 @@ } &--no-background { - border-bottom: 1px solid $c-gray-light; + border-bottom: 1px solid #707070;//$c-gray-light; margin-top: 4rem; .ma__toc--hierarchy { @@ -237,4 +237,4 @@ padding: unset; } } -} \ No newline at end of file +} diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json new file mode 100644 index 0000000000..ec8d8ba4b3 --- /dev/null +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json @@ -0,0 +1,183 @@ +{ + "pageBanner": { + "size": "full", + "icon": "", + "color": "white", + "underline": true, + "title": "New Topics", + "description": "" + }, + "stackedRowSection": { + "pageContent": [ + { + "path": "@organisms/by-template/table-of-contents-hierarchy.twig", + "data": { + "tableOfContentsHierarchy": { + "title": { + "id": "State Parks & Recreation", + "text": "For Workers", + "colored": false + }, + "background": "none", + "sections": [ + { + "text": "Unemployment Insurance (UI) for Workers ", + "href": "#" + }, + { + "text": "Pandemic Unemployment Assistance (PUA) ", + "href": "#" + }, + { + "text": "DUA Multilingual Services", + "href": "#" + }, + { + "text": "WorkShare for Workers", + "href": "#" + }, + { + "text": "Training & Assistance", + "linkItems": [ + { + "text": "Unemployment Insurance (UI) for Employers", + "href": "#" + }, + { + "text": "WorkShare for Employers", + "href": "#" + }, + { + "title": "For Workers", + "subItems": [ + { + "text": "Training Opportunities Program (TOP)", + "href": "#" + }, + { + "text": "MassHire Career Centers", + "href": "#" + }, + { + "text": "Vocational Rehabilitation", + "href": "#" + } + ] + }, + { + "title": "For Employers", + "subItems": [ + { + "text": "Prevent layoffs with Rapid Response", + "href": "#" + } + ] + } + ] + } + ] + } + } + }, + { + "path": "@organisms/by-author/related-orgs-and-topics.twig", + "data": { + "relatedOrgsAndTopics": { + "header": { + "title": "Related Information", + "level": "2" + }, + "columns": [ + { + "column_title": "Organizations", + "linkList": { + "compHeading": { + "title": "Organizations", + "sidebar": true, + "level": "3" + }, + "stacked": true, + "links": [ + { + "href": "#", + "text": "Related Organization #1" + }, + { + "href": "#", + "text": "Related Organization #2" + }, + { + "href": "#", + "text": "Related Organization #3" + }, + { + "href": "#", + "text": "Executive Office of Health and Human Services" + }, + { + "href": "#", + "text": "Related Organization #5" + }, + { + "href": "#", + "text": "Related Organization #6" + }, + { + "href": "#", + "text": "Related Organization #7" + }, + { + "href": "#", + "text": "Board of Registration in Allied Mental Health and Human Services Professions" + }, + { + "href": "#", + "text": "Related Organization #9" + }, + { + "href": "#", + "text": "Board of Registration of Professional Engineers and Professional Land Surveyors " + }, + { + "href": "#", + "text": "Massachusetts Commission on Lesbian, Gay, Bisexual, Transgender, Queer and Questioning Youth" + }, + { + "href": "#", + "text": "Related Organization #12" + } + ] + } + }, + { + "column_title": "Topics", + "linkList": { + "compHeading": { + "title": "Topics", + "sidebar": true, + "level": "3" + }, + "stacked": true, + "links": [ + { + "href": "#", + "text": "Related Topic #1" + }, + { + "href": "#", + "text": "Related Topic #2" + }, + { + "href": "#", + "text": "Related Topic #3" + } + ] + } + } + ] + } + } + } + ] + } +} diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig new file mode 100644 index 0000000000..776fe38987 --- /dev/null +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig @@ -0,0 +1,13 @@ +{% extends '@templates/single-column.twig' %} + +{% block preContent %} + {% include "@organisms/page-banner/page-banner.twig" %} +{% endblock %} + +{% block pageContent %} + {% include "@organisms/by-author/stacked-row-section.twig" %} + {% include "@organisms/by-template/table-of-contents-hierarchy.twig" %} + {% include "@organisms/by-author/related-orgs-and-topics.twig" %} +{% endblock %} + +{% block postContent %}{% endblock %} From e5416be6011bab99a8bd4df30e76c5556c826c5c Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 22 Aug 2023 22:33:40 -0400 Subject: [PATCH 06/15] add new topic page sample --- .../source/_patterns/05-pages/topic-new.json | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json index ec8d8ba4b3..c19dd0b8c7 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json @@ -21,20 +21,25 @@ "background": "none", "sections": [ { - "text": "Unemployment Insurance (UI) for Workers ", - "href": "#" - }, - { - "text": "Pandemic Unemployment Assistance (PUA) ", - "href": "#" - }, - { - "text": "DUA Multilingual Services", - "href": "#" - }, - { - "text": "WorkShare for Workers", - "href": "#" + "text": "Unemproyment", + "linkItems": [ + { + "text": "Unemployment Insurance (UI) for Workers ", + "href": "#" + }, + { + "text": "Pandemic Unemployment Assistance (PUA) ", + "href": "#" + }, + { + "text": "DUA Multilingual Services", + "href": "#" + }, + { + "text": "WorkShare for Workers", + "href": "#" + } + ] }, { "text": "Training & Assistance", @@ -70,10 +75,18 @@ { "text": "Prevent layoffs with Rapid Response", "href": "#" + }, + { + "text": "Another sub item", + "href": "#" } ] } ] + }, + { + "text": "Executive Summary", + "href": "#" } ] } From db00276759b9745abbdd14866658e570fb1c5109 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Mon, 28 Aug 2023 14:53:27 -0400 Subject: [PATCH 07/15] apply test styles for topic page --- .../scss/00-base/mixins/_ma-border-decorative.scss | 3 ++- .../assets/scss/01-atoms/_decorative-link.scss | 6 +++--- packages/assets/scss/03-organisms/_link-list.scss | 2 +- .../03-organisms/_related-orgs-and-topics.scss | 12 ++++++------ .../03-organisms/_table-of-contents-hierarchy.scss | 14 +++++++------- .../source/_patterns/05-pages/topic-new.twig | 2 -- 6 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss index 48adca0527..ad135baf77 100644 --- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss +++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss @@ -5,7 +5,8 @@ @use "00-base/colors" as *; -@mixin ma-border-decorative($fg: transparent, $opacity: .5) { +@mixin ma-border-decorative($fg: transparent, $opacity: .8) { +// @mixin ma-border-decorative($fg: transparent, $opacity: .5) { @if ($fg == transparent) { position: relative; diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss index b05e3c2fb6..d76b8063a9 100644 --- a/packages/assets/scss/01-atoms/_decorative-link.scss +++ b/packages/assets/scss/01-atoms/_decorative-link.scss @@ -8,16 +8,16 @@ width: 100%; a:hover { - border-bottom-color: rgba($c-font-link,.5); + border-bottom-color: rgba($c-font-link,.6);//.5); } a:focus { // important needed to overwrite the focus border color - border-bottom-color: rgba($c-font-link,.5) !important; + border-bottom-color: rgba($c-font-link,.6);//.5) !important; } svg { - fill: rgba($c-font-link,.5); + fill: rgba($c-font-link,.7);//5); } &.button-link { diff --git a/packages/assets/scss/03-organisms/_link-list.scss b/packages/assets/scss/03-organisms/_link-list.scss index 8660c23c71..a4fe0405b0 100644 --- a/packages/assets/scss/03-organisms/_link-list.scss +++ b/packages/assets/scss/03-organisms/_link-list.scss @@ -61,7 +61,7 @@ &__item { padding: 5px 0; - color: $c-font-detail; + color: #dcdcdc;//$c-font-detail; .ma__decorative-link { display: block; diff --git a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss index 6eb5396818..476a0a00eb 100644 --- a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss +++ b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss @@ -4,7 +4,7 @@ @include ma-container(); - + &__columns { margin-top: 45px; @@ -18,7 +18,7 @@ &__column { @media ($bp-medium-min) { - flex: 1; + flex: 1; } &:first-child { @@ -91,7 +91,7 @@ .ma__related-orgs-and-topics--toggle { position: relative; - color: $c-primary; + color: $c-font-link;//$c-primary; font-weight: $fonts-bold; background-color: transparent; border: none; @@ -108,8 +108,8 @@ transform: translateY(-50%) rotate(45deg); right: 0; display: inline-block; - border-right: 4px solid rgba($c-primary, 0.3); - border-bottom: 4px solid rgba($c-primary, 0.3); + border-right: 4px solid rgba($c-font-link, 0.6);//$c-primary, 0.3); + border-bottom: 4px solid rgba($c-font-link, 0.6);//$c-primary, 0.3); height: 10px; width: 10px; transition: all .2s; @@ -125,7 +125,7 @@ } &.open { - + &::after { transform: translateY(-50%) rotate(225deg); } diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 7e822a322a..355f6c91a7 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -44,7 +44,7 @@ border: 2px solid $c-gray-light; > * + * { - border-top: 1px solid $c-gray-light; + border-top: 1px solid #707070;//$c-gray-light; } // Visual cue for the clickable area. @@ -55,7 +55,7 @@ a { border-bottom-width: 3px; border-bottom-style: solid; - border-bottom-color: rgba(20, 85, 143, 0.5); + border-bottom-color: rgba($c-font-link,.6);//20, 85, 143, 0.5); } } @@ -77,8 +77,8 @@ margin-bottom: 0; display: none; padding: 20px 0 10px 20px; - background: $c-white; - border-top: 2px solid $c-gray-light; + background: #121212;//$c-white; + border-top: 2px solid #707070;//$c-gray-light; // Visual cue for the clickable area. @@ -89,7 +89,7 @@ a:hover { border-bottom-width: 3px; border-bottom-style: solid; - border-bottom-color: rgba(20, 85, 143, 0.5); + border-bottom-color: rgba($c-font-link,.6);//20, 85, 143, 0.5); } li { @@ -126,12 +126,12 @@ text-align: left; width: 100%; font-weight: $fonts-bolder; - color: $c-primary; + color: #1aeaff;//$c-primary; &:after { font-size: $fonts-4xlarge; content: "+"; - color: $c-primary-alt; + color: #2cd26e;//$c-primary-alt; line-height: .65em; overflow: hidden; position: absolute; diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig index 776fe38987..cb214dbef6 100644 --- a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig +++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig @@ -6,8 +6,6 @@ {% block pageContent %} {% include "@organisms/by-author/stacked-row-section.twig" %} - {% include "@organisms/by-template/table-of-contents-hierarchy.twig" %} - {% include "@organisms/by-author/related-orgs-and-topics.twig" %} {% endblock %} {% block postContent %}{% endblock %} From 047646b4dc12de6de2ab901629218cd553177f4e Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 29 Aug 2023 12:53:35 -0400 Subject: [PATCH 08/15] aply test styles to info details --- packages/assets/scss/00-base/_colors.scss | 4 ++-- .../scss/02-molecules/_contact-group.scss | 2 +- .../assets/scss/02-molecules/_contact-us.scss | 10 ++++---- .../scss/02-molecules/_listing-table.scss | 2 +- .../scss/03-organisms/_footnote-list.scss | 2 +- .../scss/03-organisms/_image-credit.scss | 4 ++-- .../assets/scss/03-organisms/_pullquote.scss | 5 ++-- .../assets/scss/03-organisms/_sticky-toc.scss | 23 +++++++++++-------- 8 files changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 75cb1868d0..45bb557c7b 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -25,12 +25,12 @@ $c-focus: $c-focus-hightlight !default; // Need to add these colors to this listing new to add // $c-visited -$c-font-base: $c-black !default; +$c-font-base: #f2f2f2;//$c-black !default; $c-font-detail: $c-gray-dark !default; $c-font-dark: $c-black !default; $c-font-medium: $c-gray !default; -$c-font-heading: $c-black !default; +$c-font-heading: #f2f2f2;//$c-black !default; $c-font-inverse: $c-white !default; $c-font-link: #1aeaff !default;//$c-bay-blue !default; $c-font-error: $c-error !default; diff --git a/packages/assets/scss/02-molecules/_contact-group.scss b/packages/assets/scss/02-molecules/_contact-group.scss index 7f23e85c81..86f0e1992e 100644 --- a/packages/assets/scss/02-molecules/_contact-group.scss +++ b/packages/assets/scss/02-molecules/_contact-group.scss @@ -91,7 +91,7 @@ &__name { svg { - fill: $c-primary-alt; + fill: #609D79;//$c-primary-alt; } span { diff --git a/packages/assets/scss/02-molecules/_contact-us.scss b/packages/assets/scss/02-molecules/_contact-us.scss index 68b2d184d0..381b2b106d 100644 --- a/packages/assets/scss/02-molecules/_contact-us.scss +++ b/packages/assets/scss/02-molecules/_contact-us.scss @@ -124,7 +124,7 @@ padding-left: 30px; padding-right: 30px; margin-top: 20px; - border-left: 1px solid $c-bd-divider; + border-left: 1px solid #707070;//$c-bd-divider; // Reset if we aren't in an accordion @@ -256,15 +256,15 @@ .ma__contact-us { & + & { - border-color: $c-bd-divider; + border-color: #707070;//$c-bd-divider; } &--accordion { - border-color: $c-bd-divider; + border-color: #707070;//$c-bd-divider; } &--accordion:not(.is-open) &__header { - background-color: $c-bg-section; + background-color: #404040;//$c-bg-section; } &--accordion.is-open &__header { @@ -273,7 +273,7 @@ &--accordion &__header:after, &--accordion &__header &--accordion__status { - color: $c-primary-alt; + color: #2CD26E;//$c-primary-alt; } &__expand { diff --git a/packages/assets/scss/02-molecules/_listing-table.scss b/packages/assets/scss/02-molecules/_listing-table.scss index 258ad18331..343c862633 100644 --- a/packages/assets/scss/02-molecules/_listing-table.scss +++ b/packages/assets/scss/02-molecules/_listing-table.scss @@ -173,7 +173,7 @@ .ma__listing-table { tr + tr { - border-top-color: $c-bd-divider; + border-top-color: #707070;//$c-bd-divider; } &__expand { diff --git a/packages/assets/scss/03-organisms/_footnote-list.scss b/packages/assets/scss/03-organisms/_footnote-list.scss index 332dbcd122..2c53a170c6 100644 --- a/packages/assets/scss/03-organisms/_footnote-list.scss +++ b/packages/assets/scss/03-organisms/_footnote-list.scss @@ -21,6 +21,6 @@ .ma__footnote-list { &__container { - border-top-color: $c-bd-divider; + border-top-color: #707070;//$c-bd-divider; } } diff --git a/packages/assets/scss/03-organisms/_image-credit.scss b/packages/assets/scss/03-organisms/_image-credit.scss index c46f51886d..8589d1094a 100644 --- a/packages/assets/scss/03-organisms/_image-credit.scss +++ b/packages/assets/scss/03-organisms/_image-credit.scss @@ -28,9 +28,9 @@ .ma__image-credit { &__container { - + &:before { - border-color: $c-bd-divider; + border-color: #707070;//$c-bd-divider; } &__label { diff --git a/packages/assets/scss/03-organisms/_pullquote.scss b/packages/assets/scss/03-organisms/_pullquote.scss index b2bf9c075c..860101db0f 100644 --- a/packages/assets/scss/03-organisms/_pullquote.scss +++ b/packages/assets/scss/03-organisms/_pullquote.scss @@ -16,7 +16,7 @@ font-size: $fonts-xlarge; font-weight: $fonts-bold; line-height: 1.285; - color: $c-gray-dark; + color: #dcdcdc;//$c-gray-dark; &::before { content: ''; @@ -25,7 +25,8 @@ /* background fallback */ background-color: $c-primary-alt; /* will be on top of fallback, if browser supports it */ - background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0); + background-image: linear-gradient(120deg, #2D6A46 65px, #121212 0); + // background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0); position: absolute; top: 0; } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index f0e692ea1a..c9662e2eb1 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -181,7 +181,7 @@ &__inner { @media ($bp-x-small-min) { - background-color: $c-bg-section; + background-color: #303030;//$c-bg-section; } } @@ -312,7 +312,7 @@ left: 0; transition: height 0.1s ease-out; width: 100%; - background-color: $c-bg-subtle; + background-color: #404040;//$c-bg-subtle; z-index: $z-sticky-content; @media ($bp-header-toggle-max) { @@ -364,6 +364,8 @@ height: 47px; position: relative; + background: #dfdfdf;// TEST STYLE + svg { fill: rgba($c-primary, 0.5); transform: rotate(-90deg); @@ -379,9 +381,9 @@ span { display: block; text-transform: uppercase; - font-size: $fonts-3xsmall; + font-size: 1.2rem;//$fonts-3xsmall; font-weight: $fonts-bold; - color: $c-primary; + color: #104472;//$c-primary; letter-spacing: $letter-spacing-large; margin-top: -4px; } @@ -426,7 +428,7 @@ position: relative; width: 35px; height: 35px; - background-color: $c-primary; + background-color: #14558f;//$c-primary; color: $c-white; .sticky-nav-open & { @@ -436,12 +438,13 @@ span { display: block; font-size: $fonts-2xlarge; - font-weight: 200; + font-weight: 400;//200; left: 50%; line-height: 0; position: absolute; top: 45%; transform: translate(-50%, -50%); + } } } @@ -454,7 +457,7 @@ text-overflow: ellipsis; white-space: nowrap; font-weight: $fonts-bold; - color: $c-black; + color: #f2f2f2;//$c-black; margin-bottom: 0; display: none; @@ -471,7 +474,7 @@ max-width: 550px; top: 0; z-index: 99; - background-color: $c-white; + background-color: #121212;//$c-white; transition: right 0.3s ease-out; overflow: auto; @@ -497,8 +500,8 @@ font-weight: $fonts-normal; letter-spacing: $letter-spacing-large; text-transform: uppercase; - color: $c-gray-dark; - background-color: $c-white; + color: #dcdcdc;//$c-gray-dark; + background-color: #121212;//$c-white; height: 65px; padding: 10px 20px; width: 100%; From 66d11c9feb80c8bf712cdaba0141a6f7f2fb3207 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 29 Aug 2023 16:13:12 -0400 Subject: [PATCH 09/15] aply test styles to service page --- packages/assets/scss/01-atoms/_video.scss | 2 +- packages/assets/scss/02-molecules/_callout-link.scss | 4 ++-- .../assets/scss/02-molecules/_illustrated-link.scss | 6 +++--- .../assets/scss/03-organisms/_action-finder.scss | 12 ++++++------ 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/assets/scss/01-atoms/_video.scss b/packages/assets/scss/01-atoms/_video.scss index 2c33b8270c..8ed933e8c7 100644 --- a/packages/assets/scss/01-atoms/_video.scss +++ b/packages/assets/scss/01-atoms/_video.scss @@ -12,7 +12,7 @@ padding: 13px; position: relative; padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px - background-color: rgba($c-primary,.1); + background-color: rgba(26,234,255,.2);//$c-primary,.1); @media ($bp-large-min) { padding-bottom: 12px + 32px + 13px; diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss index 5ab891c50e..ccc89bc850 100644 --- a/packages/assets/scss/02-molecules/_callout-link.scss +++ b/packages/assets/scss/02-molecules/_callout-link.scss @@ -9,8 +9,8 @@ flex-flow: column wrap; justify-content: center; padding: 15px 20px; - background-color: mix(#fff, $c-font-link,90%); - border-color: mix(#fff, $c-font-link,50%); + background-color: mix(#121212, $c-font-link,90%);//mix(#fff, $c-font-link,90%); + border-color: mix(#121212, $c-font-link,50%);//mix(#fff, $c-font-link,50%); box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25); text-decoration: none; diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss index 469e182ed8..da26798292 100644 --- a/packages/assets/scss/02-molecules/_illustrated-link.scss +++ b/packages/assets/scss/02-molecules/_illustrated-link.scss @@ -79,14 +79,14 @@ $illustrated-link-image-width: 130px; //theme .ma__illustrated-link { - border-color: mix(#fff, $c-primary,50%); + border-color: mix(#121212, #1aeaff,50%); box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25); &__content { - background-color: mix(#fff, $c-primary,89%); + background-color: mix(#121212, #1aeaff,89%); &:after { - background-color: mix(#fff, $c-primary,89%); + background-color: mix(#121212, #1aeaff,89%); } } diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 8bc51ac8bb..1976c2b320 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -178,11 +178,11 @@ $action-finder-border-color: mix(#fff, $c-primary,50%); .ma__action-finder { &:after { - background-image: linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent); + background-image: linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent);//linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent); } &--no-background { - background-image: linear-gradient(180deg, $c-white 50px, $c-bg-section 51px); + background-image: linear-gradient(180deg, #121212 50px, #303030 51px);//linear-gradient(180deg, $c-white 50px, $c-bg-section 51px); } &__category { @@ -208,7 +208,7 @@ $action-finder-border-color: mix(#fff, $c-primary,50%); &__items--all { .ma__callout-link { - background-color: $c-white; + background-color: #121212;//$c-white; box-shadow: none; } @@ -216,10 +216,10 @@ $action-finder-border-color: mix(#fff, $c-primary,50%); box-shadow: none; &__content { - background-color: $c-white; + background-color: #121212;//$c-white; &:after { - background-color: $c-white; + background-color: #121212;//$c-white; } } } @@ -245,7 +245,7 @@ $action-finder-border-color: mix(#fff, $c-primary,50%); } &--no-background &__see-all { - background-color: $c-bg-section; + background-color: #303030;//$c-bg-section; .ma__decorative-link { From 63320d97d8e7a78688140233d90a51ce9942d8d3 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 29 Aug 2023 17:37:36 -0400 Subject: [PATCH 10/15] add test style for guide page --- packages/assets/scss/01-atoms/_sidebar-heading.scss | 2 +- .../assets/scss/02-molecules/_emergency-alert.scss | 4 ++-- .../assets/scss/02-molecules/_emergency-header.scss | 10 +++++----- packages/assets/scss/03-organisms/_callout-alert.scss | 2 +- packages/assets/scss/03-organisms/_callout-time.scss | 2 +- .../assets/scss/03-organisms/_emergency-alerts.scss | 2 +- .../assets/scss/03-organisms/_illustrated-header.scss | 4 ++-- .../assets/scss/03-organisms/_stacked-row-section.scss | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/assets/scss/01-atoms/_sidebar-heading.scss b/packages/assets/scss/01-atoms/_sidebar-heading.scss index 08c35225ca..d86d9d8087 100644 --- a/packages/assets/scss/01-atoms/_sidebar-heading.scss +++ b/packages/assets/scss/01-atoms/_sidebar-heading.scss @@ -15,7 +15,7 @@ .ma__sidebar-heading { - @include ma-sidebar-heading($c-bd-divider, $c-font-base); + @include ma-sidebar-heading(#707070, $c-font-base);//$c-bd-divider, $c-font-base); .sidebar--colored & { diff --git a/packages/assets/scss/02-molecules/_emergency-alert.scss b/packages/assets/scss/02-molecules/_emergency-alert.scss index e14c468b9b..a0c0fe8bc8 100644 --- a/packages/assets/scss/02-molecules/_emergency-alert.scss +++ b/packages/assets/scss/02-molecules/_emergency-alert.scss @@ -3,7 +3,7 @@ @use "sass:color" as *; .ma__emergency-alert { - background-color: mix(#fff, $c-warning,90%); + background-color: mix(#121212, $c-warning,90%); font-size: $fonts-small; padding-top: 10px; padding-bottom: 10px; @@ -89,7 +89,7 @@ width: .5em; border-right: 3px solid; border-bottom: 3px solid; - border-color: $c-black; + border-color: $c-font-base;//$c-black; } } } diff --git a/packages/assets/scss/02-molecules/_emergency-header.scss b/packages/assets/scss/02-molecules/_emergency-header.scss index 989e8c87d5..0bef53d9bd 100644 --- a/packages/assets/scss/02-molecules/_emergency-header.scss +++ b/packages/assets/scss/02-molecules/_emergency-header.scss @@ -33,11 +33,11 @@ flex-basis: auto; letter-spacing: $letter-spacing-large; white-space: nowrap; - color: rgba($c-font-base,.8); + color: rgba(#141414,.8);//$c-font-base,.8); font-weight: $fonts-bold; border-right-width: 1px; border-right-style: solid; - border-right-color: rgba($c-font-base,.3); + border-right-color: rgba(#141414,.3);//$c-font-base,.3); padding-right: .5rem; margin-right: .5rem; @@ -82,7 +82,7 @@ @media ($bp-small-max) { font-size: 1.2rem; } - + @include ma-button-reset; @include ma-chevron; @@ -149,9 +149,9 @@ &__title { .ma__content-link { - text-decoration: none; + text-decoration: none; } - + .ma__decorative-link { display: inline; diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss index 78b68cbe24..19aed2a7fa 100644 --- a/packages/assets/scss/03-organisms/_callout-alert.scss +++ b/packages/assets/scss/03-organisms/_callout-alert.scss @@ -94,7 +94,7 @@ } &__link { - color: $c-font-base; + color: #141414;//$c-font-base; font-weight: bold; svg { diff --git a/packages/assets/scss/03-organisms/_callout-time.scss b/packages/assets/scss/03-organisms/_callout-time.scss index 25bb0a0fd6..d568fc428a 100644 --- a/packages/assets/scss/03-organisms/_callout-time.scss +++ b/packages/assets/scss/03-organisms/_callout-time.scss @@ -57,7 +57,7 @@ } &__text { - color: $c-font-detail; + color: #c0c0c0;//$c-font-detail; font-weight: $fonts-normal; } } diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss index 358fca663f..d4ec1351af 100644 --- a/packages/assets/scss/03-organisms/_emergency-alerts.scss +++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss @@ -63,7 +63,7 @@ $colors: ( } &__content { - background-color: mix(#fff, $c-warning, 90%); + background-color: mix(#121212, $c-warning, 90%);//mix(#fff, $c-warning, 90%); .js & { display: none; diff --git a/packages/assets/scss/03-organisms/_illustrated-header.scss b/packages/assets/scss/03-organisms/_illustrated-header.scss index e75d3563d2..9e252535d4 100644 --- a/packages/assets/scss/03-organisms/_illustrated-header.scss +++ b/packages/assets/scss/03-organisms/_illustrated-header.scss @@ -165,10 +165,10 @@ $bp-illustrated-header-image-width: 360px; } &__content { - background-color: $c-white; + background-color: #121212;//$c-white; &:after { - background-color: $c-white; + background-color: #121212;//$c-white; } } diff --git a/packages/assets/scss/03-organisms/_stacked-row-section.scss b/packages/assets/scss/03-organisms/_stacked-row-section.scss index dac6df6943..01f73f85d2 100644 --- a/packages/assets/scss/03-organisms/_stacked-row-section.scss +++ b/packages/assets/scss/03-organisms/_stacked-row-section.scss @@ -99,7 +99,7 @@ border-color: $c-bd-divider; .ma__stacked-row__container:before { - border-color: $c-bd-divider; + border-color: #707070;//$c-bd-divider; } } } From f1eb8368e0c11f88fa1a5484ed6e0e41e9d82fad Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 29 Aug 2023 18:07:19 -0400 Subject: [PATCH 11/15] add test style for service page --- packages/assets/scss/03-organisms/_action-finder.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss index 1976c2b320..9720eae2db 100644 --- a/packages/assets/scss/03-organisms/_action-finder.scss +++ b/packages/assets/scss/03-organisms/_action-finder.scss @@ -172,8 +172,8 @@ $action-finder-bp: 900px; } //theme -$action-finder-bg-color: mix(#fff, $c-primary,89%); -$action-finder-border-color: mix(#fff, $c-primary,50%); +$action-finder-bg-color: mix(#121212, $c-primary,89%);//mix(#fff, $c-primary,89%); +$action-finder-border-color: mix(#121212, $c-primary,50%);//mix(#fff, $c-primary,50%); .ma__action-finder { From 788cda22f9cf7a00a54e4269ac281b13d86328ce Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Fri, 22 Sep 2023 14:57:56 -0400 Subject: [PATCH 12/15] update color variables --- packages/assets/scss/00-base/_color-tokens.scss | 4 ++-- packages/assets/scss/00-base/_colors.scss | 7 +++++-- .../scss/00-base/mixins/_ma-accordion-icon.scss | 2 +- .../scss/00-base/mixins/_ma-heading-colored.scss | 5 +++-- packages/assets/scss/01-atoms/_sidebar-heading.scss | 2 +- packages/assets/scss/01-atoms/_table.scss | 2 +- packages/assets/scss/02-molecules/_action-step.scss | 3 ++- packages/assets/scss/02-molecules/_contact-us.scss | 10 +++++----- .../assets/scss/02-molecules/_emergency-header.scss | 4 ++-- .../assets/scss/02-molecules/_listing-table.scss | 2 +- .../scss/02-molecules/_main-nav-hamburger.scss | 12 ++++++------ .../scss/02-molecules/_relationship-indicators.scss | 8 ++++---- packages/assets/scss/02-molecules/_sticky-nav.scss | 4 ++-- packages/assets/scss/03-organisms/_breadcrumbs.scss | 12 ++++++------ .../assets/scss/03-organisms/_footnote-list.scss | 2 +- .../assets/scss/03-organisms/_header-hamburger.scss | 12 ++++++------ packages/assets/scss/03-organisms/_image-credit.scss | 2 +- packages/assets/scss/03-organisms/_page-banner.scss | 2 +- .../assets/scss/03-organisms/_search-banner.scss | 3 ++- .../scss/03-organisms/_stacked-row-section.scss | 2 +- packages/assets/scss/03-organisms/_sticky-toc.scss | 2 +- .../03-organisms/_table-of-contents-hierarchy.scss | 2 +- 22 files changed, 55 insertions(+), 49 deletions(-) diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss index a814786ec9..f00aeb442a 100644 --- a/packages/assets/scss/00-base/_color-tokens.scss +++ b/packages/assets/scss/00-base/_color-tokens.scss @@ -99,9 +99,9 @@ $c-platinum-gray: #F2F2F2 !default; $c-black: $c-revolution-gray !default; $c-gray-dark: $c-granite-gray !default; $c-gray: $c-atlantic-gray !default; -$c-gray-light: $c-overcast-gray !default; +$c-gray-light: $c-atlantic-gray !default;//$c-overcast-gray !default; $c-gray-lighter: #CCCCCC !default; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray -$c-gray-lightest: $c-platinum-gray !default; +$c-gray-lightest: #404040;// $c-platinum-gray !default; $c-white: white !default; // Error Red (#CD0D0D) diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss index 45bb557c7b..e88e1f9931 100644 --- a/packages/assets/scss/00-base/_colors.scss +++ b/packages/assets/scss/00-base/_colors.scss @@ -7,9 +7,11 @@ $c-primary: $c-bay-blue !default; $c-primary-light: $c-bay-blue-light !default; $c-primary-lighter: $c-bay-blue-lighter !default; $c-primary-lightest: $c-bay-blue-lightest !default; +$c-primary-bright: #1aeaff;// ADDED FOR HIGH CONTRAST LINK COLOR $c-primary-alt: $c-berkshires-green !default; $c-primary-alt-lighter: $c-berkshires-green-lighter !default; $c-primary-alt-lightest: $c-berkshires-green-lightest !default; +$c-primary-alt-bright: #2CD26E !default;// ADDED FOR HIGH CONTRAST LINK COLOR $c-primary-alt-dark: $c-berkshires-green-dark !default; $c-highlight: $c-duckling-yellow !default; $c-highlight-lighter: $c-duckling-yellow-lighter !default; @@ -25,10 +27,11 @@ $c-focus: $c-focus-hightlight !default; // Need to add these colors to this listing new to add // $c-visited -$c-font-base: #f2f2f2;//$c-black !default; +$c-font-base: $c-platinum-gray;//$c-black !default; $c-font-detail: $c-gray-dark !default; $c-font-dark: $c-black !default; $c-font-medium: $c-gray !default; +$c-font-dark-hc: $c-revolution-gray !default;// TEST STYLE: ADDED FOR HIGHT CONTRAST $c-font-heading: #f2f2f2;//$c-black !default; $c-font-inverse: $c-white !default; @@ -37,7 +40,7 @@ $c-font-error: $c-error !default; $c-bg-comp-title: $c-gray-dark !default; $c-bg-subtle: $c-gray-lightest !default; -$c-bg-section: #202020;// $c-gray-lightest !default; +$c-bg-section: $c-gray-lightest !default; $c-bd-divider: $c-gray-light !default; $c-bd-divider-dark: $c-gray-dark !default; diff --git a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss index 60a3e8b1fc..f63646c8c2 100644 --- a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss +++ b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss @@ -4,7 +4,7 @@ &:after { content: "+"; - color: $c-primary-alt; + color: $c-primary-alt-bright;//$c-primary-alt; display: block; font-size: 1.6em; font-weight: 500; diff --git a/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss b/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss index fd42f65bac..93288650c1 100644 --- a/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss +++ b/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss @@ -10,9 +10,10 @@ @use "00-base/breakpoints" as *; -@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) { +// @mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) { +@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:#121212) { $offset: 55px; - + @if ($c-bg == transparent) { font-size: $fonts-medium; letter-spacing: $letter-spacing-large; diff --git a/packages/assets/scss/01-atoms/_sidebar-heading.scss b/packages/assets/scss/01-atoms/_sidebar-heading.scss index d86d9d8087..08c35225ca 100644 --- a/packages/assets/scss/01-atoms/_sidebar-heading.scss +++ b/packages/assets/scss/01-atoms/_sidebar-heading.scss @@ -15,7 +15,7 @@ .ma__sidebar-heading { - @include ma-sidebar-heading(#707070, $c-font-base);//$c-bd-divider, $c-font-base); + @include ma-sidebar-heading($c-bd-divider, $c-font-base); .sidebar--colored & { diff --git a/packages/assets/scss/01-atoms/_table.scss b/packages/assets/scss/01-atoms/_table.scss index f29bd1c1e1..86742f7b89 100644 --- a/packages/assets/scss/01-atoms/_table.scss +++ b/packages/assets/scss/01-atoms/_table.scss @@ -6,7 +6,7 @@ width: 100%; thead { - background-color: $c-bg-subtle; + background-color: #404040;//$c-bg-subtle; th { color: $c-font-heading; diff --git a/packages/assets/scss/02-molecules/_action-step.scss b/packages/assets/scss/02-molecules/_action-step.scss index 91726a1651..ad725c0ebb 100644 --- a/packages/assets/scss/02-molecules/_action-step.scss +++ b/packages/assets/scss/02-molecules/_action-step.scss @@ -28,6 +28,7 @@ position: relative; font-weight: $fonts-bold; min-height: 32px; + color: $c-font-base; // Added for high contrast theme. } &--accordion &__header { @@ -126,7 +127,7 @@ } &--accordion &__header__toggle { - color: $c-primary-alt; + color: $c-primary-alt-bright; } &__icon { diff --git a/packages/assets/scss/02-molecules/_contact-us.scss b/packages/assets/scss/02-molecules/_contact-us.scss index 381b2b106d..3e9ed1426e 100644 --- a/packages/assets/scss/02-molecules/_contact-us.scss +++ b/packages/assets/scss/02-molecules/_contact-us.scss @@ -124,7 +124,7 @@ padding-left: 30px; padding-right: 30px; margin-top: 20px; - border-left: 1px solid #707070;//$c-bd-divider; + border-left: 1px solid $c-bd-divider; // Reset if we aren't in an accordion @@ -256,15 +256,15 @@ .ma__contact-us { & + & { - border-color: #707070;//$c-bd-divider; + border-color: $c-bd-divider; } &--accordion { - border-color: #707070;//$c-bd-divider; + border-color: $c-bd-divider; } &--accordion:not(.is-open) &__header { - background-color: #404040;//$c-bg-section; + background-color: $c-bg-section; } &--accordion.is-open &__header { @@ -273,7 +273,7 @@ &--accordion &__header:after, &--accordion &__header &--accordion__status { - color: #2CD26E;//$c-primary-alt; + color: $c-primary-alt-bright; } &__expand { diff --git a/packages/assets/scss/02-molecules/_emergency-header.scss b/packages/assets/scss/02-molecules/_emergency-header.scss index 0bef53d9bd..7056c1cbd4 100644 --- a/packages/assets/scss/02-molecules/_emergency-header.scss +++ b/packages/assets/scss/02-molecules/_emergency-header.scss @@ -33,11 +33,11 @@ flex-basis: auto; letter-spacing: $letter-spacing-large; white-space: nowrap; - color: rgba(#141414,.8);//$c-font-base,.8); + color: rgba($c-font-dark-hc,.8);//$c-font-base,.8); font-weight: $fonts-bold; border-right-width: 1px; border-right-style: solid; - border-right-color: rgba(#141414,.3);//$c-font-base,.3); + border-right-color: rgba($c-font-dark-hc,.3);//$c-font-base,.3); padding-right: .5rem; margin-right: .5rem; diff --git a/packages/assets/scss/02-molecules/_listing-table.scss b/packages/assets/scss/02-molecules/_listing-table.scss index 343c862633..258ad18331 100644 --- a/packages/assets/scss/02-molecules/_listing-table.scss +++ b/packages/assets/scss/02-molecules/_listing-table.scss @@ -173,7 +173,7 @@ .ma__listing-table { tr + tr { - border-top-color: #707070;//$c-bd-divider; + border-top-color: $c-bd-divider; } &__expand { diff --git a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss index 9dd42e492c..5b69aa32e9 100644 --- a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss +++ b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss @@ -6,7 +6,7 @@ padding: 0; @media ($bp-header-toggle-max) { - border-top: 2px solid #707070;//$c-bd-divider; + border-top: 2px solid $c-bd-divider; } &__items { @@ -15,7 +15,7 @@ } &__item { - border-bottom: 2px solid #707070;//$c-bd-divider; + border-bottom: 2px solid $c-bd-divider; } &__top-link { @@ -33,7 +33,7 @@ text-align: left; background-color: #141414;//$c-gray-lightest; width: 100%; - color: #f2f2f2;// <--$c-gray-lightest inherit; + color: $c-font-base;// inherit; .toggle-indicator { @@ -49,7 +49,7 @@ &:focus, &:hover {// hover is added background-color: #515151;//$c-bd-divider; - outline: 2px solid $c-black; + outline: 2px solid $c-font-base; } &.cv-alternate-style { @@ -114,7 +114,7 @@ font-weight: 400; line-height: 1.33; padding: 10px 20px 10px 30px; - color: #f2f2f2;//$c-black; + color: $c-font-base;//$c-black; &:hover { // text-decoration: underline; It already has underline at normal state. @@ -148,7 +148,7 @@ text-decoration: none; &>span { - border-bottom: 2px solid $c-black; + border-bottom: 2px solid $c-font-base;//$c-black; } } } diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss index e2e9f18e0c..4aebf98863 100644 --- a/packages/assets/scss/02-molecules/_relationship-indicators.scss +++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss @@ -247,11 +247,11 @@ a { color: $c-primary; - color: #2CD26E;//$c-primary-alt; - box-shadow: inset 0 0 white, inset 0px -1px rgba(#2CD26E, .4);//$c-primary-alt, 0.4); + color: $c-primary-alt-bright; + box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt-bright, 0.4); &:hover { - box-shadow: inset 0 0 white, inset 0px -2px rgba(#2CD26E, .7);//$c-primary-alt, 0.7); + box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary-alt, 0.7); } } } @@ -264,7 +264,7 @@ } button { - color: #2CD26E;//$c-primary-alt; + color: $c-primary-alt-bright; } .ma__relationship-indicators { diff --git a/packages/assets/scss/02-molecules/_sticky-nav.scss b/packages/assets/scss/02-molecules/_sticky-nav.scss index de2deb82a5..cdb6f5bc21 100644 --- a/packages/assets/scss/02-molecules/_sticky-nav.scss +++ b/packages/assets/scss/02-molecules/_sticky-nav.scss @@ -7,7 +7,7 @@ .ma__sticky-nav { @include clearfix; - + @media ($bp-medium-min) { position: absolute; } @@ -168,7 +168,7 @@ } & + & { - border-top-color: $c-gray-light; + border-top-color: #878787;//$c-gray-light; @media ($bp-medium-min) { border-top-width: 1px; diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss index 283d0402d1..3dbe565ff2 100644 --- a/packages/assets/scss/03-organisms/_breadcrumbs.scss +++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss @@ -135,7 +135,7 @@ $breadcrumbs-scrollbar-height: 12px; } a, button { - color: #1aeaff;// $c-primary; + color: $c-primary-alt-bright;// $c-primary; display: inline-block; font-size: $fonts-xsmall; line-height: 1; @@ -144,7 +144,7 @@ $breadcrumbs-scrollbar-height: 12px; text-decoration: none; &:hover { - text-shadow: 0px 0px 0px #1aeaff;// $c-primary ; + text-shadow: 0px 0px 0px $c-primary-alt-bright;// $c-primary ; } } @@ -154,12 +154,12 @@ $breadcrumbs-scrollbar-height: 12px; transition: border 0.4s; &:hover { - border: 2px solid #1aeaff;// $c-primary; + border: 2px solid $c-primary-alt-bright;// $c-primary; } } a { - box-shadow: inset 0 0 white, inset 0px -1px rgba(#1aeaff, .6);//($c-primary, 0.4); + box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt-bright, .6);//($c-primary, 0.4); svg { fill: #1aeaff;// $c-primary; @@ -169,7 +169,7 @@ $breadcrumbs-scrollbar-height: 12px; } &:hover { - box-shadow: inset 0 0 white, inset 0px -2px rgba(#1aeaff, .7);//$c-primary, 0.7); + box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary-alt-bright, .7);//$c-primary, 0.7); svg { fill: rgba(26,234,255, .5);//$c-bay-blue-50-tint; @@ -289,7 +289,7 @@ $breadcrumbs-scrollbar-height: 12px; &__sub-items { background-color: $c-white; - box-shadow: 0 0.25rem 0.5rem rgba(#f2f2f2, .25);//$c-black, 0.25); + box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25); } &--light { diff --git a/packages/assets/scss/03-organisms/_footnote-list.scss b/packages/assets/scss/03-organisms/_footnote-list.scss index 2c53a170c6..332dbcd122 100644 --- a/packages/assets/scss/03-organisms/_footnote-list.scss +++ b/packages/assets/scss/03-organisms/_footnote-list.scss @@ -21,6 +21,6 @@ .ma__footnote-list { &__container { - border-top-color: #707070;//$c-bd-divider; + border-top-color: $c-bd-divider; } } diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index 637783213f..11b713eae8 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -191,7 +191,7 @@ body.show-menu { &--mobile { padding: 20px; width: 100%; - border-bottom: 2px solid #707070;//$c-bd-divider; + border-bottom: 2px solid $c-bd-divider; a img { width: 45px; @@ -513,7 +513,7 @@ body.show-menu { &__item { - border-bottom: 2px solid #707070;//$c-bd-divider; + border-bottom: 2px solid $c-bd-divider; padding: 0; &:hover { @@ -651,7 +651,7 @@ body.show-menu { & .ma__utility-panel { background-color: #141414;//$c-gray-lightest; - color: #f2f2f2;//$c-black; + color: $c-black; @include ma-reset-list; @@ -676,7 +676,7 @@ body.show-menu { position: relative; line-height: 1.33; padding: 0 20px 10px 20px; - color: #f2f2f2;//$c-black; + color: $c-black; margin-bottom: 0; } @@ -686,7 +686,7 @@ body.show-menu { & .ma__utility-panel__item { background-color: #141414;//$c-gray-lightest; - color: #f2f2f2;//$c-black; + color: $c-black; margin: 0; display: block; } @@ -707,7 +707,7 @@ body.show-menu { font-weight: 400; line-height: 1.33; padding: 10px 20px 10px 30px; - color: #f2f2f2;//$c-black; + color: $c-black; &:hover { text-decoration: underline; diff --git a/packages/assets/scss/03-organisms/_image-credit.scss b/packages/assets/scss/03-organisms/_image-credit.scss index 8589d1094a..99920278f0 100644 --- a/packages/assets/scss/03-organisms/_image-credit.scss +++ b/packages/assets/scss/03-organisms/_image-credit.scss @@ -30,7 +30,7 @@ &__container { &:before { - border-color: #707070;//$c-bd-divider; + border-color: $c-bd-divider; } &__label { diff --git a/packages/assets/scss/03-organisms/_page-banner.scss b/packages/assets/scss/03-organisms/_page-banner.scss index 5b7787424d..34301aae22 100644 --- a/packages/assets/scss/03-organisms/_page-banner.scss +++ b/packages/assets/scss/03-organisms/_page-banner.scss @@ -530,7 +530,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); &--white &__title, &--white &__description { - color: #f2f2f2;//$c-font-base; + color: $c-font-base; } } diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss index c279d81c50..b20ef6462f 100644 --- a/packages/assets/scss/03-organisms/_search-banner.scss +++ b/packages/assets/scss/03-organisms/_search-banner.scss @@ -331,6 +331,7 @@ input { background-color: rgba(255, 255, 255, 0.75); font-weight: $fonts-lighter; + color: $c-black;// ADDED FOR HIGHT CONTRAST STYLE } &::-webkit-input-placeholder { @@ -360,7 +361,7 @@ &__button { background-color: rgba(255, 255, 255, 0.75); - color: $c-font-base; + color: $c-black;//$c-font-base; font-weight: $fonts-bold; & > svg { diff --git a/packages/assets/scss/03-organisms/_stacked-row-section.scss b/packages/assets/scss/03-organisms/_stacked-row-section.scss index 01f73f85d2..dac6df6943 100644 --- a/packages/assets/scss/03-organisms/_stacked-row-section.scss +++ b/packages/assets/scss/03-organisms/_stacked-row-section.scss @@ -99,7 +99,7 @@ border-color: $c-bd-divider; .ma__stacked-row__container:before { - border-color: #707070;//$c-bd-divider; + border-color: $c-bd-divider; } } } diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss index c9662e2eb1..520ad76a33 100644 --- a/packages/assets/scss/03-organisms/_sticky-toc.scss +++ b/packages/assets/scss/03-organisms/_sticky-toc.scss @@ -457,7 +457,7 @@ text-overflow: ellipsis; white-space: nowrap; font-weight: $fonts-bold; - color: #f2f2f2;//$c-black; + color: $c-black; margin-bottom: 0; display: none; diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss index 355f6c91a7..9ec026247b 100644 --- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss +++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss @@ -131,7 +131,7 @@ &:after { font-size: $fonts-4xlarge; content: "+"; - color: #2cd26e;//$c-primary-alt; + color: $c-primary-alt-bright;//$c-primary-alt; line-height: .65em; overflow: hidden; position: absolute; From 6e54e7b0d0f984bde3d8ee96213c0054dfd65190 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Fri, 22 Sep 2023 15:23:59 -0400 Subject: [PATCH 13/15] edit for sticky nav --- packages/assets/scss/02-molecules/_sticky-nav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/assets/scss/02-molecules/_sticky-nav.scss b/packages/assets/scss/02-molecules/_sticky-nav.scss index cdb6f5bc21..df3841e791 100644 --- a/packages/assets/scss/02-molecules/_sticky-nav.scss +++ b/packages/assets/scss/02-molecules/_sticky-nav.scss @@ -98,7 +98,7 @@ &.is-title { span { - color: $c-gray-dark; + color: $c-font-base;//$c-gray-dark; border-bottom: 3px solid transparent; padding-top: 3px; padding-bottom: 1px; @@ -200,7 +200,7 @@ &__toggle-link { @include ma-button-reset; - color: $c-primary-alt; + color: $c-primary-alt-bright;//$c-primary-alt; font-size: $fonts-6xlarge; line-height: .65em; overflow: hidden; From f025696c85596bb6383a213bbb22c590bde99d12 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Fri, 22 Sep 2023 17:56:41 -0400 Subject: [PATCH 14/15] flyout utility nav --- packages/assets/scss/03-organisms/_header-hamburger.scss | 6 +++--- packages/assets/scss/03-organisms/_utility-panel.scss | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss index 11b713eae8..9da6ec5bf2 100644 --- a/packages/assets/scss/03-organisms/_header-hamburger.scss +++ b/packages/assets/scss/03-organisms/_header-hamburger.scss @@ -676,7 +676,7 @@ body.show-menu { position: relative; line-height: 1.33; padding: 0 20px 10px 20px; - color: $c-black; + color: #f2f2f2;//$c-black; margin-bottom: 0; } @@ -686,7 +686,7 @@ body.show-menu { & .ma__utility-panel__item { background-color: #141414;//$c-gray-lightest; - color: $c-black; + color: #f2f2f2;//$c-black; margin: 0; display: block; } @@ -707,7 +707,7 @@ body.show-menu { font-weight: 400; line-height: 1.33; padding: 10px 20px 10px 30px; - color: $c-black; + color: #f2f2f2;//$c-black; &:hover { text-decoration: underline; diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss index 6a7c37c850..d121e2c001 100644 --- a/packages/assets/scss/03-organisms/_utility-panel.scss +++ b/packages/assets/scss/03-organisms/_utility-panel.scss @@ -4,7 +4,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; @use "00-base/configure" as *; .ma__utility-panel { - background-color: $c-primary; + background-color: $c-primary; color: $c-font-inverse; @media ($bp-header-toggle-min) { @@ -56,7 +56,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px"; width: 23%; margin-right: 2.5%; min-height: 70px; - + .no-flex & { display: table-cell; } From b273393dc7f693842230b12f48b1dc1348aad419 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Fri, 22 Sep 2023 18:05:24 -0400 Subject: [PATCH 15/15] location page edit --- .../assets/scss/02-molecules/_location-icons.scss | 2 +- .../assets/scss/03-organisms/_header-alerts.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/assets/scss/02-molecules/_location-icons.scss b/packages/assets/scss/02-molecules/_location-icons.scss index 42f34b34fb..12c3a375e7 100644 --- a/packages/assets/scss/02-molecules/_location-icons.scss +++ b/packages/assets/scss/02-molecules/_location-icons.scss @@ -51,7 +51,7 @@ } &__name { - color: $c-font-medium; + color: $c-font-base;//$c-font-medium; font-weight: $fonts-bold; } } diff --git a/packages/assets/scss/03-organisms/_header-alerts.scss b/packages/assets/scss/03-organisms/_header-alerts.scss index f7ae8cef4a..dcb53d05bd 100644 --- a/packages/assets/scss/03-organisms/_header-alerts.scss +++ b/packages/assets/scss/03-organisms/_header-alerts.scss @@ -7,29 +7,29 @@ display: flex; align-items: center; flex-wrap: wrap; - + color: $c-black; margin-bottom: 0; - + &__button { color: $c-black; background-color: $c-warning; padding: 12px 24px; display: inline-flex; - + align-items: center; font-weight: $fonts-bold; font-size: $fonts-medium; line-height: 1.2; margin-bottom: 0; width: 100%; - + border: 0; - + @media ($bp-x-small-max) { flex-direction: column; } - + div { display: inline-flex; align-items: center; @@ -88,7 +88,7 @@ border-style: solid; &__header { - color: $c-black; + color: $c-font-heading;//$c-black; border: none; display: block; padding: 20px 40px 20px 60px;