@stnd/styles 0.5.0

package/_standard-99-debug.scss

@@ -0,0 +1,474 @@
+@use "standard-00-variables" as *;
+
+/**
+ * @component Debug System
+ * @category Development
+ * @description Development debugging utilities for visualizing grid layouts,
+ * baseline rhythm, reading zones, and typography processing. Activated by adding
+ * .stnd-debug class to body or parent element. Shows overlays for grid columns,
+ * baseline rhythm, reading layout zones, and other layout metrics. Essential for
+ * design system development and layout debugging. Automatically hidden in print.
+ *
+ * @prop {class} .stnd-debug Enable debug visualization
+ * @prop {overlay} baseline-grid Horizontal baseline grid overlay
+ * @prop {overlay} grid-columns Vertical grid column overlay
+ * @prop {overlay} reading-zones Reading layout zone visualization
+ * @prop {overlay} rhythm-spacing Margin/spacing outline visualization
+ * @prop {indicator} breakpoint-indicator Current responsive breakpoint
+ * @prop {indicator} debug-panel Fixed info panel with metrics
+ *
+ * @example
+ * // Enable debug mode on page
+ * <body class="stnd-debug">
+ *   <!-- All debug overlays visible -->
+ * </body>
+ *
+ * // Debug specific grid
+ * <div class="grid stnd-debug">
+ *   <div class="col-4">Shows grid overlay</div>
+ * </div>
+ *
+ * // Debug reading layout zones
+ * <article class="reading stnd-debug">
+ *   <div class="accent">Zone highlighted</div>
+ * </article>
+ *
+ * @since 0.1.0
+ */
+
+/* =========================== */
+/* STANDARD DEBUG SYSTEM       */
+/* =========================== */
+
+#{$stnd-theme-scope} {
+  --stnd-lab-bg: color-mix(
+    in srgb,
+    var(--color-dark-background) 90%,
+    var(--color-dark-foreground)
+  );
+  --stnd-lab-text: color-mix(
+    in srgb,
+    var(--color-dark-background) 10%,
+    var(--color-dark-foreground)
+  );
+  --stnd-lab-text-size: 12px;
+  --stnd-lab-opacity: 1;
+  --stnd-lab-accent: var(--color-accent);
+  --stnd-lab-border: var(--border);
+  --stnd-lab-shadow: var(--shadow);
+  --stnd-lab-blur: var(--filter-blur);
+  --stnd-lab-font-family: var(--font-monospace);
+}
+
+/* Single class to enable all debug features */
+.debug {
+  display: none;
+}
+
+.stnd-debug .debug {
+  display: inherit;
+}
+
+#{$stnd-theme-scope} {
+  --debug-opacity: 50%;
+  --debug-outline-opacity: 75%;
+  --debug-color: var(--color-cyan);
+}
+
+/* Baseline Grid Overlay */
+.stnd-debug::before {
+  --color-grid: var(--color-cyan);
+  --percent-grid: calc(var(--debug-opacity) / 8);
+  --grid-unit: 1rlh;
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent calc(var(--grid-unit) - 1px),
+    color-mix(in srgb, var(--color-grid) var(--percent-grid), transparent)
+      calc(var(--grid-unit) - 1px),
+    color-mix(in srgb, var(--color-grid) var(--percent-grid), transparent)
+      var(--grid-unit)
+  );
+  pointer-events: none;
+  z-index: 10000;
+}
+
+html.stnd-debug .rhythm > * {
+  position: relative;
+}
+html.stnd-debug .rhythm > * + *::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--radius);
+  top: calc(var(--gap) * -0.5);
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--color-cyan) 5%, transparent);
+  outline: 1px dashed color-mix(in srgb, var(--color-cyan) 25%, transparent);
+
+  font-family: var(--font-monospace);
+  font-size: var(--size-sm);
+  z-index: 1; // Push it behind the content
+  pointer-events: none; // So it doesn't interfere with interactions
+}
+
+.stnd-debug .rhythm > * + *::after {
+  top: calc(var(--gap) * -0.5);
+}
+.stnd-debug .rhythm > * + :is(#{$rhythm-double-tags})::after {
+  top: calc(var(--gap) * -1);
+}
+
+.stnd-debug
+  .rhythm
+  > :is(#{$rhythm-double-tags})
+  + :is(#{$rhythm-double-tags})::after {
+  top: calc(var(--gap) * -0.5);
+}
+
+.stnd-debug .rhythm > :is(#{$rhythm-double-tags}) + *::after {
+  top: calc(var(--gap) * -1);
+}
+
+.stnd-debug .rhythm > * + :is(h1, h2)::after {
+  top: calc(var(--gap) * -3);
+}
+.stnd-debug .rhythm > * + :is(h3, h4, h5, h6)::after {
+  top: calc(var(--gap) * -2);
+}
+.stnd-debug .rhythm > :is(h1, h2, h3, h4) + :is(h2, h3, h4, h5, h6)::after {
+  top: calc(var(--gap) * -1);
+}
+.stnd-debug .rhythm > :is(h1, h2, h3) + *::after {
+  top: calc(var(--gap) * -1);
+}
+
+.stnd-debug .rhythm > :is(h4, h5, h6) + *::after {
+  top: calc(var(--gap) * -0.5);
+}
+/*
+.stnd-debug
+  .rhythm
+  > :is(#{$rhythm-double-tags})
+  + :is(#{$rhythm-double-tags})::after {
+  top: calc(var(--space) * -1);
+  bottom: calc(var(--gap) * -1);
+  background: blue;
+}
+
+.stnd-debug .rhythm > :is(h1, h2, h3, h4, h5, h6)::after {
+  content: "";
+  position: absolute;
+  border-radius: var(--radius);
+  inset: calc(var(--gap) * -1); // Shorthand for top/right/bottom/left: 0
+  background: orange;
+  outline: 1px dashed
+    color-mix(
+      in srgb,
+      var(--color-cyan) calc(var(--debug-opacity) / 1.2),
+      transparent
+    );
+  z-index: -1; // Push it behind the content
+  pointer-events: none; // So it doesn't interfere with interactions
+}
+*/
+
+/* Text*/
+.stnd-debug .rhythm > *::before {
+  content: attr(class);
+  position: absolute;
+  top: 0;
+  left: calc(var(--gap) * -1);
+  transform: translateX(-100%);
+  color: var(--color-cyan);
+  opacity: var(--debug-opacity);
+  font-family: var(--font-monospace);
+  font-size: var(--size-sm);
+}
+.stnd-debug {
+  h1::before {
+    content: "h1" !important;
+  }
+  h2::before {
+    content: "h2" !important;
+  }
+  h3::before {
+    content: "h3" !important;
+  }
+  h4::before {
+    content: "h4" !important;
+  }
+  h5::before {
+    content: "h5" !important;
+  }
+  h6::before {
+    content: "h6" !important;
+  }
+  hr::before {
+    content: "hr" !important;
+  }
+}
+
+/* Reading Layout Debug - show zones */
+.stnd-debug .prose {
+  position: relative;
+}
+
+.stnd-debug .grid-debug-overlay {
+  position: absolute !important;
+  inset: 0;
+  display: grid;
+  grid-template-columns: inherit;
+  pointer-events: none;
+  z-index: 9999;
+  grid-column: hero;
+
+  span:nth-child(1) {
+    grid-column: hero-start / feature-start;
+  }
+  span:nth-child(2) {
+    grid-column: feature-start / editorial-start;
+    border-inline-start: 1px dotted
+      color-mix(
+        in srgb,
+        var(--debug-color) calc(var(--debug-opacity) / 2),
+        transparent
+      );
+  }
+  span:nth-child(3) {
+    grid-column: editorial-start / content-start;
+    border-inline-start: 1px dotted
+      color-mix(
+        in srgb,
+        var(--debug-color) calc(var(--debug-opacity) / 2),
+        transparent
+      );
+  }
+  span:nth-child(4) {
+    grid-column: content;
+    outline: 1px dotted
+      color-mix(
+        in srgb,
+        var(--debug-color) calc(var(--debug-opacity) / 2),
+        transparent
+      );
+  }
+  span:nth-child(5) {
+    grid-column: content-end / editorial-end;
+    border-inline-end: 1px dotted
+      color-mix(
+        in srgb,
+        var(--debug-color) calc(var(--debug-opacity) / 2),
+        transparent
+      );
+  }
+  span:nth-child(6) {
+    grid-column: editorial-end / feature-end;
+    border-inline-end: 1px dotted
+      color-mix(
+        in srgb,
+        var(--debug-color) calc(var(--debug-opacity) / 2),
+        transparent
+      );
+  }
+  span:nth-child(7) {
+    grid-column: feature-end / hero-end;
+  }
+}
+
+/* Grid item debugging */
+/* Grid Column Overlay (only for .grid inside debug) */
+.stnd-debug .grid,
+.stnd-debug .grid-2,
+.stnd-debug .grid-3,
+.stnd-debug .grid-4,
+.stnd-debug .grid-5,
+.stnd-debug .grid-6,
+.stnd-debug .grid-7,
+.stnd-debug .grid-8,
+.stnd-debug .grid-9,
+.stnd-debug .grid-10,
+.stnd-debug .grid-11,
+.stnd-debug .grid-12 {
+  position: relative;
+}
+.stnd-debug .grid::after,
+.stnd-debug .grid-2::after,
+.stnd-debug .grid-3::after,
+.stnd-debug .grid-4::after,
+.stnd-debug .grid-5::after,
+.stnd-debug .grid-6::after,
+.stnd-debug .grid-7::after,
+.stnd-debug .grid-8::after,
+.stnd-debug .grid-9::after,
+.stnd-debug .grid-10::after,
+.stnd-debug .grid-11::after,
+.stnd-debug .grid-12::after {
+  content: attr(class);
+  position: absolute !important;
+  inset: 0;
+  color: var(--debug-color);
+  font-size: var(--size-xs);
+  font-family: var(--font-monospace);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols), 1fr);
+  column-gap: var(--gap-grid);
+  pointer-events: none;
+  z-index: var(--z-tooltip);
+  opacity: var(--debug-opacity);
+  background-image: repeating-linear-gradient(
+    to right,
+    color-mix(in srgb, var(--debug-color) 10%, transparent) 0,
+    color-mix(in srgb, var(--debug-color) 10%, transparent)
+      calc(
+        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols)
+      ),
+    transparent
+      calc(
+        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols)
+      ),
+    transparent
+      calc(
+        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols) +
+          var(--gap-grid)
+      )
+  );
+}
+
+.stnd-debug .grid::after {
+  --grid-cols: 12;
+}
+.stnd-debug .grid-2::after {
+  --grid-cols: 2;
+}
+.stnd-debug .grid-3::after {
+  --grid-cols: 3;
+}
+.stnd-debug .grid-4::after {
+  --grid-cols: 4;
+}
+.stnd-debug .grid-5::after {
+  --grid-cols: 5;
+}
+.stnd-debug .grid-6::after {
+  --grid-cols: 6;
+}
+.stnd-debug .grid-7::after {
+  --grid-cols: 7;
+}
+.stnd-debug .grid-8::after {
+  --grid-cols: 8;
+}
+.stnd-debug .grid-9::after {
+  --grid-cols: 9;
+}
+.stnd-debug .grid-10::after {
+  --grid-cols: 10;
+}
+.stnd-debug .grid-11::after {
+  --grid-cols: 11;
+}
+.stnd-debug .grid-12::after {
+  --grid-cols: 12;
+}
+
+.stnd-debug .grid > *,
+.stnd-debug .grid-2 > *,
+.stnd-debug .grid-3 > *,
+.stnd-debug .grid-4 > *,
+.stnd-debug .grid-5 > *,
+.stnd-debug .grid-6 > *,
+.stnd-debug .grid-7 > *,
+.stnd-debug .grid-8 > *,
+.stnd-debug .grid-9 > *,
+.stnd-debug .grid-10 > *,
+.stnd-debug .grid-11 > *,
+.stnd-debug .grid-12 > * {
+  outline: 1px dashed
+    color-mix(
+      in srgb,
+      var(--debug-color) calc(var(--debug-opacity) / 1.2),
+      transparent
+    );
+  outline-offset: -1px;
+  position: relative;
+}
+
+.stnd-debug .grid > *::before,
+.stnd-debug .grid-2 > *::before,
+.stnd-debug .grid-3 > *::before,
+.stnd-debug .grid-4 > *::before,
+.stnd-debug .grid-5 > *::before,
+.stnd-debug .grid-6 > *::before,
+.stnd-debug .grid-7 > *::before,
+.stnd-debug .grid-8 > *::before,
+.stnd-debug .grid-9 > *::before,
+.stnd-debug .grid-10 > *::before,
+.stnd-debug .grid-11 > *::before,
+.stnd-debug .grid-12 > *::before {
+  content: attr(class);
+  position: absolute;
+  top: calc(var(--space) * -1);
+  left: var(--space);
+  color: var(--debug-color);
+  font-size: var(--size-xs);
+  font-family: var(--font-monospace);
+  pointer-events: none;
+  opacity: var(--debug-opacity);
+  z-index: var(--z-tooltip);
+  white-space: nowrap;
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Free column debug */
+.stnd-debug .free-col::after {
+  content: "start: " var(--start) " / span: " var(--span);
+  position: absolute;
+  bottom: var(--space);
+  left: var(--space);
+  color: var(--debug-color);
+  opacity: var(--debug-opacity);
+  font-size: var(--size-xs);
+  font-family: var(--font-monospace);
+  padding: var(--space) var(--space);
+  border-radius: var(--radius);
+  pointer-events: none;
+  opacity: var(--debug-opacity);
+  z-index: var(--z-tooltip);
+  white-space: nowrap;
+}
+
+@media (max-width: #{$small}) {
+  .stnd-debug::after {
+    content: "Debug : " attr(data-standard-version) " : sm (<#{$small})";
+  }
+}
+
+@media (max-width: 600px) {
+  .stnd-debug::after {
+    content: "Debug : " attr(data-standard-version) " : xs (<600px)";
+  }
+}
+
+@media (min-width: #{$large}) {
+  .stnd-debug::after {
+    content: "Debug : " attr(data-standard-version) " : lg (≥#{$large})";
+  }
+}
+
+/* Print debug styles */
+@media print {
+  .stnd-debug::before,
+  .stnd-debug::after,
+  .stnd-debug .grid::after,
+  .stnd-debug .prose::after,
+  body.stnd-debug::before {
+    display: none !important;
+  }
+}

package/dist/obsidian.css

@@ -0,0 +1,31 @@
+/*!
+ * Standard Design — Obsidian Theme Core
+ *
+ * This entry point is specifically for the Obsidian plugin.
+ * It ONLY includes the core CSS variables (tokens, colors) inside :root,
+ * without including any of the global element resets (*, html, body) 
+ * or layout/typography element selectors that would destroy Obsidian's UI.
+ *
+ * @license MIT
+ * @package @stnd/styles
+ *//*!
+ * Standard Design — Obsidian Theme Core
+ *
+ * This entry point is specifically for the Obsidian plugin.
+ * It ONLY includes the core CSS variables (tokens, colors) inside :root,
+ * without including any of the global element resets (*, html, body) 
+ * or layout/typography element selectors that would destroy Obsidian's UI.
+ *
+ * @license MIT
+ * @package @stnd/styles
+ */:root{--color-light-background: white;--color-light-foreground: #262626;--tooltip-background: #1a1a1a;--tooltip-text: #ffffff;--font-size: 1rem;--optical-ratio: var(--ratio-silver);--line-height: var(--optical-ratio);--baseline: 1rlh;--trim: calc(var(--leading) / 2);--leading: calc((var(--line-height) - 1) * var(--font-size));--nl: calc(var(--leading) * var(--line-height));--gap: var(--space);--gap-body: var(--space-2);--gap-header: var(--space-8);--gap-footer: calc(var(--gap-body) * 1.5);--gap-grid-img: var(--space-d4);--gap-multiplicator: 2;--breakpoint-mobile: 600px;--breakpoint-sm: 768px;--breakpoint-lg: 1024px;--breakpoint-wide: 1440px;--content-width: min(var(--line-width), 100%);--content-width-sm: max(calc(var(--space-2) - var(--space)), var(--space));--content-width-editorial: minmax(0, var(--space-2));--content-width-feature: minmax(0, var(--space-4));--content-width-hero: minmax(0, 1fr);--filter-blur: blur(8px);--filter-glass: blur(20px);--stroke-width: max(1px, 0.06rem);--stroke-width-lg: calc(var(--stroke-width) * 2);--radius: var(--corner, var(--leading));--radius-sm: min(8px, var(--radius));--ratio-golden: 1.618;--ratio-silver: 1.414;--ratio-halfstep: 1.272;--ratio-quarterstep: 1.128;--ratio-eighthstep: 1.062;--line-width-xs: 24rem;--line-width-sm: 32rem;--line-width-md: 42rem;--line-width-lg: 50rem;--line-width-xl: 60rem;--line-width-full: calc(100vw - (var(--space) * 2));--line-width: var(--measure, var(--line-width-md));--line-height-compact: calc(1 + (var(--line-height) - 1) / 2);--line-height-relaxed: calc(1 + (var(--line-height) - 1) * 1.5);--max-width: 900px;--body-max-width: var(--max-width);--prose-max-width: var(--max-width);--tracking-tight: -0.01em;--tracking-neutral: 0em;--tracking-open: 0.01em;--space: var(--baseline);--space-half: calc(var(--baseline)/2);--space-d1: calc(var(--space) / 1);--space-1: calc(var(--space) * 1);--space-d2: calc(var(--space) / 2);--space-2: calc(var(--space) * 2);--space-d3: calc(var(--space) / 3);--space-3: calc(var(--space) * 3);--space-d4: calc(var(--space) / 4);--space-4: calc(var(--space) * 4);--space-d5: calc(var(--space) / 5);--space-5: calc(var(--space) * 5);--space-d6: calc(var(--space) / 6);--space-6: calc(var(--space) * 6);--space-d7: calc(var(--space) / 7);--space-7: calc(var(--space) * 7);--space-d8: calc(var(--space) / 8);--space-8: calc(var(--space) * 8);--space-d9: calc(var(--space) / 9);--space-9: calc(var(--space) * 9);--space-d10: calc(var(--space) / 10);--space-10: calc(var(--space) * 10);--space-d11: calc(var(--space) / 11);--space-11: calc(var(--space) * 11);--space-d12: calc(var(--space) / 12);--space-12: calc(var(--space) * 12);--scale-d5: max(calc(var(--font-size) / (var(--optical-ratio) * var(--optical-ratio))), 11px);--scale-d4: max( calc(var(--font-size) / (var(--optical-ratio) * 1.25)), 11px );--scale-d3: max(calc(var(--font-size) / var(--optical-ratio)), 11px);--scale-d2: max( calc(var(--font-size) / (1 + (var(--optical-ratio) - 1) * 0.5)), 11px );--scale: var(--font-size);--scale-2: calc(var(--font-size) * var(--optical-ratio));--scale-3: calc(var(--scale-2) * var(--optical-ratio));--scale-4: calc(var(--scale-3) * var(--optical-ratio));--scale-5: calc(var(--scale-4) * var(--optical-ratio));--scale-6: calc(var(--scale-5) * var(--optical-ratio));--scale-7: calc(var(--scale-6) * var(--optical-ratio));--scale-8: calc(var(--scale-7) * var(--optical-ratio));--size-3xs: var(--scale-d5);--size-2xs: var(--scale-d4);--size-xs: var(--scale-d3);--size-sm: var(--scale-d2);--size-base: var(--scale);--size-lg: var(--scale-2);--size-xl: var(--scale-3);--size-2xl: var(--scale-4);--size-3xl: var(--scale-5);--size-4xl: var(--scale-6);--size-5xl: var(--scale-7);--size-6xl: var(--scale-8);--font-size-mobile: 1.125rem;--gap-body-mobile: var(--space);--gap-mobile: var(--space);--gap-header-mobile: var(--space-4);--z-base: 1;--z-dropdown: 1100;--z-modal: 1200;--z-toast: 2000;--z-header: 900;--z-launher: 1000;--z-image-zoom: 9999;--ease-snappy: cubic-bezier(0.2, 0, 0, 1);--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);--ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);--ease-aggressive: cubic-bezier(0.7, 0, 0.3, 1);--ease-stnd: cubic-bezier(0, 0.3, 0, 1);--ease-stnd-heavy: cubic-bezier(0.5, 0, 0, 1);--ease-invisibolt: cubic-bezier(1, 0, 0, 1);--ease-friction: cubic-bezier(0.22, 1, 0.36, 1);--duration-instant: 100ms;--duration-fast: 350ms;--duration-standard: 500ms;--duration-slow: 1000ms;--transition-fast: 0.5s var(--ease-friction);--transition: 1s var(--ease-friction);--transition-slow: 2s var(--ease-friction);--ease-shape-snappy: cubic-bezier(0.2, 0, 0, 1);--ease-shape-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);--ease-shape-soft: cubic-bezier(0.16, 1, 0.3, 1);--ease-interaction: var(--duration-fast) var(--ease-shape-snappy);--ease-feedback: var(--duration-standard) var(--ease-shape-bounce);--ease-surface: var(--duration-slow) var(--ease-shape-soft);--ease-enter: var(--duration-fast) ease-out;--ease-exit: var(--duration-standard) ease-in}a,kbd,div,span,mark,callout-title::before,span,li::before,button,legend,fieldset,label,li,h1,h2,h3,h4,h5,h6,p:not(:has(img)),figcaption,dt,dd,label,td,th,.callout,code,.lined,aside,a{text-box-trim:trim-both;text-box-edge:cap alphabetic}@media only screen and (max-width: 768px){:root{--gap-body: var(--gap-body-mobile) !important;--gap-header: var(--gap-header-mobile) !important;--gap: var(--gap-mobile) !important;--font-size: var(--font-size-mobile) !important}}:root{--ease-aggressive: cubic-bezier(0.7, 0, 0.3, 1)}::view-transition-old(root),::view-transition-new(root){animation-duration:500ms;animation-timing-function:var(--ease-friction)}::view-transition-old(root){animation-name:fade-out}::view-transition-new(root){animation-name:fade-in}@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}}/*!
+ * Standard Design — Obsidian Theme Core
+ *
+ * This entry point is specifically for the Obsidian plugin.
+ * It ONLY includes the core CSS variables (tokens, colors) inside :root,
+ * without including any of the global element resets (*, html, body) 
+ * or layout/typography element selectors that would destroy Obsidian's UI.
+ *
+ * @license MIT
+ * @package @stnd/styles
+ */:root{color-scheme:light dark;--color-dark-background: oklch( from var(--color-light-foreground) 0.2 /* deep dark — not void-black, just dark enough */ min(c, 0.02) /* muted — a whisper of the ink's chroma */ h /* same hue — warm ink → warm dark */ );--color-dark-foreground: oklch( from var(--color-light-foreground) 0.85 /* soft — easy on the eyes, not blinding white */ min(c, 0.04) /* gentle — enough color to feel the warmth */ h /* same hue — the vibe persists */ );--color-light-red: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 25) );--color-light-orange: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 55) );--color-light-yellow: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 85) );--color-light-green: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 145) );--color-light-cyan: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 190) );--color-light-blue: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 240) );--color-light-magenta: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 300) );--color-light-purple: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 270) );--color-light-pink: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h + 350) );--color-light-brown: oklch( from var(--color-light-foreground) clamp(0.65, l, 0.7) max(0.12, c) calc(h - 15) );--color-light-link: var(--color-light-accent);--color-light-accent-complementary: oklch( from var(--color-light-foreground) calc(l + (0.65 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 180) );--color-light-accent-analogous: oklch( from var(--color-light-foreground) calc(l + (0.65 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 30) );--color-light-accent-triadic: oklch( from var(--color-light-foreground) calc(l + (0.65 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 120) );--color-light-accent-auto: var(--color-light-accent-triadic);--color-light-accent: var(--color-light-accent-auto);--color-dark-red: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 25) );--color-dark-orange: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 55) );--color-dark-yellow: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 85) );--color-dark-green: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 145) );--color-dark-cyan: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 190) );--color-dark-blue: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 240) );--color-dark-magenta: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 300) );--color-dark-purple: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 270) );--color-dark-pink: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h + 350) );--color-dark-brown: oklch( from var(--color-dark-foreground) clamp(0.55, l, 0.7) max(0.12, c) calc(h - 15) );--color-dark-link: var(--color-dark-accent);--color-dark-accent-complementary: oklch( from var(--color-dark-foreground) calc(l + (0.7 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 180) );--color-dark-accent-analogous: oklch( from var(--color-dark-foreground) calc(l + (0.7 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 30) );--color-dark-accent-triadic: oklch( from var(--color-dark-foreground) calc(l + (0.7 - l) * min(1, c * 10)) min(0.2, c * 2) calc(h + 120) );--color-dark-accent-auto: var(--color-dark-accent-triadic);--color-dark-accent: var(--color-dark-accent-auto);--color-dark-on-accent: var(--color-dark-background);--color-light-muted: oklch(from var(--color-light-foreground) l c h / 0.6);--color-light-subtle: oklch(from var(--color-light-foreground) l c h / 0.4);--color-light-border: oklch(from var(--color-light-foreground) l c h / 0.1);--color-light-surface: color-mix( in srgb, var(--color-light-foreground) 3%, var(--color-light-background) );--color-light-on-accent: var(--color-light-background);--color-dark-muted: oklch(from var(--color-dark-foreground) l c h / 0.65);--color-dark-subtle: oklch(from var(--color-dark-foreground) l c h / 0.45);--color-dark-border: oklch( from var(--color-dark-background) calc(l * 0.25) calc(c * 0.5) calc(h - 15) / 0.25 );--color-dark-surface: color-mix( in srgb, var(--color-dark-foreground) 3%, var(--color-dark-background) );--color-light-shadow-base: oklch( from var(--color-light-foreground) calc(l * 0.25) calc(c * 0.5) calc(h - 15) / 0.075 );--color-light-highlight: oklch( from var(--color-light-background) min(1, calc(l + 0.05)) c h / 0.6 );--color-dark-shadow-base: oklch( from var(--color-dark-background) calc(l * 0.25) calc(c * 0.5) calc(h - 15) / 0.5 );--color-dark-highlight: oklch( from var(--color-dark-foreground) min(1, calc(l + 0.05)) c h / 0.11 );--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-header: var(--color-light-header, var(--color-foreground));--color-red: var(--color-light-red);--color-orange: var(--color-light-orange);--color-yellow: var(--color-light-yellow);--color-green: var(--color-light-green);--color-cyan: var(--color-light-cyan);--color-blue: var(--color-light-blue);--color-magenta: var(--color-light-magenta);--color-purple: var(--color-light-purple);--color-pink: var(--color-light-pink);--color-brown: var(--color-light-brown);--color-success: var(--color-green);--color-warning: var(--color-orange);--color-error: var(--color-red);--color-info: var(--color-blue);--color-link: var(--color-light-link);--color-italic: var(--color-light-italic, var(--color-foreground));--color-bold: var(--color-light-bold, var(--color-foreground));--color-on-accent: var(--color-background);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);--color-darker: oklch(from var(--color-dark) l c h / 0.15);--color-glass: oklch(from var(--color-background) l c h / 0.8);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--shadow-ambient: 0 1px 1px var(--color-shadow);--shadow-lift: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);--shadow-glow: 0 4px var(--space) oklch(from var(--color-shadow) l c h / 0.15);--shadow-inset: inset 0 1px 3px var(--color-shadow), inset 0 -1px 0 0 var(--color-highlight);--shadow-ring: inset 0px 1px 1px var(--color-border), inset 1px 0px 1px var(--color-border), inset -1px 0px 1px var(--color-border), inset 0px -1px 1px var(--color-border);--shadow-raised: inset 0 1px 0 0 var(--color-highlight), 0 0 0 1px var(--color-border), var(--shadow-ambient);--shadow: var(--shadow-ambient), var(--shadow-ambient);--shadow-lg: var(--shadow-ambient), var(--shadow-lift);--shadow-xl: var(--shadow-ambient), var(--shadow-lift), var(--shadow-glow);--color-surface-low: color-mix( in srgb, var(--color-foreground) 3%, var(--color-surface) );--color-surface-lowest: color-mix( in srgb, var(--color-foreground) 3%, var(--color-surface-low) );--color-surface-lower: color-mix( in srgb, var(--color-foreground) 3%, transparent );--color-surface-high: color-mix(in srgb, white 50%, var(--color-surface));--color-surface-highest: color-mix( in srgb, white 50%, var(--color-surface-high) );--color-surface-higher: color-mix(in srgb, white 50%, transparent);--border: 0 solid transparent;--border-transparent: var(--stroke-width) solid transparent;--border-accent: var(--stroke-width) solid oklch(from var(--color-accent) l c h / 0.07);--border: none}@media(prefers-color-scheme: dark){:root{--color-background: var(--color-dark-background);--color-foreground: var(--color-dark-foreground);--color-accent: var(--color-dark-accent);--color-light: var(--color-dark-foreground);--color-dark: var(--color-dark-background);--color-header: var(--color-dark-header, var(--color-foreground));--color-on-accent: var(--color-background);--color-red: var(--color-dark-red);--color-orange: var(--color-dark-orange);--color-yellow: var(--color-dark-yellow);--color-green: var(--color-dark-green);--color-cyan: var(--color-dark-cyan);--color-blue: var(--color-dark-blue);--color-magenta: var(--color-dark-magenta);--color-link: var(--color-dark-link);--color-italic: var(--color-dark-italic, var(--color-foreground));--color-bold: var(--color-dark-bold, var(--color-foreground));--color-subtle: var(--color-dark-subtle);--color-muted: var(--color-dark-muted);--color-border: var(--color-dark-border);--color-surface: var(--color-dark-surface);--color-shadow: var(--color-dark-shadow-base);--color-highlight: var(--color-dark-highlight);--shadow-xl: var(--shadow-glow);--color-surface-low: color-mix(in srgb, black 3%, var(--color-surface));--color-surface-lowest: color-mix( in srgb, black 7%, var(--color-surface-low) );--color-surface-lower: color-mix(in srgb, black 7%, transparent);--color-surface-high: color-mix( in srgb, var(--color-dark-foreground) 3%, var(--color-surface) );--color-surface-highest: color-mix( in srgb, var(--color-dark-foreground) 3%, var(--color-surface-high) );--color-surface-higher: color-mix( in srgb, var(--color-dark-foreground) 3%, transparent )}}.theme-light{--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);color-scheme:light}.theme-dark{--color-background: var(--color-dark-background);--color-foreground: var(--color-dark-foreground);--color-accent: var(--color-dark-accent);--color-muted: var(--color-dark-muted);--color-subtle: var(--color-dark-subtle);--color-border: var(--color-dark-border);--color-surface: var(--color-dark-surface);--color-shadow: var(--color-dark-shadow-base);--color-highlight: var(--color-dark-highlight);--color-light: var(--color-dark-foreground);--color-dark: var(--color-dark-background);color-scheme:dark}[data-theme]{--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);color-scheme:light;--color-header: var(--color-light-header, var(--color-foreground));--color-red: var(--color-light-red);--color-orange: var(--color-light-orange);--color-yellow: var(--color-light-yellow);--color-green: var(--color-light-green);--color-cyan: var(--color-light-cyan);--color-blue: var(--color-light-blue);--color-magenta: var(--color-light-magenta);--color-purple: var(--color-light-purple);--color-pink: var(--color-light-pink);--color-brown: var(--color-light-brown);--color-link: var(--color-light-link);--color-italic: var(--color-light-italic, var(--color-foreground));--color-bold: var(--color-light-bold, var(--color-foreground))}@media(prefers-color-scheme: dark){[data-theme]:not([data-color-mode=light]){--color-background: var(--color-dark-background);--color-foreground: var(--color-dark-foreground);--color-accent: var(--color-dark-accent);--color-muted: var(--color-dark-muted);--color-subtle: var(--color-dark-subtle);--color-border: var(--color-dark-border);--color-surface: var(--color-dark-surface);--color-shadow: var(--color-dark-shadow-base);--color-highlight: var(--color-dark-highlight);--color-light: var(--color-dark-foreground);--color-dark: var(--color-dark-background);color-scheme:dark;--color-header: var(--color-dark-header, var(--color-foreground));--color-red: var(--color-dark-red);--color-orange: var(--color-dark-orange);--color-yellow: var(--color-dark-yellow);--color-green: var(--color-dark-green);--color-cyan: var(--color-dark-cyan);--color-blue: var(--color-dark-blue);--color-magenta: var(--color-dark-magenta);--color-link: var(--color-dark-link);--color-italic: var(--color-dark-italic, var(--color-foreground));--color-bold: var(--color-dark-bold, var(--color-foreground))}}[data-color-mode=dark] [data-theme],[data-color-mode=dark][data-theme]{--color-background: var(--color-dark-background);--color-foreground: var(--color-dark-foreground);--color-accent: var(--color-dark-accent);--color-muted: var(--color-dark-muted);--color-subtle: var(--color-dark-subtle);--color-border: var(--color-dark-border);--color-surface: var(--color-dark-surface);--color-shadow: var(--color-dark-shadow-base);--color-highlight: var(--color-dark-highlight);--color-light: var(--color-dark-foreground);--color-dark: var(--color-dark-background);color-scheme:dark;--color-header: var(--color-dark-header, var(--color-foreground));--color-red: var(--color-dark-red);--color-orange: var(--color-dark-orange);--color-yellow: var(--color-dark-yellow);--color-green: var(--color-dark-green);--color-cyan: var(--color-dark-cyan);--color-blue: var(--color-dark-blue);--color-magenta: var(--color-dark-magenta);--color-link: var(--color-dark-link);--color-italic: var(--color-dark-italic, var(--color-foreground));--color-bold: var(--color-dark-bold, var(--color-foreground))}[data-color-mode=light] [data-theme],[data-color-mode=light][data-theme]{--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);color-scheme:light;--color-header: var(--color-light-header, var(--color-foreground));--color-red: var(--color-light-red);--color-orange: var(--color-light-orange);--color-yellow: var(--color-light-yellow);--color-green: var(--color-light-green);--color-cyan: var(--color-light-cyan);--color-blue: var(--color-light-blue);--color-magenta: var(--color-light-magenta);--color-link: var(--color-light-link);--color-italic: var(--color-light-italic, var(--color-foreground));--color-bold: var(--color-light-bold, var(--color-foreground))}@supports not (color: oklch(50% 0.2 180deg)){:root{--color-dark-background: #232323;--color-dark-foreground: #d0d0d0;--color-light-red: #c44040;--color-light-orange: #b87020;--color-light-yellow: #9a8520;--color-light-green: #3a8a50;--color-light-cyan: #2a8a8a;--color-light-blue: #3a60b0;--color-light-magenta: #9040a0;--color-light-accent: #2a8a8a;--color-dark-red: #e06060;--color-dark-orange: #d09040;--color-dark-yellow: #c0a840;--color-dark-green: #60b070;--color-dark-cyan: #50b0b0;--color-dark-blue: #6080d0;--color-dark-magenta: #b060c0;--color-dark-accent: #50b0b0;--color-muted: rgba(0, 0, 0, 0.6);--color-subtle: rgba(0, 0, 0, 0.4);--color-border: rgba(0, 0, 0, 0.1);--color-surface: rgba(0, 0, 0, 0.03);--color-shadow: rgba(0, 0, 0, 0.25);--color-highlight: rgba(255, 255, 255, 0.6)}}@media(forced-colors: active){:root{--color-background: Canvas;--color-foreground: CanvasText;--color-accent: Highlight;--color-border: CanvasText;--color-muted: GrayText}}.inverse{--color-background: var(--color-dark-background);--color-foreground: var(--color-dark-foreground);--color-accent: var(--color-dark-accent);--color-muted: var(--color-dark-muted);--color-subtle: var(--color-dark-subtle);--color-border: var(--color-dark-border);--color-surface: var(--color-dark-surface);--color-shadow: var(--color-dark-shadow-base);--color-highlight: var(--color-dark-highlight);--color-light: var(--color-dark-foreground);--color-dark: var(--color-dark-background);color-scheme:dark}@media(prefers-color-scheme: dark){:root:not([data-color-mode=light]) .inverse{--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);color-scheme:light}}:root[data-color-mode=dark] .inverse{--color-background: var(--color-light-background);--color-foreground: var(--color-light-foreground);--color-accent: var(--color-light-accent);--color-muted: var(--color-light-muted);--color-subtle: var(--color-light-subtle);--color-border: var(--color-light-border);--color-surface: var(--color-light-surface);--color-shadow: var(--color-light-shadow-base);--color-highlight: var(--color-light-highlight);--color-light: var(--color-light-background);--color-dark: var(--color-light-foreground);color-scheme:light}/*# sourceMappingURL=obsidian.css.map */

package/dist/obsidian.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../obsidian.scss","../_standard-01-token.scss","../_standard-02-color.scss"],"names":[],"mappings":"CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCSA,MAoBE,gCACA,kCAKA,8BACA,wBAGA,kBACA,qCACA,oCAGA,iBAEA,iCAEA,6DACA,gDAGA,oBACA,2BACA,6BACA,0CACA,gCACA,uBAEA,2BACA,uBACA,wBACA,0BAEA,8CACA,2EACA,qDACA,mDACA,qCAGA,yBACA,2BACA,kCACA,iDACA,wCACA,qCAGA,sBACA,sBACA,wBACA,2BACA,0BAGA,uBACA,uBACA,uBACA,uBACA,uBACA,oDACA,mDAEA,8DACA,gEAEA,mBAGA,mCACA,oCAEA,0BACA,wBACA,wBAGA,yBACA,sCAGE,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,mCACA,kCADA,qCACA,oCADA,qCACA,oCADA,qCACA,oCAIF,8FACA,gFAIA,qEACA,yFAIA,0BACA,yDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDAGA,4BACA,4BACA,2BACA,2BACA,0BACA,0BACA,0BACA,2BACA,2BACA,2BACA,2BACA,2BAGA,6BACA,gCACA,2BACA,oCAGA,YACA,mBACA,gBACA,gBACA,gBACA,kBACA,qBAGA,0CAGA,8CAGA,2CAGA,mDAGA,gDAEA,wCACA,8CAEA,4CAGA,gDA2BA,0BACA,uBACA,2BACA,wBAEA,6CACA,sCACA,2CAGA,gDACA,uDACA,iDAGA,kEAGA,mEAGA,4DAGA,4CACA,8CAGF,uLAEE,wBACA,6BAIF,0CACE,MACE,8CACA,kDACA,oCACA,iDAIJ,MACE,gDAGF,wDAEE,yBACA,+CAIF,4BACE,wBAGF,4BACE,uBAGF,oBACE,GACE,WAIJ,mBACE,KACE,WD5RJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GEwCA,MAEE,wBAgBA,6NAQA,6NAoBA,6GAKA,gHAKA,gHAKA,gHAKA,+GAKA,+GAKA,kHAKA,iHAKA,+GAKA,+GAMA,8CAIA,oJAMA,+IAMA,8IAQA,6DACA,qDAYA,2GAKA,8GAKA,8GAKA,8GAKA,6GAKA,6GAKA,gHAKA,+GAKA,6GAKA,6GAMA,4CAGA,iJAKA,4IAKA,2IAKA,2DACA,mDAEA,qDAQA,2EACA,4EACA,4EACA,6GAKA,uDAGA,0EACA,2EACA,iHAIA,0GAOA,yHAIA,sGAKA,qHAIA,qGAUA,kDACA,kDACA,0CAEA,mEAEA,oCACA,0CACA,0CACA,wCACA,sCACA,sCACA,4CACA,0CACA,sCACA,wCAGA,oCACA,qCACA,gCACA,gCAEA,sCACA,mEACA,+DACA,2CAOA,wCACA,0CACA,0CACA,4CAGA,6CACA,4CACA,2DAEA,+DASA,+CACA,gDAGA,gDAGA,sFAGA,+EACA,6FAEA,4KAOA,8GAKA,uDACA,uDACA,2EAGA,4FAKA,mGAKA,qFAMA,0EACA,oFAKA,mEAIA,8BACA,4DACA,wFAEA,eAUF,mCACE,MAEE,iDACA,iDACA,yCAGA,4CACA,2CAEA,kEACA,2CAGA,mCACA,yCACA,yCACA,uCACA,qCACA,qCACA,2CAEA,qCACA,kEACA,8DAGA,yCACA,uCACA,yCACA,2CAEA,8CACA,+CAEA,gCAIA,wEACA,iFAKA,iEAEA,kGAKA,0GAKA,4FA2CJ,aA7BE,kDACA,kDACA,0CACA,wCACA,0CACA,0CACA,4CACA,+CACA,gDACA,6CACA,4CACA,mBAsBF,YAlBE,iDACA,iDACA,yCACA,uCACA,yCACA,yCACA,2CACA,8CACA,+CACA,4CACA,2CACA,kBAmBF,aA7CE,kDACA,kDACA,0CACA,wCACA,0CACA,0CACA,4CACA,+CACA,gDACA,6CACA,4CACA,mBAsCA,mEACA,oCACA,0CACA,0CACA,wCACA,sCACA,sCACA,4CACA,0CACA,sCACA,wCACA,sCACA,mEACA,+DAGF,mCACE,0CAnDA,iDACA,iDACA,yCACA,uCACA,yCACA,yCACA,2CACA,8CACA,+CACA,4CACA,2CACA,kBA2CE,kEACA,mCACA,yCACA,yCACA,uCACA,qCACA,qCACA,2CACA,qCACA,kEACA,+DAIJ,uEApEE,iDACA,iDACA,yCACA,uCACA,yCACA,yCACA,2CACA,8CACA,+CACA,4CACA,2CACA,kBA6DA,kEACA,mCACA,yCACA,yCACA,uCACA,qCACA,qCACA,2CACA,qCACA,kEACA,8DAGF,yEApGE,kDACA,kDACA,0CACA,wCACA,0CACA,0CACA,4CACA,+CACA,gDACA,6CACA,4CACA,mBA6FA,mEACA,oCACA,0CACA,0CACA,wCACA,sCACA,sCACA,4CACA,sCACA,mEACA,+DAQF,6CACE,MAEE,iCACA,iCAGA,2BACA,8BACA,8BACA,6BACA,4BACA,4BACA,+BACA,8BAGA,0BACA,6BACA,6BACA,4BACA,2BACA,2BACA,8BACA,6BAGA,kCACA,mCACA,mCACA,qCACA,oCACA,6CAOJ,8BACE,MACE,2BACA,+BACA,0BACA,2BACA,yBAKJ,SA7JE,iDACA,iDACA,yCACA,uCACA,yCACA,yCACA,2CACA,8CACA,+CACA,4CACA,2CACA,kBAuJA,mCACE,4CAlLF,kDACA,kDACA,0CACA,wCACA,0CACA,0CACA,4CACA,+CACA,gDACA,6CACA,4CACA,oBA6KA,qCAxLA,kDACA,kDACA,0CACA,wCACA,0CACA,0CACA,4CACA,+CACA,gDACA,6CACA,4CACA","file":"obsidian.css"}