lightnet 2.16.2 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # lightnet
 
+## 2.17.0
+
+### Minor Changes
+
+- [#220](https://github.com/LightNetDev/LightNet/pull/220) [`e10c96f`](https://github.com/LightNetDev/LightNet/commit/e10c96fb850db6d043c9bc0c929170c271979492) Thanks [@smn-cds](https://github.com/smn-cds)! - Update Tailwind CSS to v4
+
+  - updates `tailwindcss` dependency to version ^4.
+  - `@astro/tailwindcss` dependency has been replaced with `@tailwindcss/vite`
+  - removes the use of `tailwind.config.js` inside site projects
+  - astro config now supports setting `primaryColor` inside the lightnet integration
+  - changes default `primaryColor` from `#E6B15C` (yellow-orange) to `#1E2939` (dark gray)
+
+### Patch Changes
+
+- [#220](https://github.com/LightNetDev/LightNet/pull/220) [`e10c96f`](https://github.com/LightNetDev/LightNet/commit/e10c96fb850db6d043c9bc0c929170c271979492) Thanks [@smn-cds](https://github.com/smn-cds)! - Renames UI language to site language.
+
+## 2.16.3
+
+### Patch Changes
+
+- [#217](https://github.com/LightNetDev/LightNet/pull/217) [`c490b1f`](https://github.com/LightNetDev/LightNet/commit/c490b1f0d5d90e0284fba4cf1fe01af5efdf753e) Thanks [@smn-cds](https://github.com/smn-cds)! - Fixed missing translation for de.yml
+
 ## 2.16.2
 
 ### Patch Changes

package/__e2e__/fixtures/basics/astro.config.mjs

@@ -13,12 +13,12 @@ export default defineConfig({
         {
           code: "en",
           label: "English",
-          isDefaultUILanguage: true,
+          isDefaultSiteLanguage: true,
         },
         {
           code: "de",
           label: "Deutsch",
-          isUILanguage: true,
+          isSiteLanguage: true,
         },
       ],
       favicon: [{ href: "favicon.svg" }],

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.3.0_@types+node@22.13.4_jiti@1.21.7_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.3.0_@types+node@22.13.4_jiti@1.21.7_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.3.0_@types+node@22.13.4_jiti@1.21.7_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.3.0_@types+node@22.13.4_jiti@1.21.7_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -4,15 +4,15 @@
   "version": "0.0.1",
   "private": "true",
   "dependencies": {
-    "@astrojs/react": "^4.2.0",
-    "@astrojs/tailwind": "^6.0.0",
+    "@astrojs/react": "^4.2.1",
     "@lightnet/decap-admin": "^2.4.0",
-    "astro": "^5.3.0",
-    "lightnet": "^2.16.0",
+    "@tailwindcss/vite": "^4.0.9",
+    "astro": "^5.4.0",
+    "lightnet": "^2.17.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3"
   }
 }

package/__e2e__/homepage.spec.ts

@@ -45,10 +45,6 @@ test("Should navigate to search page from main menu", async ({
 test("Should switch languages", async ({ page, startLightnet }) => {
   const ln = await startLightnet()
 
-  await expect(
-    page.getByRole("button", { name: "Select language" }),
-  ).toBeVisible()
-  await page.getByRole("button", { name: "Select language" }).click()
   await page.getByLabel("Select language").click()
   await page.getByRole("link", { name: "Deutsch" }).click()
   await expect(page).toHaveURL(ln.resolveURL("/de/"))

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "2.16.2",
+  "version": "2.17.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -11,7 +11,7 @@
   "bugs": {
     "url": "https://github.com/LightNetDev/lightnet/issues"
   },
-  "homepage": "https://lightnet-docs.pages.dev",
+  "homepage": "https://lightnet.community",
   "keywords": [
     "astro-integration"
   ],
@@ -33,30 +33,30 @@
   },
   "peerDependencies": {
     "@astrojs/react": "^4.1.0",
-    "@astrojs/tailwind": "^6.0.0",
+    "@tailwindcss/vite": "^4.0.9",
     "astro": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.4",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.5.3"
   },
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
-    "@iconify/tailwind": "^1.2.0",
+    "@iconify/tailwind4": "^1.0.6",
     "@tailwindcss/typography": "^0.5.16",
+    "daisyui": "^5.0.0",
     "@types/react": "^18.3.18",
-    "daisyui": "^4.12.23",
     "fuse.js": "^7.1.0",
+    "i18next": "^24.2.2",
     "marked": "^15.0.7",
     "yaml": "^2.7.0",
-    "zod-validation-error": "^3.4.0",
-    "i18next": "^24.2.2"
+    "zod-validation-error": "^3.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
-    "@types/node": "^22.13.4",
-    "vitest": "^3.0.5"
+    "@types/node": "^22.13.5",
+    "vitest": "^3.0.7"
   },
   "scripts": {
     "test": "vitest",

package/src/astro-integration/config.ts

@@ -46,24 +46,24 @@ const languageSchema = z
      */
     label: z.string(),
     /**
-     * Should this language be used as an user interface language?
+     * Should this language be used as a site language?
      *
      * Make sure to provide translations inside the `src/translations/` folder.
      *
      * Default is `false`
      */
-    isUILanguage: z.boolean().default(false),
+    isSiteLanguage: z.boolean().default(false),
     /**
-     * Should this language be used as the default user interface language?
+     * Should this language be used as the default site language?
      *
      * The default language will be used as a fallback when translations are missing
      * also this will be the language selected when a user visits the site on the `/` path.
      *
-     * Setting this to `true` will also set `isUILanguage` to `true`.
+     * Setting this to `true` will also set `isSiteLanguage` to `true`.
      *
      * Default is `false`
      */
-    isDefaultUILanguage: z.boolean().default(false),
+    isDefaultSiteLanguage: z.boolean().default(false),
     /**
      * An array of fallback language codes.
      *
@@ -72,7 +72,7 @@ const languageSchema = z
      * matching translation key is found.
      *
      * If no match is found from the fallback languages, the system will
-     * attempt the translation using the default UI language.
+     * attempt the translation using the default site language.
      *
      * If the translation still cannot be resolved, it will then fall back to the English
      * translation as a final resort.
@@ -83,8 +83,8 @@ const languageSchema = z
   })
   .transform((language) => ({
     ...language,
-    // if language is default ui language also set is ui language to true.
-    isUILanguage: language.isDefaultUILanguage || language.isUILanguage,
+    // if language is default site language also set is site language to true.
+    isSiteLanguage: language.isDefaultSiteLanguage || language.isSiteLanguage,
   }))
 
 const absolutePath = (path: string) =>
@@ -125,7 +125,17 @@ export const configSchema = z.object({
    */
   title: z.string(),
   /**
-   * All languages: content languages and ui languages.
+   * Defines the primary color for your site.
+   *
+   * The primary color is applied to various UI elements, such as buttons,
+   * links, and hover states. Choose a color that aligns with your brand
+   * and provides good contrast against a white background for accessibility.
+   *
+   * Default: #1E2939 (dark gray)
+   */
+  primaryColor: z.string().default("#1E2939"),
+  /**
+   * All languages: content languages and site languages.
    */
   languages: languageSchema.array(),
   /**
@@ -186,8 +196,8 @@ export const configSchema = z.object({
     .object({
       /**
        * When this is set to true, search results will be initially
-       * filtered by UI language. The filter will only be set when there
-       * is any media item in the UI language.
+       * filtered by site language. The filter will only be set when there
+       * is any media item in the site language.
        */
       filterByLocale: z.boolean().default(false),
     })

package/src/astro-integration/integration.ts

@@ -1,7 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../i18n/locals.d.ts" />
 import react from "@astrojs/react"
-import tailwind from "@astrojs/tailwind"
+import tailwindcss from "@tailwindcss/vite"
 import type { AstroIntegration } from "astro"
 
 import { resolveDefaultLocale } from "../i18n/resolve-default-locale"
@@ -59,11 +58,14 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
 
         addMiddleware({ entrypoint: "lightnet/locals", order: "pre" })
 
-        astroConfig.integrations.push(tailwind(), react())
+        astroConfig.integrations.push(react())
 
         updateConfig({
           vite: {
-            plugins: [vitePluginLightnetConfig(config, astroConfig, logger)],
+            plugins: [
+              vitePluginLightnetConfig(config, astroConfig, logger),
+              tailwindcss(),
+            ],
           },
           i18n: {
             defaultLocale: resolveDefaultLocale(config),

package/src/components/CategoriesOverview.astro

@@ -20,7 +20,7 @@ const categories = await getCategories(currentLocale, t)
         {categories.map((category) => (
           <li class="flex max-w-56 grow">
             <a
-              class="flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 p-2 px-8 shadow-sm hover:bg-gray-300 sm:h-14"
+              class="shadow-xs flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 p-2 px-8 hover:bg-gray-300 sm:h-14"
               href={searchPagePath(currentLocale, {
                 category: category.id,
               })}

package/src/components/Gallery.astro

@@ -42,8 +42,8 @@ const { items, layout } = Astro.props
             class="group flex flex-col gap-3"
           >
             <div
-              class="relative overflow-hidden shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
-              class:list={layout === "book" ? "rounded-sm" : "rounded-md"}
+              class="relative overflow-hidden shadow-md outline-gray-400 transition-all duration-75 ease-in-out group-hover:outline-2"
+              class:list={layout === "book" ? "rounded-xs" : "rounded-md"}
             >
               <Image
                 class="h-full w-full object-contain"
@@ -88,7 +88,7 @@ const { items, layout } = Astro.props
             class="group flex flex-col gap-3"
           >
             <div
-              class="relative overflow-hidden rounded-md shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              class="relative overflow-hidden rounded-md shadow-md outline-gray-400 transition-all duration-75 ease-in-out group-hover:outline-2"
               class:list={[layout === "video" && "aspect-video bg-gray-950"]}
             >
               <Image

package/src/components/Hero.astro

@@ -49,7 +49,7 @@ const subtitleSizes = {
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="bg-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {

package/src/components/HighlightSection.astro

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="bg-primary hover:bg-primary/85 inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:text-gray-100"
+            class="bg-primary hover:bg-primary/85 shadow-xs inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 hover:text-gray-100"
             href={link.href}
           >
             {link.text}

package/src/components/Icon.tsx

@@ -20,7 +20,7 @@ export default function Icon({
     <span
       className={`iconify text-2xl ${className} ${flipIcon && "scale-x-[-1]"}`}
       aria-label={ariaLabel || undefined}
-      hidden={!ariaLabel}
+      aria-hidden={!ariaLabel}
       role={ariaLabel ? "img" : undefined}
     />
   )

package/src/components/MediaItemList.astro

@@ -38,7 +38,7 @@ const mediaTypes = Object.fromEntries(
                   id: item.id,
                 })
           }
-          class="group flex overflow-hidden py-4 transition-colors ease-in-out md:rounded-sm md:py-8 md:hover:bg-gray-100"
+          class="md:rounded-xs group flex overflow-hidden py-4 transition-colors ease-in-out hover:bg-gray-100 md:py-8"
           class:list={
             item.disabled ? "pointer-events-none cursor-default opacity-50" : ""
           }
@@ -46,7 +46,7 @@ const mediaTypes = Object.fromEntries(
         >
           <div class="flex h-32 w-32 shrink-0 flex-col items-start justify-center">
             <Image
-              class="max-h-32 w-auto max-w-32 rounded-sm object-contain shadow-md"
+              class="rounded-xs max-h-32 w-auto max-w-32 object-contain shadow-md"
               src={item.data.image}
               alt=""
             />
@@ -73,7 +73,7 @@ const mediaTypes = Object.fromEntries(
           </div>
 
           <Icon
-            className="mdi--chevron-right hidden sm:block md:group-hover:text-primary my-auto ms-2 me-4 shrink-0 text-2xl text-gray-300"
+            className="mdi--chevron-right hidden sm:block group-hover:text-primary my-auto ms-2 me-4 shrink-0 text-2xl text-gray-300"
             flipIcon={direction === "rtl"}
             ariaLabel=""
           />

package/src/i18n/resolve-default-locale.ts

@@ -5,14 +5,14 @@ export const resolveDefaultLocale = ({
 }: {
   languages: {
     code: string
-    isDefaultUILanguage?: boolean
+    isDefaultSiteLanguage?: boolean
   }[]
 }) => {
-  const defaultLanguage = languages.find((l) => l.isDefaultUILanguage)
+  const defaultLanguage = languages.find((l) => l.isDefaultSiteLanguage)
   if (!defaultLanguage) {
     throw new AstroError(
-      "No default user interface language has been set",
-      "Make sure you have set one language to be the default language by setting the isDefaultUILanguage to `true`.",
+      "No default site language has been set",
+      "Make sure you have set one language to be the default language by setting the isDefaultSiteLanguage to `true`.",
     )
   }
   return defaultLanguage.code

package/src/i18n/resolve-locales.ts

@@ -1,5 +1,5 @@
 import type { Language } from "../astro-integration/config"
 
 export const resolveLocales = ({ languages }: { languages: Language[] }) => {
-  return languages.filter((l) => l.isUILanguage).map((l) => l.code)
+  return languages.filter((l) => l.isSiteLanguage).map((l) => l.code)
 }

package/src/i18n/translate.ts

@@ -16,7 +16,7 @@ export type TranslateFn = (key: TranslationKey, options?: TOptions) => string
 const languageCodes = [
   ...new Set(
     config.languages
-      .filter((lng) => lng.isUILanguage)
+      .filter((lng) => lng.isSiteLanguage)
       .flatMap((lng) => [lng.code, ...lng.fallbackLanguages, "en"]),
   ),
 ]

package/src/i18n/translations/README.md

@@ -0,0 +1,15 @@
+# LightNet Translations
+
+This folder contains all the built-in translations for LightNet.
+Check the [translation status](TRANSLATION-STATUS.md) for an overview of completed translations and pending work.
+
+## Help us improving the translations
+
+Have you translated LightNet into a new language? Have you fixed a incorrect translation? Great! How about sharing
+your work with others, by adding it to this folder?
+
+This are the ways how you can contribute your translations:
+
+- [Open a GitHub pull-request](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project), if you are a git-native. 🤓
+- [Use the translation-update form](https://github.com/LightNetDev/LightNet/issues/new?template=---03-translations-update.yml) to share your work. ⭐️
+- Contact us if your GitHub-account must not appear on this public repository.

package/src/i18n/translations/TRANSLATION-STATUS.md

@@ -0,0 +1,11 @@
+# Translation status
+
+This report provides an overview of all built-in languages and the current progress of their translations.
+
+## **DE** ([de.yml](./de.yml))
+
+All keys have been translated. ✅
+
+## **EN** ([en.yml](./en.yml))
+
+All keys have been translated. ✅

package/src/i18n/translations/de.yml

@@ -7,7 +7,7 @@ ln.language_other: Sprachen
 ln.type_one: Typ
 ln.external-link: Externer link
 ln.details.open: Öffnen
-ln.details.part-of: Teil der Sammlung
+ln.details.part-of-collection: Teil der Sammlung
 ln.details.download: Download
 ln.details.share: Teilen
 ln.header.open-main-menu: Öffne Hauptmenü

package/src/layouts/Page.astro

@@ -1,4 +1,6 @@
 ---
+import "./global.css"
+
 import { ClientRouter } from "astro:transitions"
 import config from "virtual:lightnet/config"
 
@@ -18,6 +20,7 @@ const configTitle = Astro.locals.i18n.t(config.title)
 
 const { currentLocale } = Astro.locals.i18n
 const language = resolveLanguage(currentLocale)
+const primaryColor = config.primaryColor
 ---
 
 <!doctype html>
@@ -48,5 +51,9 @@ const language = resolveLanguage(currentLocale)
       <slot />
     </main>
     <PreloadReact client:idle />
-  </body>
+  </body><style is:global define:vars={{ primaryColor }}>
+    :root {
+      --primary-color: var(--primaryColor);
+    }
+  </style>
 </html>

package/src/layouts/color-overrides.css

@@ -0,0 +1,267 @@
+/* We override Tailwind CSS's oklch colors because 
+oklch is not yet widely supported by all browsers. */
+@theme {
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+}

package/src/layouts/components/Menu.astro

@@ -14,7 +14,7 @@ const { icon, label } = Astro.props
     role="button"
     tabindex="0"
     aria-label={Astro.locals.i18n.t(label)}
-    class="hover:text-primary flex rounded-md p-3 text-gray-600"
+    class="hover:text-primary flex cursor-pointer rounded-md p-3 text-gray-600"
   >
     <Icon className={icon} ariaLabel="" />
   </div>

package/src/layouts/global.css

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+@import "./color-overrides.css";
+
+@source "../";
+
+@plugin "@tailwindcss/typography";
+@plugin "@iconify/tailwind4" {
+  prefixes: mdi;
+}
+
+@plugin "daisyui" {
+  prefix: "dy-";
+  logs: false;
+  themes: light --default;
+  exclude: rootcolor scrollbar;
+}
+
+@theme inline {
+  --color-primary: var(--primary-color);
+}
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  --radius-selector: 1rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.375rem;
+  --color-base-100: #f3f4f6;
+  --color-base-200: #e5e7eb;
+  --color-base-300: #d1d5db;
+  --color-base-content: #9ca3af;
+
+  --color-primary: var(--primary-color);
+  --color-primary-content: #f9fafb;
+  --color-secondary: var(--primary-color);
+  --color-secondary-content: #f9fafb;
+  --color-accent: var(--primary-color);
+  --color-accent-content: #f9fafb;
+  --color-neutral: #4b5563;
+  --color-neutral-content: #f9fafb;
+  --color-info: #0ea5e9;
+  --color-info-content: #f9fafb;
+  --color-success: #16a34a;
+  --color-success-content: #f9fafb;
+  --color-warning: #f97316;
+  --color-warning-content: #fff7ed;
+  --color-error: #dc2626;
+  --color-error-content: #fef2f2;
+}

package/src/pages/details-page/components/Cover.astro

@@ -15,8 +15,8 @@ const isPortraitImage = image.height > image.width
 ---
 
 <div
-  class="relative shrink-0 overflow-hidden shadow-sm"
-  class:list={style === "book" ? "rounded-sm" : "rounded-md"}
+  class="shadow-xs relative shrink-0 overflow-hidden"
+  class:list={style === "book" ? "rounded-xs" : "rounded-md"}
 >
   <Image
     class:list={isPortraitImage ? "h-52 w-auto sm:h-72" : "h-auto w-52 sm:w-72"}

package/src/pages/details-page/components/OpenButton.astro

@@ -13,7 +13,7 @@ const content = createContentMetadata(item.data.content[0])
 ---
 
 <a
-  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
+  class="shadow-xs flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 hover:bg-gray-950 hover:text-gray-300"
   href={content.url}
   target={content.target}
   hreflang={item.data.language}

package/src/pages/details-page/components/ShareButton.astro

@@ -7,7 +7,7 @@ interface Props {
 ---
 
 <button
-  class="flex items-center justify-center gap-2 rounded-2xl bg-gray-200 px-6 py-3 font-bold uppercase text-gray-600 shadow-sm hover:bg-gray-300"
+  class="shadow-xs flex cursor-pointer items-center justify-center gap-2 rounded-2xl bg-gray-200 px-6 py-3 font-bold uppercase text-gray-600 hover:bg-gray-300"
   class:list={[Astro.props.className]}
   id="share-btn"
   ><Icon className="mdi--share-variant-outline" ariaLabel="" />

package/src/pages/search-page/components/ResultList.tsx

@@ -52,11 +52,11 @@ export default function ResultList({
               href={detailsPagePath(locale, {
                 id: item.id,
               })}
-              className="group flex overflow-hidden py-6 transition-colors ease-in-out md:rounded-sm md:py-10 md:hover:bg-gray-100"
+              className="md:rounded-xs group flex overflow-hidden py-6 transition-colors ease-in-out hover:bg-gray-100 md:py-10"
             >
               <div className="flex h-36 w-36 shrink-0 flex-col items-start justify-center">
                 <img
-                  className="max-h-36 w-auto max-w-36 rounded-sm object-contain shadow-md"
+                  className="rounded-xs max-h-36 w-auto max-w-36 object-contain shadow-md"
                   src={item.image.src}
                   width={item.image.width}
                   height={item.image.height}
@@ -108,7 +108,7 @@ export default function ResultList({
                 </div>
               </div>
               <Icon
-                className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+                className="mdi--chevron-right group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
                 flipIcon={direction === "rtl"}
                 ariaLabel=""
               />

package/src/pages/search-page/components/SearchFilter.tsx

@@ -6,6 +6,7 @@ import type { SearchQuery } from "../hooks/use-search"
 import type { MediaType, TranslatedLanguage } from "../types"
 import type { Translations } from "../utils/search-translations"
 import { useProvidedTranslations } from "../utils/use-provided-translations"
+import Select from "./Select"
 
 // URL search params
 const SEARCH = "search"
@@ -94,11 +95,10 @@ export default function SearchFilter({
 
   return (
     <>
-      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2">
+      <label className="dy-input dy-input-md dy-input-bordered mb-2 flex w-full items-center gap-2">
         <input
           type="search"
           className="grow"
-          id="search-input"
           ref={searchInput}
           placeholder={t("ln.search.placeholder")}
           enterKeyHint="search"
@@ -110,78 +110,44 @@ export default function SearchFilter({
       </label>
       <div className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-6 md:mb-10">
         {languageFilterEnabled && (
-          <label className="dy-form-control">
-            <div className="dy-label">
-              <span className="text-xs font-bold uppercase text-gray-500">
-                {t("ln.language_one")}
-              </span>
-            </div>
-            <select
-              className="dy-select dy-select-bordered sm:dy-select-sm"
-              value={language}
-              id="language-select"
-              onChange={(e) => setLanguage(e.currentTarget.value)}
-            >
-              <option value="">{t("ln.search.all-languages")}</option>
-              {contentLanguages.map(({ code, name }) => (
-                <option key={code} value={code} lang={code}>
-                  {name}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            label={t("ln.language_one")}
+            initialValue={language}
+            valueChange={(val) => setLanguage(val)}
+            options={[
+              { id: "", label: t("ln.search.all-languages") },
+              ...contentLanguages.map(({ code: id, name: label }) => ({
+                id,
+                label,
+              })),
+            ]}
+          />
         )}
 
         {typesFilterEnabled && (
-          <label className="dy-form-control">
-            <div className="dy-label">
-              <span className="text-xs font-bold uppercase text-gray-500">
-                {t("ln.type_one")}
-              </span>
-            </div>
-            <select
-              className="dy-select dy-select-bordered sm:dy-select-sm"
-              value={type}
-              id="type-select"
-              onChange={(e) => setType(e.currentTarget.value)}
-            >
-              <option key="" value="">
-                {t("ln.search.all-types")}
-              </option>
-              {mediaTypes.map(({ id, label }) => (
-                <option key={id} value={id}>
-                  {label}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            label={t("ln.type_one")}
+            initialValue={type}
+            valueChange={(val) => setType(val)}
+            options={[
+              { id: "", label: t("ln.search.all-types") },
+              ...mediaTypes,
+            ]}
+          />
         )}
 
         {categoriesFilterEnabled && (
-          <label className="dy-form-control">
-            <div className="dy-label">
-              <span className="text-xs font-bold uppercase text-gray-500">
-                {t("ln.category_one")}
-              </span>
-            </div>
-            <select
-              className="dy-select dy-select-bordered sm:dy-select-sm"
-              value={category}
-              id="category-select"
-              onChange={(e) => setCategory(e.currentTarget.value)}
-            >
-              <option key="" value="">
-                {t("ln.search.all-categories")}
-              </option>
-              {Object.entries(categories)
+          <Select
+            label={t("ln.category_one")}
+            initialValue={category}
+            valueChange={(val) => setCategory(val)}
+            options={[
+              { id: "", label: t("ln.search.all-categories") },
+              ...Object.entries(categories)
                 .sort((a, b) => a[1].localeCompare(b[1], locale))
-                .map(([id, label]) => (
-                  <option key={id} value={id}>
-                    {label}
-                  </option>
-                ))}
-            </select>
-          </label>
+                .map(([id, label]) => ({ id, label })),
+            ]}
+          />
         )}
       </div>
     </>

package/src/pages/search-page/components/Select.tsx

@@ -0,0 +1,32 @@
+type Props = {
+  label: string
+  initialValue: string
+  valueChange: (value: string) => void
+  options: { id: string; label: string }[]
+}
+
+export default function Select({
+  label,
+  initialValue,
+  valueChange,
+  options,
+}: Props) {
+  return (
+    <label className="dy-form-control">
+      <span className="mb-1 mt-2 block text-xs font-bold uppercase text-gray-500">
+        {label}
+      </span>
+      <select
+        className="dy-select dy-select-bordered sm:dy-select-sm w-full"
+        value={initialValue}
+        onChange={(e) => valueChange(e.currentTarget.value)}
+      >
+        {options.map(({ id, label }) => (
+          <option key={id} value={id}>
+            {label}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}

package/__e2e__/fixtures/basics/node_modules/.bin/tailwind

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"
-else
-  exec node  "$basedir/../tailwindcss/lib/cli.js" "$@"
-fi

package/__e2e__/fixtures/basics/node_modules/.bin/tailwindcss

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"
-else
-  exec node  "$basedir/../tailwindcss/lib/cli.js" "$@"
-fi

package/__e2e__/fixtures/basics/tailwind.config.mjs

@@ -1,8 +0,0 @@
-import { lightnetStyles } from "lightnet/tailwind.config.ts"
-
-/**
- * @type {import('tailwindcss').Config}
- */
-export default {
-  presets: [lightnetStyles({ primaryColor: "#14004B" })],
-}

package/tailwind.config.ts

@@ -1,56 +0,0 @@
-import { addIconSelectors } from "@iconify/tailwind"
-import typography from "@tailwindcss/typography"
-import daisyui from "daisyui"
-import type { Config } from "tailwindcss"
-
-const DEFAULT_COLOR_PRIMARY = "#E6B15C"
-
-export function lightnetStyles({
-  primaryColor,
-}: {
-  primaryColor?: string
-}): Partial<Config> {
-  const primary = primaryColor ?? DEFAULT_COLOR_PRIMARY
-  return {
-    content: [
-      "./node_modules/lightnet/src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-      "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-      "./src/content/media-types/*.json",
-    ],
-    theme: {
-      extend: {
-        colors: {
-          primary,
-        },
-        backgroundImage: {
-          "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        },
-      },
-    },
-    daisyui: {
-      themes: [
-        {
-          lightnet: {
-            primary,
-            secondary: primary,
-            accent: primary,
-            neutral: "#030712",
-            "base-100": "#f9fafb",
-
-            "--rounded-box": "0.375rem", // border radius rounded-box utility class, used in card and other large boxes
-            "--rounded-btn": "0.375rem", // border radius rounded-btn utility class, used in buttons and similar element
-            "--rounded-badge": "0.375rem", // border radius rounded-badge utility class, used in badges and similar
-            "--tab-radius": "0.375rem", // border radius of tabs
-          },
-        },
-      ],
-      base: false, // applies background color and foreground color for root element by default
-      utils: true, // adds responsive and modifier utility classes
-      logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
-      prefix: "dy-",
-    },
-    plugins: [typography, daisyui, addIconSelectors(["mdi"])],
-  }
-}
-
-export default lightnetStyles({})