@data-fair/lib-common-types 1.13.0 → 1.15.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 +9 -1
- package/theme/.type/index.d.ts +104 -0
- package/theme/.type/index.js +7 -0
- package/theme/index.d.ts +134 -0
- package/theme/index.js +208 -0
- package/theme/schema.d.ts +382 -0
- package/theme/schema.js +377 -0
package/package.json
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-fair/lib-common-types",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.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": {
|
|
11
19
|
"@data-fair/lib-validation": "^1.0.0",
|
|
12
20
|
"ajv-formats": "3.0.1"
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
|
|
2
|
+
export const schemaExports: string[]
|
|
3
|
+
|
|
4
|
+
// see https://github.com/bcherny/json-schema-to-typescript/issues/439 if some types are not exported
|
|
5
|
+
export type URLDUnLogo = string;
|
|
6
|
+
/**
|
|
7
|
+
* Par défaut une police Nunito auto-hébergée est utilisée. Vous pouvez aussi copier le CSS proposé par une plateforme comme Google Fonts, dans ce cas il faut remplacer le nom de la police par '{FONT_FAMILY}'.
|
|
8
|
+
*/
|
|
9
|
+
export type CSSPoliceDeCaracteresPourLeCorpsDuTexte = string;
|
|
10
|
+
/**
|
|
11
|
+
* Renseignez de la même manière que pour le corps de texte, ou laissez vide pour utiliser la police du corps du texte
|
|
12
|
+
*/
|
|
13
|
+
export type CSSPoliceDeCaracteresPourLesTitres = string;
|
|
14
|
+
/**
|
|
15
|
+
* Si activé vous ne devrez saisir que les couleurs principales du thème, d'autres couleurs seront affectées par défaut et les couleurs de texte seront automatiquement ajustées pour être lisibles sur les couleurs de fond.
|
|
16
|
+
*/
|
|
17
|
+
export type ModeDeGestionDesCouleursSimplifie = boolean;
|
|
18
|
+
export type CouleurPrincipale = string;
|
|
19
|
+
export type CouleurSecondaire = string;
|
|
20
|
+
export type CouleurAccentuee = string;
|
|
21
|
+
export type CouleurDeFond = string;
|
|
22
|
+
export type CouleurDeTexteSurCouleurDeFond = string;
|
|
23
|
+
export type CouleurDesSurfacesVignettesListesEtc = string;
|
|
24
|
+
export type CouleurDeTexteSurCouleurDesSurfaces = string;
|
|
25
|
+
export type CouleurPrincipale1 = string;
|
|
26
|
+
export type CouleurDeTexteSurCouleurPrincipale = string;
|
|
27
|
+
export type CouleurDeTextePrincipal = string;
|
|
28
|
+
export type CouleurSecondaire1 = string;
|
|
29
|
+
export type CouleurDeTexteSurCouleurSecondaire = string;
|
|
30
|
+
export type CouleurDeTexteSecondaire = string;
|
|
31
|
+
export type CouleurAccentuee1 = string;
|
|
32
|
+
export type CouleurDeTexteSurCouleurAccentuee = string;
|
|
33
|
+
export type CouleurDeTexteAccentue = string;
|
|
34
|
+
export type CouleurInfo = string;
|
|
35
|
+
export type CouleurDeTexteSurCouleurInfo = string;
|
|
36
|
+
export type CouleurDeTexteInfo = string;
|
|
37
|
+
export type CouleurSucces = string;
|
|
38
|
+
export type CouleurSucces1 = string;
|
|
39
|
+
export type CouleurDeTexteSucces = string;
|
|
40
|
+
export type CouleurErreur = string;
|
|
41
|
+
export type CouleurDeTexteSurCouleurErreur = string;
|
|
42
|
+
export type CouleurDeTexteErreur = string;
|
|
43
|
+
export type CouleurAvertissement = string;
|
|
44
|
+
export type CouleurDeTexteSurAvertissement = string;
|
|
45
|
+
export type CouleurDeTexteAvertissement = string;
|
|
46
|
+
export type ProposerCeThemeAuxUtilisateurs = boolean;
|
|
47
|
+
export type ProposerCeThemeAuxUtilisateurs1 = boolean;
|
|
48
|
+
export type ProposerCeThemeAuxUtilisateurs2 = boolean;
|
|
49
|
+
|
|
50
|
+
export type Theme = {
|
|
51
|
+
logo?: URLDUnLogo;
|
|
52
|
+
bodyFontFamilyCss?: CSSPoliceDeCaracteresPourLeCorpsDuTexte;
|
|
53
|
+
headingFontFamilyCss?: CSSPoliceDeCaracteresPourLesTitres;
|
|
54
|
+
assistedMode?: ModeDeGestionDesCouleursSimplifie;
|
|
55
|
+
assistedModeColors?: {
|
|
56
|
+
primary?: CouleurPrincipale;
|
|
57
|
+
secondary?: CouleurSecondaire;
|
|
58
|
+
accent?: CouleurAccentuee;
|
|
59
|
+
[k: string]: unknown;
|
|
60
|
+
};
|
|
61
|
+
colors: Colors;
|
|
62
|
+
dark?: ProposerCeThemeAuxUtilisateurs;
|
|
63
|
+
darkColors?: Colors;
|
|
64
|
+
hc?: ProposerCeThemeAuxUtilisateurs1;
|
|
65
|
+
hcColors?: Colors;
|
|
66
|
+
hcDark?: ProposerCeThemeAuxUtilisateurs2;
|
|
67
|
+
hcDarkColors?: Colors;
|
|
68
|
+
[k: string]: unknown;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* This interface was referenced by `Theme`'s JSON-Schema
|
|
72
|
+
* via the `definition` "colors".
|
|
73
|
+
*/
|
|
74
|
+
export type Colors = {
|
|
75
|
+
background: CouleurDeFond;
|
|
76
|
+
"on-background": CouleurDeTexteSurCouleurDeFond;
|
|
77
|
+
surface: CouleurDesSurfacesVignettesListesEtc;
|
|
78
|
+
"on-surface": CouleurDeTexteSurCouleurDesSurfaces;
|
|
79
|
+
primary: CouleurPrincipale1;
|
|
80
|
+
"on-primary": CouleurDeTexteSurCouleurPrincipale;
|
|
81
|
+
"text-primary"?: CouleurDeTextePrincipal;
|
|
82
|
+
secondary: CouleurSecondaire1;
|
|
83
|
+
"on-secondary": CouleurDeTexteSurCouleurSecondaire;
|
|
84
|
+
"text-secondary"?: CouleurDeTexteSecondaire;
|
|
85
|
+
accent: CouleurAccentuee1;
|
|
86
|
+
"on-accent": CouleurDeTexteSurCouleurAccentuee;
|
|
87
|
+
"text-accent"?: CouleurDeTexteAccentue;
|
|
88
|
+
info: CouleurInfo;
|
|
89
|
+
"on-info": CouleurDeTexteSurCouleurInfo;
|
|
90
|
+
"text-info"?: CouleurDeTexteInfo;
|
|
91
|
+
success: CouleurSucces;
|
|
92
|
+
"on-success": CouleurSucces1;
|
|
93
|
+
"text-success"?: CouleurDeTexteSucces;
|
|
94
|
+
error: CouleurErreur;
|
|
95
|
+
"on-error": CouleurDeTexteSurCouleurErreur;
|
|
96
|
+
"text-error"?: CouleurDeTexteErreur;
|
|
97
|
+
warning: CouleurAvertissement;
|
|
98
|
+
"on-warning": CouleurDeTexteSurAvertissement;
|
|
99
|
+
"text-warning"?: CouleurDeTexteAvertissement;
|
|
100
|
+
admin: string;
|
|
101
|
+
"on-admin": string;
|
|
102
|
+
"text-admin"?: string;
|
|
103
|
+
}
|
|
104
|
+
|
package/theme/index.d.ts
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { type Colors, type Theme } from './.type/index.js';
|
|
2
|
+
export * from './.type/index.js';
|
|
3
|
+
export declare const defaultTheme: {
|
|
4
|
+
logo: undefined;
|
|
5
|
+
bodyFontFamilyCss: string;
|
|
6
|
+
headingFontFamilyCss: undefined;
|
|
7
|
+
colors: {
|
|
8
|
+
background: string;
|
|
9
|
+
'on-background': string;
|
|
10
|
+
surface: string;
|
|
11
|
+
'on-surface': string;
|
|
12
|
+
primary: string;
|
|
13
|
+
'on-primary': string;
|
|
14
|
+
'text-primary': string;
|
|
15
|
+
secondary: string;
|
|
16
|
+
'on-secondary': string;
|
|
17
|
+
'text-secondary': string;
|
|
18
|
+
accent: string;
|
|
19
|
+
'on-accent': string;
|
|
20
|
+
'text-accent': undefined;
|
|
21
|
+
info: string;
|
|
22
|
+
'on-info': string;
|
|
23
|
+
'text-info': string;
|
|
24
|
+
success: string;
|
|
25
|
+
'on-success': string;
|
|
26
|
+
'text-success': string;
|
|
27
|
+
error: string;
|
|
28
|
+
'on-error': string;
|
|
29
|
+
'text-error': undefined;
|
|
30
|
+
warning: string;
|
|
31
|
+
'on-warning': string;
|
|
32
|
+
'text-warning': undefined;
|
|
33
|
+
admin: string;
|
|
34
|
+
'on-admin': string;
|
|
35
|
+
'text-admin': undefined;
|
|
36
|
+
};
|
|
37
|
+
dark: boolean;
|
|
38
|
+
darkColors: {
|
|
39
|
+
background: string;
|
|
40
|
+
'on-background': string;
|
|
41
|
+
surface: string;
|
|
42
|
+
'on-surface': string;
|
|
43
|
+
primary: string;
|
|
44
|
+
'on-primary': string;
|
|
45
|
+
'text-primary': string;
|
|
46
|
+
secondary: string;
|
|
47
|
+
'on-secondary': string;
|
|
48
|
+
'text-secondary': undefined;
|
|
49
|
+
accent: string;
|
|
50
|
+
'on-accent': string;
|
|
51
|
+
'text-accent': string;
|
|
52
|
+
error: string;
|
|
53
|
+
'on-error': string;
|
|
54
|
+
'text-error': string;
|
|
55
|
+
info: string;
|
|
56
|
+
'on-info': string;
|
|
57
|
+
'text-info': undefined;
|
|
58
|
+
success: string;
|
|
59
|
+
'on-success': string;
|
|
60
|
+
'text-success': undefined;
|
|
61
|
+
warning: string;
|
|
62
|
+
'on-warning': string;
|
|
63
|
+
'text-warning': string;
|
|
64
|
+
admin: string;
|
|
65
|
+
'on-admin': string;
|
|
66
|
+
'text-admin': string;
|
|
67
|
+
};
|
|
68
|
+
hc: boolean;
|
|
69
|
+
hcColors: {
|
|
70
|
+
background: string;
|
|
71
|
+
'on-background': string;
|
|
72
|
+
surface: string;
|
|
73
|
+
'on-surface': string;
|
|
74
|
+
primary: string;
|
|
75
|
+
'on-primary': string;
|
|
76
|
+
'text-primary': undefined;
|
|
77
|
+
secondary: string;
|
|
78
|
+
'on-secondary': string;
|
|
79
|
+
'text-secondary': string;
|
|
80
|
+
accent: string;
|
|
81
|
+
'on-accent': string;
|
|
82
|
+
'text-accent': undefined;
|
|
83
|
+
info: string;
|
|
84
|
+
'on-info': string;
|
|
85
|
+
'text-info': string;
|
|
86
|
+
success: string;
|
|
87
|
+
'on-success': string;
|
|
88
|
+
'text-success': string;
|
|
89
|
+
error: string;
|
|
90
|
+
'on-error': string;
|
|
91
|
+
'text-error': undefined;
|
|
92
|
+
warning: string;
|
|
93
|
+
'on-warning': string;
|
|
94
|
+
'text-warning': undefined;
|
|
95
|
+
admin: string;
|
|
96
|
+
'on-admin': string;
|
|
97
|
+
'text-admin': undefined;
|
|
98
|
+
};
|
|
99
|
+
hcDark: boolean;
|
|
100
|
+
hcDarkColors: {
|
|
101
|
+
background: string;
|
|
102
|
+
'on-background': string;
|
|
103
|
+
surface: string;
|
|
104
|
+
'on-surface': string;
|
|
105
|
+
primary: string;
|
|
106
|
+
'on-primary': string;
|
|
107
|
+
'text-primary': string;
|
|
108
|
+
secondary: string;
|
|
109
|
+
'on-secondary': string;
|
|
110
|
+
'text-secondary': undefined;
|
|
111
|
+
accent: string;
|
|
112
|
+
'on-accent': string;
|
|
113
|
+
'text-accent': string;
|
|
114
|
+
error: string;
|
|
115
|
+
'on-error': string;
|
|
116
|
+
'text-error': string;
|
|
117
|
+
info: string;
|
|
118
|
+
'on-info': string;
|
|
119
|
+
'text-info': undefined;
|
|
120
|
+
success: string;
|
|
121
|
+
'on-success': string;
|
|
122
|
+
'text-success': undefined;
|
|
123
|
+
warning: string;
|
|
124
|
+
'on-warning': string;
|
|
125
|
+
'text-warning': string;
|
|
126
|
+
admin: string;
|
|
127
|
+
'on-admin': string;
|
|
128
|
+
'text-admin': string;
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
export declare const getTextColorsCss: (colors: Colors, theme: string) => string;
|
|
132
|
+
export declare const getReadableColor: (baseColor: string, bgColors: string[], darkMode: boolean, level: "AA" | "AAA") => string;
|
|
133
|
+
export declare const getOnColor: (color: string) => string;
|
|
134
|
+
export declare const fillTheme: (theme: Theme, defaultTheme: Theme) => Required<Pick<Theme, "darkColors" | "hcColors" | "hcDarkColors">> & Theme;
|
package/theme/index.js
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import clone from '@data-fair/lib-utils/clone.js'
|
|
2
|
+
import tinycolor from 'tinycolor2'
|
|
3
|
+
export * from './.type/index.js'
|
|
4
|
+
export const defaultTheme = {
|
|
5
|
+
logo: undefined,
|
|
6
|
+
bodyFontFamilyCss: "@font-face{font-family:{FONT_FAMILY};font-style:italic;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXX3I6Li01BKofIMNaORs71cA-Bm_i0Dk1.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:{FONT_FAMILY};font-style:italic;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXX3I6Li01BKofIMNaHRs71cA-Cznx39fA.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:{FONT_FAMILY};font-style:italic;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXX3I6Li01BKofIMNaMRs71cA-CuWrHpFO.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:{FONT_FAMILY};font-style:italic;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXX3I6Li01BKofIMNaNRs71cA-D1eeM49Z.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:{FONT_FAMILY};font-style:italic;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXX3I6Li01BKofIMNaDRs4-BbMn9XSX.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:{FONT_FAMILY};font-style:normal;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXV3I6Li01BKofIOOaBXso-BWI5zH9R.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:{FONT_FAMILY};font-style:normal;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXV3I6Li01BKofIMeaBXso-C3IBG1kp.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:{FONT_FAMILY};font-style:normal;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXV3I6Li01BKofIOuaBXso-B55YuedR.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:{FONT_FAMILY};font-style:normal;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXV3I6Li01BKofIO-aBXso-DcJfvmGA.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:{FONT_FAMILY};font-style:normal;font-weight:200 1000;font-display:swap;src:url({SITE_PATH}/simple-directory/fonts/XRXV3I6Li01BKofINeaB-BaTF6Vo7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
|
|
7
|
+
headingFontFamilyCss: undefined,
|
|
8
|
+
colors: {
|
|
9
|
+
// standard vuetify colors, see https://vuetifyjs.com/en/styles/colors/#material-colors
|
|
10
|
+
background: '#FAFAFA', // grey-lighten-5
|
|
11
|
+
'on-background': '#424242', // grey-darken-3
|
|
12
|
+
surface: '#FFFFFF',
|
|
13
|
+
'on-surface': '#424242', // grey-darken-3
|
|
14
|
+
primary: '#1976D2', // blue-darken-2
|
|
15
|
+
'on-primary': '#FFFFFF',
|
|
16
|
+
'text-primary': '#1565C0',
|
|
17
|
+
secondary: '#81D4FA', // light-blue-lighten-3
|
|
18
|
+
'on-secondary': '#000000',
|
|
19
|
+
'text-secondary': '#0277BD', // light-blue-darken-3
|
|
20
|
+
accent: '#2962FF', // blue-accent-4
|
|
21
|
+
'on-accent': '#FFFFFF',
|
|
22
|
+
'text-accent': undefined,
|
|
23
|
+
info: '#FFE0B2', // orange-lighten-4
|
|
24
|
+
'on-info': '#000000',
|
|
25
|
+
'text-info': '#BF4300',
|
|
26
|
+
success: '#B9F6CA', // green-accent-1
|
|
27
|
+
'on-success': '#000000',
|
|
28
|
+
'text-success': '#2E7D32', // green-darken-3
|
|
29
|
+
error: '#D50000', // red-accent-4
|
|
30
|
+
'on-error': '#FFFFFF',
|
|
31
|
+
'text-error': undefined,
|
|
32
|
+
warning: '#D81B60', // pink-darken-1
|
|
33
|
+
'on-warning': '#FFFFFF',
|
|
34
|
+
'text-warning': undefined,
|
|
35
|
+
admin: '#B71C1C', // red-darken-4
|
|
36
|
+
'on-admin': '#FFFFFF',
|
|
37
|
+
'text-admin': undefined,
|
|
38
|
+
},
|
|
39
|
+
dark: false,
|
|
40
|
+
darkColors: {
|
|
41
|
+
background: '#121212',
|
|
42
|
+
'on-background': '#FFFFFF', // white
|
|
43
|
+
surface: '#212121',
|
|
44
|
+
'on-surface': '#FFFFFF', // white
|
|
45
|
+
primary: '#1976D2', // blue-darken-2
|
|
46
|
+
'on-primary': '#FFFFFF', // white
|
|
47
|
+
'text-primary': '#2196F3', // blue
|
|
48
|
+
secondary: '#BBDEFB', // blue-lighten-4
|
|
49
|
+
'on-secondary': '#000000',
|
|
50
|
+
'text-secondary': undefined,
|
|
51
|
+
accent: '#2962FF', // blue-accent-1
|
|
52
|
+
'on-accent': '#FFFFFF',
|
|
53
|
+
'text-accent': '#82B1FF',
|
|
54
|
+
error: '#D50000', // red-accent-4
|
|
55
|
+
'on-error': '#FFFFFF',
|
|
56
|
+
'text-error': '#FF5252', // red-accent-2
|
|
57
|
+
info: '#FFE0B2',
|
|
58
|
+
'on-info': '#000000',
|
|
59
|
+
'text-info': undefined,
|
|
60
|
+
success: '#B9F6CA', // green-accent-1
|
|
61
|
+
'on-success': '#000000',
|
|
62
|
+
'text-success': undefined,
|
|
63
|
+
warning: '#D81B60', // pink-darken-1
|
|
64
|
+
'on-warning': '#FFFFFF',
|
|
65
|
+
'text-warning': '#FF4081', // pink-accent-2
|
|
66
|
+
admin: '#B71C1C', // red-darken-4
|
|
67
|
+
'on-admin': '#FFFFFF',
|
|
68
|
+
'text-admin': '#FFCDD2'
|
|
69
|
+
},
|
|
70
|
+
hc: false,
|
|
71
|
+
hcColors: {
|
|
72
|
+
// standard vuetify colors, see https://vuetifyjs.com/en/styles/colors/#material-colors
|
|
73
|
+
background: '#FFFFFF',
|
|
74
|
+
'on-background': '#000000',
|
|
75
|
+
surface: '#FFFFFF',
|
|
76
|
+
'on-surface': '#000000',
|
|
77
|
+
primary: '#0D47A1', // blue-darken-4
|
|
78
|
+
'on-primary': '#FFFFFF',
|
|
79
|
+
'text-primary': undefined,
|
|
80
|
+
secondary: '#81D4FA', // light-blue-lighten-3
|
|
81
|
+
'on-secondary': '#000000',
|
|
82
|
+
'text-secondary': '#01579B', // light-blue-darken-3
|
|
83
|
+
accent: '#1d44b3', // blue-accent-4
|
|
84
|
+
'on-accent': '#FFFFFF',
|
|
85
|
+
'text-accent': undefined,
|
|
86
|
+
info: '#FFE0B2', // orange-lighten-4
|
|
87
|
+
'on-info': '#000000',
|
|
88
|
+
'text-info': '#993500',
|
|
89
|
+
success: '#B9F6CA', // green-accent-1
|
|
90
|
+
'on-success': '#000000',
|
|
91
|
+
'text-success': '#1B5E20', // green-darken-4
|
|
92
|
+
error: '#b30000',
|
|
93
|
+
'on-error': '#FFFFFF',
|
|
94
|
+
'text-error': undefined,
|
|
95
|
+
warning: '#880E4F', // pink-darken-4
|
|
96
|
+
'on-warning': '#FFFFFF',
|
|
97
|
+
'text-warning': undefined,
|
|
98
|
+
admin: '#b30000',
|
|
99
|
+
'on-admin': '#FFFFFF',
|
|
100
|
+
'text-admin': undefined,
|
|
101
|
+
},
|
|
102
|
+
hcDark: false,
|
|
103
|
+
hcDarkColors: {
|
|
104
|
+
background: '#121212',
|
|
105
|
+
'on-background': '#FFFFFF', // white
|
|
106
|
+
surface: '#121212',
|
|
107
|
+
'on-surface': '#FFFFFF', // white
|
|
108
|
+
primary: '#0D47A1', // blue-darken-4
|
|
109
|
+
'on-primary': '#FFFFFF', // white
|
|
110
|
+
'text-primary': '#42A5F5', // blue-lighten-1
|
|
111
|
+
secondary: '#BBDEFB', // blue-lighten-4
|
|
112
|
+
'on-secondary': '#000000',
|
|
113
|
+
'text-secondary': undefined,
|
|
114
|
+
accent: '#1d44b3', // blue-accent-1
|
|
115
|
+
'on-accent': '#FFFFFF',
|
|
116
|
+
'text-accent': '#82B1FF',
|
|
117
|
+
error: '#b30000',
|
|
118
|
+
'on-error': '#FFFFFF',
|
|
119
|
+
'text-error': '#FF8A80', // red-accent-1
|
|
120
|
+
info: '#FFE0B2',
|
|
121
|
+
'on-info': '#000000',
|
|
122
|
+
'text-info': undefined,
|
|
123
|
+
success: '#B9F6CA', // green-accent-1
|
|
124
|
+
'on-success': '#000000',
|
|
125
|
+
'text-success': undefined,
|
|
126
|
+
warning: '#880E4F', // pink-darken-4
|
|
127
|
+
'on-warning': '#FFFFFF',
|
|
128
|
+
'text-warning': '#FF80AB', // pink-accent-1
|
|
129
|
+
admin: '#b30000',
|
|
130
|
+
'on-admin': '#FFFFFF',
|
|
131
|
+
'text-admin': '#FFCDD2'
|
|
132
|
+
},
|
|
133
|
+
}
|
|
134
|
+
export const getTextColorsCss = (colors, theme) => {
|
|
135
|
+
let css = ''
|
|
136
|
+
for (const color of ['primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning', 'admin']) {
|
|
137
|
+
const key = `text-${color}`
|
|
138
|
+
if (colors[key]) {
|
|
139
|
+
css += `
|
|
140
|
+
.v-theme--${theme} .text-${color}:not(.v-btn--disabled) { color: ${colors[key]}!important; }`
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
return css
|
|
144
|
+
}
|
|
145
|
+
export const getReadableColor = (baseColor, bgColors, darkMode, level) => {
|
|
146
|
+
const c = tinycolor(baseColor)
|
|
147
|
+
while (!bgColors.every(bgColor => tinycolor.isReadable(c, bgColor, { level, size: 'small' }))) {
|
|
148
|
+
if (darkMode) {
|
|
149
|
+
if (c.getBrightness() === 255) { break }
|
|
150
|
+
c.brighten(1)
|
|
151
|
+
} else {
|
|
152
|
+
if (c.getBrightness() === 0) { break }
|
|
153
|
+
c.darken(1)
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
return c.toHexString()
|
|
157
|
+
}
|
|
158
|
+
export const getOnColor = (color) => {
|
|
159
|
+
// priority to white text if it is readable
|
|
160
|
+
if (tinycolor.isReadable(color, '#FFFFFF', { level: 'AA', size: 'small' })) { return '#FFFFFF' }
|
|
161
|
+
return tinycolor.mostReadable(color, ['#000000', '#FFFFFF']).toHexString()
|
|
162
|
+
}
|
|
163
|
+
export const fillTheme = (theme, defaultTheme) => {
|
|
164
|
+
const fullTheme = clone(theme)
|
|
165
|
+
if (fullTheme.assistedMode && fullTheme.assistedModeColors) {
|
|
166
|
+
if (!defaultTheme.darkColors) { throw new Error('darkColors is missing in default theme') }
|
|
167
|
+
if (!defaultTheme.hcColors) { throw new Error('hcColors is missing in default theme') }
|
|
168
|
+
if (!defaultTheme.hcDarkColors) { throw new Error('hcDarkColors is missing in default theme') }
|
|
169
|
+
fullTheme.assistedModeColors.primary = fullTheme.assistedModeColors.primary ?? fullTheme.colors.primary
|
|
170
|
+
fullTheme.assistedModeColors.secondary = fullTheme.assistedModeColors.secondary ?? fullTheme.colors.secondary
|
|
171
|
+
fullTheme.assistedModeColors.accent = fullTheme.assistedModeColors.accent ?? fullTheme.colors.accent
|
|
172
|
+
fullTheme.colors = clone(defaultTheme.colors)
|
|
173
|
+
fullTheme.darkColors = clone(defaultTheme.darkColors)
|
|
174
|
+
fullTheme.hcColors = clone(defaultTheme.hcColors)
|
|
175
|
+
fullTheme.hcDarkColors = clone(defaultTheme.hcDarkColors)
|
|
176
|
+
const customColors = {
|
|
177
|
+
primary: fullTheme.assistedModeColors.primary,
|
|
178
|
+
secondary: fullTheme.assistedModeColors.secondary,
|
|
179
|
+
accent: fullTheme.assistedModeColors.accent,
|
|
180
|
+
'on-primary': getOnColor(fullTheme.assistedModeColors.primary),
|
|
181
|
+
'on-secondary': getOnColor(fullTheme.assistedModeColors.secondary),
|
|
182
|
+
'on-accent': getOnColor(fullTheme.assistedModeColors.accent)
|
|
183
|
+
}
|
|
184
|
+
Object.assign(fullTheme.colors, customColors)
|
|
185
|
+
Object.assign(fullTheme.darkColors, customColors)
|
|
186
|
+
Object.assign(fullTheme.hcColors, customColors)
|
|
187
|
+
Object.assign(fullTheme.hcDarkColors, customColors)
|
|
188
|
+
fullTheme.colors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
|
|
189
|
+
fullTheme.colors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
|
|
190
|
+
fullTheme.colors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
|
|
191
|
+
fullTheme.darkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
|
|
192
|
+
fullTheme.darkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
|
|
193
|
+
fullTheme.darkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
|
|
194
|
+
fullTheme.hcColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
|
|
195
|
+
fullTheme.hcColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
|
|
196
|
+
fullTheme.hcColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
|
|
197
|
+
fullTheme.hcDarkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
|
|
198
|
+
fullTheme.hcDarkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
|
|
199
|
+
fullTheme.hcDarkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
|
|
200
|
+
} else {
|
|
201
|
+
fullTheme.assistedModeColors = {
|
|
202
|
+
primary: fullTheme.colors.primary,
|
|
203
|
+
secondary: fullTheme.colors.secondary,
|
|
204
|
+
accent: fullTheme.colors.accent,
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
return fullTheme
|
|
208
|
+
}
|
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
$id: string;
|
|
3
|
+
'x-exports': string[];
|
|
4
|
+
type: string;
|
|
5
|
+
title: string;
|
|
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
|
+
})[];
|
|
44
|
+
} | {
|
|
45
|
+
title: string;
|
|
46
|
+
children: ({
|
|
47
|
+
children: string[];
|
|
48
|
+
cols: {
|
|
49
|
+
sm: number;
|
|
50
|
+
lg: number;
|
|
51
|
+
};
|
|
52
|
+
name?: undefined;
|
|
53
|
+
props?: undefined;
|
|
54
|
+
} | {
|
|
55
|
+
name: string;
|
|
56
|
+
cols: {
|
|
57
|
+
sm: number;
|
|
58
|
+
lg: number;
|
|
59
|
+
};
|
|
60
|
+
props: {
|
|
61
|
+
colorsKey: string;
|
|
62
|
+
dark: boolean;
|
|
63
|
+
};
|
|
64
|
+
children?: undefined;
|
|
65
|
+
})[];
|
|
66
|
+
})[];
|
|
67
|
+
key?: undefined;
|
|
68
|
+
cols?: undefined;
|
|
69
|
+
})[];
|
|
70
|
+
properties: {
|
|
71
|
+
logo: {
|
|
72
|
+
title: string;
|
|
73
|
+
type: string;
|
|
74
|
+
};
|
|
75
|
+
bodyFontFamilyCss: {
|
|
76
|
+
title: string;
|
|
77
|
+
layout: {
|
|
78
|
+
comp: string;
|
|
79
|
+
rows: number;
|
|
80
|
+
};
|
|
81
|
+
description: string;
|
|
82
|
+
type: string;
|
|
83
|
+
};
|
|
84
|
+
headingFontFamilyCss: {
|
|
85
|
+
title: string;
|
|
86
|
+
layout: {
|
|
87
|
+
comp: string;
|
|
88
|
+
rows: number;
|
|
89
|
+
};
|
|
90
|
+
description: string;
|
|
91
|
+
type: string;
|
|
92
|
+
};
|
|
93
|
+
assistedMode: {
|
|
94
|
+
type: string;
|
|
95
|
+
title: string;
|
|
96
|
+
description: string;
|
|
97
|
+
default: boolean;
|
|
98
|
+
};
|
|
99
|
+
assistedModeColors: {
|
|
100
|
+
type: string;
|
|
101
|
+
properties: {
|
|
102
|
+
primary: {
|
|
103
|
+
type: string;
|
|
104
|
+
title: string;
|
|
105
|
+
layout: {
|
|
106
|
+
comp: string;
|
|
107
|
+
cols: number;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
secondary: {
|
|
111
|
+
type: string;
|
|
112
|
+
title: string;
|
|
113
|
+
layout: {
|
|
114
|
+
comp: string;
|
|
115
|
+
cols: number;
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
accent: {
|
|
119
|
+
type: string;
|
|
120
|
+
title: string;
|
|
121
|
+
layout: {
|
|
122
|
+
comp: string;
|
|
123
|
+
cols: number;
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
colors: {
|
|
129
|
+
$ref: string;
|
|
130
|
+
};
|
|
131
|
+
dark: {
|
|
132
|
+
type: string;
|
|
133
|
+
title: string;
|
|
134
|
+
};
|
|
135
|
+
darkColors: {
|
|
136
|
+
$ref: string;
|
|
137
|
+
};
|
|
138
|
+
hc: {
|
|
139
|
+
type: string;
|
|
140
|
+
title: string;
|
|
141
|
+
};
|
|
142
|
+
hcColors: {
|
|
143
|
+
$ref: string;
|
|
144
|
+
};
|
|
145
|
+
hcDark: {
|
|
146
|
+
type: string;
|
|
147
|
+
title: string;
|
|
148
|
+
};
|
|
149
|
+
hcDarkColors: {
|
|
150
|
+
$ref: string;
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
$defs: {
|
|
154
|
+
colors: {
|
|
155
|
+
type: string;
|
|
156
|
+
additionalProperties: boolean;
|
|
157
|
+
required: string[];
|
|
158
|
+
properties: {
|
|
159
|
+
background: {
|
|
160
|
+
type: string;
|
|
161
|
+
title: string;
|
|
162
|
+
layout: {
|
|
163
|
+
comp: string;
|
|
164
|
+
cols: number;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
'on-background': {
|
|
168
|
+
type: string;
|
|
169
|
+
title: string;
|
|
170
|
+
layout: {
|
|
171
|
+
comp: string;
|
|
172
|
+
cols: number;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
surface: {
|
|
176
|
+
type: string;
|
|
177
|
+
title: string;
|
|
178
|
+
layout: {
|
|
179
|
+
comp: string;
|
|
180
|
+
cols: number;
|
|
181
|
+
};
|
|
182
|
+
};
|
|
183
|
+
'on-surface': {
|
|
184
|
+
type: string;
|
|
185
|
+
title: string;
|
|
186
|
+
layout: {
|
|
187
|
+
comp: string;
|
|
188
|
+
cols: number;
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
primary: {
|
|
192
|
+
type: string;
|
|
193
|
+
title: string;
|
|
194
|
+
layout: {
|
|
195
|
+
comp: string;
|
|
196
|
+
cols: number;
|
|
197
|
+
};
|
|
198
|
+
};
|
|
199
|
+
'on-primary': {
|
|
200
|
+
type: string;
|
|
201
|
+
title: string;
|
|
202
|
+
layout: {
|
|
203
|
+
comp: string;
|
|
204
|
+
cols: number;
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
'text-primary': {
|
|
208
|
+
type: string;
|
|
209
|
+
title: string;
|
|
210
|
+
layout: {
|
|
211
|
+
comp: string;
|
|
212
|
+
cols: number;
|
|
213
|
+
hint: string;
|
|
214
|
+
};
|
|
215
|
+
};
|
|
216
|
+
secondary: {
|
|
217
|
+
type: string;
|
|
218
|
+
title: string;
|
|
219
|
+
layout: {
|
|
220
|
+
comp: string;
|
|
221
|
+
cols: number;
|
|
222
|
+
};
|
|
223
|
+
};
|
|
224
|
+
'on-secondary': {
|
|
225
|
+
type: string;
|
|
226
|
+
title: string;
|
|
227
|
+
layout: {
|
|
228
|
+
comp: string;
|
|
229
|
+
cols: number;
|
|
230
|
+
};
|
|
231
|
+
};
|
|
232
|
+
'text-secondary': {
|
|
233
|
+
type: string;
|
|
234
|
+
title: string;
|
|
235
|
+
layout: {
|
|
236
|
+
comp: string;
|
|
237
|
+
cols: number;
|
|
238
|
+
hint: string;
|
|
239
|
+
};
|
|
240
|
+
};
|
|
241
|
+
accent: {
|
|
242
|
+
type: string;
|
|
243
|
+
title: string;
|
|
244
|
+
layout: {
|
|
245
|
+
comp: string;
|
|
246
|
+
cols: number;
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
'on-accent': {
|
|
250
|
+
type: string;
|
|
251
|
+
title: string;
|
|
252
|
+
layout: {
|
|
253
|
+
comp: string;
|
|
254
|
+
cols: number;
|
|
255
|
+
};
|
|
256
|
+
};
|
|
257
|
+
'text-accent': {
|
|
258
|
+
type: string;
|
|
259
|
+
title: string;
|
|
260
|
+
layout: {
|
|
261
|
+
comp: string;
|
|
262
|
+
cols: number;
|
|
263
|
+
hint: string;
|
|
264
|
+
};
|
|
265
|
+
};
|
|
266
|
+
info: {
|
|
267
|
+
type: string;
|
|
268
|
+
title: string;
|
|
269
|
+
layout: {
|
|
270
|
+
comp: string;
|
|
271
|
+
cols: number;
|
|
272
|
+
};
|
|
273
|
+
};
|
|
274
|
+
'on-info': {
|
|
275
|
+
type: string;
|
|
276
|
+
title: string;
|
|
277
|
+
layout: {
|
|
278
|
+
comp: string;
|
|
279
|
+
cols: number;
|
|
280
|
+
};
|
|
281
|
+
};
|
|
282
|
+
'text-info': {
|
|
283
|
+
type: string;
|
|
284
|
+
title: string;
|
|
285
|
+
layout: {
|
|
286
|
+
comp: string;
|
|
287
|
+
cols: number;
|
|
288
|
+
hint: string;
|
|
289
|
+
};
|
|
290
|
+
};
|
|
291
|
+
success: {
|
|
292
|
+
type: string;
|
|
293
|
+
title: string;
|
|
294
|
+
layout: {
|
|
295
|
+
comp: string;
|
|
296
|
+
cols: number;
|
|
297
|
+
};
|
|
298
|
+
};
|
|
299
|
+
'on-success': {
|
|
300
|
+
type: string;
|
|
301
|
+
title: string;
|
|
302
|
+
layout: {
|
|
303
|
+
comp: string;
|
|
304
|
+
cols: number;
|
|
305
|
+
};
|
|
306
|
+
};
|
|
307
|
+
'text-success': {
|
|
308
|
+
type: string;
|
|
309
|
+
title: string;
|
|
310
|
+
layout: {
|
|
311
|
+
comp: string;
|
|
312
|
+
cols: number;
|
|
313
|
+
hint: string;
|
|
314
|
+
};
|
|
315
|
+
};
|
|
316
|
+
error: {
|
|
317
|
+
type: string;
|
|
318
|
+
title: string;
|
|
319
|
+
layout: {
|
|
320
|
+
comp: string;
|
|
321
|
+
cols: number;
|
|
322
|
+
};
|
|
323
|
+
};
|
|
324
|
+
'on-error': {
|
|
325
|
+
type: string;
|
|
326
|
+
title: string;
|
|
327
|
+
layout: {
|
|
328
|
+
comp: string;
|
|
329
|
+
cols: number;
|
|
330
|
+
};
|
|
331
|
+
};
|
|
332
|
+
'text-error': {
|
|
333
|
+
type: string;
|
|
334
|
+
title: string;
|
|
335
|
+
layout: {
|
|
336
|
+
comp: string;
|
|
337
|
+
cols: number;
|
|
338
|
+
hint: string;
|
|
339
|
+
};
|
|
340
|
+
};
|
|
341
|
+
warning: {
|
|
342
|
+
type: string;
|
|
343
|
+
title: string;
|
|
344
|
+
layout: {
|
|
345
|
+
comp: string;
|
|
346
|
+
cols: number;
|
|
347
|
+
};
|
|
348
|
+
};
|
|
349
|
+
'on-warning': {
|
|
350
|
+
type: string;
|
|
351
|
+
title: string;
|
|
352
|
+
layout: {
|
|
353
|
+
comp: string;
|
|
354
|
+
cols: number;
|
|
355
|
+
};
|
|
356
|
+
};
|
|
357
|
+
'text-warning': {
|
|
358
|
+
type: string;
|
|
359
|
+
title: string;
|
|
360
|
+
layout: {
|
|
361
|
+
comp: string;
|
|
362
|
+
cols: number;
|
|
363
|
+
hint: string;
|
|
364
|
+
};
|
|
365
|
+
};
|
|
366
|
+
admin: {
|
|
367
|
+
type: string;
|
|
368
|
+
layout: string;
|
|
369
|
+
};
|
|
370
|
+
'on-admin': {
|
|
371
|
+
type: string;
|
|
372
|
+
layout: string;
|
|
373
|
+
};
|
|
374
|
+
'text-admin': {
|
|
375
|
+
type: string;
|
|
376
|
+
layout: string;
|
|
377
|
+
};
|
|
378
|
+
};
|
|
379
|
+
};
|
|
380
|
+
};
|
|
381
|
+
};
|
|
382
|
+
export default _default;
|
package/theme/schema.js
ADDED
|
@@ -0,0 +1,377 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
$id: 'https://github.com/data-fair/lib/theme',
|
|
3
|
+
'x-exports': ['types'],
|
|
4
|
+
type: 'object',
|
|
5
|
+
title: 'Thème',
|
|
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
|
+
],
|
|
71
|
+
properties: {
|
|
72
|
+
logo: {
|
|
73
|
+
title: "URL d'un logo",
|
|
74
|
+
type: 'string'
|
|
75
|
+
},
|
|
76
|
+
bodyFontFamilyCss: {
|
|
77
|
+
title: 'CSS police de caractères pour le corps du texte',
|
|
78
|
+
layout: {
|
|
79
|
+
comp: 'textarea',
|
|
80
|
+
rows: 3
|
|
81
|
+
},
|
|
82
|
+
description: "Par défaut une police Nunito auto-hébergée est utilisée. Vous pouvez aussi copier le CSS proposé par une plateforme comme Google Fonts, dans ce cas il faut remplacer le nom de la police par '{FONT_FAMILY}'.",
|
|
83
|
+
type: 'string'
|
|
84
|
+
},
|
|
85
|
+
headingFontFamilyCss: {
|
|
86
|
+
title: 'CSS police de caractères pour les titres',
|
|
87
|
+
layout: {
|
|
88
|
+
comp: 'textarea',
|
|
89
|
+
rows: 3
|
|
90
|
+
},
|
|
91
|
+
description: 'Renseignez de la même manière que pour le corps de texte, ou laissez vide pour utiliser la police du corps du texte',
|
|
92
|
+
type: 'string'
|
|
93
|
+
},
|
|
94
|
+
assistedMode: {
|
|
95
|
+
type: 'boolean',
|
|
96
|
+
title: 'mode de gestion des couleurs simplifié',
|
|
97
|
+
description: "Si activé vous ne devrez saisir que les couleurs principales du thème, d'autres couleurs seront affectées par défaut et les couleurs de texte seront automatiquement ajustées pour être lisibles sur les couleurs de fond.",
|
|
98
|
+
default: true
|
|
99
|
+
},
|
|
100
|
+
assistedModeColors: {
|
|
101
|
+
type: 'object',
|
|
102
|
+
properties: {
|
|
103
|
+
primary: {
|
|
104
|
+
type: 'string',
|
|
105
|
+
title: 'Couleur principale',
|
|
106
|
+
layout: {
|
|
107
|
+
comp: 'color-picker',
|
|
108
|
+
cols: 4
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
secondary: {
|
|
112
|
+
type: 'string',
|
|
113
|
+
title: 'Couleur secondaire',
|
|
114
|
+
layout: {
|
|
115
|
+
comp: 'color-picker',
|
|
116
|
+
cols: 4
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
accent: {
|
|
120
|
+
type: 'string',
|
|
121
|
+
title: 'Couleur accentuée',
|
|
122
|
+
layout: {
|
|
123
|
+
comp: 'color-picker',
|
|
124
|
+
cols: 4
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
colors: { $ref: '#/$defs/colors' },
|
|
130
|
+
dark: { type: 'boolean', title: 'proposer ce thème aux utilisateurs' },
|
|
131
|
+
darkColors: { $ref: '#/$defs/colors' },
|
|
132
|
+
hc: { type: 'boolean', title: 'proposer ce thème aux utilisateurs' },
|
|
133
|
+
hcColors: { $ref: '#/$defs/colors' },
|
|
134
|
+
hcDark: { type: 'boolean', title: 'proposer ce thème aux utilisateurs' },
|
|
135
|
+
hcDarkColors: { $ref: '#/$defs/colors' }
|
|
136
|
+
},
|
|
137
|
+
$defs: {
|
|
138
|
+
colors: {
|
|
139
|
+
type: 'object',
|
|
140
|
+
additionalProperties: false,
|
|
141
|
+
required: [
|
|
142
|
+
'background',
|
|
143
|
+
'on-background',
|
|
144
|
+
'surface',
|
|
145
|
+
'on-surface',
|
|
146
|
+
'primary',
|
|
147
|
+
'on-primary',
|
|
148
|
+
'secondary',
|
|
149
|
+
'on-secondary',
|
|
150
|
+
'accent',
|
|
151
|
+
'on-accent',
|
|
152
|
+
'error',
|
|
153
|
+
'on-error',
|
|
154
|
+
'info',
|
|
155
|
+
'on-info',
|
|
156
|
+
'success',
|
|
157
|
+
'on-success',
|
|
158
|
+
'warning',
|
|
159
|
+
'on-warning',
|
|
160
|
+
'admin',
|
|
161
|
+
'on-admin'
|
|
162
|
+
],
|
|
163
|
+
properties: {
|
|
164
|
+
background: {
|
|
165
|
+
type: 'string',
|
|
166
|
+
title: 'Couleur de fond',
|
|
167
|
+
layout: {
|
|
168
|
+
comp: 'color-picker',
|
|
169
|
+
cols: 3
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
'on-background': {
|
|
173
|
+
type: 'string',
|
|
174
|
+
title: 'Couleur de texte sur couleur de fond',
|
|
175
|
+
layout: {
|
|
176
|
+
comp: 'color-picker',
|
|
177
|
+
cols: 3
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
surface: {
|
|
181
|
+
type: 'string',
|
|
182
|
+
title: 'Couleur des surfaces (vignettes, listes, etc)',
|
|
183
|
+
layout: {
|
|
184
|
+
comp: 'color-picker',
|
|
185
|
+
cols: 3
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
'on-surface': {
|
|
189
|
+
type: 'string',
|
|
190
|
+
title: 'Couleur de texte sur couleur des surfaces',
|
|
191
|
+
layout: {
|
|
192
|
+
comp: 'color-picker',
|
|
193
|
+
cols: 3
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
primary: {
|
|
197
|
+
type: 'string',
|
|
198
|
+
title: 'Couleur principale',
|
|
199
|
+
layout: {
|
|
200
|
+
comp: 'color-picker',
|
|
201
|
+
cols: 4
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
'on-primary': {
|
|
205
|
+
type: 'string',
|
|
206
|
+
title: 'Couleur de texte sur couleur principale',
|
|
207
|
+
layout: {
|
|
208
|
+
comp: 'color-picker',
|
|
209
|
+
cols: 4
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
'text-primary': {
|
|
213
|
+
type: 'string',
|
|
214
|
+
title: 'Couleur de texte principal',
|
|
215
|
+
layout: {
|
|
216
|
+
comp: 'color-picker',
|
|
217
|
+
cols: 4,
|
|
218
|
+
hint: 'laissez vide pour utiliser la couleur principale'
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
secondary: {
|
|
222
|
+
type: 'string',
|
|
223
|
+
title: 'Couleur secondaire',
|
|
224
|
+
layout: {
|
|
225
|
+
comp: 'color-picker',
|
|
226
|
+
cols: 4
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
'on-secondary': {
|
|
230
|
+
type: 'string',
|
|
231
|
+
title: 'Couleur de texte sur couleur secondaire',
|
|
232
|
+
layout: {
|
|
233
|
+
comp: 'color-picker',
|
|
234
|
+
cols: 4
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
'text-secondary': {
|
|
238
|
+
type: 'string',
|
|
239
|
+
title: 'Couleur de texte secondaire',
|
|
240
|
+
layout: {
|
|
241
|
+
comp: 'color-picker',
|
|
242
|
+
cols: 4,
|
|
243
|
+
hint: 'laissez vide pour utiliser la couleur secondaire'
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
accent: {
|
|
247
|
+
type: 'string',
|
|
248
|
+
title: 'Couleur accentuée',
|
|
249
|
+
layout: {
|
|
250
|
+
comp: 'color-picker',
|
|
251
|
+
cols: 4
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
'on-accent': {
|
|
255
|
+
type: 'string',
|
|
256
|
+
title: 'Couleur de texte sur couleur accentuée',
|
|
257
|
+
layout: {
|
|
258
|
+
comp: 'color-picker',
|
|
259
|
+
cols: 4
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
'text-accent': {
|
|
263
|
+
type: 'string',
|
|
264
|
+
title: 'Couleur de texte accentué',
|
|
265
|
+
layout: {
|
|
266
|
+
comp: 'color-picker',
|
|
267
|
+
cols: 4,
|
|
268
|
+
hint: 'laissez vide pour utiliser la couleur accentuée'
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
info: {
|
|
272
|
+
type: 'string',
|
|
273
|
+
title: 'Couleur info',
|
|
274
|
+
layout: {
|
|
275
|
+
comp: 'color-picker',
|
|
276
|
+
cols: 4
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
'on-info': {
|
|
280
|
+
type: 'string',
|
|
281
|
+
title: 'Couleur de texte sur couleur info',
|
|
282
|
+
layout: {
|
|
283
|
+
comp: 'color-picker',
|
|
284
|
+
cols: 4
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
'text-info': {
|
|
288
|
+
type: 'string',
|
|
289
|
+
title: 'Couleur de texte info',
|
|
290
|
+
layout: {
|
|
291
|
+
comp: 'color-picker',
|
|
292
|
+
cols: 4,
|
|
293
|
+
hint: 'laissez vide pour utiliser la couleur info'
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
success: {
|
|
297
|
+
type: 'string',
|
|
298
|
+
title: 'Couleur succès',
|
|
299
|
+
layout: {
|
|
300
|
+
comp: 'color-picker',
|
|
301
|
+
cols: 4
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
'on-success': {
|
|
305
|
+
type: 'string',
|
|
306
|
+
title: 'Couleur succès',
|
|
307
|
+
layout: {
|
|
308
|
+
comp: 'color-picker',
|
|
309
|
+
cols: 4
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
'text-success': {
|
|
313
|
+
type: 'string',
|
|
314
|
+
title: 'Couleur de texte succès',
|
|
315
|
+
layout: {
|
|
316
|
+
comp: 'color-picker',
|
|
317
|
+
cols: 4,
|
|
318
|
+
hint: 'laissez vide pour utiliser la couleur succès'
|
|
319
|
+
}
|
|
320
|
+
},
|
|
321
|
+
error: {
|
|
322
|
+
type: 'string',
|
|
323
|
+
title: 'Couleur erreur',
|
|
324
|
+
layout: {
|
|
325
|
+
comp: 'color-picker',
|
|
326
|
+
cols: 4
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
'on-error': {
|
|
330
|
+
type: 'string',
|
|
331
|
+
title: 'Couleur de texte sur couleur erreur',
|
|
332
|
+
layout: {
|
|
333
|
+
comp: 'color-picker',
|
|
334
|
+
cols: 4
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
'text-error': {
|
|
338
|
+
type: 'string',
|
|
339
|
+
title: 'Couleur de texte erreur',
|
|
340
|
+
layout: {
|
|
341
|
+
comp: 'color-picker',
|
|
342
|
+
cols: 4,
|
|
343
|
+
hint: 'laissez vide pour utiliser la couleur erreur'
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
warning: {
|
|
347
|
+
type: 'string',
|
|
348
|
+
title: 'Couleur avertissement',
|
|
349
|
+
layout: {
|
|
350
|
+
comp: 'color-picker',
|
|
351
|
+
cols: 4
|
|
352
|
+
}
|
|
353
|
+
},
|
|
354
|
+
'on-warning': {
|
|
355
|
+
type: 'string',
|
|
356
|
+
title: 'Couleur de texte sur avertissement',
|
|
357
|
+
layout: {
|
|
358
|
+
comp: 'color-picker',
|
|
359
|
+
cols: 4
|
|
360
|
+
}
|
|
361
|
+
},
|
|
362
|
+
'text-warning': {
|
|
363
|
+
type: 'string',
|
|
364
|
+
title: 'Couleur de texte avertissement',
|
|
365
|
+
layout: {
|
|
366
|
+
comp: 'color-picker',
|
|
367
|
+
cols: 4,
|
|
368
|
+
hint: 'laissez vide pour utiliser la couleur avertissement'
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
admin: { type: 'string', layout: 'none' },
|
|
372
|
+
'on-admin': { type: 'string', layout: 'none' },
|
|
373
|
+
'text-admin': { type: 'string', layout: 'none' }
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
}
|