gd-bs 6.4.1 → 6.4.3

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 (12) hide show
  1. package/build/bs.js +1 -1
  2. package/dist/gd-bs-icons.js +1 -1
  3. package/dist/gd-bs-icons.js.LICENSE.txt +214 -218
  4. package/dist/gd-bs-icons.min.js +1 -1
  5. package/dist/gd-bs.js +1 -1
  6. package/dist/gd-bs.js.LICENSE.txt +210 -210
  7. package/dist/gd-bs.min.js +1 -1
  8. package/package.json +4 -4
  9. package/pnpm-lock.yaml +14 -14
  10. package/src/styles/_custom.scss +68 -137
  11. package/src/styles/_root.scss +49 -3
  12. package/src/styles/_tippy.scss +10 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "6.4.1",
3
+ "version": "6.4.3",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
@@ -36,13 +36,13 @@
36
36
  "@popperjs/core": "^2.11.8",
37
37
  "bootstrap": "^5.3.2",
38
38
  "bootstrap-icons": "^1.11.1",
39
- "core-js": "^3.33.2",
39
+ "core-js": "^3.33.3",
40
40
  "tippy.js": "^6.3.7"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@babel/core": "^7.23.3",
44
44
  "@babel/preset-env": "^7.23.3",
45
- "@types/node": "^18.18.9",
45
+ "@types/node": "^18.18.11",
46
46
  "autoprefixer": "^10.4.16",
47
47
  "babel-loader": "^9.1.3",
48
48
  "css-loader": "^6.8.1",
@@ -52,7 +52,7 @@
52
52
  "sass-loader": "^13.3.2",
53
53
  "style-loader": "^3.3.3",
54
54
  "terser-webpack-plugin": "^5.3.9",
55
- "ts-loader": "^9.5.0",
55
+ "ts-loader": "^9.5.1",
56
56
  "typedoc": "^0.24.8",
57
57
  "typescript": "4.9.5",
58
58
  "webpack": "^5.89.0",
package/pnpm-lock.yaml CHANGED
@@ -2,12 +2,12 @@ dependencies:
2
2
  '@popperjs/core': 2.11.8
3
3
  bootstrap: 5.3.2_@popperjs+core@2.11.8
4
4
  bootstrap-icons: 1.11.1
5
- core-js: 3.33.2
5
+ core-js: 3.33.3
6
6
  tippy.js: 6.3.7
7
7
  devDependencies:
8
8
  '@babel/core': 7.23.3
9
9
  '@babel/preset-env': 7.23.3_@babel+core@7.23.3
10
- '@types/node': 18.18.9
10
+ '@types/node': 18.18.11
11
11
  autoprefixer: 10.4.16
12
12
  babel-loader: 9.1.3_8d9fd6ebbdf323464e360929a56a208f
13
13
  css-loader: 6.8.1_webpack@5.89.0
@@ -17,7 +17,7 @@ devDependencies:
17
17
  sass-loader: 13.3.2_sass@1.69.5+webpack@5.89.0
18
18
  style-loader: 3.3.3_webpack@5.89.0
19
19
  terser-webpack-plugin: 5.3.9_webpack@5.89.0
20
- ts-loader: 9.5.0_typescript@4.9.5+webpack@5.89.0
20
+ ts-loader: 9.5.1_typescript@4.9.5+webpack@5.89.0
21
21
  typedoc: 0.24.8_typescript@4.9.5
22
22
  typescript: 4.9.5
23
23
  webpack: 5.89.0_webpack-cli@5.1.4
@@ -1353,7 +1353,7 @@ packages:
1353
1353
  /@types/glob/5.0.30:
1354
1354
  dependencies:
1355
1355
  '@types/minimatch': 5.1.2
1356
- '@types/node': 18.18.9
1356
+ '@types/node': 18.18.11
1357
1357
  dev: true
1358
1358
  resolution:
1359
1359
  integrity: sha1-ECZAnFYlqGiQdGAoCNCCsoZ7ilE=
@@ -1369,12 +1369,12 @@ packages:
1369
1369
  dev: true
1370
1370
  resolution:
1371
1371
  integrity: sha1-fyrX7FX5FEgvybHsS7GuYCjUYGY=
1372
- /@types/node/18.18.9:
1372
+ /@types/node/18.18.11:
1373
1373
  dependencies:
1374
1374
  undici-types: 5.26.5
1375
1375
  dev: true
1376
1376
  resolution:
1377
- integrity: sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==
1377
+ integrity: sha512-c1vku6qnTeujJneYH94/4aq73XrVcsJe35UPyAsSok1ijiKrkRzK+AxQPSpNMUnC03roWBBwJx/9I8V7lQoxmA==
1378
1378
  /@types/node/8.0.0:
1379
1379
  dev: true
1380
1380
  resolution:
@@ -1859,11 +1859,11 @@ packages:
1859
1859
  dev: true
1860
1860
  resolution:
1861
1861
  integrity: sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
1862
- /core-js/3.33.2:
1862
+ /core-js/3.33.3:
1863
1863
  dev: false
1864
1864
  requiresBuild: true
1865
1865
  resolution:
1866
- integrity: sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==
1866
+ integrity: sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==
1867
1867
  /cosmiconfig/8.3.6_typescript@4.9.5:
1868
1868
  dependencies:
1869
1869
  import-fresh: 3.3.0
@@ -2281,7 +2281,7 @@ packages:
2281
2281
  integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
2282
2282
  /jest-worker/27.5.1:
2283
2283
  dependencies:
2284
- '@types/node': 18.18.9
2284
+ '@types/node': 18.18.11
2285
2285
  merge-stream: 2.0.0
2286
2286
  supports-color: 8.1.1
2287
2287
  dev: true
@@ -3039,7 +3039,7 @@ packages:
3039
3039
  node: '>=8.0'
3040
3040
  resolution:
3041
3041
  integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
3042
- /ts-loader/9.5.0_typescript@4.9.5+webpack@5.89.0:
3042
+ /ts-loader/9.5.1_typescript@4.9.5+webpack@5.89.0:
3043
3043
  dependencies:
3044
3044
  chalk: 4.1.2
3045
3045
  enhanced-resolve: 5.15.0
@@ -3055,7 +3055,7 @@ packages:
3055
3055
  typescript: '*'
3056
3056
  webpack: ^5.0.0
3057
3057
  resolution:
3058
- integrity: sha512-LLlB/pkB4q9mW2yLdFMnK3dEHbrBjeZTYguaaIfusyojBgAGf5kF+O6KcWqiGzWqHk0LBsoolrp4VftEURhybg==
3058
+ integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==
3059
3059
  /typedoc/0.24.8_typescript@4.9.5:
3060
3060
  dependencies:
3061
3061
  lunr: 2.3.9
@@ -3270,12 +3270,12 @@ specifiers:
3270
3270
  '@babel/core': ^7.23.3
3271
3271
  '@babel/preset-env': ^7.23.3
3272
3272
  '@popperjs/core': ^2.11.8
3273
- '@types/node': ^18.18.9
3273
+ '@types/node': ^18.18.11
3274
3274
  autoprefixer: ^10.4.16
3275
3275
  babel-loader: ^9.1.3
3276
3276
  bootstrap: ^5.3.2
3277
3277
  bootstrap-icons: ^1.11.1
3278
- core-js: ^3.33.2
3278
+ core-js: ^3.33.3
3279
3279
  css-loader: ^6.8.1
3280
3280
  dts-bundle: ^0.7.3
3281
3281
  postcss-loader: ^7.3.3
@@ -3284,7 +3284,7 @@ specifiers:
3284
3284
  style-loader: ^3.3.3
3285
3285
  terser-webpack-plugin: ^5.3.9
3286
3286
  tippy.js: ^6.3.7
3287
- ts-loader: ^9.5.0
3287
+ ts-loader: ^9.5.1
3288
3288
  typedoc: ^0.24.8
3289
3289
  typescript: 4.9.5
3290
3290
  webpack: ^5.89.0
package/src/styles/_custom.scss CHANGED
@@ -12,19 +12,24 @@
12
12
  a:active, .link-primary:active {
13
13
  color: var(--sp-theme-light, #c7e0f4);
14
14
  }
15
- /* Color match accordion on focus */
16
- .accordion-button:focus {
17
- border-color: var(--sp-theme-secondary, #2b88d8);
18
- box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
19
- }
20
- /* Color match accordion while expanded */
21
- .accordion-button:not(.collapsed) {
22
- background-color: var(--sp-theme-light, #c7e0f4);
23
- color: var(--sp-theme-primary, #0078d4);
15
+ /* Color match accordion */
16
+ .accordion {
17
+ --bs-accordion-btn-focus-border-color: var(--sp-theme-secondary, #2b88d8);
18
+ --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
19
+ --bs-accordion-active-bg: var(--sp-theme-light, #c7e0f4);
20
+ --bs-accordion-active-color: var(--sp-theme-primary, #0078d4);
21
+ }
22
+ .accordion-button::after {
23
+ background: transparent;
24
+ background-color: var(--sp-neutral-dark, #201f1e);
25
+ -webkit-mask: var(--bs-accordion-btn-icon);
26
+ -webkit-mask-repeat: no-repeat;
24
27
  }
25
- /* Color match accordion while expanded */
26
28
  .accordion-button:not(.collapsed)::after {
27
- background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%230078d4%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
29
+ background: transparent;
30
+ background-color: var(--sp-theme-darker, #004578);
31
+ -webkit-mask: var(--bs-accordion-btn-active-icon);
32
+ -webkit-mask-repeat: no-repeat;
28
33
  }
29
34
  .bg-primary {
30
35
  background-color: var(--sp-theme-primary, #0078d4) !important;
@@ -63,7 +68,6 @@
63
68
  /* Close button adjustments */
64
69
  .btn-close {
65
70
  --bs-btn-close-color: var(--sp-black, #000000);
66
- --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
67
71
  background: transparent;
68
72
  background-color: var(--bs-btn-close-color);
69
73
  min-width: auto;
@@ -72,12 +76,11 @@
72
76
  -webkit-mask-origin: content-box;
73
77
  -webkit-mask-position: center;
74
78
  -webkit-mask-repeat: no-repeat;
75
- -webkit-mask-size: auto;
76
79
  }
77
80
  .btn:focus-visible {
78
81
  background-color: var(--sp-neutral-dark, #201f1e);
79
82
  border-color: var(--sp-neutral-dark, #201f1e);
80
- color: var(--sp-neutral-lighter-alt, #faf9f8);
83
+ color: var(--sp-neutral-lighter, #f3f2f1);
81
84
  }
82
85
  /** Button Icon - Custom class */
83
86
  .btn-icon {
@@ -103,16 +106,16 @@
103
106
  --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
104
107
  }
105
108
  .btn-outline-light {
106
- --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
107
- --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
109
+ --bs-btn-color: var(--sp-neutral-lighter, #f3f2f1);
110
+ --bs-btn-border-color: var(--sp-neutral-lighter, #f3f2f1);
108
111
  --bs-btn-hover-color: var(--sp-black, #000000);
109
- --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
110
- --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
112
+ --bs-btn-hover-bg: var(--sp-neutral-lighter, #f3f2f1);
113
+ --bs-btn-hover-border-color: var(--sp-neutral-lighter, #f3f2f1);
111
114
  --bs-btn-active-color: var(--sp-black, #000000);
112
- --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
113
- --bs-btn-active-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
114
- --bs-btn-disabled-color: var(--sp-neutral-lighter-alt, #faf9f8);
115
- --bs-btn-disabled-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
115
+ --bs-btn-active-bg: var(--sp-neutral-lighter, #f3f2f1);
116
+ --bs-btn-active-border-color: var(--sp-neutral-lighter, #f3f2f1);
117
+ --bs-btn-disabled-color: var(--sp-neutral-lighter, #f3f2f1);
118
+ --bs-btn-disabled-border-color: var(--sp-neutral-lighter, #f3f2f1);
116
119
  }
117
120
  .btn-outline-primary {
118
121
  --bs-btn-color: var(--sp-theme-primary, #0078d4);
@@ -127,16 +130,16 @@
127
130
  --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
128
131
  }
129
132
  .btn-outline-secondary {
130
- --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
131
- --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
133
+ --bs-btn-color: var(--sp-info-icon, #605e5c);
134
+ --bs-btn-border-color: var(--sp-info-icon, #605e5c);
132
135
  --bs-btn-hover-color: var(--sp-white, #ffffff);
133
- --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
134
- --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
136
+ --bs-btn-hover-bg: var(--sp-info-icon, #605e5c);
137
+ --bs-btn-hover-border-color: var(--sp-info-icon, #605e5c);
135
138
  --bs-btn-active-color: var(--sp-white, #ffffff);
136
- --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
137
- --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
138
- --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
139
- --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
139
+ --bs-btn-active-bg: var(--sp-info-icon, #605e5c);
140
+ --bs-btn-active-border-color: var(--sp-info-icon, #605e5c);
141
+ --bs-btn-disabled-color: var(--sp-info-icon, #605e5c);
142
+ --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
140
143
  }
141
144
  .btn-outline-success {
142
145
  --bs-btn-color: var(--sp-success-icon, #107c10);
@@ -166,8 +169,8 @@
166
169
  }
167
170
  .btn-secondary {
168
171
  --bs-btn-color: var(--sp-white, #ffffff);
169
- --bs-btn-bg: var(--sp-neutral-secondary, #605e5c);
170
- --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
172
+ --bs-btn-bg: var(--sp-info-icon, #605e5c);
173
+ --bs-btn-border-color: var(--sp-info-icon, #605e5c);
171
174
  --bs-btn-hover-color: var(--sp-white, #ffffff);
172
175
  --bs-btn-hover-bg: var(--sp-neutral-primary, #323130);
173
176
  --bs-btn-hover-border-color: var(--sp-neutral-primary-alt, #3b3a39);
@@ -175,91 +178,29 @@
175
178
  --bs-btn-active-bg: var(--sp-neutral-primary-alt, #3b3a39);
176
179
  --bs-btn-active-border-color: var(--sp-neutral-secondary-alt, #8a8886);
177
180
  --bs-btn-disabled-color: var(--sp-white, #ffffff);
178
- --bs-btn-disabled-bg: var(--sp-neutral-secondary, #605e5c);
179
- --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
180
- }
181
- .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
182
- background-color: var(--sp-theme-primary, #0078d4);
183
- border-color: var(--sp-theme-primary, #0078d4);
184
- color: var(--sp-white, #ffffff);
185
- }
186
- /* Color match the primary button hover */
187
- .btn-primary:hover {
188
- background-color: var(--sp-theme-darker, #004578);
189
- border-color: var(--sp-theme-darker, #004578);
190
- }
191
- /* Color match primary outline button */
192
- .btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
193
- border-color: var(--sp-theme-primary, #0078d4);
194
- color: var(--sp-theme-primary, #0078d4);
195
- }
196
- /* Color match primary outline button hover */
197
- .btn-outline-primary:hover {
198
- background-color: var(--sp-theme-primary, #0078d4);
199
- border-color: var(--sp-theme-primary, #0078d4);
200
- color: var(--sp-white, #ffffff);
201
- }
202
- .btn-outline-light {
203
- --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
204
- --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
205
- --bs-btn-hover-color: var(--sp-black, #000000);
206
- --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
207
- --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
208
- --bs-btn-active-color: var(--sp-black, #000000);
209
- --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
181
+ --bs-btn-disabled-bg: var(--sp-info-icon, #605e5c);
182
+ --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
210
183
  }
211
184
  /* Fix color for outline light focus */
212
185
  .btn-outline-light:focus {
213
- color: var(--sp-neutral-lighter-alt, #faf9f8);
214
- }
215
- .btn-outline-light:hover {
216
- background-color: var(--sp-neutral-lighter-alt, #faf9f8);
217
- border-color: var(--sp-neutral-lighter-alt, #faf9f8);
186
+ color: var(--sp-neutral-lighter, #f3f2f1);
218
187
  }
219
188
  /* Fix color for outline light active */
220
189
  .btn-outline-light:active, .btn-outline-light:hover {
221
- color: var(--sp-black, #000000);
222
190
  svg.brand path {
223
191
  fill: var(--sp-black, #000000);
224
192
  }
225
193
  }
226
- .btn-outline-secondary {
227
- --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
228
- --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
229
- --bs-btn-hover-color: var(--sp-white, #ffffff);
230
- --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
231
- --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
232
- --bs-btn-active-color: var(--sp-white, #ffffff);
233
- --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
234
- --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
235
- --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
236
- --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
237
- }
238
- .btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show {
239
- background-color: var(--sp-theme-dark, #005a9e);
240
- border-color: var(--sp-theme-dark, #005a9e);
241
- color: var(--sp-primary-button-text, #ffffff);
242
- }
243
194
  /* Color match primary outline button focus */
244
195
  .btn-check:focus+.bs .btn-outline-primary, .btn-outline-primary:focus {
245
196
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
246
197
  }
247
- /* Color match primary outline button active */
248
- .btn-check:checked+.bs .btn-outline-primary, .btn-check:active+.bs .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
249
- background-color: var(--sp-theme-darker, #004578);
250
- border-color: var(--sp-theme-darker, #004578);
251
- }
252
198
  /* Color match the primary button focus */
253
199
  .btn-check:focus+.btn-primary, .btn-primary:focus {
254
200
  background-color: var(--sp-theme-darker, #004578);
255
201
  border-color: var(--sp-theme-darker, #004578);
256
202
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
257
203
  }
258
- /* Color match the primary button active */
259
- .btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
260
- background-color: var(--sp-theme-light, #c7e0f4);
261
- border-color: var(--sp-theme-light, #c7e0f4);
262
- }
263
204
  /* Color match the shadow on active */
264
205
  .btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus {
265
206
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
@@ -286,7 +227,7 @@
286
227
  display: inherit;
287
228
  }
288
229
  /* Show checkboxes & toggles as buttons */
289
- .form-check .form-check-input {
230
+ .form-check .form-check-input, .form-select:hover {
290
231
  cursor: pointer;
291
232
  }
292
233
  /* Adjust checkbox size */
@@ -300,24 +241,19 @@
300
241
  background-color: var(--sp-theme-primary, #0078d4);
301
242
  transition: background-color 0.2s;
302
243
  -webkit-mask: var(--bs-form-check-bg-image);
303
- -webkit-mask-origin: border-box;
304
- -webkit-mask-position: center;
305
- -webkit-mask-repeat: no-repeat;
306
- -webkit-mask-size: contain;
307
244
  }
308
245
  /* Fix checkbox label alignment */
309
246
  .form-check:not(.form-switch) .form-check-label {
310
- margin-left: 0.5rem;
247
+ margin-left: .5rem;
248
+ margin-top: .25rem;
311
249
  }
312
250
  /** Color match the toggle background color to 'SharePoint Blue' */
313
251
  .form-check-input:checked {
314
252
  background-color: var(--sp-theme-primary, #0078d4);
315
253
  border-color: var(--sp-theme-primary, #0078d4);
316
254
  }
317
- /* Color match form elements */
318
- .form-control {
319
- border-color: var(--sp-neutral-secondary, #605e5c);
320
- border-radius: var(--bs-border-radius, 0.375rem);
255
+ .form-control:hover, .form-select:hover {
256
+ border-color: var(--sp-theme-tertiary, #71afe5);
321
257
  }
322
258
  /* Color match disabled form elements */
323
259
  .form-control:disabled, .form-control[readonly] {
@@ -326,7 +262,7 @@
326
262
  color: var(--sp-neutral-tertiary, #a19f9d);
327
263
  }
328
264
  .form-control::placeholder {
329
- color: var(--sp-neutral-secondary, #605e5c);
265
+ color: var(--sp-info-icon, #605e5c);
330
266
  }
331
267
  .form-range::-webkit-slider-thumb {
332
268
  background-color: var(--sp-theme-primary, #0078d4);
@@ -334,12 +270,6 @@
334
270
  /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
335
271
  .form-select {
336
272
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
337
- border: 1px solid var(--sp-neutral-secondary, #605e5c);
338
- }
339
- /* Set cursor on hover */
340
- .form-select:hover {
341
- border-color: var(--sp-theme-light, #c7e0f4);
342
- cursor: pointer;
343
273
  }
344
274
  /* Color match form-select active */
345
275
  .form-select:active, .form-select:focus {
@@ -351,16 +281,17 @@
351
281
  background-size: 8px 10px;
352
282
  padding-right: 1.65rem;
353
283
  }
354
- .form-switch .form-check-input {
355
- height: 1.25em;
356
- }
357
- /* Color match the toggle on focus */
358
- .form-switch .form-check-input:focus {
359
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232b88d8'/%3e%3c/svg%3e");
360
- }
361
- /* Update toggle to white after checked */
362
- .form-switch .form-check-input:checked {
363
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
284
+ /* Color match the toggle */
285
+ .form-switch {
286
+ .form-check-input {
287
+ height: 1.25em;
288
+ }
289
+ .form-check-input:focus {
290
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232b88d8'/%3e%3c/svg%3e");
291
+ }
292
+ .form-check-input.dark, .form-check-input.dark:focus, .form-check-input.dark:checked {
293
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf9f8'/%3e%3c/svg%3e");
294
+ }
364
295
  }
365
296
  button.btn-close.invert, :not(.btn-group).invert, .btn-group.invert::after, img.invert {
366
297
  filter: invert(1);
@@ -372,10 +303,10 @@
372
303
  -webkit-line-clamp: 1;
373
304
  }
374
305
  /* Color match the active list group item */
375
- .list-group-item.active {
306
+ .list-group {
376
307
  --bs-list-group-active-color: var(--sp-white, #ffffff);
377
- background-color: var(--sp-theme-primary, #0078d4);
378
- border-color: var(--sp-theme-primary, #0078d4);
308
+ --bs-list-group-active-bg: var(--sp-theme-primary, #0078d4);
309
+ --bs-list-group-active-border-color: var(--sp-theme-primary, #0078d4);
379
310
  }
380
311
  .modal-content {
381
312
  color: var(--sp-neutral-dark, #201f1e);
@@ -428,8 +359,8 @@
428
359
  }
429
360
  /* Color match nav-tabs hover to secondary color */
430
361
  .nav-tabs .nav-link:hover {
431
- background-color: var(--sp-neutral-secondary, #605e5c);
432
- border-color: var(--sp-neutral-secondary, #605e5c);
362
+ background-color: var(--sp-info-icon, #605e5c);
363
+ border-color: var(--sp-info-icon, #605e5c);
433
364
  color: var(--sp-primary-button-text, #ffffff);
434
365
  }
435
366
  /* Color match nav-tabs active to SharePoint */
@@ -488,21 +419,21 @@
488
419
  .offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
489
420
  /* Color match the pagination link color to 'SharePoint Blue' */
490
421
  .page-link {
491
- border-color: var(--sp-neutral-secondary, #605e5c);
422
+ border-color: var(--sp-info-icon, #605e5c);
492
423
  color: var(--sp-theme-primary, #0078d4);
493
424
  font-size: 13px;
494
425
  }
495
426
  /* Color match the pagination disabled border colors */
496
427
  .page-item.disabled .page-link {
497
428
  background-color: var(--sp-white, #ffffff);
498
- border-color: var(--sp-neutral-secondary, #605e5c);
499
- color: var(--sp-neutral-secondary, #605e5c);
429
+ border-color: var(--sp-info-icon, #605e5c);
430
+ color: var(--sp-info-icon, #605e5c);
500
431
  pointer-events: none;
501
432
  }
502
433
  /* Color match the pagination active link colors */
503
434
  .page-item.active .page-link {
504
- background-color: var(--sp-neutral-secondary, #605e5c);
505
- border-color: var(--sp-neutral-secondary, #605e5c);
435
+ background-color: var(--sp-info-icon, #605e5c);
436
+ border-color: var(--sp-info-icon, #605e5c);
506
437
  color: var(--sp-primary-button-text, #ffffff);
507
438
  z-index: inherit;
508
439
  }
@@ -514,7 +445,7 @@
514
445
  .page-link:hover {
515
446
  color: var(--sp-primary-text, #333333);
516
447
  background-color: var(--sp-neutral-quaternary, #d2d0ce);
517
- border-color: var(--sp-neutral-secondary, #605e5c);
448
+ border-color: var(--sp-info-icon, #605e5c);
518
449
  }
519
450
  /* Color match for SharePoint */
520
451
  .page-link:focus, .form-control:focus, .form-check-input:focus {
@@ -594,7 +525,7 @@
594
525
  color: var(--sp-accent, #8764b8) !important;
595
526
  }
596
527
  .text-light {
597
- color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
528
+ color: var(--sp-neutral-lighter, #f3f2f1) !important;
598
529
  }
599
530
  .text-muted {
600
531
  color: var(--sp-neutral-secondary-alt, #8a8886) !important;
@@ -603,7 +534,7 @@
603
534
  color: var(--sp-theme-primary, #0078d4) !important;
604
535
  }
605
536
  .text-secondary {
606
- color: var(--sp-neutral-secondary, #605e5c) !important;
537
+ color: var(--sp-info-icon, #605e5c) !important;
607
538
  }
608
539
  .text-success {
609
540
  color: var(--sp-success-icon, #107c10) !important;
package/src/styles/_root.scss CHANGED
@@ -2,10 +2,16 @@
2
2
  :root {
3
3
  --sp-accent: #8764b8;
4
4
  --sp-black: #000000;
5
+ --sp-blocking-icon: #fde7e9;
5
6
  --sp-blue: #0078d4;
6
7
  --sp-blue-light: #00bcf2;
8
+ --sp-error-background: #fde7e9;
7
9
  --sp-error-icon: #a80000;
8
10
  --sp-green: #107c10;
11
+ --sp-green-dark: #004b1c;
12
+ --sp-green-light: #bad80a;
13
+ --sp-info-background: #f3f2f1;
14
+ --sp-info-icon: #605e5c;
9
15
  --sp-magenta-light: #e3008c;
10
16
  --sp-neutral-dark: #201f1e;
11
17
  --sp-neutral-light: #edebe9;
@@ -24,8 +30,12 @@
24
30
  --sp-primary-text: #333333;
25
31
  --sp-purple: #5c2d91;
26
32
  --sp-purple-dark: #32145a;
33
+ --sp-purple-light: #b4a0ff;
27
34
  --sp-red: #e81123;
35
+ --sp-red-dark: #a4262c;
36
+ --sp-severe-warning-background: #fed9cc;
28
37
  --sp-severe-warning-icon: #d83b01;
38
+ --sp-success-background: #dff6dd;
29
39
  --sp-success-icon: #107c10;
30
40
  --sp-teal: #008272;
31
41
  --sp-theme-accent: #0078d4;
@@ -38,9 +48,11 @@
38
48
  --sp-theme-primary: #0078d4;
39
49
  --sp-theme-secondary: #2b88d8;
40
50
  --sp-theme-tertiary: #71afe5;
51
+ --sp-warning-background: #fff4ce;
41
52
  --sp-warning-highlight: #ffb900;
42
53
  --sp-white: #ffffff;
43
54
  --sp-yellow: #ffb900;
55
+ --sp-yellow-dark: #d29200;
44
56
 
45
57
  --bs-blue: var(--sp-blue);
46
58
  --bs-indigo: var(--sp-purple-dark);
@@ -56,14 +68,47 @@
56
68
  --bs-white: var(--sp-white);
57
69
  --bs-gray: var(--sp-neutral-secondary);
58
70
  --bs-gray-dark: var(--sp-neutral-primary);
71
+ --bs-gray-100: var(--sp-neutral-lighter-alt);
72
+ --bs-gray-200: var(--sp-neutral-lighter);
73
+ --bs-gray-300: var(--sp-neutral-light);
74
+ --bs-gray-400: var(--sp-neutral-quaternary);
75
+ --bs-gray-500: var(--sp-neutral-tertiary);
76
+ --bs-gray-600: var(--sp-neutral-secondary);
77
+ --bs-gray-700: var(--sp-neutral-primary-alt);
78
+ --bs-gray-800: var(--sp-neutral-primary);
79
+ --bs-gray-900: var(--sp-neutral-dark);
59
80
  --bs-primary: var(--sp-theme-primary);
60
- --bs-secondary: var(--sp-neutral-secondary);
81
+ --bs-secondary: var(--sp-info-icon);
61
82
  --bs-success: var(--sp-success-icon);
62
83
  --bs-info: var(--sp-accent);
63
84
  --bs-warning: var(--sp-severe-warning-icon);
64
85
  --bs-danger: var(--sp-error-icon);
65
- --bs-light: var(--sp-neutral-lighter-alt);
86
+ --bs-light: var(--sp-neutral-lighter);
66
87
  --bs-dark: var(--sp-neutral-dark);
88
+ --bs-primary-text-emphasis: var(--sp-theme-darker);
89
+ --bs-secondary-text-emphasis: var(--sp-neutral-primary);
90
+ --bs-success-text-emphasis: var(--sp-green-dark);
91
+ --bs-info-text-emphasis: var(--sp-purple-dark);
92
+ --bs-warning-text-emphasis: var(--sp-yellow-dark);
93
+ --bs-danger-text-emphasis: var(--sp-red-dark);
94
+ --bs-light-text-emphasis: var(--sp-neutral-primary-alt);
95
+ --bs-dark-text-emphasis: var(--sp-neutral-primary-alt);
96
+ --bs-primary-bg-subtle: var(--sp-theme-light);
97
+ --bs-secondary-bg-subtle: var(--sp-info-background);
98
+ --bs-success-bg-subtle: var(--sp-success-background);
99
+ --bs-info-bg-subtle: var(--sp-theme-lighter-alt);
100
+ --bs-warning-bg-subtle: var(--sp-severe-warning-background);
101
+ --bs-danger-bg-subtle: var(--sp-error-background);
102
+ --bs-light-bg-subtle: var(--sp-neutral-lighter-alt);
103
+ --bs-dark-bg-subtle: var(--sp-neutral-quaternary-alt);
104
+ --bs-primary-border-subtle: var(--sp-theme-tertiary);
105
+ --bs-secondary-border-subtle: var(--sp-neutral-tertiary-alt);
106
+ --bs-success-border-subtle: var(--sp-green-light);
107
+ --bs-info-border-subtle: var(--sp-purple-light);
108
+ --bs-warning-border-subtle: var(--sp-warning-background);
109
+ --bs-danger-border-subtle: var(--sp-blocking-icon);
110
+ --bs-light-border-subtle: var(--sp-neutral-light);
111
+ --bs-dark-border-subtle: var(--sp-neutral-tertiary);
67
112
  --bs-body-color: var(--sp-neutral-dark);
68
113
  --bs-body-bg: var(--sp-white);
69
114
  --bs-emphasis-color: var(--sp-black);
@@ -77,10 +122,11 @@
77
122
  --bs-highlight-color: var(--sp-neutral-dark);
78
123
  --bs-highlight-bg: var(--sp-neutral-quaternary-alt);
79
124
  --bs-border-color: var(--sp-neutral-quaternary);
125
+ --bs-focus-ring-color: color-mix(in srgb, var(--sp-theme-primary), transparent 75%);
80
126
  --bs-form-valid-color: var(--sp-success-icon);
81
127
  --bs-form-valid-border-color: var(--sp-success-icon);
82
128
  --bs-form-invalid-color: var(--sp-error-icon);
83
129
  --bs-form-invalid-border-color: var(--sp-error-icon);
84
130
  --bs-modal-color: var(--sp-white);
85
- --dt-html-background: var(--sp-white);
131
+ --dt-html-background: var(--sp-white) !important;
86
132
  }