diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js index aec17a272..5b7c4b717 100644 --- a/components/lib/metergroup/style/MeterGroupStyle.js +++ b/components/lib/metergroup/style/MeterGroupStyle.js @@ -3,17 +3,13 @@ import BaseStyle from 'primevue/base/style'; const theme = ({ dt }) => ` .p-metergroup { display: flex; - gap: 1rem; + gap: ${dt('metergroup.gap')}; } .p-metergroup-meters { display: flex; background: ${dt('metergroup.meters.background')}; - border-radius: ${dt('border.radius.md')}; -} - -.p-metergroup-meter { - border: 0 none; + border-radius: ${dt('metergroup.border.radius')}; } .p-metergroup-label-list { @@ -27,13 +23,13 @@ const theme = ({ dt }) => ` .p-metergroup-label { display: inline-flex; align-items: center; - gap: 0.5rem; + gap: ${dt('metergroup.label.gap')}; } .p-metergroup-label-marker { display: inline-flex; - width: 0.5rem; - height: 0.5rem; + width: ${dt('metergroup.label.marker.size')}; + height: ${dt('metergroup.label.marker.size')}; border-radius: 100%; } @@ -47,20 +43,20 @@ const theme = ({ dt }) => ` } .p-metergroup-label-list-horizontal { - gap: 1rem; + gap: ${dt('metergroup.label.list.horizontal.gap')}; } .p-metergroup-horizontal .p-metergroup-meters { - height: 0.5rem; + height: ${dt('metergroup.meters.size')}; } .p-metergroup-horizontal .p-metergroup-meter:first-of-type { - border-top-left-radius: ${dt('border.radius.md')}; - border-bottom-left-radius: ${dt('border.radius.md')}; + border-top-left-radius: ${dt('metergroup.border.radius')}; + border-bottom-left-radius: ${dt('metergroup.border.radius')}; } .p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: ${dt('border.radius.md')}; - border-bottom-right-radius: ${dt('border.radius.md')}; + border-top-right-radius: ${dt('metergroup.border.radius')}; + border-bottom-right-radius: ${dt('metergroup.border.radius')}; } .p-metergroup-vertical { @@ -69,12 +65,12 @@ const theme = ({ dt }) => ` .p-metergroup-label-list-vertical { flex-direction: column; - gap: 0.5rem; + gap: ${dt('metergroup.label.list.vertical.gap')}; } .p-metergroup-vertical .p-metergroup-meters { flex-direction: column; - width: 0.5rem; + width: ${dt('metergroup.meters.size')}; height: 100%; } @@ -83,12 +79,12 @@ const theme = ({ dt }) => ` } .p-metergroup-vertical .p-metergroup-meter:first-of-type { - border-top-left-radius: ${dt('border.radius.md')}; - border-top-right-radius: ${dt('border.radius.md')}; + border-top-left-radius: ${dt('metergroup.border.radius')}; + border-top-right-radius: ${dt('metergroup.border.radius')}; } .p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: ${dt('border.radius.md')}; - border-bottom-right-radius: ${dt('border.radius.md')}; + border-bottom-left-radius: ${dt('metergroup.border.radius')}; + border-bottom-right-radius: ${dt('metergroup.border.radius')}; } `; diff --git a/components/lib/themes/aura/metergroup/index.js b/components/lib/themes/aura/metergroup/index.js index d1a7b456c..349a0801d 100644 --- a/components/lib/themes/aura/metergroup/index.js +++ b/components/lib/themes/aura/metergroup/index.js @@ -1,5 +1,20 @@ export default { + root: { + borderRadius: '{content.border.radius}', + gap: '1rem' + }, meters: { - background: '{content.border.color}' + background: '{content.border.color}', + size: '0.5rem' + }, + label: { + gap: '0.5rem' + }, + labelMarker: { + size: '0.5rem' + }, + labelList: { + verticalGap: '0.5rem', + horizontalGap: '1rem' } }; diff --git a/components/lib/themes/lara/metergroup/index.js b/components/lib/themes/lara/metergroup/index.js index d1a7b456c..e7496714e 100644 --- a/components/lib/themes/lara/metergroup/index.js +++ b/components/lib/themes/lara/metergroup/index.js @@ -1,5 +1,20 @@ export default { + root: { + borderRadius: '{content.border.radius}', + gap: '1rem' + }, meters: { - background: '{content.border.color}' + background: '{content.border.color}', + size: '0.625rem' + }, + label: { + gap: '0.5rem' + }, + labelMarker: { + size: '0.5rem' + }, + labelList: { + verticalGap: '0.5rem', + horizontalGap: '1rem' } };