@data-fair/lib-common-types 1.15.0 → 1.16.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.
Files changed (5) hide show
  1. package/package.json +2 -1
  2. package/theme/index.d.ts +8 -0
  3. package/theme/index.js +117 -0
  4. package/theme/schema.d.ts +173 -86
  5. package/theme/schema.js +95 -92
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-fair/lib-common-types",
3
- "version": "1.15.0",
3
+ "version": "1.16.0",
4
4
  "description": "Shared schemas and built type definitions in the data-fair stack.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -16,6 +16,7 @@
16
16
  }
17
17
  },
18
18
  "dependencies": {
19
+ "@data-fair/lib-utils": "^1.6.1",
19
20
  "@data-fair/lib-validation": "^1.0.0",
20
21
  "ajv-formats": "3.0.1"
21
22
  },
package/theme/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type Colors, type Theme } from './.type/index.js';
2
+ import tinycolor from 'tinycolor2';
2
3
  export * from './.type/index.js';
3
4
  export declare const defaultTheme: {
4
5
  logo: undefined;
@@ -132,3 +133,10 @@ export declare const getTextColorsCss: (colors: Colors, theme: string) => string
132
133
  export declare const getReadableColor: (baseColor: string, bgColors: string[], darkMode: boolean, level: "AA" | "AAA") => string;
133
134
  export declare const getOnColor: (color: string) => string;
134
135
  export declare const fillTheme: (theme: Theme, defaultTheme: Theme) => Required<Pick<Theme, "darkColors" | "hcColors" | "hcDarkColors">> & Theme;
136
+ export declare function getColorsWarnings(locale: 'en' | 'fr', colors: Colors, themeName: string, readableOptions: tinycolor.WCAG2Options): string[];
137
+ export declare const readableOptions: tinycolor.WCAG2Options;
138
+ export declare const hcReadableOptions: tinycolor.WCAG2Options;
139
+ export declare function getSiteColorsWarnings(locale: 'en' | 'fr', theme: Theme, authProviders?: {
140
+ title?: string;
141
+ color?: string;
142
+ }[]): string[];
package/theme/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import clone from '@data-fair/lib-utils/clone.js'
2
+ import microTemplate from '@data-fair/lib-utils/micro-template.js'
2
3
  import tinycolor from 'tinycolor2'
3
4
  export * from './.type/index.js'
4
5
  export const defaultTheme = {
@@ -204,5 +205,121 @@ export const fillTheme = (theme, defaultTheme) => {
204
205
  accent: fullTheme.colors.accent,
205
206
  }
206
207
  }
208
+ // vuetify is sensitive to undefined keys, better to delete them
209
+ for (const key of Object.keys(fullTheme.colors)) {
210
+ if (fullTheme.colors[key] === undefined) { delete fullTheme.colors[key] }
211
+ }
212
+ if (fullTheme.darkColors) {
213
+ for (const key of Object.keys(fullTheme.darkColors)) {
214
+ if (fullTheme.darkColors[key] === undefined) { delete fullTheme.darkColors[key] }
215
+ }
216
+ }
217
+ if (fullTheme.hcColors) {
218
+ for (const key of Object.keys(fullTheme.hcColors)) {
219
+ if (fullTheme.hcColors[key] === undefined) { delete fullTheme.hcColors[key] }
220
+ }
221
+ }
222
+ if (fullTheme.hcDarkColors) {
223
+ for (const key of Object.keys(fullTheme.hcDarkColors)) {
224
+ if (fullTheme.hcDarkColors[key] === undefined) { delete fullTheme.hcDarkColors[key] }
225
+ }
226
+ }
207
227
  return fullTheme
208
228
  }
229
+ const messages = {
230
+ fr: {
231
+ 'theme.default': 'par défaut',
232
+ 'theme.dark': 'sombre',
233
+ 'theme.hc': 'à contraste élevé',
234
+ 'theme.hcDark': 'sombre à contraste élevé',
235
+ readableWarning: 'la couleur {colorName} ({colorCode}) du thème {themeName} n\'est pas suffisamment lisible par dessus la couleur {bgColorName} ({bgColorCode})',
236
+ authProvider: 'du fournisseur d\'identité {title}',
237
+ white: 'blanche',
238
+ text: 'de texte',
239
+ background: 'd\'arrière plan',
240
+ surface: 'de surface',
241
+ primary: 'primaire',
242
+ 'text-primary': 'texte primaire',
243
+ secondary: 'secondaire',
244
+ 'text-secondary': 'texte secondaire',
245
+ accent: 'accentuée',
246
+ 'text-accent': 'texte accentué',
247
+ error: 'd\'erreur',
248
+ 'text-error': 'texte d\'erreur',
249
+ warning: 'd\'avertissement',
250
+ 'text-warning': 'texte d\'avertissement',
251
+ success: 'de succès',
252
+ 'text-success': 'texte de succès',
253
+ info: 'd\'information',
254
+ 'text-info': 'texte d\'information',
255
+ admin: 'd\'administration',
256
+ 'text-admin': 'texte d\'administration',
257
+ },
258
+ en: {
259
+ 'theme.default': 'default',
260
+ 'theme.dark': 'dark',
261
+ 'theme.hc': 'high contrast',
262
+ 'theme.hcDark': 'high contrast dark',
263
+ readableWarning: 'the {colorName} color ({colorCode}) of {themeName} theme is not sufficiently readable over the {bgColorName} color ({bgColorCode})',
264
+ authProvider: 'auth provider {title}',
265
+ white: 'white',
266
+ text: 'text',
267
+ background: 'background',
268
+ surface: 'surface',
269
+ primary: 'primary',
270
+ 'text-primary': 'primary text',
271
+ secondary: 'secondary',
272
+ 'text-secondary': 'secondary text',
273
+ accent: 'accent',
274
+ 'text-accent': 'accent text',
275
+ error: 'error',
276
+ 'text-error': 'error text',
277
+ warning: 'warning',
278
+ 'text-warning': 'warning text',
279
+ success: 'success',
280
+ 'text-success': 'success text',
281
+ info: 'info',
282
+ 'text-info': 'info text',
283
+ admin: 'admin',
284
+ 'text-admin': 'admin text'
285
+ }
286
+ }
287
+ const getMessage = (locale, messageKey, params = {}) => {
288
+ return microTemplate(messages[locale][messageKey], params)
289
+ }
290
+ function readableWarning (readableOptions, locale, colorCode, colorName, bgColorCode, bgColorName, themeName) {
291
+ if (!colorCode || !bgColorCode) { return }
292
+ if (!tinycolor.isReadable(colorCode, bgColorCode, readableOptions)) {
293
+ return getMessage(locale, 'readableWarning', { colorCode, colorName: getMessage(locale, `${colorName}`), bgColorCode, bgColorName: getMessage(locale, `${bgColorName}`), themeName: getMessage(locale, `theme.${themeName}`) })
294
+ }
295
+ }
296
+ export function getColorsWarnings (locale, colors, themeName, readableOptions) {
297
+ const warnings = []
298
+ for (const color of ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'admin']) {
299
+ const textColor = colors[`text-${color}`] ?? colors[color]
300
+ warnings.push(readableWarning(readableOptions, locale, textColor, `text-${color}`, colors.background, 'background', themeName))
301
+ warnings.push(readableWarning(readableOptions, locale, textColor, `text-${color}`, colors.surface, 'surface', themeName))
302
+ }
303
+ for (const color of ['background', 'surface', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'admin']) {
304
+ warnings.push(readableWarning(readableOptions, locale, colors[`on-${color}`], 'text', colors[color], color, themeName))
305
+ }
306
+ return warnings.filter(w => w !== undefined)
307
+ }
308
+ export const readableOptions = { level: 'AA', size: 'small' }
309
+ export const hcReadableOptions = { level: 'AAA', size: 'small' }
310
+ export function getSiteColorsWarnings (locale, theme, authProviders) {
311
+ let warnings = getColorsWarnings(locale, theme.colors, 'default', readableOptions)
312
+ if (theme.dark && theme.darkColors) { warnings = warnings.concat(getColorsWarnings(locale, theme.darkColors, 'dark', readableOptions)) }
313
+ if (theme.hc && theme.hcColors) { warnings = warnings.concat(getColorsWarnings(locale, theme.hcColors, 'hc', hcReadableOptions)) }
314
+ if (theme.hcDark && theme.hcDarkColors) { warnings = warnings.concat(getColorsWarnings(locale, theme.hcDarkColors, 'hcDark', hcReadableOptions)) }
315
+ if (authProviders) {
316
+ for (const p of authProviders) {
317
+ if (p.color && p.title) {
318
+ if (!tinycolor.isReadable('#FFFFFF', p.color, readableOptions)) {
319
+ warnings.push(getMessage(locale, 'colors.readableWarning', { colorCode: '#FFFFFF', colorName: getMessage(locale, 'colors.white'), bgColorCode: p.color, bgColorName: getMessage(locale, 'colors.authProvider', { title: p.title }) }))
320
+ }
321
+ }
322
+ }
323
+ }
324
+ return warnings.filter(w => w !== undefined)
325
+ }
package/theme/schema.d.ts CHANGED
@@ -4,69 +4,72 @@ declare const _default: {
4
4
  type: string;
5
5
  title: string;
6
6
  required: string[];
7
- layout: (string | {
8
- key: string;
9
- if: string;
10
- cols?: undefined;
11
- comp?: undefined;
12
- children?: undefined;
13
- } | {
14
- key: string;
15
- cols: number;
16
- if: string;
17
- comp?: undefined;
18
- children?: undefined;
19
- } | {
20
- comp: string;
21
- if: string;
22
- children: ({
23
- title: string;
24
- children: ({
25
- key: string;
26
- cols: {
27
- sm: number;
28
- lg: number;
29
- };
30
- name?: undefined;
31
- props?: undefined;
32
- } | {
33
- name: string;
34
- cols: {
35
- sm: number;
36
- lg: number;
37
- };
38
- props: {
39
- colorsKey: string;
40
- dark: boolean;
41
- };
42
- key?: undefined;
43
- })[];
7
+ layout: {
8
+ title: string;
9
+ children: (string | {
10
+ key: string;
11
+ if: string;
12
+ cols?: undefined;
13
+ comp?: undefined;
14
+ children?: undefined;
44
15
  } | {
45
- title: string;
16
+ key: string;
17
+ cols: number;
18
+ if: string;
19
+ comp?: undefined;
20
+ children?: undefined;
21
+ } | {
22
+ comp: string;
23
+ if: string;
46
24
  children: ({
47
- children: string[];
48
- cols: {
49
- sm: number;
50
- lg: number;
51
- };
52
- name?: undefined;
53
- props?: undefined;
25
+ title: string;
26
+ children: ({
27
+ key: string;
28
+ cols: {
29
+ sm: number;
30
+ lg: number;
31
+ };
32
+ name?: undefined;
33
+ props?: undefined;
34
+ } | {
35
+ name: string;
36
+ cols: {
37
+ sm: number;
38
+ lg: number;
39
+ };
40
+ props: {
41
+ colorsKey: string;
42
+ dark: boolean;
43
+ };
44
+ key?: undefined;
45
+ })[];
54
46
  } | {
55
- name: string;
56
- cols: {
57
- sm: number;
58
- lg: number;
59
- };
60
- props: {
61
- colorsKey: string;
62
- dark: boolean;
63
- };
64
- children?: undefined;
47
+ title: string;
48
+ children: ({
49
+ children: string[];
50
+ cols: {
51
+ sm: number;
52
+ lg: number;
53
+ };
54
+ name?: undefined;
55
+ props?: undefined;
56
+ } | {
57
+ name: string;
58
+ cols: {
59
+ sm: number;
60
+ lg: number;
61
+ };
62
+ props: {
63
+ colorsKey: string;
64
+ dark: boolean;
65
+ };
66
+ children?: undefined;
67
+ })[];
65
68
  })[];
69
+ key?: undefined;
70
+ cols?: undefined;
66
71
  })[];
67
- key?: undefined;
68
- cols?: undefined;
69
- })[];
72
+ };
70
73
  properties: {
71
74
  logo: {
72
75
  title: string;
@@ -104,7 +107,10 @@ declare const _default: {
104
107
  title: string;
105
108
  layout: {
106
109
  comp: string;
107
- cols: number;
110
+ cols: {
111
+ sm: number;
112
+ lg: number;
113
+ };
108
114
  };
109
115
  };
110
116
  secondary: {
@@ -112,7 +118,10 @@ declare const _default: {
112
118
  title: string;
113
119
  layout: {
114
120
  comp: string;
115
- cols: number;
121
+ cols: {
122
+ sm: number;
123
+ lg: number;
124
+ };
116
125
  };
117
126
  };
118
127
  accent: {
@@ -120,7 +129,10 @@ declare const _default: {
120
129
  title: string;
121
130
  layout: {
122
131
  comp: string;
123
- cols: number;
132
+ cols: {
133
+ sm: number;
134
+ lg: number;
135
+ };
124
136
  };
125
137
  };
126
138
  };
@@ -161,7 +173,10 @@ declare const _default: {
161
173
  title: string;
162
174
  layout: {
163
175
  comp: string;
164
- cols: number;
176
+ cols: {
177
+ sm: number;
178
+ lg: number;
179
+ };
165
180
  };
166
181
  };
167
182
  'on-background': {
@@ -169,7 +184,10 @@ declare const _default: {
169
184
  title: string;
170
185
  layout: {
171
186
  comp: string;
172
- cols: number;
187
+ cols: {
188
+ sm: number;
189
+ lg: number;
190
+ };
173
191
  };
174
192
  };
175
193
  surface: {
@@ -177,7 +195,10 @@ declare const _default: {
177
195
  title: string;
178
196
  layout: {
179
197
  comp: string;
180
- cols: number;
198
+ cols: {
199
+ sm: number;
200
+ lg: number;
201
+ };
181
202
  };
182
203
  };
183
204
  'on-surface': {
@@ -185,7 +206,10 @@ declare const _default: {
185
206
  title: string;
186
207
  layout: {
187
208
  comp: string;
188
- cols: number;
209
+ cols: {
210
+ sm: number;
211
+ lg: number;
212
+ };
189
213
  };
190
214
  };
191
215
  primary: {
@@ -193,7 +217,10 @@ declare const _default: {
193
217
  title: string;
194
218
  layout: {
195
219
  comp: string;
196
- cols: number;
220
+ cols: {
221
+ sm: number;
222
+ lg: number;
223
+ };
197
224
  };
198
225
  };
199
226
  'on-primary': {
@@ -201,7 +228,10 @@ declare const _default: {
201
228
  title: string;
202
229
  layout: {
203
230
  comp: string;
204
- cols: number;
231
+ cols: {
232
+ sm: number;
233
+ lg: number;
234
+ };
205
235
  };
206
236
  };
207
237
  'text-primary': {
@@ -209,7 +239,10 @@ declare const _default: {
209
239
  title: string;
210
240
  layout: {
211
241
  comp: string;
212
- cols: number;
242
+ cols: {
243
+ sm: number;
244
+ lg: number;
245
+ };
213
246
  hint: string;
214
247
  };
215
248
  };
@@ -218,7 +251,10 @@ declare const _default: {
218
251
  title: string;
219
252
  layout: {
220
253
  comp: string;
221
- cols: number;
254
+ cols: {
255
+ sm: number;
256
+ lg: number;
257
+ };
222
258
  };
223
259
  };
224
260
  'on-secondary': {
@@ -226,7 +262,10 @@ declare const _default: {
226
262
  title: string;
227
263
  layout: {
228
264
  comp: string;
229
- cols: number;
265
+ cols: {
266
+ sm: number;
267
+ lg: number;
268
+ };
230
269
  };
231
270
  };
232
271
  'text-secondary': {
@@ -234,7 +273,10 @@ declare const _default: {
234
273
  title: string;
235
274
  layout: {
236
275
  comp: string;
237
- cols: number;
276
+ cols: {
277
+ sm: number;
278
+ lg: number;
279
+ };
238
280
  hint: string;
239
281
  };
240
282
  };
@@ -243,7 +285,10 @@ declare const _default: {
243
285
  title: string;
244
286
  layout: {
245
287
  comp: string;
246
- cols: number;
288
+ cols: {
289
+ sm: number;
290
+ lg: number;
291
+ };
247
292
  };
248
293
  };
249
294
  'on-accent': {
@@ -251,7 +296,10 @@ declare const _default: {
251
296
  title: string;
252
297
  layout: {
253
298
  comp: string;
254
- cols: number;
299
+ cols: {
300
+ sm: number;
301
+ lg: number;
302
+ };
255
303
  };
256
304
  };
257
305
  'text-accent': {
@@ -259,7 +307,10 @@ declare const _default: {
259
307
  title: string;
260
308
  layout: {
261
309
  comp: string;
262
- cols: number;
310
+ cols: {
311
+ sm: number;
312
+ lg: number;
313
+ };
263
314
  hint: string;
264
315
  };
265
316
  };
@@ -268,7 +319,10 @@ declare const _default: {
268
319
  title: string;
269
320
  layout: {
270
321
  comp: string;
271
- cols: number;
322
+ cols: {
323
+ sm: number;
324
+ lg: number;
325
+ };
272
326
  };
273
327
  };
274
328
  'on-info': {
@@ -276,7 +330,10 @@ declare const _default: {
276
330
  title: string;
277
331
  layout: {
278
332
  comp: string;
279
- cols: number;
333
+ cols: {
334
+ sm: number;
335
+ lg: number;
336
+ };
280
337
  };
281
338
  };
282
339
  'text-info': {
@@ -284,7 +341,10 @@ declare const _default: {
284
341
  title: string;
285
342
  layout: {
286
343
  comp: string;
287
- cols: number;
344
+ cols: {
345
+ sm: number;
346
+ lg: number;
347
+ };
288
348
  hint: string;
289
349
  };
290
350
  };
@@ -293,7 +353,10 @@ declare const _default: {
293
353
  title: string;
294
354
  layout: {
295
355
  comp: string;
296
- cols: number;
356
+ cols: {
357
+ sm: number;
358
+ lg: number;
359
+ };
297
360
  };
298
361
  };
299
362
  'on-success': {
@@ -301,7 +364,10 @@ declare const _default: {
301
364
  title: string;
302
365
  layout: {
303
366
  comp: string;
304
- cols: number;
367
+ cols: {
368
+ sm: number;
369
+ lg: number;
370
+ };
305
371
  };
306
372
  };
307
373
  'text-success': {
@@ -309,7 +375,10 @@ declare const _default: {
309
375
  title: string;
310
376
  layout: {
311
377
  comp: string;
312
- cols: number;
378
+ cols: {
379
+ sm: number;
380
+ lg: number;
381
+ };
313
382
  hint: string;
314
383
  };
315
384
  };
@@ -318,7 +387,10 @@ declare const _default: {
318
387
  title: string;
319
388
  layout: {
320
389
  comp: string;
321
- cols: number;
390
+ cols: {
391
+ sm: number;
392
+ lg: number;
393
+ };
322
394
  };
323
395
  };
324
396
  'on-error': {
@@ -326,7 +398,10 @@ declare const _default: {
326
398
  title: string;
327
399
  layout: {
328
400
  comp: string;
329
- cols: number;
401
+ cols: {
402
+ sm: number;
403
+ lg: number;
404
+ };
330
405
  };
331
406
  };
332
407
  'text-error': {
@@ -334,7 +409,10 @@ declare const _default: {
334
409
  title: string;
335
410
  layout: {
336
411
  comp: string;
337
- cols: number;
412
+ cols: {
413
+ sm: number;
414
+ lg: number;
415
+ };
338
416
  hint: string;
339
417
  };
340
418
  };
@@ -343,7 +421,10 @@ declare const _default: {
343
421
  title: string;
344
422
  layout: {
345
423
  comp: string;
346
- cols: number;
424
+ cols: {
425
+ sm: number;
426
+ lg: number;
427
+ };
347
428
  };
348
429
  };
349
430
  'on-warning': {
@@ -351,7 +432,10 @@ declare const _default: {
351
432
  title: string;
352
433
  layout: {
353
434
  comp: string;
354
- cols: number;
435
+ cols: {
436
+ sm: number;
437
+ lg: number;
438
+ };
355
439
  };
356
440
  };
357
441
  'text-warning': {
@@ -359,7 +443,10 @@ declare const _default: {
359
443
  title: string;
360
444
  layout: {
361
445
  comp: string;
362
- cols: number;
446
+ cols: {
447
+ sm: number;
448
+ lg: number;
449
+ };
363
450
  hint: string;
364
451
  };
365
452
  };
package/theme/schema.js CHANGED
@@ -4,70 +4,73 @@ export default {
4
4
  type: 'object',
5
5
  title: 'Thème',
6
6
  required: ['colors'],
7
- layout: [
8
- { key: 'logo', if: '!context.simplifiedTheme' },
9
- { key: 'bodyFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
10
- { key: 'headingFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
11
- 'assistedMode',
12
- {
13
- comp: 'tabs',
14
- if: 'data.assistedMode',
15
- children: [{
16
- title: 'Thème par défaut',
17
- children: [
18
- { key: 'assistedModeColors', cols: { sm: 7, lg: 9 } },
19
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'colors', dark: false } }
20
- ]
21
- }, {
22
- title: 'Thème sombre',
23
- children: [
24
- { key: 'dark', cols: { sm: 7, lg: 9 } },
25
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'darkColors', dark: true } }
26
- ]
27
- }, {
28
- title: 'Thème à fort contraste',
29
- children: [
30
- { key: 'hc', cols: { sm: 7, lg: 9 } },
31
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcColors', dark: false } }
32
- ]
33
- }, {
34
- title: 'Thème sombre à fort contraste',
35
- children: [
36
- { key: 'hcDark', cols: { sm: 7, lg: 9 } },
37
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcDarkColors', dark: true } }
38
- ]
39
- }]
40
- },
41
- {
42
- comp: 'tabs',
43
- if: '!data.assistedMode',
44
- children: [{
45
- title: 'Thème par défaut',
46
- children: [
47
- { key: 'colors', cols: { sm: 7, lg: 9 } },
48
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'colors', dark: false } }
49
- ]
50
- }, {
51
- title: 'Thème sombre',
52
- children: [
53
- { children: ['dark', 'darkColors'], cols: { sm: 7, lg: 9 } },
54
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'darkColors', dark: true } }
55
- ]
56
- }, {
57
- title: 'Thème à fort contraste',
58
- children: [
59
- { children: ['hc', 'hcColors'], cols: { sm: 7, lg: 9 } },
60
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcColors', dark: false } }
61
- ]
62
- }, {
63
- title: 'Thème sombre à fort contraste',
64
- children: [
65
- { children: ['hcDark', 'hcDarkColors'], cols: { sm: 7, lg: 9 } },
66
- { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcDarkColors', dark: true } }
67
- ]
68
- }]
69
- }
70
- ],
7
+ layout: {
8
+ title: '',
9
+ children: [
10
+ { key: 'logo', if: '!context.simplifiedTheme' },
11
+ { key: 'bodyFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
12
+ { key: 'headingFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
13
+ 'assistedMode',
14
+ {
15
+ comp: 'tabs',
16
+ if: 'data.assistedMode',
17
+ children: [{
18
+ title: 'Thème par défaut',
19
+ children: [
20
+ { key: 'assistedModeColors', cols: { sm: 7, lg: 9 } },
21
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'colors', dark: false } }
22
+ ]
23
+ }, {
24
+ title: 'Thème sombre',
25
+ children: [
26
+ { key: 'dark', cols: { sm: 7, lg: 9 } },
27
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'darkColors', dark: true } }
28
+ ]
29
+ }, {
30
+ title: 'Thème à fort contraste',
31
+ children: [
32
+ { key: 'hc', cols: { sm: 7, lg: 9 } },
33
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcColors', dark: false } }
34
+ ]
35
+ }, {
36
+ title: 'Thème sombre à fort contraste',
37
+ children: [
38
+ { key: 'hcDark', cols: { sm: 7, lg: 9 } },
39
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcDarkColors', dark: true } }
40
+ ]
41
+ }]
42
+ },
43
+ {
44
+ comp: 'tabs',
45
+ if: '!data.assistedMode',
46
+ children: [{
47
+ title: 'Thème par défaut',
48
+ children: [
49
+ { key: 'colors', cols: { sm: 7, lg: 9 } },
50
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'colors', dark: false } }
51
+ ]
52
+ }, {
53
+ title: 'Thème sombre',
54
+ children: [
55
+ { children: ['dark', 'darkColors'], cols: { sm: 7, lg: 9 } },
56
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'darkColors', dark: true } }
57
+ ]
58
+ }, {
59
+ title: 'Thème à fort contraste',
60
+ children: [
61
+ { children: ['hc', 'hcColors'], cols: { sm: 7, lg: 9 } },
62
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcColors', dark: false } }
63
+ ]
64
+ }, {
65
+ title: 'Thème sombre à fort contraste',
66
+ children: [
67
+ { children: ['hcDark', 'hcDarkColors'], cols: { sm: 7, lg: 9 } },
68
+ { name: 'colors-preview', cols: { sm: 5, lg: 3 }, props: { colorsKey: 'hcDarkColors', dark: true } }
69
+ ]
70
+ }]
71
+ }
72
+ ]
73
+ },
71
74
  properties: {
72
75
  logo: {
73
76
  title: "URL d'un logo",
@@ -105,7 +108,7 @@ export default {
105
108
  title: 'Couleur principale',
106
109
  layout: {
107
110
  comp: 'color-picker',
108
- cols: 4
111
+ cols: { sm: 12, lg: 4 }
109
112
  }
110
113
  },
111
114
  secondary: {
@@ -113,7 +116,7 @@ export default {
113
116
  title: 'Couleur secondaire',
114
117
  layout: {
115
118
  comp: 'color-picker',
116
- cols: 4
119
+ cols: { sm: 12, lg: 4 }
117
120
  }
118
121
  },
119
122
  accent: {
@@ -121,7 +124,7 @@ export default {
121
124
  title: 'Couleur accentuée',
122
125
  layout: {
123
126
  comp: 'color-picker',
124
- cols: 4
127
+ cols: { sm: 12, lg: 4 }
125
128
  }
126
129
  }
127
130
  }
@@ -166,7 +169,7 @@ export default {
166
169
  title: 'Couleur de fond',
167
170
  layout: {
168
171
  comp: 'color-picker',
169
- cols: 3
172
+ cols: { sm: 6, lg: 3 }
170
173
  }
171
174
  },
172
175
  'on-background': {
@@ -174,7 +177,7 @@ export default {
174
177
  title: 'Couleur de texte sur couleur de fond',
175
178
  layout: {
176
179
  comp: 'color-picker',
177
- cols: 3
180
+ cols: { sm: 6, lg: 3 }
178
181
  }
179
182
  },
180
183
  surface: {
@@ -182,7 +185,7 @@ export default {
182
185
  title: 'Couleur des surfaces (vignettes, listes, etc)',
183
186
  layout: {
184
187
  comp: 'color-picker',
185
- cols: 3
188
+ cols: { sm: 6, lg: 3 }
186
189
  }
187
190
  },
188
191
  'on-surface': {
@@ -190,7 +193,7 @@ export default {
190
193
  title: 'Couleur de texte sur couleur des surfaces',
191
194
  layout: {
192
195
  comp: 'color-picker',
193
- cols: 3
196
+ cols: { sm: 6, lg: 3 }
194
197
  }
195
198
  },
196
199
  primary: {
@@ -198,7 +201,7 @@ export default {
198
201
  title: 'Couleur principale',
199
202
  layout: {
200
203
  comp: 'color-picker',
201
- cols: 4
204
+ cols: { sm: 12, lg: 4 }
202
205
  }
203
206
  },
204
207
  'on-primary': {
@@ -206,7 +209,7 @@ export default {
206
209
  title: 'Couleur de texte sur couleur principale',
207
210
  layout: {
208
211
  comp: 'color-picker',
209
- cols: 4
212
+ cols: { sm: 6, lg: 4 }
210
213
  }
211
214
  },
212
215
  'text-primary': {
@@ -214,7 +217,7 @@ export default {
214
217
  title: 'Couleur de texte principal',
215
218
  layout: {
216
219
  comp: 'color-picker',
217
- cols: 4,
220
+ cols: { sm: 6, lg: 4 },
218
221
  hint: 'laissez vide pour utiliser la couleur principale'
219
222
  }
220
223
  },
@@ -223,7 +226,7 @@ export default {
223
226
  title: 'Couleur secondaire',
224
227
  layout: {
225
228
  comp: 'color-picker',
226
- cols: 4
229
+ cols: { sm: 12, lg: 4 }
227
230
  }
228
231
  },
229
232
  'on-secondary': {
@@ -231,7 +234,7 @@ export default {
231
234
  title: 'Couleur de texte sur couleur secondaire',
232
235
  layout: {
233
236
  comp: 'color-picker',
234
- cols: 4
237
+ cols: { sm: 6, lg: 4 }
235
238
  }
236
239
  },
237
240
  'text-secondary': {
@@ -239,7 +242,7 @@ export default {
239
242
  title: 'Couleur de texte secondaire',
240
243
  layout: {
241
244
  comp: 'color-picker',
242
- cols: 4,
245
+ cols: { sm: 6, lg: 4 },
243
246
  hint: 'laissez vide pour utiliser la couleur secondaire'
244
247
  }
245
248
  },
@@ -248,7 +251,7 @@ export default {
248
251
  title: 'Couleur accentuée',
249
252
  layout: {
250
253
  comp: 'color-picker',
251
- cols: 4
254
+ cols: { sm: 12, lg: 4 }
252
255
  }
253
256
  },
254
257
  'on-accent': {
@@ -256,7 +259,7 @@ export default {
256
259
  title: 'Couleur de texte sur couleur accentuée',
257
260
  layout: {
258
261
  comp: 'color-picker',
259
- cols: 4
262
+ cols: { sm: 6, lg: 4 }
260
263
  }
261
264
  },
262
265
  'text-accent': {
@@ -264,7 +267,7 @@ export default {
264
267
  title: 'Couleur de texte accentué',
265
268
  layout: {
266
269
  comp: 'color-picker',
267
- cols: 4,
270
+ cols: { sm: 6, lg: 4 },
268
271
  hint: 'laissez vide pour utiliser la couleur accentuée'
269
272
  }
270
273
  },
@@ -273,7 +276,7 @@ export default {
273
276
  title: 'Couleur info',
274
277
  layout: {
275
278
  comp: 'color-picker',
276
- cols: 4
279
+ cols: { sm: 12, lg: 4 }
277
280
  }
278
281
  },
279
282
  'on-info': {
@@ -281,7 +284,7 @@ export default {
281
284
  title: 'Couleur de texte sur couleur info',
282
285
  layout: {
283
286
  comp: 'color-picker',
284
- cols: 4
287
+ cols: { sm: 6, lg: 4 }
285
288
  }
286
289
  },
287
290
  'text-info': {
@@ -289,7 +292,7 @@ export default {
289
292
  title: 'Couleur de texte info',
290
293
  layout: {
291
294
  comp: 'color-picker',
292
- cols: 4,
295
+ cols: { sm: 6, lg: 4 },
293
296
  hint: 'laissez vide pour utiliser la couleur info'
294
297
  }
295
298
  },
@@ -298,7 +301,7 @@ export default {
298
301
  title: 'Couleur succès',
299
302
  layout: {
300
303
  comp: 'color-picker',
301
- cols: 4
304
+ cols: { sm: 12, lg: 4 }
302
305
  }
303
306
  },
304
307
  'on-success': {
@@ -306,7 +309,7 @@ export default {
306
309
  title: 'Couleur succès',
307
310
  layout: {
308
311
  comp: 'color-picker',
309
- cols: 4
312
+ cols: { sm: 6, lg: 4 }
310
313
  }
311
314
  },
312
315
  'text-success': {
@@ -314,7 +317,7 @@ export default {
314
317
  title: 'Couleur de texte succès',
315
318
  layout: {
316
319
  comp: 'color-picker',
317
- cols: 4,
320
+ cols: { sm: 6, lg: 4 },
318
321
  hint: 'laissez vide pour utiliser la couleur succès'
319
322
  }
320
323
  },
@@ -323,7 +326,7 @@ export default {
323
326
  title: 'Couleur erreur',
324
327
  layout: {
325
328
  comp: 'color-picker',
326
- cols: 4
329
+ cols: { sm: 12, lg: 4 }
327
330
  }
328
331
  },
329
332
  'on-error': {
@@ -331,7 +334,7 @@ export default {
331
334
  title: 'Couleur de texte sur couleur erreur',
332
335
  layout: {
333
336
  comp: 'color-picker',
334
- cols: 4
337
+ cols: { sm: 6, lg: 4 }
335
338
  }
336
339
  },
337
340
  'text-error': {
@@ -339,7 +342,7 @@ export default {
339
342
  title: 'Couleur de texte erreur',
340
343
  layout: {
341
344
  comp: 'color-picker',
342
- cols: 4,
345
+ cols: { sm: 6, lg: 4 },
343
346
  hint: 'laissez vide pour utiliser la couleur erreur'
344
347
  }
345
348
  },
@@ -348,7 +351,7 @@ export default {
348
351
  title: 'Couleur avertissement',
349
352
  layout: {
350
353
  comp: 'color-picker',
351
- cols: 4
354
+ cols: { sm: 12, lg: 4 }
352
355
  }
353
356
  },
354
357
  'on-warning': {
@@ -356,7 +359,7 @@ export default {
356
359
  title: 'Couleur de texte sur avertissement',
357
360
  layout: {
358
361
  comp: 'color-picker',
359
- cols: 4
362
+ cols: { sm: 6, lg: 4 }
360
363
  }
361
364
  },
362
365
  'text-warning': {
@@ -364,7 +367,7 @@ export default {
364
367
  title: 'Couleur de texte avertissement',
365
368
  layout: {
366
369
  comp: 'color-picker',
367
- cols: 4,
370
+ cols: { sm: 6, lg: 4 },
368
371
  hint: 'laissez vide pour utiliser la couleur avertissement'
369
372
  }
370
373
  },