Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Commit 5ac6fe0

Browse files
AlmeroSteynFoxandxss
AlmeroSteyn
authored and
Foxandxss
committed
docs-styles(build): new a11y-compliant styles for doc sample
closes #1897 Generates a2docs.css from a11y-compliant less file See PR #1897 for more info and next steps.
1 parent 231104c commit 5ac6fe0

10 files changed

Lines changed: 295 additions & 9 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,4 @@ plnkr.html
2929
public/docs/*/latest/guide/cheatsheet.json
3030
protractor-results.txt
3131
link-checker-results.txt
32+
*a2docs.css

‎gulpfile.js‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ var globby = require("globby");
2222
// - because childProcess.kill does not work properly on windows
2323
var treeKill = require("tree-kill");
2424
var blc = require("broken-link-checker");
25-
25+
var less = require('gulp-less');
2626
var tslint = require('gulp-tslint');
2727

2828
// TODO:
@@ -41,6 +41,7 @@ var EXAMPLES_PROTRACTOR_PATH = path.join(EXAMPLES_PATH, '_protractor');
4141
var NOT_API_DOCS_GLOB = path.join(PUBLIC_PATH, './{docs/*/latest/!(api),!(docs)}/**/*.*');
4242
var RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources');
4343
var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples');
44+
var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less');
4445

4546
var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder'));
4647
var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper'));
@@ -87,6 +88,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
8788

8889
var _exampleBoilerplateFiles = [
8990
'.editorconfig',
91+
'a2docs.css',
9092
'karma.conf.js',
9193
'karma-test-shim.js',
9294
'package.json',
@@ -98,14 +100,16 @@ var _exampleBoilerplateFiles = [
98100
'wallaby.js'
99101
];
100102

101-
var _exampleDartWebBoilerPlateFiles = ['styles.css'];
103+
var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
102104

103105
var _exampleProtractorBoilerplateFiles = [
104106
'tsconfig.json'
105107
];
106108

107109
var _exampleConfigFilename = 'example-config.json';
108110

111+
var _styleLessName = 'a2docs.less';
112+
109113
// Gulp flags:
110114
//
111115
// --lang=[all | ts | js | dart | 'ts|js' | 'ts|js|dart' | ...]
@@ -118,7 +122,7 @@ var _exampleConfigFilename = 'example-config.json';
118122
var lang, langs, buildDartApiDocs = false;
119123
function configLangs(langOption) {
120124
const fullSiteBuildTasks = ['build-compile', 'check-serve', 'check-deploy'];
121-
const buildAllDocs = argv['_'] &&
125+
const buildAllDocs = argv['_'] &&
122126
fullSiteBuildTasks.some((task) => argv['_'].indexOf(task) >= 0);
123127
const langDefault = buildAllDocs ? 'all' : 'ts|js';
124128
lang = (langOption || langDefault).toLowerCase();
@@ -190,7 +194,7 @@ function runE2e() {
190194
return spawnInfo.promise;
191195
})
192196
.then(function() {
193-
copyExampleBoilerplate();
197+
buildStyles(copyExampleBoilerplate, _.noop);
194198
gutil.log('runE2e: update webdriver');
195199
spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PROTRACTOR_PATH});
196200
return spawnInfo.promise;
@@ -414,7 +418,7 @@ gulp.task('help', taskListing.withFilters(function(taskName) {
414418
}));
415419

416420
// requires admin access because it adds symlinks
417-
gulp.task('add-example-boilerplate', function() {
421+
gulp.task('add-example-boilerplate', function(done) {
418422
var realPath = path.join(EXAMPLES_PATH, '/node_modules');
419423
var nodeModulesPaths = excludeDartPaths(getNodeModulesPaths(EXAMPLES_PATH));
420424

@@ -430,16 +434,26 @@ gulp.task('add-example-boilerplate', function() {
430434
fsUtils.addSymlink(realPath, linkPath);
431435
});
432436

433-
return copyExampleBoilerplate();
437+
return buildStyles(copyExampleBoilerplate, done);
434438
});
435439

436440

437441
// copies boilerplate files to locations
438442
// where an example app is found
439-
gulp.task('_copy-example-boilerplate', function () {
440-
if (!argv.fast) copyExampleBoilerplate();
443+
gulp.task('_copy-example-boilerplate', function (done) {
444+
if (!argv.fast) buildStyles(copyExampleBoilerplate, done);
441445
});
442446

447+
//Builds Angular 2 Docs CSS file from Bootstrap npm LESS source
448+
//and copies the result to the _examples folder to be included as
449+
//part of the example boilerplate.
450+
function buildStyles(cb, done){
451+
gulp.src(path.join(STYLES_SOURCE_PATH, _styleLessName))
452+
.pipe(less())
453+
.pipe(gulp.dest(EXAMPLES_PATH)).on('end', function(){
454+
cb().then(function() { done(); });
455+
});
456+
}
443457

444458
// copies boilerplate files to locations
445459
// where an example app is found
@@ -1251,7 +1265,7 @@ function buildApiDocsForDart() {
12511265
dab.createApiDataAndJadeFiles(apiEntries);
12521266

12531267
}).catch((err) => {
1254-
console.log(err);
1268+
console.error(err);
12551269
});
12561270

12571271
} catch(err) {

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"devDependencies": {
2828
"archiver": "^1.0.0",
2929
"assert-plus": "^1.0.0",
30+
"bootstrap": "3.3.6",
3031
"broken-link-checker": "0.7.1",
3132
"browser-sync": "^2.9.3",
3233
"canonical-path": "0.0.2",
@@ -43,6 +44,7 @@
4344
"gulp": "^3.5.6",
4445
"gulp-env": "0.4.0",
4546
"gulp-sass": "^2.3.2",
47+
"gulp-less": "^3.1.0",
4648
"gulp-task-listing": "^1.0.1",
4749
"gulp-tslint": "^5.0.0",
4850
"gulp-util": "^3.0.6",

‎tools/styles-builder/less/a2docs.less‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
//Import angular 2 docs colors and mixins
2+
@import './colors/docs-material-palette.colors.less';
3+
@import './mixins/docs.mixins.less';
4+
//Import Bootstrap scaffolding and variables
5+
@import '../../../node_modules/bootstrap/less/scaffolding.less';
6+
@import '../../../node_modules/bootstrap/less/variables.less';
7+
//Override Bootstrap variables with custom values for angular 2 docs
8+
@import './overrides/bootstrap.overrides.less';
9+
//Import Bootstrap layout systems
10+
@import '../../../node_modules/bootstrap/less/mixins.less';
11+
@import '../../../node_modules/bootstrap/less/grid.less';
12+
@import '../../../node_modules/bootstrap/less/utilities.less';
13+
@import '../../../node_modules/bootstrap/less/responsive-utilities.less';
14+
//Import only Bootstrap elements to support angular 2 docs styles
15+
@import '../../../node_modules/bootstrap/less/type.less';
16+
@import '../../../node_modules/bootstrap/less/forms.less';
17+
@import '../../../node_modules/bootstrap/less/buttons.less';
18+
@import '../../../node_modules/bootstrap/less/button-groups.less';
19+
@import '../../../node_modules/bootstrap/less/input-groups.less';
20+
@import '../../../node_modules/bootstrap/less/tables.less';
21+
@import '../../../node_modules/bootstrap/less/glyphicons.less';
22+
@import '../../../node_modules/bootstrap/less/alerts.less';
23+
@import '../../../node_modules/bootstrap/less/close.less';
24+
//Import opacity overrides
25+
@import './overrides/docs.opacity.overrides.less';
26+
//Import styles overrides and angular 2 doc styles layouts
27+
@import './overrides/docs.overrides.less';
28+
//Import accessibility tweaks
29+
@import './overrides/docs.a11y.overrides.less';

‎tools/styles-builder/less/colors/docs-material-palette.colors.less‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//Style guide colors
2+
@material-header: #455A64;
3+
@material-header-darker: #37474F;
4+
@material-header-dark: #263238;
5+
@material-200: #EEEEEE;
6+
@material-700: #616161;
7+
@material-800: #424242;
8+
@material-900: #212121;
9+
@black: #000000;
10+
@white: #FFFFFF;

‎tools/styles-builder/less/mixins/docs.mixins.less‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.opacity(){
2+
opacity: 0.87;
3+
}
4+
5+
.top-header-text(){
6+
font-size: 50px;
7+
font-weight: bold;
8+
}
9+
10+
.header-text(){
11+
font-size: 30px;
12+
font-weight: bold;
13+
}
14+
15+
.sub-header-text(){
16+
font-size: 20px;
17+
font-weight: 400;
18+
line-height: 40px;
19+
}
20+
21+
.paragraph-text(){
22+
font-size: 16px;
23+
font-weight: 400;
24+
line-height: 28px;
25+
}
26+
27+
.label-text(){
28+
font-size: 16px;
29+
font-weight: 400;
30+
line-height: 28px;
31+
}
32+
33+
.button-text(){
34+
font-size: 16px;
35+
font-weight: bold;
36+
line-height: 28px;
37+
}
38+
39+
.input-text(){
40+
font-size: 16px;
41+
font-weight: 400;
42+
line-height: 28px;
43+
margin-top: 15px;
44+
}

‎tools/styles-builder/less/overrides/bootstrap.overrides.less‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//Main Bootstrap color overrides
2+
@gray-base: @black;
3+
@gray-darker: @black;
4+
@gray-dark: @material-900;
5+
@gray: @material-800;
6+
@gray-light: @material-700;
7+
@gray-lighter: @material-200;
8+
9+
//Font override
10+
@font-family-sans-serif: "Roboto", Helvetica, Sans-Serif;
11+
12+
//Glyphicons font path
13+
@icon-font-path: "./node_modules/bootstrap/fonts/";
14+
15+
//Class overrides
16+
@input-color: @gray-dark;
17+
@text-color: @gray-dark;
18+
@btn-primary-color: @gray-lighter;
19+
@btn-primary-bg: @material-header-dark;
20+
@btn-default-color: @white;
21+
@btn-default-bg: @material-header-darker;

‎tools/styles-builder/less/overrides/docs.a11y.overrides.less‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
//Accessibility tweaks
2+
@danger-text: #632827;
3+
@state-danger-text: @danger-text;
4+
5+
input {
6+
&::-webkit-input-placeholder {
7+
color: @gray-light !important;
8+
}
9+
10+
&::-moz-placeholder {
11+
color: @gray-light !important;
12+
}
13+
}
14+
15+
label {
16+
input, textarea, select {
17+
font-weight: normal;
18+
}
19+
}
20+
21+
button.btn.disabled,
22+
button.btn[disabled] {
23+
color: @white;
24+
background-color: @black;
25+
}
26+
27+
.btn.btn-primary:not(.disabled):not([disabled]) {
28+
&:hover,
29+
&:focus{
30+
color: @black;
31+
background-color: @gray-lighter;
32+
}
33+
}
34+
35+
.btn.btn-default:not(.disabled):not([disabled]) {
36+
&:hover,
37+
&:focus{
38+
color: @black;
39+
background-color: @gray-lighter;
40+
}
41+
}
42+
43+
button.btn.disabled, button.btn[disabled] {
44+
&:hover,
45+
&:focus{
46+
color: @white;
47+
background-color: @black;
48+
}
49+
}
50+
51+
.close,
52+
.close:hover,
53+
.close:focus{
54+
opacity: 1;
55+
}

‎tools/styles-builder/less/overrides/docs.opacity.overrides.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//Opacity tweaks
2+
3+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
4+
.opacity();
5+
}
6+
7+
label {
8+
9+
input {
10+
opacity: 1;
11+
}
12+
13+
.opacity();
14+
}
15+
16+
17+
input {
18+
.opacity();
19+
}
20+
21+
.label-default {
22+
.opacity();
23+
}
24+
25+
legend {
26+
.opacity();
27+
}
28+
29+
button {
30+
.opacity();
31+
}
32+
33+
span, p, dl {
34+
.opacity();
35+
}

0 commit comments

Comments
 (0)