Merge pull request #41 from Brightspace/dbatiste/add-color-variable

Dbatiste/add color variable

.npmignore

@@ -2,10 +2,9 @@
 .gitattributes
 .gitignore
 .npmignore
-.travis.yml
 .csslintrc
+.travis.yml
 bower_components
 node_modules
-karma.conf.js
 test
 typography.css.scss

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '4.1.1'
+- 4.1.1
 sudo: false
 deploy:
   provider: npm
@@ -10,3 +10,6 @@ deploy:
   on:
     tags: true
     all_branches: true
+env:
+  global:
+    secure: Z291fOPTg/3XEw/pBgA/9s4y0cyc/CkFdn0YRIbLyk66y9FWVIwacytGsl2hs2+hQZXXizrx6GK+NEUCuOB+CpFzFi9sE0+b+HIQ/hAnPC8L9AdGWKiIS6skekjJC+ZhQRJq+/DnSe8/N8Mr3YA6rO3PiqHlVJ5787y5vId4w2E=

bower.json

@@ -10,7 +10,6 @@
     ".gitignore",
     ".npmignore",
     ".travis.yml",
-    "karma.conf.js",
     "package.json"
   ],
   "dependencies": {

package.json

@@ -1,14 +1,17 @@
 {
   "name": "vui-typography",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Mixins and CSS for applying basic typography styles",
   "scripts": {
-    "clean": "rimraf *.css",
+    "clean": "rimraf *.css && rimraf ./test/*.css",
     "prebuild": "npm run clean",
-    "build": "node-sass --output-style expanded typography.css.scss typography.css",
+    "build:sass": "node-sass --output-style expanded typography.css.scss typography.css",
+    "build:sass:test": "node-sass --output-style expanded ./test/test.scss ./test/test.css",
+    "build": "npm run build:sass && npm run build:sass:test",
+    "perceptual-diff": "percy snapshot test/",
     "postinstall": "bower install",
     "pretest": "npm run build",
-    "test": "csslint typography.css && karma start karma.conf.js"
+    "test": "csslint typography.css"
   },
   "repository": {
     "type": "git",
@@ -30,11 +33,6 @@
   },
   "devDependencies": {
     "csslint": "^0.10.0",
-    "jasmine-dom-matchers": "^0.1.0",
-    "karma": "^0.12.32",
-    "karma-phantomjs-launcher": "^0.1.4",
-    "karma-jasmine": "^0.3.5",
-    "karma-cli": "0.0.4",
     "node-sass": "^3.1.1",
     "rimraf": "^2.3.4"
   }

small-text.scss

@@ -1,31 +1,34 @@
 @import 'bower_components/vui-colors/colors.scss';
-@import 'px-to-base-rem.scss';
 
 @mixin vui-typography-small-text(
+		$color: $vui-color-ferrite,
 		$fontWeight: 400,
 		$margin: 1rem 0 1rem 0,
 		$line-height: 1rem
 	) {
 
-	color: $vui-color-ferrite;
+	color: $color;
 	font-family: inherit;
 	font-size: 0.7rem;
 	font-weight: $fontWeight;
 	line-height: $line-height;
-	letter-spacing: px-to-base-rem(0.4px);
+	letter-spacing: 0.02rem;
 	margin: $margin;
 
 }
 
-@mixin vui-typography-small-strong-text($fontWeight: 700, $margin: 1rem 0 1rem 0) {
+@mixin vui-typography-small-strong-text(
+		$color: $vui-color-ferrite,
+		$fontWeight: 700, 
+		$margin: 1rem 0 1rem 0
+	) {
+
+	@include vui-typography-small-text(
+			$color: $color,
+			$fontWeight: $fontWeight,
+			$margin: $margin
+		);
 
-	color: $vui-color-ferrite;
-	font-family: inherit;
-	font-size: 0.7rem;
-	font-weight: $fontWeight;
-	line-height: 1rem;
-	letter-spacing: px-to-base-rem(0.4px);
-	margin: $margin;
 	text-transform: uppercase;
 
 }

test/test.css

@@ -0,0 +1,113 @@
+@import url(https://s.brightspace.com/lib/fonts/0.2.0/fonts.css);
+html {
+  font-size: 20px;
+}
+
+body {
+  color: #565a5c;
+  font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: 0.015rem;
+  margin: 1rem;
+}
+
+body.vui-dyslexic,
+body .vui-dyslexic {
+  font-weight: 400;
+  font-family: 'Open Dyslexic', sans-serif;
+}
+
+body :lang(ar) {
+  font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
+}
+
+body :lang(zh-CN) {
+  font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
+}
+
+body :lang(zh-TW) {
+  font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
+}
+
+body :lang(ko) {
+  font-family: 'Apple SD Gothic Neo', Dotum, sans-serif;
+}
+
+body :lang(ja) {
+  font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
+}
+
+body p {
+  margin: 1.5rem 0;
+}
+
+table {
+  max-width: 1000px;
+}
+
+td, th {
+  padding: 0.5rem;
+}
+
+.heading-1 {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 3rem;
+  letter-spacing: -0.025rem;
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+.heading-2 {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 2.25rem;
+  letter-spacing: -0.015rem;
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+.heading-3 {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  letter-spacing: 0.025rem;
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+.heading-3 {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0.02rem;
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+.small-text {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  margin: 1rem 0 1rem 0;
+}
+
+.small-strong-text {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 0.7rem;
+  font-weight: 700;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  margin: 1rem 0 1rem 0;
+  text-transform: uppercase;
+}

test/test.scss

@@ -0,0 +1,43 @@
+@import '../typography.scss';
+@import '../headings.scss';
+@import '../small-text.scss';
+
+html {
+	font-size: 20px;
+}
+body {
+	@include vui-typography;
+	margin: 1rem;
+}
+table {
+	max-width: 1000px;
+}
+td, th {
+	padding: 0.5rem;
+}
+td {
+}
+
+.heading-1 {
+	@include vui-typography-heading1;
+}
+
+.heading-2 {
+	@include vui-typography-heading2;
+}
+
+.heading-3 {
+	@include vui-typography-heading3;
+}
+
+.heading-3 {
+	@include vui-typography-heading4;
+}
+
+.small-text {
+	@include vui-typography-small-text;
+}
+
+.small-strong-text {
+	@include vui-typography-small-strong-text;
+}