From 0dfce8282498afb8585a5449771246fc28737739 Mon Sep 17 00:00:00 2001 From: xtina-starr Date: Sat, 17 Oct 2015 17:49:49 -0400 Subject: [PATCH 1/2] typography: added color variables --- scss/atoms/typography/_typography.scss | 8 ++++---- scss/variables/typography.js | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 5d97583..08213c8 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -65,20 +65,20 @@ h6 { hr { border: 0; - border-bottom: 1px solid #999; + border-bottom: 1px solid $hr-border-color; } blockquote { margin: 0; padding-left: 1em; position: relative; - border-left: 4px solid #eee; // TODO replace with color variable + border-left: 4px solid $blockquote-color; font-style: italic; } pre { padding: 16px 20px; - background: #f7f7f7; + background: $pre-bgcolor; font: normal 12px/1.4 $monospace; } @@ -121,7 +121,7 @@ strong { } code { - background: #f2f2f2; // TODO replace with color variable + background: $code-background; font-size: em( 16px ); padding: em( 4px, 16px ) em( 8px, 16px ); border-radius: 3px; diff --git a/scss/variables/typography.js b/scss/variables/typography.js index 170866b..030bfa6 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -52,6 +52,22 @@ chassis.typography = { sans: { name: "Font Family - Sans", value: "Helvetica, Arial, sans-serif" + }, + "blockquote-color": { + name: "blockquote color", + value: "#eee" + }, + "code-background": { + name: "Code Background Color", + value: "#F2F2F2" + }, + "pre-bgcolor": { + name: "Pre Background Color", + value: "#f7f7f7" + }, + "hr-border-color": { + name: "Horizontal Rule Border Color", + value: "#999" } }; From c84175cad69cf833109372562ed47de0377682db Mon Sep 17 00:00:00 2001 From: Utah Kate Newman Date: Sun, 18 Oct 2015 16:42:21 -0400 Subject: [PATCH 2/2] typography: add list, block and inline variables --- scss/atoms/typography/_typography.scss | 30 ++++++++--------- scss/variables/colors.js | 6 +--- scss/variables/typography.js | 46 ++++++++++++++++++++++++-- 3 files changed, 60 insertions(+), 22 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 08213c8..2016aab 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -64,22 +64,22 @@ h6 { */ hr { - border: 0; - border-bottom: 1px solid $hr-border-color; + border: map-get($hr, border); + border-bottom: map-get($hr, border-bottom) $hr-border-color; } blockquote { - margin: 0; - padding-left: 1em; - position: relative; - border-left: 4px solid $blockquote-color; - font-style: italic; + margin: map-get($blockquote, margin); + padding-left: map-get($blockquote, padding-left); + position: map-get($blockquote, position); + border-left: map-get($blockquote, border-left) $blockquote-color; + font-style: map-get($blockquote, font-style); } pre { - padding: 16px 20px; - background: $pre-bgcolor; - font: normal 12px/1.4 $monospace; + padding: map-get($pre, padding); + background: map-get($pre, background); + font: map-get($pre, font) $monospace; } /* @@ -89,11 +89,11 @@ pre { */ dt { - font-weight: 600; + font-weight: $dt-font-weight; } dd { - margin: 0; + margin: $dd-margin; } /* @@ -122,7 +122,7 @@ strong { code { background: $code-background; - font-size: em( 16px ); - padding: em( 4px, 16px ) em( 8px, 16px ); - border-radius: 3px; + font-size: map-get($code, font-size); + padding: map-get($code, padding); + border-radius: map-get($code, border-radius); } diff --git a/scss/variables/colors.js b/scss/variables/colors.js index 5f7cb5d..5e278ad 100644 --- a/scss/variables/colors.js +++ b/scss/variables/colors.js @@ -39,11 +39,7 @@ chassis.colors = { "font": colors[ "chassis-gray-dark" ], "link": colors[ "chassis-blue-dark" ], "button": colors[ "chassis-blue" ], - "buttonText": colors[ "chassis-gray-light" ], - "blockquoteBorder": { - name: "Chassis - Blockquote color", - value: "#eee" - } + "buttonText": colors[ "chassis-gray-light" ] }; return chassis; } ) ); diff --git a/scss/variables/typography.js b/scss/variables/typography.js index 030bfa6..2d0f703 100644 --- a/scss/variables/typography.js +++ b/scss/variables/typography.js @@ -57,18 +57,60 @@ chassis.typography = { name: "blockquote color", value: "#eee" }, + "blockquote": { + name: "Blockquote", + value: { + "margin": "0", + "padding-left": "1em", + "position": "relative", + "border-left": "4px solid ", + "font-style": "italic" + } + }, "code-background": { name: "Code Background Color", value: "#F2F2F2" }, + "code": { + name: "Code", + value: { + "background": "$code-background", + "font-size": "em( 16px )", + "padding": "em( 4px, 16px ) em( 8px, 16px )", + "border-radius": "3px" + } + }, "pre-bgcolor": { name: "Pre Background Color", - value: "#f7f7f7" + value: "#eee" }, + "pre": { + name: "Pre", + value: { + "padding": "16px 20px", + "background": "$pre-bgcolor", + "font": "normal 12px/1.4 " + } + }, "hr-border-color": { name: "Horizontal Rule Border Color", value: "#999" - } + }, + "hr": { + name: "Horizontal Rule", + value: { + "border": "0", + "border-bottom": "1px solid " + } + }, + "dt-font-weight": { + name: "Description Term Font Weight", + value: "600" + }, + "dd-margin": { + name: "Description Element Margin", + value: "0" + } }; return chassis;