@moderneinc/neo-design 1.2.4 → 1.2.10
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.
- package/dist/breakpoints.d.ts +22 -0
- package/dist/breakpoints.js +12 -0
- package/dist/colors.d.ts +150 -0
- package/dist/colors.js +56 -0
- package/dist/index.d.ts +861 -0
- package/dist/semantic-colors.d.ts +343 -0
- package/dist/semantic-colors.js +334 -1
- package/dist/typography.d.ts +71 -0
- package/dist/typography.js +35 -0
- package/package.json +10 -5
- package/dist/package.json +0 -87
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Neo Design System
|
|
3
|
+
* TypeScript declarations generated from Figma design tokens
|
|
4
|
+
* @generated
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export declare const xl: 1920;
|
|
8
|
+
|
|
9
|
+
export declare const lg: 1280;
|
|
10
|
+
|
|
11
|
+
export declare const md: 960;
|
|
12
|
+
|
|
13
|
+
export declare const sm: 600;
|
|
14
|
+
|
|
15
|
+
declare const _default: {
|
|
16
|
+
xl: typeof xl,
|
|
17
|
+
lg: typeof lg,
|
|
18
|
+
md: typeof md,
|
|
19
|
+
sm: typeof sm
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export default _default;
|
package/dist/breakpoints.js
CHANGED
|
@@ -4,12 +4,24 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @type {number}
|
|
9
|
+
*/
|
|
7
10
|
export const xl = 1920;
|
|
8
11
|
|
|
12
|
+
/**
|
|
13
|
+
* @type {number}
|
|
14
|
+
*/
|
|
9
15
|
export const lg = 1280;
|
|
10
16
|
|
|
17
|
+
/**
|
|
18
|
+
* @type {number}
|
|
19
|
+
*/
|
|
11
20
|
export const md = 960;
|
|
12
21
|
|
|
22
|
+
/**
|
|
23
|
+
* @type {number}
|
|
24
|
+
*/
|
|
13
25
|
export const sm = 600;
|
|
14
26
|
|
|
15
27
|
// Default export with all color groups
|
package/dist/colors.d.ts
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Neo Design System
|
|
3
|
+
* TypeScript declarations generated from Figma design tokens
|
|
4
|
+
* @generated
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export type DigitalBlue = {
|
|
8
|
+
'50': '#f2f3ff';
|
|
9
|
+
'100': '#dce0ff';
|
|
10
|
+
'200': '#b6bfff';
|
|
11
|
+
'300': '#8d99ff';
|
|
12
|
+
'400': '#626eff';
|
|
13
|
+
/**
|
|
14
|
+
* primary color
|
|
15
|
+
*/
|
|
16
|
+
'500': '#2f42ff';
|
|
17
|
+
'600': '#2637e6';
|
|
18
|
+
'700': '#1e2ec2';
|
|
19
|
+
'800': '#131e7a';
|
|
20
|
+
'900': '#000855';
|
|
21
|
+
/**
|
|
22
|
+
* primary color
|
|
23
|
+
*/
|
|
24
|
+
main: '#2f42ff';
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export declare const digitalBlue: DigitalBlue;
|
|
28
|
+
|
|
29
|
+
export type DigitalGreen = {
|
|
30
|
+
'50': '#f3fff5';
|
|
31
|
+
'100': '#cfffd7';
|
|
32
|
+
'200': '#acffb9';
|
|
33
|
+
'300': '#88fe9b';
|
|
34
|
+
'400': '#72e184';
|
|
35
|
+
'500': '#5ec46f';
|
|
36
|
+
'600': '#4ca75a';
|
|
37
|
+
'700': '#3b8948';
|
|
38
|
+
'800': '#2c6c36';
|
|
39
|
+
'900': '#1e4f26';
|
|
40
|
+
main: '#5ec46f';
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export declare const digitalGreen: DigitalGreen;
|
|
44
|
+
|
|
45
|
+
export type Gold = {
|
|
46
|
+
'100': '#fbf1d2';
|
|
47
|
+
'200': '#f7e3a5';
|
|
48
|
+
'300': '#f4d479';
|
|
49
|
+
'400': '#f0c64c';
|
|
50
|
+
'500': '#ecb81f';
|
|
51
|
+
'600': '#bd9319';
|
|
52
|
+
'700': '#8e6e13';
|
|
53
|
+
'800': '#5e4a0c';
|
|
54
|
+
'900': '#2f2506';
|
|
55
|
+
main: '#ecb81f';
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export declare const gold: Gold;
|
|
59
|
+
|
|
60
|
+
export type Grey = {
|
|
61
|
+
'50': '#f9fafb';
|
|
62
|
+
'100': '#f3f4f6';
|
|
63
|
+
'200': '#e5e7eb';
|
|
64
|
+
'300': '#d1d5db';
|
|
65
|
+
'400': '#9ca3af';
|
|
66
|
+
'500': '#6b7280';
|
|
67
|
+
'600': '#4b5563';
|
|
68
|
+
'700': '#374151';
|
|
69
|
+
'800': '#1f2937';
|
|
70
|
+
'900': '#111827';
|
|
71
|
+
main: '#6b7280';
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export declare const grey: Grey;
|
|
75
|
+
|
|
76
|
+
export type Orange = {
|
|
77
|
+
'50': '#fff8e5';
|
|
78
|
+
'100': '#ffebb7';
|
|
79
|
+
'200': '#ffde8a';
|
|
80
|
+
'300': '#ffd15c';
|
|
81
|
+
'400': '#ffc52e';
|
|
82
|
+
'500': '#ffb800';
|
|
83
|
+
'600': '#d69b00';
|
|
84
|
+
'700': '#856000';
|
|
85
|
+
'800': '#856000';
|
|
86
|
+
'900': '#5c4200';
|
|
87
|
+
main: '#ffb800';
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export declare const orange: Orange;
|
|
91
|
+
|
|
92
|
+
export type Red = {
|
|
93
|
+
'50': '#ffedef';
|
|
94
|
+
'100': '#ffc6cd';
|
|
95
|
+
'200': '#ff9eaa';
|
|
96
|
+
'300': '#fd7686';
|
|
97
|
+
'400': '#ed4a5d';
|
|
98
|
+
'500': '#cb3446';
|
|
99
|
+
'600': '#a92232';
|
|
100
|
+
'700': '#871421';
|
|
101
|
+
'800': '#650914';
|
|
102
|
+
'900': '#43020a';
|
|
103
|
+
main: '#cb3446';
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
export declare const red: Red;
|
|
107
|
+
|
|
108
|
+
export type TealGreen = {
|
|
109
|
+
'50': '#eefffa';
|
|
110
|
+
'100': '#c9fff1';
|
|
111
|
+
'200': '#a4ffe7';
|
|
112
|
+
'300': '#7fffde';
|
|
113
|
+
'400': '#54eec6';
|
|
114
|
+
'500': '#3bcca6';
|
|
115
|
+
'600': '#27aa88';
|
|
116
|
+
'700': '#17886b';
|
|
117
|
+
'800': '#0b664e';
|
|
118
|
+
'900': '#034433';
|
|
119
|
+
main: '#3bcca6';
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export declare const tealGreen: TealGreen;
|
|
123
|
+
|
|
124
|
+
export type Violet = {
|
|
125
|
+
'100': '#ebd5f1';
|
|
126
|
+
'200': '#d6ace3';
|
|
127
|
+
'300': '#c282d5';
|
|
128
|
+
'400': '#ad59c7';
|
|
129
|
+
'500': '#992fb9';
|
|
130
|
+
'600': '#7a2694';
|
|
131
|
+
'700': '#5c1c6f';
|
|
132
|
+
'800': '#3d134a';
|
|
133
|
+
'900': '#1f0925';
|
|
134
|
+
main: '#992fb9';
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export declare const violet: Violet;
|
|
138
|
+
|
|
139
|
+
declare const _default: {
|
|
140
|
+
digitalBlue: typeof digitalBlue,
|
|
141
|
+
digitalGreen: typeof digitalGreen,
|
|
142
|
+
gold: typeof gold,
|
|
143
|
+
grey: typeof grey,
|
|
144
|
+
orange: typeof orange,
|
|
145
|
+
red: typeof red,
|
|
146
|
+
tealGreen: typeof tealGreen,
|
|
147
|
+
violet: typeof violet
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export default _default;
|
package/dist/colors.js
CHANGED
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
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
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @type {DigitalBlue}
|
|
13
|
+
*/
|
|
7
14
|
export const digitalBlue = {
|
|
8
15
|
"50": "#f2f3ff",
|
|
9
16
|
"100": "#dce0ff",
|
|
@@ -20,6 +27,13 @@ export const digitalBlue = {
|
|
|
20
27
|
"main": "#2f42ff"
|
|
21
28
|
};
|
|
22
29
|
|
|
30
|
+
/**
|
|
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
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* @type {DigitalGreen}
|
|
36
|
+
*/
|
|
23
37
|
export const digitalGreen = {
|
|
24
38
|
"50": "#f3fff5",
|
|
25
39
|
"100": "#cfffd7",
|
|
@@ -34,6 +48,13 @@ export const digitalGreen = {
|
|
|
34
48
|
"main": "#5ec46f"
|
|
35
49
|
};
|
|
36
50
|
|
|
51
|
+
/**
|
|
52
|
+
* @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Gold
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* @type {Gold}
|
|
57
|
+
*/
|
|
37
58
|
export const gold = {
|
|
38
59
|
"100": "#fbf1d2",
|
|
39
60
|
"200": "#f7e3a5",
|
|
@@ -47,6 +68,13 @@ export const gold = {
|
|
|
47
68
|
"main": "#ecb81f"
|
|
48
69
|
};
|
|
49
70
|
|
|
71
|
+
/**
|
|
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
|
|
73
|
+
*/
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* @type {Grey}
|
|
77
|
+
*/
|
|
50
78
|
export const grey = {
|
|
51
79
|
"50": "#f9fafb",
|
|
52
80
|
"100": "#f3f4f6",
|
|
@@ -61,6 +89,13 @@ export const grey = {
|
|
|
61
89
|
"main": "#6b7280"
|
|
62
90
|
};
|
|
63
91
|
|
|
92
|
+
/**
|
|
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
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* @type {Orange}
|
|
98
|
+
*/
|
|
64
99
|
export const orange = {
|
|
65
100
|
"50": "#fff8e5",
|
|
66
101
|
"100": "#ffebb7",
|
|
@@ -75,6 +110,13 @@ export const orange = {
|
|
|
75
110
|
"main": "#ffb800"
|
|
76
111
|
};
|
|
77
112
|
|
|
113
|
+
/**
|
|
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
|
|
115
|
+
*/
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* @type {Red}
|
|
119
|
+
*/
|
|
78
120
|
export const red = {
|
|
79
121
|
"50": "#ffedef",
|
|
80
122
|
"100": "#ffc6cd",
|
|
@@ -89,6 +131,13 @@ export const red = {
|
|
|
89
131
|
"main": "#cb3446"
|
|
90
132
|
};
|
|
91
133
|
|
|
134
|
+
/**
|
|
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
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* @type {TealGreen}
|
|
140
|
+
*/
|
|
92
141
|
export const tealGreen = {
|
|
93
142
|
"50": "#eefffa",
|
|
94
143
|
"100": "#c9fff1",
|
|
@@ -103,6 +152,13 @@ export const tealGreen = {
|
|
|
103
152
|
"main": "#3bcca6"
|
|
104
153
|
};
|
|
105
154
|
|
|
155
|
+
/**
|
|
156
|
+
* @typedef {{ '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, main: string }} Violet
|
|
157
|
+
*/
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* @type {Violet}
|
|
161
|
+
*/
|
|
106
162
|
export const violet = {
|
|
107
163
|
"100": "#ebd5f1",
|
|
108
164
|
"200": "#d6ace3",
|