Merge branch 'main' into added-new-sizes

SlDo · web-flow · commit ad4b2dbfe8b8 · 2025-10-09T19:02:20.000+03:00
diff --git a/.changeset/hip-baths-heal.md b/.changeset/hip-baths-heal.md
diff --git a/apps/preview/app/(tabs)/index.tsx b/apps/preview/app/(tabs)/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { View } from 'react-native';
 import { useColorScheme } from "@/hooks/useColorScheme";
-import { Button, ButtonLabel, TextField, Switch, ButtonIcon, IconButton, IconButtonIcon } from "@vega-ui/react-native";
+import { Button, ButtonLabel, TextField, Switch, IconButton, IconButtonIcon } from "@vega-ui/react-native";
 import { Globe } from "@vega-ui/reanimated-icons";
 
 export default function HomeScreen() {
@@ -16,7 +16,7 @@ export default function HomeScreen() {
         <TextField disabled keyboardType='email-address' placeholder='Last name' />
         <TextField error disabled keyboardType='email-address' placeholder='Last name' />
         <Switch />
-        <Button onPress={() => setValue(value + 1)}>
+        <Button variant='secondary' appearance='transparent' onPress={() => setValue(value + 1)}>
           <ButtonLabel>Increment (now: {value})</ButtonLabel>
         </Button>
         <IconButton>
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @vega-ui/icons-react-native
 
+## 0.5.2
+
+## 0.5.1
+
+## 0.5.0
+
 ## 0.4.0
 
 ## 0.3.0
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vega-ui/icons-react-native",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "Vega UI - Icons (React Native)",
   "license": "MIT",
   "author": "VegaUI Team",
diff --git a/packages/reanimated-icons/CHANGELOG.md b/packages/reanimated-icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @vega-ui/reanimated-icons
 
+## 0.5.2
+
+## 0.5.1
+
+## 0.5.0
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/reanimated-icons/package.json b/packages/reanimated-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vega-ui/reanimated-icons",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "Vega UI - Reanimated Icons (React Native)",
   "license": "MIT",
   "author": "VegaUI Team",
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @vega-ui/theme
 
+## 0.5.2
+
+### Patch Changes
+
+- 10dcbe8: The gray colors have been changed, the surface has been added, and the fields styles have also been changed
+- Updated dependencies [10dcbe8]
+  - @vega-ui/tokens@0.5.2
+
+## 0.5.1
+
+### Patch Changes
+
+- cff8d2c: Made surface color (dark theme) darker and more contrast
+  - @vega-ui/tokens@0.5.1
+
+## 0.5.0
+
+### Patch Changes
+
+- Updated dependencies [b19c4f8]
+  - @vega-ui/tokens@0.5.0
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vega-ui/theme",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "Vega UI - Theme for React apps",
   "license": "MIT",
   "author": "VegaUI Team",
diff --git a/packages/theme/src/constants/themes/dark.ts b/packages/theme/src/constants/themes/dark.ts
@@ -13,7 +13,11 @@ export const darkTheme: Theme = {
   black: colors.black,
   
   surface: {
-    foreground: '#1F2227',
+    ultrathin: '#1E2025',
+    thin: colors.white,
+    regular: colors.gray['950'],
+    thick: colors.gray['900'],
+    ultrathick: colors.gray['850'],
   },
   
   gray: {
@@ -186,14 +190,16 @@ export const darkTheme: Theme = {
   
   disable: {
     text: colors.gray[300],
-    background: colors.gray[900],
+    background: colors.gray[850],
     placeholderText: colors.gray[400],
     border: colors.gray[700]
   },
   
   field: {
     placeholder: colors.gray[500],
     border: colors.gray[700],
-    borderActive: colors.gray[500]
+    borderActive: colors.gray[500],
+    backgroundColor: colors.gray['950'],
+    backgroundHoverColor: colors.gray['900'],
   }
 } as const
diff --git a/packages/theme/src/constants/themes/light.ts b/packages/theme/src/constants/themes/light.ts
@@ -13,7 +13,11 @@ export const lightTheme: Theme = {
   black: colors.black,
   
   surface: {
-    foreground: '#FFFFFF',
+    ultrathin: colors.white,
+    thin: colors.gray['50'],
+    regular: colors.gray['50'],
+    thick: colors.gray['100'],
+    ultrathick: colors.gray['150'],
   },
   
   gray: {
@@ -186,14 +190,16 @@ export const lightTheme: Theme = {
   
   disable: {
     text: colors.gray[700],
-    background: colors.gray[100],
+    background: colors.gray[150],
     placeholderText: colors.gray[600],
     border: colors.gray[300]
   },
   
   field: {
     placeholder: colors.gray[500],
     border: colors.gray[300],
-    borderActive: colors.gray[500]
+    borderActive: colors.gray[500],
+    backgroundColor: colors.gray['50'],
+    backgroundHoverColor: colors.gray['100'],
   }
 } as const
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
@@ -1,3 +1,5 @@
+import { colors } from '@vega-ui/tokens';
+
 type ColorPallet = 0 | 50 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900 | 950 | 1000
 
 export interface Theme {
@@ -12,7 +14,11 @@ export interface Theme {
   black: string
   
   surface: {
-    foreground: string
+    ultrathin: string
+    thin: string
+    regular: string
+    thick: string
+    ultrathick: string
   }
   
   gray: Record<ColorPallet, string>,
@@ -35,6 +41,8 @@ export interface Theme {
     placeholder: string
     border: string
     borderActive: string
+    backgroundColor: string
+    backgroundHoverColor: string
   }
 }
 
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @vega-ui/tokens
 
+## 0.5.2
+
+### Patch Changes
+
+- 10dcbe8: The gray colors have been changed, the surface has been added, and the fields styles have also been changed
+
+## 0.5.1
+
+## 0.5.0
+
+### Minor Changes
+
+- b19c4f8: Added new sizes for button and icon button - xl, xs
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vega-ui/tokens",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "Vega UI - Tokens",
   "license": "MIT",
   "author": "VegaUI Team",
diff --git a/packages/tokens/src/colors.ts b/packages/tokens/src/colors.ts
@@ -360,10 +360,10 @@ export const colors = {
   },
   
   gray: {
-    0: '#FCFDFD',
-    50: '#F8F9FA',
-    100: '#F3F5F7',
-    150: '#E8EBEE',
+    0: '#FAFBFC',
+    50: '#F5F5F7',
+    100: '#F2F3F5',
+    150: '#EDEFF2',
     200: '#DDE1E6',
     250: '#D0D6DC',
     300: '#C1C9D1',
@@ -377,10 +377,10 @@ export const colors = {
     700: '#616E7D',
     750: '#546171',
     800: '#454E59',
-    850: '#343B43',
-    900: '#363F48',
-    950: '#131518',
-    1000: '#070809',
+    850: '#363A43',
+    900: '#23252A',
+    950: '#1A1C20',
+    1000: '#16171A',
   },
   
   smoke: {
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,40 @@
 # @vega-ui/react-native
 
+## 0.5.2
+
+### Patch Changes
+
+- 10dcbe8: The gray colors have been changed, the surface has been added, and the fields styles have also been changed
+- Updated dependencies [10dcbe8]
+  - @vega-ui/tokens@0.5.2
+  - @vega-ui/theme@0.5.2
+  - @vega-ui/icons-react-native@0.5.2
+  - @vega-ui/reanimated-icons@0.5.2
+
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies [cff8d2c]
+  - @vega-ui/theme@0.5.1
+  - @vega-ui/icons-react-native@0.5.1
+  - @vega-ui/reanimated-icons@0.5.1
+  - @vega-ui/tokens@0.5.1
+
+## 0.5.0
+
+### Minor Changes
+
+- b19c4f8: Added new sizes for button and icon button - xl, xs
+
+### Patch Changes
+
+- Updated dependencies [b19c4f8]
+  - @vega-ui/tokens@0.5.0
+  - @vega-ui/theme@0.5.0
+  - @vega-ui/icons-react-native@0.5.0
+  - @vega-ui/reanimated-icons@0.5.0
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vega-ui/react-native",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "Vega UI - React Native",
   "license": "MIT",
   "author": "VegaUI Team",
@@ -55,7 +55,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-native": "^0.79.4",
-    "react-native-reanimated": "~3.17.5",
+    "react-native-reanimated": "~4.1.2",
     "react-native-svg": "^15.12.0"
   },
   "publishConfig": {
diff --git a/packages/ui/src/components/BaseButton/styles/getButtonStyles.ts b/packages/ui/src/components/BaseButton/styles/getButtonStyles.ts
@@ -65,7 +65,7 @@ export const getButtonStyles = (theme?: Theme) => {
         backgroundColor: 'transparent',
       },
       pressed: {
-        backgroundColor: primary[50],
+        backgroundColor: primary[100],
       },
       disabled: {
         backgroundColor: 'transparent',
@@ -122,7 +122,7 @@ export const getButtonStyles = (theme?: Theme) => {
         backgroundColor: 'transparent',
       },
       pressed: {
-        backgroundColor: secondary[50],
+        backgroundColor: secondary[100],
       },
       disabled: {
         backgroundColor: 'transparent',
diff --git a/packages/ui/src/components/TextField/components/TextFieldWrapper/TextFieldWrapper.tsx b/packages/ui/src/components/TextField/components/TextFieldWrapper/TextFieldWrapper.tsx
@@ -4,7 +4,6 @@ import { TextFieldSize } from '../../types.ts';
 import { useTextFieldWrapperStyle } from './hooks';
 import Animated, { SharedValue } from 'react-native-reanimated';
 import { useTextFieldAnimations, useTextFieldStyles } from '../../hooks';
-import { useTheme } from '@vega-ui/theme';
 
 export interface TextFieldWrapperProps extends ViewProps {
   size: TextFieldSize
@@ -41,6 +40,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     borderStyle: 'solid',
     borderWidth: 1,
-    backgroundColor: 'transparent',
+    borderColor: 'transparent',
   }
 })
diff --git a/packages/ui/src/components/TextField/hooks/useTextFieldAnimations.ts b/packages/ui/src/components/TextField/hooks/useTextFieldAnimations.ts
@@ -22,7 +22,7 @@ export const useTextFieldAnimations = ({
   focused,
 }: UseTextFieldAnimationsOptions) => {
   const animatedStyle = useAnimatedStyle(() => {
-    if (disabled || error) return mergeStyles(disabled && disabledStyle, error && errorStyle)
+    if (disabled || error) return mergeStyles(error && errorStyle, disabled && disabledStyle)
     return mergeInterpolateColor([enabledStyle, activeStyle], focused)
   })
   
diff --git a/packages/ui/src/components/TextField/styles/getTextFieldVariantStyle.ts b/packages/ui/src/components/TextField/styles/getTextFieldVariantStyle.ts
@@ -9,22 +9,22 @@ export interface TextFieldStatesStyle {
 }
 
 export const getTextFieldVariantStyle = (theme: Theme): TextFieldStatesStyle => {
-  const { field, disable, surface, primary, red } = theme
+  const { field, disable, primary, red } = theme
   
   return {
     enabled: {
-      borderColor: field.border,
-      backgroundColor: surface.foreground,
+      borderColor: 'transparent',
+      backgroundColor: field.backgroundColor,
     },
     active: {
-      backgroundColor: surface.foreground,
+      backgroundColor: field.backgroundColor,
       borderColor: primary[500],
     },
     disabled: {
-      borderColor: field.border,
       backgroundColor: disable.background,
     },
     error: {
+      backgroundColor: field.backgroundColor,
       borderColor: red[500],
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@vega-ui/icons-react-native",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.5.2",`
`4`	`4`	`"description": "Vega UI - Icons (React Native)",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"author": "VegaUI Team",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@vega-ui/reanimated-icons",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.5.2",`
`4`	`4`	`"description": "Vega UI - Reanimated Icons (React Native)",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"author": "VegaUI Team",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@vega-ui/theme",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.5.2",`
`4`	`4`	`"description": "Vega UI - Theme for React apps",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"author": "VegaUI Team",`