Skip to content
Snippets Groups Projects
Commit 5ee6b0d9 authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-3590: updating colours

parent 524c7ecb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 380 additions and 256 deletions
source/_data/design-tokens.artifact.yml
+ 70
− 0
View file @ 5ee6b0d9
...@@ -16,6 +16,76 @@ gesso: ...@@ -16,6 +16,76 @@ gesso:
light-1: "#e1f3f8" light-1: "#e1f3f8"
dark: "#00a6d2" dark: "#00a6d2"
dark-1: "#046b99" dark-1: "#046b99"
org-default:
uw-black:
lvl1: "#dfdfdf"
lvl2: "#a2a2a2"
lvl3: "#787878"
lvl4: "#000"
primary: "#000"
uw-gold:
lvl1: "#fffaaa"
lvl2: "#ffea30"
lvl3: "#fdd54f"
lvl4: "#e4b429"
primary: "#fdd54f"
uw-white:
lvl1: "#fff"
primary: "#fff"
org-ahs:
lvl1: "#97dfef"
lvl2: "#00bed0"
lvl3: "#0098a5"
lvl4: "#005963"
primary: "#005963"
org-art:
lvl1: "#ffd5a5"
lvl2: "#fbaf00"
lvl3: "#e78100"
lvl4: "#d93f00"
primary: "#fbaf00"
org-eng:
lvl1: "#d0b4ef"
lvl2: "#be33da"
lvl3: "#8100b4"
lvl4: "#57058b"
primary: "#8100b4"
org-env:
lvl1: "#daf582"
lvl2: "#bed500"
lvl3: "#b4be00"
lvl4: "#607000"
primary: "#b4be00"
org-mat:
lvl1: "#ffbeef"
lvl2: "#ff63aa"
lvl3: "#df2498"
lvl4: "#c60078"
primary: "#df2498"
org-sci:
lvl1: "#b4d5ff"
lvl2: "#63a0ff"
lvl3: "#0073ce"
lvl4: "#0033be"
primary: "#0073ce"
org-ren:
green: "#00693c"
red: "#de3831"
gold: "#d2c295"
org-stj:
green: "#01573e"
gold: "#c88a11"
org-stp:
green: "#879637"
brown: "#584528"
org-cgc:
red: "#c4262e"
org-school:
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#b71233"
grayscale: grayscale:
white: "#fff" white: "#fff"
gray-1: "#f7f7f7" gray-1: "#f7f7f7"
......
source/_patterns/00-config/_design-tokens.artifact.scss
+ 85
− 0
View file @ 5ee6b0d9
...@@ -18,6 +18,91 @@ $gesso: ( ...@@ -18,6 +18,91 @@ $gesso: (
dark: #00a6d2, dark: #00a6d2,
dark-1: #046b99, dark-1: #046b99,
), ),
org-default: (
uw-black: (
lvl1: #dfdfdf,
lvl2: #a2a2a2,
lvl3: #787878,
lvl4: #000,
primary: #000,
),
uw-gold: (
lvl1: #fffaaa,
lvl2: #ffea30,
lvl3: #fdd54f,
lvl4: #e4b429,
primary: #fdd54f,
),
uw-white: (
lvl1: #fff,
primary: #fff,
),
),
org-ahs: (
lvl1: #97dfef,
lvl2: #00bed0,
lvl3: #0098a5,
lvl4: #005963,
primary: #005963,
),
org-art: (
lvl1: #ffd5a5,
lvl2: #fbaf00,
lvl3: #e78100,
lvl4: #d93f00,
primary: #fbaf00,
),
org-eng: (
lvl1: #d0b4ef,
lvl2: #be33da,
lvl3: #8100b4,
lvl4: #57058b,
primary: #8100b4,
),
org-env: (
lvl1: #daf582,
lvl2: #bed500,
lvl3: #b4be00,
lvl4: #607000,
primary: #b4be00,
),
org-mat: (
lvl1: #ffbeef,
lvl2: #ff63aa,
lvl3: #df2498,
lvl4: #c60078,
primary: #df2498,
),
org-sci: (
lvl1: #b4d5ff,
lvl2: #63a0ff,
lvl3: #0073ce,
lvl4: #0033be,
primary: #0073ce,
),
org-ren: (
green: #00693c,
red: #de3831,
gold: #d2c295,
),
org-stj: (
green: #01573e,
gold: #c88a11,
),
org-stp: (
green: #879637,
brown: #584528,
),
org-cgc: (
red: #c4262e,
),
org-school: (
lvl1: #ffa5aa,
lvl2: #e41740,
lvl3: #b71233,
lvl4: #80001f,
primary: #b71233,
),
), ),
grayscale: ( grayscale: (
white: #fff, white: #fff,
......
source/_patterns/00-config/config.design-tokens.yml
+ 70
− 0
View file @ 5ee6b0d9
...@@ -16,6 +16,76 @@ gesso: ...@@ -16,6 +16,76 @@ gesso:
light-1: '#e1f3f8' light-1: '#e1f3f8'
dark: '#00a6d2' dark: '#00a6d2'
dark-1: '#046b99' dark-1: '#046b99'
org-default:
uw-black:
lvl1: '#dfdfdf'
lvl2: '#a2a2a2'
lvl3: '#787878'
lvl4: '#000'
primary: '#000'
uw-gold:
lvl1: '#fffaaa'
lvl2: '#ffea30'
lvl3: '#fdd54f'
lvl4: '#e4b429'
primary: '#fdd54f'
uw-white:
lvl1: '#fff'
primary: '#fff'
org-ahs:
lvl1: '#97dfef'
lvl2: '#00bed0'
lvl3: '#0098a5'
lvl4: '#005963'
primary: '#005963'
org-art:
lvl1: '#ffd5a5'
lvl2: '#fbaf00'
lvl3: '#e78100'
lvl4: '#d93f00'
primary: '#fbaf00'
org-eng:
lvl1: '#d0b4ef'
lvl2: '#be33da'
lvl3: '#8100b4'
lvl4: '#57058b'
primary: '#8100b4'
org-env:
lvl1: '#daf582'
lvl2: '#bed500'
lvl3: '#b4be00'
lvl4: '#607000'
primary: '#b4be00'
org-mat:
lvl1: '#ffbeef'
lvl2: '#ff63aa'
lvl3: '#df2498'
lvl4: '#c60078'
primary: '#df2498'
org-sci:
lvl1: '#b4d5ff'
lvl2: '#63a0ff'
lvl3: '#0073ce'
lvl4: '#0033be'
primary: '#0073ce'
org-ren:
green: '#00693c'
red: '#de3831'
gold: '#d2c295'
org-stj:
green: '#01573e'
gold: '#c88a11'
org-stp:
green: '#879637'
brown: '#584528'
org-cgc:
red: '#c4262e'
org-school:
lvl1: '#ffa5aa'
lvl2: '#e41740'
lvl3: '#b71233'
lvl4: '#80001f'
primary: '#b71233'
grayscale: grayscale:
white: '#fff' white: '#fff'
gray-1: '#f7f7f7' gray-1: '#f7f7f7'
......
source/_patterns/01-global/00-colors/color-demo.scss 0 → 100644
+ 35
− 0
View file @ 5ee6b0d9
$whites: 'uw-white';
$defaults: 'uw-black', 'uw-gold';
$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
$lvls: 'lvl1', 'lvl2', 'lvl3', 'lvl4', 'primary';
$white-lvls: 'lvl1', 'primary';
@each $white in $whites {
@each $white-lvl in $white-lvls {
.org-default {
&__#{$white}--#{$white-lvl} {
background: gesso-brand('org-default', $white, $white-lvl);
}
}
}
}
@each $default in $defaults {
@each $lvl in $lvls {
.org-default {
&__#{$default}--#{$lvl} {
background: gesso-brand('org-default', $default, $lvl);
}
}
}
}
@each $faculty in $faculties {
@each $lvl in $lvls {
.#{$faculty} {
&--#{$lvl} {
background: gesso-brand($faculty, $lvl);
}
}
}
}
source/_patterns/01-global/00-colors/colors.twig
+ 33
− 15
View file @ 5ee6b0d9
{% for group in items.groups %} {% for group in items.groups %}
<h1> {{ group.name }}</h1> <h1> {{ group.name }}</h1>
{% for sub_group in group.sub_groups %} {% for sub_group in group.sub_groups %}
{% if (sub_group.primary_color) %} <h2>{{ sub_group.name }}</h2>
<h2> {{ sub_group.name }} - {{ sub_group.primary_color }}</h2>
{% else %}
<h2> {{ sub_group.name }}</h2>
{% endif %}
<ul class="sg-colors"> <ul class="sg-colors">
{% for color in sub_group.colors %} {% for color in sub_group.colors %}
<li> <li>
<div class="sg-swatch uw-colors--{{ group.abbv }}-{{ sub_group.abbv }}-{{ color.abbv }}--background" style="background: {{ color.hex }}"></div> {% if group.abbv %}
<code>{{ color.name }}</code> <div class="sg-swatch {{ group.abbv }}__{{ sub_group.abbv }}--{{ color.abbv }}"></div>
<div class="sg-info"> {% else %}
<span>{{ color.hex }}</span> <br/> <div class="sg-swatch {{ sub_group.abbv }}--{{ color.abbv }}"></div>
<code>body.{{ group.abbv }}-{{ sub_group.abbv }}<br/> .uw-colors-{{ color.abbv }}--(background|foreground)</code> {% endif %}
</div> <h5>{{ color.name }}</h5>
</li> <div class="sg-info">
{% endfor %} <span>{{ color.hex }}</span> <br/>
{% if group.abbv %}
{% if color.abbv == 'primary' %}
<h5>CSS Class</h5>
<code>{{ group.abbv }}__{{ sub_group.abbv }}</code>
{% else %}
<h5>CSS Class</h5>
<code>{{ group.abbv }}__{{ sub_group.abbv }}--{{ color.abbv }}</code>
{% endif %}
{% elseif color.abbv == 'primary' %}
<h5>CSS Class</h5>
<code>{{ sub_group.abbv }}<br/></code>
{% else %}
<h5>CSS Class</h5>
<code>{{ sub_group.abbv }}--{{ color.abbv }}</code>
{% endif %}
{% if color.sass %}
<h5>SASS Variable</h5>
<code>{{ color.sass }}</code>
{% endif %}
</div>
</li>
{% endfor %}
</ul> </ul>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
source/_patterns/01-global/00-colors/colors.twig.old deleted 100755 → 0
+ 0
− 18
View file @ 524c7ecb
<ul class="pattern-lab-color-list">
{% for color in colors %}
<li>
<ul class="pattern-lab-color-list__set">
{% for color_set in color.color_set %}
<li>
<figure class="pattern-lab-swatch{% if color_set.light_text %} pattern-lab-swatch--light-text{% endif %}" style="{{ color_set.style }}">
<div class="pattern-lab-swatch__meta-data">
<span class="pattern-lab-swatch__variable">{{ color_set.variable }}</span>
<span class="pattern-lab-swatch__hex">{{ color_set.hex }}</span>
</div>
</figure>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
source/_patterns/01-global/00-colors/colors.yml
+ 87
− 165
View file @ 5ee6b0d9
test: "hello test"
items: items:
groups: groups:
- -
name: "University of Waterloo" name: "University of Waterloo"
abbv: uw abbv: org-default
sub_groups: sub_groups:
- -
name: "Gold/Yellow" name: "Gold/Yellow"
abbv: golds abbv: uw-gold
colors: colors:
- -
name: 'Level 1' name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#ffffaa' hex: '#fffaaa'
- -
name: 'Level 2' name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#ffea3d' hex: '#ffea30'
- -
name: 'Level 3' name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#ffd54f' hex: '#fdd54f'
- -
name: 'Level 4' name: 'Level 4'
abbv: lvl4 abbv: lvl4
...@@ -28,10 +27,11 @@ items: ...@@ -28,10 +27,11 @@ items:
- -
name: 'Primary' name: 'Primary'
abbv: primary abbv: primary
hex: '#ffd54f' hex: '#fdd54f'
sass: '$uw-gold'
- -
name: "Black/Grey" name: "Black/Grey"
abbv: blacks abbv: uw-black
colors: colors:
- -
name: 'Level 1' name: 'Level 1'
...@@ -48,52 +48,31 @@ items: ...@@ -48,52 +48,31 @@ items:
- -
name: 'Level 4' name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#000000' hex: '#000'
- -
name: 'Primary' name: 'Primary'
abbv: primary abbv: primary
hex: '#000000' hex: '#000'
sass: '$uw-black'
- -
name: "White" name: "White"
abbv: whites abbv: uw-white
colors: colors:
- -
name: 'Level 1' name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#ffffff' hex: '#fff'
-
name: "Faculties"
abbv: fac
sub_groups:
-
name: "Faculty of Arts"
abbv: art
primary_color: orange
colors:
-
name: 'Level 1'
abbv: lvl1
hex: '#ffd5a5'
-
name: 'Level 2'
abbv: lvl2
hex: '#fbaf00'
-
name: 'Level 3'
abbv: lvl3
hex: '#e78100'
-
name: 'Level 4'
abbv: lvl4
hex: '#d93f00'
- -
name: 'Primary' name: 'Primary'
abbv: primary abbv: primary
hex: '#fbaf00' hex: '#fff'
sass: '$uw-white'
-
name: 'Faculty of Applied Health Sciences'
sub_groups:
- -
name: "Faculty of Applied Health Sciences" name: 'Teal'
abbv: ahs abbv: org-ahs
primary_color: teal
colors: colors:
- -
name: 'Level 1' name: 'Level 1'
...@@ -115,180 +94,123 @@ items: ...@@ -115,180 +94,123 @@ items:
name: 'Primary' name: 'Primary'
abbv: primary abbv: primary
hex: '#005963' hex: '#005963'
- - name: 'Faculty of Art'
name: "Faculty of Engineering" sub_groups:
abbv: eng - name: 'Orange'
primary_color: purple abbv: org-art
colors: colors:
- - name: 'Level 1'
name: 'Level 1' abbv: lvl1
hex: '#ffd5a5'
- name: 'Level 2'
abbv: lvl2
hex: '#fbaf00'
- name: 'Level 3'
abbv: lvl3
hex: '#e78100'
- name: 'Level 4'
abbv: lvl4
hex: '#d93f00'
- name: 'Primary'
abbv: primary
hex: '#fbaf00'
- name: 'Faculty of Engineering'
sub_groups:
- name: 'Purple'
abbv: org-eng
colors:
- name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#d0b4ef' hex: '#d0b4ef'
- - name: 'Level 2'
name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#be33da' hex: '#be33da'
- - name: 'Level 3'
name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#8100b4' hex: '#8100b4'
- - name: 'Level 4'
name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#57058b' hex: '#57058b'
- - name: 'Primary'
name: 'Primary'
abbv: primary abbv: primary
hex: '#8100b4' hex: '#8100b4'
- - name: 'Faculty of Environment'
name: "Faculty of Environment" sub_groups:
abbv: env - name: 'Green'
primary_color: green abbv: org-env
colors: colors:
- - name: 'Level 1'
name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#daf582' hex: '#daf582'
- - name: 'Level 2'
name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#bed500' hex: '#bed500'
- - name: 'Level 3'
name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#b4be00' hex: '#b4be00'
- - name: 'Level 4'
name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#607000' hex: '#607000'
- - name: 'Primary'
name: 'Primary'
abbv: primary abbv: primary
hex: '#b4be00' hex: '#b4be00'
- - name: 'Faculty of Mathematics'
name: "Faculty of Math" sub_groups:
abbv: mat - name: 'Pink'
primary_color: pink abbv: org-mat
colors: colors:
- - name: 'Level 1'
name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#ffbeef' hex: '#ffbeef'
- - name: 'Level 2'
name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#ff63aa' hex: '#ff63aa'
- - name: 'Level 3'
name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#df2498' hex: '#df2498'
- - name: 'Level 4'
name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#c60078' hex: '#c60078'
- - name: 'Primary'
name: 'Primary'
abbv: primary abbv: primary
hex: '#df2498' hex: '#df2498'
- - name: 'Faculty of Science'
name: "Faculty of Science" sub_groups:
abbv: sci - name: 'Blue'
primary_color: blue abbv: org-sci
colors: colors:
- - name: 'Level 1'
name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#b4d5ff' hex: '#b4d5ff'
- - name: 'Level 2'
name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#63a0ff' hex: '#63a0ff'
- - name: 'Level 3'
name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#0073ce' hex: '#0073ce'
- - name: 'Level 4'
name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#0033be' hex: '#0033be'
- - name: 'Primary'
name: 'Primary'
abbv: primary abbv: primary
hex: '#0073ce' hex: '#0073ce'
- - name: 'UW Schools'
name: "Affiliated and Federated Institutions of Waterloo"
abbv: aff
sub_groups:
-
name: "Renison University College"
abbv: ren
colors:
-
name: "Renison green"
abbv: green
hex: '#00693c'
-
name: "Renison red"
abbv: red
hex: '#de3831'
-
name: "Renison gold"
abbv: gold
hex: '#d2c295'
-
name: "St. Jerome's University"
abbv: stj
colors:
-
name: "St. Jerome's green"
abbv: green
hex: '#01573e'
-
name: "St. Jerome's gold"
abbv: gold
hex: '#c88a11'
-
name: "St. Paul's University College"
abbv: stp
colors:
-
name: "St. Paul's green"
abbv: green
hex: '#879637'
-
name: "St. Paul's brown"
abbv: brown
hex: '#584528'
-
name: "Conrad Grebel University College"
abbv: cgc
colors:
-
name: "Conrad Grebel red"
abbv: red
hex: '#c4262e'
-
name: "Schools and Satellite Campuses"
abbv: sch
sub_groups: sub_groups:
- - name: 'Red'
name: "Schools and Satellite Campuses" abbv: org-school
abbv: default
primary_color: red
colors: colors:
- - name: 'Level 1'
name: 'Level 1'
abbv: lvl1 abbv: lvl1
hex: '#ffA5aa' hex: '#ffa5aa'
- - name: 'Level 2'
name: 'Level 2'
abbv: lvl2 abbv: lvl2
hex: '#e41740' hex: '#e41740'
- - name: 'Level 3'
name: 'Level 3'
abbv: lvl3 abbv: lvl3
hex: '#b71233' hex: '#b71233'
- - name: 'Level 4'
name: 'Level 4'
abbv: lvl4 abbv: lvl4
hex: '#80001f' hex: '#80001f'
- name: 'Primary'
abbv: primary
hex: '#b71233'
source/_patterns/01-global/00-colors/colors.yml.old deleted 100755 → 0
+ 0
− 58
View file @ 524c7ecb
---
colors:
-
color_set:
-
style: 'background-color: #ffffff; border: 1px solid #dddddd;'
variable: '$color-body'
hex: '#ffffff'
light_text: false
-
style: 'background-color: rgba(0, 0, 0, 0.1);'
variable: '$color-gradient-dark'
hex: '#c2c9d4'
light_text: false
-
style: 'background-color: rgba(255, 255, 255, 0.1); border: 1px solid #dddddd;'
variable: '$color-gradient-light'
hex: '#7f919e'
light_text: false
-
color_set:
-
style: 'background-color: #0071bc;'
variable: '$color-link'
hex: '#0071bc'
light_text: true
-
style: 'background-color: #205493;'
variable: '$color-link-hover'
hex: '#205493'
light_text: true
-
style: 'background-color: #4c2c92;'
variable: '$color-link-visited'
hex: '#4c2c92'
light_text: true
-
color_set:
-
style: 'background-color: #dce4ef;'
variable: '$color-selection-background'
hex: '#dce4ef'
light_text: false
-
style: 'background-color: #212121;'
variable: '$color-selection-foreground'
hex: '#212121'
light_text: true
-
style: 'background-color: #212121;'
variable: '$color-text-primary'
hex: '#212121'
light_text: true
-
style: 'background-color: #5b616b;'
variable: '$color-text-secondary'
hex: '#5b616b'
light_text: true
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment