theme-vir 28.12.2 → 28.14.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/dist/color/color-palette-book-pages.d.ts +16 -0
- package/dist/color/color-palette-book-pages.js +303 -0
- package/dist/color/color-theme-book-pages.js +2 -0
- package/dist/color/elements/theme-vir-color-example.element.d.ts +2 -0
- package/dist/color/elements/theme-vir-color-example.element.js +2 -0
- package/dist/color/elements/theme-vir-contrast-indicator.element.d.ts +2 -1
- package/dist/color/elements/theme-vir-contrast-indicator.element.js +3 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +8 -8
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
import { type BookPage } from 'element-book';
|
|
3
|
+
import { type CssVarDefinitions, type CssVarsSetup } from 'lit-css-vars';
|
|
4
|
+
/**
|
|
5
|
+
* Create multiple element-book pages to showcase a bunch of color CSS variables.
|
|
6
|
+
*
|
|
7
|
+
* @category Color Theme
|
|
8
|
+
* @see `createColorThemeBookPages` for creating full color theme pages.
|
|
9
|
+
*/
|
|
10
|
+
export declare function createColorPaletteBookPages({ colors, parent, title, includeContrast, }: {
|
|
11
|
+
parent: Readonly<BookPage>;
|
|
12
|
+
title: string;
|
|
13
|
+
colors: CssVarDefinitions<CssVarsSetup>;
|
|
14
|
+
} & PartialWithUndefined<{
|
|
15
|
+
includeContrast: boolean;
|
|
16
|
+
}>): (BookPage<{}, Readonly<BookPage>, {}> | BookPage<{}, BookPage<{}, Readonly<BookPage>, {}>, {}>)[];
|
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
import { check } from '@augment-vir/assert';
|
|
2
|
+
import { getOrSet } from '@augment-vir/common';
|
|
3
|
+
import { defineBookPage } from 'element-book';
|
|
4
|
+
import { css, html, unsafeCSS } from 'element-vir';
|
|
5
|
+
import { noNativeSpacing, viraColorPalette } from 'vira';
|
|
6
|
+
import { ThemeVirColorExample } from './elements/theme-vir-color-example.element.js';
|
|
7
|
+
const blackWhiteCells = [
|
|
8
|
+
{
|
|
9
|
+
title: 'Black',
|
|
10
|
+
fontWeight: 400,
|
|
11
|
+
foreground: viraColorPalette['vira-black'],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
title: 'Black',
|
|
15
|
+
fontWeight: 700,
|
|
16
|
+
foreground: viraColorPalette['vira-black'],
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: 'White',
|
|
20
|
+
fontWeight: 400,
|
|
21
|
+
foreground: viraColorPalette['vira-white'],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
title: 'White',
|
|
25
|
+
fontWeight: 700,
|
|
26
|
+
foreground: viraColorPalette['vira-white'],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: 'Black',
|
|
30
|
+
fontWeight: 400,
|
|
31
|
+
background: viraColorPalette['vira-black'],
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
title: 'Black',
|
|
35
|
+
fontWeight: 700,
|
|
36
|
+
background: viraColorPalette['vira-black'],
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
title: 'White',
|
|
40
|
+
fontWeight: 400,
|
|
41
|
+
background: viraColorPalette['vira-white'],
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
title: 'White',
|
|
45
|
+
fontWeight: 700,
|
|
46
|
+
background: viraColorPalette['vira-white'],
|
|
47
|
+
},
|
|
48
|
+
];
|
|
49
|
+
const omittedColors = [
|
|
50
|
+
'#000000',
|
|
51
|
+
'#ffffff',
|
|
52
|
+
'#000',
|
|
53
|
+
'#fff',
|
|
54
|
+
'white',
|
|
55
|
+
'black',
|
|
56
|
+
];
|
|
57
|
+
/**
|
|
58
|
+
* Create multiple element-book pages to showcase a bunch of color CSS variables.
|
|
59
|
+
*
|
|
60
|
+
* @category Color Theme
|
|
61
|
+
* @see `createColorThemeBookPages` for creating full color theme pages.
|
|
62
|
+
*/
|
|
63
|
+
export function createColorPaletteBookPages({ colors, parent, title, includeContrast, }) {
|
|
64
|
+
const colorGroups = {};
|
|
65
|
+
Object.entries(colors).forEach(([key, color,]) => {
|
|
66
|
+
if (omittedColors.includes(color.default)) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
// eslint-disable-next-line sonarjs/slow-regex
|
|
70
|
+
const groupName = key.replace(/-[\d-]+$/, '');
|
|
71
|
+
const suffix = key.replace(groupName, '').replace(/^-+/, '');
|
|
72
|
+
getOrSet(colorGroups, groupName, () => []).push({
|
|
73
|
+
key,
|
|
74
|
+
suffix,
|
|
75
|
+
value: color.default,
|
|
76
|
+
definition: color,
|
|
77
|
+
varName: String(color.name),
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
const topColorsPage = defineBookPage({
|
|
81
|
+
parent,
|
|
82
|
+
title,
|
|
83
|
+
});
|
|
84
|
+
const colorPalettePage = defineBookPage({
|
|
85
|
+
parent: topColorsPage,
|
|
86
|
+
title: `${title} Palette`,
|
|
87
|
+
defineExamples({ defineExample }) {
|
|
88
|
+
Object.entries(colorGroups).forEach(([groupName, colors,]) => {
|
|
89
|
+
defineExample({
|
|
90
|
+
title: groupName,
|
|
91
|
+
styles: css `
|
|
92
|
+
:host {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.swatch-wrapper {
|
|
98
|
+
display: flex;
|
|
99
|
+
gap: 4px;
|
|
100
|
+
align-items: center;
|
|
101
|
+
|
|
102
|
+
& .swatch {
|
|
103
|
+
width: 50px;
|
|
104
|
+
height: 50px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
& .color-details {
|
|
108
|
+
font-family: monospace;
|
|
109
|
+
font-size: 12px;
|
|
110
|
+
color: ${viraColorPalette['vira-grey-50'].value};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
& .color-value {
|
|
114
|
+
margin-left: 1ch;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
`,
|
|
118
|
+
render() {
|
|
119
|
+
return colors.map((color) => {
|
|
120
|
+
return html `
|
|
121
|
+
<div class="swatch-wrapper">
|
|
122
|
+
<div
|
|
123
|
+
class="swatch"
|
|
124
|
+
style=${css `
|
|
125
|
+
background-color: ${unsafeCSS(color.value)};
|
|
126
|
+
`}
|
|
127
|
+
></div>
|
|
128
|
+
<p class="color-details">
|
|
129
|
+
<span>${color.varName}</span>
|
|
130
|
+
<br />
|
|
131
|
+
<span class="color-value">${color.value}</span>
|
|
132
|
+
</p>
|
|
133
|
+
</div>
|
|
134
|
+
`;
|
|
135
|
+
});
|
|
136
|
+
},
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
},
|
|
140
|
+
});
|
|
141
|
+
const blackWhiteContrastPage = defineBookPage({
|
|
142
|
+
parent: topColorsPage,
|
|
143
|
+
title: `${title} Contrast Black White`,
|
|
144
|
+
defineExamples({ defineExample }) {
|
|
145
|
+
Object.entries(colorGroups).forEach(([groupName, colors,]) => {
|
|
146
|
+
defineExample({
|
|
147
|
+
title: groupName,
|
|
148
|
+
styles: css `
|
|
149
|
+
:host {
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
gap: 24px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
p {
|
|
156
|
+
${noNativeSpacing}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.darkness-level {
|
|
160
|
+
text-align: center;
|
|
161
|
+
font-size: 12px;
|
|
162
|
+
color: ${viraColorPalette['vira-grey-50'].value};
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
td {
|
|
166
|
+
padding: 4px 0;
|
|
167
|
+
}
|
|
168
|
+
`,
|
|
169
|
+
render() {
|
|
170
|
+
const colorRowTemplates = colors.map((color) => {
|
|
171
|
+
const cellTemplates = blackWhiteCells.map((cell) => {
|
|
172
|
+
return html `
|
|
173
|
+
<td>
|
|
174
|
+
<p class="darkness-level">${color.suffix}</p>
|
|
175
|
+
<${ThemeVirColorExample.assign({
|
|
176
|
+
color: {
|
|
177
|
+
background: cell.background || color.definition,
|
|
178
|
+
foreground: cell.foreground || color.definition,
|
|
179
|
+
},
|
|
180
|
+
showVarValues: true,
|
|
181
|
+
showVarNames: false,
|
|
182
|
+
showContrast: true,
|
|
183
|
+
fontWeight: cell.fontWeight,
|
|
184
|
+
})}></${ThemeVirColorExample}>
|
|
185
|
+
</td>
|
|
186
|
+
`;
|
|
187
|
+
});
|
|
188
|
+
return html `
|
|
189
|
+
<tr>${cellTemplates}</tr>
|
|
190
|
+
`;
|
|
191
|
+
});
|
|
192
|
+
const headerCells = blackWhiteCells.map((cell) => {
|
|
193
|
+
const layerText = cell.background ? 'in back' : 'in front';
|
|
194
|
+
const title = [
|
|
195
|
+
cell.title,
|
|
196
|
+
`(${layerText})`,
|
|
197
|
+
`(${cell.fontWeight})`,
|
|
198
|
+
].join(' ');
|
|
199
|
+
return html `
|
|
200
|
+
<th>${title}</th>
|
|
201
|
+
`;
|
|
202
|
+
});
|
|
203
|
+
return html `
|
|
204
|
+
<table cellspacing="0" cellpadding="0">
|
|
205
|
+
<thead><tr>${headerCells}</tr></thead>
|
|
206
|
+
<tbody>${colorRowTemplates}</tbody>
|
|
207
|
+
</table>
|
|
208
|
+
`;
|
|
209
|
+
},
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
},
|
|
213
|
+
});
|
|
214
|
+
function createSelfContrastPage(fontWeight) {
|
|
215
|
+
return defineBookPage({
|
|
216
|
+
parent: topColorsPage,
|
|
217
|
+
title: `${title} Contrast Self ${fontWeight}`,
|
|
218
|
+
defineExamples({ defineExample }) {
|
|
219
|
+
Object.entries(colorGroups).forEach(([groupName, colors,]) => {
|
|
220
|
+
const selfContrastCells = colors.map((color) => {
|
|
221
|
+
return {
|
|
222
|
+
fontWeight,
|
|
223
|
+
title: color.suffix,
|
|
224
|
+
foreground: color.definition,
|
|
225
|
+
};
|
|
226
|
+
});
|
|
227
|
+
defineExample({
|
|
228
|
+
title: groupName,
|
|
229
|
+
styles: css `
|
|
230
|
+
:host {
|
|
231
|
+
display: flex;
|
|
232
|
+
flex-direction: column;
|
|
233
|
+
gap: 24px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
p {
|
|
237
|
+
${noNativeSpacing}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.darkness-level {
|
|
241
|
+
text-align: center;
|
|
242
|
+
font-size: 12px;
|
|
243
|
+
color: ${viraColorPalette['vira-grey-50'].value};
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
td {
|
|
247
|
+
padding: 4px 0;
|
|
248
|
+
}
|
|
249
|
+
`,
|
|
250
|
+
render() {
|
|
251
|
+
const colorRowTemplates = colors.map((color) => {
|
|
252
|
+
const cellTemplates = selfContrastCells.map((cell) => {
|
|
253
|
+
return html `
|
|
254
|
+
<td>
|
|
255
|
+
<p class="darkness-level">${color.suffix}</p>
|
|
256
|
+
<${ThemeVirColorExample.assign({
|
|
257
|
+
color: {
|
|
258
|
+
background: cell.background || color.definition,
|
|
259
|
+
foreground: cell.foreground || color.definition,
|
|
260
|
+
},
|
|
261
|
+
showVarValues: true,
|
|
262
|
+
showVarNames: false,
|
|
263
|
+
showContrast: true,
|
|
264
|
+
fontWeight: cell.fontWeight,
|
|
265
|
+
})}></${ThemeVirColorExample}>
|
|
266
|
+
</td>
|
|
267
|
+
`;
|
|
268
|
+
});
|
|
269
|
+
return html `
|
|
270
|
+
<tr>${cellTemplates}</tr>
|
|
271
|
+
`;
|
|
272
|
+
});
|
|
273
|
+
const headerCells = selfContrastCells.map((cell) => {
|
|
274
|
+
const layerText = cell.background ? 'in back' : 'in front';
|
|
275
|
+
const title = [
|
|
276
|
+
cell.title,
|
|
277
|
+
`(${layerText})`,
|
|
278
|
+
`(${cell.fontWeight})`,
|
|
279
|
+
].join(' ');
|
|
280
|
+
return html `
|
|
281
|
+
<th>${title}</th>
|
|
282
|
+
`;
|
|
283
|
+
});
|
|
284
|
+
return html `
|
|
285
|
+
<table cellspacing="0" cellpadding="0">
|
|
286
|
+
<thead><tr>${headerCells}</tr></thead>
|
|
287
|
+
<tbody>${colorRowTemplates}</tbody>
|
|
288
|
+
</table>
|
|
289
|
+
`;
|
|
290
|
+
},
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
},
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
return [
|
|
297
|
+
topColorsPage,
|
|
298
|
+
colorPalettePage,
|
|
299
|
+
includeContrast ? blackWhiteContrastPage : undefined,
|
|
300
|
+
includeContrast ? createSelfContrastPage(400) : undefined,
|
|
301
|
+
includeContrast ? createSelfContrastPage(700) : undefined,
|
|
302
|
+
].filter(check.isTruthy);
|
|
303
|
+
}
|
|
@@ -44,6 +44,7 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
|
|
|
44
44
|
showVarValues: true,
|
|
45
45
|
showVarNames: controls['Show Var Names'] || state.forceShowEverything,
|
|
46
46
|
showContrast: controls['Show Contrast Tips'] || state.forceShowEverything,
|
|
47
|
+
fontWeight: 400,
|
|
47
48
|
})}
|
|
48
49
|
${listen(ThemeVirColorExample.events.toggleShowVars, () => {
|
|
49
50
|
updateState({
|
|
@@ -62,6 +63,7 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
|
|
|
62
63
|
showVarValues: false,
|
|
63
64
|
showVarNames: controls['Show Var Names'] || state.forceShowEverything,
|
|
64
65
|
showContrast: controls['Show Contrast Tips'] || state.forceShowEverything,
|
|
66
|
+
fontWeight: 400,
|
|
65
67
|
})}
|
|
66
68
|
${listen(ThemeVirColorExample.events.toggleShowVars, () => {
|
|
67
69
|
updateState({
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type ColorThemeColor } from '../color-theme.js';
|
|
2
|
+
import { type FontSizeWeights } from '../contrast.js';
|
|
2
3
|
/**
|
|
3
4
|
* Showcase a theme-vir color theme color.
|
|
4
5
|
*
|
|
@@ -9,6 +10,7 @@ export declare const ThemeVirColorExample: import("element-vir").DeclarativeElem
|
|
|
9
10
|
showVarValues: boolean;
|
|
10
11
|
showVarNames: boolean;
|
|
11
12
|
showContrast: boolean;
|
|
13
|
+
fontWeight: FontSizeWeights;
|
|
12
14
|
}, {
|
|
13
15
|
previewElement: undefined | HTMLElement;
|
|
14
16
|
}, {
|
|
@@ -151,6 +151,7 @@ export const ThemeVirColorExample = defineElement()({
|
|
|
151
151
|
? html `
|
|
152
152
|
<${ThemeVirContrastIndicator.assign({
|
|
153
153
|
contrast,
|
|
154
|
+
fontWeight: inputs.fontWeight,
|
|
154
155
|
})}></${ThemeVirContrastIndicator}>
|
|
155
156
|
`
|
|
156
157
|
: nothing;
|
|
@@ -179,6 +180,7 @@ export const ThemeVirColorExample = defineElement()({
|
|
|
179
180
|
visibility: ${unsafeCSS((contrast?.fontSizes[400] || Infinity) > 150
|
|
180
181
|
? 'hidden'
|
|
181
182
|
: 'visible')};
|
|
183
|
+
font-weight: ${inputs.fontWeight};
|
|
182
184
|
font-size: ${contrast ? contrast.fontSizes[400] : 14}px;
|
|
183
185
|
`}
|
|
184
186
|
>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type CalculatedContrast } from '../contrast.js';
|
|
1
|
+
import { type CalculatedContrast, type FontSizeWeights } from '../contrast.js';
|
|
2
2
|
/**
|
|
3
3
|
* Show contrast details for a theme-vir color.
|
|
4
4
|
*
|
|
@@ -6,4 +6,5 @@ import { type CalculatedContrast } from '../contrast.js';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const ThemeVirContrastIndicator: import("element-vir").DeclarativeElementDefinition<"theme-vir-contrast-indicator", {
|
|
8
8
|
contrast: Readonly<CalculatedContrast>;
|
|
9
|
+
fontWeight: FontSizeWeights;
|
|
9
10
|
}, {}, {}, "theme-vir-contrast-indicator-", "theme-vir-contrast-indicator-", readonly [], readonly []>;
|
|
@@ -76,7 +76,9 @@ export const ThemeVirContrastIndicator = defineElement()({
|
|
|
76
76
|
'\nFont weights to font sizes:',
|
|
77
77
|
JSON.stringify(inputs.contrast.fontSizes, null, 4),
|
|
78
78
|
].join('\n');
|
|
79
|
-
const fontSize = inputs.contrast.fontSizes[
|
|
79
|
+
const fontSize = inputs.contrast.fontSizes[inputs.fontWeight] > 150
|
|
80
|
+
? '-'
|
|
81
|
+
: `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
|
|
80
82
|
return html `
|
|
81
83
|
<div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
|
|
82
84
|
<div class="gauge">${gaugeLevels}</div>
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "theme-vir",
|
|
3
|
-
"version": "28.
|
|
3
|
+
"version": "28.14.0",
|
|
4
4
|
"description": "Create an entire web theme.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -42,29 +42,29 @@
|
|
|
42
42
|
"test:docs": "virmator docs check"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@augment-vir/assert": "^31.
|
|
46
|
-
"@augment-vir/common": "^31.
|
|
45
|
+
"@augment-vir/assert": "^31.57.3",
|
|
46
|
+
"@augment-vir/common": "^31.57.3",
|
|
47
47
|
"apca-w3": "^0.1.9",
|
|
48
48
|
"lit-css-vars": "^3.0.11",
|
|
49
49
|
"type-fest": "^5.3.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@augment-vir/test": "^31.
|
|
52
|
+
"@augment-vir/test": "^31.57.3",
|
|
53
53
|
"@types/apca-w3": "^0.1.3",
|
|
54
54
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
55
55
|
"@web/test-runner": "^0.20.2",
|
|
56
56
|
"@web/test-runner-commands": "^0.9.0",
|
|
57
57
|
"@web/test-runner-playwright": "^0.11.1",
|
|
58
58
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
59
|
-
"element-book": "^26.
|
|
60
|
-
"element-vir": "^26.
|
|
61
|
-
"esbuild": "^0.27.
|
|
59
|
+
"element-book": "^26.13.0",
|
|
60
|
+
"element-vir": "^26.13.0",
|
|
61
|
+
"esbuild": "^0.27.2",
|
|
62
62
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
63
63
|
"markdown-code-example-inserter": "^3.0.3",
|
|
64
64
|
"typedoc": "^0.28.15",
|
|
65
65
|
"typescript": "5.9.3",
|
|
66
66
|
"vite": "^7.3.0",
|
|
67
|
-
"vite-tsconfig-paths": "^
|
|
67
|
+
"vite-tsconfig-paths": "^6.0.3"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"element-book": ">=17",
|