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

add new design tokens

Browse source
This commit is contained in:
madrilene 2024-02-20 08:46:14 +01:00
parent c126a926c6
commit 1fbc1b310b
15 changed files with 93 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/_data/designTokens/textLeading.json Normal file
View file

@ -0,0 +1,18 @@
{
"title": "Leading",
"description": "Ratio-based leading/line-height values",
"items": [
{
"name": "Flat",
"value": 1
},
{
"name": "Fine",
"value": 1.2
},
{
"name": "Standard",
"value": 1.5
}
]
}

23
src/_data/designTokens/textWeights.json Normal file
View file

@ -0,0 +1,23 @@
{
"title": "Text Weights",
"description": "Helper classes and custom properties for common font weights",
"meta": {},
"items": [
{
"name": "Regular",
"value": 400
},
{
"name": "Medium",
"value": 500
},
{
"name": "Bold",
"value": 700
},
{
"name": "Extra Bold",
"value": 800
}
]
}

2
src/_data/designTokens/viewports.json
View file

@ -2,5 +2,7 @@
"title": "Viewports",
"description": "The min and maximum viewports used to generate fluid type and space scales.",
"min": 320,
"sm": 640,
"md": 1000,
"max": 1350
}

2
src/assets/css/blocks/button.css
View file

@ -6,7 +6,7 @@
display: inline-block;
font: inherit;
padding: 0.3rem var(--space-s);
font-weight: 700;
font-weight: var(--font-bold);
text-decoration: none;
text-align: center;
}

5
src/assets/css/blocks/code.css
View file

@ -39,7 +39,6 @@ pre[class*='language-'] {
word-wrap: normal;
color: var(--color-text-accent);
background: var(--color-bg);
line-height: 1.5;
border-radius: var(--border-radius);
hyphens: none;
}
@ -165,12 +164,12 @@ pre[class*='language-'] {
.token.id {
color: var(--color-code-pink);
font-weight: bold;
font-weight: var(--font-bold);
}
.token.important {
color: var(--color-code-pink);
font-weight: bold;
font-weight: var(--font-bold);
}
.token.inserted {

4
src/assets/css/blocks/details.css
View file

@ -24,7 +24,7 @@ summary {
gap: 0 1ch;
cursor: pointer;
list-style: none;
font-weight: bold;
font-weight: var(--font-bold);
font-size: var(--size-step-1);
}
@ -40,7 +40,7 @@ summary::before {
color: var(--color-primary);
font-family: var(--font-mono);
font-size: var(--size-step-0);
font-weight: normal;
font-weight: var(--font-regular);
line-height: 0.5;
transform: scale(1.4);
transform-origin: right bottom;

2
src/assets/css/blocks/section.css
View file

@ -8,7 +8,7 @@
}
.section blockquote {
font-weight: 700;
font-weight: var(--font-bold);
line-height: 1;
font-size: var(--size-step-4);
letter-spacing: var(--tracking-s);

2
src/assets/css/blocks/site-logo.css
View file

@ -2,7 +2,7 @@
--gutter: var(--space-xs);
padding: var(--space-s) 0;
font-size: var(--size-step-0);
font-weight: bold;
font-weight: var(--font-bold);
text-transform: uppercase;
text-decoration: none;
}

2
src/assets/css/blocks/site-nav-drawer.css
View file

@ -86,7 +86,7 @@
.site-nav-drawer span {
font-size: var(--size-step-min-1);
font-weight: bold;
font-weight: var(--font-bold);
text-transform: uppercase;
padding-inline-end: var(--space-2xs);
}

2
src/assets/css/blocks/table.css
View file

@ -37,7 +37,7 @@ td {
td::before {
content: attr(data-label);
float: start;
font-weight: bold;
font-weight: var(--font-bold);
}
td:last-child {
border-block-end: 0;

2
src/assets/css/blocks/tag.css
View file

@ -11,7 +11,7 @@
font-size: var(--size-step-min-2);
text-transform: uppercase;
padding: 0.1rem 0.625rem;
font-weight: 700;
font-weight: var(--font-bold);
}
.card .post-tag {

2
src/assets/css/blocks/theme-switch.css
View file

@ -8,7 +8,7 @@
border-radius: var(--border-radius);
font-size: var(--size-step-min-2);
padding: 0.1rem 0.625rem;
font-weight: 700;
font-weight: var(--font-bold);
min-block-size: 1.5em;
text-transform: uppercase;
}

30
src/assets/css/global/fonts.css
View file

@ -5,15 +5,19 @@
font-style: normal;
font-display: swap;
font-weight: 800;
src: local(''), url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2');
src:
local(''),
url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2');
}
@font-face {
font-family: Figtree;
font-style: normal;
font-display: swap;
font-weight: 600;
src: local(''), url('/assets/fonts/figtree/figtree-semibold.woff2') format('woff2');
font-weight: 700;
src:
local(''),
url('/assets/fonts/figtree/figtree-bold.woff2') format('woff2');
}
@font-face {
@ -21,7 +25,9 @@
font-style: normal;
font-display: swap;
font-weight: 500;
src: local(''), url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2');
src:
local(''),
url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2');
}
@font-face {
@ -29,7 +35,8 @@
font-style: italic;
font-display: swap;
font-weight: 500;
src: local(''),
src:
local(''),
url('/assets/fonts/figtree/figtree-mediumitalic.woff2') format('woff2');
}
}
@ -38,7 +45,8 @@
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Figtree';
src: url('/assets/fonts/figtree/figtree-variable[wght].woff2')
src:
url('/assets/fonts/figtree/figtree-variable[wght].woff2')
format('woff2 supports variations'),
url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2-variations');
font-weight: 300 900;
@ -48,7 +56,8 @@
@font-face {
font-family: 'Figtree';
src: url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
src:
url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
format('woff2 supports variations'),
url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
format('woff2-variations');
@ -64,7 +73,8 @@
font-style: normal;
font-display: swap;
font-weight: 700;
src: local(''),
src:
local(''),
url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2');
}
@ -73,5 +83,7 @@
font-style: normal;
font-display: swap;
font-weight: normal;
src: local(''), url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2');
src:
local(''),
url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2');
}

6
src/assets/css/global/global-styles.css
View file

@ -14,7 +14,7 @@ body {
letter-spacing: var(--tracking);
display: flex;
flex-direction: column;
font-weight: 500;
font-weight: var(--font-medium);
accent-color: var(--color-primary);
}
@ -28,7 +28,7 @@ h2,
h3 {
line-height: 1.2;
letter-spacing: var(--tracking-s);
font-weight: 700;
font-weight: var(--font-bold);
font-family: var(--font-display);
}
@ -74,7 +74,7 @@ svg {
}
strong {
font-weight: 800;
font-weight: var(--font-extra-bold);
}
hr {

26
tailwind.config.js
View file

@ -11,12 +11,17 @@ const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js');
const colorTokens = require('./src/_data/designTokens/colors.json');
const fontTokens = require('./src/_data/designTokens/fonts.json');
const spacingTokens = require('./src/_data/designTokens/spacing.json');
const textSizeTokens = require('./src/_data/designTokens/sizes.json');
const textSizeTokens = require('./src/_data/designTokens/textSizes.json');
const textLeadingTokens = require('./src/_data/designTokens/textLeading.json');
const textWeightTokens = require('./src/_data/designTokens/textWeights.json');
const viewportTokens = require('./src/_data/designTokens/viewports.json');
// Process design tokens
const colors = tokensToTailwind(colorTokens.items);
const fontFamily = tokensToTailwind(fontTokens.items);
const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items));
const fontWeight = tokensToTailwind(textWeightTokens.items);
const fontLeading = tokensToTailwind(textLeadingTokens.items);
const spacing = tokensToTailwind(clampGenerator(spacingTokens.items));
module.exports = {
@ -24,19 +29,16 @@ module.exports = {
presets: [],
theme: {
screens: {
ltsm: {max: '39em'},
sm: '40em',
md: '63em'
ltsm: {max: `${viewportTokens.sm}px`},
sm: `${viewportTokens.sm}px`,
md: `${viewportTokens.md}px`
},
colors,
spacing,
fontSize,
fontFamily,
fontWeight: {
normal: 500,
semi: 600,
bold: 800
},
fontSize,
fontWeight,
fontLeading,
backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'),
margin: ({theme}) => ({
@ -91,7 +93,9 @@ module.exports = {
{key: 'colors', prefix: 'color'},
{key: 'spacing', prefix: 'space'},
{key: 'fontSize', prefix: 'size'},
{key: 'fontFamily', prefix: 'font'}
{key: 'fontLeading', prefix: 'leading'},
{key: 'fontFamily', prefix: 'font'},
{key: 'fontWeight', prefix: 'font'}
];
groups.forEach(({key, prefix}) => {