@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/components/filter-group.css CHANGED
@@ -1,111 +1,93 @@
1
1
  .bi-filter-group {
2
- --bic-filter-group-background: var(--bi-basic-white);
3
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%),
4
- var(--bic-filter-group-background);
5
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%),
6
- var(--bic-filter-group-background);
7
- --bic-filter-group-background-expanded: var(--bi-neutral-15);
8
- --bic-filter-group-border-color: var(--bi-neutral-15);
9
- --bic-filter-group-text-color: var(--bi-neutral-90);
10
- --bic-filter-focus-shadow-color: var(--bi-basic-white);
11
- --bic-filter-focus-outline-color: var(--bi-primary-50);
12
- }
13
-
14
- .bi-filter-group[data-dark="true"] {
15
- --bic-filter-group-background: var(--bi-neutral-90);
16
- --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
17
- var(--bic-filter-group-background);
18
- --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
19
- var(--bic-filter-group-background);
20
- --bic-filter-group-background-expanded: var(--bi-neutral-80);
21
- --bic-filter-group-border-color: var(--bi-neutral-70);
22
- --bic-filter-group-text-color: var(--bi-basic-white);
23
- --bic-filter-focus-shadow-color: var(--bi-neutral-95);
24
- --bic-filter-focus-outline-color: var(--bi-primary-30);
25
- }
26
-
27
- .bi-filter-group {
2
+ --bic-filter-group-background: var(--bi-color-surface-subtle);
3
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-filter-group-background);
4
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-filter-group-background);
5
+ --bic-filter-group-background-expanded: var(--bi-color-surface-active);
6
+ --bic-filter-group-border-color: var(--bi-color-stroke);
7
+ --bic-filter-group-text-color: var(--bi-color-text);
28
8
  flex-direction: column;
29
9
  display: flex;
30
- }
31
10
 
32
- .bi-filter-group > button {
33
- border: none;
34
- border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
35
- height: var(--bi-scale-12x);
36
- color: var(--bic-filter-group-text-color);
37
- align-items: center;
38
- gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
39
- width: 100%;
40
- padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
41
- background: var(--bic-filter-group-background);
42
- cursor: pointer;
43
- border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
44
- -webkit-user-select: none;
45
- user-select: none;
46
- flex-direction: row;
47
- display: flex;
48
- }
11
+ & > button {
12
+ border: none;
13
+ border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
14
+ height: var(--bi-scale-12x);
15
+ color: var(--bic-filter-group-text-color);
16
+ align-items: center;
17
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
18
+ width: 100%;
19
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
20
+ background: var(--bic-filter-group-background);
21
+ cursor: pointer;
22
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
23
+ -webkit-user-select: none;
24
+ user-select: none;
25
+ flex-direction: row;
26
+ display: flex;
49
27
 
50
- @media (hover: hover) and (pointer: fine) {
51
- .bi-filter-group > button:hover {
52
- background: var(--bic-filter-group-background-hover);
53
- }
54
- }
28
+ @media (hover: hover) and (pointer: fine) {
29
+ &:hover {
30
+ background: var(--bic-filter-group-background-hover);
31
+ }
32
+ }
55
33
 
56
- .bi-filter-group > button:active {
57
- background: var(--bic-filter-group-background-press);
58
- }
34
+ &:active {
35
+ background: var(--bic-filter-group-background-press);
36
+ }
59
37
 
60
- .bi-filter-group > button:focus-visible {
61
- box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
62
- outline: 3px solid var(--bic-filter-focus-outline-color);
63
- outline-offset: 3px;
64
- border-radius: var(--bi-radius-small);
65
- }
38
+ &:focus-visible {
39
+ box-shadow: 0 0 0 4.5px var(--bi-states-focus-background);
40
+ outline: 3px solid var(--bi-states-focus);
41
+ outline-offset: 3px;
42
+ border-radius: var(--bi-radius-small);
43
+ }
66
44
 
67
- .bi-filter-group > button > svg {
68
- width: var(--bi-scale-6x);
69
- height: var(--bi-scale-6x);
70
- font-size: var(--bi-icon-medium);
71
- }
45
+ & > svg {
46
+ width: var(--bi-scale-6x);
47
+ height: var(--bi-scale-6x);
48
+ font-size: var(--bi-icon-medium);
49
+ }
72
50
 
73
- .bi-filter-group > button > h3 {
74
- text-align: left;
75
- font: var(--bi-font-title-bold-xs);
76
- flex: 1;
77
- margin: 0;
78
- }
51
+ & > h3 {
52
+ text-align: left;
53
+ font: var(--bi-font-title-bold-xs);
54
+ flex: 1;
55
+ margin: 0;
56
+ }
57
+ }
79
58
 
80
- .bi-filter-group > div {
81
- gap: var(--bi-scale-2x);
82
- padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
83
- flex-direction: column;
84
- display: none;
85
- }
59
+ & > div {
60
+ gap: var(--bi-scale-2x);
61
+ padding: var(--bi-scale-2x) 0 var(--bi-scale-8x);
62
+ flex-direction: column;
63
+ display: none;
86
64
 
87
- .bi-filter-group > div > .bi-field:has(.bi-input[type="checkbox"]) {
88
- width: 100%;
89
- }
65
+ & > .bi-field:has(.bi-input[type="checkbox"]) {
66
+ width: 100%;
67
+ }
68
+ }
90
69
 
91
- .bi-filter-group:last-of-type > button {
92
- border-radius: var(--bi-radius-small);
93
- border-bottom-color: #0000;
94
- }
70
+ &:last-of-type {
71
+ & > button {
72
+ border-radius: var(--bi-radius-small);
73
+ border-bottom-color: #0000;
74
+ }
95
75
 
96
- .bi-filter-group:last-of-type > div {
97
- padding: var(--bi-scale-2x) 0;
98
- }
76
+ & > div {
77
+ padding: var(--bi-scale-2x) 0;
78
+ }
79
+ }
99
80
 
100
- .bi-filter-group[data-expanded="true"] {
101
- --bic-filter-group-background: var(--bic-filter-group-background-expanded);
102
- }
81
+ &[data-expanded="true"] {
82
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
103
83
 
104
- .bi-filter-group[data-expanded="true"] > button {
105
- border-radius: var(--bi-radius-small);
106
- border-bottom-color: #0000;
107
- }
84
+ & > button {
85
+ border-radius: var(--bi-radius-small);
86
+ border-bottom-color: #0000;
87
+ }
108
88
 
109
- .bi-filter-group[data-expanded="true"] > div {
110
- display: flex;
89
+ & > div {
90
+ display: flex;
91
+ }
92
+ }
111
93
  }
package/dist/components/footer.css CHANGED
@@ -1,14 +1,18 @@
1
- .bi-footer {
2
- --bic-footer-color: var(--bi-basic-key);
3
- --bic-footer-background: var(--bi-basic-white);
1
+ :root, [data-color-scheme="light"] {
2
+ --_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb.svg");
3
+ --_bic-footer-amba-logo: url("./assets/accreditations/amba.svg");
4
+ --_bic-footer-equis-logo: url("./assets/accreditations/equis.svg");
4
5
  }
5
6
 
6
- .bi-footer[data-dark="true"] {
7
- --bic-footer-color: var(--bi-basic-white);
8
- --bic-footer-background: var(--bi-primary-95);
7
+ [data-color-scheme="dark"] {
8
+ --_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb-neg.svg");
9
+ --_bic-footer-amba-logo: url("./assets/accreditations/amba-neg.svg");
10
+ --_bic-footer-equis-logo: url("./assets/accreditations/equis-neg.svg");
9
11
  }
10
12
 
11
13
  .bi-footer {
14
+ --bic-footer-color: var(--bi-color-neutral-text);
15
+ --bic-footer-background: var(--bi-color-neutral-surface-subtle);
12
16
  width: 100%;
13
17
  color: var(--bic-footer-color);
14
18
  background-color: var(--bic-footer-background);
@@ -22,131 +26,107 @@
22
26
  width: 100%;
23
27
  margin-top: -1px;
24
28
  display: flex;
25
- }
26
29
 
27
- .bi-footer .bi-footer--links-container {
28
- gap: var(--bi-scale-4x) var(--bi-scale-14x);
29
- flex-wrap: wrap;
30
- justify-content: center;
31
- display: flex;
32
- }
33
-
34
- @media (width < 768px) {
35
- .bi-footer .bi-footer--links-container {
36
- flex-direction: column;
30
+ & .bi-footer--links-container {
31
+ gap: var(--bi-scale-4x) var(--bi-scale-14x);
32
+ flex-wrap: wrap;
33
+ justify-content: center;
34
+ display: flex;
35
+
36
+ @media (width < 768px) {
37
+ flex-direction: column;
38
+ }
39
+
40
+ & .bi-footer--links {
41
+ min-height: 44px;
42
+ font: var(--bi-font-label-large);
43
+ flex-direction: row;
44
+ justify-content: center;
45
+ align-items: center;
46
+ margin: auto;
47
+ display: flex;
48
+
49
+ @media (width < 768px) {
50
+ flex-direction: column;
51
+ }
52
+
53
+ & > p {
54
+ margin: 0 var(--bi-scale-0-50x) 0 0;
55
+ font-weight: 300;
56
+
57
+ @media (width < 768px) {
58
+ margin: var(--bi-scale-3x) 0;
59
+ }
60
+ }
61
+
62
+ & > div {
63
+ justify-content: center;
64
+ align-items: center;
65
+ gap: var(--bi-scale-3x) var(--bi-scale-10x);
66
+ white-space: nowrap;
67
+ flex-direction: row;
68
+ width: 100%;
69
+ display: flex;
70
+
71
+ @media (width < 768px) {
72
+ flex-direction: column;
73
+ }
74
+ }
75
+ }
37
76
  }
38
- }
39
77
 
40
- .bi-footer .bi-footer--links-container .bi-footer--links {
41
- min-height: 44px;
42
- font: var(--bi-font-label-large);
43
- flex-direction: row;
44
- justify-content: center;
45
- align-items: center;
46
- margin: auto;
47
- display: flex;
48
- }
49
-
50
- @media (width < 768px) {
51
- .bi-footer .bi-footer--links-container .bi-footer--links {
52
- flex-direction: column;
78
+ & .bi-footer--accreditations {
79
+ justify-content: center;
80
+ align-items: center;
81
+ gap: var(--bi-scale-12x);
82
+ flex-wrap: wrap;
83
+ min-height: 58px;
84
+ display: flex;
85
+
86
+ @media (width < 600px) {
87
+ gap: var(--bi-scale-2x) var(--bi-scale-1x);
88
+ }
89
+
90
+ & .bi-footer--aacsb, & .bi-footer--amba, & .bi-footer--equis {
91
+ background-position: center;
92
+ background-repeat: no-repeat;
93
+ background-size: contain;
94
+ height: 58px;
95
+ display: block;
96
+ }
97
+
98
+ & .bi-footer--aacsb {
99
+ background-image: var(--_bic-footer-aacsb-logo);
100
+ width: 127px;
101
+ }
102
+
103
+ & .bi-footer--amba {
104
+ background-image: var(--_bic-footer-amba-logo);
105
+ width: 122px;
106
+ }
107
+
108
+ & .bi-footer--equis {
109
+ background-image: var(--_bic-footer-equis-logo);
110
+ width: 104px;
111
+ }
53
112
  }
54
- }
55
113
 
56
- .bi-footer .bi-footer--links-container .bi-footer--links > p {
57
- margin: 0 var(--bi-scale-0-50x) 0 0;
58
- font-weight: 300;
59
- }
114
+ & .bi-footer--socials {
115
+ justify-content: center;
116
+ align-items: center;
117
+ gap: var(--bi-scale-8x);
118
+ flex-wrap: wrap;
119
+ display: flex;
60
120
 
61
- @media (width < 768px) {
62
- .bi-footer .bi-footer--links-container .bi-footer--links > p {
63
- margin: var(--bi-scale-3x) 0;
121
+ @media (width < 600px) {
122
+ gap: var(--bi-scale-2x);
123
+ }
64
124
  }
65
- }
66
-
67
- .bi-footer .bi-footer--links-container .bi-footer--links > div {
68
- justify-content: center;
69
- align-items: center;
70
- gap: var(--bi-scale-3x) var(--bi-scale-10x);
71
- white-space: nowrap;
72
- flex-direction: row;
73
- width: 100%;
74
- display: flex;
75
- }
76
125
 
77
- @media (width < 768px) {
78
- .bi-footer .bi-footer--links-container .bi-footer--links > div {
79
- flex-direction: column;
126
+ & .bi-footer--copyright {
127
+ text-align: center;
128
+ font: var(--bi-font-body-large);
129
+ font-weight: var(--bi-font-weight-regular);
130
+ margin: 0;
80
131
  }
81
132
  }
82
-
83
- .bi-footer .bi-footer--accreditations {
84
- justify-content: center;
85
- align-items: center;
86
- gap: var(--bi-scale-12x);
87
- flex-wrap: wrap;
88
- min-height: 58px;
89
- display: flex;
90
- }
91
-
92
- @media (width < 600px) {
93
- .bi-footer .bi-footer--accreditations {
94
- gap: var(--bi-scale-2x) var(--bi-scale-1x);
95
- }
96
- }
97
-
98
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
99
- background-position: center;
100
- background-repeat: no-repeat;
101
- background-size: contain;
102
- height: 58px;
103
- display: block;
104
- }
105
-
106
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
107
- background-image: url("./assets/accreditations/aacsb.svg");
108
- width: 127px;
109
- }
110
-
111
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
112
- background-image: url("./assets/accreditations/aacsb-neg.svg");
113
- }
114
-
115
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
116
- background-image: url("./assets/accreditations/amba.svg");
117
- width: 122px;
118
- }
119
-
120
- .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
121
- background-image: url("./assets/accreditations/amba-neg.svg");
122
- }
123
-
124
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
125
- background-image: url("./assets/accreditations/equis.svg");
126
- width: 104px;
127
- }
128
-
129
- .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
130
- background-image: url("./assets/accreditations/equis-neg.svg");
131
- }
132
-
133
- .bi-footer .bi-footer--socials {
134
- justify-content: center;
135
- align-items: center;
136
- gap: var(--bi-scale-8x);
137
- flex-wrap: wrap;
138
- display: flex;
139
- }
140
-
141
- @media (width < 600px) {
142
- .bi-footer .bi-footer--socials {
143
- gap: var(--bi-scale-2x);
144
- }
145
- }
146
-
147
- .bi-footer .bi-footer--copyright {
148
- text-align: center;
149
- font: var(--bi-font-body-large);
150
- font-weight: var(--bi-font-weight-regular);
151
- margin: 0;
152
- }
package/dist/components/icons.css CHANGED
@@ -2,44 +2,44 @@ svg {
2
2
  --bic-icon-size: inherit;
3
3
  font-size: var(--bic-icon-size);
4
4
  display: inline-block;
5
- }
6
5
 
7
- svg[data-size="2xl"] {
8
- --bic-icon-size: var(--bi-icon-2xl) !important;
9
- }
6
+ &[data-size="2xl"] {
7
+ --bic-icon-size: var(--bi-icon-2xl) !important;
8
+ }
10
9
 
11
- svg[data-size="xl"] {
12
- --bic-icon-size: var(--bi-icon-xl) !important;
13
- }
10
+ &[data-size="xl"] {
11
+ --bic-icon-size: var(--bi-icon-xl) !important;
12
+ }
14
13
 
15
- svg[data-size="large"] {
16
- --bic-icon-size: var(--bi-icon-large) !important;
17
- }
14
+ &[data-size="large"] {
15
+ --bic-icon-size: var(--bi-icon-large) !important;
16
+ }
18
17
 
19
- svg[data-size="medium"] {
20
- --bic-icon-size: var(--bi-icon-medium) !important;
21
- }
18
+ &[data-size="medium"] {
19
+ --bic-icon-size: var(--bi-icon-medium) !important;
20
+ }
22
21
 
23
- svg[data-size="small"] {
24
- --bic-icon-size: var(--bi-icon-small) !important;
25
- }
22
+ &[data-size="small"] {
23
+ --bic-icon-size: var(--bi-icon-small) !important;
24
+ }
26
25
 
27
- svg[data-color="inherit"] {
28
- color: inherit;
29
- }
26
+ &[data-color="inherit"] {
27
+ color: inherit;
28
+ }
30
29
 
31
- svg[data-color="primary"] {
32
- color: #01417b;
33
- }
30
+ &[data-color="primary"] {
31
+ color: #01417b;
32
+ }
34
33
 
35
- svg[data-color="gray"] {
36
- color: #1c1b1b;
37
- }
34
+ &[data-color="gray"] {
35
+ color: #1c1b1b;
36
+ }
38
37
 
39
- svg[data-color="black"] {
40
- color: var(--bi-basic-key);
41
- }
38
+ &[data-color="black"] {
39
+ color: var(--bi-basic-key);
40
+ }
42
41
 
43
- svg[data-color="white"] {
44
- color: var(--bi-basic-white);
42
+ &[data-color="white"] {
43
+ color: var(--bi-basic-white);
44
+ }
45
45
  }