generated from fahricansecer/boilerplate-fe
Initial commit
This commit is contained in:
275
src/components/ui/typography/prose.tsx
Normal file
275
src/components/ui/typography/prose.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
'use client';
|
||||
|
||||
import { chakra } from '@chakra-ui/react';
|
||||
|
||||
const TRAILING_PSEUDO_REGEX = /(::?[\w-]+(?:\([^)]*\))?)+$/;
|
||||
const EXCLUDE_CLASSNAME = '.not-prose';
|
||||
function inWhere<T extends string>(selector: T): T {
|
||||
const rebuiltSelector = selector.startsWith('& ') ? selector.slice(2) : selector;
|
||||
const match = selector.match(TRAILING_PSEUDO_REGEX);
|
||||
const pseudo = match ? match[0] : '';
|
||||
const base = match ? selector.slice(0, -match[0].length) : rebuiltSelector;
|
||||
return `& :where(${base}):not(${EXCLUDE_CLASSNAME}, ${EXCLUDE_CLASSNAME} *)${pseudo}` as T;
|
||||
}
|
||||
|
||||
export const Prose = chakra('div', {
|
||||
base: {
|
||||
color: 'fg.muted',
|
||||
maxWidth: '65ch',
|
||||
fontSize: 'sm',
|
||||
lineHeight: '1.7em',
|
||||
[inWhere('& p')]: {
|
||||
marginTop: '1em',
|
||||
marginBottom: '1em',
|
||||
},
|
||||
[inWhere('& blockquote')]: {
|
||||
marginTop: '1.285em',
|
||||
marginBottom: '1.285em',
|
||||
paddingInline: '1.285em',
|
||||
borderInlineStartWidth: '0.25em',
|
||||
color: 'fg',
|
||||
},
|
||||
[inWhere('& a')]: {
|
||||
color: 'fg',
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: '3px',
|
||||
textDecorationThickness: '2px',
|
||||
textDecorationColor: 'border.muted',
|
||||
fontWeight: '500',
|
||||
},
|
||||
[inWhere('& strong')]: {
|
||||
fontWeight: '600',
|
||||
},
|
||||
[inWhere('& a strong')]: {
|
||||
color: 'inherit',
|
||||
},
|
||||
[inWhere('& h1')]: {
|
||||
fontSize: '2.15em',
|
||||
letterSpacing: '-0.02em',
|
||||
marginTop: '0',
|
||||
marginBottom: '0.8em',
|
||||
lineHeight: '1.2em',
|
||||
},
|
||||
[inWhere('& h2')]: {
|
||||
fontSize: '1.4em',
|
||||
letterSpacing: '-0.02em',
|
||||
marginTop: '1.6em',
|
||||
marginBottom: '0.8em',
|
||||
lineHeight: '1.4em',
|
||||
},
|
||||
[inWhere('& h3')]: {
|
||||
fontSize: '1.285em',
|
||||
letterSpacing: '-0.01em',
|
||||
marginTop: '1.5em',
|
||||
marginBottom: '0.4em',
|
||||
lineHeight: '1.5em',
|
||||
},
|
||||
[inWhere('& h4')]: {
|
||||
marginTop: '1.4em',
|
||||
marginBottom: '0.5em',
|
||||
letterSpacing: '-0.01em',
|
||||
lineHeight: '1.5em',
|
||||
},
|
||||
[inWhere('& img')]: {
|
||||
marginTop: '1.7em',
|
||||
marginBottom: '1.7em',
|
||||
borderRadius: 'lg',
|
||||
boxShadow: 'inset',
|
||||
},
|
||||
[inWhere('& picture')]: {
|
||||
marginTop: '1.7em',
|
||||
marginBottom: '1.7em',
|
||||
},
|
||||
[inWhere('& picture > img')]: {
|
||||
marginTop: '0',
|
||||
marginBottom: '0',
|
||||
},
|
||||
[inWhere('& video')]: {
|
||||
marginTop: '1.7em',
|
||||
marginBottom: '1.7em',
|
||||
},
|
||||
[inWhere('& kbd')]: {
|
||||
fontSize: '0.85em',
|
||||
borderRadius: 'xs',
|
||||
paddingTop: '0.15em',
|
||||
paddingBottom: '0.15em',
|
||||
paddingInlineEnd: '0.35em',
|
||||
paddingInlineStart: '0.35em',
|
||||
fontFamily: 'inherit',
|
||||
color: 'fg.muted',
|
||||
'--shadow': 'colors.border',
|
||||
boxShadow: '0 0 0 1px var(--shadow),0 1px 0 1px var(--shadow)',
|
||||
},
|
||||
[inWhere('& code')]: {
|
||||
fontSize: '0.925em',
|
||||
letterSpacing: '-0.01em',
|
||||
borderRadius: 'md',
|
||||
borderWidth: '1px',
|
||||
padding: '0.25em',
|
||||
},
|
||||
[inWhere('& pre code')]: {
|
||||
fontSize: 'inherit',
|
||||
letterSpacing: 'inherit',
|
||||
borderWidth: 'inherit',
|
||||
padding: '0',
|
||||
},
|
||||
[inWhere('& h2 code')]: {
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
[inWhere('& h3 code')]: {
|
||||
fontSize: '0.8em',
|
||||
},
|
||||
[inWhere('& pre')]: {
|
||||
backgroundColor: 'bg.subtle',
|
||||
marginTop: '1.6em',
|
||||
marginBottom: '1.6em',
|
||||
borderRadius: 'md',
|
||||
fontSize: '0.9em',
|
||||
paddingTop: '0.65em',
|
||||
paddingBottom: '0.65em',
|
||||
paddingInlineEnd: '1em',
|
||||
paddingInlineStart: '1em',
|
||||
overflowX: 'auto',
|
||||
fontWeight: '400',
|
||||
},
|
||||
[inWhere('& ol')]: {
|
||||
marginTop: '1em',
|
||||
marginBottom: '1em',
|
||||
paddingInlineStart: '1.5em',
|
||||
},
|
||||
[inWhere('& ul')]: {
|
||||
marginTop: '1em',
|
||||
marginBottom: '1em',
|
||||
paddingInlineStart: '1.5em',
|
||||
},
|
||||
[inWhere('& li')]: {
|
||||
marginTop: '0.285em',
|
||||
marginBottom: '0.285em',
|
||||
},
|
||||
[inWhere('& ol > li')]: {
|
||||
paddingInlineStart: '0.4em',
|
||||
listStyleType: 'decimal',
|
||||
'&::marker': {
|
||||
color: 'fg.muted',
|
||||
},
|
||||
},
|
||||
[inWhere('& ul > li')]: {
|
||||
paddingInlineStart: '0.4em',
|
||||
listStyleType: 'disc',
|
||||
'&::marker': {
|
||||
color: 'fg.muted',
|
||||
},
|
||||
},
|
||||
[inWhere('& > ul > li p')]: {
|
||||
marginTop: '0.5em',
|
||||
marginBottom: '0.5em',
|
||||
},
|
||||
[inWhere('& > ul > li > p:first-of-type')]: {
|
||||
marginTop: '1em',
|
||||
},
|
||||
[inWhere('& > ul > li > p:last-of-type')]: {
|
||||
marginBottom: '1em',
|
||||
},
|
||||
[inWhere('& > ol > li > p:first-of-type')]: {
|
||||
marginTop: '1em',
|
||||
},
|
||||
[inWhere('& > ol > li > p:last-of-type')]: {
|
||||
marginBottom: '1em',
|
||||
},
|
||||
[inWhere('& ul ul, ul ol, ol ul, ol ol')]: {
|
||||
marginTop: '0.5em',
|
||||
marginBottom: '0.5em',
|
||||
},
|
||||
[inWhere('& dl')]: {
|
||||
marginTop: '1em',
|
||||
marginBottom: '1em',
|
||||
},
|
||||
[inWhere('& dt')]: {
|
||||
fontWeight: '600',
|
||||
marginTop: '1em',
|
||||
},
|
||||
[inWhere('& dd')]: {
|
||||
marginTop: '0.285em',
|
||||
paddingInlineStart: '1.5em',
|
||||
},
|
||||
[inWhere('& hr')]: {
|
||||
marginTop: '2.25em',
|
||||
marginBottom: '2.25em',
|
||||
},
|
||||
[inWhere('& :is(h1,h2,h3,h4,h5,hr) + *')]: {
|
||||
marginTop: '0',
|
||||
},
|
||||
[inWhere('& table')]: {
|
||||
width: '100%',
|
||||
tableLayout: 'auto',
|
||||
textAlign: 'start',
|
||||
lineHeight: '1.5em',
|
||||
marginTop: '2em',
|
||||
marginBottom: '2em',
|
||||
},
|
||||
[inWhere('& thead')]: {
|
||||
borderBottomWidth: '1px',
|
||||
color: 'fg',
|
||||
},
|
||||
[inWhere('& tbody tr')]: {
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomColor: 'border',
|
||||
},
|
||||
[inWhere('& thead th')]: {
|
||||
paddingInlineEnd: '1em',
|
||||
paddingBottom: '0.65em',
|
||||
paddingInlineStart: '1em',
|
||||
fontWeight: 'medium',
|
||||
textAlign: 'start',
|
||||
},
|
||||
[inWhere('& thead th:first-of-type')]: {
|
||||
paddingInlineStart: '0',
|
||||
},
|
||||
[inWhere('& thead th:last-of-type')]: {
|
||||
paddingInlineEnd: '0',
|
||||
},
|
||||
[inWhere('& tbody td, tfoot td')]: {
|
||||
paddingTop: '0.65em',
|
||||
paddingInlineEnd: '1em',
|
||||
paddingBottom: '0.65em',
|
||||
paddingInlineStart: '1em',
|
||||
},
|
||||
[inWhere('& tbody td:first-of-type, tfoot td:first-of-type')]: {
|
||||
paddingInlineStart: '0',
|
||||
},
|
||||
[inWhere('& tbody td:last-of-type, tfoot td:last-of-type')]: {
|
||||
paddingInlineEnd: '0',
|
||||
},
|
||||
[inWhere('& figure')]: {
|
||||
marginTop: '1.625em',
|
||||
marginBottom: '1.625em',
|
||||
},
|
||||
[inWhere('& figure > *')]: {
|
||||
marginTop: '0',
|
||||
marginBottom: '0',
|
||||
},
|
||||
[inWhere('& figcaption')]: {
|
||||
fontSize: '0.85em',
|
||||
lineHeight: '1.25em',
|
||||
marginTop: '0.85em',
|
||||
color: 'fg.muted',
|
||||
},
|
||||
[inWhere('& h1, h2, h3, h4')]: {
|
||||
color: 'fg',
|
||||
fontWeight: '600',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
md: {
|
||||
fontSize: 'sm',
|
||||
},
|
||||
lg: {
|
||||
fontSize: 'md',
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user