@instructure/ui-themes 11.7.4-snapshot-11 → 11.7.4-snapshot-49

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-11](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-11) (2026-05-19)
+## [11.7.4-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-49) (2026-06-17)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/README.md

@@ -39,7 +39,10 @@ ReactDOM.render(
 )
 ```
 
-> You can read more about how our theming system works and how to use it [here](/#using-theme-overrides)
+> You can read more about how our theming system works and how to use it:
+
+- [Legacy theme overrides](/#legacy-theme-overrides).
+- [New theme overrides](/#new-theme-overrides).
 
 [npm]: https://img.shields.io/npm/v/@instructure/ui-themes.svg
 [npm-url]: https://npmjs.com/package/@instructure/ui-themes

package/es/index.js

@@ -21,12 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import canvasHighContrast from "./themes/canvasHighContrast/index.js";
-import canvas from "./themes/canvas/index.js";
-import dark from "./themes/dark/index.js";
-import light from "./themes/light/index.js";
-import { primitives, additionalPrimitives } from "./legacySharedThemeTokens/colors/primitives.js";
-import dataVisualization from "./legacySharedThemeTokens/colors/dataVisualization.js";
-import { boxShadowObjectsToCSSString } from "./utils/boxShadowObjectToString.js"; // converts `AA: (semantics: any) => AA` to `AA: AA`
-export { dark, light, canvas, canvasHighContrast, primitives, additionalPrimitives, dataVisualization, boxShadowObjectsToCSSString };
+
+import canvasHighContrast from './themes/canvasHighContrast/index.js';
+import canvas from './themes/canvas/index.js';
+import dark from './themes/dark/index.js';
+import light from './themes/light/index.js';
+import { primitives, additionalPrimitives } from './legacySharedThemeTokens/colors/primitives.js';
+import dataVisualization from './legacySharedThemeTokens/colors/dataVisualization.js';
+import { boxShadowObjectsToCSSString } from './utils/boxShadowObjectToString.js';
+import { legacyCanvas, legacyCanvasHighContrast } from "./themes/newThemeTokens/index.js"; // converts `AA: (semantics: any) => AA` to `AA: AA`
+export { dark, light, canvas, canvasHighContrast, legacyCanvas, legacyCanvasHighContrast, primitives, additionalPrimitives, dataVisualization, boxShadowObjectsToCSSString };
 export default canvas;

package/es/legacySharedThemeTokens/colors/dataVisualization.js

@@ -21,7 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { additionalPrimitives } from "./primitives.js";
+
+import { additionalPrimitives } from './primitives.js';
 const dataVisualization = {
   rose12Primary: additionalPrimitives.rose12,
   rose30Primary: additionalPrimitives.rose30,

package/es/legacySharedThemeTokens/index.js

@@ -21,15 +21,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { borders } from "./borders.js";
-import { transitions } from "./transitions.js";
-import { typography } from "./typography.js";
-import { spacing } from "./spacing.js";
-import { forms } from "./forms.js";
-import { media } from "./media.js";
-import { breakpoints } from "./breakpoints.js";
-import { shadows } from "./shadows.js";
-import { stacking } from "./stacking.js";
+
+import { borders } from './borders.js';
+import { transitions } from './transitions.js';
+import { typography } from './typography.js';
+import { spacing } from './spacing.js';
+import { forms } from './forms.js';
+import { media } from './media.js';
+import { breakpoints } from './breakpoints.js';
+import { shadows } from './shadows.js';
+import { stacking } from './stacking.js';
 const canvas = {
   borders,
   transitions,

package/es/legacySharedThemeTokens/media.js

@@ -21,7 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { breakpoints } from "./breakpoints.js";
+
+import { breakpoints } from './breakpoints.js';
 const media = Object.freeze({
   mediumMin: `min-width: ${breakpoints.medium}`,
   largeMin: `min-width: ${breakpoints.large}`,

package/es/themes/canvas/colors.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { primitives, additionalPrimitives } from "../../legacySharedThemeTokens/colors/primitives.js";
-import dataVisualization from "../../legacySharedThemeTokens/colors/dataVisualization.js";
-import getUIColors from "../../utils/getUIColors.js";
+
+import { primitives, additionalPrimitives } from '../../legacySharedThemeTokens/colors/primitives.js';
+import dataVisualization from '../../legacySharedThemeTokens/colors/dataVisualization.js';
+import getUIColors from '../../utils/getUIColors.js';
 const contrasts = {
   white1010: primitives.white,
   white1010op75: primitives.white10op75,

package/es/themes/canvas/index.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
-import { colors } from "./colors.js";
-import { legacyCanvas as canvas } from "../newThemeTokens/index.js";
+
+import legacySharedThemeTokens from '../../legacySharedThemeTokens/index.js';
+import { colors } from './colors.js';
+import { legacyCanvas as canvas } from '../newThemeTokens/index.js';
 const key = 'canvas';
 const brandVariables = {
   /* Defaults for Canvas account branding variables: */

package/es/themes/canvasHighContrast/colors.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { primitives, additionalPrimitives } from "../../legacySharedThemeTokens/colors/primitives.js";
-import dataVisualization from "../../legacySharedThemeTokens/colors/dataVisualization.js";
-import getUIColors from "../../utils/getUIColors.js";
+
+import { primitives, additionalPrimitives } from '../../legacySharedThemeTokens/colors/primitives.js';
+import dataVisualization from '../../legacySharedThemeTokens/colors/dataVisualization.js';
+import getUIColors from '../../utils/getUIColors.js';
 const contrasts = {
   white1010: primitives.white,
   white1010op75: primitives.white10op75,

package/es/themes/canvasHighContrast/index.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
-import { colors } from "./colors.js";
-import { legacyCanvasHighContrast as newCanvasHighContrast } from "../newThemeTokens/index.js";
+
+import legacySharedThemeTokens from '../../legacySharedThemeTokens/index.js';
+import { colors } from './colors.js';
+import { legacyCanvasHighContrast as newCanvasHighContrast } from '../newThemeTokens/index.js';
 const key = 'canvas-high-contrast';
 /**
  * Canvas high contrast theme without the `use` function and `variables` prop.

package/es/themes/dark/index.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
-import { colors } from "../canvas/colors.js";
-import { dark } from "../newThemeTokens/index.js";
+
+import legacySharedThemeTokens from '../../legacySharedThemeTokens/index.js';
+import { colors } from '../canvas/colors.js';
+import { dark } from '../newThemeTokens/index.js';
 const key = 'dark';
 const theme = {
   newTheme: dark,

package/es/themes/light/index.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
-import { colors } from "../canvas/colors.js";
-import { light } from "../newThemeTokens/index.js";
+
+import legacySharedThemeTokens from '../../legacySharedThemeTokens/index.js';
+import { colors } from '../canvas/colors.js';
+import { light } from '../newThemeTokens/index.js';
 const key = 'light';
 const theme = {
   newTheme: light,

package/es/themes/newThemeTokens/componentTypes/chart.js

@@ -0,0 +1 @@
+export {};

package/es/themes/newThemeTokens/dark/components/aiInformation.js

@@ -22,18 +22,18 @@
  * SOFTWARE.
  */
 
-const aiInformation = semantics => ({
-  bodyPadding: semantics.spacing.spaceXl,
-  headingBottomMargin: semantics.spacing.spaceXl,
-  featureNameBottomMargin: semantics.spacing.spaceLg,
-  permissionLevelTextBottomMargin: semantics.spacing.spaceSm,
-  permissionLevelBottomMargin: semantics.spacing.spaceSm,
-  descriptionBottomMargin: semantics.spacing.spaceSm,
-  modelNameTextBottomMargin: semantics.spacing.spaceXs,
-  modelNameBottomMargin: semantics.spacing.spaceXs,
-  dividerMargin: semantics.spacing.spaceLg,
-  dividerColor: semantics.color.stroke.muted,
-  levelColor: semantics.color.text.aiColor,
-  permissionLevelsModalTriggerBottomMargin: semantics.spacing.spaceXl
+const aiInformation = semantic => ({
+  bodyPadding: semantic.spacing.spaceXl,
+  headingBottomMargin: semantic.spacing.spaceXl,
+  featureNameBottomMargin: semantic.spacing.spaceLg,
+  permissionLevelTextBottomMargin: semantic.spacing.spaceSm,
+  permissionLevelBottomMargin: semantic.spacing.spaceSm,
+  descriptionBottomMargin: semantic.spacing.spaceSm,
+  modelNameTextBottomMargin: semantic.spacing.spaceXs,
+  modelNameBottomMargin: semantic.spacing.spaceXs,
+  dividerMargin: semantic.spacing.spaceLg,
+  dividerColor: semantic.color.stroke.muted,
+  levelColor: semantic.color.text.aiColor,
+  permissionLevelsModalTriggerBottomMargin: semantic.spacing.spaceXl
 });
 export default aiInformation;

package/es/themes/newThemeTokens/dark/components/alert.js

@@ -22,28 +22,28 @@
  * SOFTWARE.
  */
 
-const alert = semantics => ({
-  background: semantics.color.background.elevatedSurface.base,
-  borderRadius: semantics.borderRadius.lg,
+const alert = semantic => ({
+  background: semantic.color.background.elevatedSurface.base,
+  borderRadius: semantic.borderRadius.lg,
   borderStyle: "solid",
-  borderWidth: semantics.borderWidth.md,
+  borderWidth: semantic.borderWidth.md,
   closeButtonMarginRight: "0.5rem",
   closeButtonMarginTop: "0.5rem",
-  color: semantics.color.text.base,
-  contentFontFamily: semantics.fontFamily.base,
-  contentFontSize: semantics.fontSize.textBase,
-  contentFontWeight: semantics.fontWeight.body.base,
-  contentLineHeight: semantics.lineHeight.standalone.base,
-  dangerBorderColor: semantics.color.stroke.error,
-  dangerIconBackground: semantics.color.background.error,
-  iconColor: semantics.color.icon.onColor,
-  infoBorderColor: semantics.color.stroke.info,
-  infoIconBackground: semantics.color.background.info,
-  successBorderColor: semantics.color.stroke.success,
-  successIconBackground: semantics.color.background.success,
-  warningBorderColor: semantics.color.stroke.warning,
-  warningIconBackground: semantics.color.background.warning,
-  contentPaddingVertical: semantics.spacing.spaceMd,
-  contentPaddingHorizontal: semantics.spacing.spaceXl
+  color: semantic.color.text.base,
+  contentFontFamily: semantic.fontFamily.base,
+  contentFontSize: semantic.fontSize.textBase,
+  contentFontWeight: semantic.fontWeight.body.base,
+  contentLineHeight: semantic.lineHeight.standalone.base,
+  dangerBorderColor: semantic.color.stroke.error,
+  dangerIconBackground: semantic.color.background.error,
+  iconColor: semantic.color.icon.onColor,
+  infoBorderColor: semantic.color.stroke.info,
+  infoIconBackground: semantic.color.background.info,
+  successBorderColor: semantic.color.stroke.success,
+  successIconBackground: semantic.color.background.success,
+  warningBorderColor: semantic.color.stroke.warning,
+  warningIconBackground: semantic.color.background.warning,
+  contentPaddingVertical: semantic.spacing.spaceMd,
+  contentPaddingHorizontal: semantic.spacing.spaceXl
 });
 export default alert;

package/es/themes/newThemeTokens/dark/components/appNav.js

@@ -22,11 +22,11 @@
  * SOFTWARE.
  */
 
-const appNav = semantics => ({
-  borderColor: semantics.color.stroke.muted,
+const appNav = semantic => ({
+  borderColor: semantic.color.stroke.muted,
   borderStyle: "solid",
-  borderWidth: semantics.borderWidth.sm,
-  fontFamily: semantics.fontFamily.base,
+  borderWidth: semantic.borderWidth.sm,
+  fontFamily: semantic.fontFamily.base,
   height: "3.75rem",
   horizontalMargin: "0.375rem",
   menuTriggerWidth: "7.5rem"

package/es/themes/newThemeTokens/dark/components/appNavItem.js

@@ -22,14 +22,14 @@
  * SOFTWARE.
  */
 
-const appNavItem = semantics => ({
-  fontFamily: semantics.fontFamily.base,
-  backgroundColor: semantics.color.background.elevatedSurface.base,
-  fontWeight: semantics.fontWeight.body.strong,
+const appNavItem = semantic => ({
+  fontFamily: semantic.fontFamily.base,
+  backgroundColor: semantic.color.background.elevatedSurface.base,
+  fontWeight: semantic.fontWeight.body.strong,
   height: "2.25rem",
-  padding: semantics.spacing.padding.container.xs,
-  textColor: semantics.color.text.accent.blue,
-  textColorSelected: semantics.color.text.accent.ash,
+  padding: semantic.spacing.padding.container.xs,
+  textColor: semantic.color.text.accent.blue,
+  textColorSelected: semantic.color.text.accent.ash,
   fontSize: "1.125rem"
 });
 export default appNavItem;

package/es/themes/newThemeTokens/dark/components/avatar.js

@@ -22,11 +22,11 @@
  * SOFTWARE.
  */
 
-const avatar = semantics => ({
-  backgroundColor: semantics.color.background.base,
-  borderColor: semantics.color.stroke.base,
-  borderWidthSm: semantics.borderWidth.sm,
-  borderWidthMd: semantics.borderWidth.md,
+const avatar = semantic => ({
+  backgroundColor: semantic.color.background.base,
+  borderColor: semantic.color.stroke.base,
+  borderWidthSm: semantic.borderWidth.sm,
+  borderWidthMd: semantic.borderWidth.md,
   boxShadow: {
     x: 0,
     y: 0,
@@ -35,22 +35,22 @@ const avatar = semantics => ({
     color: "rgba(45,59,69,0.12)",
     type: "innerShadow"
   },
-  fontWeight: semantics.fontWeight.heading.base,
-  blueBackgroundColor: semantics.color.background.accent.blue,
-  blueTextColor: semantics.color.text.accent.blue,
-  greenBackgroundColor: semantics.color.background.accent.green,
-  greenTextColor: semantics.color.text.accent.green,
-  redBackgroundColor: semantics.color.background.accent.red,
-  redTextColor: semantics.color.text.accent.red,
-  orangeBackgroundColor: semantics.color.background.accent.orange,
-  orangeTextColor: semantics.color.text.accent.orange,
-  greyBackgroundColor: semantics.color.background.accent.grey,
-  greyTextColor: semantics.color.text.accent.grey,
-  ashBackgroundColor: semantics.color.background.accent.ash,
-  ashTextColor: semantics.color.text.accent.ash,
-  aiBottomGradientColor: semantics.color.background.aiBottomGradient,
-  aiTopGradientColor: semantics.color.background.aiTopGradient,
-  textOnColor: semantics.color.text.onColor,
+  fontWeight: semantic.fontWeight.heading.base,
+  blueBackgroundColor: semantic.color.background.accent.blue,
+  blueTextColor: semantic.color.text.accent.blue,
+  greenBackgroundColor: semantic.color.background.accent.green,
+  greenTextColor: semantic.color.text.accent.green,
+  redBackgroundColor: semantic.color.background.accent.red,
+  redTextColor: semantic.color.text.accent.red,
+  orangeBackgroundColor: semantic.color.background.accent.orange,
+  orangeTextColor: semantic.color.text.accent.orange,
+  greyBackgroundColor: semantic.color.background.accent.grey,
+  greyTextColor: semantic.color.text.accent.grey,
+  ashBackgroundColor: semantic.color.background.accent.ash,
+  ashTextColor: semantic.color.text.accent.ash,
+  aiBottomGradientColor: semantic.color.background.aiBottomGradient,
+  aiTopGradientColor: semantic.color.background.aiTopGradient,
+  textOnColor: semantic.color.text.onColor,
   size2xs: "1.5rem",
   sizeXs: "2rem",
   sizeSm: "2.5rem",
@@ -58,14 +58,14 @@ const avatar = semantics => ({
   sizeLg: "3.5rem",
   sizeXl: "4rem",
   size2xl: "5rem",
-  fontSize2xs: semantics.fontSize.textXs,
-  fontSizeXs: semantics.fontSize.textXs,
-  fontSizeSm: semantics.fontSize.textSm,
-  fontSizeMd: semantics.fontSize.textBase,
-  fontSizeLg: semantics.fontSize.textLg,
-  fontSizeXl: semantics.fontSize.textXl,
-  fontSize2xl: semantics.fontSize.text2xl,
-  fontFamily: semantics.fontFamily.base,
-  rectangleRadius: semantics.borderRadius.sm
+  fontSize2xs: semantic.fontSize.textXs,
+  fontSizeXs: semantic.fontSize.textXs,
+  fontSizeSm: semantic.fontSize.textSm,
+  fontSizeMd: semantic.fontSize.textBase,
+  fontSizeLg: semantic.fontSize.textLg,
+  fontSizeXl: semantic.fontSize.textXl,
+  fontSize2xl: semantic.fontSize.text2xl,
+  fontFamily: semantic.fontFamily.base,
+  rectangleRadius: semantic.borderRadius.sm
 });
 export default avatar;

package/es/themes/newThemeTokens/dark/components/badge.js

@@ -22,19 +22,19 @@
  * SOFTWARE.
  */
 
-const badge = semantics => ({
-  borderRadius: semantics.borderRadius.full,
-  fontFamily: semantics.fontFamily.base,
-  color: semantics.color.text.onColor,
-  colorInverse: semantics.color.text.dark,
-  colorDanger: semantics.color.background.error,
-  colorSuccess: semantics.color.background.success,
-  colorPrimary: semantics.color.background.info,
-  fontSize: semantics.fontSize.textSm,
-  fontWeight: semantics.fontWeight.body.strong,
+const badge = semantic => ({
+  borderRadius: semantic.borderRadius.full,
+  fontFamily: semantic.fontFamily.base,
+  color: semantic.color.text.onColor,
+  colorInverse: semantic.color.text.dark,
+  colorDanger: semantic.color.background.error,
+  colorSuccess: semantic.color.background.success,
+  colorPrimary: semantic.color.background.info,
+  fontSize: semantic.fontSize.textSm,
+  fontWeight: semantic.fontWeight.body.strong,
   sizeNotification: "0.75rem",
   size: "1.25rem",
-  padding: semantics.spacing.spaceXs,
+  padding: semantic.spacing.spaceXs,
   notificationOffset: "0.125rem",
   notificationZIndex: 1,
   pulseBorderThickness: "0.125rem",