Use Codex tokens and custom spacing variables #750
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This sets up Codex components and design tokens so we can start using them. No actual components are migrated to Codex yet. Components from Wikit can be used directly in our own components. The build is set up so that, when Special:NewLexeme is used within MediaWiki, Codex will be imported from there; this means that our build should get substantially smaller once we don’t need Wikit anymore. In the dev entry point, Codex comes from node_modules/ as expected. (Notice that the styles are only imported in index.html, so they won’t be included in our build output either. As far as I could tell, Vite doesn’t have a CSS equivalent of `external` JS packages in vite.config.ts yet.) Design tokens from Codex will have to be imported directly into each component that uses them, where they will end up being included in the build. I would’ve liked to use them as CSS variables instead (aka custom properties), but only a small subset of design tokens is actually made available as a CSS variable in MediaWiki (and even then it depends on the skin), so I don’t think this is possible. Combined, this means that when MediaWiki upgrades to a new Codex version, Special:NewLexeme will use the new versions of the Codex components (and their styles) immediately, but the design tokens used in our own components will stay outdated until this repository is updated and a new build is pushed in WikibaseLexeme.git. Bug: T369505
Using the Button component from Codex instead of Wikit is straightforward – we just need to rename a few props. Using the variables is a bit more involved. Not only do we need replacement variables from Codex that aren’t always clear, but the small-text mixin used for the copyright notice also relies on the Wikit variables. So for now, this change just keeps importing the Wikit variables and lets Codex override them wherever they both use the same name. Bug: T369505
codders
force-pushed
the
feat/codex-tokens-and-spacing-vars-20240919
branch
from
bbb5c0d to
d06bb61
Compare
codders
force-pushed
the
feat/codex-tokens-and-spacing-vars-20240919
branch
from
d06bb61 to
2641061
Compare
lucaswerkmeister
force-pushed
the
codex-poc2
branch
from
bc773e6 to
6a7a13f
Compare
yerdua
approved these changes
Sep 19, 2024
|
superseded by #762 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Migrate away from Wikit tokens to Codex SASS variables where they are available. In some cases we use custom CSS variables for values from Wikit whose Codex equivalents are missing.
Bug: T369510
Bug: T369508
Bug: T369509