@am92/react-design-system 2.7.3 → 2.7.5

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.
@@ -1 +1,9 @@
1
- export declare const DsBackdropOverrides: {};
1
+ export declare const DsBackdropOverrides: {
2
+ MuiBackdrop: {
3
+ styleOverrides: {
4
+ root: {
5
+ backgroundColor: string;
6
+ };
7
+ };
8
+ };
9
+ };
@@ -1 +1,9 @@
1
- export const DsBackdropOverrides = {};
1
+ export const DsBackdropOverrides = {
2
+ MuiBackdrop: {
3
+ styleOverrides: {
4
+ root: {
5
+ backgroundColor: 'var(--ds-colour-overlay)'
6
+ }
7
+ }
8
+ }
9
+ };
@@ -4,17 +4,10 @@ export declare const DsCheckboxOverrides: {
4
4
  styleOverrides: {
5
5
  root: {
6
6
  color: string;
7
- '&:hover:not(.Mui-checked)': {
8
- backgroundColor: string;
9
- };
10
- '&:focus:not(.Mui-checked)': {
11
- backgroundColor: string;
12
- };
13
- '&.MuiCheckbox-colorPrimary.Mui-checked': {
7
+ '&.Mui-disabled': {
14
8
  color: string;
15
9
  };
16
- '&.MuiCheckbox-colorSecondary.Mui-checked': {
17
- color: string;
10
+ '&:not(.Mui-checked)': {
18
11
  '&:hover': {
19
12
  backgroundColor: string;
20
13
  };
@@ -22,25 +15,47 @@ export declare const DsCheckboxOverrides: {
22
15
  backgroundColor: string;
23
16
  };
24
17
  };
25
- '&.MuiCheckbox-colorError.Mui-checked': {
26
- color: string;
27
- };
28
- '&.MuiCheckbox-colorSuccess.Mui-checked': {
18
+ };
19
+ colorPrimary: {
20
+ '&.Mui-checked&:not(.Mui-checked)': {
29
21
  color: string;
30
22
  };
31
- '&.MuiCheckbox-colorWarning.Mui-checked': {
23
+ };
24
+ colorSecondary: {
25
+ '&.Mui-checked&:not(.Mui-checked)': {
32
26
  color: string;
27
+ '&:hover': {
28
+ backgroundColor: string;
29
+ };
30
+ '&:focus': {
31
+ backgroundColor: string;
32
+ };
33
33
  };
34
- '&.Mui-disabled': {
34
+ };
35
+ colorError: {
36
+ '&.Mui-checked&:not(.Mui-checked)': {
35
37
  color: string;
36
38
  };
37
- colorPrimary: {
39
+ };
40
+ colorSuccess: {
41
+ '&.Mui-checked&:not(.Mui-checked)': {
38
42
  color: string;
39
43
  };
40
- colorSecondary: {
44
+ };
45
+ colorWarning: {
46
+ '&.Mui-checked&:not(.Mui-checked)': {
41
47
  color: string;
42
48
  };
43
49
  };
50
+ sizeSmall: {
51
+ fontSize: string;
52
+ };
53
+ sizeMedium: {
54
+ fontSize: string;
55
+ };
56
+ sizeLarge: {
57
+ fontSize: string;
58
+ };
44
59
  };
45
60
  };
46
61
  };
@@ -5,16 +5,25 @@ export const DsCheckboxOverrides = {
5
5
  styleOverrides: {
6
6
  root: {
7
7
  color: 'var(--ds-colour-iconDefault)',
8
- '&:hover:not(.Mui-checked)': {
9
- backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
10
- },
11
- '&:focus:not(.Mui-checked)': {
12
- backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
8
+ '&.Mui-disabled': {
9
+ color: 'var(--ds-colour-iconDisabled)'
13
10
  },
14
- '&.MuiCheckbox-colorPrimary.Mui-checked': {
11
+ '&:not(.Mui-checked)': {
12
+ '&:hover': {
13
+ backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
14
+ },
15
+ '&:focus': {
16
+ backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
17
+ }
18
+ }
19
+ },
20
+ colorPrimary: {
21
+ '&.Mui-checked&:not(.Mui-checked)': {
15
22
  color: 'var(--ds-colour-iconActionPrimary)'
16
- },
17
- '&.MuiCheckbox-colorSecondary.Mui-checked': {
23
+ }
24
+ },
25
+ colorSecondary: {
26
+ '&.Mui-checked&:not(.Mui-checked)': {
18
27
  color: 'var(--ds-colour-iconActionSecondary)',
19
28
  '&:hover': {
20
29
  backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
@@ -22,25 +31,31 @@ export const DsCheckboxOverrides = {
22
31
  '&:focus': {
23
32
  backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
24
33
  }
25
- },
26
- '&.MuiCheckbox-colorError.Mui-checked': {
34
+ }
35
+ },
36
+ colorError: {
37
+ '&.Mui-checked&:not(.Mui-checked)': {
27
38
  color: 'var(--ds-colour-iconNegative)'
28
- },
29
- '&.MuiCheckbox-colorSuccess.Mui-checked': {
39
+ }
40
+ },
41
+ colorSuccess: {
42
+ '&.Mui-checked&:not(.Mui-checked)': {
30
43
  color: 'var(--ds-colour-iconPositive)'
31
- },
32
- '&.MuiCheckbox-colorWarning.Mui-checked': {
44
+ }
45
+ },
46
+ colorWarning: {
47
+ '&.Mui-checked&:not(.Mui-checked)': {
33
48
  color: 'var(--ds-colour-iconWarning)'
34
- },
35
- '&.Mui-disabled': {
36
- color: 'var(--ds-colour-iconDisabled)'
37
- },
38
- colorPrimary: {
39
- color: 'var(--ds-colour-iconActionPrimary)'
40
- },
41
- colorSecondary: {
42
- color: 'var(--ds-colour-iconActionSecondary)'
43
49
  }
50
+ },
51
+ sizeSmall: {
52
+ fontSize: 'var(--ds-typo-fontSizeCold)'
53
+ },
54
+ sizeMedium: {
55
+ fontSize: 'var(--ds-typo-fontSizeMild)'
56
+ },
57
+ sizeLarge: {
58
+ fontSize: 'var(--ds-typo-fontSizeWarm)'
44
59
  }
45
60
  }
46
61
  }
@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { DsRemixIcon } from '../DsRemixIcon';
3
3
  export const DsCheckboxDefaultProps = {
4
4
  color: 'secondary',
5
- icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-line", color: "inherit" }),
6
- checkedIcon: _jsx(DsRemixIcon, { className: "ri-checkbox-fill", color: "inherit" }),
7
- indeterminateIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-indeterminate-fill", color: "inherit" }))
5
+ icon: (_jsx(DsRemixIcon, { className: "ri-checkbox-blank-line", color: "inherit", fontSize: "inherit" })),
6
+ checkedIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-fill", color: "inherit", fontSize: "inherit" })),
7
+ indeterminateIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-indeterminate-fill", color: "inherit", fontSize: "inherit" })),
8
+ size: 'small'
8
9
  };
@@ -93,6 +93,6 @@ export class DsDialog extends React.Component {
93
93
  md: 'var(--ds-spacing-warm)'
94
94
  },
95
95
  ...ActionsProps?.sx
96
- }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "medium", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "medium", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
96
+ }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
97
97
  }
98
98
  }
@@ -2,7 +2,7 @@ export const DsDialogOverrides = {
2
2
  MuiDialog: {
3
3
  styleOverrides: {
4
4
  paper: {
5
- backgroundColor: 'var(--ds-colour-surfacePrimary)',
5
+ backgroundColor: 'var(--ds-colour-surfaceBackground)',
6
6
  borderRadius: 'var(--ds-radius-bitterCold)',
7
7
  boxShadow: 'var(--ds-elevation-24)',
8
8
  margin: 'var(--ds-spacing-glacial)',
@@ -2,7 +2,7 @@ export const DsDrawerOverrides = {
2
2
  MuiDrawer: {
3
3
  styleOverrides: {
4
4
  paper: {
5
- background: 'var(--ds-colour-surfacePrimary)',
5
+ background: 'var(--ds-colour-surfaceBackground)',
6
6
  boxShadow: 'var(--ds-elevation--1)',
7
7
  backgroundImage: 'none'
8
8
  }
@@ -5,10 +5,17 @@ export declare const DsFabOverrides: {
5
5
  defaultProps: DsFabProps;
6
6
  styleOverrides: {
7
7
  root: CSSInterpolation;
8
+ sizeLarge: CSSInterpolation;
9
+ sizeMedium: CSSInterpolation;
10
+ sizeSmall: CSSInterpolation;
11
+ secondary: CSSInterpolation;
12
+ default: CSSInterpolation;
13
+ extended: {
14
+ '.MuiTypography-root': {
15
+ marginLeft: string;
16
+ marginRight: string;
17
+ };
18
+ };
8
19
  };
9
- variants: {
10
- props: Partial<DsFabProps>;
11
- style: CSSInterpolation;
12
- }[];
13
20
  };
14
21
  };
@@ -1,5 +1,5 @@
1
- import { DsFabDefaultProps } from './DsFab.Types';
2
1
  import STATE_STYLES from '../../Theme/STATE_STYLES';
2
+ import { DsFabDefaultProps } from './DsFab.Types';
3
3
  export const DsFabOverrides = {
4
4
  MuiFab: {
5
5
  defaultProps: DsFabDefaultProps,
@@ -7,50 +7,53 @@ export const DsFabOverrides = {
7
7
  root: {
8
8
  boxShadow: 'var(--ds-elevation-8)',
9
9
  textTransform: 'none',
10
+ minHeight: 'auto',
10
11
  height: 'auto',
11
12
  width: 'auto',
12
13
  borderRadius: 'var(--ds-radius-pleasant)',
13
- '&.MuiFab-default': {
14
- backgroundColor: 'var(--ds-colour-surfacePrimary)'
15
- },
16
- '&.MuiFab-extended .MuiTypography-root': {
14
+ '.MuiTypography-root': {
17
15
  fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
18
16
  fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
19
17
  lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
20
- letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
21
- marginLeft: 'var(--ds-spacing-glacial)'
18
+ letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
22
19
  }
23
- }
24
- },
25
- variants: [
26
- {
27
- props: { size: 'medium' },
28
- style: {
29
- padding: 'var(--ds-spacing-bitterCold)',
30
- '&.MuiFab-extended': {
31
- paddingRight: 'var(--ds-spacing-mild)'
32
- }
20
+ },
21
+ sizeLarge: {
22
+ padding: 'var(--ds-spacing-cool)',
23
+ '> .MuiSvgIcon-root': {
24
+ fontSize: 'var(--ds-typo-fontSizePleasant)'
33
25
  }
34
26
  },
35
- {
36
- props: { size: 'small' },
37
- style: {
38
- padding: 'var(--ds-spacing-frostbite)',
39
- fontSize: 'var(--ds-typo-fontSizeCool)',
40
- '&.MuiFab-extended': {
41
- paddingRight: 'var(--ds-spacing-bitterCold)'
42
- },
43
- '> .MuiIcon-root': {
44
- fontSize: 'inherit'
45
- }
27
+ sizeMedium: {
28
+ padding: 'var(--ds-spacing-bitterCold)',
29
+ '> .MuiSvgIcon-root': {
30
+ fontSize: 'var(--ds-typo-fontSizeMild)'
31
+ }
32
+ },
33
+ sizeSmall: {
34
+ padding: 'var(--ds-spacing-frostbite)',
35
+ '> .MuiSvgIcon-root': {
36
+ fontSize: 'var(--ds-typo-fontSizeCool)'
37
+ }
38
+ },
39
+ secondary: {
40
+ ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
41
+ },
42
+ default: {
43
+ backgroundColor: 'var(--ds-colour-surfacePrimary)',
44
+ borderWidth: '1px',
45
+ borderStyle: 'solid',
46
+ borderColor: 'var(--ds-colour-strokeDefault)',
47
+ '&:hover': {
48
+ backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
46
49
  }
47
50
  },
48
- {
49
- props: { color: 'secondary' },
50
- style: {
51
- ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
51
+ extended: {
52
+ '.MuiTypography-root': {
53
+ marginLeft: 'var(--ds-spacing-glacial)',
54
+ marginRight: 'var(--ds-spacing-glacial)'
52
55
  }
53
56
  }
54
- ]
57
+ }
55
58
  }
56
59
  };
@@ -1 +1,9 @@
1
- export declare const DsPopoverOverrides: {};
1
+ export declare const DsPopoverOverrides: {
2
+ MuiPopover: {
3
+ styleOverrides: {
4
+ root: {
5
+ backgroundColor: string;
6
+ };
7
+ };
8
+ };
9
+ };
@@ -1 +1,9 @@
1
- export const DsPopoverOverrides = {};
1
+ export const DsPopoverOverrides = {
2
+ MuiPopover: {
3
+ styleOverrides: {
4
+ root: {
5
+ backgroundColor: 'transparent'
6
+ }
7
+ }
8
+ }
9
+ };
@@ -717,6 +717,13 @@ declare const componentOverrides: {
717
717
  };
718
718
  };
719
719
  };
720
+ MuiPopover: {
721
+ styleOverrides: {
722
+ root: {
723
+ backgroundColor: string;
724
+ };
725
+ };
726
+ };
720
727
  MuiPaper: {
721
728
  defaultProps: import("../Components").DsPaperProps;
722
729
  styleOverrides: {};
@@ -992,11 +999,18 @@ declare const componentOverrides: {
992
999
  defaultProps: import("../Components").DsFabProps;
993
1000
  styleOverrides: {
994
1001
  root: import("@mui/system").CSSInterpolation;
1002
+ sizeLarge: import("@mui/system").CSSInterpolation;
1003
+ sizeMedium: import("@mui/system").CSSInterpolation;
1004
+ sizeSmall: import("@mui/system").CSSInterpolation;
1005
+ secondary: import("@mui/system").CSSInterpolation;
1006
+ default: import("@mui/system").CSSInterpolation;
1007
+ extended: {
1008
+ '.MuiTypography-root': {
1009
+ marginLeft: string;
1010
+ marginRight: string;
1011
+ };
1012
+ };
995
1013
  };
996
- variants: {
997
- props: Partial<import("../Components").DsFabProps>;
998
- style: import("@mui/system").CSSInterpolation;
999
- }[];
1000
1014
  };
1001
1015
  MuiDrawer: {
1002
1016
  styleOverrides: {
@@ -1085,17 +1099,10 @@ declare const componentOverrides: {
1085
1099
  styleOverrides: {
1086
1100
  root: {
1087
1101
  color: string;
1088
- '&:hover:not(.Mui-checked)': {
1089
- backgroundColor: string;
1090
- };
1091
- '&:focus:not(.Mui-checked)': {
1092
- backgroundColor: string;
1093
- };
1094
- '&.MuiCheckbox-colorPrimary.Mui-checked': {
1102
+ '&.Mui-disabled': {
1095
1103
  color: string;
1096
1104
  };
1097
- '&.MuiCheckbox-colorSecondary.Mui-checked': {
1098
- color: string;
1105
+ '&:not(.Mui-checked)': {
1099
1106
  '&:hover': {
1100
1107
  backgroundColor: string;
1101
1108
  };
@@ -1103,25 +1110,47 @@ declare const componentOverrides: {
1103
1110
  backgroundColor: string;
1104
1111
  };
1105
1112
  };
1106
- '&.MuiCheckbox-colorError.Mui-checked': {
1107
- color: string;
1108
- };
1109
- '&.MuiCheckbox-colorSuccess.Mui-checked': {
1113
+ };
1114
+ colorPrimary: {
1115
+ '&.Mui-checked&:not(.Mui-checked)': {
1110
1116
  color: string;
1111
1117
  };
1112
- '&.MuiCheckbox-colorWarning.Mui-checked': {
1118
+ };
1119
+ colorSecondary: {
1120
+ '&.Mui-checked&:not(.Mui-checked)': {
1113
1121
  color: string;
1122
+ '&:hover': {
1123
+ backgroundColor: string;
1124
+ };
1125
+ '&:focus': {
1126
+ backgroundColor: string;
1127
+ };
1114
1128
  };
1115
- '&.Mui-disabled': {
1129
+ };
1130
+ colorError: {
1131
+ '&.Mui-checked&:not(.Mui-checked)': {
1116
1132
  color: string;
1117
1133
  };
1118
- colorPrimary: {
1134
+ };
1135
+ colorSuccess: {
1136
+ '&.Mui-checked&:not(.Mui-checked)': {
1119
1137
  color: string;
1120
1138
  };
1121
- colorSecondary: {
1139
+ };
1140
+ colorWarning: {
1141
+ '&.Mui-checked&:not(.Mui-checked)': {
1122
1142
  color: string;
1123
1143
  };
1124
1144
  };
1145
+ sizeSmall: {
1146
+ fontSize: string;
1147
+ };
1148
+ sizeMedium: {
1149
+ fontSize: string;
1150
+ };
1151
+ sizeLarge: {
1152
+ fontSize: string;
1153
+ };
1125
1154
  };
1126
1155
  };
1127
1156
  MuiButton: {
@@ -1211,6 +1240,13 @@ declare const componentOverrides: {
1211
1240
  };
1212
1241
  };
1213
1242
  };
1243
+ MuiBackdrop: {
1244
+ styleOverrides: {
1245
+ root: {
1246
+ backgroundColor: string;
1247
+ };
1248
+ };
1249
+ };
1214
1250
  MuiAvatar: {
1215
1251
  defaultProps: import("../Components").DsAvatarProps;
1216
1252
  variants: ({
@@ -61,7 +61,7 @@ export default function getDarkModeColorScheme(colorPalette) {
61
61
  stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.2),
62
62
  stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.25),
63
63
  stateDisabledSurface: secondaryGrey100,
64
- overlay: hexToRgbA(primaryBlack, 0.5),
64
+ overlay: hexToRgbA(primaryBlack, 0.8),
65
65
  overlayLoader: hexToRgbA(primaryBlack, 0.3),
66
66
  dotLoader: primaryWhite
67
67
  };
@@ -61,7 +61,7 @@ export default function getHighContrastModeColorScheme(colorPalette) {
61
61
  stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.2),
62
62
  stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.25),
63
63
  stateDisabledSurface: secondaryGrey100,
64
- overlay: hexToRgbA(primaryBlack, 0.5),
64
+ overlay: hexToRgbA(primaryBlack, 0.8),
65
65
  overlayLoader: hexToRgbA(primaryBlack, 0.3),
66
66
  dotLoader: primaryWhite
67
67
  };
@@ -61,7 +61,7 @@ export default function getLightModeColorScheme(colorPalette) {
61
61
  stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.12),
62
62
  stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.16),
63
63
  stateDisabledSurface: secondaryGrey20,
64
- overlay: hexToRgbA(primaryBlack, 0.5),
64
+ overlay: hexToRgbA(primaryBlack, 0.8),
65
65
  overlayLoader: hexToRgbA(primaryWhite, 0.3),
66
66
  dotLoader: secondary100
67
67
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@am92/react-design-system",
3
- "version": "2.7.3",
3
+ "version": "2.7.5",
4
4
  "description": "ReactJS Design System using Material UI",
5
5
  "sideEffects": false,
6
6
  "types": "dist/index.d.ts",