feat(theme): shiki styles + layouts

styles/base.css

@@ -28,7 +28,7 @@ body {
   font-weight: bold;
   text-wrap: balance;
 }
-:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
+:is(h1, h2, h3, h4, .h2, .h3, .h4) + * {
   margin-block-start: var(--space-s);
 }
 :is(h1) {
@@ -95,14 +95,14 @@ ol:not([role='list']) > li + li {
   margin-block-start: var(--space-xs);
 }
 
-.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  block-size: 1px;
-  overflow: hidden;
+.visually-hidden {
   position: absolute;
-  white-space: nowrap;
+  overflow: hidden;
+  block-size: 1px;
   inline-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
 }
 
 .clean-button {
@@ -212,12 +212,12 @@ blockquote cite {
   column-gap: var(--_content-padding);
 }
 /* set content inside wrapper column */
-:where(.wrapper, .slidev-layout) > * {
+:is(.wrapper, .slidev-layout) > * {
   grid-column: wrapper;
 }
 
 /* set full width content to full grid */
-:where(.wrapper, .slidev-layout) > .full-width {
+:is(.wrapper, .slidev-layout) > .full-width {
   /* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
   padding-inline: max(
     calc((100vw - var(--content-width)) / 2),
@@ -231,7 +231,7 @@ ol:not([role='list']) {
   padding-inline-start: 1em;
 }
 
-.slidev-layout > * + * {
+:where(.slidev-layout > * + *) {
   margin-block-start: var(--space-xs);
 }
 .slidev-layout.place-content-center {

styles/index.ts

@@ -3,3 +3,4 @@ import './reset.css'
 import './variables.css'
 import './base.css'
 import './layouts.css'
+import './shiki.css'

styles/shiki.css

@@ -0,0 +1,58 @@
+.shiki .line {
+  --_bg-opacity: var(--bg-opacity, 1);
+  --c-red-soft: rgba(244, 63, 94, var(--_bg-opacity));
+  --c-orange-soft: rgba(255, 217, 112, var(--_bg-opacity));
+  --c-green-soft: rgba(16, 185, 129, var(--_bg-opacity));
+
+  &:where(.error, .warning, .diff) {
+    --bg-opacity: 0.2;
+    --_bg-color: var(--bg-color, orangered);
+    position: relative;
+    display: inline-block;
+    inline-size: 100%;
+    background-color: var(--_bg-color);
+  }
+  &::after {
+    position: absolute;
+    inset-inline-end: 4px;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+  }
+  &.error {
+    --bg-color: var(--c-red-soft);
+    &::after {
+      content: '🔴';
+    }
+  }
+  &.warning {
+    --bg-color: var(--c-orange-soft);
+    &::after {
+      content: '🟠';
+    }
+  }
+  &.diff {
+    &.remove {
+      --bg-color: var(--c-red-soft);
+      opacity: 0.7;
+      &::after {
+        content: '-';
+        color: red;
+        font-size: var(--size-0);
+      }
+    }
+    &.add {
+      --bg-color: var(--c-green-soft);
+      &::after {
+        content: '+';
+        font-size: var(--size-0);
+        color: greenyellow;
+      }
+    }
+  }
+  .highlighted-word {
+    margin-inline: 1px;
+    padding: 1px;
+    outline: 1px solid grey;
+    border-radius: 2px;
+  }
+}

styles/variables.css

@@ -92,4 +92,7 @@
   --grid-wrapper: [full-start] 1fr [wrapper-start]
     minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
   --_content-padding: var(--content-padding, var(--space-s));
+
+  /* overrides */
+  --slidev-code-margin: var(--space-s) 0;
 }