From e147a19ac2e618f0028f6dbce3b0f3d94952c6e0 Mon Sep 17 00:00:00 2001 From: Rohit Mulange Date: Tue, 19 Jan 2016 00:06:39 +0530 Subject: [PATCH 1/4] Typography: Add Link Variables --- scss/atoms/typography/_typography.scss | 24 +++++++++++++------- scss/variables/typography.js | 31 +++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 6043e38..590758a 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -54,7 +54,7 @@ h6 { font-size: em( 16px ); font-weight: 600; line-height: 1; - text-transform: uppercase; + text-transform: uppercase; // FIXME Is this opinionated? } /* @@ -65,7 +65,7 @@ h6 { hr { border: 0; - border-bottom: 1px solid #999; + border-bottom: 1px solid #999; //TODO replace with color variable } blockquote { @@ -78,7 +78,7 @@ blockquote { pre { padding: 16px 20px; - background: #f7f7f7; + background: #f7f7f7; // TODO replace with color variable font: normal 12px/1.4 $monospace; } @@ -103,15 +103,23 @@ dd { */ a { - //TODO add colors + color: map-get($link,color); + font-weight: map-get($link,weight); + text-decoration: map-get($link,decoration); + + &:hover { + color: map-get($link-hover,color); + text-decoration: map-get($link-hover,decoration); + } - &:hover, &:active, &:focus { - //TODO add colors + color: map-get($link-focus,color); + text-decoration: map-get($link-focus,decoration); } &:visited { - // TODO add colors + color: map-get($link-visited,color); + text-decoration: map-get($link-visited,decoration); } } @@ -124,5 +132,5 @@ code { background: #f2f2f2; // TODO replace with color variable font-size: em( 16px ); padding: em( 4px, 16px ) em( 8px, 16px ); - border-radius: 3px; + border-radius: 3px; // TODO replace with variable } diff --git a/scss/variables/typography.js b/scss/variables/typography.js index 170866b..fe60d59 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -10,7 +10,8 @@ var color = "#222", fontSize = "20px", - lineHeight = 1.5; + lineHeight = 1.5, + linkColor = "#4078c0"; chassis.typography = { normal: { @@ -52,6 +53,34 @@ chassis.typography = { sans: { name: "Font Family - Sans", value: "Helvetica, Arial, sans-serif" + }, + link: { + name: "Link", + value: { + color: linkColor, // TODO replace with a color from the color-palette + decoration: "none" + } + }, + "link-hover": { + name: "Link On Mouse Hover", + value: { + color: linkColor, + decoration: "underline" + } + }, + "link-focus": { + name: "Link On Focus or Active", + value: { + color: linkColor, + decoration: "none" + } + }, + "link-visited": { + name: "Link If Visited", + value: { + color: linkColor, + decoration: "none" + } } }; From 5bef808956c9fb0f200c38166b9a1df20c7fb0af Mon Sep 17 00:00:00 2001 From: Rohit Mulange Date: Tue, 23 Feb 2016 23:19:30 +0530 Subject: [PATCH 2/4] Typography: Use color variables and palette --- scss/atoms/typography/_typography.scss | 2 +- scss/variables/typography.js | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 590758a..1ad4cc6 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -65,7 +65,7 @@ h6 { hr { border: 0; - border-bottom: 1px solid #999; //TODO replace with color variable + border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color); } blockquote { diff --git a/scss/variables/typography.js b/scss/variables/typography.js index fe60d59..ac329f8 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -8,10 +8,10 @@ } }( this, function( chassis ) { -var color = "#222", +var color = "map-get($text, base)", fontSize = "20px", lineHeight = 1.5, - linkColor = "#4078c0"; + linkColor = "map-get($primary, light)"; chassis.typography = { normal: { @@ -57,7 +57,7 @@ chassis.typography = { link: { name: "Link", value: { - color: linkColor, // TODO replace with a color from the color-palette + color: linkColor, decoration: "none" } }, @@ -81,6 +81,14 @@ chassis.typography = { color: linkColor, decoration: "none" } + }, + "hr": { + name: "HR style", + value: { + color: "#999", + thickness: "1px", + style: "solid" + } } }; From c78216a35f05365f9616ef2212d70c04beb4d0a9 Mon Sep 17 00:00:00 2001 From: Rohit Mulange Date: Sat, 27 Feb 2016 00:39:01 +0530 Subject: [PATCH 3/4] Typography: Add heading and code variables --- scss/atoms/typography/_mixins.scss | 8 +++- scss/atoms/typography/_typography.scss | 31 ++++--------- scss/variables/typography.js | 64 +++++++++++++++++++++++++- 3 files changed, 79 insertions(+), 24 deletions(-) diff --git a/scss/atoms/typography/_mixins.scss b/scss/atoms/typography/_mixins.scss index 10963ec..dae7c48 100644 --- a/scss/atoms/typography/_mixins.scss +++ b/scss/atoms/typography/_mixins.scss @@ -1,5 +1,11 @@ /* * ========================================================================== -* Typography functions +* Typography mixins * ========================================================================== */ +@mixin heading($style) { + font-size: em(map-get($style,fontSize)); + font-weight: map-get($style,fontWeight); + line-height: 1; + text-transform: map-get($style,capitalization); +} diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 1ad4cc6..a8a1d23 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -21,40 +21,27 @@ body { } h1 { - font-size: em( 67px ); // 54px works nicely, as well - font-weight: 700; - line-height: 1; + @include heading($h1); } h2 { - font-size: em( 36px ); - font-weight: 600; - line-height: 1; + @include heading($h2); } h3 { - font-size: em( 30px ); - font-weight: 600; - line-height: 1; + @include heading($h3); } h4 { - font-size: em( 24px ); - font-weight: 600; - line-height: 1; + @include heading($h4); } h5 { - font-size: em( 20px ); - font-weight: 600; - line-height: 1; + @include heading($h5); } h6 { - font-size: em( 16px ); - font-weight: 600; - line-height: 1; - text-transform: uppercase; // FIXME Is this opinionated? + @include heading($h6); } /* @@ -78,7 +65,7 @@ blockquote { pre { padding: 16px 20px; - background: #f7f7f7; // TODO replace with color variable + background: map-get($pre,background); font: normal 12px/1.4 $monospace; } @@ -129,8 +116,8 @@ strong { } code { - background: #f2f2f2; // TODO replace with color variable + background: map-get($code,background); font-size: em( 16px ); padding: em( 4px, 16px ) em( 8px, 16px ); - border-radius: 3px; // TODO replace with variable + border-radius: map-get($code,borderRadius); } diff --git a/scss/variables/typography.js b/scss/variables/typography.js index ac329f8..f86f132 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -82,14 +82,76 @@ chassis.typography = { decoration: "none" } }, - "hr": { + hr: { name: "HR style", value: { color: "#999", thickness: "1px", style: "solid" } + }, + code: { + name: "code style", + value: { + background: "#f2f2f2", + borderRadius: "3px" + } + }, + pre: { + name: "Pre style", + value: { + background: "#f7f7f7" + } + }, + h1: { + name: "H1 Style", + value: { + fontWeight: "700", + fontSize: "67px", + capitalization: "none" + } + }, + h2: { + name: "H2 Style", + value: { + fontWeight: "600", + fontSize: "36px", + capitalization: "none" + } + }, + h3: { + name: "H3 Style", + value: { + fontWeight: "600", + fontSize: "30px", + capitalization: "none" + } + }, + h4: { + name: "H4 Style", + value: { + fontWeight: "600", + fontSize: "24px", + capitalization: "none" + } + }, + h5: { + name: "H5 Style", + value: { + fontWeight: "600", + fontSize: "20px", + capitalization: "none" + } + }, + h6: { + name: "H6 Style", + value: { + fontWeight: "600", + fontSize: "16px", + capitalization: "uppercase" + } } + }; return chassis; From 3c4dab8ac26d5e6444108ed6dbe2b81d26156400 Mon Sep 17 00:00:00 2001 From: Rohit Mulange Date: Thu, 3 Mar 2016 23:40:05 +0530 Subject: [PATCH 4/4] Typography: Variable style change in jsass and link colors --- scss/atoms/typography/_functions.scss | 2 +- scss/atoms/typography/_mixins.scss | 9 +- scss/atoms/typography/_typography.scss | 29 +++--- scss/variables/typography.js | 119 ++++++++++++++----------- 4 files changed, 84 insertions(+), 75 deletions(-) diff --git a/scss/atoms/typography/_functions.scss b/scss/atoms/typography/_functions.scss index 6ff16ab..6bb573a 100644 --- a/scss/atoms/typography/_functions.scss +++ b/scss/atoms/typography/_functions.scss @@ -11,6 +11,6 @@ * 1. font-size: em(14px); * 2. font-size: em(30px/14px); */ -@function em($value, $context: map-get($defaultFont, font-size)) { +@function em($value, $context: map-get($font-default, font-size)) { @return ($value / $context * 1em); } diff --git a/scss/atoms/typography/_mixins.scss b/scss/atoms/typography/_mixins.scss index dae7c48..2964d15 100644 --- a/scss/atoms/typography/_mixins.scss +++ b/scss/atoms/typography/_mixins.scss @@ -4,8 +4,13 @@ * ========================================================================== */ @mixin heading($style) { - font-size: em(map-get($style,fontSize)); - font-weight: map-get($style,fontWeight); + font-size: em(map-get($style,font-size)); + font-weight: map-get($style,font-weight); line-height: 1; text-transform: map-get($style,capitalization); } +@mixin link($style) { + color: map-get($style,color); + font-weight: map-get($style,font-weight); + text-decoration: map-get($style,decoration); +} diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index a8a1d23..c3d584d 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -10,7 +10,7 @@ "mixins"; body { - font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans; + font: $normal #{ map-get( $font-default, font-size ) }/1.5 $sans; @media ( max-width: $viewport-md-min ) { font-size: 16px; @@ -57,10 +57,10 @@ hr { blockquote { margin: 0; - padding-left: 1em; + padding-left: map-get($blockquote,padding-left); //TODO consider all padding variables position: relative; - border-left: 4px solid #eee; // TODO replace with color variable - font-style: italic; + border-left: map-get($blockquote,border); + font-style: map-get($blockquote,font-style); } pre { @@ -90,23 +90,16 @@ dd { */ a { - color: map-get($link,color); - font-weight: map-get($link,weight); - text-decoration: map-get($link,decoration); - - &:hover { - color: map-get($link-hover,color); - text-decoration: map-get($link-hover,decoration); + @include link($link); + &:visited { + @include link($link-visited); } - &:active, &:focus { - color: map-get($link-focus,color); - text-decoration: map-get($link-focus,decoration); + @include link($link-focus); } - &:visited { - color: map-get($link-visited,color); - text-decoration: map-get($link-visited,decoration); + &:hover { + @include link($link-hover); } } @@ -119,5 +112,5 @@ code { background: map-get($code,background); font-size: em( 16px ); padding: em( 4px, 16px ) em( 8px, 16px ); - border-radius: map-get($code,borderRadius); + border-radius: map-get($code,border-radius); } diff --git a/scss/variables/typography.js b/scss/variables/typography.js index f86f132..f0abaf3 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -10,145 +10,156 @@ var color = "map-get($text, base)", fontSize = "20px", - lineHeight = 1.5, - linkColor = "map-get($primary, light)"; + lineHeight = 1.5; chassis.typography = { - normal: { + "normal": { name: "Font weight - Normal", value: "normal" }, - bold: { + "bold": { name: "Font weight - Bold", value: "bold" }, - color: { + "color": { name: "Font color", value: color }, - fontSize: { + "font-size": { name: "Font size", value: fontSize }, - lineHeight: { + "line-height": { name: "Line Height", value: lineHeight }, - defaultFont: { + "font-default": { name: "Type Style - Default", value: { - color: color, + "color": color, "font-size": fontSize, "line-height": lineHeight } }, - monospace: { + "monospace": { name: "Font Family - Monospace", value: "\"courier new\", monospace" }, - serif: { + "serif": { name: "Font Family - Serif", value: "Georgia, \"Times New Roman\", Times, serif" }, - sans: { + "sans": { name: "Font Family - Sans", value: "Helvetica, Arial, sans-serif" }, - link: { + "link": { name: "Link", value: { - color: linkColor, - decoration: "none" + "color": "map-get($primary, base)", + "decoration": "none", + "font-weight": "normal" } }, "link-hover": { name: "Link On Mouse Hover", value: { - color: linkColor, - decoration: "underline" + "color": "map-get($primary, light)", + "decoration": "underline", + "font-weight": "normal" } }, "link-focus": { name: "Link On Focus or Active", value: { - color: linkColor, - decoration: "none" + "color": "map-get($primary, dark)", + "decoration": "none", + "font-weight": "normal" } }, "link-visited": { name: "Link If Visited", value: { - color: linkColor, - decoration: "none" + "color": "map-get($primary, base)", + "decoration": "none", + "font-weight": "normal" } }, - hr: { + "hr": { name: "HR style", value: { - color: "#999", - thickness: "1px", - style: "solid" + "color": "#999", + "thickness": "1px", + "style": "solid" } }, - code: { + "code": { name: "code style", value: { - background: "#f2f2f2", - borderRadius: "3px" + "background": "#f2f2f2", + "border-radius": "3px" } }, - pre: { + "pre": { name: "Pre style", value: { - background: "#f7f7f7" + "background": "#f7f7f7" } }, - h1: { + "h1": { name: "H1 Style", value: { - fontWeight: "700", - fontSize: "67px", - capitalization: "none" + "font-weight": "700", + "font-size": "67px", + "capitalization": "none" } }, - h2: { + "h2": { name: "H2 Style", value: { - fontWeight: "600", - fontSize: "36px", - capitalization: "none" + "font-weight": "600", + "font-size": "36px", + "capitalization": "none" } }, - h3: { + "h3": { name: "H3 Style", value: { - fontWeight: "600", - fontSize: "30px", - capitalization: "none" + "font-weight": "600", + "font-size": "30px", + "capitalization": "none" } }, - h4: { + "h4": { name: "H4 Style", value: { - fontWeight: "600", - fontSize: "24px", - capitalization: "none" + "font-weight": "600", + "font-size": "24px", + "capitalization": "none" } }, - h5: { + "h5": { name: "H5 Style", value: { - fontWeight: "600", - fontSize: "20px", - capitalization: "none" + "font-weight": "600", + "font-size": "20px", + "capitalization": "none" } }, - h6: { + "h6": { name: "H6 Style", value: { - fontWeight: "600", - fontSize: "16px", - capitalization: "uppercase" + "font-weight": "600", + "font-size": "16px", + "capitalization": "uppercase" + } + }, + "blockquote": { + name: "BlockQuote Style", + value: { + "border": "4px solid #eee", + "font-style": "italic", + "padding-left": "1em" } }