Skip to content

Commit a3ce30b

Browse files
JasonVMoJasonVMo
authored
remove the windows platform for styling
1 parent bdecb73 commit a3ce30b

96 files changed

Lines changed: 3096 additions & 1959 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/warm-carpets-smile.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"@fluentui-react-native/avatar": patch
3+
"@fluentui-react-native/badge": patch
4+
"@fluentui-react-native/button": patch
5+
"@fluentui-react-native/checkbox": patch
6+
"@fluentui-react-native/menu": patch
7+
"@fluentui-react-native/radio-group": patch
8+
"@fluentui-react-native/switch": patch
9+
"@fluentui-react-native/tablist": patch
10+
"@fluentui-react-native/text": patch
11+
"@fluentui-react-native/experimental-shimmer": patch
12+
"@fluentui-react-native/spinner": patch
13+
---
14+
15+
Use Win32 styling and token values as the shared default for Windows and Win32.

‎packages/components/Avatar/src/AvatarColorTokens.test.windows.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createColorPinningTheme, resolveV1ColorTokens } from '@fluentui-react-native/test-tools';
2+
3+
import { stylingSettings } from './Avatar.styling';
4+
5+
it('pins Avatar color tokens on Windows', () => {
6+
const theme = createColorPinningTheme();
7+
8+
expect(resolveV1ColorTokens(stylingSettings.tokens, theme)).toMatchSnapshot();
9+
});

packages/components/Avatar/src/AvatarTokens.win32.ts renamed to packages/components/Avatar/src/AvatarTokens.macos.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { getNamedColorSet, type NamedColorSet } from './Avatar.colors';
2222

2323
export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme) =>
2424
({
25-
badgeSize: 'tiny',
25+
badgeSize: 'small',
2626
color: t.colors.neutralForeground3,
2727
backgroundColor: t.colors.neutralBackground6,
2828
avatarOpacity: 1,
@@ -191,27 +191,25 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
191191
* @returns object of props - backgroundColor, color and ringColor
192192
*/
193193
function getColorProps(color: NamedColorSet, theme: Theme) {
194-
const themeAppearance = theme.name;
195194
const colorSet = getNamedColorSet(color);
195+
const themeAppearance = theme.host.appearance;
196196
switch (themeAppearance) {
197-
case 'White':
198-
case 'Colorful':
197+
case 'light':
199198
default:
200199
return {
201200
backgroundColor: colorSet.tint40,
202201
color: colorSet.shade30,
203202
iconColor: colorSet.shade30,
204203
ringColor: colorSet.primary,
205204
};
206-
case 'DarkGray':
207-
case 'Black':
205+
case 'dark':
208206
return {
209207
backgroundColor: colorSet.shade30,
210208
color: colorSet.tint40,
211209
iconColor: colorSet.tint40,
212210
ringColor: colorSet.tint30,
213211
};
214-
case 'HighContrast':
212+
case 'highContrast':
215213
return {
216214
backgroundColor: theme.colors.neutralBackground6,
217215
color: theme.colors.neutralForeground3,

‎packages/components/Avatar/src/AvatarTokens.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { getNamedColorSet, type NamedColorSet } from './Avatar.colors';
2222

2323
export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme) =>
2424
({
25-
badgeSize: 'small',
25+
badgeSize: 'tiny',
2626
color: t.colors.neutralForeground3,
2727
backgroundColor: t.colors.neutralBackground6,
2828
avatarOpacity: 1,
@@ -191,25 +191,27 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
191191
* @returns object of props - backgroundColor, color and ringColor
192192
*/
193193
function getColorProps(color: NamedColorSet, theme: Theme) {
194+
const themeAppearance = theme.name;
194195
const colorSet = getNamedColorSet(color);
195-
const themeAppearance = theme.host.appearance;
196196
switch (themeAppearance) {
197-
case 'light':
197+
case 'White':
198+
case 'Colorful':
198199
default:
199200
return {
200201
backgroundColor: colorSet.tint40,
201202
color: colorSet.shade30,
202203
iconColor: colorSet.shade30,
203204
ringColor: colorSet.primary,
204205
};
205-
case 'dark':
206+
case 'DarkGray':
207+
case 'Black':
206208
return {
207209
backgroundColor: colorSet.shade30,
208210
color: colorSet.tint40,
209211
iconColor: colorSet.tint40,
210212
ringColor: colorSet.tint30,
211213
};
212-
case 'highContrast':
214+
case 'HighContrast':
213215
return {
214216
backgroundColor: theme.colors.neutralBackground6,
215217
color: theme.colors.neutralForeground3,

‎packages/components/Avatar/src/__snapshots__/AvatarColorTokens.test.windows.ts.snap‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`pins Avatar color tokens on Windows 1`] = `
4+
{
5+
"anchor": {
6+
"backgroundColor": "#bcc3c7",
7+
"color": "#202427",
8+
"iconColor": "#202427",
9+
"ringColor": "#394146",
10+
},
11+
"backgroundColor": "#e6e6e6",
12+
"beige": {
13+
"backgroundColor": "#d7d4d4",
14+
"color": "#444241",
15+
"iconColor": "#444241",
16+
"ringColor": "#7a7574",
17+
},
18+
"blue": {
19+
"backgroundColor": "#a9d3f2",
20+
"color": "#004377",
21+
"iconColor": "#004377",
22+
"ringColor": "#0078d4",
23+
},
24+
"borderColor": "#969696",
25+
"brand": {
26+
"backgroundColor": "#185abd",
27+
"color": "#FFFFFF",
28+
"iconColor": "#FFFFFF",
29+
"ringColor": "#00000000",
30+
},
31+
"brass": {
32+
"backgroundColor": "#e0cea2",
33+
"color": "#553e06",
34+
"iconColor": "#553e06",
35+
"ringColor": "#986f0b",
36+
},
37+
"brown": {
38+
"backgroundColor": "#ddc3b0",
39+
"color": "#50301a",
40+
"iconColor": "#50301a",
41+
"ringColor": "#8e562e",
42+
},
43+
"burgundy": {
44+
"backgroundColor": "#e4afb2",
45+
"color": "#5c1519",
46+
"iconColor": "#5c1519",
47+
"ringColor": "#a4262c",
48+
},
49+
"color": "#616161",
50+
"cornflower": {
51+
"backgroundColor": "#c8d1fa",
52+
"color": "#2c3c85",
53+
"iconColor": "#2c3c85",
54+
"ringColor": "#4f6bed",
55+
},
56+
"cranberry": {
57+
"backgroundColor": "#eeacb2",
58+
"color": "#6e0811",
59+
"iconColor": "#6e0811",
60+
"ringColor": "#c50f1f",
61+
},
62+
"darkGreen": {
63+
"backgroundColor": "#9ad29a",
64+
"color": "#063b06",
65+
"iconColor": "#063b06",
66+
"ringColor": "#0b6a0b",
67+
},
68+
"darkRed": {
69+
"backgroundColor": "#d69ca5",
70+
"color": "#420610",
71+
"iconColor": "#420610",
72+
"ringColor": "#750b1c",
73+
},
74+
"forest": {
75+
"backgroundColor": "#bdd99b",
76+
"color": "#294903",
77+
"iconColor": "#294903",
78+
"ringColor": "#498205",
79+
},
80+
"gold": {
81+
"backgroundColor": "#ecdfa5",
82+
"color": "#6c5700",
83+
"iconColor": "#6c5700",
84+
"ringColor": "#c19c00",
85+
},
86+
"grape": {
87+
"backgroundColor": "#d9a7e0",
88+
"color": "#4c0d55",
89+
"iconColor": "#4c0d55",
90+
"ringColor": "#881798",
91+
},
92+
"hotPink": {
93+
"backgroundColor": "#f7adda",
94+
"color": "#7f004e",
95+
"iconColor": "#7f004e",
96+
"ringColor": "#e3008c",
97+
},
98+
"iconColor": "#616161",
99+
"lavender": {
100+
"backgroundColor": "#d2ccf8",
101+
"color": "#3f3682",
102+
"iconColor": "#3f3682",
103+
"ringColor": "#7160e8",
104+
},
105+
"lightTeal": {
106+
"backgroundColor": "#a6e9ed",
107+
"color": "#00666d",
108+
"iconColor": "#00666d",
109+
"ringColor": "#00b7c3",
110+
},
111+
"lilac": {
112+
"backgroundColor": "#e6bfed",
113+
"color": "#63276d",
114+
"iconColor": "#63276d",
115+
"ringColor": "#b146c2",
116+
},
117+
"magenta": {
118+
"backgroundColor": "#eca5d1",
119+
"color": "#6b0043",
120+
"iconColor": "#6b0043",
121+
"ringColor": "#bf0077",
122+
},
123+
"marigold": {
124+
"backgroundColor": "#f9e2ae",
125+
"color": "#835b00",
126+
"iconColor": "#835b00",
127+
"ringColor": "#eaa300",
128+
},
129+
"mink": {
130+
"backgroundColor": "#cecccb",
131+
"color": "#343231",
132+
"iconColor": "#343231",
133+
"ringColor": "#5d5a58",
134+
},
135+
"navy": {
136+
"backgroundColor": "#a3b2e8",
137+
"color": "#001665",
138+
"iconColor": "#001665",
139+
"ringColor": "#0027b4",
140+
},
141+
"neutral": {
142+
"backgroundColor": "#e6e6e6",
143+
"color": "#616161",
144+
"iconColor": "#616161",
145+
"ringColor": "#00000000",
146+
},
147+
"orchid": {
148+
"backgroundColor": "#d7caea",
149+
"color": "#4c3867",
150+
"iconColor": "#4c3867",
151+
"ringColor": "#8764b8",
152+
},
153+
"peach": {
154+
"backgroundColor": "#ffddb3",
155+
"color": "#8f4e00",
156+
"iconColor": "#8f4e00",
157+
"ringColor": "#ff8c00",
158+
},
159+
"pink": {
160+
"backgroundColor": "#f7c0e3",
161+
"color": "#80215d",
162+
"iconColor": "#80215d",
163+
"ringColor": "#e43ba6",
164+
},
165+
"platinum": {
166+
"backgroundColor": "#cdd6d8",
167+
"color": "#3b4447",
168+
"iconColor": "#3b4447",
169+
"ringColor": "#69797e",
170+
},
171+
"plum": {
172+
"backgroundColor": "#d696c0",
173+
"color": "#43002b",
174+
"iconColor": "#43002b",
175+
"ringColor": "#77004d",
176+
},
177+
"pumpkin": {
178+
"backgroundColor": "#efc4ad",
179+
"color": "#712d09",
180+
"iconColor": "#712d09",
181+
"ringColor": "#ca5010",
182+
},
183+
"purple": {
184+
"backgroundColor": "#c6b1de",
185+
"color": "#341a51",
186+
"iconColor": "#341a51",
187+
"ringColor": "#5c2e91",
188+
},
189+
"red": {
190+
"backgroundColor": "#f1bbbc",
191+
"color": "#751d1f",
192+
"iconColor": "#751d1f",
193+
"ringColor": "#d13438",
194+
},
195+
"ringColor": "#00000000",
196+
"royalBlue": {
197+
"backgroundColor": "#9abfdc",
198+
"color": "#002c4e",
199+
"iconColor": "#002c4e",
200+
"ringColor": "#004e8c",
201+
},
202+
"seafoam": {
203+
"backgroundColor": "#a8f0cd",
204+
"color": "#00723b",
205+
"iconColor": "#00723b",
206+
"ringColor": "#00cc6a",
207+
},
208+
"steel": {
209+
"backgroundColor": "#94c8d4",
210+
"color": "#00333f",
211+
"iconColor": "#00333f",
212+
"ringColor": "#005b70",
213+
},
214+
"teal": {
215+
"backgroundColor": "#9bd9db",
216+
"color": "#02494c",
217+
"iconColor": "#02494c",
218+
"ringColor": "#038387",
219+
},
220+
}
221+
`;

0 commit comments

Comments
 (0)