v7.1.0 use new theme builder

cloukit · Nov 7, 2018 · fd05aa3 · fd05aa3
1 parent 418f9ee
commit fd05aa3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   },
   "private": true,
   "dependencies": {
-    "@cloukit/theme": "7.0.1",
+    "@cloukit/theme": "7.1.1",
     "@cloukit/dropout": "7.0.0",
     "@cloukit/story": "7.0.0",
     "@types/prismjs": "1.9.0",
@@ -55,4 +55,4 @@
     "tslint": "~5.11.0",
     "typescript": "~3.1.1"
   }
-}
+}
diff --git a/projects/cloukit/tooltip/package.json b/projects/cloukit/tooltip/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@cloukit/tooltip",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "peerDependencies": {
     "@angular/common": "^7.0.0-rc.0 || ^7.0.0",
     "@angular/core": "^7.0.0-rc.0 || ^7.0.0",
     "@cloukit/dropout": "^7.0.0",
-    "@cloukit/theme": "^7.0.1"
+    "@cloukit/theme": "^7.1.1"
   }
 }
diff --git a/projects/cloukit/tooltip/src/lib/tooltip.theme.ts b/projects/cloukit/tooltip/src/lib/tooltip.theme.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
  * https://github.com/cloukit/legal
  */
-import { CloukitComponentTheme } from '@cloukit/theme';
+import { CloukitBaseCssDefinitions, CloukitComponentTheme } from '@cloukit/theme';
 
 /**
  * The default theme
@@ -15,70 +15,61 @@ export class CloukitTooltipComponentThemeDefault extends CloukitComponentTheme {
     //
     // WRAPPER
     //
-    this.createStyle('wrapper', 'init', 'base', {
-      style: {
+    this.buildStyle('wrapper', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
         transition: `
           margin-left 300ms linear,
           margin-right 300ms linear,
           margin-top 300ms linear,
           margin-bottom 300ms linear,
           opacity 300ms ease-in-out`,
         opacity: 0,
-      }
-    });
+      });
 
-    this.createStyle('wrapper', 'ready', 'left',
-      this.merge(this.getStyle('wrapper', 'init', 'base'), {
-        style: {
-          marginRight: '5px',
-          transform: 'translate(0, -50%)',
-          opacity: 1,
-        }
-      }));
+    this.buildStyle('wrapper', 'ready', 'left')
+      .inheritFrom('wrapper', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
+        marginRight: '5px',
+        transform: 'translate(0, -50%)',
+        opacity: 1,
+      });
 
-    this.createStyle('wrapper', 'ready', 'right',
-      this.merge(this.getStyle('wrapper', 'init', 'base'), {
-        style: {
-          marginLeft: '5px',
-          transform: 'translate(0, -50%)',
-          opacity: 1,
-        }
-      }));
+    this.buildStyle('wrapper', 'ready', 'right')
+      .inheritFrom('wrapper', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
+        marginLeft: '5px',
+        transform: 'translate(0, -50%)',
+        opacity: 1,
+      });
 
-    this.createStyle('wrapper', 'ready', 'up',
-      this.merge(this.getStyle('wrapper', 'init', 'base'), {
-        style: {
-          marginBottom: '5px',
-          transform: 'translate(-50%, 0)',
-          opacity: 1,
-        }
-      }));
+    this.buildStyle('wrapper', 'ready', 'up')
+      .inheritFrom('wrapper', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
+        marginBottom: '5px',
+        transform: 'translate(-50%, 0)',
+        opacity: 1,
+      });
 
-    this.createStyle('wrapper', 'ready', 'down',
-      this.merge(this.getStyle('wrapper', 'init', 'base'), {
-        style: {
-          marginTop: '5px',
-          transform: 'translate(-50%, 0)',
-          opacity: 1,
-        }
-      }));
+    this.buildStyle('wrapper', 'ready', 'down')
+      .inheritFrom('wrapper', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
+        marginTop: '5px',
+        transform: 'translate(-50%, 0)',
+        opacity: 1,
+      });
 
     //
     // TOOLTIP
     //
-    this.createStyle('tooltip', 'init', 'base', {
-      style: {
+    this.buildStyle('tooltip', 'init', 'base')
+      .withStyles(<CloukitBaseCssDefinitions>{
         backgroundColor: '#333',
         padding: '5px 8px 5px 8px',
         color: '#fff',
-      }
-    });
+      });
 
-    this.createStyle('tooltip', 'ready', 'base',
-      this.merge(this.getStyle('tooltip', 'init', 'base'), {
-        style: {
-        }
-      }));
+    this.buildStyle('tooltip', 'ready', 'base')
+      .inheritFrom('tooltip', 'init', 'base');
   }
 
 }
diff --git a/yarn.lock b/yarn.lock
@@ -283,9 +283,9 @@
   dependencies:
     tslib "^1.9.0"
 
-"@cloukit/theme@7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@cloukit/theme/-/theme-7.0.1.tgz#f1571c661fcf16fa92e350c3c4c619127b8e2660"
+"@cloukit/theme@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@cloukit/theme/-/theme-7.1.1.tgz#4f8ead2c1fef605bd5c1ace28e21b5dd07cda07e"
   dependencies:
     tslib "^1.9.0"