Update code block theme colors (#83)

digitalocean · Oct 17, 2023 · 900599c · 900599c
1 parent d58c917
commit 900599c
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 155 deletions.
diff --git 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
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -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
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -24,20 +24,20 @@ code {
     border-radius: 8px;
     color: $gray3;
     font-size: 14px;
-    line-height: 1.4em;
+    line-height: 22px;
     padding: 3px;
 }
 
 // Code blocks
 pre {
-    @include code-block-theme($gray2, $white);
+    @include code-block-theme($code-background-dark, $code-text-dark);
 
     border-radius: 16px;
     display: block;
     margin: 1em 0;
     overflow: auto;
     overflow-wrap: normal;
-    padding: 1em;
+    padding: 24px;
     white-space: normal;
     word-wrap: normal;
 

diff --git a/styles/_code_label.scss b/styles/_code_label.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -24,9 +24,9 @@ $code-label-class: "code-label" !default;
     border-radius: 16px 16px 0 0;
     color: $gray3;
     display: block;
-    font-size: 14px;
+    font-size: 16px;
     margin: 1em 0 0;
-    padding: 0.5em 1em;
+    padding: 12px;
     position: relative;
     text-align: center;
     z-index: 2;

diff --git a/styles/_code_prism.scss b/styles/_code_prism.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -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;
 
@@ -86,8 +86,8 @@ pre {
 
     > .toolbar {
         position: absolute;
-        right: 0.2em;
-        top: 0.3em;
+        right: 24px;
+        top: 24px;
 
         > .toolbar-item {
             display: inline-block;
@@ -97,30 +97,30 @@ pre {
             }
 
             > button {
-                background: none;
                 border: 0;
-                color: inherit;
                 font: inherit;
                 line-height: normal;
                 overflow: visible;
-                padding: 0;
                 user-select: none;
             }
 
             > a,
             > button {
-                background: $white;
-                border-radius: 8px;
+                background: $neutral3;
+                border-radius: 10px;
+                color: $white;
                 cursor: pointer;
-                height: 24px;
-                padding: 0 8px;
-                transition: color 0.25s, background 0.25s;
-                width: auto;
+                padding: 6px 8px;
+                transition: color 0.25s, background 0.25s; 
+
+                span {
+                    color: $white;
+                }
 
                 &:hover,
                 &:focus {
-                    background: $blue3;
-                    color: $gray1;
+                    background: $neutral2;
+                    color: $white;
 
                     span {
                         color: $white;
@@ -131,10 +131,7 @@ pre {
             > a,
             > button,
             > span {
-                color: $gray3;
                 font-size: 0.9em;
-                margin: 0.5em;
-                padding: 0.1em 8px;
             }
         }
     }

diff --git a/styles/_code_secondary_label.scss b/styles/_code_secondary_label.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -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
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -18,12 +18,12 @@ limitations under the License.
 
 // Highlight
 mark {
-    background: rgba($highlight, 0.35);
-    border-radius: 8px;
+    background: rgba($honeydew, 0.30);;
+    border-radius: 2px;
     color: inherit;
     display: inline;
     line-height: calc(1.4em + 1px);
-    padding: 0 2px;
+    padding: 2px 6px;
 
     // Ignore any nested highlighting
     mark {
@@ -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
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -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);
                         }
                     }
                 }