feat: wip

Author: mikededo

;

@@ -0,0 +1,22 @@
+@import 'tailwindcss' prefix(ui);
+@import '@stack/tailwind-config/colors' prefix('');
+
+@config '../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: #dee3e7;
+  }
+}

apps/advent/package.json

@@ -34,7 +34,7 @@
     "shiki": "2.2.0",
     "svelte": "5.19.6",
     "svelte-check": "4.1.4",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "6.0.11"
   }
 }

apps/advent/postcss.config.js

@@ -1,8 +1,137 @@
-@import url('@stack/ui/styles');
+@import url('@stack/ui/styles') layer(base);
 
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-*: initial;
+  --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --color-background: var(--background);
+
+  --color-destructive-50: #fef2f2;
+  --color-destructive-100: #fee2e2;
+  --color-destructive-200: #fecaca;
+  --color-destructive-300: #fca5a5;
+  --color-destructive-400: #f87171;
+  --color-destructive-500: #ef4444;
+  --color-destructive-600: #dc2626;
+  --color-destructive-700: #b91c1c;
+  --color-destructive-800: #991b1b;
+  --color-destructive-900: #7f1d1d;
+  --color-destructive-950: #450a0a;
+
+  --color-foreground: var(--foreground);
+
+  --color-info-50: #cedaff;
+  --color-info-100: #a9c0ff;
+  --color-info-200: #84a6ff;
+  --color-info-300: #5f8bff;
+  --color-info-400: #3a71ff;
+  --color-info-500: #245af1;
+  --color-info-600: #1b45d5;
+  --color-info-700: #1230b9;
+  --color-info-800: #091b9c;
+  --color-info-900: #000780;
+
+  --color-positive-50: #f0fdf4;
+  --color-positive-100: #dcfce7;
+  --color-positive-200: #bbf7d0;
+  --color-positive-300: #86efac;
+  --color-positive-400: #4ade80;
+  --color-positive-500: #22c55e;
+  --color-positive-600: #16a34a;
+  --color-positive-700: #15803d;
+  --color-positive-800: #166534;
+  --color-positive-900: #14532d;
+  --color-positive-950: #052e16;
+
+  --color-primary-50: #f1f4fd;
+  --color-primary-100: #dfe7fa;
+  --color-primary-200: #c7d6f6;
+  --color-primary-300: #a0bcf0;
+  --color-primary-400: #648de5;
+  --color-primary-500: #5275df;
+  --color-primary-600: #3d58d3;
+  --color-primary-700: #3447c1;
+  --color-primary-800: #2f3b9e;
+  --color-primary-900: #2b357d;
+  --color-primary: #5275df;
+
+  --color-secondary-50: #fffbeb;
+  --color-secondary-100: #fff3c6;
+  --color-secondary-200: #ffe888;
+  --color-secondary-300: #fed54b;
+  --color-secondary-400: #fec735;
+  --color-secondary-500: #f8a008;
+  --color-secondary-600: #dc7803;
+  --color-secondary-700: #b65407;
+  --color-secondary-800: #94410c;
+  --color-secondary-900: #79360e;
+
+  --color-surface-50: #f7f7f7;
+  --color-surface-100: #f0f0f0;
+  --color-surface-200: #e3e3e3;
+  --color-surface-300: #d1d1d1;
+  --color-surface-400: #bfbfbf;
+  --color-surface-500: #aaaaaa;
+  --color-surface-600: #969696;
+  --color-surface-700: #818181;
+  --color-surface-800: #6a6a6a;
+  --color-surface-900: #585858;
+
+  --color-warning-50: #fff7ed;
+  --color-warning-100: #ffedd5;
+  --color-warning-200: #fed7aa;
+  --color-warning-300: #fdba74;
+  --color-warning-400: #fb923c;
+  --color-warning-500: #f97316;
+  --color-warning-600: #ea580c;
+  --color-warning-700: #c2410c;
+  --color-warning-800: #9a3412;
+  --color-warning-900: #7c2d12;
+  --color-warning-950: #431407;
+}
+
+@utility container {
+  margin-inline: auto;
+
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+
+  @media (width >= 1100px) {
+    max-width: 1100px;
+  }
+
+  @media (width >= 1100px) {
+    max-width: 1100px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @layer base {
   * {
@@ -32,5 +161,5 @@ html {
 }
 
 .prose {
-  --tw-prose-links: theme('colors.primary.500');
+  --tw-prose-links: var(--color-primary-500);
 }

apps/advent/src/global.css

@@ -14,7 +14,7 @@
     const highlighter = getContext<Highlighter>('shiki');
 </script>
 
-<div class="shiki-wrapper not-prose my-1.5 rounded px-5 py-3 text-sm">
+<div class="shiki-wrapper not-prose my-1.5 rounded-sm px-5 py-3 text-sm">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html highlighter.codeToHtml(code, {
         ...options,

apps/advent/src/lib/components/shiki-code/shiki-code.svelte

@@ -11,7 +11,7 @@
     let { ref = $bindable(), title, ...restProps }: Props = $props();
     const classes = $derived(
         twMerge(
-            'resize-none rounded-md border px-3 py-2 font-mono text-sm outline-none ring-2 ring-transparent ring-offset-1 transition-colors duration-150 hover:border-primary hover:ring-primary-100 hover:ring-offset-primary-100 focus:border-primary focus:ring-primary-100 focus:ring-offset-primary-100 md:px-3',
+            'resize-none rounded-md border px-3 py-2 font-mono text-sm outline-hidden ring-2 ring-transparent ring-offset-1 transition-colors duration-150 hover:border-primary hover:ring-primary-100 hover:ring-offset-primary-100 focus:border-primary focus:ring-primary-100 focus:ring-offset-primary-100 md:px-3',
             restProps.class
         )
     );

apps/advent/src/lib/components/textarea.svelte

@@ -198,11 +198,13 @@ You can also generate a set of random movements with the button below.`;
     <div id={CONTAINER_ID}></div>
 </section>
 
-<style lang="postcss">
+<style>
+@reference "tailwindcss/theme";
+
 .input {
   width: 100%;
 
-  @media screen(md) {
+  @media (width >= theme(--breakpoint-md)) {
     width: var(--input-width);
   }
 }

apps/advent/src/routes/2024/15/+page.svelte

@@ -1,8 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   envPrefix: 'STACK_',
-  plugins: [sveltekit()]
+  plugins: [sveltekit(), tailwindcss()]
+
 });
 

apps/advent/tailwind.config.ts

@@ -1,9 +1,27 @@
-@import url('@stack/ui/styles');
-@import url('@stack/layouts/styles');
+@import url('@stack/ui/styles') layer(base);
+@import url('@stack/layouts/styles') layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: #dee3e7;
+  }
+}
 
 @layer base {
   :root {

apps/advent/vite.config.ts

@@ -10,7 +10,7 @@
 </script>
 
 <button
-    class="flex w-full items-center justify-center gap-2 rounded-md border border-dashed border-surface-200 p-3 text-center text-sm text-surface-700 outline-none transition-all hover:border-primary-300"
+    class="flex w-full items-center justify-center gap-2 rounded-md border border-dashed border-surface-200 p-3 text-center text-sm text-surface-700 outline-hidden transition-all hover:border-primary-300"
     transition:fade={{ delay: 100, duration: 100 }}
     onclick={onClick}
 >

apps/finance/postcss.config.js

@@ -60,7 +60,7 @@
                     class="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center lg:flex-col lg:items-start"
                 >
                     <input
-                        class="shrink-0 text-sm font-semibold outline-none md:w-60 lg:w-auto"
+                        class="shrink-0 text-sm font-semibold outline-hidden md:w-60 lg:w-auto"
                         placeholder="Allocation name"
                         value={name}
                         oninput={onChangeAllocationProperty(i, 'name')}

apps/finance/src/global.css

@@ -8,7 +8,7 @@
 <div class="flex flex-col gap-2 md:mb-2">
     <label class="text-xs font-semibold uppercase" for="plan-name">Plan name</label>
     <input
-        class="w-full text-2xl font-semibold outline-none placeholder-shown:italic"
+        class="w-full text-2xl font-semibold outline-hidden placeholder-shown:italic"
         bind:value={context.name}
         use:useAnimatedPlaceholder
     />

apps/finance/src/lib/domain/books/book-accordion/empty-state.svelte

@@ -27,7 +27,7 @@
 <PageItem createdAt={new Date()} owner={user.first_name[0]}>
     {#snippet name()}
         <input
-            class="w-full bg-transparent outline-none"
+            class="w-full bg-transparent outline-hidden"
             bind:value
             use:useAutofocus
             placeholder="Page name..."

apps/finance/src/lib/domain/budget/allocations.svelte

@@ -48,12 +48,12 @@
     {/if}
 </div>
 
-<style lang="postcss">
+<style>
     div[role='gridcell'] {
-        @apply outline-none;
+        outline-style: none;
     }
 
     div[role='gridcell'][tabindex='0'] {
-        box-shadow: inset 0 0 0 1px theme('colors.primary.500');
+        box-shadow: inset 0 0 0 1px theme(--ui-color-primary-500);
     }
 </style>

apps/finance/src/lib/domain/budget/plan-name.svelte

@@ -192,7 +192,7 @@ export const useCell: Action<HTMLElement, UseCellArgs> = (
   node.addEventListener('focus', () => {
     node.tabIndex = 0;
   });
-  node.addEventListener('blur', () => {
+  node.addEventListener('blur-sm', () => {
     if (!edit) {
       node.tabIndex = -1;
     }

apps/finance/src/lib/domain/page/list/new-page-item.svelte

@@ -32,7 +32,7 @@ export const getDragContext = () => {
 };
 
 export const onStartDragging = (row: Expense, position: Position) => {
-  document.body.classList.add('!cursor-grabbing');
+  document.body.classList.add('cursor-grabbing!');
   document.querySelectorAll('div[role="grid"]').forEach((row) => {
     row.classList.add('select-none');
   });
@@ -61,5 +61,5 @@ export const onStopDragging = () => {
   document.querySelectorAll('div[role="grid"]').forEach((row) => {
     row.classList.remove('select-none');
   });
-  document.body.classList.remove('!cursor-grabbing');
+  document.body.classList.remove('cursor-grabbing!');
 };

apps/finance/src/lib/domain/page/table/cell/cell.svelte

@@ -15,11 +15,11 @@
     const placeholderProps = $derived(!shadow
         ? {
             'aria-rowindex': position + 1,
-            class: 'group flex w-full items-stretch bg-surface-50 !text-sufrace-300 relative border-b border-primary-100 origin-top transition-all !italic'
+            class: 'group flex w-full items-stretch bg-surface-50 text-sufrace-300! relative border-b border-primary-100 origin-top transition-all italic!'
         }
         : {
             'aria-rowindex': 0,
-            class: ctx.activeRow ? 'fixed z-[100] rounded-sm shadow-md bg-white gap-2 p-2 opacity-95 flex pointer-events-none text-sm' : 'hidden',
+            class: ctx.activeRow ? 'fixed z-100 rounded-sm shadow-md bg-white gap-2 p-2 opacity-95 flex pointer-events-none text-sm' : 'hidden',
             style: `top: ${ctx.shadowPosition.y}px; width: ${ctx.shadowPosition.width}px; left: ${ctx.shadowPosition.x}px`
         });
 </script>

apps/finance/src/lib/domain/page/table/cell/use-cell.ts

@@ -10,7 +10,7 @@
 </script>
 
 <input
-    class="w-full outline-none group-hover:bg-primary-50 group-aria-current:bg-primary-50 hover:bg-primary-50"
+    class="w-full outline-hidden group-hover:bg-primary-50 group-aria-current:bg-primary-50 hover:bg-primary-50"
     bind:value
     use:useActions={[...use, [useField, { actions: [useMoneyMask] }]]}
     name="amount"