285 lines
9.5 KiB
TypeScript
285 lines
9.5 KiB
TypeScript
import { definePreset } from '@pandacss/dev'
|
|
import generateColors from '@/colors/generateColors'
|
|
import generateNeutralColor from '@/colors/generateNeutralColor'
|
|
import generateSemanticColors from '@/colors/generateSemanticColors'
|
|
import fadeKeyframes from '@/keyframes/fade'
|
|
import pulseKeyframes from '@/keyframes/pulse'
|
|
import shimmerKeyframes from '@/keyframes/shimmer'
|
|
import skeletonPattern from '@/patterns/skeleton'
|
|
import alertRecipe from '@/recipes/alert'
|
|
import buttonRecipe from '@/recipes/button'
|
|
import chipRecipe from '@/recipes/chip'
|
|
import detailsRecipe from '@/recipes/details'
|
|
import iconButtonRecipe from '@/recipes/iconButton'
|
|
import inputRecipe from '@/recipes/input'
|
|
import markRecipe from '@/recipes/mark'
|
|
import progressBarRecipe from '@/recipes/progressBar'
|
|
import selectRecipe from '@/recipes/select'
|
|
import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types'
|
|
|
|
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 }),
|
|
progressBar: progressBarRecipe({ 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' }
|
|
},
|
|
zIndex: {}
|
|
},
|
|
animationStyles: {},
|
|
keyframes: {
|
|
...shimmerKeyframes,
|
|
...pulseKeyframes,
|
|
...fadeKeyframes
|
|
},
|
|
semanticTokens: {
|
|
colors: {
|
|
neutral: neutral,
|
|
...semanticColors
|
|
}
|
|
}
|
|
},
|
|
conditions: {
|
|
extend: {
|
|
active: '&:is(:active, [data-active], [data-state="open"], [data-state="on"])',
|
|
inactive: '&:is(:not(:active), [data-inactive], [data-state="closed"], [data-state="off"])',
|
|
checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"], [data-state="on"])',
|
|
unchecked:
|
|
'&:is(:not(:checked), [data-unchecked], [aria-checked=false], [data-state="unchecked"], [data-state="off"])',
|
|
expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="open"])',
|
|
indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
|
|
selected: '&:is([aria-selected=true], [data-selected], [data-state="checked"])',
|
|
open: '&:is([open], [data-state="open"])',
|
|
complete: '&:is([data-state="complete"])',
|
|
loading: '&:is([data-loading], [aria-busy=true], [data-state="loading"])',
|
|
visible: '&:is([data-visible], [data-state="visible"])',
|
|
closed: '&:is([data-state="closed"])',
|
|
sideLeft: '&:is([data-side="left"])',
|
|
sideRight: '&:is([data-side="right"])',
|
|
sideTop: '&:is([data-side="top"])',
|
|
sideBottom: '&:is([data-side="bottom"])',
|
|
alignStart: '&:is([data-align="start"])',
|
|
alignCenter: '&:is([data-align="center"])',
|
|
alignEnd: '&:is([data-align="end"])'
|
|
}
|
|
},
|
|
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: 'primary.9',
|
|
textDecoration: 'none',
|
|
fontWeight: 'semibold',
|
|
_hover: {
|
|
color: 'primary.10'
|
|
}
|
|
},
|
|
'@media (prefers-reduced-motion: no-preference)': {
|
|
html: {
|
|
interpolateSize: 'allow-keywords'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
export default srJuggernautPandaPreset
|
|
|
|
export { buttonVariants } from '@/recipes/button'
|
|
export { chipVariants } from '@/recipes/chip'
|
|
export { iconButtonShapes, iconButtonVariants } from '@/recipes/iconButton'
|
|
export { markVariants } from '@/recipes/mark'
|
|
|
|
export { BrandColor, ColorVariation, NeutralColor } from '@/types'
|