Skip to content

Commit 5fa83f7

Browse files
sxsx1xsxssxsx1xsxs
authored
[CAP-theme] modify badge component to utilize the new placeholder names (#572)
Utilized the newest placeholder names from https://www.figma.com/design/40dstXfCx3jpvlP4prbSBQ/Semantic-Tokens-mapping?node-id=4326-11713&p=f&m=dev for badge component. Something to note: because of figma code discrepency, some things noted in the diff section don't need to be changed in code, and some things not noted in the diff section actually need to be changed in code in order to achieve the desired look. Right now, my way of documenting those are adding comments in the figma diff section.
1 parent 1405b39 commit 5fa83f7

File tree

3 files changed

+132
-41
lines changed

3 files changed

+132
-41
lines changed

‎change/@fluentui-contrib-react-cap-theme-1e834867-b48f-4247-9175-f7ea18e280d1.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "none",
3+
"comment": "[CAP-theme] apply new placeholder names to badge component",
4+
"packageName": "@fluentui-contrib/react-cap-theme",
5+
"email": "yizhang9@microsoft.com",
6+
"dependentChangeType": "none"
7+
}

‎packages/react-cap-theme/src/components/Badge/Badge.styles.ts‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
useBadgeStyles_unstable,
88
} from '@fluentui/react-components';
99

10-
import { CAP_THEME_DEFAULTS } from '../../theme/CAPTheme';
10+
import { CAP_TOKENS } from '../../theme/CAPTheme';
1111

1212
const textPadding = tokens.spacingHorizontalXXS;
1313

1414
export const useBadgeStyles = makeStyles({
1515
root: {
16-
padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
16+
padding: `0 calc(${CAP_TOKENS['cap/badge-m/padding']} + ${textPadding})`,
1717
},
1818

1919
tiny: {
@@ -25,98 +25,101 @@ export const useBadgeStyles = makeStyles({
2525
},
2626

2727
small: {
28-
padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
28+
padding: `0 calc(${CAP_TOKENS['cap/badge-s/padding']} + ${textPadding})`,
2929
},
3030

3131
medium: {
3232
// Set by root
3333
},
3434

3535
large: {
36-
padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
36+
padding: `0 calc(${CAP_TOKENS['cap/badge-l/padding']} + ${textPadding})`,
3737
},
3838

3939
'extra-large': {
40-
padding: `0 calc(${tokens.spacingHorizontalS} + ${textPadding})`,
40+
padding: `0 calc(${CAP_TOKENS['cap/badge-xl/padding']} + ${textPadding})`,
4141
},
4242

4343
// shape
44-
'rounded-extra-large': { borderRadius: tokens.borderRadiusXLarge },
45-
'rounded-large': { borderRadius: tokens.borderRadiusLarge },
46-
'rounded-medium': { borderRadius: tokens.borderRadiusMedium },
47-
'rounded-small': { borderRadius: tokens.borderRadiusMedium },
48-
'rounded-extra-small': { borderRadius: tokens.borderRadiusSmall },
49-
'rounded-tiny': { borderRadius: tokens.borderRadiusSmall },
44+
'rounded-extra-large': {
45+
borderRadius: CAP_TOKENS['cap/badge-xl/corner-rounded'],
46+
},
47+
'rounded-large': { borderRadius: CAP_TOKENS['cap/badge-l/corner-rounded'] },
5048

5149
'outline-brand': {
52-
...shorthands.borderColor(tokens.colorBrandStroke2),
50+
...shorthands.borderColor(CAP_TOKENS['cap/badge/brand/outlined/stroke']),
5351
},
5452
'outline-warning': {
55-
...shorthands.borderColor(tokens.colorStatusWarningBorder1),
53+
...shorthands.borderColor(CAP_TOKENS['cap/badge/warning/outlined/stroke']),
5654
},
5755
'outline-important': {
58-
...shorthands.borderColor(tokens.colorNeutralStroke1),
56+
...shorthands.borderColor(
57+
CAP_TOKENS['cap/badge/important/outlined/stroke']
58+
),
5959
},
6060
'outline-danger': {
61-
...shorthands.borderColor(tokens.colorStatusDangerBorder1),
61+
...shorthands.borderColor(CAP_TOKENS['cap/badge/danger/outlined/stroke']),
6262
},
6363
'outline-success': {
64-
...shorthands.borderColor(tokens.colorStatusSuccessBorder1),
64+
...shorthands.borderColor(CAP_TOKENS['cap/badge/success/outlined/stroke']),
6565
},
6666
'outline-informative': {
67-
...shorthands.borderColor(tokens.colorNeutralStroke1),
67+
...shorthands.borderColor(
68+
CAP_TOKENS['cap/badge/informative/outlined/stroke']
69+
),
6870
},
6971
'outline-subtle': {
70-
...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
72+
color: CAP_TOKENS['cap/badge/subtle/outlined/foreground'],
73+
...shorthands.borderColor(
74+
CAP_TOKENS['cap/badge/subtle/outlined/foreground']
75+
),
7176
},
7277

7378
'tint-brand': {
74-
color:
75-
CAP_THEME_DEFAULTS['fixme/ctrl/badge/color-brand-foreground-compound'],
79+
color: CAP_TOKENS['cap/badge/brand/tint/foreground'],
7680
},
7781

7882
'ghost-brand': {
79-
color:
80-
CAP_THEME_DEFAULTS['fixme/ctrl/badge/color-brand-foreground-compound'],
83+
color: CAP_TOKENS['cap/badge/brand/ghost/foreground'],
8184
},
8285

8386
'filled-warning': {
84-
color: tokens.colorNeutralForegroundOnBrand,
85-
backgroundColor: tokens.colorStatusWarningBackground3,
87+
color: CAP_TOKENS['cap/badge/warning/filled/foreground'],
88+
backgroundColor: CAP_TOKENS['cap/badge/warning/filled/background'],
8689
},
8790

8891
'tint-informative': {
89-
backgroundColor: tokens.colorNeutralBackground5,
90-
...shorthands.borderColor(tokens.colorNeutralStroke1),
92+
backgroundColor: CAP_TOKENS['cap/badge/informative/tint/background'],
93+
...shorthands.borderColor(CAP_TOKENS['cap/badge/informative/tint/stroke']),
9194
},
9295

9396
'filled-important': {
94-
backgroundColor: tokens.colorNeutralBackgroundInverted,
95-
color: tokens.colorNeutralForegroundOnBrand,
97+
backgroundColor: CAP_TOKENS['cap/badge/important/filled/background'],
98+
color: CAP_TOKENS['cap/badge/important/filled/foreground'],
9699
},
97100

98101
'tint-important': {
99-
backgroundColor: tokens.colorNeutralBackground5,
100-
color: tokens.colorNeutralForeground3,
101-
...shorthands.borderColor(tokens.colorNeutralStroke1),
102+
backgroundColor: CAP_TOKENS['cap/badge/important/tint/background'],
103+
color: CAP_TOKENS['cap/badge/important/tint/foreground'],
104+
...shorthands.borderColor(CAP_TOKENS['cap/badge/important/tint/stroke']),
102105
},
103106

104107
'filled-subtle': {
105-
color: tokens.colorNeutralForeground3,
106-
backgroundColor: tokens.colorNeutralBackground5,
108+
color: CAP_TOKENS['cap/badge/subtle/filled/foreground'],
109+
backgroundColor: CAP_TOKENS['cap/badge/subtle/filled/background'],
107110
},
108111

109112
'tint-subtle': {
110-
...shorthands.borderColor(tokens.colorNeutralStroke1),
113+
...shorthands.borderColor(CAP_TOKENS['cap/badge/subtle/tint/stroke']),
111114
},
112115
});
113116

114117
const useBadgeIconStyles = makeStyles({
115118
beforeTextSmall: {
116-
marginRight: textPadding,
119+
marginRight: `calc(${CAP_TOKENS['cap/badge-s/gap']} + ${textPadding})`,
117120
},
118121
afterTextSmall: {
119-
marginLeft: textPadding,
122+
marginLeft: `calc(${CAP_TOKENS['cap/badge-s/gap-toSecondaryIcon']} + ${textPadding})`,
120123
},
121124
});
122125

@@ -132,7 +135,9 @@ export function useBadgeStylesHook(state: BadgeState): BadgeState {
132135
state.root.className,
133136
styles.root,
134137
styles[state.size],
135-
state.shape === 'rounded' && styles[`rounded-${state.size}`],
138+
state.shape === 'rounded' &&
139+
`rounded-${state.size}` in styles &&
140+
styles[`rounded-${state.size}` as keyof typeof styles],
136141
`${state.appearance}-${state.color}` in styles &&
137142
styles[`${state.appearance}-${state.color}` as keyof typeof styles]
138143
);

‎packages/react-cap-theme/src/theme/CAPTheme.tsx‎

Lines changed: 83 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export function formatCAPTokenCssVar(varName: string): string {
3737
*/
3838
const FluentExtendedTokens = {
3939
'fluent-ext/borderRadius2XLarge': { type: 'dimension' },
40+
'fluent-ext/brandForegroundCompound': { type: 'color' },
41+
// reason we need this token is the fluent version has value of "0" instead of "0px", which causes issues in CSS var usage
42+
'fluent-ext/spacingHorizontalNone': { type: 'dimension' },
4043
} as const satisfies Record<AllowedTokenName, TokenSchema>;
4144

4245
/**
@@ -48,7 +51,42 @@ const ControlTokens = {
4851
} as const satisfies Record<AllowedTokenName, TokenSchema>;
4952

5053
const BadgeTokens = {
51-
'fixme/ctrl/badge/color-brand-foreground-compound': { type: 'color' },
54+
'cap/badge-xl/corner-rounded': { type: 'dimension' },
55+
'cap/badge-l/corner-rounded': { type: 'dimension' },
56+
'cap/badge-xl/padding': { type: 'dimension' },
57+
'cap/badge-l/padding': { type: 'dimension' },
58+
'cap/badge-m/padding': { type: 'dimension' },
59+
'cap/badge-s/padding': { type: 'dimension' },
60+
'cap/badge-s/gap': { type: 'dimension' },
61+
'cap/badge-s/gap-toSecondaryIcon': { type: 'dimension' },
62+
'cap/badge/brand/outlined/stroke': { type: 'color' },
63+
'cap/badge/brand/tint/foreground': { type: 'color' },
64+
'cap/badge/brand/tint/iconColor': { type: 'color' },
65+
'cap/badge/brand/ghost/foreground': { type: 'color' },
66+
'cap/badge/brand/ghost/iconColor': { type: 'color' },
67+
'cap/badge/danger/outlined/stroke': { type: 'color' },
68+
'cap/badge/warning/filled/background': { type: 'color' },
69+
'cap/badge/warning/filled/iconColor': { type: 'color' },
70+
'cap/badge/warning/filled/foreground': { type: 'color' },
71+
'cap/badge/warning/outlined/stroke': { type: 'color' },
72+
'cap/badge/success/outlined/stroke': { type: 'color' },
73+
'cap/badge/informative/outlined/stroke': { type: 'color' },
74+
'cap/badge/informative/tint/background': { type: 'color' },
75+
'cap/badge/informative/tint/stroke': { type: 'color' },
76+
'cap/badge/important/filled/background': { type: 'color' },
77+
'cap/badge/important/filled/foreground': { type: 'color' },
78+
'cap/badge/important/filled/iconColor': { type: 'color' },
79+
'cap/badge/important/outlined/stroke': { type: 'color' },
80+
'cap/badge/important/tint/background': { type: 'color' },
81+
'cap/badge/important/tint/foreground': { type: 'color' },
82+
'cap/badge/important/tint/iconColor': { type: 'color' },
83+
'cap/badge/important/tint/stroke': { type: 'color' },
84+
'cap/badge/subtle/filled/background': { type: 'color' },
85+
'cap/badge/subtle/filled/foreground': { type: 'color' },
86+
'cap/badge/subtle/filled/iconColor': { type: 'color' },
87+
'cap/badge/subtle/outlined/foreground': { type: 'color' },
88+
'cap/badge/subtle/outlined/iconColor': { type: 'color' },
89+
'cap/badge/subtle/tint/stroke': { type: 'color' },
5290
} as const satisfies Record<AllowedTokenName, TokenSchema>;
5391

5492
const ButtonTokens = {
@@ -117,14 +155,55 @@ export type CAPTheme = {
117155
export const CAP_THEME_DEFAULTS = {
118156
// fluent-ext
119157
'fluent-ext/borderRadius2XLarge': '12px',
158+
'fluent-ext/brandForegroundCompound': '#03787C',
159+
'fluent-ext/spacingHorizontalNone': '0px',
120160

121161
// smtc/v1
122162
'smtc/v1/ctrl/corner/rest': CAP_TOKENS['fluent-ext/borderRadius2XLarge'],
123163

124164
// badge
125-
// TODO: switch to BrandForegroundCompound when available
126-
'fixme/ctrl/badge/color-brand-foreground-compound':
127-
tokens.colorBrandForeground1,
165+
'cap/badge-xl/corner-rounded': tokens.borderRadiusXLarge,
166+
'cap/badge-l/corner-rounded': tokens.borderRadiusLarge,
167+
'cap/badge-xl/padding': tokens.spacingHorizontalS,
168+
'cap/badge-l/padding': tokens.spacingHorizontalSNudge,
169+
'cap/badge-m/padding': tokens.spacingHorizontalSNudge,
170+
'cap/badge-s/padding': tokens.spacingHorizontalXS,
171+
'cap/badge-s/gap': CAP_TOKENS['fluent-ext/spacingHorizontalNone'],
172+
'cap/badge-s/gap-toSecondaryIcon':
173+
CAP_TOKENS['fluent-ext/spacingHorizontalNone'],
174+
'cap/badge/brand/outlined/stroke': tokens.colorBrandStroke2,
175+
'cap/badge/brand/tint/foreground':
176+
CAP_TOKENS['fluent-ext/brandForegroundCompound'],
177+
'cap/badge/brand/tint/iconColor':
178+
CAP_TOKENS['fluent-ext/brandForegroundCompound'],
179+
'cap/badge/brand/ghost/foreground':
180+
CAP_TOKENS['fluent-ext/brandForegroundCompound'],
181+
'cap/badge/brand/ghost/iconColor':
182+
CAP_TOKENS['fluent-ext/brandForegroundCompound'],
183+
'cap/badge/danger/outlined/stroke': tokens.colorStatusDangerBorder1,
184+
'cap/badge/warning/filled/background': tokens.colorStatusWarningBackground3,
185+
'cap/badge/warning/filled/iconColor': tokens.colorNeutralForegroundOnBrand,
186+
'cap/badge/warning/filled/foreground': tokens.colorNeutralForegroundOnBrand,
187+
'cap/badge/warning/outlined/stroke': tokens.colorStatusWarningBorder1,
188+
'cap/badge/success/outlined/stroke': tokens.colorStatusSuccessBorder1,
189+
'cap/badge/informative/outlined/stroke': tokens.colorNeutralStroke1,
190+
'cap/badge/informative/tint/background': tokens.colorNeutralBackground5,
191+
'cap/badge/informative/tint/stroke': tokens.colorNeutralStroke1,
192+
'cap/badge/important/filled/background':
193+
tokens.colorNeutralBackgroundInverted,
194+
'cap/badge/important/filled/foreground': tokens.colorNeutralForegroundOnBrand,
195+
'cap/badge/important/filled/iconColor': tokens.colorNeutralForegroundOnBrand,
196+
'cap/badge/important/outlined/stroke': tokens.colorNeutralStroke1,
197+
'cap/badge/important/tint/background': tokens.colorNeutralBackground5,
198+
'cap/badge/important/tint/foreground': tokens.colorNeutralForeground3,
199+
'cap/badge/important/tint/iconColor': tokens.colorNeutralForeground3,
200+
'cap/badge/important/tint/stroke': tokens.colorNeutralStroke1,
201+
'cap/badge/subtle/filled/background': tokens.colorNeutralBackground5,
202+
'cap/badge/subtle/filled/foreground': tokens.colorNeutralForeground3,
203+
'cap/badge/subtle/filled/iconColor': tokens.colorNeutralForeground3,
204+
'cap/badge/subtle/outlined/foreground': tokens.colorNeutralForeground3,
205+
'cap/badge/subtle/outlined/iconColor': tokens.colorNeutralForeground3,
206+
'cap/badge/subtle/tint/stroke': tokens.colorNeutralStroke1,
128207

129208
// button
130209
'fixme/ctrl/button/corner-radius': CAP_TOKENS['smtc/v1/ctrl/corner/rest'],

0 commit comments

Comments
 (0)