Update light theme colors to match fluent (#55)

2022-03-30 16:15:17 -07:00 · 2022-03-30 16:15:17 -07:00 · d68f25c960
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,12 @@
 # CHANGELOG

+## v8.2.0
+## Changed
+- Updated colors to match fluent colors for light theme
+- Added `--color-global-background-severe-warning` and `--color-global-foreground-severe-warning`
+- Added `color-scheme` and `accent-color` CSS rules to themes to have a better default browser support.
+- Added support for `IGNORE-SECTION` on codegen code to allow for CSS rules on theme files.
+
 ## v8.1.13
 ### Changed
 - Added `--color-foreground-primary`
--- a/codegen/themesParser.ts
+++ b/codegen/themesParser.ts
@ -15,6 +15,7 @@ const CSS_SECTION_MATCH = new RegExp(/\/\*(.*)\*\//, 'gi');

 const CSS_COMMENT_START_MATCH = new RegExp(/\/\*/, 'gi');
 const CSS_COMMENT_END_MATCH = new RegExp(/\*\//, 'gi');
+const IGNORE_SECTION_MARK = 'IGNORE-SECTION';

 interface PropertySection {
    [property: string]: string;
@ -75,19 +76,24 @@ export default class ThemesParser {
        const rl = createInterface({ input: createReadStream(filePath) });

        let insideComment = false;
+        let ignore = false;
        let currentSection = '';
        for await (const line of rl) {
            const sectionMatch = line.match(CSS_SECTION_MATCH);
            if (!insideComment && sectionMatch) {
-                currentSection = sectionMatch[0]
-                    .replace(/\/\*/, '') // Remove start of comment
-                    .replace(/\*\//, '') // Remove end of comment
-                    .trim()
-                    .replace(/([-_ ][a-z])/gi, (g) => g.toUpperCase().replace(/[-_ ]/, ''))
-                    .replace(/^./g, (g) => g.toLowerCase()); // Ensure cammelCase
+                ignore = sectionMatch[0].includes(IGNORE_SECTION_MARK);
+
+                if (!ignore) {
+                    currentSection = sectionMatch[0]
+                        .replace(/\/\*/, '') // Remove start of comment
+                        .replace(/\*\//, '') // Remove end of comment
+                        .trim()
+                        .replace(/([-_ ][a-z])/gi, (g) => g.toUpperCase().replace(/[-_ ]/, ''))
+                        .replace(/^./g, (g) => g.toLowerCase()); // Ensure cammelCase
                
-                colorValues[currentSection] = {};
-            } else if (insideComment && line.match(CSS_COMMENT_END_MATCH)) {
+                    colorValues[currentSection] = {};
+                }
+            } else if (!insideComment && line.match(CSS_COMMENT_END_MATCH)) {
                insideComment = false;
                continue;
            } else if (line.match(CSS_COMMENT_START_MATCH)) {
@ -95,7 +101,7 @@ export default class ThemesParser {
                continue;
            }

-            if (!insideComment && line) {
+            if (!ignore && !insideComment && line) {
                if (line.match(CSS_CUSTOM_PROPERTY_COLOR_MATCH) || line.match(CSS_CUSTOM_PROPERTY_DATA_COLOR_MATCH)) {
                    const withoutSemiColon = line.replace(';', '');
                    let [propertyName, value] = withoutSemiColon.split(':');
--- a/package-lock.json
+++ b/package-lock.json
@ -1,13 +1,13 @@
 {
  "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.1.13",
+  "version": "8.2.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@types/node": {
-      "version": "13.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.1.tgz",
-      "integrity": "sha512-E6M6N0blf/jiZx8Q3nb0vNaswQeEyn0XlupO+xN6DtJ6r6IT4nXrTry7zhIfYvFCl3/8Cu6WIysmUBKiqV0bqQ==",
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
      "dev": true
    },
    "normalize.css": {
@ -16,9 +16,9 @@
      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
    },
    "typescript": {
-      "version": "3.9.9",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
-      "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
+      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
      "dev": true
    }
  }
--- a/package.json
+++ b/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.13",
+  "version": "8.2.0",
  "license": "MIT",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
@ -19,8 +19,8 @@
    "normalize.css": "^8.0.1"
  },
  "devDependencies": {
-    "@types/node": "^13.9.1",
-    "typescript": "^3.9.9"
+    "@types/node": "^17.0.23",
+    "typescript": "^4.6.3"
  },
  "repository": {
    "type": "git",
--- a/src/themes/_color.dark.css
+++ b/src/themes/_color.dark.css
@ -21,7 +21,7 @@
  /* Status */
  --color-status-success: #89ff98;
  --color-status-success-foreground: #323130;
-  --color-status-informational: #879092;
+  --color-status-informational: #797775;
  --color-status-informational-foreground: #ffffff;
  --color-status-warning: #f2c80f;
  --color-status-warning-foreground: #323130;
@ -62,12 +62,14 @@
  /* Alert */
  --color-global-background-success: #dff6dd;
  --color-global-foreground-success: #323130;
-  --color-global-background-informational: #cef1ff;
-  --color-global-foreground-informational: #00418c;
+  --color-global-background-informational: #eff6fc;
+  --color-global-foreground-informational: #323130;
  --color-global-background-warning: #fff4ce;
  --color-global-foreground-warning: #323130;
+  --color-global-background-severe-warning: #fed9cc;
+  --color-global-foreground-severe-warning: #323130;
  --color-global-background-error: #fde7e9;
-  --color-global-foreground-error: #a50606;
+  --color-global-foreground-error: #323130;

  /* Link */
  --color-link-default: #60aaff;
@ -141,4 +143,8 @@
  --data-color-40: #e247db;
  --data-color-41: #d313d3;
  --data-color-42: #921e9b;
+
+  /* IGNORE-SECTION - CSS setup */
+  color-scheme: dark;
+  accent-color: var(--color-accent);
 }
--- a/src/themes/_color.light.css
+++ b/src/themes/_color.light.css
@ -12,20 +12,20 @@
  --color-state-disabled: #f3f2f1;

  /* Accent */
-  --color-accent: #136bfb;
-  --color-accent-hover: #0065d9;
-  --color-accent-selected: #0053b3;
-  --color-accent-selected-hover: #00418c;
+  --color-accent: #0078d4;
+  --color-accent-hover: #106ebe;
+  --color-accent-selected: #005a9e;
+  --color-accent-selected-hover: #004578;
  --color-accent-foreground: #ffffff;

  /* Status */
-  --color-status-success: #36a643;
-  --color-status-success-foreground: #323130;
-  --color-status-informational: #879092;
-  --color-status-informational-foreground: #323130;
-  --color-status-warning: #c28100;
-  --color-status-warning-foreground: #323130;
-  --color-status-danger: #a50606;
+  --color-status-success: #107c10;
+  --color-status-success-foreground: #ffffff;
+  --color-status-informational: #666666;
+  --color-status-informational-foreground: #ffffff;
+  --color-status-warning: #d83b01;
+  --color-status-warning-foreground: #ffffff;
+  --color-status-danger: #a80000;
  --color-status-danger-foreground: #ffffff;

  /* Foreground */
@ -62,17 +62,19 @@
  /* Alert */
  --color-global-background-success: #dff6dd;
  --color-global-foreground-success: #323130;
-  --color-global-background-informational: #cef1ff;
-  --color-global-foreground-informational: #00418c;
+  --color-global-background-informational: #eff6fc;
+  --color-global-foreground-informational: #323130;
  --color-global-background-warning: #fff4ce;
  --color-global-foreground-warning: #323130;
+  --color-global-background-severe-warning: #fed9cc;
+  --color-global-foreground-severe-warning: #323130;
  --color-global-background-error: #fde7e9;
-  --color-global-foreground-error: #a50606;
+  --color-global-foreground-error: #323130;

  /* Link */
-  --color-link-default: #136bfb;
-  --color-link-hover: #0065d9;
-  --color-link-selected: #0065d9;
+  --color-link-default: #106ebe;
+  --color-link-hover: #005a9e;
+  --color-link-selected: #004578;
  
  /* IoTC visualizations */  
  --color-azul: #118dff;
@ -141,4 +143,8 @@
  --data-color-40: #b887ad;
  --data-color-41: #7d4f73;
  --data-color-42: #53354d;
+
+  /* IGNORE-SECTION - CSS setup */
+  color-scheme: light;
+  accent-color: var(--color-accent);
 }
--- a/src/themes/readme.md
+++ b/src/themes/readme.md
@ -78,6 +78,8 @@ The files have the following structure:
  --color-global-foreground-informational
  --color-global-background-warning
  --color-global-foreground-warning
+  --color-global-background-severe-warning
+  --color-global-foreground-severe-warning
  --color-global-background-error
  --color-global-foreground-error