From a784269bc173fb75c6404fe14e8f9eed5f42b9bf Mon Sep 17 00:00:00 2001 From: Matyas Forian-Szabo Date: Tue, 24 Mar 2026 13:42:38 +0100 Subject: [PATCH 1/2] refactor(many): allow overriding semantic theme layer in new components --- packages/emotion/src/index.ts | 2 +- packages/emotion/src/useStyle.ts | 9 +++---- packages/emotion/src/withStyle.tsx | 19 +++++++++----- packages/ui-alerts/src/Alert/v2/styles.ts | 2 +- packages/ui-avatar/src/Avatar/v2/index.tsx | 1 - packages/ui-avatar/src/Avatar/v2/styles.ts | 2 +- packages/ui-badge/src/Badge/v2/styles.ts | 2 +- .../ui-billboard/src/Billboard/v2/styles.ts | 2 +- .../ui-breadcrumb/src/Breadcrumb/v2/props.ts | 2 +- .../ui-breadcrumb/src/Breadcrumb/v2/styles.ts | 2 +- .../ui-buttons/src/BaseButton/v2/styles.ts | 4 +-- .../ui-buttons/src/CloseButton/v2/styles.ts | 4 +-- .../ui-calendar/src/Calendar/v2/Day/styles.ts | 2 +- .../ui-calendar/src/Calendar/v2/styles.ts | 2 +- .../src/Checkbox/v2/CheckboxFacade/styles.ts | 2 +- .../src/Checkbox/v2/ToggleFacade/styles.ts | 2 +- .../ui-checkbox/src/Checkbox/v2/styles.ts | 2 +- .../src/ColorContrast/v2/styles.ts | 2 +- .../src/ColorIndicator/v2/styles.ts | 2 +- .../src/ColorMixer/v2/ColorPalette/styles.ts | 2 +- .../src/ColorMixer/v2/RGBAInput/styles.ts | 2 +- .../src/ColorMixer/v2/Slider/styles.ts | 2 +- .../src/ColorPicker/v2/styles.ts | 2 +- .../src/ColorPreset/v2/styles.ts | 2 +- .../DrawerLayout/v2/DrawerContent/styles.ts | 2 +- .../src/DrawerLayout/v2/DrawerTray/styles.ts | 2 +- .../ui-file-drop/src/FileDrop/v2/styles.ts | 2 +- packages/ui-flex/src/Flex/v2/styles.ts | 2 +- .../src/FormFieldLayout/v2/styles.ts | 2 +- .../src/FormFieldMessage/v2/styles.ts | 2 +- .../src/FormFieldMessages/v2/styles.ts | 2 +- packages/ui-grid/src/Grid/v2/styles.ts | 2 +- packages/ui-grid/src/GridCol/v2/styles.ts | 2 +- packages/ui-grid/src/GridRow/v2/styles.ts | 2 +- packages/ui-heading/src/Heading/v2/styles.ts | 2 +- packages/ui-icons/src/styles.ts | 8 +++--- .../src/AiInformation/v2/styles.ts | 2 +- packages/ui-link/src/Link/v2/styles.ts | 2 +- .../InlineList/v2/InlineListItem/styles.ts | 2 +- .../ui-list/src/List/v2/ListItem/styles.ts | 2 +- packages/ui-list/src/List/v2/styles.ts | 2 +- .../ui-menu/src/Menu/v2/MenuItem/styles.ts | 2 +- .../src/Menu/v2/MenuItemGroup/styles.ts | 2 +- .../src/Menu/v2/MenuItemSeparator/styles.ts | 2 +- packages/ui-menu/src/Menu/v2/styles.ts | 2 +- packages/ui-metric/src/Metric/v2/styles.ts | 2 +- .../v2/ModalBody/__tests__/ModalBody.test.tsx | 4 ++- .../ui-modal/src/Modal/v2/ModalBody/styles.ts | 2 +- .../__tests__/ModalFooter.test.tsx | 4 ++- .../src/Modal/v2/ModalFooter/styles.ts | 2 +- .../__tests__/ModalHeader.test.tsx | 16 +++++++++--- .../src/Modal/v2/ModalHeader/styles.ts | 2 +- packages/ui-modal/src/Modal/v2/styles.ts | 2 +- .../src/AppNav/v2/Item/styles.ts | 2 +- .../ui-navigation/src/AppNav/v2/styles.ts | 4 ++- .../src/NumberInput/v2/styles.ts | 2 +- .../ui-options/src/Options/v2/Item/styles.ts | 2 +- .../src/Options/v2/Separator/styles.ts | 2 +- packages/ui-options/src/Options/v2/styles.ts | 2 +- .../v2/PaginationPageInput/styles.ts | 2 +- .../ui-pagination/src/Pagination/v2/styles.ts | 2 +- packages/ui-pill/src/Pill/v2/styles.ts | 2 +- packages/ui-popover/src/Popover/v2/styles.ts | 2 +- .../ui-progress/src/ProgressBar/v2/styles.ts | 2 +- .../src/ProgressCircle/v2/styles.ts | 2 +- .../src/RadioInput/v2/styles.ts | 2 +- .../src/RangeInput/v2/styles.ts | 2 +- .../lib/build/buildThemes/setupThemes.js | 26 ++++++++++++------- .../SideNavBar/v2/SideNavBarItem/styles.ts | 2 +- .../src/SideNavBar/v2/styles.ts | 2 +- .../src/SourceCodeEditor/v2/styles.ts | 2 +- packages/ui-spinner/src/Spinner/v2/styles.ts | 2 +- packages/ui-table/src/Table/v2/Body/styles.ts | 2 +- packages/ui-table/src/Table/v2/Cell/styles.ts | 2 +- .../ui-table/src/Table/v2/ColHeader/styles.ts | 2 +- packages/ui-table/src/Table/v2/Head/styles.ts | 2 +- packages/ui-table/src/Table/v2/Row/styles.ts | 2 +- .../ui-table/src/Table/v2/RowHeader/styles.ts | 2 +- packages/ui-table/src/Table/v2/styles.ts | 2 +- packages/ui-tabs/src/Tabs/v2/Panel/styles.ts | 2 +- packages/ui-tabs/src/Tabs/v2/Tab/styles.ts | 2 +- packages/ui-tabs/src/Tabs/v2/styles.ts | 2 +- packages/ui-tag/src/Tag/v2/styles.ts | 2 +- .../ui-text-area/src/TextArea/v2/styles.ts | 2 +- .../ui-text-input/src/TextInput/v2/styles.ts | 2 +- packages/ui-text/src/Text/v2/styles.ts | 2 +- .../src/ToggleDetails/v2/styles.ts | 2 +- .../src/ToggleGroup/v2/styles.ts | 2 +- packages/ui-tooltip/src/Tooltip/v2/styles.ts | 2 +- packages/ui-tray/src/Tray/v2/styles.ts | 2 +- .../src/TreeBrowser/v2/TreeButton/styles.ts | 2 +- .../TreeBrowser/v2/TreeCollection/styles.ts | 2 +- .../src/TreeBrowser/v2/styles.ts | 2 +- .../src/TruncateText/v2/styles.ts | 2 +- packages/ui-view/src/ContextView/v2/styles.ts | 8 +++--- packages/ui-view/src/View/v2/styles.ts | 2 +- 96 files changed, 151 insertions(+), 124 deletions(-) diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts index 52a912f135..db81cbe83b 100644 --- a/packages/emotion/src/index.ts +++ b/packages/emotion/src/index.ts @@ -44,7 +44,7 @@ export { useStyle } from './useStyle' export { useTheme } from './useTheme' export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes' -export type { WithStyleProps } from './withStyleLegacy' +export type { WithStyleProps } from './withStyle' export type { ThemeOverrideValue } from './useStyle' export type { SpacingValues, diff --git a/packages/emotion/src/useStyle.ts b/packages/emotion/src/useStyle.ts index 8a0f007dc3..0686e58d03 100644 --- a/packages/emotion/src/useStyle.ts +++ b/packages/emotion/src/useStyle.ts @@ -47,7 +47,7 @@ type ThemeOverrideValue = | Partial | (( componentTheme: Theme, - currentTheme: NewComponentTypes[keyof NewComponentTypes] + currentTheme: ReturnType ) => Partial) const isNewThemeObject = (obj: BaseThemeOrOverride): obj is Theme => { @@ -82,10 +82,9 @@ const useStyle =

(useStyleParams: { isNewThemeObject(theme) && // TODO: is it possible not to have a theme object here? theme.newTheme.components[componentWithTokensId as keyof NewComponentTypes] ) { - baseComponentTheme = - theme.newTheme.components[ - componentWithTokensId as keyof NewComponentTypes - ] + baseComponentTheme = theme.newTheme.components[ + componentWithTokensId as keyof NewComponentTypes + ](theme.newTheme.semantics) } const finalOverride = getComponentThemeOverride( theme, diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx index 040a700643..be872b5b4d 100644 --- a/packages/emotion/src/withStyle.tsx +++ b/packages/emotion/src/withStyle.tsx @@ -152,7 +152,9 @@ const withStyle = decorator( ) => { const displayName = ComposedComponent.displayName || ComposedComponent.name - const componentId = ComposedComponent.componentId?.replace('.', '') + const componentId = ComposedComponent.componentId?.replace('.', '') as + | keyof NewComponentTypes + | undefined const WithStyle: ForwardRefExoticComponent< PropsWithoutRef & RefAttributes @@ -185,11 +187,16 @@ const withStyle = decorator( } const componentWithTokensId = useTokensFrom ?? componentId - - const baseComponentTheme = - theme.newTheme.components[ - componentWithTokensId as keyof NewComponentTypes - ] + let baseComponentTheme = {} + // Some components do not have a theme e.g. FormFieldMessages + if ( + componentWithTokensId && + theme.newTheme.components[componentWithTokensId] + ) { + baseComponentTheme = theme.newTheme.components[componentWithTokensId]( + theme.newTheme.semantics + ) + } const themeOverride = getComponentThemeOverride( theme, diff --git a/packages/ui-alerts/src/Alert/v2/styles.ts b/packages/ui-alerts/src/Alert/v2/styles.ts index 0aedd24159..298a4e9119 100644 --- a/packages/ui-alerts/src/Alert/v2/styles.ts +++ b/packages/ui-alerts/src/Alert/v2/styles.ts @@ -37,7 +37,7 @@ import type { AlertProps, AlertStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Alert'], + componentTheme: ReturnType, props: AlertProps, sharedTokens: SharedTokens ): AlertStyle => { diff --git a/packages/ui-avatar/src/Avatar/v2/index.tsx b/packages/ui-avatar/src/Avatar/v2/index.tsx index 29183608c3..b404f306eb 100644 --- a/packages/ui-avatar/src/Avatar/v2/index.tsx +++ b/packages/ui-avatar/src/Avatar/v2/index.tsx @@ -64,7 +64,6 @@ const Avatar = forwardRef( margin } = props const [loaded, setLoaded] = useState(false) - const styles = useStyle({ generateStyle, themeOverride, diff --git a/packages/ui-avatar/src/Avatar/v2/styles.ts b/packages/ui-avatar/src/Avatar/v2/styles.ts index d94cb44bac..2b5153a7ae 100644 --- a/packages/ui-avatar/src/Avatar/v2/styles.ts +++ b/packages/ui-avatar/src/Avatar/v2/styles.ts @@ -48,7 +48,7 @@ type StyleParams = { * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Avatar'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): AvatarStyle => { diff --git a/packages/ui-badge/src/Badge/v2/styles.ts b/packages/ui-badge/src/Badge/v2/styles.ts index 6804e35250..ffddc6c8b5 100644 --- a/packages/ui-badge/src/Badge/v2/styles.ts +++ b/packages/ui-badge/src/Badge/v2/styles.ts @@ -46,7 +46,7 @@ const pulseAnimation = keyframes` * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Badge'], + componentTheme: ReturnType, props: BadgeProps ): BadgeStyle => { const { type, variant, placement = '', standalone, pulse } = props diff --git a/packages/ui-billboard/src/Billboard/v2/styles.ts b/packages/ui-billboard/src/Billboard/v2/styles.ts index 7ea4965a79..841b17b820 100644 --- a/packages/ui-billboard/src/Billboard/v2/styles.ts +++ b/packages/ui-billboard/src/Billboard/v2/styles.ts @@ -36,7 +36,7 @@ import type { NewComponentTypes } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Billboard'], + componentTheme: ReturnType, props: BillboardProps ): BillboardStyle => { const { size, href, onClick, disabled, hero, heading } = props diff --git a/packages/ui-breadcrumb/src/Breadcrumb/v2/props.ts b/packages/ui-breadcrumb/src/Breadcrumb/v2/props.ts index 911d056af3..8b5b1fc495 100644 --- a/packages/ui-breadcrumb/src/Breadcrumb/v2/props.ts +++ b/packages/ui-breadcrumb/src/Breadcrumb/v2/props.ts @@ -54,7 +54,7 @@ type PropKeys = keyof BreadcrumbOwnProps type AllowedPropKeys = Readonly> type BreadcrumbProps = BreadcrumbOwnProps & - WithStyleProps + WithStyleProps, BreadcrumbStyle> type BreadcrumbStyle = ComponentStyle<'breadcrumb' | 'crumb' | 'separator'> diff --git a/packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts b/packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts index 2ce36d91f3..16ad4e6bec 100644 --- a/packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts +++ b/packages/ui-breadcrumb/src/Breadcrumb/v2/styles.ts @@ -35,7 +35,7 @@ import type { BreadcrumbProps, BreadcrumbStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Breadcrumb'], + componentTheme: ReturnType, props: BreadcrumbProps ): BreadcrumbStyle => { const { size } = props diff --git a/packages/ui-buttons/src/BaseButton/v2/styles.ts b/packages/ui-buttons/src/BaseButton/v2/styles.ts index 2d8dbd87ba..009cda1f1a 100644 --- a/packages/ui-buttons/src/BaseButton/v2/styles.ts +++ b/packages/ui-buttons/src/BaseButton/v2/styles.ts @@ -30,7 +30,7 @@ import type { } from './props' const generateStyle = ( - componentTheme: NewComponentTypes['BaseButton'], + componentTheme: ReturnType, params: BaseButtonProps, _sharedTokens: SharedTokens, extraArgs: BaseButtonStyleProps @@ -262,7 +262,7 @@ const generateStyle = ( boxShadow: componentTheme.secondaryGhostBoxShadow }, active: { - background: componentTheme.secondaryGhostActiveBackground, + background: componentTheme.secondaryGhostActiveBackground }, hover: { background: componentTheme.secondaryGhostHoverBackground, diff --git a/packages/ui-buttons/src/CloseButton/v2/styles.ts b/packages/ui-buttons/src/CloseButton/v2/styles.ts index 38ca7ee350..eda1b63cd6 100644 --- a/packages/ui-buttons/src/CloseButton/v2/styles.ts +++ b/packages/ui-buttons/src/CloseButton/v2/styles.ts @@ -36,7 +36,7 @@ import type { CloseButtonProps, CloseButtonStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - _componentTheme: NewComponentTypes['BaseButton'], + _componentTheme: ReturnType, props: CloseButtonProps, sharedTokens: SharedTokens ): CloseButtonStyle => { @@ -46,7 +46,7 @@ const generateStyle = ( none: 0, 'x-small': sharedTokens.spacing.general.spaceXs, small: sharedTokens.spacing.general.spaceSm, - medium: sharedTokens.spacing.general.spaceMd, + medium: sharedTokens.spacing.general.spaceMd } const getOffsetStyle = () => { diff --git a/packages/ui-calendar/src/Calendar/v2/Day/styles.ts b/packages/ui-calendar/src/Calendar/v2/Day/styles.ts index a81f7dd1b3..aeb4c45011 100644 --- a/packages/ui-calendar/src/Calendar/v2/Day/styles.ts +++ b/packages/ui-calendar/src/Calendar/v2/Day/styles.ts @@ -40,7 +40,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['CalendarDay'], + componentTheme: ReturnType, props: CalendarDayProps, _sharedTokens: SharedTokens, state: CalendarDayStyleProps diff --git a/packages/ui-calendar/src/Calendar/v2/styles.ts b/packages/ui-calendar/src/Calendar/v2/styles.ts index 7d7b864db8..eba9f9f3a6 100644 --- a/packages/ui-calendar/src/Calendar/v2/styles.ts +++ b/packages/ui-calendar/src/Calendar/v2/styles.ts @@ -34,7 +34,7 @@ import type { CalendarStyle, CalendarProps } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Calendar'], + componentTheme: ReturnType, props: CalendarProps ): CalendarStyle => { const { withYearPicker } = props diff --git a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/styles.ts b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/styles.ts index 54e4ae06a0..3ed86927ed 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/styles.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/styles.ts @@ -38,7 +38,7 @@ import type { CheckboxFacadeProps, CheckboxFacadeStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Checkbox'], + componentTheme: ReturnType, props: CheckboxFacadeProps, sharedTokens: SharedTokens ): CheckboxFacadeStyle => { diff --git a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/styles.ts b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/styles.ts index 438ef2720c..78a7133308 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/styles.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/styles.ts @@ -39,7 +39,7 @@ import type { ToggleFacadeProps, ToggleFacadeStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Toggle'], + componentTheme: ReturnType, props: ToggleFacadeProps, sharedTokens: SharedTokens ): ToggleFacadeStyle => { diff --git a/packages/ui-checkbox/src/Checkbox/v2/styles.ts b/packages/ui-checkbox/src/Checkbox/v2/styles.ts index ab0a787341..390f16921d 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/styles.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/styles.ts @@ -37,7 +37,7 @@ import type { NewComponentTypes } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Checkbox'], + componentTheme: ReturnType, props: CheckboxProps ): CheckboxStyle => { const { inline, size, variant } = props diff --git a/packages/ui-color-picker/src/ColorContrast/v2/styles.ts b/packages/ui-color-picker/src/ColorContrast/v2/styles.ts index fc85bce39c..73232828e3 100644 --- a/packages/ui-color-picker/src/ColorContrast/v2/styles.ts +++ b/packages/ui-color-picker/src/ColorContrast/v2/styles.ts @@ -35,7 +35,7 @@ import type { ColorContrastProps } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ColorContrast'], + componentTheme: ReturnType, props: ColorContrastProps ) => { const statusDescriptionStyle = (pass: boolean) => ({ diff --git a/packages/ui-color-picker/src/ColorIndicator/v2/styles.ts b/packages/ui-color-picker/src/ColorIndicator/v2/styles.ts index 6b6c4eb931..abdfa4a699 100644 --- a/packages/ui-color-picker/src/ColorIndicator/v2/styles.ts +++ b/packages/ui-color-picker/src/ColorIndicator/v2/styles.ts @@ -51,7 +51,7 @@ const calcBlendedColor = (c1: RGBAType, c2: RGBAType) => { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ColorIndicator'], + componentTheme: ReturnType, props: ColorIndicatorProps ): ColorIndicatorStyle => { const { color, shape } = props diff --git a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/styles.ts b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/styles.ts index 2517c1f8f3..78b951d514 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/styles.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/styles.ts @@ -41,7 +41,7 @@ import { px } from '@instructure/ui-utils' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Palette'], + componentTheme: ReturnType, props: ColorPaletteProps, _sharedTokens: SharedTokens, state: ColorPaletteState diff --git a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/styles.ts b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/styles.ts index dc3e55d98e..04eee8ca57 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/styles.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/styles.ts @@ -36,7 +36,7 @@ import type { NewComponentTypes } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['RgbaInput'], + componentTheme: ReturnType, props: RGBAInputProps ): RGBAInputStyle => { return { diff --git a/packages/ui-color-picker/src/ColorMixer/v2/Slider/styles.ts b/packages/ui-color-picker/src/ColorMixer/v2/Slider/styles.ts index c23cac1ccd..dc3d14837c 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/Slider/styles.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/Slider/styles.ts @@ -36,7 +36,7 @@ import type { SliderStyle, SliderProps, SliderStyleProps } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Slider'], + componentTheme: ReturnType, props: SliderProps, _sharedTokens: SharedTokens, state: SliderStyleProps diff --git a/packages/ui-color-picker/src/ColorPicker/v2/styles.ts b/packages/ui-color-picker/src/ColorPicker/v2/styles.ts index 6989239227..b80b47f703 100644 --- a/packages/ui-color-picker/src/ColorPicker/v2/styles.ts +++ b/packages/ui-color-picker/src/ColorPicker/v2/styles.ts @@ -42,7 +42,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ColorPicker'], + componentTheme: ReturnType, props: ColorPickerProps, sharedTokens: SharedTokens, state: ColorPickerState & { isSimple: boolean } diff --git a/packages/ui-color-picker/src/ColorPreset/v2/styles.ts b/packages/ui-color-picker/src/ColorPreset/v2/styles.ts index 11cc12c0bb..6bb3aee1e6 100644 --- a/packages/ui-color-picker/src/ColorPreset/v2/styles.ts +++ b/packages/ui-color-picker/src/ColorPreset/v2/styles.ts @@ -35,7 +35,7 @@ import type { ColorPresetProps } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ColorPreset'], + componentTheme: ReturnType, props: ColorPresetProps ) => { const { colorMixerSettings, disabled } = props diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/styles.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/styles.ts index fd80bca20b..07e6e5051f 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/styles.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/styles.ts @@ -41,7 +41,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['DrawerLayoutContent'], + componentTheme: ReturnType, _props: DrawerLayoutContentProps, _sharedTokens: SharedTokens, state: DrawerLayoutContentStyleProps diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/styles.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/styles.ts index ee1b728f48..c438114148 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/styles.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/styles.ts @@ -41,7 +41,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['DrawerLayoutTray'], + componentTheme: ReturnType, props: DrawerLayoutTrayProps, _sharedTokens: SharedTokens, state: DrawerLayoutTrayStyleProps diff --git a/packages/ui-file-drop/src/FileDrop/v2/styles.ts b/packages/ui-file-drop/src/FileDrop/v2/styles.ts index 2362ea014f..70b8632628 100644 --- a/packages/ui-file-drop/src/FileDrop/v2/styles.ts +++ b/packages/ui-file-drop/src/FileDrop/v2/styles.ts @@ -38,7 +38,7 @@ type StyleParams = FileDropProps & FileDropStyleProps * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['FileDrop'], + componentTheme: ReturnType, params: StyleParams, _sharedTokens: SharedTokens ): FileDropStyle => { diff --git a/packages/ui-flex/src/Flex/v2/styles.ts b/packages/ui-flex/src/Flex/v2/styles.ts index ceeea12a82..2e5d92b410 100644 --- a/packages/ui-flex/src/Flex/v2/styles.ts +++ b/packages/ui-flex/src/Flex/v2/styles.ts @@ -42,7 +42,7 @@ import type { FlexProps, FlexStyle } from './props' */ const generateStyle = ( - componentTheme: NewComponentTypes['Flex'], + componentTheme: ReturnType, props: FlexProps, sharedTokens: SharedTokens ): FlexStyle => { diff --git a/packages/ui-form-field/src/FormFieldLayout/v2/styles.ts b/packages/ui-form-field/src/FormFieldLayout/v2/styles.ts index 145d103de3..103a65c146 100644 --- a/packages/ui-form-field/src/FormFieldLayout/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldLayout/v2/styles.ts @@ -82,7 +82,7 @@ const generateGridLayout = ( * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['FormFieldLayout'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): FormFieldLayoutStyle => { diff --git a/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts index 4c16545ce2..e1ccaaa233 100644 --- a/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts @@ -41,7 +41,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['FormFieldMessage'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): FormFieldMessageStyle => { diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts index 3f245f18a3..99d55b0dfb 100644 --- a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts @@ -30,7 +30,7 @@ import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props' * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. + * @param {Object} _componentTheme The theme variable object. * @param {Object} props the props of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ diff --git a/packages/ui-grid/src/Grid/v2/styles.ts b/packages/ui-grid/src/Grid/v2/styles.ts index c6956a3c21..28a1b681d1 100644 --- a/packages/ui-grid/src/Grid/v2/styles.ts +++ b/packages/ui-grid/src/Grid/v2/styles.ts @@ -37,7 +37,7 @@ import type { GridProps, GridStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Grid'], + componentTheme: ReturnType, props: GridProps ): GridStyle => { const { startAt, visualDebug } = props diff --git a/packages/ui-grid/src/GridCol/v2/styles.ts b/packages/ui-grid/src/GridCol/v2/styles.ts index 3d708b091d..e7cb8fb2a5 100644 --- a/packages/ui-grid/src/GridCol/v2/styles.ts +++ b/packages/ui-grid/src/GridCol/v2/styles.ts @@ -39,7 +39,7 @@ type BreakPoints = NonNullable * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['GridCol'], + componentTheme: ReturnType, props: GridColProps ): GridColStyle => { const { diff --git a/packages/ui-grid/src/GridRow/v2/styles.ts b/packages/ui-grid/src/GridRow/v2/styles.ts index f1ed2d2855..05ddb2b99d 100644 --- a/packages/ui-grid/src/GridRow/v2/styles.ts +++ b/packages/ui-grid/src/GridRow/v2/styles.ts @@ -37,7 +37,7 @@ import type { GridRowProps, GridRowStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['GridRow'], + componentTheme: ReturnType, props: GridRowProps ): GridRowStyle => { const { diff --git a/packages/ui-heading/src/Heading/v2/styles.ts b/packages/ui-heading/src/Heading/v2/styles.ts index e42d19e46e..7a9ce41c10 100644 --- a/packages/ui-heading/src/Heading/v2/styles.ts +++ b/packages/ui-heading/src/Heading/v2/styles.ts @@ -35,7 +35,7 @@ import type { HeadingProps, HeadingStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Heading'], + componentTheme: ReturnType, props: HeadingProps ): HeadingStyle => { const { level, color, border, variant, aiVariant } = props diff --git a/packages/ui-icons/src/styles.ts b/packages/ui-icons/src/styles.ts index 91fdfdf3a3..c9fbc86cbf 100644 --- a/packages/ui-icons/src/styles.ts +++ b/packages/ui-icons/src/styles.ts @@ -40,7 +40,7 @@ type StyleParams = { */ const convertSemanticSize = ( size: InstUIIconProps['size'], - componentTheme: NewComponentTypes['Icon'] + componentTheme: ReturnType ) => { if (!size) return undefined @@ -70,7 +70,7 @@ const convertSemanticSize = ( */ const convertSizeToStrokeWidth = ( size: InstUIIconProps['size'], - componentTheme: NewComponentTypes['Icon'] + componentTheme: ReturnType ) => { if (!size) return undefined @@ -97,7 +97,7 @@ const convertSizeToStrokeWidth = ( const determineColorValue = ( color: InstUIIconProps['color'], - componentTheme: NewComponentTypes['Icon'] + componentTheme: ReturnType ) => { if (!color) { return undefined @@ -213,7 +213,7 @@ const determineColorValue = ( } const generateStyle = ( - componentTheme: NewComponentTypes['Icon'], + componentTheme: ReturnType, params: StyleParams ): IconStyle => { const { diff --git a/packages/ui-instructure/src/AiInformation/v2/styles.ts b/packages/ui-instructure/src/AiInformation/v2/styles.ts index ef4568d2b4..781b079543 100644 --- a/packages/ui-instructure/src/AiInformation/v2/styles.ts +++ b/packages/ui-instructure/src/AiInformation/v2/styles.ts @@ -36,7 +36,7 @@ import type { AiInformationStyle } from './props' * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['AiInformation'], + componentTheme: ReturnType, _params: Record, _sharedTokens: SharedTokens ): AiInformationStyle => { diff --git a/packages/ui-link/src/Link/v2/styles.ts b/packages/ui-link/src/Link/v2/styles.ts index 0f83d96b99..20e0f758f8 100644 --- a/packages/ui-link/src/Link/v2/styles.ts +++ b/packages/ui-link/src/Link/v2/styles.ts @@ -40,7 +40,7 @@ import { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Link'], + componentTheme: ReturnType, props: LinkProps, sharedTokens: SharedTokens, state: Partial< diff --git a/packages/ui-list/src/InlineList/v2/InlineListItem/styles.ts b/packages/ui-list/src/InlineList/v2/InlineListItem/styles.ts index 5781b69765..ab302c9f0d 100644 --- a/packages/ui-list/src/InlineList/v2/InlineListItem/styles.ts +++ b/packages/ui-list/src/InlineList/v2/InlineListItem/styles.ts @@ -37,7 +37,7 @@ import type { InlineListItemProps, InlineListItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['InlineListItem'], + componentTheme: ReturnType, props: InlineListItemProps ): InlineListItemStyle => { const { size, delimiter, spacing } = props diff --git a/packages/ui-list/src/List/v2/ListItem/styles.ts b/packages/ui-list/src/List/v2/ListItem/styles.ts index 826d09f728..9970fc5eca 100644 --- a/packages/ui-list/src/List/v2/ListItem/styles.ts +++ b/packages/ui-list/src/List/v2/ListItem/styles.ts @@ -36,7 +36,7 @@ import type { ListItemProps, ListItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ListItem'], + componentTheme: ReturnType, props: ListItemProps ): ListItemStyle => { const { size, delimiter, spacing } = props diff --git a/packages/ui-list/src/List/v2/styles.ts b/packages/ui-list/src/List/v2/styles.ts index 55b07dbf2f..43da9b7311 100644 --- a/packages/ui-list/src/List/v2/styles.ts +++ b/packages/ui-list/src/List/v2/styles.ts @@ -36,7 +36,7 @@ import type { NewComponentTypes } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['List'], + componentTheme: ReturnType, props: ListProps ): ListStyle => { const { isUnstyled, as } = props diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts b/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts index 537da9735f..e175d4821e 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItem/styles.ts @@ -36,7 +36,7 @@ import type { MenuItemProps, MenuItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['MenuItem'], + componentTheme: ReturnType, props: MenuItemProps ): MenuItemStyle => { const { type, disabled, selected } = props diff --git a/packages/ui-menu/src/Menu/v2/MenuItemGroup/styles.ts b/packages/ui-menu/src/Menu/v2/MenuItemGroup/styles.ts index d1c0015ef6..5da215a39b 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemGroup/styles.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemGroup/styles.ts @@ -36,7 +36,7 @@ import type { MenuGroupStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['MenuGroup'] + componentTheme: ReturnType ): MenuGroupStyle => { return { menuItemGroup: { diff --git a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/styles.ts b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/styles.ts index e5fe1a5811..4a6c541b75 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/styles.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/styles.ts @@ -36,7 +36,7 @@ import type { MenuSeparatorStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['MenuSeparator'] + componentTheme: ReturnType ): MenuSeparatorStyle => { return { menuItemSeparator: { diff --git a/packages/ui-menu/src/Menu/v2/styles.ts b/packages/ui-menu/src/Menu/v2/styles.ts index 23e6432630..c5c987831a 100644 --- a/packages/ui-menu/src/Menu/v2/styles.ts +++ b/packages/ui-menu/src/Menu/v2/styles.ts @@ -37,7 +37,7 @@ import { calcFocusOutlineStyles } from '@instructure/emotion' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Menu'], + componentTheme: ReturnType, props: MenuProps, sharedTokens: SharedTokens ): MenuStyle => { diff --git a/packages/ui-metric/src/Metric/v2/styles.ts b/packages/ui-metric/src/Metric/v2/styles.ts index 8738f48eb9..e0adfd588e 100644 --- a/packages/ui-metric/src/Metric/v2/styles.ts +++ b/packages/ui-metric/src/Metric/v2/styles.ts @@ -39,7 +39,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Metric'], + componentTheme: ReturnType, params: StyleParams ): MetricStyle => { const { textAlign } = params diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/__tests__/ModalBody.test.tsx b/packages/ui-modal/src/Modal/v2/ModalBody/__tests__/ModalBody.test.tsx index 3ecdee952a..558954510f 100644 --- a/packages/ui-modal/src/Modal/v2/ModalBody/__tests__/ModalBody.test.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalBody/__tests__/ModalBody.test.tsx @@ -44,7 +44,9 @@ describe('', () => { }) it('should set inverse styles', async () => { - const themeVariables = canvas.newTheme.components.ModalBody + const themeVariables = canvas.newTheme.components.ModalBody( + canvas.newTheme.semantics + ) const { findByText } = render( {BODY_TEXT} ) diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/styles.ts b/packages/ui-modal/src/Modal/v2/ModalBody/styles.ts index 3d00a7ea93..b70f16656a 100644 --- a/packages/ui-modal/src/Modal/v2/ModalBody/styles.ts +++ b/packages/ui-modal/src/Modal/v2/ModalBody/styles.ts @@ -37,7 +37,7 @@ import type { ModalBodyProps, ModalBodyStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ModalBody'], + componentTheme: ReturnType, props: ModalBodyProps ): ModalBodyStyle => { const { variant, spacing } = props diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/__tests__/ModalFooter.test.tsx b/packages/ui-modal/src/Modal/v2/ModalFooter/__tests__/ModalFooter.test.tsx index 19ce527313..ace06e23b8 100644 --- a/packages/ui-modal/src/Modal/v2/ModalFooter/__tests__/ModalFooter.test.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalFooter/__tests__/ModalFooter.test.tsx @@ -41,7 +41,9 @@ describe('', () => { }) it('should set inverse styles', async () => { - const themeVariables = canvas.newTheme.components.ModalFooter + const themeVariables = canvas.newTheme.components.ModalFooter( + canvas.newTheme.semantics + ) const { findByText } = render( {FOOTER_TEXT} ) diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/styles.ts b/packages/ui-modal/src/Modal/v2/ModalFooter/styles.ts index e52bd94203..ba385c0557 100644 --- a/packages/ui-modal/src/Modal/v2/ModalFooter/styles.ts +++ b/packages/ui-modal/src/Modal/v2/ModalFooter/styles.ts @@ -37,7 +37,7 @@ import type { ModalFooterProps, ModalFooterStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ModalFooter'], + componentTheme: ReturnType, props: ModalFooterProps ): ModalFooterStyle => { const { variant, spacing } = props diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/__tests__/ModalHeader.test.tsx b/packages/ui-modal/src/Modal/v2/ModalHeader/__tests__/ModalHeader.test.tsx index cc53a286cc..4669b423c1 100644 --- a/packages/ui-modal/src/Modal/v2/ModalHeader/__tests__/ModalHeader.test.tsx +++ b/packages/ui-modal/src/Modal/v2/ModalHeader/__tests__/ModalHeader.test.tsx @@ -41,7 +41,9 @@ describe('', () => { }) it('should set inverse styles', async () => { - const themeVariables = canvas.newTheme.components.ModalHeader + const themeVariables = canvas.newTheme.components.ModalHeader( + canvas.newTheme.semantics + ) const { findByText } = render( {HEADER_TEXT} ) @@ -62,7 +64,9 @@ describe('', () => { describe('spacing prop', () => { it('should be correct by default', async () => { - const themeVariables = canvas.newTheme.components.ModalHeader + const themeVariables = canvas.newTheme.components.ModalHeader( + canvas.newTheme.semantics + ) const { findByText } = render({HEADER_TEXT}) const modalHeader = await findByText(HEADER_TEXT) @@ -74,7 +78,9 @@ describe('', () => { }) it('should correctly set default spacing', async () => { - const themeVariables = canvas.newTheme.components.ModalHeader + const themeVariables = canvas.newTheme.components.ModalHeader( + canvas.newTheme.semantics + ) const { findByText } = render( {HEADER_TEXT} ) @@ -88,7 +94,9 @@ describe('', () => { }) it('should correctly set compact spacing', async () => { - const themeVariables = canvas.newTheme.components.ModalHeader + const themeVariables = canvas.newTheme.components.ModalHeader( + canvas.newTheme.semantics + ) const { findByText } = render( {HEADER_TEXT} ) diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/styles.ts b/packages/ui-modal/src/Modal/v2/ModalHeader/styles.ts index 80d0b82e65..b2f3784440 100644 --- a/packages/ui-modal/src/Modal/v2/ModalHeader/styles.ts +++ b/packages/ui-modal/src/Modal/v2/ModalHeader/styles.ts @@ -41,7 +41,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ModalHeader'], + componentTheme: ReturnType, props: ModalHeaderProps, _sharedTokens: SharedTokens, state: ModalHeaderStyleProps diff --git a/packages/ui-modal/src/Modal/v2/styles.ts b/packages/ui-modal/src/Modal/v2/styles.ts index fcabbb7916..3e3f98499f 100644 --- a/packages/ui-modal/src/Modal/v2/styles.ts +++ b/packages/ui-modal/src/Modal/v2/styles.ts @@ -38,7 +38,7 @@ import type { ModalProps, ModalStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Modal'], + componentTheme: ReturnType, props: ModalProps ): ModalStyle => { const { size, variant, overflow } = props diff --git a/packages/ui-navigation/src/AppNav/v2/Item/styles.ts b/packages/ui-navigation/src/AppNav/v2/Item/styles.ts index 78528a88ac..deb6cc3016 100644 --- a/packages/ui-navigation/src/AppNav/v2/Item/styles.ts +++ b/packages/ui-navigation/src/AppNav/v2/Item/styles.ts @@ -36,7 +36,7 @@ import type { AppNavItemProps, AppNavItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['AppNavItem'], + componentTheme: ReturnType, props: AppNavItemProps ): AppNavItemStyle => { const { isSelected, isDisabled } = props diff --git a/packages/ui-navigation/src/AppNav/v2/styles.ts b/packages/ui-navigation/src/AppNav/v2/styles.ts index 49159cdba5..741ebd787a 100644 --- a/packages/ui-navigation/src/AppNav/v2/styles.ts +++ b/packages/ui-navigation/src/AppNav/v2/styles.ts @@ -35,7 +35,9 @@ import type { AppNavStyle } from './props' * @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: NewComponentTypes['AppNav']): AppNavStyle => { +const generateStyle = ( + componentTheme: ReturnType +): AppNavStyle => { return { appNav: { label: 'appNav', diff --git a/packages/ui-number-input/src/NumberInput/v2/styles.ts b/packages/ui-number-input/src/NumberInput/v2/styles.ts index 437b95cee4..0c40924c67 100644 --- a/packages/ui-number-input/src/NumberInput/v2/styles.ts +++ b/packages/ui-number-input/src/NumberInput/v2/styles.ts @@ -45,7 +45,7 @@ type StyleParams = { * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TextInput'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): NumberInputStyle => { diff --git a/packages/ui-options/src/Options/v2/Item/styles.ts b/packages/ui-options/src/Options/v2/Item/styles.ts index b9db9de4ff..595de5a9d0 100644 --- a/packages/ui-options/src/Options/v2/Item/styles.ts +++ b/packages/ui-options/src/Options/v2/Item/styles.ts @@ -39,7 +39,7 @@ import { ReactNode } from 'react' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['OptionsItem'], + componentTheme: ReturnType, props: OptionsItemProps ): OptionsItemStyle => { const { diff --git a/packages/ui-options/src/Options/v2/Separator/styles.ts b/packages/ui-options/src/Options/v2/Separator/styles.ts index 8cbd59a405..a786bc500c 100644 --- a/packages/ui-options/src/Options/v2/Separator/styles.ts +++ b/packages/ui-options/src/Options/v2/Separator/styles.ts @@ -36,7 +36,7 @@ import type { OptionsSeparatorStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['OptionsSeparator'] + componentTheme: ReturnType ): OptionsSeparatorStyle => { return { separator: { diff --git a/packages/ui-options/src/Options/v2/styles.ts b/packages/ui-options/src/Options/v2/styles.ts index a0387e5faa..056805aed1 100644 --- a/packages/ui-options/src/Options/v2/styles.ts +++ b/packages/ui-options/src/Options/v2/styles.ts @@ -36,7 +36,7 @@ import type { OptionsStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Options'] + componentTheme: ReturnType ): OptionsStyle => { return { options: { diff --git a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/styles.ts b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/styles.ts index d06b864592..45484ef212 100644 --- a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/styles.ts +++ b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/styles.ts @@ -37,7 +37,7 @@ import type { PaginationPageInputStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['PaginationPageInput'] + componentTheme: ReturnType ): PaginationPageInputStyle => { return { paginationPageInput: { diff --git a/packages/ui-pagination/src/Pagination/v2/styles.ts b/packages/ui-pagination/src/Pagination/v2/styles.ts index d172d299af..2ded13faf9 100644 --- a/packages/ui-pagination/src/Pagination/v2/styles.ts +++ b/packages/ui-pagination/src/Pagination/v2/styles.ts @@ -37,7 +37,7 @@ import type { PaginationStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Pagination'] + componentTheme: ReturnType ): PaginationStyle => { return { pageIndicatorList: { diff --git a/packages/ui-pill/src/Pill/v2/styles.ts b/packages/ui-pill/src/Pill/v2/styles.ts index 0ba45ffece..a8b0a7506b 100644 --- a/packages/ui-pill/src/Pill/v2/styles.ts +++ b/packages/ui-pill/src/Pill/v2/styles.ts @@ -35,7 +35,7 @@ import type { PillProps, PillStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Pill'], + componentTheme: ReturnType, props: PillProps ): PillStyle => { const { color } = props diff --git a/packages/ui-popover/src/Popover/v2/styles.ts b/packages/ui-popover/src/Popover/v2/styles.ts index 4f232d2f33..51df8ba7ae 100644 --- a/packages/ui-popover/src/Popover/v2/styles.ts +++ b/packages/ui-popover/src/Popover/v2/styles.ts @@ -34,7 +34,7 @@ import type { PopoverStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Popover'] + componentTheme: ReturnType ): PopoverStyle => { return { borderColor: componentTheme.borderColor, diff --git a/packages/ui-progress/src/ProgressBar/v2/styles.ts b/packages/ui-progress/src/ProgressBar/v2/styles.ts index 844ef00731..99df4a0a66 100644 --- a/packages/ui-progress/src/ProgressBar/v2/styles.ts +++ b/packages/ui-progress/src/ProgressBar/v2/styles.ts @@ -36,7 +36,7 @@ import type { ProgressBarProps, ProgressBarStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ProgressBar'], + componentTheme: ReturnType, props: ProgressBarProps, _sharedTokens: SharedTokens ): ProgressBarStyle => { diff --git a/packages/ui-progress/src/ProgressCircle/v2/styles.ts b/packages/ui-progress/src/ProgressCircle/v2/styles.ts index b589c8b2fb..5a3bd4b9ce 100644 --- a/packages/ui-progress/src/ProgressCircle/v2/styles.ts +++ b/packages/ui-progress/src/ProgressCircle/v2/styles.ts @@ -40,7 +40,7 @@ import type { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ProgressCircle'], + componentTheme: ReturnType, props: ProgressCircleProps, _sharedTokens: SharedTokens, state: ProgressCircleState diff --git a/packages/ui-radio-input/src/RadioInput/v2/styles.ts b/packages/ui-radio-input/src/RadioInput/v2/styles.ts index 566be19586..ae03c2b3b6 100644 --- a/packages/ui-radio-input/src/RadioInput/v2/styles.ts +++ b/packages/ui-radio-input/src/RadioInput/v2/styles.ts @@ -48,7 +48,7 @@ type StyleParams = { * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['RadioInput'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): RadioInputStyle => { diff --git a/packages/ui-range-input/src/RangeInput/v2/styles.ts b/packages/ui-range-input/src/RangeInput/v2/styles.ts index e01084ab5a..70e47cd65b 100644 --- a/packages/ui-range-input/src/RangeInput/v2/styles.ts +++ b/packages/ui-range-input/src/RangeInput/v2/styles.ts @@ -38,7 +38,7 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['RangeInput'], + componentTheme: ReturnType, props: RangeInputProps, sharedTokens: SharedTokens ): RangeInputStyle => { diff --git a/packages/ui-scripts/lib/build/buildThemes/setupThemes.js b/packages/ui-scripts/lib/build/buildThemes/setupThemes.js index 1d32f23465..08867c606f 100644 --- a/packages/ui-scripts/lib/build/buildThemes/setupThemes.js +++ b/packages/ui-scripts/lib/build/buildThemes/setupThemes.js @@ -162,23 +162,26 @@ const setupThemes = async (targetPath, input) => { const componentTypes = generateComponentType( input[componentpath][fullComponentName] ) - const semanticsImport = componentThemeVars.includes('semantics.') - ? 'import semantics from "../semantics"' - : '' + const hasSemanticsImport = componentThemeVars.includes('semantics.') + const semanticsType = hasSemanticsImport + ? 'semantics: Semantics' + : '_semantics: Semantics' // SharedTokens have to be at the component level in the input data // because of Figma, but it should be one level higher for our purposes if (rawComponentName !== 'SharedTokens') { const componentFileContent = ` - ${semanticsImport} + import type { Semantics } from "../semantics" import type { ${capitalize( fullComponentName )} } from '../../componentTypes/${fullComponentName}' - const ${fullComponentName}: ${capitalize( + const ${fullComponentName}: (${semanticsType}) => ${capitalize( fullComponentName - )} = {${componentThemeVars}} + )} = (${semanticsType}) => ({ + ${componentThemeVars}}) + export default ${fullComponentName} - ` + ` await createFile( `${themePath}/components/${fullComponentName}.ts`, componentFileContent @@ -272,9 +275,14 @@ const setupThemes = async (targetPath, input) => { .join('\n') const componentTypeExport = componentAndSubcomponentNames .map( - (componentName) => - `${capitalize(componentName)}:${capitalize(componentName)}` + ( + componentName // TODO type better + ) => + `${capitalize(componentName)}: (semantics: any) => ${capitalize( + componentName + )}` ) + .sort() .join(',\n') const componentsTypesFileContent = ` diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts index 72dfd499c5..f49293c5a3 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts @@ -37,7 +37,7 @@ import type { SideNavBarItemProps, SideNavBarItemStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['SideNavBarItem'], + componentTheme: ReturnType, props: SideNavBarItemProps ): SideNavBarItemStyle => { const { selected } = props diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/styles.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/styles.ts index 2e99adc0c9..b70a7f1e2d 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/styles.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/styles.ts @@ -38,7 +38,7 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['SideNavBar'], + componentTheme: ReturnType, _props: SideNavBarProps, _sharedTokens: SharedTokens, state: SideNavBarState diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/styles.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/styles.ts index 06b0c1ab00..5ec8be37df 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/styles.ts +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/styles.ts @@ -37,7 +37,7 @@ import type { SourceCodeEditorProps, SourceCodeEditorStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['SourceCodeEditor'], + componentTheme: ReturnType, props: SourceCodeEditorProps, sharedTokens: SharedTokens ): SourceCodeEditorStyle => { diff --git a/packages/ui-spinner/src/Spinner/v2/styles.ts b/packages/ui-spinner/src/Spinner/v2/styles.ts index 0582916fb3..72cd40df7f 100644 --- a/packages/ui-spinner/src/Spinner/v2/styles.ts +++ b/packages/ui-spinner/src/Spinner/v2/styles.ts @@ -66,7 +66,7 @@ const morph = keyframes` * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Spinner'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): SpinnerStyle => { diff --git a/packages/ui-table/src/Table/v2/Body/styles.ts b/packages/ui-table/src/Table/v2/Body/styles.ts index 30cfda2dfe..4cf36242c1 100644 --- a/packages/ui-table/src/Table/v2/Body/styles.ts +++ b/packages/ui-table/src/Table/v2/Body/styles.ts @@ -34,7 +34,7 @@ import type { TableBodyStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableBody'] + componentTheme: ReturnType ): TableBodyStyle => { return { body: { diff --git a/packages/ui-table/src/Table/v2/Cell/styles.ts b/packages/ui-table/src/Table/v2/Cell/styles.ts index 90f8ca14ed..e6f37b615d 100644 --- a/packages/ui-table/src/Table/v2/Cell/styles.ts +++ b/packages/ui-table/src/Table/v2/Cell/styles.ts @@ -35,7 +35,7 @@ import type { TableCellProps, TableCellStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableCell'], + componentTheme: ReturnType, props: TableCellProps ): TableCellStyle => { const { textAlign } = props diff --git a/packages/ui-table/src/Table/v2/ColHeader/styles.ts b/packages/ui-table/src/Table/v2/ColHeader/styles.ts index a299723c61..5b629bd563 100644 --- a/packages/ui-table/src/Table/v2/ColHeader/styles.ts +++ b/packages/ui-table/src/Table/v2/ColHeader/styles.ts @@ -36,7 +36,7 @@ import type { TableColHeaderProps, TableColHeaderStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableColHeader'], + componentTheme: ReturnType, props: TableColHeaderProps, sharedTokens: SharedTokens ): TableColHeaderStyle => { diff --git a/packages/ui-table/src/Table/v2/Head/styles.ts b/packages/ui-table/src/Table/v2/Head/styles.ts index 3184e6a851..131e028e3c 100644 --- a/packages/ui-table/src/Table/v2/Head/styles.ts +++ b/packages/ui-table/src/Table/v2/Head/styles.ts @@ -34,7 +34,7 @@ import type { TableHeadStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableHead'] + componentTheme: ReturnType ): TableHeadStyle => { return { head: { diff --git a/packages/ui-table/src/Table/v2/Row/styles.ts b/packages/ui-table/src/Table/v2/Row/styles.ts index 933a973c00..75131b462f 100644 --- a/packages/ui-table/src/Table/v2/Row/styles.ts +++ b/packages/ui-table/src/Table/v2/Row/styles.ts @@ -37,7 +37,7 @@ import type { TableRowProps, TableRowStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableRow'], + componentTheme: ReturnType, props: TableRowProps, _sharedTokens: SharedTokens, extraArgs: { isStacked: boolean; hover: boolean } diff --git a/packages/ui-table/src/Table/v2/RowHeader/styles.ts b/packages/ui-table/src/Table/v2/RowHeader/styles.ts index cc627f3fdc..648673e073 100644 --- a/packages/ui-table/src/Table/v2/RowHeader/styles.ts +++ b/packages/ui-table/src/Table/v2/RowHeader/styles.ts @@ -35,7 +35,7 @@ import type { TableRowHeaderProps, TableRowHeaderStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TableRowHeader'], + componentTheme: ReturnType, props: TableRowHeaderProps ): TableRowHeaderStyle => { const { textAlign } = props diff --git a/packages/ui-table/src/Table/v2/styles.ts b/packages/ui-table/src/Table/v2/styles.ts index 12777cb0e6..1fed80699b 100644 --- a/packages/ui-table/src/Table/v2/styles.ts +++ b/packages/ui-table/src/Table/v2/styles.ts @@ -36,7 +36,7 @@ import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Table'], + componentTheme: ReturnType, props: TableProps, _sharedTokens: SharedTokens ): TableStyle => { diff --git a/packages/ui-tabs/src/Tabs/v2/Panel/styles.ts b/packages/ui-tabs/src/Tabs/v2/Panel/styles.ts index 2c09f7a6b3..9ab2ef6ac6 100644 --- a/packages/ui-tabs/src/Tabs/v2/Panel/styles.ts +++ b/packages/ui-tabs/src/Tabs/v2/Panel/styles.ts @@ -41,7 +41,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TabsPanel'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): TabsPanelStyle => { diff --git a/packages/ui-tabs/src/Tabs/v2/Tab/styles.ts b/packages/ui-tabs/src/Tabs/v2/Tab/styles.ts index f90a8c5e34..5bfc9eba60 100644 --- a/packages/ui-tabs/src/Tabs/v2/Tab/styles.ts +++ b/packages/ui-tabs/src/Tabs/v2/Tab/styles.ts @@ -52,7 +52,7 @@ const selectedTab = keyframes` * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TabsTab'], + componentTheme: ReturnType, params: StyleParams ): TabsTabStyle => { const { variant, isSelected, isDisabled, isOverflowScroll } = params diff --git a/packages/ui-tabs/src/Tabs/v2/styles.ts b/packages/ui-tabs/src/Tabs/v2/styles.ts index 746f7c3434..16c228c536 100644 --- a/packages/ui-tabs/src/Tabs/v2/styles.ts +++ b/packages/ui-tabs/src/Tabs/v2/styles.ts @@ -40,7 +40,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Tabs'], + componentTheme: ReturnType, params: StyleParams ): TabsStyle => { const { variant, tabOverflow, fixHeight } = params diff --git a/packages/ui-tag/src/Tag/v2/styles.ts b/packages/ui-tag/src/Tag/v2/styles.ts index 22b27fd394..b759ba8ca3 100644 --- a/packages/ui-tag/src/Tag/v2/styles.ts +++ b/packages/ui-tag/src/Tag/v2/styles.ts @@ -37,7 +37,7 @@ import { calcFocusOutlineStyles } from '@instructure/emotion' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Tag'], + componentTheme: ReturnType, props: TagProps, sharedTokens: SharedTokens ): TagStyle => { diff --git a/packages/ui-text-area/src/TextArea/v2/styles.ts b/packages/ui-text-area/src/TextArea/v2/styles.ts index 7bf62cd201..285dbc8ccd 100644 --- a/packages/ui-text-area/src/TextArea/v2/styles.ts +++ b/packages/ui-text-area/src/TextArea/v2/styles.ts @@ -44,7 +44,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TextArea'], + componentTheme: ReturnType, params: StyleParams, sharedTokens: SharedTokens ): TextAreaStyle => { diff --git a/packages/ui-text-input/src/TextInput/v2/styles.ts b/packages/ui-text-input/src/TextInput/v2/styles.ts index cf73522270..112ee78797 100644 --- a/packages/ui-text-input/src/TextInput/v2/styles.ts +++ b/packages/ui-text-input/src/TextInput/v2/styles.ts @@ -38,7 +38,7 @@ import { calcFocusOutlineStyles } from '@instructure/emotion' * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TextInput'], + componentTheme: ReturnType, props: TextInputProps, sharedTokens: SharedTokens, state: TextInputStyleProps diff --git a/packages/ui-text/src/Text/v2/styles.ts b/packages/ui-text/src/Text/v2/styles.ts index 28dc430ec4..d99650a6e2 100644 --- a/packages/ui-text/src/Text/v2/styles.ts +++ b/packages/ui-text/src/Text/v2/styles.ts @@ -48,7 +48,7 @@ type StyleParams = { * @return The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Text'], + componentTheme: ReturnType, params: StyleParams ): TextStyle => { const { diff --git a/packages/ui-toggle-details/src/ToggleDetails/v2/styles.ts b/packages/ui-toggle-details/src/ToggleDetails/v2/styles.ts index d05e75bfb3..de13f7356b 100644 --- a/packages/ui-toggle-details/src/ToggleDetails/v2/styles.ts +++ b/packages/ui-toggle-details/src/ToggleDetails/v2/styles.ts @@ -48,7 +48,7 @@ const contentAnimation = keyframes` * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ToggleDetails'], + componentTheme: ReturnType, props: ToggleDetailsProps, sharedTokens: SharedTokens, _state: ToggleDetailsStyleProps diff --git a/packages/ui-toggle-details/src/ToggleGroup/v2/styles.ts b/packages/ui-toggle-details/src/ToggleGroup/v2/styles.ts index 6a2d1baa99..58ef8eff41 100644 --- a/packages/ui-toggle-details/src/ToggleGroup/v2/styles.ts +++ b/packages/ui-toggle-details/src/ToggleGroup/v2/styles.ts @@ -36,7 +36,7 @@ import type { ToggleGroupProps, ToggleGroupStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ToggleGroup'], + componentTheme: ReturnType, _props: ToggleGroupProps ): ToggleGroupStyle => { return { diff --git a/packages/ui-tooltip/src/Tooltip/v2/styles.ts b/packages/ui-tooltip/src/Tooltip/v2/styles.ts index 83c2cb4b6c..174e7abdb2 100644 --- a/packages/ui-tooltip/src/Tooltip/v2/styles.ts +++ b/packages/ui-tooltip/src/Tooltip/v2/styles.ts @@ -34,7 +34,7 @@ import type { TooltipStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Tooltip'] + componentTheme: ReturnType ): TooltipStyle => { return { tooltip: { diff --git a/packages/ui-tray/src/Tray/v2/styles.ts b/packages/ui-tray/src/Tray/v2/styles.ts index 7c495f249d..1e6da9cbe4 100644 --- a/packages/ui-tray/src/Tray/v2/styles.ts +++ b/packages/ui-tray/src/Tray/v2/styles.ts @@ -41,7 +41,7 @@ type StyleParams = { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['Tray'], + componentTheme: ReturnType, params: StyleParams ): TrayStyle => { const { border, shadow, size, placement } = params diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/styles.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/styles.ts index f287811a3a..2d2fbf4a03 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/styles.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/styles.ts @@ -49,7 +49,7 @@ const transform = keyframes` * @return {Object} The final style object, which will be used in the component */ const generateStyles = ( - componentTheme: NewComponentTypes['TreeBrowserTreeButton'], + componentTheme: ReturnType, props: TreeBrowserButtonProps, sharedTokens: SharedTokens, state: { animation?: boolean; hoverable?: boolean } diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/styles.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/styles.ts index 9de347d131..a6ad2c4b2b 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/styles.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/styles.ts @@ -48,7 +48,7 @@ const list = keyframes` */ const generateStyles = ( - componentTheme: NewComponentTypes['TreeBrowserTreeCollection'], + componentTheme: ReturnType, props: TreeBrowserCollectionProps, sharedTokens: SharedTokens, state: { animation?: boolean } diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/styles.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/styles.ts index c32deb4f50..7c2aeef9cd 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/styles.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/styles.ts @@ -39,7 +39,7 @@ import type { TreeBrowserStyle, TreeBrowserProps } from './props' */ const generateStyles = ( - componentTheme: NewComponentTypes['TreeBrowser'], + componentTheme: ReturnType, _props: TreeBrowserProps, sharedTokens: SharedTokens ): TreeBrowserStyle => { diff --git a/packages/ui-truncate-text/src/TruncateText/v2/styles.ts b/packages/ui-truncate-text/src/TruncateText/v2/styles.ts index fdc439b79e..36d60077ae 100644 --- a/packages/ui-truncate-text/src/TruncateText/v2/styles.ts +++ b/packages/ui-truncate-text/src/TruncateText/v2/styles.ts @@ -36,7 +36,7 @@ import type { TruncateTextStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['TruncateText'] + componentTheme: ReturnType ): TruncateTextStyle => { return { truncateText: { diff --git a/packages/ui-view/src/ContextView/v2/styles.ts b/packages/ui-view/src/ContextView/v2/styles.ts index 113b808c1e..7257895aa7 100644 --- a/packages/ui-view/src/ContextView/v2/styles.ts +++ b/packages/ui-view/src/ContextView/v2/styles.ts @@ -63,7 +63,7 @@ const topPlacements: PlacementArray = [ const getPlacementStyle = ( placement: PlacementPropValues, - theme: NewComponentTypes['ContextView'] + theme: ReturnType ) => { if (endPlacements.includes(placement)) { return { paddingInlineStart: theme?.arrowSize, paddingInlineEnd: '0' } @@ -83,7 +83,7 @@ const getPlacementStyle = ( const getArrowCorrections = ( placement: PlacementPropValues, - theme: NewComponentTypes['ContextView'] + theme: ReturnType ) => { const center: PlacementArray = [ 'top', @@ -132,7 +132,7 @@ const getArrowCorrections = ( const getArrowPlacementVariant = ( placement: PlacementPropValues, background: ContextViewProps['background'], - theme: NewComponentTypes['ContextView'], + theme: ReturnType, props: ContextViewProps ) => { const transformedPlacement = mirrorPlacement(placement, ' ') @@ -269,7 +269,7 @@ const getArrowPlacementVariant = ( * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['ContextView'], + componentTheme: ReturnType, props: ContextViewProps ): ContextViewStyle => { const { placement, background, borderColor } = props diff --git a/packages/ui-view/src/View/v2/styles.ts b/packages/ui-view/src/View/v2/styles.ts index 3e6ecbf4b6..aa852ea54d 100644 --- a/packages/ui-view/src/View/v2/styles.ts +++ b/packages/ui-view/src/View/v2/styles.ts @@ -226,7 +226,7 @@ const withBorder = (props: ViewProps) => { * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: NewComponentTypes['View'], + componentTheme: ReturnType, props: ViewProps, sharedTokens: SharedTokens ): ViewStyle => { From 342c979f1be5d5eec69ac77d017730e0530754ab Mon Sep 17 00:00:00 2001 From: Matyas Forian-Szabo Date: Tue, 24 Mar 2026 20:04:24 +0100 Subject: [PATCH 2/2] refactor(many): type themeOverride correctly for v2 components, remove FormFieldLabel from v2 FormFieldLabel was deprecated remove a not needed themeOverride from ColopPicker since its doing nothing now INSTUI-4971 --- packages/ui-alerts/src/Alert/v2/props.ts | 5 +- packages/ui-avatar/package.json | 2 +- packages/ui-badge/package.json | 2 +- packages/ui-badge/src/Badge/v2/props.ts | 5 +- packages/ui-billboard/package.json | 2 +- .../ui-billboard/src/Billboard/v2/props.ts | 4 +- packages/ui-breadcrumb/package.json | 2 +- packages/ui-buttons/package.json | 2 +- .../ui-buttons/src/BaseButton/v2/props.ts | 4 +- packages/ui-buttons/src/Button/v2/props.ts | 4 +- .../ui-buttons/src/CloseButton/v2/props.ts | 7 +- .../src/CondensedButton/v2/props.ts | 4 +- .../ui-buttons/src/IconButton/v2/props.ts | 4 +- packages/ui-byline/package.json | 2 +- packages/ui-calendar/package.json | 2 +- .../ui-calendar/src/Calendar/v2/Day/props.ts | 7 +- packages/ui-calendar/src/Calendar/v2/props.ts | 4 +- packages/ui-checkbox/package.json | 2 +- .../src/Checkbox/v2/CheckboxFacade/props.ts | 4 +- .../src/Checkbox/v2/ToggleFacade/props.ts | 4 +- .../ui-checkbox/src/Checkbox/v2/index.tsx | 11 +- packages/ui-checkbox/src/Checkbox/v2/props.ts | 9 +- .../src/ColorContrast/v2/props.ts | 11 +- .../src/ColorIndicator/v2/props.ts | 11 +- .../src/ColorMixer/v2/ColorPalette/props.ts | 8 +- .../src/ColorMixer/v2/RGBAInput/props.ts | 8 +- .../src/ColorMixer/v2/Slider/props.ts | 8 +- .../src/ColorPicker/v2/index.tsx | 14 +- .../src/ColorPicker/v2/props.ts | 11 +- .../src/ColorPreset/v2/props.ts | 11 +- packages/ui-drawer-layout/package.json | 2 +- .../DrawerLayout/v2/DrawerContent/props.ts | 11 +- .../src/DrawerLayout/v2/DrawerTray/props.ts | 7 +- packages/ui-drilldown/package.json | 2 +- .../ui-expandable/src/Expandable/props.ts | 2 +- packages/ui-file-drop/package.json | 2 +- .../ui-file-drop/src/FileDrop/v2/props.ts | 8 +- packages/ui-flex/package.json | 2 +- packages/ui-flex/src/Flex/v2/props.ts | 4 +- packages/ui-form-field/package.json | 2 +- .../src/FormFieldGroup/v2/props.ts | 3 +- .../src/FormFieldGroup/v2/styles.ts | 6 +- .../v2/__tests__/FormFieldLabel.test.tsx | 78 ----- .../src/FormFieldLabel/v2/index.tsx | 95 ------ .../src/FormFieldLabel/v2/props.ts | 49 --- .../src/FormFieldLabel/v2/styles.ts | 74 ----- .../src/FormFieldLabel/v2/theme.ts | 56 ---- .../src/FormFieldMessages/v2/props.ts | 7 +- .../src/FormFieldMessages/v2/styles.ts | 3 +- packages/ui-form-field/src/exports/b.ts | 2 - packages/ui-grid/package.json | 2 +- packages/ui-grid/src/Grid/v2/props.ts | 5 +- packages/ui-grid/src/GridCol/v2/props.ts | 5 +- packages/ui-grid/src/GridRow/v2/props.ts | 5 +- packages/ui-heading/package.json | 2 +- packages/ui-heading/src/Heading/v2/props.ts | 4 +- packages/ui-instructure/package.json | 2 +- packages/ui-link/package.json | 2 +- packages/ui-link/src/Link/v2/props.ts | 4 +- packages/ui-list/package.json | 2 +- .../src/InlineList/v2/InlineListItem/props.ts | 11 +- .../ui-list/src/List/v2/ListItem/props.ts | 8 +- packages/ui-list/src/List/v2/props.ts | 5 +- packages/ui-menu/package.json | 2 +- .../ui-menu/src/Menu/v2/MenuItem/props.ts | 4 +- .../src/Menu/v2/MenuItemGroup/props.ts | 8 +- .../src/Menu/v2/MenuItemSeparator/props.ts | 11 +- packages/ui-menu/src/Menu/v2/props.ts | 5 +- packages/ui-metric/package.json | 4 +- packages/ui-metric/src/Metric/v2/props.ts | 9 +- packages/ui-modal/package.json | 2 +- .../ui-modal/src/Modal/v2/ModalBody/props.ts | 4 +- .../src/Modal/v2/ModalFooter/props.ts | 11 +- .../src/Modal/v2/ModalHeader/props.ts | 11 +- packages/ui-modal/src/Modal/v2/props.ts | 4 +- packages/ui-motion/package.json | 2 +- packages/ui-navigation/package.json | 2 +- .../ui-navigation/src/AppNav/v2/Item/props.ts | 4 +- packages/ui-navigation/src/AppNav/v2/props.ts | 8 +- packages/ui-number-input/package.json | 2 +- packages/ui-options/package.json | 2 +- .../ui-options/src/Options/v2/Item/props.ts | 7 +- .../src/Options/v2/Separator/props.ts | 7 +- packages/ui-options/src/Options/v2/props.ts | 4 +- packages/ui-overlays/package.json | 2 +- packages/ui-pages/package.json | 2 +- .../v2/PaginationPageInput/props.ts | 7 +- packages/ui-pill/src/Pill/v2/props.ts | 4 +- packages/ui-popover/package.json | 2 +- packages/ui-popover/src/Popover/v2/props.ts | 6 +- packages/ui-position/package.json | 2 +- packages/ui-progress/package.json | 2 +- .../ui-progress/src/ProgressBar/v2/props.ts | 7 +- .../src/ProgressCircle/v2/props.ts | 7 +- packages/ui-radio-input/package.json | 4 +- packages/ui-range-input/package.json | 2 +- .../ui-range-input/src/RangeInput/v2/props.ts | 12 +- packages/ui-rating/package.json | 2 +- packages/ui-select/package.json | 2 +- packages/ui-side-nav-bar/package.json | 2 +- .../src/SideNavBar/v2/SideNavBarItem/props.ts | 7 +- .../src/SideNavBar/v2/props.ts | 8 +- .../src/SourceCodeEditor/v2/props.ts | 8 +- packages/ui-spinner/package.json | 2 +- packages/ui-svg-images/package.json | 2 +- packages/ui-table/package.json | 2 +- packages/ui-tabs/package.json | 2 +- packages/ui-tabs/src/Tabs/v2/Panel/props.ts | 8 +- packages/ui-tabs/src/Tabs/v2/Tab/props.ts | 9 +- packages/ui-tabs/src/Tabs/v2/props.ts | 5 +- packages/ui-tag/package.json | 2 +- packages/ui-tag/src/Tag/v2/props.ts | 5 +- packages/ui-text-area/package.json | 2 +- .../ui-text-input/src/TextInput/v2/props.ts | 11 +- .../ui-text-input/src/TextInput/v2/theme.ts | 84 ----- packages/ui-text/package.json | 4 +- packages/ui-text/src/Text/v2/props.ts | 4 +- packages/ui-toggle-details/package.json | 2 +- .../src/ToggleDetails/v2/props.ts | 11 +- .../src/ToggleGroup/v2/props.ts | 6 +- packages/ui-tooltip/package.json | 2 +- packages/ui-tooltip/src/Tooltip/v2/props.ts | 4 +- packages/ui-top-nav-bar/package.json | 2 +- packages/ui-tray/package.json | 2 +- packages/ui-tray/src/Tray/v2/props.ts | 4 +- packages/ui-tree-browser/package.json | 2 +- .../src/TreeBrowser/v2/TreeButton/props.ts | 7 +- .../TreeBrowser/v2/TreeCollection/props.ts | 7 +- .../src/TreeBrowser/v2/TreeNode/props.ts | 7 +- .../src/TreeBrowser/v2/props.ts | 4 +- packages/ui-truncate-text/package.json | 2 +- .../src/TruncateText/v2/props.ts | 7 +- packages/ui-view/package.json | 4 +- packages/ui-view/src/ContextView/v2/props.ts | 7 +- packages/ui-view/src/View/v2/props.ts | 6 +- packages/ui/src/v11_7.ts | 2 - pnpm-lock.yaml | 294 +++++++++--------- 137 files changed, 480 insertions(+), 891 deletions(-) delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/__tests__/FormFieldLabel.test.tsx delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/index.tsx delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/props.ts delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/styles.ts delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/theme.ts delete mode 100644 packages/ui-text-input/src/TextInput/v2/theme.ts diff --git a/packages/ui-alerts/src/Alert/v2/props.ts b/packages/ui-alerts/src/Alert/v2/props.ts index e93aefe82c..33a1966d06 100644 --- a/packages/ui-alerts/src/Alert/v2/props.ts +++ b/packages/ui-alerts/src/Alert/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { AlertTheme, Renderable } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type AlertOwnProps = { @@ -116,7 +117,7 @@ type PropKeys = keyof AlertOwnProps type AllowedPropKeys = Readonly> type AlertProps = AlertOwnProps & - WithStyleProps & + WithStyleProps, AlertStyle> & WithDeterministicIdProps type AlertStyle = ComponentStyle< diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json index 9fd06afd3f..922af43e7c 100644 --- a/packages/ui-avatar/package.json +++ b/packages/ui-avatar/package.json @@ -28,13 +28,13 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-badge/package.json b/packages/ui-badge/package.json index 983c17acce..79b0892241 100644 --- a/packages/ui-badge/package.json +++ b/packages/ui-badge/package.json @@ -29,12 +29,12 @@ "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-badge/src/Badge/v2/props.ts b/packages/ui-badge/src/Badge/v2/props.ts index a8812c69fc..dfdda5271d 100644 --- a/packages/ui-badge/src/Badge/v2/props.ts +++ b/packages/ui-badge/src/Badge/v2/props.ts @@ -23,12 +23,13 @@ */ import React from 'react' -import type { AsElementType, BadgeTheme } from '@instructure/shared-types' +import type { AsElementType } from '@instructure/shared-types' import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PlacementPropValues } from '@instructure/ui-position' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { PropsWithChildren } from 'react' @@ -87,7 +88,7 @@ type PropKeys = keyof BadgeOwnProps type AllowedPropKeys = Readonly> type BadgeProps = BadgeOwnProps & - WithStyleProps & + WithStyleProps, BadgeStyle> & WithDeterministicIdProps type BadgeStyle = ComponentStyle<'badge' | 'wrapper'> diff --git a/packages/ui-billboard/package.json b/packages/ui-billboard/package.json index 8f6ac3a5ba..bcdd8f83cd 100644 --- a/packages/ui-billboard/package.json +++ b/packages/ui-billboard/package.json @@ -29,6 +29,7 @@ "@instructure/ui-heading": "workspace:*", "@instructure/ui-img": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { @@ -36,7 +37,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-billboard/src/Billboard/v2/props.ts b/packages/ui-billboard/src/Billboard/v2/props.ts index 852e7876c9..085b147a46 100644 --- a/packages/ui-billboard/src/Billboard/v2/props.ts +++ b/packages/ui-billboard/src/Billboard/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - BillboardTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { ViewProps } from '@instructure/ui-view/latest' @@ -102,7 +102,7 @@ type PropKeys = keyof BillboardOwnProps type AllowedPropKeys = Readonly> type BillboardProps = BillboardOwnProps & - WithStyleProps & + WithStyleProps, BillboardStyle> & OtherHTMLAttributes type BillboardStyle = ComponentStyle< diff --git a/packages/ui-breadcrumb/package.json b/packages/ui-breadcrumb/package.json index fd5615ffe8..482f990f74 100644 --- a/packages/ui-breadcrumb/package.json +++ b/packages/ui-breadcrumb/package.json @@ -29,6 +29,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-link": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-truncate-text": "workspace:*", "@instructure/ui-utils": "workspace:*", @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-buttons/package.json b/packages/ui-buttons/package.json index 6206849548..086e9bc7e6 100644 --- a/packages/ui-buttons/package.json +++ b/packages/ui-buttons/package.json @@ -34,6 +34,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", @@ -42,7 +43,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-buttons/src/BaseButton/v2/props.ts b/packages/ui-buttons/src/BaseButton/v2/props.ts index d07fd66070..226cda5e22 100644 --- a/packages/ui-buttons/src/BaseButton/v2/props.ts +++ b/packages/ui-buttons/src/BaseButton/v2/props.ts @@ -29,10 +29,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ToProp, AsElementType, - BaseButtonTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { Cursor } from '@instructure/shared-types' @@ -179,7 +179,7 @@ type PropKeys = keyof BaseButtonOwnProps type AllowedPropKeys = Readonly> type BaseButtonProps = BaseButtonOwnProps & - WithStyleProps & + WithStyleProps, BaseButtonStyle> & OtherHTMLAttributes & ToProp diff --git a/packages/ui-buttons/src/Button/v2/props.ts b/packages/ui-buttons/src/Button/v2/props.ts index b2c71708aa..5458306516 100644 --- a/packages/ui-buttons/src/Button/v2/props.ts +++ b/packages/ui-buttons/src/Button/v2/props.ts @@ -24,10 +24,10 @@ import React from 'react' import type { Spacing, WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ToProp, AsElementType, - BaseButtonTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { Cursor } from '@instructure/shared-types' @@ -133,7 +133,7 @@ type PropKeys = keyof ButtonOwnProps type AllowedPropKeys = Readonly> type ButtonProps = ButtonOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes & ToProp const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-buttons/src/CloseButton/v2/props.ts b/packages/ui-buttons/src/CloseButton/v2/props.ts index a9bf83780e..ec5660b1fa 100644 --- a/packages/ui-buttons/src/CloseButton/v2/props.ts +++ b/packages/ui-buttons/src/CloseButton/v2/props.ts @@ -28,10 +28,10 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ToProp, AsElementType, - BaseButtonTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { Cursor } from '@instructure/shared-types' @@ -122,7 +122,10 @@ type PropKeys = keyof CloseButtonOwnProps type AllowedPropKeys = Readonly> type CloseButtonProps = CloseButtonOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + CloseButtonStyle + > & OtherHTMLAttributes & ToProp diff --git a/packages/ui-buttons/src/CondensedButton/v2/props.ts b/packages/ui-buttons/src/CondensedButton/v2/props.ts index 126e7dee7d..3ab96b68cc 100644 --- a/packages/ui-buttons/src/CondensedButton/v2/props.ts +++ b/packages/ui-buttons/src/CondensedButton/v2/props.ts @@ -24,10 +24,10 @@ import React from 'react' import type { Spacing, WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ToProp, AsElementType, - BaseButtonTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { Cursor } from '@instructure/shared-types' @@ -110,7 +110,7 @@ type PropKeys = keyof CondensedButtonOwnProps type AllowedPropKeys = Readonly> type CondensedButtonProps = CondensedButtonOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes & ToProp diff --git a/packages/ui-buttons/src/IconButton/v2/props.ts b/packages/ui-buttons/src/IconButton/v2/props.ts index c0bc8a46d2..163a8c863e 100644 --- a/packages/ui-buttons/src/IconButton/v2/props.ts +++ b/packages/ui-buttons/src/IconButton/v2/props.ts @@ -25,10 +25,10 @@ import { ReactNode } from 'react' import type { Spacing, WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ToProp, AsElementType, - BaseButtonTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -139,7 +139,7 @@ type PropKeys = keyof IconButtonOwnProps type AllowedPropKeys = Readonly> type IconButtonProps = IconButtonOwnProps & - WithStyleProps & + WithStyleProps, null> & OtherHTMLAttributes & ToProp const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-byline/package.json b/packages/ui-byline/package.json index ecd4bc1314..6569d4a0fe 100644 --- a/packages/ui-byline/package.json +++ b/packages/ui-byline/package.json @@ -27,13 +27,13 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-calendar/package.json b/packages/ui-calendar/package.json index b9f21022d1..3b7711c538 100644 --- a/packages/ui-calendar/package.json +++ b/packages/ui-calendar/package.json @@ -33,6 +33,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-simple-select": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -40,7 +41,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-calendar/src/Calendar/v2/Day/props.ts b/packages/ui-calendar/src/Calendar/v2/Day/props.ts index 9925a48f98..cd2c5da3c2 100644 --- a/packages/ui-calendar/src/Calendar/v2/Day/props.ts +++ b/packages/ui-calendar/src/Calendar/v2/Day/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - CalendarDayTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { KeyboardEvent, MouseEvent } from 'react' import type { ViewProps } from '@instructure/ui-view/latest' import { Renderable } from '@instructure/shared-types' @@ -104,7 +104,10 @@ type PropKeys = keyof CalendarDayOwnProps type AllowedPropKeys = Readonly> type CalendarDayProps = CalendarDayOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + CalendarDayStyle + > & OtherHTMLAttributes type CalendarDayStyle = ComponentStyle<'calendarDay' | 'day'> diff --git a/packages/ui-calendar/src/Calendar/v2/props.ts b/packages/ui-calendar/src/Calendar/v2/props.ts index c2d1397784..054998cb17 100644 --- a/packages/ui-calendar/src/Calendar/v2/props.ts +++ b/packages/ui-calendar/src/Calendar/v2/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - CalendarTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { ReactElement } from 'react' import type { CalendarDayProps } from './Day/props' import { Renderable } from '@instructure/shared-types' @@ -172,7 +172,7 @@ type PropKeys = keyof CalendarOwnProps type AllowedPropKeys = Readonly> type CalendarProps = CalendarOwnProps & - WithStyleProps & + WithStyleProps, CalendarStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-checkbox/package.json b/packages/ui-checkbox/package.json index 3d8c0a26a4..53263e63b0 100644 --- a/packages/ui-checkbox/package.json +++ b/packages/ui-checkbox/package.json @@ -32,6 +32,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-svg-images": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -41,7 +42,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts index 2a7efda6d7..0d3cdf3704 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { CheckboxFacadeTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type CheckboxFacadeOwnProps = { children: React.ReactNode @@ -48,7 +48,7 @@ type PropKeys = keyof CheckboxFacadeOwnProps type AllowedPropKeys = Readonly> type CheckboxFacadeProps = CheckboxFacadeOwnProps & - WithStyleProps + WithStyleProps, CheckboxFacadeStyle> type CheckboxFacadeStyle = ComponentStyle<'checkboxFacade' | 'facade' | 'label'> const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts index 281331aea8..03360d7271 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts @@ -23,8 +23,8 @@ */ import React from 'react' -import type { ToggleFacadeTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ToggleFacadeOwnProps = { children: React.ReactNode @@ -46,7 +46,7 @@ type PropKeys = keyof ToggleFacadeOwnProps type AllowedPropKeys = Readonly> type ToggleFacadeProps = ToggleFacadeOwnProps & - WithStyleProps + WithStyleProps, ToggleFacadeStyle> type ToggleFacadeStyle = ComponentStyle< 'toggleFacade' | 'facade' | 'icon' | 'iconToggle' | 'label' diff --git a/packages/ui-checkbox/src/Checkbox/v2/index.tsx b/packages/ui-checkbox/src/Checkbox/v2/index.tsx index 39c5adfbe7..fadae60ae1 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/index.tsx +++ b/packages/ui-checkbox/src/Checkbox/v2/index.tsx @@ -42,11 +42,6 @@ import generateStyle from './styles' import { allowedProps } from './props' import type { CheckboxProps, CheckboxState } from './props' -import type { - CheckboxFacadeTheme, - ToggleFacadeTheme -} from '@instructure/shared-types' - /** --- category: components @@ -231,7 +226,9 @@ class Checkbox extends Component { checked={this.checked} readOnly={readOnly} labelPlacement={labelPlacement} - themeOverride={themeOverride as Partial} + // TODO: This will lead to buggy overrides, `Toggle`'s styles should + // TODO: be a superset of Checkbox's styles + themeOverride={themeOverride as any} invalid={this.invalid} > {label} @@ -256,7 +253,7 @@ class Checkbox extends Component { checked={this.checked} readOnly={readOnly} indeterminate={indeterminate} - themeOverride={themeOverride as Partial} + themeOverride={themeOverride} invalid={this.invalid} > {label} diff --git a/packages/ui-checkbox/src/Checkbox/v2/props.ts b/packages/ui-checkbox/src/Checkbox/v2/props.ts index 349de7069e..cc66568be5 100644 --- a/packages/ui-checkbox/src/Checkbox/v2/props.ts +++ b/packages/ui-checkbox/src/Checkbox/v2/props.ts @@ -23,12 +23,9 @@ */ import type { FormMessage } from '@instructure/ui-form-field/latest' -import type { - CheckboxFacadeTheme, - OtherHTMLAttributes, - ToggleFacadeTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type CheckboxOwnProps = { @@ -85,7 +82,7 @@ type PropKeys = keyof CheckboxOwnProps type AllowedPropKeys = Readonly> type CheckboxProps = CheckboxOwnProps & - WithStyleProps & + WithStyleProps, CheckboxStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-color-picker/src/ColorContrast/v2/props.ts b/packages/ui-color-picker/src/ColorContrast/v2/props.ts index c8abd09b60..3dac7c92be 100644 --- a/packages/ui-color-picker/src/ColorContrast/v2/props.ts +++ b/packages/ui-color-picker/src/ColorContrast/v2/props.ts @@ -24,10 +24,8 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorContrastTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type HeadingLevel = U @@ -134,7 +132,10 @@ type PropKeys = keyof ColorContrastOwnProps type AllowedPropKeys = Readonly> type ColorContrastProps = ColorContrastOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorContrastStyle + > & OtherHTMLAttributes type ColorContrastStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts index d404dae017..7fd1d3aeb8 100644 --- a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts +++ b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorIndicatorTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ColorIndicatorOwnProps = { /** @@ -48,7 +46,10 @@ type PropKeys = keyof ColorIndicatorOwnProps type AllowedPropKeys = Readonly> type ColorIndicatorProps = ColorIndicatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorIndicatorStyle + > & OtherHTMLAttributes type ColorIndicatorStyle = ComponentStyle<'colorIndicator'> diff --git a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts index 4ad7985376..63e98992c5 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts @@ -23,11 +23,9 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' -import type { - OtherHTMLAttributes, - ColorMixerPaletteTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { HSVType } from '@instructure/ui-color-utils' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -52,7 +50,7 @@ type PropKeys = keyof ColorPaletteOwnProps type AllowedPropKeys = Readonly> type ColorPaletteProps = ColorPaletteOwnProps & - WithStyleProps & + WithStyleProps, ColorPaletteStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts index a815a47fb2..fa95ee2d84 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts @@ -23,11 +23,9 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' -import type { - OtherHTMLAttributes, - ColorMixerRGBAInputTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { RGBAType } from '@instructure/ui-color-utils' type RGBAInputOwnProps = { @@ -53,7 +51,7 @@ type PropKeys = keyof RGBAInputOwnProps type AllowedPropKeys = Readonly> type RGBAInputProps = RGBAInputOwnProps & - WithStyleProps & + WithStyleProps, RGBAInputStyle> & OtherHTMLAttributes type RGBAInputStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts index 0a12bec596..706241d5c1 100644 --- a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts +++ b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorMixerSliderTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type SliderOwnProps = { isColorSlider?: boolean @@ -46,7 +44,7 @@ type PropKeys = keyof SliderOwnProps type AllowedPropKeys = Readonly> type SliderProps = SliderOwnProps & - WithStyleProps & + WithStyleProps, SliderStyle> & OtherHTMLAttributes type SliderStyleProps = { diff --git a/packages/ui-color-picker/src/ColorPicker/v2/index.tsx b/packages/ui-color-picker/src/ColorPicker/v2/index.tsx index 8ac02b0cde..61fb52d187 100644 --- a/packages/ui-color-picker/src/ColorPicker/v2/index.tsx +++ b/packages/ui-color-picker/src/ColorPicker/v2/index.tsx @@ -24,10 +24,7 @@ import { Component } from 'react' -import { - withStyle, - InstUISettingsProvider -} from '@instructure/emotion' +import { withStyle, InstUISettingsProvider } from '@instructure/emotion' import { warn, error } from '@instructure/console' import { omitProps } from '@instructure/ui-react-utils' import { isValid, contrast as getContrast } from '@instructure/ui-color-utils' @@ -381,7 +378,11 @@ class ColorPicker extends Component { if (minContrast >= contrast) { return (

- {checkContrast.isStrict ? : } + {checkContrast.isStrict ? ( + + ) : ( + + )}
) } @@ -473,7 +474,7 @@ class ColorPicker extends Component { size="small" shape="circle" width="auto" - renderIcon={} + renderIcon={} /> @@ -709,7 +710,6 @@ class ColorPicker extends Component { display="inline-block" width={width} placeholder={placeholderText} - themeOverride={{ padding: '' }} renderAfterInput={this.renderAfterInput()} renderBeforeInput={this.renderBeforeInput()} inputContainerRef={this.handleInputContainerRef} diff --git a/packages/ui-color-picker/src/ColorPicker/v2/props.ts b/packages/ui-color-picker/src/ColorPicker/v2/props.ts index acd94ad886..d61bf8afce 100644 --- a/packages/ui-color-picker/src/ColorPicker/v2/props.ts +++ b/packages/ui-color-picker/src/ColorPicker/v2/props.ts @@ -29,10 +29,8 @@ import type { ComponentStyle, Spacing } from '@instructure/emotion' -import type { - ColorPickerTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ContrastStrength = 'min' | 'mid' | 'max' type ColorPickerOwnProps = { @@ -253,7 +251,10 @@ type PropKeys = keyof ColorPickerOwnProps type AllowedPropKeys = Readonly> type ColorPickerProps = ColorPickerOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorPickerStyle + > & OtherHTMLAttributes type ColorPickerStyle = ComponentStyle< diff --git a/packages/ui-color-picker/src/ColorPreset/v2/props.ts b/packages/ui-color-picker/src/ColorPreset/v2/props.ts index 31e132d0ab..adaeadf4c6 100644 --- a/packages/ui-color-picker/src/ColorPreset/v2/props.ts +++ b/packages/ui-color-picker/src/ColorPreset/v2/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - ColorPresetTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { RGBAType } from '@instructure/ui-color-utils' type ContrastStrength = 'min' | 'mid' | 'max' @@ -125,7 +123,10 @@ type PropKeys = keyof ColorPresetOwnProps type AllowedPropKeys = Readonly> type ColorPresetProps = ColorPresetOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ColorPresetStyle + > & OtherHTMLAttributes type ColorPresetStyle = ComponentStyle< diff --git a/packages/ui-drawer-layout/package.json b/packages/ui-drawer-layout/package.json index e1839edd58..21fb14774d 100644 --- a/packages/ui-drawer-layout/package.json +++ b/packages/ui-drawer-layout/package.json @@ -35,6 +35,7 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -42,7 +43,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-buttons": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts index eef56c8421..ce202908ee 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts @@ -24,11 +24,9 @@ import { AriaRole } from 'react' -import type { - DrawerLayoutContentTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type DrawerContentSize = { width: number; height?: number } @@ -52,7 +50,10 @@ type PropKeys = keyof DrawerLayoutContentOwnProps type AllowedPropKeys = Readonly> type DrawerLayoutContentProps = DrawerLayoutContentOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + DrawerLayoutContentStyle + > & OtherHTMLAttributes type DrawerLayoutContentStyle = ComponentStyle<'drawerContent'> diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts index c6ea1b1ee6..decbe7dcdf 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts @@ -26,8 +26,8 @@ import React from 'react' import type { PositionMountNode } from '@instructure/ui-position' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { ComponentStyle, WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { - DrawerLayoutTrayTheme, LiveRegion, OtherHTMLAttributes, UIElement @@ -183,7 +183,10 @@ type PropKeys = keyof DrawerLayoutTrayOwnProps type AllowedPropKeys = Readonly> type DrawerLayoutTrayProps = DrawerLayoutTrayOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + DrawerLayoutTrayStyle + > & OtherHTMLAttributes type DrawerLayoutTrayStyle = ComponentStyle< diff --git a/packages/ui-drilldown/package.json b/packages/ui-drilldown/package.json index d055b01a34..4ffba875c0 100644 --- a/packages/ui-drilldown/package.json +++ b/packages/ui-drilldown/package.json @@ -34,6 +34,7 @@ "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-selectable": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -42,7 +43,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-expandable/src/Expandable/props.ts b/packages/ui-expandable/src/Expandable/props.ts index be8c17a8ee..4d32d12da1 100644 --- a/packages/ui-expandable/src/Expandable/props.ts +++ b/packages/ui-expandable/src/Expandable/props.ts @@ -24,7 +24,7 @@ import { JSX } from 'react' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' -import type { ViewProps } from '@instructure/ui-view' +import type { ViewProps } from '@instructure/ui-view/latest' type ExpandableToggleProps = (props?: { onClick?: ( diff --git a/packages/ui-file-drop/package.json b/packages/ui-file-drop/package.json index 1d34bfa7dc..5e69105c57 100644 --- a/packages/ui-file-drop/package.json +++ b/packages/ui-file-drop/package.json @@ -30,6 +30,7 @@ "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -38,7 +39,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-file-drop/src/FileDrop/v2/props.ts b/packages/ui-file-drop/src/FileDrop/v2/props.ts index 1462279c13..8e9e9633ee 100644 --- a/packages/ui-file-drop/src/FileDrop/v2/props.ts +++ b/packages/ui-file-drop/src/FileDrop/v2/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - FileDropTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' type RenderLabelProps = { @@ -173,7 +171,7 @@ type PropKeys = keyof FileDropOwnProps type AllowedPropKeys = Readonly> type FileDropProps = FileDropOwnProps & - WithStyleProps & + WithStyleProps, FileDropStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-flex/package.json b/packages/ui-flex/package.json index 8d4d229273..dbea5f8f73 100644 --- a/packages/ui-flex/package.json +++ b/packages/ui-flex/package.json @@ -28,12 +28,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-flex/src/Flex/v2/props.ts b/packages/ui-flex/src/Flex/v2/props.ts index 4fe5925cd5..2dbc4817f8 100644 --- a/packages/ui-flex/src/Flex/v2/props.ts +++ b/packages/ui-flex/src/Flex/v2/props.ts @@ -24,7 +24,6 @@ import type { AsElementType, - FlexTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -33,6 +32,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type FlexOwnProps = { /** @@ -127,7 +127,7 @@ type PropKeys = keyof FlexOwnProps type AllowedPropKeys = Readonly> type FlexProps = FlexOwnProps & - WithStyleProps & + WithStyleProps, FlexStyle> & OtherHTMLAttributes type FlexStyle = ComponentStyle<'flex'> diff --git a/packages/ui-form-field/package.json b/packages/ui-form-field/package.json index 584c6a2194..acbce74b29 100644 --- a/packages/ui-form-field/package.json +++ b/packages/ui-form-field/package.json @@ -32,13 +32,13 @@ "@instructure/ui-grid": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts index 5bae4f33a0..87320c6d14 100644 --- a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts +++ b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts @@ -24,7 +24,6 @@ import type { AsElementType, - FormFieldGroupTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' @@ -73,7 +72,7 @@ type PropKeys = keyof FormFieldGroupOwnProps type AllowedPropKeys = Readonly> type FormFieldGroupProps = FormFieldGroupOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes & // Adding other props that can be passed to FormFieldLayout, // excluding the ones we set manually diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts index f2d9ae2748..5ec5d0fb6e 100644 --- a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts @@ -29,14 +29,12 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props' * private: true * --- * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. + * @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 = ( - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - _componentTheme: {}, + _componentTheme: never, props: FormFieldGroupProps ): FormFieldGroupStyle => { const { disabled } = props diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/__tests__/FormFieldLabel.test.tsx b/packages/ui-form-field/src/FormFieldLabel/v2/__tests__/FormFieldLabel.test.tsx deleted file mode 100644 index ee40eb2546..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/__tests__/FormFieldLabel.test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -/* - * 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 { render } from '@testing-library/react' -import { vi } from 'vitest' -import { runAxeCheck } from '@instructure/ui-axe-check' -import '@testing-library/jest-dom' - -import { FormFieldLabel } from '../index' - -describe('', () => { - let consoleWarningMock: ReturnType - let consoleErrorMock: ReturnType - - beforeEach(() => { - // Mocking console to prevent test output pollution and expect for messages - consoleWarningMock = vi - .spyOn(console, 'warn') - .mockImplementation(() => {}) as any - consoleErrorMock = vi - .spyOn(console, 'error') - .mockImplementation(() => {}) as any - }) - - afterEach(() => { - consoleWarningMock.mockRestore() - consoleErrorMock.mockRestore() - }) - - it('should render', () => { - const { container } = render(Foo) - - const formFieldLabel = container.querySelector( - "span[class$='-formFieldLabel']" - ) - - expect(formFieldLabel).toBeInTheDocument() - expect(formFieldLabel).toHaveTextContent('Foo') - }) - - it('should render as specified via the `as` prop', () => { - const { container } = render(Foo) - - const formFieldLabel = container.querySelector('li') - - expect(formFieldLabel).toBeInTheDocument() - expect(formFieldLabel).toHaveTextContent('Foo') - }) - - it('should meet a11y standards', async () => { - const { container } = render(Foo) - - const axeCheck = await runAxeCheck(container) - - expect(axeCheck).toBe(true) - }) -}) diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx b/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx deleted file mode 100644 index 9fef2b322e..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * 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 { Component } from 'react' - -import { omitProps, getElementType } from '@instructure/ui-react-utils' -import { withStyleLegacy as withStyle } from '@instructure/emotion' - -import generateStyle from './styles' -import generateComponentTheme from './theme' - -import { allowedProps } from './props' -import type { FormFieldLabelProps } from './props' - -/** ---- -parent: FormField ---- - -This is a helper component that is used by most of the custom form -components. In most cases it shouldn't be used directly. - -```js ---- -type: example ---- -Hello -``` - - @deprecated since version 10. This is an internal component that will be - removed in the future -**/ -@withStyle(generateStyle, generateComponentTheme) -class FormFieldLabel extends Component { - static readonly componentId = 'FormFieldLabel' - - static allowedProps = allowedProps - static defaultProps = { - as: 'span' - } as const - - ref: Element | null = null - - handleRef = (el: Element | null) => { - this.ref = el - } - - componentDidMount() { - this.props.makeStyles?.() - } - - componentDidUpdate() { - this.props.makeStyles?.() - } - - render() { - const ElementType = getElementType(FormFieldLabel, this.props) - - const { styles, children } = this.props - - return ( - - {children} - - ) - } -} - -export default FormFieldLabel -export { FormFieldLabel } diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/props.ts b/packages/ui-form-field/src/FormFieldLabel/v2/props.ts deleted file mode 100644 index cfb4ac4de7..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/props.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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 { - AsElementType, - FormFieldLabelTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' - -type FormFieldLabelOwnProps = { - children: React.ReactNode - as?: AsElementType -} - -type PropKeys = keyof FormFieldLabelOwnProps - -type AllowedPropKeys = Readonly> - -type FormFieldLabelProps = FormFieldLabelOwnProps & - WithStyleProps & - OtherHTMLAttributes - -type FormFieldLabelStyle = ComponentStyle<'formFieldLabel'> -const allowedProps: AllowedPropKeys = ['as', 'children'] - -export type { FormFieldLabelProps, FormFieldLabelStyle } -export { allowedProps } diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts b/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts deleted file mode 100644 index 4900c1a92e..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* - * 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 { hasVisibleChildren } from '@instructure/ui-a11y-utils' - -import type { FormFieldLabelTheme } from '@instructure/shared-types' -import type { FormFieldLabelProps, FormFieldLabelStyle } 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: FormFieldLabelTheme, - props: FormFieldLabelProps -): FormFieldLabelStyle => { - const { children } = props - - const hasContent = hasVisibleChildren(children) - - const labelStyles = { - all: 'initial', - display: 'block', - ...(hasContent && { - color: componentTheme.color, - fontFamily: componentTheme.fontFamily, - fontWeight: componentTheme.fontWeight, - fontSize: componentTheme.fontSize, - lineHeight: componentTheme.lineHeight, - margin: 0, - textAlign: 'inherit' - }) - } - - return { - formFieldLabel: { - label: 'formFieldLabel', - ...labelStyles, - - // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping) - '&:is(label)': labelStyles, - '&:-webkit-any(label)': labelStyles - } - } -} - -export default generateStyle diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts b/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts deleted file mode 100644 index e30f82a61d..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts +++ /dev/null @@ -1,56 +0,0 @@ -/* - * 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, ThemeSpecificStyle } from '@instructure/ui-themes' -import { FormFieldLabelTheme } 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): FormFieldLabelTheme => { - const { colors, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: FormFieldLabelTheme = { - color: colors?.contrasts?.grey125125, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightBold, - fontSize: typography?.fontSizeMedium, - lineHeight: typography?.lineHeightFit - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts index 02d98f198b..359ec11f42 100644 --- a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts +++ b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts @@ -22,10 +22,7 @@ * SOFTWARE. */ -import type { - FormFieldMessagesTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' import type { FormMessage } from '../../utils/v1/FormPropTypes' @@ -49,7 +46,7 @@ type PropKeys = keyof FormFieldMessagesOwnProps type AllowedPropKeys = Readonly> type FormFieldMessagesProps = FormFieldMessagesOwnProps & - WithStyleProps & + WithStyleProps & OtherHTMLAttributes type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'> diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts index 99d55b0dfb..d5d4325132 100644 --- a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts +++ b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts @@ -22,7 +22,6 @@ * SOFTWARE. */ -import type { FormFieldMessagesTheme } from '@instructure/shared-types' import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props' /** @@ -35,7 +34,7 @@ import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - _componentTheme: FormFieldMessagesTheme, + _componentTheme: never, props: FormFieldMessagesProps ): FormFieldMessagesStyle => { return { diff --git a/packages/ui-form-field/src/exports/b.ts b/packages/ui-form-field/src/exports/b.ts index 8a98cdd249..5c66987903 100644 --- a/packages/ui-form-field/src/exports/b.ts +++ b/packages/ui-form-field/src/exports/b.ts @@ -23,7 +23,6 @@ */ export { FormField } from '../FormField/v2' -export { FormFieldLabel } from '../FormFieldLabel/v2' export { FormFieldMessage } from '../FormFieldMessage/v2' export { FormFieldMessages } from '../FormFieldMessages/v2' export { FormFieldLayout } from '../FormFieldLayout/v2' @@ -36,7 +35,6 @@ export type { } from '../utils/v1/FormPropTypes' export type { FormFieldOwnProps, FormFieldProps } from '../FormField/v2/props' -export type { FormFieldLabelProps } from '../FormFieldLabel/v2/props' export type { FormFieldMessageProps } from '../FormFieldMessage/v2/props' export type { FormFieldMessagesProps } from '../FormFieldMessages/v2/props' export type { FormFieldLayoutProps } from '../FormFieldLayout/v2/props' diff --git a/packages/ui-grid/package.json b/packages/ui-grid/package.json index 16f0f82c45..1f588ca463 100644 --- a/packages/ui-grid/package.json +++ b/packages/ui-grid/package.json @@ -29,12 +29,12 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-a11y-content": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-grid/src/Grid/v2/props.ts b/packages/ui-grid/src/Grid/v2/props.ts index f226df96b3..b9e1053cba 100644 --- a/packages/ui-grid/src/Grid/v2/props.ts +++ b/packages/ui-grid/src/Grid/v2/props.ts @@ -22,8 +22,9 @@ * SOFTWARE. */ -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type GridOwnProps = { @@ -44,7 +45,7 @@ type PropKeys = keyof GridOwnProps type AllowedPropKeys = Readonly> type GridProps = GridOwnProps & - WithStyleProps & + WithStyleProps, GridStyle> & OtherHTMLAttributes type GridStyle = ComponentStyle<'grid'> diff --git a/packages/ui-grid/src/GridCol/v2/props.ts b/packages/ui-grid/src/GridCol/v2/props.ts index 8820e80080..9472e6e316 100644 --- a/packages/ui-grid/src/GridCol/v2/props.ts +++ b/packages/ui-grid/src/GridCol/v2/props.ts @@ -23,7 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type ColWidths = 'auto' | number @@ -66,7 +67,7 @@ type PropKeys = keyof GridColOwnProps type AllowedPropKeys = Readonly> type GridColProps = GridColOwnProps & - WithStyleProps & + WithStyleProps, GridColStyle> & OtherHTMLAttributes type GridColStyle = ComponentStyle<'gridCol'> diff --git a/packages/ui-grid/src/GridRow/v2/props.ts b/packages/ui-grid/src/GridRow/v2/props.ts index 9c6f07ae50..1359a6ff24 100644 --- a/packages/ui-grid/src/GridRow/v2/props.ts +++ b/packages/ui-grid/src/GridRow/v2/props.ts @@ -24,8 +24,9 @@ import React from 'react' -import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../../utils/v1/GridTypes' type GridRowOwnProps = { @@ -47,7 +48,7 @@ type PropKeys = keyof GridRowOwnProps type AllowedPropKeys = Readonly> type GridRowProps = GridRowOwnProps & - WithStyleProps & + WithStyleProps, GridRowStyle> & OtherHTMLAttributes type GridRowStyle = ComponentStyle<'gridRow'> diff --git a/packages/ui-heading/package.json b/packages/ui-heading/package.json index 5f5304124b..d546ab276a 100644 --- a/packages/ui-heading/package.json +++ b/packages/ui-heading/package.json @@ -29,12 +29,12 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-heading/src/Heading/v2/props.ts b/packages/ui-heading/src/Heading/v2/props.ts index a6677b3f74..44ab944f4c 100644 --- a/packages/ui-heading/src/Heading/v2/props.ts +++ b/packages/ui-heading/src/Heading/v2/props.ts @@ -25,7 +25,6 @@ import React from 'react' import type { AsElementType, - HeadingTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -34,6 +33,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type HeadingLevel = U @@ -111,7 +111,7 @@ type PropKeys = keyof HeadingOwnProps type AllowedPropKeys = Readonly> type HeadingProps = HeadingOwnProps & - WithStyleProps & + WithStyleProps, HeadingStyle> & OtherHTMLAttributes type HeadingStyle = ComponentStyle< diff --git a/packages/ui-instructure/package.json b/packages/ui-instructure/package.json index 02f2456858..fe395ccbdc 100644 --- a/packages/ui-instructure/package.json +++ b/packages/ui-instructure/package.json @@ -34,13 +34,13 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-text": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-link/package.json b/packages/ui-link/package.json index 1ff9d679c9..8dbe3eaa91 100644 --- a/packages/ui-link/package.json +++ b/packages/ui-link/package.json @@ -32,13 +32,13 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-link/src/Link/v2/props.ts b/packages/ui-link/src/Link/v2/props.ts index feec4b6a22..c7598754da 100644 --- a/packages/ui-link/src/Link/v2/props.ts +++ b/packages/ui-link/src/Link/v2/props.ts @@ -26,7 +26,6 @@ import React from 'react' import type { ToProp, AsElementType, - LinkTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { @@ -34,6 +33,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewOwnProps } from '@instructure/ui-view/latest' import { Renderable } from '@instructure/shared-types' @@ -154,7 +154,7 @@ type LinkState = { } type LinkProps = LinkOwnProps & - WithStyleProps & + WithStyleProps, LinkStyle> & OtherHTMLAttributes & ToProp diff --git a/packages/ui-list/package.json b/packages/ui-list/package.json index d67dcf5953..1dd54c16de 100644 --- a/packages/ui-list/package.json +++ b/packages/ui-list/package.json @@ -28,13 +28,13 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts index 6dbf9b4153..7109b7bc73 100644 --- a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts +++ b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts @@ -29,10 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - InlineListItemTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type InlineListItemOwnProps = { /** @@ -80,7 +78,10 @@ type PropKeys = keyof InlineListItemOwnProps type AllowedPropKeys = Readonly> type InlineListItemProps = InlineListItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + InlineListItemStyle + > & OtherHTMLAttributes type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'> diff --git a/packages/ui-list/src/List/v2/ListItem/props.ts b/packages/ui-list/src/List/v2/ListItem/props.ts index 4875e44bb3..4d05833e4f 100644 --- a/packages/ui-list/src/List/v2/ListItem/props.ts +++ b/packages/ui-list/src/List/v2/ListItem/props.ts @@ -29,10 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - ListItemTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ListItemOwnProps = { /** @@ -76,7 +74,7 @@ type PropKeys = keyof ListItemOwnProps type AllowedPropKeys = Readonly> type ListItemProps = ListItemOwnProps & - WithStyleProps & + WithStyleProps, ListItemStyle> & OtherHTMLAttributes type ListItemStyle = ComponentStyle<'listItem'> diff --git a/packages/ui-list/src/List/v2/props.ts b/packages/ui-list/src/List/v2/props.ts index 8f057c7b87..2b46b58abb 100644 --- a/packages/ui-list/src/List/v2/props.ts +++ b/packages/ui-list/src/List/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type ListOwnProps = { /** @@ -76,7 +77,7 @@ type PropKeys = keyof ListOwnProps type AllowedPropKeys = Readonly> type ListProps = ListOwnProps & - WithStyleProps & + WithStyleProps, ListStyle> & OtherHTMLAttributes type ListStyle = ComponentStyle<'list'> diff --git a/packages/ui-menu/package.json b/packages/ui-menu/package.json index fa65411887..e32de6cd92 100644 --- a/packages/ui-menu/package.json +++ b/packages/ui-menu/package.json @@ -33,6 +33,7 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "keycode": "^2" @@ -41,7 +42,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts index 61feb18c6a..e3d8a250b8 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts @@ -27,10 +27,10 @@ import MenuItem from '../MenuItem' import type { AsElementType, - MenuItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' type OnMenuItemSelect = ( @@ -100,7 +100,7 @@ type PropKeys = keyof MenuItemOwnProps type AllowedPropKeys = Readonly> type MenuItemProps = MenuItemOwnProps & - WithStyleProps & + WithStyleProps, MenuItemStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts index 8e473de873..9d17035f07 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts @@ -26,11 +26,9 @@ import React from 'react' import { MenuItem } from '../MenuItem' -import type { - MenuGroupTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { MenuItemProps } from '../MenuItem/props' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -79,7 +77,7 @@ type PropKeys = keyof MenuGroupOwnProps type AllowedPropKeys = Readonly> type MenuGroupProps = MenuGroupOwnProps & - WithStyleProps & + WithStyleProps, MenuGroupStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts index 66b3ec3f1b..7939d0148f 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts +++ b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts @@ -23,10 +23,8 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - MenuSeparatorTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' // keeping here to keep the structure of props.ts // eslint-disable-next-line @@ -37,7 +35,10 @@ type PropKeys = keyof MenuSeparatorOwnProps type AllowedPropKeys = Readonly> type MenuSeparatorProps = MenuSeparatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + MenuSeparatorStyle + > & OtherHTMLAttributes type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'> diff --git a/packages/ui-menu/src/Menu/v2/props.ts b/packages/ui-menu/src/Menu/v2/props.ts index 38d145d814..67be9e8ed6 100644 --- a/packages/ui-menu/src/Menu/v2/props.ts +++ b/packages/ui-menu/src/Menu/v2/props.ts @@ -24,8 +24,9 @@ import React from 'react' -import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PlacementPropValues, PositionConstraint, @@ -171,7 +172,7 @@ type PropKeys = keyof MenuOwnProps type AllowedPropKeys = Readonly> type MenuProps = MenuOwnProps & - WithStyleProps & + WithStyleProps, MenuStyle> & // controls can be passed in renderChildren and used later as aria-controls Omit, 'controls'> & { controls?: React.AriaAttributes['aria-controls'] diff --git a/packages/ui-metric/package.json b/packages/ui-metric/package.json index e70307c7b2..2a88f8a24d 100644 --- a/packages/ui-metric/package.json +++ b/packages/ui-metric/package.json @@ -27,13 +27,13 @@ "@instructure/console": "workspace:*", "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-metric/src/Metric/v2/props.ts b/packages/ui-metric/src/Metric/v2/props.ts index d8c6b32d41..0e7f6cfbe6 100644 --- a/packages/ui-metric/src/Metric/v2/props.ts +++ b/packages/ui-metric/src/Metric/v2/props.ts @@ -22,12 +22,9 @@ * SOFTWARE. */ -import type { - MetricTheme, - OtherHTMLAttributes, - Renderable -} from '@instructure/shared-types' +import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { ThemeOverrideValue } from '@instructure/emotion' type MetricOwnProps = { @@ -46,7 +43,7 @@ type PropKeys = keyof MetricOwnProps type AllowedPropKeys = Readonly> type MetricProps = MetricOwnProps & - WithStyleProps & + WithStyleProps, MetricStyle> & OtherHTMLAttributes & { themeOverride?: ThemeOverrideValue } diff --git a/packages/ui-modal/package.json b/packages/ui-modal/package.json index 80e5d1851e..ad2244d728 100644 --- a/packages/ui-modal/package.json +++ b/packages/ui-modal/package.json @@ -34,6 +34,7 @@ "@instructure/ui-overlays": "workspace:*", "@instructure/ui-portal": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -41,7 +42,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-position": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts index cab7d37854..25a344d0fc 100644 --- a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts @@ -28,9 +28,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ModalBodyTheme, OtherHTMLAttributes, UIElement } from '@instructure/shared-types' @@ -50,7 +50,7 @@ type PropKeys = keyof ModalBodyOwnProps type AllowedPropKeys = Readonly> type ModalBodyProps = ModalBodyOwnProps & - WithStyleProps & + WithStyleProps, ModalBodyStyle> & OtherHTMLAttributes type ModalBodyStyle = ComponentStyle<'modalBody'> diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts index 585051a3f9..011718441b 100644 --- a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - ModalFooterTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalFooterOwnProps = { children?: React.ReactNode @@ -40,7 +38,10 @@ type PropKeys = keyof ModalFooterOwnProps type AllowedPropKeys = Readonly> type ModalFooterProps = ModalFooterOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ModalFooterStyle + > & OtherHTMLAttributes type ModalFooterStyle = ComponentStyle<'modalFooter'> diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts index 7e75fafd86..0af11ea8b3 100644 --- a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts +++ b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - ModalHeaderTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalHeaderOwnProps = { children?: React.ReactNode @@ -44,7 +42,10 @@ type PropKeys = keyof ModalHeaderOwnProps type AllowedPropKeys = Readonly> type ModalHeaderProps = ModalHeaderOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ModalHeaderStyle + > & OtherHTMLAttributes type ModalHeaderStyle = ComponentStyle<'modalHeader'> diff --git a/packages/ui-modal/src/Modal/v2/props.ts b/packages/ui-modal/src/Modal/v2/props.ts index 6da48bdf20..78e795f10f 100644 --- a/packages/ui-modal/src/Modal/v2/props.ts +++ b/packages/ui-modal/src/Modal/v2/props.ts @@ -27,7 +27,6 @@ import { Dialog } from '@instructure/ui-dialog' import type { AsElementType, - ModalTheme, OtherHTMLAttributes, LiveRegion, UIElement @@ -35,6 +34,7 @@ import type { import type { PositionMountNode } from '@instructure/ui-position' import type { TransitionType } from '@instructure/ui-motion' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ModalPropsForPortal = { /** @@ -180,7 +180,7 @@ type PropKeys = keyof ModalOwnProps type AllowedPropKeys = Readonly> type ModalProps = ModalOwnProps & - WithStyleProps & + WithStyleProps, ModalStyle> & OtherHTMLAttributes type ModalStyle = ComponentStyle< diff --git a/packages/ui-motion/package.json b/packages/ui-motion/package.json index 15842f7eb4..31408bee73 100644 --- a/packages/ui-motion/package.json +++ b/packages/ui-motion/package.json @@ -28,11 +28,11 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-navigation/package.json b/packages/ui-navigation/package.json index caa34295a2..3b9b7c2c52 100644 --- a/packages/ui-navigation/package.json +++ b/packages/ui-navigation/package.json @@ -36,6 +36,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-menu": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-truncate-list": "workspace:*", "@instructure/ui-utils": "workspace:*", @@ -46,7 +47,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-navigation/src/AppNav/v2/Item/props.ts b/packages/ui-navigation/src/AppNav/v2/Item/props.ts index e65974acc8..06667b8cf1 100644 --- a/packages/ui-navigation/src/AppNav/v2/Item/props.ts +++ b/packages/ui-navigation/src/AppNav/v2/Item/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - AppNavItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { Cursor } from '@instructure/shared-types' import React from 'react' import { Renderable } from '@instructure/shared-types' @@ -82,7 +82,7 @@ type PropKeys = keyof AppNavItemOwnProps type AllowedPropKeys = Readonly> type AppNavItemProps = AppNavItemOwnProps & - WithStyleProps & + WithStyleProps, AppNavItemStyle> & OtherHTMLAttributes type AppNavItemStyle = ComponentStyle<'item' | 'label'> diff --git a/packages/ui-navigation/src/AppNav/v2/props.ts b/packages/ui-navigation/src/AppNav/v2/props.ts index 14a1a70e35..56aa43669d 100644 --- a/packages/ui-navigation/src/AppNav/v2/props.ts +++ b/packages/ui-navigation/src/AppNav/v2/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - AppNavTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import { Renderable } from '@instructure/shared-types' type AppNavOwnProps = { @@ -89,7 +87,7 @@ type PropKeys = keyof AppNavOwnProps type AllowedPropKeys = Readonly> type AppNavProps = AppNavOwnProps & - WithStyleProps & + WithStyleProps, AppNavStyle> & OtherHTMLAttributes type AppNavStyle = ComponentStyle<'appNav' | 'alignCenter' | 'list'> & { diff --git a/packages/ui-number-input/package.json b/packages/ui-number-input/package.json index 08396a5465..d1996ac2b3 100644 --- a/packages/ui-number-input/package.json +++ b/packages/ui-number-input/package.json @@ -30,6 +30,7 @@ "@instructure/ui-form-field": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*", "keycode": "^2" @@ -37,7 +38,6 @@ "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-options/package.json b/packages/ui-options/package.json index 33fa1eefd5..690cabe799 100644 --- a/packages/ui-options/package.json +++ b/packages/ui-options/package.json @@ -28,6 +28,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -35,7 +36,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-options/src/Options/v2/Item/props.ts b/packages/ui-options/src/Options/v2/Item/props.ts index dff1683997..85946099d7 100644 --- a/packages/ui-options/src/Options/v2/Item/props.ts +++ b/packages/ui-options/src/Options/v2/Item/props.ts @@ -24,12 +24,12 @@ import type { AsElementType, - OptionsItemTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type OptionsItemRenderProps = { children?: Renderable @@ -103,7 +103,10 @@ type PropKeys = keyof OptionsItemOwnProps type AllowedPropKeys = Readonly> type OptionsItemProps = OptionsItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + OptionsItemStyle + > & WithDeterministicIdProps & OtherHTMLAttributes diff --git a/packages/ui-options/src/Options/v2/Separator/props.ts b/packages/ui-options/src/Options/v2/Separator/props.ts index 97e45723d5..3d0846e0d2 100644 --- a/packages/ui-options/src/Options/v2/Separator/props.ts +++ b/packages/ui-options/src/Options/v2/Separator/props.ts @@ -24,10 +24,10 @@ import type { AsElementType, - OptionsSeparatorTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { AllHTMLAttributes } from 'react' type OptionsSeparatorOwnProps = { @@ -42,7 +42,10 @@ type PropKeys = keyof OptionsSeparatorOwnProps type AllowedPropKeys = Readonly> type OptionsSeparatorProps = OptionsSeparatorOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + OptionsSeparatorStyle + > & OtherHTMLAttributes> type OptionsSeparatorStyle = ComponentStyle<'separator'> diff --git a/packages/ui-options/src/Options/v2/props.ts b/packages/ui-options/src/Options/v2/props.ts index 64f85b1fff..43edcf7be7 100644 --- a/packages/ui-options/src/Options/v2/props.ts +++ b/packages/ui-options/src/Options/v2/props.ts @@ -24,10 +24,10 @@ import React from 'react' import type { AsElementType, - OptionsTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' @@ -59,7 +59,7 @@ type PropKeys = keyof OptionsOwnProps type AllowedPropKeys = Readonly> type OptionsProps = OptionsOwnProps & - WithStyleProps & + WithStyleProps, OptionsStyle> & OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-overlays/package.json b/packages/ui-overlays/package.json index 923c140e54..c0a9853b10 100644 --- a/packages/ui-overlays/package.json +++ b/packages/ui-overlays/package.json @@ -37,6 +37,7 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", @@ -45,7 +46,6 @@ }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-pages/package.json b/packages/ui-pages/package.json index 39c3648afd..71429709a4 100644 --- a/packages/ui-pages/package.json +++ b/packages/ui-pages/package.json @@ -29,13 +29,13 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts index 898e7f1872..0b0b8ee9dc 100644 --- a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts +++ b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts @@ -23,7 +23,7 @@ */ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { PaginationPageInputTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import React from 'react' type PaginationPageInputOwnProps = { /** @@ -67,7 +67,10 @@ type PropKeys = keyof PaginationPageInputOwnProps type AllowedPropKeys = Readonly> type PaginationPageInputProps = PaginationPageInputOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + PaginationPageInputStyle + > type PaginationPageInputStyle = ComponentStyle< 'paginationPageInput' | 'numberInput' | 'inputLabel' diff --git a/packages/ui-pill/src/Pill/v2/props.ts b/packages/ui-pill/src/Pill/v2/props.ts index a8a6776c98..caa9f4eeea 100644 --- a/packages/ui-pill/src/Pill/v2/props.ts +++ b/packages/ui-pill/src/Pill/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - PillTheme, OtherHTMLAttributes } from '@instructure/shared-types' @@ -63,7 +63,7 @@ type PropKeys = keyof PillOwnProps type AllowedPropKeys = Readonly> type PillProps = PillOwnProps & - WithStyleProps & + WithStyleProps, PillStyle> & OtherHTMLAttributes type PillStyle = ComponentStyle< diff --git a/packages/ui-popover/package.json b/packages/ui-popover/package.json index a675d64000..fa18a780bd 100644 --- a/packages/ui-popover/package.json +++ b/packages/ui-popover/package.json @@ -33,6 +33,7 @@ "@instructure/ui-i18n": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -42,7 +43,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-popover/src/Popover/v2/props.ts b/packages/ui-popover/src/Popover/v2/props.ts index ee3642dc74..842e184d5a 100644 --- a/packages/ui-popover/src/Popover/v2/props.ts +++ b/packages/ui-popover/src/Popover/v2/props.ts @@ -23,6 +23,7 @@ */ import React from 'react' import { BorderWidth } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion' @@ -36,8 +37,7 @@ import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { LiveRegion, UIElement, - Renderable, - PopoverTheme + Renderable } from '@instructure/shared-types' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -289,7 +289,7 @@ type PopoverOwnProps = { type PopoverProps = PopoverOwnProps & TextDirectionContextConsumerProps & WithDeterministicIdProps & - WithStyleProps + WithStyleProps, PopoverStyle> type PopoverState = { placement: PopoverOwnProps['placement'] diff --git a/packages/ui-position/package.json b/packages/ui-position/package.json index 50fb915659..29a093f785 100644 --- a/packages/ui-position/package.json +++ b/packages/ui-position/package.json @@ -30,13 +30,13 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-portal": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-progress/package.json b/packages/ui-progress/package.json index 96b933ef0e..9e58243412 100644 --- a/packages/ui-progress/package.json +++ b/packages/ui-progress/package.json @@ -30,12 +30,12 @@ "@instructure/ui-a11y-content": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-progress/src/ProgressBar/v2/props.ts b/packages/ui-progress/src/ProgressBar/v2/props.ts index 587d435032..5435e01a47 100644 --- a/packages/ui-progress/src/ProgressBar/v2/props.ts +++ b/packages/ui-progress/src/ProgressBar/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ProgressBarTheme, OtherHTMLAttributes } from '@instructure/shared-types' import { Renderable } from '@instructure/shared-types' @@ -125,7 +125,10 @@ type PropKeys = keyof ProgressBarOwnProps type AllowedPropKeys = Readonly> type ProgressBarProps = ProgressBarOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ProgressBarStyle + > & OtherHTMLAttributes type ProgressBarStyle = ComponentStyle< diff --git a/packages/ui-progress/src/ProgressCircle/v2/props.ts b/packages/ui-progress/src/ProgressCircle/v2/props.ts index b9247a4833..a4df44aa93 100644 --- a/packages/ui-progress/src/ProgressCircle/v2/props.ts +++ b/packages/ui-progress/src/ProgressCircle/v2/props.ts @@ -27,9 +27,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { AsElementType, - ProgressCircleTheme, OtherHTMLAttributes, Renderable } from '@instructure/shared-types' @@ -108,7 +108,10 @@ type PropKeys = keyof ProgressCircleOwnProps type AllowedPropKeys = Readonly> type ProgressCircleProps = ProgressCircleOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ProgressCircleStyle + > & OtherHTMLAttributes type ProgressCircleStyle = ComponentStyle< diff --git a/packages/ui-radio-input/package.json b/packages/ui-radio-input/package.json index 9213ed82a2..902509dcde 100644 --- a/packages/ui-radio-input/package.json +++ b/packages/ui-radio-input/package.json @@ -29,13 +29,13 @@ "@instructure/ui-a11y-utils": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-range-input/package.json b/packages/ui-range-input/package.json index 0c524c285d..ed62c65bf2 100644 --- a/packages/ui-range-input/package.json +++ b/packages/ui-range-input/package.json @@ -32,6 +32,7 @@ "@instructure/ui-form-field": "workspace:*", "@instructure/ui-i18n": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -39,7 +40,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-range-input/src/RangeInput/v2/props.ts b/packages/ui-range-input/src/RangeInput/v2/props.ts index f5a8c76486..1d8104491d 100644 --- a/packages/ui-range-input/src/RangeInput/v2/props.ts +++ b/packages/ui-range-input/src/RangeInput/v2/props.ts @@ -26,11 +26,14 @@ import React from 'react' import type { OtherHTMLAttributes, - RangeInputTheme, PickPropsWithExceptions } from '@instructure/shared-types' -import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field/latest' +import type { + FormFieldOwnProps, + FormMessage +} from '@instructure/ui-form-field/latest' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { InputHTMLAttributes } from 'react' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' @@ -110,7 +113,10 @@ type RangeInputProps = 'label' | 'inline' | 'id' | 'elementRef' > & RangeInputOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + RangeInputStyle + > & OtherHTMLAttributes< RangeInputOwnProps, InputHTMLAttributes diff --git a/packages/ui-rating/package.json b/packages/ui-rating/package.json index 183071fc70..9f5127fe2e 100644 --- a/packages/ui-rating/package.json +++ b/packages/ui-rating/package.json @@ -32,12 +32,12 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-select/package.json b/packages/ui-select/package.json index cf38faf3e8..dd7518898f 100644 --- a/packages/ui-select/package.json +++ b/packages/ui-select/package.json @@ -35,6 +35,7 @@ "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-selectable": "workspace:*", "@instructure/ui-text-input": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -43,7 +44,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-side-nav-bar/package.json b/packages/ui-side-nav-bar/package.json index d46fccf796..00ac31b6e2 100644 --- a/packages/ui-side-nav-bar/package.json +++ b/packages/ui-side-nav-bar/package.json @@ -32,13 +32,13 @@ "@instructure/ui-badge": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts index bebf6baf06..c54d83c67f 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts @@ -25,10 +25,10 @@ import React from 'react' import type { AsElementType, - SideNavBarItemTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type SideNavBarItemOwnProps = { /** @@ -70,7 +70,10 @@ type PropKeys = keyof SideNavBarItemOwnProps type AllowedPropKeys = Readonly> type SideNavBarItemProps = SideNavBarItemOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + SideNavBarItemStyle + > & OtherHTMLAttributes type SideNavBarItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'> diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts index b94d40fe81..4617369920 100644 --- a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts +++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts @@ -23,11 +23,9 @@ */ import React from 'react' -import type { - SideNavBarTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type SideNavBarOwnProps = { /** @@ -73,7 +71,7 @@ type PropKeys = keyof SideNavBarOwnProps type AllowedPropKeys = Readonly> type SideNavBarProps = SideNavBarOwnProps & - WithStyleProps & + WithStyleProps, SideNavBarStyle> & OtherHTMLAttributes type SideNavBarStyle = ComponentStyle< diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts index d221034545..a5e6b50b4a 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts @@ -24,15 +24,13 @@ import type { TagStyle } from '@codemirror/language' -import type { - CodeEditorTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, StyleObject, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { SearchConfig } from './SearchPanel' @@ -213,7 +211,7 @@ type AllowedPropKeys = Readonly> type SourceCodeEditorProps = SourceCodeEditorOwnProps & WithStyleProps< - CodeEditorTheme, + ReturnType, // The highlightStyle is a unique one, not compatible with our style syntax, // but isn't used for the css prop anyway Record diff --git a/packages/ui-spinner/package.json b/packages/ui-spinner/package.json index 6e318fe611..2a12c767b7 100644 --- a/packages/ui-spinner/package.json +++ b/packages/ui-spinner/package.json @@ -29,6 +29,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -36,7 +37,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-svg-images/package.json b/packages/ui-svg-images/package.json index e5c44ca125..7cb745ebb1 100644 --- a/packages/ui-svg-images/package.json +++ b/packages/ui-svg-images/package.json @@ -27,12 +27,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json index 0187491431..5fd6d5ddc9 100644 --- a/packages/ui-table/package.json +++ b/packages/ui-table/package.json @@ -31,6 +31,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-simple-select": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*" }, @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tabs/package.json b/packages/ui-tabs/package.json index 5dcece137f..899f1432dd 100644 --- a/packages/ui-tabs/package.json +++ b/packages/ui-tabs/package.json @@ -33,6 +33,7 @@ "@instructure/ui-i18n": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*", @@ -42,7 +43,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts index 34fcdbcb66..4a16af5bde 100644 --- a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts @@ -28,10 +28,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { - OtherHTMLAttributes, - TabsPanelTheme -} from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type TabsPanelOwnProps = { /** @@ -74,7 +72,7 @@ type PropKeys = keyof TabsPanelOwnProps type AllowedPropKeys = Readonly> type TabsPanelProps = TabsPanelOwnProps & - WithStyleProps & + WithStyleProps, TabsPanelStyle> & OtherHTMLAttributes type TabsPanelStyle = ComponentStyle<'panel' | 'content'> diff --git a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts index 3c62bbe592..a3a7fbd780 100644 --- a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts @@ -23,12 +23,9 @@ */ import React from 'react' -import type { - OtherHTMLAttributes, - Renderable, - TabsTabTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewOwnProps } from '@instructure/ui-view/latest' type TabsTabOwnProps = { @@ -58,7 +55,7 @@ type PropKeys = keyof TabsTabOwnProps type AllowedPropKeys = Readonly> type TabsTabProps = TabsTabOwnProps & - WithStyleProps & + WithStyleProps, TabsTabStyle> & OtherHTMLAttributes type TabsTabStyle = ComponentStyle<'tab'> diff --git a/packages/ui-tabs/src/Tabs/v2/props.ts b/packages/ui-tabs/src/Tabs/v2/props.ts index 9c6a74b513..8a54504db6 100644 --- a/packages/ui-tabs/src/Tabs/v2/props.ts +++ b/packages/ui-tabs/src/Tabs/v2/props.ts @@ -27,7 +27,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { OtherHTMLAttributes, TabsTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n' import type { ViewOwnProps } from '@instructure/ui-view/latest' @@ -85,7 +86,7 @@ type AllowedPropKeys = Readonly> type TabsProps = TabsOwnProps & TextDirectionContextConsumerProps & - WithStyleProps & + WithStyleProps, TabsStyle> & OtherHTMLAttributes type TabsStyle = ComponentStyle< diff --git a/packages/ui-tag/package.json b/packages/ui-tag/package.json index 1c77754cb0..ec5f9c435c 100644 --- a/packages/ui-tag/package.json +++ b/packages/ui-tag/package.json @@ -31,12 +31,12 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-icons": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-view": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tag/src/Tag/v2/props.ts b/packages/ui-tag/src/Tag/v2/props.ts index efb45d8f31..1593a51a13 100644 --- a/packages/ui-tag/src/Tag/v2/props.ts +++ b/packages/ui-tag/src/Tag/v2/props.ts @@ -29,7 +29,8 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { OtherHTMLAttributes, TagTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' +import type { OtherHTMLAttributes } from '@instructure/shared-types' type TagOwnProps = { className?: string @@ -71,7 +72,7 @@ type PropKeys = keyof TagOwnProps type AllowedPropKeys = Readonly> type TagProps = TagOwnProps & - WithStyleProps & + WithStyleProps, TagStyle> & OtherHTMLAttributes type TagStyle = ComponentStyle<'tag' | 'text' | 'icon'> diff --git a/packages/ui-text-area/package.json b/packages/ui-text-area/package.json index 567b91357e..07dbe3e80e 100644 --- a/packages/ui-text-area/package.json +++ b/packages/ui-text-area/package.json @@ -31,6 +31,7 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-form-field": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/uid": "workspace:*" }, @@ -38,7 +39,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-text-input/src/TextInput/v2/props.ts b/packages/ui-text-input/src/TextInput/v2/props.ts index 8cb0cbb87d..299a16b49d 100644 --- a/packages/ui-text-input/src/TextInput/v2/props.ts +++ b/packages/ui-text-input/src/TextInput/v2/props.ts @@ -24,16 +24,17 @@ import { InputHTMLAttributes } from 'react' -import type { FormFieldProps, FormMessage } from '@instructure/ui-form-field/latest' import type { - OtherHTMLAttributes, - TextInputTheme -} from '@instructure/shared-types' + FormFieldProps, + FormMessage +} from '@instructure/ui-form-field/latest' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle, Spacing } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { InteractionType, WithDeterministicIdProps @@ -183,7 +184,7 @@ type PropKeys = keyof TextInputOwnProps type AllowedPropKeys = Readonly> type TextInputProps = TextInputOwnProps & - WithStyleProps & + WithStyleProps, TextInputStyle> & OtherHTMLAttributes< TextInputOwnProps, InputHTMLAttributes diff --git a/packages/ui-text-input/src/TextInput/v2/theme.ts b/packages/ui-text-input/src/TextInput/v2/theme.ts deleted file mode 100644 index e1d77a78b3..0000000000 --- a/packages/ui-text-input/src/TextInput/v2/theme.ts +++ /dev/null @@ -1,84 +0,0 @@ -/* - * 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, ThemeSpecificStyle } from '@instructure/ui-themes' -import { TextInputTheme } 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): TextInputTheme => { - const { colors, typography, borders, spacing, forms, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'], - focusOutlineColor: theme['ic-brand-primary'] - } - } - - const componentVariables: TextInputTheme = { - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightNormal, - - borderWidth: borders?.widthSmall, - borderStyle: borders?.style, - borderColor: colors?.contrasts?.grey3045, - borderRadius: borders?.radiusMedium, - - color: colors?.contrasts?.grey125125, - background: colors?.contrasts?.white1010, - - requiredInvalidColor: colors?.contrasts?.red5782, - - padding: spacing?.small, - - focusOutlineWidth: borders?.widthMedium, - focusOutlineStyle: borders?.style, - focusOutlineColor: colors?.contrasts?.blue4570, - - errorBorderColor: colors?.contrasts?.red4570, - errorOutlineColor: colors?.contrasts?.red4570, - - placeholderColor: colors?.contrasts?.grey4570, - - smallFontSize: typography?.fontSizeSmall, - smallHeight: forms?.inputHeightSmall, - - mediumFontSize: typography?.fontSizeMedium, - mediumHeight: forms?.inputHeightMedium, - - largeFontSize: typography?.fontSizeLarge, - largeHeight: forms?.inputHeightLarge - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-text/package.json b/packages/ui-text/package.json index 67092c0c59..0dfcdc6f74 100644 --- a/packages/ui-text/package.json +++ b/packages/ui-text/package.json @@ -28,12 +28,12 @@ "@instructure/emotion": "workspace:*", "@instructure/shared-types": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7" }, diff --git a/packages/ui-text/src/Text/v2/props.ts b/packages/ui-text/src/Text/v2/props.ts index b0c43f29e3..73e9b1ccea 100644 --- a/packages/ui-text/src/Text/v2/props.ts +++ b/packages/ui-text/src/Text/v2/props.ts @@ -25,10 +25,10 @@ import React from 'react' import type { AsElementType, - TextTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type TextOwnProps = { /** @@ -113,7 +113,7 @@ type PropKeys = keyof TextOwnProps type AllowedPropKeys = Readonly> type TextProps = TextOwnProps & - WithStyleProps & + WithStyleProps, TextStyle> & OtherHTMLAttributes type TextStyle = ComponentStyle<'text'> diff --git a/packages/ui-toggle-details/package.json b/packages/ui-toggle-details/package.json index a2e79dab05..ff6a33de94 100644 --- a/packages/ui-toggle-details/package.json +++ b/packages/ui-toggle-details/package.json @@ -33,6 +33,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "@instructure/ui-view": "workspace:*", "@instructure/uid": "workspace:*" @@ -40,7 +41,6 @@ "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts index e34bb100d5..4766da69a0 100644 --- a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts +++ b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts @@ -24,11 +24,9 @@ import React from 'react' -import type { - OtherHTMLAttributes, - ToggleDetailsTheme -} from '@instructure/shared-types' +import type { OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { ViewProps } from '@instructure/ui-view/latest' type ToggleDetailsOwnProps = { @@ -80,7 +78,10 @@ type PropKeys = keyof ToggleDetailsOwnProps type AllowedPropKeys = Readonly> type ToggleDetailsProps = ToggleDetailsOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ToggleDetailsStyle + > & OtherHTMLAttributes type ToggleDetailsStyle = ComponentStyle< diff --git a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts index 8fcb428ccb..aea313a6b6 100644 --- a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts +++ b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts @@ -27,11 +27,11 @@ import React from 'react' import { AsElementType, OtherHTMLAttributes, - Renderable, - ToggleGroupTheme + Renderable } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ToggleGroupOwnProps = { /** @@ -94,7 +94,7 @@ type ToggleGroupStyle = { borderColor: string } type ToggleGroupProps = ToggleGroupOwnProps & OtherHTMLAttributes & - WithStyleProps + WithStyleProps, ToggleGroupStyle> const allowedProps: AllowedPropKeys = [ 'children', 'summary', diff --git a/packages/ui-tooltip/package.json b/packages/ui-tooltip/package.json index 53261f13d0..77565ca848 100644 --- a/packages/ui-tooltip/package.json +++ b/packages/ui-tooltip/package.json @@ -29,13 +29,13 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tooltip/src/Tooltip/v2/props.ts b/packages/ui-tooltip/src/Tooltip/v2/props.ts index 86de063066..f59ddd2226 100644 --- a/packages/ui-tooltip/src/Tooltip/v2/props.ts +++ b/packages/ui-tooltip/src/Tooltip/v2/props.ts @@ -26,7 +26,6 @@ import React from 'react' import type { AsElementType, - TooltipTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { @@ -35,6 +34,7 @@ import type { PositionMountNode } from '@instructure/ui-position' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { PopoverOwnProps } from '@instructure/ui-popover/latest' import type { WithDeterministicIdProps } from '@instructure/ui-react-utils' import { Renderable } from '@instructure/shared-types' @@ -183,7 +183,7 @@ type PropsPassableToPopover = Omit< type TooltipProps = PropsPassableToPopover & TooltipOwnProps & - WithStyleProps & + WithStyleProps, TooltipStyle> & // the OtherHTMLAttributes might be passed to the trigger or Popover OtherHTMLAttributes & WithDeterministicIdProps diff --git a/packages/ui-top-nav-bar/package.json b/packages/ui-top-nav-bar/package.json index d37bbf2f64..908d2bd59c 100644 --- a/packages/ui-top-nav-bar/package.json +++ b/packages/ui-top-nav-bar/package.json @@ -39,6 +39,7 @@ "@instructure/ui-popover": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-responsive": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-tooltip": "workspace:*", "@instructure/ui-tray": "workspace:*", "@instructure/ui-truncate-list": "workspace:*", @@ -50,7 +51,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-scripts": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tray/package.json b/packages/ui-tray/package.json index 4d3fcd1a42..1a88efeec2 100644 --- a/packages/ui-tray/package.json +++ b/packages/ui-tray/package.json @@ -34,11 +34,11 @@ "@instructure/ui-portal": "workspace:*", "@instructure/ui-position": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*" }, "devDependencies": { "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@testing-library/user-event": "^14.6.1", diff --git a/packages/ui-tray/src/Tray/v2/props.ts b/packages/ui-tray/src/Tray/v2/props.ts index 924b7ab6f8..29f8a64f18 100644 --- a/packages/ui-tray/src/Tray/v2/props.ts +++ b/packages/ui-tray/src/Tray/v2/props.ts @@ -24,9 +24,9 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { OtherHTMLAttributes, - TrayTheme, LiveRegion, UIElement } from '@instructure/shared-types' @@ -166,7 +166,7 @@ type AllowedPropKeys = Readonly> type TrayProps = TrayOwnProps & TextDirectionContextConsumerProps & - WithStyleProps & + WithStyleProps, TrayStyle> & OtherHTMLAttributes type TrayStyle = ComponentStyle<'tray' | 'content'> diff --git a/packages/ui-tree-browser/package.json b/packages/ui-tree-browser/package.json index a01e78ede5..e30d07874e 100644 --- a/packages/ui-tree-browser/package.json +++ b/packages/ui-tree-browser/package.json @@ -29,6 +29,7 @@ "@instructure/ui-icons": "workspace:*", "@instructure/ui-img": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "keycode": "^2" }, @@ -36,7 +37,6 @@ "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts index eeb48426a0..de715cf1b2 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts @@ -24,7 +24,7 @@ import React from 'react' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' -import type { TreeBrowserButtonTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TreeBrowserCommonProps } from '../props' type TreeBrowserButtonOwnProps = { @@ -58,7 +58,10 @@ type PropKeys = keyof TreeBrowserButtonOwnProps type AllowedPropKeys = Readonly> type TreeBrowserButtonProps = TreeBrowserButtonOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserButtonStyle + > type TreeBrowserButtonStyle = ComponentStyle< | 'treeButton' diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts index be2c0e6fe7..f1d968eb34 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts @@ -25,8 +25,8 @@ import React from 'react' import type { CollectionData } from '../props' -import type { TreeBrowserCollectionTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import { CollectionProps, TreeBrowserBaseProps } from '../props' type TreeBrowserCollectionOwnProps = { @@ -45,7 +45,10 @@ type PropKeys = keyof TreeBrowserCollectionOwnProps type AllowedPropKeys = Readonly> type TreeBrowserCollectionProps = TreeBrowserCollectionOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserCollectionStyle + > type TreeBrowserCollectionStyle = ComponentStyle< 'treeCollection' | 'list' | 'item' diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts index fa45243090..146478cc82 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts @@ -23,8 +23,8 @@ */ import React from 'react' -import type { TreeBrowserButtonTheme } from '@instructure/shared-types' import type { WithStyleProps } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { TreeBrowserButtonProps, @@ -63,7 +63,10 @@ type PropKeys = keyof TreeBrowserNodeOwnProps type AllowedPropKeys = Readonly> type TreeBrowserNodeProps = TreeBrowserNodeOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TreeBrowserButtonStyle + > const allowedProps: AllowedPropKeys = [ 'id', 'size', diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts index 636b7f1c5b..27154299fd 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts @@ -22,8 +22,8 @@ * SOFTWARE. */ -import type { TreeBrowserTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' import React, { ReactElement } from 'react' import type { TreeBrowserButtonProps } from './TreeButton/props' import { Renderable } from '@instructure/shared-types' @@ -141,7 +141,7 @@ type AllowedPropKeys = Readonly> // For now it doesn't need the OtherHTMLAttributes, because the extra props // get passed to TreeCollection and it doesn't handle them type TreeBrowserProps = TreeBrowserOwnProps & - WithStyleProps + WithStyleProps, TreeBrowserStyle> type TreeBrowserStyle = ComponentStyle<'treeBrowser'> diff --git a/packages/ui-truncate-text/package.json b/packages/ui-truncate-text/package.json index a008695369..f510d9620e 100644 --- a/packages/ui-truncate-text/package.json +++ b/packages/ui-truncate-text/package.json @@ -30,6 +30,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*", "@instructure/ui-utils": "workspace:*", "escape-html": "^1.0.3" }, @@ -38,7 +39,6 @@ "@instructure/ui-babel-preset": "workspace:*", "@instructure/ui-color-utils": "workspace:*", "@instructure/ui-text": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "@types/escape-html": "^1.0.4", diff --git a/packages/ui-truncate-text/src/TruncateText/v2/props.ts b/packages/ui-truncate-text/src/TruncateText/v2/props.ts index 4b0b2b2a61..8bcc15ecca 100644 --- a/packages/ui-truncate-text/src/TruncateText/v2/props.ts +++ b/packages/ui-truncate-text/src/TruncateText/v2/props.ts @@ -24,8 +24,8 @@ import { ReactNode } from 'react' -import type { TruncateTextTheme } from '@instructure/shared-types' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type CleanDataOptions = { /** @@ -79,7 +79,10 @@ type PropKeys = keyof TruncateTextOwnProps type AllowedPropKeys = Readonly> type TruncateTextProps = TruncateTextOwnProps & - WithStyleProps + WithStyleProps< + ReturnType, + TruncateTextStyle + > type TruncateTextStyle = ComponentStyle< 'truncateText' | 'auto' | 'spacer' | 'lineHeight' diff --git a/packages/ui-view/package.json b/packages/ui-view/package.json index afb37a584c..d7075a49be 100644 --- a/packages/ui-view/package.json +++ b/packages/ui-view/package.json @@ -31,12 +31,12 @@ "@instructure/ui-dom-utils": "workspace:*", "@instructure/ui-i18n": "workspace:*", "@instructure/ui-position": "workspace:*", - "@instructure/ui-react-utils": "workspace:*" + "@instructure/ui-react-utils": "workspace:*", + "@instructure/ui-themes": "workspace:*" }, "devDependencies": { "@instructure/ui-axe-check": "workspace:*", "@instructure/ui-babel-preset": "workspace:*", - "@instructure/ui-themes": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "15.0.7", "vitest": "^3.2.2" diff --git a/packages/ui-view/src/ContextView/v2/props.ts b/packages/ui-view/src/ContextView/v2/props.ts index 650b835a83..daa24c8c7f 100644 --- a/packages/ui-view/src/ContextView/v2/props.ts +++ b/packages/ui-view/src/ContextView/v2/props.ts @@ -25,7 +25,6 @@ import React from 'react' import type { AsElementType, - ContextViewTheme, OtherHTMLAttributes } from '@instructure/shared-types' import type { PlacementPropValues } from '@instructure/ui-position' @@ -36,6 +35,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type ContextViewOwnProps = { as?: AsElementType @@ -63,7 +63,10 @@ type PropKeys = keyof ContextViewOwnProps type AllowedPropKeys = Readonly> type ContextViewProps = ContextViewOwnProps & - WithStyleProps & + WithStyleProps< + ReturnType, + ContextViewStyle + > & OtherHTMLAttributes type ContextViewStyle = ComponentStyle< diff --git a/packages/ui-view/src/View/v2/props.ts b/packages/ui-view/src/View/v2/props.ts index 31739e028b..69e25a0b5a 100644 --- a/packages/ui-view/src/View/v2/props.ts +++ b/packages/ui-view/src/View/v2/props.ts @@ -26,8 +26,7 @@ import React from 'react' import type { Cursor } from '@instructure/shared-types' import type { AsElementType, - OtherHTMLAttributes, - ViewTheme + OtherHTMLAttributes } from '@instructure/shared-types' import type { WithStyleProps, @@ -39,6 +38,7 @@ import type { ComponentStyle, StyleObject } from '@instructure/emotion' +import type { NewComponentTypes } from '@instructure/ui-themes' type BorderColor = | string @@ -223,7 +223,7 @@ type ViewOwnProps = { type PropKeys = keyof ViewOwnProps type ViewProps = ViewOwnProps & - WithStyleProps & + WithStyleProps, ViewStyle> & OtherHTMLAttributes type AllowedPropKeys = Readonly> diff --git a/packages/ui/src/v11_7.ts b/packages/ui/src/v11_7.ts index 2bdad750ae..ad26565b5a 100644 --- a/packages/ui/src/v11_7.ts +++ b/packages/ui/src/v11_7.ts @@ -152,7 +152,6 @@ export { Focusable } from '@instructure/ui-focusable' export type { FocusableProps } from '@instructure/ui-focusable' export { FormField, - FormFieldLabel, FormFieldMessage, FormFieldMessages, FormFieldLayout, @@ -161,7 +160,6 @@ export { export type { FormFieldGroupProps, FormFieldMessageProps, - FormFieldLabelProps, FormFieldMessagesProps, FormFieldLayoutProps, FormFieldOwnProps, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 556f6bdfad..5e7394b3c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1020,6 +1020,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1033,9 +1036,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1157,6 +1157,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1167,9 +1170,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1200,6 +1200,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1216,9 +1219,6 @@ importers: '@instructure/ui-icons': specifier: workspace:* version: link:../ui-icons - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1252,6 +1252,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -1274,9 +1277,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1322,6 +1322,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -1341,9 +1344,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1371,6 +1371,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -1384,9 +1387,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1429,6 +1429,9 @@ importers: '@instructure/ui-simple-select': specifier: workspace:* version: link:../ui-simple-select + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1445,9 +1448,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1490,6 +1490,9 @@ importers: '@instructure/ui-svg-images': specifier: workspace:* version: link:../ui-svg-images + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1512,9 +1515,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1895,6 +1895,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1911,9 +1914,6 @@ importers: '@instructure/ui-buttons': specifier: workspace:* version: link:../ui-buttons - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -1959,6 +1959,9 @@ importers: '@instructure/ui-selectable': specifier: workspace:* version: link:../ui-selectable + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -1978,9 +1981,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2115,6 +2115,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2134,9 +2137,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2164,6 +2164,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2174,9 +2177,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2256,6 +2256,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2269,9 +2272,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2302,6 +2302,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2312,9 +2315,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2345,6 +2345,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2355,9 +2358,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2526,6 +2526,9 @@ importers: '@instructure/ui-text': specifier: workspace:* version: link:../ui-text + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2539,9 +2542,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2581,6 +2581,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2594,9 +2597,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2627,6 +2627,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -2640,9 +2643,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2685,6 +2685,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2704,9 +2707,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2737,6 +2737,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -2747,9 +2750,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2795,6 +2795,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2811,9 +2814,6 @@ importers: '@instructure/ui-position': specifier: workspace:* version: link:../ui-position - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2844,6 +2844,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2851,9 +2854,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2905,6 +2905,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -2930,9 +2933,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -2969,6 +2969,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -2985,9 +2988,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3018,6 +3018,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3034,9 +3037,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3094,6 +3094,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -3113,9 +3116,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3152,6 +3152,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3165,9 +3168,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3344,6 +3344,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3366,9 +3369,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3442,6 +3442,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3455,9 +3458,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3491,6 +3491,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -3501,9 +3504,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3537,6 +3537,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -3547,9 +3550,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3592,6 +3592,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3608,9 +3611,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3650,6 +3650,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -3660,9 +3663,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3852,6 +3852,9 @@ importers: '@instructure/ui-text-input': specifier: workspace:* version: link:../ui-text-input + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -3871,9 +3874,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -3956,6 +3956,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -3969,9 +3972,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4151,6 +4151,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4167,9 +4170,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4194,6 +4194,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4204,9 +4207,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4246,6 +4246,9 @@ importers: '@instructure/ui-simple-select': specifier: workspace:* version: link:../ui-simple-select + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4262,9 +4265,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4310,6 +4310,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4332,9 +4335,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4374,6 +4374,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-view': specifier: workspace:* version: link:../ui-view @@ -4384,9 +4387,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4420,6 +4420,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -4427,9 +4430,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4463,6 +4463,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4479,9 +4482,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4663,6 +4663,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4679,9 +4682,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4715,6 +4715,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4728,9 +4731,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4794,6 +4794,9 @@ importers: '@instructure/ui-responsive': specifier: workspace:* version: link:../ui-responsive + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-tooltip': specifier: workspace:* version: link:../ui-tooltip @@ -4822,9 +4825,6 @@ importers: '@instructure/ui-scripts': specifier: workspace:* version: link:../ui-scripts - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4873,6 +4873,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4880,9 +4883,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -4916,6 +4916,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -4932,9 +4935,6 @@ importers: '@instructure/ui-color-utils': specifier: workspace:* version: link:../ui-color-utils - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -5017,6 +5017,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes '@instructure/ui-utils': specifier: workspace:* version: link:../ui-utils @@ -5036,9 +5039,6 @@ importers: '@instructure/ui-text': specifier: workspace:* version: link:../ui-text - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1 @@ -5124,6 +5124,9 @@ importers: '@instructure/ui-react-utils': specifier: workspace:* version: link:../ui-react-utils + '@instructure/ui-themes': + specifier: workspace:* + version: link:../ui-themes devDependencies: '@instructure/ui-axe-check': specifier: workspace:* @@ -5131,9 +5134,6 @@ importers: '@instructure/ui-babel-preset': specifier: workspace:* version: link:../ui-babel-preset - '@instructure/ui-themes': - specifier: workspace:* - version: link:../ui-themes '@testing-library/jest-dom': specifier: ^6.6.3 version: 6.9.1