From a73f03736842f5700a8cc2857641c35b167f2479 Mon Sep 17 00:00:00 2001
From: Dan Badea <v-dbadea@digitalocean.com>
Date: Tue, 10 Oct 2023 20:15:56 +0300
Subject: [PATCH] Update code block theme colors

---
 CHANGELOG.md                                |   1 +
 styles/_callouts.scss                       |   2 +-
 styles/_code.scss                           |   2 +-
 styles/_code_prism.scss                     |  12 +-
 styles/_code_secondary_label.scss           |   2 +-
 styles/_highlight.scss                      |   4 +-
 styles/_mixins.scss                         |  14 +-
 styles/_theme.scss                          | 245 +++++++++++++-------
 styles/_typography.scss                     |  21 +-
 styles/digitalocean/_callouts.scss          |  16 +-
 styles/digitalocean/_code_environments.scss |  24 +-
 11 files changed, 220 insertions(+), 123 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d23b0b6..2965f4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ breaking changes to the options supported by the plugin will be shipped as a bre
 
 ## Unreleased changes
 
+- (minor) New design system colors
 <!--
 All changes being submitted through PRs should be added to this section.
 Please add a new list item to the top of this section with a summary of the change.
diff --git a/styles/_callouts.scss b/styles/_callouts.scss
index 46369b3..52aa5e7 100644
--- a/styles/_callouts.scss
+++ b/styles/_callouts.scss
@@ -21,7 +21,7 @@ $callouts-label-class: "callout-label" !default;
 
 // Callouts
 .#{$callouts-class} {
-    background-color: $blue5;
+    background-color: $blue3;
     border-radius: 16px;
     color: $blue1;
     display: block;
diff --git a/styles/_code.scss b/styles/_code.scss
index 011f812..2b03da7 100644
--- a/styles/_code.scss
+++ b/styles/_code.scss
@@ -30,7 +30,7 @@ code {
 
 // Code blocks
 pre {
-    @include code-block-theme($gray2, $white);
+    @include code-block-theme($code-background-dark, $code-text-dark);
 
     border-radius: 16px;
     display: block;
diff --git a/styles/_code_prism.scss b/styles/_code_prism.scss
index 85ae4eb..4982d42 100644
--- a/styles/_code_prism.scss
+++ b/styles/_code_prism.scss
@@ -21,12 +21,12 @@ limitations under the License.
 pre {
     &[class*="language-"] {
         > code {
-            @include prism-theme-punctuation($gray9);
-            @include prism-theme-comment($gray8);
-            @include prism-theme-selector($blue3);
-            @include prism-theme-variable(#29e3ab);
-            @include prism-theme-function(#ff4084);
-            @include prism-theme-number($blue-raspberry);
+            @include prism-theme-punctuation($code-text-dark);
+            @include prism-theme-comment($code-text-dark);
+            @include prism-theme-selector($code-selector-dark);
+            @include prism-theme-variable($code-variable-dark);
+            @include prism-theme-function($code-function-dark);
+            @include prism-theme-number($code-number-dark);
 
             background: transparent;
 
diff --git a/styles/_code_secondary_label.scss b/styles/_code_secondary_label.scss
index 5aa7fb4..81eca09 100644
--- a/styles/_code_secondary_label.scss
+++ b/styles/_code_secondary_label.scss
@@ -22,7 +22,7 @@ $code-secondary-label-class: "secondary-code-label" !default;
 pre {
     code {
         .#{$code-secondary-label-class} {
-            color: $blue-raspberry;
+            color: $lake2;
             margin: 0 0 4px;
         }
     }
diff --git a/styles/_highlight.scss b/styles/_highlight.scss
index c74fe2e..8a4ae53 100644
--- a/styles/_highlight.scss
+++ b/styles/_highlight.scss
@@ -18,7 +18,7 @@ limitations under the License.
 
 // Highlight
 mark {
-    background: rgba($highlight, 0.35);
+    background: $code-highlight;
     border-radius: 8px;
     color: inherit;
     display: inline;
@@ -38,7 +38,7 @@ mark {
 pre {
     code {
         mark {
-            background: rgba($highlight-dark, 0.35);
+            background: $code-highlight-dark;
 
             mark {
                 background: none;
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
index f03f315..2074058 100644
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -38,17 +38,17 @@ limitations under the License.
     &:not(:disabled) {
         &:hover,
         &:focus {
-            background: $blue5;
+            background: $blue3;
         }
     }
 }
 
-@mixin code-block-theme($background, $text) {
-    background: $background;
-    color: $text;
+@mixin code-block-theme($code-background, $code-text) {
+    background: $code-background;
+    color: $code-text;
 
     code {
-        color: $text;
+        color: $code-text;
     }
 
     // Prefixes
@@ -57,7 +57,7 @@ limitations under the License.
             ol {
                 li {
                     &::before {
-                        color: $text;
+                        color: $code-text;
                     }
                 }
             }
@@ -68,7 +68,7 @@ limitations under the License.
                 ol {
                     li {
                         &::before {
-                            border-right-color: rgba($text, 0.5);
+                            border-right-color: rgba($code-text, 0.5);
                         }
                     }
                 }
diff --git a/styles/_theme.scss b/styles/_theme.scss
index 54b31e6..df1798c 100644
--- a/styles/_theme.scss
+++ b/styles/_theme.scss
@@ -14,87 +14,172 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// Neutral Colors
 $black: #000000 !default;
-$white: #ffffff !default;
-
-// Grays
-$gray1: #000c2b !default;
-$gray2: #081b4b !default;
-$gray3: #24335a !default;
-$gray4: #4d5b7c !default;
-$gray5: #8a96b5 !default;
-$gray6: #aab3ca !default;
-$gray7: #d6dcea !default;
-$gray8: #e3e8f4 !default;
-$gray9: #eff2fb !default;
-$gray10: #f9fafe !default;
-
-// Blues
-$blue1: #002c9b !default;
-$blue2: #0069ff !default;
-$blue3: #4994ff !default;
-$blue4: #92bfff !default;
-$blue5: #c8dfff !default;
-$blue6: #e4f2f9 !default;
-$blue-hover: #1253fa !default;
-
-// Purples
-$purple1: #32087a !default;
-$purple2: #6414ee !default;
-$purple3: #9c64ff !default;
-$purple4: #d8c1ff !default;
-$purple5: #eadeff !default;
-
-// Fuchsias
-$fuchsia1: #660066 !default;
-$fuchsia2: #ff1eff !default;
-$fuchsia3: #ff8cff !default;
-$fuchsia4: #ffc0ff !default;
-$fuchsia5: #ffdeff !default;
-
-// Reds
-$red1: #820800 !default;
-$red2: #ff3a2e !default;
-$red3: #ff8c84 !default;
-$red4: #ffbcb7 !default;
-$red5: #ffe2e0 !default;
-
-// Oranges
-$orange1: #783200 !default;
-$orange2: #ff720e !default;
-$orange3: #ff9950 !default;
-$orange4: #ffcba6 !default;
-$orange5: #ffebdd !default;
-
-// Greens
-$green1: #005955 !default;
-$green2: #00a099 !default;
-$green3: #33cfc8 !default;
-$green4: #98dfdc !default;
-$green5: #d4efee !default;
-
-// Teals
-$teal1: #00455b !default;
-$teal2: #00bfff !default;
-$teal3: #7bdeff !default;
-$teal4: #9adef4 !default;
-$teal5: #cfeaf3 !default;
-
-// Code
-$honeydew: #ffc001 !default;
-$pear: #d7e200 !default;
-$lime: #80d34a !default;
-$green-apple: #00d688 !default;
-$aqua: #01d0c0 !default;
-$blue-raspberry: #00c6ff !default;
-$blueberry: #2a82ff !default;
-$dragonfruit: #b458fc !default;
-$raspberry: #e681ff !default;
-$strawberry: #ff4c6c !default;
-
-// Highlight
-$highlight: #f2c94c !default;
-$highlight-dark: #41fff4 !default;
+$neutral1: #000C79 !default;
+$neutral2: #40499B !default;
+$neutral3: #696FB0 !default;
+$neutral4: #D9DBEB !default;
+$neutral5: #F9FAFE !default;
+$white: #FFFFFF !default;
+
+// Gray Colors
+$gray1: #000C2A !default;
+$gray2: #081B4B !default;
+$gray3: #24335A !default;
+$gray4: #4D5B7C !default;
+$gray5: #8A96B5 !default;
+$gray6: #A9B3CA !default;
+$gray7: #D6DCEA !default;
+$gray8: #E3E8F4 !default;
+$gray9: #EFF2FB !default;
+$gray10: #F9FAFE !default;
+
+// Blue Colors
+$blue1: #1433D6 !default;
+$blue2: #0069FF !default;
+$blue3: #C6E3FF !default;
+
+// Purple Colors
+$purple1: #300091 !default;
+$purple2: #6414EE !default;
+$purple3: #A8A4EE !default;
+
+// Green Colors
+$green1: #006650 !default;
+$green2: #00C483 !default;
+$green3: #8CE4DA !default;
+
+// Teal Colors
+$teal1: #006375 !default;
+$teal2: #00AFCE !default;
+$teal3: #B1E4F1 !default;
+
+// Fuchsia Colors
+$fuchsia1: #8917A6 !default;
+$fuchsia2: #CA64DD !default;
+$fuchsia3: #EBBFEB !default;
+
+// Custom Colors
+$honeydew: #FFC001 !default;
+$pear: #D7E200 !default;
+$lime: #80D34A !default;
+$green-apple: #00D688 !default;
+$plum: #6414EE !default;
+$dragon-fruit: #B458FC !default;
+$raspberry: #FF4C6C !default;
+$orange: #FF720E !default;
+
+// Vivid Sky Colors
+$vivid-sky1: #0BE1FF !default;
+$vivid-sky2: #75EEFF !default;
+$vivid-sky3: #B5F6FF !default;
+$vivid-sky4: #F4FEFF !default;
+
+// Sea Green Colors
+$sea-green1: #00F4C8 !default;
+$sea-green2: #75FFE6 !default;
+$sea-green3: #B5FFF1 !default;
+$sea-green4: #F4FFFD !default;
+
+// Guppie Green Colors
+$guppie-green1: #0BFF8A !default;
+$guppie-green2: #75FFBD !default;
+$guppie-green3: #B5FFDB !default;
+$guppie-green4: #F4FFFA !default;
+
+// Kiwi Colors
+$kiwi1: #80D34A !default;
+$kiwi2: #B1E490 !default;
+$kiwi3: #D5F0C3 !default;
+$kiwi4: #F9FDF6 !default;
+
+// Bitter Lemon Colors
+$bitter-lemon1: #D4DF00 !default;
+$bitter-lemon2: #F3FF0B !default;
+$bitter-lemon3: #FBFFB5 !default;
+$bitter-lemon4: #FEFFF4 !default;
+
+// Metallic Yellow Colors
+$metallic-yellow1: #FFC90B !default;
+$metallic-yellow2: #FFE175 !default;
+$metallic-yellow3: #FFEFB5 !default;
+$metallic-yellow4: #FFFDF4 !default;
+
+// Spray Tan Colors
+$spraytan1: #FFA14A !default;
+$spraytan2: #FFB775 !default;
+$spraytan3: #FFD8B5 !default;
+$spraytan4: #FFF9F4 !default;
+
+// Tulip Colors
+$tulip1: #FF928A !default;
+$tulip2: #FFBAB5 !default;
+$tulip3: #FFE1DF !default;
+$tulip4: #FFF5F4 !default;
+
+// Pink Elephants Colors
+$pink-elephants1: #FF9FEA !default;
+$pink-elephants2: #FFB5EF !default;
+$pink-elephants3: #FFCAF3 !default;
+$pink-elephants4: #FFF4FD !default;
+
+// Lavender Colors
+$lavender1: #E88AFF !default;
+$lavender2: #F0B5FF !default;
+$lavender3: #F9DFFF !default;
+$lavender4: #FDF4FF !default;
+
+// Lilac Colors
+$lilac1: #BBA7F7 !default;
+$lilac2: #D9CEFB !default;
+$lilac3: #E8E2FC !default;
+$lilac4: #F7F5FE !default;
+
+// Jordy Blue Colors
+$jordy-blue1: #8AABFF !default;
+$jordy-blue2: #CAD9FF !default;
+$jordy-blue3: #DFE8FF !default;
+$jordy-blue4: #F4F7FF !default;
+
+// Lake Colors
+$lake1: #4ABEFF !default;
+$lake2: #9FDDFF !default;
+$lake3: #CAECFF !default;
+$lake4: #F4FBFF !default;
+
+// Mustard Colors
+$mustard1: #FFE50B !default;
+$mustard2: #FFF075 !default;
+$mustard3: #FFF7B5 !default;
+$mustard4: #FFFEF4 !default;
+
+// Code Block Backgrounds Colors
+$code-secondary: #F4FBFF !default;
+$code-tertiary: #FFF9F4 !default;
+$code-quaternary: #F9FDF6 !default;
+$code-quinary: #FFF4FD !default;
+
+// Code Block Light Colors
+$code-background: #F7F8FB !default;
+$code-text: #11192E !default;
+$code-highlight: #E3E8F4 !default;
+$code-selector: #0F2FDA !default;
+$code-function: #7300B9 !default;
+$code-number: #00507D !default;
+$code-variable: #00573A !default;
+
+// Code Block Dark Colors
+$code-background-dark: #11192E !default;
+$code-text-dark: #F7F8FB !default;
+$code-highlight-dark: #29334D !default;
+$code-selector-dark: #9FDDFF !default;
+$code-function-dark: #FFAF8C !default;
+$code-number-dark: #0BE1FF !default;
+$code-variable-dark: #B1E490 !default;
+
+// Accent Colors
+$card-stroke: rgba(17, 25, 46, 0.1) !default;
 
 // Breakpoints
 $small-phone: 320 !default;
diff --git a/styles/_typography.scss b/styles/_typography.scss
index 36c78a0..478bc3e 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -54,9 +54,15 @@ h4,
 h5,
 h6 {
     a {
-        border-bottom: none;
+        background-size: 0 0;
         color: inherit;
         text-decoration: none;
+
+        &:hover,
+        &:focus {
+            color: $gray1;
+            background-size: 0 0;
+        }
     }
 }
 
@@ -89,15 +95,20 @@ ol {
 
 // Links
 a {
-    border-bottom: 1px solid $blue2;
+    background: linear-gradient($blue2, $blue2) bottom repeat-x;
+    background-size: 1px 1px;
+    border-bottom: none;
     color: $blue2;
     text-decoration: none;
-    transition: color 0.25s, border-bottom-color 0.25s;
+    transition:
+        background 300ms ease-in-out,
+        color 300ms ease-in-out;
 
     &:hover,
     &:focus {
-        border-bottom-color: $blue-hover;
-        color: $blue-hover;
+        background: linear-gradient($blue1, $blue1) bottom repeat-x;
+        background-size: 100% 100%;
+        color: $white;
     }
 
     code {
diff --git a/styles/digitalocean/_callouts.scss b/styles/digitalocean/_callouts.scss
index df5704c..5a9e0f2 100644
--- a/styles/digitalocean/_callouts.scss
+++ b/styles/digitalocean/_callouts.scss
@@ -19,22 +19,22 @@ limitations under the License.
 // DigitalOcean-usage-specific callout styling
 .callout {
     &.note {
-        background-color: $green5;
-        color: $green1;
+        background-color: $kiwi3;
+        color: $gray1;
     }
 
     &.warning {
-        background-color: $red5;
-        color: $red1;
+        background-color: $tulip2;
+        color: $gray1;
     }
 
     &.info {
-        background-color: $blue5;
-        color: $blue1;
+        background-color: $blue3;
+        color: $gray1;
     }
 
     &.draft {
-        background-color: $fuchsia4;
-        color: $fuchsia1;
+        background-color: $fuchsia3;
+        color: $gray1;
     }
 }
diff --git a/styles/digitalocean/_code_environments.scss b/styles/digitalocean/_code_environments.scss
index 0af7f52..3fd65c0 100644
--- a/styles/digitalocean/_code_environments.scss
+++ b/styles/digitalocean/_code_environments.scss
@@ -22,12 +22,12 @@ pre {
     // Environments use light-mode base
     &[class*="environment-"] {
         > code {
-            @include prism-theme-punctuation($gray6);
-            @include prism-theme-comment($gray5);
-            @include prism-theme-selector($blue2);
-            @include prism-theme-variable(#08966b);
-            @include prism-theme-function(#e0276a);
-            @include prism-theme-number(#225196);
+            @include prism-theme-punctuation($code-text);
+            @include prism-theme-comment($code-text);
+            @include prism-theme-selector($code-selector);
+            @include prism-theme-variable($code-variable);
+            @include prism-theme-function($code-function);
+            @include prism-theme-number($code-number);
         }
 
         .secondary-code-label {
@@ -35,7 +35,7 @@ pre {
         }
 
         mark {
-            background: rgba($highlight, 0.35);
+            background: rgba($code-highlight, 0.35);
 
             mark {
                 background: none;
@@ -44,22 +44,22 @@ pre {
     }
 
     &.environment-local {
-        @include code-block-theme($gray8, $gray4);
+        @include code-block-theme($code-background, $code-text);
     }
 
     &.environment-second {
-        @include code-block-theme(rgba($blue5, 0.5), $blue1);
+        @include code-block-theme($code-secondary, $code-text);
     }
 
     &.environment-third {
-        @include code-block-theme(rgba($red5, 0.5), $red1);
+        @include code-block-theme($code-tertiary, $code-text);
     }
 
     &.environment-fourth {
-        @include code-block-theme(rgba($green5, 0.5), $green1);
+        @include code-block-theme($code-quaternary, $code-text);
     }
 
     &.environment-fifth {
-        @include code-block-theme(rgba($fuchsia5, 0.5), $fuchsia1);
+        @include code-block-theme($code-quinary, $code-text);
     }
 }