Add experimental default line heights

This commit is contained in:
Adam Wathan 2020-08-07 13:43:43 -04:00
parent 037416ac70
commit 4d2e4119fd
4 changed files with 72 additions and 1 deletions

View File

@ -7919,42 +7919,52 @@ video {
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 4rem;
line-height: 1;
}
.leading-3 {
@ -32971,42 +32981,52 @@ video {
.sm\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.sm\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.sm\:text-6xl {
font-size: 4rem;
line-height: 1;
}
.sm\:leading-3 {
@ -57993,42 +58013,52 @@ video {
.md\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.md\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 4rem;
line-height: 1;
}
.md\:leading-3 {
@ -83015,42 +83045,52 @@ video {
.lg\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.lg\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.lg\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.lg\:text-6xl {
font-size: 4rem;
line-height: 1;
}
.lg\:leading-3 {
@ -108037,42 +108077,52 @@ video {
.xl\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.xl\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.xl\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.xl\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.xl\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.xl\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.xl\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.xl\:text-6xl {
font-size: 4rem;
line-height: 1;
}
.xl\:leading-3 {

View File

@ -3,7 +3,7 @@ import chalk from 'chalk'
const featureFlags = {
future: ['removeDeprecatedGapUtilities'],
experimental: ['uniformColorPalette', 'extendedSpacingScale'],
experimental: ['uniformColorPalette', 'extendedSpacingScale', 'defaultLineHeights'],
}
export function flagEnabled(config, flag) {

View File

@ -0,0 +1,16 @@
export default {
theme: {
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['4rem', { lineHeight: '1' }],
},
},
}

View File

@ -15,6 +15,7 @@ import { flagEnabled } from './featureFlags'
import uniformColorPalette from './flagged/uniformColorPalette.js'
import extendedSpacingScale from './flagged/extendedSpacingScale.js'
import defaultLineHeights from './flagged/defaultLineHeights.js'
function getDefaultConfigs(config) {
const configs = [defaultConfig]
@ -27,6 +28,10 @@ function getDefaultConfigs(config) {
configs.unshift(extendedSpacingScale)
}
if (flagEnabled(config, 'defaultLineHeights')) {
configs.unshift(defaultLineHeights)
}
return configs
}