@abgov/design-tokens 2.0.1 → 2.1.0

package/data/goa-global-design-tokens.json

@@ -408,6 +408,18 @@
     }
   },
   "opacity": {
+    "page": {
+      "transparent": {
+        "value": "0",
+        "type": "opacity",
+        "description": "0% for initial state of page/content load in or final state of page/content load out"
+      },
+      "full": {
+        "value": "100%",
+        "type": "opacity",
+        "description": "100% for initial state of page/content load out or final state of page/content load in"
+      }
+    },
     "background": {
       "modal": {
         "value": "50%",
@@ -1336,5 +1348,97 @@
       "style": "solid"
     },
     "type": "border"
+  },
+  "translate": {
+    "default": {
+      "value": "translateY(0)",
+      "type": "translate"
+    },
+    "moveIn": {
+      "value": "translateY(12px)",
+      "type": "translate"
+    },
+    "moveOut": {
+      "value": "translateY(-12px)",
+      "type": "translate"
+    }
+  },
+  "motionCurve": {
+    "expressive": {
+      "value": "cubic-bezier(0, 0, 0.58, 1)",
+      "type": "motionCurve"
+    },
+    "productive": {
+      "value": "cubic-bezier(0, 0, 1, 1)",
+      "type": "motionCurve"
+    },
+    "expressive-exit": {
+      "value": "cubic-bezier(0.42, 0, 1, 1)",
+      "type": "motionCurve"
+    },
+    "expressive-reveal": {
+      "value": "cubic-bezier(0.7, 0, 0.25, 1)",
+      "type": "motionCurve"
+    },
+    "expressive-transform": {
+      "value": "cubic-bezier(0.42, 0, 0.58, 1)",
+      "type": "motionCurve"
+    }
+  },
+  "motionDuration": {
+    "short-1": {
+      "value": "15ms",
+      "type": "motionDuration"
+    },
+    "short-2": {
+      "value": "70ms",
+      "type": "motionDuration"
+    },
+    "short-3": {
+      "value": "100ms",
+      "type": "motionDuration"
+    },
+    "short-4": {
+      "value": "180ms",
+      "type": "motionDuration"
+    },
+    "medium-1": {
+      "value": "250ms",
+      "type": "motionDuration"
+    },
+    "medium-2": {
+      "value": "300ms",
+      "type": "motionDuration"
+    },
+    "medium-3": {
+      "value": "350ms",
+      "type": "motionDuration"
+    },
+    "long-1": {
+      "value": "400ms",
+      "type": "motionDuration"
+    },
+    "long-2": {
+      "value": "500ms",
+      "type": "motionDuration"
+    },
+    "long-3": {
+      "value": "1000ms",
+      "type": "motionDuration"
+    },
+    "long-4": {
+      "value": "20000ms",
+      "type": "motionDuration"
+    }
+  },
+  "transition": {
+    "contentMoveFade": {
+      "value": "opacity {motionDuration.short-2} {motionCurve.expressive}, transform {motionDuration.short-2} {motionCurve.expressive}",
+      "type": "transition"
+    },
+    "pageFade": {
+      "value": "opacity {motionDuration.short-1} {motionCurve.expressive}",
+      "type": "transition"
+    }
   }
 }

package/dist/tokens.css

@@ -1,9 +1,28 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Feb 2026 15:48:48 GMT
+ * Generated on Wed, 18 Feb 2026 17:08:45 GMT
  */
 
 :root {
+  --goa-motion-duration-long-4: 20000ms;
+  --goa-motion-duration-long-3: 1000ms;
+  --goa-motion-duration-long-2: 500ms;
+  --goa-motion-duration-long-1: 400ms;
+  --goa-motion-duration-medium-3: 350ms;
+  --goa-motion-duration-medium-2: 300ms;
+  --goa-motion-duration-medium-1: 250ms;
+  --goa-motion-duration-short-4: 180ms;
+  --goa-motion-duration-short-3: 100ms;
+  --goa-motion-duration-short-2: 70ms;
+  --goa-motion-duration-short-1: 15ms;
+  --goa-motion-curve-expressive-transform: cubic-bezier(0.42, 0, 0.58, 1);
+  --goa-motion-curve-expressive-reveal: cubic-bezier(0.7, 0, 0.25, 1);
+  --goa-motion-curve-expressive-exit: cubic-bezier(0.42, 0, 1, 1);
+  --goa-motion-curve-productive: cubic-bezier(0, 0, 1, 1);
+  --goa-motion-curve-expressive: cubic-bezier(0, 0, 0.58, 1);
+  --goa-translate-move-out: translateY(-12px);
+  --goa-translate-move-in: translateY(12px);
+  --goa-translate-default: translateY(0);
   --goa-input-color-background-error-hover: #f4c8c5;
   --goa-input-color-border-readonly: #e1dedd;
   --goa-letter-spacing-mobile-2xl: -1.5;
@@ -102,6 +121,8 @@
   --goa-border-radius-none: 0;
   --goa-opacity-background-loading: 90%;
   --goa-opacity-background-modal: 50%;
+  --goa-opacity-page-full: 100%;
+  --goa-opacity-page-transparent: 0;
   --goa-color-extended-prairie-text: #47372a;
   --goa-color-extended-prairie-border: #ecd386;
   --goa-color-extended-prairie-light: #fff2c8;
@@ -299,6 +320,8 @@
   --goa-accordion-heading-m-min-height: 4rem;
   --goa-accordion-heading-min-height: 3rem;
   --goa-accordion-shadow: 0px 0px 0px 0px #000000;
+  --goa-transition-page-fade: opacity var(--goa-motion-duration-short-1) var(--goa-motion-curve-expressive);
+  --goa-transition-content-move-fade: opacity var(--goa-motion-duration-short-2) var(--goa-motion-curve-expressive), transform var(--goa-motion-duration-short-2) var(--goa-motion-curve-expressive);
   --goa-border-none: var(--goa-border-width-none) solid rgba(0,0,0,0);
   --goa-input-border-radius-input: var(--goa-border-radius-m);
   --goa-input-border-radius-checkbox: var(--goa-border-radius-xs);

package/dist/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Feb 2026 15:48:47 GMT
+// Generated on Wed, 18 Feb 2026 17:08:45 GMT
 
 $goa-accordion-color-bg-heading: #ffffff;
 $goa-accordion-color-bg-content: #ffffff;
@@ -1057,6 +1057,8 @@ $goa-color-extended-prairie-default: #ffda77;
 $goa-color-extended-prairie-light: #fff2c8;
 $goa-color-extended-prairie-border: #ecd386;
 $goa-color-extended-prairie-text: #47372a;
+$goa-opacity-page-transparent: 0;
+$goa-opacity-page-full: 100%;
 $goa-opacity-background-modal: 50%;
 $goa-opacity-background-loading: 90%;
 $goa-border-radius-none: 0;
@@ -1206,4 +1208,25 @@ $goa-input-border-width-hover: 1.5px;
 $goa-input-border-width-focus: 2px;
 $goa-input-border-radius-checkbox: 0.25rem;
 $goa-input-border-radius-input: 0.5rem;
-$goa-border-none: 0px solid rgba(0,0,0,0);
+$goa-border-none: 0px solid rgba(0,0,0,0);
+$goa-translate-default: translateY(0);
+$goa-translate-move-in: translateY(12px);
+$goa-translate-move-out: translateY(-12px);
+$goa-motion-curve-expressive: cubic-bezier(0, 0, 0.58, 1);
+$goa-motion-curve-productive: cubic-bezier(0, 0, 1, 1);
+$goa-motion-curve-expressive-exit: cubic-bezier(0.42, 0, 1, 1);
+$goa-motion-curve-expressive-reveal: cubic-bezier(0.7, 0, 0.25, 1);
+$goa-motion-curve-expressive-transform: cubic-bezier(0.42, 0, 0.58, 1);
+$goa-motion-duration-short-1: 15ms;
+$goa-motion-duration-short-2: 70ms;
+$goa-motion-duration-short-3: 100ms;
+$goa-motion-duration-short-4: 180ms;
+$goa-motion-duration-medium-1: 250ms;
+$goa-motion-duration-medium-2: 300ms;
+$goa-motion-duration-medium-3: 350ms;
+$goa-motion-duration-long-1: 400ms;
+$goa-motion-duration-long-2: 500ms;
+$goa-motion-duration-long-3: 1000ms;
+$goa-motion-duration-long-4: 20000ms;
+$goa-transition-content-move-fade: opacity 70ms cubic-bezier(0, 0, 0.58, 1), transform 70ms cubic-bezier(0, 0, 0.58, 1);
+$goa-transition-page-fade: opacity 15ms cubic-bezier(0, 0, 0.58, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "./index.js",
   "repository": {
     "type": "git",