UNPKG

@dbs-portal/core-theme

Version:

Theme management, styling utilities, and design tokens for DBS Portal

github.com/your-org/dbs-portal

your-org/dbs-portal

75 lines • 2.51 kB
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
/** * Design tokens for responsive breakpoints * Following mobile-first approach */ export declare const breakpoints: { readonly xs: "0px"; readonly sm: "576px"; readonly md: "768px"; readonly lg: "992px"; readonly xl: "1200px"; readonly xxl: "1400px"; }; export declare const containerMaxWidth: { readonly xs: "100%"; readonly sm: "540px"; readonly md: "720px"; readonly lg: "960px"; readonly xl: "1140px"; readonly xxl: "1320px"; }; export declare const grid: { readonly columns: 12; readonly gutter: { readonly xs: "16px"; readonly sm: "16px"; readonly md: "24px"; readonly lg: "24px"; readonly xl: "32px"; readonly xxl: "32px"; }; }; export declare const mediaQueries: { readonly xs: "@media (min-width: 0px)"; readonly sm: "@media (min-width: 576px)"; readonly md: "@media (min-width: 768px)"; readonly lg: "@media (min-width: 992px)"; readonly xl: "@media (min-width: 1200px)"; readonly xxl: "@media (min-width: 1400px)"; readonly 'max-xs': `@media (max-width: ${number}px)`; readonly 'max-sm': `@media (max-width: ${number}px)`; readonly 'max-md': `@media (max-width: ${number}px)`; readonly 'max-lg': `@media (max-width: ${number}px)`; readonly 'max-xl': `@media (max-width: ${number}px)`; readonly 'sm-only': `@media (min-width: 576px) and (max-width: ${number}px)`; readonly 'md-only': `@media (min-width: 768px) and (max-width: ${number}px)`; readonly 'lg-only': `@media (min-width: 992px) and (max-width: ${number}px)`; readonly 'xl-only': `@media (min-width: 1200px) and (max-width: ${number}px)`; }; export declare const responsiveConfig: { readonly navigation: { readonly mobileBreakpoint: "768px"; readonly collapsedWidth: "80px"; readonly expandedWidth: "256px"; }; readonly table: { readonly scrollBreakpoint: "768px"; readonly stackBreakpoint: "576px"; }; readonly form: { readonly stackBreakpoint: "576px"; readonly inlineBreakpoint: "768px"; }; readonly card: { readonly stackBreakpoint: "576px"; readonly gridBreakpoints: { readonly 1: "0px"; readonly 2: "576px"; readonly 3: "768px"; readonly 4: "992px"; }; }; }; export type Breakpoint = keyof typeof breakpoints; export type MediaQuery = keyof typeof mediaQueries; //# sourceMappingURL=breakpoints.d.ts.map