@commercetools/nimbus-tokens 2.6.0 → 2.8.0

package/css/design-tokens.css

@@ -3,6 +3,12 @@
  */
 
 :root {
+  --aspect-ratio-square: 1;
+  --aspect-ratio-landscape: 1.3333;
+  --aspect-ratio-portrait: 0.75;
+  --aspect-ratio-wide: 1.7777;
+  --aspect-ratio-ultrawide: 3.6;
+  --aspect-ratio-golden: 1.618;
   --blur-100: 4px;
   --blur-200: 8px;
   --blur-300: 12px;
@@ -2151,6 +2157,11 @@
   --text-style-caption: [object Object];
   --text-style-detail: [object Object];
   --text-style-body: [object Object];
+  --letter-spacing-tighter: -5%;
+  --letter-spacing-tight: -2.5%;
+  --letter-spacing-wide: 2.5%;
+  --letter-spacing-wider: 5%;
+  --letter-spacing-widest: 10%;
   --size-25: 1px;
   --size-50: 2px;
   --size-100: 4px;
@@ -2282,6 +2293,10 @@
   --cursor-radio: default;
   --cursor-slider: default;
   --cursor-switch: pointer;
+  --animation-spin: spin 1s cubic-bezier(0, 0, 1, 1) infinite;
+  --animation-ping: ping 1s cubic-bezier(0, 0, 0.58, 1) infinite;
+  --animation-pulse: pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  --animation-bounce: bounce 2s infinite;
   --breakpoints-sm: 480px;
   --breakpoints-md: 768px;
   --breakpoints-lg: 1024px;

package/dist/declarations/src/generated/ts/design-tokens.d.ts

@@ -3,24 +3,12 @@
  */
 declare const _default: {
     readonly aspectRatio: {
-        readonly square: {
-            readonly value: 1;
-        };
-        readonly landscape: {
-            readonly value: 1.3333;
-        };
-        readonly portrait: {
-            readonly value: 0.75;
-        };
-        readonly wide: {
-            readonly value: 1.7777;
-        };
-        readonly ultrawide: {
-            readonly value: 3.6;
-        };
-        readonly golden: {
-            readonly value: 1.618;
-        };
+        readonly square: 1;
+        readonly landscape: 1.3333;
+        readonly portrait: 0.75;
+        readonly wide: 1.7777;
+        readonly ultrawide: 3.6;
+        readonly golden: 1.618;
     };
     readonly blur: {
         readonly "100": "4px";
@@ -2684,21 +2672,11 @@ declare const _default: {
         };
     };
     readonly letterSpacing: {
-        readonly tighter: {
-            readonly value: "-5%";
-        };
-        readonly tight: {
-            readonly value: "-2.5%";
-        };
-        readonly wide: {
-            readonly value: "2.5%";
-        };
-        readonly wider: {
-            readonly value: "5%";
-        };
-        readonly widest: {
-            readonly value: "10%";
-        };
+        readonly tighter: "-5%";
+        readonly tight: "-2.5%";
+        readonly wide: "2.5%";
+        readonly wider: "5%";
+        readonly widest: "10%";
     };
     readonly size: {
         readonly "25": "1px";
@@ -2848,18 +2826,10 @@ declare const _default: {
         readonly switch: "pointer";
     };
     readonly animation: {
-        readonly spin: {
-            readonly value: "spin 1s cubic-bezier(0, 0, 1, 1) infinite";
-        };
-        readonly ping: {
-            readonly value: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite";
-        };
-        readonly pulse: {
-            readonly value: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite";
-        };
-        readonly bounce: {
-            readonly value: "bounce 2s infinite";
-        };
+        readonly spin: "spin 1s cubic-bezier(0, 0, 1, 1) infinite";
+        readonly ping: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite";
+        readonly pulse: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite";
+        readonly bounce: "bounce 2s infinite";
     };
     readonly breakpoints: {
         readonly sm: "480px";

package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.dev.js

@@ -6,24 +6,12 @@
 
 var designTokens = {
   aspectRatio: {
-    square: {
-      value: 1
-    },
-    landscape: {
-      value: 1.3333
-    },
-    portrait: {
-      value: 0.75
-    },
-    wide: {
-      value: 1.7777
-    },
-    ultrawide: {
-      value: 3.6
-    },
-    golden: {
-      value: 1.618
-    }
+    square: 1,
+    landscape: 1.3333,
+    portrait: 0.75,
+    wide: 1.7777,
+    ultrawide: 3.6,
+    golden: 1.618
   },
   blur: {
     "100": "4px",
@@ -2687,21 +2675,11 @@ var designTokens = {
     }
   },
   letterSpacing: {
-    tighter: {
-      value: "-5%"
-    },
-    tight: {
-      value: "-2.5%"
-    },
-    wide: {
-      value: "2.5%"
-    },
-    wider: {
-      value: "5%"
-    },
-    widest: {
-      value: "10%"
-    }
+    tighter: "-5%",
+    tight: "-2.5%",
+    wide: "2.5%",
+    wider: "5%",
+    widest: "10%"
   },
   size: {
     "25": "1px",
@@ -2851,18 +2829,10 @@ var designTokens = {
     switch: "pointer"
   },
   animation: {
-    spin: {
-      value: "spin 1s cubic-bezier(0, 0, 1, 1) infinite"
-    },
-    ping: {
-      value: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite"
-    },
-    pulse: {
-      value: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite"
-    },
-    bounce: {
-      value: "bounce 2s infinite"
-    }
+    spin: "spin 1s cubic-bezier(0, 0, 1, 1) infinite",
+    ping: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite",
+    pulse: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite",
+    bounce: "bounce 2s infinite"
   },
   breakpoints: {
     sm: "480px",

package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.prod.js

@@ -6,24 +6,12 @@
 
 var designTokens = {
   aspectRatio: {
-    square: {
-      value: 1
-    },
-    landscape: {
-      value: 1.3333
-    },
-    portrait: {
-      value: 0.75
-    },
-    wide: {
-      value: 1.7777
-    },
-    ultrawide: {
-      value: 3.6
-    },
-    golden: {
-      value: 1.618
-    }
+    square: 1,
+    landscape: 1.3333,
+    portrait: 0.75,
+    wide: 1.7777,
+    ultrawide: 3.6,
+    golden: 1.618
   },
   blur: {
     "100": "4px",
@@ -2687,21 +2675,11 @@ var designTokens = {
     }
   },
   letterSpacing: {
-    tighter: {
-      value: "-5%"
-    },
-    tight: {
-      value: "-2.5%"
-    },
-    wide: {
-      value: "2.5%"
-    },
-    wider: {
-      value: "5%"
-    },
-    widest: {
-      value: "10%"
-    }
+    tighter: "-5%",
+    tight: "-2.5%",
+    wide: "2.5%",
+    wider: "5%",
+    widest: "10%"
   },
   size: {
     "25": "1px",
@@ -2851,18 +2829,10 @@ var designTokens = {
     switch: "pointer"
   },
   animation: {
-    spin: {
-      value: "spin 1s cubic-bezier(0, 0, 1, 1) infinite"
-    },
-    ping: {
-      value: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite"
-    },
-    pulse: {
-      value: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite"
-    },
-    bounce: {
-      value: "bounce 2s infinite"
-    }
+    spin: "spin 1s cubic-bezier(0, 0, 1, 1) infinite",
+    ping: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite",
+    pulse: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite",
+    bounce: "bounce 2s infinite"
   },
   breakpoints: {
     sm: "480px",

package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.esm.js

@@ -4,24 +4,12 @@
 
 var designTokens = {
   aspectRatio: {
-    square: {
-      value: 1
-    },
-    landscape: {
-      value: 1.3333
-    },
-    portrait: {
-      value: 0.75
-    },
-    wide: {
-      value: 1.7777
-    },
-    ultrawide: {
-      value: 3.6
-    },
-    golden: {
-      value: 1.618
-    }
+    square: 1,
+    landscape: 1.3333,
+    portrait: 0.75,
+    wide: 1.7777,
+    ultrawide: 3.6,
+    golden: 1.618
   },
   blur: {
     "100": "4px",
@@ -2685,21 +2673,11 @@ var designTokens = {
     }
   },
   letterSpacing: {
-    tighter: {
-      value: "-5%"
-    },
-    tight: {
-      value: "-2.5%"
-    },
-    wide: {
-      value: "2.5%"
-    },
-    wider: {
-      value: "5%"
-    },
-    widest: {
-      value: "10%"
-    }
+    tighter: "-5%",
+    tight: "-2.5%",
+    wide: "2.5%",
+    wider: "5%",
+    widest: "10%"
   },
   size: {
     "25": "1px",
@@ -2849,18 +2827,10 @@ var designTokens = {
     switch: "pointer"
   },
   animation: {
-    spin: {
-      value: "spin 1s cubic-bezier(0, 0, 1, 1) infinite"
-    },
-    ping: {
-      value: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite"
-    },
-    pulse: {
-      value: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite"
-    },
-    bounce: {
-      value: "bounce 2s infinite"
-    }
+    spin: "spin 1s cubic-bezier(0, 0, 1, 1) infinite",
+    ping: "ping 1s cubic-bezier(0, 0, 0.58, 1) infinite",
+    pulse: "pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite",
+    bounce: "bounce 2s infinite"
   },
   breakpoints: {
     sm: "480px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus-tokens",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "main": "dist/commercetools-nimbus-tokens.cjs.js",
   "module": "dist/commercetools-nimbus-tokens.esm.js",
   "type": "module",
@@ -39,7 +39,7 @@
     "@tokens-studio/sd-transforms": "^2.0.3",
     "is-plain-obj": "^4.1.0",
     "prettier": "^3.8.1",
-    "style-dictionary": "^4.3.0"
+    "style-dictionary": "^5.3.3"
   },
   "scripts": {
     "build": "style-dictionary build --verbose --config ./src/style-dictionary.config.js",