@jrgermain/stylesheet 0.7.1 → 0.9.0

package/src/styles/components/app.css

@@ -1,376 +0,0 @@
-.app {
-  /* The app is designed to take up the entire width of the page. However, we
-   * set a global limit on the overall width of its content for UX and aesthetic
-   * reasons. The wrapper elements of the page will always extend to the edge of
-   * the screen, but all content within them will be kept within this limit and
-   * centered.
-   */
-  --app-max-content-width: 110rem;
-  --app-header-height: clamp(50px, 3.5rem, 70px);
-  --app-sidebar-width: clamp(300px, 18rem, 400px);
-
-  position: relative;
-  width: 100%;
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-m);
-}
-
-.app-header {
-  height: var(--app-header-height);
-  width: 100%;
-  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);
-  flex: none;
-  position: sticky;
-  left: 0;
-}
-
-.app-header-content {
-  height: 100%;
-  width: 100%;
-  max-width: var(--app-max-content-width);
-  margin-inline: auto;
-  padding-inline: var(--space-body-x);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-s);
-}
-
-.app-header-section {
-  margin: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-
-  /* If header only has 1 section, center it */
-  &:only-child {
-    margin-inline: auto;
-  }
-
-  /* Otherwise, align the first to the left and the rest to the right */
-  &:first-child {
-    margin-inline-end: auto;
-  }
-
-  /*
-   * The content of the first header item should be var(--space-body-x) from the
-   * left edge of the app. Since there is var(--space-body-x) padding in the
-   * header and var(--space-xs) padding in the header items, we just need to
-   * move it back by var(--space-xs).
-   */
-  &:first-child .app-header-item:first-child {
-    margin-inline-start: calc(-1 * var(--space-xs));
-  }
-
-  /* 
-   * The content of the last header item should be var(--space-body-x) from the
-   * right edge of the app. Since there is var(--space-body-x) padding in the
-   * header and var(--space-xs) padding in the header items, we just need to
-   * move it forward by var(--space-xs).
-   */
-  &:last-child .app-header-item:last-child {
-    margin-inline-end: calc(-1 * var(--space-xs));
-  }
-
-  /* Put a spacer between consecutive right-aligned sections (3rd onward) */
-  &:nth-child(n + 3)::before {
-    content: "";
-    background-color: var(--color-outline);
-    height: 2rem;
-    width: var(--border-s);
-    position: relative;
-    right: calc(var(--space-s) / 2);
-  }
-}
-
-.app-header-item {
-  height: 100%;
-  cursor: pointer;
-  text-decoration: none;
-  color: inherit;
-  transition-property: color, background-color;
-  transition-duration: var(--duration-short);
-  transition-timing-function: var(--ease-default);
-  display: flex;
-  align-items: center;
-  position: relative;
-  font-weight: var(--font-weight-semibold);
-  padding-inline: var(--space-xs);
-  border-radius: var(--radius-m);
-  border: var(--border-m) solid var(--color-body-alt);
-
-  &:hover {
-    background-color: var(--color-brand-extra-transparent);
-  }
-
-  &:active {
-    background-color: var(--color-brand-transparent);
-  }
-
-  &:focus-visible {
-    background-color: var(--color-brand-extra-transparent);
-    outline-offset: calc(-1 * var(--border-m));
-  }
-
-  &: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) + var(--border-m)));
-    left: 0;
-    background-color: currentcolor;
-    opacity: 0;
-    border-radius: 1px;
-  }
-}
-
-.app-body {
-  position: relative;
-  width: 100%;
-  max-width: var(--app-max-content-width);
-  margin-inline: auto;
-  flex: none;
-  display: flex;
-  flex-direction: row;
-}
-
-.app-sidebar {
-  transition-property: opacity, display;
-  transition-duration: var(--duration-long);
-  transition-timing-function: var(--ease-default);
-  transition-behavior: allow-discrete;
-  width: var(--app-sidebar-width);
-  flex: none;
-  opacity: 1;
-  border-inline-end: var(--border-s) dashed var(--color-outline);
-}
-
-.app-sidebar-content {
-  position: sticky;
-  top: 0;
-  overflow: auto;
-  height: 100dvh;
-}
-
-.app-sidebar-section {
-  &:first-of-type {
-    margin-block-start: var(--space-body-y);
-  }
-
-  &:not(:last-of-type) {
-    margin-block-end: var(--space-xs);
-  }
-
-  &:last-of-type {
-    margin-block-end: var(--space-body-y);
-  }
-}
-
-.app-sidebar-heading {
-  font-size: 1.2rem;
-  margin: 0 var(--space-body-x) var(--space-3xs);
-  font-weight: var(--font-weight-semibold);
-}
-
-.app-sidebar-item {
-  display: block;
-  margin: 0 var(--space-2xs);
-  padding: var(--space-2xs) calc(var(--space-body-x) - var(--space-2xs));
-  border-radius: var(--radius-l);
-  color: var(--color-body-text-alt);
-  text-decoration: none;
-  font-weight: var(--font-weight-normal);
-  font-size: 1rem;
-  user-select: none;
-  transition-property: color, background-color, box-shadow;
-  transition-duration: var(--duration-short);
-  transition-timing-function: var(--ease-default);
-
-  &:hover {
-    background-color: var(--color-brand-extra-transparent);
-  }
-
-  &:active {
-    color: var(--color-brand-1);
-  }
-
-  &:is([aria-current], .current) {
-    color: var(--color-brand-4);
-    font-weight: var(--font-weight-bold);
-  }
-
-  &:hover:active {
-    background-color: var(--color-brand-transparent);
-  }
-
-  &:focus-visible {
-    outline-offset: 0;
-    background-color: var(--color-brand-extra-transparent);
-  }
-}
-
-.app-sidebar-toggle {
-  transition: background-color var(--duration-short) var(--ease-default);
-  display: none;
-  width: 2.75rem;
-  margin-inline-start: 1rem;
-
-  &:has(input:focus-visible) {
-    background-color: var(--color-brand-extra-transparent);
-    outline: var(--border-m) solid var(--color-brand-5);
-    outline-offset: calc(-1 * var(--border-m));
-  }
-
-  /* Add vertical separator before button */
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -0.5rem;
-    height: 100%;
-    width: var(--border-s);
-    background-color: var(--color-outline);
-  }
-
-  /* Style the 3 lines inside the button */
-  > div {
-    transition-property: transform, opacity;
-    transition-duration: var(--duration-medium);
-    transition-timing-function: var(--ease-default);
-    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%);
-    }
-  }
-
-  /* When the sidebar is visible, turn the 3 lines into an X  */
-  &: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);
-    }
-  }
-}
-
-.app-content {
-  width: 100%;
-  padding: var(--space-body-y) var(--space-body-x);
-  position: relative;
-}
-
-/* If there's a sidebar, shrink the content area to accommodate it */
-.app-sidebar ~ .app-content {
-  width: calc(100% - var(--app-sidebar-width));
-}
-
-@media (width < 55rem) {
-  /* 
-   * If there's a sidebar, DON'T factor its width into the content width since
-   * the sidebar now has `position: fixed`. This only applies to pages with a
-   * sidebar; without one, app-content's width is already 100%.
-   */
-  .app-sidebar ~ .app-content {
-    width: 100%;
-  }
-
-  .app-sidebar {
-    position: fixed;
-    top: var(--app-header-height);
-    left: 0;
-    width: 100vw;
-    opacity: 1;
-    background-color: light-dark(#fffc, #000a);
-    backdrop-filter: blur(24px) saturate(120%);
-    border-right: 0;
-    z-index: 9;
-
-    &::after {
-      content: initial;
-    }
-  }
-
-  .app-sidebar-toggle {
-    display: initial;
-  }
-
-  .app-sidebar-content {
-    height: calc(100dvh - var(--app-header-height));
-  }
-
-  .app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar {
-    opacity: 0;
-    display: none;
-  }
-
-  /* If sidebar is open, temporarily hide the overflow and any site-wide banners */
-  .app:has(.app-sidebar-toggle input:checked) {
-    overflow: hidden;
-
-    > .banner {
-      display: none;
-    }
-
-    .app-header {
-      position: fixed;
-      top: 0;
-      z-index: 10;
-    }
-
-    .app-content {
-      top: var(--app-header-height);
-    }
-  }
-}
-
-.app:has(dialog:modal) {
-  /* 
-   * If modal is open, hide the overflow. This prevents the user from scrolling
-   * the page down by dragging on the header, which they'd have no way to undo.
-   */
-  overflow: hidden;
-}
-
-@starting-style {
-  .app > .sidebar {
-    opacity: 0;
-  }
-}

package/src/styles/components/banner.css

@@ -1,57 +0,0 @@
-.banner {
-  border-inline-width: 0;
-  width: 100%;
-  padding: var(--space-xs) var(--space-body-x);
-  padding-inline-start: calc(var(--space-body-x) + 2em);
-
-  &:has(.button.dismiss) {
-    padding-inline-end: calc(var(--space-body-x) + 2em);
-  }
-
-  &::before,
-  &::after {
-    inset-inline-start: calc(var(--space-body-x) * 0.5);
-  }
-
-  & + & {
-    border-block-start-width: 0;
-  }
-
-  &.error {
-    --banner-dismiss-icon-color: var(--color-red-4);
-    --banner-dismiss-hover-bg: var(--color-red-extra-transparent);
-    --banner-dismiss-focus-bg: var(--color-red-transparent);
-  }
-
-  &.warning {
-    --banner-dismiss-icon-color: var(--color-yellow-4);
-    --banner-dismiss-hover-bg: var(--color-yellow-extra-transparent);
-    --banner-dismiss-focus-bg: var(--color-yellow-transparent);
-  }
-
-  &.success {
-    --banner-dismiss-icon-color: var(--color-green-4);
-    --banner-dismiss-hover-bg: var(--color-green-extra-transparent);
-    --banner-dismiss-focus-bg: var(--color-green-transparent);
-  }
-
-  &.info {
-    --banner-dismiss-icon-color: var(--color-sky-4);
-    --banner-dismiss-hover-bg: var(--color-sky-extra-transparent);
-    --banner-dismiss-focus-bg: var(--color-sky-transparent);
-  }
-
-  .button.dismiss {
-    --button-fg-color: var(--banner-dismiss-icon-color);
-    --button-hover-bg-color: var(--banner-dismiss-hover-bg);
-
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: calc(var(--space-body-x) * 0.5);
-    margin: auto;
-
-    &:is(:focus-visible, .focus) {
-      --button-bg-color: var(--banner-dismiss-focus-bg);
-    }
-  }
-}