wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better scss token convention

Browse source
This commit is contained in:
Jon McClure 2023-07-24 22:25:39 +01:00
parent 4547d46ef1
commit d6240e2497
60 changed files with 221 additions and 1139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.storybook/preview.scss
View file

@ -1,5 +1,3 @@
@import "../src/scss/mixins";
table.docblock-argstable {
p {
font-family: inherit;
@ -39,16 +37,16 @@ div.sbdocs-content {
}
.sbdocs {
@include font-display;
font-family: 'Knowledge', sans-serif;
h1 {
@include font-display;
font-family: 'Knowledge', sans-serif;
}
p, ul, li {
font-size: 18px;
line-height: 29px;
@include font-display;
font-family: 'Knowledge', sans-serif;
.highlight {
background-color: rgb(254, 254, 160);
@ -60,7 +58,7 @@ div.sbdocs-content {
}
a {
@include font-display;
font-family: 'Knowledge', sans-serif;
color: #0071a1;
text-decoration: none;
text-underline-offset: 2px;

2
src/components/Headline/Headline.svelte
View file

@ -69,7 +69,7 @@
</Block>
<style lang="scss">
@use '../../scss/tokens';
@use '../../scss/extenders';
@import '../../scss/fonts/variables';
header.headline {

20
src/docs/styles/typography/main.stories.mdx
View file

@ -4,34 +4,34 @@ import CopyTable from '../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../utils/parseCss';
{/* @ts-ignore */}
import fontFamily from '$lib/scss/text/\_font-family.scss?inline';
import fontFamily from '$lib/scss/tokens/text/\_font-family.scss?inline';
{/* @ts-ignore */}
import fontStyle from '$lib/scss/text/\_font-style.scss?raw';
import fontStyle from '$lib/scss/tokens/text/\_font-style.scss?inline';
{/* @ts-ignore */}
import fontWeight from '$lib/scss/text/\_font-weight.scss?raw';
import fontWeight from '$lib/scss/tokens/text/\_font-weight.scss?inline';
{/* @ts-ignore */}
import letterSpacing from '$lib/scss/text/\_letter-spacing.scss?raw';
import letterSpacing from '$lib/scss/tokens/text/\_letter-spacing.scss?inline';
{/* @ts-ignore */}
import textAlign from '$lib/scss/text/\_text-align.scss?raw';
import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
{/* @ts-ignore */}
import textDecoration from '$lib/scss/text/\_text-decoration.scss?raw';
import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline';
{/* @ts-ignore */}
import textTransform from '$lib/scss/text/\_text-transform.scss?raw';
import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline';
{/* @ts-ignore */}
import verticalAlign from '$lib/scss/text/\_vertical-align.scss?raw';
import verticalAlign from '$lib/scss/tokens/text/\_vertical-align.scss?inline';
{/* @ts-ignore */}
import whiteSpace from '$lib/scss/text/\_white-space.scss?raw';
import whiteSpace from '$lib/scss/tokens/text/\_white-space.scss?inline';
{/* @ts-ignore */}
import wordBreak from '$lib/scss/text/\_word-break.scss?raw';
import wordBreak from '$lib/scss/tokens/text/\_word-break.scss?inline';
import './styles.scss';

3
src/docs/styles/typography/styles.scss
View file

@ -1,7 +1,4 @@
div.type-system-demo {
@import '../../../scss/typography/mixins';
@import '../../../scss/typography/rules';
*:first-child {
margin-top: 0;
}

6
src/scss/_mixins.scss
View file

@ -1,6 +0,0 @@
@import 'mixins/block';
@import 'mixins/body-text';
@import 'typography/mixins';
@import 'mixins/graphic';
@import 'mixins/note-text';
@import 'mixins/visually-hidden';

2
src/scss/_variables.scss
View file

@ -1,2 +0,0 @@
@import 'fonts/variables';
@import 'typography_old/variables';

118
src/scss/components/_hero-title.scss
View file

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

2
src/scss/extenders.scss Normal file
View file

@ -0,0 +1,2 @@
@use 'tokens/text/extenders/main' as text;
@use 'tokens/spacers/extenders/main' as spacers;

84
src/scss/fonts/_font-faces.scss
View file

@ -3,59 +3,52 @@
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');
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');
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');
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');
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');
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'),
src: local('Knowledge Bold'), local('KnowledgeBold'),
url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
}
@ -63,10 +56,9 @@
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');
src: local('Knowledge Bold Italic'), local('KnowledgeBoldItalic'),
url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff')
format('woff');
}
/* SOURCE SANS PRO */
@ -74,50 +66,45 @@
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');
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');
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');
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');
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');
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
format('woff');
}
/* FREIGHT BOOK */
@ -125,5 +112,6 @@
font-family: 'freight-book';
font-style: normal;
font-weight: normal;
src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff') format('woff');
src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
format('woff');
}

25
src/scss/fonts/_mixins.scss
View file

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

19
src/scss/fonts/_rules.scss
View file

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

26
src/scss/fonts/_variables.scss
View file

@ -1,26 +0,0 @@
$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;

5
src/scss/main.scss
View file

@ -9,10 +9,11 @@
// Reset
@use 'reset/main' as reset;
// Font-faces
@use 'fonts/font-faces' as font-faces;
// Style rules
@use 'accessibility/main' as accessibility;
@use 'borders/main' as borders;
@use 'colours/main' as colours;
@use 'layout/main' as layout;
@use 'spacers/main' as spacers;
@use 'text/main' as text;

117
src/scss/text/_font-faces.scss
View file

@ -1,117 +0,0 @@
/* 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');
}

3
src/scss/tokens.scss
View file

@ -1 +1,2 @@
@use 'text/tokens/main' as text;
@use 'tokens/text/main' as text;
@use 'tokens/spacers/main' as spacers;

0
src/scss/spacers/_main.scss → src/scss/tokens/spacers/_main.scss
View file

66
src/scss/tokens/spacers/_margin.scss Normal file
View file

@ -0,0 +1,66 @@
@use 'extenders/margin';
@each $level, $value in $margin-levels {
.m-#{$level} {
@extend %m-#{$level};
}
.mt-#{$level} {
@extend %mt-#{$level};
}
.mr-#{$level} {
@extend %mr-#{$level};
}
.mb-#{$level} {
@extend %mb-#{$level};
}
.ml-#{$level} {
@extend %ml-#{$level};
}
.mx-#{$level} {
@extend %mx-#{$level};
}
.my-#{$level} {
@extend %my-#{$level};
}
.\!m-#{$level} {
@extend %\!m-#{$level};
}
.\!mt-#{$level} {
@extend %\!mt-#{$level};
}
.\!mr-#{$level} {
@extend %\!mr-#{$level};
}
.\!mb-#{$level} {
@extend %\!mb-#{$level};
}
.\!ml-#{$level} {
@extend %\!ml-#{$level};
}
.\!mx-#{$level} {
@extend %\!mx-#{$level};
}
.\!my-#{$level} {
@extend %\!my-#{$level};
}
}
.m-auto {
@extend %m-auto;
}
.mx-auto {
@extend %mx-auto;
}
.my-auto {
@extend %my-auto;
}
.\!m-auto {
@extend %\!m-auto;
}
.\!mx-auto {
@extend %\!mx-auto;
}
.\!my-auto {
@extend %\!my-auto;
}

47
src/scss/tokens/spacers/_padding.scss Normal file
View file

@ -0,0 +1,47 @@
@use 'extenders/padding';
@each $level, $value in $padding-levels {
.p-#{$level} {
@extend %p-#{$level};
}
.pt-#{$level} {
@extend %pt-#{$level};
}
.pr-#{$level} {
@extend %pr-#{$level};
}
.pb-#{$level} {
@extend %pb-#{$level};
}
.pl-#{$level} {
@extend %pl-#{$level};
}
.px-#{$level} {
@extend %px-#{$level};
}
.py-#{$level} {
@extend %py-#{$level};
}
.\!p-#{$level} {
@extend %\!p-#{$level};
}
.\!pt-#{$level} {
@extend %\!pt-#{$level};
}
.\!pr-#{$level} {
@extend %\!pr-#{$level};
}
.\!pb-#{$level} {
@extend %\!pb-#{$level};
}
.\!pl-#{$level} {
@extend %\!pl-#{$level};
}
.\!px-#{$level} {
@extend %\!px-#{$level};
}
.\!py-#{$level} {
@extend %\!py-#{$level};
}
}

2
src/scss/tokens/spacers/extenders/_main.scss Normal file
View file

@ -0,0 +1,2 @@
@use 'margin';
@use 'padding';

42
src/scss/spacers/_margin.scss → src/scss/tokens/spacers/extenders/_margin.scss
View file

@ -8,77 +8,77 @@ $margin-levels: (
'6': 6rem,
'7': 7rem,
'8': 8rem,
) !default;
);
@each $level, $value in $margin-levels {
.m-#{$level} {
%m-#{$level} {
margin: $value;
}
.mt-#{$level} {
%mt-#{$level} {
margin-top: $value;
}
.mr-#{$level} {
%mr-#{$level} {
margin-right: $value;
}
.mb-#{$level} {
%mb-#{$level} {
margin-bottom: $value;
}
.ml-#{$level} {
%ml-#{$level} {
margin-left: $value;
}
.mx-#{$level} {
%mx-#{$level} {
margin-right: $value;
margin-left: $value;
}
.my-#{$level} {
%my-#{$level} {
margin-top: $value;
margin-bottom: $value;
}
.\!m-#{$level} {
%\!m-#{$level} {
margin: $value !important;
}
.\!mt-#{$level} {
%\!mt-#{$level} {
margin-top: $value !important;
}
.\!mr-#{$level} {
%\!mr-#{$level} {
margin-right: $value !important;
}
.\!mb-#{$level} {
%\!mb-#{$level} {
margin-bottom: $value !important;
}
.\!ml-#{$level} {
%\!ml-#{$level} {
margin-left: $value !important;
}
.\!mx-#{$level} {
%\!mx-#{$level} {
margin-right: $value !important;
margin-left: $value !important;
}
.\!my-#{$level} {
%\!my-#{$level} {
margin-top: $value !important;
margin-bottom: $value !important;
}
}
.m-auto {
%m-auto {
margin: auto;
}
.mx-auto {
%mx-auto {
margin-right: auto;
margin-left: auto;
}
.my-auto {
%my-auto {
margin-top: auto;
margin-bottom: auto;
}
.\!m-auto {
%\!m-auto {
margin: auto !important;
}
.\!mx-auto {
%\!mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.\!my-auto {
%\!my-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}

30
src/scss/spacers/_padding.scss → src/scss/tokens/spacers/extenders/_padding.scss
View file

@ -8,53 +8,53 @@ $padding-levels: (
'6': 4rem,
'7': 5rem,
'8': 6rem,
) !default;
);
@each $level, $value in $padding-levels {
.p-#{$level} {
%p-#{$level} {
padding: $value;
}
.pt-#{$level} {
%pt-#{$level} {
padding-top: $value;
}
.pr-#{$level} {
%pr-#{$level} {
padding-right: $value;
}
.pb-#{$level} {
%pb-#{$level} {
padding-bottom: $value;
}
.pl-#{$level} {
%pl-#{$level} {
padding-left: $value;
}
.px-#{$level} {
%px-#{$level} {
padding-right: $value;
padding-left: $value;
}
.py-#{$level} {
%py-#{$level} {
padding-top: $value;
padding-bottom: $value;
}
.\!p-#{$level} {
%\!p-#{$level} {
padding: $value !important;
}
.\!pt-#{$level} {
%\!pt-#{$level} {
padding-top: $value !important;
}
.\!pr-#{$level} {
%\!pr-#{$level} {
padding-right: $value !important;
}
.\!pb-#{$level} {
%\!pb-#{$level} {
padding-bottom: $value !important;
}
.\!pl-#{$level} {
%\!pl-#{$level} {
padding-left: $value !important;
}
.\!px-#{$level} {
%\!px-#{$level} {
padding-right: $value !important;
padding-left: $value !important;
}
.\!py-#{$level} {
%\!py-#{$level} {
padding-top: $value !important;
padding-bottom: $value !important;
}

2
src/scss/text/_font-family.scss → src/scss/tokens/text/_font-family.scss
View file

@ -1,4 +1,4 @@
@import 'tokens/font-family';
@import 'extenders/font-family';
.font-serif {
@extend %font-serif;

2
src/scss/text/_font-size.scss → src/scss/tokens/text/_font-size.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/font-size';
@use 'extenders/font-size';
.text-xxs {
@extend %text-xxs;

2
src/scss/text/_font-style.scss → src/scss/tokens/text/_font-style.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/font-style';
@use 'extenders/font-style';
.italic {
@extend %italic;

2
src/scss/text/_font-weight.scss → src/scss/tokens/text/_font-weight.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/font-weight';
@use 'extenders/font-weight';
.font-thin {
@extend %font-thin;

2
src/scss/text/_letter-spacing.scss → src/scss/tokens/text/_letter-spacing.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/letter-spacing';
@use 'extenders/letter-spacing';
.tracking-tighter {
@extend %tracking-tighter;

2
src/scss/text/_line-height.scss → src/scss/tokens/text/_line-height.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/line-height';
@use 'extenders/line-height';
.leading-none {
@extend %leading-none;

0
src/scss/text/tokens/_main.scss → src/scss/tokens/text/_main.scss
View file

2
src/scss/text/_text-align.scss → src/scss/tokens/text/_text-align.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/text-align';
@use 'extenders/text-align';
.text-left {
@extend %text-left;

2
src/scss/text/_text-decoration.scss → src/scss/tokens/text/_text-decoration.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/text-decoration';
@use 'extenders/text-decoration';
.underline {
@extend %underline;

2
src/scss/text/_text-transform.scss → src/scss/tokens/text/_text-transform.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/text-transform';
@use 'extenders/text-transform';
.uppercase {
@extend %uppercase;

2
src/scss/text/_vertical-align.scss → src/scss/tokens/text/_vertical-align.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/vertical-align';
@use 'extenders/vertical-align';
.align-baseline {
@extend %align-baseline;

2
src/scss/text/_white-space.scss → src/scss/tokens/text/_white-space.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/white-space';
@use 'extenders/white-space';
.whitespace-normal {
@extend %whitespace-normal;

2
src/scss/text/_word-break.scss → src/scss/tokens/text/_word-break.scss
View file

@ -1,4 +1,4 @@
@use 'tokens/word-break';
@use 'extenders/word-break';
.break-normal {
@extend %break-normal;

0
src/scss/text/tokens/_font-family.scss → src/scss/tokens/text/extenders/_font-family.scss
View file

0
src/scss/text/tokens/_font-size.scss → src/scss/tokens/text/extenders/_font-size.scss
View file

0
src/scss/text/tokens/_font-style.scss → src/scss/tokens/text/extenders/_font-style.scss
View file

0
src/scss/text/tokens/_font-weight.scss → src/scss/tokens/text/extenders/_font-weight.scss
View file

0
src/scss/text/tokens/_letter-spacing.scss → src/scss/tokens/text/extenders/_letter-spacing.scss
View file

0
src/scss/text/tokens/_line-height.scss → src/scss/tokens/text/extenders/_line-height.scss
View file

1
src/scss/text/_main.scss → src/scss/tokens/text/extenders/_main.scss
View file

@ -1,4 +1,3 @@
@use 'font-faces';
@use 'font-family';
@use 'font-size';
@use 'font-style';

0
src/scss/text/tokens/_text-align.scss → src/scss/tokens/text/extenders/_text-align.scss
View file

0
src/scss/text/tokens/_text-decoration.scss → src/scss/tokens/text/extenders/_text-decoration.scss
View file

0
src/scss/text/tokens/_text-transform.scss → src/scss/tokens/text/extenders/_text-transform.scss
View file

0
src/scss/text/tokens/_vertical-align.scss → src/scss/tokens/text/extenders/_vertical-align.scss
View file

0
src/scss/text/tokens/_white-space.scss → src/scss/tokens/text/extenders/_white-space.scss
View file

0
src/scss/text/tokens/_word-break.scss → src/scss/tokens/text/extenders/_word-break.scss
View file

117
src/scss/typography/_font-faces.scss
View file

@ -1,117 +0,0 @@
/* 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');
}

14
src/scss/typography/_main.scss
View file

@ -1,14 +0,0 @@
/**
* Default typography styles for Reuters Graphics projects
* Uses sizes and typeface declarations from CSS variables defined in the Theme
* Knowlege, Source Sans Pro and Freight Book font declarations
* Includes Font size levels from 1 to 6
* Includes Font families for display, serif, sans-serif and monospace text
* Includes predefined responsive style tokens for hed, subheads(3), body and note(3) text
* 🄯2023 Reuters Graphics
*/
@import 'font-faces';
@import 'mixins';
@import 'classes';
@import 'rules';

125
src/scss/typography/_mixins.scss
View file

@ -1,125 +0,0 @@
/* FONT SIZE MIXINS */
@mixin font-size-1($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-1) #{$important};
}
@mixin font-size-2($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-2) #{$important};
}
@mixin font-size-3($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-3) #{$important};
}
@mixin font-size-4($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-4) #{$important};
}
@mixin font-size-5($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-5) #{$important};
}
@mixin font-size-6($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-6) #{$important};
}
/* TYPEFACE MIXINS */
@mixin typeface-display($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-display) #{$important};
}
@mixin typeface-serif($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-serif) #{$important};
}
@mixin typeface-sans-serif($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-sans-serif) #{$important};
}
@mixin typeface-monospace($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-monospace) #{$important};
}
/* FONT STYLE TOKEN MIXINS */
@mixin font-hed($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-hed) #{$important};
font-family: var(--theme-font-family-hed) #{$important};
font-weight: 500 #{$important};
line-height: 1.14 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-1($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-subhed-1) #{$important};
font-family: var(--theme-font-family-subhed) #{$important};
font-weight: 700 #{$important};
line-height: 1.14 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-2($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-subhed-2) #{$important};
font-family: var(--theme-font-family-subhed) #{$important};
font-weight: 700 #{$important};
line-height: 1.28 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-subhed-3($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-subhed-3) #{$important};
font-family: var(--theme-font-family-subhed) #{$important};
font-weight: 500 #{$important};
line-height: 1.4 #{$important};
text-transform: uppercase #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}
@mixin font-body($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-body) #{$important};
font-family: var(--theme-font-family-body) #{$important};
font-weight: 400 #{$important};
line-height: 1.5 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-note-1($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-note-1) #{$important};
font-family: var(--theme-font-family-note) #{$important};
font-weight: 300 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-primary) #{$important};
}
@mixin font-note-2($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-note-2) #{$important};
font-family: var(--theme-font-family-note) #{$important};
font-weight: 300 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}
@mixin font-note-3($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-font-size-note-3) #{$important};
font-family: var(--theme-font-family-note) #{$important};
font-weight: 400 #{$important};
line-height: 1.4 #{$important};
color: var(--theme-colour-text-secondary) #{$important};
}

150
src/scss/typography/_rules.scss
View file

@ -1,150 +0,0 @@
@import 'mixins';
/* RESPONSIVE SCALING */
// TODO: Talk to Prasanta. This needs to be handled in the component, I think.
// @media (max-width: 510px) {
// div.theme {
// // --theme-scale-size-base: var(--theme-scale-size-base-mobile) !important;
// --theme-scale-size-1: calc(
// var(--theme-scale-size-base-mobile) * 2.25rem
// ) !important;
// --theme-scale-size-2: calc(
// var(--theme-scale-size-base-mobile) * 1.5rem
// ) !important;
// --theme-scale-size-3: calc(
// var(--theme-scale-size-base-mobile) * 1rem
// ) !important;
// --theme-scale-size-4: calc(
// var(--theme-scale-size-base-mobile) * 0.9rem
// ) !important;
// }
// }
/* SET DEFAULT STYLES */
h1 {
@include font-hed;
}
h2 {
@include font-subhed-1;
}
h3 {
@include font-subhed-2;
}
h4,
h5,
h6 {
@include font-subhed-3;
}
p {
@include font-body;
}
.body-text {
p {
@include font-body;
}
}
.body-note {
@include font-note-1;
p {
@include font-note-1;
}
}
.end-note {
@include font-note-2;
p {
@include font-note-2;
}
}
.foot-note {
@include font-note-3;
p {
@include font-note-3;
}
}
/* FONT SIZE CLASSES */
.font-size-1 {
@include font-size-1($i: false);
}
.font-size-2 {
@include font-size-2($i: false);
}
.font-size-3 {
@include font-size-3($i: false);
}
.font-size-4 {
@include font-size-4($i: false);
}
.font-size-5 {
@include font-size-5($i: false);
}
.font-size-6 {
@include font-size-6($i: false);
}
/* TYPEFACE CLASSES */
.typeface-display {
@include typeface-display($i: false);
}
.typeface-serif {
@include typeface-serif($i: false);
}
.typeface-sans-serif {
@include typeface-sans-serif($i: false);
}
.typeface-monospace {
@include typeface-monospace($i: false);
}
/* FONT STYLE TOKEN CLASSES */
.font-hed {
@include font-hed($i: false);
}
.font-subhed-1 {
@include font-subhed-1($i: false);
}
.font-subhed-2 {
@include font-subhed-2($i: false);
}
.font-subhed-3 {
@include font-subhed-3($i: false);
}
.font-body {
@include font-body($i: false);
}
.font-note-1 {
@include font-note-1($i: false);
}
.font-note-2 {
@include font-note-2($i: false);
}
.font-note-3 {
@include font-note-3($i: false);
}

11
src/scss/typography_old/_box-shadow.scss
View file

@ -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;
}

81
src/scss/typography_old/_font-size.scss
View file

@ -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;
}
}
}

15
src/scss/typography_old/_letter-spacing.scss
View file

@ -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;
}

5
src/scss/typography_old/_main.scss
View file

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

47
src/scss/typography_old/_mixins.scss
View file

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

82
src/scss/typography_old/_rules.scss
View file

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

13
src/scss/typography_old/_text-shadow.scss
View file

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

7
src/scss/typography_old/_transform.scss
View file

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

39
src/scss/typography_old/_variables.scss
View file

@ -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: var(--colour-tr-medium-grey);
$blockquote-small-color: var(--colour-tr-medium-grey);
$blockquote-border-color: var(--colour-tr-dark-grey) !default;
$blockquote-border-width: 0.25rem !default;
$hr-border-color: rgba(var(--colour-tr-black), 0.1) !default;
// Headings
$headings-font-family: $font-family-display;
$headings-font-weight: 700 !default;
$headings-color: var(--colour-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;