From 1df19ce3d15425896ba331381a806e20b7a75bd5 Mon Sep 17 00:00:00 2001 From: Patricio Beltran Date: Wed, 8 Apr 2020 17:59:49 -0700 Subject: [PATCH] Fix dark mode colors and add link colors (#38) --- CHANGELOG.md | 7 +++++++ package-lock.json | 2 +- package.json | 2 +- src/_normalize.scss | 6 +++--- src/themes/_color.dark.css | 12 ++++++++---- src/themes/_color.light.css | 8 ++++++-- src/themes/readme.md | 31 +++++++++++++++++++++---------- 7 files changed, 47 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bae6b2a..520216d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 3901906..dbd2b9c 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index e34d9a9..16520f5 100644 --- 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.0.3", + "version": "8.0.4", "license": "MIT", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/_normalize.scss b/src/_normalize.scss index 6de87cd..1073e25 100644 --- a/src/_normalize.scss +++ b/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); } } diff --git a/src/themes/_color.dark.css b/src/themes/_color.dark.css index 6cebd84..68bf6af 100644 --- a/src/themes/_color.dark.css +++ b/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 diff --git a/src/themes/_color.light.css b/src/themes/_color.light.css index 863a657..4ff043e 100644 --- a/src/themes/_color.light.css +++ b/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 diff --git a/src/themes/readme.md b/src/themes/readme.md index 54765f6..db4099c 100644 --- a/src/themes/readme.md +++ b/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. \ No newline at end of file +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 \ No newline at end of file