Skip to content

Commit

Permalink
chore: use tokens directly in css for badge partial (#31847)
Browse files Browse the repository at this point in the history
  • Loading branch information
mohamedmansour authored Jun 27, 2024
1 parent e8819fb commit c05bfd2
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 6 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "chore: use tokens directly in css for badge partial",
"packageName": "@fluentui/web-components",
"email": "mmansour@microsoft.com",
"dependentChangeType": "patch"
}
10 changes: 4 additions & 6 deletions packages/web-components/src/styles/partials/badge.partials.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@ import {
warningState,
} from '../states/index.js';

const textPadding = spacingHorizontalXXS;

export const badgeBaseStyles = css.partial`
${display('inline-flex')} :host {
position: relative;
Expand All @@ -82,7 +80,7 @@ export const badgeBaseStyles = css.partial`
line-height: ${lineHeightBase200};
min-width: 20px;
height: 20px;
padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
border-radius: ${borderRadiusCircular};
border-color: ${colorTransparentStroke};
background-color: ${colorBrandBackground};
Expand Down Expand Up @@ -140,7 +138,7 @@ export const badgeSizeStyles = css.partial`
height: 16px;
font-size: ${fontSizeBase100};
line-height: ${lineHeightBase100};
padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
}
:host(${smallState}) ::slotted(svg) {
font-size: 12px;
Expand All @@ -150,7 +148,7 @@ export const badgeSizeStyles = css.partial`
height: 24px;
font-size: ${fontSizeBase200};
line-height: ${lineHeightBase200};
padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
}
:host(${largeState}) ::slotted(svg) {
font-size: 16px;
Expand All @@ -160,7 +158,7 @@ export const badgeSizeStyles = css.partial`
height: 32px;
font-size: ${fontSizeBase200};
line-height: ${lineHeightBase200};
padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
}
:host(${extraLargeState}) ::slotted(svg) {
font-size: 20px;
Expand Down

0 comments on commit c05bfd2

Please sign in to comment.