Merge branch 'release/1.2.0'

* release/1.2.0:
  Remove normalize.css from Aigis styles
  Improve wording
  Update dependencies
  Bump minor version
  Add release date of 1.2.0 and missing changes
  Add possibility to define custom sourcePath in styleguide components
  Drop double variable system for colors. Closes #1
  Build all *.scss files, not just styles.scss
  Add missing links to CHANGELOG
  Fix typos in CHANGELOG
  Add 1.2.0 to CHANGELOG
  Update README about SassDoc
  Add SassDoc
  Document sass functions, improve stringify() parameters
  Improve aigis styles files structure
  Add duotone-light syntax theme
  Rename map-stringify function and improve it
  Add neutral and brighter aigis theme as default

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 .sass-cache/
 build/
 styleguide/
+docs/

CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.2.0]
+###### 2017-04-03
+
+###### Added
+- [SassDoc] for generating a code documentation
+- Duotone Light/Dark [Code-Highlight Theme](./aigis/assets/css/highlight) and [Aigis Theme](./aigis/assets/css/themes)
+- Possibility to define custom sourcePath in styleguide components
+
+###### Changed
+- Rename `map-stringify()` to `stringify()`
+- Improve [`stringify()`](./src/meta/_functions.scss) to accept custom separator and patterns
+- Dropping double variable color system in favor of a single one ([#1])
+
+###### Fixed
+- Build all `*.scss` files, not just `styles.scss`
+
 # [1.1.0]
 ###### 2017-03-24
 
@@ -19,9 +35,13 @@ Lots of new features have been added. 👏
 
 First public release! 🎉
 
+[1.2.0]: https://github.com/gridonic/sass/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/gridonic/sass/compare/1.0.0...1.1.0
 
+[#1]: https://github.com/gridonic/sass/issues/1
+
 [Aigis]: https://pxgrid.github.io/aigis/
 [rscss]: http://rscss.io/
 [Vertical Rhythm]: https://zellwk.com/blog/why-vertical-rhythms/
 [foundations]: https://github.com/search?q=topic%3Afoundation+org%3Agridonic&type=Repositories
+[SassDoc]: http://sassdoc.com/

README.md

@@ -2,7 +2,7 @@
 
 # Sass foundation
 
-This repository represents our starting point for creating CSS styles. Also comes with [Aigis] for generating a styleguide.
+This repository represents our starting point for creating CSS styles. Comes with [Aigis] and [SassDoc] for generating a styleguide and a code documentation.
 
 Uses the following libraries by default:
 
@@ -32,6 +32,9 @@ npm run build:prod
 # builds the styleguide
 npm run styleguide
 
+# builds the code documentation
+npm run docs
+
 # watches the sass files for changes and builds them automatically
 npm run watch
 
@@ -53,3 +56,4 @@ npm test
 [tiny extension]: ./src/_exceptions.scss
 [Vertical Rhythm]: https://zellwk.com/blog/why-vertical-rhythms/
 [Google Web Fundamentals]: https://developers.google.com/web/fundamentals
+[SassDoc]: http://sassdoc.com/

aigis/assets/css/highlight/duotone-light.css

@@ -0,0 +1,168 @@
+/*
+Name:   Duotone Light
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-size: 14px;
+  line-height: 1.375;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  background: #faf8f5;
+  color: #728fcb;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #faf8f5;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #faf8f5;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #b6ad9a;
+}
+
+.token.punctuation {
+  color: #b6ad9a;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+  color: #063289;
+}
+
+.token.property,
+.token.function {
+  color: #b29762;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+  color: #2d2006;
+}
+
+code.language-javascript,
+.token.attr-name {
+  color: #896724;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #728fcb;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #93abdc;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #2d2006;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #896724;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: .4em solid #896724;
+  outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right-color: #ece8de;
+}
+
+.line-numbers-rows > span:before {
+  color: #cdc4b1;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+  background: rgba(45, 32, 6, 0.2);
+  background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+  background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+}

aigis/assets/css/styleguide.css → aigis/assets/css/styles.css

@@ -1,12 +1,14 @@
-@import "https://necolas.github.io/normalize.css/5.0.0/normalize.css";
-
 *,
 *::before,
 *::after {
     transition-duration: inherit;
     transition-property: none;
 }
 
+body {
+    margin: 0;
+}
+
 sup a {
     color: #0af;
     text-decoration: none;
@@ -28,13 +30,12 @@ pre code {
 }
 
 :root {
-    background-color: #2a2734;
     transition-duration: 330ms;
 }
 
 .styleguide-sidebar {
     bottom: 3.375em;
-    color: #fefefe;
+    color: #000;
     left: 0;
     overflow: auto;
     padding: 2em;
@@ -49,16 +50,14 @@ pre code {
 }
 
 .styleguide-content {
-    background-color: #fefefe;
     margin: 0 0 3.375em 320px;
     padding: 2em;
     width: calc(100% - 320px);
 }
 
 .styleguide-footer {
-    background-color: #2a2734;
     bottom: 0;
-    color: #fefefe;
+    color: #000;
     height: 3.375em;
     left: 0;
     padding: 1em 2em;
@@ -95,17 +94,12 @@ pre code {
 
 .styleguide-nav-tags > .link {
     border-radius: 3px;
-    border: 1px solid #fefefe;
+    border: 1px solid #000;
     margin: 0 0.5em 0.5em 0;
     padding: 4px 8px;
     text-decoration: none;
 }
 
-.styleguide-nav-tags > .link:hover {
-    background-color: #fefefe;
-    color: #2a2734;
-}
-
 .styleguide-nav-categories a {
     position: relative;
     text-decoration: none;
@@ -171,6 +165,10 @@ pre code {
     opacity: 0.25;
 }
 
+.styleguide-sourcepath {
+    margin-left: auto;
+}
+
 .aigis-preview {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAF0lEQVR4AWP4DwVvoWCgBGAMmMQACQAAuK72AWHjK4wAAAAASUVORK5CYII=');
     background-size: 8px 8px;

aigis/assets/css/themes/duotone-dark.css

@@ -0,0 +1,26 @@
+:root {
+    background-color: #2a2734;
+}
+
+.styleguide-sidebar {
+    color: #fefefe;
+}
+
+
+.styleguide-content {
+    background-color: #fefefe;
+}
+
+.styleguide-footer {
+    background-color: #2a2734;
+    color: #fefefe;
+}
+
+.styleguide-nav-tags > .link {
+    border-color: #fefefe;
+}
+
+.styleguide-nav-tags > .link:hover {
+    background-color: #fefefe;
+    color: #2a2734;
+}

aigis/assets/css/themes/duotone-light.css

@@ -0,0 +1,23 @@
+.styleguide-sidebar {
+    background-color: #fbfafa;
+    border-right: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.styleguide-content {
+    background-color: #fefefe;
+}
+
+.styleguide-footer {
+    background-color: #fbfafa;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.styleguide-nav-tags > .link {
+    border: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.styleguide-nav-tags > .link:hover {
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    background-color: rgba(0, 0, 0, 0.125);
+}

aigis/templates/colors.ejs

@@ -0,0 +1,5 @@
+<% if (colors) { %>
+    <% Object.keys(colors).forEach((name) => { %>
+        <span class="styleguide-color" style="background-color: <%= colors[name] %>" title="<%= name %>"></span>
+    <% }) %>
+<% } %>