@manamerge/mana-atomic-ui 1.0.152 → 1.0.154

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,139 +1,279 @@
1
+ import colors from "../miscellaneous/colorpalette";
2
+
1
3
  const heading = {
2
- "Heading-h1": {
4
+ "Heading-primary-h1": {
5
+ mobile: {
6
+ fontSize: "30px",
7
+ lineHeight: "34px",
8
+ fontWeight: 700,
9
+ color: colors.one.b,
10
+ margin: "0px"
11
+ },
12
+ tablet: {
13
+ fontSize: "34px",
14
+ lineHeight: "40px",
15
+ fontWeight: 700,
16
+ color: colors.one.b,
17
+ margin: "0px"
18
+ },
19
+ desktop: {
20
+ fontSize: "36px",
21
+ lineHeight: "40px",
22
+ fontWeight: 700,
23
+ color: colors.one.b,
24
+ margin: "0px"
25
+ }
26
+ },
27
+ "Heading-primary-h2": {
28
+ mobile: {
29
+ fontSize: "24px",
30
+ lineHeight: "30px",
31
+ fontWeight: 700,
32
+ color: colors.one.b,
33
+ margin: "0px"
34
+ },
35
+ tablet: {
36
+ fontSize: "28px",
37
+ lineHeight: "34px",
38
+ fontWeight: 700,
39
+ color: colors.one.b,
40
+ margin: "0px"
41
+ },
42
+ desktop: {
43
+ fontSize: "30px",
44
+ lineHeight: "34px",
45
+ fontWeight: 700,
46
+ color: colors.one.b,
47
+ margin: "0px"
48
+ }
49
+ },
50
+ "Heading-primary-h3": {
51
+ mobile: {
52
+ fontSize: "20px",
53
+ lineHeight: "25px",
54
+ fontWeight: 700,
55
+ color: colors.one.b,
56
+ margin: "0px"
57
+ },
58
+ tablet: {
59
+ fontSize: "20px",
60
+ lineHeight: "25px",
61
+ fontWeight: 700,
62
+ color: colors.one.b,
63
+ margin: "0px"
64
+ },
65
+ desktop: {
66
+ fontSize: "24px",
67
+ lineHeight: "30px",
68
+ fontWeight: 700,
69
+ color: colors.one.b,
70
+ margin: "0px"
71
+ }
72
+ },
73
+ "Heading-primary-h4": {
74
+ mobile: {
75
+ fontSize: "18px",
76
+ lineHeight: "23px",
77
+ fontWeight: 700,
78
+ color: colors.one.b,
79
+ margin: "0px"
80
+ },
81
+ tablet: {
82
+ fontSize: "18px",
83
+ lineHeight: "24px",
84
+ fontWeight: 700,
85
+ color: colors.one.b,
86
+ margin: "0px"
87
+ },
88
+ desktop: {
89
+ fontSize: "20px",
90
+ lineHeight: "25px",
91
+ fontWeight: 700,
92
+ color: colors.one.b,
93
+ margin: "0px"
94
+ }
95
+ },
96
+ "Heading-primary-h5": {
97
+ mobile: {
98
+ fontSize: "16px",
99
+ lineHeight: "20px",
100
+ fontWeight: 700,
101
+ color: colors.one.b,
102
+ margin: "0px"
103
+ },
104
+ tablet: {
105
+ fontSize: "16px",
106
+ lineHeight: "20px",
107
+ fontWeight: 700,
108
+ color: colors.one.b,
109
+ margin: "0px"
110
+ },
111
+ desktop: {
112
+ fontSize: "16px",
113
+ lineHeight: "20px",
114
+ fontWeight: 700,
115
+ color: colors.one.b,
116
+ margin: "0px"
117
+ }
118
+ },
119
+ "Heading-primary-h6": {
120
+ mobile: {
121
+ fontSize: "14px",
122
+ lineHeight: "20px",
123
+ fontWeight: 700,
124
+ color: colors.one.b,
125
+ margin: "0px"
126
+ },
127
+ tablet: {
128
+ fontSize: "14px",
129
+ lineHeight: "20px",
130
+ fontWeight: 700,
131
+ color: colors.one.b,
132
+ margin: "0px"
133
+ },
134
+ desktop: {
135
+ fontSize: "14px",
136
+ lineHeight: "20px",
137
+ fontWeight: 700,
138
+ color: colors.one.b,
139
+ margin: "0px"
140
+ }
141
+ },
142
+ "Heading-secondary-h1": {
3
143
  mobile: {
4
144
  fontSize: "30px",
5
145
  lineHeight: "34px",
6
146
  fontWeight: 700,
7
- color: "#3838aa",
147
+ color: colors.four.a,
8
148
  margin: "0px"
9
149
  },
10
150
  tablet: {
11
151
  fontSize: "34px",
12
152
  lineHeight: "40px",
13
153
  fontWeight: 700,
14
- color: "#3838aa",
154
+ color: colors.four.a,
15
155
  margin: "0px"
16
156
  },
17
157
  desktop: {
18
158
  fontSize: "36px",
19
159
  lineHeight: "40px",
20
160
  fontWeight: 700,
21
- color: "#3838aa",
161
+ color: colors.four.a,
22
162
  margin: "0px"
23
163
  }
24
164
  },
25
- "Heading-h2": {
165
+ "Heading-secondary-h2": {
26
166
  mobile: {
27
167
  fontSize: "24px",
28
168
  lineHeight: "30px",
29
169
  fontWeight: 700,
30
- color: "#3838aa",
170
+ color: colors.four.a,
31
171
  margin: "0px"
32
172
  },
33
173
  tablet: {
34
174
  fontSize: "28px",
35
175
  lineHeight: "34px",
36
176
  fontWeight: 700,
37
- color: "#3838aa",
177
+ color: colors.four.a,
38
178
  margin: "0px"
39
179
  },
40
180
  desktop: {
41
181
  fontSize: "30px",
42
182
  lineHeight: "34px",
43
183
  fontWeight: 700,
44
- color: "#3838aa",
184
+ color: colors.four.a,
45
185
  margin: "0px"
46
186
  }
47
187
  },
48
- "Heading-h3": {
188
+ "Heading-secondary-h3": {
49
189
  mobile: {
50
190
  fontSize: "20px",
51
191
  lineHeight: "25px",
52
192
  fontWeight: 700,
53
- color: "#3838aa",
193
+ color: colors.four.a,
54
194
  margin: "0px"
55
195
  },
56
196
  tablet: {
57
197
  fontSize: "20px",
58
198
  lineHeight: "25px",
59
199
  fontWeight: 700,
60
- color: "#3838aa",
200
+ color: colors.four.a,
61
201
  margin: "0px"
62
202
  },
63
203
  desktop: {
64
204
  fontSize: "24px",
65
205
  lineHeight: "30px",
66
206
  fontWeight: 700,
67
- color: "#3838aa",
207
+ color: colors.four.a,
68
208
  margin: "0px"
69
209
  }
70
210
  },
71
- "Heading-h4": {
211
+ "Heading-secondary-h4": {
72
212
  mobile: {
73
213
  fontSize: "18px",
74
214
  lineHeight: "23px",
75
215
  fontWeight: 700,
76
- color: "#3838aa",
216
+ color: colors.four.a,
77
217
  margin: "0px"
78
218
  },
79
219
  tablet: {
80
220
  fontSize: "18px",
81
221
  lineHeight: "24px",
82
222
  fontWeight: 700,
83
- color: "#3838aa",
223
+ color: colors.four.a,
84
224
  margin: "0px"
85
225
  },
86
226
  desktop: {
87
227
  fontSize: "20px",
88
228
  lineHeight: "25px",
89
229
  fontWeight: 700,
90
- color: "#3838aa",
230
+ color: colors.four.a,
91
231
  margin: "0px"
92
232
  }
93
233
  },
94
- "Heading-h5": {
234
+ "Heading-secondary-h5": {
95
235
  mobile: {
96
236
  fontSize: "16px",
97
237
  lineHeight: "20px",
98
238
  fontWeight: 700,
99
- color: "#3838aa",
239
+ color: colors.four.a,
100
240
  margin: "0px"
101
241
  },
102
242
  tablet: {
103
243
  fontSize: "16px",
104
244
  lineHeight: "20px",
105
245
  fontWeight: 700,
106
- color: "#3838aa",
246
+ color: colors.four.a,
107
247
  margin: "0px"
108
248
  },
109
249
  desktop: {
110
250
  fontSize: "16px",
111
251
  lineHeight: "20px",
112
252
  fontWeight: 700,
113
- color: "#3838aa",
253
+ color: colors.four.a,
114
254
  margin: "0px"
115
255
  }
116
256
  },
117
- "Heading-h6": {
257
+ "Heading-secondary-h6": {
118
258
  mobile: {
119
259
  fontSize: "14px",
120
260
  lineHeight: "20px",
121
261
  fontWeight: 700,
122
- color: "#3838aa",
262
+ color: colors.four.a,
123
263
  margin: "0px"
124
264
  },
125
265
  tablet: {
126
266
  fontSize: "14px",
127
267
  lineHeight: "20px",
128
268
  fontWeight: 700,
129
- color: "#3838aa",
269
+ color: colors.four.a,
130
270
  margin: "0px"
131
271
  },
132
272
  desktop: {
133
273
  fontSize: "14px",
134
274
  lineHeight: "20px",
135
275
  fontWeight: 700,
136
- color: "#3838aa",
276
+ color: colors.four.a,
137
277
  margin: "0px"
138
278
  }
139
279
  }
@@ -7,7 +7,7 @@ const cardSimpleRender = {
7
7
  gradientBackground: `radial-gradient(circle at bottom right, rgba(237, 191, 222, 0.9) 5%, pink 10%, transparent 30%)`,
8
8
  border: "2px solid rgb(210, 16, 16)",
9
9
  borderRadius: "25px",
10
- padding: "20px 20px 0 20px",
10
+ padding: "0px",
11
11
  height: "100%",
12
12
  maxWidth: "350px",
13
13
  minWidth: "200px",
@@ -26,7 +26,8 @@ const cardSimpleRender = {
26
26
  variant: "medium"
27
27
  },
28
28
  atomHeading: {
29
- variant: "secondary-h3"
29
+ variant: "primary",
30
+ as: "h2"
30
31
  },
31
32
  atomText: {
32
33
  variant: "secondary-regular"
@@ -29,7 +29,7 @@ const header = {
29
29
  variant: "secondary-h1"
30
30
  },
31
31
  atomTextTitle: {
32
- variant: "secondary-medium"
32
+ variant: "primary-medium"
33
33
  },
34
34
  atomButtonLeft: {
35
35
  variant: "primary",
@@ -31,8 +31,7 @@ const navigation = {
31
31
  },
32
32
  focus: {
33
33
  color: "gold",
34
- boxShadow: "2px 2px 5px yellow",
35
- transform: "translateY(-5px)"
34
+ boxShadow: "2px 2px 5px yellow"
36
35
  },
37
36
  hover: {
38
37
  color: "#f00",
@@ -2,6 +2,6 @@ import React, { ReactNode } from "react";
2
2
  export interface HeadingTypes {
3
3
  variant?: string;
4
4
  children: ReactNode;
5
- as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
5
+ as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
6
6
  }
7
7
  export declare const Heading: React.FC<HeadingTypes>;
@@ -0,0 +1,11 @@
1
+ import { Meta, StoryObj } from "@storybook/react";
2
+ import { CardSimpleRenderTypes } from "./CardSimpleRender";
3
+ declare const meta: Meta<CardSimpleRenderTypes>;
4
+ export default meta;
5
+ type Story = StoryObj<CardSimpleRenderTypes>;
6
+ export declare const Default: Story;
7
+ export declare const Hover: Story;
8
+ export declare const Flex: Story;
9
+ export declare const FlexExtra: Story;
10
+ export declare const Flex2: Story;
11
+ export declare const Isolado: Story;