js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix toggle button styles in dark mode

Browse Source
This commit is contained in:
Cory LaViska
2020-12-14 16:40:39 -05:00
parent ea0aef46fd
commit 817f52ae7f
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/color-picker/color-picker.tsx
View File

@@ -18,7 +18,7 @@ import { clamp } from '../../utilities/math';
* @part slider-handle - Hue and opacity slider handles.
* @part preview - The preview color.
* @part input - The text input.
* @part format-button - The toggle format button.
* @part format-button - The toggle format button's base.
*/
@Component({
@@ -802,7 +802,7 @@ export class ColorPicker {
/>
{!this.noToggle && (
<sl-button part="format-button" size="small" onClick={this.handleFormatToggle}>
<sl-button exportparts="base:format-button" size="small" onClick={this.handleFormatToggle}>
{this.setLetterCase(this.format)}
</sl-button>
)}

8
themes/dark.css
View File

@@ -232,19 +232,19 @@
}
/* Color picker */
.sl-theme-dark sl-color-picker::part(copy-button) {
.sl-theme-dark sl-color-picker::part(format-button) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
}
.sl-theme-dark sl-color-picker::part(copy-button):hover {
.sl-theme-dark sl-color-picker::part(format-button):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
}
.sl-theme-dark sl-color-picker::part(copy-button):focus {
.sl-theme-dark sl-color-picker::part(format-button):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
@@ -252,7 +252,7 @@
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
.sl-theme-dark sl-color-picker::part(copy-button):active {
.sl-theme-dark sl-color-picker::part(format-button):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);