Update theme colours to match new brand guidelines

Author: huijing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {
@@ -20,6 +20,6 @@
     "url": "https://github.com/interledger/docs-design-system"
   },
   "dependencies": {
-    "mermaid": "^10.6.1"
+    "mermaid": "^10.8.0"
   }
 }

src/styles/ilf-docs.css

@@ -53,7 +53,7 @@
 }
 
 :focus-visible {
-  outline-color: var(--color-accent-mid);
+  outline-color: var(--sl-color-accent);
   border-radius: var(--border-radius);
 }
 
@@ -87,7 +87,7 @@
 }
 
 .sidebar-content a {
-  padding: var(--space-2xs) var(--sl-sidebar-item-padding-inline);
+  padding-block: var(--space-2xs);
 }
 
 .sidebar-content summary {
@@ -216,7 +216,7 @@
   }
 
   .sl-container > h1:first-of-type::after {
-    background-color: var(--color-accent-secondary);
+    background-color: var(--color-accent-highlight);
     height: 12px;
     top: -12px;
     z-index: -1;
@@ -233,7 +233,7 @@
   }
 
   h3::after {
-    background-color: var(--color-accent-secondary);
+    background-color: var(--color-accent-highlight);
     height: 8px;
     bottom: 0px;
     z-index: -1;
@@ -462,7 +462,7 @@ label {
 }
 
 input:not([type="submit"]):not([type="file"]):not(.pagefind-ui__search-input) {
-  border: 1px solid var(--color-accent-mid);
+  border: 1px solid var(--sl-color-accent);
   padding: var(--space-3xs) var(--space-2xs);
   border-radius: var(--border-radius);
   margin-top: var(--space-3xs);
@@ -474,7 +474,7 @@ input:not([type="submit"]):not([type="file"]):focus {
 }
 
 ::placeholder {
-  color: var(--color-accent-mid);
+  color: var(--sl-color-accent-high);
   opacity: 0.6;
 }
 

src/styles/orange-theme.css

@@ -3,19 +3,17 @@
 ::backdrop {
   /* Colors (dark mode) */
   --sl-hue-accent: 11;
-  --sl-color-accent-low: hsl(var(--sl-hue-accent), 60%, 15%); /* darkest */
-  --sl-color-accent: hsl(var(--sl-hue-accent), 99%, 41%);
+  --sl-color-accent-low: hsl(var(--sl-hue-accent), 55%, 12%); /* darkest */
+  --sl-color-accent: hsl(var(--sl-hue-accent), 98%, 41%);
   --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%); /* lightest */
-  --color-accent-mid: hsl(5, 99%, 62%);
-  --color-accent-secondary: hsl(176, 92%, 25%);
+  --color-accent-highlight: hsl(176, 92%, 25%);
 }
 
 :root[data-theme="light"],
 [data-theme="light"] ::backdrop {
   /* Colours (light mode) */
-  --sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%); /* darkest */
-  --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 40%);
+  --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 29%); /* darkest */
+  --sl-color-accent: hsl(var(--sl-hue-accent), 98%, 41%);
   --sl-color-accent-low: hsl(var(--sl-hue-accent), 100%, 97%); /* lightest */
-  --color-accent-mid: hsl(5, 99%, 62%);
-  --color-accent-secondary: hsl(165, 90%, 78%);
+  --color-accent-highlight: hsl(165, 90%, 78%);
 }

src/styles/green-theme.css renamed to src/styles/teal-theme.css

@@ -2,20 +2,18 @@
 :root,
 ::backdrop {
   /* Colors (dark mode) */
-  --sl-hue-accent: 158;
+  --sl-hue-accent: 180;
   --sl-color-accent-low: hsl(var(--sl-hue-accent), 60%, 15%); /* darkest */
-  --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 25%);
+  --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 23%);
   --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%); /* lightest */
-  --color-accent-mid: hsl(157, 100%, 32%);
-  --color-accent-secondary: hsl(176, 92%, 25%);
+  --color-accent-highlight: hsl(176, 92%, 25%);
 }
 
 :root[data-theme="light"],
 [data-theme="light"] ::backdrop {
   /* Colours (light mode) */
-  --sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%); /* darkest */
-  --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 25%);
+  --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 19%); /* darkest */
+  --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 23%);
   --sl-color-accent-low: hsl(var(--sl-hue-accent), 100%, 97%); /* lightest */
-  --color-accent-mid: hsl(157, 100%, 32%);
-  --color-accent-secondary: hsl(165, 90%, 78%);
+  --color-accent-highlight: hsl(165, 90%, 78%);
 }