From e2ec60d8ddcecb05d20bd3dc4fbb7a5563e8ecfe Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Fri, 16 Sep 2016 12:45:58 -0700 Subject: [PATCH] udpate colors and contrast for accessibility improvements --- public/docs/dart/latest/_data.json | 2 +- public/docs/js/latest/_data.json | 2 +- public/docs/ts/latest/_data.json | 2 +- public/resources/css/base/_type.scss | 17 ++--- public/resources/css/module/_banner.scss | 2 + public/resources/css/module/_card.scss | 10 ++- public/resources/css/module/_code-box.scss | 5 +- public/resources/css/module/_code.scss | 20 ++--- public/resources/css/module/_hero.scss | 73 +------------------ public/resources/css/module/_home-promos.scss | 1 - public/resources/css/module/_lists.scss | 2 +- public/resources/css/module/_side-nav.scss | 8 +- public/resources/css/module/_table.scss | 17 ++--- 13 files changed, 44 insertions(+), 117 deletions(-) diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index 3c702053da..420f3b50f8 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "Dart", "menuTitle": "Docs Home", - "banner": "Current release is beta.21. Consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Current release is beta.21. View the change Log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 26f2a3f3da..22e6851bd4 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "The current release is 2.0.0. View the Change Log for enhancements, fixes, and breaking changes." + "banner": "Angular 2 release is 2.0.0. View the change Log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 80be619a43..c893f78305 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "TypeScript", "menuTitle": "Docs Home", - "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is 2.0.0. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Angular 2 release is 2.0.0. View the change Log to see enhancements, fixes, and breaking changes." }, "cli-quickstart": { diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index df84604eb1..543b552dab 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -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; diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss index 45b8bcc6ab..3fd0dd9932 100644 --- a/public/resources/css/module/_banner.scss +++ b/public/resources/css/module/_banner.scss @@ -27,5 +27,7 @@ p, .text-body { color: $blue-grey-500; font-size: 18px; + line-height: 32px; + margin: 0; } } \ No newline at end of file diff --git a/public/resources/css/module/_card.scss b/public/resources/css/module/_card.scss index 1df0b56433..90b3e66edb 100644 --- a/public/resources/css/module/_card.scss +++ b/public/resources/css/module/_card.scss @@ -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; diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index cdabec146c..5244273111 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -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; diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index c929211cee..6d531a88a0 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -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; } } } diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 398599042d..cbbeceaee9 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -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; - } - } -} +} \ No newline at end of file diff --git a/public/resources/css/module/_home-promos.scss b/public/resources/css/module/_home-promos.scss index 6034b8fa8a..772769df1c 100644 --- a/public/resources/css/module/_home-promos.scss +++ b/public/resources/css/module/_home-promos.scss @@ -12,7 +12,6 @@ h3.text-headline { font-size: 28px; margin-top: 10px; - color: #37474F; } .promo-image-container, .text-container { diff --git a/public/resources/css/module/_lists.scss b/public/resources/css/module/_lists.scss index 030d699bc1..356ddab4e6 100644 --- a/public/resources/css/module/_lists.scss +++ b/public/resources/css/module/_lists.scss @@ -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; diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 468e5cb101..30b2ee99cc 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -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; } diff --git a/public/resources/css/module/_table.scss b/public/resources/css/module/_table.scss index e39281ec10..6db2c08cde 100644 --- a/public/resources/css/module/_table.scss +++ b/public/resources/css/module/_table.scss @@ -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 {