@bi-digital/css 0.0.0-experimental-0a7eb0c → 0.0.0-experimental-b8ff5ba

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 (6) hide show
  1. package/dist/baseline.css +7 -0
  2. package/dist/components/footer.css +9 -0
  3. package/dist/components/input.css +8 -14
  4. package/dist/components.css +17 -14
  5. package/dist/index.css +7 -0
  6. package/package.json +4 -4
package/dist/baseline.css CHANGED
@@ -10,3 +10,10 @@ html:has(bi-navbar) {
10
10
  html:has(bi-in-page-links) {
11
11
  scroll-padding-top: var(--bi-layout-navbar-height);
12
12
  }
13
+
14
+ html a:focus-visible {
15
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
16
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
17
+ outline-offset: var(--_bi--focus, 2px);
18
+ border-radius: var(--bi-radius-small);
19
+ }
package/dist/components/footer.css CHANGED
@@ -56,6 +56,14 @@
56
56
  }
57
57
  }
58
58
 
59
+ .bi-footer .bi-footer--links-container .bi-footer--links .bi-link {
60
+ flex-wrap: wrap;
61
+ align-content: center;
62
+ min-width: 44px;
63
+ min-height: 44px;
64
+ display: flex;
65
+ }
66
+
59
67
  .bi-footer .bi-footer--links-container .bi-footer--links > p {
60
68
  margin: 0 var(--bi-scale-0-50x) 0 0;
61
69
  font-weight: 300;
@@ -79,6 +87,7 @@
79
87
 
80
88
  @media not (min-width: 768px) {
81
89
  .bi-footer .bi-footer--links-container .bi-footer--links > div {
90
+ gap: unset;
82
91
  flex-direction: column;
83
92
  }
84
93
  }
package/dist/components/input.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --bic-input-color: var(--bi-neutral-95);
23
23
  --bic-input-disabled-color: var(--bi-neutral-50);
24
24
  --bic-input-placeholder-color: var(--bi-neutral-60);
25
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
25
26
  }
26
27
 
27
28
  .bi-input[data-dark="true"] {
@@ -32,6 +33,7 @@
32
33
  --bic-input-color: var(--bi-basic-white);
33
34
  --bic-input-disabled-color: var(--bi-neutral-40);
34
35
  --bic-input-placeholder-color: var(--bi-neutral-30);
36
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
35
37
  }
36
38
 
37
39
  .bi-input {
@@ -141,14 +143,10 @@
141
143
  }
142
144
 
143
145
  .bi-input:-webkit-any(select) {
144
- --_bic-select-diagonal-1: transparent calc(40%);
145
- --_bic-select-diagonal-2: currentcolor calc(40%);
146
- --_bic-select-diagonal-3: currentcolor calc(60%);
147
- --_bic-select-diagonal-4: transparent calc(60%);
148
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
149
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
146
+ background-image: var(--bic-input-select-chevron);
147
+ background-position: calc(100% - .5em);
150
148
  background-repeat: no-repeat;
151
- background-size: .4em .4em;
149
+ background-size: 1.5em;
152
150
  }
153
151
 
154
152
  .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
@@ -156,14 +154,10 @@
156
154
  }
157
155
 
158
156
  .bi-input:is(select) {
159
- --_bic-select-diagonal-1: transparent calc(40%);
160
- --_bic-select-diagonal-2: currentcolor calc(40%);
161
- --_bic-select-diagonal-3: currentcolor calc(60%);
162
- --_bic-select-diagonal-4: transparent calc(60%);
163
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
164
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
157
+ background-image: var(--bic-input-select-chevron);
158
+ background-position: calc(100% - .5em);
165
159
  background-repeat: no-repeat;
166
- background-size: .4em .4em;
160
+ background-size: 1.5em;
167
161
  }
168
162
 
169
163
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
package/dist/components.css CHANGED
@@ -1896,6 +1896,14 @@ body:has(.bi-dialog:modal) {
1896
1896
  }
1897
1897
  }
1898
1898
 
1899
+ .bi-footer .bi-footer--links-container .bi-footer--links .bi-link {
1900
+ flex-wrap: wrap;
1901
+ align-content: center;
1902
+ min-width: 44px;
1903
+ min-height: 44px;
1904
+ display: flex;
1905
+ }
1906
+
1899
1907
  .bi-footer .bi-footer--links-container .bi-footer--links > p {
1900
1908
  margin: 0 var(--bi-scale-0-50x) 0 0;
1901
1909
  font-weight: 300;
@@ -1919,6 +1927,7 @@ body:has(.bi-dialog:modal) {
1919
1927
 
1920
1928
  @media not (min-width: 768px) {
1921
1929
  .bi-footer .bi-footer--links-container .bi-footer--links > div {
1930
+ gap: unset;
1922
1931
  flex-direction: column;
1923
1932
  }
1924
1933
  }
@@ -2028,6 +2037,7 @@ body:has(.bi-dialog:modal) {
2028
2037
  --bic-input-color: var(--bi-neutral-95);
2029
2038
  --bic-input-disabled-color: var(--bi-neutral-50);
2030
2039
  --bic-input-placeholder-color: var(--bi-neutral-60);
2040
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2031
2041
  }
2032
2042
 
2033
2043
  .bi-input[data-dark="true"] {
@@ -2038,6 +2048,7 @@ body:has(.bi-dialog:modal) {
2038
2048
  --bic-input-color: var(--bi-basic-white);
2039
2049
  --bic-input-disabled-color: var(--bi-neutral-40);
2040
2050
  --bic-input-placeholder-color: var(--bi-neutral-30);
2051
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2041
2052
  }
2042
2053
 
2043
2054
  .bi-input {
@@ -2147,14 +2158,10 @@ body:has(.bi-dialog:modal) {
2147
2158
  }
2148
2159
 
2149
2160
  .bi-input:-webkit-any(select) {
2150
- --_bic-select-diagonal-1: transparent calc(40%);
2151
- --_bic-select-diagonal-2: currentcolor calc(40%);
2152
- --_bic-select-diagonal-3: currentcolor calc(60%);
2153
- --_bic-select-diagonal-4: transparent calc(60%);
2154
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
2155
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
2161
+ background-image: var(--bic-input-select-chevron);
2162
+ background-position: calc(100% - .5em);
2156
2163
  background-repeat: no-repeat;
2157
- background-size: .4em .4em;
2164
+ background-size: 1.5em;
2158
2165
  }
2159
2166
 
2160
2167
  .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
@@ -2162,14 +2169,10 @@ body:has(.bi-dialog:modal) {
2162
2169
  }
2163
2170
 
2164
2171
  .bi-input:is(select) {
2165
- --_bic-select-diagonal-1: transparent calc(40%);
2166
- --_bic-select-diagonal-2: currentcolor calc(40%);
2167
- --_bic-select-diagonal-3: currentcolor calc(60%);
2168
- --_bic-select-diagonal-4: transparent calc(60%);
2169
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
2170
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
2172
+ background-image: var(--bic-input-select-chevron);
2173
+ background-position: calc(100% - .5em);
2171
2174
  background-repeat: no-repeat;
2172
- background-size: .4em .4em;
2175
+ background-size: 1.5em;
2173
2176
  }
2174
2177
 
2175
2178
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
package/dist/index.css CHANGED
@@ -396,3 +396,10 @@ html:has(bi-navbar) {
396
396
  html:has(bi-in-page-links) {
397
397
  scroll-padding-top: var(--bi-layout-navbar-height);
398
398
  }
399
+
400
+ html a:focus-visible {
401
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
402
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
403
+ outline-offset: var(--_bi--focus, 2px);
404
+ border-radius: var(--bi-radius-small);
405
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.0.0-experimental-0a7eb0c",
3
+ "version": "0.0.0-experimental-b8ff5ba",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -18,12 +18,12 @@
18
18
  "/dist"
19
19
  ],
20
20
  "devDependencies": {
21
- "browserslist": "^4.24.5",
22
- "glob": "^11.0.1",
21
+ "browserslist": "^4.25.2",
22
+ "glob": "^11.0.3",
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.0.0-experimental-0a7eb0c"
26
+ "@bi-digital/tokens": "0.0.0-experimental-b8ff5ba"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",