@bi-digital/css 0.2.20 → 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 (5) hide show
  1. package/dist/components/card.css +16 -8
  2. package/dist/components/chip.css +16 -8
  3. package/dist/components/filter-group.css +18 -10
  4. package/dist/components.css +50 -26
  5. package/package.json +2 -2
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/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.css CHANGED
@@ -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 {
@@ -1732,17 +1748,19 @@ body:has(.bi-dialog:modal) {
1732
1748
  }
1733
1749
 
1734
1750
  .bi-filter-group {
1735
- --bic-filter-group-background-color: var(--bi-basic-white);
1736
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
1737
- --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);
1738
1755
  --bic-filter-group-border-color: var(--bi-neutral-15);
1739
1756
  --bic-filter-group-text-color: var(--bi-neutral-90);
1740
1757
  }
1741
1758
 
1742
1759
  .bi-filter-group[data-dark="true"] {
1743
- --bic-filter-group-background-color: var(--bi-neutral-90);
1744
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
1745
- --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);
1746
1764
  --bic-filter-group-border-color: var(--bi-neutral-70);
1747
1765
  --bic-filter-group-text-color: var(--bi-basic-white);
1748
1766
  }
@@ -1761,7 +1779,7 @@ body:has(.bi-dialog:modal) {
1761
1779
  gap: var(--bi-scale-2x);
1762
1780
  width: 100%;
1763
1781
  padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1764
- background: var(--bic-filter-group-background-color);
1782
+ background: var(--bic-filter-group-background);
1765
1783
  cursor: pointer;
1766
1784
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1767
1785
  -webkit-user-select: none;
@@ -1770,8 +1788,14 @@ body:has(.bi-dialog:modal) {
1770
1788
  display: flex;
1771
1789
  }
1772
1790
 
1773
- .bi-filter-group > button:hover {
1774
- 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);
1775
1799
  }
1776
1800
 
1777
1801
  .bi-filter-group > button:focus-visible {
@@ -1813,7 +1837,7 @@ body:has(.bi-dialog:modal) {
1813
1837
  }
1814
1838
 
1815
1839
  .bi-filter-group[data-expanded="true"] > button {
1816
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1840
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1817
1841
  border-radius: var(--bi-radius-small);
1818
1842
  border-bottom-color: #0000;
1819
1843
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.20",
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.20"
26
+ "@bi-digital/tokens": "0.2.21"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",