@bug-on/md3-tokens 0.1.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 (14) hide show
  1. package/.turbo/turbo-build.log +22 -0
  2. package/dist/index.d.mts +106 -0
  3. package/dist/index.d.ts +106 -0
  4. package/dist/index.js +71 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +41 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +45 -0
  9. package/src/colors.css +164 -0
  10. package/src/index.ts +1 -0
  11. package/src/motion.ts +46 -0
  12. package/src/shape.css +9 -0
  13. package/tsconfig.json +14 -0
  14. package/tsup.config.ts +9 -0
package/.turbo/turbo-build.log ADDED
@@ -0,0 +1,22 @@
1
+
2
+ > @bug-on/md3-tokens@0.1.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tokens
3
+ > tsup
4
+
5
+ CLI Building entry: src/index.ts
6
+ CLI Using tsconfig: tsconfig.json
7
+ CLI tsup v8.5.1
8
+ CLI Using tsup config: /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tokens/tsup.config.ts
9
+ CLI Target: es2017
10
+ CLI Cleaning output folder
11
+ ESM Build start
12
+ CJS Build start
13
+ ESM dist/index.mjs 937.00 B
14
+ ESM dist/index.mjs.map 2.15 KB
15
+ ESM ⚡️ Build success in 39ms
16
+ CJS dist/index.js 2.00 KB
17
+ CJS dist/index.js.map 2.30 KB
18
+ CJS ⚡️ Build success in 37ms
19
+ DTS Build start
20
+ DTS ⚡️ Build success in 1528ms
21
+ DTS dist/index.d.mts 3.11 KB
22
+ DTS dist/index.d.ts 3.11 KB
package/dist/index.d.mts ADDED
@@ -0,0 +1,106 @@
1
+ /**
2
+ * MD3 Expressive Motion Tokens
3
+ * Framework-agnostic JS objects.
4
+ */
5
+ declare const duration: {
6
+ readonly short1: 50;
7
+ readonly short2: 100;
8
+ readonly short3: 150;
9
+ readonly short4: 200;
10
+ readonly medium1: 250;
11
+ readonly medium2: 300;
12
+ readonly medium3: 350;
13
+ readonly medium4: 400;
14
+ readonly long1: 450;
15
+ readonly long2: 500;
16
+ readonly long3: 550;
17
+ readonly long4: 600;
18
+ readonly extraLong1: 700;
19
+ readonly extraLong2: 800;
20
+ readonly extraLong3: 900;
21
+ readonly extraLong4: 1000;
22
+ };
23
+ declare const easing: {
24
+ readonly standard: [number, number, number, number];
25
+ readonly standardAccelerate: [number, number, number, number];
26
+ readonly standardDecelerate: [number, number, number, number];
27
+ readonly emphasized: [number, number, number, number];
28
+ readonly emphasizedAccelerate: [number, number, number, number];
29
+ readonly emphasizedDecelerate: [number, number, number, number];
30
+ };
31
+ declare const spring: {
32
+ readonly default: {
33
+ readonly type: "spring";
34
+ readonly stiffness: 500;
35
+ readonly damping: 30;
36
+ readonly mass: 0.8;
37
+ };
38
+ readonly snappy: {
39
+ readonly type: "spring";
40
+ readonly stiffness: 600;
41
+ readonly damping: 25;
42
+ };
43
+ readonly gentle: {
44
+ readonly type: "spring";
45
+ readonly stiffness: 300;
46
+ readonly damping: 20;
47
+ };
48
+ readonly bouncy: {
49
+ readonly type: "spring";
50
+ readonly stiffness: 400;
51
+ readonly damping: 15;
52
+ };
53
+ };
54
+ declare const motionTokens: {
55
+ duration: {
56
+ readonly short1: 50;
57
+ readonly short2: 100;
58
+ readonly short3: 150;
59
+ readonly short4: 200;
60
+ readonly medium1: 250;
61
+ readonly medium2: 300;
62
+ readonly medium3: 350;
63
+ readonly medium4: 400;
64
+ readonly long1: 450;
65
+ readonly long2: 500;
66
+ readonly long3: 550;
67
+ readonly long4: 600;
68
+ readonly extraLong1: 700;
69
+ readonly extraLong2: 800;
70
+ readonly extraLong3: 900;
71
+ readonly extraLong4: 1000;
72
+ };
73
+ easing: {
74
+ readonly standard: [number, number, number, number];
75
+ readonly standardAccelerate: [number, number, number, number];
76
+ readonly standardDecelerate: [number, number, number, number];
77
+ readonly emphasized: [number, number, number, number];
78
+ readonly emphasizedAccelerate: [number, number, number, number];
79
+ readonly emphasizedDecelerate: [number, number, number, number];
80
+ };
81
+ spring: {
82
+ readonly default: {
83
+ readonly type: "spring";
84
+ readonly stiffness: 500;
85
+ readonly damping: 30;
86
+ readonly mass: 0.8;
87
+ };
88
+ readonly snappy: {
89
+ readonly type: "spring";
90
+ readonly stiffness: 600;
91
+ readonly damping: 25;
92
+ };
93
+ readonly gentle: {
94
+ readonly type: "spring";
95
+ readonly stiffness: 300;
96
+ readonly damping: 20;
97
+ };
98
+ readonly bouncy: {
99
+ readonly type: "spring";
100
+ readonly stiffness: 400;
101
+ readonly damping: 15;
102
+ };
103
+ };
104
+ };
105
+
106
+ export { duration, easing, motionTokens, spring };
package/dist/index.d.ts ADDED
@@ -0,0 +1,106 @@
1
+ /**
2
+ * MD3 Expressive Motion Tokens
3
+ * Framework-agnostic JS objects.
4
+ */
5
+ declare const duration: {
6
+ readonly short1: 50;
7
+ readonly short2: 100;
8
+ readonly short3: 150;
9
+ readonly short4: 200;
10
+ readonly medium1: 250;
11
+ readonly medium2: 300;
12
+ readonly medium3: 350;
13
+ readonly medium4: 400;
14
+ readonly long1: 450;
15
+ readonly long2: 500;
16
+ readonly long3: 550;
17
+ readonly long4: 600;
18
+ readonly extraLong1: 700;
19
+ readonly extraLong2: 800;
20
+ readonly extraLong3: 900;
21
+ readonly extraLong4: 1000;
22
+ };
23
+ declare const easing: {
24
+ readonly standard: [number, number, number, number];
25
+ readonly standardAccelerate: [number, number, number, number];
26
+ readonly standardDecelerate: [number, number, number, number];
27
+ readonly emphasized: [number, number, number, number];
28
+ readonly emphasizedAccelerate: [number, number, number, number];
29
+ readonly emphasizedDecelerate: [number, number, number, number];
30
+ };
31
+ declare const spring: {
32
+ readonly default: {
33
+ readonly type: "spring";
34
+ readonly stiffness: 500;
35
+ readonly damping: 30;
36
+ readonly mass: 0.8;
37
+ };
38
+ readonly snappy: {
39
+ readonly type: "spring";
40
+ readonly stiffness: 600;
41
+ readonly damping: 25;
42
+ };
43
+ readonly gentle: {
44
+ readonly type: "spring";
45
+ readonly stiffness: 300;
46
+ readonly damping: 20;
47
+ };
48
+ readonly bouncy: {
49
+ readonly type: "spring";
50
+ readonly stiffness: 400;
51
+ readonly damping: 15;
52
+ };
53
+ };
54
+ declare const motionTokens: {
55
+ duration: {
56
+ readonly short1: 50;
57
+ readonly short2: 100;
58
+ readonly short3: 150;
59
+ readonly short4: 200;
60
+ readonly medium1: 250;
61
+ readonly medium2: 300;
62
+ readonly medium3: 350;
63
+ readonly medium4: 400;
64
+ readonly long1: 450;
65
+ readonly long2: 500;
66
+ readonly long3: 550;
67
+ readonly long4: 600;
68
+ readonly extraLong1: 700;
69
+ readonly extraLong2: 800;
70
+ readonly extraLong3: 900;
71
+ readonly extraLong4: 1000;
72
+ };
73
+ easing: {
74
+ readonly standard: [number, number, number, number];
75
+ readonly standardAccelerate: [number, number, number, number];
76
+ readonly standardDecelerate: [number, number, number, number];
77
+ readonly emphasized: [number, number, number, number];
78
+ readonly emphasizedAccelerate: [number, number, number, number];
79
+ readonly emphasizedDecelerate: [number, number, number, number];
80
+ };
81
+ spring: {
82
+ readonly default: {
83
+ readonly type: "spring";
84
+ readonly stiffness: 500;
85
+ readonly damping: 30;
86
+ readonly mass: 0.8;
87
+ };
88
+ readonly snappy: {
89
+ readonly type: "spring";
90
+ readonly stiffness: 600;
91
+ readonly damping: 25;
92
+ };
93
+ readonly gentle: {
94
+ readonly type: "spring";
95
+ readonly stiffness: 300;
96
+ readonly damping: 20;
97
+ };
98
+ readonly bouncy: {
99
+ readonly type: "spring";
100
+ readonly stiffness: 400;
101
+ readonly damping: 15;
102
+ };
103
+ };
104
+ };
105
+
106
+ export { duration, easing, motionTokens, spring };
package/dist/index.js ADDED
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ duration: () => duration,
24
+ easing: () => easing,
25
+ motionTokens: () => motionTokens,
26
+ spring: () => spring
27
+ });
28
+ module.exports = __toCommonJS(index_exports);
29
+
30
+ // src/motion.ts
31
+ var duration = {
32
+ short1: 50,
33
+ short2: 100,
34
+ short3: 150,
35
+ short4: 200,
36
+ medium1: 250,
37
+ medium2: 300,
38
+ medium3: 350,
39
+ medium4: 400,
40
+ long1: 450,
41
+ long2: 500,
42
+ long3: 550,
43
+ long4: 600,
44
+ extraLong1: 700,
45
+ extraLong2: 800,
46
+ extraLong3: 900,
47
+ extraLong4: 1e3
48
+ };
49
+ var easing = {
50
+ standard: [0.2, 0, 0, 1],
51
+ standardAccelerate: [0.3, 0, 1, 1],
52
+ standardDecelerate: [0, 0, 0, 1],
53
+ emphasized: [0.2, 0, 0, 1],
54
+ emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
55
+ emphasizedDecelerate: [0.05, 0.7, 0.1, 1]
56
+ };
57
+ var spring = {
58
+ default: { type: "spring", stiffness: 500, damping: 30, mass: 0.8 },
59
+ snappy: { type: "spring", stiffness: 600, damping: 25 },
60
+ gentle: { type: "spring", stiffness: 300, damping: 20 },
61
+ bouncy: { type: "spring", stiffness: 400, damping: 15 }
62
+ };
63
+ var motionTokens = { duration, easing, spring };
64
+ // Annotate the CommonJS export names for ESM import in node:
65
+ 0 && (module.exports = {
66
+ duration,
67
+ easing,
68
+ motionTokens,
69
+ spring
70
+ });
71
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/motion.ts"],"sourcesContent":["export { duration, easing, motionTokens, spring } from \"./motion\";\n","/**\n * MD3 Expressive Motion Tokens\n * Framework-agnostic JS objects.\n */\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\nexport const easing = {\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n} as const;\n\nexport const spring = {\n\tdefault: { type: \"spring\" as const, stiffness: 500, damping: 30, mass: 0.8 },\n\tsnappy: { type: \"spring\" as const, stiffness: 600, damping: 25 },\n\tgentle: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n\tbouncy: { type: \"spring\" as const, stiffness: 400, damping: 15 },\n} as const;\n\nexport const motionTokens = { duration, easing, spring };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACKO,IAAM,WAAW;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACb;AAEO,IAAM,SAAS;AAAA,EACrB,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACvB,oBAAoB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACjC,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/B,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,sBAAsB,CAAC,KAAK,GAAG,KAAK,IAAI;AAAA,EACxC,sBAAsB,CAAC,MAAM,KAAK,KAAK,CAAG;AAM3C;AAEO,IAAM,SAAS;AAAA,EACrB,SAAS,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,IAAI,MAAM,IAAI;AAAA,EAC3E,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAChE;AAEO,IAAM,eAAe,EAAE,UAAU,QAAQ,OAAO;","names":[]}
package/dist/index.mjs ADDED
@@ -0,0 +1,41 @@
1
+ // src/motion.ts
2
+ var duration = {
3
+ short1: 50,
4
+ short2: 100,
5
+ short3: 150,
6
+ short4: 200,
7
+ medium1: 250,
8
+ medium2: 300,
9
+ medium3: 350,
10
+ medium4: 400,
11
+ long1: 450,
12
+ long2: 500,
13
+ long3: 550,
14
+ long4: 600,
15
+ extraLong1: 700,
16
+ extraLong2: 800,
17
+ extraLong3: 900,
18
+ extraLong4: 1e3
19
+ };
20
+ var easing = {
21
+ standard: [0.2, 0, 0, 1],
22
+ standardAccelerate: [0.3, 0, 1, 1],
23
+ standardDecelerate: [0, 0, 0, 1],
24
+ emphasized: [0.2, 0, 0, 1],
25
+ emphasizedAccelerate: [0.3, 0, 0.8, 0.15],
26
+ emphasizedDecelerate: [0.05, 0.7, 0.1, 1]
27
+ };
28
+ var spring = {
29
+ default: { type: "spring", stiffness: 500, damping: 30, mass: 0.8 },
30
+ snappy: { type: "spring", stiffness: 600, damping: 25 },
31
+ gentle: { type: "spring", stiffness: 300, damping: 20 },
32
+ bouncy: { type: "spring", stiffness: 400, damping: 15 }
33
+ };
34
+ var motionTokens = { duration, easing, spring };
35
+ export {
36
+ duration,
37
+ easing,
38
+ motionTokens,
39
+ spring
40
+ };
41
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/motion.ts"],"sourcesContent":["/**\n * MD3 Expressive Motion Tokens\n * Framework-agnostic JS objects.\n */\n\nexport const duration = {\n\tshort1: 50,\n\tshort2: 100,\n\tshort3: 150,\n\tshort4: 200,\n\tmedium1: 250,\n\tmedium2: 300,\n\tmedium3: 350,\n\tmedium4: 400,\n\tlong1: 450,\n\tlong2: 500,\n\tlong3: 550,\n\tlong4: 600,\n\textraLong1: 700,\n\textraLong2: 800,\n\textraLong3: 900,\n\textraLong4: 1000,\n} as const;\n\nexport const easing = {\n\tstandard: [0.2, 0, 0, 1] as [number, number, number, number],\n\tstandardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],\n\tstandardDecelerate: [0, 0, 0, 1] as [number, number, number, number],\n\temphasized: [0.2, 0, 0, 1] as [number, number, number, number],\n\temphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],\n\temphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t\tnumber,\n\t],\n} as const;\n\nexport const spring = {\n\tdefault: { type: \"spring\" as const, stiffness: 500, damping: 30, mass: 0.8 },\n\tsnappy: { type: \"spring\" as const, stiffness: 600, damping: 25 },\n\tgentle: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n\tbouncy: { type: \"spring\" as const, stiffness: 400, damping: 15 },\n} as const;\n\nexport const motionTokens = { duration, easing, spring };\n"],"mappings":";AAKO,IAAM,WAAW;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACb;AAEO,IAAM,SAAS;AAAA,EACrB,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACvB,oBAAoB,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACjC,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/B,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,sBAAsB,CAAC,KAAK,GAAG,KAAK,IAAI;AAAA,EACxC,sBAAsB,CAAC,MAAM,KAAK,KAAK,CAAG;AAM3C;AAEO,IAAM,SAAS;AAAA,EACrB,SAAS,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,IAAI,MAAM,IAAI;AAAA,EAC3E,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAAA,EAC/D,QAAQ,EAAE,MAAM,UAAmB,WAAW,KAAK,SAAS,GAAG;AAChE;AAEO,IAAM,eAAe,EAAE,UAAU,QAAQ,OAAO;","names":[]}
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@bug-on/md3-tokens",
3
+ "version": "0.1.0",
4
+ "description": "Material Design 3 Expressive design tokens",
5
+ "author": "Bug Ổn",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/nguyentruongton/bug-on-md3-expressive.git",
10
+ "directory": "packages/tokens"
11
+ },
12
+ "keywords": [
13
+ "react",
14
+ "tailwind",
15
+ "material-design-3",
16
+ "md3",
17
+ "ui-library",
18
+ "components",
19
+ "bug-on"
20
+ ],
21
+ "main": "./dist/index.js",
22
+ "module": "./dist/index.mjs",
23
+ "types": "./dist/index.d.ts",
24
+ "exports": {
25
+ ".": {
26
+ "types": "./dist/index.d.ts",
27
+ "import": "./dist/index.mjs",
28
+ "require": "./dist/index.js"
29
+ },
30
+ "./colors.css": "./src/colors.css",
31
+ "./elevation.css": "./src/elevation.css",
32
+ "./shape.css": "./src/shape.css",
33
+ "./typography.css": "./src/typography.css",
34
+ "./index.css": "./dist/index.css"
35
+ },
36
+ "devDependencies": {
37
+ "tsup": "^8.4.0",
38
+ "typescript": "5.8.3"
39
+ },
40
+ "scripts": {
41
+ "build": "tsup",
42
+ "dev": "tsup --watch",
43
+ "clean": "rm -rf dist"
44
+ }
45
+ }
package/src/colors.css ADDED
@@ -0,0 +1,164 @@
1
+ /* MD3 System Color Tokens — Light Theme (Baseline Scheme)
2
+ *
3
+ * Mapping: PaletteTokens → ColorLightTokens → CSS variable
4
+ * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
5
+ */
6
+ :root {
7
+ /* ── Primary ─────────────────────────────────────────────────────────── */
8
+ --md-sys-color-primary: #6750a4; /* Primary40 */
9
+ --md-sys-color-on-primary: #ffffff; /* Primary100 */
10
+ --md-sys-color-primary-container: #eaddff; /* Primary90 */
11
+ --md-sys-color-on-primary-container: #21005d; /* Primary10 */
12
+ --md-sys-color-inverse-primary: #d0bcff; /* Primary80 */
13
+
14
+ /* ── Primary Fixed (stable across light/dark) ────────────────────────── */
15
+ --md-sys-color-primary-fixed: #eaddff; /* Primary90 */
16
+ --md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
17
+ --md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
18
+ --md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */
19
+
20
+ /* ── Secondary ───────────────────────────────────────────────────────── */
21
+ --md-sys-color-secondary: #625b71; /* Secondary40 */
22
+ --md-sys-color-on-secondary: #ffffff; /* Secondary100 */
23
+ --md-sys-color-secondary-container: #e8def8; /* Secondary90 */
24
+ --md-sys-color-on-secondary-container: #1d192b; /* Secondary10 */
25
+
26
+ /* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
27
+ --md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
28
+ --md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
29
+ --md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
30
+ --md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */
31
+
32
+ /* ── Tertiary ────────────────────────────────────────────────────────── */
33
+ --md-sys-color-tertiary: #7d5260; /* Tertiary40 */
34
+ --md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
35
+ --md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90 */
36
+ --md-sys-color-on-tertiary-container: #31111d; /* Tertiary10 */
37
+
38
+ /* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
39
+ --md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
40
+ --md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
41
+ --md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
42
+ --md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */
43
+
44
+ /* ── Error ───────────────────────────────────────────────────────────── */
45
+ --md-sys-color-error: #b3261e; /* Error40 */
46
+ --md-sys-color-on-error: #ffffff; /* Error100 */
47
+ --md-sys-color-error-container: #f9dedc; /* Error90 */
48
+ --md-sys-color-on-error-container: #410e0b; /* Error10 */
49
+
50
+ /* ── Surface ─────────────────────────────────────────────────────────── */
51
+ --md-sys-color-surface: #fef7ff; /* Neutral98 */
52
+ --md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
53
+ --md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
54
+ --md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
55
+ --md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
56
+ --md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
57
+ --md-sys-color-surface-tint: #6750a4; /* = primary */
58
+ --md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
59
+ --md-sys-color-surface-container-low: #f7f2fa; /* Neutral96 */
60
+ --md-sys-color-surface-container: #f3edf7; /* Neutral94 */
61
+ --md-sys-color-surface-container-high: #ece6f0; /* Neutral92 */
62
+ --md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90 */
63
+
64
+ /* ── Inverse Surface ─────────────────────────────────────────────────── */
65
+ --md-sys-color-inverse-surface: #313033; /* Neutral20 */
66
+ --md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */
67
+
68
+ /* ── Background ──────────────────────────────────────────────────────── */
69
+ --md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
70
+ --md-sys-color-on-background: #1c1b1f; /* Neutral10 */
71
+
72
+ /* ── Outline ─────────────────────────────────────────────────────────── */
73
+ --md-sys-color-outline: #79747e; /* NeutralVariant50 */
74
+ --md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */
75
+
76
+ /* ── Utility ─────────────────────────────────────────────────────────── */
77
+ --md-sys-color-scrim: #000000; /* Neutral0 */
78
+ --md-sys-color-shadow: #000000; /* Neutral0 */
79
+
80
+ /* ── Indicator tokens — Loading & Progress ───────────────────────────── */
81
+ --md-sys-color-indicator-active: var(--md-sys-color-primary);
82
+ --md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
83
+ --md-sys-color-indicator-contained-active: var(
84
+ --md-sys-color-on-primary-container
85
+ );
86
+ --md-sys-color-indicator-contained-container: var(
87
+ --md-sys-color-primary-container
88
+ );
89
+ --md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
90
+ --md-sys-color-indicator-stop: var(--md-sys-color-primary);
91
+ }
92
+
93
+ /* Dark Theme overrides
94
+ * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
95
+ */
96
+ [data-theme="dark"],
97
+ .dark {
98
+ /* ── Primary ─────────────────────────────────────────────────────────── */
99
+ --md-sys-color-primary: #d0bcff; /* Primary80 */
100
+ --md-sys-color-on-primary: #381e72; /* Primary20 */
101
+ --md-sys-color-primary-container: #4f378b; /* Primary30 */
102
+ --md-sys-color-on-primary-container: #eaddff; /* Primary90 */
103
+ --md-sys-color-inverse-primary: #6750a4; /* Primary40 */
104
+
105
+ /* ── Secondary ───────────────────────────────────────────────────────── */
106
+ --md-sys-color-secondary: #ccc2dc; /* Secondary80 */
107
+ --md-sys-color-on-secondary: #332d41; /* Secondary20 */
108
+ --md-sys-color-secondary-container: #4a4458; /* Secondary30 */
109
+ --md-sys-color-on-secondary-container: #e8def8; /* Secondary90 */
110
+
111
+ /* ── Tertiary ────────────────────────────────────────────────────────── */
112
+ --md-sys-color-tertiary: #efb8c8; /* Tertiary80 */
113
+ --md-sys-color-on-tertiary: #492532; /* Tertiary20 */
114
+ --md-sys-color-tertiary-container: #633b48; /* Tertiary30 */
115
+ --md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90 */
116
+
117
+ /* ── Error ───────────────────────────────────────────────────────────── */
118
+ --md-sys-color-error: #f2b8b5; /* Error80 */
119
+ --md-sys-color-on-error: #601410; /* Error20 */
120
+ --md-sys-color-error-container: #8c1d18; /* Error30 */
121
+ --md-sys-color-on-error-container: #f9dedc; /* Error90 */
122
+
123
+ /* ── Surface ─────────────────────────────────────────────────────────── */
124
+ --md-sys-color-surface: #141218; /* Neutral6 */
125
+ --md-sys-color-on-surface: #e6e1e5; /* Neutral90 */
126
+ --md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
127
+ --md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
128
+ --md-sys-color-surface-dim: #141218; /* Neutral6 */
129
+ --md-sys-color-surface-bright: #3b383e; /* Neutral24 */
130
+ --md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
131
+ --md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4 */
132
+ --md-sys-color-surface-container-low: #1d1b20; /* Neutral10 */
133
+ --md-sys-color-surface-container: #211f26; /* Neutral12 */
134
+ --md-sys-color-surface-container-high: #2b2930; /* Neutral17 */
135
+ --md-sys-color-surface-container-highest: #36343b; /* Neutral22 */
136
+
137
+ /* ── Inverse Surface ─────────────────────────────────────────────────── */
138
+ --md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
139
+ --md-sys-color-inverse-on-surface: #313033; /* Neutral20 */
140
+
141
+ /* ── Background ──────────────────────────────────────────────────────── */
142
+ --md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
143
+ --md-sys-color-on-background: #e6e1e5; /* Neutral90 */
144
+
145
+ /* ── Outline ─────────────────────────────────────────────────────────── */
146
+ --md-sys-color-outline: #938f99; /* NeutralVariant60 */
147
+ --md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */
148
+
149
+ /* ── Utility ─────────────────────────────────────────────────────────── */
150
+ --md-sys-color-scrim: #000000;
151
+ --md-sys-color-shadow: #000000;
152
+
153
+ /* ── Indicator tokens — Dark ─────────────────────────────────────────── */
154
+ --md-sys-color-indicator-active: var(--md-sys-color-primary);
155
+ --md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
156
+ --md-sys-color-indicator-contained-active: var(
157
+ --md-sys-color-on-primary-container
158
+ );
159
+ --md-sys-color-indicator-contained-container: var(
160
+ --md-sys-color-primary-container
161
+ );
162
+ --md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
163
+ --md-sys-color-indicator-stop: var(--md-sys-color-primary);
164
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { duration, easing, motionTokens, spring } from "./motion";
package/src/motion.ts ADDED
@@ -0,0 +1,46 @@
1
+ /**
2
+ * MD3 Expressive Motion Tokens
3
+ * Framework-agnostic JS objects.
4
+ */
5
+
6
+ export const duration = {
7
+ short1: 50,
8
+ short2: 100,
9
+ short3: 150,
10
+ short4: 200,
11
+ medium1: 250,
12
+ medium2: 300,
13
+ medium3: 350,
14
+ medium4: 400,
15
+ long1: 450,
16
+ long2: 500,
17
+ long3: 550,
18
+ long4: 600,
19
+ extraLong1: 700,
20
+ extraLong2: 800,
21
+ extraLong3: 900,
22
+ extraLong4: 1000,
23
+ } as const;
24
+
25
+ export const easing = {
26
+ standard: [0.2, 0, 0, 1] as [number, number, number, number],
27
+ standardAccelerate: [0.3, 0, 1, 1] as [number, number, number, number],
28
+ standardDecelerate: [0, 0, 0, 1] as [number, number, number, number],
29
+ emphasized: [0.2, 0, 0, 1] as [number, number, number, number],
30
+ emphasizedAccelerate: [0.3, 0, 0.8, 0.15] as [number, number, number, number],
31
+ emphasizedDecelerate: [0.05, 0.7, 0.1, 1.0] as [
32
+ number,
33
+ number,
34
+ number,
35
+ number,
36
+ ],
37
+ } as const;
38
+
39
+ export const spring = {
40
+ default: { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.8 },
41
+ snappy: { type: "spring" as const, stiffness: 600, damping: 25 },
42
+ gentle: { type: "spring" as const, stiffness: 300, damping: 20 },
43
+ bouncy: { type: "spring" as const, stiffness: 400, damping: 15 },
44
+ } as const;
45
+
46
+ export const motionTokens = { duration, easing, spring };
package/src/shape.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --md-sys-shape-corner-none: 0px;
3
+ --md-sys-shape-corner-extra-small: 4px;
4
+ --md-sys-shape-corner-small: 8px;
5
+ --md-sys-shape-corner-medium: 12px;
6
+ --md-sys-shape-corner-large: 16px;
7
+ --md-sys-shape-corner-extra-large: 28px;
8
+ --md-sys-shape-corner-full: 9999px;
9
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2017",
4
+ "module": "NodeNext",
5
+ "moduleResolution": "NodeNext",
6
+ "esModuleInterop": true,
7
+ "strict": true,
8
+ "skipLibCheck": true,
9
+ "forceConsistentCasingInFileNames": true,
10
+ "declaration": true,
11
+ "outDir": "dist"
12
+ },
13
+ "include": ["src"]
14
+ }
package/tsup.config.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { defineConfig } from "tsup";
2
+
3
+ export default defineConfig({
4
+ entry: ["src/index.ts"],
5
+ format: ["esm", "cjs"],
6
+ dts: true,
7
+ sourcemap: true,
8
+ clean: true,
9
+ });