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