From bdcd39e87d8968a8a12bd8117ee64d5fb3183f83 Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Fri, 3 Nov 2023 14:22:31 +0300
Subject: [PATCH] docs: copy as css - Fixes #412

---
 .../pages/Tokens/TokensContent/TokensContent.helpers.ts     | 6 ++++++
 .../components/pages/Tokens/TokensContent/TokensContent.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/pages/Tokens/TokensContent/TokensContent.helpers.ts b/docs/src/components/pages/Tokens/TokensContent/TokensContent.helpers.ts
index 18dee68c..c0a181f0 100644
--- a/docs/src/components/pages/Tokens/TokensContent/TokensContent.helpers.ts
+++ b/docs/src/components/pages/Tokens/TokensContent/TokensContent.helpers.ts
@@ -32,3 +32,9 @@ export function filterByDesc(searchValue: string, token: TokenItem): boolean {
 
 	return containsInDesc(token.desc, needle) || containsInValue(token.value, needle);
 }
+
+export function unCamelcasify(str: string, delimeter = '-'): string {
+	return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
+		return `${index === 0 ? '' : delimeter}${letter.toLowerCase()}`;
+	});
+}
diff --git a/docs/src/components/pages/Tokens/TokensContent/TokensContent.tsx b/docs/src/components/pages/Tokens/TokensContent/TokensContent.tsx
index 7ac210e2..c9fc7cdb 100644
--- a/docs/src/components/pages/Tokens/TokensContent/TokensContent.tsx
+++ b/docs/src/components/pages/Tokens/TokensContent/TokensContent.tsx
@@ -14,7 +14,7 @@ import React, { FC, Fragment, useMemo } from 'react';
 import type { Description, Tokens, ValueType } from '@/shared/types';
 
 import TokensContentValue from './components/TokensContentValue';
-import { filterByDesc, filterByTags } from './TokensContent.helpers';
+import { filterByDesc, filterByTags, unCamelcasify } from './TokensContent.helpers';
 
 type Props = {
 	tokens: Tokens;
@@ -80,7 +80,7 @@ const TokensContent: FC<Props> = ({ tokens, selectedTags, selectedValueType, sea
 									className="token-name-btn"
 									hoverMode="token-name-btn_hover"
 									stretched={!isTabletPlus}
-									onClick={() => copyTextToClipboard(token)}
+									onClick={() => copyTextToClipboard(`--vkui--${unCamelcasify(token, '_')}`)}
 								>
 									{token}
 								</Button>