vanilla-framework 3.0.0-alpha.1 → 3.0.0-rc.1

package/README.md

@@ -61,7 +61,7 @@ Then reference it from your own Sass files, with optional settings:
 $color-brand: #ffffff;
 
 // Import the theme
-@import 'vanilla-framework/scss/vanilla';
+@import 'vanilla-framework';
 @include vanilla;
 
 // Add theme if applicable

package/_index.scss

@@ -0,0 +1 @@
+@import './scss/vanilla';

package/package.json

@@ -29,6 +29,7 @@
     "start": "yarn build && yarn serve",
     "build": "yarn build-scss && yarn build-js",
     "build-scss": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
@@ -37,37 +38,41 @@
     "lint-prettier": "prettier -c .",
     "lint-scss": "stylelint 'scss/**/*.scss'",
     "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
-    "watch:scss:skip-standalone": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
+    "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-rc.1",
   "files": [
+    "_index.scss",
     "/scss",
-    "!/scss/docs"
+    "!/scss/docs",
+    "!/scss/standalone"
   ],
   "dependencies": {
     "@canonical/cookie-policy": "3.3.0",
-    "@canonical/latest-news": "1.2.0",
-    "autoprefixer": "10.3.7",
-    "postcss": "8.3.9",
-    "postcss-cli": "8.3.1",
-    "sass": "1.37.5"
+    "@canonical/latest-news": "1.3.0",
+    "autoprefixer": "10.4.0",
+    "postcss": "8.4.4",
+    "postcss-cli": "9.0.2",
+    "sass": "1.44.0"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.4.1",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-order": "4.1.0",
-    "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.21.0",
-    "svgo": "2.7.0"
+    "prettier": "2.5.0",
+    "stylelint": "14.1.0",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-recommended-scss": "5.0.2",
+    "stylelint-order": "5.0.0",
+    "stylelint-prettier": "2.0.0",
+    "svgo": "2.8.0"
+  },
+  "engines": {
+    "node": "^14 || ^16 || ^18"
   }
 }

package/scss/_base_button.scss

@@ -26,11 +26,10 @@
     font-weight: $font-weight-regular-text;
     justify-content: center;
     line-height: map-get($line-heights, default-text);
-    margin: 0 0 $input-margin-bottom 0;
+    margin: 0 $sph--large $input-margin-bottom 0;
     padding: $input-vertical-padding $sph--large;
     text-align: center;
     text-decoration: none;
-    width: 100%;
 
     &:active,
     &:focus,
@@ -44,13 +43,8 @@
       opacity: $disabled-element-opacity;
     }
 
-    @media (min-width: $breakpoint-x-small) {
-      margin-right: $sph--large;
-      width: auto;
-
-      &:last-child {
-        margin-right: 0;
-      }
+    &:last-child {
+      margin-right: 0;
     }
 
     &.is-dense {
@@ -63,7 +57,7 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(#{map-get($nudges, nudge--small)} - 1px) $sph--small;
+      padding: calc(#{map-get($nudges, small)} - 1px) $sph--small;
     }
 
     &.is-small.is-dense {
@@ -81,12 +75,6 @@
     p + p > & {
       margin-top: $spv-nudge-compensation;
     }
-
-    @media (max-width: $breakpoint-x-small - 1) {
-      p & + & {
-        margin-top: $sp-unit + $spv-nudge-compensation;
-      }
-    }
     // stylelint-enable selector-max-type
   }
 
@@ -97,8 +85,6 @@
   }
 
   %vf-button-has-icon {
-    width: auto;
-
     & [class*='p-icon'] {
       margin-left: $sph--small;
       margin-right: $sph--small;

package/scss/_base_details.scss

@@ -10,8 +10,8 @@
     @include vf-focus;
 
     margin-bottom: $spv-nudge; //push subsequent text onto baseline
-    max-width: $max-width--default;
-    padding-bottom: 2 * $sp-unit - map-get($nudges, nudge--p); // use padding instead of margin-bottom in order to make the focus state symmetric
+    max-width: $text-max-width;
+    padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
   }
   // stylelint-enable selector-max-type
 }

package/scss/_base_fontfaces.scss

@@ -1,185 +1,187 @@
 @mixin vf-b-typography-fontfaces {
-  @if str-index($font-base-family, 'Ubuntu') {
-    @if $font-use-subset-latin {
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: italic;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: italic;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-display-heading;
-        src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu Mono';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu Mono';
-        font-style: normal;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
-        unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-      }
-    } @else {
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: italic;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: italic;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-display-heading;
-        src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu Mono';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
-      }
-
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu Mono';
-        font-style: normal;
-        font-weight: $font-weight-bold;
-        src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
-      }
-    }
-
-    @if $font-allow-cyrillic-greek-latin {
-      // cyrillic-ext
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
-        unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
-      }
-
-      // cyrillic
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
-        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-      }
-
-      // greek-ext
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
-        unicode-range: U+1F00-1FFF;
-      }
-
-      // greek
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
-        unicode-range: U+0370-03FF;
-      }
-
-      // latin-ext
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
-        unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-      }
-
-      // latin
-      @font-face {
-        font-display: $font-display-option;
-        font-family: 'Ubuntu';
-        font-style: normal;
-        font-weight: $font-weight-regular-text;
-        src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
-        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+  @at-root {
+    @if str-index($font-base-family, 'Ubuntu') {
+      @if $font-use-subset-latin {
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: italic;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: italic;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-display-heading;
+          src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu Mono';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu Mono';
+          font-style: normal;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
+          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+      } @else {
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: italic;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: italic;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-display-heading;
+          src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu Mono';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
+        }
+
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu Mono';
+          font-style: normal;
+          font-weight: $font-weight-bold;
+          src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
+        }
+      }
+
+      @if $font-allow-cyrillic-greek-latin {
+        // cyrillic-ext
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
+          unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+        }
+
+        // cyrillic
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
+          unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+        }
+
+        // greek-ext
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
+          unicode-range: U+1F00-1FFF;
+        }
+
+        // greek
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
+          unicode-range: U+0370-03FF;
+        }
+
+        // latin-ext
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
+          unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+        }
+
+        // latin
+        @font-face {
+          font-display: $font-display-option;
+          font-family: 'Ubuntu';
+          font-style: normal;
+          font-weight: $font-weight-regular-text;
+          src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
+          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+        }
       }
     }
   }

package/scss/_base_forms.scss

@@ -82,11 +82,11 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   label {
     cursor: pointer;
-    display: block;
+    display: inline-block;
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
-    max-width: $max-width--default;
-    padding-top: map-get($nudges, nudge--p);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, p);
     width: fit-content;
 
     &.is-required::before {

package/scss/_base_grid-definitions.scss

@@ -12,13 +12,13 @@
   }
 
   %span-full-grid-on-mobile {
-    @media (max-width: $threshold-4-6-col) {
+    @media (max-width: $threshold-4-6-col - 1) {
       grid-column: auto / span $grid-columns-small;
     }
   }
 
   %span-full-grid-on-tablet {
-    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
       grid-column: auto / span $grid-columns-medium;
     }
   }
@@ -69,7 +69,7 @@
 
       // set static gutter width per breakpoint
       @media (min-width: $threshold-4-6-col) {
-        grid-gap: 0 map-get($grid-gutter-widths, medium);
+        grid-gap: 0 map-get($grid-gutter-widths, default);
         grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
 
         & > * {
@@ -78,7 +78,7 @@
       }
 
       @media (min-width: $threshold-6-12-col) {
-        grid-gap: 0 map-get($grid-gutter-widths, large);
+        grid-gap: 0 map-get($grid-gutter-widths, default);
         grid-template-columns: repeat($grid-columns, minmax(0, 1fr));
 
         & > * {
@@ -94,13 +94,13 @@
     padding-right: map-get($grid-margin-widths, small);
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: map-get($grid-margin-widths, medium);
-      padding-right: map-get($grid-margin-widths, medium);
+      padding-left: map-get($grid-margin-widths, default);
+      padding-right: map-get($grid-margin-widths, default);
     }
 
     @media (min-width: $threshold-6-12-col) {
-      padding-left: map-get($grid-margin-widths, large);
-      padding-right: map-get($grid-margin-widths, large);
+      padding-left: map-get($grid-margin-widths, default);
+      padding-right: map-get($grid-margin-widths, default);
     }
   }
 }

package/scss/_base_hr.scss

@@ -24,13 +24,13 @@
       width: calc(100% - #{2 * map-get($grid-margin-widths, small)});
 
       @media (min-width: $threshold-4-6-col) {
-        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, medium)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, medium)});
+        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
+        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
       }
 
       @media (min-width: $threshold-6-12-col) {
-        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, large)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, large)});
+        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
+        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
       }
 
       .row &,