starlight-theme-bejamas 0.0.0-canary.0138fd3

package/src/styles/theme.css

@@ -0,0 +1,776 @@
+@layer starlight, bejamas;
+
+@import "@fontsource-variable/inter/index.css";
+
+@layer bejamas {
+  html {
+    background-color: var(--sl-page-background);
+  }
+
+  @media (min-width: 64rem) {
+    :root::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      right: calc(var(--spacing) * 6);
+      background:
+        linear-gradient(
+            to bottom,
+            transparent 50%,
+            var(--sl-main-frame-inner-border) 50%
+          )
+          left / 1px 100% no-repeat,
+        linear-gradient(
+            to bottom,
+            transparent 50%,
+            var(--sl-main-frame-inner-border) 50%
+          )
+          right / 1px 100% no-repeat,
+        linear-gradient(
+          to bottom,
+          var(--sl-page-background) 49.99%,
+          var(--sl-main-frame-inner-background) 50%
+        );
+      z-index: -1;
+      left: calc(var(--spacing) * 6);
+    }
+
+    :root[data-has-sidebar]::after {
+      left: var(--sl-sidebar-width);
+    }
+
+    :root[data-has-sidebar]:has(.page-mobile-sidebar-only)::after {
+      left: calc(var(--spacing) * 6);
+    }
+  }
+
+  .page {
+    background-color: var(--sl-page-background);
+  }
+
+  :root {
+    --sl-font: var(--font-sans);
+    --sl-font-mono: var(--font-mono);
+
+    --sl-color-text-accent: var(--accent-foreground);
+
+    --sl-color-banner-text: var(--foreground);
+
+    --sl-color-bg-inline-code: var(--input);
+
+    --sl-color-hairline-shade: var(--border);
+
+    --sl-color-gray-5: var(--input);
+    --sl-color-black: transparent;
+
+    --code-background: var(--background);
+    --sl-color-text: var(--foreground);
+
+    --sl-text-h1: var(--text-3xl);
+    --sl-text-h2: var(--text-xl);
+    --sl-text-h3: var(--text-lg);
+
+    --sl-color-gray-2: var(--input);
+
+    --default-font-family: var(--font-sans);
+
+    --sl-color-bg: var(--background);
+    --sl-color-fg: var(--foreground);
+    --sl-color-primary: var(--primary);
+    --sl-color-primary-fg: var(--primary-foreground);
+
+    --sl-color-hairline: var(--border);
+    --sl-color-bg-nav: var(--background);
+
+    --sl-color-text-accent: var(--primary);
+    --sl-color-accent: var(--primary);
+
+    --sl-nav-height: calc(var(--spacing) * 15);
+    /* --sl-nav-height: auto; */
+    --sl-nav-pad-y: calc(var(--spacing) * 4.5);
+    --sl-content-pad-x: calc(var(--spacing) * 5);
+    --sl-docs-top-space: calc(var(--spacing) * 12);
+    --sl-nav-pad-x: calc(var(--spacing) * 1 + var(--sl-content-pad-x));
+    --sl-main-frame-inner-background: var(--background);
+    --sl-main-frame-inner-border: var(--border);
+    --sl-content-inline-start: 0rem;
+    --sl-page-background: color-mix(
+      in oklab,
+      var(--muted) 50%,
+      var(--background)
+    );
+    --sl-color-bg-sidebar: transparent;
+
+    --sl-icon-color: var(--foreground);
+    --ec-frm-inlBtnBgHoverOrFocusOpa: 1;
+    --ec-frm-trmIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgcGhvc3Bob3I6IGh0dHBzOi8vZ2l0aHViLmNvbS9waG9zcGhvci1pY29ucy9waG9zcGhvci1pY29ucyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgaWQ9IkZsYXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExNy4zMTQ5NCwxMzMuOTc5NDlsLTcyLDY0YTguMDAwMTgsOC4wMDAxOCwwLDAsMS0xMC42Mjk4OC0xMS45NTlMOTkuOTU4NSwxMjgsMzQuNjg1MDYsNjkuOTc5NDlhOC4wMDAxOCw4LjAwMDE4LDAsMCwxLDEwLjYyOTg4LTExLjk1OWw3Miw2NGE4LjAwMDU0LDguMDAwNTQsMCwwLDEsMCwxMS45NTlaTTIxNS45OTQxNCwxODRoLTk2YTgsOCwwLDAsMCwwLDE2aDk2YTgsOCwwLDEsMCwwLTE2WiIvPgo8L3N2Zz4=);
+    --ecGtrBrdWd: 5px;
+    --sl-nav-gap: calc(var(--spacing) * 2);
+  }
+
+  @media (min-width: 50em) {
+    :root {
+      --sl-nav-height: calc(var(--spacing) * 18);
+    }
+    [data-has-sidebar] {
+      --sl-sidebar-width: 0;
+    }
+  }
+
+  @media (min-width: 64em) {
+    [data-has-sidebar] {
+      --sl-sidebar-width: 18.75rem;
+    }
+  }
+
+  html {
+    scrollbar-gutter: stable;
+  }
+
+  html[data-theme="dark"],
+  html.dark {
+    --sl-page-background: var(--background);
+    --sl-main-frame-inner-background: color-mix(
+      in oklab,
+      var(--muted) 30%,
+      var(--background)
+    );
+    --sl-main-frame-inner-border: color-mix(
+      in oklab,
+      var(--border) 50%,
+      var(--background)
+    );
+  }
+}
+
+@layer bejamas {
+  .sidebar-pane .sidebar-content {
+    --sl-sidebar-item-padding-inline: 1rem;
+    padding-top: 0;
+  }
+
+  .right-sidebar-panel {
+    --sl-sidebar-item-padding-inline: 1rem;
+    padding-top: var(--sl-docs-top-space);
+  }
+
+  .right-sidebar-panel a {
+    color: var(--muted-foreground);
+  }
+
+  .right-sidebar-panel a[aria-current="true"] {
+    color: var(--foreground);
+  }
+
+  .right-sidebar-panel a:hover {
+    color: var(--foreground);
+  }
+
+  .right-sidebar,
+  .sidebar .sidebar-pane {
+    border: 0;
+  }
+
+  @media (min-width: 72rem) {
+    .right-sidebar {
+      position: sticky;
+      top: var(--sl-nav-height);
+      padding-top: 0;
+      height: auto;
+    }
+  }
+
+  .sidebar-content a {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .group-label > span {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .group-label + svg {
+    color: var(--muted-foreground);
+    font-size: 1rem;
+  }
+
+  .sidebar-content details > summary .caret {
+    transform: rotate(90deg);
+  }
+
+  .sidebar-content details[open] > summary .caret {
+    transform: rotate(-90deg);
+  }
+
+  .sidebar-content a > span {
+    color: var(--foreground);
+    padding-inline: 0.5rem;
+    padding-block: 0.375rem;
+    border-radius: 0.5rem;
+    /* transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-duration: 0.05s; */
+    display: inline-block;
+  }
+
+  .sidebar-content a[aria-current="page"] > span {
+    background-color: var(--secondary);
+    color: var(--foreground);
+    font-weight: 500;
+  }
+
+  .sidebar-content a:not([aria-current="page"]):hover > span {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+
+  .sidebar-content ul ul li {
+    margin-inline-start: 0;
+    border-inline-start: 0;
+    padding-inline-start: 0;
+    margin-bottom: 1px;
+  }
+
+  @media (min-width: 64rem) {
+    .sidebar-pane .sidebar-content {
+      padding-top: var(--sl-docs-top-space);
+    }
+
+    .sidebar-content::before {
+      display: none;
+    }
+  }
+
+  @media (max-width: 49.99rem) {
+    .sidebar-pane .sidebar-content {
+      --sl-sidebar-item-padding-inline: 0.5rem;
+      padding-top: calc(var(--spacing) * 3);
+    }
+
+    .sidebar-content::before {
+      display: none;
+    }
+
+    .sidebar-content .large {
+      font-size: var(--sl-text-xl);
+      line-height: 1.25;
+    }
+
+    .sidebar-content ul ul a > span {
+      font-size: var(--sl-text-lg);
+      line-height: 1.35;
+    }
+
+    .sidebar-content .group-label > span {
+      font-size: var(--sl-text-sm);
+      font-weight: 500;
+    }
+  }
+
+  .right-sidebar-container {
+    max-width: 20rem;
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .content-panel {
+    border-top: 0;
+  }
+
+  .content-panel:first-child {
+    padding-bottom: 0;
+    padding-top: calc(var(--spacing) * 5);
+  }
+
+  .content-panel:last-child {
+    padding-bottom: 0;
+  }
+
+  @media (min-width: 50rem) {
+    .content-panel:first-child {
+      padding-top: var(--sl-docs-top-space);
+    }
+  }
+
+  .right-sidebar-panel h2 {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding-inline: 0.5rem;
+  }
+
+  .expressive-code .frame {
+    box-shadow: none;
+  }
+
+  .expressive-code .frame pre {
+    border: 1px solid var(--border);
+  }
+
+  .expressive-code .frame.is-terminal .header {
+    padding: 0;
+  }
+
+  .expressive-code .copy {
+    top: calc(var(--spacing) * 2);
+  }
+
+  .expressive-code .copy button {
+    opacity: 1;
+  }
+
+  .expressive-code .frame.is-terminal .header::before {
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--muted-foreground);
+    opacity: 1;
+  }
+
+  .expressive-code .frame.is-terminal .header .title::after {
+    content: "Terminal";
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    margin-left: 2rem;
+    font-family: var(--font-sans);
+  }
+
+  .expressive-code .copy button div {
+    background: var(--secondary);
+  }
+
+  ul.top-level li details ul li:last-child {
+    margin-bottom: 1.25rem;
+  }
+
+  ul.top-level summary {
+    margin-bottom: 0.25rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper {
+    background-color: var(--code-background);
+    border: 1px solid var(--border);
+    border-bottom: 0;
+
+    padding-top: 0;
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+    font-size: 0.75rem;
+  }
+
+  .expressive-code pre {
+    border-radius: var(--radius-lg);
+  }
+
+  .expressive-code .frame.has-title pre {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .expressive-code .frame.is-terminal pre {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ul {
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    gap: 0;
+  }
+
+  .tab {
+    margin-bottom: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a {
+    border-bottom: 0;
+    padding-block: calc(var(--spacing) * 0.5);
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a[aria-selected="true"] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-bottom: 0;
+    border-radius: calc(var(--radius) - 4px);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ~ div[role="tabpanel"] {
+    margin-top: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] figcaption.header .title {
+    border-radius: 0;
+    border-top: 0;
+  }
+
+  .tablist-wrapper > ul {
+    border: 0;
+    gap: 1.25rem;
+  }
+
+  .tablist-wrapper > ul a {
+    padding-inline: 0;
+  }
+
+  .tablist-wrapper > ul a[aria-selected="true"] {
+    font-weight: 500;
+  }
+
+  .sl-heading-wrapper.level-h2:not(:first-child) {
+    margin-top: 4rem;
+  }
+
+  .sl-heading-wrapper.level-h3:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  .sl-markdown-content a:not(:where(.not-content *)) {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+
+  .tablist-wrapper ~ [role="tabpanel"] {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
+
+  starlight-tabs starlight-tabs {
+    margin-top: 0;
+  }
+
+  /* .expressive-code .header {
+    background-color: var(--background);
+    border: 1px solid var(--border);
+  } */
+
+  .expressive-code .title {
+    background-color: var(--background);
+    color: var(--muted-foreground);
+    border-color: var(--border);
+    border: 1px solid var(--border);
+
+    width: 100%;
+    border-bottom: 0;
+    font-size: 0.75rem;
+    padding-block: 0.75rem;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
+
+  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+    font-weight: 500;
+  }
+
+  .sl-bejamas-component-preview {
+    min-height: calc(var(--spacing) * 72);
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--background);
+    position: relative;
+    z-index: 10;
+  }
+
+  .sl-bejamas-component-preview + .expressive-code {
+    margin-top: 0;
+  }
+
+  .sl-bejamas-component-preview + .expressive-code pre {
+    border-radius: 0;
+    border: 0;
+  }
+
+  .sl-bejamas-component-preview + .expressive-code {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    border: 1px solid var(--border);
+    border-top: 0;
+  }
+
+  .sl-bejamas-component-preview + .sl-bejamas-console-log-shell {
+    margin-top: 0;
+  }
+
+  .sl-bejamas-console-log-shell + .expressive-code {
+    margin-top: 0;
+  }
+
+  .sl-bejamas-console-log-shell + .expressive-code pre {
+    border-radius: 0;
+    border: 0;
+  }
+
+  .sl-bejamas-console-log-shell + .expressive-code {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    border: 1px solid var(--border);
+    border-top: 0;
+  }
+
+  .expressive-code {
+    border-radius: var(--radius-lg);
+  }
+
+  .ec-collapse__toggle {
+    font-family: var(--font-sans);
+    background-color: var(--background);
+    color: var(--muted-foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.15s ease-out;
+    bottom: 50%;
+    transform: translateY(50%) translateX(-50%);
+    height: calc(var(--spacing) * 8.5);
+    z-index: 3;
+  }
+
+  .expressive-code .ec-collapse.ec-collapse--collapsed .ec-collapse__content {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .expressive-code .ec-collapse__gradient {
+    height: 100%;
+    z-index: 1;
+  }
+
+  .ec-collapse--collapsed .ec-collapse__content {
+    max-height: 98px;
+  }
+
+  .ec-collapse.ec-collapse--collapsed::after {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 100%;
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+    background: linear-gradient(to bottom, transparent, var(--background));
+    mask-image: linear-gradient(
+      to top,
+      var(--background) var(--stop),
+      transparent
+    );
+    bottom: 0;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    z-index: 2;
+  }
+
+  .ec-collapse.ec-collapse--expanded .ec-collapse__toggle {
+    display: none;
+  }
+
+  .ec-collapse.ec-collapse--expanded {
+    max-height: calc(var(--spacing) * 72);
+    overflow: auto;
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .ec-collapse__toggle:hover {
+    background-color: var(--muted);
+    color: var(--foreground);
+  }
+
+  .ec-collapse__icon {
+    display: none;
+  }
+
+  .sl-markdown-content ul:not(:where(.not-content *)) {
+    list-style: disc;
+    padding-left: 1rem;
+  }
+
+  .sl-markdown-content ol:not(:where(.not-content *)) {
+    list-style: decimal;
+    padding-left: 1rem;
+  }
+
+  .tablist-wrapper {
+    overflow-x: inherit;
+  }
+
+  .tablist-wrapper a[role="tab"] {
+    border-bottom: 0;
+    padding: 0;
+    display: inline-block;
+  }
+
+  /* Table styles */
+  .sl-markdown-content table:not(:where(.not-content *)) {
+    display: table !important;
+    font-size: var(--text-sm);
+    border-collapse: collapse;
+    width: 100% !important;
+    table-layout: fixed;
+  }
+
+  .sl-markdown-content th:not(:where(.not-content *)) {
+    text-align: left;
+    font-weight: 600;
+    color: var(--foreground);
+    padding: calc(var(--spacing) * 3) 1rem calc(var(--spacing) * 3) 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sl-markdown-content td:not(:where(.not-content *)) {
+    color: var(--muted-foreground);
+    padding: calc(var(--spacing) * 3) 1rem calc(var(--spacing) * 3) 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sl-markdown-content tr:last-child td:not(:where(.not-content *)) {
+    border-bottom: 0;
+  }
+
+  /* Remove code styling inside tables */
+  .sl-markdown-content td:not(:where(.not-content *)) code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  .main-frame {
+    min-height: 100svh;
+  }
+
+  @media (min-width: 50em) {
+    .main-frame {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (min-width: 64em) {
+    .main-frame {
+      padding-inline-end: calc(var(--spacing) * 6);
+      padding-inline-start: var(--sl-content-inline-start);
+    }
+  }
+
+  .sidebar-content::before {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 40px;
+    position: sticky;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+
+    background: linear-gradient(to top, transparent, var(--sl-page-background));
+    mask-image: linear-gradient(
+      to bottom,
+      var(--background) var(--stop),
+      transparent
+    );
+    top: 0;
+  }
+
+  .sidebar-content::after {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 80px;
+    position: sticky;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--sl-page-background)
+    );
+    mask-image: linear-gradient(
+      to top,
+      var(--sl-page-background) var(--stop),
+      transparent
+    );
+    bottom: 0;
+  }
+
+  starlight-file-tree {
+    --x-space: calc(var(--spacing) * 5);
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+  }
+
+  starlight-file-tree ul {
+    border-inline-start-color: var(--border);
+  }
+
+  starlight-file-tree .comment {
+    color: var(--muted-foreground);
+    max-width: calc(var(--spacing) * 150);
+  }
+
+  .sl-menu-button {
+    box-shadow: none;
+    padding: 0;
+    width: calc(var(--spacing) * 6);
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .sl-menu-button svg {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    font-size: calc(var(--spacing) * 8);
+  }
+
+  @media (min-width: 50rem) and (max-width: calc(64rem - 0.01rem)) {
+    .sl-menu-button {
+      display: flex;
+    }
+
+    body:has(#starlight__sidebar:popover-open) {
+      overflow: hidden;
+    }
+  }
+
+  #starlight__on-this-page--mobile {
+    /* border-top: 1px solid var(--border); */
+    border-bottom: 0;
+  }
+
+  #starlight__on-this-page--mobile .toggle {
+    border: 0;
+    color: var(--muted-foreground);
+    padding-left: 0;
+    background-color: var(--background);
+  }
+
+  .sl-container {
+    margin-inline: auto;
+  }
+
+  @media (min-width: 64rem) {
+    .sl-container {
+      margin-inline: var(--sl-content-margin-inline, auto);
+    }
+  }
+
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+}