vira 31.0.0 → 31.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.
Files changed (7) hide show
  1. package/dist/elements/vira-input.element.js +1 -1
  2. package/dist/elements/vira-select.element.js +1 -1
  3. package/dist/styles/form-styles.js +7 -7
  4. package/dist/styles/vira-color-palette.d.ts +10 -0
  5. package/dist/styles/vira-color-palette.js +10 -0
  6. package/dist/styles/vira-color-theme.js +65 -65
  7. package/package.json +1 -1
package/dist/elements/vira-input.element.js CHANGED
@@ -172,7 +172,7 @@ export const ViraInput = defineViraElement()({
172
172
 
173
173
  &:focus:focus-visible:not([disabled]) ~ .focus-border {
174
174
  ${createFocusStyles({
175
- elementBorderSize: '0',
175
+ elementBorderSize: '1px',
176
176
  noNesting: true,
177
177
  })}
178
178
  }
package/dist/elements/vira-select.element.js CHANGED
@@ -128,7 +128,7 @@ export const ViraSelect = defineViraElement()({
128
128
 
129
129
  &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
130
130
  ${createFocusStyles({
131
- elementBorderSize: '0',
131
+ elementBorderSize: '1px',
132
132
  noNesting: true,
133
133
  })}
134
134
  }
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-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,
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,
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-blue-foreground-header'].foreground.value,
39
+ 'vira-form-focus-outline-color': viraTheme.colors['vira-accent-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-0'].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-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,
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,
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/vira-color-palette.d.ts CHANGED
@@ -64,6 +64,16 @@ export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<
64
64
  readonly 'vira-blue-70': "#006ec7";
65
65
  readonly 'vira-blue-80': "#0054aa";
66
66
  readonly 'vira-blue-90': "#00358a";
67
+ readonly 'vira-accent-5': "#daf2ff";
68
+ readonly 'vira-accent-10': "#bde8ff";
69
+ readonly 'vira-accent-20': "#98d8ff";
70
+ readonly 'vira-accent-30': "#77c6ff";
71
+ readonly 'vira-accent-40': "#4cb2ff";
72
+ readonly 'vira-accent-50': "#299cf9";
73
+ readonly 'vira-accent-60': "#0086e0";
74
+ readonly 'vira-accent-70': "#006ec7";
75
+ readonly 'vira-accent-80': "#0054aa";
76
+ readonly 'vira-accent-90': "#00358a";
67
77
  readonly 'vira-purple-5': "#f6eaff";
68
78
  readonly 'vira-purple-10': "#eddaff";
69
79
  readonly 'vira-purple-20': "#e6c3ff";
package/dist/styles/vira-color-palette.js CHANGED
@@ -65,6 +65,16 @@ export const viraColorPalette = defineCssVars({
65
65
  'vira-blue-70': '#006ec7',
66
66
  'vira-blue-80': '#0054aa',
67
67
  'vira-blue-90': '#00358a',
68
+ 'vira-accent-5': '#daf2ff',
69
+ 'vira-accent-10': '#bde8ff',
70
+ 'vira-accent-20': '#98d8ff',
71
+ 'vira-accent-30': '#77c6ff',
72
+ 'vira-accent-40': '#4cb2ff',
73
+ 'vira-accent-50': '#299cf9',
74
+ 'vira-accent-60': '#0086e0',
75
+ 'vira-accent-70': '#006ec7',
76
+ 'vira-accent-80': '#0054aa',
77
+ 'vira-accent-90': '#00358a',
68
78
  'vira-purple-5': '#f6eaff',
69
79
  'vira-purple-10': '#eddaff',
70
80
  'vira-purple-20': '#e6c3ff',
package/dist/styles/vira-color-theme.js CHANGED
@@ -660,112 +660,112 @@ export const viraTheme = defineColorTheme({
660
660
  background: viraColorPalette['vira-blue-80'],
661
661
  },
662
662
  'vira-accent-foreground-small-body': {
663
- foreground: viraColorPalette['vira-blue-90'],
663
+ foreground: viraColorPalette['vira-accent-90'],
664
664
  },
665
665
  'vira-accent-foreground-body': {
666
- foreground: viraColorPalette['vira-blue-80'],
666
+ foreground: viraColorPalette['vira-accent-80'],
667
667
  },
668
668
  'vira-accent-foreground-non-body': {
669
- foreground: viraColorPalette['vira-blue-70'],
669
+ foreground: viraColorPalette['vira-accent-70'],
670
670
  },
671
671
  'vira-accent-foreground-header': {
672
- foreground: viraColorPalette['vira-blue-50'],
672
+ foreground: viraColorPalette['vira-accent-50'],
673
673
  },
674
674
  'vira-accent-foreground-placeholder': {
675
- foreground: viraColorPalette['vira-blue-30'],
675
+ foreground: viraColorPalette['vira-accent-30'],
676
676
  },
677
677
  'vira-accent-foreground-decoration': {
678
- foreground: viraColorPalette['vira-blue-20'],
678
+ foreground: viraColorPalette['vira-accent-20'],
679
679
  },
680
680
  'vira-accent-foreground-invisible': {
681
- foreground: viraColorPalette['vira-blue-10'],
681
+ foreground: viraColorPalette['vira-accent-10'],
682
682
  },
683
683
  'vira-accent-behind-bg-small-body': {
684
684
  foreground: {
685
685
  refDefaultBackground: true,
686
686
  },
687
- background: viraColorPalette['vira-blue-90'],
687
+ background: viraColorPalette['vira-accent-90'],
688
688
  },
689
689
  'vira-accent-behind-bg-body': {
690
690
  foreground: {
691
691
  refDefaultBackground: true,
692
692
  },
693
- background: viraColorPalette['vira-blue-80'],
693
+ background: viraColorPalette['vira-accent-80'],
694
694
  },
695
695
  'vira-accent-behind-bg-non-body': {
696
696
  foreground: {
697
697
  refDefaultBackground: true,
698
698
  },
699
- background: viraColorPalette['vira-blue-60'],
699
+ background: viraColorPalette['vira-accent-60'],
700
700
  },
701
701
  'vira-accent-behind-bg-header': {
702
702
  foreground: {
703
703
  refDefaultBackground: true,
704
704
  },
705
- background: viraColorPalette['vira-blue-40'],
705
+ background: viraColorPalette['vira-accent-40'],
706
706
  },
707
707
  'vira-accent-behind-bg-placeholder': {
708
708
  foreground: {
709
709
  refDefaultBackground: true,
710
710
  },
711
- background: viraColorPalette['vira-blue-30'],
711
+ background: viraColorPalette['vira-accent-30'],
712
712
  },
713
713
  'vira-accent-behind-bg-decoration': {
714
714
  foreground: {
715
715
  refDefaultBackground: true,
716
716
  },
717
- background: viraColorPalette['vira-blue-20'],
717
+ background: viraColorPalette['vira-accent-20'],
718
718
  },
719
719
  'vira-accent-behind-bg-invisible': {
720
720
  foreground: {
721
721
  refDefaultBackground: true,
722
722
  },
723
- background: viraColorPalette['vira-blue-5'],
723
+ background: viraColorPalette['vira-accent-5'],
724
724
  },
725
725
  'vira-accent-behind-fg-small-body': {
726
- background: viraColorPalette['vira-blue-5'],
726
+ background: viraColorPalette['vira-accent-5'],
727
727
  },
728
728
  'vira-accent-behind-fg-body': {
729
- background: viraColorPalette['vira-blue-20'],
729
+ background: viraColorPalette['vira-accent-20'],
730
730
  },
731
731
  'vira-accent-behind-fg-non-body': {
732
- background: viraColorPalette['vira-blue-30'],
732
+ background: viraColorPalette['vira-accent-30'],
733
733
  },
734
734
  'vira-accent-behind-fg-header': {
735
- background: viraColorPalette['vira-blue-50'],
735
+ background: viraColorPalette['vira-accent-50'],
736
736
  },
737
737
  'vira-accent-behind-fg-placeholder': {
738
- background: viraColorPalette['vira-blue-60'],
738
+ background: viraColorPalette['vira-accent-60'],
739
739
  },
740
740
  'vira-accent-behind-fg-decoration': {
741
- background: viraColorPalette['vira-blue-80'],
741
+ background: viraColorPalette['vira-accent-80'],
742
742
  },
743
743
  'vira-accent-behind-fg-invisible': {
744
- background: viraColorPalette['vira-blue-90'],
744
+ background: viraColorPalette['vira-accent-90'],
745
745
  },
746
746
  'vira-accent-on-self-body': {
747
- foreground: viraColorPalette['vira-blue-90'],
748
- background: viraColorPalette['vira-blue-10'],
747
+ foreground: viraColorPalette['vira-accent-90'],
748
+ background: viraColorPalette['vira-accent-10'],
749
749
  },
750
750
  'vira-accent-on-self-non-body': {
751
- foreground: viraColorPalette['vira-blue-90'],
752
- background: viraColorPalette['vira-blue-20'],
751
+ foreground: viraColorPalette['vira-accent-90'],
752
+ background: viraColorPalette['vira-accent-20'],
753
753
  },
754
754
  'vira-accent-on-self-header': {
755
- foreground: viraColorPalette['vira-blue-90'],
756
- background: viraColorPalette['vira-blue-40'],
755
+ foreground: viraColorPalette['vira-accent-90'],
756
+ background: viraColorPalette['vira-accent-40'],
757
757
  },
758
758
  'vira-accent-on-self-placeholder': {
759
- foreground: viraColorPalette['vira-blue-90'],
760
- background: viraColorPalette['vira-blue-50'],
759
+ foreground: viraColorPalette['vira-accent-90'],
760
+ background: viraColorPalette['vira-accent-50'],
761
761
  },
762
762
  'vira-accent-on-self-decoration': {
763
- foreground: viraColorPalette['vira-blue-90'],
764
- background: viraColorPalette['vira-blue-70'],
763
+ foreground: viraColorPalette['vira-accent-90'],
764
+ background: viraColorPalette['vira-accent-70'],
765
765
  },
766
766
  'vira-accent-on-self-invisible': {
767
- foreground: viraColorPalette['vira-blue-90'],
768
- background: viraColorPalette['vira-blue-80'],
767
+ foreground: viraColorPalette['vira-accent-90'],
768
+ background: viraColorPalette['vira-accent-80'],
769
769
  },
770
770
  'vira-purple-foreground-small-body': {
771
771
  foreground: viraColorPalette['vira-purple-90'],
@@ -1608,88 +1608,88 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
1608
1608
  background: viraColorPalette['vira-blue-10'],
1609
1609
  },
1610
1610
  'vira-accent-foreground-small-body': {
1611
- foreground: viraColorPalette['vira-blue-5'],
1611
+ foreground: viraColorPalette['vira-accent-5'],
1612
1612
  },
1613
1613
  'vira-accent-foreground-body': {
1614
- foreground: viraColorPalette['vira-blue-20'],
1614
+ foreground: viraColorPalette['vira-accent-20'],
1615
1615
  },
1616
1616
  'vira-accent-foreground-non-body': {
1617
- foreground: viraColorPalette['vira-blue-30'],
1617
+ foreground: viraColorPalette['vira-accent-30'],
1618
1618
  },
1619
1619
  'vira-accent-foreground-placeholder': {
1620
- foreground: viraColorPalette['vira-blue-60'],
1620
+ foreground: viraColorPalette['vira-accent-60'],
1621
1621
  },
1622
1622
  'vira-accent-foreground-decoration': {
1623
- foreground: viraColorPalette['vira-blue-80'],
1623
+ foreground: viraColorPalette['vira-accent-80'],
1624
1624
  },
1625
1625
  'vira-accent-foreground-invisible': {
1626
- foreground: viraColorPalette['vira-blue-90'],
1626
+ foreground: viraColorPalette['vira-accent-90'],
1627
1627
  },
1628
1628
  'vira-accent-behind-bg-small-body': {
1629
- background: viraColorPalette['vira-blue-5'],
1629
+ background: viraColorPalette['vira-accent-5'],
1630
1630
  },
1631
1631
  'vira-accent-behind-bg-body': {
1632
- background: viraColorPalette['vira-blue-20'],
1632
+ background: viraColorPalette['vira-accent-20'],
1633
1633
  },
1634
1634
  'vira-accent-behind-bg-non-body': {
1635
- background: viraColorPalette['vira-blue-30'],
1635
+ background: viraColorPalette['vira-accent-30'],
1636
1636
  },
1637
1637
  'vira-accent-behind-bg-header': {
1638
- background: viraColorPalette['vira-blue-50'],
1638
+ background: viraColorPalette['vira-accent-50'],
1639
1639
  },
1640
1640
  'vira-accent-behind-bg-placeholder': {
1641
- background: viraColorPalette['vira-blue-60'],
1641
+ background: viraColorPalette['vira-accent-60'],
1642
1642
  },
1643
1643
  'vira-accent-behind-bg-decoration': {
1644
- background: viraColorPalette['vira-blue-80'],
1644
+ background: viraColorPalette['vira-accent-80'],
1645
1645
  },
1646
1646
  'vira-accent-behind-bg-invisible': {
1647
- background: viraColorPalette['vira-blue-90'],
1647
+ background: viraColorPalette['vira-accent-90'],
1648
1648
  },
1649
1649
  'vira-accent-behind-fg-small-body': {
1650
- background: viraColorPalette['vira-blue-90'],
1650
+ background: viraColorPalette['vira-accent-90'],
1651
1651
  },
1652
1652
  'vira-accent-behind-fg-body': {
1653
- background: viraColorPalette['vira-blue-80'],
1653
+ background: viraColorPalette['vira-accent-80'],
1654
1654
  },
1655
1655
  'vira-accent-behind-fg-non-body': {
1656
- background: viraColorPalette['vira-blue-60'],
1656
+ background: viraColorPalette['vira-accent-60'],
1657
1657
  },
1658
1658
  'vira-accent-behind-fg-header': {
1659
- background: viraColorPalette['vira-blue-40'],
1659
+ background: viraColorPalette['vira-accent-40'],
1660
1660
  },
1661
1661
  'vira-accent-behind-fg-placeholder': {
1662
- background: viraColorPalette['vira-blue-30'],
1662
+ background: viraColorPalette['vira-accent-30'],
1663
1663
  },
1664
1664
  'vira-accent-behind-fg-decoration': {
1665
- background: viraColorPalette['vira-blue-20'],
1665
+ background: viraColorPalette['vira-accent-20'],
1666
1666
  },
1667
1667
  'vira-accent-behind-fg-invisible': {
1668
- background: viraColorPalette['vira-blue-5'],
1668
+ background: viraColorPalette['vira-accent-5'],
1669
1669
  },
1670
1670
  'vira-accent-on-self-body': {
1671
- foreground: viraColorPalette['vira-blue-5'],
1672
- background: viraColorPalette['vira-blue-90'],
1671
+ foreground: viraColorPalette['vira-accent-5'],
1672
+ background: viraColorPalette['vira-accent-90'],
1673
1673
  },
1674
1674
  'vira-accent-on-self-non-body': {
1675
- foreground: viraColorPalette['vira-blue-5'],
1676
- background: viraColorPalette['vira-blue-70'],
1675
+ foreground: viraColorPalette['vira-accent-5'],
1676
+ background: viraColorPalette['vira-accent-70'],
1677
1677
  },
1678
1678
  'vira-accent-on-self-header': {
1679
- foreground: viraColorPalette['vira-blue-5'],
1680
- background: viraColorPalette['vira-blue-60'],
1679
+ foreground: viraColorPalette['vira-accent-5'],
1680
+ background: viraColorPalette['vira-accent-60'],
1681
1681
  },
1682
1682
  'vira-accent-on-self-placeholder': {
1683
- foreground: viraColorPalette['vira-blue-5'],
1684
- background: viraColorPalette['vira-blue-40'],
1683
+ foreground: viraColorPalette['vira-accent-5'],
1684
+ background: viraColorPalette['vira-accent-40'],
1685
1685
  },
1686
1686
  'vira-accent-on-self-decoration': {
1687
- foreground: viraColorPalette['vira-blue-5'],
1688
- background: viraColorPalette['vira-blue-30'],
1687
+ foreground: viraColorPalette['vira-accent-5'],
1688
+ background: viraColorPalette['vira-accent-30'],
1689
1689
  },
1690
1690
  'vira-accent-on-self-invisible': {
1691
- foreground: viraColorPalette['vira-blue-5'],
1692
- background: viraColorPalette['vira-blue-10'],
1691
+ foreground: viraColorPalette['vira-accent-5'],
1692
+ background: viraColorPalette['vira-accent-10'],
1693
1693
  },
1694
1694
  'vira-purple-foreground-small-body': {
1695
1695
  foreground: viraColorPalette['vira-purple-5'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "31.0.0",
3
+ "version": "31.0.2",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",