govuk_tech_docs 5.2.2 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss

@@ -15,23 +15,16 @@
     // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
     // background-color and color need to always be set together, color should
     // not be set either
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
     border-radius: 0;
+    border-color: govuk-functional-colour(input-border);
 
     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
             appearance: none;
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // Ensure outline appears outside of the element
-      outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` for this
-      // instead of changing `border-width` - this is for consistency with
-      // components such as textarea where we avoid changing `border-width` as
-      // it will change the element size. Also, `outline` cannot be utilised
-      // here as it is already used for the yellow focus state.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+      @include govuk-focused-form-input;
     }
 
     &:disabled {
@@ -53,10 +46,10 @@
   }
 
   .govuk-input--error {
-    border-color: $govuk-error-colour;
+    border-color: govuk-functional-colour(error);
 
     &:focus {
-      border-color: $govuk-input-border-colour;
+      border-color: govuk-functional-colour(input-border);
     }
   }
 
@@ -109,7 +102,7 @@
     }
 
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
 
       .govuk-input {
@@ -130,15 +123,16 @@
     min-width: govuk-px-to-rem(40px);
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey");
+    border: $govuk-border-width-form-element solid;
+    border-color: govuk-functional-colour(input-border);
+    background-color: govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
     flex: 0 0 auto;
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
       height: 100%;
       white-space: normal;
@@ -146,20 +140,20 @@
   }
 
   .govuk-input__prefix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-bottom: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-right: 0;
     }
   }
 
   // Split prefix/suffix onto separate lines on narrow screens
   .govuk-input__suffix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-top: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-left: 0;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/inset-text/_index.scss

@@ -10,7 +10,8 @@
 
     clear: both;
 
-    border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    border-left: $govuk-border-width-wide solid;
+    border-left-color: govuk-functional-colour(border);
 
     > :first-child {
       margin-top: 0;

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss

@@ -3,12 +3,14 @@
     @include govuk-font($size: 19);
     @include govuk-responsive-margin(8, "bottom");
 
-    border: $govuk-border-width solid $govuk-brand-colour;
+    border: $govuk-border-width solid;
+    border-color: govuk-functional-colour(brand);
 
-    background-color: $govuk-brand-colour;
+    background-color: govuk-functional-colour(brand);
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline: $govuk-focus-width solid;
+      outline-color: govuk-functional-colour(focus);
     }
   }
 
@@ -19,7 +21,7 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: 2px govuk-spacing(4) govuk-spacing(1);
     }
   }
@@ -39,9 +41,9 @@
     @include govuk-text-colour;
     padding: govuk-spacing(3);
 
-    background-color: $govuk-body-background-colour;
+    background-color: govuk-functional-colour(body-background);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: $padding-tablet;
     }
 
@@ -80,9 +82,9 @@
   }
 
   .govuk-notification-banner--success {
-    border-color: $govuk-success-colour;
+    border-color: govuk-functional-colour(success);
 
-    background-color: $govuk-success-colour;
+    background-color: govuk-functional-colour(success);
 
     .govuk-notification-banner__link {
       @include govuk-link-style-success;

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss

@@ -8,7 +8,7 @@
     align-items: center;
     flex-wrap: wrap;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       align-items: flex-start;
     }
@@ -32,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links
 
     &:hover {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
   }
 
@@ -45,7 +45,7 @@
     // visually sit in the middle of their touch area
     text-align: center;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: block;
     }
   }
@@ -72,7 +72,7 @@
 
   // Only show first, last and non-link items on mobile
   .govuk-pagination__item--current,
-  .govuk-pagination__item--ellipses,
+  .govuk-pagination__item--ellipsis,
   .govuk-pagination__item:first-child,
   .govuk-pagination__item:last-child {
     display: block;
@@ -81,10 +81,10 @@
   .govuk-pagination__item--current {
     @include govuk-typography-weight-bold;
     outline: 1px solid transparent;
-    background-color: $govuk-link-colour;
+    background-color: govuk-functional-colour(link);
 
     &:hover {
-      background-color: $govuk-link-colour;
+      background-color: govuk-functional-colour(link);
     }
 
     .govuk-pagination__link {
@@ -92,9 +92,9 @@
     }
   }
 
-  .govuk-pagination__item--ellipses {
+  .govuk-pagination__item--ellipsis {
     @include govuk-typography-weight-bold;
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
 
     // Remove hover state for ellipsis items as they don't contain links
     &:hover {
@@ -134,7 +134,7 @@
 
     &:focus {
       .govuk-pagination__icon {
-        color: $govuk-focus-text-colour;
+        color: govuk-functional-colour(focus-text);
       }
 
       .govuk-pagination__link-label {
@@ -161,7 +161,7 @@
     // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
     fill: currentcolor;
     forced-color-adjust: auto;
   }
@@ -194,7 +194,8 @@
 
     // Only apply a border between prev and next if both are present
     .govuk-pagination__prev + .govuk-pagination__next {
-      border-top: 1px solid $govuk-border-colour;
+      border-top: 1px solid;
+      border-top-color: govuk-functional-colour(border);
     }
 
     // Set the after pseudo element to a block which makes the title visually

data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -11,8 +11,8 @@
 
     text-align: center;
 
-    @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
+    @media #{govuk-until-breakpoint(tablet)} {
+      padding: govuk-spacing(4) - $govuk-border-width;
 
       // This is an if-all-else-fails attempt to stop long words from
       // overflowing the container on very narrow viewports by forcing them to
@@ -36,9 +36,9 @@
     color: govuk-colour("white");
     background: govuk-colour("green");
 
-    @include govuk-media-query($media-type: print) {
+    @media print {
       border-color: currentcolor;
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
       background: none;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss

@@ -8,7 +8,7 @@
     //   breakpoint
     // - being display: flex above the mobile breakpoint
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       flex-direction: row;
 
       // The default of `stretch` makes the toggle button appear taller than the
@@ -41,7 +41,7 @@
       display: none;
     }
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       // Buttons are normally 100% wide on mobile, but we don't want that here
       width: auto;
       flex-shrink: 0;

data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js

@@ -353,7 +353,7 @@
         return 'other';
       }
       const translation = this.translations[lookupKey];
-      const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
+      const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : 'other';
       if (isObject(translation)) {
         if (preferredForm in translation) {
           return preferredForm;
@@ -364,132 +364,7 @@
       }
       throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
     }
-    selectPluralFormUsingFallbackRules(count) {
-      count = Math.abs(Math.floor(count));
-      const ruleset = this.getPluralRulesForLocale();
-      if (ruleset) {
-        return I18n.pluralRules[ruleset](count);
-      }
-      return 'other';
-    }
-    getPluralRulesForLocale() {
-      const localeShort = this.locale.split('-')[0];
-      for (const pluralRule in I18n.pluralRulesMap) {
-        const languages = I18n.pluralRulesMap[pluralRule];
-        if (languages.includes(this.locale) || languages.includes(localeShort)) {
-          return pluralRule;
-        }
-      }
-    }
   }
-  I18n.pluralRulesMap = {
-    arabic: ['ar'],
-    chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
-    french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
-    german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
-    irish: ['ga'],
-    russian: ['ru', 'uk'],
-    scottish: ['gd'],
-    spanish: ['pt-PT', 'it', 'es'],
-    welsh: ['cy']
-  };
-  I18n.pluralRules = {
-    arabic(n) {
-      if (n === 0) {
-        return 'zero';
-      }
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n % 100 >= 3 && n % 100 <= 10) {
-        return 'few';
-      }
-      if (n % 100 >= 11 && n % 100 <= 99) {
-        return 'many';
-      }
-      return 'other';
-    },
-    chinese() {
-      return 'other';
-    },
-    french(n) {
-      return n === 0 || n === 1 ? 'one' : 'other';
-    },
-    german(n) {
-      return n === 1 ? 'one' : 'other';
-    },
-    irish(n) {
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n >= 3 && n <= 6) {
-        return 'few';
-      }
-      if (n >= 7 && n <= 10) {
-        return 'many';
-      }
-      return 'other';
-    },
-    russian(n) {
-      const lastTwo = n % 100;
-      const last = lastTwo % 10;
-      if (last === 1 && lastTwo !== 11) {
-        return 'one';
-      }
-      if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-        return 'few';
-      }
-      if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-        return 'many';
-      }
-      return 'other';
-    },
-    scottish(n) {
-      if (n === 1 || n === 11) {
-        return 'one';
-      }
-      if (n === 2 || n === 12) {
-        return 'two';
-      }
-      if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-        return 'few';
-      }
-      return 'other';
-    },
-    spanish(n) {
-      if (n === 1) {
-        return 'one';
-      }
-      if (n % 1000000 === 0 && n !== 0) {
-        return 'many';
-      }
-      return 'other';
-    },
-    welsh(n) {
-      if (n === 0) {
-        return 'zero';
-      }
-      if (n === 1) {
-        return 'one';
-      }
-      if (n === 2) {
-        return 'two';
-      }
-      if (n === 3) {
-        return 'few';
-      }
-      if (n === 6) {
-        return 'many';
-      }
-      return 'other';
-    }
-  };
 
   /**
    * Password input component

data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs

@@ -347,7 +347,7 @@ class I18n {
       return 'other';
     }
     const translation = this.translations[lookupKey];
-    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
+    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : 'other';
     if (isObject(translation)) {
       if (preferredForm in translation) {
         return preferredForm;
@@ -358,132 +358,7 @@ class I18n {
     }
     throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
   }
-  selectPluralFormUsingFallbackRules(count) {
-    count = Math.abs(Math.floor(count));
-    const ruleset = this.getPluralRulesForLocale();
-    if (ruleset) {
-      return I18n.pluralRules[ruleset](count);
-    }
-    return 'other';
-  }
-  getPluralRulesForLocale() {
-    const localeShort = this.locale.split('-')[0];
-    for (const pluralRule in I18n.pluralRulesMap) {
-      const languages = I18n.pluralRulesMap[pluralRule];
-      if (languages.includes(this.locale) || languages.includes(localeShort)) {
-        return pluralRule;
-      }
-    }
-  }
 }
-I18n.pluralRulesMap = {
-  arabic: ['ar'],
-  chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
-  french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
-  german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
-  irish: ['ga'],
-  russian: ['ru', 'uk'],
-  scottish: ['gd'],
-  spanish: ['pt-PT', 'it', 'es'],
-  welsh: ['cy']
-};
-I18n.pluralRules = {
-  arabic(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n % 100 >= 3 && n % 100 <= 10) {
-      return 'few';
-    }
-    if (n % 100 >= 11 && n % 100 <= 99) {
-      return 'many';
-    }
-    return 'other';
-  },
-  chinese() {
-    return 'other';
-  },
-  french(n) {
-    return n === 0 || n === 1 ? 'one' : 'other';
-  },
-  german(n) {
-    return n === 1 ? 'one' : 'other';
-  },
-  irish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 6) {
-      return 'few';
-    }
-    if (n >= 7 && n <= 10) {
-      return 'many';
-    }
-    return 'other';
-  },
-  russian(n) {
-    const lastTwo = n % 100;
-    const last = lastTwo % 10;
-    if (last === 1 && lastTwo !== 11) {
-      return 'one';
-    }
-    if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-      return 'few';
-    }
-    if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-      return 'many';
-    }
-    return 'other';
-  },
-  scottish(n) {
-    if (n === 1 || n === 11) {
-      return 'one';
-    }
-    if (n === 2 || n === 12) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-      return 'few';
-    }
-    return 'other';
-  },
-  spanish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n % 1000000 === 0 && n !== 0) {
-      return 'many';
-    }
-    return 'other';
-  },
-  welsh(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n === 3) {
-      return 'few';
-    }
-    if (n === 6) {
-      return 'many';
-    }
-    return 'other';
-  }
-};
 
 /**
  * Password input component

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss

@@ -5,7 +5,15 @@
     padding-top: govuk-spacing(2);
     padding-bottom: govuk-spacing(2);
 
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
+  }
+
+  // If the phase banner is already contained within a .govuk-width-container,
+  // don't double up the left and right margins on narrow viewports.
+  .govuk-width-container .govuk-phase-banner.govuk-width-container {
+    margin-right: 0;
+    margin-left: 0;
   }
 
   .govuk-phase-banner__content {
@@ -18,12 +26,10 @@
 
   .govuk-phase-banner__content__tag {
     @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
+    margin-right: govuk-spacing(3);
 
-    @if $govuk-new-typography-scale {
-      @include govuk-media-query($from: tablet) {
-        margin-right: govuk-spacing(2);
-      }
+    @media #{govuk-from-breakpoint(tablet)} {
+      margin-right: govuk-spacing(2);
     }
   }
 

data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss

@@ -121,7 +121,7 @@
       outline-color: Highlight;
     }
 
-    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+    box-shadow: 0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus);
   }
 
   // Selected state
@@ -145,7 +145,7 @@
   // =========================================================
 
   .govuk-radios--inline {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
@@ -188,7 +188,8 @@
     @include govuk-responsive-margin(4, "bottom");
     margin-left: $conditional-margin-left;
     padding-left: $conditional-padding-left;
-    border-left: $conditional-border-width solid $govuk-border-colour;
+    border-left: $conditional-border-width solid;
+    border-left-color: govuk-functional-colour(border);
 
     .govuk-frontend-supported &--hidden {
       display: none;
@@ -288,7 +289,7 @@
       // Apply an outline for those modes to use instead.
       outline: $govuk-radios-focus-width dashed transparent;
       outline-offset: 1px;
-      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+      box-shadow: 0 0 0 $govuk-hover-width govuk-functional-colour(hover);
     }
 
     // Because we've overridden the border-shadow provided by the focus state,
@@ -303,8 +304,8 @@
       }
       // prettier-ignore
       box-shadow:
-        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
-        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+        0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus), // 1
+        0 0 0 $govuk-hover-width govuk-functional-colour(hover); // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -319,7 +320,7 @@
       }
 
       .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
-        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+        box-shadow: 0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus);
       }
     }
   }