@pingux/astro 2.191.1-alpha.0 → 2.192.1-alpha.0

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 (24) hide show
  1. package/lib/cjs/components/Icon/Icon.stories.js +127 -27
  2. package/lib/cjs/components/Icon/IconDefault.js +7 -3
  3. package/lib/cjs/components/IconBadge/IconBadge.stories.js +21 -3
  4. package/lib/cjs/components/Input/Input.styles.js +4 -1
  5. package/lib/cjs/components/PageHeader/PageHeader.test.js +3 -2
  6. package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts +1 -0
  7. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts +1 -0
  8. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js +7 -0
  9. package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts +1 -0
  10. package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.d.ts +1 -0
  11. package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.js +1 -0
  12. package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js +1 -1
  13. package/lib/cjs/styles/themes/next-gen/variants/input.js +7 -0
  14. package/lib/cjs/types/shared/style.d.ts +1 -1
  15. package/lib/components/Icon/Icon.stories.js +127 -27
  16. package/lib/components/Icon/IconDefault.js +7 -3
  17. package/lib/components/IconBadge/IconBadge.stories.js +21 -3
  18. package/lib/components/Input/Input.styles.js +4 -1
  19. package/lib/components/PageHeader/PageHeader.test.js +3 -2
  20. package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js +7 -0
  21. package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js +1 -0
  22. package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js +1 -1
  23. package/lib/styles/themes/next-gen/variants/input.js +7 -0
  24. package/package.json +1 -1
package/lib/cjs/components/Icon/Icon.stories.js CHANGED
@@ -25,6 +25,7 @@ var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon")
25
25
  var _TagIcon = _interopRequireDefault(require("@pingux/mdi-react/TagIcon"));
26
26
  var _uuid = require("uuid");
27
27
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
28
+ var _useGetTheme5 = _interopRequireDefault(require("../../hooks/useGetTheme"));
28
29
  var _index = require("../../index");
29
30
  var _colors = require("../../styles/colors");
30
31
  var _figmaLinks = require("../../utils/designUtils/figmaLinks");
@@ -67,10 +68,14 @@ var _default = exports["default"] = {
67
68
  }
68
69
  };
69
70
  var Default = exports.Default = function Default(args) {
71
+ var _useGetTheme = (0, _useGetTheme5["default"])(),
72
+ isOnyx = _useGetTheme.themeState.isOnyx;
73
+ var iconColor = isOnyx ? 'common.dark' : args.color;
70
74
  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
71
75
  title: {
72
76
  name: 'Search Icon'
73
- }
77
+ },
78
+ color: iconColor
74
79
  }));
75
80
  };
76
81
  Default.parameters = {
@@ -81,6 +86,9 @@ Default.parameters = {
81
86
  };
82
87
  var SVGIcons = exports.SVGIcons = function SVGIcons(args) {
83
88
  // SVGR can used to convert .svg files to components instead of doing this manually
89
+ var _useGetTheme2 = (0, _useGetTheme5["default"])(),
90
+ isOnyx = _useGetTheme2.themeState.isOnyx;
91
+ var iconColor = isOnyx ? 'common.dark' : args.color;
84
92
  var SVGComponent = function SVGComponent(props) {
85
93
  var id = (0, _uuid.v4)();
86
94
  var title = 'User Icon';
@@ -96,30 +104,128 @@ var SVGIcons = exports.SVGIcons = function SVGIcons(args) {
96
104
  };
97
105
  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
98
106
  icon: SVGComponent,
99
- color: "active",
107
+ color: iconColor,
100
108
  size: "sm"
101
109
  }));
102
110
  };
103
111
  var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
104
112
  var Sizes = exports.Sizes = function Sizes() {
113
+ var _useGetTheme3 = (0, _useGetTheme5["default"])(),
114
+ isOnyx = _useGetTheme3.themeState.isOnyx;
105
115
  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
106
116
  key: "head"
107
117
  }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
108
118
  return (0, _react2.jsx)(_index.TableCell, {
109
119
  isHeading: true,
110
- key: head,
111
- maxWidth: head === 'SVG Size' ? '150px' : 'unset'
120
+ key: head
112
121
  }, head);
113
122
  }))), (0, _react2.jsx)(_index.TableBody, {
114
123
  sx: {
115
124
  borderBottom: 'unset'
116
125
  }
117
- }, (0, _react2.jsx)(_index.TableRow, {
118
- height: "auto",
126
+ }, isOnyx ? (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.TableRow, {
127
+ bg: "transparent !important"
128
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "10px (50) xxs")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
129
+ fontFamily: "monospace"
130
+ }, '<Icon icon={SearchIcon} size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
131
+ icon: _SearchIcon["default"],
132
+ size: "xxs",
133
+ title: {
134
+ name: 'Search Icon'
135
+ }
136
+ }))), (0, _react2.jsx)(_index.TableRow, {
137
+ bg: "transparent !important"
138
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "14px (100) xs")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
139
+ fontFamily: "monospace"
140
+ }, '<Icon icon={SearchIcon} size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
141
+ icon: _SearchIcon["default"],
142
+ size: "xs",
143
+ title: {
144
+ name: 'Search Icon'
145
+ }
146
+ }))), (0, _react2.jsx)(_index.TableRow, {
147
+ bg: "transparent !important"
148
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "18px (200) sm")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
149
+ fontFamily: "monospace"
150
+ }, '<Icon icon={SearchIcon} size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
151
+ icon: _SearchIcon["default"],
152
+ size: "sm",
153
+ title: {
154
+ name: 'Search Icon'
155
+ }
156
+ }))), (0, _react2.jsx)(_index.TableRow, {
157
+ bg: "transparent !important"
158
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "24px (300) md")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
159
+ fontFamily: "monospace"
160
+ }, '<Icon icon={SearchIcon} size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
161
+ icon: _SearchIcon["default"],
162
+ size: "md",
163
+ title: {
164
+ name: 'Search Icon'
165
+ }
166
+ }))), (0, _react2.jsx)(_index.TableRow, {
167
+ bg: "transparent !important"
168
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "36px (400)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
169
+ fontFamily: "monospace"
170
+ }, '<Icon icon={SearchIcon} size="icon-400"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
171
+ icon: _SearchIcon["default"],
172
+ size: "icon-400",
173
+ title: {
174
+ name: 'Search Icon'
175
+ }
176
+ }))), (0, _react2.jsx)(_index.TableRow, {
177
+ bg: "transparent !important"
178
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "48px (500)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
179
+ fontFamily: "monospace"
180
+ }, '<Icon icon={SearchIcon} size="icon-500"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
181
+ icon: _SearchIcon["default"],
182
+ size: "icon-500",
183
+ title: {
184
+ name: 'Search Icon'
185
+ }
186
+ }))), (0, _react2.jsx)(_index.TableRow, {
187
+ bg: "transparent !important"
188
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "60px (600)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
189
+ fontFamily: "monospace"
190
+ }, '<Icon icon={SearchIcon} size="icon-600"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
191
+ icon: _SearchIcon["default"],
192
+ size: "icon-600",
193
+ title: {
194
+ name: 'Search Icon'
195
+ }
196
+ }))), (0, _react2.jsx)(_index.TableRow, {
197
+ bg: "transparent !important"
198
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "72px (700)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
199
+ fontFamily: "monospace"
200
+ }, '<Icon icon={SearchIcon} size="icon-700"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
201
+ icon: _SearchIcon["default"],
202
+ size: "icon-700",
203
+ title: {
204
+ name: 'Search Icon'
205
+ }
206
+ }))), (0, _react2.jsx)(_index.TableRow, {
207
+ bg: "transparent !important"
208
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "84px (800)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
209
+ fontFamily: "monospace"
210
+ }, '<Icon icon={SearchIcon} size="icon-800"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
211
+ icon: _SearchIcon["default"],
212
+ size: "icon-800",
213
+ title: {
214
+ name: 'Search Icon'
215
+ }
216
+ }))), (0, _react2.jsx)(_index.TableRow, {
217
+ bg: "transparent !important"
218
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "96px (900)")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
219
+ fontFamily: "monospace"
220
+ }, '<Icon icon={SearchIcon} size="icon-900"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
221
+ icon: _SearchIcon["default"],
222
+ size: "icon-900",
223
+ title: {
224
+ name: 'Search Icon'
225
+ }
226
+ })))) : (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.TableRow, {
119
227
  bg: "transparent !important"
120
- }, (0, _react2.jsx)(_index.TableCell, {
121
- maxWidth: "150px"
122
- }, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
228
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
123
229
  fontFamily: "monospace"
124
230
  }, '<Icon icon={SearchIcon} size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
125
231
  icon: _SearchIcon["default"],
@@ -128,11 +234,8 @@ var Sizes = exports.Sizes = function Sizes() {
128
234
  name: 'Search Icon'
129
235
  }
130
236
  }))), (0, _react2.jsx)(_index.TableRow, {
131
- height: "auto",
132
237
  bg: "transparent !important"
133
- }, (0, _react2.jsx)(_index.TableCell, {
134
- maxWidth: "150px"
135
- }, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
238
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
136
239
  fontFamily: "monospace"
137
240
  }, '<Icon icon={SearchIcon} size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
138
241
  icon: _SearchIcon["default"],
@@ -141,11 +244,8 @@ var Sizes = exports.Sizes = function Sizes() {
141
244
  name: 'Search Icon'
142
245
  }
143
246
  }))), (0, _react2.jsx)(_index.TableRow, {
144
- height: "auto",
145
247
  bg: "transparent !important"
146
- }, (0, _react2.jsx)(_index.TableCell, {
147
- maxWidth: "150px"
148
- }, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
248
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
149
249
  fontFamily: "monospace"
150
250
  }, '<Icon icon={SearchIcon} size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
151
251
  icon: _SearchIcon["default"],
@@ -154,11 +254,8 @@ var Sizes = exports.Sizes = function Sizes() {
154
254
  name: 'Search Icon'
155
255
  }
156
256
  }))), (0, _react2.jsx)(_index.TableRow, {
157
- height: "auto",
158
257
  bg: "transparent !important"
159
- }, (0, _react2.jsx)(_index.TableCell, {
160
- maxWidth: "150px"
161
- }, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
258
+ }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
162
259
  fontFamily: "monospace"
163
260
  }, '<Icon icon={SearchIcon} size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
164
261
  icon: _SearchIcon["default"],
@@ -166,16 +263,19 @@ var Sizes = exports.Sizes = function Sizes() {
166
263
  title: {
167
264
  name: 'Search Icon'
168
265
  }
169
- })))));
266
+ }))))));
170
267
  };
171
268
  var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
269
+ var _useGetTheme4 = (0, _useGetTheme5["default"])(),
270
+ isOnyx = _useGetTheme4.themeState.isOnyx;
271
+ var iconColor = isOnyx ? 'common.dark' : 'accent.40';
172
272
  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
173
273
  isRow: true,
174
274
  gap: "md",
175
275
  mb: "xs"
176
276
  }, (0, _react2.jsx)(_index.Icon, {
177
277
  icon: _AccountIcon["default"],
178
- color: "accent.40",
278
+ color: iconColor,
179
279
  size: "sm",
180
280
  title: {
181
281
  name: 'Account Icon'
@@ -188,7 +288,7 @@ var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
188
288
  mb: "xs"
189
289
  }, (0, _react2.jsx)(_index.Icon, {
190
290
  icon: _AccountGroupIcon["default"],
191
- color: "accent.40",
291
+ color: iconColor,
192
292
  size: "sm",
193
293
  title: {
194
294
  name: 'Account Group Icon'
@@ -201,7 +301,7 @@ var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
201
301
  mb: "xs"
202
302
  }, (0, _react2.jsx)(_index.Icon, {
203
303
  icon: _LockIcon["default"],
204
- color: "accent.40",
304
+ color: iconColor,
205
305
  size: "sm",
206
306
  title: {
207
307
  name: 'Lock Icon'
@@ -214,7 +314,7 @@ var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
214
314
  mb: "xs"
215
315
  }, (0, _react2.jsx)(_index.Icon, {
216
316
  icon: _SearchIcon["default"],
217
- color: "accent.40",
317
+ color: iconColor,
218
318
  size: "sm",
219
319
  title: {
220
320
  name: 'Search Icon'
@@ -227,7 +327,7 @@ var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
227
327
  mb: "xs"
228
328
  }, (0, _react2.jsx)(_index.Icon, {
229
329
  icon: _TagIcon["default"],
230
- color: "accent.40",
330
+ color: iconColor,
231
331
  size: "sm",
232
332
  title: {
233
333
  name: 'Tag Icon'
package/lib/cjs/components/Icon/IconDefault.js CHANGED
@@ -42,7 +42,8 @@ var IconDefault = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
42
42
  sizes: theme.tShirtSizes
43
43
  }),
44
44
  sizeProps = _useTShirtSize.sizeProps;
45
- var defaultIconColor = theme.defaultIconColor;
45
+ var defaultIconColor = theme.defaultIconColor,
46
+ isOnyx = theme.themeState.isOnyx;
46
47
  var resolvedTitle = title !== null && title !== void 0 ? title : (0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
47
48
  name: IconComponent.type.name
48
49
  } : '';
@@ -53,10 +54,13 @@ var IconDefault = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
53
54
  title: resolvedTitle,
54
55
  variant: variant,
55
56
  size: sizeProps.size,
56
- sx: _objectSpread({
57
+ sx: _objectSpread(_objectSpread({
57
58
  fill: color || defaultIconColor,
58
59
  minWidth: sizeProps.size
59
- }, sx)
60
+ }, isOnyx && {
61
+ height: sizeProps.size,
62
+ minHeight: sizeProps.size
63
+ }), sx)
60
64
  }, others));
61
65
  });
62
66
  IconDefault.displayName = 'Icon';
package/lib/cjs/components/IconBadge/IconBadge.stories.js CHANGED
@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
11
11
  var _AccountGroupIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountGroupIcon"));
12
12
  var _ArrowTopRightThickIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowTopRightThickIcon"));
13
13
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
14
+ var _hooks = require("../../hooks");
14
15
  var _index = require("../../index");
15
16
  var _figmaLinks = require("../../utils/designUtils/figmaLinks");
16
17
  var _IconBadge = _interopRequireDefault(require("./IconBadge.mdx"));
@@ -27,20 +28,37 @@ var _default = exports["default"] = {
27
28
  }
28
29
  };
29
30
  var Default = exports.Default = function Default(args) {
31
+ var _useGetTheme = (0, _hooks.useGetTheme)(),
32
+ _useGetTheme$themeSta = _useGetTheme.themeState,
33
+ isOnyx = _useGetTheme$themeSta.isOnyx,
34
+ isOnyxDark = _useGetTheme$themeSta.isOnyxDark;
35
+ var getIconColor = function getIconColor() {
36
+ if (isOnyxDark) return 'gray-400';
37
+ if (isOnyx) return 'gray-800';
38
+ return 'badge.iconBadgeFill';
39
+ };
40
+ var getCircleColor = function getCircleColor() {
41
+ if (isOnyxDark) return 'gray-700';
42
+ if (isOnyx) return 'gray-100';
43
+ return undefined;
44
+ };
45
+ var iconColor = getIconColor();
46
+ var circleColor = getCircleColor();
30
47
  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconBadge, (0, _extends2["default"])({}, args, {
31
48
  baseSize: 25,
32
- circleSize: 15
49
+ circleSize: 15,
50
+ circleColor: circleColor
33
51
  }), (0, _react2.jsx)(_index.Icon, {
34
52
  icon: _AccountGroupIcon["default"],
35
53
  size: "25px",
36
- color: "badge.iconBadgeFill",
54
+ color: iconColor,
37
55
  title: {
38
56
  name: 'Group Icon'
39
57
  }
40
58
  }), (0, _react2.jsx)(_index.Icon, {
41
59
  icon: _ArrowTopRightThickIcon["default"],
42
60
  size: "13px",
43
- color: "badge.iconBadgeFill",
61
+ color: iconColor,
44
62
  title: {
45
63
  name: 'Arrow Icon'
46
64
  }
package/lib/cjs/components/Input/Input.styles.js CHANGED
@@ -221,7 +221,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
221
221
  bg: 'warning.bright'
222
222
  }), '&.is-read-only', {
223
223
  boxShadow: 'inset 0 0 0 100px #e5e9f8',
224
- border: 'none'
224
+ border: 'none',
225
+ '> input': {
226
+ backgroundColor: '#e5e9f8'
227
+ }
225
228
  }));
226
229
  input.numberField = _objectSpread(_objectSpread({}, input), {}, {
227
230
  pr: '28px'
package/lib/cjs/components/PageHeader/PageHeader.test.js CHANGED
@@ -27,6 +27,7 @@ var _react = _interopRequireDefault(require("react"));
27
27
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
28
28
  var themeHook = _interopRequireWildcard(require("../../hooks"));
29
29
  var _index = require("../../index");
30
+ var _theme = _interopRequireDefault(require("../../styles/theme"));
30
31
  var _testWrapper = require("../../utils/testUtils/testWrapper");
31
32
  var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
32
33
  var _react2 = require("@emotion/react");
@@ -122,11 +123,11 @@ test('for default theme, it applies correct styles', function () {
122
123
  expect(button).toHaveStyleRule('margin-left', '10px');
123
124
  });
124
125
  test('for onyx theme, it applies correct styles', function () {
125
- jest.spyOn(themeHook, 'useGetTheme').mockReturnValue({
126
+ jest.spyOn(themeHook, 'useGetTheme').mockReturnValueOnce(_objectSpread(_objectSpread({}, _theme["default"]), {}, {
126
127
  pageHeaderTitleMargin: 'md',
127
128
  pageHeaderAddIconMargin: 'md',
128
129
  pageHeaderAddIconSize: 'md'
129
- });
130
+ }));
130
131
  getComponent();
131
132
  var button = _testWrapper.screen.getByRole('button', {
132
133
  name: /icon button/i
package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts CHANGED
@@ -175,6 +175,7 @@ declare const useGetTheme: () => {
175
175
  navButtonEstHeight: number;
176
176
  };
177
177
  tShirtSizes: {
178
+ 'icon-50': string;
178
179
  xxs: string;
179
180
  'icon-100': string;
180
181
  xs: string;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts CHANGED
@@ -70,6 +70,7 @@ export declare const nextGenDarkThemeValues: {
70
70
  navButtonEstHeight: number;
71
71
  };
72
72
  tShirtSizes: {
73
+ 'icon-50': string;
73
74
  xxs: string;
74
75
  'icon-100': string;
75
76
  xs: string;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js CHANGED
@@ -45,6 +45,13 @@ input.multivaluesWrapper = {
45
45
  '> input': {
46
46
  backgroundColor: 'disabled'
47
47
  }
48
+ },
49
+ '&.is-disabled': {
50
+ backgroundColor: 'disabled',
51
+ '> input': {
52
+ backgroundColor: 'disabled',
53
+ border: 'none'
54
+ }
48
55
  }
49
56
  };
50
57
  input.promptInput = {
package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export declare const nextGenThemeValues: {
65
65
  WarningIcon: string;
66
66
  };
67
67
  tShirtSizes: {
68
+ 'icon-50': string;
68
69
  xxs: string;
69
70
  'icon-100': string;
70
71
  xs: string;
package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const _default: {
2
+ 'icon-50': string;
2
3
  xxs: string;
3
4
  'icon-100': string;
4
5
  xs: string;
package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.js CHANGED
@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.iconWrapperSizes = exports["default"] = void 0;
8
8
  var _default = exports["default"] = {
9
+ 'icon-50': '10px',
9
10
  xxs: '10px',
10
11
  'icon-100': '14px',
11
12
  xs: '14px',
package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js CHANGED
@@ -59,7 +59,7 @@ var tabs = [{
59
59
  name: 'Tab 3',
60
60
  children: 'Tab 3 body'
61
61
  }];
62
- var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
62
+ var iconSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
63
63
  var StickerSheetComponent = function StickerSheetComponent() {
64
64
  return (0, _react2.jsx)(_index.Box, {
65
65
  sx: {
package/lib/cjs/styles/themes/next-gen/variants/input.js CHANGED
@@ -182,6 +182,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
182
182
  '&:after': {
183
183
  display: 'none'
184
184
  }
185
+ },
186
+ '&.is-disabled': {
187
+ backgroundColor: 'disabled',
188
+ '> input': {
189
+ backgroundColor: 'disabled',
190
+ border: 'none'
191
+ }
185
192
  }
186
193
  });
187
194
  input.numberField = _objectSpread(_objectSpread({}, input), {}, {
package/lib/cjs/types/shared/style.d.ts CHANGED
@@ -20,7 +20,7 @@ export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
20
20
  export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
21
21
  type IconTShirtSize = 'xxs' | 'xs' | 'xsm' | 'sm' | 'md';
22
22
  type LoaderTShirtSize = 'sm' | 'md' | 'lg';
23
- type IconSizeRange = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
23
+ type IconSizeRange = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
24
24
  type NextGenIconTShirtSize = `icon-${IconSizeRange}`;
25
25
  type pixelSize = 'em' | 'px' | 'rem';
26
26
  export type IconSize = IconTShirtSize | NextGenIconTShirtSize | number | `${number}${pixelSize}`;
package/lib/components/Icon/Icon.stories.js CHANGED
@@ -20,6 +20,7 @@ import SearchIcon from '@pingux/mdi-react/SearchIcon';
20
20
  import TagIcon from '@pingux/mdi-react/TagIcon';
21
21
  import { v4 as uuid } from 'uuid';
22
22
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
23
+ import useGetTheme from '../../hooks/useGetTheme';
23
24
  import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
24
25
  import { flatColorList } from '../../styles/colors';
25
26
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
@@ -60,10 +61,14 @@ export default {
60
61
  }
61
62
  };
62
63
  export var Default = function Default(args) {
64
+ var _useGetTheme = useGetTheme(),
65
+ isOnyx = _useGetTheme.themeState.isOnyx;
66
+ var iconColor = isOnyx ? 'common.dark' : args.color;
63
67
  return ___EmotionJSX(Icon, _extends({}, args, {
64
68
  title: {
65
69
  name: 'Search Icon'
66
- }
70
+ },
71
+ color: iconColor
67
72
  }));
68
73
  };
69
74
  Default.parameters = {
@@ -74,6 +79,9 @@ Default.parameters = {
74
79
  };
75
80
  export var SVGIcons = function SVGIcons(args) {
76
81
  // SVGR can used to convert .svg files to components instead of doing this manually
82
+ var _useGetTheme2 = useGetTheme(),
83
+ isOnyx = _useGetTheme2.themeState.isOnyx;
84
+ var iconColor = isOnyx ? 'common.dark' : args.color;
77
85
  var SVGComponent = function SVGComponent(props) {
78
86
  var id = uuid();
79
87
  var title = 'User Icon';
@@ -89,30 +97,128 @@ export var SVGIcons = function SVGIcons(args) {
89
97
  };
90
98
  return ___EmotionJSX(Icon, _extends({}, args, {
91
99
  icon: SVGComponent,
92
- color: "active",
100
+ color: iconColor,
93
101
  size: "sm"
94
102
  }));
95
103
  };
96
104
  var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
97
105
  export var Sizes = function Sizes() {
106
+ var _useGetTheme3 = useGetTheme(),
107
+ isOnyx = _useGetTheme3.themeState.isOnyx;
98
108
  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
99
109
  key: "head"
100
110
  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
101
111
  return ___EmotionJSX(TableCell, {
102
112
  isHeading: true,
103
- key: head,
104
- maxWidth: head === 'SVG Size' ? '150px' : 'unset'
113
+ key: head
105
114
  }, head);
106
115
  }))), ___EmotionJSX(TableBody, {
107
116
  sx: {
108
117
  borderBottom: 'unset'
109
118
  }
110
- }, ___EmotionJSX(TableRow, {
111
- height: "auto",
119
+ }, isOnyx ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableRow, {
120
+ bg: "transparent !important"
121
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "10px (50) xxs")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
122
+ fontFamily: "monospace"
123
+ }, '<Icon icon={SearchIcon} size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
124
+ icon: SearchIcon,
125
+ size: "xxs",
126
+ title: {
127
+ name: 'Search Icon'
128
+ }
129
+ }))), ___EmotionJSX(TableRow, {
130
+ bg: "transparent !important"
131
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "14px (100) xs")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
132
+ fontFamily: "monospace"
133
+ }, '<Icon icon={SearchIcon} size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
134
+ icon: SearchIcon,
135
+ size: "xs",
136
+ title: {
137
+ name: 'Search Icon'
138
+ }
139
+ }))), ___EmotionJSX(TableRow, {
140
+ bg: "transparent !important"
141
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "18px (200) sm")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
142
+ fontFamily: "monospace"
143
+ }, '<Icon icon={SearchIcon} size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
144
+ icon: SearchIcon,
145
+ size: "sm",
146
+ title: {
147
+ name: 'Search Icon'
148
+ }
149
+ }))), ___EmotionJSX(TableRow, {
150
+ bg: "transparent !important"
151
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "24px (300) md")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
152
+ fontFamily: "monospace"
153
+ }, '<Icon icon={SearchIcon} size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
154
+ icon: SearchIcon,
155
+ size: "md",
156
+ title: {
157
+ name: 'Search Icon'
158
+ }
159
+ }))), ___EmotionJSX(TableRow, {
160
+ bg: "transparent !important"
161
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "36px (400)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
162
+ fontFamily: "monospace"
163
+ }, '<Icon icon={SearchIcon} size="icon-400"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
164
+ icon: SearchIcon,
165
+ size: "icon-400",
166
+ title: {
167
+ name: 'Search Icon'
168
+ }
169
+ }))), ___EmotionJSX(TableRow, {
170
+ bg: "transparent !important"
171
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "48px (500)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
172
+ fontFamily: "monospace"
173
+ }, '<Icon icon={SearchIcon} size="icon-500"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
174
+ icon: SearchIcon,
175
+ size: "icon-500",
176
+ title: {
177
+ name: 'Search Icon'
178
+ }
179
+ }))), ___EmotionJSX(TableRow, {
180
+ bg: "transparent !important"
181
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "60px (600)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
182
+ fontFamily: "monospace"
183
+ }, '<Icon icon={SearchIcon} size="icon-600"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
184
+ icon: SearchIcon,
185
+ size: "icon-600",
186
+ title: {
187
+ name: 'Search Icon'
188
+ }
189
+ }))), ___EmotionJSX(TableRow, {
190
+ bg: "transparent !important"
191
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "72px (700)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
192
+ fontFamily: "monospace"
193
+ }, '<Icon icon={SearchIcon} size="icon-700"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
194
+ icon: SearchIcon,
195
+ size: "icon-700",
196
+ title: {
197
+ name: 'Search Icon'
198
+ }
199
+ }))), ___EmotionJSX(TableRow, {
200
+ bg: "transparent !important"
201
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "84px (800)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
202
+ fontFamily: "monospace"
203
+ }, '<Icon icon={SearchIcon} size="icon-800"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
204
+ icon: SearchIcon,
205
+ size: "icon-800",
206
+ title: {
207
+ name: 'Search Icon'
208
+ }
209
+ }))), ___EmotionJSX(TableRow, {
210
+ bg: "transparent !important"
211
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "96px (900)")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
212
+ fontFamily: "monospace"
213
+ }, '<Icon icon={SearchIcon} size="icon-900"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
214
+ icon: SearchIcon,
215
+ size: "icon-900",
216
+ title: {
217
+ name: 'Search Icon'
218
+ }
219
+ })))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableRow, {
112
220
  bg: "transparent !important"
113
- }, ___EmotionJSX(TableCell, {
114
- maxWidth: "150px"
115
- }, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
221
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
116
222
  fontFamily: "monospace"
117
223
  }, '<Icon icon={SearchIcon} size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
118
224
  icon: SearchIcon,
@@ -121,11 +227,8 @@ export var Sizes = function Sizes() {
121
227
  name: 'Search Icon'
122
228
  }
123
229
  }))), ___EmotionJSX(TableRow, {
124
- height: "auto",
125
230
  bg: "transparent !important"
126
- }, ___EmotionJSX(TableCell, {
127
- maxWidth: "150px"
128
- }, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
231
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
129
232
  fontFamily: "monospace"
130
233
  }, '<Icon icon={SearchIcon} size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
131
234
  icon: SearchIcon,
@@ -134,11 +237,8 @@ export var Sizes = function Sizes() {
134
237
  name: 'Search Icon'
135
238
  }
136
239
  }))), ___EmotionJSX(TableRow, {
137
- height: "auto",
138
240
  bg: "transparent !important"
139
- }, ___EmotionJSX(TableCell, {
140
- maxWidth: "150px"
141
- }, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
241
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
142
242
  fontFamily: "monospace"
143
243
  }, '<Icon icon={SearchIcon} size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
144
244
  icon: SearchIcon,
@@ -147,11 +247,8 @@ export var Sizes = function Sizes() {
147
247
  name: 'Search Icon'
148
248
  }
149
249
  }))), ___EmotionJSX(TableRow, {
150
- height: "auto",
151
250
  bg: "transparent !important"
152
- }, ___EmotionJSX(TableCell, {
153
- maxWidth: "150px"
154
- }, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
251
+ }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
155
252
  fontFamily: "monospace"
156
253
  }, '<Icon icon={SearchIcon} size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
157
254
  icon: SearchIcon,
@@ -159,16 +256,19 @@ export var Sizes = function Sizes() {
159
256
  title: {
160
257
  name: 'Search Icon'
161
258
  }
162
- })))));
259
+ }))))));
163
260
  };
164
261
  export var CommonlyUsed = function CommonlyUsed() {
262
+ var _useGetTheme4 = useGetTheme(),
263
+ isOnyx = _useGetTheme4.themeState.isOnyx;
264
+ var iconColor = isOnyx ? 'common.dark' : 'accent.40';
165
265
  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
166
266
  isRow: true,
167
267
  gap: "md",
168
268
  mb: "xs"
169
269
  }, ___EmotionJSX(Icon, {
170
270
  icon: AccountIcon,
171
- color: "accent.40",
271
+ color: iconColor,
172
272
  size: "sm",
173
273
  title: {
174
274
  name: 'Account Icon'
@@ -181,7 +281,7 @@ export var CommonlyUsed = function CommonlyUsed() {
181
281
  mb: "xs"
182
282
  }, ___EmotionJSX(Icon, {
183
283
  icon: AccountGroupIcon,
184
- color: "accent.40",
284
+ color: iconColor,
185
285
  size: "sm",
186
286
  title: {
187
287
  name: 'Account Group Icon'
@@ -194,7 +294,7 @@ export var CommonlyUsed = function CommonlyUsed() {
194
294
  mb: "xs"
195
295
  }, ___EmotionJSX(Icon, {
196
296
  icon: LockIcon,
197
- color: "accent.40",
297
+ color: iconColor,
198
298
  size: "sm",
199
299
  title: {
200
300
  name: 'Lock Icon'
@@ -207,7 +307,7 @@ export var CommonlyUsed = function CommonlyUsed() {
207
307
  mb: "xs"
208
308
  }, ___EmotionJSX(Icon, {
209
309
  icon: SearchIcon,
210
- color: "accent.40",
310
+ color: iconColor,
211
311
  size: "sm",
212
312
  title: {
213
313
  name: 'Search Icon'
@@ -220,7 +320,7 @@ export var CommonlyUsed = function CommonlyUsed() {
220
320
  mb: "xs"
221
321
  }, ___EmotionJSX(Icon, {
222
322
  icon: TagIcon,
223
- color: "accent.40",
323
+ color: iconColor,
224
324
  size: "sm",
225
325
  title: {
226
326
  name: 'Tag Icon'
package/lib/components/Icon/IconDefault.js CHANGED
@@ -32,7 +32,8 @@ var IconDefault = /*#__PURE__*/forwardRef(function (props, ref) {
32
32
  sizes: theme.tShirtSizes
33
33
  }),
34
34
  sizeProps = _useTShirtSize.sizeProps;
35
- var defaultIconColor = theme.defaultIconColor;
35
+ var defaultIconColor = theme.defaultIconColor,
36
+ isOnyx = theme.themeState.isOnyx;
36
37
  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
37
38
  name: IconComponent.type.name
38
39
  } : '';
@@ -43,10 +44,13 @@ var IconDefault = /*#__PURE__*/forwardRef(function (props, ref) {
43
44
  title: resolvedTitle,
44
45
  variant: variant,
45
46
  size: sizeProps.size,
46
- sx: _objectSpread({
47
+ sx: _objectSpread(_objectSpread({
47
48
  fill: color || defaultIconColor,
48
49
  minWidth: sizeProps.size
49
- }, sx)
50
+ }, isOnyx && {
51
+ height: sizeProps.size,
52
+ minHeight: sizeProps.size
53
+ }), sx)
50
54
  }, others));
51
55
  });
52
56
  IconDefault.displayName = 'Icon';
package/lib/components/IconBadge/IconBadge.stories.js CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import GroupIcon from '@pingux/mdi-react/AccountGroupIcon';
4
4
  import ArrowIcon from '@pingux/mdi-react/ArrowTopRightThickIcon';
5
5
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
6
+ import { useGetTheme } from '../../hooks';
6
7
  import { Box, Icon, IconBadge } from '../../index';
7
8
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
8
9
  import IconBadgeReadme from './IconBadge.mdx';
@@ -19,20 +20,37 @@ export default {
19
20
  }
20
21
  };
21
22
  export var Default = function Default(args) {
23
+ var _useGetTheme = useGetTheme(),
24
+ _useGetTheme$themeSta = _useGetTheme.themeState,
25
+ isOnyx = _useGetTheme$themeSta.isOnyx,
26
+ isOnyxDark = _useGetTheme$themeSta.isOnyxDark;
27
+ var getIconColor = function getIconColor() {
28
+ if (isOnyxDark) return 'gray-400';
29
+ if (isOnyx) return 'gray-800';
30
+ return 'badge.iconBadgeFill';
31
+ };
32
+ var getCircleColor = function getCircleColor() {
33
+ if (isOnyxDark) return 'gray-700';
34
+ if (isOnyx) return 'gray-100';
35
+ return undefined;
36
+ };
37
+ var iconColor = getIconColor();
38
+ var circleColor = getCircleColor();
22
39
  return ___EmotionJSX(Box, null, ___EmotionJSX(IconBadge, _extends({}, args, {
23
40
  baseSize: 25,
24
- circleSize: 15
41
+ circleSize: 15,
42
+ circleColor: circleColor
25
43
  }), ___EmotionJSX(Icon, {
26
44
  icon: GroupIcon,
27
45
  size: "25px",
28
- color: "badge.iconBadgeFill",
46
+ color: iconColor,
29
47
  title: {
30
48
  name: 'Group Icon'
31
49
  }
32
50
  }), ___EmotionJSX(Icon, {
33
51
  icon: ArrowIcon,
34
52
  size: "13px",
35
- color: "badge.iconBadgeFill",
53
+ color: iconColor,
36
54
  title: {
37
55
  name: 'Arrow Icon'
38
56
  }
package/lib/components/Input/Input.styles.js CHANGED
@@ -215,7 +215,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
215
215
  bg: 'warning.bright'
216
216
  }), '&.is-read-only', {
217
217
  boxShadow: 'inset 0 0 0 100px #e5e9f8',
218
- border: 'none'
218
+ border: 'none',
219
+ '> input': {
220
+ backgroundColor: '#e5e9f8'
221
+ }
219
222
  }));
220
223
  input.numberField = _objectSpread(_objectSpread({}, input), {}, {
221
224
  pr: '28px'
package/lib/components/PageHeader/PageHeader.test.js CHANGED
@@ -34,6 +34,7 @@ import React from 'react';
34
34
  import userEvent from '@testing-library/user-event';
35
35
  import * as themeHook from '../../hooks';
36
36
  import { Link, PageHeader } from '../../index';
37
+ import theme from '../../styles/theme';
37
38
  import { render, screen } from '../../utils/testUtils/testWrapper';
38
39
  import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
39
40
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -117,11 +118,11 @@ test('for default theme, it applies correct styles', function () {
117
118
  expect(button).toHaveStyleRule('margin-left', '10px');
118
119
  });
119
120
  test('for onyx theme, it applies correct styles', function () {
120
- jest.spyOn(themeHook, 'useGetTheme').mockReturnValue({
121
+ jest.spyOn(themeHook, 'useGetTheme').mockReturnValueOnce(_objectSpread(_objectSpread({}, theme), {}, {
121
122
  pageHeaderTitleMargin: 'md',
122
123
  pageHeaderAddIconMargin: 'md',
123
124
  pageHeaderAddIconSize: 'md'
124
- });
125
+ }));
125
126
  getComponent();
126
127
  var button = screen.getByRole('button', {
127
128
  name: /icon button/i
package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js CHANGED
@@ -38,6 +38,13 @@ input.multivaluesWrapper = {
38
38
  '> input': {
39
39
  backgroundColor: 'disabled'
40
40
  }
41
+ },
42
+ '&.is-disabled': {
43
+ backgroundColor: 'disabled',
44
+ '> input': {
45
+ backgroundColor: 'disabled',
46
+ border: 'none'
47
+ }
41
48
  }
42
49
  };
43
50
  input.promptInput = {
package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export default {
2
+ 'icon-50': '10px',
2
3
  xxs: '10px',
3
4
  'icon-100': '14px',
4
5
  xs: '14px',
package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js CHANGED
@@ -51,7 +51,7 @@ var tabs = [{
51
51
  name: 'Tab 3',
52
52
  children: 'Tab 3 body'
53
53
  }];
54
- var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
54
+ var iconSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
55
55
  var StickerSheetComponent = function StickerSheetComponent() {
56
56
  return ___EmotionJSX(Box, {
57
57
  sx: {
package/lib/styles/themes/next-gen/variants/input.js CHANGED
@@ -175,6 +175,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
175
175
  '&:after': {
176
176
  display: 'none'
177
177
  }
178
+ },
179
+ '&.is-disabled': {
180
+ backgroundColor: 'disabled',
181
+ '> input': {
182
+ backgroundColor: 'disabled',
183
+ border: 'none'
184
+ }
178
185
  }
179
186
  });
180
187
  input.numberField = _objectSpread(_objectSpread({}, input), {}, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.191.1-alpha.0",
3
+ "version": "2.192.1-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",