Commit 234f5762 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

fix: component's colors functional

parent 7ab6d5ce

src/App.vue

+4 −1
Original line number Diff line number Diff line
@@ -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

+2 −2
Original line number Diff line number Diff line
@@ -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

+1 −2
Original line number Diff line number Diff line
@@ -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

+1 −0
Original line number Diff line number Diff line
@@ -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

+21 −0
Original line number Diff line number Diff line
@@ -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>;