fix(Checkbox): refined styles to match redline and add dark and contrast theme

CHANGELOG.md

@@ -38,6 +38,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))
+- Update `Checkbox` files for Teams Theme to match [redlines] @bcalvery ([#1656](https://github.com/stardust-ui/react/pull/1656))
 - Add `color` prop to `Segment` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - Remove `color` prop from `Dialog` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - `Loader` uses `Text` component for `label` slot instead of `Box` @layershifter ([#1701](https://github.com/stardust-ui/react/pull/1701))

docs/src/examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand.tsx

@@ -5,6 +5,9 @@ const CheckboxExampleDisabled = () => (
   <>
     <Checkbox disabled label="Disabled" />
     <Checkbox disabled checked label="Disabled & Checked" />
+    <br />
+    <Checkbox toggle disabled label="Disabled" />
+    <Checkbox toggle disabled checked label="Disabled & Checked" />
   </>
 )
 

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -19,6 +19,11 @@ import { Accessibility } from '../../lib/accessibility/types'
 import { checkboxBehavior } from '../../lib/accessibility'
 import { SupportedIntrinsicInputProps } from '../../lib/htmlPropsUtils'
 
+export interface CheckboxSlotClassNames {
+  label: string
+  indicator: string
+}
+
 export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
   accessibility?: Accessibility
@@ -65,6 +70,8 @@ export interface CheckboxState {
 }
 
 class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, CheckboxState> {
+  static slotClassNames: CheckboxSlotClassNames
+
   static create: Function
 
   static displayName = 'Checkbox'
@@ -141,6 +148,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
     const labelElement = Text.create(label, {
       defaultProps: {
         styles: styles.label,
+        className: Checkbox.slotClassNames.label,
       },
     })
 
@@ -157,6 +165,9 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
         {labelPosition === 'start' && labelElement}
         {Icon.create(icon, {
           defaultProps: {
+            outline: toggle && !this.state.checked,
+            size: toggle ? 'medium' : 'smaller',
+            className: Checkbox.slotClassNames.indicator,
             name: toggle ? 'stardust-circle' : 'stardust-checkmark',
             styles: toggle ? styles.toggle : styles.checkbox,
           },
@@ -167,6 +178,11 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
   }
 }
 
+Checkbox.slotClassNames = {
+  label: `${Checkbox.className}__label`,
+  indicator: `${Checkbox.className}__indicator`,
+}
+
 Checkbox.create = createShorthandFactory({
   Component: Checkbox,
   mappedProp: 'label',

packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts

@@ -11,10 +11,9 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     // @ts-ignore is supported by fallback values plugin
     display: ['inline-grid', '-ms-inline-grid'],
     // IE11: Gap is done via virtual column as in autoprefixer
-    '-ms-grid-columns':
-      p.labelPosition === 'start' ? `1fr ${v.checkboxGap} auto` : `auto ${v.checkboxGap} 1fr`,
+    '-ms-grid-columns': p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`,
     gridTemplateColumns: p.labelPosition === 'start' ? '1fr auto' : 'auto 1fr',
-    gridGap: v.checkboxGap,
+    gridGap: v.gap,
     cursor: 'pointer',
     outline: 0,
 
@@ -30,27 +29,27 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
     '-ms-grid-row-align': 'center',
 
-    borderColor: v.checkboxBorderColor,
-    borderStyle: v.checkboxBorderStyle,
-    borderRadius: v.checkboxBorderRadius,
-    borderWidth: v.checkboxBorderWidth,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.borderRadius,
+    borderWidth: v.borderWidth,
     boxShadow: 'unset',
     color: v.checkboxColor,
-    margin: v.checkboxMargin,
-    padding: v.checkboxPadding,
+    margin: v.margin,
+    padding: v.padding,
 
     ...(p.checked && {
-      background: v.checkedCheckboxBackground,
-      borderColor: v.checkedCheckboxBorderColor,
-      color: v.checkedCheckboxColor,
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkboxCheckedColor,
     }),
 
     ...(p.disabled && {
       borderColor: v.disabledCheckboxColor,
 
       ...(p.checked && {
         color: v.disabledCheckboxColor,
-        background: v.disabledCheckboxBackground,
+        background: v.disabledBackground,
       }),
     }),
   }),
@@ -70,23 +69,23 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     borderRadius: v.toggleBorderRadius,
     borderWidth: v.toggleBorderWidth,
     boxShadow: 'unset',
-    color: v.toggleColor,
+    color: v.toggleIndicatorColor,
     margin: v.toggleMargin,
 
     padding: v.togglePadding,
     transition: 'padding .3s ease',
 
     ...(p.checked && {
-      background: v.checkedToggleBackground,
-      borderColor: v.checkedToggleBorderColor,
-      color: v.checkedToggleColor,
-      padding: v.checkedTogglePadding,
+      background: v.checkboxToggleCheckedBackground,
+      borderColor: v.checkboxToggleCheckedBorderColor,
+      color: v.checkboxToggleCheckedColor,
+      padding: v.toggleCheckedPadding,
     }),
 
     ...(p.disabled && {
       background: v.disabledToggleBackground,
       borderColor: v.disabledToggleBorderColor,
-      color: v.disabledToggleColor,
+      color: v.disabledToggleIndicatorColor,
     }),
   }),
 }

packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts

@@ -1,79 +1,75 @@
 import { pxToRem } from '../../../../lib'
 
 export type CheckboxVariables = {
-  checkboxBackground: string
-  checkboxBorderColor: string
-  checkboxBorderStyle: string
-  checkboxBorderRadius: string
-  checkboxBorderWidth: string
+  background: string
+  borderColor: string
+  borderStyle: string
+  borderRadius: string
+  borderWidth: string
   checkboxColor: string
-  checkboxGap: string
-  checkboxMargin: string
-  checkboxPadding: string
+  gap: string
+  margin: string
+  padding: string
 
   toggleBackground: string
   toggleBorderColor: string
   toggleBorderStyle: string
   toggleBorderRadius: string
   toggleBorderWidth: string
-  toggleColor: string
+  toggleIndicatorColor: string
   toggleMargin: string
   togglePadding: string
 
-  checkedCheckboxBackground: string
-  checkedCheckboxBorderColor: string
-  checkedCheckboxColor: string
-  checkedToggleColor: string
-  checkedToggleBackground: string
-  checkedToggleBorderColor: string
-  checkedTogglePadding: string
+  checkedBackground: string
+  checkedBorderColor: string
+  checkboxCheckedColor: string
+  checkboxToggleCheckedColor: string
+  checkboxToggleCheckedBackground: string
+  checkboxToggleCheckedBorderColor: string
+  toggleCheckedPadding: string
 
   disabledColor: string
-  disabledCheckboxBackground: string
-  disabledCheckboxBorderColor: string
+  disabledBackground: string
+  disabledBorderColor: string
   disabledCheckboxColor: string
-  disabledToggleColor: string
+  disabledToggleIndicatorColor: string
   disabledToggleBackground: string
   disabledToggleBorderColor: string
-
-  padding: string
 }
 
 export default (siteVars: any): CheckboxVariables => ({
-  checkboxBackground: 'transparent',
-  checkboxBorderColor: siteVars.colors.grey[300],
-  checkboxBorderStyle: `solid`,
-  checkboxBorderRadius: pxToRem(4),
-  checkboxBorderWidth: pxToRem(1),
+  background: 'transparent',
+  borderColor: siteVars.colors.grey[300],
+  borderStyle: `solid`,
+  borderRadius: pxToRem(4),
+  borderWidth: pxToRem(1),
   checkboxColor: 'transparent',
-  checkboxGap: pxToRem(12),
-  checkboxMargin: '0',
-  checkboxPadding: '0',
+  gap: pxToRem(12),
+  margin: '0',
+  padding: '0',
 
   toggleBackground: 'transparent',
   toggleBorderColor: siteVars.colors.grey[300],
   toggleBorderStyle: `solid`,
   toggleBorderRadius: pxToRem(999),
   toggleBorderWidth: pxToRem(1),
-  toggleColor: 'inherit',
+  toggleIndicatorColor: 'inherit',
   toggleMargin: '0',
   togglePadding: `0 ${pxToRem(20)} 0 0`,
 
-  checkedCheckboxBackground: 'transparent',
-  checkedCheckboxBorderColor: siteVars.colors.grey[500],
-  checkedCheckboxColor: siteVars.colors.grey[500],
-  checkedToggleBackground: 'transparent',
-  checkedToggleBorderColor: siteVars.colors.grey[500],
-  checkedToggleColor: 'inherit',
-  checkedTogglePadding: `0 0 0 ${pxToRem(20)}`,
+  checkedBackground: 'transparent',
+  checkedBorderColor: siteVars.colors.grey[500],
+  checkboxCheckedColor: siteVars.colors.grey[500],
+  checkboxToggleCheckedBackground: 'transparent',
+  checkboxToggleCheckedBorderColor: siteVars.colors.grey[500],
+  checkboxToggleCheckedColor: 'inherit',
+  toggleCheckedPadding: `0 0 0 ${pxToRem(20)}`,
 
   disabledColor: siteVars.colors.grey[300],
-  disabledCheckboxBackground: siteVars.colors.grey[200],
-  disabledCheckboxBorderColor: siteVars.colors.grey[100],
+  disabledBackground: siteVars.colors.grey[200],
+  disabledBorderColor: siteVars.colors.grey[100],
   disabledCheckboxColor: siteVars.colors.grey[300],
   disabledToggleBackground: 'transparent',
   disabledToggleBorderColor: siteVars.colors.grey[200],
-  disabledToggleColor: siteVars.colors.grey[300],
-
-  padding: `0 ${pxToRem(4)}`,
+  disabledToggleIndicatorColor: siteVars.colors.grey[300],
 })

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -3,6 +3,7 @@ export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
+export { default as Checkbox } from './components/Checkbox/checkboxVariables'
 export { default as Dialog } from './components/Dialog/dialogVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'

packages/react/src/themes/teams-high-contrast/components/Checkbox/checkboxVariables.ts

@@ -0,0 +1,8 @@
+import { CheckboxVariables } from '../../../teams/components/Checkbox/checkboxVariables'
+
+export default (siteVars: any): Partial<CheckboxVariables> => {
+  return {
+    borderColorHover: siteVars.accessibleYellow,
+    disabledToggleIndicatorColor: siteVars.accessibleGreen,
+  }
+}

packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts

@@ -1,14 +1,112 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
+import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
 import { CheckboxVariables } from './checkboxVariables'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
 const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, CheckboxVariables> = {
   root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({
+    color: v.textColor,
+    padding: v.rootPadding,
+    verticalAlign: 'middle',
+
     ...getBorderFocusStyles({
       siteVariables: t.siteVariables,
       isFromKeyboard: p.isFromKeyboard,
+      borderRadius: '3px',
+    }),
+
+    ':hover': {
+      color: v.textColorHover,
+
+      [`& .${Checkbox.slotClassNames.indicator}`]: {
+        ...(p.checked && {
+          background: v.checkedBackgroundHover,
+        }),
+
+        ...(!p.checked && {
+          borderColor: v.borderColorHover,
+
+          ...(p.toggle && {
+            color: v.borderColorHover,
+          }),
+        }),
+      },
+    },
+
+    ...(p.checked && {
+      color: v.checkedTextColor,
+    }),
+
+    ...(p.disabled && {
+      pointerEvents: 'none',
+      color: v.disabledColor,
+    }),
+  }),
+
+  checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    background: v.background,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.borderRadius,
+    borderWidth: v.borderWidth,
+    color: v.indicatorColor,
+    margin: v.margin,
+    padding: v.padding,
+
+    ...(p.checked && {
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkedIndicatorColor,
+    }),
+
+    ...(p.disabled && {
+      background: v.disabledBackground,
+      borderColor: v.disabledBorderColor,
+    }),
+
+    ...(p.disabled &&
+      p.checked && {
+        color: v.disabledCheckedIndicatorColor,
+        background: v.disabledBackgroundChecked,
+        borderColor: 'transparent',
+      }),
+  }),
+
+  toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    background: v.background,
+    borderColor: v.borderColor,
+    borderStyle: v.borderStyle,
+    borderRadius: v.toggleBorderRadius,
+    borderWidth: v.borderWidth,
+    color: v.borderColor,
+    margin: v.toggleMargin,
+    padding: v.togglePadding,
+    transition: 'padding .3s ease',
+
+    [`& svg`]: {
+      width: v.toggleIndicatorSize,
+      height: v.toggleIndicatorSize,
+    },
+
+    ...(p.checked && {
+      background: v.checkedBackground,
+      borderColor: v.checkedBorderColor,
+      color: v.checkedIndicatorColor,
+      padding: v.toggleCheckedPadding,
     }),
+
+    ...(p.disabled && {
+      color: v.disabledToggleIndicatorColor,
+      background: v.disabledBackground,
+      borderColor: v.disabledBorderColor,
+    }),
+
+    ...(p.disabled &&
+      p.checked && {
+        color: v.disabledCheckedIndicatorColor,
+        background: v.disabledBackgroundChecked,
+        borderColor: 'transparent',
+      }),
   }),
 }