@statusfy/core
Version:
Core of Statusfy
637 lines (567 loc) • 16.8 kB
JavaScript
/*
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.
|
*/
// let defaultConfig = require('tailwindcss/defaultConfig')()
/*
|-------------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
|-------------------------------------------------------------------------------
*/
const { style } = require("@statusfy/common");
const { colors } = style;
module.exports = {
/*
|-----------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
|-----------------------------------------------------------------------------
*/
colors,
/*
|-----------------------------------------------------------------------------
| Screens https://tailwindcss.com/docs/responsive-design
|-----------------------------------------------------------------------------
| Class name: .{screen}:{utility}
|
*/
screens: {
sm: "576px",
md: "768px",
lg: "992px"
// 'xl': '1200px'
},
/*
|-----------------------------------------------------------------------------
| Fonts https://tailwindcss.com/docs/fonts
|-----------------------------------------------------------------------------
| Class name: .font-{name}
|
*/
fonts: {
sans: [
"system-ui",
"BlinkMacSystemFont",
"-apple-system",
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
"sans-serif"
],
mono: [
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
},
/*
|-----------------------------------------------------------------------------
| Text sizes https://tailwindcss.com/docs/text-sizing
|-----------------------------------------------------------------------------
| 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
},
/*
|-----------------------------------------------------------------------------
| Font weights https://tailwindcss.com/docs/font-weight
|-----------------------------------------------------------------------------
| Class name: .font-{weight}
|
*/
fontWeights: {
// 'hairline': 100,
// 'thin': 200,
// 'light': 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700
// 'extrabold': 800,
// 'black': 900
},
/*
|-----------------------------------------------------------------------------
| Leading (line height) https://tailwindcss.com/docs/line-height
|-----------------------------------------------------------------------------
| Class name: .leading-{size}
|
*/
leading: {
none: 1,
tight: 1.25,
normal: 1.5
// 'loose': 2
},
/*
|-----------------------------------------------------------------------------
| Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
|-----------------------------------------------------------------------------
| Class name: .tracking-{size}
|
*/
tracking: {
tight: "-0.05em",
normal: "0",
wide: "0.05em"
},
/*
|-----------------------------------------------------------------------------
| Text colors https://tailwindcss.com/docs/text-color
|-----------------------------------------------------------------------------
| Class name: .text-{color}
|
*/
textColors: colors,
/*
|-----------------------------------------------------------------------------
| Background colors https://tailwindcss.com/docs/background-color
|-----------------------------------------------------------------------------
| Class name: .bg-{color}
|
*/
backgroundColors: colors,
/*
|-----------------------------------------------------------------------------
| Background sizes https://tailwindcss.com/docs/background-size
|-----------------------------------------------------------------------------
| Class name: .bg-{size}
|
*/
backgroundSize: {
auto: "auto",
cover: "cover",
contain: "contain"
},
/*
|-----------------------------------------------------------------------------
| Border widths https://tailwindcss.com/docs/border-width
|-----------------------------------------------------------------------------
|
| Take note that border widths require a special "default" value set as well.
|
| Class name: .border{-side?}{-width?}
|
*/
borderWidths: {
default: "1px",
"0": "0",
"2": "2px"
// '4': '4px',
// '8': '8px'
},
/*
|-----------------------------------------------------------------------------
| Border colors https://tailwindcss.com/docs/border-color
|-----------------------------------------------------------------------------
| Take note that border colors require a special "default" value set
| as well.
|
| Class name: .border-{color}
|
*/
borderColors: global.Object.assign({ default: colors["grey-light"] }, colors),
/*
|-----------------------------------------------------------------------------
| Border radius https://tailwindcss.com/docs/border-radius
|-----------------------------------------------------------------------------
| Class name: .rounded{-side?}{-size?}
|
*/
borderRadius: {
// 'none': '0',
// 'sm': '.125rem',
default: ".25rem",
// 'lg': '.5rem',
full: "9999px"
},
/*
|-----------------------------------------------------------------------------
| Width https://tailwindcss.com/docs/width
|-----------------------------------------------------------------------------
| Class name: .w-{size}
|
*/
width: {
// 'auto': 'auto',
// 'px': '1px',
// '1': '0.25rem',
// '2': '0.5rem',
// '3': '0.75rem',
"4": "1rem",
"5": "1.25rem",
"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 https://tailwindcss.com/docs/height
|-----------------------------------------------------------------------------
| Class name: .h-{size}
|
*/
height: {
auto: "auto",
// 'px': '1px',
// '1': '0.25rem',
// '2': '0.5rem',
// '3': '0.75rem',
"4": "1rem",
"5": "1.25rem",
"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
|-----------------------------------------------------------------------------
| Class name: .min-w-{size}
|
*/
minWidth: {
"0": "0",
full: "100%"
},
/*
|-----------------------------------------------------------------------------
| Minimum height https://tailwindcss.com/docs/min-height
|-----------------------------------------------------------------------------
| Class name: .min-h-{size}
|
*/
minHeight: {
"0": "0",
full: "100%",
screen: "100vh"
},
/*
|-----------------------------------------------------------------------------
| Maximum width https://tailwindcss.com/docs/max-width
|-----------------------------------------------------------------------------
| 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%'
screen: "100vw"
},
/*
|-----------------------------------------------------------------------------
| Maximum height https://tailwindcss.com/docs/max-height
|-----------------------------------------------------------------------------
| Class name: .max-h-{size}
|
*/
maxHeight: {
full: "100%",
screen: "100vh"
},
/*
|-----------------------------------------------------------------------------
| Padding https://tailwindcss.com/docs/padding
|-----------------------------------------------------------------------------
| Class name: .p{side?}-{size}
|
*/
padding: {
// 'px': '1px',
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
// '5': '1.25rem',
"6": "1.5rem",
"8": "2rem"
// '10': '2.5rem',
// '12': '3rem',
// '16': '4rem',
// '20': '5rem',
// '24': '6rem',
// '32': '8rem'
},
/*
|-----------------------------------------------------------------------------
| Margin https://tailwindcss.com/docs/margin
|-----------------------------------------------------------------------------
| Class name: .m{side?}-{size}
|
*/
margin: {
auto: "auto",
// 'px': '1px',
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem"
// '8': '2rem',
// '10': '2.5rem',
// '12': '3rem',
// '16': '4rem',
// '20': '5rem',
// '24': '6rem',
// '32': '8rem'
},
/*
|-----------------------------------------------------------------------------
| Negative margin https://tailwindcss.com/docs/negative-margin
|-----------------------------------------------------------------------------
| Class name: .-m{side?}-{size}
|
*/
negativeMargin: {
px: "1px",
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"32": "8rem"
},
/*
|-----------------------------------------------------------------------------
| Shadows https://tailwindcss.com/docs/shadows
|-----------------------------------------------------------------------------
| Class name: .shadow-{size?}
|
*/
shadows: {
default: "0 .125rem .25rem rgba(0,0,0,.075)",
md: "0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)",
// 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)"
// 'outline': '0 0 0 3px rgba(52,144,220,0.5)',
// 'none': 'none'
},
/*
|-----------------------------------------------------------------------------
| Z-index https://tailwindcss.com/docs/z-index
|-----------------------------------------------------------------------------
| Class name: .z-{index}
|
*/
zIndex: {
auto: "auto",
"0": 0,
"10": 10,
// '20': 20,
// '30': 30,
// '40': 40,
"50": 50
},
/*
|-----------------------------------------------------------------------------
| Opacity https://tailwindcss.com/docs/opacity
|-----------------------------------------------------------------------------
| Class name: .opacity-{name}
|
*/
opacity: {
"0": "0",
"25": ".25",
"50": ".5",
"75": ".75",
"100": "1"
},
/*
|-----------------------------------------------------------------------------
| SVG fill https://tailwindcss.com/docs/svg
|-----------------------------------------------------------------------------
| Class name: .fill-{name}
|
*/
svgFill: {
current: "currentColor"
},
/*
|-----------------------------------------------------------------------------
| SVG stroke https://tailwindcss.com/docs/svg
|-----------------------------------------------------------------------------
| Class name: .stroke-{name}
|
*/
svgStroke: {
current: "currentColor"
},
/*
|-----------------------------------------------------------------------------
| Modules https://tailwindcss.com/docs/configuration#modules
|-----------------------------------------------------------------------------
|
| Here is where you control which modules are generated and what variants are
| generated for each of those modules.
|
| Currently supported variants:
| - responsive
| - hover
| - focus
| - active
| - group-hover
|
| To disable a module completely, use `false` instead of an array.
|
*/
modules: {
appearance: false,
backgroundAttachment: false,
backgroundColors: false,
backgroundPosition: false,
backgroundRepeat: false,
backgroundSize: false,
borderCollapse: false,
borderColors: false,
borderRadius: [],
borderStyle: false,
borderWidths: [],
cursor: [],
display: ["responsive"],
flexbox: ["responsive"],
float: false,
fonts: [],
fontWeights: ["hover", "focus"],
height: [],
leading: [],
lists: [],
margin: ["responsive"],
maxHeight: [],
maxWidth: [],
minHeight: false,
minWidth: false,
negativeMargin: false,
opacity: [],
outline: ["focus"],
overflow: [],
padding: [],
pointerEvents: false,
position: [],
resize: false,
shadows: [],
svgFill: false,
svgStroke: false,
textAlign: [],
textColors: false,
textSizes: [],
textStyle: false,
tracking: false,
userSelect: false,
verticalAlign: [],
visibility: false,
whitespace: false,
width: ["responsive"],
zIndex: []
},
/*
|-----------------------------------------------------------------------------
| Plugins https://tailwindcss.com/docs/plugins
|-----------------------------------------------------------------------------
|
| Here is where you can register any plugins you'd like to use in your
| project. Tailwind's built-in `container` plugin is enabled by default to
| give you a Bootstrap-style responsive container component out of the box.
|
| Be sure to view the complete plugin documentation to learn more about how
| the plugin system works.
|
*/
plugins: [
require("tailwindcss/plugins/container")({
// center: true,
// padding: '1rem',
})
],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options
|-----------------------------------------------------------------------------
|
| Here is where you can tweak advanced configuration options. We recommend
| leaving these options alone unless you absolutely need to change them.
|
*/
options: {
prefix: "",
important: false,
separator: ":"
}
};