@sonardigital/carbon-ui 1.1.69 → 1.1.70

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/theme/constants/components.ts +50 -22
  3. package/src/theme/constants/typography.ts +20 -2
  4. package/src/theme/theme.ts +76 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonardigital/carbon-ui",
3
- "version": "1.1.69",
3
+ "version": "1.1.70",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "files": [
package/src/theme/constants/components.ts CHANGED
@@ -29,6 +29,56 @@ export const components: Components<
29
29
  },
30
30
  },
31
31
  },
32
+ MuiStack: {
33
+ variants: [
34
+ {
35
+ props: { spacing: 'xxs' },
36
+ style: {
37
+ gap: 2.5,
38
+ },
39
+ },
40
+ {
41
+ props: { spacing: 'xs' },
42
+ style: {
43
+ gap: 5,
44
+ },
45
+ },
46
+ {
47
+ props: { spacing: 'sm' },
48
+ style: {
49
+ gap: 12,
50
+ },
51
+ },
52
+ {
53
+ props: { spacing: 'md' },
54
+ style: {
55
+ gap: 22.5,
56
+ },
57
+ },
58
+ {
59
+ props: { spacing: 'lg' },
60
+ style: {
61
+ gap: 40,
62
+ },
63
+ },
64
+ {
65
+ props: { spacing: 'xl' },
66
+ style: {
67
+ gap: 55,
68
+ },
69
+ },
70
+ {
71
+ props: { spacing: 'xxl' },
72
+ style: {
73
+ gap: 70,
74
+ },
75
+ },
76
+ ],
77
+ defaultProps: {
78
+ spacing: 'xxs',
79
+ },
80
+ },
81
+
32
82
  MuiAutocomplete: {
33
83
  defaultProps: {
34
84
  slotProps: {
@@ -122,20 +172,6 @@ export const components: Components<
122
172
  },
123
173
  },
124
174
  },
125
- MuiContainer: {
126
- defaultProps: {
127
- maxWidth: 'lg',
128
- sx: {
129
- paddingY: { xs: 11, md: 12.5 },
130
- paddingX: { xs: 3 },
131
- },
132
- style: {
133
- height: '100%',
134
- alignItems: 'center',
135
- justifyContent: 'center',
136
- },
137
- },
138
- },
139
175
  MuiPaper: {
140
176
  variants: [
141
177
  {
@@ -159,14 +195,6 @@ export const components: Components<
159
195
  },
160
196
  },
161
197
  },
162
- MuiStack: {
163
- defaultProps: {
164
- style: {
165
- borderColor: '#D4D6DE',
166
- borderWidth: 1,
167
- },
168
- },
169
- },
170
198
  MuiChip: {
171
199
  defaultProps: {
172
200
  style: {
package/src/theme/constants/typography.ts CHANGED
@@ -1,5 +1,10 @@
1
+ const fontFamily = {
2
+ primary: 'Inter, sans-serif',
3
+ secondary: 'Bricolage Grotesque, sans-serif',
4
+ };
5
+
1
6
  export const typography = {
2
- fontFamily: `Inter`,
7
+ fontFamily: fontFamily.primary,
3
8
  h1: {
4
9
  fontSize: '3.1rem',
5
10
  fontWeight: 500,
@@ -8,11 +13,16 @@ export const typography = {
8
13
  fontSize: '3.35rem',
9
14
  fontWeight: 600,
10
15
  lineHeight: 1.18,
16
+ letterSpacing: -0.2,
11
17
  },
12
18
  },
13
19
  h2: {
14
20
  fontSize: '2.8rem',
15
21
  fontWeight: 550,
22
+ '@media (max-width:600px)': {
23
+ fontSize: '2.8rem',
24
+ fontWeight: 600,
25
+ },
16
26
  },
17
27
  h3: {
18
28
  fontSize: '2.4rem',
@@ -27,15 +37,23 @@ export const typography = {
27
37
  h4: {
28
38
  fontSize: '2.2rem',
29
39
  fontWeight: 500,
40
+ '@media (max-width:600px)': {
41
+ fontWeight: 600,
42
+ },
30
43
  },
31
44
  h5: {
32
45
  fontSize: '2.15rem',
33
46
  fontWeight: 500,
47
+ paddingLeft: 0.4,
48
+ '@media (max-width:600px)': {
49
+ fontSize: '2.2rem',
50
+ },
34
51
  },
35
52
  h6: {
36
- fontFamily: 'Bricolage Grotesque, sans-serif',
53
+ fontFamily: fontFamily.secondary,
37
54
  fontSize: '2.3rem',
38
55
  fontWeight: 500,
56
+ lineHeight: 1.25,
39
57
  '@media (max-width:600px)': {
40
58
  fontSize: '2.2rem',
41
59
  },
package/src/theme/theme.ts CHANGED
@@ -99,6 +99,82 @@ export const darkTheme = createTheme({
99
99
  },
100
100
  },
101
101
  },
102
+ MuiContainer: {
103
+ variants: [
104
+ {
105
+ props: { className: 'xs' },
106
+ style: {
107
+ paddingTop: 22.5,
108
+ paddingBottom: 22.5,
109
+ paddingLeft: 22.5,
110
+ paddingRight: 22.5,
111
+ },
112
+ },
113
+ {
114
+ props: { className: 'sm' },
115
+ style: ({ theme }: { theme: Theme }) => ({
116
+ paddingTop: 35,
117
+ paddingBottom: 35,
118
+ paddingLeft: 22.5,
119
+ paddingRight: 22.5,
120
+ [theme.breakpoints.down('sm')]: {
121
+ paddingTop: 30,
122
+ paddingBottom: 30,
123
+ },
124
+ }),
125
+ },
126
+ {
127
+ props: { className: 'md' },
128
+ style: ({ theme }: { theme: Theme }) => ({
129
+ paddingTop: 50,
130
+ paddingBottom: 50,
131
+ paddingLeft: 22.5,
132
+ paddingRight: 22.5,
133
+ [theme.breakpoints.down('sm')]: {
134
+ paddingTop: 40,
135
+ paddingBottom: 40,
136
+ },
137
+ }),
138
+ },
139
+ {
140
+ props: { className: 'lg' },
141
+ style: ({ theme }: { theme: Theme }) => ({
142
+ paddingTop: 80,
143
+ paddingBottom: 80,
144
+ paddingLeft: 22.5,
145
+ paddingRight: 22.5,
146
+ [theme.breakpoints.down('sm')]: {
147
+ paddingTop: 70,
148
+ paddingBottom: 70,
149
+ },
150
+ }),
151
+ },
152
+ {
153
+ props: { className: 'xl' },
154
+ style: ({ theme }: { theme: Theme }) => ({
155
+ paddingTop: 100,
156
+ paddingBottom: 100,
157
+ paddingLeft: 22.5,
158
+ paddingRight: 22.5,
159
+ [theme.breakpoints.down('sm')]: {
160
+ paddingTop: 90,
161
+ paddingBottom: 90,
162
+ },
163
+ }),
164
+ },
165
+ ],
166
+ defaultProps: {
167
+ sx: {
168
+ paddingY: { xs: 11, md: 12.5 },
169
+ paddingX: { xs: 3 },
170
+ },
171
+ style: {
172
+ height: '100%',
173
+ alignItems: 'center',
174
+ justifyContent: 'center',
175
+ },
176
+ },
177
+ },
102
178
  MuiAccordionDetails: {
103
179
  defaultProps: {
104
180
  sx: {