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 3bdc8d1303..9097a575cd 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -345,6 +345,8 @@ export type ToggleFacadeTheme = { labelFontSizeMedium: Typography['fontSizeMedium'] labelFontSizeLarge: Typography['fontSizeLarge'] errorBorderColor: Colors['contrasts']['red4570'] + uncheckedIconBorderColor: Colors['contrasts']['grey3045'] + checkedIconBorderColor: Colors['contrasts']['green5782'] } export type CodeEditorTheme = { @@ -536,6 +538,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 = { @@ -714,6 +718,7 @@ export type MenuItemTheme = { activeBackground: Colors['contrasts']['blue4570'] activeLabelColor: Colors['contrasts']['white1010'] activeIconColor: Colors['contrasts']['white1010'] + labelInfoColor: Colors['contrasts']['grey5782'] } export type MenuGroupTheme = { @@ -964,6 +969,10 @@ export type PillTheme = { borderRadius: string | 0 } +export type PopoverTheme = { + borderColor: Colors['contrasts']['grey3045'] +} + export type PositionTheme = { zIndex: Stacking['topmost'] } @@ -1423,6 +1432,10 @@ export type ToggleDetailsTheme = { filledPadding: Spacing['small'] } +export type ToggleGroupTheme = { + borderColor: Colors['contrasts']['grey3045'] +} + export type TooltipTheme = { fontFamily: Typography['fontFamily'] fontWeight: Typography['fontWeightNormal'] @@ -1749,6 +1762,7 @@ export interface ThemeVariables { Pages: PagesTheme PaginationPageInput: PaginationPageInputTheme 'Pagination.PageInput': PaginationPageInputTheme + Popover: PopoverTheme Position: PositionTheme Pill: PillTheme ProgressBar: ProgressBarTheme @@ -1785,6 +1799,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 ad72f08976..a17a0f0228 100644 --- a/packages/ui-buttons/src/BaseButton/theme.ts +++ b/packages/ui-buttons/src/BaseButton/theme.ts @@ -39,18 +39,18 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => { const themeSpecificStyle: ThemeSpecificStyle = { canvas: { primaryColor: theme['ic-brand-button--primary-text']!, - primaryBorderColor: theme['ic-brand-button--primary-bgd']!, + primaryBorderColor: darken(theme['ic-brand-button--primary-bgd']!), primaryBackground: theme['ic-brand-button--primary-bgd']!, primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']!), primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']!), primaryActiveBoxShadow: `${activeShadow} ${theme[ 'ic-brand-button--primary-bgd' ]!}`, - primaryGhostColor: theme['ic-brand-button--primary-bgd']!, - primaryGhostBorderColor: theme['ic-brand-button--primary-bgd']!, + primaryGhostColor: darken(theme['ic-brand-button--primary-bgd']!), + primaryGhostBorderColor: darken(theme['ic-brand-button--primary-bgd']!), primaryGhostBackground: 'transparent', primaryGhostHoverBackground: alpha( - theme['ic-brand-button--primary-bgd']!, + darken(theme['ic-brand-button--primary-bgd']!), 10 ), primaryGhostActiveBackground: 'transparent', @@ -104,10 +104,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, @@ -123,7 +123,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 fde7fec8c6..86bee88894 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, errorBorderColor: colors?.ui?.textError, borderRadius: borders?.radiusMedium, background: colors?.contrasts?.white1010, diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts index 2d5cdeda64..f9ad6bd0ed 100644 --- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts +++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts @@ -157,13 +157,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 ${ + checked + ? componentTheme.checkedIconBorderColor + : componentTheme.uncheckedIconBorderColor + }` } }, diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts index bbac71731f..cee3ff31f9 100644 --- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts +++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts @@ -56,7 +56,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => { color: colors?.contrasts?.white1010, errorBorderColor: colors?.ui?.textError, background: colors?.contrasts?.grey1111, - borderColor: colors?.contrasts?.grey1214, + borderColor: colors?.contrasts?.grey3045, borderWidth: borders?.widthSmall, borderRadius: '4rem', marginEnd: spacing?.small, @@ -64,7 +64,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, @@ -77,7 +77,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..74304240ef 100644 --- a/packages/ui-drilldown/src/Drilldown/index.tsx +++ b/packages/ui-drilldown/src/Drilldown/index.tsx @@ -1377,6 +1377,7 @@ class Drilldown extends Component { getDisabledOptionProps }) => ( { const componentVariables: DrilldownTheme = { headerTitleFontWeight: typography.fontWeightBold, headerActionColor: colors?.contrasts?.blue4570, - labelInfoPadding: spacing?.small + labelInfoPadding: spacing?.small, + labelInfoColor: colors?.contrasts?.grey5782, + borderColor: colors?.contrasts?.grey3045 } return { diff --git a/packages/ui-menu/src/Menu/MenuItem/styles.ts b/packages/ui-menu/src/Menu/MenuItem/styles.ts index f9c69e37b0..d7a85f735a 100644 --- a/packages/ui-menu/src/Menu/MenuItem/styles.ts +++ b/packages/ui-menu/src/Menu/MenuItem/styles.ts @@ -143,7 +143,8 @@ const generateStyle = ( height: '100%', float: 'right', clear: 'right', - paddingRight: '1.75rem' + paddingRight: '1.75rem', + color: componentTheme.labelInfoColor }, label: { label: 'menuItem__label', diff --git a/packages/ui-menu/src/Menu/MenuItem/theme.ts b/packages/ui-menu/src/Menu/MenuItem/theme.ts index 4635509f1e..9bc6441f5d 100644 --- a/packages/ui-menu/src/Menu/MenuItem/theme.ts +++ b/packages/ui-menu/src/Menu/MenuItem/theme.ts @@ -58,7 +58,9 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => { activeBackground: colors?.contrasts?.blue4570, activeLabelColor: colors?.contrasts?.white1010, - activeIconColor: colors?.contrasts?.white1010 + activeIconColor: colors?.contrasts?.white1010, + + labelInfoColor: colors?.contrasts?.grey5782 } return { diff --git a/packages/ui-number-input/src/NumberInput/theme.ts b/packages/ui-number-input/src/NumberInput/theme.ts index d7d2d6cf68..fc64aaa2f7 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..49a4114e36 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,11 @@ class Popover extends Component { : placement } as Partial & { ref: any } - return {content} + return ( + + {content} + + ) } else { viewProps = { ...viewProps, @@ -579,7 +589,11 @@ 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 73307dc0cd..db6e846cc9 100644 --- a/packages/ui-text-area/src/TextArea/theme.ts +++ b/packages/ui-text-area/src/TextArea/theme.ts @@ -51,10 +51,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 a257aa0e95..e1d77a78b3 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..c5e84c5cc5 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" + borderColor={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..682e1e2462 --- /dev/null +++ b/packages/ui-toggle-details/src/ToggleGroup/styles.ts @@ -0,0 +1,47 @@ +/* + * 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 { ToggleGroupProps, 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, + _props: ToggleGroupProps +): 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/props.ts b/packages/ui-view/src/ContextView/props.ts index 8ea285f446..0ff58c875b 100644 --- a/packages/ui-view/src/ContextView/props.ts +++ b/packages/ui-view/src/ContextView/props.ts @@ -74,7 +74,10 @@ type ContextViewProps = ContextViewOwnProps & type ContextViewStyle = ComponentStyle< 'contextView' | 'contextView__content' | 'contextView__arrow' -> & { arrowSize: string | 0; arrowBorderWidth: string | 0 } +> & { + arrowSize: string | 0 + arrowBorderWidth: string | 0 +} const propTypes: PropValidators = { /** diff --git a/packages/ui-view/src/ContextView/styles.ts b/packages/ui-view/src/ContextView/styles.ts index 68106cf8a9..c9b63b5566 100644 --- a/packages/ui-view/src/ContextView/styles.ts +++ b/packages/ui-view/src/ContextView/styles.ts @@ -308,9 +308,7 @@ const generateStyle = ( ...arrowBaseStyles, display: 'block', borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`, - borderColor: - borderColor || - arrowBackGroundVariants[background!], + borderColor: borderColor || arrowBackGroundVariants[background!], ...arrowPlacementVariant.main, ...getArrowCorrections(placement!, componentTheme), '&::after': {