diff --git a/.changeset/fix-tom-select-validation-colors.md b/.changeset/fix-tom-select-validation-colors.md new file mode 100644 index 000000000..330130642 --- /dev/null +++ b/.changeset/fix-tom-select-validation-colors.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.is-valid` and `.is-invalid` border colors and focus ring on Tom Select `.form-select` fields. diff --git a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap b/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap index 4db8246f3..42ad5af96 100644 --- a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap +++ b/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap @@ -56,13 +56,16 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre "--tblr-chart-3", "--tblr-chart-4", "--tblr-chart-5", + "--tblr-danger", "--tblr-font-sans-serif", "--tblr-font-size-h3", "--tblr-font-size-h5", "--tblr-font-weight-medium", "--tblr-font-weight-semibold", + "--tblr-form-invalid-border-color", "--tblr-form-select-bg-icon", "--tblr-form-select-bg-img", + "--tblr-form-valid-border-color", "--tblr-gray-500", "--tblr-green", "--tblr-icon-size", @@ -78,6 +81,7 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre "--tblr-shadow-card", "--tblr-shadow-dropdown", "--tblr-shadow-input", + "--tblr-success", "--tblr-tertiary", "--tblr-text-inverted", "--tblr-yellow", diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss index 33489e177..632e0e2fa 100644 --- a/core/scss/vendor/_tom-select.scss +++ b/core/scss/vendor/_tom-select.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../config' as *; $input-border-width: 1px; @@ -52,6 +53,23 @@ $input-border-width: 1px; background-image: var(--form-select-bg-img), var(--form-select-bg-icon, none); } } + + // The same preset also colours the wrapper border and the focused + // `.ts-control` with `var(--bs-form-valid-color)` / `--bs-form-invalid-color`. + // Those variables do not exist in Tabler, so the border falls back to + // `currentColor` and the focus ring disappears. Repeat Tabler's own + // validation colours; `!important` for the same reason as `.ts-dropdown` + // below. + @each $state, $data in $form-validation-states { + &.is-#{$state} { + border-color: map.get($data, 'border-color') !important; + + &.focus .ts-control { + border-color: map.get($data, 'border-color') !important; + box-shadow: map.get($data, 'focus-box-shadow') !important; + } + } + } } // The bootstrap5 preset hardcodes Bootstrap's own input metrics on