@stnd/styles 0.5.0

package/_standard-14-analog.scss

@@ -0,0 +1,48 @@
+@use "standard-00-variables" as *;
+
+#{$stnd-theme-scope} {
+  /*
+      This data URI is an SVG with a <feTurbulence> filter.
+      baseFrequency='0.6' controls the "roughness" (higher = finer grain).
+      opacity='0.05' makes it subtle.
+   */
+  --effect-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
+  --effect-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
+  --effect-blend-mode: multiply;
+  --effect-opacity: 0.15;
+  --effect-ink: 0 0 1.12px oklch(from currentColor l c h / 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  #{$stnd-theme-scope}:not([data-color-mode="light"]) {
+    --effect-blend-mode: screen;
+    --effect-opacity: 0.05; /* Needs to be stronger to show on dark */
+  }
+}
+
+#{$stnd-theme-scope}[data-color-mode="dark"] {
+  --effect-blend-mode: screen;
+  --effect-opacity: 0.05;
+}
+
+/* 1. Global Atmosphere (The Desk) */
+html::after,
+.grain::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 9999; /* Top layer */
+  background-image: var(--effect-grain);
+  opacity: var(--effect-opacity);
+  mix-blend-mode: var(--effect-blend-mode);
+  pointer-events: none;
+  background-size: 200px 200px;
+}
+
+.prose *,
+.ink *,
+.note * {
+  /* filter: contrast(10%);*/
+  /* Blurs the edges slightly, then high contrast makes them crisp but organic */
+  text-shadow: var(--effect-ink);
+}

package/_standard-30-contrast.scss

@@ -0,0 +1,42 @@
+/* ===== ACCESSIBILITY SUPPORT ===== */
+/* High contrast mode support */
+@media (prefers-contrast: high), (prefers-contrast: more) {
+  #{$stnd-theme-scope} {
+    --color-light-foreground: black !important;
+    --color-light-background: white !important;
+    --color-dark-foreground: white !important;
+    --color-dark-background: black !important;
+    --color-surface: var(--color-background) !important;
+    --color-border: var(--color-foreground) !important;
+    --color-muted: var(--color-foreground) !important;
+    --color-subtle: var(--color-foreground) !important;
+    --shadow: 0 !important;
+  }
+
+  body::before,
+  body::after {
+    display: none;
+  }
+}
+
+/* Reduced motion + e-ink */
+@media (prefers-reduced-motion: reduce), (update: slow), (monochrome) {
+  #{$stnd-theme-scope} {
+    --transition: 0s;
+    --toast-progress-duration: 0.5s;
+    --toast-progress-easing: linear;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+
+  .toast-progress {
+    transition: width var(--toast-progress-duration)
+      var(--toast-progress-easing) !important;
+  }
+}

package/_standard-31-print.scss

@@ -0,0 +1,97 @@
+@media print {
+  #{$stnd-theme-scope} {
+    --color-foreground: black;
+    --color-background: white;
+    --color-surface: white;
+    --font-size: 0.925rem !important;
+    --optical-ratio: 1.125 !important;
+    --line-height: 1.4 !important;
+
+    --body-padding: var(--space-2);
+    --line-width: var(--line-width-full);
+    --gap: 0;
+    --shadow: 0;
+  }
+
+  html {
+
+    .no-print,
+    .no-print * {
+      /* Also hide children */
+      display: none !important;
+    }
+
+    header,
+    footer,
+    nav,
+    aside {
+      display: none !important;
+    }
+
+    /* Reset decorative styles */
+    * {
+      box-shadow: none !important;
+      text-shadow: none !important;
+    }
+
+    /* Show link URLs */
+    a[href^="http"]::after {
+      content: " (" attr(href) ")";
+      font-size: 0.8rem;
+      color: #666;
+    }
+
+    pre,
+    blockquote,
+    img {
+      break-inside: avoid;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-block: var(--space-2);
+      /* Remove !important */
+      break-after: avoid;
+      /* Keep with following content */
+    }
+
+    hr {
+      margin-block: var(--space);
+      /* Remove !important */
+    }
+
+    html::before,
+    html::after,
+    body::before,
+    body::after {
+      display: none;
+    }
+
+    body {
+      border: 0 !important;
+      background: transparent !important;
+      max-width: 100% !important;
+    }
+  }
+
+  /* Optimize for paper */
+  @page {
+    margin-top: 1.5cm;
+    margin-right: 1cm;
+    margin-bottom: 1.5cm;
+    margin-left: 1cm;
+    /*
+        @top-center {
+            content: "Document Title";
+        }
+        */
+
+    @bottom-right {
+      content: counter(page);
+    }
+  }
+}

package/_standard-32-eink.scss

@@ -0,0 +1,78 @@
+@media screen and (update: slow), (monochrome) {
+  #{$stnd-theme-scope} {
+    /* Force absolute contrast */
+    --color-foreground: black !important;
+    --color-background: white !important;
+    --color-accent: black !important; /* No orange on B&W screens */
+    --color-border: black !important;
+  }
+
+  body::before,
+  body::after {
+    display: none !important;
+  }
+  body * {
+    text-shadow: none !important;
+    background-blend-mode: normal !important;
+    filter: none !important;
+  }
+
+  body,
+  .markdown-preview-view,
+  .cm-scroller {
+    scroll-behavior: auto !important;
+  }
+
+  /* 2. Kill all motion */
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* 3. Replace Shadows with Borders */
+  /* Shadows look like dirty smudges on e-ink */
+  .card,
+  .button,
+  .image {
+    box-shadow: none !important;
+    border: 2px solid black !important;
+  }
+
+  /* 4. Thicken Typography */
+  /* E-ink anti-aliasing can make thin fonts disappear */
+  body {
+    -webkit-font-smoothing: none; /* Crisper text */
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 900 !important; /* Force heavy headers */
+  }
+
+  /* 5. Image Dithering Logic */
+  img {
+    filter: grayscale(100%) contrast(120%);
+  }
+
+  /* Stop caret blinking */
+  .cm-cursor {
+    animation-play-state: paused !important;
+    animation: none !important; /* disables blinking animation */
+    background-color: var(
+      --text-accent
+    ) !important; /* optional: keeps caret visible */
+  }
+
+  /* 6. Background Glass Override */
+  .bg-glass {
+    backdrop-filter: none !important;
+    background: var(--color-background) !important;
+  }
+}