@fluentui-react-native/experimental-avatar 0.14.27 → 0.14.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +22 -1
- package/CHANGELOG.md +11 -2
- package/lib/JSAvatar.d.ts.map +1 -1
- package/lib/JSAvatar.js +3 -1
- package/lib/JSAvatar.js.map +1 -1
- package/lib/JSAvatar.styling.d.ts.map +1 -1
- package/lib/JSAvatar.styling.js +18 -8
- package/lib/JSAvatar.styling.js.map +1 -1
- package/lib/JSAvatar.types.d.ts +3 -1
- package/lib/JSAvatar.types.d.ts.map +1 -1
- package/lib/JSAvatarTokens.d.ts.map +1 -1
- package/lib/JSAvatarTokens.js +73 -153
- package/lib/JSAvatarTokens.js.map +1 -1
- package/lib/JSAvatarTokens.win32.d.ts +5 -0
- package/lib/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib/JSAvatarTokens.win32.js +210 -0
- package/lib/JSAvatarTokens.win32.js.map +1 -0
- package/lib-commonjs/JSAvatar.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.js +3 -1
- package/lib-commonjs/JSAvatar.js.map +1 -1
- package/lib-commonjs/JSAvatar.styling.d.ts.map +1 -1
- package/lib-commonjs/JSAvatar.styling.js +18 -8
- package/lib-commonjs/JSAvatar.styling.js.map +1 -1
- package/lib-commonjs/JSAvatar.types.d.ts +3 -1
- package/lib-commonjs/JSAvatar.types.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.d.ts.map +1 -1
- package/lib-commonjs/JSAvatarTokens.js +73 -153
- package/lib-commonjs/JSAvatarTokens.js.map +1 -1
- package/lib-commonjs/JSAvatarTokens.win32.d.ts +5 -0
- package/lib-commonjs/JSAvatarTokens.win32.d.ts.map +1 -0
- package/lib-commonjs/JSAvatarTokens.win32.js +214 -0
- package/lib-commonjs/JSAvatarTokens.win32.js.map +1 -0
- package/package.json +5 -4
- package/src/JSAvatar.styling.ts +22 -6
- package/src/JSAvatar.tsx +12 -1
- package/src/JSAvatar.types.ts +3 -1
- package/src/JSAvatarTokens.ts +74 -153
- package/src/JSAvatarTokens.win32.ts +213 -0
- package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap +59 -1
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
2
|
+
export var defaultJSAvatarTokens = function (t) {
|
|
3
|
+
return ({
|
|
4
|
+
horizontalIconAlignment: 'end',
|
|
5
|
+
verticalIconAlignment: 'end',
|
|
6
|
+
color: globalTokens.color.white,
|
|
7
|
+
backgroundColor: globalTokens.color.cornflower.primary,
|
|
8
|
+
avatarOpacity: 1,
|
|
9
|
+
fontFamily: t.typography.families.primary,
|
|
10
|
+
fontWeight: globalTokens.font.weight.semibold,
|
|
11
|
+
fontSize: globalTokens.font.size[200],
|
|
12
|
+
width: 24,
|
|
13
|
+
height: 24,
|
|
14
|
+
iconSize: 16,
|
|
15
|
+
iconColor: globalTokens.color.white,
|
|
16
|
+
ringColor: t.colors.transparentStroke,
|
|
17
|
+
borderColor: globalTokens.color.white,
|
|
18
|
+
borderWidth: t.name === 'HighContrast' ? 1 : 0,
|
|
19
|
+
circular: {
|
|
20
|
+
borderRadius: globalTokens.corner.radius.circle,
|
|
21
|
+
},
|
|
22
|
+
square: {
|
|
23
|
+
borderRadius: globalTokens.corner.radius.medium,
|
|
24
|
+
},
|
|
25
|
+
inactive: {
|
|
26
|
+
avatarOpacity: 0.8,
|
|
27
|
+
},
|
|
28
|
+
size20: {
|
|
29
|
+
width: 20,
|
|
30
|
+
height: 20,
|
|
31
|
+
badgeSize: 'smallest',
|
|
32
|
+
iconSize: 16,
|
|
33
|
+
fontSize: globalTokens.font.size[100],
|
|
34
|
+
square: {
|
|
35
|
+
borderRadius: globalTokens.corner.radius.small,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
size24: {
|
|
39
|
+
width: 24,
|
|
40
|
+
height: 24,
|
|
41
|
+
badgeSize: 'smallest',
|
|
42
|
+
iconSize: 16,
|
|
43
|
+
fontSize: globalTokens.font.size[100],
|
|
44
|
+
square: {
|
|
45
|
+
borderRadius: globalTokens.corner.radius.small,
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
size28: {
|
|
49
|
+
width: 28,
|
|
50
|
+
height: 28,
|
|
51
|
+
badgeSize: 'smaller',
|
|
52
|
+
iconSize: 20,
|
|
53
|
+
fontWeight: globalTokens.font.weight.semibold,
|
|
54
|
+
fontSize: globalTokens.font.size[100],
|
|
55
|
+
},
|
|
56
|
+
size32: {
|
|
57
|
+
width: 32,
|
|
58
|
+
height: 32,
|
|
59
|
+
badgeSize: 'smaller',
|
|
60
|
+
iconSize: 20,
|
|
61
|
+
fontSize: globalTokens.font.size[100],
|
|
62
|
+
},
|
|
63
|
+
size36: {
|
|
64
|
+
width: 36,
|
|
65
|
+
height: 36,
|
|
66
|
+
badgeSize: 'smaller',
|
|
67
|
+
iconSize: 20,
|
|
68
|
+
},
|
|
69
|
+
size40: {
|
|
70
|
+
width: 40,
|
|
71
|
+
height: 40,
|
|
72
|
+
badgeSize: 'small',
|
|
73
|
+
iconSize: 20,
|
|
74
|
+
},
|
|
75
|
+
size48: {
|
|
76
|
+
width: 48,
|
|
77
|
+
height: 48,
|
|
78
|
+
badgeSize: 'small',
|
|
79
|
+
iconSize: 24,
|
|
80
|
+
},
|
|
81
|
+
size56: {
|
|
82
|
+
width: 56,
|
|
83
|
+
height: 56,
|
|
84
|
+
badgeSize: 'medium',
|
|
85
|
+
iconSize: 28,
|
|
86
|
+
fontSize: globalTokens.font.size[400],
|
|
87
|
+
square: {
|
|
88
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
size64: {
|
|
92
|
+
width: 64,
|
|
93
|
+
height: 64,
|
|
94
|
+
badgeSize: 'large',
|
|
95
|
+
iconSize: 32,
|
|
96
|
+
fontSize: globalTokens.font.size[500],
|
|
97
|
+
square: {
|
|
98
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
size72: {
|
|
102
|
+
width: 72,
|
|
103
|
+
height: 72,
|
|
104
|
+
badgeSize: 'large',
|
|
105
|
+
iconSize: 32,
|
|
106
|
+
fontSize: globalTokens.font.size[500],
|
|
107
|
+
square: {
|
|
108
|
+
borderRadius: globalTokens.corner.radius.large,
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
size96: {
|
|
112
|
+
width: 96,
|
|
113
|
+
height: 96,
|
|
114
|
+
badgeSize: 'largest',
|
|
115
|
+
iconSize: 48,
|
|
116
|
+
fontWeight: globalTokens.font.weight.regular,
|
|
117
|
+
fontSize: globalTokens.font.size[700],
|
|
118
|
+
square: {
|
|
119
|
+
borderRadius: globalTokens.corner.radius.extraLarge,
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
size120: {
|
|
123
|
+
width: 120,
|
|
124
|
+
height: 120,
|
|
125
|
+
badgeSize: 'largest',
|
|
126
|
+
iconSize: 48,
|
|
127
|
+
fontWeight: globalTokens.font.weight.regular,
|
|
128
|
+
fontSize: globalTokens.font.size[900],
|
|
129
|
+
square: {
|
|
130
|
+
borderRadius: globalTokens.corner.radius.extraLarge,
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
neutral: {
|
|
134
|
+
backgroundColor: t.colors.neutralBackground6,
|
|
135
|
+
color: t.colors.neutralForeground3,
|
|
136
|
+
ringColor: t.colors.transparentStroke,
|
|
137
|
+
},
|
|
138
|
+
brand: {
|
|
139
|
+
backgroundColor: t.colors.brandBackgroundStatic,
|
|
140
|
+
color: t.colors.neutralForegroundOnBrand,
|
|
141
|
+
ringColor: t.colors.transparentStroke,
|
|
142
|
+
},
|
|
143
|
+
darkRed: getColorProps('darkRed', t),
|
|
144
|
+
cranberry: getColorProps('cranberry', t),
|
|
145
|
+
red: getColorProps('red', t),
|
|
146
|
+
pumpkin: getColorProps('pumpkin', t),
|
|
147
|
+
peach: getColorProps('peach', t),
|
|
148
|
+
marigold: getColorProps('marigold', t),
|
|
149
|
+
gold: getColorProps('gold', t),
|
|
150
|
+
brass: getColorProps('brass', t),
|
|
151
|
+
brown: getColorProps('brown', t),
|
|
152
|
+
forest: getColorProps('forest', t),
|
|
153
|
+
seafoam: getColorProps('seafoam', t),
|
|
154
|
+
darkGreen: getColorProps('darkGreen', t),
|
|
155
|
+
lightTeal: getColorProps('lightTeal', t),
|
|
156
|
+
teal: getColorProps('teal', t),
|
|
157
|
+
steel: getColorProps('steel', t),
|
|
158
|
+
blue: getColorProps('blue', t),
|
|
159
|
+
royalBlue: getColorProps('royalBlue', t),
|
|
160
|
+
cornflower: getColorProps('cornflower', t),
|
|
161
|
+
navy: getColorProps('navy', t),
|
|
162
|
+
lavender: getColorProps('lavender', t),
|
|
163
|
+
purple: getColorProps('purple', t),
|
|
164
|
+
grape: getColorProps('grape', t),
|
|
165
|
+
lilac: getColorProps('lilac', t),
|
|
166
|
+
pink: getColorProps('pink', t),
|
|
167
|
+
magenta: getColorProps('magenta', t),
|
|
168
|
+
plum: getColorProps('plum', t),
|
|
169
|
+
beige: getColorProps('beige', t),
|
|
170
|
+
mink: getColorProps('mink', t),
|
|
171
|
+
platinum: getColorProps('platinum', t),
|
|
172
|
+
anchor: getColorProps('anchor', t),
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* A function which returns object of props depending on color and theme.
|
|
177
|
+
* @param color
|
|
178
|
+
* @param theme
|
|
179
|
+
* @returns object of props - backgroundColor, color and ringColor
|
|
180
|
+
*/
|
|
181
|
+
function getColorProps(color, theme) {
|
|
182
|
+
var themeAppearance = theme.name;
|
|
183
|
+
switch (themeAppearance) {
|
|
184
|
+
case 'White':
|
|
185
|
+
case 'Colorful':
|
|
186
|
+
default:
|
|
187
|
+
return {
|
|
188
|
+
backgroundColor: globalTokens.color[color].tint40,
|
|
189
|
+
color: globalTokens.color[color].shade30,
|
|
190
|
+
iconColor: globalTokens.color[color].shade30,
|
|
191
|
+
ringColor: globalTokens.color[color].primary,
|
|
192
|
+
};
|
|
193
|
+
case 'DarkGray':
|
|
194
|
+
case 'Black':
|
|
195
|
+
return {
|
|
196
|
+
backgroundColor: globalTokens.color[color].shade30,
|
|
197
|
+
color: globalTokens.color[color].tint40,
|
|
198
|
+
iconColor: globalTokens.color[color].tint40,
|
|
199
|
+
ringColor: globalTokens.color[color].tint30,
|
|
200
|
+
};
|
|
201
|
+
case 'HighContrast':
|
|
202
|
+
return {
|
|
203
|
+
backgroundColor: theme.colors.neutralBackground6,
|
|
204
|
+
color: theme.colors.neutralForeground3,
|
|
205
|
+
iconColor: theme.colors.neutralForeground3,
|
|
206
|
+
ringColor: theme.colors.transparentStroke,
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
//# sourceMappingURL=JSAvatarTokens.win32.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.win32.js","sourceRoot":"","sources":["../src/JSAvatarTokens.win32.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAS5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAa5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KA+CnB,CAAC"}
|
package/lib-commonjs/JSAvatar.js
CHANGED
|
@@ -32,6 +32,7 @@ var useAvatar_1 = require("./useAvatar");
|
|
|
32
32
|
var badge_1 = require("@fluentui-react-native/badge");
|
|
33
33
|
var icon_1 = require("@fluentui-react-native/icon");
|
|
34
34
|
var interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
|
|
35
|
+
var react_native_svg_1 = require("react-native-svg");
|
|
35
36
|
/**
|
|
36
37
|
* A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
|
|
37
38
|
*
|
|
@@ -69,8 +70,9 @@ exports.JSAvatar = (0, framework_1.compose)(__assign(__assign({ displayName: JSA
|
|
|
69
70
|
var _a = (0, framework_1.mergeProps)(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials, image = _a.image, badge = _a.badge, mergedProps = __rest(_a, ["activeAppearance", "icon", "initials", "image", "badge"]);
|
|
70
71
|
var _b = avatar.state, showRing = _b.showRing, transparentRing = _b.transparentRing, showBadge = _b.showBadge;
|
|
71
72
|
var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
|
|
73
|
+
var fallBackIconXml = "<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z\" fill=\"currentColor\"/>\n </svg>\n ";
|
|
72
74
|
return ((0, framework_1.withSlots)(Slots.root, __assign({}, mergedProps),
|
|
73
|
-
image.source ? ((0, framework_1.withSlots)(Slots.image, __assign({}, image))) : ((0, framework_1.withSlots)(Slots.initialsBackground, null, initials ? (0, framework_1.withSlots)(Slots.initials, null, initials) : userProps.icon
|
|
75
|
+
image.source ? ((0, framework_1.withSlots)(Slots.image, __assign({}, image))) : ((0, framework_1.withSlots)(Slots.initialsBackground, null, initials ? ((0, framework_1.withSlots)(Slots.initials, null, initials)) : userProps.icon ? ((0, framework_1.withSlots)(Slots.icon, __assign({}, iconProps))) : ((0, framework_1.withSlots)(react_native_svg_1.SvgXml, { xml: fallBackIconXml })))),
|
|
74
76
|
showRing && !transparentRing && (0, framework_1.withSlots)(Slots.ring, null),
|
|
75
77
|
svgIconsEnabled && showBadge && (0, framework_1.withSlots)(Slots.badge, __assign({}, badge))));
|
|
76
78
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,6CAA2D;AAC3D,mDAA4F;AAC5F,uDAAqD;AACrD,8DAA4F;AAC5F,yCAAwC;AACxC,sDAA6D;AAC7D,oDAAmD;AACnD,8EAA2E;
|
|
1
|
+
{"version":3,"file":"JSAvatar.js","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAShD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CA+G7F,CAAC"}
|
|
@@ -31,7 +31,14 @@ var nameMap = {
|
|
|
31
31
|
center: 'center',
|
|
32
32
|
end: 'flex-end',
|
|
33
33
|
};
|
|
34
|
-
exports.avatarStates = __spreadArray(__spreadArray(__spreadArray([], JSAvatar_types_1.AvatarColors, true), JSAvatar_types_1.AvatarSizesForTokens, true), [
|
|
34
|
+
exports.avatarStates = __spreadArray(__spreadArray(__spreadArray([], JSAvatar_types_1.AvatarColors, true), JSAvatar_types_1.AvatarSizesForTokens, true), [
|
|
35
|
+
'circular',
|
|
36
|
+
'square',
|
|
37
|
+
'inactive',
|
|
38
|
+
'ringColor',
|
|
39
|
+
'ringBackgroundColor',
|
|
40
|
+
'iconColor',
|
|
41
|
+
], false);
|
|
35
42
|
exports.stylingSettings = {
|
|
36
43
|
tokens: [JSAvatarTokens_1.defaultJSAvatarTokens, JSAvatar_types_1.JSAvatarName],
|
|
37
44
|
states: exports.avatarStates,
|
|
@@ -53,39 +60,42 @@ exports.stylingSettings = {
|
|
|
53
60
|
}, ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width']),
|
|
54
61
|
initials: (0, framework_1.buildProps)(function (tokens, theme) {
|
|
55
62
|
return {
|
|
56
|
-
style: __assign(__assign({}, tokens_1.fontStyles.from(tokens, theme)), { color: tokens.color }),
|
|
63
|
+
style: __assign(__assign({}, tokens_1.fontStyles.from(tokens, theme)), { color: tokens.color, textAlign: 'center' }),
|
|
57
64
|
};
|
|
58
65
|
}, __spreadArray(['color'], tokens_1.fontStyles.keys, true)),
|
|
59
66
|
initialsBackground: (0, framework_1.buildProps)(function (tokens, theme) {
|
|
60
67
|
var backgroundColor = tokens.backgroundColor;
|
|
61
68
|
return {
|
|
62
|
-
style: __assign(__assign({}, tokens_1.borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor }),
|
|
69
|
+
style: __assign(__assign({}, tokens_1.borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor, borderWidth: tokens.borderWidth, borderColor: tokens.borderColor }),
|
|
63
70
|
};
|
|
64
|
-
}, __spreadArray(['backgroundColor', 'width', 'height'], tokens_1.borderStyles.keys, true)),
|
|
71
|
+
}, __spreadArray(['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth'], tokens_1.borderStyles.keys, true)),
|
|
65
72
|
image: (0, framework_1.buildProps)(function (tokens) {
|
|
66
73
|
return {
|
|
67
74
|
style: {
|
|
68
75
|
borderRadius: tokens.borderRadius,
|
|
69
76
|
width: tokens.width,
|
|
70
77
|
height: tokens.height,
|
|
78
|
+
borderWidth: tokens.borderWidth,
|
|
79
|
+
borderColor: tokens.borderColor,
|
|
71
80
|
},
|
|
72
81
|
};
|
|
73
|
-
}, ['borderRadius', 'width', 'height']),
|
|
82
|
+
}, ['borderRadius', 'width', 'height', 'borderColor', 'borderWidth']),
|
|
74
83
|
icon: (0, framework_1.buildProps)(function (tokens) {
|
|
75
84
|
return {
|
|
76
85
|
style: {
|
|
77
86
|
position: 'absolute',
|
|
87
|
+
color: tokens.iconColor,
|
|
78
88
|
width: tokens.iconSize,
|
|
79
89
|
height: tokens.iconSize,
|
|
80
90
|
},
|
|
81
91
|
};
|
|
82
|
-
}, ['iconSize']),
|
|
92
|
+
}, ['iconSize', 'iconColor']),
|
|
83
93
|
ring: (0, framework_1.buildProps)(function (tokens, theme) {
|
|
84
94
|
var ringConfig = (0, JSAvatar_helpers_1.getRingConfig)(tokens.width);
|
|
85
95
|
return {
|
|
86
|
-
style: __assign({ borderStyle: 'solid',
|
|
96
|
+
style: __assign(__assign({ borderStyle: 'solid', width: ringConfig.size, height: ringConfig.size, position: 'absolute', top: -ringConfig.stroke * 2, left: -ringConfig.stroke * 2 }, tokens_1.borderStyles.from(tokens, theme)), { borderWidth: ringConfig.stroke, borderColor: tokens.ringColor }),
|
|
87
97
|
};
|
|
88
|
-
}, __spreadArray(['width', 'height'], tokens_1.borderStyles.keys, true)),
|
|
98
|
+
}, __spreadArray(['width', 'height', 'ringColor'], tokens_1.borderStyles.keys, true)),
|
|
89
99
|
badge: (0, framework_1.buildProps)(function (tokens) {
|
|
90
100
|
return {
|
|
91
101
|
size: tokens.badgeSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAoI;AACpI,8DAAwF;AACxF,mDAAyD;AAEzD,uDAAmD;AACnD,wDAAyE;AAEzE,IAAM,OAAO,GAA8B;IACzC,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEW,QAAA,YAAY,
|
|
1
|
+
{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAoI;AACpI,8DAAwF;AACxF,mDAAyD;AAEzD,uDAAmD;AACnD,wDAAyE;AAEzE,IAAM,OAAO,GAA8B;IACzC,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEW,QAAA,YAAY,iDACpB,6BAAY,SACZ,qCAAoB;IACvB,UAAU;IACV,QAAQ;IACR,UAAU;IACV,WAAW;IACX,qBAAqB;IACrB,WAAW;UACX;AAEW,QAAA,eAAe,GAAsE;IAChG,MAAM,EAAE,CAAC,sCAAqB,EAAE,6BAAY,CAAC;IAC7C,MAAM,EAAE,oBAAY;IACpB,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAsB;YACb,IAAA,uBAAuB,GAA0D,MAAM,wBAAhE,EAAE,qBAAqB,GAAmC,MAAM,sBAAzC,EAAE,KAAK,GAA4B,MAAM,MAAlC,EAAE,MAAM,GAAoB,MAAM,OAA1B,EAAE,aAAa,GAAK,MAAM,cAAX,CAAY;YAChG,OAAO;gBACL,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,MAAM;oBACd,cAAc,EAAE,OAAO,CAAC,uBAAuB,IAAI,KAAK,CAAgC;oBACxF,UAAU,EAAE,OAAO,CAAC,qBAAqB,IAAI,KAAK,CAA4B;oBAC9E,uBAAuB,yBAAA;oBACvB,qBAAqB,uBAAA;oBACrB,OAAO,EAAE,aAAa;iBACvB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,yBAAyB,EAAE,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,CAAC,CACzF;QACD,QAAQ,EAAE,IAAA,sBAAU,EAClB,UAAC,MAAsB,EAAE,KAAY;YACnC,OAAO;gBACL,KAAK,wBACA,mBAAU,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,QAAQ,GACpB;aACF,CAAC;QACJ,CAAC,iBACA,OAAO,GAAK,mBAAU,CAAC,IAAI,QAC7B;QACD,kBAAkB,EAAE,IAAA,sBAAU,EAC5B,UAAC,MAAsB,EAAE,KAAY;YAC3B,IAAA,eAAe,GAAK,MAAM,gBAAX,CAAY;YAEnC,OAAO;gBACL,KAAK,wBACA,qBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACnC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,WAAW,EAAE,MAAM,CAAC,WAAW,GAChC;aACF,CAAC;QACJ,CAAC,iBACA,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,GAAK,qBAAY,CAAC,IAAI,QAC1F;QACD,KAAK,EAAE,IAAA,sBAAU,EACf,UAAC,MAAsB;YACrB,OAAO;gBACL,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM,CAAC,YAAY;oBACjC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,WAAW,EAAE,MAAM,CAAC,WAAW;oBAC/B,WAAW,EAAE,MAAM,CAAC,WAAW;iBAChC;aACF,CAAC;QACJ,CAAC,EACD,CAAC,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,CAAC,CAClE;QACD,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAsB;YACrB,OAAO;gBACL,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,MAAM,CAAC,SAAS;oBACvB,KAAK,EAAE,MAAM,CAAC,QAAQ;oBACtB,MAAM,EAAE,MAAM,CAAC,QAAQ;iBACxB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,UAAU,EAAE,WAAW,CAAC,CAC1B;QACD,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAsB,EAAE,KAAY;YACnC,IAAM,UAAU,GAAG,IAAA,gCAAa,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,OAAO;gBACL,KAAK,sBACH,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,EACvB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC3B,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IACzB,qBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACnC,WAAW,EAAE,UAAU,CAAC,MAAM,EAC9B,WAAW,EAAE,MAAM,CAAC,SAAS,GAC9B;aACF,CAAC;QACJ,CAAC,iBACA,OAAO,EAAE,QAAQ,EAAE,WAAW,GAAK,qBAAY,CAAC,IAAI,QACtD;QACD,KAAK,EAAE,IAAA,sBAAU,EACf,UAAC,MAAsB;YACrB,OAAO;gBACL,IAAI,EAAE,MAAM,CAAC,SAAS;gBACtB,KAAK,EAAE,UAAU;aAClB,CAAC;QACJ,CAAC,EACD,CAAC,WAAW,CAAC,CACd;KACF;CACF,CAAC"}
|
|
@@ -20,7 +20,6 @@ export declare type IconAlignment = 'start' | 'center' | 'end';
|
|
|
20
20
|
export interface RingConfig {
|
|
21
21
|
accent?: boolean;
|
|
22
22
|
transparent?: boolean;
|
|
23
|
-
ringBackgroundColor?: ColorValue;
|
|
24
23
|
ringThickness?: number;
|
|
25
24
|
innerGap?: number;
|
|
26
25
|
}
|
|
@@ -99,11 +98,14 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
|
|
|
99
98
|
src?: string;
|
|
100
99
|
}
|
|
101
100
|
export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
|
|
101
|
+
iconColor?: ColorValue;
|
|
102
102
|
iconSize?: number;
|
|
103
103
|
height?: number;
|
|
104
104
|
horizontalIconAlignment?: IconAlignment;
|
|
105
105
|
verticalIconAlignment?: IconAlignment;
|
|
106
106
|
circular?: JSAvatarTokens;
|
|
107
|
+
ringColor?: ColorValue;
|
|
108
|
+
ringBackgroundColor?: ColorValue;
|
|
107
109
|
square?: JSAvatarTokens;
|
|
108
110
|
inactive?: JSAvatarTokens;
|
|
109
111
|
avatarOpacity?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC1H,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAEzE,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,oBAAoB,oIAavB,CAAC;AAEX,eAAO,MAAM,WAAW,4DAA6D,CAAC;AAEtF;;GAEG;AACH,eAAO,MAAM,YAAY,yTA+Bf,CAAC;AACX,oBAAY,UAAU,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AACpD,oBAAY,gBAAgB,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;AAE3D,oBAAY,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChD,oBAAY,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC;AAC9F,oBAAY,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAC9E,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,
|
|
1
|
+
{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAGnC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CA6KjD,CAAC"}
|
|
@@ -14,6 +14,11 @@ var defaultJSAvatarTokens = function (t) {
|
|
|
14
14
|
fontSize: theme_tokens_1.globalTokens.font.size[200],
|
|
15
15
|
width: 24,
|
|
16
16
|
height: 24,
|
|
17
|
+
iconSize: 16,
|
|
18
|
+
iconColor: theme_tokens_1.globalTokens.color.white,
|
|
19
|
+
ringColor: t.colors.transparentStroke,
|
|
20
|
+
borderColor: theme_tokens_1.globalTokens.color.white,
|
|
21
|
+
borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
|
|
17
22
|
circular: {
|
|
18
23
|
borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
|
|
19
24
|
},
|
|
@@ -131,164 +136,79 @@ var defaultJSAvatarTokens = function (t) {
|
|
|
131
136
|
neutral: {
|
|
132
137
|
backgroundColor: t.colors.neutralBackground6,
|
|
133
138
|
color: t.colors.neutralForeground3,
|
|
134
|
-
|
|
139
|
+
iconColor: t.colors.neutralForeground3,
|
|
140
|
+
ringColor: t.colors.transparentStroke,
|
|
135
141
|
},
|
|
136
142
|
brand: {
|
|
137
143
|
backgroundColor: t.colors.brandBackgroundStatic,
|
|
138
144
|
color: t.colors.neutralForegroundOnBrand,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
backgroundColor: theme_tokens_1.globalTokens.color.gold.tint40,
|
|
173
|
-
color: theme_tokens_1.globalTokens.color.gold.shade30,
|
|
174
|
-
borderColor: theme_tokens_1.globalTokens.color.gold.primary,
|
|
175
|
-
},
|
|
176
|
-
brass: {
|
|
177
|
-
backgroundColor: theme_tokens_1.globalTokens.color.brass.tint40,
|
|
178
|
-
color: theme_tokens_1.globalTokens.color.brass.shade30,
|
|
179
|
-
borderColor: theme_tokens_1.globalTokens.color.brass.primary,
|
|
180
|
-
},
|
|
181
|
-
brown: {
|
|
182
|
-
backgroundColor: theme_tokens_1.globalTokens.color.brown.tint40,
|
|
183
|
-
color: theme_tokens_1.globalTokens.color.brown.shade30,
|
|
184
|
-
borderColor: theme_tokens_1.globalTokens.color.brown.primary,
|
|
185
|
-
},
|
|
186
|
-
forest: {
|
|
187
|
-
backgroundColor: theme_tokens_1.globalTokens.color.forest.tint40,
|
|
188
|
-
color: theme_tokens_1.globalTokens.color.forest.shade30,
|
|
189
|
-
borderColor: theme_tokens_1.globalTokens.color.forest.primary,
|
|
190
|
-
},
|
|
191
|
-
seafoam: {
|
|
192
|
-
backgroundColor: theme_tokens_1.globalTokens.color.seafoam.tint40,
|
|
193
|
-
color: theme_tokens_1.globalTokens.color.seafoam.shade30,
|
|
194
|
-
borderColor: theme_tokens_1.globalTokens.color.seafoam.primary,
|
|
195
|
-
},
|
|
196
|
-
darkGreen: {
|
|
197
|
-
backgroundColor: theme_tokens_1.globalTokens.color.darkGreen.tint40,
|
|
198
|
-
color: theme_tokens_1.globalTokens.color.darkGreen.shade30,
|
|
199
|
-
borderColor: theme_tokens_1.globalTokens.color.darkGreen.primary,
|
|
200
|
-
},
|
|
201
|
-
lightTeal: {
|
|
202
|
-
backgroundColor: theme_tokens_1.globalTokens.color.lightTeal.tint40,
|
|
203
|
-
color: theme_tokens_1.globalTokens.color.lightTeal.shade30,
|
|
204
|
-
borderColor: theme_tokens_1.globalTokens.color.lightTeal.primary,
|
|
205
|
-
},
|
|
206
|
-
teal: {
|
|
207
|
-
backgroundColor: theme_tokens_1.globalTokens.color.teal.tint40,
|
|
208
|
-
color: theme_tokens_1.globalTokens.color.teal.shade30,
|
|
209
|
-
borderColor: theme_tokens_1.globalTokens.color.teal.primary,
|
|
210
|
-
},
|
|
211
|
-
steel: {
|
|
212
|
-
backgroundColor: theme_tokens_1.globalTokens.color.steel.tint40,
|
|
213
|
-
color: theme_tokens_1.globalTokens.color.steel.shade30,
|
|
214
|
-
borderColor: theme_tokens_1.globalTokens.color.steel.primary,
|
|
215
|
-
},
|
|
216
|
-
blue: {
|
|
217
|
-
backgroundColor: theme_tokens_1.globalTokens.color.blue.tint40,
|
|
218
|
-
color: theme_tokens_1.globalTokens.color.blue.shade30,
|
|
219
|
-
borderColor: theme_tokens_1.globalTokens.color.blue.primary,
|
|
220
|
-
},
|
|
221
|
-
royalBlue: {
|
|
222
|
-
backgroundColor: theme_tokens_1.globalTokens.color.royalBlue.tint40,
|
|
223
|
-
color: theme_tokens_1.globalTokens.color.royalBlue.shade30,
|
|
224
|
-
borderColor: theme_tokens_1.globalTokens.color.royalBlue.primary,
|
|
225
|
-
},
|
|
226
|
-
cornflower: {
|
|
227
|
-
backgroundColor: theme_tokens_1.globalTokens.color.cornflower.tint40,
|
|
228
|
-
color: theme_tokens_1.globalTokens.color.cornflower.shade30,
|
|
229
|
-
borderColor: theme_tokens_1.globalTokens.color.cornflower.primary,
|
|
230
|
-
},
|
|
231
|
-
navy: {
|
|
232
|
-
backgroundColor: theme_tokens_1.globalTokens.color.navy.tint40,
|
|
233
|
-
color: theme_tokens_1.globalTokens.color.navy.shade30,
|
|
234
|
-
borderColor: theme_tokens_1.globalTokens.color.navy.primary,
|
|
235
|
-
},
|
|
236
|
-
lavender: {
|
|
237
|
-
backgroundColor: theme_tokens_1.globalTokens.color.lavender.tint40,
|
|
238
|
-
color: theme_tokens_1.globalTokens.color.lavender.shade30,
|
|
239
|
-
borderColor: theme_tokens_1.globalTokens.color.lavender.primary,
|
|
240
|
-
},
|
|
241
|
-
purple: {
|
|
242
|
-
backgroundColor: theme_tokens_1.globalTokens.color.purple.tint40,
|
|
243
|
-
color: theme_tokens_1.globalTokens.color.purple.shade30,
|
|
244
|
-
borderColor: theme_tokens_1.globalTokens.color.purple.primary,
|
|
245
|
-
},
|
|
246
|
-
grape: {
|
|
247
|
-
backgroundColor: theme_tokens_1.globalTokens.color.grape.tint40,
|
|
248
|
-
color: theme_tokens_1.globalTokens.color.grape.shade30,
|
|
249
|
-
borderColor: theme_tokens_1.globalTokens.color.grape.primary,
|
|
250
|
-
},
|
|
251
|
-
lilac: {
|
|
252
|
-
backgroundColor: theme_tokens_1.globalTokens.color.lilac.tint40,
|
|
253
|
-
color: theme_tokens_1.globalTokens.color.lilac.shade30,
|
|
254
|
-
borderColor: theme_tokens_1.globalTokens.color.lilac.primary,
|
|
255
|
-
},
|
|
256
|
-
pink: {
|
|
257
|
-
backgroundColor: theme_tokens_1.globalTokens.color.pink.tint40,
|
|
258
|
-
color: theme_tokens_1.globalTokens.color.pink.shade30,
|
|
259
|
-
borderColor: theme_tokens_1.globalTokens.color.pink.primary,
|
|
260
|
-
},
|
|
261
|
-
magenta: {
|
|
262
|
-
backgroundColor: theme_tokens_1.globalTokens.color.magenta.tint40,
|
|
263
|
-
color: theme_tokens_1.globalTokens.color.magenta.shade30,
|
|
264
|
-
borderColor: theme_tokens_1.globalTokens.color.magenta.primary,
|
|
265
|
-
},
|
|
266
|
-
plum: {
|
|
267
|
-
backgroundColor: theme_tokens_1.globalTokens.color.plum.tint40,
|
|
268
|
-
color: theme_tokens_1.globalTokens.color.plum.shade30,
|
|
269
|
-
borderColor: theme_tokens_1.globalTokens.color.plum.primary,
|
|
270
|
-
},
|
|
271
|
-
beige: {
|
|
272
|
-
backgroundColor: theme_tokens_1.globalTokens.color.beige.tint40,
|
|
273
|
-
color: theme_tokens_1.globalTokens.color.beige.shade30,
|
|
274
|
-
borderColor: theme_tokens_1.globalTokens.color.beige.primary,
|
|
275
|
-
},
|
|
276
|
-
mink: {
|
|
277
|
-
backgroundColor: theme_tokens_1.globalTokens.color.mink.tint40,
|
|
278
|
-
color: theme_tokens_1.globalTokens.color.mink.shade30,
|
|
279
|
-
borderColor: theme_tokens_1.globalTokens.color.mink.primary,
|
|
280
|
-
},
|
|
281
|
-
platinum: {
|
|
282
|
-
backgroundColor: theme_tokens_1.globalTokens.color.platinum.tint40,
|
|
283
|
-
color: theme_tokens_1.globalTokens.color.platinum.shade30,
|
|
284
|
-
borderColor: theme_tokens_1.globalTokens.color.platinum.primary,
|
|
285
|
-
},
|
|
286
|
-
anchor: {
|
|
287
|
-
backgroundColor: theme_tokens_1.globalTokens.color.anchor.tint40,
|
|
288
|
-
color: theme_tokens_1.globalTokens.color.anchor.shade30,
|
|
289
|
-
borderColor: theme_tokens_1.globalTokens.color.anchor.primary,
|
|
290
|
-
},
|
|
145
|
+
iconColor: t.colors.neutralForegroundOnBrand,
|
|
146
|
+
ringColor: t.colors.transparentStroke,
|
|
147
|
+
},
|
|
148
|
+
darkRed: getColorProps('darkRed', t),
|
|
149
|
+
cranberry: getColorProps('cranberry', t),
|
|
150
|
+
red: getColorProps('red', t),
|
|
151
|
+
pumpkin: getColorProps('pumpkin', t),
|
|
152
|
+
peach: getColorProps('peach', t),
|
|
153
|
+
marigold: getColorProps('marigold', t),
|
|
154
|
+
gold: getColorProps('gold', t),
|
|
155
|
+
brass: getColorProps('brass', t),
|
|
156
|
+
brown: getColorProps('brown', t),
|
|
157
|
+
forest: getColorProps('forest', t),
|
|
158
|
+
seafoam: getColorProps('seafoam', t),
|
|
159
|
+
darkGreen: getColorProps('darkGreen', t),
|
|
160
|
+
lightTeal: getColorProps('lightTeal', t),
|
|
161
|
+
teal: getColorProps('teal', t),
|
|
162
|
+
steel: getColorProps('steel', t),
|
|
163
|
+
blue: getColorProps('blue', t),
|
|
164
|
+
royalBlue: getColorProps('royalBlue', t),
|
|
165
|
+
cornflower: getColorProps('cornflower', t),
|
|
166
|
+
navy: getColorProps('navy', t),
|
|
167
|
+
lavender: getColorProps('lavender', t),
|
|
168
|
+
purple: getColorProps('purple', t),
|
|
169
|
+
grape: getColorProps('grape', t),
|
|
170
|
+
lilac: getColorProps('lilac', t),
|
|
171
|
+
pink: getColorProps('pink', t),
|
|
172
|
+
magenta: getColorProps('magenta', t),
|
|
173
|
+
plum: getColorProps('plum', t),
|
|
174
|
+
beige: getColorProps('beige', t),
|
|
175
|
+
mink: getColorProps('mink', t),
|
|
176
|
+
platinum: getColorProps('platinum', t),
|
|
177
|
+
anchor: getColorProps('anchor', t),
|
|
291
178
|
});
|
|
292
179
|
};
|
|
293
180
|
exports.defaultJSAvatarTokens = defaultJSAvatarTokens;
|
|
181
|
+
/**
|
|
182
|
+
* A function which returns object of props depending on color and theme.
|
|
183
|
+
* @param color
|
|
184
|
+
* @param theme
|
|
185
|
+
* @returns object of props - backgroundColor, color and ringColor
|
|
186
|
+
*/
|
|
187
|
+
function getColorProps(color, theme) {
|
|
188
|
+
var themeAppearance = theme.host.appearance;
|
|
189
|
+
switch (themeAppearance) {
|
|
190
|
+
case 'light':
|
|
191
|
+
default:
|
|
192
|
+
return {
|
|
193
|
+
backgroundColor: theme_tokens_1.globalTokens.color[color].tint40,
|
|
194
|
+
color: theme_tokens_1.globalTokens.color[color].shade30,
|
|
195
|
+
iconColor: theme_tokens_1.globalTokens.color[color].shade30,
|
|
196
|
+
ringColor: theme_tokens_1.globalTokens.color[color].primary,
|
|
197
|
+
};
|
|
198
|
+
case 'dark':
|
|
199
|
+
return {
|
|
200
|
+
backgroundColor: theme_tokens_1.globalTokens.color[color].shade30,
|
|
201
|
+
color: theme_tokens_1.globalTokens.color[color].tint40,
|
|
202
|
+
iconColor: theme_tokens_1.globalTokens.color[color].tint40,
|
|
203
|
+
ringColor: theme_tokens_1.globalTokens.color[color].tint30,
|
|
204
|
+
};
|
|
205
|
+
case 'highContrast':
|
|
206
|
+
return {
|
|
207
|
+
backgroundColor: theme.colors.neutralBackground6,
|
|
208
|
+
color: theme.colors.neutralForeground3,
|
|
209
|
+
iconColor: theme.colors.neutralForeground3,
|
|
210
|
+
ringColor: theme.colors.transparentStroke,
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
}
|
|
294
214
|
//# sourceMappingURL=JSAvatarTokens.js.map
|