fix: problems in 'Button' and 'SelectButton'

src/common/interfaces/componentsProps.ts

@@ -95,8 +95,10 @@ export interface ISBProps {
   options: ISBOption[];
   size?: TSize;
   rounded?: boolean;
+  theme?: TThemeColor;
   activeBackgroundColor?: TThemeColor;
   border?: TThemeColor;
+  darknessTheme?: TDarkness;
   darknessActiveBackgroundColor?: TDarkness;
   darknessBorder?: TDarkness;
   disabled?: boolean;

src/stories/components/Button/Button.vue

@@ -92,11 +92,12 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
   justify-content: center;
   align-items: center;
   user-select: none;
+  transition: filter 0.2s ease-in-out;
 }
-.button:hover .background {
+.button:hover {
   filter: brightness(90%);
 }
-.button:active .background {
+.button:active {
   filter: brightness(75%);
 }
 .background {
@@ -106,7 +107,6 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
   top: 0;
   left: 0;
   border-radius: 5px;
-  transition: filter 0.2s ease-in-out;
 }
 .text {
   position: relative;

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

@@ -27,6 +27,27 @@ const meta: Meta = {
       control: 'select',
       options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
     },
+    darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
     activeBackgroundColor: {
       control: 'select',
       options: [

src/stories/components/SelectButton/SelectButton.vue

@@ -5,13 +5,21 @@ import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<ISBProps>(), {
   size: 'normal',
+  theme: 'white',
   activeBackgroundColor: 'sky',
+  darknessTheme: 500,
   darknessActiveBackgroundColor: 500,
   darknessBorder: 500,
 });
 const emit = defineEmits(['onClick']);
 const value = defineModel<never>('value');
 
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColor = computed(() => {
+  if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+    return '#000000';
+  return '#ffffff';
+});
 const activeBackgroundColorComputed = computed(() =>
   props.activeBackgroundColor
     ? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
@@ -84,7 +92,7 @@ const buttonHeight = computed(() => {
       "
     >
       <span
-        :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convertThemeToColor(item.backgroundColor ?? 'white', item.darknessBackgroundColor ?? 500)}`"
+        :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : (convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? 500) ?? themeColor)}`"
         :class="[
           'background',
           {
@@ -97,9 +105,8 @@ const buttonHeight = computed(() => {
       ></span>
       <span
         v-if="!item.isLabelHidden"
-        :style="`color: ${(item.value && value === item.value) || value === item.label ? convertThemeToColor(item.activeColor ?? 'black', item.darknessActiveColor ?? 500) : convertThemeToColor(item.color ?? 'black', item.darknessColor ?? 500)}; font-size: ${textSize}`"
+        :style="`color: ${(item.value && value === item.value) || value === item.label ? (convertThemeToColor(item.activeColor, item.darknessActiveColor ?? 500) ?? textColor) : (convertThemeToColor(item.color, item.darknessColor ?? 500) ?? textColor)}; font-size: ${textSize}`"
         :class="[
-          'text',
           {
             bold: item.textStyle === 'bold',
             italic: item.textStyle === 'italic',