@abgov/design-tokens 1.4.3 → 1.5.1

package/dist/tokens.scss

@@ -1,8 +1,7 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Nov 2024 22:14:51 GMT
+// Generated on Fri, 24 Jan 2025 16:30:35 GMT
 
-$goa-letter-spacing-button: 0.0125rem;
 $goa-font-weight-bold: 700;
 $goa-font-weight-medium: 500;
 $goa-font-weight-regular: 400;
@@ -37,6 +36,12 @@ $goa-shadow-100: 0px 1px 0px 0px #1A1A1A12;
 $goa-icon-size-l: 1.5rem;
 $goa-icon-size-m: 1.25rem;
 $goa-icon-size-s: 1rem;
+$goa-icon-size-6: 2.5rem;
+$goa-icon-size-5: 2rem;
+$goa-icon-size-4: 1.5rem;
+$goa-icon-size-3: 1.25rem;
+$goa-icon-size-2: 1.125rem;
+$goa-icon-size-1: 1rem;
 $goa-space-4xl: 8rem;
 $goa-space-3xl: 4rem;
 $goa-space-2xl: 3rem;
@@ -48,16 +53,19 @@ $goa-space-xs: 0.5rem;
 $goa-space-2xs: 0.25rem;
 $goa-space-3xs: 0.125rem;
 $goa-space-none: 0rem;
+$goa-border-width-xl: 4px;
 $goa-border-width-l: 3px;
 $goa-border-width-m: 2px;
 $goa-border-width-s: 1px;
 $goa-border-width-xs: 0.7px;
 $goa-border-width-2xs: 0.5px;
+$goa-border-width-none: 0px;
 $goa-border-radius-3xl: 0.75rem;
 $goa-border-radius-2xl: 0.625rem;
 $goa-border-radius-xl: 0.5rem;
 $goa-border-radius-l: 0.375rem;
 $goa-border-radius-m: 0.25rem;
+$goa-border-radius-s: 0.125rem;
 $goa-border-radius-none: 0;
 $goa-opacity-background-loading: 90%;
 $goa-opacity-background-modal: 50%;
@@ -91,11 +99,11 @@ $goa-color-greyscale-150: #e7e7e7;
 $goa-color-greyscale-100: #f1f1f1;
 $goa-color-greyscale-50: #f8f8f8;
 $goa-color-critical-default: #171d23;
-$goa-color-success-background: #eef9f3;
+$goa-color-success-background: #f2fffa;
 $goa-color-success-dark: #00563a;
 $goa-color-success-light: #cce4dc;
 $goa-color-success-default: #006f4c;
-$goa-color-emergency-background: #fff1f2;
+$goa-color-emergency-background: #fff6f6;
 $goa-color-emergency-dark: #a91a10;
 $goa-color-emergency-light: #fbd1ce;
 $goa-color-emergency-default: #da291c;
@@ -119,27 +127,69 @@ $goa-color-interactive-error: #ec040b;
 $goa-color-interactive-disabled: #80b7e1;
 $goa-color-interactive-hover: #004f84;
 $goa-color-interactive-default: #0070c4;
-$goa-side-menu-parent-color-bg-selected: #CEDFEE;
-$goa-side-menu-parent-color-bg-hover: #CEDFEE;
-$goa-side-menu-child-border-width: 4px;
+$goa-tooltip-max-width: 400px;
+$goa-tab-color-bg-selected: transparent;
+$goa-side-menu-child-color-bg: none;
+$goa-side-menu-width: 256px;
+$goa-side-menu-sub-item-color-bg: none;
+$goa-side-menu-parent-color-bg-selected: #cedfee;
+$goa-side-menu-parent-color-bg-hover: #cedfee;
+$goa-side-menu-color-bg-menu-item-hover: #cedfee;
+$goa-side-menu-color-bg-menu-item-current: #cedfee;
+$goa-scrollable-padding-mobile: 1.5rem;
+$goa-scrollable-padding-desktop: 2rem;
+$goa-radio-border-radius: 50%;
+$goa-radio-border-checked-error-hover: 7px solid #ba0000;
+$goa-radio-border-checked-error-disabled: 7px solid #f58185;
+$goa-circular-progress-color-background: rgba(255, 255, 255, 0.9);
+$goa-popover-shadow: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25));
+$goa-modal-shadow: 6px 6px 6px 6px rgba(0,0,0,0.16);
+$goa-text-input-transition: box-shadow 0.05s ease-in;
+$goa-text-input-color-icon: ;
+$goa-text-input-size-icon: ;
+$goa-app-header-min-width-service-name: 8rem;
+$goa-app-header-max-width-service-name: 28rem;
+$goa-stepper-line-thickness: 4px;
+$goa-step-size: 2.5rem;
+$goa-step-gap-small-screen: 0px;
+$goa-footer-meta-links-gap-small-screen: 20px;
+$goa-footer-size-logo-tablet: 155px;
+$goa-footer-size-logo-mobile: 133px;
+$goa-footer-size-logo-desktop: 155px;
+$goa-dropdown-transition: box-shadow 0.05s ease-in;
+$goa-dropdown-item-color-text-disabled: ;
+$goa-dropdown-item-color-bg-disabled: ;
 $goa-drawer-transition-time: 200ms;
-$goa-drawer-right-shadow: -4px 0px 12px 0px rgba(0,0,0,0.2);
 $goa-drawer-left-shadow: 4px 0px 12px 0px rgba(0,0,0,0.2);
 $goa-drawer-bottom-shadow: 0px -4px 12px 0px rgba(0,0,0,0.2);
 $goa-drawer-overlay-color: rgba(0,0,0,0.3);
+$goa-details-text-decoration: underline;
+$goa-details-padding-top: 6px;
+$goa-details-content-padding-left: 19px;
+$goa-details-content-margin-left: 17px;
+$goa-date-input-day-color-bg: transparent;
+$goa-date-input-day-size: 2.5rem;
+$goa-date-input-calendar-width: 280px;
+$goa-checkbox-border-radius: 2px;
 $goa-callout-emergency-border-color: none;
 $goa-callout-success-border-color: none;
 $goa-callout-warning-border-color: none;
 $goa-callout-info-border-color: none;
 $goa-callout-l-border-width: 0px;
 $goa-callout-m-border-width: 0px;
-$goa-button-height-compact: 32px;
-$goa-button-height: 42px;
+$goa-button-letter-spacing: 0.0125rem;
+$goa-button-tertiary-color-bg: none;
+$goa-button-secondary-inverse-color-bg: none;
+$goa-button-compact-gap: 0.375rem;
+$goa-button-height-start: 3.25rem;
+$goa-button-height-compact: 2rem;
+$goa-button-height: 2.625rem;
+$goa-badge-height: 22px;
 $goa-accordion-shadow: 0px 0px 0px 0px #000000;
+$goa-border-none: $goa-border-width-none solid rgba(0,0,0,0);
 $goa-typography-number-l: $goa-font-weight-medium $goa-font-size-7/$goa-line-height-4 $goa-font-family-number;
 $goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
 $goa-typography-number-s: $goa-font-weight-medium $goa-font-size-3/$goa-line-height-2 $goa-font-family-number;
-$goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
 $goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
 $goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
 $goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
@@ -153,18 +203,324 @@ $goa-color-text-disabled: $goa-color-greyscale-700;
 $goa-color-text-light: $goa-color-greyscale-white;
 $goa-color-text-secondary: $goa-color-greyscale-700;
 $goa-color-text-default: $goa-color-greyscale-black;
+$goa-tooltip-padding: 6px $goa-space-m 10px $goa-space-m;
+$goa-tooltip-gap: $goa-space-2xs;
+$goa-tooltip-color-bg: $goa-color-greyscale-700;
+$goa-tooltip-border-radius: $goa-border-radius-m;
+$goa-tooltip-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-text-area-padding: 0.625rem $goa-space-s;
+$goa-text-area-color-text-counter-error: $goa-color-interactive-error;
+$goa-text-area-color-bg-disabled: $goa-color-greyscale-100;
+$goa-text-area-color-bg: $goa-color-greyscale-white;
+$goa-text-area-border-radius: $goa-border-radius-m;
+$goa-text-area-border-hover: inset 0 0 0 $goa-border-width-m $goa-color-interactive-hover;
+$goa-text-area-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-focus;
+$goa-text-area-border-error: inset 0 0 0 $goa-border-width-m $goa-color-interactive-error;
+$goa-text-area-border-disabled: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-200;
+$goa-text-area-border: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-700;
+$goa-tabs-gap-small-screen: $goa-space-2xs;
+$goa-tabs-gap: $goa-space-xl;
+$goa-tabs-bottom-border: $goa-border-width-s solid $goa-color-greyscale-200;
+$goa-tab-padding-mobile: 6px $goa-space-m;
+$goa-tab-padding: $goa-space-xs $goa-space-m;
+$goa-tab-color-bg-selected-small-screen: $goa-color-info-background;
+$goa-tab-border-selected: $goa-border-width-xl solid $goa-color-interactive-default;
+$goa-tab-border-not-selected: $goa-border-width-xl solid transparent;
+$goa-tab-border-hover: $goa-border-width-xl solid $goa-color-greyscale-200;
+$goa-tab-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-goa-table-header-padding: $goa-space-m;
 $goa-table-color-border-heading: $goa-color-greyscale-600;
+$goa-skeleton-loading-color-bg: $goa-color-greyscale-100;
+$goa-side-menu-child-border-width: $goa-border-width-xl;
 $goa-side-menu-child-color-bg-selected: $goa-color-info-background;
 $goa-side-menu-child-color-bg-hover: $goa-color-info-background;
-$goa-side-menu-group-border-radius: $goa-border-radius-none;
-$goa-side-menu-parent-padding: $goa-space-xs $goa-space-m $goa-space-xs $goa-space-xl;
-$goa-side-menu-sub-group-padding: $goa-space-none $goa-space-none $goa-space-none $goa-space-none;
+$goa-side-menu-child-border-left-selected: $goa-border-width-xl solid $goa-color-interactive-disabled;
+$goa-side-menu-child-border-left-hover: $goa-border-width-xl solid $goa-color-greyscale-200;
+$goa-side-menu-child-border-left: $goa-border-width-xl solid $goa-color-greyscale-100;
 $goa-side-menu-group-padding: $goa-space-none;
 $goa-side-menu-group-color-bg: $goa-color-greyscale-white;
+$goa-side-menu-group-border-radius: $goa-border-radius-none;
+$goa-side-menu-sub-item-color-bg-hover: $goa-color-info-background;
+$goa-side-menu-sub-item-color-bg-current: $goa-color-info-background;
+$goa-side-menu-sub-item-border-left-current: $goa-border-width-xl solid $goa-color-interactive-disabled;
+$goa-side-menu-sub-item-border-left-hover: $goa-border-width-xl solid $goa-color-greyscale-200;
+$goa-side-menu-sub-item-border-left: $goa-border-width-xl solid $goa-color-greyscale-100;
+$goa-side-menu-sub-group-padding: $goa-space-none $goa-space-none $goa-space-none $goa-space-none;
+$goa-side-menu-parent-padding: $goa-space-xs $goa-space-s 10px $goa-space-xl;
+$goa-side-menu-padding-child: $goa-space-xs $goa-space-s 10px $goa-space-m;
+$goa-side-menu-padding-item: $goa-space-xs $goa-space-s 10px $goa-space-xl;
+$goa-side-menu-padding: $goa-space-m $goa-space-none $goa-space-l $goa-space-none;
+$goa-side-menu-item-focus-border: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-side-menu-items-gap: $goa-space-none;
+$goa-side-menu-icon-size: $goa-icon-size-l;
+$goa-side-menu-heading-padding: $goa-space-s $goa-space-s $goa-space-xs $goa-space-l;
+$goa-side-menu-heading-margin: $goa-space-none 0 0 0;
+$goa-side-menu-heading-icon-gap: $goa-space-xs;
+$goa-side-menu-heading-color-bg: $goa-color-greyscale-100;
+$goa-side-menu-heading-border: $goa-border-width-m solid $goa-color-greyscale-200;
+$goa-side-menu-color-bg: $goa-color-greyscale-white;
+$goa-side-menu-border-right: $goa-border-width-s solid $goa-color-greyscale-200;
+$goa-radio-size: $goa-space-l;
+$goa-radio-label-color-disabled: $goa-color-greyscale-500;
+$goa-radio-group-gap-vertical: $goa-space-m;
+$goa-radio-group-gap-horizontal: $goa-space-l;
+$goa-radio-color-bg: $goa-color-greyscale-white;
+$goa-radio-border-hover: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-radio-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-radio-border-error-hover: $goa-border-width-m solid #ba0000;
+$goa-radio-border-error-disabled: $goa-border-width-m solid #f58185;
+$goa-radio-border-error: $goa-border-width-m solid $goa-color-interactive-error;
+$goa-radio-border-disabled: $goa-border-width-s solid $goa-color-greyscale-400;
+$goa-radio-border-checked-hover: 7px solid $goa-color-interactive-hover;
+$goa-radio-border-checked-error: 7px solid $goa-color-interactive-error;
+$goa-radio-border-checked-disabled: 7px solid $goa-color-interactive-disabled;
+$goa-radio-border-checked: 7px solid $goa-color-interactive-default;
+$goa-radio-border: $goa-border-width-s solid $goa-color-greyscale-700;
+$goa-circular-progress-small-margin-top: $goa-space-l;
+$goa-circular-progress-large-margin-top: $goa-space-xl;
+$goa-popover-padding: $goa-space-s;
+$goa-popover-color-bg: $goa-color-greyscale-white;
+$goa-popover-border-radius: $goa-border-radius-m;
+$goa-popover-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-notification-banner-custom-color-icon: $goa-color-greyscale-white;
+$goa-notification-banner-custom-color-bg: $goa-color-info-default;
+$goa-notification-banner-size-icon: $goa-icon-size-4;
+$goa-notification-banner-padding-tb: $goa-space-l;
+$goa-notification-banner-padding-lr-small-screen: $goa-space-m;
+$goa-notification-banner-padding-lr-medium-screen: $goa-space-l;
+$goa-notification-banner-padding-lr-large-screen: $goa-space-3xl;
+$goa-notification-banner-information-color-icon: $goa-color-greyscale-white;
+$goa-notification-banner-information-color-bg: $goa-color-info-default;
+$goa-notification-banner-important-color-icon: $goa-color-greyscale-black;
+$goa-notification-banner-important-color-bg: $goa-color-warning-default;
+$goa-notification-banner-gap: $goa-space-m;
+$goa-notification-banner-event-color-icon: $goa-color-greyscale-white;
+$goa-notification-banner-event-color-bg: $goa-color-info-default;
+$goa-notification-banner-emergency-color-icon: $goa-color-greyscale-white;
+$goa-notification-banner-emergency-color-bg: $goa-color-emergency-default;
+$goa-modal-overlay-opacity: $goa-opacity-background-modal;
+$goa-modal-padding-small-screen: $goa-space-l;
+$goa-modal-padding: $goa-space-xl;
+$goa-modal-overlay-color: $goa-color-greyscale-black;
+$goa-modal-content-gap-small-screen: $goa-space-m;
+$goa-modal-content-gap: $goa-space-l;
+$goa-modal-callout-bar-padding-small-screen: $goa-space-s $goa-space-s $goa-space-s $goa-space-l;
+$goa-modal-callout-bar-padding: $goa-space-xl;
+$goa-modal-border-radius: $goa-border-radius-m;
+$goa-microsite-header-typography-version-number: $goa-font-size-1;
+$goa-microsite-header-padding-small-screen: $goa-space-2xs $goa-space-m;
+$goa-microsite-header-padding-medium-screen: $goa-space-2xs $goa-space-xl;
+$goa-microsite-header-padding-large-screen: $goa-space-2xs $goa-space-3xl;
+$goa-microsite-header-link-focus-border: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-microsite-header-gap: $goa-space-m;
+$goa-microsite-header-color-links-hover: $goa-color-interactive-hover;
+$goa-microsite-header-color-links: $goa-color-interactive-default;
+$goa-microsite-header-color-bg: $goa-color-greyscale-100;
+$goa-microsite-header-beta-badge-color: $goa-color-brand-default;
+$goa-microsite-header-alpha-badge-color: $goa-color-warning-default;
+$goa-text-input-space-btw-icon-text: $goa-space-xs;
+$goa-text-input-padding-lr: $goa-space-s;
+$goa-text-input-lt-content-color-bg: $goa-color-greyscale-100;
+$goa-text-input-color-icon-disabled: $goa-color-greyscale-500;
+$goa-text-input-color-bg-disabled: $goa-color-greyscale-100;
+$goa-text-input-color-bg: $goa-color-greyscale-white;
+$goa-text-input-border-radius: $goa-border-radius-m;
+$goa-text-input-border-hover: inset 0 0 0 $goa-border-width-m $goa-color-interactive-hover;
+$goa-text-input-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-focus;
+$goa-text-input-border-error: inset 0 0 0 $goa-border-width-m $goa-color-interactive-error;
+$goa-text-input-border-disabled: 1px solid $goa-color-greyscale-200;
+$goa-text-input-border: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-700;
+$goa-icon-button-medium-padding: $goa-space-2xs;
+$goa-icon-button-large-padding: $goa-space-xs;
+$goa-icon-button-medium-border-radius: $goa-border-radius-m;
+$goa-icon-button-large-border-radius: $goa-border-radius-xl;
+$goa-icon-button-destructive-disabled-color: $goa-color-interactive-error-disabled;
+$goa-icon-button-destructive-hover-color-bg: $goa-color-emergency-light;
+$goa-icon-button-destructive-color: $goa-color-emergency-default;
+$goa-icon-button-dark-disabled-color-bg: $goa-color-greyscale-500;
+$goa-icon-button-dark-hover-color-bg: $goa-color-greyscale-100;
+$goa-icon-button-dark-color: $goa-color-greyscale-black;
+$goa-icon-button-light-disabled-color: $goa-color-greyscale-500;
+$goa-icon-button-light-hover-color-bg: $goa-color-greyscale-700;
+$goa-icon-button-light-color: $goa-color-greyscale-white;
+$goa-icon-button-default-disabled-color: $goa-color-interactive-disabled;
+$goa-icon-button-default-hover-color-bg: $goa-color-greyscale-100;
+$goa-icon-button-default-focus-color: $goa-color-interactive-hover;
+$goa-icon-button-default-hover-color: $goa-color-interactive-hover;
+$goa-icon-button-default-color: $goa-color-interactive-default;
+$goa-hero-banner-content-gap: $goa-space-l 0 0;
+$goa-hero-banner-mobile-padding: $goa-space-xl 0;
+$goa-hero-banner-padding: $goa-space-2xl 0;
+$goa-app-header-space-btw-service-name-nav-items-mobile: $goa-space-l;
+$goa-app-header-space-btw-logo-service-name-mobile: $goa-space-xs;
+$goa-app-header-space-btw-logo-service-name: $goa-space-m;
+$goa-app-header-size-logo-mobile: $goa-space-l;
+$goa-app-header-size-logo: $goa-space-xl;
+$goa-app-header-padding-tablet: $goa-space-xl;
+$goa-app-header-padding-secondary-nav-item-in-menu: 9px $goa-space-m 9px $goa-space-xl;
+$goa-app-header-padding-secondary-nav-item-in-menu-mobile: 9px $goa-space-m 9px 80px;
+$goa-app-header-padding-nav-item-in-menu: 9px $goa-space-m;
+$goa-app-header-padding-nav-item-with-children: $goa-space-m $goa-space-s $goa-space-s;
+$goa-app-header-padding-nav-item: $goa-space-m $goa-space-s;
+$goa-app-header-padding-mobile: $goa-space-m;
+$goa-app-header-padding-menu-button: $goa-space-m $goa-space-s;
+$goa-app-header-padding-logo-mobile: $goa-space-s $goa-space-m;
+$goa-app-header-padding-logo: 14px $goa-space-xl $goa-space-m 0px;
+$goa-app-header-padding-link-item: $goa-space-m;
+$goa-app-header-padding-desktop: $goa-space-3xl;
+$goa-app-header-color-text-nav-item-hover: $goa-color-interactive-hover;
+$goa-app-header-color-text-nav-item-focus: $goa-color-interactive-hover;
+$goa-app-header-color-menu-button-hover: $goa-color-interactive-hover;
+$goa-app-header-color-menu-button-focus: $goa-color-interactive-hover;
+$goa-app-header-color-bg-nav-item-in-menu-current-hover: $goa-color-interactive-hover;
+$goa-app-header-color-bg-nav-item-in-menu-current: $goa-color-interactive-default;
+$goa-app-header-color-bg-nav-item-hover: $goa-color-greyscale-white;
+$goa-app-header-color-bg-nav-item-focus: $goa-color-greyscale-white;
+$goa-app-header-color-bg-nav-item-current: $goa-color-greyscale-white;
+$goa-app-header-color-bg-nav-item: $goa-color-greyscale-white;
+$goa-app-header-color-bg-menu-button-hover: $goa-color-greyscale-100;
+$goa-app-header-color-bg-menu-button-focus: $goa-color-greyscale-100;
+$goa-app-header-color-bg: $goa-color-greyscale-white;
+$goa-app-header-border-top-menu-item: inset 0 1px 0 0 $goa-color-greyscale-200;
+$goa-app-header-border-nav-item-hover: $goa-space-2xs solid $goa-color-interactive-hover;
+$goa-app-header-border-nav-item-focus: $goa-space-2xs solid $goa-color-interactive-hover;
+$goa-app-header-border-nav-item-default: $goa-space-2xs solid transparent;
+$goa-app-header-border-nav-item-current-focus: $goa-space-2xs solid $goa-color-interactive-hover;
+$goa-app-header-border-nav-item-current: $goa-space-2xs solid $goa-color-interactive-default;
+$goa-app-header-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-app-header-border-bottom-menu-item: inset 0 -1px 0 0 $goa-color-greyscale-200;
+$goa-app-header-border-bottom: $goa-border-width-s solid $goa-color-greyscale-200;
+$goa-stepper-color-line-active: $goa-color-interactive-default;
+$goa-stepper-color-line: $goa-color-greyscale-200;
+$goa-step-padding-vertical: $goa-space-2xs $goa-space-l;
+$goa-step-padding: $goa-space-l;
+$goa-step-color-border-incomplete: $goa-color-interactive-default;
+$goa-step-color-border-complete: $goa-color-interactive-default;
+$goa-step-color-border-active: $goa-color-interactive-default;
+$goa-step-color-border: $goa-color-greyscale-400;
+$goa-step-color-bg-incomplete: $goa-color-greyscale-white;
+$goa-step-color-bg-complete: $goa-color-interactive-default;
+$goa-step-color-bg-active: $goa-color-greyscale-white;
+$goa-step-color-bg: $goa-color-greyscale-white;
+$goa-step-border: $goa-border-width-xl solid $goa-step-color-border-active;
+$goa-form-item-optional-label-color: $goa-color-greyscale-700;
+$goa-form-item-message-margin-top: $goa-space-s;
+$goa-form-item-message-gap: $goa-space-2xs;
+$goa-form-item-label-padding-bottom: $goa-space-s;
+$goa-form-item-label-large-padding-bottom: $goa-space-m;
+$goa-form-item-error-message-color: $goa-color-interactive-error;
+$goa-footer-meta-links-gap: $goa-space-l;
+$goa-footer-typography-small-screen: $goa-font-size-3;
+$goa-footer-padding-small-screen: $goa-space-xl $goa-space-m;
+$goa-footer-padding-medium-screen: $goa-space-2xl $goa-space-xl;
+$goa-footer-padding-large-screen: $goa-space-2xl $goa-space-3xl;
+$goa-footer-link-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-footer-color-links-hover: $goa-color-greyscale-700;
+$goa-footer-color-bg: $goa-color-greyscale-100;
+$goa-footer-border-top: $goa-border-width-m solid $goa-color-greyscale-200;
+$goa-footer-border-bottom: 1rem solid $goa-color-brand-default;
+$goa-file-upload-text-gap: $goa-space-m;
+$goa-file-upload-padding: $goa-space-xl;
+$goa-file-upload-instruction-color-hover: $goa-color-interactive-hover;
+$goa-file-upload-instruction-color-focus: $goa-color-interactive-hover;
+$goa-file-upload-instruction-color-drag: $goa-color-interactive-hover;
+$goa-file-upload-instruction-color-active: $goa-color-interactive-hover;
+$goa-file-upload-instruction-color: $goa-color-interactive-default;
+$goa-file-upload-help-text-color: $goa-color-greyscale-700;
+$goa-file-upload-color-bg-hover: $goa-color-greyscale-100;
+$goa-file-upload-color-bg-focus: $goa-color-greyscale-100;
+$goa-file-upload-color-bg-drag: $goa-color-info-background;
+$goa-file-upload-color-bg-active: $goa-color-info-background;
+$goa-file-upload-color-bg: $goa-color-info-background;
+$goa-file-upload-border-radius: $goa-border-radius-m;
+$goa-file-upload-border-hover: $goa-border-width-m dashed $goa-color-interactive-hover;
+$goa-file-upload-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-focus;
+$goa-file-upload-border-drag: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-file-upload-border-active: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-file-upload-border: $goa-border-width-m dashed $goa-color-interactive-default;
+$goa-dropdown-space-icon-text: $goa-space-s;
+$goa-dropdown-padding-lr: $goa-space-s;
+$goa-dropdown-item-color-text-selected-hover: $goa-color-greyscale-white;
+$goa-dropdown-item-color-text-selected: $goa-color-greyscale-white;
+$goa-dropdown-item-color-text-hover: $goa-color-interactive-hover;
+$goa-dropdown-item-color-bg-selected-hover: $goa-color-interactive-hover;
+$goa-dropdown-item-color-bg-selected: $goa-color-interactive-default;
+$goa-dropdown-item-color-bg-hover: $goa-color-greyscale-100;
+$goa-dropdown-item-color-bg: $goa-color-greyscale-white;
+$goa-dropdown-color-bg-disabled: $goa-color-greyscale-100;
+$goa-dropdown-color-bg: $goa-color-greyscale-white;
+$goa-dropdown-border-radius: $goa-border-radius-m;
+$goa-dropdown-border-hover: inset 0 0 0 $goa-border-width-m $goa-color-interactive-hover;
+$goa-dropdown-border-focus: 0 0 0 $goa-border-width-l $goa-color-interactive-focus;
+$goa-dropdown-border-error: inset 0 0 0 $goa-border-width-m $goa-color-interactive-error;
+$goa-dropdown-border-disabled: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-200;
+$goa-dropdown-border: inset 0 0 0 $goa-border-width-s $goa-color-greyscale-700;
+$goa-drawer-right-shadow: inset -4 0 12 0 $goa-border-width-s rgba(0,0,0,0.2);
 $goa-drawer-padding: $goa-space-m;
-$goa-container-padding: $goa-space-l;
+$goa-divider-color: $goa-color-greyscale-200;
+$goa-details-padding-right: $goa-space-s;
+$goa-details-padding-left: $goa-space-xs;
+$goa-details-padding-bottom: $goa-space-xs;
+$goa-details-margin-bottom: $goa-space-xs;
+$goa-details-focus-border: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-details-content-padding-top: $goa-space-s;
+$goa-details-content-padding-right: $goa-space-m;
+$goa-details-content-padding-bottom: $goa-space-s;
+$goa-details-content-left-border: 4px solid $goa-color-greyscale-200;
+$goa-details-color-text-hover: $goa-color-interactive-hover;
+$goa-details-color-text: $goa-color-interactive-default;
+$goa-details-color-bg-hover: $goa-color-greyscale-100;
+$goa-details-border-radius: $goa-border-radius-m;
+$goa-date-input-day-color-bg-selected-hover: $goa-color-interactive-hover;
+$goa-date-input-day-color-bg-selected: $goa-color-interactive-default;
+$goa-date-input-day-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-date-input-day-color-bg-hover: $goa-color-greyscale-200;
+$goa-date-input-day-border-radius: $goa-border-radius-m;
+$goa-date-input-day-underline-today-selected: $goa-border-width-l solid $goa-color-greyscale-white;
+$goa-date-input-day-underline-today-width: $goa-space-l;
+$goa-date-input-day-underline-today: $goa-border-width-l solid $goa-color-interactive-default;
+$goa-date-input-day-of-week-margin: $goa-space-xs;
+$goa-date-input-calendar-border-radius: $goa-border-radius-m;
+$goa-container-important-border: $goa-border-width-s solid $goa-color-warning-default;
+$goa-container-important-heading-bg-color: $goa-color-warning-default;
+$goa-container-important-bg-color: $goa-color-warning-background;
+$goa-container-success-border: $goa-border-width-s solid $goa-color-success-default;
+$goa-container-success-heading-bg-color: $goa-color-success-default;
+$goa-container-success-bg-color: $goa-color-success-background;
+$goa-container-error-border: $goa-border-width-s solid $goa-color-emergency-default;
+$goa-container-error-heading-bg-color: $goa-color-emergency-default;
+$goa-container-error-bg-color: $goa-color-emergency-background;
+$goa-container-info-border: $goa-border-width-s solid $goa-color-info-default;
+$goa-container-info-heading-bg-color: $goa-color-info-default;
+$goa-container-info-bg-color: $goa-color-info-background;
+$goa-container-non-interactive-border: $goa-border-width-s solid $goa-color-greyscale-200;
+$goa-container-non-interactive-heading-bg-color: $goa-color-greyscale-100;
+$goa-container-non-interactive-bg-color: $goa-color-greyscale-100;
+$goa-container-interactive-border: $goa-border-width-s solid $goa-color-brand-default;
+$goa-container-interactive-heading-bg-color: $goa-color-brand-default;
+$goa-container-interactive-bg-color: $goa-color-greyscale-white;
+$goa-container-accent-thin-height: $goa-space-xs;
+$goa-container-accent-thick-height: $goa-space-m;
+$goa-container-heading-gap: $goa-space-l;
+$goa-container-heading-padding: $goa-space-xs;
+$goa-container-padding-compact: $goa-space-m;
+$goa-container-padding: $goa-space-xl;
 $goa-container-border: $goa-border-width-s solid $goa-color-greyscale-200;
 $goa-container-border-radius: $goa-border-radius-m;
+$goa-checkbox-size: $goa-space-l;
+$goa-checkbox-gap: $goa-space-xs;
+$goa-checkbox-color-label-disabled: $goa-color-greyscale-500;
+$goa-checkbox-color-bg-checked-hover: $goa-color-interactive-hover;
+$goa-checkbox-color-bg-checked-error: $goa-color-interactive-error;
+$goa-checkbox-color-bg-checked-disabled: $goa-color-interactive-disabled;
+$goa-checkbox-color-bg-checked: $goa-color-interactive-default;
+$goa-checkbox-color-bg: $goa-color-greyscale-white;
+$goa-checkbox-border-hover: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-checkbox-border-focus: $goa-border-width-l solid $goa-color-interactive-focus;
+$goa-checkbox-border-error: $goa-border-width-m solid $goa-color-interactive-error;
+$goa-checkbox-border-disabled-error: $goa-border-width-m solid #F58185;
+$goa-checkbox-border-disabled: $goa-border-width-s solid $goa-color-greyscale-400;
+$goa-checkbox-border: $goa-border-width-s solid $goa-color-greyscale-700;
 $goa-callout-event-icon-color: $goa-color-greyscale-white;
 $goa-callout-emergency-icon-color: $goa-color-greyscale-white;
 $goa-callout-emergency-color-bg-statusbar: $goa-color-emergency-default;
@@ -187,9 +543,80 @@ $goa-callout-l-content-gap: $goa-space-m;
 $goa-callout-l-content-padding: $goa-space-l;
 $goa-callout-l-icon-size: $goa-icon-size-m;
 $goa-callout-border-radius: $goa-border-radius-none;
+$goa-button-group-compact-gap: $goa-space-s;
+$goa-button-group-gap: $goa-space-m;
+$goa-button-tertiary-inverse-focus-color-text: $goa-color-interactive-hover;
+$goa-button-tertiary-inverse-hover-color-text: $goa-color-interactive-hover;
+$goa-button-tertiary-inverse-color-text: $goa-color-greyscale-white;
+$goa-button-tertiary-destructive-focus-color-text: $goa-color-emergency-dark;
+$goa-button-tertiary-destructive-hover-color-text: $goa-color-emergency-dark;
+$goa-button-tertiary-destructive-color-text: $goa-color-emergency-default;
+$goa-button-tertiary-focus-color-text: $goa-color-interactive-hover;
+$goa-button-tertiary-focus-color-bg: $goa-color-greyscale-100;
+$goa-button-tertiary-hover-color-text: $goa-color-interactive-hover;
+$goa-button-tertiary-hover-color-bg: $goa-color-greyscale-100;
+$goa-button-tertiary-border: $goa-border-width-none solid rgba(0,0,0,0);
+$goa-button-tertiary-color-text: $goa-color-interactive-default;
+$goa-button-tertiary-color-bg-mobile: $goa-color-greyscale-100;
+$goa-button-secondary-inverse-focus-border: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-button-secondary-inverse-hover-border: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-button-secondary-inverse-border: $goa-border-width-m solid $goa-color-greyscale-white;
+$goa-button-secondary-destructive-focus-border: $goa-border-width-m solid $goa-color-emergency-dark;
+$goa-button-secondary-inverse-focus-color-text: $goa-color-interactive-hover;
+$goa-button-secondary-inverse-hover-color-text: $goa-color-interactive-hover;
+$goa-button-secondary-inverse-color-text: $goa-color-greyscale-white;
+$goa-button-secondary-destructive-focus-color-text: $goa-color-emergency-dark;
+$goa-button-secondary-destructive-hover-color-text: $goa-color-emergency-dark;
+$goa-button-secondary-destructive-hover-border: $goa-border-width-m solid $goa-color-emergency-dark;
+$goa-button-secondary-destructive-border: $goa-border-width-m solid $goa-color-emergency-default;
+$goa-button-secondary-destructive-color-text: $goa-color-emergency-default;
+$goa-button-secondary-focus-border: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-button-secondary-focus-color-text: $goa-color-interactive-hover;
+$goa-button-secondary-focus-color-bg: $goa-color-greyscale-100;
+$goa-button-secondary-hover-border: $goa-border-width-m solid $goa-color-interactive-hover;
+$goa-button-secondary-hover-color-text: $goa-color-interactive-hover;
+$goa-button-secondary-hover-color-bg: $goa-color-greyscale-100;
+$goa-button-secondary-border: $goa-border-width-m solid $goa-color-interactive-default;
+$goa-button-secondary-color-text: $goa-color-interactive-default;
+$goa-button-secondary-color-bg: $goa-color-greyscale-white;
+$goa-button-primary-inverse-focus-color-bg: $goa-color-interactive-hover;
+$goa-button-primary-inverse-hover-color-text: $goa-color-greyscale-white;
+$goa-button-primary-inverse-hover-color-bg: $goa-color-interactive-hover;
+$goa-button-primary-inverse-color-bg: $goa-color-greyscale-white;
+$goa-button-primary-destructive-focus-color-bg: $goa-color-emergency-dark;
+$goa-button-primary-destructive-hover-color-bg: $goa-color-emergency-dark;
+$goa-button-primary-destructive-color-bg: $goa-color-emergency-default;
+$goa-button-primary-focus-border: $goa-border-width-none solid rgba(0,0,0,0);
+$goa-button-primary-focus-color-bg: $goa-color-interactive-hover;
+$goa-button-primary-hover-border: $goa-border-width-none solid rgba(0,0,0,0);
+$goa-button-primary-hover-color-bg: $goa-color-interactive-hover;
+$goa-button-primary-border: $goa-border-width-none solid rgba(0,0,0,0);
+$goa-button-primary-color-bg: $goa-color-interactive-default;
+$goa-button-compact-icon-size: $goa-icon-size-2;
+$goa-button-icon-size: $goa-icon-size-3;
+$goa-button-gap: $goa-space-xs;
+$goa-button-text-start: $goa-font-weight-bold $goa-font-size-5 $goa-line-height-1 $goa-font-family-sans;
+$goa-button-text-compact: $goa-font-weight-regular $goa-font-size-4 $goa-line-height-05 $goa-font-family-sans;
+$goa-button-text: $goa-font-weight-regular $goa-font-size-5 $goa-line-height-1 $goa-font-family-sans;
+$goa-button-padding-lr-start: $goa-space-m;
 $goa-button-padding-lr-compact: $goa-space-xs;
 $goa-button-padding-lr: $goa-space-s;
 $goa-button-border-radius: $goa-border-radius-m;
+$goa-badge-border: inset 0 0 0 $goa-border-width-s rgba(0, 0, 0, 0.5);
+$goa-badge-light-color-bg: $goa-color-greyscale-white;
+$goa-badge-midtone-color-bg: $goa-color-greyscale-700;
+$goa-badge-dark-color-bg: $goa-color-greyscale-black;
+$goa-badge-emergency-color-bg: $goa-color-emergency-default;
+$goa-badge-important-color-bg: $goa-color-warning-default;
+$goa-badge-success-color-bg: $goa-color-success-default;
+$goa-badge-info-color-content: $goa-color-info-default;
+$goa-badge-info-color-bg: $goa-color-greyscale-100;
+$goa-badge-border-radius: $goa-border-radius-m;
+$goa-badge-icon-size: $goa-icon-size-1;
+$goa-badge-line-height: $goa-line-height-1;
+$goa-badge-font-size: $goa-font-size-2;
+$goa-badge-gap: $goa-space-2xs;
+$goa-badge-padding: 0px $goa-space-xs;
 $goa-accordion-color-bg-heading-hover: $goa-color-greyscale-200;
 $goa-accordion-padding-content-narrow: $goa-space-l;
 $goa-accordion-padding-content-wide: $goa-space-l $goa-space-l $goa-space-xl 56px;
@@ -200,16 +627,115 @@ $goa-accordion-divider: $goa-border-width-s solid $goa-color-greyscale-200;
 $goa-accordion-border: $goa-border-width-s solid $goa-color-greyscale-200;
 $goa-accordion-color-bg-content: $goa-color-greyscale-white;
 $goa-accordion-color-bg-heading: $goa-color-greyscale-100;
+$goa-tooltip-text-size: $goa-typography-body-m;
+$goa-tooltip-color-text: $goa-color-text-light;
+$goa-text-area-typography-counter: $goa-typography-body-xs;
+$goa-text-area-typography: $goa-typography-body-m;
+$goa-text-area-color-text-placeholder: $goa-color-text-secondary;
+$goa-text-area-color-text-disabled: $goa-color-text-disabled;
+$goa-text-area-color-text-counter: $goa-color-text-default;
+$goa-text-area-color-text: $goa-color-text-default;
+$goa-tab-typography-selected: $goa-typography-heading-s;
+$goa-tab-typography: $goa-typography-body-m;
+$goa-tab-text-color: $goa-color-text-default;
 $goa-table-color-heading: $goa-color-text-secondary;
-$goa-side-menu-parent-text-active: $goa-typography-body-m;
-$goa-side-menu-parent-text: $goa-typography-body-m;
+$goa-side-menu-typography-item-current: $goa-typography-heading-s;
+$goa-side-menu-typography-item: $goa-typography-body-m;
 $goa-side-menu-child-color-text-selected: $goa-color-text-default;
+$goa-side-menu-icon-color: $goa-color-text-secondary;
+$goa-side-menu-heading-typography: $goa-typography-heading-s;
+$goa-side-menu-heading-color: $goa-color-text-secondary;
+$goa-side-menu-color-menu-item: $goa-color-text-default;
+$goa-radio-label: $goa-typography-body-m;
+$goa-radio-description: $goa-typography-body-xs;
+$goa-circular-progress-small-text: $goa-typography-body-m;
+$goa-circular-progress-large-text: $goa-typography-body-l;
+$goa-notification-banner-custom-color-text: $goa-color-text-light;
+$goa-notification-banner-text-size: $goa-typography-body-m;
+$goa-notification-banner-information-color-text: $goa-color-text-light;
+$goa-notification-banner-important-color-text: $goa-color-text-default;
+$goa-notification-banner-event-color-text: $goa-color-text-light;
+$goa-notification-banner-emergency-color-text: $goa-color-text-light;
+$goa-modal-header-typography: $goa-typography-heading-m;
+$goa-microsite-header-typography: $goa-typography-body-xs;
+$goa-microsite-header-color-version-number: $goa-color-text-secondary;
+$goa-microsite-header-beta-badge-color-text: $goa-color-text-light;
+$goa-microsite-header-alpha-badge-color-text: $goa-color-text-default;
+$goa-text-input-typography: $goa-typography-body-m;
+$goa-text-input-padding: 7px $goa-text-input-padding-lr 9px;
+$goa-text-input-lt-content-color-text: $goa-color-text-default;
+$goa-text-input-color-text-placeholder: $goa-color-text-secondary;
+$goa-text-input-color-text-disabled: $goa-color-text-secondary;
+$goa-text-input-color-text: $goa-color-text-default;
+$goa-hero-banner-content: $goa-typography-body-l;
+$goa-hero-banner-heading: $goa-typography-heading-xl;
+$goa-app-header-typography-service-name-mobile: $goa-typography-body-s;
+$goa-app-header-typography-service-name: $goa-typography-body-m;
+$goa-app-header-typography-nav-item: $goa-typography-heading-s;
+$goa-app-header-typography-menu-button-mobile: $goa-typography-body-s;
+$goa-app-header-typography-menu-button: $goa-typography-body-m;
+$goa-app-header-color-text-nav-item-current: $goa-color-text-default;
+$goa-app-header-color-text-nav-item: $goa-color-text-default;
+$goa-app-header-color-service-name: $goa-color-text-default;
+$goa-app-header-color-menu-button: $goa-color-text-default;
+$goa-step-typography-sublabel: $goa-typography-body-xs;
+$goa-step-typography-step-number: $goa-typography-heading-xs;
+$goa-step-typography-label-active: $goa-typography-heading-xs;
+$goa-step-typography-label: $goa-typography-body-s;
+$goa-step-color-sublabel: $goa-color-text-secondary;
+$goa-step-color-step-number: $goa-color-text-secondary;
+$goa-step-color-label: $goa-color-text-default;
+$goa-form-item-optional-label-typography: $goa-typography-body-xs;
+$goa-form-item-message-typography: $goa-typography-body-xs;
+$goa-form-item-label-typography: $goa-typography-heading-s;
+$goa-form-item-label-large-typography: $goa-typography-heading-l;
+$goa-form-item-help-message-color: $goa-color-text-default;
+$goa-footer-color-links: $goa-color-text-default;
+$goa-file-upload-instruction-text: $goa-typography-body-m;
+$goa-file-upload-help-text: $goa-typography-body-s;
+$goa-dropdown-typography: $goa-typography-body-m;
+$goa-dropdown-padding: 6px $goa-dropdown-padding-lr 8px;
+$goa-dropdown-item-padding: 7px $goa-dropdown-padding-lr 9px;
+$goa-dropdown-item-color-text: $goa-color-text-default;
+$goa-dropdown-color-text-placeholder: $goa-color-text-secondary;
+$goa-dropdown-color-text-disabled: $goa-color-text-disabled;
+$goa-dropdown-color-text: $goa-color-text-default;
+$goa-details-typography: $goa-typography-body-m;
+$goa-date-input-day-color-text-disabled: $goa-color-text-secondary;
+$goa-date-input-day-color-text-other-month: $goa-color-text-secondary;
+$goa-date-input-day-color-text-selected-hover: $goa-color-text-light;
+$goa-date-input-day-color-text-selected: $goa-color-text-light;
+$goa-date-input-day-color-text-hover: $goa-color-text-default;
+$goa-date-input-day-color-text: $goa-color-text-default;
+$goa-date-input-day-font-today: $goa-typography-heading-xs;
+$goa-date-input-day-font: $goa-typography-body-s;
+$goa-date-input-day-of-week-font: $goa-typography-heading-xs;
+$goa-container-important-heading-text-color: $goa-color-text-default;
+$goa-container-success-heading-text-color: $goa-color-text-light;
+$goa-container-error-heading-text-color: $goa-color-text-light;
+$goa-container-info-heading-text-color: $goa-color-text-light;
+$goa-container-non-interactive-heading-text-color: $goa-color-text-default;
+$goa-container-interactive-heading-text-color: $goa-color-text-light;
+$goa-container-heading: $goa-typography-heading-s;
+$goa-checkbox-label-font-size: $goa-typography-body-m;
+$goa-checkbox-description-font-size: $goa-typography-body-xs;
+$goa-checkbox-color-label: $goa-color-text-default;
 $goa-callout-m-text-size: $goa-typography-body-s;
 $goa-callout-l-heading-size: $goa-typography-heading-m;
 $goa-callout-m-heading-size: $goa-typography-heading-xs;
 $goa-callout-l-text-size: $goa-typography-body-m;
 $goa-callout-l-heading: $goa-typography-heading-m;
-$goa-button-text: $goa-typography-button-default;
+$goa-button-primary-inverse-color-text: $goa-color-text-default;
+$goa-button-primary-destructive-hover-color-text: $goa-color-text-light;
+$goa-button-primary-focus-color-text: $goa-color-text-light;
+$goa-button-primary-hover-color-text: $goa-color-text-light;
+$goa-button-primary-color-text: $goa-color-text-light;
+$goa-badge-light-color-content: $goa-color-text-default;
+$goa-badge-midtone-color-content: $goa-color-text-light;
+$goa-badge-dark-color-content: $goa-color-text-light;
+$goa-badge-emergency-color-content: $goa-color-text-light;
+$goa-badge-important-color-content: $goa-color-text-default;
+$goa-badge-success-color-content: $goa-color-text-light;
 $goa-accordion-heading-m: $goa-typography-heading-m;
 $goa-accordion-heading-s: $goa-typography-heading-s;
 $goa-accordion-color-heading-hover: $goa-color-text-default;