6 files changed, 246 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/atoms/_animations.scss b/plugins/jetpack/scss/atoms/_animations.scss
new file mode 100644
index 00000000..8f032271
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/_animations.scss
@@ -0,0 +1,18 @@
+// ==========================================================================
+// Animation for miles!
+// ==========================================================================
+
+@keyframes "candy" {
+	0% {
+		transform: scale(1);
+	}
+	20% {
+		transform: scale(1.15);
+	}
+	60% {
+		transform: scale(.95);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
diff --git a/plugins/jetpack/scss/atoms/_buttons.scss b/plugins/jetpack/scss/atoms/_buttons.scss
new file mode 100644
index 00000000..45825f97
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/_buttons.scss
@@ -0,0 +1,137 @@
+// ==========================================================================
+// Buttony button buttons
+// ==========================================================================
+
+.button,
+.download-jetpack {
+	transition: all .1s ease-in-out;
+}
+.jp-button {
+	display: inline-block;
+	position: relative;
+	padding: em(10px, 13px) em(19px, 13px);
+	color: #efefef;
+	font-weight: bold;
+	font-size: 0.9285714286em; // 13/14
+	line-height: 1;
+	text-shadow: 0 1px 1px rgba(0,0,0,.2);
+	background: #6f7476;
+	border-radius: 3px;
+
+	&:visited {
+		color: #efefef;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+	}
+	&:active {
+		background: #57972d;
+		opacity: 0.8;
+	}
+}
+.jp-button--settings {
+	@extend .jp-button;
+	background: #93b45f;
+	color: #e8eedf;
+
+	&:visited {
+		color: #e8eedf
+	}
+	&:hover,
+	&:focus {
+		background: #9fbd72;
+		color: #fff;
+	}
+	&.current {
+		background: #3c6621;
+		color: #fff;
+		box-shadow:
+			inset 0 2px 0 #365A1F,
+			inset 0 1px 3px #3c6621;
+	}
+}
+.download-jetpack {
+	display: inline-block;
+	position: relative;
+	padding: em(18px, 28px) em(50px, 46px) em(15px, 28px);
+	color: #fff;
+	font-weight: 400;
+	font-size: 20px;
+	line-height: 1;
+	background: #518d2a;
+	z-index: 3;
+	border-radius: 6px;
+	box-shadow:
+		0 6px 0 #3e6c20,
+		0 6px 3px rgba(0,0,0,.4);
+
+	&:visited {
+		color: #fff;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+		box-shadow:
+			0 6px 0 #3e6c20,
+			0 6px 3px rgba(0,0,0,.4);
+	}
+	&:active {
+		top: 6px;
+		box-shadow:
+			0 0px 0 #3e6c20,
+			0 0 0 rgba(0,0,0,.4);
+
+		&:after {
+			// fixes buggy clicks
+			top: -6px;
+		}
+	}
+	&:before {
+		content: '';
+		display: inline-block;
+		position: relative;
+		top: -2px;
+		margin-right: 13px;
+		width: 30px;
+		height: 30px;
+		vertical-align: middle;
+		background: url('../images/connect-plug.svg') center center no-repeat;
+		background-size: 100%;
+	}
+	&:after {
+		// fixes buggy clicks
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	@include breakpoint(large-desktop){
+		font-size: em(18px);
+
+		&:before {
+			top: -1px;
+			width: 23px;
+			height: 23px;
+		}
+	};
+	@include breakpoint(desktop){
+		&:active {
+			top: 0;
+		}
+	};
+	@include breakpoint(large-phone){
+		font-size: em(17px);
+		font-weight: 600;
+
+		&:before {
+			width: 19px;
+			height: 19px;
+			margin-right: 9px;
+		}
+	};
+}
diff --git a/plugins/jetpack/scss/atoms/colors/_colors.scss b/plugins/jetpack/scss/atoms/colors/_colors.scss
new file mode 100644
index 00000000..63b869f8
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/colors/_colors.scss
@@ -0,0 +1,16 @@
+// ==========================================================================
+// Jetpack Colors
+// ==========================================================================
+
+$green: #81a844;
+$white: #fff;
+$red: #d94f4f;
+
+// Blues
+$lightblue: #2ea2cc;
+$wpcom: #0087be;
+$blue-dark: #005082;
+
+// Grays
+$clouds: #f9f9f9;
+$gray-med: #686f72;
diff --git a/plugins/jetpack/scss/atoms/icons/_automatticons.scss b/plugins/jetpack/scss/atoms/icons/_automatticons.scss
new file mode 100644
index 00000000..01eb9791
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/icons/_automatticons.scss
@@ -0,0 +1,32 @@
+// ==========================================================================
+// Automatticons
+//
+// A quick reference
+// ==========================================================================
+
+$automatticons: 'automatticons';
+
+// This font was graciously generated by Font Squirrel (http://www.fontsquirrel.com). We love those guys.
+@font-face {
+	font-family: 'automatticons';
+	src: url('../_inc/fonts/automatticons/automatticons.eot');
+	src: url('../_inc/fonts/automatticons/automatticons.eot?#iefix') format('embedded-opentype'),
+		url('../_inc/fonts/automatticons/automatticons.woff') format('woff'),
+		url('../_inc/fonts/automatticons/automatticons.ttf') format('truetype'),
+		url('../_inc/fonts/automatticons/automatticons.svg#automatticonsregular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+// $automattic: 'A';
+// $code-poet: 'C';
+// $facebook: 'F';
+// $gravatar: 'G';
+// $inferno: 'I'; // Not sure what this one is
+// $jetpack: 'J';
+// $akismet: 'K';
+// $polldaddy: 'P';
+// $shield: 's'; // VaultPress shield
+// $vaultpress: 'V';
+// $vaultpress-inverted: 'v';
+// $wordpress: 'W';
diff --git a/plugins/jetpack/scss/atoms/typography/_functions.scss b/plugins/jetpack/scss/atoms/typography/_functions.scss
new file mode 100644
index 00000000..878bc05e
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/typography/_functions.scss
@@ -0,0 +1,12 @@
+// ==========================================================================
+// em()
+//
+// Convert px to em in a readable fashion.
+// ==========================================================================
+
+// Examples:
+// 1. font-size: em(14px);
+// 2. font-size: em(30px/14px);
+@function em($value, $context: map-get($root-font, font-size)) {
+	@return ($value / $context * 1em);
+}
diff --git a/plugins/jetpack/scss/atoms/typography/_variables.scss b/plugins/jetpack/scss/atoms/typography/_variables.scss
new file mode 100644
index 00000000..e1a912b1
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/typography/_variables.scss
@@ -0,0 +1,31 @@
+// ==========================================================================
+// Typography variables
+// ==========================================================================
+
+$normal: normal; // Change these values when using custom fonts
+$bold: bold; // For example, bold could change to 400;
+
+$root-font:(
+	color: #222,
+	font-size: 14px,
+	line-height: 1.4
+);
+
+$pre__background: #eee;
+$mark__background: #fff9c0;
+
+// ==========================================================================
+// Typefaces
+// ==========================================================================
+
+$monospace: 'courier new', monospace;
+$serif: Georgia, "Times New Roman", Times, serif;
+$sans: Helvetica, Arial, sans-serif; // 400i,400,600,700,800
+$calluna: 'calluna', $sans; // 400
+$gill: "Gill Sans", "Gill Sans MT", $sans;
+
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+$genericons: 'genericons';