@vialiq/flux-ui 0.0.2 → 0.0.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 (4) hide show
  1. package/index.js +1 -205
  2. package/package.json +9 -1
  3. package/styles/index.js +1 -10
  4. package/tokens/index.js +1 -205
package/index.js CHANGED
@@ -1,205 +1 @@
1
- // libs/flux-ui/src/tokens/index.ts
2
- var tokens = {
3
- /**
4
- * COLOR TOKENS
5
- * Primary brand colors, semantic colors for states, and functional colors
6
- */
7
- colors: {
8
- primary: "var(--vi-color-primary)",
9
- secondary: "var(--vi-color-secondary)",
10
- success: "var(--vi-color-success)",
11
- warning: "var(--vi-color-warning)",
12
- error: "var(--vi-color-error)",
13
- info: "var(--vi-color-info)",
14
- // Neutral palette (grey aliases)
15
- neutral: {
16
- 100: "var(--vi-color-grey-100)",
17
- 200: "var(--vi-color-grey-200)",
18
- 300: "var(--vi-color-grey-300)",
19
- 400: "var(--vi-color-grey-400)",
20
- 500: "var(--vi-color-grey-500)",
21
- 600: "var(--vi-color-grey-600)",
22
- 700: "var(--vi-color-grey-700)",
23
- 800: "var(--vi-color-grey-800)",
24
- 900: "var(--vi-color-grey-900)"
25
- },
26
- // Color palettes
27
- palettes: {
28
- grey: {
29
- 100: "var(--vi-color-grey-100)",
30
- 200: "var(--vi-color-grey-200)",
31
- 300: "var(--vi-color-grey-300)",
32
- 400: "var(--vi-color-grey-400)",
33
- 500: "var(--vi-color-grey-500)",
34
- 600: "var(--vi-color-grey-600)",
35
- 700: "var(--vi-color-grey-700)",
36
- 800: "var(--vi-color-grey-800)",
37
- 900: "var(--vi-color-grey-900)"
38
- },
39
- red: {
40
- 100: "var(--vi-color-red-100)",
41
- 200: "var(--vi-color-red-200)",
42
- 300: "var(--vi-color-red-300)",
43
- 400: "var(--vi-color-red-400)",
44
- 500: "var(--vi-color-red-500)",
45
- 600: "var(--vi-color-red-600)",
46
- 700: "var(--vi-color-red-700)",
47
- 800: "var(--vi-color-red-800)",
48
- 900: "var(--vi-color-red-900)"
49
- },
50
- yellow: {
51
- 100: "var(--vi-color-yellow-100)",
52
- 200: "var(--vi-color-yellow-200)",
53
- 300: "var(--vi-color-yellow-300)",
54
- 400: "var(--vi-color-yellow-400)",
55
- 500: "var(--vi-color-yellow-500)",
56
- 600: "var(--vi-color-yellow-600)",
57
- 700: "var(--vi-color-yellow-700)",
58
- 800: "var(--vi-color-yellow-800)",
59
- 900: "var(--vi-color-yellow-900)"
60
- },
61
- green: {
62
- 100: "var(--vi-color-green-100)",
63
- 200: "var(--vi-color-green-200)",
64
- 300: "var(--vi-color-green-300)",
65
- 400: "var(--vi-color-green-400)",
66
- 500: "var(--vi-color-green-500)",
67
- 600: "var(--vi-color-green-600)",
68
- 700: "var(--vi-color-green-700)",
69
- 800: "var(--vi-color-green-800)",
70
- 900: "var(--vi-color-green-900)"
71
- },
72
- blue: {
73
- 100: "var(--vi-color-blue-100)",
74
- 200: "var(--vi-color-blue-200)",
75
- 300: "var(--vi-color-blue-300)",
76
- 400: "var(--vi-color-blue-400)",
77
- 500: "var(--vi-color-blue-500)",
78
- 600: "var(--vi-color-blue-600)",
79
- 700: "var(--vi-color-blue-700)",
80
- 800: "var(--vi-color-blue-800)",
81
- 900: "var(--vi-color-blue-900)"
82
- },
83
- purple: {
84
- 100: "var(--vi-color-purple-100)",
85
- 200: "var(--vi-color-purple-200)",
86
- 300: "var(--vi-color-purple-300)",
87
- 400: "var(--vi-color-purple-400)",
88
- 500: "var(--vi-color-purple-500)",
89
- 600: "var(--vi-color-purple-600)",
90
- 700: "var(--vi-color-purple-700)",
91
- 800: "var(--vi-color-purple-800)",
92
- 900: "var(--vi-color-purple-900)"
93
- }
94
- },
95
- // Functional colors
96
- background: "var(--vi-color-background)",
97
- foreground: "var(--vi-color-foreground)",
98
- border: "var(--vi-color-border)"
99
- },
100
- /**
101
- * SPACING TOKENS
102
- * 8px base unit system: xs (8px), sm (16px), md (24px), lg (32px), xl (40px), etc.
103
- */
104
- spacing: {
105
- xs: "var(--vi-spacing-xs)",
106
- sm: "var(--vi-spacing-sm)",
107
- md: "var(--vi-spacing-md)",
108
- lg: "var(--vi-spacing-lg)",
109
- xl: "var(--vi-spacing-xl)",
110
- "2xl": "var(--vi-spacing-2xl)",
111
- "3xl": "var(--vi-spacing-3xl)"
112
- },
113
- /**
114
- * TYPOGRAPHY TOKENS
115
- * Font families, sizes, weights, and line heights
116
- */
117
- typography: {
118
- fontFamily: {
119
- base: "var(--vi-font-family-base)",
120
- mono: "var(--vi-font-family-mono)"
121
- },
122
- fontSize: {
123
- xs: "var(--vi-font-size-xs)",
124
- sm: "var(--vi-font-size-sm)",
125
- base: "var(--vi-font-size-base)",
126
- lg: "var(--vi-font-size-lg)",
127
- xl: "var(--vi-font-size-xl)",
128
- "2xl": "var(--vi-font-size-2xl)",
129
- "3xl": "var(--vi-font-size-3xl)"
130
- },
131
- fontWeight: {
132
- light: 300,
133
- normal: 400,
134
- medium: 500,
135
- semibold: 600,
136
- bold: 700
137
- },
138
- lineHeight: {
139
- tight: 1.2,
140
- normal: 1.5,
141
- relaxed: 1.75
142
- }
143
- },
144
- /**
145
- * SHADOW TOKENS
146
- * Depth levels for elevation
147
- */
148
- shadows: {
149
- sm: "var(--vi-shadow-sm)",
150
- md: "var(--vi-shadow-md)",
151
- lg: "var(--vi-shadow-lg)",
152
- xl: "var(--vi-shadow-xl)"
153
- },
154
- /**
155
- * BORDER TOKENS
156
- * Border radius and widths
157
- */
158
- borders: {
159
- radius: {
160
- sm: "var(--vi-border-radius-sm)",
161
- md: "var(--vi-border-radius-md)",
162
- lg: "var(--vi-border-radius-lg)",
163
- xl: "var(--vi-border-radius-xl)"
164
- },
165
- width: {
166
- thin: "var(--vi-border-width-thin)",
167
- base: "var(--vi-border-width-base)",
168
- thick: "var(--vi-border-width-thick)"
169
- }
170
- },
171
- /**
172
- * BREAKPOINT TOKENS
173
- * Responsive design breakpoints (raw pixel values, not CSS vars)
174
- * Use in a JS template literal: `@media (min-width: ${tokens.breakpoints.sm})`
175
- * Use in plain CSS: @media (min-width: 640px)
176
- */
177
- breakpoints: {
178
- xs: "0",
179
- sm: "640px",
180
- md: "768px",
181
- lg: "1024px",
182
- xl: "1280px",
183
- "2xl": "1536px"
184
- },
185
- /**
186
- * Z-INDEX TOKENS
187
- * Stacking context levels (raw integers, not CSS vars)
188
- * Use in CSS: z-index: tokens.zIndex.modal (e.g. 1050)
189
- */
190
- zIndex: {
191
- hide: -1,
192
- auto: "auto",
193
- base: 0,
194
- dropdown: 1e3,
195
- sticky: 1020,
196
- fixed: 1030,
197
- backdrop: 1040,
198
- modal: 1050,
199
- popover: 1060,
200
- tooltip: 1070
201
- }
202
- };
203
- export {
204
- tokens
205
- };
1
+ var r={colors:{primary:"var(--vi-color-primary)",secondary:"var(--vi-color-secondary)",success:"var(--vi-color-success)",warning:"var(--vi-color-warning)",error:"var(--vi-color-error)",info:"var(--vi-color-info)",neutral:{100:"var(--vi-color-grey-100)",200:"var(--vi-color-grey-200)",300:"var(--vi-color-grey-300)",400:"var(--vi-color-grey-400)",500:"var(--vi-color-grey-500)",600:"var(--vi-color-grey-600)",700:"var(--vi-color-grey-700)",800:"var(--vi-color-grey-800)",900:"var(--vi-color-grey-900)"},palettes:{grey:{100:"var(--vi-color-grey-100)",200:"var(--vi-color-grey-200)",300:"var(--vi-color-grey-300)",400:"var(--vi-color-grey-400)",500:"var(--vi-color-grey-500)",600:"var(--vi-color-grey-600)",700:"var(--vi-color-grey-700)",800:"var(--vi-color-grey-800)",900:"var(--vi-color-grey-900)"},red:{100:"var(--vi-color-red-100)",200:"var(--vi-color-red-200)",300:"var(--vi-color-red-300)",400:"var(--vi-color-red-400)",500:"var(--vi-color-red-500)",600:"var(--vi-color-red-600)",700:"var(--vi-color-red-700)",800:"var(--vi-color-red-800)",900:"var(--vi-color-red-900)"},yellow:{100:"var(--vi-color-yellow-100)",200:"var(--vi-color-yellow-200)",300:"var(--vi-color-yellow-300)",400:"var(--vi-color-yellow-400)",500:"var(--vi-color-yellow-500)",600:"var(--vi-color-yellow-600)",700:"var(--vi-color-yellow-700)",800:"var(--vi-color-yellow-800)",900:"var(--vi-color-yellow-900)"},green:{100:"var(--vi-color-green-100)",200:"var(--vi-color-green-200)",300:"var(--vi-color-green-300)",400:"var(--vi-color-green-400)",500:"var(--vi-color-green-500)",600:"var(--vi-color-green-600)",700:"var(--vi-color-green-700)",800:"var(--vi-color-green-800)",900:"var(--vi-color-green-900)"},blue:{100:"var(--vi-color-blue-100)",200:"var(--vi-color-blue-200)",300:"var(--vi-color-blue-300)",400:"var(--vi-color-blue-400)",500:"var(--vi-color-blue-500)",600:"var(--vi-color-blue-600)",700:"var(--vi-color-blue-700)",800:"var(--vi-color-blue-800)",900:"var(--vi-color-blue-900)"},purple:{100:"var(--vi-color-purple-100)",200:"var(--vi-color-purple-200)",300:"var(--vi-color-purple-300)",400:"var(--vi-color-purple-400)",500:"var(--vi-color-purple-500)",600:"var(--vi-color-purple-600)",700:"var(--vi-color-purple-700)",800:"var(--vi-color-purple-800)",900:"var(--vi-color-purple-900)"}},background:"var(--vi-color-background)",foreground:"var(--vi-color-foreground)",border:"var(--vi-color-border)"},spacing:{xs:"var(--vi-spacing-xs)",sm:"var(--vi-spacing-sm)",md:"var(--vi-spacing-md)",lg:"var(--vi-spacing-lg)",xl:"var(--vi-spacing-xl)","2xl":"var(--vi-spacing-2xl)","3xl":"var(--vi-spacing-3xl)"},typography:{fontFamily:{base:"var(--vi-font-family-base)",mono:"var(--vi-font-family-mono)"},fontSize:{xs:"var(--vi-font-size-xs)",sm:"var(--vi-font-size-sm)",base:"var(--vi-font-size-base)",lg:"var(--vi-font-size-lg)",xl:"var(--vi-font-size-xl)","2xl":"var(--vi-font-size-2xl)","3xl":"var(--vi-font-size-3xl)"},fontWeight:{light:300,normal:400,medium:500,semibold:600,bold:700},lineHeight:{tight:1.2,normal:1.5,relaxed:1.75}},shadows:{sm:"var(--vi-shadow-sm)",md:"var(--vi-shadow-md)",lg:"var(--vi-shadow-lg)",xl:"var(--vi-shadow-xl)"},borders:{radius:{sm:"var(--vi-border-radius-sm)",md:"var(--vi-border-radius-md)",lg:"var(--vi-border-radius-lg)",xl:"var(--vi-border-radius-xl)"},width:{thin:"var(--vi-border-width-thin)",base:"var(--vi-border-width-base)",thick:"var(--vi-border-width-thick)"}},breakpoints:{xs:"0",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},zIndex:{hide:-1,auto:"auto",base:0,dropdown:1e3,sticky:1020,fixed:1030,backdrop:1040,modal:1050,popover:1060,tooltip:1070}};export{r as tokens};
package/package.json CHANGED
@@ -1,6 +1,14 @@
1
1
  {
2
2
  "name": "@vialiq/flux-ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
+ "private": false,
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/prasworld/Vialiq.git"
8
+ },
9
+ "publishConfig": {
10
+ "access": "public"
11
+ },
4
12
  "type": "module",
5
13
  "description": "Custom minimal CSS/SASS framework for microfrontend product",
6
14
  "license": "MIT",
package/styles/index.js CHANGED
@@ -1,10 +1 @@
1
- // libs/flux-ui/src/styles/index.ts
2
- var fluxUiStyles = {
3
- variables: "@vialiq/flux-ui/styles/_variables.scss",
4
- reset: "@vialiq/flux-ui/styles/_reset.scss",
5
- layout: "@vialiq/flux-ui/styles/_layout.scss",
6
- utilities: "@vialiq/flux-ui/styles/_utilities.scss"
7
- };
8
- export {
9
- fluxUiStyles
10
- };
1
+ var s={variables:"@vialiq/flux-ui/styles/_variables.scss",reset:"@vialiq/flux-ui/styles/_reset.scss",layout:"@vialiq/flux-ui/styles/_layout.scss",utilities:"@vialiq/flux-ui/styles/_utilities.scss"};export{s as fluxUiStyles};
package/tokens/index.js CHANGED
@@ -1,205 +1 @@
1
- // libs/flux-ui/src/tokens/index.ts
2
- var tokens = {
3
- /**
4
- * COLOR TOKENS
5
- * Primary brand colors, semantic colors for states, and functional colors
6
- */
7
- colors: {
8
- primary: "var(--vi-color-primary)",
9
- secondary: "var(--vi-color-secondary)",
10
- success: "var(--vi-color-success)",
11
- warning: "var(--vi-color-warning)",
12
- error: "var(--vi-color-error)",
13
- info: "var(--vi-color-info)",
14
- // Neutral palette (grey aliases)
15
- neutral: {
16
- 100: "var(--vi-color-grey-100)",
17
- 200: "var(--vi-color-grey-200)",
18
- 300: "var(--vi-color-grey-300)",
19
- 400: "var(--vi-color-grey-400)",
20
- 500: "var(--vi-color-grey-500)",
21
- 600: "var(--vi-color-grey-600)",
22
- 700: "var(--vi-color-grey-700)",
23
- 800: "var(--vi-color-grey-800)",
24
- 900: "var(--vi-color-grey-900)"
25
- },
26
- // Color palettes
27
- palettes: {
28
- grey: {
29
- 100: "var(--vi-color-grey-100)",
30
- 200: "var(--vi-color-grey-200)",
31
- 300: "var(--vi-color-grey-300)",
32
- 400: "var(--vi-color-grey-400)",
33
- 500: "var(--vi-color-grey-500)",
34
- 600: "var(--vi-color-grey-600)",
35
- 700: "var(--vi-color-grey-700)",
36
- 800: "var(--vi-color-grey-800)",
37
- 900: "var(--vi-color-grey-900)"
38
- },
39
- red: {
40
- 100: "var(--vi-color-red-100)",
41
- 200: "var(--vi-color-red-200)",
42
- 300: "var(--vi-color-red-300)",
43
- 400: "var(--vi-color-red-400)",
44
- 500: "var(--vi-color-red-500)",
45
- 600: "var(--vi-color-red-600)",
46
- 700: "var(--vi-color-red-700)",
47
- 800: "var(--vi-color-red-800)",
48
- 900: "var(--vi-color-red-900)"
49
- },
50
- yellow: {
51
- 100: "var(--vi-color-yellow-100)",
52
- 200: "var(--vi-color-yellow-200)",
53
- 300: "var(--vi-color-yellow-300)",
54
- 400: "var(--vi-color-yellow-400)",
55
- 500: "var(--vi-color-yellow-500)",
56
- 600: "var(--vi-color-yellow-600)",
57
- 700: "var(--vi-color-yellow-700)",
58
- 800: "var(--vi-color-yellow-800)",
59
- 900: "var(--vi-color-yellow-900)"
60
- },
61
- green: {
62
- 100: "var(--vi-color-green-100)",
63
- 200: "var(--vi-color-green-200)",
64
- 300: "var(--vi-color-green-300)",
65
- 400: "var(--vi-color-green-400)",
66
- 500: "var(--vi-color-green-500)",
67
- 600: "var(--vi-color-green-600)",
68
- 700: "var(--vi-color-green-700)",
69
- 800: "var(--vi-color-green-800)",
70
- 900: "var(--vi-color-green-900)"
71
- },
72
- blue: {
73
- 100: "var(--vi-color-blue-100)",
74
- 200: "var(--vi-color-blue-200)",
75
- 300: "var(--vi-color-blue-300)",
76
- 400: "var(--vi-color-blue-400)",
77
- 500: "var(--vi-color-blue-500)",
78
- 600: "var(--vi-color-blue-600)",
79
- 700: "var(--vi-color-blue-700)",
80
- 800: "var(--vi-color-blue-800)",
81
- 900: "var(--vi-color-blue-900)"
82
- },
83
- purple: {
84
- 100: "var(--vi-color-purple-100)",
85
- 200: "var(--vi-color-purple-200)",
86
- 300: "var(--vi-color-purple-300)",
87
- 400: "var(--vi-color-purple-400)",
88
- 500: "var(--vi-color-purple-500)",
89
- 600: "var(--vi-color-purple-600)",
90
- 700: "var(--vi-color-purple-700)",
91
- 800: "var(--vi-color-purple-800)",
92
- 900: "var(--vi-color-purple-900)"
93
- }
94
- },
95
- // Functional colors
96
- background: "var(--vi-color-background)",
97
- foreground: "var(--vi-color-foreground)",
98
- border: "var(--vi-color-border)"
99
- },
100
- /**
101
- * SPACING TOKENS
102
- * 8px base unit system: xs (8px), sm (16px), md (24px), lg (32px), xl (40px), etc.
103
- */
104
- spacing: {
105
- xs: "var(--vi-spacing-xs)",
106
- sm: "var(--vi-spacing-sm)",
107
- md: "var(--vi-spacing-md)",
108
- lg: "var(--vi-spacing-lg)",
109
- xl: "var(--vi-spacing-xl)",
110
- "2xl": "var(--vi-spacing-2xl)",
111
- "3xl": "var(--vi-spacing-3xl)"
112
- },
113
- /**
114
- * TYPOGRAPHY TOKENS
115
- * Font families, sizes, weights, and line heights
116
- */
117
- typography: {
118
- fontFamily: {
119
- base: "var(--vi-font-family-base)",
120
- mono: "var(--vi-font-family-mono)"
121
- },
122
- fontSize: {
123
- xs: "var(--vi-font-size-xs)",
124
- sm: "var(--vi-font-size-sm)",
125
- base: "var(--vi-font-size-base)",
126
- lg: "var(--vi-font-size-lg)",
127
- xl: "var(--vi-font-size-xl)",
128
- "2xl": "var(--vi-font-size-2xl)",
129
- "3xl": "var(--vi-font-size-3xl)"
130
- },
131
- fontWeight: {
132
- light: 300,
133
- normal: 400,
134
- medium: 500,
135
- semibold: 600,
136
- bold: 700
137
- },
138
- lineHeight: {
139
- tight: 1.2,
140
- normal: 1.5,
141
- relaxed: 1.75
142
- }
143
- },
144
- /**
145
- * SHADOW TOKENS
146
- * Depth levels for elevation
147
- */
148
- shadows: {
149
- sm: "var(--vi-shadow-sm)",
150
- md: "var(--vi-shadow-md)",
151
- lg: "var(--vi-shadow-lg)",
152
- xl: "var(--vi-shadow-xl)"
153
- },
154
- /**
155
- * BORDER TOKENS
156
- * Border radius and widths
157
- */
158
- borders: {
159
- radius: {
160
- sm: "var(--vi-border-radius-sm)",
161
- md: "var(--vi-border-radius-md)",
162
- lg: "var(--vi-border-radius-lg)",
163
- xl: "var(--vi-border-radius-xl)"
164
- },
165
- width: {
166
- thin: "var(--vi-border-width-thin)",
167
- base: "var(--vi-border-width-base)",
168
- thick: "var(--vi-border-width-thick)"
169
- }
170
- },
171
- /**
172
- * BREAKPOINT TOKENS
173
- * Responsive design breakpoints (raw pixel values, not CSS vars)
174
- * Use in a JS template literal: `@media (min-width: ${tokens.breakpoints.sm})`
175
- * Use in plain CSS: @media (min-width: 640px)
176
- */
177
- breakpoints: {
178
- xs: "0",
179
- sm: "640px",
180
- md: "768px",
181
- lg: "1024px",
182
- xl: "1280px",
183
- "2xl": "1536px"
184
- },
185
- /**
186
- * Z-INDEX TOKENS
187
- * Stacking context levels (raw integers, not CSS vars)
188
- * Use in CSS: z-index: tokens.zIndex.modal (e.g. 1050)
189
- */
190
- zIndex: {
191
- hide: -1,
192
- auto: "auto",
193
- base: 0,
194
- dropdown: 1e3,
195
- sticky: 1020,
196
- fixed: 1030,
197
- backdrop: 1040,
198
- modal: 1050,
199
- popover: 1060,
200
- tooltip: 1070
201
- }
202
- };
203
- export {
204
- tokens
205
- };
1
+ var r={colors:{primary:"var(--vi-color-primary)",secondary:"var(--vi-color-secondary)",success:"var(--vi-color-success)",warning:"var(--vi-color-warning)",error:"var(--vi-color-error)",info:"var(--vi-color-info)",neutral:{100:"var(--vi-color-grey-100)",200:"var(--vi-color-grey-200)",300:"var(--vi-color-grey-300)",400:"var(--vi-color-grey-400)",500:"var(--vi-color-grey-500)",600:"var(--vi-color-grey-600)",700:"var(--vi-color-grey-700)",800:"var(--vi-color-grey-800)",900:"var(--vi-color-grey-900)"},palettes:{grey:{100:"var(--vi-color-grey-100)",200:"var(--vi-color-grey-200)",300:"var(--vi-color-grey-300)",400:"var(--vi-color-grey-400)",500:"var(--vi-color-grey-500)",600:"var(--vi-color-grey-600)",700:"var(--vi-color-grey-700)",800:"var(--vi-color-grey-800)",900:"var(--vi-color-grey-900)"},red:{100:"var(--vi-color-red-100)",200:"var(--vi-color-red-200)",300:"var(--vi-color-red-300)",400:"var(--vi-color-red-400)",500:"var(--vi-color-red-500)",600:"var(--vi-color-red-600)",700:"var(--vi-color-red-700)",800:"var(--vi-color-red-800)",900:"var(--vi-color-red-900)"},yellow:{100:"var(--vi-color-yellow-100)",200:"var(--vi-color-yellow-200)",300:"var(--vi-color-yellow-300)",400:"var(--vi-color-yellow-400)",500:"var(--vi-color-yellow-500)",600:"var(--vi-color-yellow-600)",700:"var(--vi-color-yellow-700)",800:"var(--vi-color-yellow-800)",900:"var(--vi-color-yellow-900)"},green:{100:"var(--vi-color-green-100)",200:"var(--vi-color-green-200)",300:"var(--vi-color-green-300)",400:"var(--vi-color-green-400)",500:"var(--vi-color-green-500)",600:"var(--vi-color-green-600)",700:"var(--vi-color-green-700)",800:"var(--vi-color-green-800)",900:"var(--vi-color-green-900)"},blue:{100:"var(--vi-color-blue-100)",200:"var(--vi-color-blue-200)",300:"var(--vi-color-blue-300)",400:"var(--vi-color-blue-400)",500:"var(--vi-color-blue-500)",600:"var(--vi-color-blue-600)",700:"var(--vi-color-blue-700)",800:"var(--vi-color-blue-800)",900:"var(--vi-color-blue-900)"},purple:{100:"var(--vi-color-purple-100)",200:"var(--vi-color-purple-200)",300:"var(--vi-color-purple-300)",400:"var(--vi-color-purple-400)",500:"var(--vi-color-purple-500)",600:"var(--vi-color-purple-600)",700:"var(--vi-color-purple-700)",800:"var(--vi-color-purple-800)",900:"var(--vi-color-purple-900)"}},background:"var(--vi-color-background)",foreground:"var(--vi-color-foreground)",border:"var(--vi-color-border)"},spacing:{xs:"var(--vi-spacing-xs)",sm:"var(--vi-spacing-sm)",md:"var(--vi-spacing-md)",lg:"var(--vi-spacing-lg)",xl:"var(--vi-spacing-xl)","2xl":"var(--vi-spacing-2xl)","3xl":"var(--vi-spacing-3xl)"},typography:{fontFamily:{base:"var(--vi-font-family-base)",mono:"var(--vi-font-family-mono)"},fontSize:{xs:"var(--vi-font-size-xs)",sm:"var(--vi-font-size-sm)",base:"var(--vi-font-size-base)",lg:"var(--vi-font-size-lg)",xl:"var(--vi-font-size-xl)","2xl":"var(--vi-font-size-2xl)","3xl":"var(--vi-font-size-3xl)"},fontWeight:{light:300,normal:400,medium:500,semibold:600,bold:700},lineHeight:{tight:1.2,normal:1.5,relaxed:1.75}},shadows:{sm:"var(--vi-shadow-sm)",md:"var(--vi-shadow-md)",lg:"var(--vi-shadow-lg)",xl:"var(--vi-shadow-xl)"},borders:{radius:{sm:"var(--vi-border-radius-sm)",md:"var(--vi-border-radius-md)",lg:"var(--vi-border-radius-lg)",xl:"var(--vi-border-radius-xl)"},width:{thin:"var(--vi-border-width-thin)",base:"var(--vi-border-width-base)",thick:"var(--vi-border-width-thick)"}},breakpoints:{xs:"0",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},zIndex:{hide:-1,auto:"auto",base:0,dropdown:1e3,sticky:1020,fixed:1030,backdrop:1040,modal:1050,popover:1060,tooltip:1070}};export{r as tokens};