konnosDashboard
constants.ts121 lines · main
1export const HIDDEN_PLACEHOLDER = '**** **** **** ****'
2export const COLORS = [
3 'brand',
4 'scale',
5 'tomato',
6 'red',
7 'crimson',
8 'pink',
9 'purple',
10 'violet',
11 'indigo',
12 'blue',
13 'green',
14 'grass',
15 'orange',
16 'sky',
17 'yellow',
18 'amber',
19 'gold',
20 'gray',
21 'slate',
22]
23export type AvailableColors =
24 | 'brand'
25 | 'brandAlt'
26 | 'scale'
27 | 'tomato'
28 | 'red'
29 | 'crimson'
30 | 'pink'
31 | 'purple'
32 | 'violet'
33 | 'indigo'
34 | 'blue'
35 | 'green'
36 | 'grass'
37 | 'orange'
38 | 'sky'
39 | 'yellow'
40 | 'amber'
41 | 'gold'
42 | 'gray'
43 | 'slate'
44
45export const SIZE = {
46 text: {
47 tiny: 'text-xs',
48 small: 'text-base md:text-sm leading-4',
49 medium: 'text-base md:text-sm',
50 large: 'text-base',
51 xlarge: 'text-base',
52 },
53 padding: {
54 tiny: 'px-2.5 py-1',
55 small: 'px-3 py-2',
56 medium: 'px-4 py-2',
57 large: 'px-4 py-2',
58 xlarge: 'px-6 py-3',
59 },
60 height: {
61 tiny: 'h-[26px]',
62 small: 'h-[34px]',
63 medium: 'h-[38px]',
64 large: 'h-[42px]',
65 xlarge: 'h-[50px]',
66 },
67}
68
69// used for internal badges/buttons
70// such as Button Group Items or Multi Select items
71export const SIZE_INNER = {
72 text: {
73 tiny: 'text-xs',
74 small: 'text-sm leading-4',
75 medium: 'text-sm',
76 large: 'text-base',
77 xlarge: 'text-base',
78 },
79 padding: {
80 tiny: 'px-2.5 py-1',
81 small: 'px-3 py-2',
82 medium: 'px-4 py-2',
83 large: 'px-4 py-2',
84 xlarge: 'px-6 py-3',
85 },
86 height: {
87 tiny: 'h-[24px]',
88 small: 'h-[28px]',
89 medium: 'h-[32px]',
90 large: 'h-[36px]',
91 xlarge: 'h-[44px]',
92 },
93}
94
95export const SIZE_VARIANTS = {
96 tiny: `${SIZE.text['tiny']} ${SIZE.padding['tiny']} ${SIZE.height['tiny']}`,
97 small: `${SIZE.text['small']} ${SIZE.padding['small']} ${SIZE.height['small']}`,
98 medium: `${SIZE.text['medium']} ${SIZE.padding['medium']} ${SIZE.height['medium']}`,
99 large: `${SIZE.text['large']} ${SIZE.padding['large']} ${SIZE.height['large']}`,
100 xlarge: `${SIZE.text['xlarge']} ${SIZE.padding['xlarge']} ${SIZE.height['xlarge']}`,
101}
102
103export const SIZE_VARIANTS_INNER = {
104 tiny: `${SIZE.text['tiny']} ${SIZE.padding['tiny']} ${SIZE_INNER.height['tiny']}`,
105 small: `${SIZE.text['small']} ${SIZE.padding['small']} ${SIZE_INNER.height['small']}`,
106 medium: `${SIZE.text['medium']} ${SIZE.padding['medium']} ${SIZE_INNER.height['medium']}`,
107 large: `${SIZE.text['large']} ${SIZE.padding['large']} ${SIZE_INNER.height['large']}`,
108 xlarge: `${SIZE.text['xlarge']} ${SIZE.padding['xlarge']} ${SIZE_INNER.height['xlarge']}`,
109}
110
111export const SIZE_VARIANTS_DEFAULT = 'small'
112
113export type PageSize = 'default' | 'small' | 'medium' | 'large' | 'full'
114
115export const PAGE_SIZE_CLASSES = {
116 small: 'max-w-3xl px-8',
117 medium: 'max-w-5xl px-8',
118 large: 'max-w-7xl px-8',
119 default: 'max-w-5xl px-8',
120 full: 'w-full',
121} as const