Tokens for Tag

pull/5756/head
Cagatay Civici 2024-05-09 22:29:56 +03:00
parent 3cba7711d5
commit c078a56d6d
4 changed files with 53 additions and 31 deletions

View File

@ -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 {

View File

@ -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}',

View File

@ -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: {

View File

@ -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}',