Fix dark mode colors and add link colors (#38)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## v8.0.4
+### Fixed
+- Foreground disabled, selected hover and foreground inactive in dark to have better contrast
+
+### Changed
+- Added separate colors for links to not use accent color and modified normalize to use them
+
 ## v8.0.3
 ### Changed
 - Removed deprecated colors

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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.0.3",
+  "version": "8.0.4",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/_normalize.scss

@@ -156,15 +156,15 @@
 
   a {
     text-decoration: none;
-    color: var(--color-accent);
+    color: var(--color-link-default);
 
     &:hover,
     &:focus {
-      color: var(--color-accent-hover);
+      color: var(--color-link-hover);
     }
 
     &:active {
-      color: var(--color-accent-selected);
+      color: var(--color-link-selected);
     }
   }
 

src/themes/_color.dark.css

@@ -1,5 +1,4 @@
 :root[theme="dark"] {
-
   /* Content background */
   --color-content-background-primary: #292d30;
   --color-content-background-secondary: #25282a;
@@ -7,7 +6,7 @@
   /* State */
   --color-state-hover: #31373e;
   --color-state-selected: #434343;
-  --color-state-selected-hover: #b3b0ad;
+  --color-state-selected-hover: #4f4f4f;
   --color-state-disabled: #31373e;
 
   /* Accent */
@@ -30,8 +29,8 @@
   /* Foreground */
   --color-foreground-default: #ffffff;
   --color-foreground-complementary: #323130;
-  --color-foreground-inactive: #f2f2f2;
-  --color-foreground-disabled: #a6a6a6;
+  --color-foreground-inactive: #c4c4c4;
+  --color-foreground-disabled: #4f4f4f;
   --color-foreground-secondary: #434343;
   --color-foreground-tertiary: #31373e;
 
@@ -65,6 +64,11 @@
   --color-global-background-error: #fde7e9;
   --color-global-foreground-error: #a50606;
 
+  /* Link */
+  --color-link-default: #60aaff;
+  --color-link-hover: #136bfb;
+  --color-link-selected: #2f7fbd;
+
   /* Data */
   /* 
    * @todo uncomment this when we update the color picker for fluent support

src/themes/_color.light.css

@@ -1,8 +1,7 @@
-:root,
 :root[theme="light"] {
   /* Content background */
   --color-content-background-primary: #ffffff;
-  --color-content-background-secondary: #faf9f8;
+  --color-content-background-secondary: #f7f7f7;
 
   /* State */
   --color-state-hover: #f3f2f1;
@@ -65,6 +64,11 @@
   --color-global-background-error: #fde7e9;
   --color-global-foreground-error: #a50606;
 
+  /* Link */
+  --color-link-default: #136bfb;
+  --color-link-hover: #0065d9;
+  --color-link-selected: #0065d9;
+
   /* Data */
   /* 
    * @todo uncomment this when we update the color picker for fluent support

src/themes/readme.md

@@ -8,24 +8,24 @@ The files have the following structure:
 :root[theme="THEME_NAME"] {
   // ---- General
 
-  // Content background
+  /* 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
 
-  // State
+  /* State */
   --color-state-hover // hover, focus
   --color-state-selected // selected
   --color-state-selected-hover // selected hover
   --color-state-disabled // background for disabled elements
 
-  // Accent
+  /* Accent */
   --color-accent // Main accent color
   --color-accent-hover // Accent shade for hover
   --color-accent-selected  // Accent shade for selected
   --color-accent-selected-hover // Accent shade for selected hover
   --color-accent-foreground // Foreground color to be used on top of the accent color
 
-  // Status
+  /* Status */
   --color-status-success
   --color-status-success-foreground // Foreground to be used on top of the status success color
   --color-status-informational
@@ -35,7 +35,7 @@ The files have the following structure:
   --color-status-danger
   --color-status-danger-foreground // Foreground to be used on top of the status danger color
 
-  // Foreground
+  /* Foreground */
   --color-foreground-default // Default color for foreground (text, icons)
   --color-foreground-complementary // complementary color to foreground-default
   --color-foreground-inactive
@@ -43,7 +43,7 @@ The files have the following structure:
   --color-foreground-secondary // border lines
   --color-foreground-tertiary // less important separations, like borders between rows on grid
 
-  // Shimmer
+  /* Shimmer */
   --color-background-shimmer
   --color-foreground-shimmer
 
@@ -51,7 +51,7 @@ The files have the following structure:
   // This are colors for specific components that shouldn't change
   // based on the main or accent colors
 
-  // Masthead
+  /* Masthead */
   --color-masthead-background
   --color-masthead-foreground
   --color-masthead-button-hover
@@ -60,14 +60,14 @@ The files have the following structure:
   --color-search-text-hover
   --color-search-text-placeholder
 
-  // Main nav
+  /* Main nav */
   --color-main-nav-background
   --color-main-nav-background-hover // Background for items in hover state
   --color-main-nav-background-selected // Background for the currently active item
   --color-main-nav-foreground-primary // Text color
   --color-main-nav-foreground-secondary // Borders and separators color
 
-  // Alert - Global notifications
+  /* Alert - Global notifications */
   --color-global-background-success
   --color-global-foreground-success
   --color-global-background-informational
@@ -76,6 +76,11 @@ The files have the following structure:
   --color-global-foreground-warning
   --color-global-background-error
   --color-global-foreground-error
+
+  /* Link */
+  --color-link-default // Foreground color for links in their default state
+  --color-link-hover // Foreground color for links in hover and focus state
+  --color-link-selected // Foreground color for links in pressed state
 ````
 
 Each section has colors that either have to be defined, or can be calculated from other colors (both in the same section, in a different section or from the default light or dark themes).
@@ -120,4 +125,10 @@ Shimmer colors have to be calculated related to `color-content-background-primar
 
 ## Alert
 
-All of the colors on this section have to be provided as they cannot be calculated.
+All of the colors on this section have to be provided as they cannot be calculated.
+
+## Link
+
+`color-link-default` is the main color of this section and has to be provided. All other are steps from this colors based on the following logic:
+
+@todo