@moderneinc/neo-design 1.2.1 → 1.2.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 (10) hide show
  1. package/README.md +32 -13
  2. package/dist/breakpoints.js +21 -0
  3. package/dist/index.esm.js +2 -0
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +8 -0
  6. package/dist/index.js.map +1 -1
  7. package/dist/semantic-colors.css +1 -1
  8. package/dist/semantic-colors.js +1 -1
  9. package/dist/semantic-colors.json +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @moderne/neo-design
2
2
 
3
- **Internal Moderne package** - Design system build tools for processing color tokens into multiple output formats (CSS, JavaScript, JSON).
3
+ **Internal Moderne package** - Design system build tools for processing design tokens into multiple output formats (CSS, JavaScript, JSON).
4
4
 
5
5
  ## 🚀 Quick Start
6
6
 
@@ -10,10 +10,14 @@ npm install @moderneinc/neo-design
10
10
 
11
11
  ## 📦 What's Included
12
12
 
13
- - **Color Tokens**: Processing of color primitives from `src/tokens/raw/color-primitives.json`
13
+ - **Design Tokens**: Multiple token types processed from `src/tokens/raw/`
14
+ - Primitive colors (`color-primitives.json`)
15
+ - Semantic colors (`color.json`)
16
+ - Typography primitives (`type-primitives.json`)
17
+ - Breakpoints (`breakpoints.json`)
14
18
  - **Internal Plugin System**: CSS Variables, JS Export, and JSON Export plugins (build-time only)
15
19
  - **Pure JavaScript**: Simplified architecture, no TypeScript complexity
16
- - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for color tokens
20
+ - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for design tokens
17
21
 
18
22
  ## 🎨 Generated Outputs
19
23
 
@@ -22,11 +26,18 @@ The build process generates design token files:
22
26
  ```bash
23
27
  # After running npm run build, generated files include:
24
28
  dist/
25
- ├── colors.json # JSON format color tokens
26
- ├── colors.js # JavaScript module export
27
- ├── color.css # CSS custom properties
28
- ├── index.js # Main CommonJS bundle
29
- └── index.esm.js # Main ESM bundle
29
+ ├── colors.css # Primitive color CSS custom properties
30
+ ├── colors.json # Primitive color tokens (JSON)
31
+ ├── colors.js # Primitive color tokens (JS)
32
+ ├── semantic-colors.css # Semantic/theme color CSS custom properties
33
+ ├── semantic-colors.json # Semantic color tokens (JSON)
34
+ ├── semantic-colors.js # Semantic color tokens (JS)
35
+ ├── typography.css # Typography CSS custom properties
36
+ ├── typography.json # Typography tokens (JSON)
37
+ ├── typography.js # Typography tokens (JS)
38
+ ├── breakpoints.js # Breakpoint tokens (JS)
39
+ ├── index.js # Main CommonJS bundle
40
+ └── index.esm.js # Main ESM bundle
30
41
  ```
31
42
 
32
43
  ## 🔧 Internal Build System
@@ -45,21 +56,29 @@ These plugins are configured in `neo.config.js` and executed by `scripts/build-p
45
56
 
46
57
  ```mermaid
47
58
  graph TB
48
- A[Design Tokens<br/>src/tokens/raw/color-primitives.json] --> B[npm run build<br/>scripts/build-production.js]
59
+ A[Design Tokens<br/>src/tokens/raw/*.json] --> B[npm run build<br/>scripts/build-production.js]
49
60
 
50
61
  B --> C[Rollup Bundle Build<br/>rollup -c]
51
62
  C --> D[Generated Bundles<br/>dist/]
52
63
  D --> E[index.js<br/>CommonJS Bundle]
53
64
  D --> F[index.esm.js<br/>ES Module Bundle]
54
65
 
55
- B --> G[Plugin System Execution<br/>neo.config.js]
56
- G --> H[CSS Variables Plugin<br/>Generate color.css]
57
- G --> I[JS Export Plugin<br/>Generate colors.js]
58
- G --> J[JSON Export Plugin<br/>Generate colors.json]
66
+ B --> G[Token Contract Processing<br/>neo.config.js]
67
+ G --> G1[Colors Contract<br/>preprocessor + plugins]
68
+ G --> G2[Semantic Colors Contract<br/>preprocessor + plugins]
69
+ G --> G3[Typography Contract<br/>plugins]
70
+ G --> G4[Breakpoints Contract<br/>preprocessor + plugins]
71
+
72
+ G1 --> H[CSS Variables Plugin]
73
+ G1 --> I[JS Export Plugin]
74
+ G1 --> J[JSON Export Plugin]
59
75
 
60
76
  H --> K[Generated Artifacts<br/>dist/]
61
77
  I --> K
62
78
  J --> K
79
+ G2 --> K
80
+ G3 --> K
81
+ G4 --> K
63
82
 
64
83
  K --> L[✅ Ready for npm publish]
65
84
 
package/dist/breakpoints.js ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export const xl = 1920;
8
+
9
+ export const lg = 1280;
10
+
11
+ export const md = 960;
12
+
13
+ export const sm = 600;
14
+
15
+ // Default export with all tokens
16
+ export default {
17
+ 'xl': xl,
18
+ 'lg': lg,
19
+ 'md': md,
20
+ 'sm': sm
21
+ };
package/dist/index.esm.js CHANGED
@@ -1,3 +1,5 @@
1
+ export * from '.../../dist/breakpoints.js';
2
+ export { default as breakpoints } from '.../../dist/breakpoints.js';
1
3
  export * from '.../../dist/colors.js';
2
4
  export { default as colors } from '.../../dist/colors.js';
3
5
  export * from '.../../dist/semantic-colors.js';
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/dist/index.js CHANGED
@@ -1,14 +1,22 @@
1
1
  'use strict';
2
2
 
3
+ var breakpoints_js = require('.../../dist/breakpoints.js');
3
4
  var colors_js = require('.../../dist/colors.js');
4
5
  var semanticColors_js = require('.../../dist/semantic-colors.js');
5
6
  var typography_js = require('.../../dist/typography.js');
6
7
 
7
8
 
8
9
 
10
+ exports.breakpoints = breakpoints_js;
9
11
  exports.colors = colors_js;
10
12
  exports.semanticColors = semanticColors_js;
11
13
  exports.typography = typography_js;
14
+ Object.keys(breakpoints_js).forEach(function (k) {
15
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
16
+ enumerable: true,
17
+ get: function () { return breakpoints_js[k]; }
18
+ });
19
+ });
12
20
  Object.keys(colors_js).forEach(function (k) {
13
21
  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
14
22
  enumerable: true,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/semantic-colors.css CHANGED
@@ -9,8 +9,8 @@
9
9
  --neo-border-card: #d1d5db;
10
10
  --neo-border-card-header: #d1d5db;
11
11
  --neo-buttons-destructive: #cb3446;
12
- --neo-buttons-primary-pressed: #131e7a;
13
12
  --neo-buttons-navigation-active: #ffffff;
13
+ --neo-buttons-primary-pressed: #131e7a;
14
14
  --neo-buttons-primary-default: #2f42ff;
15
15
  --neo-buttons-primary-hover: #1e2ec2;
16
16
  --neo-buttons-primary-disabled: #b6bfff;
package/dist/semantic-colors.js CHANGED
@@ -21,8 +21,8 @@ export const border = {
21
21
 
22
22
  export const buttons = {
23
23
  "destructive": "#cb3446",
24
- "primaryPressed": "#131e7a",
25
24
  "navigationActive": "#ffffff",
25
+ "primaryPressed": "#131e7a",
26
26
  "primaryDefault": "#2f42ff",
27
27
  "primaryHover": "#1e2ec2",
28
28
  "primaryDisabled": "#b6bfff",
package/dist/semantic-colors.json CHANGED
@@ -14,8 +14,8 @@
14
14
  },
15
15
  "buttons": {
16
16
  "destructive": "#cb3446",
17
- "primaryPressed": "#131e7a",
18
17
  "navigationActive": "#ffffff",
18
+ "primaryPressed": "#131e7a",
19
19
  "primaryDefault": "#2f42ff",
20
20
  "primaryHover": "#1e2ec2",
21
21
  "primaryDisabled": "#b6bfff",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moderneinc/neo-design",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "type": "module",
5
5
  "description": "Design primitives and tokens for Moderne applications",
6
6
  "main": "dist/index.js",