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

add CSS vars defaults and typo docs

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-03-16 12:51:48 +05:30
parent 5e38bb64c6
commit d146d601b0
9 changed files with 109 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/docs/scss/css-variables.stories.mdx
View file

@ -1,81 +0,0 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />
![](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
<p>My custom text</p>
<style lang="scss">
p {
color: var(--theme-colour-text-primary, #333);
font-family: var(--theme-font-family-body, Knowledge);
}
</style>
```
## Variables
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 |

0
src/docs/scss/fonts.stories.mdx → src/docs/styling/fonts.stories.mdx
View file

0
src/docs/scss/intro.stories.mdx → src/docs/styling/intro.stories.mdx
View file

0
src/docs/scss/mixins.stories.mdx → src/docs/styling/mixins.stories.mdx
View file

0
src/docs/scss/spacers.stories.mdx → src/docs/styling/spacers.stories.mdx
View file

80
src/docs/theme/css-variables.stories.mdx vendored Normal file
View file

@ -0,0 +1,80 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
![](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
<p>My custom text</p>
<style lang="scss">
p {
color: var(--theme-colour-text-primary, #333);
font-family: var(--theme-font-family-body, Knowledge);
}
</style>
```
## Variables
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) |

14
src/docs/typography/docs/face.md
View file

@ -2,14 +2,14 @@ There are four font families provided via the `Theme`, which feeds into all the
<br />
**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

20
src/docs/typography/docs/size.md
View file

@ -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)
<br />
**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`

24
src/docs/typography/docs/style.md
View file

@ -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
<div>
@ -7,18 +7,18 @@ The styles are automatically applied to native HTML elements like the `H` and `p
</div>
```
**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