@moderneinc/neo-design 1.2.11 → 1.3.0

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.
@@ -0,0 +1,12 @@
1
+ :root {
2
+ --neo-border-radius-card: 12;
3
+ --neo-border-radius-button: 999;
4
+ --neo-border-radius-input: 8;
5
+ --neo-border-radius-xXS: 2;
6
+ --neo-border-radius-xS: 4;
7
+ --neo-border-radius-s: 8;
8
+ --neo-border-radius-m: 12;
9
+ --neo-border-radius-l: 20;
10
+ --neo-border-radius-xL: 30;
11
+ --neo-border-radius-full: 999;
12
+ }
@@ -0,0 +1,182 @@
1
+ /**
2
+ * Neo Design System
3
+ * TypeScript declarations generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export declare const name: 'Border Radius';
8
+
9
+ export declare const modes: readonly [{
10
+ modeId: '650:3';
11
+ name: 'Mode 1';
12
+ }];
13
+
14
+ export declare const variables: readonly [{
15
+ name: 'card';
16
+ id: 'VariableID:3150:5738';
17
+ remote: false;
18
+ key: '60a5837229040d336393eed04b6fd37ba630e2df';
19
+ variableCollectionId: 'VariableCollectionId:650:4428';
20
+ resolvedType: 'FLOAT';
21
+ description: '';
22
+ hiddenFromPublishing: false;
23
+ valuesByMode: {
24
+ '650:3': 12;
25
+ };
26
+ scopes: readonly ['CORNER_RADIUS'];
27
+ codeSyntax: {
28
+ ;
29
+ };
30
+ }, {
31
+ name: 'button';
32
+ id: 'VariableID:3150:5739';
33
+ remote: false;
34
+ key: '986ca666ef468e2dbc12389273b907f4f3f77e73';
35
+ variableCollectionId: 'VariableCollectionId:650:4428';
36
+ resolvedType: 'FLOAT';
37
+ description: '';
38
+ hiddenFromPublishing: false;
39
+ valuesByMode: {
40
+ '650:3': 999;
41
+ };
42
+ scopes: readonly ['CORNER_RADIUS'];
43
+ codeSyntax: {
44
+ ;
45
+ };
46
+ }, {
47
+ name: 'input';
48
+ id: 'VariableID:3150:5741';
49
+ remote: false;
50
+ key: '5874adf292d5edd48fac987a1c8da2fb7bb9e4e8';
51
+ variableCollectionId: 'VariableCollectionId:650:4428';
52
+ resolvedType: 'FLOAT';
53
+ description: '';
54
+ hiddenFromPublishing: false;
55
+ valuesByMode: {
56
+ '650:3': 8;
57
+ };
58
+ scopes: readonly ['CORNER_RADIUS'];
59
+ codeSyntax: {
60
+ ;
61
+ };
62
+ }, {
63
+ name: 'XXS';
64
+ id: 'VariableID:650:4429';
65
+ remote: false;
66
+ key: 'ed392aa50142113623268ae49166fa5b278bcefd';
67
+ variableCollectionId: 'VariableCollectionId:650:4428';
68
+ resolvedType: 'FLOAT';
69
+ description: '';
70
+ hiddenFromPublishing: false;
71
+ valuesByMode: {
72
+ '650:3': 2;
73
+ };
74
+ scopes: readonly ['CORNER_RADIUS'];
75
+ codeSyntax: {
76
+ ;
77
+ };
78
+ }, {
79
+ name: 'XS';
80
+ id: 'VariableID:650:4430';
81
+ remote: false;
82
+ key: '98d8519727566163240d51af040b5f60e76a77aa';
83
+ variableCollectionId: 'VariableCollectionId:650:4428';
84
+ resolvedType: 'FLOAT';
85
+ description: '';
86
+ hiddenFromPublishing: false;
87
+ valuesByMode: {
88
+ '650:3': 4;
89
+ };
90
+ scopes: readonly ['CORNER_RADIUS'];
91
+ codeSyntax: {
92
+ ;
93
+ };
94
+ }, {
95
+ name: 'S';
96
+ id: 'VariableID:650:4431';
97
+ remote: false;
98
+ key: '5b622e37e11df6dea8f036b94aae03b3df4f3e9b';
99
+ variableCollectionId: 'VariableCollectionId:650:4428';
100
+ resolvedType: 'FLOAT';
101
+ description: '';
102
+ hiddenFromPublishing: false;
103
+ valuesByMode: {
104
+ '650:3': 8;
105
+ };
106
+ scopes: readonly ['CORNER_RADIUS'];
107
+ codeSyntax: {
108
+ ;
109
+ };
110
+ }, {
111
+ name: 'M';
112
+ id: 'VariableID:650:4432';
113
+ remote: false;
114
+ key: '67bff1fd44eb44db36d45a720219f9b45bcde0ff';
115
+ variableCollectionId: 'VariableCollectionId:650:4428';
116
+ resolvedType: 'FLOAT';
117
+ description: '';
118
+ hiddenFromPublishing: false;
119
+ valuesByMode: {
120
+ '650:3': 12;
121
+ };
122
+ scopes: readonly ['CORNER_RADIUS'];
123
+ codeSyntax: {
124
+ ;
125
+ };
126
+ }, {
127
+ name: 'L';
128
+ id: 'VariableID:650:4433';
129
+ remote: false;
130
+ key: 'f3aa9c1b2806a0c6c27c3081d7f94855f16a2c57';
131
+ variableCollectionId: 'VariableCollectionId:650:4428';
132
+ resolvedType: 'FLOAT';
133
+ description: '';
134
+ hiddenFromPublishing: false;
135
+ valuesByMode: {
136
+ '650:3': 20;
137
+ };
138
+ scopes: readonly ['CORNER_RADIUS'];
139
+ codeSyntax: {
140
+ ;
141
+ };
142
+ }, {
143
+ name: 'XL';
144
+ id: 'VariableID:650:4434';
145
+ remote: false;
146
+ key: 'dde87c84c577b05de6f911af08fc4177331b5825';
147
+ variableCollectionId: 'VariableCollectionId:650:4428';
148
+ resolvedType: 'FLOAT';
149
+ description: '';
150
+ hiddenFromPublishing: false;
151
+ valuesByMode: {
152
+ '650:3': 30;
153
+ };
154
+ scopes: readonly ['CORNER_RADIUS'];
155
+ codeSyntax: {
156
+ ;
157
+ };
158
+ }, {
159
+ name: 'Full';
160
+ id: 'VariableID:650:4435';
161
+ remote: false;
162
+ key: 'b8320f9cd88475ea330db3c04d16d40f3a5f207e';
163
+ variableCollectionId: 'VariableCollectionId:650:4428';
164
+ resolvedType: 'FLOAT';
165
+ description: '';
166
+ hiddenFromPublishing: false;
167
+ valuesByMode: {
168
+ '650:3': 999;
169
+ };
170
+ scopes: readonly ['CORNER_RADIUS'];
171
+ codeSyntax: {
172
+ ;
173
+ };
174
+ }];
175
+
176
+ declare const _default: {
177
+ name: typeof name,
178
+ modes: typeof modes,
179
+ variables: typeof variables
180
+ };
181
+
182
+ export default _default;
@@ -0,0 +1,69 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ /**
8
+ * @type {number}
9
+ */
10
+ export const card = 12;
11
+
12
+ /**
13
+ * @type {number}
14
+ */
15
+ export const button = 999;
16
+
17
+ /**
18
+ * @type {number}
19
+ */
20
+ export const input = 8;
21
+
22
+ /**
23
+ * @type {number}
24
+ */
25
+ export const xXS = 2;
26
+
27
+ /**
28
+ * @type {number}
29
+ */
30
+ export const xS = 4;
31
+
32
+ /**
33
+ * @type {number}
34
+ */
35
+ export const s = 8;
36
+
37
+ /**
38
+ * @type {number}
39
+ */
40
+ export const m = 12;
41
+
42
+ /**
43
+ * @type {number}
44
+ */
45
+ export const l = 20;
46
+
47
+ /**
48
+ * @type {number}
49
+ */
50
+ export const xL = 30;
51
+
52
+ /**
53
+ * @type {number}
54
+ */
55
+ export const full = 999;
56
+
57
+ // Default export with all tokens
58
+ export default {
59
+ card,
60
+ button,
61
+ input,
62
+ xXS,
63
+ xS,
64
+ s,
65
+ m,
66
+ l,
67
+ xL,
68
+ full
69
+ };
package/dist/colors.css CHANGED
@@ -10,8 +10,6 @@
10
10
  --neo-digital-blue-700: #1e2ec2;
11
11
  --neo-digital-blue-800: #131e7a;
12
12
  --neo-digital-blue-900: #000855;
13
- /* primary color */
14
- --neo-digital-blue-main: #2f42ff;
15
13
  --neo-digital-green-50: #f3fff5;
16
14
  --neo-digital-green-100: #cfffd7;
17
15
  --neo-digital-green-200: #acffb9;
@@ -22,7 +20,6 @@
22
20
  --neo-digital-green-700: #3b8948;
23
21
  --neo-digital-green-800: #2c6c36;
24
22
  --neo-digital-green-900: #1e4f26;
25
- --neo-digital-green-main: #5ec46f;
26
23
  --neo-gold-100: #fbf1d2;
27
24
  --neo-gold-200: #f7e3a5;
28
25
  --neo-gold-300: #f4d479;
@@ -32,7 +29,6 @@
32
29
  --neo-gold-700: #8e6e13;
33
30
  --neo-gold-800: #5e4a0c;
34
31
  --neo-gold-900: #2f2506;
35
- --neo-gold-main: #ecb81f;
36
32
  --neo-grey-50: #f9fafb;
37
33
  --neo-grey-100: #f3f4f6;
38
34
  --neo-grey-200: #e5e7eb;
@@ -43,7 +39,6 @@
43
39
  --neo-grey-700: #374151;
44
40
  --neo-grey-800: #1f2937;
45
41
  --neo-grey-900: #111827;
46
- --neo-grey-main: #6b7280;
47
42
  --neo-orange-50: #fff8e5;
48
43
  --neo-orange-100: #ffebb7;
49
44
  --neo-orange-200: #ffde8a;
@@ -54,7 +49,6 @@
54
49
  --neo-orange-700: #856000;
55
50
  --neo-orange-800: #856000;
56
51
  --neo-orange-900: #5c4200;
57
- --neo-orange-main: #ffb800;
58
52
  --neo-red-50: #ffedef;
59
53
  --neo-red-100: #ffc6cd;
60
54
  --neo-red-200: #ff9eaa;
@@ -65,7 +59,6 @@
65
59
  --neo-red-700: #871421;
66
60
  --neo-red-800: #650914;
67
61
  --neo-red-900: #43020a;
68
- --neo-red-main: #cb3446;
69
62
  --neo-teal-green-50: #eefffa;
70
63
  --neo-teal-green-100: #c9fff1;
71
64
  --neo-teal-green-200: #a4ffe7;
@@ -76,7 +69,6 @@
76
69
  --neo-teal-green-700: #17886b;
77
70
  --neo-teal-green-800: #0b664e;
78
71
  --neo-teal-green-900: #034433;
79
- --neo-teal-green-main: #3bcca6;
80
72
  --neo-violet-100: #ebd5f1;
81
73
  --neo-violet-200: #d6ace3;
82
74
  --neo-violet-300: #c282d5;
@@ -86,5 +78,4 @@
86
78
  --neo-violet-700: #5c1c6f;
87
79
  --neo-violet-800: #3d134a;
88
80
  --neo-violet-900: #1f0925;
89
- --neo-violet-main: #992fb9;
90
81
  }
package/dist/colors.d.ts CHANGED
@@ -18,10 +18,6 @@ export type DigitalBlue = {
18
18
  '700': '#1e2ec2';
19
19
  '800': '#131e7a';
20
20
  '900': '#000855';
21
- /**
22
- * primary color
23
- */
24
- main: '#2f42ff';
25
21
  };
26
22
 
27
23
  export declare const digitalBlue: DigitalBlue;
@@ -37,7 +33,6 @@ export type DigitalGreen = {
37
33
  '700': '#3b8948';
38
34
  '800': '#2c6c36';
39
35
  '900': '#1e4f26';
40
- main: '#5ec46f';
41
36
  };
42
37
 
43
38
  export declare const digitalGreen: DigitalGreen;
@@ -52,7 +47,6 @@ export type Gold = {
52
47
  '700': '#8e6e13';
53
48
  '800': '#5e4a0c';
54
49
  '900': '#2f2506';
55
- main: '#ecb81f';
56
50
  };
57
51
 
58
52
  export declare const gold: Gold;
@@ -68,7 +62,6 @@ export type Grey = {
68
62
  '700': '#374151';
69
63
  '800': '#1f2937';
70
64
  '900': '#111827';
71
- main: '#6b7280';
72
65
  };
73
66
 
74
67
  export declare const grey: Grey;
@@ -84,7 +77,6 @@ export type Orange = {
84
77
  '700': '#856000';
85
78
  '800': '#856000';
86
79
  '900': '#5c4200';
87
- main: '#ffb800';
88
80
  };
89
81
 
90
82
  export declare const orange: Orange;
@@ -100,7 +92,6 @@ export type Red = {
100
92
  '700': '#871421';
101
93
  '800': '#650914';
102
94
  '900': '#43020a';
103
- main: '#cb3446';
104
95
  };
105
96
 
106
97
  export declare const red: Red;
@@ -116,7 +107,6 @@ export type TealGreen = {
116
107
  '700': '#17886b';
117
108
  '800': '#0b664e';
118
109
  '900': '#034433';
119
- main: '#3bcca6';
120
110
  };
121
111
 
122
112
  export declare const tealGreen: TealGreen;
@@ -131,7 +121,6 @@ export type Violet = {
131
121
  '700': '#5c1c6f';
132
122
  '800': '#3d134a';
133
123
  '900': '#1f0925';
134
- main: '#992fb9';
135
124
  };
136
125
 
137
126
  export declare const violet: Violet;
package/dist/colors.js CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  /**
8
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} DigitalBlue
8
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} DigitalBlue
9
9
  */
10
10
 
11
11
  /**
@@ -22,13 +22,11 @@ export const digitalBlue = {
22
22
  "600": "#2637e6",
23
23
  "700": "#1e2ec2",
24
24
  "800": "#131e7a",
25
- "900": "#000855",
26
- /** primary color */
27
- "main": "#2f42ff"
25
+ "900": "#000855"
28
26
  };
29
27
 
30
28
  /**
31
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} DigitalGreen
29
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} DigitalGreen
32
30
  */
33
31
 
34
32
  /**
@@ -44,12 +42,11 @@ export const digitalGreen = {
44
42
  "600": "#4ca75a",
45
43
  "700": "#3b8948",
46
44
  "800": "#2c6c36",
47
- "900": "#1e4f26",
48
- "main": "#5ec46f"
45
+ "900": "#1e4f26"
49
46
  };
50
47
 
51
48
  /**
52
- * @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Gold
49
+ * @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} Gold
53
50
  */
54
51
 
55
52
  /**
@@ -64,12 +61,11 @@ export const gold = {
64
61
  "600": "#bd9319",
65
62
  "700": "#8e6e13",
66
63
  "800": "#5e4a0c",
67
- "900": "#2f2506",
68
- "main": "#ecb81f"
64
+ "900": "#2f2506"
69
65
  };
70
66
 
71
67
  /**
72
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Grey
68
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} Grey
73
69
  */
74
70
 
75
71
  /**
@@ -85,12 +81,11 @@ export const grey = {
85
81
  "600": "#4b5563",
86
82
  "700": "#374151",
87
83
  "800": "#1f2937",
88
- "900": "#111827",
89
- "main": "#6b7280"
84
+ "900": "#111827"
90
85
  };
91
86
 
92
87
  /**
93
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Orange
88
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} Orange
94
89
  */
95
90
 
96
91
  /**
@@ -106,12 +101,11 @@ export const orange = {
106
101
  "600": "#d69b00",
107
102
  "700": "#856000",
108
103
  "800": "#856000",
109
- "900": "#5c4200",
110
- "main": "#ffb800"
104
+ "900": "#5c4200"
111
105
  };
112
106
 
113
107
  /**
114
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Red
108
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} Red
115
109
  */
116
110
 
117
111
  /**
@@ -127,12 +121,11 @@ export const red = {
127
121
  "600": "#a92232",
128
122
  "700": "#871421",
129
123
  "800": "#650914",
130
- "900": "#43020a",
131
- "main": "#cb3446"
124
+ "900": "#43020a"
132
125
  };
133
126
 
134
127
  /**
135
- * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} TealGreen
128
+ * @typedef {{ '50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} TealGreen
136
129
  */
137
130
 
138
131
  /**
@@ -148,12 +141,11 @@ export const tealGreen = {
148
141
  "600": "#27aa88",
149
142
  "700": "#17886b",
150
143
  "800": "#0b664e",
151
- "900": "#034433",
152
- "main": "#3bcca6"
144
+ "900": "#034433"
153
145
  };
154
146
 
155
147
  /**
156
- * @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Violet
148
+ * @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string }} Violet
157
149
  */
158
150
 
159
151
  /**
@@ -168,8 +160,7 @@ export const violet = {
168
160
  "600": "#7a2694",
169
161
  "700": "#5c1c6f",
170
162
  "800": "#3d134a",
171
- "900": "#1f0925",
172
- "main": "#992fb9"
163
+ "900": "#1f0925"
173
164
  };
174
165
 
175
166
  // Default export with all color groups