Update tokens
parent
5ac44cfc6f
commit
bf247d8735
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue