diff --git a/.storybook/preview.scss b/.storybook/preview.scss index bb303918..d5d56b7a 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -1,5 +1,4 @@ @import "../src/scss/mixins"; -@import "../src/scss/colours/thematic/tr"; table.docblock-argstable { p { @@ -62,7 +61,7 @@ div.sbdocs-content { a { @include font-display; - color: $tr-muted-blue; + color: var(--gfx-colour-tr-muted-blue); text-decoration: none; &:hover { text-decoration: underline; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f66b4da6..8a1994c1 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -51,11 +51,22 @@ export const parameters = { 'SCSS', ['Intro', '*'], 'Styles', - ['Typography', [ + [ 'Intro', - 'Using the type system', - '*', - ]], + 'Typography', [ + 'Classes', + 'Intro', + 'Using the type system', + '*', + ], + 'Layout', [ + 'Classes', + 'Spacers', + 'Flexbox', + '*', + ], + 'Borders', + ], 'Actions', ['Intro', '*'], 'Contributing', diff --git a/src/docs/docs-components/CopyTable/Table.jsx b/src/docs/docs-components/CopyTable/Table.jsx index 2ff88526..2278d35d 100644 --- a/src/docs/docs-components/CopyTable/Table.jsx +++ b/src/docs/docs-components/CopyTable/Table.jsx @@ -20,13 +20,13 @@ const TD = (props) => {props.children} const TR = (props) => {props.children.map((c, i) => ({c}))} const TH = (props) => {props.children}; -const CopyTable = (props) => { +const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => { return (
- {props.title} - {(props.title && !props.noLink) && ( - + {title} + {(title && mdnLink) && ( + link )} @@ -34,11 +34,11 @@ const CopyTable = (props) => { - {props.header.map(h => ())} + {header.map(h => ())} - {props.body.map(b => ({b}))} + {body.map(b => ({b}))}
{h}{h}
diff --git a/src/docs/docs-components/CopyTable/styles.module.scss b/src/docs/docs-components/CopyTable/styles.module.scss index d5e5c09b..904fd48b 100644 --- a/src/docs/docs-components/CopyTable/styles.module.scss +++ b/src/docs/docs-components/CopyTable/styles.module.scss @@ -49,7 +49,25 @@ $header: #5e81ac; -moz-osx-font-smoothing: grayscale; } } + thead { + display: block; + width: 100%; + tr { + display: table; + table-layout: fixed; + width: 100%; + } + } + tbody { + display: block; + max-height: 305px; + overflow-y: scroll; + border-bottom: 1px solid hsla(203, 50%, 30%, 0.15); + } tbody tr { + display: table; + table-layout: fixed; + width: 100%; border: 1px solid hsla(203, 50%, 30%, 0.15); border-radius: 4px; font-size: 0.9rem; diff --git a/src/docs/styles/borders/classes.stories.mdx b/src/docs/styles/borders/classes.stories.mdx new file mode 100644 index 00000000..a90831b4 --- /dev/null +++ b/src/docs/styles/borders/classes.stories.mdx @@ -0,0 +1,54 @@ +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 borderColor from '$lib/scss/borders/\_border-color.scss?raw'; + +{/* @ts-ignore */} +import borderRadius from '$lib/scss/borders/\_border-radius.scss?raw'; + +{/* @ts-ignore */} +import borderStyle from '$lib/scss/borders/\_border-style.scss?raw'; + +{/* @ts-ignore */} +import borderWidth from '$lib/scss/borders/\_border-width.scss?raw'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Border classes + + + + + + + + diff --git a/src/docs/styles/layout/flexbox.stories.mdx b/src/docs/styles/layout/flexbox.stories.mdx index 01c9bde2..17890dd9 100644 --- a/src/docs/styles/layout/flexbox.stories.mdx +++ b/src/docs/styles/layout/flexbox.stories.mdx @@ -48,6 +48,7 @@ Our style library provides these flexbox utility classes: + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Spacer classes + + + + diff --git a/src/docs/styles/layout/utilities.stories.mdx b/src/docs/styles/layout/utilities.stories.mdx index 0ba441ba..e483eef0 100644 --- a/src/docs/styles/layout/utilities.stories.mdx +++ b/src/docs/styles/layout/utilities.stories.mdx @@ -20,6 +20,7 @@ import floats from '$lib/scss/layout/\_floats.scss?raw'; - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# Fonts - -There are several ways to specify font styles. - -## Classes - -```html -

- Lorem - ipsum - dolor -

-``` - -## Variables - -```html - -``` - -## Mixins - -```html - -``` diff --git a/src/docs/styling/mixins.stories.mdx b/src/docs/styling/mixins.stories.mdx deleted file mode 100644 index 0a569d14..00000000 --- a/src/docs/styling/mixins.stories.mdx +++ /dev/null @@ -1,77 +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) - -# SCSS Mixins - -### Prereqs - -Mixins allow you to re-use styles we've already defined in your components. Read more about how they work [here](https://sass-lang.com/documentation/at-rules/mixin) or just follow the examples below. - -## Available mixins - -### `body-text` - -Mixin our default body text styles. - -```html -
-

Lorem Ipsum

-

Ig-pay atin-lay

-
- - -``` - -### `graphic-text` - -Graphic text styles. - -```html -
-

Things are going up

-

Recent data point to a clear trend.

-
- -
- - -``` - -### `visually-hidden` - -Hide text meant for screen readers. - -```html - - - -``` diff --git a/src/docs/styling/spacers.stories.mdx b/src/docs/styling/spacers.stories.mdx deleted file mode 100644 index 119b16fa..00000000 --- a/src/docs/styling/spacers.stories.mdx +++ /dev/null @@ -1,78 +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) - -# Spacers - -You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes. - -```html - -
-

My spaced out content

-
-``` - -### Levels - -Spacer classes are specified with a level, from `0` - `6`, where `0` is no spacing and `6` is the largest amount of spacing. - -### Margin - -| Class | Property | -| ------------ | ----------------- | -| `m-{level}` | margin | -| `mt-{level}` | margin-top | -| `mr-{level}` | margin-right | -| `mb-{level}` | margin-bottom | -| `ml-{level}` | margin-left | -| `mx-{level}` | margin-left/right | -| `my-{level}` | margin-top/bottom | - -### Padding - -| Class | Property | -| ------------ | ------------------ | -| `p-{level}` | padding | -| `pt-{level}` | padding-top | -| `pr-{level}` | padding-right | -| `pb-{level}` | padding-bottom | -| `pl-{level}` | padding-left | -| `px-{level}` | padding-left/right | -| `py-{level}` | padding-top/bottom | - -## Customising spacing levels - -You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values: - -```css -$margin-levels: ( - '0': 0, - '1': 1rem, - '2': 2rem, - '3': 3rem, - '4': 4rem, - '5': 5rem, - '6': 6rem -); - -$padding-levels: ( - '0': 0, - '1': 0.5rem, - '2': 1rem, - '3': 1.75rem, - '4': 2.25rem, - '5': 3rem, - '6': 4rem -); -``` - -Make sure you import or define these variables _before_ importing the style library. - -```css -@import 'my-custom-variables'; // Where you overrided the spacer variables -@import '@reuters-graphics/graphics-components/dist/scss/main'; -``` diff --git a/src/docs/utils/parseCss.js b/src/docs/utils/parseCss.js index 97cc1c74..abeb2281 100644 --- a/src/docs/utils/parseCss.js +++ b/src/docs/utils/parseCss.js @@ -1,8 +1,9 @@ +import { compileString } from 'sass'; import { convert } from '../../../bin/css-to-js/index.js'; import { kebabCase } from 'lodash-es'; export const cssStringToTableArray = (cssString) => { - const cssObj = convert(cssString); + const cssObj = convert(compileString(cssString).css); return Object.entries(cssObj).map(([key, value]) => { const className = key.replace(/_/g, '-'); const properties = Object.entries(value) diff --git a/src/scss/borders/_border-color.scss b/src/scss/borders/_border-color.scss new file mode 100644 index 00000000..82d50b57 --- /dev/null +++ b/src/scss/borders/_border-color.scss @@ -0,0 +1,15 @@ +.border-inherit { + border-color: inherit; +} +.border-current { + border-color: currentColor; +} +.border-transparent { + border-color: transparent; +} +.border-black { + border-color: #000; +} +.border-white { + border-color: #fff; +} diff --git a/src/scss/borders/_border-radius.scss b/src/scss/borders/_border-radius.scss new file mode 100644 index 00000000..93c0c436 --- /dev/null +++ b/src/scss/borders/_border-radius.scss @@ -0,0 +1,279 @@ +.rounded-none { + border-radius: 0px; +} +.rounded-sm { + border-radius: 0.125rem; +} +.rounded { + border-radius: 0.25rem; +} +.rounded-md { + border-radius: 0.375rem; +} +.rounded-lg { + border-radius: 0.5rem; +} +.rounded-xl { + border-radius: 0.75rem; +} +.rounded-2xl { + border-radius: 1rem; +} +.rounded-3xl { + border-radius: 1.5rem; +} +.rounded-full { + border-radius: 9999px; +} +.rounded-t-none { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} +.rounded-t-sm { + border-top-left-radius: 0.125rem; + border-top-right-radius: 0.125rem; +} +.rounded-t { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} +.rounded-t-xl { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} +.rounded-t-2xl { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} +.rounded-t-3xl { + border-top-left-radius: 1.5rem; + border-top-right-radius: 1.5rem; +} +.rounded-t-full { + border-top-left-radius: 9999px; + border-top-right-radius: 9999px; +} +.rounded-r-none { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.rounded-r-sm { + border-top-right-radius: 0.125rem; + border-bottom-right-radius: 0.125rem; +} +.rounded-r { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} +.rounded-r-md { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; +} +.rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} +.rounded-r-xl { + border-top-right-radius: 0.75rem; + border-bottom-right-radius: 0.75rem; +} +.rounded-r-2xl { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +.rounded-r-3xl { + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; +} +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} +.rounded-b-none { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} +.rounded-b-sm { + border-bottom-right-radius: 0.125rem; + border-bottom-left-radius: 0.125rem; +} +.rounded-b { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} +.rounded-b-md { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} +.rounded-b-xl { + border-bottom-right-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} +.rounded-b-2xl { + border-bottom-right-radius: 1rem; + border-bottom-left-radius: 1rem; +} +.rounded-b-3xl { + border-bottom-right-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; +} +.rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; +} +.rounded-l-none { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.rounded-l-sm { + border-top-left-radius: 0.125rem; + border-bottom-left-radius: 0.125rem; +} +.rounded-l { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} +.rounded-l-md { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} +.rounded-l-lg { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} +.rounded-l-xl { + border-top-left-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} +.rounded-l-2xl { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} +.rounded-l-3xl { + border-top-left-radius: 1.5rem; + border-bottom-left-radius: 1.5rem; +} +.rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; +} +.rounded-tl-none { + border-top-left-radius: 0px; +} +.rounded-tl-sm { + border-top-left-radius: 0.125rem; +} +.rounded-tl { + border-top-left-radius: 0.25rem; +} +.rounded-tl-md { + border-top-left-radius: 0.375rem; +} +.rounded-tl-lg { + border-top-left-radius: 0.5rem; +} +.rounded-tl-xl { + border-top-left-radius: 0.75rem; +} +.rounded-tl-2xl { + border-top-left-radius: 1rem; +} +.rounded-tl-3xl { + border-top-left-radius: 1.5rem; +} +.rounded-tl-full { + border-top-left-radius: 9999px; +} +.rounded-tr-none { + border-top-right-radius: 0px; +} +.rounded-tr-sm { + border-top-right-radius: 0.125rem; +} +.rounded-tr { + border-top-right-radius: 0.25rem; +} +.rounded-tr-md { + border-top-right-radius: 0.375rem; +} +.rounded-tr-lg { + border-top-right-radius: 0.5rem; +} +.rounded-tr-xl { + border-top-right-radius: 0.75rem; +} +.rounded-tr-2xl { + border-top-right-radius: 1rem; +} +.rounded-tr-3xl { + border-top-right-radius: 1.5rem; +} +.rounded-tr-full { + border-top-right-radius: 9999px; +} +.rounded-br-none { + border-bottom-right-radius: 0px; +} +.rounded-br-sm { + border-bottom-right-radius: 0.125rem; +} +.rounded-br { + border-bottom-right-radius: 0.25rem; +} +.rounded-br-md { + border-bottom-right-radius: 0.375rem; +} +.rounded-br-lg { + border-bottom-right-radius: 0.5rem; +} +.rounded-br-xl { + border-bottom-right-radius: 0.75rem; +} +.rounded-br-2xl { + border-bottom-right-radius: 1rem; +} +.rounded-br-3xl { + border-bottom-right-radius: 1.5rem; +} +.rounded-br-full { + border-bottom-right-radius: 9999px; +} +.rounded-bl-none { + border-bottom-left-radius: 0px; +} +.rounded-bl-sm { + border-bottom-left-radius: 0.125rem; +} +.rounded-bl { + border-bottom-left-radius: 0.25rem; +} +.rounded-bl-md { + border-bottom-left-radius: 0.375rem; +} +.rounded-bl-lg { + border-bottom-left-radius: 0.5rem; +} +.rounded-bl-xl { + border-bottom-left-radius: 0.75rem; +} +.rounded-bl-2xl { + border-bottom-left-radius: 1rem; +} +.rounded-bl-3xl { + border-bottom-left-radius: 1.5rem; +} +.rounded-bl-full { + border-bottom-left-radius: 9999px; +} diff --git a/src/scss/borders/_border-style.scss b/src/scss/borders/_border-style.scss new file mode 100644 index 00000000..ade82596 --- /dev/null +++ b/src/scss/borders/_border-style.scss @@ -0,0 +1,18 @@ +.border-solid { + border-style: solid; +} +.border-dashed { + border-style: dashed; +} +.border-dotted { + border-style: dotted; +} +.border-double { + border-style: double; +} +.border-hidden { + border-style: hidden; +} +.border-none { + border-style: none; +} diff --git a/src/scss/borders/_border-width.scss b/src/scss/borders/_border-width.scss new file mode 100644 index 00000000..6375ef63 --- /dev/null +++ b/src/scss/borders/_border-width.scss @@ -0,0 +1,115 @@ +.border-0 { + border-width: 0px; +} +.border-2 { + border-width: 2px; +} +.border-4 { + border-width: 4px; +} +.border-8 { + border-width: 8px; +} +.border { + border-width: 1px; +} +.border-x-0 { + border-left-width: 0px; + border-right-width: 0px; +} +.border-x-2 { + border-left-width: 2px; + border-right-width: 2px; +} +.border-x-4 { + border-left-width: 4px; + border-right-width: 4px; +} +.border-x-8 { + border-left-width: 8px; + border-right-width: 8px; +} +.border-x { + border-left-width: 1px; + border-right-width: 1px; +} +.border-y-0 { + border-top-width: 0px; + border-bottom-width: 0px; +} +.border-y-2 { + border-top-width: 2px; + border-bottom-width: 2px; +} +.border-y-4 { + border-top-width: 4px; + border-bottom-width: 4px; +} +.border-y-8 { + border-top-width: 8px; + border-bottom-width: 8px; +} +.border-y { + border-top-width: 1px; + border-bottom-width: 1px; +} +.border-t-0 { + border-top-width: 0px; +} +.border-t-2 { + border-top-width: 2px; +} +.border-t-4 { + border-top-width: 4px; +} +.border-t-8 { + border-top-width: 8px; +} +.border-t { + border-top-width: 1px; +} +.border-r-0 { + border-right-width: 0px; +} +.border-r-2 { + border-right-width: 2px; +} +.border-r-4 { + border-right-width: 4px; +} +.border-r-8 { + border-right-width: 8px; +} +.border-r { + border-right-width: 1px; +} +.border-b-0 { + border-bottom-width: 0px; +} +.border-b-2 { + border-bottom-width: 2px; +} +.border-b-4 { + border-bottom-width: 4px; +} +.border-b-8 { + border-bottom-width: 8px; +} +.border-b { + border-bottom-width: 1px; +} +.border-l-0 { + border-left-width: 0px; +} +.border-l-2 { + border-left-width: 2px; +} +.border-l-4 { + border-left-width: 4px; +} +.border-l-8 { + border-left-width: 8px; +} +.border-l { + border-left-width: 1px; +} diff --git a/src/scss/borders/_main.scss b/src/scss/borders/_main.scss new file mode 100644 index 00000000..5cd92750 --- /dev/null +++ b/src/scss/borders/_main.scss @@ -0,0 +1,3 @@ +@import 'border-radius'; +@import 'border-style'; +@import 'border-width'; diff --git a/src/scss/colours/thematic/_nord.scss b/src/scss/colours/thematic/_nord.scss index 3bcdf6b5..97aaa351 100644 --- a/src/scss/colours/thematic/_nord.scss +++ b/src/scss/colours/thematic/_nord.scss @@ -1,40 +1,42 @@ -$nord-0: #2E3440; -$nord-polar-night-0: #2E3440; -$nord-black: #2E3440; -$nord-1: #3B4252; -$nord-polar-night-1: #3B4252; -$nord-2: #434C5E; -$nord-polar-night-2: #434C5E; -$nord-3: #4C566A; -$nord-polar-night-3: #4C566A; -$nord-4: #D8DEE9; -$nord-snow-storm-0: #D8DEE9; -$nord-5: #E5E9F0; -$nord-snow-storm-1: #E5E9F0; -$nord-6: #ECEFF4; -$nord-snow-storm-2: #ECEFF4; -$nord-white: #ECEFF4; -$nord-7: #8FBCBB; -$nord-frost-0: #8FBCBB; -$nord-8: #88C0D0; -$nord-frost-1: #88C0D0; -$nord-9: #81A1C1; -$nord-frost-2: #81A1C1; -$nord-10: #5E81AC; -$nord-frost-3: #5E81AC; -$nord-blue: #5E81AC; -$nord-11: #BF616A; -$nord-aurora-0: #BF616A; -$nord-red: #BF616A; -$nord-12: #D08770; -$nord-aurora-1: #D08770; -$nord-orange: #D08770; -$nord-13: #EBCB8B; -$nord-aurora-2: #EBCB8B; -$nord-yellow: #EBCB8B; -$nord-14: #A3BE8C; -$nord-aurora-3: #A3BE8C; -$nord-green: #A3BE8C; -$nord-15: #B48EAD; -$nord-aurora-4: #B48EAD; -$nord-purple: #B48EAD; \ No newline at end of file +:root { + --gfx-colour-nord-0: #2e3440; + --gfx-colour-nord-polar-night-0: #2e3440; + --gfx-colour-nord-black: #2e3440; + --gfx-colour-nord-1: #3b4252; + --gfx-colour-nord-polar-night-1: #3b4252; + --gfx-colour-nord-2: #434c5e; + --gfx-colour-nord-polar-night-2: #434c5e; + --gfx-colour-nord-3: #4c566a; + --gfx-colour-nord-polar-night-3: #4c566a; + --gfx-colour-nord-4: #d8dee9; + --gfx-colour-nord-snow-storm-0: #d8dee9; + --gfx-colour-nord-5: #e5e9f0; + --gfx-colour-nord-snow-storm-1: #e5e9f0; + --gfx-colour-nord-6: #eceff4; + --gfx-colour-nord-snow-storm-2: #eceff4; + --gfx-colour-nord-white: #eceff4; + --gfx-colour-nord-7: #8fbcbb; + --gfx-colour-nord-frost-0: #8fbcbb; + --gfx-colour-nord-8: #88c0d0; + --gfx-colour-nord-frost-1: #88c0d0; + --gfx-colour-nord-9: #81a1c1; + --gfx-colour-nord-frost-2: #81a1c1; + --gfx-colour-nord-10: #5e81ac; + --gfx-colour-nord-frost-3: #5e81ac; + --gfx-colour-nord-blue: #5e81ac; + --gfx-colour-nord-11: #bf616a; + --gfx-colour-nord-aurora-0: #bf616a; + --gfx-colour-nord-red: #bf616a; + --gfx-colour-nord-12: #d08770; + --gfx-colour-nord-aurora-1: #d08770; + --gfx-colour-nord-orange: #d08770; + --gfx-colour-nord-13: #ebcb8b; + --gfx-colour-nord-aurora-2: #ebcb8b; + --gfx-colour-nord-yellow: #ebcb8b; + --gfx-colour-nord-14: #a3be8c; + --gfx-colour-nord-aurora-3: #a3be8c; + --gfx-colour-nord-green: #a3be8c; + --gfx-colour-nord-15: #b48ead; + --gfx-colour-nord-aurora-4: #b48ead; + --gfx-colour-nord-purple: #b48ead; +} diff --git a/src/scss/colours/thematic/_tr.scss b/src/scss/colours/thematic/_tr.scss index b4f1be4f..3194d250 100644 --- a/src/scss/colours/thematic/_tr.scss +++ b/src/scss/colours/thematic/_tr.scss @@ -1,27 +1,29 @@ // Brand colours from RCOM's raptor system // https://github.com/tr/rcom-arc_raptor-ui/blob/develop/packages/rcom-raptor-ui_atomic/styles/_colors.scss -$tr-orange: #fa6400; -$tr-dark-orange: #dc4300; -$tr-light-orange: #ffa100; -$tr-dark-grey: #404040; -$tr-medium-grey: #666666; -$tr-light-grey: #afafaf; -$tr-muted-grey: #d0d0d0; -$tr-contrast-grey: #949494; -$tr-hover-background-grey: #f8f8f8; -$tr-light-muted-grey: #f4f4f4; -$tr-ultra-light-grey: #fafafa; -$tr-dark-blue: #005da2; -$tr-light-blue: #0099c4; -$tr-muted-blue: #4386B9; -$tr-lighter-blue: #7FACCE; -$tr-superlight-blue: #e5eef5; -$tr-dark-purple: #621f95; -$tr-light-purple: #6e3ab7; -$tr-dark-red: #a00000; -$tr-light-red: #dc0a0a; -$tr-dark-green: #387c2b; -$tr-light-green: #77a22d; -$black: #000; -$white: #fff; -$ad-placeholder: #ffb1b1; \ No newline at end of file +:root { + --gfx-colour-tr-orange: #fa6400; + --gfx-colour-tr-dark-orange: #dc4300; + --gfx-colour-tr-light-orange: #ffa100; + --gfx-colour-tr-dark-grey: #404040; + --gfx-colour-tr-medium-grey: #666666; + --gfx-colour-tr-light-grey: #afafaf; + --gfx-colour-tr-muted-grey: #d0d0d0; + --gfx-colour-tr-contrast-grey: #949494; + --gfx-colour-tr-hover-background-grey: #f8f8f8; + --gfx-colour-tr-light-muted-grey: #f4f4f4; + --gfx-colour-tr-ultra-light-grey: #fafafa; + --gfx-colour-tr-dark-blue: #005da2; + --gfx-colour-tr-light-blue: #0099c4; + --gfx-colour-tr-muted-blue: #4386b9; + --gfx-colour-tr-lighter-blue: #7facce; + --gfx-colour-tr-superlight-blue: #e5eef5; + --gfx-colour-tr-dark-purple: #621f95; + --gfx-colour-tr-light-purple: #6e3ab7; + --gfx-colour-tr-dark-red: #a00000; + --gfx-colour-tr-light-red: #dc0a0a; + --gfx-colour-tr-dark-green: #387c2b; + --gfx-colour-tr-light-green: #77a22d; + --gfx-colour-tr-black: #000; + --gfx-colour-tr-white: #fff; + --gfx-colour-tr-ad-placeholder: #ffb1b1; +} diff --git a/src/scss/layout/_rules.scss b/src/scss/layout/_main.scss similarity index 100% rename from src/scss/layout/_rules.scss rename to src/scss/layout/_main.scss diff --git a/src/scss/main.scss b/src/scss/main.scss index c96f5b36..2ffda308 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -7,7 +7,7 @@ */ // Reset -@import 'reset/rules'; +@import 'reset/main'; @import 'fonts/font-faces'; @@ -18,7 +18,8 @@ @import 'mixins'; // Style rules -@import 'spacers/rules'; +@import 'borders/main'; +@import 'spacers/main'; @import 'typography/rules'; -@import 'text/rules'; -@import 'layout/rules'; +@import 'text/main'; +@import 'layout/main'; diff --git a/src/scss/reset/_rules.scss b/src/scss/reset/_main.scss similarity index 100% rename from src/scss/reset/_rules.scss rename to src/scss/reset/_main.scss diff --git a/src/scss/spacers/_rules.scss b/src/scss/spacers/_main.scss similarity index 100% rename from src/scss/spacers/_rules.scss rename to src/scss/spacers/_main.scss diff --git a/src/scss/text/_rules.scss b/src/scss/text/_main.scss similarity index 100% rename from src/scss/text/_rules.scss rename to src/scss/text/_main.scss diff --git a/src/scss/typography_old/_variables.scss b/src/scss/typography_old/_variables.scss index 49bbc83d..697877e0 100644 --- a/src/scss/typography_old/_variables.scss +++ b/src/scss/typography_old/_variables.scss @@ -17,19 +17,19 @@ $blockquote-font-size: ($font-size-base * 1.5) !default; $line-height-base: 1.5 !default; -$text-muted: $tr-medium-grey; +$text-muted: var(--colour-tr-medium-grey); -$blockquote-small-color: $tr-medium-grey; +$blockquote-small-color: var(--colour-tr-medium-grey); -$blockquote-border-color: $tr-dark-grey !default; +$blockquote-border-color: var(--colour-tr-dark-grey) !default; $blockquote-border-width: 0.25rem !default; -$hr-border-color: rgba($black, 0.1) !default; +$hr-border-color: rgba(var(--colour-tr-black), 0.1) !default; // Headings $headings-font-family: $font-family-display; $headings-font-weight: 700 !default; -$headings-color: $tr-dark-grey; +$headings-color: var(--colour-tr-dark-grey); $h1-font-size: $font-size-base * 2.5 !default; $h2-font-size: $font-size-base * 2 !default;