azure-themes: update error styles for azure-themes (light) (#17399)

* add example for TextField with error message * update error styles for azure-themes (light) * Change files
microsoft · Mar 23, 2021 · 6d000dd · 6d000dd
1 parent 79a96df
commit 6d000dd
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/change/@fluentui-azure-themes-cac00245-e225-4e3f-b195-582e82be2cb6.json b/change/@fluentui-azure-themes-cac00245-e225-4e3f-b195-582e82be2cb6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update error styles for azure-themes (light)",
+  "packageName": "@fluentui/azure-themes",
+  "email": "mhdahman@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-examples-5ca6c68c-159b-454a-99f6-4828213fafd9.json b/change/@fluentui-react-examples-5ca6c68c-159b-454a-99f6-4828213fafd9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add example for TextField with error message",
+  "packageName": "@fluentui/react-examples",
+  "email": "mhdahman@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts
@@ -41,6 +41,7 @@ export namespace BaseColors {
   export const RED_F63747 = '#f63747';
   export const RED_F1707B = '#F1707B';
   export const RED_E00B1C = '#e00b1c';
+  export const RED_A4262C = '#a4262c';
   export const RED_442726 = '#442726';
   export const RED_61050C = '#61050c';
   export const RED_800000 = '#800002';
@@ -525,7 +526,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
     hyperlinkHovered: BaseColors.BLUE_004578,
     hyperlinkBackgroundHovered: BaseColors.TRANSPARENT,
     success: BaseColors.GREEN_428000,
-    error: BaseColors.RED_E00B1C,
+    error: BaseColors.RED_A4262C,
     placeholder: BaseColors.GRAY_8A8886,
   },
   statusBar: {
@@ -628,7 +629,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
     disabled: BaseColors.GRAY_F3F2F1,
     hover: BaseColors.GRAY_605E5C,
     accent: BaseColors.BLUE_0078D4,
-    error: BaseColors.RED_E00B1C,
+    error: BaseColors.RED_A4262C,
     dirty: BaseColors.PURPLE_8A2DA5,
   },
   choiceGroup: {

diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts
@@ -6,7 +6,7 @@ import {
 } from '@fluentui/react/lib/Styling';
 
 export const borderWidth = '1px';
-export const borderWidthError = '2px';
+export const borderWidthError = '1px';
 export const borderSolid = 'solid';
 export const borderNone = 'none';
 export const dropDownItemHeight = '32px';

diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
@@ -121,6 +121,7 @@ const Example = () => (
       <TextField disabled placeholder="disabled placeholder" />
       <TextField disabled value="disabled text" />
       <TextField placeholder="Hello" />
+      <TextField errorMessage="Error message!" />
     </Stack>
 
     <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>