@dbs-portal/core-theme
Version:
Theme management, styling utilities, and design tokens for DBS Portal
185 lines (184 loc) • 5.08 kB
JavaScript
import { i as s, h as o, g as r, s as i, d as l, l as c, b as p, a as d, f, c as a } from "./breakpoints-C2XcSx1D.js";
const u = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./packages/**/*.{js,jsx,ts,tsx}",
"./node_modules/@dbs-portal/**/*.{js,jsx,ts,tsx}"
],
darkMode: ["class", '[data-theme="dark"]'],
theme: {
// Extend default theme with design tokens
extend: {
// Colors
colors: {
primary: a.primary,
secondary: a.secondary,
success: a.success,
warning: a.warning,
error: a.error,
info: a.info,
neutral: a.neutral,
white: a.white,
black: a.black,
transparent: a.transparent,
current: a.current
},
// Typography
fontFamily: f,
fontSize: d,
fontWeight: p,
lineHeight: c,
letterSpacing: l,
// Spacing
spacing: i,
// Border radius
borderRadius: r,
// Box shadow
boxShadow: o,
// Breakpoints
screens: {
xs: s.xs,
sm: s.sm,
md: s.md,
lg: s.lg,
xl: s.xl,
xxl: s.xxl
},
// Animation
animation: {
"fade-in": "fadeIn 0.2s ease-in-out",
"fade-out": "fadeOut 0.2s ease-in-out",
"slide-in-up": "slideInUp 0.3s ease-out",
"slide-in-down": "slideInDown 0.3s ease-out",
"slide-in-left": "slideInLeft 0.3s ease-out",
"slide-in-right": "slideInRight 0.3s ease-out",
"scale-in": "scaleIn 0.2s ease-out",
"scale-out": "scaleOut 0.2s ease-in",
"bounce-in": "bounceIn 0.5s ease-out",
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite"
},
// Keyframes
keyframes: {
fadeIn: {
"0%": { opacity: "0" },
"100%": { opacity: "1" }
},
fadeOut: {
"0%": { opacity: "1" },
"100%": { opacity: "0" }
},
slideInUp: {
"0%": { transform: "translateY(100%)", opacity: "0" },
"100%": { transform: "translateY(0)", opacity: "1" }
},
slideInDown: {
"0%": { transform: "translateY(-100%)", opacity: "0" },
"100%": { transform: "translateY(0)", opacity: "1" }
},
slideInLeft: {
"0%": { transform: "translateX(-100%)", opacity: "0" },
"100%": { transform: "translateX(0)", opacity: "1" }
},
slideInRight: {
"0%": { transform: "translateX(100%)", opacity: "0" },
"100%": { transform: "translateX(0)", opacity: "1" }
},
scaleIn: {
"0%": { transform: "scale(0.9)", opacity: "0" },
"100%": { transform: "scale(1)", opacity: "1" }
},
scaleOut: {
"0%": { transform: "scale(1)", opacity: "1" },
"100%": { transform: "scale(0.9)", opacity: "0" }
},
bounceIn: {
"0%": { transform: "scale(0.3)", opacity: "0" },
"50%": { transform: "scale(1.05)" },
"70%": { transform: "scale(0.9)" },
"100%": { transform: "scale(1)", opacity: "1" }
}
},
// Transitions
transitionDuration: {
0: "0ms",
75: "75ms",
100: "100ms",
150: "150ms",
200: "200ms",
300: "300ms",
500: "500ms",
700: "700ms",
1e3: "1000ms"
},
// Z-index scale
zIndex: {
0: "0",
10: "10",
20: "20",
30: "30",
40: "40",
50: "50",
auto: "auto",
dropdown: "1000",
sticky: "1020",
fixed: "1030",
"modal-backdrop": "1040",
modal: "1050",
popover: "1060",
tooltip: "1070",
toast: "1080"
}
}
},
plugins: [
// Add custom utilities
({ addUtilities: t, theme: e }) => {
const n = {
// Text utilities
".text-balance": {
"text-wrap": "balance"
},
".text-pretty": {
"text-wrap": "pretty"
},
// Scrollbar utilities
".scrollbar-thin": {
"scrollbar-width": "thin"
},
".scrollbar-none": {
"scrollbar-width": "none",
"-ms-overflow-style": "none",
"&::-webkit-scrollbar": {
display: "none"
}
},
// Focus utilities
".focus-ring": {
"&:focus": {
outline: "2px solid transparent",
"outline-offset": "2px",
"box-shadow": `0 0 0 2px ${e("colors.primary.500")}`
}
},
// Safe area utilities
".safe-top": {
"padding-top": "env(safe-area-inset-top)"
},
".safe-bottom": {
"padding-bottom": "env(safe-area-inset-bottom)"
},
".safe-left": {
"padding-left": "env(safe-area-inset-left)"
},
".safe-right": {
"padding-right": "env(safe-area-inset-right)"
}
};
t(n);
}
]
};
export {
u as tailwindConfig
};
//# sourceMappingURL=tailwind-config.js.map