@jrgermain/stylesheet 0.0.3

package/src/styles/components/_details.scss

@@ -0,0 +1,137 @@
+@use "./text";
+@use "../utils";
+
+details {
+  width: 100%;
+  background-color: var(--color-body-alt);
+  padding-block: 0;
+  padding-inline: var(--space-xs);
+  border-radius: var(--radius-m);
+  border: var(--border-s) solid var(--color-outline);
+  box-shadow: var(--shadow-s);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: 150ms padding ease;
+  }
+
+  summary {
+    font-family: var(--font-family-heading);
+    font-size: var(--font-size-m);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    cursor: pointer;
+    border-block-end: var(--border-s) dashed transparent;
+    padding: var(--space-xs);
+    padding-inline-start: calc(var(--space-xs) + 1em);
+    margin-block: 0;
+    margin-inline: calc(-1 * var(--space-xs));
+    transition-duration: 150ms;
+    transition-property: color, border-color;
+    transition-timing-function: ease;
+    position: relative;
+    list-style: none; // Hides ::marker pseudo element in favor of ::before (better cross browser consistency)
+    color: var(--color-body-text);
+    user-select: none;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: color, border-color, padding, margin;
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-brand-4) !important;
+    }
+
+    &:is(:active, .active) {
+      color: var(--color-brand-2) !important;
+    }
+
+    // Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency)
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    // Replacement marker element
+    &::before {
+      content: #{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="2" d="m6 9l6 6l6-6"/></svg>'
+        )};
+      display: inline-block;
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: calc(var(--space-xs) / 2);
+      margin: auto;
+      width: 1em;
+      height: 1em;
+      rotate: -90deg;
+      transition: rotate 200ms ease;
+    }
+
+    &:dir(rtl)::before {
+      rotate: 90deg;
+    }
+
+    @media (prefers-reduced-motion) {
+      transition-property: color, border-color;
+
+      &::before {
+        transition: none;
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &:is(:hover, .hover) {
+        color: var(--color-brand-2) !important;
+      }
+
+      &:is(:active, .active) {
+        color: var(--color-brand-4) !important;
+      }
+
+      &::before {
+        content: #{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="2" d="m6 9l6 6l6-6"/></svg>'
+          )};
+      }
+    }
+  }
+
+  &[open] {
+    padding-block-end: var(--space-xs);
+
+    summary {
+      color: var(--color-brand-3);
+      border-block-end-color: var(--color-outline);
+      margin-block-end: var(--space-xs);
+
+      &::before {
+        rotate: 0deg;
+      }
+    }
+  }
+}
+
+.accordion {
+  width: 100%;
+
+  > details {
+    & + details {
+      border-block-start: 0;
+    }
+
+    &:not(:first-of-type) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &:not(:last-of-type) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+}
+
+details.no-width,
+.accordion.no-width,
+.accordion.no-width > details {
+  width: initial;
+}

package/src/styles/components/_dialog.scss

@@ -0,0 +1,240 @@
+@use "./text";
+@use "../utils";
+
+dialog,
+dialog::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: 0.75;
+  --dialog-backdrop-ending-opacity: 0;
+  --dialog-backdrop-color: var(--color-gray-2);
+
+  @media (prefers-reduced-motion) {
+    --dialog-starting-transform: translate(0);
+    --dialog-ending-transform: translate(0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --dialog-backdrop-color: var(--color-gray-8);
+    --dialog-backdrop-open-opacity: 0.85;
+  }
+}
+
+dialog {
+  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);
+  }
+
+  &.drawer {
+    --dialog-starting-opacity: 0.5;
+
+    position: fixed;
+    inset: 0;
+    border-radius: 0;
+    margin: 0;
+    border: 0;
+    overflow: auto;
+
+    &.left {
+      right: auto;
+
+      @media (prefers-reduced-motion: no-preference) {
+        --dialog-starting-transform: translateX(-16px);
+        --dialog-ending-transform: translateX(-16px);
+      }
+    }
+
+    &.top {
+      bottom: auto;
+
+      @media (prefers-reduced-motion: no-preference) {
+        --dialog-starting-transform: translateY(-16px);
+        --dialog-ending-transform: translateY(-16px);
+      }
+    }
+
+    &.right {
+      left: auto;
+
+      @media (prefers-reduced-motion: no-preference) {
+        --dialog-starting-transform: translateX(16px);
+        --dialog-ending-transform: translateX(16px);
+      }
+    }
+
+    &.bottom {
+      top: auto;
+
+      @media (prefers-reduced-motion: no-preference) {
+        --dialog-starting-transform: translateY(16px);
+        --dialog-ending-transform: translateY(16px);
+      }
+    }
+
+    &.top,
+    &.bottom {
+      width: 100dvw;
+      max-width: unset;
+      height: auto;
+      max-height: 100dvh;
+      min-height: min(100dvh, 250px);
+
+      &.small {
+        max-height: min(100dvh, 300px);
+      }
+
+      &.medium {
+        max-height: min(100dvh, 450px);
+      }
+
+      &.large {
+        max-height: min(100dvh, 600px);
+      }
+    }
+
+    &.left,
+    &.right {
+      height: 100dvh;
+      max-height: unset;
+      width: auto;
+      min-width: min(100dvw, 300px);
+      max-width: 100dvw;
+
+      &.small {
+        max-width: min(100dvw, 350px);
+      }
+
+      &.medium {
+        max-width: min(100dvw, 450px);
+      }
+
+      &.large {
+        max-width: min(100dvw, 700px);
+      }
+    }
+  }
+
+  &:not(.drawer) {
+    --dialog-width: 9999px;
+
+    max-height: calc(100svh - 4 * var(--space-body));
+    max-width: min(calc(100svw - 4 * var(--space-body)), var(--dialog-width));
+
+    &.small {
+      --dialog-width: 400px;
+    }
+
+    &.medium {
+      --dialog-width: 650px;
+    }
+
+    &.large {
+      --dialog-width: 900px;
+    }
+  }
+
+  &[open] {
+    display: flex;
+  }
+}
+
+.dialog-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;
+  }
+
+  :is(button, .button).close {
+    color: inherit;
+    margin: -0.5rem;
+    margin-inline-start: var(--space-3xs);
+
+    &::after {
+      content: "";
+      width: 1.2em;
+      height: 1.2em;
+      mask-image: #{utils.svg-to-data-url(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="black" d="M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z"/></svg>'
+        )};
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      background-color: currentcolor;
+    }
+  }
+}
+
+.dialog-body {
+  padding: var(--space-m);
+  padding-block-start: var(--space-xs);
+  flex-shrink: 1;
+  display: block;
+  overflow: auto;
+  margin: 0;
+}
+
+.dialog-footer {
+  padding: var(--space-xs);
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-2xs);
+  justify-content: flex-end;
+  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;
+  }
+
+  :is(
+      button,
+      .button,
+      input[type="button"],
+      input[type="submit"],
+      input[type="reset"]
+    ):not(.small, .medium, .large) {
+    font-size: 0.9rem;
+  }
+}
+
+@supports (transition-behavior: allow-discrete) and (overlay: none) {
+  dialog {
+    animation: unset;
+  }
+}

package/src/styles/components/_field.scss

@@ -0,0 +1,301 @@
+@use "../utils";
+
+.field {
+  --field-gap: var(--space-2xs);
+  --field-padding: var(--space-2xs);
+  --field-radius: var(--radius-m);
+
+  display: inline-flex;
+  flex-direction: column;
+  line-height: 1;
+  gap: var(--field-gap);
+  color: var(--color-body-text);
+  font-weight: var(--font-weight-semibold);
+  transition-duration: 200ms;
+  transition-property: color, box-shadow;
+  transition-timing-function: ease;
+  font-size: var(--font-size-m);
+
+  &.compact,
+  :is(form, .form, fieldset).compact & {
+    --field-gap: calc(0.9 * var(--space-2xs));
+    --field-padding: calc(0.75 * var(--space-2xs));
+    --field-radius: var(--radius-s);
+
+    font-size: calc(0.9 * var(--font-size-m));
+  }
+
+  &:focus-within {
+    color: var(--color-brand-5);
+  }
+
+  &:has(:user-invalid, &[aria-invalid="true"]) {
+    color: var(--color-red-5);
+
+    .error-message {
+      opacity: 1;
+    }
+  }
+
+  &:has([readonly]):focus-within {
+    color: var(--color-gray-5);
+  }
+
+  &:user-invalid {
+    color: var(--color-red-5);
+  }
+
+  input:not(
+      [type="button"],
+      [type="checkbox"],
+      [type="file"],
+      [type="hidden"],
+      [type="image"],
+      [type="radio"],
+      [type="range"],
+      [type="reset"],
+      [type="submit"]
+    ),
+  select,
+  textarea {
+    color: var(--color-body-text);
+    background-color: white;
+    border: var(--border-s) solid var(--color-outline);
+    font-size: 0.9em;
+    padding: var(--field-padding);
+    border-radius: var(--field-radius);
+    transition-duration: 200ms;
+    transition-property: color, box-shadow, border-color;
+    transition-timing-function: ease;
+    font-family: var(--font-family-ui);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: black;
+    }
+
+    &:focus {
+      outline: 0;
+      border-color: var(--color-brand-5);
+      box-shadow:
+        0 0 0 0.1em var(--color-brand-5),
+        0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);
+    }
+
+    &:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    // Not using :read-only because it matches additional elements (e.g., every color input)
+    &[readonly] {
+      cursor: not-allowed;
+      border-style: dashed;
+
+      &:focus {
+        outline: 0;
+        border-style: solid;
+        border-color: var(--color-gray-5);
+        box-shadow:
+          0 0 0 0.1em var(--color-gray-5),
+          0 0 0 calc(0.2em + var(--border-s)) var(--color-gray-transparent);
+      }
+    }
+
+    &:user-invalid,
+    &[aria-invalid="true"] {
+      border-color: var(--color-red-5);
+      box-shadow: 0 0 0 0.1em var(--color-red-5);
+
+      &:focus {
+        outline: 0;
+        border-color: var(--color-red-5);
+        box-shadow:
+          0 0 0 0.1em var(--color-red-5),
+          0 0 0 calc(0.2em + var(--border-s)) var(--color-red-transparent);
+      }
+    }
+  }
+
+  input[type="color"] {
+    inline-size: auto;
+    block-size: auto;
+    cursor: pointer;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: 0;
+      block-size: 1em;
+      inline-size: 1.62em;
+      border-radius: var(--radius-s);
+    }
+
+    &::-moz-color-swatch {
+      border: 0;
+      block-size: 1em;
+      inline-size: 1.62em;
+      border-radius: var(--radius-s);
+    }
+  }
+
+  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-position: center right 0.25em;
+    background-size: auto 75%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    appearance: none;
+    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>'
+        )};
+    }
+
+    &:dir(rtl) {
+      background-position: center left 0.25em;
+    }
+  }
+
+  .help-text {
+    font-size: 0.9em;
+    color: var(--color-body-text-alt);
+    font-weight: var(--font-weight-normal);
+    margin: -0.25em 0 0;
+    position: relative;
+  }
+
+  .error-message {
+    transition: opacity 200ms ease;
+    opacity: 0;
+    font-size: 0.9em;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font-weight: var(--font-weight-semibold);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    &::before {
+      content: "";
+      mask-image: #{utils.svg-to-data-url(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#888888" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m37.66 130.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg>'
+        )};
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      background-color: currentcolor;
+      display: inline-block;
+      height: 1.2em;
+      width: 1.2em;
+    }
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    > * {
+      border-radius: 0 !important;
+      z-index: 1;
+    }
+
+    > :first-child {
+      border-start-start-radius: var(--field-radius) !important;
+      border-end-start-radius: var(--field-radius) !important;
+    }
+
+    > :last-child {
+      border-end-end-radius: var(--field-radius) !important;
+      border-start-end-radius: var(--field-radius) !important;
+    }
+
+    > :focus-visible {
+      z-index: 2;
+    }
+
+    > :is(.prefix, .suffix, .action) {
+      user-select: none;
+      -webkit-user-drag: none;
+      display: flex;
+      font-weight: var(--font-weight-normal);
+      color: var(--color-gray-3);
+      background-color: var(--color-gray-9);
+      border: var(--border-s) solid var(--color-outline);
+      padding: var(--space-3xs) var(--space-xs);
+      align-items: center;
+      justify-content: center;
+      font-size: 0.9em;
+
+      :is(img, svg) {
+        height: 1.15em;
+        width: auto;
+      }
+    }
+
+    > .prefix {
+      border-inline-end: 0;
+    }
+
+    > .suffix {
+      border-inline-start: 0;
+    }
+
+    > .action {
+      cursor: pointer;
+      color: var(--color-brand-3);
+      border-inline-start: 0;
+      transition-property: box-shadow, background-color;
+      transition-timing-function: ease;
+      transition-duration: 200ms;
+
+      &:hover {
+        background-color: var(--color-gray-8);
+      }
+
+      &:active {
+        background-color: var(--color-gray-7);
+      }
+
+      &:focus-visible {
+        border-color: var(--color-brand-5);
+        border-inline-start-width: var(--border-s);
+        border-inline-start-style: solid;
+        box-shadow:
+          0 0 0 0.1em var(--color-brand-5),
+          0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);
+        outline: 0;
+      }
+    }
+
+    > :is(input, select, textarea) {
+      width: 100%;
+
+      &:has(~ .action:focus-visible) {
+        border-inline-end-width: 0;
+      }
+    }
+  }
+}
+
+fieldset {
+  border: var(--border-s) solid var(--color-outline);
+  border-radius: var(--radius-l);
+
+  legend {
+    color: var(--color-body-text);
+    font-weight: var(--font-weight-semibold);
+  }
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--color-brand-5);
+}

package/src/styles/components/_hr.scss

@@ -0,0 +1,23 @@
+hr,
+.hr {
+  background-color: var(--color-outline);
+  border: 0;
+  outline: 0;
+  width: 100%;
+  height: var(--border-s);
+  display: block;
+  margin: var(--space-xs) 0;
+  print-color-adjust: exact;
+
+  &.invisible {
+    visibility: hidden;
+  }
+
+  &.vertical {
+    display: inline-block;
+    width: var(--border-s);
+    height: 100%;
+    min-height: 1em;
+    margin: 0 var(--space-xs);
+  }
+}