wakeb-clients

Centralized client logos & brand assets for Wakeb projects. Ships 32 clients with dark/light SVG variants in large & small sizes.

Installation

npm install wakeb-clients

Usage

import {
  getClientAssets,
  getAvailableClients,
  getClientName,
  applyClientPrimaryTheme,
} from "wakeb-clients";

// Get logo paths for a client
const logos = getClientAssets("wakeb");
// {
//   website_dark_logo_large:  "/.../assets/wakeb/dark.svg",
//   website_logo_large:       "/.../assets/wakeb/light.svg",
//   website_dark_logo_small:  "/.../assets/wakeb/sm_dark.svg",
//   website_logo_small:       "/.../assets/wakeb/sm_light.svg"
// }

// List all clients
const clients = getAvailableClients();
// ["aldrees", "alfanar", "aramco", ...]

// Get client display name in Arabic or English
getClientName("aramco", "ar"); // "أرامكو"
getClientName("aramco", "en"); // "Aramco"

// Apply client primary color to Vuetify theme + CSS variable
const finalPrimary = applyClientPrimaryTheme({
  clientName: "aramco",
  themeConfig: theme,
});
// finalPrimary -> client primary if available, otherwise theme primary fallback

CommonJS

const { getClientAssets } = require("wakeb-clients");

Adding a Client at Runtime

import { addClient } from "wakeb-clients";

addClient("my-client", {
  website_dark_logo_large: "./logos/dark.svg",
  website_logo_large: "./logos/light.svg",
  website_dark_logo_small: "./logos/sm_dark.svg",
  website_logo_small: "./logos/sm_light.svg",
});
// → { created: true, path: "/.../assets/my-client" }
// Already exists → { created: false, path: "..." }

API

getClientAssets(clientName) → { website_dark_logo_large, website_logo_large, website_dark_logo_small, website_logo_small }

Returns absolute paths for each logo variant (null if not available). Throws if the client folder doesn't exist.

getClientName(clientName, lang) → string

Returns the client display name in the given language ("ar" or "en"). Throws if the client or language is invalid.

getAvailableClients() → string[]

Returns all client folder names under assets/.

applyClientPrimaryTheme(options) → string | null

Resolves and applies the primary color in this order:

1. client primary color from package registry.
2. fallbackPrimary from options.
3. themeConfig.defaultTheme primary.
4. themeConfig.themes.light primary.

Also updates themeConfig.themes.light.colors.primary and themeConfig.themes.dark.colors.primary (when available), and sets --v-theme-primary as RGB for Vuetify rgba(var(--v-theme-primary), 1) usage.

addClient(clientName, logos) → { created, path }

Copies logo files into the package assets. Skips if the client already exists.

File Naming Convention

| Key | File | Fallback | | ------------------------- | -------------- | ------------- | | website_dark_logo_large | dark.svg | logo.svg | | website_logo_large | light.svg | logo.svg | | website_dark_logo_small | sm_dark.svg | sm_logo.svg | | website_logo_small | sm_light.svg | sm_logo.svg |

Docs

wakeb-clients.surge.sh

License

MIT