@cmgfi/clear-ds 1.0.0 → 1.0.1
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/tokens/tokens.css +451 -0
- package/package.json +2 -1
|
@@ -0,0 +1,451 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Clear Design System — Tokens
|
|
3
|
+
Extracted from ClearDsMigration design file
|
|
4
|
+
========================================================================== */
|
|
5
|
+
|
|
6
|
+
/* --- Base & Color Tokens --- */
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* ═══════════════════════════════════════════════════════
|
|
10
|
+
GRID SYSTEM — Mobile 4-col / Tablet 6-col / Desktop 12-col
|
|
11
|
+
═══════════════════════════════════════════════════════ */
|
|
12
|
+
--grid-columns-mobile: 4;
|
|
13
|
+
--grid-gutter-mobile: 16px;
|
|
14
|
+
--grid-margin-mobile: 24px;
|
|
15
|
+
--grid-container-mobile: 576px;
|
|
16
|
+
|
|
17
|
+
--grid-columns-tablet: 6;
|
|
18
|
+
--grid-gutter-tablet: 16px;
|
|
19
|
+
--grid-margin-tablet: 48px;
|
|
20
|
+
--grid-container-tablet: 768px;
|
|
21
|
+
|
|
22
|
+
--grid-columns-desktop: 12;
|
|
23
|
+
--grid-gutter-desktop: 18px;
|
|
24
|
+
--grid-margin-desktop: 128px;
|
|
25
|
+
--grid-container-desktop: 1200px;
|
|
26
|
+
|
|
27
|
+
/* Breakpoint references */
|
|
28
|
+
--breakpoint-sm: 576px;
|
|
29
|
+
--breakpoint-md: 768px;
|
|
30
|
+
--breakpoint-lg: 1200px;
|
|
31
|
+
|
|
32
|
+
--font-family: 'Open Sans', sans-serif;
|
|
33
|
+
--color-text: #202020;
|
|
34
|
+
--color-text-secondary: #70777d;
|
|
35
|
+
|
|
36
|
+
/* --- Teal ---
|
|
37
|
+
Core brand color for key interactive elements */
|
|
38
|
+
--teal-50: #EAF6F7;
|
|
39
|
+
--teal-100: #D1EDEF;
|
|
40
|
+
--teal-200: #ADDDE0;
|
|
41
|
+
--teal-300: #8BD2D7;
|
|
42
|
+
--teal-400: #6BC2C8;
|
|
43
|
+
--teal-500: #32A4AC;
|
|
44
|
+
--teal-600: #138890;
|
|
45
|
+
--teal-700: #047880;
|
|
46
|
+
--teal-800: #186368;
|
|
47
|
+
--teal-900: #18474A;
|
|
48
|
+
|
|
49
|
+
/* --- Surface ---
|
|
50
|
+
Backgrounds and containers for visual structure and hierarchy */
|
|
51
|
+
--surface-50: #FFFFFF;
|
|
52
|
+
--surface-100: #FCFCFC;
|
|
53
|
+
--surface-200: #F7F7F7;
|
|
54
|
+
--surface-300: #F4F4F5;
|
|
55
|
+
--surface-400: #EDEDED;
|
|
56
|
+
--surface-500: #E4E4E4;
|
|
57
|
+
--surface-600: #CFCFCF;
|
|
58
|
+
--surface-700: #A2A2A2;
|
|
59
|
+
--surface-800: #7D7D7D;
|
|
60
|
+
--surface-900: #606060;
|
|
61
|
+
|
|
62
|
+
/* --- Navy ---
|
|
63
|
+
Text, borders, and idle states */
|
|
64
|
+
--navy-50: #EAEBEC;
|
|
65
|
+
--navy-100: #CBCED1;
|
|
66
|
+
--navy-200: #9DA2A6;
|
|
67
|
+
--navy-300: #70777D;
|
|
68
|
+
--navy-400: #555D64;
|
|
69
|
+
--navy-500: #2A343D;
|
|
70
|
+
--navy-600: #262F38;
|
|
71
|
+
--navy-700: #1E252B;
|
|
72
|
+
--navy-800: #171D22;
|
|
73
|
+
--navy-900: #12161A;
|
|
74
|
+
|
|
75
|
+
/* --- Yellow ---
|
|
76
|
+
Warning: potential issues, caution, user intervention */
|
|
77
|
+
--yellow-50: #FFFCE7;
|
|
78
|
+
--yellow-100: #FEF5B3;
|
|
79
|
+
--yellow-200: #FDF08F;
|
|
80
|
+
--yellow-300: #FCE95C;
|
|
81
|
+
--yellow-400: #FCE53C;
|
|
82
|
+
--yellow-500: #FBDE0B;
|
|
83
|
+
--yellow-600: #AB9400;
|
|
84
|
+
--yellow-700: #867704;
|
|
85
|
+
--yellow-800: #695D05;
|
|
86
|
+
--yellow-900: #514908;
|
|
87
|
+
|
|
88
|
+
/* --- Blue ---
|
|
89
|
+
Information: neutral feedback and informational states */
|
|
90
|
+
--blue-50: #F5F9FF;
|
|
91
|
+
--blue-100: #D0E1FD;
|
|
92
|
+
--blue-200: #ABC9FB;
|
|
93
|
+
--blue-300: #85B2F9;
|
|
94
|
+
--blue-400: #609AF8;
|
|
95
|
+
--blue-500: #3B82F6;
|
|
96
|
+
--blue-600: #326FD1;
|
|
97
|
+
--blue-700: #295BAC;
|
|
98
|
+
--blue-800: #204887;
|
|
99
|
+
--blue-900: #183462;
|
|
100
|
+
|
|
101
|
+
/* --- Green ---
|
|
102
|
+
Success: positive actions and task completion */
|
|
103
|
+
--green-50: #EDF8EA;
|
|
104
|
+
--green-100: #C8E8C3;
|
|
105
|
+
--green-200: #9BD491;
|
|
106
|
+
--green-300: #6FB864;
|
|
107
|
+
--green-400: #4B9C3E;
|
|
108
|
+
--green-500: #1E830E;
|
|
109
|
+
--green-600: #1A760B;
|
|
110
|
+
--green-700: #155D0A;
|
|
111
|
+
--green-800: #174510;
|
|
112
|
+
--green-900: #11340B;
|
|
113
|
+
|
|
114
|
+
/* --- Red ---
|
|
115
|
+
Error/Danger: issues, required intervention, caution */
|
|
116
|
+
--red-50: #FFF5F5;
|
|
117
|
+
--red-100: #FFE0DF;
|
|
118
|
+
--red-200: #FFB8B3;
|
|
119
|
+
--red-300: #FF867F;
|
|
120
|
+
--red-400: #FF5A4E;
|
|
121
|
+
--red-500: #EB1000;
|
|
122
|
+
--red-600: #D60F00;
|
|
123
|
+
--red-700: #C00B14;
|
|
124
|
+
--red-800: #990D03;
|
|
125
|
+
--red-900: #630700;
|
|
126
|
+
|
|
127
|
+
/* ==========================================================================
|
|
128
|
+
Spacing Tokens
|
|
129
|
+
Root font-size: 12px (1rem = 12px)
|
|
130
|
+
========================================================================== */
|
|
131
|
+
|
|
132
|
+
/* --- Numeric scale (raw rem values) --- */
|
|
133
|
+
--spacing-02: 0.167rem; /* 2px */
|
|
134
|
+
--spacing-04: 0.333rem; /* 4px */
|
|
135
|
+
--spacing-08: 0.667rem; /* 8px */
|
|
136
|
+
--spacing-12: 1rem; /* 12px */
|
|
137
|
+
--spacing-16: 1.333rem; /* 16px */
|
|
138
|
+
--spacing-20: 1.667rem; /* 20px */
|
|
139
|
+
--spacing-24: 2rem; /* 24px */
|
|
140
|
+
--spacing-28: 2.333rem; /* 28px */
|
|
141
|
+
--spacing-32: 2.667rem; /* 32px */
|
|
142
|
+
--spacing-36: 3rem; /* 36px */
|
|
143
|
+
--spacing-40: 3.333rem; /* 40px */
|
|
144
|
+
|
|
145
|
+
/* --- Named aliases (t-shirt sizes) --- */
|
|
146
|
+
--spacing-xxxs: var(--spacing-02); /* 2px — not in grid table but present on spacer component */
|
|
147
|
+
--spacing-base: var(--spacing-04); /* 4px */
|
|
148
|
+
--spacing-xxs: var(--spacing-08); /* 8px */
|
|
149
|
+
--spacing-xs: var(--spacing-12); /* 12px */
|
|
150
|
+
--spacing-sm: var(--spacing-16); /* 16px */
|
|
151
|
+
--spacing-md: var(--spacing-24); /* 24px */
|
|
152
|
+
--spacing-lg: var(--spacing-32); /* 32px */
|
|
153
|
+
--spacing-xl: 3.667rem; /* 44px */
|
|
154
|
+
--spacing-xxl: 4.667rem; /* 56px */
|
|
155
|
+
|
|
156
|
+
/* ==========================================================================
|
|
157
|
+
Elevation Tokens
|
|
158
|
+
Drop shadows to convey depth and visual hierarchy
|
|
159
|
+
========================================================================== */
|
|
160
|
+
|
|
161
|
+
--shadow-depth-1: 0px 3px 8.75px 2px #EAEBEC;
|
|
162
|
+
--shadow-depth-2: 0px 3px 8.75px 2px #EAEBEC;
|
|
163
|
+
--shadow-depth-3: 0px 6px 10.5px 2px #EAEBEC;
|
|
164
|
+
--shadow-depth-4: 0px 8px 14px 2px #EAEBEC;
|
|
165
|
+
|
|
166
|
+
/* ==========================================================================
|
|
167
|
+
Scrim Token
|
|
168
|
+
Darkened overlay behind modals and expanded navigation menus
|
|
169
|
+
========================================================================== */
|
|
170
|
+
|
|
171
|
+
--scrim-color: #2A343D;
|
|
172
|
+
--scrim-opacity: 0.25;
|
|
173
|
+
--scrim: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity) * 100%), transparent);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* --- Headings --- */
|
|
177
|
+
|
|
178
|
+
.text-h1 {
|
|
179
|
+
font-family: var(--font-family);
|
|
180
|
+
font-size: 48px;
|
|
181
|
+
font-weight: 700;
|
|
182
|
+
color: var(--color-text);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.text-h2 {
|
|
186
|
+
font-family: var(--font-family);
|
|
187
|
+
font-size: 38px;
|
|
188
|
+
font-weight: 700;
|
|
189
|
+
color: var(--color-text);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.text-h3 {
|
|
193
|
+
font-family: var(--font-family);
|
|
194
|
+
font-size: 32px;
|
|
195
|
+
font-weight: 700;
|
|
196
|
+
color: var(--color-text);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.text-h4 {
|
|
200
|
+
font-family: var(--font-family);
|
|
201
|
+
font-size: 20px;
|
|
202
|
+
font-weight: 700;
|
|
203
|
+
color: var(--color-text);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.text-h5 {
|
|
207
|
+
font-family: var(--font-family);
|
|
208
|
+
font-size: 12px;
|
|
209
|
+
font-weight: 700;
|
|
210
|
+
color: var(--color-text);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.text-h6 {
|
|
214
|
+
font-family: var(--font-family);
|
|
215
|
+
font-size: 10px;
|
|
216
|
+
font-weight: 700;
|
|
217
|
+
color: var(--color-text);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* --- XL (18px) --- */
|
|
221
|
+
|
|
222
|
+
.text-xl-bold {
|
|
223
|
+
font-family: var(--font-family);
|
|
224
|
+
font-size: 18px;
|
|
225
|
+
font-weight: 700;
|
|
226
|
+
color: var(--color-text);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.text-xl-semibold {
|
|
230
|
+
font-family: var(--font-family);
|
|
231
|
+
font-size: 18px;
|
|
232
|
+
font-weight: 600;
|
|
233
|
+
color: var(--color-text);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.text-xl-regular {
|
|
237
|
+
font-family: var(--font-family);
|
|
238
|
+
font-size: 18px;
|
|
239
|
+
font-weight: 400;
|
|
240
|
+
color: var(--color-text);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* --- Large (14px) --- */
|
|
244
|
+
|
|
245
|
+
.text-large-bold {
|
|
246
|
+
font-family: var(--font-family);
|
|
247
|
+
font-size: 14px;
|
|
248
|
+
font-weight: 700;
|
|
249
|
+
color: var(--color-text);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.text-large-semibold {
|
|
253
|
+
font-family: var(--font-family);
|
|
254
|
+
font-size: 14px;
|
|
255
|
+
font-weight: 600;
|
|
256
|
+
color: var(--color-text);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.text-large-regular {
|
|
260
|
+
font-family: var(--font-family);
|
|
261
|
+
font-size: 14px;
|
|
262
|
+
font-weight: 400;
|
|
263
|
+
color: var(--color-text);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* --- Normal (12px) --- */
|
|
267
|
+
|
|
268
|
+
.text-normal-bold {
|
|
269
|
+
font-family: var(--font-family);
|
|
270
|
+
font-size: 12px;
|
|
271
|
+
font-weight: 700;
|
|
272
|
+
color: var(--color-text);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.text-normal-semibold {
|
|
276
|
+
font-family: var(--font-family);
|
|
277
|
+
font-size: 12px;
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
color: var(--color-text);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.text-normal-regular {
|
|
283
|
+
font-family: var(--font-family);
|
|
284
|
+
font-size: 12px;
|
|
285
|
+
font-weight: 400;
|
|
286
|
+
color: var(--color-text);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* --- Small (10px) --- */
|
|
290
|
+
|
|
291
|
+
.text-small-bold {
|
|
292
|
+
font-family: var(--font-family);
|
|
293
|
+
font-size: 10px;
|
|
294
|
+
font-weight: 700;
|
|
295
|
+
color: var(--color-text);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.text-small-semibold {
|
|
299
|
+
font-family: var(--font-family);
|
|
300
|
+
font-size: 10px;
|
|
301
|
+
font-weight: 600;
|
|
302
|
+
color: var(--color-text);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.text-small-regular {
|
|
306
|
+
font-family: var(--font-family);
|
|
307
|
+
font-size: 10px;
|
|
308
|
+
font-weight: 400;
|
|
309
|
+
color: var(--color-text);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* ==========================================================================
|
|
313
|
+
Icon Tokens — PrimeIcons (PrimeNG icon font)
|
|
314
|
+
Usage: <i class="pi pi-{icon-name}"></i>
|
|
315
|
+
Requires: PrimeIcons CSS from the primeicons npm package
|
|
316
|
+
@import 'primeicons/primeicons.css';
|
|
317
|
+
Default size: 14px (matches design). Override with --icon-size-* tokens.
|
|
318
|
+
========================================================================== */
|
|
319
|
+
|
|
320
|
+
:root {
|
|
321
|
+
--icon-size-sm: 12px;
|
|
322
|
+
--icon-size-md: 14px; /* default in design */
|
|
323
|
+
--icon-size-lg: 18px;
|
|
324
|
+
--icon-size-xl: 24px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
/* --- Arrows --- */
|
|
328
|
+
/* pi-angle-double-down, pi-angle-double-left, pi-angle-double-right,
|
|
329
|
+
pi-angle-double-up, pi-angle-down, pi-angle-left, pi-angle-right,
|
|
330
|
+
pi-angle-up, pi-arrow-circle-down, pi-arrow-circle-left,
|
|
331
|
+
pi-arrow-circle-right, pi-arrow-circle-up, pi-arrow-down,
|
|
332
|
+
pi-arrow-down-left, pi-arrow-down-right, pi-arrow-left,
|
|
333
|
+
pi-arrow-right, pi-arrow-right-arrow-left, pi-arrow-up,
|
|
334
|
+
pi-arrow-up-left, pi-arrow-up-right, pi-arrows-alt, pi-arrows-h,
|
|
335
|
+
pi-arrows-v, pi-chevron-circle-down, pi-chevron-circle-left,
|
|
336
|
+
pi-chevron-circle-right, pi-chevron-circle-up, pi-chevron-down,
|
|
337
|
+
pi-chevron-left, pi-chevron-right, pi-chevron-up, pi-refresh,
|
|
338
|
+
pi-replay, pi-reply, pi-sync, pi-undo */
|
|
339
|
+
|
|
340
|
+
/* --- Brands --- */
|
|
341
|
+
/* pi-amazon, pi-android, pi-apple, pi-bitcoin, pi-discord,
|
|
342
|
+
pi-facebook, pi-github, pi-google, pi-instagram, pi-linkedin,
|
|
343
|
+
pi-microsoft, pi-paypal, pi-prime, pi-reddit, pi-slack,
|
|
344
|
+
pi-telegram, pi-tiktok, pi-twitch, pi-twitter, pi-whatsapp,
|
|
345
|
+
pi-youtube */
|
|
346
|
+
|
|
347
|
+
/* --- Communication --- */
|
|
348
|
+
/* pi-comment, pi-comments, pi-inbox, pi-language, pi-megaphone,
|
|
349
|
+
pi-microphone, pi-phone, pi-send */
|
|
350
|
+
|
|
351
|
+
/* --- Design --- */
|
|
352
|
+
/* pi-palette, pi-pencil */
|
|
353
|
+
|
|
354
|
+
/* --- Devices --- */
|
|
355
|
+
/* pi-desktop, pi-mobile, pi-tablet */
|
|
356
|
+
|
|
357
|
+
/* --- Documents --- */
|
|
358
|
+
/* pi-book, pi-clipboard, pi-copy, pi-envelope, pi-file,
|
|
359
|
+
pi-file-arrow-up, pi-file-check, pi-file-edit, pi-file-excel,
|
|
360
|
+
pi-file-export, pi-file-import, pi-file-o, pi-file-pdf,
|
|
361
|
+
pi-file-plus, pi-file-word, pi-folder, pi-folder-open,
|
|
362
|
+
pi-folder-plus */
|
|
363
|
+
|
|
364
|
+
/* --- E-Commerce --- */
|
|
365
|
+
/* pi-box, pi-cart-arrow-down, pi-cart-minus, pi-cart-plus,
|
|
366
|
+
pi-credit-card, pi-money-bill, pi-receipt, pi-shop,
|
|
367
|
+
pi-shopping-bag, pi-shopping-cart, pi-tag, pi-tags, pi-ticket,
|
|
368
|
+
pi-wallet */
|
|
369
|
+
|
|
370
|
+
/* --- Graphs --- */
|
|
371
|
+
/* pi-chart-bar, pi-chart-line, pi-chart-pie, pi-chart-scatter */
|
|
372
|
+
|
|
373
|
+
/* --- Map --- */
|
|
374
|
+
/* pi-car, pi-compass, pi-directions, pi-directions-alt, pi-map,
|
|
375
|
+
pi-map-marker, pi-truck */
|
|
376
|
+
|
|
377
|
+
/* --- Math --- */
|
|
378
|
+
/* pi-dollar, pi-euro, pi-minus, pi-minus-circle, pi-percentage,
|
|
379
|
+
pi-plus, pi-plus-circle, pi-pound, pi-times */
|
|
380
|
+
|
|
381
|
+
/* --- Media --- */
|
|
382
|
+
/* pi-backward, pi-camera, pi-caret-down, pi-caret-left,
|
|
383
|
+
pi-caret-right, pi-caret-up, pi-eject, pi-fast-backward,
|
|
384
|
+
pi-fast-forward, pi-forward, pi-image, pi-images, pi-pause,
|
|
385
|
+
pi-play, pi-sliders-h, pi-sliders-v, pi-step-backward,
|
|
386
|
+
pi-step-backward-alt, pi-step-forward, pi-step-forward-alt,
|
|
387
|
+
pi-stop, pi-stop-circle, pi-video, pi-volume-down,
|
|
388
|
+
pi-volume-off, pi-volume-up */
|
|
389
|
+
|
|
390
|
+
/* --- Editor --- */
|
|
391
|
+
/* pi-align-center, pi-align-justify, pi-align-left, pi-align-right,
|
|
392
|
+
pi-bars, pi-eraser, pi-list */
|
|
393
|
+
|
|
394
|
+
/* --- Sort --- */
|
|
395
|
+
/* pi-sort, pi-sort-alpha-down, pi-sort-alpha-down-alt,
|
|
396
|
+
pi-sort-alpha-up, pi-sort-alpha-up-alt, pi-sort-alt,
|
|
397
|
+
pi-sort-alt-slash, pi-sort-amount-down, pi-sort-amount-down-alt,
|
|
398
|
+
pi-sort-amount-up, pi-sort-amount-up-alt, pi-sort-down,
|
|
399
|
+
pi-sort-down-fill, pi-sort-numeric-down, pi-sort-numeric-down-alt,
|
|
400
|
+
pi-sort-numeric-up, pi-sort-numeric-up-alt, pi-sort-up,
|
|
401
|
+
pi-sort-up-fill */
|
|
402
|
+
|
|
403
|
+
/* --- Misc --- */
|
|
404
|
+
/* pi-ban, pi-bell, pi-bell-slash, pi-bolt, pi-briefcase,
|
|
405
|
+
pi-building, pi-building-columns, pi-calculator, pi-check,
|
|
406
|
+
pi-check-circle, pi-check-square, pi-code, pi-database,
|
|
407
|
+
pi-ellipsis-h, pi-ellipsis-v, pi-gift, pi-lock, pi-lock-open,
|
|
408
|
+
pi-paperclip, pi-qrcode, pi-server, pi-shield, pi-sitemap,
|
|
409
|
+
pi-unlock, pi-verified */
|
|
410
|
+
|
|
411
|
+
/* --- Symbols --- */
|
|
412
|
+
/* pi-asterisk, pi-at, pi-bullseye, pi-equals, pi-exclamation-triangle,
|
|
413
|
+
pi-exclamation-circle, pi-flag, pi-hashtag, pi-info,
|
|
414
|
+
pi-info-circle, pi-question, pi-question-circle */
|
|
415
|
+
|
|
416
|
+
/* --- System --- */
|
|
417
|
+
/* pi-clone, pi-cloud, pi-cloud-download, pi-cloud-upload, pi-cog,
|
|
418
|
+
pi-delete-left, pi-download, pi-external-link, pi-eye,
|
|
419
|
+
pi-eye-slash, pi-filter-slash, pi-globe, pi-history, pi-home,
|
|
420
|
+
pi-key, pi-link, pi-moon, pi-power-off, pi-print, pi-save,
|
|
421
|
+
pi-search, pi-search-minus, pi-search-plus, pi-share-alt,
|
|
422
|
+
pi-sign-in, pi-sign-out, pi-spinner, pi-spinner-dotted, pi-sun,
|
|
423
|
+
pi-table, pi-th-large, pi-times-circle, pi-trash, pi-upload,
|
|
424
|
+
pi-wifi, pi-window-maximize, pi-window-minimize, pi-wrench */
|
|
425
|
+
|
|
426
|
+
/* --- Users --- */
|
|
427
|
+
/* pi-id-card, pi-user, pi-user-edit, pi-user-minus, pi-user-plus,
|
|
428
|
+
pi-users */
|
|
429
|
+
|
|
430
|
+
/* --- Time --- */
|
|
431
|
+
/* pi-calendar, pi-calendar-clock, pi-calendar-minus,
|
|
432
|
+
pi-calendar-plus, pi-calendar-times, pi-clock, pi-hourglass,
|
|
433
|
+
pi-stopwatch */
|
|
434
|
+
|
|
435
|
+
/* --- With Fills (filled variants) --- */
|
|
436
|
+
/* pi-bookmark, pi-bookmark-fill, pi-circle, pi-circle-fill,
|
|
437
|
+
pi-filter, pi-filter-fill, pi-flag-fill, pi-heart, pi-heart-fill,
|
|
438
|
+
pi-star, pi-star-fill, pi-star-half, pi-star-half-fill,
|
|
439
|
+
pi-thumbs-down, pi-thumbs-down-fill, pi-thumbs-up,
|
|
440
|
+
pi-thumbs-up-fill */
|
|
441
|
+
|
|
442
|
+
/* --- New / Extended Icons --- */
|
|
443
|
+
/* pi-address-book, pi-arrow-down-left-and-arrow-up-right-to-center,
|
|
444
|
+
pi-arrow-up-right-and-arrow-down-left-from-center, pi-barcode,
|
|
445
|
+
pi-crown, pi-ethereum, pi-expand, pi-face-smile, pi-gauge,
|
|
446
|
+
pi-graduation-cap, pi-hammer, pi-headphones, pi-indian-rupee,
|
|
447
|
+
pi-lightbulb, pi-list-check, pi-mars, pi-microchip,
|
|
448
|
+
pi-microchip-ai, pi-objects-column, pi-pause-circle,
|
|
449
|
+
pi-pen-to-square, pi-pinterest, pi-play-circle, pi-sparkles,
|
|
450
|
+
pi-thumbtack, pi-trophy, pi-turkish-lira, pi-venus,
|
|
451
|
+
pi-warehouse, pi-wave-pulse */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cmgfi/clear-ds",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "CMG Financial — Clear Design System React component library",
|
|
5
5
|
"keywords": ["cmg", "clear-ds", "design-system", "react", "components"],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
],
|
|
30
30
|
"scripts": {
|
|
31
31
|
"build": "vite build",
|
|
32
|
+
"postbuild": "mkdir -p dist/tokens && cp src/tokens/tokens.css dist/tokens/tokens.css",
|
|
32
33
|
"build:watch": "vite build --watch",
|
|
33
34
|
"storybook": "storybook dev -p 6006",
|
|
34
35
|
"build-storybook": "storybook build",
|