initial commit

src/styles/docs/collapsible.css

@@ -0,0 +1,66 @@
+[data-scope='collapsible'][data-part='root'] {
+  --height: max-content;
+  padding: 0.673rem;
+  background-color: hsl(var(--white) 40 50 / 0.1);
+  border-radius: 0.618rem;
+}
+
+[data-scope='collapsible'][data-part='content'] {
+  transition: all 250ms;
+  padding: 0;
+  margin-left: 0;
+}
+
+[data-scope='collapsible'][data-part='content'][data-state='open'] {
+  animation: slideDown 250ms;
+  display: flex;
+  gap: 1.272rem;
+  flex-direction: column;
+  padding: 0.618em;
+  margin-left: 22px;
+
+  & p {
+    margin-block: 0;
+
+  }
+
+}
+
+[data-scope='collapsible'][data-part='content'][data-state='closed'] {
+  animation: slideUp 200ms;
+  padding: 0;
+  margin-left: 0;
+
+  & svg {
+    animation: rotateOut90 250ms;
+  }
+}
+
+[data-scope='collapsible'][data-part='trigger'] {
+  all: unset;
+  cursor: pointer;
+  font-size: 1.117rem;
+  font-weight: 500;
+  display: flex;
+  gap: 0.272rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.618rem;
+  border-radius: 0.618rem;
+
+  &:hover {
+    background-color: hsl(var(--white) 40 50 / 0.1);
+  }
+
+  &[data-state='open'] {
+    & svg {
+      animation: rotateIn90 250ms forwards;
+    }
+  }
+
+  &[data-state='closed'] {
+    & svg {
+      animation: rotateOut90 250ms forwards;
+    }
+  }
+}

src/styles/docs/docs-config.css

@@ -0,0 +1,13 @@
+.small {
+  opacity: 0.6;
+  transition: opacity 0.5s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  & p {
+    font-size: 0.841rem;
+    margin-top: 1rem;
+  }
+}

src/styles/docs/docs-types.css

@@ -0,0 +1,407 @@
+.root-nav {
+  margin-left: 1em;
+  display: flex;
+  flex-direction: column;
+
+  & .root-nav-entry {
+    margin-block: 1em;
+  }
+}
+
+.types-nav {
+  display: none;
+}
+
+.typedocs-title {
+  & a {
+    opacity: 0.6;
+    transition: opacity 0.5s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+#injectedMd {
+  &>p:not(:first-child) {
+    margin-block: 0.724rem;
+  }
+
+}
+
+.type-module {
+  color: hsl(var(--blue) 75 60);
+}
+
+.typedocs-subheading {
+  margin-bottom: 1rem;
+}
+
+.typedocs-content {
+
+  &>p {
+    margin-block: 0.618rem;
+  }
+
+  & hr {
+    margin-top: 0;
+    margin-bottom: 0.318rem;
+  }
+}
+
+
+.typedocs-data {
+  & subheading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.618rem;
+  }
+}
+
+.typedata {
+  list-style: none;
+  margin: 0;
+
+  & .typedata-root {
+    margin-bottom: 0.618rem;
+    border-radius: 12px;
+    padding: 1.272rem;
+    transition: border 0.3s;
+
+
+    &>.typedata-name {
+      display: flex;
+      align-items: center;
+      font-size: 1.272rem;
+      margin: 0;
+      margin-top: 0.272rem;
+
+      &>svg {
+        width: 27px;
+        height: 27px;
+        margin-right: 6px;
+      }
+    }
+  }
+
+  & .typedata-details {
+    margin-top: 1.618rem;
+  }
+
+  & .typedata-params {
+    & .typedata-param {
+      margin-top: 0.272rem;
+      display: flex;
+      align-items: center;
+      gap: 0.117rem;
+
+      &>svg {
+        height: 1.272rem;
+        width: 1.272rem;
+      }
+    }
+  }
+
+  & .typedata-detailsdata,
+  .typedocs-subheading {
+    &>p {
+      margin-top: 0.618rem;
+    }
+
+    & .typeprop-link {
+      color: hsl(var(--prop-link-color));
+
+      & a {
+        color: hsl(var(--prop-link-color));
+      }
+    }
+
+    & .typesignal-link {
+      color: hsl(var(--signal-link-color));
+
+      & a {
+        color: hsl(var(--signal-link-color));
+      }
+    }
+
+    & .typefunc-link {
+      color: hsl(var(--func-link-color));
+
+      & a {
+        color: hsl(var(--func-link-color));
+      }
+    }
+
+    & .typevar-link {
+      color: hsl(var(--var-link-color));
+
+      & a {
+        color: hsl(var(--var-link-color))
+      }
+    }
+  }
+}
+
+
+.typedata-link {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 3px;
+
+  & svg {
+    width: 18px;
+    height: 18px;
+    align-self: center;
+  }
+}
+
+
+.typedata-param {
+  color: hsla(var(--prop-link-color) / 1);
+}
+
+.type-datatype {
+  color: #808080;
+  opacity: 0.8;
+  width: max-content;
+  transition: opacity 0.5s;
+
+  &>a {
+    opacity: inherit;
+  }
+}
+
+.type-flags {
+  & .type-flag {
+    margin: 0;
+    margin-top: 0.272rem;
+    display: flex;
+    align-items: center;
+    gap: 0.117rem;
+    color: hsl(var(--inner-param-color))
+  }
+}
+
+.typeprops {
+  & .typeprop-root {
+    border: 1px solid hsla(var(--prop-color) / 0.3);
+
+    &:hover {
+      border: 1px solid hsla(var(--prop-color) / 0.6);
+
+      & .type-datatype {
+        opacity: 1;
+      }
+    }
+
+    & .typeprop-name {
+      color: hsl(var(--prop-link-color));
+    }
+
+  }
+}
+
+.typefuncs {
+  & .typefunc-root {
+    border: 1px solid hsla(var(--func-color) / 0.3);
+
+    &:hover {
+      border: 1px solid hsla(var(--func-color) / 0.6);
+
+      & .type-datatype {
+        opacity: 1;
+      }
+    }
+
+    & .typefunc-name {
+      color: hsl(var(--func-link-color));
+    }
+
+    & .typefunc-params {
+
+      & .typefunc-param {
+        margin-top: 0.272rem;
+        display: flex;
+        align-items: center;
+        gap: 0.117rem;
+
+        &>svg {
+          height: 1.272rem;
+          width: 1.272rem;
+        }
+      }
+
+    }
+
+  }
+}
+
+
+.typesignals {
+  & .typesignal-root {
+    border: 1px solid hsla(var(--signal-color) / 0.3);
+
+    &:hover {
+      border: 1px solid hsla(var(--signal-color) / 0.6);
+
+      & .typesignal-doclink {
+        opacity: 1;
+      }
+    }
+
+    & .typesignal-name {
+      position: relative;
+      width: max-content;
+      color: hsl(var(--signal-link-color));
+
+      & .typesignal-doclink {
+        position: absolute;
+        top: -12px;
+        right: -12px;
+        opacity: 0.8;
+        scale: 75%;
+      }
+    }
+
+    & .typesignal-params {
+      & .typesignal-param {
+        margin-top: 0.272rem;
+        display: flex;
+        align-items: center;
+        gap: 0.117rem;
+
+        &>svg {
+          height: 1.272rem;
+          width: 1.272rem;
+        }
+      }
+    }
+  }
+}
+
+.typevariants {
+  & .typevariant-root {
+    border: 1px solid hsla(var(--var-color) / 0.3);
+
+    &:hover {
+      border: 1px solid hsla(var(--var-color) / 0.6);
+
+      & .typevariant-doclink {
+        opacity: 1;
+      }
+    }
+
+    & .typevariant-name {
+      position: relative;
+      width: max-content;
+      color: hsl(var(--var-link-color));
+
+      & .typevariant-doclink {
+        position: absolute;
+        top: -12px;
+        right: -12px;
+        opacity: 0.8;
+        scale: 75%;
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .typedocs-content {
+    margin-inline: 1.272rem;
+
+    & section {
+      min-width: 30svw;
+    }
+
+    &>p {
+      margin-block: 1.217rem;
+    }
+  }
+}
+
+@media (min-width: 1280px) {
+  .typedata {
+    max-width: 47svw;
+  }
+
+  .typedata-detailsdata,
+  .typedocs-subheading {
+    max-width: 42svw;
+
+  }
+
+  .root-nav {
+    min-width: 45svw;
+  }
+
+  .types-nav {
+    display: block;
+    position: fixed;
+    top: 5rem;
+    right: 10svw;
+    width: 250px;
+    max-height: 90svh;
+    overflow-y: scroll;
+    z-index: 10;
+
+    & .props-list {
+      color: hsl(var(--prop-color));
+
+      & a {
+        color: hsl(var(--prop-link-color));
+      }
+    }
+
+    & .funcs-list {
+      color: hsl(var(--func-color));
+
+      & a {
+        color: hsl(var(--func-link-color));
+      }
+    }
+
+    & .signals-list {
+      color: hsl(var(--signal-color));
+
+      & a {
+        color: hsl(var(--signal-link-color));
+      }
+    }
+
+    & .vars-list {
+      color: hsl(var(--var-color));
+
+      & a {
+        color: hsl(var(--var-link-color));
+      }
+    }
+
+    & .types-list {
+      list-style: none;
+
+      & .types-item {
+        margin-block: 10px;
+        display: flex;
+        align-items: center;
+        gap: 0.478rem;
+
+        & svg {
+          opacity: 0.6;
+          width: 24px;
+          height: 24px;
+          transition: opacity 0.5s;
+        }
+
+        &:hover {
+          & svg {
+            opacity: 1;
+          }
+        }
+      }
+
+    }
+  }
+}

src/styles/docs/docs.css

@@ -0,0 +1,124 @@
+@import "./docs-config.css";
+@import "./docs-types.css";
+
+.docslayout-root {
+  margin: 0.618rem;
+  margin-top: 3.5rem;
+  overflow: hidden;
+}
+
+.docs,
+.docslayout-root {
+  display: flex;
+  flex-direction: column;
+}
+
+.spacer-desktop {
+  display: none;
+}
+
+.c-breadcrumbs {
+  margin-top: 1.056rem;
+  margin-bottom: 0.318rem;
+  max-width: 100svw;
+}
+
+.docs-content {
+  & section {
+    max-width: 95svw;
+    margin-block: 1.618rem;
+  }
+
+  & p {
+    margin-block: 0.618rem;
+  }
+
+  & hr {
+    margin-top: 0;
+    margin-bottom: 0.318rem;
+  }
+}
+
+.heading {
+  & > [id] {
+    width: max-content;
+  }
+
+  & .heading-hashtag {
+    & svg {
+      width: 24px;
+      height: 24px;
+      opacity: 0.5;
+      transition: opacity 0.5s;
+
+      &:hover {
+        opacity: 1;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+hr {
+  opacity: 0.3;
+}
+
+ul {
+  margin-left: 2.478rem;
+}
+
+.markdown-alert {
+  margin-block: 0.618rem;
+
+  & > *:not(:first-child) {
+    margin-block: 0.724rem;
+  }
+}
+
+.markdown-alert-title {
+  text-transform: lowercase;
+  text-transform: capitalize;
+}
+
+@media (min-width: 768px) {
+  .docs,
+  .docslayout-root {
+    gap: 0.648rem;
+  }
+
+  .docslayout-root {
+    margin-left: calc(1.618rem + 260px);
+  }
+
+  .docslayout-inner {
+    display: block;
+  }
+
+  .docs-content {
+    margin-inline: 1.272rem;
+
+    & section {
+      margin-block: 1.884rem;
+    }
+
+    & p {
+      margin-block: 1.217rem;
+    }
+  }
+
+  .c-breadcrumbs {
+    margin-inline: 1.272rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .docs-content {
+    & section {
+      max-width: 45svw;
+    }
+  }
+
+  .docslayout-root {
+    margin-inline: calc(10svw + 260px);
+  }
+}

src/styles/docs/nav/nav-tree.css

@@ -0,0 +1,171 @@
+[data-scope="accordion"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+
+  & [data-part="item"] {
+    padding: 6px;
+
+    & [data-part="item"] {
+      padding-right: 0;
+
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-trigger"] {
+  background-color: hsl(var(--bg-900));
+  position: relative;
+  border: unset;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  height: 36px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.15em;
+
+  & p:has(a) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-inline: 4px;
+    border-radius: 20px;
+
+    &:hover {
+      position: relative;
+      width: max-content;
+      padding: 4px;
+      overflow: scroll;
+      z-index: 101;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    border-radius: 6px;
+    z-index: -1;
+    inset: -1px;
+    background-color: hsla(var(--green) 80 70 / 0.3);
+    transition: background-color 0.3s;
+  }
+
+  &:hover {
+    &::before {
+      background-color: hsla(var(--green) 80 70 / 0.6);
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-indicator"] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-left: 3px;
+
+  &:hover {
+    background-color: hsl(var(--blue) 30 30);
+  }
+
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
+  animation: rotateIn 250ms ease-in-out forwards;
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="closed"] {
+  animation: rotateOut 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"] {
+  --height: 709;
+  margin-block: 0.175rem;
+
+  &>.arktree-item,
+  [data-part="item"] {
+    margin-left: 21px;
+    margin-block: 0.117rem;
+  }
+
+  & .arktree-item,
+  [data-part="item-content"]>div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15em;
+    margin-left: 24px;
+    margin-top: 0.224em;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 75%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 0;
+      transition: width 0.25s;
+    }
+
+    &:hover::before {
+      width: 100%;
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+
+    &>a {
+      padding-top: 1em;
+      width: 100%;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+  animation: slideDown 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+  animation: slideUp 200ms ease-in-out;
+}
+
+.__current-type-doc {
+  color: hsl(var(--blue) 100 70);
+
+  & [data-part="item-trigger"] a {
+    color: hsl(var(--blue) 100 70) !important;
+
+  }
+
+  &>a {
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 100%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 100%;
+
+    }
+
+    &:hover::before {
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+  }
+}

src/styles/docs/nav/nav.css

@@ -0,0 +1,127 @@
+@import "./nav-tree.css";
+
+.nav-wrapper {
+  display: none;
+}
+
+.nav-toggle {
+  position: unset;
+  height: 24px;
+  font-size: 1.614rem;
+  overflow-y: scroll;
+  max-height: 500px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & svg,
+  div {
+    height: max-content;
+    width: 100%;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .nav-items {
+    position: absolute;
+    z-index: 11;
+    overflow-y: scroll;
+    top: 2.5rem;
+    left: -1rem;
+    width: 0;
+    height: 0;
+    font-size: 0.745rem;
+    font-weight: 600;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      background-color 0.3s ease,
+      backdrop-filter 0.3s ease,
+      padding 0.3s ease;
+
+    &.shown {
+      padding: 0.3rem;
+      width: 100svw;
+      height: 50svh;
+      background-color: hsl(var(--bg-900) / 0.6);
+      backdrop-filter: blur(3px) saturate(180%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    & .navtree {
+      height: 100%;
+      width: 100%;
+      overflow: scroll;
+      padding: 6px;
+
+      & [data-part="item"] {
+        margin-left: unset;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding-right: 0;
+
+        & [data-part="item-content"] {
+          & [data-part="item-trigger"] {
+            width: 93%;
+            margin-left: 1em;
+
+            & p {
+              text-align: left;
+            }
+          }
+
+          & [data-part="item-content"] {
+            width: 80%;
+            margin-left: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .nav-wrapper-mobile {
+    display: none;
+  }
+
+  .nav-wrapper {
+    display: block;
+    width: 250px;
+    position: fixed;
+    top: 5rem;
+    left: 1.618rem;
+    flex-shrink: 0;
+    overflow: scroll;
+    max-height: 90svh;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    z-index: 10;
+  }
+
+  .navtree {
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+@media (min-width: 1280px) {
+  .nav-wrapper {
+    left: 10svw;
+  }
+}

src/styles/docs/toc/intro-toc.css

@@ -0,0 +1,29 @@
+.toc-wrapper-mobile .toc-content {
+  & .toc_a {
+    transition: color 0.33s;
+    color: hsl(var(--green) 72 40);
+  }
+
+  & ul {
+    margin: 0;
+  }
+
+  & li {
+    list-style: none;
+
+    &.active {
+      & > .toc_a {
+        color: hsl(var(--green) 72 60);
+      }
+    }
+  }
+
+  & .toc_heading {
+    margin: 0;
+    margin-block: 0.618rem;
+
+    & * {
+      margin-left: 0.348rem;
+    }
+  }
+}

src/styles/docs/toc/toc.css

@@ -0,0 +1,125 @@
+@import "./types-toc.css";
+@import "./intro-toc.css";
+
+.toc-wrapper {
+  display: none;
+}
+
+.toc-wrapper-mobile {
+  display: block;
+}
+
+.toc-toggle {
+  --width: 100svw;
+  display: block;
+  position: unset;
+  height: 24px;
+  font-size: 1.614rem;
+  max-height: 500px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > svg {
+    height: 100%;
+    width: 24px;
+  }
+
+  & div {
+    width: 100%;
+    height: max-content;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .toc-mobile {
+    position: absolute;
+    overflow-y: scroll;
+    top: 2.6rem;
+    right: -1rem;
+    width: 0;
+    height: 0;
+    font-size: 0.745rem;
+    font-weight: 600;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      background-color 0.3s ease,
+      backdrop-filter 0.3s ease,
+      padding 0.3s ease;
+
+    &.shown {
+      padding: 0.3rem;
+      width: var(--width);
+      height: 50svh;
+      background-color: hsl(var(--bg-900) / 0.6);
+      backdrop-filter: blur(3px) saturate(180%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+@media (max-width: 1280px) {
+  .toc-toggle {
+    --width: 70svw;
+  }
+}
+
+@media (min-width: 1280px) {
+  .toc-wrapper-mobile {
+    display: none;
+  }
+
+  .toc-wrapper {
+    display: block;
+    position: fixed;
+    top: 5rem;
+    right: 10svw;
+    width: 250px;
+    max-height: 90svh;
+    overflow-y: scroll;
+    z-index: 10;
+
+    & .toc_a {
+      transition: color 0.33s;
+      color: hsl(var(--green) 72 40);
+    }
+
+    & ul {
+      margin: 0;
+    }
+
+    & li {
+      list-style: none;
+
+      &.active {
+        & > .toc_a {
+          color: hsl(var(--green) 72 60);
+        }
+      }
+    }
+
+    & .toc_heading {
+      margin: 0;
+      margin-block: 0.618rem;
+
+      & * {
+        margin-left: 0.348rem;
+      }
+    }
+  }
+}

src/styles/docs/toc/types-toc.css

@@ -0,0 +1,63 @@
+.toc-content {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+  padding: 6px;
+
+  & .props-list {
+    color: hsl(var(--prop-color));
+
+    & a {
+      color: hsl(var(--prop-link-color));
+    }
+  }
+
+  & .funcs-list {
+    color: hsl(var(--func-color));
+
+    & a {
+      color: hsl(var(--func-link-color));
+    }
+  }
+
+  & .signals-list {
+    color: hsl(var(--signal-color));
+
+    & a {
+      color: hsl(var(--signal-link-color));
+    }
+  }
+
+  & .vars-list {
+    color: hsl(var(--var-color));
+
+    & a {
+      color: hsl(var(--var-link-color));
+    }
+  }
+}
+
+.types-list {
+  list-style: none;
+  z-index: 21;
+
+  & .types-item {
+    margin-block: 10px;
+    display: flex;
+    align-items: center;
+    gap: 0.478rem;
+
+    & svg {
+      opacity: 0.6;
+      width: 24px;
+      height: 24px;
+      transition: opacity 0.5s;
+    }
+
+    &:hover {
+      & svg {
+        opacity: 1;
+      }
+    }
+  }
+}