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

scrub text styles into components

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-08-08 17:30:05 +05:30
parent d7517c13c9
commit e53e0911ad
20 changed files with 531 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -41,7 +41,7 @@
/** Drag handle colour */
export let handleColour = 'white';
/** Drag handle opacity */
export let handleInactiveOpacity = 0.6;
export let handleInactiveOpacity = 0.9;
/** Margin at the edge of the image to stop dragging */
export let handleMargin = 20;
/** Percentage of the component width the handle will travel ona key press */
@ -225,7 +225,7 @@
</div>
{#if $$slots.caption}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<aside class="before-after-caption my-0 mx-auto" id="{`${id}-caption`}">
<aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
<!-- Caption for image credits -->
<slot name="caption" />
</aside>
@ -236,6 +236,7 @@
<style lang="scss">
@use '../../scss/mixins' as *;
figure.before-after-container {
box-sizing: content-box;
@ -261,9 +262,8 @@
margin-bottom: 0;
}
p {
@include font-note;
@include text-sm;
@include leading-tight;
@include body-caption;
color: #ffffff;
}
}
&.before {
@ -289,14 +289,17 @@
top: calc(50% - 20px);
border: 4px solid var(--before-after-handle-colour);
opacity: var(--before-after-handle-inactive-opacity, 0.6);
box-shadow: 1px 1px 3px #333;
&:hover,
&:active,
&:focus {
opacity: 1;
}
&:before,
&:after {
content: '';
box-shadow: 0 0 3px #333;
height: 9999px;
position: absolute;
left: calc(50% - 2px);
@ -328,18 +331,12 @@
border-right: 10px solid var(--before-after-handle-colour);
}
}
aside.before-after-caption {
@include font-note;
@include text-secondary;
@include fmt-2;
:global {
p {
@include font-note;
@include text-secondary;
@include text-xs;
@include leading-tight;
&:last-of-type {
margin-bottom: 0;
}
@include body-caption;
}
}
}

4
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -37,7 +37,7 @@
<Story
name="Default"
args="{{
src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
id: 'abortion-rights-map',
ariaLabel: 'map',
frameTitle: 'Global abortion access',
@ -49,7 +49,7 @@
frameTitle="Global abortion access"
ariaLabel="map"
id="abortion-rights-map"
src="https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html"
src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
title="Global abortion access"
description="A map of worldwide access to abortion."
notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"

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

@ -111,9 +111,3 @@
<slot name="notes" />
{/if}
</GraphicBlock>
<style lang="scss">
.datawrapper-chart {
margin: auto;
}
</style>

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

@ -32,11 +32,11 @@
<Block width="{width}" id="{id}" class="photo {cls}">
<iframe
class="h-screen"
src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
title="{altText}"
width="700"
height="540"
style="border: 1px solid #aaa; width: 100%; height: 800px; height: calc(100vh - 100px);"
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
></iframe>
</Block>

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

@ -85,16 +85,16 @@
<figure
bind:this="{container}"
aria-label="media"
class="w-full mt-0 mx-0 mb-6 flex flex-col relative"
class="w-full flex flex-col relative"
>
{#if !lazy || (intersectable && intersecting)}
<img class="w-full m-0" src="{src}" alt="{altText}" />
<img class="w-full my-0" src="{src}" alt="{altText}" />
{:else}
<div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
{/if}
{#if caption}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<figcaption class="font-note my-0 text-xs leading-tight">
<figcaption>
{caption}
</figcaption>
</PaddingReset>

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

@ -92,7 +92,7 @@
{:else if title}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<h3 class="mt-0 fmb-1">{title}</h3>
<h3>{title}</h3>
{#if description}
{@html marked(description)}
{/if}

15
src/components/NoteText/NoteText.svelte
View file

@ -22,24 +22,21 @@
@import '../../scss/mixins';
.article-block.notes {
@include fmb-9;
@include fmt-7;
h2,
h3,
h4,
h5,
h6 {
margin: var(--theme-font-size-base) 0 0;
@include text-sm;
@include text-primary;
@include leading-tight;
@include tracking-normal;
@include font-bold;
@include h3;
text-transform: none;
}
p {
@include font-note;
@include font-light;
@include body-note;
@include text-sm;
@include leading-tight;
}
}
</style>

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

@ -98,7 +98,7 @@
</script>
<Block width="{width}" id="{id}" class="photo-carousel {cls}">
<div class="carousel-container mb-2" bind:clientWidth="{containerWidth}">
<div class="carousel-container" bind:clientWidth="{containerWidth}">
<Splide
hasTrack="{false}"
options="{{
@ -120,7 +120,7 @@
style="height: {carouselHeight}px;"
>
<img
class="w-full h-full"
class="w-full h-full my-0"
data-splide-lazy="{photo.src}"
alt="{photo.altText}"
style:object-fit="{photo.objectFit ||
@ -154,7 +154,7 @@
{:else}
{#key activeImageIndex}
<p
class="caption font-note text-secondary text-xs mb-0 mx-0 mt-0.5"
class="caption body-caption fmt-2"
in:fly|local="{{ x: 20, duration: 175 }}"
>
{photos[activeImageIndex].caption}

2
src/components/PhotoPack/PhotoPack.stories.svelte
View file

@ -66,7 +66,7 @@
Class: 'mb-2',
Width: 'wide',
CaptionWidth: 'normal',
Gap: '10',
Gap: '15',
Images: [
{
Src: 'https://via.placeholder.com/1024x768.jpg',

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

@ -25,7 +25,7 @@
* Gap between images.
* @type {number}
*/
export let gap = 10;
export let gap = 15;
const random4 = () =>
Math.floor((1 + Math.random()) * 0x10000)
@ -120,18 +120,16 @@
{/each}
</div>
<PaddingReset containerIsFluid="{width === 'fluid'}">
<Block width="{captionWidth}">
<div class="captions-container">
{#each rows as row, ri}
{#each row as img, i}
{#if img.caption}
<div id="{id}-figure-{ri}-{i}" class="caption mt-0 mx-0 fmb-2">
{@html marked(img.caption)}
</div>
{/if}
{/each}
<Block width="{captionWidth}" class="photopack-captions-container">
{#each rows as row, ri}
{#each row as img, i}
{#if img.caption}
<div id="{id}-figure-{ri}-{i}" class="caption">
{@html marked(img.caption)}
</div>
{/if}
{/each}
</div>
{/each}
</Block>
</PaddingReset>
</Block>
@ -152,17 +150,13 @@
}
}
div.captions-container {
div.caption {
&:last-of-type {
margin-bottom: 0;
}
:global(p) {
@include text-xs;
@include leading-tight;
@include font-note;
@include text-secondary;
margin: 0;
:global {
.photopack-captions-container {
@include \!fmy-2;
div.caption {
p {
@include body-caption;
}
}
}
}

61
src/components/ReferralBlock/ReferralBlock.svelte
View file

@ -79,14 +79,14 @@
<Block width="{width}" id="{id}" class="referrals-block {cls}">
{#if heading}
<div
class="heading font-subhed text-secondary underline text-xs font-bold"
class="heading h4 font-bold"
class:stacked="{clientWidth && clientWidth < 750}"
>
{heading}
</div>
{/if}
<div
class="referral-container inline-flex flex-wrap w-full justify-center"
class="referral-container inline-flex flex-wrap w-full justify-between"
class:stacked="{clientWidth && clientWidth < 750}"
class:xs="{clientWidth && clientWidth < 450}"
bind:clientWidth="{clientWidth}"
@ -103,22 +103,13 @@
class="headline"
class:xs="{clientWidth && clientWidth < 450}"
>
<div
class="kicker m-0 font-note text-secondary"
data-chromatic="ignore"
>
<div class="kicker m-0 body-caption" data-chromatic="ignore">
{referral.kicker.name}
</div>
<div
class="title m-0 font-subhed font-bold text-primary"
data-chromatic="ignore"
>
<div class="title m-0 body-caption" data-chromatic="ignore">
{referral.title}
</div>
<div
class="publish-time font-note text-secondary"
data-chromatic="ignore"
>
<div class="publish-time body-caption" data-chromatic="ignore">
{getTime(new Date(referral.display_time))}
</div>
</div>
@ -146,15 +137,12 @@
@use '../../scss/mixins' as *;
div.heading {
margin: 0 0 5px;
&.stacked {
max-width: 450px;
margin: 0 auto 5px;
}
}
.referral-container {
gap: 10px 40px;
a {
text-decoration: none;
}
@ -162,14 +150,15 @@
.referral {
width: 100%;
.headline {
padding: 0 10px 0 0;
width: calc(100% - 7rem);
}
}
}
.referral {
display: block;
width: calc(50% - 20px);
width: calc(50% - 30px);
max-width: 450px;
@include fmy-1;
&:hover {
.title {
@ -182,42 +171,34 @@
.headline {
display: inline-block;
width: calc(100% - 140px);
padding: 0 10px 0 0;
width: calc(100% - 9rem);
@include fpr-2;
&.xs {
width: calc(100% - 80px);
.kicker {
font-size: 0.85rem;
}
.title {
font-size: 0.9rem;
line-height: 1.1rem;
}
}
.kicker {
font-size: 0.9rem;
@include text-xxs;
}
.title {
font-size: 0.95rem;
line-height: 1.15rem;
@include font-medium;
@include text-sm;
@include text-primary;
}
.publish-time {
font-size: 0.75rem;
margin: 2px 0 0;
@include text-xxs;
}
}
.image-container {
border-radius: 10px;
border-radius: 0.25rem;
border: 1px solid $theme-colour-brand-rules;
width: 140px;
height: 90px;
width: 9rem;
&.xs {
width: 80px;
height: 60px;
width: 7rem;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.1s;
height: inherit;
}
}
}

2
src/components/Scroller/Background.svelte
View file

@ -26,7 +26,7 @@
<style lang="scss">
.step-background {
transition: 0.5s opacity ease;
transition: 0.35s opacity ease;
&.hidden {
opacity: 0;

8
src/components/Scroller/Foreground.svelte
View file

@ -46,9 +46,11 @@
width: initial;
max-width: initial;
.step-foreground {
max-width: 550px;
padding: 1.2rem 30px;
background: rgba(255, 255, 255, 0.8);
max-width: calc($column-width-normal * 0.9);
@include fpy-5;
@include fpx-4;
background: rgba(255, 255, 255, 0.9);
:global(p:last-child) {
margin-bottom: 0;
}

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

@ -115,7 +115,7 @@
</div>
<aside class="article-metadata mt-2 font-subhed">
<div class="byline-container">
<div class="byline body-caption !font-bold">
<div class="byline body-caption">
By
{#if authors.length > 0}
{#each authors as author, i}
@ -171,10 +171,14 @@
<style lang="scss">
@use '../../scss/mixins' as *;
.byline a {
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
.byline {
@include font-bold;
a {
text-decoration-line: none;
&:hover {
text-decoration-line: underline;
}
}
}

21
src/scss/reset/_main.scss
View file

@ -1,3 +1,4 @@
@use '../mixins' as *;
@import 'normalize.css';
@import 'typography';
@ -9,4 +10,24 @@
body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
::selection {
background-color: $theme-colour-text-secondary;
color: $theme-colour-background;
}
}
img {
max-width: 100%;
@include fmy-5;
}
figure {
@include fmy-5;
@include fmx-auto;
}
iframe {
border: 0;
width: 100%;
}

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

@ -14,11 +14,6 @@ body {
.theme {
font-size: calc(0.95 * var(--theme-font-size-base));
color: var(--theme-colour-text-primary);
::selection {
background-color: $theme-colour-text-secondary;
color: $theme-colour-background;
}
}
}
@ -112,11 +107,8 @@ kbd {
}
figcaption {
@include text-sm;
@include font-regular;
@include leading-normal;
@include text-secondary;
@include font-note;
@include fmt-2;
@include body-caption;
}
blockquote {

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

@ -17,12 +17,10 @@
margin-left: $value;
}
%fmx-#{$level} {
margin-right: $value;
margin-left: $value;
margin-inline: $value;
}
%fmy-#{$level} {
margin-top: $value;
margin-bottom: $value;
margin-block: $value;
}
%\!fm-#{$level} {
@ -41,12 +39,10 @@
margin-left: $value !important;
}
%\!fmx-#{$level} {
margin-right: $value !important;
margin-left: $value !important;
margin-inline: $value !important;
}
%\!fmy-#{$level} {
margin-top: $value !important;
margin-bottom: $value !important;
margin-block: $value !important;
}
}

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

@ -34,6 +34,27 @@ $fluid-margin-levels: (
@mixin fmr-0 {
margin-right: map.get($fluid-margin-levels, '0');
}
@mixin \!fm-0 {
margin: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fmx-0 {
margin-inline: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fmy-0 {
margin-block: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fmt-0 {
margin-top: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fmb-0 {
margin-bottom: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fml-0 {
margin-left: map.get($fluid-margin-levels, '0') !important;
}
@mixin \!fmr-0 {
margin-right: map.get($fluid-margin-levels, '0') !important;
}
@mixin fm-1 {
margin: map.get($fluid-margin-levels, '1');
@ -53,8 +74,29 @@ $fluid-margin-levels: (
@mixin fml-1 {
margin-left: map.get($fluid-margin-levels, '1');
}
@mixin fmr-1 {
margin-right: map.get($fluid-margin-levels, '1');
@mixin \!fmr-1 {
margin-right: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fm-1 {
margin: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fmx-1 {
margin-inline: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fmy-1 {
margin-block: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fmt-1 {
margin-top: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fmb-1 {
margin-bottom: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fml-1 {
margin-left: map.get($fluid-margin-levels, '1') !important;
}
@mixin \!fmr-1 {
margin-right: map.get($fluid-margin-levels, '1') !important;
}
@mixin fm-2 {
@ -78,6 +120,27 @@ $fluid-margin-levels: (
@mixin fmr-2 {
margin-right: map.get($fluid-margin-levels, '2');
}
@mixin \!fm-2 {
margin: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fmx-2 {
margin-inline: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fmy-2 {
margin-block: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fmt-2 {
margin-top: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fmb-2 {
margin-bottom: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fml-2 {
margin-left: map.get($fluid-margin-levels, '2') !important;
}
@mixin \!fmr-2 {
margin-right: map.get($fluid-margin-levels, '2') !important;
}
@mixin fm-3 {
margin: map.get($fluid-margin-levels, '3');
@ -100,6 +163,27 @@ $fluid-margin-levels: (
@mixin fmr-3 {
margin-right: map.get($fluid-margin-levels, '3');
}
@mixin \!fm-3 {
margin: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fmx-3 {
margin-inline: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fmy-3 {
margin-block: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fmt-3 {
margin-top: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fmb-3 {
margin-bottom: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fml-3 {
margin-left: map.get($fluid-margin-levels, '3') !important;
}
@mixin \!fmr-3 {
margin-right: map.get($fluid-margin-levels, '3') !important;
}
@mixin fm-4 {
margin: map.get($fluid-margin-levels, '4');
@ -122,6 +206,27 @@ $fluid-margin-levels: (
@mixin fmr-4 {
margin-right: map.get($fluid-margin-levels, '4');
}
@mixin \!fm-4 {
margin: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fmx-4 {
margin-inline: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fmy-4 {
margin-block: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fmt-4 {
margin-top: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fmb-4 {
margin-bottom: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fml-4 {
margin-left: map.get($fluid-margin-levels, '4') !important;
}
@mixin \!fmr-4 {
margin-right: map.get($fluid-margin-levels, '4') !important;
}
@mixin fm-5 {
margin: map.get($fluid-margin-levels, '5');
@ -144,6 +249,27 @@ $fluid-margin-levels: (
@mixin fmr-5 {
margin-right: map.get($fluid-margin-levels, '5');
}
@mixin \!fm-5 {
margin: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fmx-5 {
margin-inline: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fmy-5 {
margin-block: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fmt-5 {
margin-top: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fmb-5 {
margin-bottom: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fml-5 {
margin-left: map.get($fluid-margin-levels, '5') !important;
}
@mixin \!fmr-5 {
margin-right: map.get($fluid-margin-levels, '5') !important;
}
@mixin fm-6 {
margin: map.get($fluid-margin-levels, '6');
@ -166,6 +292,27 @@ $fluid-margin-levels: (
@mixin fmr-6 {
margin-right: map.get($fluid-margin-levels, '6');
}
@mixin \!fm-6 {
margin: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fmx-6 {
margin-inline: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fmy-6 {
margin-block: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fmt-6 {
margin-top: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fmb-6 {
margin-bottom: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fml-6 {
margin-left: map.get($fluid-margin-levels, '6') !important;
}
@mixin \!fmr-6 {
margin-right: map.get($fluid-margin-levels, '6') !important;
}
@mixin fm-7 {
margin: map.get($fluid-margin-levels, '7');
@ -188,6 +335,27 @@ $fluid-margin-levels: (
@mixin fmr-7 {
margin-right: map.get($fluid-margin-levels, '7');
}
@mixin \!fm-7 {
margin: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fmx-7 {
margin-inline: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fmy-7 {
margin-block: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fmt-7 {
margin-top: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fmb-7 {
margin-bottom: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fml-7 {
margin-left: map.get($fluid-margin-levels, '7') !important;
}
@mixin \!fmr-7 {
margin-right: map.get($fluid-margin-levels, '7') !important;
}
@mixin fm-8 {
margin: map.get($fluid-margin-levels, '8');
@ -210,6 +378,27 @@ $fluid-margin-levels: (
@mixin fmr-8 {
margin-right: map.get($fluid-margin-levels, '8');
}
@mixin \!fm-8 {
margin: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fmx-8 {
margin-inline: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fmy-8 {
margin-block: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fmt-8 {
margin-top: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fmb-8 {
margin-bottom: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fml-8 {
margin-left: map.get($fluid-margin-levels, '8') !important;
}
@mixin \!fmr-8 {
margin-right: map.get($fluid-margin-levels, '8') !important;
}
@mixin fm-9 {
margin: map.get($fluid-margin-levels, '9');
@ -232,6 +421,27 @@ $fluid-margin-levels: (
@mixin fmr-9 {
margin-right: map.get($fluid-margin-levels, '9');
}
@mixin \!fm-9 {
margin: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fmx-9 {
margin-inline: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fmy-9 {
margin-block: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fmt-9 {
margin-top: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fmb-9 {
margin-bottom: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fml-9 {
margin-left: map.get($fluid-margin-levels, '9') !important;
}
@mixin \!fmr-9 {
margin-right: map.get($fluid-margin-levels, '9') !important;
}
@mixin fm-auto {
margin: auto;

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

@ -34,6 +34,27 @@ $fluid-padding-levels: (
@mixin fpr-0 {
padding-right: map.get($fluid-padding-levels, '0');
}
@mixin \!fp-0 {
padding: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpx-0 {
padding-inline: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpy-0 {
padding-block: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpt-0 {
padding-top: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpb-0 {
padding-bottom: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpl-0 {
padding-left: map.get($fluid-padding-levels, '0') !important;
}
@mixin \!fpr-0 {
padding-right: map.get($fluid-padding-levels, '0') !important;
}
@mixin fp-1 {
padding: map.get($fluid-padding-levels, '1');
@ -56,6 +77,27 @@ $fluid-padding-levels: (
@mixin fpr-1 {
padding-right: map.get($fluid-padding-levels, '1');
}
@mixin \!fp-1 {
padding: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpx-1 {
padding-inline: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpy-1 {
padding-block: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpt-1 {
padding-top: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpb-1 {
padding-bottom: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpl-1 {
padding-left: map.get($fluid-padding-levels, '1') !important;
}
@mixin \!fpr-1 {
padding-right: map.get($fluid-padding-levels, '1') !important;
}
@mixin fp-2 {
padding: map.get($fluid-padding-levels, '2');
@ -78,6 +120,27 @@ $fluid-padding-levels: (
@mixin fpr-2 {
padding-right: map.get($fluid-padding-levels, '2');
}
@mixin \!fp-2 {
padding: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpx-2 {
padding-inline: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpy-2 {
padding-block: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpt-2 {
padding-top: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpb-2 {
padding-bottom: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpl-2 {
padding-left: map.get($fluid-padding-levels, '2') !important;
}
@mixin \!fpr-2 {
padding-right: map.get($fluid-padding-levels, '2') !important;
}
@mixin fp-3 {
padding: map.get($fluid-padding-levels, '3');
@ -100,6 +163,27 @@ $fluid-padding-levels: (
@mixin fpr-3 {
padding-right: map.get($fluid-padding-levels, '3');
}
@mixin \!fp-3 {
padding: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpx-3 {
padding-inline: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpy-3 {
padding-block: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpt-3 {
padding-top: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpb-3 {
padding-bottom: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpl-3 {
padding-left: map.get($fluid-padding-levels, '3') !important;
}
@mixin \!fpr-3 {
padding-right: map.get($fluid-padding-levels, '3') !important;
}
@mixin fp-4 {
padding: map.get($fluid-padding-levels, '4');
@ -122,6 +206,27 @@ $fluid-padding-levels: (
@mixin fpr-4 {
padding-right: map.get($fluid-padding-levels, '4');
}
@mixin \!fp-4 {
padding: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpx-4 {
padding-inline: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpy-4 {
padding-block: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpt-4 {
padding-top: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpb-4 {
padding-bottom: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpl-4 {
padding-left: map.get($fluid-padding-levels, '4') !important;
}
@mixin \!fpr-4 {
padding-right: map.get($fluid-padding-levels, '4') !important;
}
@mixin fp-5 {
padding: map.get($fluid-padding-levels, '5');
@ -144,6 +249,27 @@ $fluid-padding-levels: (
@mixin fpr-5 {
padding-right: map.get($fluid-padding-levels, '5');
}
@mixin \!fp-5 {
padding: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpx-5 {
padding-inline: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpy-5 {
padding-block: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpt-5 {
padding-top: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpb-5 {
padding-bottom: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpl-5 {
padding-left: map.get($fluid-padding-levels, '5') !important;
}
@mixin \!fpr-5 {
padding-right: map.get($fluid-padding-levels, '5') !important;
}
@mixin fp-6 {
padding: map.get($fluid-padding-levels, '6');
@ -166,6 +292,27 @@ $fluid-padding-levels: (
@mixin fpr-6 {
padding-right: map.get($fluid-padding-levels, '6');
}
@mixin \!fp-6 {
padding: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpx-6 {
padding-inline: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpy-6 {
padding-block: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpt-6 {
padding-top: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpb-6 {
padding-bottom: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpl-6 {
padding-left: map.get($fluid-padding-levels, '6') !important;
}
@mixin \!fpr-6 {
padding-right: map.get($fluid-padding-levels, '6') !important;
}
@mixin fp-7 {
padding: map.get($fluid-padding-levels, '7');
@ -188,6 +335,27 @@ $fluid-padding-levels: (
@mixin fpr-7 {
padding-right: map.get($fluid-padding-levels, '7');
}
@mixin \!fp-7 {
padding: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpx-7 {
padding-inline: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpy-7 {
padding-block: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpt-7 {
padding-top: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpb-7 {
padding-bottom: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpl-7 {
padding-left: map.get($fluid-padding-levels, '7') !important;
}
@mixin \!fpr-7 {
padding-right: map.get($fluid-padding-levels, '7') !important;
}
@mixin fp-8 {
padding: map.get($fluid-padding-levels, '8');
@ -210,6 +378,27 @@ $fluid-padding-levels: (
@mixin fpr-8 {
padding-right: map.get($fluid-padding-levels, '8');
}
@mixin \!fp-8 {
padding: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpx-8 {
padding-inline: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpy-8 {
padding-block: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpt-8 {
padding-top: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpb-8 {
padding-bottom: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpl-8 {
padding-left: map.get($fluid-padding-levels, '8') !important;
}
@mixin \!fpr-8 {
padding-right: map.get($fluid-padding-levels, '8') !important;
}
@mixin fp-9 {
padding: map.get($fluid-padding-levels, '9');
@ -232,6 +421,27 @@ $fluid-padding-levels: (
@mixin fpr-9 {
padding-right: map.get($fluid-padding-levels, '9');
}
@mixin \!fp-9 {
padding: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpx-9 {
padding-inline: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpy-9 {
padding-block: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpt-9 {
padding-top: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpb-9 {
padding-bottom: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpl-9 {
padding-left: map.get($fluid-padding-levels, '9') !important;
}
@mixin \!fpr-9 {
padding-right: map.get($fluid-padding-levels, '9') !important;
}
%fp-auto {
padding: auto;

2
src/scss/tokens/text/mixins/_text-role.scss
View file

@ -31,6 +31,7 @@
@include font-semibold;
@include font-subhed;
@include leading-tighter;
@include tracking-normal;
@include text-base;
@include fmt-5;
@include fmb-1;
@ -82,7 +83,6 @@
@mixin body-link {
color: currentColor;
text-decoration: underline;
text-underline-offset: 5%;
text-underline-position: under;
text-decoration-style: dotted;
text-decoration-thickness: 1px;