@data-fair/lib-common-types 1.14.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 +10 -1
  2. package/theme/index.d.ts +13 -0
  3. package/theme/index.js +194 -0
  4. package/theme/schema.d.ts +173 -80
  5. package/theme/schema.js +95 -92
package/package.json CHANGED
@@ -1,13 +1,22 @@
1
1
  {
2
2
  "name": "@data-fair/lib-common-types",
3
- "version": "1.14.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": {
7
7
  "prepublishOnly": "cd .. && npm run prepublishOnly",
8
8
  "build": "cd .. && npm run build"
9
9
  },
10
+ "peerDependencies": {
11
+ "tinycolor2": "1"
12
+ },
13
+ "peerDependenciesMeta": {
14
+ "tinycolor2": {
15
+ "optional": true
16
+ }
17
+ },
10
18
  "dependencies": {
19
+ "@data-fair/lib-utils": "^1.6.1",
11
20
  "@data-fair/lib-validation": "^1.0.0",
12
21
  "ajv-formats": "3.0.1"
13
22
  },
package/theme/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { type Colors, type Theme } from './.type/index.js';
2
+ import tinycolor from 'tinycolor2';
1
3
  export * from './.type/index.js';
2
4
  export declare const defaultTheme: {
3
5
  logo: undefined;
@@ -127,3 +129,14 @@ export declare const defaultTheme: {
127
129
  'text-admin': string;
128
130
  };
129
131
  };
132
+ export declare const getTextColorsCss: (colors: Colors, theme: string) => string;
133
+ export declare const getReadableColor: (baseColor: string, bgColors: string[], darkMode: boolean, level: "AA" | "AAA") => string;
134
+ export declare const getOnColor: (color: string) => string;
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,3 +1,6 @@
1
+ import clone from '@data-fair/lib-utils/clone.js'
2
+ import microTemplate from '@data-fair/lib-utils/micro-template.js'
3
+ import tinycolor from 'tinycolor2'
1
4
  export * from './.type/index.js'
2
5
  export const defaultTheme = {
3
6
  logo: undefined,
@@ -129,3 +132,194 @@ export const defaultTheme = {
129
132
  'text-admin': '#FFCDD2'
130
133
  },
131
134
  }
135
+ export const getTextColorsCss = (colors, theme) => {
136
+ let css = ''
137
+ for (const color of ['primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning', 'admin']) {
138
+ const key = `text-${color}`
139
+ if (colors[key]) {
140
+ css += `
141
+ .v-theme--${theme} .text-${color}:not(.v-btn--disabled) { color: ${colors[key]}!important; }`
142
+ }
143
+ }
144
+ return css
145
+ }
146
+ export const getReadableColor = (baseColor, bgColors, darkMode, level) => {
147
+ const c = tinycolor(baseColor)
148
+ while (!bgColors.every(bgColor => tinycolor.isReadable(c, bgColor, { level, size: 'small' }))) {
149
+ if (darkMode) {
150
+ if (c.getBrightness() === 255) { break }
151
+ c.brighten(1)
152
+ } else {
153
+ if (c.getBrightness() === 0) { break }
154
+ c.darken(1)
155
+ }
156
+ }
157
+ return c.toHexString()
158
+ }
159
+ export const getOnColor = (color) => {
160
+ // priority to white text if it is readable
161
+ if (tinycolor.isReadable(color, '#FFFFFF', { level: 'AA', size: 'small' })) { return '#FFFFFF' }
162
+ return tinycolor.mostReadable(color, ['#000000', '#FFFFFF']).toHexString()
163
+ }
164
+ export const fillTheme = (theme, defaultTheme) => {
165
+ const fullTheme = clone(theme)
166
+ if (fullTheme.assistedMode && fullTheme.assistedModeColors) {
167
+ if (!defaultTheme.darkColors) { throw new Error('darkColors is missing in default theme') }
168
+ if (!defaultTheme.hcColors) { throw new Error('hcColors is missing in default theme') }
169
+ if (!defaultTheme.hcDarkColors) { throw new Error('hcDarkColors is missing in default theme') }
170
+ fullTheme.assistedModeColors.primary = fullTheme.assistedModeColors.primary ?? fullTheme.colors.primary
171
+ fullTheme.assistedModeColors.secondary = fullTheme.assistedModeColors.secondary ?? fullTheme.colors.secondary
172
+ fullTheme.assistedModeColors.accent = fullTheme.assistedModeColors.accent ?? fullTheme.colors.accent
173
+ fullTheme.colors = clone(defaultTheme.colors)
174
+ fullTheme.darkColors = clone(defaultTheme.darkColors)
175
+ fullTheme.hcColors = clone(defaultTheme.hcColors)
176
+ fullTheme.hcDarkColors = clone(defaultTheme.hcDarkColors)
177
+ const customColors = {
178
+ primary: fullTheme.assistedModeColors.primary,
179
+ secondary: fullTheme.assistedModeColors.secondary,
180
+ accent: fullTheme.assistedModeColors.accent,
181
+ 'on-primary': getOnColor(fullTheme.assistedModeColors.primary),
182
+ 'on-secondary': getOnColor(fullTheme.assistedModeColors.secondary),
183
+ 'on-accent': getOnColor(fullTheme.assistedModeColors.accent)
184
+ }
185
+ Object.assign(fullTheme.colors, customColors)
186
+ Object.assign(fullTheme.darkColors, customColors)
187
+ Object.assign(fullTheme.hcColors, customColors)
188
+ Object.assign(fullTheme.hcDarkColors, customColors)
189
+ fullTheme.colors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
190
+ fullTheme.colors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
191
+ fullTheme.colors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
192
+ fullTheme.darkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
193
+ fullTheme.darkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
194
+ fullTheme.darkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
195
+ fullTheme.hcColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
196
+ fullTheme.hcColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
197
+ fullTheme.hcColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
198
+ fullTheme.hcDarkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
199
+ fullTheme.hcDarkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
200
+ fullTheme.hcDarkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
201
+ } else {
202
+ fullTheme.assistedModeColors = {
203
+ primary: fullTheme.colors.primary,
204
+ secondary: fullTheme.colors.secondary,
205
+ accent: fullTheme.colors.accent,
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
+ }
227
+ return fullTheme
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,63 +4,72 @@ declare const _default: {
4
4
  type: string;
5
5
  title: string;
6
6
  required: string[];
7
- layout: (string | {
8
- key: string;
9
- cols: number;
10
- comp?: undefined;
11
- if?: undefined;
12
- children?: undefined;
13
- } | {
14
- comp: string;
15
- if: string;
16
- children: ({
17
- title: string;
18
- children: ({
19
- key: string;
20
- cols: {
21
- sm: number;
22
- lg: number;
23
- };
24
- name?: undefined;
25
- props?: undefined;
26
- } | {
27
- name: string;
28
- cols: {
29
- sm: number;
30
- lg: number;
31
- };
32
- props: {
33
- colorsKey: string;
34
- dark: boolean;
35
- };
36
- key?: undefined;
37
- })[];
7
+ layout: {
8
+ title: string;
9
+ children: (string | {
10
+ key: string;
11
+ if: string;
12
+ cols?: undefined;
13
+ comp?: undefined;
14
+ children?: undefined;
38
15
  } | {
39
- title: string;
16
+ key: string;
17
+ cols: number;
18
+ if: string;
19
+ comp?: undefined;
20
+ children?: undefined;
21
+ } | {
22
+ comp: string;
23
+ if: string;
40
24
  children: ({
41
- children: string[];
42
- cols: {
43
- sm: number;
44
- lg: number;
45
- };
46
- name?: undefined;
47
- 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
+ })[];
48
46
  } | {
49
- name: string;
50
- cols: {
51
- sm: number;
52
- lg: number;
53
- };
54
- props: {
55
- colorsKey: string;
56
- dark: boolean;
57
- };
58
- 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
+ })[];
59
68
  })[];
69
+ key?: undefined;
70
+ cols?: undefined;
60
71
  })[];
61
- key?: undefined;
62
- cols?: undefined;
63
- })[];
72
+ };
64
73
  properties: {
65
74
  logo: {
66
75
  title: string;
@@ -98,7 +107,10 @@ declare const _default: {
98
107
  title: string;
99
108
  layout: {
100
109
  comp: string;
101
- cols: number;
110
+ cols: {
111
+ sm: number;
112
+ lg: number;
113
+ };
102
114
  };
103
115
  };
104
116
  secondary: {
@@ -106,7 +118,10 @@ declare const _default: {
106
118
  title: string;
107
119
  layout: {
108
120
  comp: string;
109
- cols: number;
121
+ cols: {
122
+ sm: number;
123
+ lg: number;
124
+ };
110
125
  };
111
126
  };
112
127
  accent: {
@@ -114,7 +129,10 @@ declare const _default: {
114
129
  title: string;
115
130
  layout: {
116
131
  comp: string;
117
- cols: number;
132
+ cols: {
133
+ sm: number;
134
+ lg: number;
135
+ };
118
136
  };
119
137
  };
120
138
  };
@@ -155,7 +173,10 @@ declare const _default: {
155
173
  title: string;
156
174
  layout: {
157
175
  comp: string;
158
- cols: number;
176
+ cols: {
177
+ sm: number;
178
+ lg: number;
179
+ };
159
180
  };
160
181
  };
161
182
  'on-background': {
@@ -163,7 +184,10 @@ declare const _default: {
163
184
  title: string;
164
185
  layout: {
165
186
  comp: string;
166
- cols: number;
187
+ cols: {
188
+ sm: number;
189
+ lg: number;
190
+ };
167
191
  };
168
192
  };
169
193
  surface: {
@@ -171,7 +195,10 @@ declare const _default: {
171
195
  title: string;
172
196
  layout: {
173
197
  comp: string;
174
- cols: number;
198
+ cols: {
199
+ sm: number;
200
+ lg: number;
201
+ };
175
202
  };
176
203
  };
177
204
  'on-surface': {
@@ -179,7 +206,10 @@ declare const _default: {
179
206
  title: string;
180
207
  layout: {
181
208
  comp: string;
182
- cols: number;
209
+ cols: {
210
+ sm: number;
211
+ lg: number;
212
+ };
183
213
  };
184
214
  };
185
215
  primary: {
@@ -187,7 +217,10 @@ declare const _default: {
187
217
  title: string;
188
218
  layout: {
189
219
  comp: string;
190
- cols: number;
220
+ cols: {
221
+ sm: number;
222
+ lg: number;
223
+ };
191
224
  };
192
225
  };
193
226
  'on-primary': {
@@ -195,7 +228,10 @@ declare const _default: {
195
228
  title: string;
196
229
  layout: {
197
230
  comp: string;
198
- cols: number;
231
+ cols: {
232
+ sm: number;
233
+ lg: number;
234
+ };
199
235
  };
200
236
  };
201
237
  'text-primary': {
@@ -203,7 +239,10 @@ declare const _default: {
203
239
  title: string;
204
240
  layout: {
205
241
  comp: string;
206
- cols: number;
242
+ cols: {
243
+ sm: number;
244
+ lg: number;
245
+ };
207
246
  hint: string;
208
247
  };
209
248
  };
@@ -212,7 +251,10 @@ declare const _default: {
212
251
  title: string;
213
252
  layout: {
214
253
  comp: string;
215
- cols: number;
254
+ cols: {
255
+ sm: number;
256
+ lg: number;
257
+ };
216
258
  };
217
259
  };
218
260
  'on-secondary': {
@@ -220,7 +262,10 @@ declare const _default: {
220
262
  title: string;
221
263
  layout: {
222
264
  comp: string;
223
- cols: number;
265
+ cols: {
266
+ sm: number;
267
+ lg: number;
268
+ };
224
269
  };
225
270
  };
226
271
  'text-secondary': {
@@ -228,7 +273,10 @@ declare const _default: {
228
273
  title: string;
229
274
  layout: {
230
275
  comp: string;
231
- cols: number;
276
+ cols: {
277
+ sm: number;
278
+ lg: number;
279
+ };
232
280
  hint: string;
233
281
  };
234
282
  };
@@ -237,7 +285,10 @@ declare const _default: {
237
285
  title: string;
238
286
  layout: {
239
287
  comp: string;
240
- cols: number;
288
+ cols: {
289
+ sm: number;
290
+ lg: number;
291
+ };
241
292
  };
242
293
  };
243
294
  'on-accent': {
@@ -245,7 +296,10 @@ declare const _default: {
245
296
  title: string;
246
297
  layout: {
247
298
  comp: string;
248
- cols: number;
299
+ cols: {
300
+ sm: number;
301
+ lg: number;
302
+ };
249
303
  };
250
304
  };
251
305
  'text-accent': {
@@ -253,7 +307,10 @@ declare const _default: {
253
307
  title: string;
254
308
  layout: {
255
309
  comp: string;
256
- cols: number;
310
+ cols: {
311
+ sm: number;
312
+ lg: number;
313
+ };
257
314
  hint: string;
258
315
  };
259
316
  };
@@ -262,7 +319,10 @@ declare const _default: {
262
319
  title: string;
263
320
  layout: {
264
321
  comp: string;
265
- cols: number;
322
+ cols: {
323
+ sm: number;
324
+ lg: number;
325
+ };
266
326
  };
267
327
  };
268
328
  'on-info': {
@@ -270,7 +330,10 @@ declare const _default: {
270
330
  title: string;
271
331
  layout: {
272
332
  comp: string;
273
- cols: number;
333
+ cols: {
334
+ sm: number;
335
+ lg: number;
336
+ };
274
337
  };
275
338
  };
276
339
  'text-info': {
@@ -278,7 +341,10 @@ declare const _default: {
278
341
  title: string;
279
342
  layout: {
280
343
  comp: string;
281
- cols: number;
344
+ cols: {
345
+ sm: number;
346
+ lg: number;
347
+ };
282
348
  hint: string;
283
349
  };
284
350
  };
@@ -287,7 +353,10 @@ declare const _default: {
287
353
  title: string;
288
354
  layout: {
289
355
  comp: string;
290
- cols: number;
356
+ cols: {
357
+ sm: number;
358
+ lg: number;
359
+ };
291
360
  };
292
361
  };
293
362
  'on-success': {
@@ -295,7 +364,10 @@ declare const _default: {
295
364
  title: string;
296
365
  layout: {
297
366
  comp: string;
298
- cols: number;
367
+ cols: {
368
+ sm: number;
369
+ lg: number;
370
+ };
299
371
  };
300
372
  };
301
373
  'text-success': {
@@ -303,7 +375,10 @@ declare const _default: {
303
375
  title: string;
304
376
  layout: {
305
377
  comp: string;
306
- cols: number;
378
+ cols: {
379
+ sm: number;
380
+ lg: number;
381
+ };
307
382
  hint: string;
308
383
  };
309
384
  };
@@ -312,7 +387,10 @@ declare const _default: {
312
387
  title: string;
313
388
  layout: {
314
389
  comp: string;
315
- cols: number;
390
+ cols: {
391
+ sm: number;
392
+ lg: number;
393
+ };
316
394
  };
317
395
  };
318
396
  'on-error': {
@@ -320,7 +398,10 @@ declare const _default: {
320
398
  title: string;
321
399
  layout: {
322
400
  comp: string;
323
- cols: number;
401
+ cols: {
402
+ sm: number;
403
+ lg: number;
404
+ };
324
405
  };
325
406
  };
326
407
  'text-error': {
@@ -328,7 +409,10 @@ declare const _default: {
328
409
  title: string;
329
410
  layout: {
330
411
  comp: string;
331
- cols: number;
412
+ cols: {
413
+ sm: number;
414
+ lg: number;
415
+ };
332
416
  hint: string;
333
417
  };
334
418
  };
@@ -337,7 +421,10 @@ declare const _default: {
337
421
  title: string;
338
422
  layout: {
339
423
  comp: string;
340
- cols: number;
424
+ cols: {
425
+ sm: number;
426
+ lg: number;
427
+ };
341
428
  };
342
429
  };
343
430
  'on-warning': {
@@ -345,7 +432,10 @@ declare const _default: {
345
432
  title: string;
346
433
  layout: {
347
434
  comp: string;
348
- cols: number;
435
+ cols: {
436
+ sm: number;
437
+ lg: number;
438
+ };
349
439
  };
350
440
  };
351
441
  'text-warning': {
@@ -353,7 +443,10 @@ declare const _default: {
353
443
  title: string;
354
444
  layout: {
355
445
  comp: string;
356
- cols: number;
446
+ cols: {
447
+ sm: number;
448
+ lg: number;
449
+ };
357
450
  hint: string;
358
451
  };
359
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
- 'logo',
9
- { key: 'bodyFontFamilyCss', cols: 6 },
10
- { key: 'headingFontFamilyCss', cols: 6 },
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
  },