@sarasanalytics-com/design-system 0.0.57 → 0.0.59

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