@jrgermain/stylesheet 0.2.0 → 0.3.0

package/src/styles/components/{_field.scss → field.css}

@@ -1,5 +1,3 @@
-@use "../utils";
-
 .field {
   --field-gap: var(--space-2xs);
   --field-padding: 0.5em;
@@ -15,9 +13,10 @@
   transition-property: color, box-shadow;
   transition-timing-function: ease;
   font-size: var(--font-size-m);
+  font-family: var(--font-family-body);
 
   &.compact,
-  :is(form, .form, fieldset).compact & {
+  .fieldset.compact & {
     --field-gap: calc(0.9 * var(--space-2xs));
     --field-padding: 0.33em;
     --field-radius: var(--radius-s);
@@ -67,7 +66,7 @@
     transition-duration: 200ms;
     transition-property: color, box-shadow, border-color;
     transition-timing-function: ease;
-    font-family: var(--font-family-body);
+    font-family: inherit;
 
     @media (prefers-color-scheme: dark) {
       background-color: black;
@@ -82,13 +81,12 @@
     }
 
     &:disabled {
-      opacity: 0.7;
+      opacity: var(--opacity-disabled);
       cursor: not-allowed;
     }
 
-    // Not using :read-only because it matches additional elements (e.g., every color input)
+    /* Not using :read-only because it matches additional elements (e.g., every color input) */
     &[readonly] {
-      cursor: not-allowed;
       border-style: dashed;
 
       &:focus {
@@ -141,9 +139,7 @@
   }
 
   select {
-    background-image: #{utils.svg-to-data-url(
-        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="m6 9l6 6l6-6"/></svg>'
-      )};
+    background-image: url("@/src/svg/dropdown.svg");
     background-position: center right 0.25em;
     background-size: auto 75%;
     background-repeat: no-repeat;
@@ -152,9 +148,7 @@
     padding-inline-end: calc(2 * var(--space-2xs) + 1em);
 
     @media (prefers-color-scheme: dark) {
-      background-image: #{utils.svg-to-data-url(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="m6 9l6 6l6-6"/></svg>'
-        )};
+      background-image: url("@/src/svg/dropdown-invert.svg");
     }
 
     &:dir(rtl) {
@@ -184,9 +178,7 @@
 
     &::before {
       content: "";
-      mask-image: #{utils.svg-to-data-url(
-          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z"/></svg>'
-        )};
+      mask-image: url("@/src/svg/x-circle.svg");
       mask-size: contain;
       mask-repeat: no-repeat;
       mask-position: center;
@@ -285,20 +277,29 @@
   }
 }
 
-fieldset {
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--color-brand-5);
+}
+
+fieldset.fieldset {
   border: var(--border-s) solid var(--color-outline);
   border-radius: var(--radius-s);
   background-color: var(--color-body);
   color: var(--color-body-text);
 
   legend {
-    color: var(--color-brand-3);
     font-family: var(--font-family-heading);
     font-weight: var(--font-weight-bold);
+    transition: color 200ms ease;
+  }
+
+  &:focus-within legend {
+    color: var(--color-brand-5);
   }
 }
 
-input[type="checkbox"],
-input[type="radio"] {
-  accent-color: var(--color-brand-5);
+.form {
+  max-width: 60ch;
+  margin-inline-end: auto;
 }

package/src/styles/components/{_layout.scss → flex.css}

@@ -1,4 +1,7 @@
-%flex-layout {
+.flow,
+.stack,
+.separate,
+.space {
   display: flex !important;
   gap: var(--space-s);
 
@@ -38,48 +41,25 @@
 }
 
 .flow {
-  @extend %flex-layout;
-
   flex-wrap: wrap;
   align-items: center;
   justify-content: start;
 }
 
 .stack {
-  @extend %flex-layout;
-
   flex-wrap: nowrap;
   align-items: stretch;
   justify-content: start;
 }
 
 .separate {
-  @extend %flex-layout;
-
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
 }
 
 .space {
-  @extend %flex-layout;
-
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-around;
-}
-
-:is(form, .form, .text-container):not(.no-max-width) {
-  max-width: 60ch;
-}
-
-%visually-hidden {
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
+  justify-content: space-evenly;
 }

package/src/styles/components/heading.css

@@ -0,0 +1,60 @@
+.heading-1,
+.heading-2,
+.heading-3,
+.heading-4,
+.heading-5,
+.heading-6,
+.markdown-output :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-family-heading);
+  margin-block: 0.75em 0.3em;
+  line-height: 1.15;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+
+.heading-1,
+.markdown-output h1 {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-black);
+
+  /* 
+   * Since the Level 1 Heading will typically be the first item inside the App
+   * Content container (which already has padding at the top), we remove the top
+   * margin by default. We can always add it back for special cases.
+   */
+  margin-block-start: 0;
+
+  .app-content > &:first-of-type {
+    margin-block-start: 0;
+  }
+}
+
+.heading-2,
+.markdown-output h2 {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+}
+
+.heading-3,
+.markdown-output h3 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+}
+
+.heading-4,
+.markdown-output h4 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.heading-5,
+.markdown-output h5 {
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-semibold);
+}
+
+.heading-6,
+.markdown-output h6 {
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-bold);
+}

package/src/styles/components/highlight.css

@@ -0,0 +1,39 @@
+.highlight,
+.markdown-output mark {
+  background-color: light-dark(var(--color-yellow-8), var(--color-yellow-7));
+  color: light-dark(var(--color-yellow-2), var(--color-yellow-1));
+  print-color-adjust: exact;
+}
+
+.highlight.removed,
+.markdown-output del {
+  background-color: var(--color-red-8);
+  color: var(--color-red-2);
+  transition: text-decoration-color 150ms ease;
+  text-decoration-line: line-through;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: var(--border-m);
+  text-decoration-color: var(--color-red-4);
+  print-color-adjust: exact;
+
+  &:hover {
+    text-decoration-color: transparent;
+  }
+}
+
+.highlight.added,
+.markdown-output ins {
+  background-color: var(--color-green-8);
+  color: var(--color-green-2);
+  text-decoration-thickness: var(--border-m);
+  text-decoration-color: var(--color-green-4);
+  text-underline-offset: 0.1em;
+  print-color-adjust: exact;
+}
+
+.highlight.target,
+::target-text {
+  background-color: var(--color-brand-8);
+  color: light-dark(var(--color-brand-2), var(--color-brand-1));
+  print-color-adjust: exact;
+}

package/src/styles/components/link.css

@@ -0,0 +1,41 @@
+.link,
+.markdown-output a {
+  color: var(--color-sky-4);
+  font-weight: var(--font-weight-semibold);
+  text-decoration-line: underline;
+  text-decoration-color: var(--color-sky-transparent);
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: var(--border-m);
+  text-underline-offset: 0.1em;
+  cursor: pointer;
+  transition: text-decoration-color 200ms ease;
+
+  &:is(:hover, .hover) {
+    text-decoration-color: currentcolor;
+  }
+
+  &:focus-visible {
+    outline-offset: 1px;
+  }
+}
+
+[target="_blank"]:is(.link, .button, .markdown-output a):not(
+    .no-external-icon
+  )::after {
+  content: "";
+  print-color-adjust: exact;
+  mask-image: url("@/src/svg/external.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background-color: var(--color-gray-5);
+  display: inline-block;
+  height: 0.85em;
+  width: 0.85em;
+  vertical-align: baseline;
+  margin-left: 0.1em;
+}
+
+/* For buttons, match external icon color to button text */
+a.button[target="_blank"]:not(.no-external-icon)::after {
+  background-color: currentcolor;
+}

package/src/styles/components/meter.css

@@ -0,0 +1,80 @@
+meter.meter {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 1em;
+}
+
+@supports selector(::-moz-meter-bar) {
+  meter.meter {
+    border-radius: var(--radius-s);
+    border: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 1em;
+    box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);
+    background: var(--color-gray-9);
+    box-sizing: border-box;
+    overflow: clip;
+  }
+}
+
+.meter::-webkit-meter-bar {
+  border-radius: var(--radius-s);
+  border: 0;
+  display: block;
+  inline-size: 100%;
+  block-size: 1em;
+  box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);
+  background: var(--color-gray-9);
+  box-sizing: border-box;
+  overflow: clip;
+}
+
+.meter::-webkit-meter-optimum-value,
+.meter::-webkit-meter-suboptimum-value,
+.meter::-webkit-meter-even-less-good-value {
+  border-radius: var(--radius-s);
+  border: var(--border-s) solid transparent;
+  box-sizing: border-box;
+}
+
+.meter::-webkit-meter-inner-element {
+  display: inline-block;
+  position: relative;
+}
+
+.meter::-moz-meter-bar {
+  border-radius: var(--radius-s);
+  border: var(--border-s) solid transparent;
+  box-sizing: border-box;
+}
+
+.meter::-webkit-meter-optimum-value {
+  background: var(--color-green-6);
+  border-color: var(--color-green-5);
+}
+
+.meter:-moz-meter-optimum::-moz-meter-bar {
+  background: var(--color-green-6);
+  border-color: var(--color-green-5);
+}
+
+.meter::-webkit-meter-suboptimum-value {
+  background: light-dark(var(--color-yellow-7), var(--color-yellow-4));
+  border-color: light-dark(var(--color-yellow-6), var(--color-yellow-3));
+}
+
+.meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: light-dark(var(--color-yellow-7), var(--color-yellow-4));
+  border-color: light-dark(var(--color-yellow-6), var(--color-yellow-3));
+}
+
+.meter::-webkit-meter-even-less-good-value {
+  background: var(--color-red-6);
+  border-color: var(--color-red-5);
+}
+
+.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--color-red-6);
+  border-color: var(--color-red-5);
+}

package/src/styles/components/modal.css

@@ -0,0 +1,39 @@
+/* See utils/base-dialog for more */
+.modal {
+  max-height: calc(100svh - 4 * var(--space-body));
+  max-width: calc(100svw - 4 * var(--space-body));
+  margin: auto;
+
+  &.small {
+    width: 400px;
+  }
+
+  &.medium {
+    width: 650px;
+  }
+
+  &.large {
+    width: 900px;
+  }
+}
+
+.modal-footer {
+  padding: var(--space-xs);
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-2xs);
+  justify-content: flex-start;
+  background-color: var(--color-body);
+  border-block-start: var(--border-s) solid var(--color-outline);
+  margin: 0;
+
+  @media screen and (width <= 500px) {
+    flex-direction: column;
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .button:not(.small, .medium, .large) {
+    font-size: 0.9rem;
+  }
+}

package/src/styles/components/progress.css

@@ -0,0 +1,73 @@
+@keyframes indeterminate-progress {
+  from {
+    opacity: 0.2;
+  }
+
+  to {
+    opacity: 0.8;
+  }
+}
+
+progress.progress {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 1em;
+}
+
+@supports selector(::-moz-progress-bar) {
+  progress.progress {
+    border-radius: var(--radius-s);
+    border: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 1em;
+    box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);
+    background: var(--color-gray-9);
+    box-sizing: border-box;
+    overflow: clip;
+  }
+}
+
+.progress::-webkit-progress-bar {
+  border-radius: var(--radius-s);
+  border: 0;
+  display: block;
+  inline-size: 100%;
+  block-size: 1em;
+  box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);
+  background: var(--color-gray-9);
+  box-sizing: border-box;
+  overflow: clip;
+}
+
+.progress::-webkit-progress-value {
+  border-radius: var(--radius-s);
+  border: var(--border-s) solid transparent;
+  box-sizing: border-box;
+  background: var(--color-blue-6);
+  border-color: var(--color-blue-5);
+}
+
+.progress::-moz-progress-bar {
+  border-radius: var(--radius-s);
+  border: var(--border-s) solid transparent;
+  box-sizing: border-box;
+  background: var(--color-blue-6);
+  border-color: var(--color-blue-5);
+}
+
+.progress:indeterminate::-webkit-progress-value {
+  background: var(--color-blue-6);
+  border-color: var(--color-blue-5);
+  opacity: 0.5;
+  inline-size: 100% !important;
+  animation: indeterminate-progress 1s linear infinite alternate;
+}
+
+.progress:indeterminate::-moz-progress-bar {
+  background: var(--color-blue-6);
+  border-color: var(--color-blue-5);
+  opacity: 0.5;
+  inline-size: 100% !important;
+  animation: indeterminate-progress 1s linear infinite alternate;
+}

package/src/styles/components/quote.css

@@ -0,0 +1,31 @@
+.quote,
+.markdown-output blockquote {
+  display: block;
+  margin: 0;
+  color: var(--color-gray-4);
+  border-inline-start: var(--border-l) solid var(--color-gray-transparent);
+  padding: var(--space-3xs);
+  padding-inline-start: var(--space-xs);
+  position: relative;
+  line-height: 1.25;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-normal);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-2);
+  }
+
+  footer {
+    margin-block-start: 0.5em;
+    font-size: var(--font-size-s);
+    font-style: initial;
+    color: var(--color-body-text);
+    font-weight: var(--font-weight-semibold);
+
+    cite {
+      font-weight: var(--font-weight-normal);
+      font-style: italic;
+    }
+  }
+}

package/src/styles/components/{_skeleton.scss → skeleton.css}

@@ -31,34 +31,33 @@
   background-image: none !important;
   print-color-adjust: exact;
 
-  &:is(p, .p, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+  /*************************************************************
+   * Special styles for "skeletonizing" specific element types *
+   *************************************************************/
+
+  /* Make block text take up the full width */
+  &.paragraph,
+  &.heading {
     inline-size: 100%;
   }
 
-  &:is(
-      p,
-      .p,
-      h1,
-      .h1,
-      h2,
-      .h2,
-      h3,
-      .h3,
-      h4,
-      .h4,
-      h5,
-      .h5,
-      h6,
-      .h6,
-      .chip
-    )::before {
+  /* For empty text elements, add filler content so it isn't 0 height. */
+  &:is(.paragraph, .heading, .chip, .card-title)::before {
     content: ".";
   }
 
+  /* Add a reasonable minimum width to buttons and chips */
   &:is(.button, .chip):empty {
     min-inline-size: 5em;
   }
 
+  /* Add a reasonable width to card titles */
+  &.card-title {
+    inline-size: 40%;
+    overflow: hidden;
+  }
+
+  /* Visually hide contents, but let them take up space so elements don't collapse to 0 height. */
   &::before,
   &::after,
   > * {

package/src/styles/components/skip-link.css

@@ -0,0 +1,44 @@
+.skip-link {
+  position: fixed;
+  display: inline-block;
+  z-index: 100;
+  top: var(--space-body);
+  left: var(--space-body);
+  background-color: var(--color-brand-5);
+  padding: var(--space-xs);
+  border-radius: var(--radius-m);
+  border: 0.25em solid var(--color-brand-4);
+  color: var(--color-body-alt);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-m);
+  outline: 0;
+  box-shadow:
+    var(--shadow-l),
+    0 0 0 0.2em var(--color-brand-transparent);
+  text-decoration: none;
+  vertical-align: middle;
+  opacity: 0.25;
+  transition: opacity 300ms ease;
+  pointer-events: none;
+  line-height: 1;
+
+  kbd {
+    margin-inline-start: var(--space-2xs) !important;
+    font-weight: initial;
+    border: 0 !important;
+    background-color: var(--color-brand-4) !important;
+    color: inherit !important;
+    font-size: 1.2em !important;
+  }
+
+  &:focus,
+  &.static {
+    opacity: 1;
+  }
+
+  &.static {
+    position: static;
+    pointer-events: unset;
+  }
+}