diff --git a/components/lib/steps/style/StepsStyle.js b/components/lib/steps/style/StepsStyle.js index b168083a5..903c1c1a7 100644 --- a/components/lib/steps/style/StepsStyle.js +++ b/components/lib/steps/style/StepsStyle.js @@ -54,14 +54,16 @@ const theme = ({ dt }) => ` align-items: center; overflow: hidden; text-decoration: none; - transition: outline-color ${dt('transition.duration')}; - border-radius: ${dt('border.radius.md')}; + transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; + border-radius: ${dt('steps.item.link.border.radius')}; outline-color: transparent; + gap: ${dt('steps.item.link.gap')}; } .p-steps-item-link:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; + box-shadow: ${dt('steps.item.link.focus.ring.shadow')}; + outline: ${dt('steps.item.link.focus.ring.width')} ${dt('steps.item.link.focus.ring.style')} ${dt('steps.item.link.focus.ring.color')}; + outline-offset: ${dt('steps.item.link.focus.ring.offset')}; } .p-steps-item-label { @@ -69,10 +71,9 @@ const theme = ({ dt }) => ` overflow: hidden; text-overflow: ellipsis; max-width: 100%; - margin-top: 0.5rem; color: ${dt('steps.item.label.color')}; display: block; - font-weight: 500; + font-weight: ${dt('steps.item.label.font.weight')}; } .p-steps-item-number { @@ -82,14 +83,14 @@ const theme = ({ dt }) => ` color: ${dt('steps.item.number.color')}; border: 2px solid ${dt('steps.item.number.border.color')}; background: ${dt('steps.item.number.background')}; - min-width: 2rem; - height: 2rem; - line-height: 2rem; - font-size: 1.143rem; + min-width: ${dt('steps.item.number.size')}; + height: ${dt('steps.item.number.size')}; + line-height: ${dt('steps.item.number.size')}; + font-size: ${dt('steps.item.number.font.size')}; z-index: 1; - border-radius: 50%; + border-radius: ${dt('steps.item.number.border.radius')}; position: relative; - font-weight: 500; + font-weight: ${dt('steps.item.number.font.weight')}; } .p-steps-item-number::after { @@ -97,8 +98,8 @@ const theme = ({ dt }) => ` position: absolute; width: 100%; height: 100%; - border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); + border-radius: ${dt('steps.item.number.border.radius')}; + box-shadow: ${dt('steps.item.number.shadow')}; } .p-steps:not(.p-readonly) .p-steps-item { @@ -111,7 +112,6 @@ const theme = ({ dt }) => ` } .p-steps-item-active .p-steps-item-label { - font-weight: 500; color: ${dt('steps.item.label.active.color')}; } `; diff --git a/components/lib/themes/aura/steps/index.js b/components/lib/themes/aura/steps/index.js index e113ada66..e9d55a374 100644 --- a/components/lib/themes/aura/steps/index.js +++ b/components/lib/themes/aura/steps/index.js @@ -2,15 +2,32 @@ export default { separator: { background: '{content.border.color}' }, + itemLink: { + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + gap: '0.5rem' + }, itemLabel: { - color: '{text.color}', - activeColor: '{primary.color}' + color: '{text.muted.color}', + activeColor: '{primary.color}', + fontWeight: '500' }, itemNumber: { background: '{content.background}', activeBackground: '{content.background}', borderColor: '{content.border.color}', color: '{text.muted.color}', - activeColor: '{primary.color}' + activeColor: '{primary.color}', + size: '2rem', + fontSize: '1.143rem', + fontWeight: '500', + borderRadius: '50%', + shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)' } }; diff --git a/components/lib/themes/lara/steps/index.js b/components/lib/themes/lara/steps/index.js index e113ada66..458e618d5 100644 --- a/components/lib/themes/lara/steps/index.js +++ b/components/lib/themes/lara/steps/index.js @@ -2,15 +2,32 @@ export default { separator: { background: '{content.border.color}' }, + itemLink: { + borderRadius: '{content.border.radius}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, + gap: '0.5rem' + }, itemLabel: { - color: '{text.color}', - activeColor: '{primary.color}' + color: '{text.muted.color}', + activeColor: '{primary.color}', + fontWeight: '500' }, itemNumber: { background: '{content.background}', - activeBackground: '{content.background}', + activeBackground: '{primary.color}', borderColor: '{content.border.color}', color: '{text.muted.color}', - activeColor: '{primary.color}' + activeColor: '{primary.inverse.color}', + size: '2.25rem', + fontSize: '1.125rem', + fontWeight: '500', + borderRadius: '50%', + shadow: 'none' } };