@jrgermain/stylesheet 0.2.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrgermain/stylesheet",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "A stylesheet for apps I build",
   "homepage": "https://stylesheet.jrgermain.dev",
   "author": {
@@ -16,30 +16,30 @@
   "type": "module",
   "scripts": {
     "build": "node scripts/build.cjs",
+    "watch": "node scripts/watch.cjs",
     "lint": "stylelint ./src/styles"
   },
   "devDependencies": {
-    "@csstools/postcss-sass": "^5.0.1",
-    "cssnano": "^6.0.1",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^11.0.0",
-    "postcss-load-config": "^5.0.0",
-    "postcss-preset-env": "^9.2.0",
+    "browserslist": "^4.24.3",
+    "chokidar": "^4.0.3",
+    "lightningcss": "^1.28.2",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.4",
     "stylelint": "^16.0.0",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "stylelint-config-standard": "^36.0.1"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "index.cjs",
+    "index.mjs"
   ],
   "exports": {
     ".": {
-      "sass": "./src/styles/index.scss"
+      "browser": "./dist/index.css",
+      "unpkg": "./dist/index.css",
+      "default": "./dist/index.css"
     },
-    "./index.scss": "./src/styles/index.scss",
     "./index.css": "./dist/index.css",
     "./index.min.css": "./dist/index.min.css"
   },

package/src/styles/components/accordion.css

@@ -0,0 +1,136 @@
+.accordion {
+  width: 100%;
+
+  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);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-m);
+    font-weight: var(--font-weight-normal);
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: 150ms padding ease;
+    }
+
+    & + 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;
+    }
+
+    &[open] {
+      padding-block-end: var(--space-xs);
+
+      summary {
+        border-block-end-color: var(--color-outline);
+        margin-block-end: var(--space-xs);
+
+        &::before {
+          rotate: 0deg;
+        }
+
+        &:not(:active, .active, :hover, .hover) {
+          color: var(--color-brand-3);
+        }
+      }
+    }
+  }
+
+  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: light-dark(var(--color-brand-4), var(--color-brand-2));
+    }
+
+    &:is(:active, .active) {
+      color: light-dark(var(--color-brand-2), var(--color-brand-4));
+    }
+
+    /* Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency) */
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    /* Replacement marker element */
+    &::before {
+      content: light-dark(
+        url("@/src/svg/dropdown-thick.svg"),
+        url("@/src/svg/dropdown-invert-thick.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;
+      }
+    }
+  }
+
+  &.subtle {
+    details {
+      box-shadow: none;
+      border: 0;
+      padding-inline: var(--space-2xs);
+      background-color: transparent;
+
+      &[open] summary {
+        margin-block-end: var(--space-2xs);
+      }
+    }
+
+    summary {
+      border-block-end: 0;
+      padding: var(--space-2xs);
+      padding-inline-start: calc(var(--space-2xs) + 1em);
+    }
+  }
+}

package/src/styles/components/alert.css

@@ -0,0 +1,12 @@
+.alert {
+  border-radius: var(--radius-s);
+  border-start-start-radius: calc(var(--space-2xs) + 2em);
+  border-end-start-radius: calc(var(--space-2xs) + 2em);
+  padding: var(--space-2xs);
+  padding-inline-start: calc(var(--space-2xs) + 2em);
+
+  &::before,
+  &::after {
+    inset-inline-start: calc(var(--space-2xs) * 0.5);
+  }
+}

package/src/styles/components/{_app.scss → app.css}

@@ -1,37 +1,39 @@
-@use "../utils";
-@use "./layout";
-
 .app {
-  --app-width: 110rem;
+  /* 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: min-content;
-  min-width: 100%;
+  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: clamp(50px, 3.5rem, 70px);
-  width: 100dvw;
-  color: var(--color-brand-3);
+  height: var(--app-header-height);
+  width: 100%;
+  color: light-dark(var(--color-brand-3), var(--color-brand-2));
   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;
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-brand-2);
-  }
 }
 
 .app-header-content {
   height: 100%;
   width: 100%;
-  max-width: var(--app-width);
+  max-width: var(--app-max-content-width);
   margin-inline: auto;
   padding-inline: var(--space-body);
   display: flex;
@@ -46,33 +48,37 @@
   display: flex;
   align-items: center;
 
-  // If header only has 1 section, center it
+  /* 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
+  /* 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) from the
-  // left edge of the app. Since there is var(--space-body) padding in the
-  // header and var(--space-xs) padding in the header items, we just need to
-  // move it back by var(--space-xs).
+  /*
+   * The content of the first header item should be var(--space-body) from the
+   * left edge of the app. Since there is var(--space-body) 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) from the
-  // right edge of the app. Since there is var(--space-body) padding in the
-  // header and var(--space-xs) padding in the header items, we just need to
-  // move it forward by var(--space-xs).
+  /* 
+   * The content of the last header item should be var(--space-body) from the
+   * right edge of the app. Since there is var(--space-body) 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)
+  /* Put a spacer between consecutive right-aligned sections (3rd onward) */
   &:nth-child(n + 3)::before {
     content: "";
     background-color: var(--color-outline);
@@ -84,12 +90,12 @@
 }
 
 .app-header-item {
-  // TODO simplify
+  /* TODO simplify */
   height: 100%;
   cursor: pointer;
   text-decoration: none;
   color: inherit;
-  transition-property: color;
+  transition-property: color, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease;
   display: flex;
@@ -97,13 +103,20 @@
   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);
 
-  &:focus-visible {
-    outline-offset: calc(-1 * var(--border-m));
+  &:hover {
+    background-color: var(--color-brand-extra-transparent);
   }
 
-  &:hover {
-    color: var(--color-body-text);
+  &: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) {
@@ -119,7 +132,7 @@
     position: absolute;
     width: 100%;
     height: var(--border-l);
-    bottom: calc(-1 * var(--border-l));
+    bottom: calc(-1 * (var(--border-l) + var(--border-m)));
     left: 0;
     background-color: currentcolor;
     opacity: 0;
@@ -130,7 +143,7 @@
 .app-body {
   position: relative;
   width: 100%;
-  max-width: var(--app-width);
+  max-width: var(--app-max-content-width);
   margin-inline: auto;
   flex: none;
   display: flex;
@@ -141,7 +154,7 @@
   transition:
     opacity 150ms ease,
     display 150ms allow-discrete;
-  width: clamp(300px, 18rem, 400px);
+  width: var(--app-sidebar-width);
   flex: none;
   opacity: 1;
   border-inline-end: var(--border-s) dashed var(--color-outline);
@@ -151,7 +164,6 @@
   position: sticky;
   top: 0;
   overflow: auto;
-  height: auto;
   height: 100dvh;
 }
 
@@ -184,6 +196,7 @@
   text-decoration: none;
   font-weight: var(--font-weight-normal);
   font-size: 1rem;
+  user-select: none;
   transition-property: color, background-color, box-shadow;
   transition-duration: 200ms;
   transition-timing-function: ease;
@@ -207,30 +220,24 @@
 
   &:focus-visible {
     outline-offset: 0;
+    background-color: var(--color-brand-extra-transparent);
   }
 }
 
 .app-sidebar-toggle {
-  // TODO simplify
-  @include utils.transition(("color", "background-color"));
-
+  /* TODO simplify */
+  transition-property: color, background-color;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
   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;
@@ -242,8 +249,9 @@
   }
 
   > div {
-    @include utils.transition(("transform", "opacity"));
-
+    transition-property: transform, opacity;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
     position: absolute;
     width: 1.75rem;
     height: 2px;
@@ -285,22 +293,34 @@
 .app-content {
   width: 100%;
   padding: var(--space-body);
+  position: relative;
 }
 
-.app:has(.app-sidebar) {
-  --app-width: 125rem;
+/* 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 {
-    width: 100dvw;
+    position: fixed;
+    top: var(--app-header-height);
+    left: 0;
+    width: 100vw;
     opacity: 1;
-    background-color: #fffc;
+    background-color: light-dark(#fffc, #000a);
     backdrop-filter: blur(24px) saturate(120%);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: #000c;
-    }
+    border-right: 0;
+    z-index: 9;
 
     &::after {
       content: initial;
@@ -311,8 +331,39 @@
     display: initial;
   }
 
-  .app:has(.app-sidebar-toggle input:not(:checked)) .app-sidebar {
+  .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;
 }

package/src/styles/components/banner.css

@@ -0,0 +1,33 @@
+.banner {
+  border-inline-width: 0;
+  width: 100%;
+  padding: var(--space-xs);
+  padding-inline-start: calc(var(--space-xs) + 2em);
+
+  &:has(.button.dismiss) {
+    padding-inline-end: calc(var(--space-xs) + 2em);
+  }
+
+  &::before,
+  &::after {
+    inset-inline-start: calc(var(--space-xs) * 0.5);
+  }
+
+  & + & {
+    border-block-start-width: 0;
+  }
+
+  .button.dismiss {
+    --button-fg-color: var(--alert-dismiss-icon-color);
+    --button-hover-bg-color: var(--alert-dismiss-hover-bg);
+
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--space-3xs);
+    margin: auto;
+
+    &:is(:focus-visible, .focus) {
+      --button-bg-color: var(--alert-dismiss-focus-bg);
+    }
+  }
+}