Tokens for Card
parent
e739afbf3f
commit
83eab20745
|
@ -4,8 +4,8 @@ const theme = ({ dt }) => `
|
||||||
.p-card {
|
.p-card {
|
||||||
background: ${dt('card.background')};
|
background: ${dt('card.background')};
|
||||||
color: ${dt('card.color')};
|
color: ${dt('card.color')};
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
box-shadow: ${dt('card.shadow')};
|
||||||
border-radius: 12px;
|
border-radius: ${dt('card.border.radius')};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
@ -13,23 +13,22 @@ const theme = ({ dt }) => `
|
||||||
.p-card-caption {
|
.p-card-caption {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: ${dt('card.caption.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-card-body {
|
.p-card-body {
|
||||||
padding: 1.5rem;
|
padding: ${dt('card.body.padding')};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: ${dt('card.body.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-card-title {
|
.p-card-title {
|
||||||
font-size: 1.25rem;
|
font-size: ${dt('card.title.font.size')};
|
||||||
font-weight: 600;
|
font-weight: ${dt('card.title.font.weight')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-card-subtitle {
|
.p-card-subtitle {
|
||||||
font-weight: 400;
|
|
||||||
color: ${dt('card.subtitle.color')};
|
color: ${dt('card.subtitle.color')};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -1,7 +1,20 @@
|
||||||
export default {
|
export default {
|
||||||
root: {
|
root: {
|
||||||
background: '{content.background}',
|
background: '{content.background}',
|
||||||
color: '{text.color}'
|
borderRadius: '{border.radius.xl}',
|
||||||
|
color: '{content.color}',
|
||||||
|
shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
padding: '1.25rem',
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
caption: {
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: '1.25rem',
|
||||||
|
fontWeight: '500'
|
||||||
},
|
},
|
||||||
subtitle: {
|
subtitle: {
|
||||||
color: '{text.muted.color}'
|
color: '{text.muted.color}'
|
||||||
|
|
|
@ -1,7 +1,20 @@
|
||||||
export default {
|
export default {
|
||||||
root: {
|
root: {
|
||||||
background: '{content.background}',
|
background: '{content.background}',
|
||||||
color: '{text.color}'
|
borderRadius: '{border.radius.lg}',
|
||||||
|
color: '{content.color}',
|
||||||
|
shadow: '0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)'
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
padding: '1.5rem',
|
||||||
|
gap: '0.75rem'
|
||||||
|
},
|
||||||
|
caption: {
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: '1.25rem',
|
||||||
|
fontWeight: '700'
|
||||||
},
|
},
|
||||||
subtitle: {
|
subtitle: {
|
||||||
color: '{text.muted.color}'
|
color: '{text.muted.color}'
|
||||||
|
|
Loading…
Reference in New Issue