VKUI/packages/vkui/src/lib/layouts/layoutProps.ts at ac77592b6258e8dcd855aaed31c0054f6086a2e3 · VKCOM/VKUI · 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
import type {
  CSSGlobalValue,
  CSSIntrinsicSizingKeywords,
  DesignSystemSize,
  OverflowValue,
  PositionValue,
} from './types';

export const DESIGN_SYSTEM_SIZES: DesignSystemSize[] = [
  '2xs',
  'xs',
  's',
  'm',
  'l',
  'xl',
  '2xl',
  '3xl',
  '4xl',
];
const CSS_INTRINSIC_KEYWORDS: CSSIntrinsicSizingKeywords[] = [
  'auto',
  'max-content',
  'min-content',
  'fit-content',
];
const CSS_GLOBAL_KEYWORDS: CSSGlobalValue[] = ['inherit', 'initial', 'unset'];

const CSS_KEYWORDS = [...CSS_INTRINSIC_KEYWORDS, ...CSS_GLOBAL_KEYWORDS];
const PADDING_VALUES = [...DESIGN_SYSTEM_SIZES, ...CSS_GLOBAL_KEYWORDS, 'system'];
const SIZE_VALUES = CSS_KEYWORDS;
const MINMAX_SIZE_VALUES = [...CSS_KEYWORDS.filter((opt) => opt !== 'auto')];
const FLEX_VALUES = CSS_GLOBAL_KEYWORDS;
const FLEX_BASIS_VALUES = [...CSS_KEYWORDS, 'content'];
const INSET_VALUES = [...DESIGN_SYSTEM_SIZES, ...CSS_GLOBAL_KEYWORDS, 'auto'];
const POSITION_VALUES: PositionValue[] = ['static', 'relative', 'absolute', 'fixed', 'sticky'];
const OVERFLOW_VALUES: OverflowValue[] = [
  'visible',
  'hidden',
  'clip',
  'scroll',
  'auto',
  ...CSS_GLOBAL_KEYWORDS,
];

export const SYSTEM_PADDING_VERTICAL = 'var(--vkui--size_base_padding_vertical--regular)';
export const SYSTEM_PADDING_HORIZONTAL = 'var(--vkui--size_base_padding_horizontal--regular)';

export const LAYOUT_PROPS = {
  padding: PADDING_VALUES,
  paddingInline: PADDING_VALUES,
  paddingBlock: PADDING_VALUES,
  paddingInlineStart: PADDING_VALUES,
  paddingInlineEnd: PADDING_VALUES,
  paddingBlockStart: PADDING_VALUES,
  paddingBlockEnd: PADDING_VALUES,
  inlineSize: SIZE_VALUES,
  minInlineSize: MINMAX_SIZE_VALUES,
  maxInlineSize: MINMAX_SIZE_VALUES,
  blockSize: SIZE_VALUES,
  minBlockSize: MINMAX_SIZE_VALUES,
  maxBlockSize: MINMAX_SIZE_VALUES,
  inset: INSET_VALUES,
  insetInline: INSET_VALUES,
  insetBlock: INSET_VALUES,
  insetInlineStart: INSET_VALUES,
  insetInlineEnd: INSET_VALUES,
  insetBlockStart: INSET_VALUES,
  insetBlockEnd: INSET_VALUES,
  position: POSITION_VALUES,
  flexGrow: FLEX_VALUES,
  flexShrink: FLEX_VALUES,
  flexBasis: FLEX_BASIS_VALUES,
  overflow: OVERFLOW_VALUES,
  overflowBlock: OVERFLOW_VALUES,
  overflowInline: OVERFLOW_VALUES,
};

export type LayoutPropKeys = keyof typeof LAYOUT_PROPS;