@bi-digital/css 0.2.19 → 0.2.21

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 (9) hide show
  1. package/dist/components/alert.css +2 -2
  2. package/dist/components/card.css +16 -8
  3. package/dist/components/chip.css +16 -8
  4. package/dist/components/field.css +4 -0
  5. package/dist/components/filter-group.css +18 -10
  6. package/dist/components/footer.css +6 -0
  7. package/dist/components/link.css +4 -0
  8. package/dist/components.css +66 -28
  9. package/package.json +2 -2
package/dist/components/alert.css CHANGED
@@ -38,9 +38,9 @@
38
38
  }
39
39
 
40
40
  .bi-alert > .bi-button {
41
- margin-right: calc(var(--bic-alert-padding) * -1);
42
- margin-top: calc(var(--bic-alert-padding) * -1);
41
+ margin: calc(var(--bic-alert-padding) * -1);
43
42
  grid-area: 1 / 3;
43
+ margin-left: 0;
44
44
  }
45
45
 
46
46
  .bi-alert[data-size="small"] {
package/dist/components/card.css CHANGED
@@ -156,8 +156,10 @@
156
156
  --_bi--focus: ;
157
157
  }
158
158
 
159
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
160
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
159
+ @media (hover: hover) and (pointer: fine) {
160
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
161
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
162
+ }
161
163
  }
162
164
 
163
165
  .bi-card:-webkit-any(a, button):not(.disabled):active {
@@ -184,8 +186,10 @@
184
186
  --_bi--focus: ;
185
187
  }
186
188
 
187
- .bi-card:is(a, button):not(.disabled):hover {
188
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
189
+ @media (hover: hover) and (pointer: fine) {
190
+ .bi-card:is(a, button):not(.disabled):hover {
191
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
192
+ }
189
193
  }
190
194
 
191
195
  .bi-card:is(a, button):not(.disabled):active {
@@ -212,8 +216,10 @@
212
216
  --_bi--focus: ;
213
217
  }
214
218
 
215
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
216
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
219
+ @media (hover: hover) and (pointer: fine) {
220
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
221
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
222
+ }
217
223
  }
218
224
 
219
225
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
@@ -240,8 +246,10 @@
240
246
  --_bi--focus: ;
241
247
  }
242
248
 
243
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
244
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
249
+ @media (hover: hover) and (pointer: fine) {
250
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
251
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
252
+ }
245
253
  }
246
254
 
247
255
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
package/dist/components/chip.css CHANGED
@@ -36,8 +36,10 @@
36
36
  box-shadow: 0 0 0 2px #fff;
37
37
  }
38
38
 
39
- .bi-chip:-webkit-any(button):hover {
40
- --bg-color: var(--bic-chip-bg-hover);
39
+ @media (hover: hover) and (pointer: fine) {
40
+ .bi-chip:-webkit-any(button):hover {
41
+ --bg-color: var(--bic-chip-bg-hover);
42
+ }
41
43
  }
42
44
 
43
45
  .bi-chip:-webkit-any(button):active {
@@ -57,8 +59,10 @@
57
59
  box-shadow: 0 0 0 2px #fff;
58
60
  }
59
61
 
60
- .bi-chip:is(button):hover {
61
- --bg-color: var(--bic-chip-bg-hover);
62
+ @media (hover: hover) and (pointer: fine) {
63
+ .bi-chip:is(button):hover {
64
+ --bg-color: var(--bic-chip-bg-hover);
65
+ }
62
66
  }
63
67
 
64
68
  .bi-chip:is(button):active {
@@ -78,8 +82,10 @@
78
82
  box-shadow: 0 0 0 2px #fff;
79
83
  }
80
84
 
81
- .bi-chip:-webkit-any(a):hover {
82
- --bg-color: var(--bic-chip-bg-hover);
85
+ @media (hover: hover) and (pointer: fine) {
86
+ .bi-chip:-webkit-any(a):hover {
87
+ --bg-color: var(--bic-chip-bg-hover);
88
+ }
83
89
  }
84
90
 
85
91
  .bi-chip:-webkit-any(a):active {
@@ -99,8 +105,10 @@
99
105
  box-shadow: 0 0 0 2px #fff;
100
106
  }
101
107
 
102
- .bi-chip:is(a):hover {
103
- --bg-color: var(--bic-chip-bg-hover);
108
+ @media (hover: hover) and (pointer: fine) {
109
+ .bi-chip:is(a):hover {
110
+ --bg-color: var(--bic-chip-bg-hover);
111
+ }
104
112
  }
105
113
 
106
114
  .bi-chip:is(a):active {
package/dist/components/field.css CHANGED
@@ -74,6 +74,10 @@
74
74
  --bic-field-toggle-background: var(--bic-field-disabled-color);
75
75
  }
76
76
 
77
+ .bi-field[data-fullwidth="true"] {
78
+ width: 100%;
79
+ }
80
+
77
81
  .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
78
82
  border-radius: var(--bi-radius-medium);
79
83
  grid-template-areas: "input content";
package/dist/components/filter-group.css CHANGED
@@ -1,15 +1,17 @@
1
1
  .bi-filter-group {
2
- --bic-filter-group-background-color: var(--bi-basic-white);
3
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
4
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
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%), var(--bic-filter-group-background);
4
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
5
+ --bic-filter-group-background-expanded: var(--bi-neutral-15);
5
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
6
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
7
8
  }
8
9
 
9
10
  .bi-filter-group[data-dark="true"] {
10
- --bic-filter-group-background-color: var(--bi-neutral-90);
11
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
12
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
11
+ --bic-filter-group-background: var(--bi-neutral-90);
12
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
13
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
14
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
13
15
  --bic-filter-group-border-color: var(--bi-neutral-70);
14
16
  --bic-filter-group-text-color: var(--bi-basic-white);
15
17
  }
@@ -28,7 +30,7 @@
28
30
  gap: var(--bi-scale-2x);
29
31
  width: 100%;
30
32
  padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
31
- background: var(--bic-filter-group-background-color);
33
+ background: var(--bic-filter-group-background);
32
34
  cursor: pointer;
33
35
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
34
36
  -webkit-user-select: none;
@@ -37,8 +39,14 @@
37
39
  display: flex;
38
40
  }
39
41
 
40
- .bi-filter-group > button:hover {
41
- background: var(--bic-filter-group-background-color-hover);
42
+ @media (hover: hover) and (pointer: fine) {
43
+ .bi-filter-group > button:hover {
44
+ background: var(--bic-filter-group-background-hover);
45
+ }
46
+ }
47
+
48
+ .bi-filter-group > button:active {
49
+ background: var(--bic-filter-group-background-press);
42
50
  }
43
51
 
44
52
  .bi-filter-group > button:focus-visible {
@@ -80,7 +88,7 @@
80
88
  }
81
89
 
82
90
  .bi-filter-group[data-expanded="true"] > button {
83
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
91
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
84
92
  border-radius: var(--bi-radius-small);
85
93
  border-bottom-color: #0000;
86
94
  }
package/dist/components/footer.css CHANGED
@@ -91,6 +91,12 @@
91
91
  display: flex;
92
92
  }
93
93
 
94
+ @media not (min-width: 600px) {
95
+ .bi-footer .bi-footer--accreditations {
96
+ gap: var(--bi-scale-1x);
97
+ }
98
+ }
99
+
94
100
  .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
95
101
  background-position: center;
96
102
  background-repeat: no-repeat;
package/dist/components/link.css CHANGED
@@ -44,6 +44,10 @@
44
44
  --bic-link-color: var(--bi-neutral-5);
45
45
  }
46
46
 
47
+ .bi-link[data-underline="hover"]:not(:hover) {
48
+ text-decoration: none;
49
+ }
50
+
47
51
  .bi-link:visited {
48
52
  color: var(--bic-link-color);
49
53
  }
package/dist/components.css CHANGED
@@ -38,9 +38,9 @@
38
38
  }
39
39
 
40
40
  .bi-alert > .bi-button {
41
- margin-right: calc(var(--bic-alert-padding) * -1);
42
- margin-top: calc(var(--bic-alert-padding) * -1);
41
+ margin: calc(var(--bic-alert-padding) * -1);
43
42
  grid-area: 1 / 3;
43
+ margin-left: 0;
44
44
  }
45
45
 
46
46
  .bi-alert[data-size="small"] {
@@ -614,8 +614,10 @@
614
614
  --_bi--focus: ;
615
615
  }
616
616
 
617
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
618
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
617
+ @media (hover: hover) and (pointer: fine) {
618
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
619
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
620
+ }
619
621
  }
620
622
 
621
623
  .bi-card:-webkit-any(a, button):not(.disabled):active {
@@ -642,8 +644,10 @@
642
644
  --_bi--focus: ;
643
645
  }
644
646
 
645
- .bi-card:is(a, button):not(.disabled):hover {
646
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
647
+ @media (hover: hover) and (pointer: fine) {
648
+ .bi-card:is(a, button):not(.disabled):hover {
649
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
650
+ }
647
651
  }
648
652
 
649
653
  .bi-card:is(a, button):not(.disabled):active {
@@ -670,8 +674,10 @@
670
674
  --_bi--focus: ;
671
675
  }
672
676
 
673
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
674
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
677
+ @media (hover: hover) and (pointer: fine) {
678
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
679
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
680
+ }
675
681
  }
676
682
 
677
683
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
@@ -698,8 +704,10 @@
698
704
  --_bi--focus: ;
699
705
  }
700
706
 
701
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
702
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
707
+ @media (hover: hover) and (pointer: fine) {
708
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
709
+ box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
710
+ }
703
711
  }
704
712
 
705
713
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
@@ -917,8 +925,10 @@
917
925
  box-shadow: 0 0 0 2px #fff;
918
926
  }
919
927
 
920
- .bi-chip:-webkit-any(button):hover {
921
- --bg-color: var(--bic-chip-bg-hover);
928
+ @media (hover: hover) and (pointer: fine) {
929
+ .bi-chip:-webkit-any(button):hover {
930
+ --bg-color: var(--bic-chip-bg-hover);
931
+ }
922
932
  }
923
933
 
924
934
  .bi-chip:-webkit-any(button):active {
@@ -938,8 +948,10 @@
938
948
  box-shadow: 0 0 0 2px #fff;
939
949
  }
940
950
 
941
- .bi-chip:is(button):hover {
942
- --bg-color: var(--bic-chip-bg-hover);
951
+ @media (hover: hover) and (pointer: fine) {
952
+ .bi-chip:is(button):hover {
953
+ --bg-color: var(--bic-chip-bg-hover);
954
+ }
943
955
  }
944
956
 
945
957
  .bi-chip:is(button):active {
@@ -959,8 +971,10 @@
959
971
  box-shadow: 0 0 0 2px #fff;
960
972
  }
961
973
 
962
- .bi-chip:-webkit-any(a):hover {
963
- --bg-color: var(--bic-chip-bg-hover);
974
+ @media (hover: hover) and (pointer: fine) {
975
+ .bi-chip:-webkit-any(a):hover {
976
+ --bg-color: var(--bic-chip-bg-hover);
977
+ }
964
978
  }
965
979
 
966
980
  .bi-chip:-webkit-any(a):active {
@@ -980,8 +994,10 @@
980
994
  box-shadow: 0 0 0 2px #fff;
981
995
  }
982
996
 
983
- .bi-chip:is(a):hover {
984
- --bg-color: var(--bic-chip-bg-hover);
997
+ @media (hover: hover) and (pointer: fine) {
998
+ .bi-chip:is(a):hover {
999
+ --bg-color: var(--bic-chip-bg-hover);
1000
+ }
985
1001
  }
986
1002
 
987
1003
  .bi-chip:is(a):active {
@@ -1430,6 +1446,10 @@ body:has(.bi-dialog:modal) {
1430
1446
  --bic-field-toggle-background: var(--bic-field-disabled-color);
1431
1447
  }
1432
1448
 
1449
+ .bi-field[data-fullwidth="true"] {
1450
+ width: 100%;
1451
+ }
1452
+
1433
1453
  .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
1434
1454
  border-radius: var(--bi-radius-medium);
1435
1455
  grid-template-areas: "input content";
@@ -1728,17 +1748,19 @@ body:has(.bi-dialog:modal) {
1728
1748
  }
1729
1749
 
1730
1750
  .bi-filter-group {
1731
- --bic-filter-group-background-color: var(--bi-basic-white);
1732
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
1733
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
1751
+ --bic-filter-group-background: var(--bi-basic-white);
1752
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
1753
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
1754
+ --bic-filter-group-background-expanded: var(--bi-neutral-15);
1734
1755
  --bic-filter-group-border-color: var(--bi-neutral-15);
1735
1756
  --bic-filter-group-text-color: var(--bi-neutral-90);
1736
1757
  }
1737
1758
 
1738
1759
  .bi-filter-group[data-dark="true"] {
1739
- --bic-filter-group-background-color: var(--bi-neutral-90);
1740
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
1741
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
1760
+ --bic-filter-group-background: var(--bi-neutral-90);
1761
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
1762
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
1763
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
1742
1764
  --bic-filter-group-border-color: var(--bi-neutral-70);
1743
1765
  --bic-filter-group-text-color: var(--bi-basic-white);
1744
1766
  }
@@ -1757,7 +1779,7 @@ body:has(.bi-dialog:modal) {
1757
1779
  gap: var(--bi-scale-2x);
1758
1780
  width: 100%;
1759
1781
  padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1760
- background: var(--bic-filter-group-background-color);
1782
+ background: var(--bic-filter-group-background);
1761
1783
  cursor: pointer;
1762
1784
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1763
1785
  -webkit-user-select: none;
@@ -1766,8 +1788,14 @@ body:has(.bi-dialog:modal) {
1766
1788
  display: flex;
1767
1789
  }
1768
1790
 
1769
- .bi-filter-group > button:hover {
1770
- background: var(--bic-filter-group-background-color-hover);
1791
+ @media (hover: hover) and (pointer: fine) {
1792
+ .bi-filter-group > button:hover {
1793
+ background: var(--bic-filter-group-background-hover);
1794
+ }
1795
+ }
1796
+
1797
+ .bi-filter-group > button:active {
1798
+ background: var(--bic-filter-group-background-press);
1771
1799
  }
1772
1800
 
1773
1801
  .bi-filter-group > button:focus-visible {
@@ -1809,7 +1837,7 @@ body:has(.bi-dialog:modal) {
1809
1837
  }
1810
1838
 
1811
1839
  .bi-filter-group[data-expanded="true"] > button {
1812
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1840
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1813
1841
  border-radius: var(--bi-radius-small);
1814
1842
  border-bottom-color: #0000;
1815
1843
  }
@@ -1911,6 +1939,12 @@ body:has(.bi-dialog:modal) {
1911
1939
  display: flex;
1912
1940
  }
1913
1941
 
1942
+ @media not (min-width: 600px) {
1943
+ .bi-footer .bi-footer--accreditations {
1944
+ gap: var(--bi-scale-1x);
1945
+ }
1946
+ }
1947
+
1914
1948
  .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
1915
1949
  background-position: center;
1916
1950
  background-repeat: no-repeat;
@@ -2395,6 +2429,10 @@ body:has(.bi-dialog:modal) {
2395
2429
  --bic-link-color: var(--bi-neutral-5);
2396
2430
  }
2397
2431
 
2432
+ .bi-link[data-underline="hover"]:not(:hover) {
2433
+ text-decoration: none;
2434
+ }
2435
+
2398
2436
  .bi-link:visited {
2399
2437
  color: var(--bic-link-color);
2400
2438
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.19",
3
+ "version": "0.2.21",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -23,7 +23,7 @@
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.2.19"
26
+ "@bi-digital/tokens": "0.2.21"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",