@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/code-block.css

@@ -0,0 +1,235 @@
+/* @auvyx/ui code-block | order 49 */
+@layer components {
+  .code-block {
+      position: relative;
+      margin: 0;
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      flex-direction: column;
+      overflow: hidden;
+      > figcaption {
+        display: flex;
+        min-width: 0;
+        flex-shrink: 0;
+        align-items: center;
+        > :first-child {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          & svg {
+            pointer-events: none;
+          }
+          & svg {
+            display: inline-block;
+          }
+          & svg {
+            vertical-align: middle;
+          }
+        }
+        > :is(button, [data-actions]):last-child {
+          margin-inline-start: auto;
+          display: flex;
+          flex-shrink: 0;
+          align-items: center;
+        }
+      }
+      > :is(button, [data-actions]) {
+        position: absolute;
+        z-index: 10;
+        opacity: 0%;
+        transition-property: opacity;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        @media (pointer: coarse) {
+          opacity: 100%;
+        }
+      }
+      &:is(:hover, :focus-within) > :is(button, [data-actions]) {
+        opacity: 100%;
+      }
+      > pre {
+        margin: 0;
+        min-height: 0;
+        min-width: 0;
+        overflow: auto;
+        text-align: start;
+        font-family: var(--font-mono);
+        --tw-outline-style: none;
+        outline-style: none;
+        scrollbar-width: thin;
+        &[data-wrap] {
+          overflow-wrap: break-word;
+          white-space: pre-wrap;
+        }
+        > code > span {
+          position: relative;
+          display: inline-block;
+          min-width: 100%;
+        }
+        &[data-numbered] {
+          counter-reset: bc-line;
+          > code > span {
+            counter-increment: bc-line;
+            &::before {
+              margin-inline-end: calc(var(--spacing) * 3);
+              display: inline-block;
+              -webkit-user-select: none;
+              user-select: none;
+              content: counter(bc-line);
+            }
+          }
+        }
+        > code > span:is([data-line='added'], [data-line='removed'])::after {
+          position: absolute;
+          -webkit-user-select: none;
+          user-select: none;
+        }
+      }
+    }
+}
+
+@layer components {
+  .code-block {
+      border-radius: var(--auvyx-r-surface);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-foreground);
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+    }
+  .code-block:has(> pre:focus-visible) {
+      border-color: var(--color-ring);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+      }
+    }
+  .code-block[data-variant='destructive'] {
+      border-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+      }
+      color: var(--color-destructive);
+      &:is(html.dark *) {
+        border-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+        }
+      }
+    }
+  .code-block[data-size='sm'] {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .code-block > figcaption {
+      gap: calc(var(--spacing) * 2);
+      padding-inline: calc(var(--spacing) * 4);
+      padding-top: calc(var(--spacing) * 4);
+      color: var(--color-muted-foreground);
+    }
+  .code-block > figcaption > :first-child {
+      font-family: var(--font-sans);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-foreground);
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+      &>svg {
+        margin-inline-end: calc(var(--spacing) * 1.5);
+      }
+    }
+  .code-block[data-variant='destructive'] > figcaption > :first-child {
+      color: var(--color-destructive);
+    }
+  .code-block > figcaption > :is(button, [data-actions]):last-child {
+      margin-block: calc(var(--spacing) * -1);
+      margin-inline-end: calc(var(--spacing) * -1.5);
+      gap: var(--spacing);
+    }
+  .code-block > :is(button, [data-actions]) {
+      inset-inline-end: calc(var(--spacing) * 3);
+      top: calc(var(--spacing) * 3);
+      border-radius: var(--auvyx-r-control);
+      background-color: var(--color-background);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      }
+    }
+  .code-block > pre {
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 4);
+      --tw-leading: var(--leading-relaxed);
+      line-height: var(--leading-relaxed);
+    }
+  .code-block:has(> figcaption) > pre {
+      padding-top: calc(var(--spacing) * 2);
+    }
+  .code-block[data-size='sm'] > figcaption {
+      padding-inline: calc(var(--spacing) * 3);
+      padding-top: calc(var(--spacing) * 3);
+    }
+  .code-block[data-size='sm'] > pre {
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 3);
+    }
+  .code-block > pre > code > span {
+      margin-inline: calc(var(--spacing) * -4);
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  .code-block > pre[data-numbered] > code > span::before {
+      min-width: calc(var(--spacing) * 6);
+      text-align: end;
+      color: var(--color-muted-foreground);
+    }
+  .code-block > pre > code > span[data-line='highlighted'] {
+      background-color: var(--color-muted);
+    }
+  .code-block > pre > code > span[data-line='added'] {
+      background-color: var(--color-muted);
+    }
+  .code-block > pre > code > span[data-line='added']::after {
+      inset-inline-start: calc(var(--spacing) * 1);
+      color: var(--color-muted-foreground);
+      --tw-content: '+';
+      content: var(--tw-content);
+    }
+  .code-block > pre > code > span[data-line='removed'] {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+    }
+  .code-block > pre > code > span[data-line='removed']::after {
+      inset-inline-start: calc(var(--spacing) * 1);
+      color: var(--color-destructive);
+      --tw-content: '−';
+      content: var(--tw-content);
+    }
+}
+
+@layer components {
+  [data-copy]:has(> svg + svg) > svg:last-child, [data-copy][data-copied]:has(> svg + svg) > svg:first-child {
+      display: none;
+    }
+  [data-copy][data-copied]:has(> svg + svg) > svg:last-child {
+      display: inline-block;
+    }
+}