mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Fix toggle button styles in dark mode

pull/481/head
Cory LaViska 2020-12-14 16:40:39 -05:00
rodzic ea0aef46fd
commit 817f52ae7f
2 zmienionych plików z 6 dodań i 6 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
src/components/color-picker/color-picker.tsx
Wyświetl plik

@ -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
Wyświetl plik

@ -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);