@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

package/compiler-assets/nextjs/defaults/root/css/typography.css

@@ -0,0 +1,607 @@
+@theme inline {
+  --color-typography-body-foreground: var(--typography-body-foreground);
+  --color-typography-heading-foreground: var(--typography-heading-foreground);
+  --color-typography-lead-foreground: var(--typography-lead-foreground);
+  --color-typography-link-foreground: var(--typography-link-foreground);
+  --color-typography-strong-foreground: var(--typography-strong-foreground);
+  --color-typography-counter-foreground: var(--typography-counter-foreground);
+  --color-typography-bullet-foreground: var(--typography-bullet-foreground);
+  --color-typography-rule-stroke: var(--typography-rule-stroke);
+  --color-typography-quote-foreground: var(--typography-quote-foreground);
+  --color-typography-quote-stroke: var(--typography-quote-stroke);
+  --color-typography-caption-foreground: var(--typography-caption-foreground);
+  --color-typography-code-foreground: var(--typography-code-foreground);
+  --color-typography-code-surface: var(--typography-code-surface);
+  --color-typography-code-stroke: var(--typography-code-stroke);
+  --color-typography-variable-foreground: var(--typography-variable-foreground);
+  --color-typography-table-heading-stroke: var(
+    --typography-table-heading-stroke
+  );
+  --color-typography-table-cell-stroke: var(--typography-table-cell-stroke);
+  --color-typography-pre-foreground: var(--typography-pre-foreground);
+  --color-typography-pre-surface: var(--typography-pre-surface);
+  --color-typography-pre-stroke: var(--typography-pre-stroke);
+}
+
+:root {
+  --kbd-shadow:
+    inset 0 -0.05em 0.5em color-mix(in oklab, var(--stroke-4) 80%, transparent),
+    inset 0 0.05em color-mix(in oklab, var(--neutral-100) 95%, transparent),
+    inset 0 0.25em 0.5em color-mix(in oklab, var(--surface-3) 70%, transparent),
+    inset 0 -0.075em color-mix(in oklab, var(--stroke-1) 58%, var(--stroke-2)),
+    0 0 0 0.065em color-mix(in oklab, var(--stroke-2) 82%, transparent),
+    0 0.08em 0.17em color-mix(in oklab, var(--stroke-1) 45%, transparent);
+  --kbd-shadow-active:
+    inset 0 0.05em color-mix(in oklab, var(--foreground-4) 45%, transparent),
+    0 0 0 0.065em color-mix(in oklab, var(--stroke-1) 64%, transparent);
+}
+
+.dark {
+  --kbd-shadow:
+    inset 0 -0.05em 0.5em color-mix(in oklab, var(--stroke-3) 55%, transparent),
+    inset 0 0.05em color-mix(in oklab, var(--foreground-4) 55%, transparent),
+    inset 0 0.25em 0.5em color-mix(in oklab, var(--surface-2) 65%, transparent),
+    inset 0 -0.1em color-mix(in oklab, black 75%, transparent),
+    0 0 0 0.075em var(--stroke-2),
+    0 0.08em 0.17em color-mix(in oklab, black 85%, transparent);
+}
+
+@layer components {
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--font-mono);
+  }
+
+  .markdown-prose {
+    max-width: var(--layout-content-max-width);
+    color: var(--typography-body-foreground);
+    font-size: var(--typography-base-size);
+    line-height: var(--typography-line-height);
+
+    & :where(p):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 0.375rem;
+      color: var(--typography-body-foreground);
+    }
+
+    &
+      :where(.lead):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 1.5em;
+      color: var(--typography-lead-foreground);
+      font-size: 1.25em;
+      line-height: 1.6;
+    }
+
+    & :where(a):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      color: color-mix(
+        in oklch,
+        var(--typography-link-foreground) 90%,
+        transparent
+      );
+      font-weight: 500;
+      overflow-wrap: break-word;
+      text-decoration-color: color-mix(in oklch, currentColor 18%, transparent);
+      text-decoration-line: underline;
+      text-decoration-skip-ink: auto;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 0.16em;
+      border-radius: 0.2em;
+      transition:
+        color 100ms ease-out,
+        text-decoration-color 100ms ease-out;
+      word-break: break-word;
+
+      &:hover {
+        color: var(--typography-link-foreground);
+        text-decoration-color: color-mix(
+          in oklch,
+          currentColor 38%,
+          transparent
+        );
+      }
+
+      &:active {
+        color: var(--typography-link-foreground);
+        text-decoration-color: color-mix(
+          in oklch,
+          currentColor 38%,
+          transparent
+        );
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--focus-stroke);
+        outline-offset: 0;
+      }
+    }
+
+    &
+      :where(strong):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      color: var(--typography-strong-foreground);
+      font-weight: 600;
+    }
+
+    & :where(del):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      color: var(--typography-caption-foreground);
+    }
+
+    &
+      :where(a strong, blockquote strong, thead th strong):not(
+        .not-markdown-prose
+      ):not(:where(.not-markdown-prose *)) {
+      color: inherit;
+    }
+
+    & :where(h1):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 1.5em 0.375rem;
+      color: var(--typography-heading-foreground);
+      font-size: 2.25rem;
+      font-weight: 600;
+      line-height: 1.111;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
+    }
+
+    & :where(h2):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 1.25em 0.375rem;
+      color: var(--typography-heading-foreground);
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.333;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
+    }
+
+    & :where(h3):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 1em 0.375rem;
+      color: var(--typography-heading-foreground);
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.45;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
+    }
+
+    & :where(h4):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 0.875em 0.375rem;
+      color: var(--typography-heading-foreground);
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
+    }
+
+    &
+      :where(h5, h6):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0.875em 0.375rem;
+      color: var(--typography-heading-foreground);
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
+    }
+
+    &
+      :where(h1, h2, h3, h4, h5, h6)
+      strong:not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      color: inherit;
+      font-weight: 700;
+    }
+
+    &
+      :where(ul, ol):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0.375rem;
+      padding-inline-start: 1.625em;
+      color: var(--typography-body-foreground);
+    }
+
+    & :where(ul):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      list-style-type: disc;
+    }
+
+    & :where(ol):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      list-style-type: decimal;
+    }
+
+    &
+      :where(ol[type="A"]):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      list-style-type: upper-alpha;
+    }
+
+    &
+      :where(ol[type="a"]):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      list-style-type: lower-alpha;
+    }
+
+    &
+      :where(ol[type="I"]):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      list-style-type: upper-roman;
+    }
+
+    &
+      :where(ol[type="i"]):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      list-style-type: lower-roman;
+    }
+
+    & :where(li):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 0.5em;
+    }
+
+    &
+      :where(ol > li, ul > li):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      padding-inline-start: 0.375em;
+    }
+
+    &
+      :where(li > input[type="checkbox"]):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-inline-end: 0.5em;
+      vertical-align: middle;
+    }
+
+    &
+      :where(ol > li):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      )::marker {
+      color: var(--typography-counter-foreground);
+      font-weight: 400;
+    }
+
+    &
+      :where(ul > li):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      )::marker {
+      color: var(--typography-bullet-foreground);
+    }
+
+    &
+      :where(ul ul, ul ol, ol ul, ol ol):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0.75em;
+    }
+
+    & > ul > li p:not(.not-markdown-prose):not(:where(.not-markdown-prose *)),
+    & > ol > li p:not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 0.75em;
+    }
+
+    &
+      > ul
+      > li
+      > p:first-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ),
+    &
+      > ol
+      > li
+      > p:first-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-top: 1.25em;
+    }
+
+    &
+      > ul
+      > li
+      > p:last-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ),
+    &
+      > ol
+      > li
+      > p:last-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-bottom: 1.25em;
+    }
+
+    & :where(dl):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 1.25em;
+    }
+
+    & :where(dt):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-top: 1.25em;
+      color: var(--typography-heading-foreground);
+      font-weight: 600;
+    }
+
+    & :where(dd):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-top: 0.5em;
+      padding-inline-start: 1.625em;
+    }
+
+    & :where(code):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      box-sizing: border-box;
+      height: fit-content;
+      border: 1px solid var(--stroke-2);
+      border-radius: var(--radius-inline-code);
+      background-color: var(--surface-2);
+      color: var(--foreground-1);
+      font-family: var(--font-mono);
+      font-size: 0.95em;
+      font-weight: 400;
+      line-height: 1.25;
+      padding: 0.15em 0.35em;
+    }
+
+    & :where(code):not(:where(pre code))::before,
+    & :where(code):not(:where(pre code))::after {
+      content: none;
+    }
+
+    &
+      :where(
+        a code,
+        h1 code,
+        h2 code,
+        h3 code,
+        h4 code,
+        h5 code,
+        h6 code,
+        blockquote code,
+        thead th code
+      ):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      color: inherit;
+    }
+
+    &
+      :where(a code):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      color: var(--accent-1);
+    }
+
+    & :where(pre):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-block: 1.714em;
+      border: 1px solid var(--typography-pre-stroke);
+      border-radius: var(--radius-codeblock);
+      background-color: var(--typography-pre-surface);
+      color: var(--typography-pre-foreground);
+      font-size: 0.875em;
+      font-weight: 400;
+      line-height: 1.714;
+      overflow-x: auto;
+      padding: 0.857em 1.143em;
+    }
+
+    &
+      :where(pre)
+      :where(code):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      border: 0;
+      border-radius: 0;
+      background-color: transparent;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+    }
+
+    & :where(pre) :where(code)::before,
+    & :where(pre) :where(code)::after {
+      content: none;
+    }
+
+    & :where(kbd):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      position: relative;
+      top: -0.03em;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      height: fit-content;
+      min-width: 1.75em;
+      flex-shrink: 0;
+      user-select: none;
+      border-radius: max(var(--radius-kbd), 1px);
+      background-color: var(--surface-1);
+      box-shadow: var(--kbd-shadow);
+      color: var(--foreground-1);
+      font-family: var(--font-main);
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.7em;
+      padding: 0.05em 0.5em 0.1em;
+      vertical-align: text-top;
+      white-space: nowrap;
+      word-spacing: -0.1em;
+      transition-duration: 150ms;
+      transition-property: background-color, box-shadow;
+    }
+
+    &
+      :where(kbd):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ):hover {
+      background-color: var(--surface-page);
+      box-shadow:
+        var(--kbd-shadow),
+        0 0 0 0.05em color-mix(in oklab, var(--stroke-2) 50%, transparent);
+    }
+
+    &
+      :where(kbd):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ):focus-visible {
+      outline: 2px solid var(--focus-stroke);
+    }
+
+    &
+      :where(kbd):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ):active {
+      padding-top: 0.1em;
+      padding-bottom: 0.05em;
+      background-color: var(--surface-2);
+      box-shadow: var(--kbd-shadow-active);
+    }
+
+    &
+      :where(blockquote):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0.375rem;
+      border-inline-start: 0.25rem solid var(--typography-quote-stroke);
+      color: var(--typography-quote-foreground);
+      font-style: italic;
+      font-weight: 500;
+      padding-inline-start: 1.25em;
+      quotes: "\201C" "\201D" "\2018" "\2019";
+    }
+
+    &
+      :where(blockquote p:first-of-type):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      )::before {
+      content: open-quote;
+    }
+
+    &
+      :where(blockquote p:last-of-type):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      )::after {
+      content: close-quote;
+    }
+
+    & :where(hr):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      height: 1px;
+      margin-block: 1.25em;
+      border: 0;
+      background-color: var(--typography-rule-stroke);
+    }
+
+    &
+      :where(table):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      width: 100%;
+      margin-block: 2em;
+      color: var(--typography-body-foreground);
+      font-size: 0.875em;
+      line-height: 1.714;
+      table-layout: auto;
+      text-align: left;
+    }
+
+    &
+      :where(thead):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      border-bottom: 1px solid var(--typography-table-heading-stroke);
+    }
+
+    &
+      :where(tbody tr):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      border-bottom: 1px solid var(--typography-table-cell-stroke);
+    }
+
+    &
+      :where(tbody tr:last-child):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      border-bottom: 0;
+    }
+
+    & :where(th):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      border: 1px solid var(--typography-table-heading-stroke);
+      color: var(--typography-heading-foreground);
+      font-weight: 600;
+      padding: 0.571em;
+      vertical-align: bottom;
+    }
+
+    & :where(td):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      border: 1px solid var(--typography-table-cell-stroke);
+      padding: 0.571em;
+      vertical-align: baseline;
+    }
+
+    &
+      :where(img, picture, video):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 2em;
+    }
+
+    &
+      :where(picture):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      display: block;
+    }
+
+    &
+      :where(picture > img):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0;
+    }
+
+    &
+      :where(figure):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 2em;
+    }
+
+    &
+      :where(figure > *):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-block: 0;
+    }
+
+    &
+      :where(figcaption):not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-top: 0.857em;
+      color: var(--typography-caption-foreground);
+      font-size: 0.875em;
+      line-height: 1.43;
+    }
+
+    &
+      > :first-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-top: 0;
+    }
+
+    &
+      > :last-child:not(.not-markdown-prose):not(
+        :where(.not-markdown-prose *)
+      ) {
+      margin-bottom: 0;
+    }
+
+    &
+      :where(hr, h2, h3, h4, h5, h6)
+      + *:not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
+      margin-top: 0;
+    }
+  }
+}

package/compiler-assets/nextjs/defaults/root/css/zindex.css

@@ -0,0 +1,39 @@
+:root {
+  --z-content: 10;
+  --z-nav: 100;
+  --z-overlay: 110;
+  --z-modal: 120;
+  --z-search: 125;
+  --z-toast: 130;
+  --z-progress: 140;
+}
+
+@layer utilities {
+  .z-content {
+    z-index: var(--z-content);
+  }
+
+  .z-nav {
+    z-index: var(--z-nav);
+  }
+
+  .z-overlay {
+    z-index: var(--z-overlay);
+  }
+
+  .z-modal {
+    z-index: var(--z-modal);
+  }
+
+  .z-search {
+    z-index: var(--z-search);
+  }
+
+  .z-toast {
+    z-index: var(--z-toast);
+  }
+
+  .z-progress {
+    z-index: var(--z-progress);
+  }
+}