@sage/design-tokens 14.3.0 → 14.5.0

package/css/frozenproduct/all.css

@@ -147,9 +147,10 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 
   /* Light mode tokens */
@@ -1474,6 +1475,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/frozenproduct/large/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/frozenproduct/large/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 46px;
   --global-font-size-adaptive-step10: 52px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/css/frozenproduct/small/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/frozenproduct/small/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/css/marketing/all.css

@@ -147,9 +147,10 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 
   /* Light mode tokens */
@@ -1474,6 +1475,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/marketing/large/components/container.css

@@ -15,17 +15,12 @@
   --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
   --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
   --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /*   */
-  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
   --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
   --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
   --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
-  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
-  --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-active); /* Active chevron for any accordion. */
-  --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-active); /* Active label for any accordion. */
   --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
   --container-color-interactive-droptarget-bg-default: var(--modes-color-status-info-default); /* draggable drop target background color */
   --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
-  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-active);
   --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
   --container-color-standard-statusborder-bg-negative: var(--modes-color-status-negative-default);
   --container-color-standard-statusborder-bg-important: var(--modes-color-status-important-default);
@@ -52,17 +47,17 @@
   --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
   --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
   --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
+  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
   --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* Used for accordion hover backgrounds  */
-  --container-color-interactive-borderalt-hover: var(--modes-color-interactive-monochrome-default); /* For hover border on Link preview. */
-  --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-default); /* Enabled chevron for any accordion. */
-  --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-default-alt); /* Enabled label for subtle accordion. */
-  --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-default); /* Hover chevron for any accordion. */
+  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
+  --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-active); /* Active chevron for any accordion. */
+  --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-active); /* Active label for any accordion. */
   --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
   --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
-  --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-default); /* Hover label for any accordion. */
   --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
   --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
   --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
+  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-active);
   --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
   --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
   --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
@@ -79,11 +74,16 @@
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
   --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
   --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview.  */
+  --container-color-interactive-borderalt-hover: var(--modes-color-interactive-monochrome-default); /* For hover border on Link preview. */
   --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
   --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
+  --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-default); /* Enabled chevron for any accordion. */
+  --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-default-alt); /* Enabled label for subtle accordion. */
+  --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-default); /* Hover chevron for any accordion. */
   --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-with-active);
   --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-with-active);
   --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
+  --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-default); /* Hover label for any accordion. */
   --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
   --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
   --container-color-standard-border-default: var(--modes-color-generic-fg-faint);

package/css/marketing/large/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/marketing/large/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 46px;
   --global-font-size-adaptive-step10: 52px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/css/marketing/small/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/marketing/small/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/css/product/all.css

@@ -147,9 +147,10 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 
   /* Light mode tokens */
@@ -1474,6 +1475,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/product/large/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/product/large/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 46px;
   --global-font-size-adaptive-step10: 52px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/css/product/small/components/form.css

@@ -55,6 +55,9 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
+  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */

package/css/product/small/global.css

@@ -183,8 +183,9 @@
   --global-font-size-adaptive-step9: 33px;
   --global-font-size-adaptive-step10: 36px;
   --global-font-families-sage-icons: sage-icons;
-  --global-font-families-sage-headline: Sage Headline; /* Used in only in marketing contexts for some headings. */
-  --global-font-families-sage-ui: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-sage-text: Sage Text; /* Used for Headings in product and in marketing contexts. Marketing also use it for their body copy. */
+  --global-font-families-heading: Sage UI;
+  --global-font-families-subheading: Sage UI;
+  --global-font-families-body: Sage UI;
+  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
   --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
 }

package/ios/frozenproduct/large/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/frozenproduct/large/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 46px
 #define globalFontSizeAdaptiveStep10 52px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/frozenproduct/large/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/frozenproduct/small/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/ios/frozenproduct/small/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 33px
 #define globalFontSizeAdaptiveStep10 36px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/frozenproduct/small/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/ios/marketing/large/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/marketing/large/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 46px
 #define globalFontSizeAdaptiveStep10 52px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/marketing/large/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/marketing/small/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/ios/marketing/small/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 33px
 #define globalFontSizeAdaptiveStep10 36px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/marketing/small/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/ios/product/large/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/product/large/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 46px
 #define globalFontSizeAdaptiveStep10 52px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/product/large/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 20
 #define formSpaceDropdownButtonXM 20
 #define formSpaceDropdownButtonXL 20

package/ios/product/small/dark/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/ios/product/small/global.h

@@ -189,7 +189,8 @@
 #define globalFontSizeAdaptiveStep9 33px
 #define globalFontSizeAdaptiveStep10 36px
 #define globalFontFamiliesSageIcons sage-icons
-#define globalFontFamiliesSageHeadline Sage Headline
-#define globalFontFamiliesSageUi Sage UI
-#define globalFontFamiliesSageText Sage Text
+#define globalFontFamiliesHeading Sage UI
+#define globalFontFamiliesSubheading Sage UI
+#define globalFontFamiliesBody Sage UI
+#define globalFontFamiliesComponent Sage UI
 #define globalFontFamiliesOther Open Sans

package/ios/product/small/light/components/form.h

@@ -20,6 +20,9 @@
 #define formSpaceCheckradioYS 3
 #define formSpaceCheckradioYM 2
 #define formSpaceCheckradioYL 4
+#define formSpaceDatepickerPrS 2
+#define formSpaceDatepickerPrM 6
+#define formSpaceDatepickerPrL 10
 #define formSpaceDropdownButtonXS 16
 #define formSpaceDropdownButtonXM 16
 #define formSpaceDropdownButtonXL 16

package/js/common/frozenproduct/large/dark/components/form.d.ts

@@ -50,6 +50,13 @@ declare const tokens: {
           L: DesignToken;
         };
       };
+      datepicker: {
+        pr: {
+          S: DesignToken;
+          M: DesignToken;
+          L: DesignToken;
+        };
+      };
       dropdown: {
         button: {
           x: {

package/js/common/frozenproduct/large/dark/components/form.js

@@ -192,6 +192,55 @@ module.exports = {
           },
         },
       },
+      datepicker: {
+        pr: {
+          S: {
+            $type: "spacing",
+            $value: 2,
+            $description: "right padding on small date picker input",
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "spacing",
+              $value: "{global.space.micro.XS}",
+              $description: "right padding on small date picker input",
+            },
+            name: "formSpaceDatepickerPrS",
+            attributes: {},
+            path: ["form", "space", "datepicker", "pr", "S"],
+          },
+          M: {
+            $type: "spacing",
+            $value: 6,
+            $description: "right padding on medium date picker input",
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "spacing",
+              $value: "{global.space.micro.M}",
+              $description: "right padding on medium date picker input",
+            },
+            name: "formSpaceDatepickerPrM",
+            attributes: {},
+            path: ["form", "space", "datepicker", "pr", "M"],
+          },
+          L: {
+            $type: "spacing",
+            $value: 10,
+            $description: "right padding on large date picker input",
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "spacing",
+              $value: "{global.space.micro.XL}",
+              $description: "right padding on large date picker input",
+            },
+            name: "formSpaceDatepickerPrL",
+            attributes: {},
+            path: ["form", "space", "datepicker", "pr", "L"],
+          },
+        },
+      },
       dropdown: {
         button: {
           x: {

package/js/common/frozenproduct/large/global.d.ts

@@ -303,9 +303,10 @@ declare const tokens: {
     };
     fontFamilies: {
       "sage-icons": DesignToken;
-      "sage-headline": DesignToken;
-      "sage-ui": DesignToken;
-      "sage-text": DesignToken;
+      heading: DesignToken;
+      subheading: DesignToken;
+      body: DesignToken;
+      component: DesignToken;
       other: DesignToken;
     };
   };