Tokens for Card

pull/5756/head
Cagatay Civici 2024-05-11 16:20:02 +03:00
parent e739afbf3f
commit 83eab20745
3 changed files with 35 additions and 10 deletions

View File

@ -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')};
} }
`; `;

View File

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

View File

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