@bi-digital/css 0.2.24 → 0.3.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 (9) hide show
  1. package/dist/components/alert.css +1 -1
  2. package/dist/components/chip.css +1 -1
  3. package/dist/components/filter-group.css +1 -1
  4. package/dist/components/icons.css +45 -0
  5. package/dist/components/validation-message.css +4 -4
  6. package/dist/components.css +53 -7
  7. package/package.json +3 -2
  8. package/dist/assets/icons/bi-cart.svg +0 -3
  9. package/dist/icons.css +0 -58
package/dist/components/alert.css CHANGED
@@ -29,7 +29,7 @@
29
29
  position: relative;
30
30
  }
31
31
 
32
- .bi-alert > [data-bi-icon="true"] {
32
+ .bi-alert > svg {
33
33
  font-size: var(--bic-alert-icon-size);
34
34
  }
35
35
 
package/dist/components/chip.css CHANGED
@@ -183,7 +183,7 @@
183
183
  --bic-chip-text-color: var(--bi-success-90);
184
184
  }
185
185
 
186
- .bi-chip > [data-bi-icon="true"] {
186
+ .bi-chip > svg {
187
187
  display: inherit;
188
188
  font-size: var(--bic-chip-icon-size);
189
189
  }
package/dist/components/filter-group.css CHANGED
@@ -56,7 +56,7 @@
56
56
  border-radius: var(--bi-radius-small);
57
57
  }
58
58
 
59
- .bi-filter-group > button > [data-bi-icon="true"] {
59
+ .bi-filter-group > button > svg {
60
60
  width: var(--bi-scale-6x);
61
61
  height: var(--bi-scale-6x);
62
62
  font-size: var(--bi-icon-medium);
package/dist/components/icons.css ADDED
@@ -0,0 +1,45 @@
1
+ svg {
2
+ --bic-icon-size: inherit;
3
+ font-size: var(--bic-icon-size);
4
+ display: inline-block;
5
+ }
6
+
7
+ svg[data-size="2xl"] {
8
+ --bic-icon-size: var(--bi-icon-2xl) !important;
9
+ }
10
+
11
+ svg[data-size="xl"] {
12
+ --bic-icon-size: var(--bi-icon-xl) !important;
13
+ }
14
+
15
+ svg[data-size="large"] {
16
+ --bic-icon-size: var(--bi-icon-large) !important;
17
+ }
18
+
19
+ svg[data-size="medium"] {
20
+ --bic-icon-size: var(--bi-icon-medium) !important;
21
+ }
22
+
23
+ svg[data-size="small"] {
24
+ --bic-icon-size: var(--bi-icon-small) !important;
25
+ }
26
+
27
+ svg[data-color="inherit"] {
28
+ color: inherit;
29
+ }
30
+
31
+ svg[data-color="primary"] {
32
+ color: #01417b;
33
+ }
34
+
35
+ svg[data-color="gray"] {
36
+ color: #1c1b1b;
37
+ }
38
+
39
+ svg[data-color="black"] {
40
+ color: var(--bi-basic-key);
41
+ }
42
+
43
+ svg[data-color="white"] {
44
+ color: var(--bi-basic-white);
45
+ }
package/dist/components/validation-message.css CHANGED
@@ -15,19 +15,19 @@
15
15
  position: relative;
16
16
  }
17
17
 
18
- .bi-validation-message:has( > [data-bi-icon="true"]):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
18
+ .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
19
19
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
20
20
  }
21
21
 
22
- .bi-validation-message:has( > [data-bi-icon="true"]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
22
+ .bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
23
23
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
24
24
  }
25
25
 
26
- .bi-validation-message:has( > [data-bi-icon="true"]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
26
+ .bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
27
27
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
28
28
  }
29
29
 
30
- .bi-validation-message > [data-bi-icon="true"] {
30
+ .bi-validation-message > svg {
31
31
  font-size: var(--bic-validation-message-icon-size);
32
32
  top: var(--bic-validation-message-padding);
33
33
  left: var(--bic-validation-message-padding);
package/dist/components.css CHANGED
@@ -29,7 +29,7 @@
29
29
  position: relative;
30
30
  }
31
31
 
32
- .bi-alert > [data-bi-icon="true"] {
32
+ .bi-alert > svg {
33
33
  font-size: var(--bic-alert-icon-size);
34
34
  }
35
35
 
@@ -1076,7 +1076,7 @@
1076
1076
  --bic-chip-text-color: var(--bi-success-90);
1077
1077
  }
1078
1078
 
1079
- .bi-chip > [data-bi-icon="true"] {
1079
+ .bi-chip > svg {
1080
1080
  display: inherit;
1081
1081
  font-size: var(--bic-chip-icon-size);
1082
1082
  }
@@ -1789,7 +1789,7 @@ body:has(.bi-dialog:modal) {
1789
1789
  border-radius: var(--bi-radius-small);
1790
1790
  }
1791
1791
 
1792
- .bi-filter-group > button > [data-bi-icon="true"] {
1792
+ .bi-filter-group > button > svg {
1793
1793
  width: var(--bi-scale-6x);
1794
1794
  height: var(--bi-scale-6x);
1795
1795
  font-size: var(--bi-icon-medium);
@@ -2004,6 +2004,52 @@ body:has(.bi-dialog:modal) {
2004
2004
  line-height: 1.5;
2005
2005
  }
2006
2006
 
2007
+ svg {
2008
+ --bic-icon-size: inherit;
2009
+ font-size: var(--bic-icon-size);
2010
+ display: inline-block;
2011
+ }
2012
+
2013
+ svg[data-size="2xl"] {
2014
+ --bic-icon-size: var(--bi-icon-2xl) !important;
2015
+ }
2016
+
2017
+ svg[data-size="xl"] {
2018
+ --bic-icon-size: var(--bi-icon-xl) !important;
2019
+ }
2020
+
2021
+ svg[data-size="large"] {
2022
+ --bic-icon-size: var(--bi-icon-large) !important;
2023
+ }
2024
+
2025
+ svg[data-size="medium"] {
2026
+ --bic-icon-size: var(--bi-icon-medium) !important;
2027
+ }
2028
+
2029
+ svg[data-size="small"] {
2030
+ --bic-icon-size: var(--bi-icon-small) !important;
2031
+ }
2032
+
2033
+ svg[data-color="inherit"] {
2034
+ color: inherit;
2035
+ }
2036
+
2037
+ svg[data-color="primary"] {
2038
+ color: #01417b;
2039
+ }
2040
+
2041
+ svg[data-color="gray"] {
2042
+ color: #1c1b1b;
2043
+ }
2044
+
2045
+ svg[data-color="black"] {
2046
+ color: var(--bi-basic-key);
2047
+ }
2048
+
2049
+ svg[data-color="white"] {
2050
+ color: var(--bi-basic-white);
2051
+ }
2052
+
2007
2053
  :where(.bi-input) {
2008
2054
  margin: 0;
2009
2055
  }
@@ -2962,19 +3008,19 @@ body:has(.bi-dialog:modal) {
2962
3008
  position: relative;
2963
3009
  }
2964
3010
 
2965
- .bi-validation-message:has( > [data-bi-icon="true"]):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3011
+ .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2966
3012
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2967
3013
  }
2968
3014
 
2969
- .bi-validation-message:has( > [data-bi-icon="true"]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3015
+ .bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2970
3016
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2971
3017
  }
2972
3018
 
2973
- .bi-validation-message:has( > [data-bi-icon="true"]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3019
+ .bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2974
3020
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2975
3021
  }
2976
3022
 
2977
- .bi-validation-message > [data-bi-icon="true"] {
3023
+ .bi-validation-message > svg {
2978
3024
  font-size: var(--bic-validation-message-icon-size);
2979
3025
  top: var(--bic-validation-message-padding);
2980
3026
  left: var(--bic-validation-message-padding);
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.24",
3
+ "version": "0.3.0",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
+ "homepage": "https://designsystem.bi.no/",
6
7
  "license": "ISC",
7
8
  "type": "module",
8
9
  "publishConfig": {
@@ -23,7 +24,7 @@
23
24
  "lightningcss": "^1.30.1",
24
25
  "modern-normalize": "^3.0.1",
25
26
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.2.24"
27
+ "@bi-digital/tokens": "0.3.0"
27
28
  },
28
29
  "scripts": {
29
30
  "build": "rimraf dist && node config.js",
package/dist/assets/icons/bi-cart.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" viewBox="0 0 25 25">
2
- <path fill-rule="evenodd" d="M9.118 7.32a3.748 3.748 0 0 1 3.745-3.745 3.748 3.748 0 0 1 3.746 3.744h3.245v10.986a3.247 3.247 0 0 1-3.246 3.246h-7.49a3.247 3.247 0 0 1-3.245-3.246V7.319h3.245Zm0 1.5v2.994h1.5V8.819h4.491v2.995h1.5V8.819h1.745v9.486c0 .963-.782 1.746-1.746 1.746h-7.49a1.747 1.747 0 0 1-1.745-1.746V8.819h1.745Zm5.991-1.5h-4.491a2.248 2.248 0 0 1 2.245-2.245 2.248 2.248 0 0 1 2.246 2.244Z" clip-rule="evenodd"/>
3
- </svg>
package/dist/icons.css DELETED
@@ -1,58 +0,0 @@
1
- .bi-icon {
2
- width: 1em;
3
- height: 1em;
4
- font-size: inherit;
5
- background: currentColor;
6
- display: inline-block;
7
- -webkit-mask-position: center;
8
- mask-position: center;
9
- -webkit-mask-size: 100%;
10
- mask-size: 100%;
11
- -webkit-mask-repeat: no-repeat;
12
- mask-repeat: no-repeat;
13
- }
14
-
15
- .bi-icon[data-size="2xl"] {
16
- font-size: 3rem !important;
17
- }
18
-
19
- .bi-icon[data-size="xl"] {
20
- font-size: 2.5rem !important;
21
- }
22
-
23
- .bi-icon[data-size="large"] {
24
- font-size: 2rem !important;
25
- }
26
-
27
- .bi-icon[data-size="medium"] {
28
- font-size: 1.5rem !important;
29
- }
30
-
31
- .bi-icon[data-size="small"] {
32
- font-size: 1.25rem !important;
33
- }
34
-
35
- .bi-icon[data-color="inherit"] {
36
- color: inherit;
37
- }
38
-
39
- .bi-icon[data-color="primary"] {
40
- color: var(--bi-primary-50);
41
- }
42
-
43
- .bi-icon[data-color="gray"] {
44
- color: #1c1b1b;
45
- }
46
-
47
- .bi-icon[data-color="black"] {
48
- color: #000;
49
- }
50
-
51
- .bi-icon[data-color="white"] {
52
- color: #fff;
53
- }
54
-
55
- .bi-icon.bi-icon-cart {
56
- -webkit-mask-image: url("./assets/icons/bi-cart.svg");
57
- mask-image: url("./assets/icons/bi-cart.svg");
58
- }