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

update fonts

Browse source
This commit is contained in:
Jon McClure 2023-07-28 20:35:49 +01:00
parent 75ac9889cf
commit 10dd8586b3
19 changed files with 537 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Theme/themes/common.js
View file

@ -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',

15
src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
View file

@ -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 (
<div className={classes.newtheme}>
<p>Use the code below to adapt the <code>Theme</code> component for your new design:</p>
@ -24,10 +29,18 @@ const NewTheme = ({ theme, themeName }) => {
base="${themeName}"
theme={${JSON.stringify(updates, null, 2).replaceAll('"', '\'')}}
>
{/*...*/}
<!-- ... -->
</Theme>
`}
</SyntaxHighlighter>
{bgChanged && (
<SyntaxHighlighter language="scss" style={prism} customStyle={{ maxHeight: '140px' }}>
{`// global.scss
body {
background-color: ${theme.colour.background};
}`}
</SyntaxHighlighter>
)}
</div>
);
}

32
src/docs/styles/tokens/interactivity/_main.stories.mdx Normal file
View file

@ -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';
<Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Interactivity tokens
<CopyTable
title="Cursor"
mdnLink="cursor"
header={['Class', 'Properties']}
body={cssStringToTableArray(cursor)}
copyable={[true, false]}
/>
<CopyTable
title="Pointer events"
mdnLink="pointer-events"
header={['Class', 'Properties']}
body={cssStringToTableArray(pointerEvents)}
copyable={[true, false]}
/>

15
src/docs/styles/tokens/layout/main.stories.mdx
View file

@ -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';
<Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
![](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]}
/>
<CopyTable
title="Position"
mdnLink="position"
header={['Class', 'Properties']}
body={cssStringToTableArray(position)}
copyable={[true, false]}
/>
<CopyTable
title="Float"
mdnLink="float"
@ -38,6 +49,6 @@ import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
title="Box sizing"
mdnLink="box-sizing"
header={['Class', 'Properties']}
body={cssStringToTableArray(boxSizine)}
body={cssStringToTableArray(boxSizing)}
copyable={[true, false]}
/>

11
src/docs/styles/tokens/typography/main.stories.mdx
View file

@ -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]}
/>
<CopyTable
title="Text stroke"
mdnLink="text-stroke"
header={['Class', 'Properties']}
body={cssStringToTableArray(textStroke)}
copyable={[true, false]}
/>
<CopyTable
title="Text transform"
mdnLink="text-transform"

2
src/docs/theme-builder/theme-builder.stories.mdx
View file

@ -5,6 +5,8 @@ import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
![](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.

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

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

1
src/scss/token-classes.scss
View file

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

72
src/scss/tokens/interactivity/_cursor.scss Normal file
View file

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

2
src/scss/tokens/interactivity/_main.scss Normal file
View file

@ -0,0 +1,2 @@
@forward 'cursor';
@forward 'pointer-events';

12
src/scss/tokens/interactivity/_pointer-events.scss Normal file
View file

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

1
src/scss/tokens/layout/_main.scss
View file

@ -2,3 +2,4 @@
@forward 'box-sizing';
@forward 'display';
@forward 'floats';
@forward 'position';

30
src/scss/tokens/layout/_position.scss Normal file
View file

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

24
src/scss/tokens/text/_font-family.scss
View file

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

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

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

74
src/scss/tokens/text/_text-stroke.scss Normal file
View file

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

24
src/scss/tokens/text/mixins/_font-family.scss
View file

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

1
src/scss/tokens/text/mixins/_main.scss
View file

@ -4,3 +4,4 @@
@forward 'font-weight';
@forward 'letter-spacing';
@forward 'line-height';
@forward 'text-stroke';

8
src/scss/tokens/text/mixins/_text-stroke.scss Normal file
View file

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