vira 29.2.2 → 29.3.1

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 (12) hide show
  1. package/dist/elements/pop-up/vira-menu.element.js +16 -5
  2. package/dist/elements/vira-button.element.d.ts +3 -2
  3. package/dist/elements/vira-button.element.js +25 -6
  4. package/dist/elements/vira-link.element.d.ts +3 -1
  5. package/dist/elements/vira-link.element.js +13 -8
  6. package/dist/styles/form-styles.d.ts +3 -0
  7. package/dist/styles/form-styles.js +17 -13
  8. package/dist/styles/vira-color-palette.d.ts +1 -0
  9. package/dist/styles/vira-color-palette.js +1 -0
  10. package/dist/styles/vira-color-theme.d.ts +612 -234
  11. package/dist/styles/vira-color-theme.js +675 -234
  12. package/package.json +8 -8
package/dist/elements/pop-up/vira-menu.element.js CHANGED
@@ -60,13 +60,17 @@ export const ViraMenu = defineViraElement()({
60
60
  ${navAttribute.css({
61
61
  baseSelector: '.menu-item:not(.disabled):not(.selected)',
62
62
  navValue: NavValue.Focused,
63
- })}, ${navAttribute.css({
64
- baseSelector: '.menu-item:not(.disabled):not(.selected)',
65
- navValue: NavValue.Active,
66
63
  })}, .menu-item:not(.disabled):not(.selected):hover {
67
64
  background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
68
65
  outline: none;
69
66
  }
67
+ ${navAttribute.css({
68
+ baseSelector: '.menu-item:not(.disabled):not(.selected)',
69
+ navValue: NavValue.Active,
70
+ })}, .menu-item:not(.disabled):not(.selected):active {
71
+ background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
72
+ outline: none;
73
+ }
70
74
 
71
75
  ${hostClasses['vira-menu-multiselect'].selector} {
72
76
  &
@@ -74,12 +78,18 @@ export const ViraMenu = defineViraElement()({
74
78
  baseSelector: '.menu-item:not(.disabled)',
75
79
  navValue: NavValue.Focused,
76
80
  })},
81
+ .menu-item:not(.disabled):hover {
82
+ background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
83
+ outline: none;
84
+ }
85
+
86
+ &
77
87
  ${navAttribute.css({
78
88
  baseSelector: '.menu-item:not(.disabled)',
79
89
  navValue: NavValue.Active,
80
90
  })},
81
- .menu-item:not(.disabled):hover {
82
- background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
91
+ .menu-item:not(.disabled):active {
92
+ background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
83
93
  outline: none;
84
94
  }
85
95
  }
@@ -116,6 +126,7 @@ export const ViraMenu = defineViraElement()({
116
126
  return html `
117
127
  <${ViraLink.assign({
118
128
  route: item.route,
129
+ disableLinkStyles: true,
119
130
  })}
120
131
  class="menu-item ${classMap({
121
132
  disabled: !!item.disabled,
package/dist/elements/vira-button.element.d.ts CHANGED
@@ -10,7 +10,8 @@ export declare enum ViraButtonStyle {
10
10
  Outline = "vira-button-outline",
11
11
  Danger = "vira-button-danger",
12
12
  DangerOutline = "vira-button-danger-outline",
13
- Ghost = "vira-button-ghost"
13
+ Ghost = "vira-button-ghost",
14
+ Plain = "vira-button-plain"
14
15
  }
15
16
  /**
16
17
  * A custom button with default styling.
@@ -31,4 +32,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
31
32
  * @default false
32
33
  */
33
34
  expandToFitIcon: boolean;
34
- }>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-default-style", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly [], readonly []>;
35
+ }>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-plain-style" | "vira-button-default-style", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color" | "vira-button-border-color", readonly [], readonly []>;
package/dist/elements/vira-button.element.js CHANGED
@@ -19,6 +19,7 @@ export var ViraButtonStyle;
19
19
  ViraButtonStyle["Danger"] = "vira-button-danger";
20
20
  ViraButtonStyle["DangerOutline"] = "vira-button-danger-outline";
21
21
  ViraButtonStyle["Ghost"] = "vira-button-ghost";
22
+ ViraButtonStyle["Plain"] = "vira-button-plain";
22
23
  })(ViraButtonStyle || (ViraButtonStyle = {}));
23
24
  /**
24
25
  * A custom button with default styling.
@@ -38,12 +39,14 @@ export const ViraButton = defineViraElement()({
38
39
  'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
39
40
  'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
40
41
  'vira-button-icon-only': ({ inputs }) => !!inputs.icon && !inputs.text,
42
+ 'vira-button-plain-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Plain,
41
43
  'vira-button-default-style': ({ inputs }) => !inputs.buttonStyle || inputs.buttonStyle === ViraButtonStyle.Default,
42
44
  },
43
45
  cssVars: {
44
46
  'vira-button-padding': '5px 10px',
45
- 'vira-button-internal-foreground-color': 'transparent',
46
- 'vira-button-internal-background-color': 'transparent',
47
+ 'vira-button-internal-foreground-color': viraFormCssVars['vira-form-background-color'].value,
48
+ 'vira-button-internal-background-color': viraFormCssVars['vira-form-accent-primary-color'].value,
49
+ 'vira-button-border-color': 'transparent',
47
50
  },
48
51
  styles: ({ hostClasses, cssVars }) => css `
49
52
  :host {
@@ -54,8 +57,6 @@ export const ViraButton = defineViraElement()({
54
57
  align-items: center;
55
58
  box-sizing: border-box;
56
59
  ${noUserSelect};
57
- ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-color'].value};
58
- ${cssVars['vira-button-internal-foreground-color'].name}: ${viraFormCssVars['vira-form-background-color'].value};
59
60
  ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
60
61
  }
61
62
 
@@ -110,10 +111,28 @@ export const ViraButton = defineViraElement()({
110
111
  }
111
112
  }
112
113
 
114
+ ${hostClasses['vira-button-plain-style'].selector} {
115
+ & button {
116
+ ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-color'].value};
117
+ color: currentColor;
118
+ ${cssVars['vira-button-border-color'].name}: ${viraFormCssVars['vira-form-plain-active-color'].value};
119
+ border-width: 1px;
120
+ }
121
+ &:hover button,
122
+ & button:hover {
123
+ ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-hover-color'].value};
124
+ }
125
+
126
+ &:active button,
127
+ & button:active {
128
+ ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-plain-active-color'].value};
129
+ }
130
+ }
131
+
113
132
  ${hostClasses['vira-button-outline-style'].selector} button {
114
133
  color: ${cssVars['vira-button-internal-background-color'].value};
115
134
  background-color: ${cssVars['vira-button-internal-foreground-color'].value};
116
- border-color: currentColor;
135
+ ${cssVars['vira-button-border-color'].name}: currentColor;
117
136
  }
118
137
 
119
138
  button {
@@ -122,7 +141,7 @@ export const ViraButton = defineViraElement()({
122
141
  position: relative;
123
142
  width: 100%;
124
143
  height: 100%;
125
- border: 2px solid transparent;
144
+ border: 2px solid ${cssVars['vira-button-border-color'].value};
126
145
  box-sizing: border-box;
127
146
  display: inline-flex;
128
147
  justify-content: center;
package/dist/elements/vira-link.element.d.ts CHANGED
@@ -70,4 +70,6 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
70
70
  attributePassthrough: Readonly<PartialWithUndefined<{
71
71
  a: AttributeValues;
72
72
  }>>;
73
- }>, {}, {}, "vira-link-", "vira-link-", readonly [], readonly []>;
73
+ /** If set to true, internal link styles are not applied. */
74
+ disableLinkStyles: boolean;
75
+ }>, {}, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;
package/dist/elements/vira-link.element.js CHANGED
@@ -11,7 +11,10 @@ import { defineViraElement } from './define-vira-element.js';
11
11
  */
12
12
  export const ViraLink = defineViraElement()({
13
13
  tagName: 'vira-link',
14
- styles: css `
14
+ hostClasses: {
15
+ 'vira-link-link-styles': ({ inputs }) => !inputs.disableLinkStyles,
16
+ },
17
+ styles: ({ hostClasses }) => css `
15
18
  :host {
16
19
  display: inline;
17
20
  text-decoration: underline;
@@ -27,14 +30,16 @@ export const ViraLink = defineViraElement()({
27
30
  white-space: inherit;
28
31
  }
29
32
 
30
- :host(:hover) a,
31
- a:hover {
32
- color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
33
- }
33
+ ${hostClasses['vira-link-link-styles'].selector} {
34
+ &:hover a,
35
+ & a:hover {
36
+ color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
37
+ }
34
38
 
35
- :host(:active) a,
36
- a:active {
37
- color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
39
+ &:active a,
40
+ & a:active {
41
+ color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
42
+ }
38
43
  }
39
44
  `,
40
45
  render({ inputs }) {
package/dist/styles/form-styles.d.ts CHANGED
@@ -23,6 +23,9 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
23
23
  readonly 'vira-form-wrapper-radius': "16px";
24
24
  readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;
25
25
  readonly 'vira-form-focus-outline-border-radius': import("element-vir").CSSResult;
26
+ readonly 'vira-form-plain-color': import("element-vir").CSSResult;
27
+ readonly 'vira-form-plain-hover-color': import("element-vir").CSSResult;
28
+ readonly 'vira-form-plain-active-color': import("element-vir").CSSResult;
26
29
  readonly 'vira-form-accent-primary-color': import("element-vir").CSSResult;
27
30
  readonly 'vira-form-accent-primary-hover-color': import("element-vir").CSSResult;
28
31
  readonly 'vira-form-accent-primary-active-color': import("element-vir").CSSResult;
package/dist/styles/form-styles.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { css, unsafeCSS } from 'element-vir';
2
2
  import { defineCssVars } from 'lit-css-vars';
3
3
  import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
4
+ import { viraColorPalette } from './vira-color-palette.js';
4
5
  import { viraTheme } from './vira-color-theme.js';
5
6
  const defaultViraFormRadius = '8px';
6
7
  /**
@@ -16,24 +17,27 @@ export const viraFormCssVars = defineCssVars({
16
17
  'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
17
18
  'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
18
19
  'vira-form-secondary-body-foreground': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
19
- 'vira-form-text-selection-color': viraTheme.colors['vira-blue-background-decoration'].background.value,
20
- 'vira-form-selection-hover-color': viraTheme.colors['vira-blue-background-invisible'].background.value,
21
- 'vira-form-selection-active-color': viraTheme.colors['vira-blue-background-decoration'].background.value,
22
- 'vira-form-error-color': viraTheme.colors['vira-red-background-non-body'].background.value,
23
- 'vira-form-error-hover-color': viraTheme.colors['vira-red-background-header'].background.value,
24
- 'vira-form-error-active-color': viraTheme.colors['vira-red-background-body'].background.value,
25
- 'vira-form-success-color': viraTheme.colors['vira-green-background-non-body'].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
+ 'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
24
+ 'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
25
+ 'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
26
+ 'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
26
27
  'vira-form-label-font-weight': 'bold',
27
28
  'vira-form-radius': defaultViraFormRadius,
28
29
  'vira-form-wrapper-radius': '16px',
29
30
  'vira-form-focus-outline-color': viraTheme.colors['vira-blue-foreground-header'].foreground.value,
30
31
  'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
31
- 'vira-form-accent-primary-color': viraTheme.colors['vira-blue-background-non-body'].background.value,
32
- 'vira-form-accent-primary-hover-color': viraTheme.colors['vira-blue-background-header'].background.value,
33
- 'vira-form-accent-primary-active-color': viraTheme.colors['vira-blue-background-body'].background.value,
34
- 'vira-form-danger-color': viraTheme.colors['vira-red-background-non-body'].background.value,
35
- 'vira-form-danger-hover-color': viraTheme.colors['vira-red-background-header'].background.value,
36
- 'vira-form-danger-active-color': viraTheme.colors['vira-red-background-body'].background.value,
32
+ 'vira-form-plain-color': viraColorPalette['vira-grey-0'].value,
33
+ 'vira-form-plain-hover-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
34
+ 'vira-form-plain-active-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
35
+ 'vira-form-accent-primary-color': viraTheme.colors['vira-blue-behind-bg-non-body'].background.value,
36
+ 'vira-form-accent-primary-hover-color': viraTheme.colors['vira-blue-behind-bg-header'].background.value,
37
+ 'vira-form-accent-primary-active-color': viraTheme.colors['vira-blue-behind-bg-body'].background.value,
38
+ 'vira-form-danger-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
39
+ 'vira-form-danger-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
40
+ 'vira-form-danger-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
37
41
  'vira-form-filled-background-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
38
42
  'vira-form-filled-active-background-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
39
43
  });
package/dist/styles/vira-color-palette.d.ts CHANGED
@@ -84,6 +84,7 @@ export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<
84
84
  readonly 'vira-pink-70': "#b2418b";
85
85
  readonly 'vira-pink-80': "#962471";
86
86
  readonly 'vira-pink-90': "#6e004f";
87
+ readonly 'vira-grey-0': "#f3f6f6";
87
88
  readonly 'vira-grey-5': "#eceff0";
88
89
  readonly 'vira-grey-10': "#dce2e6";
89
90
  readonly 'vira-grey-20': "#c7d2d7";
package/dist/styles/vira-color-palette.js CHANGED
@@ -85,6 +85,7 @@ export const viraColorPalette = defineCssVars({
85
85
  'vira-pink-70': '#b2418b',
86
86
  'vira-pink-80': '#962471',
87
87
  'vira-pink-90': '#6e004f',
88
+ 'vira-grey-0': '#f3f6f6',
88
89
  'vira-grey-5': '#eceff0',
89
90
  'vira-grey-10': '#dce2e6',
90
91
  'vira-grey-20': '#c7d2d7',