Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-14 09:25:43 +01:00
Code Issues Packages Projects Releases Activity

Add colors for high-contrast-mode (#1731)

Browse Source 
Tweaking the existing color scheme for SCM-Mananger to fulfill accessibility requirements lead to the conclusion, that an additional high-contrast-mode is necessary. The proposed colors are demonstrated in the PR.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Phil-Ah
2021-07-20 08:30:47 +02:00
committed by GitHub
parent e75d937ee5
commit 8ba93422a2
3 changed files with 269 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
scm-ui/ui-styles/src/scm.scss
View File

@@ -23,13 +23,24 @@
*/
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";
//$link: #007EB0;
$info: #33b2e8;
$turquoise: #00d1df;
$blue: #33b2e8;
$cyan: $blue;
$green: #00c79b;
$warning: #ffdd57;
$blue-light: #98d8f3;
$danger: #ff3860;
$high-contrast-danger: #e63453;
$family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
$high-contrast-background-color: #050514;
$high-contrast-light-gray: #f2f2f2;
.table.high-contrast, .table.high-contrast thead td, .table.high-contrast thead th {
background-color: $high-contrast-background-color;
color: $high-contrast-light-gray;
}
.is-ellipsis-overflow {
overflow: hidden;
@@ -92,7 +103,7 @@ footer.footer {
padding: inherit;
a {
color: darken($blue, 15%);
color: darken($info, 15%);
}
}
@@ -122,6 +133,14 @@ $danger-75: scale-color($danger, $lightness: 25%);
$danger-50: scale-color($danger, $lightness: 50%);
$danger-25: scale-color($danger, $lightness: 75%);
$high-contrast-danger-75: scale-color($high-contrast-danger, $lightness: 25%);
$high-contrast-danger-50: scale-color($high-contrast-danger, $lightness: 50%);
$high-contrast-danger-25: scale-color($high-contrast-danger, $lightness: 75%);
//high-contrast light gray
$light-75: darken($high-contrast-light-gray, 15%);
$light-50: darken($high-contrast-light-gray, 30%);
$light-25: darken($high-contrast-light-gray, 45%);
/*
// not supported by ie
// css vars for external reuse
@@ -178,6 +197,17 @@ $danger-25: scale-color($danger, $lightness: 75%);
color: $blue-light !important;
}
.has-text-high-contrast-warning {
color: $warning;
}
.has-text-high-contrast-danger{
color: $high-contrast-danger-50;
}
.has-text-high-contrast-light-gray {
color: $high-contrast-light-gray;
}
// border and background colors
.has-background-dark-75 {
background-color: $dark-75;
@@ -243,10 +273,36 @@ $danger-25: scale-color($danger, $lightness: 75%);
background-color: $danger-25;
}
.has-background-danger-high-contrast {
background-color: $high-contrast-danger;
}
.has-background-danger-high-contrast-75 {
background-color: $high-contrast-danger-75;
}
.has-background-danger-high-contrast-50 {
background-color: $high-contrast-danger-50;
}
.has-background-danger-high-contrast-25 {
background-color: $high-contrast-danger-25;
}
.has-background-blue-light {
background-color: $blue-light;
}
.has-background-high-contrast-light-gray {
background-color: $high-contrast-light-gray;
}
.has-background-high-contrast-light-gray-75 {
background-color: $light-75;
}
.has-background-high-contrast-light-gray-50 {
background-color: $light-50;
}
.has-background-high-contrast-light-gray-25 {
background-color: $light-25;
}
// tags
.tag:not(body) {
border: 1px solid transparent;
@@ -779,7 +835,7 @@ form .field:not(.is-grouped) {
padding: 1rem;
&.is-active {
color: $blue;
color: $info;
background-color: #fff;
}
}