Update light theme colors to match fluent (#55)

Azure · Mar 30, 2022 · d68f25c · d68f25c
1 parent c143e52
commit d68f25c
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 40 deletions.
diff --git 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`

diff --git 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,27 +76,32 @@ 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)) {
                 insideComment = true;
                 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(':');

diff --git a/package-lock.json b/package-lock.json
diff --git 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",

diff --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);
 }
diff --git 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);
 }
diff --git 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