mnfst 0.5.14

package/dist/manifest.utilities.css

@@ -0,0 +1,399 @@
+/* Manifest Utilities */
+
+@layer utilities {
+
+    /* Center in flex parent */
+    :where(.center) {
+        justify-content: center;
+        align-items: center
+    }
+
+    /* Flex utilities */
+    :where(.row, .row-wrap, .col, .col-wrap) {
+        display: flex
+    }
+
+    /* Flex column */
+    :where(.col) {
+        flex-flow: column nowrap
+    }
+
+    /* Wrapping flex column */
+    :where(.col-wrap) {
+        flex-flow: column wrap
+    }
+
+    /* Flex row */
+    :where(.row) {
+        flex-flow: row nowrap
+    }
+
+    /* Wrapping flex row */
+    :where(.row-wrap) {
+        flex-flow: row wrap
+    }
+
+    /* Content width & horizontal centering */
+    :where(.content) {
+        width: var(--spacing-content-width, 68.75rem);
+        max-width: 100%;
+        margin-inline-start: auto;
+        margin-inline-end: auto
+    }
+
+    /* Ghost */
+    :where(.ghost) {
+        color: var(--color-content-stark, oklch(16.6% 0.026 267));
+        background-color: transparent;
+
+        &:hover {
+            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
+        }
+
+        &.brand:hover {
+            color: var(--color-brand-inverse, #763518)
+        }
+
+        &.accent:hover {
+            color: var(--color-accent-inverse, oklch(100% 0 0))
+        }
+
+        &.negative:hover {
+            color: var(--color-negative-inverse, white)
+        }
+    }
+
+    /* Hug */
+    :where(.hug) {
+        min-width: 0;
+        width: fit-content;
+        height: fit-content;
+        padding: 0
+    }
+
+    /* Outlined */
+    :where(.outlined) {
+        border-width: 1px;
+        border-style: solid;
+        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 90%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
+    }
+
+    /* Dark theme override */
+    .dark :where(.outlined) {
+        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
+    }
+
+    /* Selected */
+    :where(.selected) {
+        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
+    }
+
+    /* Transparent */
+    :where(.transparent) {
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        background-color: transparent !important;
+
+        &:hover {
+            color: var(--color-content-stark, oklch(16.6% 0.026 267))
+        }
+    }
+
+    /* Large */
+    :where(.lg) {
+        --spacing-field-height: 2.5rem;
+        --spacing-field-padding: 0.78rem;
+        font-size: 125%
+    }
+
+    /* Small */
+    :where(.sm) {
+        --spacing-field-height: 1.5rem;
+        --spacing-field-padding: 0.49rem;
+        font-size: 75%;
+
+        /* Reposition select picker icon */
+        &::picker-icon {
+            line-height: 0.2
+        }
+    }
+
+    /* Page content layout */
+    :where(body.page) {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh
+    }
+
+    .page {
+
+        /* Overlay header & footer if fixed */
+        &>header,
+        &>footer {
+            z-index: 30
+        }
+
+        /* Page margins */
+        &>header,
+        &>footer,
+        &>main {
+            padding-inline-start: var(--spacing-viewport-padding, 5vw);
+            padding-inline-end: var(--spacing-viewport-padding, 5vw);
+        }
+
+        /* Width and horizontal centering for content wrappers */
+        &>header nav,
+        &>footer nav,
+        &>main>section:not(.banner, .overlay-dark, .overlay-light) {
+            width: var(--spacing-content-width, 68.75rem);
+            max-width: 100%;
+            margin-inline-start: auto;
+            margin-inline-end: auto
+        }
+
+        /* Push footer down */
+        &>footer {
+            margin-top: auto
+        }
+    }
+
+    /* No focus */
+    .no-focus:focus,
+    .no-focus:focus-visible,
+    .no-focus:focus-within {
+        box-shadow: 0 0 0 0 transparent
+    }
+
+    /* No scrollbar */
+    :where(.no-scrollbar) {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none
+        }
+    }
+
+    /* Banner overlays */
+    :where(.overlay-dark, .overlay-light) {
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 0;
+            width: 100%;
+            height: 100%
+        }
+
+        >* {
+            position: relative;
+            z-index: 1
+        }
+    }
+
+    /* Dark overlay */
+    :where(.overlay-dark) {
+        color: white !important;
+
+        &::after {
+            background: oklch(0% 0 0 / 50%)
+        }
+    }
+
+    /* Light overlay */
+    :where(.overlay-light) {
+        color: black !important;
+
+        &::after {
+            background: oklch(100% 0 0 / 75%)
+        }
+    }
+
+    /* Prose styles for long-form content */
+    :where(.prose) {
+        width: 65ch;
+        max-width: 100%;
+
+        /* Asides inside a prose element are used as callouts */
+        & aside:not([popover]) {
+            margin-top: calc(1rem * 1.4);
+            padding: 1rem;
+            border-radius: calc(var(--radius, 0.5rem) * 2);
+            color: var(--color-content-stark, oklch(16.6% 0.026 267));
+            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 20%, transparent);
+            border: 1px solid color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, transparent);
+
+            &:not(.frame) * {
+                color: inherit
+            }
+
+            &:has([x-icon]):not(.frame) {
+                display: flex;
+                flex-direction: row;
+                gap: 1rem;
+
+                & [x-icon] {
+                    padding-top: 0.25rem;
+                    font-size: 1.25rem
+                }
+            }
+        }
+
+        &>a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
+            margin-top: calc(1rem * 1.4);
+        }
+
+        &>blockquote {
+            margin-top: calc(1rem * 2);
+
+            & * {
+                margin: 0
+            }
+        }
+
+        &>figcaption {
+            margin-top: 1rem
+        }
+
+        &>figure {
+            margin-top: calc(1rem * 1.4);
+
+            & img {
+                margin: 0
+            }
+        }
+
+        &>h1+p {
+            margin-top: 0.625rem;
+            font-size: 1.125rem;
+            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+        }
+
+        &>h2 {
+            margin-top: 1rem;
+            margin-bottom: calc(1rem * 0.6667)
+        }
+
+        &>h3 {
+            margin-top: calc(1rem * 2.4)
+        }
+
+        &>h4 {
+            margin-top: calc(1rem * 3)
+        }
+
+        &>h4+p {
+            margin-top: 0.25rem;
+        }
+
+        &>h5 {
+            margin-top: 1rem;
+            margin-bottom: 1rem
+        }
+
+        &>h6 {
+            margin-top: calc(1rem * 2);
+            margin-bottom: 1rem
+        }
+
+        &>hr {
+            margin-top: calc(1rem * 3);
+            margin-bottom: calc(1rem * 3)
+        }
+
+        &>img,
+        &>p {
+            margin-top: calc(1rem * 1.4)
+        }
+
+        &>ol,
+        &>ul,
+        &>small {
+            margin-top: 1rem
+        }
+
+        &>table {
+            margin-top: calc(1rem * 2);
+            margin-bottom: calc(1rem * 2)
+        }
+
+        &>x-code-group,
+        &>x-code,
+        &>pre {
+            margin-top: 2rem;
+            margin-bottom: 2rem
+        }
+
+        &>x-code-group x-code {
+            margin-top: 0;
+            margin-bottom: 0
+        }
+
+        &>x-code pre {
+            margin-top: 0;
+            margin-bottom: 0
+        }
+    }
+
+    /* Inline trailing content */
+    :where(.trailing) {
+        display: inline-block;
+        margin-inline-start: auto;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+    }
+
+    /* Brand colors */
+    :where(.brand) {
+        --color-field-surface: var(--color-brand-surface, #f6c07b);
+        --color-field-surface-hover: var(--color-brand-surface-hover, #f19b46);
+        --color-field-inverse: var(--color-brand-inverse, #763518);
+        --color-content-stark: var(--color-brand-content, #de6618);
+        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
+        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
+    }
+
+    /* Accent colors */
+    :where(.accent) {
+        --color-field-surface: var(--color-accent-surface, oklch(16.6% 0.026 267));
+        --color-field-surface-hover: var(--color-accent-surface-hover, oklch(28.7% 0.030787 270.1));
+        --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
+        --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
+        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
+        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
+    }
+
+    /* Negative colors */
+    :where(.negative) {
+        --color-field-surface: var(--color-negative-surface, #ef4444);
+        --color-field-surface-hover: var(--color-negative-surface-hover, #dc2626);
+        --color-field-inverse: var(--color-negative-inverse, white);
+        --color-content-stark: var(--color-negative-content, #ef4444);
+        --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
+        --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
+    }
+
+    /* Positive colors */
+    :where(.positive) {
+        --color-field-surface: var(--color-positive-surface, #16a34a);
+        --color-field-surface-hover: var(--color-positive-surface-hover, #166534);
+        --color-field-inverse: var(--color-positive-inverse, white);
+        --color-content-stark: var(--color-positive-content, #16a34a);
+        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
+        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
+    }
+
+    /* Text colors */
+    :where(.stark) {
+        color: var(--color-content-stark, oklch(16.6% 0.026 267));
+    }
+
+    :where(.neutral) {
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+    }
+
+    :where(.subtle) {
+        color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
+    }
+}