Pagination buttons styles

src/theme/colors.ts

@@ -280,7 +280,11 @@ export const colors = {
     dark: colorsBase.gray.normal,
   },
   org_text_secondary: colorsBase.gray.normal,
-
+  page_button: {
+    active: '#cce5de',
+    light: colorsBase.white.dark,
+    dark: colorsBase.blue.dark,
+  },
   process: {
     aside: {
       bg: colorsBase.gradient,

src/theme/components/pagination.ts

@@ -1,4 +1,4 @@
-import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { createMultiStyleConfigHelpers, defineStyle, defineStyleConfig } from '@chakra-ui/react'
 import { PaginationAnatomy } from '@vocdoni/chakra-components'
 
 const { defineMultiStyleConfig: defineVoteWeightTipStyle, definePartsStyle: defineVoteWeightParts } =
@@ -19,3 +19,26 @@ export const Pagination = defineVoteWeightTipStyle({
     totalResults: {},
   }),
 })
+
+const pageButtonBaseStyle = {
+  bgColor: 'transparent !important',
+  color: 'black',
+  borderColor: 'black',
+
+  _hover: {
+    color: 'black',
+    bgColor: 'page_button.light !important',
+  },
+
+  _dark: {
+    color: 'black',
+  },
+
+  _active: {
+    bgColor: 'page_button.active !important',
+  },
+}
+
+export const PageButton = defineStyleConfig({
+  baseStyle: pageButtonBaseStyle,
+})

src/theme/index.ts

@@ -13,7 +13,7 @@ import { ElectionTitle, Heading } from './components/heading'
 import { Input } from './components/input'
 import { Link } from './components/link'
 import { Modal } from './components/modal'
-import { Pagination } from './components/pagination'
+import { PageButton, Pagination } from './components/pagination'
 import { ElectionQuestions } from './components/Questions'
 import { Radio } from './components/radio'
 import { ElectionResults } from './components/results'
@@ -104,6 +104,7 @@ export const theme = extendTheme(vtheme, {
     Link,
     Menu,
     Modal,
+    PageButton,
     Pagination,
     Radio,
     Stepper,