@prasworld/flux-ui 0.0.1

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 (21) hide show
  1. package/README.md +409 -0
  2. package/_index.scss +13 -0
  3. package/components/_button.scss +25 -0
  4. package/components/_index.scss +3 -0
  5. package/flux-ui.css +1 -0
  6. package/flux-ui.css.map +1 -0
  7. package/flux-ui.scss +15 -0
  8. package/index.d.ts +11 -0
  9. package/index.js +205 -0
  10. package/package.json +37 -0
  11. package/styles/_index.scss +7 -0
  12. package/styles/_layout.scss +223 -0
  13. package/styles/_reset.scss +192 -0
  14. package/styles/_root.scss +112 -0
  15. package/styles/_theme.scss +175 -0
  16. package/styles/_utilities.scss +434 -0
  17. package/styles/_variables.scss +323 -0
  18. package/styles/index.d.ts +26 -0
  19. package/styles/index.js +10 -0
  20. package/tokens/index.d.ts +218 -0
  21. package/tokens/index.js +205 -0
package/tokens/index.js ADDED
@@ -0,0 +1,205 @@
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
+ };