@fluentui-react-native/default-theme 0.10.1 → 0.11.0
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 +112 -1
- package/CHANGELOG.md +37 -2
- package/lib/createAliasTokens.d.ts +5 -3
- package/lib/createAliasTokens.d.ts.map +1 -1
- package/lib/createAliasTokens.js +9 -4
- package/lib/createAliasTokens.js.map +1 -1
- package/lib/defaultColors.js +4 -4
- package/lib/defaultColors.js.map +1 -1
- package/lib/defaultTheme.d.ts.map +1 -1
- package/lib/defaultTheme.js +4 -0
- package/lib/defaultTheme.js.map +1 -1
- package/lib/getTokens.d.ts +302 -0
- package/lib/getTokens.d.ts.map +1 -0
- package/lib/getTokens.js +38 -0
- package/lib/getTokens.js.map +1 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/createAliasTokens.d.ts +5 -3
- package/lib-commonjs/createAliasTokens.d.ts.map +1 -1
- package/lib-commonjs/createAliasTokens.js +10 -5
- package/lib-commonjs/createAliasTokens.js.map +1 -1
- package/lib-commonjs/defaultColors.js +3 -3
- package/lib-commonjs/defaultColors.js.map +1 -1
- package/lib-commonjs/defaultTheme.d.ts.map +1 -1
- package/lib-commonjs/defaultTheme.js +4 -0
- package/lib-commonjs/defaultTheme.js.map +1 -1
- package/lib-commonjs/getTokens.d.ts +302 -0
- package/lib-commonjs/getTokens.d.ts.map +1 -0
- package/lib-commonjs/{getAliasTokens.js → getTokens.js} +21 -2
- package/lib-commonjs/getTokens.js.map +1 -0
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.d.ts.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
- package/src/createAliasTokens.ts +12 -5
- package/src/defaultColors.ts +4 -4
- package/src/defaultTheme.ts +4 -0
- package/src/{getAliasTokens.ts → getTokens.ts} +17 -0
- package/src/index.ts +1 -1
- package/lib/getAliasTokens.d.ts +0 -3
- package/lib/getAliasTokens.d.ts.map +0 -1
- package/lib/getAliasTokens.js +0 -20
- package/lib/getAliasTokens.js.map +0 -1
- package/lib-commonjs/getAliasTokens.d.ts +0 -3
- package/lib-commonjs/getAliasTokens.d.ts.map +0 -1
- package/lib-commonjs/getAliasTokens.js.map +0 -1
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
|
+
export declare function getAliasTokens(mode: AppearanceOptions): any;
|
|
3
|
+
export declare function getShadowTokens(mode: AppearanceOptions): {
|
|
4
|
+
brandBackground: {
|
|
5
|
+
fillColorRest: string;
|
|
6
|
+
fillColorHover: string;
|
|
7
|
+
fillColorPressed: string;
|
|
8
|
+
fillColorSelected: string;
|
|
9
|
+
};
|
|
10
|
+
brandBackground2: {
|
|
11
|
+
fillColorRest: string;
|
|
12
|
+
};
|
|
13
|
+
brandBackgroundStatic: {
|
|
14
|
+
fillColorRest: string;
|
|
15
|
+
};
|
|
16
|
+
brandForeground1: {
|
|
17
|
+
fillColorRest: string;
|
|
18
|
+
};
|
|
19
|
+
brandForeground2: {
|
|
20
|
+
fillColorRest: string;
|
|
21
|
+
};
|
|
22
|
+
brandForegroundLink: {
|
|
23
|
+
fillColorRest: string;
|
|
24
|
+
fillColorHover: string;
|
|
25
|
+
fillColorPressed: string;
|
|
26
|
+
fillColorSelected: string;
|
|
27
|
+
};
|
|
28
|
+
brandStroke1: {
|
|
29
|
+
strokeColorRest: string;
|
|
30
|
+
strokeWidth: number;
|
|
31
|
+
};
|
|
32
|
+
brandStroke2: {
|
|
33
|
+
strokeColorRest: string;
|
|
34
|
+
strokeWidth: number;
|
|
35
|
+
};
|
|
36
|
+
compoundBrandBackground1: {
|
|
37
|
+
fillColorRest: string;
|
|
38
|
+
fillColorHover: string;
|
|
39
|
+
fillColorPressed: string;
|
|
40
|
+
};
|
|
41
|
+
compoundBrandForeground1: {
|
|
42
|
+
fillColorRest: string;
|
|
43
|
+
fillColorHover: string;
|
|
44
|
+
fillColorPressed: string;
|
|
45
|
+
};
|
|
46
|
+
compoundBrandStroke1: {
|
|
47
|
+
strokeColorRest: string;
|
|
48
|
+
strokeColorHover: string;
|
|
49
|
+
strokeColorPressed: string;
|
|
50
|
+
strokeWidth: number;
|
|
51
|
+
};
|
|
52
|
+
neutralBackground1: {
|
|
53
|
+
fillColorRest: string;
|
|
54
|
+
fillColorHover: string;
|
|
55
|
+
fillColorPressed: string;
|
|
56
|
+
fillColorSelected: string;
|
|
57
|
+
};
|
|
58
|
+
neutralBackground2: {
|
|
59
|
+
fillColorRest: string;
|
|
60
|
+
fillColorHover: string;
|
|
61
|
+
fillColorPressed: string;
|
|
62
|
+
fillColorSelected: string;
|
|
63
|
+
};
|
|
64
|
+
neutralBackground3: {
|
|
65
|
+
fillColorRest: string;
|
|
66
|
+
fillColorHover: string;
|
|
67
|
+
fillColorPressed: string;
|
|
68
|
+
fillColorSelected: string;
|
|
69
|
+
};
|
|
70
|
+
neutralBackground4: {
|
|
71
|
+
fillColorRest: string;
|
|
72
|
+
fillColorHover: string;
|
|
73
|
+
fillColorPressed: string;
|
|
74
|
+
fillColorSelected: string;
|
|
75
|
+
};
|
|
76
|
+
neutralBackground5: {
|
|
77
|
+
fillColorRest: string;
|
|
78
|
+
fillColorHover: string;
|
|
79
|
+
fillColorPressed: string;
|
|
80
|
+
fillColorSelected: string;
|
|
81
|
+
};
|
|
82
|
+
neutralBackground6: {
|
|
83
|
+
fillColorRest: string;
|
|
84
|
+
};
|
|
85
|
+
neutralBackgroundDisabled: {
|
|
86
|
+
fillColorRest: string;
|
|
87
|
+
};
|
|
88
|
+
neutralBackgroundInverted: {
|
|
89
|
+
fillColorRest: string;
|
|
90
|
+
};
|
|
91
|
+
neutralForeground1: {
|
|
92
|
+
fillColorRest: string;
|
|
93
|
+
fillColorHover: string;
|
|
94
|
+
fillColorPressed: string;
|
|
95
|
+
fillColorSelected: string;
|
|
96
|
+
};
|
|
97
|
+
neutralForeground2: {
|
|
98
|
+
fillColorRest: string;
|
|
99
|
+
fillColorHover: string;
|
|
100
|
+
fillColorPressed: string;
|
|
101
|
+
fillColorBrandHover: string;
|
|
102
|
+
fillColorBrandPressed: string;
|
|
103
|
+
fillColorBrandSelected: string;
|
|
104
|
+
fillColorSelected: string;
|
|
105
|
+
};
|
|
106
|
+
neutralForeground3: {
|
|
107
|
+
fillColorRest: string;
|
|
108
|
+
fillColorHover: string;
|
|
109
|
+
fillColorPressed: string;
|
|
110
|
+
fillColorBrandHover: string;
|
|
111
|
+
fillColorBrandPressed: string;
|
|
112
|
+
fillColorBrandSelected: string;
|
|
113
|
+
fillColorSelected: string;
|
|
114
|
+
};
|
|
115
|
+
neutralForeground4: {
|
|
116
|
+
fillColorRest: string;
|
|
117
|
+
};
|
|
118
|
+
neutralForegroundDisabled: {
|
|
119
|
+
fillColorRest: string;
|
|
120
|
+
};
|
|
121
|
+
neutralForegroundInverted: {
|
|
122
|
+
fillColorRest: string;
|
|
123
|
+
};
|
|
124
|
+
neutralForegroundInvertedLink: {
|
|
125
|
+
fillColorRest: string;
|
|
126
|
+
fillColorHover: string;
|
|
127
|
+
fillColorPressed: string;
|
|
128
|
+
fillColorSelected: string;
|
|
129
|
+
};
|
|
130
|
+
neutralForegroundOnBrand: {
|
|
131
|
+
fillColorRest: string;
|
|
132
|
+
fillColorHover: string;
|
|
133
|
+
fillColorPressed: string;
|
|
134
|
+
fillColorSelected: string;
|
|
135
|
+
};
|
|
136
|
+
neutralStencil1: {
|
|
137
|
+
fillColorRest: string;
|
|
138
|
+
};
|
|
139
|
+
neutralStencil2: {
|
|
140
|
+
fillColorRest: string;
|
|
141
|
+
};
|
|
142
|
+
neutralStroke1: {
|
|
143
|
+
strokeColorRest: string;
|
|
144
|
+
strokeColorHover: string;
|
|
145
|
+
strokeColorPressed: string;
|
|
146
|
+
strokeColorSelected: string;
|
|
147
|
+
strokeWidth: number;
|
|
148
|
+
};
|
|
149
|
+
neutralStroke2: {
|
|
150
|
+
strokeColorRest: string;
|
|
151
|
+
strokeWidth: number;
|
|
152
|
+
};
|
|
153
|
+
neutralStroke3: {
|
|
154
|
+
strokeColorRest: string;
|
|
155
|
+
strokeWidth: number;
|
|
156
|
+
};
|
|
157
|
+
neutralStrokeAccessible: {
|
|
158
|
+
strokeColorRest: string;
|
|
159
|
+
strokeColorHover: string;
|
|
160
|
+
strokeColorPressed: string;
|
|
161
|
+
strokeColorSelected: string;
|
|
162
|
+
strokeWidth: number;
|
|
163
|
+
};
|
|
164
|
+
neutralStrokeDisabled: {
|
|
165
|
+
strokeColorRest: string;
|
|
166
|
+
strokeWidth: number;
|
|
167
|
+
};
|
|
168
|
+
redBackground1: {
|
|
169
|
+
fillColorRest: string;
|
|
170
|
+
};
|
|
171
|
+
redBackground2: {
|
|
172
|
+
fillColorRest: string;
|
|
173
|
+
};
|
|
174
|
+
redBackground3: {
|
|
175
|
+
fillColorRest: string;
|
|
176
|
+
};
|
|
177
|
+
redBorder1: {
|
|
178
|
+
strokeColorRest: string;
|
|
179
|
+
strokeWidth: number;
|
|
180
|
+
};
|
|
181
|
+
redBorder2: {
|
|
182
|
+
strokeColorRest: string;
|
|
183
|
+
strokeWidth: number;
|
|
184
|
+
};
|
|
185
|
+
redBorderActive: {
|
|
186
|
+
strokeColorRest: string;
|
|
187
|
+
strokeWidth: number;
|
|
188
|
+
};
|
|
189
|
+
redForeground1: {
|
|
190
|
+
fillColorRest: string;
|
|
191
|
+
};
|
|
192
|
+
redForeground2: {
|
|
193
|
+
fillColorRest: string;
|
|
194
|
+
};
|
|
195
|
+
redForeground3: {
|
|
196
|
+
fillColorRest: string;
|
|
197
|
+
};
|
|
198
|
+
strokeFocus1: {
|
|
199
|
+
strokeColorRest: string;
|
|
200
|
+
strokeWidth: number;
|
|
201
|
+
};
|
|
202
|
+
strokeFocus2: {
|
|
203
|
+
strokeColorRest: string;
|
|
204
|
+
strokeWidth: number;
|
|
205
|
+
};
|
|
206
|
+
subtleBackground: {
|
|
207
|
+
fillColorRest: string;
|
|
208
|
+
fillColorHover: string;
|
|
209
|
+
fillColorPressed: string;
|
|
210
|
+
fillColorSelected: string;
|
|
211
|
+
};
|
|
212
|
+
transparentBackground: {
|
|
213
|
+
fillColorRest: string;
|
|
214
|
+
fillColorHover: string;
|
|
215
|
+
fillColorPressed: string;
|
|
216
|
+
fillColorSelected: string;
|
|
217
|
+
};
|
|
218
|
+
transparentStroke: {
|
|
219
|
+
strokeAlignment: string;
|
|
220
|
+
strokeColorRest: string;
|
|
221
|
+
strokeColorHover: string;
|
|
222
|
+
strokeColorPressed: string;
|
|
223
|
+
strokeColorDisabled: string;
|
|
224
|
+
strokeWidth: number;
|
|
225
|
+
};
|
|
226
|
+
} | {
|
|
227
|
+
"2": {
|
|
228
|
+
x: number;
|
|
229
|
+
y: number;
|
|
230
|
+
blur: number;
|
|
231
|
+
color: string;
|
|
232
|
+
}[];
|
|
233
|
+
"4": {
|
|
234
|
+
x: number;
|
|
235
|
+
y: number;
|
|
236
|
+
blur: number;
|
|
237
|
+
color: string;
|
|
238
|
+
}[];
|
|
239
|
+
"8": {
|
|
240
|
+
x: number;
|
|
241
|
+
y: number;
|
|
242
|
+
blur: number;
|
|
243
|
+
color: string;
|
|
244
|
+
}[];
|
|
245
|
+
"16": {
|
|
246
|
+
x: number;
|
|
247
|
+
y: number;
|
|
248
|
+
blur: number;
|
|
249
|
+
color: string;
|
|
250
|
+
}[];
|
|
251
|
+
"28": {
|
|
252
|
+
x: number;
|
|
253
|
+
y: number;
|
|
254
|
+
blur: number;
|
|
255
|
+
color: string;
|
|
256
|
+
}[];
|
|
257
|
+
"64": {
|
|
258
|
+
x: number;
|
|
259
|
+
y: number;
|
|
260
|
+
blur: number;
|
|
261
|
+
color: string;
|
|
262
|
+
}[];
|
|
263
|
+
brand: {
|
|
264
|
+
"2": {
|
|
265
|
+
x: number;
|
|
266
|
+
y: number;
|
|
267
|
+
blur: number;
|
|
268
|
+
color: string;
|
|
269
|
+
}[];
|
|
270
|
+
"4": {
|
|
271
|
+
x: number;
|
|
272
|
+
y: number;
|
|
273
|
+
blur: number;
|
|
274
|
+
color: string;
|
|
275
|
+
}[];
|
|
276
|
+
"8": {
|
|
277
|
+
x: number;
|
|
278
|
+
y: number;
|
|
279
|
+
blur: number;
|
|
280
|
+
color: string;
|
|
281
|
+
}[];
|
|
282
|
+
"16": {
|
|
283
|
+
x: number;
|
|
284
|
+
y: number;
|
|
285
|
+
blur: number;
|
|
286
|
+
color: string;
|
|
287
|
+
}[];
|
|
288
|
+
"28": {
|
|
289
|
+
x: number;
|
|
290
|
+
y: number;
|
|
291
|
+
blur: number;
|
|
292
|
+
color: string;
|
|
293
|
+
}[];
|
|
294
|
+
"64": {
|
|
295
|
+
x: number;
|
|
296
|
+
y: number;
|
|
297
|
+
blur: number;
|
|
298
|
+
color: string;
|
|
299
|
+
}[];
|
|
300
|
+
};
|
|
301
|
+
};
|
|
302
|
+
//# sourceMappingURL=getTokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTokens.d.ts","sourceRoot":"","sources":["../src/getTokens.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,OAYrD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYtD"}
|
|
@@ -3,10 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.getAliasTokens = void 0;
|
|
6
|
+
exports.getShadowTokens = exports.getAliasTokens = void 0;
|
|
7
7
|
var tokens_aliases_json_1 = __importDefault(require("@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json"));
|
|
8
8
|
var tokens_aliases_json_2 = __importDefault(require("@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json"));
|
|
9
9
|
var tokens_alias_1 = require("./highContrast/tokens-alias");
|
|
10
|
+
var tokens_shadow_json_1 = __importDefault(require("@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json"));
|
|
11
|
+
var tokens_shadow_json_2 = __importDefault(require("@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json"));
|
|
12
|
+
var tokens_shadow_json_3 = __importDefault(require("@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json"));
|
|
10
13
|
var assert_never_1 = require("assert-never");
|
|
11
14
|
function getAliasTokens(mode) {
|
|
12
15
|
if (mode === 'light') {
|
|
@@ -24,4 +27,20 @@ function getAliasTokens(mode) {
|
|
|
24
27
|
return tokens_aliases_json_1.default;
|
|
25
28
|
}
|
|
26
29
|
exports.getAliasTokens = getAliasTokens;
|
|
27
|
-
|
|
30
|
+
function getShadowTokens(mode) {
|
|
31
|
+
if (mode === 'light') {
|
|
32
|
+
return tokens_shadow_json_1.default.shadow;
|
|
33
|
+
}
|
|
34
|
+
else if (mode === 'dark') {
|
|
35
|
+
return tokens_shadow_json_2.default.shadow;
|
|
36
|
+
}
|
|
37
|
+
else if (mode === 'highContrast') {
|
|
38
|
+
return tokens_shadow_json_3.default.shadow;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
(0, assert_never_1.assertNever)(mode);
|
|
42
|
+
}
|
|
43
|
+
return tokens_aliases_json_1.default;
|
|
44
|
+
}
|
|
45
|
+
exports.getShadowTokens = getShadowTokens;
|
|
46
|
+
//# sourceMappingURL=getTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTokens.js","sourceRoot":"","sources":["../src/getTokens.ts"],"names":[],"mappings":";;;;;;AAAA,+HAAsG;AACtG,8HAAoG;AACpG,4DAA4D;AAC5D,6HAAsG;AACtG,4HAAoG;AACpG,wHAA8F;AAE9F,6CAA2C;AAE3C,SAAgB,cAAc,CAAC,IAAuB;IACpD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,6BAAgB,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,6BAAe,CAAC;KACxB;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,4BAAa,CAAC;KACtB;SAAM;QACL,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,6BAAgB,CAAC;AAC1B,CAAC;AAZD,wCAYC;AAED,SAAgB,eAAe,CAAC,IAAuB;IACrD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,4BAAiB,CAAC,MAAM,CAAC;KACjC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,4BAAgB,CAAC,MAAM,CAAC;KAChC;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,4BAAc,CAAC,MAAM,CAAC;KAC9B;SAAM;QACL,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,6BAAgB,CAAC;AAC1B,CAAC;AAZD,0CAYC"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { defaultFluentTheme, defaultFluentDarkTheme } from './defaultTheme';
|
|
2
2
|
export { createDefaultTheme } from './createDefaultTheme';
|
|
3
|
-
export { createAliasTokens } from './createAliasTokens';
|
|
3
|
+
export { createColorAliasTokens as createAliasTokens } from './createAliasTokens';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -7,5 +7,5 @@ Object.defineProperty(exports, "defaultFluentDarkTheme", { enumerable: true, get
|
|
|
7
7
|
var createDefaultTheme_1 = require("./createDefaultTheme");
|
|
8
8
|
Object.defineProperty(exports, "createDefaultTheme", { enumerable: true, get: function () { return createDefaultTheme_1.createDefaultTheme; } });
|
|
9
9
|
var createAliasTokens_1 = require("./createAliasTokens");
|
|
10
|
-
Object.defineProperty(exports, "createAliasTokens", { enumerable: true, get: function () { return createAliasTokens_1.
|
|
10
|
+
Object.defineProperty(exports, "createAliasTokens", { enumerable: true, get: function () { return createAliasTokens_1.createColorAliasTokens; } });
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,+CAA4E;AAAnE,kHAAA,kBAAkB,OAAA;AAAE,sHAAA,sBAAsB,OAAA;AACnD,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,+CAA4E;AAAnE,kHAAA,kBAAkB,OAAA;AAAE,sHAAA,sBAAsB,OAAA;AACnD,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,yDAAkF;AAAzE,sHAAA,sBAAsB,OAAqB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/default-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Typing only package for fluentui-react-native theme types",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
"author": "",
|
|
28
28
|
"license": "MIT",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@fluentui-react-native/design-tokens-win32": "^0.
|
|
31
|
-
"@fluentui-react-native/design-tokens-windows": "^0.
|
|
30
|
+
"@fluentui-react-native/design-tokens-win32": "^0.13.0",
|
|
31
|
+
"@fluentui-react-native/design-tokens-windows": "^0.13.0",
|
|
32
32
|
"@fluentui-react-native/memo-cache": "^1.1.7",
|
|
33
|
-
"@fluentui-react-native/theme-tokens": "^0.16.
|
|
34
|
-
"@fluentui-react-native/theme-types": ">=0.
|
|
35
|
-
"@fluentui-react-native/theme": ">=0.6.
|
|
36
|
-
"@fluentui-react-native/theming-utils": ">=0.
|
|
33
|
+
"@fluentui-react-native/theme-tokens": "^0.16.3",
|
|
34
|
+
"@fluentui-react-native/theme-types": ">=0.15.0 <1.0.0",
|
|
35
|
+
"@fluentui-react-native/theme": ">=0.6.9 <1.0.0",
|
|
36
|
+
"@fluentui-react-native/theming-utils": ">=0.11.0 <1.0.0",
|
|
37
37
|
"assert-never": "^1.2.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
package/src/createAliasTokens.ts
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
import { getAliasTokens } from './
|
|
2
|
-
import { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
1
|
+
import { getAliasTokens, getShadowTokens } from './getTokens';
|
|
2
|
+
import { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/theme-types';
|
|
3
3
|
import { memoize } from '@fluentui-react-native/memo-cache';
|
|
4
|
-
import { mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
|
|
4
|
+
import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
|
|
5
5
|
|
|
6
|
-
function
|
|
6
|
+
function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
|
|
7
7
|
const aliasTokens = getAliasTokens(mode);
|
|
8
8
|
return mapPipelineToTheme(aliasTokens);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
export const
|
|
11
|
+
export const createColorAliasTokens = memoize(createColorAliasTokensWorker);
|
|
12
|
+
|
|
13
|
+
function createShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition {
|
|
14
|
+
const aliasTokens = getShadowTokens(mode);
|
|
15
|
+
return mapPipelineToShadow(aliasTokens);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const createShadowAliasTokens = memoize(createShadowAliasTokensWorker);
|
package/src/defaultColors.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
|
|
2
2
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
3
|
-
import {
|
|
3
|
+
import { createColorAliasTokens } from './createAliasTokens';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Generate a palette from a set of fabric web colors, like those output from the theme designer.
|
|
@@ -253,7 +253,7 @@ export function getStockWebPalette(): ThemeColorDefinition {
|
|
|
253
253
|
accent: globalTokens.color.brand.primary,
|
|
254
254
|
blackTranslucent40: 'rgba(0,0,0,.4)',
|
|
255
255
|
}),
|
|
256
|
-
...
|
|
256
|
+
...createColorAliasTokens('light'),
|
|
257
257
|
};
|
|
258
258
|
}
|
|
259
259
|
|
|
@@ -292,7 +292,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
|
|
|
292
292
|
},
|
|
293
293
|
true,
|
|
294
294
|
),
|
|
295
|
-
...
|
|
295
|
+
...createColorAliasTokens('dark'),
|
|
296
296
|
};
|
|
297
297
|
}
|
|
298
298
|
|
|
@@ -505,6 +505,6 @@ export function getStockWebHCPalette(): ThemeColorDefinition {
|
|
|
505
505
|
|
|
506
506
|
personaActivityRing: '#ffffff',
|
|
507
507
|
personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC
|
|
508
|
-
...
|
|
508
|
+
...createColorAliasTokens('highContrast'),
|
|
509
509
|
};
|
|
510
510
|
}
|
package/src/defaultTheme.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Varia
|
|
|
2
2
|
import { Platform } from 'react-native';
|
|
3
3
|
import { getStockWebPalette, getStockWebDarkPalette, getStockWebHCPalette } from './defaultColors';
|
|
4
4
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
5
|
+
import { createShadowAliasTokens } from './createAliasTokens';
|
|
5
6
|
|
|
6
7
|
function _defaultTypography(): Typography {
|
|
7
8
|
const defaultsDict = {
|
|
@@ -96,6 +97,7 @@ export const defaultFluentTheme: Theme = {
|
|
|
96
97
|
colors: getStockWebPalette(),
|
|
97
98
|
typography: _defaultTypography(),
|
|
98
99
|
spacing: defaultSpacing(),
|
|
100
|
+
shadows: createShadowAliasTokens('light'),
|
|
99
101
|
components: {},
|
|
100
102
|
host: { appearance: 'light' },
|
|
101
103
|
};
|
|
@@ -103,6 +105,7 @@ export const defaultFluentTheme: Theme = {
|
|
|
103
105
|
export const defaultFluentDarkTheme: Theme = {
|
|
104
106
|
colors: getStockWebDarkPalette(),
|
|
105
107
|
typography: defaultFluentTheme.typography,
|
|
108
|
+
shadows: createShadowAliasTokens('dark'),
|
|
106
109
|
spacing: defaultFluentTheme.spacing,
|
|
107
110
|
components: {},
|
|
108
111
|
host: { appearance: 'dark' },
|
|
@@ -111,6 +114,7 @@ export const defaultFluentDarkTheme: Theme = {
|
|
|
111
114
|
export const defaultFluentHighConstrastTheme: Theme = {
|
|
112
115
|
colors: getStockWebHCPalette(),
|
|
113
116
|
typography: defaultFluentTheme.typography,
|
|
117
|
+
shadows: createShadowAliasTokens('highContrast'),
|
|
114
118
|
spacing: defaultFluentTheme.spacing,
|
|
115
119
|
components: {},
|
|
116
120
|
host: { appearance: 'highContrast' },
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json';
|
|
2
2
|
import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json';
|
|
3
3
|
import { hcAliasTokens } from './highContrast/tokens-alias';
|
|
4
|
+
import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json';
|
|
5
|
+
import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json';
|
|
6
|
+
import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json';
|
|
4
7
|
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
5
8
|
import { assertNever } from 'assert-never';
|
|
6
9
|
|
|
@@ -17,3 +20,17 @@ export function getAliasTokens(mode: AppearanceOptions) {
|
|
|
17
20
|
|
|
18
21
|
return lightAliasTokens;
|
|
19
22
|
}
|
|
23
|
+
|
|
24
|
+
export function getShadowTokens(mode: AppearanceOptions) {
|
|
25
|
+
if (mode === 'light') {
|
|
26
|
+
return lightShadowTokens.shadow;
|
|
27
|
+
} else if (mode === 'dark') {
|
|
28
|
+
return darkShadowTokens.shadow;
|
|
29
|
+
} else if (mode === 'highContrast') {
|
|
30
|
+
return hcShadowTokens.shadow;
|
|
31
|
+
} else {
|
|
32
|
+
assertNever(mode);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return lightAliasTokens;
|
|
36
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { defaultFluentTheme, defaultFluentDarkTheme } from './defaultTheme';
|
|
2
2
|
export { createDefaultTheme } from './createDefaultTheme';
|
|
3
|
-
export { createAliasTokens } from './createAliasTokens';
|
|
3
|
+
export { createColorAliasTokens as createAliasTokens } from './createAliasTokens';
|
package/lib/getAliasTokens.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getAliasTokens.d.ts","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,OAYrD"}
|
package/lib/getAliasTokens.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json';
|
|
2
|
-
import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json';
|
|
3
|
-
import { hcAliasTokens } from './highContrast/tokens-alias';
|
|
4
|
-
import { assertNever } from 'assert-never';
|
|
5
|
-
export function getAliasTokens(mode) {
|
|
6
|
-
if (mode === 'light') {
|
|
7
|
-
return lightAliasTokens;
|
|
8
|
-
}
|
|
9
|
-
else if (mode === 'dark') {
|
|
10
|
-
return darkAliasTokens;
|
|
11
|
-
}
|
|
12
|
-
else if (mode === 'highContrast') {
|
|
13
|
-
return hcAliasTokens;
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
assertNever(mode);
|
|
17
|
-
}
|
|
18
|
-
return lightAliasTokens;
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=getAliasTokens.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getAliasTokens.js","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,wEAAwE,CAAC;AACtG,OAAO,eAAe,MAAM,uEAAuE,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,UAAU,cAAc,CAAC,IAAuB;IACpD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,gBAAgB,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,eAAe,CAAC;KACxB;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,aAAa,CAAC;KACtB;SAAM;QACL,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getAliasTokens.d.ts","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,OAYrD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getAliasTokens.js","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":";;;;;;AAAA,+HAAsG;AACtG,8HAAoG;AACpG,4DAA4D;AAE5D,6CAA2C;AAE3C,SAAgB,cAAc,CAAC,IAAuB;IACpD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,6BAAgB,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,6BAAe,CAAC;KACxB;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,4BAAa,CAAC;KACtB;SAAM;QACL,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,6BAAgB,CAAC;AAC1B,CAAC;AAZD,wCAYC"}
|