theme-vir 28.23.0 → 28.24.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 (3) hide show
  1. package/dist/color-theme/color-palette-book-pages.d.ts +1 -1
  2. package/dist/color-theme/color-palette-book-pages.js +101 -63
  3. package/package.json +1 -1
package/dist/color-theme/color-palette-book-pages.d.ts CHANGED
@@ -8,10 +8,10 @@ import { type BuildLowLevelColorThemeOptions, type ColorPaletteVars } from './bu
8
8
  * @see `createColorThemeBookPages` for creating full color theme pages.
9
9
  */
10
10
  export declare function createColorPaletteBookPages({ colors, parent, title, includeContrast, includeTheme, useVerticalTheme, options, }: {
11
- parent: Readonly<BookPage>;
12
11
  title: string;
13
12
  colors: Readonly<ColorPaletteVars>;
14
13
  } & PartialWithUndefined<{
14
+ parent: Readonly<BookPage>;
15
15
  includeContrast: boolean;
16
16
  includeTheme: boolean;
17
17
  useVerticalTheme: boolean;
package/dist/color-theme/color-palette-book-pages.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { check } from '@augment-vir/assert';
2
2
  import { VirColorPair } from '@electrovir/color';
3
3
  import { defineBookPage } from 'element-book';
4
- import { css, html, unsafeCSS } from 'element-vir';
5
- import { noNativeSpacing, viraColorPalette, viraTheme } from 'vira';
4
+ import { css, html, listen, unsafeCSS } from 'element-vir';
5
+ import { noNativeSpacing, viraTheme } from 'vira';
6
6
  import { buildColorTheme, groupColors, } from './build-color-theme.js';
7
7
  import { createColorThemeBookPages } from './color-theme-book-pages.js';
8
8
  import { themeDefaultKey } from './color-theme.js';
@@ -64,58 +64,94 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
64
64
  parent: topColorsPage,
65
65
  title: 'Palette',
66
66
  defineExamples({ defineExample }) {
67
- Object.entries(colorGroups).forEach(([groupName, colors,]) => {
68
- defineExample({
69
- title: groupName,
70
- styles: css `
71
- :host {
72
- display: flex;
73
- flex-direction: column;
74
- }
67
+ defineExample({
68
+ title: 'All Colors',
69
+ styles: css `
70
+ :host {
71
+ display: flex;
72
+ flex-direction: row;
73
+ }
75
74
 
76
- .swatch-wrapper {
77
- display: flex;
78
- gap: 4px;
79
- align-items: center;
75
+ p {
76
+ ${noNativeSpacing}
77
+ }
80
78
 
81
- & .swatch {
82
- width: 50px;
83
- height: 50px;
84
- }
79
+ .color-column {
80
+ display: flex;
81
+ flex-direction: column;
82
+ }
85
83
 
86
- & .color-details {
87
- font-family: monospace;
88
- font-size: 12px;
89
- color: ${viraColorPalette['vira-grey-50'].value};
90
- }
84
+ .column-title {
85
+ text-align: center;
86
+ font-size: 12px;
87
+ padding-bottom: 4px;
88
+ border-bottom: 1px solid
89
+ ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
90
+ margin-bottom: 4px;
91
+ color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground
92
+ .value};
93
+ }
91
94
 
92
- & .color-value {
93
- margin-left: 1ch;
94
- }
95
- }
96
- `,
97
- render() {
98
- return colors.map((color) => {
95
+ .swatch-wrapper {
96
+ display: flex;
97
+ gap: 4px;
98
+ align-items: center;
99
+
100
+ & .swatch {
101
+ width: 50px;
102
+ height: 50px;
103
+ cursor: pointer;
104
+ }
105
+
106
+ & .color-details {
107
+ display: none;
108
+ font-family: monospace;
109
+ font-size: 12px;
110
+ color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground
111
+ .value};
112
+ }
113
+
114
+ &.expanded .color-details {
115
+ display: block;
116
+ }
117
+
118
+ & .color-value {
119
+ margin-left: 1ch;
120
+ }
121
+ }
122
+ `,
123
+ render() {
124
+ return Object.entries(colorGroups).map(([groupName, colors,]) => {
125
+ return html `
126
+ <div class="color-column">
127
+ <p class="column-title">${groupName}</p>
128
+ ${colors.map((color) => {
99
129
  return html `
100
- <div class="swatch-wrapper">
101
- <div
102
- class="swatch"
103
- style=${css `
104
- background-color: ${unsafeCSS(color.definition.default)};
105
- `}
106
- ></div>
107
- <p class="color-details">
108
- <span>${color.cssVarName}</span>
109
- <br />
110
- <span class="color-value">
111
- ${color.definition.default}
112
- </span>
113
- </p>
114
- </div>
115
- `;
116
- });
117
- },
118
- });
130
+ <div class="swatch-wrapper">
131
+ <div
132
+ class="swatch"
133
+ style=${css `
134
+ background-color: ${unsafeCSS(color.definition.default)};
135
+ `}
136
+ ${listen('click', (event) => {
137
+ const wrapper = event.currentTarget.parentElement;
138
+ wrapper?.classList.toggle('expanded');
139
+ })}
140
+ ></div>
141
+ <p class="color-details">
142
+ <span>${color.cssVarName}</span>
143
+ <br />
144
+ <span class="color-value">
145
+ ${color.definition.default}
146
+ </span>
147
+ </p>
148
+ </div>
149
+ `;
150
+ })}
151
+ </div>
152
+ `;
153
+ });
154
+ },
119
155
  });
120
156
  },
121
157
  });
@@ -148,7 +184,8 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
148
184
  .darkness-level {
149
185
  text-align: center;
150
186
  font-size: 12px;
151
- color: ${viraColorPalette['vira-grey-50'].value};
187
+ color: ${viraTheme.colors['vira-grey-foreground-header']
188
+ .foreground.value};
152
189
  }
153
190
 
154
191
  td {
@@ -212,24 +249,25 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
212
249
  };
213
250
  }));
214
251
  }
215
- const generatedTheme = buildColorTheme(colors, options);
252
+ function createThemePages() {
253
+ const generatedTheme = buildColorTheme(colors, options);
254
+ return createColorThemeBookPages({
255
+ parent: topColorsPage,
256
+ title: 'Theme (auto)',
257
+ theme: generatedTheme.defaultLight,
258
+ hideInverseColors: true,
259
+ useVerticalLayout: useVerticalTheme,
260
+ prefixGroupByCount: 2,
261
+ overrides: [generatedTheme.darkOverride],
262
+ });
263
+ }
216
264
  return [
217
265
  topColorsPage,
218
266
  colorPalettePage,
219
- contrastsPage,
267
+ includeContrast ? contrastsPage : undefined,
220
268
  includeContrast ? blackWhiteContrastPage : undefined,
221
269
  includeContrast ? createSelfContrastPage(400) : undefined,
222
270
  includeContrast ? createSelfContrastPage(700) : undefined,
223
- ...(includeTheme
224
- ? createColorThemeBookPages({
225
- parent: topColorsPage,
226
- title: 'Theme (auto)',
227
- theme: generatedTheme.defaultLight,
228
- hideInverseColors: true,
229
- useVerticalLayout: useVerticalTheme,
230
- prefixGroupByCount: 2,
231
- overrides: [generatedTheme.darkOverride],
232
- })
233
- : []),
271
+ ...(includeTheme ? createThemePages() : []),
234
272
  ].filter(check.isTruthy);
235
273
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "theme-vir",
3
- "version": "28.23.0",
3
+ "version": "28.24.0",
4
4
  "description": "Create an entire web theme.",
5
5
  "keywords": [
6
6
  "design",