Skip to content

Commit c435c6a

Browse files
HerrTopiHerrTopi
committed
feat(many): add new theming solution
1 parent 438cabb commit c435c6a

File tree

28 files changed

+7724
-105
lines changed

28 files changed

+7724
-105
lines changed

‎.github/workflows/pr-validation.yml‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,4 @@ jobs:
2020
run: npm run lint:commits
2121
- name: Lint code
2222
run: npm run lint:changes
23-
vitest-tests:
24-
name: Vitest unit tests
25-
runs-on: ubuntu-latest
26-
steps:
27-
- uses: actions/checkout@v4
28-
- uses: actions/setup-node@v4
29-
with:
30-
node-version: '22'
31-
cache: 'npm'
32-
- name: Install dependencies
33-
run: npm ci
34-
- name: Bootstrap project
35-
run: npm run bootstrap
36-
- name: Run vitest unit tests
37-
run: npm run test:vitest
38-
cypress:
39-
name: Cypress component tests
40-
runs-on: ubuntu-latest
41-
steps:
42-
- uses: actions/checkout@v4
43-
- uses: actions/setup-node@v4
44-
with:
45-
node-version: '22'
46-
cache: 'npm'
47-
- name: Install dependencies
48-
run: npm ci
49-
- name: Bootstrap project
50-
run: npm run bootstrap
51-
- name: Run Cypress components tests
52-
run: npm run cy:component
5323

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"packages/*"
1515
],
1616
"scripts": {
17+
"build:themes": "ui-scripts build-themes",
1718
"prestart": "npm run bootstrap",
1819
"start": "npm run start --workspace=docs-app --",
1920
"start:watch": "npm run start:watch --workspace=docs-app --",
@@ -25,7 +26,7 @@
2526
"lint:changes": "npm run lint -- --since HEAD^",
2627
"lint:fix": "lerna run lint:fix --stream",
2728
"lint:commits": "commitlint --from=HEAD^1",
28-
"bootstrap": "node scripts/bootstrap.js",
29+
"bootstrap": "node scripts/bootstrap.js && npm run build:themes",
2930
"build": "lerna run build --stream",
3031
"build:watch": "lerna run build:watch --stream",
3132
"build:docs": "lerna run bundle --stream --scope docs-app",

‎packages/__docs__/globals.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { mirrorHorizontalPlacement } from '@instructure/ui-position'
4040

4141
// eslint-plugin-import doesn't like 'import * as Components' here
4242
const Components = require('./components')
43-
43+
import { rebrandDark, rebrandLight } from '@instructure/ui-themes'
4444
import { debounce } from '@instructure/debounce'
4545

4646
// eslint-disable-next-line no-restricted-imports
@@ -77,6 +77,8 @@ const lorem = new LoremIpsum({
7777
const globals = {
7878
...Components,
7979
debounce,
80+
rebrandLight,
81+
rebrandDark,
8082
moment,
8183
avatarSquare,
8284
avatarPortrait,

‎packages/emotion/src/useStyle.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,22 @@ const useStyle = <P extends (theme: any, params: any) => any>(
5757
displayName
5858
} = useStyleParams
5959
const theme = useTheme()
60-
const baseComponentTheme = generateComponentTheme
61-
? generateComponentTheme(theme as BaseTheme)
62-
: {}
6360

61+
let baseComponentTheme =
62+
typeof generateComponentTheme === 'function'
63+
? generateComponentTheme(theme as BaseTheme)
64+
: {}
65+
66+
if (
67+
//@ts-expect-error TODO fix these later
68+
theme.newTheme &&
69+
//@ts-expect-error TODO fix these later
70+
theme.newTheme.components[componentId]
71+
) {
72+
baseComponentTheme =
73+
//@ts-expect-error TODO fix these later
74+
theme.newTheme.components[componentId]
75+
}
6476
const themeOverride = getComponentThemeOverride(
6577
theme,
6678
displayName ? displayName : componentId || '',

‎packages/emotion/src/withStyle.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,20 +201,30 @@ const withStyle = decorator(
201201
...defaultValues
202202
}
203203

204-
let componentTheme: ComponentTheme =
204+
let baseComponentTheme =
205205
typeof generateComponentTheme === 'function'
206206
? generateComponentTheme(theme as BaseTheme)
207207
: {}
208+
if (
209+
//@ts-expect-error TODO fix these later
210+
theme.newTheme &&
211+
//@ts-expect-error TODO fix these later
212+
theme.newTheme.components[ComposedComponent.componentId]
213+
) {
214+
baseComponentTheme =
215+
//@ts-expect-error TODO fix these later
216+
theme.newTheme.components[ComposedComponent.componentId]
217+
}
208218

209219
const themeOverride = getComponentThemeOverride(
210220
theme,
211221
displayName,
212222
ComposedComponent.componentId,
213223
componentProps,
214-
componentTheme
224+
baseComponentTheme
215225
)
216226

217-
componentTheme = { ...componentTheme, ...themeOverride }
227+
const componentTheme = { ...baseComponentTheme, ...themeOverride }
218228

219229
const [styles, setStyles] = useState(
220230
generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}

‎packages/shared-types/src/BaseTheme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ type BaseThemeVariableKeys = [
202202
]
203203

204204
type BaseTheme = {
205+
newTheme?: any
205206
key: string
206207
description?: string
207208
} & BaseThemeVariables

‎packages/ui-avatar/src/Avatar/README.md‎

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,113 @@ The avatar can be `circle` _(default)_ or `rectangle`. Use the `margin` prop to
1313
type: example
1414
readonly: true
1515
---
16+
1617
<div>
17-
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" />
18-
<Avatar name="Sarah Robinson" margin="0 space8 0 0" />
19-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" />
20-
<Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 space8 0 0" />
21-
<Avatar name="Kyle Montgomery" shape="rectangle" margin="0 space8 0 0" />
22-
<Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
18+
<InstUISettingsProvider theme={canvas}>
19+
<div>
20+
<View display="block" padding="small medium" background="primary">
21+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
22+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
23+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
24+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
25+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
26+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
27+
<Avatar name="Isaac Asimov" color="ash" />
28+
</View>
29+
</div>
30+
</InstUISettingsProvider>
31+
<InstUISettingsProvider theme={rebrandDark}>
32+
<div>
33+
<View display="block" padding="small medium" background="primary">
34+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
35+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
36+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
37+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
38+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
39+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
40+
<Avatar name="Isaac Asimov" color="ash" />
41+
</View>
42+
</div>
43+
</InstUISettingsProvider>
44+
<InstUISettingsProvider theme={rebrandLight}>
45+
<div>
46+
<View display="block" padding="small medium" background="primary">
47+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
48+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
49+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
50+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
51+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
52+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
53+
<Avatar name="Isaac Asimov" color="ash" />
54+
</View>
55+
</div>
56+
</InstUISettingsProvider>
57+
<InstUISettingsProvider theme={canvasHighContrast}>
58+
<div>
59+
<View display="block" padding="small medium" background="primary">
60+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
61+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
62+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
63+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
64+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
65+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
66+
<Avatar name="Isaac Asimov" color="ash" />
67+
</View>
68+
</div>
69+
</InstUISettingsProvider>
70+
<InstUISettingsProvider theme={canvas}>
71+
<div>
72+
<View display="block" padding="small medium" background="primary">
73+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
74+
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
75+
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
76+
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
77+
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
78+
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
79+
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
80+
</View>
81+
</div>
82+
</InstUISettingsProvider>
83+
<InstUISettingsProvider theme={rebrandDark}>
84+
<div>
85+
<View display="block" padding="small medium" background="primary">
86+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
87+
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
88+
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
89+
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
90+
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
91+
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
92+
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
93+
</View>
94+
</div>
95+
</InstUISettingsProvider>
96+
<InstUISettingsProvider theme={rebrandLight}>
97+
<div>
98+
<View display="block" padding="small medium" background="primary">
99+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
100+
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
101+
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
102+
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
103+
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
104+
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
105+
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
106+
</View>
107+
</div>
108+
</InstUISettingsProvider>
109+
<InstUISettingsProvider theme={canvasHighContrast}>
110+
<div>
111+
<View display="block" padding="small medium" background="primary">
112+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
113+
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
114+
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
115+
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
116+
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
117+
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
118+
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
119+
</View>
23120
</div>
121+
</InstUISettingsProvider>
122+
</div>
24123
```
25124

26125
### AI Avatar

0 commit comments

Comments
 (0)