feat(theme): token-ize component surfaces for dark mode and re-skin (#319)

Replace hardcoded colors with semantic tokens so components adapt to mode
and brand changes. Badge success/warning/info map to status-completed/
attention/neutral. Form controls (select/combobox/autocomplete) use
bg-transparent dark:bg-input/30; dialog/sheet panels use bg-card. Tabs
selection uses bg-primary/10 text-primary and the capsule track uses
bg-background dark:bg-input/30 with no border. CsvImporter yellow/emerald
highlights map to status-attention/completed. Snapshots updated.

Co-authored-by: itsprade <its.prade@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

packages/core/__snapshots__/src__components__autocomplete-standalone.test.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Autocomplete (standalone) > snapshots > default with string items 1`] = `"<div><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_0_" data-slot="autocomplete-input" placeholder="Type a fruit" class="astw:border-input astw:bg-background astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_0_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;
+exports[`Autocomplete (standalone) > snapshots > default with string items 1`] = `"<div><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_0_" data-slot="autocomplete-input" placeholder="Type a fruit" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_0_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;
 
-exports[`Autocomplete (standalone) > snapshots > with custom className 1`] = `"<div class="custom-class"><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_4_" data-slot="autocomplete-input" placeholder="Styled" class="astw:border-input astw:bg-background astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_4_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;
+exports[`Autocomplete (standalone) > snapshots > with custom className 1`] = `"<div class="custom-class"><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_4_" data-slot="autocomplete-input" placeholder="Styled" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_4_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;
 
-exports[`Autocomplete (standalone) > snapshots > with custom mapItem 1`] = `"<div><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_8_" data-slot="autocomplete-input" placeholder="Pick" class="astw:border-input astw:bg-background astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_8_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;
+exports[`Autocomplete (standalone) > snapshots > with custom mapItem 1`] = `"<div><div data-slot="autocomplete-input-group" class="astw:relative astw:flex astw:items-center"><input autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="none" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" id="base-ui-_r_8_" data-slot="autocomplete-input" placeholder="Pick" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:placeholder:text-muted-foreground astw:flex astw:h-9 astw:w-full astw:rounded-md astw:border astw:px-3 astw:py-1 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50" type="text" value=""><button type="button" tabindex="-1" aria-expanded="false" aria-haspopup="listbox" data-slot="autocomplete-trigger" class="astw:absolute astw:inset-y-0 astw:right-0 astw:flex astw:items-center astw:px-2 astw:text-muted-foreground astw:outline-none astw:hover:text-foreground astw:disabled:pointer-events-none astw:disabled:opacity-50"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button></div><input id="base-ui-_r_8_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div>"`;