vira 31.5.0 → 31.5.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.
Files changed (6) hide show
  1. package/dist/elements/vira-button.element.js +7 -5
  2. package/dist/elements/vira-tag.element.d.ts +1 -1
  3. package/dist/elements/vira-tag.element.js +285 -190
  4. package/dist/styles/vira-color-palette.d.ts +0 -176
  5. package/dist/styles/vira-color-palette.js +0 -176
  6. package/package.json +1 -1
package/dist/elements/vira-button.element.js CHANGED
@@ -264,9 +264,9 @@ export const ViraButton = defineViraElement()({
264
264
  'vira-button-active-text-color': 'transparent',
265
265
  'vira-button-active-background-color': 'transparent',
266
266
  'vira-button-active-border-color': 'transparent',
267
- 'vira-button-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-invisible'].foreground.value,
268
- 'vira-button-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-invisible'].background.value,
269
- 'vira-button-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-invisible'].background.value,
267
+ 'vira-button-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
268
+ 'vira-button-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
269
+ 'vira-button-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
270
270
  'vira-button-border-width': '1px',
271
271
  'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
272
272
  },
@@ -316,6 +316,10 @@ export const ViraButton = defineViraElement()({
316
316
  padding: 2px
317
317
  ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
318
318
  }
319
+
320
+ &${hostClasses['vira-button-icon-only'].selector} {
321
+ min-width: ${viraSizeHeights[sizeVariant]}px;
322
+ }
319
323
  }
320
324
  `;
321
325
  });
@@ -414,8 +418,6 @@ export const ViraButton = defineViraElement()({
414
418
  }
415
419
 
416
420
  ${hostClasses['vira-button-icon-only'].selector} {
417
- aspect-ratio: 1;
418
-
419
421
  button {
420
422
  padding: 0;
421
423
  }
package/dist/elements/vira-tag.element.d.ts CHANGED
@@ -32,4 +32,4 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
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-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-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 []>;
package/dist/elements/vira-tag.element.js CHANGED
@@ -1,84 +1,147 @@
1
1
  import { check } from '@augment-vir/assert';
2
- import { colorCss, ContrastLevelName } from '@electrovir/color';
2
+ import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
3
3
  import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
4
4
  import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
5
5
  import { Check16Icon } from '../icons/icon-svgs/16/check-16.icon.js';
6
6
  import { X16Icon } from '../icons/icon-svgs/16/x-16.icon.js';
7
7
  import { viraFormCssVars } from '../styles/form-styles.js';
8
- import { ViraColorVariant, viraColorVariantToColorName, ViraEmphasis, ViraSize, viraSizeHeights, } from '../styles/form-variants.js';
8
+ import { ViraColorVariant, viraColorVariants, viraColorVariantToColorName, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
9
9
  import { noNativeFormStyles } from '../styles/native-styles.js';
10
10
  import { noUserSelect } from '../styles/user-select.js';
11
11
  import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
12
12
  import { viraTheme } from '../styles/vira-color-theme.js';
13
13
  import { defineViraElement } from '../util/define-vira-element.js';
14
14
  import { ViraIcon } from './vira-icon.element.js';
15
- function generateThemeCss(colorVariant) {
16
- if (!check.hasKey(viraColorVariantToColorName, colorVariant)) {
17
- throw new Error(`No ViraTag color for variant '${colorVariant}'`);
18
- }
19
- const viraThemeColorKey = viraColorVariantToColorName[colorVariant];
20
- return css `
21
- :host(
22
- .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}
23
- )
24
- button {
25
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText])}
26
- border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText].background.value};
27
-
28
- &:hover {
29
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Header])}
30
- border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Header].background.value};
31
- }
32
- &:active {
33
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText])}
34
- border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText].background.value};
35
- }
36
- }
37
- :host(
38
- .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
39
- )
40
- button {
41
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText])}
42
- border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
43
-
44
- &:hover {
45
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.NonBodyText])}
46
- border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.NonBodyText].background.value};
47
- }
48
- &:active {
49
- ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText])}
50
- border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
51
- }
52
- }
53
- :host(
54
- .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-not-checked.vira-tag-not-checked.vira-tag-not-checked
55
- )
56
- button {
57
- color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText]
58
- .foreground.value};
59
- background-color: transparent;
60
- border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
61
-
62
- &:hover {
63
- background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Invisible].background.value};
64
- }
65
- &:active {
66
- background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Decoration].background.value};
67
- }
68
- }
69
- `;
15
+ const transparentColor = {
16
+ value: css `transparent`,
17
+ };
18
+ function buildThemedTagColors(colorName) {
19
+ const behindBg = viraThemeByKeys[colorName]['behind-bg'];
20
+ const onSelf = viraThemeByKeys[colorName]['on-self'];
21
+ return {
22
+ [ViraEmphasis.Standard]: {
23
+ idle: {
24
+ textColor: behindBg[ContrastLevelName.NonBodyText].foreground,
25
+ backgroundColor: behindBg[ContrastLevelName.NonBodyText].background,
26
+ borderColor: behindBg[ContrastLevelName.NonBodyText].background,
27
+ },
28
+ hover: {
29
+ textColor: behindBg[ContrastLevelName.Header].foreground,
30
+ backgroundColor: behindBg[ContrastLevelName.Header].background,
31
+ borderColor: behindBg[ContrastLevelName.Header].background,
32
+ },
33
+ active: {
34
+ textColor: behindBg[ContrastLevelName.NonBodyText].foreground,
35
+ backgroundColor: behindBg[ContrastLevelName.NonBodyText].background,
36
+ borderColor: behindBg[ContrastLevelName.NonBodyText].background,
37
+ },
38
+ },
39
+ [ViraEmphasis.Subtle]: {
40
+ idle: {
41
+ textColor: onSelf[ContrastLevelName.BodyText].foreground,
42
+ backgroundColor: onSelf[ContrastLevelName.BodyText].background,
43
+ borderColor: onSelf[ContrastLevelName.BodyText].background,
44
+ },
45
+ hover: {
46
+ textColor: onSelf[ContrastLevelName.NonBodyText].foreground,
47
+ backgroundColor: onSelf[ContrastLevelName.NonBodyText].background,
48
+ borderColor: onSelf[ContrastLevelName.NonBodyText].background,
49
+ },
50
+ active: {
51
+ textColor: onSelf[ContrastLevelName.BodyText].foreground,
52
+ backgroundColor: onSelf[ContrastLevelName.BodyText].background,
53
+ borderColor: onSelf[ContrastLevelName.BodyText].background,
54
+ },
55
+ },
56
+ };
70
57
  }
71
- function generateAutomaticViraTagThemeVariants() {
72
- return unsafeCSS([
73
- ViraColorVariant.Accent,
74
- ViraColorVariant.Danger,
75
- ViraColorVariant.Neutral,
76
- ViraColorVariant.Positive,
77
- ViraColorVariant.Warning,
78
- ]
79
- .map((variant) => generateThemeCss(variant))
80
- .join(' '));
58
+ function buildThemedNotCheckedColors(colorName) {
59
+ const onSelfBodyText = viraThemeByKeys[colorName]['on-self'][ContrastLevelName.BodyText];
60
+ return {
61
+ idle: {
62
+ textColor: onSelfBodyText.foreground,
63
+ backgroundColor: transparentColor,
64
+ borderColor: onSelfBodyText.background,
65
+ },
66
+ hover: {
67
+ textColor: onSelfBodyText.foreground,
68
+ backgroundColor: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Invisible].background,
69
+ borderColor: onSelfBodyText.background,
70
+ },
71
+ active: {
72
+ textColor: onSelfBodyText.foreground,
73
+ backgroundColor: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Decoration].background,
74
+ borderColor: onSelfBodyText.background,
75
+ },
76
+ };
81
77
  }
78
+ const tagColorVariantColors = {
79
+ [ViraColorVariant.Plain]: {
80
+ [ViraEmphasis.Standard]: {
81
+ idle: {
82
+ backgroundColor: viraTheme.inverse[themeDefaultKey].background,
83
+ textColor: viraTheme.inverse[themeDefaultKey].foreground,
84
+ borderColor: viraTheme.inverse[themeDefaultKey].background,
85
+ },
86
+ hover: {
87
+ backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
88
+ textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
89
+ borderColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
90
+ },
91
+ active: {
92
+ backgroundColor: viraTheme.inverse[themeDefaultKey].background,
93
+ textColor: viraTheme.inverse[themeDefaultKey].foreground,
94
+ borderColor: viraTheme.inverse[themeDefaultKey].background,
95
+ },
96
+ },
97
+ [ViraEmphasis.Subtle]: {
98
+ idle: {
99
+ backgroundColor: transparentColor,
100
+ textColor: viraTheme.colors[themeDefaultKey].foreground,
101
+ borderColor: transparentColor,
102
+ },
103
+ hover: {
104
+ backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
105
+ textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
106
+ borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
107
+ },
108
+ active: {
109
+ backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
110
+ textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
111
+ borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
112
+ },
113
+ },
114
+ },
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
+ const tagNotCheckedColors = {
122
+ [ViraColorVariant.Plain]: {
123
+ idle: {
124
+ textColor: viraTheme.colors[themeDefaultKey].foreground,
125
+ backgroundColor: transparentColor,
126
+ borderColor: transparentColor,
127
+ },
128
+ hover: {
129
+ backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
130
+ textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
131
+ borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
132
+ },
133
+ active: {
134
+ backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
135
+ textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
136
+ borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
137
+ },
138
+ },
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
+ };
82
145
  /**
83
146
  * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
84
147
  * selectable, and cancellable variations.
@@ -89,8 +152,18 @@ function generateAutomaticViraTagThemeVariants() {
89
152
  export const ViraTag = defineViraElement()({
90
153
  tagName: 'vira-tag',
91
154
  cssVars: {
92
- 'vira-tag-text-color': 'white',
93
- 'vira-tag-background-color': 'black',
155
+ 'vira-tag-text-color': 'transparent',
156
+ 'vira-tag-background-color': 'transparent',
157
+ 'vira-tag-border-color': 'transparent',
158
+ 'vira-tag-hover-text-color': 'transparent',
159
+ 'vira-tag-hover-background-color': 'transparent',
160
+ 'vira-tag-hover-border-color': 'transparent',
161
+ 'vira-tag-active-text-color': 'transparent',
162
+ 'vira-tag-active-background-color': 'transparent',
163
+ 'vira-tag-active-border-color': 'transparent',
164
+ 'vira-tag-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
165
+ 'vira-tag-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
166
+ 'vira-tag-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
94
167
  'vira-tag-border-radius': '1000px',
95
168
  'vira-tag-gap': '6px',
96
169
  'vira-tag-horizontal-padding': '12px',
@@ -119,147 +192,169 @@ export const ViraTag = defineViraElement()({
119
192
  'vira-tag-color-warning': ({ inputs }) => inputs.color === ViraColorVariant.Warning,
120
193
  'vira-tag-color-positive': ({ inputs }) => inputs.color === ViraColorVariant.Positive,
121
194
  },
122
- styles: ({ cssVars, hostClasses }) => css `
123
- :host {
124
- display: inline-flex;
125
- }
195
+ styles: ({ cssVars, hostClasses }) => {
196
+ function generateVariantCss() {
197
+ const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
198
+ return viraColorVariants.map((colorVariant) => {
199
+ const colors = tagColorVariantColors[colorVariant][emphasis];
200
+ const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
201
+ const emphasisSelector = hostClasses[`vira-tag-emphasis-${emphasis}`].selector;
202
+ return css `
203
+ ${variantSelector}${emphasisSelector} {
204
+ ${cssVars['vira-tag-background-color'].name}: ${colors.idle
205
+ .backgroundColor.value};
206
+ ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
207
+ ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor
208
+ .value};
126
209
 
127
- button {
128
- ${noNativeFormStyles}
129
- flex-shrink: 0;
130
- cursor: pointer;
131
- display: flex;
132
- align-items: center;
133
- gap: ${cssVars['vira-tag-gap'].value};
134
- border-radius: ${cssVars['vira-tag-border-radius'].value};
135
- border-width: ${cssVars['vira-tag-border-width'].value};
136
- border-style: solid;
137
- border-color: transparent;
138
- color: ${cssVars['vira-tag-text-color'].value};
139
- background-color: ${cssVars['vira-tag-background-color'].value};
140
- box-sizing: border-box;
141
- padding: 0 ${cssVars['vira-tag-horizontal-padding'].value};
210
+ ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
211
+ .backgroundColor.value};
212
+ ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
213
+ .value};
214
+ ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover
215
+ .borderColor.value};
142
216
 
143
- &[disabled] {
144
- cursor: default;
145
- pointer-events: none;
146
- }
217
+ ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
218
+ .backgroundColor.value};
219
+ ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
220
+ .value};
221
+ ${cssVars['vira-tag-active-border-color'].name}: ${colors.active
222
+ .borderColor.value};
223
+ }
224
+ `;
225
+ });
226
+ });
227
+ return unsafeCSS(allStyles.join('\n'));
147
228
  }
229
+ function generateNotCheckedCss() {
230
+ const allStyles = viraColorVariants.map((colorVariant) => {
231
+ const colors = tagNotCheckedColors[colorVariant];
232
+ const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
233
+ const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
234
+ return css `
235
+ ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
236
+ ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
237
+ .value};
238
+ ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
239
+ ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
148
240
 
149
- .cancel-x,
150
- .selected-check,
151
- .text {
152
- height: 0;
153
- display: flex;
154
- align-items: center;
155
- }
241
+ ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
242
+ .backgroundColor.value};
243
+ ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
244
+ .value};
245
+ ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
246
+ .value};
156
247
 
157
- .cancel-x {
158
- display: none;
159
- margin-right: -2px;
248
+ ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
249
+ .backgroundColor.value};
250
+ ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
251
+ .value};
252
+ ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
253
+ .value};
254
+ }
255
+ `;
256
+ });
257
+ return unsafeCSS(allStyles.join('\n'));
160
258
  }
161
-
162
- .selected-check {
163
- margin-left: -2px;
164
- display: none;
165
- visibility: hidden;
259
+ function generateSizeVariantCss() {
260
+ const styles = viraSizeVariants.map((sizeVariant) => {
261
+ return css `
262
+ ${hostClasses[`vira-tag-size-${sizeVariant}`].selector} button {
263
+ height: ${viraSizeHeights[sizeVariant]}px;
264
+ font-size: ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
265
+ }
266
+ `;
267
+ });
268
+ return unsafeCSS(styles.join('\n'));
166
269
  }
270
+ return css `
271
+ :host {
272
+ display: inline-flex;
273
+ }
167
274
 
168
- ${hostClasses['vira-tag-selectable'].selector} .selected-check {
169
- display: flex;
170
- }
171
- ${hostClasses['vira-tag-checked'].selector} .selected-check {
172
- visibility: visible;
173
- }
174
- ${hostClasses['vira-tag-cancellable'].selector} .cancel-x {
175
- display: flex;
176
- }
177
- ${hostClasses['vira-tag-size-large'].selector} button {
178
- height: ${viraSizeHeights[ViraSize.Large]}px;
179
- font-size: ${viraFormCssVars['vira-form-large-text-size'].value};
180
- padding: 0 var(${cssVars['vira-tag-horizontal-padding'].name}, 16px);
181
- }
182
- ${hostClasses['vira-tag-size-medium'].selector} button {
183
- height: ${viraSizeHeights[ViraSize.Medium]}px;
184
- font-size: ${viraFormCssVars['vira-form-medium-text-size'].value};
185
- }
186
- ${hostClasses['vira-tag-size-small'].selector} button {
187
- height: ${viraSizeHeights[ViraSize.Small]}px;
188
- font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
189
- }
275
+ ${generateSizeVariantCss()}
276
+ ${generateVariantCss()}
277
+ ${generateNotCheckedCss()}
190
278
 
191
- ${generateAutomaticViraTagThemeVariants()}
279
+ button {
280
+ ${noNativeFormStyles}
281
+ flex-shrink: 0;
282
+ cursor: pointer;
283
+ display: flex;
284
+ align-items: center;
285
+ gap: ${cssVars['vira-tag-gap'].value};
286
+ border-radius: ${cssVars['vira-tag-border-radius'].value};
287
+ border-width: ${cssVars['vira-tag-border-width'].value};
288
+ border-style: solid;
289
+ border-color: ${cssVars['vira-tag-border-color'].value};
290
+ color: ${cssVars['vira-tag-text-color'].value};
291
+ background-color: ${cssVars['vira-tag-background-color'].value};
292
+ box-sizing: border-box;
293
+ padding: 0 ${cssVars['vira-tag-horizontal-padding'].value};
192
294
 
193
- :host(.${hostClasses['vira-tag-disabled'].name}.${hostClasses['vira-tag-disabled']
194
- .name}.${hostClasses['vira-tag-disabled'].name}.${hostClasses['vira-tag-disabled']
195
- .name}) {
196
- cursor: not-allowed;
197
- ${noUserSelect}
295
+ &[disabled] {
296
+ cursor: default;
297
+ pointer-events: none;
298
+ }
299
+ }
198
300
 
199
- & button {
200
- ${colorCss(viraTheme.colors['vira-grey-behind-bg-decoration'])}
201
- border-color: ${viraTheme.colors['vira-grey-behind-bg-decoration'].background.value}
301
+ button:hover {
302
+ background-color: ${cssVars['vira-tag-hover-background-color'].value};
303
+ color: ${cssVars['vira-tag-hover-text-color'].value};
304
+ border-color: ${cssVars['vira-tag-hover-border-color'].value};
202
305
  }
203
306
 
204
- &.${hostClasses['vira-tag-emphasis-subtle'].name} button {
205
- ${colorCss(viraTheme.colors['vira-grey-behind-bg-decoration'])}
206
- border-color: ${viraTheme.colors['vira-grey-behind-bg-decoration'].background.value}
307
+ button:active {
308
+ background-color: ${cssVars['vira-tag-active-background-color'].value};
309
+ color: ${cssVars['vira-tag-active-text-color'].value};
310
+ border-color: ${cssVars['vira-tag-active-border-color'].value};
207
311
  }
208
- }
209
312
 
210
- :host(
211
- .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}
212
- )
213
- button {
214
- ${colorCss(viraTheme.inverse[themeDefaultKey])};
215
- border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
313
+ .cancel-x,
314
+ .selected-check,
315
+ .text {
316
+ height: 0;
317
+ display: flex;
318
+ align-items: center;
319
+ }
216
320
 
217
- &:hover {
218
- ${colorCss(viraTheme.colors['vira-grey-behind-bg-non-body'])};
219
- border-color: ${viraTheme.colors['vira-grey-behind-bg-non-body'].background.value};
321
+ .cancel-x {
322
+ display: none;
323
+ margin-right: -2px;
220
324
  }
221
- &:active {
222
- ${colorCss(viraTheme.inverse[themeDefaultKey])};
223
- border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
325
+
326
+ .selected-check {
327
+ margin-left: -2px;
328
+ display: none;
329
+ visibility: hidden;
224
330
  }
225
- }
226
- :host(
227
- .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
228
- )
229
- button {
230
- background-color: transparent;
231
- color: ${viraTheme.colors[themeDefaultKey].foreground.value};
232
- border-color: transparent;
233
- }
234
- :host(
235
- .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
236
- .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
237
- )
238
- button {
239
- color: ${viraTheme.colors[themeDefaultKey].foreground.value};
240
- background-color: transparent;
241
- border-color: transparent;
242
- }
243
- :host(
244
- .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
245
- )
246
- button,
247
- :host(
248
- .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
249
- .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
250
- )
251
- button {
252
- &:hover {
253
- ${colorCss(viraTheme.colors['vira-grey-behind-fg-small-body'])}
254
- border-color: ${viraTheme.colors['vira-grey-behind-fg-small-body'].background
255
- .value};
331
+
332
+ ${hostClasses['vira-tag-selectable'].selector} .selected-check {
333
+ display: flex;
256
334
  }
257
- &:active {
258
- ${colorCss(viraTheme.colors['vira-grey-behind-fg-body'])}
259
- border-color: ${viraTheme.colors['vira-grey-behind-fg-body'].background.value};
335
+ ${hostClasses['vira-tag-checked'].selector} .selected-check {
336
+ visibility: visible;
260
337
  }
261
- }
262
- `,
338
+ ${hostClasses['vira-tag-cancellable'].selector} .cancel-x {
339
+ display: flex;
340
+ }
341
+
342
+ ${hostClasses['vira-tag-size-large'].selector} button {
343
+ padding: 0 var(${cssVars['vira-tag-horizontal-padding'].name}, 16px);
344
+ }
345
+
346
+ ${hostClasses['vira-tag-disabled'].selector} {
347
+ cursor: not-allowed;
348
+ ${noUserSelect}
349
+
350
+ & button {
351
+ color: ${cssVars['vira-tag-disabled-text-color'].value};
352
+ background-color: ${cssVars['vira-tag-disabled-background-color'].value};
353
+ border-color: ${cssVars['vira-tag-disabled-border-color'].value};
354
+ }
355
+ }
356
+ `;
357
+ },
263
358
  render({ inputs, dispatch, events }) {
264
359
  const disabled = !inputs.isClickable || !!inputs.disabled;
265
360
  return html `
package/dist/styles/vira-color-palette.d.ts CHANGED
@@ -176,179 +176,3 @@ export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<
176
176
  readonly 'vira-grey-950': "#2D2D2D";
177
177
  readonly 'vira-grey-1000': "#252525";
178
178
  }>;
179
- /**
180
- * JSON for easy copying
181
- *
182
- * ```json
183
- * {
184
- * "Blue": {
185
- * "100": "#F5F9FF",
186
- * "1000": "#142540",
187
- * "150": "#EAF3FF",
188
- * "200": "#E0EDFF",
189
- * "250": "#D6E7FF",
190
- * "300": "#CBDFFF",
191
- * "350": "#B9D4FF",
192
- * "400": "#9EC3FF",
193
- * "450": "#7AADFF",
194
- * "500": "#5697FF",
195
- * "550": "#4988ED",
196
- * "600": "#427DDC",
197
- * "650": "#3B72CA",
198
- * "700": "#3365B6",
199
- * "750": "#2D569A",
200
- * "800": "#27487E",
201
- * "850": "#203D6C",
202
- * "900": "#1B345D",
203
- * "950": "#172C4F"
204
- * },
205
- * "Green": {
206
- * "100": "#EBFFEE",
207
- * "1000": "#062D1B",
208
- * "150": "#DDFBE2",
209
- * "200": "#CDF8D6",
210
- * "250": "#BFF5CC",
211
- * "300": "#AFF0C0",
212
- * "350": "#9AE8B1",
213
- * "400": "#7FD99C",
214
- * "450": "#52C87F",
215
- * "500": "#1BB565",
216
- * "550": "#04A559",
217
- * "600": "#009852",
218
- * "650": "#008C4A",
219
- * "700": "#007C41",
220
- * "750": "#016A38",
221
- * "800": "#095831",
222
- * "850": "#024B29",
223
- * "900": "#014024",
224
- * "950": "#02371F"
225
- * },
226
- * "Pink": {
227
- * "100": "#FEF5FF",
228
- * "1000": "#3B1333",
229
- * "150": "#FFEAFF",
230
- * "200": "#FFE0FC",
231
- * "250": "#FFD7F8",
232
- * "300": "#FFCBF2",
233
- * "350": "#FFB9E9",
234
- * "400": "#FF9BDF",
235
- * "450": "#FF6DD6",
236
- * "500": "#F04AC5",
237
- * "550": "#DD3EB4",
238
- * "600": "#CC37A7",
239
- * "650": "#BC3099",
240
- * "700": "#A82988",
241
- * "750": "#8F2674",
242
- * "800": "#752361",
243
- * "850": "#641C53",
244
- * "900": "#561848",
245
- * "950": "#49153E"
246
- * },
247
- * "Purple": {
248
- * "100": "#F9F7FF",
249
- * "1000": "#251F43",
250
- * "150": "#F3EFFF",
251
- * "200": "#EDE8FF",
252
- * "250": "#E6E1FF",
253
- * "300": "#DED8FF",
254
- * "350": "#D2CBFF",
255
- * "400": "#C1B7FF",
256
- * "450": "#AD9BFF",
257
- * "500": "#9B80FF",
258
- * "550": "#8D6EF4",
259
- * "600": "#8265E3",
260
- * "650": "#775BD1",
261
- * "700": "#6A50BB",
262
- * "750": "#5A459E",
263
- * "800": "#4A3B82",
264
- * "850": "#3E3170",
265
- * "900": "#352A61",
266
- * "950": "#2D2452"
267
- * },
268
- * "Red": {
269
- * "100": "#FFF6F5",
270
- * "1000": "#43130D",
271
- * "150": "#FFEDEB",
272
- * "200": "#FFE4E1",
273
- * "250": "#FFDCD8",
274
- * "300": "#FFD1CB",
275
- * "350": "#FFC1B8",
276
- * "400": "#FFA79B",
277
- * "450": "#FF8274",
278
- * "500": "#FF564A",
279
- * "550": "#F43A32",
280
- * "600": "#E2322C",
281
- * "650": "#D02C27",
282
- * "700": "#BB2520",
283
- * "750": "#9E231D",
284
- * "800": "#82211A",
285
- * "850": "#701A13",
286
- * "900": "#611710",
287
- * "950": "#52140D"
288
- * },
289
- * "Slate": {
290
- * "100": "#F9F9F9",
291
- * "1000": "#252525",
292
- * "150": "#F2F2F2",
293
- * "200": "#EBEBEB",
294
- * "250": "#E5E5E5",
295
- * "300": "#DEDEDE",
296
- * "350": "#D2D2D2",
297
- * "400": "#C2C2C2",
298
- * "450": "#ADADAD",
299
- * "500": "#999999",
300
- * "550": "#8A8A8A",
301
- * "600": "#7F7F7F",
302
- * "650": "#747474",
303
- * "700": "#676767",
304
- * "750": "#585858",
305
- * "800": "#494949",
306
- * "850": "#3E3E3E",
307
- * "900": "#353535",
308
- * "950": "#2D2D2D"
309
- * },
310
- * "Teal": {
311
- * "100": "#E8FEFD",
312
- * "1000": "#072B29",
313
- * "150": "#D9FAF8",
314
- * "200": "#C9F6F3",
315
- * "250": "#BAF2ED",
316
- * "300": "#A9EDE6",
317
- * "350": "#95E4DB",
318
- * "400": "#79D5CA",
319
- * "450": "#47C3B7",
320
- * "500": "#00B0A4",
321
- * "550": "#00A094",
322
- * "600": "#009389",
323
- * "650": "#00877D",
324
- * "700": "#00786F",
325
- * "750": "#00665F",
326
- * "800": "#01554F",
327
- * "850": "#004843",
328
- * "900": "#003E3A",
329
- * "950": "#033531"
330
- * },
331
- * "Yellow": {
332
- * "100": "#FEF9E4",
333
- * "1000": "#381D0B",
334
- * "150": "#FDF2D1",
335
- * "200": "#FDEABF",
336
- * "250": "#FEE2AD",
337
- * "300": "#FDD89B",
338
- * "350": "#FAC986",
339
- * "400": "#EFB669",
340
- * "450": "#E29D34",
341
- * "500": "#CE8800",
342
- * "550": "#BB7B00",
343
- * "600": "#AC7100",
344
- * "650": "#9E6800",
345
- * "700": "#8C5C00",
346
- * "750": "#794D00",
347
- * "800": "#683E00",
348
- * "850": "#5B3301",
349
- * "900": "#502A05",
350
- * "950": "#442308"
351
- * }
352
- * }
353
- * ```
354
- */
package/dist/styles/vira-color-palette.js CHANGED
@@ -177,179 +177,3 @@ export const viraColorPalette = defineCssVars({
177
177
  'vira-grey-950': '#2D2D2D',
178
178
  'vira-grey-1000': '#252525',
179
179
  });
180
- /**
181
- * JSON for easy copying
182
- *
183
- * ```json
184
- * {
185
- * "Blue": {
186
- * "100": "#F5F9FF",
187
- * "1000": "#142540",
188
- * "150": "#EAF3FF",
189
- * "200": "#E0EDFF",
190
- * "250": "#D6E7FF",
191
- * "300": "#CBDFFF",
192
- * "350": "#B9D4FF",
193
- * "400": "#9EC3FF",
194
- * "450": "#7AADFF",
195
- * "500": "#5697FF",
196
- * "550": "#4988ED",
197
- * "600": "#427DDC",
198
- * "650": "#3B72CA",
199
- * "700": "#3365B6",
200
- * "750": "#2D569A",
201
- * "800": "#27487E",
202
- * "850": "#203D6C",
203
- * "900": "#1B345D",
204
- * "950": "#172C4F"
205
- * },
206
- * "Green": {
207
- * "100": "#EBFFEE",
208
- * "1000": "#062D1B",
209
- * "150": "#DDFBE2",
210
- * "200": "#CDF8D6",
211
- * "250": "#BFF5CC",
212
- * "300": "#AFF0C0",
213
- * "350": "#9AE8B1",
214
- * "400": "#7FD99C",
215
- * "450": "#52C87F",
216
- * "500": "#1BB565",
217
- * "550": "#04A559",
218
- * "600": "#009852",
219
- * "650": "#008C4A",
220
- * "700": "#007C41",
221
- * "750": "#016A38",
222
- * "800": "#095831",
223
- * "850": "#024B29",
224
- * "900": "#014024",
225
- * "950": "#02371F"
226
- * },
227
- * "Pink": {
228
- * "100": "#FEF5FF",
229
- * "1000": "#3B1333",
230
- * "150": "#FFEAFF",
231
- * "200": "#FFE0FC",
232
- * "250": "#FFD7F8",
233
- * "300": "#FFCBF2",
234
- * "350": "#FFB9E9",
235
- * "400": "#FF9BDF",
236
- * "450": "#FF6DD6",
237
- * "500": "#F04AC5",
238
- * "550": "#DD3EB4",
239
- * "600": "#CC37A7",
240
- * "650": "#BC3099",
241
- * "700": "#A82988",
242
- * "750": "#8F2674",
243
- * "800": "#752361",
244
- * "850": "#641C53",
245
- * "900": "#561848",
246
- * "950": "#49153E"
247
- * },
248
- * "Purple": {
249
- * "100": "#F9F7FF",
250
- * "1000": "#251F43",
251
- * "150": "#F3EFFF",
252
- * "200": "#EDE8FF",
253
- * "250": "#E6E1FF",
254
- * "300": "#DED8FF",
255
- * "350": "#D2CBFF",
256
- * "400": "#C1B7FF",
257
- * "450": "#AD9BFF",
258
- * "500": "#9B80FF",
259
- * "550": "#8D6EF4",
260
- * "600": "#8265E3",
261
- * "650": "#775BD1",
262
- * "700": "#6A50BB",
263
- * "750": "#5A459E",
264
- * "800": "#4A3B82",
265
- * "850": "#3E3170",
266
- * "900": "#352A61",
267
- * "950": "#2D2452"
268
- * },
269
- * "Red": {
270
- * "100": "#FFF6F5",
271
- * "1000": "#43130D",
272
- * "150": "#FFEDEB",
273
- * "200": "#FFE4E1",
274
- * "250": "#FFDCD8",
275
- * "300": "#FFD1CB",
276
- * "350": "#FFC1B8",
277
- * "400": "#FFA79B",
278
- * "450": "#FF8274",
279
- * "500": "#FF564A",
280
- * "550": "#F43A32",
281
- * "600": "#E2322C",
282
- * "650": "#D02C27",
283
- * "700": "#BB2520",
284
- * "750": "#9E231D",
285
- * "800": "#82211A",
286
- * "850": "#701A13",
287
- * "900": "#611710",
288
- * "950": "#52140D"
289
- * },
290
- * "Slate": {
291
- * "100": "#F9F9F9",
292
- * "1000": "#252525",
293
- * "150": "#F2F2F2",
294
- * "200": "#EBEBEB",
295
- * "250": "#E5E5E5",
296
- * "300": "#DEDEDE",
297
- * "350": "#D2D2D2",
298
- * "400": "#C2C2C2",
299
- * "450": "#ADADAD",
300
- * "500": "#999999",
301
- * "550": "#8A8A8A",
302
- * "600": "#7F7F7F",
303
- * "650": "#747474",
304
- * "700": "#676767",
305
- * "750": "#585858",
306
- * "800": "#494949",
307
- * "850": "#3E3E3E",
308
- * "900": "#353535",
309
- * "950": "#2D2D2D"
310
- * },
311
- * "Teal": {
312
- * "100": "#E8FEFD",
313
- * "1000": "#072B29",
314
- * "150": "#D9FAF8",
315
- * "200": "#C9F6F3",
316
- * "250": "#BAF2ED",
317
- * "300": "#A9EDE6",
318
- * "350": "#95E4DB",
319
- * "400": "#79D5CA",
320
- * "450": "#47C3B7",
321
- * "500": "#00B0A4",
322
- * "550": "#00A094",
323
- * "600": "#009389",
324
- * "650": "#00877D",
325
- * "700": "#00786F",
326
- * "750": "#00665F",
327
- * "800": "#01554F",
328
- * "850": "#004843",
329
- * "900": "#003E3A",
330
- * "950": "#033531"
331
- * },
332
- * "Yellow": {
333
- * "100": "#FEF9E4",
334
- * "1000": "#381D0B",
335
- * "150": "#FDF2D1",
336
- * "200": "#FDEABF",
337
- * "250": "#FEE2AD",
338
- * "300": "#FDD89B",
339
- * "350": "#FAC986",
340
- * "400": "#EFB669",
341
- * "450": "#E29D34",
342
- * "500": "#CE8800",
343
- * "550": "#BB7B00",
344
- * "600": "#AC7100",
345
- * "650": "#9E6800",
346
- * "700": "#8C5C00",
347
- * "750": "#794D00",
348
- * "800": "#683E00",
349
- * "850": "#5B3301",
350
- * "900": "#502A05",
351
- * "950": "#442308"
352
- * }
353
- * }
354
- * ```
355
- */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "31.5.0",
3
+ "version": "31.5.2",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",