From 5acf0742bcb23e31b36b2633eff6f0976fe8d390 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 27 Jun 2024 16:25:42 +0300
Subject: [PATCH] feat: use custom color names in button

---
 packages/ui/src/components/va-button/VaButton.vue | 4 +++-
 packages/ui/src/services/color/types.ts           | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index 9a50043f6d..c6a39a8cad 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -73,6 +73,8 @@ import { VaIcon } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
 import { pick } from '../../utils/pick'
 
+import type { ColorName } from '../../composables'
+
 defineOptions({
   name: 'VaButton',
 })
@@ -89,7 +91,7 @@ const props = defineProps({
   block: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
 
-  color: { type: String, default: 'primary' },
+  color: { type: String as PropType<ColorName>, default: 'primary' },
   textColor: { type: String, default: '' },
   textOpacity: { type: [Number, String], default: 1 },
   backgroundOpacity: { type: [Number, String], default: 1 },
diff --git a/packages/ui/src/services/color/types.ts b/packages/ui/src/services/color/types.ts
index cf9e72639d..55766e4269 100644
--- a/packages/ui/src/services/color/types.ts
+++ b/packages/ui/src/services/color/types.ts
@@ -47,9 +47,12 @@ type Capitalize<S extends string> = S extends `${infer First}${infer Rest}`
   : S
 type OnColors = `on${Capitalize<keyof EssentialVariables | keyof CustomColorVariables>}`
 
+// string & Record<never, never> is a hack to make TypeScript suggest all possible values of the type
 export type ColorVariables = EssentialVariables & CustomColorVariables & {
   [key in OnColors]?: CssColor
-} & Record<string, CssColor>
+} & Record<string & Record<never, never>, CssColor>
+
+export type ColorName = keyof ColorVariables | keyof CustomColorVariables // Force keyof, otherwise empty interface will be omitted in build!!!
 
 export type ColorConfig = {
   variables: ColorVariables,