From 8e5c25889685951bc9799f643468e4ba73e471c3 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 29 Nov 2021 08:49:18 -0500 Subject: [PATCH] style fixes --- docs/resources/changelog.md | 2 ++ src/components/select/select.styles.ts | 1 + src/themes/dark.styles.ts | 2 +- src/themes/light.styles.ts | 2 +- 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 46aff6b63..000bf23dc 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -11,6 +11,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - CodePen examples will now open in light or dark depending on your current preference - Fixed a bug where tag names weren't being generated in `vscode.html-custom-data.json` [#593](https://github.com/shoelace-style/shoelace/pull/593) - Fixed a bug in `` where the tooltip wouldn't reposition when content changed +- Fixed a bug in `` where focusing on a filled control showed the wrong focus ring +- Updated filled inputs to have the same appearance when focused - Updated `color` dependency from 3.1.3 to 4.0.2 - Upgraded the status of `` from experimental to stable ## 2.0.0-beta.61 diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 6965c06fc..cffa0932c 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -76,6 +76,7 @@ export default css` } .select--filled.select--focused:not(.select--disabled) .select__control { + outline: none; background-color: var(--sl-input-filled-background-color-focus); box-shadow: var(--sl-focus-ring); } diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts index bdea32fd1..d29713570 100644 --- a/src/themes/dark.styles.ts +++ b/src/themes/dark.styles.ts @@ -458,7 +458,7 @@ export default css` --sl-input-filled-background-color: var(--sl-color-neutral-100); --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); - --sl-input-filled-background-color-focus: var(--sl-color-neutral-0); + --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); --sl-input-filled-color: var(--sl-color-neutral-800); --sl-input-filled-color-hover: var(--sl-color-neutral-800); diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts index 9aba2fa3b..f06b0c5cd 100644 --- a/src/themes/light.styles.ts +++ b/src/themes/light.styles.ts @@ -458,7 +458,7 @@ export default css` --sl-input-filled-background-color: var(--sl-color-neutral-100); --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); - --sl-input-filled-background-color-focus: var(--sl-color-neutral-0); + --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); --sl-input-filled-color: var(--sl-color-neutral-800); --sl-input-filled-color-hover: var(--sl-color-neutral-800);