cozy-ui 121.0.0 → 121.1.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 (29) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cozy-ui.min.css +1 -1
  3. package/dist/cozy-ui.utils.min.css +1 -1
  4. package/package.json +1 -1
  5. package/react/Avatar/Readme.md +41 -21
  6. package/react/Avatar/helpers.js +13 -2
  7. package/react/Avatar/index.jsx +26 -5
  8. package/react/Buttons/Readme.md +1 -0
  9. package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +156 -0
  10. package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js +7 -19
  11. package/react/ToggleButton/Readme.md +60 -0
  12. package/react/ToggleButton/index.js +24 -1
  13. package/react/ToggleButtonGroup/Readme.md +79 -17
  14. package/stylus/cozy-ui/build.styl +2 -0
  15. package/stylus/utilities/border.styl +8 -0
  16. package/transpiled/react/Avatar/helpers.d.ts +1 -1
  17. package/transpiled/react/Avatar/helpers.js +16 -2
  18. package/transpiled/react/Avatar/index.js +11 -5
  19. package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts +150 -0
  20. package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts +150 -0
  21. package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts +150 -0
  22. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts +150 -0
  23. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +151 -0
  24. package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts +157 -19
  25. package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts +157 -19
  26. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts +157 -19
  27. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts +157 -19
  28. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js +7 -19
  29. package/transpiled/react/ToggleButton/index.js +26 -1
@@ -69,6 +69,85 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
69
69
  }
70
70
  }
71
71
  },
72
+ MuiToggleButtonGroup: {
73
+ groupedHorizontal: {
74
+ '&.rounded': {
75
+ marginRight: 12,
76
+ '&:last-child': {
77
+ marginRight: 0
78
+ },
79
+ '&:not(:first-child)': {
80
+ borderTopLeftRadius: 'inherit',
81
+ borderBottomLeftRadius: 'inherit',
82
+ marginLeft: 'inherit',
83
+ borderLeft: 'inherit'
84
+ },
85
+ '&:not(:last-child)': {
86
+ '&.rounded': {
87
+ borderTopRightRadius: 'inherit',
88
+ borderBottomRightRadius: 'inherit'
89
+ }
90
+ }
91
+ }
92
+ }
93
+ },
94
+ MuiToggleButton: {
95
+ root: {
96
+ borderRadius: 0,
97
+ color: theme.palette.text.secondary,
98
+ border: "1px solid ".concat(theme.palette.border.main),
99
+ padding: 15,
100
+ '&$selected': {
101
+ color: theme.palette.text.primary,
102
+ backgroundColor: 'transparent',
103
+ '&:not($disabled)': {
104
+ '&.customColor': {
105
+ '&-primary': {
106
+ color: theme.palette.primary.main
107
+ }
108
+ }
109
+ }
110
+ },
111
+ '&$disabled': {
112
+ color: theme.palette.text.disabled
113
+ },
114
+ '&.rounded': {
115
+ border: 0,
116
+ borderRadius: theme.shape.borderRadius,
117
+ padding: '10px 12px',
118
+ '&$selected': {
119
+ backgroundColor: theme.palette.action.selected,
120
+ '&:not($disabled)': {
121
+ '&.customColor': {
122
+ '&-primary': {
123
+ color: theme.palette.text.primary,
124
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
125
+ '&:hover': {
126
+ textDecoration: 'none',
127
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
128
+ '@media (hover: none)': {
129
+ backgroundColor: 'transparent'
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+ }
136
+ }
137
+ },
138
+ sizeSmall: {
139
+ padding: 11,
140
+ '&.rounded': {
141
+ padding: '7px 10px'
142
+ }
143
+ },
144
+ sizeLarge: {
145
+ padding: 19,
146
+ '&.rounded': {
147
+ padding: 12
148
+ }
149
+ }
150
+ },
72
151
  MuiButton: {
73
152
  root: {
74
153
  borderRadius: 2,
@@ -563,6 +642,78 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
563
642
  }
564
643
  }
565
644
  },
645
+ MuiAvatarGroup: {
646
+ avatar: {
647
+ border: "2px solid ".concat(theme.palette.background.paper)
648
+ }
649
+ },
650
+ MuiAvatar: {
651
+ root: {
652
+ fontWeight: 600,
653
+ '&.size': {
654
+ '&-xs': {
655
+ width: 16,
656
+ height: 16,
657
+ fontSize: 8,
658
+ '& svg': {
659
+ width: 8,
660
+ height: 8
661
+ }
662
+ },
663
+ '&-s': {
664
+ width: 24,
665
+ height: 24,
666
+ fontSize: 12,
667
+ '& svg': {
668
+ width: 12,
669
+ height: 12
670
+ }
671
+ },
672
+ '&-m': {
673
+ width: 32,
674
+ height: 32,
675
+ fontSize: 16,
676
+ '& svg': {
677
+ width: 16,
678
+ height: 16
679
+ }
680
+ },
681
+ '&-l': {
682
+ width: 48,
683
+ height: 48,
684
+ fontSize: 24,
685
+ '& svg': {
686
+ width: 24,
687
+ height: 24
688
+ }
689
+ },
690
+ '&-xl': {
691
+ width: 64,
692
+ height: 64,
693
+ fontSize: 32,
694
+ '& svg': {
695
+ width: 32,
696
+ height: 32
697
+ }
698
+ }
699
+ },
700
+ '&.disabled': {
701
+ color: theme.palette.primary.contrastText,
702
+ background: 'var(--silver)',
703
+ // should be semantic but used legacy component color for now
704
+ '& img': {
705
+ filter: 'grayscale(1) brightness(2)',
706
+ opacity: 0.5
707
+ }
708
+ },
709
+ '&.border': {
710
+ border: "2px solid ".concat(theme.palette.background.paper)
711
+ },
712
+ '&.innerBorder': {
713
+ boxShadow: "inset 0px 0px 0px 1px ".concat(theme.palette.border.main)
714
+ }
715
+ }
716
+ },
566
717
  MuiCheckbox: {
567
718
  colorSecondary: {
568
719
  '&$checked': {
@@ -57,6 +57,85 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {
@@ -1575,22 +1725,23 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
1575
1725
  height: number;
1576
1726
  };
1577
1727
  };
1728
+ MuiAvatarGroup: {
1729
+ root: {
1730
+ '& > div:last-child': {
1731
+ boxShadow: string;
1732
+ };
1733
+ };
1734
+ };
1578
1735
  MuiAvatar: {
1579
1736
  root: {
1580
- fontWeight: number;
1581
1737
  '&.size': {
1582
1738
  '&-xs': {
1583
- width: number;
1584
- height: number;
1585
- fontSize: number;
1586
1739
  '& svg': {
1587
1740
  width: number;
1588
1741
  height: number;
1589
1742
  };
1590
1743
  };
1591
1744
  '&-s': {
1592
- width: number;
1593
- height: number;
1594
1745
  fontSize: number;
1595
1746
  '& svg': {
1596
1747
  width: number;
@@ -1598,37 +1749,24 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
1598
1749
  };
1599
1750
  };
1600
1751
  '&-m': {
1601
- width: number;
1602
- height: number;
1603
- fontSize: number;
1604
1752
  '& svg': {
1605
1753
  width: number;
1606
1754
  height: number;
1607
1755
  };
1608
1756
  };
1609
1757
  '&-l': {
1610
- width: number;
1611
- height: number;
1612
- fontSize: number;
1613
1758
  '& svg': {
1614
1759
  width: number;
1615
1760
  height: number;
1616
1761
  };
1617
1762
  };
1618
1763
  '&-xl': {
1619
- width: number;
1620
- height: number;
1621
- fontSize: number;
1622
1764
  '& svg': {
1623
1765
  width: number;
1624
1766
  height: number;
1625
1767
  };
1626
1768
  };
1627
1769
  };
1628
- '&.disabled': {
1629
- color: any;
1630
- background: any;
1631
- };
1632
1770
  };
1633
1771
  colorDefault: {
1634
1772
  backgroundColor: any;
@@ -57,6 +57,85 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {
@@ -1575,22 +1725,23 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
1575
1725
  height: number;
1576
1726
  };
1577
1727
  };
1728
+ MuiAvatarGroup: {
1729
+ root: {
1730
+ '& > div:last-child': {
1731
+ boxShadow: string;
1732
+ };
1733
+ };
1734
+ };
1578
1735
  MuiAvatar: {
1579
1736
  root: {
1580
- fontWeight: number;
1581
1737
  '&.size': {
1582
1738
  '&-xs': {
1583
- width: number;
1584
- height: number;
1585
- fontSize: number;
1586
1739
  '& svg': {
1587
1740
  width: number;
1588
1741
  height: number;
1589
1742
  };
1590
1743
  };
1591
1744
  '&-s': {
1592
- width: number;
1593
- height: number;
1594
1745
  fontSize: number;
1595
1746
  '& svg': {
1596
1747
  width: number;
@@ -1598,37 +1749,24 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
1598
1749
  };
1599
1750
  };
1600
1751
  '&-m': {
1601
- width: number;
1602
- height: number;
1603
- fontSize: number;
1604
1752
  '& svg': {
1605
1753
  width: number;
1606
1754
  height: number;
1607
1755
  };
1608
1756
  };
1609
1757
  '&-l': {
1610
- width: number;
1611
- height: number;
1612
- fontSize: number;
1613
1758
  '& svg': {
1614
1759
  width: number;
1615
1760
  height: number;
1616
1761
  };
1617
1762
  };
1618
1763
  '&-xl': {
1619
- width: number;
1620
- height: number;
1621
- fontSize: number;
1622
1764
  '& svg': {
1623
1765
  width: number;
1624
1766
  height: number;
1625
1767
  };
1626
1768
  };
1627
1769
  };
1628
- '&.disabled': {
1629
- color: any;
1630
- background: any;
1631
- };
1632
1770
  };
1633
1771
  colorDefault: {
1634
1772
  backgroundColor: any;