@leduchai/vmeta-ui-tokens 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +3 -0
  2. package/dist/index.cjs +249 -0
  3. package/dist/index.d.cts +299 -0
  4. package/dist/index.d.ts +299 -0
  5. package/dist/index.js +211 -0
  6. package/dist/styles.css +122 -0
  7. package/package.json +27 -0
  8. package/tokens.json +120 -0
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # @leduchai/vmeta-ui-tokens
2
+
3
+ Package token chinh thuc cua VMETA. Import `@leduchai/vmeta-ui-tokens/styles.css` mot lan tai entry cua ung dung, hoac dung cac constant TypeScript tu package root.
package/dist/index.cjs ADDED
@@ -0,0 +1,249 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ applyDesignTokens: () => applyDesignTokens,
24
+ breakpoints: () => breakpoints,
25
+ colors: () => colors,
26
+ cssVariables: () => cssVariables,
27
+ default: () => index_default,
28
+ designTokens: () => designTokens,
29
+ layout: () => layout,
30
+ motion: () => motion,
31
+ radius: () => radius,
32
+ shadows: () => shadows,
33
+ spacing: () => spacing,
34
+ typography: () => typography,
35
+ zIndex: () => zIndex
36
+ });
37
+ module.exports = __toCommonJS(index_exports);
38
+
39
+ // tokens.json
40
+ var tokens_default = {
41
+ colors: {
42
+ primary: "#08a63f",
43
+ primaryDark: "#06752f",
44
+ primaryLight: "#31c964",
45
+ primarySoft: "#e9f9ef",
46
+ primarySurface: "#e9f9ef",
47
+ secondary: "#ff6416",
48
+ secondaryDark: "#e05510",
49
+ secondaryLight: "#ff8b52",
50
+ secondarySoft: "#fff1e9",
51
+ secondarySurface: "#fff1e9",
52
+ ink: "#121826",
53
+ dark: "#07130d",
54
+ darkAlt: "#0d2717",
55
+ muted: "#64748b",
56
+ subtle: "#94a3b8",
57
+ surface: "#ffffff",
58
+ canvas: "#edf4f1",
59
+ border: "#e2e8f0",
60
+ borderStrong: "#cbd5e1",
61
+ success: "#16a34a",
62
+ successSoft: "#dcfce7",
63
+ successSurface: "#dcfce7",
64
+ warning: "#f59e0b",
65
+ warningSoft: "#fffbeb",
66
+ warningSurface: "#fffbeb",
67
+ error: "#dc2626",
68
+ errorSoft: "#fef2f2",
69
+ errorSurface: "#fef2f2",
70
+ info: "#2563eb",
71
+ infoSoft: "#eff6ff",
72
+ infoSurface: "#eff6ff",
73
+ mutedSurface: "#f1f5f9",
74
+ overlay: "rgba(7, 19, 13, 0.52)"
75
+ },
76
+ typography: {
77
+ fontFamily: "'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
78
+ fontSize: {
79
+ xs: "0.75rem",
80
+ sm: "0.875rem",
81
+ base: "1rem",
82
+ lg: "1.125rem",
83
+ xl: "1.25rem",
84
+ "2xl": "1.5rem",
85
+ "3xl": "1.875rem",
86
+ "4xl": "2.25rem",
87
+ "5xl": "3rem"
88
+ },
89
+ lineHeight: {
90
+ tight: "1.25",
91
+ normal: "1.5",
92
+ relaxed: "1.7"
93
+ },
94
+ fontWeight: {
95
+ regular: 400,
96
+ medium: 500,
97
+ semibold: 600,
98
+ bold: 700,
99
+ extrabold: 800
100
+ }
101
+ },
102
+ radius: {
103
+ sm: "8px",
104
+ md: "12px",
105
+ lg: "16px",
106
+ xl: "24px",
107
+ pill: "9999px"
108
+ },
109
+ shadow: {
110
+ sm: "0 1px 2px rgb(7 19 13 / 6%)",
111
+ md: "0 8px 24px rgb(7 19 13 / 8%)",
112
+ lg: "0 18px 48px rgb(7 19 13 / 14%)",
113
+ focus: "0 0 0 3px rgb(8 166 63 / 18%)"
114
+ },
115
+ spacing: {
116
+ "1": "0.25rem",
117
+ "2": "0.5rem",
118
+ "3": "0.75rem",
119
+ "4": "1rem",
120
+ "5": "1.25rem",
121
+ "6": "1.5rem",
122
+ "8": "2rem",
123
+ "10": "2.5rem",
124
+ "12": "3rem"
125
+ },
126
+ breakpoint: {
127
+ sm: "640px",
128
+ md: "768px",
129
+ lg: "1024px",
130
+ xl: "1280px",
131
+ "2xl": "1536px"
132
+ },
133
+ motion: {
134
+ fast: "150ms",
135
+ normal: "220ms",
136
+ base: "220ms",
137
+ slow: "320ms",
138
+ easing: "cubic-bezier(0.2, 0, 0, 1)",
139
+ ease: "cubic-bezier(0.2, 0, 0, 1)"
140
+ },
141
+ layout: {
142
+ sidebarWidth: "264px",
143
+ sidebarCollapsedWidth: "80px",
144
+ headerMinHeight: "64px",
145
+ controlHeight: "40px",
146
+ controlHeightLarge: "48px",
147
+ pageGutterMobile: "12px",
148
+ pageGutterTablet: "20px",
149
+ pageGutterDesktop: "28px"
150
+ },
151
+ zIndex: {
152
+ sidebar: 50,
153
+ header: 40,
154
+ drawer: 80,
155
+ overlay: 70,
156
+ modal: 1e3,
157
+ toast: 1100
158
+ }
159
+ };
160
+
161
+ // src/index.ts
162
+ var designTokens = tokens_default;
163
+ var colors = designTokens.colors;
164
+ var typography = designTokens.typography;
165
+ var spacing = designTokens.spacing;
166
+ var radius = designTokens.radius;
167
+ var shadows = designTokens.shadow;
168
+ var breakpoints = designTokens.breakpoint;
169
+ var motion = designTokens.motion;
170
+ var layout = designTokens.layout;
171
+ var zIndex = designTokens.zIndex;
172
+ var cssVariables = {
173
+ "--color-primary": colors.primary,
174
+ "--color-primary-dark": colors.primaryDark,
175
+ "--color-primary-light": colors.primaryLight,
176
+ "--color-primary-soft": colors.primarySoft,
177
+ "--color-primary-surface": colors.primarySurface,
178
+ "--color-secondary": colors.secondary,
179
+ "--color-secondary-dark": colors.secondaryDark,
180
+ "--color-secondary-light": colors.secondaryLight,
181
+ "--color-secondary-soft": colors.secondarySoft,
182
+ "--color-secondary-surface": colors.secondarySurface,
183
+ "--color-ink": colors.ink,
184
+ "--color-dark": colors.dark,
185
+ "--color-dark-alt": colors.darkAlt,
186
+ "--color-muted": colors.muted,
187
+ "--color-subtle": colors.subtle,
188
+ "--color-muted-surface": colors.mutedSurface,
189
+ "--color-surface": colors.surface,
190
+ "--color-canvas": colors.canvas,
191
+ "--color-border": colors.border,
192
+ "--color-border-strong": colors.borderStrong,
193
+ "--color-success": colors.success,
194
+ "--color-success-soft": colors.successSoft,
195
+ "--color-success-surface": colors.successSurface,
196
+ "--color-warning": colors.warning,
197
+ "--color-warning-soft": colors.warningSoft,
198
+ "--color-warning-surface": colors.warningSurface,
199
+ "--color-error": colors.error,
200
+ "--color-error-soft": colors.errorSoft,
201
+ "--color-error-surface": colors.errorSurface,
202
+ "--color-info": colors.info,
203
+ "--color-info-soft": colors.infoSoft,
204
+ "--color-info-surface": colors.infoSurface,
205
+ "--color-overlay": colors.overlay,
206
+ "--font-sans": typography.fontFamily,
207
+ "--font-family-sans": typography.fontFamily,
208
+ "--radius-sm": radius.sm,
209
+ "--radius-md": radius.md,
210
+ "--radius-lg": radius.lg,
211
+ "--radius-xl": radius.xl,
212
+ "--radius-pill": radius.pill,
213
+ "--shadow-sm": shadows.sm,
214
+ "--shadow-md": shadows.md,
215
+ "--shadow-lg": shadows.lg,
216
+ "--shadow-focus": shadows.focus,
217
+ "--motion-fast": motion.fast,
218
+ "--motion-normal": motion.normal,
219
+ "--motion-base": motion.base,
220
+ "--motion-slow": motion.slow,
221
+ "--motion-easing": motion.easing,
222
+ "--motion-ease": motion.ease,
223
+ "--sidebar-width": layout.sidebarWidth,
224
+ "--sidebar-collapsed-width": layout.sidebarCollapsedWidth,
225
+ "--header-min-height": layout.headerMinHeight,
226
+ "--control-height": layout.controlHeight,
227
+ "--control-height-lg": layout.controlHeightLarge
228
+ };
229
+ function applyDesignTokens(root) {
230
+ if (typeof document === "undefined" && !root) return;
231
+ const target = root ?? document.documentElement;
232
+ Object.entries(cssVariables).forEach(([name, value]) => target.style.setProperty(name, String(value)));
233
+ }
234
+ var index_default = designTokens;
235
+ // Annotate the CommonJS export names for ESM import in node:
236
+ 0 && (module.exports = {
237
+ applyDesignTokens,
238
+ breakpoints,
239
+ colors,
240
+ cssVariables,
241
+ designTokens,
242
+ layout,
243
+ motion,
244
+ radius,
245
+ shadows,
246
+ spacing,
247
+ typography,
248
+ zIndex
249
+ });
package/dist/index.d.cts ADDED
@@ -0,0 +1,299 @@
1
+ declare const designTokens: {
2
+ colors: {
3
+ primary: string;
4
+ primaryDark: string;
5
+ primaryLight: string;
6
+ primarySoft: string;
7
+ primarySurface: string;
8
+ secondary: string;
9
+ secondaryDark: string;
10
+ secondaryLight: string;
11
+ secondarySoft: string;
12
+ secondarySurface: string;
13
+ ink: string;
14
+ dark: string;
15
+ darkAlt: string;
16
+ muted: string;
17
+ subtle: string;
18
+ surface: string;
19
+ canvas: string;
20
+ border: string;
21
+ borderStrong: string;
22
+ success: string;
23
+ successSoft: string;
24
+ successSurface: string;
25
+ warning: string;
26
+ warningSoft: string;
27
+ warningSurface: string;
28
+ error: string;
29
+ errorSoft: string;
30
+ errorSurface: string;
31
+ info: string;
32
+ infoSoft: string;
33
+ infoSurface: string;
34
+ mutedSurface: string;
35
+ overlay: string;
36
+ };
37
+ typography: {
38
+ fontFamily: string;
39
+ fontSize: {
40
+ xs: string;
41
+ sm: string;
42
+ base: string;
43
+ lg: string;
44
+ xl: string;
45
+ "2xl": string;
46
+ "3xl": string;
47
+ "4xl": string;
48
+ "5xl": string;
49
+ };
50
+ lineHeight: {
51
+ tight: string;
52
+ normal: string;
53
+ relaxed: string;
54
+ };
55
+ fontWeight: {
56
+ regular: number;
57
+ medium: number;
58
+ semibold: number;
59
+ bold: number;
60
+ extrabold: number;
61
+ };
62
+ };
63
+ radius: {
64
+ sm: string;
65
+ md: string;
66
+ lg: string;
67
+ xl: string;
68
+ pill: string;
69
+ };
70
+ shadow: {
71
+ sm: string;
72
+ md: string;
73
+ lg: string;
74
+ focus: string;
75
+ };
76
+ spacing: {
77
+ "1": string;
78
+ "2": string;
79
+ "3": string;
80
+ "4": string;
81
+ "5": string;
82
+ "6": string;
83
+ "8": string;
84
+ "10": string;
85
+ "12": string;
86
+ };
87
+ breakpoint: {
88
+ sm: string;
89
+ md: string;
90
+ lg: string;
91
+ xl: string;
92
+ "2xl": string;
93
+ };
94
+ motion: {
95
+ fast: string;
96
+ normal: string;
97
+ base: string;
98
+ slow: string;
99
+ easing: string;
100
+ ease: string;
101
+ };
102
+ layout: {
103
+ sidebarWidth: string;
104
+ sidebarCollapsedWidth: string;
105
+ headerMinHeight: string;
106
+ controlHeight: string;
107
+ controlHeightLarge: string;
108
+ pageGutterMobile: string;
109
+ pageGutterTablet: string;
110
+ pageGutterDesktop: string;
111
+ };
112
+ zIndex: {
113
+ sidebar: number;
114
+ header: number;
115
+ drawer: number;
116
+ overlay: number;
117
+ modal: number;
118
+ toast: number;
119
+ };
120
+ };
121
+ declare const colors: {
122
+ primary: string;
123
+ primaryDark: string;
124
+ primaryLight: string;
125
+ primarySoft: string;
126
+ primarySurface: string;
127
+ secondary: string;
128
+ secondaryDark: string;
129
+ secondaryLight: string;
130
+ secondarySoft: string;
131
+ secondarySurface: string;
132
+ ink: string;
133
+ dark: string;
134
+ darkAlt: string;
135
+ muted: string;
136
+ subtle: string;
137
+ surface: string;
138
+ canvas: string;
139
+ border: string;
140
+ borderStrong: string;
141
+ success: string;
142
+ successSoft: string;
143
+ successSurface: string;
144
+ warning: string;
145
+ warningSoft: string;
146
+ warningSurface: string;
147
+ error: string;
148
+ errorSoft: string;
149
+ errorSurface: string;
150
+ info: string;
151
+ infoSoft: string;
152
+ infoSurface: string;
153
+ mutedSurface: string;
154
+ overlay: string;
155
+ };
156
+ declare const typography: {
157
+ fontFamily: string;
158
+ fontSize: {
159
+ xs: string;
160
+ sm: string;
161
+ base: string;
162
+ lg: string;
163
+ xl: string;
164
+ "2xl": string;
165
+ "3xl": string;
166
+ "4xl": string;
167
+ "5xl": string;
168
+ };
169
+ lineHeight: {
170
+ tight: string;
171
+ normal: string;
172
+ relaxed: string;
173
+ };
174
+ fontWeight: {
175
+ regular: number;
176
+ medium: number;
177
+ semibold: number;
178
+ bold: number;
179
+ extrabold: number;
180
+ };
181
+ };
182
+ declare const spacing: {
183
+ "1": string;
184
+ "2": string;
185
+ "3": string;
186
+ "4": string;
187
+ "5": string;
188
+ "6": string;
189
+ "8": string;
190
+ "10": string;
191
+ "12": string;
192
+ };
193
+ declare const radius: {
194
+ sm: string;
195
+ md: string;
196
+ lg: string;
197
+ xl: string;
198
+ pill: string;
199
+ };
200
+ declare const shadows: {
201
+ sm: string;
202
+ md: string;
203
+ lg: string;
204
+ focus: string;
205
+ };
206
+ declare const breakpoints: {
207
+ sm: string;
208
+ md: string;
209
+ lg: string;
210
+ xl: string;
211
+ "2xl": string;
212
+ };
213
+ declare const motion: {
214
+ fast: string;
215
+ normal: string;
216
+ base: string;
217
+ slow: string;
218
+ easing: string;
219
+ ease: string;
220
+ };
221
+ declare const layout: {
222
+ sidebarWidth: string;
223
+ sidebarCollapsedWidth: string;
224
+ headerMinHeight: string;
225
+ controlHeight: string;
226
+ controlHeightLarge: string;
227
+ pageGutterMobile: string;
228
+ pageGutterTablet: string;
229
+ pageGutterDesktop: string;
230
+ };
231
+ declare const zIndex: {
232
+ sidebar: number;
233
+ header: number;
234
+ drawer: number;
235
+ overlay: number;
236
+ modal: number;
237
+ toast: number;
238
+ };
239
+ declare const cssVariables: {
240
+ readonly '--color-primary': string;
241
+ readonly '--color-primary-dark': string;
242
+ readonly '--color-primary-light': string;
243
+ readonly '--color-primary-soft': string;
244
+ readonly '--color-primary-surface': string;
245
+ readonly '--color-secondary': string;
246
+ readonly '--color-secondary-dark': string;
247
+ readonly '--color-secondary-light': string;
248
+ readonly '--color-secondary-soft': string;
249
+ readonly '--color-secondary-surface': string;
250
+ readonly '--color-ink': string;
251
+ readonly '--color-dark': string;
252
+ readonly '--color-dark-alt': string;
253
+ readonly '--color-muted': string;
254
+ readonly '--color-subtle': string;
255
+ readonly '--color-muted-surface': string;
256
+ readonly '--color-surface': string;
257
+ readonly '--color-canvas': string;
258
+ readonly '--color-border': string;
259
+ readonly '--color-border-strong': string;
260
+ readonly '--color-success': string;
261
+ readonly '--color-success-soft': string;
262
+ readonly '--color-success-surface': string;
263
+ readonly '--color-warning': string;
264
+ readonly '--color-warning-soft': string;
265
+ readonly '--color-warning-surface': string;
266
+ readonly '--color-error': string;
267
+ readonly '--color-error-soft': string;
268
+ readonly '--color-error-surface': string;
269
+ readonly '--color-info': string;
270
+ readonly '--color-info-soft': string;
271
+ readonly '--color-info-surface': string;
272
+ readonly '--color-overlay': string;
273
+ readonly '--font-sans': string;
274
+ readonly '--font-family-sans': string;
275
+ readonly '--radius-sm': string;
276
+ readonly '--radius-md': string;
277
+ readonly '--radius-lg': string;
278
+ readonly '--radius-xl': string;
279
+ readonly '--radius-pill': string;
280
+ readonly '--shadow-sm': string;
281
+ readonly '--shadow-md': string;
282
+ readonly '--shadow-lg': string;
283
+ readonly '--shadow-focus': string;
284
+ readonly '--motion-fast': string;
285
+ readonly '--motion-normal': string;
286
+ readonly '--motion-base': string;
287
+ readonly '--motion-slow': string;
288
+ readonly '--motion-easing': string;
289
+ readonly '--motion-ease': string;
290
+ readonly '--sidebar-width': string;
291
+ readonly '--sidebar-collapsed-width': string;
292
+ readonly '--header-min-height': string;
293
+ readonly '--control-height': string;
294
+ readonly '--control-height-lg': string;
295
+ };
296
+ type VmetaCssVariable = keyof typeof cssVariables;
297
+ declare function applyDesignTokens(root?: HTMLElement): void;
298
+
299
+ export { type VmetaCssVariable, applyDesignTokens, breakpoints, colors, cssVariables, designTokens as default, designTokens, layout, motion, radius, shadows, spacing, typography, zIndex };
package/dist/index.d.ts ADDED
@@ -0,0 +1,299 @@
1
+ declare const designTokens: {
2
+ colors: {
3
+ primary: string;
4
+ primaryDark: string;
5
+ primaryLight: string;
6
+ primarySoft: string;
7
+ primarySurface: string;
8
+ secondary: string;
9
+ secondaryDark: string;
10
+ secondaryLight: string;
11
+ secondarySoft: string;
12
+ secondarySurface: string;
13
+ ink: string;
14
+ dark: string;
15
+ darkAlt: string;
16
+ muted: string;
17
+ subtle: string;
18
+ surface: string;
19
+ canvas: string;
20
+ border: string;
21
+ borderStrong: string;
22
+ success: string;
23
+ successSoft: string;
24
+ successSurface: string;
25
+ warning: string;
26
+ warningSoft: string;
27
+ warningSurface: string;
28
+ error: string;
29
+ errorSoft: string;
30
+ errorSurface: string;
31
+ info: string;
32
+ infoSoft: string;
33
+ infoSurface: string;
34
+ mutedSurface: string;
35
+ overlay: string;
36
+ };
37
+ typography: {
38
+ fontFamily: string;
39
+ fontSize: {
40
+ xs: string;
41
+ sm: string;
42
+ base: string;
43
+ lg: string;
44
+ xl: string;
45
+ "2xl": string;
46
+ "3xl": string;
47
+ "4xl": string;
48
+ "5xl": string;
49
+ };
50
+ lineHeight: {
51
+ tight: string;
52
+ normal: string;
53
+ relaxed: string;
54
+ };
55
+ fontWeight: {
56
+ regular: number;
57
+ medium: number;
58
+ semibold: number;
59
+ bold: number;
60
+ extrabold: number;
61
+ };
62
+ };
63
+ radius: {
64
+ sm: string;
65
+ md: string;
66
+ lg: string;
67
+ xl: string;
68
+ pill: string;
69
+ };
70
+ shadow: {
71
+ sm: string;
72
+ md: string;
73
+ lg: string;
74
+ focus: string;
75
+ };
76
+ spacing: {
77
+ "1": string;
78
+ "2": string;
79
+ "3": string;
80
+ "4": string;
81
+ "5": string;
82
+ "6": string;
83
+ "8": string;
84
+ "10": string;
85
+ "12": string;
86
+ };
87
+ breakpoint: {
88
+ sm: string;
89
+ md: string;
90
+ lg: string;
91
+ xl: string;
92
+ "2xl": string;
93
+ };
94
+ motion: {
95
+ fast: string;
96
+ normal: string;
97
+ base: string;
98
+ slow: string;
99
+ easing: string;
100
+ ease: string;
101
+ };
102
+ layout: {
103
+ sidebarWidth: string;
104
+ sidebarCollapsedWidth: string;
105
+ headerMinHeight: string;
106
+ controlHeight: string;
107
+ controlHeightLarge: string;
108
+ pageGutterMobile: string;
109
+ pageGutterTablet: string;
110
+ pageGutterDesktop: string;
111
+ };
112
+ zIndex: {
113
+ sidebar: number;
114
+ header: number;
115
+ drawer: number;
116
+ overlay: number;
117
+ modal: number;
118
+ toast: number;
119
+ };
120
+ };
121
+ declare const colors: {
122
+ primary: string;
123
+ primaryDark: string;
124
+ primaryLight: string;
125
+ primarySoft: string;
126
+ primarySurface: string;
127
+ secondary: string;
128
+ secondaryDark: string;
129
+ secondaryLight: string;
130
+ secondarySoft: string;
131
+ secondarySurface: string;
132
+ ink: string;
133
+ dark: string;
134
+ darkAlt: string;
135
+ muted: string;
136
+ subtle: string;
137
+ surface: string;
138
+ canvas: string;
139
+ border: string;
140
+ borderStrong: string;
141
+ success: string;
142
+ successSoft: string;
143
+ successSurface: string;
144
+ warning: string;
145
+ warningSoft: string;
146
+ warningSurface: string;
147
+ error: string;
148
+ errorSoft: string;
149
+ errorSurface: string;
150
+ info: string;
151
+ infoSoft: string;
152
+ infoSurface: string;
153
+ mutedSurface: string;
154
+ overlay: string;
155
+ };
156
+ declare const typography: {
157
+ fontFamily: string;
158
+ fontSize: {
159
+ xs: string;
160
+ sm: string;
161
+ base: string;
162
+ lg: string;
163
+ xl: string;
164
+ "2xl": string;
165
+ "3xl": string;
166
+ "4xl": string;
167
+ "5xl": string;
168
+ };
169
+ lineHeight: {
170
+ tight: string;
171
+ normal: string;
172
+ relaxed: string;
173
+ };
174
+ fontWeight: {
175
+ regular: number;
176
+ medium: number;
177
+ semibold: number;
178
+ bold: number;
179
+ extrabold: number;
180
+ };
181
+ };
182
+ declare const spacing: {
183
+ "1": string;
184
+ "2": string;
185
+ "3": string;
186
+ "4": string;
187
+ "5": string;
188
+ "6": string;
189
+ "8": string;
190
+ "10": string;
191
+ "12": string;
192
+ };
193
+ declare const radius: {
194
+ sm: string;
195
+ md: string;
196
+ lg: string;
197
+ xl: string;
198
+ pill: string;
199
+ };
200
+ declare const shadows: {
201
+ sm: string;
202
+ md: string;
203
+ lg: string;
204
+ focus: string;
205
+ };
206
+ declare const breakpoints: {
207
+ sm: string;
208
+ md: string;
209
+ lg: string;
210
+ xl: string;
211
+ "2xl": string;
212
+ };
213
+ declare const motion: {
214
+ fast: string;
215
+ normal: string;
216
+ base: string;
217
+ slow: string;
218
+ easing: string;
219
+ ease: string;
220
+ };
221
+ declare const layout: {
222
+ sidebarWidth: string;
223
+ sidebarCollapsedWidth: string;
224
+ headerMinHeight: string;
225
+ controlHeight: string;
226
+ controlHeightLarge: string;
227
+ pageGutterMobile: string;
228
+ pageGutterTablet: string;
229
+ pageGutterDesktop: string;
230
+ };
231
+ declare const zIndex: {
232
+ sidebar: number;
233
+ header: number;
234
+ drawer: number;
235
+ overlay: number;
236
+ modal: number;
237
+ toast: number;
238
+ };
239
+ declare const cssVariables: {
240
+ readonly '--color-primary': string;
241
+ readonly '--color-primary-dark': string;
242
+ readonly '--color-primary-light': string;
243
+ readonly '--color-primary-soft': string;
244
+ readonly '--color-primary-surface': string;
245
+ readonly '--color-secondary': string;
246
+ readonly '--color-secondary-dark': string;
247
+ readonly '--color-secondary-light': string;
248
+ readonly '--color-secondary-soft': string;
249
+ readonly '--color-secondary-surface': string;
250
+ readonly '--color-ink': string;
251
+ readonly '--color-dark': string;
252
+ readonly '--color-dark-alt': string;
253
+ readonly '--color-muted': string;
254
+ readonly '--color-subtle': string;
255
+ readonly '--color-muted-surface': string;
256
+ readonly '--color-surface': string;
257
+ readonly '--color-canvas': string;
258
+ readonly '--color-border': string;
259
+ readonly '--color-border-strong': string;
260
+ readonly '--color-success': string;
261
+ readonly '--color-success-soft': string;
262
+ readonly '--color-success-surface': string;
263
+ readonly '--color-warning': string;
264
+ readonly '--color-warning-soft': string;
265
+ readonly '--color-warning-surface': string;
266
+ readonly '--color-error': string;
267
+ readonly '--color-error-soft': string;
268
+ readonly '--color-error-surface': string;
269
+ readonly '--color-info': string;
270
+ readonly '--color-info-soft': string;
271
+ readonly '--color-info-surface': string;
272
+ readonly '--color-overlay': string;
273
+ readonly '--font-sans': string;
274
+ readonly '--font-family-sans': string;
275
+ readonly '--radius-sm': string;
276
+ readonly '--radius-md': string;
277
+ readonly '--radius-lg': string;
278
+ readonly '--radius-xl': string;
279
+ readonly '--radius-pill': string;
280
+ readonly '--shadow-sm': string;
281
+ readonly '--shadow-md': string;
282
+ readonly '--shadow-lg': string;
283
+ readonly '--shadow-focus': string;
284
+ readonly '--motion-fast': string;
285
+ readonly '--motion-normal': string;
286
+ readonly '--motion-base': string;
287
+ readonly '--motion-slow': string;
288
+ readonly '--motion-easing': string;
289
+ readonly '--motion-ease': string;
290
+ readonly '--sidebar-width': string;
291
+ readonly '--sidebar-collapsed-width': string;
292
+ readonly '--header-min-height': string;
293
+ readonly '--control-height': string;
294
+ readonly '--control-height-lg': string;
295
+ };
296
+ type VmetaCssVariable = keyof typeof cssVariables;
297
+ declare function applyDesignTokens(root?: HTMLElement): void;
298
+
299
+ export { type VmetaCssVariable, applyDesignTokens, breakpoints, colors, cssVariables, designTokens as default, designTokens, layout, motion, radius, shadows, spacing, typography, zIndex };
package/dist/index.js ADDED
@@ -0,0 +1,211 @@
1
+ // tokens.json
2
+ var tokens_default = {
3
+ colors: {
4
+ primary: "#08a63f",
5
+ primaryDark: "#06752f",
6
+ primaryLight: "#31c964",
7
+ primarySoft: "#e9f9ef",
8
+ primarySurface: "#e9f9ef",
9
+ secondary: "#ff6416",
10
+ secondaryDark: "#e05510",
11
+ secondaryLight: "#ff8b52",
12
+ secondarySoft: "#fff1e9",
13
+ secondarySurface: "#fff1e9",
14
+ ink: "#121826",
15
+ dark: "#07130d",
16
+ darkAlt: "#0d2717",
17
+ muted: "#64748b",
18
+ subtle: "#94a3b8",
19
+ surface: "#ffffff",
20
+ canvas: "#edf4f1",
21
+ border: "#e2e8f0",
22
+ borderStrong: "#cbd5e1",
23
+ success: "#16a34a",
24
+ successSoft: "#dcfce7",
25
+ successSurface: "#dcfce7",
26
+ warning: "#f59e0b",
27
+ warningSoft: "#fffbeb",
28
+ warningSurface: "#fffbeb",
29
+ error: "#dc2626",
30
+ errorSoft: "#fef2f2",
31
+ errorSurface: "#fef2f2",
32
+ info: "#2563eb",
33
+ infoSoft: "#eff6ff",
34
+ infoSurface: "#eff6ff",
35
+ mutedSurface: "#f1f5f9",
36
+ overlay: "rgba(7, 19, 13, 0.52)"
37
+ },
38
+ typography: {
39
+ fontFamily: "'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
40
+ fontSize: {
41
+ xs: "0.75rem",
42
+ sm: "0.875rem",
43
+ base: "1rem",
44
+ lg: "1.125rem",
45
+ xl: "1.25rem",
46
+ "2xl": "1.5rem",
47
+ "3xl": "1.875rem",
48
+ "4xl": "2.25rem",
49
+ "5xl": "3rem"
50
+ },
51
+ lineHeight: {
52
+ tight: "1.25",
53
+ normal: "1.5",
54
+ relaxed: "1.7"
55
+ },
56
+ fontWeight: {
57
+ regular: 400,
58
+ medium: 500,
59
+ semibold: 600,
60
+ bold: 700,
61
+ extrabold: 800
62
+ }
63
+ },
64
+ radius: {
65
+ sm: "8px",
66
+ md: "12px",
67
+ lg: "16px",
68
+ xl: "24px",
69
+ pill: "9999px"
70
+ },
71
+ shadow: {
72
+ sm: "0 1px 2px rgb(7 19 13 / 6%)",
73
+ md: "0 8px 24px rgb(7 19 13 / 8%)",
74
+ lg: "0 18px 48px rgb(7 19 13 / 14%)",
75
+ focus: "0 0 0 3px rgb(8 166 63 / 18%)"
76
+ },
77
+ spacing: {
78
+ "1": "0.25rem",
79
+ "2": "0.5rem",
80
+ "3": "0.75rem",
81
+ "4": "1rem",
82
+ "5": "1.25rem",
83
+ "6": "1.5rem",
84
+ "8": "2rem",
85
+ "10": "2.5rem",
86
+ "12": "3rem"
87
+ },
88
+ breakpoint: {
89
+ sm: "640px",
90
+ md: "768px",
91
+ lg: "1024px",
92
+ xl: "1280px",
93
+ "2xl": "1536px"
94
+ },
95
+ motion: {
96
+ fast: "150ms",
97
+ normal: "220ms",
98
+ base: "220ms",
99
+ slow: "320ms",
100
+ easing: "cubic-bezier(0.2, 0, 0, 1)",
101
+ ease: "cubic-bezier(0.2, 0, 0, 1)"
102
+ },
103
+ layout: {
104
+ sidebarWidth: "264px",
105
+ sidebarCollapsedWidth: "80px",
106
+ headerMinHeight: "64px",
107
+ controlHeight: "40px",
108
+ controlHeightLarge: "48px",
109
+ pageGutterMobile: "12px",
110
+ pageGutterTablet: "20px",
111
+ pageGutterDesktop: "28px"
112
+ },
113
+ zIndex: {
114
+ sidebar: 50,
115
+ header: 40,
116
+ drawer: 80,
117
+ overlay: 70,
118
+ modal: 1e3,
119
+ toast: 1100
120
+ }
121
+ };
122
+
123
+ // src/index.ts
124
+ var designTokens = tokens_default;
125
+ var colors = designTokens.colors;
126
+ var typography = designTokens.typography;
127
+ var spacing = designTokens.spacing;
128
+ var radius = designTokens.radius;
129
+ var shadows = designTokens.shadow;
130
+ var breakpoints = designTokens.breakpoint;
131
+ var motion = designTokens.motion;
132
+ var layout = designTokens.layout;
133
+ var zIndex = designTokens.zIndex;
134
+ var cssVariables = {
135
+ "--color-primary": colors.primary,
136
+ "--color-primary-dark": colors.primaryDark,
137
+ "--color-primary-light": colors.primaryLight,
138
+ "--color-primary-soft": colors.primarySoft,
139
+ "--color-primary-surface": colors.primarySurface,
140
+ "--color-secondary": colors.secondary,
141
+ "--color-secondary-dark": colors.secondaryDark,
142
+ "--color-secondary-light": colors.secondaryLight,
143
+ "--color-secondary-soft": colors.secondarySoft,
144
+ "--color-secondary-surface": colors.secondarySurface,
145
+ "--color-ink": colors.ink,
146
+ "--color-dark": colors.dark,
147
+ "--color-dark-alt": colors.darkAlt,
148
+ "--color-muted": colors.muted,
149
+ "--color-subtle": colors.subtle,
150
+ "--color-muted-surface": colors.mutedSurface,
151
+ "--color-surface": colors.surface,
152
+ "--color-canvas": colors.canvas,
153
+ "--color-border": colors.border,
154
+ "--color-border-strong": colors.borderStrong,
155
+ "--color-success": colors.success,
156
+ "--color-success-soft": colors.successSoft,
157
+ "--color-success-surface": colors.successSurface,
158
+ "--color-warning": colors.warning,
159
+ "--color-warning-soft": colors.warningSoft,
160
+ "--color-warning-surface": colors.warningSurface,
161
+ "--color-error": colors.error,
162
+ "--color-error-soft": colors.errorSoft,
163
+ "--color-error-surface": colors.errorSurface,
164
+ "--color-info": colors.info,
165
+ "--color-info-soft": colors.infoSoft,
166
+ "--color-info-surface": colors.infoSurface,
167
+ "--color-overlay": colors.overlay,
168
+ "--font-sans": typography.fontFamily,
169
+ "--font-family-sans": typography.fontFamily,
170
+ "--radius-sm": radius.sm,
171
+ "--radius-md": radius.md,
172
+ "--radius-lg": radius.lg,
173
+ "--radius-xl": radius.xl,
174
+ "--radius-pill": radius.pill,
175
+ "--shadow-sm": shadows.sm,
176
+ "--shadow-md": shadows.md,
177
+ "--shadow-lg": shadows.lg,
178
+ "--shadow-focus": shadows.focus,
179
+ "--motion-fast": motion.fast,
180
+ "--motion-normal": motion.normal,
181
+ "--motion-base": motion.base,
182
+ "--motion-slow": motion.slow,
183
+ "--motion-easing": motion.easing,
184
+ "--motion-ease": motion.ease,
185
+ "--sidebar-width": layout.sidebarWidth,
186
+ "--sidebar-collapsed-width": layout.sidebarCollapsedWidth,
187
+ "--header-min-height": layout.headerMinHeight,
188
+ "--control-height": layout.controlHeight,
189
+ "--control-height-lg": layout.controlHeightLarge
190
+ };
191
+ function applyDesignTokens(root) {
192
+ if (typeof document === "undefined" && !root) return;
193
+ const target = root ?? document.documentElement;
194
+ Object.entries(cssVariables).forEach(([name, value]) => target.style.setProperty(name, String(value)));
195
+ }
196
+ var index_default = designTokens;
197
+ export {
198
+ applyDesignTokens,
199
+ breakpoints,
200
+ colors,
201
+ cssVariables,
202
+ index_default as default,
203
+ designTokens,
204
+ layout,
205
+ motion,
206
+ radius,
207
+ shadows,
208
+ spacing,
209
+ typography,
210
+ zIndex
211
+ };
package/dist/styles.css ADDED
@@ -0,0 +1,122 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --vmeta-color-primary: #08a63f;
4
+ --vmeta-color-primary-dark: #06752f;
5
+ --vmeta-color-primary-light: #31c964;
6
+ --vmeta-color-primary-soft: #e9f9ef;
7
+ --vmeta-color-secondary: #ff6416;
8
+ --vmeta-color-secondary-dark: #e05510;
9
+ --vmeta-color-secondary-soft: #fff1e9;
10
+ --vmeta-color-ink: #121826;
11
+ --vmeta-color-muted: #64748b;
12
+ --vmeta-color-subtle: #94a3b8;
13
+ --vmeta-color-surface: #fff;
14
+ --vmeta-color-canvas: #edf4f1;
15
+ --vmeta-color-border: #e2e8f0;
16
+ --vmeta-color-success: #16a34a;
17
+ --vmeta-color-warning: #f59e0b;
18
+ --vmeta-color-error: #dc2626;
19
+ --vmeta-color-info: #2563eb;
20
+ --vmeta-font-sans: 'Be Vietnam Pro', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
21
+ --vmeta-radius-sm: 8px;
22
+ --vmeta-radius-md: 12px;
23
+ --vmeta-radius-lg: 16px;
24
+ --vmeta-radius-xl: 24px;
25
+ --vmeta-shadow-sm: 0 1px 2px rgb(7 19 13 / 6%);
26
+ --vmeta-shadow-md: 0 8px 24px rgb(7 19 13 / 8%);
27
+ --vmeta-shadow-lg: 0 18px 48px rgb(7 19 13 / 14%);
28
+ --color-primary: var(--vmeta-color-primary);
29
+ --color-primary-dark: var(--vmeta-color-primary-dark);
30
+ --color-primary-light: var(--vmeta-color-primary-light);
31
+ --color-primary-soft: var(--vmeta-color-primary-soft);
32
+ --color-primary-surface: #e9f9ef;
33
+ --color-secondary: var(--vmeta-color-secondary);
34
+ --color-secondary-dark: var(--vmeta-color-secondary-dark);
35
+ --color-secondary-light: #ff8b52;
36
+ --color-secondary-soft: var(--vmeta-color-secondary-soft);
37
+ --color-secondary-surface: #fff1e9;
38
+ --color-ink: var(--vmeta-color-ink);
39
+ --color-dark: #07130d;
40
+ --color-dark-alt: #0d2717;
41
+ --color-muted: var(--vmeta-color-muted);
42
+ --color-subtle: var(--vmeta-color-subtle);
43
+ --color-muted-surface: #f1f5f9;
44
+ --color-surface: var(--vmeta-color-surface);
45
+ --color-canvas: var(--vmeta-color-canvas);
46
+ --color-border: var(--vmeta-color-border);
47
+ --color-border-strong: #cbd5e1;
48
+ --color-success: var(--vmeta-color-success);
49
+ --color-success-soft: #dcfce7;
50
+ --color-success-surface: #dcfce7;
51
+ --color-warning: var(--vmeta-color-warning);
52
+ --color-warning-soft: #fffbeb;
53
+ --color-warning-surface: #fffbeb;
54
+ --color-error: var(--vmeta-color-error);
55
+ --color-error-soft: #fef2f2;
56
+ --color-error-surface: #fef2f2;
57
+ --color-info: var(--vmeta-color-info);
58
+ --color-info-soft: #eff6ff;
59
+ --color-info-surface: #eff6ff;
60
+ --color-overlay: rgb(7 19 13 / 52%);
61
+ --font-sans: var(--vmeta-font-sans);
62
+ --font-family-sans: var(--font-sans);
63
+ --font-size-xs: 0.75rem;
64
+ --font-size-sm: 0.875rem;
65
+ --font-size-base: 1rem;
66
+ --font-size-lg: 1.125rem;
67
+ --font-size-xl: 1.25rem;
68
+ --font-size-2xl: 1.5rem;
69
+ --font-size-3xl: 1.875rem;
70
+ --font-size-4xl: 2.25rem;
71
+ --font-size-5xl: 3rem;
72
+ --line-height-tight: 1.25;
73
+ --line-height-normal: 1.5;
74
+ --line-height-relaxed: 1.7;
75
+ --space-1: 0.25rem;
76
+ --space-2: 0.5rem;
77
+ --space-3: 0.75rem;
78
+ --space-4: 1rem;
79
+ --space-5: 1.25rem;
80
+ --space-6: 1.5rem;
81
+ --space-8: 2rem;
82
+ --space-10: 2.5rem;
83
+ --space-12: 3rem;
84
+ --radius-sm: var(--vmeta-radius-sm);
85
+ --radius-md: var(--vmeta-radius-md);
86
+ --radius-lg: var(--vmeta-radius-lg);
87
+ --radius-xl: var(--vmeta-radius-xl);
88
+ --radius-pill: 9999px;
89
+ --shadow-sm: var(--vmeta-shadow-sm);
90
+ --shadow-md: var(--vmeta-shadow-md);
91
+ --shadow-lg: var(--vmeta-shadow-lg);
92
+ --shadow-focus: 0 0 0 3px rgb(8 166 63 / 18%);
93
+ --motion-fast: 150ms;
94
+ --motion-normal: 220ms;
95
+ --motion-base: 220ms;
96
+ --motion-slow: 320ms;
97
+ --motion-easing: cubic-bezier(0.2, 0, 0, 1);
98
+ --motion-ease: var(--motion-easing);
99
+ --sidebar-width: 264px;
100
+ --sidebar-collapsed-width: 80px;
101
+ --header-min-height: 64px;
102
+ --control-height: 40px;
103
+ --control-height-lg: 48px;
104
+ --page-gutter-mobile: 12px;
105
+ --page-gutter-tablet: 20px;
106
+ --page-gutter-desktop: 28px;
107
+ --z-sidebar: 50;
108
+ --z-header: 40;
109
+ --z-drawer: 80;
110
+ --z-overlay: 70;
111
+ --z-modal: 1000;
112
+ --z-toast: 1100;
113
+ }
114
+
115
+ @media (prefers-reduced-motion: reduce) {
116
+ :root {
117
+ --motion-fast: 1ms;
118
+ --motion-normal: 1ms;
119
+ --motion-base: 1ms;
120
+ --motion-slow: 1ms;
121
+ }
122
+ }
package/package.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "name": "@leduchai/vmeta-ui-tokens",
3
+ "version": "0.1.3",
4
+ "description": "Design tokens va CSS variables chinh thuc cua VMETA.",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": ["./dist/styles.css"],
8
+ "main": "./dist/index.cjs",
9
+ "module": "./dist/index.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.js",
15
+ "require": "./dist/index.cjs"
16
+ },
17
+ "./styles.css": "./dist/styles.css",
18
+ "./tokens.json": "./tokens.json"
19
+ },
20
+ "files": ["dist", "tokens.json", "README.md"],
21
+ "scripts": {
22
+ "build": "tsup src/index.ts --format esm,cjs --dts --clean && node ../../scripts/copy-file.mjs src/styles.css dist/styles.css"
23
+ },
24
+ "publishConfig": {
25
+ "access": "public"
26
+ }
27
+ }
package/tokens.json ADDED
@@ -0,0 +1,120 @@
1
+ {
2
+ "colors": {
3
+ "primary": "#08a63f",
4
+ "primaryDark": "#06752f",
5
+ "primaryLight": "#31c964",
6
+ "primarySoft": "#e9f9ef",
7
+ "primarySurface": "#e9f9ef",
8
+ "secondary": "#ff6416",
9
+ "secondaryDark": "#e05510",
10
+ "secondaryLight": "#ff8b52",
11
+ "secondarySoft": "#fff1e9",
12
+ "secondarySurface": "#fff1e9",
13
+ "ink": "#121826",
14
+ "dark": "#07130d",
15
+ "darkAlt": "#0d2717",
16
+ "muted": "#64748b",
17
+ "subtle": "#94a3b8",
18
+ "surface": "#ffffff",
19
+ "canvas": "#edf4f1",
20
+ "border": "#e2e8f0",
21
+ "borderStrong": "#cbd5e1",
22
+ "success": "#16a34a",
23
+ "successSoft": "#dcfce7",
24
+ "successSurface": "#dcfce7",
25
+ "warning": "#f59e0b",
26
+ "warningSoft": "#fffbeb",
27
+ "warningSurface": "#fffbeb",
28
+ "error": "#dc2626",
29
+ "errorSoft": "#fef2f2",
30
+ "errorSurface": "#fef2f2",
31
+ "info": "#2563eb",
32
+ "infoSoft": "#eff6ff",
33
+ "infoSurface": "#eff6ff",
34
+ "mutedSurface": "#f1f5f9",
35
+ "overlay": "rgba(7, 19, 13, 0.52)"
36
+ },
37
+ "typography": {
38
+ "fontFamily": "'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
39
+ "fontSize": {
40
+ "xs": "0.75rem",
41
+ "sm": "0.875rem",
42
+ "base": "1rem",
43
+ "lg": "1.125rem",
44
+ "xl": "1.25rem",
45
+ "2xl": "1.5rem",
46
+ "3xl": "1.875rem",
47
+ "4xl": "2.25rem",
48
+ "5xl": "3rem"
49
+ },
50
+ "lineHeight": {
51
+ "tight": "1.25",
52
+ "normal": "1.5",
53
+ "relaxed": "1.7"
54
+ },
55
+ "fontWeight": {
56
+ "regular": 400,
57
+ "medium": 500,
58
+ "semibold": 600,
59
+ "bold": 700,
60
+ "extrabold": 800
61
+ }
62
+ },
63
+ "radius": {
64
+ "sm": "8px",
65
+ "md": "12px",
66
+ "lg": "16px",
67
+ "xl": "24px",
68
+ "pill": "9999px"
69
+ },
70
+ "shadow": {
71
+ "sm": "0 1px 2px rgb(7 19 13 / 6%)",
72
+ "md": "0 8px 24px rgb(7 19 13 / 8%)",
73
+ "lg": "0 18px 48px rgb(7 19 13 / 14%)",
74
+ "focus": "0 0 0 3px rgb(8 166 63 / 18%)"
75
+ },
76
+ "spacing": {
77
+ "1": "0.25rem",
78
+ "2": "0.5rem",
79
+ "3": "0.75rem",
80
+ "4": "1rem",
81
+ "5": "1.25rem",
82
+ "6": "1.5rem",
83
+ "8": "2rem",
84
+ "10": "2.5rem",
85
+ "12": "3rem"
86
+ },
87
+ "breakpoint": {
88
+ "sm": "640px",
89
+ "md": "768px",
90
+ "lg": "1024px",
91
+ "xl": "1280px",
92
+ "2xl": "1536px"
93
+ },
94
+ "motion": {
95
+ "fast": "150ms",
96
+ "normal": "220ms",
97
+ "base": "220ms",
98
+ "slow": "320ms",
99
+ "easing": "cubic-bezier(0.2, 0, 0, 1)",
100
+ "ease": "cubic-bezier(0.2, 0, 0, 1)"
101
+ },
102
+ "layout": {
103
+ "sidebarWidth": "264px",
104
+ "sidebarCollapsedWidth": "80px",
105
+ "headerMinHeight": "64px",
106
+ "controlHeight": "40px",
107
+ "controlHeightLarge": "48px",
108
+ "pageGutterMobile": "12px",
109
+ "pageGutterTablet": "20px",
110
+ "pageGutterDesktop": "28px"
111
+ },
112
+ "zIndex": {
113
+ "sidebar": 50,
114
+ "header": 40,
115
+ "drawer": 80,
116
+ "overlay": 70,
117
+ "modal": 1000,
118
+ "toast": 1100
119
+ }
120
+ }