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

variables

Browse source
This commit is contained in:
Jon McClure 2023-07-26 19:42:37 +01:00
parent 1343a8a76a
commit 75ac9889cf
16 changed files with 85 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Headline/Headline.svelte
View file

@ -70,7 +70,6 @@
<style lang="scss">
@use '../../scss/mixins' as *;
// @import '../../scss/fonts/variables';
header.headline {
text-align: center;

12
src/components/PhotoCarousel/PhotoCarousel.svelte
View file

@ -175,7 +175,7 @@
</Block>
<style lang="scss">
@import '../../scss/fonts/variables';
@import '../../scss/mixins';
.carousel-container {
margin-bottom: 10px;
@ -201,7 +201,7 @@
letter-spacing: 0.75px;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
1px 1px 0 #333;
font-family: var(--theme-font-family-note);
@include font-note;
&.contain-fit {
left: 50%;
transform: translate(-50%, 0%);
@ -232,12 +232,12 @@
border: 1px solid transparent;
border-radius: 50%;
background-color: transparent;
color: var(--theme-colour-text-secondary);
@include text-secondary;
opacity: 0.4;
&:hover {
opacity: 1;
border-color: var(--theme-colour-text-secondary);
color: var(--theme-colour-text-secondary);
@include text-secondary;
}
&:disabled {
opacity: 0.4;
@ -274,8 +274,8 @@
}
p.caption {
margin: 5px 0 0;
font-family: var(--theme-font-family-note, $font-family-display);
color: var(--theme-colour-text-secondary);
@include font-note;
@include text-secondary;
font-size: 0.85rem;
line-height: 1.1rem;
font-weight: 300;

8
src/components/PhotoPack/PhotoPack.svelte
View file

@ -130,7 +130,7 @@
</Block>
<style lang="scss">
@import '../../scss/fonts/variables';
@import '../../scss/mixins';
div.photopack-container {
display: block;
@ -151,7 +151,7 @@
object-fit: cover;
}
div.alt-warning {
font-family: $font-family-display;
@include font-sans;
padding: 5px 10px;
background-color: red;
color: white;
@ -174,8 +174,8 @@
:global(p) {
font-size: 0.85rem;
line-height: 1.1rem;
font-family: var(--theme-font-family-note, $font-family-display);
color: var(--theme-colour-text-secondary);
@include font-sans;
@include text-secondary;
margin: 0;
font-weight: 300;
}

12
src/components/Table/Pagination.svelte
View file

@ -65,7 +65,7 @@
</nav>
<style lang="scss">
@import '../../scss/fonts/variables';
@import '../../scss/mixins';
nav.pagination {
display: flex;
@ -75,8 +75,8 @@
button {
border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
border-radius: 50%;
background: var(--theme-color-background);
color: var(--theme-colour-text-secondary, var(--tr-light-grey));
@include bg;
@include text-secondary;
cursor: pointer;
width: 35px;
height: 35px;
@ -95,7 +95,7 @@
justify-content: center;
white-space: nowrap;
&:hover {
color: var(--theme-colour-text-primary, var(--tr-medium-grey));
@include text-primary;
border-color: var(--theme-colour-text-primary, var(--tr-medium-grey));
}
}
@ -109,10 +109,10 @@
margin: 0 0.5rem;
.records {
font-size: 0.8rem;
font-family: var(--theme-font-family-hed, $font-family-display);
@include font-sans;
font-weight: 300;
margin: 0 1rem;
color: var(--theme-colour-text-primary, var(--tr-medium-grey));
@include text-primary;
}
}
}

8
src/components/Table/Select.svelte
View file

@ -39,16 +39,16 @@
</div>
<style lang="scss">
@import '../../scss/fonts/variables';
@import '../../scss/mixins';
.select {
width: 256px;
font-family: var(--theme-font-family-hed, $font-family-display);
@include font-sans;
label {
display: block;
font-size: 0.8rem;
font-weight: 300;
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include text-primary;
padding: 0 0 0.125rem 0;
}
.select--input {
@ -58,7 +58,7 @@
line-height: 1;
height: 33px;
border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include text-primary;
border-radius: 6px;
width: 100%;
padding: 0.5rem;

31
src/components/Table/Table.svelte
View file

@ -204,7 +204,7 @@
/** Boot it up. */
onMount(() => {
data.forEach((d) => {
data.forEach((d: any) => {
// Compose the string we will allow users to search
d.searchStr = includedFields
.map((field) => d[field])
@ -340,26 +340,26 @@
</Block>
<style lang="scss">
@import '../../scss/fonts/variables';
@import '../../scss/mixins';
.table-wrapper {
font-size: 1rem;
font-family: var(--theme-font-family-hed, $font-family-display);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include font-sans;
@include text-primary;
}
.table--header {
width: 100%;
h2.table--header--title {
font-weight: 500;
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include text-primary;
font-size: 1.33rem;
padding: 0;
margin: 0.5rem 0;
}
p.table--header--dek {
font-family: var(--theme-font-family-hed, $font-family-display);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include font-sans;
@include text-primary;
font-size: 1rem;
font-weight: 300;
line-height: 1.4;
@ -379,10 +379,9 @@
thead {
tr {
th {
border-bottom: 1px solid
var(--theme-colour-text-primary, var(--tr-medium-grey));
color: var(--theme-colour-text-primary, var(--tr-medium-grey));
background-color: var(--theme-colour-background, #fff);
border-bottom: 1px solid var(--theme-colour-text-primary);
@include text-primary;
@include bg;
font-size: 0.85rem;
font-weight: 500;
text-align: inherit;
@ -409,7 +408,7 @@
border-bottom: 1px solid
var(--theme-colour-brand-rules, var(--tr-muted-grey));
&.no-results {
color: var(--theme-colour-text-secondary, var(--tr-muted-grey));
@include text-secondary;
}
}
}
@ -420,7 +419,7 @@
}
td {
font-weight: 300;
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include text-primary;
font-size: 0.8rem;
padding: 0.5rem 0 0 0;
}
@ -465,14 +464,14 @@
margin-top: 1rem;
button {
font-size: 0.8rem;
font-family: var(--theme-font-family-hed, $font-family-display);
@include font-sans;
font-weight: 500;
min-width: 175px;
padding: 0.33rem 0.5rem;
border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
border-radius: 4px;
background: var(--theme-colour-background);
color: var(--theme-colour-text-primary, var(--tr-medium-grey));
@include bg;
@include text-primary;
cursor: pointer;
}
}

6
src/docs/docs-components/CopyColourTable/Table.jsx
View file

@ -47,7 +47,7 @@ const Cell = (props) => {
}
const TD = (props) => <td><Cell {...props}>{props.children}</Cell></td>
const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>
const TH = (props) => <th>{props.children}</th>;
const CopyTable = ({ title = null, body, copyable, mdnLink = null, included = false, partial }) => {
@ -61,11 +61,11 @@ const CopyTable = ({ title = null, body, copyable, mdnLink = null, included = fa
<table className={classes.table}>
<thead>
<tr>
{header.map(h => (<TH>{h}</TH>))}
{header.map(h => (<TH key={h}>{h}</TH>))}
</tr>
</thead>
<tbody>
{body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
{body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}
</tbody>
</table>
</Unstyled>

1
src/docs/docs-components/CopyColourTable/styles.module.scss
View file

@ -6,6 +6,7 @@ $header: #5e81ac;
color: #666;
margin-bottom: 0;
font-weight: 400;
margin-top: 2rem;
a span {
font-size: 18px;
line-height: 18px;

8
src/docs/docs-components/CopyTable/Table.jsx
View file

@ -4,7 +4,7 @@ import { Unstyled } from '@storybook/blocks';
// @ts-ignore
import classes from './styles.module.scss';
const MultiLine = (props) => props.children.split('\n').map(t => (<div>{t}</div>))
const MultiLine = (props) => props.children.split('\n').map(t => (<div key={t}>{t}</div>))
const Copyable = (props) => {
const handleClick = async(props) => {
@ -32,7 +32,7 @@ const Copyable = (props) => {
}
const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>
const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>
const TH = (props) => <th>{props.children}</th>;
const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => {
@ -49,11 +49,11 @@ const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) =>
<table className={classes.table}>
<thead>
<tr>
{header.map(h => (<TH>{h}</TH>))}
{header.map(h => (<TH key={h}>{h}</TH>))}
</tr>
</thead>
<tbody>
{body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
{body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}
</tbody>
</table>
</Unstyled>

8
src/docs/styles/tokens/layout/spacers.stories.mdx
View file

@ -27,9 +27,9 @@ Spacers include tokens that control static and fluid margins and paddings.
**Static** margin/padding tokens set values that don't change with the size of the viewport. These tokens are best for creating space between block-like elements — divs, pictures, videos, graphics, etc. The tables below contain dozens of levels so you can finely tune spacing, but their values also are at intervals that help you maintain consistent balance on your page.
**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokes have fewer available levels to help make sure our typography is consistent.
**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokens have fewer available levels to help make sure our typography is consistent.
As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding` tables).
As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding`).
---
@ -54,7 +54,7 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
mdnLink="margin"
header={['Class', 'Include', 'Properties']}
body={cssStringToTableArray(fluidMargin, true)}
copyable={[true, (t) => `@include ${t};`, false]}
copyable={[true, (t) => `@include %${t};`, false]}
/>
<CopyTable
@ -62,5 +62,5 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
mdnLink="margin"
header={['Class', 'Include', 'Properties']}
body={cssStringToTableArray(fluidPadding, true)}
copyable={[true, (t) => `@include ${t};`, false]}
copyable={[true, (t) => `@include %${t};`, false]}
/>

20
src/docs/styles/tokens/variables/main.stories.mdx Normal file
View file

@ -0,0 +1,20 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
import { scssVariablesToTableArray } from '../../../utils/parseCss';
{/* @ts-ignore */}
import theme from '$lib/scss/tokens/variables/\_theme.scss?raw';
<Meta title="Styles/Tokens/Variables" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Token variables
<CopyTable
title="Theme"
header={['Variable', 'Properties']}
body={scssVariablesToTableArray(theme)}
copyable={[true, false]}
/>

8
src/docs/utils/parseCss.js
View file

@ -20,6 +20,14 @@ export const cssStringToTableArray = (cssString, withInclude = false) => {
});
};
export const scssVariablesToTableArray = (scssString) => {
const regExp = /^(\$[a-zA-Z0-9-_]+):\s*(.+)$/gm;
const matches = scssString.matchAll(regExp);
return Array.from(matches).map((match) => {
return [match[1], match[2]];
});
};
export const extractCssColourVariables = (cssString) => {
const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
const cssVariables = [...cssString.matchAll(variableRegexp)].map(

1
src/scss/_mixins.scss
View file

@ -3,3 +3,4 @@
@forward 'tokens/backgrounds/mixins/main';
@forward 'tokens/spacers/mixins/main';
@forward 'tokens/text/mixins/main';
@forward 'tokens/variables/main';

34
src/scss/mixins/texts/_note.scss
View file

@ -1,34 +0,0 @@
@import '../fonts/variables';
@mixin note-text {
h2,
h3,
h4,
h5,
h6 {
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 {
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;
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-position: 0 1.1rem;
background-repeat: repeat-x;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
}
}

1
src/scss/tokens/variables/_main.scss Normal file
View file

@ -0,0 +1 @@
@forward 'theme';

8
src/scss/tokens/variables/_theme.scss Normal file
View file

@ -0,0 +1,8 @@
// SCSS mirrors for theme CSS variables
$theme-colour-background: var(--theme-colour-background);
$theme-colour-text-primary: var(--theme-colour-text-primary);
$theme-colour-text-secondary: var(--theme-colour-text-secondary);
$theme-colour-accent: var(--theme-colour-accent);
$theme-colour-brand-logo: var(--theme-colour-brand-logo);
$theme-colour-brand-rules: var(--theme-colour-brand-rules);
$theme-colour-brand-shadow: var(--theme-colour-brand-shadow);