fix(theme): move tailwind.preset.ts in theme to be reused

packages/theme/.npmignore

@@ -0,0 +1,2 @@
+**/*.spec.ts
+**/*.stories.ts

packages/theme/package.json

@@ -6,6 +6,10 @@
   "main": "./index.ts",
   "exports": {
     ".": "./index.ts",
+    "./tailwind.preset": {
+      "import": "./tailwind.preset.ts",
+      "types": "./tailwind.preset.ts"
+    },
     "./directives/lazyLoadObserver": {
       "import": "./directives/lazyLoadObserver.ts",
       "types": "./directives/lazyLoadObserver.ts"

packages/theme/readme.md

@@ -38,18 +38,49 @@ yarn add @tsed/vitepress-theme
 
 ## Configuration
 
-In your config.mts file, import the theme as follows:
+In your config.mts file, you can import the theme and extend it:
 
 ```ts
-import type {Theme} from "vitepress";
+import "./style.css";
 import {DefaultTheme} from "@tsed/vitepress-theme";
+import type {Theme} from "vitepress";
 
 export default {
   extends: DefaultTheme,
   enhanceApp() {}
 } satisfies Theme;
 ```
 
+Then, create a `tailwind.config.ts` configuration file:
+
+```ts
+import type {Config} from "tailwindcss";
+import {tailwindPreset} from "@tsed/vitepress-theme/tailwind.preset";
+
+const config = {
+  presets: [tailwindPreset as unknown as Config],
+  darkMode: "class",
+  content: [
+    "./docs/.vitepress/**/*.{js,ts,vue}",
+    "./docs/.vitepress/themes/**/*.{js,ts,vue}",
+    "./packages/theme/**/*.{js,ts,vue}",
+    "./docs/**/*.md"
+  ],
+  safelist: [
+    {pattern: /^bg-/},
+    {pattern: /^text-/},
+    {pattern: /^m-/},
+    {pattern: /^mx-/},
+    {pattern: /^p-/},
+    {pattern: /^px-/},
+    {pattern: /^gap-/},
+    {pattern: /^shadow-/}
+  ]
+} satisfies Config;
+
+export default config;
+```
+
 ## Contributors
 
 Please read [contributing guidelines here](https://github.com/tsedio/tsed-website/CONTRIBUTING.md).

packages/theme/styles/base.css

@@ -25,12 +25,4 @@
   @apply text-white dark:text-black;
 }
 
-.VPHomeHero {
-  @apply bg-gray-100 dark:bg-gray-700 mb-10;
-}
-
-.box .icon {
-  background: var(--vp-c-indigo-1);
-  @apply text-white dark:text-black;
-}
 

packages/theme/tailwind.preset.ts

@@ -0,0 +1,49 @@
+import type {Config} from "tailwindcss";
+import colors from "tailwindcss/colors";
+
+const primary = "var(--vp-button-brand-bg)";
+
+export const tailwindPreset: Partial<Config> = {
+  theme: {
+    colors: {
+      ...colors,
+      blue: {
+        DEFAULT: primary,
+        default: primary,
+        50: "hsla(226, 54.3%, 91%, 1)",
+        100: "hsla(226, 54.3%, 83%, 1)",
+        200: "hsla(226, 54.3%, 75%, 1)",
+        300: "hsla(226, 54.3%, 67%, 1)",
+        400: "hsla(226, 54.3%, 59%, 1)",
+        500: "hsla(226, 54.3%, 61%, 1)",
+        600: primary,
+        700: "hsla(226, 54.3%, 31%, 1)",
+        800: "hsla(226, 54.3%, 25%, 1)",
+        900: "hsla(226, 54.3%, 14%, 1)",
+        active: "var(--vp-button-brand-hover-bg)"
+      },
+      algoliaSearch: {
+        white: "rgb(243 244 246 / 1)",
+        dark: "rgb(28 30 33 / 1)"
+      },
+      "api-default": "#507192"
+    },
+    extend: {
+      fontSize: {
+        micro: ".5rem", // 8px
+        xxs: ".625rem", // 10px
+        xs: ".75rem" // 12px
+      },
+      borderRadius: {
+        xs: ".15rem" // 5px
+      },
+      fontFamily: {
+        brand: ["Source Sans Pro", "sans-serif"],
+        sans: ["Source Sans Pro", "sans-serif"],
+        serif: ["Source Sans Pro", "sans-serif"],
+        inconsolata: ["Inconsolata"],
+        source: ["source-code-pro", "Menlo", "Monaco", "Consolas", "Courier New", "monospace"]
+      }
+    }
+  }
+};

packages/theme/utils/upperFirst.spec.ts

@@ -0,0 +1,11 @@
+import {upperFirst} from "./upperFirst";
+
+describe("upperFirst", () => {
+  it("should return the string with the first letter in uppercase", () => {
+    expect(upperFirst("hello")).toBe("Hello");
+  });
+
+  it("should return the string with the first letter in uppercase (sentence)", () => {
+    expect(upperFirst("hello world")).toBe("Hello world");
+  });
+});

tailwind.config.ts

@@ -1,5 +1,5 @@
 import type {Config} from "tailwindcss";
-import {tailwindPreset} from "./tailwind.preset.js";
+import {tailwindPreset} from "./packages/theme/tailwind.preset.js";
 
 const config = {
   presets: [tailwindPreset as unknown as Config],

vitest.config.ts

@@ -19,10 +19,10 @@ export default defineConfig({
       enabled: true,
       thresholds: {
         autoUpdate: true,
-        statements: 60.95,
-        branches: 77.84,
-        functions: 65.38,
-        lines: 60.95
+        statements: 62.3,
+        branches: 78.4,
+        functions: 67.3,
+        lines: 62.3
       },
       include: ["**/*.{ts,vue}"],
       exclude: [
@@ -33,7 +33,9 @@ export default defineConfig({
         "**/node_modules/**",
         "**/*.spec.ts",
         "**/*.stories.ts",
-        "**/utils/colors.ts"
+        "**/utils/colors.ts",
+        "tailwind.preset.ts",
+        "DefaultTheme.ts"
       ],
       reportsDirectory: fileURLToPath(new URL("./coverage", import.meta.url))
     }