@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.
Files changed (9) hide show
  1. package/dist/index.js +24 -11
  2. package/dist/index.js.map +1 -1
  3. package/dist/themes/themes/manamerge/atoms/button.ts +20 -11
  4. package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +2 -1
  5. package/dist/themes/themes/manamerge/molecules/cardBanner.ts +1 -1
  6. package/dist/types/themes/ManamergeTheme.d.ts +13 -3
  7. package/dist/types/themes/manamerge/atoms/button.d.ts +12 -3
  8. package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -40,7 +40,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
40
40
 
41
41
  const ButtonStyle = styled.button `
42
42
  ${({ variant, theme, disabled }) => {
43
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
43
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
44
44
  const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[variant]) || {};
45
45
  return css `
46
46
  /* Default State */
@@ -80,31 +80,43 @@ const ButtonStyle = styled.button `
80
80
  gap: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.gap) || "8px"};
81
81
 
82
82
  /* Hover State */
83
+ svg {
84
+ transition: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) || "all 0.2s ease"};
85
+ }
83
86
  &:hover {
84
87
  background: ${!disabled && ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _h === void 0 ? void 0 : _h.background)};
85
88
  color: ${!disabled && ((_j = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _j === void 0 ? void 0 : _j.text)};
86
89
  border: ${!disabled && ((_k = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _k === void 0 ? void 0 : _k.border)};
87
- filter: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.filter)};
90
+ opacity: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.opacity)};
91
+ filter: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _m === void 0 ? void 0 : _m.filter)};
92
+
93
+ svg {
94
+ color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _o === void 0 ? void 0 : _o.text)};
95
+ fill: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _p === void 0 ? void 0 : _p.text)};
96
+ stroke: ${!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _q === void 0 ? void 0 : _q.text)};
97
+ opacity: ${!disabled && ((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _r === void 0 ? void 0 : _r.opacity)};
98
+ }
88
99
  }
89
100
 
90
101
  /* Active State */
91
102
  &:active {
92
- background: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _m === void 0 ? void 0 : _m.background)};
93
- color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _o === void 0 ? void 0 : _o.text)};
94
- border: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _p === void 0 ? void 0 : _p.border)};
95
- filter: ${(!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _q === void 0 ? void 0 : _q.filter)) ||
103
+ background: ${!disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _s === void 0 ? void 0 : _s.background)};
104
+ color: ${!disabled && ((_t = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _t === void 0 ? void 0 : _t.text)};
105
+ border: ${!disabled && ((_u = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _u === void 0 ? void 0 : _u.border)};
106
+ filter: ${(!disabled && ((_v = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _v === void 0 ? void 0 : _v.filter)) ||
96
107
  "brightness(0.9)"};
97
108
  }
98
109
 
99
110
  /* Focus State */
100
111
  &:focus-visible {
101
- outline: 2px solid ${((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focus) === null || _r === void 0 ? void 0 : _r.outline) || "red"};
102
- outline-offset: 2px;
112
+ outline: ${((_w = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focusVisible) === null || _w === void 0 ? void 0 : _w.outline) ||
113
+ "2px solid red"};
114
+ outline-offset: ${(_x = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focusVisible) === null || _x === void 0 ? void 0 : _x.outlineOffset};
103
115
  }
104
116
 
105
117
  &:disabled {
106
118
  cursor: not-allowed;
107
- color: ${disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _s === void 0 ? void 0 : _s.text)};
119
+ color: ${disabled && ((_y = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _y === void 0 ? void 0 : _y.text)};
108
120
  background: ${disabled && buttonStyles.disabled.background};
109
121
  border-color: ${disabled && `${buttonStyles.disabled.border}`};
110
122
  opacity: ${disabled && buttonStyles.disabled.opacity};
@@ -1285,17 +1297,18 @@ const Card$1 = styled.div `
1285
1297
  background-image:
1286
1298
  radial-gradient(
1287
1299
  circle at ${gradientPosition},
1288
- ${thisTheme.gradientColor}55,
1300
+ ${thisTheme.gradientColor}25,
1289
1301
  transparent 70%
1290
1302
  ),
1291
1303
  radial-gradient(
1292
1304
  circle at ${gradientPosition},
1293
- ${thisTheme.gradientColor}22,
1305
+ ${thisTheme.gradientColor}12,
1294
1306
  transparent 75%
1295
1307
  );
1296
1308
  `}
1297
1309
  border: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.border};
1298
1310
  outline: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outline};
1311
+ /* outline-offset: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outlineOffset) || "-2px"}; */
1299
1312
  border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
1300
1313
  box-shadow: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.boxShadow};
1301
1314
  box-sizing: border-box;