@data-fair/lib-common-types 1.16.0 → 1.16.2
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/account/index.js +1 -1
- package/account/schema.js +37 -37
- package/application/index.js +1 -1
- package/application/schema.js +124 -124
- package/catalog/index.js +1 -1
- package/catalog/schema.js +180 -180
- package/event/index.js +1 -1
- package/event/schema.js +199 -199
- package/notification/index.js +1 -1
- package/notification/schema.js +83 -83
- package/package.json +1 -1
- package/session/index.js +55 -41
- package/session/schema.js +164 -164
- package/theme/index.js +326 -306
- package/theme/schema.d.ts +384 -0
- package/theme/schema.js +809 -368
package/theme/index.js
CHANGED
|
@@ -1,325 +1,345 @@
|
|
|
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'
|
|
4
|
-
export * from './.type/index.js'
|
|
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';
|
|
4
|
+
export * from './.type/index.js';
|
|
5
5
|
export const defaultTheme = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
6
|
+
logo: undefined,
|
|
7
|
+
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}",
|
|
8
|
+
headingFontFamilyCss: undefined,
|
|
9
|
+
colors: {
|
|
10
|
+
// standard vuetify colors, see https://vuetifyjs.com/en/styles/colors/#material-colors
|
|
11
|
+
background: '#FAFAFA', // grey-lighten-5
|
|
12
|
+
'on-background': '#424242', // grey-darken-3
|
|
13
|
+
surface: '#FFFFFF',
|
|
14
|
+
'on-surface': '#424242', // grey-darken-3
|
|
15
|
+
primary: '#1976D2', // blue-darken-2
|
|
16
|
+
'on-primary': '#FFFFFF',
|
|
17
|
+
'text-primary': '#1565C0',
|
|
18
|
+
secondary: '#81D4FA', // light-blue-lighten-3
|
|
19
|
+
'on-secondary': '#000000',
|
|
20
|
+
'text-secondary': '#0277BD', // light-blue-darken-3
|
|
21
|
+
accent: '#2962FF', // blue-accent-4
|
|
22
|
+
'on-accent': '#FFFFFF',
|
|
23
|
+
'text-accent': undefined,
|
|
24
|
+
info: '#FFE0B2', // orange-lighten-4
|
|
25
|
+
'on-info': '#000000',
|
|
26
|
+
'text-info': '#BF4300',
|
|
27
|
+
success: '#B9F6CA', // green-accent-1
|
|
28
|
+
'on-success': '#000000',
|
|
29
|
+
'text-success': '#2E7D32', // green-darken-3
|
|
30
|
+
error: '#D50000', // red-accent-4
|
|
31
|
+
'on-error': '#FFFFFF',
|
|
32
|
+
'text-error': undefined,
|
|
33
|
+
warning: '#D81B60', // pink-darken-1
|
|
34
|
+
'on-warning': '#FFFFFF',
|
|
35
|
+
'text-warning': undefined,
|
|
36
|
+
admin: '#B71C1C', // red-darken-4
|
|
37
|
+
'on-admin': '#FFFFFF',
|
|
38
|
+
'text-admin': undefined,
|
|
39
|
+
},
|
|
40
|
+
dark: false,
|
|
41
|
+
darkColors: {
|
|
42
|
+
background: '#121212',
|
|
43
|
+
'on-background': '#FFFFFF', // white
|
|
44
|
+
surface: '#212121',
|
|
45
|
+
'on-surface': '#FFFFFF', // white
|
|
46
|
+
primary: '#1976D2', // blue-darken-2
|
|
47
|
+
'on-primary': '#FFFFFF', // white
|
|
48
|
+
'text-primary': '#2196F3', // blue
|
|
49
|
+
secondary: '#BBDEFB', // blue-lighten-4
|
|
50
|
+
'on-secondary': '#000000',
|
|
51
|
+
'text-secondary': undefined,
|
|
52
|
+
accent: '#2962FF', // blue-accent-1
|
|
53
|
+
'on-accent': '#FFFFFF',
|
|
54
|
+
'text-accent': '#82B1FF',
|
|
55
|
+
error: '#D50000', // red-accent-4
|
|
56
|
+
'on-error': '#FFFFFF',
|
|
57
|
+
'text-error': '#FF5252', // red-accent-2
|
|
58
|
+
info: '#FFE0B2',
|
|
59
|
+
'on-info': '#000000',
|
|
60
|
+
'text-info': undefined,
|
|
61
|
+
success: '#B9F6CA', // green-accent-1
|
|
62
|
+
'on-success': '#000000',
|
|
63
|
+
'text-success': undefined,
|
|
64
|
+
warning: '#D81B60', // pink-darken-1
|
|
65
|
+
'on-warning': '#FFFFFF',
|
|
66
|
+
'text-warning': '#FF4081', // pink-accent-2
|
|
67
|
+
admin: '#B71C1C', // red-darken-4
|
|
68
|
+
'on-admin': '#FFFFFF',
|
|
69
|
+
'text-admin': '#FFCDD2'
|
|
70
|
+
},
|
|
71
|
+
hc: false,
|
|
72
|
+
hcColors: {
|
|
73
|
+
// standard vuetify colors, see https://vuetifyjs.com/en/styles/colors/#material-colors
|
|
74
|
+
background: '#FFFFFF',
|
|
75
|
+
'on-background': '#000000',
|
|
76
|
+
surface: '#FFFFFF',
|
|
77
|
+
'on-surface': '#000000',
|
|
78
|
+
primary: '#0D47A1', // blue-darken-4
|
|
79
|
+
'on-primary': '#FFFFFF',
|
|
80
|
+
'text-primary': undefined,
|
|
81
|
+
secondary: '#81D4FA', // light-blue-lighten-3
|
|
82
|
+
'on-secondary': '#000000',
|
|
83
|
+
'text-secondary': '#01579B', // light-blue-darken-3
|
|
84
|
+
accent: '#1d44b3', // blue-accent-4
|
|
85
|
+
'on-accent': '#FFFFFF',
|
|
86
|
+
'text-accent': undefined,
|
|
87
|
+
info: '#FFE0B2', // orange-lighten-4
|
|
88
|
+
'on-info': '#000000',
|
|
89
|
+
'text-info': '#993500',
|
|
90
|
+
success: '#B9F6CA', // green-accent-1
|
|
91
|
+
'on-success': '#000000',
|
|
92
|
+
'text-success': '#1B5E20', // green-darken-4
|
|
93
|
+
error: '#b30000',
|
|
94
|
+
'on-error': '#FFFFFF',
|
|
95
|
+
'text-error': undefined,
|
|
96
|
+
warning: '#880E4F', // pink-darken-4
|
|
97
|
+
'on-warning': '#FFFFFF',
|
|
98
|
+
'text-warning': undefined,
|
|
99
|
+
admin: '#b30000',
|
|
100
|
+
'on-admin': '#FFFFFF',
|
|
101
|
+
'text-admin': undefined,
|
|
102
|
+
},
|
|
103
|
+
hcDark: false,
|
|
104
|
+
hcDarkColors: {
|
|
105
|
+
background: '#121212',
|
|
106
|
+
'on-background': '#FFFFFF', // white
|
|
107
|
+
surface: '#121212',
|
|
108
|
+
'on-surface': '#FFFFFF', // white
|
|
109
|
+
primary: '#0D47A1', // blue-darken-4
|
|
110
|
+
'on-primary': '#FFFFFF', // white
|
|
111
|
+
'text-primary': '#42A5F5', // blue-lighten-1
|
|
112
|
+
secondary: '#BBDEFB', // blue-lighten-4
|
|
113
|
+
'on-secondary': '#000000',
|
|
114
|
+
'text-secondary': undefined,
|
|
115
|
+
accent: '#1d44b3', // blue-accent-1
|
|
116
|
+
'on-accent': '#FFFFFF',
|
|
117
|
+
'text-accent': '#82B1FF',
|
|
118
|
+
error: '#b30000',
|
|
119
|
+
'on-error': '#FFFFFF',
|
|
120
|
+
'text-error': '#FF8A80', // red-accent-1
|
|
121
|
+
info: '#FFE0B2',
|
|
122
|
+
'on-info': '#000000',
|
|
123
|
+
'text-info': undefined,
|
|
124
|
+
success: '#B9F6CA', // green-accent-1
|
|
125
|
+
'on-success': '#000000',
|
|
126
|
+
'text-success': undefined,
|
|
127
|
+
warning: '#880E4F', // pink-darken-4
|
|
128
|
+
'on-warning': '#FFFFFF',
|
|
129
|
+
'text-warning': '#FF80AB', // pink-accent-1
|
|
130
|
+
admin: '#b30000',
|
|
131
|
+
'on-admin': '#FFFFFF',
|
|
132
|
+
'text-admin': '#FFCDD2'
|
|
133
|
+
},
|
|
134
|
+
};
|
|
135
135
|
export const getTextColorsCss = (colors, theme) => {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
.v-theme--${theme} .text-${color}:not(.v-btn--disabled) { color: ${colors[key]}!important; }
|
|
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
|
+
}
|
|
142
143
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
144
|
+
return css;
|
|
145
|
+
};
|
|
146
146
|
export const getReadableColor = (baseColor, bgColors, darkMode, level) => {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
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)
|
|
151
|
+
break;
|
|
152
|
+
c.brighten(1);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
if (c.getBrightness() === 0)
|
|
156
|
+
break;
|
|
157
|
+
c.darken(1);
|
|
158
|
+
}
|
|
155
159
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
160
|
+
return c.toHexString();
|
|
161
|
+
};
|
|
159
162
|
export const getOnColor = (color) => {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
163
|
+
// priority to white text if it is readable
|
|
164
|
+
if (tinycolor.isReadable(color, '#FFFFFF', { level: 'AA', size: 'small' }))
|
|
165
|
+
return '#FFFFFF';
|
|
166
|
+
return tinycolor.mostReadable(color, ['#000000', '#FFFFFF']).toHexString();
|
|
167
|
+
};
|
|
164
168
|
export const fillTheme = (theme, defaultTheme) => {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
169
|
+
const fullTheme = clone(theme);
|
|
170
|
+
if (fullTheme.assistedMode && fullTheme.assistedModeColors) {
|
|
171
|
+
if (!defaultTheme.darkColors)
|
|
172
|
+
throw new Error('darkColors is missing in default theme');
|
|
173
|
+
if (!defaultTheme.hcColors)
|
|
174
|
+
throw new Error('hcColors is missing in default theme');
|
|
175
|
+
if (!defaultTheme.hcDarkColors)
|
|
176
|
+
throw new Error('hcDarkColors is missing in default theme');
|
|
177
|
+
fullTheme.assistedModeColors.primary = fullTheme.assistedModeColors.primary ?? fullTheme.colors.primary;
|
|
178
|
+
fullTheme.assistedModeColors.secondary = fullTheme.assistedModeColors.secondary ?? fullTheme.colors.secondary;
|
|
179
|
+
fullTheme.assistedModeColors.accent = fullTheme.assistedModeColors.accent ?? fullTheme.colors.accent;
|
|
180
|
+
fullTheme.colors = clone(defaultTheme.colors);
|
|
181
|
+
fullTheme.darkColors = clone(defaultTheme.darkColors);
|
|
182
|
+
fullTheme.hcColors = clone(defaultTheme.hcColors);
|
|
183
|
+
fullTheme.hcDarkColors = clone(defaultTheme.hcDarkColors);
|
|
184
|
+
const customColors = {
|
|
185
|
+
primary: fullTheme.assistedModeColors.primary,
|
|
186
|
+
secondary: fullTheme.assistedModeColors.secondary,
|
|
187
|
+
accent: fullTheme.assistedModeColors.accent,
|
|
188
|
+
'on-primary': getOnColor(fullTheme.assistedModeColors.primary),
|
|
189
|
+
'on-secondary': getOnColor(fullTheme.assistedModeColors.secondary),
|
|
190
|
+
'on-accent': getOnColor(fullTheme.assistedModeColors.accent)
|
|
191
|
+
};
|
|
192
|
+
Object.assign(fullTheme.colors, customColors);
|
|
193
|
+
Object.assign(fullTheme.darkColors, customColors);
|
|
194
|
+
Object.assign(fullTheme.hcColors, customColors);
|
|
195
|
+
Object.assign(fullTheme.hcDarkColors, customColors);
|
|
196
|
+
fullTheme.colors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA');
|
|
197
|
+
fullTheme.colors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA');
|
|
198
|
+
fullTheme.colors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA');
|
|
199
|
+
fullTheme.darkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA');
|
|
200
|
+
fullTheme.darkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA');
|
|
201
|
+
fullTheme.darkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA');
|
|
202
|
+
fullTheme.hcColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA');
|
|
203
|
+
fullTheme.hcColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA');
|
|
204
|
+
fullTheme.hcColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA');
|
|
205
|
+
fullTheme.hcDarkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA');
|
|
206
|
+
fullTheme.hcDarkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA');
|
|
207
|
+
fullTheme.hcDarkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA');
|
|
184
208
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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,
|
|
209
|
+
else {
|
|
210
|
+
fullTheme.assistedModeColors = {
|
|
211
|
+
primary: fullTheme.colors.primary,
|
|
212
|
+
secondary: fullTheme.colors.secondary,
|
|
213
|
+
accent: fullTheme.colors.accent,
|
|
214
|
+
};
|
|
206
215
|
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
216
|
+
// vuetify is sensitive to undefined keys, better to delete them
|
|
217
|
+
for (const key of Object.keys(fullTheme.colors)) {
|
|
218
|
+
if (fullTheme.colors[key] === undefined)
|
|
219
|
+
delete fullTheme.colors[key];
|
|
220
|
+
}
|
|
221
|
+
if (fullTheme.darkColors) {
|
|
222
|
+
for (const key of Object.keys(fullTheme.darkColors)) {
|
|
223
|
+
if (fullTheme.darkColors[key] === undefined)
|
|
224
|
+
delete fullTheme.darkColors[key];
|
|
225
|
+
}
|
|
215
226
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
227
|
+
if (fullTheme.hcColors) {
|
|
228
|
+
for (const key of Object.keys(fullTheme.hcColors)) {
|
|
229
|
+
if (fullTheme.hcColors[key] === undefined)
|
|
230
|
+
delete fullTheme.hcColors[key];
|
|
231
|
+
}
|
|
220
232
|
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
233
|
+
if (fullTheme.hcDarkColors) {
|
|
234
|
+
for (const key of Object.keys(fullTheme.hcDarkColors)) {
|
|
235
|
+
if (fullTheme.hcDarkColors[key] === undefined)
|
|
236
|
+
delete fullTheme.hcDarkColors[key];
|
|
237
|
+
}
|
|
225
238
|
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
}
|
|
239
|
+
return fullTheme;
|
|
240
|
+
};
|
|
229
241
|
const messages = {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
}
|
|
242
|
+
fr: {
|
|
243
|
+
'theme.default': 'par défaut',
|
|
244
|
+
'theme.dark': 'sombre',
|
|
245
|
+
'theme.hc': 'à contraste élevé',
|
|
246
|
+
'theme.hcDark': 'sombre à contraste élevé',
|
|
247
|
+
readableWarning: 'la couleur {colorName} ({colorCode}) du thème {themeName} n\'est pas suffisamment lisible par dessus la couleur {bgColorName} ({bgColorCode})',
|
|
248
|
+
authProvider: 'du fournisseur d\'identité {title}',
|
|
249
|
+
white: 'blanche',
|
|
250
|
+
text: 'de texte',
|
|
251
|
+
background: 'd\'arrière plan',
|
|
252
|
+
surface: 'de surface',
|
|
253
|
+
primary: 'primaire',
|
|
254
|
+
'text-primary': 'texte primaire',
|
|
255
|
+
secondary: 'secondaire',
|
|
256
|
+
'text-secondary': 'texte secondaire',
|
|
257
|
+
accent: 'accentuée',
|
|
258
|
+
'text-accent': 'texte accentué',
|
|
259
|
+
error: 'd\'erreur',
|
|
260
|
+
'text-error': 'texte d\'erreur',
|
|
261
|
+
warning: 'd\'avertissement',
|
|
262
|
+
'text-warning': 'texte d\'avertissement',
|
|
263
|
+
success: 'de succès',
|
|
264
|
+
'text-success': 'texte de succès',
|
|
265
|
+
info: 'd\'information',
|
|
266
|
+
'text-info': 'texte d\'information',
|
|
267
|
+
admin: 'd\'administration',
|
|
268
|
+
'text-admin': 'texte d\'administration',
|
|
269
|
+
},
|
|
270
|
+
en: {
|
|
271
|
+
'theme.default': 'default',
|
|
272
|
+
'theme.dark': 'dark',
|
|
273
|
+
'theme.hc': 'high contrast',
|
|
274
|
+
'theme.hcDark': 'high contrast dark',
|
|
275
|
+
readableWarning: 'the {colorName} color ({colorCode}) of {themeName} theme is not sufficiently readable over the {bgColorName} color ({bgColorCode})',
|
|
276
|
+
authProvider: 'auth provider {title}',
|
|
277
|
+
white: 'white',
|
|
278
|
+
text: 'text',
|
|
279
|
+
background: 'background',
|
|
280
|
+
surface: 'surface',
|
|
281
|
+
primary: 'primary',
|
|
282
|
+
'text-primary': 'primary text',
|
|
283
|
+
secondary: 'secondary',
|
|
284
|
+
'text-secondary': 'secondary text',
|
|
285
|
+
accent: 'accent',
|
|
286
|
+
'text-accent': 'accent text',
|
|
287
|
+
error: 'error',
|
|
288
|
+
'text-error': 'error text',
|
|
289
|
+
warning: 'warning',
|
|
290
|
+
'text-warning': 'warning text',
|
|
291
|
+
success: 'success',
|
|
292
|
+
'text-success': 'success text',
|
|
293
|
+
info: 'info',
|
|
294
|
+
'text-info': 'info text',
|
|
295
|
+
admin: 'admin',
|
|
296
|
+
'text-admin': 'admin text'
|
|
297
|
+
}
|
|
298
|
+
};
|
|
287
299
|
const getMessage = (locale, messageKey, params = {}) => {
|
|
288
|
-
|
|
289
|
-
}
|
|
290
|
-
function readableWarning
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
300
|
+
return microTemplate(messages[locale][messageKey], params);
|
|
301
|
+
};
|
|
302
|
+
function readableWarning(readableOptions, locale, colorCode, colorName, bgColorCode, bgColorName, themeName) {
|
|
303
|
+
if (!colorCode || !bgColorCode)
|
|
304
|
+
return;
|
|
305
|
+
if (!tinycolor.isReadable(colorCode, bgColorCode, readableOptions)) {
|
|
306
|
+
return getMessage(locale, 'readableWarning', { colorCode, colorName: getMessage(locale, `${colorName}`), bgColorCode, bgColorName: getMessage(locale, `${bgColorName}`), themeName: getMessage(locale, `theme.${themeName}`) });
|
|
307
|
+
}
|
|
295
308
|
}
|
|
296
|
-
export function getColorsWarnings
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
const
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
309
|
+
export function getColorsWarnings(locale, colors, themeName, readableOptions) {
|
|
310
|
+
if (locale !== 'fr' && locale !== 'en')
|
|
311
|
+
locale = 'en';
|
|
312
|
+
const warnings = [];
|
|
313
|
+
for (const color of ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'admin']) {
|
|
314
|
+
const textColor = colors[`text-${color}`] ?? colors[color];
|
|
315
|
+
warnings.push(readableWarning(readableOptions, locale, textColor, `text-${color}`, colors.background, 'background', themeName));
|
|
316
|
+
warnings.push(readableWarning(readableOptions, locale, textColor, `text-${color}`, colors.surface, 'surface', themeName));
|
|
317
|
+
}
|
|
318
|
+
for (const color of ['background', 'surface', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'admin']) {
|
|
319
|
+
warnings.push(readableWarning(readableOptions, locale, colors[`on-${color}`], 'text', colors[color], color, themeName));
|
|
320
|
+
}
|
|
321
|
+
return warnings.filter(w => w !== undefined);
|
|
307
322
|
}
|
|
308
|
-
export const readableOptions = { level: 'AA', size: 'small' }
|
|
309
|
-
export const hcReadableOptions = { level: 'AAA', size: 'small' }
|
|
310
|
-
export function getSiteColorsWarnings
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
323
|
+
export const readableOptions = { level: 'AA', size: 'small' };
|
|
324
|
+
export const hcReadableOptions = { level: 'AAA', size: 'small' };
|
|
325
|
+
export function getSiteColorsWarnings(locale, theme, authProviders) {
|
|
326
|
+
if (locale !== 'fr' && locale !== 'en')
|
|
327
|
+
locale = 'en';
|
|
328
|
+
let warnings = getColorsWarnings(locale, theme.colors, 'default', readableOptions);
|
|
329
|
+
if (theme.dark && theme.darkColors)
|
|
330
|
+
warnings = warnings.concat(getColorsWarnings(locale, theme.darkColors, 'dark', readableOptions));
|
|
331
|
+
if (theme.hc && theme.hcColors)
|
|
332
|
+
warnings = warnings.concat(getColorsWarnings(locale, theme.hcColors, 'hc', hcReadableOptions));
|
|
333
|
+
if (theme.hcDark && theme.hcDarkColors)
|
|
334
|
+
warnings = warnings.concat(getColorsWarnings(locale, theme.hcDarkColors, 'hcDark', hcReadableOptions));
|
|
335
|
+
if (authProviders) {
|
|
336
|
+
for (const p of authProviders) {
|
|
337
|
+
if (p.color && p.title) {
|
|
338
|
+
if (!tinycolor.isReadable('#FFFFFF', p.color, readableOptions)) {
|
|
339
|
+
warnings.push(getMessage(locale, 'readableWarning', { colorCode: '#FFFFFF', colorName: getMessage(locale, 'colors.white'), bgColorCode: p.color, bgColorName: getMessage(locale, 'colors.authProvider', { title: p.title }) }));
|
|
340
|
+
}
|
|
341
|
+
}
|
|
320
342
|
}
|
|
321
|
-
}
|
|
322
343
|
}
|
|
323
|
-
|
|
324
|
-
return warnings.filter(w => w !== undefined)
|
|
344
|
+
return warnings.filter(w => w !== undefined);
|
|
325
345
|
}
|