@universal-ember/docs-support 0.9.3 → 0.9.5

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":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-ember/docs-support",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -13,9 +13,6 @@
       "types": "./declarations/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./tailwind": {
-      "import": "./tailwind.mjs"
-    },
     "./*": {
       "types": "./declarations/*.d.ts",
       "default": "./dist/*.js"
@@ -31,7 +28,6 @@
   },
   "files": [
     "addon-main.cjs",
-    "tailwind.mjs",
     "declarations",
     "dist",
     "src"
@@ -39,7 +35,6 @@
   "dependencies": {
     "@embroider/addon-shim": "^1.10.2",
     "@fontsource/lexend": "^5.2.11",
-    "@tailwindcss/typography": "^0.5.15",
     "change-case": "^5.4.4",
     "decorator-transforms": "2.3.1",
     "ember-mobile-menu": "^6.0.0",
@@ -50,8 +45,7 @@
     "package-up": "^5.0.0",
     "read-package-up": "^12.0.0",
     "should-handle-link": "^1.2.2",
-    "tailwindcss": "^3.4.14",
-    "ember-primitives": "^0.53.1"
+    "ember-primitives": "^0.55.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -67,6 +61,7 @@
     "@rollup/plugin-babel": "^6.1.0",
     "babel-plugin-ember-template-compilation": "^4.0.0",
     "concurrently": "^9.2.1",
+    "ember-scoped-css": "^2.0.4",
     "ember-source": "^6.10.1",
     "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",

package/src/article.gts

@@ -1,42 +1,7 @@
 import type { TOC } from '@ember/component/template-only';
 
-/**
- * TODO: use CSS, this is silly.
- */
-const proseClasses = `
-  prose prose-slate max-w-none
-  dark:prose-invert dark:text-slate-400
-  prose-th:table-cell
-  prose-headings:inline-block
-  prose-headings:scroll-mt-28
-  prose-headings:font-display
-  prose-headings:font-normal
-  lg:prose-headings:scroll-mt-[8.5rem]
-  prose-h1:text-3xl
-
-  prose-lead:text-slate-500
-  dark:prose-lead:text-slate-400
-
-  prose-a:font-semibold
-  dark:prose-a:text-sky-400
-  prose-a:no-underline
-  prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
-  hover:prose-a:[--tw-prose-underline-size:3px]
-  dark:[--tw-prose-background:theme(colors.slate.900)]
-  dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
-  dark:hover:prose-a:[--tw-prose-underline-size:6px]
-  prose-pre:rounded-xl prose-pre:bg-slate-900
-  prose-pre:shadow-lg
-  dark:prose-pre:bg-slate-800/60
-  dark:prose-pre:shadow-none
-  dark:prose-pre:ring-1
-  dark:prose-pre:ring-slate-300/10
-  dark:prose-hr:border-slate-800
-  dark:prose-code:text-slate-50
-`;
-
 export const Article: TOC<{ Element: HTMLElement; Blocks: { default: [] } }> = <template>
-  <article class={{proseClasses}} ...attributes>
+  <article class="prose" ...attributes>
     {{yield}}
   </article>
 </template>;

package/src/callout.gts

@@ -3,16 +3,56 @@ import { LightBulb } from './icons.gts';
 import type { TOC } from '@ember/component/template-only';
 
 export const Callout: TOC<{ Blocks: { default: [] } }> = <template>
-  <div
-    class="flex p-6 my-8 rounded-3xl bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10"
-  >
-    <LightBulb class="flex-none w-8 h-8" />
-    <div class="flex-auto min-w-0 ml-4">
-      <div
-        class="text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 dark:text-slate-50 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
-      >
+  <div class="callout">
+    <LightBulb class="callout__icon" />
+    <div class="callout__body">
+      <div class="callout__content">
         {{yield}}
       </div>
     </div>
   </div>
+
+  <style scoped>
+    .callout {
+      display: flex;
+      padding: 1.5rem;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      border-radius: 1.5rem;
+      background-color: #f0f9ff;
+    }
+
+    :is(html[style*="color-scheme: dark"]) .callout {
+      background-color: rgb(30 41 59 / 0.6);
+      outline: 1px solid rgb(203 213 225 / 0.1);
+    }
+
+    .callout__icon {
+      flex: none;
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .callout__body {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin-left: 1rem;
+    }
+
+    .callout__content {
+      color: #075985;
+    }
+
+    .callout__content > *:first-child {
+      margin-top: 0;
+    }
+
+    .callout__content > *:last-child {
+      margin-bottom: 0;
+    }
+
+    :is(html[style*="color-scheme: dark"]) .callout__content {
+      color: #f8fafc;
+    }
+  </style>
 </template>;

package/src/errors.gts

@@ -8,7 +8,7 @@ export const OopsError: TOC<{
 }> = <template>
   <div
     data-page-error
-    class="dark:text-white text:slate-900"
+    class="adaptive-text"
     style="border: 1px solid red; padding: 1rem; word-break: break-all;"
   >
     <h1>Oops!</h1><br />
@@ -18,4 +18,13 @@ export const OopsError: TOC<{
     <br />
     {{yield}}
   </div>
+
+  <style scoped>
+    .adaptive-text {
+      color: #0f172a;
+    }
+    :is(html[style*="color-scheme: dark"]) .adaptive-text {
+      color: white;
+    }
+  </style>
 </template>;

package/src/h2.gts

@@ -1,5 +1,5 @@
 import type { TOC } from '@ember/component/template-only';
 
 export const H2: TOC<{ Blocks: { default: [] } }> = <template>
-  <h2 class="text-3xl">{{yield}}</h2>
+  <h2 style="font-size: 1.875rem; line-height: 2.25rem;">{{yield}}</h2>
 </template>;