forked from cerc-io/snowballtools-base
99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
import { VariantProps, tv } from 'tailwind-variants';
|
|
|
|
export const projectCardTheme = tv({
|
|
slots: {
|
|
wrapper: [
|
|
'bg-surface-card',
|
|
'dark:bg-overlay2',
|
|
'shadow-card',
|
|
'dark:shadow-background',
|
|
'rounded-2xl',
|
|
'flex',
|
|
'flex-col',
|
|
'group',
|
|
'cursor-pointer',
|
|
],
|
|
upperContent: ['px-4', 'py-4', 'flex', 'items-start', 'gap-3', 'relative'],
|
|
content: ['flex', 'flex-col', 'gap-1', 'flex-1', 'overflow-hidden'],
|
|
title: [
|
|
'text-sm',
|
|
'font-medium',
|
|
'text-elements-high-em',
|
|
'dark:text-foreground',
|
|
'tracking-[-0.006em]',
|
|
'truncate',
|
|
],
|
|
description: [
|
|
'text-xs',
|
|
'text-elements-low-em',
|
|
'dark:text-foreground-secondary',
|
|
'truncate',
|
|
],
|
|
icons: ['flex', 'items-center', 'gap-1'],
|
|
lowerContent: [
|
|
'transition-colors',
|
|
'duration-150',
|
|
'px-4',
|
|
'py-4',
|
|
'flex',
|
|
'flex-col',
|
|
'gap-2',
|
|
'rounded-b-2xl',
|
|
'group-hover:bg-surface-card-hovered',
|
|
'dark:group-hover:bg-overlay3',
|
|
],
|
|
latestDeployment: ['flex', 'items-center', 'gap-2'],
|
|
deploymentStatusContainer: [
|
|
'h-3',
|
|
'w-3',
|
|
'flex',
|
|
'items-center',
|
|
'justify-center',
|
|
],
|
|
deploymentStatus: ['w-1', 'h-1', 'rounded-full'],
|
|
deploymentName: [
|
|
'text-xs',
|
|
'text-elements-low-em',
|
|
'dark:text-foreground-secondary',
|
|
],
|
|
deploymentText: [
|
|
'text-xs',
|
|
'text-elements-low-em',
|
|
'dark:text-foreground-secondary',
|
|
'font-mono',
|
|
'flex',
|
|
'items-center',
|
|
'gap-2',
|
|
],
|
|
wavyBorder: [
|
|
'bg-surface-card',
|
|
'dark:bg-background',
|
|
'transition-colors',
|
|
'duration-150',
|
|
'group-hover:bg-surface-card-hovered',
|
|
'dark:group-hover:bg-overlay2',
|
|
],
|
|
},
|
|
variants: {
|
|
status: {
|
|
success: {
|
|
deploymentStatus: ['bg-emerald-500'],
|
|
},
|
|
'in-progress': {
|
|
deploymentStatus: ['bg-orange-400'],
|
|
},
|
|
failure: {
|
|
deploymentStatus: ['bg-error'],
|
|
},
|
|
pending: {
|
|
deploymentStatus: ['bg-gray-500'],
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
status: 'pending',
|
|
},
|
|
});
|
|
|
|
export type ProjectCardTheme = VariantProps<typeof projectCardTheme>;
|