SolidOS · NoelDeMartin · Jun 16, 2026 · Jun 17, 2026 · Jun 17, 2026
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import '../src/styles.css'
+import '@/styles/theme.css'
 
 export const tags = ['autodocs']
 export const parameters = {}
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ And don't forget to also include the CSS, either with a link tag or inside a CSS
 ```
 
 ```html
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 ```
 
 You can also use some of the helpers exported from the default entry:
@@ -76,7 +76,7 @@ Solid-UI provides **ESM** bundles for direct browser usage. You'll also need to
 ```html
 <html>
 <head>
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 </head>
 <body>
   <div id="app"></div>
@@ -98,7 +98,7 @@ You can also use [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML
 ```html
 <html>
 <head>
-  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/solid-ui@^4.0.0/dist/theme.css">
 </head>
 <body>
   <div id="app"></div>
@@ -165,7 +165,7 @@ The build configuration uses [Vite](https://vite.dev/) and is centralized in the
 The config can be invoked with 4 different modes:
 
 - Default: This is the one used to generate ESM and CJS files to be consumed through npm (generates `*.cjs.js` and `*.esm.js` files respectively). It's also used to run Vitest tests and the Storybook.
-- `styles`: This mode generates the `styles.css` file that includes global styles (CSS variables for the Design System Tokens).
+- `styles`: This mode generates the `theme.css` file that includes global styles (CSS variables for the Design System Tokens).
 - `cdn`: This generates the ESM bundle to be consumed through CDNs, which has no external dependencies.
 - `cdn-legacy`: This generates the legacy UMD bundle to be consumed by legacy CDNs that externalize `rdflib` and `solid-logic` (no longer recommended).
 

diff --git a/examples/header/index.html b/examples/header/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset='UTF-8'>
   <title>solid-ui UI.widgets.header examples page</title>
-  <link rel="stylesheet" href="../../dist/styles.css">
+  <link rel="stylesheet" href="../../dist/theme.css">
   <script src="https://unpkg.com/rdflib/dist/rdflib.min.js"></script>
   <script src="https://unpkg.com/solid-logic/dist/solid-logic.min.js"></script>
   <script src="../../dist/solid-ui.js"></script>

diff --git a/examples/matrix/index.html b/examples/matrix/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset='UTF-8'>
 <title>Test matrix.js</title>
-<link rel="stylesheet" href="../../dist/styles.css">
+<link rel="stylesheet" href="../../dist/theme.css">
 <!-- <link type="text/css" rel="stylesheet"
  href="https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css" /> -->
 <style>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
 	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
-			"style": "./dist/styles.css",
+			"style": "./dist/theme.css",
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.esm.js",
 			"require": "./dist/index.cjs.js"
@@ -34,8 +34,8 @@
 		"build-cdn-legacy": "vite build --mode cdn-legacy",
 		"build-npm": "vite build",
 		"build-styles": "vite build --mode styles",
-        "build-version": "sh ./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
-        "postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
+		"build-version": "sh ./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
+		"postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
 		"watch": "concurrently -k -n npm,styles \"npm:watch-npm\" \"npm:watch-styles\"",
 		"watch-npm": "vite build --watch",
 		"watch-styles": "vite build --mode styles --watch",
@@ -87,7 +87,7 @@
 		"mime-types": "^3.0.2",
 		"pane-registry": "^3.1.1",
 		"solid-namespace": "^0.5.4",
-		"tailwindcss": "^4.3.0",
+		"tailwindcss": "4.3.0",
 		"uuid": "^14.0.0"
 	},
 	"peerDependencies": {

diff --git a/...tem/components/account/Account.stories.ts → src/components/account/Account.stories.ts b/...tem/components/account/Account.stories.ts → src/components/account/Account.stories.ts
@@ -1,11 +1,10 @@
 import { html } from 'lit'
+import { USER_OPTIONS, defineAuthStoryRender } from '@/storybook'
 
 import './Account'
-import { USER_OPTIONS } from '../../../storybook/stubs'
-import { defineAuthStoryRender } from '../../../storybook'
 
 const meta = {
-  title: 'Design System/Account',
+  title: 'Account',
   args: {
     user: 'Alice',
   },

diff --git a/...tem/components/account/Account.styles.css → src/components/account/Account.styles.css b/...tem/components/account/Account.styles.css → src/components/account/Account.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
     display: inline-flex;
     flex-direction: row;
@@ -21,7 +19,7 @@
         border-radius: calc((var(--image-size) + 2 * var(--padding) + 2 * var(--border-width)) / 2);
         color: var(--solid-ui-color-white);
 
-        solid-avatar {
+        solid-ui-avatar {
             width: var(--image-size);
             height: var(--image-size);
             border: var(--border-width) solid var(--solid-ui-color-white);

diff --git a/...sign-system/components/account/Account.ts → src/components/account/Account.ts b/...sign-system/components/account/Account.ts → src/components/account/Account.ts
@@ -1,21 +1,21 @@
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../../primitives/lib/auth/context'
+import { customElement, WebComponent } from '@/lib/components'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
-import '../../../design-system/components/button'
-import '../../../primitives/components/avatar'
-import '../../../primitives/components/login-button'
-import '../../../primitives/components/signup-button'
-import '../../../primitives/components/logout-button'
-import '../menu'
-import '../menu-items'
-import '../menu-item'
-import '~icons/lucide/user'
-import '~icons/lucide/log-in'
+import '@/components/avatar'
+import '@/design-system/components/button'
+import '@/design-system/components/login-button'
+import '@/components/logout-button'
+import '@/components/menu-item'
+import '@/components/menu-items'
+import '@/components/menu'
+import '@/design-system/components/signup-button'
 import '~icons/lucide/chevron-down'
+import '~icons/lucide/log-in'
 import '~icons/lucide/log-out'
+import '~icons/lucide/user'
+
 import styles from './Account.styles.css'
 
 @customElement('solid-ui-account')
@@ -45,35 +45,35 @@ export default class Account extends WebComponent {
   protected render () {
     if (!this.auth.account) {
       return html`
-        <solid-login-button>
+        <solid-ui-login-button>
             <solid-ui-button slot="trigger">
                 <icon-lucide-user slot="left-icon"></icon-lucide-user>
                 Log In
             </solid-ui-button>
-        </solid-login-button>
-        <solid-signup-button>
+        </solid-ui-login-button>
+        <solid-ui-signup-button>
             <solid-ui-button slot="trigger" variant="outline">
                 <icon-lucide-log-in slot="left-icon"></icon-lucide-log-in>
                 Sign Up
             </solid-ui-button>
-        </solid-signup-button>
+        </solid-ui-signup-button>
       `
     }
 
     return html`
         <solid-ui-menu>
             <button type="button" slot="trigger">
-                <solid-avatar></solid-avatar>
+                <solid-ui-avatar></solid-ui-avatar>
                 <icon-lucide-chevron-down slot="right-icon"></icon-lucide-chevron-down>
             </button>
 
             <solid-ui-menu-items>
-                <solid-logout-button>
+                <solid-ui-logout-button>
                     <solid-ui-menu-item slot="trigger">
                         <icon-lucide-log-out slot="left-icon"></icon-lucide-log-out>
                         Sign out
                     </solid-ui-menu-item>
-                </solid-logout-button>
+                </solid-ui-logout-button>
             </solid-ui-menu-items>
         </solid-ui-menu>
     `

diff --git a/...design-system/components/account/index.ts → src/components/account/index.ts b/...design-system/components/account/index.ts → src/components/account/index.ts
diff --git a/...tives/components/avatar/Avatar.stories.ts → src/components/avatar/Avatar.stories.ts b/...tives/components/avatar/Avatar.stories.ts → src/components/avatar/Avatar.stories.ts
@@ -1,11 +1,10 @@
 import { html } from 'lit'
-import { defineAuthStoryRender } from '../../../storybook'
+import { USER_OPTIONS, defineAuthStoryRender } from '@/storybook'
 
 import './Avatar'
-import { USER_OPTIONS } from '../../../storybook/stubs'
 
 const meta = {
-  title: 'Primitives/Avatar',
+  title: 'Avatar',
   args: {
     user: 'Alice',
   },
@@ -14,7 +13,7 @@ const meta = {
   }
 } as const
 
-const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-avatar></solid-avatar>`)
+const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-ui-avatar></solid-ui-avatar>`)
 
 export const Primary = { render }
 export const Fallback = { render, args: { user: 'Bob' } }

diff --git a/...tives/components/avatar/Avatar.styles.css → src/components/avatar/Avatar.styles.css b/...tives/components/avatar/Avatar.styles.css → src/components/avatar/Avatar.styles.css
@@ -14,12 +14,12 @@
 }
 
 :host(:state(fallback)) {
-    background: var(--solid-color-gray-100);
+    background: var(--solid-ui-color-gray-100);
     justify-content: center;
     align-items: center;
 
     icon-lucide-circle-user {
-        color: var(--solid-color-gray-200);
+        color: var(--solid-ui-color-gray-200);
         width: 50%;
         height: 50%;
     }

diff --git a/src/primitives/components/avatar/Avatar.ts → src/components/avatar/Avatar.ts b/src/primitives/components/avatar/Avatar.ts → src/components/avatar/Avatar.ts
@@ -1,16 +1,15 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { consume } from '@lit/context'
 import { html } from 'lit'
-import { customElement } from '../../lib/customElement'
-import WebComponent from '../../lib/WebComponent'
-import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
-import commonStyles from '../../styles/common.styles.css'
+import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
 import '~icons/lucide/circle-user'
+
 import styles from './Avatar.styles.css'
 
-@customElement('solid-avatar')
+@customElement('solid-ui-avatar')
 export default class Avatar extends WebComponent {
-  static styles = [commonStyles, styles]
+  static styles = styles
   static states = {
     fallback: (component: Avatar) => !component.auth.account?.avatarUrl,
   }

diff --git a/src/primitives/components/avatar/index.ts → src/components/avatar/index.ts b/src/primitives/components/avatar/index.ts → src/components/avatar/index.ts
diff --git a/...ponents/combobox-option/ComboboxOption.ts → ...ponents/combobox-option/ComboboxOption.ts b/...ponents/combobox-option/ComboboxOption.ts → ...ponents/combobox-option/ComboboxOption.ts
@@ -1,7 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { html, nothing } from 'lit'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
 
 @customElement('solid-ui-combobox-option')
 export default class ComboboxOption extends WebComponent {

diff --git a/...ystem/components/combobox-option/index.ts → src/components/combobox-option/index.ts b/...ystem/components/combobox-option/index.ts → src/components/combobox-option/index.ts
diff --git a/...s/dialog-content/DialogContent.styles.css → ...s/dialog-content/DialogContent.styles.css b/...s/dialog-content/DialogContent.styles.css → ...s/dialog-content/DialogContent.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
   display: flex;
   flex-direction: column;

diff --git a/...omponents/dialog-content/DialogContent.ts → ...omponents/dialog-content/DialogContent.ts b/...omponents/dialog-content/DialogContent.ts → ...omponents/dialog-content/DialogContent.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogContent.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-content')
 export default class DialogContent extends WebComponent {

diff --git a/...system/components/dialog-content/index.ts → src/components/dialog-content/index.ts b/...system/components/dialog-content/index.ts → src/components/dialog-content/index.ts
diff --git a/...nts/dialog-footer/DialogFooter.styles.css → ...nts/dialog-footer/DialogFooter.styles.css b/...nts/dialog-footer/DialogFooter.styles.css → ...nts/dialog-footer/DialogFooter.styles.css
@@ -1,5 +1,3 @@
-@import '../../styles/common.styles.css';
-
 :host {
   display: flex;
   justify-content: space-between;

diff --git a/.../components/dialog-footer/DialogFooter.ts → src/components/dialog-footer/DialogFooter.ts b/.../components/dialog-footer/DialogFooter.ts → src/components/dialog-footer/DialogFooter.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogFooter.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-footer')
 export default class DialogFooter extends WebComponent {

diff --git a/...-system/components/dialog-footer/index.ts → src/components/dialog-footer/index.ts b/...-system/components/dialog-footer/index.ts → src/components/dialog-footer/index.ts
diff --git a/...nts/dialog-header/DialogHeader.styles.css → ...nts/dialog-header/DialogHeader.styles.css b/...nts/dialog-header/DialogHeader.styles.css → ...nts/dialog-header/DialogHeader.styles.css
@@ -1,5 +1,3 @@
-@import "../../styles/common.styles.css";
-
 :host {
   display: flex;
   justify-content: space-between;

diff --git a/.../components/dialog-header/DialogHeader.ts → src/components/dialog-header/DialogHeader.ts b/.../components/dialog-header/DialogHeader.ts → src/components/dialog-header/DialogHeader.ts
@@ -1,6 +1,6 @@
+import { customElement, WebComponent } from '@/lib/components'
+
 import styles from './DialogHeader.styles.css'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { customElement } from '../../../primitives/lib/customElement'
 
 @customElement('solid-ui-dialog-header')
 export default class DialogHeader extends WebComponent {

diff --git a/...-system/components/dialog-header/index.ts → src/components/dialog-header/index.ts b/...-system/components/dialog-header/index.ts → src/components/dialog-header/index.ts
diff --git a/...ponents/dialog-provider/DialogProvider.ts → ...ponents/dialog-provider/DialogProvider.ts b/...ponents/dialog-provider/DialogProvider.ts → ...ponents/dialog-provider/DialogProvider.ts
@@ -1,8 +1,7 @@
+import { customElement, WebComponent } from '@/lib/components'
 import { provide } from '@lit/context'
-import { customElement } from '../../../primitives/lib/customElement'
 import { property } from 'lit/decorators.js'
-import WebComponent from '../../../primitives/lib/WebComponent'
-import { DialogContext, dialogContext } from '../../lib/dialogs/context'
+import { DialogContext, dialogContext } from '@/lib/dialogs/context'
 
 @customElement('solid-ui-dialog-provider')
 export default class DialogProvider extends WebComponent {

diff --git a/...ystem/components/dialog-provider/index.ts → src/components/dialog-provider/index.ts b/...ystem/components/dialog-provider/index.ts → src/components/dialog-provider/index.ts
diff --git a/...ystem/components/dialog/Dialog.styles.css → src/components/dialog/Dialog.styles.css b/...ystem/components/dialog/Dialog.styles.css → src/components/dialog/Dialog.styles.css
@@ -1,5 +1,3 @@
-@import "../../styles/common.styles.css";
-
 dialog {
   margin: auto;
   border-radius: 5px;