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

[WIP] Add jsass variables to typography #134

Closed
wants to merge 2 commits into from
Closed

[WIP] Add jsass variables to typography #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0dfce82
typography: added color variables
xtina-starr Oct 17, 2015
c84175c
typography: add list, block and inline variables
theutahkate Oct 18, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions scss/atoms/typography/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,22 +64,22 @@ h6 {
*/

hr {
border: 0;
border-bottom: 1px solid #999;
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 #eee; // TODO replace with color variable
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: #f7f7f7;
font: normal 12px/1.4 $monospace;
padding: map-get($pre, padding);
background: map-get($pre, background);
font: map-get($pre, font) $monospace;
}

/*
Expand All @@ -89,11 +89,11 @@ pre {
*/

dt {
font-weight: 600;
font-weight: $dt-font-weight;
}

dd {
margin: 0;
margin: $dd-margin;
}

/*
Expand Down Expand Up @@ -121,8 +121,8 @@ strong {
}

code {
background: #f2f2f2; // TODO replace with color variable
font-size: em( 16px );
padding: em( 4px, 16px ) em( 8px, 16px );
border-radius: 3px;
background: $code-background;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could use the map and get rid of this variable? see my comment below

font-size: map-get($code, font-size);
padding: map-get($code, padding);
border-radius: map-get($code, border-radius);
}
6 changes: 1 addition & 5 deletions scss/variables/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
} ) );
60 changes: 59 additions & 1 deletion scss/variables/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,65 @@ chassis.typography = {
sans: {
name: "Font Family - Sans",
value: "Helvetica, Arial, sans-serif"
}
},
"blockquote-color": {
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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation is not right

value: "#F2F2F2"
},
"code": {
name: "Code",
value: {
"background": "$code-background",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant?? Should use only one? either code-background or inside a map. And since you seem to use maps everywhere might as well stick to maps here too.

"font-size": "em( 16px )",
"padding": "em( 4px, 16px ) em( 8px, 16px )",
"border-radius": "3px"
}
},
"pre-bgcolor": {
name: "Pre Background Color",
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;
Expand Down