feat(many): add new theming solution

Author: HerrTopi

.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/emotion/src/useStyle.ts

@@ -58,17 +58,18 @@ const useStyle = <P extends (theme: any, params: any) => any>(
   } = useStyleParams
   const theme = useTheme()
 
-  let baseComponentTheme = generateComponentTheme
-    ? generateComponentTheme(theme as BaseTheme)
-    : {}
+  let baseComponentTheme =
+    typeof generateComponentTheme === 'function'
+      ? generateComponentTheme(theme as BaseTheme)
+      : {}
   if (
-    //@ts-expect-error asd
+    //@ts-expect-error TODO fix these later
     theme.newTheme &&
-    //@ts-expect-error asd
+    //@ts-expect-error TODO fix these later
     theme.newTheme.components[componentId?.toLocaleLowerCase()]
   ) {
     baseComponentTheme =
-      //@ts-expect-error asd
+      //@ts-expect-error TODO fix these later
       theme.newTheme.components[componentId?.toLocaleLowerCase()]
   }
 

packages/emotion/src/withStyle.tsx

@@ -201,20 +201,34 @@ 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?.toLocaleLowerCase()
+        ]
+      ) {
+        baseComponentTheme =
+          //@ts-expect-error TODO fix these later
+          theme.newTheme.components[
+            ComposedComponent.componentId?.toLocaleLowerCase()
+          ]
+      }
 
       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/ui-color-picker/src/ColorContrast/index.tsx

@@ -119,7 +119,7 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
           {description}
         </div>
         <div css={styles?.statusIndicatorWrapper}>
-          <Pill color={pass ? 'success' : 'danger'}>
+          <Pill color={pass ? 'success' : 'error'}>
             {pass ? successLabel : failureLabel}
           </Pill>
         </div>

packages/ui-pill/src/Pill/README.md

@@ -32,13 +32,6 @@ type: example
   >
     Checked In
   </Pill>
-  <Pill
-    renderIcon={<IconEndLine />}
-    color="danger"
-    margin="x-small"
-  >
-    Missing
-  </Pill>
   <Pill
     renderIcon={<IconClockLine />}
     color="warning"
@@ -48,7 +41,7 @@ type: example
   </Pill>
   <Pill
     renderIcon={<IconMessageLine />}
-    color="alert"
+    color="error"
     margin="x-small"
   >
     Notification

packages/ui-pill/src/Pill/props.ts

@@ -38,7 +38,7 @@ import type {
 
 type PillOwnProps = {
   as?: AsElementType
-  color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert'
+  color?: 'primary' | 'success' | 'info' | 'warning' | 'error'
   /**
    * Provides a reference to the underlying HTML element
    */
@@ -76,14 +76,7 @@ type PillStyle = ComponentStyle<
 const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType,
   children: PropTypes.node.isRequired,
-  color: PropTypes.oneOf([
-    'primary',
-    'success',
-    'danger',
-    'info',
-    'warning',
-    'alert'
-  ]),
+  color: PropTypes.oneOf(['primary', 'success', 'info', 'warning', 'error']),
   elementRef: PropTypes.func,
   margin: PropTypes.string,
   statusLabel: PropTypes.string,

packages/ui-pill/src/Pill/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { PillTheme } from '@instructure/shared-types'
+import type { NewCanvas } from '@instructure/ui-themes'
 import type { PillProps, PillStyle } from './props'
 
 /**
@@ -36,35 +36,31 @@ import type { PillProps, PillStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: PillTheme,
+  componentTheme: NewCanvas['components']['pill'],
   props: PillProps
 ): PillStyle => {
   const { color } = props
 
   const pillColorVariants = {
     primary: {
-      color: componentTheme.primaryColor,
-      borderColor: componentTheme.primaryColor
+      color: componentTheme.primaryText,
+      borderColor: componentTheme.primaryBorder
     },
     success: {
-      color: componentTheme.successColor,
-      borderColor: componentTheme.successColor
-    },
-    danger: {
-      color: componentTheme.dangerColor,
-      borderColor: componentTheme.dangerColor
+      color: componentTheme.successText,
+      borderColor: componentTheme.successBorder
     },
     info: {
-      color: componentTheme.infoColor,
-      borderColor: componentTheme.infoColor
+      color: componentTheme.infoText,
+      borderColor: componentTheme.infoBorder
     },
     warning: {
-      color: componentTheme.warningColor,
-      borderColor: componentTheme.warningColor
+      color: componentTheme.warningText,
+      borderColor: componentTheme.warningBorder
     },
-    alert: {
-      color: componentTheme.alertColor,
-      borderColor: componentTheme.alertColor
+    error: {
+      color: componentTheme.errorText,
+      borderColor: componentTheme.errorBorder
     }
   }
 
@@ -74,12 +70,11 @@ const generateStyle = (
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      fontFamily: componentTheme.fontFamily,
       boxSizing: 'border-box',
-      padding: componentTheme.padding,
+      padding: `0 ${componentTheme.paddingHorizontal}`,
       background: componentTheme.background,
       borderWidth: componentTheme.borderWidth,
-      borderStyle: componentTheme.borderStyle,
+      borderStyle: componentTheme.borderStyle.style,
       borderRadius: componentTheme.borderRadius,
       /* line-height does not account for top/bottom border width */
       lineHeight: `calc(${componentTheme.height} - (${componentTheme.borderWidth} * 2))`,

packages/ui-scripts/lib/build/build-themes.js

@@ -0,0 +1,42 @@
+/*
+ * 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 path, { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import fs from 'fs'
+import setupThemes from './buildThemes/setupThemes.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
+  command: 'build-themes',
+  desc: 'Generate themes',
+  handler: async () => {
+    const rawData = fs.readFileSync(
+      path.join(__dirname, 'tokenStudioThemeTokens.json')
+    )
+    setupThemes('packages/ui-themes/src/themes/newThemes', rawData)
+  }
+}

packages/ui-scripts/lib/build/buildThemes/createFile.js

@@ -0,0 +1,66 @@
+/*
+ * 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 fs from 'fs'
+import { execSync } from 'child_process'
+
+const license = `/*
+ * 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.
+ */
+
+`
+
+const createFile = (filePath, fileContent) => {
+  if (fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath)
+  }
+
+  fs.mkdirSync(filePath.split('/').slice(0, -1).join('/'), { recursive: true })
+  fs.writeFileSync(filePath, `${license} ${fileContent}`)
+  // eslint-disable-next-line no-console
+  console.log(`Creating theme file: ${filePath}`)
+  execSync(`npx prettier --write ${filePath} --ignore-path .prettierignore`)
+}
+
+export default createFile