github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-07 22:53:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: added card and modal component

Browse Source
This commit is contained in:
akhilmhdh
2023-01-21 22:55:03 +05:30
parent 606a5e5317
commit 89ba80740b
7 changed files with 399 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -1,3 +1,4 @@
node_modules node_modules
built built
healthcheck.js healthcheck.js
tailwind.config.js

8
frontend/src/components/v2/Card/Card.tsx
View File

@@ -34,6 +34,7 @@ export const CardBody = ({ children, className }: CardBodyProps) => (
export type CardProps = { export type CardProps = {
children: ReactNode; children: ReactNode;
className?: string;
isFullHeight?: boolean; isFullHeight?: boolean;
isRounded?: boolean; isRounded?: boolean;
isPlain?: boolean; isPlain?: boolean;
@@ -41,16 +42,17 @@ export type CardProps = {
}; };
export const Card = forwardRef<HTMLDivElement, CardProps>( export const Card = forwardRef<HTMLDivElement, CardProps>(
({ children, isFullHeight, isRounded, isHoverable, isPlain }, ref): JSX.Element => { ({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
return ( return (
<div <div
ref={ref} ref={ref}
className={twMerge( className={twMerge(
'flex flex-col w-full text-gray-200 bg-mineshaft shadow-md', 'flex flex-col w-full text-gray-200 bg-mineshaft-700 shadow-md',
isFullHeight && 'h-full', isFullHeight && 'h-full',
isRounded && 'rounded-md', isRounded && 'rounded-md',
isPlain && 'shadow-none', isPlain && 'shadow-none',
isHoverable && 'hover:shadow-xl' isHoverable && 'hover:shadow-xl',
className
)} )}
> >
{children} {children}

33
frontend/src/components/v2/Modal/Modal.stories.tsx Normal file
View File

@@ -0,0 +1,33 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta, StoryObj } from '@storybook/react';
import { Button } from '../Button';
import { Modal, ModalContent, ModalContentProps, ModalTrigger } from './Modal';
const meta: Meta<typeof Modal> = {
title: 'Components/Modal',
component: Modal,
tags: ['v2'],
argTypes: {}
};
export default meta;
type Story = StoryObj<typeof ModalContent>;
const Template = (args: ModalContentProps) => (
<Modal>
<ModalTrigger asChild>
<Button>Open</Button>
</ModalTrigger>
<ModalContent {...args}>Hello world</ModalContent>
</Modal>
);
export const Basic: Story = {
render: (args) => <Template {...args} />,
args: {
title: 'Title',
subTitle: 'Something as subtitle',
footerContent: 'footer content'
}
};

55
frontend/src/components/v2/Modal/Modal.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { forwardRef, ReactNode } from 'react';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { twMerge } from 'tailwind-merge';
import { Card, CardBody, CardFooter, CardTitle } from '../Card';
import { IconButton } from '../IconButton';
export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
title?: ReactNode;
subTitle?: string;
footerContent?: ReactNode;
};
export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
className="fixed inset-0 w-full h-full animate-fadeIn"
style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
/>
<DialogPrimitive.Content {...props} ref={forwardedRef}>
<Card
isRounded
className={twMerge(
'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
className
)}
>
{title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
<CardBody>{children}</CardBody>
{footerContent && <CardFooter>{footerContent}</CardFooter>}
<DialogPrimitive.Close aria-label="Close" asChild>
<IconButton
variant="plain"
ariaLabel="close"
className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
>
<FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
</IconButton>
</DialogPrimitive.Close>
</Card>
</DialogPrimitive.Content>
</DialogPrimitive.Portal>
)
);
ModalContent.displayName = 'ModalContent';
export const Modal = DialogPrimitive.Root;
export type ModalProps = DialogPrimitive.DialogProps;
export const ModalTrigger = DialogPrimitive.Trigger;
export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;

2
frontend/src/components/v2/Modal/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
export { Modal, ModalContent, ModalTrigger } from './Modal';

1
frontend/src/components/v2/index.tsx
View File

@@ -3,4 +3,5 @@ export * from './Card';
export * from './FormControl'; export * from './FormControl';
export * from './IconButton'; export * from './IconButton';
export * from './Input'; export * from './Input';
export * from './Modal';
export * from './Select'; export * from './Select';

595
frontend/tailwind.config.js
View File

@@ -1234,451 +1234,460 @@ const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: "class", darkMode: 'class',
content: [ content: ['./src/**/*.{js,ts,jsx,tsx}'],
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: { theme: {
extend: { extend: {
colors: { colors: {
// You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/ // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
primary: { primary: {
50: "#fcfdf7", 50: '#fcfdf7',
100: "#f8fcee", 100: '#f8fcee',
200: "#eef6d5", 200: '#eef6d5',
300: "#e3f1bc", 300: '#e3f1bc',
400: "#cfe78a", 400: '#cfe78a',
500: "#badc58", 500: '#badc58',
600: "#a7c64f", 600: '#a7c64f',
700: "#8ca542", 700: '#8ca542',
800: "#708435", 800: '#708435',
900: "#5b6c2b", 900: '#5b6c2b',
DEFAULT: "#badc58", DEFAULT: '#badc58'
}, },
grey: "#0d1117", grey: '#0d1117',
mineshaft: { mineshaft: {
50: "#f5f5f5", 50: '#f5f5f5',
100: "#ebebeb", 100: '#ebebeb',
200: "#ccccce", 200: '#ccccce',
300: "#adaeb0", 300: '#adaeb0',
400: "#707174", 400: '#707174',
500: "#323439", 500: '#323439',
600: "#2d2f33", 600: '#2d2f33',
700: "#26272b", 700: '#26272b',
800: "#1e1f22", 800: '#1e1f22',
900: "#19191c", 900: '#19191c',
DEFAULT: "#323439", DEFAULT: '#323439'
}, },
chicago: { chicago: {
50: "#f7f7f7", 50: '#f7f7f7',
100: "#efefef", 100: '#efefef',
200: "#d6d6d7", 200: '#d6d6d7',
300: "#bdbebf", 300: '#bdbebf',
400: "#8c8d8e", 400: '#8c8d8e',
500: "#5b5c5e", 500: '#5b5c5e',
600: "#525355", 600: '#525355',
700: "#444547", 700: '#444547',
800: "#373738", 800: '#373738',
900: "#2d2d2e", 900: '#2d2d2e',
DEFAULT: "#5b5c5e", DEFAULT: '#5b5c5e'
}, },
bunker: { bunker: {
50: "#f3f4f4", 50: '#f3f4f4',
100: "#e8e8e9", 100: '#e8e8e9',
200: "#c5c6c8", 200: '#c5c6c8',
300: "#a2a4a6", 300: '#a2a4a6',
400: "#5d5f64", 400: '#5d5f64',
500: "#171b21", 500: '#171b21',
600: "#15181e", 600: '#15181e',
700: "#111419", 700: '#111419',
800: "#0e1014", 800: '#0e1014',
900: "#0b0d10", 900: '#0b0d10',
DEFAULT: "#171B21", DEFAULT: '#171B21'
}, },
githubblack: "#020409", githubblack: '#020409',
blue2: "#130f40", blue2: '#130f40',
blue1: "#3498db", blue1: '#3498db',
yellow: { yellow: {
50: "#fefcf3", 50: '#fefcf3',
100: "#fef9e7", 100: '#fef9e7',
200: "#fcf0c3", 200: '#fcf0c3',
300: "#f9e79f", 300: '#f9e79f',
400: "#f5d657", 400: '#f5d657',
500: "#f1c40f", 500: '#f1c40f',
600: "#d9b00e", 600: '#d9b00e',
700: "#b5930b", 700: '#b5930b',
800: "#917609", 800: '#917609',
900: "#766007", 900: '#766007',
DEFAULT: "#f1c40f", DEFAULT: '#f1c40f'
}, },
red: { red: {
50: "#fef6f5", 50: '#fef6f5',
100: "#fdedec", 100: '#fdedec',
200: "#f9d2ce", 200: '#f9d2ce',
300: "#f5b7b1", 300: '#f5b7b1',
400: "#ee8277", 400: '#ee8277',
500: "#e74c3c", 500: '#e74c3c',
600: "#d04436", 600: '#d04436',
700: "#ad392d", 700: '#ad392d',
800: "#8b2e24", 800: '#8b2e24',
900: "#71251d", 900: '#71251d',
DEFAULT: "#e74c3c", DEFAULT: '#e74c3c'
}, },
orange: "#f39c12", orange: '#f39c12',
green: { green: {
50: "#f5fcf8", 50: '#f5fcf8',
100: "#eafaf1", 100: '#eafaf1',
200: "#cbf2dc", 200: '#cbf2dc',
300: "#abebc6", 300: '#abebc6',
400: "#6ddb9c", 400: '#6ddb9c',
500: "#2ecc71", 500: '#2ecc71',
600: "#29b866", 600: '#29b866',
700: "#239955", 700: '#239955',
800: "#1c7a44", 800: '#1c7a44',
900: "#176437", 900: '#176437',
DEFAULT: "#2ecc71", DEFAULT: '#2ecc71'
}, }
}, }
}, },
keyframes: { keyframes: {
type: { type: {
"0%": { transform: "translateX(0ch)" }, '0%': { transform: 'translateX(0ch)' },
"5%, 10%": { transform: "translateX(1ch)" }, '5%, 10%': { transform: 'translateX(1ch)' },
"15%, 20%": { transform: "translateX(2ch)" }, '15%, 20%': { transform: 'translateX(2ch)' },
"25%, 30%": { transform: "translateX(3ch)" }, '25%, 30%': { transform: 'translateX(3ch)' },
"35%, 40%": { transform: "translateX(4ch)" }, '35%, 40%': { transform: 'translateX(4ch)' },
"45%, 50%": { transform: "translateX(5ch)" }, '45%, 50%': { transform: 'translateX(5ch)' },
"55%, 60%": { transform: "translateX(6ch)" }, '55%, 60%': { transform: 'translateX(6ch)' },
"65%, 70%": { transform: "translateX(7ch)" }, '65%, 70%': { transform: 'translateX(7ch)' },
"75%, 80%": { transform: "translateX(8ch)" }, '75%, 80%': { transform: 'translateX(8ch)' },
"85%, 90%": { transform: "translateX(9ch)" }, '85%, 90%': { transform: 'translateX(9ch)' },
"95%, 100%": { transform: "translateX(11ch)" }, '95%, 100%': { transform: 'translateX(11ch)' }
}, },
fadeIn: { fadeIn: {
"0%": { opacity: 0 }, '0%': { opacity: 0 },
"100%": { opacity: 1 }, '100%': { opacity: 1 }
},
popIn: {
from: {
opacity: 0,
transform: 'translate(-50%, -48%) scale(0.96)'
},
to: {
opacity: 1,
transform: 'translate(-50%, -50%) scale(1)'
}
}, },
spin: { spin: {
"0%": { transform: "rotate(0deg)" }, '0%': { transform: 'rotate(0deg)' },
"40%": { transform: "rotate(360deg)" }, '40%': { transform: 'rotate(360deg)' },
"100%": { transform: "rotate(360deg)" }, '100%': { transform: 'rotate(360deg)' }
}, },
bounce: { bounce: {
"0%": { transform: "translateY(-90%)" }, '0%': { transform: 'translateY(-90%)' },
"100%": { transform: "translateY(-100%)" }, '100%': { transform: 'translateY(-100%)' }
}, },
wiggle: { wiggle: {
"0%, 100%": { transform: "rotate(-3deg)" }, '0%, 100%': { transform: 'rotate(-3deg)' },
"50%": { transform: "rotate(3deg)" }, '50%': { transform: 'rotate(3deg)' }
}, },
ping: { ping: {
"75%, 100%": { '75%, 100%': {
transform: "scale(2)", transform: 'scale(2)',
opacity: 0, opacity: 0
}, }
}, },
popup: { popup: {
"0%": { '0%': {
transform: "scale(0.2)", transform: 'scale(0.2)',
opacity: 0, opacity: 0
// transform: "translateY(120%)", // transform: "translateY(120%)",
}, },
"100%": { '100%': {
transform: "scale(1)", transform: 'scale(1)',
opacity: 1, opacity: 1
// transform: "translateY(100%)", // transform: "translateY(100%)",
}, }
}, },
popright: { popright: {
"0%": { '0%': {
transform: "translateX(-100%)", transform: 'translateX(-100%)'
},
"100%": {
transform: "translateX(0%)",
}, },
'100%': {
transform: 'translateX(0%)'
}
}, },
popleft: { popleft: {
"0%": { '0%': {
transform: "translateX(100%)", transform: 'translateX(100%)'
},
"100%": {
transform: "translateX(0%)",
}, },
'100%': {
transform: 'translateX(0%)'
}
}, },
popdown: { popdown: {
"0%": { '0%': {
transform: "scale(0.2)", transform: 'scale(0.2)',
opacity: 0, opacity: 0
// transform: "translateY(80%)", // transform: "translateY(80%)",
}, },
"100%": { '100%': {
transform: "scale(1)", transform: 'scale(1)',
opacity: 1, opacity: 1
// transform: "translateY(100%)", // transform: "translateY(100%)",
}, }
}, }
}, },
animation: { animation: {
fadeIn: "fadeIn 1000ms ease-in-out", fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
bounce: "bounce 1000ms ease-in-out infinite", bounce: 'bounce 1000ms ease-in-out infinite',
spin: "spin 4000ms ease-in-out infinite", spin: 'spin 4000ms ease-in-out infinite',
cursor: "cursor .6s linear infinite alternate", cursor: 'cursor .6s linear infinite alternate',
type: "type 2.7s ease-out .8s infinite alternate both", type: 'type 2.7s ease-out .8s infinite alternate both',
"type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both", 'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
wiggle: "wiggle 200ms ease-in-out", wiggle: 'wiggle 200ms ease-in-out',
ping: "ping 1000ms ease-in-out infinite", ping: 'ping 1000ms ease-in-out infinite',
popup: "popup 300ms ease-in-out", popup: 'popup 300ms ease-in-out',
popdown: "popdown 300ms ease-in-out", popdown: 'popdown 300ms ease-in-out',
popright: "popright 100ms ease-in-out", popright: 'popright 100ms ease-in-out',
popleft: "popleft 100ms ease-in-out", popleft: 'popleft 100ms ease-in-out',
popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);'
}, },
fontSize: { fontSize: {
xxxs: ".23rem", xxxs: '.23rem',
xxs: ".5rem", xxs: '.5rem',
xs: ".75rem", xs: '.75rem',
sm: ".875rem", sm: '.875rem',
base: "1rem", base: '1rem',
lg: "1.125rem", lg: '1.125rem',
xl: "1.25rem", xl: '1.25rem',
"2xl": "1.5rem", '2xl': '1.5rem',
"3xl": "1.875rem", '3xl': '1.875rem',
"4xl": "2.25rem", '4xl': '2.25rem',
"5xl": "3rem", '5xl': '3rem',
"6xl": "4rem", '6xl': '4rem',
"7xl": "5rem", '7xl': '5rem',
"8xl": "6rem", '8xl': '6rem',
"9xl": "7rem", '9xl': '7rem'
}, },
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: [ css: [
{ {
color: "var(--tw-prose-body)", color: 'var(--tw-prose-body)',
maxWidth: "65ch", maxWidth: '65ch',
'[class~="lead"]': { '[class~="lead"]': {
color: "var(--tw-prose-lead)", color: 'var(--tw-prose-lead)'
}, },
a: { a: {
color: colors.gray[200], color: colors.gray[200],
textDecoration: "underline", textDecoration: 'underline',
fontWeight: "500", fontWeight: '500'
}, },
strong: { strong: {
color: colors.gray[200], color: colors.gray[200],
fontWeight: "600", fontWeight: '600'
}, },
"a strong": { 'a strong': {
color: "inherit", color: 'inherit'
}, },
"blockquote strong": { 'blockquote strong': {
color: "inherit", color: 'inherit'
}, },
"thead th strong": { 'thead th strong': {
color: "inherit", color: 'inherit'
}, },
ol: { ol: {
listStyleType: "decimal", listStyleType: 'decimal'
}, },
'ol[type="A"]': { 'ol[type="A"]': {
listStyleType: "upper-alpha", listStyleType: 'upper-alpha'
}, },
'ol[type="a"]': { 'ol[type="a"]': {
listStyleType: "lower-alpha", listStyleType: 'lower-alpha'
}, },
'ol[type="A" s]': { 'ol[type="A" s]': {
listStyleType: "upper-alpha", listStyleType: 'upper-alpha'
}, },
'ol[type="a" s]': { 'ol[type="a" s]': {
listStyleType: "lower-alpha", listStyleType: 'lower-alpha'
}, },
'ol[type="I"]': { 'ol[type="I"]': {
listStyleType: "upper-roman", listStyleType: 'upper-roman'
}, },
'ol[type="i"]': { 'ol[type="i"]': {
listStyleType: "lower-roman", listStyleType: 'lower-roman'
}, },
'ol[type="I" s]': { 'ol[type="I" s]': {
listStyleType: "upper-roman", listStyleType: 'upper-roman'
}, },
'ol[type="i" s]': { 'ol[type="i" s]': {
listStyleType: "lower-roman", listStyleType: 'lower-roman'
}, },
'ol[type="1"]': { 'ol[type="1"]': {
listStyleType: "decimal", listStyleType: 'decimal'
}, },
ul: { ul: {
listStyleType: "disc", listStyleType: 'disc'
}, },
"ol > li::marker": { 'ol > li::marker': {
fontWeight: "400", fontWeight: '400',
color: "var(--tw-prose-counters)", color: 'var(--tw-prose-counters)'
}, },
"ul > li::marker": { 'ul > li::marker': {
color: "var(--tw-prose-bullets)", color: 'var(--tw-prose-bullets)'
}, },
hr: { hr: {
borderColor: "var(--tw-prose-hr)", borderColor: 'var(--tw-prose-hr)',
borderTopWidth: 1, borderTopWidth: 1
}, },
blockquote: { blockquote: {
fontWeight: "500", fontWeight: '500',
fontStyle: "italic", fontStyle: 'italic',
color: "var(--tw-prose-quotes)", color: 'var(--tw-prose-quotes)',
borderLeftWidth: "0.25rem", borderLeftWidth: '0.25rem',
borderLeftColor: "var(--tw-prose-quote-borders)", borderLeftColor: 'var(--tw-prose-quote-borders)',
quotes: '"\\201C""\\201D""\\2018""\\2019"', quotes: '"\\201C""\\201D""\\2018""\\2019"'
}, },
"blockquote p:first-of-type::before": { 'blockquote p:first-of-type::before': {
content: "open-quote", content: 'open-quote'
}, },
"blockquote p:last-of-type::after": { 'blockquote p:last-of-type::after': {
content: "close-quote", content: 'close-quote'
}, },
h1: { h1: {
color: colors.gray[200], color: colors.gray[200],
fontWeight: "800", fontWeight: '800'
}, },
"h1 strong": { 'h1 strong': {
fontWeight: "900", fontWeight: '900',
color: "inherit", color: 'inherit'
}, },
h2: { h2: {
color: colors.gray[200], color: colors.gray[200],
fontWeight: "700", fontWeight: '700'
}, },
"h2 strong": { 'h2 strong': {
fontWeight: "800", fontWeight: '800',
color: "inherit", color: 'inherit'
}, },
h3: { h3: {
color: colors.gray[300], color: colors.gray[300],
fontWeight: "600", fontWeight: '600'
}, },
"h3 strong": { 'h3 strong': {
fontWeight: "700", fontWeight: '700',
color: "inherit", color: 'inherit'
}, },
h4: { h4: {
color: colors.gray[400], color: colors.gray[400],
fontWeight: "600", fontWeight: '600'
}, },
"h4 strong": { 'h4 strong': {
fontWeight: "700", fontWeight: '700',
color: "inherit", color: 'inherit'
}, },
// TODO: Figure out how to not need these, it's a merging issue // TODO: Figure out how to not need these, it's a merging issue
img: {}, img: {},
"figure > *": {}, 'figure > *': {},
figcaption: { figcaption: {
color: "var(--tw-prose-captions)", color: 'var(--tw-prose-captions)'
}, },
code: { code: {
color: "var(--tw-prose-code)", color: 'var(--tw-prose-code)',
fontWeight: "600", fontWeight: '600'
}, },
"code::before": { 'code::before': {
content: '"`"', content: '"`"'
}, },
"code::after": { 'code::after': {
content: '"`"', content: '"`"'
}, },
"a code": { 'a code': {
color: "inherit", color: 'inherit'
}, },
"h1 code": { 'h1 code': {
color: "inherit", color: 'inherit'
}, },
"h2 code": { 'h2 code': {
color: "inherit", color: 'inherit'
}, },
"h3 code": { 'h3 code': {
color: "inherit", color: 'inherit'
}, },
"h4 code": { 'h4 code': {
color: "inherit", color: 'inherit'
}, },
"blockquote code": { 'blockquote code': {
color: "inherit", color: 'inherit'
}, },
"thead th code": { 'thead th code': {
color: "inherit", color: 'inherit'
}, },
pre: { pre: {
color: "var(--tw-prose-pre-code)", color: 'var(--tw-prose-pre-code)',
backgroundColor: colors.gray[800], backgroundColor: colors.gray[800],
overflowX: "auto", overflowX: 'auto',
fontWeight: "400", fontWeight: '400'
}, },
"pre code": { 'pre code': {
backgroundColor: "transparent", backgroundColor: 'transparent',
borderWidth: "0", borderWidth: '0',
borderRadius: "0", borderRadius: '0',
padding: "0", padding: '0',
fontWeight: "inherit", fontWeight: 'inherit',
color: "inherit", color: 'inherit',
fontSize: "inherit", fontSize: 'inherit',
fontFamily: "inherit", fontFamily: 'inherit',
lineHeight: "inherit", lineHeight: 'inherit'
}, },
"pre code::before": { 'pre code::before': {
content: "none", content: 'none'
}, },
"pre code::after": { 'pre code::after': {
content: "none", content: 'none'
}, },
table: { table: {
width: "100%", width: '100%',
tableLayout: "auto", tableLayout: 'auto',
textAlign: "left", textAlign: 'left',
marginTop: em(32, 16), marginTop: em(32, 16),
marginBottom: em(32, 16), marginBottom: em(32, 16)
}, },
thead: { thead: {
borderBottomWidth: "1px", borderBottomWidth: '1px',
borderBottomColor: "var(--tw-prose-th-borders)", borderBottomColor: 'var(--tw-prose-th-borders)'
}, },
"thead th": { 'thead th': {
color: "var(--tw-prose-headings)", color: 'var(--tw-prose-headings)',
fontWeight: "600", fontWeight: '600',
verticalAlign: "bottom", verticalAlign: 'bottom'
}, },
"tbody tr": { 'tbody tr': {
borderBottomWidth: "1px", borderBottomWidth: '1px',
borderBottomColor: "var(--tw-prose-td-borders)", borderBottomColor: 'var(--tw-prose-td-borders)'
}, },
"tbody tr:last-child": { 'tbody tr:last-child': {
borderBottomWidth: "0", borderBottomWidth: '0'
}, },
"tbody td": { 'tbody td': {
verticalAlign: "baseline", verticalAlign: 'baseline'
}, },
tfoot: { tfoot: {
borderTopWidth: "1px", borderTopWidth: '1px',
borderTopColor: "var(--tw-prose-th-borders)", borderTopColor: 'var(--tw-prose-th-borders)'
},
"tfoot td": {
verticalAlign: "top",
}, },
'tfoot td': {
verticalAlign: 'top'
}
}, },
defaultModifiers.gray.css, defaultModifiers.gray.css,
...defaultModifiers.base.css, ...defaultModifiers.base.css
], ]
}, },
...defaultModifiers, ...defaultModifiers
}), })
}, },
plugins: [ plugins: [
plugin(function ({ addUtilities }) { plugin(function ({ addUtilities }) {
addUtilities({ addUtilities({
".no-scrollbar::-webkit-scrollbar": { '.no-scrollbar::-webkit-scrollbar': {
display: "none", display: 'none'
},
".no-scrollbar": {
"-ms-overflow-style": "none",
"scrollbar-width": "none",
}, },
'.no-scrollbar': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none'
}
}); });
}), }),
require("@tailwindcss/typography"), require('@tailwindcss/typography')
], ]
}; };