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

Commit d0ca655

Browse files
nlitwinnlitwin
committed
Merge pull request #552 from appirio-tech/style-guide-generator
Add styleguide generator
2 parents 73ded80 + 3b780be commit d0ca655

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+62919
-1
lines changed

‎assets/css/partials/_tc-buttons.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ a:hover {
2525
text-decoration: none;
2626
}
2727

28+
// The default, primary topcoder button.
29+
//
30+
// :hover - Dark blue hover.
31+
// :disabled - 30% opacity applied
32+
//
33+
// Styleguide 2.0.0
2834
a.tc-btn, button.tc-btn {
2935
height: 40px;
3036
padding: 0 15px;

‎assets/css/partials/_tc-colors.scss

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,93 @@
1-
// TOPCODER Brand palette
1+
// Colors
2+
//
3+
// These colors make up the Topcoder brand palette.
4+
//
5+
// Styleguide 1.0.0
6+
7+
// Main colors
8+
//
9+
// $primary - Primary color
10+
// $primary-dark - Primary color darkened by 20%
11+
// $primary-light - Primary color lightened by 70%
12+
// $primary-lighter - Primary color lightened by 90%
13+
//
14+
// markup:
15+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
16+
//
17+
// Styleguide 1.1
218
$primary: #0096FF;
319
$primary-dark: #097DCE;
20+
// TODO: use only darkened/lightened version
421
$primary-dark2: darken($primary, 20%);
522
$primary-light: #85CCFF;
623
$primary-light2: lighten($primary, 70%);
724
$primary-lighter: #F2FAFF;
825
$primary-lighter2: lighten($primary, 90%);
926

27+
// Error colors
28+
//
29+
// $error - Error color
30+
// $error-dark - Error color darkened by ?%
31+
// $error-light - Error color lightened by ?%
32+
// $error-lighter - Error color lightened by ?%
33+
//
34+
// markup:
35+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
36+
//
37+
// Styleguide 1.2
1038
$error: #F31D3D;
1139
$error-dark: #C70E2A;
1240
$error-light: #FCBBC5;
1341
$error-lighter: #FEE8EC;
1442

43+
// Success colors
44+
//
45+
// $success - Success color
46+
// $success-dark - Success color darkened by ?%
47+
// $success-light - Success color lightened by ?%
48+
// $success-lighter - Success color lightened by ?%
49+
//
50+
// markup:
51+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
52+
//
53+
// Styleguide 1.3
1554
$success: #5BC921;
1655
$success-dark: #42A30F;
1756
$success-light: #CEEFBC;
1857
$success-lighter: #EFFAE9;
1958

59+
// Grays
60+
//
61+
// Various levels of gray used across the site
62+
//
63+
// Styleguide 1.4
64+
65+
// Accent Grays
66+
//
67+
// $accent-gray - Gray
68+
// $accent-gray-dark - Darkened gray
69+
//
70+
// markup:
71+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
72+
//
73+
// Styleguide 1.4.1
2074
$accent-gray: #A3A3AE;
2175
$accent-gray-dark: #394146;
2276

77+
// Gray Palette
78+
//
79+
// $gray-darkest - Darkest gray
80+
// $gray-darker - Darker gray
81+
// $gray-dark - Dark gray
82+
// $gray - Gray
83+
// $gray-light - Light gray
84+
// $gray-lighter - Lighter gray
85+
// $gray-lightest - Lightest gray
86+
//
87+
// markup:
88+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
89+
//
90+
// Styleguide 1.4.2
2391
$black: #000;
2492
$white: #fff;
2593
$gray-darkest: #3D3D3D;
@@ -30,12 +98,35 @@ $gray-light: #F0F0F0;
3098
$gray-lighter: #F6F6F6;
3199
$gray-lightest: #FCFCFC;
32100

101+
// Ranks
102+
//
103+
// $level-5 - Level 5
104+
// $level-4 - Level 4
105+
// $level-3 - Level 3
106+
// $level-2 - Level 2
107+
// $level-1 - Level 1
108+
//
109+
// markup:
110+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
111+
//
112+
// Styleguide 1.5
33113
$level-5: #EF3A3A;
34114
$level-4: #FCD617;
35115
$level-3: #616BD5;
36116
$level-2: #69C329;
37117
$level-1: #9D9FA0;
38118

119+
// Tracks
120+
//
121+
// $design - Design
122+
// $data_science - Data Science
123+
// $develop - Software Development
124+
// $copilot - Copilot
125+
//
126+
// markup:
127+
// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
128+
//
129+
// Styleguide 1.6
39130
$design: #21B2F1;
40131
$data_science: #FC9A00;
41132
$develop: #05C14F;

‎gulpfile.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var browserSync = require('browser-sync');
88
var histFallback = require('connect-history-api-fallback');
99
var merge = require('merge-stream');
1010
var RevAll = require('gulp-rev-all');
11+
var styleguide = require('sc5-styleguide');
1112
var awspublishRouter = require('gulp-awspublish-router');
1213

1314

@@ -43,6 +44,39 @@ gulp.task('jade', ['clean-html'], function() {
4344
.pipe(gulp.dest(config.temp));
4445
});
4546

47+
gulp.task('styleguide:generate', function() {
48+
log('Generating styleguide.');
49+
50+
var outputDirectory = 'styleguide';
51+
52+
return gulp
53+
.src(config.assets + 'css/partials/*.scss')
54+
.pipe(styleguide.generate({
55+
title: 'Topcoder Styleguide',
56+
server: true,
57+
port: 3132,
58+
rootPath: outputDirectory
59+
}))
60+
.pipe(gulp.dest(outputDirectory));
61+
});
62+
63+
gulp.task('styleguide:applystyles', function() {
64+
return gulp
65+
src(config.assets + 'css/partials/_tc-styles.scss')
66+
.pipe($.sass({
67+
errLogToConsole: true
68+
}))
69+
.pipe(styleguide.applyStyles())
70+
.pipe(gulp.dest(outputDirectory))
71+
});
72+
73+
gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);
74+
75+
gulp.task('watch-styleguide', ['styleguide'], function() {
76+
// Start watching changes and update styleguide whenever changes are detected
77+
gulp.watch(config.assets + 'css/partials/*.scss', ['styleguide']);
78+
});
79+
4680
gulp.task('styles', ['clean-styles'], function() {
4781
log('Compiling Sass --> CSS');
4882
var assetPrefix = envConfig.CONSTANTS.ASSET_PREFIX.length ? envConfig.CONSTANTS.ASSET_PREFIX : '/';

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"phantomjs": "^1.9.17",
7979
"protractor-html-screenshot-reporter": "0.0.21",
8080
"protractor-linkuisref-locator": "^1.1.2",
81+
"sc5-styleguide": "^0.3.39",
8182
"sinon": "^1.15.3",
8283
"sinon-chai": "^2.8.0",
8384
"wiredep": "^2.2.2",

‎styleguide/_reset.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
3+
* http://cssreset.com
4+
*/
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header, hgroup,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font: inherit;
23+
vertical-align: baseline;
24+
}
25+
/* HTML5 display-role reset for older browsers */
26+
article, aside, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section {
28+
display: block;
29+
}
30+
body {
31+
line-height: 1;
32+
}
33+
ol, ul {
34+
list-style: none;
35+
}
36+
blockquote, q {
37+
quotes: none;
38+
}
39+
blockquote:before, blockquote:after,
40+
q:before, q:after {
41+
content: '';
42+
content: none;
43+
}
44+
table {
45+
border-collapse: collapse;
46+
border-spacing: 0;
47+
}

0 commit comments

Comments
 (0)