@ngrr/ds 0.1.31 → 0.1.32

package/dist/tokens.css

@@ -454,12 +454,12 @@
   --font-line-height-label:     1rem;
   --font-line-height-body-s:    1.25rem;
   --font-line-height-body-l:    1.5rem;
-  --font-line-height-display-s: 1.75rem;
-  --font-line-height-display-m: 1.875rem;
-  --font-line-height-display-l: 2rem;
-  --font-line-height-display-xl:  2.375rem;
-  --font-line-height-display-2xl: 2.75rem;
-  --font-line-height-display-3xl: 3.75rem;
+  --font-line-height-display-s:   2rem;
+  --font-line-height-display-m:   2.5rem;
+  --font-line-height-display-l:   3rem;
+  --font-line-height-display-xl:  3.5rem;
+  --font-line-height-display-2xl: 4rem;
+  --font-line-height-display-3xl: 4.5rem;
 
   --font-weight-regular:        400;
   --font-weight-medium:         500;
@@ -468,7 +468,7 @@
   --font-letter-spacing-tight:   -0.03em;
   --font-letter-spacing-normal:   0em;
   --font-letter-spacing-display: -0.01em;
-  --font-letter-spacing-wide:     0.04em;
+  --font-letter-spacing-wide:     0em;
 
 
 /* =============================================================================
@@ -508,18 +508,18 @@
 
   --control-height-standard:      var(--size-32);
   --control-height-nested:        var(--size-24);
-  --control-radius-standard:      var(--radius-full);
-  --control-radius-small:         var(--radius-full);
+  --control-radius-standard:      var(--radius-standard);
+  --control-radius-small:         var(--radius-small);
 
   /* Avatar sizing scale */
   --size-avatar-xxs:              var(--size-16);
   --size-avatar-xs:               var(--size-24);
   --size-avatar-sm:               var(--size-32);
-  --size-avatar-md:               40px;
   --size-avatar-lg:               var(--size-48);
   --size-avatar-xl:               var(--size-64);
   --size-avatar-xxl:              128px;
   --gap-avatar-group:             -4px;
+
   /* Button token aliases expected by existing component CSS */
   --control-button-inset-standard: var(--inset-small);
   --control-button-inset-small:    var(--inset-tiny);
@@ -551,6 +551,17 @@
   --radius-xlarge:                 var(--size-32);
   --radius-full:                   var(--scale-full);
 
+  --surface-tooltip-radius:         var(--radius-xsmall);
+  --surface-popover-radius:         var(--radius-standard);
+  --surface-card-radius:            var(--radius-large);
+  --surface-modal-radius:           var(--radius-xlarge);
+  --surface-modal-max-width:        var(--size-1024);
+
+  --surface-popover-width-min:      var(--size-192);
+  --surface-popover-width-standard: var(--size-256);
+  --surface-popover-width-large:    var(--size-320);
+  --surface-popover-width-max:      var(--size-480);
+
   --border-width-default:          1px;
   --border-width-medium:           1.5px;
   --border-width-thick:            2px;
@@ -562,14 +573,66 @@
   --tag-radius:                    var(--control-radius-standard);
   --border-ui-icon:                1.25px;
 
+  /* =============================================================================
+   NAV — Source: Figma size collection → nav/*
+   ============================================================================= */
+
+   --nav-heading-height-xsmall:      var(--size-24);
+   --nav-heading-height-small:       var(--size-32);
+   --nav-heading-height-standard:    var(--size-48);
+   --nav-heading-height-large:       var(--size-64);
+ 
+   --nav-inset-small:                var(--inset-small);
+   --nav-inset-standard:             var(--inset-medium);
+ 
+   --nav-space-small:                var(--space-small);
+   --nav-space-standard:             var(--space-medium);
+ 
+   --nav-sidebar-width-collapsed:    var(--size-48);
+   --nav-sidebar-width-expanded-min: var(--size-256);
+   --nav-sidebar-width-expanded-max: var(--size-480);
+
+  /* =============================================================================
+   GRID — Source: Figma size collection → grid/*
+   ============================================================================= */
+
+   --grid-columns:      12;
+   --grid-gutter:       var(--size-16);
+   --grid-margin-x:     var(--size-16);
+   --grid-cards-gutter: var(--size-16);
+
+/* =============================================================================
+   Z-INDEX — Source: Figma size collection → z-index/*
+   ============================================================================= */
+
+   --z-index-sticky:         1020;
+   --z-index-fixed:          1030;
+   --z-index-modal-backdrop: 1040;
+   --z-index-modal:          1050;
+   --z-index-popover:        1060;
+   --z-index-tooltip:        1070;
+
+   /* =============================================================================
+   BREAKPOINTS — Source: Figma size collection → breakpoints/*
+   ============================================================================= */
+
+  --breakpoint-mobile:         480px;
+  --breakpoint-tablet:         768px;
+  --breakpoint-desktop:        1280px;
+  --breakpoint-desktop-large:  1440px;
 
 /* =============================================================================
    TRANSITIONS — not mode-dependent
    ============================================================================= */
 
-  --transition-fast:   100ms ease;
-  --transition-medium: 150ms ease;
-  --transition-slow:   200ms ease;
+   --transition-instant:  0ms ease;
+   --transition-fast:     150ms ease;
+   --transition-normal:   250ms ease;
+   --transition-slow:     400ms ease;
+   --transition-popover:  150ms ease;
+   --transition-switcher: 150ms ease;
+   --transition-drawer:   250ms ease;
+   --transition-modal:    0ms ease;
 
 } /* end :root */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrr/ds",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "main": "./dist/ds-nagarro.umd.js",
   "module": "./dist/ds-nagarro.es.js",
   "types": "./dist/index.d.ts",