diff --git a/src/docs/scss/css-variables.stories.mdx b/src/docs/scss/css-variables.stories.mdx deleted file mode 100644 index e5155fd1..00000000 --- a/src/docs/scss/css-variables.stories.mdx +++ /dev/null @@ -1,81 +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 -Read more about how to override or define your own CSS variables in the [Themes](/docs/theming-theme--custom-theme) section. - - -### 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 | - -### Font family and sizes - -| CSS variable | Role | -| -------------------------------- | -----------------------------------------------------------------------| -| `--theme-font-family-hed` | Headline (`h1`) font family | -| `--theme-font-family-subhed` | Subhead (`h2`-`h6`) font family | -| `--theme-font-family-body` | Body (`.body-text > p`) font family | -| `--theme-font-family-note` | Note (`.note-text > p`, `.end-note > p`, `.foot-note > p`) font family | -| `--theme-font-size-hed` | Headline (`h1`) font size | -| `--theme-font-size-subhed-1` | Subhead (`h2`) font size | -| `--theme-font-size-subhed-2` | Subhead (`h3`) font size | -| `--theme-font-size-subhed-3` | Subhead (`h4`-`h6`) font size | -| `--theme-font-size-body` | Body (`.body-text > p`) font size | -| `--theme-font-size-note-1` | Body description (`.note-text > p`) font size | -| `--theme-font-size-note-2` | Endnotes (`.end-note > p`) font size | -| `--theme-font-size-note-3` | Dateline/Caption (`.foot-note > p`) font size | - - -### Typefaces (Fonts) - -| CSS variable | Role | -| -------------------------------- | ------------------------------- | -| `--theme-typeface-display` | Base display font family | -| `--theme-typeface-serif` | Base serif font family | -| `--theme-typeface-sans-serif` | Base sans-serif font family | -| `--theme-typeface-monospace` | Base monospace font family | - -### Size scale - -| CSS variable | Role | -| -------------------------------- | ------------------------------- | -| `--theme-scale-size-base` | Scale factor for base body size | -| `--theme-scale-size-base-mobile` | Scale factor for smaller screens| -| `--theme-scale-size-1` | Size level 1 | -| `--theme-scale-size-2` | Size level 2 | -| `--theme-scale-size-3` | Size level 3 | -| `--theme-scale-size-4` | Size level 4 | -| `--theme-scale-size-5` | Size level 5 | -| `--theme-scale-size-6` | Size level 6 | \ No newline at end of file diff --git a/src/docs/scss/fonts.stories.mdx b/src/docs/styling/fonts.stories.mdx similarity index 100% rename from src/docs/scss/fonts.stories.mdx rename to src/docs/styling/fonts.stories.mdx diff --git a/src/docs/scss/intro.stories.mdx b/src/docs/styling/intro.stories.mdx similarity index 100% rename from src/docs/scss/intro.stories.mdx rename to src/docs/styling/intro.stories.mdx diff --git a/src/docs/scss/mixins.stories.mdx b/src/docs/styling/mixins.stories.mdx similarity index 100% rename from src/docs/scss/mixins.stories.mdx rename to src/docs/styling/mixins.stories.mdx diff --git a/src/docs/scss/spacers.stories.mdx b/src/docs/styling/spacers.stories.mdx similarity index 100% rename from src/docs/scss/spacers.stories.mdx rename to src/docs/styling/spacers.stories.mdx diff --git a/src/docs/theme/css-variables.stories.mdx b/src/docs/theme/css-variables.stories.mdx new file mode 100644 index 00000000..258c2a87 --- /dev/null +++ b/src/docs/theme/css-variables.stories.mdx @@ -0,0 +1,80 @@ +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 + +Read more about how to override or define your own CSS variables in the [Themes](/docs/theming-theme--custom-theme) section. + +### Colours + +| CSS variable | Role | Default values (light) | Default values (dark) | +| ------------------------------- | ------------------------------- | ---------------------- | ---------------------- | +| `--theme-colour-background` | Background colour | #ffffff | #2e3440 | +| `--theme-colour-text-primary` | Primary text colour body text | #404040 | #ffffff | +| `--theme-colour-text-secondary` | Secondary text colour for notes | #666666 | rgb(255 255 255 / 60%) | +| `--theme-colour-accent` | A single accent colour | #fa6400 | #ef3c2a | +| `--theme-colour-brand-logo` | Reuters logo kinesis colour | #fa6400 | #ffffff | +| `--theme-colour-brand-rules` | Rules in header and footer | #d0d0d0 | rgb(255 255 255 / 25%) | +| `--theme-colour-brand-shadow` | Box shadow on header | rgb(64 64 64 / 80%) | rgb(255 255 255 / 10%) | + +### Font family and sizes + +| CSS variable | Role | Default values | +| ---------------------------- | ---------------------------------------------------------------------- | -------------------------------- | +| `--theme-font-family-hed` | Headline (`h1`) font family | var(--theme-typeface-display) | +| `--theme-font-family-subhed` | Subhead (`h2`-`h6`) font family | var(--theme-typeface-sans-serif) | +| `--theme-font-family-body` | Body (`.body-text > p`) font family | var(--theme-typeface-serif) | +| `--theme-font-family-note` | Note (`.note-text > p`, `.end-note > p`, `.foot-note > p`) font family | var(--theme-typeface-sans-serif) | +| `--theme-font-size-hed` | Headline (`h1`) font size | var(--theme-scale-size-1) | +| `--theme-font-size-subhed-1` | Subhead (`h2`) font size | var(--theme-scale-size-2) | +| `--theme-font-size-subhed-2` | Subhead (`h3`) font size | var(--theme-scale-size-3) | +| `--theme-font-size-subhed-3` | Subhead (`h4`-`h6`) font size | var(--theme-scale-size-6) | +| `--theme-font-size-body` | Body (`.body-text > p`) font size | var(--theme-scale-size-3) | +| `--theme-font-size-note-1` | Body description (`.note-text > p`) font size | var(--theme-scale-size-4) | +| `--theme-font-size-note-2` | Endnotes (`.end-note > p`) font size | var(--theme-scale-size-5) | +| `--theme-font-size-note-3` | Dateline/Caption (`.foot-note > p`) font size | var(--theme-scale-size-6) | + +### Typefaces (Fonts) + +| CSS variable | Role | Default values | +| ----------------------------- | --------------------------- | -------------------------------------------------------------------- | +| `--theme-typeface-display` | Base display font family | Knowledge, sans-serif | +| `--theme-typeface-serif` | Base serif font family | freight-book, serif | +| `--theme-typeface-sans-serif` | Base sans-serif font family | Knowledge, sans-serif | +| `--theme-typeface-monospace` | Base monospace font family | Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | + +### Size scale + +| CSS variable | Role | Default values | +| -------------------------------- | -------------------------------- | --------------------------------------------- | +| `--theme-scale-size-base` | Scale factor for base body size | 1.375 | +| `--theme-scale-size-base-mobile` | Scale factor for smaller screens | 1.125 | +| `--theme-scale-size-1` | Size level 1 | calc(var(--theme-scale-size-base) \* 2.25rem) | +| `--theme-scale-size-2` | Size level 2 | calc(var(--theme-scale-size-base) \* 1.5rem) | +| `--theme-scale-size-3` | Size level 3 | calc(var(--theme-scale-size-base) \* 1rem) | +| `--theme-scale-size-4` | Size level 4 | calc(var(--theme-scale-size-base) \* 0.9rem) | +| `--theme-scale-size-5` | Size level 5 | calc(var(--theme-scale-size-base) \* 0.72rem) | +| `--theme-scale-size-6` | Size level 6 | calc(var(--theme-scale-size-base) \* 0.66rem) | diff --git a/src/docs/typography/docs/face.md b/src/docs/typography/docs/face.md index 602131b7..b57d0ef4 100644 --- a/src/docs/typography/docs/face.md +++ b/src/docs/typography/docs/face.md @@ -2,14 +2,14 @@ There are four font families provided via the `Theme`, which feeds into all the
-**These are the available font family types and their corresponding tokens.** +These are the available **font family types** and their **corresponding tokens**. Check out the CSS variables in the Styling section to see the default values assigned by the Theme. -| typeface | class | mixin | -| --------------- | ---------------------- | --------------------- | -| Display font | `.typeface-display` | `typeface-display` | -| Serif font | `.typeface-serif` | `typeface-serif` | -| Sans-serif font | `.typeface-sans-serif` | `typeface-sans-serif` | -| Monospace font | `.typeface-monospace` | `typeface-monospace` | +| 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` | ## With CSS classes diff --git a/src/docs/typography/docs/size.md b/src/docs/typography/docs/size.md index d7bb0ab9..b8a0aba0 100644 --- a/src/docs/typography/docs/size.md +++ b/src/docs/typography/docs/size.md @@ -4,20 +4,20 @@ You may need to use the sizes from this scale in situations like - - Adding sizes in your custom svelte component - Sizing chart elemnents in D3 -- Defining bespoke style beyond what is provided by the `text-styles` +- Defining bespoke style beyond what is provided by the [Text styles](/docs/typography-how-to-use--text-styles)
-**These are the available text size levels and their corresponding tokens.** +These are the available **text size levels** and their **corresponding tokens**. Check out the CSS variables in the Styling section to see the default values assigned by the Theme. -| level | class | mixin | -| ----- | -------------- | ------------- | -| 1 | `.font-size-1` | `font-size-1` | -| 2 | `.font-size-2` | `font-size-2` | -| 3 | `.font-size-3` | `font-size-3` | -| 4 | `.font-size-4` | `font-size-4` | -| 5 | `.font-size-5` | `font-size-5` | -| 6 | `.font-size-6` | `font-size-6` | +| 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` | > 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` diff --git a/src/docs/typography/docs/style.md b/src/docs/typography/docs/style.md index ed61ebd0..d5687a26 100644 --- a/src/docs/typography/docs/style.md +++ b/src/docs/typography/docs/style.md @@ -1,4 +1,4 @@ -The styles are automatically applied to native HTML elements like the `H` and `p` tags, as well as `GraphicsKit` components. For more details, check out the `Type system` section in the `Intro`. +The styles are automatically applied to native HTML elements like the `H` and `p` tag. ```svelte
@@ -7,18 +7,18 @@ The styles are automatically applied to native HTML elements like the `H` and `p
``` -**These are the available styles and their corresponding tokens.** +These are the available **text styles** and their **corresponding tokens**. The `font-size-` inherits the sizes based on the scale as described by the [Type System](/docs/typography-intro--page). Check out the CSS variables in the Styling section to see the default values assigned by the Theme. -| Style | class | mixin | -| ------------- | ---------------- | --------------- | -| Page title | `.font-hed ` | `font-hed ` | -| Section title | `.font-subhed-1` | `font-subhed-1` | -| Subhed | `.font-subhed-2` | `font-subhed-2` | -| Smallhed | `.font-subhed-3` | `font-subhed-3` | -| Body text | `.font-body ` | `font-body` | -| Body note | `.font-note-1` | `font-note-1` | -| Endnotes | `.font-note-2` | `font-note-2` | -| Footnotes | `.font-note-3` | `font-note-3` | +| 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` | ## Styling with with CSS classes