@ngrr/ds 0.1.27 → 0.1.31

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 (12) hide show
  1. package/AI-short.md +243 -0
  2. package/AI.md +699 -1699
  3. package/README.md +50 -1
  4. package/dist/components/atoms/Badge/Badge.d.ts +4 -4
  5. package/dist/ds-nagarro.es.js +4480 -28866
  6. package/dist/ds-nagarro.umd.js +13 -28
  7. package/dist/style.css +2 -0
  8. package/dist/tokens.css +109 -59
  9. package/package.json +4 -4
  10. package/AGENTS.md +0 -461
  11. package/CLAUDE.md +0 -6
  12. 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,12 +443,12 @@
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.125rem;
397
- --font-size-display-m: 1.25rem;
398
- --font-size-display-l: 1.5rem;
399
- --font-size-display-xl: 1.875rem;
400
- --font-size-display-2xl: 2.25rem;
401
- --font-size-display-3xl: 3rem;
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;
@@ -415,7 +465,7 @@
415
465
  --font-weight-medium: 500;
416
466
  --font-weight-semibold: 600;
417
467
 
418
- --font-letter-spacing-tight: -0.02em;
468
+ --font-letter-spacing-tight: -0.03em;
419
469
  --font-letter-spacing-normal: 0em;
420
470
  --font-letter-spacing-display: -0.01em;
421
471
  --font-letter-spacing-wide: 0.04em;
@@ -427,56 +477,55 @@
427
477
  Inset/ = internal padding inside components
428
478
  ============================================================================= */
429
479
 
430
- --space-none: 0px;
431
- --space-micro: 2px;
432
- --space-tiny: 4px;
433
- --space-small: 8px;
434
- --space-compact: 12px;
435
- --space-medium: 16px;
436
- --space-comfortable: 20px;
437
- --space-large: 24px;
438
- --space-spacious: 32px;
439
- --space-generous: 40px;
440
- --space-ample: 48px;
441
- --space-grand: 64px;
442
-
443
- --inset-none: 0px;
444
- --inset-micro: 2px;
445
- --inset-tiny: 4px;
446
- --inset-small: 8px;
447
- --inset-medium: 12px;
448
- --inset-large: 16px;
449
- --inset-xlarge: 24px;
450
-
451
- --space-form-vertical: var(--space-comfortable);
452
- --space-toolbar-standard: var(--space-small);
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: 32px;
461
- --control-height-nested: 24px;
462
- --control-radius-standard: 16px;
463
- --control-radius-small: 12px;
509
+ --control-height-standard: var(--size-32);
510
+ --control-height-nested: var(--size-24);
511
+ --control-radius-standard: var(--radius-full);
512
+ --control-radius-small: var(--radius-full);
464
513
 
465
514
  /* Avatar sizing scale */
466
- --size-avatar-xxs: 16px;
467
- --size-avatar-xs: 24px;
468
- --size-avatar-sm: 32px;
515
+ --size-avatar-xxs: var(--size-16);
516
+ --size-avatar-xs: var(--size-24);
517
+ --size-avatar-sm: var(--size-32);
469
518
  --size-avatar-md: 40px;
470
- --size-avatar-lg: 48px;
471
- --size-avatar-xl: 64px;
519
+ --size-avatar-lg: var(--size-48);
520
+ --size-avatar-xl: var(--size-64);
472
521
  --size-avatar-xxl: 128px;
473
522
  --gap-avatar-group: -4px;
474
523
  /* Button token aliases expected by existing component CSS */
475
- --control-button-inset-standard: 8px;
476
- --control-button-inset-small: 4px;
477
- --control-button-space-standard: 4px;
478
- --gap-button-small: 0px;
479
- --inset-label-wrapper-standard: 4px;
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,23 @@
484
533
  --control-chip-space-default: var(--space-small);
485
534
  --control-chip-space-small: var(--space-tiny);
486
535
 
487
- --dimensions-width-standard: 320px;
488
- --dimensions-width-popover: 256px;
536
+ --dimensions-width-standard: var(--size-320);
537
+ --dimensions-width-popover: var(--size-256);
489
538
 
490
- --nav-topbar-height: 48px;
491
- --nav-toolbar-height: 40px;
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: 32px;
494
- --nav-sidebar-width: 200px;
495
- --nav-sidebar-collapsed-width: 48px;
496
-
497
- --radius-none: 0px;
498
- --radius-small: 4px;
499
- --radius-medium: 6px;
500
- --radius-large: 8px;
501
- --radius-xlarge: 12px;
502
- --radius-full: 9999px;
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);
503
553
 
504
554
  --border-width-default: 1px;
505
555
  --border-width-medium: 1.5px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngrr/ds",
3
- "version": "0.1.27",
3
+ "version": "0.1.31",
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
- "CLAUDE.md"
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",