Azure Themes - Checkbox dark theme (#17657)

* Checkbox Dark Theme Updates

* Change files

* Take out fluent/utilities

Author: aidanmc95

change/@fluentui-azure-themes-4329e2e3-803b-4731-8dd7-6c0ad61d3c72.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Checkbox Dark Theme Updates",
+  "packageName": "@fluentui/azure-themes",
+  "email": "aidanmc95@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/src/azure/AzureColors.ts

@@ -239,16 +239,17 @@ export const DarkSemanticColors: IAzureSemanticColors = {
     rest: {
       border: BaseColors.GRAY_F3F2F1,
       hover: BaseColors.GRAY_A19F9D,
+      hoverText: BaseColors.GRAY_FAF9F8,
       background: BaseColors.BLUE_2899F5,
-      focus: BaseColors.BLUE_4894FE,
+      focus: BaseColors.GRAY_A19F9D,
       check: BaseColors.BLACK,
     },
     checked: {
       border: BaseColors.BLUE_2899F5,
       background: BaseColors.BLUE_2899F5,
       default: BaseColors.BLUE_6CB8F6,
-      hoverBackground: BaseColors.BLUE_6CB8F6,
-      hoverBorder: BaseColors.BLUE_6CB8F6,
+      hoverBackground: BaseColors.BLUE_82C7FF,
+      hoverBorder: BaseColors.BLUE_82C7FF,
     },
     disabled: {
       border: BaseColors.GRAY_484644,
@@ -447,7 +448,8 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
       border: BaseColors.GRAY_F3F2F1,
       background: BaseColors.BLUE_0078D4,
       hover: BaseColors.GRAY_A19F9D,
-      focus: BaseColors.BLUE_4894FE,
+      hoverText: BaseColors.WHITE,
+      focus: BaseColors.WHITE,
       check: BaseColors.WHITE,
     },
     checked: {
@@ -654,7 +656,8 @@ export const LightSemanticColors: IAzureSemanticColors = {
       border: BaseColors.GRAY_323130,
       background: BaseColors.BLUE_0078D4,
       hover: BaseColors.GRAY_605E5C,
-      focus: BaseColors.BLUE_0078D4,
+      hoverText: BaseColors.GRAY_201F1E,
+      focus: BaseColors.GRAY_605E5C,
       check: BaseColors.WHITE,
     },
     checked: {
@@ -861,7 +864,8 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
       border: BaseColors.GRAY_323130,
       background: BaseColors.BLUE_0078D4,
       hover: BaseColors.GRAY_323130,
-      focus: BaseColors.GRAY_323130,
+      hoverText: BaseColors.BLACK,
+      focus: BaseColors.BLACK,
       check: BaseColors.WHITE,
     },
     checked: {

packages/azure-themes/src/azure/AzureThemeDark.ts

@@ -32,6 +32,7 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   checkBoxCheck: DarkSemanticColors.checkBox.rest.check,
   checkBoxCheckedFocus: DarkSemanticColors.checkBox.rest.focus,
   checkBoxCheckHover: DarkSemanticColors.checkBox.rest.hover,
+  checkBoxCheckHoverTest: DarkSemanticColors.checkBox.rest.hoverText,
   checkBoxCheckedDisabledBackground: DarkSemanticColors.checkBox.disabled.background,
   checkBoxDisabled: DarkSemanticColors.checkBox.disabled.border,
   checkBoxIndeterminateBackground: DarkSemanticColors.checkBox.rest.check,

packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts

@@ -31,6 +31,7 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
   checkBoxCheck: HighContrastDarkSemanticColors.checkBox.rest.check,
   checkBoxCheckedFocus: HighContrastDarkSemanticColors.checkBox.rest.focus,
   checkBoxCheckHover: HighContrastDarkSemanticColors.checkBox.rest.hover,
+  checkBoxCheckHoverTest: HighContrastDarkSemanticColors.checkBox.rest.hoverText,
   checkBoxCheckedDisabledBackground: HighContrastDarkSemanticColors.checkBox.disabled.background,
   checkBoxDisabled: HighContrastDarkSemanticColors.checkBox.disabled.border,
   checkBoxIndeterminateBackground: HighContrastDarkSemanticColors.checkBox.checked.background,

packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts

@@ -31,6 +31,7 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
   checkBoxCheck: HighContrastLightSemanticColors.checkBox.rest.check,
   checkBoxCheckedFocus: HighContrastLightSemanticColors.checkBox.rest.focus,
   checkBoxCheckHover: HighContrastLightSemanticColors.checkBox.rest.hover,
+  checkBoxCheckHoverTest: HighContrastLightSemanticColors.checkBox.rest.hoverText,
   checkBoxCheckedDisabledBackground: HighContrastLightSemanticColors.checkBox.disabled.background,
   checkBoxDisabled: HighContrastLightSemanticColors.checkBox.disabled.border,
   checkBoxIndeterminateBackground: HighContrastLightSemanticColors.checkBox.rest.check,

packages/azure-themes/src/azure/AzureThemeLight.ts

@@ -31,6 +31,7 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   checkBoxCheck: LightSemanticColors.checkBox.rest.check,
   checkBoxCheckedFocus: LightSemanticColors.checkBox.rest.focus,
   checkBoxCheckHover: LightSemanticColors.checkBox.rest.hover,
+  checkBoxCheckHoverTest: LightSemanticColors.checkBox.rest.hoverText,
   checkBoxCheckedDisabledBackground: LightSemanticColors.checkBox.disabled.background,
   checkBoxDisabled: LightSemanticColors.checkBox.disabled.border,
   checkBoxIndeterminateBackground: LightSemanticColors.checkBox.rest.check,

packages/azure-themes/src/azure/Constants.ts

@@ -5,6 +5,7 @@ import {
   getScreenSelector,
 } from '@fluentui/react/lib/Styling';
 
+export const inputHeight = '18px';
 export const borderWidth = '1px';
 export const borderWidthError = '1px';
 export const borderSolid = 'solid';

packages/azure-themes/src/azure/IAzureSemanticColors.ts

@@ -95,6 +95,7 @@ export interface IAzureSemanticColors {
       border: string;
       background: string;
       hover: string;
+      hoverText: string;
       focus: string;
       check: string;
     };

packages/azure-themes/src/azure/IExtendedSemanticColors.ts

@@ -27,6 +27,7 @@ export interface IExtendedSemanticColors extends ISemanticColors {
   checkBoxCheck: string;
   checkBoxCheckedFocus: string;
   checkBoxCheckHover: string;
+  checkBoxCheckHoverTest: string;
   checkBoxCheckedDisabledBackground: string;
   checkBoxDisabled: string;
   checkBoxIndeterminateBackground: string;

packages/azure-themes/src/azure/styles/Checkbox.styles.ts

@@ -1,6 +1,7 @@
 import { ICheckboxStyleProps, ICheckboxStyles } from '@fluentui/react/lib/Checkbox';
 import { IExtendedSemanticColors } from '../IExtendedSemanticColors';
 import { BaseColors } from '../AzureColors';
+import * as StyleConstants from '../Constants';
 
 export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxStyles> => {
   const { disabled, checked, theme, indeterminate } = props;
@@ -12,6 +13,7 @@ export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxSty
       {
         fontSize: theme.fonts.medium.fontSize,
         color: semanticColors.bodyText,
+        lineHeight: StyleConstants.inputHeight,
       },
       disabled && {
         color: semanticColors.disabledBodyText,
@@ -26,6 +28,8 @@ export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxSty
             backgroundColor: BaseColors.BLUE_0078D4,
           },
         },
+        width: StyleConstants.inputHeight,
+        height: StyleConstants.inputHeight,
       },
       checked && {
         backgroundColor: BaseColors.WHITE,
@@ -63,6 +67,9 @@ export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxSty
               color: extendedSemanticColors.checkBoxCheckHover,
               opacity: '1',
             },
+            ':hover .ms-Checkbox-text': {
+              color: extendedSemanticColors.checkBoxCheckHoverTest,
+            },
           },
         },
         checked && {
@@ -75,6 +82,9 @@ export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxSty
               borderColor: extendedSemanticColors.checkboxBorderCheckedHovered,
               backgroundColor: extendedSemanticColors.checkboxBackgroundHovered,
             },
+            ':hover .ms-Checkbox-text': {
+              color: extendedSemanticColors.checkBoxCheckHoverTest,
+            },
 
             ':focus .ms-Checkbox-label .ms-Checkbox-checkbox': {
               borderColor: extendedSemanticColors.focusBorder,
@@ -96,5 +106,10 @@ export const CheckboxStyles = (props: ICheckboxStyleProps): Partial<ICheckboxSty
           },
       ],
     ],
+    input: {
+      [`.ms-Fabric--isFocusVisible &:focus + label::before`]: {
+        outline: `1px solid ${extendedSemanticColors.checkBoxCheckedFocus}`,
+      },
+    },
   };
 };