Merge pull request #5267 from betagouv/more-contrasted-colors

#5162 - More contrasted colors for better accessibility
This commit is contained in:
jpoulvel 2020-06-18 11:12:19 +02:00 committed by GitHub
commit 33dad952e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 32 additions and 30 deletions

View file

@ -5,16 +5,18 @@ $black: #333333;
$white: #FFFFFF;
$grey: #888888;
$light-grey: #F8F8F8;
$dark-grey: #666666;
$border-grey: #CCCCCC;
$dark-red: #A10005;
$medium-red: rgba(161, 0, 5, 0.9);
$light-red: #ED1C24;
$lighter-red: #F52A2A;
$background-red: #FFDFDF;
$green: #15AD70;
$lighter-green: lighten($green, 30%);
$light-green: lighten($green, 25%);
$dark-green: darken($green, 20%);
$green: darken(#169862, 5%);
$old-green: #15AD70;
$lighter-green: lighten($old-green, 30%);
$light-green: lighten($old-green, 25%);
$dark-green: darken($old-green, 20%);
$orange: #F28900;
$orange-bg: lighten($orange, 35%);
$yellow: #FEF3B8;

View file

@ -7,7 +7,7 @@
}
.autosave-explanation {
color: $grey;
color: $dark-grey;
margin-left: 4px;
}

View file

@ -20,14 +20,14 @@
}
.confidentiel {
color: $grey;
color: $dark-grey;
font-weight: normal;
margin-bottom: 2 * $default-padding;
}
.date {
font-size: 12px;
color: $grey;
color: $dark-grey;
float: right;
}
}
@ -37,7 +37,7 @@
.avis-notice {
font-size: 14px;
color: $grey;
color: $dark-grey;
margin-bottom: 2 * $default-padding;
}
@ -50,7 +50,7 @@
}
.confidentiel {
color: $grey;
color: $dark-grey;
font-weight: normal;
margin-bottom: 2 * $default-padding;
}
@ -68,7 +68,7 @@
.confidentiel-explanation {
font-size: 14px;
color: $grey;
color: $dark-grey;
margin-top: - $default-padding;
margin-bottom: 2 * $default-padding;
}
@ -116,7 +116,7 @@
}
.confidentiel {
color: $grey;
color: $dark-grey;
font-size: 12px;
.lock {
@ -131,7 +131,7 @@
.date,
.waiting {
font-size: 12px;
color: $grey;
color: $dark-grey;
}
.date {

View file

@ -195,7 +195,7 @@
.attestation {
margin: $default-padding 0;
color: $grey;
color: $dark-grey;
}
}
}
@ -204,7 +204,7 @@
li {
display: flex;
padding: $default-padding;
color: $grey;
color: $dark-grey;
border-bottom: 1px solid $border-grey;
font-size: 12px;
min-width: 300px;
@ -246,7 +246,7 @@
}
a {
color: $grey;
color: $dark-grey;
}
// Make child links fill the whole clickable area

View file

@ -10,7 +10,7 @@
}
.list-header {
color: $grey;
color: $dark-grey;
font-weight: bold;
margin-bottom: 10px;
}
@ -32,5 +32,5 @@
}
.service-name {
color: $grey;
color: $dark-grey;
}

View file

@ -13,7 +13,7 @@
td.updated-at {
font-size: 13px;
color: $grey;
color: $dark-grey;
text-align: right;
width: 190px;

View file

@ -28,7 +28,7 @@
}
h2 {
color: $grey;
color: $dark-grey;
font-weight: bold;
}

View file

@ -23,7 +23,7 @@
@mixin notice-text-style {
font-size: 16px;
color: $grey;
color: $dark-grey;
}
.mandatory {
@ -346,7 +346,7 @@
}
input.aa-hint {
color: $grey;
color: $dark-grey;
}
.datetime {

View file

@ -24,5 +24,5 @@
.france-connect-login-separator {
margin: 24px 0;
font-size: 14px;
color: $grey;
color: $dark-grey;
}

View file

@ -66,7 +66,7 @@
.menu-item {
align-items: center;
padding: 14px;
color: $grey;
color: $dark-grey;
overflow: hidden;
text-overflow: ellipsis;

View file

@ -4,7 +4,7 @@
.label {
display: inline-block;
padding: 4px $default-spacer;
background: $grey;
background: $dark-grey;
border: 1px solid transparent;
color: #FFFFFF;
border-radius: 4px;

View file

@ -28,7 +28,7 @@
.guest,
.date {
font-size: 12px;
color: $grey;
color: $dark-grey;
}
.date {

View file

@ -22,7 +22,7 @@
}
.help {
color: $grey;
color: $dark-grey;
font-size: 11px;
margin-bottom: $default-spacer * 2;
}

View file

@ -224,7 +224,7 @@ $header-mobile-breakpoint: 550px;
.menu-item {
align-items: center;
padding: 14px;
color: $grey;
color: $dark-grey;
overflow: hidden;
text-overflow: ellipsis;

View file

@ -21,7 +21,7 @@ body {
.subtitle {
margin-top: -20px;
color: $grey;
color: $dark-grey;
}
th,

View file

@ -71,7 +71,7 @@
.stats-legend {
font-size: 12px;
color: $grey;
color: $dark-grey;
}
}

View file

@ -31,7 +31,7 @@
}
&.active ~ li {
color: $grey;
color: $dark-grey;
}
// Arrows