Tokens for ProgressBar

pull/5756/head
Cagatay Civici 2024-05-09 22:13:44 +03:00
parent 3a0a9b17f8
commit 3198acfd1a
3 changed files with 16 additions and 12 deletions

View File

@ -4,23 +4,20 @@ const theme = ({ dt }) => `
.p-progressbar { .p-progressbar {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 0 none; height: ${dt('progressbar.height')};
height: 1.25rem;
background: ${dt('progressbar.background')}; background: ${dt('progressbar.background')};
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('progressbar.border.radius')};
} }
.p-progressbar-value { .p-progressbar-value {
border: 0 none;
margin: 0; margin: 0;
background: ${dt('progressbar.value.background')}; background: ${dt('progressbar.value.background')};
} }
.p-progressbar-label { .p-progressbar-label {
color: ${dt('progressbar.label.color')}; color: ${dt('progressbar.label.color')};
line-height: 1.25rem; font-size: ${dt('progressbar.label.font.size')};
font-size: .75rem; font-weight: ${dt('progressbar.label.font.weight')};
font-weight: 600;
} }
.p-progressbar-determinate .p-progressbar-value { .p-progressbar-determinate .p-progressbar-value {
@ -28,7 +25,6 @@ const theme = ({ dt }) => `
width: 0%; width: 0%;
position: absolute; position: absolute;
display: none; display: none;
border: 0 none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View File

@ -1,11 +1,15 @@
export default { export default {
root: { root: {
background: '{content.border.color}' background: '{content.border.color}',
borderRadius: '{content.border.radius}',
height: '1.25rem'
}, },
value: { value: {
background: '{primary.color}' background: '{primary.color}'
}, },
label: { label: {
color: '{primary.inverse.color}' color: '{primary.inverse.color}',
fontSize: '0.75rem',
fontWeight: '600'
} }
}; };

View File

@ -1,11 +1,15 @@
export default { export default {
root: { root: {
background: '{content.border.color}' background: '{content.border.color}',
borderRadius: '{content.border.radius}',
height: '1.5rem'
}, },
value: { value: {
background: '{primary.color}' background: '{primary.color}'
}, },
label: { label: {
color: '{primary.inverse.color}' color: '{primary.inverse.color}',
fontSize: '0.875rem',
fontWeight: '600'
} }
}; };