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

refactor: change color logic and fix some problems of components

parent ea28f747

src/App.vue

+2 −2
Original line number Diff line number Diff line
@@ -108,7 +108,7 @@ import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue'; 
import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';

import Button from '@stories/components/Button/Button.vue';

import Slider from '@stories/components/Slider/Slider.vue';

import type { ISBOption } from '@interfaces/componentsProp';

import type { ISBOption, ISliderOptions } from '@interfaces/componentsProp';

import Modal from '@stories/components/Modal/Modal.vue';

import MenuDial from '@stories/components/MenuDial/MenuDial.vue';

import Popup from '@stories/components/Popup/Popup.vue';
@@ -219,7 +219,7 @@ const gentleIcons = [ 
  UserIcon,

];

const visibleDrawer = ref(true);

const sliderOptions = [

const sliderOptions: ISliderOptions[] = [

  {

    label: 0,

    value: 0,

src/assets/main.css

+9 −0
Original line number Diff line number Diff line
@@ -82,6 +82,15 @@ 
  --teal-700: #0f766e;

  --teal-800: #115e59;

  --teal-900: #134e4a;

  --cyan-100: #cffafe;

  --cyan-200: #a5f3fc;

  --cyan-300: #67e8f9;

  --cyan-400: #22d3ee;

  --cyan-500: #06b6d4;

  --cyan-600: #0891b2;

  --cyan-700: #0e7490;

  --cyan-800: #155e75;

  --cyan-900: #164e63;

  --sky-100: #e0f2fe;

  --sky-200: #bae6fd;

  --sky-300: #7dd3fc;

src/common/helpers/colors.ts

+262 −14
Original line number Diff line number Diff line 
export const convert300ThemeToColor = (theme: string | undefined) => {

import type { TDarkness, TThemeColor } from '@interfaces/common';



export const convertWhiteOrBlackToColor = (theme: 'white' | 'black', darkness: TDarkness) => {

  if (theme === 'white') {

    if (darkness === 500 || darkness === 400 || darkness === 600) return '#cbd5e1';

    if (darkness === 300 || darkness === 700) return '#94a3b8';

    if (darkness === 200 || darkness === 800) return '#f1f5f9';

    if (darkness === 100 || darkness === 900) return '#e2e8f0';

  }

  if (darkness === 500 || darkness === 400 || darkness === 600) return '#475569';

  if (darkness === 300 || darkness === 700) return '#64748b';

  if (darkness === 200 || darkness === 800) return '#94a3b8';

  if (darkness === 100 || darkness === 900) return '#cbd5e1';

};



export const convert100ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#9ca3af';

    case 'blue':

      return '#dbeafe';

    case 'sky':

      return '#e0f2fe';

    case 'cyan':

      return '#cffafe';

    case 'teal':

      return '#ccfbf1';

    case 'lime':

      return '#ecfccb';

    case 'green':

      return '#dcfce7';

    case 'yellow':

      return '#fef9c3';

    case 'amber':

      return '#fef3c7';

    case 'orange':

      return '#ffedd5';

    case 'pink':

      return '#fce7f3';

    case 'fuchsia':

      return '#fae8ff';

    case 'purple':

      return '#f3e8ff';

    case 'indigo':

      return '#e0e7ff';

    case 'rose':

      return '#ffe4e6';

    case 'red':

      return '#fee2e2';

    case 'black':

      return '#4b5563';

  }

};



export const convert200ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#d1d5db';

    case 'blue':

      return '#bfdbfe';

    case 'sky':

      return '#bae6fd';

    case 'cyan':

      return '#a5f3fc';

    case 'teal':

      return '#99f6e4';

    case 'lime':

      return '#d9f99d';

    case 'green':

      return '#bbf7d0';

    case 'yellow':

      return '#fef08a';

    case 'amber':

      return '#fde68a';

    case 'orange':

      return '#fed7aa';

    case 'pink':

      return '#fbcfe8';

    case 'fuchsia':

      return '#f5d0fe';

    case 'purple':

      return '#e9d5ff';

    case 'indigo':

      return '#c7d2fe';

    case 'rose':

      return '#fecdd3';

    case 'red':

      return '#fecaca';

    case 'black':

      return '#374151';

  }

};



export const convert300ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#cbd5e1';

    case 'slate':

      return '#cbd5e1';

      return '#e5e7eb';

    case 'blue':

      return '#93c5fd';

    case 'sky':

      return '#7dd3fc';

    case 'cyan':

      return '#67e8f9';

    case 'teal':

      return '#5eead4';

    case 'lime':
@@ -33,20 +126,59 @@ export const convert300ThemeToColor = (theme: string | undefined) => { 
    case 'red':

      return '#fca5a5';

    case 'black':

      return '#334155';

      return '#1f2937';

  }

};



export const convert400ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#f3f4f6';

    case 'blue':

      return '#60a5fa';

    case 'sky':

      return '#38bdf8';

    case 'cyan':

      return '#22d3ee';

    case 'teal':

      return '#2dd4bf';

    case 'lime':

      return '#a3e635';

    case 'green':

      return '#4ade80';

    case 'yellow':

      return '#facc15';

    case 'amber':

      return '#fbbf24';

    case 'orange':

      return '#fb923c';

    case 'pink':

      return '#f472b6';

    case 'fuchsia':

      return '#e879f9';

    case 'purple':

      return '#c084fc';

    case 'indigo':

      return '#818cf8';

    case 'rose':

      return '#fb7185';

    case 'red':

      return '#f87171';

    case 'black':

      return '#111827';

  }

};



export const convert500ThemeToColor = (theme: string | undefined) => {

export const convert500ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'cyan':

      return '#06b6d4';

    case 'teal':

      return '#14b8a6';

    case 'lime':
@@ -74,19 +206,96 @@ export const convert500ThemeToColor = (theme: string | undefined) => { 
    case 'black':

      return '#000000';

  }

  return '#000000';

};



export const convert800ThemeToColor = (theme: string | undefined) => {

export const convert600ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#1e293b';

      return '#f3f4f6';

    case 'blue':

      return '#2563eb';

    case 'sky':

      return '#0284c7';

    case 'cyan':

      return '#0891b2';

    case 'teal':

      return '#0d9488';

    case 'lime':

      return '#65a30d';

    case 'green':

      return '#16a34a';

    case 'yellow':

      return '#ca8a04';

    case 'amber':

      return '#d97706';

    case 'orange':

      return '#ea580c';

    case 'pink':

      return '#db2777';

    case 'fuchsia':

      return '#c026d3';

    case 'purple':

      return '#9333ea';

    case 'indigo':

      return '#4f46e5';

    case 'rose':

      return '#e11d48';

    case 'red':

      return '#dc2626';

    case 'black':

      return '#111827';

  }

};



export const convert700ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#e5e7eb';

    case 'blue':

      return '#1d4ed8';

    case 'sky':

      return '#0369a1';

    case 'cyan':

      return '#0e7490';

    case 'teal':

      return '#0f766e';

    case 'lime':

      return '#4d7c0f';

    case 'green':

      return '#15803d';

    case 'yellow':

      return '#a16207';

    case 'amber':

      return '#b45309';

    case 'orange':

      return '#c2410c';

    case 'pink':

      return '#be185d';

    case 'fuchsia':

      return '#a21caf';

    case 'purple':

      return '#7e22ce';

    case 'indigo':

      return '#4338ca';

    case 'rose':

      return '#be123c';

    case 'red':

      return '#b91c1c';

    case 'black':

      return '#1f2937';

  }

};



export const convert800ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#d1d5db';

    case 'blue':

      return '#1e40af';

    case 'sky':

      return '#075985';

    case 'cyan':

      return '#155e75';

    case 'teal':

      return '#115e59';

    case 'lime':
@@ -112,6 +321,45 @@ export const convert800ThemeToColor = (theme: string | undefined) => { 
    case 'red':

      return '#991b1b';

    case 'black':

      return '#000000';

      return '#374151';

  }

};



export const convert900ThemeToColor = (theme: TThemeColor) => {

  switch (theme) {

    case 'white':

      return '#9ca3af';

    case 'blue':

      return '#1e3a8a';

    case 'sky':

      return '#0c4a6e';

    case 'cyan':

      return '#164e63';

    case 'teal':

      return '#134e4a';

    case 'lime':

      return '#365314';

    case 'green':

      return '#14532d';

    case 'yellow':

      return '#713f12';

    case 'amber':

      return '#78350f';

    case 'orange':

      return '#7c2d12';

    case 'pink':

      return '#831843';

    case 'fuchsia':

      return '#701a75';

    case 'purple':

      return '#581c87';

    case 'indigo':

      return '#312e81';

    case 'rose':

      return '#881337';

    case 'red':

      return '#7f1d1d';

    case 'black':

      return '#4b5563';

  }

};

src/common/helpers/common.ts

0 → 100644
+28 −0
Original line number Diff line number Diff line 
import type { TDarkness, TThemeColor } from '@interfaces/common';

import {

  convert100ThemeToColor,

  convert200ThemeToColor,

  convert300ThemeToColor,

  convert400ThemeToColor,

  convert500ThemeToColor,

  convert600ThemeToColor,

  convert700ThemeToColor,

  convert800ThemeToColor,

  convert900ThemeToColor,

} from '@helpers/colors';



export const convertThemeToColor = (

  theme: TThemeColor,

  darkness: TDarkness | number = 500,

): string => {

  if (darkness === 500) return convert500ThemeToColor(theme);

  if (darkness === 100) return convert100ThemeToColor(theme);

  if (darkness === 200) return convert200ThemeToColor(theme);

  if (darkness === 300) return convert300ThemeToColor(theme);

  if (darkness === 400) return convert400ThemeToColor(theme);

  if (darkness === 600) return convert600ThemeToColor(theme);

  if (darkness === 700) return convert700ThemeToColor(theme);

  if (darkness === 800) return convert800ThemeToColor(theme);

  if (darkness === 900) return convert900ThemeToColor(theme);

  return convert500ThemeToColor(theme);

};

src/common/interfaces/common.ts

+7 −3
Original line number Diff line number Diff line 
import type { iconsSet } from '@/common/constants/icons';



export type TIcons = keyof typeof iconsSet;



export type TThemeColor =

  | 'white'

  | 'slate'

  | 'blue'

  | 'sky'

  | 'cyan'

  | 'teal'

  | 'lime'

  | 'green'

  | 'yellow'

  | 'amber'

  | 'orange'

  | 'pink'

  | 'fuchsia'
@@ -17,6 +21,8 @@ export type TThemeColor = 
  | 'red'

  | 'black';



export type TDarkness = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;



export type TThemeColorNoWhite = Exclude<TThemeColor, 'white'>;



export type TSize = 'small' | 'medium' | 'large' | 'huge';
@@ -30,5 +36,3 @@ export type TPosition = 'top' | 'right' | 'bottom' | 'left'; 
export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';



export type TBorder = 'solid' | 'dashed' | 'dotted';
 


export type TIcons = keyof typeof iconsSet;