Merge pull request #14 from edx/andya/update-colors

Improve the edx.org theme colors and fonts

Author: andy-armstrong

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/edx-bootstrap",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The Bootstrap theme for Open edX",
   "license": "Apache-2.0",
   "repository": {

sass/edx/_variables.scss

@@ -9,15 +9,15 @@
 //
 
 $white:  #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
+$gray-100: #f5f5f5 !default;
+$gray-200: #e7e7e7 !default;
+$gray-300: #d9d9d9 !default;
+$gray-400: #c8c8c8 !default;
+$gray-500: #a0a0a0 !default;
+$gray-600: #767676 !default;
+$gray-700: #414141 !default;
+$gray-800: #313131 !default;
+$gray-900: #111 !default;
 $black:  #000 !default;
 
 $grays: () !default;
@@ -71,6 +71,7 @@ $theme-colors: map-merge((
   info: $pink,
   warning: $yellow,
   danger: $red,
+  purchase: $green,
   lightest: $gray-100,
   light: $gray-200,
   dark: $gray-800,
@@ -196,9 +197,9 @@ $line-height-sm:         1 !default;
 $border-width: 1px !default;
 $border-color: theme-color("light") !default;
 
-$border-radius:          0.25rem !default;
-$border-radius-lg:       0.3rem !default;
-$border-radius-sm:       0.2rem !default;
+$border-radius:          0.1875rem !default;
+$border-radius-lg:       $border-radius !default;
+$border-radius-sm:       $border-radius !default;
 
 $component-active-color: theme-color("inverse") !default;
 $component-active-bg:    theme-color("primary") !default;
@@ -214,13 +215,13 @@ $transition-collapse:    height 0.35s ease !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 //$font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-//$font-family-base:       $font-family-sans-serif !default;
+$font-family-base:       $font-family-sans-serif !default;
 
-$font-size-base: 0.875rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:   1rem !default;
-$font-size-sm:   0.75rem !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:   1.25rem !default;
+$font-size-sm:   0.875rem !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: normal !default;
@@ -229,12 +230,12 @@ $font-weight-bold: bold !default;
 $font-weight-base: $font-weight-normal !default;
 $line-height-base: 1.5 !default;
 
-$h1-font-size: 2rem !default;
-$h2-font-size: 1.75rem !default;
-$h3-font-size: 1.5rem !default;
-$h4-font-size: 1.25rem !default;
-$h5-font-size: 1rem !default;
-$h6-font-size: 0.875rem !default;
+$h1-font-size: 1.75rem !default;
+$h2-font-size: 1.5rem !default;
+$h3-font-size: 1.25rem !default;
+$h4-font-size: 1rem !default;
+$h5-font-size: 0.875rem !default;
+$h6-font-size: 0.75rem !default;
 
 //$headings-margin-bottom: ($spacer / 2) !default;
 //$headings-font-family:   inherit !default;
@@ -307,8 +308,8 @@ $h6-font-size: 0.875rem !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$input-btn-padding-y:       0.5rem !default;
-$input-btn-padding-x:       0.75rem !default;
+$input-btn-padding-y:       0.625rem !default;
+$input-btn-padding-x:       0.625rem !default;
 $input-btn-line-height:     1.25 !default;
 
 $input-btn-padding-y-sm:    0.25rem !default;

sass/open-edx/_variables.scss

@@ -70,6 +70,7 @@ $theme-colors: map-merge((
   info: $cyan,
   warning: $yellow,
   danger: $red,
+  purchase: $green,
   lightest: $gray-100,
   light: $gray-200,
   dark: $gray-800,
@@ -212,13 +213,13 @@ $transition-collapse:    height 0.35s ease !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 //$font-family-monospace:  "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 //$font-family-base:       $font-family-sans-serif !default;
 
-$font-size-base: 0.875rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:   1rem !default;
-$font-size-sm:   0.75rem !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:   1.25rem !default;
+$font-size-sm:   0.875rem !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: normal !default;
@@ -305,8 +306,8 @@ $h6-font-size: 1rem !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$input-btn-padding-y:       0.5rem !default;
-$input-btn-padding-x:       0.75rem !default;
+$input-btn-padding-y:       0.625rem !default;
+$input-btn-padding-x:       0.625rem !default;
 $input-btn-line-height:     1.25 !default;
 
 $input-btn-padding-y-sm:    0.25rem !default;