@stapel/tokens-mui 0.2.0 → 0.3.0

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.
Files changed (7) hide show
  1. package/README.md +29 -23
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +44 -21
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/index.ts +46 -24
package/README.md CHANGED
@@ -1,14 +1,18 @@
1
1
  # @stapel/tokens-mui
2
2
 
3
- The Material UI leg of the **token bridge** (frontend-guidelines §2.4; owner
4
- decision §38 T3). It projects `@stapel/tokens` L2 core tokens onto a MUI `Theme`
5
- — the explicit Material alternative to `@stapel/tokens-antd` (§2.3).
6
-
7
- There is exactly **one** L2 → design-system role mapping table, and it lives in
8
- `@stapel/tokens` (`bridgeColorRoles` + the radius/font-size roles). This package
9
- only renames those neutral roles to MUI's nested `palette`/`shape`/`typography`
10
- fields and picks the `light`/`dark` half — it holds no colour decisions of its
11
- own, so it and `@stapel/tokens-antd` cannot drift.
3
+ The Material UI leg of the **token bridge** (§68; frontend-guidelines §2.4;
4
+ owner decision §38 T3). It projects `@stapel/tokens`' neutral colour roles
5
+ onto a MUI `Theme` — the explicit Material alternative to
6
+ `@stapel/tokens-antd` (§2.3).
7
+
8
+ The §68 neutral role dictionary IS the bridge vocabulary — a role name
9
+ (`brand`, `surface-raised`, `text-muted`, …) is both the CSS var suffix
10
+ (`--stapel-brand`) and the exact key this package reads off `@stapel/tokens`'
11
+ `colors` object. There is no separate role→role indirection table (the old
12
+ `bridgeColorRoles` map is gone) — this package only renames roles to MUI's
13
+ nested `palette`/`shape`/`typography` fields and picks the `light`/`dark`
14
+ half; it holds no colour decisions of its own, so it and
15
+ `@stapel/tokens-antd` cannot drift.
12
16
 
13
17
  ## Usage
14
18
 
@@ -22,20 +26,22 @@ import { ThemeProvider, CssBaseline } from "@mui/material";
22
26
  </ThemeProvider>;
23
27
  ```
24
28
 
25
- ## The mapping (frontend-guidelines §2.4)
26
-
27
- | `@stapel/tokens` role | L2 core token | MUI theme field |
28
- | --- | --- | --- |
29
- | `brand` | `accent` | `palette.primary.main` |
30
- | `success` | `text-positive` | `palette.success.main` |
31
- | `warning` | `text-warning` | `palette.warning.main` |
32
- | `danger` | `text-negative` | `palette.error.main` |
33
- | `info` | `text-info` | `palette.info.main` |
34
- | `bgContainer` | `upperground-primary` | `palette.background.paper` |
35
- | `bgLayout` | `background-primary` | `palette.background.default` |
36
- | `textPrimary` | `text-primary` | `palette.text.primary` |
37
- | radius `md` | — | `shape.borderRadius` |
38
- | font-size `md` | — | `typography.fontSize` |
29
+ ## The mapping (§68; frontend-guidelines §2.4)
30
+
31
+ | `@stapel/tokens` role | MUI theme field |
32
+ | --- | --- |
33
+ | `brand` | `palette.primary.main` |
34
+ | `brand-active` | `palette.primary.dark` |
35
+ | `text-on-accent` | `palette.primary.contrastText` |
36
+ | `success` / `warning` / `error` / `info` | `palette.{success,warning,error,info}.main` |
37
+ | `success-bg` / `warning-bg` / `error-bg` / `info-bg` | `palette.{...}.light` |
38
+ | `success-on` / `warning-on` / `error-on` / `info-on` | `palette.{...}.contrastText` |
39
+ | `text` / `text-muted` / `text-subtle` | `palette.text.{primary,secondary,disabled}` |
40
+ | `surface` | `palette.background.default` |
41
+ | `surface-raised` | `palette.background.paper` |
42
+ | `border` | `palette.divider` |
43
+ | radius `md` | `shape.borderRadius` |
44
+ | font-size `md` | `typography.fontSize` |
39
45
 
40
46
  `@mui/material` (and its `@emotion/*` peers) are peer dependencies — the
41
47
  consuming app brings its own copy.
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import type { Theme } from "@mui/material/styles";
2
- /** Light or dark — the half of every L2 core token's `{light,dark}` pair. */
2
+ /** Light or dark — the half of every role's `{light,dark}` pair. */
3
3
  export type ThemeMode = "light" | "dark";
4
4
  /**
5
- * `@stapel/tokens` L2 → a MUI `Theme` (frontend-guidelines §2.4 table). Pure:
6
- * same `mode` in, an equivalent theme out; reads no globals.
5
+ * `@stapel/tokens` §68 roles → a MUI `Theme` (frontend-guidelines §2.4 table).
6
+ * Pure: same `mode` in, an equivalent theme out; reads no globals.
7
7
  */
8
8
  export declare function toMuiTheme(mode: ThemeMode): Theme;
9
9
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAYlD,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAOzC;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,CA2BjD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAWlD,oEAAoE;AACpE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAOzC;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,KAAK,CAgDjD"}
package/dist/index.js CHANGED
@@ -1,11 +1,13 @@
1
1
  /**
2
- * `@stapel/tokens-mui` — the Material UI leg of the token bridge
3
- * (frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
4
- * neutral role table in `@stapel/tokens` (`bridgeColorRoles` + the radius/
5
- * font-size roles) into a MUI `Theme`. The L2 → role decision is NOT duplicated
6
- * here — this file only renames roles to MUI's nested `palette`/`shape`/
7
- * `typography` fields and picks the light/dark half, so it and
8
- * `@stapel/tokens-antd` cannot drift.
2
+ * `@stapel/tokens-mui` — the Material UI leg of the token bridge (§68;
3
+ * frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
4
+ * neutral colour-role dictionary in `@stapel/tokens` (§68 — `surface`,
5
+ * `brand`, `text-muted`, `success-bg`, …) straight into a MUI `Theme`: a role
6
+ * name IS the MUI mapping's input, no separate role→role indirection table
7
+ * (that table — `bridgeColorRoles` — is gone; §68 Ф1 "алиас-слой
8
+ * совместимости не делать"). This file and `@stapel/tokens-antd` both read
9
+ * the same `colors` object, so they cannot silently diverge on what a role
10
+ * visually means.
9
11
  *
10
12
  * ```tsx
11
13
  * import { toMuiTheme } from "@stapel/tokens-mui";
@@ -18,31 +20,52 @@
18
20
  * ```
19
21
  */
20
22
  import { createTheme } from "@mui/material/styles";
21
- import { bridgeColorRoles, bridgeFontSizeRole, bridgeRadiusRole, colors, fontFamily, fontSize, radii, } from "@stapel/tokens";
22
- /** Resolve a neutral colour role to its hex for `mode` via the shared table. */
23
+ import { bridgeFontSizeRole, bridgeRadiusRole, colors, fontFamily, fontSize, radii, } from "@stapel/tokens";
24
+ /** Resolve a §68 colour role to its hex for `mode`. */
23
25
  function role(name, mode) {
24
- return colors[bridgeColorRoles[name]][mode];
26
+ return colors[name][mode];
25
27
  }
26
28
  /**
27
- * `@stapel/tokens` L2 → a MUI `Theme` (frontend-guidelines §2.4 table). Pure:
28
- * same `mode` in, an equivalent theme out; reads no globals.
29
+ * `@stapel/tokens` §68 roles → a MUI `Theme` (frontend-guidelines §2.4 table).
30
+ * Pure: same `mode` in, an equivalent theme out; reads no globals.
29
31
  */
30
32
  export function toMuiTheme(mode) {
31
33
  return createTheme({
32
34
  palette: {
33
35
  mode,
34
- primary: { main: role("brand", mode), contrastText: role("textOnBrand", mode) },
35
- success: { main: role("success", mode) },
36
- warning: { main: role("warning", mode) },
37
- error: { main: role("danger", mode) },
38
- info: { main: role("info", mode) },
36
+ primary: {
37
+ main: role("brand", mode),
38
+ dark: role("brand-active", mode),
39
+ contrastText: role("text-on-accent", mode),
40
+ },
41
+ success: {
42
+ main: role("success", mode),
43
+ light: role("success-bg", mode),
44
+ contrastText: role("success-on", mode),
45
+ },
46
+ warning: {
47
+ main: role("warning", mode),
48
+ light: role("warning-bg", mode),
49
+ contrastText: role("warning-on", mode),
50
+ },
51
+ error: {
52
+ main: role("error", mode),
53
+ light: role("error-bg", mode),
54
+ contrastText: role("error-on", mode),
55
+ },
56
+ info: {
57
+ main: role("info", mode),
58
+ light: role("info-bg", mode),
59
+ contrastText: role("info-on", mode),
60
+ },
39
61
  text: {
40
- primary: role("textPrimary", mode),
41
- secondary: role("textSecondary", mode),
62
+ primary: role("text", mode),
63
+ secondary: role("text-muted", mode),
64
+ disabled: role("text-subtle", mode),
42
65
  },
43
66
  background: {
44
- default: role("bgLayout", mode),
45
- paper: role("bgContainer", mode),
67
+ default: role("surface", mode),
68
+ paper: role("surface-raised", mode),
46
69
  },
47
70
  divider: role("border", mode),
48
71
  },
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,GACN,MAAM,gBAAgB,CAAC;AAMxB,gFAAgF;AAChF,SAAS,IAAI,CAAC,IAAqB,EAAE,IAAe;IAClD,OAAO,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAC9C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,IAAe;IACxC,OAAO,WAAW,CAAC;QACjB,OAAO,EAAE;YACP,IAAI;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE;YAC/E,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE;YACxC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;YACrC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE;YAClC,IAAI,EAAE;gBACJ,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;gBAClC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;aACvC;YACD,UAAU,EAAE;gBACV,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;aACjC;YACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;SAC9B;QACD,KAAK,EAAE;YACL,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;SACtC;QACD,UAAU,EAAE;YACV,UAAU,EAAE,UAAU,CAAC,IAAI;YAC3B,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,QAAQ;SAChD;KACF,CAAC,CAAC;AACL,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,GACN,MAAM,gBAAgB,CAAC;AAMxB,uDAAuD;AACvD,SAAS,IAAI,CAAC,IAAmB,EAAE,IAAe;IAChD,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,IAAe;IACxC,OAAO,WAAW,CAAC;QACjB,OAAO,EAAE;YACP,IAAI;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;gBACzB,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;gBAChC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC;aAC3C;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;gBAC3B,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;aACvC;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;gBAC3B,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;aACvC;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;gBAC7B,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;aACrC;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;gBACxB,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;gBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;aACpC;YACD,IAAI,EAAE;gBACJ,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;gBAC3B,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;gBACnC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;aACpC;YACD,UAAU,EAAE;gBACV,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;gBAC9B,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC;aACpC;YACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;SAC9B;QACD,KAAK,EAAE;YACL,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;SACtC;QACD,UAAU,EAAE;YACV,UAAU,EAAE,UAAU,CAAC,IAAI;YAC3B,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,QAAQ;SAChD;KACF,CAAC,CAAC;AACL,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stapel/tokens-mui",
3
- "version": "0.2.0",
4
- "description": "Token bridge (frontend-guidelines §2.4, §38 T3): projects @stapel/tokens L2 core tokens onto a Material UI theme. `toMuiTheme(mode)` → a MUI Theme (createTheme). Pure function, one mapping table shared with @stapel/tokens-antd. Not components.",
3
+ "version": "0.3.0",
4
+ "description": "Token bridge (§68 neutral colour-role dictionary; frontend-guidelines §2.4, §38 T3): projects @stapel/tokens' roles (surface, brand, text-muted, success-bg, ...) onto a Material UI theme. `toMuiTheme(mode)` → a MUI Theme (createTheme). Pure function reading the same `colors` object as @stapel/tokens-antd, so they cannot diverge. Not components.",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -35,7 +35,7 @@
35
35
  "@mui/material": ">=5.15.0 <8"
36
36
  },
37
37
  "dependencies": {
38
- "@stapel/tokens": "^0.4.0"
38
+ "@stapel/tokens": "^0.5.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@emotion/react": "^11.14.0",
package/src/index.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /**
2
- * `@stapel/tokens-mui` — the Material UI leg of the token bridge
3
- * (frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
4
- * neutral role table in `@stapel/tokens` (`bridgeColorRoles` + the radius/
5
- * font-size roles) into a MUI `Theme`. The L2 → role decision is NOT duplicated
6
- * here — this file only renames roles to MUI's nested `palette`/`shape`/
7
- * `typography` fields and picks the light/dark half, so it and
8
- * `@stapel/tokens-antd` cannot drift.
2
+ * `@stapel/tokens-mui` — the Material UI leg of the token bridge (§68;
3
+ * frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
4
+ * neutral colour-role dictionary in `@stapel/tokens` (§68 — `surface`,
5
+ * `brand`, `text-muted`, `success-bg`, …) straight into a MUI `Theme`: a role
6
+ * name IS the MUI mapping's input, no separate role→role indirection table
7
+ * (that table — `bridgeColorRoles` — is gone; §68 Ф1 "алиас-слой
8
+ * совместимости не делать"). This file and `@stapel/tokens-antd` both read
9
+ * the same `colors` object, so they cannot silently diverge on what a role
10
+ * visually means.
9
11
  *
10
12
  * ```tsx
11
13
  * import { toMuiTheme } from "@stapel/tokens-mui";
@@ -20,7 +22,6 @@
20
22
  import { createTheme } from "@mui/material/styles";
21
23
  import type { Theme } from "@mui/material/styles";
22
24
  import {
23
- bridgeColorRoles,
24
25
  bridgeFontSizeRole,
25
26
  bridgeRadiusRole,
26
27
  colors,
@@ -28,36 +29,57 @@ import {
28
29
  fontSize,
29
30
  radii,
30
31
  } from "@stapel/tokens";
31
- import type { BridgeColorRole } from "@stapel/tokens";
32
+ import type { CoreTokenName } from "@stapel/tokens";
32
33
 
33
- /** Light or dark — the half of every L2 core token's `{light,dark}` pair. */
34
+ /** Light or dark — the half of every role's `{light,dark}` pair. */
34
35
  export type ThemeMode = "light" | "dark";
35
36
 
36
- /** Resolve a neutral colour role to its hex for `mode` via the shared table. */
37
- function role(name: BridgeColorRole, mode: ThemeMode): string {
38
- return colors[bridgeColorRoles[name]][mode];
37
+ /** Resolve a §68 colour role to its hex for `mode`. */
38
+ function role(name: CoreTokenName, mode: ThemeMode): string {
39
+ return colors[name][mode];
39
40
  }
40
41
 
41
42
  /**
42
- * `@stapel/tokens` L2 → a MUI `Theme` (frontend-guidelines §2.4 table). Pure:
43
- * same `mode` in, an equivalent theme out; reads no globals.
43
+ * `@stapel/tokens` §68 roles → a MUI `Theme` (frontend-guidelines §2.4 table).
44
+ * Pure: same `mode` in, an equivalent theme out; reads no globals.
44
45
  */
45
46
  export function toMuiTheme(mode: ThemeMode): Theme {
46
47
  return createTheme({
47
48
  palette: {
48
49
  mode,
49
- primary: { main: role("brand", mode), contrastText: role("textOnBrand", mode) },
50
- success: { main: role("success", mode) },
51
- warning: { main: role("warning", mode) },
52
- error: { main: role("danger", mode) },
53
- info: { main: role("info", mode) },
50
+ primary: {
51
+ main: role("brand", mode),
52
+ dark: role("brand-active", mode),
53
+ contrastText: role("text-on-accent", mode),
54
+ },
55
+ success: {
56
+ main: role("success", mode),
57
+ light: role("success-bg", mode),
58
+ contrastText: role("success-on", mode),
59
+ },
60
+ warning: {
61
+ main: role("warning", mode),
62
+ light: role("warning-bg", mode),
63
+ contrastText: role("warning-on", mode),
64
+ },
65
+ error: {
66
+ main: role("error", mode),
67
+ light: role("error-bg", mode),
68
+ contrastText: role("error-on", mode),
69
+ },
70
+ info: {
71
+ main: role("info", mode),
72
+ light: role("info-bg", mode),
73
+ contrastText: role("info-on", mode),
74
+ },
54
75
  text: {
55
- primary: role("textPrimary", mode),
56
- secondary: role("textSecondary", mode),
76
+ primary: role("text", mode),
77
+ secondary: role("text-muted", mode),
78
+ disabled: role("text-subtle", mode),
57
79
  },
58
80
  background: {
59
- default: role("bgLayout", mode),
60
- paper: role("bgContainer", mode),
81
+ default: role("surface", mode),
82
+ paper: role("surface-raised", mode),
61
83
  },
62
84
  divider: role("border", mode),
63
85
  },