Skip to content

Commit f9c8e96

Browse files
mdomdo
authored
WIP: New form controls (#41740)
* New form controls * Split Sass, update docs * More migration docs * basic migration, update changelog * Bring back btn-check for now, but move to button stylesheet * note * Fix link * lint
1 parent f0c163b commit f9c8e96

27 files changed

+909
-872
lines changed

‎.bundlewatch.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
},
2727
{
2828
"path": "./dist/css/bootstrap.css",
29-
"maxSize": "35.75 kB"
29+
"maxSize": "36.0 kB"
3030
},
3131
{
3232
"path": "./dist/css/bootstrap.min.css",
33-
"maxSize": "31.5 kB"
33+
"maxSize": "32.0 kB"
3434
},
3535
{
3636
"path": "./dist/js/bootstrap.bundle.js",

‎.cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"callout",
2222
"callouts",
2323
"camelCase",
24+
"checkgroup",
2425
"clearfix",
2526
"Codesniffer",
2627
"combinator",

‎scss/_root.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@
9191
--#{$prefix}root-font-size: #{$font-size-root};
9292
}
9393
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
94+
95+
--#{$prefix}font-size-base: #{$font-size-base}; // 14px
96+
--#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
97+
--#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
98+
9499
@include rfs($font-size-base, --#{$prefix}body-font-size);
95100
--#{$prefix}body-font-weight: #{$font-weight-base};
96101
--#{$prefix}body-line-height: #{$line-height-base};
@@ -237,7 +242,7 @@
237242
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
238243
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
239244

240-
--#{$prefix}code-color: #{$code-color-dark};
245+
// --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
241246
--#{$prefix}highlight-color: #{$mark-color-dark};
242247
--#{$prefix}highlight-bg: #{$mark-bg-dark};
243248

‎scss/_variables.scss‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
1111

1212
// scss-docs-start theme-color-variables
13-
$primary: $purple-500 !default;
13+
$primary: $blue-500 !default;
1414
$secondary: $gray-600 !default;
1515
$success: $green-500 !default;
1616
$info: $cyan-500 !default;
@@ -167,6 +167,7 @@ $body-emphasis-color: $black !default;
167167

168168
$link-color: $primary !default;
169169
$link-decoration: underline !default;
170+
$link-underline-offset: .2em !default;
170171
$link-shade-percentage: 20% !default;
171172
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
172173
$link-hover-decoration: null !default;
@@ -204,7 +205,7 @@ $border-widths: (
204205
5: 5px
205206
) !default;
206207
$border-style: solid !default;
207-
$border-color: $gray-300 !default;
208+
$border-color: color.mix($gray-300, $gray-400) !default;
208209
$border-color-translucent: rgba($black, .175) !default;
209210
// scss-docs-end border-variables
210211

@@ -266,8 +267,8 @@ $font-family-code: var(--#{$prefix}font-monospace) !default;
266267

267268
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
268269
// $font-size-base affects the font size of the body text
269-
$font-size-root: null !default;
270-
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
270+
$font-size-root: 16px !default;
271+
$font-size-base: 14px !default; // Assumes the browser default, typically `16px`
271272
$font-size-sm: $font-size-base * .875 !default;
272273
$font-size-lg: $font-size-base * 1.25 !default;
273274

@@ -546,8 +547,8 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
546547

547548
// Code
548549

549-
$code-font-size: $small-font-size !default;
550-
$code-color: $pink !default;
550+
$code-font-size: 95% !default;
551+
$code-color: var(--#{$prefix}secondary-text) !default;
551552

552553
$kbd-padding-y: .1875rem !default;
553554
$kbd-padding-x: .375rem !default;
@@ -578,7 +579,7 @@ $border-color-translucent-dark: rgba($white, .15) !default;
578579
$headings-color-dark: inherit !default;
579580
$link-color-dark: tint-color($primary, 40%) !default;
580581
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
581-
$code-color-dark: tint-color($code-color, 40%) !default;
582+
// $code-color-dark: tint-color($code-color, 40%) !default;
582583
$mark-color-dark: $body-color-dark !default;
583584
$mark-bg-dark: $yellow-800 !default;
584585

@@ -587,12 +588,6 @@ $mark-bg-dark: $yellow-800 !default;
587588
// Forms
588589
//
589590

590-
$form-select-indicator-color-dark: $body-color-dark !default;
591-
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
592-
593-
$form-switch-color-dark: rgba($white, .25) !default;
594-
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
595-
596591
// scss-docs-start form-validation-colors-dark
597592
$form-valid-color-dark: $green-300 !default;
598593
$form-valid-border-color-dark: $green-300 !default;

‎scss/buttons/_button.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,4 +279,19 @@
279279
.btn-sm {
280280
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
281281
}
282+
283+
.btn-check {
284+
position: absolute;
285+
clip: rect(0, 0, 0, 0);
286+
pointer-events: none;
287+
288+
&[disabled],
289+
&:disabled {
290+
+ .btn {
291+
pointer-events: none;
292+
filter: none;
293+
opacity: .65;
294+
}
295+
}
296+
}
282297
}

‎scss/content/_reboot.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333

3434
:root {
3535
@if $font-size-root != null {
36-
@include font-size(var(--#{$prefix}root-font-size));
36+
font-size: var(--#{$prefix}root-font-size);
37+
// @include font-size(var(--#{$prefix}root-font-size));
3738
}
3839

3940
@if $enable-smooth-scroll {
@@ -256,12 +257,13 @@
256257
// Links
257258

258259
a {
259-
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
260-
text-decoration: $link-decoration;
260+
color: var(--#{$prefix}link-color);
261+
text-decoration: var(--#{$prefix}link-decoration);
262+
text-underline-offset: $link-underline-offset;
261263

262264
&:hover {
263-
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
264-
text-decoration: $link-hover-decoration;
265+
color: var(--#{$prefix}link-hover-color);
266+
text-decoration: var(--#{$prefix}link-hover-decoration);
265267
}
266268
}
267269

‎scss/forms/_check.scss‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@use "../config" as *;
2+
@use "../colors" as *;
3+
@use "../variables" as *;
4+
@use "../functions" as *;
5+
@use "../vendor/rfs" as *;
6+
@use "../mixins/border-radius" as *;
7+
@use "../mixins/box-shadow" as *;
8+
@use "../mixins/color-mode" as *;
9+
@use "../mixins/focus-ring" as *;
10+
@use "../mixins/transition" as *;
11+
@use "form-variables" as *;
12+
13+
// scss-docs-start check-variables
14+
$check-border-color: var(--#{$prefix}border-color) !default;
15+
$check-checked-bg: var(--#{$prefix}primary-base) !default;
16+
$check-checked-border-color: $check-checked-bg !default;
17+
$check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
18+
$check-indeterminate-border-color: $check-indeterminate-bg !default;
19+
$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
20+
$check-disabled-border-color: $check-disabled-bg !default;
21+
$check-disabled-opacity: .65 !default;
22+
// scss-docs-end check-variables
23+
24+
@layer forms {
25+
b-checkgroup {
26+
display: flex;
27+
gap: var(--#{$prefix}gap, .5rem);
28+
align-items: var(--#{$prefix}align-items, start);
29+
30+
.description {
31+
color: var(--#{$prefix}secondary-text);
32+
}
33+
}
34+
35+
.check {
36+
// scss-docs-start check-css-variables
37+
--#{$prefix}check-bg: transparent;
38+
--#{$prefix}check-border-color: #{$check-border-color};
39+
--#{$prefix}check-checked-bg: #{$check-checked-bg};
40+
--#{$prefix}check-checked-border-color: #{$check-checked-border-color};
41+
--#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
42+
--#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
43+
--#{$prefix}check-disabled-bg: #{$check-disabled-bg};
44+
--#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
45+
--#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
46+
// scss-docs-end check-css-variables
47+
48+
display: grid;
49+
grid-template-columns: repeat(1, minmax(0, 1fr));
50+
margin-block: .125rem;
51+
52+
:where(svg, input) {
53+
flex-shrink: 0;
54+
grid-row-start: 1;
55+
grid-column-start: 1;
56+
width: 1rem;
57+
height: 1rem;
58+
}
59+
60+
:where(input) {
61+
appearance: none;
62+
// later: maybe set a tertiary bg color?
63+
background-color: var(--#{$prefix}check-bg);
64+
border: 1px solid var(--#{$prefix}check-border-color);
65+
// stylelint-disable-next-line property-disallowed-list
66+
border-radius: .25em;
67+
}
68+
69+
:where(input:checked, input:indeterminate) {
70+
background-color: var(--#{$prefix}check-checked-bg);
71+
border-color: var(--#{$prefix}check-checked-border-color);
72+
}
73+
74+
&:has(input:checked) .checked,
75+
&:has(input:indeterminate) .indeterminate {
76+
display: block;
77+
color: var(--#{$prefix}primary-contrast);
78+
stroke: currentcolor;
79+
}
80+
81+
&:has(input:disabled) {
82+
--#{$prefix}check-bg: var(--#{$prefix}check-disabled-bg);
83+
84+
~ label {
85+
color: var(--#{$prefix}secondary-text);
86+
cursor: default;
87+
}
88+
}
89+
90+
&:has(input:disabled:checked) {
91+
opacity: var(--#{$prefix}check-disabled-opacity);
92+
}
93+
94+
:where(svg) {
95+
pointer-events: none;
96+
}
97+
98+
:where(svg path) {
99+
display: none;
100+
}
101+
}
102+
}

0 commit comments

Comments
 (0)