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

body text mixins and reset WIP

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-08-07 18:59:01 +05:30
parent addf8e0ef4
commit a658b5291e
7 changed files with 166 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -176,9 +176,9 @@
<style lang="scss">
@use '../../scss/mixins' as *;
.byline a {
text-decoration: none;
text-decoration-line: none;
&:hover {
text-decoration: underline;
text-decoration-line: underline;
}
}

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

@ -2,12 +2,24 @@
body {
font-size: 1rem;
color: #404040;
@include font-sans;
@include font-regular;
@include leading-normal;
@include leading-tight;
// Font-smoothing
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.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;
}
}
}
// SIZE RANGE REFERENCE //
@ -27,54 +39,22 @@ body {
// HEADINGS
/////////////
h1,
h2,
h3,
h5,
h6 {
@include text-primary;
}
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);
@include h1;
}
h2,
h3,
h2 {
@include h2;
}
h3 {
@include h3;
}
h4,
h5,
h6 {
@include font-subhed;
@include leading-tighter;
margin-block-start: calc(var(--theme-font-size-base) * 1.5);
}
h2 {
@include text-xl;
margin-block-end: calc(var(--theme-font-size-base) * 0.75);
}
h3 {
@include text-lg;
margin-block-end: calc(var(--theme-font-size-base) * 0.625);
}
h4 {
@include text-base;
@include text-secondary;
@include tracking-wider;
text-transform: uppercase;
margin-block-end: calc(var(--theme-font-size-base) * 0.5);
}
h5 {
@include text-sm;
margin-block-end: calc(var(--theme-font-size-base) * 0.375);
}
h6 {
@include text-sm;
@include font-regular;
text-transform: uppercase;
margin-block-end: calc(var(--theme-font-size-base) * 0.375);
@include h4;
}
//////////////
@ -83,15 +63,7 @@ h6 {
%body-type-block {
display: block;
margin-block-start: 0px;
margin-block-end: calc(var(--theme-font-size-base) * 1.125);
margin-inline-start: 0px;
margin-inline-end: 0px;
@include font-body;
@include text-base;
@include font-regular;
@include leading-normal;
@include text-primary;
@include body-text;
}
p {
@ -109,17 +81,36 @@ ul {
}
a {
color: currentColor;
text-decoration: underline;
text-underline-offset: 2px;
text-underline-offset: 8%;
text-decoration-thickness: from-font;
@include body-link;
}
em {
font-style: italic;
}
strong {
@include font-bold;
}
pre,
code,
kbd {
@include font-mono;
@include text-sm;
@include text-secondary;
@include fmx-0;
@include fmt-0;
@include fmb-3;
}
kbd {
background-color: $theme-colour-text-primary;
color: $theme-colour-background;
border-radius: 0.3rem;
@include fpx-2;
@include fpy-1;
}
figcaption {
@include text-sm;
@include font-regular;
@ -129,24 +120,30 @@ figcaption {
}
blockquote {
margin-inline: 0;
padding-left: 1rem;
border-left: 1px solid $theme-colour-brand-rules;
@include fmy-6;
@include fmx-0;
@include fpl-3;
@include fpy-3;
@include fpr-1;
border-left: 2px solid $theme-colour-brand-rules;
@include fmy-3;
p {
@include font-body;
@include text-lg;
&:last-of-type {
@include fmb-2;
}
@include leading-tight;
@include fmb-1;
font-style: italic;
}
blockquote {
margin-block: 0;
@include fmb-0;
@include fmt-3;
border: 0;
padding-left: 0;
@include fpy-0;
@include fpl-0;
p {
@include text-sm;
@include font-note;
@include fm-0;
font-style: normal;
}
}
}

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

@ -1,4 +1,5 @@
// 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-padding-levels: (
'0': 0,
'1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),

8
src/scss/tokens/text/mixins/_letter-spacing.scss
View file

@ -2,13 +2,13 @@
letter-spacing: -0.05em;
}
@mixin tracking-tight {
letter-spacing: -0.025em;
letter-spacing: -0.03em;
}
@mixin tracking-normal {
letter-spacing: 0em;
}
@mixin tracking-wide {
letter-spacing: 0.025em;
letter-spacing: 0.03em;
}
@mixin tracking-wider {
letter-spacing: 0.05em;
@ -20,13 +20,13 @@
letter-spacing: -0.05em !important;
}
@mixin \!tracking-tight {
letter-spacing: -0.025em !important;
letter-spacing: -0.03em !important;
}
@mixin \!tracking-normal {
letter-spacing: 0em !important;
}
@mixin \!tracking-wide {
letter-spacing: 0.025em !important;
letter-spacing: 0.03em !important;
}
@mixin \!tracking-wider {
letter-spacing: 0.05em !important;

16
src/scss/tokens/text/mixins/_line-height.scss
View file

@ -2,35 +2,35 @@
line-height: 1;
}
@mixin leading-tighter {
line-height: 1.125;
line-height: 1.1;
}
@mixin leading-tight {
line-height: 1.25;
line-height: 1.3;
}
@mixin leading-normal {
line-height: 1.5;
}
@mixin leading-loose {
line-height: 1.75;
line-height: 1.7;
}
@mixin leading-looser {
line-height: 1.875;
line-height: 1.9;
}
@mixin \!leading-none {
line-height: 1 !important;
}
@mixin \!leading-tighter {
line-height: 1.125 !important;
line-height: 1.1 !important;
}
@mixin \!leading-tight {
line-height: 1.25 !important;
line-height: 1.3 !important;
}
@mixin \!leading-normal {
line-height: 1.5 !important;
}
@mixin \!leading-loose {
line-height: 1.75 !important;
line-height: 1.7 !important;
}
@mixin \!leading-looser {
line-height: 1.875 !important;
line-height: 1.9 !important;
}

1
src/scss/tokens/text/mixins/_main.scss
View file

@ -5,3 +5,4 @@
@forward 'letter-spacing';
@forward 'line-height';
@forward 'text-stroke';
@forward 'text-role';

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

@ -0,0 +1,86 @@
@use 'color' as *;
@use 'font-family' as *;
@use 'font-size' as *;
@use 'font-weight' as *;
@use 'letter-spacing' as *;
@use 'line-height' as *;
@use '../../spacers/mixins/main' as *;
@mixin h1 {
@include text-primary;
@include font-bold;
@include font-hed;
@include text-3xl;
@include leading-none;
@include fmt-1;
@include fmb-3;
}
@mixin h2 {
@include text-primary;
@include font-bold;
@include font-subhed;
@include leading-tighter;
@include text-xl;
@include fmt-7;
@include fmb-3;
}
@mixin h3 {
@include text-primary;
@include font-semibold;
@include font-subhed;
@include leading-tighter;
@include text-base;
@include fmt-5;
@include fmb-1;
}
@mixin h4 {
@include text-primary;
@include font-subhed;
@include leading-tight;
@include text-sm;
@include text-secondary;
@include tracking-wide;
text-transform: uppercase;
@include fmt-4;
@include fmb-1;
}
@mixin body-text {
@include fmt-0;
@include fmb-3;
@include fmx-0;
@include font-body;
@include text-base;
@include font-regular;
@include leading-normal;
@include text-primary;
}
@mixin body-note {
@include fmt-0;
@include fmb-1;
@include fmx-0;
@include font-note;
@include text-base;
@include font-light;
@include text-primary;
@include leading-tight;
}
@mixin body-link {
color: currentColor;
text-decoration: underline;
text-underline-offset: 5%;
text-underline-position: under;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-decoration-color: var(--theme-colour-text-secondary);
}
// @mixin \!h1 {
// @include \!text-primary;
// @include \!font-bold;
// }