From 69b018996b45ed394c4710cb53305921f0e4bc3a Mon Sep 17 00:00:00 2001 From: Daniel Bayerlein Date: Mon, 3 Oct 2016 10:37:46 +0200 Subject: [PATCH 1/2] Update initial variables --- docs/documentation/overview/variables.html | 56 +++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 8842d1ba..036cd481 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -68,43 +68,43 @@ doc-subtab: variables $black - - #111 + + #0a0a0a $grey-darker - - #222324 + + #363636 $grey-dark - - #69707a + + #4a4a4a $grey - - #aeb1b5 + + #7a7a7a $grey-light - - #d3d6db + + #b5b5b5 $grey-lighter - - #f5f7fa + + #dbdbdb @@ -117,57 +117,57 @@ doc-subtab: variables $blue - - #42afe3 + + #3273dc $green - - #97cd76 + + #23d160 $orange - - #f68b39 + + #ff470f $purple - - #847bb9 + + #b86bff $red - - #ed6c63 + + #ff3860 $turquoise - - #1fc8db + + #00d1b2 $yellow - - #fce473 + + #ffdd57 Typography -$family-sans-serif"Helvetica Neue", "Helvetica", "Arial", sans-serif -$family-monospace"Source Code Pro", "Monaco", "Inconsolata", monospace +$family-sans-serif-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif +$family-monospace"Inconsolata", "Consolas", "Monaco", monospace $size-148px $size-240px From 46a421fe80b88e5a4039a799377fadaacb4374df Mon Sep 17 00:00:00 2001 From: Daniel Bayerlein Date: Mon, 3 Oct 2016 10:47:36 +0200 Subject: [PATCH 2/2] Fix line indentation --- docs/documentation/overview/variables.html | 646 +++++++++++++-------- 1 file changed, 417 insertions(+), 229 deletions(-) diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 036cd481..73bebe8b 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -60,249 +60,437 @@ doc-subtab: variables
- - +
1. Initial variables
+ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + - - + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1. Initial variables
Colors
Colors
$black + + #0a0a0a +
$grey-darker + + #363636 +
$grey-dark + + #4a4a4a +
$grey + + #7a7a7a +
$grey-light + + #b5b5b5 +
$grey-lighter + + #dbdbdb +
$white + + #fff +
$blue + + #3273dc +
$green + + #23d160 +
$orange + + #ff470f +
$purple + + #b86bff +
$red + + #ff3860 +
$turquoise + + #00d1b2 +
$yellow + + #ffdd57 +
$black - - #0a0a0a -
$grey-darker - - #363636 -
$grey-dark - - #4a4a4a -
$grey - - #7a7a7a -
$grey-light - - #b5b5b5 -
$grey-lighter - - #dbdbdb -
$white - - #fff -
$blue - - #3273dc -
$green - - #23d160 -
$orange - - #ff470f -
$purple - - #b86bff -
$red - - #ff3860 -
$turquoise - - #00d1b2 -
$yellow - - #ffdd57 -
Typography
$family-sans-serif-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace"Inconsolata", "Consolas", "Monaco", monospace
$size-148px
$size-240px
$size-328px
$size-424px
$size-518px
$size-614px
$size-711px
$weight-normal400
$weight-bold700
$weight-title-normal300
$weight-title-bold500
Typography
Breakpoints
$tablet769px
$desktop980px
$widescreen1180px
$family-sans-serif-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace"Inconsolata", "Consolas", "Monaco", monospace
Miscellaneous
$easingease-out
$radius3px
$speed86ms
$size-148px
$size-240px
$size-328px
$size-424px
$size-518px
$size-614px
2. Primary colors
$primary$turquoise
$info$blue
$success$green
$warning$yellow
$danger$red
$light$grey-lighter
$dark$grey-dark
$text$grey-dark
$size-711px
3. Generated variables
$weight-normal400
$weight-bold700
$weight-title-normal300
$weight-title-bold500
Invert colors
$primary-invertfindColorInvert($primary)
$info-invertfindColorInvert($info)
$success-invertfindColorInvert($success)
$warning-invertfindColorInvert($warning)
$danger-invertfindColorInvert($danger)
$light-invert$dark
$dark-invert$light
Breakpoints
General colors
$body-background$grey-lighter
$background$grey-lighter
$border$grey-light
$border-hover$grey
$tablet769px
$desktop980px
$widescreen1180px
Text colors
$text-invertfindColorInvert($text)
$text-light$grey
$text-strong$grey-darker
Miscellaneous
Code colors
$code$red
$code-background$background
$pre$text
$pre-background$background
$easingease-out
$radius3px
$speed86ms
Link colors
$link$primary
$link-invert$primary-invert
$link-visited$purple
$link-hover$grey-darker
$link-hover-background$grey-lighter
$link-hover-border$grey-darker
$link-active$grey-darker
$link-active-border$grey-darker
2. Primary colors
Control colors
$control$text-strong
$control-background$text-invert
$control-border$border
$control-hover$link-hover
$control-hover-border$border-hover
$control-active$link
$control-active-background$link
$control-active-background-invert$link-invert
$control-active-border$link
$primary$turquoise
Typography
$family-primary$family-sans-serif
$family-code$family-monospace
$size-small$size-7
$size-normal$size-6
$size-medium$size-5
$size-large$size-3
$size-huge$size-1
$info$blue
$success$green
$warning$yellow
$danger$red
$light$grey-lighter
$dark$grey-dark
$text$grey-dark
3. Generated variables
Invert colors
$primary-invertfindColorInvert($primary)
$info-invertfindColorInvert($info)
$success-invertfindColorInvert($success)
$warning-invertfindColorInvert($warning)
$danger-invertfindColorInvert($danger)
$light-invert$dark
$dark-invert$light
General colors
$body-background$grey-lighter
$background$grey-lighter
$border$grey-light
$border-hover$grey
Text colors
$text-invertfindColorInvert($text)
$text-light$grey
$text-strong$grey-darker
Code colors
$code$red
$code-background$background
$pre$text
$pre-background$background
Link colors
$link$primary
$link-invert$primary-invert
$link-visited$purple
$link-hover$grey-darker
$link-hover-background$grey-lighter
$link-hover-border$grey-darker
$link-active$grey-darker
$link-active-border$grey-darker
Control colors
$control$text-strong
$control-background$text-invert
$control-border$border
$control-hover$link-hover
$control-hover-border$border-hover
$control-active$link
$control-active-background$link
$control-active-background-invert$link-invert
$control-active-border$link
Typography
$family-primary$family-sans-serif
$family-code$family-monospace
$size-small$size-7
$size-normal$size-6
$size-medium$size-5
$size-large$size-3
$size-huge$size-1
4. Lists and maps
$colors - - (white: ($white, $black),
- black: ($black, $white),
- light: ($light, $light-invert),
- dark: ($dark, $dark-invert),
- primary: ($primary, $primary-invert),
- info: ($info, $info-invert),
- success: ($success, $success-invert),
- warning: ($warning, $warning-invert),
- danger: ($danger, $danger-invert)) -
$sizes$size-1 $size-2 $size-3 $size-4 $size-5 $size-6
+ 4. Lists and maps + + $colors + + (white: ($white, $black), +
+ black: ($black, $white), +
+ light: ($light, $light-invert), +
+ dark: ($dark, $dark-invert), +
+ primary: ($primary, $primary-invert), +
+ info: ($info, $info-invert), +
+ success: ($success, $success-invert), +
+ warning: ($warning, $warning-invert), +
+ danger: ($danger, $danger-invert)) + + + + $sizes + $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 + +