@c8y/tutorial 1020.7.4 → 1020.10.0

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1020.7.4",
+  "version": "1020.10.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1020.7.4",
-    "@c8y/ngx-components": "1020.7.4",
-    "@c8y/client": "1020.7.4",
-    "@c8y/bootstrap": "1020.7.4",
+    "@c8y/style": "1020.10.0",
+    "@c8y/ngx-components": "1020.10.0",
+    "@c8y/client": "1020.10.0",
+    "@c8y/bootstrap": "1020.10.0",
     "@angular/cdk": "^17.3.9",
     "ngx-bootstrap": "12.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.4.0"
   },
   "devDependencies": {
-    "@c8y/options": "1020.7.4",
-    "@c8y/devkit": "1020.7.4"
+    "@c8y/options": "1020.10.0",
+    "@c8y/devkit": "1020.10.0"
   },
   "peerDependencies": {
     "@angular/common": ">=16 <18"

package/src/component-styles/cascading-style-sheets-example/cascading-style-sheets-example.component.css

@@ -1,17 +1,25 @@
-:root{
-  --primary-color:#3bbfce;
-  --secundary-color:#2b9eab;
-  --margin:8px;
+/* Overwriting globally defined CSS variables only works with ViewEncapsulation.None enabled. See: Codex > Getting Started > Guides > Components styling */
+:root {
+  /* Override globall CSS variable */
+  --c8y-brand-primary: red;
+  /* Local CSS variables */
+  --css-background-color: #e0aaaa;
+  --css-border-color: #ddd;
+  --css-header-color: #333;
+  --css-text-color: #666;
 }
 
+/* Also you can use branding vars. Check Codex > UI guidelines > Foundations > Branding for more info */
+.css-example {
+  background-color: var(--c8y-brand-primary);
+  padding: 15px;
+  border: 1px solid var(--css-border-color);
+}
 
-.content-navigation {
-  border-color: var(--secundary-color);
-  color: var(--secundary-color);
+.css-example h5 {
+  color: var(--css-header-color);
 }
 
-.border {
-  padding: 8px;
-  margin: var(--margin);
-  border-color: #3bbfce;
+.css-example p {
+  color: var(--css-text-color);
 }

package/src/component-styles/cascading-style-sheets-example/cascading-style-sheets-example.component.ts

@@ -3,7 +3,11 @@ import { HeaderModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-cascading-style-sheets-example',
-  template: `<c8y-title>CSS component styles</c8y-title>`,
+  template: `<c8y-title>CSS component styles</c8y-title>
+    <div class="css-example">
+      <h5>CSS Styles</h5>
+      <p>This is styled with plain CSS using CSS variables</p>
+    </div>`,
   styleUrls: ['./cascading-style-sheets-example.component.css'],
   standalone: true,
   imports: [HeaderModule]

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.less

@@ -1,14 +1,16 @@
-@primary-color:#3bbfce;
-@secundary-color:#2b9eab;
-@margin:8px;
+@background-color: #e6f7ff;
+@border-color: #91d5ff;
 
-.content-navigation {
-  border-color: @secundary-color;
-  color: @secundary-color;
-}
+.less-example {
+  background-color: @background-color;
+  padding: 15px;
+  border: 1px solid @border-color;
+
+  h5 {
+    color: darken(@border-color, 30%);
+  }
 
-.border {
-  padding: 8px;
-  margin: @margin;
-  border-color: #3bbfce;
+  p {
+    color: darken(@background-color, 50%);
+  }
 }

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.ts

@@ -3,7 +3,11 @@ import { HeaderModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-leaner-style-sheets-example',
-  template: `<c8y-title>LESS component styles</c8y-title>`,
+  template: `<c8y-title>LESS component styles</c8y-title>
+    <div class="less-example">
+      <h5>LESS Styles</h5>
+      <p>This is styled with LESS</p>
+    </div>`,
   styleUrls: ['./leaner-style-sheets-example.component.less'],
   standalone: true,
   imports: [HeaderModule]

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.component.scss

@@ -1,13 +1,16 @@
-$primary-color: #3bbfce;
-$margin: 16px;
+$background-color: #f6ffed;
+$border-color: #b7eb8f;
 
-.content-navigation {
-  border-color: $primary-color;
-  color: darken($primary-color, 10%);
-}
+.scss-example {
+  background-color: $background-color;
+  padding: 15px;
+  border: 1px solid $border-color;
+
+  h5 {
+    color: darken($border-color, 30%);
+  }
 
-.border {
-  padding: calc($margin / 2);
-  margin: calc($margin / 2);
-  border-color: $primary-color;
+  p {
+    color: darken($background-color, 50%);
+  }
 }

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.component.ts

@@ -3,7 +3,11 @@ import { HeaderModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'tut-syntactically-awesome-style-sheets-example',
-  template: `<c8y-title>SCSS component styles</c8y-title>`,
+  template: `<c8y-title>SCSS component styles</c8y-title>
+    <div class="scss-example">
+      <h5>SCSS Styles</h5>
+      <p>This is styled with SCSS</p>
+    </div>`,
   styleUrls: ['./syntactically-awesome-style-sheets-example.component.scss'],
   standalone: true,
   imports: [HeaderModule]