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

package/dist/scss/tokens/text/_text-align.scss

@@ -0,0 +1,36 @@
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-justify {
+  text-align: justify;
+}
+.text-start {
+  text-align: start;
+}
+.text-end {
+  text-align: end !important;
+}
+.\!text-left {
+  text-align: left !important;
+}
+.\!text-center {
+  text-align: center !important;
+}
+.\!text-right {
+  text-align: right !important;
+}
+.\!text-justify {
+  text-align: justify !important;
+}
+.\!text-start {
+  text-align: start !important;
+}
+.\!text-end {
+  text-align: end !important;
+}

package/dist/scss/tokens/text/_text-decoration.scss

@@ -0,0 +1,24 @@
+.underline {
+  text-decoration-line: underline;
+}
+.overline {
+  text-decoration-line: overline;
+}
+.line-through {
+  text-decoration-line: line-through;
+}
+.no-underline {
+  text-decoration-line: none;
+}
+.\!underline {
+  text-decoration-line: underline !important;
+}
+.\!overline {
+  text-decoration-line: overline !important;
+}
+.\!line-through {
+  text-decoration-line: line-through !important;
+}
+.\!no-underline {
+  text-decoration-line: none !important;
+}

package/dist/scss/tokens/text/_text-stroke.scss

@@ -0,0 +1,74 @@
+@use 'mixins/text-stroke' as *;
+
+.text-stroke-black {
+  @include text-stroke(1px, #000);
+}
+.text-stroke-black-2 {
+  @include text-stroke(2px, #000);
+}
+.text-stroke-black-3 {
+  @include text-stroke(3px, #000);
+}
+.text-stroke-black-4 {
+  @include text-stroke(4px, #000);
+}
+.text-stroke-black-6 {
+  @include text-stroke(6px, #000);
+}
+.text-stroke-black-8 {
+  @include text-stroke(8px, #000);
+}
+.\!text-stroke-black {
+  @include text-stroke(1px, #000);
+}
+.\!text-stroke-black-2 {
+  @include \!text-stroke(2px, #000);
+}
+.\!text-stroke-black-3 {
+  @include \!text-stroke(3px, #000);
+}
+.\!text-stroke-black-4 {
+  @include \!text-stroke(4px, #000);
+}
+.\!text-stroke-black-6 {
+  @include \!text-stroke(6px, #000);
+}
+.\!text-stroke-black-8 {
+  @include \!text-stroke(8px, #000);
+}
+.text-stroke-white {
+  @include text-stroke(1px, #fff);
+}
+.text-stroke-white-2 {
+  @include text-stroke(2px, #fff);
+}
+.text-stroke-white-3 {
+  @include text-stroke(3px, #fff);
+}
+.text-stroke-white-4 {
+  @include text-stroke(4px, #fff);
+}
+.text-stroke-white-6 {
+  @include text-stroke(6px, #fff);
+}
+.text-stroke-white-8 {
+  @include text-stroke(8px, #fff);
+}
+.\!text-stroke-white {
+  @include text-stroke(1px, #fff);
+}
+.\!text-stroke-white-2 {
+  @include \!text-stroke(2px, #fff);
+}
+.\!text-stroke-white-3 {
+  @include \!text-stroke(3px, #fff);
+}
+.\!text-stroke-white-4 {
+  @include \!text-stroke(4px, #fff);
+}
+.\!text-stroke-white-6 {
+  @include \!text-stroke(6px, #fff);
+}
+.\!text-stroke-white-8 {
+  @include \!text-stroke(8px, #fff);
+}

package/dist/scss/{typography/_transform.scss → tokens/text/_text-transform.scss}

@@ -1,7 +1,12 @@
 .uppercase {
-  text-transform: uppercase !important;
+  text-transform: uppercase;
 }
-
 .lowercase {
+  text-transform: lowercase;
+}
+.\!uppercase {
+  text-transform: uppercase !important;
+}
+.\!lowercase {
   text-transform: lowercase !important;
 }

package/dist/scss/tokens/text/_vertical-align.scss

@@ -0,0 +1,48 @@
+.align-baseline {
+  vertical-align: baseline;
+}
+.align-top {
+  vertical-align: top;
+}
+.align-middle {
+  vertical-align: middle;
+}
+.align-bottom {
+  vertical-align: bottom;
+}
+.align-text-top {
+  vertical-align: text-top;
+}
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+.align-sub {
+  vertical-align: sub;
+}
+.align-super {
+  vertical-align: super;
+}
+.\!align-baseline {
+  vertical-align: baseline !important;
+}
+.\!align-top {
+  vertical-align: top !important;
+}
+.\!align-middle {
+  vertical-align: middle !important;
+}
+.\!align-bottom {
+  vertical-align: bottom !important;
+}
+.\!align-text-top {
+  vertical-align: text-top !important;
+}
+.\!align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.\!align-sub {
+  vertical-align: sub !important;
+}
+.\!align-super {
+  vertical-align: super !important;
+}

package/dist/scss/tokens/text/_white-space.scss

@@ -0,0 +1,12 @@
+.whitespace-normal {
+  white-space: normal;
+}
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+.\!whitespace-normal {
+  white-space: normal !important;
+}
+.\!whitespace-nowrap {
+  white-space: nowrap !important;
+}

package/dist/scss/tokens/text/_word-break.scss

@@ -0,0 +1,14 @@
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.break-words {
+  overflow-wrap: break-word;
+}
+.\!break-normal {
+  overflow-wrap: normal !important;
+  word-break: normal !important;
+}
+.\!break-words {
+  overflow-wrap: break-word !important;
+}

package/dist/scss/tokens/text/mixins/_color.scss

@@ -0,0 +1,18 @@
+@mixin text-primary {
+  color: var(--theme-colour-text-primary);
+}
+@mixin text-secondary {
+  color: var(--theme-colour-text-secondary);
+}
+@mixin text-accent {
+  color: var(--theme-colour-accent);
+}
+@mixin \!text-primary {
+  color: var(--theme-colour-text-primary) !important;
+}
+@mixin \!text-secondary {
+  color: var(--theme-colour-text-secondary) !important;
+}
+@mixin \!text-accent {
+  color: var(--theme-colour-accent) !important;
+}

package/dist/scss/tokens/text/mixins/_font-family.scss

@@ -0,0 +1,66 @@
+@mixin font-serif {
+  font-family: var(--theme-font-family-serif);
+}
+@mixin font-sans {
+  font-family: var(--theme-font-family-sans-serif);
+}
+@mixin font-mono {
+  font-family: var(--theme-font-family-monospace);
+}
+@mixin font-hed {
+  font-family: var(--theme-font-family-hed);
+}
+@mixin font-subhed {
+  font-family: var(--theme-font-family-subhed);
+}
+@mixin font-body {
+  font-family: var(--theme-font-family-body);
+}
+@mixin font-note {
+  font-family: var(--theme-font-family-note);
+}
+@mixin font-source-sans-pro {
+  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+}
+@mixin font-knowledge {
+  font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif;
+}
+@mixin font-freight-text {
+  font-family: 'FreightText', serif;
+}
+@mixin font-noto-sans-jp {
+  font-family: 'Noto Sans JP';
+}
+@mixin \!font-serif {
+  font-family: var(--theme-font-family-serif) !important;
+}
+@mixin \!font-sans {
+  font-family: var(--theme-font-family-sans-serif) !important;
+}
+@mixin \!font-mono {
+  font-family: var(--theme-font-family-monospace) !important;
+}
+@mixin \!font-hed {
+  font-family: var(--theme-font-family-hed) !important;
+}
+@mixin \!font-subhed {
+  font-family: var(--theme-font-family-subhed) !important;
+}
+@mixin \!font-body {
+  font-family: var(--theme-font-family-body) !important;
+}
+@mixin \!font-note {
+  font-family: var(--theme-font-family-note) !important;
+}
+@mixin \!font-source-sans-pro {
+  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+}
+@mixin \!font-knowledge {
+  font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+}
+@mixin \!font-freight-text {
+  font-family: 'FreightText', serif !important;
+}
+@mixin \!font-noto-sans-jp {
+  font-family: 'Noto Sans JP' !important;
+}

package/dist/scss/tokens/text/mixins/_font-size.scss

@@ -0,0 +1,66 @@
+@mixin text-xxs {
+  font-size: var(--theme-font-size-xxs);
+}
+@mixin text-xs {
+  font-size: var(--theme-font-size-xs);
+}
+@mixin text-sm {
+  font-size: var(--theme-font-size-sm);
+}
+@mixin text-base {
+  font-size: var(--theme-font-size-base);
+}
+@mixin text-lg {
+  font-size: var(--theme-font-size-lg);
+}
+@mixin text-xl {
+  font-size: var(--theme-font-size-xl);
+}
+@mixin text-2xl {
+  font-size: var(--theme-font-size-2xl);
+}
+@mixin text-3xl {
+  font-size: var(--theme-font-size-3xl);
+}
+@mixin text-4xl {
+  font-size: var(--theme-font-size-4xl);
+}
+@mixin text-5xl {
+  font-size: var(--theme-font-size-5xl);
+}
+@mixin text-6xl {
+  font-size: var(--theme-font-size-6xl);
+}
+@mixin \!text-xxs {
+  font-size: var(--theme-font-size-xxs) !important;
+}
+@mixin \!text-xs {
+  font-size: var(--theme-font-size-xs) !important;
+}
+@mixin \!text-sm {
+  font-size: var(--theme-font-size-sm) !important;
+}
+@mixin \!text-base {
+  font-size: var(--theme-font-size-base) !important;
+}
+@mixin \!text-lg {
+  font-size: var(--theme-font-size-lg) !important;
+}
+@mixin \!text-xl {
+  font-size: var(--theme-font-size-xl) !important;
+}
+@mixin \!text-2xl {
+  font-size: var(--theme-font-size-2xl) !important;
+}
+@mixin \!text-3xl {
+  font-size: var(--theme-font-size-3xl) !important;
+}
+@mixin \!text-4xl {
+  font-size: var(--theme-font-size-4xl) !important;
+}
+@mixin \!text-5xl {
+  font-size: var(--theme-font-size-5xl) !important;
+}
+@mixin \!text-6xl {
+  font-size: var(--theme-font-size-6xl) !important;
+}

package/dist/scss/tokens/text/mixins/_font-weight.scss

@@ -0,0 +1,54 @@
+@mixin font-thin {
+  font-weight: 100;
+}
+@mixin font-extralight {
+  font-weight: 200;
+}
+@mixin font-light {
+  font-weight: 300;
+}
+@mixin font-normal {
+  font-weight: 400;
+}
+@mixin font-medium {
+  font-weight: 500;
+}
+@mixin font-semibold {
+  font-weight: 600;
+}
+@mixin font-bold {
+  font-weight: 700;
+}
+@mixin font-extrabold {
+  font-weight: 800;
+}
+@mixin font-black {
+  font-weight: 900;
+}
+@mixin \!font-thin {
+  font-weight: 100 !important;
+}
+@mixin \!font-extralight {
+  font-weight: 200 !important;
+}
+@mixin \!font-light {
+  font-weight: 300 !important;
+}
+@mixin \!font-normal {
+  font-weight: 400 !important;
+}
+@mixin \!font-medium {
+  font-weight: 500 !important;
+}
+@mixin \!font-semibold {
+  font-weight: 600 !important;
+}
+@mixin \!font-bold {
+  font-weight: 700 !important;
+}
+@mixin \!font-extrabold {
+  font-weight: 800 !important;
+}
+@mixin \!font-black {
+  font-weight: 900 !important;
+}

package/dist/scss/tokens/text/mixins/_letter-spacing.scss

@@ -0,0 +1,36 @@
+@mixin tracking-tighter {
+  letter-spacing: -0.05em;
+}
+@mixin tracking-tight {
+  letter-spacing: -0.025em;
+}
+@mixin tracking-normal {
+  letter-spacing: 0em;
+}
+@mixin tracking-wide {
+  letter-spacing: 0.025em;
+}
+@mixin tracking-wider {
+  letter-spacing: 0.05em;
+}
+@mixin tracking-widest {
+  letter-spacing: 0.1em;
+}
+@mixin \!tracking-tighter {
+  letter-spacing: -0.05em !important;
+}
+@mixin \!tracking-tight {
+  letter-spacing: -0.025em !important;
+}
+@mixin \!tracking-normal {
+  letter-spacing: 0em !important;
+}
+@mixin \!tracking-wide {
+  letter-spacing: 0.025em !important;
+}
+@mixin \!tracking-wider {
+  letter-spacing: 0.05em !important;
+}
+@mixin \!tracking-widest {
+  letter-spacing: 0.1em !important;
+}

package/dist/scss/tokens/text/mixins/_line-height.scss

@@ -0,0 +1,36 @@
+@mixin leading-none {
+  line-height: 1;
+}
+@mixin leading-tighter {
+  line-height: 1.125;
+}
+@mixin leading-tight {
+  line-height: 1.25;
+}
+@mixin leading-normal {
+  line-height: 1.5;
+}
+@mixin leading-loose {
+  line-height: 1.75;
+}
+@mixin leading-looser {
+  line-height: 1.875;
+}
+@mixin \!leading-none {
+  line-height: 1 !important;
+}
+@mixin \!leading-tighter {
+  line-height: 1.125 !important;
+}
+@mixin \!leading-tight {
+  line-height: 1.25 !important;
+}
+@mixin \!leading-normal {
+  line-height: 1.5 !important;
+}
+@mixin \!leading-loose {
+  line-height: 1.75 !important;
+}
+@mixin \!leading-looser {
+  line-height: 1.875 !important;
+}

package/dist/scss/tokens/text/mixins/_main.scss

@@ -0,0 +1,7 @@
+@forward 'color';
+@forward 'font-family';
+@forward 'font-size';
+@forward 'font-weight';
+@forward 'letter-spacing';
+@forward 'line-height';
+@forward 'text-stroke';

package/dist/scss/tokens/text/mixins/_text-stroke.scss

@@ -0,0 +1,8 @@
+@mixin text-stroke($size: 1px, $colour: #ffffff) {
+  -webkit-text-stroke: $size $colour;
+  text-stroke: $size $colour;
+}
+@mixin \!text-stroke($size: 1px, $colour: #ffffff) {
+  -webkit-text-stroke: $size $colour !important;
+  text-stroke: $size $colour !important;
+}

package/dist/scss/tokens/variables/_main.scss

@@ -0,0 +1 @@
+@forward 'theme';

package/dist/scss/tokens/variables/_theme.scss

@@ -0,0 +1,8 @@
+// SCSS mirrors for theme CSS variables
+$theme-colour-background: var(--theme-colour-background);
+$theme-colour-text-primary: var(--theme-colour-text-primary);
+$theme-colour-text-secondary: var(--theme-colour-text-secondary);
+$theme-colour-accent: var(--theme-colour-accent);
+$theme-colour-brand-logo: var(--theme-colour-brand-logo);
+$theme-colour-brand-rules: var(--theme-colour-brand-rules);
+$theme-colour-brand-shadow: var(--theme-colour-brand-shadow);