@universal-ember/docs-support 0.9.2 → 0.9.4

package/src/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/src/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/src/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/src/text.gts

@@ -1,5 +1,14 @@
 import type { TOC } from '@ember/component/template-only';
 
 export const Text: TOC<{ Blocks: { default: [] } }> = <template>
-  <span class="dark:text-white text:slate-900">{{yield}}</span>
+  <span class="adaptive-text">{{yield}}</span>
+
+  <style scoped>
+    .adaptive-text {
+      color: #0f172a;
+    }
+    :is(html[style*="color-scheme: dark"]) .adaptive-text {
+      color: white;
+    }
+  </style>
 </template>;

package/src/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/src/theme-toggle.gts

@@ -28,8 +28,8 @@ export const ThemeToggle = <template>
         🎵 It's raining, it's pouring, ... 🎵
         https://www.youtube.com/watch?v=ll5ykbAumD4
       }}
-      <Moon class="fill-sky-400" />
-      <Sun class="fill-yellow-400" />
+      <Moon style="fill: #38bdf8;" />
+      <Sun style="fill: #facc15;" />
       <span class="ball"></span>
     </s.Label>
   </Switch>

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

@@ -0,0 +1,8 @@
+// Type augmentation for ember-scoped-css <style scoped> support
+declare global {
+  interface HTMLStyleElementAttributes {
+    scoped?: unknown;
+  }
+}
+
+export {};

package/tailwind.mjs

@@ -1,74 +0,0 @@
-import path from "node:path";
-import assert from "node:assert";
-import { createRequire } from "node:module";
-
-import { readPackageUp } from "read-package-up";
-import { packageUp } from "package-up";
-import defaultTheme from "tailwindcss/defaultTheme.js";
-import typography from "@tailwindcss/typography";
-
-// tailwindcss is built incorrectly to allow named imports
-const fontFamily = defaultTheme.fontFamily;
-
-const require = createRequire(import.meta.url);
-
-/**
- * Thanks, past self
- * https://github.com/CrowdStrike/ember-oss-docs/blob/main/ember-oss-docs/tailwind.cjs
- */
-const files = "**/*.{js,ts,hbs,gjs,gts,html,md}";
-const sourceEntries = "{app,src,public}";
-
-export async function config(root, { packages } = {}) {
-  const appManifestPath = await packageUp(root);
-  const packageResult = await readPackageUp(root);
-  const appRoot = path.dirname(appManifestPath);
-
-  const appPackageJson = packageResult?.packageJson;
-
-  assert(appPackageJson, `Could not find package.json for ${root}`);
-
-  const contentPaths = [
-    `${appRoot}/${sourceEntries}/${files}`,
-
-    /**
-     * Also check if addons/libraries contain any tailwind classes
-     * that we need to include
-     *
-     * This may be overkill for the typical app,
-     * but for our use case, documentation apps, it should be fine.
-     * (The risk here is scanning too many files and potentially
-     *   running out of files watchers (tho, this isn't a problem on linux haha))
-     */
-    ...Object.keys(appPackageJson.dependencies)
-      .map((depName) => {
-        if (packages) {
-          if (!packages.includes(depName)) {
-            return;
-          }
-        }
-        const packagePath = path.dirname(require.resolve(depName, { paths: [appRoot] }));
-
-        return `${packagePath}/${files}`;
-      })
-      .filter(Boolean),
-  ];
-
-  /** @type {import('tailwindcss').Config} */
-  return {
-    content: [...contentPaths],
-    darkMode: "selector",
-    theme: {
-      extend: {
-        maxWidth: {
-          "8xl": "88rem",
-        },
-        fontFamily: {
-          sans: ["InterVariable", ...fontFamily.sans],
-          display: ["Helvetica, Arial, sans-serif"],
-        },
-      },
-    },
-    plugins: [typography],
-  };
-}