@terrafirmagreg-team/ui 0.0.0-stage → 0.1.0

package/styles/content/default-colors.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-background: hsl(0, 0%, 96%);
+  --color-foreground: hsl(0, 0%, 3.9%);
+  --color-muted: hsl(0, 0%, 96.1%);
+  --color-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-popover: hsl(0, 0%, 98%);
+  --color-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-card: hsl(0, 0%, 94.7%);
+  --color-card-foreground: hsl(0, 0%, 3.9%);
+  --color-border: hsla(0, 0%, 80%, 50%);
+  --color-primary: hsl(0, 0%, 9%);
+  --color-primary-foreground: hsl(0, 0%, 98%);
+  --color-secondary: hsl(0, 0%, 93.1%);
+  --color-secondary-foreground: hsl(0, 0%, 9%);
+  --color-accent: hsla(0, 0%, 82%, 50%);
+  --color-accent-foreground: hsl(0, 0%, 9%);
+  --color-ring: hsl(0, 0%, 63.9%);
+  --color-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-background: hsl(0, 0%, 7.04%);
+  --color-foreground: hsl(0, 0%, 92%);
+  --color-muted: hsl(0, 0%, 12.9%);
+  --color-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-popover: hsl(0, 0%, 11.6%);
+  --color-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-card: hsl(0, 0%, 9.8%);
+  --color-card-foreground: hsl(0, 0%, 98%);
+  --color-border: hsla(0, 0%, 40%, 20%);
+  --color-primary: hsl(0, 0%, 98%);
+  --color-primary-foreground: hsl(0, 0%, 9%);
+  --color-secondary: hsl(0, 0%, 12.9%);
+  --color-secondary-foreground: hsl(0, 0%, 92%);
+  --color-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-accent-foreground: hsl(0, 0%, 90%);
+  --color-ring: hsl(0, 0%, 54.9%);
+  --color-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-info: oklch(62.3% 0.214 259.815);
+  --color-warning: oklch(76.9% 0.188 70.08);
+  --color-error: oklch(63.7% 0.237 25.331);
+  --color-success: oklch(72.3% 0.219 149.579);
+  --color-idea: oklch(70.5% 0.209 60.849);
+  --color-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-diff-remove-symbol: rgb(230, 10, 100);
+  --color-diff-add: rgba(14, 180, 100, 0.1);
+  --color-diff-add-symbol: rgb(10, 200, 100);
+}

package/styles/content/shiki.css

@@ -0,0 +1,108 @@
+.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);
+  }
+}
+
+/* inline code */
+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);
+}