create-ec-app 0.0.6 → 0.0.7

package/templates/targets/power-pages/src/main.patch.tsx

@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import "./index.css";
+import App from "./App.tsx";
+import { AuthProvider } from "./context/AuthContext.tsx";
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+			retry: 3,
+			staleTime: 5 * 60 * 1000, // 5 minutes
+		},
+		mutations: {
+			retry: 1,
+		},
+	},
+});
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
+	<StrictMode>
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<App />
+			</QueryClientProvider>
+		</AuthProvider>
+	</StrictMode>
+);

package/templates/targets/power-pages/vite.config.patch.ts

@@ -0,0 +1,23 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [react(), tailwindcss()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
+	server: {
+		proxy: {
+			"/_api": {
+				target: "https://pp-01.powerappsportals.com",
+				changeOrigin: true,
+				secure: true,
+			},
+		},
+	},
+});

package/templates/targets/swa/.env

@@ -0,0 +1,2 @@
+AZURE_SUBSCRIPTION_ID=
+AZURE_TENANT_ID=

package/templates/targets/swa/package.patch.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@azure/static-web-apps-cli": "^2.0.7",
+  }
+}

package/templates/targets/swa/staticwebapp.config.json

@@ -0,0 +1,5 @@
+{
+	"navigationFallback": {
+		"rewrite": "/index.html"
+	}
+}

package/templates/targets/swa/swa-cli.config.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
+	"configurations": {
+		"swa-app": {
+			"appLocation": ".",
+			"outputLocation": "dist",
+			"appBuildCommand": "npm run build",
+			"run": "npm run dev",
+			"appDevserverUrl": "http://localhost:5173",
+			"appName": "swa-app",
+			"resourceGroup": "swa-app-rg"
+		}
+	}
+}

package/templates/targets/webresource/README.md

@@ -0,0 +1,263 @@
+# EC Webresource App
+
+React + TypeScript template for Dynamics 365/Dataverse web resources. Generated by `create-ec-app`, it provides a lean setup with Vite, Tailwind CSS, and a choice of UI library (Kendo UI or Shadcn/ui), pre-configured for running inside Dynamics 365 and for local development.
+
+## Features
+
+- React + TypeScript with Vite (Client side only)
+- Tailwind CSS configured out of the box
+- UI library choice: Kendo UI (with theme selection) or Shadcn/ui
+- TanStack Query provider pre-wired (`QueryClientProvider` in `src/main.tsx`)
+- XRM-aware runtime: adds `ClientGlobalContext.js.aspx` and detects `window.Xrm`
+- Local development via `token.json` (excluded from bundling) and helper functions
+- Vite build tuned for web resources: single JS bundle, `main.css`, deterministic names
+- Zustand and `@types/xrm` included for state and typings
+
+## Prerequisites
+
+- Node.js 22+ and npm 9+
+- Dynamics 365/Dataverse environment for deployment
+- Kendo UI license (only if you picked Kendo UI)
+
+## Getting Started
+
+- Install dependencies (if needed): `npm install`
+- For Kendo UI projects, activate your license: `npx kendo-ui-license activate` (you need to copy over your kendo-license.txt to the root to activate or stick with non-premium components)
+- Start dev server: `npm run dev`
+- Production build: `npm run build`
+- Development build (readable, no minify): `npm run build:dev`
+
+## Key Files
+
+- `src/main.tsx`: Sets up React, Tailwind, and TanStack Query. If Kendo UI was selected, imports the chosen theme CSS (`<theme>/dist/all.css`).
+- `src/services/authService.ts`: Utilities to build API URLs and headers based on environment (inside Dynamics vs. local dev).
+- `token.json`: Local development token store. Build is configured to treat this as external and not bundle it.
+- `index.html`: Injects `ClientGlobalContext.js.aspx` for Dynamics runtime.
+- `vite.config.ts`: Uses base `./`, disables code splitting, emits `main.css`, and places assets at the top of `dist`.
+
+## Auth and API Access
+
+The app auto-detects whether it runs inside Dynamics 365 (uses `window.Xrm` and does not add an Authorization header) or locally (reads a bearer token from `token.json`).
+
+```ts
+// src/services/authService.ts
+export const getApiUrl = (): string => {
+  if (window.parent && window.parent.Xrm) {
+    const clientUrl = window.Xrm.Utility.getGlobalContext().getClientUrl();
+    return `${clientUrl}/api/data/v9.2`;
+  }
+  return "https://DOMAIN.REGION.dynamics.com/api/data/v9.2";
+};
+
+export const getAuthHeaders = async (): Promise<HeadersInit> => {
+  if (window.parent && window.parent.Xrm) {
+    return {
+      "Content-Type": "application/json",
+      "OData-MaxVersion": "4.0",
+      "OData-Version": "4.0",
+      Prefer: 'odata.include-annotations="*"',
+    };
+  }
+  const { default: token } = await import("../../token.json");
+  return {
+    Authorization: `Bearer ${token.accessToken}`,
+    "Content-Type": "application/json",
+    "OData-MaxVersion": "4.0",
+    "OData-Version": "4.0",
+    Prefer: 'odata.include-annotations="*"',
+  };
+};
+```
+
+Example usage:
+
+```ts
+import { getApiUrl, getAuthHeaders } from "@/services/authService";
+
+const res = await fetch(`${getApiUrl()}/accounts?$top=10`, {
+  headers: await getAuthHeaders(),
+});
+const data = await res.json();
+```
+
+## Azure CLI: Generate a Dataverse Token (Local Dev)
+
+Use Azure CLI to obtain a bearer token for your Dataverse environment and paste it into `token.json` for local development.
+
+Prerequisites:
+
+- Azure CLI installed and you have access to the target tenant and environment.
+
+Steps:
+
+1. Sign in to Azure (optionally targeting a specific tenant):
+
+```
+az login --tenant <tenant-id>
+```
+
+2. Request an access token for your Dataverse environment URL (replace `<org>` and domain as applicable):
+
+```
+az account get-access-token \
+  --tenant <tenant-id> \
+  --resource https://<org>.crm.dynamics.com \
+```
+
+This prints the raw token to stdout. Copy it.
+
+3. Paste the token value into `token.json` under `accessToken`:
+
+```
+{
+  "accessToken": "<paste-token-here>",
+  "expiresIn": "",
+  "expires_on": 0,
+  "subscription": "",
+  "tenant": "",
+  "tokenType": "Bearer"
+}
+```
+
+Notes:
+
+- Tokens expire; regenerate as needed. (Max expiry is 1 hour)
+- If your CLI requires scopes, use `--scope https://<org>.crm.dynamics.com/.default` instead of `--resource`.
+
+One‑liner (writes full JSON to `token.json`):
+
+```
+az account get-access-token --resource=https://<org>.crm.dynamics.com > token.json
+```
+
+Replace the URL with your environment’s Dataverse URL (e.g., `https://<org>.crm.dynamics.com`, `https://<org>.crm4.dynamics.com`, etc.). This overwrites `token.json` at the project root with the full output from Azure CLI, which includes `accessToken` used by the local dev flow.
+
+## Accounts Data Service (TanStack Query)
+
+The following example shows a minimal data service and hooks to fetch and update Accounts using the Dataverse Web API and TanStack Query.
+
+Create `src/services/accounts.ts`:
+
+```ts
+import { getApiUrl, getAuthHeaders } from "@/services/authService";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export interface Account {
+  accountid: string;
+  name?: string | null;
+  description?: string | null;
+}
+
+export const listAccounts = async (): Promise<Account[]> => {
+  const res = await fetch(
+    `${getApiUrl()}/accounts?$select=accountid,name,description&$top=50`,
+    { headers: await getAuthHeaders() },
+  );
+  if (!res.ok) throw new Error(`Failed to fetch accounts: ${res.status}`);
+  const json = await res.json();
+  return json.value as Account[];
+};
+
+export const patchAccount = async (
+  id: string,
+  data: Partial<Account>,
+): Promise<void> => {
+  const headers = await getAuthHeaders();
+  const res = await fetch(`${getApiUrl()}/accounts(${id})`, {
+    method: "PATCH",
+    headers: {
+      ...headers,
+    },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error(`Failed to update account: ${res.status}`);
+};
+
+export const useAccounts = () =>
+  useQuery({ queryKey: ["accounts"], queryFn: listAccounts });
+
+export const useUpdateAccount = () => {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<Account> }) =>
+      patchAccount(id, data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["accounts"] });
+    },
+  });
+};
+```
+
+Usage in a component (e.g. `src/AccountsList.tsx`):
+
+```tsx
+import { useAccounts, useUpdateAccount } from "@/services/accounts";
+
+export function AccountsList() {
+  const { data, isLoading, error } = useAccounts();
+  const updateAccount = useUpdateAccount();
+
+  if (isLoading) return <div>Loading…</div>;
+  if (error) return <div>Failed to load accounts</div>;
+
+  return (
+    <ul className="space-y-2">
+      {data?.map((a) => (
+        <li key={a.accountid} className="flex items-center gap-2">
+          <span className="flex-1">{a.name ?? "(no name)"}</span>
+          <button
+            className="px-2 py-1 border rounded"
+            onClick={() =>
+              updateAccount.mutate({
+                id: a.accountid,
+                data: { name: `${a.name ?? ""}*` },
+              })
+            }
+          >
+            Rename
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## UI Libraries
+
+- Kendo UI: Theme CSS is imported in `src/main.tsx`. Example:
+
+  ```tsx
+  import { Button } from "@progress/kendo-react-buttons";
+  <Button>Click me</Button>;
+  ```
+
+- Shadcn/ui: Components are installed and available under the `@/components` alias. Example:
+
+  ```tsx
+  import { Button } from "@/components/ui/button";
+  <Button>Click me</Button>;
+  ```
+
+## Build Output
+
+- Output directory: `dist`
+- Single JavaScript bundle with deterministic name
+- Single CSS file: `main.css`
+- `base: "./"` to support deployment as a web resource
+
+## Deployment
+
+- Upload files from `dist` to Dynamics 365/Dataverse as web resources.
+- Use `index.html` as the HTML web resource; upload the JS bundle and `main.css` as script/style web resources referenced by it.
+- Consider automating uploads with your preferred tooling (DevOps pipelines, XrmToolBox, etc.).
+- One quick and easy way to handle deployment is with Webresource Manager.
+  - Open up webresource manager, and navigate to your specific solution
+  - Create a new root (example GlobalAccounts*or CustomDev*)
+  - Add a new folder for your webresources
+  - Upload your index.html, index.js and main.css to your folder.
+  - This will now allow you to use auto publisher to bind to your deployed resources.
+
+## Notes
+
+- If you change the build, ensure code splitting stays disabled and asset names remain predictable to simplify web resource updates.

package/templates/targets/webresource/src/services/AuthService.ts

@@ -0,0 +1,38 @@
+
+const getAuthToken = async (): Promise<string> => {
+    const tokenModule = await import("../../token.json");
+    const token = tokenModule.default.accessToken;
+    return token;
+};
+
+export const getApiUrl = (): string => {
+    if (window.parent && window.parent.Xrm) {
+        const globalContext = window.Xrm.Utility.getGlobalContext();
+        const clientUrl = globalContext.getClientUrl();
+        return `${clientUrl}/api/data/v9.2`;
+    }
+
+    return "https://DOMAIN.REGION.dynamics.com/api/data/v9.2";
+};
+
+export const getAuthHeaders = async (): Promise<HeadersInit> => {
+    if (window.parent && window.parent.Xrm) {
+        return {
+            "Content-Type": "application/json",
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            Prefer: 'odata.include-annotations="*"',
+        };
+    }
+
+    const token = await getAuthToken();
+    const headers: HeadersInit = {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+        "OData-MaxVersion": "4.0",
+        "OData-Version": "4.0",
+        Prefer: 'odata.include-annotations="*"',
+    };
+
+    return headers;
+};

package/templates/targets/webresource/token.json

@@ -0,0 +1,8 @@
+{
+    "accessToken": "",
+    "expiresIn": "",
+    "expires_on": 0,
+    "subscription": "",
+    "tenant": "",
+    "tokenType": "Bearer"
+}

package/templates/targets/webresource/vite.config.patch.ts

@@ -0,0 +1,40 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(({ command, mode }) => {
+	const isDev = mode === "development" || command === "serve";
+
+	return {
+		base: "./",
+		plugins: [react(), tailwindcss()],
+		resolve: {
+			alias: {
+				"@": path.resolve(__dirname, "./src"),
+			},
+		},
+		build: {
+			rollupOptions: {
+				external: ["../../token.json"],
+				output: {
+					manualChunks: undefined,
+					entryFileNames: "[name].js",
+					chunkFileNames: "[name].chunk.js",
+					assetFileNames: (assetInfo) => {
+						if (assetInfo.name?.endsWith(".css")) {
+							return "main.css";
+						}
+						return "[name].[ext]";
+					},
+				},
+			},
+			minify: !isDev,
+			mode: isDev ? "development" : "production",
+			assetsDir: "",
+			target: "es2015",
+			cssCodeSplit: false,
+		},
+	};
+});
+

package/templates/ui/kendo/kendo-tw-preset.js

@@ -0,0 +1,240 @@
+module.exports = {
+	theme: {
+		extend: {
+			spacing: {
+				1: "var( --kendo-spacing-1 )",
+				1.5: "var( --kendo-spacing-1.5 )",
+				2: "var( --kendo-spacing-2 )",
+				2.5: "var( --kendo-spacing-2.5 )",
+				3: "var( --kendo-spacing-3 )",
+				3.5: "var( --kendo-spacing-3.5 )",
+				4: "var( --kendo-spacing-4 )",
+				4.5: "var( --kendo-spacing-4.5 )",
+				5: "var( --kendo-spacing-5 )",
+				5.5: "var( --kendo-spacing-5.5 )",
+				6: "var( --kendo-spacing-6 )",
+				6.5: "var( --kendo-spacing-6.5 )",
+				7: "var( --kendo-spacing-7 )",
+				7.5: "var( --kendo-spacing-7.5 )",
+				8: "var( --kendo-spacing-8 )",
+				9: "var( --kendo-spacing-9 )",
+				10: "var( --kendo-spacing-10 )",
+				11: "var( --kendo-spacing-11 )",
+				12: "var( --kendo-spacing-12 )",
+				13: "var( --kendo-spacing-13 )",
+				14: "var( --kendo-spacing-14 )",
+				15: "var( --kendo-spacing-15 )",
+				16: "var( --kendo-spacing-16 )",
+				17: "var( --kendo-spacing-17 )",
+				18: "var( --kendo-spacing-18 )",
+				19: "var( --kendo-spacing-19 )",
+				20: "var( --kendo-spacing-20 )",
+				21: "var( --kendo-spacing-21 )",
+				22: "var( --kendo-spacing-22 )",
+				23: "var( --kendo-spacing-23 )",
+				24: "var( --kendo-spacing-24 )",
+				25: "var( --kendo-spacing-25 )",
+				26: "var( --kendo-spacing-26 )",
+				27: "var( --kendo-spacing-27 )",
+				28: "var( --kendo-spacing-28 )",
+				29: "var( --kendo-spacing-29 )",
+				30: "var( --kendo-spacing-30 )",
+			},
+			borderRadius: {
+				none: "var( --kendo-border-radius-none )",
+				sm: "var( --kendo-border-radius-sm )",
+				DEFAULT: "var( --kendo-border-radius-md )",
+				lg: "var( --kendo-border-radius-lg )",
+				xl: "var( --kendo-border-radius-xl )",
+				"2xl": "var( --kendo-border-radius-xxl )",
+				"3xl": "var( --kendo-border-radius-xxxl )",
+				full: "var( --kendo-border-radius-none )",
+			},
+			boxShadow: {
+				sm: "var( --kendo-elevation-2 )",
+				DEFAULT: "var( --kendo-elevation-4 )",
+				lg: "var( --kendo-elevation-6 )",
+				xl: "var( --kendo-elevation-8 )",
+				"2xl": "var( --keno-elevation-9 )",
+			},
+			colors: {
+				"app-surface": "var( --kendo-color-app-surface )",
+				"on-app-surface": "var( --kendo-color-on-app-surface )",
+				subtle: "var( --kendo-color-subtle )",
+				surface: "var( --kendo-color-surface )",
+				"surface-alt": "var( --kendo-color-surface-alt )",
+				border: "var( --kendo-color-border )",
+				"border-alt": "var( --kendo-color-border-alt )",
+				base: {
+					DEFAULT: "var( --kendo-color-base )",
+					hover: "var( --kendo-color-base-hover )",
+					active: "var( --kendo-color-base-active )",
+					emphasis: "var( --kendo-color-base-emphasis )",
+					subtle: "var( --kendo-color-base-subtle )",
+					"subtle-hover": "var( --kendo-color-base-subtle-hover )",
+					"subtle-active": "var( --kendo-color-base-subtle-active)",
+					"on-subtle": "var( --kendo-color-base-on-subtle )",
+					"on-surface": "var( --kendo-color-base-on-surface )",
+				},
+				"on-base": "var( --kendo-color-on-base )",
+				primary: {
+					DEFAULT: "var( --kendo-color-primary )",
+					hover: "var( --kendo-color-primary-hover )",
+					active: "var( --kendo-color-primary-active )",
+					emphasis: "var( --kendo-color-primary-emphasis )",
+					subtle: "var( --kendo-color-primary-subtle )",
+					"subtle-hover": "var( --kendo-color-primary-subtle-hover )",
+					"subtle-active":
+						"var( --kendo-color-primary-subtle-active)",
+					"on-subtle": "var( --kendo-color-primary-on-subtle )",
+					"on-surface": "var( --kendo-color-primary-on-surface )",
+				},
+				"on-primary": "var( --kendo-color-on-primary )",
+				secondary: {
+					DEFAULT: "var( --kendo-color-secondary )",
+					hover: "var( --kendo-color-secondary-hover )",
+					active: "var( --kendo-color-secondary-active )",
+					emphasis: "var( --kendo-color-secondary-emphasis )",
+					subtle: "var( --kendo-color-secondary-subtle )",
+					"subtle-hover":
+						"var( --kendo-color-secondary-subtle-hover )",
+					"subtle-active":
+						"var( --kendo-color-secondary-subtle-active)",
+					"on-subtle": "var( --kendo-color-secondary-on-subtle )",
+					"on-surface": "var( --kendo-color-secondary-on-surface )",
+				},
+				"on-secondary": "var( --kendo-color-on-secondary )",
+				tertiary: {
+					DEFAULT: "var( --kendo-color-tertiary )",
+					hover: "var( --kendo-color-tertiary-hover )",
+					active: "var( --kendo-color-tertiary-active )",
+					emphasis: "var( --kendo-color-tertiary-emphasis )",
+					subtle: "var( --kendo-color-tertiary-subtle )",
+					"subtle-hover":
+						"var( --kendo-color-tertiary-subtle-hover )",
+					"subtle-active":
+						"var( --kendo-color-tertiary-subtle-active)",
+					"on-subtle": "var( --kendo-color-tertiary-on-subtle )",
+					"on-surface": "var( --kendo-color-tertiary-on-surface )",
+				},
+				"on-tertiary": "var( --kendo-color-on-tertiary )",
+				light: {
+					DEFAULT: "var( --kendo-color-light )",
+					hover: "var( --kendo-color-light-hover )",
+					active: "var( --kendo-color-light-active )",
+					emphasis: "var( --kendo-color-light-emphasis )",
+					subtle: "var( --kendo-color-light-subtle )",
+					"subtle-hover": "var( --kendo-color-light-subtle-hover )",
+					"subtle-active": "var( --kendo-color-light-subtle-active)",
+					"on-subtle": "var( --kendo-color-light-on-subtle )",
+					"on-surface": "var( --kendo-color-light-on-surface )",
+				},
+				"on-light": "var( --kendo-color-on-light )",
+				dark: {
+					DEFAULT: "var( --kendo-color-dark )",
+					hover: "var( --kendo-color-dark-hover )",
+					active: "var( --kendo-color-dark-active )",
+					emphasis: "var( --kendo-color-dark-emphasis )",
+					subtle: "var( --kendo-color-dark-subtle )",
+					"subtle-hover": "var( --kendo-color-dark-subtle-hover )",
+					"subtle-active": "var( --kendo-color-dark-subtle-active)",
+					"on-subtle": "var( --kendo-color-dark-on-subtle )",
+					"on-surface": "var( --kendo-color-dark-on-surface )",
+				},
+				"on-dark": "var( --kendo-color-on-dark )",
+				info: {
+					DEFAULT: "var( --kendo-color-info )",
+					hover: "var( --kendo-color-info-hover )",
+					active: "var( --kendo-color-info-active )",
+					emphasis: "var( --kendo-color-info-emphasis )",
+					subtle: "var( --kendo-color-info-subtle )",
+					"subtle-hover": "var( --kendo-color-info-subtle-hover )",
+					"subtle-active": "var( --kendo-color-info-subtle-active)",
+					"on-subtle": "var( --kendo-color-info-on-subtle )",
+					"on-surface": "var( --kendo-color-info-on-surface )",
+				},
+				"on-info": "var( --kendo-color-on-info )",
+				success: {
+					DEFAULT: "var( --kendo-color-success )",
+					hover: "var( --kendo-color-success-hover )",
+					active: "var( --kendo-color-success-active )",
+					emphasis: "var( --kendo-color-success-emphasis )",
+					subtle: "var( --kendo-color-success-subtle )",
+					"subtle-hover": "var( --kendo-color-success-subtle-hover )",
+					"subtle-active":
+						"var( --kendo-color-success-subtle-active)",
+					"on-subtle": "var( --kendo-color-success-on-subtle )",
+					"on-surface": "var( --kendo-color-success-on-surface )",
+				},
+				"on-success": "var( --kendo-color-on-success )",
+				error: {
+					DEFAULT: "var( --kendo-color-error )",
+					hover: "var( --kendo-color-error-hover )",
+					active: "var( --kendo-color-error-active )",
+					emphasis: "var( --kendo-color-error-emphasis )",
+					subtle: "var( --kendo-color-error-subtle )",
+					"subtle-hover": "var( --kendo-color-error-subtle-hover )",
+					"subtle-active": "var( --kendo-color-error-subtle-active)",
+					"on-subtle": "var( --kendo-color-error-on-subtle )",
+					"on-surface": "var( --kendo-color-error-on-surface )",
+				},
+				"on-error": "var( --kendo-color-on-error )",
+				warning: {
+					DEFAULT: "var( --kendo-color-warning )",
+					hover: "var( --kendo-color-warning-hover )",
+					active: "var( --kendo-color-warning-active )",
+					emphasis: "var( --kendo-color-warning-emphasis )",
+					subtle: "var( --kendo-color-warning-subtle )",
+					"subtle-hover": "var( --kendo-color-warning-subtle-hover )",
+					"subtle-active":
+						"var( --kendo-color-warning-subtle-active)",
+					"on-subtle": "var( --kendo-color-warning-on-subtle )",
+					"on-surface": "var( --kendo-color-warning-on-surface )",
+				},
+				"on-warning": "var( --kendo-color-on-warning )",
+				"series-a": {
+					DEFAULT: "var( --kendo-color-series-a )",
+					subtle: "var( --kendo-color-series-a-subtle )",
+					subtler: "var( --kendo-color-series-a-subtler )",
+					bold: "var( --kendo-color-series-a-bold )",
+					bolder: "var( --kendo-color-series-a-bolder )",
+				},
+				"series-b": {
+					DEFAULT: "var( --kendo-color-series-b )",
+					subtle: "var( --kendo-color-series-b-subtle )",
+					subtler: "var( --kendo-color-series-b-subtler )",
+					bold: "var( --kendo-color-series-b-bold )",
+					bolder: "var( --kendo-color-series-b-bolder )",
+				},
+				"series-c": {
+					DEFAULT: "var( --kendo-color-series-c )",
+					subtle: "var( --kendo-color-series-c-subtle )",
+					subtler: "var( --kendo-color-series-c-subtler )",
+					bold: "var( --kendo-color-series-c-bold )",
+					bolder: "var( --kendo-color-series-c-bolder )",
+				},
+				"series-d": {
+					DEFAULT: "var( --kendo-color-series-d )",
+					subtle: "var( --kendo-color-series-d-subtle )",
+					subtler: "var( --kendo-color-series-d-subtler )",
+					bold: "var( --kendo-color-series-d-bold )",
+					bolder: "var( --kendo-color-series-d-bolder )",
+				},
+				"series-e": {
+					DEFAULT: "var( --kendo-color-series-e )",
+					subtle: "var( --kendo-color-series-e-subtle )",
+					subtler: "var( --kendo-color-series-e-subtler )",
+					bold: "var( --kendo-color-series-e-bold )",
+					bolder: "var( --kendo-color-series-e-bolder )",
+				},
+				"series-f": {
+					DEFAULT: "var( --kendo-color-series-f )",
+					subtle: "var( --kendo-color-series-f-subtle )",
+					subtler: "var( --kendo-color-series-f-subtler )",
+					bold: "var( --kendo-color-series-f-bold )",
+					bolder: "var( --kendo-color-series-f-bolder )",
+				},
+			},
+		},
+	},
+};