feat!: update to vocs 1.x, tailwindcss 4 (#50)

Author: carlosala

docs/components/KeyPoint.tsx

@@ -4,8 +4,8 @@ export const KeyPoint: FC<PropsWithChildren<{ title: string }>> = ({
   title,
   children,
 }) => (
-  <div className="w-full border rounded border-gray-500 p-4 text-left">
-    <div className="text-[--vocs-color_heading] text-lg py-2 font-bold">
+  <div className="w-full border rounded-sm border-gray-500 p-4 text-left">
+    <div className="text-(--vocs-color_heading) text-lg py-2 font-bold">
       {title}
     </div>
     <div>{children}</div>

docs/components/Tabs.tsx

@@ -9,14 +9,14 @@ export const Root = ({
   options: Record<string, string>
 }>) => (
   <Tabs.Root
-    className="Tabs__root border rounded bg-[--vocs-color_codeBlockBackground] border-[--vocs-color_codeInlineBorder]"
+    className="Tabs__root border rounded-sm bg-(--vocs-color_codeBlockBackground) border-(--vocs-color_codeInlineBorder)"
     defaultValue={Object.keys(options)[0]}
   >
-    <Tabs.List className="Tabs__list flex flex-wrap px-2 bg-[--vocs-color_codeTitleBackground]">
+    <Tabs.List className="Tabs__list flex flex-wrap px-2 bg-(--vocs-color_codeTitleBackground)">
       {Object.entries(options).map(([value, label]) => (
         <Tabs.Trigger
           key={value}
-          className="text-sm p-3 pb-2 text-[--vocs-color_text3] border-b border-transparent hover:text-[--vocs-color_text] [&[data-state='active']]:text-[--vocs-color_text] [&[data-state='active']]:border-[--vocs-color_borderAccent]"
+          className="text-sm p-3 pb-2 text-(--vocs-color_text3) border-b border-transparent hover:text-(--vocs-color_text) data-[state='active']:text-(--vocs-color_text) data-[state='active']:font-bold data-[state='active']:border-(--vocs-color_borderAccent)"
           value={value}
         >
           {label}

docs/pages/index.mdx

@@ -35,7 +35,7 @@ import { KeyPoint } from "../components/KeyPoint"
   </div>
 
   <div className="text-left w-full max-w-5xl p-2">
-    <h2 className="text-[--vocs-color_heading] text-3xl py-4 border-b border-gray-500 mb-4">Features</h2>
+    <h2 className="text-(--vocs-color_heading) text-3xl py-4 border-b border-gray-500 mb-4">Features</h2>
 
     - 🪶 **Light client first**: built on top of the [new JSON-RPC spec](https://paritytech.github.io/json-rpc-interface-spec/) to fully leverage the potential of light-clients.
     - 💡 Delightful **TypeScript support** with types and docs generated from on-chain metadata.

docs/styles.css

@@ -1,5 +1 @@
-@layer vocs_preflight {
-  @tailwind base;
-}
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

package.json

@@ -10,18 +10,19 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@types/react": "^18.3.12",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.7.2",
-    "vocs": "1.0.0-alpha.62"
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@types/react": "^19.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vocs": "1.0.11"
   },
   "devDependencies": {
-    "@homer0/prettier-plugin-jsdoc": "^9.1.0",
+    "@homer0/prettier-plugin-jsdoc": "^10.0.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.3",
-    "prettier": "^3.4.1"
+    "lint-staged": "^15.5.1",
+    "prettier": "^3.5.3",
+    "tailwindcss": "^4.1.3"
   },
   "prettier": {
     "printWidth": 80,
@@ -34,5 +35,5 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,md,mdx,css,cjs}": "prettier --write"
   },
-  "packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
+  "packageManager": "pnpm@10.8.0+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"
 }