tailwind-plugin-lob
Version:
Tailwind CSS plugin for Lob's design system
522 lines (515 loc) • 12.8 kB
JavaScript
import plugin from "tailwindcss/plugin";
export default plugin(function ({ addComponents, addUtilities, addVariant, theme }) {
// add important variant so you can add ! in front of a class to make it important
addVariant("important", ({ container }) => {
container.walkRules((rule) => {
rule.selector = `.\\!${rule.selector.slice(1)}`;
rule.walkDecls((decl) => {
decl.important = true;
});
});
});
// create classes to control color of each side of border
const colors = theme("borderColor");
Reflect.deleteProperty(colors, "default");
const colorMap = Object.entries(colors).map(([color, value]) => ({
[`.border-t-${color}`]: { borderTopColor: value },
[`.border-r-${color}`]: { borderRightColor: value },
[`.border-b-${color}`]: { borderBottomColor: value },
[`.border-l-${color}`]: { borderLeftColor: value },
}));
const utilities = Object.assign({}, ...colorMap);
addUtilities(utilities);
// add custom component classes
addComponents({
'.pageheading': {
fontWeight: '500', //medium
fontSize: '1.75rem', //28px
lineHeight: '2.25rem', //36px
letterSpacing: '-0.04em' //-4%
},
'.subheading-1': {
fontWeight: '700', //bold
fontSize: '1.125rem', //18px
lineHeight: '1.5rem', //24px
letterSpacing: '-0.04em' //-4%
},
'.text-default': {
fontWeight: '400', //regular
fontSize: '1rem', //16px
lineHeight: '1.375rem', //22px
},
'.text-default-light': {
fontWeight: '300', //light
fontSize: '1rem', //16px
lineHeight: '1.375rem', //22px
},
'.text-default-bold': {
fontWeight: '700', //bold
fontSize: '1rem', //16px
lineHeight: '1.375rem', //22px
},
'.text-small': {
fontWeight: '400', //regular
fontSize: '0.875rem', //14px
lineHeight: '1.125rem', //18px
},
'.text-small-light': {
fontWeight: '300', //light
fontSize: '0.875rem', //14px
lineHeight: '1.125rem', //18px
},
'.text-small-bold': {
fontWeight: '700', //bold
fontSize: '0.875rem', //14px
lineHeight: '1.125rem', //18px
},
'.banner-small': {
fontSize: '3.5rem', //56px
fontWeight: '800', //extra-bold
lineHeight: '7.25rem', //116px
letterSpacing: '-0.06em' //-6%
},
'.banner-medium': {
fontSize: '4.5rem', //72px
fontWeight: '800', //extra-bold
lineHeight: '7.25rem', //116px
letterSpacing: '-0.06em' //-6%
},
'.banner-default': {
fontSize: '6rem', //96px
fontWeight: '800', //extra-bold
lineHeight: '7.25rem', //116px
letterSpacing: '-0.06em' //-6%
},
'.caps-large': {
fontWeight: '400', //regular
fontSize: '1rem', //16px
lineHeight: '1.5rem', //24px
letterSpacing: '0.08em', //8%
textTransform: 'uppercase'
},
'.caps-medium': {
fontWeight: '700', // bold
fontSize: '0.875rem', //14px
lineHeight: '1rem', //16px
letterSpacing: '0.08em', //8%
textTransform: 'uppercase'
},
'.caps-small': {
fontWeight: '700', //bold
fontSize: '0.75rem', //12px
lineHeight: '0.75rem', //12px
letterSpacing: '0.08em', //8%
textTransform: 'uppercase'
},
//new type classes
'.type-display-1': {
fontSize: '4.5rem', //72px
fontWeight: '700',
lineHeight: 1
},
'.type-display-2': {
fontSize: '3rem', //48px
fontWeight: '700',
lineHeight: 1
},
'.type-header-1': {
fontSize: '3rem', //48px
fontWeight: '600',
lineHeight: 1
},
'.type-header-2': {
fontSize: '2.25rem', //36px
fontWeight: '600',
lineHeight: 1.1
},
'.type-header-3': {
fontSize: '1.875rem', //30px
fontWeight: '600',
lineHeight: 1.2
},
'.type-header-4': {
fontSize: '1.5rem', //24px
fontWeight: '600',
lineHeight: 1.33
},
'.type-xl-300': {
fontSize: '1.25rem', //20px
fontWeight: '300',
lineHeight: 1.4
},
'.type-xl-400': {
fontSize: '1.25rem', //20px
fontWeight: '400',
lineHeight: 1.4
},
'.type-xl-500': {
fontSize: '1.25rem', //20px
fontWeight: '500',
lineHeight: 1.4
},
'.type-xl-600': {
fontSize: '1.25rem', //20px
fontWeight: '600',
lineHeight: 1.4
},
'.type-xl-700': {
fontSize: '1.25rem', //20px
fontWeight: '700',
lineHeight: 1.4
},
'.type-xl-800': {
fontSize: '1.25rem', //20px
fontWeight: '800',
lineHeight: 1.4
},
'.type-large-300': {
fontSize: '1.125rem', //18px
fontWeight: '300',
lineHeight: 1.56
},
'.type-large-400': {
fontSize: '1.125rem', //18px
fontWeight: '400',
lineHeight: 1.56
},
'.type-large-500': {
fontSize: '1.125rem', //18px
fontWeight: '500',
lineHeight: 1.56
},
'.type-large-600': {
fontSize: '1.125rem', //18px
fontWeight: '600',
lineHeight: 1.56
},
'.type-large-700': {
fontSize: '1.125rem', //18px
fontWeight: '700',
lineHeight: 1.56
},
'.type-large-800': {
fontSize: '1.125rem', //18px
fontWeight: '800',
lineHeight: 1.56
},
'.type-base-300': {
fontSize: '1rem', //16px
fontWeight: '300',
lineHeight: 1.5
},
'.type-base-400': {
fontSize: '1rem', //16px
fontWeight: '400',
lineHeight: 1.5
},
'.type-base-500': {
fontSize: '1rem', //16px
fontWeight: '500',
lineHeight: 1.5
},
'.type-base-600': {
fontSize: '1rem', //16px
fontWeight: '600',
lineHeight: 1.5
},
'.type-base-700': {
fontSize: '1rem', //16px
fontWeight: '700',
lineHeight: 1.5
},
'.type-base-800': {
fontSize: '1rem', //16px
fontWeight: '800',
lineHeight: 1.5
},
'.type-small-300': {
fontSize: '0.875rem', //14px
fontWeight: '300',
lineHeight: 1.43
},
'.type-small-400': {
fontSize: '0.875rem', //14px
fontWeight: '400',
lineHeight: 1.43
},
'.type-small-500': {
fontSize: '0.875rem', //14px
fontWeight: '500',
lineHeight: 1.43
},
'.type-small-600': {
fontSize: '0.875rem', //14px
fontWeight: '600',
lineHeight: 1.43
},
'.type-small-700': {
fontSize: '0.875rem', //14px
fontWeight: '700',
lineHeight: 1.43
},
'.type-small-800': {
fontSize: '0.875rem', //14px
fontWeight: '800',
lineHeight: 1.43
},
'.type-xs-300': {
fontSize: '0.75rem', //12px
fontWeight: '300',
lineHeight: 1.33
},
'.type-xs-400': {
fontSize: '0.75rem', //12px
fontWeight: '400',
lineHeight: 1.33
},
'.type-xs-500': {
fontSize: '0.75rem', //12px
fontWeight: '500',
lineHeight: 1.33
},
'.type-xs-600': {
fontSize: '0.75rem', //12px
fontWeight: '600',
lineHeight: 1.33
},
'.type-xs-700': {
fontSize: '0.75rem', //12px
fontWeight: '700',
lineHeight: 1.33
},
'.type-xs-800': {
fontSize: '0.75rem', //12px
fontWeight: '800',
lineHeight: 1.33
}
});
}, {
theme: {
colors: {
transparent: "transparent",
current: "currentColor",
white: "#FFFFFF",
paper: "#FBFBFC",
black: "#000310",
info: {
light: '#E8F0FD',
DEFAULT: '#186BE7',
dark: '#1355B9'
},
upgrade: {
light: '#EDEBF9',
DEFAULT: '#483AC5',
dark: '#392E9E'
},
warning: {
light: '#FEEFE7',
DEFAULT: "#DE7C09",
dark: '#C34A09'
},
error: {
light: '#FAEAEE',
DEFAULT: "#D74949",
dark: '#A62644'
},
success: {
light: '#ECF8F1',
DEFAULT: '#349859',
dark: '#277243'
},
lavender: "#5748FF",
chili: "#DB1818",
papaya: "#EC4949",
primary: {
100: "#7cc6dd",
300: "#0099d7",
500: "#1876db",
700: "#0c68c0",
900: "#0154ac",
},
lemon: {
100: "#fbf3dc",
300: "#f6e2aa",
500: "#ffda74",
700: "#fbc150",
900: "#ed9107",
},
turquoise: {
100: "#E5F1F5",
300: "#BBDCEA",
500: "#57A1B9",
700: "#4890A8",
900: "#1F667D",
},
flint: {
100: "#E3F1FB",
300: "#BFD6F2",
500: "#7798C8",
700: "#5279B4",
900: "#355D97",
},
mint: {
100: "#E2F7ED",
300: "#A3E4C5",
500: "#6CC399",
700: "#5AAD85",
900: "#3A7659",
},
coral: {
100: "#F8E7E6",
200: "#FFDCDE",
300: "#FFC3BF",
500: "#FF9E98",
700: "#DB807A",
900: "#943832",
},
white: {
DEFAULT: "#FFFFFF",
100: "#F8F9FA",
200: "#F7F9FA",
300: "#EBF0F6",
},
gray: {
25: "#F7F6F9",
50: "#F1F0F5",
100: "#E3E1Eb",
200: "#CCCBD4",
300: "#9F9EA5",
400: "#88878D",
500: "#727176",
600: "#5B5A5E",
700: "#444346",
800: "#2D2D2F",
900: "#171617"
},
purple: {
50: "#EDEBF9",
100: "#DAD8F3",
200: "#B6B0E8",
300: "#9189DC",
400: "#6C61D1",
500: "#483AC5",
600: "#392E9E",
700: "#2B2376",
800: "#1D174F",
900: "#0E0C27"
},
blue: {
50: "#E8F0FD",
100: "#D1E1FA",
200: "#A3C4F5",
300: "#74A6F1",
400: "#4688EC",
500: "#186BE7",
600: "#1355B9",
700: "#0E408B",
800: "#0A2B5C",
900: "#05152E"
},
red: {
50: "#FAEAEE",
100: "#F6D5DD",
200: "#ECACBB",
300: "#E38299",
400: "#D95977",
500: "#D02F55",
600: "#A62644",
700: "#7D1C33",
800: "#531322",
900: "#2A0911"
},
orange: {
50: "#FEEFE7",
100: "#FDDECE",
200: "#FBBE9D",
300: "#F89E6D",
400: "#F67D3C",
500: "#F45D0B",
600: "#C34A09",
700: "#923807",
800: "#622504",
900: "#311202"
},
yellow: {
50: "#FFFCE6",
100: "#FEF9CD",
200: "#FDF39B",
300: "#FCED69",
400: "#FBE737",
500: "#FAE105",
600: "#C8B404",
700: "#968703",
800: "#645A02",
900: "#322D01"
},
green: {
50: "#ECF8F1",
100: "#D9F2E2",
200: "#B3E5C5",
300: "#8DD8A9",
400: "#67CB8C",
500: "#41BE6F",
600: "#349859",
700: "#277243",
800: "#1A4C2C",
900: "#0D2616"
},
},
extend: {
animation: {
'indybar': 'indybar 2s infinite',
},
borderWidth: {
3: "3px",
},
boxShadow: {
DEFAULT: `2px 4px 16px 1px rgba(0, 0, 0, 0.06),
0px 44.82px 29.65px 0px rgba(0, 0, 0, 0.04),
0px 23.27px 15.12px 0px rgba(0, 0, 0, 0.04),
0px 9.48px 7.58px 0px rgba(0, 0, 0, 0.03),
0px 2.15px 3.66px 0px rgba(0, 0, 0, 0.02)`,
input: "0px 0px 4px 1px rgba(132, 191, 215, 1)",
"input-selected": "0px 0px 4px 2px rgba(24, 118, 219, 0.4)",
small: "0px 2px 4px 0px rgba(34, 34, 66, 0.08)",
medium: "0px 4px 8px 0px rgba(34, 34, 66, 0.08)",
large: "0px 8px 16px 0px rgba(34, 34, 66, 0.08)",
XLarge: "0px 16px 40px 0px rgba(34, 34, 66, 0.08)",
},
fontFamily: {
messina: ["Messina", "sans-serif"]
},
fontSize: {
xl: ["1.5rem", { lineHeight: "1.75rem" }],
"2xl": ["1.75rem", { lineHeight: "2rem" }],
"3xl": ["2rem", { lineHeight: "2.25rem" }],
"4xl": ["2.5rem", { lineHeight: "2.5rem" }],
"5xl": ["3.25rem", { lineHeight: "1" }],
},
keyframes: {
indybar: {
'0%': { width: '0', 'margin-left': '0', 'margin-right': '100%' },
'50%': { width: '100%', 'margin-left': '0', 'margin-right': '0' },
'100%': { width: '0', 'margin-left': '100%', 'margin-right': '0' },
}
},
maxHeight: {
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'full': '100%'
},
screens: {
md: "576px",
lg: "768px",
xl: "1024px",
"2xl": "1280px",
},
spacing: {
4.5: "1.125rem",
}
},
}
});