@reuters-graphics/graphics-components 0.1.6 → 0.1.7--canary.99.331bdb0.0

package/dist/scss/mixins/_graphic.scss

@@ -1,66 +0,0 @@
-@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

@@ -1,34 +0,0 @@
-@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/spacers/_rules.scss

@@ -1,65 +0,0 @@
-@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;
-  }
-}

package/dist/scss/spacers/_variables.scss

@@ -1,19 +0,0 @@
-$margin-levels: (
-  '0': 0,
-  '1': 1rem,
-  '2': 2rem,
-  '3': 3rem,
-  '4': 4rem,
-  '5': 5rem,
-  '6': 6rem,
-) !default;
-
-$padding-levels: (
-  '0': 0,
-  '1': 0.5rem,
-  '2': 1rem,
-  '3': 1.75rem,
-  '4': 2.25rem,
-  '5': 3rem,
-  '6': 4rem,
-) !default;

package/dist/scss/typography/_box-shadow.scss

@@ -1,11 +0,0 @@
-.box-shadow-low {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important;
-}
-
-.box-shadow {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important;
-}
-
-.box-shadow-high {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important;
-}

package/dist/scss/typography/_font-size.scss

@@ -1,81 +0,0 @@
-.paragraph-size {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-
-  // slightly smaller in sans...
-  &.font-sans {
-    font-size: 1.1rem;
-    line-height: 1.75rem;
-  }
-
-  @media(max-width: 540px) {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-
-    // slightly smaller in sans...
-    &.font-sans {
-      font-size: 1rem;
-      line-height: 1.6rem;
-    }
-  }
-
-  &.important {
-    font-size: 1.3rem !important;
-    line-height: 2.1rem !important;
-
-    &.font-sans {
-      font-size: 1.1rem !important;
-      line-height: 1.8rem !important;
-    }
-
-    @media(max-width: 540px) {
-      font-size: 1.1rem !important;
-      line-height: 1.8rem !important;
-
-      &.font-sans {
-        font-size: 1rem !important;
-        line-height: 1.6rem !important;
-      }
-    }
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-
-  @media(max-width: 540px) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-
-  &.important {
-    font-size: 0.9rem !important;
-    line-height: 1.2rem !important;
-
-    @media(max-width: 540px) {
-      font-size: 0.8rem !important;
-      line-height: 1.1rem !important;
-    }
-  }
-}
-
-.blockquote-size {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-
-  @media(max-width: 540px) {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-
-  &.important {
-    font-size: 1.6rem !important;
-    line-height: 2rem !important;
-
-    @media(max-width: 540px) {
-      font-size: 1.3rem !important;
-      line-height: 1.8rem !important;
-    }
-  }
-}

package/dist/scss/typography/_letter-spacing.scss

@@ -1,15 +0,0 @@
-.spaced-least {
-  letter-spacing: 0.1rem !important;
-}
-.spaced-less {
-  letter-spacing: 0.25rem !important;
-}
-.spaced {
-  letter-spacing: 0.5rem !important;
-}
-.spaced-more {
-  letter-spacing: 0.75rem !important;
-}
-.spaced-most {
-  letter-spacing: 1rem !important;
-}

package/dist/scss/typography/_main.scss

@@ -1,5 +0,0 @@
-@import 'box-shadow';
-@import 'font-size';
-@import 'letter-spacing';
-@import 'text-shadow';
-@import 'transform';

package/dist/scss/typography/_mixins.scss

@@ -1,26 +0,0 @@
-@import "variables";
-
-// Font sizes
-@mixin font-size-xs { font-size: $font-size-xs; }
-
-@mixin font-size-sm { font-size: $font-size-sm; }
-
-@mixin font-size-base { font-size: $font-size-base; }
-
-@mixin font-size-article { font-size: $font-size-article; }
-
-@mixin font-size-lg { font-size: $font-size-lg; }
-
-@mixin font-size-xl { font-size: $font-size-xl; }
-
-@mixin font-size-2xl { font-size: $font-size-2xl; }
-
-@mixin font-size-3xl { font-size: $font-size-3xl; }
-
-
-// Font weights
-@mixin font-weight-light { font-weight: $font-weight-light; }
-
-@mixin font-weight-normal { font-weight: $font-weight-normal; }
-
-@mixin font-weight-bold { font-weight: $font-weight-bold; }

package/dist/scss/typography/_rules.scss

@@ -1,83 +0,0 @@
-@use "sass:math";
-@import "variables";
-@import "mixins";
-@import "../mixins";
-
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include font-display;
-
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
-}
-
-h1 {
-  font-size: $h1-font-size;
-  margin-bottom: math.div($h1-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h1-font-size;
-  }
-}
-
-h2 {
-  font-size: $h2-font-size;
-  margin-bottom: math.div($h2-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h2-font-size;
-  }
-}
-
-h3 {
-  font-size: $h3-font-size;
-  margin-bottom: math.div($h3-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h3-font-size;
-  }
-}
-
-h4 {
-  font-size: $h4-font-size;
-  margin-bottom: math.div($h4-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h4-font-size;
-  }
-}
-
-h5 {
-  font-size: $h5-font-size;
-  margin-bottom: math.div($h5-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h5-font-size;
-  }
-}
-
-h6 {
-  font-size: $h6-font-size;
-  margin-bottom: math.div($h6-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h6-font-size;
-  }
-}
-
-p {
-  @include font-serif;
-
-  font-size: $font-size-article;
-  margin-bottom: $font-size-article;
-}
-
-small {
-  font-size: $font-size-sm;
-}

package/dist/scss/typography/_text-shadow.scss

@@ -1,13 +0,0 @@
-@import '../colours/thematic/tr';
-
-.text-shadow {
-  text-shadow: 2px 2px 4px $tr-light-grey !important;
-}
-
-.text-shadow-darker {
-  text-shadow: 2px 2px 4px $tr-medium-grey !important;
-}
-
-.text-shadow-darkest {
-  text-shadow: 2px 2px 4px $tr-dark-grey !important;
-}

package/dist/scss/typography/_variables.scss

@@ -1,39 +0,0 @@
-@import '../fonts/variables';
-@import '../colours/thematic/tr';
-
-// Font sizes
-$font-size-xs: 0.8rem !default;
-$font-size-sm: 0.875rem !default;
-$font-size-base: 1rem !default;
-$font-size-article: 1.2rem !default;
-$font-size-lg: 1.3rem !default;
-$font-size-xl: 1.5rem !default;
-$font-size-2xl: 2.4rem !default;
-$font-size-3xl: 2.8rem !default;
-
-$lead-font-size: ($font-size-base * 1.25) !default;
-$small-font-size: 80% !default;
-$blockquote-font-size: ($font-size-base * 1.5) !default;
-
-$line-height-base: 1.5 !default;
-
-$text-muted: $tr-medium-grey;
-
-$blockquote-small-color: $tr-medium-grey;
-
-$blockquote-border-color: $tr-dark-grey !default;
-$blockquote-border-width: 0.25rem !default;
-
-$hr-border-color: rgba($black, 0.1) !default;
-
-// Headings
-$headings-font-family: $font-family-display;
-$headings-font-weight: 700 !default;
-$headings-color: $tr-dark-grey;
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;