@stnd/styles 0.5.0

package/_standard-08-media.scss

@@ -0,0 +1,216 @@
+@use "standard-00-variables" as *;
+
+/* =========================== */
+/* MEDIA                       */
+/* =========================== */
+
+img,
+video,
+audio,
+iframe,
+.video,
+.video-container {
+  max-width: 100%;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-raised);
+  background: var(--color-surface);
+  max-height: 80vh;
+  border: var(--border);
+}
+
+/* =========================== */
+/* TYPOGRAPHIC NUANCES         */
+/* =========================== */
+.video-container:has(video) {
+  position: relative;
+  /* padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+  background: transparent;
+
+  video {
+    border-radius: var(--radius);
+    border: var(--border);
+    box-shadow: var(--shadow-raised);
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+.stnd-icon {
+  line-height: 0;
+}
+
+.stnd-icon,
+.stnd-icon img,
+.stnd-icon svg {
+  box-shadow: none;
+  background: transparent;
+  border: none;
+  color: currentColor;
+  fill: currentColor;
+}
+
+/* Reset padding for images specifically */
+img {
+  padding: 0;
+}
+
+figure {
+  display: grid;
+  gap: calc(var(--space-d4) * var(--space-2));
+}
+
+figcaption {
+  font-size: var(--size-sm);
+  font-style: italic;
+  text-align: center;
+}
+
+/**
+ * @component Image System
+ * @description Responsive image handling with interactive zoom functionality.
+ * This system is progressively enhanced. Without JavaScript, it provides a
+ * basic zoom-on-click-and-hold. With JavaScript, it provides a full
+ * feature-rich lightbox experience.
+ *
+ * @since 0.1.0
+ */
+
+/* ================================================================ */
+/* PART 1: BASE IMAGE STYLES                                        */
+/* These are the default styles for all images.                     */
+/* ================================================================ */
+
+/*
+ * The `:where` block keeps your original logic of only applying
+ * these base styles inside a `.rhythm` or `<html>` context.
+ */
+:where(html:not(.no-rhythm), .rhythm) {
+  /* Basic image reset */
+  * + img,
+  img,
+  img:first-child,
+  img:last-child {
+    margin: 0;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  /* Default styles for a zoomable image reset */
+  img:not([data-no-zoom]) {
+    max-width: 100%;
+  }
+
+  /* Your cosmetic classes for adding/removing borders are preserved */
+  img.fx {
+    border-radius: var(--radius);
+    border: var(--border);
+  }
+
+  img.nofx {
+    border-radius: unset;
+    border: unset;
+    box-shadow: unset;
+  }
+}
+
+/* ================================================================ */
+/* PART 2: NO-JAVASCRIPT FALLBACK (using :active)                   */
+/* These rules only apply if the JavaScript has not run.            */
+/* They provide a simple "zoom-on-hold" experience.                 */
+/* ================================================================ */
+
+/* When JS is off, holding click on an image will trigger this zoom effect. */
+html:not(.js-image-zoom-enabled) img:active {
+  cursor: zoom-out;
+  display: block;
+  position: fixed;
+  z-index: var(--z-image-zoom);
+  max-height: calc(100vh);
+  max-width: calc(100vw);
+  object-fit: contain;
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  user-select: none;
+}
+
+/* Creates a backdrop for the :active zoom. */
+html:not(.js-image-zoom-enabled):has(img:active)::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: var(--color-background);
+  z-index: calc(var(--z-image-zoom) - 1);
+}
+
+/* ================================================================ */
+/* PART 3: JAVASCRIPT-ENHANCED STYLES (HTML overlay)                */
+/* These styles are used by the JavaScript class to create the full */
+/* lightbox experience with keyboard navigation, etc.               */
+/* ================================================================ */
+
+/* Lock the page scroll when the JS overlay is active
+html.image-zoomed-active {
+    overflow: hidden;
+}
+*/
+/* The overlay container created by the JS */
+.image-zoom-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-image-zoom);
+  background: var(--color-glass);
+  backdrop-filter: var(--filter-glass);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gap-body);
+  padding: var(--space-4);
+  margin: 0;
+  opacity: 0;
+  cursor: zoom-out !important;
+  transition: all var(--transition);
+}
+
+/* The class added by JS to fade the overlay in */
+.image-zoom-overlay.is-visible {
+  opacity: 1;
+  backdrop-filter: var(--filter-glass);
+}
+
+/* The image element inside the JS overlay */
+.image-zoom-overlay img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  cursor: zoom-out !important;
+  box-shadow: var(--shadow-raised), var(--shadow-glow);
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity var(--transition), transform var(--transition);
+}
+
+.image-zoom-overlay.is-visible img {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@media (min-width: 768px) {
+  /* Global zoomable image cursor */
+  img:not([data-no-zoom]) {
+    cursor: zoom-in !important;
+  }
+}

package/_standard-09-lists.scss

@@ -0,0 +1,103 @@
+@use "standard-00-variables" as *;
+
+/* =========================== */
+/* LISTS                       */
+/* =========================== */
+
+ul,
+ol {
+  list-style: none;
+  padding-inline: var(--space);
+}
+
+/* Nested lists */
+li > ul,
+li > ol {
+  padding-inline-start: var(--space);
+  margin-block-start: var(--space-d2);
+  margin-block-end: 0;
+}
+
+/* List items */
+li {
+  position: relative;
+  margin: 0;
+  padding-inline-start: 0;
+}
+
+li + li {
+  margin-block-start: var(--space);
+}
+
+/* Unordered list bullets */
+ul > li::before {
+  content: "•";
+  position: absolute;
+  top: 0;
+  left: calc(var(--space) * -1);
+  width: var(--space);
+  text-align: center;
+  font-size: 0.7em;
+  color: var(--color-subtle);
+}
+
+/* Ordered list numbers */
+ol {
+  counter-reset: ol-counter;
+}
+
+ol > li {
+  counter-increment: ol-counter;
+}
+
+ol > li::before {
+  content: counter(ol-counter) ".";
+  position: absolute;
+  top: 0.1em;
+  left: calc(var(--space) * -1.25);
+  text-align: right;
+  color: var(--color-subtle);
+  font-variant-numeric: tabular-nums;
+  width: 1rlh;
+  font-size: var(--size-sm);
+}
+
+/* Inline lists override - protects layouts using flex */
+ul:where(.display-flex, [style*="display: flex"], [style*="display:flex"]) li,
+ol:where(.display-flex, [style*="display: flex"], [style*="display:flex"]) li {
+  margin-block-end: 0;
+}
+
+/* =========================== */
+/* LIST UTILITIES              */
+/* =========================== */
+
+.no-bullet,
+.no-bullet ul {
+  list-style: none;
+  padding-inline-start: 0;
+  li::before {
+    display: none;
+  }
+}
+
+.compact {
+  --base-gap: var(--space-d2);
+  li + li {
+    margin-block-start: var(--space-d2);
+  }
+}
+
+.tight {
+  --base-gap: var(--space-d3);
+  li {
+    margin-block-end: var(--space-d3);
+  }
+}
+
+.relaxed {
+  --base-gap: var(--space-2);
+  li {
+    margin-block-end: var(--space-2);
+  }
+}

package/_standard-10-tables.scss

@@ -0,0 +1,49 @@
+@use "standard-00-variables" as *;
+
+/* =========================== */
+/* TABLES                      */
+/* =========================== */
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tr {
+  padding: 0;
+  margin: 0;
+}
+
+th,
+td {
+  text-align: left;
+  border: var(--border);
+  line-height: var(--line-height-compact);
+  padding: var(--space-d2);
+  font-size: var(--size-sm);
+  min-height: var(--line-height);
+}
+
+th {
+  font-weight: var(--font-weight-bold, 600);
+  transition: background var(--transition);
+  background: var(--color-surface-low);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+caption {
+  font-weight: var(--font-weight-bold, bold);
+  text-align: left;
+  margin-block-end: var(--space-d2);
+}
+
+/* Numeric alignment (Tabular Nums) */
+.numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Zebra striping */
+.striped tbody tr:nth-child(even) {
+  background: oklch(from var(--color-foreground) l c h / 0.03);
+}

package/_standard-11-forms.scss

@@ -0,0 +1,343 @@
+@use "standard-00-variables" as *;
+
+/* =========================== */
+/* FORMS                       */
+/* =========================== */
+
+/* Layout containers */
+
+fieldset {
+  display: grid;
+  gap: 0;
+  border: var(--border);
+  border-radius: var(--radius);
+  padding: var(--space) !important;
+  background: color-mix(
+    in oklch,
+    var(--color-surface) 25%,
+    var(--color-background)
+  );
+}
+
+fieldset div,
+fieldset p {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset + button {
+  margin-block-start: var(--space);
+}
+
+fieldset :last-child {
+  margin-block-end: 0;
+}
+
+legend {
+  font-weight: var(--font-weight-bold, bold);
+  margin-inline-start: calc(var(--space-d2) * -1);
+  padding-inline: var(--space-d2);
+}
+
+/* Inputs */
+input,
+textarea {
+  width: 100%;
+  font-family: var(--font-interface), system-ui, sans-serif;
+  @extend %padding-text;
+  font-size: 1em;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground);
+  background: var(--color-surface);
+  /* shadcn-style raised effect */
+  border: var(--border);
+  box-shadow: var(--shadow-raised);
+  outline: var(--stroke-width) solid transparent;
+  outline-offset: var(--stroke-width);
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--color-surface-high);
+  }
+
+  text-shadow: none !important;
+}
+
+select {
+  width: 100%;
+  font-family: var(--font-interface), system-ui, sans-serif;
+  font-family: var(--font-interface), system-ui, sans-serif;
+  font-weight: var(--font-weight);
+  padding: var(--space-d8) var(--space-d4);
+  font-size: 1em;
+
+  border-radius: var(--radius-sm);
+  color: var(--color-muted);
+  background-color: var(--color-surface);
+  border: var(--border);
+  box-shadow: var(--shadow-raised);
+  outline: none;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  text-align: left;
+  text-shadow: none !important;
+  text-box-trim: none;
+
+  appearance: none;
+  /* Match Combobox double-chevron */
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(150,150,150,0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right var(--space-d8) center;
+  background-size: 1em;
+  padding-right: var(--space); /* Make space for the icon */
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-surface-high);
+    color: var(--color-foreground);
+    border-color: var(--color-subtle);
+  }
+}
+
+textarea {
+  resize: vertical;
+  min-height: var(--space-2);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-subtle);
+  /* Change to your desired color */
+}
+
+input:focus,
+textarea:focus {
+  outline: var(--stroke-width) solid
+    oklch(from var(--color-accent) l c h / 0.25);
+  outline-offset: calc(var(--stroke-width) * 2);
+  background: var(--color-surface-high);
+}
+
+label {
+  margin-block-start: var(--space);
+}
+
+label + :is(input, textarea, select) {
+  margin-block-start: 0;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-d2);
+}
+
+fieldset *:not(legend) + :is(label, select, button, .btn-group) {
+  margin-block-start: var(--space);
+}
+
+fieldset *:not(legend) + .btn-group {
+  margin-block-start: var(--space-2);
+}
+
+input + :is(button, .btn-group) {
+  margin-block-start: var(--space-d2);
+}
+
+fieldset label:has(input[type="checkbox"], input[type="radio"]) {
+  margin-block-start: var(--space);
+}
+
+/* Checkbox/Radio */
+input[type="checkbox"],
+input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: content-box;
+  width: calc(var(--space-d8));
+  height: calc(var(--space-d2));
+  border: var(--border);
+  border-radius: var(--radius);
+  background-color: var(--color-surface);
+  cursor: pointer;
+  position: relative;
+  margin-inline-end: var(--space-d2);
+
+  /* Subtle inset with border */
+  box-shadow: var(--shadow-raised);
+  outline: 0;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    /* Add subtle glow on hover */
+    background-color: var(--color-surface-high);
+    box-shadow: var(--shadow-raised);
+  }
+
+  &:active {
+    /* Add subtle glow on hover */
+    background-color: var(--color-surface-low);
+    box-shadow: var(--shadow-inset);
+  }
+
+  &:focus-visible {
+    outline: var(--stroke-width) solid var(--color-accent);
+    outline-offset: var(--stroke-width);
+  }
+
+  /* Checked state */
+  &:checked {
+    background-color: var(--color-accent);
+    /* Raised effect when checked, with accent border for clarity */
+    box-shadow: var(--shadow-raised);
+  }
+
+  &:checked:hover {
+    box-shadow: var(--shadow-raised);
+  }
+
+  /* Checkmark using pseudo-element */
+  &:checked::after {
+    content: "";
+    position: absolute;
+    left: 38%;
+    top: 23%;
+    width: 25%;
+    height: 45%;
+    border: var(--stroke-width) solid var(--color-on-accent);
+    border-width: 0 var(--stroke-width-lg) var(--stroke-width-lg) 0;
+    transform: rotate(45deg);
+  }
+}
+
+input[type="radio"] {
+  border-radius: 50%;
+}
+
+input[type="checkbox"][role="switch"] {
+  --switch-height: calc(var(--space) - var(--space-d3));
+  --switch-width: calc(var(--switch-height) * 2);
+  --switch-padding: 2px;
+
+  appearance: none;
+  box-sizing: border-box; /* Reset content-box from base checkbox rule */
+  position: relative;
+  top: 0; /* Reset top: 50% from base checkbox rule */
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  background: var(--color-surface-lowest);
+  box-shadow: var(--shadow-ring), var(--shadow-inset);
+  transition: background 0.2s;
+
+  &:hover {
+    box-shadow: var(--shadow-ring), var(--shadow-inset);
+    &::before {
+      background: var(--color-accent);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Thumb */
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--switch-padding);
+    left: var(--switch-padding);
+    width: calc(var(--switch-height) - var(--switch-padding) * 2);
+    height: calc(var(--switch-height) - var(--switch-padding) * 2);
+    border-radius: 50%;
+    background: var(--color-surface-high);
+    box-shadow: var(--shadow-raised);
+    transition: all var(--transition-fast);
+  }
+
+  /* Suppress the checkmark ::after from the base checkbox rule */
+  &:checked::after {
+    content: none;
+  }
+
+  &:checked {
+    background: var(--color-accent);
+    &::before {
+      background: var(--color-surface-high);
+      transform: translateX(calc(var(--switch-width) - var(--switch-height)));
+    }
+  }
+
+  &:checked:hover {
+    &::before {
+      background: var(--color-on-cce) !important;
+    }
+  }
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  /* Webkit/Blink */
+  appearance: none;
+  cursor: pointer;
+  /* Dimensions */
+  height: var(--space-half);
+  /* Adjust track height */
+  width: 100%;
+  border-radius: 9999px;
+  outline: none;
+  padding: 0;
+  box-shadow: var(--shadow-inset);
+
+  padding: 0;
+  /* Crucial: allows thumb to touch edges */
+  border: var(--border);
+  /* Crucial: removes text-input borders */
+  background-origin: border-box;
+
+  /*
+   * THE FILL MAGIC
+   * uses the --slider-value variable passed in the style attribute
+   */
+  background: linear-gradient(
+    to right,
+    var(--color-background, var(--color-accent)) 0%,
+    var(--color-background, var(--color-accent)) var(--slider-value),
+    var(--color-red, var(--color-surface)) var(--slider-value),
+    var(--color-red, var(--color-surface)) 100%
+  );
+  background: var(--color-surface-lowest);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: calc(var(--space-half) + 2px);
+  width: calc(var(--space-half) + 2px);
+  border-radius: 50%;
+  border: none;
+  transition: var(--transition-fast);
+
+  background: var(--color-surface-high);
+  /* Raised effect for better grip affordance */
+  box-shadow: var(--shadow-raised);
+
+  /* Vertical alignment logic for Webkit:
+     (Thumb Height / 2) - (Track Height / 2) * -1
+  */
+  margin-top: 0;
+}
+
+input[type="range"]:hover::-webkit-slider-thumb {
+  background: var(--color-accent);
+  box-shadow: var(--shadow-raised), var(--shadow-lg);
+  cursor: pointer;
+}