271 lines
8.4 KiB
TypeScript
271 lines
8.4 KiB
TypeScript
import { definePreset } from '@pandacss/dev'
|
|
import generateColors from '@/colors/generateColors.js'
|
|
import generateNeutralColor from '@/colors/generateNeutralColor.js'
|
|
import buttonRecipe from '@/recipes/button.js'
|
|
import detailsRecipe from '@/recipes/details.js'
|
|
import inputRecipe from '@/recipes/input.js'
|
|
import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
|
|
import generateSemanticColors from './colors/generateSemanticColors.js'
|
|
import fadeKeyframes from './keyframes/fade.js'
|
|
import pulseKeyframes from './keyframes/pulse.js'
|
|
import shimmerKeyframes from './keyframes/shimmer.js'
|
|
import skeletonPattern from './patterns/skeleton.js'
|
|
import alertRecipe from './recipes/alert.js'
|
|
import chipRecipe from './recipes/chip.js'
|
|
import iconButtonRecipe from './recipes/iconButton.js'
|
|
import markRecipe from './recipes/mark.js'
|
|
import selectRecipe from './recipes/select.js'
|
|
|
|
export type ThemeConfig = {
|
|
neutral?: NeutralColor
|
|
semanticColors?: Record<string, BrandColor>
|
|
colorVariation?: ColorVariation
|
|
includeColors?: Color[]
|
|
}
|
|
|
|
const defaultConfig: Required<ThemeConfig> = {
|
|
neutral: 'slate',
|
|
colorVariation: { dark: false, p3: false, alpha: false },
|
|
semanticColors: { primary: 'teal' },
|
|
includeColors: color
|
|
}
|
|
|
|
const srJuggernautPandaPreset = (config?: ThemeConfig) => {
|
|
const mergedConfig = { ...defaultConfig, ...config }
|
|
const colors = generateColors(config?.includeColors)
|
|
const neutral = generateNeutralColor(mergedConfig.neutral, mergedConfig.colorVariation)
|
|
const semanticColors = generateSemanticColors(mergedConfig.semanticColors, mergedConfig.colorVariation)
|
|
const semanticColorKeysArray = Object.keys(semanticColors)
|
|
return definePreset({
|
|
name: 'srjuggernaut-panda-preset',
|
|
patterns: {
|
|
skeleton: skeletonPattern
|
|
},
|
|
theme: {
|
|
recipes: {
|
|
alert: alertRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
button: buttonRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
chip: chipRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
details: detailsRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray }),
|
|
select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
|
|
},
|
|
tokens: {
|
|
animations: {},
|
|
aspectRatios: {
|
|
square: { value: '1 / 1' },
|
|
'20:9': { value: '20 / 9' },
|
|
'16:9': { value: '16 / 9' },
|
|
'9:16': { value: '9 / 16' },
|
|
'9:20': { value: '9 / 20' },
|
|
'4:3': { value: '4 / 3' },
|
|
'3:4': { value: '3 / 4' }
|
|
},
|
|
assets: {},
|
|
blurs: {},
|
|
borders: {},
|
|
borderWidths: {},
|
|
colors,
|
|
containerNames: {},
|
|
cursor: {},
|
|
durations: {
|
|
fast: { value: '150ms' },
|
|
normal: { value: '300ms' },
|
|
slow: { value: '450ms' }
|
|
},
|
|
easings: {
|
|
easeIn: { value: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)' },
|
|
easeOut: { value: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)' },
|
|
easeInOut: { value: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)' },
|
|
easeInQuint: { value: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)' },
|
|
easeOutQuint: { value: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' },
|
|
easeInOutQuint: { value: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)' }
|
|
},
|
|
fonts: {},
|
|
fontSizes: {
|
|
xs: { value: '0.75em' },
|
|
sm: { value: '0.875em' },
|
|
base: { value: '1em' },
|
|
lg: { value: '1.125em' },
|
|
xl: { value: '1.375em' },
|
|
h6: { value: '1.5em' },
|
|
h5: { value: '1.625em' },
|
|
h4: { value: '1.75em' },
|
|
h3: { value: '1.875em' },
|
|
h2: { value: '2em' },
|
|
h1: { value: '2.25em' },
|
|
rxs: { value: '0.75rem' },
|
|
rsm: { value: '0.875rem' },
|
|
rbase: { value: '1rem' },
|
|
rlg: { value: '1.25rem' },
|
|
rxl: { value: '1.375rem' },
|
|
rh6: { value: '1.5rem' },
|
|
rh5: { value: '1.625rem' },
|
|
rh4: { value: '1.75rem' },
|
|
rh3: { value: '1.875rem' },
|
|
rh2: { value: '2rem' },
|
|
rh1: { value: '2.25rem' }
|
|
},
|
|
fontWeights: {
|
|
thin: { value: '100' },
|
|
extralight: { value: '200' },
|
|
light: { value: '300' },
|
|
normal: { value: '400' },
|
|
medium: { value: '500' },
|
|
semibold: { value: '600' },
|
|
bold: { value: '700' },
|
|
extrabold: { value: '800' },
|
|
black: { value: '900' }
|
|
},
|
|
gradients: {
|
|
shimmer: {
|
|
value: {
|
|
type: 'linear',
|
|
placement: 'to right',
|
|
stops: [
|
|
'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 0%',
|
|
'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 15%',
|
|
'color-mix(in srgb, {colors.neutral.12} 10%, transparent) 20%',
|
|
'color-mix(in srgb, {colors.neutral.12} 20%, transparent) 25%',
|
|
'color-mix(in srgb, {colors.neutral.12} 0%, transparent) 30%'
|
|
]
|
|
}
|
|
}
|
|
},
|
|
letterSpacings: {},
|
|
lineHeights: {
|
|
none: { value: '1em' },
|
|
tight: { value: '1.25em' },
|
|
snug: { value: '1.375em' },
|
|
normal: { value: '1.5em' },
|
|
relaxed: { value: '1.625em' },
|
|
loose: { value: '2em' }
|
|
},
|
|
radii: {
|
|
none: { value: '0' },
|
|
xs: { value: '0.125rem' },
|
|
sm: { value: '0.25rem' },
|
|
md: { value: '0.375rem' },
|
|
lg: { value: '0.5rem' },
|
|
xl: { value: '0.75rem' },
|
|
xxl: { value: '1rem' },
|
|
full: { value: '9999px' }
|
|
},
|
|
shadows: {},
|
|
opacity: {},
|
|
sizes: {},
|
|
spacing: {
|
|
none: { value: '0' },
|
|
xs: { value: '0.25rem' },
|
|
sm: { value: '0.5rem' },
|
|
md: { value: '1rem' },
|
|
lg: { value: '1.5rem' },
|
|
xl: { value: '2rem' },
|
|
xxl: { value: '3rem' },
|
|
xxxl: { value: '4rem' },
|
|
'-xs': { value: '-0.25rem' },
|
|
'-sm': { value: '-0.5rem' },
|
|
'-md': { value: '-1rem' },
|
|
'-lg': { value: '-1.5rem' },
|
|
'-xl': { value: '-2rem' },
|
|
'-xxl': { value: '-3rem' },
|
|
'-xxxl': { value: '-4rem' }
|
|
},
|
|
zIndex: {}
|
|
},
|
|
animationStyles: {},
|
|
keyframes: {
|
|
...shimmerKeyframes,
|
|
...pulseKeyframes,
|
|
...fadeKeyframes
|
|
},
|
|
semanticTokens: {
|
|
colors: {
|
|
neutral: neutral,
|
|
...semanticColors
|
|
}
|
|
}
|
|
},
|
|
conditions: {
|
|
extend: {
|
|
active: '&[data-state="open"]'
|
|
}
|
|
},
|
|
globalCss: {
|
|
'*, *:before, *:after': {
|
|
boxSizing: 'border-box',
|
|
margin: 0,
|
|
padding: 0
|
|
},
|
|
body: {
|
|
backgroundColor: 'neutral.1',
|
|
color: 'neutral.12'
|
|
},
|
|
'img, picture, video, canvas, svg ': {
|
|
display: 'block',
|
|
maxWidth: '100%'
|
|
},
|
|
'input, button, textarea, select': {
|
|
font: 'inherit'
|
|
},
|
|
button: {
|
|
cursor: 'pointer'
|
|
},
|
|
'h1, h2, h3, h4, h5, h6': {
|
|
fontWeight: 'bold',
|
|
lineHeight: 'tight'
|
|
},
|
|
h1: {
|
|
fontSize: 'h1'
|
|
},
|
|
h2: {
|
|
fontSize: 'h2'
|
|
},
|
|
h3: {
|
|
fontSize: 'h3'
|
|
},
|
|
h4: {
|
|
fontSize: 'h4'
|
|
},
|
|
h5: {
|
|
fontSize: 'h5'
|
|
},
|
|
h6: {
|
|
fontSize: 'h6'
|
|
},
|
|
p: {
|
|
fontSize: 'base',
|
|
lineHeight: 'normal',
|
|
textWrap: 'pretty'
|
|
},
|
|
small: {
|
|
fontSize: 'xs'
|
|
},
|
|
a: {
|
|
color: 'inherit',
|
|
textDecoration: 'none',
|
|
fontWeight: 'semibold',
|
|
_hover: {
|
|
color: 'primary.9'
|
|
}
|
|
},
|
|
'@media (prefers-reduced-motion: no-preference)': {
|
|
html: {
|
|
interpolateSize: 'allow-keywords'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
export default srJuggernautPandaPreset
|
|
|
|
export { buttonVariants } from '@/recipes/button.js'
|
|
export { chipVariants } from '@/recipes/chip.js'
|
|
export { iconButtonShapes, iconButtonVariants } from '@/recipes/iconButton.js'
|
|
export { markVariants } from '@/recipes/mark.js'
|
|
|
|
export { BrandColor, ColorVariation, NeutralColor } from '@/types.js'
|