lutra 0.1.15 → 0.1.17

package/dist/css/1-props.css

@@ -437,4 +437,26 @@
 @property --menu-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
 @property --menu-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --menu-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
-@property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+/**
+ * Table
+ */
+
+@property --table-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --table-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --table-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --table-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --table-cell-padding-inline { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --table-header-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
+
+@property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
+@property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
+
+@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }

package/dist/css/2-base.css

@@ -115,6 +115,10 @@
     --tooltip-border-radius: var(--border-radius-base);
     --tooltip-shadow-color: var(--shadow-color);
 
+    /* Table compound variables */
+    --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
+    --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+
     --mix-target: light-dark(black, white);
 }
 
@@ -133,6 +137,7 @@ body {
     min-width: 280px;
     width: 100%;
     min-height: 0;
+    scrollbar-gutter: stable;
 }
 
 body * {
@@ -176,12 +181,17 @@ input, textarea, select, .button, ::file-selector-button, .Field {
         outline-offset var(--transition-duration-fast) var(--transition-timing-function);
 }
 
-input:focus-visible, textarea:focus-visible, select:focus-visible {
+input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
     outline: var(--focus-ring-size) solid var(--focus-ring-color);
     outline-offset: var(--focus-ring-offset);
     border-color: var(--focus-ring-color);
 }
 
+/* Remove focus styles for mouse/touch users, keep for keyboard */
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
 input::placeholder, textarea::placeholder, select::placeholder {
     color: var(--field-placeholder-color);
 }

package/dist/css/4-layout.css

@@ -1,11 +1,19 @@
 @scope (.PageContent) to (.UIContent) {
+    /* Optional hyphenation when lang attribute is present */
+    :scope:where([lang]) {
+        hyphens: auto;
+        hyphenate-limit-chars: 6 3 3;
+    }
+
     /* Heading spacing for proper markdown hierarchy */
     h1, h2, h3, h4, h5, h6 {
         margin-block: var(--space-xl) var(--space-md);
+        text-wrap: balance;
+        scroll-margin-block-start: var(--space-xl);
         
         /* No top margin for first heading or when following another heading */
         &:first-child,
-        &:has(+ :is(h1, h2, h3, h4, h5, h6)) {
+        :is(h1, h2, h3, h4, h5, h6) + & {
             margin-block-start: 0;
         }
         
@@ -28,6 +36,7 @@
     /* Paragraph spacing with smart adjustments */
     p {
         margin-block: 0 var(--space-md);
+        text-wrap: pretty;
         
         /* Paragraphs with images get extra spacing */
         &:has(img) {
@@ -94,6 +103,8 @@
         margin-block: var(--space-xl);
         margin-inline: 0;
         color: var(--text-color-p-subtle);
+        text-wrap: pretty;
+        hanging-punctuation: first last;
         
         /* Nested blockquotes get reduced spacing */
         & blockquote {
@@ -122,6 +133,8 @@
         overflow-x: auto;
         line-height: var(--font-line-height);
         margin-block: var(--space-xl);
+        scrollbar-width: thin;
+        tab-size: 2;
         
         /* Code blocks following lists get extra spacing */
         :is(ul, ol) + & {
@@ -195,18 +208,35 @@
     }
 
     :is(th, td) {
-        padding: var(--space-xs);
-        border: var(--border-size-thin) var(--border-style) var(--border-color);
+        padding-block: var(--table-cell-padding-block);
+        padding-inline: var(--table-cell-padding-inline);
+        border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
         text-align: start;
-        
-        /* First/last cells get adjusted padding */
-        &:first-child { padding-inline-start: var(--space-md); }
-        &:last-child { padding-inline-end: var(--space-md); }
+        vertical-align: top;
+        color: var(--table-cell-color);
     }
 
     th {
-        background-color: var(--background-color-subtle);
-        font-weight: var(--font-weight-semibold);
+        background-color: var(--table-header-background);
+        color: var(--table-header-color);
+        font-weight: var(--table-header-font-weight);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+    
+    tbody tr {
+        background-color: var(--table-row-background);
+        
+        /* Zebra striping for readability */
+        &:nth-child(even) {
+            background-color: var(--table-row-background-even);
+        }
+        
+        /* Hover state for interactive tables */
+        &:hover {
+            background-color: var(--table-row-background-hover);
+        }
     }
 
     /* Smart image spacing */
@@ -230,6 +260,11 @@
         li & {
             margin-block: var(--space-xs);
         }
+        
+        /* Aspect ratio preservation during loading */
+        &[width][height] {
+            aspect-ratio: attr(width) / attr(height);
+        }
     }
 
     /* Figure with enhanced spacing logic */
@@ -293,6 +328,8 @@
     a {
         color: var(--link-color);
         text-decoration: var(--link-text-decoration);
+        text-decoration-skip-ink: auto;
+        text-underline-offset: 0.15em;
         
         /* Links in headings get subtle styling */
         :is(h1, h2, h3, h4, h5, h6) & {
@@ -308,8 +345,8 @@
             display: inline-block;
         }
         
-        /* External links (starting with http) */
-        &[href^="http"]::after {
+        /* External links (starting with http) - but not if they only contain an image */
+        &[href^="http"]:not(:has(> img:only-child))::after {
             content: " ↗";
             font-size: 0.8em;
             color: var(--text-color-p-subtler);

package/dist/css/themes/DefaultTheme.css

@@ -9,6 +9,35 @@
 
         --lutra-primary-color: oklch(0.5 var(--chroma) var(--hue));
 
+        /*
+         * Reusable surface colors (derived from primary)
+         * These provide consistent backgrounds across components
+         */
+
+        /* Very subtle, near-white surface (code, table headers) */
+        --theme-surface-subtlest: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 1.92) calc(c * 0.02) h),
+            oklch(from var(--lutra-primary-color) calc(l * 0.6) calc(c * 0.02) h)
+        );
+
+        /* Subtle surface for slight differentiation */
+        --theme-surface-subtle: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 1.96) calc(c * 0.01) h),
+            oklch(from var(--lutra-primary-color) calc(l * 0.65) calc(c * 0.01) h)
+        );
+
+        /* Interactive surface (hover states) */
+        --theme-surface-interactive: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 1.85) calc(c * 0.05) h),
+            oklch(from var(--lutra-primary-color) calc(l * 0.7) calc(c * 0.05) h)
+        );
+
+        /* Selected/active surface with more chroma */
+        --theme-surface-selected: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 0.95) calc(c * 0.15) h),
+            oklch(from var(--lutra-primary-color) calc(l * 0.8) calc(c * 0.15) h)
+        );
+
         /*
          * Background colors
          */
@@ -23,10 +52,8 @@
             oklch(from var(--lutra-primary-color) calc(l * 0.5) calc(c * 0.025) h)
         );
 
-        --background-selected: light-dark(
-            oklch(from var(--lutra-primary-color) calc(l * 0.95) calc(c * 0.15) h),
-            oklch(from var(--lutra-primary-color) calc(l * 0.8) calc(c * 0.15) h)
-        );
+        --background-main-subtle: var(--theme-surface-subtlest);
+        --background-selected: var(--theme-surface-selected);
 
         /*
          * Text
@@ -71,11 +98,7 @@
          * Code
          */
 
-        --code-background: light-dark(
-            oklch(from var(--lutra-primary-color) calc(l * 1.92) calc(c * 0.02) h),
-            oklch(from var(--lutra-primary-color) calc(l * 0.5) calc(c * 0.02) h)
-        );
-
+        --code-background: var(--theme-surface-subtlest);
         --code-border-color: var(--code-background);
 
         --code-color: light-dark(
@@ -149,10 +172,7 @@
 
         --field-label-color: var(--text-color-p);
 
-        --form-background-actions: light-dark(
-            oklch(from var(--lutra-primary-color) calc(l * 1.75) calc(c * 0.05) h / 0.35),
-            oklch(from var(--lutra-primary-color) calc(l * 0.75) calc(c * 0.05) h / 0.35)
-        );
+        --form-background-actions: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
 
         /**
          * Borders
@@ -196,14 +216,23 @@
          */
 
         --menu-background-color: var(--background-body);
-        --menu-background-color-hover: light-dark(
-            oklch(from var(--lutra-primary-color) l calc(c * 0.5) h / 0.1),
-            oklch(from var(--lutra-primary-color) calc(l * 2) calc(c * 0.25) h / 0.15)
-        );
+        --menu-background-color-hover: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
         --menu-border-color: var(--border-color-subtle);
         --menu-border-size: var(--border-size-thin);
         --menu-border-style: var(--border-style);
         --menu-border-radius: var(--border-radius-base);
+
+        /**
+         * Tables
+         */
+
+        --table-border-color: var(--border-color);
+        --table-header-background: var(--theme-surface-subtlest);
+        --table-header-color: var(--text-color-heading);
+        --table-row-background: transparent;
+        --table-row-background-even: color-mix(in srgb, var(--theme-surface-subtle) 50%, transparent);
+        --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
+        --table-cell-color: var(--text-color-p);
         
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.15",
+	"version": "0.1.17",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",