Add smaller font to compact button link variant, add color theme to t…

…ext stats, tweak secondary nav styles

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.html

@@ -22,7 +22,7 @@ <h2 class="heading heading--two division-signpost__heading">{% firstof card.head
                    class="button-link button-link--{{ card.card_colour }}"
                    {% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
                 >
-                    {{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}
+                    {{ card.link_text }}<span class="button-link__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}</span>
                 </a>
             </li>
         {% endfor %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html

@@ -22,7 +22,7 @@ <h3 class="featured-services__heading heading heading--two-b">{% firstof card.he
                    class="button-link button-link--compact"
                    {% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
                 >
-                    {{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}
+                    {{ card.link_text }}<span class="button-link__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}</span>
                 </a>
             </li>
         {% endfor %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/stats_textual.html

@@ -2,7 +2,7 @@
 <ul class="stats stats--textual grid__stats">
     {% for stat in value %}
         <li class="stats__stat">
-            <span class="stats__text">
+            <span class="stats__text heading heading--three">
                 {{ stat.headline_text }}
             </span>
             {% if stat.further_details %}

tbx/static_src/sass/components/_button-link.scss

@@ -15,6 +15,7 @@
 
     // compact variant of the button with reduced padding
     &--compact {
+        @include font-size('size-five');
         padding: 13px $spacer-small;
 
         #{$root}__arrow {
@@ -60,6 +61,12 @@
         }
     }
 
+    &__tail {
+        // Keep the arrow attached to the last word so it's not orphaned on a new line
+        white-space: nowrap;
+        display: inline;
+    }
+
     &__arrow {
         @include arrow-link-icon-styles(
             $interaction-color: var(--color--button-link-interaction)

tbx/static_src/sass/components/_stats.scss

@@ -37,13 +37,10 @@
     &__number {
         color: var(--color--theme-primary);
         display: block;
-        font-weight: $weight--semibold;
     }
 
     &__text {
-        @include font-size(size-three);
-        font-weight: $weight--semibold;
-        color: var(--color--heading);
+        color: var(--color--theme-primary);
         display: block;
         margin-bottom: $spacer-small;
     }

tbx/static_src/sass/components/navigation/_secondary-nav-desktop.scss

@@ -51,7 +51,7 @@ Styles for the secondary navigation at desktop (top level)
     // wrapper ensures the text doesn't move when the icon changes
     &__icon-wrapper {
         @include z-index(overlap);
-        width: 13px;
+        width: 12px;
         position: relative;
         display: inline-block;
         margin-left: 8px;
@@ -60,9 +60,9 @@ Styles for the secondary navigation at desktop (top level)
     // chevron when menu is closed
     &__icon-closed {
         display: block;
-        width: 16px;
+        width: 11px;
         height: 11px;
-        color: var(--color--text);
+        color: var(--color--heading);
         transform: rotate(90deg);
 
         @include high-contrast-light-mode() {

tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss

@@ -132,6 +132,7 @@ Styles for the lower levels of the navigation at desktop
             $interaction-color: var(--color--theme-primary)
         );
         color: var(--color--theme-primary);
+        vertical-align: text-top;
         opacity: 0;
 
         .active & {