@jrgermain/stylesheet 0.2.1 → 0.4.0

package/src/styles/components/slider.css

@@ -0,0 +1,96 @@
+input[type="range"].slider {
+  font-size: 1rem;
+  block-size: 1.25em;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  @media (pointer: coarse) {
+    font-size: 1.5rem;
+  }
+
+  &:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 0;
+
+    &::-webkit-slider-thumb {
+      border-color: var(--color-brand-5);
+      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+    }
+
+    &::-moz-range-thumb {
+      border-color: var(--color-brand-5);
+      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+    }
+  }
+
+  &:enabled:active {
+    &::-webkit-slider-thumb {
+      border-color: var(--color-brand-5);
+
+      &:active {
+        @media screen and (resolution >= 2x) {
+          transform: scale(0.9);
+        }
+      }
+    }
+
+    &::-moz-range-thumb {
+      border-color: var(--color-brand-5);
+
+      &:active {
+        @media screen and (resolution >= 2x) {
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    block-size: 0.25em;
+    inline-size: 100%;
+    border-radius: var(--radius-full);
+    background-color: light-dark(var(--color-gray-8), var(--color-gray-6));
+    print-color-adjust: exact;
+  }
+
+  &::-moz-range-track {
+    block-size: 0.25em;
+    inline-size: 100%;
+    border-radius: var(--radius-full);
+    background-color: light-dark(var(--color-gray-8), var(--color-gray-6));
+    print-color-adjust: exact;
+  }
+
+  &::-webkit-slider-thumb {
+    height: 1.25em;
+    width: 1.25em;
+    border-radius: var(--radius-full);
+    background-color: white;
+    box-shadow: var(--shadow-s);
+    border: var(--border-s) solid var(--color-outline);
+    transition-property: border-color, box-shadow, transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+
+    /* Additional properties needed for webkit */
+    appearance: none;
+    margin-block-start: -0.5em;
+  }
+
+  &::-moz-range-thumb {
+    height: 1.25em;
+    width: 1.25em;
+    border-radius: var(--radius-full);
+    background-color: white;
+    box-shadow: var(--shadow-s);
+    border: var(--border-s) solid var(--color-outline);
+    transition-property: border-color, box-shadow, transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+  }
+}

package/src/styles/components/{_switch.scss → switch.css}

@@ -1,3 +1,22 @@
+/* Style the label of a labeled switch, which is also the container that holds the switch itself */
+label.switch {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+  gap: var(--space-3xs);
+  font-size: var(--font-size-m);
+  font-family: var(--font-family-body);
+}
+
+/* For small labeled switches, set the label text size to font-size-s */
+label.switch.small {
+  font-size: var(--font-size-s);
+}
+
+/* Style the switch itself */
 input[type="checkbox"].switch,
 label.switch input[type="checkbox"] {
   font-size: 1rem;
@@ -6,7 +25,7 @@ label.switch input[type="checkbox"] {
   block-size: 1.8em;
   inline-size: 3em;
   border-radius: var(--radius-full);
-  background-color: var(--color-gray-8);
+  background-color: light-dark(var(--color-gray-8), var(--color-gray-5));
   position: relative;
   flex: none;
   transition-property: background-color, box-shadow, border-color;
@@ -15,10 +34,6 @@ label.switch input[type="checkbox"] {
   border: 0.1em solid var(--color-gray-7);
   cursor: pointer;
 
-  &.small {
-    font-size: 0.8rem;
-  }
-
   &::after {
     content: "";
     position: absolute;
@@ -36,7 +51,7 @@ label.switch input[type="checkbox"] {
   }
 
   &:disabled {
-    opacity: 0.5;
+    opacity: var(--opacity-disabled);
     cursor: not-allowed;
   }
 
@@ -47,8 +62,8 @@ label.switch input[type="checkbox"] {
   }
 
   &:checked {
-    background-color: var(--color-brand-6);
-    border-color: var(--color-brand-5);
+    background-color: light-dark(var(--color-brand-6), var(--color-brand-5));
+    border-color: light-dark(var(--color-brand-5), var(--color-brand-6));
 
     &::after {
       transform: translateX(1.2em);
@@ -62,21 +77,10 @@ label.switch input[type="checkbox"] {
   &:dir(rtl):checked::after {
     transform: translateX(-1.2em);
   }
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-5);
-
-    &:checked {
-      background-color: var(--color-brand-5);
-    }
-  }
 }
 
-label.switch {
-  inline-size: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  font-weight: var(--font-weight-semibold);
+/* For small switches, scale the switch control to 80% of the normal size */
+input[type="checkbox"].switch.small,
+label.switch.small input[type="checkbox"] {
+  font-size: 0.8rem;
 }

package/src/styles/components/table.css

@@ -0,0 +1,86 @@
+table.table,
+.markdown-output table {
+  --table-bg-odd: var(--color-body-alt);
+  --table-bg-even: var(--color-body);
+  --table-vertical-border: var(--border-s);
+
+  background-color: var(--color-body-alt);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--font-size-m);
+  border: var(--border-s) solid var(--color-outline);
+  border-radius: var(--radius-s);
+  color: var(--color-body-text);
+  font-family: var(--font-family-body);
+  font-weight: var(--font-weight-normal);
+
+  &.subtle {
+    --table-bg-odd: transparent;
+    --table-bg-even: transparent;
+    --table-vertical-border: 0;
+
+    border: 0;
+  }
+
+  &.dense :is(th, td) {
+    padding: var(--space-3xs) var(--space-2xs);
+  }
+
+  &.sparse :is(th, td) {
+    padding: var(--space-xs) var(--space-s);
+  }
+
+  caption {
+    font-family: var(--font-family-heading);
+    line-height: 1.15;
+    font-size: var(--font-size-l);
+    font-weight: var(--font-weight-semibold);
+    text-align: start;
+    margin: 0 0 var(--space-2xs);
+  }
+
+  th,
+  td {
+    padding: var(--space-2xs) var(--space-xs);
+  }
+
+  th,
+  tfoot td {
+    font-weight: var(--font-weight-bold);
+    font-family: var(--font-family-heading);
+    text-align: center;
+  }
+
+  th {
+    border-block-end: var(--border-m) solid var(--color-outline);
+  }
+
+  tfoot td {
+    border-block-start: var(--border-m) solid var(--color-outline);
+  }
+
+  td {
+    text-align: unset;
+  }
+
+  :is(th, tfoot td):not(:last-of-type) {
+    border-inline-end: var(--table-vertical-border) dashed var(--color-outline);
+  }
+
+  td:not(tfoot td, :last-of-type) {
+    border-inline-end: var(--table-vertical-border) solid var(--color-outline);
+  }
+
+  tr:not(:last-of-type) td {
+    border-block-end: var(--border-s) solid var(--color-outline);
+  }
+
+  tbody tr:nth-child(odd),
+  tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {
+    background-color: var(--table-bg-even);
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: var(--table-bg-odd);
+  }
+}

package/src/styles/components/text.css

@@ -0,0 +1,119 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties -- text-decoration shorthand doesn't work properly for Safari */
+
+.paragraph,
+.markdown-output p {
+  font-family: var(--font-family-body);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.6;
+  margin: 0.75em 0;
+  text-wrap: pretty;
+  hanging-punctuation: first;
+  overflow-wrap: break-word;
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+.abbreviation,
+.markdown-output abbr[title] {
+  display: inline;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: var(--border-m);
+  text-decoration-color: var(--color-gray-6);
+  text-underline-offset: 0.1em;
+}
+
+.bold,
+.markdown-output strong,
+.markdown-output b {
+  font-weight: var(--font-weight-bold);
+}
+
+.italic,
+.markdown-output em {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.strikethrough,
+.markdown-output s {
+  text-decoration-line: line-through;
+}
+
+.underline.strikethrough {
+  text-decoration-line: underline line-through;
+}
+
+.small-text,
+.markdown-output small {
+  font-size: 0.75em;
+  vertical-align: baseline;
+}
+
+.subscript,
+.superscript,
+.markdown-output sub,
+.markdown-output sup {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.subscript,
+.markdown-output sub {
+  inset-block-end: -0.25em;
+}
+
+.superscript,
+.markdown-output sup {
+  inset-block-start: -0.5em;
+}
+
+.code,
+.markdown-output code {
+  font-family: var(--font-family-mono);
+  background-color: var(--color-gray-extra-transparent);
+  color: var(--color-gray-1);
+  border-radius: var(--radius-s);
+  display: inline;
+  padding: 0.25ch 0.5ch;
+  font-size: 0.9em;
+
+  &.invert {
+    color: var(--color-gray-9);
+  }
+}
+
+.link .code,
+.markdown-output a code {
+  text-decoration: inherit;
+  text-decoration-color: inherit;
+  text-decoration-thickness: inherit;
+  color: inherit;
+}
+
+.key,
+.skip-link kbd,
+.markdown-output kbd {
+  display: inline;
+  padding: 0 0.5ch;
+  margin: 0 0.25ch;
+  font-size: 0.9em;
+  border: var(--border-s) solid var(--color-gray-8);
+  border-bottom-width: 3px;
+  border-radius: var(--radius-m);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-body);
+  background-color: var(--color-gray-9);
+  color: var(--color-body-text);
+}

package/src/styles/components/visually-hidden.css

@@ -0,0 +1,13 @@
+.visually-hidden,
+.sr-only,
+.app-sidebar-toggle input,
+.skip-link:not(:focus, .static) {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}

package/src/styles/experimental/dialog-animations.css

@@ -1,14 +1,14 @@
-dialog[open] {
+dialog:is(.modal, .drawer)[open] {
   display: flex;
   transform: var(--dialog-open-transform);
   opacity: var(--dialog-open-opacity);
 }
 
-dialog[open]::backdrop {
+dialog:is(.modal, .drawer)[open]::backdrop {
   opacity: var(--dialog-backdrop-open-opacity);
 }
 
-dialog {
+dialog:is(.modal, .drawer) {
   transform: var(--dialog-ending-transform);
   opacity: var(--dialog-ending-opacity);
   transition:
@@ -18,7 +18,7 @@ dialog {
     overlay 150ms ease allow-discrete;
 }
 
-dialog::backdrop {
+dialog:is(.modal, .drawer)::backdrop {
   opacity: var(--dialog-backdrop-ending-opacity);
   transition:
     transform 150ms ease,
@@ -28,12 +28,12 @@ dialog::backdrop {
 }
 
 @starting-style {
-  dialog[open] {
+  dialog:is(.modal, .drawer)[open] {
     transform: var(--dialog-starting-transform);
     opacity: var(--dialog-starting-opacity);
   }
 
-  dialog[open]::backdrop {
+  dialog:is(.modal, .drawer)[open]::backdrop {
     opacity: var(--dialog-backdrop-starting-opacity);
   }
 }

package/src/styles/index.css

@@ -0,0 +1,32 @@
+@import url("./utils/reset.css");
+@import url("./utils/variables.css");
+@import url("./shared/base-alert.css");
+@import url("./shared/base-dialog.css");
+@import url("./shared/dismiss-button.css");
+@import url("./components/accordion.css");
+@import url("./components/alert.css");
+@import url("./components/app.css");
+@import url("./components/banner.css");
+@import url("./components/button.css");
+@import url("./components/card.css");
+@import url("./components/chip.css");
+@import url("./components/divider.css");
+@import url("./components/drawer.css");
+@import url("./components/field.css");
+@import url("./components/flex.css");
+@import url("./components/heading.css");
+@import url("./components/highlight.css");
+@import url("./components/link.css");
+@import url("./components/meter.css");
+@import url("./components/modal.css");
+@import url("./components/progress.css");
+@import url("./components/quote.css");
+@import url("./components/skeleton.css");
+@import url("./components/skip-link.css");
+@import url("./components/slider.css");
+@import url("./components/switch.css");
+@import url("./components/table.css");
+@import url("./components/text.css");
+@import url("./components/visually-hidden.css");
+@import url("./experimental/dialog-animations.css");
+@import url("./experimental/mobile-sidebar-fade-out.css");

package/src/styles/shared/base-alert.css

@@ -0,0 +1,108 @@
+.alert,
+.banner {
+  display: block;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-body-text);
+  position: relative;
+  background:
+    linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,
+    linear-gradient(
+        to right,
+        var(--alert-border-start-color),
+        var(--alert-border-end-color)
+      )
+      border-box;
+  border: var(--border-m) solid transparent;
+  line-height: 1.4;
+
+  > * {
+    line-height: 1.4;
+  }
+
+  @media print {
+    & {
+      border-color: var(--alert-border-start-color);
+    }
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    print-color-adjust: exact;
+    position: absolute;
+    inset-block: 0;
+    margin-block: auto;
+    width: 2em;
+    height: 2em;
+  }
+
+  &::before {
+    z-index: 2;
+    mask-image: var(--alert-icon);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    background-color: var(--alert-border-start-color);
+    scale: 0.5;
+  }
+
+  &::after {
+    z-index: 1;
+    background-color: light-dark(#fffe, #000e);
+    border-radius: var(--radius-full);
+    border: 3px solid var(--alert-border-start-color);
+    scale: 0.75;
+  }
+
+  &.error {
+    --alert-bg-color: var(--color-red-9);
+    --alert-border-start-color: var(--color-red-5);
+    --alert-border-end-color: var(--color-red-6);
+    --alert-dismiss-icon-color: var(--color-red-4);
+    --alert-dismiss-hover-bg: var(--color-red-extra-transparent);
+    --alert-dismiss-focus-bg: var(--color-red-transparent);
+    --alert-icon: url("@/src/svg/x-thick.svg");
+  }
+
+  &.warning {
+    --alert-bg-color: var(--color-yellow-9);
+    --alert-border-start-color: var(--color-yellow-5);
+    --alert-border-end-color: var(--color-yellow-6);
+    --alert-dismiss-icon-color: var(--color-yellow-4);
+    --alert-dismiss-hover-bg: var(--color-yellow-extra-transparent);
+    --alert-dismiss-focus-bg: var(--color-yellow-transparent);
+    --alert-icon: url("@/src/svg/warning-thick.svg");
+  }
+
+  &.success {
+    --alert-bg-color: var(--color-green-9);
+    --alert-border-start-color: var(--color-green-5);
+    --alert-border-end-color: var(--color-green-6);
+    --alert-dismiss-icon-color: var(--color-green-4);
+    --alert-dismiss-hover-bg: var(--color-green-extra-transparent);
+    --alert-dismiss-focus-bg: var(--color-green-transparent);
+    --alert-icon: url("@/src/svg/check-thick.svg");
+  }
+
+  &.info {
+    --alert-bg-color: var(--color-sky-9);
+    --alert-border-start-color: var(--color-sky-5);
+    --alert-border-end-color: var(--color-sky-6);
+    --alert-dismiss-icon-color: var(--color-sky-4);
+    --alert-dismiss-hover-bg: var(--color-sky-extra-transparent);
+    --alert-dismiss-focus-bg: var(--color-sky-transparent);
+    --alert-icon: url("@/src/svg/info-thick.svg");
+  }
+}
+
+.alert-title,
+.banner-title {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  color: var(--alert-border-start-color);
+  font-size: 0.85em;
+  margin: 0;
+  margin-block-end: 0.15em;
+}

package/src/styles/shared/base-dialog.css

@@ -0,0 +1,85 @@
+.modal,
+.drawer,
+.modal::backdrop,
+.drawer::backdrop {
+  --dialog-starting-opacity: 0.25;
+  --dialog-starting-transform: translateY(8px);
+  --dialog-open-opacity: 1;
+  --dialog-open-transform: translate(0);
+  --dialog-ending-opacity: 0;
+  --dialog-ending-transform: translateY(-4px) scale(0.97);
+  --dialog-backdrop-starting-opacity: 0;
+  --dialog-backdrop-open-opacity: light-dark(0.75, 0.85);
+  --dialog-backdrop-ending-opacity: 0;
+  --dialog-backdrop-color: light-dark(var(--color-gray-2), var(--color-gray-8));
+
+  @media (prefers-reduced-motion) {
+    --dialog-starting-transform: translate(0);
+    --dialog-ending-transform: translate(0);
+  }
+}
+
+.modal,
+.drawer {
+  box-shadow: var(--shadow-xl);
+  border: var(--border-s) solid var(--color-outline);
+  border-radius: var(--radius-l);
+  background-color: var(--color-body-alt);
+  color: var(--color-body-text);
+  padding: 0;
+  flex-direction: column;
+  gap: 0;
+
+  &::backdrop {
+    background-color: var(--dialog-backdrop-color);
+  }
+
+  &[open] {
+    display: flex;
+  }
+}
+
+.modal-header,
+.drawer-header {
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  padding: var(--space-m);
+  padding-block-end: var(--space-xs);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--color-brand-3);
+  margin: 0;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+  }
+}
+
+.modal-body,
+.drawer-body {
+  padding: var(--space-m);
+  padding-block-start: var(--space-xs);
+  flex-shrink: 1;
+  display: block;
+  overflow: auto;
+  margin: 0;
+}
+
+@supports (transition-behavior: allow-discrete) and (overlay: none) {
+  .modal,
+  .drawer {
+    animation: unset;
+  }
+}

package/src/styles/shared/dismiss-button.css

@@ -0,0 +1,27 @@
+.button.dismiss {
+  --button-fg-color: var(--color-body-text);
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-hover-bg-color: var(--color-gray-extra-transparent);
+  --button-focus-ring-color: transparent;
+  --button-shadow: none;
+
+  font-size: 0.75rem;
+  width: 3em;
+  height: 3em;
+
+  &:is(:focus-visible, .focus) {
+    --button-bg-color: var(--color-gray-transparent);
+    --button-hover-bg-color: transparent;
+  }
+
+  &::after {
+    content: "";
+    width: 1.8em;
+    height: 1.8em;
+    mask-image: url("@/src/svg/x.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    background-color: currentcolor;
+  }
+}