Update color picker according to UI Kit v5

.bundlewatch.config.json

@@ -30,7 +30,7 @@
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "38.0 kB"
+ "maxSize": "38.25 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",

scss/_variables.scss

@@ -1091,7 +1091,9 @@ $input-line-height-lg: $h5-line-height !default; // Boosted mod
 
 $input-transition: border-color $transition-duration $transition-timing, $transition-focus !default;
 
-$form-color-width: 3rem !default;
+$form-color-width: 2.5rem !default; // Boosted mod: instead of `3rem`
+$form-color-disabled-border-color: $gray-500 !default; // Boosted mod
+$form-color-disabled-background-swatch: brightness(0) invert(1) brightness(.8) !default; // Boosted mod
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables

scss/forms/_form-control.scss

@@ -31,7 +31,7 @@
  }
 
  // Customize the `:focus` state to imitate native WebKit styles.
- &:focus {
+ &:not(.form-control-color):focus { // Boosted mod: instead of `&:focus`
  color: $input-focus-color;
  background-color: $input-focus-bg;
  border-color: $input-focus-border-color !important; // stylelint-disable-line declaration-no-important
@@ -192,6 +192,26 @@ textarea {
  width: $form-color-width;
  height: $input-height;
  padding: $input-padding-y;
+ border-color: var(--#{$prefix}body-color); // Boosted mod
+
+ // Boosted mod
+ &:hover {
+ background-color: var(--#{$prefix}body-color);
+ }
+
+ &:disabled {
+ background-color: var(--#{$prefix}body-bg);
+ border-color: $form-color-disabled-border-color;
+
+ &::-moz-color-swatch {
+ filter: $form-color-disabled-background-swatch;
+ }
+
+ &::-webkit-color-swatch {
+ filter: $form-color-disabled-background-swatch;
+ }
+ }
+ // End mod
 
  &:not(:disabled):not([readonly]) {
  cursor: pointer;

site/content/docs/5.3/forms/form-control.md

@@ -114,9 +114,20 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 Set the `type="color"` and add `.form-control-color` to the `<input>`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.
 
+{{< callout warning >}}
+Support among browsers/AT is not robust enough (https://a11ysupport.io/tests/tech__html__input__input-color#assertion-html-input(type-color)_element-convey_name). So, use with care and provide an alternative way of entering or choosing a color value (e.g., an input text field to enter a hexadecimal color value).
+{{< /callout >}}
+
 {{< example >}}
-<label for="exampleColorInput" class="form-label">Color picker</label>
-<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
+<div class="mb-3">
+ <label for="exampleColorInput" class="form-label">Color picker</label>
+ <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#a885d8" title="Choose your color">
+</div >
+
+<div>
+ <label for="exampleDisabledColorInput" class="form-label is-disabled">Disabled color picker</label>
+ <input type="color" class="form-control form-control-color" id="exampleDisabledColorInput" value="#a885d8" title="Choose your color" disabled>
+</div>
 {{< /example >}}
 
 ## Datalists

site/content/docs/5.3/migration.md

@@ -328,6 +328,8 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  <li><code>$focus-visible-inner-color-inverted</code></li>
  <li><code>$focus-visible-outer-color-inverted</code></li>
  <li><code>$font-weight-medium</code></li>
+ <li><code>$form-color-disabled-background-swatch</code></li>
+ <li><code>$form-color-disabled-border-color</code></li>
  <li><code>$headings-color-dark</code></li>
  <li><code>$info-bg-subtle-dark</code></li>
  <li><code>$info-bg-subtle</code></li>