vira 1.0.0 → 1.0.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.
@@ -16,8 +16,8 @@ export const ViraInput = defineViraElement()({
16
16
  'vira-input-placeholder-color': '#ccc',
17
17
  'vira-input-text-color': 'black',
18
18
  'vira-input-border-color': '#ccc',
19
- 'vira-input-focus-border-color': '#59B1FF',
20
- 'vira-input-text-selection-color': '#CFE9FF',
19
+ 'vira-input-focus-border-color': '#59b1ff',
20
+ 'vira-input-text-selection-color': '#cfe9ff',
21
21
  'vira-input-padding-horizontal': '10px',
22
22
  'vira-input-padding-vertical': '6px',
23
23
  },
@@ -11,9 +11,10 @@ export const Options24Icon = defineIcon({
11
11
  <circle cx="8.5" cy="18.5" r="2.5" />
12
12
  </g>
13
13
  <path
14
- stroke="none"
15
- fill="${viraIconCssVars['vira-icon-stroke-color'].value}"
16
- d="M6 18a3 3 0 0 0 0 1H3v-1h3Zm5 1a3 3 0 0 0 0-1h10v1H11Zm3-7a3 3 0 0 0 0 1H3v-1h11Zm5 1a3 3 0 0 0 0-1h2v1h-2ZM7 5a3 3 0 0 0 0 1H3V5h4Zm5 1a3 3 0 0 0 0-1h9v1h-9Z"
14
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
15
+ stroke="${viraIconCssVars['vira-icon-stroke-color'].value}"
16
+ fill="none"
17
+ d="M3 5.5h3.5m5 0h8.5M3 12.5h11m5 0h2M3 18.5h3m5 0h10"
17
18
  />
18
19
  </svg>
19
20
  `,
@@ -7,7 +7,6 @@ export const StatusFailure24Icon = defineIcon({
7
7
  <svg
8
8
  xmlns="http://www.w3.org/2000/svg"
9
9
  xml:space="preserve"
10
- style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
11
10
  width="24"
12
11
  height="24"
13
12
  viewBox="0 0 24 24"
@@ -16,13 +15,15 @@ export const StatusFailure24Icon = defineIcon({
16
15
  cx="12"
17
16
  cy="12"
18
17
  r="9"
18
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
19
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
20
20
  fill="none"
21
21
  />
22
22
  <path
23
- stroke="none"
24
- fill=${viraIconCssVars['vira-icon-stroke-color'].value}
25
- d="m11.33 12-3.7-4.17.74-.66L12 11.25l3.63-4.08.74.66-3.7 4.17 3.7 4.17-.74.66L12 12.75l-3.63 4.08-.74-.66 3.7-4.17Z"
23
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
24
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
25
+ fill="none"
26
+ d="M8 16.5 L16 7.5 M8 7.5 L16 16.5"
26
27
  />
27
28
  </svg>
28
29
  `,
@@ -9,6 +9,7 @@ export const StatusInProgress24Icon = defineIcon({
9
9
  cx="12"
10
10
  cy="12"
11
11
  r="9"
12
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
12
13
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
13
14
  fill="none"
14
15
  />
@@ -17,21 +18,24 @@ export const StatusInProgress24Icon = defineIcon({
17
18
  cy="12"
18
19
  r="1"
19
20
  fill=${viraIconCssVars['vira-icon-stroke-color'].value}
20
- stroke="none"
21
+ stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
22
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
21
23
  />
22
24
  <circle
23
25
  cx="12"
24
26
  cy="12"
25
27
  r="1"
26
28
  fill=${viraIconCssVars['vira-icon-stroke-color'].value}
27
- stroke="none"
29
+ stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
30
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
28
31
  />
29
32
  <circle
30
33
  cx="17"
31
34
  cy="12"
32
35
  r="1"
33
36
  fill=${viraIconCssVars['vira-icon-stroke-color'].value}
34
- stroke="none"
37
+ stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
38
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
35
39
  />
36
40
  </svg>
37
41
  `,
@@ -9,13 +9,15 @@ export const StatusSuccess24Icon = defineIcon({
9
9
  cx="12"
10
10
  cy="12"
11
11
  r="9"
12
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
12
13
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
13
14
  fill="none"
14
15
  />
15
16
  <path
16
- d="m6.64 13.81.7-.7 2.63 2.62 6.65-7.6.74.66-7.35 8.4-3.37-3.38Z"
17
- fill=${viraIconCssVars['vira-icon-stroke-color'].value}
18
- stroke="none"
17
+ d="m17 8.5-7 8-3-3"
18
+ fill="none"
19
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
20
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
21
  />
20
22
  </svg>
21
23
  `,
@@ -1,7 +1,7 @@
1
1
  import { defineCssVars } from 'lit-css-vars';
2
2
  export const viraAnimationDurations = defineCssVars({
3
3
  /** A longer duration show a full animation. */
4
- 'vira-extended-animation-duration': '1s',
4
+ 'vira-extended-animation-duration': '1.2s',
5
5
  /** A longer duration to emphasize the animation. */
6
6
  'vira-pretty-animation-duration': '300ms',
7
7
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -40,6 +40,7 @@
40
40
  "test:docs": "virmator code-in-markdown check"
41
41
  },
42
42
  "dependencies": {
43
+ "@augment-vir/common": "^16.4.0",
43
44
  "element-vir": "^16.3.1",
44
45
  "lit-css-vars": "^3.0.0",
45
46
  "spa-router-vir": "^2.1.1",