theming
This commit is contained in:
Jon McClure
parent
3b28eb57b7
commit
34f8ffa5c0
46 changed files with 669 additions and 359 deletions
10
.storybook/Wrapper.svelte
Normal file
10
.storybook/Wrapper.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
import Article from '../src/components/Article/Article.svelte';
|
||||
import Theme from '../src/components/Theme/Theme.svelte';
|
||||
</script>
|
||||
|
||||
<Theme>
|
||||
<Article>
|
||||
<slot />
|
||||
</Article>
|
||||
</Theme>
|
||||
|
|
@ -17,7 +17,7 @@ module.exports = {
|
|||
},
|
||||
"features": {
|
||||
"storyStoreV7": false,
|
||||
"previewMdx2": true,
|
||||
"previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556
|
||||
},
|
||||
typescript: {
|
||||
check: false,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import '../src/scss/main.scss';
|
||||
import './preview.scss';
|
||||
|
||||
import Article from '../src/components/Article/Article.svelte';
|
||||
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import Wrapper from './Wrapper.svelte';
|
||||
import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
|
||||
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
|
||||
import svelte from './svelte-highlighting.js';
|
||||
|
|
@ -41,6 +41,8 @@ export const parameters = {
|
|||
],
|
||||
'Layout',
|
||||
['Intro', '*'],
|
||||
'Theming',
|
||||
['*'],
|
||||
'Components',
|
||||
['Intro', '*'],
|
||||
'*',
|
||||
|
|
@ -65,4 +67,4 @@ export const parameters = {
|
|||
}
|
||||
};
|
||||
|
||||
export const decorators = [() => ({ Component: Article })];
|
||||
export const decorators = [() => ({ Component: Wrapper })];
|
||||
|
|
|
|||
|
|
@ -67,14 +67,21 @@ a.sbdocs-a {
|
|||
}
|
||||
|
||||
|
||||
// .sbdocs {
|
||||
// max-width: 800px;
|
||||
// margin: 0 auto !important;
|
||||
// display: block;
|
||||
// }
|
||||
// .sbdocs.sbdocs-pre {
|
||||
// max-width: 1000px;
|
||||
// }
|
||||
// .sbdocs.sbdocs-wrapper, .sbdocs.sbdocs-content, .sbdocs.sbdocs-preview {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
code {
|
||||
font-size: 90%;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
background-color: #efefef;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
div.reset-article {
|
||||
width: calc(100% + 30px);
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
margin: 0;
|
||||
padding: 0 15px;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--theme-colour-background, transparent);
|
||||
&.embedded {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,16 +100,16 @@
|
|||
const move = (e) => {
|
||||
if (sliding && imgOffset) {
|
||||
const el = e.touches ? e.touches[0] : e;
|
||||
const figureOffset = figure
|
||||
? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
|
||||
: 0;
|
||||
const figureOffset = figure ?
|
||||
parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
|
||||
0;
|
||||
let x = el.pageX - figureOffset - imgOffset.left;
|
||||
x =
|
||||
x < handleMargin
|
||||
? handleMargin
|
||||
: x > w - handleMargin
|
||||
? w - handleMargin
|
||||
: x;
|
||||
x < handleMargin ?
|
||||
handleMargin :
|
||||
x > w - handleMargin ?
|
||||
w - handleMargin :
|
||||
x;
|
||||
offset = x / w;
|
||||
}
|
||||
};
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/mixins/fonts';
|
||||
@import '../../scss/fonts/variables';
|
||||
@import '../../scss/colours/thematic/tr';
|
||||
figure.before-after-container {
|
||||
overflow: hidden;
|
||||
|
|
@ -257,7 +257,8 @@
|
|||
position: absolute;
|
||||
:global {
|
||||
p {
|
||||
@include font-display;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-primary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
&:last-child {
|
||||
|
|
@ -329,11 +330,12 @@
|
|||
}
|
||||
aside.before-after-caption {
|
||||
margin: 0 auto;
|
||||
@include font-display;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
:global {
|
||||
p {
|
||||
@include font-display;
|
||||
color: $tr-medium-grey;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2rem;
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@
|
|||
/** Snap block to column widths, rather than fluidly resizing them. */
|
||||
export let snap: boolean = false;
|
||||
|
||||
/** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
|
||||
export let noMargin: boolean = false;
|
||||
|
||||
/** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
|
||||
export let role: string | null = null;
|
||||
|
||||
|
|
@ -26,7 +23,6 @@
|
|||
{id}
|
||||
class="article-block {width} {cls}"
|
||||
class:snap={snap && width !== 'fluid' && width !== 'widest'}
|
||||
class:no-margin={noMargin}
|
||||
{role}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
|
|
@ -43,11 +39,7 @@
|
|||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
&.no-margin {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&.narrower {
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@
|
|||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@reuters-graphics/style-main/scss/fonts/mixins";
|
||||
@import "@reuters-graphics/style-color/scss/thematic/brand";
|
||||
@import "../../scss/fonts/variables";
|
||||
@import "../../scss/colours/thematic/tr";
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
}
|
||||
|
||||
div.alt-warning {
|
||||
@include font-display;
|
||||
font-family: $font-family-display;
|
||||
padding: 5px 10px;
|
||||
background-color: red;
|
||||
color: white;
|
||||
|
|
@ -118,10 +118,10 @@
|
|||
}
|
||||
|
||||
figcaption {
|
||||
@include font-display;
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: $brand-secondary;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
}
|
||||
|
||||
&.fluid {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<script lang="ts">
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
/**
|
||||
/**
|
||||
* Width of the component within the text well.
|
||||
* @type {string}
|
||||
*/
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add an id to the block tag to target it with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
export let id: string = '';
|
||||
/**
|
||||
/**
|
||||
* Add extra classes to the block tag to target it with custom CSS.
|
||||
* @type {string}
|
||||
*/
|
||||
|
|
@ -21,10 +21,7 @@
|
|||
/** Snap block to column widths, rather than fluidly resizing them. */
|
||||
export let snap: boolean = false;
|
||||
|
||||
/** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
|
||||
export let noMargin: boolean = false;
|
||||
|
||||
/**
|
||||
/**
|
||||
* ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
|
||||
* @type {string}
|
||||
*/
|
||||
|
|
@ -37,7 +34,7 @@
|
|||
export let notes: string | null = null;
|
||||
|
||||
/**
|
||||
* Set a different width for the text within the text well, for example,
|
||||
* Set a different width for the text within the text well, for example,
|
||||
* "normal" to keep the title, description and notes inline with the rest
|
||||
* of the text well. Can't ever be wider than `width`.
|
||||
* @type {string}
|
||||
|
|
@ -68,12 +65,12 @@
|
|||
export let ariaDescription: string | null = null;
|
||||
|
||||
import AriaHidden from './AriaHidden.svelte';
|
||||
import TextBlock from "./TextBlock.svelte";
|
||||
import Block from "../Block/Block.svelte";
|
||||
import TextBlock from './TextBlock.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import { marked } from 'marked';
|
||||
</script>
|
||||
|
||||
<Block {id} {snap} {noMargin} {role} {width} {ariaLabel} cls="graphic {cls}">
|
||||
<Block {id} {snap} {role} {width} {ariaLabel} cls="graphic {cls}">
|
||||
<div>
|
||||
{#if $$slots.title}
|
||||
<TextBlock width={textWidth}>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
|
||||
/** Width of the component within the text well. */
|
||||
export let width: ContainerWidth | null = null;
|
||||
import Block from "../Block/Block.svelte";
|
||||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
{#if (width)}
|
||||
<Block {width} noMargin={true}>
|
||||
<Block {width} cls="m-0">
|
||||
<slot></slot>
|
||||
</Block>
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@
|
|||
* Section title
|
||||
*/
|
||||
export let section: string | null = null;
|
||||
/**
|
||||
* Section colour
|
||||
*/
|
||||
export let sectionColour: string = 'red';
|
||||
|
||||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block>
|
||||
<Block cls="mb-1">
|
||||
<header class="headline">
|
||||
<!-- Crown named slot -->
|
||||
<slot name="crown"></slot>
|
||||
{#if $$slots.crown}
|
||||
<div class="crown-container">
|
||||
<!-- Crown named slot -->
|
||||
<slot name="crown"></slot>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="title">
|
||||
{#if section}
|
||||
<p class={`section-title color-${sectionColour}`}>{section}</p>
|
||||
<p class={'section-title'}>{section}</p>
|
||||
{/if}
|
||||
{#if $$slots.hed}
|
||||
<!-- Headline override named slot -->
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{#if ($$slots.byline || $$slots.dateline)}
|
||||
<aside class="article-metadata">
|
||||
<aside class="article-metadata" class:pt-1={!dek}>
|
||||
{#if $$slots.byline}
|
||||
<div class="byline-container">
|
||||
<div class="byline">
|
||||
|
|
@ -61,37 +61,41 @@
|
|||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@reuters-graphics/style-color/scss/thematic/brand";
|
||||
@import "../../scss/mixins";
|
||||
@import "../../scss/colours/thematic/tr";
|
||||
@import "../../scss/fonts/variables";
|
||||
|
||||
header.headline {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
|
||||
:global {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: 5px 0;
|
||||
line-height: 1.1;
|
||||
font-family: var(--theme-font-family-hed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-display;
|
||||
|
||||
font-family: var(--theme-font-family-subhed, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
|
||||
&.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: var(--theme-colour-accent, $tr-dark-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-metadata {
|
||||
padding: 40px 0;
|
||||
|
||||
@include font-sans;
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -102,7 +106,7 @@
|
|||
.byline {
|
||||
:global {
|
||||
a {
|
||||
color: $brand-text;
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,16 +115,17 @@
|
|||
.dateline-container {
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $brand-text-secondary;
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
}
|
||||
|
||||
section.headline {
|
||||
.article-metadata {
|
||||
padding: 2rem 0 0;
|
||||
}
|
||||
div.crown-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,5 @@ Reuters Graphics headline
|
|||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ Add a byline and dateline with `byline` and `dateline` named slots.
|
|||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
>
|
||||
<!-- Use named slots to add a byline... -->
|
||||
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
>
|
||||
<path
|
||||
d="M79.231 36.006a4.171 4.171 0 11-8.342 0 4.171 4.171 0 018.342 0zm-12.81-7.292a2.506 2.506 0 100 5.011 2.506 2.506 0 000-5.01zm-2.959-8.744a3.187 3.187 0 100 6.373 3.187 3.187 0 000-6.373zm-5.165-6.632a2.944 2.944 0 100 5.888 2.944 2.944 0 000-5.888zM51.8 9.387a2.51 2.51 0 100 5.02 2.51 2.51 0 000-5.02zm-6.882-1.626a2.123 2.123 0 100 4.245 2.123 2.123 0 000-4.245zm-6.745.297a1.637 1.637 0 100 3.273 1.637 1.637 0 000-3.273zm-5.868 1.416a1.408 1.408 0 100 2.816 1.408 1.408 0 000-2.816zm-5.015 2.238a1.214 1.214 0 100 2.43 1.214 1.214 0 000-2.43zm-4.426 2.904a1.41 1.41 0 100 2.82 1.41 1.41 0 000-2.82zm-4.182 4.064a1.633 1.633 0 100 3.265 1.633 1.633 0 000-3.265zm-3.501 5.452a1.94 1.94 0 100 3.881 1.94 1.94 0 000-3.88zm-2.023 7.008a2.058 2.058 0 100 4.116 2.058 2.058 0 000-4.116zm.143 7.139a2.508 2.508 0 100 5.016 2.508 2.508 0 000-5.016zm2.956 7.387a3.185 3.185 0 100 6.37 3.185 3.185 0 000-6.37zm5.203 7.099a2.942 2.942 0 100 5.883 2.942 2.942 0 000-5.883zm6.27 4.703a2.505 2.505 0 100 5.01 2.505 2.505 0 000-5.01zm7.08 2.544a2.12 2.12 0 100 4.241 2.12 2.12 0 000-4.24zm6.733.666a1.63 1.63 0 100 3.26 1.63 1.63 0 000-3.26zm5.885-.96a1.41 1.41 0 100 2.821 1.41 1.41 0 000-2.82zm5.01-1.86a1.212 1.212 0 100 2.425 1.212 1.212 0 000-2.424zm4.425-3.29a1.415 1.415 0 100 2.829 1.415 1.415 0 000-2.83zm4.189-4.51a1.637 1.637 0 100 3.274 1.637 1.637 0 000-3.273zm3.492-6.07a1.939 1.939 0 100 3.879 1.939 1.939 0 000-3.878zm2.03-7.231a2.048 2.048 0 100 4.096 2.048 2.048 0 000-4.096zm-8.018-2.354a1.943 1.943 0 100 3.887 1.943 1.943 0 000-3.886zm-7.522-1.729a1.1 1.1 0 100 2.201 1.1 1.1 0 000-2.201zm-2.08-5.232a1.513 1.513 0 100 3.026 1.513 1.513 0 000-3.027zm-4.94-4.396a2.066 2.066 0 100 4.13 2.066 2.066 0 000-4.13zm-6.704-.742a2.33 2.33 0 100 4.66 2.33 2.33 0 000-4.66zm-5.678 3.236a2.216 2.216 0 100 4.432 2.216 2.216 0 000-4.432zm-2.91 6.09a1.492 1.492 0 100 2.984 1.492 1.492 0 000-2.985zm.116 5.686a1.098 1.098 0 100 2.197 1.098 1.098 0 000-2.197zm1.971 4.365a1.514 1.514 0 100 3.028 1.514 1.514 0 000-3.028zm4.97 3.369a2.064 2.064 0 100 4.128 2.064 2.064 0 000-4.128zm6.685.171a2.326 2.326 0 100 4.653 2.326 2.326 0 000-4.653zm5.712-3.023a2.222 2.222 0 100 4.444 2.222 2.222 0 000-4.444zm2.9-4.616a1.494 1.494 0 100 2.988 1.494 1.494 0 000-2.988zM57.58 26.61a2.498 2.498 0 100 4.996 2.498 2.498 0 000-4.996zm-4.232-7.013a2.986 2.986 0 100 5.972 2.986 2.986 0 000-5.972zm-6.385-3.924a2.676 2.676 0 100 5.353 2.676 2.676 0 000-5.353zm-7.088-.78a2.35 2.35 0 100 4.7 2.35 2.35 0 000-4.7zm-7.085 2.27a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.517zm-5.984 4.16a1.618 1.618 0 100 3.234 1.618 1.618 0 000-3.235zm-4.045 5.94a1.624 1.624 0 100 3.248 1.624 1.624 0 000-3.249zm-1.704 6.503a1.936 1.936 0 100 3.873 1.936 1.936 0 000-3.873zm.991 6.655a2.501 2.501 0 100 5.002 2.501 2.501 0 000-5.002zm4.229 6.055a2.98 2.98 0 100 5.96 2.98 2.98 0 000-5.96zm6.416 4.522a2.686 2.686 0 100 5.372 2.686 2.686 0 000-5.372zm7.066 1.415a2.366 2.366 0 100 4.733 2.366 2.366 0 000-4.733zm7.09-1.05a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.516zm5.992-3.852a1.62 1.62 0 100 3.238 1.62 1.62 0 000-3.238zm4.042-6a1.62 1.62 0 100 3.239 1.62 1.62 0 000-3.238zm16.53-20.253a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zm-4.581-8.281a3.066 3.066 0 100 6.133 3.066 3.066 0 000-6.133zm-6.8-6.497a2.642 2.642 0 100 5.284 2.642 2.642 0 000-5.284zm-7.626-3.932a2.14 2.14 0 100 4.279 2.14 2.14 0 000-4.28zM46.907.534a1.842 1.842 0 100 3.685 1.842 1.842 0 000-3.685zM39.855 0a1.585 1.585 0 100 3.17 1.585 1.585 0 000-3.17zm-7.03.526a1.847 1.847 0 100 3.694 1.847 1.847 0 000-3.693zm-7.5 2.022a2.141 2.141 0 100 4.282 2.141 2.141 0 000-4.282zm-7.633 3.924a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm-6.801 6.505a3.064 3.064 0 100 6.127 3.064 3.064 0 000-6.127zM6.315 21.27a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zM4.662 31.835a4.171 4.171 0 100 8.342 4.171 4.171 0 000-8.342zm1.655 11.696a3.606 3.606 0 100 7.21 3.606 3.606 0 000-7.21zm4.578 9.374a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm6.792 7.34a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm7.638 4.927a2.142 2.142 0 100 4.284 2.142 2.142 0 000-4.284zm7.505 2.616a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.041 1.036a1.588 1.588 0 100 3.176 1.588 1.588 0 000-3.176zm7.03-1.038a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.505-2.61a2.148 2.148 0 100 4.297 2.148 2.148 0 000-4.297zm7.632-4.938a2.646 2.646 0 100 5.292 2.646 2.646 0 000-5.292zm6.8-7.335a3.059 3.059 0 100 6.118 3.059 3.059 0 000-6.118zm4.578-9.366a3.609 3.609 0 100 7.217 3.609 3.609 0 000-7.217z"
|
||||
fill="{logoColour}"></path>
|
||||
style="fill: {logoColour};"></path>
|
||||
<path
|
||||
d="M121.865 50.29c0 .287-.167.497-.498.497h-5.085c-.455 0-.624-.422-.83-.833l-5.997-10.096h-.922c-1.087 0-4.451-.119-5.41-.168v10.264c0 .456-.336.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.166-.331 6.82-.537 9.864-.537 6.41 0 12.331 2.291 12.331 9.407v.378c0 4.407-2.204 6.82-5.616 8.146l6.532 11.141a.543.543 0 01.086.336zm-6.746-20c0-3.123-2.422-4.456-6.586-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.586-.826 6.586-4.488v-.378zm144.946 20c0 .287-.166.497-.498.497h-5.084c-.456 0-.625-.422-.83-.833l-5.998-10.096h-.922c-1.087 0-4.45-.119-5.41-.168v10.264c0 .456-.335.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.167-.331 6.82-.537 9.865-.537 6.41 0 12.33 2.291 12.33 9.407v.378c0 4.407-2.204 6.82-5.615 8.146l6.532 11.141a.544.544 0 01.085.336zm-6.745-20c0-3.123-2.423-4.456-6.587-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.587-.826 6.587-4.488v-.378zm-121.253 7.603h13.327a.835.835 0 00.833-.827V34.06a.837.837 0 00-.833-.829h-13.327v-3.818c0-3.482.134-3.578 3.284-3.578h10.54a.842.842 0 00.835-.836v-2.66c0-.585-.21-.796-.835-.876-1.332-.204-4.045-.58-8.995-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.995-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.54c-3.15 0-3.284-.094-3.284-3.583v-4.693zm82.266 0h13.326a.835.835 0 00.834-.827V34.06a.837.837 0 00-.834-.829h-13.326v-3.818c0-3.482.133-3.578 3.283-3.578h10.54a.842.842 0 00.836-.836v-2.66c0-.585-.21-.796-.835-.876-1.333-.204-4.045-.58-8.996-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.996-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.541c-3.15 0-3.284-.094-3.284-3.583v-4.693zM177 39.331V22.004c0-.462-.374-.791-.837-.791h-4.121c-.458 0-.83.329-.83.79v17.328c0 4.749-2.192 7-6.69 7-4.489 0-6.685-2.251-6.685-7V22.004c0-.462-.372-.791-.834-.791h-4.114c-.457 0-.836.329-.836.79v17.328c0 8.873 5.77 11.786 12.47 11.786 6.705 0 12.477-2.913 12.477-11.786zm26.923-13.292h-8.304v23.915a.84.84 0 01-.839.833h-4.117a.834.834 0 01-.83-.833V26.04h-8.315c-.455 0-.834-.288-.834-.745v-3.29c0-.462.379-.791.834-.791h22.404c.458 0 .835.33.835.791v3.29c0 .457-.377.745-.834.745zm81.586 16.38c0-3.994-2.27-6.06-5.788-7.48-2.766-1.112-5.196-2.057-7.046-2.785-1.842-.73-3.41-1.993-3.41-3.364 0-1.87 2.319-2.955 5.392-2.955 3.626 0 6.477.506 9.227.757h.084c.414 0 .703-.338.703-.75V22.76c0-.413-.327-.706-.746-.787-1.411-.339-5.044-1.094-9.015-1.094-7.74 0-11.432 3.33-11.432 7.912 0 2.911 1.283 5.781 4.912 7.279 3.636 1.5 11.08 3.228 11.08 6.35 0 2.414-1.124 3.741-4.833 3.741-3.848 0-7.745-.545-9.412-.754h-.083a.793.793 0 00-.789.793v3c0 .458.375.745.79.828 2.002.46 5.735 1.094 9.41 1.094 8.335 0 10.956-4.5 10.956-8.703zm3.039-15.501c0 3.27 2.412 6.038 6.092 6.038 3.68 0 6.119-2.769 6.119-6.038 0-3.296-2.44-6.006-6.12-6.006-3.679 0-6.091 2.71-6.091 6.006zm.887 0c0-2.908 2.049-5.23 5.205-5.23 3.183 0 5.23 2.322 5.23 5.23 0 2.909-2.047 5.263-5.23 5.263-3.156 0-5.204-2.354-5.204-5.263zm7.97 2.69l-1.321-2.25c.69-.267 1.136-.754 1.136-1.644v-.075c0-1.438-1.196-1.9-2.491-1.9-.612 0-1.553.042-1.99.11-.169.023-.269.082-.269.25v5.51a.17.17 0 00.169.167h.84c.091 0 .158-.076.158-.167v-2.073c.195.01.875.035 1.092.035h.187l1.213 2.038c.04.082.074.167.166.167h1.027c.065 0 .1-.043.1-.1 0-.019 0-.043-.017-.067zm-1.345-3.893c0 .738-.464.905-1.331.905-.14 0-.955-.017-1.092-.026v-1.821a21.3 21.3 0 011.092-.034c.842 0 1.331.269 1.331.9v.076z"
|
||||
fill="{textColour}"></path>
|
||||
style="fill: {textColour};"></path>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,18 @@
|
|||
// @ts-ignore
|
||||
import customReferralsDocs from './stories/docs/customReferrals.md?raw';
|
||||
|
||||
import SiteFooter, { themes } from './SiteFooter.svelte';
|
||||
import SiteFooter from './SiteFooter.svelte';
|
||||
import Theme from '../Theme/Theme.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
withStoryDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SiteFooter',
|
||||
component: SiteFooter,
|
||||
...withComponentDocs(componentDocs),
|
||||
argsTypes: {
|
||||
themes: { control: { disable: true } },
|
||||
},
|
||||
};
|
||||
|
||||
const customReferrals = [
|
||||
|
|
@ -54,11 +52,14 @@
|
|||
|
||||
<Story
|
||||
name="Customised theme"
|
||||
args={{
|
||||
theme: themes.dark,
|
||||
}}
|
||||
{...withStoryDocs(darkThemeDocs)}
|
||||
/>
|
||||
>
|
||||
<div>
|
||||
<Theme base="dark">
|
||||
<SiteFooter />
|
||||
</Theme>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Customised referrals"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,3 @@
|
|||
<script context="module">
|
||||
/**
|
||||
* Exported preset themes you can use to customise the `theme` prop.
|
||||
*/
|
||||
export const themes = {
|
||||
default: {
|
||||
background: '#fff',
|
||||
primary: '#404040',
|
||||
rules: '#d0d0d0',
|
||||
},
|
||||
dark: {
|
||||
background: '#333',
|
||||
primary: '#eee',
|
||||
rules: '#999',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import QuickLinks from './QuickLinks.svelte';
|
||||
import CompanyLinks from './CompanyLinks.svelte';
|
||||
|
|
@ -24,17 +6,6 @@
|
|||
|
||||
import data from './data.json';
|
||||
|
||||
interface Theme {
|
||||
background?: string;
|
||||
primary?: string;
|
||||
accent?: string;
|
||||
rules?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass in a custom theme to control the colours in the header.
|
||||
*/
|
||||
export let theme: Theme = {};
|
||||
|
||||
interface Referral {
|
||||
url: URL;
|
||||
|
|
@ -48,14 +19,13 @@
|
|||
*/
|
||||
export let referrals: Referral[] = [];
|
||||
|
||||
const navTheme = { ...themes.default, ...theme };
|
||||
</script>
|
||||
|
||||
<footer
|
||||
style="{`
|
||||
--nav-background: ${navTheme.background};
|
||||
--nav-primary: ${navTheme.primary};
|
||||
--nav-rules: ${navTheme.rules};
|
||||
--nav-background: var(--theme-colour-background, #fff);
|
||||
--nav-primary: var(--theme-colour-text-primary, #404040);
|
||||
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
|
||||
`}"
|
||||
>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,11 @@
|
|||
Customise colours by passing an object to the `theme` prop. You can customise any or all of the following default properties:
|
||||
|
||||
```javascript
|
||||
// Customisable colours
|
||||
{
|
||||
background: '#fff',
|
||||
primary: '#404040',
|
||||
accent: '#fa6400',
|
||||
rules: '#d0d0d0',
|
||||
shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
|
||||
}
|
||||
```
|
||||
|
||||
The component also exports some preset themes you can use or customise:
|
||||
Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import {
|
||||
SiteFooter,
|
||||
SiteFooterThemes,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<!-- Use a preset theme. -->
|
||||
<SiteFooter theme="{SiteFooterThemes.dark}" />
|
||||
|
||||
<!-- Customise a couple colours in a theme. -->
|
||||
<SiteFooter
|
||||
theme="{{
|
||||
...SiteFooterThemes.default,
|
||||
background: '#e0d3b8',
|
||||
rules: '#aaa',
|
||||
}}"
|
||||
/>
|
||||
<Theme base="dark">
|
||||
<SiteFooter />
|
||||
</Theme>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import { normalizeUrl } from '../NavBar/utils/index.js';
|
||||
|
||||
export let data = [];
|
||||
export let theme = {};
|
||||
export let isMobileMenuOpen = false;
|
||||
export let releaseMobileMenu = () => {};
|
||||
</script>
|
||||
|
|
@ -14,16 +13,16 @@
|
|||
class="overlay"
|
||||
aria-modal="true"
|
||||
style="{`
|
||||
--nav-background: ${theme.background};
|
||||
--nav-primary: ${theme.primary};
|
||||
--nav-accent: ${theme.accent};
|
||||
--nav-rules: ${theme.rules};
|
||||
--nav-shadow: ${theme.shadow};
|
||||
--nav-background: var(--theme-colour-background, #fff);
|
||||
--nav-primary: var(--theme-colour-text-primary, #404040);
|
||||
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
|
||||
--nav-accent: var(--theme-colour-brand-logo, #fa6400);
|
||||
--nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
|
||||
`}"
|
||||
>
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<ReutersLogo logoColour="{theme.accent}" textColour="{theme.primary}" />
|
||||
<ReutersLogo logoColour="var(--nav-accent)" textColour="var(--nav-primary)" />
|
||||
</div>
|
||||
<button class="button close-button" on:click="{releaseMobileMenu}">
|
||||
<div class="button-container">
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
// @ts-ignore
|
||||
import darkThemeDocs from './stories/docs/darkTheme.md?raw';
|
||||
|
||||
import SiteHeader, { themes } from './SiteHeader.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import SiteHeader from './SiteHeader.svelte';
|
||||
import Theme from '../Theme/Theme.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
withStoryDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
|
|
@ -36,13 +36,17 @@
|
|||
name="Default"
|
||||
/>
|
||||
|
||||
|
||||
<Story
|
||||
name="Customised theme"
|
||||
args={{
|
||||
theme: themes.dark,
|
||||
}}
|
||||
{...withStoryDocs(darkThemeDocs)}
|
||||
/>
|
||||
>
|
||||
<div>
|
||||
<Theme base="dark">
|
||||
<SiteHeader />
|
||||
</Theme>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,4 @@
|
|||
<script context="module">
|
||||
/**
|
||||
* Exported preset themes you can use to customise the `theme` prop.
|
||||
*/
|
||||
export const themes = {
|
||||
default: {
|
||||
background: '#fff',
|
||||
primary: '#404040',
|
||||
accent: '#fa6400',
|
||||
rules: '#d0d0d0',
|
||||
shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
|
||||
},
|
||||
dark: {
|
||||
background: '#333',
|
||||
primary: '#eee',
|
||||
accent: '#fa6400',
|
||||
rules: '#999',
|
||||
shadow: '0 1px 4px 2px rgb(255 255 255 / 10%)',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
interface Theme {
|
||||
background?: string;
|
||||
primary?: string;
|
||||
accent?: string;
|
||||
rules?: string;
|
||||
shadow?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass in a custom theme to control the colours in the header.
|
||||
*/
|
||||
export let theme: Theme = {};
|
||||
|
||||
import { ReutersLogo } from '../../index.js';
|
||||
import NavBar from './NavBar/index.svelte';
|
||||
import data from './data.json';
|
||||
|
|
@ -42,9 +7,6 @@
|
|||
import MenuIcon from './svgs/Menu.svelte';
|
||||
import MobileMenu from './MobileMenu/index.svelte';
|
||||
|
||||
const navTheme = { ...themes.default, ...theme };
|
||||
|
||||
setContext('nav-theme', writable(navTheme));
|
||||
setContext('nav-active-section', writable(null));
|
||||
|
||||
const { sections } = data[0];
|
||||
|
|
@ -54,11 +16,11 @@
|
|||
|
||||
<header
|
||||
style="{`
|
||||
--nav-background: ${navTheme.background};
|
||||
--nav-primary: ${navTheme.primary};
|
||||
--nav-accent: ${navTheme.accent};
|
||||
--nav-rules: ${navTheme.rules};
|
||||
--nav-shadow: ${navTheme.shadow};
|
||||
--nav-background: var(--theme-colour-background, #fff);
|
||||
--nav-primary: var(--theme-colour-text-primary, #404040);
|
||||
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
|
||||
--nav-accent: var(--theme-colour-brand-logo, #fa6400);
|
||||
--nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
|
||||
`}"
|
||||
>
|
||||
<div class="nav-container show-nav">
|
||||
|
|
@ -69,8 +31,8 @@
|
|||
<div class="logo">
|
||||
<a href="https://www.reuters.com">
|
||||
<ReutersLogo
|
||||
logoColour="{navTheme.accent}"
|
||||
textColour="{navTheme.primary}"
|
||||
logoColour="var(--nav-accent)"
|
||||
textColour="var(--nav-primary)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -105,7 +67,6 @@
|
|||
</header>
|
||||
|
||||
<MobileMenu
|
||||
theme="{navTheme}"
|
||||
isMobileMenuOpen="{isMobileMenuOpen}"
|
||||
releaseMobileMenu="{() => {
|
||||
isMobileMenuOpen = false;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,11 @@
|
|||
Customise colours by passing an object to the `theme` prop. You can customise any or all of the following default properties:
|
||||
|
||||
```javascript
|
||||
// Customisable colours
|
||||
{
|
||||
background: '#fff',
|
||||
primary: '#404040',
|
||||
accent: '#fa6400',
|
||||
rules: '#d0d0d0',
|
||||
shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
|
||||
}
|
||||
```
|
||||
|
||||
The component also exports some preset themes you can use or customise:
|
||||
Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import {
|
||||
SiteHeader,
|
||||
SiteHeaderThemes,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<!-- Use a preset theme. -->
|
||||
<SiteHeader theme="{SiteHeaderThemes.dark}" />
|
||||
|
||||
<!-- Customise a couple colours in a theme. -->
|
||||
<SiteHeader
|
||||
theme="{{
|
||||
...SiteHeaderThemes.default,
|
||||
background: '#e0d3b8',
|
||||
rules: '#aaa',
|
||||
}}"
|
||||
/>
|
||||
<Theme base="dark">
|
||||
<SiteHeader />
|
||||
</Theme>
|
||||
```
|
||||
|
|
|
|||
30
src/components/Theme/@types/component.ts
Normal file
30
src/components/Theme/@types/component.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
interface Colour {
|
||||
background: string;
|
||||
'text-primary': string;
|
||||
'text-secondary': string;
|
||||
accent: string;
|
||||
'brand-logo': string;
|
||||
'brand-rules': string;
|
||||
'brand-shadow': string;
|
||||
};
|
||||
|
||||
interface Font {
|
||||
'size-base': string;
|
||||
'family-serif': string,
|
||||
'family-sans-serif': string,
|
||||
'family-monospace': string,
|
||||
'family-hed': string;
|
||||
'family-subhed': string;
|
||||
'family-body': string;
|
||||
'family-note': string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
colour: Colour,
|
||||
font: Font;
|
||||
};
|
||||
|
||||
export interface CustomTheme {
|
||||
colour?: Partial<Colour>,
|
||||
font?: Partial<Font>
|
||||
}
|
||||
|
|
@ -3,28 +3,30 @@
|
|||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
import customiseDocs from './stories/docs/customise.md?raw';
|
||||
// @ts-ignore
|
||||
import inheritanceDocs from './stories/docs/inheritance.md?raw';
|
||||
|
||||
import ThemedPage from './stories/ThemedPage.svelte';
|
||||
|
||||
import Theme, { themes } from './Theme.svelte';
|
||||
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
import { withComponentDocs, withStoryDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Theme',
|
||||
title: 'Theming/Theme',
|
||||
component: Theme,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
styles: {
|
||||
options: Object.keys(themes), // An array of serializable values
|
||||
mapping: themes, // Maps serializable option values to complex arg values
|
||||
control: {
|
||||
type: 'select', // Type 'select' is automatically inferred when 'options' is defined
|
||||
labels: {
|
||||
// 'labels' maps option values to string labels
|
||||
main: 'Main',
|
||||
dark: 'Dark',
|
||||
},
|
||||
},
|
||||
base: {
|
||||
control: 'select',
|
||||
options: [
|
||||
'light',
|
||||
'dark',
|
||||
],
|
||||
},
|
||||
themes: { control: false },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -32,42 +34,54 @@
|
|||
<Meta {...meta} />
|
||||
|
||||
<Template let:args>
|
||||
<Theme {...args}>
|
||||
<div class="themed">
|
||||
<p>My theme</p>
|
||||
</div>
|
||||
</Theme>
|
||||
<div class="reset-article">
|
||||
<Theme {...args}>
|
||||
<ThemedPage />
|
||||
</Theme>
|
||||
</div>
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
styles: themes.main,
|
||||
theme: themes.light,
|
||||
base: 'light',
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Inheritance"
|
||||
args="{{
|
||||
styles: themes.main,
|
||||
}}"
|
||||
name="Custom theme"
|
||||
{...withStoryDocs(customiseDocs)}
|
||||
>
|
||||
<Theme styles="{themes.main}">
|
||||
<Theme base="dark" theme={{ colour: { accent: 'yellow' }, font: { 'family-hed': 'freight-book' } }}>
|
||||
<ThemedPage />
|
||||
</Theme>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Inheritance"
|
||||
{...withStoryDocs(inheritanceDocs)}
|
||||
>
|
||||
<Theme theme="{themes.light}">
|
||||
<div class="themed">
|
||||
<p>My theme</p>
|
||||
<Theme styles="{themes.dark}">
|
||||
<p>Theme</p>
|
||||
<Theme theme="{themes.dark}">
|
||||
<div class="themed">
|
||||
<p>My sub-theme</p>
|
||||
<Theme styles="{themes.main}">
|
||||
<p>Sub-theme</p>
|
||||
<Theme theme="{themes.light}">
|
||||
<div class="themed">
|
||||
<p>My sub-sub-theme</p>
|
||||
<p>Sub-sub</p>
|
||||
</div>
|
||||
</Theme>
|
||||
<Theme
|
||||
styles="{{ colour: { background: 'steelblue', primary: '#fff' } }}"
|
||||
theme="{{
|
||||
colour: { background: 'steelblue', 'text-primary': '#fff' },
|
||||
font: { 'family-note': 'freight-book' },
|
||||
}}"
|
||||
base='dark'
|
||||
>
|
||||
<div class="themed">
|
||||
<p>My other sub-sub-theme</p>
|
||||
<p>Sub-sub sibling</p>
|
||||
</div>
|
||||
</Theme>
|
||||
</div>
|
||||
|
|
@ -86,11 +100,11 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
border: 1px solid var(--theme-colour-primary);
|
||||
border: 1px solid var(--theme-colour-text-primary);
|
||||
border-radius: 20px;
|
||||
p {
|
||||
@include font-display;
|
||||
color: var(--theme-colour-primary);
|
||||
font-family: var(--theme-font-family-note);
|
||||
color: var(--theme-colour-text-primary);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,38 +1,43 @@
|
|||
<script context="module" lang="ts">
|
||||
const main = {
|
||||
colour: {
|
||||
background: '#ffffff',
|
||||
primary: '#333333',
|
||||
},
|
||||
};
|
||||
const dark = {
|
||||
colour: {
|
||||
background: '#333333',
|
||||
primary: '#ffffff',
|
||||
},
|
||||
};
|
||||
|
||||
export const themes = {
|
||||
main,
|
||||
dark,
|
||||
};
|
||||
import light from './themes/light.js';
|
||||
import dark from './themes/dark.js';
|
||||
/**
|
||||
* Pre-made themes you can import.
|
||||
* @type {{ light, dark }}
|
||||
*/
|
||||
export const themes = { light, dark };
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let styles: object = main;
|
||||
export let name: string = 'theme';
|
||||
import type { CustomTheme } from './@types/component';
|
||||
/** Custom theme object. Can be a partial theme with just
|
||||
* what you want to change.
|
||||
*/
|
||||
export let theme: CustomTheme = {};
|
||||
|
||||
type Base = 'light' | 'dark';
|
||||
/**
|
||||
* Base theme is one of `light` or `dark` and will be merged
|
||||
* with your custom theme to fill in any values you don't
|
||||
* explicitly set.
|
||||
*/
|
||||
export let base: Base = 'light';
|
||||
|
||||
import cssVariables from '../../actions/cssVariables';
|
||||
import flatten from './utils/flatten';
|
||||
import mergeThemes from './utils/merge';
|
||||
|
||||
/** @type {Theme} */
|
||||
$: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="theme theme-{name}"
|
||||
class="theme"
|
||||
style="display: contents;"
|
||||
use:cssVariables="{flatten({ [name]: styles })}"
|
||||
use:cssVariables="{flatten({ theme: mergedTheme })}"
|
||||
>
|
||||
<!-- Clients can override the theme above by attaching custom properties to this element. -->
|
||||
<div class="theme-client-override theme-{name}" style="display: contents;">
|
||||
<div class="theme-client-override" style="display: contents;">
|
||||
<!-- Themed content -->
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
41
src/components/Theme/stories/ThemedPage.svelte
Normal file
41
src/components/Theme/stories/ThemedPage.svelte
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import Article from '../../Article/Article.svelte';
|
||||
import Headline from '../../Headline/Headline.svelte';
|
||||
import BodyText from '../../BodyText/BodyText.svelte';
|
||||
import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
|
||||
</script>
|
||||
<Article>
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
>
|
||||
<!-- Use named slots to add a byline... -->
|
||||
<span slot="byline">By <strong>Peppa Pig</strong></span>
|
||||
<!-- ...and a dateline. -->
|
||||
<span slot="dateline">Published <time datetime="{new Date('2020-01-01').toISOString()}">Jan. 1, 2020</time></span>
|
||||
</Headline>
|
||||
<BodyText text={`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
|
||||
|
||||
Prosciutto kevin brisket sirloin pork loin shoulder cupim sausage chicken jowl strip steak rump pork ball tip ham hock. Swine pork belly fatback alcatra jowl.
|
||||
|
||||
## Brisket sirloin
|
||||
|
||||
Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buffalo ground round burgdoggen ribeye.
|
||||
`} />
|
||||
<GraphicBlock
|
||||
title="Steak tar-tar"
|
||||
description="Andouille pork loin cow buffalo pork chop shoulder."
|
||||
notes="Source: U.S. FDA"
|
||||
>
|
||||
<div class="fake-graphic"></div>
|
||||
</GraphicBlock>
|
||||
<BodyText text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'} />
|
||||
</Article>
|
||||
|
||||
<style>
|
||||
div.fake-graphic {
|
||||
height: 200px;
|
||||
border: 1px solid var(--theme-colour-text-primary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
> ⏳ Coming soon!
|
||||
The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
|
||||
|
||||
Set a theme for your page.
|
||||
```svelte
|
||||
<script>
|
||||
import { Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Theme base="light">
|
||||
<!-- ...page stuff, now styled according to your theme! -->
|
||||
</Theme>
|
||||
```
|
||||
|
||||
> For Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.
|
||||
|
|
|
|||
16
src/components/Theme/stories/docs/customise.md
Normal file
16
src/components/Theme/stories/docs/customise.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
You can customise the theme of your page in two ways:
|
||||
|
||||
First, you can choose the `base` theme, either `light` or `dark`.
|
||||
|
||||
From there, you can pass a custom theme object to the `theme` prop. (Check out the "Control" column for `theme` in the table above to see what properties you can customise.)
|
||||
|
||||
```svelte
|
||||
<Theme
|
||||
base="dark"
|
||||
theme={{
|
||||
colour: { accent: 'yellow' },
|
||||
font: { 'family-hed': 'freight-book' },
|
||||
}}>
|
||||
<!-- Page content -->
|
||||
</Theme>
|
||||
```
|
||||
17
src/components/Theme/stories/docs/inheritance.md
Normal file
17
src/components/Theme/stories/docs/inheritance.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
Styles that use `Theme`'s CSS variables will always use those set by the nearest parent `Theme`. That lets you change the theme for parts of your page by simply wrapping that bit in a _new_ `Theme` with different styles.
|
||||
|
||||
The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Theme } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Theme>
|
||||
<!-- Page content styled with the default light theme. -->
|
||||
<Theme theme={{ colour: { background: 'lightgrey' }}}>
|
||||
<!-- A darker background for this section. -->
|
||||
</Theme>
|
||||
<!-- Back to normal here... -->
|
||||
</Theme>
|
||||
```
|
||||
22
src/components/Theme/themes/dark.js
Normal file
22
src/components/Theme/themes/dark.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/** @type {import('../@types/component').Theme} */
|
||||
export default {
|
||||
colour: {
|
||||
background: '#2e3440',
|
||||
'text-primary': '#ffffff',
|
||||
'text-secondary': 'rgb(255 255 255 / 60%)',
|
||||
accent: ' #ef3c2a',
|
||||
'brand-logo': '#fa6400',
|
||||
'brand-rules': '#999999',
|
||||
'brand-shadow': 'rgb(255 255 255 / 10%)',
|
||||
},
|
||||
font: {
|
||||
'size-base': '1.375',
|
||||
'family-serif': 'freight-book, serif',
|
||||
'family-sans-serif': 'Knowledge, sans-serif',
|
||||
'family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
'family-hed': 'var(--theme-font-family-sans-serif)',
|
||||
'family-subhed': 'var(--theme-font-family-sans-serif)',
|
||||
'family-body': 'var(--theme-font-family-serif)',
|
||||
'family-note': 'var(--theme-font-family-sans-serif)',
|
||||
},
|
||||
};
|
||||
21
src/components/Theme/themes/light.js
Normal file
21
src/components/Theme/themes/light.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
colour: {
|
||||
background: '#ffffff',
|
||||
'text-primary': '#404040',
|
||||
'text-secondary': '#666666',
|
||||
accent: ' #fa6400',
|
||||
'brand-logo': '#fa6400',
|
||||
'brand-rules': '#d0d0d0',
|
||||
'brand-shadow': 'rgb(64 64 64 / 80%)',
|
||||
},
|
||||
font: {
|
||||
'size-base': '1.375',
|
||||
'family-serif': 'freight-book, serif',
|
||||
'family-sans-serif': 'Knowledge, sans-serif',
|
||||
'family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
'family-hed': 'var(--theme-font-family-sans-serif)',
|
||||
'family-subhed': 'var(--theme-font-family-sans-serif)',
|
||||
'family-body': 'var(--theme-font-family-serif)',
|
||||
'family-note': 'var(--theme-font-family-sans-serif)',
|
||||
},
|
||||
};
|
||||
24
src/components/Theme/utils/merge.js
Normal file
24
src/components/Theme/utils/merge.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
function isObject(item) {
|
||||
return (item && typeof item === 'object' && !Array.isArray(item));
|
||||
}
|
||||
|
||||
/**
|
||||
* Deep merges theme objects.
|
||||
*/
|
||||
export default function merge(target, ...sources) {
|
||||
if (!sources.length) return target;
|
||||
const source = sources.shift();
|
||||
|
||||
if (isObject(target) && isObject(source)) {
|
||||
for (const key in source) {
|
||||
if (isObject(source[key])) {
|
||||
if (!target[key]) Object.assign(target, { [key]: {} });
|
||||
merge(target[key], source[key]);
|
||||
} else {
|
||||
Object.assign(target, { [key]: source[key] });
|
||||
}
|
||||
}
|
||||
}
|
||||
return merge(target, ...sources);
|
||||
}
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
export let ariaDescription = null;
|
||||
export let caption = '';
|
||||
|
||||
/**
|
||||
* Width of the block within the article well.
|
||||
/**
|
||||
* Width of the block within the article well.
|
||||
* @type {string}
|
||||
*/
|
||||
export let width: ContainerWidth = 'normal';
|
||||
|
|
@ -163,9 +163,9 @@
|
|||
on:pausePlayEvent="{pausePlayEvent}"
|
||||
paused="{paused}"
|
||||
clickedOnPauseBtn="{clickedOnPauseBtn}"
|
||||
controlsOpacity="{hoverToSeeControls
|
||||
? interactiveControlsOpacity
|
||||
: controlsOpacity}"
|
||||
controlsOpacity="{hoverToSeeControls ?
|
||||
interactiveControlsOpacity :
|
||||
controlsOpacity}"
|
||||
controlsPosition="{controlsPosition}"
|
||||
widthVideoContainer="{widthVideoContainer}"
|
||||
heightVideoContainer="{heightVideoContainer}"
|
||||
|
|
@ -262,6 +262,7 @@
|
|||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../scss/colours/thematic/tr";
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
video {
|
||||
|
|
@ -283,7 +284,7 @@
|
|||
}
|
||||
figcaption {
|
||||
font-size: 0.8rem;
|
||||
color: #666666;
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
Wrap components or other HTML elements to determine if they are visible on the page using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
|
||||
|
||||
This is especially useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
|
||||
This is really useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
|
||||
|
||||
> **Pro tip:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.
|
||||
|
||||
|
|
|
|||
|
|
@ -96,6 +96,12 @@ If your component docs still aren't working, check if you're using other future-
|
|||
|
||||
## Styles
|
||||
|
||||
### Theming
|
||||
|
||||
Always respect styles set by the [`Theme`](/?path=/docs/theming-theme--default) component by using [CSS variables](?path=/docs/scss-css-variables--page) where they apply to your component.
|
||||
|
||||
Always set [fallback values](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) for the default light theme.
|
||||
|
||||
### SCSS
|
||||
|
||||
Use SCSS with the `lang` attribute to write your styles.
|
||||
|
|
|
|||
|
|
@ -41,19 +41,19 @@ In our case, we want to change the absolute position of those elements. To test
|
|||
|
||||
<img src={testImg} width="600" style={{ margin: '0 0 1rem' }} />
|
||||
|
||||
Now that we know we can change what we need through CSS it's time to write some SCSS.
|
||||
Now that we know we can change what we need through CSS it's time to write some SCSS, either in your `global.scss` file or directly in a component like `App.svelte`.
|
||||
|
||||
First, let's look at the class of the style rule we changed in the inspector:
|
||||
|
||||
`figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
|
||||
|
||||
The first thing we need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
|
||||
One thing we always need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
|
||||
|
||||
That leaves us with:
|
||||
|
||||
`figure.before-after-container .overlay-container.before`
|
||||
|
||||
But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific.
|
||||
But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
|
||||
|
||||
The easiest way to make sure your style rule wins out is to <span class="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/Classes" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# CSS classes
|
||||
|
||||
Pre-written CSS classes you can add directly to elements.
|
||||
|
||||
TK.
|
||||
52
src/docs/scss/css-variables.stories.mdx
Normal file
52
src/docs/scss/css-variables.stories.mdx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# CSS variables
|
||||
|
||||
Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are provided by the [`Theme`](?path=/docs/components-theme--default) component. All other components in this library use these variables for styling basic colours and typography. You can (and probably _should_) use them in you own code, too.
|
||||
|
||||
> In the future, client's may be allowed to override our CSS variables to match their own house styles. So when using CSS variables, it's a good idea to set a [fallback value](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values), in case a client misconfigures a variable override.
|
||||
>
|
||||
> **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
|
||||
|
||||
```svelte
|
||||
<p>My custom text</p>
|
||||
|
||||
<style lang="scss">
|
||||
p {
|
||||
color: var(--theme-colour-text-primary, #333);
|
||||
font-family: var(--theme-font-family-body, Knowledge);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
### Colours
|
||||
|
||||
| CSS variable | Role |
|
||||
| ------------------------------- | ------------------------------- |
|
||||
| `--theme-colour-background` | Background colour |
|
||||
| `--theme-colour-text-primary` | Primary text colour body text |
|
||||
| `--theme-colour-text-secondary` | Secondary text colour for notes |
|
||||
| `--theme-colour-accent` | A single accent colour |
|
||||
| `--theme-colour-brand-logo` | Reuters logo kinesis colour |
|
||||
| `--theme-colour-brand-rules` | Rules in header and footer |
|
||||
| `--theme-colour-brand-shadow` | Box shadow on header |
|
||||
|
||||
### Fonts
|
||||
|
||||
| CSS variable | Role |
|
||||
| -------------------------------- | ------------------------------- |
|
||||
| `--theme-font-size-base` | Base font size |
|
||||
| `--theme-font-family-serif` | Base serif font family |
|
||||
| `--theme-font-family-sans-serif` | Base sans-serif font family |
|
||||
| `--theme-font-family-monospace` | Base monospace font family |
|
||||
| `--theme-font-family-hed` | Headline (`h1`) font family |
|
||||
| `--theme-font-family-subhed` | Subhead (`h2`-`h6`) font family |
|
||||
| `--theme-font-family-body` | Body text font family |
|
||||
| `--theme-font-family-note` | Note font family |
|
||||
78
src/docs/scss/spacers.stories.mdx
Normal file
78
src/docs/scss/spacers.stories.mdx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Spacers
|
||||
|
||||
You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes.
|
||||
|
||||
```svelte
|
||||
<!-- Adds margin-top and padding -->
|
||||
<div class="mt-2 p-2">
|
||||
<p>My spaced out content</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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:
|
||||
|
||||
```scss
|
||||
$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.
|
||||
|
||||
```scss
|
||||
@import 'my-custom-variables'; // Where you overrided the spacer variables
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/main';
|
||||
```
|
||||
17
src/index.js
17
src/index.js
|
|
@ -15,16 +15,13 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
|
|||
export { default as Scroller } from './components/Scroller/Scroller.svelte';
|
||||
export { default as SEO } from './components/SEO/SEO.svelte';
|
||||
export { default as Sharer } from './components/Sharer/Sharer.svelte';
|
||||
export {
|
||||
default as SiteFooter,
|
||||
// @ts-ignore
|
||||
themes as SiteFooterThemes
|
||||
} from './components/SiteFooter/SiteFooter.svelte';
|
||||
export {
|
||||
default as SiteHeader,
|
||||
// @ts-ignore
|
||||
themes as SiteHeaderThemes
|
||||
} from './components/SiteHeader/SiteHeader.svelte';
|
||||
export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
|
||||
export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
|
||||
export { default as Spinner } from './components/Spinner/Spinner.svelte';
|
||||
export {
|
||||
default as Theme,
|
||||
// @ts-ignore
|
||||
themes
|
||||
} from './components/Theme/Theme.svelte';
|
||||
export { default as Video } from './components/Video/Video.svelte';
|
||||
export { default as Visible } from './components/Visible/Visible.svelte';
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@import "../mixins";
|
||||
|
||||
.font-sans {
|
||||
@include font-sans;
|
||||
@include font-sans(true);
|
||||
}
|
||||
|
||||
.font-serif {
|
||||
@include font-serif;
|
||||
@include font-serif(true);
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
@include font-monospace;
|
||||
@include font-monospace(true);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
@include font-display;
|
||||
@include font-display(true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import "fonts/rules";
|
||||
@import "typography/rules";
|
||||
@import "typography/main";
|
||||
@import "spacers/rules";
|
||||
|
||||
// Components
|
||||
@import "components/article-metadata";
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
@import './fonts';
|
||||
@import '../fonts/variables';
|
||||
@import '../typography/font-size';
|
||||
@import '../colours/thematic/tr';
|
||||
|
||||
@mixin body-text {
|
||||
h2, h3, h4, h5, h6, p, li, blockquote {
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
}
|
||||
p,
|
||||
ul li,
|
||||
ul li p,
|
||||
ol li,
|
||||
ol li p {
|
||||
@include font-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: var(--theme-font-family-body, $font-family-serif);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
|
||||
@extend .paragraph-size;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
color: $tr-dark-grey;
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
background-size: 1px 1px;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
|
||||
background-position: 0 1.3rem;
|
||||
background-repeat: repeat-x;
|
||||
text-decoration: none;
|
||||
// TODO: Assign this to background colour CSS var and the underline will skip descenders
|
||||
// text-shadow:
|
||||
// 1px 1px white,
|
||||
// 1px -1px white,
|
||||
// -1px 1px white,
|
||||
// -1px -1px white;
|
||||
text-shadow:
|
||||
1px 1px var(--theme-colour-background, #ffffff),
|
||||
1px -1px var(--theme-colour-background, #ffffff),
|
||||
-1px 1px var(--theme-colour-background, #ffffff),
|
||||
-1px -1px var(--theme-colour-background, #ffffff);
|
||||
|
||||
@media (max-width: 540px) {
|
||||
background-position: 0 1.1rem;
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
background: $tr-medium-grey;
|
||||
background: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
height: 3px;
|
||||
width: 100px;
|
||||
margin: 10px auto 2rem;
|
||||
|
|
@ -65,11 +67,12 @@
|
|||
|
||||
blockquote {
|
||||
margin: 30px 0;
|
||||
border-left: 2px solid $tr-medium-grey;
|
||||
border-left: 2px solid var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
padding-left: 15px;
|
||||
|
||||
p {
|
||||
@extend .blockquote-size;
|
||||
font-family: var(--theme-font-family-body, $font-family-serif);
|
||||
}
|
||||
|
||||
// Markdown cheat to use for attribution
|
||||
|
|
@ -79,7 +82,8 @@
|
|||
margin: -5px 0 0;
|
||||
|
||||
p {
|
||||
color: $tr-dark-grey;
|
||||
font-family: var(--theme-font-family-body, $font-family-serif);
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
font-size: 1rem;
|
||||
|
||||
@media (max-width: 540px) {
|
||||
|
|
@ -95,8 +99,6 @@
|
|||
}
|
||||
|
||||
&.font-sans {
|
||||
p {
|
||||
@include font-sans;
|
||||
}
|
||||
font-family: var(--theme-font-family-sans-serif, $font-family-sans-serif) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@mixin graphic-text {
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: $tr-dark-grey;
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
@include font-display;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5rem;
|
||||
color: $tr-dark-grey;
|
||||
color: var(--theme-colour-text-primary, $tr-dark-grey);
|
||||
margin-bottom: 1rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
p {
|
||||
@include font-display;
|
||||
margin-bottom: 0;
|
||||
color: $tr-medium-grey;
|
||||
color: var(--theme-colour-text-secondary, $tr-medium-grey);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2rem;
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import './fonts';
|
||||
@import '../fonts/variables';
|
||||
|
||||
@mixin note-text {
|
||||
h2,
|
||||
|
|
@ -6,18 +6,18 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include font-display;
|
||||
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
color: var(--theme-colour-text-primary);
|
||||
margin: 1rem 0 0;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-display;
|
||||
|
||||
font-family: var(--theme-font-family-note, $font-family-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 200;
|
||||
color: var(--theme-colour-text-primary);
|
||||
a {
|
||||
color: currentColor;
|
||||
background-size: 1px 1px;
|
||||
|
|
|
|||
65
src/scss/spacers/_rules.scss
Normal file
65
src/scss/spacers/_rules.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@import "variables";
|
||||
|
||||
@each $level, $value in $margin-levels {
|
||||
.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 !important;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
@each $level, $value in $padding-levels {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
19
src/scss/spacers/_variables.scss
Normal file
19
src/scss/spacers/_variables.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
$margin-levels: (
|
||||
"0": 0,
|
||||
"1": 1rem,
|
||||
"2": 2rem,
|
||||
"3": 3rem,
|
||||
"4": 4rem,
|
||||
"5": 5rem,
|
||||
"6": 6rem,
|
||||
) !default;
|
||||
|
||||
$padding-levels: (
|
||||
"0": 0,
|
||||
"1": 0.5rem,
|
||||
"2": 1rem,
|
||||
"3": 1.75rem,
|
||||
"4": 2.25rem,
|
||||
"5": 3rem,
|
||||
"6": 4rem,
|
||||
) !default;
|
||||
Loading…
Reference in a new issue