From 5017bc3bf0b3c695bdaee25f1533b98387f92b89 Mon Sep 17 00:00:00 2001 From: Martin Leblanc <m26lebla@uwaterloo.ca> Date: Tue, 5 Jul 2022 11:42:34 -0400 Subject: [PATCH] ISTWCMS-5633: adjustments to the color arrays --- src/patterns/01-core/props/_colors.scss | 24 +++++------ .../04-components/color-bar/_color-bar.scss | 4 +- src/patterns/04-components/date/_date.scss | 12 +++--- .../menu--horizontal/_menu--horizontal.scss | 26 ++++++------ .../04-components/site-name/_site-name.scss | 2 +- src/patterns/04-components/tag/_tag.scss | 40 +++++++++---------- 6 files changed, 53 insertions(+), 55 deletions(-) diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss index 639711bc..af9c8be2 100644 --- a/src/patterns/01-core/props/_colors.scss +++ b/src/patterns/01-core/props/_colors.scss @@ -220,18 +220,18 @@ } $faculties_colours: ( - 'org-default': --uw-gold, - 'org-ahs': --ahs, - 'org-art': --art, - 'org-eng': --eng, - 'org-env': --env, - 'org-mat': --mat, - 'org-sci': --sci, - 'org-school': --school, - 'org-stp': --stp, - 'org-cgc': --cgc, - 'org-stj': --stj, - 'org-ren': --ren + 'org-default': uw-gold, + 'org-ahs': ahs, + 'org-art': art, + 'org-eng': eng, + 'org-env': env, + 'org-mat': mat, + 'org-sci': sci, + 'org-school': school, + 'org-stp': stp, + 'org-cgc': cgc, + 'org-stj': stj, + 'org-ren': ren ); //Swatches diff --git a/src/patterns/04-components/color-bar/_color-bar.scss b/src/patterns/04-components/color-bar/_color-bar.scss index e64e424c..9192ea13 100644 --- a/src/patterns/04-components/color-bar/_color-bar.scss +++ b/src/patterns/04-components/color-bar/_color-bar.scss @@ -5,8 +5,8 @@ $lvls: '1', '2', '3', '4'; @each $faculty, $colour in $faculties_colours { @each $lvl in $lvls { .uw-colour-bar__cbar { - &.#{$faculty}-#{$lvl} { - background-color: var(#{$colour}-#{$lvl}); + &.#{$colour}-#{$lvl} { + background-color: var(--#{$colour}-#{$lvl}); } } } diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss index ed273295..fa0845d3 100644 --- a/src/patterns/04-components/date/_date.scss +++ b/src/patterns/04-components/date/_date.scss @@ -68,12 +68,12 @@ @if $faculty == org-default { .uw-date { - background-color: var($colour); + background-color: var(--#{$colour}-primary); color: var(--uw-black); } .uw-date-details { - background-color: var($colour); + background-color: var(--#{$colour}-primary); &[open] { .uw-date-details__summary { @@ -88,18 +88,18 @@ } @include svg-background(mobile-arrow-down); - background-color: var($colour); + background-color: var(--#{$colour}-primary); color: var(--uw-black); } } @else { .uw-date { - background-color: var(#{$colour}-primary); + background-color: var(--#{$colour}-primary); color: var(--uw-white); } .uw-date-details { - background-color: var(#{$colour}-primary); + background-color: var(--#{$colour}-primary); &[open] { .uw-date-details__summary { @@ -114,7 +114,7 @@ } @include svg-background(mobile-arrow-down-w); - background-color: var(#{$colour}-primary); + background-color: var(--#{$colour}-primary); color: var(--uw-white); } } diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss index 698dccb3..c718575d 100644 --- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss +++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss @@ -121,8 +121,8 @@ $menu-horizontal-drop-bg: #f7f7f7; .uw-site-home__link{ svg{ .bg-circle{ - fill: var(#{$colour}-primary); - stroke: var(#{$colour}-primary); + fill: var(--#{$colour}-primary); + stroke: var(--#{$colour}-primary); } .house{ fill: var(--uw-white); @@ -132,10 +132,10 @@ $menu-horizontal-drop-bg: #f7f7f7; svg{ .bg-circle{ fill: var(--uw-white); - stroke: var(#{$colour}-primary); + stroke: var(--#{$colour}-primary); } .house{ - fill: var(#{$colour}-primary); + fill: var(--#{$colour}-primary); } } } @@ -143,10 +143,10 @@ $menu-horizontal-drop-bg: #f7f7f7; svg{ .bg-circle{ fill: var(--uw-white); - stroke: var(#{$colour}-primary); + stroke: var(--#{$colour}-primary); } .house{ - fill: var(#{$colour}-primary); + fill: var(--#{$colour}-primary); } } } @@ -160,8 +160,8 @@ $menu-horizontal-drop-bg: #f7f7f7; .menu__item{ &__parent{ a{ - border-bottom: 1px solid var(#{$colour}-primary); - color: var(#{$colour}-primary); + border-bottom: 1px solid var(--#{$colour}-primary); + color: var(--#{$colour}-primary); } } } @@ -191,13 +191,13 @@ $menu-horizontal-drop-bg: #f7f7f7; text-decoration: none; &:focus { background-color: inherit; - border-bottom: var(--size-xs) solid var(#{$colour}-primary); + border-bottom: var(--size-xs) solid var(--#{$colour}-primary); color: var(--uw-black); } &.active{ background-color: inherit; - border-bottom: var(--size-xs) solid var(#{$colour}-primary); - color: var(#{$colour}-primary); + border-bottom: var(--size-xs) solid var(--#{$colour}-primary); + color: var(--#{$colour}-primary); &::after{ display: none; } @@ -209,8 +209,8 @@ $menu-horizontal-drop-bg: #f7f7f7; } &:hover{ background-color: inherit; - border-bottom: var(--size-xs) solid var(#{$colour}-primary); - color: var(#{$colour}-primary); + border-bottom: var(--size-xs) solid var(--#{$colour}-primary); + color: var(--#{$colour}-primary); } } } diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss index 31752d7b..04e88698 100644 --- a/src/patterns/04-components/site-name/_site-name.scss +++ b/src/patterns/04-components/site-name/_site-name.scss @@ -2,11 +2,11 @@ // Styles for Site name. @use '../../01-core' as *; -$site-name-font-family: var(--gray-2); $site-name-font-size: var(--font-size-5); .uw-site-name { a{ + color: var(--uw-black); &:hover{ text-decoration: underline; } diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss index 1be9bb5c..dcdb8275 100644 --- a/src/patterns/04-components/tag/_tag.scss +++ b/src/patterns/04-components/tag/_tag.scss @@ -3,7 +3,6 @@ @use '../../01-core' as *; -$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren'; $tag-font-family-small: var(--font-systemmedium) !default; $tag-font-family-normal: var(--font-systembold) !default; $tag-font-size-normal: var(--font-size-00) !default; @@ -104,8 +103,7 @@ $tag-font-size-small: var(--font-size-0000) !default; transition: background 300ms ease; } } - -@each $faculty in $faculties { +@each $faculty, $colour in $faculties_colours { .#{$faculty} { a.tag--full{ @if $faculty == org-default { @@ -117,24 +115,24 @@ $tag-font-size-small: var(--font-size-0000) !default; color: var(--uw-black-primary); } } - //@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{ - // background-color:gesso-brand($faculty,'primary'); - // color: gesso-brand(org-default,uw-white,'primary'); - // &:hover, - // &:focus { - // background-color: gesso-brand($faculty, 'light'); - // color:gesso-brand($faculty,'primary'); - // } - //} - //@else { - // background-color:gesso-brand($faculty,'primary'); - // color: gesso-brand(org-default,uw-white,'primary'); - // &:hover, - // &:focus { - // background-color: gesso-brand($faculty, 'lvl1'); - // color:gesso-brand($faculty,'primary'); - // } - //} + @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{ + background-color: var(--#{$colour}-primary); + color: var(--uw-white); + &:hover, + &:focus { + background-color: var(--#{$colour}-light); + color: var(--#{$colour}-primary); + } + } + @else { + background-color: var(--#{$colour}-primary); + color: var(--uw-white); + &:hover, + &:focus { + background-color: var(--#{$colour}-primary); + color: var(--#{$colour}-primary); + } + } } } } -- GitLab