From a45fad93c679fb65ae7cf8b469eb45d3ec637bba Mon Sep 17 00:00:00 2001
From: Tyler Struyk <tyler.struyk@uwaterloo.ca>
Date: Fri, 4 Oct 2019 13:37:09 +0000
Subject: [PATCH] Added Typography and Colors
---
.../00-global/00-config/colors/_colors.scss | 66 ++++
.../00-global/00-config/colors/_swatches.scss | 55 +++
.../00-global/00-config/colors/colors.twig | 40 +-
.../00-config/colors/colors.twig.old | 18 +
.../00-global/00-config/colors/colors.yml | 344 +++++++++++++++---
.../00-global/00-config/colors/colors.yml.old | 58 +++
.../00-config/typography/_typography.scss | 122 ++++++-
.../00-config/typography/typography.twig | 2 +-
.../00-config/typography/typography.yml | 194 +++++++++-
9 files changed, 805 insertions(+), 94 deletions(-)
create mode 100644 source/_patterns/00-global/00-config/colors/_swatches.scss
create mode 100755 source/_patterns/00-global/00-config/colors/colors.twig.old
create mode 100755 source/_patterns/00-global/00-config/colors/colors.yml.old
diff --git a/source/_patterns/00-global/00-config/colors/_colors.scss b/source/_patterns/00-global/00-config/colors/_colors.scss
index f0dda752..85cb9888 100755
--- a/source/_patterns/00-global/00-config/colors/_colors.scss
+++ b/source/_patterns/00-global/00-config/colors/_colors.scss
@@ -12,3 +12,69 @@ $color-selection-background: #dce4ef;
$color-selection-foreground: #212121;
$color-text-primary: #212121;
$color-text-secondary: #5b616b;
+
+// Theses are all the digital colors. Some have a 5th,
+// however the color is not accessible with the other colors.
+// The primary color is the 3rd.
+// 2nd is lighter than 3rd and 1st is lighter than 1st.
+// 4th is darker than 3rd.
+
+// University Colors
+$uw-colors-uw-blacks-hex: (lvl1: #dfdfdf, lvl2: #a2a2a2, lvl3: #787878, lvl4: #000, primary: #000);
+$uw-colors-uw-golds-hex: (lvl1: #fffaaa, lvl2: #ffea30, lvl3: #fdd54f, lvl4: #e4b429, primary: #fdd54f);
+$uw-colors-uw-whites-hex: (lvl1: #fff, primary: #fff);
+// Faculties Colors
+$uw-colors-fac-ahs-hex: (lvl1: #97dfef, lvl2: #00bed0, lvl3: #0098a5, lvl4: #005963, primary: #005963);
+$uw-colors-fac-art-hex: (lvl1: #ffd5a5, lvl2: #fbaf00, lvl3: #e78100, lvl4: #d93f00, primary: #fbaf00);
+$uw-colors-fac-eng-hex: (lvl1: #d0b4ef, lvl2: #be33da, lvl3: #8100b4, lvl4: #57058b, primary: #8100b4);
+$uw-colors-fac-env-hex: (lvl1: #daf582, lvl2: #bed500, lvl3: #b4be00, lvl4: #607000, primary: #b4be00);
+$uw-colors-fac-mat-hex: (lvl1: #ffbeef, lvl2: #ff63aa, lvl3: #df2498, lvl4: #c60078, primary: #df2498);
+$uw-colors-fac-sci-hex: (lvl1: #b4d5ff, lvl2: #63a0ff, lvl3: #0073ce, lvl4: #0033be, primary: #0073ce);
+// Affiliate
+$uw-colors-aff-ren-hex: (green: #00693c, red: #de3831, gold: #d2c295);
+$uw-colors-aff-stj-hex: (green: #01573e, gold: #c88a11);
+$uw-colors-aff-stp-hex: (green: #879637, brown: #584528);
+$uw-colors-aff-cgc-hex: (red: #c4262e);
+// School and Satellite Campus Colors
+$uw-colors-school-hex: (lvl1: #ffa5aa, lvl2: #e41740, lvl3: #b71233, lvl4: #80001f, primary: #b71233);
+
+$colors: (
+ uw: (
+ black: $uw-colors-uw-blacks-hex,
+ golds: $uw-colors-uw-golds-hex,
+ whites: $uw-colors-uw-whites-hex
+ ),
+ fac: (
+ ahs: $uw-colors-fac-ahs-hex,
+ art: $uw-colors-fac-art-hex,
+ eng: $uw-colors-fac-eng-hex,
+ env: $uw-colors-fac-env-hex,
+ mat: $uw-colors-fac-mat-hex,
+ sci: $uw-colors-fac-sci-hex
+ ),
+ aff: (
+ ren: $uw-colors-aff-ren-hex,
+ stj: $uw-colors-aff-stj-hex,
+ stp: $uw-colors-aff-stp-hex,
+ cgc: $uw-colors-aff-cgc-hex
+ ),
+ sch: (
+ default: $uw_colors_school-hex
+ )
+);
+
+@each $gkey, $group in $colors {
+ @each $sgkey, $sub_group in $group {
+ @each $key, $value in $sub_group {
+ header.#{$gkey}-#{$sgkey} .uw-colors--#{$key}--foreground,
+ body.#{$gkey}-#{$sgkey} .uw-colors--#{$key}--foreground {
+ color: #{$value};
+ }
+
+ header.#{$gkey}-#{$sgkey} .uw-colors--#{$key}--background,
+ body.#{$gkey}-#{$sgkey} .uw-colors--#{$key}--background {
+ background-color: #{$value};
+ }
+ }
+ }
+}
diff --git a/source/_patterns/00-global/00-config/colors/_swatches.scss b/source/_patterns/00-global/00-config/colors/_swatches.scss
new file mode 100644
index 00000000..0b6c82e5
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors/_swatches.scss
@@ -0,0 +1,55 @@
+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+.sg-patterns {
+ -webkit-box-sizing: border-box !important;
+ box-sizing: border-box !important;
+ max-width: 100%;
+ padding: 0 0.5em;
+}
+
+.demo-animate {
+ background: #ddd;
+ border-radius: 8px;
+ cursor: pointer;
+ margin-bottom: 1em;
+ padding: 1em;
+ text-align: center;
+}
+
+.sg-colors {
+ //display: -webkit-box;
+ //display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ list-style: none !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+.sg-colors li {
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ -webkit-box-flex: 1;
+ -ms-flex: auto;
+ flex: auto;
+ margin: 0 0.5em 0.5em 0;
+ max-width: 14em;
+ min-width: 5em;
+ padding: 0.3em;
+}
+
+.sg-swatch {
+ border-radius: 5px;
+ display: block;
+ height: 4em;
+ margin-bottom: 0.3em;
+}
+
+.sg-label {
+ font-size: 90%;
+ line-height: 1;
+}
diff --git a/source/_patterns/00-global/00-config/colors/colors.twig b/source/_patterns/00-global/00-config/colors/colors.twig
index 3fe0ad0d..13724582 100755
--- a/source/_patterns/00-global/00-config/colors/colors.twig
+++ b/source/_patterns/00-global/00-config/colors/colors.twig
@@ -1,18 +1,22 @@
-<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>
+{% for group in items.groups %}
+ <h1> {{ group.name }}</h1>
+ {% for sub_group in group.sub_groups %}
+ {% if (sub_group.primary_color) %}
+ <h2> {{ sub_group.name }} - {{ sub_group.primary_color }}</h2>
+ {% else %}
+ <h2> {{ sub_group.name }}</h2>
+ {% endif %}
+ <ul class="sg-colors">
+ {% for color in sub_group.colors %}
+ <li>
+ <div class="sg-swatch uw-colors--{{ group.abbv }}-{{ sub_group.abbv }}-{{ color.abbv }}--background" style="background: {{ color.hex }}"></div>
+ <code>{{ color.name }}</code>
+ <div class="sg-info">
+ <span>{{ color.hex }}</span> <br/>
+ <code>body.{{ group.abbv }}-{{ sub_group.abbv }}<br/> .uw-colors-{{ color.abbv }}--(background|foreground)</code>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+ {% endfor %}
+{% endfor %}
diff --git a/source/_patterns/00-global/00-config/colors/colors.twig.old b/source/_patterns/00-global/00-config/colors/colors.twig.old
new file mode 100755
index 00000000..3fe0ad0d
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors/colors.twig.old
@@ -0,0 +1,18 @@
+<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>
diff --git a/source/_patterns/00-global/00-config/colors/colors.yml b/source/_patterns/00-global/00-config/colors/colors.yml
index 6b08b70d..8f58f037 100755
--- a/source/_patterns/00-global/00-config/colors/colors.yml
+++ b/source/_patterns/00-global/00-config/colors/colors.yml
@@ -1,58 +1,294 @@
----
-colors:
--
- color_set:
+test: "hello test"
+items:
+ groups:
-
- style: 'background-color: #ffffff; border: 1px solid #dddddd;'
- variable: '$color-body'
- hex: '#ffffff'
- light_text: false
+ name: "University of Waterloo"
+ abbv: uw
+ sub_groups:
+ -
+ name: "Gold/Yellow"
+ abbv: golds
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#ffffaa'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#ffea3d'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#ffd54f'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#e4b429'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#ffd54f'
+ -
+ name: "Black/Grey"
+ abbv: blacks
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#dfdfdf'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#a2a2a2'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#787878'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#000000'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#000000'
+ -
+ name: "White"
+ abbv: whites
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#ffffff'
-
- style: 'background-color: rgba(0, 0, 0, 0.1);'
- variable: '$color-gradient-dark'
- hex: '#c2c9d4'
- light_text: false
+ 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'
+ abbv: primary
+ hex: '#fbaf00'
+ -
+ name: "Faculty of Applied Health Sciences"
+ abbv: ahs
+ primary_color: teal
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#97dfef'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#00bed0'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#0098a5'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#005963'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#005963'
+ -
+ name: "Faculty of Engineering"
+ abbv: eng
+ primary_color: purple
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#d0b4ef'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#be33da'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#8100b4'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#57058b'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#8100b4'
+ -
+ name: "Faculty of Environment"
+ abbv: env
+ primary_color: green
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#daf582'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#bed500'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#b4be00'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#607000'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#b4be00'
+ -
+ name: "Faculty of Math"
+ abbv: mat
+ primary_color: pink
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#ffbeef'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#ff63aa'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#df2498'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#c60078'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#df2498'
+ -
+ name: "Faculty of Science"
+ abbv: sci
+ primary_color: blue
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#b4d5ff'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#63a0ff'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#0073ce'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#0033be'
+ -
+ name: 'Primary'
+ abbv: primary
+ hex: '#0073ce'
-
- style: 'background-color: rgba(255, 255, 255, 0.1); border: 1px solid #dddddd;'
- variable: '$color-gradient-light'
- hex: '#7f919e'
- light_text: false
--
- color_set:
+ 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'
-
- 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
+ name: "Schools and Satellite Campuses"
+ abbv: sch
+ sub_groups:
+ -
+ name: "Schools and Satellite Campuses"
+ abbv: default
+ primary_color: red
+ colors:
+ -
+ name: 'Level 1'
+ abbv: lvl1
+ hex: '#ffA5aa'
+ -
+ name: 'Level 2'
+ abbv: lvl2
+ hex: '#e41740'
+ -
+ name: 'Level 3'
+ abbv: lvl3
+ hex: '#b71233'
+ -
+ name: 'Level 4'
+ abbv: lvl4
+ hex: '#80001f'
diff --git a/source/_patterns/00-global/00-config/colors/colors.yml.old b/source/_patterns/00-global/00-config/colors/colors.yml.old
new file mode 100755
index 00000000..6b08b70d
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors/colors.yml.old
@@ -0,0 +1,58 @@
+---
+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
diff --git a/source/_patterns/00-global/00-config/typography/_typography.scss b/source/_patterns/00-global/00-config/typography/_typography.scss
index dc57285a..67fece2b 100755
--- a/source/_patterns/00-global/00-config/typography/_typography.scss
+++ b/source/_patterns/00-global/00-config/typography/_typography.scss
@@ -8,9 +8,10 @@ $vertical-spacing: $base-font-size; // Used as the default spacing below most it
$vertical-spacing-forms: 30px; // Used as the default spacing below form elements.
// Fonts
-$system-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
-$base-font-family: 'Lora', serif;
-$header-font-family: 'Open Sans', sans-serif;
+//$system-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
+$system-font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+$base-font-family: georgia, "droid serif", "Times New Roman", Times, serif;
+$header-font-family: georgia, "droid serif", "Times New Roman", Times, serif;
$monospace-font-family: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
// Typographic Scale
@@ -29,3 +30,118 @@ $font-size-h3: $font-size-lg;
$font-size-h4: $font-size-md;
$font-size-h5: $font-size-sm;
$font-size-h6: $font-size-xs;
+
+@font-face {
+ font-family: 'BureauGrotCond Book';
+ font-style: normal;
+ font-weight: normal;
+ src: url('/fonts/Bureau_Grot-Condensed_Book.eot'), url('/fonts/Bureau_Grot-Condensed_Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Condensed_Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Condensed_Book.woff') format('woff'), url('/fonts/Bureau_Grot-Condensed_Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Condensed_Book.svg#Bureau_Grot-Condensed_Book') format('svg');
+}
+
+@font-face {
+ font-family: 'BureauGrotWide';
+ font-style: normal;
+ font-weight: 300;
+ src: url('/fonts/Bureau_Grot-Wide_Light.eot'), url('/fonts/Bureau_Grot-Wide_Light.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Wide_Light.woff2') format('woff2'), url('/fonts/Bureau_Grot-Wide_Light.woff') format('woff'), url('/fonts/Bureau_Grot-Wide_Light.ttf') format('truetype'), url('/fonts/Bureau_Grot-Wide_Light.svg#Bureau_Grot-Wide_Light') format('svg');
+}
+
+@font-face {
+ font-family: 'BureauGrot Book';
+ font-style: normal;
+ font-weight: normal;
+ src: url('/fonts/BureauGrot-Book.eot'), url('/fonts/Bureau_Grot-Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Book.woff') format('woff'), url('/fonts/Bureau_Grot-Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Book.svg#Bureau_Grot-Book') format('svg');
+}
+
+@font-face {
+ font-family: 'BureauGrotCond';
+ font-style: normal;
+ font-weight: bold;
+ src: url('/fonts/BureauGrot-Condensed_Bold.eot'), url('/fonts/Bureau_Grot-Condensed_Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Condensed_Bold.woff2') format('woff2'), url('/fonts/Bureau_Grot-Condensed_Bold.woff') format('woff'), url('/fonts/Bureau_Grot-Condensed_Bold.ttf') format('truetype'), url('/fonts/Bureau_Grot-Condensed_Bold.svg#Bureau_Grot-Condensed_Bold') format('svg');
+}
+
+@font-face {
+ font-family: 'BureauGrot';
+ font-style: normal;
+ font-weight: 300;
+ src: url('/fonts/BureauGrot-Light.eot'), url('/fonts/Bureau_Grot-Light.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Light.woff2') format('woff2'), url('/fonts/Bureau_Grot-Light.woff') format('woff'), url('/fonts/Bureau_Grot-Light.ttf') format('truetype'), url('/fonts/Bureau_Grot-Light.svg#Bureau_Grot-Light') format('svg');
+}
+
+@font-face {
+ font-family: 'BureauGrotWide Book';
+ font-style: normal;
+ font-weight: normal;
+ src: url('/fonts/BureauGrotWide-Book.eot'), url('/fonts/Bureau_Grot-Wide_Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Wide_Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Wide_Book.woff') format('woff'), url('/fonts/Bureau_Grot-Wide_Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book') format('svg');
+}
+
+@font-face {
+ font-family: 'iconic';
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/iconic.eot");
+ src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype");
+}
+
+/* Complete 1451 */
+
+@font-face {
+ font-family: "Typ1451-Regularalternate";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-regularalternate.eot"), url("/fonts/lineto-typ1451-regularalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regularalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-regularalternate.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Mediumalternate";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-mediumalternate.eot"), url("/fonts/lineto-typ1451-mediumalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-mediumalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-mediumalternate.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Regular";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-regular.eot"), url("/fonts/lineto-typ1451-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regular.woff2") format("woff2"), url("/fonts/lineto-typ1451-regular.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Boldalternate";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-boldalternate.eot"), url("/fonts/lineto-typ1451-boldalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-boldalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-boldalternate.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Medium";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-medium.eot"), url("/fonts/lineto-typ1451-medium.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-medium.woff2") format("woff2"), url("/fonts/lineto-typ1451-medium.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Bold";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-bold.eot"), url("/fonts/lineto-typ1451-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-bold.woff2") format("woff2"), url("/fonts/lineto-typ1451-bold.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Light";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-light.eot"), url("/fonts/lineto-typ1451-light.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-light.woff2") format("woff2"), url("/fonts/lineto-typ1451-light.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Typ1451-Lightalternate";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/lineto-typ1451-lightalternate.eot"), url("/fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-lightalternate.woff") format("woff");
+}
+
+@font-face {
+ font-family: "fdsu-rwd";
+ font-style: normal;
+ font-weight: normal;
+ src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg");
+}
diff --git a/source/_patterns/00-global/00-config/typography/typography.twig b/source/_patterns/00-global/00-config/typography/typography.twig
index 9d14bc69..c7ac0be7 100755
--- a/source/_patterns/00-global/00-config/typography/typography.twig
+++ b/source/_patterns/00-global/00-config/typography/typography.twig
@@ -4,7 +4,7 @@
{% for font in webfont.font %}
<div class="pattern-lab-font__item">
<div class="pattern-lab-font__preview-character" style="{{ font.font_preview_style }}">{{ font.font_preview_character }}</div>
- <div class="pattern-lab-font__preview" style="{{ font.font_preview_style }}">{{ font.font_preview }}</div>
+ <div class="pattern-lab-font__preview" style='{{ font.font_preview_style}}'>{{ font.font_preview }}</div>
<div class="pattern-lab-font__preview-meta">
<div class="pattern-lab-font__name">{{ font.font_name }}</div>
<div class="pattern-lab-font__weight"><span class="pattern-lab-font__label">Weight:</span> {{ font.font_weight }}</div>
diff --git a/source/_patterns/00-global/00-config/typography/typography.yml b/source/_patterns/00-global/00-config/typography/typography.yml
index ff60bfbd..f46c55f7 100755
--- a/source/_patterns/00-global/00-config/typography/typography.yml
+++ b/source/_patterns/00-global/00-config/typography/typography.yml
@@ -1,52 +1,210 @@
---
webfonts:
-
- family_name: 'Open Sans'
- style: 'font-family: "Open Sans", sans-serif;'
+ family_name: 'georgia'
+ style: 'font-family: "georgia";'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Open Sans"; font-weight: 300; font-style: normal;'
- font_name: 'Open Sans'
+ font_preview_style: 'font-family: georgia; font-weight: 300; font-style: normal;'
+ font_name: 'georgia'
font_weight: '300'
font_style: 'normal'
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Open Sans"; font-weight: 400; font-style: normal;'
- font_name: 'Open Sans'
+ font_preview_style: 'font-family: georgia; font-weight: 400; font-style: normal;'
+ font_name: 'georgia'
font_weight: '400'
font_style: 'normal'
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Open Sans"; font-weight: 600; font-style: normal;'
- font_name: 'Open Sans'
+ font_preview_style: 'font-family: georgia; font-weight: 600; font-style: normal;'
+ font_name: 'georgia'
font_weight: '600'
font_style: 'normal'
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Open Sans"; font-weight: 700; font-style: normal;'
- font_name: 'Open Sans'
+ font_preview_style: "font-family: \"georgia\"; font-weight: 700; font-style: normal;"
+ font_name: 'georgia'
font_weight: '700'
font_style: 'normal'
-
- family_name: 'Lora'
- style: 'font-family: "Lora", serif;'
+ family_name: 'BureauGrot'
+ style: 'font-family: "BureauGrot", serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Lora"; font-weight: 400; font-style: normal;'
- font_name: 'Lora'
- font_weight: '400'
+ font_preview_style: "font-family: \"BureauGrot\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrot'
+ font_weight: '300'
font_style: 'normal'
+-
+ family_name: 'BureauGrotCond'
+ style: 'font-family: "BureauGrotCond", serif;'
+ font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
- font_preview_style: 'font-family: "Lora"; font-weight: 700; font-style: normal;'
- font_name: 'Lora'
- font_weight: '700'
+ font_preview_style: "font-family: \"BureauGrotCond\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrotCond'
+ font_weight: '300'
+ font_style: 'bold'
+-
+ family_name: 'BureauGrotWide'
+ style: 'font-family: "BureauGrotWide", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"BureauGrotWide\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrotWide'
+ font_weight: '300'
+ font_style: 'normal'
+-
+ family_name: 'BureauGrot Book'
+ style: 'font-family: "BureauGrot Book", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"BureauGrot Book\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrot Book'
+ font_weight: '300'
+ font_style: 'normal'
+-
+ family_name: 'BureauGrotCond Book'
+ style: 'font-family: "BureauGrotCond Book", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"BureauGrotCond Book\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrotCond Book'
+ font_weight: '300'
+ font_style: 'normal'
+-
+ family_name: 'BureauGrotWide Book'
+ style: 'font-family: "BureauGrotWide Book", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"BureauGrotWide Book\"; font-weight: 400; font-style: normal;"
+ font_name: 'BureauGrotWide Book'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'iconic'
+ style: 'font-family: "iconic", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"iconic\"; font-weight: 400; font-style: normal;"
+ font_name: 'iconic'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Regularalternate'
+ style: 'font-family: "Typ1451-Regularalternate", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Regularalternate\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Regularalternate'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Mediumalternate'
+ style: 'font-family: "Typ1451-Mediumalternate", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Mediumalternate\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Mediumalternate'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Regular'
+ style: 'font-family: "Typ1451-Regular", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Regular\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Regular'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Boldalternate'
+ style: 'font-family: "Typ1451-Boldalternate", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Boldalternate\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Boldalternate'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Medium'
+ style: 'font-family: "Typ1451-Medium", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Medium\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Medium'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Bold'
+ style: 'font-family: "Typ1451-Bold", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Bold\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Bold'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Light'
+ style: 'font-family: "Typ1451-Light", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Light\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Light'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'Typ1451-Lightalternate'
+ style: 'font-family: "Typ1451-Lightalternate", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"Typ1451-Lightalternate\"; font-weight: 400; font-style: normal;"
+ font_name: 'Typ1451-Lightalternate'
+ font_weight: 'normal'
+ font_style: 'normal'
+-
+ family_name: 'fdsu-rwd'
+ style: 'font-family: "fdsu-rwd", serif;'
+ font:
+ -
+ font_preview_character: 'Aa'
+ font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+ font_preview_style: "font-family: \"fdsu-rwd\"; font-weight: 400; font-style: normal;"
+ font_name: 'fdsu-rwd'
+ font_weight: 'normal'
font_style: 'normal'
--
GitLab