@ngrr/ds 0.1.29 → 0.1.32
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/AI-short.md +243 -0
- package/AI.md +814 -1691
- package/README.md +50 -1
- package/dist/components/atoms/Avatar/Avatar.d.ts +2 -2
- package/dist/components/atoms/Badge/Badge.d.ts +4 -4
- package/dist/ds-nagarro.es.js +23 -8
- package/dist/ds-nagarro.umd.js +1 -1
- package/dist/style.css +2 -0
- package/dist/tokens.css +183 -70
- package/package.json +4 -4
- package/AGENTS.md +0 -461
- package/CLAUDE.md +0 -6
- package/dist/ds.css +0 -2
package/dist/tokens.css
CHANGED
|
@@ -129,6 +129,56 @@
|
|
|
129
129
|
--primitive-alpha-light-10: rgba(255, 255, 255, 0.10);
|
|
130
130
|
--primitive-alpha-light-20: rgba(255, 255, 255, 0.20);
|
|
131
131
|
|
|
132
|
+
/* =============================================================================
|
|
133
|
+
LAYER 1 — SCALE PRIMITIVES
|
|
134
|
+
Raw multiplied values. Never use directly in components.
|
|
135
|
+
Naming mirrors Figma: scale/{n} where value = n × 4px
|
|
136
|
+
============================================================================= */
|
|
137
|
+
|
|
138
|
+
--scale-null: 0px;
|
|
139
|
+
--scale-025: 1px;
|
|
140
|
+
--scale-05: 2px;
|
|
141
|
+
--scale-1: 4px;
|
|
142
|
+
--scale-2: 8px;
|
|
143
|
+
--scale-3: 12px;
|
|
144
|
+
--scale-4: 16px;
|
|
145
|
+
--scale-6: 24px;
|
|
146
|
+
--scale-8: 32px;
|
|
147
|
+
--scale-12: 48px;
|
|
148
|
+
--scale-16: 64px;
|
|
149
|
+
--scale-32: 128px;
|
|
150
|
+
--scale-48: 192px;
|
|
151
|
+
--scale-64: 256px;
|
|
152
|
+
--scale-80: 320px;
|
|
153
|
+
--scale-120: 480px;
|
|
154
|
+
--scale-128: 512px;
|
|
155
|
+
--scale-192: 768px;
|
|
156
|
+
--scale-256: 1024px;
|
|
157
|
+
--scale-full: 9999px;
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
/* =============================================================================
|
|
161
|
+
LAYER 2 — SIZE SEMANTIC TOKENS
|
|
162
|
+
Reference scale primitives via var(). Named by their px value.
|
|
163
|
+
Mirrors Figma: size/{px-value}
|
|
164
|
+
============================================================================= */
|
|
165
|
+
|
|
166
|
+
--size-0: var(--scale-null);
|
|
167
|
+
--size-2: var(--scale-05);
|
|
168
|
+
--size-4: var(--scale-1);
|
|
169
|
+
--size-8: var(--scale-2);
|
|
170
|
+
--size-12: var(--scale-3);
|
|
171
|
+
--size-16: var(--scale-4);
|
|
172
|
+
--size-24: var(--scale-6);
|
|
173
|
+
--size-32: var(--scale-8);
|
|
174
|
+
--size-48: var(--scale-12);
|
|
175
|
+
--size-64: var(--scale-16);
|
|
176
|
+
--size-192: var(--scale-48);
|
|
177
|
+
--size-256: var(--scale-64);
|
|
178
|
+
--size-320: var(--scale-80);
|
|
179
|
+
--size-480: var(--scale-120);
|
|
180
|
+
--size-1024: var(--scale-256);
|
|
181
|
+
|
|
132
182
|
|
|
133
183
|
/* =============================================================================
|
|
134
184
|
LAYER 2 — SEMANTIC TOKENS (light mode)
|
|
@@ -393,32 +443,32 @@
|
|
|
393
443
|
--font-size-label: 0.875rem;
|
|
394
444
|
--font-size-body-s: 0.875rem;
|
|
395
445
|
--font-size-body-l: 1rem;
|
|
396
|
-
--font-size-display-s: 1.
|
|
397
|
-
--font-size-display-m:
|
|
398
|
-
--font-size-display-l:
|
|
399
|
-
--font-size-display-xl:
|
|
400
|
-
--font-size-display-2xl:
|
|
401
|
-
--font-size-display-3xl:
|
|
446
|
+
--font-size-display-s: 1.5rem;
|
|
447
|
+
--font-size-display-m: 2rem;
|
|
448
|
+
--font-size-display-l: 2.5rem;
|
|
449
|
+
--font-size-display-xl: 3rem;
|
|
450
|
+
--font-size-display-2xl: 3.25rem;
|
|
451
|
+
--font-size-display-3xl: 3.75rem;
|
|
402
452
|
|
|
403
453
|
--font-line-height-micro: 1rem;
|
|
404
454
|
--font-line-height-label: 1rem;
|
|
405
455
|
--font-line-height-body-s: 1.25rem;
|
|
406
456
|
--font-line-height-body-l: 1.5rem;
|
|
407
|
-
--font-line-height-display-s:
|
|
408
|
-
--font-line-height-display-m:
|
|
409
|
-
--font-line-height-display-l:
|
|
410
|
-
--font-line-height-display-xl:
|
|
411
|
-
--font-line-height-display-2xl:
|
|
412
|
-
--font-line-height-display-3xl:
|
|
457
|
+
--font-line-height-display-s: 2rem;
|
|
458
|
+
--font-line-height-display-m: 2.5rem;
|
|
459
|
+
--font-line-height-display-l: 3rem;
|
|
460
|
+
--font-line-height-display-xl: 3.5rem;
|
|
461
|
+
--font-line-height-display-2xl: 4rem;
|
|
462
|
+
--font-line-height-display-3xl: 4.5rem;
|
|
413
463
|
|
|
414
464
|
--font-weight-regular: 400;
|
|
415
465
|
--font-weight-medium: 500;
|
|
416
466
|
--font-weight-semibold: 600;
|
|
417
467
|
|
|
418
|
-
--font-letter-spacing-tight: -0.
|
|
468
|
+
--font-letter-spacing-tight: -0.03em;
|
|
419
469
|
--font-letter-spacing-normal: 0em;
|
|
420
470
|
--font-letter-spacing-display: -0.01em;
|
|
421
|
-
--font-letter-spacing-wide:
|
|
471
|
+
--font-letter-spacing-wide: 0em;
|
|
422
472
|
|
|
423
473
|
|
|
424
474
|
/* =============================================================================
|
|
@@ -427,56 +477,55 @@
|
|
|
427
477
|
Inset/ = internal padding inside components
|
|
428
478
|
============================================================================= */
|
|
429
479
|
|
|
430
|
-
--space-none:
|
|
431
|
-
--space-micro:
|
|
432
|
-
--space-tiny:
|
|
433
|
-
--space-small:
|
|
434
|
-
--space-compact:
|
|
435
|
-
--space-medium:
|
|
436
|
-
--space-
|
|
437
|
-
--space-
|
|
438
|
-
--space-
|
|
439
|
-
--space-
|
|
440
|
-
|
|
441
|
-
--
|
|
442
|
-
|
|
443
|
-
--inset-
|
|
444
|
-
--inset-
|
|
445
|
-
--inset-
|
|
446
|
-
--inset-
|
|
447
|
-
--inset-
|
|
448
|
-
--inset-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
--space-
|
|
452
|
-
--
|
|
453
|
-
--page-margin-x: var(--inset-large); /* 16px */
|
|
480
|
+
--space-none: var(--size-0);
|
|
481
|
+
--space-micro: var(--size-2);
|
|
482
|
+
--space-tiny: var(--size-4);
|
|
483
|
+
--space-small: var(--size-8);
|
|
484
|
+
--space-compact: var(--size-12);
|
|
485
|
+
--space-medium: var(--size-16);
|
|
486
|
+
--space-large: var(--size-24);
|
|
487
|
+
--space-spacious: var(--size-32);
|
|
488
|
+
--space-ample: var(--size-48);
|
|
489
|
+
--space-grand: var(--size-64);
|
|
490
|
+
|
|
491
|
+
--inset-none: var(--size-0);
|
|
492
|
+
--inset-micro: var(--size-2);
|
|
493
|
+
--inset-tiny: var(--size-4);
|
|
494
|
+
--inset-small: var(--size-8);
|
|
495
|
+
--inset-compact: var(--size-12);
|
|
496
|
+
--inset-medium: var(--size-16);
|
|
497
|
+
--inset-large: var(--size-24);
|
|
498
|
+
--inset-spacious: var(--size-32);
|
|
499
|
+
|
|
500
|
+
--space-form-vertical: var(--space-spacious);
|
|
501
|
+
--space-toolbar-standard: var(--space-medium);
|
|
502
|
+
--page-margin-x: var(--inset-medium); /* 16px */
|
|
454
503
|
|
|
455
504
|
|
|
456
505
|
/* =============================================================================
|
|
457
506
|
SIZING, RADIUS, BORDER WIDTH — not mode-dependent
|
|
458
507
|
===== ======================================================================== */
|
|
459
508
|
|
|
460
|
-
--control-height-standard:
|
|
461
|
-
--control-height-nested:
|
|
462
|
-
--control-radius-standard:
|
|
463
|
-
--control-radius-small:
|
|
509
|
+
--control-height-standard: var(--size-32);
|
|
510
|
+
--control-height-nested: var(--size-24);
|
|
511
|
+
--control-radius-standard: var(--radius-standard);
|
|
512
|
+
--control-radius-small: var(--radius-small);
|
|
464
513
|
|
|
465
514
|
/* Avatar sizing scale */
|
|
466
|
-
--size-avatar-xxs:
|
|
467
|
-
--size-avatar-xs:
|
|
468
|
-
--size-avatar-sm:
|
|
469
|
-
--size-avatar-
|
|
470
|
-
--size-avatar-
|
|
471
|
-
--size-avatar-xl: 64px;
|
|
515
|
+
--size-avatar-xxs: var(--size-16);
|
|
516
|
+
--size-avatar-xs: var(--size-24);
|
|
517
|
+
--size-avatar-sm: var(--size-32);
|
|
518
|
+
--size-avatar-lg: var(--size-48);
|
|
519
|
+
--size-avatar-xl: var(--size-64);
|
|
472
520
|
--size-avatar-xxl: 128px;
|
|
473
521
|
--gap-avatar-group: -4px;
|
|
522
|
+
|
|
474
523
|
/* Button token aliases expected by existing component CSS */
|
|
475
|
-
--control-button-inset-standard:
|
|
476
|
-
--control-button-inset-small:
|
|
477
|
-
--control-button-space-standard:
|
|
478
|
-
--gap-button-small:
|
|
479
|
-
--inset-label-wrapper-standard:
|
|
524
|
+
--control-button-inset-standard: var(--inset-small);
|
|
525
|
+
--control-button-inset-small: var(--inset-tiny);
|
|
526
|
+
--control-button-space-standard: var(--space-tiny);
|
|
527
|
+
--gap-button-small: var(--space-none);
|
|
528
|
+
--inset-label-wrapper-standard: var(--inset-tiny);
|
|
480
529
|
--control-button-group-larger: var(--space-small);
|
|
481
530
|
--control-button-group-smaller: var(--space-tiny);
|
|
482
531
|
--control-button-space-default: var(--space-small);
|
|
@@ -484,22 +533,34 @@
|
|
|
484
533
|
--control-chip-space-default: var(--space-small);
|
|
485
534
|
--control-chip-space-small: var(--space-tiny);
|
|
486
535
|
|
|
487
|
-
--dimensions-width-standard:
|
|
488
|
-
--dimensions-width-popover:
|
|
536
|
+
--dimensions-width-standard: var(--size-320);
|
|
537
|
+
--dimensions-width-popover: var(--size-256);
|
|
489
538
|
|
|
490
|
-
--nav-topbar-height:
|
|
491
|
-
--nav-toolbar-height:
|
|
539
|
+
--nav-topbar-height: var(--size-48);
|
|
540
|
+
--nav-toolbar-height: var(--size-48);
|
|
492
541
|
--nav-toolbar-inset: var(--inset-medium);
|
|
493
|
-
--nav-heading-height:
|
|
494
|
-
--nav-sidebar-width:
|
|
495
|
-
--nav-sidebar-collapsed-width:
|
|
496
|
-
|
|
497
|
-
--radius-none:
|
|
498
|
-
--radius-
|
|
499
|
-
--radius-
|
|
500
|
-
--radius-
|
|
501
|
-
--radius-
|
|
502
|
-
--radius-
|
|
542
|
+
--nav-heading-height: var(--size-32);
|
|
543
|
+
--nav-sidebar-width: var(--size-256);
|
|
544
|
+
--nav-sidebar-collapsed-width: var(--size-48);
|
|
545
|
+
|
|
546
|
+
--radius-none: var(--size-0);
|
|
547
|
+
--radius-xsmall: var(--size-4);
|
|
548
|
+
--radius-small: var(--size-12);
|
|
549
|
+
--radius-standard: var(--size-16);
|
|
550
|
+
--radius-large: var(--size-24);
|
|
551
|
+
--radius-xlarge: var(--size-32);
|
|
552
|
+
--radius-full: var(--scale-full);
|
|
553
|
+
|
|
554
|
+
--surface-tooltip-radius: var(--radius-xsmall);
|
|
555
|
+
--surface-popover-radius: var(--radius-standard);
|
|
556
|
+
--surface-card-radius: var(--radius-large);
|
|
557
|
+
--surface-modal-radius: var(--radius-xlarge);
|
|
558
|
+
--surface-modal-max-width: var(--size-1024);
|
|
559
|
+
|
|
560
|
+
--surface-popover-width-min: var(--size-192);
|
|
561
|
+
--surface-popover-width-standard: var(--size-256);
|
|
562
|
+
--surface-popover-width-large: var(--size-320);
|
|
563
|
+
--surface-popover-width-max: var(--size-480);
|
|
503
564
|
|
|
504
565
|
--border-width-default: 1px;
|
|
505
566
|
--border-width-medium: 1.5px;
|
|
@@ -512,14 +573,66 @@
|
|
|
512
573
|
--tag-radius: var(--control-radius-standard);
|
|
513
574
|
--border-ui-icon: 1.25px;
|
|
514
575
|
|
|
576
|
+
/* =============================================================================
|
|
577
|
+
NAV — Source: Figma size collection → nav/*
|
|
578
|
+
============================================================================= */
|
|
579
|
+
|
|
580
|
+
--nav-heading-height-xsmall: var(--size-24);
|
|
581
|
+
--nav-heading-height-small: var(--size-32);
|
|
582
|
+
--nav-heading-height-standard: var(--size-48);
|
|
583
|
+
--nav-heading-height-large: var(--size-64);
|
|
584
|
+
|
|
585
|
+
--nav-inset-small: var(--inset-small);
|
|
586
|
+
--nav-inset-standard: var(--inset-medium);
|
|
587
|
+
|
|
588
|
+
--nav-space-small: var(--space-small);
|
|
589
|
+
--nav-space-standard: var(--space-medium);
|
|
590
|
+
|
|
591
|
+
--nav-sidebar-width-collapsed: var(--size-48);
|
|
592
|
+
--nav-sidebar-width-expanded-min: var(--size-256);
|
|
593
|
+
--nav-sidebar-width-expanded-max: var(--size-480);
|
|
594
|
+
|
|
595
|
+
/* =============================================================================
|
|
596
|
+
GRID — Source: Figma size collection → grid/*
|
|
597
|
+
============================================================================= */
|
|
598
|
+
|
|
599
|
+
--grid-columns: 12;
|
|
600
|
+
--grid-gutter: var(--size-16);
|
|
601
|
+
--grid-margin-x: var(--size-16);
|
|
602
|
+
--grid-cards-gutter: var(--size-16);
|
|
603
|
+
|
|
604
|
+
/* =============================================================================
|
|
605
|
+
Z-INDEX — Source: Figma size collection → z-index/*
|
|
606
|
+
============================================================================= */
|
|
607
|
+
|
|
608
|
+
--z-index-sticky: 1020;
|
|
609
|
+
--z-index-fixed: 1030;
|
|
610
|
+
--z-index-modal-backdrop: 1040;
|
|
611
|
+
--z-index-modal: 1050;
|
|
612
|
+
--z-index-popover: 1060;
|
|
613
|
+
--z-index-tooltip: 1070;
|
|
614
|
+
|
|
615
|
+
/* =============================================================================
|
|
616
|
+
BREAKPOINTS — Source: Figma size collection → breakpoints/*
|
|
617
|
+
============================================================================= */
|
|
618
|
+
|
|
619
|
+
--breakpoint-mobile: 480px;
|
|
620
|
+
--breakpoint-tablet: 768px;
|
|
621
|
+
--breakpoint-desktop: 1280px;
|
|
622
|
+
--breakpoint-desktop-large: 1440px;
|
|
515
623
|
|
|
516
624
|
/* =============================================================================
|
|
517
625
|
TRANSITIONS — not mode-dependent
|
|
518
626
|
============================================================================= */
|
|
519
627
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
628
|
+
--transition-instant: 0ms ease;
|
|
629
|
+
--transition-fast: 150ms ease;
|
|
630
|
+
--transition-normal: 250ms ease;
|
|
631
|
+
--transition-slow: 400ms ease;
|
|
632
|
+
--transition-popover: 150ms ease;
|
|
633
|
+
--transition-switcher: 150ms ease;
|
|
634
|
+
--transition-drawer: 250ms ease;
|
|
635
|
+
--transition-modal: 0ms ease;
|
|
523
636
|
|
|
524
637
|
} /* end :root */
|
|
525
638
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrr/ds",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.32",
|
|
4
4
|
"main": "./dist/ds-nagarro.umd.js",
|
|
5
5
|
"module": "./dist/ds-nagarro.es.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|
|
18
|
-
"AGENTS.md",
|
|
19
18
|
"AI.md",
|
|
20
|
-
"
|
|
19
|
+
"AI-short.md",
|
|
20
|
+
"README.md"
|
|
21
21
|
],
|
|
22
22
|
"type": "module",
|
|
23
23
|
"scripts": {
|
|
24
|
-
"build": "vite build && cp tokens.css dist/tokens.css",
|
|
24
|
+
"build": "vite build && cp tokens.css dist/tokens.css && mv dist/ds.css dist/style.css",
|
|
25
25
|
"storybook": "storybook dev -p 6006",
|
|
26
26
|
"build-storybook": "storybook build -o storybook-static",
|
|
27
27
|
"typecheck": "tsc --noEmit",
|