Improve how icon colors are defined

- define specific colors for icons for themes
- fix related contrast issues on Forgejo dark theme
This commit is contained in:
0ko 2024-05-10 23:19:35 +05:00
parent 2b2fd2728c
commit b1a239cdc4
5 changed files with 30 additions and 6 deletions

View file

@ -1143,6 +1143,20 @@ overflow-menu .ui.label {
color: var(--color-secondary-dark-2) !important; color: var(--color-secondary-dark-2) !important;
} }
/* colors of colorful icons */
svg.text.green,
.text.green svg {
color: var(--color-icon-green) !important;
}
svg.text.red,
.text.red svg {
color: var(--color-icon-red) !important;
}
svg.text.purple,
.text.purple svg {
color: var(--color-icon-purple) !important;
}
.oauth2-authorize-application-box { .oauth2-authorize-application-box {
margin-top: 3em !important; margin-top: 3em !important;
} }

View file

@ -178,6 +178,10 @@
--color-orange-badge-bg: #ea580c22; --color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44; --color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133; --color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: #3fb950;
--color-icon-red: #f85149;
--color-icon-purple: #aa76ff;
/* target-based colors */ /* target-based colors */
--color-body: var(--steel-800); --color-body: var(--steel-800);
--color-box-header: var(--steel-700); --color-box-header: var(--steel-700);
@ -262,9 +266,6 @@
.emoji[aria-label="musical notes"] { .emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
.text.green.svg {
color: var(--color-green-light) !important;
}
i.grey.icon.icon.icon.icon { i.grey.icon.icon.icon.icon {
color: var(--steel-350) !important; color: var(--steel-350) !important;
} }

View file

@ -195,6 +195,10 @@
--color-orange-badge-bg: #ea580c22; --color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44; --color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133; --color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green-light);
--color-icon-red: var(--color-red-light);
--color-icon-purple: var(--color-purple-light);
/* target-based colors */ /* target-based colors */
--color-body: #fff; --color-body: #fff;
--color-box-header: var(--zinc-100); --color-box-header: var(--zinc-100);
@ -255,9 +259,6 @@
accent-color: var(--color-accent); accent-color: var(--color-accent);
color-scheme: light; color-scheme: light;
} }
.text.green.svg {
color: var(--color-green-light) !important;
}
.ui.secondary.vertical.menu { .ui.secondary.vertical.menu {
border-radius: 0.28571429rem !important; border-radius: 0.28571429rem !important;
overflow: hidden; overflow: hidden;

View file

@ -179,6 +179,10 @@
--color-orange-badge-bg: #f2711c1a; --color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d; --color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133; --color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
--color-icon-purple: var(--color-purple);
/* target-based colors */ /* target-based colors */
--color-body: #1c1f25; --color-body: #1c1f25;
--color-box-header: #1a1d1f; --color-box-header: #1a1d1f;

View file

@ -179,6 +179,10 @@
--color-orange-badge-bg: #f2711c1a; --color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d; --color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133; --color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
--color-icon-purple: var(--color-purple);
/* target-based colors */ /* target-based colors */
--color-body: #ffffff; --color-body: #ffffff;
--color-box-header: #f1f3f5; --color-box-header: #f1f3f5;