@mgoodfellow/park-ui-panda-preset
Version:
Panda CSS Preset for Park UI
93 lines (90 loc) • 4.24 kB
text/typescript
import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
const tokens = defineTokens.colors({
light: {
'1': { value: '#f9fefd' },
'2': { value: '#f2fbf9' },
'3': { value: '#ddf9f2' },
'4': { value: '#c8f4e9' },
'5': { value: '#b3ecde' },
'6': { value: '#9ce0d0' },
'7': { value: '#7ecfbd' },
'8': { value: '#4cbba5' },
'9': { value: '#86ead4' },
'10': { value: '#7de0cb' },
'11': { value: '#027864' },
'12': { value: '#16433c' },
a1: { value: '#00d5aa06' },
a2: { value: '#00b18a0d' },
a3: { value: '#00d29e22' },
a4: { value: '#00cc9937' },
a5: { value: '#00c0914c' },
a6: { value: '#00b08663' },
a7: { value: '#00a17d81' },
a8: { value: '#009e7fb3' },
a9: { value: '#00d3a579' },
a10: { value: '#00c39982' },
a11: { value: '#007763fd' },
a12: { value: '#00312ae9' },
},
dark: {
'1': { value: '#0e1515' },
'2': { value: '#0f1b1b' },
'3': { value: '#092c2b' },
'4': { value: '#003a38' },
'5': { value: '#004744' },
'6': { value: '#105650' },
'7': { value: '#1e685f' },
'8': { value: '#277f70' },
'9': { value: '#86ead4' },
'10': { value: '#a8f5e5' },
'11': { value: '#58d5ba' },
'12': { value: '#c4f5e1' },
a1: { value: '#00dede05' },
a2: { value: '#00f9f90b' },
a3: { value: '#00fff61d' },
a4: { value: '#00fff42c' },
a5: { value: '#00fff23a' },
a6: { value: '#0effeb4a' },
a7: { value: '#34fde55e' },
a8: { value: '#41ffdf76' },
a9: { value: '#92ffe7e9' },
a10: { value: '#aefeedf5' },
a11: { value: '#67ffded2' },
a12: { value: '#cbfee9f5' },
},
})
const semanticTokens = defineSemanticTokens.colors({
'1': { value: { _light: '{colors.mint.light.1}', _dark: '{colors.mint.dark.1}' } },
'2': { value: { _light: '{colors.mint.light.2}', _dark: '{colors.mint.dark.2}' } },
'3': { value: { _light: '{colors.mint.light.3}', _dark: '{colors.mint.dark.3}' } },
'4': { value: { _light: '{colors.mint.light.4}', _dark: '{colors.mint.dark.4}' } },
'5': { value: { _light: '{colors.mint.light.5}', _dark: '{colors.mint.dark.5}' } },
'6': { value: { _light: '{colors.mint.light.6}', _dark: '{colors.mint.dark.6}' } },
'7': { value: { _light: '{colors.mint.light.7}', _dark: '{colors.mint.dark.7}' } },
'8': { value: { _light: '{colors.mint.light.8}', _dark: '{colors.mint.dark.8}' } },
'9': { value: { _light: '{colors.mint.light.9}', _dark: '{colors.mint.dark.9}' } },
'10': { value: { _light: '{colors.mint.light.10}', _dark: '{colors.mint.dark.10}' } },
'11': { value: { _light: '{colors.mint.light.11}', _dark: '{colors.mint.dark.11}' } },
'12': { value: { _light: '{colors.mint.light.12}', _dark: '{colors.mint.dark.12}' } },
a1: { value: { _light: '{colors.mint.light.a1}', _dark: '{colors.mint.dark.a1}' } },
a2: { value: { _light: '{colors.mint.light.a2}', _dark: '{colors.mint.dark.a2}' } },
a3: { value: { _light: '{colors.mint.light.a3}', _dark: '{colors.mint.dark.a3}' } },
a4: { value: { _light: '{colors.mint.light.a4}', _dark: '{colors.mint.dark.a4}' } },
a5: { value: { _light: '{colors.mint.light.a5}', _dark: '{colors.mint.dark.a5}' } },
a6: { value: { _light: '{colors.mint.light.a6}', _dark: '{colors.mint.dark.a6}' } },
a7: { value: { _light: '{colors.mint.light.a7}', _dark: '{colors.mint.dark.a7}' } },
a8: { value: { _light: '{colors.mint.light.a8}', _dark: '{colors.mint.dark.a8}' } },
a9: { value: { _light: '{colors.mint.light.a9}', _dark: '{colors.mint.dark.a9}' } },
a10: { value: { _light: '{colors.mint.light.a10}', _dark: '{colors.mint.dark.a10}' } },
a11: { value: { _light: '{colors.mint.light.a11}', _dark: '{colors.mint.dark.a11}' } },
a12: { value: { _light: '{colors.mint.light.a12}', _dark: '{colors.mint.dark.a12}' } },
default: { value: { _light: '{colors.mint.light.9}', _dark: '{colors.mint.dark.9}' } },
emphasized: { value: { _light: '{colors.mint.light.10}', _dark: '{colors.mint.dark.10}' } },
fg: { value: { _light: '{colors.gray.light.12}', _dark: '{colors.gray.light.12}' } },
text: { value: { _light: '{colors.mint.light.a11}', _dark: '{colors.mint.dark.a11}' } },
})
export default {
name: 'mint',
tokens,
semanticTokens,
}