Update component css

lib/component/theme/index.ts

@@ -1,2 +1 @@
 export { default as ThemeProvider, useTheme } from "$/providers/theme/ThemeProvider";
-

lib/components.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+
 @theme {
 	/* Universal */
 	--color-neutral-light: oklch(92.8% 0.006 264.531);	/* gray-200 */

lib/index.ts

@@ -6,6 +6,6 @@ export * from "$/component/modal";
 export * from "$/component/nav";
 export * from "$/component/progress";
 export * from "$/component/tab";
+export * from "$/component/theme";
 export * from "$/component/toaster";
-export * from "$/providers/theme/theme";
 

lib/layout.css

@@ -0,0 +1,70 @@
+@import "tailwindcss";
+
+
+body {
+	margin-inline: auto;
+
+	min-width: 320px;
+	height: 100vh;
+
+	text-align: center;
+}
+
+#root {
+	padding-top: 4rem;
+	padding-bottom: 4rem;
+	padding-inline: 1rem;
+
+	height: 100%;
+	width: 100%;
+
+	overflow: auto;
+}
+
+h1 {
+	font-size: 4rem;
+}
+
+h2 {
+	font-size: 3rem;
+}
+
+a.active {
+	color: oklch(70.7% 0.165 254.624);	/* blue-400 */
+}
+
+nav {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+
+	margin-inline: auto;
+
+	padding-inline: 1rem;
+}
+
+footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+
+	margin-inline: auto;
+
+	padding-inline: 1rem;
+}

lib/theme.css

@@ -0,0 +1,37 @@
+@import "tailwindcss";
+
+
+@theme {
+	--light-text-color: #213547;
+	--light-bg-color: #FFFFFF;
+
+	--dark-text-color: #FFFFFFDE;
+	--dark-bg-color: #242424;
+}
+
+
+:root {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	color: var(--text-color);
+	background-color: var(--bg-color);
+}
+
+:root.light {
+	--text-color: var(--light-text-color);
+	--bg-color: var(--light-bg-color);
+}
+
+:root.dark {
+	--text-color: var(--dark-text-color);
+	--bg-color: var(--dark-bg-color);
+}

package.json

@@ -67,9 +67,8 @@
 	"author": "Mattrixwv",
 	"repository": {
 		"type": "git",
-		"url": "git+https://bitbucket.org/Mattrixwv/mattrixwvReactComponents.git"
+		"url": "git+https://git.mattrixwv.com/BaseLibraries/MattrixwvReactComponents.git"
 	},
-	"main": "./dist/mattrixwv-components.cjs",
 	"module": "./dist/mattrixwv-components.js",
 	"types": "./dist/mattrixwv-components.d.ts",
 	"exports": {
@@ -109,6 +108,10 @@
 			"types": "./dist/tab.d.ts",
 			"import": "./dist/tab.js"
 		},
+		"./theme": {
+			"types": "./dist/theme.d.ts",
+			"import": "./dist/theme.js"
+		},
 		"./toaster": {
 			"types": "./dist/toaster.d.ts",
 			"import": "./dist/toaster.js"

src/index.css

@@ -1,85 +1,16 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
-@import "../lib/styles.css";
+@import "../lib/components.css";
+@import "../lib/theme.css";
 
 
 @theme {
 	--color-neutral-825: oklch(0.253 0 0);
 	--color-neutral-850: oklch(0.237 0 0);
-
-
-	--light-text-color: #213547;
-	--light-bg-color: #FFFFFF;
-
-	--dark-text-color: #FFFFFFDE;
-	--dark-bg-color: #242424;
 }
 
 
-:root.light {
-	--text-color: var(--light-text-color);
-	--bg-color: var(--light-bg-color);
-}
-
-:root.dark {
-	--text-color: var(--dark-text-color);
-	--bg-color: var(--dark-bg-color);
-}
-
 input::-webkit-calendar-picker-indicator {
 	cursor: pointer;
 }
-
-:root {
-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-	color: var(--text-color);
-	background-color: var(--bg-color);
-}
-
-#root {
-	padding-top: 4rem;
-	padding-inline: 1rem;
-	height: 100%;
-	width: 100%;
-}
-
-body {
-	margin-inline: auto;
-
-	min-width: 320px;
-	height: 100vh;
-
-	text-align: center;
-}
-
-a.active {
-	color: var(--color-blue-400);
-}
-
-nav {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-btween;
-	align-items: center;
-	margin-inline: auto;
-	padding-inline: 1rem;
-}
-
-@keyframes spinnerAnimate {
-	100% {
-		transform: rotate(360deg);
-	}
-}

vite.config.ts

@@ -10,7 +10,7 @@ import { viteStaticCopy } from "vite-plugin-static-copy";
 import { peerDependencies } from "./package.json";
 
 
-const modules = [ "button", "input", "loading", "message", "modal", "nav", "progress", "tab", "toaster" ];
+const modules = [ "button", "input", "loading", "message", "modal", "nav", "progress", "tab", "theme", "toaster" ];
 
 
 // https://vite.dev/config/
@@ -35,7 +35,15 @@ export default defineConfig({
 		viteStaticCopy({
 			targets: [
 				{
-					src: resolve(__dirname, "lib/styles.css"),
+					src: resolve(__dirname, "lib/components.css"),
+					dest: ""
+				},
+				{
+					src: resolve(__dirname, "lib/layout.css"),
+					dest: ""
+				},
+				{
+					src: resolve(__dirname, "lib/theme.css"),
 					dest: ""
 				}
 			]
@@ -51,7 +59,7 @@ export default defineConfig({
 	build: {
 		lib: {
 			entry: {
-				index: resolve(__dirname, "lib/index.ts"),
+				"mattrixwv-components": resolve(__dirname, "lib/index.ts"),
 				...Object.fromEntries(modules.map(mod => [mod, resolve(__dirname, `lib/component/${mod}/index.ts`)]))
 			},
 			formats: [ "es" ],