@jrgermain/stylesheet 0.0.3

package/src/styles/components/_app.scss

@@ -0,0 +1,268 @@
+@use "../utils";
+@use "./layout";
+
+.app {
+  min-width: 100svw;
+  min-height: 100svh;
+
+  > header {
+    height: var(--header-height);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--color-brand-3);
+    background-color: var(--color-body-alt);
+    border-bottom: var(--border-l) solid var(--color-brand-transparent);
+    box-shadow: var(--shadow-s);
+    padding-inline: max(var(--space-2xs), calc(50dvw - 55rem));
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-brand-2);
+    }
+
+    > :is(.header-item, .toggle-sidebar) {
+      height: 100%;
+      padding: 0.5rem;
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+      transition-property: color;
+      transition-duration: 200ms;
+      transition-timing-function: ease;
+      display: flex;
+      align-items: center;
+      position: relative;
+      border-radius: var(--radius-s);
+      font-weight: var(--font-weight-semibold);
+
+      &:focus-visible {
+        outline-offset: calc(-1 * var(--border-m));
+      }
+
+      &:hover {
+        color: var(--color-body-text);
+      }
+
+      &:is([aria-current], .current) {
+        font-weight: var(--font-weight-bold);
+
+        &::after {
+          opacity: 1;
+        }
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: var(--border-l);
+        bottom: calc(-1 * var(--border-l));
+        left: 0;
+        background-color: currentcolor;
+        opacity: 0;
+        border-radius: 1px;
+      }
+    }
+
+    .toggle-sidebar {
+      @include utils.transition(("color", "background-color"));
+
+      display: none;
+      width: 2.75rem;
+      margin-inline-start: 1rem;
+
+      &:hover {
+        color: var(--color-body-text);
+      }
+
+      &:has(input:focus-visible) {
+        outline: var(--border-m) solid var(--color-brand-5);
+        outline-offset: calc(-1 * var(--border-m));
+      }
+
+      input[type="checkbox"] {
+        @extend %visually-hidden;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -0.5rem;
+        height: 100%;
+        width: var(--border-s);
+        background-color: var(--color-outline);
+      }
+
+      > div {
+        @include utils.transition(("transform", "opacity"));
+
+        position: absolute;
+        width: 1.75rem;
+        height: 2px;
+        border-radius: 2px;
+        background-color: currentcolor;
+        opacity: 1;
+        top: 50%;
+        left: 50%;
+
+        &:nth-of-type(1) {
+          transform: translateY(calc(-50% - 0.45rem)) translateX(-50%);
+        }
+
+        &:nth-of-type(2) {
+          transform: translateY(-50%) translateX(-50%);
+        }
+
+        &:nth-of-type(3) {
+          transform: translateY(calc(-50% + 0.45rem)) translateX(-50%);
+        }
+      }
+
+      &:has(input:checked) > div {
+        &:nth-of-type(1) {
+          transform: translateY(-50%) translateX(-50%) rotate(45deg);
+        }
+
+        &:nth-of-type(2) {
+          opacity: 0;
+          transform: translateY(-50%) translateX(-50%) rotate3d(0, 1, 0, 90deg);
+        }
+
+        &:nth-of-type(3) {
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+        }
+      }
+    }
+  }
+
+  > .sidebar {
+    overflow: auto;
+    transition:
+      opacity 150ms ease,
+      display 150ms allow-discrete;
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-body);
+    width: var(--sidebar-width);
+    gap: var(--space-3xs);
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    height: calc(100dvh - var(--header-height));
+    z-index: 3;
+    opacity: 1;
+
+    &::after {
+      content: "";
+      height: calc(100dvh - var(--header-height) - 2 * var(--space-s));
+      width: var(--border-s);
+      background-color: var(--color-outline);
+      position: fixed;
+      top: calc(var(--header-height) + var(--space-s));
+      left: calc(var(--sidebar-width) - var(--border-s));
+    }
+
+    .sidebar-heading {
+      font-size: 1.2rem;
+      margin: var(--space-s) 0 var(--space-3xs);
+      font-weight: var(--font-weight-semibold);
+
+      &:first-of-type {
+        margin-block-start: 0;
+      }
+    }
+
+    .sidebar-item {
+      padding: var(--space-2xs) var(--space-xs);
+      margin: 0 calc(-1 * var(--space-xs));
+      border-radius: var(--radius-l);
+      color: var(--color-body-text-alt);
+      text-decoration: none;
+      font-weight: var(--font-weight-normal);
+      font-size: 1rem;
+      transition-property: color, background-color, box-shadow;
+      transition-duration: 200ms;
+      transition-timing-function: ease;
+
+      &:hover {
+        background-color: var(--color-brand-extra-transparent);
+      }
+
+      &:active {
+        color: var(--color-brand-1);
+      }
+
+      &:is(.current, [aria-current="page"]) {
+        color: var(--color-brand-4);
+        font-weight: var(--font-weight-bold);
+      }
+
+      &:hover:active {
+        background-color: var(--color-brand-transparent);
+      }
+
+      &:focus-visible {
+        outline-offset: 0;
+      }
+    }
+  }
+
+  > .content {
+    padding: var(--space-body);
+    padding-inline: max(var(--space-body), calc(50dvw - 55rem));
+    width: 100%;
+  }
+
+  &:has(> .sidebar) {
+    height: 100dvh;
+    width: 100dvw;
+
+    > header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-inline: var(--space-2xs);
+    }
+
+    > .content {
+      overflow: auto;
+      position: fixed;
+      top: var(--header-height);
+      left: var(--sidebar-width);
+      width: calc(100dvw - var(--sidebar-width));
+      height: calc(100dvh - var(--header-height));
+    }
+  }
+
+  @media (width < 55rem) {
+    > header .toggle-sidebar {
+      display: initial;
+    }
+
+    > .sidebar {
+      width: 100dvw;
+      opacity: 1;
+      background-color: #fffc;
+      backdrop-filter: blur(24px) saturate(120%);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #000c;
+      }
+
+      &::after {
+        content: initial;
+      }
+    }
+
+    > header:has(.toggle-sidebar input:not(:checked)) ~ .sidebar {
+      opacity: 0;
+      display: none;
+    }
+
+    > .content {
+      left: 0 !important;
+      width: 100dvw !important;
+    }
+  }
+}

package/src/styles/components/_button.scss

@@ -0,0 +1,220 @@
+:is(
+    button,
+    .button,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):not(.chip, .card, .chip .delete, .input-group .action) {
+  --button-shadow: var(--shadow-s);
+  --button-hover-bg-color: var(--button-border-color);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  outline: 0;
+  padding-inline: 1.25em;
+  padding-block: 0.75em;
+  gap: 0.5em;
+  border-style: solid;
+  transform: scale(1);
+  transition-property: box-shadow, background-color, transform, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+  text-decoration: none;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: pointer;
+  border-width: var(--border-s);
+  border-radius: var(--radius-m);
+  min-height: 2.6em;
+  min-width: 3em;
+  line-height: 1;
+  font-family: var(--font-family-ui);
+  box-shadow: var(--button-shadow);
+  user-select: none;
+  font-size: 1rem;
+
+  &::before {
+    content: "";
+    background-color: var(--button-hover-bg-color);
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    transition-property: opacity, width, height, border-radius;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+    z-index: -1;
+    border-radius: 2em;
+    width: 4em;
+    height: 4em;
+    opacity: 0;
+  }
+
+  &:is(:focus-visible, .focus) {
+    box-shadow:
+      var(--button-shadow),
+      0 0 0 0.1em var(--button-border-color),
+      0 0 0 calc(0.2em + var(--border-s)) var(--button-focus-ring-color);
+  }
+
+  &:is(:active, .active) {
+    transform: scale(0.98);
+
+    // On low-resolution screens, the scale effect makes text jump
+    // around awkwardly, so we use an alternative.
+    @media screen and (resolution < 2x) {
+      transform: translateY(1px);
+    }
+  }
+
+  &:is(:hover, .hover) {
+    text-decoration: none;
+
+    &::before {
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+      border-radius: 5px;
+    }
+
+    // inputs don't support children, so the ::before pseudo element won't work
+    &:is(input) {
+      background-color: var(--button-hover-bg-color);
+    }
+  }
+
+  color: var(--button-fg-color);
+  background-color: var(--button-bg-color);
+  border-color: var(--button-border-color);
+  font-weight: var(--button-font-weight);
+
+  &.primary {
+    --button-fg-color: white;
+    --button-bg-color: var(--color-brand-5);
+    --button-border-color: var(--color-brand-4);
+    --button-font-weight: var(--font-weight-bold);
+    --button-focus-ring-color: var(--color-brand-transparent);
+
+    @each $color
+      in (
+        "red",
+        "orange",
+        "yellow",
+        "green",
+        "sky",
+        "blue",
+        "purple",
+        "magenta",
+        "gray"
+      )
+    {
+      &.#{$color} {
+        --button-bg-color: var(--color-#{$color}-5);
+        --button-border-color: var(--color-#{$color}-4);
+        --button-focus-ring-color: var(--color-#{$color}-transparent);
+      }
+    }
+  }
+
+  // .secondary, default
+  &:not(.primary, .subtle, .close) {
+    --button-fg-color: var(--color-body-text);
+    --button-bg-color: var(--color-gray-9);
+    --button-border-color: var(--color-gray-8);
+    --button-font-weight: var(--font-weight-normal);
+    --button-focus-ring-color: var(--color-gray-extra-transparent);
+  }
+
+  &:is(.subtle, .close) {
+    --button-fg-color: var(--color-brand-4);
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-hover-bg-color: var(--color-brand-extra-transparent);
+    --button-font-weight: var(--font-weight-bold);
+    --button-focus-ring-color: transparent;
+    --button-shadow: none;
+
+    &:is(:focus-visible, .focus) {
+      --button-bg-color: var(--color-brand-transparent);
+      --button-hover-bg-color: transparent;
+    }
+  }
+
+  &:is(.small, .close) {
+    font-size: 0.8rem;
+  }
+
+  &.large {
+    font-size: 1.2rem;
+  }
+
+  &:is(.icon, .close) {
+    border-radius: var(--radius-full);
+    padding-inline: 0.5em;
+    padding-block: 0.5em;
+    min-width: 0;
+    min-height: 0;
+    aspect-ratio: 1;
+
+    &:is(.subtle, .close) {
+      &::before {
+        width: 75%;
+        height: 75%;
+      }
+
+      &:is(:hover, .hover)::before {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+      }
+    }
+
+    &:not(.subtle, .close) {
+      &::before {
+        content: unset;
+      }
+
+      &:is(:hover, .hover) {
+        background-color: var(--button-hover-bg-color);
+      }
+    }
+  }
+
+  &:is(:disabled, .disabled, [aria-disabled="true"]) {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: scale(1);
+
+    &:is(:hover, .hover)::before {
+      opacity: 0;
+    }
+  }
+
+  &.loading {
+    cursor: wait;
+
+    &::before {
+      opacity: 1 !important;
+      height: 100% !important;
+      border-radius: inherit !important;
+      animation: button-loading-bg 1200ms ease-in-out infinite forwards;
+    }
+  }
+}
+
+@keyframes button-loading-bg {
+  0% {
+    width: 0;
+    margin: 0 auto 0 0;
+  }
+
+  50% {
+    width: 100%;
+  }
+
+  100% {
+    width: 0;
+    margin: 0 0 0 auto;
+  }
+}

package/src/styles/components/_card.scss

@@ -0,0 +1,37 @@
+.card {
+  background-color: var(--color-body-alt);
+  border-radius: var(--radius-l);
+  border: var(--border-s) solid var(--color-outline);
+  box-shadow: var(--shadow-m);
+
+  &.secondary {
+    background-color: var(--color-body);
+    border-radius: var(--radius-m);
+    color: var(--color-body-text-alt);
+    box-shadow: var(--shadow-s);
+
+    .card-title {
+      font-size: var(--font-size-m);
+      margin-block-end: var(--space-2xs);
+    }
+
+    &:not(.no-padding) {
+      padding: var(--space-s);
+    }
+  }
+
+  &:not(.no-padding) {
+    padding: var(--space-m);
+
+    .card-title {
+      margin-block-start: 0;
+    }
+  }
+}
+
+.card-title {
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-brand-3);
+  margin-block-end: var(--space-xs);
+}

package/src/styles/components/_chip.scss

@@ -0,0 +1,165 @@
+@use "../utils";
+
+$color-variants: (
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "sky",
+  "blue",
+  "purple",
+  "magenta",
+  "brand",
+  "gray"
+);
+
+.chip {
+  --chip-fg-color: white;
+
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-s);
+  padding-block: var(--space-3xs);
+  padding-inline: var(--space-xs);
+  background-color: var(--chip-bg-color);
+  border: var(--border-s) solid var(--chip-border-color);
+  color: var(--chip-fg-color);
+  flex-shrink: 0;
+  cursor: default;
+  transition-property: box-shadow, background-color, border-color;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+  text-decoration: none;
+  appearance: none;
+  line-height: 1.2;
+
+  &:is(:focus-visible, .focus) {
+    box-shadow: 0 0 0 0.2em var(--chip-focus-ring-color);
+  }
+
+  &.clickable {
+    cursor: pointer;
+    box-shadow: var(--shadow-s);
+
+    &:is(:focus-visible, .focus) {
+      outline: 0;
+      box-shadow:
+        var(--shadow-s),
+        0 0 0 0.2em var(--chip-focus-ring-color);
+    }
+
+    &:is(:hover, .hover) {
+      background-color: var(--chip-border-color);
+    }
+
+    &:is(:active, .active) {
+      background-color: var(--chip-bg-color-active);
+      border-color: var(--chip-bg-color-active);
+    }
+  }
+
+  @each $color in $color-variants {
+    &.#{$color} {
+      --chip-bg-color: var(--color-#{$color}-6);
+      --chip-border-color: var(--color-#{$color}-7);
+      --chip-focus-ring-color: var(--color-#{$color}-transparent);
+      --chip-bg-color-active: var(--color-#{$color}-5);
+    }
+  }
+
+  &.black {
+    --chip-bg-color: black;
+    --chip-border-color: var(--color-gray-4);
+    --chip-focus-ring-color: var(--color-gray-transparent);
+    --chip-bg-color-active: var(--color-gray-1);
+  }
+
+  &.white {
+    --chip-fg-color: black;
+    --chip-bg-color: white;
+    --chip-border-color: var(--color-gray-8);
+    --chip-focus-ring-color: var(--color-gray-transparent);
+    --chip-bg-color-active: var(--color-gray-7);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @each $color in $color-variants {
+      &.#{$color} {
+        --chip-border-color: var(--color-#{$color}-5);
+        --chip-bg-color-active: var(--color-#{$color}-7);
+      }
+    }
+
+    &.black {
+      --chip-border-color: var(--color-gray-7);
+      --chip-bg-color-active: var(--color-gray-8);
+    }
+
+    &.white {
+      --chip-border-color: var(--color-gray-2);
+      --chip-bg-color-active: var(--color-gray-3);
+    }
+  }
+
+  :is(button, .button).delete {
+    outline: 0;
+    margin-inline: var(--space-3xs) calc(-1 * var(--space-2xs));
+    font-size: 0.6em;
+    border: var(--border-s) solid var(--chip-border-color);
+    border-radius: var(--radius-full);
+    transition-property: box-shadow, background-color, transform, opacity,
+      border-color;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    height: 2em;
+    width: 2em;
+    user-select: none;
+    background-color: transparent;
+    padding: 0;
+    display: inline-flex;
+
+    &::before {
+      content: "";
+      width: 100%;
+      height: 100%;
+      opacity: 0.7;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      background-color: var(--chip-border-color);
+      transition-duration: 200ms;
+      transition-timing-function: ease;
+      transition-property: background-color, opacity;
+    }
+
+    &::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: var(--chip-fg-color);
+    }
+
+    &:is(:focus-visible, .focus) {
+      border-color: var(--chip-fg-color);
+    }
+
+    &:is(:hover, .hover, :focus-visible, .focus)::before {
+      opacity: 1;
+    }
+
+    &:is(:active, .active)::before {
+      opacity: 0.5;
+    }
+  }
+}