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

package/dist/scss/reset/_typography.scss

@@ -0,0 +1,138 @@
+@use '../mixins' as *;
+
+body {
+  font-size: 1rem;
+  @include font-sans;
+  @include font-normal;
+  @include leading-normal;
+  // Font-smoothing
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/////////////
+// HEADINGS
+/////////////
+
+h1,
+h2,
+h3,
+h5,
+h6 {
+  @include text-primary;
+}
+h1 {
+  @include font-hed;
+  @include text-3xl;
+  @include leading-none;
+  margin-block-start: calc(var(--theme-font-size-base) * 1.5);
+  margin-block-end: calc(var(--theme-font-size-base) * 0.75);
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include font-subhed;
+  @include leading-tighter;
+  margin-block-start: calc(var(--theme-font-size-base) * 1.5);
+}
+h2 {
+  @include text-xl;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.75);
+}
+h3 {
+  @include text-lg;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.625);
+}
+h4 {
+  @include text-base;
+  @include text-secondary;
+  @include tracking-wider;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.5);
+}
+h5 {
+  @include text-sm;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+h6 {
+  @include text-sm;
+  @include font-normal;
+  text-transform: uppercase;
+  margin-block-end: calc(var(--theme-font-size-base) * 0.375);
+}
+
+//////////////
+// Body text
+//////////////
+
+%body-type-block {
+  display: block;
+  margin-block-start: 0px;
+  margin-block-end: calc(var(--theme-font-size-base) * 1.125);
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  @include font-body;
+  @include text-base;
+  @include font-normal;
+  @include leading-normal;
+  @include text-primary;
+}
+
+p {
+  @extend %body-type-block;
+}
+
+ol,
+ul {
+  @extend %body-type-block;
+  padding-left: 2rem;
+  ol,
+  ul {
+    margin-block-end: 0;
+  }
+}
+
+a {
+  color: currentColor;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-underline-offset: 8%;
+  text-decoration-thickness: from-font;
+}
+
+strong {
+  @include font-bold;
+}
+
+figcaption {
+  @include text-sm;
+  @include font-normal;
+  @include leading-normal;
+  @include text-secondary;
+  @include font-note;
+}
+
+blockquote {
+  margin-inline: 0;
+  padding-left: 1rem;
+  border-left: 1px solid $theme-colour-brand-rules;
+  @extend %fmy-6;
+  p {
+    @include font-body;
+    @include text-lg;
+    &:last-of-type {
+      @extend %fmb-2;
+    }
+  }
+  blockquote {
+    margin-block: 0;
+    border: 0;
+    padding-left: 0;
+    p {
+      @include text-sm;
+      @include font-note;
+    }
+  }
+}

package/dist/scss/token-classes.scss

@@ -0,0 +1,8 @@
+@use 'tokens/accessibility/main' as *;
+@use 'tokens/backgrounds/main' as *;
+@use 'tokens/borders/main' as *;
+@use 'tokens/interactivity/main' as *;
+@use 'tokens/layout/main' as *;
+@use 'tokens/sizing/main' as *;
+@use 'tokens/spacers/main' as *;
+@use 'tokens/text/main' as *;

package/dist/scss/tokens/accessibility/_main.scss

@@ -0,0 +1 @@
+@use 'visibility';

package/dist/scss/tokens/accessibility/_visibility.scss

@@ -0,0 +1,5 @@
+@use 'mixins/visibility' as *;
+
+.visually-hidden {
+  @include visually-hidden;
+}

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

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

package/dist/scss/{mixins/_visually-hidden.scss → tokens/accessibility/mixins/_visibility.scss}

@@ -3,10 +3,9 @@
   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/tokens/backgrounds/_background-color.scss

@@ -0,0 +1,26 @@
+@use 'mixins/background-color' as *;
+
+.bg {
+  @include bg;
+}
+.bg-inherit {
+  @include bg-inherit;
+}
+.bg-current {
+  @include bg-current;
+}
+.bg-transparent {
+  @include bg-transparent;
+}
+.\!bg {
+  @include \!bg;
+}
+.\!bg-inherit {
+  @include \!bg-inherit;
+}
+.\!bg-current {
+  @include \!bg-current;
+}
+.\!bg-transparent {
+  @include \!bg-transparent;
+}

package/dist/scss/tokens/backgrounds/_main.scss

@@ -0,0 +1 @@
+@forward 'background-color';

package/dist/scss/tokens/backgrounds/mixins/_background-color.scss

@@ -0,0 +1,24 @@
+@mixin bg {
+  background-color: var(--theme-colour-background);
+}
+@mixin bg-inherit {
+  background-color: inherit;
+}
+@mixin bg-current {
+  background-color: currentColor;
+}
+@mixin bg-transparent {
+  background-color: transparent;
+}
+@mixin \!bg {
+  background-color: var(--theme-colour-background) !important;
+}
+@mixin \!bg-inherit {
+  background-color: inherit !important;
+}
+@mixin \!bg-current {
+  background-color: currentColor !important;
+}
+@mixin \!bg-transparent {
+  background-color: transparent !important;
+}

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

@@ -0,0 +1 @@
+@forward 'background-color';

package/dist/scss/tokens/borders/_border-color.scss

@@ -0,0 +1,15 @@
+.border-inherit {
+  border-color: inherit;
+}
+.border-current {
+  border-color: currentColor;
+}
+.border-transparent {
+  border-color: transparent;
+}
+.border-black {
+  border-color: #000;
+}
+.border-white {
+  border-color: #fff;
+}

package/dist/scss/tokens/borders/_border-radius.scss

@@ -0,0 +1,279 @@
+.rounded-none {
+  border-radius: 0px;
+}
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+.rounded-2xl {
+  border-radius: 1rem;
+}
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.rounded-t-sm {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
+}
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.rounded-t-3xl {
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+}
+.rounded-t-full {
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+}
+.rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.rounded-r-sm {
+  border-top-right-radius: 0.125rem;
+  border-bottom-right-radius: 0.125rem;
+}
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+.rounded-r-xl {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+.rounded-r-2xl {
+  border-top-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+.rounded-r-3xl {
+  border-top-right-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-b-sm {
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+.rounded-b-xl {
+  border-bottom-right-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+.rounded-b-2xl {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+.rounded-b-full {
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-l-sm {
+  border-top-left-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-l-md {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+.rounded-l-xl {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+.rounded-l-2xl {
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+.rounded-l-3xl {
+  border-top-left-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+.rounded-tl-none {
+  border-top-left-radius: 0px;
+}
+.rounded-tl-sm {
+  border-top-left-radius: 0.125rem;
+}
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+.rounded-tl-md {
+  border-top-left-radius: 0.375rem;
+}
+.rounded-tl-lg {
+  border-top-left-radius: 0.5rem;
+}
+.rounded-tl-xl {
+  border-top-left-radius: 0.75rem;
+}
+.rounded-tl-2xl {
+  border-top-left-radius: 1rem;
+}
+.rounded-tl-3xl {
+  border-top-left-radius: 1.5rem;
+}
+.rounded-tl-full {
+  border-top-left-radius: 9999px;
+}
+.rounded-tr-none {
+  border-top-right-radius: 0px;
+}
+.rounded-tr-sm {
+  border-top-right-radius: 0.125rem;
+}
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
+.rounded-tr-md {
+  border-top-right-radius: 0.375rem;
+}
+.rounded-tr-lg {
+  border-top-right-radius: 0.5rem;
+}
+.rounded-tr-xl {
+  border-top-right-radius: 0.75rem;
+}
+.rounded-tr-2xl {
+  border-top-right-radius: 1rem;
+}
+.rounded-tr-3xl {
+  border-top-right-radius: 1.5rem;
+}
+.rounded-tr-full {
+  border-top-right-radius: 9999px;
+}
+.rounded-br-none {
+  border-bottom-right-radius: 0px;
+}
+.rounded-br-sm {
+  border-bottom-right-radius: 0.125rem;
+}
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+.rounded-br-md {
+  border-bottom-right-radius: 0.375rem;
+}
+.rounded-br-lg {
+  border-bottom-right-radius: 0.5rem;
+}
+.rounded-br-xl {
+  border-bottom-right-radius: 0.75rem;
+}
+.rounded-br-2xl {
+  border-bottom-right-radius: 1rem;
+}
+.rounded-br-3xl {
+  border-bottom-right-radius: 1.5rem;
+}
+.rounded-br-full {
+  border-bottom-right-radius: 9999px;
+}
+.rounded-bl-none {
+  border-bottom-left-radius: 0px;
+}
+.rounded-bl-sm {
+  border-bottom-left-radius: 0.125rem;
+}
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-bl-md {
+  border-bottom-left-radius: 0.375rem;
+}
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+.rounded-bl-xl {
+  border-bottom-left-radius: 0.75rem;
+}
+.rounded-bl-2xl {
+  border-bottom-left-radius: 1rem;
+}
+.rounded-bl-3xl {
+  border-bottom-left-radius: 1.5rem;
+}
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}

package/dist/scss/tokens/borders/_border-style.scss

@@ -0,0 +1,18 @@
+.border-solid {
+  border-style: solid;
+}
+.border-dashed {
+  border-style: dashed;
+}
+.border-dotted {
+  border-style: dotted;
+}
+.border-double {
+  border-style: double;
+}
+.border-hidden {
+  border-style: hidden;
+}
+.border-none {
+  border-style: none;
+}

package/dist/scss/tokens/borders/_border-width.scss

@@ -0,0 +1,115 @@
+.border-0 {
+  border-width: 0px;
+}
+.border-2 {
+  border-width: 2px;
+}
+.border-4 {
+  border-width: 4px;
+}
+.border-8 {
+  border-width: 8px;
+}
+.border {
+  border-width: 1px;
+}
+.border-x-0 {
+  border-left-width: 0px;
+  border-right-width: 0px;
+}
+.border-x-2 {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
+.border-x-4 {
+  border-left-width: 4px;
+  border-right-width: 4px;
+}
+.border-x-8 {
+  border-left-width: 8px;
+  border-right-width: 8px;
+}
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+.border-y-0 {
+  border-top-width: 0px;
+  border-bottom-width: 0px;
+}
+.border-y-2 {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
+.border-y-4 {
+  border-top-width: 4px;
+  border-bottom-width: 4px;
+}
+.border-y-8 {
+  border-top-width: 8px;
+  border-bottom-width: 8px;
+}
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+.border-t-0 {
+  border-top-width: 0px;
+}
+.border-t-2 {
+  border-top-width: 2px;
+}
+.border-t-4 {
+  border-top-width: 4px;
+}
+.border-t-8 {
+  border-top-width: 8px;
+}
+.border-t {
+  border-top-width: 1px;
+}
+.border-r-0 {
+  border-right-width: 0px;
+}
+.border-r-2 {
+  border-right-width: 2px;
+}
+.border-r-4 {
+  border-right-width: 4px;
+}
+.border-r-8 {
+  border-right-width: 8px;
+}
+.border-r {
+  border-right-width: 1px;
+}
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+.border-b-8 {
+  border-bottom-width: 8px;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-l-0 {
+  border-left-width: 0px;
+}
+.border-l-2 {
+  border-left-width: 2px;
+}
+.border-l-4 {
+  border-left-width: 4px;
+}
+.border-l-8 {
+  border-left-width: 8px;
+}
+.border-l {
+  border-left-width: 1px;
+}

package/dist/scss/tokens/borders/_main.scss

@@ -0,0 +1,3 @@
+@forward 'border-radius';
+@forward 'border-style';
+@forward 'border-width';