mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 17:26:22 +01:00
Add colors for high-contrast-mode (#1731)
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
GitHub
2
gradle/changelog/high_contrast_colors.yaml
Normal file
2
gradle/changelog/high_contrast_colors.yaml
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
- type: added
|
||||||
|
description: Additional color scheme to prepare a high contrast mode ([#1730](https://github.com/scm-manager/scm-manager/pull/1731))
|
||||||
@@ -249,6 +249,174 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
<br>
|
||||||
|
<table class="table is-bordered high-contrast">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Class</th>
|
||||||
|
<th> Color (100%)</th>
|
||||||
|
<th> Color (75%)</th>
|
||||||
|
<th> Color (50%)</th>
|
||||||
|
<th> Color (25%)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-dark</code><br>
|
||||||
|
<code>.has-background-dark-75</code><br>
|
||||||
|
<code>.has-background-dark-50</code><br>
|
||||||
|
<code>.has-background-dark-25</code></td>
|
||||||
|
<td><span class="button has-background-high-contrast-light-gray"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#f2f2f2
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-high-contrast-light-gray-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#cccccc
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-high-contrast-light-gray-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#a6a6a6
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-high-contrast-light-gray-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#7f7f7f
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-info</code><br>
|
||||||
|
<code>.has-background-info-75</code><br>
|
||||||
|
<code>.has-background-info-50</code><br>
|
||||||
|
<code>.has-background-info-25</code></td>
|
||||||
|
<td><span class="button has-background-info"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#33b2e8
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-info-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#66c5ee
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-info-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#99d8f3
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-info-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ccecf9
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-link</code><br>
|
||||||
|
<code>.has-background-link-75</code><br>
|
||||||
|
<code>.has-background-link-50</code><br>
|
||||||
|
<code>.has-background-link-25</code></td>
|
||||||
|
<td><span class="button has-background-link"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#33b2e8
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-link-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#66c5ee
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-link-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#99d8f3
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-link-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ccecf9
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-primary</code><br>
|
||||||
|
<code>.has-background-primary-75</code><br>
|
||||||
|
<code>.has-background-primary-50</code><br>
|
||||||
|
<code>.has-background-primary-25</code></td>
|
||||||
|
<td><span class="button has-background-primary"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#00d1df
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-primary-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#40dde7
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-primary-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#7fe8ef
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-primary-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#bff3f7
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-success</code><br>
|
||||||
|
<code>.has-background-success-75</code><br>
|
||||||
|
<code>.has-background-success-50</code><br>
|
||||||
|
<code>.has-background-success-25</code></td>
|
||||||
|
<td><span class="button has-background-success"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#00c79b
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-success-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#40d5b4
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-success-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#7fe3cd
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-success-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#bff1e6
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-warning</code><br>
|
||||||
|
<code>.has-background-warning-75</code><br>
|
||||||
|
<code>.has-background-warning-50</code><br>
|
||||||
|
<code>.has-background-warning-25</code></td>
|
||||||
|
<td><span class="button has-background-warning"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ffdd57
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-warning-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ffe681
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-warning-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ffeeab
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-warning-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#fff6d5
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-background-danger-high-contrast</code><br>
|
||||||
|
<code>.has-background-danger-high-contrast-75</code><br>
|
||||||
|
<code>.has-background-danger-high-contrast-50</code><br>
|
||||||
|
<code>.has-background-danger-high-contrast-25</code></td>
|
||||||
|
<td><span class="button has-background-danger-high-contrast"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#e63453
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-danger-high-contrast-75"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#ec677e
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-danger-high-contrast-50"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#f39aa9
|
||||||
|
</td>
|
||||||
|
<td><span class="button has-background-danger-high-contrast-25"> </span> <br>
|
||||||
|
<br>
|
||||||
|
#f9ccd4
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<br>
|
||||||
<table class="table is-bordered">
|
<table class="table is-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -288,6 +456,46 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<br>
|
||||||
|
<table class="table is-bordered high-contrast">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Class</th>
|
||||||
|
<th> Text</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-high-contrast-light-gray </code><br></td>
|
||||||
|
<td><span class="has-text-high-contrast-light-gray ">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-info</code><br></td>
|
||||||
|
<td><span class="has-text-info">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-link</code><br></td>
|
||||||
|
<td><span class="has-text-link">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-primary</code><br></td>
|
||||||
|
<td><span class="has-text-primary">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-success</code><br></td>
|
||||||
|
<td><span class="has-text-success">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-high-contrast-warning</code>
|
||||||
|
</td>
|
||||||
|
<td><span class="has-text-high-contrast-warning">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.has-text-high-contrast-danger</code><span class="tag is-light">Attention: Danger-text is lighter shade #f39aa9</span><br></td>
|
||||||
|
<td><span class="has-text-high-contrast-danger">Beispieltext</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="section" id="layout">
|
<section class="section" id="layout">
|
||||||
|
|||||||
@@ -23,13 +23,24 @@
|
|||||||
*/
|
*/
|
||||||
@import "bulma/sass/utilities/initial-variables";
|
@import "bulma/sass/utilities/initial-variables";
|
||||||
@import "bulma/sass/utilities/functions";
|
@import "bulma/sass/utilities/functions";
|
||||||
|
//$link: #007EB0;
|
||||||
|
$info: #33b2e8;
|
||||||
$turquoise: #00d1df;
|
$turquoise: #00d1df;
|
||||||
$blue: #33b2e8;
|
$blue: #33b2e8;
|
||||||
$cyan: $blue;
|
$cyan: $blue;
|
||||||
$green: #00c79b;
|
$green: #00c79b;
|
||||||
|
$warning: #ffdd57;
|
||||||
$blue-light: #98d8f3;
|
$blue-light: #98d8f3;
|
||||||
|
$danger: #ff3860;
|
||||||
|
$high-contrast-danger: #e63453;
|
||||||
$family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
|
$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 {
|
.is-ellipsis-overflow {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -92,7 +103,7 @@ footer.footer {
|
|||||||
padding: inherit;
|
padding: inherit;
|
||||||
|
|
||||||
a {
|
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-50: scale-color($danger, $lightness: 50%);
|
||||||
$danger-25: scale-color($danger, $lightness: 75%);
|
$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
|
// not supported by ie
|
||||||
// css vars for external reuse
|
// css vars for external reuse
|
||||||
@@ -178,6 +197,17 @@ $danger-25: scale-color($danger, $lightness: 75%);
|
|||||||
color: $blue-light !important;
|
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
|
// border and background colors
|
||||||
.has-background-dark-75 {
|
.has-background-dark-75 {
|
||||||
background-color: $dark-75;
|
background-color: $dark-75;
|
||||||
@@ -243,10 +273,36 @@ $danger-25: scale-color($danger, $lightness: 75%);
|
|||||||
background-color: $danger-25;
|
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 {
|
.has-background-blue-light {
|
||||||
background-color: $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
|
// tags
|
||||||
.tag:not(body) {
|
.tag:not(body) {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
@@ -779,7 +835,7 @@ form .field:not(.is-grouped) {
|
|||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
color: $blue;
|
color: $info;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user