- Lorem - ipsum - dolor - sit -
- - -``` - ### `body-text` Mixin our default body text styles. diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 8abda6d5..6dfbd7e1 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -1,6 +1,6 @@ @import "mixins/block"; @import "mixins/body-text"; -@import "mixins/fonts"; +@import "fonts/mixins"; @import "mixins/graphic"; @import "mixins/note-text"; @import "mixins/visually-hidden"; diff --git a/src/scss/mixins/_fonts.scss b/src/scss/fonts/_mixins.scss similarity index 100% rename from src/scss/mixins/_fonts.scss rename to src/scss/fonts/_mixins.scss diff --git a/src/scss/fonts/_rules.scss b/src/scss/fonts/_rules.scss index 84906ab6..fc3088b2 100644 --- a/src/scss/fonts/_rules.scss +++ b/src/scss/fonts/_rules.scss @@ -1,17 +1,14 @@ -@import '../mixins'; +@import 'variables'; .font-sans { - @include font-sans(true); + font-family: var(--theme-font-family-sans-serif, $font-family-display) !important; } .font-serif { - @include font-serif(true); + font-family: var(--theme-font-family-serif, $font-family-serif) !important; } .font-monospace { - @include font-monospace(true); + font-family: var(--theme-font-family-monospace, $font-family-monospace) !important; } -.font-display { - @include font-display(true); -} diff --git a/src/scss/fonts/_variables.scss b/src/scss/fonts/_variables.scss index b1dc8657..91ad2fc3 100644 --- a/src/scss/fonts/_variables.scss +++ b/src/scss/fonts/_variables.scss @@ -1,9 +1,7 @@ -$font-family-serif: "freight-book", serif; -$font-family-base: $font-family-serif; +$font-family-serif: var(--theme-font-family-serif, "freight-book", serif); -$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-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: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +$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; -$font-family-knowledge: $font-family-display; // deprecate diff --git a/src/scss/mixins/_body-text.scss b/src/scss/mixins/_body-text.scss index e1c65052..533c2cf4 100644 --- a/src/scss/mixins/_body-text.scss +++ b/src/scss/mixins/_body-text.scss @@ -1,4 +1,4 @@ -@import './fonts'; +@import '../fonts/mixins'; @import '../fonts/variables'; @import '../typography/font-size'; @import '../colours/thematic/tr'; diff --git a/src/scss/mixins/_graphic.scss b/src/scss/mixins/_graphic.scss index 6a935761..ebea599b 100644 --- a/src/scss/mixins/_graphic.scss +++ b/src/scss/mixins/_graphic.scss @@ -1,5 +1,5 @@ @import '../colours/thematic/tr'; -@import './fonts'; +@import '../fonts/mixins'; @mixin graphic-text { h3 { diff --git a/src/scss/typography/_background-color.scss b/src/scss/typography/_background-color.scss deleted file mode 100644 index 655be87c..00000000 --- a/src/scss/typography/_background-color.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import "~@reuters-graphics/style-color/scss/thematic/brand"; - -$white-background: $brand-background !default; -$black-background: $brand-inverted-background !default; - -.background, -.background-light { - background-color: $white-background; - - &.important { - background-color: $white-background !important; - } -} - -.background-dark { - background-color: $black-background; - - &.important { - background-color: $black-background !important; - } -} - - -.background-alpha, -.background-alpha-light { - background-color: rgba($white-background, 0.75); - - &.important { - background-color: rgba($white-background, 0.75) !important; - } -} - -.background-alpha-lighter { - background-color: rgba($white-background, 0.5); - - &.important { - background-color: rgba($white-background, 0.5) !important; - } -} - -.background-alpha-lightest { - background-color: rgba($white-background, 0.25); - - &.important { - background-color: rgba($white-background, 0.25) !important; - } -} - -.background-alpha-dark { - background-color: rgba($black-background, 0.3); - - &.important { - background-color: rgba($black-background, 0.3) !important; - } -} - -.background-alpha-darker { - background-color: rgba($black-background, 0.6); - - &.important { - background-color: rgba($black-background, 0.6) !important; - } -} - -.background-alpha-darkest { - background-color: rgba($black-background, 0.9); - - &.important { - background-color: rgba($black-background, 0.9) !important; - } -} diff --git a/src/scss/typography/_box-shadow.scss b/src/scss/typography/_box-shadow.scss index 9b87c6e3..91d8437f 100644 --- a/src/scss/typography/_box-shadow.scss +++ b/src/scss/typography/_box-shadow.scss @@ -1,26 +1,12 @@ - - .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: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important; - } + 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: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important; - } + 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 { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important; - } + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important; } diff --git a/src/scss/typography/_color.scss b/src/scss/typography/_color.scss deleted file mode 100644 index 58eb870a..00000000 --- a/src/scss/typography/_color.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import "~@reuters-graphics/style-color/scss/categorical/base"; - -.color-black { - color: $black; - - &.important { - color: $black !important; - } -} - -.color-gray { - color: $gray; - - &.important { - color: $gray !important; - } -} - -.color-white { - color: $white; - - &.important { - color: $white !important; - } -} - -.color-yellow { - color: $yellow; - - &.important { - color: $yellow !important; - } -} - -.color-orange { - color: $orange; - - &.important { - color: $orange !important; - } -} - -.color-red { - color: $red; - - &.important { - color: $red !important; - } -} - -.color-green { - color: $green; - - &.important { - color: $green !important; - } -} - -.color-blue { - color: $blue; - - &.important { - color: $blue !important; - } -} - -.color-purple { - color: $purple; - - &.important { - color: $purple !important; - } -} diff --git a/src/scss/typography/_letter-spacing.scss b/src/scss/typography/_letter-spacing.scss index 6eccfe1d..2bec4a67 100644 --- a/src/scss/typography/_letter-spacing.scss +++ b/src/scss/typography/_letter-spacing.scss @@ -1,41 +1,15 @@ .spaced-least { - letter-spacing: 0.1rem; - - &.important { - letter-spacing: 0.1rem !important; - } + letter-spacing: 0.1rem !important; } - .spaced-less { - letter-spacing: 0.25rem; - - &.important { - letter-spacing: 0.25rem !important; - } + letter-spacing: 0.25rem !important; } - .spaced { - letter-spacing: 0.5rem; - - &.important { - letter-spacing: 0.5rem !important; - } + letter-spacing: 0.5rem !important; } - -.spaced-extra, .spaced-more { - letter-spacing: 0.75rem; - - &.important { - letter-spacing: 0.75rem !important; - } + letter-spacing: 0.75rem !important; } - -.spaced-super, .spaced-most { - letter-spacing: 1rem; - - &.important { - letter-spacing: 1rem !important; - } + letter-spacing: 1rem !important; } diff --git a/src/scss/typography/_main.scss b/src/scss/typography/_main.scss index 2404e9a1..24d5c0c0 100644 --- a/src/scss/typography/_main.scss +++ b/src/scss/typography/_main.scss @@ -1,8 +1,5 @@ -@import "background-color"; @import "box-shadow"; -@import "color"; @import "font-size"; @import "letter-spacing"; -@import "separator"; @import "text-shadow"; @import "transform"; diff --git a/src/scss/typography/_separator.scss b/src/scss/typography/_separator.scss deleted file mode 100644 index b8e352f9..00000000 --- a/src/scss/typography/_separator.scss +++ /dev/null @@ -1,206 +0,0 @@ -@import "~@reuters-graphics/style-color/scss/sequential/sesame"; - -.separator-rule { - display: block; - content: ''; - background: $gray-200; - height: 1px; - width: 50%; - margin: 35px auto; -} - -.separator-rule-darker { - @extend .separator-rule; - - background: $gray-300 !important; -} - -.separator-rule-darkest { - @extend .separator-rule; - - background: $gray-600 !important; -} - -.separator-rule-thicker { - @extend .separator-rule; - - height: 2px !important; - width: 40% !important; -} - -.separator-rule-thickest { - @extend .separator-rule; - - height: 4px !important; - width: 100px !important; -} - -.separated { - &::before { - @extend .separator-rule; - } - - &::after { - @extend .separator-rule; - } -} - -.separated-darker { - &::before { - @extend .separator-rule-darker; - } - - &::after { - @extend .separator-rule-darker; - } -} - -.separated-darkest { - &::before { - @extend .separator-rule-darkest; - } - - &::after { - @extend .separator-rule-darkest; - } -} - -.separated-over { - &::before { - @extend .separator-rule; - } -} - -.separated-over-darker { - &::before { - @extend .separator-rule-darker; - } -} - -.separated-over-darkest { - &::before { - @extend .separator-rule-darkest; - } -} - -.separated-under { - &::after { - @extend .separator-rule; - } -} - -.separated-under-darker { - &::after { - @extend .separator-rule-darker; - } -} - -.separated-under-darkest { - &::after { - @extend .separator-rule-darkest; - } -} - -.separated-thicker { - &::before { - @extend .separator-rule-thicker; - } - - &::after { - @extend .separator-rule-thicker; - } -} - -.separated-over-thicker { - &::before { - @extend .separator-rule-thicker; - } -} - -.separated-under-thicker { - &::after { - @extend .separator-rule-thicker; - } -} - -.separated-thickest { - &::before { - @extend .separator-rule-thickest; - } - - &::after { - @extend .separator-rule-thickest; - } -} - -.separated-over-thickest { - &::before { - @extend .separator-rule-thickest; - } -} - -.separated-under-thickest { - &::after { - @extend .separator-rule-thickest; - } -} - -.separated-darker-thicker { - @extend .separated-thicker; - @extend .separated-darker; -} - -.separated-darkest-thicker { - @extend .separated-thicker; - @extend .separated-darkest; -} - -.separated-darker-thickest { - @extend .separated-thickest; - @extend .separated-darker; -} - -.separated-darkest-thickest { - @extend .separated-thickest; - @extend .separated-darkest; -} - -.separated-over-darker-thicker { - @extend .separated-over-thicker; - @extend .separated-over-darker; -} - -.separated-over-darkest-thicker { - @extend .separated-over-thicker; - @extend .separated-over-darkest; -} - -.separated-over-darker-thickest { - @extend .separated-over-thickest; - @extend .separated-over-darker; -} - -.separated-over-darkest-thickest { - @extend .separated-over-thickest; - @extend .separated-over-darkest; -} - -.separated-under-darker-thicker { - @extend .separated-under-thicker; - @extend .separated-under-darker; -} - -.separated-under-darkest-thicker { - @extend .separated-under-thicker; - @extend .separated-under-darkest; -} - -.separated-under-darker-thickest { - @extend .separated-under-thickest; - @extend .separated-under-darker; -} - -.separated-under-darkest-thickest { - @extend .separated-under-thickest; - @extend .separated-under-darkest; -} diff --git a/src/scss/typography/_text-shadow.scss b/src/scss/typography/_text-shadow.scss index 22e5d910..efe9fc27 100644 --- a/src/scss/typography/_text-shadow.scss +++ b/src/scss/typography/_text-shadow.scss @@ -1,25 +1,25 @@ -@import "~@reuters-graphics/style-color/scss/sequential/sesame"; +@import "../colours/thematic/tr"; .text-shadow { - text-shadow: 2px 2px 4px $gray-300; + text-shadow: 2px 2px 4px $tr-light-grey; &.important { - text-shadow: 2px 2px 4px $gray-300 !important; + text-shadow: 2px 2px 4px $tr-light-grey !important; } } .text-shadow-darker { - text-shadow: 2px 2px 4px $gray-500; + text-shadow: 2px 2px 4px $tr-medium-grey; &.important { - text-shadow: 2px 2px 4px $gray-500 !important; + text-shadow: 2px 2px 4px $tr-medium-grey !important; } } .text-shadow-darkest { - text-shadow: 2px 2px 4px $gray-600; + text-shadow: 2px 2px 4px $tr-dark-grey; &.important { - text-shadow: 2px 2px 4px $gray-600 !important; + text-shadow: 2px 2px 4px $tr-dark-grey !important; } } diff --git a/src/scss/typography/_transform.scss b/src/scss/typography/_transform.scss index 9f5aaffb..3c3f4893 100644 --- a/src/scss/typography/_transform.scss +++ b/src/scss/typography/_transform.scss @@ -1,15 +1,7 @@ .uppercase { - text-transform: uppercase; - - &.important { - text-transform: uppercase !important; - } + text-transform: uppercase !important; } .lowercase { - text-transform: lowercase; - - &.important { - text-transform: lowercase !important; - } + text-transform: lowercase !important; } diff --git a/src/scss/typography/_variables.scss b/src/scss/typography/_variables.scss index fb93fce8..a63fc75c 100644 --- a/src/scss/typography/_variables.scss +++ b/src/scss/typography/_variables.scss @@ -1,5 +1,5 @@ @import "../fonts/variables"; -@import "@reuters-graphics/style-color/scss/sequential/sesame"; +@import "../colours/thematic/tr"; // Font sizes $font-size-xs: 0.8rem !default; @@ -17,11 +17,11 @@ $blockquote-font-size: ($font-size-base * 1.5) !default; $line-height-base: 1.5 !default; -$text-muted: $brand-text-secondary; +$text-muted: $tr-medium-grey; -$blockquote-small-color: $brand-text-secondary; +$blockquote-small-color: $tr-medium-grey;; -$blockquote-border-color: $gray-200 !default; +$blockquote-border-color: $tr-dark-grey !default; $blockquote-border-width: 0.25rem !default;