diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index c32c44a1a..cc2f69a00 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -677,11 +677,11 @@ button, } .font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .text-black, @@ -3427,11 +3427,11 @@ button, } .sm\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .sm\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .sm\:text-black, @@ -6178,11 +6178,11 @@ button, } .md\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .md\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .md\:text-black, @@ -8929,11 +8929,11 @@ button, } .lg\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .lg\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .lg\:text-black, @@ -11680,11 +11680,11 @@ button, } .xl\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .xl\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .xl\:text-black, diff --git a/defaultConfig.js b/defaultConfig.js index fd40748e7..db6736dbf 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -1,3 +1,48 @@ +/* + +Tailwind - The Utility-First CSS Framework + +A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), +David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). + +Welcome to the Tailwind config file. This is where you can customize +Tailwind specifically for your project. Don't be intimidated by the +length of this file. It's really just a big JavaScript object and +we've done our very best to explain each section. + +View the full documentation at https://tailwindcss.com. + + +|------------------------------------------------------------------------------- +| The default config +|------------------------------------------------------------------------------- +| +| This variable contains the default Tailwind config. You don't have +| to use it, but it can sometimes be helpful to have available. For +| example, you may choose to merge your custom configuration +| values with some of the Tailwind defaults. +| +*/ + +var defaultConfig = require('tailwindcss').defaultConfig + + +/* +|------------------------------------------------------------------------------- +| Colors https://tailwindcss.com/docs/color-palette +|------------------------------------------------------------------------------- +| +| Here you can specify the colors used in your project. As you'll see +| below these colors are applied to the text, background and border +| utilities. +| +| We've provided a bunch of colors to get you started, but please modify +| them for your project. Also, how you name your colors is entirely up +| to you. You can use color names (as we've done below), or follow a +| numeric scale (like 100, 200, 300), or something else entirely. +| +*/ + var colors = { 'black': '#000000', 'white': '#ffffff', @@ -71,181 +116,570 @@ var colors = { } module.exports = { + + /* + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/color-palette + |----------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + colors: colors, + + + /* + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive + |----------------------------------------------------------------------------- + | + | Screens in Tailwind are essentially CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. Feel free to have as few or as many screens as you + | want, naming them in whatever way you'd prefer for your project. + | + | Tailwind also allows for more complex screen definitions, which can be + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. + | + */ + screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px', }, - text: { - fonts: { - 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', - 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', - 'mono': '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - }, - sizes: { - 'xs': '.75rem', // 12px - 'sm': '.875rem', // 14px - 'base': '1rem', // 16px - 'lg': '1.125rem', // 18px - 'xl': '1.25rem', // 20px - '2xl': '1.5rem', // 24px - '3xl': '1.875rem', // 30px - '4xl': '2.25rem', // 36px - '5xl': '3rem', // 48px - }, - weights: { - 'hairline': 100, - 'thin': 200, - 'light': 300, - 'normal': 400, - 'medium': 500, - 'semibold': 600, - 'bold': 700, - 'extrabold': 800, - 'black': 900, - }, - leading: { - 'none': 1, - 'tight': 1.25, - 'normal': 1.5, - 'loose': 2, - }, - tracking: { - 'tight': '-0.05em', - 'normal': '0', - 'wide': '0.05em', - }, - colors: colors, + + + /* + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- + | + | Here is where you define your project's font stack, or font families. + | Keep in mind that Tailwind doesn't actually load any fonts for you. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + | Class name: .font-{name} + | + */ + + fonts: { + 'sans': [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + ], + 'serif': [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif', + ], + 'mono': [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace', + ] }, - backgrounds: { - colors: colors, + + + /* + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizes + |----------------------------------------------------------------------------- + | + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + | Class name: .text-{size} + | + */ + + textSizes: { + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.875rem', // 30px + '4xl': '2.25rem', // 36px + '5xl': '3rem', // 48px }, - borders: { - widths: { - default: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', - }, - colors: Object.assign({ default: colors['slate-lighter'] }, colors) + + + /* + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weights + |----------------------------------------------------------------------------- + | + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. + | + | Class name: .font-{weight} + | + */ + + fontWeights: { + 'hairline': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'black': 900, }, - radiuses: { + + + /* + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/text-leading + |----------------------------------------------------------------------------- + | + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. + | + | Class name: .leading-{size} + | + */ + + leading: { + 'none': 1, + 'tight': 1.25, + 'normal': 1.5, + 'loose': 2, + }, + + + /* + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking + |----------------------------------------------------------------------------- + | + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. + | + | Class name: .tracking-{size} + | + */ + + tracking: { + 'tight': '-0.05em', + 'normal': '0', + 'wide': '0.05em', + }, + + + /* + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-colors + |----------------------------------------------------------------------------- + | + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Class name: .text-{color} + | + */ + + textColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-colors + |----------------------------------------------------------------------------- + | + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .bg-{color} + | + */ + + backgroundColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-widths + |----------------------------------------------------------------------------- + | + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border color. + | + | Class name: .border{-side?}{-width?} + | + */ + + borderWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + + + /* + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-colors + |----------------------------------------------------------------------------- + | + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. + | + | Class name: .border-{color} + | + */ + + borderColors: Object.assign({ default: colors['slate-lighter'] }, colors), + + + /* + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- + | + | Here is where you define your border radius values. Take note that + | a default radius is required. This is the value used for the + | non-suffixed version of this utility (.rounded). + | + | Class name: .rounded-{radius?} + | + */ + + borderRadius: { default: '.25rem', - sm: '.125rem', - lg: '.5rem', - pill: '9999px', + 'sm': '.125rem', + 'lg': '.5rem', + 'pill': '9999px', }, - sizing: { - width: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - 'full': '100%', - 'screen': '100vw' - }, - height: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - 'full': '100%', - 'screen': '100vh' - }, - minHeight: { - '0': '0', - 'full': '100%', - 'screen': '100vh' - }, - maxHeight: { - 'full': '100%', - 'screen': '100vh' - }, - minWidth: { - '0': '0', - 'full': '100%', - }, - maxWidth: { - 'xs': '20rem', - 'sm': '30rem', - 'md': '40rem', - 'lg': '50rem', - 'xl': '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - 'full': '100%', - }, + + + /* + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- + | + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. + | + | Class name: .w-{size} + | + */ + + width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + 'full': '100%', + 'screen': '100vw' }, - spacing: { - padding: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, - margin: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, - negativeMargin: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, + + + /* + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- + | + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. + | + | Class name: .h-{size} + | + */ + + height: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + 'full': '100%', + 'screen': '100vh' }, + + + /* + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .min-w-{size} + | + */ + + minWidth: { + '0': '0', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. + | + | Class name: .min-h-{size} + | + */ + + minHeight: { + '0': '0', + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. + | + | Class name: .max-w-{size} + | + */ + + maxWidth: { + 'xs': '20rem', + 'sm': '30rem', + 'md': '40rem', + 'lg': '50rem', + 'xl': '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .max-h-{size} + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh', + }, + + + /* + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- + | + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .p{-side?}-{size} + | + */ + + padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- + | + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .m{-side?}-{size} + | + */ + + margin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Negative margin https://tailwindcss.com/docs/negative-margin + |----------------------------------------------------------------------------- + | + | Here is where you define your negative margin utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default we + | provide matching values to the padding scale since these utilities + | generally get used together. You can, of course, modify these + | values as needed. + | + | Class name: .-m{-side?}-{size} + | + */ + + negativeMargin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- + | + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. + | + | Take note that a default shadow is required. This is the value used + | for the non-suffixed version of this utility (.shadow). + | + | Class name: .shadow-{size?} + | + */ + shadows: { default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', @@ -253,6 +687,21 @@ module.exports = { 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', 'none': 'none', }, + + + /* + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- + | + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .z-{name} + | + */ + zIndex: { '0': 0, '10': 10, @@ -262,11 +711,43 @@ module.exports = { '50': 50, 'auto': 'auto', }, + + + /* + |----------------------------------------------------------------------------- + | Opacity https://tailwindcss.com/docs/opacity + |----------------------------------------------------------------------------- + | + | Here is where you define your opacity utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .opacity-{name} + | + */ + opacity: { '0': '0', '25': '.25', '50': '.5', '75': '.75', '100': '1', - } + }, + + + /* + |----------------------------------------------------------------------------- + | Packages + |----------------------------------------------------------------------------- + | + | Here is where you can define the configuration for any Tailwind packages + | you're using. These can be utility packs, component bundles, or even + | complete themes. You'll want to reference each package's + | documentation for a list of settings available for it. + | + */ + + packages: { + }, + } diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js index b398823d9..1e33cc1e9 100644 --- a/src/generators/backgroundColors.js +++ b/src/generators/backgroundColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ backgrounds }) { - return hoverable(_.map(backgrounds.colors, (color, className) => { +export default function ({ backgroundColors }) { + return hoverable(_.map(backgroundColors, (color, className) => { return defineClass(`bg-${className}`, { 'background-color': color, }) diff --git a/src/generators/borderColors.js b/src/generators/borderColors.js index cfb72b6bb..c7e327ef9 100644 --- a/src/generators/borderColors.js +++ b/src/generators/borderColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ colors, borders }) { - return hoverable(_.map(_.omit(borders.colors, 'default'), (color, className) => { +export default function ({ borderColors }) { + return hoverable(_.map(_.omit(borderColors, 'default'), (color, className) => { return defineClass(`border-${className}`, { 'border-color': color, }) diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js index 41da11190..f5ef2eab2 100644 --- a/src/generators/borderWidths.js +++ b/src/generators/borderWidths.js @@ -44,11 +44,11 @@ function sizedBorder(size, width, color) { }) } -module.exports = function({colors, borders}) { - const color = borders.colors.default +module.exports = function({ borderWidths, borderColors }) { + const color = borderColors.default return _.flatten([ - defaultBorder(borders.widths.default, color), - ..._.map(_.omit(borders.widths, 'default'), (width, size) => sizedBorder(size, width, color)), + defaultBorder(borderWidths.default, color), + ..._.map(_.omit(borderWidths, 'default'), (width, size) => sizedBorder(size, width, color)), ]) } diff --git a/src/generators/rounded.js b/src/generators/rounded.js index e81de85b8..6dd50f70c 100644 --- a/src/generators/rounded.js +++ b/src/generators/rounded.js @@ -49,9 +49,9 @@ function roundedVariant(modifier, radius) { }) } -module.exports = function({ radiuses }) { +module.exports = function({ borderRadius }) { return _.flatten([ - defaultRounded(radiuses.default), - ..._.map(_.omit(radiuses, 'default'), (radius, modifier) => roundedVariant(modifier, radius)), + defaultRounded(borderRadius.default), + ..._.map(_.omit(borderRadius, 'default'), (radius, modifier) => roundedVariant(modifier, radius)), ]) } diff --git a/src/generators/sizing.js b/src/generators/sizing.js index 2d8751687..f4d8180f1 100644 --- a/src/generators/sizing.js +++ b/src/generators/sizing.js @@ -49,13 +49,13 @@ function defineMaxHeights(heights) { }) } -export default function ({ sizing }) { +export default function (config) { return _.flatten([ - defineWidths(sizing.width), - defineMinWidths(sizing.minWidth), - defineMaxWidths(sizing.maxWidth), - defineHeights(sizing.height), - defineMinHeights(sizing.minHeight), - defineMaxHeights(sizing.maxHeight), + defineWidths(config.width), + defineMinWidths(config.minWidth), + defineMaxWidths(config.maxWidth), + defineHeights(config.height), + defineMinHeights(config.minHeight), + defineMaxHeights(config.maxHeight), ]) } diff --git a/src/generators/spacing.js b/src/generators/spacing.js index 40469c680..566477f47 100644 --- a/src/generators/spacing.js +++ b/src/generators/spacing.js @@ -93,10 +93,10 @@ function defineNegativeMargin(negativeMargin) { }) } -export default function ({ spacing }) { +export default function ({ padding, margin, negativeMargin }) { return _.flatten([ - definePadding(spacing.padding), - defineMargin(spacing.margin), + definePadding(padding), + defineMargin(margin), defineClasses({ 'mr-auto': { 'margin-right': 'auto', @@ -109,6 +109,6 @@ export default function ({ spacing }) { 'margin-right': 'auto', }, }), - defineNegativeMargin(spacing.negativeMargin), + defineNegativeMargin(negativeMargin), ]) } diff --git a/src/generators/textColors.js b/src/generators/textColors.js index b4500b68d..7ead0593f 100644 --- a/src/generators/textColors.js +++ b/src/generators/textColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ colors, text }) { - return hoverable(_.map(text.colors, (color, modifier) => { +export default function ({ textColors }) { + return hoverable(_.map(textColors, (color, modifier) => { return defineClass(`text-${modifier}`, { 'color': color, }) diff --git a/src/generators/textFonts.js b/src/generators/textFonts.js index 77b8c002f..85accaabf 100644 --- a/src/generators/textFonts.js +++ b/src/generators/textFonts.js @@ -1,8 +1,12 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.fonts, (families, font) => { +export default function ({ fonts }) { + return _.map(fonts, (families, font) => { + if (_.isArray(families)) { + families = families.join(', ') + } + return defineClass(`font-${font}`, { 'font-family': `${families}`, }) diff --git a/src/generators/textLeading.js b/src/generators/textLeading.js index 994f9f655..3fd79fe82 100644 --- a/src/generators/textLeading.js +++ b/src/generators/textLeading.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.leading, (value, modifier) => { +export default function ({ leading }) { + return _.map(leading, (value, modifier) => { return defineClass(`leading-${modifier}`, { 'line-height': `${value}`, }) diff --git a/src/generators/textSizes.js b/src/generators/textSizes.js index 84f78346e..1e6afd506 100644 --- a/src/generators/textSizes.js +++ b/src/generators/textSizes.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.sizes, (size, modifier) => { +export default function ({ textSizes }) { + return _.map(textSizes, (size, modifier) => { return defineClass(`text-${modifier}`, { 'font-size': `${size}`, }) diff --git a/src/generators/textTracking.js b/src/generators/textTracking.js index 119a7c35f..e36eef651 100644 --- a/src/generators/textTracking.js +++ b/src/generators/textTracking.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.tracking, (value, modifier) => { +export default function ({ tracking }) { + return _.map(tracking, (value, modifier) => { return defineClass(`tracking-${modifier}`, { 'letter-spacing': `${value}`, }) diff --git a/src/generators/textWeights.js b/src/generators/textWeights.js index e6b22da27..476878e44 100644 --- a/src/generators/textWeights.js +++ b/src/generators/textWeights.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ text }) { - return hoverable(_.map(text.weights, (weight, modifier) => { +export default function ({ fontWeights }) { + return hoverable(_.map(fontWeights, (weight, modifier) => { return defineClass(`font-${modifier}`, { 'font-weight': `${weight}`, })