Skip to content

Instantly share code, notes, and snippets.

@sebastiano-guerriero
Created October 28, 2019 09:07
Show Gist options
  • Save sebastiano-guerriero/969bf9d874743dd2c787791e04090347 to your computer and use it in GitHub Desktop.
Save sebastiano-guerriero/969bf9d874743dd2c787791e04090347 to your computer and use it in GitHub Desktop.
:root {
// type scale
--text-scale-ratio: 1.2;
--text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));
--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-lg: calc(var(--text-md) * var(--text-scale-ratio));
--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
}
@rayjr6409
Copy link

:root {

// type scale

--text-scale-ratio: 1.2;

--text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));

--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));

--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));

--text-lg: calc(var(--text-md) * var(--text-scale-ratio));

--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));

--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));

--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment