diff --git a/packages/css/badge.css b/packages/css/badge.css index d4afe8338f..1eaebb44ba 100644 --- a/packages/css/badge.css +++ b/packages/css/badge.css @@ -1,8 +1,8 @@ .ds-badge { --dsc-badge-background: var(--ds-color-accent-base-default); --dsc-badge-color: var(--ds-color-accent-contrast-default); - --dsc-badge-padding: 0 var(--ds-spacing-1); - --dsc-badge-height: 14px; + --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2)); + --dsc-badge-height: var(--ds-sizing-6); --dsc-badge-width: 14px; background-color: var(--dsc-badge-background); @@ -111,16 +111,34 @@ .ds-badge--sm { --dsc-badge-height: var(--ds-sizing-3); --dsc-badge-width: var(--ds-sizing-3); + + &.ds-badge--count { + --dsc-badge-height: var(--ds-sizing-5); + --dsc-badge-width: auto; + --dsc-badge-padding: 0 var(--ds-spacing-1); + } } .ds-badge--md { - --dsc-badge-height: calc(var(--ds-sizing-3) + 2px); - --dsc-badge-width: calc(var(--ds-sizing-3) + 2px); + --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2)); + --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2)); + + &.ds-badge--count { + --dsc-badge-height: var(--ds-sizing-6); + --dsc-badge-width: auto; + --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2)); + } } .ds-badge--lg { --dsc-badge-height: var(--ds-sizing-4); --dsc-badge-width: var(--ds-sizing-4); + + &.ds-badge--count { + --dsc-badge-height: var(--ds-sizing-7); + --dsc-badge-width: auto; + --dsc-badge-padding: 0 var(--ds-spacing-2); + } } .ds-badge--count {