From 627ed7baf51f2ca06de646087aae6d6e4253b60d Mon Sep 17 00:00:00 2001 From: Tony Anziano Date: Wed, 9 Oct 2019 17:32:53 -0700 Subject: [PATCH] Applied theming to component. --- CHANGELOG.md | 1 + packages/app/client/src/ui/styles/themes/dark.css | 1 + .../app/client/src/ui/styles/themes/high-contrast.css | 1 + packages/app/client/src/ui/styles/themes/light.css | 1 + packages/app/client/src/ui/styles/themes/redline.css | 8 ++++---- 5 files changed, 8 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2b7fa577..bc702df56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -73,6 +73,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [client] Implemented HTML app menu for Windows in PR [1893](https://github.com/microsoft/BotFramework-Emulator/pull/1893) - [client/main] Migrated from Bing Speech API to Cognitive Services Speech API in PR [1878](https://github.com/microsoft/BotFramework-Emulator/pull/1878) - [client] Fixed issue with certain native browser functions (cut, copy, paste, etc.) firing twice in PR [1920](https://github.com/microsoft/BotFramework-Emulator/pull/1920) + - [client] Applied theming to InsetShadow component in PR [1922](https://github.com/microsoft/BotFramework-Emulator/pull/1922) ## v4.5.2 - 2019 - 07 - 17 diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css index ab1f770b0..e75b32010 100644 --- a/packages/app/client/src/ui/styles/themes/dark.css +++ b/packages/app/client/src/ui/styles/themes/dark.css @@ -3,6 +3,7 @@ html { --global-focus-outline-width: 1px; --global-focus-outline-style: solid; --global-focus-outline-color: #75BEFF; + --box-shadow-color: var(--neutral-13); /* Highlight colors */ --list-item-color: var(--neutral-3); diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css index cef4767d8..c52b88248 100644 --- a/packages/app/client/src/ui/styles/themes/high-contrast.css +++ b/packages/app/client/src/ui/styles/themes/high-contrast.css @@ -3,6 +3,7 @@ html { --global-focus-outline-width: 1px; --global-focus-outline-style: solid; --global-focus-outline-color: #F38518; + --box-shadow-color: #72C3DF; /* Highlight colors */ --list-item-color: var(--neutral-1); diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css index d770e1446..22a865d13 100644 --- a/packages/app/client/src/ui/styles/themes/light.css +++ b/packages/app/client/src/ui/styles/themes/light.css @@ -3,6 +3,7 @@ html { --global-focus-outline-width: 1px; --global-focus-outline-style: solid; --global-focus-outline-color: #1177BB; + --box-shadow-color: var(--neutral-6); /* Highlight colors */ --list-item-color: var(--neutral-9); diff --git a/packages/app/client/src/ui/styles/themes/redline.css b/packages/app/client/src/ui/styles/themes/redline.css index 96703787a..3a50c09f3 100644 --- a/packages/app/client/src/ui/styles/themes/redline.css +++ b/packages/app/client/src/ui/styles/themes/redline.css @@ -1,9 +1,9 @@ html { --blur-radius: 6px; --spread-radius: -3px; - --box-shadow-top: inset 0 3px var(--blur-radius) var(--spread-radius) var(--neutral-6); - --box-shadow-left: inset 3px 0 var(--blur-radius) var(--spread-radius) var(--neutral-6); - --box-shadow-bottom: inset 0 -3px var(--blur-radius) var(--spread-radius) var(--neutral-6); - --box-shadow-right: inset -3px 0px var(--blur-radius) var(--spread-radius) var(--neutral-6); + --box-shadow-top: inset 0 3px var(--blur-radius) var(--spread-radius) var(--box-shadow-color); + --box-shadow-left: inset 3px 0 var(--blur-radius) var(--spread-radius) var(--box-shadow-color); + --box-shadow-bottom: inset 0 -3px var(--blur-radius) var(--spread-radius) var(--box-shadow-color); + --box-shadow-right: inset -3px 0px var(--blur-radius) var(--spread-radius) var(--box-shadow-color); --border-window-clip-path: polygon(0 0, 0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 0px 100%, 100% 100%, 100% 0%); }