@mgoodfellow/park-ui-panda-preset
Version:
Panda CSS Preset for Park UI
93 lines (90 loc) • 4.21 kB
text/typescript
import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
const tokens = defineTokens.colors({
light: {
'1': { value: '#fdfdfc' },
'2': { value: '#faf9f2' },
'3': { value: '#f2f0e7' },
'4': { value: '#eae6db' },
'5': { value: '#e1dccf' },
'6': { value: '#d8d0bf' },
'7': { value: '#cbc0aa' },
'8': { value: '#b9a88d' },
'9': { value: '#978365' },
'10': { value: '#8c7a5e' },
'11': { value: '#71624b' },
'12': { value: '#3b352b' },
a1: { value: '#55550003' },
a2: { value: '#9d8a000d' },
a3: { value: '#75600018' },
a4: { value: '#6b4e0024' },
a5: { value: '#60460030' },
a6: { value: '#64440040' },
a7: { value: '#63420055' },
a8: { value: '#633d0072' },
a9: { value: '#5332009a' },
a10: { value: '#492d00a1' },
a11: { value: '#362100b4' },
a12: { value: '#130c00d4' },
},
dark: {
'1': { value: '#121211' },
'2': { value: '#1b1a17' },
'3': { value: '#24231f' },
'4': { value: '#2d2b26' },
'5': { value: '#38352e' },
'6': { value: '#444039' },
'7': { value: '#544f46' },
'8': { value: '#696256' },
'9': { value: '#978365' },
'10': { value: '#a39073' },
'11': { value: '#cbb99f' },
'12': { value: '#e8e2d9' },
a1: { value: '#91911102' },
a2: { value: '#f9e29d0b' },
a3: { value: '#f8ecbb15' },
a4: { value: '#ffeec41e' },
a5: { value: '#feecc22a' },
a6: { value: '#feebcb37' },
a7: { value: '#ffedcd48' },
a8: { value: '#fdeaca5f' },
a9: { value: '#ffdba690' },
a10: { value: '#fedfb09d' },
a11: { value: '#fee7c6c8' },
a12: { value: '#fef7ede7' },
},
})
const semanticTokens = defineSemanticTokens.colors({
'1': { value: { _light: '{colors.gold.light.1}', _dark: '{colors.gold.dark.1}' } },
'2': { value: { _light: '{colors.gold.light.2}', _dark: '{colors.gold.dark.2}' } },
'3': { value: { _light: '{colors.gold.light.3}', _dark: '{colors.gold.dark.3}' } },
'4': { value: { _light: '{colors.gold.light.4}', _dark: '{colors.gold.dark.4}' } },
'5': { value: { _light: '{colors.gold.light.5}', _dark: '{colors.gold.dark.5}' } },
'6': { value: { _light: '{colors.gold.light.6}', _dark: '{colors.gold.dark.6}' } },
'7': { value: { _light: '{colors.gold.light.7}', _dark: '{colors.gold.dark.7}' } },
'8': { value: { _light: '{colors.gold.light.8}', _dark: '{colors.gold.dark.8}' } },
'9': { value: { _light: '{colors.gold.light.9}', _dark: '{colors.gold.dark.9}' } },
'10': { value: { _light: '{colors.gold.light.10}', _dark: '{colors.gold.dark.10}' } },
'11': { value: { _light: '{colors.gold.light.11}', _dark: '{colors.gold.dark.11}' } },
'12': { value: { _light: '{colors.gold.light.12}', _dark: '{colors.gold.dark.12}' } },
a1: { value: { _light: '{colors.gold.light.a1}', _dark: '{colors.gold.dark.a1}' } },
a2: { value: { _light: '{colors.gold.light.a2}', _dark: '{colors.gold.dark.a2}' } },
a3: { value: { _light: '{colors.gold.light.a3}', _dark: '{colors.gold.dark.a3}' } },
a4: { value: { _light: '{colors.gold.light.a4}', _dark: '{colors.gold.dark.a4}' } },
a5: { value: { _light: '{colors.gold.light.a5}', _dark: '{colors.gold.dark.a5}' } },
a6: { value: { _light: '{colors.gold.light.a6}', _dark: '{colors.gold.dark.a6}' } },
a7: { value: { _light: '{colors.gold.light.a7}', _dark: '{colors.gold.dark.a7}' } },
a8: { value: { _light: '{colors.gold.light.a8}', _dark: '{colors.gold.dark.a8}' } },
a9: { value: { _light: '{colors.gold.light.a9}', _dark: '{colors.gold.dark.a9}' } },
a10: { value: { _light: '{colors.gold.light.a10}', _dark: '{colors.gold.dark.a10}' } },
a11: { value: { _light: '{colors.gold.light.a11}', _dark: '{colors.gold.dark.a11}' } },
a12: { value: { _light: '{colors.gold.light.a12}', _dark: '{colors.gold.dark.a12}' } },
default: { value: { _light: '{colors.gold.light.9}', _dark: '{colors.gold.dark.9}' } },
emphasized: { value: { _light: '{colors.gold.light.10}', _dark: '{colors.gold.dark.10}' } },
fg: { value: { _light: 'white', _dark: 'white' } },
text: { value: { _light: '{colors.gold.light.a11}', _dark: '{colors.gold.dark.a11}' } },
})
export default {
name: 'gold',
tokens,
semanticTokens,
}