ARTICLE AD BOX
As you see the styles are lined out
i'm using react with vite as you see it's not typescript either buttons are working somehow
i asked some ai's but i didn't get it worked
included codes:
PrimaryButton.jsx - component some of the styles working
Welcome.jsx - page mostly colors not working i didn't check the sizes maybe they're working
ChakraProvider.jsx - componenet which comes with chakra ui
main.jsx - all the setup is in there i setted up chakraprovider but it'snot fixing the problem
theme.js - config where i save all the variables as you know, and they're getting ignored by chakra ui
package.json - to check the dependency versions
import { Button as ChakraButton } from "@chakra-ui/react"; const PrimaryButton = ({ children, variant = "primary", ...props }) => { return ( <ChakraButton bg="brand.main" color="text.light" fontSize="md" borderRadius="xl" width={{ base: "100%", sm: "280px", md: "320px", }} maxW="320px" _hover={{ bg: "brand.600", boxShadow: "lg", transition: "all 0.2s ease-in-out", }} _active={{ transform: "translateY(0px)", boxShadow: "md", }} _focus={{ boxShadow: "outline", }} transition="all 0.2s ease-in-out" {...props} > {children} </ChakraButton> ); }; export default PrimaryButton; import PrimaryButton from "@/components/PrimaryButton"; import { Box, Container, Flex, Image, Text } from "@chakra-ui/react"; import React from "react"; import { useNavigate } from "react-router-dom"; const Welcome = () => { const navigate = useNavigate(); return ( <Box bg="bg.primary"> <Container maxW="xl"> <Flex flexDirection={"column"} justifyContent={"space-between"} alignItems={"baseline"} > <Flex flexDirection={"column"} justifyContent={"space-between"} alignItems={"baseline"} > <Image src={"/images/logo-rounded.svg"} w={"100px"} /> <Text fontSize={"xl"} fontWeight={"semibold"}> Welcome </Text> </Flex> <PrimaryButton onClick={() => navigate("/register")}>Start</PrimaryButton> </Flex> </Container> </Box> ); }; export default Welcome; import { ChakraProvider } from '@chakra-ui/react' import { ThemeProvider } from 'next-themes' import { system } from '@/theme' export function Provider(props) { return ( <ChakraProvider value={system}> <ThemeProvider attribute='class'>{props.children}</ThemeProvider> </ChakraProvider> ) } import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { Provider } from '@/components/ui/provider' import App from './App.jsx' createRoot(document.getElementById('root')).render( <StrictMode> <Provider> <App /> </Provider> </StrictMode>, ) import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"; const config = defineConfig({ theme: { tokens: { sizes: { container: { xs: {value: "320px"}, sm: { value: "640px" }, md: { value: "768px" }, lg: { value: "1024px" }, xl: { value: "1440px" }, }, }, colors: { brand: { main: { value: "#3188E1" }, 50: { value: "#EFF6FF" }, 100: { value: "#DBEAFE" }, 600: { value: "#2563EB" }, }, text: { dark: { value: "#1F1F1F" }, light: { value: "#F1F1F1" }, timer: { value: "#8C8C8C" }, }, product: { bread: { value: "#FFF9E6" }, milk: { value: "#F0F9FF" }, yogurt: { value: "#F5F0FF" }, cream: { value: "#FFF5F0" }, breadDark: { value: "#2C261F" }, milkDark: { value: "#1A2835" }, yogurtDark: { value: "#2A2233" }, creamDark: { value: "#352724" }, }, semantic: { success: { value: "#10B981" }, error: { value: "#EF4444" }, warning: { value: "#F59E0B" }, }, surface: { dark: { value: "#121212" }, }, accent: { orange: { value: "#FF4D00" }, orange50: { value: "#FFF5F0" }, orange100: { value: "#FFE8D6" }, orange600: { value: "#E63E00" }, yellow: { value: "#FFEC73" }, yellow50: { value: "#FFFBE6" }, yellow100: { value: "#FFF7CC" }, yellow600: { value: "#FFD700" }, lightBlue: { value: "#62D3FF" }, blue: {value: "#377EDA" }, yellowLight: { value: "#FFF490" }, yellowBorder: { value: "#FBC02D" }, orangeDark: { value: "#E65100" }, blueLightAlt: { value: "#90CAF9" }, blueBorder: { value: "#1976D2" }, blueDarkAlt: { value: "#0D47A1" } }, }, fonts: { heading: { value: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", }, body: { value: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", }, mono: { value: "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace", }, }, fontSizes: { sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.125rem" }, xl: { value: "1.25rem" }, "2xl": { value: "1.5rem" }, "3xl": { value: "1.875rem" }, "4xl": { value: "2.25rem" }, }, fontWeights: { normal: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, extrabold: { value: "800" }, black: { value: "900" }, }, radius: { md: { value: "0.5rem" }, lg: { value: "0.75rem" }, xl: { value: "1rem" }, "2xl": { value: "1.5rem" }, full: { value: "9999px" }, }, }, semanticTokens: { colors: { "bg.primary": { default: { value: "#FFFAFA" }, _dark: { value: "#1A202C" }, }, "bg.secondary": { default: { value: "#F7FAFC" }, _dark: { value: "#2D3748" }, }, "text.primary": { default: { value: "{colors.text.dark}" }, _dark: { value: "{colors.text.light}" }, }, "text.timer": { value: "{colors.text.timer}", }, "button.primary.bg": { default: { value: "{colors.brand.main}" }, _dark: { value: "{colors.brand.600}" }, }, "button.primary.text": { value: "#F1F1F1", }, "product.bread.bg": { default: { value: "{colors.product.bread}" }, _dark: { value: "{colors.product.breadDark}" }, }, "product.milk.bg": { default: { value: "{colors.product.milk}" }, _dark: { value: "{colors.product.milkDark}" }, }, "product.yogurt.bg": { default: { value: "{colors.product.yogurt}" }, _dark: { value: "{colors.product.yogurtDark}" }, }, "product.cream.bg": { default: { value: "{colors.product.cream}" }, _dark: { value: "{colors.product.creamDark}" }, }, }, fontSizes: { "hero.title": { value: "{fontSizes.4xl}" }, "section.title": { value: "{fontSizes.2xl}" }, "button.text": { value: "{fontSizes.md}" }, }, fontWeights: { "hero.title": { value: "{fontWeights.extrabold}" }, "section.title": { value: "{fontWeights.bold}" }, "button.text": { value: "{fontWeights.medium}" }, }, }, }, globalCss: { "html, body": { fontFamily: "{fonts.body}", backgroundColor: "bg.primary", color: "text.primary", }, h1: { fontFamily: "{fonts.heading}", fontWeight: "{fontWeights.extrabold}", }, h2: { fontFamily: "{fonts.heading}", fontWeight: "{fontWeights.bold}", }, button: { fontFamily: "{fonts.body}", fontWeight: "{fontWeights.medium}", }, }, }); export const system = createSystem(defaultConfig, config); { "name": "testing", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@chakra-ui/react": "^3.30.0", "@emotion/react": "^11.14.0", "next-themes": "^0.4.6", "react": "^19.2.0", "react-dom": "^19.2.0", "react-icons": "^5.5.0", "react-router-dom": "^7.12.0" }, "devDependencies": { "@eslint/js": "^9.39.1", "@types/react": "^19.2.5", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.1", "eslint": "^9.39.1", "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-refresh": "^0.4.24", "globals": "^16.5.0", "vite": "^7.2.4", "vite-tsconfig-paths": "^6.0.3" } }