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>
|
||||
</table>
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -288,6 +456,46 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
</section>
|
||||
<section class="section" id="layout">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user