vanilla-framework 4.10.0 → 4.12.0

package/README.md

@@ -1,6 +1,5 @@
 # ![vanilla](https://assets.ubuntu.com/v1/70041419-vanilla-framework.png?w=35 'Vanilla') Vanilla Framework
 
-[![CircleCI build status](https://circleci.com/gh/canonical/vanilla-framework.svg?style=shield)](https://circleci.com/gh/canonical/vanilla-framework)
 [![npm version](https://badge.fury.io/js/vanilla-framework.svg)](http://badge.fury.io/js/vanilla-framework)
 [![Downloads](http://img.shields.io/npm/dm/vanilla-framework.svg)](https://www.npmjs.com/package/vanilla-framework)
 [![devDependency Status](https://david-dm.org/canonical/vanilla-framework/dev-status.svg)](https://david-dm.org/canonical/vanilla-framework#info=devDependencies)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,24 +55,24 @@
     "!/scss/standalone"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.6.0",
+    "@canonical/cookie-policy": "3.6.3",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.2",
-    "@testing-library/cypress": "10.0.1",
+    "@percy/cli": "1.28.7",
+    "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.19",
-    "cypress": "13.7.1",
+    "cypress": "13.10.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "postcss": "8.4.38",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.2.5",
-    "sass": "1.72.0",
-    "stylelint": "16.3.1",
+    "prettier": "3.3.0",
+    "sass": "1.77.4",
+    "stylelint": "16.6.1",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
-    "svgo": "3.2.0",
-    "yaml": "2.4.1"
+    "svgo": "3.3.2",
+    "yaml": "2.4.3"
   }
 }

package/scss/_base_forms.scss

@@ -101,6 +101,7 @@
   label {
     cursor: pointer;
     display: inline-block;
+    line-height: map-get($line-heights, default-text);
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $text-max-width;

package/scss/_base_typography.scss

@@ -16,6 +16,7 @@
     font-weight: $font-weight-regular-text;
     // set default line height to match p
     line-height: map-get($line-heights, default-text);
+    text-wrap: pretty;
 
     @if ($increase-font-size-on-larger-screens) {
       font-size: map-get($base-font-sizes, base);

package/scss/_patterns_equal-height-row.scss

@@ -1,108 +1,21 @@
 @import 'settings';
 
-// wrapper mixin that provides relevant class selectors for 1st, 2nd and 3rd dividers
-@mixin position-divider-by-order-in-grid($divider-order, $large-screen: false) {
-  // for large screens, dividers are positioned as pseudo elements at row level
-  @if $large-screen {
-    @if $divider-order == 1 {
-      &.has-1st-divider::before {
-        @content;
-      }
-    }
-
-    @if $divider-order == 2 {
-      &.has-2nd-divider::after {
-        @content;
-      }
-    }
-
-    @if $divider-order == 3 {
-      // when 3rd-divider is present and 1st-divider is not present
-      &.has-3rd-divider:not(.has-1st-divider)::before,
-      // when 3rd-divider is present and 2nd-divider is not present
-      &.has-3rd-divider:not(.has-2nd-divider)::after {
-        @content;
-      }
-
-      // when only 3rd-divider is present
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after {
-        display: none;
-      }
-    }
-  } @else {
-    // for smaller screens, dividers are positioned as pseudo elements at column level
-    @if $divider-order == 1 {
-      &.has-1st-divider .p-equal-height-row__col::before {
-        @content;
-      }
-    }
-
-    @if $divider-order == 2 {
-      &.has-2nd-divider .p-equal-height-row__col::after {
-        @content;
-      }
-    }
-
-    @if $divider-order == 3 {
-      &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
-      &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::before {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::after {
-        display: none;
-      }
-    }
-  }
-}
-
-@mixin divider-styles($large-screen: false) {
-  // For each row or column grid we only have access to two pseudo elements
-  // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
-  // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
-  @if $large-screen {
-    &.has-1st-divider::before,
-    &.has-2nd-divider::after,
-    &.has-3rd-divider:not(.has-1st-divider)::before,
-    &.has-3rd-divider:not(.has-2nd-divider)::after {
-      @content;
-    }
-  } @else {
-    // For smaller screens, the divider pseudo elements are inserted at the column level
-    &.has-1st-divider .p-equal-height-row__col::before,
-    &.has-2nd-divider .p-equal-height-row__col::after,
-    &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
-    &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
-      @content;
-    }
-  }
-}
-
 @mixin vf-p-equal-height-row {
   .p-equal-height-row {
     @extend %vf-row;
-    padding-bottom: $spv--strip-regular * 0.5;
     position: relative;
 
     .p-equal-height-row__col {
       // smaller screens each column will have border top by default
-      border-top-color: $colors--theme--border-default;
+      border-top-color: $colors--theme--border-low-contrast;
       border-top-style: solid;
       border-top-width: 1px;
       display: grid;
       grid-column: span $grid-columns-small;
       grid-row: span 4;
       grid-template-rows: subgrid;
+      margin-bottom: $spv--small;
       margin-top: -1px;
-      padding-bottom: $spv--small;
       position: relative;
 
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
@@ -123,76 +36,56 @@
       @media screen and (width >= $breakpoint-large) {
         border: none;
         grid-column: span calc($grid-columns / 4);
-        padding-bottom: 0;
+        margin-bottom: 0;
       }
     }
 
-    // divider styles
-    @include divider-styles($large-screen: false) {
-      @extend %vf-pseudo-border;
-    }
+    // DIVIDERS
 
-    // remove row level dividers for smaller screen sizes
-    @include divider-styles($large-screen: true) {
+    // For each row or column grid we only have access to two pseudo elements
+    // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
+    // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
+    &.has-divider-1::before,
+    &.has-divider-2::after,
+    &.has-divider-3:not(.has-divider-1)::before,
+    &.has-divider-3:not(.has-divider-2)::after {
+      // row level dividers are not visible on smaller screen sizes
       @extend %vf-pseudo-border;
+      background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
       display: none;
     }
 
-    @include position-divider-by-order-in-grid(1) {
-      grid-row: 2;
-    }
-
-    @include position-divider-by-order-in-grid(2) {
-      grid-row: 3;
-    }
-
-    @include position-divider-by-order-in-grid(3) {
-      grid-row: 4;
-    }
-
-    @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-      // We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left
-      @include position-divider-by-order-in-grid(1) {
-        display: none;
-      }
-
-      @include position-divider-by-order-in-grid(2) {
-        grid-column: 4 / 7;
-        grid-row: 2;
-      }
-
-      @include position-divider-by-order-in-grid(3) {
-        grid-column: 4 / 7;
-        grid-row: 3;
-      }
-    }
-
     @media screen and (width >= $breakpoint-large) {
-      padding-bottom: $spv--strip-regular;
-
-      // remove column level dividers for large screen sizes
-      @include divider-styles($large-screen: false) {
-        display: none;
-      }
-
-      @include divider-styles($large-screen: true) {
+      &.has-divider-1::before,
+      &.has-divider-2::after,
+      &.has-divider-3:not(.has-divider-1)::before,
+      &.has-divider-3:not(.has-divider-2)::after {
         display: block;
         grid-column-end: span 12;
         grid-column-start: 1;
         margin: auto;
       }
 
-      @include position-divider-by-order-in-grid(1, $large-screen: true) {
+      &.has-divider-1::before {
         grid-row: 2;
       }
 
-      @include position-divider-by-order-in-grid(2, $large-screen: true) {
+      &.has-divider-2::after {
         grid-row: 3;
       }
 
-      @include position-divider-by-order-in-grid(3, $large-screen: true) {
+      // when 3rd-divider is present and 1st-divider is not present
+      &.has-divider-3:not(.has-divider-1)::before,
+      // when 3rd-divider is present and 2nd-divider is not present
+      &.has-divider-3:not(.has-divider-2)::after,
+      // when only 3rd-divider is present
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
         grid-row: 4;
       }
+
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
+        display: none;
+      }
     }
   }
 

package/scss/_patterns_icons.scss

@@ -132,7 +132,15 @@
   .p-icon--chevron-up {
     transform: rotate(180deg);
   }
+  .p-icon--chevron-left {
+    transform: rotate(90deg);
+  }
+  .p-icon--chevron-right {
+    transform: rotate(-90deg);
+  }
 
+  .p-icon--chevron-left,
+  .p-icon--chevron-right,
   .p-icon--chevron-down,
   .p-icon--chevron-up {
     @extend %icon;

package/scss/_patterns_lists.scss

@@ -121,7 +121,7 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+  box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   margin: 0;
   padding-bottom: $sph--large;
   padding-top: $sph--small;
@@ -131,7 +131,7 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   .p-list--divided > .p-list__item:first-child {
-    box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+    box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   }
 }
 
@@ -318,6 +318,9 @@ $list-step-bullet-margin: $sph--x-large;
 
   .p-stepped-list__title + .p-stepped-list__content {
     margin-left: $bullet-width-mobile + $list-step-bullet-margin;
+    @media (min-width: $threshold-6-12-col) {
+      padding-top: $spv-nudge;
+    }
 
     @media (min-width: $breakpoint-heading-threshold) {
       margin-left: $bullet-width + $list-step-bullet-margin;
@@ -392,11 +395,10 @@ $list-step-bullet-margin: $sph--x-large;
       @include vf-b-row-reset;
 
       @media (min-width: $threshold-6-12-col) {
-        padding-top: $sp-unit;
         position: relative;
 
         &::after {
-          background-color: $colors--light-theme--border-low-contrast;
+          background-color: $colors--theme--border-low-contrast;
           content: '';
           height: 1px;
           left: 0;

package/scss/_patterns_modal.scss

@@ -5,7 +5,7 @@
 
   .p-modal {
     align-items: center;
-    background: transparentize($color-dark, 0.15);
+    background: $colors--theme--background-overlay;
     bottom: 0;
     display: flex;
     height: 100vh;
@@ -21,9 +21,11 @@
   }
 
   .p-modal__dialog {
-    @extend %vf-card;
+    @extend %vf-card-padding;
     @extend %vf-has-box-shadow;
 
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     left: $sph--x-large;
     margin-bottom: 0;
     max-height: calc(100% - 2 * $spv--large);
@@ -46,7 +48,7 @@
   .p-modal__header {
     @extend %vf-pseudo-border--bottom;
 
-    background: $color-x-light;
+    background: $colors--theme--background-default;
     display: flex;
     justify-content: space-between;
     margin-bottom: $spv--small;
@@ -65,8 +67,8 @@
   }
 
   .p-modal__close {
+    @include vf-icon-close-themed;
     background: {
-      image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='90' width='90'%3E%3Cg color='%23000'%3E%3Cpath fill='none' d='M0 0h90v90H0z'/%3E%3Cpath d='M14.52 6L6 14.52 36.48 45 6 75.49 14.52 84 45 53.52 75.48 84 84 75.49 53.52 45 84 14.52 75.48 6 45 36.49z' fill='%23888'/%3E%3C/g%3E%3C/svg%3E");
       position: center;
       repeat: no-repeat;
       size: $icon-size;
@@ -83,10 +85,6 @@
     text-indent: -999em;
     top: 0;
     width: $icon-size;
-
-    &:focus {
-      outline: $bar-thickness solid $color-focus;
-    }
   }
 
   .p-modal__footer {

package/scss/_patterns_navigation.scss

@@ -872,50 +872,54 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
   /* stylelint-enable max-nesting-depth */
 
-  .p-navigation--sliding .p-navigation__item--dropdown-close {
-    .p-navigation__link::after {
-      left: 1rem;
-      transform: rotate(90deg);
-    }
-    @media (min-width: $breakpoint-navigation-threshold) {
-      display: none;
-    }
-  }
+  .p-navigation--sliding {
+    // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
+    .p-navigation__item--dropdown-toggle {
+      position: initial;
 
-  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
-    position: initial;
+      &::after {
+        content: none;
+      }
 
-    &::after {
-      content: none;
-    }
+      .p-navigation__link::after {
+        @include vf-icon-chevron-themed;
 
-    .p-navigation__link::after {
-      @include vf-icon-chevron-themed;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: '';
+        display: block;
+        height: $spv--large;
+        pointer-events: none;
+        position: absolute;
+        right: map-get($grid-margin-widths, small);
+        text-indent: calc(100% + 10rem);
+        top: 1rem;
+        transform: rotate(-90deg);
+        width: map-get($icon-sizes, default);
 
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      content: '';
-      display: block;
-      height: $spv--large;
-      pointer-events: none;
-      position: absolute;
-      right: map-get($grid-margin-widths, small);
-      text-indent: calc(100% + 10rem);
-      top: 1rem;
-      transform: rotate(-90deg);
-      width: map-get($icon-sizes, default);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          right: 0.5rem;
+          top: 1.2rem;
+          transform: none;
+        }
+      }
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        right: 0.5rem;
-        top: 1.2rem;
-        transform: none;
+      &.is-active > .p-navigation__link::after {
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: rotate(180deg);
+        }
       }
     }
 
-    &.is-active > .p-navigation__link::after {
+    // Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above
+    .p-navigation__item--dropdown-close {
+      .p-navigation__link::after {
+        left: 1rem;
+        transform: rotate(90deg);
+      }
       @media (min-width: $breakpoint-navigation-threshold) {
-        transform: rotate(180deg);
+        display: none;
       }
     }
   }

package/scss/_patterns_pagination.scss

@@ -7,8 +7,8 @@
 
     &.is-active,
     &[aria-current='page'] {
-      background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
-      color: $colors--light-theme--text-default;
+      background-color: $colors--theme--background-active;
+      color: $colors--theme--text-default;
       text-decoration: none;
     }
   }

package/scss/_patterns_rule.scss

@@ -8,19 +8,11 @@
   }
 
   .p-rule--muted {
-    background-color: $colors--light-theme--border-low-contrast;
-
-    &.is-dark {
-      background-color: $colors--dark-theme--border-low-contrast;
-    }
+    background-color: $colors--theme--border-low-contrast;
   }
 
   .p-rule--highlight {
-    @include vf-highlight-bar($colors--light-theme--text-default);
-
-    &.is-dark {
-      @include vf-highlight-bar($colors--dark-theme--text-default);
-    }
+    @include vf-highlight-bar($colors--theme--text-default);
 
     &.is-accent {
       @include vf-highlight-bar($color-accent);

package/scss/_patterns_segmented-control.scss

@@ -27,7 +27,7 @@
         border-right: 0;
 
         &::after {
-          background-color: $colors--light-theme--border-low-contrast;
+          background-color: $colors--theme--border-low-contrast;
           bottom: 0;
           content: '';
           position: absolute;

package/scss/_patterns_side-navigation.scss

@@ -117,8 +117,6 @@
     width: 100%;
     z-index: 102;
 
-    .p-side-navigation:target &,
-    [class*='p-side-navigation--']:target &,
     // is-expanded and is-collapsed are deprecated and replaced by is-drawer-expanded and is-drawer-collapsed
     .p-side-navigation.is-expanded &,
     .p-side-navigation.is-drawer-expanded &,
@@ -167,8 +165,6 @@
     top: 0;
     z-index: 101;
 
-    .p-side-navigation:target &,
-    [class*='p-side-navigation--']:target &,
     .p-side-navigation.is-expanded &,
     .p-side-navigation.is-drawer-expanded &,
     [class*='p-side-navigation--'].is-expanded &,
@@ -258,8 +254,6 @@
 
     .p-side-navigation__drawer,
     // fight specificity of expanded version
-    .p-side-navigation:target .p-side-navigation__drawer,
-    [class*='p-side-navigation--']:target .p-side-navigation__drawer,
     .p-side-navigation.is-expanded .p-side-navigation__drawer,
     .p-side-navigation.is-drawer-expanded .p-side-navigation__drawer,
     [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer,

package/scss/_patterns_suru.scss

@@ -8,7 +8,7 @@
     :root,
     .is-light,
     .is-paper {
-      // new suru backgrounds don't have while (light) version,
+      // new suru backgrounds don't have white (light) version,
       // they need paper background
       --vf-suru-background: #{$color-paper};
       --vf-suru-25-75: url('#{$assets-path}505636a6-0000_suru-main-25x75-light.png');
@@ -17,6 +17,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}2adade55-suru-corner-fan--bottom-0000_light.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}8846d6a5-suru-pyramid-top-corner_0000_light.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}5d9f8cd3-suru-pyramid-top-right-corner_0000_light.jpg');
+      --vf-suru-divider: url('#{$assets-path}9e25feb2-suru-triangle-from-left-edge--_0000_light.jpg');
     }
 
     .is-dark {
@@ -27,6 +28,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}725af649-suru-corner-fan--bottom-0001_dark.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}86ed5771-suru-pyramid-top-corner_0001_dark.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}9f740811-suru-pyramid-top-right-corner_0001_dark.jpg');
+      --vf-suru-divider: url('#{$assets-path}9c0bee5c-suru-triangle-from-left-edge--_0001_dark.jpg');
     }
   }
 
@@ -85,7 +87,6 @@
     }
 
     // padding top based on p-section--hero
-    // bottom padding not needed (as it's covered by the suru background image)
     padding-top: $spv--large;
 
     // on large screens, same as %section-padding--shallow
@@ -108,7 +109,7 @@
       background-image: var(--vf-suru-fan-top-right);
       background-position: top right;
       background-repeat: no-repeat;
-      background-size: 512px 385.5px; // based on image dimensions (2048x1542) scaled down by 0.25
+      background-size: 32rem 24.09rem; // based on image dimensions (2048x1542) scaled down by 0.25, coverted to rem
     }
 
     .p-suru--fan-bottom {
@@ -121,7 +122,7 @@
       background-image: var(--vf-suru-pyramid-top-left);
       background-position: top left;
       background-repeat: no-repeat;
-      background-size: 354px 258.75px; // based on image dimensions (1380x1035) scaled down by 0.25
+      background-size: 22.125rem 16.1718rem; // based on image dimensions (1380x1035) scaled down by 0.25, converted to rem
     }
 
     .p-suru--pyramid-right {
@@ -129,4 +130,34 @@
       background-position: top right;
     }
   }
+
+  .p-suru--divider {
+    background-color: var(--vf-suru-background);
+    color: $colors--theme--text-default;
+    // same as %section-padding--deep
+    padding-bottom: calc($spv--strip-deep / 2);
+    position: relative;
+
+    // only apply suru background images on large screens
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: calc(2 * $spv--strip-deep);
+
+      &::after {
+        $suru-divider-height: 13.75rem; // 220px / 16px = 13.75rem
+
+        background-image: var(--vf-suru-divider);
+        background-position: bottom left;
+        background-repeat: no-repeat;
+        background-size: 80rem 14.8125rem; // based on image dimensions (2560x474) scaled down by 0.5, converted to rem
+
+        bottom: calc((2 * $spv--strip-deep - $suru-divider-height) / 2);
+        content: '';
+        display: block;
+
+        height: $suru-divider-height;
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
 }

package/scss/_settings_colors.scss

@@ -179,9 +179,9 @@ $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default,
 $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
-$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.3) !default;
+$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;
-$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.05) !default;
+$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
 $colors--dark-theme--icon: $colors--dark-theme--text-default !default;
 

package/scss/_settings_spacing.scss

@@ -52,10 +52,10 @@ $nudges: (
   h4-large: 0.45rem,
   h4: 0.45rem,
   h4-mobile: 0.45rem,
-  h5: 0.4rem,
-  h6: 0.4rem,
-  h6-large: 0.4rem,
-  p: 0.4rem,
+  h5: 0.375rem,
+  h6: 0.375em,
+  h6-large: 0.375rem,
+  p: 0.375rem,
   p-ubuntumono: 0.45rem,
   small: 0.05rem,
   x-small: 0.25rem,

package/scss/_utilities_baseline-grid.scss

@@ -34,19 +34,4 @@
     }
   }
   // stylelint-enable selector-max-type
-
-  .u-baseline-grid__toggle {
-    bottom: $spv--x-large;
-    color: $colors--light-theme--text-default; // Force light theme colour because of baseline grid background
-    position: fixed;
-    right: $sp-unit * 3;
-    z-index: 201;
-  }
-
-  // hide the theme toggle in Percy
-  @media only percy {
-    .u-baseline-grid__toggle {
-      visibility: hidden !important;
-    }
-  }
 }

package/scss/_utilities_layout.scss

@@ -3,13 +3,19 @@
     @extend %fixed-width-container;
   }
 
-  @if ($table-layout-fixed) {
-    .u-table-layout--auto {
+  // stylelint-disable selector-max-type -- table elements can use selector types
+  .u-table-layout--auto {
+    &,
+    table {
       table-layout: auto !important;
     }
-  } @else {
-    .u-table-layout--fixed {
+  }
+
+  .u-table-layout--fixed {
+    &,
+    table {
       table-layout: fixed !important;
     }
   }
+  // stylelint-enable selector-max-type
 }

package/scss/_vanilla.scss

@@ -89,7 +89,6 @@
 @import 'utilities_no-print';
 @import 'utilities_text-max-width';
 @import 'utilities_text-figures';
-@import 'utilities_theme-toggle';
 
 // Include all the CSS
 @mixin vanilla {
@@ -183,5 +182,4 @@
   @include vf-u-no-print;
   @include vf-u-text-max-width;
   @include vf-u-text-figures;
-  @include vf-u-theme-toggle;
 }

package/scss/_utilities_theme-toggle.scss

@@ -1,39 +0,0 @@
-@import 'settings';
-
-@mixin vf-u-theme-toggle {
-  .u-theme-toggle {
-    bottom: $spv--x-large;
-    position: fixed;
-    right: $sp-unit * 30;
-    z-index: 100;
-
-    .u-theme-toggle__button {
-      margin: 0;
-
-      &:not(:last-child) {
-        border-right: 0;
-      }
-    }
-
-    .u-theme-toggle__dark {
-      background-color: $colors--dark-theme--background-default;
-      color: $colors--dark-theme--text-default;
-    }
-
-    .u-theme-toggle__light {
-      background-color: $colors--light-theme--background-default;
-      color: $colors--light-theme--text-default;
-    }
-    .u-theme-toggle__paper {
-      background-color: $color-paper;
-      color: $color-x-dark;
-    }
-  }
-
-  // hide the theme toggle in Percy
-  @media only percy {
-    .u-theme-toggle {
-      visibility: hidden !important;
-    }
-  }
-}