From 4addf1bba7345d3d64ccb04b78089035adae47a0 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:06:25 +0100
Subject: [PATCH 1/9] Add .prettierignore

---
 .prettierignore | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..bea80be901
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+# It's pretty common for devs to have prettier configured to format on save,
+# so let's include some config to prevent it messing up files in this repo
+
+# Prettier struggles with the kramdown extensions
+*.md
+
+# Our stylesheets use a particular in-house(?) style
+*.scss

From 1158a25c87cf2c9aff8ec523c1cf8ba917b40176 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:22:45 +0100
Subject: [PATCH 2/9] Add .editorconfig

---
 .editorconfig | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..029969f59e
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,5 @@
+root = true
+
+[*.{scss,html,md}]
+indent_style = space
+indent_size = 2

From 7f1fd5c52c928e055c5af14dbaae252a130b7478 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 14:32:06 +0100
Subject: [PATCH 3/9] Add color palette definitions

---
 _scss/_color-palette.scss | 97 +++++++++++++++++++++++++++++++++++++++
 css/style.scss            |  1 +
 2 files changed, 98 insertions(+)
 create mode 100644 _scss/_color-palette.scss

diff --git a/_scss/_color-palette.scss b/_scss/_color-palette.scss
new file mode 100644
index 0000000000..3b5c88e6a6
--- /dev/null
+++ b/_scss/_color-palette.scss
@@ -0,0 +1,97 @@
+$red-10: #f8a09a;
+$red-20: #f3847e;
+$red-30: #ee635f;
+$red-40: #e9524f;
+$red-50: #e44141;
+$red-60: #da3333;
+$red-70: #c82828;
+$red-80: #b21c1c;
+$red-90: #9e1011;
+$red-100: #8c0607;
+
+$magenta-10: #fbd5fa;
+$magenta-20: #f5b8f3;
+$magenta-30: #ef94eb;
+$magenta-40: #e96fe4;
+$magenta-50: #e34adc;
+$magenta-60: #dd26d5;
+$magenta-70: #cc18c4;
+$magenta-80: #a611a0;
+$magenta-90: #7b0a76;
+$magenta-100: #530450;
+
+$purple-10: #d4c1f8;
+$purple-20: #bca5ea;
+$purple-30: #aa92dc;
+$purple-40: #987ece;
+$purple-50: #866abf;
+$purple-60: #7457b1;
+$purple-70: #6243a3;
+$purple-80: #4e2d8f;
+$purple-90: #3c1980;
+$purple-100: #270769;
+
+$marine-10: #9fd1f9;
+$marine-20: #6fb6f6;
+$marine-30: #4ba0f3;
+$marine-40: #268aef;
+$marine-50: #007bff;
+$marine-60: #0162cc;
+$marine-70: #0151ad;
+$marine-80: #003f8c;
+$marine-90: #002c66;
+$marine-100: #0b214a;
+
+$grey-10: #d7dade;
+$grey-20: #b9c2c9;
+$grey-30: #a5b1ba;
+$grey-40: #90a0ac;
+$grey-50: #768491;
+$grey-60: #5a6774;
+$grey-70: #404d59;
+$grey-80: #26323f;
+$grey-90: #17222f;
+$grey-100: #161f2a;
+
+$blue-10: #c4f0ff;
+$blue-20: #98e0ff;
+$blue-30: #71cfff;
+$blue-40: #51bcfd;
+$blue-50: #37aaf7;
+$blue-60: #2496ed;
+$blue-70: #1282d7;
+$blue-80: #076cad;
+$blue-90: #025391;
+$blue-100: #004375;
+
+$green-10: #c7efe6;
+$green-20: #aae8d8;
+$green-30: #8de0ca;
+$green-40: #70d8bd;
+$green-50: #54d1b0;
+$green-60: #43b899;
+$green-70: #33977e;
+$green-80: #237663;
+$green-90: #135446;
+$green-100: #094539;
+
+$orange-10: #fef5c3;
+$orange-20: #f9e3ae;
+$orange-30: #f5d19a;
+$orange-40: #f0bf85;
+$orange-50: #ecad71;
+$orange-60: #e79a5c;
+$orange-70: #e28847;
+$orange-80: #db7432;
+$orange-90: #d4611d;
+$orange-100: #cc4e09;
+
+$white-0: #ffffff;
+$white-5: #fafafb;
+$white-10: #f7f7f8;
+$white-15: #f2f3f5;
+$white-25: #e9ebee;
+
+$black-0: #0f161e;
+$black-5: #121a24;
+$black-15: #151c26;
diff --git a/css/style.scss b/css/style.scss
index 011ef83db2..48070beebb 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -3,6 +3,7 @@
 ---
 
 @import "breakpoint";
+@import "color-palette";
 @import "variables";
 @import "night-mode";
 @import "base";

From 8441af3931691a30d099cbb7144a20e5333193a7 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:22:38 +0100
Subject: [PATCH 4/9] _notes.scss: Simplify handling of legacy notes

---
 _scss/_notes.scss | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index 32142859d7..b69cbb2918 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -4,7 +4,10 @@ blockquote {
   border-left-color: $note-color;
   font-size:         unset; // override bootstrap font-size for blockquotes
 
-  > p:first-child {
+  // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
+  // but we have some notes that don't have headers; if there's only one child of the note,
+  // assume it's not a header
+  > p:first-child:not(:only-child) {
     color:       $note-color;
     font-weight: 700;
     margin-top:  0;
@@ -15,16 +18,6 @@ blockquote {
     }
   }
 
-  // Maintain backwards compatibility with old note style
-  > p:only-child {
-    color:       inherit;
-    font-weight: inherit;
-
-    &::before {
-      content: none;
-    }
-  }
-
   &.important {
     border-left-color: $important-color;
 

From 79e36c14a000a9b9b06657f2d950ac51d402a174 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:23:40 +0100
Subject: [PATCH 5/9] _notes.scss: Refactor how different note styles are
 defined

---
 _scss/_notes.scss | 38 +++++++++++++++-----------------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index b69cbb2918..7157289d26 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -1,45 +1,37 @@
 //noinspection CssNoGenericFontName
-blockquote {
-  background-color:  $note-bg-color;
-  border-left-color: $note-color;
+
+
+@mixin notification($bg-color, $primary-color, $icon) {
+  background-color:  $bg-color;
+  border-left-color: $primary-color;
   font-size:         unset; // override bootstrap font-size for blockquotes
 
   // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
   // but we have some notes that don't have headers; if there's only one child of the note,
   // assume it's not a header
   > p:first-child:not(:only-child) {
-    color:       $note-color;
+    color:       $primary-color;
     font-weight: 700;
     margin-top:  0;
 
     &::before {
       font-family: FontAwesome;
-      content:     "\f058 \00a0";
+      content:     "#{$icon} \00a0";
     }
   }
+}
+
+blockquote {
+  :not(.important):not(.warning) {
+    @include notification($note-bg-color, $note-color, "\f058");
+  }
 
   &.important {
-    border-left-color: $important-color;
-
-    > p:first-child {
-      color: $important-color;
-
-      &::before {
-        content: "\f06a  \00a0";
-      }
-    }
+    @include notification($note-bg-color, $important-color, "\f06a");
   }
 
   &.warning {
-    border-left-color: $warning-color;
-
-    > p:first-child {
-      color: $warning-color;
-
-      &::before {
-        content: "\f057  \00a0";
-      }
-    }
+    @include notification($note-bg-color, $warning-color, "\f057");
   }
 }
 

From d67f80377083f8622a0f05b91a5d9ecdc999039b Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 14:39:11 +0100
Subject: [PATCH 6/9] Define new theme for notifications

---
 _scss/_night-mode.scss | 13 -------
 _scss/_notes.scss      | 84 +++++++++++++++++++++++++++++++++++++-----
 2 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss
index b1453f1b2f..d8c7c587ef 100755
--- a/_scss/_night-mode.scss
+++ b/_scss/_night-mode.scss
@@ -68,19 +68,6 @@ body.night {
         background-color: #344658;
         border: 1px solid #192837;
     }
-    blockquote {
-        color: $note-color-night;
-        background: $note-bg-color-night;
-        &.warning, &.warning p:first-child {
-            color: $warning-color-night !important;
-        }
-        &.important {
-            border-left-color: #f5ac45 !important;
-        }
-        &.important, &.important p:first-child {
-            color: $important-color-night !important;
-        }
-    }
     table {
         border: 1px solid #1b1a1a;
         color: #cbdbe6;
diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index 7157289d26..b5bb40fd7d 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -1,16 +1,18 @@
+@use "sass:color";
+
 //noinspection CssNoGenericFontName
 
 
-@mixin notification($bg-color, $primary-color, $icon) {
+@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
   background-color:  $bg-color;
-  border-left-color: $primary-color;
+  border-left-color: $left-border-color;
   font-size:         unset; // override bootstrap font-size for blockquotes
 
   // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
   // but we have some notes that don't have headers; if there's only one child of the note,
   // assume it's not a header
   > p:first-child:not(:only-child) {
-    color:       $primary-color;
+    color:       $header-color;
     font-weight: 700;
     margin-top:  0;
 
@@ -19,19 +21,81 @@
       content:     "#{$icon} \00a0";
     }
   }
+
+  > p:only-child, > p:not(:first-child) {
+    color: $body-text-color;
+  }
 }
 
+
+
 blockquote {
-  :not(.important):not(.warning) {
-    @include notification($note-bg-color, $note-color, "\f058");
+  body.night & {
+    // DARK THEME
+
+    &:not(.important):not(.warning) {
+      @include notification(
+        $bg-color: change-color($marine-10, $alpha: 0.2),
+        $left-border-color: #367AC2,
+        $header-color: $marine-10,
+        $body-text-color: $marine-10,
+        $icon: "\f058"
+      );
+    }
+
+    &.important {
+      @include notification(
+        $bg-color: change-color($orange-60, $alpha: 0.4),
+        $left-border-color: #A16925,
+        $header-color: $orange-20,
+        $body-text-color: $orange-20,
+        $icon: "\f06a"
+      );
+    }
+
+    &.warning {
+      @include notification(
+        $bg-color: change-color($red-60, $alpha: 0.3),
+        $left-border-color: #C0534B,
+        $header-color: $red-10,
+        $body-text-color: $red-10,
+        $icon: "\f057"
+      );
+    }
   }
 
-  &.important {
-    @include notification($note-bg-color, $important-color, "\f06a");
-  }
+  body:not(.night) & {
+    // LIGHT THEME
 
-  &.warning {
-    @include notification($note-bg-color, $warning-color, "\f057");
+    &:not(.important):not(.warning) {
+      @include notification(
+        $bg-color: change-color($marine-10, $alpha: 0.2),
+        $left-border-color: #367ac2,
+        $header-color: #367ac2,
+        $body-text-color: inherit,
+        $icon: "\f058"
+      );
+    }
+
+    &.important {
+      @include notification(
+        $bg-color: change-color($orange-10, $alpha: 0.4),
+        $left-border-color: #A16925,
+        $header-color: #A16925,
+        $body-text-color: inherit,
+        $icon: "\f06a"
+      );
+    }
+
+    &.warning {
+      @include notification(
+        $bg-color: change-color($red-10, $alpha: 0.2),
+        $left-border-color: #c0534b,
+        $header-color: #c0534b,
+        $body-text-color: inherit,
+        $icon: "\f057"
+      );
+    }
   }
 }
 

From 1655359a98060e0ca8944e526f589ceb260db773 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 14:56:39 +0100
Subject: [PATCH 7/9] Add new purple alert type

---
 _scss/_notes.scss | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index b5bb40fd7d..fd68e77df1 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -2,6 +2,25 @@
 
 //noinspection CssNoGenericFontName
 
+/*
+
+These rules control the display of notes/notifications/alerts. They can be used like so:
+
+> **This is a paid feature**
+>
+> Docker Hub Vulnerability Scanning is available for developers subscribed to a Pro or a Team plan. For more information about the pricing plans, see [Docker Pricing](https://www.docker.com/pricing?utm_source=docker&utm_medium=webreferral&utm_campaign=docs_driven_upgrade)
+{: .restricted }
+
+(The first line is always treated as a header, unless it's the only line)
+
+The available classes are:
+
+.important: Yellow
+.warning: Red/orange
+.restricted: Purple, used to indicate features that require paid plans
+[no class]: Blue, the default
+
+*/
 
 @mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
   background-color:  $bg-color;
@@ -33,7 +52,7 @@ blockquote {
   body.night & {
     // DARK THEME
 
-    &:not(.important):not(.warning) {
+    &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
         $left-border-color: #367AC2,
@@ -62,12 +81,22 @@ blockquote {
         $icon: "\f057"
       );
     }
+
+    &.restricted {
+      @include notification(
+        $bg-color: change-color($purple-60, $alpha: 0.44),
+        $left-border-color: $purple-70,
+        $header-color: $purple-10,
+        $body-text-color: $purple-10,
+        $icon: "\f135"
+      );
+    }
   }
 
   body:not(.night) & {
     // LIGHT THEME
 
-    &:not(.important):not(.warning) {
+    &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
         $left-border-color: #367ac2,
@@ -96,6 +125,16 @@ blockquote {
         $icon: "\f057"
       );
     }
+
+    &.restricted {
+      @include notification(
+        $bg-color: change-color($purple-20, $alpha: 0.2),
+        $left-border-color: $purple-70,
+        $header-color: $purple-50,
+        $body-text-color: inherit,
+        $icon: "\f135"
+      );
+    }
   }
 }
 

From 79a6e2879db8438c0b1852be68c42a971714dbd8 Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 15:14:16 +0100
Subject: [PATCH 8/9] Swap ad-hoc colours for palette colours

---
 _scss/_notes.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index fd68e77df1..06c261fcb5 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -55,7 +55,7 @@ blockquote {
     &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
-        $left-border-color: #367AC2,
+        $left-border-color: $blue-80,
         $header-color: $marine-10,
         $body-text-color: $marine-10,
         $icon: "\f058"
@@ -65,7 +65,7 @@ blockquote {
     &.important {
       @include notification(
         $bg-color: change-color($orange-60, $alpha: 0.4),
-        $left-border-color: #A16925,
+        $left-border-color: $orange-90,
         $header-color: $orange-20,
         $body-text-color: $orange-20,
         $icon: "\f06a"
@@ -75,7 +75,7 @@ blockquote {
     &.warning {
       @include notification(
         $bg-color: change-color($red-60, $alpha: 0.3),
-        $left-border-color: #C0534B,
+        $left-border-color: $red-40,
         $header-color: $red-10,
         $body-text-color: $red-10,
         $icon: "\f057"
@@ -99,8 +99,8 @@ blockquote {
     &:not(.important):not(.warning):not(.restricted) {
       @include notification(
         $bg-color: change-color($marine-10, $alpha: 0.2),
-        $left-border-color: #367ac2,
-        $header-color: #367ac2,
+        $left-border-color: $blue-80,
+        $header-color: $blue-80,
         $body-text-color: inherit,
         $icon: "\f058"
       );
@@ -109,8 +109,8 @@ blockquote {
     &.important {
       @include notification(
         $bg-color: change-color($orange-10, $alpha: 0.4),
-        $left-border-color: #A16925,
-        $header-color: #A16925,
+        $left-border-color: $orange-90,
+        $header-color: $orange-90,
         $body-text-color: inherit,
         $icon: "\f06a"
       );
@@ -119,8 +119,8 @@ blockquote {
     &.warning {
       @include notification(
         $bg-color: change-color($red-10, $alpha: 0.2),
-        $left-border-color: #c0534b,
-        $header-color: #c0534b,
+        $left-border-color: $red-40,
+        $header-color: $red-40,
         $body-text-color: inherit,
         $icon: "\f057"
       );

From a23f70d048a957d092a68342ae09011d1ac9418e Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Fri, 9 Jul 2021 17:01:20 +0100
Subject: [PATCH 9/9] Remove redundant SASS module reference

---
 _scss/_notes.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index 06c261fcb5..283a04b90e 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 //noinspection CssNoGenericFontName
 
 /*