theme-vir 28.23.1 → 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 +98 -62
  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,7 +1,7 @@
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';
4
+ import { css, html, listen, unsafeCSS } from 'element-vir';
5
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';
@@ -64,59 +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: ${viraTheme.colors['vira-grey-foreground-header']
90
- .foreground.value};
91
- }
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
+ }
92
94
 
93
- & .color-value {
94
- margin-left: 1ch;
95
- }
96
- }
97
- `,
98
- render() {
99
- 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) => {
100
129
  return html `
101
- <div class="swatch-wrapper">
102
- <div
103
- class="swatch"
104
- style=${css `
105
- background-color: ${unsafeCSS(color.definition.default)};
106
- `}
107
- ></div>
108
- <p class="color-details">
109
- <span>${color.cssVarName}</span>
110
- <br />
111
- <span class="color-value">
112
- ${color.definition.default}
113
- </span>
114
- </p>
115
- </div>
116
- `;
117
- });
118
- },
119
- });
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
+ },
120
155
  });
121
156
  },
122
157
  });
@@ -214,24 +249,25 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
214
249
  };
215
250
  }));
216
251
  }
217
- 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
+ }
218
264
  return [
219
265
  topColorsPage,
220
266
  colorPalettePage,
221
- contrastsPage,
267
+ includeContrast ? contrastsPage : undefined,
222
268
  includeContrast ? blackWhiteContrastPage : undefined,
223
269
  includeContrast ? createSelfContrastPage(400) : undefined,
224
270
  includeContrast ? createSelfContrastPage(700) : undefined,
225
- ...(includeTheme
226
- ? createColorThemeBookPages({
227
- parent: topColorsPage,
228
- title: 'Theme (auto)',
229
- theme: generatedTheme.defaultLight,
230
- hideInverseColors: true,
231
- useVerticalLayout: useVerticalTheme,
232
- prefixGroupByCount: 2,
233
- overrides: [generatedTheme.darkOverride],
234
- })
235
- : []),
271
+ ...(includeTheme ? createThemePages() : []),
236
272
  ].filter(check.isTruthy);
237
273
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "theme-vir",
3
- "version": "28.23.1",
3
+ "version": "28.24.0",
4
4
  "description": "Create an entire web theme.",
5
5
  "keywords": [
6
6
  "design",