From 10dd8586b3151f9cbdb52851d20c2f8d7bdcf4b8 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Fri, 28 Jul 2023 20:35:49 +0100 Subject: [PATCH] update fonts --- src/components/Theme/themes/common.js | 2 +- .../ThemeBuilder/NewTheme/NewTheme.jsx | 15 +- .../tokens/interactivity/_main.stories.mdx | 32 ++ .../styles/tokens/layout/main.stories.mdx | 15 +- .../styles/tokens/typography/main.stories.mdx | 11 + .../theme-builder/theme-builder.stories.mdx | 2 + src/scss/fonts/_font-faces.scss | 300 +++++++++++++----- src/scss/token-classes.scss | 1 + src/scss/tokens/interactivity/_cursor.scss | 72 +++++ src/scss/tokens/interactivity/_main.scss | 2 + .../tokens/interactivity/_pointer-events.scss | 12 + src/scss/tokens/layout/_main.scss | 1 + src/scss/tokens/layout/_position.scss | 30 ++ src/scss/tokens/text/_font-family.scss | 24 ++ src/scss/tokens/text/_main.scss | 1 + src/scss/tokens/text/_text-stroke.scss | 74 +++++ src/scss/tokens/text/mixins/_font-family.scss | 24 ++ src/scss/tokens/text/mixins/_main.scss | 1 + src/scss/tokens/text/mixins/_text-stroke.scss | 8 + 19 files changed, 537 insertions(+), 90 deletions(-) create mode 100644 src/docs/styles/tokens/interactivity/_main.stories.mdx create mode 100644 src/scss/tokens/interactivity/_cursor.scss create mode 100644 src/scss/tokens/interactivity/_main.scss create mode 100644 src/scss/tokens/interactivity/_pointer-events.scss create mode 100644 src/scss/tokens/layout/_position.scss create mode 100644 src/scss/tokens/text/_text-stroke.scss create mode 100644 src/scss/tokens/text/mixins/_text-stroke.scss diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js index cd5ff952..c0491c73 100644 --- a/src/components/Theme/themes/common.js +++ b/src/components/Theme/themes/common.js @@ -2,7 +2,7 @@ export default { font: { family: { - serif: 'freight-book, serif', + serif: 'FreightText, serif', 'sans-serif': 'Knowledge, sans-serif', monospace: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx index de2996eb..884d1efe 100644 --- a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx +++ b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx @@ -7,15 +7,20 @@ import darkTheme from '../../../../components/Theme/themes/dark'; import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import lightTheme from '../../../../components/Theme/themes/light'; import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'; +import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; import svelteSyntax from '../../../../../.storybook/svelte-highlighting'; import { updatedDiff } from 'deep-object-diff'; SyntaxHighlighter.registerLanguage('svelte', svelteSyntax); +SyntaxHighlighter.registerLanguage('scss', scss); const NewTheme = ({ theme, themeName }) => { console.log('rerenders NewTheme'); const originalTheme = themeName === 'light' ? lightTheme : darkTheme; const updates = updatedDiff(originalTheme, theme); + + const bgChanged = theme.colour.background !== lightTheme.colour.background; + return (

Use the code below to adapt the Theme component for your new design:

@@ -24,10 +29,18 @@ const NewTheme = ({ theme, themeName }) => { base="${themeName}" theme={${JSON.stringify(updates, null, 2).replaceAll('"', '\'')}} > - {/*...*/} + `} + {bgChanged && ( + + {`// global.scss +body { + background-color: ${theme.colour.background}; +}`} + + )}
); } diff --git a/src/docs/styles/tokens/interactivity/_main.stories.mdx b/src/docs/styles/tokens/interactivity/_main.stories.mdx new file mode 100644 index 00000000..f04f0746 --- /dev/null +++ b/src/docs/styles/tokens/interactivity/_main.stories.mdx @@ -0,0 +1,32 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; +import CopyTable from '../../../docs-components/CopyTable/Table.jsx'; +import { cssStringToTableArray } from '../../../utils/parseCss'; + +{/* @ts-ignore */} +import cursor from '$lib/scss/tokens/interactivity/\_cursor.scss?raw'; + +{/* @ts-ignore */} +import pointerEvents from '$lib/scss/tokens/interactivity/\_pointer-events.scss?raw'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Interactivity tokens + + + + diff --git a/src/docs/styles/tokens/layout/main.stories.mdx b/src/docs/styles/tokens/layout/main.stories.mdx index c1fee5e9..fce5982c 100644 --- a/src/docs/styles/tokens/layout/main.stories.mdx +++ b/src/docs/styles/tokens/layout/main.stories.mdx @@ -4,7 +4,7 @@ import CopyTable from '../../../docs-components/CopyTable/Table.jsx'; import { cssStringToTableArray } from '../../../utils/parseCss'; {/* @ts-ignore */} -import boxSizine from '$lib/scss/tokens/layout/\_box-sizing.scss?raw'; +import boxSizing from '$lib/scss/tokens/layout/\_box-sizing.scss?raw'; {/* @ts-ignore */} import display from '$lib/scss/tokens/layout/\_display.scss?raw'; @@ -12,6 +12,9 @@ import display from '$lib/scss/tokens/layout/\_display.scss?raw'; {/* @ts-ignore */} import floats from '$lib/scss/tokens/layout/\_floats.scss?raw'; +{/* @ts-ignore */} +import position from '$lib/scss/tokens/layout/\_position.scss?raw'; + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) @@ -26,6 +29,14 @@ import floats from '$lib/scss/tokens/layout/\_floats.scss?raw'; copyable={[true, false]} /> + + diff --git a/src/docs/styles/tokens/typography/main.stories.mdx b/src/docs/styles/tokens/typography/main.stories.mdx index c342f3b2..fa15767d 100644 --- a/src/docs/styles/tokens/typography/main.stories.mdx +++ b/src/docs/styles/tokens/typography/main.stories.mdx @@ -30,6 +30,9 @@ import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline'; {/* @ts-ignore */} import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline'; +{/* @ts-ignore */} +import textStroke from '$lib/scss/tokens/text/\_text-stroke.scss?inline'; + {/* @ts-ignore */} import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline'; @@ -122,6 +125,14 @@ import './styles.scss'; copyable={[true, false]} /> + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + # Theme builder Use this tool to create a custom theme for your page then update the `Theme` component in your project. diff --git a/src/scss/fonts/_font-faces.scss b/src/scss/fonts/_font-faces.scss index 4f65e4a5..90f3d448 100644 --- a/src/scss/fonts/_font-faces.scss +++ b/src/scss/fonts/_font-faces.scss @@ -1,117 +1,245 @@ /* 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') + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; } @font-face { font-family: 'Knowledge'; + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff') + format('woff'); + font-weight: 900; font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Knowledge'; + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff') + format('woff'); 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-display: swap; } @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') + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff') format('woff'); -} - -@font-face { - font-family: 'Knowledge'; + font-weight: normal; font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Knowledge'; + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff') + format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Knowledge'; + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff') + format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Knowledge'; + src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff') + format('woff'); 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'); + font-display: swap; } /* 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') + src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.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'); + font-style: normal; + font-display: swap; } -/* FREIGHT BOOK */ @font-face { - font-family: 'freight-book'; - font-style: normal; + font-family: 'Source Sans Pro'; + src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff') + format('woff'); font-weight: normal; - src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff') - format('woff'); + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff') + format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff') + format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff') + format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +/* FREIGHT TEXT */ +@font-face { + font-family: 'FreightText'; + src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff') + format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'FreightText'; + src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff') + format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'FreightText'; + src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff') + format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'FreightText'; + src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff') + format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'FreightText'; + src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff') + format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +/* NOTO SANS JAPANESE */ +@font-face { + font-family: 'Noto Sans JP'; + src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff') + format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff') + format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff') + format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff') + format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff2') + format('woff2'), + url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff') + format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; } diff --git a/src/scss/token-classes.scss b/src/scss/token-classes.scss index 23c271c9..7b84b90c 100644 --- a/src/scss/token-classes.scss +++ b/src/scss/token-classes.scss @@ -1,6 +1,7 @@ @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/spacers/main' as *; @use 'tokens/text/main' as *; diff --git a/src/scss/tokens/interactivity/_cursor.scss b/src/scss/tokens/interactivity/_cursor.scss new file mode 100644 index 00000000..2973e605 --- /dev/null +++ b/src/scss/tokens/interactivity/_cursor.scss @@ -0,0 +1,72 @@ +.cursor-auto { + cursor: auto; +} +.cursor-default { + cursor: default; +} +.cursor-pointer { + cursor: pointer; +} +.cursor-crosshair { + cursor: crosshair; +} +.cursor-text { + cursor: text; +} +.cursor-move { + cursor: move; +} +.cursor-grab { + cursor: grab; +} +.cursor-grabbing { + cursor: grabbing; +} +.cursor-col-resize { + cursor: col-resize; +} +.cursor-row-resize { + cursor: row-resize; +} +.cursor-zoom-in { + cursor: zoom-in; +} +.cursor-zoom-out { + cursor: zoom-out; +} +.\!cursor-auto { + cursor: auto !important; +} +.\!cursor-default { + cursor: default !important; +} +.\!cursor-pointer { + cursor: pointer !important; +} +.\!cursor-crosshair { + cursor: crosshair !important; +} +.\!cursor-text { + cursor: text !important; +} +.\!cursor-move { + cursor: move !important; +} +.\!cursor-grab { + cursor: grab !important; +} +.\!cursor-grabbing { + cursor: grabbing !important; +} +.\!cursor-col-resize { + cursor: col-resize !important; +} +.\!cursor-row-resize { + cursor: row-resize !important; +} +.\!cursor-zoom-in { + cursor: zoom-in !important; +} +.\!cursor-zoom-out { + cursor: zoom-out !important; +} diff --git a/src/scss/tokens/interactivity/_main.scss b/src/scss/tokens/interactivity/_main.scss new file mode 100644 index 00000000..daac9285 --- /dev/null +++ b/src/scss/tokens/interactivity/_main.scss @@ -0,0 +1,2 @@ +@forward 'cursor'; +@forward 'pointer-events'; diff --git a/src/scss/tokens/interactivity/_pointer-events.scss b/src/scss/tokens/interactivity/_pointer-events.scss new file mode 100644 index 00000000..df859536 --- /dev/null +++ b/src/scss/tokens/interactivity/_pointer-events.scss @@ -0,0 +1,12 @@ +.pointer-events-none { + pointer-events: none; +} +.pointer-events-auto { + pointer-events: auto; +} +.\!pointer-events-none { + pointer-events: none !important; +} +.\!pointer-events-auto { + pointer-events: auto !important; +} diff --git a/src/scss/tokens/layout/_main.scss b/src/scss/tokens/layout/_main.scss index ff48d7e1..f2d99b7d 100644 --- a/src/scss/tokens/layout/_main.scss +++ b/src/scss/tokens/layout/_main.scss @@ -2,3 +2,4 @@ @forward 'box-sizing'; @forward 'display'; @forward 'floats'; +@forward 'position'; diff --git a/src/scss/tokens/layout/_position.scss b/src/scss/tokens/layout/_position.scss new file mode 100644 index 00000000..5fc48f10 --- /dev/null +++ b/src/scss/tokens/layout/_position.scss @@ -0,0 +1,30 @@ +.static { + position: static; +} +.fixed { + position: fixed; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.sticky { + position: sticky; +} +.\!static { + position: static; +} +.\!fixed { + position: fixed; +} +.\!absolute { + position: absolute; +} +.\!relative { + position: relative; +} +.\!sticky { + position: sticky; +} diff --git a/src/scss/tokens/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss index 9abc2bbd..b984c64b 100644 --- a/src/scss/tokens/text/_font-family.scss +++ b/src/scss/tokens/text/_font-family.scss @@ -21,6 +21,18 @@ .font-note { @include font-note; } +.font-source-sans-pro { + @include font-source-sans-pro; +} +.font-knowledge { + @include font-knowledge; +} +.font-freight-book { + @include font-freight-book; +} +.font-noto-sans-jp { + @include font-noto-sans-jp; +} .\!font-serif { @include \!font-serif; } @@ -42,3 +54,15 @@ .\!font-note { @include \!font-note; } +.\!font-source-sans-pro { + @include \!font-source-sans-pro; +} +.\!font-knowledge { + @include \!font-knowledge; +} +.\!font-freight-book { + @include \!font-freight-book; +} +.\!font-noto-sans-jp { + @include \!font-noto-sans-jp; +} diff --git a/src/scss/tokens/text/_main.scss b/src/scss/tokens/text/_main.scss index 6d1d1177..53b7189b 100644 --- a/src/scss/tokens/text/_main.scss +++ b/src/scss/tokens/text/_main.scss @@ -7,6 +7,7 @@ @forward 'line-height'; @forward 'text-align'; @forward 'text-decoration'; +@forward 'text-stroke'; @forward 'text-transform'; @forward 'vertical-align'; @forward 'white-space'; diff --git a/src/scss/tokens/text/_text-stroke.scss b/src/scss/tokens/text/_text-stroke.scss new file mode 100644 index 00000000..54579edf --- /dev/null +++ b/src/scss/tokens/text/_text-stroke.scss @@ -0,0 +1,74 @@ +@use 'mixins/text-stroke' as *; + +.text-stroke-black { + @include text-stroke(1px, #000); +} +.text-stroke-black-2 { + @include text-stroke(2px, #000); +} +.text-stroke-black-3 { + @include text-stroke(3px, #000); +} +.text-stroke-black-4 { + @include text-stroke(4px, #000); +} +.text-stroke-black-6 { + @include text-stroke(6px, #000); +} +.text-stroke-black-8 { + @include text-stroke(8px, #000); +} +.\!text-stroke-black { + @include text-stroke(1px, #000); +} +.\!text-stroke-black-2 { + @include \!text-stroke(2px, #000); +} +.\!text-stroke-black-3 { + @include \!text-stroke(3px, #000); +} +.\!text-stroke-black-4 { + @include \!text-stroke(4px, #000); +} +.\!text-stroke-black-6 { + @include \!text-stroke(6px, #000); +} +.\!text-stroke-black-8 { + @include \!text-stroke(8px, #000); +} +.text-stroke-white { + @include text-stroke(1px, #fff); +} +.text-stroke-white-2 { + @include text-stroke(2px, #fff); +} +.text-stroke-white-3 { + @include text-stroke(3px, #fff); +} +.text-stroke-white-4 { + @include text-stroke(4px, #fff); +} +.text-stroke-white-6 { + @include text-stroke(6px, #fff); +} +.text-stroke-white-8 { + @include text-stroke(8px, #fff); +} +.\!text-stroke-white { + @include text-stroke(1px, #fff); +} +.\!text-stroke-white-2 { + @include \!text-stroke(2px, #fff); +} +.\!text-stroke-white-3 { + @include \!text-stroke(3px, #fff); +} +.\!text-stroke-white-4 { + @include \!text-stroke(4px, #fff); +} +.\!text-stroke-white-6 { + @include \!text-stroke(6px, #fff); +} +.\!text-stroke-white-8 { + @include \!text-stroke(8px, #fff); +} diff --git a/src/scss/tokens/text/mixins/_font-family.scss b/src/scss/tokens/text/mixins/_font-family.scss index d76132ec..c977ada8 100644 --- a/src/scss/tokens/text/mixins/_font-family.scss +++ b/src/scss/tokens/text/mixins/_font-family.scss @@ -19,6 +19,18 @@ @mixin font-note { font-family: var(--theme-font-family-note); } +@mixin font-source-sans-pro { + font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; +} +@mixin font-knowledge { + font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif; +} +@mixin font-freight-book { + font-family: 'FreightText', serif; +} +@mixin font-noto-sans-jp { + font-family: 'Noto Sans JP'; +} @mixin \!font-serif { font-family: var(--theme-font-family-serif) !important; } @@ -40,3 +52,15 @@ @mixin \!font-note { font-family: var(--theme-font-family-note) !important; } +@mixin \!font-source-sans-pro { + font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif !important; +} +@mixin \!font-knowledge { + font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important; +} +@mixin \!font-freight-book { + font-family: 'FreightText', serif !important; +} +@mixin \!font-noto-sans-jp { + font-family: 'Noto Sans JP' !important; +} diff --git a/src/scss/tokens/text/mixins/_main.scss b/src/scss/tokens/text/mixins/_main.scss index 70aecfb6..314f9365 100644 --- a/src/scss/tokens/text/mixins/_main.scss +++ b/src/scss/tokens/text/mixins/_main.scss @@ -4,3 +4,4 @@ @forward 'font-weight'; @forward 'letter-spacing'; @forward 'line-height'; +@forward 'text-stroke'; diff --git a/src/scss/tokens/text/mixins/_text-stroke.scss b/src/scss/tokens/text/mixins/_text-stroke.scss new file mode 100644 index 00000000..04ccd91d --- /dev/null +++ b/src/scss/tokens/text/mixins/_text-stroke.scss @@ -0,0 +1,8 @@ +@mixin text-stroke($size: 1px, $colour: #ffffff) { + -webkit-text-stroke: $size $colour; + text-stroke: $size $colour; +} +@mixin \!text-stroke($size: 1px, $colour: #ffffff) { + -webkit-text-stroke: $size $colour !important; + text-stroke: $size $colour !important; +}