lutra 0.1.0 → 0.1.4

package/dist/css/4-layout.css

@@ -1,5 +1,368 @@
 @scope (.PageContent) to (.UIContent) {
+    /* Heading spacing for proper markdown hierarchy */
+    h1, h2, h3, h4, h5, h6 {
+        margin-block: var(--space-lg) var(--space-md);
+        
+        /* No top margin for first heading or when following another heading */
+        &:first-child,
+        &:has(+ :is(h1, h2, h3, h4, h5, h6)) {
+            margin-block-start: 0;
+        }
+        
+        /* Larger spacing before headings that follow non-heading content */
+        &:not(:first-child):not(:is(h1, h2, h3, h4, h5, h6) + *) {
+            margin-block-start: var(--space-xl);
+        }
+
+        & + * {
+            margin-block-start: 0;
+        }
+    }
+
+    /* h1 and h2 get extra spacing */
+    h1, h2 {
+        margin-block-start: var(--space-xl);
+        margin-block-end: var(--space-lg);
+    }
+
+    /* Paragraph spacing with smart adjustments */
     p {
-        margin-bottom: calc(var(--margin-base) * var(--margin-multiplier));
+        margin-block: 0 var(--space-md);
+        
+        /* Paragraphs with images get extra spacing */
+        &:has(img) {
+            margin-block: var(--space-lg);
+        }
+
+        /* Paragraphs with only a small element get reduced spacing */
+        &:has(> small:only-child) {
+            margin-block: var(--space-xs);
+        }
+
+        /* Paragraphs immediately before a paragraph that contains only a small element get reduced bottom margin */
+        &:has(+ p > small:only-child),
+        &:has(+ li > small:only-child) {
+            margin-block-end: var(--space-xs);
+        }
+        
+        /* Paragraphs immediately after lists get reduced spacing */
+        :is(ul, ol) + & {
+            margin-block-start: var(--space-sm);
+        }
+    }
+
+    /* List spacing with contextual adjustments */
+    :is(ul, ol) {
+        margin-block: 0 var(--space-md);
+        padding-inline-start: var(--space-xl);
+        
+        /* Lists following paragraphs get closer spacing */
+        p + & {
+            margin-block-start: var(--space-sm);
+        }
+        
+        /* Nested lists */
+        & :is(ul, ol) {
+            margin-block: var(--space-sm) 0;
+        }
+        
+        /* Lists inside blockquotes */
+        blockquote & {
+            margin-block: var(--space-sm) 0;
+        }
+    }
+
+    /* List item spacing */
+    li {
+        margin-block-end: var(--space-xs);
+        
+        &:last-child {
+            margin-block-end: 0;
+        }
+        
+        /* List items containing only text get tighter spacing */
+        &:not(:has(:is(p, ul, ol, blockquote, pre))) {
+            margin-block-end: var(--space-xs);
+        }
+    }
+
+    /* Block quotes with contextual spacing */
+    blockquote {
+        border-inline-start: var(--space-xs) solid var(--border-color);
+        padding-inline-start: var(--space-md);
+        padding-block: var(--space-sm);
+        margin-block: var(--space-lg);
+        margin-inline: 0;
+        color: var(--text-color-p-subtle);
+        
+        /* Nested blockquotes get reduced spacing */
+        & blockquote {
+            margin-block: var(--space-md);
+            border-inline-start-width: var(--space-xs);
+        }
+        
+        /* Internal content spacing */
+        & > :first-child { margin-block-start: 0; }
+        & > :last-child { margin-block-end: 0; }
+        
+        /* Blockquotes containing only a single paragraph */
+        &:has(> p:only-child) {
+            padding-block: var(--space-xs);
+        }
+    }
+
+    /* Code blocks with smart spacing */
+    pre {
+        background-color: var(--code-background);
+        color: var(--text-color-p);
+        border: var(--code-border-size) var(--code-border-style) var(--code-border-color);
+        padding-inline: var(--code-padding-inline);
+        padding-block: var(--code-padding-block);
+        border-radius: var(--code-border-radius);
+        overflow-x: auto;
+        line-height: var(--font-line-height);
+        margin-block: var(--space-lg);
+        
+        /* Code blocks following lists get extra spacing */
+        :is(ul, ol) + & {
+            margin-block-start: var(--space-xl);
+        }
+        
+        /* Code blocks inside blockquotes */
+        blockquote & {
+            margin-block: var(--space-md);
+        }
+    }
+
+    /* Inline code with contextual styling */
+    code {
+        background-color: var(--code-background);
+        color: var(--code-color);
+        padding-inline: calc(var(--code-padding-inline) * 0.5);
+        padding-block: calc(var(--code-padding-block) * 0.5);
+        border-radius: var(--code-border-radius);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-sm);
+        
+        /* Code inside headings gets different styling */
+        :is(h1, h2, h3, h4, h5, h6) & {
+            font-size: var(--font-size-sm);
+            padding-inline: var(--code-padding-inline);
+            padding-block: var(--code-padding-block);
+        }
+        
+        /* Code inside pre blocks resets styling */
+        pre & {
+            padding: 0;
+            background-color: transparent;
+            border: none;
+            font-size: inherit;
+        }
+    }
+
+    /* Horizontal rules with contextual spacing */
+    hr {
+        border: none;
+        border-block-start: var(--border-size-thick) var(--border-style) var(--border-color);
+        margin-block: var(--space-xl);
+        
+        /* HRs following headings get reduced spacing */
+        :is(h1, h2, h3, h4, h5, h6) + & {
+            margin-block-start: var(--space-md);
+        }
+        
+        /* HRs at the end of content */
+        &:last-child {
+            margin-block-end: 0;
+        }
+    }
+
+    /* Table with responsive and contextual styling */
+    table {
+        margin-block: var(--space-lg);
+        border-collapse: collapse;
+        width: 100%;
+        
+        /* Tables immediately following text get closer spacing */
+        p + & {
+            margin-block-start: var(--space-md);
+        }
+        
+        /* Tables inside other containers */
+        :is(blockquote, li) & {
+            margin-block: var(--space-md);
+        }
+    }
+
+    :is(th, td) {
+        padding: var(--space-sm);
+        border: var(--border-size-thin) var(--border-style) var(--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); }
+    }
+
+    th {
+        background-color: var(--background-color-subtle);
+        font-weight: var(--font-weight-semibold);
+    }
+
+    /* Smart image spacing */
+    img {
+        max-width: 100%;
+        height: auto;
+        
+        /* Inline images (in paragraphs) get minimal spacing */
+        p & {
+            margin-block: var(--space-xs);
+            vertical-align: middle;
+        }
+        
+        /* Block images get more spacing */
+        &:not(p *) {
+            margin-block: var(--space-lg);
+            display: block;
+        }
+        
+        /* Images in lists */
+        li & {
+            margin-block: var(--space-sm);
+        }
+    }
+
+    /* Figure with enhanced spacing logic */
+    figure {
+        margin-block: var(--space-lg);
+        margin-inline: 0;
+        
+        /* Figures containing only images */
+        &:has(> img:only-child) {
+            margin-block: var(--space-xl);
+        }
+        
+        /* Figures in lists or blockquotes */
+        :is(li, blockquote) & {
+            margin-block: var(--space-md);
+        }
+    }
+
+    figcaption {
+        margin-block-start: var(--space-sm);
+        font-size: var(--font-size-sm);
+        color: var(--text-color-p-subtle);
+        text-align: center;
+    }
+
+    /* Enhanced definition lists */
+    dl {
+        margin-block: var(--space-md);
+        
+        /* DLs with many terms get more spacing */
+        &:has(dt:nth-of-type(n+4)) {
+            margin-block: var(--space-lg);
+            
+            dt {
+                margin-block-start: var(--space-md);
+                &:first-child { margin-block-start: 0; }
+            }
+        }
+    }
+
+    dt {
+        font-weight: var(--font-weight-semibold);
+        margin-block: var(--space-sm) var(--space-xs);
+        
+        &:first-child { margin-block-start: 0; }
+    }
+
+    dd {
+        margin-inline-start: var(--space-xl);
+        margin-block-end: var(--space-sm);
+        
+        &:last-child { margin-block-end: 0; }
+        
+        /* Multiple DDs for one DT get tighter spacing */
+        & + dd {
+            margin-block-start: var(--space-xs);
+        }
+    }
+
+    /* Enhanced link styling with context awareness */
+    a {
+        color: var(--link-color);
+        text-decoration: var(--link-text-decoration);
+        
+        /* Links in headings get subtle styling */
+        :is(h1, h2, h3, h4, h5, h6) & {
+            color: inherit;
+            text-decoration: underline;
+            text-decoration-color: var(--link-color);
+            text-underline-offset: var(--space-xs);
+        }
+        
+        /* Links containing only images */
+        &:has(> img:only-child) {
+            text-decoration: none;
+            display: inline-block;
+        }
+        
+        /* External links (starting with http) */
+        &[href^="http"]::after {
+            content: " ↗";
+            font-size: 0.8em;
+            color: var(--text-color-p-subtler);
+        }
+        
+        &:hover {
+            color: var(--link-color-hover);
+            text-decoration: var(--link-text-decoration-hover);
+            
+            :is(h1, h2, h3, h4, h5, h6) & {
+                text-decoration-color: var(--link-color-hover);
+            }
+        }
+        
+        &:active {
+            color: var(--link-color-active);
+        }
+        
+        &:visited {
+            color: var(--link-color-visited);
+        }
+    }
+
+    /* Smart container edge handling */
+    > :first-child,
+    > :is(h1, h2, h3, h4, h5, h6):first-child {
+        margin-block-start: 0;
+    }
+
+    > :last-child {
+        margin-block-end: 0;
+    }
+
+    /* Content flow improvements */
+    :is(p, li):has(+ :is(h2, h3, h4, h5, h6)) {
+        margin-block-end: var(--space-sm); /* Reduce space before section headings */
+    }
+    
+    /* Adjacent similar elements get reduced spacing */
+    :is(ul, ol) + :is(ul, ol) {
+        margin-block-start: var(--space-sm);
+    }
+    
+    blockquote + blockquote {
+        margin-block-start: var(--space-md);
+    }
+    
+    pre + pre {
+        margin-block-start: var(--space-md);
+    }
+    
+    /* Elements with no content get minimal presence */
+    :is(p, li, blockquote):empty {
+        display: none;
     }
 }

package/dist/css/5-media.css

@@ -1,21 +1,116 @@
-@media(prefers-reduced-motion: reduce) {
-    * {
-        transition-duration: 0s !important;
+/**
+ * Accessibility preferences
+ */
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0 !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0 !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    :root {
+        scroll-behavior: smooth;
+    }
+}
+
+@media (prefers-contrast: high) {
+    :root {
+        --field-border-size: 2px;
+        --button-border-size: 2px;
+        --section-border-size: 2px;
+        --focus-ring-size: 3px;
+    }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --overlay-backdrop-filter: none;
+        --overlay-bg-color: rgba(0, 0, 0, 0.9);
+    }
+}
+
+/**
+ * Responsive scaling - mobile first approach
+ * Adjusts base font size and spacing scale for optimal experience
+ */
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+    :root {
+        --font-size-base: 0.9em;
+        --base-size: 14px;
     }
 }
 
-/*
-@media(max-width: 1280px) {
+/* Large mobile devices and small desktops */
+@media (min-width: 481px) and (max-width: 1440px) {
     :root {
-        --font-size-base: 14px;
-        --space-ratio: 1.2;
+        --font-size-base: 1em;
+        --base-size: 16px;
     }
 }
 
-@media(max-width: 640px) {
+/* Large desktop screens 
+@media (min-width: 1441px) {
     :root {
-        --font-size-base: 12px;
-        --space-ratio: 1.1;
+        --font-size-base: 1.1em;
+        --base-size: 18px;
     }
 }
-*/
+*/
+
+/**
+ * High density displays
+ */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    :root {
+    }
+}
+
+/**
+ * Touch device optimizations
+ */
+@media (hover: none) and (pointer: coarse) {
+    :root {
+    }
+}
+
+/**
+ * Print styles
+ */
+@media print {
+    :root {
+        --font-size-base: 12pt;
+        --spacing-xs: 0.25em;
+        --spacing-sm: 0.5em;
+        --spacing-base: 1em;
+        --spacing-lg: 1.5em;
+        --spacing-xl: 2em;
+        --spacing-2xl: 3em;
+        --spacing-3xl: 4em;
+        --text-color: #000;
+        --background-color: #fff;
+        --section-border-color: #000;
+        --field-border-color: #000;
+    }
+    
+    * {
+        background: transparent !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    @scope (.PageContent) to (.UIContent) {
+        a[href^="http"]::after {
+            content: " (" attr(href) ")";
+            font-size: 0.8em;
+            color: var(--text-color-subtle);
+        }
+    }
+}

package/dist/css/lutra.css

@@ -1,4 +1,5 @@
-@import "./0-layers.css";
+@layer l-base, base, l-typo, typo, l-layout, layout, theme, l-media, media, misc;
+
 @import "./1-props.css";
 @import "./2-base.css" layer(l-base);
 @import "./3-typo.css" layer(l-typo);

package/dist/css/themes/DefaultTheme.css

@@ -0,0 +1,209 @@
+@layer theme {
+    :root {
+        --hue: 240deg;
+        --chroma: 0.5;
+
+        /*
+         * Primary theme color
+         */
+
+        --lutra-primary-color: oklch(0.5 var(--chroma) var(--hue));
+
+        /*
+         * Background colors
+         */
+
+        --background-body: light-dark(
+            white,
+            oklch(from var(--lutra-primary-color) calc(l * 0.4) calc(c * 0.025) h)
+        );
+
+        --background-main: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 0.95) calc(c * 0.025) h),
+            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)
+        );
+
+        /*
+         * Text
+         */
+
+        --text-color-p: light-dark(
+            rgba(0, 0, 0, 0.87),
+            rgba(255, 255, 255, 0.87)
+        );
+
+        --text-color-p-subtle: light-dark(
+            rgba(0, 0, 0, 0.5),
+            rgba(255, 255, 255, 0.5)
+        );
+
+        --text-color-p-subtler: light-dark(
+            rgba(0, 0, 0, 0.4),
+            rgba(255, 255, 255, 0.4)
+        );
+
+        --text-color-p-subtlest: light-dark(
+            rgba(0, 0, 0, 0.3),
+            rgba(255, 255, 255, 0.3)
+        );
+
+        --text-color-heading: light-dark(
+            rgba(0, 0, 0, 0.95),
+            rgba(255, 255, 255, 0.95)
+        );
+
+        --link-color: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 0.35) calc(c * 0.01) h),
+            oklch(from var(--lutra-primary-color) calc(l * 1.25) calc(c * 0.35) h)
+        );
+
+        --link-color-hover: light-dark(
+            oklch(from var(--link-color) calc(l * 0.35) c h),
+            oklch(from var(--link-color) calc(l * 1.35) c h)
+        );
+
+        /*
+         * 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-border-color: var(--code-background);
+
+        --code-color: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 0.35) calc(c * 0.01) h),
+            oklch(from var(--lutra-primary-color) calc(l * 1.65) calc(c * 0.01) h)
+        );
+
+        --code-border-radius: var(--border-radius-base);
+        --code-border-size: var(--border-size-thin);
+        --code-border-style: var(--border-style);
+        
+        /*
+         * Buttons
+         */
+
+        /* Submit */
+        --button-submit-base-color:       light-dark(oklch(from var(--lutra-primary-color) l calc(c * 0.5) h),       oklch(from var(--lutra-primary-color) l calc(c * 0.5) h));
+        --button-submit-base-color-hover: light-dark(oklch(from var(--button-submit-base-color) calc(l * 0.85) c h), oklch(from var(--button-submit-base-color) calc(l * 1.15) c h));       
+
+        --button-submit-color:            light-dark(oklch(from var(--button-submit-base-color) 0.98 0.01 h),        oklch(from var(--button-submit-base-color-hover) 0.98 0.01 h));
+        --button-submit-color-hover:      light-dark(oklch(from var(--button-submit-base-color-hover) 1 0.01 h),     oklch(from var(--button-submit-base-color-hover) 1 0.01 h));
+        --button-submit-background: var(--button-submit-base-color);
+        --button-submit-background-hover: var(--button-submit-base-color-hover);
+        --button-submit-border-color: var(--button-submit-base-color);
+        --button-submit-border-color-hover: var(--button-submit-base-color-hover);
+        --button-submit-border-color-disabled: var(--button-submit-base-color);
+        --button-submit-border-color-focus: var(--button-submit-base-color);
+        --button-submit-border-color-loading: var(--button-submit-base-color);
+
+        /* Action */
+        --button-action-base-color:       light-dark(oklch(from var(--lutra-primary-color) calc(l * 0.5) calc(c * 0.1) h), oklch(from var(--lutra-primary-color) calc(l * 2) calc(c * 0.01) h));
+        --button-action-base-color-hover: light-dark(oklch(from var(--button-action-base-color) calc(l * 0.1) calc(c * 0.01) h), oklch(from var(--button-action-base-color) calc(l * 0.9) c h));
+
+        --button-action-color: light-dark(oklch(from var(--button-action-base-color) 0.98 0.01 h), oklch(from var(--button-action-base-color-hover) 0.01 0.01 h));
+        --button-action-color-hover: light-dark(oklch(from var(--button-action-base-color-hover) 1 0.01 h), oklch(from var(--button-action-base-color-hover) 0.01 0.01 h));
+        --button-action-background: var(--button-action-base-color);
+        --button-action-background-hover: var(--button-action-base-color-hover);
+        --button-action-border-color: var(--button-action-base-color);
+        --button-action-border-color-hover: var(--button-action-base-color-hover);
+
+        /* Success */
+        --button-success-base-color:       light-dark(hsl(120, 100%, 35%), hsl(120, 100%, 35%));
+        --button-success-base-color-hover: light-dark(oklch(from var(--button-success-base-color) calc(l * 0.85) c h), oklch(from var(--button-success-base-color) calc(l * 0.9) c h));
+
+        --button-success-color: white;
+        --button-success-color-hover: white;
+        --button-success-background: var(--button-success-base-color);
+        --button-success-background-hover: var(--button-success-base-color-hover);
+        --button-success-border-color: var(--button-success-base-color);
+        --button-success-border-color-hover: var(--button-success-base-color-hover);
+
+        /* Danger */
+        --button-danger-base-color:       light-dark(hsl(0, 100%, 50%), hsl(0, 100%, 50%));
+        --button-danger-base-color-hover: light-dark(oklch(from var(--button-danger-base-color) calc(l * 0.85) c h), oklch(from var(--button-danger-base-color) calc(l * 0.9) c h));
+        --button-danger-color: white;
+        --button-danger-color-hover: white;
+        --button-danger-background: var(--button-danger-base-color);
+        --button-danger-background-hover: var(--button-danger-base-color-hover);
+        --button-danger-border-color: var(--button-danger-base-color);
+        --button-danger-border-color-hover: var(--button-danger-base-color-hover);
+
+        /**
+         * Fields
+         */
+
+        --field-background: transparent;
+        --field-placeholder-color: light-dark(
+            rgba(0, 0, 0, 0.35),
+            rgba(255, 255, 255, 0.35)
+        );
+
+        --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)
+        );
+
+        /**
+         * Borders
+         */
+
+        --border-color: light-dark(
+            oklch(from var(--lutra-primary-color) calc(l * 1.75) calc(c * 0.025) h),
+            oklch(from var(--lutra-primary-color) calc(l * 1) calc(c * 0.025) h)
+        );
+        
+        --border-color-subtle: light-dark(
+            oklch(from var(--border-color) l c h / 0.75),
+            oklch(from var(--border-color) l c h / 0.75)
+        );
+        
+        --border-color-subtler: light-dark(
+            oklch(from var(--border-color) l c h / 0.5),
+            oklch(from var(--border-color) l c h / 0.5)
+        );
+        
+        /**
+         * Links
+         */
+
+        --link-color: var(--button-submit-base-color);
+        --link-color-hover: var(--button-submit-base-color-hover);
+        --link-color-active: var(--button-submit-base-color-active);
+
+        /**
+         * Notifications
+         */
+
+        --notification-background-color: var(--background-body);
+        --notification-border-color: var(--border-color);
+        --notification-border-size: var(--border-size-thin);
+        --notification-border-style: var(--border-style);
+        --notification-border-radius: var(--border-radius-base);
+        
+        /**
+         * Menus
+         */
+
+        --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-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);
+        
+    }
+}