diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 4658f565..aa5a0770 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -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', '*'], diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte index c73e8e82..ac89abf2 100644 --- a/src/components/Headline/Headline.svelte +++ b/src/components/Headline/Headline.svelte @@ -69,8 +69,8 @@ diff --git a/src/docs/scss/css-variables.stories.mdx b/src/docs/scss/css-variables.stories.mdx deleted file mode 100644 index 7f40fe47..00000000 --- a/src/docs/scss/css-variables.stories.mdx +++ /dev/null @@ -1,52 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import { parameters } from '$docs/utils/docsPage.js'; - - - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# 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 -

My custom text

- - -``` - -## 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 | diff --git a/src/docs/styles/tokens/accessibility/main.stories.mdx b/src/docs/styles/tokens/accessibility/main.stories.mdx new file mode 100644 index 00000000..2011d281 --- /dev/null +++ b/src/docs/styles/tokens/accessibility/main.stories.mdx @@ -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'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Accessibility tokens + + `@include ${t};`, false]} +/> diff --git a/src/docs/styles/tokens/backgrounds/main.stories.mdx b/src/docs/styles/tokens/backgrounds/main.stories.mdx new file mode 100644 index 00000000..ab1c27dc --- /dev/null +++ b/src/docs/styles/tokens/backgrounds/main.stories.mdx @@ -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'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Background tokens + + `@include ${t};`, false]} +/> diff --git a/src/docs/styles/borders/main.stories.mdx b/src/docs/styles/tokens/borders/main.stories.mdx similarity index 65% rename from src/docs/styles/borders/main.stories.mdx rename to src/docs/styles/tokens/borders/main.stories.mdx index b3f91907..85195093 100644 --- a/src/docs/styles/borders/main.stories.mdx +++ b/src/docs/styles/tokens/borders/main.stories.mdx @@ -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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) -# Border classes +# Border tokens + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Style tokens + +TK... diff --git a/src/docs/styles/layout/flexbox.stories.mdx b/src/docs/styles/tokens/layout/flexbox.stories.mdx similarity index 70% rename from src/docs/styles/layout/flexbox.stories.mdx rename to src/docs/styles/tokens/layout/flexbox.stories.mdx index 17890dd9..a88522ee 100644 --- a/src/docs/styles/layout/flexbox.stories.mdx +++ b/src/docs/styles/tokens/layout/flexbox.stories.mdx @@ -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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) -# 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/). diff --git a/src/docs/styles/layout/main.stories.mdx b/src/docs/styles/tokens/layout/main.stories.mdx similarity index 63% rename from src/docs/styles/layout/main.stories.mdx rename to src/docs/styles/tokens/layout/main.stories.mdx index 0fe6b4a4..c1fee5e9 100644 --- a/src/docs/styles/layout/main.stories.mdx +++ b/src/docs/styles/tokens/layout/main.stories.mdx @@ -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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) -# Layout classes +# Layout tokens + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) -# Spacer classes +# Spacer tokens + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) -# Typography classes +# Typography tokens + + `@include ${t};`, false]} +/> `@include ${t};`, false]} +/> + + `@include ${t};`, false]} /> `@include ${t};`, false]} /> `@include ${t};`, false]} +/> + + `@include ${t};`, false]} /> - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# 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 `` 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 `` code. - - - -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 - - - - - - - -``` - -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 - - - -``` - -Read more about customising typefaces in the [How to use](/docs/typography-how-to-use--typefaces) section. diff --git a/src/docs/styles/typography/imgs/demo.png b/src/docs/styles/typography/imgs/demo.png deleted file mode 100644 index 4c33e4a8..00000000 Binary files a/src/docs/styles/typography/imgs/demo.png and /dev/null differ diff --git a/src/docs/styles/typography/imgs/gfonts.png b/src/docs/styles/typography/imgs/gfonts.png deleted file mode 100644 index 65849c82..00000000 Binary files a/src/docs/styles/typography/imgs/gfonts.png and /dev/null differ diff --git a/src/docs/styles/typography/imgs/type-guides.png b/src/docs/styles/typography/imgs/type-guides.png deleted file mode 100644 index 236cc7d7..00000000 Binary files a/src/docs/styles/typography/imgs/type-guides.png and /dev/null differ diff --git a/src/docs/styles/typography/imgs/typeset.png b/src/docs/styles/typography/imgs/typeset.png deleted file mode 100644 index e7cd98bc..00000000 Binary files a/src/docs/styles/typography/imgs/typeset.png and /dev/null differ diff --git a/src/docs/styles/typography/intro.stories.mdx b/src/docs/styles/typography/intro.stories.mdx deleted file mode 100644 index eef451fe..00000000 --- a/src/docs/styles/typography/intro.stories.mdx +++ /dev/null @@ -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'; - - - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# 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. - - - -## 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. - - diff --git a/src/docs/styles/typography/using-the-system.stories.mdx b/src/docs/styles/typography/using-the-system.stories.mdx deleted file mode 100644 index 874cbc74..00000000 --- a/src/docs/styles/typography/using-the-system.stories.mdx +++ /dev/null @@ -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'; - - - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# 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 -
-

Here's a section title

-

and some text to go with it...

-
- -
-

Editors: Simon Scarr

-
-``` - -Apply text styles to any element using CSS classes that correspond to each text element type. - -```html -
Subhed
-

Sans-serif text...

-``` - - -
-
Subhed
-

Sans-serif text...

-
- - -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` | - - -
-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-
- - -### 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` | - - -
-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-
- - -> 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` | - - -
-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-

Lorem ipsum dolor sit amet...

-
- diff --git a/src/docs/utils/parseCss.js b/src/docs/utils/parseCss.js index f450b091..13658a5d 100644 --- a/src/docs/utils/parseCss.js +++ b/src/docs/utils/parseCss.js @@ -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]; }); }; diff --git a/src/scss/mixins/_body-text.scss b/src/scss/_TO-DEPRECATE/_body-text.scss similarity index 100% rename from src/scss/mixins/_body-text.scss rename to src/scss/_TO-DEPRECATE/_body-text.scss diff --git a/src/scss/mixins/_graphic.scss b/src/scss/_TO-DEPRECATE/_graphic.scss similarity index 100% rename from src/scss/mixins/_graphic.scss rename to src/scss/_TO-DEPRECATE/_graphic.scss diff --git a/src/scss/mixins/_note-text.scss b/src/scss/_TO-DEPRECATE/_note-text.scss similarity index 100% rename from src/scss/mixins/_note-text.scss rename to src/scss/_TO-DEPRECATE/_note-text.scss diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss new file mode 100644 index 00000000..553b5842 --- /dev/null +++ b/src/scss/_mixins.scss @@ -0,0 +1,4 @@ +@forward 'mixins/block'; +@forward 'tokens/accessibility/mixins/main'; +@forward 'tokens/backgrounds/mixins/main'; +@forward 'tokens/text/mixins/main'; diff --git a/src/scss/borders/_main.scss b/src/scss/borders/_main.scss deleted file mode 100644 index 7878edc4..00000000 --- a/src/scss/borders/_main.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use 'border-radius'; -@use 'border-style'; -@use 'border-width'; diff --git a/src/scss/colours/_main.scss b/src/scss/colours/_main.scss index 5ec4bef3..4d61793a 100644 --- a/src/scss/colours/_main.scss +++ b/src/scss/colours/_main.scss @@ -1,3 +1,3 @@ // Palettes included by default -@use 'primary/grey'; -@use 'thematic/tr'; +@forward 'primary/grey'; +@forward 'thematic/tr'; diff --git a/src/scss/extenders.scss b/src/scss/extenders.scss deleted file mode 100644 index 80efe8af..00000000 --- a/src/scss/extenders.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'tokens/text/extenders/main' as text; -@use 'tokens/spacers/extenders/main' as spacers; diff --git a/src/scss/layout/_main.scss b/src/scss/layout/_main.scss deleted file mode 100644 index 3167f571..00000000 --- a/src/scss/layout/_main.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use 'flex/main'; -@use 'box-sizing'; -@use 'display'; -@use 'floats'; diff --git a/src/scss/layout/flex/_main.scss b/src/scss/layout/flex/_main.scss deleted file mode 100644 index 50f0fcab..00000000 --- a/src/scss/layout/flex/_main.scss +++ /dev/null @@ -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'; diff --git a/src/scss/main.scss b/src/scss/main.scss index 7f333eb2..e861c576 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -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 *; diff --git a/src/scss/mixins/_main.scss b/src/scss/mixins/_main.scss new file mode 100644 index 00000000..11fadb04 --- /dev/null +++ b/src/scss/mixins/_main.scss @@ -0,0 +1 @@ +@forward 'block'; diff --git a/src/scss/mixins/_visually-hidden.scss b/src/scss/mixins/_visually-hidden.scss deleted file mode 100644 index ce731d1c..00000000 --- a/src/scss/mixins/_visually-hidden.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/scss/token-classes.scss b/src/scss/token-classes.scss new file mode 100644 index 00000000..23c271c9 --- /dev/null +++ b/src/scss/token-classes.scss @@ -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 *; diff --git a/src/scss/tokens.scss b/src/scss/tokens.scss deleted file mode 100644 index 0c5b3e2d..00000000 --- a/src/scss/tokens.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'tokens/text/main' as text; -@use 'tokens/spacers/main' as spacers; diff --git a/src/scss/accessibility/_main.scss b/src/scss/tokens/accessibility/_main.scss similarity index 100% rename from src/scss/accessibility/_main.scss rename to src/scss/tokens/accessibility/_main.scss diff --git a/src/scss/tokens/accessibility/_visibility.scss b/src/scss/tokens/accessibility/_visibility.scss new file mode 100644 index 00000000..cab8ce4f --- /dev/null +++ b/src/scss/tokens/accessibility/_visibility.scss @@ -0,0 +1,5 @@ +@use 'mixins/visibility' as *; + +.visually-hidden { + @include visually-hidden; +} diff --git a/src/scss/tokens/accessibility/mixins/_main.scss b/src/scss/tokens/accessibility/mixins/_main.scss new file mode 100644 index 00000000..d9704ee9 --- /dev/null +++ b/src/scss/tokens/accessibility/mixins/_main.scss @@ -0,0 +1 @@ +@forward 'visibility'; diff --git a/src/scss/accessibility/_visibility.scss b/src/scss/tokens/accessibility/mixins/_visibility.scss similarity index 91% rename from src/scss/accessibility/_visibility.scss rename to src/scss/tokens/accessibility/mixins/_visibility.scss index e7d7092b..d1ee53fe 100644 --- a/src/scss/accessibility/_visibility.scss +++ b/src/scss/tokens/accessibility/mixins/_visibility.scss @@ -1,4 +1,4 @@ -.visually-hidden { +@mixin visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; diff --git a/src/scss/tokens/backgrounds/_background-color.scss b/src/scss/tokens/backgrounds/_background-color.scss new file mode 100644 index 00000000..e5a59ab0 --- /dev/null +++ b/src/scss/tokens/backgrounds/_background-color.scss @@ -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; +} diff --git a/src/scss/tokens/backgrounds/_main.scss b/src/scss/tokens/backgrounds/_main.scss new file mode 100644 index 00000000..6f771ca6 --- /dev/null +++ b/src/scss/tokens/backgrounds/_main.scss @@ -0,0 +1 @@ +@forward 'background-color'; diff --git a/src/scss/tokens/backgrounds/mixins/_background-color.scss b/src/scss/tokens/backgrounds/mixins/_background-color.scss new file mode 100644 index 00000000..3b1a2077 --- /dev/null +++ b/src/scss/tokens/backgrounds/mixins/_background-color.scss @@ -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; +} diff --git a/src/scss/tokens/backgrounds/mixins/_main.scss b/src/scss/tokens/backgrounds/mixins/_main.scss new file mode 100644 index 00000000..6f771ca6 --- /dev/null +++ b/src/scss/tokens/backgrounds/mixins/_main.scss @@ -0,0 +1 @@ +@forward 'background-color'; diff --git a/src/scss/borders/_border-color.scss b/src/scss/tokens/borders/_border-color.scss similarity index 100% rename from src/scss/borders/_border-color.scss rename to src/scss/tokens/borders/_border-color.scss diff --git a/src/scss/borders/_border-radius.scss b/src/scss/tokens/borders/_border-radius.scss similarity index 100% rename from src/scss/borders/_border-radius.scss rename to src/scss/tokens/borders/_border-radius.scss diff --git a/src/scss/borders/_border-style.scss b/src/scss/tokens/borders/_border-style.scss similarity index 100% rename from src/scss/borders/_border-style.scss rename to src/scss/tokens/borders/_border-style.scss diff --git a/src/scss/borders/_border-width.scss b/src/scss/tokens/borders/_border-width.scss similarity index 100% rename from src/scss/borders/_border-width.scss rename to src/scss/tokens/borders/_border-width.scss diff --git a/src/scss/tokens/borders/_main.scss b/src/scss/tokens/borders/_main.scss new file mode 100644 index 00000000..8c577291 --- /dev/null +++ b/src/scss/tokens/borders/_main.scss @@ -0,0 +1,3 @@ +@forward 'border-radius'; +@forward 'border-style'; +@forward 'border-width'; diff --git a/src/scss/layout/_box-sizing.scss b/src/scss/tokens/layout/_box-sizing.scss similarity index 100% rename from src/scss/layout/_box-sizing.scss rename to src/scss/tokens/layout/_box-sizing.scss diff --git a/src/scss/layout/_display.scss b/src/scss/tokens/layout/_display.scss similarity index 100% rename from src/scss/layout/_display.scss rename to src/scss/tokens/layout/_display.scss diff --git a/src/scss/layout/_floats.scss b/src/scss/tokens/layout/_floats.scss similarity index 100% rename from src/scss/layout/_floats.scss rename to src/scss/tokens/layout/_floats.scss diff --git a/src/scss/tokens/layout/_main.scss b/src/scss/tokens/layout/_main.scss new file mode 100644 index 00000000..ff48d7e1 --- /dev/null +++ b/src/scss/tokens/layout/_main.scss @@ -0,0 +1,4 @@ +@forward 'flex/main'; +@forward 'box-sizing'; +@forward 'display'; +@forward 'floats'; diff --git a/src/scss/layout/flex/_align-content.scss b/src/scss/tokens/layout/flex/_align-content.scss similarity index 100% rename from src/scss/layout/flex/_align-content.scss rename to src/scss/tokens/layout/flex/_align-content.scss diff --git a/src/scss/layout/flex/_align-items.scss b/src/scss/tokens/layout/flex/_align-items.scss similarity index 100% rename from src/scss/layout/flex/_align-items.scss rename to src/scss/tokens/layout/flex/_align-items.scss diff --git a/src/scss/layout/flex/_align-self.scss b/src/scss/tokens/layout/flex/_align-self.scss similarity index 100% rename from src/scss/layout/flex/_align-self.scss rename to src/scss/tokens/layout/flex/_align-self.scss diff --git a/src/scss/layout/flex/_flex-direction.scss b/src/scss/tokens/layout/flex/_flex-direction.scss similarity index 100% rename from src/scss/layout/flex/_flex-direction.scss rename to src/scss/tokens/layout/flex/_flex-direction.scss diff --git a/src/scss/layout/flex/_flex-grow.scss b/src/scss/tokens/layout/flex/_flex-grow.scss similarity index 100% rename from src/scss/layout/flex/_flex-grow.scss rename to src/scss/tokens/layout/flex/_flex-grow.scss diff --git a/src/scss/layout/flex/_flex-shrink.scss b/src/scss/tokens/layout/flex/_flex-shrink.scss similarity index 100% rename from src/scss/layout/flex/_flex-shrink.scss rename to src/scss/tokens/layout/flex/_flex-shrink.scss diff --git a/src/scss/layout/flex/_flex-wrap.scss b/src/scss/tokens/layout/flex/_flex-wrap.scss similarity index 100% rename from src/scss/layout/flex/_flex-wrap.scss rename to src/scss/tokens/layout/flex/_flex-wrap.scss diff --git a/src/scss/layout/flex/_flex.scss b/src/scss/tokens/layout/flex/_flex.scss similarity index 100% rename from src/scss/layout/flex/_flex.scss rename to src/scss/tokens/layout/flex/_flex.scss diff --git a/src/scss/layout/flex/_justify-content.scss b/src/scss/tokens/layout/flex/_justify-content.scss similarity index 100% rename from src/scss/layout/flex/_justify-content.scss rename to src/scss/tokens/layout/flex/_justify-content.scss diff --git a/src/scss/layout/flex/_justify-items.scss b/src/scss/tokens/layout/flex/_justify-items.scss similarity index 100% rename from src/scss/layout/flex/_justify-items.scss rename to src/scss/tokens/layout/flex/_justify-items.scss diff --git a/src/scss/layout/flex/_justify-self.scss b/src/scss/tokens/layout/flex/_justify-self.scss similarity index 100% rename from src/scss/layout/flex/_justify-self.scss rename to src/scss/tokens/layout/flex/_justify-self.scss diff --git a/src/scss/tokens/layout/flex/_main.scss b/src/scss/tokens/layout/flex/_main.scss new file mode 100644 index 00000000..3dd3c894 --- /dev/null +++ b/src/scss/tokens/layout/flex/_main.scss @@ -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'; diff --git a/src/scss/tokens/spacers/_main.scss b/src/scss/tokens/spacers/_main.scss index aee9fb8e..1ea1520c 100644 --- a/src/scss/tokens/spacers/_main.scss +++ b/src/scss/tokens/spacers/_main.scss @@ -1,2 +1,2 @@ -@use 'margin'; -@use 'padding'; +@forward 'margin'; +@forward 'padding'; diff --git a/src/scss/tokens/spacers/_margin.scss b/src/scss/tokens/spacers/_margin.scss index 5d37d841..c78ca8e5 100644 --- a/src/scss/tokens/spacers/_margin.scss +++ b/src/scss/tokens/spacers/_margin.scss @@ -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; } diff --git a/src/scss/tokens/spacers/_padding.scss b/src/scss/tokens/spacers/_padding.scss index d7bf432f..8d80255f 100644 --- a/src/scss/tokens/spacers/_padding.scss +++ b/src/scss/tokens/spacers/_padding.scss @@ -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; } } diff --git a/src/scss/tokens/spacers/extenders/_main.scss b/src/scss/tokens/spacers/extenders/_main.scss deleted file mode 100644 index aee9fb8e..00000000 --- a/src/scss/tokens/spacers/extenders/_main.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use 'margin'; -@use 'padding'; diff --git a/src/scss/tokens/spacers/extenders/_margin.scss b/src/scss/tokens/spacers/extenders/_margin.scss deleted file mode 100644 index 5a076201..00000000 --- a/src/scss/tokens/spacers/extenders/_margin.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/spacers/extenders/_padding.scss b/src/scss/tokens/spacers/extenders/_padding.scss deleted file mode 100644 index 7b2e4bc6..00000000 --- a/src/scss/tokens/spacers/extenders/_padding.scss +++ /dev/null @@ -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; - } -} diff --git a/src/scss/tokens/text/_color.scss b/src/scss/tokens/text/_color.scss new file mode 100644 index 00000000..8e566c33 --- /dev/null +++ b/src/scss/tokens/text/_color.scss @@ -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; +} diff --git a/src/scss/tokens/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss index 0d638079..ba9ce421 100644 --- a/src/scss/tokens/text/_font-family.scss +++ b/src/scss/tokens/text/_font-family.scss @@ -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; } diff --git a/src/scss/tokens/text/_font-size.scss b/src/scss/tokens/text/_font-size.scss index 77d11475..bb8edab8 100644 --- a/src/scss/tokens/text/_font-size.scss +++ b/src/scss/tokens/text/_font-size.scss @@ -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; } diff --git a/src/scss/tokens/text/_font-style.scss b/src/scss/tokens/text/_font-style.scss index 310bdacc..4023cf52 100644 --- a/src/scss/tokens/text/_font-style.scss +++ b/src/scss/tokens/text/_font-style.scss @@ -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; } diff --git a/src/scss/tokens/text/_font-weight.scss b/src/scss/tokens/text/_font-weight.scss index 012424e1..1718739d 100644 --- a/src/scss/tokens/text/_font-weight.scss +++ b/src/scss/tokens/text/_font-weight.scss @@ -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; } diff --git a/src/scss/tokens/text/_letter-spacing.scss b/src/scss/tokens/text/_letter-spacing.scss index 475d4e29..84ce1bcf 100644 --- a/src/scss/tokens/text/_letter-spacing.scss +++ b/src/scss/tokens/text/_letter-spacing.scss @@ -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; } diff --git a/src/scss/tokens/text/_line-height.scss b/src/scss/tokens/text/_line-height.scss index 9c836f7b..0444100a 100644 --- a/src/scss/tokens/text/_line-height.scss +++ b/src/scss/tokens/text/_line-height.scss @@ -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; } diff --git a/src/scss/tokens/text/_main.scss b/src/scss/tokens/text/_main.scss index da925cb1..6d1d1177 100644 --- a/src/scss/tokens/text/_main.scss +++ b/src/scss/tokens/text/_main.scss @@ -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'; diff --git a/src/scss/tokens/text/_text-align.scss b/src/scss/tokens/text/_text-align.scss index 3e614b9b..fd0d92a6 100644 --- a/src/scss/tokens/text/_text-align.scss +++ b/src/scss/tokens/text/_text-align.scss @@ -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; } diff --git a/src/scss/tokens/text/_text-decoration.scss b/src/scss/tokens/text/_text-decoration.scss index dcb33242..8d5ea5f4 100644 --- a/src/scss/tokens/text/_text-decoration.scss +++ b/src/scss/tokens/text/_text-decoration.scss @@ -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; } diff --git a/src/scss/tokens/text/_text-transform.scss b/src/scss/tokens/text/_text-transform.scss index 92cc1c01..d16628eb 100644 --- a/src/scss/tokens/text/_text-transform.scss +++ b/src/scss/tokens/text/_text-transform.scss @@ -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; } diff --git a/src/scss/tokens/text/_vertical-align.scss b/src/scss/tokens/text/_vertical-align.scss index ffa71ba8..d2b67ae7 100644 --- a/src/scss/tokens/text/_vertical-align.scss +++ b/src/scss/tokens/text/_vertical-align.scss @@ -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; } diff --git a/src/scss/tokens/text/_white-space.scss b/src/scss/tokens/text/_white-space.scss index 32ff7ac9..1556cff3 100644 --- a/src/scss/tokens/text/_white-space.scss +++ b/src/scss/tokens/text/_white-space.scss @@ -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; } diff --git a/src/scss/tokens/text/_word-break.scss b/src/scss/tokens/text/_word-break.scss index 7510813c..7240a18a 100644 --- a/src/scss/tokens/text/_word-break.scss +++ b/src/scss/tokens/text/_word-break.scss @@ -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; } diff --git a/src/scss/tokens/text/extenders/_font-style.scss b/src/scss/tokens/text/extenders/_font-style.scss deleted file mode 100644 index 8b297a8b..00000000 --- a/src/scss/tokens/text/extenders/_font-style.scss +++ /dev/null @@ -1,12 +0,0 @@ -%italic { - font-style: italic; -} -%not-italic { - font-style: normal; -} -%\!italic { - font-style: italic !important; -} -%\!not-italic { - font-style: normal !important; -} diff --git a/src/scss/tokens/text/extenders/_main.scss b/src/scss/tokens/text/extenders/_main.scss deleted file mode 100644 index da925cb1..00000000 --- a/src/scss/tokens/text/extenders/_main.scss +++ /dev/null @@ -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'; diff --git a/src/scss/tokens/text/extenders/_text-align.scss b/src/scss/tokens/text/extenders/_text-align.scss deleted file mode 100644 index 3f2666ee..00000000 --- a/src/scss/tokens/text/extenders/_text-align.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/text/extenders/_text-decoration.scss b/src/scss/tokens/text/extenders/_text-decoration.scss deleted file mode 100644 index f1b6cdfd..00000000 --- a/src/scss/tokens/text/extenders/_text-decoration.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/text/extenders/_text-transform.scss b/src/scss/tokens/text/extenders/_text-transform.scss deleted file mode 100644 index 60e10251..00000000 --- a/src/scss/tokens/text/extenders/_text-transform.scss +++ /dev/null @@ -1,12 +0,0 @@ -%uppercase { - text-transform: uppercase; -} -%lowercase { - text-transform: lowercase; -} -%\!uppercase { - text-transform: uppercase !important; -} -%\!lowercase { - text-transform: lowercase !important; -} diff --git a/src/scss/tokens/text/extenders/_vertical-align.scss b/src/scss/tokens/text/extenders/_vertical-align.scss deleted file mode 100644 index 17121aa6..00000000 --- a/src/scss/tokens/text/extenders/_vertical-align.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/text/extenders/_white-space.scss b/src/scss/tokens/text/extenders/_white-space.scss deleted file mode 100644 index 9409404a..00000000 --- a/src/scss/tokens/text/extenders/_white-space.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/text/extenders/_word-break.scss b/src/scss/tokens/text/extenders/_word-break.scss deleted file mode 100644 index 8b8ab330..00000000 --- a/src/scss/tokens/text/extenders/_word-break.scss +++ /dev/null @@ -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; -} diff --git a/src/scss/tokens/text/mixins/_color.scss b/src/scss/tokens/text/mixins/_color.scss new file mode 100644 index 00000000..a1fea8c5 --- /dev/null +++ b/src/scss/tokens/text/mixins/_color.scss @@ -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; +} diff --git a/src/scss/tokens/text/extenders/_font-family.scss b/src/scss/tokens/text/mixins/_font-family.scss similarity index 73% rename from src/scss/tokens/text/extenders/_font-family.scss rename to src/scss/tokens/text/mixins/_font-family.scss index 79c1e70b..61c3ebac 100644 --- a/src/scss/tokens/text/extenders/_font-family.scss +++ b/src/scss/tokens/text/mixins/_font-family.scss @@ -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; } diff --git a/src/scss/tokens/text/extenders/_font-size.scss b/src/scss/tokens/text/mixins/_font-size.scss similarity index 72% rename from src/scss/tokens/text/extenders/_font-size.scss rename to src/scss/tokens/text/mixins/_font-size.scss index 2bf83a98..19e40ca0 100644 --- a/src/scss/tokens/text/extenders/_font-size.scss +++ b/src/scss/tokens/text/mixins/_font-size.scss @@ -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; } diff --git a/src/scss/tokens/text/extenders/_font-weight.scss b/src/scss/tokens/text/mixins/_font-weight.scss similarity index 55% rename from src/scss/tokens/text/extenders/_font-weight.scss rename to src/scss/tokens/text/mixins/_font-weight.scss index 03440fe1..0a76f723 100644 --- a/src/scss/tokens/text/extenders/_font-weight.scss +++ b/src/scss/tokens/text/mixins/_font-weight.scss @@ -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; } diff --git a/src/scss/tokens/text/extenders/_letter-spacing.scss b/src/scss/tokens/text/mixins/_letter-spacing.scss similarity index 56% rename from src/scss/tokens/text/extenders/_letter-spacing.scss rename to src/scss/tokens/text/mixins/_letter-spacing.scss index 1867b471..71c325e3 100644 --- a/src/scss/tokens/text/extenders/_letter-spacing.scss +++ b/src/scss/tokens/text/mixins/_letter-spacing.scss @@ -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; } diff --git a/src/scss/tokens/text/extenders/_line-height.scss b/src/scss/tokens/text/mixins/_line-height.scss similarity index 53% rename from src/scss/tokens/text/extenders/_line-height.scss rename to src/scss/tokens/text/mixins/_line-height.scss index 637c4dd7..8e4340db 100644 --- a/src/scss/tokens/text/extenders/_line-height.scss +++ b/src/scss/tokens/text/mixins/_line-height.scss @@ -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; } diff --git a/src/scss/tokens/text/mixins/_main.scss b/src/scss/tokens/text/mixins/_main.scss new file mode 100644 index 00000000..70aecfb6 --- /dev/null +++ b/src/scss/tokens/text/mixins/_main.scss @@ -0,0 +1,6 @@ +@forward 'color'; +@forward 'font-family'; +@forward 'font-size'; +@forward 'font-weight'; +@forward 'letter-spacing'; +@forward 'line-height';