DevDependency Updates (#312)

* got npm install to report no vulnerabilities but npm run dev has issues

* first successful npm run dev

* feat: Update server port to 3000 in vite.config.ts like before

* dep update broke switch checked colors.

Added ! in front of each switchChecked color so it's forced to render that color

package.json

@@ -54,17 +54,13 @@
     "lint:stylelint": "stylelint **/*.{less,vue} --syntax less"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/plugin-transform-typescript": "^7.11.0",
-    "@babel/preset-env": "^7.11.5",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/body-scroll-lock": "^2.6.1",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
-    "@vitejs/plugin-vue": "^1.1.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/babel-preset-app": "^4.5.6",
     "@vue/babel-preset-jsx": "^1.1.2",
     "@vue/compiler-sfc": "^3.0.5",
@@ -84,24 +80,23 @@
     "postcss": "^8.4.6",
     "prettier": "^2.2.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
-    "stylelint": "^13.11.0",
+    "stylelint": "^16.10.0",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "tailwindcss": "^3.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "vite": "^2.0.0-beta.40",
-    "vite-plugin-dts": "^1.7.2",
-    "vitest": "^0.5.9",
-    "vue-eslint-parser": "^7.5.0"
+    "vite": "^5.4.10"
   },
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
     "@vueuse/core": "^5.0.3",
-    "@vueuse/integrations": "^5.0.3",
+    "@vueuse/integrations": "^11.1.0",
     "body-scroll-lock": "^3.1.5",
     "colord": "^2.9.2",
+    "focus-trap": "^7.6.0",
     "tailwind-merge": "^1.13.2",
+    "vite-plugin-dts": "^4.3.0",
     "vue": "^3.0.5"
   }
 }

src/theme/light.ts

@@ -121,19 +121,19 @@ export default {
     variants: {
       default: {
         switch: 'focus-within:shadow-blue-600/30',
-        switchChecked: 'bg-blue-600',
+        switchChecked: '!bg-blue-600',
       },
       success: {
         switch: 'focus-within:shadow-green-500/30',
-        switchChecked: 'bg-green-500',
+        switchChecked: '!bg-green-500',
       },
       warning: {
         switch: 'focus-within:shadow-yellow-500/30',
-        switchChecked: 'bg-yellow-500',
+        switchChecked: '!bg-yellow-500',
       },
       danger: {
         switch: 'focus-within:shadow-red-500/30',
-        switchChecked: 'bg-red-500',
+        switchChecked: '!bg-red-500',
       },
       disabled: {
         root: 'cursor-not-allowed',

vite.config.ts

@@ -4,12 +4,14 @@ import dts from 'vite-plugin-dts'
 const path = require('path')
 
 const config: UserConfig = {
-  alias: [
-    {
-      find: '@',
-      replacement: path.resolve(__dirname, 'src'),
-    },
-  ],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: path.resolve(__dirname, 'src'),
+      },
+    ],
+  },
   plugins: [
     vue(),
     dts({
@@ -34,6 +36,9 @@ const config: UserConfig = {
       },
     },
   },
+  server: {
+    port: 3000,
+  },
 }
 
 export default config