[stdf]Update Tailwind v4 config

packages/stdf/package.json

@@ -107,14 +107,8 @@
 		"pagination_en": "vite --mode pagination_en",
 		"numKeyboard_en": "vite --mode numKeyboard_en"
 	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
+	"files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"],
+	"sideEffects": ["**/*.css"],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
@@ -138,30 +132,30 @@
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0",
-		"tailwindcss": "^3.4.0"
+		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/adapter-cloudflare": "^4.8.0",
-		"@sveltejs/kit": "^2.11.1",
-		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^9.16.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.13.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
-		"publint": "^0.2.12",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-cloudflare": "^5.0.3",
+		"@sveltejs/kit": "^2.18.0",
+		"@sveltejs/package": "^2.3.10",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.0.9",
+		"eslint": "^9.21.0",
+		"eslint-config-prettier": "^10.0.2",
+		"eslint-plugin-svelte": "^3.0.3",
+		"globals": "^16.0.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.8",
 		"rollup-plugin-stdf-icon": "file:../rollup-plugin-stdf-icon",
-		"svelte": "^5.12.0",
-		"svelte-check": "^4.1.1",
-		"svelte-confetti": "^2.2.0",
-		"tailwindcss": "^3.4.16",
-		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.0",
-		"vite": "^6.0.3"
+		"svelte": "^5.22.3",
+		"svelte-check": "^4.1.4",
+		"svelte-confetti": "^2.3.1",
+		"tailwindcss": "^4.0.9",
+		"typescript": "^5.8.2",
+		"typescript-eslint": "^8.26.0",
+		"vite": "^6.2.0"
 	}
 }

packages/stdf/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};

packages/stdf/src/app.css

@@ -1,43 +1,41 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@layer base {
-	:root {
-		--theme-color-primary-50: 245, 248, 255;
-		--theme-color-primary-100: 232, 238, 255;
-		--theme-color-primary-200: 187, 203, 254;
-		--theme-color-primary-300: 143, 165, 253;
-		--theme-color-primary-400: 99, 124, 253;
-		--theme-color-primary-500: 55, 81, 252;
-		--theme-color-primary: 11, 36, 251;
-		--theme-color-primary-700: 7, 20, 207;
-		--theme-color-primary-800: 4, 9, 164;
-		--theme-color-primary-900: 1, 1, 120;
-		--theme-color-primary-950: 3, 0, 77;
-		--theme-color-dark-50: 255, 254, 245;
-		--theme-color-dark-100: 255, 251, 232;
-		--theme-color-dark-200: 255, 244, 199;
-		--theme-color-dark-300: 255, 234, 166;
-		--theme-color-dark-400: 255, 222, 133;
-		--theme-color-dark-500: 255, 209, 100;
-		--theme-color-dark: 255, 192, 67;
-		--theme-color-dark-700: 210, 148, 41;
-		--theme-color-dark-800: 166, 108, 22;
-		--theme-color-dark-900: 121, 72, 8;
-		--theme-color-dark-950: 77, 41, 0;
-		--theme-color-primaryBlack: 1, 3, 25;
-		--theme-color-primaryWhite: 242, 242, 243;
-		--theme-color-darkBlack: 25, 17, 1;
-		--theme-color-darkWhite: 243, 242, 242;
-		--theme-color-functional-success: 17, 187, 141;
-		--theme-color-functional-warning: 185, 80, 0;
-		--theme-color-functional-error: 218, 20, 20;
-		--theme-color-functional-info: 46, 90, 172;
-		--theme-color-extend0: 0, 172, 238;
-		--theme-color-extend1: 255, 105, 55;
-		--theme-color-extend2: 0, 112, 74;
-	}
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--color-primary-50: oklch(0.985 0.015 268.66);
+	--color-primary-100: oklch(0.9789 0.009857 267.36);
+	--color-primary-200: oklch(0.8474 0.0736 271.19);
+	--color-primary-300: oklch(0.74.1 0.1299 272.23);
+	--color-primary-400: oklch(0.6339 0.1927 271.59);
+	--color-primary-500: oklch(0.5358 0.252 268.66);
+	--color-primary: oklch(0.4666 0.2959 264.89);
+	--color-primary-700: oklch(0.3975 0.2599 264.88);
+	--color-primary-800: oklch(0.3314 0.2205 264.83);
+	--color-primary-900: oklch(0.2603 0.1784 264.43);
+	--color-primary-950: oklch(0.1923 0.1299 266.64);
+	--color-dark-50: oklch(0.9953 0.0119 101.47);
+	--color-dark-100: oklch(0.9861 0.0252 97.11);
+	--color-dark-200: oklch(0.9647 0.0592 95.88);
+	--color-dark-300: oklch(0.9385 0.0887 92.95);
+	--color-dark-400: oklch(0.9096 0.1145 89.71);
+	--color-dark-500: oklch(0.8801 0.1364 86.37);
+	--color-dark: oklch(0.8446 0.1525 80.6);
+	--color-dark-700: oklch(0.7103 0.1366 75.73);
+	--color-dark-800: oklch(0.5798 0.1182 70.17);
+	--color-dark-900: oklch(0.4494 0.0968 65.21);
+	--color-dark-950: oklch(0.3213 0.0737 62.38);
+	--color-primaryBlack: oklch(0.1163 0.0536 267.09);
+	--color-primaryWhite: oklch(0.9614 0.0013 286.38);
+	--color-darkBlack: oklch(0.1832 0.0349 86.63);
+	--color-darkWhite: oklch(0.9619 0.0011 17.18);
+	--color-success: oklch(0.7041 0.1417 167.08);
+	--color-warning: oklch(0.5582 0.153956 47.1861);
+	--color-error: oklch(0.5636 0.2231 28.46);
+	--color-info: oklch(0.4818 0.1402 261.52);
+	--color-extend0: oklch(0.7028 0.1492 235.06);
+	--color-extend1: oklch(0.7021 0.1938 38.14);
+	--color-extend2: oklch(0.4815 0.10687 161.2119);
 }
 @font-face {
 	font-family: 'Trueno';
@@ -48,10 +46,10 @@
 }
 *::-webkit-scrollbar-thumb {
 	border-radius: 3px;
-	background-color: rgba(133, 133, 133, 0.3);
+	background-color: oklch(0.6167 0 0 / 30%);
 }
 *::-webkit-scrollbar-track {
-	background-color: rgba(133, 133, 133, 0.1);
+	background-color: oklch(0.6167 0 0 / 10%);
 }
 html {
 	overflow-y: overlay;

packages/stdf/vite.config.ts

@@ -1,8 +1,19 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-import svgSprite from 'rollup-plugin-stdf-icon';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import svgSprite from "rollup-plugin-stdf-icon";
 
 export default defineConfig({
-	plugins: [sveltekit(), svgSprite([{ inFile: 'src/assets/svgs', outFile: 'static/fonts', fileName: 'symbol' }])],
-	server: { hmr: true, host: '0.0.0.0', port: 8888 }
+	plugins: [
+		sveltekit(),
+		tailwindcss(),
+		svgSprite([
+			{
+				inFile: "src/assets/svgs",
+				outFile: "static/fonts",
+				fileName: "symbol",
+			},
+		]),
+	],
+	server: { hmr: true, host: "0.0.0.0", port: 8888 },
 });