update colors and padding

Author: hojberg

src/css/definition-doc.css

@@ -231,15 +231,24 @@
 
 .definition-doc .callout {
   background: var(--color-doc-callout-bg);
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   border-radius: var(--border-radius-base);
   display: flex;
   flex-direction: row;
 }
 
+.definition-doc .callout .callout-content section .folded:last-child {
+  margin-bottom: 0.25rem;
+}
+
+.definition-doc .folded-content .callout:nth-child(2) {
+  margin-top: 1rem;
+}
+
 .definition-doc .callout.callout-with-icon .callout-content {
   padding-top: 1px;
+  width: 100%;
 }
 
 .definition-doc .callout .callout-icon {
@@ -434,4 +443,22 @@
     max-width: none;
     width: min(40rem, calc(calc(100vw - 2rem)) - 3rem);
   }
+
+  .definition-doc .callout .source.code,
+  .definition-doc .callout .sources .source,
+  .definition-doc .callout .folded-sources .source,
+  .definition-doc .callout .source.example,
+  .definition-doc .callout .source.eval,
+  .definition-doc .callout .source.signatures .signature {
+    width: calc(100vw - 7.5rem);
+  }
+
+  .definition-doc .callout .folded .source.code,
+  .definition-doc .callout .folded .sources .source,
+  .definition-doc .callout .folded .folded-sources .source,
+  .definition-doc .callout .folded .source.example,
+  .definition-doc .callout .folded .source.eval,
+  .definition-doc .callout .folded .source.signatures .signature {
+    width: calc(100vw - 9.25rem);
+  }
 }

src/css/themes/unison/colors.css

@@ -30,7 +30,7 @@
   --color-gray-lighten-30: #bdbfc6;
   --color-gray-lighten-40: #d1d5dc;
   --color-gray-lighten-45: #d9e0e7;
-  --color-gray-lighten-50: #e6ebf0;
+  --color-gray-lighten-50: #e4eaf3;
   --color-gray-lighten-55: #f1f3f5;
   --color-gray-lighten-60: #fafafb;
   --color-gray-lighten-100: #ffffff;

src/css/themes/unison/light.css

@@ -114,7 +114,7 @@
   --color-doc-aside-bg: var(--color-gray-lighten-60);
   --color-doc-aside-source-bg: var(--color-gray-lighten-55);
   --color-doc-callout-bg: var(--color-blue-5);
-  --color-doc-callout-source-bg: var(--color-gray-lighten-45);
+  --color-doc-callout-source-bg: var(--color-lighten-50);
   --color-doc-subtle-fg: var(--color-gray-lighten-30);
   --color-doc-source-bg: var(--color-gray-lighten-60);
   --color-doc-source-mg: var(--color-gray-lighten-45);
@@ -130,7 +130,7 @@
   --color-doc-focus-aside-bg: var(--color-gray-lighten-55);
   --color-doc-focus-aside-source-bg: var(--color-gray-lighten-50);
   --color-doc-focus-callout-bg: var(--color-blue-5);
-  --color-doc-focus-callout-source-bg: var(--color-gray-lighten-45);
+  --color-doc-focus-callout-source-bg: var(--color-gray-lighten-50);
   --color-doc-focus-subtle-fg: var(--color-gray-lighten-30);
   --color-doc-focus-source-bg: var(--color-gray-lighten-55);
   --color-doc-focus-source-mg: var(--color-gray-lighten-45);