@pingux/astro 2.186.0-alpha.0 → 2.187.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 (13) hide show
  1. package/lib/cjs/components/Badge/Badge.stories.js +9 -7
  2. package/lib/cjs/components/Badge/Badge.styles.d.ts +29 -0
  3. package/lib/cjs/components/Badge/Badge.styles.js +2 -0
  4. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts +45 -13
  5. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.js +25 -8
  6. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +76 -27
  7. package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts +76 -27
  8. package/lib/cjs/styles/themes/next-gen/variants/badges.js +40 -14
  9. package/lib/components/Badge/Badge.stories.js +9 -7
  10. package/lib/components/Badge/Badge.styles.js +2 -0
  11. package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js +25 -8
  12. package/lib/styles/themes/next-gen/variants/badges.js +40 -14
  13. package/package.json +1 -1
package/lib/cjs/components/Badge/Badge.stories.js CHANGED
@@ -222,21 +222,23 @@ var BadgeWithLeftSlotAndIcon = exports.BadgeWithLeftSlotAndIcon = function Badge
222
222
  };
223
223
  var StatusBadgeVariants = exports.StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
224
224
  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
225
- return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
225
+ return (0, _react2.jsx)(_index.Box, {
226
+ gap: "md"
227
+ }, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
226
228
  variant: "criticalStatusBadge",
227
- label: "Critical",
228
- mb: "lg"
229
+ label: "Critical"
229
230
  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
230
231
  variant: "warningStatusBadge",
231
- label: "Warning",
232
- mb: "lg"
232
+ label: "Warning"
233
233
  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
234
234
  variant: "healthyStatusBadge",
235
- label: "Healthy",
236
- mb: "lg"
235
+ label: "Healthy"
237
236
  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
238
237
  variant: "activeStatusBadge",
239
238
  label: "Active"
239
+ })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
240
+ variant: "selected",
241
+ label: "Selected"
240
242
  })));
241
243
  };
242
244
  StatusBadgeVariants.parameters = {
package/lib/cjs/components/Badge/Badge.styles.d.ts CHANGED
@@ -542,6 +542,35 @@ declare const _default: {
542
542
  };
543
543
  };
544
544
  };
545
+ selected: {
546
+ backgroundColor: string;
547
+ '& span': {
548
+ fontWeight: number;
549
+ color: string;
550
+ };
551
+ cursor: string;
552
+ p: string;
553
+ alignItems: string;
554
+ justifyContent: string;
555
+ minWidth: string;
556
+ alignSelf: string;
557
+ display: string;
558
+ borderRadius: string;
559
+ fontWeight: number;
560
+ '& button': {
561
+ backgroundColor: string;
562
+ marginLeft: string;
563
+ marginTop: string;
564
+ padding: string;
565
+ '&.is-hovered': {
566
+ backgroundColor: string;
567
+ };
568
+ '& .mdi-icon': {
569
+ marginLeft: string;
570
+ padding: string;
571
+ };
572
+ };
573
+ };
545
574
  selectedItemBadge: {
546
575
  bg: string;
547
576
  py: number;
package/lib/cjs/components/Badge/Badge.styles.js CHANGED
@@ -159,6 +159,7 @@ var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
159
159
  color: 'white'
160
160
  }
161
161
  });
162
+ var selected = convenienceDefault;
162
163
  var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
163
164
  backgroundColor: '#FFF !important',
164
165
  border: 'solid 1px',
@@ -272,6 +273,7 @@ var _default = exports["default"] = {
272
273
  itemBadgeWithSlot: itemBadgeWithSlot,
273
274
  multivaluesBadge: multivaluesBadge,
274
275
  readOnlyBadge: readOnlyBadge,
276
+ selected: selected,
275
277
  selectedItemBadge: selectedItemBadge,
276
278
  invertedBadgeDeleteButton: invertedBadgeDeleteButton,
277
279
  successCalloutBadge: successCalloutBadge,
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts CHANGED
@@ -1,54 +1,86 @@
1
1
  declare const badges: {
2
2
  baseBadge: {
3
- color: string;
3
+ '& span': {
4
+ color: string;
5
+ };
4
6
  };
5
7
  primary: {
6
8
  backgroundColor: string;
7
- color: string;
9
+ '& span': {
10
+ color: string;
11
+ };
8
12
  };
9
13
  secondary: {
10
14
  backgroundColor: string;
11
- color: any;
15
+ '& span': {
16
+ color: any;
17
+ };
12
18
  };
13
19
  success: {
14
20
  backgroundColor: string;
15
- color: string;
21
+ '& span': {
22
+ color: string;
23
+ };
16
24
  };
17
25
  danger: {
18
26
  backgroundColor: string;
19
- color: string;
27
+ '& span': {
28
+ color: string;
29
+ };
20
30
  };
21
31
  warning: {
22
32
  backgroundColor: string;
23
- color: string;
33
+ '& span': {
34
+ color: string;
35
+ };
24
36
  };
25
37
  info: {
26
38
  backgroundColor: string;
27
- color: any;
39
+ '& span': {
40
+ color: any;
41
+ };
28
42
  };
29
43
  dark: {
30
44
  backgroundColor: string;
31
- color: any;
45
+ '& span': {
46
+ color: any;
47
+ };
32
48
  };
33
49
  activeStatusBadge: {
34
50
  backgroundColor: string;
35
- color: string;
51
+ '& span': {
52
+ color: string;
53
+ };
54
+ };
55
+ selected: {
56
+ backgroundColor: string;
57
+ '& span': {
58
+ color: string;
59
+ };
36
60
  };
37
61
  warningStatusBadge: {
38
62
  backgroundColor: string;
39
- color: string;
63
+ '& span': {
64
+ color: string;
65
+ };
40
66
  };
41
67
  criticalStatusBadge: {
42
68
  backgroundColor: string;
43
- color: string;
69
+ '& span': {
70
+ color: string;
71
+ };
44
72
  };
45
73
  healthyStatusBadge: {
46
74
  backgroundColor: string;
47
- color: string;
75
+ '& span': {
76
+ color: string;
77
+ };
48
78
  };
49
79
  secondaryStatusBadge: {
50
80
  backgroundColor: string;
51
- color: any;
81
+ '& span': {
82
+ color: any;
83
+ };
52
84
  };
53
85
  countBadge: {
54
86
  backgroundColor: string;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.js CHANGED
@@ -18,35 +18,51 @@ var _onyxTokens = require("@pingux/onyx-tokens");
18
18
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
19
19
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
20
20
  var baseBadge = {
21
- color: 'badge.textColor'
21
+ '& span': {
22
+ color: 'badge.textColor'
23
+ }
22
24
  };
23
25
  var primary = {
24
26
  backgroundColor: '#1a73e8 !important',
25
- color: 'black'
27
+ '& span': {
28
+ color: 'black'
29
+ }
26
30
  };
27
31
  var secondary = {
28
32
  backgroundColor: '#324054 !important',
29
- color: _onyxTokens.astroTokensDark.color.gray[100]
33
+ '& span': {
34
+ color: _onyxTokens.astroTokensDark.color.gray[100]
35
+ }
30
36
  };
31
37
  var success = {
32
38
  backgroundColor: '#22a75f !important',
33
- color: 'black'
39
+ '& span': {
40
+ color: 'black'
41
+ }
34
42
  };
35
43
  var danger = {
36
44
  backgroundColor: '#da3a2b !important',
37
- color: 'black'
45
+ '& span': {
46
+ color: 'black'
47
+ }
38
48
  };
39
49
  var warning = {
40
50
  backgroundColor: '#ffb946 !important',
41
- color: 'black'
51
+ '& span': {
52
+ color: 'black'
53
+ }
42
54
  };
43
55
  var info = {
44
56
  backgroundColor: '#324054 !important',
45
- color: _onyxTokens.astroTokensDark.color.gray[100]
57
+ '& span': {
58
+ color: _onyxTokens.astroTokensDark.color.gray[100]
59
+ }
46
60
  };
47
61
  var dark = {
48
62
  backgroundColor: '#c0c9d5 !important',
49
- color: _onyxTokens.astroTokensDark.color.gray[100]
63
+ '& span': {
64
+ color: _onyxTokens.astroTokensDark.color.gray[100]
65
+ }
50
66
  };
51
67
  var activeStatusBadge = _objectSpread({}, primary);
52
68
  var warningStatusBadge = _objectSpread({}, warning);
@@ -104,6 +120,7 @@ var badges = {
104
120
  info: info,
105
121
  dark: dark,
106
122
  activeStatusBadge: activeStatusBadge,
123
+ selected: activeStatusBadge,
107
124
  warningStatusBadge: warningStatusBadge,
108
125
  criticalStatusBadge: criticalStatusBadge,
109
126
  healthyStatusBadge: healthyStatusBadge,
package/lib/cjs/styles/themes/next-gen/next-gen.d.ts CHANGED
@@ -3221,6 +3221,10 @@ declare const _default: {
3221
3221
  };
3222
3222
  };
3223
3223
  badges: {
3224
+ dataTableBadge: {
3225
+ minWidth: string;
3226
+ border: string;
3227
+ };
3224
3228
  baseBadge: {
3225
3229
  '& span': {
3226
3230
  fontWeight: string;
@@ -3287,8 +3291,8 @@ declare const _default: {
3287
3291
  };
3288
3292
  primary: {
3289
3293
  backgroundColor: string;
3290
- color: any;
3291
3294
  '& span': {
3295
+ color: any;
3292
3296
  fontWeight: string;
3293
3297
  };
3294
3298
  '& button': {
@@ -3317,6 +3321,7 @@ declare const _default: {
3317
3321
  alignSelf: string;
3318
3322
  display: string;
3319
3323
  width: string;
3324
+ color: string;
3320
3325
  };
3321
3326
  countBadge: {
3322
3327
  backgroundColor: string;
@@ -3354,8 +3359,8 @@ declare const _default: {
3354
3359
  };
3355
3360
  countNeutral: {
3356
3361
  backgroundColor: string;
3357
- color: any;
3358
3362
  '& span': {
3363
+ color: any;
3359
3364
  fontWeight: string;
3360
3365
  };
3361
3366
  '& button': {
@@ -3384,11 +3389,12 @@ declare const _default: {
3384
3389
  alignSelf: string;
3385
3390
  display: string;
3386
3391
  width: string;
3392
+ color: string;
3387
3393
  };
3388
3394
  secondary: {
3389
3395
  backgroundColor: string;
3390
- color: any;
3391
3396
  '& span': {
3397
+ color: any;
3392
3398
  fontWeight: string;
3393
3399
  };
3394
3400
  '& button': {
@@ -3417,13 +3423,14 @@ declare const _default: {
3417
3423
  alignSelf: string;
3418
3424
  display: string;
3419
3425
  width: string;
3426
+ color: string;
3420
3427
  };
3421
3428
  success: {
3422
- backgroundColor: string;
3423
- color: string;
3424
3429
  '& span': {
3430
+ color: any;
3425
3431
  fontWeight: string;
3426
3432
  };
3433
+ backgroundColor: string;
3427
3434
  '& button': {
3428
3435
  alignSelf: string;
3429
3436
  p: string;
@@ -3450,11 +3457,12 @@ declare const _default: {
3450
3457
  alignSelf: string;
3451
3458
  display: string;
3452
3459
  width: string;
3460
+ color: string;
3453
3461
  };
3454
3462
  danger: {
3455
3463
  backgroundColor: string;
3456
- color: any;
3457
3464
  '& span': {
3465
+ color: any;
3458
3466
  fontWeight: string;
3459
3467
  };
3460
3468
  '& button': {
@@ -3483,11 +3491,12 @@ declare const _default: {
3483
3491
  alignSelf: string;
3484
3492
  display: string;
3485
3493
  width: string;
3494
+ color: string;
3486
3495
  };
3487
3496
  warning: {
3488
3497
  backgroundColor: string;
3489
- color: any;
3490
3498
  '& span': {
3499
+ color: any;
3491
3500
  fontWeight: string;
3492
3501
  };
3493
3502
  '& button': {
@@ -3516,11 +3525,12 @@ declare const _default: {
3516
3525
  alignSelf: string;
3517
3526
  display: string;
3518
3527
  width: string;
3528
+ color: string;
3519
3529
  };
3520
3530
  dark: {
3521
3531
  backgroundColor: string;
3522
- color: string;
3523
3532
  '& span': {
3533
+ color: string;
3524
3534
  fontWeight: string;
3525
3535
  };
3526
3536
  '& button': {
@@ -3549,11 +3559,12 @@ declare const _default: {
3549
3559
  alignSelf: string;
3550
3560
  display: string;
3551
3561
  width: string;
3562
+ color: string;
3552
3563
  };
3553
3564
  info: {
3554
3565
  backgroundColor: string;
3555
- color: string;
3556
3566
  '& span': {
3567
+ color: string;
3557
3568
  fontWeight: string;
3558
3569
  };
3559
3570
  '& button': {
@@ -3582,6 +3593,7 @@ declare const _default: {
3582
3593
  alignSelf: string;
3583
3594
  display: string;
3584
3595
  width: string;
3596
+ color: string;
3585
3597
  };
3586
3598
  selectedItemBadge: {
3587
3599
  backgroundColor: string;
@@ -3618,6 +3630,41 @@ declare const _default: {
3618
3630
  width: string;
3619
3631
  color: string;
3620
3632
  };
3633
+ selected: {
3634
+ backgroundColor: string;
3635
+ '& span': {
3636
+ color: any;
3637
+ fontWeight: string;
3638
+ };
3639
+ '& button': {
3640
+ alignSelf: string;
3641
+ p: string;
3642
+ bg: string;
3643
+ '&.is-hovered': {
3644
+ bg: string;
3645
+ '& svg': {
3646
+ path: {
3647
+ fill: string;
3648
+ };
3649
+ };
3650
+ };
3651
+ };
3652
+ '& svg': {
3653
+ path: {
3654
+ fill: string;
3655
+ };
3656
+ };
3657
+ alignItems: string;
3658
+ justifyContent: string;
3659
+ padding: string;
3660
+ borderRadius: string;
3661
+ fontSize: string;
3662
+ alignSelf: string;
3663
+ display: string;
3664
+ width: string;
3665
+ color: string;
3666
+ border: string;
3667
+ };
3621
3668
  readOnlyBadge: {
3622
3669
  border: string;
3623
3670
  borderColor: string;
@@ -3693,11 +3740,9 @@ declare const _default: {
3693
3740
  color: string;
3694
3741
  };
3695
3742
  activeStatusBadge: {
3696
- minWidth: string;
3697
- border: string;
3698
3743
  backgroundColor: string;
3699
- color: any;
3700
3744
  '& span': {
3745
+ color: any;
3701
3746
  fontWeight: string;
3702
3747
  };
3703
3748
  '& button': {
@@ -3726,13 +3771,13 @@ declare const _default: {
3726
3771
  alignSelf: string;
3727
3772
  display: string;
3728
3773
  width: string;
3774
+ color: string;
3775
+ border: string;
3729
3776
  };
3730
3777
  warningStatusBadge: {
3731
- minWidth: string;
3732
- border: string;
3733
3778
  backgroundColor: string;
3734
- color: any;
3735
3779
  '& span': {
3780
+ color: any;
3736
3781
  fontWeight: string;
3737
3782
  };
3738
3783
  '& button': {
@@ -3761,13 +3806,13 @@ declare const _default: {
3761
3806
  alignSelf: string;
3762
3807
  display: string;
3763
3808
  width: string;
3809
+ color: string;
3810
+ border: string;
3764
3811
  };
3765
3812
  criticalStatusBadge: {
3766
- minWidth: string;
3767
- border: string;
3768
3813
  backgroundColor: string;
3769
- color: any;
3770
3814
  '& span': {
3815
+ color: any;
3771
3816
  fontWeight: string;
3772
3817
  };
3773
3818
  '& button': {
@@ -3796,15 +3841,15 @@ declare const _default: {
3796
3841
  alignSelf: string;
3797
3842
  display: string;
3798
3843
  width: string;
3844
+ color: string;
3845
+ border: string;
3799
3846
  };
3800
3847
  healthyStatusBadge: {
3801
- minWidth: string;
3802
- border: string;
3803
- backgroundColor: string;
3804
- color: string;
3805
3848
  '& span': {
3849
+ color: any;
3806
3850
  fontWeight: string;
3807
3851
  };
3852
+ backgroundColor: string;
3808
3853
  '& button': {
3809
3854
  alignSelf: string;
3810
3855
  p: string;
@@ -3831,13 +3876,13 @@ declare const _default: {
3831
3876
  alignSelf: string;
3832
3877
  display: string;
3833
3878
  width: string;
3879
+ color: string;
3880
+ border: string;
3834
3881
  };
3835
3882
  secondaryStatusBadge: {
3836
- minWidth: string;
3837
- border: string;
3838
3883
  backgroundColor: string;
3839
- color: any;
3840
3884
  '& span': {
3885
+ color: any;
3841
3886
  fontWeight: string;
3842
3887
  };
3843
3888
  '& button': {
@@ -3866,6 +3911,8 @@ declare const _default: {
3866
3911
  alignSelf: string;
3867
3912
  display: string;
3868
3913
  width: string;
3914
+ color: string;
3915
+ border: string;
3869
3916
  };
3870
3917
  badgeDeleteButton: {
3871
3918
  borderRadius: string;
@@ -3936,8 +3983,8 @@ declare const _default: {
3936
3983
  removableBadge: {
3937
3984
  border: string;
3938
3985
  backgroundColor: string;
3939
- color: any;
3940
3986
  '& span': {
3987
+ color: any;
3941
3988
  fontWeight: string;
3942
3989
  };
3943
3990
  '& button': {
@@ -3966,11 +4013,12 @@ declare const _default: {
3966
4013
  alignSelf: string;
3967
4014
  display: string;
3968
4015
  width: string;
4016
+ color: string;
3969
4017
  };
3970
4018
  invertedRemovableBadge: {
3971
4019
  backgroundColor: string;
3972
- color: string;
3973
4020
  '& span': {
4021
+ color: string;
3974
4022
  fontWeight: string;
3975
4023
  };
3976
4024
  '& button': {
@@ -3999,6 +4047,7 @@ declare const _default: {
3999
4047
  alignSelf: string;
4000
4048
  display: string;
4001
4049
  width: string;
4050
+ color: string;
4002
4051
  };
4003
4052
  errorCalloutBadge: {
4004
4053
  backgroundColor: string;
package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts CHANGED
@@ -31,6 +31,10 @@ export declare const badgeDeleteButton: {
31
31
  alignSelf: string;
32
32
  };
33
33
  export declare const badges: {
34
+ dataTableBadge: {
35
+ minWidth: string;
36
+ border: string;
37
+ };
34
38
  baseBadge: {
35
39
  '& span': {
36
40
  fontWeight: string;
@@ -97,8 +101,8 @@ export declare const badges: {
97
101
  };
98
102
  primary: {
99
103
  backgroundColor: string;
100
- color: any;
101
104
  '& span': {
105
+ color: any;
102
106
  fontWeight: string;
103
107
  };
104
108
  '& button': {
@@ -127,6 +131,7 @@ export declare const badges: {
127
131
  alignSelf: string;
128
132
  display: string;
129
133
  width: string;
134
+ color: string;
130
135
  };
131
136
  countBadge: {
132
137
  backgroundColor: string;
@@ -164,8 +169,8 @@ export declare const badges: {
164
169
  };
165
170
  countNeutral: {
166
171
  backgroundColor: string;
167
- color: any;
168
172
  '& span': {
173
+ color: any;
169
174
  fontWeight: string;
170
175
  };
171
176
  '& button': {
@@ -194,11 +199,12 @@ export declare const badges: {
194
199
  alignSelf: string;
195
200
  display: string;
196
201
  width: string;
202
+ color: string;
197
203
  };
198
204
  secondary: {
199
205
  backgroundColor: string;
200
- color: any;
201
206
  '& span': {
207
+ color: any;
202
208
  fontWeight: string;
203
209
  };
204
210
  '& button': {
@@ -227,13 +233,14 @@ export declare const badges: {
227
233
  alignSelf: string;
228
234
  display: string;
229
235
  width: string;
236
+ color: string;
230
237
  };
231
238
  success: {
232
- backgroundColor: string;
233
- color: string;
234
239
  '& span': {
240
+ color: any;
235
241
  fontWeight: string;
236
242
  };
243
+ backgroundColor: string;
237
244
  '& button': {
238
245
  alignSelf: string;
239
246
  p: string;
@@ -260,11 +267,12 @@ export declare const badges: {
260
267
  alignSelf: string;
261
268
  display: string;
262
269
  width: string;
270
+ color: string;
263
271
  };
264
272
  danger: {
265
273
  backgroundColor: string;
266
- color: any;
267
274
  '& span': {
275
+ color: any;
268
276
  fontWeight: string;
269
277
  };
270
278
  '& button': {
@@ -293,11 +301,12 @@ export declare const badges: {
293
301
  alignSelf: string;
294
302
  display: string;
295
303
  width: string;
304
+ color: string;
296
305
  };
297
306
  warning: {
298
307
  backgroundColor: string;
299
- color: any;
300
308
  '& span': {
309
+ color: any;
301
310
  fontWeight: string;
302
311
  };
303
312
  '& button': {
@@ -326,11 +335,12 @@ export declare const badges: {
326
335
  alignSelf: string;
327
336
  display: string;
328
337
  width: string;
338
+ color: string;
329
339
  };
330
340
  dark: {
331
341
  backgroundColor: string;
332
- color: string;
333
342
  '& span': {
343
+ color: string;
334
344
  fontWeight: string;
335
345
  };
336
346
  '& button': {
@@ -359,11 +369,12 @@ export declare const badges: {
359
369
  alignSelf: string;
360
370
  display: string;
361
371
  width: string;
372
+ color: string;
362
373
  };
363
374
  info: {
364
375
  backgroundColor: string;
365
- color: string;
366
376
  '& span': {
377
+ color: string;
367
378
  fontWeight: string;
368
379
  };
369
380
  '& button': {
@@ -392,6 +403,7 @@ export declare const badges: {
392
403
  alignSelf: string;
393
404
  display: string;
394
405
  width: string;
406
+ color: string;
395
407
  };
396
408
  selectedItemBadge: {
397
409
  backgroundColor: string;
@@ -428,6 +440,41 @@ export declare const badges: {
428
440
  width: string;
429
441
  color: string;
430
442
  };
443
+ selected: {
444
+ backgroundColor: string;
445
+ '& span': {
446
+ color: any;
447
+ fontWeight: string;
448
+ };
449
+ '& button': {
450
+ alignSelf: string;
451
+ p: string;
452
+ bg: string;
453
+ '&.is-hovered': {
454
+ bg: string;
455
+ '& svg': {
456
+ path: {
457
+ fill: string;
458
+ };
459
+ };
460
+ };
461
+ };
462
+ '& svg': {
463
+ path: {
464
+ fill: string;
465
+ };
466
+ };
467
+ alignItems: string;
468
+ justifyContent: string;
469
+ padding: string;
470
+ borderRadius: string;
471
+ fontSize: string;
472
+ alignSelf: string;
473
+ display: string;
474
+ width: string;
475
+ color: string;
476
+ border: string;
477
+ };
431
478
  readOnlyBadge: {
432
479
  border: string;
433
480
  borderColor: string;
@@ -503,11 +550,9 @@ export declare const badges: {
503
550
  color: string;
504
551
  };
505
552
  activeStatusBadge: {
506
- minWidth: string;
507
- border: string;
508
553
  backgroundColor: string;
509
- color: any;
510
554
  '& span': {
555
+ color: any;
511
556
  fontWeight: string;
512
557
  };
513
558
  '& button': {
@@ -536,13 +581,13 @@ export declare const badges: {
536
581
  alignSelf: string;
537
582
  display: string;
538
583
  width: string;
584
+ color: string;
585
+ border: string;
539
586
  };
540
587
  warningStatusBadge: {
541
- minWidth: string;
542
- border: string;
543
588
  backgroundColor: string;
544
- color: any;
545
589
  '& span': {
590
+ color: any;
546
591
  fontWeight: string;
547
592
  };
548
593
  '& button': {
@@ -571,13 +616,13 @@ export declare const badges: {
571
616
  alignSelf: string;
572
617
  display: string;
573
618
  width: string;
619
+ color: string;
620
+ border: string;
574
621
  };
575
622
  criticalStatusBadge: {
576
- minWidth: string;
577
- border: string;
578
623
  backgroundColor: string;
579
- color: any;
580
624
  '& span': {
625
+ color: any;
581
626
  fontWeight: string;
582
627
  };
583
628
  '& button': {
@@ -606,15 +651,15 @@ export declare const badges: {
606
651
  alignSelf: string;
607
652
  display: string;
608
653
  width: string;
654
+ color: string;
655
+ border: string;
609
656
  };
610
657
  healthyStatusBadge: {
611
- minWidth: string;
612
- border: string;
613
- backgroundColor: string;
614
- color: string;
615
658
  '& span': {
659
+ color: any;
616
660
  fontWeight: string;
617
661
  };
662
+ backgroundColor: string;
618
663
  '& button': {
619
664
  alignSelf: string;
620
665
  p: string;
@@ -641,13 +686,13 @@ export declare const badges: {
641
686
  alignSelf: string;
642
687
  display: string;
643
688
  width: string;
689
+ color: string;
690
+ border: string;
644
691
  };
645
692
  secondaryStatusBadge: {
646
- minWidth: string;
647
- border: string;
648
693
  backgroundColor: string;
649
- color: any;
650
694
  '& span': {
695
+ color: any;
651
696
  fontWeight: string;
652
697
  };
653
698
  '& button': {
@@ -676,6 +721,8 @@ export declare const badges: {
676
721
  alignSelf: string;
677
722
  display: string;
678
723
  width: string;
724
+ color: string;
725
+ border: string;
679
726
  };
680
727
  badgeDeleteButton: {
681
728
  borderRadius: string;
@@ -746,8 +793,8 @@ export declare const badges: {
746
793
  removableBadge: {
747
794
  border: string;
748
795
  backgroundColor: string;
749
- color: any;
750
796
  '& span': {
797
+ color: any;
751
798
  fontWeight: string;
752
799
  };
753
800
  '& button': {
@@ -776,11 +823,12 @@ export declare const badges: {
776
823
  alignSelf: string;
777
824
  display: string;
778
825
  width: string;
826
+ color: string;
779
827
  };
780
828
  invertedRemovableBadge: {
781
829
  backgroundColor: string;
782
- color: string;
783
830
  '& span': {
831
+ color: string;
784
832
  fontWeight: string;
785
833
  };
786
834
  '& button': {
@@ -809,6 +857,7 @@ export declare const badges: {
809
857
  alignSelf: string;
810
858
  display: string;
811
859
  width: string;
860
+ color: string;
812
861
  };
813
862
  errorCalloutBadge: {
814
863
  backgroundColor: string;
package/lib/cjs/styles/themes/next-gen/variants/badges.js CHANGED
@@ -45,7 +45,7 @@ var badgeIconStyle = {
45
45
  var baseBadge = _objectSpread({
46
46
  alignItems: 'center',
47
47
  justifyContent: 'center',
48
- padding: '.25em .4em',
48
+ padding: '2.81px 4px',
49
49
  borderRadius: '4px',
50
50
  fontSize: 'unset',
51
51
  alignSelf: 'flex-start',
@@ -55,31 +55,45 @@ var baseBadge = _objectSpread({
55
55
  }, badgeIconStyle);
56
56
  var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
57
57
  backgroundColor: '#EAF2FD !important',
58
- color: _onyxTokens.astroTokens.color.blue[600]
58
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
59
+ color: _onyxTokens.astroTokens.color.blue[600]
60
+ })
59
61
  });
60
62
  var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
61
63
  backgroundColor: '#f6f8fa !important',
62
- color: _onyxTokens.astroTokens.color.gray[900]
64
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
65
+ color: _onyxTokens.astroTokens.color.gray[900]
66
+ })
63
67
  });
64
68
  var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
65
- backgroundColor: '#D3EDDF !important',
66
- color: 'success.dark'
69
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
70
+ color: _onyxTokens.astroTokens.color.green[800]
71
+ }),
72
+ backgroundColor: '#D3EDDF !important'
67
73
  });
68
74
  var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
69
75
  backgroundColor: '#F8D8D5 !important',
70
- color: _onyxTokens.astroTokens.color.red[700]
76
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
77
+ color: _onyxTokens.astroTokens.color.red[700]
78
+ })
71
79
  });
72
80
  var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
73
81
  backgroundColor: '#FFF1DA !important',
74
- color: _onyxTokens.astroTokens.color.yellow[800]
82
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
83
+ color: _onyxTokens.astroTokens.color.yellow[800]
84
+ })
75
85
  });
76
86
  var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
77
87
  backgroundColor: 'black !important',
78
- color: 'white'
88
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
89
+ color: 'white'
90
+ })
79
91
  });
80
92
  var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
81
93
  backgroundColor: '#EAF2FD !important',
82
- color: 'darkblue'
94
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
95
+ color: 'darkblue'
96
+ })
83
97
  });
84
98
  var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
85
99
  backgroundColor: '#eaf2fd !important',
@@ -123,11 +137,21 @@ var dataTableBadge = {
123
137
  minWidth: '100px',
124
138
  border: 'none'
125
139
  };
126
- var activeStatusBadge = _objectSpread(_objectSpread({}, primary), dataTableBadge);
127
- var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadge);
128
- var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
129
- var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
130
- var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
140
+ var activeStatusBadge = _objectSpread({
141
+ border: 'none'
142
+ }, primary);
143
+ var warningStatusBadge = _objectSpread({
144
+ border: 'none'
145
+ }, warning);
146
+ var criticalStatusBadge = _objectSpread({
147
+ border: 'none'
148
+ }, danger);
149
+ var healthyStatusBadge = _objectSpread({
150
+ border: 'none'
151
+ }, success);
152
+ var secondaryStatusBadge = _objectSpread({
153
+ border: 'none'
154
+ }, secondary);
131
155
  var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
132
156
  backgroundColor: '#455469 !important',
133
157
  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -140,6 +164,7 @@ var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
140
164
  border: 'none'
141
165
  });
142
166
  var badges = exports.badges = {
167
+ dataTableBadge: dataTableBadge,
143
168
  baseBadge: _objectSpread({}, baseBadge),
144
169
  "default": _objectSpread({}, baseBadge),
145
170
  primary: primary,
@@ -152,6 +177,7 @@ var badges = exports.badges = {
152
177
  dark: dark,
153
178
  info: info,
154
179
  selectedItemBadge: selectedItemBadge,
180
+ selected: activeStatusBadge,
155
181
  readOnlyBadge: readOnlyBadge,
156
182
  readOnlyFieldBadge: readOnlyFieldBadge,
157
183
  activeStatusBadge: activeStatusBadge,
package/lib/components/Badge/Badge.stories.js CHANGED
@@ -214,21 +214,23 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
214
214
  };
215
215
  export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
216
216
  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
217
- return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({}, args, {
217
+ return ___EmotionJSX(Box, {
218
+ gap: "md"
219
+ }, ___EmotionJSX(Badge, _extends({}, args, {
218
220
  variant: "criticalStatusBadge",
219
- label: "Critical",
220
- mb: "lg"
221
+ label: "Critical"
221
222
  })), ___EmotionJSX(Badge, _extends({}, args, {
222
223
  variant: "warningStatusBadge",
223
- label: "Warning",
224
- mb: "lg"
224
+ label: "Warning"
225
225
  })), ___EmotionJSX(Badge, _extends({}, args, {
226
226
  variant: "healthyStatusBadge",
227
- label: "Healthy",
228
- mb: "lg"
227
+ label: "Healthy"
229
228
  })), ___EmotionJSX(Badge, _extends({}, args, {
230
229
  variant: "activeStatusBadge",
231
230
  label: "Active"
231
+ })), ___EmotionJSX(Badge, _extends({}, args, {
232
+ variant: "selected",
233
+ label: "Selected"
232
234
  })));
233
235
  };
234
236
  StatusBadgeVariants.parameters = {
package/lib/components/Badge/Badge.styles.js CHANGED
@@ -152,6 +152,7 @@ var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
152
152
  color: 'white'
153
153
  }
154
154
  });
155
+ var selected = convenienceDefault;
155
156
  var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
156
157
  backgroundColor: '#FFF !important',
157
158
  border: 'solid 1px',
@@ -265,6 +266,7 @@ export default {
265
266
  itemBadgeWithSlot: itemBadgeWithSlot,
266
267
  multivaluesBadge: multivaluesBadge,
267
268
  readOnlyBadge: readOnlyBadge,
269
+ selected: selected,
268
270
  selectedItemBadge: selectedItemBadge,
269
271
  invertedBadgeDeleteButton: invertedBadgeDeleteButton,
270
272
  successCalloutBadge: successCalloutBadge,
package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js CHANGED
@@ -11,35 +11,51 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
11
11
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
12
12
  import { astroTokensDark } from '@pingux/onyx-tokens';
13
13
  var baseBadge = {
14
- color: 'badge.textColor'
14
+ '& span': {
15
+ color: 'badge.textColor'
16
+ }
15
17
  };
16
18
  var primary = {
17
19
  backgroundColor: '#1a73e8 !important',
18
- color: 'black'
20
+ '& span': {
21
+ color: 'black'
22
+ }
19
23
  };
20
24
  var secondary = {
21
25
  backgroundColor: '#324054 !important',
22
- color: astroTokensDark.color.gray[100]
26
+ '& span': {
27
+ color: astroTokensDark.color.gray[100]
28
+ }
23
29
  };
24
30
  var success = {
25
31
  backgroundColor: '#22a75f !important',
26
- color: 'black'
32
+ '& span': {
33
+ color: 'black'
34
+ }
27
35
  };
28
36
  var danger = {
29
37
  backgroundColor: '#da3a2b !important',
30
- color: 'black'
38
+ '& span': {
39
+ color: 'black'
40
+ }
31
41
  };
32
42
  var warning = {
33
43
  backgroundColor: '#ffb946 !important',
34
- color: 'black'
44
+ '& span': {
45
+ color: 'black'
46
+ }
35
47
  };
36
48
  var info = {
37
49
  backgroundColor: '#324054 !important',
38
- color: astroTokensDark.color.gray[100]
50
+ '& span': {
51
+ color: astroTokensDark.color.gray[100]
52
+ }
39
53
  };
40
54
  var dark = {
41
55
  backgroundColor: '#c0c9d5 !important',
42
- color: astroTokensDark.color.gray[100]
56
+ '& span': {
57
+ color: astroTokensDark.color.gray[100]
58
+ }
43
59
  };
44
60
  var activeStatusBadge = _objectSpread({}, primary);
45
61
  var warningStatusBadge = _objectSpread({}, warning);
@@ -97,6 +113,7 @@ var badges = {
97
113
  info: info,
98
114
  dark: dark,
99
115
  activeStatusBadge: activeStatusBadge,
116
+ selected: activeStatusBadge,
100
117
  warningStatusBadge: warningStatusBadge,
101
118
  criticalStatusBadge: criticalStatusBadge,
102
119
  healthyStatusBadge: healthyStatusBadge,
package/lib/styles/themes/next-gen/variants/badges.js CHANGED
@@ -38,7 +38,7 @@ var badgeIconStyle = {
38
38
  var baseBadge = _objectSpread({
39
39
  alignItems: 'center',
40
40
  justifyContent: 'center',
41
- padding: '.25em .4em',
41
+ padding: '2.81px 4px',
42
42
  borderRadius: '4px',
43
43
  fontSize: 'unset',
44
44
  alignSelf: 'flex-start',
@@ -48,31 +48,45 @@ var baseBadge = _objectSpread({
48
48
  }, badgeIconStyle);
49
49
  var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
50
50
  backgroundColor: '#EAF2FD !important',
51
- color: astroTokens.color.blue[600]
51
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
52
+ color: astroTokens.color.blue[600]
53
+ })
52
54
  });
53
55
  var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
54
56
  backgroundColor: '#f6f8fa !important',
55
- color: astroTokens.color.gray[900]
57
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
58
+ color: astroTokens.color.gray[900]
59
+ })
56
60
  });
57
61
  var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
58
- backgroundColor: '#D3EDDF !important',
59
- color: 'success.dark'
62
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
63
+ color: astroTokens.color.green[800]
64
+ }),
65
+ backgroundColor: '#D3EDDF !important'
60
66
  });
61
67
  var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
62
68
  backgroundColor: '#F8D8D5 !important',
63
- color: astroTokens.color.red[700]
69
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
70
+ color: astroTokens.color.red[700]
71
+ })
64
72
  });
65
73
  var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
66
74
  backgroundColor: '#FFF1DA !important',
67
- color: astroTokens.color.yellow[800]
75
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
76
+ color: astroTokens.color.yellow[800]
77
+ })
68
78
  });
69
79
  var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
70
80
  backgroundColor: 'black !important',
71
- color: 'white'
81
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
82
+ color: 'white'
83
+ })
72
84
  });
73
85
  var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
74
86
  backgroundColor: '#EAF2FD !important',
75
- color: 'darkblue'
87
+ '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
88
+ color: 'darkblue'
89
+ })
76
90
  });
77
91
  var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
78
92
  backgroundColor: '#eaf2fd !important',
@@ -116,11 +130,21 @@ var dataTableBadge = {
116
130
  minWidth: '100px',
117
131
  border: 'none'
118
132
  };
119
- var activeStatusBadge = _objectSpread(_objectSpread({}, primary), dataTableBadge);
120
- var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadge);
121
- var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
122
- var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
123
- var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
133
+ var activeStatusBadge = _objectSpread({
134
+ border: 'none'
135
+ }, primary);
136
+ var warningStatusBadge = _objectSpread({
137
+ border: 'none'
138
+ }, warning);
139
+ var criticalStatusBadge = _objectSpread({
140
+ border: 'none'
141
+ }, danger);
142
+ var healthyStatusBadge = _objectSpread({
143
+ border: 'none'
144
+ }, success);
145
+ var secondaryStatusBadge = _objectSpread({
146
+ border: 'none'
147
+ }, secondary);
124
148
  var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
125
149
  backgroundColor: '#455469 !important',
126
150
  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -133,6 +157,7 @@ var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
133
157
  border: 'none'
134
158
  });
135
159
  export var badges = {
160
+ dataTableBadge: dataTableBadge,
136
161
  baseBadge: _objectSpread({}, baseBadge),
137
162
  "default": _objectSpread({}, baseBadge),
138
163
  primary: primary,
@@ -145,6 +170,7 @@ export var badges = {
145
170
  dark: dark,
146
171
  info: info,
147
172
  selectedItemBadge: selectedItemBadge,
173
+ selected: activeStatusBadge,
148
174
  readOnlyBadge: readOnlyBadge,
149
175
  readOnlyFieldBadge: readOnlyFieldBadge,
150
176
  activeStatusBadge: activeStatusBadge,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.186.0-alpha.0",
3
+ "version": "2.187.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",