Tokens for Tag
parent
3cba7711d5
commit
c078a56d6d
|
@ -7,21 +7,21 @@ const theme = ({ dt }) => `
|
|||
justify-content: center;
|
||||
background: ${dt('tag.primary.background')};
|
||||
color: ${dt('tag.primary.color')};
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
gap: 0.25rem;
|
||||
font-size: ${dt('tag.font.size')};
|
||||
font-weight: ${dt('tag.font.weight')};
|
||||
padding: ${dt('tag.padding')};
|
||||
border-radius: ${dt('tag.border.radius')};
|
||||
gap: ${dt('tag.gap')};
|
||||
}
|
||||
|
||||
.p-tag-icon {
|
||||
font-size: 0.75rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
font-size: ${dt('tag.icon.size')};
|
||||
width: ${dt('tag.icon.size')};
|
||||
height:${dt('tag.icon.size')};
|
||||
}
|
||||
|
||||
.p-tag-rounded {
|
||||
border-radius: 10rem;
|
||||
border-radius: ${dt('tag.rounded.border.radius')};
|
||||
}
|
||||
|
||||
.p-tag-success {
|
||||
|
|
|
@ -24,7 +24,7 @@ export default {
|
|||
light: {
|
||||
primary: {
|
||||
background: '{primary.color}',
|
||||
color: '{primary.contrast.color}'
|
||||
color: '{primary.inverse.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
|
@ -54,7 +54,7 @@ export default {
|
|||
dark: {
|
||||
primary: {
|
||||
background: '{primary.color}',
|
||||
color: '{primary.contrast.color}'
|
||||
color: '{primary.inverse.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
|
|
|
@ -1,4 +1,15 @@
|
|||
export default {
|
||||
root: {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '700',
|
||||
padding: '0.25rem 0.5rem',
|
||||
gap: '0.25rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
roundedBorderRadius: '{border.radius.xl}'
|
||||
},
|
||||
icon: {
|
||||
size: '0.75rem'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
primary: {
|
||||
|
|
|
@ -1,29 +1,40 @@
|
|||
export default {
|
||||
root: {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '700',
|
||||
padding: '0.25rem 0.5rem',
|
||||
gap: '0.25rem',
|
||||
borderRadius: '{content.border.radius}',
|
||||
roundedBorderRadius: '{border.radius.xl}'
|
||||
},
|
||||
icon: {
|
||||
size: '0.75rem'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
primary: {
|
||||
background: '{primary.100}',
|
||||
color: '{primary.700}'
|
||||
background: '{primary.color}',
|
||||
color: '{primary.inverse.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
color: '{surface.600}'
|
||||
},
|
||||
success: {
|
||||
background: '{green.100}',
|
||||
color: '{green.700}'
|
||||
background: '{green.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
info: {
|
||||
background: '{sky.100}',
|
||||
color: '{sky.700}'
|
||||
background: '{sky.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.100}',
|
||||
color: '{orange.700}'
|
||||
background: '{orange.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
danger: {
|
||||
background: '{red.100}',
|
||||
color: '{red.700}'
|
||||
background: '{red.500}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.950}',
|
||||
|
@ -32,28 +43,28 @@ export default {
|
|||
},
|
||||
dark: {
|
||||
primary: {
|
||||
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
|
||||
color: '{primary.300}'
|
||||
background: '{primary.color}',
|
||||
color: '{primary.inverse.color}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
color: '{surface.300}'
|
||||
},
|
||||
success: {
|
||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||
color: '{green.300}'
|
||||
background: '{green.400}',
|
||||
color: '{green.950}'
|
||||
},
|
||||
info: {
|
||||
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
|
||||
color: '{sky.300}'
|
||||
background: '{sky.400}',
|
||||
color: '{sky.950}'
|
||||
},
|
||||
warn: {
|
||||
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
|
||||
color: '{orange.300}'
|
||||
background: '{orange.400}',
|
||||
color: '{orange.950}'
|
||||
},
|
||||
danger: {
|
||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||
color: '{red.300}'
|
||||
background: '{red.400}',
|
||||
color: '{red.950}'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
|
|
Loading…
Reference in New Issue