Theme UI v1 Roadmap

[jxnblk]

This is an umbrella issue for features and additions to bring Theme UI to a stable v1. This list may not be exhaustive and is subject to change. More details, context, and additional issues will be added where needed.

• TypeScript conversion Convert to TypeScript #668
• TypeScript: Strict-mode theme interface/schema: a fully fleshed out theme schema to improve interoperability.
• TypeScript: Type check property values against theme scales (css): Allow injecting UserTheme and typecheck colors against scale #1090
• Support MDX v2 Theme UI provider import causes an ESM error when mdx-js/react is subsequently required #2023
• Variant composition, e.g. variant: ['large', 'primary'] (or plural variants). This would potentially be a breaking change, meaning that the variant property itself would no longer support responsive arrays, but the values within the variant could. Add support for combining multiple variants #586, Add variant composition feature #1017, Extending styles of multiple variants to form another variant #1208
• Merge variants before parsing responsive arrays. This should allow responsive values defined in e.g. theme.styles to be overridden with non-responsive values with the sx prop. Related Responsive values is variant styles override sx styles #720, CSS prop unable to override responsive theme config #43
• Upgrade to Emotion 11 Emotion 11 emotion-js/emotion#1606
• Remove @emotion/styled dependency Remove @emotion/styled usage #2043
• Use Theme UI context instead of Emotion context
• gatsby-plugin-theme-ui: support for presets via gatsby-config.js Let gatsby-plugin-theme-ui take base preset options #878
• Scope all configuration options to theme.config Nest variants and configuration options inside theme #1291
• Improve prefers-color-scheme media query support – allow color mode to be determined by media query without storing in localStorage. See Default useColorSchemeMediaQuery to true #624, Use prefers-color-scheme preference over localStorage color mode #787
• Support for CSS Logical Properties CSS Logical Properties should be theme-aware #794
• Document default theme Document theme properties' default values #2026

Potential

• Drop CSS props `sx` vs individual CSS props #2275 components: Remove style props #2326
• Drop Themed API
• Idea: Simpler API for using presets
• Idea: Provide some solution for self-referencing scales in other scale definitions
• Idea: Plain object syntax responsive values using a media key. e.g. media: { small: { fontSize: 3 } }
• Idea: Nested property shorthands font: { size: 3, weight: 'bold' } example branch
• Idea: Universal variant prop, see Proposal: variant prop #800
• Idea: isolated React context to prevent collisions