initial commit

src/styles/css-config/animations.css

@@ -0,0 +1,107 @@
+@property --percent {
+  syntax: '<percentage>';
+  initial-value: 0%;
+  inherits: false;
+}
+
+@keyframes pulseGreen {
+  0% {
+    background-color: hsl(var(--blue) 85 35 / 0.1);
+    color: hsl(var(--blue) 100 69 / 1.0);
+  }
+
+  50% {
+    background-color: hsl(var(--green) 85 35 / 0.5);
+    color: hsl(var(--green) 100 69 / 1.0);
+  }
+
+  100% {
+    background-color: hsl(var(--blue) 85 35 / 0.1);
+    color: hsl(var(--blue) 100 69 / 1.0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0.001;
+    height: 0;
+  }
+
+  to {
+    opacity: 1;
+    height: var(--height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    height: var(--height);
+  }
+
+  to {
+    opacity: 0;
+    height: 0;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes rotateIn90 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes rotateOut90 {
+  from {
+    transform: rotate(90deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+
+@keyframes percentToFifty {
+  from {
+    --percent: 0%;
+  }
+
+  to {
+    --percent: 50%;
+  }
+}
+
+@keyframes percentToZero {
+  from {
+    --percent: 50%;
+  }
+
+  to {
+    --percent: 0%;
+  }
+}

src/styles/css-config/base.css

@@ -0,0 +1,79 @@
+html {
+  font-family: 'Rubik', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.272;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  color-scheme: light dark;
+  /* accent */
+  --green: 141;
+  --accent-400: var(--green) 100 67;
+  --accent-500: var(--green) 100 57;
+  --accent-600: var(--green) 98 50;
+
+  /* secondary */
+  --blue: 224;
+  --secondary-400: var(--blue) 100 68;
+  --secondary-500: var(--blue) 100 58;
+  --secondary-600: var(--blue) 53 41;
+  --secondary-700: var(--blue) 43 31;
+  --secondary-800: var(--blue) 23 21;
+  --secondary-900: var(--blue) 44 7;
+
+  /* primary */
+  --white: 194;
+  --bg-400: var(--white) 33 100;
+  --bg-500: var(--white) 12 96;
+  --bg-600: var(--white) 12 76;
+  --bg-700: var(--white) 12 56;
+  --bg-800: var(--white) 12 36;
+  --bg-900: var(--white) 12 16;
+}
+
+html.dark {
+  /* accent */
+  --green: 141;
+  --accent-400: var(--green) 100 67;
+  --accent-500: var(--green) 95 55;
+  --accent-600: var(--green) 90 40;
+
+  /* secondary */
+  --white: 194;
+  --secondary-400: var(--white) 33 100;
+  --secondary-500: var(--white) 33 96;
+  --secondary-600: var(--white) 33 76;
+  --secondary-700: var(--white) 33 56;
+  --secondary-800: var(--white) 35 36;
+  --secondary-900: var(--white) 44 7;
+
+  /* primary */
+  --blue: 224;
+  --bg-400: var(--blue) 90 65;
+  --bg-500: var(--blue) 83 45;
+  --bg-700: var(--blue) 82 25;
+  --bg-800: var(--blue) 82 15;
+  --bg-900: var(--blue) 82 3;
+
+  /* docs */
+  --prop-color: 350 78 70;
+  --prop-link-color: 350 78 60;
+  --func-color: 50 78 70;
+  --func-link-color: 50 78 60;
+  --signal-color: 270 78 70;
+  --signal-link-color: 270 85 60;
+  --var-color: 190 78 70;
+  --var-link-color: 190 85 60;
+  --inner-param-color: 215 60 70;
+}
+
+* {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}

src/styles/css-config/code.css

@@ -0,0 +1,42 @@
+:where(p, li):has(>code) code {
+  padding-inline: 0.272rem;
+  border-radius: 0.272rem;
+  color: hsl(var(--blue) 100 69);
+  background-color: hsl(var(--blue) 85 35 / 0.1);
+}
+
+pre {
+  padding: 1rem;
+  margin: 0.618rem;
+  border-radius: 0.618rem;
+  overflow: auto;
+  text-wrap: wrap;
+
+  &>button {
+    all: unset;
+    width: 3svh;
+    height: 3svh;
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-size: 1.618rem;
+    font-weight: 500;
+    border-radius: 0.272rem;
+    padding: 0.418rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--blue) 100 69);
+    background-color: hsl(var(--blue) 85 35 / 0.1);
+    cursor: pointer;
+    transition: color 0.25s;
+
+    &:hover {
+      color: hsl(var(--blue) 100 75);
+    }
+
+    &.copied {
+      animation: pulseGreen 0.5s cubic-bezier(0, 1, 0.6, 1);
+    }
+  }
+}

src/styles/css-config/colors.css

@@ -0,0 +1,31 @@
+.typeprop-link {
+  color: hsl(var(--prop-link-color));
+
+  & a {
+    color: hsl(var(--prop-link-color)) !important;
+  }
+}
+
+.typesignal-link {
+  color: hsl(var(--signal-link-color));
+
+  & a {
+    color: hsl(var(--signal-link-color)) !important;
+  }
+}
+
+.typefunc-link {
+  color: hsl(var(--func-link-color));
+
+  & a {
+    color: hsl(var(--func-link-color)) !important;
+  }
+}
+
+.typevar-link {
+  color: hsl(var(--var-link-color));
+
+  & a {
+    color: hsl(var(--var-link-color)) !important;
+  }
+}

src/styles/css-config/modal.css

@@ -0,0 +1,41 @@
+.search-output {
+  position: fixed;
+  inset: 0 25svw;
+  top: 3.6rem;
+  z-index: 33;
+  max-height: 100svw;
+  max-width: 50svw;
+
+  overflow: scroll;
+  overflow-x: show;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: max-content;
+  row-gap: 0.618rem;
+  padding: 1rem;
+}
+
+.search-output::before {
+  content: "";
+  position: fixed;
+  inset: -4rem;
+  backdrop-filter: blur(4px);
+  overflow: hidden;
+  background-color: hsla(0 0 0 / 0.3);
+}
+
+.search-output_item {
+  height: max-content;
+  padding: 1rem;
+  border: 2px solid rgba(200, 200, 200, 0.23);
+  border-radius: 12px;
+  background-color: hsl(0 0 0);
+  overflow: hidden;
+
+  & mark {
+    all: unset;
+    background: hsla(53 800 34 / 0.5);
+    padding-inline: 3px;
+  }
+}

src/styles/css-config/search.css

@@ -0,0 +1 @@
+@import "./modal.css";

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;
+      }
+    }
+  }
+}

src/styles/global.css

@@ -0,0 +1,142 @@
+@import "remark-github-blockquote-alert/alert.css";
+@import "./css-config/base.css";
+@import "./css-config/animations.css";
+@import "./css-config/code.css";
+@import "./css-config/search.css";
+@import "./css-config/colors.css";
+@import "./docs/nav/nav.css";
+@import "./docs/toc/toc.css";
+@import "./docs/docs.css";
+@import "./docs/collapsible.css";
+
+/* color styling */
+.header {
+  background-color: hsl(var(--blue) 100 88);
+  box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.3);
+}
+
+.baselayout,
+.docslayout {
+  background-color: hsl(var(--bg-500));
+  color: hsl(var(--secondary-900));
+}
+
+a {
+  color: hsla(var(--accent-600));
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+html.dark {
+  & .header {
+    background-color: hsl(var(--secondary-900));
+    color: hsl(var(--secondary-500));
+  }
+
+  & .baselayout,
+  .docslayout {
+    background-color: hsl(var(--bg-900));
+    color: hsl(var(--secondary-400));
+  }
+
+  & a {
+    color: hsl(var(--accent-500));
+  }
+}
+
+/* layout and positioning */
+.unset {
+  all: unset;
+}
+
+.search {
+  display: none;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+}
+
+.header-title {
+  display: none;
+  font-size: 1.614em;
+  font-weight: 700;
+  line-height: 1.272;
+}
+
+.header-title.mobile {
+  display: block;
+}
+
+.header-item {
+  display: flex;
+  gap: 1rem;
+  flex-shrink: 0;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.header-left {
+  justify-content: flex-start;
+  padding-left: 1rem;
+}
+
+.header-right {
+  justify-content: flex-end;
+  padding-right: 1rem;
+}
+
+.spacer-mobile {
+  font-size: 1.374rem;
+  color: hsla(var(--white) 40 50 / 0.3);
+}
+
+.theme-toggle {
+  height: 24px;
+  font-size: 1.614rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+
+  .header-title {
+    display: block;
+  }
+
+  .header-title.mobile {
+    display: none;
+  }
+
+  .menu-toggle,
+  .spacer-mobile {
+    display: none;
+  }
+
+  .search {
+    display: block;
+  }
+
+  .spacer-desktop {
+    display: block;
+    font-size: 1.374rem;
+    color: hsla(var(--white) 40 50 / 0.3);
+  }
+}
+
+@media (min-width: 1280px) {}