Update tokens

pull/5507/head
Cagatay Civici 2024-02-03 17:47:28 +03:00
parent 5ac44cfc6f
commit bf247d8735
2 changed files with 78 additions and 129 deletions

View File

@ -83,6 +83,8 @@ export default {
}
},
semantic: {
colorScheme: {
light: {
primary: {
50: '{emerald.50}',
100: '{emerald.100}',
@ -110,6 +112,44 @@ export default {
900: '{slate.900}',
950: '{slate.950}'
},
textColor: '{surface.700}',
textSecondaryColor: '{surface.500}',
borderColor: '{surface.300}'
},
dark: {
primary: {
50: '{emerald.50}',
100: '{emerald.100}',
200: '{emerald.200}',
300: '{emerald.300}',
400: '{emerald.400}',
500: '{emerald.500}',
600: '{emerald.600}',
700: '{emerald.700}',
800: '{emerald.800}',
900: '{emerald.900}',
950: '{emerald.950}'
},
surface: {
0: '#ffffff',
50: '{zinc.50}',
100: '{zinc.100}',
200: '{zinc.200}',
300: '{zinc.300}',
400: '{zinc.400}',
500: '{zinc.500}',
600: '{zinc.600}',
700: '{zinc.700}',
800: '{zinc.800}',
900: '{zinc.900}',
950: '{zinc.950}'
},
textColor: '{dark.surface.0}',
textSecondaryColor: '{dark.surface.500}',
borderColor: '{dark.surface.700}'
},
},
common: {
fontFamily: '"Inter var", sans-serif',
borderRadius: '6px',
inlineGap: '{gap.2}', // inline-spacing
@ -121,6 +161,7 @@ export default {
color: '{primary.500}',
offset: '2px'
}
}
},
components: {
global,

View File

@ -1,96 +1,4 @@
export default {
variables: {
common: {
header: {
borderWidth: '1px',
borderStyle: 'solid',
paddingX: '{p.5}',
paddingY: '{p.5}',
fontWeight: 700
},
headerIcon: {
width: '2rem',
height: '2rem',
borderWidth: '0',
borderStyle: 'none',
borderRadius: '50%'
},
toggleableHeader: {
paddingX: '{p.5}',
paddingY: '{p.3}'
},
content: {
paddingX: '{p.5}',
paddingY: '{p.5}',
borderWidth: '1px',
borderStyle: 'solid'
},
footer: {
paddingX: '{p.5}',
paddingY: '{p.3}',
borderWidth: '1px',
borderStyle: 'solid'
}
},
light: {
header: {
borderColor: '{surface.200}',
background: '{surface.50}',
color: '{surface.700}'
},
headerIcon: {
color: '{surface.600}',
borderColor: 'transparent',
background: 'transparent',
states: {
hover: {
color: '{surface.800}',
borderColor: 'transparent',
background: '{surface.100}'
}
}
},
content: {
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
},
footer: {
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
}
},
dark: {
header: {
borderColor: '{surface.200}',
background: '{surface.50}',
color: '{surface.700}'
},
headerIcon: {
color: '{surface.600}',
borderColor: 'transparent',
background: 'transparent',
states: {
hover: {
color: '{surface.800}',
borderColor: 'transparent',
background: '{surface.100}'
}
}
},
content: {
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
},
footer: {
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
}
}
},
css: `
.p-panel-header {
display: flex;
@ -98,7 +6,7 @@ export default {
align-items: center;
border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
background: var(--p-panel-header-background);
background: var(--p-surface-100, --p-dark-surface-900);
color: var(--p-panel-header-color);
border-top-right-radius: var(--p-border-radius);
border-top-left-radius: var(--p-border-radius);