@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.
Files changed (16) hide show
  1. package/dist/index.js +36 -26
  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/atoms/icon.ts +1 -1
  5. package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +2 -4
  6. package/dist/themes/themes/manamerge/molecules/accordion.ts +17 -9
  7. package/dist/themes/themes/manamerge/molecules/cardBanner.ts +2 -2
  8. package/dist/themes/themes/manamerge/molecules/cardSimpleRender.ts +5 -5
  9. package/dist/types/themes/DavidWebTheme.d.ts +7 -1
  10. package/dist/types/themes/ManamergeTheme.d.ts +25 -7
  11. package/dist/types/themes/manamerge/atoms/button.d.ts +12 -3
  12. package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +1 -3
  13. package/dist/types/themes/manamerge/molecules/accordion.d.ts +7 -1
  14. package/dist/types/themes/manamerge/molecules/cardBanner.d.ts +1 -0
  15. package/dist/types/themes/manamerge/molecules/cardSimpleRender.d.ts +4 -0
  16. 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,12 +1297,12 @@ 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
  `}
@@ -1449,14 +1461,14 @@ const AccordionTitle = styled.button `
1449
1461
  gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
1450
1462
  cursor: pointer;
1451
1463
  background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundTitle};
1464
+ transition: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.transition) || "all 0.2s ease"};
1452
1465
  &:hover {
1453
1466
  background: ${(_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _b === void 0 ? void 0 : _b.background};
1454
1467
  }
1455
1468
  &:focus-visible {
1456
1469
  outline: ${((_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focusVisible) === null || _c === void 0 ? void 0 : _c.outline) ||
1457
1470
  "#0078d4 2px solid"};
1458
- outline-offset: ${((_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focusVisible) === null || _d === void 0 ? void 0 : _d.outlineOffset) ||
1459
- "1px"};
1471
+ outline-offset: ${(_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focusVisible) === null || _d === void 0 ? void 0 : _d.outlineOffset};
1460
1472
  }
1461
1473
  > * {
1462
1474
  padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.paddingTitle};
@@ -1481,23 +1493,21 @@ const AccordionDescription = styled.div `
1481
1493
  opacity 0.6s ease;
1482
1494
  `;
1483
1495
  const AtomHeading = styled(Heading).attrs(({ theme, moleculeVariant }) => {
1484
- var _a, _b, _c;
1496
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1485
1497
  return ({
1486
- variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant) || "h5"
1498
+ variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant,
1499
+ asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.asTag,
1500
+ vColor: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomHeading) === null || _j === void 0 ? void 0 : _j.vColor
1487
1501
  });
1488
- }) `
1489
- ${({ theme, moleculeVariant }) => {
1490
- var _a, _b;
1491
- const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) || {};
1492
- return css `
1493
- color: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.color};
1494
- `;
1495
- }};
1496
- `;
1502
+ }) ``;
1497
1503
  const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
1498
- var _a, _b, _c;
1504
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
1499
1505
  return ({
1500
- variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant) || "sm"
1506
+ variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
1507
+ size: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.size,
1508
+ color: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.color,
1509
+ fill: (_m = (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _k === void 0 ? void 0 : _k[moleculeVariant]) === null || _l === void 0 ? void 0 : _l.atomIcon) === null || _m === void 0 ? void 0 : _m.fill,
1510
+ stroke: (_q = (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _o === void 0 ? void 0 : _o[moleculeVariant]) === null || _p === void 0 ? void 0 : _p.atomIcon) === null || _q === void 0 ? void 0 : _q.stroke
1501
1511
  });
1502
1512
  }) `
1503
1513
  min-width: fit-content;