@dominikcz/greg 0.9.27

package/src/lib/scss/__markdown.scss

@@ -0,0 +1,447 @@
+@use "./__theme.scss" as *;
+
+.markdown-body {
+    --base-size-4: 0.25rem;
+    --base-size-8: 0.5rem;
+    --base-size-16: 1rem;
+    --base-size-24: 1.5rem;
+    --base-size-40: 2.5rem;
+    --base-text-weight-normal: 400;
+    --base-text-weight-medium: 500;
+    --base-text-weight-semibold: 600;
+    --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    --fontStack-sansSerif: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    @include greg-light-markdown-vars;
+
+    @media (prefers-color-scheme: dark) {
+        @include greg-dark-markdown-vars;
+        color-scheme: dark;
+    }
+
+    .greg[data-theme="dark"] & {
+        @include greg-dark-markdown-vars;
+        color-scheme: dark;
+    }
+
+    .greg[data-theme="light"] & {
+        @include greg-light-markdown-vars;
+        color-scheme: light;
+    }
+
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    margin: 0;
+    font-family: var(--fontStack-sansSerif);
+    font-size: 16px;
+    line-height: 1.75;
+    font-weight: var(--base-text-weight-normal);
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-default);
+    word-wrap: break-word;
+
+    &::before,
+    &::after {
+        display: table;
+        content: "";
+    }
+
+    &::after {
+        clear: both;
+    }
+
+    >*:first-child {
+        margin-top: 0 !important;
+    }
+
+    >*:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre,
+    details {
+        margin-top: 0;
+        margin-bottom: var(--base-size-16);
+    }
+
+    p {
+        margin: 1rem 0 0.4rem 0;
+    }
+
+    img {
+        max-width: 100%;
+        border-style: none;
+    }
+
+    hr {
+        height: 0.25em;
+        padding: 0;
+        margin: var(--base-size-24) 0;
+        background-color: var(--borderColor-default);
+        border: 0;
+    }
+
+    a {
+        background-color: transparent;
+        color: var(--fgColor-accent);
+        text-decoration: underline;
+        text-decoration-color: color-mix(in srgb, var(--fgColor-accent) 40%, transparent);
+        text-underline-offset: 2px;
+        transition: color 0.15s, text-decoration-color 0.15s;
+
+        &:hover {
+            color: var(--fgColor-accent);
+            text-decoration-color: var(--fgColor-accent);
+        }
+
+        &:not([href]) {
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: var(--base-size-24);
+        margin-bottom: var(--base-size-16);
+        font-weight: var(--base-text-weight-semibold);
+        line-height: 1.25;
+
+        a:not(.header-anchor) {
+            text-decoration: none;
+            text-decoration-color: transparent;
+
+            &:hover {
+                text-decoration: underline;
+                text-decoration-color: var(--fgColor-accent);
+            }
+        }
+    }
+
+    h1 {
+        font-size: 2em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid var(--borderColor-muted);
+    }
+
+    h2 {
+        font-size: 1.5em;
+        padding-bottom: 0.3em;
+        border-bottom: 1px solid var(--borderColor-muted);
+    }
+
+    h3 { font-size: 1.25em; }
+    h4 { font-size: 1em; }
+    h5 { font-size: 0.875em; }
+    h6 {
+        font-size: 0.85em;
+        color: var(--fgColor-muted);
+    }
+
+    blockquote {
+        margin: 0;
+        padding: 0 1em;
+        color: var(--fgColor-muted);
+        border-left: 0.25em solid var(--borderColor-default);
+
+        > :first-child {
+            margin-top: 0;
+        }
+
+        > :last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    ul,
+    ol {
+        padding-left: 2em;
+    }
+
+    ul ul,
+    ul ol,
+    ol ul,
+    ol ol {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    li + li {
+        margin-top: 0.25em;
+    }
+
+    li > p {
+        margin-top: var(--base-size-16);
+    }
+
+    code,
+    tt {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-family: var(--fontStack-monospace);
+        font-size: 85%;
+        white-space: break-spaces;
+        background-color: var(--bgColor-neutral-muted);
+        border-radius: 6px;
+    }
+
+    pre,
+    pre code,
+    pre tt {
+        font-family: var(--fontStack-monospace);
+    }
+
+    pre > code {
+        padding: 0;
+        margin: 0;
+        white-space: pre;
+        word-break: normal;
+        border: 0;
+        background: transparent;
+    }
+
+    kbd {
+        display: inline-block;
+        padding: var(--base-size-4);
+        font: 11px var(--fontStack-monospace);
+        line-height: 10px;
+        color: var(--fgColor-default);
+        vertical-align: middle;
+        background-color: var(--bgColor-muted);
+        border: 1px solid var(--borderColor-neutral-muted);
+        border-radius: 6px;
+        box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
+    }
+
+    /* ������ Heading anchors ������������������������������������������������������������������������������������������������������������������������������������������������ */
+    h1, h2, h3, h4, h5, h6 {
+        &:hover .header-anchor,
+        &:has(.header-anchor:focus-within) .header-anchor {
+            opacity: 1;
+        }
+    }
+
+    .header-anchor {
+        float: left;
+        margin-left: -0.87em;
+        padding-right: 0.23em;
+        font-weight: 500;
+        user-select: none;
+        opacity: 0;
+        color: var(--greg-accent);
+        text-decoration: none;
+        transition: opacity 0.2s, color 0.2s;
+
+        &:hover {
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+
+    pre {
+        --greg-code-block-pad-x: 24px;
+        --greg-code-block-pad-y: 20px;
+        --greg-code-line-height: 1.7;
+
+        overflow: auto;
+        scrollbar-gutter: stable;
+        padding: 0;
+
+        &.shiki.shiki-themes {
+            border-radius: 8px;
+            background-color: var(--greg-code-block-bg) !important;
+            color: var(--shiki-light) !important;
+        }
+
+        &.shiki.shiki-themes span {
+            color: var(--shiki-light) !important;
+            font-style: var(--shiki-light-font-style, normal) !important;
+            font-weight: var(--shiki-light-font-weight, 400) !important;
+            text-decoration: var(--shiki-light-text-decoration, none) !important;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            &.shiki.shiki-themes {
+                background-color: var(--greg-code-block-bg) !important;
+                color: var(--shiki-dark) !important;
+            }
+
+            &.shiki.shiki-themes span {
+                color: var(--shiki-dark) !important;
+                font-style: var(--shiki-dark-font-style, normal) !important;
+                font-weight: var(--shiki-dark-font-weight, 400) !important;
+                text-decoration: var(--shiki-dark-text-decoration, none) !important;
+            }
+        }
+
+        .greg[data-theme="dark"] &.shiki.shiki-themes {
+            background-color: var(--greg-code-block-bg) !important;
+            color: var(--shiki-dark) !important;
+        }
+
+        .greg[data-theme="dark"] &.shiki.shiki-themes span {
+            color: var(--shiki-dark) !important;
+            font-style: var(--shiki-dark-font-style, normal) !important;
+            font-weight: var(--shiki-dark-font-weight, 400) !important;
+            text-decoration: var(--shiki-dark-text-decoration, none) !important;
+        }
+
+        .greg[data-theme="light"] &.shiki.shiki-themes {
+            background-color: var(--greg-code-block-bg) !important;
+            color: var(--shiki-light) !important;
+        }
+
+        .greg[data-theme="light"] &.shiki.shiki-themes span {
+            color: var(--shiki-light) !important;
+            font-style: var(--shiki-light-font-style, normal) !important;
+            font-weight: var(--shiki-light-font-weight, 400) !important;
+            text-decoration: var(--shiki-light-text-decoration, none) !important;
+        }
+
+        code {
+            display: block;
+            overflow: visible;
+            padding: var(--greg-code-block-pad-y) var(--greg-code-block-pad-x);
+            margin: 0;
+            width: fit-content;
+            min-width: 100%;
+            line-height: var(--greg-code-line-height);
+            font-size: 0.875rem;
+        }
+
+        code .line {
+            display: inline-block;
+            min-width: 100%;
+        }
+
+        code .line.highlighted {
+            background: var(--greg-code-line-highlight-color);
+            margin-inline: calc(var(--greg-code-block-pad-x) * -1);
+            padding-inline: var(--greg-code-block-pad-x);
+            width: calc(100% + (2 * var(--greg-code-block-pad-x)));
+        }
+
+        code .line.focused {
+            margin-inline: calc(var(--greg-code-block-pad-x) * -1);
+            padding-inline: var(--greg-code-block-pad-x);
+            width: calc(100% + (2 * var(--greg-code-block-pad-x)));
+        }
+
+        &.has-focused-lines code .line:not(.focused) {
+            filter: blur(0.095rem);
+            opacity: 0.4;
+            transition: filter 0.35s, opacity 0.35s;
+        }
+
+        &:hover.has-focused-lines code .line:not(.focused) {
+            filter: blur(0);
+            opacity: 1;
+        }
+
+        code .line.diff {
+            position: relative;
+            margin-inline: calc(var(--greg-code-block-pad-x) * -1);
+            padding-inline: var(--greg-code-block-pad-x);
+            width: calc(100% + (2 * var(--greg-code-block-pad-x)));
+        }
+
+        code .line.diff.add {
+            background: color-mix(in srgb, #2ea043 22%, transparent);
+        }
+
+        &.has-diff code .line.diff::before {
+            position: absolute;
+            left: 10px;
+            width: 1rem;
+            text-align: center;
+            user-select: none;
+            font-weight: 700;
+            opacity: 1;
+            text-shadow: 0 0 0.01px currentColor;
+        }
+
+        &.has-diff code .line.diff.add::before {
+            content: '+';
+            color: var(--greg-code-line-diff-add-symbol-color);
+        }
+
+        code .line.diff.remove {
+            background: color-mix(in srgb, #cf222e 22%, transparent);
+        }
+
+        &.has-diff code .line.diff.remove::before {
+            content: '-';
+            color: var(--greg-code-line-diff-remove-symbol-color);
+        }
+
+        code .line.diff.warning {
+            background: color-mix(in srgb, #bf8700 22%, transparent);
+        }
+
+        code .line.diff.error {
+            background: color-mix(in srgb, #cf222e 28%, transparent);
+        }
+
+    }
+
+    :not(pre)>code {
+        background-color: var(--greg-code-background);
+        color: var(--greg-code-inline-color);
+        padding: 0.2rem 0.4rem;
+        border-radius: 4px;
+        font-size: .875em;
+        overflow-wrap: break-word;
+        border: 1px solid var(--greg-border-color);
+    }
+
+    th {
+        text-align: left;
+    }
+
+    /* ������ Tables ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� */
+    table {
+        border-spacing: 0;
+        border-collapse: collapse;
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow-x: auto;
+        margin: 1rem 0;
+        font-size: 0.9em;
+    }
+
+    table th,
+    table td {
+        padding: 6px 14px;
+        border: 1px solid var(--greg-border-color);
+    }
+
+    table thead th {
+        font-weight: 600;
+        background-color: var(--greg-menu-background);
+        color: var(--greg-color);
+    }
+
+    table tbody tr {
+        background-color: var(--greg-main-background);
+        transition: background-color 0.1s;
+    }
+
+    table tbody tr:nth-child(even) {
+        background-color: color-mix(in srgb, var(--greg-menu-background) 60%, var(--greg-main-background));
+    }
+
+    table tbody tr:hover {
+        background-color: var(--greg-accent-light);
+    }
+}
+

package/src/lib/scss/__scrollbar.scss

@@ -0,0 +1,60 @@
+/* ── Scrollbar ───────────────────────────────────── */
+html,
+body,
+.greg {
+    scrollbar-width: thin;
+    scrollbar-color: var(--greg-accent) transparent;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+.greg::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+.greg::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+.greg::-webkit-scrollbar-thumb {
+    background-color: var(--greg-accent);
+    border-radius: 999px;
+    opacity: 0.6;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+.greg::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+
+.markdown-body,
+.markdown-body * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--greg-accent) transparent;
+}
+
+.markdown-body *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.markdown-body *::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.markdown-body *::-webkit-scrollbar-thumb {
+    background-color: var(--greg-accent);
+    border-radius: 999px;
+    opacity: 0.6;
+}
+
+.markdown-body *::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+

package/src/lib/scss/__steps.scss

@@ -0,0 +1,100 @@
+/* ── Steps (Starlight-like) ───────────────────────── */
+.markdown-body .greg-steps,
+.markdown-body steps {
+    --_size: 1.75rem;
+    --_margin: var(--greg-steps-guide-gap, 0.5rem);
+    --_guide: var(--greg-steps-guide-color, color-mix(in srgb, var(--greg-accent) 42%, var(--greg-border-color)));
+    margin: 1.75rem 0;
+}
+
+.markdown-body .greg-steps > ol,
+.markdown-body steps > ol {
+    list-style: none;
+    counter-reset: greg-steps-counter;
+    padding-inline-start: 0;
+    margin: 0;
+}
+
+.markdown-body .greg-steps > ol > li,
+.markdown-body steps > ol > li {
+    counter-increment: greg-steps-counter;
+    position: relative;
+    list-style: none;
+    padding-inline-start: calc(var(--_size) + 1rem);
+    padding-bottom: 1px;
+    min-height: calc(var(--_size) + var(--_margin));
+}
+
+.markdown-body .greg-steps > ol > li::marker,
+.markdown-body steps > ol > li::marker {
+    content: '';
+}
+
+.markdown-body .greg-steps > ol > li + li,
+.markdown-body steps > ol > li + li {
+    margin-top: 0;
+}
+
+.markdown-body .greg-steps > ol > li::before,
+.markdown-body steps > ol > li::before {
+    content: counter(greg-steps-counter);
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: var(--_size);
+    height: var(--_size);
+    line-height: var(--_size);
+    text-align: center;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #fff;
+    background-color: var(--greg-accent);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--greg-accent) 82%, black);
+}
+
+.markdown-body .greg-steps > ol > li::after,
+.markdown-body steps > ol > li::after {
+    content: '';
+    position: absolute;
+    top: calc(var(--_size) + var(--_margin));
+    /* compensate li padding-bottom:1px so top and bottom gaps are equal */
+    bottom: max(0px, calc(var(--_margin) - 1px));
+    inset-inline-start: calc((var(--_size) - 2px) / 2);
+    width: 2px;
+    background-color: var(--_guide);
+}
+
+.markdown-body .greg-steps > ol > li:last-child::after,
+.markdown-body steps > ol > li:last-child::after {
+    display: none;
+}
+
+.markdown-body .greg-steps > ol > li > :first-child,
+.markdown-body steps > ol > li > :first-child {
+    --lh: calc(1em * 1.75);
+    --shift-y: calc(0.5 * (var(--_size) - var(--lh)));
+    margin-top: 0;
+    transform: translateY(var(--shift-y));
+    margin-bottom: var(--shift-y);
+}
+
+@supports (--prop: 1lh) {
+    .markdown-body .greg-steps > ol > li > :first-child,
+    .markdown-body steps > ol > li > :first-child {
+        --lh: 1lh;
+    }
+}
+
+.markdown-body .greg-steps > ol > li > :first-child:where(h1, h2, h3, h4, h5, h6),
+.markdown-body steps > ol > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
+    --lh: calc(1em * 1.3);
+}
+
+.markdown-body .greg-steps > ol > li > p:first-child > strong:first-child,
+.markdown-body steps > ol > li > p:first-child > strong:first-child {
+    display: block;
+    font-weight: 600;
+    color: var(--greg-color);
+}
+