@jrgermain/stylesheet 0.5.1 → 0.6.1

package/src/styles/components/button.css

@@ -1,4 +1,9 @@
 .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);
 
@@ -11,8 +16,8 @@
   border-style: solid;
   transform: scale(1);
   transition-property: box-shadow, background-color, transform, opacity;
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  transition-duration: var(--duration-medium);
+  transition-timing-function: var(--ease-default);
   text-decoration: none;
   position: relative;
   align-items: center;
@@ -28,6 +33,10 @@
   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: "";
@@ -36,8 +45,8 @@
     inset: 0;
     margin: auto;
     transition-property: opacity, width, height, border-radius;
-    transition-duration: 200ms;
-    transition-timing-function: ease;
+    transition-duration: var(--duration-medium);
+    transition-timing-function: var(--ease-default);
     z-index: -1;
     border-radius: 2em;
     width: 4em;
@@ -80,11 +89,6 @@
     }
   }
 
-  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);
@@ -145,18 +149,22 @@
       --button-border-color: var(--color-gray-4);
       --button-focus-ring-color: var(--color-gray-transparent);
     }
-  }
 
-  /* .secondary, default */
-  &:not(.primary, .subtle, .close, .dismiss) {
-    --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);
+    &.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);
+    }
   }
 
-  &:is(.subtle, .close) {
+  &.subtle {
     --button-fg-color: var(--color-brand-4);
     --button-bg-color: transparent;
     --button-border-color: transparent;
@@ -242,17 +250,30 @@
       }
     }
 
-    &.gray {
-      --button-fg-color: var(--color-gray-4);
+    &.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;
+    }
   }
 
-  &:is(.small, .close, .dismiss) {
+  &.small {
     font-size: 0.8rem;
   }
 
@@ -260,13 +281,15 @@
     font-size: 1.2rem;
   }
 
-  &:is(.icon, .close, .dismiss) {
+  &.icon {
     border-radius: var(--radius-full);
     min-width: 0;
     min-height: 0;
     aspect-ratio: 1;
+    padding: 0.5em;
 
-    &:is(.subtle, .close) {
+    /* Subtle icon buttons use normal pseudo element hover effect */
+    &.subtle {
       &::before {
         width: 75%;
         height: 75%;
@@ -279,16 +302,8 @@
       }
     }
 
-    &.icon {
-      padding: 0.5em;
-    }
-
-    &.close,
-    &.dismiss {
-      padding: 0.3em;
-    }
-
-    &:not(.subtle, .close, .dismiss) {
+    /* Normal icon buttons just change background color */
+    &:not(.subtle) {
       &::before {
         content: unset;
       }

package/src/styles/components/card.css

@@ -33,6 +33,10 @@
   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,12 +1,8 @@
 .chip {
   --chip-fg-color: white;
   --chip-bg-color: var(--color-brand-6);
-  --chip-border-color: light-dark(var(--color-brand-7), var(--color-brand-5));
+  --chip-border-color: var(--color-brand-5);
   --chip-focus-color: var(--color-brand-transparent);
-  --chip-bg-color-active: light-dark(
-    var(--color-brand-5),
-    var(--color-brand-7)
-  );
 
   display: inline-flex;
   align-items: center;
@@ -21,26 +17,24 @@
   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;
+  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;
 
-  &:is(:focus-visible, .focus) {
-    box-shadow: 0 0 0 0.2em var(--chip-focus-color);
-  }
-
   &.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.2em var(--chip-focus-color);
+        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) {
@@ -48,145 +42,102 @@
     }
 
     &:is(:active, .active) {
-      background-color: var(--chip-bg-color-active);
-      border-color: var(--chip-bg-color-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: light-dark(var(--color-red-7), var(--color-red-5));
+    --chip-border-color: var(--color-red-5);
     --chip-focus-color: var(--color-red-transparent);
-    --chip-bg-color-active: light-dark(var(--color-red-5), var(--color-red-7));
   }
 
   &.orange {
     --chip-bg-color: var(--color-orange-6);
-    --chip-border-color: light-dark(
-      var(--color-orange-7),
-      var(--color-orange-5)
-    );
+    --chip-border-color: var(--color-orange-5);
     --chip-focus-color: var(--color-orange-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-orange-5),
-      var(--color-orange-7)
-    );
   }
 
   &.yellow {
     --chip-bg-color: var(--color-yellow-6);
-    --chip-border-color: light-dark(
-      var(--color-yellow-7),
-      var(--color-yellow-5)
-    );
+    --chip-border-color: var(--color-yellow-5);
     --chip-focus-color: var(--color-yellow-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-yellow-5),
-      var(--color-yellow-7)
-    );
   }
 
   &.green {
     --chip-bg-color: var(--color-green-6);
-    --chip-border-color: light-dark(var(--color-green-7), var(--color-green-5));
+    --chip-border-color: var(--color-green-5);
     --chip-focus-color: var(--color-green-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-green-5),
-      var(--color-green-7)
-    );
   }
 
   &.sky {
     --chip-bg-color: var(--color-sky-6);
-    --chip-border-color: light-dark(var(--color-sky-7), var(--color-sky-5));
+    --chip-border-color: var(--color-sky-5);
     --chip-focus-color: var(--color-sky-transparent);
-    --chip-bg-color-active: light-dark(var(--color-sky-5), var(--color-sky-7));
   }
 
   &.blue {
     --chip-bg-color: var(--color-blue-6);
-    --chip-border-color: light-dark(var(--color-blue-7), var(--color-blue-5));
+    --chip-border-color: var(--color-blue-5);
     --chip-focus-color: var(--color-blue-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-blue-5),
-      var(--color-blue-7)
-    );
   }
 
   &.purple {
     --chip-bg-color: var(--color-purple-6);
-    --chip-border-color: light-dark(
-      var(--color-purple-7),
-      var(--color-purple-5)
-    );
+    --chip-border-color: var(--color-purple-5);
     --chip-focus-color: var(--color-purple-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-purple-5),
-      var(--color-purple-7)
-    );
   }
 
   &.magenta {
     --chip-bg-color: var(--color-magenta-6);
-    --chip-border-color: light-dark(
-      var(--color-magenta-7),
-      var(--color-magenta-5)
-    );
+    --chip-border-color: var(--color-magenta-5);
     --chip-focus-color: var(--color-magenta-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-magenta-5),
-      var(--color-magenta-7)
-    );
   }
 
   &.gray {
     --chip-bg-color: var(--color-gray-6);
-    --chip-border-color: light-dark(var(--color-gray-7), var(--color-gray-5));
+    --chip-border-color: var(--color-gray-5);
     --chip-focus-color: var(--color-gray-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-gray-5),
-      var(--color-gray-7)
-    );
   }
 
   &.black {
     --chip-bg-color: black;
-    --chip-border-color: light-dark(var(--color-gray-4), var(--color-gray-7));
+    --chip-border-color: #3d3d3d;
     --chip-focus-color: var(--color-gray-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-gray-1),
-      var(--color-gray-8)
-    );
   }
 
   &.white {
     --chip-fg-color: black;
     --chip-bg-color: white;
-    --chip-border-color: light-dark(var(--color-gray-8), var(--color-gray-2));
+    --chip-border-color: #d0d0d0;
     --chip-focus-color: var(--color-gray-transparent);
-    --chip-bg-color-active: light-dark(
-      var(--color-gray-7),
-      var(--color-gray-3)
-    );
   }
 }
 
 .chip-delete {
-  outline: 0;
+  outline: 1px solid transparent;
   margin-inline: var(--space-3xs) calc(-1 * var(--space-2xs));
   font-size: 0.6em;
-  border: var(--border-s) solid var(--chip-border-color);
+  border: 0;
   border-radius: var(--radius-full);
-  transition-property: background-color, border-color;
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  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: #0002;
+  background-color: var(--chip-border-color);
   padding: 0;
   display: inline-flex;
   box-shadow: none;
@@ -204,14 +155,14 @@
   }
 
   &:is(:focus-visible, .focus) {
-    border-color: var(--chip-fg-color);
+    outline-color: var(--chip-fg-color);
   }
 
-  &:is(:hover, .hover, :focus-visible, .focus) {
-    background-color: #0001;
+  &:is(:hover, .hover) {
+    background-color: hsl(from var(--chip-border-color) h s calc(l + 5));
   }
 
   &:is(:active, .active) {
-    background-color: #0003;
+    background-color: hsl(from var(--chip-border-color) h s calc(l - 20));
   }
 }

package/src/styles/components/field.css

@@ -9,9 +9,9 @@
   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;
+  transition-duration: var(--duration-medium);
+  transition-timing-function: var(--ease-default);
   font-size: var(--font-size-m);
   font-family: var(--font-family-body);
 
@@ -32,7 +32,7 @@
     color: var(--color-red-5);
 
     .error-message {
-      opacity: 1;
+      display: flex;
     }
   }
 
@@ -59,9 +59,9 @@
     font-size: 1em;
     padding: var(--field-padding);
     border-radius: var(--field-radius);
-    transition-duration: 200ms;
     transition-property: color, box-shadow, border-color;
-    transition-timing-function: ease;
+    transition-duration: var(--duration-medium);
+    transition-timing-function: var(--ease-default);
     font-family: inherit;
 
     &:focus {
@@ -134,7 +134,8 @@
     }
   }
 
-  select {
+  select,
+  input[list] {
     background-image: light-dark(
       url("@/src/svg/dropdown.svg"),
       url("@/src/svg/dropdown-invert.svg")
@@ -142,7 +143,6 @@
     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);
 
@@ -151,6 +151,10 @@
     }
   }
 
+  select {
+    cursor: pointer;
+  }
+
   .help-text {
     font-size: 0.9em;
     color: var(--color-body-text-alt);
@@ -159,15 +163,14 @@
     position: relative;
   }
 
+  /* Todo glitches */
   .error-message {
-    transition: opacity 200ms ease;
-    opacity: 0;
+    display: none;
     font-size: 0.9em;
     border: 0;
     padding: 0;
     margin: 0;
     font-weight: var(--font-weight-semibold);
-    display: flex;
     align-items: center;
     gap: 2px;
 
@@ -244,8 +247,8 @@
       color: var(--color-brand-3);
       border-inline-start: 0;
       transition-property: box-shadow, background-color;
-      transition-timing-function: ease;
-      transition-duration: 200ms;
+      transition-duration: var(--duration-medium);
+      transition-timing-function: var(--ease-default);
 
       &:hover {
         background-color: var(--color-gray-8);
@@ -290,7 +293,7 @@ fieldset.fieldset {
   legend {
     font-family: var(--font-family-heading);
     font-weight: var(--font-weight-bold);
-    transition: color 200ms ease;
+    transition: color var(--duration-medium) var(--ease-default);
   }
 
   &:focus-within legend {

package/src/styles/components/highlight.css

@@ -1,15 +1,15 @@
 .highlight,
 .markdown-output mark {
-  background-color: light-dark(var(--color-yellow-8), var(--color-yellow-7));
-  color: light-dark(var(--color-yellow-2), var(--color-yellow-1));
+  background-color: var(--color-yellow-8);
+  color: var(--color-yellow-1);
   print-color-adjust: exact;
 }
 
 .highlight.removed,
 .markdown-output del {
   background-color: var(--color-red-8);
-  color: var(--color-red-2);
-  transition: text-decoration-color 150ms ease;
+  color: var(--color-red-1);
+  transition: text-decoration-color var(--duration-short) var(--ease-default);
   text-decoration-line: line-through;
   text-decoration-skip-ink: none;
   text-decoration-thickness: var(--border-m);
@@ -24,7 +24,7 @@
 .highlight.added,
 .markdown-output ins {
   background-color: var(--color-green-8);
-  color: var(--color-green-2);
+  color: var(--color-green-1);
   text-decoration-thickness: var(--border-m);
   text-decoration-color: var(--color-green-4);
   text-underline-offset: 0.1em;
@@ -34,6 +34,6 @@
 .highlight.target,
 ::target-text {
   background-color: var(--color-brand-8);
-  color: light-dark(var(--color-brand-2), var(--color-brand-1));
+  color: var(--color-brand-1);
   print-color-adjust: exact;
 }

package/src/styles/components/link.css

@@ -9,7 +9,7 @@
   text-decoration-thickness: var(--border-m);
   text-underline-offset: 0.1em;
   cursor: pointer;
-  transition: text-decoration-color 200ms ease;
+  transition: text-decoration-color var(--duration-short) var(--ease-default);
 
   &:is(:hover, .hover) {
     text-decoration-color: currentcolor;

package/src/styles/{shared → components/shared}/base-dialog.css

@@ -65,6 +65,21 @@
     font-weight: inherit;
     margin: 0;
   }
+
+  .button.dismiss {
+    --button-fg-color: var(--color-brand-3);
+    --button-hover-bg-color: var(--color-brand-extra-transparent);
+
+    font-size: 0.8rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    margin: -0.5rem;
+    padding: 0.25rem;
+
+    &:is(:focus-visible, .focus) {
+      --button-bg-color: var(--color-brand-transparent);
+    }
+  }
 }
 
 .modal-body,
@@ -95,23 +110,21 @@ dialog:is(.modal, .drawer)[open]::backdrop {
   opacity: var(--dialog-backdrop-open-opacity);
 }
 
+dialog:is(.modal, .drawer),
+dialog:is(.modal, .drawer)::backdrop {
+  transition-property: transform, opacity, display, overlay;
+  transition-duration: var(--duration-long);
+  transition-timing-function: var(--ease-default);
+  transition-behavior: allow-discrete;
+}
+
 dialog:is(.modal, .drawer) {
   transform: var(--dialog-ending-transform);
   opacity: var(--dialog-ending-opacity);
-  transition:
-    transform 150ms ease,
-    opacity 150ms ease,
-    display 150ms ease allow-discrete,
-    overlay 150ms ease allow-discrete;
 }
 
 dialog:is(.modal, .drawer)::backdrop {
   opacity: var(--dialog-backdrop-ending-opacity);
-  transition:
-    transform 150ms ease,
-    opacity 150ms ease,
-    display 150ms ease allow-discrete,
-    overlay 150ms ease allow-discrete;
 }
 
 @starting-style {

package/src/styles/{shared/dismiss-button.css → components/shared/base-dismiss-button.css}

@@ -9,12 +9,26 @@
   font-size: 0.75rem;
   width: 3em;
   height: 3em;
+  border-radius: var(--radius-m);
+  min-width: 0;
+  min-height: 0;
+  aspect-ratio: 1;
+  padding: 0.3em;
 
   &:is(:focus-visible, .focus) {
     --button-bg-color: var(--color-gray-transparent);
     --button-hover-bg-color: transparent;
   }
 
+  /* Don't use pseudo element for hover style */
+  &::before {
+    content: unset;
+  }
+
+  &:is(:hover, .hover) {
+    background-color: var(--button-hover-bg-color);
+  }
+
   &::after {
     content: "";
     width: 1.8em;

package/src/styles/components/skip-link.css

@@ -8,7 +8,7 @@
   padding: var(--space-xs);
   border-radius: var(--radius-m);
   border: 0.25em solid var(--color-brand-4);
-  color: var(--color-body-alt);
+  color: white;
   font-weight: var(--font-weight-bold);
   font-family: var(--font-family-body);
   font-size: var(--font-size-m);
@@ -19,7 +19,7 @@
   text-decoration: none;
   vertical-align: middle;
   opacity: 0.25;
-  transition: opacity 300ms ease;
+  transition: opacity var(--duration-medium) var(--ease-default);
   pointer-events: none;
   line-height: 1;