Modify image borders and orange theme highlight

Author: huijing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {

src/components/LargeImg.astro

@@ -23,8 +23,8 @@ img[src$='.svg' i] {
 
 .border {
   border-radius: var(--border-radius);
-  box-shadow: var(--sl-shadow-sm);
-  border: 1px solid var(--sl-color-hairline-light);
+  box-shadow: var(--box-shadow);
+  border: 2px solid var(--color-accent-transparent);
 }
 
 a {

src/components/Mermaid.astro

@@ -3,14 +3,23 @@ interface Props {
   graph: string;
 }
 
-const { graph } = Astro.props;
+const { graph, hasBorder = false } = Astro.props;
 ---
 
-<pre class="mermaid" set:html={graph} />
+{hasBorder ? <pre class="mermaid border" set:html={graph} /> : <pre class="mermaid" set:html={graph} />}
+
 
 <style>
-  pre.mermaid {
+  pre.mermaid.mermaid {
     background-color: transparent;
+    padding: 0;
+    border-color: transparent;
+  }
+
+  pre.border {
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    border: 2px solid var(--color-accent-transparent);
   }
 </style>
 

src/components/MermaidWrapper.astro

@@ -19,8 +19,9 @@ div {
 
 .border :global(svg) {
   border-radius: var(--border-radius);
-  box-shadow: var(--sl-shadow-sm);
-  border: 1px solid var(--sl-color-hairline-light);
+  box-shadow: var(--box-shadow);
+  border: 2px solid var(--color-accent-transparent);
+  padding: var(--space-2xs);
 }
 
 button {

src/styles/ilf-docs.css

@@ -281,18 +281,19 @@
 table,
 pre:not(.mermaid),
 .starlight-aside,
-.img-outline,
 .expressive-code {
   border-radius: var(--border-radius);
   box-shadow: var(--sl-shadow-sm);
 }
 
-code {
+code,
+img {
   border-radius: var(--border-radius);
 }
 
 .img-outline {
-  border: 1px solid var(--sl-color-hairline-light);
+  border: 2px solid var(--color-accent-transparent);
+  box-shadow: var(--box-shadow);
 }
 
 .mermaid > svg {
@@ -310,6 +311,14 @@ p.starlight-aside__title + section.starlight-aside__content {
   margin-block-start: var(--space-2xs);
 }
 
+/* Card style overrides */
+article.card {
+  border-radius: var(--border-radius);
+  border-color: var(--color-accent-transparent);
+  border-width: 2px;
+  box-shadow: var(--box-shadow);
+}
+
 /* Tab style overrides */
 starlight-tabs pre {
   box-shadow: none;
@@ -423,7 +432,6 @@ thead tr:first-of-type th:last-of-type {
 }
 
 .sl-markdown-content.sl-markdown-content pre:not(:where(.not-content *)) {
-  border: 0;
   padding: var(--space-xs);
 }
 
@@ -465,6 +473,10 @@ thead tr:first-of-type th:last-of-type {
   margin-block-start: initial;
 }
 
+pre.astro-code {
+  border: 0;
+}
+
 /* Input styles */
 label {
   font-size: var(--sl-text-body-sm);

src/styles/orange-theme.css

@@ -6,7 +6,9 @@
   --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-highlight: hsl(176, 92%, 25%);
+  --color-accent-highlight: var(--sl-color-accent);
+  --color-accent-transparent: hsla(var(--sl-hue-accent), 100%, 87%, 0.8);
+  --box-shadow: var(--sl-shadow-sm);
 }
 
 :root[data-theme="light"],
@@ -15,5 +17,8 @@
   --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-highlight: hsl(165, 90%, 78%);
+  --color-accent-highlight: hsl(27, 100%, 80%);
+  --color-accent-transparent: hsla(27, 100%, 80%, 0.5);
+  --box-shadow: 0px 1px 1px hsla(27, 100%, 80%, 0.15),
+    1px 2px 2px hsla(27, 100%, 80%, 0.15);
 }

src/styles/teal-theme.css

@@ -1,4 +1,4 @@
-/* Green theme for specification docs */
+/* Teal theme for specification docs */
 :root,
 ::backdrop {
   /* Colors (dark mode) */
@@ -7,6 +7,8 @@
   --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 23%);
   --sl-color-accent-high: hsl(var(--sl-hue-accent), 100%, 87%); /* lightest */
   --color-accent-highlight: hsl(176, 92%, 25%);
+  --color-accent-transparent: hsla(176, 92%, 25%, 0.7);
+  --box-shadow: var(--sl-shadow-sm);
 }
 
 :root[data-theme="light"],
@@ -16,4 +18,7 @@
   --sl-color-accent: hsl(var(--sl-hue-accent), 100%, 23%);
   --sl-color-accent-low: hsl(var(--sl-hue-accent), 100%, 97%); /* lightest */
   --color-accent-highlight: hsl(165, 90%, 78%);
+  --color-accent-transparent: hsla(var(--sl-hue-accent), 100%, 23%, 0.3);
+  --box-shadow: 0px 1px 1px hsla(var(--sl-hue-accent), 100%, 23%, 0.1),
+    1px 2px 2px hsla(var(--sl-hue-accent), 100%, 23%, 0.1);
 }