@relume_io/relume-tailwind
Version:
Relume Tailwind Config. A preset Tailwind config using the Relume design system.
723 lines (720 loc) • 33.6 kB
text/typescript
import * as tailwindcss_types_config from 'tailwindcss/types/config';
import { PluginAPI } from 'tailwindcss/types/config';
import typography from '@tailwindcss/typography';
declare const _default: {
content: string[];
theme: {
screens: {
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
container: {
center: true;
screens: {
sm: string;
md: string;
lg: string;
xl: string;
};
};
maxWidth: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
full: string;
};
boxShadow: {
xxsmall: string;
xsmall: string;
small: string;
medium: string;
large: string;
xlarge: string;
xxlarge: string;
};
fontSize: {
xs: [string, {
lineHeight: string;
}];
sm: [string, {
lineHeight: string;
}];
base: [string, {
lineHeight: string;
}];
md: [string, {
lineHeight: string;
}];
lg: [string, {
lineHeight: string;
}];
xl: [string, {
lineHeight: string;
}];
"2xl": [string, {
lineHeight: string;
}];
"3xl": [string, {
lineHeight: string;
}];
"4xl": [string, {
lineHeight: string;
}];
"5xl": [string, {
lineHeight: string;
}];
"6xl": [string, {
lineHeight: string;
}];
"7xl": [string, {
lineHeight: string;
}];
"8xl": [string, {
lineHeight: string;
}];
"9xl": [string, {
lineHeight: string;
}];
"10xl": [string, {
lineHeight: string;
}];
};
extend: {
spacing: {
px: string;
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
8: string;
10: string;
12: string;
14: string;
16: string;
18: string;
20: string;
24: string;
28: string;
30: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
colors: {
brand: {
black: string;
white: string;
};
neutral: {
DEFAULT: string;
black: string;
white: string;
lightest: string;
lighter: string;
light: string;
dark: string;
darker: string;
darkest: string;
};
system: {
"success-green": string;
"success-green-light": string;
"error-red": string;
"error-red-light": string;
};
background: {
DEFAULT: string;
primary: string;
secondary: string;
tertiary: string;
alternative: string;
success: string;
error: string;
};
border: {
DEFAULT: string;
primary: string;
secondary: string;
tertiary: string;
alternative: string;
success: string;
error: string;
};
text: {
DEFAULT: string;
primary: string;
secondary: string;
alternative: string;
success: string;
error: string;
};
link: {
DEFAULT: string;
primary: string;
secondary: string;
alternative: string;
};
};
typography: (theme: PluginAPI["theme"]) => {
DEFAULT: {
css: ({
color: string;
lineHeight: string;
maxWidth: string;
p: {
marginTop: string;
marginBottom: string;
};
"h1, h2, h3, h4, h5, h6": {
fontWeight: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
h2: {
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: string;
lineHeight: string;
};
h3: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: string;
lineHeight: string;
};
h4: {
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: string;
lineHeight: string;
};
h5: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h6: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
blockquote: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
borderLeftWidth: string;
borderLeftColor: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
paddingLeft: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
paddingRight: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
paddingTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
paddingBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: string;
fontWeight: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
figure: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
figcaption: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
borderLeftWidth: string;
borderLeftColor: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
paddingLeft: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: string;
color: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
opacity: string;
lineHeight: string;
};
strong: {
fontWeight: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
":where(&)"?: undefined;
} | {
":where(&)": {
"> h2:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h3:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h4:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h5:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h6:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
};
color?: undefined;
lineHeight?: undefined;
maxWidth?: undefined;
p?: undefined;
"h1, h2, h3, h4, h5, h6"?: undefined;
h2?: undefined;
h3?: undefined;
h4?: undefined;
h5?: undefined;
h6?: undefined;
blockquote?: undefined;
figure?: undefined;
figcaption?: undefined;
strong?: undefined;
})[];
};
md: {
css: ({
h2: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h3: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h4: {
fontSize: string;
lineHeight: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
h5: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h6: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
figure: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
figcaption: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
p: {
fontSize: string;
marginTop: string;
marginBottom: string;
};
blockquote: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
":where(&)"?: undefined;
} | {
":where(&)": {
"> h2:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h3:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h4:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h5:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h6:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
};
h2?: undefined;
h3?: undefined;
h4?: undefined;
h5?: undefined;
h6?: undefined;
figure?: undefined;
figcaption?: undefined;
p?: undefined;
blockquote?: undefined;
})[];
};
lg: {
css: ({
h2: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h3: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h4: {
fontSize: string;
lineHeight: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
h5: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
h6: {
fontSize: string;
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
lineHeight: string;
};
figure: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
figcaption: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
fontSize: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
p: {
fontSize: string;
lineHeight: string;
marginTop: string;
marginBottom: string;
};
blockquote: {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
marginBottom: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
":where(&)"?: undefined;
} | {
":where(&)": {
"> h2:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h3:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h4:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h5:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
"> h6:first-child": {
marginTop: Partial<tailwindcss_types_config.CustomThemeConfig & {
extend: Partial<tailwindcss_types_config.CustomThemeConfig>;
}> | undefined;
};
};
h2?: undefined;
h3?: undefined;
h4?: undefined;
h5?: undefined;
h6?: undefined;
figure?: undefined;
figcaption?: undefined;
p?: undefined;
blockquote?: undefined;
})[];
};
};
keyframes: {
"accordion-down": {
from: {
height: string;
};
to: {
height: string;
};
};
"accordion-up": {
from: {
height: string;
};
to: {
height: string;
};
};
"loop-horizontally": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"loop-testimonials": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"loop-vertically": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"loop-vertically-top": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"loop-vertically-bottom": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"marquee-horizontally": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"marquee-top": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"marquee-right": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"marquee-bottom": {
from: {
transform: string;
};
to: {
transform: string;
};
};
"marquee-left": {
from: {
transform: string;
};
to: {
transform: string;
};
};
tabs: {
"0%": {
opacity: string;
};
"100%": {
opacity: string;
};
};
};
animation: {
"accordion-down": string;
"accordion-up": string;
"loop-horizontally": string;
"loop-testimonials": string;
"loop-vertically": string;
"loop-vertically-top": string;
"loop-vertically-bottom": string;
"marquee-horizontally": string;
"marquee-top": string;
"marquee-right": string;
"marquee-bottom": string;
"marquee-left": string;
tabs: string;
};
};
};
plugins: ({
handler: () => void;
} | typeof typography | (({ addComponents }: {
addComponents: (components: Record<string, any>) => void;
}) => void))[];
};
export { _default as default };