@jrgermain/stylesheet 0.7.1 → 0.9.0

package/src/styles/components/button.css

@@ -1,357 +0,0 @@
-.button {
-  --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);
-  --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: var(--duration-medium);
-  transition-timing-function: var(--ease-default);
-  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-body);
-  box-shadow: var(--button-shadow);
-  user-select: none;
-  font-size: 1rem;
-  color: var(--button-fg-color);
-  background-color: var(--button-bg-color);
-  border-color: var(--button-border-color);
-  font-weight: var(--button-font-weight);
-
-  &::before {
-    content: "";
-    background-color: var(--button-hover-bg-color);
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    transition-property: opacity, width, height, border-radius;
-    transition-duration: var(--duration-medium);
-    transition-timing-function: var(--ease-default);
-    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);
-    }
-  }
-
-  &.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);
-
-    &.red {
-      --button-bg-color: var(--color-red-5);
-      --button-border-color: var(--color-red-4);
-      --button-focus-ring-color: var(--color-red-transparent);
-    }
-
-    &.orange {
-      --button-bg-color: var(--color-orange-5);
-      --button-border-color: var(--color-orange-4);
-      --button-focus-ring-color: var(--color-orange-transparent);
-    }
-
-    &.yellow {
-      --button-bg-color: var(--color-yellow-5);
-      --button-border-color: var(--color-yellow-4);
-      --button-focus-ring-color: var(--color-yellow-transparent);
-    }
-
-    &.green {
-      --button-bg-color: var(--color-green-5);
-      --button-border-color: var(--color-green-4);
-      --button-focus-ring-color: var(--color-green-transparent);
-    }
-
-    &.sky {
-      --button-bg-color: var(--color-sky-5);
-      --button-border-color: var(--color-sky-4);
-      --button-focus-ring-color: var(--color-sky-transparent);
-    }
-
-    &.blue {
-      --button-bg-color: var(--color-blue-5);
-      --button-border-color: var(--color-blue-4);
-      --button-focus-ring-color: var(--color-blue-transparent);
-    }
-
-    &.purple {
-      --button-bg-color: var(--color-purple-5);
-      --button-border-color: var(--color-purple-4);
-      --button-focus-ring-color: var(--color-purple-transparent);
-    }
-
-    &.magenta {
-      --button-bg-color: var(--color-magenta-5);
-      --button-border-color: var(--color-magenta-4);
-      --button-focus-ring-color: var(--color-magenta-transparent);
-    }
-
-    &.gray {
-      --button-bg-color: var(--color-gray-5);
-      --button-border-color: var(--color-gray-4);
-      --button-focus-ring-color: var(--color-gray-transparent);
-    }
-
-    &.black {
-      --button-bg-color: black;
-      --button-border-color: #3d3d3d;
-      --button-focus-ring-color: var(--color-gray-transparent);
-    }
-
-    &.white {
-      --button-fg-color: black;
-      --button-bg-color: white;
-      --button-border-color: #d0d0d0;
-      --button-focus-ring-color: var(--color-gray-transparent);
-    }
-  }
-
-  &.subtle {
-    --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;
-    }
-
-    &.red {
-      --button-fg-color: var(--color-red-4);
-      --button-hover-bg-color: var(--color-red-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-red-transparent);
-      }
-    }
-
-    &.orange {
-      --button-fg-color: var(--color-orange-4);
-      --button-hover-bg-color: var(--color-orange-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-orange-transparent);
-      }
-    }
-
-    &.yellow {
-      --button-fg-color: var(--color-yellow-4);
-      --button-hover-bg-color: var(--color-yellow-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-yellow-transparent);
-      }
-    }
-
-    &.green {
-      --button-fg-color: var(--color-green-4);
-      --button-hover-bg-color: var(--color-green-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-green-transparent);
-      }
-    }
-
-    &.sky {
-      --button-fg-color: var(--color-sky-4);
-      --button-hover-bg-color: var(--color-sky-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-sky-transparent);
-      }
-    }
-
-    &.blue {
-      --button-fg-color: var(--color-blue-4);
-      --button-hover-bg-color: var(--color-blue-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-blue-transparent);
-      }
-    }
-
-    &.purple {
-      --button-fg-color: var(--color-purple-4);
-      --button-hover-bg-color: var(--color-purple-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-purple-transparent);
-      }
-    }
-
-    &.magenta {
-      --button-fg-color: var(--color-magenta-4);
-      --button-hover-bg-color: var(--color-magenta-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-magenta-transparent);
-      }
-    }
-
-    &.gray,
-    &.black,
-    &.white {
-      --button-hover-bg-color: var(--color-gray-extra-transparent);
-
-      &:is(:focus-visible, .focus) {
-        --button-bg-color: var(--color-gray-transparent);
-      }
-    }
-
-    &.gray {
-      --button-fg-color: var(--color-gray-4);
-    }
-
-    &.black {
-      --button-fg-color: black;
-    }
-
-    &.white {
-      --button-fg-color: white;
-    }
-  }
-
-  &.small {
-    font-size: 0.8rem;
-  }
-
-  &.large {
-    font-size: 1.2rem;
-  }
-
-  &.icon {
-    border-radius: var(--radius-full);
-    min-width: 0;
-    min-height: 0;
-    aspect-ratio: 1;
-    padding: 0.5em;
-
-    /* Subtle icon buttons use normal pseudo element hover effect */
-    &.subtle {
-      &::before {
-        width: 75%;
-        height: 75%;
-      }
-
-      &:is(:hover, .hover)::before {
-        width: 100%;
-        height: 100%;
-        border-radius: 100%;
-      }
-    }
-
-    /* Normal icon buttons just change background color */
-    &:not(.subtle) {
-      &::before {
-        content: unset;
-      }
-
-      &:is(:hover, .hover) {
-        background-color: var(--button-hover-bg-color);
-      }
-    }
-  }
-
-  &:is(:disabled, .disabled, [aria-disabled="true"]) {
-    opacity: var(--opacity-disabled);
-    cursor: not-allowed;
-    transform: scale(1);
-
-    &:is(:hover, .hover)::before {
-      opacity: 0;
-    }
-  }
-
-  &.loading {
-    cursor: progress;
-
-    &::before {
-      opacity: 1 !important;
-      height: 100% !important;
-      border-radius: inherit !important;
-      animation: button-loading-bg 1200ms ease-in-out infinite forwards;
-    }
-
-    &:is(:disabled, .disabled, [aria-disabled="true"]) {
-      cursor: wait;
-    }
-  }
-}
-
-@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.css

@@ -1,43 +0,0 @@
-.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);
-  padding: var(--space-m);
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight-normal);
-
-  &.secondary {
-    background-color: var(--color-body);
-    border-radius: var(--radius-m);
-    box-shadow: var(--shadow-s);
-    padding: var(--space-s);
-  }
-}
-
-/* 
- * The Link component also defines .card-title[href]. We specifically add that
- * selector here so the styles in this file override the former.
- */
-.card-title,
-.card-title[href] {
-  font-family: var(--font-family-heading);
-  line-height: 1.15;
-  text-wrap: balance;
-  overflow-wrap: break-word;
-  font-size: var(--font-size-l);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-brand-3);
-  margin-block: 0 var(--space-xs);
-  display: block;
-}
-
-.card-title[href] {
-  text-decoration-color: var(--color-brand-transparent);
-}
-
-.card.secondary .card-title {
-  font-size: var(--font-size-m);
-  margin-block-end: var(--space-2xs);
-}

package/src/styles/components/chip.css

@@ -1,168 +0,0 @@
-.chip {
-  --chip-fg-color: white;
-  --chip-bg-color: var(--color-brand-6);
-  --chip-border-color: var(--color-brand-5);
-  --chip-focus-color: var(--color-brand-transparent);
-
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-s);
-  font-family: var(--font-family-body);
-  font-weight: var(--font-weight-normal);
-  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, transform;
-  transition-duration: var(--duration-medium);
-  transition-timing-function: var(--ease-default);
-  text-decoration: none;
-  appearance: none;
-  line-height: 1.2;
-
-  &.clickable {
-    cursor: pointer;
-    box-shadow: var(--shadow-s);
-    transform: scale(1);
-
-    &:is(:focus-visible, .focus) {
-      outline: 0;
-      box-shadow:
-        var(--shadow-s),
-        0 0 0 0.1em var(--chip-border-color),
-        0 0 0 calc(0.2em + var(--border-s)) var(--chip-focus-color);
-    }
-
-    &:is(:hover, .hover) {
-      background-color: var(--chip-border-color);
-    }
-
-    &:is(:active, .active) {
-      transform: scale(0.96);
-
-      /*
-       * 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);
-      }
-    }
-  }
-
-  &.red {
-    --chip-bg-color: var(--color-red-6);
-    --chip-border-color: var(--color-red-5);
-    --chip-focus-color: var(--color-red-transparent);
-  }
-
-  &.orange {
-    --chip-bg-color: var(--color-orange-6);
-    --chip-border-color: var(--color-orange-5);
-    --chip-focus-color: var(--color-orange-transparent);
-  }
-
-  &.yellow {
-    --chip-bg-color: var(--color-yellow-6);
-    --chip-border-color: var(--color-yellow-5);
-    --chip-focus-color: var(--color-yellow-transparent);
-  }
-
-  &.green {
-    --chip-bg-color: var(--color-green-6);
-    --chip-border-color: var(--color-green-5);
-    --chip-focus-color: var(--color-green-transparent);
-  }
-
-  &.sky {
-    --chip-bg-color: var(--color-sky-6);
-    --chip-border-color: var(--color-sky-5);
-    --chip-focus-color: var(--color-sky-transparent);
-  }
-
-  &.blue {
-    --chip-bg-color: var(--color-blue-6);
-    --chip-border-color: var(--color-blue-5);
-    --chip-focus-color: var(--color-blue-transparent);
-  }
-
-  &.purple {
-    --chip-bg-color: var(--color-purple-6);
-    --chip-border-color: var(--color-purple-5);
-    --chip-focus-color: var(--color-purple-transparent);
-  }
-
-  &.magenta {
-    --chip-bg-color: var(--color-magenta-6);
-    --chip-border-color: var(--color-magenta-5);
-    --chip-focus-color: var(--color-magenta-transparent);
-  }
-
-  &.gray {
-    --chip-bg-color: var(--color-gray-6);
-    --chip-border-color: var(--color-gray-5);
-    --chip-focus-color: var(--color-gray-transparent);
-  }
-
-  &.black {
-    --chip-bg-color: black;
-    --chip-border-color: #3d3d3d;
-    --chip-focus-color: var(--color-gray-transparent);
-  }
-
-  &.white {
-    --chip-fg-color: black;
-    --chip-bg-color: white;
-    --chip-border-color: #d0d0d0;
-    --chip-focus-color: var(--color-gray-transparent);
-  }
-}
-
-.chip-delete {
-  outline: 1px solid transparent;
-  margin-inline: var(--space-3xs) calc(-1 * var(--space-2xs));
-  font-size: 0.6em;
-  border: 0;
-  border-radius: var(--radius-full);
-  transition-property: background-color, outline-color, filter;
-  transition-duration: var(--duration-short);
-  transition-timing-function: var(--ease-default);
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  height: 2em;
-  width: 2em;
-  user-select: none;
-  background-color: var(--chip-border-color);
-  padding: 0;
-  display: inline-flex;
-  box-shadow: none;
-
-  &::after {
-    content: "";
-    width: 1.7em;
-    height: 1.7em;
-    mask-image: url("@/src/svg/x.svg");
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    background-color: var(--chip-fg-color);
-    margin: auto;
-  }
-
-  &:is(:focus-visible, .focus) {
-    outline-color: var(--chip-fg-color);
-  }
-
-  &:is(:hover, .hover) {
-    background-color: hsl(from var(--chip-border-color) h s calc(l + 5));
-  }
-
-  &:is(:active, .active) {
-    background-color: hsl(from var(--chip-border-color) h s calc(l - 20));
-  }
-}

package/src/styles/components/divider.css

@@ -1,47 +0,0 @@
-.divider,
-.markdown-output :is(hr, br) {
-  --divider-thickness: var(--border-s);
-
-  display: block;
-  border-style: solid;
-  border-color: var(--color-outline);
-  border-width: 0;
-  border-top-width: var(--divider-thickness);
-  margin: var(--space-xs) 0;
-  outline: 0;
-  width: 100%;
-  height: 0;
-  print-color-adjust: exact;
-  position: relative;
-
-  &.vertical {
-    display: inline-block;
-    border-top-width: 0;
-    border-left-width: var(--divider-thickness);
-    margin: auto var(--space-xs);
-    width: 0;
-    height: 100%;
-    min-height: 1em;
-  }
-}
-
-.divider.invisible,
-.markdown-output br {
-  visibility: hidden;
-}
-
-.divider.thick {
-  --divider-thickness: var(--border-m);
-}
-
-.divider.thicker {
-  --divider-thickness: var(--border-l);
-}
-
-.divider.dashed {
-  border-style: dashed;
-}
-
-.divider.dotted {
-  border-style: dotted;
-}

package/src/styles/components/drawer.css

@@ -1,107 +0,0 @@
-/* See utils/base-dialog for more */
-.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 {
-      height: 300px;
-    }
-
-    &.medium {
-      height: 450px;
-    }
-
-    &.large {
-      height: 600px;
-    }
-  }
-
-  &.left,
-  &.right {
-    height: 100dvh;
-    max-height: unset;
-    width: auto;
-    min-width: min(100dvw, 300px);
-    max-width: 100dvw;
-
-    &.small {
-      width: 350px;
-    }
-
-    &.medium {
-      width: 450px;
-    }
-
-    &.large {
-      width: 700px;
-    }
-  }
-}
-
-.drawer-body {
-  height: 100%;
-}
-
-.drawer-footer {
-  padding: var(--space-xs);
-  flex-shrink: 0;
-  display: flex;
-  gap: var(--space-xs);
-  justify-content: flex-start;
-  margin: 0;
-  margin-block-start: auto;
-
-  > * {
-    width: 100%;
-  }
-}