elf-notes/sass/design/_scales.scss

44 lines
2.3 KiB
SCSS

/* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1024,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|xs-m */
:root {
--step--2: calc(clamp(0.52rem, calc(0.43rem + 0.45vw), 0.72rem));
--step--1: calc(clamp(0.63rem, calc(0.50rem + 0.63vw), 0.90rem));
--step-0: calc(clamp(0.75rem, calc(0.58rem + 0.85vw), 1.13rem));
--step-1: calc(clamp(0.90rem, calc(0.67rem + 1.15vw), 1.41rem));
--step-2: calc(clamp(1.08rem, calc(0.77rem + 1.54vw), 1.76rem));
--step-3: calc(clamp(1.30rem, calc(0.89rem + 2.05vw), 2.20rem));
--step-4: calc(clamp(1.56rem, calc(1.01rem + 2.71vw), 2.75rem));
--step-5: calc(clamp(1.87rem, calc(1.15rem + 3.56vw), 3.43rem));
--half-step-0: calc(clamp(0.75rem, calc(0.58rem + 0.85vw), 1.13rem) / 2);
}
/* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1024,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|xs-m */
:root {
--space-3xs: calc(clamp(0.19rem, calc(0.1rem + 0.43vw), 0.38rem));
--space-2xs: calc(clamp(0.38rem, calc(0.2rem + 0.85vw), 0.75rem));
--space-xs: calc(clamp(0.56rem, calc(0.31rem + 1.28vw), 1.13rem));
--space-s: calc(clamp(0.75rem, calc(0.41rem + 1.7vw), 1.5rem));
--space-m: calc(clamp(1.13rem, calc(0.61rem + 2.56vw), 2.25rem));
--space-l: calc(clamp(1.5rem, calc(0.82rem + 3.41vw), 3rem));
--space-xl: calc(clamp(2.25rem, calc(1.23rem + 5.11vw), 4.5rem));
--space-2xl: calc(clamp(3rem, calc(1.64rem + 6.82vw), 6rem));
--space-3xl: calc(clamp(4.5rem, calc(2.45rem + 10.23vw), 9rem));
/* One-up pairs */
--space-3xs-2xs: calc(clamp(0.19rem, calc(-0.07rem + 1.28vw), 0.75rem));
--space-2xs-xs: calc(clamp(0.38rem, calc(0.03rem + 1.7vw), 1.13rem));
--space-xs-s: calc(clamp(0.56rem, calc(0.14rem + 2.13vw), 1.5rem));
--space-s-m: calc(clamp(0.75rem, calc(0.07rem + 3.41vw), 2.25rem));
--space-m-l: calc(clamp(1.13rem, calc(0.27rem + 4.26vw), 3rem));
--space-l-xl: calc(clamp(1.5rem, calc(0.14rem + 6.82vw), 4.5rem));
--space-xl-2xl: calc(clamp(2.25rem, calc(0.55rem + 8.52vw), 6rem));
--space-2xl-3xl: calc(clamp(3rem, calc(0.27rem + 13.64vw), 9rem));
/* Custom pairs */
--space-s-l: calc(clamp(0.75rem, calc(-0.27rem + 5.11vw), 3rem));
--space-xs-m: calc(clamp(0.56rem, calc(-0.2rem + 3.84vw), 2.25rem));
--space-3xs-l: clamp(0.19rem, calc(-1.09rem + 6.39vw), 3.00rem);
}