@bug-on/md3-tokens 2.0.0 → 3.0.1

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 (9) hide show
  1. package/.turbo/turbo-build.log +28 -22
  2. package/CHANGELOG.md +17 -0
  3. package/dist/colors.css +164 -0
  4. package/dist/shape.css +9 -0
  5. package/package.json +12 -6
  6. package/scripts/copy-css.js +35 -0
  7. package/src/css.d.ts +25 -0
  8. package/tsconfig.json +1 -0
  9. package/tsup.config.ts +1 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,22 +1,28 @@
1
-
2
- > @bug-on/md3-tokens@2.0.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 23ms
16
- CJS dist/index.js 2.00 KB
17
- CJS dist/index.js.map 2.30 KB
18
- CJS ⚡️ Build success in 23ms
19
- DTS Build start
20
- DTS ⚡️ Build success in 1067ms
21
- DTS dist/index.d.mts 3.11 KB
22
- DTS dist/index.d.ts 3.11 KB
1
+
2
+ 
3
+ > @bug-on/md3-tokens@3.0.1 build /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/tokens
4
+ > tsup
5
+
6
+ CLI Building entry: src/index.ts
7
+ CLI Using tsconfig: tsconfig.json
8
+ CLI tsup v8.5.1
9
+ CLI Using tsup config: /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/tokens/tsup.config.ts
10
+ CLI Target: es2017
11
+ CLI Cleaning output folder
12
+ ESM Build start
13
+ CJS Build start
14
+ CJS dist/index.js 2.00 KB
15
+ CJS dist/index.js.map 2.30 KB
16
+ CJS ⚡️ Build success in 16ms
17
+ ESM dist/index.mjs 937.00 B
18
+ ESM dist/index.mjs.map 2.15 KB
19
+ ESM ⚡️ Build success in 17ms
20
+ Copying CSS assets to dist...
21
+ ✅ Copied colors.css to dist/colors.css
22
+ ✅ Copied shape.css to dist/shape.css
23
+ ✅ Generated colors.css.d.ts
24
+ ✅ Generated shape.css.d.ts
25
+ DTS Build start
26
+ DTS ⚡️ Build success in 941ms
27
+ DTS dist/index.d.mts 3.11 KB
28
+ DTS dist/index.d.ts 3.11 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @bug-on/md3-tokens
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - - **React**: Automatically bundle CSS tokens into `index.css` for easier setup.
8
+ - **React**: Re-export Tailwind plugin via `@bug-on/md3-react/plugin`.
9
+ - **React**: Add `@bug-on/md3-tailwind` and `@bug-on/md3-tokens` as direct dependencies.
10
+ - **Tokens**: Fix build warning when `index.css` is missing in src.
11
+ - **Tailwind**: Improved compatibility for Tailwind v3 and v4.
12
+ - **Build**: Optimized build process using native tsup features.
13
+
14
+ ## 3.0.0
15
+
16
+ ### Major Changes
17
+
18
+ - e170496: Fix types tokens, tailwind, add menu component ver 1
19
+
3
20
  ## 2.0.0
4
21
 
5
22
  ### Major Changes
package/dist/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/dist/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bug-on/md3-tokens",
3
- "version": "2.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "Material Design 3 Expressive design tokens",
5
5
  "author": "Bug Ổn",
6
6
  "license": "MIT",
@@ -27,16 +27,22 @@
27
27
  "import": "./dist/index.mjs",
28
28
  "require": "./dist/index.js"
29
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"
30
+ "./colors.css": {
31
+ "types": "./dist/colors.css.d.ts",
32
+ "default": "./dist/colors.css"
33
+ },
34
+ "./shape.css": {
35
+ "types": "./dist/shape.css.d.ts",
36
+ "default": "./dist/shape.css"
37
+ }
35
38
  },
39
+ "peerDependencies": {},
36
40
  "publishConfig": {
37
41
  "access": "public"
38
42
  },
39
43
  "devDependencies": {
44
+ "react": "^19.0.0",
45
+ "react-dom": "^19.0.0",
40
46
  "tsup": "^8.4.0",
41
47
  "typescript": "5.8.3"
42
48
  },
package/scripts/copy-css.js ADDED
@@ -0,0 +1,35 @@
1
+ const fs = require("node:fs");
2
+ const path = require("node:path");
3
+
4
+ const srcDir = path.join(__dirname, "../src");
5
+ const distDir = path.join(__dirname, "../dist");
6
+
7
+ // Ensure dist exists
8
+ if (!fs.existsSync(distDir)) {
9
+ fs.mkdirSync(distDir, { recursive: true });
10
+ }
11
+
12
+ console.log("Copying CSS assets to dist...");
13
+
14
+ // CSS files to copy from src/ to dist/ (only files that exist in src/)
15
+ const cssFiles = ["colors.css", "shape.css"];
16
+
17
+ for (const file of cssFiles) {
18
+ const srcPath = path.join(srcDir, file);
19
+ const distPath = path.join(distDir, file);
20
+ if (fs.existsSync(srcPath)) {
21
+ fs.copyFileSync(srcPath, distPath);
22
+ console.log(`✅ Copied ${file} to dist/${file}`);
23
+ } else {
24
+ console.warn(`⚠️ ${file} not found in src/, skipping`);
25
+ }
26
+ }
27
+
28
+ // Generate .d.ts stubs for each CSS sub-path export that will be in dist/
29
+ const cssStubs = cssFiles.map((f) => `${f}.d.ts`);
30
+
31
+ for (const stub of cssStubs) {
32
+ const distPath = path.join(distDir, stub);
33
+ fs.writeFileSync(distPath, "// CSS module — no runtime types\nexport {};\n");
34
+ console.log(`✅ Generated ${stub}`);
35
+ }
package/src/css.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ // CSS module type declarations for @bug-on/md3-tokens sub-path imports
2
+ declare module "@bug-on/md3-tokens/colors.css" {
3
+ const styles: string;
4
+ export default styles;
5
+ }
6
+
7
+ declare module "@bug-on/md3-tokens/elevation.css" {
8
+ const styles: string;
9
+ export default styles;
10
+ }
11
+
12
+ declare module "@bug-on/md3-tokens/shape.css" {
13
+ const styles: string;
14
+ export default styles;
15
+ }
16
+
17
+ declare module "@bug-on/md3-tokens/typography.css" {
18
+ const styles: string;
19
+ export default styles;
20
+ }
21
+
22
+ declare module "@bug-on/md3-tokens/index.css" {
23
+ const styles: string;
24
+ export default styles;
25
+ }
package/tsconfig.json CHANGED
@@ -8,6 +8,7 @@
8
8
  "skipLibCheck": true,
9
9
  "forceConsistentCasingInFileNames": true,
10
10
  "declaration": true,
11
+ "emitDeclarationOnly": true,
11
12
  "outDir": "dist"
12
13
  },
13
14
  "include": ["src"]
package/tsup.config.ts CHANGED
@@ -6,4 +6,5 @@ export default defineConfig({
6
6
  dts: true,
7
7
  sourcemap: true,
8
8
  clean: true,
9
+ onSuccess: "node scripts/copy-css.js",
9
10
  });