@drdex0101/water-design-system 1.0.1 → 2.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.
- package/README.md +4 -4
- package/dist/components/Badge/Badge.d.ts +16 -0
- package/dist/components/Badge/index.d.ts +1 -0
- package/dist/components/Button/Button.d.ts +20 -2
- package/dist/components/Checkbox/Checkbox.d.ts +13 -0
- package/dist/components/Checkbox/index.d.ts +1 -0
- package/dist/components/Divider/Divider.d.ts +9 -0
- package/dist/components/Divider/index.d.ts +1 -0
- package/dist/components/Input/Input.d.ts +20 -0
- package/dist/components/Input/index.d.ts +1 -0
- package/dist/components/Poker/PokerCard.d.ts +28 -0
- package/dist/components/Poker/PokerPlayer.d.ts +38 -0
- package/dist/components/Poker/PokerStatusIndicator.d.ts +28 -0
- package/dist/components/Poker/PokerTable.d.ts +39 -0
- package/dist/components/Poker/index.d.ts +4 -0
- package/dist/components/Slider/Slider.d.ts +23 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Switch/Switch.d.ts +17 -0
- package/dist/components/Switch/index.d.ts +1 -0
- package/dist/components/Tabs/Tabs.d.ts +26 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Toast/Toast.d.ts +18 -0
- package/dist/components/Toast/index.d.ts +1 -0
- package/dist/components/Toggle/Toggle.d.ts +34 -0
- package/dist/components/Toggle/index.d.ts +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/pages/SpacingTokens.d.ts +2 -0
- package/dist/tokens/colors.d.ts +38 -204
- package/dist/tokens/index.d.ts +1 -5
- package/dist/tokens/semantic.d.ts +201 -114
- package/dist/tokens/spacing.d.ts +54 -0
- package/dist/water-design-system.es.js +2336 -582
- package/dist/water-design-system.umd.js +15 -4
- package/package.json +3 -2
package/dist/tokens/colors.d.ts
CHANGED
|
@@ -3,14 +3,6 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extracted from Figma Water Design System
|
|
5
5
|
* Color palette following a consistent scale pattern.
|
|
6
|
-
* Lower numbers (50-100) are lighter, higher numbers (800-900) are darker.
|
|
7
|
-
*
|
|
8
|
-
* Usage Rules:
|
|
9
|
-
* - Defined in Variables
|
|
10
|
-
* - Do NOT use directly in UI designs - use Semantic Colors instead (e.g., text-success)
|
|
11
|
-
* - Do NOT directly use primitive colors like Green-600
|
|
12
|
-
* - Maintain consistency: If existing Primitive Colors cannot meet special visual needs,
|
|
13
|
-
* system maintainers should evaluate before adding, do not define temporary color values
|
|
14
6
|
*/
|
|
15
7
|
export declare const red: {
|
|
16
8
|
readonly 50: "#fdecec";
|
|
@@ -122,27 +114,27 @@ export declare const lightgrey: {
|
|
|
122
114
|
};
|
|
123
115
|
export declare const grey: {
|
|
124
116
|
readonly 50: "#f9fafb";
|
|
125
|
-
readonly 100: "#
|
|
126
|
-
readonly 200: "#
|
|
127
|
-
readonly 300: "#
|
|
128
|
-
readonly 400: "#
|
|
129
|
-
readonly 500: "#
|
|
130
|
-
readonly 600: "#
|
|
131
|
-
readonly 700: "#
|
|
132
|
-
readonly 800: "#
|
|
133
|
-
readonly 900: "#
|
|
117
|
+
readonly 100: "#cdcdcd";
|
|
118
|
+
readonly 200: "#b5b5b5";
|
|
119
|
+
readonly 300: "#939393";
|
|
120
|
+
readonly 400: "#7e7e7e";
|
|
121
|
+
readonly 500: "#5e5e5e";
|
|
122
|
+
readonly 600: "#565656";
|
|
123
|
+
readonly 700: "#434343";
|
|
124
|
+
readonly 800: "#343434";
|
|
125
|
+
readonly 900: "#0f0f0f";
|
|
134
126
|
};
|
|
135
127
|
export declare const deepocean: {
|
|
136
|
-
readonly 50: "#
|
|
137
|
-
readonly 100: "#
|
|
138
|
-
readonly 200: "#
|
|
139
|
-
readonly 300: "#
|
|
140
|
-
readonly 400: "#
|
|
141
|
-
readonly 500: "#
|
|
142
|
-
readonly 600: "#
|
|
143
|
-
readonly 700: "#
|
|
144
|
-
readonly 800: "#
|
|
145
|
-
readonly 900: "#
|
|
128
|
+
readonly 50: "#e8ebee";
|
|
129
|
+
readonly 100: "#b9c0cb";
|
|
130
|
+
readonly 200: "#97a2b2";
|
|
131
|
+
readonly 300: "#68788f";
|
|
132
|
+
readonly 400: "#4a5d79";
|
|
133
|
+
readonly 500: "#1d3558";
|
|
134
|
+
readonly 600: "#1a3050";
|
|
135
|
+
readonly 700: "#15263e";
|
|
136
|
+
readonly 800: "#101d30";
|
|
137
|
+
readonly 900: "#071427";
|
|
146
138
|
};
|
|
147
139
|
export declare const white = "#ffffff";
|
|
148
140
|
export declare const black = "#000000";
|
|
@@ -257,187 +249,29 @@ export declare const primitiveColors: {
|
|
|
257
249
|
};
|
|
258
250
|
readonly grey: {
|
|
259
251
|
readonly 50: "#f9fafb";
|
|
260
|
-
readonly 100: "#
|
|
261
|
-
readonly 200: "#
|
|
262
|
-
readonly 300: "#
|
|
263
|
-
readonly 400: "#
|
|
264
|
-
readonly 500: "#
|
|
265
|
-
readonly 600: "#
|
|
266
|
-
readonly 700: "#
|
|
267
|
-
readonly 800: "#
|
|
268
|
-
readonly 900: "#
|
|
252
|
+
readonly 100: "#cdcdcd";
|
|
253
|
+
readonly 200: "#b5b5b5";
|
|
254
|
+
readonly 300: "#939393";
|
|
255
|
+
readonly 400: "#7e7e7e";
|
|
256
|
+
readonly 500: "#5e5e5e";
|
|
257
|
+
readonly 600: "#565656";
|
|
258
|
+
readonly 700: "#434343";
|
|
259
|
+
readonly 800: "#343434";
|
|
260
|
+
readonly 900: "#0f0f0f";
|
|
269
261
|
};
|
|
270
262
|
readonly deepocean: {
|
|
271
|
-
readonly 50: "#
|
|
272
|
-
readonly 100: "#
|
|
273
|
-
readonly 200: "#
|
|
274
|
-
readonly 300: "#
|
|
275
|
-
readonly 400: "#
|
|
276
|
-
readonly 500: "#
|
|
277
|
-
readonly 600: "#
|
|
278
|
-
readonly 700: "#
|
|
279
|
-
readonly 800: "#
|
|
280
|
-
readonly 900: "#
|
|
263
|
+
readonly 50: "#e8ebee";
|
|
264
|
+
readonly 100: "#b9c0cb";
|
|
265
|
+
readonly 200: "#97a2b2";
|
|
266
|
+
readonly 300: "#68788f";
|
|
267
|
+
readonly 400: "#4a5d79";
|
|
268
|
+
readonly 500: "#1d3558";
|
|
269
|
+
readonly 600: "#1a3050";
|
|
270
|
+
readonly 700: "#15263e";
|
|
271
|
+
readonly 800: "#101d30";
|
|
272
|
+
readonly 900: "#071427";
|
|
281
273
|
};
|
|
282
274
|
readonly white: "#ffffff";
|
|
283
275
|
readonly black: "#000000";
|
|
284
276
|
};
|
|
285
|
-
export declare const primary: {
|
|
286
|
-
readonly 50: "#eaf5ff";
|
|
287
|
-
readonly 100: "#bee1ff";
|
|
288
|
-
readonly 200: "#9fd2ff";
|
|
289
|
-
readonly 300: "#73bdff";
|
|
290
|
-
readonly 400: "#58b1ff";
|
|
291
|
-
readonly 500: "#2e9dff";
|
|
292
|
-
readonly 600: "#2a8fe8";
|
|
293
|
-
readonly 700: "#216fb5";
|
|
294
|
-
readonly 800: "#19568c";
|
|
295
|
-
readonly 900: "#13426b";
|
|
296
|
-
};
|
|
297
|
-
export declare const neutral: {
|
|
298
|
-
readonly 50: "#eff0f2";
|
|
299
|
-
readonly 100: "#cfd1d5";
|
|
300
|
-
readonly 200: "#b7bac1";
|
|
301
|
-
readonly 300: "#969ba5";
|
|
302
|
-
readonly 400: "#828894";
|
|
303
|
-
readonly 500: "#636a79";
|
|
304
|
-
readonly 600: "#5a606e";
|
|
305
|
-
readonly 700: "#464b56";
|
|
306
|
-
readonly 800: "#363a43";
|
|
307
|
-
readonly 900: "#2a2d33";
|
|
308
|
-
};
|
|
309
|
-
export declare const success: {
|
|
310
|
-
readonly 50: "#e7f7ed";
|
|
311
|
-
readonly 100: "#b3e6c6";
|
|
312
|
-
readonly 200: "#8fd9aa";
|
|
313
|
-
readonly 300: "#5cc884";
|
|
314
|
-
readonly 400: "#3cbd6c";
|
|
315
|
-
readonly 500: "#0bad47";
|
|
316
|
-
readonly 600: "#0a9d41";
|
|
317
|
-
readonly 700: "#087b32";
|
|
318
|
-
readonly 800: "#065f27";
|
|
319
|
-
readonly 900: "#05491e";
|
|
320
|
-
};
|
|
321
|
-
export declare const warning: {
|
|
322
|
-
readonly 50: "#fef7e6";
|
|
323
|
-
readonly 100: "#fae7b0";
|
|
324
|
-
readonly 200: "#f8db8a";
|
|
325
|
-
readonly 300: "#f5cb54";
|
|
326
|
-
readonly 400: "#f3c133";
|
|
327
|
-
readonly 500: "#f0b100";
|
|
328
|
-
readonly 600: "#daa100";
|
|
329
|
-
readonly 700: "#aa7e00";
|
|
330
|
-
readonly 800: "#846100";
|
|
331
|
-
readonly 900: "#654a00";
|
|
332
|
-
};
|
|
333
|
-
export declare const error: {
|
|
334
|
-
readonly 50: "#fdecec";
|
|
335
|
-
readonly 100: "#fac5c5";
|
|
336
|
-
readonly 200: "#f8a9a9";
|
|
337
|
-
readonly 300: "#f48282";
|
|
338
|
-
readonly 400: "#f26969";
|
|
339
|
-
readonly 500: "#ef4444";
|
|
340
|
-
readonly 600: "#d93e3e";
|
|
341
|
-
readonly 700: "#aa3030";
|
|
342
|
-
readonly 800: "#832525";
|
|
343
|
-
readonly 900: "#641d1d";
|
|
344
|
-
};
|
|
345
|
-
export declare const info: {
|
|
346
|
-
readonly 50: "#e6fdfe";
|
|
347
|
-
readonly 100: "#b1f7fc";
|
|
348
|
-
readonly 200: "#8bf4fb";
|
|
349
|
-
readonly 300: "#55eef9";
|
|
350
|
-
readonly 400: "#35ebf8";
|
|
351
|
-
readonly 500: "#02e6f6";
|
|
352
|
-
readonly 600: "#02d1e0";
|
|
353
|
-
readonly 700: "#01a3af";
|
|
354
|
-
readonly 800: "#017f87";
|
|
355
|
-
readonly 900: "#016167";
|
|
356
|
-
};
|
|
357
|
-
export declare const colors: {
|
|
358
|
-
readonly primary: {
|
|
359
|
-
readonly 50: "#eaf5ff";
|
|
360
|
-
readonly 100: "#bee1ff";
|
|
361
|
-
readonly 200: "#9fd2ff";
|
|
362
|
-
readonly 300: "#73bdff";
|
|
363
|
-
readonly 400: "#58b1ff";
|
|
364
|
-
readonly 500: "#2e9dff";
|
|
365
|
-
readonly 600: "#2a8fe8";
|
|
366
|
-
readonly 700: "#216fb5";
|
|
367
|
-
readonly 800: "#19568c";
|
|
368
|
-
readonly 900: "#13426b";
|
|
369
|
-
};
|
|
370
|
-
readonly neutral: {
|
|
371
|
-
readonly 50: "#eff0f2";
|
|
372
|
-
readonly 100: "#cfd1d5";
|
|
373
|
-
readonly 200: "#b7bac1";
|
|
374
|
-
readonly 300: "#969ba5";
|
|
375
|
-
readonly 400: "#828894";
|
|
376
|
-
readonly 500: "#636a79";
|
|
377
|
-
readonly 600: "#5a606e";
|
|
378
|
-
readonly 700: "#464b56";
|
|
379
|
-
readonly 800: "#363a43";
|
|
380
|
-
readonly 900: "#2a2d33";
|
|
381
|
-
};
|
|
382
|
-
readonly success: {
|
|
383
|
-
readonly 50: "#e7f7ed";
|
|
384
|
-
readonly 100: "#b3e6c6";
|
|
385
|
-
readonly 200: "#8fd9aa";
|
|
386
|
-
readonly 300: "#5cc884";
|
|
387
|
-
readonly 400: "#3cbd6c";
|
|
388
|
-
readonly 500: "#0bad47";
|
|
389
|
-
readonly 600: "#0a9d41";
|
|
390
|
-
readonly 700: "#087b32";
|
|
391
|
-
readonly 800: "#065f27";
|
|
392
|
-
readonly 900: "#05491e";
|
|
393
|
-
};
|
|
394
|
-
readonly warning: {
|
|
395
|
-
readonly 50: "#fef7e6";
|
|
396
|
-
readonly 100: "#fae7b0";
|
|
397
|
-
readonly 200: "#f8db8a";
|
|
398
|
-
readonly 300: "#f5cb54";
|
|
399
|
-
readonly 400: "#f3c133";
|
|
400
|
-
readonly 500: "#f0b100";
|
|
401
|
-
readonly 600: "#daa100";
|
|
402
|
-
readonly 700: "#aa7e00";
|
|
403
|
-
readonly 800: "#846100";
|
|
404
|
-
readonly 900: "#654a00";
|
|
405
|
-
};
|
|
406
|
-
readonly error: {
|
|
407
|
-
readonly 50: "#fdecec";
|
|
408
|
-
readonly 100: "#fac5c5";
|
|
409
|
-
readonly 200: "#f8a9a9";
|
|
410
|
-
readonly 300: "#f48282";
|
|
411
|
-
readonly 400: "#f26969";
|
|
412
|
-
readonly 500: "#ef4444";
|
|
413
|
-
readonly 600: "#d93e3e";
|
|
414
|
-
readonly 700: "#aa3030";
|
|
415
|
-
readonly 800: "#832525";
|
|
416
|
-
readonly 900: "#641d1d";
|
|
417
|
-
};
|
|
418
|
-
readonly info: {
|
|
419
|
-
readonly 50: "#e6fdfe";
|
|
420
|
-
readonly 100: "#b1f7fc";
|
|
421
|
-
readonly 200: "#8bf4fb";
|
|
422
|
-
readonly 300: "#55eef9";
|
|
423
|
-
readonly 400: "#35ebf8";
|
|
424
|
-
readonly 500: "#02e6f6";
|
|
425
|
-
readonly 600: "#02d1e0";
|
|
426
|
-
readonly 700: "#01a3af";
|
|
427
|
-
readonly 800: "#017f87";
|
|
428
|
-
readonly 900: "#016167";
|
|
429
|
-
};
|
|
430
|
-
};
|
|
431
|
-
export type RedColor = keyof typeof red;
|
|
432
|
-
export type OrangeColor = keyof typeof orange;
|
|
433
|
-
export type YellowColor = keyof typeof yellow;
|
|
434
|
-
export type GreenColor = keyof typeof green;
|
|
435
|
-
export type CyanColor = keyof typeof cyan;
|
|
436
|
-
export type TealColor = keyof typeof teal;
|
|
437
|
-
export type BrandblueColor = keyof typeof brandblue;
|
|
438
|
-
export type SlateColor = keyof typeof slate;
|
|
439
|
-
export type LightgreyColor = keyof typeof lightgrey;
|
|
440
|
-
export type GreyColor = keyof typeof grey;
|
|
441
|
-
export type DeepoceanColor = keyof typeof deepocean;
|
|
442
277
|
export type PrimitiveColors = typeof primitiveColors;
|
|
443
|
-
export type ColorScale = typeof colors;
|
package/dist/tokens/index.d.ts
CHANGED