@upstart.gg/style-system 0.0.23

package/src/default-theme.css

@@ -0,0 +1,246 @@
+@layer upstart-theme, upstart-generated, upstart-utilities;
+
+@layer upstart-theme {
+
+  [data-upstart-theme] {
+    font-family: initial;
+    background: initial;
+    color: initial;
+  }
+
+  :root {
+    /* Luminance threshold for deciding between light and dark text */
+    --luminance-threshold: 0.6;
+    --l-threshold: 0.7;
+    --l: clamp(0, (var(--l-threshold) / l - 1) * infinity, 1);
+  }
+  :root {
+
+    [data-upstart-theme="clarity"] {
+      /* Base Colors */
+      --color-primary: #FF5733;    /* Coral Pink */
+      --color-secondary: #4ECDC4;  /* Turquoise */
+      --color-accent: #FFC300;     /* Golden Yellow */
+      --color-neutral: #95A5A6;       /* Cool Gray */
+
+      /* Link Colors */
+      --color-link: var(--color-primary);
+    }
+  }
+}
+
+@layer upstart-generated {
+  :root {
+
+
+    /* Background Colors (3 shades, 0, 1 and 2) */
+    --color-bg-neutral-0: var(--color-neutral-0);
+    --color-bg-neutral-1: var(--color-neutral-1);
+    --color-bg-neutral-2: var(--color-neutral-2);
+
+    --color-bg-primary-0: var(--color-primary-0);
+    --color-bg-primary-1: var(--color-primary-1);
+    --color-bg-primary-2: var(--color-primary-2);
+
+    --color-bg-secondary-0: var(--color-secondary-0);
+    --color-bg-secondary-1: var(--color-secondary-1);
+    --color-bg-secondary-2: var(--color-secondary-2);
+
+    --color-bg-tertiary-0: var(--color-tertiary-0);
+    --color-bg-tertiary-1: var(--color-tertiary-1);
+    --color-bg-tertiary-2: var(--color-tertiary-2);
+
+    --color-bg-accent-0: var(--color-accent-0);
+    --color-bg-accent-1: var(--color-accent-1);
+    --color-bg-accent-2: var(--color-accent-2);
+
+    /* Interactive Element Colors (from shade #3 to #5) */
+    --color-interactive-primary-1: var(--color-primary-3);
+    --color-interactive-primary-2: var(--color-primary-4);
+    --color-interactive-primary-3: var(--color-primary-5);
+
+    --color-interactive-secondary-1: var(--color-secondary-3);
+    --color-interactive-secondary-2: var(--color-secondary-4);
+    --color-interactive-secondary-3: var(--color-secondary-5);
+
+    --color-interactive-tertiary-1: var(--color-tertiary-3);
+    --color-interactive-tertiary-2: var(--color-tertiary-4);
+    --color-interactive-tertiary-3: var(--color-tertiary-5);
+
+
+    /** Borders and separators shades (3 shades) */
+    --color-border-neutral-1: var(--color-neutral-6);
+    --color-border-neutral-2: var(--color-neutral-7);
+    --color-border-neutral-3: var(--color-neutral-8);
+
+    --color-border-primary-1: var(--color-primary-6);
+    --color-border-primary-2: var(--color-primary-7);
+    --color-border-primary-3: var(--color-primary-8);
+
+    --color-border-secondary-1: var(--color-secondary-6);
+    --color-border-secondary-2: var(--color-secondary-7);
+    --color-border-secondary-3: var(--color-secondary-8);
+
+    --color-border-tertiary-1: var(--color-tertiary-6);
+    --color-border-tertiary-2: var(--color-tertiary-7);
+    --color-border-tertiary-3: var(--color-tertiary-8);
+
+    /* Solid Element Colors (from shade #9 to #10) */
+    --color-solid-neutral-1: var(--color-neutral-9);
+    --color-solid-neutral-2: var(--color-neutral-10);
+
+    --color-solid-primary-1: var(--color-primary-9);
+    --color-solid-primary-2: var(--color-primary-10);
+
+    --color-solid-secondary-1: var(--color-secondary-9);
+    --color-solid-secondary-2: var(--color-secondary-10);
+
+    --color-solid-tertiary-1: var(--color-tertiary-9);
+    --color-solid-tertiary-2: var(--color-tertiary-10);
+
+    /* Fonts stacks */
+    --font-system-ui: system-ui, sans-serif;
+    --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
+    --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
+    --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+    --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
+    --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
+    --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
+    --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
+    --font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
+    --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
+    --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
+    --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
+    --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
+    --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
+    --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
+  }
+}
+
+
+@layer upstart-utilities {
+
+  /* Font classes */
+  .font-system-ui { font-family: var(--font-system-ui); }
+  .font-transitional { font-family: var(--font-transitional); }
+  .font-old-style { font-family: var(--font-old-style); }
+  .font-humanist { font-family: var(--font-humanist); }
+  .font-geometric-humanist { font-family: var(--font-geometric-humanist); }
+  .font-classical-humanist { font-family: var(--font-classical-humanist); }
+  .font-neo-grotesque { font-family: var(--font-neo-grotesque); }
+  .font-monospace-slab-serif { font-family: var(--font-monospace-slab-serif); }
+  .font-monospace-code { font-family: var(--font-monospace-code); }
+  .font-industrial { font-family: var(--font-industrial); }
+  .font-rounded-sans { font-family: var(--font-rounded-sans); }
+  .font-slab-serif { font-family: var(--font-slab-serif); }
+  .font-antique { font-family: var(--font-antique); }
+  .font-didone { font-family: var(--font-didone); }
+  .font-handwritten { font-family: var(--font-handwritten); }
+
+  /* Utility Classes */
+
+  /* Background Color Utilities */
+
+  /* Interactive Element Color Utilities */
+  .interactive-primary-1 { background-color: var(--color-interactive-primary-1); color: var(--text-primary-3); }
+  .interactive-primary-2 { background-color: var(--color-interactive-primary-2); color: var(--text-primary-4); }
+  .interactive-primary-3 { background-color: var(--color-interactive-primary-3); color: var(--text-primary-5); }
+
+  .interactive-secondary-1 { background-color: var(--color-interactive-secondary-1); color: var(--text-secondary-3); }
+  .interactive-secondary-2 { background-color: var(--color-interactive-secondary-2); color: var(--text-secondary-4); }
+  .interactive-secondary-3 { background-color: var(--color-interactive-secondary-3); color: var(--text-secondary-5); }
+
+  .interactive-tertiary-1 { background-color: var(--color-interactive-tertiary-1); color: var(--text-tertiary-3); }
+  .interactive-tertiary-2 { background-color: var(--color-interactive-tertiary-2); color: var(--text-tertiary-4); }
+  .interactive-tertiary-3 { background-color: var(--color-interactive-tertiary-3); color: var(--text-tertiary-5); }
+
+
+  /* Solid Element Color Utilities */
+  .solid-neutral-1 { background-color: var(--color-solid-neutral-1); color: var(--text-neutral-9); }
+  .solid-neutral-2 { background-color: var(--color-solid-neutral-2); color: var(--text-neutral-10); }
+
+  .solid-primary-1 { background-color: var(--color-solid-primary-1); color: var(--text-primary-9); }
+  .solid-primary-2 { background-color: var(--color-solid-primary-2); color: var(--text-primary-10); }
+
+  .solid-secondary-1 { background-color: var(--color-solid-secondary-1); color: var(--text-secondary-9); }
+  .solid-secondary-2 { background-color: var(--color-solid-secondary-2); color: var(--text-secondary-10); }
+
+  .solid-tertiary-1 { background-color: var(--color-solid-tertiary-1); color: var(--text-tertiary-9); }
+  .solid-tertiary-2 { background-color: var(--color-solid-tertiary-2); color: var(--text-tertiary-10); }
+
+  .border-neutral-1 { border-color: var(--color-border-neutral-1); }
+  .border-neutral-2 { border-color: var(--color-border-neutral-2); }
+  .border-neutral-3 { border-color: var(--color-border-neutral-3); }
+
+  .border-primary-1 { border-color: var(--color-border-primary-1); }
+  .border-primary-2 { border-color: var(--color-border-primary-2); }
+  .border-primary-3 { border-color: var(--color-border-primary-3); }
+
+  .border-secondary-1 { border-color: var(--color-border-secondary-1); }
+  .border-secondary-2 { border-color: var(--color-border-secondary-2); }
+  .border-secondary-3 { border-color: var(--color-border-secondary-3); }
+
+  .border-tertiary-1 { border-color: var(--color-border-tertiary-1); }
+  .border-tertiary-2 { border-color: var(--color-border-tertiary-2); }
+  .border-tertiary-3 { border-color: var(--color-border-tertiary-3); }
+
+
+  .btn {
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+
+  .btn.interactive-primary-1 {
+    &.solid {
+      color: var(--text-primary-3);
+      background-color: var(--color-interactive-primary-1);
+    }
+    &:hover {
+      background-color: var(--color-interactive-primary-2);
+      color: var(--text-primary-4);
+    }
+    &:disabled {
+      background-color: var(--color-interactive-primary-1);
+      color: var(--text-primary-3);
+    }
+  }
+
+  .btn.interactive-primary-2 {
+    &:hover {
+      background-color: var(--color-interactive-primary-3);
+      color: var(--text-primary-5);
+    }
+    &:disabled {
+      background-color: var(--color-interactive-primary-2);
+      color: var(--text-primary-4);
+    }
+  }
+
+  .btn.interactive-secondary-1 {
+    &:hover {
+      background-color: var(--color-interactive-secondary-2);
+      color: var(--text-secondary-4);
+    }
+    &:disabled {
+      background-color: var(--color-interactive-secondary-1);
+      color: var(--text-secondary-3);
+    }
+  }
+
+  .btn.interactive-secondary-2 {
+    &:hover {
+      background-color: var(--color-interactive-secondary-3);
+      color: var(--text-secondary-5);
+    }
+    &:disabled {
+      background-color: var(--color-interactive-secondary-2);
+      color: var(--text-secondary-4);
+    }
+  }
+
+
+}
+
+
+

package/src/radix.css

@@ -0,0 +1,311 @@
+/* @import "@radix-ui/themes/styles.css"; */
+
+.radix-themes {
+	--cursor-button: pointer;
+	--cursor-checkbox: pointer;
+	--cursor-disabled: default;
+	--cursor-link: pointer;
+	--cursor-menu-item: pointer;
+	--cursor-radio: pointer;
+	--cursor-slider-thumb: grab;
+	--cursor-slider-thumb-active: grabbing;
+	--cursor-switch: pointer;
+}
+
+:root, .light, .light-theme {
+  --violet-1: #fcfcfe;
+  --violet-2: #f8f9fe;
+  --violet-3: #f1f2fc;
+  --violet-4: #e6e7fc;
+  --violet-5: #dbddfa;
+  --violet-6: #cdcff4;
+  --violet-7: #b9bbe9;
+  --violet-8: #9fa1dc;
+  --violet-9: #7270c6;
+  --violet-10: #6663b7;
+  --violet-11: #5d5ba5;
+  --violet-12: #2c2b53;
+
+  --violet-a1: #0000aa03;
+  --violet-a2: #0025db07;
+  --violet-a3: #0013c90e;
+  --violet-a4: #000be119;
+  --violet-a5: #000fdc24;
+  --violet-a6: #000bc732;
+  --violet-a7: #0008af46;
+  --violet-a8: #0006a360;
+  --violet-a9: #04009a8f;
+  --violet-a10: #05008a9c;
+  --violet-a11: #030073a4;
+  --violet-a12: #010030d4;
+
+  --violet-contrast: #fff;
+  --violet-surface: #f6f8fecc;
+  --violet-indicator: #7270c6;
+  --violet-track: #7270c6;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --violet-1: oklch(99.2% 0.002 282.7);
+      --violet-2: oklch(98.3% 0.0065 282.7);
+      --violet-3: oklch(96.3% 0.0135 282.7);
+      --violet-4: oklch(93.4% 0.0279 282.7);
+      --violet-5: oklch(90.4% 0.0406 282.7);
+      --violet-6: oklch(86.4% 0.052 282.7);
+      --violet-7: oklch(80.7% 0.0649 282.7);
+      --violet-8: oklch(72.9% 0.0857 282.7);
+      --violet-9: oklch(58.6% 0.1295 282.7);
+      --violet-10: oklch(54.2% 0.1284 282.7);
+      --violet-11: oklch(50.8% 0.1161 282.7);
+      --violet-12: oklch(31.3% 0.0704 282.7);
+
+      --violet-a1: color(display-p3 0.0235 0.0235 0.6745 / 0.012);
+      --violet-a2: color(display-p3 0.0235 0.1608 0.8627 / 0.028);
+      --violet-a3: color(display-p3 0.0039 0.0745 0.7176 / 0.055);
+      --violet-a4: color(display-p3 0.0118 0.051 0.8039 / 0.099);
+      --violet-a5: color(display-p3 0.0078 0.0627 0.8078 / 0.142);
+      --violet-a6: color(display-p3 0.0078 0.0471 0.7216 / 0.197);
+      --violet-a7: color(display-p3 0.0039 0.0314 0.6314 / 0.275);
+      --violet-a8: color(display-p3 0.0039 0.0235 0.5961 / 0.377);
+      --violet-a9: color(display-p3 0.0157 0 0.5608 / 0.561);
+      --violet-a10: color(display-p3 0.0157 0 0.5059 / 0.612);
+      --violet-a11: color(display-p3 0.0118 0 0.4196 / 0.644);
+      --violet-a12: color(display-p3 0.0039 0 0.1765 / 0.832);
+
+      --violet-contrast: #fff;
+      --violet-surface: color(display-p3 0.9725 0.9725 0.9922 / 0.8);
+      --violet-indicator: oklch(58.6% 0.1295 282.7);
+      --violet-track: oklch(58.6% 0.1295 282.7);
+    }
+  }
+}
+
+:root, .light, .light-theme {
+  --gray-1: #fcfcfd;
+  --gray-2: #f9f9fb;
+  --gray-3: #eff0f3;
+  --gray-4: #e7e8ec;
+  --gray-5: #e0e1e6;
+  --gray-6: #d8d9e0;
+  --gray-7: #cdced7;
+  --gray-8: #b9bbc6;
+  --gray-9: #8b8d98;
+  --gray-10: #80828d;
+  --gray-11: #62636c;
+  --gray-12: #1e1f24;
+
+  --gray-a1: #00005503;
+  --gray-a2: #00005506;
+  --gray-a3: #00104010;
+  --gray-a4: #000b3618;
+  --gray-a5: #0009321f;
+  --gray-a6: #00073527;
+  --gray-a7: #00063332;
+  --gray-a8: #00083046;
+  --gray-a9: #00051d74;
+  --gray-a10: #00051b7f;
+  --gray-a11: #0002119d;
+  --gray-a12: #000107e1;
+
+  --gray-contrast: #FFFFFF;
+  --gray-surface: #ffffffcc;
+  --gray-indicator: #8b8d98;
+  --gray-track: #8b8d98;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-1: oklch(99.1% 0.0015 277.7);
+      --gray-2: oklch(98.2% 0.003 277.7);
+      --gray-3: oklch(95.6% 0.0045 277.7);
+      --gray-4: oklch(93.1% 0.0061 277.7);
+      --gray-5: oklch(91% 0.0077 277.7);
+      --gray-6: oklch(88.8% 0.0093 277.7);
+      --gray-7: oklch(85.3% 0.0117 277.7);
+      --gray-8: oklch(79.4% 0.016 277.7);
+      --gray-9: oklch(64.6% 0.0165 277.7);
+      --gray-10: oklch(61% 0.0161 277.7);
+      --gray-11: oklch(50.3% 0.0139 277.7);
+      --gray-12: oklch(24.1% 0.0099 277.7);
+
+      --gray-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
+      --gray-a2: color(display-p3 0.0235 0.0235 0.349 / 0.024);
+      --gray-a3: color(display-p3 0.0078 0.0667 0.2549 / 0.063);
+      --gray-a4: color(display-p3 0.0118 0.051 0.2157 / 0.095);
+      --gray-a5: color(display-p3 0.0039 0.0392 0.2 / 0.122);
+      --gray-a6: color(display-p3 0.0039 0.0275 0.1804 / 0.153);
+      --gray-a7: color(display-p3 0.0078 0.0275 0.1843 / 0.197);
+      --gray-a8: color(display-p3 0.0039 0.0314 0.1765 / 0.275);
+      --gray-a9: color(display-p3 0.0039 0.0196 0.1059 / 0.455);
+      --gray-a10: color(display-p3 0.0039 0.0196 0.098 / 0.499);
+      --gray-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
+      --gray-a12: color(display-p3 0 0.0039 0.0275 / 0.883);
+
+      --gray-contrast: #FFFFFF;
+      --gray-surface: color(display-p3 1 1 1 / 80%);
+      --gray-indicator: oklch(64.6% 0.0165 277.7);
+      --gray-track: oklch(64.6% 0.0165 277.7);
+    }
+  }
+}
+
+:root, .light, .light-theme, .radix-themes {
+  --color-background: #fff;
+}
+
+.dark, .dark-theme {
+  --violet-1: #10101a;
+  --violet-2: #161624;
+  --violet-3: #232245;
+  --violet-4: #2d2960;
+  --violet-5: #36326f;
+  --violet-6: #403d7d;
+  --violet-7: #4d4a90;
+  --violet-8: #5d59ad;
+  --violet-9: #5b57ab;
+  --violet-10: #4e4b92;
+  --violet-11: #ababff;
+  --violet-12: #dee0fd;
+
+  --violet-a1: #0000f70a;
+  --violet-a2: #4e4ef815;
+  --violet-a3: #635ffe38;
+  --violet-a4: #6559ff55;
+  --violet-a5: #6f65ff65;
+  --violet-a6: #7972ff74;
+  --violet-a7: #817bfe89;
+  --violet-a8: #847efea8;
+  --violet-a9: #847dffa5;
+  --violet-a10: #817bfe8b;
+  --violet-a11: #ababff;
+  --violet-a12: #e0e2fffd;
+
+  --violet-contrast: #fff;
+  --violet-surface: #1b1b3780;
+  --violet-indicator: var(--accent-11);
+  /* --violet-indicator: #5b57ab; */
+  --violet-track: #5b57ab;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --violet-1: oklch(17.8% 0.021 282.8);
+      --violet-2: oklch(20.6% 0.0279 282.8);
+      --violet-3: oklch(27.1% 0.0647 282.8);
+      --violet-4: oklch(31.7% 0.0955 282.8);
+      --violet-5: oklch(35.7% 0.1024 282.8);
+      --violet-6: oklch(39.8% 0.1049 282.8);
+      --violet-7: oklch(44.8% 0.1129 282.8);
+      --violet-8: oklch(50.8% 0.1302 282.8);
+      --violet-9: oklch(50.3% 0.1302 282.8);
+      --violet-10: oklch(45.3% 0.1129 282.8);
+      --violet-11: oklch(77.6% 0.125 282.8);
+      --violet-12: oklch(91.4% 0.0401 282.8);
+
+      --violet-a1: color(display-p3 0 0 0.9922 / 0.034);
+      --violet-a2: color(display-p3 0.3255 0.3255 0.9961 / 0.076);
+      --violet-a3: color(display-p3 0.4039 0.3843 0.9961 / 0.211);
+      --violet-a4: color(display-p3 0.3961 0.3608 0.9961 / 0.32);
+      --violet-a5: color(display-p3 0.4392 0.4078 0.9961 / 0.379);
+      --violet-a6: color(display-p3 0.4784 0.4588 1 / 0.437);
+      --violet-a7: color(display-p3 0.5216 0.5059 1 / 0.513);
+      --violet-a8: color(display-p3 0.5333 0.5137 1 / 0.635);
+      --violet-a9: color(display-p3 0.5255 0.5059 1 / 0.627);
+      --violet-a10: color(display-p3 0.5176 0.5059 1 / 0.522);
+      --violet-a11: color(display-p3 0.6863 0.6863 1 / 0.975);
+      --violet-a12: color(display-p3 0.8863 0.8941 1 / 0.984);
+
+      --violet-contrast: #fff;
+      --violet-surface: color(display-p3 0.102 0.102 0.2039 / 0.5);
+      --violet-indicator: oklch(50.3% 0.1302 282.8);
+      --violet-track: oklch(50.3% 0.1302 282.8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --gray-1: #111113;
+  --gray-2: #19191b;
+  --gray-3: #222325;
+  --gray-4: #292a2e;
+  --gray-5: #303136;
+  --gray-6: #393a40;
+  --gray-7: #46484f;
+  --gray-8: #5f606a;
+  --gray-9: #6c6e79;
+  --gray-10: #797b86;
+  --gray-11: #b2b3bd;
+  --gray-12: #eeeef0;
+
+  --gray-a1: #1111bb03;
+  --gray-a2: #cbcbf90b;
+  --gray-a3: #d6e2f916;
+  --gray-a4: #d1d9f920;
+  --gray-a5: #d7ddfd28;
+  --gray-a6: #d9defc33;
+  --gray-a7: #dae2fd43;
+  --gray-a8: #e0e3fd60;
+  --gray-a9: #e0e4fd70;
+  --gray-a10: #e3e7fd7e;
+  --gray-a11: #eff0feb9;
+  --gray-a12: #fdfdffef;
+
+  --gray-contrast: #FFFFFF;
+  --gray-surface: rgba(0, 0, 0, 0.05);
+  --gray-indicator: #6c6e79;
+  --gray-track: #6c6e79;
+
+  .rt-SliderRoot:where(.rt-variant-soft) :where(.rt-SliderRange) {
+    background-color: var(--violet-a1);
+  }
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-1: oklch(17.8% 0.0042 277.7);
+      --gray-2: oklch(21.5% 0.004 277.7);
+      --gray-3: oklch(25.5% 0.0055 277.7);
+      --gray-4: oklch(28.4% 0.0075 277.7);
+      --gray-5: oklch(31.4% 0.0089 277.7);
+      --gray-6: oklch(35% 0.01 277.7);
+      --gray-7: oklch(40.2% 0.0121 277.7);
+      --gray-8: oklch(49.2% 0.0157 277.7);
+      --gray-9: oklch(54% 0.0167 277.7);
+      --gray-10: oklch(58.6% 0.0165 277.7);
+      --gray-11: oklch(77% 0.0138 277.7);
+      --gray-12: oklch(94.9% 0.0026 277.7);
+
+      --gray-a1: color(display-p3 0.0667 0.0667 0.9412 / 0.009);
+      --gray-a2: color(display-p3 0.8 0.8 0.9804 / 0.043);
+      --gray-a3: color(display-p3 0.851 0.898 0.9882 / 0.085);
+      --gray-a4: color(display-p3 0.8392 0.8706 1 / 0.122);
+      --gray-a5: color(display-p3 0.8471 0.8745 1 / 0.156);
+      --gray-a6: color(display-p3 0.8784 0.898 1 / 0.194);
+      --gray-a7: color(display-p3 0.8745 0.9059 0.9961 / 0.257);
+      --gray-a8: color(display-p3 0.8941 0.9059 1 / 0.37);
+      --gray-a9: color(display-p3 0.8902 0.9098 1 / 0.433);
+      --gray-a10: color(display-p3 0.902 0.9176 1 / 0.488);
+      --gray-a11: color(display-p3 0.9451 0.949 1 / 0.719);
+      --gray-a12: color(display-p3 0.9922 0.9922 1 / 0.937);
+
+      --gray-contrast: #FFFFFF;
+      --gray-surface: color(display-p3 0 0 0 / 5%);
+      --gray-indicator: oklch(54% 0.0167 277.7);
+      --gray-track: oklch(54% 0.0167 277.7);
+    }
+  }
+}
+
+.dark, .dark-theme, :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --color-background: #111;
+}
+
+.selecto-selection {
+  background-color: var(--violet-a3) !important;
+  border-color: var(--violet-8) !important;
+}

package/src/react-resizable.css

@@ -0,0 +1,24 @@
+.react-resizable {
+  position: relative;
+}
+
+.react-resizable-handle-sw {
+  cursor: sw-resize;
+}
+.react-resizable-handle-se {
+  cursor: se-resize;
+}
+.react-resizable-handle-nw {
+  cursor: nw-resize;
+}
+.react-resizable-handle-ne {
+  cursor: ne-resize;
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  cursor: ew-resize;
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  cursor: ns-resize;
+}

package/src/system.ts

@@ -0,0 +1,4 @@
+export * from "@radix-ui/themes";
+export { useAutoAnimate } from "@formkit/auto-animate/react";
+export * as ContextMenu from "@radix-ui/react-context-menu";
+export * as ToggleGroup from "@radix-ui/react-toggle-group";

package/src/tailwind.config.js

@@ -0,0 +1,64 @@
+import forms from "@tailwindcss/forms";
+import scrollbars from "tailwind-scrollbar";
+import typography from "@tailwindcss/typography";
+import plugin from "tailwindcss/plugin";
+import easing from "@whiterussianstudio/tailwind-easing";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        upstart: {
+          50: "#f2f4fb",
+          100: "#e7ecf8",
+          200: "#d3daf2",
+          300: "#b8c2e9",
+          400: "#9ba3de",
+          500: "#8186d3",
+          600: "#7270c6",
+          700: "#5b57ab",
+          800: "#4b498a",
+          900: "#40406f",
+          950: "#262541",
+        },
+        dark: {
+          50: "#f6f6f6",
+          100: "#e7e7e7",
+          200: "#d1d1d1",
+          300: "#b0b0b0",
+          400: "#888888",
+          500: "#6d6d6d",
+          600: "#5d5d5d",
+          700: "#4f4f4f",
+          800: "#454545",
+          900: "#333333",
+          950: "#262626",
+        },
+      },
+      textShadow: {
+        sm: "0 1px 1px var(--tw-shadow-color)",
+        md: "0 1px 2px var(--tw-shadow-color)",
+        DEFAULT: "0 2px 4px var(--tw-shadow-color)",
+        lg: "0 4px 8px var(--tw-shadow-color)",
+        xl: "0 8px 16px var(--tw-shadow-color)",
+      },
+    },
+  },
+  plugins: [
+    forms,
+    typography,
+    scrollbars,
+    easing,
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          "text-shadow": (value) => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme("textShadow") },
+      );
+    }),
+  ],
+};

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/tiptap-text-editor.css

@@ -0,0 +1,15 @@
+.tiptap {
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+}

package/src/twind-ssr.ts

@@ -0,0 +1 @@
+export { default as TwindStream } from "@twind/with-react/pipeableStream";