@bug-on/md3-tokens 2.0.0 → 3.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @bug-on/md3-tokens@2.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tokens
+> @bug-on/md3-tokens@3.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tokens
 > tsup
 
 CLI Building entry: src/index.ts
@@ -12,11 +12,18 @@
 CJS Build start
 ESM dist/index.mjs     937.00 B
 ESM dist/index.mjs.map 2.15 KB
-ESM ⚡️ Build success in 23ms
+ESM ⚡️ Build success in 17ms
 CJS dist/index.js     2.00 KB
 CJS dist/index.js.map 2.30 KB
-CJS ⚡️ Build success in 23ms
+CJS ⚡️ Build success in 17ms
+Copying CSS assets to dist...
+✅ Copied colors.css to dist/colors.css
+✅ Copied shape.css to dist/shape.css
+⚠️  index.css not found in src/, skipping
+✅ Generated colors.css.d.ts
+✅ Generated shape.css.d.ts
+✅ Generated index.css.d.ts
 DTS Build start
-DTS ⚡️ Build success in 1067ms
+DTS ⚡️ Build success in 878ms
 DTS dist/index.d.mts 3.11 KB
 DTS dist/index.d.ts  3.11 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bug-on/md3-tokens
 
+## 3.0.0
+
+### Major Changes
+
+- e170496: Fix types tokens, tailwind, add menu component ver 1
+
 ## 2.0.0
 
 ### Major Changes

package/dist/colors.css

@@ -0,0 +1,164 @@
+/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
+ *
+ * Mapping: PaletteTokens → ColorLightTokens → CSS variable
+ * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
+ */
+:root {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #6750a4; /* Primary40  */
+	--md-sys-color-on-primary: #ffffff; /* Primary100 */
+	--md-sys-color-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-on-primary-container: #21005d; /* Primary10  */
+	--md-sys-color-inverse-primary: #d0bcff; /* Primary80  */
+
+	/* ── Primary Fixed (stable across light/dark) ────────────────────────── */
+	--md-sys-color-primary-fixed: #eaddff; /* Primary90 */
+	--md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
+	--md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
+	--md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #625b71; /* Secondary40  */
+	--md-sys-color-on-secondary: #ffffff; /* Secondary100 */
+	--md-sys-color-secondary-container: #e8def8; /* Secondary90  */
+	--md-sys-color-on-secondary-container: #1d192b; /* Secondary10  */
+
+	/* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
+	--md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
+	--md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
+	--md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
+	--md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #7d5260; /* Tertiary40  */
+	--md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
+	--md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90  */
+	--md-sys-color-on-tertiary-container: #31111d; /* Tertiary10  */
+
+	/* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
+	--md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
+	--md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
+	--md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
+	--md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #b3261e; /* Error40  */
+	--md-sys-color-on-error: #ffffff; /* Error100 */
+	--md-sys-color-error-container: #f9dedc; /* Error90  */
+	--md-sys-color-on-error-container: #410e0b; /* Error10  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #fef7ff; /* Neutral98 */
+	--md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
+	--md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
+	--md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
+	--md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
+	--md-sys-color-surface-tint: #6750a4; /* = primary */
+	--md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
+	--md-sys-color-surface-container-low: #f7f2fa; /* Neutral96  */
+	--md-sys-color-surface-container: #f3edf7; /* Neutral94  */
+	--md-sys-color-surface-container-high: #ece6f0; /* Neutral92  */
+	--md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #313033; /* Neutral20 */
+	--md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
+	--md-sys-color-on-background: #1c1b1f; /* Neutral10  */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #79747e; /* NeutralVariant50 */
+	--md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000; /* Neutral0 */
+	--md-sys-color-shadow: #000000; /* Neutral0 */
+
+	/* ── Indicator tokens — Loading & Progress ───────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+/* Dark Theme overrides
+ * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
+ */
+[data-theme="dark"],
+.dark {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #d0bcff; /* Primary80  */
+	--md-sys-color-on-primary: #381e72; /* Primary20  */
+	--md-sys-color-primary-container: #4f378b; /* Primary30  */
+	--md-sys-color-on-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-inverse-primary: #6750a4; /* Primary40  */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #ccc2dc; /* Secondary80  */
+	--md-sys-color-on-secondary: #332d41; /* Secondary20  */
+	--md-sys-color-secondary-container: #4a4458; /* Secondary30  */
+	--md-sys-color-on-secondary-container: #e8def8; /* Secondary90  */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #efb8c8; /* Tertiary80  */
+	--md-sys-color-on-tertiary: #492532; /* Tertiary20  */
+	--md-sys-color-tertiary-container: #633b48; /* Tertiary30  */
+	--md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90  */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #f2b8b5; /* Error80  */
+	--md-sys-color-on-error: #601410; /* Error20  */
+	--md-sys-color-error-container: #8c1d18; /* Error30  */
+	--md-sys-color-on-error-container: #f9dedc; /* Error90  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #141218; /* Neutral6   */
+	--md-sys-color-on-surface: #e6e1e5; /* Neutral90  */
+	--md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
+	--md-sys-color-surface-dim: #141218; /* Neutral6  */
+	--md-sys-color-surface-bright: #3b383e; /* Neutral24 */
+	--md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
+	--md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4   */
+	--md-sys-color-surface-container-low: #1d1b20; /* Neutral10  */
+	--md-sys-color-surface-container: #211f26; /* Neutral12  */
+	--md-sys-color-surface-container-high: #2b2930; /* Neutral17  */
+	--md-sys-color-surface-container-highest: #36343b; /* Neutral22  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
+	--md-sys-color-inverse-on-surface: #313033; /* Neutral20 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
+	--md-sys-color-on-background: #e6e1e5; /* Neutral90 */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #938f99; /* NeutralVariant60 */
+	--md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000;
+	--md-sys-color-shadow: #000000;
+
+	/* ── Indicator tokens — Dark ─────────────────────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}

package/dist/shape.css

@@ -0,0 +1,9 @@
+:root {
+	--md-sys-shape-corner-none: 0px;
+	--md-sys-shape-corner-extra-small: 4px;
+	--md-sys-shape-corner-small: 8px;
+	--md-sys-shape-corner-medium: 12px;
+	--md-sys-shape-corner-large: 16px;
+	--md-sys-shape-corner-extra-large: 28px;
+	--md-sys-shape-corner-full: 9999px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/md3-tokens",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Material Design 3 Expressive design tokens",
   "author": "Bug Ổn",
   "license": "MIT",
@@ -27,11 +27,18 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./colors.css": "./src/colors.css",
-    "./elevation.css": "./src/elevation.css",
-    "./shape.css": "./src/shape.css",
-    "./typography.css": "./src/typography.css",
-    "./index.css": "./dist/index.css"
+    "./colors.css": {
+      "types": "./dist/colors.css.d.ts",
+      "default": "./dist/colors.css"
+    },
+    "./shape.css": {
+      "types": "./dist/shape.css.d.ts",
+      "default": "./dist/shape.css"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "publishConfig": {
     "access": "public"

package/scripts/copy-css.js

@@ -0,0 +1,35 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const srcDir = path.join(__dirname, "../src");
+const distDir = path.join(__dirname, "../dist");
+
+// Ensure dist exists
+if (!fs.existsSync(distDir)) {
+	fs.mkdirSync(distDir, { recursive: true });
+}
+
+console.log("Copying CSS assets to dist...");
+
+// CSS files to copy from src/ to dist/ (only files that exist in src/)
+const cssFiles = ["colors.css", "shape.css", "index.css"];
+
+for (const file of cssFiles) {
+	const srcPath = path.join(srcDir, file);
+	const distPath = path.join(distDir, file);
+	if (fs.existsSync(srcPath)) {
+		fs.copyFileSync(srcPath, distPath);
+		console.log(`✅ Copied ${file} to dist/${file}`);
+	} else {
+		console.warn(`⚠️  ${file} not found in src/, skipping`);
+	}
+}
+
+// Generate .d.ts stubs for each CSS sub-path export that will be in dist/
+const cssStubs = cssFiles.map((f) => `${f}.d.ts`);
+
+for (const stub of cssStubs) {
+	const distPath = path.join(distDir, stub);
+	fs.writeFileSync(distPath, "// CSS module — no runtime types\nexport {};\n");
+	console.log(`✅ Generated ${stub}`);
+}

package/src/css.d.ts

@@ -0,0 +1,25 @@
+// CSS module type declarations for @bug-on/md3-tokens sub-path imports
+declare module "@bug-on/md3-tokens/colors.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-tokens/elevation.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-tokens/shape.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-tokens/typography.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-tokens/index.css" {
+	const styles: string;
+	export default styles;
+}

package/tsconfig.json

@@ -8,6 +8,7 @@
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
 		"declaration": true,
+		"emitDeclarationOnly": true,
 		"outDir": "dist"
 	},
 	"include": ["src"]

package/tsup.config.ts

@@ -6,4 +6,5 @@ export default defineConfig({
 	dts: true,
 	sourcemap: true,
 	clean: true,
+	onSuccess: "node scripts/copy-css.js",
 });