docs: restyle (#4803)

* docs: add twg theme

* docs: import theme css

Author: moskalakamil

bun.lock

@@ -34,6 +34,7 @@
         "@docusaurus/faster": "^3.8.1",
         "@docusaurus/preset-classic": "^3.8.1",
         "@mdx-js/react": "^3.0.0",
+        "@widlarzgroup/docusaurus-ui": "^0.0.2",
         "clsx": "^2.0.0",
         "docusaurus-lunr-search": "^3.6.0",
         "prism-react-renderer": "^2.3.0",
@@ -1182,6 +1183,8 @@
 
     "@webassemblyjs/wast-printer": ["@webassemblyjs/[email protected]", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw=="],
 
+    "@widlarzgroup/docusaurus-ui": ["@widlarzgroup/[email protected]", "", { "peerDependencies": { "@docusaurus/core": "^3.9.2", "@docusaurus/theme-classic": "^3.9.2", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-ncO/RddO1/WwpRk+xs9GuQWbEWM2sy6Kj7byjwIyMfvcAqeyHJjXIASxLPCGqty+FPoEVqnBu1ASBez12tYABg=="],
+
     "@xmldom/xmldom": ["@xmldom/[email protected]", "", {}, "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw=="],
 
     "@xtuc/ieee754": ["@xtuc/[email protected]", "", {}, "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="],

docs/docusaurus.config.ts

@@ -79,6 +79,8 @@ const config: Config = {
     },
   ],
 
+  themes: ['@widlarzgroup/docusaurus-ui'],
+
   themeConfig: {
     image: 'img/twg-social-card.png',
     navbar: {

docs/package.json

@@ -19,6 +19,7 @@
     "@docusaurus/faster": "^3.8.1",
     "@docusaurus/preset-classic": "^3.8.1",
     "@mdx-js/react": "^3.0.0",
+    "@widlarzgroup/docusaurus-ui": "^0.0.2",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.6.0",
     "prism-react-renderer": "^2.3.0",

docs/src/components/TWGBadge/TWGBadge.module.css

@@ -1,30 +1,7 @@
+@import '@widlarzgroup/docusaurus-ui/css/custom.css';
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-code-font-size: 95%;
-  --ifm-color-primary: #96c9eb;
-  --ifm-color-primary-dark: #76b8e5;
-  --ifm-color-primary-darker: #65b0e2;
-  --ifm-color-primary-darkest: #3597d9;
-  --ifm-color-primary-light: #b6daf1;
-  --ifm-color-primary-lighter: #c7e2f4;
-  --ifm-color-primary-lightest: #f7fbfd;
-  --ifm-color-secondary: #f4d970;
-  --ifm-color-secondary-dark: #f1d04f;
-  --ifm-color-secondary-darker: #f0cc3e;
-  --ifm-color-secondary-darkest: #e7bc12;
-  --ifm-color-secondary-light: #f7e291;
-  --ifm-color-secondary-lighter: #f8e6a2;
-  --ifm-color-secondary-lightest: #fcf3d3;
-  --ifm-background-color: #171717;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-.hidden {
-  display: none !important;
-}
+ */