@manamerge/mana-atomic-ui 1.0.186 → 1.0.187
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 +24 -11
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/manamerge/atoms/button.ts +20 -11
- package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +2 -1
- package/dist/themes/themes/manamerge/molecules/cardBanner.ts +1 -1
- package/dist/types/themes/ManamergeTheme.d.ts +13 -3
- package/dist/types/themes/manamerge/atoms/button.d.ts +12 -3
- package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +1 -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.five.a
|
|
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.five.a}`
|
|
141
147
|
},
|
|
142
148
|
active: {
|
|
143
149
|
text: colors.one.a,
|
|
144
|
-
border:
|
|
145
|
-
background: colors.
|
|
146
|
-
|
|
150
|
+
border: `1px solid ${colors.one.a}`,
|
|
151
|
+
background: `${colors.five.a}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,
|
|
@@ -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;
|
|
@@ -1458,6 +1467,7 @@ export declare const ManamergeTheme: {
|
|
|
1458
1467
|
};
|
|
1459
1468
|
five: {
|
|
1460
1469
|
a: string;
|
|
1470
|
+
b: string;
|
|
1461
1471
|
};
|
|
1462
1472
|
};
|
|
1463
1473
|
pages: {
|
|
@@ -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;
|