refactor(themes): adjusted scss structure for additional themes

Related #4967
ionic-team · Feb 2, 2016 · c2cf3b0 · c2cf3b0
1 parent 5aa112a
commit c2cf3b0
Show file tree

Hide file tree

Showing 12 changed files with 244 additions and 29 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -366,6 +366,26 @@ gulp.task('sass', function() {
   .pipe(gulp.dest('dist/bundles/'));
 });
 
+gulp.task('sass.themes', function() {
+  var sass = require('gulp-sass');
+  var autoprefixer = require('gulp-autoprefixer');
+
+  function buildTheme(mode) {
+    gulp.src([
+      'scripts/e2e/ionic.' + mode + '.dark.scss'
+    ])
+    .pipe(sass({
+        includePaths: [__dirname + '/node_modules/ionicons/dist/scss/'],
+      }).on('error', sass.logError)
+    )
+    .pipe(autoprefixer(buildConfig.autoprefixer))
+    .pipe(gulp.dest('dist/bundles/'));
+  }
+
+  buildTheme('ios');
+  buildTheme('md');
+});
+
 gulp.task('fonts', function() {
   gulp.src([
     'ionic/fonts/*.+(ttf|woff|woff2)',

diff --git a/ionic/components.core.scss b/ionic/components.core.scss
@@ -1,4 +1,8 @@
 
+// Core Globals
+@import "globals.core";
+
+
 // Core App
 @import
   "components/app/normalize",
@@ -19,9 +23,7 @@
   "components/slides/slides";
 
 
-// Ionicons
-// soon to be replaced with SVGs
-$font-path: "../fonts" !default;
+// Ionicons (to be replaced with SVGs)
 $ionicons: true !default;
 @if ($ionicons) {
   @import "fonts/ionicons";

diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss
@@ -1,6 +1,6 @@
 
-// iOS Theme
-@import "themes/default.ios";
+// iOS Globals
+@import "globals.ios";
 
 
 // iOS Components

diff --git a/ionic/components.md.scss b/ionic/components.md.scss
@@ -1,6 +1,6 @@
 
-// Material Design Theme
-@import "themes/default.md";
+// Material Design Globals
+@import "globals.md";
 
 
 // Material Design Components

diff --git a/ionic/globals.core.scss b/ionic/globals.core.scss
@@ -9,3 +9,7 @@
 
 // Global include-rtl
 $include-rtl: true !default;
+
+
+// Global font path
+$font-path: "../fonts" !default;
diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss
@@ -0,0 +1,68 @@
+@import "./dark";
+
+// iOS Dark Theme
+// ----------------------------------
+
+$colors-ios: map-merge($colors, ()) !default;
+
+$text-ios-color:                       $text-color !default;
+$paragraph-ios-color:                  $paragraph-color !default;
+$link-ios-color:                       map-get($colors-ios, primary) !default;
+$background-ios-color:                 $background-color !default;
+$subdued-text-ios-color:               $subdued-text-color !default;
+
+$font-family-ios-base:                 $font-family-base !default;
+$font-size-ios-base:                   $font-size-base !default;
+
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$toolbar-ios-background:               $toolbar-background !default;
+$toolbar-ios-border-color:             $toolbar-border-color !default;
+$toolbar-ios-text-color:               $toolbar-text-color !default;
+$toolbar-ios-active-color:             $toolbar-active-color !default;
+$toolbar-ios-inactive-color:           $toolbar-inactive-color !default;
+
+
+// iOS List
+// --------------------------------------------------
+
+$list-ios-text-color:                  $list-text-color !default;
+$list-ios-border-color:                $list-border-color !default;
+$list-ios-background-color:            $list-background-color !default;
+$list-ios-activated-background-color:  #d9d9d9 !default;
+
+
+// iOS Item
+// --------------------------------------------------
+
+$item-ios-padding-top:                12px !default;
+$item-ios-padding-right:              16px !default;
+$item-ios-padding-bottom:             13px !default;
+$item-ios-padding-left:               16px !default;
+$item-ios-padding-media-top:          10px !default;
+$item-ios-padding-media-bottom:       10px !default;
+$item-ios-padding-icon-top:           10px !default;
+$item-ios-padding-icon-bottom:        9px !default;
+
+
+// iOS Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin ios-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  @include svg-background-image($svg);
+}
+
+
+// iOS Body
+// --------------------------------------------------
+
+@mixin ios-body() {
+  font-family: $font-family-ios-base;
+  font-size: $font-size-ios-base;
+  background-color: $background-ios-color;
+}
diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss
@@ -0,0 +1,73 @@
+@import "./dark";
+
+// Material Design Dark Theme
+// ----------------------------------
+
+$colors-md: map-merge($colors, ()) !default;
+
+
+$text-md-color:                       $text-color !default;
+$paragraph-md-color:                  $paragraph-color !default;
+$link-md-color:                       map-get($colors-md, primary) !default;
+$background-md-color:                 $background-color !default;
+$subdued-text-md-color:               $subdued-text-color !default;
+
+$font-family-md-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-md-base:                   $font-size-base !default;
+
+
+// Material Design Toolbar
+// --------------------------------------------------
+
+$toolbar-md-background:               $toolbar-background !default;
+$toolbar-md-border-color:             $toolbar-border-color !default;
+$toolbar-md-text-color:               #424242 !default;
+$toolbar-md-active-color:             $toolbar-active-color !default;
+$toolbar-md-inactive-color:           $toolbar-inactive-color !default;
+$toolbar-md-button-color:             #424242 !default;
+
+
+// Material Design List
+// --------------------------------------------------
+
+$list-md-text-color:                  $list-text-color !default;
+$list-md-border-color:                #dedede !default;
+$list-md-background-color:            $list-background-color !default;
+$list-md-activated-background-color:  #f1f1f1 !default;
+
+
+// Material Design Item
+// --------------------------------------------------
+
+$item-md-padding-top:                 13px !default;
+$item-md-padding-right:               16px !default;
+$item-md-padding-bottom:              13px !default;
+$item-md-padding-left:                16px !default;
+$item-md-padding-media-top:           9px !default;
+$item-md-padding-media-bottom:        9px !default;
+$item-md-padding-icon-top:            11px !default;
+$item-md-padding-icon-bottom:         10px !default;
+
+
+// Ripple Color
+// --------------------------------------------------
+
+@function ripple-background-color($button-color) {
+  @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+}
+
+
+// Material Design Body
+// --------------------------------------------------
+
+@mixin md-body() {
+  font-family: $font-family-md-base;
+  font-size: $font-size-md-base;
+  background-color: $background-md-color;
+}
+
+
+// Roboto Font
+@at-root {
+  @import "../fonts/roboto";
+}
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
@@ -0,0 +1,35 @@
+@import '../globals.core';
+
+
+// Dark Theme
+// ----------------------------------
+
+$colors: (
+
+  primary:    #327eff,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+
+) !default;
+
+
+$text-color:                 #fff !default;
+$paragraph-color:            $text-color !default;
+$link-color:                 map-get($colors, primary) !default;
+$background-color:           #000 !default;
+$subdued-text-color:         #666 !default;
+
+$font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
+$font-size-base:             1.4rem !default; // 1.4rem == 14px
+
+$toolbar-background:         #000 !default;
+$toolbar-border-color:       #b2b2b2 !default;
+$toolbar-text-color:         $text-color !default;
+$toolbar-active-color:       $link-color !default;
+$toolbar-inactive-color:     #8c8c8c !default;
+
+$list-text-color:            $text-color !default;
+$list-background-color:      $background-color !default;
+$list-border-color:          #c8c7cc !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
@@ -1,3 +1,5 @@
+@import '../globals.core';
+
 
 // Default Theme
 // ----------------------------------

diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
@@ -6,29 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <!-- using relative paths in order for snapshot e2e tests to also work -->
-  <link ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
-  <link md-href="../../../bundles/ionic.md.css" rel="stylesheet">
-
-  <script src="../../../js/es6-shim.min.js"></script>
-  <script src="../../../js/es6-module-loader.src.js"></script>
-  <script src="../../../js/system.src.js"></script>
-  <script src="../../../js/angular2-polyfills.js"></script>
-  <script src="../../../js/angular2.dev.js"></script>
-  <script src="../../../js/router.dev.js"></script>
-  <script src="../../../js/http.dev.js"></script>
-  <script src="../../../js/web-animations.min.js"></script>
-  <script src="../../../bundles/ionic.system.js"></script>
-  <script src="../../../js/Rx.js"></script>
+  <link id="iosLink" ios-href="../../../bundles/ionic.ios.css" rel="stylesheet">
+  <link id="mdLink" md-href="../../../bundles/ionic.md.css" rel="stylesheet">
 
   <script>
-    if (!console.time) {
-      console.time = console.log;
-    }
-    if (!console.timeEnd) {
-      console.timeEnd = console.log;
-    }
-    console.time('script init');
-
     if (location.href.indexOf('snapshot=true') > -1) {
       document.documentElement.classList.add('snapshot');
     } else {
@@ -42,8 +23,27 @@
     } else {
       document.dir = 'ltr';
     }
+
+    // dynamically change the <link>s href so the e2e tests can use dark themes via querystring
+    if (location.href.indexOf('theme=dark') > -1) {
+      var link = document.getElementById('iosLink');
+      link.setAttribute('ios-href', link.getAttribute('ios-href').replace('.css', '.dark.css'));
+      link = document.getElementById('mdLink');
+      link.setAttribute('md-href', link.getAttribute('md-href').replace('.css', '.dark.css'));
+    }
   </script>
 
+  <script src="../../../js/es6-shim.min.js"></script>
+  <script src="../../../js/es6-module-loader.src.js"></script>
+  <script src="../../../js/system.src.js"></script>
+  <script src="../../../js/angular2-polyfills.js"></script>
+  <script src="../../../js/angular2.dev.js"></script>
+  <script src="../../../js/router.dev.js"></script>
+  <script src="../../../js/http.dev.js"></script>
+  <script src="../../../js/web-animations.min.js"></script>
+  <script src="../../../bundles/ionic.system.js"></script>
+  <script src="../../../js/Rx.js"></script>
+
   <style>
     .snapshot body {
       /* crop an exact size */
@@ -103,7 +103,6 @@
     }
 
     System.import('index.js').then(function(m) {}, console.error.bind(console));
-    console.timeEnd('script init');
   </script>
 
 </body>

diff --git a/scripts/e2e/ionic.ios.dark.scss b/scripts/e2e/ionic.ios.dark.scss
@@ -0,0 +1,6 @@
+
+// For E2E dark theme tests
+
+@import "../../ionic/themes/dark.ios.scss";
+
+@import "../../ionic/ionic.ios.scss";
diff --git a/scripts/e2e/ionic.md.dark.scss b/scripts/e2e/ionic.md.dark.scss
@@ -0,0 +1,6 @@
+
+// For E2E dark theme tests
+
+@import "../../ionic/themes/dark.md.scss";
+
+@import "../../ionic/ionic.md.scss";