Split up css files

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import * as Tooltip from "@radix-ui/react-tooltip"
-import "../src/index.css"
+import "../src/styles/index.css"
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

src/styles/cmdk.css

@@ -0,0 +1,41 @@
+[cmdk-overlay] {
+  @apply fixed inset-0 z-20 bg-bg-inset-backdrop animate-in fade-in;
+}
+
+[cmdk-dialog] {
+  @apply fixed left-1/2 top-2 z-20 w-[calc(100vw_-_1rem)] max-w-xl -translate-x-1/2 sm:top-[10vh];
+}
+
+[cmdk-input] {
+  @apply w-full bg-transparent px-5 py-4 text-lg leading-none outline-none;
+}
+
+[cmdk-input]::placeholder {
+  @apply text-text-tertiary;
+}
+
+[cmdk-list] {
+  @apply max-h-[min(400px,50vh)] overflow-y-auto overflow-x-hidden;
+  scroll-padding-block-start: 8px;
+  scroll-padding-block-end: 8px;
+}
+
+[cmdk-list]:has([cmdk-list-sizer]:not(:empty)) {
+  @apply border-t border-border-secondary p-2;
+}
+
+[cmdk-group-heading] {
+  @apply px-3 py-2 leading-4 text-text-secondary;
+}
+
+[cmdk-group]:not(:first-child) {
+  @apply mt-2;
+}
+
+[cmdk-item] {
+  @apply cursor-default rounded-sm px-3 py-3 leading-4;
+}
+
+[cmdk-item][aria-selected] {
+  @apply bg-bg-secondary;
+}

src/styles/codemirror.css

@@ -0,0 +1,66 @@
+.cm-editor {
+  @apply w-full cursor-text font-mono;
+}
+
+.cm-editor.cm-editor.cm-focused {
+  @apply outline-none;
+}
+
+.cm-editor .cm-content {
+  width: 100%;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  /* caret-color: currentColor; */
+}
+
+.cm-editor .cm-line {
+  padding: 0;
+}
+
+.cm-editor .cm-scroller {
+  @apply leading-5;
+  font-family: unset;
+}
+
+.cm-editor .cm-cursor {
+  border-left-width: 2px;
+  margin-left: 0px;
+}
+
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete {
+  @apply max-w-sm rounded-md border-0 bg-bg-overlay p-1 shadow-lg ring-1 ring-border-secondary dark:ring-inset;
+}
+
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
+  @apply font-mono text-[inherit];
+}
+
+.cm-editor .cm-tooltip.cm-completionInfo {
+  @apply w-96 max-w-none whitespace-pre-wrap rounded-md border-0 bg-bg-overlay p-1 px-3 py-2 font-mono text-[inherit] shadow-lg ring-1 ring-border-secondary dark:ring-inset;
+  word-break: break-word;
+}
+
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+  @apply flex rounded-sm px-2 py-1 coarse:px-3 coarse:py-2;
+}
+
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
+  @apply bg-bg-secondary text-text;
+}
+
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li .cm-completionDetail {
+  @apply ml-2 not-italic text-text-secondary;
+}
+
+.cm-editor .cm-completionMatchedText {
+  @apply no-underline;
+}
+
+.cm-editor .cm-placeholder {
+  @apply text-text-tertiary;
+}
+
+.cm-editor .cm-gutters {
+  @apply hidden;
+}

src/styles/fonts.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iA Writer Quattro";
+  src: url("/fonts/iAWriterQuattroV.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "iA Writer Quattro";
+  src: url("/fonts/iAWriterQuattroV-Italic.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "iA Writer Mono";
+  src: url("/fonts/iAWriterMonoV.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "iA Writer Mono";
+  src: url("/fonts/iAWriterMonoV-Italic.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  font-style: italic;
+}