From cf7f0c86d43994741ad68f781c65265b49bf6ce5 Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Fri, 18 Oct 2024 11:21:26 +0200 Subject: [PATCH] fix(many): border colors are adjusted to meet a11y contrast standards Closes: INSTUI-4319 --- packages/shared-types/src/Colors.ts | 2 + .../src/ComponentThemeVariables.ts | 16 +++++++ packages/ui-avatar/src/Avatar/theme.ts | 2 +- packages/ui-buttons/src/BaseButton/theme.ts | 6 +-- .../src/Checkbox/CheckboxFacade/theme.ts | 2 +- .../src/Checkbox/ToggleFacade/styles.ts | 13 +++--- .../src/Checkbox/ToggleFacade/theme.ts | 8 ++-- packages/ui-drilldown/src/Drilldown/index.tsx | 7 +++ packages/ui-drilldown/src/Drilldown/props.ts | 2 +- packages/ui-drilldown/src/Drilldown/styles.ts | 6 ++- packages/ui-drilldown/src/Drilldown/theme.ts | 4 +- packages/ui-menu/src/Menu/MenuItem/theme.ts | 5 +-- .../ui-number-input/src/NumberInput/theme.ts | 2 +- packages/ui-options/src/Options/Item/theme.ts | 2 +- packages/ui-popover/src/Popover/index.tsx | 29 ++++++++++-- packages/ui-popover/src/Popover/props.ts | 12 +++-- packages/ui-popover/src/Popover/styles.ts | 44 +++++++++++++++++++ packages/ui-popover/src/Popover/theme.ts | 43 ++++++++++++++++++ packages/ui-progress/src/ProgressBar/theme.ts | 2 +- .../ui-progress/src/ProgressCircle/theme.ts | 2 +- .../ui-radio-input/src/RadioInput/theme.ts | 2 +- .../src/SourceCodeEditor/theme.ts | 2 +- .../ui-table/src/Table/ColHeader/theme.ts | 2 +- packages/ui-table/src/Table/Row/theme.ts | 2 +- packages/ui-tabs/src/Tabs/Panel/theme.ts | 2 +- packages/ui-tabs/src/Tabs/Tab/theme.ts | 2 +- packages/ui-text-area/src/TextArea/theme.ts | 8 ++-- packages/ui-text-input/src/TextInput/theme.ts | 2 +- .../sharedThemeTokens/colors/primitives.ts | 1 + .../ui-themes/src/themes/canvas/colors.ts | 1 + .../src/themes/canvasHighContrast/colors.ts | 1 + .../src/ToggleGroup/index.tsx | 15 ++++++- .../src/ToggleGroup/props.ts | 12 +++-- .../src/ToggleGroup/styles.ts | 44 +++++++++++++++++++ .../src/ToggleGroup/theme.ts | 43 ++++++++++++++++++ packages/ui-view/src/ContextView/index.tsx | 5 +++ packages/ui-view/src/ContextView/props.ts | 6 ++- packages/ui-view/src/ContextView/styles.ts | 3 +- packages/ui-view/src/ContextView/theme.ts | 3 +- 39 files changed, 316 insertions(+), 49 deletions(-) create mode 100644 packages/ui-popover/src/Popover/styles.ts create mode 100644 packages/ui-popover/src/Popover/theme.ts create mode 100644 packages/ui-toggle-details/src/ToggleGroup/styles.ts create mode 100644 packages/ui-toggle-details/src/ToggleGroup/theme.ts diff --git a/packages/shared-types/src/Colors.ts b/packages/shared-types/src/Colors.ts index f2efa1ad75..0f58a6b689 100644 --- a/packages/shared-types/src/Colors.ts +++ b/packages/shared-types/src/Colors.ts @@ -30,6 +30,7 @@ type Primitives = { grey12: string grey14: string grey24: string + grey30: string grey45: string grey57: string grey70: string @@ -195,6 +196,7 @@ type Contrasts = { grey1214: Primitives['grey12'] | Primitives['grey14'] grey1424: Primitives['grey14'] | Primitives['grey24'] grey2424: Primitives['grey24'] + grey3045: Primitives['grey30'] | Primitives['grey45'] grey4570: Primitives['grey45'] | Primitives['grey70'] grey5782: Primitives['grey57'] | Primitives['grey82'] grey100100: Primitives['grey100'] diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 2096f19444..3c26031b36 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -343,6 +343,8 @@ export type ToggleFacadeTheme = { labelFontSizeSmall: Typography['fontSizeSmall'] labelFontSizeMedium: Typography['fontSizeMedium'] labelFontSizeLarge: Typography['fontSizeLarge'] + uncheckedIconBorderColor: Colors['contrasts']['grey3045'] + checkedIconBorderColor: Colors['contrasts']['green5782'] } export type CodeEditorTheme = { @@ -534,6 +536,8 @@ export type DrilldownTheme = { headerTitleFontWeight: Typography['fontWeightBold'] headerActionColor: Colors['contrasts']['blue4570'] labelInfoPadding: Spacing['small'] + labelInfoColor: Colors['contrasts']['grey5782'] + borderColor: Colors['contrasts']['grey3045'] } export type FileDropTheme = { @@ -960,6 +964,10 @@ export type PillTheme = { borderRadius: string | 0 } +export type PopoverTheme = { + borderColor: Colors['contrasts']['grey3045'] +} + export type PositionTheme = { zIndex: Stacking['topmost'] } @@ -1417,6 +1425,10 @@ export type ToggleDetailsTheme = { filledPadding: Spacing['small'] } +export type ToggleGroupTheme = { + borderColor: Colors['contrasts']['grey3045'] +} + export type TooltipTheme = { fontFamily: Typography['fontFamily'] fontWeight: Typography['fontWeightNormal'] @@ -1586,6 +1598,7 @@ export type ContextViewTheme = { arrowBorderColor: Colors['contrasts']['grey1214'] arrowBackgroundColorInverse: Colors['contrasts']['grey125125'] arrowBorderColorInverse: string + borderColorForView: string } export type ViewTheme = { @@ -1739,6 +1752,7 @@ export interface ThemeVariables { Pages: PagesTheme PaginationPageInput: PaginationPageInputTheme 'Pagination.PageInput': PaginationPageInputTheme + Popover: PopoverTheme Position: PositionTheme Pill: PillTheme ProgressBar: ProgressBarTheme @@ -1775,6 +1789,8 @@ export interface ThemeVariables { TextArea: TextAreaTheme TextInput: TextInputTheme ToggleDetails: ToggleDetailsTheme + ToggleGroup: ToggleGroupTheme + 'ToggleDetails.ToggleGroup': ToggleGroupTheme Tooltip: TooltipTheme TopNavBarBrand: TopNavBarBrandTheme 'TopNavBar.Brand': TopNavBarBrandTheme diff --git a/packages/ui-avatar/src/Avatar/theme.ts b/packages/ui-avatar/src/Avatar/theme.ts index 746a011edc..c1605f67a0 100644 --- a/packages/ui-avatar/src/Avatar/theme.ts +++ b/packages/ui-avatar/src/Avatar/theme.ts @@ -38,7 +38,7 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => { background: colors?.contrasts?.white1010, borderWidthSmall: borders?.widthSmall, borderWidthMedium: borders?.widthMedium, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, boxShadowColor: alpha('#2d3b45', 12), boxShadowBlur: '1rem', fontFamily: typography?.fontFamily, diff --git a/packages/ui-buttons/src/BaseButton/theme.ts b/packages/ui-buttons/src/BaseButton/theme.ts index 0fc2735b17..9cc50fa34d 100644 --- a/packages/ui-buttons/src/BaseButton/theme.ts +++ b/packages/ui-buttons/src/BaseButton/theme.ts @@ -79,10 +79,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => { primaryHoverBackground: colors?.contrasts?.blue5782, primaryActiveBackground: colors?.contrasts?.blue5782, primaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`, - primaryGhostColor: colors?.contrasts?.blue4570, + primaryGhostColor: colors?.contrasts?.blue5782, primaryGhostBorderColor: colors?.contrasts?.blue4570, primaryGhostBackground: 'transparent', - primaryGhostHoverBackground: alpha(colors?.contrasts?.blue4570, 10), + primaryGhostHoverBackground: colors?.contrasts?.blue1212, primaryGhostActiveBackground: 'transparent', primaryGhostActiveBoxShadow: `${activeShadow} ${alpha( colors?.contrasts?.blue1212, @@ -98,7 +98,7 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => { secondaryGhostColor: colors?.contrasts?.grey125125, secondaryGhostBorderColor: colors?.contrasts?.grey125125, secondaryGhostBackground: 'transparent', - secondaryGhostHoverBackground: alpha(colors?.contrasts?.grey125125, 10), + secondaryGhostHoverBackground: colors?.contrasts?.grey1111, secondaryGhostActiveBackground: 'transparent', secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha( colors?.contrasts?.grey125125, diff --git a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts index 540ed67a6a..5e7f2fdcd6 100644 --- a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts +++ b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts @@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => { const componentVariables: CheckboxFacadeTheme = { color: colors?.contrasts?.white1010, borderWidth: borders?.widthSmall, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderRadius: borders?.radiusMedium, background: colors?.contrasts?.white1010, marginRight: spacing?.xSmall, diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts index 3766579ced..a41c64a82e 100644 --- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts +++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts @@ -158,13 +158,16 @@ const generateStyle = ( '&::before': { content: '""', position: 'absolute', - top: componentTheme.borderWidth, - left: componentTheme.borderWidth, - height: `calc(100% - (${componentTheme.borderWidth} * 2))`, - width: `calc(100% - (${componentTheme.borderWidth} * 2))`, + height: `calc(100% - (${componentTheme.borderWidth} * 6))`, + width: `calc(100% - (${componentTheme.borderWidth} * 6))`, background: componentTheme.toggleBackground, boxShadow: componentTheme.toggleShadow, - borderRadius: '100%' + borderRadius: '100%', + border: componentTheme.borderWidth + ' solid', + borderColor: componentTheme.uncheckedIconBorderColor, + ...(checked && { + borderColor: componentTheme.checkedIconBorderColor + }) } }, diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts index ba8e321e28..d34a92be72 100644 --- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts +++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts @@ -55,7 +55,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => { const componentVariables: ToggleFacadeTheme = { color: colors?.contrasts?.white1010, background: colors?.contrasts?.grey1111, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderWidth: borders?.widthSmall, borderRadius: '4rem', marginEnd: spacing?.small, @@ -63,7 +63,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => { marginVertical: spacing?.xSmall, checkedBackground: colors?.contrasts?.green4570, uncheckedIconColor: colors?.contrasts?.grey125125, - checkedIconColor: colors?.contrasts?.green4570, + checkedIconColor: colors?.contrasts?.green5782, focusOutlineColor: colors?.contrasts?.blue4570, focusBorderWidth: borders?.widthMedium, focusBorderStyle: borders?.style, @@ -76,7 +76,9 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => { labelLineHeight: typography?.lineHeightCondensed, labelFontSizeSmall: typography?.fontSizeSmall, labelFontSizeMedium: typography?.fontSizeMedium, - labelFontSizeLarge: typography?.fontSizeLarge + labelFontSizeLarge: typography?.fontSizeLarge, + uncheckedIconBorderColor: colors?.contrasts?.grey5782, + checkedIconBorderColor: colors?.contrasts?.green5782 } return { diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx index 55f1867675..639fbde112 100644 --- a/packages/ui-drilldown/src/Drilldown/index.tsx +++ b/packages/ui-drilldown/src/Drilldown/index.tsx @@ -1377,6 +1377,10 @@ class Drilldown extends Component { getDisabledOptionProps }) => ( { })} > & { headerActionColor: string } +> & { headerActionColor: string; borderColor: string } type DrilldownStyleProps = { hasHighlightedOption: boolean diff --git a/packages/ui-drilldown/src/Drilldown/styles.ts b/packages/ui-drilldown/src/Drilldown/styles.ts index 516e67b210..25891c1b6c 100644 --- a/packages/ui-drilldown/src/Drilldown/styles.ts +++ b/packages/ui-drilldown/src/Drilldown/styles.ts @@ -80,7 +80,8 @@ const generateStyle = ( flexShrink: 0, height: '100%', alignItems: 'center', - paddingInlineStart: componentTheme.labelInfoPadding + paddingInlineStart: componentTheme.labelInfoPadding, + color: componentTheme.labelInfoColor }, optionContent: { label: 'drilldown__optionContent', @@ -88,7 +89,8 @@ const generateStyle = ( }, // we use it in the index file - headerActionColor: componentTheme.headerActionColor + headerActionColor: componentTheme.headerActionColor, + borderColor: componentTheme.borderColor } } diff --git a/packages/ui-drilldown/src/Drilldown/theme.ts b/packages/ui-drilldown/src/Drilldown/theme.ts index cf8bfd4f44..1d19cb274f 100644 --- a/packages/ui-drilldown/src/Drilldown/theme.ts +++ b/packages/ui-drilldown/src/Drilldown/theme.ts @@ -36,7 +36,9 @@ const generateComponentTheme = (theme: Theme): DrilldownTheme => { const componentVariables: DrilldownTheme = { headerTitleFontWeight: typography.fontWeightBold, headerActionColor: colors?.contrasts?.blue4570, - labelInfoPadding: spacing?.small + labelInfoPadding: spacing?.small, + labelInfoColor: colors?.contrasts?.grey3045, + borderColor: colors?.contrasts?.grey3045 } return { diff --git a/packages/ui-menu/src/Menu/MenuItem/theme.ts b/packages/ui-menu/src/Menu/MenuItem/theme.ts index 4635509f1e..c9120e5fcf 100644 --- a/packages/ui-menu/src/Menu/MenuItem/theme.ts +++ b/packages/ui-menu/src/Menu/MenuItem/theme.ts @@ -36,8 +36,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => { const themeSpecificStyle: ThemeSpecificStyle = { canvas: { labelColor: theme['ic-brand-font-color-dark'], - iconColor: theme['ic-brand-font-color-dark'], - activeBackground: theme['ic-brand-primary'] + iconColor: theme['ic-brand-font-color-dark'] } } @@ -56,7 +55,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => { iconColor: colors?.contrasts?.grey125125, iconPadding: spacing?.small, - activeBackground: colors?.contrasts?.blue4570, + activeBackground: colors?.contrasts?.grey4570, activeLabelColor: colors?.contrasts?.white1010, activeIconColor: colors?.contrasts?.white1010 } diff --git a/packages/ui-number-input/src/NumberInput/theme.ts b/packages/ui-number-input/src/NumberInput/theme.ts index 65d7594206..aa219eab58 100644 --- a/packages/ui-number-input/src/NumberInput/theme.ts +++ b/packages/ui-number-input/src/NumberInput/theme.ts @@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): NumberInputTheme => { borderWidth: borders?.widthSmall, borderStyle: borders?.style, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderRadius: borders?.radiusMedium, color: colors?.contrasts?.grey125125, diff --git a/packages/ui-options/src/Options/Item/theme.ts b/packages/ui-options/src/Options/Item/theme.ts index 5d2d172eb2..14213534da 100644 --- a/packages/ui-options/src/Options/Item/theme.ts +++ b/packages/ui-options/src/Options/Item/theme.ts @@ -64,7 +64,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => { descriptionFontWeight: typography.fontWeightNormal, descriptionLineHeight: typography.lineHeight, descriptionPaddingStart: '0.25em', - descriptionColor: colors?.contrasts?.grey4570 + descriptionColor: colors?.contrasts?.grey5782 } return { diff --git a/packages/ui-popover/src/Popover/index.tsx b/packages/ui-popover/src/Popover/index.tsx index 732894b9da..93ff38ad54 100644 --- a/packages/ui-popover/src/Popover/index.tsx +++ b/packages/ui-popover/src/Popover/index.tsx @@ -55,10 +55,14 @@ import type { ViewProps, ContextViewProps } from '@instructure/ui-view' import type { PositionProps } from '@instructure/ui-position' import type { DialogProps } from '@instructure/ui-dialog' +import { withStyle } from '@instructure/emotion' + +import generateStyle from './styles' +import generateComponentTheme from './theme' + import type { PopoverProps, PopoverState } from './props' import { allowedProps, propTypes } from './props' import type { Renderable } from '@instructure/shared-types' - /** --- category: components @@ -67,6 +71,7 @@ tags: overlay, portal, dialog **/ @withDeterministicId() @textDirectionContextConsumer() +@withStyle(generateStyle, generateComponentTheme) @testable() class Popover extends Component { static readonly componentId = 'Popover' @@ -558,6 +563,7 @@ class Popover extends Component { } const { placement } = this.state + const { styles } = this.props if (this.props.withArrow) { viewProps = { @@ -570,7 +576,17 @@ class Popover extends Component { : placement } as Partial & { ref: any } - return {content} + return ( + + {content} + + ) } else { viewProps = { ...viewProps, @@ -579,7 +595,14 @@ class Popover extends Component { ...(color === 'primary-inverse' && { borderColor: 'transparent' }) } as Partial & { ref: any } - return {content} + return ( + + {content} + + ) } } else { return null diff --git a/packages/ui-popover/src/Popover/props.ts b/packages/ui-popover/src/Popover/props.ts index e2833525f0..f5af97bd47 100644 --- a/packages/ui-popover/src/Popover/props.ts +++ b/packages/ui-popover/src/Popover/props.ts @@ -28,7 +28,7 @@ import { element } from '@instructure/ui-prop-types' import { ThemeablePropTypes } from '@instructure/emotion' import { PositionPropTypes } from '@instructure/ui-position' -import type { Shadow, Stacking } from '@instructure/emotion' +import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion' import type { PlacementPropValues, @@ -41,7 +41,8 @@ import type { PropValidators, LiveRegion, UIElement, - Renderable + Renderable, + PopoverTheme } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -278,7 +279,8 @@ type PopoverOwnProps = { type PopoverProps = PopoverOwnProps & TextDirectionContextConsumerProps & - WithDeterministicIdProps + WithDeterministicIdProps & + WithStyleProps type PopoverState = { placement: PopoverOwnProps['placement'] @@ -291,6 +293,8 @@ type PropKeys = keyof PopoverOwnProps type AllowedPropKeys = Readonly> +type PopoverStyle = { borderColor: string } + const propTypes: PropValidators = { isShowingContent: PropTypes.bool, defaultIsShowingContent: PropTypes.bool, @@ -388,5 +392,5 @@ const allowedProps: AllowedPropKeys = [ 'elementRef' ] -export type { PopoverOwnProps, PopoverProps, PopoverState } +export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle } export { propTypes, allowedProps } diff --git a/packages/ui-popover/src/Popover/styles.ts b/packages/ui-popover/src/Popover/styles.ts new file mode 100644 index 0000000000..7b733cb415 --- /dev/null +++ b/packages/ui-popover/src/Popover/styles.ts @@ -0,0 +1,44 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import type { PopoverTheme } from '@instructure/shared-types' +import type { PopoverStyle } from './props' + +/** + * --- + * private: true + * --- + * Generates the style object from the theme and provided additional information + * @param {Object} componentTheme The theme variable object. + * @param {Object} props the props of the component, the style is applied to + * @param {Object} state the state of the component, the style is applied to + * @return {Object} The final style object, which will be used in the component + */ +const generateStyle = (componentTheme: PopoverTheme): PopoverStyle => { + return { + borderColor: componentTheme.borderColor + } +} + +export default generateStyle diff --git a/packages/ui-popover/src/Popover/theme.ts b/packages/ui-popover/src/Popover/theme.ts new file mode 100644 index 0000000000..3db0d6af4f --- /dev/null +++ b/packages/ui-popover/src/Popover/theme.ts @@ -0,0 +1,43 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import type { Theme } from '@instructure/ui-themes' +import { PopoverTheme } from '@instructure/shared-types' + +/** + * Generates the theme object for the component from the theme and provided additional information + * @param {Object} theme The actual theme object. + * @return {Object} The final theme object with the overrides and component variables + */ +const generateComponentTheme = (theme: Theme): PopoverTheme => { + const { colors } = theme + + const componentVariables: PopoverTheme = { + borderColor: colors?.contrasts?.grey3045 + } + return { + ...componentVariables + } +} +export default generateComponentTheme diff --git a/packages/ui-progress/src/ProgressBar/theme.ts b/packages/ui-progress/src/ProgressBar/theme.ts index cc33f34677..42e82fc9d4 100644 --- a/packages/ui-progress/src/ProgressBar/theme.ts +++ b/packages/ui-progress/src/ProgressBar/theme.ts @@ -93,7 +93,7 @@ const generateComponentTheme = (theme: Theme): ProgressBarTheme => { trackColor: colors?.contrasts?.white1010, trackColorInverse: 'transparent', trackBottomBorderWidth: borders?.widthSmall, - trackBottomBorderColor: colors?.contrasts?.grey1214, + trackBottomBorderColor: colors?.contrasts?.grey3045, trackBottomBorderColorInverse: colors?.contrasts?.white1010 } diff --git a/packages/ui-progress/src/ProgressCircle/theme.ts b/packages/ui-progress/src/ProgressCircle/theme.ts index 8bd27bc3a7..b5a2283d27 100644 --- a/packages/ui-progress/src/ProgressCircle/theme.ts +++ b/packages/ui-progress/src/ProgressCircle/theme.ts @@ -126,7 +126,7 @@ const generateComponentTheme = (theme: Theme): ProgressCircleTheme => { trackColor: colors?.contrasts?.white1010, trackColorInverse: 'transparent', - trackBorderColor: colors?.contrasts?.grey125125, + trackBorderColor: colors?.contrasts?.grey3045, trackBorderColorInverse: colors?.contrasts?.white1010, // variables are split out for inverse to allow diff --git a/packages/ui-radio-input/src/RadioInput/theme.ts b/packages/ui-radio-input/src/RadioInput/theme.ts index 5091a1b3e6..3e856caf34 100644 --- a/packages/ui-radio-input/src/RadioInput/theme.ts +++ b/packages/ui-radio-input/src/RadioInput/theme.ts @@ -60,7 +60,7 @@ const generateComponentTheme = (theme: Theme): RadioInputTheme => { background: colors?.contrasts?.white1010, borderWidth: borders?.widthSmall, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, hoverBorderColor: colors?.contrasts?.grey125125, controlSize: '0.1875rem', diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts index f3205498c7..b528a04f27 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts @@ -40,7 +40,7 @@ const generateComponentTheme = (theme: Theme): SourceCodeEditorTheme => { color: colors?.contrasts?.grey125125, gutterBackground: colors?.contrasts?.grey1111, borderWidth: borders?.widthSmall, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderRadius: borders?.radiusMedium, focusBorderColor: colors?.contrasts?.blue4570, horizontalPadding: spacing?.xSmall, diff --git a/packages/ui-table/src/Table/ColHeader/theme.ts b/packages/ui-table/src/Table/ColHeader/theme.ts index 4703988a1f..1afd2c20aa 100644 --- a/packages/ui-table/src/Table/ColHeader/theme.ts +++ b/packages/ui-table/src/Table/ColHeader/theme.ts @@ -49,7 +49,7 @@ const generateComponentTheme = (theme: Theme): TableColHeaderTheme => { focusOutlineWidth: borders?.widthMedium, focusOutlineStyle: borders?.style, - unSortedIconColor: colors?.contrasts?.grey4570, + unSortedIconColor: colors?.contrasts?.grey3045, sortedIconColor: colors?.contrasts?.blue4570 } diff --git a/packages/ui-table/src/Table/Row/theme.ts b/packages/ui-table/src/Table/Row/theme.ts index b5a468df12..fc9c3b3f79 100644 --- a/packages/ui-table/src/Table/Row/theme.ts +++ b/packages/ui-table/src/Table/Row/theme.ts @@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): TableRowTheme => { color: colors?.contrasts?.grey125125, background: colors?.contrasts?.white1010, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, hoverBorderColor: colors?.contrasts?.blue4570, padding: `${spacing?.xSmall} 0` diff --git a/packages/ui-tabs/src/Tabs/Panel/theme.ts b/packages/ui-tabs/src/Tabs/Panel/theme.ts index f168353ab7..dcdb48ead3 100644 --- a/packages/ui-tabs/src/Tabs/Panel/theme.ts +++ b/packages/ui-tabs/src/Tabs/Panel/theme.ts @@ -46,7 +46,7 @@ const generateComponentTheme = (theme: Theme): TabsPanelTheme => { lineHeight: typography?.lineHeight, color: colors?.contrasts?.grey125125, background: colors?.contrasts?.white1010, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderWidth: borders?.widthSmall, borderStyle: borders?.style, defaultOverflowY: 'auto' diff --git a/packages/ui-tabs/src/Tabs/Tab/theme.ts b/packages/ui-tabs/src/Tabs/Tab/theme.ts index ee6af36b74..8deaba48a4 100644 --- a/packages/ui-tabs/src/Tabs/Tab/theme.ts +++ b/packages/ui-tabs/src/Tabs/Tab/theme.ts @@ -54,7 +54,7 @@ const generateComponentTheme = (theme: Theme): TabsTabTheme => { secondaryColor: colors?.contrasts?.grey125125, secondarySelectedBackground: colors?.contrasts?.white1010, - secondarySelectedBorderColor: colors?.contrasts?.grey1214, + secondarySelectedBorderColor: colors?.contrasts?.grey3045, zIndex: stacking?.above } diff --git a/packages/ui-text-area/src/TextArea/theme.ts b/packages/ui-text-area/src/TextArea/theme.ts index 6989ea6847..a38284300d 100644 --- a/packages/ui-text-area/src/TextArea/theme.ts +++ b/packages/ui-text-area/src/TextArea/theme.ts @@ -49,10 +49,10 @@ const generateComponentTheme = (theme: Theme): TextAreaTheme => { borderWidth: borders?.widthSmall, borderStyle: borders?.style, - borderTopColor: colors?.contrasts?.grey1214, - borderRightColor: colors?.contrasts?.grey1214, - borderBottomColor: colors?.contrasts?.grey1214, - borderLeftColor: colors?.contrasts?.grey1214, + borderTopColor: colors?.contrasts?.grey3045, + borderRightColor: colors?.contrasts?.grey3045, + borderBottomColor: colors?.contrasts?.grey3045, + borderLeftColor: colors?.contrasts?.grey3045, borderRadius: borders?.radiusMedium, padding: spacing?.small, diff --git a/packages/ui-text-input/src/TextInput/theme.ts b/packages/ui-text-input/src/TextInput/theme.ts index a573e95e3a..7787b8a949 100644 --- a/packages/ui-text-input/src/TextInput/theme.ts +++ b/packages/ui-text-input/src/TextInput/theme.ts @@ -46,7 +46,7 @@ const generateComponentTheme = (theme: Theme): TextInputTheme => { borderWidth: borders?.widthSmall, borderStyle: borders?.style, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderRadius: borders?.radiusMedium, color: colors?.contrasts?.grey125125, diff --git a/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts b/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts index 8bb3e09e4b..6476cd9a4b 100644 --- a/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts +++ b/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts @@ -32,6 +32,7 @@ export const primitives: Primitives = { grey12: '#E8EAEC', grey14: '#D7DADE', grey24: '#9EA6AD', + grey30: '#8D959F', grey45: '#6A7883', grey57: '#586874', grey70: '#4A5B68', diff --git a/packages/ui-themes/src/themes/canvas/colors.ts b/packages/ui-themes/src/themes/canvas/colors.ts index 756f9b8fef..713bb71cca 100644 --- a/packages/ui-themes/src/themes/canvas/colors.ts +++ b/packages/ui-themes/src/themes/canvas/colors.ts @@ -39,6 +39,7 @@ const contrasts: Contrasts = { grey1214: primitives.grey12, grey1424: primitives.grey14, grey2424: primitives.grey24, + grey3045: primitives.grey30, grey4570: primitives.grey45, grey5782: primitives.grey57, grey100100: primitives.grey100, diff --git a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts index 9dd761557b..f27b18220a 100644 --- a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts +++ b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts @@ -39,6 +39,7 @@ const contrasts: Contrasts = { grey1214: primitives.grey14, grey1424: primitives.grey24, grey2424: primitives.grey24, + grey3045: primitives.grey45, grey4570: primitives.grey70, grey5782: primitives.grey82, grey100100: primitives.grey100, diff --git a/packages/ui-toggle-details/src/ToggleGroup/index.tsx b/packages/ui-toggle-details/src/ToggleGroup/index.tsx index fca48c6f44..fbacdc0d5e 100644 --- a/packages/ui-toggle-details/src/ToggleGroup/index.tsx +++ b/packages/ui-toggle-details/src/ToggleGroup/index.tsx @@ -45,11 +45,17 @@ import { testable } from '@instructure/ui-testable' import type { ToggleGroupProps } from './props' import { allowedProps, propTypes } from './props' +import { withStyle } from '@instructure/emotion' + +import generateStyle from './styles' +import generateComponentTheme from './theme' + /** --- category: components --- **/ +@withStyle(generateStyle, generateComponentTheme) @testable() class ToggleGroup extends Component { static readonly componentId = 'ToggleGroup' @@ -97,6 +103,10 @@ class ToggleGroup extends Component { this._shouldTransition = true } + componentDidUpdate() { + this.props.makeStyles?.(this.state) + } + renderIcon(expanded: boolean) { const Icon = expanded ? this.props.iconExpanded : this.props.icon return Icon ? callRenderProp(Icon) : null @@ -130,11 +140,13 @@ class ToggleGroup extends Component { } renderDetails(detailsProps: { id: string }) { + const { styles } = this.props return ( {this.props.transition && this._shouldTransition ? ( @@ -149,7 +161,7 @@ class ToggleGroup extends Component { render() { const Element = getElementType(ToggleGroup, this.props) - + const { styles } = this.props return ( {({ expanded, getToggleProps, getDetailsProps }) => { @@ -162,6 +174,7 @@ class ToggleGroup extends Component { display="block" borderRadius="medium" background="primary" + themeOverride={{ borderColorPrimary: styles?.borderColor }} > > +type ToggleGroupStyle = { borderColor: string } + type ToggleGroupProps = ToggleGroupOwnProps & - OtherHTMLAttributes + OtherHTMLAttributes & + WithStyleProps const propTypes: PropValidators = { children: PropTypes.node.isRequired, @@ -126,5 +132,5 @@ const allowedProps: AllowedPropKeys = [ 'border' ] -export type { ToggleGroupProps } +export type { ToggleGroupProps, ToggleGroupStyle } export { propTypes, allowedProps } diff --git a/packages/ui-toggle-details/src/ToggleGroup/styles.ts b/packages/ui-toggle-details/src/ToggleGroup/styles.ts new file mode 100644 index 0000000000..5d507cd927 --- /dev/null +++ b/packages/ui-toggle-details/src/ToggleGroup/styles.ts @@ -0,0 +1,44 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import type { ToggleGroupTheme } from '@instructure/shared-types' +import type { ToggleGroupStyle } from './props' + +/** + * --- + * private: true + * --- + * Generates the style object from the theme and provided additional information + * @param {Object} componentTheme The theme variable object. + * @param {Object} props the props of the component, the style is applied to + * @param {Object} state the state of the component, the style is applied to + * @return {Object} The final style object, which will be used in the component + */ +const generateStyle = (componentTheme: ToggleGroupTheme): ToggleGroupStyle => { + return { + borderColor: componentTheme.borderColor + } +} + +export default generateStyle diff --git a/packages/ui-toggle-details/src/ToggleGroup/theme.ts b/packages/ui-toggle-details/src/ToggleGroup/theme.ts new file mode 100644 index 0000000000..ce7acb2bf3 --- /dev/null +++ b/packages/ui-toggle-details/src/ToggleGroup/theme.ts @@ -0,0 +1,43 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import type { Theme } from '@instructure/ui-themes' +import { ToggleGroupTheme } from '@instructure/shared-types' + +/** + * Generates the theme object for the component from the theme and provided additional information + * @param {Object} theme The actual theme object. + * @return {Object} The final theme object with the overrides and component variables + */ +const generateComponentTheme = (theme: Theme): ToggleGroupTheme => { + const { colors } = theme + + const componentVariables: ToggleGroupTheme = { + borderColor: colors?.contrasts?.grey3045 + } + return { + ...componentVariables + } +} +export default generateComponentTheme diff --git a/packages/ui-view/src/ContextView/index.tsx b/packages/ui-view/src/ContextView/index.tsx index 5cbdfd5c6d..cf48b8c302 100644 --- a/packages/ui-view/src/ContextView/index.tsx +++ b/packages/ui-view/src/ContextView/index.tsx @@ -118,6 +118,11 @@ class ContextView extends Component { display="block" borderRadius="medium" borderWidth="small" + themeOverride={ + styles?.borderColorForView + ? { borderColorPrimary: styles?.borderColorForView } + : {} + } borderColor={background === 'default' ? 'primary' : 'transparent'} background={background === 'default' ? 'primary' : 'primary-inverse'} withVisualDebug={debug} diff --git a/packages/ui-view/src/ContextView/props.ts b/packages/ui-view/src/ContextView/props.ts index de8d63a189..6d8345b9e9 100644 --- a/packages/ui-view/src/ContextView/props.ts +++ b/packages/ui-view/src/ContextView/props.ts @@ -73,7 +73,11 @@ type ContextViewProps = ContextViewOwnProps & type ContextViewStyle = ComponentStyle< 'contextView' | 'contextView__content' | 'contextView__arrow' -> & { arrowSize: string | 0; arrowBorderWidth: string | 0 } +> & { + arrowSize: string | 0 + arrowBorderWidth: string | 0 + borderColorForView: string +} const propTypes: PropValidators = { /** diff --git a/packages/ui-view/src/ContextView/styles.ts b/packages/ui-view/src/ContextView/styles.ts index 832f9a873b..5641971409 100644 --- a/packages/ui-view/src/ContextView/styles.ts +++ b/packages/ui-view/src/ContextView/styles.ts @@ -312,7 +312,8 @@ const generateStyle = ( } }, arrowSize: componentTheme.arrowSize, - arrowBorderWidth: componentTheme.arrowBorderWidth + arrowBorderWidth: componentTheme.arrowBorderWidth, + borderColorForView: componentTheme.borderColorForView } } diff --git a/packages/ui-view/src/ContextView/theme.ts b/packages/ui-view/src/ContextView/theme.ts index 8397d01272..44e7e19266 100644 --- a/packages/ui-view/src/ContextView/theme.ts +++ b/packages/ui-view/src/ContextView/theme.ts @@ -37,7 +37,8 @@ const generateComponentTheme = (theme: Theme): ContextViewTheme => { arrowBackgroundColor: theme?.colors?.contrasts?.white1010, arrowBorderColor: theme?.colors?.contrasts?.grey1214, arrowBackgroundColorInverse: theme?.colors?.contrasts?.grey125125, - arrowBorderColorInverse: 'transparent' + arrowBorderColorInverse: 'transparent', + borderColorForView: '' } return {