add an example theme

.hgignore

@@ -1 +1,3 @@
 node_modules
+.tmp
+.DS_Store

plugins/piedpiperBranding/cumulocity.json

@@ -0,0 +1,5 @@
+{
+ "description": "Pied Piper Branding Plugin",
+ "less": ["main.less"],
+ "copy": ["img"]
+}

plugins/piedpiperBranding/main.less

@@ -0,0 +1,5 @@
+@import "../../node_modules/cumulocity-ui-build/__baseBranding__/variables/index.less";
+
+@import "variables/index.less";
+
+@import "../../node_modules/cumulocity-ui-build/__baseBranding__/export.less";

plugins/piedpiperBranding/variables/brand-vars.less

@@ -0,0 +1,18 @@
+// Logo for login and loading
+@brand-logo-img: 'logo-main.svg';
+
+// height of the logo
+@brand-logo-height: 100%;
+
+// when set adds an image below login form.
+//As an example, check Trakerando branding
+@powered-by: '';
+
+
+@appLogo: "@{image-path}logo.svg";
+
+@appLogo-height: 100%;
+
+
+//When set, it replaces app name with image
+@appBranding:"@{image-path}logo.svg";

plugins/piedpiperBranding/variables/buttons-vars.less

@@ -0,0 +1,49 @@
+/* =====================================================
+ BUTTONS
+ ------------------------------------------------------
+ */
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight: normal;
+
+@btn-default-color: #333;
+@btn-default-bg: @body-background-color;
+@btn-default-border: #ccc;
+
+@btn-primary-color: #fff;
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: @brand-primary;//darken(@btn-primary-bg, 5%);
+
+@btn-success-color: #fff;
+@btn-success-bg: @brand-success;
+@btn-success-border: @brand-success;//darken(@btn-success-bg, 5%);
+
+@btn-info-color: #fff;
+@btn-info-bg: @brand-info;
+@btn-info-border: @brand-info;//darken(@btn-info-bg, 5%);
+
+@btn-warning-color: #fff;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: @brand-warning;//darken(@btn-warning-bg, 5%);
+
+@btn-danger-color: #fff;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: @brand-danger;//darken(@btn-danger-bg, 5%);
+
+@btn-link-disabled-color: @gray-light;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base: 8px 0 8px 0;//@border-radius-base;
+@btn-border-radius-large: @btn-border-radius-base;
+@btn-border-radius-small: @btn-border-radius-base;
+
+
+
+
+//== Close
+//
+//##
+
+@close-font-weight: bold;
+@close-color: #000;
+@close-text-shadow: 0 1px 0 #fff;

plugins/piedpiperBranding/variables/colors.less

@@ -0,0 +1,76 @@
+
+// Colors
+
+@brand-primary: #1fa22e;
+
+@brand-complementary: #A4C8CD;
+
+@brand-success: #1fa22e;
+
+@brand-info: #5bc0de;
+
+@brand-warning: #FABC0B;
+
+@brand-danger: #d9534f;
+
+
+
+@danger: #D90000;
+
+@warning: #FABC0B;
+
+@dark-warning: #FF8000;
+
+@success: #1fa22e;
+
+@brand-primary-light: lighten(@brand-primary, 30%);
+
+
+
+// @darker: #333;
+//
+ @darker-header: #0C3B60;
+//
+// @darker-header-overlay: #006F97;
+
+@gray-base: #000;
+
+@gray-text: #444;
+
+@gray-darker: lighten(@darker, 15%);
+
+@gray-dark: #757575;
+
+@gray: #a3a3a3;
+
+@gray-light: #E5E7E7;
+
+@gray-lighter: #f3f3f3;
+
+
+//@body-background-color: #f4f4f4;
+
+
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color: #fff;
+
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg: @brand-primary;
+
+
+
+@input-placeholder-color: #999;
+
+
+@navColor: @darker;
+@navigator-title-color: white;//lighten(@brand-primary, 10%);
+@navigator-text-color: @gray-lighter;
+@navigator-separator-color: fade(white, 5%);
+@headerColor: darken(@brand-primary, 10%);
+@navColorHeader: @darker;
+@spinner-color: lighten(@brand-primary, 30%);
+@navigator-font-family: @headings-font-family;
+@navigator-font-size: 13px;
+@navigator-active-color: white;//@brand-primary-light;
+@navigator-active-bg: @brand-primary;

plugins/piedpiperBranding/variables/index.less

@@ -0,0 +1,7 @@
+@import "brand-vars.less";
+@import "buttons-vars.less";
+@import "colors.less";
+@import "scaffolding.less";
+@import "typography-vars.less";
+@import "progress-bars-vars.less";
+@import "quick-links.less";

plugins/piedpiperBranding/variables/progress-bars-vars.less

@@ -0,0 +1,21 @@
+//== PROGRESS BARS
+//
+//##
+
+//** Background color of the whole progress component
+@progress-bg: #f5f5f5;
+//** Progress bar text color
+@progress-bar-color: #fff;
+//** Variable for setting rounded corners on progress bar.
+@progress-border-radius: 10px;
+
+//** Default progress bar color
+@progress-bar-bg: @brand-primary;
+//** Success progress bar color
+@progress-bar-success-bg: @brand-success;
+//** Warning progress bar color
+@progress-bar-warning-bg: @brand-warning;
+//** Danger progress bar color
+@progress-bar-danger-bg: @brand-danger;
+//** Info progress bar color
+@progress-bar-info-bg: @brand-primary;

plugins/piedpiperBranding/variables/quick-links.less

@@ -0,0 +1,10 @@
+// Add user
+@quickLinkColorA: @brand-primary;
+// Add device link / Add asset link
+@quickLinkColorB: @darker;
+// Device link
+@quickLinkColorC: @darker-header-overlay;
+// Device management
+@quickLinkColorD: @darker-header;
+// Cockpit
+@quickLinkColorE: #CDE7F6;