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";