Create color variables file, update Fonts (test)

src/color/_index.scss

@@ -1,2 +1,3 @@
 @import "helpers";
 @import "base";
+@import "variables";

src/color/_variables.scss

@@ -0,0 +1,70 @@
+/**
+ * @file Color
+ * @module Color
+ * @overview Casper color palette variables
+ */
+
+:root {
+  // Base colors
+  --blue: #00237e;
+  --green: #7beac9;
+  --red: #ed5a4d;
+
+  // Primary stack
+  --primary: var(--blue);
+  --primary1: #031f6a;
+  --primary2: #071a53;
+
+  // Secondary stack
+  --secondary: var(--green);
+  --secondary1: #9ef0d8;
+  --secondary2: #c6f6e8;
+
+  // Accent stack
+  --accent: var(--red);
+  --accent1: #ee675b;
+  --accent2: #fbd4d0;
+
+  // Light blue stack
+  --light-blue: #caeff2;
+  --light-blue1: #dcf4f6;
+  --light-blue2: #edf9fa;
+
+  // Gray stack
+  --gray: #505050;
+  --gray1: #6a6a6a;
+  --gray2: #7c7c7c;
+  --gray3: #a8a8a8;
+  --gray4: #b9b9b9;
+  --gray5: #cbcbcb;
+  --gray6: #d9d9d9;
+  --gray7: #e5e5e5;
+  --gray8: #efefef;
+  --gray9: #f6f6f6;
+
+  // Other colors
+  --dark-blue: var(--primary2);
+  --trial-blue: #708da9;
+  --gold: #bca890;
+
+  // Text
+  --text: var(--gray);
+  --light-text: var(--gray7);
+  --medium-text: var(--gray3);
+  --dark-text: var(--gray2);
+
+  // Backgrounds
+  --background: white;
+  --light-background: var(--gray9);
+  --medium-background: var(--gray8);
+  --dark-background: var(--gray6);
+
+  // Borders
+  --border: var(--gray7);
+  --medium-border: var(--gray6);
+  --dark-border: var(--gray5);
+
+  // States
+  --error: var(--accent2);
+  --disabled: var(--gray2);
+}

src/phantom/base/_fonts_config.scss

@@ -8,9 +8,9 @@
 
 $calibre-light: "Calibre Light";
 $calibre-medium: "Calibre Medium";
-$verlag: "Verlag A", "Verlag B";
-$chronicle-deck: "Chronicle Deck A", "Chronicle Deck B";
-$chronicle-display: "Chronicle SSm A", "Chronicle SSm B";
+$verlag: "Verlag Black";
+$chronicle-deck: "Chronicle Deck";
+$chronicle-deck-italic: "Chronicle Deck Italic";
 
 $sans-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $serif-stack: Georgia, serif;
@@ -20,7 +20,7 @@ $serif-stack: Georgia, serif;
  font-weight: 400;
  font-style: normal;
 
- .wf-active & {
+ .fonts-1 & {
    font-family: $calibre-light;
  }
 }
@@ -30,7 +30,7 @@ $serif-stack: Georgia, serif;
  font-weight: 400;
  font-style: normal;
 
- .wf-active & {
+ .fonts-2 & {
    font-family: $calibre-medium;
  }
 }
@@ -40,28 +40,27 @@ $serif-stack: Georgia, serif;
   font-weight: 400;
   font-style: normal;
 
-  .wf-active & {
+  .fonts-2 & {
     font-family: $verlag;
   }
 }
 
 %verlag-light {
   font-family: $sans-stack;
-  font-weight: 300;
+  font-weight: 400;
   font-style: normal;
 
-  .wf-active & {
+  .fonts-2 & {
     font-family: $verlag;
   }
 }
 
 %verlag-black {
  font-family: $sans-stack;
- font-weight: 800;
+ font-weight: 400;
  font-style: normal;
- text-transform: uppercase; // @todo: Address for i18n. Update content to desired case, remove transform
 
- .wf-active & {
+ .fonts-2 & {
    font-family: $verlag;
  }
 }
@@ -71,7 +70,7 @@ $serif-stack: Georgia, serif;
  font-weight: 400;
  font-style: normal;
 
- .wf-active & {
+ .fonts-2 & {
    font-family: $chronicle-deck;
  }
 }
@@ -81,17 +80,17 @@ $serif-stack: Georgia, serif;
   font-weight: 400;
   font-style: normal;
 
-  .wf-active & {
-    font-family: $chronicle-display;
+  .fonts-2 & {
+    font-family: $chronicle-deck;
   }
 }
 
 %chronicle-italic {
  font-family: $serif-stack;
  font-weight: 400;
- font-style: italic;
+ font-style: normal;
 
- .wf-active & {
-   font-family: $chronicle-deck;
+ .fonts-2 & {
+   font-family: $chronicle-deck-italic;
  }
 }

src/phantom/base/typography/_bundle.scss

@@ -2,15 +2,3 @@
 @import "links_config";
 @import "lists_config";
 @import "paragraphs_config";
-
-@font-face {
-  font-family: "Calibre Light";
-  src: url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Light.woff2') format('woff2'),
-       url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Light.woff') format('woff');
-}
-
-@font-face {
-  font-family: "Calibre Medium";
-  src: url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Medium.woff2') format('woff2'),
-       url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Medium.woff') format('woff');
-}

src/phantom/base/typography/_paragraphs_config.scss

@@ -55,7 +55,7 @@ laid down and counted the sheep. Sleep head was laying down counting sheep.
   font-size: 16px;
 
   @include respond-at-and-above(640px) {
-    .wf-active & {
+    .fonts-2 & {
       font-family: $chronicle-deck;
     }
   }

src/typography/_fonts_config.scss

@@ -7,41 +7,62 @@
  * @todo Create a mixin for fonts. https://trello.com/c/pjMl9MoQ
  */
 
+$calibre-thin: "Calibre Thin";
 $calibre-light: "Calibre Light";
 $calibre-medium: "Calibre Medium";
-$verlag: "Verlag A", "Verlag B";
-$chronicle-deck: "Chronicle Deck A", "Chronicle Deck B";
+$verlag-black: "Verlag Black";
+$chronicle-deck: "Chronicle Deck";
+$chronicle-deck-italic: "Chronicle Deck Italic";
 
 $sans-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $serif-stack: Georgia, serif;
 
+@mixin calibre-thin {
+  font-family: $sans-stack;
+  font-weight: 400;
+  font-style: normal;
+
+  .fonts-1 & {
+    font-family: $calibre-light;
+  }
+
+  .fonts-2 & {
+    font-family: $calibre-thin;
+  }
+}
+
 @mixin calibre-light {
   font-family: $sans-stack;
   font-weight: 400;
   font-style: normal;
 
-  .wf-active & {
+  .fonts-1 & {
     font-family: $calibre-light;
   }
 }
 
 @mixin calibre-medium {
  font-family: $sans-stack;
- font-weight: 400;
+ font-weight: bold;
  font-style: normal;
 
- .wf-active & {
+ .fonts-1 & {
+   font-family: $calibre-light;
+ }
+
+ .fonts-2 & {
    font-family: $calibre-medium;
+   font-weight: 400;
  }
 }
 
 @mixin verlag-black {
   font-family: $sans-stack;
-  font-weight: 800;
-  font-style: normal;
+  font-weight: bold;
 
-  .wf-active & {
-   font-family: $verlag;
+  .fonts-2 & {
+    font-family: $verlag-black;
+    font-weight: 400;
   }
 }
 
@@ -50,17 +71,18 @@ $serif-stack: Georgia, serif;
  font-weight: 400;
  font-style: normal;
 
- .wf-active & {
-   font-family: $chronicle-deck;
- }
+  .fonts-2 & {
+    font-family: $chronicle-deck;
+  }
 }
 
 @mixin chronicle-italic {
  font-family: $serif-stack;
  font-weight: 400;
  font-style: italic;
 
- .wf-active & {
-   font-family: $chronicle-deck;
- }
+  .fonts-2 & {
+    font-family: $chronicle-deck-italic;
+    font-style: normal;
+  }
 }

src/typography/_load_fonts.scss

@@ -5,6 +5,12 @@
  * @see app/assets/js/load-fonts.js
  */
 
+@font-face {
+  font-family: "Calibre Thin";
+  src: url('https://s3.amazonaws.com/nightshade-fonts/CalibreThin.woff2') format('woff2'),
+       url('https://s3.amazonaws.com/nightshade-fonts/CalibreThin.woff') format('woff');
+}
+
 @font-face {
   font-family: "Calibre Light";
   src: url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Light.woff2') format('woff2'),
@@ -16,3 +22,21 @@
   src: url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Medium.woff2') format('woff2'),
        url('https://s3.amazonaws.com/nightshade-fonts/CalibreWeb-Medium.woff') format('woff');
 }
+
+@font-face {
+  font-family: "Verlag Black";
+  src: url('https://s3.amazonaws.com/nightshade-fonts/VerlagBlack.woff2') format('woff2'),
+       url('https://s3.amazonaws.com/nightshade-fonts/VerlagBlack.woff') format('woff');
+}
+
+@font-face {
+  font-family: "Chronicle Deck";
+  src: url('https://s3.amazonaws.com/nightshade-fonts/ChronicleDeck.woff2') format('woff2'),
+       url('https://s3.amazonaws.com/nightshade-fonts/ChronicleDeck.woff') format('woff');
+}
+
+@font-face {
+  font-family: "Chronicle Deck Italic";
+  src: url('https://s3.amazonaws.com/nightshade-fonts/ChronicleDeckItalic.woff2') format('woff2'),
+       url('https://s3.amazonaws.com/nightshade-fonts/ChronicleDeckItalic.woff') format('woff');
+}