@cyber-harbour/ui 1.0.47 → 1.0.49

package/src/Theme/themes/light.ts

@@ -705,6 +705,54 @@ export const lightThemePx: Theme = {
     foreground: '#E2E2E2E2',
     background: '#F3F3F3',
   },
+  tag: {
+    outlined: {
+      borderRadius: 50,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 1,
+      color: {
+        default: '#535353',
+        primary: '#0042EC',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+    fill: {
+      borderRadius: 4,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 0,
+      color: {
+        default: '#535353',
+        primary: '#0042EC',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+  },
+  alert: {
+    paddingBlock: 16,
+    paddingLeft: 16,
+    paddingRight: 44,
+    borderRadius: 5,
+    fontSize: 14,
+    gap: 12,
+    icon: {
+      width: 16,
+      height: 14,
+      paddingTop: 2,
+    },
+    color: {
+      icon: '#FDC700',
+      text: '#894B00',
+      background: '#FFFBE0',
+    },
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -10,6 +10,9 @@ export type InputVariant = 'outlined' | 'empty';
 export type InputState = 'default' | 'focus' | 'error' | 'disabled';
 export type InputSize = 'empty' | 'small' | 'medium';
 
+export type TagVariant = 'fill' | 'outlined';
+export type TagColor = 'default' | 'primary' | 'error' | 'warning' | 'success' | 'disabled' | string;
+
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -57,6 +60,14 @@ export type InputSizeStyle = {
   lineHeight: number;
 };
 
+export type TagElementStyle = {
+  paddingInline: number | string;
+  paddingBlock: number | string;
+  borderRadius: number | string;
+  borderWidth: number | string;
+  color: Record<TagColor, string>;
+};
+
 // Тип для палітри
 export type Theme = {
   mode: 'light' | 'dark';
@@ -235,6 +246,25 @@ export type Theme = {
     foreground: string;
     background: string;
   };
+  tag: Record<TagVariant, TagElementStyle>;
+  alert: {
+    paddingBlock: number | string;
+    paddingLeft: number | string;
+    paddingRight: number | string;
+    borderRadius: number | string;
+    fontSize: number | string;
+    gap: number | string;
+    icon: {
+      width: number | string;
+      height: number | string;
+      paddingTop: number | string;
+    };
+    color: {
+      icon: string;
+      text: string;
+      background: string;
+    };
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -173,3 +173,17 @@ export const getTypographyStyles = (theme: DefaultTheme, variant: string = 'body
 export const getBreakpoint = (theme: DefaultTheme, size: Breakpoint = 'm') => {
   return `@media (min-width: ${theme.breakpoints[size]}px)`;
 };
+
+/**
+ * Функція для отримання rgba кольору з hex формату
+ */
+export const hexToRgba = (hex: string, alpha: number): string => {
+  try {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  } catch {
+    return hex;
+  }
+};