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

add font sizes and fluid spacers

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-08-04 18:50:11 +05:30
parent 8b527e9730
commit addf8e0ef4
13 changed files with 643 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/GraphicBlock/GraphicBlock.svelte
View file

@ -142,7 +142,7 @@
@include text-sm;
@include text-primary;
&:last-of-type {
@extend %fmb-1;
@include fmb-1;
}
}
// Notes text...

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

@ -109,8 +109,8 @@
header.headline {
:global {
h1 {
@extend %fmy-1;
@extend %fmx-auto;
@include fmy-1;
@include fmx-auto;
}
p {
@ -129,7 +129,7 @@
}
.article-metadata {
.byline-container {
@extend %fmb-1;
@include fmb-1;
}
.byline {

2
src/components/SimpleTimeline/SimpleTimeline.svelte
View file

@ -121,7 +121,7 @@
}
}
:global(p) {
@extend %fmb-2;
@include fmb-2;
@include leading-normal;
@include font-light;
@include text-sm;

40
src/components/SiteHeadline/SiteHeadline.svelte
View file

@ -77,12 +77,6 @@
let hedClass;
$: {
switch (hedSize) {
// case 'biggest':
// hedClass = 'text-6xl';
// break;
// case 'bigger':
// hedClass = 'text-5xl';
// break;
case 'big':
hedClass = 'text-4xl';
break;
@ -100,7 +94,7 @@
<div class="title">
{#if section}
<p
class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
>
{#if sectionUrl}
<a class="no-underline !text-secondary" href="{sectionUrl}"
@ -112,14 +106,18 @@
</p>
{/if}
{#if hed}
<h1 class="my-0 font-hed text-primary leading-none {hedClass}">
<h1
class="font-hed text-primary leading-none font-medium fmt-1 fmb-3 {hedClass}"
>
{hed}
</h1>
{/if}
</div>
<aside class="article-metadata mt-2 font-subhed">
<div class="byline-container">
<div class="byline text-sm text-primary font-bold leading-tight">
<div
class="byline text-xs text-primary font-bold leading-tighter fmb-1"
>
By
{#if authors.length > 0}
{#each authors as author, i}
@ -140,7 +138,7 @@
</div>
</div>
<div
class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
class="dateline-container fmt-0 text-secondary text-xs leading-tighter"
>
{#if isValidDate(publishTime)}
<div>
@ -176,10 +174,32 @@
</Block>
<style lang="scss">
@use '../../scss/mixins' as *;
.byline a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
@media (max-width: $column-width-narrow) {
h1 {
@include font-semibold;
}
}
@media (min-width: $column-width-narrower) {
.dateline-container {
display: flex;
flex-flow: wrap;
div {
&:not(:last-child) {
&:after {
content: '·';
@include fmx-1;
}
}
}
}
}
</style>

23
src/components/Theme/themes/common.js
View file

@ -1,4 +1,5 @@
/** @type {Omit<import('../@types/component').Theme, "colour">} */
// Generated from https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=22&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=+fs&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
export default {
font: {
family: {
@ -12,17 +13,17 @@ export default {
note: 'var(--theme-font-family-sans-serif)',
},
size: {
xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',
xs: 'clamp(0.89rem, -0.08vw + 0.91rem, 0.84rem)',
sm: 'clamp(1rem, 0.08vw + 0.98rem, 1.05rem)',
base: 'clamp(1.13rem, 0.31vw + 1.06rem, 1.31rem)',
lg: 'clamp(1.27rem, 0.63vw + 1.14rem, 1.64rem)',
xl: 'clamp(1.42rem, 1.04vw + 1.21rem, 2.05rem)',
'2xl': 'clamp(1.6rem, 1.6vw + 1.28rem, 2.56rem)',
'3xl': 'clamp(1.8rem, 2.34vw + 1.33rem, 3.2rem)',
'4xl': 'clamp(2.03rem, 3.3vw + 1.37rem, 4.01rem)',
'5xl': 'clamp(2.28rem, 4.54vw + 1.37rem, 5.01rem)',
'6xl': 'clamp(2.57rem, 6.15vw + 1.33rem, 6.26rem)',
xxs: 'clamp(0.79rem, -0.14vw + 0.82rem, 0.7rem)',
xs: 'clamp(0.89rem, -0.01vw + 0.89rem, 0.88rem)',
sm: 'clamp(1rem, 0.17vw + 0.97rem, 1.1rem)',
base: 'clamp(1.13rem, 0.42vw + 1.04rem, 1.38rem)',
lg: 'clamp(1.27rem, 0.76vw + 1.11rem, 1.72rem)',
xl: 'clamp(1.42rem, 1.21vw + 1.18rem, 2.15rem)',
'2xl': 'clamp(1.6rem, 1.81vw + 1.24rem, 2.69rem)',
'3xl': 'clamp(1.8rem, 2.59vw + 1.28rem, 3.36rem)',
'4xl': 'clamp(2.03rem, 3.61vw + 1.3rem, 4.2rem)',
'5xl': 'clamp(2.28rem, 4.94vw + 1.29rem, 5.25rem)',
'6xl': 'clamp(2.57rem, 6.65vw + 1.24rem, 6.56rem)',
},
},
};

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

@ -52,15 +52,15 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
<CopyTable
title="Fluid margin"
mdnLink="margin"
header={['Class', 'Extend', 'Properties']}
header={['Class', 'Include', 'Properties']}
body={cssStringToTableArray(fluidMargin, true)}
copyable={[true, (t) => `@extend %${t};`, false]}
copyable={[true, (t) => `@include ${t};`, false]}
/>
<CopyTable
title="Fluid padding"
mdnLink="margin"
header={['Class', 'Extend', 'Properties']}
header={['Class', 'Include', 'Properties']}
body={cssStringToTableArray(fluidPadding, true)}
copyable={[true, (t) => `@extend %${t};`, false]}
copyable={[true, (t) => `@include ${t};`, false]}
/>

26
src/scss/reset/_typography.scss
View file

@ -3,13 +3,26 @@
body {
font-size: 1rem;
@include font-sans;
@include font-normal;
@include font-regular;
@include leading-normal;
// Font-smoothing
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// SIZE RANGE REFERENCE //
// xxs: 12.64px
// xs: 14.22px
// sm: 16.00px → 17.60px
// base: 18.00px → 22.00px
// lg: 20.25px → 27.50px
// xl: 22.78px → 34.38px
// 2xl: 25.63px → 42.97px
// 3xl: 28.83px → 53.71px
// 4xl: 32.44px → 67.14px
// 5xl: 36.49px → 83.92px
// 6xl: 41.05px → 104.90px
/////////////
// HEADINGS
/////////////
@ -25,6 +38,7 @@ h1 {
@include font-hed;
@include text-3xl;
@include leading-none;
margin-block-start: calc(var(--theme-font-size-base) * 1.5);
margin-block-end: calc(var(--theme-font-size-base) * 0.75);
}
@ -58,7 +72,7 @@ h5 {
}
h6 {
@include text-sm;
@include font-normal;
@include font-regular;
text-transform: uppercase;
margin-block-end: calc(var(--theme-font-size-base) * 0.375);
}
@ -75,7 +89,7 @@ h6 {
margin-inline-end: 0px;
@include font-body;
@include text-base;
@include font-normal;
@include font-regular;
@include leading-normal;
@include text-primary;
}
@ -108,7 +122,7 @@ strong {
figcaption {
@include text-sm;
@include font-normal;
@include font-regular;
@include leading-normal;
@include text-secondary;
@include font-note;
@ -118,12 +132,12 @@ blockquote {
margin-inline: 0;
padding-left: 1rem;
border-left: 1px solid $theme-colour-brand-rules;
@extend %fmy-6;
@include fmy-6;
p {
@include font-body;
@include text-lg;
&:last-of-type {
@extend %fmb-2;
@include fmb-2;
}
}
blockquote {

62
src/scss/tokens/spacers/_fluid-margin.scss
View file

@ -1,5 +1,55 @@
@use 'mixins/fluid-margin' as *;
@each $level, $value in $fluid-margin-levels {
%fm-#{$level} {
margin: $value;
}
%fmt-#{$level} {
margin-top: $value;
}
%fmr-#{$level} {
margin-right: $value;
}
%fmb-#{$level} {
margin-bottom: $value;
}
%fml-#{$level} {
margin-left: $value;
}
%fmx-#{$level} {
margin-right: $value;
margin-left: $value;
}
%fmy-#{$level} {
margin-top: $value;
margin-bottom: $value;
}
%\!fm-#{$level} {
margin: $value !important;
}
%\!fmt-#{$level} {
margin-top: $value !important;
}
%\!fmr-#{$level} {
margin-right: $value !important;
}
%\!fmb-#{$level} {
margin-bottom: $value !important;
}
%\!fml-#{$level} {
margin-left: $value !important;
}
%\!fmx-#{$level} {
margin-right: $value !important;
margin-left: $value !important;
}
%\!fmy-#{$level} {
margin-top: $value !important;
margin-bottom: $value !important;
}
}
$fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
@each $level, $value in $fluid-margin-placeholder-levels {
@ -49,20 +99,20 @@ $fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
}
.fm-auto {
@extend %fm-auto;
@include fm-auto;
}
.fmx-auto {
@extend %fmx-auto;
@include fmx-auto;
}
.fmy-auto {
@extend %fmy-auto;
@include fmy-auto;
}
.\!fm-auto {
@extend %\!fm-auto;
@include \!fm-auto;
}
.\!fmx-auto {
@extend %\!fmx-auto;
@include \!fmx-auto;
}
.\!fmy-auto {
@extend %\!fmy-auto;
@include \!fmy-auto;
}

50
src/scss/tokens/spacers/_fluid-padding.scss
View file

@ -1,5 +1,55 @@
@use 'mixins/fluid-padding' as *;
@each $level, $value in $fluid-padding-levels {
%fp-#{$level} {
padding: $value;
}
%fpt-#{$level} {
padding-top: $value;
}
%fpr-#{$level} {
padding-right: $value;
}
%fpb-#{$level} {
padding-bottom: $value;
}
%fpl-#{$level} {
padding-left: $value;
}
%fpx-#{$level} {
padding-right: $value;
padding-left: $value;
}
%fpy-#{$level} {
padding-top: $value;
padding-bottom: $value;
}
%\!fp-#{$level} {
padding: $value !important;
}
%\!fpt-#{$level} {
padding-top: $value !important;
}
%\!fpr-#{$level} {
padding-right: $value !important;
}
%\!fpb-#{$level} {
padding-bottom: $value !important;
}
%\!fpl-#{$level} {
padding-left: $value !important;
}
%\!fpx-#{$level} {
padding-right: $value !important;
padding-left: $value !important;
}
%\!fpy-#{$level} {
padding-top: $value !important;
padding-bottom: $value !important;
}
}
$fluid-padding-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
@each $level, $value in $fluid-padding-placeholder-levels {

296
src/scss/tokens/spacers/mixins/_fluid-margin.scss
View file

@ -1,85 +1,257 @@
// Generated from https://utopia.fyi/space/calculator?c=320,18,1.125,1280,22,1.25,7,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
@use 'sass:map';
$fluid-margin-levels: (
'0': 0,
'1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
'1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),
'2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
'3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
'4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
'5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
'6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
'7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
'8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
'9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
'3': clamp(0.88rem, calc(0.81rem + 0.31vw), 1.06rem),
'4': clamp(1.13rem, calc(1.04rem + 0.42vw), 1.38rem),
'5': clamp(1.69rem, calc(1.56rem + 0.63vw), 2.06rem),
'6': clamp(2.25rem, calc(2.08rem + 0.83vw), 2.75rem),
'7': clamp(3.38rem, calc(3.13rem + 1.25vw), 4.13rem),
'8': clamp(4.5rem, calc(4.17rem + 1.67vw), 5.5rem),
'9': clamp(6.75rem, calc(6.25rem + 2.5vw), 8.25rem),
);
@each $level, $value in $fluid-margin-levels {
%fm-#{$level} {
margin: $value;
}
%fmt-#{$level} {
margin-top: $value;
}
%fmr-#{$level} {
margin-right: $value;
}
%fmb-#{$level} {
margin-bottom: $value;
}
%fml-#{$level} {
margin-left: $value;
}
%fmx-#{$level} {
margin-right: $value;
margin-left: $value;
}
%fmy-#{$level} {
margin-top: $value;
margin-bottom: $value;
}
%\!fm-#{$level} {
margin: $value !important;
}
%\!fmt-#{$level} {
margin-top: $value !important;
}
%\!fmr-#{$level} {
margin-right: $value !important;
}
%\!fmb-#{$level} {
margin-bottom: $value !important;
}
%\!fml-#{$level} {
margin-left: $value !important;
}
%\!fmx-#{$level} {
margin-right: $value !important;
margin-left: $value !important;
}
%\!fmy-#{$level} {
margin-top: $value !important;
margin-bottom: $value !important;
}
@mixin fm-0 {
margin: map.get($fluid-margin-levels, '0');
}
@mixin fmx-0 {
margin-inline: map.get($fluid-margin-levels, '0');
}
@mixin fmy-0 {
margin-block: map.get($fluid-margin-levels, '0');
}
@mixin fmt-0 {
margin-top: map.get($fluid-margin-levels, '0');
}
@mixin fmb-0 {
margin-bottom: map.get($fluid-margin-levels, '0');
}
@mixin fml-0 {
margin-left: map.get($fluid-margin-levels, '0');
}
@mixin fmr-0 {
margin-right: map.get($fluid-margin-levels, '0');
}
%fm-auto {
@mixin fm-1 {
margin: map.get($fluid-margin-levels, '1');
}
@mixin fmx-1 {
margin-inline: map.get($fluid-margin-levels, '1');
}
@mixin fmy-1 {
margin-block: map.get($fluid-margin-levels, '1');
}
@mixin fmt-1 {
margin-top: map.get($fluid-margin-levels, '1');
}
@mixin fmb-1 {
margin-bottom: map.get($fluid-margin-levels, '1');
}
@mixin fml-1 {
margin-left: map.get($fluid-margin-levels, '1');
}
@mixin fmr-1 {
margin-right: map.get($fluid-margin-levels, '1');
}
@mixin fm-2 {
margin: map.get($fluid-margin-levels, '2');
}
@mixin fmx-2 {
margin-inline: map.get($fluid-margin-levels, '2');
}
@mixin fmy-2 {
margin-block: map.get($fluid-margin-levels, '2');
}
@mixin fmt-2 {
margin-top: map.get($fluid-margin-levels, '2');
}
@mixin fmb-2 {
margin-bottom: map.get($fluid-margin-levels, '2');
}
@mixin fml-2 {
margin-left: map.get($fluid-margin-levels, '2');
}
@mixin fmr-2 {
margin-right: map.get($fluid-margin-levels, '2');
}
@mixin fm-3 {
margin: map.get($fluid-margin-levels, '3');
}
@mixin fmx-3 {
margin-inline: map.get($fluid-margin-levels, '3');
}
@mixin fmy-3 {
margin-block: map.get($fluid-margin-levels, '3');
}
@mixin fmt-3 {
margin-top: map.get($fluid-margin-levels, '3');
}
@mixin fmb-3 {
margin-bottom: map.get($fluid-margin-levels, '3');
}
@mixin fml-3 {
margin-left: map.get($fluid-margin-levels, '3');
}
@mixin fmr-3 {
margin-right: map.get($fluid-margin-levels, '3');
}
@mixin fm-4 {
margin: map.get($fluid-margin-levels, '4');
}
@mixin fmx-4 {
margin-inline: map.get($fluid-margin-levels, '4');
}
@mixin fmy-4 {
margin-block: map.get($fluid-margin-levels, '4');
}
@mixin fmt-4 {
margin-top: map.get($fluid-margin-levels, '4');
}
@mixin fmb-4 {
margin-bottom: map.get($fluid-margin-levels, '4');
}
@mixin fml-4 {
margin-left: map.get($fluid-margin-levels, '4');
}
@mixin fmr-4 {
margin-right: map.get($fluid-margin-levels, '4');
}
@mixin fm-5 {
margin: map.get($fluid-margin-levels, '5');
}
@mixin fmx-5 {
margin-inline: map.get($fluid-margin-levels, '5');
}
@mixin fmy-5 {
margin-block: map.get($fluid-margin-levels, '5');
}
@mixin fmt-5 {
margin-top: map.get($fluid-margin-levels, '5');
}
@mixin fmb-5 {
margin-bottom: map.get($fluid-margin-levels, '5');
}
@mixin fml-5 {
margin-left: map.get($fluid-margin-levels, '5');
}
@mixin fmr-5 {
margin-right: map.get($fluid-margin-levels, '5');
}
@mixin fm-6 {
margin: map.get($fluid-margin-levels, '6');
}
@mixin fmx-6 {
margin-inline: map.get($fluid-margin-levels, '6');
}
@mixin fmy-6 {
margin-block: map.get($fluid-margin-levels, '6');
}
@mixin fmt-6 {
margin-top: map.get($fluid-margin-levels, '6');
}
@mixin fmb-6 {
margin-bottom: map.get($fluid-margin-levels, '6');
}
@mixin fml-6 {
margin-left: map.get($fluid-margin-levels, '6');
}
@mixin fmr-6 {
margin-right: map.get($fluid-margin-levels, '6');
}
@mixin fm-7 {
margin: map.get($fluid-margin-levels, '7');
}
@mixin fmx-7 {
margin-inline: map.get($fluid-margin-levels, '7');
}
@mixin fmy-7 {
margin-block: map.get($fluid-margin-levels, '7');
}
@mixin fmt-7 {
margin-top: map.get($fluid-margin-levels, '7');
}
@mixin fmb-7 {
margin-bottom: map.get($fluid-margin-levels, '7');
}
@mixin fml-7 {
margin-left: map.get($fluid-margin-levels, '7');
}
@mixin fmr-7 {
margin-right: map.get($fluid-margin-levels, '7');
}
@mixin fm-8 {
margin: map.get($fluid-margin-levels, '8');
}
@mixin fmx-8 {
margin-inline: map.get($fluid-margin-levels, '8');
}
@mixin fmy-8 {
margin-block: map.get($fluid-margin-levels, '8');
}
@mixin fmt-8 {
margin-top: map.get($fluid-margin-levels, '8');
}
@mixin fmb-8 {
margin-bottom: map.get($fluid-margin-levels, '8');
}
@mixin fml-8 {
margin-left: map.get($fluid-margin-levels, '8');
}
@mixin fmr-8 {
margin-right: map.get($fluid-margin-levels, '8');
}
@mixin fm-9 {
margin: map.get($fluid-margin-levels, '9');
}
@mixin fmx-9 {
margin-inline: map.get($fluid-margin-levels, '9');
}
@mixin fmy-9 {
margin-block: map.get($fluid-margin-levels, '9');
}
@mixin fmt-9 {
margin-top: map.get($fluid-margin-levels, '9');
}
@mixin fmb-9 {
margin-bottom: map.get($fluid-margin-levels, '9');
}
@mixin fml-9 {
margin-left: map.get($fluid-margin-levels, '9');
}
@mixin fmr-9 {
margin-right: map.get($fluid-margin-levels, '9');
}
@mixin fm-auto {
margin: auto;
}
%fmx-auto {
@mixin fmx-auto {
margin-right: auto;
margin-left: auto;
}
%fmy-auto {
@mixin fmy-auto {
margin-top: auto;
margin-bottom: auto;
}
%\!fm-auto {
@mixin \!fm-auto {
margin: auto !important;
}
%\!fmx-auto {
@mixin \!fmx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
%\!fmy-auto {
@mixin \!fmy-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}

281
src/scss/tokens/spacers/mixins/_fluid-padding.scss
View file

@ -1,64 +1,235 @@
// Generated from https://utopia.fyi/space/calculator?c=320,18,1.125,1280,22,1.25,7,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
$fluid-padding-levels: (
'0': 0,
'1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
'1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),
'2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
'3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
'4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
'5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
'6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
'7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
'8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
'9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
'3': clamp(0.88rem, calc(0.81rem + 0.31vw), 1.06rem),
'4': clamp(1.13rem, calc(1.04rem + 0.42vw), 1.38rem),
'5': clamp(1.69rem, calc(1.56rem + 0.63vw), 2.06rem),
'6': clamp(2.25rem, calc(2.08rem + 0.83vw), 2.75rem),
'7': clamp(3.38rem, calc(3.13rem + 1.25vw), 4.13rem),
'8': clamp(4.5rem, calc(4.17rem + 1.67vw), 5.5rem),
'9': clamp(6.75rem, calc(6.25rem + 2.5vw), 8.25rem),
);
@each $level, $value in $fluid-padding-levels {
%fp-#{$level} {
padding: $value;
}
%fpt-#{$level} {
padding-top: $value;
}
%fpr-#{$level} {
padding-right: $value;
}
%fpb-#{$level} {
padding-bottom: $value;
}
%fpl-#{$level} {
padding-left: $value;
}
%fpx-#{$level} {
padding-right: $value;
padding-left: $value;
}
%fpy-#{$level} {
padding-top: $value;
padding-bottom: $value;
}
@mixin fp-0 {
padding: map.get($fluid-padding-levels, '0');
}
@mixin fpx-0 {
padding-inline: map.get($fluid-padding-levels, '0');
}
@mixin fpy-0 {
padding-block: map.get($fluid-padding-levels, '0');
}
@mixin fpt-0 {
padding-top: map.get($fluid-padding-levels, '0');
}
@mixin fpb-0 {
padding-bottom: map.get($fluid-padding-levels, '0');
}
@mixin fpl-0 {
padding-left: map.get($fluid-padding-levels, '0');
}
@mixin fpr-0 {
padding-right: map.get($fluid-padding-levels, '0');
}
%\!fp-#{$level} {
padding: $value !important;
}
%\!fpt-#{$level} {
padding-top: $value !important;
}
%\!fpr-#{$level} {
padding-right: $value !important;
}
%\!fpb-#{$level} {
padding-bottom: $value !important;
}
%\!fpl-#{$level} {
padding-left: $value !important;
}
%\!fpx-#{$level} {
padding-right: $value !important;
padding-left: $value !important;
}
%\!fpy-#{$level} {
padding-top: $value !important;
padding-bottom: $value !important;
}
@mixin fp-1 {
padding: map.get($fluid-padding-levels, '1');
}
@mixin fpx-1 {
padding-inline: map.get($fluid-padding-levels, '1');
}
@mixin fpy-1 {
padding-block: map.get($fluid-padding-levels, '1');
}
@mixin fpt-1 {
padding-top: map.get($fluid-padding-levels, '1');
}
@mixin fpb-1 {
padding-bottom: map.get($fluid-padding-levels, '1');
}
@mixin fpl-1 {
padding-left: map.get($fluid-padding-levels, '1');
}
@mixin fpr-1 {
padding-right: map.get($fluid-padding-levels, '1');
}
@mixin fp-2 {
padding: map.get($fluid-padding-levels, '2');
}
@mixin fpx-2 {
padding-inline: map.get($fluid-padding-levels, '2');
}
@mixin fpy-2 {
padding-block: map.get($fluid-padding-levels, '2');
}
@mixin fpt-2 {
padding-top: map.get($fluid-padding-levels, '2');
}
@mixin fpb-2 {
padding-bottom: map.get($fluid-padding-levels, '2');
}
@mixin fpl-2 {
padding-left: map.get($fluid-padding-levels, '2');
}
@mixin fpr-2 {
padding-right: map.get($fluid-padding-levels, '2');
}
@mixin fp-3 {
padding: map.get($fluid-padding-levels, '3');
}
@mixin fpx-3 {
padding-inline: map.get($fluid-padding-levels, '3');
}
@mixin fpy-3 {
padding-block: map.get($fluid-padding-levels, '3');
}
@mixin fpt-3 {
padding-top: map.get($fluid-padding-levels, '3');
}
@mixin fpb-3 {
padding-bottom: map.get($fluid-padding-levels, '3');
}
@mixin fpl-3 {
padding-left: map.get($fluid-padding-levels, '3');
}
@mixin fpr-3 {
padding-right: map.get($fluid-padding-levels, '3');
}
@mixin fp-4 {
padding: map.get($fluid-padding-levels, '4');
}
@mixin fpx-4 {
padding-inline: map.get($fluid-padding-levels, '4');
}
@mixin fpy-4 {
padding-block: map.get($fluid-padding-levels, '4');
}
@mixin fpt-4 {
padding-top: map.get($fluid-padding-levels, '4');
}
@mixin fpb-4 {
padding-bottom: map.get($fluid-padding-levels, '4');
}
@mixin fpl-4 {
padding-left: map.get($fluid-padding-levels, '4');
}
@mixin fpr-4 {
padding-right: map.get($fluid-padding-levels, '4');
}
@mixin fp-5 {
padding: map.get($fluid-padding-levels, '5');
}
@mixin fpx-5 {
padding-inline: map.get($fluid-padding-levels, '5');
}
@mixin fpy-5 {
padding-block: map.get($fluid-padding-levels, '5');
}
@mixin fpt-5 {
padding-top: map.get($fluid-padding-levels, '5');
}
@mixin fpb-5 {
padding-bottom: map.get($fluid-padding-levels, '5');
}
@mixin fpl-5 {
padding-left: map.get($fluid-padding-levels, '5');
}
@mixin fpr-5 {
padding-right: map.get($fluid-padding-levels, '5');
}
@mixin fp-6 {
padding: map.get($fluid-padding-levels, '6');
}
@mixin fpx-6 {
padding-inline: map.get($fluid-padding-levels, '6');
}
@mixin fpy-6 {
padding-block: map.get($fluid-padding-levels, '6');
}
@mixin fpt-6 {
padding-top: map.get($fluid-padding-levels, '6');
}
@mixin fpb-6 {
padding-bottom: map.get($fluid-padding-levels, '6');
}
@mixin fpl-6 {
padding-left: map.get($fluid-padding-levels, '6');
}
@mixin fpr-6 {
padding-right: map.get($fluid-padding-levels, '6');
}
@mixin fp-7 {
padding: map.get($fluid-padding-levels, '7');
}
@mixin fpx-7 {
padding-inline: map.get($fluid-padding-levels, '7');
}
@mixin fpy-7 {
padding-block: map.get($fluid-padding-levels, '7');
}
@mixin fpt-7 {
padding-top: map.get($fluid-padding-levels, '7');
}
@mixin fpb-7 {
padding-bottom: map.get($fluid-padding-levels, '7');
}
@mixin fpl-7 {
padding-left: map.get($fluid-padding-levels, '7');
}
@mixin fpr-7 {
padding-right: map.get($fluid-padding-levels, '7');
}
@mixin fp-8 {
padding: map.get($fluid-padding-levels, '8');
}
@mixin fpx-8 {
padding-inline: map.get($fluid-padding-levels, '8');
}
@mixin fpy-8 {
padding-block: map.get($fluid-padding-levels, '8');
}
@mixin fpt-8 {
padding-top: map.get($fluid-padding-levels, '8');
}
@mixin fpb-8 {
padding-bottom: map.get($fluid-padding-levels, '8');
}
@mixin fpl-8 {
padding-left: map.get($fluid-padding-levels, '8');
}
@mixin fpr-8 {
padding-right: map.get($fluid-padding-levels, '8');
}
@mixin fp-9 {
padding: map.get($fluid-padding-levels, '9');
}
@mixin fpx-9 {
padding-inline: map.get($fluid-padding-levels, '9');
}
@mixin fpy-9 {
padding-block: map.get($fluid-padding-levels, '9');
}
@mixin fpt-9 {
padding-top: map.get($fluid-padding-levels, '9');
}
@mixin fpb-9 {
padding-bottom: map.get($fluid-padding-levels, '9');
}
@mixin fpl-9 {
padding-left: map.get($fluid-padding-levels, '9');
}
@mixin fpr-9 {
padding-right: map.get($fluid-padding-levels, '9');
}
%fp-auto {

8
src/scss/tokens/text/_font-weight.scss
View file

@ -9,8 +9,8 @@
.font-light {
@include font-light;
}
.font-normal {
@include font-normal;
.font-regular {
@include font-regular;
}
.font-medium {
@include font-medium;
@ -36,8 +36,8 @@
.\!font-light {
@include \!font-light;
}
.\!font-normal {
@include \!font-normal;
.\!font-regular {
@include \!font-regular;
}
.\!font-medium {
@include \!font-medium;

4
src/scss/tokens/text/mixins/_font-weight.scss
View file

@ -7,7 +7,7 @@
@mixin font-light {
font-weight: 300;
}
@mixin font-normal {
@mixin font-regular {
font-weight: 400;
}
@mixin font-medium {
@ -34,7 +34,7 @@
@mixin \!font-light {
font-weight: 300 !important;
}
@mixin \!font-normal {
@mixin \!font-regular {
font-weight: 400 !important;
}
@mixin \!font-medium {