@sarasanalytics-com/design-system 0.0.49 → 0.0.50

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/styles.css +388 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sarasanalytics-com/design-system",
3
- "version": "0.0.49",
3
+ "version": "0.0.50",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^17.2.0",
6
6
  "@angular/core": "^17.2.0"
package/styles/styles.css ADDED
@@ -0,0 +1,388 @@
1
+ /*
2
+ 1. Use a more-intuitive box-sizing model.
3
+ */
4
+ *,
5
+ *::before,
6
+ *::after {
7
+ box-sizing: border-box;
8
+ -webkit-font-smoothing: antialiased;
9
+ -moz-osx-font-smoothing: grayscale;
10
+ }
11
+
12
+ html,
13
+ body {
14
+ height: 100%;
15
+ }
16
+
17
+ body {
18
+ margin: 0;
19
+ font-family: Roboto, "Helvetica Neue", sans-serif;
20
+ }
21
+
22
+ :root {
23
+ --font: 'Roboto';
24
+ --font-roboto: 'Roboto';
25
+ --font-inter: 'Inter';
26
+ --font-poppins: "Poppins";
27
+ --font-helvetica: "Helvetica";
28
+ --small-2px: 2px;
29
+ --small-4px: 4px;
30
+ --small-6px: 6px;
31
+ --small-8px: 8px;
32
+ --small-12px: 12px;
33
+ --small-14px: 14px;
34
+ --small-16px: 16px;
35
+ --small-18px: 18px;
36
+ --medium-20px: 20px;
37
+ --medium-22px: 22px;
38
+ --medium-24px: 24px;
39
+ --medium-28px: 28px;
40
+ --medium-32px: 32px;
41
+ --medium-36px: 36px;
42
+ --large-40px: 40px;
43
+ --large-42px: 42px;
44
+ --large-44px: 44px;
45
+ --large-48px: 48px;
46
+ --large-56px: 56px;
47
+ --large-64px: 64px;
48
+ --form-email-icon-color: #33961F;
49
+ }
50
+
51
+ .insights-theme {
52
+ --primary-50: #EAFFFD;
53
+ --primary-100: #CAFFFB;
54
+ --primary-200: #9CFFFA;
55
+ --primary-300: #00DDEA;
56
+ --primary-400: #00AFC4;
57
+ --primary-500: #008597;
58
+ --primary-600: #0B6E7F;
59
+ --primary-700: #0E5B6B;
60
+ --primary-800: #023D4A;
61
+ --primary-900: #01303A;
62
+ --secondary-50: #FFF3EB;
63
+ --secondary-100: #FFD8C0;
64
+ --secondary-200: #FFC6A2;
65
+ --secondary-300: #FEAB78;
66
+ --secondary-400: #FE9B5D;
67
+ --secondary-500: #FE8235;
68
+ --secondary-600: #E77630;
69
+ --secondary-700: #B45C26;
70
+ --secondary-800: #8C481D;
71
+ --secondary-900: #6B3716;
72
+ --grey-50: #E9EAEB;
73
+ --grey-100: #BAC0C1;
74
+ --grey-200: #98A1A3;
75
+ --grey-300: #697779;
76
+ --grey-400: #4C5C5F;
77
+ --grey-500: #1F3437;
78
+ --grey-600: #1C2F32;
79
+ --grey-700: #162527;
80
+ --grey-800: #111C1E;
81
+ --grey-900: #0D1517;
82
+ --semantic-success-50: #EBF5E9;
83
+ --semantic-success-100: #C0DEBA;
84
+ --semantic-success-200: #A1CF98;
85
+ --semantic-success-300: #76B969;
86
+ --semantic-success-400: #5CAB4C;
87
+ --semantic-success-500: #33961F;
88
+ --semantic-success-600: #2E891C;
89
+ --semantic-success-700: #246B16;
90
+ --semantic-success-800: #1C5311;
91
+ --semantic-success-900: #153F0D;
92
+ --semantic-error-50: #F8E9E9;
93
+ --semantic-error-100: #EBBCB9;
94
+ --semantic-error-200: #E19C98;
95
+ --semantic-error-300: #D36E68;
96
+ --semantic-error-400: #CA524B;
97
+ --semantic-error-500: #BD271E;
98
+ --semantic-error-600: #AC231B;
99
+ --semantic-error-700: #861C15;
100
+ --semantic-error-800: #681511;
101
+ --semantic-error-900: #4F100D;
102
+ --semantic-purple-50: #F3EFFD;
103
+ --semantic-purple-100: #D8CCFA;
104
+ --semantic-purple-200: #C6B4F7;
105
+ --semantic-purple-300: #AB92F4;
106
+ --semantic-purple-400: #9B7DF1;
107
+ --semantic-purple-500: #815BED;
108
+ --semantic-purple-600: #7654D9;
109
+ --semantic-purple-700: #5C41A9;
110
+ --semantic-purple-800: #483383;
111
+ --semantic-purple-900: #372764;
112
+ --semantic-yellow-50: #FEF6E6;
113
+ --semantic-yellow-100: #FBE2B3;
114
+ --semantic-yellow-200: #F9D58E;
115
+ --semantic-yellow-300: #F6C15A;
116
+ --semantic-yellow-400: #F5B53A;
117
+ --text-highemphasis: #1B1F20;
118
+ --text-mediumemphasis: #697779;
119
+ --text-lowemphasis: #98A2A3;
120
+ --text-white: #FFFFFF;
121
+ --text-primary: #008597;
122
+ --text-success: #33961F;
123
+ --text-error: #BD271E;
124
+ --icon-white: #FFFFFF;
125
+ --semantic-yellow-500: #F2A209;
126
+ --semantic-yellow-600: #DC9408;
127
+ --semantic-yellow-700: #AC7406;
128
+ --semantic-yellow-800: #855A05;
129
+ --semantic-yellow-900: #664404;
130
+ --structural-white: #FFFFFF;
131
+ --icon-grey1: #757575;
132
+ --structural-primarytint: #F5F9FA;
133
+ --structural-neutral1: #F9F9F9;
134
+ --structural-neutral2: #FFFAFA;
135
+ --structural-neutral3: #FAFAFA;
136
+ --logo-color-primary: #008597;
137
+ --logo-color-secondary: #9CFFFA;
138
+ }
139
+
140
+ .saras-theme {
141
+ --primary-50: #E8F1FC;
142
+ --primary-100: #B8D4F7;
143
+ --primary-200: #96C0F3;
144
+ --primary-300: #66A2ED;
145
+ --primary-400: #4992E9;
146
+ --primary-500: #1B77E4;
147
+ --primary-600: #196CCF;
148
+ --primary-700: #1354A2;
149
+ --primary-800: #0F417D;
150
+ --primary-900: #0B3160;
151
+ --secondary-50: #FFF3EB;
152
+ --secondary-100: #FFD8C0;
153
+ --secondary-200: #FFC6A2;
154
+ --secondary-300: #FEAB78;
155
+ --secondary-400: #FE9B5D;
156
+ --secondary-500: #FE8235;
157
+ --secondary-600: #E77630;
158
+ --secondary-700: #B45C26;
159
+ --secondary-800: #8C481D;
160
+ --secondary-900: #6B3716;
161
+ --grey-50: #E9E9EB;
162
+ --grey-100: #BABDC1;
163
+ --grey-200: #989CA3;
164
+ --grey-300: #697079;
165
+ --grey-400: #4C545F;
166
+ --grey-500: #1F2937;
167
+ --grey-600: #1C2532;
168
+ --grey-700: #161D27;
169
+ --grey-800: #11161E;
170
+ --grey-900: #0D1117;
171
+ --semantic-success-50: #EBF5E9;
172
+ --semantic-success-100: #C0DEBA;
173
+ --semantic-success-200: #A1CF98;
174
+ --semantic-success-300: #76B969;
175
+ --semantic-success-400: #5CAB4C;
176
+ --semantic-success-500: #33961F;
177
+ --semantic-success-600: #2E891C;
178
+ --semantic-success-700: #246B16;
179
+ --semantic-success-800: #1C5311;
180
+ --semantic-success-900: #153F0D;
181
+ --semantic-error-50: #F8E9E9;
182
+ --semantic-error-100: #EBBCB9;
183
+ --semantic-error-200: #E19C98;
184
+ --semantic-error-300: #D36E68;
185
+ --semantic-error-400: #CA524B;
186
+ --semantic-error-500: #BD271E;
187
+ --semantic-error-600: #AC231B;
188
+ --semantic-error-700: #861C15;
189
+ --semantic-error-800: #681511;
190
+ --semantic-error-900: #4F100D;
191
+ --semantic-purple-50: #F3EFFD;
192
+ --semantic-purple-100: #D8CCFA;
193
+ --semantic-purple-200: #C6B4F7;
194
+ --semantic-purple-300: #AB92F4;
195
+ --semantic-purple-400: #9B7DF1;
196
+ --semantic-purple-500: #815BED;
197
+ --semantic-purple-600: #7654D9;
198
+ --semantic-purple-700: #5C41A9;
199
+ --semantic-purple-800: #483383;
200
+ --semantic-purple-900: #372764;
201
+ --semantic-yellow-50: #FEF6E6;
202
+ --semantic-yellow-100: #FBE2B3;
203
+ --semantic-yellow-200: #F9D58E;
204
+ --semantic-yellow-300: #F6C15A;
205
+ --semantic-yellow-400: #F5B53A;
206
+ --text-highemphasis: #1B1D20;
207
+ --text-mediumemphasis: #697079;
208
+ --text-lowemphasis: #989CA3;
209
+ --text-white: #FFFFFF;
210
+ --text-primary: #1B77E4;
211
+ --text-success: #33961F;
212
+ --text-error: #BD271E;
213
+ --icon-white: #FFFFFF;
214
+ --semantic-yellow-500: #F2A209;
215
+ --semantic-yellow-600: #DC9408;
216
+ --semantic-yellow-700: #AC7406;
217
+ --semantic-yellow-800: #855A05;
218
+ --semantic-yellow-900: #664404;
219
+ --structural-white: #FFFFFF;
220
+ --icon-grey1: #757575;
221
+ --structural-primarytint: #FAFCFF;
222
+ --structural-neutral1: #F9F9F9;
223
+ --structural-neutral2: #FFFAFA;
224
+ --structural-neutral3: #FAFAFA;
225
+ --logo-color-primary: #1B77E4;
226
+ --logo-color-secondary: #96C0F3;
227
+ }
228
+
229
+ .purple-theme {
230
+ --primary-50: #F4EBFF;
231
+ --primary-100: #E9D7FE;
232
+ --primary-200: #D6BBFB;
233
+ --primary-300: #B692F6;
234
+ --primary-400: #9E77ED;
235
+ --primary-500: #7F56D9;
236
+ --primary-600: #53389E;
237
+ --primary-700: #53389E;
238
+ --primary-800: #42307D;
239
+ --primary-900: #2C1C5F;
240
+ --secondary-50: #FFF3EB;
241
+ --secondary-100: #FFD8C0;
242
+ --secondary-200: #FFC6A2;
243
+ --secondary-300: #FEAB78;
244
+ --secondary-400: #FE9B5D;
245
+ --secondary-500: #FE8235;
246
+ --secondary-600: #E77630;
247
+ --secondary-700: #B45C26;
248
+ --secondary-800: #8C481D;
249
+ --secondary-900: #6B3716;
250
+ --grey-50: #F2F4F7;
251
+ --grey-100: #EAECF0;
252
+ --grey-200: #D0D5DD;
253
+ --grey-300: #98A2B3;
254
+ --grey-400: #475467;
255
+ --grey-500: #344054;
256
+ --grey-600: #1D2939;
257
+ --grey-700: #1D2939;
258
+ --grey-800: #101828;
259
+ --grey-900: #0C111D;
260
+ --semantic-success-50: #EBF5E9;
261
+ --semantic-success-100: #C0DEBA;
262
+ --semantic-success-200: #A1CF98;
263
+ --semantic-success-300: #76B969;
264
+ --semantic-success-400: #5CAB4C;
265
+ --semantic-success-500: #33961F;
266
+ --semantic-success-600: #2E891C;
267
+ --semantic-success-700: #246B16;
268
+ --semantic-success-800: #1C5311;
269
+ --semantic-success-900: #153F0D;
270
+ --semantic-error-50: #F8E9E9;
271
+ --semantic-error-100: #EBBCB9;
272
+ --semantic-error-200: #E19C98;
273
+ --semantic-error-300: #D36E68;
274
+ --semantic-error-400: #CA524B;
275
+ --semantic-error-500: #BD271E;
276
+ --semantic-error-600: #AC231B;
277
+ --semantic-error-700: #861C15;
278
+ --semantic-error-800: #681511;
279
+ --semantic-error-900: #4F100D;
280
+ --semantic-purple-50: #F3EFFD;
281
+ --semantic-purple-100: #D8CCFA;
282
+ --semantic-purple-200: #C6B4F7;
283
+ --semantic-purple-300: #AB92F4;
284
+ --semantic-purple-400: #9B7DF1;
285
+ --semantic-purple-500: #815BED;
286
+ --semantic-purple-600: #7654D9;
287
+ --semantic-purple-700: #5C41A9;
288
+ --semantic-purple-800: #483383;
289
+ --semantic-purple-900: #372764;
290
+ --semantic-yellow-50: #FEF6E6;
291
+ --semantic-yellow-100: #FBE2B3;
292
+ --semantic-yellow-200: #F9D58E;
293
+ --semantic-yellow-300: #F6C15A;
294
+ --semantic-yellow-400: #F5B53A;
295
+ --text-highemphasis: #1C1B20;
296
+ --text-mediumemphasis: #6D6979;
297
+ --text-lowemphasis: #9A98A3;
298
+ --text-white: #FFFFFF;
299
+ --text-primary: #815BED;
300
+ --text-success: #33961F;
301
+ --text-error: #BD271E;
302
+ --icon-white: #FFFFFF;
303
+ --semantic-yellow-500: #F2A209;
304
+ --semantic-yellow-600: #DC9408;
305
+ --semantic-yellow-700: #AC7406;
306
+ --semantic-yellow-800: #855A05;
307
+ --semantic-yellow-900: #664404;
308
+ --structural-white: #FFFFFF;
309
+ --icon-grey1: #757575;
310
+ --structural-primarytint: #FBFAFF;
311
+ --structural-neutral1: #F9F9F9;
312
+ --structural-neutral2: #FFFAFA;
313
+ --structural-neutral3: #FAFAFA;
314
+ --logo-color-primary: #7F56D9;
315
+ --logo-color-secondary: #D6BBFB;
316
+ }
317
+
318
+ .ag-header {
319
+ font-family: var(--font);
320
+ font-size: 14px;
321
+ font-weight: 400;
322
+ height: 20px;
323
+ line-height: 20px;
324
+ }
325
+
326
+ .ag-header-cell lib-grid-cell {
327
+ width: 100%;
328
+ }
329
+
330
+ .ag-header-cell-label {
331
+ font-family: var(--font);
332
+ font-size: 14px;
333
+ font-weight: 400;
334
+ line-height: 20px;
335
+ margin-left: 10px;
336
+ }
337
+
338
+ .checkbox-card-group {
339
+ display: grid;
340
+ grid-template-columns: repeat(auto-fill, 38.875rem);
341
+ gap: 1.75rem 2rem;
342
+ max-width: -webkit-fill-available;
343
+ margin-bottom: 1.5rem;
344
+ }
345
+
346
+ .form-field-helpText,
347
+ .form-field-description {
348
+ color: var(--text-mediumemphasis, #6D6979);
349
+ font-family: var(--font);
350
+ font-size: var(--small-14px);
351
+ font-style: normal;
352
+ font-weight: 400;
353
+ line-height: var(--medium-20px);
354
+ letter-spacing: 0.25px;
355
+ }
356
+
357
+ .form-field-title {
358
+ color: var(--text-highemphasis, #1C1B20);
359
+ font-family: var(--font);
360
+ font-size: var(--medium-20px);
361
+ font-style: normal;
362
+ font-weight: 500;
363
+ line-height: var(--medium-28px);
364
+ }
365
+
366
+ .title-container {
367
+ display: flex;
368
+ flex-direction: column;
369
+ gap: var(--small-8px);
370
+ }
371
+
372
+ .formly-field-container {
373
+ display: flex;
374
+ flex-direction: column;
375
+ gap: var(--medium-24px);
376
+ }
377
+
378
+ .accordion-group-container {
379
+ display: flex;
380
+ flex-direction: column;
381
+ gap: var(--small-16px);
382
+ }
383
+
384
+ .accordions-group-container {
385
+ display: flex;
386
+ flex-direction: column;
387
+ gap: var(--small-16px);
388
+ }