@moderneinc/neo-design 2.8.0 → 3.0.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.
Files changed (17) hide show
  1. package/dist/index.d.ts +388 -376
  2. package/dist/semantic-colors.css +122 -108
  3. package/dist/semantic-colors.d.ts +194 -182
  4. package/dist/semantic-colors.js +131 -125
  5. package/dist/semantic-typography.css +46 -46
  6. package/dist/semantic-typography.d.ts +58 -58
  7. package/dist/semantic-typography.js +8 -8
  8. package/dist/shadows.css +6 -6
  9. package/dist/shadows.d.ts +62 -62
  10. package/dist/shadows.js +76 -76
  11. package/dist/spacing.css +12 -12
  12. package/dist/spacing.d.ts +24 -24
  13. package/dist/spacing.js +25 -25
  14. package/dist/typography.css +24 -24
  15. package/dist/typography.d.ts +50 -50
  16. package/dist/typography.js +50 -50
  17. package/package.json +2 -2
package/dist/semantic-colors.css CHANGED
@@ -1,120 +1,151 @@
1
- :root {/* Scopes: All Fills, Stroke Color */
2
- --neo-activity-recipe-run: #992fb9;
1
+ :root { --neo-icons-hover-border: #dce0ff;
2
+ --neo-icons-pressed-background: #dce0ff;
3
3
  /* Scopes: All Fills, Stroke Color */
4
- --neo-activity-commit-job: #2f42ff;
4
+ --neo-icons-hover: #1e2ec2;
5
5
  /* Scopes: All Fills, Stroke Color */
6
- --neo-activity-visualization: #27aa88;
6
+ --neo-icons-hover-background: #f2f3ff;
7
7
  /* Scopes: All Fills, Stroke Color */
8
- --neo-border-primary: #d1d5db;
8
+ --neo-icons-disabled: #d1d5db;
9
9
  /* Scopes: All Fills, Stroke Color */
10
- --neo-border-secondary: #e5e7eb;
11
- --neo-border-focus: #3bcca6;
10
+ --neo-icons-placeholder: #9ca3af;
12
11
  /* Scopes: All Fills, Stroke Color */
13
- --neo-buttons-destructive: #cb3446;
12
+ --neo-icons-pressed: #131e7a;
14
13
  /* Scopes: All Fills, Stroke Color */
15
- --neo-buttons-navigation-active: #ffffff;
14
+ --neo-icons-utility: #9ca3af;
16
15
  /* Scopes: All Fills, Stroke Color */
17
- --neo-buttons-primary-pressed: #131e7a;
16
+ --neo-icons-default: #1f2937;
18
17
  /* Scopes: All Fills, Stroke Color */
19
- --neo-buttons-primary-default: #2f42ff;
18
+ --neo-icons-active: #2f42ff;
19
+ --neo-surfaces-highlight-background: rgba(38, 55, 230, 0);
20
+ --neo-surfaces-active-highlight: rgba(182, 191, 255, 0.4);
20
21
  /* Scopes: All Fills, Stroke Color */
21
- --neo-buttons-primary-hover: #1e2ec2;
22
+ --neo-surfaces-page: #f4f4f4;
22
23
  /* Scopes: All Fills, Stroke Color */
23
- --neo-buttons-primary-disabled: #f3f4f6;
24
+ --neo-surfaces-card: #ffffff;
24
25
  /* Scopes: All Fills, Stroke Color */
25
- --neo-buttons-secondary-default-border: #b6bfff;
26
+ --neo-surfaces-card-header: #f3f4f6;
26
27
  /* Scopes: All Fills, Stroke Color */
27
- --neo-buttons-secondary-hover-background: #f2f3ff;
28
+ --neo-surfaces-tab-active: #f3f4f6;
28
29
  /* Scopes: All Fills, Stroke Color */
29
- --neo-buttons-secondary-pressed-background: #dce0ff;
30
+ --neo-surfaces-list-hover: #f9fafb;
30
31
  /* Scopes: All Fills, Stroke Color */
31
- --neo-buttons-secondary-disabled-background: #f9fafb;
32
+ --neo-surfaces-table-disabled-row: #f3f4f6;
32
33
  /* Scopes: All Fills, Stroke Color */
33
- --neo-buttons-secondary-default-background: #ffffff;
34
+ --neo-surfaces-table-background: #ffffff;
34
35
  /* Scopes: All Fills, Stroke Color */
35
- --neo-buttons-secondary-default: #1f2937;
36
+ --neo-surfaces-shadow-neutral: rgba(31, 41, 55, 0.1);
36
37
  /* Scopes: All Fills, Stroke Color */
37
- --neo-buttons-tertiary-default: #2f42ff;
38
+ --neo-surfaces-shadow-primary: rgba(47, 66, 255, 0.1);
38
39
  /* Scopes: All Fills, Stroke Color */
39
- --neo-buttons-tertiary-hover: #1e2ec2;
40
+ --neo-surfaces-tooltip: #4b5563;
40
41
  /* Scopes: All Fills, Stroke Color */
41
- --neo-buttons-tertiary-pressed: #131e7a;
42
+ --neo-surfaces-scrim: rgba(31, 41, 55, 0.2);
42
43
  /* Scopes: All Fills, Stroke Color */
43
- --neo-buttons-tertiary-disabled: #9ca3af;
44
+ --neo-surfaces-tab-secondary-background: #e5e7eb;
44
45
  /* Scopes: All Fills, Stroke Color */
45
- --neo-buttons-navigation-default-border: #b6bfff;
46
+ --neo-surfaces-snackbar-dark-mode: #ffffff;
46
47
  /* Scopes: All Fills, Stroke Color */
47
- --neo-buttons-navigation-hover-background: #f3f4f6;
48
+ --neo-surfaces-snackbar-brand: #131e7a;
48
49
  /* Scopes: All Fills, Stroke Color */
49
- --neo-buttons-navigation-pressed-background: #e5e7eb;
50
+ --neo-surfaces-snackbar-light-mode: #4b5563;
50
51
  /* Scopes: All Fills, Stroke Color */
51
- --neo-buttons-navigation-active-border: #2f42ff;
52
+ --neo-surfaces-white: #ffffff;
52
53
  /* Scopes: All Fills, Stroke Color */
53
- --neo-data-green: #4ca75a;
54
+ --neo-surfaces-black: #000000;
55
+ --neo-typography-search-input-background: #ffffff;
56
+ --neo-typography-link-default: #ffffff;
57
+ --neo-typography-link-hover: #ffffff;
54
58
  /* Scopes: All Fills, Stroke Color */
55
- --neo-data-yellow: #fdda04;
59
+ --neo-typography-navigation-search-highlight-text: #1e2ec2;
56
60
  /* Scopes: All Fills, Stroke Color */
57
- --neo-data-orange1: #ffc008;
61
+ --neo-typography-navigation-search-highlight-background: rgba(47, 66, 255, 0);
58
62
  /* Scopes: All Fills, Stroke Color */
59
- --neo-data-orange2: #ff9800;
63
+ --neo-typography-navigation-search-input-background: #f2f3ff;
60
64
  /* Scopes: All Fills, Stroke Color */
61
- --neo-data-orange3: #f9a91b;
65
+ --neo-typography-navigation-search-highlight-background-active: #b6bfff;
62
66
  /* Scopes: All Fills, Stroke Color */
63
- --neo-data-red1: #ff5c24;
67
+ --neo-typography-navigation-default: #1f2937;
68
+ --neo-typography-link-visited: #ffffff;
69
+ --neo-typography-link-white: #ffffff;
70
+ --neo-typography-link-white-hover: #ffffff;
64
71
  /* Scopes: All Fills, Stroke Color */
65
- --neo-data-red2: #ed4134;
72
+ --neo-typography-input-placeholder: #9ca3af;
66
73
  /* Scopes: All Fills, Stroke Color */
67
- --neo-data-red3: #cb3446;
74
+ --neo-typography-input-default: #1f2937;
68
75
  /* Scopes: All Fills, Stroke Color */
69
- --neo-icons-default: #1f2937;
76
+ --neo-typography-input-label: #1f2937;
70
77
  /* Scopes: All Fills, Stroke Color */
71
- --neo-icons-pressed: #131e7a;
78
+ --neo-typography-input-helper: #4b5563;
72
79
  /* Scopes: All Fills, Stroke Color */
73
- --neo-icons-utility: #9ca3af;
80
+ --neo-typography-code-primary: #1f2937;
74
81
  /* Scopes: All Fills, Stroke Color */
75
- --neo-icons-active: #2f42ff;
82
+ --neo-typography-code-secondary: #9ca3af;
76
83
  /* Scopes: All Fills, Stroke Color */
77
- --neo-icons-hover: #1e2ec2;
84
+ --neo-typography-button-disabled: #9ca3af;
78
85
  /* Scopes: All Fills, Stroke Color */
79
- --neo-icons-hover-background: #f2f3ff;
86
+ --neo-typography-tab-inactive: #4b5563;
80
87
  /* Scopes: All Fills, Stroke Color */
81
- --neo-icons-disabled: #d1d5db;
88
+ --neo-typography-tab-active: #2f42ff;
82
89
  /* Scopes: All Fills, Stroke Color */
83
- --neo-icons-placeholder: #9ca3af;
84
- --neo-icons-hover-border: #dce0ff;
85
- --neo-icons-pressed-background: #dce0ff;
90
+ --neo-typography-link-primary: #2f42ff;
86
91
  /* Scopes: All Fills, Stroke Color */
87
- --neo-input-checkbox: #d1d5db;
92
+ --neo-typography-link-disabled: #b6bfff;
88
93
  /* Scopes: All Fills, Stroke Color */
89
- --neo-input-background: #ffffff;
94
+ --neo-typography-link-default: #1f2937;
90
95
  /* Scopes: All Fills, Stroke Color */
91
- --neo-input-disabled-background: #f9fafb;
96
+ --neo-typography-link-white: #ffffff;
97
+ /* Scopes: All Fills, Stroke Color */
98
+ --neo-typography-error: #cb3446;
99
+ /* Scopes: All Fills, Stroke Color */
100
+ --neo-typography-success: #4ca75a;
101
+ /* Scopes: All Fills, Stroke Color */
102
+ --neo-typography-warning: #1f2937;
103
+ /* Scopes: All Fills, Stroke Color */
104
+ --neo-typography-tooltip: #ffffff;
105
+ /* Scopes: All Fills, Stroke Color */
106
+ --neo-typography-legal: #9ca3af;
107
+ /* Scopes: All Fills, Stroke Color */
108
+ --neo-typography-body-secondary: #6b7280;
109
+ /* Scopes: All Fills, Stroke Color */
110
+ --neo-typography-body: #1f2937;
111
+ --neo-border-overlay: rgba(255, 255, 255, 0);
112
+ /* Scopes: All Fills, Stroke Color */
113
+ --neo-border-primary: #d1d5db;
114
+ /* Scopes: All Fills, Stroke Color */
115
+ --neo-border-secondary: #e5e7eb;
116
+ --neo-border-focus: #3bcca6;
117
+ /* Scopes: All Fills, Stroke Color */
118
+ --neo-input-checkbox: #d1d5db;
92
119
  /* Scopes: All Fills, Stroke Color */
93
120
  --neo-input-hover-background: #f3f4f6;
94
121
  /* Scopes: All Fills, Stroke Color */
95
- --neo-status-success-dark: #2c6c36;
122
+ --neo-input-background: #ffffff;
96
123
  /* Scopes: All Fills, Stroke Color */
97
- --neo-status-success-default: #4ca75a;
124
+ --neo-input-disabled-background: #f9fafb;
98
125
  /* Scopes: All Fills, Stroke Color */
99
126
  --neo-status-success-light: #f3fff5;
100
127
  /* Scopes: All Fills, Stroke Color */
101
- --neo-status-success-transparent: #4ca75a;
128
+ --neo-status-success-default: #4ca75a;
102
129
  /* Scopes: All Fills, Stroke Color */
103
- --neo-status-warning-dark: #856000;
130
+ --neo-status-success-transparent: rgba(76, 167, 90, 0.5);
104
131
  /* Scopes: All Fills, Stroke Color */
105
- --neo-status-warning-default: #ffb800;
132
+ --neo-status-success-dark: #2c6c36;
106
133
  /* Scopes: All Fills, Stroke Color */
107
- --neo-status-warning-light: #fff8e5;
134
+ --neo-status-error-light: #ffedef;
135
+ /* Scopes: All Fills, Stroke Color */
136
+ --neo-status-error-default: #ed4a5d;
108
137
  /* Scopes: All Fills, Stroke Color */
109
- --neo-status-warning-transparent: #ffb800;
138
+ --neo-status-error-transparent: rgba(237, 74, 93, 0.5);
110
139
  /* Scopes: All Fills, Stroke Color */
111
140
  --neo-status-error-dark: #a92232;
112
141
  /* Scopes: All Fills, Stroke Color */
113
- --neo-status-error-light: #ffedef;
142
+ --neo-status-warning-light: #fff8e5;
114
143
  /* Scopes: All Fills, Stroke Color */
115
- --neo-status-error-default: #ed4a5d;
144
+ --neo-status-warning-default: #ffb800;
145
+ /* Scopes: All Fills, Stroke Color */
146
+ --neo-status-warning-transparent: rgba(255, 184, 0, 0.5);
116
147
  /* Scopes: All Fills, Stroke Color */
117
- --neo-status-error-transparent: #ed4a5d;
148
+ --neo-status-warning-dark: #856000;
118
149
  /* Scopes: All Fills, Stroke Color */
119
150
  --neo-status-info-dark: #1e2ec2;
120
151
  /* Scopes: All Fills, Stroke Color */
@@ -122,7 +153,7 @@
122
153
  /* Scopes: All Fills, Stroke Color */
123
154
  --neo-status-info-light: #f2f3ff;
124
155
  /* Scopes: All Fills, Stroke Color */
125
- --neo-status-info-transparent: #2f42ff;
156
+ --neo-status-info-transparent: rgba(47, 66, 255, 0.5);
126
157
  /* Scopes: All Fills, Stroke Color */
127
158
  --neo-status-neutral-dark: #374151;
128
159
  /* Scopes: All Fills, Stroke Color */
@@ -130,7 +161,7 @@
130
161
  /* Scopes: All Fills, Stroke Color */
131
162
  --neo-status-neutral-light: #f3f4f6;
132
163
  /* Scopes: All Fills, Stroke Color */
133
- --neo-status-neutral-transparent: #6b7280;
164
+ --neo-status-neutral-transparent: rgba(107, 114, 128, 0.5);
134
165
  --neo-status-avatar-initials-background1: #dce0ff;
135
166
  --neo-status-avatar-initials-background2: #cfffd7;
136
167
  --neo-status-avatar-initials-background3: #fbf1d2;
@@ -139,84 +170,67 @@
139
170
  --neo-status-avatar-initials-background6: #c9fff1;
140
171
  --neo-status-avatar-initials-background7: #ffebb7;
141
172
  /* Scopes: All Fills, Stroke Color */
142
- --neo-surfaces-black: #000000;
143
- /* Scopes: All Fills, Stroke Color */
144
- --neo-surfaces-white: #ffffff;
145
- /* Scopes: All Fills, Stroke Color */
146
- --neo-surfaces-page: #f4f4f4;
147
- /* Scopes: All Fills, Stroke Color */
148
- --neo-surfaces-card: #ffffff;
149
- /* Scopes: All Fills, Stroke Color */
150
- --neo-surfaces-card-header: #f3f4f6;
151
- /* Scopes: All Fills, Stroke Color */
152
- --neo-surfaces-tab-active: #f3f4f6;
153
- /* Scopes: All Fills, Stroke Color */
154
- --neo-surfaces-list-hover: #f9fafb;
155
- /* Scopes: All Fills, Stroke Color */
156
- --neo-surfaces-table-disabled-row: #f3f4f6;
173
+ --neo-buttons-primary-hover: #1e2ec2;
157
174
  /* Scopes: All Fills, Stroke Color */
158
- --neo-surfaces-table-background: #ffffff;
175
+ --neo-buttons-primary-disabled: #f3f4f6;
159
176
  /* Scopes: All Fills, Stroke Color */
160
- --neo-surfaces-tab-secondary-background: #e5e7eb;
177
+ --neo-buttons-primary-pressed: #131e7a;
161
178
  /* Scopes: All Fills, Stroke Color */
162
- --neo-surfaces-shadow-neutral: #1f2937;
179
+ --neo-buttons-primary-default: #2f42ff;
163
180
  /* Scopes: All Fills, Stroke Color */
164
- --neo-surfaces-scrim: #1f2937;
181
+ --neo-buttons-secondary-default-border: #b6bfff;
165
182
  /* Scopes: All Fills, Stroke Color */
166
- --neo-surfaces-shadow-primary: #2f42ff;
183
+ --neo-buttons-secondary-hover-background: #f2f3ff;
167
184
  /* Scopes: All Fills, Stroke Color */
168
- --neo-surfaces-tooltip: #4b5563;
185
+ --neo-buttons-secondary-pressed-background: #dce0ff;
169
186
  /* Scopes: All Fills, Stroke Color */
170
- --neo-surfaces-snackbar-dark-mode: #ffffff;
187
+ --neo-buttons-secondary-disabled-background: #f9fafb;
171
188
  /* Scopes: All Fills, Stroke Color */
172
- --neo-surfaces-snackbar-light-mode: #4b5563;
189
+ --neo-buttons-secondary-default-background: #ffffff;
173
190
  /* Scopes: All Fills, Stroke Color */
174
- --neo-surfaces-snackbar-brand: #131e7a;
175
- --neo-surfaces-highlight-background: #2637e6;
176
- --neo-surfaces-active-highlight: #b6bfff;
191
+ --neo-buttons-secondary-default: #1f2937;
177
192
  /* Scopes: All Fills, Stroke Color */
178
- --neo-typography-body: #1f2937;
193
+ --neo-buttons-tertiary-default: #2f42ff;
179
194
  /* Scopes: All Fills, Stroke Color */
180
- --neo-typography-button-disabled: #9ca3af;
195
+ --neo-buttons-tertiary-hover: #1e2ec2;
181
196
  /* Scopes: All Fills, Stroke Color */
182
- --neo-typography-input-placeholder: #9ca3af;
197
+ --neo-buttons-tertiary-pressed: #131e7a;
183
198
  /* Scopes: All Fills, Stroke Color */
184
- --neo-typography-input-default: #1f2937;
199
+ --neo-buttons-tertiary-disabled: #9ca3af;
185
200
  /* Scopes: All Fills, Stroke Color */
186
- --neo-typography-input-label: #1f2937;
201
+ --neo-buttons-destructive: #cb3446;
187
202
  /* Scopes: All Fills, Stroke Color */
188
- --neo-typography-input-helper: #4b5563;
203
+ --neo-buttons-navigation-active: #ffffff;
189
204
  /* Scopes: All Fills, Stroke Color */
190
- --neo-typography-code-primary: #1f2937;
205
+ --neo-buttons-navigation-default-border: #b6bfff;
191
206
  /* Scopes: All Fills, Stroke Color */
192
- --neo-typography-code-secondary: #9ca3af;
207
+ --neo-buttons-navigation-hover-background: #f3f4f6;
193
208
  /* Scopes: All Fills, Stroke Color */
194
- --neo-typography-tab-inactive: #4b5563;
209
+ --neo-buttons-navigation-pressed-background: #e5e7eb;
195
210
  /* Scopes: All Fills, Stroke Color */
196
- --neo-typography-tab-active: #2f42ff;
211
+ --neo-buttons-navigation-active-border: #2f42ff;
197
212
  /* Scopes: All Fills, Stroke Color */
198
- --neo-typography-link-primary: #2f42ff;
213
+ --neo-activity-recipe-run: #992fb9;
199
214
  /* Scopes: All Fills, Stroke Color */
200
- --neo-typography-link-disabled: #b6bfff;
215
+ --neo-activity-commit-job: #2f42ff;
201
216
  /* Scopes: All Fills, Stroke Color */
202
- --neo-typography-link-default: #1f2937;
217
+ --neo-activity-visualization: #27aa88;
203
218
  /* Scopes: All Fills, Stroke Color */
204
- --neo-typography-link-white: #ffffff;
219
+ --neo-data-green: #4ca75a;
205
220
  /* Scopes: All Fills, Stroke Color */
206
- --neo-typography-error: #cb3446;
221
+ --neo-data-yellow: #fdda04;
207
222
  /* Scopes: All Fills, Stroke Color */
208
- --neo-typography-success: #4ca75a;
223
+ --neo-data-orange1: #ffc008;
209
224
  /* Scopes: All Fills, Stroke Color */
210
- --neo-typography-warning: #1f2937;
225
+ --neo-data-orange2: #ff9800;
211
226
  /* Scopes: All Fills, Stroke Color */
212
- --neo-typography-tooltip: #ffffff;
227
+ --neo-data-orange3: #f9a91b;
213
228
  /* Scopes: All Fills, Stroke Color */
214
- --neo-typography-legal: #9ca3af;
229
+ --neo-data-red1: #ff5c24;
215
230
  /* Scopes: All Fills, Stroke Color */
216
- --neo-typography-body-secondary: #6b7280;
217
- --neo-typography-search-input: #ffffff;
231
+ --neo-data-red2: #ed4134;
218
232
  /* Scopes: All Fills, Stroke Color */
219
- --neo-typography-navigation-default: #1f2937;
233
+ --neo-data-red3: #cb3446;
220
234
  /* Scopes: All Fills, Stroke Color */
221
235
  --neo-tab-secondary-background: #e5e7eb;
222
236
  /* Scopes: All Fills, Stroke Color */