side/packages/card/src/Card.css.ts at 6e6abd85aea4a6f857212126db38be70dd453536 · sipe-team/side · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { color } from '@sipe-team/tokens';

import { recipe } from '@vanilla-extract/recipes';

export const CardVariant = {
  filled: 'filled',
  outline: 'outline',
} as const;

export const CardRatio = {
  rectangle: 'rectangle',
  square: 'square',
  wide: 'wide',
  portrait: 'portrait',
  auto: 'auto',
} as const;

export type CardVariant = (typeof CardVariant)[keyof typeof CardVariant];
export type CardRatio = (typeof CardRatio)[keyof typeof CardRatio];

export const card = recipe({
  base: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '12px',
    padding: '20px',
  },
  variants: {
    variant: {
      [CardVariant.filled]: {
        backgroundColor: color.gray100,
        border: `1px solid ${color.gray200}`,
      },
      [CardVariant.outline]: {
        backgroundColor: color.gray50,
        border: `1px solid ${color.cyan300}`,
      },
    },
    ratio: {
      [CardRatio.square]: {
        aspectRatio: '1 / 1',
      },
      [CardRatio.rectangle]: {
        aspectRatio: '16 / 9',
      },
      [CardRatio.wide]: {
        aspectRatio: '21 / 9',
      },
      [CardRatio.portrait]: {
        aspectRatio: '3 / 4',
      },
      [CardRatio.auto]: {
        aspectRatio: 'auto',
      },
    },
  },
  defaultVariants: {
    variant: CardVariant.filled,
    ratio: CardRatio.rectangle,
  },
});