@moderneinc/neo-design 1.2.0 → 1.2.2

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 (16) hide show
  1. package/README.md +94 -0
  2. package/dist/colors.css +88 -0
  3. package/dist/colors.js +127 -0
  4. package/dist/colors.json +104 -0
  5. package/dist/index.esm.js +7 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/index.js +30 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/package.json +89 -0
  10. package/dist/semantic-colors.css +82 -0
  11. package/dist/semantic-colors.js +121 -0
  12. package/dist/semantic-colors.json +98 -0
  13. package/dist/typography.css +30 -0
  14. package/dist/typography.js +93 -0
  15. package/dist/typography.json +30 -0
  16. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,94 @@
1
+ # @moderne/neo-design
2
+
3
+ **Internal Moderne package** - Design system build tools for processing color tokens into multiple output formats (CSS, JavaScript, JSON).
4
+
5
+ ## 🚀 Quick Start
6
+
7
+ ```bash
8
+ npm install @moderneinc/neo-design
9
+ ```
10
+
11
+ ## 📦 What's Included
12
+
13
+ - **Color Tokens**: Processing of color primitives from `src/tokens/raw/color-primitives.json`
14
+ - **Internal Plugin System**: CSS Variables, JS Export, and JSON Export plugins (build-time only)
15
+ - **Pure JavaScript**: Simplified architecture, no TypeScript complexity
16
+ - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for color tokens
17
+
18
+ ## 🎨 Generated Outputs
19
+
20
+ The build process generates design token files:
21
+
22
+ ```bash
23
+ # After running npm run build, generated files include:
24
+ 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
30
+ ```
31
+
32
+ ## 🔧 Internal Build System
33
+
34
+ The package includes an internal plugin system used during the build process:
35
+
36
+ **Build-time Plugins:**
37
+
38
+ - **CSS Variables Plugin**: Generates CSS custom properties from design tokens
39
+ - **JS Export Plugin**: Creates JavaScript module exports from processed tokens
40
+ - **JSON Export Plugin**: Generates JSON files with processed design tokens
41
+
42
+ These plugins are configured in `neo.config.js` and executed by `scripts/build-production.js` during `npm run build`. They are not exposed as public exports.
43
+
44
+ ## 🏗️ Architecture & Build Process
45
+
46
+ ```mermaid
47
+ graph TB
48
+ A[Design Tokens<br/>src/tokens/raw/color-primitives.json] --> B[npm run build<br/>scripts/build-production.js]
49
+
50
+ B --> C[Rollup Bundle Build<br/>rollup -c]
51
+ C --> D[Generated Bundles<br/>dist/]
52
+ D --> E[index.js<br/>CommonJS Bundle]
53
+ D --> F[index.esm.js<br/>ES Module Bundle]
54
+
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]
59
+
60
+ H --> K[Generated Artifacts<br/>dist/]
61
+ I --> K
62
+ J --> K
63
+
64
+ K --> L[✅ Ready for npm publish]
65
+
66
+ style A fill:#e1f5fe
67
+ style K fill:#f3e5f5
68
+ style L fill:#e8f5e8
69
+ ```
70
+
71
+ ## 🔧 Development
72
+
73
+ ### Scripts
74
+
75
+ - `npm run build` - Complete build pipeline with plugin execution
76
+ - `npm run dev` - Watch mode development build with Rollup
77
+ - `npm run clean` - Remove dist directory
78
+ - `npm run storybook` - Preview tokens in Storybook (port 6006)
79
+ - `npm run test` - Run Vitest test suite
80
+ - `npm run lint` - Lint source code with Biome
81
+ - `npm run format` - Format code with Biome
82
+ - `npm run knip` - Check for unused dependencies and exports
83
+
84
+ ## 📖 Documentation
85
+
86
+ - View token documentation in Storybook: `npm run storybook`
87
+ - See `stories/` for color and typography showcases
88
+ - Check `dist/` for built artifacts after running `npm run build`
89
+
90
+ ---
91
+
92
+ **Package**: `@moderne/neo-design` (Private - Internal Moderne use only)
93
+ **Source**: Figma file `fQTkGSFbYyE7LiHuQJsENC`
94
+ **Architecture**: Pure JavaScript ES6 modules
package/dist/colors.css ADDED
@@ -0,0 +1,88 @@
1
+ :root {
2
+ --neo-digital-blue-50: #f2f3ff;
3
+ --neo-digital-blue-100: #dce0ff;
4
+ --neo-digital-blue-200: #b6bfff;
5
+ --neo-digital-blue-300: #8d99ff;
6
+ --neo-digital-blue-400: #626eff;
7
+ --neo-digital-blue-500: #2f42ff;
8
+ --neo-digital-blue-600: #2637e6;
9
+ --neo-digital-blue-700: #1e2ec2;
10
+ --neo-digital-blue-800: #131e7a;
11
+ --neo-digital-blue-900: #000855;
12
+ --neo-digital-blue-main: #2f42ff;
13
+ --neo-digital-green-50: #f3fff5;
14
+ --neo-digital-green-100: #cfffd7;
15
+ --neo-digital-green-200: #acffb9;
16
+ --neo-digital-green-300: #88fe9b;
17
+ --neo-digital-green-400: #72e184;
18
+ --neo-digital-green-500: #5ec46f;
19
+ --neo-digital-green-600: #4ca75a;
20
+ --neo-digital-green-700: #3b8948;
21
+ --neo-digital-green-800: #2c6c36;
22
+ --neo-digital-green-900: #1e4f26;
23
+ --neo-digital-green-main: #5ec46f;
24
+ --neo-gold-100: #fbf1d2;
25
+ --neo-gold-200: #f7e3a5;
26
+ --neo-gold-300: #f4d479;
27
+ --neo-gold-400: #f0c64c;
28
+ --neo-gold-500: #ecb81f;
29
+ --neo-gold-600: #bd9319;
30
+ --neo-gold-700: #8e6e13;
31
+ --neo-gold-800: #5e4a0c;
32
+ --neo-gold-900: #2f2506;
33
+ --neo-gold-main: #ecb81f;
34
+ --neo-grey-50: #f9fafb;
35
+ --neo-grey-100: #f3f4f6;
36
+ --neo-grey-200: #e5e7eb;
37
+ --neo-grey-300: #d1d5db;
38
+ --neo-grey-400: #9ca3af;
39
+ --neo-grey-500: #6b7280;
40
+ --neo-grey-600: #4b5563;
41
+ --neo-grey-700: #374151;
42
+ --neo-grey-800: #1f2937;
43
+ --neo-grey-900: #111827;
44
+ --neo-grey-main: #6b7280;
45
+ --neo-orange-50: #fff8e5;
46
+ --neo-orange-100: #ffebb7;
47
+ --neo-orange-200: #ffde8a;
48
+ --neo-orange-300: #ffd15c;
49
+ --neo-orange-400: #ffc52e;
50
+ --neo-orange-500: #ffb800;
51
+ --neo-orange-600: #d69b00;
52
+ --neo-orange-700: #856000;
53
+ --neo-orange-800: #856000;
54
+ --neo-orange-900: #5c4200;
55
+ --neo-orange-main: #ffb800;
56
+ --neo-red-50: #ffedef;
57
+ --neo-red-100: #ffc6cd;
58
+ --neo-red-200: #ff9eaa;
59
+ --neo-red-300: #fd7686;
60
+ --neo-red-400: #ed4a5d;
61
+ --neo-red-500: #cb3446;
62
+ --neo-red-600: #a92232;
63
+ --neo-red-700: #871421;
64
+ --neo-red-800: #650914;
65
+ --neo-red-900: #43020a;
66
+ --neo-red-main: #cb3446;
67
+ --neo-teal-green-50: #eefffa;
68
+ --neo-teal-green-100: #c9fff1;
69
+ --neo-teal-green-200: #a4ffe7;
70
+ --neo-teal-green-300: #7fffde;
71
+ --neo-teal-green-400: #54eec6;
72
+ --neo-teal-green-500: #3bcca6;
73
+ --neo-teal-green-600: #27aa88;
74
+ --neo-teal-green-700: #17886b;
75
+ --neo-teal-green-800: #0b664e;
76
+ --neo-teal-green-900: #034433;
77
+ --neo-teal-green-main: #3bcca6;
78
+ --neo-violet-100: #ebd5f1;
79
+ --neo-violet-200: #d6ace3;
80
+ --neo-violet-300: #c282d5;
81
+ --neo-violet-400: #ad59c7;
82
+ --neo-violet-500: #992fb9;
83
+ --neo-violet-600: #7a2694;
84
+ --neo-violet-700: #5c1c6f;
85
+ --neo-violet-800: #3d134a;
86
+ --neo-violet-900: #1f0925;
87
+ --neo-violet-main: #992fb9;
88
+ }
package/dist/colors.js ADDED
@@ -0,0 +1,127 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export const digitalBlue = {
8
+ "50": "#f2f3ff",
9
+ "100": "#dce0ff",
10
+ "200": "#b6bfff",
11
+ "300": "#8d99ff",
12
+ "400": "#626eff",
13
+ "500": "#2f42ff",
14
+ "600": "#2637e6",
15
+ "700": "#1e2ec2",
16
+ "800": "#131e7a",
17
+ "900": "#000855",
18
+ "main": "#2f42ff"
19
+ };
20
+
21
+ export const digitalGreen = {
22
+ "50": "#f3fff5",
23
+ "100": "#cfffd7",
24
+ "200": "#acffb9",
25
+ "300": "#88fe9b",
26
+ "400": "#72e184",
27
+ "500": "#5ec46f",
28
+ "600": "#4ca75a",
29
+ "700": "#3b8948",
30
+ "800": "#2c6c36",
31
+ "900": "#1e4f26",
32
+ "main": "#5ec46f"
33
+ };
34
+
35
+ export const gold = {
36
+ "100": "#fbf1d2",
37
+ "200": "#f7e3a5",
38
+ "300": "#f4d479",
39
+ "400": "#f0c64c",
40
+ "500": "#ecb81f",
41
+ "600": "#bd9319",
42
+ "700": "#8e6e13",
43
+ "800": "#5e4a0c",
44
+ "900": "#2f2506",
45
+ "main": "#ecb81f"
46
+ };
47
+
48
+ export const grey = {
49
+ "50": "#f9fafb",
50
+ "100": "#f3f4f6",
51
+ "200": "#e5e7eb",
52
+ "300": "#d1d5db",
53
+ "400": "#9ca3af",
54
+ "500": "#6b7280",
55
+ "600": "#4b5563",
56
+ "700": "#374151",
57
+ "800": "#1f2937",
58
+ "900": "#111827",
59
+ "main": "#6b7280"
60
+ };
61
+
62
+ export const orange = {
63
+ "50": "#fff8e5",
64
+ "100": "#ffebb7",
65
+ "200": "#ffde8a",
66
+ "300": "#ffd15c",
67
+ "400": "#ffc52e",
68
+ "500": "#ffb800",
69
+ "600": "#d69b00",
70
+ "700": "#856000",
71
+ "800": "#856000",
72
+ "900": "#5c4200",
73
+ "main": "#ffb800"
74
+ };
75
+
76
+ export const red = {
77
+ "50": "#ffedef",
78
+ "100": "#ffc6cd",
79
+ "200": "#ff9eaa",
80
+ "300": "#fd7686",
81
+ "400": "#ed4a5d",
82
+ "500": "#cb3446",
83
+ "600": "#a92232",
84
+ "700": "#871421",
85
+ "800": "#650914",
86
+ "900": "#43020a",
87
+ "main": "#cb3446"
88
+ };
89
+
90
+ export const tealGreen = {
91
+ "50": "#eefffa",
92
+ "100": "#c9fff1",
93
+ "200": "#a4ffe7",
94
+ "300": "#7fffde",
95
+ "400": "#54eec6",
96
+ "500": "#3bcca6",
97
+ "600": "#27aa88",
98
+ "700": "#17886b",
99
+ "800": "#0b664e",
100
+ "900": "#034433",
101
+ "main": "#3bcca6"
102
+ };
103
+
104
+ export const violet = {
105
+ "100": "#ebd5f1",
106
+ "200": "#d6ace3",
107
+ "300": "#c282d5",
108
+ "400": "#ad59c7",
109
+ "500": "#992fb9",
110
+ "600": "#7a2694",
111
+ "700": "#5c1c6f",
112
+ "800": "#3d134a",
113
+ "900": "#1f0925",
114
+ "main": "#992fb9"
115
+ };
116
+
117
+ // Default export with all tokens
118
+ export default {
119
+ 'digitalBlue': digitalBlue,
120
+ 'digitalGreen': digitalGreen,
121
+ 'gold': gold,
122
+ 'grey': grey,
123
+ 'orange': orange,
124
+ 'red': red,
125
+ 'tealGreen': tealGreen,
126
+ 'violet': violet
127
+ };
package/dist/colors.json ADDED
@@ -0,0 +1,104 @@
1
+ {
2
+ "digitalBlue": {
3
+ "50": "#f2f3ff",
4
+ "100": "#dce0ff",
5
+ "200": "#b6bfff",
6
+ "300": "#8d99ff",
7
+ "400": "#626eff",
8
+ "500": "#2f42ff",
9
+ "600": "#2637e6",
10
+ "700": "#1e2ec2",
11
+ "800": "#131e7a",
12
+ "900": "#000855",
13
+ "main": "#2f42ff"
14
+ },
15
+ "digitalGreen": {
16
+ "50": "#f3fff5",
17
+ "100": "#cfffd7",
18
+ "200": "#acffb9",
19
+ "300": "#88fe9b",
20
+ "400": "#72e184",
21
+ "500": "#5ec46f",
22
+ "600": "#4ca75a",
23
+ "700": "#3b8948",
24
+ "800": "#2c6c36",
25
+ "900": "#1e4f26",
26
+ "main": "#5ec46f"
27
+ },
28
+ "gold": {
29
+ "100": "#fbf1d2",
30
+ "200": "#f7e3a5",
31
+ "300": "#f4d479",
32
+ "400": "#f0c64c",
33
+ "500": "#ecb81f",
34
+ "600": "#bd9319",
35
+ "700": "#8e6e13",
36
+ "800": "#5e4a0c",
37
+ "900": "#2f2506",
38
+ "main": "#ecb81f"
39
+ },
40
+ "grey": {
41
+ "50": "#f9fafb",
42
+ "100": "#f3f4f6",
43
+ "200": "#e5e7eb",
44
+ "300": "#d1d5db",
45
+ "400": "#9ca3af",
46
+ "500": "#6b7280",
47
+ "600": "#4b5563",
48
+ "700": "#374151",
49
+ "800": "#1f2937",
50
+ "900": "#111827",
51
+ "main": "#6b7280"
52
+ },
53
+ "orange": {
54
+ "50": "#fff8e5",
55
+ "100": "#ffebb7",
56
+ "200": "#ffde8a",
57
+ "300": "#ffd15c",
58
+ "400": "#ffc52e",
59
+ "500": "#ffb800",
60
+ "600": "#d69b00",
61
+ "700": "#856000",
62
+ "800": "#856000",
63
+ "900": "#5c4200",
64
+ "main": "#ffb800"
65
+ },
66
+ "red": {
67
+ "50": "#ffedef",
68
+ "100": "#ffc6cd",
69
+ "200": "#ff9eaa",
70
+ "300": "#fd7686",
71
+ "400": "#ed4a5d",
72
+ "500": "#cb3446",
73
+ "600": "#a92232",
74
+ "700": "#871421",
75
+ "800": "#650914",
76
+ "900": "#43020a",
77
+ "main": "#cb3446"
78
+ },
79
+ "tealGreen": {
80
+ "50": "#eefffa",
81
+ "100": "#c9fff1",
82
+ "200": "#a4ffe7",
83
+ "300": "#7fffde",
84
+ "400": "#54eec6",
85
+ "500": "#3bcca6",
86
+ "600": "#27aa88",
87
+ "700": "#17886b",
88
+ "800": "#0b664e",
89
+ "900": "#034433",
90
+ "main": "#3bcca6"
91
+ },
92
+ "violet": {
93
+ "100": "#ebd5f1",
94
+ "200": "#d6ace3",
95
+ "300": "#c282d5",
96
+ "400": "#ad59c7",
97
+ "500": "#992fb9",
98
+ "600": "#7a2694",
99
+ "700": "#5c1c6f",
100
+ "800": "#3d134a",
101
+ "900": "#1f0925",
102
+ "main": "#992fb9"
103
+ }
104
+ }
package/dist/index.esm.js ADDED
@@ -0,0 +1,7 @@
1
+ export * from '.../../dist/colors.js';
2
+ export { default as colors } from '.../../dist/colors.js';
3
+ export * from '.../../dist/semantic-colors.js';
4
+ export { default as semanticColors } from '.../../dist/semantic-colors.js';
5
+ export * from '.../../dist/typography.js';
6
+ export { default as typography } from '.../../dist/typography.js';
7
+ //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
package/dist/index.js ADDED
@@ -0,0 +1,30 @@
1
+ 'use strict';
2
+
3
+ var colors_js = require('.../../dist/colors.js');
4
+ var semanticColors_js = require('.../../dist/semantic-colors.js');
5
+ var typography_js = require('.../../dist/typography.js');
6
+
7
+
8
+
9
+ exports.colors = colors_js;
10
+ exports.semanticColors = semanticColors_js;
11
+ exports.typography = typography_js;
12
+ Object.keys(colors_js).forEach(function (k) {
13
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
14
+ enumerable: true,
15
+ get: function () { return colors_js[k]; }
16
+ });
17
+ });
18
+ Object.keys(semanticColors_js).forEach(function (k) {
19
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
20
+ enumerable: true,
21
+ get: function () { return semanticColors_js[k]; }
22
+ });
23
+ });
24
+ Object.keys(typography_js).forEach(function (k) {
25
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
26
+ enumerable: true,
27
+ get: function () { return typography_js[k]; }
28
+ });
29
+ });
30
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/package.json ADDED
@@ -0,0 +1,89 @@
1
+ {
2
+ "name": "@moderneinc/neo-design",
3
+ "version": "0.0.0-development",
4
+ "type": "module",
5
+ "description": "Design primitives and tokens for Moderne applications",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.esm.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/index.esm.js",
11
+ "require": "./dist/index.js"
12
+ }
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "clean": "rm -rf dist/*",
19
+ "prebuild": "npm run clean",
20
+ "build": "node scripts/build-production.js",
21
+ "dev": "rollup -c --watch",
22
+ "fetch:figma": "node scripts/fetch-figma-variables.js",
23
+ "test": "vitest",
24
+ "test:run": "vitest run",
25
+ "lint": "biome check src",
26
+ "lint:fix": "biome check --write src",
27
+ "format": "biome format --write src",
28
+ "knip": "knip",
29
+ "knip:production": "knip --production",
30
+ "check:all": "npm run format && npm run lint:fix && npm run knip",
31
+ "build-storybook": "storybook build",
32
+ "dev-storybook": "storybook dev -p 6006",
33
+ "storybook": "npm run dev-storybook"
34
+ },
35
+ "keywords": [
36
+ "design-tokens",
37
+ "design-system",
38
+ "figma",
39
+ "mui",
40
+ "javascript",
41
+ "plugins",
42
+ "css",
43
+ "scss"
44
+ ],
45
+ "author": "Moderne",
46
+ "license": "UNLICENSED",
47
+ "homepage": "https://github.com/moderneinc/neo-design#readme",
48
+ "repository": "github:moderneinc/neo-design",
49
+ "devDependencies": {
50
+ "@biomejs/biome": "2.2.4",
51
+ "@rollup/plugin-json": "6.1.0",
52
+ "@rollup/plugin-node-resolve": "16.0.1",
53
+ "@semantic-release/changelog": "6.0.3",
54
+ "@semantic-release/commit-analyzer": "13.0.1",
55
+ "@semantic-release/git": "10.0.1",
56
+ "@semantic-release/github": "11.0.6",
57
+ "@semantic-release/npm": "12.0.2",
58
+ "@semantic-release/release-notes-generator": "14.1.0",
59
+ "semantic-release": "24.2.9",
60
+ "@storybook/addon-docs": "9.1.6",
61
+ "@storybook/react": "9.1.6",
62
+ "@storybook/react-vite": "9.1.6",
63
+ "@types/node": "24.5.2",
64
+ "@vitest/coverage-v8": "3.2.4",
65
+ "dotenv": "17.2.2",
66
+ "knip": "5.63.1",
67
+ "rollup": "4.52.0",
68
+ "storybook": "9.1.6",
69
+ "typescript": "5.9.2",
70
+ "vitest": "3.2.4"
71
+ },
72
+ "peerDependencies": {
73
+ "@mui/material": "7.x",
74
+ "react": "18.3.1 || 19.1.1"
75
+ },
76
+ "peerDependenciesMeta": {
77
+ "@mui/material": {
78
+ "optional": true
79
+ },
80
+ "react": {
81
+ "optional": true
82
+ }
83
+ },
84
+ "optionalDependencies": {
85
+ "@rollup/rollup-darwin-arm64": "4.52.0",
86
+ "@rollup/rollup-linux-x64-gnu": "4.52.0",
87
+ "@rollup/rollup-win32-x64-msvc": "4.52.0"
88
+ }
89
+ }
package/dist/semantic-colors.css ADDED
@@ -0,0 +1,82 @@
1
+ :root {
2
+ --neo-activity-recipe-run: #992fb9;
3
+ --neo-activity-commit-job: #2f42ff;
4
+ --neo-activity-visualization: #27aa88;
5
+ --neo-border-primary: #d1d5db;
6
+ --neo-border-input: #9ca3af;
7
+ --neo-border-tab-active: #2f42ff;
8
+ --neo-border-code-dashed: #9ca3af;
9
+ --neo-border-card: #d1d5db;
10
+ --neo-border-card-header: #d1d5db;
11
+ --neo-buttons-destructive: #cb3446;
12
+ --neo-buttons-primary-pressed: #131e7a;
13
+ --neo-buttons-navigation-active: #ffffff;
14
+ --neo-buttons-primary-default: #2f42ff;
15
+ --neo-buttons-primary-hover: #1e2ec2;
16
+ --neo-buttons-primary-disabled: #b6bfff;
17
+ --neo-buttons-primary-focus: #2f42ff;
18
+ --neo-buttons-secondary-default-border: #b6bfff;
19
+ --neo-buttons-secondary-hover-background: #f2f3ff;
20
+ --neo-buttons-secondary-pressed-background: #dce0ff;
21
+ --neo-buttons-secondary-disabled: #626eff;
22
+ --neo-buttons-secondary-focus: #2f42ff;
23
+ --neo-buttons-tertiary-default: #2f42ff;
24
+ --neo-buttons-tertiary-hover: #1e2ec2;
25
+ --neo-buttons-tertiary-pressed: #131e7a;
26
+ --neo-buttons-tertiary-focus: #2f42ff;
27
+ --neo-buttons-tertiary-disabled: #626eff;
28
+ --neo-icons-default: #1f2937;
29
+ --neo-icons-active: #2f42ff;
30
+ --neo-icons-hover: #131e7a;
31
+ --neo-icons-hover-background: #e5e7eb;
32
+ --neo-icons-disabled: #9ca3af;
33
+ --neo-icons-placeholder: #4b5563;
34
+ --neo-icons-checkbox: #4b5563;
35
+ --neo-status-success-dark: #4ca75a;
36
+ --neo-status-warning-dark: #ffb800;
37
+ --neo-status-error-dark: #cb3446;
38
+ --neo-status-success-light: #f3fff5;
39
+ --neo-status-error-light: #ffedef;
40
+ --neo-status-warning-light: #fff8e5;
41
+ --neo-surfaces-black: #000000;
42
+ --neo-surfaces-white: #ffffff;
43
+ --neo-surfaces-page: #f9fafb;
44
+ --neo-surfaces-card: #ffffff;
45
+ --neo-surfaces-card-header: #f3f4f6;
46
+ --neo-surfaces-tab-active: #f3f4f6;
47
+ --neo-surfaces-list-hover: #f9fafb;
48
+ --neo-surfaces-input-hover: #f3f4f6;
49
+ --neo-surfaces-table-disabled-row: #f3f4f6;
50
+ --neo-surfaces-table-background: #ffffff;
51
+ --neo-surfaces-shadow-neutral: #1f2937;
52
+ --neo-surfaces-scrim: #1f2937;
53
+ --neo-surfaces-shadow-primary: #2f42ff;
54
+ --neo-surfaces-tooltip: #4b5563;
55
+ --neo-typography-page-header: #111827;
56
+ --neo-typography-section-header: #374151;
57
+ --neo-typography-body: #1f2937;
58
+ --neo-typography-button-primary: #f9fafb;
59
+ --neo-typography-button-secondary: #2f42ff;
60
+ --neo-typography-button-disabled: #9ca3af;
61
+ --neo-typography-input-placeholder: #6b7280;
62
+ --neo-typography-input-default: #1f2937;
63
+ --neo-typography-code-primary: #1f2937;
64
+ --neo-typography-code-secondary: #6b7280;
65
+ --neo-typography-tab-inactive: #4b5563;
66
+ --neo-typography-tab-active: #626eff;
67
+ --neo-typography-link-primary: #2f42ff;
68
+ --neo-typography-link-disabled: #b6bfff;
69
+ --neo-typography-link-default: #f9fafb;
70
+ --neo-typography-error: #cb3446;
71
+ --neo-typography-success: #4ca75a;
72
+ --neo-typography-warning: #1f2937;
73
+ --neo-typography-tooltip: #ffffff;
74
+ --neo-data-green: #4ca75a;
75
+ --neo-data-yellow: #fdda04;
76
+ --neo-data-orange1: #ffc008;
77
+ --neo-data-orange2: #ff9800;
78
+ --neo-data-orange3: #f9a91b;
79
+ --neo-data-red1: #ff5c24;
80
+ --neo-data-red2: #ed4134;
81
+ --neo-data-red3: #cb3446;
82
+ }
package/dist/semantic-colors.js ADDED
@@ -0,0 +1,121 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export const activity = {
8
+ "recipeRun": "#992fb9",
9
+ "commitJob": "#2f42ff",
10
+ "visualization": "#27aa88"
11
+ };
12
+
13
+ export const border = {
14
+ "primary": "#d1d5db",
15
+ "input": "#9ca3af",
16
+ "tabActive": "#2f42ff",
17
+ "codeDashed": "#9ca3af",
18
+ "card": "#d1d5db",
19
+ "cardHeader": "#d1d5db"
20
+ };
21
+
22
+ export const buttons = {
23
+ "destructive": "#cb3446",
24
+ "primaryPressed": "#131e7a",
25
+ "navigationActive": "#ffffff",
26
+ "primaryDefault": "#2f42ff",
27
+ "primaryHover": "#1e2ec2",
28
+ "primaryDisabled": "#b6bfff",
29
+ "primaryFocus": "#2f42ff",
30
+ "secondaryDefaultBorder": "#b6bfff",
31
+ "secondaryHoverBackground": "#f2f3ff",
32
+ "secondaryPressedBackground": "#dce0ff",
33
+ "secondaryDisabled": "#626eff",
34
+ "secondaryFocus": "#2f42ff",
35
+ "tertiaryDefault": "#2f42ff",
36
+ "tertiaryHover": "#1e2ec2",
37
+ "tertiaryPressed": "#131e7a",
38
+ "tertiaryFocus": "#2f42ff",
39
+ "tertiaryDisabled": "#626eff"
40
+ };
41
+
42
+ export const icons = {
43
+ "default": "#1f2937",
44
+ "active": "#2f42ff",
45
+ "hover": "#131e7a",
46
+ "hoverBackground": "#e5e7eb",
47
+ "disabled": "#9ca3af",
48
+ "placeholder": "#4b5563",
49
+ "checkbox": "#4b5563"
50
+ };
51
+
52
+ export const status = {
53
+ "successDark": "#4ca75a",
54
+ "warningDark": "#ffb800",
55
+ "errorDark": "#cb3446",
56
+ "successLight": "#f3fff5",
57
+ "errorLight": "#ffedef",
58
+ "warningLight": "#fff8e5"
59
+ };
60
+
61
+ export const surfaces = {
62
+ "black": "#000000",
63
+ "white": "#ffffff",
64
+ "page": "#f9fafb",
65
+ "card": "#ffffff",
66
+ "cardHeader": "#f3f4f6",
67
+ "tabActive": "#f3f4f6",
68
+ "listHover": "#f9fafb",
69
+ "inputHover": "#f3f4f6",
70
+ "tableDisabledRow": "#f3f4f6",
71
+ "tableBackground": "#ffffff",
72
+ "shadowNeutral": "#1f2937",
73
+ "scrim": "#1f2937",
74
+ "shadowPrimary": "#2f42ff",
75
+ "tooltip": "#4b5563"
76
+ };
77
+
78
+ export const typography = {
79
+ "pageHeader": "#111827",
80
+ "sectionHeader": "#374151",
81
+ "body": "#1f2937",
82
+ "buttonPrimary": "#f9fafb",
83
+ "buttonSecondary": "#2f42ff",
84
+ "buttonDisabled": "#9ca3af",
85
+ "inputPlaceholder": "#6b7280",
86
+ "inputDefault": "#1f2937",
87
+ "codePrimary": "#1f2937",
88
+ "codeSecondary": "#6b7280",
89
+ "tabInactive": "#4b5563",
90
+ "tabActive": "#626eff",
91
+ "linkPrimary": "#2f42ff",
92
+ "linkDisabled": "#b6bfff",
93
+ "linkDefault": "#f9fafb",
94
+ "error": "#cb3446",
95
+ "success": "#4ca75a",
96
+ "warning": "#1f2937",
97
+ "tooltip": "#ffffff"
98
+ };
99
+
100
+ export const data = {
101
+ "green": "#4ca75a",
102
+ "yellow": "#fdda04",
103
+ "orange1": "#ffc008",
104
+ "orange2": "#ff9800",
105
+ "orange3": "#f9a91b",
106
+ "red1": "#ff5c24",
107
+ "red2": "#ed4134",
108
+ "red3": "#cb3446"
109
+ };
110
+
111
+ // Default export with all tokens
112
+ export default {
113
+ 'activity': activity,
114
+ 'border': border,
115
+ 'buttons': buttons,
116
+ 'icons': icons,
117
+ 'status': status,
118
+ 'surfaces': surfaces,
119
+ 'typography': typography,
120
+ 'data': data
121
+ };
package/dist/semantic-colors.json ADDED
@@ -0,0 +1,98 @@
1
+ {
2
+ "activity": {
3
+ "recipeRun": "#992fb9",
4
+ "commitJob": "#2f42ff",
5
+ "visualization": "#27aa88"
6
+ },
7
+ "border": {
8
+ "primary": "#d1d5db",
9
+ "input": "#9ca3af",
10
+ "tabActive": "#2f42ff",
11
+ "codeDashed": "#9ca3af",
12
+ "card": "#d1d5db",
13
+ "cardHeader": "#d1d5db"
14
+ },
15
+ "buttons": {
16
+ "destructive": "#cb3446",
17
+ "primaryPressed": "#131e7a",
18
+ "navigationActive": "#ffffff",
19
+ "primaryDefault": "#2f42ff",
20
+ "primaryHover": "#1e2ec2",
21
+ "primaryDisabled": "#b6bfff",
22
+ "primaryFocus": "#2f42ff",
23
+ "secondaryDefaultBorder": "#b6bfff",
24
+ "secondaryHoverBackground": "#f2f3ff",
25
+ "secondaryPressedBackground": "#dce0ff",
26
+ "secondaryDisabled": "#626eff",
27
+ "secondaryFocus": "#2f42ff",
28
+ "tertiaryDefault": "#2f42ff",
29
+ "tertiaryHover": "#1e2ec2",
30
+ "tertiaryPressed": "#131e7a",
31
+ "tertiaryFocus": "#2f42ff",
32
+ "tertiaryDisabled": "#626eff"
33
+ },
34
+ "icons": {
35
+ "default": "#1f2937",
36
+ "active": "#2f42ff",
37
+ "hover": "#131e7a",
38
+ "hoverBackground": "#e5e7eb",
39
+ "disabled": "#9ca3af",
40
+ "placeholder": "#4b5563",
41
+ "checkbox": "#4b5563"
42
+ },
43
+ "status": {
44
+ "successDark": "#4ca75a",
45
+ "warningDark": "#ffb800",
46
+ "errorDark": "#cb3446",
47
+ "successLight": "#f3fff5",
48
+ "errorLight": "#ffedef",
49
+ "warningLight": "#fff8e5"
50
+ },
51
+ "surfaces": {
52
+ "black": "#000000",
53
+ "white": "#ffffff",
54
+ "page": "#f9fafb",
55
+ "card": "#ffffff",
56
+ "cardHeader": "#f3f4f6",
57
+ "tabActive": "#f3f4f6",
58
+ "listHover": "#f9fafb",
59
+ "inputHover": "#f3f4f6",
60
+ "tableDisabledRow": "#f3f4f6",
61
+ "tableBackground": "#ffffff",
62
+ "shadowNeutral": "#1f2937",
63
+ "scrim": "#1f2937",
64
+ "shadowPrimary": "#2f42ff",
65
+ "tooltip": "#4b5563"
66
+ },
67
+ "typography": {
68
+ "pageHeader": "#111827",
69
+ "sectionHeader": "#374151",
70
+ "body": "#1f2937",
71
+ "buttonPrimary": "#f9fafb",
72
+ "buttonSecondary": "#2f42ff",
73
+ "buttonDisabled": "#9ca3af",
74
+ "inputPlaceholder": "#6b7280",
75
+ "inputDefault": "#1f2937",
76
+ "codePrimary": "#1f2937",
77
+ "codeSecondary": "#6b7280",
78
+ "tabInactive": "#4b5563",
79
+ "tabActive": "#626eff",
80
+ "linkPrimary": "#2f42ff",
81
+ "linkDisabled": "#b6bfff",
82
+ "linkDefault": "#f9fafb",
83
+ "error": "#cb3446",
84
+ "success": "#4ca75a",
85
+ "warning": "#1f2937",
86
+ "tooltip": "#ffffff"
87
+ },
88
+ "data": {
89
+ "green": "#4ca75a",
90
+ "yellow": "#fdda04",
91
+ "orange1": "#ffc008",
92
+ "orange2": "#ff9800",
93
+ "orange3": "#f9a91b",
94
+ "red1": "#ff5c24",
95
+ "red2": "#ed4134",
96
+ "red3": "#cb3446"
97
+ }
98
+ }
package/dist/typography.css ADDED
@@ -0,0 +1,30 @@
1
+ :root {
2
+ --neo-font-family-heading: Inter;
3
+ --neo-font-family-body: Inter;
4
+ --neo-font-family-code: Jetbrains Mono;
5
+ --neo-font-size-xxs: 10;
6
+ --neo-font-size-xs: 12;
7
+ --neo-font-weight-thin100: 100;
8
+ --neo-font-size-sm: 14;
9
+ --neo-font-size-default: 16;
10
+ --neo-font-weight-light300: 300;
11
+ --neo-font-size-h6: 16;
12
+ --neo-font-size-caption: 13;
13
+ --neo-font-size-code: 14;
14
+ --neo-font-weight-regular400: 400;
15
+ --neo-font-size-h5: 18;
16
+ --neo-font-weight-medium500: 500;
17
+ --neo-font-size-h4: 20;
18
+ --neo-font-size-h3: 24;
19
+ --neo-font-weight-semi-bold600: 600;
20
+ --neo-font-weight-bold700: 700;
21
+ --neo-font-size-h2: 28;
22
+ --neo-font-size-h1: 36;
23
+ --neo-font-weight-extra-bold800: 800;
24
+ --neo-line-height-xs16: 16;
25
+ --neo-line-height-s20: 20;
26
+ --neo-line-height-m24: 24;
27
+ --neo-line-height-l28: 28;
28
+ --neo-line-height-xl32: 32;
29
+ --neo-text-decoration-underline: underline;
30
+ }
package/dist/typography.js ADDED
@@ -0,0 +1,93 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export const fontFamilyHeading = "Inter";
8
+
9
+ export const fontFamilyBody = "Inter";
10
+
11
+ export const fontFamilyCode = "Jetbrains Mono";
12
+
13
+ export const fontSizeXxs = 10;
14
+
15
+ export const fontSizeXs = 12;
16
+
17
+ export const fontWeightThin100 = 100;
18
+
19
+ export const fontSizeSm = 14;
20
+
21
+ export const fontSizeDefault = 16;
22
+
23
+ export const fontWeightLight300 = 300;
24
+
25
+ export const fontSizeH6 = 16;
26
+
27
+ export const fontSizeCaption = 13;
28
+
29
+ export const fontSizeCode = 14;
30
+
31
+ export const fontWeightRegular400 = 400;
32
+
33
+ export const fontSizeH5 = 18;
34
+
35
+ export const fontWeightMedium500 = 500;
36
+
37
+ export const fontSizeH4 = 20;
38
+
39
+ export const fontSizeH3 = 24;
40
+
41
+ export const fontWeightSemiBold600 = 600;
42
+
43
+ export const fontWeightBold700 = 700;
44
+
45
+ export const fontSizeH2 = 28;
46
+
47
+ export const fontSizeH1 = 36;
48
+
49
+ export const fontWeightExtraBold800 = 800;
50
+
51
+ export const lineHeightXs16 = 16;
52
+
53
+ export const lineHeightS20 = 20;
54
+
55
+ export const lineHeightM24 = 24;
56
+
57
+ export const lineHeightL28 = 28;
58
+
59
+ export const lineHeightXl32 = 32;
60
+
61
+ export const textDecorationUnderline = "underline";
62
+
63
+ // Default export with all tokens
64
+ export default {
65
+ 'fontFamilyHeading': fontFamilyHeading,
66
+ 'fontFamilyBody': fontFamilyBody,
67
+ 'fontFamilyCode': fontFamilyCode,
68
+ 'fontSizeXxs': fontSizeXxs,
69
+ 'fontSizeXs': fontSizeXs,
70
+ 'fontWeightThin100': fontWeightThin100,
71
+ 'fontSizeSm': fontSizeSm,
72
+ 'fontSizeDefault': fontSizeDefault,
73
+ 'fontWeightLight300': fontWeightLight300,
74
+ 'fontSizeH6': fontSizeH6,
75
+ 'fontSizeCaption': fontSizeCaption,
76
+ 'fontSizeCode': fontSizeCode,
77
+ 'fontWeightRegular400': fontWeightRegular400,
78
+ 'fontSizeH5': fontSizeH5,
79
+ 'fontWeightMedium500': fontWeightMedium500,
80
+ 'fontSizeH4': fontSizeH4,
81
+ 'fontSizeH3': fontSizeH3,
82
+ 'fontWeightSemiBold600': fontWeightSemiBold600,
83
+ 'fontWeightBold700': fontWeightBold700,
84
+ 'fontSizeH2': fontSizeH2,
85
+ 'fontSizeH1': fontSizeH1,
86
+ 'fontWeightExtraBold800': fontWeightExtraBold800,
87
+ 'lineHeightXs16': lineHeightXs16,
88
+ 'lineHeightS20': lineHeightS20,
89
+ 'lineHeightM24': lineHeightM24,
90
+ 'lineHeightL28': lineHeightL28,
91
+ 'lineHeightXl32': lineHeightXl32,
92
+ 'textDecorationUnderline': textDecorationUnderline
93
+ };
package/dist/typography.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "fontFamilyHeading": "Inter",
3
+ "fontFamilyBody": "Inter",
4
+ "fontFamilyCode": "Jetbrains Mono",
5
+ "fontSizeXxs": 10,
6
+ "fontSizeXs": 12,
7
+ "fontWeightThin100": 100,
8
+ "fontSizeSm": 14,
9
+ "fontSizeDefault": 16,
10
+ "fontWeightLight300": 300,
11
+ "fontSizeH6": 16,
12
+ "fontSizeCaption": 13,
13
+ "fontSizeCode": 14,
14
+ "fontWeightRegular400": 400,
15
+ "fontSizeH5": 18,
16
+ "fontWeightMedium500": 500,
17
+ "fontSizeH4": 20,
18
+ "fontSizeH3": 24,
19
+ "fontWeightSemiBold600": 600,
20
+ "fontWeightBold700": 700,
21
+ "fontSizeH2": 28,
22
+ "fontSizeH1": 36,
23
+ "fontWeightExtraBold800": 800,
24
+ "lineHeightXs16": 16,
25
+ "lineHeightS20": 20,
26
+ "lineHeightM24": 24,
27
+ "lineHeightL28": 28,
28
+ "lineHeightXl32": 32,
29
+ "textDecorationUnderline": "underline"
30
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moderneinc/neo-design",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "type": "module",
5
5
  "description": "Design primitives and tokens for Moderne applications",
6
6
  "main": "dist/index.js",