Skip to content

Commit 9d623ed

Browse files
HerrTopiHerrTopi
committed
feat(many): fix issues
1 parent f19f126 commit 9d623ed

92 files changed

Lines changed: 596 additions & 10256 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.fallow/cache.bin‎

-2.69 MB
Binary file not shown.

‎docs/guides/new-theme-overrides.md‎

Lines changed: 224 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ type: example
9797
infoIconBackground: 'purple'
9898
},
9999
Pill: {
100-
primaryBackground: 'purple',
101-
primaryBorderColor: 'purple'
100+
baseTextColor: 'purple',
101+
baseBorderColor: 'purple'
102102
}
103103
}
104104
}}
@@ -274,7 +274,7 @@ type: example
274274
</InstUISettingsProvider>
275275
```
276276

277-
### 8. Per-component `themeOverride` prop
277+
### 8. Component's `themeOverride` prop
278278

279279
Individual component instances accept a `themeOverride` prop for one-off styling. This overrides the component's own tokens and takes highest priority.
280280

@@ -284,7 +284,7 @@ Individual component instances accept a `themeOverride` prop for one-off styling
284284
---
285285
type: example
286286
---
287-
<InstUISettingsProvider theme={canvas}>
287+
<div>
288288
<Alert variant="info" margin="small">
289289
Default info Alert.
290290
</Alert>
@@ -298,7 +298,7 @@ type: example
298298
>
299299
This specific Alert has crimson info styling.
300300
</Alert>
301-
</InstUISettingsProvider>
301+
</div>
302302
```
303303

304304
#### Function form
@@ -390,10 +390,226 @@ type: example
390390
</InstUISettingsProvider>
391391
```
392392

393+
### 11. Overriding shared tokens
394+
395+
Shared tokens are cross-component design tokens for common UI patterns like focus outlines, spacing, border radii, and elevation shadows. They sit alongside semantics and are passed to all component style functions. Overriding shared tokens affects every component that uses them.
396+
397+
#### Focus outline
398+
399+
The `focusOutline` shared tokens control the focus ring appearance across all focusable components.
400+
401+
```js
402+
---
403+
type: example
404+
---
405+
<InstUISettingsProvider theme={light}>
406+
<TextInput renderLabel="Default focus ring" placeholder="Click to focus me" />
407+
408+
<View as="div" margin="small 0 0 0">
409+
<InstUISettingsProvider
410+
themeOverride={{
411+
sharedTokens: {
412+
focusOutline: {
413+
width: '0.25rem',
414+
infoColor: 'deeppink'
415+
}
416+
}
417+
}}
418+
>
419+
<TextInput renderLabel="Custom focus ring" placeholder="Click to focus me" />
420+
</InstUISettingsProvider>
421+
</View>
422+
</InstUISettingsProvider>
423+
```
424+
425+
#### Box shadow (elevation)
426+
427+
The `boxShadow` shared tokens control elevation shadows. Components like `Alert` use these to render drop shadows.
428+
429+
```js
430+
---
431+
type: example
432+
---
433+
<InstUISettingsProvider theme={light}>
434+
<Alert variant="info" margin="small">
435+
Default elevation shadow.
436+
</Alert>
437+
438+
<InstUISettingsProvider
439+
themeOverride={{
440+
sharedTokens: {
441+
boxShadow: {
442+
elevation4: {
443+
0: { color: 'rgba(138, 43, 226, 0.4)', type: 'dropShadow', x: '0px', y: '0.25rem', blur: '0.75rem', spread: '0px' },
444+
1: { color: 'rgba(138, 43, 226, 0.2)', type: 'dropShadow', x: '0px', y: '0.5rem', blur: '1.5rem', spread: '0px' }
445+
}
446+
}
447+
}
448+
}}
449+
>
450+
<Alert variant="info" margin="small">
451+
Custom purple elevation shadow.
452+
</Alert>
453+
</InstUISettingsProvider>
454+
</InstUISettingsProvider>
455+
```
456+
457+
#### Combining shared tokens with other overrides
458+
459+
Shared tokens can be combined with primitives, semantics, and component overrides in a single `themeOverride`.
460+
461+
```js
462+
---
463+
type: example
464+
---
465+
<InstUISettingsProvider theme={light}>
466+
<InstUISettingsProvider
467+
themeOverride={{
468+
sharedTokens: {
469+
focusOutline: {
470+
width: '0.25rem',
471+
infoColor: 'darkorange'
472+
}
473+
},
474+
components: {
475+
Alert: {
476+
infoBorderColor: 'darkorange',
477+
infoIconBackground: 'darkorange'
478+
}
479+
}
480+
}}
481+
>
482+
<Alert variant="info" margin="small">
483+
Alert with orange info styling.
484+
</Alert>
485+
<View as="div" margin="small 0 0 0">
486+
<TextInput renderLabel="Matching orange focus ring" placeholder="Click to focus me" />
487+
</View>
488+
</InstUISettingsProvider>
489+
</InstUISettingsProvider>
490+
```
491+
492+
### 12. Overrides on internal child components
493+
494+
Some components render other components internally. For example, `Button` renders `BaseButton` internally. Provider-level `components.BaseButton` overrides affect all BaseButton instances, including those rendered inside `Button`.
495+
496+
```js
497+
---
498+
type: example
499+
---
500+
<InstUISettingsProvider theme={canvas}>
501+
<InstUISettingsProvider
502+
themeOverride={{
503+
components: {
504+
BaseButton: {
505+
primaryBackground: 'rebeccapurple',
506+
primaryBorderColor: 'rebeccapurple'
507+
}
508+
}
509+
}}
510+
>
511+
<BaseButton color="primary" margin="small">
512+
BaseButton - purple via BaseButton override
513+
</BaseButton>
514+
<Button color="primary" margin="small">
515+
Button - also purple (uses BaseButton internally)
516+
</Button>
517+
</InstUISettingsProvider>
518+
</InstUISettingsProvider>
519+
```
520+
521+
### 13. Per-component `themeOverride` prop overriding provider-level child overrides
522+
523+
When a provider sets `components.BaseButton` overrides, a specific `Button` instance can override those via its own `themeOverride` prop. The per-component prop has the highest priority.
524+
525+
```js
526+
---
527+
type: example
528+
---
529+
<InstUISettingsProvider theme={canvas}>
530+
<InstUISettingsProvider
531+
themeOverride={{
532+
components: {
533+
BaseButton: {
534+
primaryBackground: 'rebeccapurple',
535+
primaryBorderColor: 'rebeccapurple'
536+
}
537+
}
538+
}}
539+
>
540+
<BaseButton color="primary" margin="small">
541+
BaseButton - purple (from provider)
542+
</BaseButton>
543+
<Button color="primary" margin="small">
544+
Button - also purple (inherits BaseButton override)
545+
</Button>
546+
<Button
547+
color="primary"
548+
margin="small"
549+
themeOverride={{
550+
primaryBackground: 'deeppink',
551+
primaryBorderColor: 'deeppink'
552+
}}
553+
>
554+
Button - deeppink (per-component themeOverride wins)
555+
</Button>
556+
</InstUISettingsProvider>
557+
</InstUISettingsProvider>
558+
```
559+
560+
### 14. Overrides on functional (`useStyle`) components
561+
562+
All override patterns work identically on functional components that use the `useStyle` hook. Here, Avatar tokens are overridden the same way as class-based components using `withStyle`.
563+
564+
```js
565+
---
566+
type: example
567+
---
568+
<InstUISettingsProvider theme={light}>
569+
<Avatar name="Default" color="accent1" margin="0 small 0 0" />
570+
571+
<InstUISettingsProvider
572+
themeOverride={{
573+
components: {
574+
Avatar: {
575+
backgroundColor: 'navy',
576+
blueTextColor: 'lime'
577+
}
578+
}
579+
}}
580+
>
581+
<Avatar name="Overridden" color="accent1" margin="0 small 0 0" />
582+
<Avatar name="Unaffected" color="accent2" />
583+
</InstUISettingsProvider>
584+
</InstUISettingsProvider>
585+
```
586+
587+
### 15. Function form `themeOverride` on functional components
588+
589+
The function form also works on `useStyle` components. The function receives the component's calculated theme as the first argument, letting you derive overrides from existing token values.
590+
591+
```js
592+
---
593+
type: example
594+
---
595+
<InstUISettingsProvider theme={light}>
596+
<Avatar name="Default Blue" color="accent1" margin="0 small 0 0" />
597+
<Avatar
598+
name="Swapped to Green"
599+
color="accent1"
600+
themeOverride={(componentTheme) => ({
601+
backgroundColor: componentTheme.greenBackgroundColor,
602+
blueTextColor: componentTheme.greenTextColor
603+
})}
604+
/>
605+
</InstUISettingsProvider>
606+
```
607+
393608
### Override priority (highest to lowest)
394609

395610
1. **Per-component `themeOverride` prop** - affects a single instance
396611
2. **Provider `themeOverride.components`** - affects all instances of a component in the subtree
397-
3. **Provider `themeOverride.semantics`** - affects all components using those semantic tokens
398-
4. **Provider `themeOverride.primitives`** - affects everything that references those raw values
399-
5. **Base theme** (from `theme` prop or inherited from parent provider)
612+
3. **Provider `themeOverride.sharedTokens`** - affects cross-component patterns (focus outlines, spacing, shadows, border radii)
613+
4. **Provider `themeOverride.semantics`** - affects all components using those semantic tokens
614+
5. **Provider `themeOverride.primitives`** - affects everything that references those raw values
615+
6. **Base theme** (from `theme` prop or inherited from parent provider)

‎docs/guides/using-theme-overrides.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ type: example
261261
<InstUISettingsProvider
262262
theme={{
263263
componentOverrides: {
264-
TextInput: { backgroundColor: "yellow" }
264+
TextInput: { background: "yellow" }
265265
}
266266
}}
267267
>

‎dprint.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"typescript": {
44
"semiColons": "asi"
55
},
6-
"excludes": ["**/node_modules", "!packages/ui-themes/src/themes/newThemes/"],
6+
"excludes": [
7+
"**/node_modules",
8+
"!packages/ui-themes/src/themes/newThemeTokens/"
9+
],
710
"plugins": ["https://plugins.dprint.dev/typescript-0.95.11.wasm"]
811
}

‎packages/__docs__/buildScripts/build-docs.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const pathsToIgnore = [
9797
// version export mapping files (e.g. src/exports/a.ts, b.ts)
9898
'**/src/exports/**',
9999
// shared theme token files
100-
'**/src/sharedThemeTokens/**',
100+
'**/src/legacySharedThemeTokens/**',
101101

102102
// packages to ignore:
103103
'**/canvas-theme/**',

‎packages/__docs__/src/withStyleForDocs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { deepEqual as isEqual } from '@instructure/ui-utils'
3535
import { warn } from '@instructure/console'
3636
import { decorator } from '@instructure/ui-decorator'
3737

38-
import { getComponentThemeOverrideLegacy as getComponentThemeOverride } from '@instructure/emotion'
38+
import { getComponentThemeOverride } from '@instructure/emotion'
3939
import { useTheme } from '@instructure/emotion'
4040
import type {
4141
BaseTheme,

‎packages/emotion/src/InstUISettingsProvider/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ import { getTheme } from '../getTheme'
3333
import type { ThemeOrLegacyOverride } from '../EmotionTypes'
3434
import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'
3535
declare const process: Record<string, any> | undefined
36-
import { mergeDeep } from '@instructure/ui-utils'
37-
import { Theme } from '@instructure/ui-themes'
3836

3937
type InstUIProviderProps = {
4038
children?: React.ReactNode

‎packages/emotion/src/__tests__/getComponentThemeOverride.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
import { vi } from 'vitest'
2626
import type { MockInstance } from 'vitest'
2727
import canvas from '@instructure/ui-themes'
28-
import { getComponentThemeOverride } from '../getComponentThemeOverrideLegacy'
28+
import { getComponentThemeOverride } from '../getComponentThemeOverride'
2929

3030
const componentName = 'ExampleComponent'
3131
const componentId = 'Example.Component'

0 commit comments

Comments
 (0)