hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Using accent color directly from active theme

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-05-17 12:48:35 +03:00
parent db8b46b5db
commit 2519f76267
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/renderer/components/update-button/styles.module.scss
View File

@ -4,28 +4,38 @@
*/
.updateButton {
--active-color-hsl: 122deg 39% 49%;
--active-color: hsl(var(--active-color-hsl));
--accent-color: var(--colorOk);
border: 1px solid var(--active-color);
border: 1px solid var(--accent-color);
border-radius: 4px;
background: hsl(var(--active-color-hsl) / 15%);
color: var(--active-color);
color: var(--accent-color);
display: flex;
align-items: center;
padding: 4px 8px;
gap: 8px;
gap: 6px;
cursor: default;
transition: background-color 0.1s;
position: relative;
&:hover {
background: hsl(var(--active-color-hsl) / 5%);
&:hover::before{
opacity: 0.25;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--blue);
border-color: transparent;
}
&::before {
content: " ";
position: absolute;
background: var(--accent-color);
width: 100%;
height: 100%;
left: 0;
opacity: 0.15;
z-index: -1;
transition: opacity 0.1s;
}
}
.icon {
@ -33,15 +43,10 @@
height: 16px;
}
.warningHigh {
--active-color-hsl: 0deg 76% 62%;
}
.warningMedium {
--active-color-hsl: 36deg 100% 50%;
--accent-color: var(--colorWarning);
}
:global(.theme-light) .warningMedium {
// Making medium color a bit darker for light theme
--active-color-hsl: 36deg 100% 46%;
.warningHigh {
--accent-color: var(--colorSoftError);
}