Prev Next
Component for rendering PrevNext
navigation links.
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
docs: {
prevNext: {
gap: '{space.8}',
padding: '{space.6}',
backgroundColor: {
initial: '{color.gray.50}',
dark: '{color.gray.900}'
},
borderRadius: '{radii.2xs}',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: {
initial: '{color.gray.200}',
dark: '{color.gray.800}'
},
boxShadow: {
static: {
initial: 'none',
dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.xs}'
},
hover: {
initial: 'none',
dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.lg}'
}
},
title: {
color: {
hover: '{color.primary.500}'
},
fontWeight: '{fontWeight.medium}',
marginBottom: '{space.2}'
},
directory: {
marginBottom: '{space.3}',
fontSize: '{text.xs.fontSize}',
lineHeight: '{text.xs.lineHeight}',
fontWeight: '{fontWeight.medium}',
color: '{color.gray.500}'
},
icon: {
size: '{space.8}',
marginBottom: '{space.4}'
},
description: {
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
color: '{color.gray.500}'
}
}
},
}
})