@lucasvu/scope-ui 0.0.3 → 0.0.5

package/dist/index.js

@@ -6624,6 +6624,7 @@ var uiAiManifest = {
   styleImport: "@lucasvu/scope-ui/styles.css",
   rules: [
     "Import the stylesheet once at the app entry before rendering any component.",
+    "If the project declares an approved theme preset in AGENTS.md or ui-theme.css, stay inside that preset and do not invent a second palette.",
     "Prefer the canonical component for each intent instead of mixing legacy MainFe components.",
     "Use Input/Textarea/Select label props directly for simple fields; use Field only to wrap custom controls or grouped content.",
     "Use Select for small fixed option lists, SearchableSelect for larger local lists, Combobox for type-and-pick flows, and AsyncCombobox for remote search.",
@@ -6840,6 +6841,212 @@ var uiAiManifest = {
 };
 
 // src/theme-contract.ts
+var uiThemePresets = [
+  {
+    id: "ocean",
+    label: "Ocean Glass",
+    description: "Blue-cyan preset with clean glass surfaces. Matches the current default visual language.",
+    recommendedFor: [
+      "Admin dashboards",
+      "SaaS CRUD screens",
+      "Projects that want the existing package look"
+    ],
+    tokens: {
+      light: {
+        "--tw-background": "0 0% 100%",
+        "--tw-foreground": "222.2 47.4% 11.2%",
+        "--tw-primary": "221.2 83.2% 53.3%",
+        "--tw-accent": "199 89% 48%",
+        "--tw-success": "142.1 76.2% 36.3%",
+        "--tw-destructive": "0 84.2% 60.2%",
+        "--tw-border": "214.3 31.8% 91.4%",
+        "--radius": "0.75rem",
+        "--surface": "rgba(255, 255, 255, 0.92)",
+        "--surface-strong": "rgba(241, 245, 249, 0.96)",
+        "--grey": "rgba(248, 250, 252, 0.96)",
+        "--grey-strong": "rgba(241, 245, 249, 0.98)",
+        "--shadow-sm": "0 10px 28px -18px rgba(15, 23, 42, 0.22)",
+        "--shadow": "0 24px 60px -28px rgba(15, 23, 42, 0.3)",
+        "--primary-grad-from": "199 89% 48%",
+        "--primary-grad-to": "221.2 83.2% 53.3%"
+      },
+      dark: {
+        "--tw-background": "222.2 84% 4.9%",
+        "--tw-foreground": "210 40% 98%",
+        "--tw-primary": "217.2 91.2% 59.8%",
+        "--tw-accent": "199 89% 48%",
+        "--tw-success": "142.1 70.6% 45.3%",
+        "--tw-destructive": "0 62.8% 30.6%",
+        "--tw-border": "217.2 32.6% 17.5%",
+        "--radius": "0.75rem",
+        "--surface": "rgba(15, 23, 42, 0.78)",
+        "--surface-strong": "rgba(30, 41, 59, 0.92)",
+        "--grey": "rgba(30, 41, 59, 0.88)",
+        "--grey-strong": "rgba(51, 65, 85, 0.92)",
+        "--shadow-sm": "0 16px 32px -18px rgba(2, 6, 23, 0.48)",
+        "--shadow": "0 28px 80px -32px rgba(2, 6, 23, 0.7)",
+        "--primary-grad-from": "198.6 88.7% 48.4%",
+        "--primary-grad-to": "221.2 83.2% 53.3%"
+      }
+    }
+  },
+  {
+    id: "sunset",
+    label: "Sunset Ember",
+    description: "Warm orange-coral preset with softer cream surfaces for branded landing or growth products.",
+    recommendedFor: [
+      "Growth products",
+      "Commerce backoffices",
+      "Projects that want a warmer visual tone"
+    ],
+    tokens: {
+      light: {
+        "--tw-background": "30 100% 98%",
+        "--tw-foreground": "20 24% 14%",
+        "--tw-primary": "14 90% 56%",
+        "--tw-accent": "29 100% 58%",
+        "--tw-success": "145 63% 38%",
+        "--tw-destructive": "0 78% 58%",
+        "--tw-border": "24 45% 89%",
+        "--radius": "0.85rem",
+        "--surface": "rgba(255, 247, 240, 0.92)",
+        "--surface-strong": "rgba(255, 237, 223, 0.96)",
+        "--grey": "rgba(255, 243, 231, 0.96)",
+        "--grey-strong": "rgba(255, 232, 214, 0.98)",
+        "--shadow-sm": "0 12px 30px -18px rgba(194, 65, 12, 0.18)",
+        "--shadow": "0 28px 64px -30px rgba(154, 52, 18, 0.24)",
+        "--primary-grad-from": "29 100% 58%",
+        "--primary-grad-to": "14 90% 56%"
+      },
+      dark: {
+        "--tw-background": "20 24% 8%",
+        "--tw-foreground": "40 33% 96%",
+        "--tw-primary": "18 100% 62%",
+        "--tw-accent": "35 100% 58%",
+        "--tw-success": "145 60% 47%",
+        "--tw-destructive": "0 73% 52%",
+        "--tw-border": "18 24% 22%",
+        "--radius": "0.85rem",
+        "--surface": "rgba(41, 24, 18, 0.84)",
+        "--surface-strong": "rgba(59, 34, 24, 0.9)",
+        "--grey": "rgba(70, 42, 29, 0.88)",
+        "--grey-strong": "rgba(92, 54, 38, 0.9)",
+        "--shadow-sm": "0 18px 36px -20px rgba(67, 20, 7, 0.48)",
+        "--shadow": "0 30px 84px -34px rgba(67, 20, 7, 0.62)",
+        "--primary-grad-from": "35 100% 58%",
+        "--primary-grad-to": "18 100% 62%"
+      }
+    }
+  },
+  {
+    id: "forest",
+    label: "Forest Mist",
+    description: "Emerald-teal preset with soft botanical surfaces for calmer productivity products.",
+    recommendedFor: [
+      "Operations tools",
+      "Internal platforms",
+      "Products that want a calmer green tone"
+    ],
+    tokens: {
+      light: {
+        "--tw-background": "138 40% 98%",
+        "--tw-foreground": "160 25% 14%",
+        "--tw-primary": "158 64% 40%",
+        "--tw-accent": "173 58% 44%",
+        "--tw-success": "145 63% 36%",
+        "--tw-destructive": "0 78% 58%",
+        "--tw-border": "143 21% 88%",
+        "--radius": "0.8rem",
+        "--surface": "rgba(245, 252, 249, 0.92)",
+        "--surface-strong": "rgba(232, 245, 239, 0.96)",
+        "--grey": "rgba(240, 248, 244, 0.96)",
+        "--grey-strong": "rgba(225, 240, 232, 0.98)",
+        "--shadow-sm": "0 12px 28px -18px rgba(5, 86, 66, 0.18)",
+        "--shadow": "0 26px 62px -30px rgba(6, 78, 59, 0.24)",
+        "--primary-grad-from": "173 58% 44%",
+        "--primary-grad-to": "158 64% 40%"
+      },
+      dark: {
+        "--tw-background": "164 35% 8%",
+        "--tw-foreground": "144 35% 96%",
+        "--tw-primary": "160 70% 46%",
+        "--tw-accent": "174 72% 45%",
+        "--tw-success": "145 68% 46%",
+        "--tw-destructive": "0 70% 52%",
+        "--tw-border": "160 20% 20%",
+        "--radius": "0.8rem",
+        "--surface": "rgba(16, 36, 31, 0.84)",
+        "--surface-strong": "rgba(21, 51, 44, 0.9)",
+        "--grey": "rgba(24, 61, 52, 0.88)",
+        "--grey-strong": "rgba(31, 77, 65, 0.9)",
+        "--shadow-sm": "0 18px 34px -20px rgba(1, 44, 34, 0.48)",
+        "--shadow": "0 30px 82px -34px rgba(1, 44, 34, 0.6)",
+        "--primary-grad-from": "174 72% 45%",
+        "--primary-grad-to": "160 70% 46%"
+      }
+    }
+  },
+  {
+    id: "graphite",
+    label: "Graphite Pulse",
+    description: "Neutral slate preset with restrained blue accents for products that need a steadier enterprise tone.",
+    recommendedFor: [
+      "Enterprise admin panels",
+      "B2B internal tools",
+      "Projects that want a more neutral interface"
+    ],
+    tokens: {
+      light: {
+        "--tw-background": "220 18% 97%",
+        "--tw-foreground": "222 24% 14%",
+        "--tw-primary": "221 24% 32%",
+        "--tw-accent": "198 83% 44%",
+        "--tw-success": "160 56% 38%",
+        "--tw-destructive": "0 72% 54%",
+        "--tw-border": "218 17% 86%",
+        "--radius": "0.7rem",
+        "--surface": "rgba(248, 250, 252, 0.94)",
+        "--surface-strong": "rgba(226, 232, 240, 0.96)",
+        "--grey": "rgba(241, 245, 249, 0.98)",
+        "--grey-strong": "rgba(226, 232, 240, 0.99)",
+        "--shadow-sm": "0 12px 30px -20px rgba(15, 23, 42, 0.18)",
+        "--shadow": "0 28px 66px -30px rgba(15, 23, 42, 0.24)",
+        "--primary-grad-from": "198 83% 44%",
+        "--primary-grad-to": "221 24% 32%"
+      },
+      dark: {
+        "--tw-background": "222 32% 8%",
+        "--tw-foreground": "210 25% 96%",
+        "--tw-primary": "210 24% 82%",
+        "--tw-accent": "192 92% 52%",
+        "--tw-success": "158 64% 45%",
+        "--tw-destructive": "0 72% 56%",
+        "--tw-border": "217 19% 24%",
+        "--radius": "0.7rem",
+        "--surface": "rgba(15, 23, 42, 0.82)",
+        "--surface-strong": "rgba(30, 41, 59, 0.92)",
+        "--grey": "rgba(30, 41, 59, 0.9)",
+        "--grey-strong": "rgba(51, 65, 85, 0.92)",
+        "--shadow-sm": "0 18px 38px -22px rgba(2, 6, 23, 0.48)",
+        "--shadow": "0 32px 88px -34px rgba(2, 6, 23, 0.68)",
+        "--primary-grad-from": "192 92% 52%",
+        "--primary-grad-to": "210 24% 82%"
+      }
+    }
+  }
+];
+var uiDefaultThemePreset = uiThemePresets[0];
+function createThemePresetCssExample(themePreset) {
+  const renderBlock = (tokens) => Object.entries(tokens).map(([token, value]) => `  ${token}: ${value};`).join("\n");
+  return `:root {
+${renderBlock(themePreset.tokens.light)}
+}
+
+.dark,
+[data-ui-theme='dark'] {
+${renderBlock(themePreset.tokens.dark)}
+}`;
+}
 var uiThemeContract = {
   packageName: "@lucasvu/scope-ui",
   importOrder: [
@@ -6851,8 +7058,11 @@ var uiThemeContract = {
     dark: [".dark", "[data-ui-theme='dark']"]
   },
   overrideFile: "src/styles/ui-theme.css",
+  defaultPreset: uiDefaultThemePreset.id,
+  presets: uiThemePresets,
   rules: [
     "Import the package stylesheet before your project theme override stylesheet.",
+    "Choose one approved preset and keep the entire project on that preset instead of mixing palettes page by page.",
     "Override tokens in one shared theme file instead of scattering colors across components.",
     "Use :root for the default light theme and .dark or [data-ui-theme='dark'] for dark theme.",
     "Only override tokens declared here. Do not patch component internals unless you are extending the library.",
@@ -6864,7 +7074,7 @@ var uiThemeContract = {
       description: "Base app background in HSL triplet format.",
       defaultLight: "0 0% 100%",
       defaultDark: "222.2 84% 4.9%",
-      usedBy: ["Input", "Select", "Card", "Tabs", "global surface"]
+      usedBy: ["body background", "Input fallback", "page background"]
     },
     {
       name: "--tw-foreground",
@@ -6908,6 +7118,13 @@ var uiThemeContract = {
       defaultDark: "217.2 32.6% 17.5%",
       usedBy: ["Input", "Select", "Card", "DataTable"]
     },
+    {
+      name: "--radius",
+      description: "Shared component radius.",
+      defaultLight: "0.75rem",
+      defaultDark: "0.75rem",
+      usedBy: ["Button", "Input", "Card", "Tabs"]
+    },
     {
       name: "--surface",
       description: "Default surface background as a CSS color.",
@@ -6936,6 +7153,20 @@ var uiThemeContract = {
       defaultDark: "rgba(51, 65, 85, 0.92)",
       usedBy: ["DataTable row hover"]
     },
+    {
+      name: "--shadow-sm",
+      description: "Small elevation shadow.",
+      defaultLight: "0 10px 28px -18px rgba(15, 23, 42, 0.22)",
+      defaultDark: "0 16px 32px -18px rgba(2, 6, 23, 0.48)",
+      usedBy: ["Tabs", "Pagination", "subtle elevation"]
+    },
+    {
+      name: "--shadow",
+      description: "Primary elevation shadow.",
+      defaultLight: "0 24px 60px -28px rgba(15, 23, 42, 0.3)",
+      defaultDark: "0 28px 80px -32px rgba(2, 6, 23, 0.7)",
+      usedBy: ["Card", "Button emphasis", "floating surfaces"]
+    },
     {
       name: "--text",
       description: "Generic text color alias as a CSS color.",
@@ -6972,27 +7203,16 @@ var uiThemeContract = {
       usedBy: ["Button variant create"]
     }
   ],
-  exampleCss: `:root {
-  --tw-primary: 12 88% 56%;
-  --tw-accent: 24 95% 52%;
-  --primary-grad-from: 24 95% 52%;
-  --primary-grad-to: 12 88% 56%;
-  --surface: rgba(255, 248, 240, 0.92);
-}
-
-.dark {
-  --tw-primary: 18 100% 62%;
-  --tw-accent: 35 100% 58%;
-  --surface: rgba(24, 24, 27, 0.82);
-}`
+  exampleCss: createThemePresetCssExample(uiDefaultThemePreset)
 };
 var uiProjectAiRules = [
   "Use @lucasvu/scope-ui as the default UI library.",
   "Import @lucasvu/scope-ui/styles.css once at the app entry.",
   "Import the project override theme file after the package stylesheet.",
+  "Stay inside the approved theme preset declared by the project and do not invent a second palette.",
   "Read uiAiManifest to choose the correct component by intent before coding.",
-  "Read uiThemeContract before changing colors, shadows, or theme behavior.",
+  "Read uiThemeContract before changing colors, shadows, radius, or theme behavior.",
   "Prefer root exports and avoid MainFe unless the task explicitly targets a legacy screen."
 ];
 
-export { Alert, ArgonSidebar, AsyncCombobox, Badge, Breadcrumb, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Combobox, FormControl as Control, DataTable, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, FormItem as Item, FormLabel as Label, LineClampTooltip, Loading, main_fe_exports as MainFe, FormMessage as Message, MultiSelect, NumericInput, OverflowTooltip, PageTitle, Pagination, SearchableSelect, SectionTitle, Select, Sidebar, SidebarItem, Stat, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, Textarea, Tooltip, TruncatedText, cn, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant, uiAiManifest, uiProjectAiRules, uiThemeContract };
+export { Alert, ArgonSidebar, AsyncCombobox, Badge, Breadcrumb, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Combobox, FormControl as Control, DataTable, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, FormItem as Item, FormLabel as Label, LineClampTooltip, Loading, main_fe_exports as MainFe, FormMessage as Message, MultiSelect, NumericInput, OverflowTooltip, PageTitle, Pagination, SearchableSelect, SectionTitle, Select, Sidebar, SidebarItem, Stat, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, Textarea, Tooltip, TruncatedText, cn, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant, uiAiManifest, uiDefaultThemePreset, uiProjectAiRules, uiThemeContract, uiThemePresets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucasvu/scope-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -53,4 +53,4 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   }
-}
+}