Extend spacing scale
By probably too much.
This commit is contained in:
Adam Wathan
parent
9a8c170223
commit
dc9d510c8a
8 changed files with 270401 additions and 738 deletions
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,7 @@ import log from './util/log'
|
|||
|
||||
const featureFlags = {
|
||||
future: [],
|
||||
experimental: ['extendedSpacingScale', 'extendedFontSizeScale', 'additionalBreakpoint'],
|
||||
experimental: ['extendedFontSizeScale', 'additionalBreakpoint'],
|
||||
}
|
||||
|
||||
export function flagEnabled(config, flag) {
|
||||
|
|
|
|||
|
|
@ -1,111 +0,0 @@
|
|||
export default {
|
||||
theme: {
|
||||
spacing: {
|
||||
px: '1px',
|
||||
0: '0',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
11: '2.75rem',
|
||||
12: '3rem',
|
||||
13: '3.25rem',
|
||||
14: '3.5rem',
|
||||
15: '3.75rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
44: '11rem',
|
||||
48: '12rem',
|
||||
52: '13rem',
|
||||
56: '14rem',
|
||||
60: '15rem',
|
||||
64: '16rem',
|
||||
72: '18rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
},
|
||||
inset: (theme, { negative }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
minWidth: {
|
||||
0: '0',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
},
|
||||
width: (theme) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
screen: '100vw',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
}),
|
||||
maxWidth: (theme, { breakpoints }) => ({
|
||||
none: 'none',
|
||||
0: '0rem',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
lg: '32rem',
|
||||
xl: '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
...breakpoints(theme('screens')),
|
||||
}),
|
||||
maxHeight: (theme) => ({
|
||||
screen: '100vh',
|
||||
...theme('spacing'),
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import defaultConfig from '../../stubs/defaultConfig.stub.js'
|
||||
import { flagEnabled } from '../featureFlags'
|
||||
import extendedSpacingScale from '../flagged/extendedSpacingScale.js'
|
||||
import extendedFontSizeScale from '../flagged/extendedFontSizeScale.js'
|
||||
import additionalBreakpoint from '../flagged/additionalBreakpoint'
|
||||
import { flatMap, get } from 'lodash'
|
||||
|
|
@ -11,7 +10,6 @@ export default function getAllConfigs(config, defaultPresets = [defaultConfig])
|
|||
})
|
||||
|
||||
const features = {
|
||||
extendedSpacingScale,
|
||||
extendedFontSizeScale,
|
||||
additionalBreakpoint,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,23 +129,83 @@ module.exports = {
|
|||
spacing: {
|
||||
px: '1px',
|
||||
0: '0',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
11: '2.75rem',
|
||||
12: '3rem',
|
||||
13: '3.25rem',
|
||||
14: '3.5rem',
|
||||
15: '3.75rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
44: '11rem',
|
||||
48: '12rem',
|
||||
52: '13rem',
|
||||
56: '14rem',
|
||||
60: '15rem',
|
||||
64: '16rem',
|
||||
72: '18rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
'1/16': '6.25%',
|
||||
'2/16': '12.5%',
|
||||
'3/16': '18.75%',
|
||||
'4/16': '25%',
|
||||
'5/16': '31.25%',
|
||||
'6/16': '37.5%',
|
||||
'7/16': '43.75%',
|
||||
'8/16': '50%',
|
||||
'9/16': '56.25%',
|
||||
'10/16': '62.5%',
|
||||
'11/16': '68.75%',
|
||||
'12/16': '75%',
|
||||
'13/16': '81.25%',
|
||||
'14/16': '87.5%',
|
||||
'15/16': '93.75%',
|
||||
full: '100%',
|
||||
},
|
||||
backgroundColor: (theme) => theme('colors'),
|
||||
backgroundImage: {
|
||||
|
|
@ -300,10 +360,11 @@ module.exports = {
|
|||
full: '100%',
|
||||
screen: '100vh',
|
||||
}),
|
||||
inset: {
|
||||
0: '0',
|
||||
inset: (theme, { negative }) => ({
|
||||
auto: 'auto',
|
||||
},
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
letterSpacing: {
|
||||
tighter: '-0.05em',
|
||||
tight: '-0.025em',
|
||||
|
|
@ -338,12 +399,13 @@ module.exports = {
|
|||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
maxHeight: {
|
||||
full: '100%',
|
||||
maxHeight: (theme) => ({
|
||||
screen: '100vh',
|
||||
},
|
||||
...theme('spacing'),
|
||||
}),
|
||||
maxWidth: (theme, { breakpoints }) => ({
|
||||
none: 'none',
|
||||
0: '0rem',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
|
|
@ -354,7 +416,10 @@ module.exports = {
|
|||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
...breakpoints(theme('screens')),
|
||||
}),
|
||||
minHeight: {
|
||||
|
|
@ -365,6 +430,8 @@ module.exports = {
|
|||
minWidth: {
|
||||
0: '0',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
},
|
||||
objectPosition: {
|
||||
bottom: 'bottom',
|
||||
|
|
@ -426,34 +493,9 @@ module.exports = {
|
|||
width: (theme) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
screen: '100vw',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
}),
|
||||
zIndex: {
|
||||
auto: 'auto',
|
||||
|
|
@ -479,6 +521,10 @@ module.exports = {
|
|||
10: 'repeat(10, minmax(0, 1fr))',
|
||||
11: 'repeat(11, minmax(0, 1fr))',
|
||||
12: 'repeat(12, minmax(0, 1fr))',
|
||||
12: 'repeat(13, minmax(0, 1fr))',
|
||||
12: 'repeat(14, minmax(0, 1fr))',
|
||||
12: 'repeat(15, minmax(0, 1fr))',
|
||||
12: 'repeat(16, minmax(0, 1fr))',
|
||||
},
|
||||
gridAutoColumns: {
|
||||
auto: 'auto',
|
||||
|
|
@ -500,6 +546,10 @@ module.exports = {
|
|||
'span-10': 'span 10 / span 10',
|
||||
'span-11': 'span 11 / span 11',
|
||||
'span-12': 'span 12 / span 12',
|
||||
'span-13': 'span 13 / span 13',
|
||||
'span-14': 'span 14 / span 14',
|
||||
'span-15': 'span 15 / span 15',
|
||||
'span-16': 'span 16 / span 16',
|
||||
'span-full': '1 / -1',
|
||||
},
|
||||
gridColumnStart: {
|
||||
|
|
@ -517,6 +567,10 @@ module.exports = {
|
|||
11: '11',
|
||||
12: '12',
|
||||
13: '13',
|
||||
14: '14',
|
||||
15: '15',
|
||||
16: '16',
|
||||
17: '17',
|
||||
},
|
||||
gridColumnEnd: {
|
||||
auto: 'auto',
|
||||
|
|
@ -533,6 +587,10 @@ module.exports = {
|
|||
11: '11',
|
||||
12: '12',
|
||||
13: '13',
|
||||
14: '14',
|
||||
15: '15',
|
||||
16: '16',
|
||||
17: '17',
|
||||
},
|
||||
gridTemplateRows: {
|
||||
none: 'none',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue