From 8ba93422a2ccf65182dbbedfdbc6bd06dee561dc Mon Sep 17 00:00:00 2001 From: Phil-Ah Date: Tue, 20 Jul 2021 08:30:47 +0200 Subject: [PATCH] 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 --- gradle/changelog/high_contrast_colors.yaml | 2 + scm-ui/ui-styles/public/index.html | 208 +++++++++++++++++++++ scm-ui/ui-styles/src/scm.scss | 62 +++++- 3 files changed, 269 insertions(+), 3 deletions(-) create mode 100644 gradle/changelog/high_contrast_colors.yaml diff --git a/gradle/changelog/high_contrast_colors.yaml b/gradle/changelog/high_contrast_colors.yaml new file mode 100644 index 0000000000..c30c03ed94 --- /dev/null +++ b/gradle/changelog/high_contrast_colors.yaml @@ -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)) diff --git a/scm-ui/ui-styles/public/index.html b/scm-ui/ui-styles/public/index.html index de869ef1dc..4380b85b5f 100644 --- a/scm-ui/ui-styles/public/index.html +++ b/scm-ui/ui-styles/public/index.html @@ -249,6 +249,174 @@
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class Color (100%) Color (75%) Color (50%) Color (25%)
.has-background-dark
+ .has-background-dark-75
+ .has-background-dark-50
+ .has-background-dark-25		 
+
+ #f2f2f2 + 		 
+
+ #cccccc + 		 
+
+ #a6a6a6 + 		 
+
+ #7f7f7f +
.has-background-info
+ .has-background-info-75
+ .has-background-info-50
+ .has-background-info-25		 
+
+ #33b2e8 + 		 
+
+ #66c5ee + 		 
+
+ #99d8f3 + 		 
+
+ #ccecf9 +
.has-background-link
+ .has-background-link-75
+ .has-background-link-50
+ .has-background-link-25		 
+
+ #33b2e8 + 		 
+
+ #66c5ee + 		 
+
+ #99d8f3 + 		 
+
+ #ccecf9 +
.has-background-primary
+ .has-background-primary-75
+ .has-background-primary-50
+ .has-background-primary-25		 
+
+ #00d1df + 		 
+
+ #40dde7 + 		 
+
+ #7fe8ef + 		 
+
+ #bff3f7 +
.has-background-success
+ .has-background-success-75
+ .has-background-success-50
+ .has-background-success-25		 
+
+ #00c79b + 		 
+
+ #40d5b4 + 		 
+
+ #7fe3cd + 		 
+
+ #bff1e6 +
.has-background-warning
+ .has-background-warning-75
+ .has-background-warning-50
+ .has-background-warning-25		 
+
+ #ffdd57 + 		 
+
+ #ffe681 + 		 
+
+ #ffeeab + 		 
+
+ #fff6d5 +
.has-background-danger-high-contrast
+ .has-background-danger-high-contrast-75
+ .has-background-danger-high-contrast-50
+ .has-background-danger-high-contrast-25		 
+
+ #e63453 + 		 
+
+ #ec677e + 		 
+
+ #f39aa9 + 		 
+
+ #f9ccd4 +
+
@@ -288,6 +456,46 @@
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class Text
.has-text-high-contrast-light-gray
Beispieltext
.has-text-info
Beispieltext
.has-text-link
Beispieltext
.has-text-primary
Beispieltext
.has-text-success
Beispieltext
.has-text-high-contrast-warning + Beispieltext
.has-text-high-contrast-dangerAttention: Danger-text is lighter shade #f39aa9
Beispieltext
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss index 896106a8f1..0a9ef65e0c 100644 --- a/scm-ui/ui-styles/src/scm.scss +++ b/scm-ui/ui-styles/src/scm.scss @@ -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; } }