mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 10:40:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add radii variant to sequence card component

Browse source
This commit is contained in:
Ajay Bura 2025-08-04 11:41:12 +05:30
parent 4ce9323a95
commit 2555a5a704
2 changed files with 49 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/components/sequence-card/SequenceCard.tsx
View file

@ -9,12 +9,25 @@ export const SequenceCard = as<
ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
>(
(
{ as: AsSequenceCard = 'div', className, variant, firstChild, lastChild, outlined, ...props },
{
as: AsSequenceCard = 'div',
className,
variant,
radii,
firstChild,
lastChild,
outlined,
...props
},
ref
) => (
<Box
as={AsSequenceCard}
className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
className={classNames(
css.SequenceCard({ radii, outlined }),
ContainerColor({ variant }),
className
)}
data-first-child={firstChild}
data-last-child={lastChild}
{...props}

42
src/app/components/sequence-card/style.css.ts
View file

@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { config } from 'folds';
const outlinedWidth = createVar('0');
const radii = createVar(config.radii.R400);
export const SequenceCard = recipe({
base: {
vars: {
@ -13,25 +14,25 @@ export const SequenceCard = recipe({
borderBottomWidth: 0,
selectors: {
'&:first-child, :not(&) + &': {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
borderTopLeftRadius: [radii],
borderTopRightRadius: [radii],
},
'&:last-child, &:not(:has(+&))': {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomLeftRadius: [radii],
borderBottomRightRadius: [radii],
borderBottomWidth: outlinedWidth,
},
[`&[data-first-child="true"]`]: {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
borderTopLeftRadius: [radii],
borderTopRightRadius: [radii],
},
[`&[data-first-child="false"]`]: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
[`&[data-last-child="true"]`]: {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomLeftRadius: [radii],
borderBottomRightRadius: [radii],
},
[`&[data-last-child="false"]`]: {
borderBottomLeftRadius: 0,
@ -44,6 +45,28 @@ export const SequenceCard = recipe({
},
},
variants: {
radii: {
'0': {
vars: {
[radii]: config.radii.R0,
},
},
'300': {
vars: {
[radii]: config.radii.R300,
},
},
'400': {
vars: {
[radii]: config.radii.R400,
},
},
'500': {
vars: {
[radii]: config.radii.R500,
},
},
},
outlined: {
true: {
vars: {
@ -52,5 +75,8 @@ export const SequenceCard = recipe({
},
},
},
defaultVariants: {
radii: '400',
},
});
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;