@manamerge/mana-atomic-ui 1.0.186 → 1.0.188
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.
- package/dist/index.js +36 -26
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/manamerge/atoms/button.ts +20 -11
- package/dist/themes/themes/manamerge/atoms/icon.ts +1 -1
- package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +2 -4
- package/dist/themes/themes/manamerge/molecules/accordion.ts +17 -9
- package/dist/themes/themes/manamerge/molecules/cardBanner.ts +2 -2
- package/dist/themes/themes/manamerge/molecules/cardSimpleRender.ts +5 -5
- package/dist/types/themes/DavidWebTheme.d.ts +7 -1
- package/dist/types/themes/ManamergeTheme.d.ts +25 -7
- package/dist/types/themes/manamerge/atoms/button.d.ts +12 -3
- package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +1 -3
- package/dist/types/themes/manamerge/molecules/accordion.d.ts +7 -1
- package/dist/types/themes/manamerge/molecules/cardBanner.d.ts +1 -0
- package/dist/types/themes/manamerge/molecules/cardSimpleRender.d.ts +4 -0
- package/package.json +1 -1
|
@@ -44,6 +44,10 @@ const button = {
|
|
|
44
44
|
background: colors.two.c,
|
|
45
45
|
opacity: 1 // Darker shade for active state
|
|
46
46
|
},
|
|
47
|
+
focusVisible: {
|
|
48
|
+
outline: `2px solid ${colors.one.a}`,
|
|
49
|
+
outlineOffset: "2px"
|
|
50
|
+
},
|
|
47
51
|
disabled: {
|
|
48
52
|
text: colors.one.a,
|
|
49
53
|
border: "none",
|
|
@@ -95,6 +99,10 @@ const button = {
|
|
|
95
99
|
background: colors.two.c,
|
|
96
100
|
opacity: 1 // Darker shade for active state
|
|
97
101
|
},
|
|
102
|
+
focusVisible: {
|
|
103
|
+
outline: `2px solid ${colors.one.a}`,
|
|
104
|
+
outlineOffset: "2px"
|
|
105
|
+
},
|
|
98
106
|
disabled: {
|
|
99
107
|
text: colors.one.a,
|
|
100
108
|
border: "none",
|
|
@@ -122,28 +130,29 @@ const button = {
|
|
|
122
130
|
alignItems: "center",
|
|
123
131
|
cursor: "pointer", // Indicates the button is clickable
|
|
124
132
|
// shadow: `0px 4px 6px ${colors.one.h}`, // Default box-shadow
|
|
125
|
-
transition: "all 0.
|
|
133
|
+
transition: "all 0.2s ease-in-out", // Smooth animations for hover/active effects
|
|
126
134
|
overflow: "hidden", // Prevents content overflow
|
|
127
135
|
position: "relative", // For positioning hover/active effects
|
|
128
136
|
border: `1px solid ${colors.one.c}`, // border setting
|
|
129
137
|
|
|
130
138
|
default: {
|
|
131
|
-
text: colors.one.
|
|
132
|
-
border: `1px solid
|
|
133
|
-
background: colors.
|
|
134
|
-
opacity: 1 // Ensures full opacity by default
|
|
139
|
+
text: colors.one.b,
|
|
140
|
+
border: `1px solid transparent`, // border setting
|
|
141
|
+
background: colors.two.g
|
|
135
142
|
},
|
|
136
143
|
hover: {
|
|
137
144
|
text: colors.one.a,
|
|
138
|
-
border: `1px solid
|
|
139
|
-
background: colors.
|
|
140
|
-
opacity: 1 // Slight brightness for hover effect
|
|
145
|
+
border: `1px solid transparent`,
|
|
146
|
+
background: `${colors.two.g}`
|
|
141
147
|
},
|
|
142
148
|
active: {
|
|
143
149
|
text: colors.one.a,
|
|
144
|
-
border:
|
|
145
|
-
background: colors.two.
|
|
146
|
-
|
|
150
|
+
border: `1px solid ${colors.one.a}`,
|
|
151
|
+
background: `${colors.two.g}cc`
|
|
152
|
+
},
|
|
153
|
+
focusVisible: {
|
|
154
|
+
outline: `2px solid ${colors.one.a}`,
|
|
155
|
+
outlineOffset: "2px"
|
|
147
156
|
},
|
|
148
157
|
disabled: {
|
|
149
158
|
text: colors.one.a,
|
|
@@ -17,7 +17,8 @@ const colors = {
|
|
|
17
17
|
c: "#80C3BA",
|
|
18
18
|
d: "#6FA58E",
|
|
19
19
|
e: "#5E876B",
|
|
20
|
-
f: "#4D694C"
|
|
20
|
+
f: "#4D694C",
|
|
21
|
+
g: "#01160e"
|
|
21
22
|
},
|
|
22
23
|
three: {
|
|
23
24
|
a: "#FFD166",
|
|
@@ -27,9 +28,6 @@ const colors = {
|
|
|
27
28
|
four: {
|
|
28
29
|
a: "#FF1A1A",
|
|
29
30
|
b: "#590E0E"
|
|
30
|
-
},
|
|
31
|
-
five: {
|
|
32
|
-
a: "#0B1821"
|
|
33
31
|
}
|
|
34
32
|
};
|
|
35
33
|
|
|
@@ -1,27 +1,35 @@
|
|
|
1
|
+
import colors from "../miscellaneous/colorpalette";
|
|
2
|
+
|
|
1
3
|
const accordion = {
|
|
2
4
|
"Accordion-primary": {
|
|
3
5
|
width: "100%",
|
|
4
6
|
borderRadius: "8px",
|
|
5
|
-
backgroundTitle:
|
|
7
|
+
backgroundTitle: colors.two.g,
|
|
6
8
|
paddingTitle: "16px",
|
|
9
|
+
transition: "all 0.3s ease-in-out",
|
|
7
10
|
hover: {
|
|
8
|
-
background:
|
|
11
|
+
background: `${colors.two.g}b3`
|
|
9
12
|
},
|
|
10
13
|
focusVisible: {
|
|
11
|
-
outline:
|
|
12
|
-
outlineOffset: "
|
|
14
|
+
outline: `2px solid ${colors.two.a}`,
|
|
15
|
+
outlineOffset: "-8px"
|
|
13
16
|
},
|
|
14
17
|
gap: "10px",
|
|
15
|
-
backgroundDescription:
|
|
18
|
+
backgroundDescription: `${colors.two.g}80`,
|
|
16
19
|
atomIcon: {
|
|
17
|
-
variant: "
|
|
20
|
+
variant: "xs",
|
|
21
|
+
size: "12px",
|
|
22
|
+
color: colors.one.b,
|
|
23
|
+
fill: colors.one.b,
|
|
24
|
+
stroke: colors.one.b
|
|
18
25
|
},
|
|
19
26
|
atomHeading: {
|
|
20
|
-
variant: "primary
|
|
21
|
-
|
|
27
|
+
variant: "primary",
|
|
28
|
+
asTag: "h5",
|
|
29
|
+
vColor: "none"
|
|
22
30
|
},
|
|
23
31
|
atomText: {
|
|
24
|
-
variant: "
|
|
32
|
+
variant: "primary-light",
|
|
25
33
|
padding: "16px"
|
|
26
34
|
}
|
|
27
35
|
}
|
|
@@ -5,7 +5,7 @@ const cardBanner = {
|
|
|
5
5
|
flexDirection: "row",
|
|
6
6
|
justifyContent: "space-between",
|
|
7
7
|
background: `linear-gradient(to right, ${colors.two.a}, ${colors.two.c})`,
|
|
8
|
-
|
|
8
|
+
border: "none",
|
|
9
9
|
borderRadius: "25px",
|
|
10
10
|
padding: "20px",
|
|
11
11
|
|
|
@@ -22,7 +22,7 @@ const cardBanner = {
|
|
|
22
22
|
variant: "tertiary"
|
|
23
23
|
},
|
|
24
24
|
atomIcon: {
|
|
25
|
-
variant: "
|
|
25
|
+
variant: "sm",
|
|
26
26
|
stroke: colors.one.b,
|
|
27
27
|
fill: colors.one.b,
|
|
28
28
|
color: colors.one.b
|
|
@@ -5,7 +5,7 @@ const cardSimpleRender = {
|
|
|
5
5
|
flexDirection: "column",
|
|
6
6
|
justifyContent: "space-between",
|
|
7
7
|
gap: "20px",
|
|
8
|
-
background: colors.
|
|
8
|
+
background: colors.two.g,
|
|
9
9
|
gradientColor: colors.two.a,
|
|
10
10
|
outline: `2px solid ${colors.two.b}40`,
|
|
11
11
|
borderRadius: "20px",
|
|
@@ -14,15 +14,15 @@ const cardSimpleRender = {
|
|
|
14
14
|
maxWidth: "550px",
|
|
15
15
|
minWidth: "250px",
|
|
16
16
|
focus: {
|
|
17
|
-
|
|
17
|
+
border: "none",
|
|
18
18
|
outline: `2px dashed ${colors.two.c}`,
|
|
19
|
-
|
|
19
|
+
boxShadow: "none",
|
|
20
20
|
transition: "outline 0.5s ease"
|
|
21
21
|
},
|
|
22
22
|
hover: {
|
|
23
|
-
|
|
23
|
+
border: "none",
|
|
24
24
|
outline: `2px solid ${colors.two.c}`,
|
|
25
|
-
|
|
25
|
+
boxShadow: "none",
|
|
26
26
|
transition: "outline 0.5s ease"
|
|
27
27
|
},
|
|
28
28
|
|
|
@@ -1249,6 +1249,7 @@ export declare const DavidWebTheme: {
|
|
|
1249
1249
|
borderRadius: string;
|
|
1250
1250
|
backgroundTitle: string;
|
|
1251
1251
|
paddingTitle: string;
|
|
1252
|
+
transition: string;
|
|
1252
1253
|
hover: {
|
|
1253
1254
|
background: string;
|
|
1254
1255
|
};
|
|
@@ -1260,10 +1261,15 @@ export declare const DavidWebTheme: {
|
|
|
1260
1261
|
backgroundDescription: string;
|
|
1261
1262
|
atomIcon: {
|
|
1262
1263
|
variant: string;
|
|
1264
|
+
size: string;
|
|
1265
|
+
color: string;
|
|
1266
|
+
fill: string;
|
|
1267
|
+
stroke: string;
|
|
1263
1268
|
};
|
|
1264
1269
|
atomHeading: {
|
|
1265
1270
|
variant: string;
|
|
1266
|
-
|
|
1271
|
+
asTag: string;
|
|
1272
|
+
vColor: string;
|
|
1267
1273
|
};
|
|
1268
1274
|
atomText: {
|
|
1269
1275
|
variant: string;
|
|
@@ -450,6 +450,10 @@ export declare const ManamergeTheme: {
|
|
|
450
450
|
background: string;
|
|
451
451
|
opacity: number;
|
|
452
452
|
};
|
|
453
|
+
focusVisible: {
|
|
454
|
+
outline: string;
|
|
455
|
+
outlineOffset: string;
|
|
456
|
+
};
|
|
453
457
|
disabled: {
|
|
454
458
|
text: string;
|
|
455
459
|
border: string;
|
|
@@ -498,6 +502,10 @@ export declare const ManamergeTheme: {
|
|
|
498
502
|
background: string;
|
|
499
503
|
opacity: number;
|
|
500
504
|
};
|
|
505
|
+
focusVisible: {
|
|
506
|
+
outline: string;
|
|
507
|
+
outlineOffset: string;
|
|
508
|
+
};
|
|
501
509
|
disabled: {
|
|
502
510
|
text: string;
|
|
503
511
|
border: string;
|
|
@@ -532,19 +540,20 @@ export declare const ManamergeTheme: {
|
|
|
532
540
|
text: string;
|
|
533
541
|
border: string;
|
|
534
542
|
background: string;
|
|
535
|
-
opacity: number;
|
|
536
543
|
};
|
|
537
544
|
hover: {
|
|
538
545
|
text: string;
|
|
539
546
|
border: string;
|
|
540
547
|
background: string;
|
|
541
|
-
opacity: number;
|
|
542
548
|
};
|
|
543
549
|
active: {
|
|
544
550
|
text: string;
|
|
545
551
|
border: string;
|
|
546
552
|
background: string;
|
|
547
|
-
|
|
553
|
+
};
|
|
554
|
+
focusVisible: {
|
|
555
|
+
outline: string;
|
|
556
|
+
outlineOffset: string;
|
|
548
557
|
};
|
|
549
558
|
disabled: {
|
|
550
559
|
text: string;
|
|
@@ -1303,11 +1312,15 @@ export declare const ManamergeTheme: {
|
|
|
1303
1312
|
maxWidth: string;
|
|
1304
1313
|
minWidth: string;
|
|
1305
1314
|
focus: {
|
|
1315
|
+
border: string;
|
|
1306
1316
|
outline: string;
|
|
1317
|
+
boxShadow: string;
|
|
1307
1318
|
transition: string;
|
|
1308
1319
|
};
|
|
1309
1320
|
hover: {
|
|
1321
|
+
border: string;
|
|
1310
1322
|
outline: string;
|
|
1323
|
+
boxShadow: string;
|
|
1311
1324
|
transition: string;
|
|
1312
1325
|
};
|
|
1313
1326
|
atomIcon: {
|
|
@@ -1329,6 +1342,7 @@ export declare const ManamergeTheme: {
|
|
|
1329
1342
|
flexDirection: string;
|
|
1330
1343
|
justifyContent: string;
|
|
1331
1344
|
background: string;
|
|
1345
|
+
border: string;
|
|
1332
1346
|
borderRadius: string;
|
|
1333
1347
|
padding: string;
|
|
1334
1348
|
atomHeading: {
|
|
@@ -1357,6 +1371,7 @@ export declare const ManamergeTheme: {
|
|
|
1357
1371
|
borderRadius: string;
|
|
1358
1372
|
backgroundTitle: string;
|
|
1359
1373
|
paddingTitle: string;
|
|
1374
|
+
transition: string;
|
|
1360
1375
|
hover: {
|
|
1361
1376
|
background: string;
|
|
1362
1377
|
};
|
|
@@ -1368,10 +1383,15 @@ export declare const ManamergeTheme: {
|
|
|
1368
1383
|
backgroundDescription: string;
|
|
1369
1384
|
atomIcon: {
|
|
1370
1385
|
variant: string;
|
|
1386
|
+
size: string;
|
|
1387
|
+
color: string;
|
|
1388
|
+
fill: string;
|
|
1389
|
+
stroke: string;
|
|
1371
1390
|
};
|
|
1372
1391
|
atomHeading: {
|
|
1373
1392
|
variant: string;
|
|
1374
|
-
|
|
1393
|
+
asTag: string;
|
|
1394
|
+
vColor: string;
|
|
1375
1395
|
};
|
|
1376
1396
|
atomText: {
|
|
1377
1397
|
variant: string;
|
|
@@ -1446,6 +1466,7 @@ export declare const ManamergeTheme: {
|
|
|
1446
1466
|
d: string;
|
|
1447
1467
|
e: string;
|
|
1448
1468
|
f: string;
|
|
1469
|
+
g: string;
|
|
1449
1470
|
};
|
|
1450
1471
|
three: {
|
|
1451
1472
|
a: string;
|
|
@@ -1456,9 +1477,6 @@ export declare const ManamergeTheme: {
|
|
|
1456
1477
|
a: string;
|
|
1457
1478
|
b: string;
|
|
1458
1479
|
};
|
|
1459
|
-
five: {
|
|
1460
|
-
a: string;
|
|
1461
|
-
};
|
|
1462
1480
|
};
|
|
1463
1481
|
pages: {
|
|
1464
1482
|
vod: {
|
|
@@ -40,6 +40,10 @@ declare const button: {
|
|
|
40
40
|
background: string;
|
|
41
41
|
opacity: number;
|
|
42
42
|
};
|
|
43
|
+
focusVisible: {
|
|
44
|
+
outline: string;
|
|
45
|
+
outlineOffset: string;
|
|
46
|
+
};
|
|
43
47
|
disabled: {
|
|
44
48
|
text: string;
|
|
45
49
|
border: string;
|
|
@@ -88,6 +92,10 @@ declare const button: {
|
|
|
88
92
|
background: string;
|
|
89
93
|
opacity: number;
|
|
90
94
|
};
|
|
95
|
+
focusVisible: {
|
|
96
|
+
outline: string;
|
|
97
|
+
outlineOffset: string;
|
|
98
|
+
};
|
|
91
99
|
disabled: {
|
|
92
100
|
text: string;
|
|
93
101
|
border: string;
|
|
@@ -122,19 +130,20 @@ declare const button: {
|
|
|
122
130
|
text: string;
|
|
123
131
|
border: string;
|
|
124
132
|
background: string;
|
|
125
|
-
opacity: number;
|
|
126
133
|
};
|
|
127
134
|
hover: {
|
|
128
135
|
text: string;
|
|
129
136
|
border: string;
|
|
130
137
|
background: string;
|
|
131
|
-
opacity: number;
|
|
132
138
|
};
|
|
133
139
|
active: {
|
|
134
140
|
text: string;
|
|
135
141
|
border: string;
|
|
136
142
|
background: string;
|
|
137
|
-
|
|
143
|
+
};
|
|
144
|
+
focusVisible: {
|
|
145
|
+
outline: string;
|
|
146
|
+
outlineOffset: string;
|
|
138
147
|
};
|
|
139
148
|
disabled: {
|
|
140
149
|
text: string;
|
|
@@ -18,6 +18,7 @@ declare const colors: {
|
|
|
18
18
|
d: string;
|
|
19
19
|
e: string;
|
|
20
20
|
f: string;
|
|
21
|
+
g: string;
|
|
21
22
|
};
|
|
22
23
|
three: {
|
|
23
24
|
a: string;
|
|
@@ -28,8 +29,5 @@ declare const colors: {
|
|
|
28
29
|
a: string;
|
|
29
30
|
b: string;
|
|
30
31
|
};
|
|
31
|
-
five: {
|
|
32
|
-
a: string;
|
|
33
|
-
};
|
|
34
32
|
};
|
|
35
33
|
export default colors;
|
|
@@ -4,6 +4,7 @@ declare const accordion: {
|
|
|
4
4
|
borderRadius: string;
|
|
5
5
|
backgroundTitle: string;
|
|
6
6
|
paddingTitle: string;
|
|
7
|
+
transition: string;
|
|
7
8
|
hover: {
|
|
8
9
|
background: string;
|
|
9
10
|
};
|
|
@@ -15,10 +16,15 @@ declare const accordion: {
|
|
|
15
16
|
backgroundDescription: string;
|
|
16
17
|
atomIcon: {
|
|
17
18
|
variant: string;
|
|
19
|
+
size: string;
|
|
20
|
+
color: string;
|
|
21
|
+
fill: string;
|
|
22
|
+
stroke: string;
|
|
18
23
|
};
|
|
19
24
|
atomHeading: {
|
|
20
25
|
variant: string;
|
|
21
|
-
|
|
26
|
+
asTag: string;
|
|
27
|
+
vColor: string;
|
|
22
28
|
};
|
|
23
29
|
atomText: {
|
|
24
30
|
variant: string;
|
|
@@ -12,11 +12,15 @@ declare const cardSimpleRender: {
|
|
|
12
12
|
maxWidth: string;
|
|
13
13
|
minWidth: string;
|
|
14
14
|
focus: {
|
|
15
|
+
border: string;
|
|
15
16
|
outline: string;
|
|
17
|
+
boxShadow: string;
|
|
16
18
|
transition: string;
|
|
17
19
|
};
|
|
18
20
|
hover: {
|
|
21
|
+
border: string;
|
|
19
22
|
outline: string;
|
|
23
|
+
boxShadow: string;
|
|
20
24
|
transition: string;
|
|
21
25
|
};
|
|
22
26
|
atomIcon: {
|