@bi-digital/css 0.11.10 → 0.12.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 (36) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +52 -114
  3. package/dist/components/avatar.css +11 -59
  4. package/dist/components/badge.css +25 -92
  5. package/dist/components/button.css +108 -131
  6. package/dist/components/card.css +232 -309
  7. package/dist/components/checkbox-subsection.css +13 -17
  8. package/dist/components/chip.css +41 -185
  9. package/dist/components/details.css +86 -105
  10. package/dist/components/dialog.css +97 -102
  11. package/dist/components/dropdown.css +19 -30
  12. package/dist/components/field.css +203 -219
  13. package/dist/components/fieldset.css +18 -26
  14. package/dist/components/filter-group.css +76 -94
  15. package/dist/components/footer.css +104 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +188 -206
  18. package/dist/components/label.css +15 -21
  19. package/dist/components/link.css +36 -56
  20. package/dist/components/logo.css +45 -41
  21. package/dist/components/navbar.css +49 -52
  22. package/dist/components/pagination.css +27 -30
  23. package/dist/components/popover.css +37 -46
  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 +25 -25
  29. package/dist/components/tabs.css +105 -121
  30. package/dist/components/tooltip.css +32 -32
  31. package/dist/components/validation-message.css +11 -11
  32. package/dist/components.css +1695 -2281
  33. package/dist/index.css +509 -10
  34. package/dist/salesforce.css +2200 -2289
  35. package/dist/tokens.css +505 -8
  36. 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
@@ -1,20 +1,18 @@
1
1
  .bi-alert {
2
- --bic-alert-background: var(--bi-primary-5);
3
- --bic-alert-border-color: var(--bi-primary-10);
2
+ --bic-alert-background: var(--bi-color-primary-surface-strong);
3
+ --bic-alert-border-color: var(--bi-color-primary-stroke);
4
4
  --bic-alert-border-width: var(--bi-stroke-thin);
5
- --bic-alert-color: var(--bi-primary-90);
5
+ --bic-alert-color: var(--bi-color-primary-text-subtle);
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-color] {
11
+ --bic-alert-background: var(--bi-color-surface-strong);
12
+ --bic-alert-border-color: var(--bi-color-stroke);
13
+ --bic-alert-color: var(--bi-color-text-subtle);
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,49 @@
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
+ &:has( > .bi-alert--footer) {
61
+ width: 100%;
62
+ }
63
+
64
+ & .bi-alert--footer {
65
+ justify-content: flex-end;
66
+ align-items: center;
67
+ gap: var(--bic-alert-gap);
68
+ grid-column: 1 / -1;
69
+ display: flex;
70
+ }
133
71
  }
package/dist/components/avatar.css CHANGED
@@ -1,16 +1,8 @@
1
1
  .bi-avatar {
2
- --bic-avatar-background-color: var(--bi-primary-10);
3
- --bic-avatar-color: var(--bi-primary-90);
2
+ --bic-avatar-background-color: var(--bi-color-surface-strong);
3
+ --bic-avatar-color: var(--bi-color-text-subtle);
4
4
  --bic-avatar-size: var(--bi-scale-24x);
5
5
  --bic-avatar-font-size: 1.75rem;
6
- }
7
-
8
- .bi-avatar[data-dark="true"] {
9
- --bic-avatar-background-color: var(--bi-primary-85);
10
- --bic-avatar-color: var(--bi-primary-10);
11
- }
12
-
13
- .bi-avatar {
14
6
  border-radius: var(--bi-radius-full);
15
7
  background-color: var(--bic-avatar-background-color);
16
8
  color: var(--bic-avatar-color);
@@ -30,55 +22,15 @@
30
22
  text-decoration: none;
31
23
  display: flex;
32
24
  overflow: hidden;
33
- }
34
-
35
- .bi-avatar[data-color="info"] {
36
- --bic-avatar-background-color: var(--bi-info-10);
37
- --bic-avatar-color: var(--bi-info-90);
38
- }
39
-
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
- }
44
-
45
- .bi-avatar[data-color="warning"] {
46
- --bic-avatar-background-color: var(--bi-warning-10);
47
- --bic-avatar-color: var(--bi-warning-90);
48
- }
49
25
 
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
- }
54
-
55
- .bi-avatar[data-color="success"] {
56
- --bic-avatar-background-color: var(--bi-success-10);
57
- --bic-avatar-color: var(--bi-success-90);
58
- }
59
-
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
- }
64
-
65
- .bi-avatar[data-color="alert"] {
66
- --bic-avatar-background-color: var(--bi-alert-10);
67
- --bic-avatar-color: var(--bi-alert-90);
68
- }
69
-
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
- }
74
-
75
- .bi-avatar[data-size="small"] {
76
- --bic-avatar-size: var(--bi-scale-16x);
77
- --bic-avatar-font-size: 1.25rem;
78
- }
26
+ &[data-size="small"] {
27
+ --bic-avatar-size: var(--bi-scale-16x);
28
+ --bic-avatar-font-size: 1.25rem;
29
+ }
79
30
 
80
- .bi-avatar > img {
81
- object-fit: cover;
82
- width: 100%;
83
- height: 100%;
31
+ & > img {
32
+ object-fit: cover;
33
+ width: 100%;
34
+ height: 100%;
35
+ }
84
36
  }
package/dist/components/badge.css CHANGED
@@ -1,12 +1,17 @@
1
1
  .bi-badge {
2
- --bic-badge-background: transparent;
3
- --bic-badge-color: var(--bi-neutral-60);
4
- --bic-badge-border-color: var(--bi-neutral-25);
2
+ --bic-badge-background: var(--bi-color-neutral-fill);
3
+ --bic-badge-color: var(--bi-color-neutral-on-fill);
5
4
  --bic-badge-border-radius: var(--bi-radius-medium);
6
5
  --bic-badge-border-width: var(--bi-stroke-thin);
7
6
  --bic-badge-height: var(--bi-scale-6x);
8
7
  --bic-badge-font: var(--bi-font-body-medium);
9
8
  --bic-badge-padding: 0 var(--bi-scale-1-5x);
9
+
10
+ &[data-color] {
11
+ --bic-badge-background: var(--bi-color-fill);
12
+ --bic-badge-color: var(--bi-color-on-fill);
13
+ }
14
+
10
15
  padding: var(--bic-badge-padding);
11
16
  border-radius: var(--bic-badge-border-radius);
12
17
  background-color: var(--bic-badge-background);
@@ -15,98 +20,26 @@
15
20
  width: max-content;
16
21
  height: fit-content;
17
22
  min-height: var(--bic-badge-height);
18
- box-shadow: 0 0 0 var(--bic-badge-border-width) var(--bic-badge-border-color) inset;
19
23
  word-break: break-word;
20
24
  justify-content: center;
21
25
  align-items: center;
22
26
  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
27
 
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);
28
+ &[data-single-letter="true"]:not([data-size="xs"]) {
29
+ --bic-badge-border-radius: var(--bi-radius-full);
30
+ min-width: var(--bic-badge-height);
31
+ }
32
+
33
+ &[data-size="xs"] {
34
+ --bic-badge-padding: 0 var(--bi-scale-0-50x);
35
+ --bic-badge-font: var(--bi-font-body-xs);
36
+ --bic-badge-border-radius: var(--bi-radius-small);
37
+ --bic-badge-height: var(--bi-scale-4x);
38
+ }
39
+
40
+ &[data-size="small"] {
41
+ --bic-badge-padding: 0 var(--bi-scale-1x);
42
+ --bic-badge-font: var(--bi-font-body-xs);
43
+ --bic-badge-height: var(--bi-scale-5x);
44
+ }
112
45
  }