@wwtdev/bsds-css 2.3.0 → 2.3.2

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 (13) hide show
  1. package/dist/components/_banner.scss +0 -4
  2. package/dist/components/_buttons.scss +19 -13
  3. package/dist/components/_form-booleans.scss +28 -13
  4. package/dist/components/_pills.scss +6 -2
  5. package/dist/components/banner.css +0 -4
  6. package/dist/components/buttons.css +19 -13
  7. package/dist/components/form-booleans.css +28 -13
  8. package/dist/components/pills.css +6 -2
  9. package/dist/wwt-bsds-preset.js +22 -9
  10. package/dist/wwt-bsds-wc-base.css +64 -26
  11. package/dist/wwt-bsds.css +115 -56
  12. package/dist/wwt-bsds.min.css +1 -1
  13. package/package.json +1 -1
package/dist/components/_banner.scss CHANGED
@@ -35,10 +35,6 @@
35
35
 
36
36
  .bs-banner :where(.bs-banner-content p a) {
37
37
  color: var(--bs-pink-light);
38
- text-decoration: none;
39
- }
40
-
41
- .bs-banner :where(.bs-banner-content p a:hover) {
42
38
  text-decoration: underline;
43
39
  }
44
40
 
package/dist/components/_buttons.scss CHANGED
@@ -1,15 +1,17 @@
1
1
  @mixin buttons() {
2
2
  .bs-button {
3
- --btn-main: var(--bs-blue-base);
3
+ --btn-main: var(--bs-blue-400);
4
4
  --btn-secondary: var(--bs-blue-medium);
5
5
  --btn-highlight: var(--bs-blue-100);
6
6
  --btn-padding: .25rem .75rem;
7
7
  --btn-focus-pseudo-width: calc(100% + 0.5rem);
8
+ --btn-ghost-ink: var(--bs-ink-blue);
9
+ --btn-ink: var(--bs-white);
8
10
  align-items: center;
9
11
  background-color: var(--btn-main);
10
12
  border: none;
11
13
  border-radius: 0.25rem;
12
- color: var(--bs-white);
14
+ color: var(--btn-ink);
13
15
  cursor: pointer;
14
16
  display: inline-flex;
15
17
  font-size: var(--btn-text-size, var(--bs-text-md));
@@ -68,11 +70,11 @@
68
70
 
69
71
  /* ------------ Ghost Buttons ------------ */
70
72
  .bs-button:where([data-ghost]:not([data-ghost="false"])) {
73
+ --btn-ink: var(--btn-ghost-ink);
71
74
  --btn-light: var(--bs-blue-10);
72
75
  --btn-secondary: var(--bs-blue-10);
73
76
  background-color: transparent;
74
77
  box-shadow: inset 0 0 0 1px var(--btn-main);
75
- color: var(--btn-main);
76
78
  }
77
79
  .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
78
80
  border-radius: 0.4375rem;
@@ -87,12 +89,13 @@
87
89
  inset 0px 0px 4px 1px var(--btn-highlight);
88
90
  }
89
91
 
90
- /* ------------ Button type ------------ */
92
+ /* ------------ VARIANTS ------------ */
91
93
  .bs-button:where([data-variant^='secondary']) {
92
94
  --btn-main: var(--bs-plum-400);
93
- --btn-secondary: var(--bs-plum-300);
95
+ --btn-secondary: var(--bs-plum-medium);
94
96
  --btn-light: var(--bs-plum-10);
95
97
  --btn-highlight: var(--bs-plum-100);
98
+ --btn-ghost-ink: var(--bs-ink-plum);
96
99
  }
97
100
  .dark .bs-button:where([data-variant^='secondary']) {
98
101
  --btn-main: var(--bs-plum-200);
@@ -102,37 +105,40 @@
102
105
  }
103
106
  .bs-button:where([data-variant^='positive']) {
104
107
  --btn-main: var(--bs-purple-400);
105
- --btn-secondary: var(--bs-purple-300);
108
+ --btn-secondary: var(--bs-purple-medium);
106
109
  --btn-light: var(--bs-purple-10);
107
110
  --btn-highlight: var(--bs-purple-100);
111
+ --btn-ghost-ink: var(--bs-ink-purple);
108
112
  }
109
113
  .bs-button:where([data-variant^='warning']) {
110
114
  --btn-main: var(--bs-orange-warning);
111
- --btn-secondary: var(--bs-orange-300);
115
+ --btn-secondary: var(--bs-orange-base);
112
116
  --btn-light: var(--bs-orange-10);
113
117
  --btn-highlight: var(--bs-orange-100);
118
+ --btn-ghost-ink: var(--bs-ink-orange);
114
119
  }
115
120
  .bs-button:where([data-variant^='negative']) {
116
121
  --btn-main: var(--bs-red-400);
117
- --btn-secondary: var(--bs-red-300);
122
+ --btn-secondary: var(--bs-red-medium);
118
123
  --btn-light: var(--bs-red-10);
119
124
  --btn-highlight: var(--bs-red-100);
125
+ --btn-ghost-ink: var(--bs-ink-red);
120
126
  }
121
127
 
122
128
  /* ------------ Text Button ------------ */
123
129
  .bs-button:where([data-text]:not([data-text="false"])) {
124
130
  --btn-height: auto;
131
+ --btn-ink: var(--bs-ink-blue);
125
132
  --btn-padding: 0;
126
133
  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
127
134
  --btn-text-size: var(--bs-text-md);
128
135
  --btn-weight: 400;
129
136
  background-color: transparent;
130
- color: var(--bs-blue-500);
131
137
  cursor: pointer;
132
138
  line-height: 150%;
133
139
  }
134
140
  .bs-button:where([data-text]:not([data-text="false"])):hover {
135
- color: var(--bs-blue-base);
141
+ --btn-ink: var(--bs-blue-base);
136
142
  background-color: transparent;
137
143
  text-decoration: underline;
138
144
  }
@@ -193,8 +199,8 @@
193
199
  }
194
200
  .bs-button:where(:disabled),
195
201
  .bs-button:where([aria-disabled="true"]) {
196
- color: var(--bs-gray-400);
197
- background-color: var(--bs-gray-200);
202
+ --btn-ink: var(--bs-ink-disabled);
203
+ --btn-main: var(--bs-bg-disabled);
198
204
  }
199
205
 
200
206
  .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
@@ -204,7 +210,7 @@
204
210
 
205
211
  .bs-button:where([data-text]:not([data-text="false"])):disabled,
206
212
  .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
207
- background-color: transparent;
213
+ --btn-main: transparent;
208
214
  }
209
215
 
210
216
  /* ------------ links as buttons ------------ */
package/dist/components/_form-booleans.scss CHANGED
@@ -38,11 +38,11 @@
38
38
  /* Checkbox & Radio Input */
39
39
 
40
40
  :where(input[type='checkbox'], input[type='radio']),
41
- .bs-boolean :where(input) {
41
+ :is(.bs-boolean :where(input), .bs-checkbox) { /* .bs-checkbox added to accommodate 'fake' cbs */
42
42
  --box-shadow: var(--bs-ink-base);
43
43
 
44
44
  appearance: none;
45
- background-color: var(--bg-base);
45
+ background-color: var(--bs-bg-base);
46
46
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
47
47
  cursor: pointer;
48
48
  display: grid;
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  :where(input[type='checkbox'], input[type='radio']):focus-visible,
57
- .bs-boolean :where(input):focus-visible {
57
+ :is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
58
58
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
59
59
  0 0 0 2px var(--offset-color, var(--bs-bg-base)),
60
60
  0 0 0 4px var(--outline-color, var(--bs-blue-base));
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  :where(input[type='checkbox']),
65
- .bs-boolean :where([type='checkbox']) {
65
+ :is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
66
66
  border-radius: 0.125rem;
67
67
  }
68
68
 
@@ -73,7 +73,7 @@
73
73
 
74
74
  /* Checkbox's checkmark */
75
75
  input:where([type='checkbox'])::before,
76
- .bs-boolean :where([type="checkbox"])::before {
76
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
77
77
  --filled-size: 1rem;
78
78
  --check-fill-color: var(--bs-blue-base);
79
79
 
@@ -86,7 +86,7 @@ input:where([type='checkbox'])::before,
86
86
  }
87
87
 
88
88
  input:where([type='checkbox'])::after,
89
- .bs-boolean :where([type="checkbox"])::after {
89
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
90
90
  border: solid var(--bs-white);
91
91
  border-width: 0 0.125rem 0.125rem 0;
92
92
  content: '';
@@ -101,7 +101,8 @@ input:where([type='checkbox'])::after,
101
101
  }
102
102
 
103
103
  input:where([type='checkbox']):where(:indeterminate)::after,
104
- .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
104
+ .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
105
+ .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
105
106
  border: none;
106
107
  background-color: var(--bs-white);
107
108
  height: 0.125rem;
@@ -142,6 +143,9 @@ input:where([type='radio'])::after,
142
143
  width: var(--inner-size);
143
144
  }
144
145
 
146
+ /* Show checkmark, indeterminate mark, or radio dot */
147
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
148
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
145
149
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
146
150
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
147
151
  .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -149,16 +153,19 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
149
153
  visibility: visible;
150
154
  }
151
155
 
152
- .bs-boolean:where([data-size='sm']) input::before {
156
+ .bs-boolean:where([data-size='sm']) input::before,
157
+ .bs-checkbox:where([data-size="sm"])::before {
153
158
  --filled-size: var(--bs-text-xs);
154
159
  }
155
160
 
156
- .bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
161
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
162
+ .bs-checkbox:where([data-size="sm"])::after {
157
163
  height: 0.5625rem;
158
164
  width: 0.3125rem;
159
165
  }
160
166
 
161
- .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after {
167
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
168
+ .bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after {
162
169
  height: 0.125rem;
163
170
  width: .75em;
164
171
  }
@@ -171,16 +178,23 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
171
178
  /* Disabled State */
172
179
 
173
180
  input:where([type='checkbox'], [type='radio']):disabled,
174
- .bs-boolean :where(input):disabled {
181
+ .bs-boolean :where(input):disabled,
182
+ .bs-checkbox:is([data-disabled="true"], :disabled) {
175
183
  --box-shadow: var(--bs-bg-disabled);
176
184
  background-color: transparent;
177
185
  cursor: default;
178
186
  }
179
187
 
188
+ .bs-checkbox:where([data-disabled="true"]:not(input)) {
189
+ pointer-events: none;
190
+ }
191
+
180
192
  input:where([type='checkbox']):checked:disabled::before,
181
193
  input:where([type='checkbox']):indeterminate:disabled::before,
182
194
  .bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
183
- .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
195
+ .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
196
+ .bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
197
+ .bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
184
198
  --check-fill-color: var(--bs-bg-disabled);
185
199
  }
186
200
 
@@ -193,7 +207,8 @@ input:where([type='radio']):checked:disabled::before,
193
207
  /* Error state */
194
208
 
195
209
  input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
196
- .bs-boolean :where(input[data-error="true"]) {
210
+ .bs-boolean :where(input[data-error="true"]),
211
+ .bs-checkbox:where([data-error="true"]) {
197
212
  --box-shadow: var(--bs-red-base);
198
213
  --outline-color: var(--bs-red-base);
199
214
  }
package/dist/components/_pills.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .bs-pill {
3
3
  --pill-background: var(--bs-bg-medium);
4
4
  --pill-border: transparent;
5
- --pill-text: var(--bs-royal-base);
5
+ --pill-text: #162FB4; /* one-off component-specific */
6
6
  --pill-gap: var(--bs-space-2);
7
7
 
8
8
  align-items: center;
@@ -25,6 +25,11 @@
25
25
  width: 1rem;
26
26
  }
27
27
 
28
+ /* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
29
+ :where(.dark) .bs-pill {
30
+ --pill-text: #7585D1;
31
+ }
32
+
28
33
  /* ------------------------------ Auto-truncation for content ------------------------------ */
29
34
  .bs-pill:has([data-truncate="true"]) {
30
35
  max-width: 100%;
@@ -218,6 +223,5 @@
218
223
  --pill-border: var(--bs-gray-400);
219
224
  }
220
225
 
221
-
222
226
  }
223
227
 
package/dist/components/banner.css CHANGED
@@ -34,10 +34,6 @@
34
34
 
35
35
  .bs-banner :where(.bs-banner-content p a) {
36
36
  color: var(--bs-pink-light);
37
- text-decoration: none;
38
- }
39
-
40
- .bs-banner :where(.bs-banner-content p a:hover) {
41
37
  text-decoration: underline;
42
38
  }
43
39
 
package/dist/components/buttons.css CHANGED
@@ -1,14 +1,16 @@
1
1
  .bs-button {
2
- --btn-main: var(--bs-blue-base);
2
+ --btn-main: var(--bs-blue-400);
3
3
  --btn-secondary: var(--bs-blue-medium);
4
4
  --btn-highlight: var(--bs-blue-100);
5
5
  --btn-padding: .25rem .75rem;
6
6
  --btn-focus-pseudo-width: calc(100% + 0.5rem);
7
+ --btn-ghost-ink: var(--bs-ink-blue);
8
+ --btn-ink: var(--bs-white);
7
9
  align-items: center;
8
10
  background-color: var(--btn-main);
9
11
  border: none;
10
12
  border-radius: 0.25rem;
11
- color: var(--bs-white);
13
+ color: var(--btn-ink);
12
14
  cursor: pointer;
13
15
  display: inline-flex;
14
16
  font-size: var(--btn-text-size, var(--bs-text-md));
@@ -67,11 +69,11 @@
67
69
 
68
70
  /* ------------ Ghost Buttons ------------ */
69
71
  .bs-button:where([data-ghost]:not([data-ghost="false"])) {
72
+ --btn-ink: var(--btn-ghost-ink);
70
73
  --btn-light: var(--bs-blue-10);
71
74
  --btn-secondary: var(--bs-blue-10);
72
75
  background-color: transparent;
73
76
  box-shadow: inset 0 0 0 1px var(--btn-main);
74
- color: var(--btn-main);
75
77
  }
76
78
  .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
77
79
  border-radius: 0.4375rem;
@@ -86,12 +88,13 @@
86
88
  inset 0px 0px 4px 1px var(--btn-highlight);
87
89
  }
88
90
 
89
- /* ------------ Button type ------------ */
91
+ /* ------------ VARIANTS ------------ */
90
92
  .bs-button:where([data-variant^='secondary']) {
91
93
  --btn-main: var(--bs-plum-400);
92
- --btn-secondary: var(--bs-plum-300);
94
+ --btn-secondary: var(--bs-plum-medium);
93
95
  --btn-light: var(--bs-plum-10);
94
96
  --btn-highlight: var(--bs-plum-100);
97
+ --btn-ghost-ink: var(--bs-ink-plum);
95
98
  }
96
99
  .dark .bs-button:where([data-variant^='secondary']) {
97
100
  --btn-main: var(--bs-plum-200);
@@ -101,37 +104,40 @@
101
104
  }
102
105
  .bs-button:where([data-variant^='positive']) {
103
106
  --btn-main: var(--bs-purple-400);
104
- --btn-secondary: var(--bs-purple-300);
107
+ --btn-secondary: var(--bs-purple-medium);
105
108
  --btn-light: var(--bs-purple-10);
106
109
  --btn-highlight: var(--bs-purple-100);
110
+ --btn-ghost-ink: var(--bs-ink-purple);
107
111
  }
108
112
  .bs-button:where([data-variant^='warning']) {
109
113
  --btn-main: var(--bs-orange-warning);
110
- --btn-secondary: var(--bs-orange-300);
114
+ --btn-secondary: var(--bs-orange-base);
111
115
  --btn-light: var(--bs-orange-10);
112
116
  --btn-highlight: var(--bs-orange-100);
117
+ --btn-ghost-ink: var(--bs-ink-orange);
113
118
  }
114
119
  .bs-button:where([data-variant^='negative']) {
115
120
  --btn-main: var(--bs-red-400);
116
- --btn-secondary: var(--bs-red-300);
121
+ --btn-secondary: var(--bs-red-medium);
117
122
  --btn-light: var(--bs-red-10);
118
123
  --btn-highlight: var(--bs-red-100);
124
+ --btn-ghost-ink: var(--bs-ink-red);
119
125
  }
120
126
 
121
127
  /* ------------ Text Button ------------ */
122
128
  .bs-button:where([data-text]:not([data-text="false"])) {
123
129
  --btn-height: auto;
130
+ --btn-ink: var(--bs-ink-blue);
124
131
  --btn-padding: 0;
125
132
  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
126
133
  --btn-text-size: var(--bs-text-md);
127
134
  --btn-weight: 400;
128
135
  background-color: transparent;
129
- color: var(--bs-blue-500);
130
136
  cursor: pointer;
131
137
  line-height: 150%;
132
138
  }
133
139
  .bs-button:where([data-text]:not([data-text="false"])):hover {
134
- color: var(--bs-blue-base);
140
+ --btn-ink: var(--bs-blue-base);
135
141
  background-color: transparent;
136
142
  text-decoration: underline;
137
143
  }
@@ -192,8 +198,8 @@
192
198
  }
193
199
  .bs-button:where(:disabled),
194
200
  .bs-button:where([aria-disabled="true"]) {
195
- color: var(--bs-gray-400);
196
- background-color: var(--bs-gray-200);
201
+ --btn-ink: var(--bs-ink-disabled);
202
+ --btn-main: var(--bs-bg-disabled);
197
203
  }
198
204
 
199
205
  .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
@@ -203,7 +209,7 @@
203
209
 
204
210
  .bs-button:where([data-text]:not([data-text="false"])):disabled,
205
211
  .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
206
- background-color: transparent;
212
+ --btn-main: transparent;
207
213
  }
208
214
 
209
215
  /* ------------ links as buttons ------------ */
package/dist/components/form-booleans.css CHANGED
@@ -37,11 +37,11 @@
37
37
  /* Checkbox & Radio Input */
38
38
 
39
39
  :where(input[type='checkbox'], input[type='radio']),
40
- .bs-boolean :where(input) {
40
+ :is(.bs-boolean :where(input), .bs-checkbox) { /* .bs-checkbox added to accommodate 'fake' cbs */
41
41
  --box-shadow: var(--bs-ink-base);
42
42
 
43
43
  appearance: none;
44
- background-color: var(--bg-base);
44
+ background-color: var(--bs-bg-base);
45
45
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
46
46
  cursor: pointer;
47
47
  display: grid;
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  :where(input[type='checkbox'], input[type='radio']):focus-visible,
56
- .bs-boolean :where(input):focus-visible {
56
+ :is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
57
57
  box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
58
58
  0 0 0 2px var(--offset-color, var(--bs-bg-base)),
59
59
  0 0 0 4px var(--outline-color, var(--bs-blue-base));
@@ -61,7 +61,7 @@
61
61
  }
62
62
 
63
63
  :where(input[type='checkbox']),
64
- .bs-boolean :where([type='checkbox']) {
64
+ :is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
65
65
  border-radius: 0.125rem;
66
66
  }
67
67
 
@@ -72,7 +72,7 @@
72
72
 
73
73
  /* Checkbox's checkmark */
74
74
  input:where([type='checkbox'])::before,
75
- .bs-boolean :where([type="checkbox"])::before {
75
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
76
76
  --filled-size: 1rem;
77
77
  --check-fill-color: var(--bs-blue-base);
78
78
 
@@ -85,7 +85,7 @@ input:where([type='checkbox'])::before,
85
85
  }
86
86
 
87
87
  input:where([type='checkbox'])::after,
88
- .bs-boolean :where([type="checkbox"])::after {
88
+ :is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
89
89
  border: solid var(--bs-white);
90
90
  border-width: 0 0.125rem 0.125rem 0;
91
91
  content: '';
@@ -100,7 +100,8 @@ input:where([type='checkbox'])::after,
100
100
  }
101
101
 
102
102
  input:where([type='checkbox']):where(:indeterminate)::after,
103
- .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
103
+ .bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
104
+ .bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
104
105
  border: none;
105
106
  background-color: var(--bs-white);
106
107
  height: 0.125rem;
@@ -141,6 +142,9 @@ input:where([type='radio'])::after,
141
142
  width: var(--inner-size);
142
143
  }
143
144
 
145
+ /* Show checkmark, indeterminate mark, or radio dot */
146
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
147
+ .bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
144
148
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
145
149
  input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
146
150
  .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -148,16 +152,19 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
148
152
  visibility: visible;
149
153
  }
150
154
 
151
- .bs-boolean:where([data-size='sm']) input::before {
155
+ .bs-boolean:where([data-size='sm']) input::before,
156
+ .bs-checkbox:where([data-size="sm"])::before {
152
157
  --filled-size: var(--bs-text-xs);
153
158
  }
154
159
 
155
- .bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
160
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
161
+ .bs-checkbox:where([data-size="sm"])::after {
156
162
  height: 0.5625rem;
157
163
  width: 0.3125rem;
158
164
  }
159
165
 
160
- .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after {
166
+ .bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
167
+ .bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after {
161
168
  height: 0.125rem;
162
169
  width: .75em;
163
170
  }
@@ -170,16 +177,23 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
170
177
  /* Disabled State */
171
178
 
172
179
  input:where([type='checkbox'], [type='radio']):disabled,
173
- .bs-boolean :where(input):disabled {
180
+ .bs-boolean :where(input):disabled,
181
+ .bs-checkbox:is([data-disabled="true"], :disabled) {
174
182
  --box-shadow: var(--bs-bg-disabled);
175
183
  background-color: transparent;
176
184
  cursor: default;
177
185
  }
178
186
 
187
+ .bs-checkbox:where([data-disabled="true"]:not(input)) {
188
+ pointer-events: none;
189
+ }
190
+
179
191
  input:where([type='checkbox']):checked:disabled::before,
180
192
  input:where([type='checkbox']):indeterminate:disabled::before,
181
193
  .bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
182
- .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
194
+ .bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
195
+ .bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
196
+ .bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
183
197
  --check-fill-color: var(--bs-bg-disabled);
184
198
  }
185
199
 
@@ -192,7 +206,8 @@ input:where([type='radio']):checked:disabled::before,
192
206
  /* Error state */
193
207
 
194
208
  input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
195
- .bs-boolean :where(input[data-error="true"]) {
209
+ .bs-boolean :where(input[data-error="true"]),
210
+ .bs-checkbox:where([data-error="true"]) {
196
211
  --box-shadow: var(--bs-red-base);
197
212
  --outline-color: var(--bs-red-base);
198
213
  }
package/dist/components/pills.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bs-pill {
2
2
  --pill-background: var(--bs-bg-medium);
3
3
  --pill-border: transparent;
4
- --pill-text: var(--bs-royal-base);
4
+ --pill-text: #162FB4; /* one-off component-specific */
5
5
  --pill-gap: var(--bs-space-2);
6
6
 
7
7
  align-items: center;
@@ -24,6 +24,11 @@
24
24
  width: 1rem;
25
25
  }
26
26
 
27
+ /* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
28
+ :where(.dark) .bs-pill {
29
+ --pill-text: #7585D1;
30
+ }
31
+
27
32
  /* ------------------------------ Auto-truncation for content ------------------------------ */
28
33
  .bs-pill:has([data-truncate="true"]) {
29
34
  max-width: 100%;
@@ -216,4 +221,3 @@
216
221
  .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
217
222
  --pill-border: var(--bs-gray-400);
218
223
  }
219
-
package/dist/wwt-bsds-preset.js CHANGED
@@ -62,12 +62,11 @@ module.exports = {
62
62
  },
63
63
  orange: {
64
64
  10: "rgba(250, 70, 22, 0.1)",
65
- 100: "#FED1C5",
66
- 200: "#FDA58D",
67
- 300: "#FC7755",
68
- 400: "#FA4616",
69
- 500: "#EA6712",
70
- warning: "#EA6712" // leaving here for compatibility
65
+ 100: "#F3C4A8",
66
+ 200: "#F7A17B",
67
+ 300: "#F97C4C",
68
+ 400: "#FB550E",
69
+ 500: "#C33D04"
71
70
  },
72
71
  pink: {
73
72
  100: "#F6CBE0",
@@ -146,8 +145,12 @@ module.exports = {
146
145
  backgroundColor: {
147
146
  "base": "var(--bs-bg-base)",
148
147
  "base-elevated": "var(--bs-bg-base-elevated)",
148
+ "base-to-light": "var(--bs-bg-base-to-light)",
149
+ "base-to-medium": "var(--bs-bg-base-to-medium)",
149
150
  "light": "var(--bs-bg-light)",
151
+ "light-to-medium": "var(--bs-bg-light-to-medium)",
150
152
  "medium": "var(--bs-bg-medium)",
153
+ "medium-to-light": "var(--bs-bg-medium-to-light)",
151
154
  "invert-base": "var(--bs-bg-invert-base)",
152
155
  "invert-medium": "var(--bs-bg-invert-medium)",
153
156
  "disabled": "var(--bs-bg-disabled)"
@@ -215,6 +218,8 @@ module.exports = {
215
218
  "orange-medium": "var(--bs-orange-medium)",
216
219
  "orange-light": "var(--bs-orange-light)",
217
220
  "orange-lightest": "var(--bs-orange-lightest)",
221
+ "orange-warning": "var(--bs-orange-warning)",
222
+ // 👆 leaving here for compatibility. Map to / deprecate in favor of 'warning.'
218
223
  "purple-base": "var(--bs-purple-base)",
219
224
  "purple-medium": "var(--bs-purple-medium)",
220
225
  "purple-light": "var(--bs-purple-light)",
@@ -224,6 +229,7 @@ module.exports = {
224
229
  "gray-medium": "var(--bs-gray-medium)",
225
230
  "gray-light": "var(--bs-gray-light)",
226
231
  "gray-lightest": "var(--bs-gray-lightest)",
232
+ "warning": "var(--bs-warning)"
227
233
  },
228
234
  height: {
229
235
  18: "4.5rem",
@@ -288,13 +294,20 @@ module.exports = {
288
294
  "ink-medium": "var(--bs-ink-medium)",
289
295
  "ink-light": "var(--bs-ink-light)",
290
296
  "ink-accent": "var(--bs-ink-accent)",
297
+ "ink-disabled": "var(--bs-ink-disabled)",
291
298
  "ink-invert": "var(--bs-ink-invert)",
299
+ "ink-invert-base": "var(--bs-ink-invert-base)",
300
+ "ink-invert-light": "var(--bs-ink-invert-light)",
292
301
  "ink-invert-medium": "var(--bs-ink-invert-medium)",
293
302
  "ink-blue": "var(--bs-ink-blue)",
294
- "ink-red": "var(--bs-ink-red)",
295
- "ink-pink": "var(--bs-ink-pink)",
296
303
  "ink-orange": "var(--bs-ink-orange)",
297
- "ink-disabled": "var(--bs-ink-disabled)"
304
+ "ink-pink": "var(--bs-ink-pink)",
305
+ "ink-plum": "var(--bs-ink-plum)",
306
+ "ink-purple": "var(--bs-ink-purple)",
307
+ "ink-red": "var(--bs-ink-red)",
308
+ "ink-royal": "var(--bs-ink-royal)",
309
+ "ink-violet": "var(--bs-ink-violet)",
310
+ "ink-white": "var(--bs-ink-white)"
298
311
  },
299
312
  zIndex: {
300
313
  "-1": "-1",