vira 31.13.2 → 31.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.
Files changed (16) hide show
  1. package/dist/elements/vira-button.element.d.ts +2 -2
  2. package/dist/elements/vira-button.element.js +62 -168
  3. package/dist/elements/vira-collapsible-card.element.js +5 -7
  4. package/dist/elements/vira-tabs.element.d.ts +3 -3
  5. package/dist/elements/vira-tabs.element.js +44 -11
  6. package/dist/elements/vira-tag.element.d.ts +3 -3
  7. package/dist/elements/vira-tag.element.js +23 -18
  8. package/dist/styles/form-styles.js +7 -7
  9. package/dist/styles/form-variants.d.ts +5 -3
  10. package/dist/styles/form-variants.js +9 -3
  11. package/dist/styles/vira-color-palette.d.ts +0 -19
  12. package/dist/styles/vira-color-palette.js +0 -19
  13. package/dist/styles/vira-color-theme-object.d.ts +1 -1
  14. package/dist/styles/vira-color-theme.d.ts +24 -310
  15. package/dist/styles/vira-color-theme.js +24 -280
  16. package/package.json +1 -1
package/dist/elements/vira-button.element.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
30
30
  * Set a predefined color variant. Set to `ViraColorVariant.None` for maximum customization.
31
31
  * In that case, you will need to use this element's CSS vars to customize the colors.
32
32
  *
33
- * @default ViraColorVariant.Accent,
33
+ * @default ViraColorVariant.Info,
34
34
  */
35
35
  colorVariant: ViraColorVariant;
36
36
  /**
@@ -39,4 +39,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
39
39
  * @default false
40
40
  */
41
41
  showMenuCaret: boolean;
42
- }>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-accent" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-danger" | "vira-button-color-warning" | "vira-button-color-positive" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;
42
+ }>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-info" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-danger" | "vira-button-color-warning" | "vira-button-color-positive" | "vira-button-color-special" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;
package/dist/elements/vira-button.element.js CHANGED
@@ -1,86 +1,98 @@
1
+ import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
2
+ import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
1
3
  import { css, html, nothing, unsafeCSS } from 'element-vir';
2
4
  import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
3
5
  import { ChevronDown16Icon } from '../icons/index.js';
4
6
  import { createFocusStyles } from '../styles/focus.js';
5
7
  import { viraFormCssVars } from '../styles/form-styles.js';
6
- import { viraColorVariants, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
8
+ import { viraColorVariants, viraColorVariantToColorName, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
7
9
  import { noUserSelect, ViraColorVariant, ViraEmphasis, ViraSize, viraTheme, } from '../styles/index.js';
8
10
  import { noNativeFormStyles } from '../styles/native-styles.js';
11
+ import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
9
12
  import { defineViraElement } from '../util/define-vira-element.js';
10
13
  import { ViraIcon } from './vira-icon.element.js';
11
14
  const transparentColor = {
12
15
  value: css `transparent`,
13
16
  };
14
- const colorVariantColors = {
15
- [ViraColorVariant.Plain]: {
17
+ function buildThemedButtonColors(colorVariant) {
18
+ const colorName = viraColorVariantToColorName[colorVariant];
19
+ const behindBg = viraThemeByKeys[colorName]['behind-bg'];
20
+ const foreground = viraThemeByKeys[colorName].foreground;
21
+ const onSelf = viraThemeByKeys[colorName]['on-self'];
22
+ return {
16
23
  [ViraEmphasis.Standard]: {
17
24
  idle: {
18
- backgroundColor: viraTheme.inverse[themeDefaultKey].background,
19
- textColor: viraTheme.inverse[themeDefaultKey].foreground,
20
- borderColor: viraTheme.inverse[themeDefaultKey].background,
25
+ backgroundColor: behindBg[ContrastLevelName.NonBodyText].background,
26
+ textColor: behindBg[ContrastLevelName.NonBodyText].foreground,
27
+ borderColor: behindBg[ContrastLevelName.BodyText].background,
21
28
  },
22
29
  hover: {
23
- backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
24
- textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
25
- borderColor: viraTheme.inverse[themeDefaultKey].background,
30
+ backgroundColor: behindBg[ContrastLevelName.Header].background,
31
+ textColor: behindBg[ContrastLevelName.Header].foreground,
32
+ borderColor: behindBg[ContrastLevelName.BodyText].background,
26
33
  },
27
34
  active: {
28
- backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
29
- textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
30
- borderColor: viraTheme.inverse[themeDefaultKey].background,
35
+ backgroundColor: behindBg[ContrastLevelName.BodyText].background,
36
+ textColor: behindBg[ContrastLevelName.BodyText].foreground,
37
+ borderColor: behindBg[ContrastLevelName.BodyText].background,
31
38
  },
32
39
  },
33
40
  [ViraEmphasis.Subtle]: {
34
41
  idle: {
35
42
  backgroundColor: transparentColor,
36
- textColor: viraTheme.colors[themeDefaultKey].foreground,
43
+ textColor: foreground[ContrastLevelName.NonBodyText].foreground,
37
44
  borderColor: transparentColor,
38
45
  },
39
46
  hover: {
40
- backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
41
- textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
42
- borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
47
+ backgroundColor: onSelf[ContrastLevelName.BodyText].background,
48
+ textColor: onSelf[ContrastLevelName.BodyText].foreground,
49
+ borderColor: onSelf[ContrastLevelName.BodyText].foreground,
43
50
  },
44
51
  active: {
45
- backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
46
- textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
47
- borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
52
+ backgroundColor: onSelf[ContrastLevelName.NonBodyText].background,
53
+ textColor: onSelf[ContrastLevelName.NonBodyText].foreground,
54
+ borderColor: onSelf[ContrastLevelName.NonBodyText].foreground,
48
55
  },
49
56
  },
50
- },
51
- [ViraColorVariant.Accent]: {
57
+ };
58
+ }
59
+ const colorVariantColors = {
60
+ ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
61
+ return buildThemedButtonColors(colorVariant);
62
+ }),
63
+ [ViraColorVariant.Plain]: {
52
64
  [ViraEmphasis.Standard]: {
53
65
  idle: {
54
- backgroundColor: viraTheme.colors['vira-accent-behind-bg-non-body'].background,
55
- textColor: viraTheme.colors['vira-accent-behind-bg-non-body'].foreground,
56
- borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
66
+ backgroundColor: viraTheme.inverse[themeDefaultKey].background,
67
+ textColor: viraTheme.inverse[themeDefaultKey].foreground,
68
+ borderColor: viraTheme.inverse[themeDefaultKey].background,
57
69
  },
58
70
  hover: {
59
- backgroundColor: viraTheme.colors['vira-accent-behind-bg-header'].background,
60
- textColor: viraTheme.colors['vira-accent-behind-bg-header'].foreground,
61
- borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
71
+ backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
72
+ textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
73
+ borderColor: viraTheme.inverse[themeDefaultKey].background,
62
74
  },
63
75
  active: {
64
- backgroundColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
65
- textColor: viraTheme.colors['vira-accent-behind-bg-body'].foreground,
66
- borderColor: viraTheme.colors['vira-accent-behind-bg-body'].background,
76
+ backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
77
+ textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
78
+ borderColor: viraTheme.inverse[themeDefaultKey].background,
67
79
  },
68
80
  },
69
81
  [ViraEmphasis.Subtle]: {
70
82
  idle: {
71
83
  backgroundColor: transparentColor,
72
- textColor: viraTheme.colors['vira-accent-foreground-non-body'].foreground,
84
+ textColor: viraTheme.colors[themeDefaultKey].foreground,
73
85
  borderColor: transparentColor,
74
86
  },
75
87
  hover: {
76
- backgroundColor: viraTheme.colors['vira-accent-on-self-body'].background,
77
- textColor: viraTheme.colors['vira-accent-on-self-body'].foreground,
78
- borderColor: viraTheme.colors['vira-accent-on-self-body'].foreground,
88
+ backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
89
+ textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
90
+ borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
79
91
  },
80
92
  active: {
81
- backgroundColor: viraTheme.colors['vira-accent-on-self-non-body'].background,
82
- textColor: viraTheme.colors['vira-accent-on-self-non-body'].foreground,
83
- borderColor: viraTheme.colors['vira-accent-on-self-non-body'].foreground,
93
+ backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
94
+ textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
95
+ borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
84
96
  },
85
97
  },
86
98
  },
@@ -102,131 +114,7 @@ const colorVariantColors = {
102
114
  borderColor: viraFormCssVars['vira-form-border-color'],
103
115
  },
104
116
  },
105
- [ViraEmphasis.Subtle]: {
106
- idle: {
107
- backgroundColor: transparentColor,
108
- textColor: viraTheme.colors['vira-grey-foreground-non-body'].foreground,
109
- borderColor: transparentColor,
110
- },
111
- hover: {
112
- backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
113
- textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
114
- borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
115
- },
116
- active: {
117
- backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
118
- textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
119
- borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
120
- },
121
- },
122
- },
123
- [ViraColorVariant.Danger]: {
124
- [ViraEmphasis.Standard]: {
125
- idle: {
126
- backgroundColor: viraTheme.colors['vira-red-behind-bg-non-body'].background,
127
- textColor: viraTheme.colors['vira-red-behind-bg-non-body'].foreground,
128
- borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
129
- },
130
- hover: {
131
- backgroundColor: viraTheme.colors['vira-red-behind-bg-header'].background,
132
- textColor: viraTheme.colors['vira-red-behind-bg-header'].foreground,
133
- borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
134
- },
135
- active: {
136
- backgroundColor: viraTheme.colors['vira-red-behind-bg-body'].background,
137
- textColor: viraTheme.colors['vira-red-behind-bg-body'].foreground,
138
- borderColor: viraTheme.colors['vira-red-behind-bg-body'].background,
139
- },
140
- },
141
- [ViraEmphasis.Subtle]: {
142
- idle: {
143
- backgroundColor: transparentColor,
144
- textColor: viraTheme.colors['vira-red-foreground-non-body'].foreground,
145
- borderColor: transparentColor,
146
- },
147
- hover: {
148
- backgroundColor: viraTheme.colors['vira-red-on-self-body'].background,
149
- textColor: viraTheme.colors['vira-red-on-self-body'].foreground,
150
- borderColor: viraTheme.colors['vira-red-on-self-body'].foreground,
151
- },
152
- active: {
153
- backgroundColor: viraTheme.colors['vira-red-on-self-non-body'].background,
154
- textColor: viraTheme.colors['vira-red-on-self-non-body'].foreground,
155
- borderColor: viraTheme.colors['vira-red-on-self-non-body'].foreground,
156
- },
157
- },
158
- },
159
- [ViraColorVariant.Warning]: {
160
- [ViraEmphasis.Standard]: {
161
- idle: {
162
- backgroundColor: viraTheme.colors['vira-yellow-behind-bg-non-body'].background,
163
- textColor: viraTheme.colors['vira-yellow-behind-bg-non-body'].foreground,
164
- borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
165
- },
166
- hover: {
167
- backgroundColor: viraTheme.colors['vira-yellow-behind-bg-header'].background,
168
- textColor: viraTheme.colors['vira-yellow-behind-bg-header'].foreground,
169
- borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
170
- },
171
- active: {
172
- backgroundColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
173
- textColor: viraTheme.colors['vira-yellow-behind-bg-body'].foreground,
174
- borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
175
- },
176
- },
177
- [ViraEmphasis.Subtle]: {
178
- idle: {
179
- backgroundColor: transparentColor,
180
- textColor: viraTheme.colors['vira-yellow-foreground-non-body'].foreground,
181
- borderColor: transparentColor,
182
- },
183
- hover: {
184
- backgroundColor: viraTheme.colors['vira-yellow-on-self-body'].background,
185
- textColor: viraTheme.colors['vira-yellow-on-self-body'].foreground,
186
- borderColor: viraTheme.colors['vira-yellow-on-self-body'].foreground,
187
- },
188
- active: {
189
- backgroundColor: viraTheme.colors['vira-yellow-on-self-non-body'].background,
190
- textColor: viraTheme.colors['vira-yellow-on-self-non-body'].foreground,
191
- borderColor: viraTheme.colors['vira-yellow-on-self-non-body'].foreground,
192
- },
193
- },
194
- },
195
- [ViraColorVariant.Positive]: {
196
- [ViraEmphasis.Standard]: {
197
- idle: {
198
- backgroundColor: viraTheme.colors['vira-green-behind-bg-non-body'].background,
199
- textColor: viraTheme.colors['vira-green-behind-bg-non-body'].foreground,
200
- borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
201
- },
202
- hover: {
203
- backgroundColor: viraTheme.colors['vira-green-behind-bg-header'].background,
204
- textColor: viraTheme.colors['vira-green-behind-bg-header'].foreground,
205
- borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
206
- },
207
- active: {
208
- backgroundColor: viraTheme.colors['vira-green-behind-bg-body'].background,
209
- textColor: viraTheme.colors['vira-green-behind-bg-body'].foreground,
210
- borderColor: viraTheme.colors['vira-green-behind-bg-body'].background,
211
- },
212
- },
213
- [ViraEmphasis.Subtle]: {
214
- idle: {
215
- backgroundColor: transparentColor,
216
- textColor: viraTheme.colors['vira-green-foreground-non-body'].foreground,
217
- borderColor: transparentColor,
218
- },
219
- hover: {
220
- backgroundColor: viraTheme.colors['vira-green-on-self-body'].background,
221
- textColor: viraTheme.colors['vira-green-on-self-body'].foreground,
222
- borderColor: viraTheme.colors['vira-green-on-self-body'].foreground,
223
- },
224
- active: {
225
- backgroundColor: viraTheme.colors['vira-green-on-self-non-body'].background,
226
- textColor: viraTheme.colors['vira-green-on-self-non-body'].foreground,
227
- borderColor: viraTheme.colors['vira-green-on-self-non-body'].foreground,
228
- },
229
- },
117
+ [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraColorVariant.Neutral)[ViraEmphasis.Subtle],
230
118
  },
231
119
  };
232
120
  /**
@@ -245,12 +133,18 @@ export const ViraButton = defineViraElement()({
245
133
  'vira-button-size-small': ({ inputs }) => inputs.buttonSize === ViraSize.Small,
246
134
  'vira-button-emphasis-standard': ({ inputs }) => !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard,
247
135
  'vira-button-emphasis-subtle': ({ inputs }) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
248
- 'vira-button-color-accent': ({ inputs }) => !inputs.colorVariant || inputs.colorVariant === ViraColorVariant.Accent,
249
- 'vira-button-color-plain': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Plain,
250
- 'vira-button-color-neutral': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Neutral,
251
- 'vira-button-color-danger': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Danger,
252
- 'vira-button-color-warning': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Warning,
253
- 'vira-button-color-positive': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Positive,
136
+ ...arrayToObject(viraColorVariants, (colorVariant) => {
137
+ return {
138
+ key: `vira-button-color-${colorVariant}`,
139
+ value: ({ inputs, }) => {
140
+ return colorVariant === ViraColorVariant.Plain
141
+ ? !inputs.colorVariant || inputs.colorVariant === colorVariant
142
+ : inputs.colorVariant === colorVariant;
143
+ },
144
+ };
145
+ }, {
146
+ useRequired: true,
147
+ }),
254
148
  'vira-button-disabled': ({ inputs }) => !!inputs.isDisabled,
255
149
  'vira-button-icon-only': ({ inputs }) => !inputs.text && !!inputs.icon,
256
150
  },
package/dist/elements/vira-collapsible-card.element.js CHANGED
@@ -115,13 +115,11 @@ export const ViraCollapsibleCard = defineViraElement()({
115
115
  isExpanded: true,
116
116
  });
117
117
  }
118
- const wrapperContentTemplate = state.isExpanded || inputs.expandOnPrint
119
- ? html `
120
- <div class="card-content">
121
- <slot></slot>
122
- </div>
123
- `
124
- : nothing;
118
+ const wrapperContentTemplate = html `
119
+ <div class="card-content">
120
+ <slot></slot>
121
+ </div>
122
+ `;
125
123
  const wrapperHeaderTemplate = inputs.hideHeader
126
124
  ? nothing
127
125
  : html `
package/dist/elements/vira-tabs.element.d.ts CHANGED
@@ -57,9 +57,9 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
57
57
  /**
58
58
  * Color variant for the tab selection indicator and active tab text.
59
59
  *
60
- * @default ViraColorVariant.Accent
60
+ * @default ViraColorVariant.Info
61
61
  */
62
- colorVariant: ViraColorVariant.Accent | ViraColorVariant.Plain;
62
+ colorVariant: ViraColorVariant;
63
63
  /**
64
64
  * Layout direction for icons relative to their label text.
65
65
  *
@@ -85,4 +85,4 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
85
85
  }, {
86
86
  /** Fires when a tab is clicked with the corresponding tab entry. */
87
87
  tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
88
- }, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-accent" | "vira-tabs-color-plain" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
88
+ }, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-info" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-danger" | "vira-tabs-color-warning" | "vira-tabs-color-positive" | "vira-tabs-color-special" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
package/dist/elements/vira-tabs.element.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { check } from '@augment-vir/assert';
2
- import { filterMap } from '@augment-vir/common';
3
- import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
2
+ import { arrayToObject, filterMap } from '@augment-vir/common';
3
+ import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
4
+ import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
4
5
  import { routeHasPaths, } from 'spa-router-vir';
5
6
  import { createFocusStyles } from '../styles/focus.js';
6
7
  import { viraFormCssVars } from '../styles/form-styles.js';
7
- import { ViraColorVariant } from '../styles/form-variants.js';
8
+ import { ViraColorVariant, viraColorVariantToColorName, viraColorVariants, } from '../styles/form-variants.js';
8
9
  import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from '../styles/index.js';
10
+ import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
9
11
  import { defineViraElement } from '../util/define-vira-element.js';
10
12
  import { createOverflowObserver } from '../util/overflow-observer.js';
11
13
  import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
@@ -61,21 +63,55 @@ export const ViraTabs = defineViraElement()({
61
63
  'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
62
64
  'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
63
65
  'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
64
- 'vira-tabs-color-accent': ({ inputs }) => !inputs.colorVariant || inputs.colorVariant === ViraColorVariant.Accent,
65
- 'vira-tabs-color-plain': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Plain,
66
+ ...arrayToObject(viraColorVariants, (colorVariant) => {
67
+ return {
68
+ key: `vira-tabs-color-${colorVariant}`,
69
+ value: ({ inputs, }) => {
70
+ return colorVariant === ViraColorVariant.Plain
71
+ ? !inputs.colorVariant || inputs.colorVariant === colorVariant
72
+ : inputs.colorVariant === colorVariant;
73
+ },
74
+ };
75
+ }, {
76
+ useRequired: true,
77
+ }),
66
78
  'vira-tabs-icon-layout-vertical': ({ inputs }) => !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical,
67
79
  'vira-tabs-icon-layout-horizontal': ({ inputs }) => inputs.iconLayout === ViraTabsIconLayout.Horizontal,
68
80
  'vira-tabs-overflowing': ({ state }) => state.isOverflowing,
69
81
  'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
70
82
  },
71
83
  cssVars: {
72
- 'vira-tabs-active-color': viraFormCssVars['vira-form-accent-primary-color'].value,
73
- 'vira-tabs-active-hover-color': viraFormCssVars['vira-form-accent-primary-hover-color'].value,
84
+ 'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
85
+ 'vira-tabs-active-hover-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.Header].background.value,
74
86
  'vira-tabs-inactive-color': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
75
87
  'vira-tabs-inactive-hover-color': viraTheme.colors['vira-grey-foreground-non-body'].foreground.value,
76
88
  'vira-tabs-bar-thickness': '3px',
77
89
  },
78
90
  styles: ({ hostClasses, cssVars }) => {
91
+ function generateVariantCss() {
92
+ const plainColors = {
93
+ active: viraTheme.colors['vira-grey-foreground-small-body'].foreground,
94
+ hover: viraTheme.colors['vira-grey-foreground-body'].foreground,
95
+ };
96
+ const allStyles = viraColorVariants
97
+ .map((colorVariant) => {
98
+ const variantSelector = hostClasses[`vira-tabs-color-${colorVariant}`].selector;
99
+ const colors = colorVariant === ViraColorVariant.Plain
100
+ ? plainColors
101
+ : {
102
+ active: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.NonBodyText].background,
103
+ hover: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.Header].background,
104
+ };
105
+ return css `
106
+ ${variantSelector} {
107
+ ${cssVars['vira-tabs-active-color'].name}: ${colors.active.value};
108
+ ${cssVars['vira-tabs-active-hover-color'].name}: ${colors.hover.value};
109
+ }
110
+ `;
111
+ })
112
+ .join('\n');
113
+ return unsafeCSS(allStyles);
114
+ }
79
115
  return css `
80
116
  :host {
81
117
  display: flex;
@@ -205,10 +241,7 @@ export const ViraTabs = defineViraElement()({
205
241
  }
206
242
  }
207
243
 
208
- ${hostClasses['vira-tabs-color-plain'].selector} {
209
- ${cssVars['vira-tabs-active-color'].name}: ${viraTheme.colors['vira-grey-foreground-small-body'].foreground.value};
210
- ${cssVars['vira-tabs-active-hover-color'].name}: ${viraTheme.colors['vira-grey-foreground-body'].foreground.value};
211
- }
244
+ ${generateVariantCss()}
212
245
 
213
246
  .tab-content {
214
247
  display: flex;
package/dist/elements/vira-tag.element.d.ts CHANGED
@@ -26,10 +26,10 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
26
26
  size: ViraSize;
27
27
  /** @default ViraEmphasis.Standard */
28
28
  emphasis: ViraEmphasis;
29
- /** @default ViraColor.Accent */
30
- color: ViraColorVariant;
29
+ /** @default ViraColorVariant.Info */
30
+ colorVariant: ViraColorVariant;
31
31
  disabled: boolean;
32
32
  }>, {}, {
33
33
  toggle: import("element-vir").DefineEvent<boolean>;
34
34
  cancel: import("element-vir").DefineEvent<void>;
35
- }, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-accent" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;
35
+ }, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-info" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive" | "vira-tag-color-special", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;
package/dist/elements/vira-tag.element.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { check } from '@augment-vir/assert';
2
+ import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
2
3
  import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
3
4
  import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
4
5
  import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
@@ -15,7 +16,8 @@ import { ViraIcon } from './vira-icon.element.js';
15
16
  const transparentColor = {
16
17
  value: css `transparent`,
17
18
  };
18
- function buildThemedTagColors(colorName) {
19
+ function buildThemedTagColors(colorVariant) {
20
+ const colorName = viraColorVariantToColorName[colorVariant];
19
21
  const behindBg = viraThemeByKeys[colorName]['behind-bg'];
20
22
  const onSelf = viraThemeByKeys[colorName]['on-self'];
21
23
  return {
@@ -55,7 +57,8 @@ function buildThemedTagColors(colorName) {
55
57
  },
56
58
  };
57
59
  }
58
- function buildThemedNotCheckedColors(colorName) {
60
+ function buildThemedNotCheckedColors(colorVariant) {
61
+ const colorName = viraColorVariantToColorName[colorVariant];
59
62
  const onSelfBodyText = viraThemeByKeys[colorName]['on-self'][ContrastLevelName.BodyText];
60
63
  return {
61
64
  idle: {
@@ -76,6 +79,9 @@ function buildThemedNotCheckedColors(colorName) {
76
79
  };
77
80
  }
78
81
  const tagColorVariantColors = {
82
+ ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
83
+ return buildThemedTagColors(colorVariant);
84
+ }),
79
85
  [ViraColorVariant.Plain]: {
80
86
  [ViraEmphasis.Standard]: {
81
87
  idle: {
@@ -112,13 +118,11 @@ const tagColorVariantColors = {
112
118
  },
113
119
  },
114
120
  },
115
- [ViraColorVariant.Accent]: buildThemedTagColors(viraColorVariantToColorName[ViraColorVariant.Accent]),
116
- [ViraColorVariant.Neutral]: buildThemedTagColors(viraColorVariantToColorName[ViraColorVariant.Neutral]),
117
- [ViraColorVariant.Danger]: buildThemedTagColors(viraColorVariantToColorName[ViraColorVariant.Danger]),
118
- [ViraColorVariant.Warning]: buildThemedTagColors(viraColorVariantToColorName[ViraColorVariant.Warning]),
119
- [ViraColorVariant.Positive]: buildThemedTagColors(viraColorVariantToColorName[ViraColorVariant.Positive]),
120
121
  };
121
122
  const tagNotCheckedColors = {
123
+ ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
124
+ return buildThemedNotCheckedColors(colorVariant);
125
+ }),
122
126
  [ViraColorVariant.Plain]: {
123
127
  idle: {
124
128
  textColor: viraTheme.colors[themeDefaultKey].foreground,
@@ -136,11 +140,6 @@ const tagNotCheckedColors = {
136
140
  borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
137
141
  },
138
142
  },
139
- [ViraColorVariant.Accent]: buildThemedNotCheckedColors(viraColorVariantToColorName[ViraColorVariant.Accent]),
140
- [ViraColorVariant.Neutral]: buildThemedNotCheckedColors(viraColorVariantToColorName[ViraColorVariant.Neutral]),
141
- [ViraColorVariant.Danger]: buildThemedNotCheckedColors(viraColorVariantToColorName[ViraColorVariant.Danger]),
142
- [ViraColorVariant.Warning]: buildThemedNotCheckedColors(viraColorVariantToColorName[ViraColorVariant.Warning]),
143
- [ViraColorVariant.Positive]: buildThemedNotCheckedColors(viraColorVariantToColorName[ViraColorVariant.Positive]),
144
143
  };
145
144
  /**
146
145
  * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
@@ -185,12 +184,18 @@ export const ViraTag = defineViraElement()({
185
184
  'vira-tag-size-small': ({ inputs }) => inputs.size === ViraSize.Small,
186
185
  'vira-tag-emphasis-standard': ({ inputs }) => !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard,
187
186
  'vira-tag-emphasis-subtle': ({ inputs }) => inputs.emphasis === ViraEmphasis.Subtle,
188
- 'vira-tag-color-accent': ({ inputs }) => !inputs.color || inputs.color === ViraColorVariant.Accent,
189
- 'vira-tag-color-plain': ({ inputs }) => inputs.color === ViraColorVariant.Plain,
190
- 'vira-tag-color-neutral': ({ inputs }) => inputs.color === ViraColorVariant.Neutral,
191
- 'vira-tag-color-danger': ({ inputs }) => inputs.color === ViraColorVariant.Danger,
192
- 'vira-tag-color-warning': ({ inputs }) => inputs.color === ViraColorVariant.Warning,
193
- 'vira-tag-color-positive': ({ inputs }) => inputs.color === ViraColorVariant.Positive,
187
+ ...arrayToObject(viraColorVariants, (colorVariant) => {
188
+ return {
189
+ key: `vira-tag-color-${colorVariant}`,
190
+ value: ({ inputs, }) => {
191
+ return colorVariant === ViraColorVariant.Plain
192
+ ? !inputs.colorVariant || inputs.colorVariant === colorVariant
193
+ : inputs.colorVariant === colorVariant;
194
+ },
195
+ };
196
+ }, {
197
+ useRequired: true,
198
+ }),
194
199
  },
195
200
  styles: ({ cssVars, hostClasses }) => {
196
201
  function generateVariantCss() {
package/dist/styles/form-styles.js CHANGED
@@ -17,9 +17,9 @@ export const viraFormCssVars = defineCssVars({
17
17
  'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
18
18
  'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
19
19
  'vira-form-secondary-body-foreground': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
20
- 'vira-form-text-selection-color': viraTheme.colors['vira-accent-behind-bg-decoration'].background.value,
21
- 'vira-form-selection-hover-color': viraTheme.colors['vira-accent-behind-bg-invisible'].background.value,
22
- 'vira-form-selection-active-color': viraTheme.colors['vira-accent-behind-bg-decoration'].background.value,
20
+ 'vira-form-text-selection-color': viraTheme.colors['vira-blue-behind-bg-decoration'].background.value,
21
+ 'vira-form-selection-hover-color': viraTheme.colors['vira-blue-behind-bg-invisible'].background.value,
22
+ 'vira-form-selection-active-color': viraTheme.colors['vira-blue-behind-bg-decoration'].background.value,
23
23
  'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
24
24
  'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
25
25
  'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
@@ -36,14 +36,14 @@ export const viraFormCssVars = defineCssVars({
36
36
  'vira-form-large-text-size': '22px',
37
37
  'vira-form-radius': defaultViraFormRadius,
38
38
  'vira-form-wrapper-radius': '16px',
39
- 'vira-form-focus-outline-color': viraTheme.colors['vira-accent-foreground-header'].foreground.value,
39
+ 'vira-form-focus-outline-color': viraTheme.colors['vira-blue-foreground-header'].foreground.value,
40
40
  'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
41
41
  'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
42
42
  'vira-form-plain-hover-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
43
43
  'vira-form-plain-active-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
44
- 'vira-form-accent-primary-color': viraTheme.colors['vira-accent-behind-bg-non-body'].background.value,
45
- 'vira-form-accent-primary-hover-color': viraTheme.colors['vira-accent-behind-bg-header'].background.value,
46
- 'vira-form-accent-primary-active-color': viraTheme.colors['vira-accent-behind-bg-body'].background.value,
44
+ 'vira-form-accent-primary-color': viraTheme.colors['vira-blue-behind-bg-non-body'].background.value,
45
+ 'vira-form-accent-primary-hover-color': viraTheme.colors['vira-blue-behind-bg-header'].background.value,
46
+ 'vira-form-accent-primary-active-color': viraTheme.colors['vira-blue-behind-bg-body'].background.value,
47
47
  'vira-form-danger-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
48
48
  'vira-form-danger-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
49
49
  'vira-form-danger-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
package/dist/styles/form-variants.d.ts CHANGED
@@ -10,7 +10,7 @@ export declare enum ViraColorVariant {
10
10
  *
11
11
  * @default blue colored
12
12
  */
13
- Accent = "accent",
13
+ Info = "info",
14
14
  /** @default black colored */
15
15
  Plain = "plain",
16
16
  /** @default grey colored */
@@ -21,6 +21,8 @@ export declare enum ViraColorVariant {
21
21
  Warning = "warning",
22
22
  /** @default green colored */
23
23
  Positive = "positive",
24
+ /** @default purple colored */
25
+ Special = "special",
24
26
  /**
25
27
  * No color variant styles will be applied at all. All related CSS vars are free to customize to
26
28
  * your wishes.
@@ -33,13 +35,13 @@ export declare enum ViraColorVariant {
33
35
  *
34
36
  * @category Internal
35
37
  */
36
- export declare const viraColorVariantToColorName: Record<Exclude<ViraColorVariant, ViraColorVariant.None | ViraColorVariant.Plain>, ViraThemeColorName>;
38
+ export declare const viraColorVariantToColorName: Record<ViraColorVariant, ViraThemeColorName>;
37
39
  /**
38
40
  * All defined color variants starting with the default.
39
41
  *
40
42
  * @category Internal
41
43
  */
42
- export declare const viraColorVariants: readonly [ViraColorVariant.Accent, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive];
44
+ export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Special];
43
45
  /**
44
46
  * All available variants for controlling vira form sizes.
45
47
  *