V12

.github/workflows/pr-validation.yml

@@ -20,34 +20,4 @@ jobs:
         run: npm run lint:commits
       - name: Lint code
         run: npm run lint:changes
-  vitest-tests:
-    name: Vitest unit tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Bootstrap project
-        run: npm run bootstrap
-      - name: Run vitest unit tests
-        run: npm run test:vitest
-  cypress:
-    name: Cypress component tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Bootstrap project
-        run: npm run bootstrap
-      - name: Run Cypress components tests
-        run: npm run cy:component
 

package.json

@@ -14,6 +14,7 @@
     "packages/*"
   ],
   "scripts": {
+    "build:themes": "ui-scripts build-themes",
     "prestart": "npm run bootstrap",
     "start": "npm run start --workspace=docs-app --",
     "start:watch": "npm run start:watch --workspace=docs-app --",
@@ -25,7 +26,7 @@
     "lint:changes": "npm run lint -- --since HEAD^",
     "lint:fix": "lerna run lint:fix --stream",
     "lint:commits": "commitlint --from=HEAD^1",
-    "bootstrap": "node scripts/bootstrap.js",
+    "bootstrap": "node scripts/bootstrap.js && npm run build:themes",
     "build": "lerna run build --stream",
     "build:watch": "lerna run build:watch --stream",
     "build:docs": "lerna run bundle --stream --scope docs-app",

packages/__docs__/buildScripts/build-docs.mts

@@ -27,8 +27,12 @@ import path from 'path'
 import { getClientProps } from './utils/getClientProps.mjs'
 import { processFile } from './processFile.mjs'
 import fs from 'fs'
-import { theme as canvasTheme } from '@instructure/canvas-theme'
-import { theme as canvasHighContrastTheme } from '@instructure/canvas-high-contrast-theme'
+import {
+  canvas,
+  canvasHighContrast,
+  rebrandDark,
+  rebrandLight
+} from '@instructure/ui-themes'
 import type {
   LibraryOptions,
   MainDocsData,
@@ -255,12 +259,20 @@ function tryParseReadme(dirName: string) {
 
 function parseThemes() {
   const parsed: MainDocsData['themes'] = {}
-  parsed[canvasTheme.key] = {
-    resource: canvasTheme,
+  parsed[canvas.key] = {
+    resource: canvas,
     requirePath: '@instructure/canvas-theme'
   }
-  parsed[canvasHighContrastTheme.key] = {
-    resource: canvasHighContrastTheme,
+  parsed[canvasHighContrast.key] = {
+    resource: canvasHighContrast,
+    requirePath: '@instructure/canvas-high-contrast-theme'
+  }
+  parsed[rebrandLight.key] = {
+    resource: rebrandLight,
+    requirePath: '@instructure/canvas-high-contrast-theme'
+  }
+  parsed[rebrandDark.key] = {
+    resource: rebrandDark,
     requirePath: '@instructure/canvas-high-contrast-theme'
   }
   return parsed

packages/__docs__/globals.ts

@@ -40,7 +40,7 @@ import { mirrorHorizontalPlacement } from '@instructure/ui-position'
 
 // eslint-plugin-import doesn't like 'import * as Components' here
 const Components = require('./components')
-
+import { rebrandDark, rebrandLight } from '@instructure/ui-themes'
 import { debounce } from '@instructure/debounce'
 
 // eslint-disable-next-line no-restricted-imports
@@ -77,6 +77,8 @@ const lorem = new LoremIpsum({
 const globals = {
   ...Components,
   debounce,
+  rebrandLight,
+  rebrandDark,
   moment,
   avatarSquare,
   avatarPortrait,

packages/emotion/src/useStyle.ts

@@ -57,10 +57,22 @@ const useStyle = <P extends (theme: any, params: any) => any>(
     displayName
   } = useStyleParams
   const theme = useTheme()
-  const baseComponentTheme = generateComponentTheme
-    ? generateComponentTheme(theme as BaseTheme)
-    : {}
 
+  let baseComponentTheme =
+    typeof generateComponentTheme === 'function'
+      ? generateComponentTheme(theme as BaseTheme)
+      : {}
+
+  if (
+    //@ts-expect-error TODO fix these later
+    theme.newTheme &&
+    //@ts-expect-error TODO fix these later
+    theme.newTheme.components[componentId]
+  ) {
+    baseComponentTheme =
+      //@ts-expect-error TODO fix these later
+      theme.newTheme.components[componentId]
+  }
   const themeOverride = getComponentThemeOverride(
     theme,
     displayName ? displayName : componentId || '',

packages/emotion/src/withStyle.tsx

@@ -202,20 +202,30 @@ const withStyle = decorator(
         ...defaultValues
       }
 
-      let componentTheme: ComponentTheme =
+      let baseComponentTheme =
         typeof generateComponentTheme === 'function'
           ? generateComponentTheme(theme as BaseTheme)
           : {}
+      if (
+        //@ts-expect-error TODO fix these later
+        theme.newTheme &&
+        //@ts-expect-error TODO fix these later
+        theme.newTheme.components[ComposedComponent.componentId]
+      ) {
+        baseComponentTheme =
+          //@ts-expect-error TODO fix these later
+          theme.newTheme.components[ComposedComponent.componentId]
+      }
 
       const themeOverride = getComponentThemeOverride(
         theme,
         displayName,
         ComposedComponent.componentId,
         componentProps,
-        componentTheme
+        baseComponentTheme
       )
 
-      componentTheme = { ...componentTheme, ...themeOverride }
+      const componentTheme = { ...baseComponentTheme, ...themeOverride }
 
       const [styles, setStyles] = useState(
         generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}

packages/shared-types/src/BaseTheme.ts

@@ -202,6 +202,7 @@ type BaseThemeVariableKeys = [
 ]
 
 type BaseTheme = {
+  newTheme?: any
   key: string
   description?: string
 } & BaseThemeVariables