gd-bs 6.4.2 → 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 -210
  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 +50 -119
  11. package/src/styles/_root.scss +48 -2
  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.2",
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
@@ -80,7 +80,7 @@
80
80
  .btn:focus-visible {
81
81
  background-color: var(--sp-neutral-dark, #201f1e);
82
82
  border-color: var(--sp-neutral-dark, #201f1e);
83
- color: var(--sp-neutral-lighter-alt, #faf9f8);
83
+ color: var(--sp-neutral-lighter, #f3f2f1);
84
84
  }
85
85
  /** Button Icon - Custom class */
86
86
  .btn-icon {
@@ -106,16 +106,16 @@
106
106
  --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
107
107
  }
108
108
  .btn-outline-light {
109
- --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
110
- --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);
111
111
  --bs-btn-hover-color: var(--sp-black, #000000);
112
- --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
113
- --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);
114
114
  --bs-btn-active-color: var(--sp-black, #000000);
115
- --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
116
- --bs-btn-active-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
117
- --bs-btn-disabled-color: var(--sp-neutral-lighter-alt, #faf9f8);
118
- --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);
119
119
  }
120
120
  .btn-outline-primary {
121
121
  --bs-btn-color: var(--sp-theme-primary, #0078d4);
@@ -130,16 +130,16 @@
130
130
  --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
131
131
  }
132
132
  .btn-outline-secondary {
133
- --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
134
- --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);
135
135
  --bs-btn-hover-color: var(--sp-white, #ffffff);
136
- --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
137
- --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);
138
138
  --bs-btn-active-color: var(--sp-white, #ffffff);
139
- --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
140
- --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
141
- --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
142
- --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);
143
143
  }
144
144
  .btn-outline-success {
145
145
  --bs-btn-color: var(--sp-success-icon, #107c10);
@@ -169,8 +169,8 @@
169
169
  }
170
170
  .btn-secondary {
171
171
  --bs-btn-color: var(--sp-white, #ffffff);
172
- --bs-btn-bg: var(--sp-neutral-secondary, #605e5c);
173
- --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);
174
174
  --bs-btn-hover-color: var(--sp-white, #ffffff);
175
175
  --bs-btn-hover-bg: var(--sp-neutral-primary, #323130);
176
176
  --bs-btn-hover-border-color: var(--sp-neutral-primary-alt, #3b3a39);
@@ -178,91 +178,29 @@
178
178
  --bs-btn-active-bg: var(--sp-neutral-primary-alt, #3b3a39);
179
179
  --bs-btn-active-border-color: var(--sp-neutral-secondary-alt, #8a8886);
180
180
  --bs-btn-disabled-color: var(--sp-white, #ffffff);
181
- --bs-btn-disabled-bg: var(--sp-neutral-secondary, #605e5c);
182
- --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
183
- }
184
- .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
185
- background-color: var(--sp-theme-primary, #0078d4);
186
- border-color: var(--sp-theme-primary, #0078d4);
187
- color: var(--sp-white, #ffffff);
188
- }
189
- /* Color match the primary button hover */
190
- .btn-primary:hover {
191
- background-color: var(--sp-theme-darker, #004578);
192
- border-color: var(--sp-theme-darker, #004578);
193
- }
194
- /* Color match primary outline button */
195
- .btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
196
- border-color: var(--sp-theme-primary, #0078d4);
197
- color: var(--sp-theme-primary, #0078d4);
198
- }
199
- /* Color match primary outline button hover */
200
- .btn-outline-primary:hover {
201
- background-color: var(--sp-theme-primary, #0078d4);
202
- border-color: var(--sp-theme-primary, #0078d4);
203
- color: var(--sp-white, #ffffff);
204
- }
205
- .btn-outline-light {
206
- --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
207
- --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
208
- --bs-btn-hover-color: var(--sp-black, #000000);
209
- --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
210
- --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
211
- --bs-btn-active-color: var(--sp-black, #000000);
212
- --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);
213
183
  }
214
184
  /* Fix color for outline light focus */
215
185
  .btn-outline-light:focus {
216
- color: var(--sp-neutral-lighter-alt, #faf9f8);
217
- }
218
- .btn-outline-light:hover {
219
- background-color: var(--sp-neutral-lighter-alt, #faf9f8);
220
- border-color: var(--sp-neutral-lighter-alt, #faf9f8);
186
+ color: var(--sp-neutral-lighter, #f3f2f1);
221
187
  }
222
188
  /* Fix color for outline light active */
223
189
  .btn-outline-light:active, .btn-outline-light:hover {
224
- color: var(--sp-black, #000000);
225
190
  svg.brand path {
226
191
  fill: var(--sp-black, #000000);
227
192
  }
228
193
  }
229
- .btn-outline-secondary {
230
- --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
231
- --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
232
- --bs-btn-hover-color: var(--sp-white, #ffffff);
233
- --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
234
- --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
235
- --bs-btn-active-color: var(--sp-white, #ffffff);
236
- --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
237
- --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
238
- --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
239
- --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
240
- }
241
- .btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show {
242
- background-color: var(--sp-theme-dark, #005a9e);
243
- border-color: var(--sp-theme-dark, #005a9e);
244
- color: var(--sp-primary-button-text, #ffffff);
245
- }
246
194
  /* Color match primary outline button focus */
247
195
  .btn-check:focus+.bs .btn-outline-primary, .btn-outline-primary:focus {
248
196
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
249
197
  }
250
- /* Color match primary outline button active */
251
- .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 {
252
- background-color: var(--sp-theme-darker, #004578);
253
- border-color: var(--sp-theme-darker, #004578);
254
- }
255
198
  /* Color match the primary button focus */
256
199
  .btn-check:focus+.btn-primary, .btn-primary:focus {
257
200
  background-color: var(--sp-theme-darker, #004578);
258
201
  border-color: var(--sp-theme-darker, #004578);
259
202
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
260
203
  }
261
- /* Color match the primary button active */
262
- .btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
263
- background-color: var(--sp-theme-light, #c7e0f4);
264
- border-color: var(--sp-theme-light, #c7e0f4);
265
- }
266
204
  /* Color match the shadow on active */
267
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 {
268
206
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
@@ -289,7 +227,7 @@
289
227
  display: inherit;
290
228
  }
291
229
  /* Show checkboxes & toggles as buttons */
292
- .form-check .form-check-input {
230
+ .form-check .form-check-input, .form-select:hover {
293
231
  cursor: pointer;
294
232
  }
295
233
  /* Adjust checkbox size */
@@ -314,10 +252,8 @@
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,6 +122,7 @@
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);
package/src/styles/_tippy.scss CHANGED
@@ -24,24 +24,24 @@
24
24
  /* Tippy Tooltip secondary theme color */
25
25
 
26
26
  .tippy-box[data-theme~='secondary'] {
27
- background-color: var(--sp-neutral-secondary, #605e5c);
27
+ background-color: var(--sp-info-icon, #605e5c);
28
28
  color: var(--sp-white, #ffffff);
29
29
  }
30
30
 
31
31
  .tippy-box[data-theme~='secondary'][data-placement^='top']>.tippy-arrow::before {
32
- border-top-color: var(--sp-neutral-secondary, #605e5c);
32
+ border-top-color: var(--sp-info-icon, #605e5c);
33
33
  }
34
34
 
35
35
  .tippy-box[data-theme~='secondary'][data-placement^='bottom']>.tippy-arrow::before {
36
- border-bottom-color: var(--sp-neutral-secondary, #605e5c);
36
+ border-bottom-color: var(--sp-info-icon, #605e5c);
37
37
  }
38
38
 
39
39
  .tippy-box[data-theme~='secondary'][data-placement^='left']>.tippy-arrow::before {
40
- border-left-color: var(--sp-neutral-secondary, #605e5c);
40
+ border-left-color: var(--sp-info-icon, #605e5c);
41
41
  }
42
42
 
43
43
  .tippy-box[data-theme~='secondary'][data-placement^='right']>.tippy-arrow::before {
44
- border-right-color: var(--sp-neutral-secondary, #605e5c);
44
+ border-right-color: var(--sp-info-icon, #605e5c);
45
45
  }
46
46
 
47
47
  /* Tippy Tooltip success theme color */
@@ -139,24 +139,24 @@
139
139
  /* Tippy Tooltip light theme color - override Tippy default to match Bootstrap */
140
140
 
141
141
  .tippy-box[data-theme~='light'] {
142
- background-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
142
+ background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
143
143
  color: var(--sp-black, #000000) !important;
144
144
  }
145
145
 
146
146
  .tippy-box[data-theme~='light'][data-placement^='top']>.tippy-arrow::before {
147
- border-top-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
147
+ border-top-color: var(--sp-neutral-lighter, #f3f2f1) !important;
148
148
  }
149
149
 
150
150
  .tippy-box[data-theme~='light'][data-placement^='bottom']>.tippy-arrow::before {
151
- border-bottom-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
151
+ border-bottom-color: var(--sp-neutral-lighter, #f3f2f1) !important;
152
152
  }
153
153
 
154
154
  .tippy-box[data-theme~='light'][data-placement^='left']>.tippy-arrow::before {
155
- border-left-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
155
+ border-left-color: var(--sp-neutral-lighter, #f3f2f1) !important;
156
156
  }
157
157
 
158
158
  .tippy-box[data-theme~='light'][data-placement^='right']>.tippy-arrow::before {
159
- border-right-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
159
+ border-right-color: var(--sp-neutral-lighter, #f3f2f1) !important;
160
160
  }
161
161
 
162
162
  /* Tippy Tooltip dark theme color */