@brickflow/ui 0.0.31 → 0.0.33

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -608,6 +608,9 @@ const module$1 = defineNuxtModule({
     nuxt.hook("pages:extend", (pages) => {
       pages.push({
         file: resolver.resolve("./runtime/pages/ui.vue"),
+        meta: {
+          layout: false
+        },
         name: "brickflow-ui",
         path: "/ui"
       });

package/dist/runtime/components/Button/index.d.vue.ts

@@ -15,7 +15,7 @@ type __VLS_Props = {
 };
 type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
 type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-type ButtonVariant = 'ghost' | 'glass' | 'soft' | 'solid' | 'subtle';
+type ButtonVariant = 'ghost' | 'mist' | 'soft' | 'solid' | 'subtle';
 declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_10) => any;
@@ -27,8 +27,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: ButtonSize;
     type: "button" | "reset" | "submit";
-    to: RouteLocationRaw;
     color: ButtonColor;
+    to: RouteLocationRaw;
     icon: string;
     rounded: boolean;
     trailingIcon: string;

package/dist/runtime/components/Button/index.vue

@@ -33,49 +33,49 @@ const sizeIconClasses = {
 const colorClasses = {
   alt: {
     ghost: UI_STYLE.color.alt.ghost,
-    glass: UI_STYLE.color.alt.glass,
+    mist: UI_STYLE.color.alt.mist,
     soft: UI_STYLE.color.alt.soft,
     solid: UI_STYLE.color.alt.solid,
     subtle: UI_STYLE.color.alt.subtle
   },
   danger: {
     ghost: UI_STYLE.color.danger.ghost,
-    glass: UI_STYLE.color.danger.glass,
+    mist: UI_STYLE.color.danger.mist,
     soft: UI_STYLE.color.danger.soft,
     solid: UI_STYLE.color.danger.solid,
     subtle: UI_STYLE.color.danger.subtle
   },
   info: {
     ghost: UI_STYLE.color.info.ghost,
-    glass: UI_STYLE.color.info.glass,
+    mist: UI_STYLE.color.info.mist,
     soft: UI_STYLE.color.info.soft,
     solid: UI_STYLE.color.info.solid,
     subtle: UI_STYLE.color.info.subtle
   },
   main: {
     ghost: UI_STYLE.color.main.ghost,
-    glass: UI_STYLE.color.main.glass,
+    mist: UI_STYLE.color.main.mist,
     soft: UI_STYLE.color.main.soft,
     solid: UI_STYLE.color.main.solid,
     subtle: UI_STYLE.color.main.subtle
   },
   plain: {
     ghost: UI_STYLE.color.plain.ghost,
-    glass: UI_STYLE.color.plain.glass,
+    mist: UI_STYLE.color.plain.mist,
     soft: UI_STYLE.color.plain.soft,
     solid: UI_STYLE.color.plain.solid,
     subtle: UI_STYLE.color.plain.subtle
   },
   warn: {
     ghost: UI_STYLE.color.warn.ghost,
-    glass: UI_STYLE.color.warn.glass,
+    mist: UI_STYLE.color.warn.mist,
     soft: UI_STYLE.color.warn.soft,
     solid: UI_STYLE.color.warn.solid,
     subtle: UI_STYLE.color.warn.subtle
   },
   win: {
     ghost: UI_STYLE.color.win.ghost,
-    glass: UI_STYLE.color.win.glass,
+    mist: UI_STYLE.color.win.mist,
     soft: UI_STYLE.color.win.soft,
     solid: UI_STYLE.color.win.solid,
     subtle: UI_STYLE.color.win.subtle

package/dist/runtime/components/Button/index.vue.d.ts

@@ -15,7 +15,7 @@ type __VLS_Props = {
 };
 type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
 type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-type ButtonVariant = 'ghost' | 'glass' | 'soft' | 'solid' | 'subtle';
+type ButtonVariant = 'ghost' | 'mist' | 'soft' | 'solid' | 'subtle';
 declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_10) => any;
@@ -27,8 +27,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: ButtonSize;
     type: "button" | "reset" | "submit";
-    to: RouteLocationRaw;
     color: ButtonColor;
+    to: RouteLocationRaw;
     icon: string;
     rounded: boolean;
     trailingIcon: string;

package/dist/runtime/components/Button/variants.demo.vue

@@ -16,15 +16,15 @@ import Button from "./index.vue";
         class="top-0 z-0 size-full rounded-xl object-cover opacity-50"
       />
     </div>
-    <div class="flex w-full flex-wrap items-center justify-around gap-3 text-xs text-plain-600">
+    <div class="flex w-full flex-wrap items-center justify-around gap-3 text-xs text-slate-600">
       <span>solid</span>
       <span>ghost</span>
-      <span>glass</span>
+      <span>mist</span>
       <span>soft</span>
       <span>subtle</span>
     </div>
     <div
-      class="absolute top-0 left-0 flex h-full flex-col items-center justify-around gap-3 pt-7 text-xs text-plain-600"
+      class="absolute top-0 left-0 flex h-full flex-col items-center justify-around gap-3 pt-7 text-xs text-slate-600"
     >
       <span>main</span>
       <span>plain</span>
@@ -37,7 +37,7 @@ import Button from "./index.vue";
     <div class="flex flex-wrap items-center gap-3 p-2">
       <Button>Button</Button>
       <Button variant="ghost">Button</Button>
-      <Button variant="glass">Button</Button>
+      <Button variant="mist">Button</Button>
       <Button variant="soft">Button</Button>
       <Button variant="subtle">Button</Button>
     </div>
@@ -51,7 +51,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="plain"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>
@@ -78,7 +78,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="alt"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>
@@ -105,7 +105,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="danger"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>
@@ -132,7 +132,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="info"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>
@@ -159,7 +159,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="warn"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>
@@ -186,7 +186,7 @@ import Button from "./index.vue";
       </Button>
       <Button
         color="win"
-        variant="glass"
+        variant="mist"
       >
         Button
       </Button>

package/dist/runtime/components/Icon/basic.demo.vue

@@ -13,11 +13,11 @@ const iconName = ref(firstIconName);
 </script>
 
 <template>
-  <div class="flex flex-col flex-wrap items-start gap-4 text-plain-100">
+  <div class="flex flex-col flex-wrap items-start gap-4 text-zinc-100">
     <input
       v-model="iconName"
       aria-label="Icon name"
-      class="rounded-lg border border-plain-700 bg-plain-900 px-3 py-2 text-sm text-plain-100 outline-none focus:border-main-400"
+      class="rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-blue-400"
       placeholder="Icon name"
       type="text"
     />
@@ -33,7 +33,7 @@ const iconName = ref(firstIconName);
       />
       <Icon
         :name="iconName"
-        class="text-2xl text-win-400"
+        class="text-2xl text-green-400"
       />
       <Icon
         :name="iconName"

package/dist/runtime/components/Link/basic.demo.vue

@@ -13,13 +13,13 @@ import Link from "./index.vue";
   <div class="flex flex-wrap items-center gap-4">
     <Link
       to="/"
-      class="text-main-300 hover:text-main-200"
+      class="text-blue-300 hover:text-blue-200"
     >
       Go to Home
     </Link>
     <Link
       to="/ui?component=button"
-      class="text-main-300 hover:text-main-200"
+      class="text-blue-300 hover:text-blue-200"
     >
       Open Button
     </Link>

package/dist/runtime/composables/useScreen.d.ts

@@ -1,17 +1,15 @@
 declare const screen: {
-    readonly base: boolean;
-    readonly baseClass: "sm:hidden";
-    readonly lg: boolean;
-    readonly lgClass: "max-lg:hidden xl:hidden";
-    readonly md: boolean;
-    readonly mdClass: "max-md:hidden lg:hidden";
+    readonly dk: boolean;
+    readonly dkClass: "dkHidden";
+    readonly lp: boolean;
+    readonly lpClass: "lpHidden";
+    readonly mb: boolean;
+    readonly mbClass: "mbHidden";
+    readonly ms: boolean;
+    readonly msClass: "msHidden";
     readonly ready: Promise<void>;
-    readonly sm: boolean;
-    readonly smClass: "max-sm:hidden md:hidden";
-    readonly xl: boolean;
-    readonly xlClass: "max-xl:hidden 2xl:hidden";
-    readonly xxl: boolean;
-    readonly xxlClass: "max-2xl:hidden";
+    readonly tb: boolean;
+    readonly tbClass: "tbHidden";
 };
 export declare function useScreen(): typeof screen;
 export {};

package/dist/runtime/composables/useScreen.js

@@ -1,19 +1,17 @@
 import { onMounted, reactive } from "vue";
 const state = reactive({
-  base: true,
-  lg: true,
-  md: true,
-  sm: true,
-  xl: true,
-  xxl: true
+  dk: true,
+  lp: true,
+  mb: true,
+  ms: true,
+  tb: true
 });
 const queries = {
-  base: "(width < 40rem)",
-  lg: "(64rem <= width < 80rem)",
-  md: "(48rem <= width < 64rem)",
-  sm: "(40rem <= width < 48rem)",
-  xl: "(80rem <= width < 96rem)",
-  xxl: "(width >= 96rem)"
+  dk: "(width >= 1440px)",
+  lp: "(1024px <= width < 1440px)",
+  mb: "(480px <= width < 768px)",
+  ms: "(width < 480px)",
+  tb: "(768px <= width < 1024px)"
 };
 let initialized = false;
 let resolveReady = () => void 0;
@@ -36,31 +34,27 @@ function initialize() {
   resolveReady();
 }
 const screen = {
-  get base() {
-    return state.base;
+  get dk() {
+    return state.dk;
   },
-  baseClass: "sm:hidden",
-  get lg() {
-    return state.lg;
+  dkClass: "dkHidden",
+  get lp() {
+    return state.lp;
   },
-  lgClass: "max-lg:hidden xl:hidden",
-  get md() {
-    return state.md;
+  lpClass: "lpHidden",
+  get mb() {
+    return state.mb;
   },
-  mdClass: "max-md:hidden lg:hidden",
-  ready,
-  get sm() {
-    return state.sm;
-  },
-  smClass: "max-sm:hidden md:hidden",
-  get xl() {
-    return state.xl;
+  mbClass: "mbHidden",
+  get ms() {
+    return state.ms;
   },
-  xlClass: "max-xl:hidden 2xl:hidden",
-  get xxl() {
-    return state.xxl;
+  msClass: "msHidden",
+  ready,
+  get tb() {
+    return state.tb;
   },
-  xxlClass: "max-2xl:hidden"
+  tbClass: "tbHidden"
 };
 export function useScreen() {
   onMounted(initialize);

package/dist/runtime/pages/ui.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useHead, useRoute, useRouter } from "nuxt/app";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { uiComponents } from "#brickflow-ui-catalog";
 import { uiThemeEnabled } from "#brickflow-ui-options";
 import { useTheme } from "../composables/useTheme";
@@ -18,6 +18,7 @@ const router = useRouter();
 const expandedDemoCode = ref(/* @__PURE__ */ new Set());
 const isNavigationOpen = ref(false);
 const mobileNavigation = ref();
+const colorSwatchesReady = ref(false);
 const stylesExpanded = ref(false);
 const theme = uiThemeEnabled ? useTheme() : void 0;
 const isDark = computed(() => theme?.isDark.value ?? false);
@@ -231,17 +232,20 @@ const highlightTailwindValue = (value) => {
   return html + token("ui-code-string", escapeHtml(value.slice(lastIndex)));
 };
 const getTailwindColorSwatch = (utility) => {
-  const themeColor = utility.match(
-    /(?:^|-)(alt|danger|info|main|plain|warn|win)-(50|100|200|300|400|500|600|700|800|900|950)(?:\/(\d{1,3}))?(?:$|-)/
+  const match = utility.match(
+    /^(?:accent|bg|border|caret|decoration|divide|fill|from|outline|ring|shadow|stroke|text|to|via)-([a-z][a-z0-9-]*)(?:\/(\d{1,3}))?$/
   );
-  const neutralColor = utility.match(/(?:^|-)(black|white)(?:\/(\d{1,3}))?$/);
-  const match = themeColor ?? neutralColor;
-  if (!match) {
+  if (!colorSwatchesReady.value || !match || typeof window === "undefined") {
     return "";
   }
-  const [, name, shade, opacity] = match;
-  const color = shade ? `var(--color-${name}-${shade})` : `var(--color-${name})`;
-  const background = opacity ? `color-mix(in srgb, ${color} ${opacity}%, transparent)` : color;
+  const [, name, opacity] = match;
+  const colorVariable = `--color-${name}`;
+  const color = getComputedStyle(document.body).getPropertyValue(colorVariable).trim();
+  if (!color || !CSS.supports("color", color)) {
+    return "";
+  }
+  const opacityValue = opacity && Number(opacity) <= 100 ? Number(opacity) : void 0;
+  const background = opacityValue ? `color-mix(in srgb, var(${colorVariable}) ${opacityValue}%, transparent)` : `var(${colorVariable})`;
   return `<span aria-hidden="true" class="ui-color-swatch" style="--ui-color-swatch: ${background}"></span>`;
 };
 const highlightTailwindUtility = (utility) => {
@@ -302,6 +306,9 @@ const toggleDemoCode = (demoId) => {
 const closeNavigation = () => {
   isNavigationOpen.value = false;
 };
+onMounted(() => {
+  colorSwatchesReady.value = true;
+});
 watch(isNavigationOpen, async (isOpen) => {
   if (isOpen) {
     await nextTick();
@@ -339,17 +346,17 @@ watch(
 </script>
 
 <template>
-  <main class="min-h-screen">
+  <main class="min-h-screen bg-zinc-950 text-zinc-100">
     <header
-      class="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-plain-800 bg-plain-950/95 px-4 py-3 backdrop-blur md:hidden"
+      class="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-zinc-800 bg-zinc-950/95 px-4 py-3 backdrop-blur dk:hidden"
     >
       <div class="min-w-0">
-        <p class="text-xs font-medium tracking-widest text-plain-500 uppercase">Components</p>
-        <p class="truncate text-sm font-medium text-plain-100">{{ activeComponent?.name }}</p>
+        <p class="text-xs font-medium tracking-widest text-zinc-500 uppercase">Components</p>
+        <p class="truncate text-sm font-medium text-zinc-100">{{ activeComponent?.name }}</p>
       </div>
       <button
         type="button"
-        class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-plain-700 text-plain-200 transition hover:border-main-700 hover:bg-main-900 hover:text-main-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-main-400"
+        class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-700 text-zinc-200 transition hover:border-blue-700 hover:bg-blue-900 hover:text-blue-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
         aria-controls="ui-mobile-navigation"
         :aria-expanded="isNavigationOpen"
         aria-label="Open components menu"
@@ -371,7 +378,7 @@ watch(
 
     <div
       v-if="isNavigationOpen"
-      class="fixed inset-0 z-40 md:hidden"
+      class="fixed inset-0 z-40 dk:hidden"
       @keydown.esc="closeNavigation"
     >
       <button
@@ -383,16 +390,16 @@ watch(
       <aside
         id="ui-mobile-navigation"
         ref="mobileNavigation"
-        class="relative flex h-full flex-col border-r border-plain-800 bg-plain-950 p-4 shadow-2xl"
+        class="relative flex h-full flex-col border-r border-zinc-800 bg-zinc-950 p-4 shadow-2xl"
         :class="$style.mobileNavigation"
         aria-label="UI components"
         tabindex="-1"
       >
         <div class="flex items-center justify-between gap-4 px-2 py-1">
-          <p class="text-xs font-medium tracking-widest text-plain-500 uppercase">Components</p>
+          <p class="text-xs font-medium tracking-widest text-zinc-500 uppercase">Components</p>
           <button
             type="button"
-            class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-plain-400 transition hover:bg-plain-900 hover:text-plain-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-main-400"
+            class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-900 hover:text-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
             aria-label="Close components menu"
             @click="closeNavigation"
           >
@@ -419,7 +426,7 @@ watch(
             :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
             :class="[
   'block rounded-lg px-3 py-2.5 text-sm transition',
-  activeComponent?.id === component.id ? 'bg-main-900 text-main-100' : 'text-plain-400 hover:bg-plain-900 hover:text-plain-100'
+  activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
 ]"
             :to="{
   path: '/ui',
@@ -437,8 +444,8 @@ watch(
     </div>
 
     <div class="mx-auto flex min-h-screen max-w-7xl">
-      <aside class="hidden w-64 shrink-0 border-r border-plain-800 px-4 py-6 md:block">
-        <p class="px-3 text-xs font-medium tracking-widest text-plain-500 uppercase">Components</p>
+      <aside class="hidden w-64 shrink-0 border-r border-zinc-800 px-4 py-6 dk:block">
+        <p class="px-3 text-xs font-medium tracking-widest text-zinc-500 uppercase">Components</p>
 
         <nav
           class="sticky top-2 mt-4 space-y-1"
@@ -450,7 +457,7 @@ watch(
             :aria-current="activeComponent?.id === component.id ? 'page' : void 0"
             :class="[
   'block rounded-lg px-3 py-2 text-sm transition',
-  activeComponent?.id === component.id ? 'bg-main-900 text-main-100' : 'text-plain-400 hover:bg-plain-900 hover:text-plain-100'
+  activeComponent?.id === component.id ? 'bg-blue-900 text-blue-100' : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100'
 ]"
             :to="{
   path: '/ui',
@@ -465,14 +472,14 @@ watch(
         </nav>
       </aside>
 
-      <section class="min-w-0 flex-1 px-4 py-6 sm:px-6 md:px-10">
+      <section class="min-w-0 flex-1 px-10 py-6 lp:px-6 mb:px-4">
         <template v-if="activeComponent">
           <div class="flex items-center gap-3">
-            <h1 class="text-2xl leading-1 font-semibold sm:text-3xl">{{ activeComponent.name }}</h1>
+            <h1 class="text-3xl leading-tight font-semibold mb:text-2xl">{{ activeComponent.name }}</h1>
             <button
               v-if="uiThemeEnabled"
               type="button"
-              class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-plain-700 text-plain-400 transition hover:border-main-700 hover:bg-main-900 hover:text-main-200 focus-visible:outline-2 focus-visible:outline-offset-2"
+              class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-700 text-zinc-400 transition hover:border-blue-700 hover:bg-blue-900 hover:text-blue-200 focus-visible:outline-2 focus-visible:outline-offset-2"
               :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
               :title="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
               @click="toggleTheme"
@@ -515,16 +522,16 @@ watch(
           <section
             v-for="demo in activeComponent.demos"
             :key="demo.title"
-            class="mt-6 overflow-hidden rounded-2xl border border-plain-800 bg-plain-900/50 first:mt-8"
+            class="mt-6 overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/50 first:mt-8"
           >
             <header
-              class="flex items-start justify-between gap-3 border-b border-plain-800 bg-plain-900 px-4 py-3 sm:gap-4 sm:px-8 sm:py-4"
+              class="flex items-start justify-between gap-4 border-b border-zinc-800 bg-zinc-900 px-8 py-4 mb:gap-3 mb:px-4 mb:py-3"
             >
               <div>
-                <h2 class="text-base font-medium text-plain-100">{{ demo.title }}</h2>
+                <h2 class="text-base font-medium text-zinc-100">{{ demo.title }}</h2>
                 <p
                   v-if="demo.description"
-                  class="mt-1 text-sm text-plain-400"
+                  class="mt-1 text-sm text-zinc-400"
                 >
                   {{ demo.description }}
                 </p>
@@ -533,8 +540,8 @@ watch(
                 type="button"
                 :aria-label="isDemoCodeExpanded(demo.id) ? 'Hide code' : 'View code'"
                 :class="[
-  'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-main-400',
-  isDemoCodeExpanded(demo.id) ? 'border-main-700 bg-main-900 text-main-200' : 'border-plain-700 text-plain-400 hover:border-main-700 hover:text-main-200'
+  'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
+  isDemoCodeExpanded(demo.id) ? 'border-blue-700 bg-blue-900 text-blue-200' : 'border-zinc-700 text-zinc-400 hover:border-blue-700 hover:text-blue-200'
 ]"
                 :title="isDemoCodeExpanded(demo.id) ? 'Hide code' : 'View code'"
                 @click="toggleDemoCode(demo.id)"
@@ -555,56 +562,58 @@ watch(
                 </svg>
               </button>
             </header>
-            <div class="p-4 sm:p-8">
+            <div class="p-8 mb:p-4">
               <component :is="demo.component" />
             </div>
             <div
               v-if="isDemoCodeExpanded(demo.id)"
-              class="border-t border-plain-800 bg-plain-950/80 p-4 sm:p-8"
+              class="border-t border-zinc-800 bg-zinc-950/80 p-8 mb:p-4"
             >
               <pre
-                class="overflow-x-auto text-sm leading-6 text-plain-300"
+                class="overflow-x-auto text-sm leading-6 text-zinc-300"
               ><code v-html="highlightDemoCode(demo.code.trim())" /></pre>
             </div>
           </section>
           <p
             v-if="activeComponent.demos.length === 0"
-            class="mt-8 text-plain-400"
+            class="mt-8 text-zinc-400"
           >
             Add a
-            <code class="text-plain-200">*.demo.vue</code>
+            <code class="text-zinc-200">*.demo.vue</code>
             file to this component folder.
           </p>
-          <section class="mt-8 overflow-hidden rounded-2xl border border-plain-800 bg-plain-900/50">
-            <header class="border-b border-plain-800 bg-plain-900 px-4 py-3 sm:px-8 sm:py-4">
-              <h2 class="text-base font-medium text-plain-100">Component API</h2>
+          <section class="mt-8 overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/50">
+            <header class="border-b border-zinc-800 bg-zinc-900 px-8 py-4 mb:px-4 mb:py-3">
+              <h2 class="text-base font-medium text-zinc-100">Component API</h2>
             </header>
 
-            <div class="grid divide-y divide-plain-800 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
-              <section class="px-4 py-5 sm:px-6">
-                <h3 class="text-sm font-medium text-plain-200">Props</h3>
+            <div
+              class="grid grid-cols-2 divide-x divide-y-0 divide-zinc-800 tb:grid-cols-1 tb:divide-x-0 tb:divide-y"
+            >
+              <section class="px-6 py-5 mb:px-4">
+                <h3 class="text-sm font-medium text-zinc-200">Props</h3>
                 <div class="mt-4 overflow-x-auto">
-                  <table class="w-full min-w-80 text-left text-sm sm:min-w-96">
-                    <!-- <thead class="text-xs tracking-wider text-plain-500 uppercase">
+                  <table class="w-full min-w-96 text-left text-sm mb:min-w-80">
+                    <!-- <thead class="text-xs tracking-wider text-zinc-500 uppercase">
                       <tr>
                         <th class="pb-3 font-medium">Name</th>
                         <th class="pb-3 font-medium">Type</th>
                         <th class="pb-3 text-right font-medium">Required</th>
                       </tr>
                     </thead> -->
-                    <tbody class="divide-y divide-plain-800 text-plain-300">
+                    <tbody class="divide-y divide-zinc-800 text-zinc-300">
                       <tr
                         v-for="prop in activeComponent.props"
                         :key="prop.name"
                       >
-                        <td class="py-3 pr-4 font-mono text-plain-400">{{ prop.name }}</td>
+                        <td class="py-3 pr-4 font-mono text-zinc-400">{{ prop.name }}</td>
                         <td
                           class="py-3 pr-4 font-mono text-xs break-all"
                           v-html="highlightPropType(prop.type)"
                         />
                         <td
                           class="py-3 text-right text-xs"
-                          :class="prop.required ? 'text-danger-600' : 'text-plain-500'"
+                          :class="prop.required ? 'text-red-600' : 'text-zinc-500'"
                         >
                           {{ prop.required ? "*" : "-" }}
                         </td>
@@ -612,7 +621,7 @@ watch(
                       <tr v-if="activeComponent.props.length === 0">
                         <td
                           colspan="3"
-                          class="py-3 text-plain-500"
+                          class="py-3 text-zinc-500"
                         >
                           No props declared.
                         </td>
@@ -622,8 +631,8 @@ watch(
                 </div>
               </section>
 
-              <section class="px-4 py-5 sm:px-6">
-                <h3 class="text-sm font-medium text-plain-200">Slots</h3>
+              <section class="px-6 py-5 mb:px-4">
+                <h3 class="text-sm font-medium text-zinc-200">Slots</h3>
                 <div
                   v-if="activeComponent.slots.length"
                   class="mt-4 flex flex-wrap gap-2"
@@ -631,15 +640,15 @@ watch(
                   <code
                     v-for="slot in activeComponent.slots"
                     :key="slot"
-                    class="rounded-md border border-plain-800 bg-plain-950 px-2.5 py-1.5 text-xs"
-                    :class="slot === 'default' ? 'text-plain-500' : 'text-plain-400'"
+                    class="rounded-md border border-zinc-800 bg-zinc-950 px-2.5 py-1.5 text-xs"
+                    :class="slot === 'default' ? 'text-zinc-500' : 'text-zinc-400'"
                   >
                     {{ slot }}
                   </code>
                 </div>
                 <p
                   v-else
-                  class="mt-4 text-sm text-plain-500"
+                  class="mt-4 text-sm text-zinc-500"
                 >
                   No slots detected.
                 </p>
@@ -649,32 +658,32 @@ watch(
 
           <section
             v-if="activeComponent.styles.length"
-            class="mt-6 overflow-hidden rounded-2xl border border-plain-800 bg-plain-900/50"
+            class="mt-6 overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/50"
           >
             <header
-              class="flex items-center justify-between gap-3 border-b border-plain-800 bg-plain-900 px-4 py-3 sm:gap-4 sm:px-8 sm:py-4"
+              class="flex items-center justify-between gap-4 border-b border-zinc-800 bg-zinc-900 px-8 py-4 mb:gap-3 mb:px-4 mb:py-3"
             >
               <div class="flex items-center gap-3">
                 <div>
-                  <h2 class="text-base font-medium text-plain-100">UI styles</h2>
+                  <h2 class="text-base font-medium text-zinc-100">UI styles</h2>
                 </div>
               </div>
-              <span class="rounded-full border border-plain-700 px-2.5 py-1 text-xs text-plain-400">
+              <span class="rounded-full border border-zinc-700 px-2.5 py-1 text-xs text-zinc-400">
                 {{ activeComponent.styles.length }} fields
               </span>
             </header>
 
-            <div class="px-4 py-2 sm:px-8">
-              <div class="divide-y divide-plain-800">
+            <div class="px-8 py-2 mb:px-4">
+              <div class="divide-y divide-zinc-800">
                 <div
                   v-for="style in visibleStyles"
                   :key="style.path"
-                  class="grid gap-2 py-4 sm:gap-6"
+                  class="grid gap-6 py-4 mb:gap-2"
                   :class="$style.styleGrid"
                 >
-                  <code class="font-mono text-xs text-main-300">{{ style.path }}</code>
+                  <code class="font-mono text-xs text-blue-300">{{ style.path }}</code>
                   <code
-                    class="font-mono text-xs wrap-break-word text-plain-300"
+                    class="font-mono text-xs wrap-break-word text-zinc-300"
                     :class="$style.styleValue"
                     v-html="highlightStyleValue(style.value)"
                   />
@@ -684,11 +693,11 @@ watch(
 
             <footer
               v-if="activeComponent.styles.length > 5"
-              class="sticky bottom-0 z-10 border-t border-plain-800 bg-plain-900/95 px-4 py-3 backdrop-blur sm:px-8"
+              class="sticky bottom-0 z-10 border-t border-zinc-800 bg-zinc-900/95 px-8 py-3 backdrop-blur mb:px-4"
             >
               <button
                 type="button"
-                class="flex w-full cursor-pointer items-center justify-center text-sm font-medium text-info-500 transition hover:text-info-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info-400"
+                class="flex w-full cursor-pointer items-center justify-center text-sm font-medium text-cyan-500 transition hover:text-cyan-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-400"
                 @click="stylesExpanded = !stylesExpanded"
               >
                 {{ stylesExpanded ? "Collapse styles" : `Show all ${activeComponent.styles.length} styles` }}
@@ -699,12 +708,12 @@ watch(
 
         <p
           v-else
-          class="text-plain-400"
+          class="text-zinc-400"
         >
           Add
-          <code class="text-plain-200">Component/index.vue</code>
+          <code class="text-zinc-200">Component/index.vue</code>
           and a
-          <code class="text-plain-200">*.demo.vue</code>
+          <code class="text-zinc-200">*.demo.vue</code>
           file to show it here.
         </p>
       </section>
@@ -713,5 +722,5 @@ watch(
 </template>
 
 <style module>
-:global(.ui-code-comment){color:var(--color-plain-500)}:global(.ui-code-string){color:var(--color-win-400)}:global(.ui-code-keyword){color:var(--color-main-400)}:global(.ui-code-number){color:var(--color-warn-300)}:global(.ui-code-tag){color:var(--color-info-500)}:global(.ui-code-attribute){color:var(--color-alt-300)}:global(.ui-code-punctuation){color:var(--color-plain-400)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-plain-500)}.styleValue :global(.ui-code-attribute){color:var(--color-plain-200)}.styleValue :global(.ui-code-string){color:var(--color-plain-300)}.styleValue :global(.ui-code-number){color:var(--color-plain-400)}.styleValue :global(.ui-code-punctuation){color:var(--color-plain-500)}
+:global(.ui-code-comment){color:var(--color-zinc-500)}:global(.ui-code-string){color:var(--color-emerald-400)}:global(.ui-code-keyword){color:var(--color-blue-400)}:global(.ui-code-number){color:var(--color-amber-300)}:global(.ui-code-tag){color:var(--color-cyan-500)}:global(.ui-code-attribute){color:var(--color-violet-300)}:global(.ui-code-punctuation){color:var(--color-zinc-400)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-zinc-500)}.styleValue :global(.ui-code-attribute){color:var(--color-zinc-200)}.styleValue :global(.ui-code-string){color:var(--color-zinc-300)}.styleValue :global(.ui-code-number){color:var(--color-zinc-400)}.styleValue :global(.ui-code-punctuation){color:var(--color-zinc-500)}
 </style>

package/dist/runtime/ui.css

@@ -0,0 +1 @@
+@theme{--breakpoint-*:initial}@custom-variant dk (@media (width >= 1440px));@custom-variant lp (@media (width < 1440px));@custom-variant tb (@media (width < 1024px));@custom-variant mb (@media (width < 768px));@custom-variant ms (@media (width < 480px));@media (width < 1440px){.dkHidden{display:none!important}}@media (width < 1024px),(width >= 1440px){.lpHidden{display:none!important}}@media (width < 768px),(width >= 1024px){.tbHidden{display:none!important}}@media (width < 480px),(width >= 768px){.mbHidden{display:none!important}}@media (width >= 480px){.msHidden{display:none!important}}@source "./";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -15,6 +15,10 @@
     "./tailwind": {
       "types": "./dist/runtime/tailwind.d.ts",
       "import": "./dist/runtime/tailwind.js"
+    },
+    "./ui.css": {
+      "development": "./src/runtime/ui.css",
+      "default": "./dist/runtime/ui.css"
     }
   },
   "scripts": {