Fix themed styles for LeftPaneDialog, add stories

This commit is contained in:
Jamie Kyle 2023-09-26 09:13:57 -07:00 committed by GitHub
parent 1a2976dae4
commit 15e9bb3d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 190 additions and 51 deletions

View file

@ -186,45 +186,65 @@
}
}
&--error {
background-color: $error-background-color;
color: $error-text-color;
a {
color: $error-text-color;
}
.LeftPaneDialog__action-text {
color: $error-text-color;
}
&__tooltip {
--tooltip-background-color: #{$default-background-color};
--tooltip-text-color: #{$default-text-color};
min-width: 280px;
text-align: inherit;
}
&--warning {
background-color: $warning-background-color;
color: $warning-text-color;
&,
&__tooltip {
&--error {
background-color: $error-background-color;
color: $error-text-color;
a {
color: $color-black;
}
@include any-theme {
--tooltip-background-color: #{$error-background-color};
--tooltip-text-color: #{$error-text-color};
}
.LeftPaneDialog__icon {
background-color: $color-black;
a {
color: $error-text-color;
}
@media (forced-colors: active) {
background-color: WindowText;
.LeftPaneDialog__action-text {
color: $error-text-color;
}
}
.LeftPaneDialog__close-button::before {
background-color: $color-black;
@media (forced-colors: active) {
background-color: WindowText;
}
}
.LeftPaneDialog__action-text {
&--warning {
background-color: $warning-background-color;
color: $warning-text-color;
@include any-theme {
--tooltip-background-color: #{$warning-background-color};
--tooltip-text-color: #{$warning-text-color};
}
a {
color: $warning-text-color;
}
.LeftPaneDialog__icon {
background-color: $warning-text-color;
@media (forced-colors: active) {
background-color: WindowText;
}
}
.LeftPaneDialog__close-button::before {
background-color: $warning-text-color;
@media (forced-colors: active) {
background-color: WindowText;
}
}
.LeftPaneDialog__action-text {
color: $warning-text-color;
}
}
}
@ -266,25 +286,4 @@
transition: transform 500ms ease-out;
}
}
&__tooltip {
--tooltip-background-color: #{$default-background-color};
--tooltip-text-color: #{$default-text-color};
min-width: 280px;
text-align: inherit;
&--error {
--tooltip-text-color: #{$error-text-color};
--tooltip-background-color: #{$error-background-color};
a {
color: #{$error-text-color};
}
}
&--warning {
--tooltip-text-color: #{$warning-text-color};
--tooltip-background-color: #{$warning-background-color};
}
}
}