vira 29.2.1 → 29.3.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 (9) hide show
  1. package/dist/elements/vira-button.element.d.ts +3 -2
  2. package/dist/elements/vira-button.element.js +25 -6
  3. package/dist/styles/form-styles.d.ts +3 -0
  4. package/dist/styles/form-styles.js +21 -16
  5. package/dist/styles/vira-color-palette.d.ts +1 -0
  6. package/dist/styles/vira-color-palette.js +1 -0
  7. package/dist/styles/vira-color-theme.d.ts +612 -234
  8. package/dist/styles/vira-color-theme.js +675 -234
  9. package/package.json +1 -1
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/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,7 +1,9 @@
1
- import { css } from 'element-vir';
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';
6
+ const defaultViraFormRadius = '8px';
5
7
  /**
6
8
  * CSS vars for vira form elements.
7
9
  *
@@ -15,24 +17,27 @@ export const viraFormCssVars = defineCssVars({
15
17
  'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
16
18
  'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
17
19
  'vira-form-secondary-body-foreground': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
18
- 'vira-form-text-selection-color': viraTheme.colors['vira-blue-background-decoration'].background.value,
19
- 'vira-form-selection-hover-color': viraTheme.colors['vira-blue-background-invisible'].background.value,
20
- 'vira-form-selection-active-color': viraTheme.colors['vira-blue-background-decoration'].background.value,
21
- 'vira-form-error-color': viraTheme.colors['vira-red-background-non-body'].background.value,
22
- 'vira-form-error-hover-color': viraTheme.colors['vira-red-background-header'].background.value,
23
- 'vira-form-error-active-color': viraTheme.colors['vira-red-background-body'].background.value,
24
- '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,
25
27
  'vira-form-label-font-weight': 'bold',
26
- 'vira-form-radius': '8px',
28
+ 'vira-form-radius': defaultViraFormRadius,
27
29
  'vira-form-wrapper-radius': '16px',
28
30
  'vira-form-focus-outline-color': viraTheme.colors['vira-blue-foreground-header'].foreground.value,
29
- 'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-input-radius) + 2px)`,
30
- 'vira-form-accent-primary-color': viraTheme.colors['vira-blue-background-non-body'].background.value,
31
- 'vira-form-accent-primary-hover-color': viraTheme.colors['vira-blue-background-header'].background.value,
32
- 'vira-form-accent-primary-active-color': viraTheme.colors['vira-blue-background-body'].background.value,
33
- 'vira-form-danger-color': viraTheme.colors['vira-red-background-non-body'].background.value,
34
- 'vira-form-danger-hover-color': viraTheme.colors['vira-red-background-header'].background.value,
35
- 'vira-form-danger-active-color': viraTheme.colors['vira-red-background-body'].background.value,
31
+ 'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
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,
36
41
  'vira-form-filled-background-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
37
42
  'vira-form-filled-active-background-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
38
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',