Add PostCSS font family utilities
This commit is contained in:
parent
58d435ae82
commit
c9e4652065
6 changed files with 78 additions and 11 deletions
60
dist/tailwind.css
vendored
60
dist/tailwind.css
vendored
|
|
@ -67,6 +67,18 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -1001,6 +1013,18 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sm\:sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
}
|
||||
|
||||
.sm\:serif {
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
}
|
||||
|
||||
.sm\:mono {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.sm\:bg-light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -1936,6 +1960,18 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.md\:sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
}
|
||||
|
||||
.md\:serif {
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
}
|
||||
|
||||
.md\:mono {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.md\:bg-light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -2871,6 +2907,18 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lg\:sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
}
|
||||
|
||||
.lg\:serif {
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
}
|
||||
|
||||
.lg\:mono {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.lg\:bg-light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -3806,6 +3854,18 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.xl\:sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
}
|
||||
|
||||
.xl\:serif {
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
}
|
||||
|
||||
.xl\:mono {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.xl\:bg-light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
|
|||
2
dist/tailwind.css.map
vendored
2
dist/tailwind.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,13 +1,3 @@
|
|||
// Font family
|
||||
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
@font-family-base: @font-family-sans;
|
||||
|
||||
.sans { font-family: @font-family-sans; }
|
||||
.serif { font-family: @font-family-serif; }
|
||||
.mono { font-family: @font-family-mono; }
|
||||
|
||||
// Default line height
|
||||
@line-height: 1.5;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,11 @@ export default {
|
|||
'pink-lightest': '#fdf2f5',
|
||||
},
|
||||
text: {
|
||||
fonts: {
|
||||
'sans': 'system-ui',
|
||||
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
|
||||
'mono': 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace',
|
||||
},
|
||||
sizes: {
|
||||
'xs': '.75rem', // 12px
|
||||
'sm': '.875rem', // 14px
|
||||
|
|
|
|||
10
src/generators/textFonts.js
Normal file
10
src/generators/textFonts.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import _ from 'lodash'
|
||||
import defineClass from '../util/defineClass'
|
||||
|
||||
export default function ({ text }) {
|
||||
return _.map(text.fonts, (families, font) => {
|
||||
return defineClass(`${font}`, {
|
||||
'font-family': `${families}`,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import _ from 'lodash'
|
|||
import responsive from '../util/responsive'
|
||||
import textSizes from '../generators/textSizes'
|
||||
import textWeights from '../generators/textWeights'
|
||||
import textFonts from '../generators/textFonts'
|
||||
import backgroundColors from '../generators/backgroundColors'
|
||||
import backgroundSize from '../generators/backgroundSize'
|
||||
import borderWidths from '../generators/borderWidths'
|
||||
|
|
@ -22,6 +23,7 @@ export default function(options) {
|
|||
const utilities = _.flatten([
|
||||
textSizes(options),
|
||||
textWeights(options),
|
||||
textFonts(options),
|
||||
backgroundColors(options),
|
||||
backgroundSize(options),
|
||||
borderWidths(options),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue