@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/styles/content/shiki.css

@@ -0,0 +1,107 @@
+.shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 4);
+  --padding-right: calc(var(--spacing) * 4);
+
+  code span {
+    color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
+  }
+
+  .line {
+    position: relative;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+  }
+
+  .line:empty {
+    height: 1lh;
+  }
+
+  &.has-focused .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+
+  &.has-focused:hover .line:not(.focused) {
+    filter: blur(0);
+  }
+
+  .diff::before {
+    position: absolute;
+    left: calc(var(--spacing) * 1.5);
+  }
+
+  .diff.remove {
+    opacity: 0.7;
+    --counter-color: var(--color-diff-remove-symbol);
+    @apply bg-diff-remove;
+  }
+
+  .diff.remove::before {
+    content: '-';
+    @apply text-diff-remove-symbol;
+  }
+
+  .diff.add {
+    --counter-color: var(--color-diff-add-symbol);
+    @apply bg-diff-add;
+  }
+
+  .diff.add::before {
+    content: '+';
+    @apply text-diff-add-symbol;
+  }
+
+  .highlighted {
+    --counter-color: var(--color-primary);
+    @apply bg-primary/10;
+  }
+
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    @apply inset-y-0 left-0 border-l-2 border-primary/50;
+  }
+
+  .highlighted-word {
+    padding: 1px;
+    @apply border -my-px border-primary/30 bg-primary/10 rounded-md font-medium;
+  }
+
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--counter-color, var(--color-muted-foreground)) 60%,
+      transparent
+    );
+    @apply inset-y-0 left-0 w-7 text-right;
+  }
+}
+
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
+  }
+}
+
+code.shiki:not(.not-fumadocs-code *) span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+}
+
+.dark code.shiki:not(.not-fumadocs-code *) span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+}