@focus4/styling 12.9.0 → 12.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/package.json +5 -6
- package/lib/animation.d.ts +0 -12
- package/lib/config.d.ts +0 -7
- package/lib/focus4.styling.css +0 -398
- package/lib/focus4.styling.d.ts +0 -6
- package/lib/focus4.styling.js +0 -212
- package/lib/focus4.styling.js.map +0 -1
- package/lib/theme/common.d.ts +0 -24
- package/lib/theme/index.d.ts +0 -8
- package/lib/theme/theme-provider.d.ts +0 -73
- package/lib/theme/themeable.d.ts +0 -2
- package/lib/theme/to-bem.d.ts +0 -39
- package/lib/theme/use-theme.d.ts +0 -12
- package/lib/variables/index.d.ts +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@focus4/styling",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.11.0",
|
|
4
4
|
"description": "Focus v4, styling module",
|
|
5
5
|
"main": "lib/focus4.styling.js",
|
|
6
6
|
"type": "module",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"homepage": "https://github.com/klee-contrib/focus4/tree/master/packages/styling",
|
|
14
14
|
"scripts": {
|
|
15
|
-
"build": "
|
|
15
|
+
"build": "tsdown",
|
|
16
16
|
"postinstall": "node postinstall.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
@@ -23,8 +23,7 @@
|
|
|
23
23
|
"tslib": "^2.8.1"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"react": ">= 19
|
|
27
|
-
"react-dom": ">= 19
|
|
28
|
-
}
|
|
29
|
-
"gitHead": "fa2a850433c95d8f541379723dbaf54284e5eed7"
|
|
26
|
+
"react": ">= 19 < 20",
|
|
27
|
+
"react-dom": ">= 19 < 20"
|
|
28
|
+
}
|
|
30
29
|
}
|
package/lib/animation.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */
|
|
2
|
-
export declare function getDefaultTransition(): {
|
|
3
|
-
readonly delay: number;
|
|
4
|
-
readonly duration: number;
|
|
5
|
-
readonly ease: [number, number, number, number] | undefined;
|
|
6
|
-
};
|
|
7
|
-
/** Récupère les paramètres de transition "spring" par défaut. */
|
|
8
|
-
export declare function getSpringTransition(): {
|
|
9
|
-
readonly type: "spring";
|
|
10
|
-
readonly bounce: 0;
|
|
11
|
-
readonly duration: number;
|
|
12
|
-
};
|
package/lib/config.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/** Config Focus de l'application */
|
|
2
|
-
export declare const uiConfig: {
|
|
3
|
-
/** Valeur de "autocomplete" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */
|
|
4
|
-
autocompleteOffValue: string;
|
|
5
|
-
/** Classe CSS par défaut des icônes. */
|
|
6
|
-
defaultIconClassName: string;
|
|
7
|
-
};
|
package/lib/focus4.styling.css
DELETED
|
@@ -1,398 +0,0 @@
|
|
|
1
|
-
html {
|
|
2
|
-
color: rgb(var(--color-black));
|
|
3
|
-
font-size: var(--font-size-small);
|
|
4
|
-
line-height: 1.4;
|
|
5
|
-
font-family: var(--preferred-font);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
animation-duration: var(--animation-duration);
|
|
11
|
-
animation-delay: var(--animation-delay);
|
|
12
|
-
animation-timing-function: var(--animation-curve-default);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
textarea {
|
|
16
|
-
resize: vertical;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
h1,
|
|
20
|
-
h2,
|
|
21
|
-
h3,
|
|
22
|
-
h4,
|
|
23
|
-
h5,
|
|
24
|
-
h6 {
|
|
25
|
-
margin: 24px 0;
|
|
26
|
-
font-weight: 400;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
h1 {
|
|
30
|
-
font-size: calc(3.5 * var(--font-size));
|
|
31
|
-
line-height: 1.35;
|
|
32
|
-
letter-spacing: -0.02em;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
h2 {
|
|
36
|
-
font-size: calc(2.8 * var(--font-size));
|
|
37
|
-
line-height: 48px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
h3 {
|
|
41
|
-
font-size: calc(2.2 * var(--font-size));
|
|
42
|
-
line-height: 40px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
h4 {
|
|
46
|
-
font-size: calc(1.5 * var(--font-size));
|
|
47
|
-
line-height: 32px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
h5 {
|
|
51
|
-
font-size: calc(1.25 * var(--font-size));
|
|
52
|
-
font-weight: var(--font-weight-semi-bold);
|
|
53
|
-
line-height: 1;
|
|
54
|
-
letter-spacing: 0.02em;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
h6 {
|
|
58
|
-
font-size: var(--font-size);
|
|
59
|
-
line-height: 24px;
|
|
60
|
-
letter-spacing: 0.04em;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
th {
|
|
64
|
-
font-weight: normal;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:root {
|
|
68
|
-
--color-black: 0, 0, 0;
|
|
69
|
-
--color-white: 255, 255, 255;
|
|
70
|
-
|
|
71
|
-
--palette-red-50: 255, 235, 238;
|
|
72
|
-
--palette-red-100: 255, 205, 210;
|
|
73
|
-
--palette-red-200: 239, 154, 154;
|
|
74
|
-
--palette-red-300: 229, 115, 115;
|
|
75
|
-
--palette-red-400: 239, 83, 80;
|
|
76
|
-
--palette-red-500: 244, 67, 54;
|
|
77
|
-
--palette-red-600: 229, 57, 53;
|
|
78
|
-
--palette-red-700: 211, 47, 47;
|
|
79
|
-
--palette-red-800: 198, 40, 40;
|
|
80
|
-
--palette-red-900: 183, 28, 28;
|
|
81
|
-
--palette-red-a100: 255, 138, 128;
|
|
82
|
-
--palette-red-a200: 255, 82, 82;
|
|
83
|
-
--palette-red-a400: 255, 23, 68;
|
|
84
|
-
--palette-red-a700: 213, 0, 0;
|
|
85
|
-
|
|
86
|
-
--palette-pink-50: 252, 228, 236;
|
|
87
|
-
--palette-pink-100: 248, 187, 208;
|
|
88
|
-
--palette-pink-200: 244, 143, 177;
|
|
89
|
-
--palette-pink-300: 240, 98, 146;
|
|
90
|
-
--palette-pink-400: 236, 64, 122;
|
|
91
|
-
--palette-pink-500: 233, 30, 99;
|
|
92
|
-
--palette-pink-600: 216, 27, 96;
|
|
93
|
-
--palette-pink-700: 194, 24, 91;
|
|
94
|
-
--palette-pink-800: 173, 20, 87;
|
|
95
|
-
--palette-pink-900: 136, 14, 79;
|
|
96
|
-
--palette-pink-a100: 255, 128, 171;
|
|
97
|
-
--palette-pink-a200: 255, 64, 129;
|
|
98
|
-
--palette-pink-a400: 245, 0, 87;
|
|
99
|
-
--palette-pink-a700: 197, 17, 98;
|
|
100
|
-
|
|
101
|
-
--palette-purple-50: 243, 229, 245;
|
|
102
|
-
--palette-purple-100: 225, 190, 231;
|
|
103
|
-
--palette-purple-200: 206, 147, 216;
|
|
104
|
-
--palette-purple-300: 186, 104, 200;
|
|
105
|
-
--palette-purple-400: 171, 71, 188;
|
|
106
|
-
--palette-purple-500: 156, 39, 176;
|
|
107
|
-
--palette-purple-600: 142, 36, 170;
|
|
108
|
-
--palette-purple-700: 123, 31, 162;
|
|
109
|
-
--palette-purple-800: 106, 27, 154;
|
|
110
|
-
--palette-purple-900: 74, 20, 140;
|
|
111
|
-
--palette-purple-a100: 234, 128, 252;
|
|
112
|
-
--palette-purple-a200: 224, 64, 251;
|
|
113
|
-
--palette-purple-a400: 213, 0, 249;
|
|
114
|
-
--palette-purple-a700: 170, 0, 255;
|
|
115
|
-
|
|
116
|
-
--palette-deep-purple-50: 237, 231, 246;
|
|
117
|
-
--palette-deep-purple-100: 209, 196, 233;
|
|
118
|
-
--palette-deep-purple-200: 179, 157, 219;
|
|
119
|
-
--palette-deep-purple-300: 149, 117, 205;
|
|
120
|
-
--palette-deep-purple-400: 126, 87, 194;
|
|
121
|
-
--palette-deep-purple-500: 103, 58, 183;
|
|
122
|
-
--palette-deep-purple-600: 94, 53, 177;
|
|
123
|
-
--palette-deep-purple-700: 81, 45, 168;
|
|
124
|
-
--palette-deep-purple-800: 69, 39, 160;
|
|
125
|
-
--palette-deep-purple-900: 49, 27, 146;
|
|
126
|
-
--palette-deep-purple-a100: 179, 136, 255;
|
|
127
|
-
--palette-deep-purple-a200: 124, 77, 255;
|
|
128
|
-
--palette-deep-purple-a400: 101, 31, 255;
|
|
129
|
-
--palette-deep-purple-a700: 98, 0, 234;
|
|
130
|
-
|
|
131
|
-
--palette-indigo-50: 232, 234, 246;
|
|
132
|
-
--palette-indigo-100: 197, 202, 233;
|
|
133
|
-
--palette-indigo-200: 159, 168, 218;
|
|
134
|
-
--palette-indigo-300: 121, 134, 203;
|
|
135
|
-
--palette-indigo-400: 92, 107, 192;
|
|
136
|
-
--palette-indigo-500: 63, 81, 181;
|
|
137
|
-
--palette-indigo-600: 57, 73, 171;
|
|
138
|
-
--palette-indigo-700: 48, 63, 159;
|
|
139
|
-
--palette-indigo-800: 40, 53, 147;
|
|
140
|
-
--palette-indigo-900: 26, 35, 126;
|
|
141
|
-
--palette-indigo-a100: 140, 158, 255;
|
|
142
|
-
--palette-indigo-a200: 83, 109, 254;
|
|
143
|
-
--palette-indigo-a400: 61, 90, 254;
|
|
144
|
-
--palette-indigo-a700: 48, 79, 254;
|
|
145
|
-
|
|
146
|
-
--palette-blue-50: 227, 242, 253;
|
|
147
|
-
--palette-blue-100: 187, 222, 251;
|
|
148
|
-
--palette-blue-200: 144, 202, 249;
|
|
149
|
-
--palette-blue-300: 100, 181, 246;
|
|
150
|
-
--palette-blue-400: 66, 165, 245;
|
|
151
|
-
--palette-blue-500: 33, 150, 243;
|
|
152
|
-
--palette-blue-600: 30, 136, 229;
|
|
153
|
-
--palette-blue-700: 25, 118, 210;
|
|
154
|
-
--palette-blue-800: 21, 101, 192;
|
|
155
|
-
--palette-blue-900: 13, 71, 161;
|
|
156
|
-
--palette-blue-a100: 130, 177, 255;
|
|
157
|
-
--palette-blue-a200: 68, 138, 255;
|
|
158
|
-
--palette-blue-a400: 41, 121, 255;
|
|
159
|
-
--palette-blue-a700: 41, 98, 255;
|
|
160
|
-
|
|
161
|
-
--palette-light-blue-50: 225, 245, 254;
|
|
162
|
-
--palette-light-blue-100: 179, 229, 252;
|
|
163
|
-
--palette-light-blue-200: 129, 212, 250;
|
|
164
|
-
--palette-light-blue-300: 79, 195, 247;
|
|
165
|
-
--palette-light-blue-400: 41, 182, 246;
|
|
166
|
-
--palette-light-blue-500: 3, 169, 244;
|
|
167
|
-
--palette-light-blue-600: 3, 155, 229;
|
|
168
|
-
--palette-light-blue-700: 2, 136, 209;
|
|
169
|
-
--palette-light-blue-800: 2, 119, 189;
|
|
170
|
-
--palette-light-blue-900: 1, 87, 155;
|
|
171
|
-
--palette-light-blue-a100: 128, 216, 255;
|
|
172
|
-
--palette-light-blue-a200: 64, 196, 255;
|
|
173
|
-
--palette-light-blue-a400: 0, 176, 255;
|
|
174
|
-
--palette-light-blue-a700: 0, 145, 234;
|
|
175
|
-
|
|
176
|
-
--palette-cyan-50: 224, 247, 250;
|
|
177
|
-
--palette-cyan-100: 178, 235, 242;
|
|
178
|
-
--palette-cyan-200: 128, 222, 234;
|
|
179
|
-
--palette-cyan-300: 77, 208, 225;
|
|
180
|
-
--palette-cyan-400: 38, 198, 218;
|
|
181
|
-
--palette-cyan-500: 0, 188, 212;
|
|
182
|
-
--palette-cyan-600: 0, 172, 193;
|
|
183
|
-
--palette-cyan-700: 0, 151, 167;
|
|
184
|
-
--palette-cyan-800: 0, 131, 143;
|
|
185
|
-
--palette-cyan-900: 0, 96, 100;
|
|
186
|
-
--palette-cyan-a100: 132, 255, 255;
|
|
187
|
-
--palette-cyan-a200: 24, 255, 255;
|
|
188
|
-
--palette-cyan-a400: 0, 229, 255;
|
|
189
|
-
--palette-cyan-a700: 0, 184, 212;
|
|
190
|
-
|
|
191
|
-
--palette-teal-50: 224, 242, 241;
|
|
192
|
-
--palette-teal-100: 178, 223, 219;
|
|
193
|
-
--palette-teal-200: 128, 203, 196;
|
|
194
|
-
--palette-teal-300: 77, 182, 172;
|
|
195
|
-
--palette-teal-400: 38, 166, 154;
|
|
196
|
-
--palette-teal-500: 0, 150, 136;
|
|
197
|
-
--palette-teal-600: 0, 137, 123;
|
|
198
|
-
--palette-teal-700: 0, 121, 107;
|
|
199
|
-
--palette-teal-800: 0, 105, 92;
|
|
200
|
-
--palette-teal-900: 0, 77, 64;
|
|
201
|
-
--palette-teal-a100: 167, 255, 235;
|
|
202
|
-
--palette-teal-a200: 100, 255, 218;
|
|
203
|
-
--palette-teal-a400: 29, 233, 182;
|
|
204
|
-
--palette-teal-a700: 0, 191, 165;
|
|
205
|
-
|
|
206
|
-
--palette-green-50: 232, 245, 233;
|
|
207
|
-
--palette-green-100: 200, 230, 201;
|
|
208
|
-
--palette-green-200: 165, 214, 167;
|
|
209
|
-
--palette-green-300: 129, 199, 132;
|
|
210
|
-
--palette-green-400: 102, 187, 106;
|
|
211
|
-
--palette-green-500: 76, 175, 80;
|
|
212
|
-
--palette-green-600: 67, 160, 71;
|
|
213
|
-
--palette-green-700: 56, 142, 60;
|
|
214
|
-
--palette-green-800: 46, 125, 50;
|
|
215
|
-
--palette-green-900: 27, 94, 32;
|
|
216
|
-
--palette-green-a100: 185, 246, 202;
|
|
217
|
-
--palette-green-a200: 105, 240, 174;
|
|
218
|
-
--palette-green-a400: 0, 230, 118;
|
|
219
|
-
--palette-green-a700: 0, 200, 83;
|
|
220
|
-
|
|
221
|
-
--palette-light-green-50: 241, 248, 233;
|
|
222
|
-
--palette-light-green-100: 220, 237, 200;
|
|
223
|
-
--palette-light-green-200: 197, 225, 165;
|
|
224
|
-
--palette-light-green-300: 174, 213, 129;
|
|
225
|
-
--palette-light-green-400: 156, 204, 101;
|
|
226
|
-
--palette-light-green-500: 139, 195, 74;
|
|
227
|
-
--palette-light-green-600: 124, 179, 66;
|
|
228
|
-
--palette-light-green-700: 104, 159, 56;
|
|
229
|
-
--palette-light-green-800: 85, 139, 47;
|
|
230
|
-
--palette-light-green-900: 51, 105, 30;
|
|
231
|
-
--palette-light-green-a100: 204, 255, 144;
|
|
232
|
-
--palette-light-green-a200: 178, 255, 89;
|
|
233
|
-
--palette-light-green-a400: 118, 255, 3;
|
|
234
|
-
--palette-light-green-a700: 100, 221, 23;
|
|
235
|
-
|
|
236
|
-
--palette-lime-50: 249, 251, 231;
|
|
237
|
-
--palette-lime-100: 240, 244, 195;
|
|
238
|
-
--palette-lime-200: 230, 238, 156;
|
|
239
|
-
--palette-lime-300: 220, 231, 117;
|
|
240
|
-
--palette-lime-400: 212, 225, 87;
|
|
241
|
-
--palette-lime-500: 205, 220, 57;
|
|
242
|
-
--palette-lime-600: 192, 202, 51;
|
|
243
|
-
--palette-lime-700: 175, 180, 43;
|
|
244
|
-
--palette-lime-800: 158, 157, 36;
|
|
245
|
-
--palette-lime-900: 130, 119, 23;
|
|
246
|
-
--palette-lime-a100: 244, 255, 129;
|
|
247
|
-
--palette-lime-a200: 238, 255, 65;
|
|
248
|
-
--palette-lime-a400: 198, 255, 0;
|
|
249
|
-
--palette-lime-a700: 174, 234, 0;
|
|
250
|
-
|
|
251
|
-
--palette-yellow-50: 255, 253, 231;
|
|
252
|
-
--palette-yellow-100: 255, 249, 196;
|
|
253
|
-
--palette-yellow-200: 255, 245, 157;
|
|
254
|
-
--palette-yellow-300: 255, 241, 118;
|
|
255
|
-
--palette-yellow-400: 255, 238, 88;
|
|
256
|
-
--palette-yellow-500: 255, 235, 59;
|
|
257
|
-
--palette-yellow-600: 253, 216, 53;
|
|
258
|
-
--palette-yellow-700: 251, 192, 45;
|
|
259
|
-
--palette-yellow-800: 249, 168, 37;
|
|
260
|
-
--palette-yellow-900: 245, 127, 23;
|
|
261
|
-
--palette-yellow-a100: 255, 255, 141;
|
|
262
|
-
--palette-yellow-a200: 255, 255, 0;
|
|
263
|
-
--palette-yellow-a400: 255, 234, 0;
|
|
264
|
-
--palette-yellow-a700: 255, 214, 0;
|
|
265
|
-
|
|
266
|
-
--palette-amber-50: 255, 248, 225;
|
|
267
|
-
--palette-amber-100: 255, 236, 179;
|
|
268
|
-
--palette-amber-200: 255, 224, 130;
|
|
269
|
-
--palette-amber-300: 255, 213, 79;
|
|
270
|
-
--palette-amber-400: 255, 202, 40;
|
|
271
|
-
--palette-amber-500: 255, 193, 7;
|
|
272
|
-
--palette-amber-600: 255, 179, 0;
|
|
273
|
-
--palette-amber-700: 255, 160, 0;
|
|
274
|
-
--palette-amber-800: 255, 143, 0;
|
|
275
|
-
--palette-amber-900: 255, 111, 0;
|
|
276
|
-
--palette-amber-a100: 255, 229, 127;
|
|
277
|
-
--palette-amber-a200: 255, 215, 64;
|
|
278
|
-
--palette-amber-a400: 255, 196, 0;
|
|
279
|
-
--palette-amber-a700: 255, 171, 0;
|
|
280
|
-
|
|
281
|
-
--palette-orange-50: 255, 243, 224;
|
|
282
|
-
--palette-orange-100: 255, 224, 178;
|
|
283
|
-
--palette-orange-200: 255, 204, 128;
|
|
284
|
-
--palette-orange-300: 255, 183, 77;
|
|
285
|
-
--palette-orange-400: 255, 167, 38;
|
|
286
|
-
--palette-orange-500: 255, 152, 0;
|
|
287
|
-
--palette-orange-600: 251, 140, 0;
|
|
288
|
-
--palette-orange-700: 245, 124, 0;
|
|
289
|
-
--palette-orange-800: 239, 108, 0;
|
|
290
|
-
--palette-orange-900: 230, 81, 0;
|
|
291
|
-
--palette-orange-a100: 255, 209, 128;
|
|
292
|
-
--palette-orange-a200: 255, 171, 64;
|
|
293
|
-
--palette-orange-a400: 255, 145, 0;
|
|
294
|
-
--palette-orange-a700: 255, 109, 0;
|
|
295
|
-
|
|
296
|
-
--palette-deep-orange-50: 251, 233, 231;
|
|
297
|
-
--palette-deep-orange-100: 255, 204, 188;
|
|
298
|
-
--palette-deep-orange-200: 255, 171, 145;
|
|
299
|
-
--palette-deep-orange-300: 255, 138, 101;
|
|
300
|
-
--palette-deep-orange-400: 255, 112, 67;
|
|
301
|
-
--palette-deep-orange-500: 255, 87, 34;
|
|
302
|
-
--palette-deep-orange-600: 244, 81, 30;
|
|
303
|
-
--palette-deep-orange-700: 230, 74, 25;
|
|
304
|
-
--palette-deep-orange-800: 216, 67, 21;
|
|
305
|
-
--palette-deep-orange-900: 191, 54, 12;
|
|
306
|
-
--palette-deep-orange-a100: 255, 158, 128;
|
|
307
|
-
--palette-deep-orange-a200: 255, 110, 64;
|
|
308
|
-
--palette-deep-orange-a400: 255, 61, 0;
|
|
309
|
-
--palette-deep-orange-a700: 221, 44, 0;
|
|
310
|
-
|
|
311
|
-
--palette-brown-50: 239, 235, 233;
|
|
312
|
-
--palette-brown-100: 215, 204, 200;
|
|
313
|
-
--palette-brown-200: 188, 170, 164;
|
|
314
|
-
--palette-brown-300: 161, 136, 127;
|
|
315
|
-
--palette-brown-400: 141, 110, 99;
|
|
316
|
-
--palette-brown-500: 121, 85, 72;
|
|
317
|
-
--palette-brown-600: 109, 76, 65;
|
|
318
|
-
--palette-brown-700: 93, 64, 55;
|
|
319
|
-
--palette-brown-800: 78, 52, 46;
|
|
320
|
-
--palette-brown-900: 62, 39, 35;
|
|
321
|
-
|
|
322
|
-
--palette-grey-50: 250, 250, 250;
|
|
323
|
-
--palette-grey-100: 245, 245, 245;
|
|
324
|
-
--palette-grey-200: 238, 238, 238;
|
|
325
|
-
--palette-grey-300: 224, 224, 224;
|
|
326
|
-
--palette-grey-400: 189, 189, 189;
|
|
327
|
-
--palette-grey-500: 158, 158, 158;
|
|
328
|
-
--palette-grey-600: 117, 117, 117;
|
|
329
|
-
--palette-grey-700: 97, 97, 97;
|
|
330
|
-
--palette-grey-800: 66, 66, 66;
|
|
331
|
-
--palette-grey-900: 33, 33, 33;
|
|
332
|
-
|
|
333
|
-
--palette-blue-grey-50: 236, 239, 241;
|
|
334
|
-
--palette-blue-grey-100: 207, 216, 220;
|
|
335
|
-
--palette-blue-grey-200: 176, 190, 197;
|
|
336
|
-
--palette-blue-grey-300: 144, 164, 174;
|
|
337
|
-
--palette-blue-grey-400: 120, 144, 156;
|
|
338
|
-
--palette-blue-grey-500: 96, 125, 139;
|
|
339
|
-
--palette-blue-grey-600: 84, 110, 122;
|
|
340
|
-
--palette-blue-grey-700: 69, 90, 100;
|
|
341
|
-
--palette-blue-grey-800: 55, 71, 79;
|
|
342
|
-
--palette-blue-grey-900: 38, 50, 56;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
:root[dark] {
|
|
346
|
-
--color-black: 238, 238, 238;
|
|
347
|
-
--color-white: 11, 11, 11;
|
|
348
|
-
|
|
349
|
-
--palette-grey-50: 22, 22, 22;
|
|
350
|
-
--palette-grey-100: 33, 33, 33;
|
|
351
|
-
--palette-grey-200: 44, 44, 44;
|
|
352
|
-
--palette-grey-300: 66, 66, 66;
|
|
353
|
-
--palette-grey-400: 97, 97, 97;
|
|
354
|
-
--palette-grey-500: 117, 117, 117;
|
|
355
|
-
--palette-grey-600: 158, 158, 158;
|
|
356
|
-
--palette-grey-700: 189, 189, 189;
|
|
357
|
-
--palette-grey-800: 224, 224, 224;
|
|
358
|
-
--palette-grey-900: 238, 238, 238;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
:root {
|
|
362
|
-
--color-primary: var(--palette-indigo-500);
|
|
363
|
-
--color-primary-light: var(--palette-indigo-100);
|
|
364
|
-
--color-accent: var(--palette-pink-a200);
|
|
365
|
-
--color-divider: var(--palette-grey-300);
|
|
366
|
-
|
|
367
|
-
--preferred-font: "Roboto", "Helvetica", "Arial", sans-serif;
|
|
368
|
-
--font-size: 16px;
|
|
369
|
-
--font-size-small: 14px;
|
|
370
|
-
--font-size-big: 18px;
|
|
371
|
-
--font-weight-semi-bold: 500;
|
|
372
|
-
--font-weight-bold: 700;
|
|
373
|
-
|
|
374
|
-
--shadow-2p: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
375
|
-
--shadow-4p: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
376
|
-
|
|
377
|
-
--animation-duration: 0.35s;
|
|
378
|
-
--animation-duration-short: 0.2s;
|
|
379
|
-
--animation-delay: calc(var(--animation-duration) / 5);
|
|
380
|
-
|
|
381
|
-
--animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
|
|
382
|
-
--animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
|
|
383
|
-
--animation-curve-focus-ring: cubic-bezier(0.2, 0, 0, 1);
|
|
384
|
-
--animation-curve-default: var(--animation-curve-fast-out-slow-in);
|
|
385
|
-
|
|
386
|
-
--z-index-highest: 300;
|
|
387
|
-
--z-index-higher: 200;
|
|
388
|
-
--z-index-high: 100;
|
|
389
|
-
--z-index-normal: 1;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
:root[dark] {
|
|
393
|
-
color-scheme: dark;
|
|
394
|
-
|
|
395
|
-
--color-primary: var(--palette-indigo-300);
|
|
396
|
-
--color-primary-light: var(--palette-indigo-900);
|
|
397
|
-
--color-accent: var(--palette-pink-a100);
|
|
398
|
-
}
|
package/lib/focus4.styling.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import "./global.css";
|
|
2
|
-
import "./variables";
|
|
3
|
-
export { getDefaultTransition, getSpringTransition } from "./animation";
|
|
4
|
-
export { uiConfig } from "./config";
|
|
5
|
-
export { fromBem, themeable, ThemeContext, ThemeProvider, toBem, useTheme } from "./theme";
|
|
6
|
-
export type { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, FocusCSSContext, ThemeProviderProps, ToBem } from "./theme";
|
package/lib/focus4.styling.js
DELETED
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext, useMemo } from 'react';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import { pick } from 'es-toolkit';
|
|
5
|
-
|
|
6
|
-
function get() {
|
|
7
|
-
const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
|
|
8
|
-
const delay = toMs(animationDelay);
|
|
9
|
-
const duration = toMs(animationDuration);
|
|
10
|
-
const ease = animationTimingFunction.startsWith("cubic-bezier")
|
|
11
|
-
? animationTimingFunction.slice(13).split(",").map(parseFloat)
|
|
12
|
-
: undefined;
|
|
13
|
-
return { delay, duration, ease };
|
|
14
|
-
}
|
|
15
|
-
/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */
|
|
16
|
-
function getDefaultTransition() {
|
|
17
|
-
const { delay, duration, ease } = get();
|
|
18
|
-
return {
|
|
19
|
-
delay: delay / 1000,
|
|
20
|
-
duration: duration / 1000,
|
|
21
|
-
ease
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
/** Récupère les paramètres de transition "spring" par défaut. */
|
|
25
|
-
function getSpringTransition() {
|
|
26
|
-
return {
|
|
27
|
-
type: "spring",
|
|
28
|
-
bounce: 0,
|
|
29
|
-
duration: get().duration / 1000
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
function toMs(d) {
|
|
33
|
-
if (d.endsWith("ms")) {
|
|
34
|
-
return +d.slice(0, -2);
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
return +d.slice(0, -1) * 1000;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/** Config Focus de l'application */
|
|
42
|
-
const uiConfig = {
|
|
43
|
-
/** Valeur de "autocomplete" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */
|
|
44
|
-
autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? "off" : "one-time-code",
|
|
45
|
-
/** Classe CSS par défaut des icônes. */
|
|
46
|
-
defaultIconClassName: "material-symbols-outlined"
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const ThemeContext = createContext({});
|
|
50
|
-
|
|
51
|
-
/** Merges passed themes by concatenating string keys */
|
|
52
|
-
function themeable(...themes) {
|
|
53
|
-
return themes.reduce(merge, {});
|
|
54
|
-
}
|
|
55
|
-
function merge(original = {}, mixin = {}) {
|
|
56
|
-
/*
|
|
57
|
-
* Make a copy to avoid mutations of nested objects
|
|
58
|
-
* also strip all functions injected by isomorphic-style-loader
|
|
59
|
-
*/
|
|
60
|
-
const result = Object.keys(original).reduce((acc, key) => {
|
|
61
|
-
const value = original[key];
|
|
62
|
-
if (typeof value !== "function") {
|
|
63
|
-
acc[key] = value;
|
|
64
|
-
}
|
|
65
|
-
return acc;
|
|
66
|
-
}, {});
|
|
67
|
-
// Traverse mixin keys and merge them to resulting theme
|
|
68
|
-
for (const key in mixin) {
|
|
69
|
-
// There's no need to set any defaults here
|
|
70
|
-
const originalValue = result[key];
|
|
71
|
-
const mixinValue = mixin[key];
|
|
72
|
-
switch (typeof mixinValue) {
|
|
73
|
-
case "undefined": // Fallthrough - handles accidentally unset values which may come from props
|
|
74
|
-
case "function":
|
|
75
|
-
// This handles issue when isomorphic-style-loader addes helper functions to css-module
|
|
76
|
-
break; // Just skip
|
|
77
|
-
default:
|
|
78
|
-
// Plain values
|
|
79
|
-
switch (typeof originalValue) {
|
|
80
|
-
case "undefined":
|
|
81
|
-
// Mixin key is new to original theme - take it as is
|
|
82
|
-
result[key] = mixinValue;
|
|
83
|
-
break;
|
|
84
|
-
case "function":
|
|
85
|
-
// This handles issue when isomorphic-style-loader addes helper functions to css-module
|
|
86
|
-
break; // Just skip
|
|
87
|
-
default:
|
|
88
|
-
// Finally we can merge
|
|
89
|
-
result[key] = [...originalValue.split(" "), ...mixinValue.split(" ")]
|
|
90
|
-
.filter((item, pos, self) => self.indexOf(item) === pos && item !== "")
|
|
91
|
-
.join(" ");
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
break;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
return result;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM
|
|
102
|
-
* en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs".
|
|
103
|
-
*
|
|
104
|
-
* Par exemple, un objet contenant les classes
|
|
105
|
-
* ```ts
|
|
106
|
-
* ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"]
|
|
107
|
-
* ```
|
|
108
|
-
* sera transformé en un objet avec 2 fonctions `panel` et `title` :
|
|
109
|
-
* ```ts
|
|
110
|
-
* {
|
|
111
|
-
* panel({editing?: boolean; loading?: boolean}) => string;
|
|
112
|
-
* title({top?: boolean; bottom?: boolean}) => string;
|
|
113
|
-
* }
|
|
114
|
-
* ```
|
|
115
|
-
* Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs",
|
|
116
|
-
* selon les valeurs des différents booléens.
|
|
117
|
-
*
|
|
118
|
-
* Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.
|
|
119
|
-
* Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.
|
|
120
|
-
*
|
|
121
|
-
* _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._
|
|
122
|
-
*
|
|
123
|
-
* _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._
|
|
124
|
-
*/
|
|
125
|
-
function toBem(css) {
|
|
126
|
-
const data = {};
|
|
127
|
-
for (const key in css) {
|
|
128
|
-
const [element, modifier] = key.split("--");
|
|
129
|
-
if (data[element] && modifier) {
|
|
130
|
-
data[element].push(modifier);
|
|
131
|
-
}
|
|
132
|
-
else if (!data[element]) {
|
|
133
|
-
data[element] = modifier ? [modifier] : [];
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
return Object.keys(data).reduce((bem, key) => ({
|
|
137
|
-
...bem,
|
|
138
|
-
[key]: (mods = {}) => {
|
|
139
|
-
if (mods !== true) {
|
|
140
|
-
return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));
|
|
141
|
-
}
|
|
142
|
-
else {
|
|
143
|
-
return pick(css, [key, ...data[key].map(mod => `${key}--${mod}`)]);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}), {});
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet
|
|
150
|
-
* qui contient toutes les classes CSS qui le compose.
|
|
151
|
-
*/
|
|
152
|
-
function fromBem(css) {
|
|
153
|
-
const res = {};
|
|
154
|
-
for (const key in css) {
|
|
155
|
-
const value = css[key];
|
|
156
|
-
if (value) {
|
|
157
|
-
if (typeof value === "string") {
|
|
158
|
-
res[key] = value;
|
|
159
|
-
}
|
|
160
|
-
else {
|
|
161
|
-
Object.assign(res, value(true));
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
return res;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés
|
|
170
|
-
* à l'intérieur (via un context React).
|
|
171
|
-
*
|
|
172
|
-
* Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,
|
|
173
|
-
* y compris sur les mêmes composants.
|
|
174
|
-
*/
|
|
175
|
-
function ThemeProvider({ appTheme, children }) {
|
|
176
|
-
const context = useContext(ThemeContext);
|
|
177
|
-
const mergedContext = useMemo(() => {
|
|
178
|
-
const mc = {};
|
|
179
|
-
for (const key in context) {
|
|
180
|
-
if (key in appTheme && appTheme[key]) {
|
|
181
|
-
mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));
|
|
182
|
-
}
|
|
183
|
-
else {
|
|
184
|
-
mc[key] = context[key];
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
for (const key in appTheme) {
|
|
188
|
-
if (!(key in context) && appTheme[key]) {
|
|
189
|
-
mc[key] = appTheme[key];
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
return mc;
|
|
193
|
-
}, [appTheme, context]);
|
|
194
|
-
return jsx(ThemeContext.Provider, { value: mergedContext, children: children });
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS
|
|
199
|
-
* passées en paramètre.
|
|
200
|
-
*
|
|
201
|
-
* `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.
|
|
202
|
-
*
|
|
203
|
-
* @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`
|
|
204
|
-
* @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.
|
|
205
|
-
*/
|
|
206
|
-
function useTheme(name, ...themes) {
|
|
207
|
-
const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};
|
|
208
|
-
return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
export { ThemeContext, ThemeProvider, fromBem, getDefaultTransition, getSpringTransition, themeable, toBem, uiConfig, useTheme };
|
|
212
|
-
//# sourceMappingURL=focus4.styling.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focus4.styling.js","sources":["../src/animation.ts","../src/config.ts","../src/theme/common.ts","../src/theme/themeable.ts","../src/theme/to-bem.ts","../src/theme/theme-provider.tsx","../src/theme/use-theme.ts"],"sourcesContent":["function get() {\r\n const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n const delay = toMs(animationDelay);\r\n const duration = toMs(animationDuration);\r\n const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n ? (animationTimingFunction.slice(13).split(\",\").map(parseFloat) as [number, number, number, number])\r\n : undefined;\r\n\r\n return {delay, duration, ease};\r\n}\r\n\r\n/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */\r\nexport function getDefaultTransition() {\r\n const {delay, duration, ease} = get();\r\n return {\r\n delay: delay / 1000,\r\n duration: duration / 1000,\r\n ease\r\n } as const;\r\n}\r\n\r\n/** Récupère les paramètres de transition \"spring\" par défaut. */\r\nexport function getSpringTransition() {\r\n return {\r\n type: \"spring\",\r\n bounce: 0,\r\n duration: get().duration / 1000\r\n } as const;\r\n}\r\n\r\nfunction toMs(d: string) {\r\n if (d.endsWith(\"ms\")) {\r\n return +d.slice(0, -2);\r\n } else {\r\n return +d.slice(0, -1) * 1000;\r\n }\r\n}\r\n","/** Config Focus de l'application */\r\nexport const uiConfig = {\r\n /** Valeur de \"autocomplete\" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */\r\n autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? \"off\" : \"one-time-code\",\r\n\r\n /** Classe CSS par défaut des icônes. */\r\n defaultIconClassName: \"material-symbols-outlined\"\r\n};\r\n","import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n [key: string]: {};\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","/** Merges passed themes by concatenating string keys */\r\nexport function themeable<T extends {}>(...themes: T[]) {\r\n return themes.reduce(merge, {}) as T;\r\n}\r\n\r\nfunction merge<T extends {[key: string]: string}>(original = {} as T, mixin = {} as T) {\r\n /*\r\n * Make a copy to avoid mutations of nested objects\r\n * also strip all functions injected by isomorphic-style-loader\r\n */\r\n const result = Object.keys(original).reduce(\r\n (acc, key) => {\r\n const value = original[key];\r\n if (typeof value !== \"function\") {\r\n acc[key] = value;\r\n }\r\n return acc;\r\n },\r\n {} as {[key: string]: string}\r\n );\r\n\r\n // Traverse mixin keys and merge them to resulting theme\r\n for (const key in mixin) {\r\n // There's no need to set any defaults here\r\n const originalValue = result[key];\r\n const mixinValue = mixin[key];\r\n\r\n switch (typeof mixinValue) {\r\n case \"undefined\": // Fallthrough - handles accidentally unset values which may come from props\r\n case \"function\":\r\n // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n break; // Just skip\r\n\r\n default:\r\n // Plain values\r\n switch (typeof originalValue) {\r\n case \"undefined\":\r\n // Mixin key is new to original theme - take it as is\r\n result[key] = mixinValue;\r\n break;\r\n\r\n case \"function\":\r\n // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n break; // Just skip\r\n\r\n default:\r\n // Finally we can merge\r\n result[key] = [...originalValue.split(\" \"), ...mixinValue.split(\" \")]\r\n .filter((item, pos, self) => self.indexOf(item) === pos && item !== \"\")\r\n .join(\" \");\r\n break;\r\n }\r\n break;\r\n }\r\n }\r\n\r\n return result;\r\n}\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"es-toolkit\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n {\r\n [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n ? BemFunction<CSS, P, E>\r\n : CSS[P] extends CSSMod<infer __, infer ___>\r\n ? never\r\n : BemFunction<CSS, P, string>;\r\n },\r\n AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\n/**\r\n * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM\r\n * en un objet contenant une fonction par \"élément\" à laquelle on peut appliquer ses \"modificateurs\".\r\n *\r\n * Par exemple, un objet contenant les classes\r\n * ```ts\r\n * [\"panel\", \"panel--editing\", \"panel--loading\", \"title\", \"title--top\", \"title--bottom\"]\r\n * ```\r\n * sera transformé en un objet avec 2 fonctions `panel` et `title` :\r\n * ```ts\r\n * {\r\n * panel({editing?: boolean; loading?: boolean}) => string;\r\n * title({top?: boolean; bottom?: boolean}) => string;\r\n * }\r\n * ```\r\n * Un appel à une fonction retournera la classe CSS de l'\"élément\", à laquelle seront ajoutées ou non les classes des différents \"modificateurs\",\r\n * selon les valeurs des différents booléens.\r\n *\r\n * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.\r\n * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.\r\n *\r\n * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._\r\n *\r\n * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._\r\n */\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n const data: {[key: string]: string[]} = {};\r\n for (const key in css) {\r\n const [element, modifier] = key.split(\"--\");\r\n if (data[element] && modifier) {\r\n data[element].push(modifier);\r\n } else if (!data[element]) {\r\n data[element] = modifier ? [modifier] : [];\r\n }\r\n }\r\n\r\n return Object.keys(data).reduce(\r\n (bem, key) => ({\r\n ...bem,\r\n [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n if (mods !== true) {\r\n return classNames(\r\n (css as any)[key],\r\n ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n );\r\n } else {\r\n return pick(css as any, [key, ...data[key].map(mod => `${key}--${mod}`)]);\r\n }\r\n }\r\n }),\r\n {}\r\n ) as ToBem<CSS>;\r\n}\r\n\r\n/**\r\n * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet\r\n * qui contient toutes les classes CSS qui le compose.\r\n */\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n const res: CSSToStrings<T> = {};\r\n\r\n for (const key in css as any) {\r\n const value = (css as any)[key];\r\n if (value) {\r\n if (typeof value === \"string\") {\r\n (res as any)[key] = value;\r\n } else {\r\n Object.assign(res, value(true));\r\n }\r\n }\r\n }\r\n\r\n return res;\r\n}\r\n","import {ReactNode, useContext, useMemo} from \"react\";\r\n\r\nimport {CSSContext, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem} from \"./to-bem\";\r\n\r\n/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */\r\nexport interface FocusCSSContext extends CSSContext {\r\n // Collections\r\n actionBar: {};\r\n advancedSearch: {};\r\n contextualActions: {};\r\n facet: {};\r\n facetBox: {};\r\n group: {};\r\n list: {};\r\n listBase: {};\r\n searchBar: {};\r\n summary: {};\r\n table: {};\r\n timeline: {};\r\n\r\n // Forms\r\n booleanRadio: {};\r\n display: {};\r\n field: {};\r\n form: {};\r\n inputDate: {};\r\n inputFile: {};\r\n label: {};\r\n select: {};\r\n selectCheckbox: {};\r\n selectChips: {};\r\n selectRadio: {};\r\n\r\n // Layout\r\n dialog: {};\r\n filAriane: {};\r\n header: {};\r\n lateralMenu: {};\r\n layout: {};\r\n mainMenu: {};\r\n overlay: {};\r\n panel: {};\r\n popin: {};\r\n scrollable: {};\r\n scrollspy: {};\r\n\r\n // Toolbox\r\n autocomplete: {};\r\n button: {};\r\n calendar: {};\r\n checkbox: {};\r\n chip: {};\r\n dropdown: {};\r\n floatingActionButton: {};\r\n iconButton: {};\r\n menu: {};\r\n progressIndicator: {};\r\n radio: {};\r\n ripple: {};\r\n slider: {};\r\n snackbar: {};\r\n supportingText: {};\r\n switch: {};\r\n textField: {};\r\n tabs: {};\r\n tooltip: {};\r\n}\r\n\r\n/** Props du ThemeProvider. */\r\nexport interface ThemeProviderProps {\r\n /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé. */\r\n appTheme: Partial<FocusCSSContext>;\r\n /** Enfants. */\r\n children: ReactNode;\r\n}\r\n\r\n/**\r\n * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés\r\n * à l'intérieur (via un context React).\r\n *\r\n * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,\r\n * y compris sur les mêmes composants.\r\n */\r\nexport function ThemeProvider({appTheme, children}: ThemeProviderProps) {\r\n const context = useContext(ThemeContext);\r\n\r\n const mergedContext = useMemo(() => {\r\n const mc = {} as CSSContext;\r\n\r\n for (const key in context) {\r\n if (key in appTheme && appTheme[key]) {\r\n mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));\r\n } else {\r\n mc[key] = context[key];\r\n }\r\n }\r\n\r\n for (const key in appTheme) {\r\n if (!(key in context) && appTheme[key]) {\r\n mc[key] = appTheme[key]!;\r\n }\r\n }\r\n return mc;\r\n }, [appTheme, context]);\r\n\r\n return <ThemeContext.Provider value={mergedContext}>{children}</ThemeContext.Provider>;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/**\r\n * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS\r\n * passées en paramètre.\r\n *\r\n * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.\r\n *\r\n * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`\r\n * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.\r\n */\r\nexport function useTheme<T>(\r\n name: string,\r\n ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}
|
package/lib/theme/common.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export type CSSElement<T> = T & string & {
|
|
2
|
-
_element: void;
|
|
3
|
-
};
|
|
4
|
-
export type CSSMod<N extends string, T> = N & T & string & {
|
|
5
|
-
_mod: void;
|
|
6
|
-
};
|
|
7
|
-
export type CSSToStrings<T> = {
|
|
8
|
-
[P in keyof T]?: string;
|
|
9
|
-
};
|
|
10
|
-
export type Mods<CSS, E> = {
|
|
11
|
-
[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never;
|
|
12
|
-
}[keyof CSS];
|
|
13
|
-
export type ModNames<CSS, E> = {
|
|
14
|
-
[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never;
|
|
15
|
-
}[keyof CSS];
|
|
16
|
-
export type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {
|
|
17
|
-
[_ in ModNames<CSS, E> | P]: string;
|
|
18
|
-
}) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {
|
|
19
|
-
[_ in Mods<CSS, E>]?: boolean;
|
|
20
|
-
}) => string);
|
|
21
|
-
export interface CSSContext {
|
|
22
|
-
[key: string]: {};
|
|
23
|
-
}
|
|
24
|
-
export declare const ThemeContext: import("react").Context<CSSContext>;
|
package/lib/theme/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { ThemeContext } from "./common";
|
|
2
|
-
export { themeable } from "./themeable";
|
|
3
|
-
export { ThemeProvider } from "./theme-provider";
|
|
4
|
-
export { fromBem, toBem } from "./to-bem";
|
|
5
|
-
export { useTheme } from "./use-theme";
|
|
6
|
-
export type { CSSContext, CSSElement, CSSMod, CSSToStrings } from "./common";
|
|
7
|
-
export type { FocusCSSContext, ThemeProviderProps } from "./theme-provider";
|
|
8
|
-
export type { CSSProp, ToBem } from "./to-bem";
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import { CSSContext } from "./common";
|
|
3
|
-
/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */
|
|
4
|
-
export interface FocusCSSContext extends CSSContext {
|
|
5
|
-
actionBar: {};
|
|
6
|
-
advancedSearch: {};
|
|
7
|
-
contextualActions: {};
|
|
8
|
-
facet: {};
|
|
9
|
-
facetBox: {};
|
|
10
|
-
group: {};
|
|
11
|
-
list: {};
|
|
12
|
-
listBase: {};
|
|
13
|
-
searchBar: {};
|
|
14
|
-
summary: {};
|
|
15
|
-
table: {};
|
|
16
|
-
timeline: {};
|
|
17
|
-
booleanRadio: {};
|
|
18
|
-
display: {};
|
|
19
|
-
field: {};
|
|
20
|
-
form: {};
|
|
21
|
-
inputDate: {};
|
|
22
|
-
inputFile: {};
|
|
23
|
-
label: {};
|
|
24
|
-
select: {};
|
|
25
|
-
selectCheckbox: {};
|
|
26
|
-
selectChips: {};
|
|
27
|
-
selectRadio: {};
|
|
28
|
-
dialog: {};
|
|
29
|
-
filAriane: {};
|
|
30
|
-
header: {};
|
|
31
|
-
lateralMenu: {};
|
|
32
|
-
layout: {};
|
|
33
|
-
mainMenu: {};
|
|
34
|
-
overlay: {};
|
|
35
|
-
panel: {};
|
|
36
|
-
popin: {};
|
|
37
|
-
scrollable: {};
|
|
38
|
-
scrollspy: {};
|
|
39
|
-
autocomplete: {};
|
|
40
|
-
button: {};
|
|
41
|
-
calendar: {};
|
|
42
|
-
checkbox: {};
|
|
43
|
-
chip: {};
|
|
44
|
-
dropdown: {};
|
|
45
|
-
floatingActionButton: {};
|
|
46
|
-
iconButton: {};
|
|
47
|
-
menu: {};
|
|
48
|
-
progressIndicator: {};
|
|
49
|
-
radio: {};
|
|
50
|
-
ripple: {};
|
|
51
|
-
slider: {};
|
|
52
|
-
snackbar: {};
|
|
53
|
-
supportingText: {};
|
|
54
|
-
switch: {};
|
|
55
|
-
textField: {};
|
|
56
|
-
tabs: {};
|
|
57
|
-
tooltip: {};
|
|
58
|
-
}
|
|
59
|
-
/** Props du ThemeProvider. */
|
|
60
|
-
export interface ThemeProviderProps {
|
|
61
|
-
/** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé. */
|
|
62
|
-
appTheme: Partial<FocusCSSContext>;
|
|
63
|
-
/** Enfants. */
|
|
64
|
-
children: ReactNode;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés
|
|
68
|
-
* à l'intérieur (via un context React).
|
|
69
|
-
*
|
|
70
|
-
* Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,
|
|
71
|
-
* y compris sur les mêmes composants.
|
|
72
|
-
*/
|
|
73
|
-
export declare function ThemeProvider({ appTheme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
package/lib/theme/themeable.d.ts
DELETED
package/lib/theme/to-bem.d.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { BemFunction, CSSElement, CSSMod, CSSToStrings } from "./common";
|
|
2
|
-
export type AllMods<CSS> = {
|
|
3
|
-
[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never;
|
|
4
|
-
}[keyof CSS];
|
|
5
|
-
export type ToBem<CSS> = Omit<{
|
|
6
|
-
[P in keyof CSS]-?: CSS[P] extends CSSElement<infer E> ? BemFunction<CSS, P, E> : CSS[P] extends CSSMod<infer __, infer ___> ? never : BemFunction<CSS, P, string>;
|
|
7
|
-
}, AllMods<CSS>>;
|
|
8
|
-
export type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
|
|
9
|
-
/**
|
|
10
|
-
* `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM
|
|
11
|
-
* en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs".
|
|
12
|
-
*
|
|
13
|
-
* Par exemple, un objet contenant les classes
|
|
14
|
-
* ```ts
|
|
15
|
-
* ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"]
|
|
16
|
-
* ```
|
|
17
|
-
* sera transformé en un objet avec 2 fonctions `panel` et `title` :
|
|
18
|
-
* ```ts
|
|
19
|
-
* {
|
|
20
|
-
* panel({editing?: boolean; loading?: boolean}) => string;
|
|
21
|
-
* title({top?: boolean; bottom?: boolean}) => string;
|
|
22
|
-
* }
|
|
23
|
-
* ```
|
|
24
|
-
* Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs",
|
|
25
|
-
* selon les valeurs des différents booléens.
|
|
26
|
-
*
|
|
27
|
-
* Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.
|
|
28
|
-
* Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.
|
|
29
|
-
*
|
|
30
|
-
* _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._
|
|
31
|
-
*
|
|
32
|
-
* _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._
|
|
33
|
-
*/
|
|
34
|
-
export declare function toBem<CSS>(css: CSS): ToBem<CSS>;
|
|
35
|
-
/**
|
|
36
|
-
* `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet
|
|
37
|
-
* qui contient toutes les classes CSS qui le compose.
|
|
38
|
-
*/
|
|
39
|
-
export declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;
|
package/lib/theme/use-theme.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { CSSToStrings } from "./common";
|
|
2
|
-
import { ToBem } from "./to-bem";
|
|
3
|
-
/**
|
|
4
|
-
* `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS
|
|
5
|
-
* passées en paramètre.
|
|
6
|
-
*
|
|
7
|
-
* `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.
|
|
8
|
-
*
|
|
9
|
-
* @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`
|
|
10
|
-
* @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.
|
|
11
|
-
*/
|
|
12
|
-
export declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;
|
package/lib/variables/index.d.ts
DELETED