@mgoodfellow/park-ui-panda-preset
Version:
Panda CSS Preset for Park UI
93 lines (90 loc) • 4.26 kB
text/typescript
import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
const tokens = defineTokens.colors({
light: {
'1': { value: '#fbfefb' },
'2': { value: '#f5fbf5' },
'3': { value: '#e9f6e9' },
'4': { value: '#daf1db' },
'5': { value: '#c9e8ca' },
'6': { value: '#b2ddb5' },
'7': { value: '#94ce9a' },
'8': { value: '#65ba74' },
'9': { value: '#46a758' },
'10': { value: '#3e9b4f' },
'11': { value: '#2a7e3b' },
'12': { value: '#203c25' },
a1: { value: '#00c00004' },
a2: { value: '#0099000a' },
a3: { value: '#00970016' },
a4: { value: '#009f0725' },
a5: { value: '#00930536' },
a6: { value: '#008f0a4d' },
a7: { value: '#018b0f6b' },
a8: { value: '#008d199a' },
a9: { value: '#008619b9' },
a10: { value: '#007b17c1' },
a11: { value: '#006514d5' },
a12: { value: '#002006df' },
},
dark: {
'1': { value: '#0e1511' },
'2': { value: '#141a15' },
'3': { value: '#1b2a1e' },
'4': { value: '#1d3a24' },
'5': { value: '#25482d' },
'6': { value: '#2d5736' },
'7': { value: '#366740' },
'8': { value: '#3e7949' },
'9': { value: '#46a758' },
'10': { value: '#53b365' },
'11': { value: '#71d083' },
'12': { value: '#c2f0c2' },
a1: { value: '#00de1205' },
a2: { value: '#5ef7780a' },
a3: { value: '#70fe8c1b' },
a4: { value: '#57ff802c' },
a5: { value: '#68ff8b3b' },
a6: { value: '#71ff8f4b' },
a7: { value: '#77fd925d' },
a8: { value: '#77fd9070' },
a9: { value: '#65ff82a1' },
a10: { value: '#72ff8dae' },
a11: { value: '#89ff9fcd' },
a12: { value: '#ceffceef' },
},
})
const semanticTokens = defineSemanticTokens.colors({
'1': { value: { _light: '{colors.grass.light.1}', _dark: '{colors.grass.dark.1}' } },
'2': { value: { _light: '{colors.grass.light.2}', _dark: '{colors.grass.dark.2}' } },
'3': { value: { _light: '{colors.grass.light.3}', _dark: '{colors.grass.dark.3}' } },
'4': { value: { _light: '{colors.grass.light.4}', _dark: '{colors.grass.dark.4}' } },
'5': { value: { _light: '{colors.grass.light.5}', _dark: '{colors.grass.dark.5}' } },
'6': { value: { _light: '{colors.grass.light.6}', _dark: '{colors.grass.dark.6}' } },
'7': { value: { _light: '{colors.grass.light.7}', _dark: '{colors.grass.dark.7}' } },
'8': { value: { _light: '{colors.grass.light.8}', _dark: '{colors.grass.dark.8}' } },
'9': { value: { _light: '{colors.grass.light.9}', _dark: '{colors.grass.dark.9}' } },
'10': { value: { _light: '{colors.grass.light.10}', _dark: '{colors.grass.dark.10}' } },
'11': { value: { _light: '{colors.grass.light.11}', _dark: '{colors.grass.dark.11}' } },
'12': { value: { _light: '{colors.grass.light.12}', _dark: '{colors.grass.dark.12}' } },
a1: { value: { _light: '{colors.grass.light.a1}', _dark: '{colors.grass.dark.a1}' } },
a2: { value: { _light: '{colors.grass.light.a2}', _dark: '{colors.grass.dark.a2}' } },
a3: { value: { _light: '{colors.grass.light.a3}', _dark: '{colors.grass.dark.a3}' } },
a4: { value: { _light: '{colors.grass.light.a4}', _dark: '{colors.grass.dark.a4}' } },
a5: { value: { _light: '{colors.grass.light.a5}', _dark: '{colors.grass.dark.a5}' } },
a6: { value: { _light: '{colors.grass.light.a6}', _dark: '{colors.grass.dark.a6}' } },
a7: { value: { _light: '{colors.grass.light.a7}', _dark: '{colors.grass.dark.a7}' } },
a8: { value: { _light: '{colors.grass.light.a8}', _dark: '{colors.grass.dark.a8}' } },
a9: { value: { _light: '{colors.grass.light.a9}', _dark: '{colors.grass.dark.a9}' } },
a10: { value: { _light: '{colors.grass.light.a10}', _dark: '{colors.grass.dark.a10}' } },
a11: { value: { _light: '{colors.grass.light.a11}', _dark: '{colors.grass.dark.a11}' } },
a12: { value: { _light: '{colors.grass.light.a12}', _dark: '{colors.grass.dark.a12}' } },
default: { value: { _light: '{colors.grass.light.9}', _dark: '{colors.grass.dark.9}' } },
emphasized: { value: { _light: '{colors.grass.light.10}', _dark: '{colors.grass.dark.10}' } },
fg: { value: { _light: 'white', _dark: 'white' } },
text: { value: { _light: '{colors.grass.light.a11}', _dark: '{colors.grass.dark.a11}' } },
})
export default {
name: 'grass',
tokens,
semanticTokens,
}