@vialiq/flux-ui 0.0.1 → 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 (11) hide show
  1. package/README.md +20 -20
  2. package/_index.scss +3 -1
  3. package/components/_button.scss +16 -14
  4. package/components/_index.scss +1 -1
  5. package/index.d.ts +1 -1
  6. package/index.js +1 -205
  7. package/package.json +18 -6
  8. package/styles/_index.scss +1 -1
  9. package/styles/index.d.ts +9 -9
  10. package/styles/index.js +1 -10
  11. package/tokens/index.js +1 -205
package/README.md CHANGED
@@ -18,9 +18,9 @@ A custom, lightweight CSS/SASS framework built for microfrontend architectures.
18
18
  ### NPM
19
19
 
20
20
  ```bash
21
- npm install @vi/flux-ui
21
+ npm install @vialiq/flux-ui
22
22
  # or
23
- yarn add @vi/flux-ui
23
+ yarn add @vialiq/flux-ui
24
24
  ```
25
25
 
26
26
  ### Monorepo (Local)
@@ -30,9 +30,9 @@ yarn add @vi/flux-ui
30
30
  {
31
31
  "compilerOptions": {
32
32
  "paths": {
33
- "@vi/flux-ui": ["libs/flux-ui/src/index.ts"],
34
- "@vi/flux-ui/tokens": ["libs/flux-ui/src/tokens/index.ts"],
35
- "@vi/flux-ui/styles": ["libs/flux-ui/src/styles/index.ts"]
33
+ "@vialiq/flux-ui": ["libs/flux-ui/src/index.ts"],
34
+ "@vialiq/flux-ui/tokens": ["libs/flux-ui/src/tokens/index.ts"],
35
+ "@vialiq/flux-ui/styles": ["libs/flux-ui/src/styles/index.ts"]
36
36
  }
37
37
  }
38
38
  }
@@ -47,15 +47,15 @@ yarn add @vi/flux-ui
47
47
  ```scss
48
48
  // In your app/src/styles.scss (or global style)
49
49
 
50
- @use '@vi/flux-ui/styles/_variables.scss' as *;
51
- @use '@vi/flux-ui/styles/_reset.scss';
52
- @use '@vi/flux-ui/styles/_layout.scss';
53
- @use '@vi/flux-ui/styles/_utilities.scss';
50
+ @use '@vialiq/flux-ui/styles/_variables.scss' as *;
51
+ @use '@vialiq/flux-ui/styles/_reset.scss';
52
+ @use '@vialiq/flux-ui/styles/_layout.scss';
53
+ @use '@vialiq/flux-ui/styles/_utilities.scss';
54
54
 
55
55
  // Now all utilities available:
56
56
  // - Classes: .p-md, .text-lg, .bg-primary, .flex, .gap-sm, etc.
57
57
  // - Variables: $spacing-md, $color-primary, $font-size-base, etc.
58
- // - Theming: @use '@vi/flux-ui/styles/theme' as theme; then @include theme.vi-theme(theme.$vi-theme--light, $emit-custom-properties: true);
58
+ // - Theming: @use '@vialiq/flux-ui/styles/theme' as theme; then @include theme.vi-theme(theme.$vi-theme--light, $emit-custom-properties: true);
59
59
  ```
60
60
 
61
61
  **Advantages:**
@@ -68,8 +68,8 @@ yarn add @vi/flux-ui
68
68
  **Example Component (Angular):**
69
69
  ```scss
70
70
  // button.component.scss
71
- @use '@vi/flux-ui/styles/variables' as *;
72
- @use '@vi/flux-ui/styles/theme' as theme;
71
+ @use '@vialiq/flux-ui/styles/variables' as *;
72
+ @use '@vialiq/flux-ui/styles/theme' as theme;
73
73
 
74
74
  :host {
75
75
  @include theme.vi-theme(theme.$vi-theme--light, $emit-custom-properties: true);
@@ -93,7 +93,7 @@ yarn add @vi/flux-ui
93
93
 
94
94
  ```html
95
95
  <!-- In your HTML <head> -->
96
- <link rel="stylesheet" href="./node_modules/@vi/flux-ui/flux-ui.css">
96
+ <link rel="stylesheet" href="./node_modules/@vialiq/flux-ui/flux-ui.css">
97
97
 
98
98
  <!-- Now all utilities available via classes -->
99
99
  <div class="flex justify-center items-center gap-md p-lg">
@@ -120,8 +120,8 @@ yarn add @vi/flux-ui
120
120
 
121
121
  ```typescript
122
122
  // In your component file
123
- import '@vi/flux-ui/flux-ui.css'; // Import pre-compiled CSS
124
- import { tokens } from '@vi/flux-ui'; // Import tokens for JS styling
123
+ import '@vialiq/flux-ui/flux-ui.css'; // Import pre-compiled CSS
124
+ import { tokens } from '@vialiq/flux-ui'; // Import tokens for JS styling
125
125
 
126
126
  class MyComponent extends LitElement {
127
127
  static styles = css`
@@ -150,7 +150,7 @@ class MyComponent extends LitElement {
150
150
  ## Using Tokens
151
151
 
152
152
  ```typescript
153
- import { tokens } from '@vi/flux-ui';
153
+ import { tokens } from '@vialiq/flux-ui';
154
154
 
155
155
  const buttonStyle = {
156
156
  padding: tokens.spacing.md, // 24px
@@ -216,7 +216,7 @@ Design System (Shared)
216
216
 
217
217
  ```typescript
218
218
  // apps/shell/src/bootstrap.ts
219
- import '@vi/flux-ui/flux-ui.css'; // Load once for all MFEs
219
+ import '@vialiq/flux-ui/flux-ui.css'; // Load once for all MFEs
220
220
 
221
221
  bootstrapApplication(App).catch(err => console.error(err));
222
222
  ```
@@ -227,7 +227,7 @@ bootstrapApplication(App).catch(err => console.error(err));
227
227
  // apps/remote1/src/bootstrap.ts
228
228
  // ❌ DO NOT import styles (shell already loaded them)
229
229
 
230
- import { tokens } from '@vi/flux-ui'; // ✅ Import tokens only
230
+ import { tokens } from '@vialiq/flux-ui'; // ✅ Import tokens only
231
231
 
232
232
  bootstrapApplication(RemoteEntry).catch(err => console.error(err));
233
233
  ```
@@ -237,7 +237,7 @@ bootstrapApplication(RemoteEntry).catch(err => console.error(err));
237
237
  ### TypeScript (Type-Safe)
238
238
 
239
239
  ```typescript
240
- import { tokens } from '@vi/flux-ui';
240
+ import { tokens } from '@vialiq/flux-ui';
241
241
 
242
242
  const value = tokens.spacing.md; // IDE autocomplete, type checking
243
243
  ```
@@ -245,7 +245,7 @@ const value = tokens.spacing.md; // IDE autocomplete, type checking
245
245
  ### SCSS (Build-Time)
246
246
 
247
247
  ```scss
248
- @use '@vi/flux-ui/styles/variables' as *;
248
+ @use '@vialiq/flux-ui/styles/variables' as *;
249
249
 
250
250
  .button {
251
251
  padding: $spacing-md;
package/_index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Complete flux-ui style import.
3
3
  *
4
- * Usage: @use '@vi/flux-ui';
4
+ * Usage: @use '@vialiq/flux-ui';
5
5
  *
6
6
  * Forwards all style modules in preferred order:
7
7
  * 1. Root (cascade layers)
@@ -9,5 +9,7 @@
9
9
  * 3. Theme (design tokens)
10
10
  * 4. Layout (structural helpers)
11
11
  * 5. Utilities (low-level classes)
12
+ * 6. Components (vi-button, etc.)
12
13
  */
13
14
  @forward 'styles';
15
+ @forward 'components';
package/components/_button.scss CHANGED
@@ -8,18 +8,20 @@
8
8
 
9
9
  @use '../styles/variables' as tokens;
10
10
 
11
- .button {
12
- display: inline-flex;
13
- align-items: center;
14
- justify-content: center;
15
- gap: #{tokens.$spacing-xs};
16
- border: #{tokens.$border-width-thin} solid transparent;
17
- border-radius: var(--vi-button-shape-border-radius, #{tokens.$border-radius-md});
18
- padding: var(--vi-button-spacing-padding-block, #{tokens.$spacing-sm}) var(--vi-button-spacing-padding-inline, #{tokens.$spacing-md});
19
- font-size: var(--vi-button-typography-font-size, #{tokens.$font-size-base});
20
- font-weight: var(--vi-button-typography-font-weight, #{tokens.$font-weight-semibold});
21
- line-height: #{tokens.$line-height-tight};
22
- cursor: pointer;
23
- user-select: none;
24
- transition: opacity var(--vi-button-effect-transition-duration, 160ms) ease;
11
+ @layer components {
12
+ .button {
13
+ display: inline-flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ gap: #{tokens.$spacing-xs};
17
+ border: #{tokens.$border-width-thin} solid transparent;
18
+ border-radius: var(--vi-button-shape-border-radius, #{tokens.$border-radius-md});
19
+ padding: var(--vi-button-spacing-padding-block, #{tokens.$spacing-sm}) var(--vi-button-spacing-padding-inline, #{tokens.$spacing-md});
20
+ font-size: var(--vi-button-typography-font-size, #{tokens.$font-size-base});
21
+ font-weight: var(--vi-button-typography-font-weight, #{tokens.$font-weight-semibold});
22
+ line-height: #{tokens.$line-height-tight};
23
+ cursor: pointer;
24
+ user-select: none;
25
+ transition: opacity var(--vi-button-effect-transition-duration, 160ms) ease;
26
+ }
25
27
  }
package/components/_index.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  // Forwards all component base style modules.
2
- // Usage: @use '@vi/flux-ui/components';
2
+ // Usage: @use '@vialiq/flux-ui/components';
3
3
  @forward 'button';
package/index.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  * Re-exports all design tokens and related types.
5
5
  *
6
6
  * Usage:
7
- * import { tokens } from '@vi/flux-ui';
7
+ * import { tokens } from '@vialiq/flux-ui';
8
8
  * const color = tokens.colors.primary; // "var(--vi-color-primary)"
9
9
  */
10
10
  export * from './tokens/index';
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.1",
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",
@@ -8,17 +16,21 @@
8
16
  "types": "./index.d.ts",
9
17
  "exports": {
10
18
  ".": {
11
- "import": "./index.js",
19
+ "default": "./index.js",
12
20
  "types": "./index.d.ts"
13
21
  },
14
22
  "./tokens": {
15
- "import": "./tokens/index.js",
23
+ "default": "./tokens/index.js",
16
24
  "types": "./tokens/index.d.ts"
17
25
  },
18
- "./styles": "./styles/_index.scss",
19
- "./styles/*": "./styles/_*.scss",
26
+ "./styles": {
27
+ "sass": "./styles/_index.scss",
28
+ "default": "./styles/index.js",
29
+ "types": "./styles/index.d.ts"
30
+ },
31
+ "./styles/*": "./styles/*",
20
32
  "./components": "./components/_index.scss",
21
- "./components/*": "./components/_*.scss",
33
+ "./components/*": "./components/*",
22
34
  "./flux-ui.css": "./flux-ui.css"
23
35
  },
24
36
  "files": [
package/styles/_index.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // Forwards all global style modules in cascade order.
2
- // Usage: @use '@vi/flux-ui/styles';
2
+ // Usage: @use '@vialiq/flux-ui/styles';
3
3
  @forward 'root';
4
4
  @forward 'reset';
5
5
  @forward 'theme';
package/styles/index.d.ts CHANGED
@@ -2,25 +2,25 @@
2
2
  * Flux UI — Styles Entry Point
3
3
  * =============================
4
4
  *
5
- * This is a built entry point (@vi/flux-ui/styles) that exports the paths
5
+ * This is a built entry point (@vialiq/flux-ui/styles) that exports the paths
6
6
  * to each SCSS partial shipped in the package. Use the paths below in your
7
7
  * application's SCSS to import individual layers, or import all at once:
8
8
  *
9
9
  * In your global styles.scss:
10
10
  *
11
- * @use '@vi/flux-ui/styles/_variables.scss' as *;
12
- * @use '@vi/flux-ui/styles/_reset.scss';
13
- * @use '@vi/flux-ui/styles/_layout.scss';
14
- * @use '@vi/flux-ui/styles/_utilities.scss';
11
+ * @use '@vialiq/flux-ui/styles/_variables.scss' as *;
12
+ * @use '@vialiq/flux-ui/styles/_reset.scss';
13
+ * @use '@vialiq/flux-ui/styles/_layout.scss';
14
+ * @use '@vialiq/flux-ui/styles/_utilities.scss';
15
15
  *
16
16
  * Import order matters: variables first (provides CSS custom properties
17
17
  * via :root and the @layer order declaration), then reset, layout, utilities.
18
18
  */
19
19
  export declare const fluxUiStyles: {
20
- readonly variables: "@vi/flux-ui/styles/_variables.scss";
21
- readonly reset: "@vi/flux-ui/styles/_reset.scss";
22
- readonly layout: "@vi/flux-ui/styles/_layout.scss";
23
- readonly utilities: "@vi/flux-ui/styles/_utilities.scss";
20
+ readonly variables: "@vialiq/flux-ui/styles/_variables.scss";
21
+ readonly reset: "@vialiq/flux-ui/styles/_reset.scss";
22
+ readonly layout: "@vialiq/flux-ui/styles/_layout.scss";
23
+ readonly utilities: "@vialiq/flux-ui/styles/_utilities.scss";
24
24
  };
25
25
  export type FluxUiStyleKey = keyof typeof fluxUiStyles;
26
26
  //# sourceMappingURL=index.d.ts.map
package/styles/index.js CHANGED
@@ -1,10 +1 @@
1
- // libs/flux-ui/src/styles/index.ts
2
- var fluxUiStyles = {
3
- variables: "@vi/flux-ui/styles/_variables.scss",
4
- reset: "@vi/flux-ui/styles/_reset.scss",
5
- layout: "@vi/flux-ui/styles/_layout.scss",
6
- utilities: "@vi/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};