Skip to content

Renamed CSS file to Tokens rather than Roles #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zoharma wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Renamed CSS file to Tokens rather than Roles #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import "./storybook.css"; /* Storybook CSS override */
import { ThemeProvider } from "../src";
import { GenericTheme, DiamondTheme, DiamondDSTheme } from "../src";
import { ThemeSwapper, TextLight, TextDark, TextSystem } from "./ThemeSwapper";
import "../src/styles/diamondDS/diamond-ds-roles.css";
import "../src/styles/diamondDS/diamond-ds-tokens.css";

const TextThemeBase = "Theme: Generic";
const TextThemeDiamond = "Theme: Diamond";
Expand Down
15 changes: 9 additions & 6 deletions src/storybook/PracticalGuidance.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,17 @@ Diamond Design System uses MUI with Diamond semantic tokens layered on top.

## Using the theme

Diamond Design System uses semantic design tokens mapped into MUI’s theme
system.
Diamond Design System uses semantic design tokens mapped into MUI’s theme system.

CSS variables remain the source of truth. The MUI theme adapts those values into
component APIs, palette roles, typography, spacing, elevation, and interaction
states.
Design tokens are defined as CSS variables and remain the source of truth. <br />
The MUI theme maps those tokens into semantic roles exposed through the palette, typography, spacing, elevation, and interaction state APIs.

<strong>Prefer theme roles and semantic tokens over hardcoded values.</strong>
Components should consume semantic theme roles rather than hardcoded values. Theme customisation and component overrides should reference design tokens to maintain consistency across the system.

<strong>
Use theme roles in components and design tokens when defining or customising
the theme.
</strong>

<table className="ds-table">
<thead>
Expand Down
0 src/styles/diamondDS/diamond-ds-roles.css → src/styles/diamondDS/diamond-ds-tokens.css
View file
Open in desktop
File renamed without changes.
13 changes: 9 additions & 4 deletions src/themes/DiamondDSTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
/**
* DiamondDS MUI theme
*
* Maps DiamondDS semantic design tokens and interaction rules into MUI's
* theme system, component model and runtime styling APIs.
* Maps DiamondDS semantic design tokens, palette roles and interaction rules
* into MUI's theme system, component model and runtime styling APIs.
*
* CSS variables are the source of truth.
* These are defined in diamond-ds-tokens.css.
*
* Tokens are the CSS variables.
* Roles are the semantic values exposed through the MUI palette and component APIs.
*
* CSS variables remain the source of truth.
* The MUI theme acts as the semantic adapter consumed by components.
*
* Components should consume semantic roles from the theme or semantic CSS
* variables rather than raw colour values.
*/
import "../styles/diamondDS/diamond-ds-roles.css";
import "../styles/diamondDS/diamond-ds-tokens.css";

// Enables `theme.vars` typings for MUI CSS variable themes.
import type {} from "@mui/material/themeCssVarsAugmentation";
Expand Down
Loading