udpate colors and contrast for accessibility improvements

This commit is contained in:
Alex Wolfe 2016-09-16 12:45:58 -07:00 committed by Naomi Black
parent a0dbeee18a
commit e2ec60d8dd
13 changed files with 44 additions and 117 deletions

View File

@ -4,7 +4,7 @@
"title": "Angular Docs",
"subtitle": "Dart",
"menuTitle": "Docs Home",
"banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
"banner": "Current release is <strong>beta.21</strong>. View the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
},
"quickstart": {

View File

@ -4,7 +4,7 @@
"title": "Angular Docs",
"subtitle": "JavaScript",
"menuTitle": "Docs Home",
"banner": "The current release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> for enhancements, fixes, and breaking changes."
"banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
},
"quickstart": {

View File

@ -4,7 +4,7 @@
"title": "Angular Docs",
"subtitle": "TypeScript",
"menuTitle": "Docs Home",
"banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>2.0.0</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes."
"banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
},
"cli-quickstart": {

View File

@ -8,6 +8,7 @@ body {
font-family: $brand-font;
font-size: 14px;
color: $blue-grey-600;
&.ng-cloak {
display: none;
}
@ -25,7 +26,7 @@ body {
}
a {
color: $blue-600;
color: $blue-700;
text-decoration: none;
&:hover {
@ -35,10 +36,10 @@ a {
}
code {
background: $blue-grey-50;
background: rgba($blue-grey-50, .56);
border-radius: 2px;
font-family: $mono-font;
color: $teal-500;
color: $teal-700;
padding: 0px 4px;
font-size: 90%;
}
@ -102,7 +103,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 34px;
font-weight: 400;
opacity: .87;
line-height: 40px;
}
@ -111,7 +111,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 24px;
font-weight: 400;
opacity: .87;
line-height: 32px;
}
@ -120,7 +119,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 20px;
font-weight: 500;
opacity: .87;
line-height: 32px;
}
@ -129,7 +127,6 @@ code {
font-size: 34px;
line-height: 40px;
margin: ($unit * 6) 0 ($unit * 3) 0;
opacity: 0.87;
&:first-of-type {
margin-top: 0;
@ -169,7 +166,6 @@ table th,
margin: 0px 0px ($unit * 3) 0px;
font-size: 16px;
font-weight: 400;
opacity: .87;
line-height: 28px;
padding: 0;
@ -187,7 +183,6 @@ table th,
table td {
font-size: 14px;
font-weight: 400;
opacity: .87;
line-height: 24px;
}
@ -195,20 +190,18 @@ table td {
margin: 0px 0px ($unit * 2) 0px;
font-size: 12px;
font-weight: 400;
opacity: .54;
line-height: 20px;
}
.text-aside,
.docs-content aside {
@extend .text-caption;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
background: rgba($blue-grey-50, .24);
color: $blue-grey-700;
font-weight: 400;
font-size: 13px;
line-height: 24px;
opacity: 1;
background: rgba($blue-grey-50, .56);
border-radius: 2px;
padding: $unit * 3;
margin-bottom: $unit * 2;

View File

@ -27,5 +27,7 @@
p, .text-body {
color: $blue-grey-500;
font-size: 18px;
line-height: 32px;
margin: 0;
}
}

View File

@ -1,3 +1,11 @@
/*
* Hover Cards
*
* Hover cards used to display important sections with
* additional information and allow for users to click
* on the entire card to initiate action.
*/
.card {
background: $white;
border-radius: 4px;
@ -34,7 +42,7 @@
h2 {
color: $blue-grey-600;
color: $blue-grey-500;
font-size: 20px;
font-weight: 400;
line-height: $unit * 3;

View File

@ -11,7 +11,7 @@
*/
$codebox-anti-pattern-color: $red-700;
$codebox-primary-color: $blue-600;
$codebox-primary-color: $blue-700;
$codebox-selected: $white;
@ -48,12 +48,13 @@ $codebox-selected: $white;
line-height: $unit * 3;
margin: 0;
outline: none;
opacity: 1;
padding: 0 0 $unit $unit;
text-transform: none;
}
nav button {
background: $blue-400;
background: $blue-600;
border-radius: 2px 2px 0 0;
color: $white;
font-size: 13px;

View File

@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700;
}
.str,
.atv {
color: $teal-600;
color: $teal-700;
}
.atn {
color: $teal-600;
color: $teal-700;
}
.com {
color: $teal-600;
color: $teal-700;
}
.lit {
color: $teal-600;
color: $teal-700;
}
.pun {
color: $blue-grey-700;
@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700;
}
.dec {
color: $teal-600;
color: $teal-700;
}
@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700;
}
.str,
.atv {
color: $teal-600;
color: $teal-700;
}
.atn {
color: $teal-600;
color: $teal-700;
}
.com {
color: $teal-600;
color: $teal-700;
}
.lit {
color: $teal-600;
color: $teal-700;
}
.pun {
color: $blue-grey-700;
@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700;
}
.dec {
color: $teal-600;
color: $teal-700;
}
}
}

View File

@ -30,7 +30,6 @@
float: left;
line-height: 48px;
margin: 0 $unit 0 0;
opacity: .87;
text-transform: uppercase;
&.is-standard-case {
@ -43,7 +42,6 @@
font-weight: 400;
line-height: $unit * 3;
margin: 0;
opacity: .87;
text-transform: uppercase;
}
@ -113,73 +111,4 @@
}
}
}
/*
* Badges
*/
.hero-title-with-badges {
margin-bottom: $unit;
}
.status-circle {
margin-right: 4px;
border-radius: 50%;
width: 10px;
height: 10px;
display: inline-block;
}
// status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
.status-deprecated {
background: #E53935;
}
.status-stable {
background: #558b2f;
}
.status-experimental {
background: #9575cd;
}
.badges {
display: flex;
justify-content: flex-start;
align-content: space-around;
align-items: center;
margin-top: 4px;
.status-badge {
color: #0143A3;
margin-left: 4px;
padding-left: 8px;
padding-right: 8px;
background-color: rgba(255,255,255,0.5);
border-radius: 2px;
line-height: 20px;
display: inline-block;
&:first-child {
margin-left: 0;
}
}
.security-risk-badge {
background-color: #FFF59D;
}
}
@media screen and (max-width: 599px) {
/* three items */
.badges .status-badge:nth-child(3) {
margin-left: 0;
margin-top: 4px;
}
.hero-title-with-badges {
margin-bottom: $unit * 2;
}
}
}

View File

@ -12,7 +12,6 @@
h3.text-headline {
font-size: 28px;
margin-top: 10px;
color: #37474F;
}
.promo-image-container, .text-container {

View File

@ -15,7 +15,7 @@
margin-top: $unit * 6;
h4 {
color: $blue-grey-400;
color: $blue-grey-500;
font-size: 14px;
font-weight: 400;
line-height: $unit * 4;

View File

@ -10,10 +10,10 @@
*/
$sidenav: '.sidenav'; // Classname
$sidenav-background: $blue-grey-50;
$sidenav-background: rgba($blue-grey-50, .56);
$sidenav-background-dark: $blue-grey-200;
$sidenav-color: $blue-grey-400;
$sidenav-color-selected: $blue-600;
$sidenav-color: $blue-grey-500;
$sidenav-color-selected: $blue-700;
$sidenav-width: 240px;
@ -191,7 +191,7 @@ $sidenav-width: 240px;
position: relative;
&.is-selected {
background: rgba($blue-grey-100, .56);
background: rgba($blue-grey-100, .24);
color: $sidenav-color-selected;
font-weight: 600;
}

View File

@ -1,6 +1,6 @@
table {
margin-bottom: $unit * 4;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
border-radius: 2px;
background: $snow;
@ -10,8 +10,8 @@ table {
thead {
th {
background: $mist;
border-bottom: 1px solid $mist;
background: rgba($blue-grey-50, .24);
border-bottom: 1px solid $blue-grey-50;
color: $metal;
font-size: 12px;
font-weight: 600;
@ -24,21 +24,16 @@ table {
tbody {
th,
td {
border-bottom: 1px solid $mist;
color: $platinum;
border-bottom: 1px solid $blue-grey-50;
padding: ($unit * 2) ($unit * 4);
text-align: left;
}
th {
background: rgba($mist, .24);
border-right: 1px solid $mist;
background: rgba($blue-grey-50, .24);
border-right: 1px solid $blue-grey-50;
font-weight: 600;
max-width: 100px;
a {
color: $blueberry;
}
}
tr:last-child td {