NINEDOT-CLIENT/src/common/component/SignupTextField/SignupTextField.css.ts at 9af6b43a1284d75da14a33ea256524624ef689b5 · SOPT-36-NINEDOT/NINEDOT-CLIENT · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { styleVariants, style } from '@vanilla-extract/css';

import { colors } from '@/style/token/color.css';
import { fonts } from '@/style/token/typography.css';

export const baseClass = style({
  display: 'flex',
  width: '52.2rem',
  height: '5rem',
  padding: '1.4rem 2rem',
  alignItems: 'center',
  flexShrink: 0,
  borderRadius: '8px',
  border: '2px solid transparent',
  ...fonts.body03,
});

export const fieldVariants = styleVariants({
  default: {
    border: '2px solid transparent',
    background: colors.grey4,
    color: colors.grey6,
  },
  clicked: {
    border: `2px solid ${colors.blue06}`,
    background: colors.grey3,
    color: colors.grey6,
  },
  typing: {
    border: `2px solid ${colors.blue06}`,
    background: colors.grey3,
    color: colors.grey10,
  },
  filled: {
    border: '2px solid transparent',
    background: colors.grey4,
    color: colors.grey10,
  },
  completed: {
    border: '2px solid transparent',
    background: colors.grey4,
    color: colors.grey10,
  },
  locked: {
    border: '2px solid transparent',
    background: colors.grey4,
    color: colors.grey5,
  },
  error: {
    border: `2px solid ${colors.error01}`,
    background: colors.grey4,
    color: colors.grey10,
  },
});

export const inputContent = style({
  display: 'flex',
  flex: 1,
  alignItems: 'center',
  justifyContent: 'space-between',
  flexShrink: 0,
});

export const clearButton = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '2rem',
  height: '2rem',
  background: 'none',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
});

export const iconClass = style({
  width: '2rem',
  height: '2rem',
  flexShrink: 0,
});

export const lockIconClass = style({
  width: '2rem',
  height: '2rem',
  flexShrink: 0,
});

export const errorMessageWrapper = style({
  display: 'flex',
  width: '52.2rem',
  flexDirection: 'column',
  alignItems: 'flex-start',
  gap: '0.4rem',
});

export const inputBase = style({
  display: 'block',
  width: '100%',
  height: '100%',
  background: 'transparent',
  border: 'none',
  outline: 'none',
  padding: 0,
  color: 'inherit',
});

const makeInputStyle = (font: typeof fonts.body03) =>
  style({
    ...font,
    '::placeholder': {
      color: colors.grey6,
      ...font,
    },
  });

export const inputStyle = makeInputStyle(fonts.body03);

export const errorMessage = style({
  alignSelf: 'stretch',
  color: colors.error01,
  ...fonts.caption02,
});