@tanstack/cta-ui 0.10.0-alpha.26 → 0.10.0-alpha.27

package/src/styles.css

@@ -1,23 +1,38 @@
 @import 'tailwindcss';
+@layer theme, base, components, utilities;
 
 @plugin "tailwindcss-animate";
 
 @source inline("bg-green-500");
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 body {
   @apply m-0;
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    'Inter',
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    Segoe UI Symbol,
+    'Noto Color Emoji';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
+  font-size: 12px;
   font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    'JetBrains Mono',
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace,
+    Courier New;
+  white-space: pre;
+  -webkit-overflow-scrolling: touch;
 }
 
 :root {
@@ -57,7 +72,7 @@ code {
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: rgb(3, 7, 18);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.141 0.005 285.823);
   --card-foreground: oklch(0.985 0 0);
@@ -155,25 +170,74 @@ code {
 }
 
 @layer base {
+  html,
+  body {
+    @apply text-gray-900 bg-gray-50 dark:bg-black dark:text-gray-200;
+    background: rgb(3, 7, 18);
+  }
+
+  .using-mouse * {
+    outline: none !important;
+  }
+
   * {
-    @apply border-border outline-ring/50;
+    scrollbar-color: theme(colors.gray.400) theme(colors.gray.100);
   }
-  body {
-    @apply bg-background text-foreground;
+
+  *::-webkit-scrollbar,
+  * scrollbar {
+    width: 1rem;
+    height: 1rem;
   }
-}
 
-[data-sidebar='group'] {
-  background-color: hsl(240 5.9% 6%) !important;
-  @apply mb-2 rounded-lg inset-shadow-gray-600 inset-shadow-sm;
-}
+  *::-webkit-scrollbar-track,
+  * scrollbar-track {
+    background: theme(colors.gray.100);
+  }
 
-[data-sidebar='content'] {
-  @apply p-2 pt-5;
-}
+  *::-webkit-scrollbar-thumb,
+  * scrollbar-thumb {
+    background: theme(colors.gray.300);
+    border-radius: 0.5rem;
+    border: 3px solid theme(colors.gray.100);
+  }
 
-[data-sidebar='header'] {
-  @apply shadow-gray-700 shadow-md z-50;
+  html.dark {
+    &,
+    * {
+      color-scheme: dark;
+    }
+
+    &,
+    * {
+      scrollbar-color: theme(colors.gray.700) theme(colors.gray.800);
+    }
+
+    &::-webkit-scrollbar,
+    *::-webkit-scrollbar,
+    * scrollbar {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    & *::-webkit-scrollbar-track,
+    *::-webkit-scrollbar-track,
+    * scrollbar-track {
+      background: theme(colors.gray.800);
+    }
+
+    &::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-thumb,
+    * scrollbar-thumb {
+      background: theme(colors.gray.600);
+      border-radius: 0.5rem;
+      border: 3px solid theme(colors.gray.800);
+    }
+  }
+
+  [disabled] {
+    @apply opacity-50 pointer-events-none;
+  }
 }
 
 .cm-changedLine {
@@ -183,3 +247,11 @@ code {
 .file-filters {
   background-color: oklch(0.2 0.005 285.823);
 }
+
+.font-black {
+  font-weight: 900;
+}
+
+.font-medium {
+  font-weight: 800;
+}

package/src/types.d.ts

@@ -80,7 +80,7 @@ export type InitialData = {
   applicationMode: ApplicationMode
   forcedRouterMode?: Mode
   forcedAddOns?: Array<string>
-  registry: Registry | undefined
+  registry?: Registry | undefined
 }
 
 export type EventItem = {

package/tailwind.config.cjs

@@ -0,0 +1,47 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
+  plugins: [require('@tailwindcss/typography')],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: `"Inter", ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"`,
+      },
+      zIndex: {
+        '-10': '-10',
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
+        DEFAULT:
+          '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02)',
+        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.2)',
+        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.25)',
+        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)',
+        none: 'none',
+      },
+      aria: {
+        current: 'current="location"',
+      },
+      colors: {
+        twine: {
+          50: '#f8f5ee',
+          100: '#eee6d3',
+          200: '#dfcda9',
+          300: '#cdac77',
+          400: '#bd9051',
+          500: '#ae7d44',
+          600: '#956339',
+          700: '#784b30',
+          800: '#653f2e',
+          900: '#58362b',
+          950: '#321c16',
+        },
+        discord: '#536bbd',
+      },
+    },
+  },
+}