gd-bs 6.3.9 → 6.4.1

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/build/bs.js +1 -1
  2. package/dist/gd-bs-icons.js +1 -1
  3. package/dist/gd-bs-icons.js.LICENSE.txt +8 -0
  4. package/dist/gd-bs-icons.min.js +1 -1
  5. package/dist/gd-bs.js +1 -1
  6. package/dist/gd-bs.min.js +1 -1
  7. package/package.json +1 -1
  8. package/src/styles/_custom.scss +149 -5
  9. package/src/styles/_root.scss +40 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "6.3.9",
3
+ "version": "6.4.1",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
package/src/styles/_custom.scss CHANGED
@@ -60,9 +60,19 @@
60
60
  .breadcrumb-item+.breadcrumb-item::before {
61
61
  padding-top: 0.15rem;
62
62
  }
63
- /* Close button alignment */
63
+ /* Close button adjustments */
64
64
  .btn-close {
65
+ --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
+ background: transparent;
68
+ background-color: var(--bs-btn-close-color);
65
69
  min-width: auto;
70
+ transition: background-color 0.2s;
71
+ -webkit-mask: var(--bs-btn-close-bg);
72
+ -webkit-mask-origin: content-box;
73
+ -webkit-mask-position: center;
74
+ -webkit-mask-repeat: no-repeat;
75
+ -webkit-mask-size: auto;
66
76
  }
67
77
  .btn:focus-visible {
68
78
  background-color: var(--sp-neutral-dark, #201f1e);
@@ -79,11 +89,99 @@
79
89
  .btn-icon-sm {
80
90
  margin: 0 0.25rem 0.14rem -0.25rem;
81
91
  }
82
- /* Color match the primary button to 'SharePoint Blue' */
83
- /* Don't reorder the btn-primary classes. It breaks active colors. */
92
+ /* Don't reorder the btn- classes. It breaks active colors. */
93
+ .btn-outline-danger {
94
+ --bs-btn-color: var(--sp-error-icon, #a80000);
95
+ --bs-btn-border-color: var(--sp-error-icon, #a80000);
96
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
97
+ --bs-btn-hover-bg: var(--sp-error-icon, #a80000);
98
+ --bs-btn-hover-border-color: var(--sp-error-icon, #a80000);
99
+ --bs-btn-active-color: var(--sp-white, #ffffff);
100
+ --bs-btn-active-bg: var(--sp-error-icon, #a80000);
101
+ --bs-btn-active-border-color: var(--sp-error-icon, #a80000);
102
+ --bs-btn-disabled-color: var(--sp-error-icon, #a80000);
103
+ --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
104
+ }
105
+ .btn-outline-light {
106
+ --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
107
+ --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
108
+ --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);
111
+ --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);
116
+ }
117
+ .btn-outline-primary {
118
+ --bs-btn-color: var(--sp-theme-primary, #0078d4);
119
+ --bs-btn-border-color: var(--sp-theme-primary, #0078d4);
120
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
121
+ --bs-btn-hover-bg: var(--sp-theme-primary, #0078d4);
122
+ --bs-btn-hover-border-color: var(--sp-theme-primary, #0078d4);
123
+ --bs-btn-active-color: var(--sp-white, #ffffff);
124
+ --bs-btn-active-bg: var(--sp-theme-primary, #0078d4);
125
+ --bs-btn-active-border-color: var(--sp-theme-primary, #0078d4);
126
+ --bs-btn-disabled-color: var(--sp-theme-primary, #0078d4);
127
+ --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
128
+ }
129
+ .btn-outline-secondary {
130
+ --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
131
+ --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
132
+ --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);
135
+ --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);
140
+ }
141
+ .btn-outline-success {
142
+ --bs-btn-color: var(--sp-success-icon, #107c10);
143
+ --bs-btn-border-color: var(--sp-success-icon, #107c10);
144
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
145
+ --bs-btn-hover-bg: var(--sp-success-icon, #107c10);
146
+ --bs-btn-hover-border-color: var(--sp-success-icon, #107c10);
147
+ --bs-btn-active-color: var(--sp-white, #ffffff);
148
+ --bs-btn-active-bg: var(--sp-success-icon, #107c10);
149
+ --bs-btn-active-border-color: var(--sp-success-icon, #107c10);
150
+ --bs-btn-disabled-color: var(--sp-success-icon, #107c10);
151
+ --bs-btn-disabled-border-color: var(--sp-success-icon, #107c10);
152
+ }
153
+ .btn-primary {
154
+ --bs-btn-color: var(--sp-white, #ffffff);
155
+ --bs-btn-bg: var(--sp-theme-primary, #0078d4);
156
+ --bs-btn-border-color: var(--sp-theme-primary, #0078d4);
157
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
158
+ --bs-btn-hover-bg: var(--sp-theme-dark, #005a9e);
159
+ --bs-btn-hover-border-color: var(--sp-theme-secondary, #2b88d8);
160
+ --bs-btn-active-color: var(--sp-white, #ffffff);
161
+ --bs-btn-active-bg: var(--sp-theme-secondary, #2b88d8);
162
+ --bs-btn-active-border-color: var(--sp-theme-dark-alt, #106ebe);
163
+ --bs-btn-disabled-color: var(--sp-white, #ffffff);
164
+ --bs-btn-disabled-bg: var(--sp-theme-primary, #0078d4);
165
+ --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
166
+ }
167
+ .btn-secondary {
168
+ --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);
171
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
172
+ --bs-btn-hover-bg: var(--sp-neutral-primary, #323130);
173
+ --bs-btn-hover-border-color: var(--sp-neutral-primary-alt, #3b3a39);
174
+ --bs-btn-active-color: var(--sp-white, #ffffff);
175
+ --bs-btn-active-bg: var(--sp-neutral-primary-alt, #3b3a39);
176
+ --bs-btn-active-border-color: var(--sp-neutral-secondary-alt, #8a8886);
177
+ --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
+ }
84
181
  .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
85
182
  background-color: var(--sp-theme-primary, #0078d4);
86
183
  border-color: var(--sp-theme-primary, #0078d4);
184
+ color: var(--sp-white, #ffffff);
87
185
  }
88
186
  /* Color match the primary button hover */
89
187
  .btn-primary:hover {
@@ -99,6 +197,7 @@
99
197
  .btn-outline-primary:hover {
100
198
  background-color: var(--sp-theme-primary, #0078d4);
101
199
  border-color: var(--sp-theme-primary, #0078d4);
200
+ color: var(--sp-white, #ffffff);
102
201
  }
103
202
  .btn-outline-light {
104
203
  --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
@@ -194,7 +293,17 @@
194
293
  .form-check:not(.form-switch) .form-check-input[type=checkbox] {
195
294
  height: 1.25rem;
196
295
  width: 1.25rem;
197
- margin-left: -0.5rem;
296
+ }
297
+ .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] {
298
+ --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z'/%3e%3c/svg%3e");
299
+ background: transparent;
300
+ background-color: var(--sp-theme-primary, #0078d4);
301
+ transition: background-color 0.2s;
302
+ -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;
198
307
  }
199
308
  /* Fix checkbox label alignment */
200
309
  .form-check:not(.form-switch) .form-check-label {
@@ -212,6 +321,7 @@
212
321
  }
213
322
  /* Color match disabled form elements */
214
323
  .form-control:disabled, .form-control[readonly] {
324
+ background-color: var(--sp-neutral-quaternary, #d2d0ce);
215
325
  border-color: var(--sp-neutral-light, #edebe9);
216
326
  color: var(--sp-neutral-tertiary, #a19f9d);
217
327
  }
@@ -263,6 +373,7 @@
263
373
  }
264
374
  /* Color match the active list group item */
265
375
  .list-group-item.active {
376
+ --bs-list-group-active-color: var(--sp-white, #ffffff);
266
377
  background-color: var(--sp-theme-primary, #0078d4);
267
378
  border-color: var(--sp-theme-primary, #0078d4);
268
379
  }
@@ -467,8 +578,41 @@
467
578
  border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
468
579
  }
469
580
  /* Add the default text color */
581
+ .text-body {
582
+ color: var(--sp-primary-text, #333333) !important;
583
+ }
584
+ .text-danger {
585
+ color: var(--sp-error-icon, #a80000) !important;
586
+ }
587
+ .text-dark {
588
+ color: var(--sp-neutral-dark, #201f1e) !important;
589
+ }
470
590
  .text-default {
471
- color: var(--sp-primary-text, #333333);
591
+ color: var(--sp-primary-text, #333333) !important;
592
+ }
593
+ .text-info {
594
+ color: var(--sp-accent, #8764b8) !important;
595
+ }
596
+ .text-light {
597
+ color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
598
+ }
599
+ .text-muted {
600
+ color: var(--sp-neutral-secondary-alt, #8a8886) !important;
601
+ }
602
+ .text-primary {
603
+ color: var(--sp-theme-primary, #0078d4) !important;
604
+ }
605
+ .text-secondary {
606
+ color: var(--sp-neutral-secondary, #605e5c) !important;
607
+ }
608
+ .text-success {
609
+ color: var(--sp-success-icon, #107c10) !important;
610
+ }
611
+ .text-warning {
612
+ color: var(--sp-severe-warning-icon, #d83b01) !important;
613
+ }
614
+ .text-white {
615
+ color: var(--sp-white, #ffffff) !important;
472
616
  }
473
617
  /* Auto size the toast width */
474
618
  .toast {
package/src/styles/_root.scss CHANGED
@@ -2,7 +2,11 @@
2
2
  :root {
3
3
  --sp-accent: #8764b8;
4
4
  --sp-black: #000000;
5
+ --sp-blue: #0078d4;
6
+ --sp-blue-light: #00bcf2;
5
7
  --sp-error-icon: #a80000;
8
+ --sp-green: #107c10;
9
+ --sp-magenta-light: #e3008c;
6
10
  --sp-neutral-dark: #201f1e;
7
11
  --sp-neutral-light: #edebe9;
8
12
  --sp-neutral-lighter: #f3f2f1;
@@ -15,10 +19,15 @@
15
19
  --sp-neutral-tertiary-alt: #c8c6c4;
16
20
  --sp-neutral-quaternary: #d2d0ce;
17
21
  --sp-neutral-quaternary-alt: #e1dfdd;
22
+ --sp-orange: #d83b01;
18
23
  --sp-primary-button-text: #ffffff;
19
24
  --sp-primary-text: #333333;
25
+ --sp-purple: #5c2d91;
26
+ --sp-purple-dark: #32145a;
27
+ --sp-red: #e81123;
20
28
  --sp-severe-warning-icon: #d83b01;
21
29
  --sp-success-icon: #107c10;
30
+ --sp-teal: #008272;
22
31
  --sp-theme-accent: #0078d4;
23
32
  --sp-theme-dark: #005a9e;
24
33
  --sp-theme-darker: #004578;
@@ -31,7 +40,22 @@
31
40
  --sp-theme-tertiary: #71afe5;
32
41
  --sp-warning-highlight: #ffb900;
33
42
  --sp-white: #ffffff;
43
+ --sp-yellow: #ffb900;
34
44
 
45
+ --bs-blue: var(--sp-blue);
46
+ --bs-indigo: var(--sp-purple-dark);
47
+ --bs-purple: var(--sp-purple);
48
+ --bs-pink: var(--sp-magenta-light);
49
+ --bs-red: var(--sp-red);
50
+ --bs-orange: var(--sp-orange);
51
+ --bs-yellow: var(--sp-yellow);
52
+ --bs-green: var(--sp-green);
53
+ --bs-teal: var(--sp-teal);
54
+ --bs-cyan: var(--sp-blue-light);
55
+ --bs-black: var(--sp-black);
56
+ --bs-white: var(--sp-white);
57
+ --bs-gray: var(--sp-neutral-secondary);
58
+ --bs-gray-dark: var(--sp-neutral-primary);
35
59
  --bs-primary: var(--sp-theme-primary);
36
60
  --bs-secondary: var(--sp-neutral-secondary);
37
61
  --bs-success: var(--sp-success-icon);
@@ -40,9 +64,23 @@
40
64
  --bs-danger: var(--sp-error-icon);
41
65
  --bs-light: var(--sp-neutral-lighter-alt);
42
66
  --bs-dark: var(--sp-neutral-dark);
43
- --bs-body-bg: var(--sp-white);
44
67
  --bs-body-color: var(--sp-neutral-dark);
45
- --bs-border-color: var(--sp-neutral-quaternary);
68
+ --bs-body-bg: var(--sp-white);
69
+ --bs-emphasis-color: var(--sp-black);
70
+ --bs-secondary-color: color-mix(in srgb, var(--sp-neutral-dark), transparent 25%);
71
+ --bs-secondary-bg: var(--sp-neutral-light);
72
+ --bs-tertiary-color: color-mix(in srgb, var(--sp-neutral-dark), transparent 50%);
73
+ --bs-tertiary-bg: var(--sp-neutral-lighter-alt);
46
74
  --bs-link-color: var(--sp-theme-primary);
75
+ --bs-link-hover-color: var(--sp-theme-dark);
76
+ --bs-code-color: var(--sp-magenta-light);
77
+ --bs-highlight-color: var(--sp-neutral-dark);
78
+ --bs-highlight-bg: var(--sp-neutral-quaternary-alt);
79
+ --bs-border-color: var(--sp-neutral-quaternary);
80
+ --bs-form-valid-color: var(--sp-success-icon);
81
+ --bs-form-valid-border-color: var(--sp-success-icon);
82
+ --bs-form-invalid-color: var(--sp-error-icon);
83
+ --bs-form-invalid-border-color: var(--sp-error-icon);
47
84
  --bs-modal-color: var(--sp-white);
85
+ --dt-html-background: var(--sp-white);
48
86
  }