@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/scss/components/_hero-title.scss

@@ -0,0 +1,118 @@
+// TO BE DELETED...
+
+@import '~@reuters-graphics/style-color/scss/categorical/base';
+
+section.hero-title {
+  @extend .clearfix;
+  @extend .well, .widest;
+
+  position: relative;
+
+  figure {
+    position: relative;
+    margin-left: -15px;
+    width: 100vw;
+    height: calc(100vh - 60px);
+    max-height: 150vw;
+
+    @include media-breakpoint-down(sm) {
+      height: calc(70vh);
+    }
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &.crop-left {
+        object-position: 100% 0;
+      }
+
+      &.crop-right {
+        object-position: 0 0;
+      }
+    }
+
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.1);
+
+      &.darker {
+        background-color: rgba(0, 0, 0, 0.25);
+      }
+
+      &.darkest {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      &.light {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+
+      &.lighter {
+        background-color: rgba(255, 255, 255, 0.4);
+      }
+
+      &.lightest {
+        background-color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+
+  .title {
+    width: 100%;
+    position: absolute;
+    top: calc(50% - 60px);
+    text-align: center;
+
+    &.top {
+      top: 20px;
+    }
+
+    &.bottom {
+      top: auto;
+      bottom: 20px;
+    }
+
+    &.left {
+      text-align: left;
+    }
+
+    &.right {
+      text-align: right;
+    }
+
+    h2,
+    p {
+      @extend .font-sans;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 4rem;
+      line-height: 4rem;
+
+      @include media-breakpoint-down(sm) {
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    p.section-title {
+      @extend .spaced-least;
+      @extend .uppercase;
+
+      margin: 0 0 2px;
+      font-weight: 600;
+      font-size: 0.8rem;
+    }
+  }
+}

package/dist/scss/fonts/_font-faces.scss

@@ -0,0 +1,129 @@
+/* REUTERS KNOWLEDGE */
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 100;
+  src:
+    local('Knowledge Ultra Light'),
+    local('KnowledgeUltraLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    local('Knowledge Light'),
+    local('KnowledgeLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local('Knowledge Regular'),
+    local('KnowledgeRegular'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local('Knowledge Regular Italic'),
+    local('KnowledgeRegularItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local('Knowledge Medium'),
+    local('KnowledgeMedium'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local('Knowledge Bold'),
+    local('KnowledgeBold'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  font-style: italic;
+  font-weight: 700;
+  src:
+    local('Knowledge Bold Italic'),
+    local('KnowledgeBoldItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff') format('woff');
+}
+
+/* SOURCE SANS PRO */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local('Source Sans Pro'),
+    local('SourceSansPro-Regular'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src:
+    local('Source Sans Pro Semibold'),
+    local('SourceSansPro-Semibold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local('Source Sans Pro Bold'),
+    local('SourceSansPro-Bold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local('Source Sans Pro Italic'),
+    local('SourceSansPro-It'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff') format('woff');
+}
+
+/* FREIGHT BOOK */
+@font-face {
+  font-family: 'freight-book';
+  font-style: normal;
+  font-weight: normal;
+  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff') format('woff');
+}

package/dist/scss/fonts/_mixins.scss

@@ -0,0 +1,25 @@
+@import '../fonts/variables';
+
+@mixin font-sans($i: false) {
+  $important: if($i, '!important', '');
+
+  font-family: $font-family-sans-serif #{$important};
+}
+
+@mixin font-serif($i: false) {
+  $important: if($i, '!important', '');
+
+  font-family: $font-family-serif #{$important};
+}
+
+@mixin font-monospace($i: false) {
+  $important: if($i, '!important', '');
+
+  font-family: $font-family-monospace #{$important};
+}
+
+@mixin font-display($i: false) {
+  $important: if($i, '!important', '');
+
+  font-family: $font-family-display #{$important};
+}

package/dist/scss/fonts/_rules.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+
+.font-sans {
+  font-family: var(
+    --theme-font-family-sans-serif,
+    $font-family-display
+  ) !important;
+}
+
+.font-serif {
+  font-family: var(--theme-font-family-serif, $font-family-serif) !important;
+}
+
+.font-monospace {
+  font-family: var(
+    --theme-font-family-monospace,
+    $font-family-monospace
+  ) !important;
+}

package/dist/scss/fonts/_variables.scss

@@ -0,0 +1,26 @@
+$font-family-serif: var(--theme-font-family-serif, 'freight-book', serif);
+
+$font-family-sans-serif: var(
+  --theme-font-family-sans-serif,
+  'Source Sans Pro',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Helvetica,
+  Arial,
+  sans-serif
+);
+
+$font-family-monospace: var(
+  --theme-font-family-monspace,
+  Menlo,
+  Monaco,
+  Consolas,
+  'Liberation Mono',
+  'Courier New',
+  monospace
+);
+
+$font-family-display: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;

package/dist/scss/main.scss

@@ -0,0 +1,16 @@
+@import 'fonts/font-faces';
+
+// Variables
+@import 'variables';
+
+// Mixins
+@import 'mixins';
+
+// Bootstrap
+@import 'bootstrap/main';
+
+// Styles
+@import 'fonts/rules';
+@import 'typography/rules';
+@import 'typography/main';
+@import 'spacers/rules';

package/dist/scss/mixins/_block.scss

@@ -0,0 +1,62 @@
+$column-width-narrower: 330px !default;
+$column-width-narrow: 510px !default;
+$column-width-normal: 660px !default;
+$column-width-wide: 930px !default;
+$column-width-wider: 1200px !default;
+
+@mixin block-snap-widths($article-padding: 30px) {
+  width: $column-width-narrower;
+
+  @media (min-width: ($column-width-narrow + $article-padding)) {
+    &:not(.skip-narrow) {
+      width: $column-width-narrow;
+    }
+  }
+
+  @media (min-width: ($column-width-normal + $article-padding)) {
+    &:not(.skip-normal) {
+      width: $column-width-normal;
+    }
+  }
+
+  &.narrower {
+    @media (min-width: ($column-width-narrower + $article-padding)) {
+      width: $column-width-narrower;
+    }
+  }
+
+  &.narrow {
+    @media (min-width: ($column-width-narrow + $article-padding)) {
+      width: $column-width-narrow;
+    }
+  }
+
+  &.wide {
+    @media (min-width: ($column-width-wide + $article-padding)) {
+      width: $column-width-wide;
+    }
+  }
+
+  &.wider {
+    @media (min-width: ($column-width-wide + $article-padding)) {
+      &:not(.skip-wide) {
+        width: $column-width-wide;
+      }
+    }
+
+    @media (min-width: ($column-width-wider + $article-padding)) {
+      // This rule is just to get around the cascade on the :not(.skip-wide)
+      &:not(.skip-wider) {
+        width: $column-width-wider;
+      }
+    }
+  }
+
+  &.widest, &.fluid {
+    width: inherit;
+  }
+  
+  &.fluid {
+    width: calc(100% + $article-padding);
+  }
+}

package/dist/scss/mixins/_body-text.scss

@@ -0,0 +1,113 @@
+@import '../fonts/mixins';
+@import '../fonts/variables';
+@import '../typography/font-size';
+@import '../colours/thematic/tr';
+
+@mixin body-text {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  li,
+  blockquote {
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+  }
+  p,
+  ul li,
+  ul li p,
+  ol li,
+  ol li p {
+    -webkit-font-smoothing: antialiased;
+    font-family: var(--theme-font-family-body, $font-family-serif);
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+
+    @extend .paragraph-size;
+
+    a {
+      color: currentColor;
+      background-size: 1px 1px;
+      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
+      background-position: 0 1.3rem;
+      background-repeat: repeat-x;
+      text-decoration: none;
+      // TODO: Assign this to background colour CSS var and the underline will skip descenders
+      text-shadow: 1px 1px var(--theme-colour-background, #ffffff),
+        1px -1px var(--theme-colour-background, #ffffff),
+        -1px 1px var(--theme-colour-background, #ffffff),
+        -1px -1px var(--theme-colour-background, #ffffff);
+
+      @media (max-width: 540px) {
+        background-position: 0 1.1rem;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  h2 {
+    margin: 4rem 0 2rem;
+    text-align: center;
+    font-weight: 600;
+
+    &::after {
+      display: block;
+      content: '';
+      background: var(--theme-colour-text-secondary, $tr-medium-grey);
+      height: 3px;
+      width: 100px;
+      margin: 10px auto 2rem;
+    }
+  }
+
+  ul {
+    padding-left: 1.75rem;
+    list-style-type: square;
+  }
+  p + ul {
+    margin-top: -0.75rem;
+  }
+
+  blockquote {
+    margin: 30px 0;
+    border-left: 2px solid var(--theme-colour-text-secondary, $tr-medium-grey);
+    padding-left: 15px;
+
+    p {
+      @extend .blockquote-size;
+      font-family: var(--theme-font-family-body, $font-family-serif);
+    }
+
+    // Markdown cheat to use for attribution
+    blockquote {
+      border: 0;
+      padding: 0;
+      margin: -5px 0 0;
+
+      p {
+        font-family: var(--theme-font-family-body, $font-family-serif);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
+        font-size: 1rem;
+
+        @media (max-width: 540px) {
+          font-size: 0.9rem;
+        }
+      }
+
+      // Kill any additional nestings...
+      blockquote {
+        display: none;
+      }
+    }
+  }
+
+  &.font-sans {
+    font-family: var(
+      --theme-font-family-sans-serif,
+      $font-family-sans-serif
+    ) !important;
+  }
+}

package/dist/scss/mixins/_graphic.scss

@@ -0,0 +1,66 @@
+@import '../colours/thematic/tr';
+@import '../fonts/mixins';
+
+@mixin graphic-text {
+  h3 {
+    margin-bottom: 0.5rem;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+  }
+
+  p {
+    -webkit-font-smoothing: antialiased;
+    @include font-display;
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+    margin-bottom: 1rem;
+    &:last-of-type {
+      margin-bottom: 1rem;
+    }
+
+    @media (max-width: 540px) {
+      font-size: 1rem;
+      line-height: 1.35rem;
+    }
+
+    a {
+      color: currentColor;
+      background-size: 1px 1px;
+      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+      background-position: 0 1.1rem;
+      background-repeat: repeat-x;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // Used for footnotes and source lines
+  aside {
+    p {
+      @include font-display;
+      margin-bottom: 0;
+      color: var(--theme-colour-text-secondary, $tr-medium-grey);
+      font-size: 0.9rem;
+      line-height: 1.2rem;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      @media (max-width: 540px) {
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+      }
+
+      a {
+        color: currentColor;
+        text-decoration: underline;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}

package/dist/scss/mixins/_note-text.scss

@@ -0,0 +1,34 @@
+@import '../fonts/variables';
+
+@mixin note-text {
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--theme-font-family-note, $font-family-display);
+    color: var(--theme-colour-text-primary);
+    margin: 1rem 0 0;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+  }
+
+  p {
+    font-family: var(--theme-font-family-note, $font-family-display);
+    font-size: 1rem;
+    font-weight: 200;
+    color: var(--theme-colour-text-primary);
+    a {
+      color: currentColor;
+      background-size: 1px 1px;
+      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+      background-position: 0 1.1rem;
+      background-repeat: repeat-x;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}

package/dist/scss/mixins/_visually-hidden.scss

@@ -0,0 +1,12 @@
+@mixin visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
+}

package/dist/scss/spacers/_rules.scss

@@ -0,0 +1,65 @@
+@import 'variables';
+
+@each $level, $value in $margin-levels {
+  .m-#{$level} {
+    margin: $value !important;
+  }
+  .mt-#{$level} {
+    margin-top: $value !important;
+  }
+  .mr-#{$level} {
+    margin-right: $value !important;
+  }
+  .mb-#{$level} {
+    margin-bottom: $value !important;
+  }
+  .ml-#{$level} {
+    margin-left: $value !important;
+  }
+  .mx-#{$level} {
+    margin-right: $value !important;
+    margin-left: $value !important;
+  }
+  .my-#{$level} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
+.m-auto {
+  margin: auto !important;
+}
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+@each $level, $value in $padding-levels {
+  .p-#{$level} {
+    padding: $value !important;
+  }
+  .pt-#{$level} {
+    padding-top: $value !important;
+  }
+  .pr-#{$level} {
+    padding-right: $value !important;
+  }
+  .pb-#{$level} {
+    padding-bottom: $value !important;
+  }
+  .pl-#{$level} {
+    padding-left: $value !important;
+  }
+  .px-#{$level} {
+    padding-right: $value !important;
+    padding-left: $value !important;
+  }
+  .py-#{$level} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}