@mdn/fred 0.1.0 → 0.2.0

package/components/code-example/prism.css

@@ -1,60 +1,63 @@
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: light-dark(#858585, #b3b3b3);
-}
-
-.token.punctuation {
-  color: light-dark(#858585, #b3b3b3);
-}
-
-.token.attr-name,
-.token.builtin,
-.token.inserted,
-.token.selector,
-.token.property,
-.token.class-name,
-.token.function {
-  color: light-dark(#d30038, #ff97a0);
-}
-
-.token.atrule,
-.token.attr-value {
-  color: light-dark(#007936, #00d061);
-}
-
-.token.keyword {
-  color: light-dark(#0069c2, #c1cff1);
-}
-
-.token.tag,
-.token.char,
-.token.string,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: light-dark(#007936, #00d061);
-}
-
-.token.selector,
-.token.builtin,
-.token.template-string > .token.string,
-.token.inserted {
-  color: light-dark(#872bff, #bea5ff);
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
+.code-example,
+.css-formal-syntax {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: light-dark(#51565d, #b3b3b3);
+  }
+
+  .token.punctuation {
+    color: light-dark(#51565d, #b3b3b3);
+  }
+
+  .token.attr-name,
+  .token.builtin,
+  .token.inserted,
+  .token.selector,
+  .token.property,
+  .token.class-name,
+  .token.function {
+    color: light-dark(#d30038, #ff97a0);
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: light-dark(#007936, #00d061);
+  }
+
+  .token.keyword {
+    color: light-dark(#0069c2, #c1cff1);
+  }
+
+  .token.tag,
+  .token.char,
+  .token.string,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: light-dark(#007936, #00d061);
+  }
+
+  .token.selector,
+  .token.builtin,
+  .token.template-string > .token.string,
+  .token.inserted {
+    color: light-dark(#872bff, #bea5ff);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
 }

package/components/color/area.css

@@ -0,0 +1,11 @@
+:root {
+  --color-area-background: var(--color-background-blue);
+  --color-area-highlight-border: var(--color-blue-50);
+  --color-area-link: var(--color-link-normal);
+}
+
+:root[data-current-area="learn"] {
+  --color-area-background: var(--color-background-orange);
+  --color-area-highlight-border: var(--color-orange-50);
+  --color-area-link: light-dark(var(--color-orange-20), var(--color-orange-80));
+}

package/components/color/border.css

@@ -9,5 +9,5 @@
     var(--color-gray-40),
     var(--color-gray-60)
   );
-  --color-border-active: light-dark(var(--color-blue-80), var(--color-blue-20));
+  --color-border-active: light-dark(var(--color-blue-50), var(--color-blue-80));
 }

package/components/color/global.css

@@ -5,6 +5,7 @@
 @import url("text.css");
 @import url("link.css");
 @import url("scrollbar.css");
+@import url("area.css");
 
 /* Basic */
 
@@ -45,11 +46,11 @@
   --color-orange-20: hsl(25deg 90% 40%);
   --color-orange-10: hsl(25deg 65% 15%);
 
-  --color-yellow-90: hsl(46deg 95% 95%);
-  --color-yellow-80: hsl(46deg 90% 70%);
+  --color-yellow-90: hsl(46deg 97% 88%);
+  --color-yellow-80: hsl(46deg 90% 80%);
   --color-yellow-50: hsl(46deg 92% 47%);
-  --color-yellow-20: hsl(46deg 75% 38%);
-  --color-yellow-10: hsl(46deg 70% 12%);
+  --color-yellow-20: hsl(46deg 85% 32%);
+  --color-yellow-10: hsl(46deg 90% 18%);
 
   --color-green-90: hsl(145deg 40% 94%);
   --color-green-80: hsl(145deg 75% 68%);

package/components/color-theme/element.css

@@ -129,4 +129,8 @@
   &[data-mode="dark"]::before {
     mask-image: var(--color-theme-dark);
   }
+
+  &[data-current] {
+    background: var(--color-background-secondary);
+  }
 }

package/components/color-theme/element.js

@@ -17,6 +17,11 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     super();
     /** @type {import("./types.js").ColorScheme} */
     this._mode = "light dark";
+    this._options = Object.entries({
+      "light dark": this.l10n("theme-default")`OS default`,
+      light: this.l10n`Light`,
+      dark: this.l10n`Dark`,
+    });
   }
 
   /** @param {MouseEvent} event */
@@ -73,36 +78,20 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
           id="color-theme__dropdown"
         >
           <ul class="color-theme__list">
-            <li>
-              <button
-                class="color-theme__option"
-                data-mode="light dark"
-                type="button"
-                @click=${this._setMode}
-              >
-                ${this.l10n("theme-default")`OS default`}
-              </button>
-            </li>
-            <li>
-              <button
-                class="color-theme__option"
-                data-mode="light"
-                type="button"
-                @click=${this._setMode}
-              >
-                ${this.l10n`Light`}
-              </button>
-            </li>
-            <li>
-              <button
-                class="color-theme__option"
-                data-mode="dark"
-                type="button"
-                @click=${this._setMode}
-              >
-                ${this.l10n`Dark`}
-              </button>
-            </li>
+            ${this._options.map(
+              ([mode, option]) =>
+                html`<li>
+                  <button
+                    class="color-theme__option"
+                    data-mode=${mode}
+                    ?data-current=${mode === this._mode}
+                    type="button"
+                    @click=${this._setMode}
+                  >
+                    ${option}
+                  </button>
+                </li>`,
+            )}
           </ul>
         </div>
       </mdn-dropdown>

package/components/compat-table/index-common.css

@@ -48,6 +48,8 @@ table {
 
   margin: 0;
 
+  overflow-x: auto;
+
   border-spacing: 0;
   border-collapse: separate;
 
@@ -77,7 +79,7 @@ table {
   }
 
   thead {
-    line-height: 1;
+    line-height: var(--font-line-ui);
     white-space: nowrap;
   }
 
@@ -227,7 +229,7 @@ table {
 }
 
 .bc-head-txt-label {
-  line-height: 1;
+  line-height: var(--font-line-ui);
 
   white-space: nowrap;
 

package/components/content-section/server.css

@@ -1,18 +1,23 @@
 @import url("../code-example/common.css");
 @import url("../prev-next/index.css");
 @import url("../notecard/index.css");
-@import url("../css-formal-syntax/index.css");
+@import url("../code-example/prism.css");
 
 .content-section {
   line-height: var(--font-line-content);
 
+  :target {
+    scroll-margin-top: var(--sticky-header-height);
+  }
+
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    font-weight: normal;
+    margin: 1rem 0 0;
+    font-weight: var(--font-weight-normal);
   }
 
   h1 {
@@ -30,16 +35,14 @@
 
   h4 {
     font-size: var(--font-size-normal);
-    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   h5,
   h6 {
-    font-size: var(--font-size-small);
-    font-weight: 500;
-
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
+    font-size: var(--font-size-normal);
+    font-weight: var(--font-weight-bold);
   }
 
   a {
@@ -66,13 +69,48 @@
     }
   }
 
-  pre {
+  blockquote {
+    margin-inline: 0;
+    color: var(--color-text-secondary);
+    border-inline-start: 0.25rem solid var(--color-border-primary);
+
+    > p {
+      padding: 1rem 2rem;
+    }
+  }
+
+  pre,
+  code {
+    font-family: var(--font-family-code);
+    white-space: pre-wrap;
+    background-color: var(--color-background-secondary);
+  }
+
+  pre:not(.code-example pre) {
     padding: 1rem;
+
     overflow: auto;
 
-    &:not(.code-example &) {
-      border: 1px solid var(--color-border-primary);
-      border-radius: 0.25em;
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.25rem;
+
+    &.css-formal-syntax {
+      margin-bottom: 0;
+
+      text-wrap: wrap;
+
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      ~ footer {
+        padding: 0.5rem 1rem;
+        margin-bottom: 1rem;
+
+        border: 1px solid var(--color-border-primary);
+        border-top: 0;
+        border-bottom-right-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+      }
     }
   }
 
@@ -81,12 +119,6 @@
     border-radius: 0.25em;
   }
 
-  pre,
-  code {
-    font-family: var(--font-family-code);
-    background-color: var(--color-background-secondary);
-  }
-
   img {
     display: block;
 
@@ -117,7 +149,7 @@
     }
 
     th {
-      font-weight: normal;
+      font-weight: var(--font-weight-normal);
       text-align: left;
     }
 
@@ -128,7 +160,7 @@
       }
 
       th {
-        font-weight: bold;
+        font-weight: var(--font-weight-bold);
         background-color: transparent;
       }
     }
@@ -205,12 +237,94 @@
 
   /* Definition list */
 
-  dl dd {
-    margin-left: 1rem;
-
+  dl {
     dl {
       padding-left: 1rem;
       border-left: 1px solid var(--color-border-primary);
     }
+
+    dd {
+      margin-left: 1rem;
+    }
+
+    ul {
+      margin: 1rem 0 2rem;
+    }
+
+    a[href^="#"] {
+      color: inherit;
+
+      &:hover::before {
+        position: absolute;
+
+        margin-top: 0.3em;
+        margin-left: -0.9em;
+
+        font-size: var(--font-size-small);
+
+        color: var(--color-text-secondary);
+
+        content: "#";
+      }
+    }
+  }
+
+  ul.specifications-list {
+    li:has(details) {
+      margin-left: -1.25rem;
+      list-style: none;
+    }
+
+    details {
+      width: 100%;
+
+      &[open] {
+        > summary {
+          margin-bottom: 0.5rem;
+
+          &::before {
+            transform: rotate(90deg);
+          }
+        }
+      }
+
+      summary {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        &::before {
+          display: inline-block;
+
+          flex-shrink: 0;
+
+          width: 1rem;
+          height: 1rem;
+
+          margin: 0.125rem;
+
+          content: "";
+
+          background-color: currentcolor;
+
+          mask-image: url("../icon/chevron-right.svg");
+          mask-size: cover;
+        }
+
+        &:hover {
+          background-color: var(--color-background-secondary);
+
+          &:has(a:hover) {
+            /* Don't highlight, as link click doesn't toggle. */
+            background-color: unset;
+          }
+        }
+      }
+    }
+  }
+
+  /* Article footer */
+  &.article-footer {
+    margin: 2rem 0;
   }
 }

package/components/contributor-spotlight/server.css

@@ -15,14 +15,14 @@
 
   li {
     margin-bottom: 1rem;
-    line-height: 1.5;
+    line-height: var(--font-line-normal);
     list-style-type: disc;
   }
 
   h1 {
     margin: 0 0 2rem;
     font-size: var(--font-size-largest);
-    font-weight: 600;
+    font-weight: var(--font-weight-bold);
 
     &.trailing-underscore::after {
       text-decoration: underline;
@@ -98,7 +98,7 @@
       margin: 0;
 
       font-size: var(--font-size-normal);
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
     }
   }
 
@@ -186,7 +186,7 @@
     margin: 0;
 
     font-size: var(--font-size-large);
-    font-weight: 600;
+    font-weight: var(--font-weight-bold);
 
     line-height: 1.2;
   }

package/components/curriculum/assets/curriculum-landing-top.svg

@@ -66,7 +66,7 @@
   <path stroke="#7c6063" stroke-linecap="round" stroke-width="7"
     d="M70 191.5s-6.066 15.307-6 25.5c.045 6.778 2 19 2 19m-15.009-36.996s-6.352 14.444-5.797 23.819c.369 6.235 3.218 17.365 3.218 17.365m362.587-80.685S403 153.001 402 145.001m-4.999-24.497c-1.825-8.895-12.13-17.502-12.13-17.502m12.13 17.502c.306 1.495 3.181 18.137 4.999 24.497m-4.999-24.497L402 145.001m26.999-5.499s-5.499-4.502-6.002-10.998c0-7.999-1.546-17.148-5.218-23.116-4.384-7.127-14.797-18.462-14.797-18.462"
     style="display:inline" />
-  <g id="icons-bg" fill="#e9a98c" fill-rule="evenodd" clip-rule="evenodd" style="display:inline">
+  <g id="icons-bg" fill="var(--curriculum-bg-color-landing-top-icon)" fill-rule="evenodd" clip-rule="evenodd" style="display:inline">
     <path fill-opacity="1"
       d="M14.8 79.168c3.208-2.403 7.3-3.837 11.011-3.249 3.79.602 6.876 3.039 8.216 6.3 1.227 2.986-.426 6.412-1.637 9.705-1.185 3.222-2.083 6.76-5.16 8.773-3.216 2.104-7.174 2.203-10.717 1.615-3.63-.603-7.487-1.778-8.862-4.866-1.317-2.96 1.089-6.413 2.376-9.704 1.213-3.103 1.932-6.446 4.773-8.574M72.326 341.288c3.734.849 4.306 6.381 4.71 10.942.402 4.523.858 10.168-2.492 14.06-3.272 3.8-7.613 1.816-11.585 2.296-2.256.273-4.272.356-6.317-.133-2.94-.702-6.881-.093-7.935-3.272-1.142-3.446.136-8.591 2.812-12.185 2.486-3.337 6.277-2.563 9.538-4.398 3.972-2.235 7.65-8.132 11.269-7.31M472.727 74.136c4.495-3.228 10.751-5.281 14.99-3.95 3.973 1.246 3.009 6.223 3.836 9.86.567 2.495 1.564 4.903.153 7.69-1.373 2.71-4.488 4.578-7.356 6.53-3.41 2.323-6.966 5.958-10.518 5.639-3.55-.319-3.229-4.427-4.567-6.992-1.264-2.427-3.483-4.342-2.923-7.378.731-3.965 2.257-8.434 6.385-11.4M253.078 13.957c3.972.53 7.899 2.37 10.136 5.389 2.286 3.083 2.782 6.983 1.456 10.25-1.214 2.991-4.794 4.28-7.964 5.784-3.101 1.47-6.22 3.368-9.826 2.651-3.769-.749-6.665-3.449-8.783-6.35-2.17-2.972-4.101-6.51-2.921-9.678 1.131-3.035 5.267-3.817 8.49-5.266 3.039-1.366 5.893-3.25 9.412-2.78" />
     <path fill-opacity="1"

package/components/curriculum/layout.css

@@ -1,35 +1,103 @@
-/* layout */
-.curriculum-module,
-.curriculum-overview {
+.curriculum-content-container {
   display: grid;
+
+  grid-template-areas:
+    "sidebar . header . toc"
+    "sidebar . body   . toc";
+  grid-template-rows: min-content auto;
   grid-template-columns: var(--layout-2-sidebars);
+
+  justify-content: space-between;
+
   padding-inline: var(--layout-side-padding);
 
-  .curriculum-content {
-    grid-column: content;
+  .curriculum-layout__content {
+    display: contents;
   }
 
-  .sidebar-container {
-    grid-column: left-sidebar;
+  .curriculum-layout__header {
+    grid-area: header;
   }
 
-  .toc-container {
-    grid-column: right-sidebar;
+  .curriculum-layout__body {
+    grid-area: body;
+    padding-bottom: 3rem;
+  }
+
+  .curriculum-layout__sidebar {
+    grid-area: sidebar;
+    padding-top: 0;
+
+    @media (--screen-layout-2-sidebars) {
+      .left-sidebar {
+        padding-right: calc(var(--layout-sidebar-gap) / 2);
+        margin-right: calc(var(--layout-sidebar-gap) / -2);
+      }
+    }
+  }
+
+  .curriculum-layout__toc {
+    display: flex;
+
+    flex-wrap: wrap;
+
+    grid-area: toc;
+
+    gap: 0.5rem;
+    align-content: start;
+    align-items: start;
+    justify-content: space-between;
+  }
+
+  .curriculum-layout__sidebar .left-sidebar,
+  .curriculum-layout__toc {
+    position: sticky;
+    top: var(--sticky-header-height);
+
+    max-height: calc(100vh - var(--sticky-header-height));
+
+    overflow-y: auto;
   }
 
   @media (--screen-layout-1-sidebar-or-less) {
+    grid-template-areas:
+      "toc . header"
+      "toc . body";
     grid-template-columns: var(--layout-1-sidebar-left);
 
-    .toc {
+    .curriculum-layout__sidebar {
+      z-index: 1;
+
       display: none;
+
+      grid-area: toc;
+
+      background: var(--color-background-page);
     }
   }
 
   @media (--screen-layout-no-sidebar) {
-    grid-template-columns: var(--layout-no-sidebar);
+    display: block;
 
-    .sidebar-container {
-      display: none;
+    .curriculum-layout__sidebar {
+      position: fixed;
+      inset: 0;
+      top: var(--sticky-header-height);
+      z-index: var(--z-index-sidebar-mobile);
+
+      .left-sidebar {
+        padding: 1rem;
+      }
+    }
+
+    .curriculum-layout__toc {
+      position: unset;
+      top: unset;
+
+      max-height: unset;
+
+      overflow-y: unset;
+      --toc-header-font-size: var(--font-size-larger);
     }
   }
 }