mnfst 0.5.14

package/dist/manifest.typography.css

@@ -0,0 +1,341 @@
+/* Manifest Typography */
+
+@layer base {
+
+    /* All text elements */
+    :where(a, abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label:not(.avatar, :has([type=file], [type=search])), legend, p, small, cite, q):not(.unstyle),
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6,
+    .paragraph,
+    .small,
+    .caption,
+    .label {
+        color: var(--color-content-stark);
+
+        /* Support inline icons */
+        &:where(:has([x-icon])) {
+            display: inline-flex;
+            align-items: center;
+
+            /* Inline icon spacing */
+            & [x-icon] {
+                margin-inline-end: 0.5ch;
+            }
+        }
+
+        /* Inline span alignment */
+        & span {
+            vertical-align: inherit
+        }
+    }
+
+    /* Headings */
+    :where(h1, h2, h3, h4, h5, h6):not(.unstyle),
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+        font-weight: bolder;
+        word-wrap: break-word
+    }
+
+    :where(h1, h2, h3, h4):not(.unstyle),
+    .h1,
+    .h2,
+    .h3,
+    .h4 {
+        font-weight: 700;
+    }
+
+    :where(h1, h2, h3):not(.unstyle),
+    .h1,
+    .h2,
+    .h3 {
+        letter-spacing: -0.025em
+    }
+
+    :where(h1):not(.unstyle),
+    .h1 {
+        font-size: 2.25rem;
+        line-height: 1.25
+    }
+
+    :where(h2):not(.unstyle),
+    .h2 {
+        font-size: 1.5rem
+    }
+
+    :where(h3):not(.unstyle),
+    .h3 {
+        font-size: 1.25rem;
+        line-height: 1.4
+    }
+
+    :where(h4):not(.unstyle),
+    .h4 {
+        font-size: 1rem
+    }
+
+    :where(h5):not(.unstyle),
+    .h5 {
+        font-weight: 600;
+        font-size: .875rem;
+        line-height: 1rem;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+    }
+
+    :where(h6):not(.unstyle),
+    .h6 {
+        font-weight: 600;
+        font-size: 0.8125rem;
+        line-height: 1.4;
+        text-transform: uppercase;
+    }
+
+    /* Paragraphs */
+    :where(p):not(.unstyle),
+    .paragraph {
+        line-height: 1.6;
+    }
+
+    /* Links */
+    :where(a:not([role=button]), button.link):not(.unstyle) {
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        cursor: pointer;
+        transition: var(--transition, all .05s ease-in-out);
+
+        &:hover {
+            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+        }
+
+        &:active {
+            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+        }
+    }
+
+    /* Blockquotes */
+    :where(blockquote):not(.unstyle) {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        margin: calc(var(--spacing, 0.25rem) * 4) 0;
+        padding: 0 calc(var(--spacing, 0.25rem) * 4);
+        color: var(--color-content-stark, oklch(16.6% 0.026 267));
+        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 25%, transparent);
+        border-inline-end: none;
+
+        & * {
+            color: inherit
+        }
+    }
+
+    /* Inline code */
+    :where(code):not(.unstyle) {
+        display: inline-block;
+        width: fit-content;
+        height: fit-content;
+        padding: 0.1ch 0.5ch;
+        font-size: 82.5%;
+        word-wrap: break-word;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
+        border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(67.4% 0.0318 251.27)) 10%, transparent);
+        border-radius: var(--radius, 0.5rem)
+    }
+
+    /* Captions */
+    :where(figcaption):not(.unstyle),
+    .caption {
+        font-size: 0.8125rem;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+
+        & a {
+            font-weight: inherit;
+            color: inherit
+        }
+    }
+
+    :where(figure figcaption):not(.unstyle) {
+        margin: calc(var(--spacing, 0.25rem) * 2) auto;
+        text-align: center
+    }
+
+    /* Small text */
+    :where(small):not(.unstyle),
+    .small {
+        font-size: 0.875rem;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+    }
+
+    /* Icons */
+    :where([x-icon]) {
+        display: inline-flex;
+        width: fit-content
+    }
+
+    /* Inserted text */
+    :where(ins):not(.unstyle) {
+        text-decoration: none
+    }
+
+    /* Keyboard text */
+    :where(kbd):not(.unstyle),
+    .kbd {
+        display: inline-block;
+        vertical-align: baseline;
+        width: fit-content;
+        min-width: 1.4rem;
+        padding: 0.3rem;
+        font-family: inherit;
+        font-size: 75%;
+        font-weight: 600;
+        line-height: 1;
+        text-align: center;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
+        border-radius: calc(var(--radius, 0.5rem) / 1.5);
+
+        &:not(:last-of-type) {
+            margin-inline-end: 1px
+        }
+    }
+
+    /* RTL keyboard overrides */
+    [dir=rtl] :where(kbd:not(:last-of-type), .kbd:not(:last-of-type)) {
+        margin-inline-start: 1px;
+        margin-inline-end: 0
+    }
+
+    /* Labels */
+    :where(label):not(.unstyle),
+    .label {
+        width: -moz-fit-content;
+        width: fit-content;
+        user-select: none
+    }
+
+    /* Legends */
+    :where(legend):not(.unstyle),
+    .legend {
+        display: block;
+        max-width: 100%;
+        white-space: normal
+    }
+
+    /* Badges */
+    :where(mark):not(.unstyle),
+    .badge {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.25rem;
+        width: fit-content;
+        height: fit-content;
+        padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1.5);
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1;
+        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+        border-radius: 100px;
+
+        /* Solo icons */
+        &:has(svg:only-child) {
+            padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1);
+        }
+    }
+
+    /* Lists */
+    :where(ol):not(nav ol):not(menu ol):not(.unstyle) {
+        list-style-type: decimal;
+    }
+
+    :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
+        list-style-type: disc;
+    }
+
+    :where(ol):not(nav ol):not(menu ol):not(.unstyle),
+    :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
+
+        &:not(:has(input[type=checkbox])) {
+            padding-inline-start: 1.75ch;
+        }
+
+        /* Offset items so markers align inside the element frame  */
+        & li {
+            padding-inline-start: 1ch;
+
+            /* Space out items */
+            &:not(:last-of-type) {
+                margin-bottom: 1.25ch
+            }
+
+            /* Allow icons to replace markers */
+            &:has([x-icon]) {
+                position: relative;
+                display: inherit;
+                list-style: none;
+
+                & [x-icon] {
+                    position: absolute;
+                    top: 0.45ch;
+                    left: -1.75ch
+                }
+            }
+
+            /* Checklist items */
+            &:has(input[type=checkbox]) {
+                position: relative;
+                display: inherit;
+                list-style: none;
+
+                & input[type=checkbox] {
+                    position: absolute;
+                    top: 0.45ch;
+                    left: -1ch
+                }
+            }
+        }
+    }
+
+    /* RTL list overrides */
+    [dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),
+    [dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
+        & li:has([x-icon]) {
+            & [x-icon] {
+                left: auto;
+                right: -1.75ch
+            }
+        }
+
+        & li:has(input[type=checkbox]) {
+            & input[type=checkbox] {
+                left: auto;
+                right: -1.25ch
+            }
+        }
+    }
+
+    /* Nested list spacing */
+    :where(ol, ul):not(nav ol):not(menu ol):not(.unstyle) ul,
+    :where(ol, ul):not(nav ul):not(menu ul):not(.unstyle) ol {
+        margin-top: 1ch;
+        padding-inline-start: 2.75ch;
+
+        &+li {
+            margin-top: 1.5ch
+        }
+    }
+
+    /* Spans */
+    :where(span):not(.unstyle) {
+        vertical-align: middle
+    }
+}