fix: component's colors functional

src/App.vue

@@ -325,7 +325,8 @@ const sliderValue = ref(1);
       {
         label: 'font-family',
         theme: 'green',
-        color: 'white',
+        color: 'red',
+        darknessColor: '500',
         link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
         linkBlank: true,
         textStyle: 'bold',
@@ -333,6 +334,8 @@ const sliderValue = ref(1);
       {
         label: 'Second',
         theme: 'red',
+        color: 'sky',
+        darknessColor: '500',
         darknessTheme: '600',
         textStyle: 'italic',
       },

src/common/helpers/common.ts

@@ -32,8 +32,8 @@ export const convertThemeToColor = (theme: TThemeColor, darkness: TDarkness | st
  */
 export const convertThemeToSecondaryColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {
   return theme === 'white' || theme === 'black'
-    ? convertWhiteOrBlackToColor(theme, darkness)
-    : convertThemeToColor(theme, String(100 + ((darkness + 600) % 900)));
+    ? convertWhiteOrBlackToColor(theme, darkness as TDarkness)
+    : convertThemeToColor(theme, String(100 + ((+darkness + 600) % 900)));
 };
 
 export const convertThemeToTextColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {

src/common/interfaces/componentsProps.ts

@@ -81,6 +81,7 @@ export interface IDrawerProps {
   theme?: TThemeColor;
   textColor?: TThemeColor;
   darknessTheme?: TDarkness;
+  darknessTextColor?: TDarkness;
   modal?: boolean;
   dismissible?: boolean;
   closeIcon?: TIcons;
@@ -90,9 +91,7 @@ export interface IDrawerProps {
 
 export interface IModalProps {
   theme?: TThemeColor;
-  textColor?: TThemeColor;
   darknessTheme?: TDarkness;
-  darknessTextColor?: TDarkness;
   width?: string;
   height?: string;
   position?: TExpandedPosition;

src/stories/components/Drawer/Drawer.stories.ts

@@ -27,6 +27,7 @@ const meta: Meta = {
     headerDivider: { control: 'boolean' },
     footerDivider: { control: 'boolean' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     theme: {
       control: 'select',
       options: [

src/stories/components/Modal/Modal.stories.ts

@@ -28,6 +28,7 @@ const meta: Meta = {
       options: ['top', 'right', 'bottom', 'left', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
     },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     theme: {
       control: 'select',
       options: [
@@ -48,6 +49,26 @@ const meta: Meta = {
         'black',
       ],
     },
+    textColor: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
   },
   args: {},
 } satisfies Meta<typeof Modal>;

src/stories/components/Modal/Modal.vue

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<IModalProps>(), {
   dismissible: false,
   theme: 'white',
   darknessTheme: '500',
+  darknessTextColor: '500',
   width: '30%',
   height: '30%',
   headerDivider: false,

src/stories/components/Popup/Popup.stories.ts

@@ -21,7 +21,6 @@ const meta: Meta = {
     maxHeight: { control: 'text' },
     padding: { control: 'text' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
-    darknessTextColor: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     theme: {
       control: 'select',
       options: [
@@ -42,26 +41,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    textColor: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
   },
   args: {},
 } satisfies Meta<typeof Popup>;

src/stories/components/Popup/Popup.vue

 <script setup lang="ts">
 import type { IPopupProps } from '@interfaces/componentsProps';
 import { computed, ref } from 'vue';
-import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
+import { convertThemeToColor, convertThemeToSecondaryColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IPopupProps>(), {
   parentSelector: 'body',
@@ -15,11 +15,6 @@ const props = withDefaults(defineProps<IPopupProps>(), {
 const active = defineModel<boolean>('active');
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
-const color = computed(() =>
-  props.textColor
-    ? convertThemeToColor(props.textColor, props.darknessTextColor)
-    : convertThemeToTextColor(props.theme, props.darknessTheme),
-);
 
 const top = ref();
 const left = ref();
@@ -52,7 +47,7 @@ document.addEventListener('pointerdown', (e) => {
     oncontextmenu="return false"
     id="popup"
     @pointerdown.stop=""
-    :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}; color: ${color}`"
+    :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}`"
   >
     <div :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto; padding-right: 5px`">
       <slot />

src/stories/components/SelectButton/SelectButton.stories.ts

@@ -85,26 +85,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    border: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
     disabled: { control: 'boolean' },
   },
   args: {},
@@ -136,22 +116,23 @@ export const LargeFull: Story = {
       {
         label: 'First',
         color: 'white',
+        darknessColor: '900',
         backgroundColor: 'black',
       },
       {
         label: 'Second',
         color: 'red',
         activeColor: 'blue',
+        darknessColor: '700',
         backgroundColor: 'yellow',
       },
       {
         label: 'Third',
         activeColor: 'green',
+        darknessColor: '700',
         backgroundColor: 'purple',
       },
     ],
-
-    border: 'sky',
     activeBackgroundColor: 'red',
     rounded: true,
     disabled: false,

src/stories/components/SelectButton/SelectButton.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import type { ISBProps } from '@interfaces/componentsProps';
 import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+import type { ISBOption } from '@interfaces/componentsProp';
 
 const props = withDefaults(defineProps<ISBProps>(), {
   size: 'normal',
@@ -19,10 +20,8 @@ const color = computed(() =>
     ? convertThemeToColor(props.textColor, props.darknessTextColor)
     : convertThemeToTextColor(props.theme, props.darknessTheme),
 );
-const activeBackgroundColorComputed = computed(() =>
-  props.activeBackgroundColor
-    ? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
-    : '',
+const activeBGColorComputed = computed(() =>
+  convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor),
 );
 const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
 const textSize = computed(() => {
@@ -58,6 +57,30 @@ const buttonHeight = computed(() => {
   }
   return '40px';
 });
+const calcItemColor = (item: ISBOption) => {
+  if ((item.value && value.value === item.value) || String(value.value) === item.label) {
+    const activeColor = item.activeColor;
+    if (!activeColor) {
+      return color.value;
+    } else {
+      return convertThemeToColor(activeColor, item.darknessActiveColor ?? '500');
+    }
+  } else {
+    const itemColor = item.color;
+    if (!itemColor) {
+      return color.value;
+    } else {
+      return convertThemeToColor(itemColor, item.darknessColor ?? '500');
+    }
+  }
+};
+const calcBGColorItem = (item: ISBOption) => {
+  return (value.value && value.value === item.value) || String(value.value) === item.label
+    ? activeBGColorComputed.value
+    : item.backgroundColor
+      ? convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500')
+      : themeColor.value;
+};
 </script>
 
 <template>
@@ -89,7 +112,7 @@ const buttonHeight = computed(() => {
       "
     >
       <span
-        :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : (convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500') ?? themeColor)}`"
+        :style="`background-color: ${calcBGColorItem(item)}`"
         :class="[
           'background',
           {
@@ -102,7 +125,7 @@ const buttonHeight = computed(() => {
       ></span>
       <span
         v-if="!item.isLabelHidden"
-        :style="`color: ${(item.value && value === item.value) || value === item.label ? (convertThemeToColor(item.activeColor, item.darknessActiveColor ?? '500') ?? color) : (convertThemeToColor(item.color, item.darknessColor ?? '500') ?? color)}; font-size: ${textSize}`"
+        :style="`color: ${calcItemColor(item)}; font-size: ${textSize}`"
         :class="[
           {
             bold: item.textStyle === 'bold',

src/stories/components/TreeList/TreeList.stories.ts

@@ -125,8 +125,8 @@ export const Full: Story = {
                 color: 'red',
                 iconAfter: 'DiceIcon',
                 iconColor: 'red',
-                darknessColor: 400,
-                darknessIconColor: 400,
+                darknessColor: '300',
+                darknessIconColor: '700',
                 children: [
                   {
                     label: '1-1-1-1',