From cf722489c4091d33eac414e7519937814fd33a2c Mon Sep 17 00:00:00 2001 From: Prasanta Kumar Dutta Date: Fri, 3 Mar 2023 19:06:16 +0530 Subject: [PATCH] add typography system --- src/components/Theme/@types/component.ts | 6 +- src/components/Theme/themes/dark.js | 11 +- src/components/Theme/themes/light.js | 11 +- src/docs/scss/css-variables.stories.mdx | 11 +- src/scss/_variables.scss | 4 +- src/scss/main.scss | 15 ++- src/scss/mixins/_body-text.scss | 4 +- src/scss/typography/_classes.scss | 74 +++++++++++ src/scss/typography/_font-faces.scss | 117 +++++++++++++++++ src/scss/typography/_main.scss | 19 ++- src/scss/typography/_mixins.scss | 119 +++++++++++++++--- src/scss/typography/_rules.scss | 107 +++++++--------- .../_box-shadow.scss | 0 .../_font-size.scss | 12 +- .../_letter-spacing.scss | 0 src/scss/typography_old/_main.scss | 5 + src/scss/typography_old/_mixins.scss | 47 +++++++ src/scss/typography_old/_rules.scss | 82 ++++++++++++ .../_text-shadow.scss | 0 .../_transform.scss | 0 .../_variables.scss | 0 21 files changed, 531 insertions(+), 113 deletions(-) create mode 100644 src/scss/typography/_classes.scss create mode 100644 src/scss/typography/_font-faces.scss rename src/scss/{typography => typography_old}/_box-shadow.scss (100%) rename src/scss/{typography => typography_old}/_font-size.scss (87%) rename src/scss/{typography => typography_old}/_letter-spacing.scss (100%) create mode 100644 src/scss/typography_old/_main.scss create mode 100644 src/scss/typography_old/_mixins.scss create mode 100644 src/scss/typography_old/_rules.scss rename src/scss/{typography => typography_old}/_text-shadow.scss (100%) rename src/scss/{typography => typography_old}/_transform.scss (100%) rename src/scss/{typography => typography_old}/_variables.scss (100%) diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts index 70b28f07..7a1bbed8 100644 --- a/src/components/Theme/@types/component.ts +++ b/src/components/Theme/@types/component.ts @@ -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, - fontface?: Partial, + typeface?: Partial, colour?: Partial, font?: Partial } diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js index 7a0cf12d..5483b0c3 100644 --- a/src/components/Theme/themes/dark.js +++ b/src/components/Theme/themes/dark.js @@ -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)', diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js index 202f2bf5..8817d8e7 100644 --- a/src/components/Theme/themes/light.js +++ b/src/components/Theme/themes/light.js @@ -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)', diff --git a/src/docs/scss/css-variables.stories.mdx b/src/docs/scss/css-variables.stories.mdx index ef71c6fc..e5155fd1 100644 --- a/src/docs/scss/css-variables.stories.mdx +++ b/src/docs/scss/css-variables.stories.mdx @@ -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 | diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 97801b0e..10db5bc1 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,2 +1,2 @@ -@import "fonts/variables"; -@import "typography/variables"; +@import 'fonts/variables'; +@import 'typography_old/variables'; diff --git a/src/scss/main.scss b/src/scss/main.scss index a95e1598..e931f2af 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -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'; diff --git a/src/scss/mixins/_body-text.scss b/src/scss/mixins/_body-text.scss index 533c2cf4..4ea9e65a 100644 --- a/src/scss/mixins/_body-text.scss +++ b/src/scss/mixins/_body-text.scss @@ -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; } diff --git a/src/scss/typography/_classes.scss b/src/scss/typography/_classes.scss new file mode 100644 index 00000000..6a73acb8 --- /dev/null +++ b/src/scss/typography/_classes.scss @@ -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); +} diff --git a/src/scss/typography/_font-faces.scss b/src/scss/typography/_font-faces.scss new file mode 100644 index 00000000..4f65e4a5 --- /dev/null +++ b/src/scss/typography/_font-faces.scss @@ -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'); +} diff --git a/src/scss/typography/_main.scss b/src/scss/typography/_main.scss index 23460388..8815796c 100644 --- a/src/scss/typography/_main.scss +++ b/src/scss/typography/_main.scss @@ -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'; diff --git a/src/scss/typography/_mixins.scss b/src/scss/typography/_mixins.scss index a3d34c15..fbd93b5e 100644 --- a/src/scss/typography/_mixins.scss +++ b/src/scss/typography/_mixins.scss @@ -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}; +} diff --git a/src/scss/typography/_rules.scss b/src/scss/typography/_rules.scss index a2e08b77..8c9b7d85 100644 --- a/src/scss/typography/_rules.scss +++ b/src/scss/typography/_rules.scss @@ -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; + } } diff --git a/src/scss/typography/_box-shadow.scss b/src/scss/typography_old/_box-shadow.scss similarity index 100% rename from src/scss/typography/_box-shadow.scss rename to src/scss/typography_old/_box-shadow.scss diff --git a/src/scss/typography/_font-size.scss b/src/scss/typography_old/_font-size.scss similarity index 87% rename from src/scss/typography/_font-size.scss rename to src/scss/typography_old/_font-size.scss index d3fdd1e4..9d4d7a4e 100644 --- a/src/scss/typography/_font-size.scss +++ b/src/scss/typography_old/_font-size.scss @@ -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; } diff --git a/src/scss/typography/_letter-spacing.scss b/src/scss/typography_old/_letter-spacing.scss similarity index 100% rename from src/scss/typography/_letter-spacing.scss rename to src/scss/typography_old/_letter-spacing.scss diff --git a/src/scss/typography_old/_main.scss b/src/scss/typography_old/_main.scss new file mode 100644 index 00000000..23460388 --- /dev/null +++ b/src/scss/typography_old/_main.scss @@ -0,0 +1,5 @@ +@import 'box-shadow'; +@import 'font-size'; +@import 'letter-spacing'; +@import 'text-shadow'; +@import 'transform'; diff --git a/src/scss/typography_old/_mixins.scss b/src/scss/typography_old/_mixins.scss new file mode 100644 index 00000000..460a3cb4 --- /dev/null +++ b/src/scss/typography_old/_mixins.scss @@ -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; +} diff --git a/src/scss/typography_old/_rules.scss b/src/scss/typography_old/_rules.scss new file mode 100644 index 00000000..0e9e176e --- /dev/null +++ b/src/scss/typography_old/_rules.scss @@ -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; +} diff --git a/src/scss/typography/_text-shadow.scss b/src/scss/typography_old/_text-shadow.scss similarity index 100% rename from src/scss/typography/_text-shadow.scss rename to src/scss/typography_old/_text-shadow.scss diff --git a/src/scss/typography/_transform.scss b/src/scss/typography_old/_transform.scss similarity index 100% rename from src/scss/typography/_transform.scss rename to src/scss/typography_old/_transform.scss diff --git a/src/scss/typography/_variables.scss b/src/scss/typography_old/_variables.scss similarity index 100% rename from src/scss/typography/_variables.scss rename to src/scss/typography_old/_variables.scss