style: observatory styling

components/content-feedback/index.js

@@ -1,12 +1,16 @@
 import { LitElement, css, html } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin";
+// @ts-ignore
 import buttonStyles from "../button/index.css?lit";
 import { Button } from "../button/index.js";
 
+// @ts-ignore
 import thumbsDown from "../icon/thumbs_down.svg?lit";
+// @ts-ignore
 import thumbsUp from "../icon/thumbs_up.svg?lit";
 
+// @ts-ignore
 import styles from "./index.css?lit";
 
 /**

components/content/index.js

@@ -22,7 +22,7 @@ export function Content(context) {
 
 /**
  * @param {Fred.Context} context
- * @param {import("@mdn/rari").Section} section
+ * @param {Rari.Section} section
  * @returns {Lit.TemplateResult}
  */
 export function Section(context, { type, value }) {
@@ -40,7 +40,7 @@ export function Section(context, { type, value }) {
 }
 
 /**
- * @param {import("@mdn/rari").Prose} section
+ * @param {Rari.Prose} section
  * @returns {Lit.TemplateResult}
  */
 function Prose({ id, title, content, isH3 }) {
@@ -53,7 +53,7 @@ function Prose({ id, title, content, isH3 }) {
 }
 
 /**
- * @param {import("@mdn/rari").Compat} section
+ * @param {Rari.Compat} section
  * @returns {Lit.TemplateResult}
  */
 function BCD({ id, title, query, isH3 }) {
@@ -66,7 +66,7 @@ function BCD({ id, title, query, isH3 }) {
 
 /**
  * @param {Fred.Context} context
- * @param {import("@mdn/rari").SpecificationSection} section
+ * @param {Rari.SpecificationSection} section
  */
 function SpecificationsSection(context, { id, title, specifications, isH3 }) {
   const level = isH3 ? 3 : 2;

components/heading-anchor/index.js

@@ -1,4 +1,5 @@
 import { nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { html as hh, unsafeStatic } from "lit/static-html.js";
 
 import "./index.css";
@@ -10,6 +11,6 @@ import "./index.css";
  */
 export function Heading(level, id, title) {
   return id
-    ? hh`<${unsafeStatic("h" + level)} id=${id} class="heading"><a class="heading-anchor" href="#${id}">${title}</a></${unsafeStatic("h" + level)}>`
+    ? hh`<${unsafeStatic("h" + level)} id=${ifDefined(id)} class="heading"><a class="heading-anchor" href="#${id}">${title}</a></${unsafeStatic("h" + level)}>`
     : nothing;
 }

components/index.css

@@ -15,6 +15,7 @@
 @import "logo/index.css";
 @import "menu/index.css";
 @import "navigation/index.css";
+@import "observatory-layout/index.css";
 @import "page-layout/index.css";
 @import "quick-search/index.css";
 @import "reference-layout/index.css";

components/observatory-layout/index.css

@@ -0,0 +1,96 @@
+/* Observatory main layout */
+
+.obs-layout {
+  /* colors */
+
+  --text-primary: light-dark(#1b1b1b, #ffffff);
+  --text-secondary: light-dark(#4e4e4e, #cdcdcd);
+
+  --observatory-bg: light-dark(rgb(242 242 245 / 100%), rgb(52 52 52 / 100%));
+  --observatory-bg-code: light-dark(#e1e1e1, #4d4d4d);
+  --observatory-bg-secondary: light-dark(
+    rgb(255 255 255 / 100%),
+    rgb(0 0 0 / 100%)
+  );
+  --observatory-color: light-dark(#000000, #ffffff);
+  --observatory-color-secondary: light-dark(
+    rgb(105 105 105 / 100%),
+    rgb(249 249 251 / 100%)
+  );
+  --observatory-inverse-color: light-dark(
+    rgb(255 255 255 / 100%),
+    rgb(27 27 27)
+  );
+  --observatory-inverse-color-secondary: light-dark(
+    rgb(179 179 179 / 100%),
+    rgb(105 105 105 / 100%)
+  );
+  --observatory-accent: light-dark(#5a23d7, #a388ff);
+  --observatory-accent-light: light-dark(#5a23d7aa, #a388ffaa);
+  --observatory-border: light-dark(
+    rgb(228 228 246 / 100%),
+    rgb(105 105 105 / 100%)
+  );
+  --observatory-border-accent: light-dark(
+    rgb(90 35 215 / 100%),
+    rgb(163 136 255 / 100%)
+  );
+  --observatory-pass-icon-bg: light-dark(
+    rgb(229 250 230 / 100%),
+    rgb(38 92 61 / 100%)
+  );
+  --observatory-pass-icon-color: light-dark(
+    rgb(0 121 54 / 100%),
+    rgb(138 255 163 / 100%)
+  );
+  --observatory-fail-icon-bg: light-dark(
+    rgb(250 229 229 / 100%),
+    rgb(92 38 38 / 100%)
+  );
+  --observatory-fail-icon-color: light-dark(
+    rgb(211 0 56 / 100%),
+    rgb(255 121 155 / 100%)
+  );
+  --observatory-table-bg: light-dark(rgb(255 255 255 / 100%), rgb(27 27 27));
+  --observatory-table-bg-alternate: light-dark(#f9f9fb, #212121);
+  --observatory-table-header-bg: light-dark(
+    rgb(249 249 251 / 100%),
+    rgb(27 27 27)
+  );
+  --observatory-grade-a-bg: light-dark(#d2fadd, #265c3d);
+  --observatory-grade-a-border: light-dark(#017a37, #89fca1);
+  --observatory-grade-b-bg: light-dark(#e8fad2, #52662a);
+  --observatory-grade-b-border: light-dark(#547a01, #d5fc88);
+  --observatory-grade-c-bg: light-dark(#faf8d2, #66602a);
+  --observatory-grade-c-border: light-dark(#7a7001, #fcf988);
+  --observatory-grade-d-bg: light-dark(#fae8d2, #5c3d26);
+  --observatory-grade-d-border: light-dark(#a65001, #ff6a00);
+  --observatory-grade-f-bg: light-dark(#fad2d2, #5c2626);
+  --observatory-grade-f-border: light-dark(#aa0000, #fc8888);
+  --observatory-arrow-down-color: light-dark(
+    rgb(158 0 39 / 100%),
+    rgb(255 112 127 / 100%)
+  );
+  --observatory-arrow-up-color: light-dark(
+    rgb(0 121 54 / 100%),
+    rgb(0 255 106 / 100%)
+  );
+
+  --form-invalid-color: light-dark(#d30038, #ff97a0);
+
+  --font-body: inter, var(--font-fallback);
+
+  /* icons */
+  --alert-circle-img: url("../../observatory/assets/alert-circle.svg");
+}
+
+/*
+.obs-layout--landing {
+}
+
+.obs-layout__content {
+}
+
+.obs-layout__toc {
+}
+*/

components/observatory-layout/index.js

@@ -0,0 +1,37 @@
+import { html } from "lit";
+
+import "./index.css";
+import { Landing } from "../../observatory/landing/index";
+import { Results } from "../../observatory/results/index";
+
+/**
+ * @import { TemplateResult } from "lit"
+ */
+
+/**
+ * @param {Fred.Context<Rari.SpaPage>} context
+ * @returns {TemplateResult}
+ */
+export function ObservatoryLayoutLanding(context) {
+  return html`
+    <div class="obs-layout obs-layout--landing">
+      <div class="obs-layout__content obs-layout__content--landing">
+        ${Landing(context)}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * @param {Fred.Context<Rari.SpaPage>} context
+ * @returns {TemplateResult}
+ */
+export function ObservatoryLayoutResult(context) {
+  return html`
+    <div class="obs-layout obs-layout--results">
+      <div class="obs-layout__content obs-layout__content--results">
+        ${Results(context)}
+      </div>
+    </div>
+  `;
+}

components/page-layout/index.css

@@ -19,8 +19,10 @@
   z-index: 100;
 }
 
-/* .page-layout__main {
+/*
+.page-layout__main {
 }
 
 .page-layout__footer {
-} */
+}
+*/

components/progress-bar/index.js

@@ -0,0 +1,55 @@
+import { LitElement, css, html } from "lit";
+
+/**
+ * This is an indefinite progress bar that can be used to indicate that a process is ongoing. It is used in Observatory.
+ * CSS variables:
+ * --progress-color: The color of the progress bar. Default is #aaa
+ * --border-radius: The border radius of the progress bar. Default is 0
+ */
+export class ProgressBar extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .progress-bar {
+      width: 100%;
+      height: 20px;
+      background-color: var(--background-color, #eee);
+      overflow: hidden;
+      position: relative;
+      border-radius: var(--border-radius, 0);
+    }
+
+    .progress-bar::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -200%;
+      width: 200%;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        var(--progress-color, #aaa) 50%,
+        transparent 100%
+      );
+      animation: scan 2s infinite alternate ease-in-out;
+    }
+
+    @keyframes scan {
+      from {
+        left: -200%;
+      }
+      to {
+        left: 100%;
+      }
+    }
+  `;
+
+  render() {
+    return html`<div class="progress-bar"></div>`;
+  }
+}
+
+customElements.define("mdn-progress-bar", ProgressBar);

entry.ssr.js

@@ -14,7 +14,7 @@ import { Doc } from "./pages/doc/index.js";
 import { Generic } from "./pages/generic/index.js";
 import { HomePage } from "./pages/home/index.js";
 import {
-  ObservatoryBody,
+  ObservatoryLanding,
   ObservatoryResults,
 } from "./pages/observatory/index.js";
 import { Search } from "./pages/search/index.js";
@@ -87,7 +87,7 @@ export async function render(path, ssrManifest, clientManifest, page) {
         case "SpaObservatoryAnalyze":
           return ObservatoryResults(context);
         case "SpaObservatoryLanding":
-          return ObservatoryBody(context);
+          return ObservatoryLanding(context);
         case "SpaPlay":
           return PageLayout(context, "TODO: Playground");
         case "SpaPlusAiHelp":