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

add typography system

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-03-03 19:06:16 +05:30
parent 5affacd6d9
commit cf722489c4
21 changed files with 531 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Theme/@types/component.ts
View file

@ -8,7 +8,7 @@ interface Scale {
'size-6': string,
}
interface Fontface {
interface Typeface {
'display': string,
'serif': string,
'sans-serif': string,
@ -42,14 +42,14 @@ interface Font {
export interface Theme {
scale: Scale,
fontface: Fontface
typeface: Typeface
colour: Colour,
font: Font;
};
export interface CustomTheme {
scale?: Partial<Scale>,
fontface?: Partial<Fontface>,
typeface?: Partial<Typeface>,
colour?: Partial<Colour>,
font?: Partial<Font>
}

11
src/components/Theme/themes/dark.js
View file

@ -2,6 +2,7 @@
export default {
scale: {
'size-base': 1.375,
'size-base-mobile': 1.25,
'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
@ -9,7 +10,7 @@ export default {
'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
},
fontface: {
typeface: {
display: 'Knowledge, sans-serif',
serif: 'freight-book, serif',
'sans-serif': 'Knowledge, sans-serif',
@ -17,10 +18,10 @@ export default {
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
font: {
'family-hed': 'var(--theme-fontface-display)',
'family-subhed': 'var(--theme-fontface-sans-serif)',
'family-body': 'var(--theme-fontface-serif)',
'family-note': 'var(--theme-fontface-sans-serif)',
'family-hed': 'var(--theme-typeface-display)',
'family-subhed': 'var(--theme-typeface-sans-serif)',
'family-body': 'var(--theme-typeface-serif)',
'family-note': 'var(--theme-typeface-sans-serif)',
'size-hed': 'var(--theme-scale-size-1)',
'size-subhed-1': 'var(--theme-scale-size-2)',
'size-subhed-2': 'var(--theme-scale-size-3)',

11
src/components/Theme/themes/light.js
View file

@ -1,6 +1,7 @@
export default {
scale: {
'size-base': 1.375,
'size-base-mobile': 1.125,
'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
@ -8,7 +9,7 @@ export default {
'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
},
fontface: {
typeface: {
display: 'Knowledge, sans-serif',
serif: 'freight-book, serif',
'sans-serif': 'Knowledge, sans-serif',
@ -16,10 +17,10 @@ export default {
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
font: {
'family-hed': 'var(--theme-fontface-display)',
'family-subhed': 'var(--theme-fontface-sans-serif)',
'family-body': 'var(--theme-fontface-serif)',
'family-note': 'var(--theme-fontface-sans-serif)',
'family-hed': 'var(--theme-typeface-display)',
'family-subhed': 'var(--theme-typeface-sans-serif)',
'family-body': 'var(--theme-typeface-serif)',
'family-note': 'var(--theme-typeface-sans-serif)',
'size-hed': 'var(--theme-scale-size-1)',
'size-subhed-1': 'var(--theme-scale-size-2)',
'size-subhed-2': 'var(--theme-scale-size-3)',

11
src/docs/scss/css-variables.stories.mdx
View file

@ -58,20 +58,21 @@ Read more about how to override or define your own CSS variables in the [Themes]
| `--theme-font-size-note-3` | Dateline/Caption (`.foot-note > p`) font size |
### Font faces
### Typefaces (Fonts)
| CSS variable | Role |
| -------------------------------- | ------------------------------- |
| `--theme-fontface-display` | Base display font family |
| `--theme-fontface-serif` | Base serif font family |
| `--theme-fontface-sans-serif` | Base sans-serif font family |
| `--theme-fontface-monospace` | Base monospace font family |
| `--theme-typeface-display` | Base display font family |
| `--theme-typeface-serif` | Base serif font family |
| `--theme-typeface-sans-serif` | Base sans-serif font family |
| `--theme-typeface-monospace` | Base monospace font family |
### Size scale
| CSS variable | Role |
| -------------------------------- | ------------------------------- |
| `--theme-scale-size-base` | Scale factor for base body size |
| `--theme-scale-size-base-mobile` | Scale factor for smaller screens|
| `--theme-scale-size-1` | Size level 1 |
| `--theme-scale-size-2` | Size level 2 |
| `--theme-scale-size-3` | Size level 3 |

4
src/scss/_variables.scss
View file

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

15
src/scss/main.scss
View file

@ -1,3 +1,11 @@
/**
* Styles for svelte components
* Custom grid system
* Colour and typography systems using CSS variable from Theme
* Utility classes for quick styling
* 🄯2023 Reuters Graphics Style Guide
*/
@import 'fonts/font-faces';
// Variables
@ -11,6 +19,9 @@
// Styles
@import 'fonts/rules';
@import 'typography/rules';
@import 'typography/main';
@import 'typography_old/rules';
@import 'typography_old/main';
@import 'spacers/rules';
/* TYPOGRAPHY */
@import 'typography/main';

4
src/scss/mixins/_body-text.scss
View file

@ -1,6 +1,6 @@
@import '../fonts/mixins';
@import '../fonts/variables';
@import '../typography/font-size';
@import '../typography_old/font-size';
@import '../colours/thematic/tr';
@mixin body-text {
@ -14,6 +14,7 @@
blockquote {
color: var(--theme-colour-text-primary, $tr-dark-grey);
}
p,
ul li,
ul li p,
@ -67,6 +68,7 @@
padding-left: 1.75rem;
list-style-type: square;
}
p + ul {
margin-top: -0.75rem;
}

74
src/scss/typography/_classes.scss Normal file
View file

@ -0,0 +1,74 @@
/* FONT SIZE CLASSES */
.font-size-1 {
@include font-size-1($i: true);
}
.font-size-2 {
@include font-size-2($i: true);
}
.font-size-3 {
@include font-size-3($i: true);
}
.font-size-4 {
@include font-size-4($i: true);
}
.font-size-5 {
@include font-size-5($i: true);
}
.font-size-6 {
@include font-size-6($i: true);
}
/* TYPEFACE CLASSES */
.typeface-display {
@include typeface-display($i: true);
}
.typeface-serif {
@include typeface-serif($i: true);
}
.typeface-sans-serif {
@include typeface-sans-serif($i: true);
}
.typeface-monospace {
@include typeface-monospace($i: true);
}
/* FONT STYLE TOKEN CLASSES */
.font-hed {
@include font-hed($i: true);
}
.font-subhed-1 {
@include font-subhed-1($i: true);
}
.font-subhed-2 {
@include font-subhed-2($i: true);
}
.font-subhed-3 {
@include font-subhed-3($i: true);
}
.font-body {
@include font-body($i: true);
}
.font-note-1 {
@include font-note-1($i: true);
}
.font-note-2 {
@include font-note-2($i: true);
}
.font-note-3 {
@include font-note-3($i: true);
}

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

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

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

@ -1,5 +1,14 @@
@import 'box-shadow';
@import 'font-size';
@import 'letter-spacing';
@import 'text-shadow';
@import 'transform';
/**
* 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';

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

@ -1,26 +1,117 @@
@import "variables";
/* FONT SIZE MIXINS */
@mixin font-size-1($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-1) #{$important};
}
// Font sizes
@mixin font-size-xs { font-size: $font-size-xs; }
@mixin font-size-2($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-2) #{$important};
}
@mixin font-size-sm { font-size: $font-size-sm; }
@mixin font-size-3($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-3) #{$important};
}
@mixin font-size-base { font-size: $font-size-base; }
@mixin font-size-4($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-4) #{$important};
}
@mixin font-size-article { font-size: $font-size-article; }
@mixin font-size-5($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-5) #{$important};
}
@mixin font-size-lg { font-size: $font-size-lg; }
@mixin font-size-6($i: false) {
$important: if($i, '!important', '');
font-size: var(--theme-scale-size-6) #{$important};
}
@mixin font-size-xl { font-size: $font-size-xl; }
/* TYPEFACE MIXINS */
@mixin typeface-display($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-display) #{$important};
}
@mixin font-size-2xl { font-size: $font-size-2xl; }
@mixin typeface-serif($i: false) {
$important: if($i, '!important', '');
font-family: var(--theme-typeface-serif) #{$important};
}
@mixin font-size-3xl { font-size: $font-size-3xl; }
@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 weights
@mixin font-weight-light { font-weight: $font-weight-light; }
/* 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};
}
@mixin font-weight-normal { font-weight: $font-weight-normal; }
@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};
}
@mixin font-weight-bold { font-weight: $font-weight-bold; }
@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};
}
@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};
}
@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};
}
@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};
}
@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};
}
@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};
}

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

@ -1,83 +1,60 @@
@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;
/* RESPONSIVE SCALING */
@media (max-width: 510px) {
div.theme {
--theme-scale-size-base: var(--theme-scale-size-base-mobile);
}
}
h1 {
font-size: $h1-font-size;
margin-bottom: math.div($h1-font-size, 2);
/* SET DEFAULT STYLES */
&:not(:first-child) {
margin-top: $h1-font-size;
}
h1 {
@include font-hed;
}
h2 {
font-size: $h2-font-size;
margin-bottom: math.div($h2-font-size, 2);
&:not(:first-child) {
margin-top: $h2-font-size;
}
@include font-subhed-1;
}
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;
}
@include font-subhed-2;
}
h4,
h5,
h6 {
font-size: $h6-font-size;
margin-bottom: math.div($h6-font-size, 2);
&:not(:first-child) {
margin-top: $h6-font-size;
}
@include font-subhed-3;
}
p {
@include font-serif;
font-size: $font-size-article;
margin-bottom: $font-size-article;
@include font-body;
}
small {
font-size: $font-size-sm;
.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;
}
}

0
src/scss/typography/_box-shadow.scss → src/scss/typography_old/_box-shadow.scss
View file

12
src/scss/typography/_font-size.scss → src/scss/typography_old/_font-size.scss
View file

@ -8,7 +8,7 @@
line-height: 1.75rem;
}
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 1.1rem;
line-height: 1.8rem;
@ -28,7 +28,7 @@
line-height: 1.8rem !important;
}
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
@ -44,7 +44,7 @@
font-size: 0.9rem;
line-height: 1.2rem;
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 0.8rem;
line-height: 1.1rem;
}
@ -53,7 +53,7 @@
font-size: 0.9rem !important;
line-height: 1.2rem !important;
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 0.8rem !important;
line-height: 1.1rem !important;
}
@ -64,7 +64,7 @@
font-size: 1.6rem;
line-height: 2.1rem;
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 1.3rem;
line-height: 1.9rem;
}
@ -73,7 +73,7 @@
font-size: 1.6rem !important;
line-height: 2rem !important;
@media(max-width: 540px) {
@media (max-width: 540px) {
font-size: 1.3rem !important;
line-height: 1.8rem !important;
}

0
src/scss/typography/_letter-spacing.scss → src/scss/typography_old/_letter-spacing.scss
View file

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

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

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

@ -0,0 +1,47 @@
@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 Normal file
View file

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

0
src/scss/typography/_text-shadow.scss → src/scss/typography_old/_text-shadow.scss
View file

0
src/scss/typography/_transform.scss → src/scss/typography_old/_transform.scss
View file

0
src/scss/typography/_variables.scss → src/scss/typography_old/_variables.scss
View file