From cfe12013d0a726c69fed391f129560b765606598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 18 Dec 2024 17:30:42 +0500
Subject: [PATCH] refactor: change color logic and fix some problems of
components
---
src/App.vue | 4 +-
src/assets/main.css | 9 +
src/common/helpers/colors.ts | 276 +++++++++++++++++-
src/common/helpers/common.ts | 28 ++
src/common/interfaces/common.ts | 10 +-
src/common/interfaces/componentsProp.ts | 22 +-
src/common/interfaces/componentsProps.ts | 39 ++-
.../components/Button/Button.stories.ts | 12 +-
src/stories/components/Button/Button.vue | 15 +-
.../components/Divider/Divider.stories.ts | 3 +-
src/stories/components/Divider/Divider.vue | 5 +-
.../components/Drawer/Drawer.stories.ts | 3 +-
src/stories/components/Drawer/Drawer.vue | 35 ++-
.../components/MenuDial/MenuDial.stories.ts | 53 +++-
src/stories/components/MenuDial/MenuDial.vue | 24 +-
src/stories/components/Modal/Modal.stories.ts | 3 +-
src/stories/components/Modal/Modal.vue | 31 +-
src/stories/components/Popup/Popup.stories.ts | 3 +-
src/stories/components/Popup/Popup.vue | 33 ++-
.../SelectButton/SelectButton.stories.ts | 13 +-
.../components/SelectButton/SelectButton.vue | 22 +-
.../components/Slider/Slider.stories.ts | 9 +-
src/stories/components/Slider/Slider.vue | 14 +-
.../ToggleSwitch/ToggleSwitch.stories.ts | 14 +-
.../components/ToggleSwitch/ToggleSwitch.vue | 11 +-
src/stories/components/TreeList/TreeItems.vue | 12 +-
.../components/TreeList/TreeList.stories.ts | 6 +-
src/stories/components/TreeList/TreeList.vue | 11 +-
28 files changed, 592 insertions(+), 128 deletions(-)
create mode 100644 src/common/helpers/common.ts
diff --git a/src/App.vue b/src/App.vue
index d7bf047..ad430e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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,
diff --git a/src/assets/main.css b/src/assets/main.css
index 7b91d0d..21b455a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -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;
diff --git a/src/common/helpers/colors.ts b/src/common/helpers/colors.ts
index 5ec5279..74a597b 100644
--- a/src/common/helpers/colors.ts
+++ b/src/common/helpers/colors.ts
@@ -1,13 +1,106 @@
-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 '#cbd5e1';
- case 'slate':
- return '#cbd5e1';
+ 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 '#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';
}
};
diff --git a/src/common/helpers/common.ts b/src/common/helpers/common.ts
new file mode 100644
index 0000000..e4ec1fb
--- /dev/null
+++ b/src/common/helpers/common.ts
@@ -0,0 +1,28 @@
+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);
+};
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 7ff7e70..6a854a8 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,13 +1,17 @@
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;
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 1f0e3c3..aa30d5c 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
export interface ITreeItem {
label: string;
@@ -11,22 +11,38 @@ export interface ITreeItem {
iconAfter?: TIcons;
iconColor?: TThemeColor;
children?: ITreeItem[];
+ darknessColor?: TDarkness;
+ darknessIconColor?: TDarkness;
isLinkClicked?: boolean;
}
+export interface IMDItemProps {
+ label: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
+ textStyle?: TTextStyle;
+ link?: string;
+ linkBlank?: boolean;
+ onClick?: () => void;
+}
+
export interface ISBOption {
label: string;
value?: never;
color?: TThemeColor;
activeColor?: TThemeColor;
backgroundColor?: TThemeColor;
+ darknessColor?: TDarkness;
+ darknessActiveColor?: TDarkness;
+ darknessBackgroundColor?: TDarkness;
isLabelHidden?: boolean;
iconPosition?: TPosition;
textStyle?: TTextStyle;
}
export interface ISliderOptions {
- label: string | number;
+ label: string | number | boolean;
value?: string | number;
- color?: string;
+ color?: TThemeColor;
+ darknessColor?: TDarkness;
}
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8a1459e..c80425a 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -1,5 +1,6 @@
import type {
TBorder,
+ TDarkness,
TDirection,
TExpandedPosition,
TIcons,
@@ -9,13 +10,19 @@ import type {
TThemeColor,
TThemeColorNoWhite,
} from '@interfaces/common';
-import type { ISBOption, ISliderOptions, ITreeItem } from '@interfaces/componentsProp';
+import type {
+ IMDItemProps,
+ ISBOption,
+ ISliderOptions,
+ ITreeItem,
+} from '@interfaces/componentsProp';
export interface ITLProps {
items: ITreeItem[];
maxWidth?: number;
expand?: boolean;
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
}
export interface ITIProps {
@@ -24,21 +31,15 @@ export interface ITIProps {
label: string;
}[];
items: ITreeItem[];
- textColor: TThemeColor;
+ textColor: string;
themeColor: string;
}
export interface IMDProps {
- items: {
- label: string;
- theme?: string;
- textStyle?: TTextStyle;
- link?: string;
- linkBlank?: boolean;
- onClick?: () => void;
- }[];
+ items: IMDItemProps[];
size?: TSize;
- theme?: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
direction?: TDirection;
// direction?: TDirection | 'circle';
}
@@ -51,6 +52,8 @@ export interface ISliderProps {
size?: TSize;
theme?: TThemeColor;
backgroundColor?: TThemeColor;
+ darknessTheme?: TDarkness;
+ darknessBackgroundColor?: TDarkness;
orientation?: 'horizontal' | 'vertical';
isSmooth?: boolean;
options?: ISliderOptions[];
@@ -60,6 +63,7 @@ export interface IDrawerProps {
position?: TPosition;
width?: string | number;
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
modal?: boolean;
dismissible?: boolean;
closeIcon?: TIcons;
@@ -69,6 +73,7 @@ export interface IDrawerProps {
export interface IModalProps {
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
width?: string;
height?: string;
position?: TExpandedPosition;
@@ -80,6 +85,7 @@ export interface IModalProps {
export interface IPopupProps {
parentSelector?: string;
theme?: TThemeColor;
+ darknessTheme?: TDarkness;
maxWidth?: string;
maxHeight?: string;
padding?: string;
@@ -91,6 +97,8 @@ export interface ISBProps {
rounded?: boolean;
activeBackgroundColor?: TThemeColor;
border?: TThemeColor;
+ darknessActiveBackgroundColor?: TDarkness;
+ darknessBorder?: TDarkness;
disabled?: boolean;
}
@@ -100,17 +108,21 @@ export interface IButtonProps {
textStyle?: TTextStyle;
iconPos?: TPosition;
width?: string | number;
+ iconOnly?: boolean;
theme?: TThemeColor;
textColor?: TThemeColor;
border?: TThemeColor;
- iconOnly?: boolean;
+ darknessTheme?: TDarkness;
+ darknessTextColor?: TDarkness;
+ darknessBorder?: TDarkness;
}
export interface ITSProps {
size?: TSize;
theme?: TThemeColorNoWhite;
negativeTheme?: TThemeColor;
- darkNegative?: boolean;
+ darknessTheme?: TDarkness;
+ darknessNegativeTheme?: TDarkness;
disabled?: boolean;
}
@@ -118,4 +130,5 @@ export interface IDividerProps {
height?: number;
type?: TBorder;
color?: TThemeColor;
+ darknessColor?: TDarkness;
}
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index bdbacf4..337bc5b 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -19,13 +19,19 @@ const meta: Meta = {
textStyle: { control: 'select', options: ['bold', 'italic'] },
iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
width: { 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],
+ },
+ darknessBorder: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -43,9 +49,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -63,9 +69,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index be2e174..45df8f5 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -1,18 +1,25 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { IButtonProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IButtonProps>(), {
size: 'medium',
theme: 'white',
textColor: 'black',
iconPos: 'left',
+ darknessTheme: 500,
+ darknessTextColor: 500,
+ darknessBorder: 500,
});
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const textColorComputed = computed(() => convert500ThemeToColor(props.textColor));
-const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColorComputed = computed(() =>
+ convertThemeToColor(props.textColor, props.darknessTextColor),
+);
+const borderColor = computed(() =>
+ !props.border ? '' : convertThemeToColor(props.border, props.darknessBorder),
+);
const textSize = computed(() => {
switch (props.size) {
case 'small':
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
index b7a6350..960e6f5 100644
--- a/src/stories/components/Divider/Divider.stories.ts
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -16,13 +16,14 @@ const meta: Meta = {
argTypes: {
height: { control: 'number' },
type: { control: 'select', options: ['solid', 'dashed', 'dotted'] },
+ darknessColor: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
color: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Divider/Divider.vue b/src/stories/components/Divider/Divider.vue
index 54164cd..b195e97 100644
--- a/src/stories/components/Divider/Divider.vue
+++ b/src/stories/components/Divider/Divider.vue
@@ -1,14 +1,15 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { IDividerProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IDividerProps>(), {
height: 1,
type: 'solid',
color: 'black',
+ darknessColor: 500,
});
-const colorConverted = computed(() => convert500ThemeToColor(props.color));
+const colorConverted = computed(() => convertThemeToColor(props.color, props.darknessColor));
</script>
<template>
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index cd0c0de..9cfdc30 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -26,13 +26,14 @@ const meta: Meta = {
closeIcon: { control: 'select', options: Object.keys(iconsSet) },
headerDivider: { control: 'boolean' },
footerDivider: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index 913796f..1656f88 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -1,8 +1,9 @@
<script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
import { iconsSet } from '@/common/constants/icons';
-import { convert500ThemeToColor, convert300ThemeToColor } from '@helpers/colors';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
import type { IDrawerProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IDrawerProps>(), {
visible: false,
@@ -11,25 +12,37 @@ const props = withDefaults(defineProps<IDrawerProps>(), {
modal: true,
dismissible: true,
theme: 'white',
+ darknessTheme: 500,
closeIcon: 'CrossIcon',
headerDivider: false,
footerDivider: false,
});
+const body = document.querySelector('body')!;
const emit = defineEmits(['onClose']);
const visible = defineModel<boolean>('visible', {
set(value) {
if (!value) {
+ body.style.overflow = 'auto';
emit('onClose');
}
return value;
},
});
-
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+watch(visible, () => {
+ if (visible.value) {
+ body.style.overflow = 'hidden';
+ }
+});
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const textColor = computed(() => {
- if (!props.theme || props.theme === 'white') return 'black';
- return 'white';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
});
const drawerWidth = computed(() => {
if (+props.width < 200) return '200px';
@@ -46,7 +59,7 @@ const drawerWidth = computed(() => {
drawerBackgroundOpened: visible,
},
]"
- @click.prevent="dismissible ? (visible = false) : ''"
+ @pointerdown.stop="dismissible ? (visible = false) : ''"
></section>
<section
:style="`color: ${textColor}; background-color: ${themeColor}`"
@@ -108,7 +121,7 @@ const drawerWidth = computed(() => {
justify-content: space-between;
padding: 20px;
transition: transform ease-out 0.2s;
- border-right: 2px solid #b1b1b1;
+ border-right: 2px solid v-bind(scrollAndBorderColor);
}
.drawerVertical {
width: 100vw !important;
@@ -158,7 +171,7 @@ const drawerWidth = computed(() => {
}
.divider {
height: 2px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
.divider-header {
position: absolute;
@@ -176,6 +189,6 @@ const drawerWidth = computed(() => {
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
</style>
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/stories/components/MenuDial/MenuDial.stories.ts
index a91196a..1fb7c18 100644
--- a/src/stories/components/MenuDial/MenuDial.stories.ts
+++ b/src/stories/components/MenuDial/MenuDial.stories.ts
@@ -16,14 +16,15 @@ const meta: Meta = {
argTypes: {
items: { control: 'object' },
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
- direction: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+ direction: { control: 'select', options: ['up', 'down', 'left', 'right'] },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -79,3 +80,51 @@ export const Full: Story = {
theme: 'sky',
},
};
+
+export const Down: Story = {
+ args: {
+ items: [
+ {
+ label: 'font-family link',
+ theme: 'green',
+ darknessTheme: 700,
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ },
+ {
+ label: 'Second',
+ theme: 'green',
+ darknessTheme: 800,
+ textStyle: 'italic',
+ },
+ ],
+ theme: 'red',
+ darknessTheme: 700,
+ direction: 'down',
+ },
+};
+
+export const Huge: Story = {
+ args: {
+ items: [
+ {
+ label: 'font-family link',
+ theme: 'green',
+ darknessTheme: 700,
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ },
+ {
+ label: 'Second',
+ theme: 'green',
+ darknessTheme: 800,
+ textStyle: 'italic',
+ },
+ ],
+
+ theme: 'red',
+ darknessTheme: 700,
+ direction: 'right',
+ size: 'medium',
+ },
+};
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
index 5b54129..933d5f1 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -1,21 +1,29 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { IMDProps } from '@interfaces/componentsProps';
-import { convert500ThemeToColor } from '@helpers/colors';
import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import { convertThemeToColor } from '@helpers/common';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
const props = withDefaults(defineProps<IMDProps>(), {
theme: 'white',
+ darknessTheme: 500,
size: 'medium',
direction: 'right',
});
const active = defineModel('active');
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const textColor = computed(() => {
- if (props.theme === 'white') return '#000000';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
return '#ffffff';
});
+const borderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const elementsSize = computed(() => {
switch (props.size) {
case 'small':
@@ -34,7 +42,7 @@ const menuListStyles = computed(() => {
case 'up':
return `flex-direction: column-reverse; transform: translateY(-${active.value ? (0.5 + props.items.length) * elementsSize.value + 15 : 1.5 * elementsSize.value}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
case 'down':
- return `flex-direction: column; transform: translateY(${active.value ? 25 : -20}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
+ return `flex-direction: column; transform: translateY(${active.value ? elementsSize.value / 1.75 : -20}px) translateX(calc(-50% + ${elementsSize.value / 2}px))`;
}
return `transform: translateY(-${elementsSize.value / 2}px) translateX(${active.value ? elementsSize.value + 10 : -20}px)`;
});
@@ -60,7 +68,7 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
<template>
<section class="menuContainer">
<button
- :style="`border: ${theme === 'white' ? '2px solid black' : ''}; background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${active ? 'rotate(135deg)' : ''};`"
+ :style="`border: 2px solid ${borderColor}; background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${active ? 'rotate(135deg)' : ''};`"
class="menuButton"
@click.prevent="active = !active"
>
@@ -80,8 +88,8 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
<li
v-for="(item, index) of items"
:key="item.label"
- :style="`height: ${elementsSize}px; background-color: ${convert500ThemeToColor(item.theme ?? 'white')};
- color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'};`"
+ :style="`height: ${elementsSize}px; background-color: ${convertThemeToColor(item.theme ?? 'white', item.darknessTheme ?? 500)};
+ color: ${item.theme === 'white' || ((item.darknessTheme ?? 500) <= 600 && item.theme !== 'black') ? 'black' : 'white'}; border-color: ${borderColor};`"
class="menuElement"
@click="
() => {
@@ -147,7 +155,7 @@ const openLink = (url: string, isBlank: boolean | undefined) =>
justify-content: center;
align-items: center;
padding: 10px;
- border: 1px solid white;
+ border: 1px solid v-bind(borderColor);
border-radius: 5px;
user-select: none;
cursor: pointer;
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
index b23779a..d5c6d08 100644
--- a/src/stories/components/Modal/Modal.stories.ts
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -36,13 +36,14 @@ const meta: Meta = {
'bottomRight',
],
},
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index 1ebe15a..5c8e74c 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -1,32 +1,45 @@
<script setup lang="ts">
-import { computed } from 'vue';
-import { convert300ThemeToColor, convert500ThemeToColor } from '@helpers/colors';
+import { computed, watch } from 'vue';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
import type { IModalProps } from '@interfaces/componentsProps';
import { iconsSet } from '@/common/constants/icons';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<IModalProps>(), {
visible: false,
dismissible: false,
theme: 'white',
+ darknessTheme: 500,
width: '30%',
height: '30%',
headerDivider: false,
closeIcon: 'CrossIcon',
});
+const body = document.querySelector('body')!;
const emit = defineEmits(['onClose']);
const visible = defineModel('visible', {
set(value) {
if (!value) {
+ body.style.overflow = 'auto';
emit('onClose');
}
return value;
},
});
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+watch(visible, () => {
+ if (visible.value) {
+ body.style.overflow = 'hidden';
+ }
+});
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
const textColor = computed(() => {
- if (!props.theme) return '#000000';
- if (props.theme === 'white') return '#000000';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
return '#ffffff';
});
const onKeydown = (event: KeyboardEvent) => {
@@ -101,7 +114,7 @@ document.addEventListener('keydown', onKeydown);
min-width: 250px;
min-height: 100px;
padding: 20px;
- border: 2px solid gray;
+ border: 2px solid v-bind(scrollAndBorderColor);
border-radius: 15px;
opacity: 0;
transform: scale(0.5);
@@ -145,7 +158,7 @@ document.addEventListener('keydown', onKeydown);
}
.divider {
height: 2px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
position: absolute;
left: 20px;
top: 60px;
@@ -153,7 +166,7 @@ document.addEventListener('keydown', onKeydown);
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
.toTop {
top: 10px !important;
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/stories/components/Popup/Popup.stories.ts
index c8d3e5c..7f515ed 100644
--- a/src/stories/components/Popup/Popup.stories.ts
+++ b/src/stories/components/Popup/Popup.stories.ts
@@ -20,13 +20,14 @@ const meta: Meta = {
maxWidth: { control: 'text' },
maxHeight: { control: 'text' },
padding: { control: 'text' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
index a9eb103..e199b8b 100644
--- a/src/stories/components/Popup/Popup.vue
+++ b/src/stories/components/Popup/Popup.vue
@@ -1,18 +1,31 @@
<script setup lang="ts">
import type { IPopupProps } from '@interfaces/componentsProps';
import { computed, ref } from 'vue';
-import { convert300ThemeToColor, convert500ThemeToColor } from '@helpers/colors';
+import { convertThemeToColor } from '@helpers/common';
+import { convertWhiteOrBlackToColor } from '@helpers/colors';
const props = withDefaults(defineProps<IPopupProps>(), {
parentSelector: 'body',
theme: 'white',
+ border: 'black',
maxWidth: '300px',
maxHeight: '100px',
padding: '5px',
+ darknessTheme: 500,
+ darknessBorder: 500,
});
const active = defineModel<boolean>('active');
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const scrollAndBorderColor = computed(() =>
+ props.theme === 'white' || props.theme === 'black'
+ ? convertWhiteOrBlackToColor(props.theme, props.darknessTheme)
+ : convertThemeToColor(props.theme, 100 + ((props.darknessTheme + 600) % 900)),
+);
+const textColor = computed(() => {
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
+});
const top = ref();
const left = ref();
@@ -20,9 +33,9 @@ const isContainer = ref();
const container = document.querySelector(props.parentSelector);
if (container) {
- container.addEventListener('pointerdown', (e) => {
+ container.addEventListener('pointerdown', (event: Event) => {
+ const e = event as PointerEvent;
if (e.button === 2) {
- console.log('e.clientY, e.clientX ', e.clientY, e.clientX);
isContainer.value = true;
if (!active.value) active.value = true;
top.value = e.clientY;
@@ -45,9 +58,11 @@ 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}`"
+ :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}; color: ${textColor}`"
>
- <div :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto;`">
+ <div
+ :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto; padding-right: 5px`"
+ >
<slot />
<p v-if="!$slots.default" style="background-color: black; color: white; padding: 10px">
Popup
@@ -61,11 +76,11 @@ document.addEventListener('pointerdown', (e) => {
position: fixed;
transition: opacity 0.2s ease-in-out;
background-color: v-bind(themeColor);
- border: 1px solid #403e46;
+ border: 1px solid v-bind(scrollAndBorderColor);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
- background-color: v-bind(scrollColor);
+ background-color: v-bind(scrollAndBorderColor);
}
</style>
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 0e7f8c8..03c49b6 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -19,13 +19,21 @@ const meta: Meta = {
},
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
rounded: { control: 'boolean' },
+ darknessActiveBackgroundColor: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ darknessBorder: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
activeBackgroundColor: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -43,9 +51,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -94,6 +102,7 @@ export const LargeFull: Story = {
},
{
label: 'Second',
+ color: 'red',
activeColor: 'blue',
backgroundColor: 'yellow',
},
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 2f3761b..43ba74b 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -1,20 +1,25 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ISBProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ISBProps>(), {
size: 'medium',
- border: 'black',
activeBackgroundColor: 'sky',
+ darknessActiveBackgroundColor: 500,
+ darknessBorder: 500,
});
const emit = defineEmits(['onClick']);
const value = defineModel<never>('value');
const activeBackgroundColorComputed = computed(() =>
- props.activeBackgroundColor ? convert500ThemeToColor(props.activeBackgroundColor) : '',
+ props.activeBackgroundColor
+ ? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
+ : '',
+);
+const borderColor = computed(() =>
+ !props.border ? '' : convertThemeToColor(props.border, props.darknessBorder),
);
-const borderColor = computed(() => (props.border ? convert500ThemeToColor(props.border) : ''));
const textSize = computed(() => {
switch (props.size) {
case 'small':
@@ -79,7 +84,7 @@ const buttonHeight = computed(() => {
"
>
<span
- :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convert500ThemeToColor(item.backgroundColor ?? 'white')}`"
+ :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convertThemeToColor(item.backgroundColor ?? 'white', item.darknessBackgroundColor ?? 500)}`"
:class="[
'background',
{
@@ -92,7 +97,7 @@ const buttonHeight = computed(() => {
></span>
<span
v-if="!item.isLabelHidden"
- :style="`color: ${value === item.value || value === item.label ? item.activeColor : convert500ThemeToColor(item.color ?? 'black')}; font-size: ${textSize}`"
+ :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}`"
:class="[
'text',
{
@@ -102,7 +107,8 @@ const buttonHeight = computed(() => {
]"
>{{ item.label ?? index }}</span
>
- <div
+ <span
+ v-if="$slots[`${index + 1}Icon`]"
:class="[
'icon',
{
@@ -111,7 +117,7 @@ const buttonHeight = computed(() => {
]"
>
<slot :name="`${index + 1}Icon`" />
- </div>
+ </span>
</button>
</div>
</template>
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
index d465efa..98211f2 100644
--- a/src/stories/components/Slider/Slider.stories.ts
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -22,13 +22,18 @@ const meta: Meta = {
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
orientation: { control: 'select', options: ['horizontal', 'vertical'] },
isSmooth: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ darknessBackgroundColor: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -46,9 +51,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
index 47b6fcb..5d57dc4 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/stories/components/Slider/Slider.vue
@@ -1,13 +1,15 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ISliderProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ISliderProps>(), {
width: '100',
size: 'medium',
theme: 'sky',
backgroundColor: 'black',
+ darknessTheme: 500,
+ darknessBackgroundColor: 500,
});
const value = defineModel('value');
const optionValue = ref(
@@ -57,8 +59,10 @@ const widthHalf = computed(() => `${Math.floor(+props.width / 2)}px`);
const sliderHeight = computed(() => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2.5)}px`);
const sliderBorderRadius = computed(() => (props.isSmooth ? sliderHeight.value : '0%'));
const sliderButtonBorderRadius = computed(() => (props.isSmooth ? '50%' : '0%'));
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
-const themeBackground = computed(() => convert500ThemeToColor(props.backgroundColor));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const themeBackground = computed(() =>
+ convertThemeToColor(props.backgroundColor, props.darknessBackgroundColor),
+);
const marksListPadding = computed(
() => `${Math.floor(+sliderButtonSize.value.slice(0, -2) / 2)}px`,
);
@@ -86,9 +90,9 @@ const marksListPadding = computed(
<ul class="marksList" :style="`width: ${width ?? 200}px`">
<li
v-for="option of options"
- :key="option.label"
+ :key="String(option.label)"
class="mark"
- :style="`color: ${convert500ThemeToColor(option?.color) ?? 'white'}; font-size: ${optionsFontSize}`"
+ :style="`color: ${convertThemeToColor(option.color ?? 'black', option.darknessColor ?? 500) ?? 'white'}; font-size: ${optionsFontSize}`"
>
{{ option.label }}
</li>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
index c003e86..0fe5c11 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -20,9 +20,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -40,9 +40,9 @@ const meta: Meta = {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -56,7 +56,11 @@ const meta: Meta = {
'black',
],
},
- darkNegative: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ darknessNegativeTheme: {
+ control: 'select',
+ options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
disabled: { control: 'boolean' },
},
args: {},
@@ -68,14 +72,12 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
- darkNegative: true,
active: false,
},
};
export const SmallLight: Story = {
args: {
- darkNegative: false,
negativeTheme: 'yellow',
theme: 'red',
size: 'small',
@@ -84,7 +86,6 @@ export const SmallLight: Story = {
export const Large: Story = {
args: {
- darkNegative: true,
negativeTheme: 'purple',
theme: 'green',
size: 'large',
@@ -93,7 +94,6 @@ export const Large: Story = {
export const Huge: Story = {
args: {
- darkNegative: true,
negativeTheme: 'blue',
theme: 'orange',
size: 'huge',
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 503feb5..7be5d7a 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,21 +1,20 @@
<script setup lang="ts">
import { computed } from 'vue';
-import { convert500ThemeToColor, convert800ThemeToColor } from '@helpers/colors';
import type { ITSProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ITSProps>(), {
size: 'medium',
theme: 'sky',
negativeTheme: 'black',
- darkNegative: true,
+ darknessTheme: 500,
+ darknessNegativeTheme: 500,
});
const active = defineModel<boolean>('active');
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const inactiveColor = computed(() =>
- props.darkNegative
- ? convert800ThemeToColor(props.negativeTheme)
- : convert500ThemeToColor(props.negativeTheme),
+ convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme),
);
const sizes = computed(() => {
if (!props?.size) {
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
index 2dd704c..bbd871b 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { iconsSet } from '@/common/constants/icons';
import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
-import { convert500ThemeToColor } from '@helpers/colors';
import type { ITIProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
defineProps<ITIProps>();
const emit = defineEmits(['toggleIsOpen', 'onClick']);
@@ -44,7 +44,9 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
},
]"
:color="
- item.color && item.isTriangleToColor ? convert500ThemeToColor(item.color) : textColor
+ item.color && item.isTriangleToColor
+ ? convertThemeToColor(item.color, item.darknessColor ?? 500)
+ : textColor
"
size="17"
/>
@@ -59,7 +61,7 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
isDarkerOnHover: item.link,
},
]"
- :style="`color: ${item.color ? convert500ThemeToColor(item.color) : textColor}`"
+ :style="`color: ${item.color ? convertThemeToColor(item.color, item.darknessColor ?? 500) : textColor}`"
@click="
() => {
item.isLinkClicked = true;
@@ -72,14 +74,14 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
><component
:is="iconsSet[item.iconBefore]"
v-if="item.iconBefore"
- :color="convert500ThemeToColor(item.iconColor)"
+ :color="convertThemeToColor(item.iconColor ?? 'black', item.darknessIconColor ?? 500)"
style="min-width: 17px"
size="17" />
<span>{{ item.label }}</span
><component
:is="iconsSet[item.iconAfter]"
v-if="item.iconAfter"
- :color="convert500ThemeToColor(item.iconColor)"
+ :color="convertThemeToColor(item.iconColor ?? 'black', item.darknessIconColor ?? 500)"
style="min-width: 17px"
size="17"
/></a>
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index 9be416a..8c2165e 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -18,13 +18,14 @@ const meta: Meta = {
items: { control: 'object' },
maxWidth: { control: 'number' },
expand: { control: 'boolean' },
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
theme: {
control: 'select',
options: [
'white',
- 'slate',
'blue',
'sky',
+ 'cyan',
'teal',
'green',
'yellow',
@@ -124,6 +125,8 @@ export const Full: Story = {
color: 'red',
iconAfter: 'DiceIcon',
iconColor: 'red',
+ darknessColor: 400,
+ darknessIconColor: 400,
children: [
{
label: '1-1-1-1',
@@ -160,5 +163,6 @@ export const Full: Story = {
expand: true,
theme: 'black',
+ darknessTheme: 800,
},
};
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/stories/components/TreeList/TreeList.vue
index 061fe64..d4b1f5c 100644
--- a/src/stories/components/TreeList/TreeList.vue
+++ b/src/stories/components/TreeList/TreeList.vue
@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { ITreeItem } from '@interfaces/componentsProp';
-import { convert500ThemeToColor } from '@helpers/colors';
import TreeItems from '@stories/components/TreeList/TreeItems.vue';
import type { ITLProps } from '@interfaces/componentsProps';
+import { convertThemeToColor } from '@helpers/common';
interface IStateItem {
isOpen: boolean;
@@ -13,14 +13,15 @@ interface IStateItem {
const props = withDefaults(defineProps<ITLProps>(), {
theme: 'white',
maxWidth: 300,
+ darknessTheme: 500,
});
const emit = defineEmits(['onClick']);
const items = computed(() => props.items);
-const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const textColor = computed(() => {
- if (!props.theme) return 'black';
- if (props.theme === 'white') return 'black';
- return 'white';
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
});
const state = ref<IStateItem[]>([]);
--
GitLab