Update styles to support page templates and cards (#47)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.1.5",
+  "version": "8.1.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -16,9 +16,9 @@
       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
     "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "version": "3.9.9",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
+      "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
       "dev": true
     }
   }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "8.1.5",
+  "version": "8.1.6",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "^13.9.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.9"
   },
   "repository": {
     "type": "git",

src/_constants.scss

@@ -7,6 +7,7 @@
 $space-base: 0.25rem;
 $space-xs: 0.5rem;
 $space-sm: 1rem;
+$space-default: 1.25rem;
 $space-md: 1.5rem;
 $space-lg: 2rem;
 $space-xl: 4rem;
@@ -39,7 +40,7 @@ $max-size-50: 40rem;
 $max-size-60: 50rem;
 $max-size-70: 60rem;
 $max-size-80: 70rem;
-$max-size-90: 87.5rem;
+$max-size-90: 120rem;
 
 // Z Index
 

src/_typography.css

@@ -4,7 +4,7 @@
 
 :root {
     --font-size-hero: 2.75rem;
-    --font-size-h1: 1.75rem;
+    --font-size-h1: 1.5rem;
     --font-size-h2: 1.25rem;
     --font-size-h3: 1rem;
     --font-size-h4: 0.875rem;
@@ -22,7 +22,7 @@
     --font-weight-semilight: 300;
 
     --line-height-hero: 3.25rem;
-    --line-height-h1: 2.25rem;
+    --line-height-h1: 2rem;
     --line-height-h2: 1.75rem;
     --line-height-h3: 1.5rem;
     --line-height-h4: 1.25rem;

src/themes/_color.dark.css

@@ -2,6 +2,7 @@
   /* Content background */
   --color-content-background-primary: #292d30;
   --color-content-background-secondary: #25282a;
+  --color-content-background-tertiary: #212121;
   --color-content-background-featured: #292929;
 
   /* State */
@@ -43,7 +44,7 @@
   --color-masthead-background: #3c3c41;
   --color-masthead-foreground: #ffffff;
   --color-masthead-button-hover: #666666;
-  --color-search-background: var(--color-light-transparent-tenth);
+  --color-search-background: rgba(255, 255, 255, 0.1);
   --color-search-background-hover: #ffffff;
   --color-search-text-hover: #000000;
   --color-search-text-placeholder: #666666;

src/themes/_color.light.css

@@ -2,6 +2,7 @@
   /* Content background */
   --color-content-background-primary: #ffffff;
   --color-content-background-secondary: #f7f7f7;
+  --color-content-background-tertiary: #faf9f8;
   --color-content-background-featured: #EDEBE9;
 
   /* State */
@@ -43,7 +44,7 @@
   --color-masthead-background: #3c3c41;
   --color-masthead-foreground: #ffffff;
   --color-masthead-button-hover: #666666;
-  --color-search-background: var(--color-light-transparent-tenth);
+  --color-search-background: rgba(255, 255, 255, 0.1);
   --color-search-background-hover: #ffffff;
   --color-search-text-hover: #000000;
   --color-search-text-placeholder: #666666;

src/themes/readme.md

@@ -11,6 +11,7 @@ The files have the following structure:
   /* Content background */
   --color-content-background-primary // Content area, command bar background, tiles background, cards background
   --color-content-background-secondary // background for panel and dashboard, color for placeholder on tiles in edit mode
+  --color-content-background-tertiary // Background color for workspace below cards
   --color-content-background-featured // Background color for the area behind featured items to make them stand out more
 
   /* State */