@instructure/emotion 11.6.0 → 11.6.1-snapshot-129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -17,13 +17,14 @@
     "@babel/runtime": "^7.27.6",
     "@emotion/react": "^11",
     "hoist-non-react-statics": "^3.3.2",
-    "@instructure/console": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-decorator": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/ui-decorator": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -31,7 +32,7 @@
     "@testing-library/user-event": "^14.6.1",
     "react-dom": "18.3.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -42,6 +43,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "src": "./src/index.ts",
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
       "require": "./lib/index.js",

package/src/EmotionTypes.ts

@@ -28,6 +28,7 @@ import type {
   ComponentThemeMap,
   DeepPartial
 } from '@instructure/shared-types'
+import type { Theme, SharedTokens } from '@instructure/ui-themes'
 
 /**
  * A theme object where every prop is optional
@@ -101,7 +102,7 @@ type Overrides = {
   componentOverrides?: ComponentOverride
 }
 
-type BaseThemeOrOverride = BaseTheme | PartialTheme | Overrides
+type BaseThemeOrOverride = Theme | PartialTheme | Overrides
 
 type ThemeOrOverride =
   | BaseThemeOrOverride
@@ -120,6 +121,13 @@ type GenerateStyle = (
   state?: State
 ) => StyleObject
 
+type GenerateStyleRework = (
+  componentTheme: ComponentTheme,
+  props: Props,
+  sharedTokens: SharedTokens,
+  state?: State
+) => StyleObject
+
 type GenerateStyleFunctional = (
   componentTheme: ComponentTheme,
   params: Record<string, unknown>
@@ -149,6 +157,7 @@ export type {
   State,
   GenerateComponentTheme,
   GenerateStyle,
+  GenerateStyleRework,
   GenerateStyleFunctional,
   ComponentStyle
 }

package/src/InstUISettingsProvider/index.tsx

@@ -73,7 +73,11 @@ function InstUISettingsProvider({
 }: InstUIProviderProps) {
   const finalDir = dir || useContext(TextDirectionContext)
 
-  if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {
+  if (
+    (process.env.NODE_ENV !== 'production' ||
+      process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') &&
+    finalDir === 'auto'
+  ) {
     console.warn(
       "'auto' is not an supported value for the 'dir' prop. Please pass 'ltr' or 'rtl'"
     )

package/src/getComponentThemeOverride.ts

@@ -27,8 +27,9 @@ import type {
   Overrides,
   ComponentOverride
 } from './EmotionTypes'
-import type { BaseTheme, ComponentTheme } from '@instructure/shared-types'
-import type { WithStyleProps } from './withStyle'
+import type { ComponentTheme } from '@instructure/shared-types'
+import { ThemeOverrideProp } from './withStyle'
+import { ThemeOverrideValue } from './useStyle'
 
 type ComponentName = keyof ComponentOverride | undefined
 
@@ -42,7 +43,7 @@ type ComponentName = keyof ComponentOverride | undefined
  * @param theme - Theme object
  * @param displayName - Name of the component
  * @param componentId - componentId of the component
- * @param props - The component's props object
+ * @param themeOverride - The theme override object
  * @param componentTheme - The component's default theme
  * @returns The calculated theme override object
  */
@@ -50,14 +51,13 @@ const getComponentThemeOverride = (
   theme: ThemeOrOverride,
   displayName: string,
   componentId?: string,
-  props?: { [k: string]: unknown } & WithStyleProps,
+  // ThemeOverrideProp is the old type, ThemeOverrideValue is the new one
+  themeOverride?: ThemeOverrideProp['themeOverride'] | ThemeOverrideValue,
   componentTheme?: ComponentTheme
 ): Partial<ComponentTheme> => {
   const name = displayName as ComponentName
   const id = componentId as ComponentName
 
-  const themeOverride = props ? props.themeOverride : undefined
-
   const { componentOverrides } = theme as Overrides
 
   let overridesFromTheme: Partial<ComponentTheme> = {}
@@ -71,10 +71,11 @@ const getComponentThemeOverride = (
   if (themeOverride) {
     if (typeof themeOverride === 'function') {
       overrideFromComponent = themeOverride(
-        componentTheme || {},
+        //TODO type properly when the old theme is gone
+        componentTheme || ({} as any),
         // the `theme` technically could be a partial theme / override object too,
         // but we want to display all possible options
-        theme as BaseTheme
+        theme as any
       )
     } else {
       overrideFromComponent = themeOverride

package/src/getTheme.ts

@@ -54,7 +54,10 @@ const getTheme =
     // we need to clone the ancestor theme not to override it
     let currentTheme
     if (Object.keys(ancestorTheme).length === 0) {
-      if (process.env.NODE_ENV !== 'production') {
+      if (
+        process.env.NODE_ENV !== 'production' ||
+        process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+      ) {
         console.warn(
           'No theme provided for [InstUISettingsProvider], using default `canvas` theme.'
         )
@@ -78,7 +81,10 @@ const getTheme =
       // If the prop passed is not an Object, it will throw an error.
       // We are using this fail-safe here for the non-TS users,
       // because the whole page can break without a theme.
-      if (process.env.NODE_ENV !== 'production') {
+      if (
+        process.env.NODE_ENV !== 'production' ||
+        process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+      ) {
         console.warn(
           'The `theme` property provided to InstUISettingsProvider is not a valid InstUI theme object.\ntheme: ',
           resolvedThemeOrOverride

package/src/index.ts

@@ -26,6 +26,8 @@
 export * from '@emotion/react'
 
 export { InstUISettingsProvider } from './InstUISettingsProvider'
+export { withStyleLegacy } from './withStyleLegacy'
+export { getComponentThemeOverride } from './getComponentThemeOverride'
 export { withStyle } from './withStyle'
 export {
   ThemeablePropValues,
@@ -33,14 +35,17 @@ export {
   getShorthandPropValue,
   mirrorShorthandCorners,
   mirrorShorthandEdges,
-  mapSpacingToShorthand
+  calcSpacingFromShorthand,
+  calcFocusOutlineStyles
 } from './styleUtils'
 
+export { useStyleLegacy } from './useStyleLegacy'
 export { useStyle } from './useStyle'
 export { useTheme } from './useTheme'
 
 export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes'
-export type { WithStyleProps } from './withStyle'
+export type { WithStyleProps } from './withStyleLegacy'
+export type { ThemeOverrideValue } from './useStyle'
 export type {
   SpacingValues,
   Spacing,

package/src/styleUtils/calcFocusOutlineStyles.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 { alpha } from '@instructure/ui-color-utils'
+import type { SharedTokens } from '@instructure/ui-themes'
+
+/**
+ * This function creates CSS-in-JS styles for focus indicators.
+ *
+ * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
+ */
+const calcFocusOutlineStyles = (
+  /**
+   * The focus outline theme configuration object containing color and sizing tokens.
+   */
+  theme: SharedTokens['focusOutline'],
+  params?: {
+    /**
+     * The color variant to use for the focus outline
+     */
+    focusColor?: 'info' | 'inverse' | 'success' | 'danger'
+    /**
+     * Whether to position the outline outside ('offset') or inside ('inset') the element.
+     */
+    focusPosition?: 'offset' | 'inset'
+    /**
+     * Whether to include smooth transition animations for focus changes.
+     */
+    shouldAnimateFocus?: boolean
+    /**
+     * Whether to apply focus styles to :focus-within pseudo-class for container elements.
+     */
+    focusWithin?: boolean
+    /**
+     * Whether to force showing the focus outline.
+     */
+    withFocusOutline?: boolean
+    /**
+     * What CSS selector to use to display the focus ring, `:focus` by default.
+     */
+    customCSSSelector?: string
+  }
+) => {
+  const focusColor = params?.focusColor ?? 'info'
+  const focusPosition = params?.focusPosition ?? 'offset'
+  const shouldAnimateFocus = params?.shouldAnimateFocus ?? true
+  const focusWithin = params?.focusWithin ?? false
+  const withFocusOutline = params?.withFocusOutline ?? false
+  const selector = params?.customCSSSelector ?? '&:focus'
+
+  const focusColorVariants = {
+    info: theme.infoColor,
+    inverse: theme.onColor,
+    success: theme.successColor,
+    danger: theme.dangerColor
+  }
+
+  const outlineStyle = {
+    outlineColor: focusColorVariants[focusColor!],
+    outlineStyle: 'solid',
+    outlineWidth: theme.width,
+    outlineOffset: theme[focusPosition]
+  }
+  return {
+    ...(shouldAnimateFocus && {
+      transition: 'outline-color 0.2s, outline-offset 0.25s'
+    }),
+    outlineOffset: '-0.8rem',
+    outlineStyle: 'solid',
+    outlineColor: alpha(outlineStyle.outlineColor, 0),
+    ...(withFocusOutline && outlineStyle),
+    [selector]: {
+      ...outlineStyle,
+      '&:hover, &:active': {
+        // apply the same style so it's not overridden by some global style
+        ...outlineStyle
+      }
+    },
+    ...(focusWithin && {
+      '&:focus-within': outlineStyle
+    })
+  }
+}
+
+export default calcFocusOutlineStyles
+export { calcFocusOutlineStyles }

package/src/styleUtils/calcSpacingFromShorthand.ts

@@ -0,0 +1,127 @@
+/*
+ * 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 { Spacing } from './ThemeablePropValues'
+
+type DeepStringRecord = {
+  [key: string]: string | DeepStringRecord
+}
+
+/**
+ * Converts hyphen-case strings to camelCase
+ * Example: 'medium-small' -> 'mediumSmall'
+ */
+function camelize(str: string): string {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+}
+
+/**
+ * Converts shorthand spacing values into CSS strings using theme spacing tokens.
+ *
+ * This function parses space-separated spacing values (margin, padding) and resolves theme
+ * tokens to their actual CSS values. It supports CSS shorthand syntax (1-4 values), nested
+ * theme token paths using dot notation, and automatically converts hyphen-case tokens to camelCase.
+ *
+ * @param {Spacing | undefined} value - The shorthand spacing value string containing space-separated tokens or CSS values.
+ *   Tokens can be in camelCase (mediumSmall) or hyphen-case (medium-small).
+ *   Can be undefined, in which case '0' is returned.
+ * @param {Record<string, string>} spacingMap - The spacing theme object containing spacing tokens and nested values.
+ *   Typically comes from `sharedTokens.margin.spacing` or `sharedTokens.padding.spacing` in the component theme.
+ *
+ * @returns {string} The resolved CSS spacing string ready to be used in styles.
+ *
+ * @example
+ * // Hyphen-case tokens are converted to camelCase
+ * calcSpacingFromShorthand('medium-small', spacingMap) // resolves to spacingMap.mediumSmall
+ * calcSpacingFromShorthand('x-large small', spacingMap) // resolves to spacingMap.xLarge + spacingMap.small
+ *
+ * // Dot notation paths are NOT converted
+ * calcSpacingFromShorthand('gap.nested-value', spacingMap) // resolves to spacingMap.gap['nested-value']
+ *
+ * // CSS values like 'none', 'auto', '10px' are returned as-is
+ * calcSpacingFromShorthand('none', spacingMap) // returns 'none'
+ */
+export function calcSpacingFromShorthand(
+  value: Spacing | undefined,
+  spacingMap: DeepStringRecord
+) {
+  // return undefined when there is no value -> this is important when a component (like View)
+  // doesn't have a prop like `padding` but has inline css for padding
+  // this makes sure to not overwrite the inline style
+  if (!value) return
+
+  const tokens = value.trim().split(' ')
+
+  // Handle whitespace-only strings
+  if (tokens.length === 1 && tokens[0] === '') return ''
+
+  // Map each token to its resolved CSS value
+  const resolvedValues = tokens.map((token) => {
+    // Handle special CSS value 'none' - convert to 0 for valid CSS
+    if (token === 'none') {
+      return '0'
+    }
+
+    // Handle valid CSS numeric and keyword values
+    if (token === '0' || token === 'auto') {
+      return token
+    }
+
+    // Handle dot notation for nested theme token paths (no camelization)
+    if (token.includes('.')) {
+      const path = token.split('.')
+      let currentLevel: string | DeepStringRecord = spacingMap
+
+      for (const key of path) {
+        if (
+          currentLevel &&
+          typeof currentLevel === 'object' &&
+          key in currentLevel
+        ) {
+          currentLevel = currentLevel[key]
+        } else {
+          console.warn(`Theme token path "${token}" not found in theme.`)
+          // If path doesn't resolve, return the original token as fallback
+          return token
+        }
+      }
+      if (typeof currentLevel === 'string') {
+        return currentLevel
+      }
+    }
+
+    // For direct tokens, try camelized version
+    const camelizedToken = camelize(token)
+    const directValue = spacingMap[camelizedToken]
+    if (typeof directValue === 'string') {
+      return directValue
+    }
+
+    // Return the original token if not found (could be a direct CSS value like 'auto', '10px', etc.)
+    console.warn(`Theme token path "${token}" not found in theme.`)
+    return token
+  })
+
+  // Return the space-separated resolved values
+  return resolvedValues.join(' ')
+}

package/src/styleUtils/index.ts

@@ -27,7 +27,8 @@ export { makeThemeVars } from './makeThemeVars'
 export { getShorthandPropValue } from './getShorthandPropValue'
 export { mirrorShorthandCorners } from './mirrorShorthandCorners'
 export { mirrorShorthandEdges } from './mirrorShorthandEdges'
-export { mapSpacingToShorthand } from './mapSpacingToShorthand'
+export { calcSpacingFromShorthand } from './calcSpacingFromShorthand'
+export { calcFocusOutlineStyles } from './calcFocusOutlineStyles'
 
 export type {
   SpacingValues,

package/src/useStyle.ts

@@ -24,55 +24,86 @@
 
 import { useTheme } from './useTheme'
 import { getComponentThemeOverride } from './getComponentThemeOverride'
-import type { BaseTheme, ComponentTheme } from '@instructure/shared-types'
+import type {
+  SharedTokens,
+  NewComponentTypes,
+  Theme
+} from '@instructure/ui-themes'
+import type { BaseThemeOrOverride } from './EmotionTypes'
 
 // returns the second parameter of a function
 type SecondParameter<T extends (...args: any) => any> =
   Parameters<T>[1] extends undefined ? never : Parameters<T>[1]
 
-type UseStyleParamsWithTheme<P extends (theme: any, params: any) => any> = {
-  generateStyle: P
-  params?: SecondParameter<P>
-  generateComponentTheme: (theme: BaseTheme) => ComponentTheme
-  componentId: string
-  displayName?: string
+type GenerateStyleParams =
+  | ((componentTheme: any, params: any, sharedTokens: SharedTokens) => any)
+  | ((componentTheme: any, params: any) => any)
+  | ((componentTheme: any) => any)
+
+/**
+ * Type for a theme override
+ */
+type ThemeOverrideValue =
+  | Partial<Theme>
+  | ((
+      componentTheme: Theme,
+      currentTheme: NewComponentTypes[keyof NewComponentTypes]
+    ) => Partial<Theme>)
+
+const isNewThemeObject = (obj: BaseThemeOrOverride): obj is Theme => {
+  return typeof (obj as any)?.newTheme === 'object'
 }
 
-type UseStyleParamsWithoutTheme<P extends (theme: any, params: any) => any> = {
+/**
+ * new useStyle syntax, use this with v12 themes
+ */
+
+// TODO: improve useStyle to handle generateStyle functions that don't
+// have a theme.
+const useStyle = <P extends GenerateStyleParams>(useStyleParams: {
   generateStyle: P
   params?: SecondParameter<P>
-  generateComponentTheme?: undefined
-  componentId?: undefined
-  displayName?: undefined
-}
-
-const useStyle = <P extends (theme: any, params: any) => any>(
-  useStyleParams: UseStyleParamsWithTheme<P> | UseStyleParamsWithoutTheme<P>
-): ReturnType<P> => {
-  const {
-    generateStyle,
-    generateComponentTheme,
-    params,
-    componentId,
-    displayName
-  } = useStyleParams
+  // needs to be a string too because it might be a child component
+  componentId: keyof NewComponentTypes | string
+  themeOverride: ThemeOverrideValue | undefined
+  displayName?: string
+  //in case of a child component needed to use it's parent's tokens, provide parent's name
+  useTokensFrom?: keyof NewComponentTypes
+}): ReturnType<P> => {
+  const { generateStyle, params, componentId, displayName, themeOverride } =
+    useStyleParams
+  const useTokensFrom = useStyleParams.useTokensFrom
   const theme = useTheme()
-  const baseComponentTheme = generateComponentTheme
-    ? generateComponentTheme(theme as BaseTheme)
-    : {}
 
-  const themeOverride = getComponentThemeOverride(
+  let baseComponentTheme = {}
+  const componentWithTokensId = useTokensFrom ?? componentId
+
+  if (
+    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
+      ]
+  }
+  const finalOverride = getComponentThemeOverride(
     theme,
-    displayName ? displayName : componentId || '',
-    componentId,
-    params,
+    useTokensFrom ?? displayName ?? componentId ?? '',
+    componentWithTokensId,
+    themeOverride,
     baseComponentTheme
   )
 
-  const componentTheme = { ...baseComponentTheme, ...themeOverride }
+  const componentTheme = { ...baseComponentTheme, ...finalOverride }
 
-  return generateStyle(componentTheme, params ? params : {})
+  return generateStyle(
+    componentTheme,
+    params,
+    (theme as Theme).newTheme.sharedTokens
+  )
 }
 
 export default useStyle
 export { useStyle }
+export type { ThemeOverrideValue }

package/src/useStyleLegacy.ts

@@ -0,0 +1,92 @@
+/*
+ * 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 { useTheme } from './useTheme'
+import { getComponentThemeOverride } from './getComponentThemeOverride'
+import type { ComponentTheme } from '@instructure/shared-types'
+import type { Theme } from '@instructure/ui-themes'
+
+// returns the second parameter of a function
+type SecondParameter<T extends (...args: any) => any> =
+  Parameters<T>[1] extends undefined ? never : Parameters<T>[1]
+
+type GenerateComponentTheme = (theme: Theme) => ComponentTheme
+
+type UseStyleParamsWithTheme<
+  P extends (componentTheme: any, params: any, theme: any) => any
+> = {
+  generateStyle: P
+  params?: SecondParameter<P>
+  generateComponentTheme: GenerateComponentTheme
+  componentId: string
+  displayName?: string
+}
+
+// TODO this is only used by the old themes, remove when everything uses the new
+// theming system
+type UseStyleParamsWithoutTheme<
+  P extends (componentTheme: any, params: any, theme: any) => any
+> = {
+  generateStyle: P
+  params?: SecondParameter<P>
+  generateComponentTheme?: undefined
+  componentId?: undefined
+  displayName?: undefined
+}
+
+/*
+ * This is only used by the **old themes**, remove when everything uses the new
+ * theming system (InstUI v12)
+ */
+const useStyleLegacy = <
+  P extends (componentTheme: any, params: any, theme: any) => any
+>(
+  useStyleParams: UseStyleParamsWithTheme<P> | UseStyleParamsWithoutTheme<P>
+): ReturnType<P> => {
+  const { generateStyle, params, componentId, displayName } = useStyleParams
+  const generateComponentTheme: GenerateComponentTheme = (
+    useStyleParams as UseStyleParamsWithTheme<P>
+  )?.generateComponentTheme
+  const theme = useTheme()
+
+  const baseComponentTheme =
+    typeof generateComponentTheme === 'function'
+      ? generateComponentTheme(theme as Theme)
+      : {}
+
+  const themeOverride = getComponentThemeOverride(
+    theme,
+    displayName ?? componentId ?? '',
+    componentId,
+    params?.themeOverride,
+    baseComponentTheme
+  )
+
+  const componentTheme = { ...baseComponentTheme, ...themeOverride }
+
+  return generateStyle(componentTheme, params ? params : {}, theme)
+}
+
+export default useStyleLegacy
+export { useStyleLegacy }

package/src/useTheme.ts

@@ -40,7 +40,10 @@ const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = useEmotionTheme() as BaseThemeOrOverride
   if (isEmpty(theme)) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (
+      process.env.NODE_ENV !== 'production' ||
+      process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true'
+    ) {
       console.warn(
         `No theme provided for [InstUISettingsProvider], using default <canvas> theme.`
       )