@universal-ember/docs-support 0.9.2 → 0.9.4

package/dist/site-css/components.css

@@ -1,23 +1,103 @@
+/* Lightbulb icon (callout) */
+.lightbulb-icon {
+  --icon-foreground: #0f172a;
+  --icon-background: white;
+}
+
+.icon-bg-fill {
+  fill: var(--icon-background);
+}
+
+.icon-fg-fill {
+  fill: var(--icon-foreground);
+}
+
+.lightbulb-light {
+  display: block;
+}
+
+.lightbulb-dark {
+  display: none;
+}
+
+:is(html[style*="color-scheme: dark"]) .lightbulb-light {
+  display: none;
+}
+
+:is(html[style*="color-scheme: dark"]) .lightbulb-dark {
+  display: inline;
+}
+
 .edit-page:after {
   content: "➚";
-  @apply pl-1;
+  padding-left: 0.25rem;
 }
 
 .prose details {
-  @apply px-6 py-3 mb-6 -mt-0 border rounded-xl dark:border-slate-800;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+
+  :is(html[style*="color-scheme: dark"]) & {
+    border-color: #1e293b;
+  }
 }
 
 .prose summary {
-  @apply font-medium cursor-default select-none text-slate-900 dark:text-slate-200;
+  font-weight: 500;
+  cursor: default;
+  user-select: none;
+  color: #0f172a;
+
+  :is(html[style*="color-scheme: dark"]) & {
+    color: #e2e8f0;
+  }
 }
 
 .prose summary h1,
 .prose summary h2,
 .prose summary h3 {
-  @apply inline m-0;
+  display: inline;
+  margin: 0;
 }
 
 .prose pre {
   max-height: 520px;
 }
 
+/* Styled links used in Links component */
+.styled-link {
+  --link-prose-background: #fff;
+  --link-prose-underline: #7dd3fc;
+  --link-prose-underline-size: 4px;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow:
+    inset 0 -2px 0 0 var(--link-prose-background),
+    inset 0 calc(-1 * (var(--link-prose-underline-size) + 2px)) 0 0 var(--link-prose-underline);
+}
+
+.styled-link:hover {
+  --link-prose-underline-size: 6px;
+}
+
+:is(html[style*="color-scheme: dark"]) .styled-link {
+  --link-prose-background: #0f172a;
+  --link-prose-underline: #075985;
+
+  color: #38bdf8;
+  box-shadow: inset 0 calc(-1 * var(--link-prose-underline-size, 2px)) 0 0
+    var(--link-prose-underline);
+}
+
+:is(html[style*="color-scheme: dark"]) .styled-link:hover {
+  --link-prose-underline-size: 6px;
+}

package/dist/site-css/featured-demo.css

@@ -1,9 +1,15 @@
 .featured-demo .glimdown-render,
 .featured-demo .repl-sdk__demo {
-  @apply w-full max-w-full p-20 bg-gradient-to-r from-violet-600 to-indigo-600 rounded-xl max-h-80 text-slate-50;
+  width: 100%;
+  max-width: 100%;
+  padding: 5rem;
+  background: linear-gradient(to right, #7c3aed, #4f46e5);
+  border-radius: 0.75rem;
+  max-height: 20rem;
+  color: #f8fafc;
 }
 
 .featured-demo.auto-height .glimdown-render,
 .featured-demo.auto-height .repl-sdk__demo {
-  @apply max-h-none;
+  max-height: none;
 }

package/dist/site-css/prose.css

@@ -0,0 +1,320 @@
+/**
+ * Prose typography styles
+ * Replaces @tailwindcss/typography plugin
+ */
+
+.prose {
+  --prose-body: #334155;
+  --prose-headings: #0f172a;
+  --prose-lead: #64748b;
+  --prose-links: #0f172a;
+  --prose-bold: #0f172a;
+  --prose-counters: #64748b;
+  --prose-bullets: #94a3b8;
+  --prose-hr: #e2e8f0;
+  --prose-quotes: #0f172a;
+  --prose-quote-borders: #e2e8f0;
+  --prose-captions: #64748b;
+  --prose-kbd: #0f172a;
+  --prose-kbd-shadows: 17 24 39;
+  --prose-code: #0f172a;
+  --prose-pre-code: #e2e8f0;
+  --prose-pre-bg: #02020e;
+  --prose-th-borders: #cbd5e1;
+  --prose-td-borders: #e2e8f0;
+  --prose-background: #fff;
+  --prose-underline: #7dd3fc;
+  --prose-underline-size: 2px;
+
+  color: var(--prose-body);
+  max-width: none;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+:is(html[style*="color-scheme: dark"]) .prose {
+  --prose-body: #94a3b8;
+  --prose-headings: #f8fafc;
+  --prose-lead: #94a3b8;
+  --prose-links: #f8fafc;
+  --prose-bold: #f8fafc;
+  --prose-counters: #94a3b8;
+  --prose-bullets: #475569;
+  --prose-hr: #1e293b;
+  --prose-quotes: #f1f5f9;
+  --prose-quote-borders: #1e293b;
+  --prose-captions: #94a3b8;
+  --prose-kbd: #f8fafc;
+  --prose-code: #f8fafc;
+  --prose-pre-code: #e2e8f0;
+  --prose-pre-bg: rgb(30 41 59 / 0.6);
+  --prose-th-borders: #475569;
+  --prose-td-borders: #1e293b;
+  --prose-background: #0f172a;
+  --prose-underline: #075985;
+  --prose-underline-size: 2px;
+
+  color: #94a3b8;
+}
+
+/* Headings */
+.prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-headings);
+  font-weight: 400;
+  font-family: var(--font-display, "Helvetica", "Arial", sans-serif);
+  display: inline-block;
+  scroll-margin-top: 7rem;
+}
+
+@media (min-width: 1024px) {
+  .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    scroll-margin-top: 8.5rem;
+  }
+}
+
+.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  margin-top: 0;
+  margin-bottom: 0.875em;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.333;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+/* Paragraphs */
+.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+/* Lead text */
+.prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-lead);
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+/* Links */
+.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-links);
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow:
+    inset 0 -2px 0 0 var(--prose-background),
+    inset 0 calc(-1 * (var(--prose-underline-size) + 2px)) 0 0 var(--prose-underline);
+}
+
+.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
+  --prose-underline-size: 3px;
+}
+
+:is(html[style*="color-scheme: dark"])
+  .prose
+  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: #38bdf8;
+}
+
+:is(html[style*="color-scheme: dark"])
+  .prose
+  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
+  --prose-underline-size: 6px;
+}
+
+/* Bold */
+.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-bold);
+  font-weight: 600;
+}
+
+/* Lists */
+.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+  color: var(--prose-counters);
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+  color: var(--prose-bullets);
+}
+
+/* Blockquotes */
+.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--prose-quotes);
+  border-left: 0.25rem solid var(--prose-quote-borders);
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/* Horizontal rules */
+.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-color: var(--prose-hr);
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+/* Code */
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-code);
+  font-weight: 600;
+  font-size: 0.875em;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
+:is(html[style*="color-scheme: dark"])
+  .prose
+  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: #f8fafc;
+}
+
+/* Pre (code blocks) */
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-pre-code);
+  background-color: var(--prose-pre-bg);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.714;
+  margin-top: 1.714em;
+  margin-bottom: 1.714em;
+  border-radius: 0.75rem;
+  padding: 0.857em 1.143em;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+:is(html[style*="color-scheme: dark"])
+  .prose
+  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background-color: rgb(30 41 59 / 0.6);
+  box-shadow: none;
+  outline: 1px solid rgb(203 213 225 / 0.1);
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+/* Tables */
+.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.714;
+}
+
+.prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--prose-th-borders);
+}
+
+.prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-headings);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-right: 0.571em;
+  padding-bottom: 0.571em;
+  padding-left: 0.571em;
+  display: table-cell;
+}
+
+.prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--prose-td-borders);
+}
+
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-bottom-width: 0;
+}
+
+.prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  vertical-align: baseline;
+}
+
+.prose :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-top-width: 1px;
+  border-top-color: var(--prose-th-borders);
+}
+
+.prose :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  vertical-align: top;
+}
+
+.prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  text-align: left;
+  padding: 0.571em;
+}
+
+/* Figures and captions */
+.prose :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--prose-captions);
+  font-size: 0.875em;
+  line-height: 1.428;
+  margin-top: 0.857em;
+}
+
+/* Images and media */
+.prose :where(img, video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}

package/dist/site-css/shell.css

@@ -12,7 +12,11 @@
 
   aside,
   aside nav {
-    @apply bg-white dark:bg-slate-900;
+    background: white;
+
+    :is(html[style*="color-scheme: dark"]) & {
+      background: #02020e;
+    }
   }
 
   /**
@@ -20,10 +24,22 @@
    */
   .outer-content {
     max-width: 80rem;
-    @apply sm:px-2 lg:px-8 xl:px-12;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     display: grid;
     gap: 0.5rem;
+
+    @media (min-width: 1024px) {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
+    @media (min-width: 1280px) {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }
   }
+
   .mobile-menu-wrapper__content {
     .outer-content {
       display: grid;
@@ -93,9 +109,11 @@ header button.mobile-menu__toggle {
     .outer-content {
       grid-template-columns: 1fr;
 
-      @apply px-4;
+      padding-left: 1rem;
+      padding-right: 1rem;
     }
   }
+
   .mobile-menu-wrapper__content aside {
     display: none;
   }

package/dist/site-css/site.css

@@ -1,7 +1,3 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
 html,
 body {
   /*overflow: hidden;*/
@@ -10,7 +6,14 @@ body {
 
 @layer base {
   body {
-    @apply font-sans text-gray-900 bg-white;
+    font-family: var(--font-sans);
+    color: #111827;
+    background-color: white;
+  }
+
+  :is(html[style*="color-scheme: dark"]) body {
+    color: #f1f5f9;
+    background-color: #02020e;
   }
 
   [inert] ::-webkit-scrollbar {
@@ -30,15 +33,22 @@ textarea,
 [tabindex] {
   &:focus,
   &:focus-visible {
-    @apply outline-none;
+    outline: none;
   }
+
   &:focus-visible {
-    @apply ring-2 ring-offset-2 ring-[#e04e39] ring-offset-black rounded;
+    box-shadow:
+      0 0 0 2px black,
+      0 0 0 4px #e04e39;
+    border-radius: 0.25rem;
   }
 }
 
 [role="switch"][name="color-scheme"]:focus-visible + label .ball {
-  @apply ring-2 ring-offset-2 ring-[#e04e39] ring-offset-black rounded;
+  box-shadow:
+    0 0 0 2px black,
+    0 0 0 4px #e04e39;
+  border-radius: 0.25rem;
 }
 
 .facade-header {
@@ -51,26 +61,51 @@ textarea,
 }
 
 nav[aria-label="Main Navigation"] {
-  @apply text-base;
+  font-size: 1rem;
+  line-height: 1.5rem;
 
   > ul {
-    @apply space-y-9;
+    display: flex;
+    flex-direction: column;
+    gap: 2.25rem;
 
     h2 {
-      @apply font-medium font-display text-slate-900 dark:text-white;
+      font-weight: 500;
+      color: #0f172a;
+      font-family: var(--font-display);
+
+      :is(html[style*="color-scheme: dark"]) & {
+        color: white;
+      }
     }
 
     ul {
-      @apply mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800;
+      margin-top: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border-left: 2px solid #f1f5f9;
+
+      :is(html[style*="color-scheme: dark"]) & {
+        border-color: #1e293b;
+      }
+
+      @media (min-width: 1024px) {
+        margin-top: 1rem;
+        gap: 1rem;
+        border-color: #e2e8f0;
+      }
     }
 
     li {
-      @apply pl-4 relative;
+      padding-left: 1rem;
+      position: relative;
     }
 
     > li {
       > a {
-        @apply font-medium font-display;
+        font-weight: 500;
+        font-family: var(--font-display);
       }
     }
   }

package/dist/theme-toggle.css

@@ -8,7 +8,15 @@
   transition: background 0.2s linear;
 
   .sr-only {
-    margin-left: -0.5rem;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
   }
 
   input[type="checkbox"][role="switch"] {

package/dist/types/scoped-css.d.ts

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=scoped-css.d.ts.map

package/dist/types/scoped-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-css.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}