@atomazing-org/design-system 2.0.2 → 3.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +343 -34
- package/dist/index.d.ts +11 -15
- package/dist/index.js +22 -22
- package/dist/presets/index.d.ts +10 -2
- package/dist/presets/index.js +283 -263
- package/dist/themePresets-CwgG5XEL.d.ts +65 -0
- package/dist/themePresets-CwgG5XEL.js +1 -0
- package/migrations/README.UPDATE.md +2 -0
- package/migrations/docs/migrations/design-system/routes/adopt-existing/migration.spec.json +21 -12
- package/migrations/docs/migrations/design-system/routes/greenfield/migration.spec.json +10 -9
- package/migrations/docs/migrations/design-system/routes/mui4-to-latest/migration.spec.json +19 -17
- package/migrations/docs/migrations/design-system/shared/WORKING-RULES.md +194 -194
- package/package.json +14 -5
- package/dist/typography-B-BeIk0v.d.ts +0 -120
|
@@ -1,194 +1,194 @@
|
|
|
1
|
-
# Working Rules For Consumer Repositories
|
|
2
|
-
|
|
3
|
-
Use this document when integrating or maintaining `@atomazing-org/design-system`
|
|
4
|
-
inside an application repository.
|
|
5
|
-
|
|
6
|
-
## Public Surface Only
|
|
7
|
-
|
|
8
|
-
- Import runtime APIs from `@atomazing-org/design-system`.
|
|
9
|
-
- Import shipped presets from `@atomazing-org/design-system/presets`.
|
|
10
|
-
- Do not import internal files from `src/*`, `dist/*`, or unpublished paths.
|
|
11
|
-
|
|
12
|
-
## Standard Integration Contract
|
|
13
|
-
|
|
14
|
-
- Wrap the app with `ThemeProviderWrapper`.
|
|
15
|
-
- Use `useThemeSettings()` for runtime theme selection and dark-mode changes.
|
|
16
|
-
- Treat the design system as the single source of truth for theme state.
|
|
17
|
-
- Do not keep a second app-level theme state store unless it only mirrors design-system state.
|
|
18
|
-
- Let the active preset own the application background.
|
|
19
|
-
- Do not set app-level background colors or fills on root shells, route wrappers, or page containers when that would override the preset background supplied by the design system.
|
|
20
|
-
- Treat `theme.palette.background.paper` and other surface tokens as component surfaces, not as a replacement for the preset-controlled page background.
|
|
21
|
-
- If the app shell exposes a dedicated workspace or content pane, route roots and page containers must stretch to fill that region instead of shrinking to intrinsic content width.
|
|
22
|
-
|
|
23
|
-
## Preset Selection Rules
|
|
24
|
-
|
|
25
|
-
- `defaultThemes`: baseline application presets.
|
|
26
|
-
- `landingPageThemes`: extended preset pack for landing pages and marketing surfaces.
|
|
27
|
-
- `allBuiltInThemes`: combined pack for showcases or apps that intentionally want both sets.
|
|
28
|
-
- Keep preset selection in one explicit app-owned theme module such as `src/theme/appThemes.ts`.
|
|
29
|
-
- Do not hide preset choice behind generic constants passthrough files such as `src/constants/themes/themes.ts`.
|
|
30
|
-
|
|
31
|
-
If the consumer app only needs one or two presets, prefer importing the named presets explicitly
|
|
32
|
-
instead of building a new parallel preset registry.
|
|
33
|
-
If the consumer needs a curated subset, export that subset from the app theme module instead of
|
|
34
|
-
rebuilding theme state or duplicating preset metadata elsewhere.
|
|
35
|
-
|
|
36
|
-
## Landing Composition Rules
|
|
37
|
-
|
|
38
|
-
When the consumer app uses landing or marketing surfaces:
|
|
39
|
-
|
|
40
|
-
- use `landingPageThemes` intentionally
|
|
41
|
-
- let the active preset own the page background
|
|
42
|
-
- let the active preset own the surface character of landing panels
|
|
43
|
-
- do not hand-style landing `Paper` or `Card` surfaces with local glow, bloom, blur, decorative borders, gradient washes, or pseudo-element chrome
|
|
44
|
-
- app code may control layout, spacing, sizing, and content hierarchy, but the visual treatment of surfaces must come from the preset/theme layer
|
|
45
|
-
- prefer standard MUI composition for previews and proof blocks
|
|
46
|
-
- avoid custom decorative shapes and pseudo-graphics when a simple MUI layout can express the same state
|
|
47
|
-
- avoid nested rectangular surface hierarchies such as `card inside card inside card`
|
|
48
|
-
- keep one primary outer surface and use lightweight MUI primitives inside it
|
|
49
|
-
- if a preview block becomes dense, remove secondary content before tightening spacing
|
|
50
|
-
|
|
51
|
-
## Surface Composition Rules
|
|
52
|
-
|
|
53
|
-
Across consumer components in general:
|
|
54
|
-
|
|
55
|
-
- one logical block should have one primary rectangular surface
|
|
56
|
-
- let the active preset own the visual treatment of `Paper`, `Card`, `Dialog`, `Drawer`, and similar surfaces
|
|
57
|
-
- do not hand-style consumer surfaces with local glow, halo, bloom, decorative borders, blur, gradient washes, or pseudo-element chrome
|
|
58
|
-
- do not keep zero-value surface wrappers such as a local `SurfaceCard` that only forwards props to MUI `Card` without adding real behavior
|
|
59
|
-
- do not keep large inline `sx` objects in JSX; if a component needs substantial styling, extract a local `styled(...)` component in the same file and keep those styled declarations near the bottom of the file
|
|
60
|
-
- keep app styling focused on layout, spacing, sizing, and content hierarchy; move distinct surface looks into presets or MUI theme overrides
|
|
61
|
-
- prefer `Stack`, `List`, `Divider`, `Typography`, `Chip`, and `Avatar` for internal composition
|
|
62
|
-
- do not add extra bordered or elevated rectangular layers unless they carry a separate semantic role
|
|
63
|
-
- do not restyle chart legends, compact filters, segmented controls, or status chips into ad hoc chip-like chrome that competes with the active preset; prefer neutral MUI composition and let the preset own the surface character
|
|
64
|
-
|
|
65
|
-
## Design Token Hardening Rules
|
|
66
|
-
|
|
67
|
-
- Use theme helpers such as `alpha()` instead of string-concatenated palette hacks like `${theme.palette.primary.main}1a`.
|
|
68
|
-
- Decorative gradients and shadow styling are forbidden in normal consumer UI, especially on shared surfaces and shell infrastructure.
|
|
69
|
-
- If a component must visually preview preset data, such as a theme swatch, document that exception inline and keep it on a small explicit allowlist in the repo-local design-contract check.
|
|
70
|
-
- Repo-local design-contract lint should protect against decorative gradients, direct shadow styling, theme shadow-token drift, and palette alpha suffix hacks in addition to raw colors and numeric visual tokens.
|
|
71
|
-
|
|
72
|
-
## MUI-First Component Rules
|
|
73
|
-
|
|
74
|
-
- Prefer direct MUI primitives for base UI elements such as buttons, icon buttons, labels, helper text, skeletons, lists, drawers, and dialog sections.
|
|
75
|
-
- Do not keep consumer-owned substitute atoms that merely recreate an existing MUI primitive with `div`, `label`, `span`, `Box`, or other generic wrappers.
|
|
76
|
-
- If a consumer abstraction is still useful, keep it as a thin wrapper around the MUI primitive rather than a parallel hand-rolled implementation.
|
|
77
|
-
- Remove zero-value wrappers that only rename a MUI primitive or surface without adding behavior, state policy, or accessibility value.
|
|
78
|
-
- Exceptions are allowed only when there is clear custom logic or a pattern MUI does not provide directly, such as drag-and-drop zones, app-specific charts, or brand artwork.
|
|
79
|
-
- Even when an exception is justified, compose it from MUI layout and surface primitives where possible.
|
|
80
|
-
|
|
81
|
-
## Typography Contract Rules
|
|
82
|
-
|
|
83
|
-
- Visible application text should be rendered through `Typography`, not left as raw JSX text inside layout wrappers.
|
|
84
|
-
- Every `Typography` must declare an explicit `variant`.
|
|
85
|
-
- Pick variants by semantics, not convenience:
|
|
86
|
-
- headings and section titles: `
|
|
87
|
-
- main body copy and helper text: `
|
|
88
|
-
- button and action labels: compact
|
|
89
|
-
- chip, badge, and compact status labels: compact
|
|
90
|
-
- When MUI interactive components such as `Button`, `ToggleButton`, `MenuItem`, `Chip`, or `Alert` need visible text, wrap that text in `Typography component="span"` with an explicit variant.
|
|
91
|
-
- If the repo has a typography contract lint or script, keep it green as part of the migration gate.
|
|
92
|
-
- If bulk replacements or file rewrites touch localized copy, keep files in UTF-8 and scan touched files for mojibake or replacement characters before closeout.
|
|
93
|
-
- Validate at least one real route with non-Latin copy when the migration touched translated strings, mocks, or fixtures.
|
|
94
|
-
|
|
95
|
-
## Overlay And Semantic Contract Rules
|
|
96
|
-
|
|
97
|
-
- Dialogs, drawers, bottom sheets, and other overlay containers must expose stable `aria-labelledby` and `aria-describedby` semantics.
|
|
98
|
-
- Shared dialog-title abstractions should accept stable title and subtitle ids so the overlay can wire those semantics directly instead of relying on incidental text structure.
|
|
99
|
-
- Close buttons inside shared overlays must have explicit accessible labels.
|
|
100
|
-
- Command palettes, searchable pickers, and other overlay search surfaces should use `combobox` plus `listbox` semantics when they own filtered keyboard navigation.
|
|
101
|
-
- Decorative overlay chrome such as drag handles or visual grabbers should be hidden from assistive technology when it does not convey state.
|
|
102
|
-
- Prefer stable overlay test hooks or landmarks for smoke coverage, and avoid brittle tests that depend on incidental navigation paths just to reach a modal.
|
|
103
|
-
|
|
104
|
-
## Workflow Composition Rules
|
|
105
|
-
|
|
106
|
-
- If multiple pages share the same workflow shell, form layout, or section grid, extract one shared layout contract instead of duplicating the page structure per role or route.
|
|
107
|
-
- Keep role-specific behavior in headers, sections, and policy hooks; keep shared structure in a dedicated workflow layout component.
|
|
108
|
-
- Prefer direct local imports for chunk-sensitive app internals when a barrel re-export introduces circular chunk warnings in build output.
|
|
109
|
-
- Do not preserve convenience barrels for local app modules when they make execution order less reliable than direct feature-local imports.
|
|
110
|
-
|
|
111
|
-
## Custom Preset Rules
|
|
112
|
-
|
|
113
|
-
Custom presets must follow `ThemePreset` exactly:
|
|
114
|
-
|
|
115
|
-
- stable string `id`
|
|
116
|
-
- human-readable `label`
|
|
117
|
-
- `colorSchemes.light`
|
|
118
|
-
- `colorSchemes.dark`
|
|
119
|
-
|
|
120
|
-
Each scheme should define:
|
|
121
|
-
|
|
122
|
-
- `palette.background.default`
|
|
123
|
-
- `palette.background.paper`
|
|
124
|
-
- `palette.text.primary`
|
|
125
|
-
- `palette.text.secondary`
|
|
126
|
-
- `palette.divider`
|
|
127
|
-
|
|
128
|
-
## SSR And Next.js Rules
|
|
129
|
-
|
|
130
|
-
- Keep `ThemeProviderWrapper` inside a client boundary.
|
|
131
|
-
- Do not access `window`, `document`, `navigator`, or `localStorage` at module scope.
|
|
132
|
-
- If theme preference must be bridged through cookies or storage, keep the browser-specific logic client-safe.
|
|
133
|
-
|
|
134
|
-
## Runtime Startup Rules
|
|
135
|
-
|
|
136
|
-
- A green build is not enough to close a migration.
|
|
137
|
-
- After dependency, provider, or theme-state changes, start the app with the repo's normal dev/start command.
|
|
138
|
-
- Open the app in a real browser and fix startup console errors before closeout.
|
|
139
|
-
- Fix migration-caused startup warnings before closeout when they indicate broken runtime alignment.
|
|
140
|
-
- If runtime singleton warnings appear for `react`, `react-dom`, `@emotion/react`, or `@emotion/styled`, align the bundler config so only one runtime copy loads.
|
|
141
|
-
- Avoid module-scope calls that require browser APIs, storage, or an activated i18n locale.
|
|
142
|
-
- Register browser event listeners such as `beforeinstallprompt`, `matchMedia`, or other window-driven subscriptions inside effects with cleanup instead of render paths or module scope.
|
|
143
|
-
- Verify that the app background still comes from the active preset after migration.
|
|
144
|
-
- If the consumer uses root shells such as `AppShell`, `Layout`, `PageContainer`, or route wrappers, keep them transparent unless they intentionally represent a surface layer.
|
|
145
|
-
- If token drift is broad, add or tighten a repo-local design contract gate for hardcoded colors, raw numeric type scale, ad hoc radius/opacity values, decorative gradients, shadow styling, and palette alpha suffix hacks, and keep it green.
|
|
146
|
-
|
|
147
|
-
## Build Hygiene Rules
|
|
148
|
-
|
|
149
|
-
- Fix consumer-owned build warnings that come from the app's own config, imports, or chunking strategy.
|
|
150
|
-
- If PWA or Workbox config references asset names, keep those glob patterns aligned with the actual files emitted from `public/` or equivalent static assets.
|
|
151
|
-
- If Vite or Rollup reports oversized consumer-owned chunks, prefer targeted `manualChunks` or additional lazy boundaries over simply increasing `chunkSizeWarningLimit`.
|
|
152
|
-
- Do not silence a real warning when the app can fix the underlying config or bundling cause directly.
|
|
153
|
-
- If the only remaining warning comes from an upstream toolchain package outside the consumer app's control, record the exact package and file instead of misclassifying it as an app regression.
|
|
154
|
-
|
|
155
|
-
## Anti-Patterns
|
|
156
|
-
|
|
157
|
-
Avoid these patterns:
|
|
158
|
-
|
|
159
|
-
- deep imports from internal design-system files
|
|
160
|
-
- a second competing root `ThemeProvider`
|
|
161
|
-
- hardcoded theme colors when a theme token exists
|
|
162
|
-
- hardcoded root-level page backgrounds that override the active preset background
|
|
163
|
-
- hand-rolled substitute primitives for components MUI already provides
|
|
164
|
-
- zero-value wrapper components that only rename a stock MUI primitive or surface
|
|
165
|
-
- decorative gradients or shadow styling applied directly in consumer shells and shared surfaces
|
|
166
|
-
- string-concatenated palette alpha hacks instead of theme helpers such as `alpha()`
|
|
167
|
-
- local storage access outside SSR-safe guards
|
|
168
|
-
- dialogs, drawers, or bottom sheets without stable semantic labeling
|
|
169
|
-
- browser event listeners attached from render flow without cleanup
|
|
170
|
-
- maintaining a parallel dark-mode enum or persistence format
|
|
171
|
-
- role-based workflow pages that duplicate the same layout shell instead of sharing one structural contract
|
|
172
|
-
- local barrel re-exports that introduce circular chunk warnings for app internals
|
|
173
|
-
|
|
174
|
-
## When Migration Is Required
|
|
175
|
-
|
|
176
|
-
Do not treat these as small integration tasks. Use route-based migration instead:
|
|
177
|
-
|
|
178
|
-
- the app still uses `@material-ui/*`
|
|
179
|
-
- the app has a custom token layer that should be replaced or normalized
|
|
180
|
-
- the app mixes multiple theme providers or theme sources of truth
|
|
181
|
-
- the user asks to standardize the project on this library
|
|
182
|
-
- the migration touches a broad set of colors, typography, spacing, or component overrides
|
|
183
|
-
|
|
184
|
-
## Route Selection
|
|
185
|
-
|
|
186
|
-
- `mui4-to-latest`: legacy Material UI v4 imports or dependencies
|
|
187
|
-
- `greenfield`: new app, or no legacy theme/token migration required
|
|
188
|
-
- `adopt-existing`: app already uses modern MUI but needs theme/token adoption
|
|
189
|
-
|
|
190
|
-
## Recommended User Request
|
|
191
|
-
|
|
192
|
-
Use a request like this with an AI agent:
|
|
193
|
-
|
|
194
|
-
`Adopt @atomazing-org/design-system in this repo. If the current theme stack is legacy or custom, choose the correct migration route and execute the migration runbook.`
|
|
1
|
+
# Working Rules For Consumer Repositories
|
|
2
|
+
|
|
3
|
+
Use this document when integrating or maintaining `@atomazing-org/design-system`
|
|
4
|
+
inside an application repository.
|
|
5
|
+
|
|
6
|
+
## Public Surface Only
|
|
7
|
+
|
|
8
|
+
- Import runtime APIs from `@atomazing-org/design-system`.
|
|
9
|
+
- Import shipped presets from `@atomazing-org/design-system/presets`.
|
|
10
|
+
- Do not import internal files from `src/*`, `dist/*`, or unpublished paths.
|
|
11
|
+
|
|
12
|
+
## Standard Integration Contract
|
|
13
|
+
|
|
14
|
+
- Wrap the app with `ThemeProviderWrapper`.
|
|
15
|
+
- Use `useThemeSettings()` for runtime theme selection and dark-mode changes.
|
|
16
|
+
- Treat the design system as the single source of truth for theme state.
|
|
17
|
+
- Do not keep a second app-level theme state store unless it only mirrors design-system state.
|
|
18
|
+
- Let the active preset own the application background.
|
|
19
|
+
- Do not set app-level background colors or fills on root shells, route wrappers, or page containers when that would override the preset background supplied by the design system.
|
|
20
|
+
- Treat `theme.palette.background.paper` and other surface tokens as component surfaces, not as a replacement for the preset-controlled page background.
|
|
21
|
+
- If the app shell exposes a dedicated workspace or content pane, route roots and page containers must stretch to fill that region instead of shrinking to intrinsic content width.
|
|
22
|
+
|
|
23
|
+
## Preset Selection Rules
|
|
24
|
+
|
|
25
|
+
- `defaultThemes`: baseline application presets.
|
|
26
|
+
- `landingPageThemes`: extended preset pack for landing pages and marketing surfaces.
|
|
27
|
+
- `allBuiltInThemes`: combined pack for showcases or apps that intentionally want both sets.
|
|
28
|
+
- Keep preset selection in one explicit app-owned theme module such as `src/theme/appThemes.ts`.
|
|
29
|
+
- Do not hide preset choice behind generic constants passthrough files such as `src/constants/themes/themes.ts`.
|
|
30
|
+
|
|
31
|
+
If the consumer app only needs one or two presets, prefer importing the named presets explicitly
|
|
32
|
+
instead of building a new parallel preset registry.
|
|
33
|
+
If the consumer needs a curated subset, export that subset from the app theme module instead of
|
|
34
|
+
rebuilding theme state or duplicating preset metadata elsewhere.
|
|
35
|
+
|
|
36
|
+
## Landing Composition Rules
|
|
37
|
+
|
|
38
|
+
When the consumer app uses landing or marketing surfaces:
|
|
39
|
+
|
|
40
|
+
- use `landingPageThemes` intentionally
|
|
41
|
+
- let the active preset own the page background
|
|
42
|
+
- let the active preset own the surface character of landing panels
|
|
43
|
+
- do not hand-style landing `Paper` or `Card` surfaces with local glow, bloom, blur, decorative borders, gradient washes, or pseudo-element chrome
|
|
44
|
+
- app code may control layout, spacing, sizing, and content hierarchy, but the visual treatment of surfaces must come from the preset/theme layer
|
|
45
|
+
- prefer standard MUI composition for previews and proof blocks
|
|
46
|
+
- avoid custom decorative shapes and pseudo-graphics when a simple MUI layout can express the same state
|
|
47
|
+
- avoid nested rectangular surface hierarchies such as `card inside card inside card`
|
|
48
|
+
- keep one primary outer surface and use lightweight MUI primitives inside it
|
|
49
|
+
- if a preview block becomes dense, remove secondary content before tightening spacing
|
|
50
|
+
|
|
51
|
+
## Surface Composition Rules
|
|
52
|
+
|
|
53
|
+
Across consumer components in general:
|
|
54
|
+
|
|
55
|
+
- one logical block should have one primary rectangular surface
|
|
56
|
+
- let the active preset own the visual treatment of `Paper`, `Card`, `Dialog`, `Drawer`, and similar surfaces
|
|
57
|
+
- do not hand-style consumer surfaces with local glow, halo, bloom, decorative borders, blur, gradient washes, or pseudo-element chrome
|
|
58
|
+
- do not keep zero-value surface wrappers such as a local `SurfaceCard` that only forwards props to MUI `Card` without adding real behavior
|
|
59
|
+
- do not keep large inline `sx` objects in JSX; if a component needs substantial styling, extract a local `styled(...)` component in the same file and keep those styled declarations near the bottom of the file
|
|
60
|
+
- keep app styling focused on layout, spacing, sizing, and content hierarchy; move distinct surface looks into presets or MUI theme overrides
|
|
61
|
+
- prefer `Stack`, `List`, `Divider`, `Typography`, `Chip`, and `Avatar` for internal composition
|
|
62
|
+
- do not add extra bordered or elevated rectangular layers unless they carry a separate semantic role
|
|
63
|
+
- do not restyle chart legends, compact filters, segmented controls, or status chips into ad hoc chip-like chrome that competes with the active preset; prefer neutral MUI composition and let the preset own the surface character
|
|
64
|
+
|
|
65
|
+
## Design Token Hardening Rules
|
|
66
|
+
|
|
67
|
+
- Use theme helpers such as `alpha()` instead of string-concatenated palette hacks like `${theme.palette.primary.main}1a`.
|
|
68
|
+
- Decorative gradients and shadow styling are forbidden in normal consumer UI, especially on shared surfaces and shell infrastructure.
|
|
69
|
+
- If a component must visually preview preset data, such as a theme swatch, document that exception inline and keep it on a small explicit allowlist in the repo-local design-contract check.
|
|
70
|
+
- Repo-local design-contract lint should protect against decorative gradients, direct shadow styling, theme shadow-token drift, and palette alpha suffix hacks in addition to raw colors and numeric visual tokens.
|
|
71
|
+
|
|
72
|
+
## MUI-First Component Rules
|
|
73
|
+
|
|
74
|
+
- Prefer direct MUI primitives for base UI elements such as buttons, icon buttons, labels, helper text, skeletons, lists, drawers, and dialog sections.
|
|
75
|
+
- Do not keep consumer-owned substitute atoms that merely recreate an existing MUI primitive with `div`, `label`, `span`, `Box`, or other generic wrappers.
|
|
76
|
+
- If a consumer abstraction is still useful, keep it as a thin wrapper around the MUI primitive rather than a parallel hand-rolled implementation.
|
|
77
|
+
- Remove zero-value wrappers that only rename a MUI primitive or surface without adding behavior, state policy, or accessibility value.
|
|
78
|
+
- Exceptions are allowed only when there is clear custom logic or a pattern MUI does not provide directly, such as drag-and-drop zones, app-specific charts, or brand artwork.
|
|
79
|
+
- Even when an exception is justified, compose it from MUI layout and surface primitives where possible.
|
|
80
|
+
|
|
81
|
+
## Typography Contract Rules
|
|
82
|
+
|
|
83
|
+
- Visible application text should be rendered through `Typography`, not left as raw JSX text inside layout wrappers.
|
|
84
|
+
- Every `Typography` must declare an explicit `variant`.
|
|
85
|
+
- Pick variants by semantics, not convenience:
|
|
86
|
+
- headings and section titles: `h1` through `h6`
|
|
87
|
+
- main body copy and helper text: `subtitle1`, `body1`, `body2`
|
|
88
|
+
- button and action labels: compact standard variants such as `subtitle2` or `button`
|
|
89
|
+
- chip, badge, and compact status labels: compact standard variants such as `caption`
|
|
90
|
+
- When MUI interactive components such as `Button`, `ToggleButton`, `MenuItem`, `Chip`, or `Alert` need visible text, wrap that text in `Typography component="span"` with an explicit variant.
|
|
91
|
+
- If the repo has a typography contract lint or script, keep it green as part of the migration gate.
|
|
92
|
+
- If bulk replacements or file rewrites touch localized copy, keep files in UTF-8 and scan touched files for mojibake or replacement characters before closeout.
|
|
93
|
+
- Validate at least one real route with non-Latin copy when the migration touched translated strings, mocks, or fixtures.
|
|
94
|
+
|
|
95
|
+
## Overlay And Semantic Contract Rules
|
|
96
|
+
|
|
97
|
+
- Dialogs, drawers, bottom sheets, and other overlay containers must expose stable `aria-labelledby` and `aria-describedby` semantics.
|
|
98
|
+
- Shared dialog-title abstractions should accept stable title and subtitle ids so the overlay can wire those semantics directly instead of relying on incidental text structure.
|
|
99
|
+
- Close buttons inside shared overlays must have explicit accessible labels.
|
|
100
|
+
- Command palettes, searchable pickers, and other overlay search surfaces should use `combobox` plus `listbox` semantics when they own filtered keyboard navigation.
|
|
101
|
+
- Decorative overlay chrome such as drag handles or visual grabbers should be hidden from assistive technology when it does not convey state.
|
|
102
|
+
- Prefer stable overlay test hooks or landmarks for smoke coverage, and avoid brittle tests that depend on incidental navigation paths just to reach a modal.
|
|
103
|
+
|
|
104
|
+
## Workflow Composition Rules
|
|
105
|
+
|
|
106
|
+
- If multiple pages share the same workflow shell, form layout, or section grid, extract one shared layout contract instead of duplicating the page structure per role or route.
|
|
107
|
+
- Keep role-specific behavior in headers, sections, and policy hooks; keep shared structure in a dedicated workflow layout component.
|
|
108
|
+
- Prefer direct local imports for chunk-sensitive app internals when a barrel re-export introduces circular chunk warnings in build output.
|
|
109
|
+
- Do not preserve convenience barrels for local app modules when they make execution order less reliable than direct feature-local imports.
|
|
110
|
+
|
|
111
|
+
## Custom Preset Rules
|
|
112
|
+
|
|
113
|
+
Custom presets must follow `ThemePreset` exactly:
|
|
114
|
+
|
|
115
|
+
- stable string `id`
|
|
116
|
+
- human-readable `label`
|
|
117
|
+
- `colorSchemes.light`
|
|
118
|
+
- `colorSchemes.dark`
|
|
119
|
+
|
|
120
|
+
Each scheme should define:
|
|
121
|
+
|
|
122
|
+
- `palette.background.default`
|
|
123
|
+
- `palette.background.paper`
|
|
124
|
+
- `palette.text.primary`
|
|
125
|
+
- `palette.text.secondary`
|
|
126
|
+
- `palette.divider`
|
|
127
|
+
|
|
128
|
+
## SSR And Next.js Rules
|
|
129
|
+
|
|
130
|
+
- Keep `ThemeProviderWrapper` inside a client boundary.
|
|
131
|
+
- Do not access `window`, `document`, `navigator`, or `localStorage` at module scope.
|
|
132
|
+
- If theme preference must be bridged through cookies or storage, keep the browser-specific logic client-safe.
|
|
133
|
+
|
|
134
|
+
## Runtime Startup Rules
|
|
135
|
+
|
|
136
|
+
- A green build is not enough to close a migration.
|
|
137
|
+
- After dependency, provider, or theme-state changes, start the app with the repo's normal dev/start command.
|
|
138
|
+
- Open the app in a real browser and fix startup console errors before closeout.
|
|
139
|
+
- Fix migration-caused startup warnings before closeout when they indicate broken runtime alignment.
|
|
140
|
+
- If runtime singleton warnings appear for `react`, `react-dom`, `@emotion/react`, or `@emotion/styled`, align the bundler config so only one runtime copy loads.
|
|
141
|
+
- Avoid module-scope calls that require browser APIs, storage, or an activated i18n locale.
|
|
142
|
+
- Register browser event listeners such as `beforeinstallprompt`, `matchMedia`, or other window-driven subscriptions inside effects with cleanup instead of render paths or module scope.
|
|
143
|
+
- Verify that the app background still comes from the active preset after migration.
|
|
144
|
+
- If the consumer uses root shells such as `AppShell`, `Layout`, `PageContainer`, or route wrappers, keep them transparent unless they intentionally represent a surface layer.
|
|
145
|
+
- If token drift is broad, add or tighten a repo-local design contract gate for hardcoded colors, raw numeric type scale, ad hoc radius/opacity values, decorative gradients, shadow styling, and palette alpha suffix hacks, and keep it green.
|
|
146
|
+
|
|
147
|
+
## Build Hygiene Rules
|
|
148
|
+
|
|
149
|
+
- Fix consumer-owned build warnings that come from the app's own config, imports, or chunking strategy.
|
|
150
|
+
- If PWA or Workbox config references asset names, keep those glob patterns aligned with the actual files emitted from `public/` or equivalent static assets.
|
|
151
|
+
- If Vite or Rollup reports oversized consumer-owned chunks, prefer targeted `manualChunks` or additional lazy boundaries over simply increasing `chunkSizeWarningLimit`.
|
|
152
|
+
- Do not silence a real warning when the app can fix the underlying config or bundling cause directly.
|
|
153
|
+
- If the only remaining warning comes from an upstream toolchain package outside the consumer app's control, record the exact package and file instead of misclassifying it as an app regression.
|
|
154
|
+
|
|
155
|
+
## Anti-Patterns
|
|
156
|
+
|
|
157
|
+
Avoid these patterns:
|
|
158
|
+
|
|
159
|
+
- deep imports from internal design-system files
|
|
160
|
+
- a second competing root `ThemeProvider`
|
|
161
|
+
- hardcoded theme colors when a theme token exists
|
|
162
|
+
- hardcoded root-level page backgrounds that override the active preset background
|
|
163
|
+
- hand-rolled substitute primitives for components MUI already provides
|
|
164
|
+
- zero-value wrapper components that only rename a stock MUI primitive or surface
|
|
165
|
+
- decorative gradients or shadow styling applied directly in consumer shells and shared surfaces
|
|
166
|
+
- string-concatenated palette alpha hacks instead of theme helpers such as `alpha()`
|
|
167
|
+
- local storage access outside SSR-safe guards
|
|
168
|
+
- dialogs, drawers, or bottom sheets without stable semantic labeling
|
|
169
|
+
- browser event listeners attached from render flow without cleanup
|
|
170
|
+
- maintaining a parallel dark-mode enum or persistence format
|
|
171
|
+
- role-based workflow pages that duplicate the same layout shell instead of sharing one structural contract
|
|
172
|
+
- local barrel re-exports that introduce circular chunk warnings for app internals
|
|
173
|
+
|
|
174
|
+
## When Migration Is Required
|
|
175
|
+
|
|
176
|
+
Do not treat these as small integration tasks. Use route-based migration instead:
|
|
177
|
+
|
|
178
|
+
- the app still uses `@material-ui/*`
|
|
179
|
+
- the app has a custom token layer that should be replaced or normalized
|
|
180
|
+
- the app mixes multiple theme providers or theme sources of truth
|
|
181
|
+
- the user asks to standardize the project on this library
|
|
182
|
+
- the migration touches a broad set of colors, typography, spacing, or component overrides
|
|
183
|
+
|
|
184
|
+
## Route Selection
|
|
185
|
+
|
|
186
|
+
- `mui4-to-latest`: legacy Material UI v4 imports or dependencies
|
|
187
|
+
- `greenfield`: new app, or no legacy theme/token migration required
|
|
188
|
+
- `adopt-existing`: app already uses modern MUI but needs theme/token adoption
|
|
189
|
+
|
|
190
|
+
## Recommended User Request
|
|
191
|
+
|
|
192
|
+
Use a request like this with an AI agent:
|
|
193
|
+
|
|
194
|
+
`Adopt @atomazing-org/design-system in this repo. If the current theme stack is legacy or custom, choose the correct migration route and execute the migration runbook.`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atomazing-org/design-system",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.7.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"packageManager": "pnpm@9.14.4",
|
|
@@ -18,16 +18,19 @@
|
|
|
18
18
|
"styles",
|
|
19
19
|
"utils"
|
|
20
20
|
],
|
|
21
|
+
"main": "./dist/index.js",
|
|
21
22
|
"module": "dist/index.js",
|
|
22
23
|
"types": "./dist/index.d.ts",
|
|
23
24
|
"exports": {
|
|
24
25
|
".": {
|
|
25
26
|
"types": "./dist/index.d.ts",
|
|
26
|
-
"import": "./dist/index.js"
|
|
27
|
+
"import": "./dist/index.js",
|
|
28
|
+
"default": "./dist/index.js"
|
|
27
29
|
},
|
|
28
30
|
"./presets": {
|
|
29
31
|
"types": "./dist/presets/index.d.ts",
|
|
30
|
-
"import": "./dist/presets/index.js"
|
|
32
|
+
"import": "./dist/presets/index.js",
|
|
33
|
+
"default": "./dist/presets/index.js"
|
|
31
34
|
}
|
|
32
35
|
},
|
|
33
36
|
"files": [
|
|
@@ -44,15 +47,20 @@
|
|
|
44
47
|
"registry": "https://registry.npmjs.org/"
|
|
45
48
|
},
|
|
46
49
|
"scripts": {
|
|
47
|
-
"build": "tsup",
|
|
50
|
+
"build": "tsup && node tools/fix-dts-runtime-stubs.mjs",
|
|
51
|
+
"changeset": "changeset",
|
|
48
52
|
"dev": "tsup --watch",
|
|
49
53
|
"test": "vitest run",
|
|
50
54
|
"check:runtime-alignment": "node tools/checks/runtime-version-alignment.mjs",
|
|
55
|
+
"check:migration-readiness": "node tools/checks/migration-readiness.mjs",
|
|
56
|
+
"release": "changeset publish",
|
|
57
|
+
"release:verify": "pnpm lint && pnpm test && pnpm build && pnpm run smoke:esm && pnpm run smoke:react-app && pnpm run smoke:next && pnpm run check:migration-readiness",
|
|
51
58
|
"smoke:esm": "node tools/smoke/esm-imports.mjs",
|
|
52
59
|
"smoke:react-app": "pnpm --dir examples/react-app run lint:ts && pnpm --dir examples/react-app run build",
|
|
53
60
|
"smoke:next": "pnpm --dir examples/next-app-router run lint && pnpm run check:runtime-alignment && pnpm --dir examples/next-app-router run build",
|
|
61
|
+
"version-packages": "changeset version",
|
|
54
62
|
"format": "pnpm run format:eslint && pnpm run format:prettier",
|
|
55
|
-
"format:eslint": "pnpm
|
|
63
|
+
"format:eslint": "pnpm exec eslint \"**/*.{js,ts,tsx}\" --fix",
|
|
56
64
|
"format:prettier": "prettier \"**/*.{json,js,ts,tsx}\" --write",
|
|
57
65
|
"lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
58
66
|
"lint:prettier": "prettier \"**/*.{json,js,ts,tsx}\" --check",
|
|
@@ -74,6 +82,7 @@
|
|
|
74
82
|
},
|
|
75
83
|
"devDependencies": {
|
|
76
84
|
"@atomazing-org/eslint-config": "3.6.0",
|
|
85
|
+
"@changesets/cli": "^2.30.0",
|
|
77
86
|
"@emotion/react": "^11.14.0",
|
|
78
87
|
"@emotion/styled": "^11.14.1",
|
|
79
88
|
"@mui/icons-material": "7.3.8",
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { ThemeOptions, TypeBackground } from '@mui/material/styles';
|
|
2
|
-
import { ReactNode, CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Available options for dark mode configuration.
|
|
6
|
-
* - `system`: Follows the operating system preference.
|
|
7
|
-
* - `light`: Forces light mode.
|
|
8
|
-
* - `dark`: Forces dark mode.
|
|
9
|
-
*/
|
|
10
|
-
type DarkModeOptions = "system" | "light" | "dark";
|
|
11
|
-
interface OptionItem {
|
|
12
|
-
label: string;
|
|
13
|
-
value: DarkModeOptions;
|
|
14
|
-
icon: ReactNode;
|
|
15
|
-
}
|
|
16
|
-
type ThemeModeBackground = Partial<Record<"light" | "dark", Partial<TypeBackground>>>;
|
|
17
|
-
type NamedThemeOptions = ThemeOptions & {
|
|
18
|
-
name: string;
|
|
19
|
-
background?: ThemeModeBackground;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* Represents user-specific theme preferences stored in the application.
|
|
23
|
-
*/
|
|
24
|
-
interface AppSettings {
|
|
25
|
-
/**
|
|
26
|
-
* The selected preset id from the available themes list.
|
|
27
|
-
* Invalid or missing values are normalized to the first available theme.
|
|
28
|
-
*/
|
|
29
|
-
themeId: string;
|
|
30
|
-
/**
|
|
31
|
-
* Controls how dark mode is applied in the app.
|
|
32
|
-
*/
|
|
33
|
-
darkMode: DarkModeOptions;
|
|
34
|
-
}
|
|
35
|
-
interface ThemeContextProps {
|
|
36
|
-
theme: string;
|
|
37
|
-
darkMode: DarkModeOptions;
|
|
38
|
-
setTheme: (theme: string) => void;
|
|
39
|
-
setDarkMode: (mode: DarkModeOptions) => void;
|
|
40
|
-
themes: NamedThemeOptions[];
|
|
41
|
-
selectedTheme: NamedThemeOptions;
|
|
42
|
-
defaultThemeName: string;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
type ThemeId = string;
|
|
46
|
-
type ThemeScheme = "light" | "dark";
|
|
47
|
-
type DarkModeSetting = DarkModeOptions;
|
|
48
|
-
interface ThemePreset {
|
|
49
|
-
id: ThemeId;
|
|
50
|
-
label: string;
|
|
51
|
-
colorSchemes: {
|
|
52
|
-
light: ThemeOptions;
|
|
53
|
-
dark: ThemeOptions;
|
|
54
|
-
};
|
|
55
|
-
description?: string;
|
|
56
|
-
tags?: string[];
|
|
57
|
-
version?: string;
|
|
58
|
-
}
|
|
59
|
-
type NormalizedPreset = ThemePreset & {
|
|
60
|
-
meta?: {
|
|
61
|
-
origin: "preset" | "legacy" | "custom";
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
interface CustomTypographyVariants {
|
|
66
|
-
text_xl_regular: CSSProperties;
|
|
67
|
-
text_lg_regular: CSSProperties;
|
|
68
|
-
text_md_regular: CSSProperties;
|
|
69
|
-
text_sm_regular: CSSProperties;
|
|
70
|
-
text_xs_regular: CSSProperties;
|
|
71
|
-
text_2xs_regular: CSSProperties;
|
|
72
|
-
text_xl_bold: CSSProperties;
|
|
73
|
-
text_lg_bold: CSSProperties;
|
|
74
|
-
text_md_bold: CSSProperties;
|
|
75
|
-
text_sm_bold: CSSProperties;
|
|
76
|
-
text_xs_bold: CSSProperties;
|
|
77
|
-
text_2xs_bold: CSSProperties;
|
|
78
|
-
text_xl_semibold: CSSProperties;
|
|
79
|
-
text_lg_semibold: CSSProperties;
|
|
80
|
-
text_md_semibold: CSSProperties;
|
|
81
|
-
text_sm_semibold: CSSProperties;
|
|
82
|
-
text_xs_semibold: CSSProperties;
|
|
83
|
-
text_2xs_semibold: CSSProperties;
|
|
84
|
-
text_xl_thin: CSSProperties;
|
|
85
|
-
text_lg_thin: CSSProperties;
|
|
86
|
-
text_md_thin: CSSProperties;
|
|
87
|
-
text_sm_thin: CSSProperties;
|
|
88
|
-
text_xs_thin: CSSProperties;
|
|
89
|
-
text_2xs_thin: CSSProperties;
|
|
90
|
-
header_2xl_regular: CSSProperties;
|
|
91
|
-
header_xl_regular: CSSProperties;
|
|
92
|
-
header_lg_regular: CSSProperties;
|
|
93
|
-
header_md_regular: CSSProperties;
|
|
94
|
-
header_sm_regular: CSSProperties;
|
|
95
|
-
header_xs_regular: CSSProperties;
|
|
96
|
-
header_2xl_bold: CSSProperties;
|
|
97
|
-
header_xl_bold: CSSProperties;
|
|
98
|
-
header_lg_bold: CSSProperties;
|
|
99
|
-
header_md_bold: CSSProperties;
|
|
100
|
-
header_sm_bold: CSSProperties;
|
|
101
|
-
header_xs_bold: CSSProperties;
|
|
102
|
-
header_2xl_semibold: CSSProperties;
|
|
103
|
-
header_xl_semibold: CSSProperties;
|
|
104
|
-
header_lg_semibold: CSSProperties;
|
|
105
|
-
header_md_semibold: CSSProperties;
|
|
106
|
-
header_sm_semibold: CSSProperties;
|
|
107
|
-
header_xs_semibold: CSSProperties;
|
|
108
|
-
}
|
|
109
|
-
declare module "@mui/material/styles" {
|
|
110
|
-
interface TypographyVariants extends CustomTypographyVariants {
|
|
111
|
-
}
|
|
112
|
-
interface TypographyVariantsOptions extends Partial<CustomTypographyVariants> {
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
declare module "@mui/material/Typography" {
|
|
116
|
-
interface TypographyPropsVariantOverrides extends Record<keyof CustomTypographyVariants, true> {
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
export type { AppSettings as A, CustomTypographyVariants as C, DarkModeOptions as D, NamedThemeOptions as N, OptionItem as O, ThemeContextProps as T, ThemePreset as a, ThemeModeBackground as b, NormalizedPreset as c, ThemeId as d, ThemeScheme as e, DarkModeSetting as f };
|