@bi-digital/css 0.11.10 → 0.11.11

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 (35) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +109 -111
  3. package/dist/components/avatar.css +45 -47
  4. package/dist/components/badge.css +88 -88
  5. package/dist/components/button.css +117 -117
  6. package/dist/components/card.css +268 -282
  7. package/dist/components/checkbox-subsection.css +15 -15
  8. package/dist/components/chip.css +146 -146
  9. package/dist/components/details.css +88 -92
  10. package/dist/components/dialog.css +99 -97
  11. package/dist/components/dropdown.css +23 -25
  12. package/dist/components/field.css +204 -202
  13. package/dist/components/fieldset.css +20 -22
  14. package/dist/components/filter-group.css +80 -80
  15. package/dist/components/footer.css +110 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +184 -186
  18. package/dist/components/label.css +17 -17
  19. package/dist/components/link.css +47 -47
  20. package/dist/components/logo.css +32 -34
  21. package/dist/components/navbar.css +46 -50
  22. package/dist/components/pagination.css +29 -27
  23. package/dist/components/popover.css +40 -40
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +23 -25
  29. package/dist/components/tabs.css +109 -113
  30. package/dist/components/tooltip.css +30 -30
  31. package/dist/components/validation-message.css +9 -9
  32. package/dist/components.css +1996 -2037
  33. package/dist/index.css +4 -2
  34. package/dist/salesforce.css +1996 -2037
  35. package/package.json +2 -2
package/dist/baseline.css CHANGED
@@ -3,6 +3,8 @@ body, :host {
3
3
  line-height: 1.5;
4
4
  }
5
5
 
6
- :is(html:has(bi-navbar), html:has(bi-in-page-links)) {
7
- scroll-padding-top: var(--bi-layout-navbar-height);
6
+ html {
7
+ &:has(bi-navbar), &:has(bi-in-page-links) {
8
+ scroll-padding-top: var(--bi-layout-navbar-height);
9
+ }
8
10
  }
package/dist/components/alert.css CHANGED
@@ -6,15 +6,13 @@
6
6
  --bic-alert-icon-size: var(--bi-icon-medium);
7
7
  --bic-alert-gap: var(--bi-scale-1x);
8
8
  --bic-alert-padding: var(--bi-scale-2x);
9
- }
10
9
 
11
- .bi-alert[data-dark="true"] {
12
- --bic-alert-background: var(--bi-primary-95);
13
- --bic-alert-border-color: var(--bi-primary-85);
14
- --bic-alert-color: var(--bi-primary-5);
15
- }
10
+ &[data-dark="true"] {
11
+ --bic-alert-background: var(--bi-primary-95);
12
+ --bic-alert-border-color: var(--bi-primary-85);
13
+ --bic-alert-color: var(--bi-primary-5);
14
+ }
16
15
 
17
- .bi-alert {
18
16
  background: var(--bic-alert-background);
19
17
  color: var(--bic-alert-color);
20
18
  border: var(--bic-alert-border-width) solid var(--bic-alert-border-color);
@@ -25,109 +23,109 @@
25
23
  width: fit-content;
26
24
  display: grid;
27
25
  position: relative;
28
- }
29
-
30
- .bi-alert > svg {
31
- font-size: var(--bic-alert-icon-size);
32
- }
33
-
34
- .bi-alert:has( > svg:first-child) {
35
- grid-template-columns: auto 1fr;
36
- }
37
-
38
- .bi-alert:has( > .bi-button:last-child) {
39
- grid-template-columns: 1fr auto;
40
- }
41
-
42
- .bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
43
- grid-template-columns: auto 1fr auto;
44
- }
45
-
46
- .bi-alert > .bi-button {
47
- margin: calc(var(--bic-alert-padding) * -1);
48
- grid-area: 1 / 3;
49
- margin-left: 0;
50
- }
51
-
52
- .bi-alert[data-size="small"] {
53
- --bic-alert-icon-size: var(--bi-icon-small);
54
- --bic-alert-padding: var(--bi-scale-1x);
55
- --bic-alert-gap: var(--bi-scale-1x);
56
- }
57
-
58
- .bi-alert[data-size="large"] {
59
- --bic-alert-padding: var(--bi-scale-3x);
60
- --bic-alert-gap: var(--bi-scale-2x);
61
- }
62
-
63
- .bi-alert[data-variant="success"] {
64
- --bic-alert-background: var(--bi-success-5);
65
- --bic-alert-border-color: var(--bi-success-10);
66
- --bic-alert-color: var(--bi-success-90);
67
- }
68
26
 
69
- .bi-alert[data-variant="success"][data-dark="true"] {
70
- --bic-alert-background: var(--bi-success-95);
71
- --bic-alert-border-color: var(--bi-success-85);
72
- --bic-alert-color: var(--bi-success-5);
73
- }
74
-
75
- .bi-alert[data-variant="alert"] {
76
- --bic-alert-background: var(--bi-alert-10);
77
- --bic-alert-border-color: var(--bi-alert-15);
78
- --bic-alert-color: var(--bi-alert-90);
79
- }
80
-
81
- .bi-alert[data-variant="alert"][data-dark="true"] {
82
- --bic-alert-background: var(--bi-alert-95);
83
- --bic-alert-border-color: var(--bi-alert-85);
84
- --bic-alert-color: var(--bi-alert-5);
85
- }
86
-
87
- .bi-alert[data-variant="warning"] {
88
- --bic-alert-background: var(--bi-warning-10);
89
- --bic-alert-border-color: var(--bi-warning-15);
90
- --bic-alert-color: var(--bi-warning-90);
91
- }
92
-
93
- .bi-alert[data-variant="warning"][data-dark="true"] {
94
- --bic-alert-background: var(--bi-warning-95);
95
- --bic-alert-border-color: var(--bi-warning-85);
96
- --bic-alert-color: var(--bi-warning-5);
97
- }
98
-
99
- .bi-alert[data-variant="info"] {
100
- --bic-alert-background: var(--bi-info-5);
101
- --bic-alert-border-color: var(--bi-info-10);
102
- --bic-alert-color: var(--bi-info-90);
103
- }
104
-
105
- .bi-alert[data-variant="info"][data-dark="true"] {
106
- --bic-alert-background: var(--bi-info-90);
107
- --bic-alert-border-color: var(--bi-info-80);
108
- --bic-alert-color: var(--bi-info-10);
109
- }
110
-
111
- .bi-alert[data-variant="neutral"] {
112
- --bic-alert-background: var(--bi-neutral-10);
113
- --bic-alert-border-color: var(--bi-neutral-15);
114
- --bic-alert-color: var(--bi-neutral-95);
115
- }
116
-
117
- .bi-alert[data-variant="neutral"][data-dark="true"] {
118
- --bic-alert-background: var(--bi-neutral-90);
119
- --bic-alert-border-color: var(--bi-neutral-90);
120
- --bic-alert-color: var(--bi-neutral-30);
121
- }
122
-
123
- .bi-alert:has( > .bi-alert--footer) {
124
- width: 100%;
125
- }
126
-
127
- .bi-alert .bi-alert--footer {
128
- justify-content: flex-end;
129
- align-items: center;
130
- gap: var(--bic-alert-gap);
131
- grid-column: 1 / -1;
132
- display: flex;
27
+ & > svg {
28
+ font-size: var(--bic-alert-icon-size);
29
+ }
30
+
31
+ &:has( > svg:first-child) {
32
+ grid-template-columns: auto 1fr;
33
+ }
34
+
35
+ &:has( > .bi-button:last-child) {
36
+ grid-template-columns: 1fr auto;
37
+
38
+ &:has( > svg:first-child) {
39
+ grid-template-columns: auto 1fr auto;
40
+ }
41
+ }
42
+
43
+ & > .bi-button {
44
+ margin: calc(var(--bic-alert-padding) * -1);
45
+ grid-area: 1 / 3;
46
+ margin-left: 0;
47
+ }
48
+
49
+ &[data-size="small"] {
50
+ --bic-alert-icon-size: var(--bi-icon-small);
51
+ --bic-alert-padding: var(--bi-scale-1x);
52
+ --bic-alert-gap: var(--bi-scale-1x);
53
+ }
54
+
55
+ &[data-size="large"] {
56
+ --bic-alert-padding: var(--bi-scale-3x);
57
+ --bic-alert-gap: var(--bi-scale-2x);
58
+ }
59
+
60
+ &[data-variant="success"] {
61
+ --bic-alert-background: var(--bi-success-5);
62
+ --bic-alert-border-color: var(--bi-success-10);
63
+ --bic-alert-color: var(--bi-success-90);
64
+
65
+ &[data-dark="true"] {
66
+ --bic-alert-background: var(--bi-success-95);
67
+ --bic-alert-border-color: var(--bi-success-85);
68
+ --bic-alert-color: var(--bi-success-5);
69
+ }
70
+ }
71
+
72
+ &[data-variant="alert"] {
73
+ --bic-alert-background: var(--bi-alert-10);
74
+ --bic-alert-border-color: var(--bi-alert-15);
75
+ --bic-alert-color: var(--bi-alert-90);
76
+
77
+ &[data-dark="true"] {
78
+ --bic-alert-background: var(--bi-alert-95);
79
+ --bic-alert-border-color: var(--bi-alert-85);
80
+ --bic-alert-color: var(--bi-alert-5);
81
+ }
82
+ }
83
+
84
+ &[data-variant="warning"] {
85
+ --bic-alert-background: var(--bi-warning-10);
86
+ --bic-alert-border-color: var(--bi-warning-15);
87
+ --bic-alert-color: var(--bi-warning-90);
88
+
89
+ &[data-dark="true"] {
90
+ --bic-alert-background: var(--bi-warning-95);
91
+ --bic-alert-border-color: var(--bi-warning-85);
92
+ --bic-alert-color: var(--bi-warning-5);
93
+ }
94
+ }
95
+
96
+ &[data-variant="info"] {
97
+ --bic-alert-background: var(--bi-info-5);
98
+ --bic-alert-border-color: var(--bi-info-10);
99
+ --bic-alert-color: var(--bi-info-90);
100
+
101
+ &[data-dark="true"] {
102
+ --bic-alert-background: var(--bi-info-90);
103
+ --bic-alert-border-color: var(--bi-info-80);
104
+ --bic-alert-color: var(--bi-info-10);
105
+ }
106
+ }
107
+
108
+ &[data-variant="neutral"] {
109
+ --bic-alert-background: var(--bi-neutral-10);
110
+ --bic-alert-border-color: var(--bi-neutral-15);
111
+ --bic-alert-color: var(--bi-neutral-95);
112
+
113
+ &[data-dark="true"] {
114
+ --bic-alert-background: var(--bi-neutral-90);
115
+ --bic-alert-border-color: var(--bi-neutral-90);
116
+ --bic-alert-color: var(--bi-neutral-30);
117
+ }
118
+ }
119
+
120
+ &:has( > .bi-alert--footer) {
121
+ width: 100%;
122
+ }
123
+
124
+ & .bi-alert--footer {
125
+ justify-content: flex-end;
126
+ align-items: center;
127
+ gap: var(--bic-alert-gap);
128
+ grid-column: 1 / -1;
129
+ display: flex;
130
+ }
133
131
  }
package/dist/components/avatar.css CHANGED
@@ -3,14 +3,12 @@
3
3
  --bic-avatar-color: var(--bi-primary-90);
4
4
  --bic-avatar-size: var(--bi-scale-24x);
5
5
  --bic-avatar-font-size: 1.75rem;
6
- }
7
6
 
8
- .bi-avatar[data-dark="true"] {
9
- --bic-avatar-background-color: var(--bi-primary-85);
10
- --bic-avatar-color: var(--bi-primary-10);
11
- }
7
+ &[data-dark="true"] {
8
+ --bic-avatar-background-color: var(--bi-primary-85);
9
+ --bic-avatar-color: var(--bi-primary-10);
10
+ }
12
11
 
13
- .bi-avatar {
14
12
  border-radius: var(--bi-radius-full);
15
13
  background-color: var(--bic-avatar-background-color);
16
14
  color: var(--bic-avatar-color);
@@ -30,55 +28,55 @@
30
28
  text-decoration: none;
31
29
  display: flex;
32
30
  overflow: hidden;
33
- }
34
31
 
35
- .bi-avatar[data-color="info"] {
36
- --bic-avatar-background-color: var(--bi-info-10);
37
- --bic-avatar-color: var(--bi-info-90);
38
- }
32
+ &[data-color="info"] {
33
+ --bic-avatar-background-color: var(--bi-info-10);
34
+ --bic-avatar-color: var(--bi-info-90);
39
35
 
40
- .bi-avatar[data-color="info"][data-dark="true"] {
41
- --bic-avatar-background-color: var(--bi-info-85);
42
- --bic-avatar-color: var(--bi-info-10);
43
- }
36
+ &[data-dark="true"] {
37
+ --bic-avatar-background-color: var(--bi-info-85);
38
+ --bic-avatar-color: var(--bi-info-10);
39
+ }
40
+ }
44
41
 
45
- .bi-avatar[data-color="warning"] {
46
- --bic-avatar-background-color: var(--bi-warning-10);
47
- --bic-avatar-color: var(--bi-warning-90);
48
- }
42
+ &[data-color="warning"] {
43
+ --bic-avatar-background-color: var(--bi-warning-10);
44
+ --bic-avatar-color: var(--bi-warning-90);
49
45
 
50
- .bi-avatar[data-color="warning"][data-dark="true"] {
51
- --bic-avatar-background-color: var(--bi-warning-85);
52
- --bic-avatar-color: var(--bi-warning-10);
53
- }
46
+ &[data-dark="true"] {
47
+ --bic-avatar-background-color: var(--bi-warning-85);
48
+ --bic-avatar-color: var(--bi-warning-10);
49
+ }
50
+ }
54
51
 
55
- .bi-avatar[data-color="success"] {
56
- --bic-avatar-background-color: var(--bi-success-10);
57
- --bic-avatar-color: var(--bi-success-90);
58
- }
52
+ &[data-color="success"] {
53
+ --bic-avatar-background-color: var(--bi-success-10);
54
+ --bic-avatar-color: var(--bi-success-90);
59
55
 
60
- .bi-avatar[data-color="success"][data-dark="true"] {
61
- --bic-avatar-background-color: var(--bi-success-85);
62
- --bic-avatar-color: var(--bi-success-10);
63
- }
56
+ &[data-dark="true"] {
57
+ --bic-avatar-background-color: var(--bi-success-85);
58
+ --bic-avatar-color: var(--bi-success-10);
59
+ }
60
+ }
64
61
 
65
- .bi-avatar[data-color="alert"] {
66
- --bic-avatar-background-color: var(--bi-alert-10);
67
- --bic-avatar-color: var(--bi-alert-90);
68
- }
62
+ &[data-color="alert"] {
63
+ --bic-avatar-background-color: var(--bi-alert-10);
64
+ --bic-avatar-color: var(--bi-alert-90);
69
65
 
70
- .bi-avatar[data-color="alert"][data-dark="true"] {
71
- --bic-avatar-background-color: var(--bi-alert-85);
72
- --bic-avatar-color: var(--bi-alert-10);
73
- }
66
+ &[data-dark="true"] {
67
+ --bic-avatar-background-color: var(--bi-alert-85);
68
+ --bic-avatar-color: var(--bi-alert-10);
69
+ }
70
+ }
74
71
 
75
- .bi-avatar[data-size="small"] {
76
- --bic-avatar-size: var(--bi-scale-16x);
77
- --bic-avatar-font-size: 1.25rem;
78
- }
72
+ &[data-size="small"] {
73
+ --bic-avatar-size: var(--bi-scale-16x);
74
+ --bic-avatar-font-size: 1.25rem;
75
+ }
79
76
 
80
- .bi-avatar > img {
81
- object-fit: cover;
82
- width: 100%;
83
- height: 100%;
77
+ & > img {
78
+ object-fit: cover;
79
+ width: 100%;
80
+ height: 100%;
81
+ }
84
82
  }
package/dist/components/badge.css CHANGED
@@ -20,93 +20,93 @@
20
20
  justify-content: center;
21
21
  align-items: center;
22
22
  display: inline-flex;
23
- }
24
-
25
- .bi-badge[data-dark="true"] {
26
- --bic-badge-border-color: var(--bi-neutral-50);
27
- --bic-badge-color: var(--bi-neutral-10);
28
- }
29
-
30
- .bi-badge[data-single-letter="true"]:not([data-size="xs"]) {
31
- --bic-badge-border-radius: var(--bi-radius-full);
32
- min-width: var(--bic-badge-height);
33
- }
34
-
35
- .bi-badge[data-size="xs"] {
36
- --bic-badge-padding: 0 var(--bi-scale-0-50x);
37
- --bic-badge-font: var(--bi-font-body-xs);
38
- --bic-badge-border-radius: var(--bi-radius-small);
39
- --bic-badge-height: var(--bi-scale-4x);
40
- }
41
-
42
- .bi-badge[data-size="small"] {
43
- --bic-badge-padding: 0 var(--bi-scale-1x);
44
- --bic-badge-font: var(--bi-font-body-xs);
45
- --bic-badge-height: var(--bi-scale-5x);
46
- }
47
-
48
- .bi-badge[data-color="warning"] {
49
- --bic-badge-background: var(--bi-secondary-10);
50
- --bic-badge-color: var(--bi-secondary-95);
51
- --bic-badge-border-color: var(--bic-badge-background);
52
- }
53
-
54
- .bi-badge[data-color="warning"][data-dark="true"] {
55
- --bic-badge-background: var(--bi-secondary-100);
56
- --bic-badge-color: var(--bi-secondary-10);
57
- }
58
-
59
- .bi-badge[data-color="alert"] {
60
- --bic-badge-background: var(--bi-alert-10);
61
- --bic-badge-color: var(--bi-alert-85);
62
- --bic-badge-border-color: var(--bic-badge-background);
63
- }
64
-
65
- .bi-badge[data-color="alert"][data-dark="true"] {
66
- --bic-badge-background: var(--bi-alert-100);
67
- --bic-badge-color: var(--bi-alert-10);
68
- }
69
-
70
- .bi-badge[data-color="success"] {
71
- --bic-badge-background: var(--bi-success-10);
72
- --bic-badge-color: var(--bi-success-95);
73
- --bic-badge-border-color: var(--bic-badge-background);
74
- }
75
-
76
- .bi-badge[data-color="success"][data-dark="true"] {
77
- --bic-badge-background: var(--bi-success-100);
78
- --bic-badge-color: var(--bi-success-10);
79
- }
80
-
81
- .bi-badge[data-color="brand"] {
82
- --bic-badge-background: var(--bi-primary-10);
83
- --bic-badge-color: var(--bi-primary-85);
84
- --bic-badge-border-color: var(--bic-badge-background);
85
- }
86
-
87
- .bi-badge[data-color="brand"][data-dark="true"] {
88
- --bic-badge-background: var(--bi-primary-100);
89
- --bic-badge-color: var(--bi-primary-10);
90
- }
91
-
92
- .bi-badge[data-color="info"] {
93
- --bic-badge-background: var(--bi-info-10);
94
- --bic-badge-color: var(--bi-info-9);
95
- --bic-badge-border-color: var(--bic-badge-background);
96
- }
97
-
98
- .bi-badge[data-color="info"][data-dark="true"] {
99
- --bic-badge-background: var(--bi-info-100);
100
- --bic-badge-color: var(--bi-info-10);
101
- }
102
-
103
- .bi-badge[data-color="negative"] {
104
- --bic-badge-background: var(--bi-neutral-90);
105
- --bic-badge-color: var(--bi-basic-white);
106
- --bic-badge-border-color: var(--bic-badge-background);
107
- }
108
23
 
109
- .bi-badge[data-color="negative"][data-dark="true"] {
110
- --bic-badge-background: var(--bi-neutral-100);
111
- --bic-badge-color: var(--bi-neutral-10);
24
+ &[data-dark="true"] {
25
+ --bic-badge-border-color: var(--bi-neutral-50);
26
+ --bic-badge-color: var(--bi-neutral-10);
27
+ }
28
+
29
+ &[data-single-letter="true"]:not([data-size="xs"]) {
30
+ --bic-badge-border-radius: var(--bi-radius-full);
31
+ min-width: var(--bic-badge-height);
32
+ }
33
+
34
+ &[data-size="xs"] {
35
+ --bic-badge-padding: 0 var(--bi-scale-0-50x);
36
+ --bic-badge-font: var(--bi-font-body-xs);
37
+ --bic-badge-border-radius: var(--bi-radius-small);
38
+ --bic-badge-height: var(--bi-scale-4x);
39
+ }
40
+
41
+ &[data-size="small"] {
42
+ --bic-badge-padding: 0 var(--bi-scale-1x);
43
+ --bic-badge-font: var(--bi-font-body-xs);
44
+ --bic-badge-height: var(--bi-scale-5x);
45
+ }
46
+
47
+ &[data-color="warning"] {
48
+ --bic-badge-background: var(--bi-secondary-10);
49
+ --bic-badge-color: var(--bi-secondary-95);
50
+ --bic-badge-border-color: var(--bic-badge-background);
51
+
52
+ &[data-dark="true"] {
53
+ --bic-badge-background: var(--bi-secondary-100);
54
+ --bic-badge-color: var(--bi-secondary-10);
55
+ }
56
+ }
57
+
58
+ &[data-color="alert"] {
59
+ --bic-badge-background: var(--bi-alert-10);
60
+ --bic-badge-color: var(--bi-alert-85);
61
+ --bic-badge-border-color: var(--bic-badge-background);
62
+
63
+ &[data-dark="true"] {
64
+ --bic-badge-background: var(--bi-alert-100);
65
+ --bic-badge-color: var(--bi-alert-10);
66
+ }
67
+ }
68
+
69
+ &[data-color="success"] {
70
+ --bic-badge-background: var(--bi-success-10);
71
+ --bic-badge-color: var(--bi-success-95);
72
+ --bic-badge-border-color: var(--bic-badge-background);
73
+
74
+ &[data-dark="true"] {
75
+ --bic-badge-background: var(--bi-success-100);
76
+ --bic-badge-color: var(--bi-success-10);
77
+ }
78
+ }
79
+
80
+ &[data-color="brand"] {
81
+ --bic-badge-background: var(--bi-primary-10);
82
+ --bic-badge-color: var(--bi-primary-85);
83
+ --bic-badge-border-color: var(--bic-badge-background);
84
+
85
+ &[data-dark="true"] {
86
+ --bic-badge-background: var(--bi-primary-100);
87
+ --bic-badge-color: var(--bi-primary-10);
88
+ }
89
+ }
90
+
91
+ &[data-color="info"] {
92
+ --bic-badge-background: var(--bi-info-10);
93
+ --bic-badge-color: var(--bi-info-9);
94
+ --bic-badge-border-color: var(--bic-badge-background);
95
+
96
+ &[data-dark="true"] {
97
+ --bic-badge-background: var(--bi-info-100);
98
+ --bic-badge-color: var(--bi-info-10);
99
+ }
100
+ }
101
+
102
+ &[data-color="negative"] {
103
+ --bic-badge-background: var(--bi-neutral-90);
104
+ --bic-badge-color: var(--bi-basic-white);
105
+ --bic-badge-border-color: var(--bic-badge-background);
106
+
107
+ &[data-dark="true"] {
108
+ --bic-badge-background: var(--bi-neutral-100);
109
+ --bic-badge-color: var(--bi-neutral-10);
110
+ }
111
+ }
112
112
  }