@indico-data/design-system 3.22.0 → 3.22.1

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 (4) hide show
  1. package/lib/index.css +24 -6
  2. package/lib/index.esm.css +24 -6
  3. package/package.json +1 -1
  4. package/src/components/pill/styles/Pill.scss +35 -7
package/lib/index.css CHANGED
@@ -6500,21 +6500,21 @@ body div[class*=select__single-value] {
6500
6500
  border-radius: var(--pf-border-radius-full);
6501
6501
  }
6502
6502
  .pill--sm {
6503
- padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
6503
+ padding: var(--pf-spacing-micro) var(--pf-spacing-xs);
6504
6504
  font-size: var(--pf-font-size-sm);
6505
6505
  font-weight: var(--pf-font-weight-semibold);
6506
6506
  line-height: 16px;
6507
6507
  gap: var(--pf-spacing-xxs);
6508
6508
  }
6509
6509
  .pill--md {
6510
- padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
6510
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
6511
6511
  font-size: var(--pf-font-size-md);
6512
6512
  font-weight: var(--pf-font-weight-medium);
6513
6513
  line-height: 20px;
6514
6514
  gap: var(--pf-spacing-xs);
6515
6515
  }
6516
6516
  .pill--lg {
6517
- padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
6517
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
6518
6518
  font-size: var(--pf-font-size-md);
6519
6519
  font-weight: var(--pf-font-weight-medium);
6520
6520
  line-height: 20px;
@@ -6523,6 +6523,15 @@ body div[class*=select__single-value] {
6523
6523
  .pill--lg.pill--badge {
6524
6524
  border-radius: var(--pf-border-radius-md);
6525
6525
  }
6526
+ .pill--sm.pill--pill {
6527
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
6528
+ }
6529
+ .pill--md.pill--pill {
6530
+ padding: var(--pf-spacing-micro) var(--pf-spacing-md);
6531
+ }
6532
+ .pill--lg.pill--pill {
6533
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
6534
+ }
6526
6535
  .pill--icon-only.pill--sm {
6527
6536
  padding: var(--pf-spacing-xxs);
6528
6537
  }
@@ -6533,16 +6542,25 @@ body div[class*=select__single-value] {
6533
6542
  padding: var(--pf-spacing-sm);
6534
6543
  }
6535
6544
  .pill--closeable.pill--sm {
6536
- padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6545
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-xs);
6537
6546
  }
6538
6547
  .pill--closeable.pill--md {
6539
- padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
6548
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6540
6549
  gap: var(--pf-spacing-xxs);
6541
6550
  }
6542
6551
  .pill--closeable.pill--lg {
6543
- padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
6552
+ padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-md);
6544
6553
  gap: var(--pf-spacing-xxs);
6545
6554
  }
6555
+ .pill--closeable.pill--pill.pill--sm {
6556
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6557
+ }
6558
+ .pill--closeable.pill--pill.pill--md {
6559
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
6560
+ }
6561
+ .pill--closeable.pill--pill.pill--lg {
6562
+ padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
6563
+ }
6546
6564
  .pill--solid-red {
6547
6565
  background-color: var(--pf-pill-solid-red-bg);
6548
6566
  color: var(--pf-pill-solid-red-text);
package/lib/index.esm.css CHANGED
@@ -6500,21 +6500,21 @@ body div[class*=select__single-value] {
6500
6500
  border-radius: var(--pf-border-radius-full);
6501
6501
  }
6502
6502
  .pill--sm {
6503
- padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
6503
+ padding: var(--pf-spacing-micro) var(--pf-spacing-xs);
6504
6504
  font-size: var(--pf-font-size-sm);
6505
6505
  font-weight: var(--pf-font-weight-semibold);
6506
6506
  line-height: 16px;
6507
6507
  gap: var(--pf-spacing-xxs);
6508
6508
  }
6509
6509
  .pill--md {
6510
- padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
6510
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
6511
6511
  font-size: var(--pf-font-size-md);
6512
6512
  font-weight: var(--pf-font-weight-medium);
6513
6513
  line-height: 20px;
6514
6514
  gap: var(--pf-spacing-xs);
6515
6515
  }
6516
6516
  .pill--lg {
6517
- padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
6517
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
6518
6518
  font-size: var(--pf-font-size-md);
6519
6519
  font-weight: var(--pf-font-weight-medium);
6520
6520
  line-height: 20px;
@@ -6523,6 +6523,15 @@ body div[class*=select__single-value] {
6523
6523
  .pill--lg.pill--badge {
6524
6524
  border-radius: var(--pf-border-radius-md);
6525
6525
  }
6526
+ .pill--sm.pill--pill {
6527
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
6528
+ }
6529
+ .pill--md.pill--pill {
6530
+ padding: var(--pf-spacing-micro) var(--pf-spacing-md);
6531
+ }
6532
+ .pill--lg.pill--pill {
6533
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
6534
+ }
6526
6535
  .pill--icon-only.pill--sm {
6527
6536
  padding: var(--pf-spacing-xxs);
6528
6537
  }
@@ -6533,16 +6542,25 @@ body div[class*=select__single-value] {
6533
6542
  padding: var(--pf-spacing-sm);
6534
6543
  }
6535
6544
  .pill--closeable.pill--sm {
6536
- padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6545
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-xs);
6537
6546
  }
6538
6547
  .pill--closeable.pill--md {
6539
- padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
6548
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6540
6549
  gap: var(--pf-spacing-xxs);
6541
6550
  }
6542
6551
  .pill--closeable.pill--lg {
6543
- padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
6552
+ padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-md);
6544
6553
  gap: var(--pf-spacing-xxs);
6545
6554
  }
6555
+ .pill--closeable.pill--pill.pill--sm {
6556
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
6557
+ }
6558
+ .pill--closeable.pill--pill.pill--md {
6559
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
6560
+ }
6561
+ .pill--closeable.pill--pill.pill--lg {
6562
+ padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
6563
+ }
6546
6564
  .pill--solid-red {
6547
6565
  background-color: var(--pf-pill-solid-red-bg);
6548
6566
  color: var(--pf-pill-solid-red-text);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.22.0",
3
+ "version": "3.22.1",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/pill/styles/Pill.scss CHANGED
@@ -18,9 +18,9 @@ $pill-variants: 'solid', 'outline';
18
18
  border-radius: var(--pf-border-radius-full);
19
19
  }
20
20
 
21
- // ------- Sizes -------
21
+ // ------- Default Sizes -------
22
22
  &--sm {
23
- padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
23
+ padding: var(--pf-spacing-micro) var(--pf-spacing-xs);
24
24
  font-size: var(--pf-font-size-sm);
25
25
  font-weight: var(--pf-font-weight-semibold);
26
26
  line-height: 16px;
@@ -28,7 +28,7 @@ $pill-variants: 'solid', 'outline';
28
28
  }
29
29
 
30
30
  &--md {
31
- padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
31
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
32
32
  font-size: var(--pf-font-size-md);
33
33
  font-weight: var(--pf-font-weight-medium);
34
34
  line-height: 20px;
@@ -36,7 +36,7 @@ $pill-variants: 'solid', 'outline';
36
36
  }
37
37
 
38
38
  &--lg {
39
- padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
39
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
40
40
  font-size: var(--pf-font-size-md);
41
41
  font-weight: var(--pf-font-weight-medium);
42
42
  line-height: 20px;
@@ -48,6 +48,19 @@ $pill-variants: 'solid', 'outline';
48
48
  border-radius: var(--pf-border-radius-md);
49
49
  }
50
50
 
51
+ // Pill type has wider horizontal padding than badge
52
+ &--sm#{&}--pill {
53
+ padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
54
+ }
55
+
56
+ &--md#{&}--pill {
57
+ padding: var(--pf-spacing-micro) var(--pf-spacing-md);
58
+ }
59
+
60
+ &--lg#{&}--pill {
61
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
62
+ }
63
+
51
64
  // ------- Icon-only (special padding) -------
52
65
  &--icon-only {
53
66
  &.pill--sm {
@@ -63,20 +76,35 @@ $pill-variants: 'solid', 'outline';
63
76
  }
64
77
  }
65
78
 
66
- // ------- Closeable (asymmetric padding) -------
79
+ // ------- Closeable (asymmetric padding, badge defaults) -------
67
80
  &--closeable {
81
+ &.pill--sm {
82
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-xs);
83
+ }
84
+
85
+ &.pill--md {
86
+ padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
87
+ gap: var(--pf-spacing-xxs);
88
+ }
89
+
90
+ &.pill--lg {
91
+ padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-md);
92
+ gap: var(--pf-spacing-xxs);
93
+ }
94
+ }
95
+
96
+ // Pill type closeable has wider left padding
97
+ &--closeable#{&}--pill {
68
98
  &.pill--sm {
69
99
  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
70
100
  }
71
101
 
72
102
  &.pill--md {
73
103
  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
74
- gap: var(--pf-spacing-xxs);
75
104
  }
76
105
 
77
106
  &.pill--lg {
78
107
  padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
79
- gap: var(--pf-spacing-xxs);
80
108
  }
81
109
  }
82
110