Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 2958621

Browse files
rohmulansfrisk
rohmulan
authored and
sfrisk
committed
Typography: Add Link Variables
Fixes gh-119 Closes gh-139
1 parent 515abf2 commit 2958621

File tree

4 files changed

+155
-46
lines changed

4 files changed

+155
-46
lines changed

Diff for: ‎scss/atoms/typography/_functions.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
* 1. font-size: em(14px);
1212
* 2. font-size: em(30px/14px);
1313
*/
14-
@function em($value, $context: map-get($defaultFont, font-size)) {
14+
@function em($value, $context: map-get($font-default, font-size)) {
1515
@return ($value / $context * 1em);
1616
}

Diff for: ‎scss/atoms/typography/_mixins.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
/*
22
* ==========================================================================
3-
* Typography functions
3+
* Typography mixins
44
* ==========================================================================
55
*/
6+
@mixin heading($style) {
7+
font-size: em(map-get($style,font-size));
8+
font-weight: map-get($style,font-weight);
9+
line-height: 1;
10+
text-transform: map-get($style,capitalization);
11+
}
12+
@mixin link($style) {
13+
color: map-get($style,color);
14+
font-weight: map-get($style,font-weight);
15+
text-decoration: map-get($style,decoration);
16+
}

Diff for: ‎scss/atoms/typography/_typography.scss

+21-33
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"mixins";
1111

1212
body {
13-
font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans;
13+
font: $normal #{ map-get( $font-default, font-size ) }/1.5 $sans;
1414

1515
@media ( max-width: $viewport-md-min ) {
1616
font-size: 16px;
@@ -21,40 +21,27 @@ body {
2121
}
2222

2323
h1 {
24-
font-size: em( 67px ); // 54px works nicely, as well
25-
font-weight: 700;
26-
line-height: 1;
24+
@include heading($h1);
2725
}
2826

2927
h2 {
30-
font-size: em( 36px );
31-
font-weight: 600;
32-
line-height: 1;
28+
@include heading($h2);
3329
}
3430

3531
h3 {
36-
font-size: em( 30px );
37-
font-weight: 600;
38-
line-height: 1;
32+
@include heading($h3);
3933
}
4034

4135
h4 {
42-
font-size: em( 24px );
43-
font-weight: 600;
44-
line-height: 1;
36+
@include heading($h4);
4537
}
4638

4739
h5 {
48-
font-size: em( 20px );
49-
font-weight: 600;
50-
line-height: 1;
40+
@include heading($h5);
5141
}
5242

5343
h6 {
54-
font-size: em( 16px );
55-
font-weight: 600;
56-
line-height: 1;
57-
text-transform: uppercase;
44+
@include heading($h6);
5845
}
5946

6047
/*
@@ -65,20 +52,20 @@ h6 {
6552

6653
hr {
6754
border: 0;
68-
border-bottom: 1px solid #999;
55+
border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color);
6956
}
7057

7158
blockquote {
7259
margin: 0;
73-
padding-left: 1em;
60+
padding-left: map-get($blockquote,padding-left); //TODO consider all padding variables
7461
position: relative;
75-
border-left: 4px solid #eee; // TODO replace with color variable
76-
font-style: italic;
62+
border-left: map-get($blockquote,border);
63+
font-style: map-get($blockquote,font-style);
7764
}
7865

7966
pre {
8067
padding: 16px 20px;
81-
background: #f7f7f7;
68+
background: map-get($pre,background);
8269
font: normal 12px/1.4 $monospace;
8370
}
8471

@@ -103,15 +90,16 @@ dd {
10390
*/
10491

10592
a {
106-
//TODO add colors
107-
108-
&:hover,
93+
@include link($link);
94+
&:visited {
95+
@include link($link-visited);
96+
}
10997
&:active,
11098
&:focus {
111-
//TODO add colors
99+
@include link($link-focus);
112100
}
113-
&:visited {
114-
// TODO add colors
101+
&:hover {
102+
@include link($link-hover);
115103
}
116104
}
117105

@@ -121,8 +109,8 @@ strong {
121109
}
122110

123111
code {
124-
background: #f2f2f2; // TODO replace with color variable
112+
background: map-get($code,background);
125113
font-size: em( 16px );
126114
padding: em( 4px, 16px ) em( 8px, 16px );
127-
border-radius: 3px;
115+
border-radius: map-get($code,border-radius);
128116
}

Diff for: ‎scss/variables/typography.js

+121-11
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,161 @@
88
}
99
}( this, function( chassis ) {
1010

11-
var color = "#222",
11+
var color = "map-get($text, base)",
1212
fontSize = "20px",
1313
lineHeight = 1.5;
1414

1515
chassis.typography = {
16-
normal: {
16+
"normal": {
1717
name: "Font weight - Normal",
1818
value: "normal"
1919
},
20-
bold: {
20+
"bold": {
2121
name: "Font weight - Bold",
2222
value: "bold"
2323
},
24-
color: {
24+
"color": {
2525
name: "Font color",
2626
value: color
2727
},
28-
fontSize: {
28+
"font-size": {
2929
name: "Font size",
3030
value: fontSize
3131
},
32-
lineHeight: {
32+
"line-height": {
3333
name: "Line Height",
3434
value: lineHeight
3535
},
36-
defaultFont: {
36+
"font-default": {
3737
name: "Type Style - Default",
3838
value: {
39-
color: color,
39+
"color": color,
4040
"font-size": fontSize,
4141
"line-height": lineHeight
4242
}
4343
},
44-
monospace: {
44+
"monospace": {
4545
name: "Font Family - Monospace",
4646
value: "\"courier new\", monospace"
4747
},
48-
serif: {
48+
"serif": {
4949
name: "Font Family - Serif",
5050
value: "Georgia, \"Times New Roman\", Times, serif"
5151
},
52-
sans: {
52+
"sans": {
5353
name: "Font Family - Sans",
5454
value: "Helvetica, Arial, sans-serif"
55+
},
56+
"link": {
57+
name: "Link",
58+
value: {
59+
"color": "map-get($primary, base)",
60+
"decoration": "none",
61+
"font-weight": "normal"
62+
}
63+
},
64+
"link-hover": {
65+
name: "Link On Mouse Hover",
66+
value: {
67+
"color": "map-get($primary, light)",
68+
"decoration": "underline",
69+
"font-weight": "normal"
70+
}
71+
},
72+
"link-focus": {
73+
name: "Link On Focus or Active",
74+
value: {
75+
"color": "map-get($primary, dark)",
76+
"decoration": "none",
77+
"font-weight": "normal"
78+
}
79+
},
80+
"link-visited": {
81+
name: "Link If Visited",
82+
value: {
83+
"color": "map-get($primary, base)",
84+
"decoration": "none",
85+
"font-weight": "normal"
86+
}
87+
},
88+
"hr": {
89+
name: "HR style",
90+
value: {
91+
"color": "#999",
92+
"thickness": "1px",
93+
"style": "solid"
94+
}
95+
},
96+
"code": {
97+
name: "code style",
98+
value: {
99+
"background": "#f2f2f2",
100+
"border-radius": "3px"
101+
}
102+
},
103+
"pre": {
104+
name: "Pre style",
105+
value: {
106+
"background": "#f7f7f7"
107+
}
108+
},
109+
"h1": {
110+
name: "H1 Style",
111+
value: {
112+
"font-weight": "700",
113+
"font-size": "67px",
114+
"capitalization": "none"
115+
}
116+
},
117+
"h2": {
118+
name: "H2 Style",
119+
value: {
120+
"font-weight": "600",
121+
"font-size": "36px",
122+
"capitalization": "none"
123+
}
124+
},
125+
"h3": {
126+
name: "H3 Style",
127+
value: {
128+
"font-weight": "600",
129+
"font-size": "30px",
130+
"capitalization": "none"
131+
}
132+
},
133+
"h4": {
134+
name: "H4 Style",
135+
value: {
136+
"font-weight": "600",
137+
"font-size": "24px",
138+
"capitalization": "none"
139+
}
140+
},
141+
"h5": {
142+
name: "H5 Style",
143+
value: {
144+
"font-weight": "600",
145+
"font-size": "20px",
146+
"capitalization": "none"
147+
}
148+
},
149+
"h6": {
150+
name: "H6 Style",
151+
value: {
152+
"font-weight": "600",
153+
"font-size": "16px",
154+
"capitalization": "uppercase"
155+
}
156+
},
157+
"blockquote": {
158+
name: "BlockQuote Style",
159+
value: {
160+
"border": "4px solid #eee",
161+
"font-style": "italic",
162+
"padding-left": "1em"
163+
}
55164
}
165+
56166
};
57167

58168
return chassis;

0 commit comments

Comments
 (0)