What does a project need to build these styles?

Install the CSS package and set up the integration for your bundler, the tool that assembles files for the website. Write a style in a .css.ts file, then use the generated class name in your component.

The browser gets CSS from the build. It does not need to evaluate your TypeScript to render these styles. Check that the integration supports your project’s current build tool.

How can two themes share the same style names?

Define the values your styles expect, such as text and surface colors. A theme contract describes that shape so each theme can supply its own values. Apply the selected theme class to the part of the app that needs it.

Test that the published build loads the expected CSS and that the right theme class reaches the page. The project is MIT-licensed. Your app still supplies the component and its behavior.

How can you plan two themes before configuring a build?

Sketch a fictional invoice panel in two themes. Use no package, build or customer record.

List the values the panel needs
Write a place for surface, text and focus colors. Keep one name for each role across both themes.
Check for a missing value
Cross out the focus color in the second theme and mark the gap. Write which theme class you expect the finished panel to receive.