Add callouts support

Adds a colour palette
Adds homemade remark-callouts package
Adds tabler icons dependency

packages/website/src/lib/Callout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    export let calloutType: string;
+    import { IconExclamationCircle } from "@tabler/icons-svelte";
+</script>
+
+<div class="callout" data-callout={calloutType}>
+    <div class="callout-title">
+        {#if $$slots.icon}
+            <div class="callout-icon"><slot name="icon" /></div>
+        {:else}
+            <div class="callout-icon"><IconExclamationCircle /></div>
+        {/if}
+        <div class="callout-title-inner">
+            <slot name="title"
+                >{calloutType.replace(/\w\S*/g, function (txt) {
+                    return (
+                        txt.charAt(0).toUpperCase() +
+                        txt.substring(1).toLowerCase()
+                    );
+                })}</slot
+            >
+        </div>
+    </div>
+    {#if $$slots.body}
+        <div class="callout-body"><slot name="body" /></div>
+    {/if}
+</div>

packages/website/src/lib/mdlayouts/default.svelte

@@ -1,6 +1,7 @@
 <script context="module">
     import img from "$lib/htmlComponents/img.svelte";
-    export { img };
+    import Callout from "$lib/Callout.svelte";
+    export { img, Callout };
 </script>
 
 <slot />

packages/website/src/lib/style/callout.css

@@ -0,0 +1,194 @@
+:root {
+    --callout-bug: var(--color-red);
+    --callout-default: var(--color-blue);
+    --callout-error: var(--color-red);
+    --callout-example: var(--color-purple);
+    --callout-fail: var(--color-red);
+    --callout-important: var(--color-cyan);
+    --callout-info: var(--color-blue);
+    --callout-question: var(--color-orange);
+    --callout-success: var(--color-green);
+    --callout-summary: var(--color-cyan);
+    --callout-tip: var(--color-cyan);
+    --callout-todo: var(--color-blue);
+    --callout-warning: var(--color-orange);
+    --callout-quote: rgb(158, 158, 158);
+
+    --callout-title-weight: bold;
+    
+    --callout-radius: var(--border-radius);
+
+    --callout-border-opacity: 25%;
+    --callout-background-opacity: 10%;
+    --callout-content-padding: 0;
+    --callout-content-background: transparent;
+}
+.callout {
+    --callout-color: var(--callout-default);
+    /* --callout-icon: lucide-pencil; */
+}
+
+.callout[data-callout="abstract"],
+.callout[data-callout="summary"],
+.callout[data-callout="tldr"] {
+    --callout-color: var(--callout-summary);
+    /* --callout-icon: lucide-clipboard-list; */
+}
+
+.callout[data-callout="info"] {
+    --callout-color: var(--callout-info);
+    /* --callout-icon: lucide-info; */
+}
+
+.callout[data-callout="todo"] {
+    --callout-color: var(--callout-todo);
+    /* --callout-icon: lucide-check-circle-2; */
+}
+
+.callout[data-callout="important"] {
+    --callout-color: var(--callout-important);
+    /* --callout-icon: lucide-flame; */
+}
+
+.callout[data-callout="tip"],
+.callout[data-callout="hint"] {
+    --callout-color: var(--callout-tip);
+    /* --callout-icon: lucide-flame; */
+}
+
+.callout[data-callout="success"],
+.callout[data-callout="check"],
+.callout[data-callout="done"] {
+    --callout-color: var(--callout-success);
+    /* --callout-icon: lucide-check; */
+}
+
+.callout[data-callout="question"],
+.callout[data-callout="help"],
+.callout[data-callout="faq"] {
+    --callout-color: var(--callout-question);
+    /* --callout-icon: help-circle; */
+}
+
+.callout[data-callout="warning"],
+.callout[data-callout="caution"],
+.callout[data-callout="attention"] {
+    --callout-color: var(--callout-warning);
+    /* --callout-icon: lucide-alert-triangle; */
+}
+
+.callout[data-callout="failure"],
+.callout[data-callout="fail"],
+.callout[data-callout="missing"] {
+    --callout-color: var(--callout-fail);
+    /* --callout-icon: lucide-x; */
+}
+
+.callout[data-callout="danger"],
+.callout[data-callout="error"] {
+    --callout-color: var(--callout-error);
+    /* --callout-icon: lucide-zap; */
+}
+
+.callout[data-callout="bug"] {
+    --callout-color: var(--callout-bug);
+    /* --callout-icon: lucide-bug; */
+}
+
+.callout[data-callout="example"] {
+    --callout-color: var(--callout-example);
+    /* --callout-icon: lucide-list; */
+}
+
+.callout[data-callout="quote"],
+.callout[data-callout="cite"] {
+    --callout-color: var(--callout-quote);
+    /* --callout-icon: quote-glyph; */
+}
+
+.callout {
+    overflow: hidden;
+    border-style: solid;
+    
+    border-color: color-mix(in srgb, var(--callout-color) var(--callout-border-opacity), transparent);
+    border-width: var(--callout-border-width);
+    border-radius: var(--callout-radius);
+    margin-block: 1em;
+    margin-inline: 0;
+    mix-blend-mode: var(--callout-blend-mode);
+    background-color: color-mix(in srgb, var(--callout-color) var(--callout-background-opacity), transparent);
+    padding: 0.75em;
+    padding-inline-start: 1.5em;
+    --callout-title-color: var(--callout-color);
+}
+
+.callout.is-collapsible .callout-title {
+    cursor: var(--cursor);
+}
+
+.callout-title {
+    padding: var(--callout-title-padding);
+    display: flex;
+    gap: calc(var(--spacing)/4);
+    font-size: var(--callout-title-size);
+    color: rgb(var(--callout-color));
+    line-height: var(--line-height-tight);
+    align-items: flex-start;
+}
+
+.callout-title-inner {
+    --font-weight: var(--callout-title-weight);
+    font-weight: var(--font-weight);
+    color: var(--callout-title-color);
+}
+/* .callout-title {
+    --font-weight: var(--callout-title-weight);
+    font-weight: var(--font-weight);
+    color: var(--callout-title-color);
+    padding: var(--callout-title-padding);
+    font-size: var(--callout-title-size);
+    line-height: var(--line-height-tight);
+} */
+
+
+.callout-content {
+    overflow-block: auto;
+    padding: var(--callout-content-padding);
+    background-color: var(--callout-content-background);
+}
+
+.callout-content .callout {
+    margin-block-start: 20px;
+}
+
+.callout-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+.callout-icon .tabler-icon {
+    color: var(--callout-color);
+}
+
+.callout-icon::after {
+    content: "\200B";
+}
+
+/* .callout-fold {
+    display: flex;
+    align-items: center;
+    padding-inline-end: var(--size-4-2);
+}
+
+.callout-fold::after {
+    content: "\200B";
+}
+
+.callout-fold .svg-icon {
+    transition: transform 100ms ease-in-out;
+}
+
+.callout-fold.is-collapsed .svg-icon {
+    transform: rotate(calc(var(--direction) * -1 * 90deg));
+} */

packages/website/src/lib/styles.css

@@ -1,4 +1,5 @@
 @import "./style/code.css";
+@import "./style/callout.css";
 @import "./style/footnote.css";
 
 :root {
@@ -32,6 +33,15 @@
     --code-background-color: #0d1117;
     --code-color: #fff;
 
+    --color-red: #e93147;
+    --color-orange: #ec7500;
+    --color-yellow: #e0ac00;
+    --color-green: #08b94e;
+    --color-cyan: #00bfbc;
+    --color-blue: #086ddd;
+    --color-purple: #7852ee;
+    --color-pink: #d53984;
+
     scroll-behavior: smooth;
 }
 
@@ -49,7 +59,16 @@
         --input-color: #d8d8d8;
         --font-color: rgba(255, 255, 255, .87);
         --font-color-contrast: rgba(0, 0, 0, .87);
-        --font-color-secondary: rgba(255, 255, 255, .6)
+        --font-color-secondary: rgba(255, 255, 255, .6);
+        
+        --color-red: #fb464c;
+        --color-orange: #e9973f;
+        --color-yellow: #e0de71;
+        --color-green: #44cf6e;
+        --color-cyan: #53dfdd;
+        --color-blue: #027aff;
+        --color-purple: #a882ff;
+        --color-pink: #fa99cd;
     }
 }