final really final last definitely token conventions and docs
This commit is contained in:
Jon McClure
parent
d6240e2497
commit
be8ff06239
100 changed files with 575 additions and 987 deletions
|
|
@ -53,25 +53,23 @@ export const parameters = {
|
|||
'Styles',
|
||||
[
|
||||
'Intro',
|
||||
'Typography', [
|
||||
'Main',
|
||||
'Intro',
|
||||
'Using the type system',
|
||||
'*',
|
||||
],
|
||||
'Layout', [
|
||||
'Main',
|
||||
'Spacers',
|
||||
'Flexbox',
|
||||
'*',
|
||||
],
|
||||
'Borders',
|
||||
'Colours', [
|
||||
'Intro',
|
||||
'Primary',
|
||||
'Thematic',
|
||||
'*',
|
||||
]
|
||||
],
|
||||
'Tokens', [
|
||||
'Intro',
|
||||
'Typography',
|
||||
'*',
|
||||
'Layout', [
|
||||
'Main',
|
||||
'Spacers',
|
||||
'Flexbox',
|
||||
'*',
|
||||
],
|
||||
],
|
||||
],
|
||||
'Actions',
|
||||
['Intro', '*'],
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@
|
|||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../scss/extenders';
|
||||
@import '../../scss/fonts/variables';
|
||||
@use '../../scss/mixins' as *;
|
||||
// @import '../../scss/fonts/variables';
|
||||
|
||||
header.headline {
|
||||
text-align: center;
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
margin: 5px 0;
|
||||
line-height: 1.2;
|
||||
// font-family: var(--theme-font-family-hed, $font-family-display);
|
||||
@extend %font-sans;
|
||||
@include font-sans;
|
||||
color: var(--theme-colour-text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--theme-font-family-subhed, $font-family-display);
|
||||
font-family: var(--theme-font-family-subhed);
|
||||
color: var(--theme-colour-text-primary);
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
.article-metadata {
|
||||
padding: 40px 0;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
font-family: var(--theme-font-family-note);
|
||||
color: var(--theme-colour-text-primary);
|
||||
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -106,7 +106,6 @@
|
|||
</Story>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/fonts/mixins';
|
||||
div.themed {
|
||||
background-color: var(--theme-colour-background);
|
||||
padding: 2rem;
|
||||
|
|
|
|||
|
|
@ -42,11 +42,3 @@
|
|||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@media (max-width: 510px) {
|
||||
div.theme {
|
||||
--theme-scale-size-base: var(--theme-scale-size-base-mobile);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# CSS variables
|
||||
|
||||
Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are provided by the [`Theme`](?path=/docs/components-theme--default) component. All other components in this library use these variables for styling basic colours and typography. You can (and probably _should_) use them in you own code, too.
|
||||
|
||||
> In the future, client's may be allowed to override our CSS variables to match their own house styles. So when using CSS variables, it's a good idea to set a [fallback value](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values), in case a client misconfigures a variable override.
|
||||
>
|
||||
> **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
|
||||
|
||||
```svelte
|
||||
<p>My custom text</p>
|
||||
|
||||
<style lang="scss">
|
||||
p {
|
||||
color: var(--theme-colour-text-primary, #333);
|
||||
font-family: var(--theme-font-family-body, Knowledge);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
### Colours
|
||||
|
||||
| CSS variable | Role |
|
||||
| ------------------------------- | ------------------------------- |
|
||||
| `--theme-colour-background` | Background colour |
|
||||
| `--theme-colour-text-primary` | Primary text colour body text |
|
||||
| `--theme-colour-text-secondary` | Secondary text colour for notes |
|
||||
| `--theme-colour-accent` | A single accent colour |
|
||||
| `--theme-colour-brand-logo` | Reuters logo kinesis colour |
|
||||
| `--theme-colour-brand-rules` | Rules in header and footer |
|
||||
| `--theme-colour-brand-shadow` | Box shadow on header |
|
||||
|
||||
### Fonts
|
||||
|
||||
| CSS variable | Role |
|
||||
| -------------------------------- | ------------------------------- |
|
||||
| `--theme-font-size-base` | Base font size |
|
||||
| `--theme-font-family-serif` | Base serif font family |
|
||||
| `--theme-font-family-sans-serif` | Base sans-serif font family |
|
||||
| `--theme-font-family-monospace` | Base monospace font family |
|
||||
| `--theme-font-family-hed` | Headline (`h1`) font family |
|
||||
| `--theme-font-family-subhed` | Subhead (`h2`-`h6`) font family |
|
||||
| `--theme-font-family-body` | Body text font family |
|
||||
| `--theme-font-family-note` | Note font family |
|
||||
20
src/docs/styles/tokens/accessibility/main.stories.mdx
Normal file
20
src/docs/styles/tokens/accessibility/main.stories.mdx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
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 visibilityStyles from '$lib/scss/tokens/accessibility/\_visibility.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Accessibility" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Accessibility tokens
|
||||
|
||||
<CopyTable
|
||||
title="Visibility"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(visibilityStyles, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
21
src/docs/styles/tokens/backgrounds/main.stories.mdx
Normal file
21
src/docs/styles/tokens/backgrounds/main.stories.mdx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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 backgroundColor from '$lib/scss/tokens/backgrounds/\_background-color.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Backgrounds" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Background tokens
|
||||
|
||||
<CopyTable
|
||||
title="Background colour"
|
||||
mdnLink="background-color"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(backgroundColor, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
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';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderColor from '$lib/scss/borders/\_border-color.scss?raw';
|
||||
import borderColor from '$lib/scss/tokens/borders/\_border-color.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderRadius from '$lib/scss/borders/\_border-radius.scss?raw';
|
||||
import borderRadius from '$lib/scss/tokens/borders/\_border-radius.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderStyle from '$lib/scss/borders/\_border-style.scss?raw';
|
||||
import borderStyle from '$lib/scss/tokens/borders/\_border-style.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderWidth from '$lib/scss/borders/\_border-width.scss?raw';
|
||||
import borderWidth from '$lib/scss/tokens/borders/\_border-width.scss?raw';
|
||||
|
||||
<Meta title="Styles/Borders/Main" parameters={{ ...parameters }} />
|
||||
<Meta title="Styles/Tokens/Borders" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Border classes
|
||||
# Border tokens
|
||||
|
||||
<CopyTable
|
||||
title="Border color"
|
||||
10
src/docs/styles/tokens/intro.stories.mdx
Normal file
10
src/docs/styles/tokens/intro.stories.mdx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Style tokens
|
||||
|
||||
TK...
|
||||
|
|
@ -1,46 +1,46 @@
|
|||
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';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignContent from '$lib/scss/layout/flex/\_align-content.scss?raw';
|
||||
import alignContent from '$lib/scss/tokens/layout/flex/\_align-content.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignItems from '$lib/scss/layout/flex/\_align-items.scss?raw';
|
||||
import alignItems from '$lib/scss/tokens/layout/flex/\_align-items.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignSelf from '$lib/scss/layout/flex/\_align-self.scss?raw';
|
||||
import alignSelf from '$lib/scss/tokens/layout/flex/\_align-self.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexDirection from '$lib/scss/layout/flex/\_flex-direction.scss?raw';
|
||||
import flexDirection from '$lib/scss/tokens/layout/flex/\_flex-direction.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexGrow from '$lib/scss/layout/flex/\_flex-grow.scss?raw';
|
||||
import flexGrow from '$lib/scss/tokens/layout/flex/\_flex-grow.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexShrink from '$lib/scss/layout/flex/\_flex-shrink.scss?raw';
|
||||
import flexShrink from '$lib/scss/tokens/layout/flex/\_flex-shrink.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexWrap from '$lib/scss/layout/flex/\_flex-wrap.scss?raw';
|
||||
import flexWrap from '$lib/scss/tokens/layout/flex/\_flex-wrap.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flex from '$lib/scss/layout/flex/\_flex.scss?raw';
|
||||
import flex from '$lib/scss/tokens/layout/flex/\_flex.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifyContent from '$lib/scss/layout/flex/\_justify-content.scss?raw';
|
||||
import justifyContent from '$lib/scss/tokens/layout/flex/\_justify-content.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifyItems from '$lib/scss/layout/flex/\_justify-items.scss?raw';
|
||||
import justifyItems from '$lib/scss/tokens/layout/flex/\_justify-items.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifySelf from '$lib/scss/layout/flex/\_justify-self.scss?raw';
|
||||
import justifySelf from '$lib/scss/tokens/layout/flex/\_justify-self.scss?raw';
|
||||
|
||||
<Meta title="Styles/Layout/Flexbox" parameters={{ ...parameters }} />
|
||||
<Meta title="Styles/Tokens/Layout/Flexbox" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Flexbox
|
||||
# Flexbox tokens
|
||||
|
||||
Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent [CSS tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
||||
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
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';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import boxSizine from '$lib/scss/layout/\_box-sizing.scss?raw';
|
||||
import boxSizine from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import display from '$lib/scss/layout/\_display.scss?raw';
|
||||
import display from '$lib/scss/tokens/layout/\_display.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import floats from '$lib/scss/layout/\_floats.scss?raw';
|
||||
import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
|
||||
|
||||
<Meta title="Styles/Layout/Main" parameters={{ ...parameters }} />
|
||||
<Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Layout classes
|
||||
# Layout tokens
|
||||
|
||||
<CopyTable
|
||||
title="Display"
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
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';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import margin from '$lib/scss/spacers/\_margin.scss?raw';
|
||||
import margin from '$lib/scss/tokens/spacers/\_margin.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import padding from '$lib/scss/spacers/\_padding.scss?raw';
|
||||
import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
|
||||
|
||||
<Meta title="Styles/Layout/Spacers" parameters={{ ...parameters }} />
|
||||
<Meta title="Styles/Tokens/Layout/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Spacer classes
|
||||
# Spacer tokens
|
||||
|
||||
<CopyTable
|
||||
title="Margin"
|
||||
|
|
@ -1,11 +1,17 @@
|
|||
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';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import color from '$lib/scss/tokens/text/\_color.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontFamily from '$lib/scss/tokens/text/\_font-family.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontSize from '$lib/scss/tokens/text/\_font-size.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontStyle from '$lib/scss/tokens/text/\_font-style.scss?inline';
|
||||
|
||||
|
|
@ -15,6 +21,9 @@ import fontWeight from '$lib/scss/tokens/text/\_font-weight.scss?inline';
|
|||
{/* @ts-ignore */}
|
||||
import letterSpacing from '$lib/scss/tokens/text/\_letter-spacing.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import lineHeight from '$lib/scss/tokens/text/\_line-height.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
|
||||
|
||||
|
|
@ -35,18 +44,34 @@ import wordBreak from '$lib/scss/tokens/text/\_word-break.scss?inline';
|
|||
|
||||
import './styles.scss';
|
||||
|
||||
<Meta title="Styles/Typography/Main" parameters={{ ...parameters }} />
|
||||
<Meta title="Styles/Tokens/Typography" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Typography classes
|
||||
# Typography tokens
|
||||
|
||||
<CopyTable
|
||||
title="Colour"
|
||||
mdnLink="color"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(color, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Font family"
|
||||
mdnLink="font-family"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(fontFamily)}
|
||||
copyable={[true, false]}
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(fontFamily, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Font size"
|
||||
mdnLink="font-size"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(fontSize, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
|
|
@ -60,17 +85,25 @@ import './styles.scss';
|
|||
<CopyTable
|
||||
title="Font weight"
|
||||
mdnLink="font-weight"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(fontWeight)}
|
||||
copyable={[true, false]}
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(fontWeight, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Letter spacing"
|
||||
mdnLink="letter-spacing"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(letterSpacing)}
|
||||
copyable={[true, false]}
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(letterSpacing, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Line height"
|
||||
mdnLink="line-height"
|
||||
header={['Class', 'Include', 'Properties']}
|
||||
body={cssStringToTableArray(lineHeight, true)}
|
||||
copyable={[true, (t) => `@include ${t};`, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
import Gfont from './imgs/gfonts.png';
|
||||
|
||||
<Meta
|
||||
title="Styles/Typography/Adding custom fonts"
|
||||
parameters={{ ...parameters }}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
# Adding custom fonts
|
||||
|
||||
For some projects, you may need to use typefaces other than the defaults provided by the GraphicsKit.
|
||||
|
||||
You will need to:
|
||||
|
||||
- Import the fonts in your code.
|
||||
- Declare the `font-family` in the corresponding CSS variables in the Theme.
|
||||
|
||||
## Importing custom fonts
|
||||
|
||||
There are many ways to load fonts, but care should be taken that the font files load first before page render, to avoid layout shifts during font swapping after the font is downloaded. For this reason, we will use `<link>` method in the page `head` instead of CSS imports.
|
||||
|
||||
In this sample from [Google Fonts](https://fonts.google.com/), once we have selected the font families, copy the `<link>` code.
|
||||
|
||||
<img
|
||||
className="feature"
|
||||
src={Gfont}
|
||||
width="100%"
|
||||
style={{ margin: '3rem 0' }}
|
||||
/>
|
||||
|
||||
In your project, navigate to `Pages` > `layout.svelte` and add the code in `svelte:head` fragment as follows:
|
||||
|
||||
If you don't have the layout file, add it.
|
||||
|
||||
```svelte
|
||||
<svelte:head>
|
||||
<!-- Replace this with your own font url-->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Figtree&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- -->
|
||||
</svelte:head>
|
||||
```
|
||||
|
||||
Similarly, you can add fonts from Adobe Typekit or custom local fonts with the correct paths to the URL.
|
||||
|
||||
## Adding fonts to the theme
|
||||
|
||||
You can customise one or more of the the pre-defined font families in the Theme.
|
||||
|
||||
> Do not directly apply the font family in your CSS. Always use the CSS variables defined in the Theme so that it configures and reflects across the page design.
|
||||
|
||||
```svelte
|
||||
<Theme
|
||||
base="light"
|
||||
theme="{{
|
||||
font: { 'family-sans-serif': 'Figtree', sans-serif },
|
||||
}}"
|
||||
>
|
||||
<!-- Page content -->
|
||||
</Theme>
|
||||
```
|
||||
|
||||
Read more about customising typefaces in the [How to use](/docs/typography-how-to-use--typefaces) section.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 426 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
|
|
@ -1,41 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import Typeset from './imgs/typeset.png';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import TypeGuides from './imgs/type-guides.png';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import DemoImg from './imgs/demo.png';
|
||||
|
||||
<Meta title="Styles/Typography/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Typography
|
||||
|
||||
Our Reuters Graphics components include a basic typography system designed to make it easy to incorporate clean, balanced type styles in your project.
|
||||
|
||||
The typography system includes all the levels of text heirarchy you'll need for graphics pages, including page title, subheads, section titles, body copy, graphic descriptions, captions and other notes.
|
||||
|
||||
<img
|
||||
className="feature"
|
||||
src={DemoImg}
|
||||
width="100%"
|
||||
style={{ margin: '3rem 0' }}
|
||||
/>
|
||||
|
||||
## The type style system
|
||||
|
||||
The typographic scale is based on the scale of fifths to create six harmonic levels of font sizes. These create the sizing for headlines, body text and spacing.
|
||||
|
||||
The typographic scale is set using the CSS variable in the `Theme` component. You can customise it there.
|
||||
|
||||
<img
|
||||
className="feature"
|
||||
src={TypeGuides}
|
||||
width="100%"
|
||||
style={{ margin: '3rem 0' }}
|
||||
/>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import Theme from '../../docs-components/MdxTheme/Theme.jsx';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
<Meta
|
||||
title="Styles/Typography/Using the type system"
|
||||
parameters={{ ...parameters }}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
# Using the type system
|
||||
|
||||
## Type style heirarchy
|
||||
|
||||
The type styles consist of 3 elements: size, typeface and colour. TKTKTK
|
||||
|
||||
## Using type styles
|
||||
|
||||
Type styles are automatically applied to native HTML elements like `h` and `p` tags and to certain combinations of elements that represent specific text components.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<h2>Here's a section title</h2>
|
||||
<p>and some text to go with it...</p>
|
||||
</div>
|
||||
|
||||
<div class="endnote">
|
||||
<p><strong>Editors:</strong> Simon Scarr</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
Apply text styles to any element using CSS classes that correspond to each text element type.
|
||||
|
||||
```html
|
||||
<div class="font-subhed-1">Subhed</div>
|
||||
<p class="font-note-1">Sans-serif text...</p>
|
||||
```
|
||||
|
||||
<Theme>
|
||||
<div className="type-system-demo">
|
||||
<div className="font-subhed-1">Subhed</div>
|
||||
<p className="font-note-1">Sans-serif text...</p>
|
||||
</div>
|
||||
</Theme>
|
||||
|
||||
The following text style elements and corresponding classes are available:
|
||||
|
||||
| Style | class | mixin | CSS vars used from Theme |
|
||||
| ------------- | ---------------- | --------------- | -------------------------------------------------------------------------------------------- |
|
||||
| Page title | `.font-hed` | `font-hed` | `--theme-font-size-hed`, `--theme-font-family-hed` , `--theme-colour-text-primary` |
|
||||
| Section title | `.font-subhed-1` | `font-subhed-1` | `--theme-font-size-subhed-1`, `--theme-font-family-subhed` , `--theme-colour-text-primary` |
|
||||
| Subhed | `.font-subhed-2` | `font-subhed-2` | `--theme-font-size-subhed-2`, `--theme-font-family-subhed` , `--theme-colour-text-primary` |
|
||||
| Smallhed | `.font-subhed-3` | `font-subhed-3` | `--theme-font-size-subhed-3`, `--theme-font-family-subhed` , `--theme-colour-text-secondary` |
|
||||
| Body text | `.font-body` | `font-body` | `--theme-font-size-body`, `--theme-font-family-body` , `--theme-colour-text-primary` |
|
||||
| Body note | `.font-note-1` | `font-note-1` | `--theme-font-size-note-1`, `--theme-font-family-note` , `--theme-colour-text-primary` |
|
||||
| Endnotes | `.font-note-2` | `font-note-2` | `--theme-font-size-note-2`, `--theme-font-family-note` , `--theme-colour-text-secondary` |
|
||||
| Footnotes | `.font-note-3` | `font-note-3` | `--theme-font-size-note-3`, `--theme-font-family-note` , `--theme-colour-text-secondary` |
|
||||
|
||||
<Theme>
|
||||
<div className="type-system-demo">
|
||||
<p className="font-hed">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-subhed-1">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-subhed-2">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-subhed-3">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-body">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-note-1">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-note-2">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-note-3">Lorem ipsum dolor sit amet...</p>
|
||||
</div>
|
||||
</Theme>
|
||||
|
||||
### Type sizes
|
||||
|
||||
The following classes apply specific text sizes to any element:
|
||||
|
||||
| level | class | mixin | CSS vars used from Theme |
|
||||
| ----- | -------------- | ------------- | ------------------------ |
|
||||
| 1 | `.font-size-1` | `font-size-1` | `--theme-scale-size-1` |
|
||||
| 2 | `.font-size-2` | `font-size-2` | `--theme-scale-size-2` |
|
||||
| 3 | `.font-size-3` | `font-size-3` | `--theme-scale-size-3` |
|
||||
| 4 | `.font-size-4` | `font-size-4` | `--theme-scale-size-4` |
|
||||
| 5 | `.font-size-5` | `font-size-5` | `--theme-scale-size-5` |
|
||||
| 6 | `.font-size-6` | `font-size-6` | `--theme-scale-size-6` |
|
||||
|
||||
<Theme>
|
||||
<div className="type-system-demo">
|
||||
<p className="font-size-1">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-size-2">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-size-3">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-size-4">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-size-5">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="font-size-6">Lorem ipsum dolor sit amet...</p>
|
||||
</div>
|
||||
</Theme>
|
||||
|
||||
> The text sizes are always a multiple of `size-base = 1.375`. On mobile
|
||||
> max-width:510px, levels 1, 2, 3, 4 scale down to `size-base-mobile = 1.125`
|
||||
|
||||
### Typefaces
|
||||
|
||||
The following classes apply typefaces to any element:
|
||||
|
||||
| typeface | class | mixin | CSS vars used from Theme |
|
||||
| --------------- | ---------------------- | --------------------- | ----------------------------- |
|
||||
| Display font | `.typeface-display` | `typeface-display` | `--theme-typeface-display` |
|
||||
| Serif font | `.typeface-serif` | `typeface-serif` | `--theme-typeface-serif` |
|
||||
| Sans-serif font | `.typeface-sans-serif` | `typeface-sans-serif` | `--theme-typeface-sans-serif` |
|
||||
| Monospace font | `.typeface-monospace` | `typeface-monospace` | `--theme-typeface-monospace` |
|
||||
|
||||
<Theme>
|
||||
<div className="type-system-demo">
|
||||
<p className="typeface-display">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="typeface-serif">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="typeface-sans-serif">Lorem ipsum dolor sit amet...</p>
|
||||
<p className="typeface-monospace">Lorem ipsum dolor sit amet...</p>
|
||||
</div>
|
||||
</Theme>
|
||||
|
|
@ -2,7 +2,7 @@ import { compileString } from 'sass';
|
|||
import { convert } from '../../../bin/css-to-js/index.js';
|
||||
import { kebabCase } from 'lodash-es';
|
||||
|
||||
export const cssStringToTableArray = (cssString) => {
|
||||
export const cssStringToTableArray = (cssString, withInclude = false) => {
|
||||
const cssObj = convert(compileString(cssString).css);
|
||||
return Object.entries(cssObj).map(([key, value]) => {
|
||||
const className = key.replace(/_/g, '-');
|
||||
|
|
@ -14,7 +14,9 @@ export const cssStringToTableArray = (cssString) => {
|
|||
)};`;
|
||||
})
|
||||
.join('\n');
|
||||
return [className, properties];
|
||||
return withInclude
|
||||
? [className, className, properties]
|
||||
: [className, properties];
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
4
src/scss/_mixins.scss
Normal file
4
src/scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@forward 'mixins/block';
|
||||
@forward 'tokens/accessibility/mixins/main';
|
||||
@forward 'tokens/backgrounds/mixins/main';
|
||||
@forward 'tokens/text/mixins/main';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@use 'border-radius';
|
||||
@use 'border-style';
|
||||
@use 'border-width';
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
// Palettes included by default
|
||||
@use 'primary/grey';
|
||||
@use 'thematic/tr';
|
||||
@forward 'primary/grey';
|
||||
@forward 'thematic/tr';
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@use 'tokens/text/extenders/main' as text;
|
||||
@use 'tokens/spacers/extenders/main' as spacers;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@use 'flex/main';
|
||||
@use 'box-sizing';
|
||||
@use 'display';
|
||||
@use 'floats';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@use 'align-content';
|
||||
@use 'align-items';
|
||||
@use 'align-self';
|
||||
@use 'flex-direction';
|
||||
@use 'flex-grow';
|
||||
@use 'flex-shrink';
|
||||
@use 'flex-wrap';
|
||||
@use 'flex';
|
||||
@use 'justify-content';
|
||||
@use 'justify-items';
|
||||
@use 'justify-self';
|
||||
|
|
@ -6,14 +6,10 @@
|
|||
* Copyright 2023 Reuters Graphics Style Guide
|
||||
*/
|
||||
|
||||
// Reset
|
||||
// Base style rules
|
||||
@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;
|
||||
|
||||
// Token classes
|
||||
@use 'token-classes' as *;
|
||||
|
|
|
|||
1
src/scss/mixins/_main.scss
Normal file
1
src/scss/mixins/_main.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward 'block';
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
6
src/scss/token-classes.scss
Normal file
6
src/scss/token-classes.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@use 'tokens/accessibility/main' as *;
|
||||
@use 'tokens/backgrounds/main' as *;
|
||||
@use 'tokens/borders/main' as *;
|
||||
@use 'tokens/layout/main' as *;
|
||||
@use 'tokens/spacers/main' as *;
|
||||
@use 'tokens/text/main' as *;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@use 'tokens/text/main' as text;
|
||||
@use 'tokens/spacers/main' as spacers;
|
||||
5
src/scss/tokens/accessibility/_visibility.scss
Normal file
5
src/scss/tokens/accessibility/_visibility.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@use 'mixins/visibility' as *;
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
1
src/scss/tokens/accessibility/mixins/_main.scss
Normal file
1
src/scss/tokens/accessibility/mixins/_main.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward 'visibility';
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.visually-hidden {
|
||||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
26
src/scss/tokens/backgrounds/_background-color.scss
Normal file
26
src/scss/tokens/backgrounds/_background-color.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@use 'mixins/background-color' as *;
|
||||
|
||||
.bg {
|
||||
@include bg;
|
||||
}
|
||||
.bg-inherit {
|
||||
@include bg-inherit;
|
||||
}
|
||||
.bg-current {
|
||||
@include bg-current;
|
||||
}
|
||||
.bg-transparent {
|
||||
@include bg-transparent;
|
||||
}
|
||||
.\!bg {
|
||||
@include \!bg;
|
||||
}
|
||||
.\!bg-inherit {
|
||||
@include \!bg-inherit;
|
||||
}
|
||||
.\!bg-current {
|
||||
@include \!bg-current;
|
||||
}
|
||||
.\!bg-transparent {
|
||||
@include \!bg-transparent;
|
||||
}
|
||||
1
src/scss/tokens/backgrounds/_main.scss
Normal file
1
src/scss/tokens/backgrounds/_main.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward 'background-color';
|
||||
24
src/scss/tokens/backgrounds/mixins/_background-color.scss
Normal file
24
src/scss/tokens/backgrounds/mixins/_background-color.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
@mixin bg {
|
||||
background-color: var(--theme-colour-background);
|
||||
}
|
||||
@mixin bg-inherit {
|
||||
background-color: inherit;
|
||||
}
|
||||
@mixin bg-current {
|
||||
background-color: currentColor;
|
||||
}
|
||||
@mixin bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
@mixin \!bg {
|
||||
background-color: var(--theme-colour-background) !important;
|
||||
}
|
||||
@mixin \!bg-inherit {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
@mixin \!bg-current {
|
||||
background-color: currentColor !important;
|
||||
}
|
||||
@mixin \!bg-transparent {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
1
src/scss/tokens/backgrounds/mixins/_main.scss
Normal file
1
src/scss/tokens/backgrounds/mixins/_main.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward 'background-color';
|
||||
3
src/scss/tokens/borders/_main.scss
Normal file
3
src/scss/tokens/borders/_main.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@forward 'border-radius';
|
||||
@forward 'border-style';
|
||||
@forward 'border-width';
|
||||
4
src/scss/tokens/layout/_main.scss
Normal file
4
src/scss/tokens/layout/_main.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@forward 'flex/main';
|
||||
@forward 'box-sizing';
|
||||
@forward 'display';
|
||||
@forward 'floats';
|
||||
11
src/scss/tokens/layout/flex/_main.scss
Normal file
11
src/scss/tokens/layout/flex/_main.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@forward 'align-content';
|
||||
@forward 'align-items';
|
||||
@forward 'align-self';
|
||||
@forward 'flex-direction';
|
||||
@forward 'flex-grow';
|
||||
@forward 'flex-shrink';
|
||||
@forward 'flex-wrap';
|
||||
@forward 'flex';
|
||||
@forward 'justify-content';
|
||||
@forward 'justify-items';
|
||||
@forward 'justify-self';
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
@use 'margin';
|
||||
@use 'padding';
|
||||
@forward 'margin';
|
||||
@forward 'padding';
|
||||
|
|
|
|||
|
|
@ -1,66 +1,84 @@
|
|||
@use 'extenders/margin';
|
||||
$margin-levels: (
|
||||
'0': 0,
|
||||
'1': 1rem,
|
||||
'2': 2rem,
|
||||
'3': 3rem,
|
||||
'4': 4rem,
|
||||
'5': 5rem,
|
||||
'6': 6rem,
|
||||
'7': 7rem,
|
||||
'8': 8rem,
|
||||
);
|
||||
|
||||
@each $level, $value in $margin-levels {
|
||||
.m-#{$level} {
|
||||
@extend %m-#{$level};
|
||||
margin: $value;
|
||||
}
|
||||
.mt-#{$level} {
|
||||
@extend %mt-#{$level};
|
||||
margin-top: $value;
|
||||
}
|
||||
.mr-#{$level} {
|
||||
@extend %mr-#{$level};
|
||||
margin-right: $value;
|
||||
}
|
||||
.mb-#{$level} {
|
||||
@extend %mb-#{$level};
|
||||
margin-bottom: $value;
|
||||
}
|
||||
.ml-#{$level} {
|
||||
@extend %ml-#{$level};
|
||||
margin-left: $value;
|
||||
}
|
||||
.mx-#{$level} {
|
||||
@extend %mx-#{$level};
|
||||
margin-right: $value;
|
||||
margin-left: $value;
|
||||
}
|
||||
.my-#{$level} {
|
||||
@extend %my-#{$level};
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
.\!m-#{$level} {
|
||||
@extend %\!m-#{$level};
|
||||
.\!m-#{$level}\! {
|
||||
margin: $value !important;
|
||||
}
|
||||
.\!mt-#{$level} {
|
||||
@extend %\!mt-#{$level};
|
||||
margin-top: $value !important;
|
||||
}
|
||||
.\!mr-#{$level} {
|
||||
@extend %\!mr-#{$level};
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.\!mb-#{$level} {
|
||||
@extend %\!mb-#{$level};
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.\!ml-#{$level} {
|
||||
@extend %\!ml-#{$level};
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.\!mx-#{$level} {
|
||||
@extend %\!mx-#{$level};
|
||||
margin-right: $value !important;
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.\!my-#{$level} {
|
||||
@extend %\!my-#{$level};
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
@extend %m-auto;
|
||||
margin: auto;
|
||||
}
|
||||
.mx-auto {
|
||||
@extend %mx-auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.my-auto {
|
||||
@extend %my-auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.\!m-auto {
|
||||
@extend %\!m-auto;
|
||||
margin: auto !important;
|
||||
}
|
||||
.\!mx-auto {
|
||||
@extend %\!mx-auto;
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.\!my-auto {
|
||||
@extend %\!my-auto;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,61 @@
|
|||
@use 'extenders/padding';
|
||||
$padding-levels: (
|
||||
'0': 0,
|
||||
'1': 0.5rem,
|
||||
'2': 1rem,
|
||||
'3': 1.75rem,
|
||||
'4': 2.25rem,
|
||||
'5': 3rem,
|
||||
'6': 4rem,
|
||||
'7': 5rem,
|
||||
'8': 6rem,
|
||||
);
|
||||
|
||||
@each $level, $value in $padding-levels {
|
||||
.p-#{$level} {
|
||||
@extend %p-#{$level};
|
||||
padding: $value;
|
||||
}
|
||||
.pt-#{$level} {
|
||||
@extend %pt-#{$level};
|
||||
padding-top: $value;
|
||||
}
|
||||
.pr-#{$level} {
|
||||
@extend %pr-#{$level};
|
||||
padding-right: $value;
|
||||
}
|
||||
.pb-#{$level} {
|
||||
@extend %pb-#{$level};
|
||||
padding-bottom: $value;
|
||||
}
|
||||
.pl-#{$level} {
|
||||
@extend %pl-#{$level};
|
||||
padding-left: $value;
|
||||
}
|
||||
.px-#{$level} {
|
||||
@extend %px-#{$level};
|
||||
padding-right: $value;
|
||||
padding-left: $value;
|
||||
}
|
||||
.py-#{$level} {
|
||||
@extend %py-#{$level};
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
.\!p-#{$level} {
|
||||
@extend %\!p-#{$level};
|
||||
padding: $value !important;
|
||||
}
|
||||
.\!pt-#{$level} {
|
||||
@extend %\!pt-#{$level};
|
||||
padding-top: $value !important;
|
||||
}
|
||||
.\!pr-#{$level} {
|
||||
@extend %\!pr-#{$level};
|
||||
padding-right: $value !important;
|
||||
}
|
||||
.\!pb-#{$level} {
|
||||
@extend %\!pb-#{$level};
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.\!pl-#{$level} {
|
||||
@extend %\!pl-#{$level};
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.\!px-#{$level} {
|
||||
@extend %\!px-#{$level};
|
||||
padding-right: $value !important;
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.\!py-#{$level} {
|
||||
@extend %\!py-#{$level};
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@use 'margin';
|
||||
@use 'padding';
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
$margin-levels: (
|
||||
'0': 0,
|
||||
'1': 1rem,
|
||||
'2': 2rem,
|
||||
'3': 3rem,
|
||||
'4': 4rem,
|
||||
'5': 5rem,
|
||||
'6': 6rem,
|
||||
'7': 7rem,
|
||||
'8': 8rem,
|
||||
);
|
||||
|
||||
@each $level, $value in $margin-levels {
|
||||
%m-#{$level} {
|
||||
margin: $value;
|
||||
}
|
||||
%mt-#{$level} {
|
||||
margin-top: $value;
|
||||
}
|
||||
%mr-#{$level} {
|
||||
margin-right: $value;
|
||||
}
|
||||
%mb-#{$level} {
|
||||
margin-bottom: $value;
|
||||
}
|
||||
%ml-#{$level} {
|
||||
margin-left: $value;
|
||||
}
|
||||
%mx-#{$level} {
|
||||
margin-right: $value;
|
||||
margin-left: $value;
|
||||
}
|
||||
%my-#{$level} {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
%\!m-#{$level} {
|
||||
margin: $value !important;
|
||||
}
|
||||
%\!mt-#{$level} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
%\!mr-#{$level} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
%\!mb-#{$level} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
%\!ml-#{$level} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
%\!mx-#{$level} {
|
||||
margin-right: $value !important;
|
||||
margin-left: $value !important;
|
||||
}
|
||||
%\!my-#{$level} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
%m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
%mx-auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
%my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
%\!m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
%\!mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
%\!my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
$padding-levels: (
|
||||
'0': 0,
|
||||
'1': 0.5rem,
|
||||
'2': 1rem,
|
||||
'3': 1.75rem,
|
||||
'4': 2.25rem,
|
||||
'5': 3rem,
|
||||
'6': 4rem,
|
||||
'7': 5rem,
|
||||
'8': 6rem,
|
||||
);
|
||||
|
||||
@each $level, $value in $padding-levels {
|
||||
%p-#{$level} {
|
||||
padding: $value;
|
||||
}
|
||||
%pt-#{$level} {
|
||||
padding-top: $value;
|
||||
}
|
||||
%pr-#{$level} {
|
||||
padding-right: $value;
|
||||
}
|
||||
%pb-#{$level} {
|
||||
padding-bottom: $value;
|
||||
}
|
||||
%pl-#{$level} {
|
||||
padding-left: $value;
|
||||
}
|
||||
%px-#{$level} {
|
||||
padding-right: $value;
|
||||
padding-left: $value;
|
||||
}
|
||||
%py-#{$level} {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
%\!p-#{$level} {
|
||||
padding: $value !important;
|
||||
}
|
||||
%\!pt-#{$level} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
%\!pr-#{$level} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
%\!pb-#{$level} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
%\!pl-#{$level} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
%\!px-#{$level} {
|
||||
padding-right: $value !important;
|
||||
padding-left: $value !important;
|
||||
}
|
||||
%\!py-#{$level} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
}
|
||||
20
src/scss/tokens/text/_color.scss
Normal file
20
src/scss/tokens/text/_color.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@use 'mixins/color' as *;
|
||||
|
||||
.text-primary {
|
||||
@include text-primary;
|
||||
}
|
||||
.text-secondary {
|
||||
@include text-secondary;
|
||||
}
|
||||
.text-accent {
|
||||
@include text-accent;
|
||||
}
|
||||
.\!text-primary {
|
||||
@include \!text-primary;
|
||||
}
|
||||
.\!text-secondary {
|
||||
@include \!text-secondary;
|
||||
}
|
||||
.\!text-accent {
|
||||
@include \!text-accent;
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
@import 'extenders/font-family';
|
||||
@use 'mixins/font-family' as *;
|
||||
|
||||
.font-serif {
|
||||
@extend %font-serif;
|
||||
@include font-serif;
|
||||
}
|
||||
.font-sans {
|
||||
@extend %font-sans;
|
||||
@include font-sans;
|
||||
}
|
||||
.font-mono {
|
||||
@extend %font-mono;
|
||||
@include font-mono;
|
||||
}
|
||||
.\!font-serif {
|
||||
@extend %\!font-serif;
|
||||
@include \!font-serif;
|
||||
}
|
||||
.\!font-sans {
|
||||
@extend %\!font-sans;
|
||||
@include \!font-sans;
|
||||
}
|
||||
.\!font-mono {
|
||||
@extend %\!font-mono;
|
||||
@include \!font-mono;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,68 @@
|
|||
@use 'extenders/font-size';
|
||||
@use 'mixins/font-size' as *;
|
||||
|
||||
.text-xxs {
|
||||
@extend %text-xxs;
|
||||
@include text-xxs;
|
||||
}
|
||||
.text-xs {
|
||||
@extend %text-xs;
|
||||
@include text-xs;
|
||||
}
|
||||
.text-sm {
|
||||
@extend %text-sm;
|
||||
@include text-sm;
|
||||
}
|
||||
.text-base {
|
||||
@extend %text-base;
|
||||
@include text-base;
|
||||
}
|
||||
.text-lg {
|
||||
@extend %text-lg;
|
||||
@include text-lg;
|
||||
}
|
||||
.text-xl {
|
||||
@extend %text-xl;
|
||||
@include text-xl;
|
||||
}
|
||||
.text-2xl {
|
||||
@extend %text-2xl;
|
||||
@include text-2xl;
|
||||
}
|
||||
.text-3xl {
|
||||
@extend %text-3xl;
|
||||
@include text-3xl;
|
||||
}
|
||||
.text-4xl {
|
||||
@extend %text-4xl;
|
||||
@include text-4xl;
|
||||
}
|
||||
.text-5xl {
|
||||
@extend %text-5xl;
|
||||
@include text-5xl;
|
||||
}
|
||||
.text-6xl {
|
||||
@extend %text-6xl;
|
||||
@include text-6xl;
|
||||
}
|
||||
.\!text-xxs {
|
||||
@extend %\!text-xxs;
|
||||
@include \!text-xxs;
|
||||
}
|
||||
.\!text-xs {
|
||||
@extend %\!text-xs;
|
||||
@include \!text-xs;
|
||||
}
|
||||
.\!text-sm {
|
||||
@extend %\!text-sm;
|
||||
@include \!text-sm;
|
||||
}
|
||||
.\!text-base {
|
||||
@extend %\!text-base;
|
||||
@include \!text-base;
|
||||
}
|
||||
.\!text-lg {
|
||||
@extend %\!text-lg;
|
||||
@include \!text-lg;
|
||||
}
|
||||
.\!text-xl {
|
||||
@extend %\!text-xl;
|
||||
@include \!text-xl;
|
||||
}
|
||||
.\!text-2xl {
|
||||
@extend %\!text-2xl;
|
||||
@include \!text-2xl;
|
||||
}
|
||||
.\!text-3xl {
|
||||
@extend %\!text-3xl;
|
||||
@include \!text-3xl;
|
||||
}
|
||||
.\!text-4xl {
|
||||
@extend %\!text-4xl;
|
||||
@include \!text-4xl;
|
||||
}
|
||||
.\!text-5xl {
|
||||
@extend %\!text-5xl;
|
||||
@include \!text-5xl;
|
||||
}
|
||||
.\!text-6xl {
|
||||
@extend %\!text-6xl;
|
||||
@include \!text-6xl;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
@use 'extenders/font-style';
|
||||
|
||||
.italic {
|
||||
@extend %italic;
|
||||
font-style: italic;
|
||||
}
|
||||
.not-italic {
|
||||
@extend %not-italic;
|
||||
font-style: normal;
|
||||
}
|
||||
.\!italic {
|
||||
@extend %\!italic;
|
||||
font-style: italic !important;
|
||||
}
|
||||
.\!not-italic {
|
||||
@extend %\!not-italic;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
@use 'extenders/font-weight';
|
||||
@use 'mixins/font-weight' as *;
|
||||
|
||||
.font-thin {
|
||||
@extend %font-thin;
|
||||
@include font-thin;
|
||||
}
|
||||
.font-extralight {
|
||||
@extend %font-extralight;
|
||||
@include font-extralight;
|
||||
}
|
||||
.font-light {
|
||||
@extend %font-light;
|
||||
@include font-light;
|
||||
}
|
||||
.font-normal {
|
||||
@extend %font-normal;
|
||||
@include font-normal;
|
||||
}
|
||||
.font-medium {
|
||||
@extend %font-medium;
|
||||
@include font-medium;
|
||||
}
|
||||
.font-semibold {
|
||||
@extend %font-semibold;
|
||||
@include font-semibold;
|
||||
}
|
||||
.font-bold {
|
||||
@extend %font-bold;
|
||||
@include font-bold;
|
||||
}
|
||||
.font-extrabold {
|
||||
@extend %font-extrabold;
|
||||
@include font-extrabold;
|
||||
}
|
||||
.font-black {
|
||||
@extend %font-black;
|
||||
@include font-black;
|
||||
}
|
||||
.\!font-thin {
|
||||
@extend %\!font-thin;
|
||||
@include \!font-thin;
|
||||
}
|
||||
.\!font-extralight {
|
||||
@extend %\!font-extralight;
|
||||
@include \!font-extralight;
|
||||
}
|
||||
.\!font-light {
|
||||
@extend %\!font-light;
|
||||
@include \!font-light;
|
||||
}
|
||||
.\!font-normal {
|
||||
@extend %\!font-normal;
|
||||
@include \!font-normal;
|
||||
}
|
||||
.\!font-medium {
|
||||
@extend %\!font-medium;
|
||||
@include \!font-medium;
|
||||
}
|
||||
.\!font-semibold {
|
||||
@extend %\!font-semibold;
|
||||
@include \!font-semibold;
|
||||
}
|
||||
.\!font-bold {
|
||||
@extend %\!font-bold;
|
||||
@include \!font-bold;
|
||||
}
|
||||
.\!font-extrabold {
|
||||
@extend %\!font-extrabold;
|
||||
@include \!font-extrabold;
|
||||
}
|
||||
.\!font-black {
|
||||
@extend %\!font-black;
|
||||
@include \!font-black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
@use 'extenders/letter-spacing';
|
||||
@use 'mixins/letter-spacing' as *;
|
||||
|
||||
.tracking-tighter {
|
||||
@extend %tracking-tighter;
|
||||
@include tracking-tighter;
|
||||
}
|
||||
.tracking-tight {
|
||||
@extend %tracking-tight;
|
||||
@include tracking-tight;
|
||||
}
|
||||
.tracking-normal {
|
||||
@extend %tracking-normal;
|
||||
@include tracking-normal;
|
||||
}
|
||||
.tracking-wide {
|
||||
@extend %tracking-wide;
|
||||
@include tracking-wide;
|
||||
}
|
||||
.tracking-wider {
|
||||
@extend %tracking-wider;
|
||||
@include tracking-wider;
|
||||
}
|
||||
.tracking-widest {
|
||||
@extend %tracking-widest;
|
||||
@include tracking-widest;
|
||||
}
|
||||
.\!tracking-tighter {
|
||||
@extend %\!tracking-tighter;
|
||||
@include \!tracking-tighter;
|
||||
}
|
||||
.\!tracking-tight {
|
||||
@extend %\!tracking-tight;
|
||||
@include \!tracking-tight;
|
||||
}
|
||||
.\!tracking-normal {
|
||||
@extend %\!tracking-normal;
|
||||
@include \!tracking-normal;
|
||||
}
|
||||
.\!tracking-wide {
|
||||
@extend %\!tracking-wide;
|
||||
@include \!tracking-wide;
|
||||
}
|
||||
.\!tracking-wider {
|
||||
@extend %\!tracking-wider;
|
||||
@include \!tracking-wider;
|
||||
}
|
||||
.\!tracking-widest {
|
||||
@extend %\!tracking-widest;
|
||||
@include \!tracking-widest;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
@use 'extenders/line-height';
|
||||
@use 'mixins/line-height' as *;
|
||||
|
||||
.leading-none {
|
||||
@extend %leading-none;
|
||||
@include leading-none;
|
||||
}
|
||||
.leading-tighter {
|
||||
@extend %leading-tighter;
|
||||
@include leading-tighter;
|
||||
}
|
||||
.leading-tight {
|
||||
@extend %leading-tight;
|
||||
@include leading-tight;
|
||||
}
|
||||
.leading-normal {
|
||||
@extend %leading-normal;
|
||||
@include leading-normal;
|
||||
}
|
||||
.leading-loose {
|
||||
@extend %leading-loose;
|
||||
@include leading-loose;
|
||||
}
|
||||
.leading-looser {
|
||||
@extend %leading-looser;
|
||||
@include leading-looser;
|
||||
}
|
||||
.\!leading-none {
|
||||
@extend %\!leading-none;
|
||||
@include \!leading-none;
|
||||
}
|
||||
.\!leading-tighter {
|
||||
@extend %\!leading-tighter;
|
||||
@include \!leading-tighter;
|
||||
}
|
||||
.\!leading-tight {
|
||||
@extend %\!leading-tight;
|
||||
@include \!leading-tight;
|
||||
}
|
||||
.\!leading-normal {
|
||||
@extend %\!leading-normal;
|
||||
@include \!leading-normal;
|
||||
}
|
||||
.\!leading-loose {
|
||||
@extend %\!leading-loose;
|
||||
@include \!leading-loose;
|
||||
}
|
||||
.\!leading-looser {
|
||||
@extend %\!leading-looser;
|
||||
@include \!leading-looser;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@use 'font-family';
|
||||
@use 'font-size';
|
||||
@use 'font-style';
|
||||
@use 'font-weight';
|
||||
@use 'letter-spacing';
|
||||
@use 'line-height';
|
||||
@use 'text-align';
|
||||
@use 'text-decoration';
|
||||
@use 'text-transform';
|
||||
@use 'vertical-align';
|
||||
@use 'white-space';
|
||||
@use 'word-break';
|
||||
@forward 'color';
|
||||
@forward 'font-family';
|
||||
@forward 'font-size';
|
||||
@forward 'font-style';
|
||||
@forward 'font-weight';
|
||||
@forward 'letter-spacing';
|
||||
@forward 'line-height';
|
||||
@forward 'text-align';
|
||||
@forward 'text-decoration';
|
||||
@forward 'text-transform';
|
||||
@forward 'vertical-align';
|
||||
@forward 'white-space';
|
||||
@forward 'word-break';
|
||||
|
|
|
|||
|
|
@ -1,38 +1,36 @@
|
|||
@use 'extenders/text-align';
|
||||
|
||||
.text-left {
|
||||
@extend %text-left;
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
@extend %text-center;
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
@extend %text-right;
|
||||
text-align: right;
|
||||
}
|
||||
.text-justify {
|
||||
@extend %text-justify;
|
||||
text-align: justify;
|
||||
}
|
||||
.text-start {
|
||||
@extend %text-start;
|
||||
text-align: start;
|
||||
}
|
||||
.text-end {
|
||||
@extend %text-end;
|
||||
text-align: end !important;
|
||||
}
|
||||
.\!text-left {
|
||||
@extend %\!text-left;
|
||||
text-align: left !important;
|
||||
}
|
||||
.\!text-center {
|
||||
@extend %\!text-center;
|
||||
text-align: center !important;
|
||||
}
|
||||
.\!text-right {
|
||||
@extend %\!text-right;
|
||||
text-align: right !important;
|
||||
}
|
||||
.\!text-justify {
|
||||
@extend %\!text-justify;
|
||||
text-align: justify !important;
|
||||
}
|
||||
.\!text-start {
|
||||
@extend %\!text-start;
|
||||
text-align: start !important;
|
||||
}
|
||||
.\!text-end {
|
||||
@extend %\!text-end;
|
||||
text-align: end !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,24 @@
|
|||
@use 'extenders/text-decoration';
|
||||
|
||||
.underline {
|
||||
@extend %underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.overline {
|
||||
@extend %overline;
|
||||
text-decoration-line: overline;
|
||||
}
|
||||
.line-through {
|
||||
@extend %line-through;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
.no-underline {
|
||||
@extend %no-underline;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
.\!underline {
|
||||
@extend %\!underline;
|
||||
text-decoration-line: underline !important;
|
||||
}
|
||||
.\!overline {
|
||||
@extend %\!overline;
|
||||
text-decoration-line: overline !important;
|
||||
}
|
||||
.\!line-through {
|
||||
@extend %\!line-through;
|
||||
text-decoration-line: line-through !important;
|
||||
}
|
||||
.\!no-underline {
|
||||
@extend %\!no-underline;
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
@use 'extenders/text-transform';
|
||||
|
||||
.uppercase {
|
||||
@extend %uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.lowercase {
|
||||
@extend %lowercase;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.\!uppercase {
|
||||
@extend %\!uppercase;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
.\!lowercase {
|
||||
@extend %\!lowercase;
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,48 @@
|
|||
@use 'extenders/vertical-align';
|
||||
|
||||
.align-baseline {
|
||||
@extend %align-baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.align-top {
|
||||
@extend %align-top;
|
||||
vertical-align: top;
|
||||
}
|
||||
.align-middle {
|
||||
@extend %align-middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.align-bottom {
|
||||
@extend %align-bottom;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.align-text-top {
|
||||
@extend %align-text-top;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.align-text-bottom {
|
||||
@extend %align-text-bottom;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.align-sub {
|
||||
@extend %align-sub;
|
||||
vertical-align: sub;
|
||||
}
|
||||
.align-super {
|
||||
@extend %align-super;
|
||||
vertical-align: super;
|
||||
}
|
||||
.\!align-baseline {
|
||||
@extend %\!align-baseline;
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
.\!align-top {
|
||||
@extend %\!align-top;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
.\!align-middle {
|
||||
@extend %\!align-middle;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.\!align-bottom {
|
||||
@extend %\!align-bottom;
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
.\!align-text-top {
|
||||
@extend %\!align-text-top;
|
||||
vertical-align: text-top !important;
|
||||
}
|
||||
.\!align-text-bottom {
|
||||
@extend %\!align-text-bottom;
|
||||
vertical-align: text-bottom !important;
|
||||
}
|
||||
.\!align-sub {
|
||||
@extend %\!align-sub;
|
||||
vertical-align: sub !important;
|
||||
}
|
||||
.\!align-super {
|
||||
@extend %\!align-super;
|
||||
vertical-align: super !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
@use 'extenders/white-space';
|
||||
|
||||
.whitespace-normal {
|
||||
@extend %whitespace-normal;
|
||||
white-space: normal;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
@extend %whitespace-nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.\!whitespace-normal {
|
||||
@extend %\!whitespace-normal;
|
||||
white-space: normal !important;
|
||||
}
|
||||
.\!whitespace-nowrap {
|
||||
@extend %\!whitespace-nowrap;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@use 'extenders/word-break';
|
||||
|
||||
.break-normal {
|
||||
@extend %break-normal;
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
.break-words {
|
||||
@extend %break-words;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.\!break-normal {
|
||||
@extend %\!break-normal;
|
||||
overflow-wrap: normal !important;
|
||||
word-break: normal !important;
|
||||
}
|
||||
.\!break-words {
|
||||
@extend %\!break-words;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
%italic {
|
||||
font-style: italic;
|
||||
}
|
||||
%not-italic {
|
||||
font-style: normal;
|
||||
}
|
||||
%\!italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
%\!not-italic {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@use 'font-family';
|
||||
@use 'font-size';
|
||||
@use 'font-style';
|
||||
@use 'font-weight';
|
||||
@use 'letter-spacing';
|
||||
@use 'line-height';
|
||||
@use 'text-align';
|
||||
@use 'text-decoration';
|
||||
@use 'text-transform';
|
||||
@use 'vertical-align';
|
||||
@use 'white-space';
|
||||
@use 'word-break';
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
%text-left {
|
||||
text-align: left;
|
||||
}
|
||||
%text-center {
|
||||
text-align: center;
|
||||
}
|
||||
%text-right {
|
||||
text-align: right;
|
||||
}
|
||||
%text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
%text-start {
|
||||
text-align: start;
|
||||
}
|
||||
%text-end {
|
||||
text-align: end !important;
|
||||
}
|
||||
%\!text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
%\!text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
%\!text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
%\!text-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
%\!text-start {
|
||||
text-align: start !important;
|
||||
}
|
||||
%\!text-end {
|
||||
text-align: end !important;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
%underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
%overline {
|
||||
text-decoration-line: overline;
|
||||
}
|
||||
%line-through {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
%no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
%\!underline {
|
||||
text-decoration-line: underline !important;
|
||||
}
|
||||
%\!overline {
|
||||
text-decoration-line: overline !important;
|
||||
}
|
||||
%\!line-through {
|
||||
text-decoration-line: line-through !important;
|
||||
}
|
||||
%\!no-underline {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
%uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
%lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
%\!uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
%\!lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
%align-baseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
%align-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
%align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
%align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
%align-text-top {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
%align-text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
%align-sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
%align-super {
|
||||
vertical-align: super;
|
||||
}
|
||||
%\!align-baseline {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
%\!align-top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
%\!align-middle {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
%\!align-bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
%\!align-text-top {
|
||||
vertical-align: text-top !important;
|
||||
}
|
||||
%\!align-text-bottom {
|
||||
vertical-align: text-bottom !important;
|
||||
}
|
||||
%\!align-sub {
|
||||
vertical-align: sub !important;
|
||||
}
|
||||
%\!align-super {
|
||||
vertical-align: super !important;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
%whitespace-normal {
|
||||
white-space: normal;
|
||||
}
|
||||
%whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
%\!whitespace-normal {
|
||||
white-space: normal !important;
|
||||
}
|
||||
%\!whitespace-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
%break-normal {
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
%break-words {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
%\!break-normal {
|
||||
overflow-wrap: normal !important;
|
||||
word-break: normal !important;
|
||||
}
|
||||
%\!break-words {
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
18
src/scss/tokens/text/mixins/_color.scss
Normal file
18
src/scss/tokens/text/mixins/_color.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@mixin text-primary {
|
||||
color: var(--theme-colour-text-primary);
|
||||
}
|
||||
@mixin text-secondary {
|
||||
color: var(--theme-colour-text-secondary);
|
||||
}
|
||||
@mixin text-accent {
|
||||
color: var(--theme-colour-accent);
|
||||
}
|
||||
@mixin \!text-primary {
|
||||
color: var(--theme-colour-text-primary) !important;
|
||||
}
|
||||
@mixin \!text-secondary {
|
||||
color: var(--theme-colour-text-secondary) !important;
|
||||
}
|
||||
@mixin \!text-accent {
|
||||
color: var(--theme-colour-accent) !important;
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
%font-serif {
|
||||
@mixin font-serif {
|
||||
font-family: var(--theme-font-family-serif);
|
||||
}
|
||||
%font-sans {
|
||||
@mixin font-sans {
|
||||
font-family: var(--theme-font-family-sans-serif);
|
||||
}
|
||||
%font-mono {
|
||||
@mixin font-mono {
|
||||
font-family: var(--theme-font-family-monospace);
|
||||
}
|
||||
%\!font-serif {
|
||||
@mixin \!font-serif {
|
||||
font-family: var(--theme-font-family-serif) !important;
|
||||
}
|
||||
%\!font-sans {
|
||||
@mixin \!font-sans {
|
||||
font-family: var(--theme-font-family-sans-serif) !important;
|
||||
}
|
||||
%\!font-mono {
|
||||
@mixin \!font-mono {
|
||||
font-family: var(--theme-font-family-monospace) !important;
|
||||
}
|
||||
|
|
@ -1,66 +1,66 @@
|
|||
%text-xxs {
|
||||
@mixin text-xxs {
|
||||
font-size: var(--theme-font-size-xxs);
|
||||
}
|
||||
%text-xs {
|
||||
@mixin text-xs {
|
||||
font-size: var(--theme-font-size-xs);
|
||||
}
|
||||
%text-sm {
|
||||
@mixin text-sm {
|
||||
font-size: var(--theme-font-size-sm);
|
||||
}
|
||||
%text-base {
|
||||
@mixin text-base {
|
||||
font-size: var(--theme-font-size-base);
|
||||
}
|
||||
%text-lg {
|
||||
@mixin text-lg {
|
||||
font-size: var(--theme-font-size-lg);
|
||||
}
|
||||
%text-xl {
|
||||
@mixin text-xl {
|
||||
font-size: var(--theme-font-size-xl);
|
||||
}
|
||||
%text-2xl {
|
||||
@mixin text-2xl {
|
||||
font-size: var(--theme-font-size-2xl);
|
||||
}
|
||||
%text-3xl {
|
||||
@mixin text-3xl {
|
||||
font-size: var(--theme-font-size-3xl);
|
||||
}
|
||||
%text-4xl {
|
||||
@mixin text-4xl {
|
||||
font-size: var(--theme-font-size-4xl);
|
||||
}
|
||||
%text-5xl {
|
||||
@mixin text-5xl {
|
||||
font-size: var(--theme-font-size-5xl);
|
||||
}
|
||||
%text-6xl {
|
||||
@mixin text-6xl {
|
||||
font-size: var(--theme-font-size-6xl);
|
||||
}
|
||||
%\!text-xxs {
|
||||
@mixin \!text-xxs {
|
||||
font-size: var(--theme-font-size-xxs) !important;
|
||||
}
|
||||
%\!text-xs {
|
||||
@mixin \!text-xs {
|
||||
font-size: var(--theme-font-size-xs) !important;
|
||||
}
|
||||
%\!text-sm {
|
||||
@mixin \!text-sm {
|
||||
font-size: var(--theme-font-size-sm) !important;
|
||||
}
|
||||
%\!text-base {
|
||||
@mixin \!text-base {
|
||||
font-size: var(--theme-font-size-base) !important;
|
||||
}
|
||||
%\!text-lg {
|
||||
@mixin \!text-lg {
|
||||
font-size: var(--theme-font-size-lg) !important;
|
||||
}
|
||||
%\!text-xl {
|
||||
@mixin \!text-xl {
|
||||
font-size: var(--theme-font-size-xl) !important;
|
||||
}
|
||||
%\!text-2xl {
|
||||
@mixin \!text-2xl {
|
||||
font-size: var(--theme-font-size-2xl) !important;
|
||||
}
|
||||
%\!text-3xl {
|
||||
@mixin \!text-3xl {
|
||||
font-size: var(--theme-font-size-3xl) !important;
|
||||
}
|
||||
%\!text-4xl {
|
||||
@mixin \!text-4xl {
|
||||
font-size: var(--theme-font-size-4xl) !important;
|
||||
}
|
||||
%\!text-5xl {
|
||||
@mixin \!text-5xl {
|
||||
font-size: var(--theme-font-size-5xl) !important;
|
||||
}
|
||||
%\!text-6xl {
|
||||
@mixin \!text-6xl {
|
||||
font-size: var(--theme-font-size-6xl) !important;
|
||||
}
|
||||
|
|
@ -1,54 +1,54 @@
|
|||
%font-thin {
|
||||
@mixin font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
%font-extralight {
|
||||
@mixin font-extralight {
|
||||
font-weight: 200;
|
||||
}
|
||||
%font-light {
|
||||
@mixin font-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
%font-normal {
|
||||
@mixin font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
%font-medium {
|
||||
@mixin font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
%font-semibold {
|
||||
@mixin font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
%font-bold {
|
||||
@mixin font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
%font-extrabold {
|
||||
@mixin font-extrabold {
|
||||
font-weight: 800;
|
||||
}
|
||||
%font-black {
|
||||
@mixin font-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
%\!font-thin {
|
||||
@mixin \!font-thin {
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
%\!font-extralight {
|
||||
@mixin \!font-extralight {
|
||||
font-weight: 200 !important;
|
||||
}
|
||||
%\!font-light {
|
||||
@mixin \!font-light {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
%\!font-normal {
|
||||
@mixin \!font-normal {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
%\!font-medium {
|
||||
@mixin \!font-medium {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
%\!font-semibold {
|
||||
@mixin \!font-semibold {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
%\!font-bold {
|
||||
@mixin \!font-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
%\!font-extrabold {
|
||||
@mixin \!font-extrabold {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
%\!font-black {
|
||||
@mixin \!font-black {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
%tracking-tighter {
|
||||
@mixin tracking-tighter {
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
%tracking-tight {
|
||||
@mixin tracking-tight {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
%tracking-normal {
|
||||
@mixin tracking-normal {
|
||||
letter-spacing: 0em;
|
||||
}
|
||||
%tracking-wide {
|
||||
@mixin tracking-wide {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
%tracking-wider {
|
||||
@mixin tracking-wider {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
%tracking-widest {
|
||||
@mixin tracking-widest {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
%\!tracking-tighter {
|
||||
@mixin \!tracking-tighter {
|
||||
letter-spacing: -0.05em !important;
|
||||
}
|
||||
%\!tracking-tight {
|
||||
@mixin \!tracking-tight {
|
||||
letter-spacing: -0.025em !important;
|
||||
}
|
||||
%\!tracking-normal {
|
||||
@mixin \!tracking-normal {
|
||||
letter-spacing: 0em !important;
|
||||
}
|
||||
%\!tracking-wide {
|
||||
@mixin \!tracking-wide {
|
||||
letter-spacing: 0.025em !important;
|
||||
}
|
||||
%\!tracking-wider {
|
||||
@mixin \!tracking-wider {
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
%\!tracking-widest {
|
||||
@mixin \!tracking-widest {
|
||||
letter-spacing: 0.1em !important;
|
||||
}
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
%leading-none {
|
||||
@mixin leading-none {
|
||||
line-height: 1;
|
||||
}
|
||||
%leading-tighter {
|
||||
@mixin leading-tighter {
|
||||
line-height: 1.125;
|
||||
}
|
||||
%leading-tight {
|
||||
@mixin leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
%leading-normal {
|
||||
@mixin leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
%leading-loose {
|
||||
@mixin leading-loose {
|
||||
line-height: 1.75;
|
||||
}
|
||||
%leading-looser {
|
||||
@mixin leading-looser {
|
||||
line-height: 1.875;
|
||||
}
|
||||
%\!leading-none {
|
||||
@mixin \!leading-none {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
%\!leading-tighter {
|
||||
@mixin \!leading-tighter {
|
||||
line-height: 1.125 !important;
|
||||
}
|
||||
%\!leading-tight {
|
||||
@mixin \!leading-tight {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
%\!leading-normal {
|
||||
@mixin \!leading-normal {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
%\!leading-loose {
|
||||
@mixin \!leading-loose {
|
||||
line-height: 1.75 !important;
|
||||
}
|
||||
%\!leading-looser {
|
||||
@mixin \!leading-looser {
|
||||
line-height: 1.875 !important;
|
||||
}
|
||||
6
src/scss/tokens/text/mixins/_main.scss
Normal file
6
src/scss/tokens/text/mixins/_main.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@forward 'color';
|
||||
@forward 'font-family';
|
||||
@forward 'font-size';
|
||||
@forward 'font-weight';
|
||||
@forward 'letter-spacing';
|
||||
@forward 'line-height';
|
||||
Loading…
Reference in a new issue