@builderos/create-agent-os 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/template/control-center/frontend/src/index.css +3 -48
  3. package/src/template/control-center/frontend/tailwind.config.js +68 -1
  4. package/src/template/design/src/index.css +3 -48
  5. package/src/template/design/tailwind.config.js +68 -1
  6. package/src/template/index.css +97 -2
  7. package/src/template/tailwind.config.js +71 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@builderos/create-agent-os",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Scaffolding tool for Agent OS applications",
5
5
  "type": "module",
6
6
  "bin": {
package/src/template/control-center/frontend/src/index.css CHANGED
@@ -1,58 +1,13 @@
1
- @import "tailwindcss";
2
- @plugin "tailwindcss-animate";
3
- @plugin "@tailwindcss/typography";
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
4
 
5
5
 
6
- @custom-variant dark (&:is(.dark *));
7
-
8
6
  /*
9
7
  Control Center Theme (Aligned with Design OS)
10
8
  Warm Neutrals / Stone Palette
11
9
  */
12
- @theme {
13
- --font-display: "DM Sans", system-ui, sans-serif;
14
- --font-body: "DM Sans", system-ui, sans-serif;
15
- --font-sans: "DM Sans", system-ui, sans-serif;
16
- --font-mono: "IBM Plex Mono", ui-monospace, monospace;
17
- }
18
10
 
19
- @theme inline {
20
- --radius-sm: calc(var(--radius) - 4px);
21
- --radius-md: calc(var(--radius) - 2px);
22
- --radius-lg: var(--radius);
23
- --radius-xl: calc(var(--radius) + 4px);
24
- --color-background: var(--background);
25
- --color-foreground: var(--foreground);
26
- --color-card: var(--card);
27
- --color-card-foreground: var(--card-foreground);
28
- --color-popover: var(--popover);
29
- --color-popover-foreground: var(--popover-foreground);
30
- --color-primary: var(--primary);
31
- --color-primary-foreground: var(--primary-foreground);
32
- --color-secondary: var(--secondary);
33
- --color-secondary-foreground: var(--secondary-foreground);
34
- --color-muted: var(--muted);
35
- --color-muted-foreground: var(--muted-foreground);
36
- --color-accent: var(--accent);
37
- --color-accent-foreground: var(--accent-foreground);
38
- --color-destructive: var(--destructive);
39
- --color-border: var(--border);
40
- --color-input: var(--input);
41
- --color-ring: var(--ring);
42
- --color-chart-1: var(--chart-1);
43
- --color-chart-2: var(--chart-2);
44
- --color-chart-3: var(--chart-3);
45
- --color-chart-4: var(--chart-4);
46
- --color-chart-5: var(--chart-5);
47
- --color-sidebar: var(--sidebar);
48
- --color-sidebar-foreground: var(--sidebar-foreground);
49
- --color-sidebar-primary: var(--sidebar-primary);
50
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
51
- --color-sidebar-accent: var(--sidebar-accent);
52
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
53
- --color-sidebar-border: var(--sidebar-border);
54
- --color-sidebar-ring: var(--sidebar-ring);
55
- }
56
11
 
57
12
  /* Light theme - Warm Stone */
58
13
  :root {
package/src/template/control-center/frontend/tailwind.config.js CHANGED
@@ -1,14 +1,81 @@
1
1
  /** @type {import('tailwindcss').Config} */
2
2
  export default {
3
+ darkMode: ["class"],
3
4
  content: [
4
5
  "./index.html",
5
6
  "./src/**/*.{js,ts,jsx,tsx}",
6
7
  "../../packages/agent-os-ui/src/**/*.{js,ts,jsx,tsx}"
7
8
  ],
8
9
  theme: {
9
- extend: {},
10
+ extend: {
11
+ fontFamily: {
12
+ display: ["DM Sans", "system-ui", "sans-serif"],
13
+ body: ["DM Sans", "system-ui", "sans-serif"],
14
+ sans: ["DM Sans", "system-ui", "sans-serif"],
15
+ mono: ["IBM Plex Mono", "ui-monospace", "monospace"]
16
+ },
17
+ borderRadius: {
18
+ lg: 'var(--radius)',
19
+ md: 'calc(var(--radius) - 2px)',
20
+ sm: 'calc(var(--radius) - 4px)',
21
+ xl: 'calc(var(--radius) + 4px)'
22
+ },
23
+ colors: {
24
+ background: 'var(--background)',
25
+ foreground: 'var(--foreground)',
26
+ card: {
27
+ DEFAULT: 'var(--card)',
28
+ foreground: 'var(--card-foreground)'
29
+ },
30
+ popover: {
31
+ DEFAULT: 'var(--popover)',
32
+ foreground: 'var(--popover-foreground)'
33
+ },
34
+ primary: {
35
+ DEFAULT: 'var(--primary)',
36
+ foreground: 'var(--primary-foreground)'
37
+ },
38
+ secondary: {
39
+ DEFAULT: 'var(--secondary)',
40
+ foreground: 'var(--secondary-foreground)'
41
+ },
42
+ muted: {
43
+ DEFAULT: 'var(--muted)',
44
+ foreground: 'var(--muted-foreground)'
45
+ },
46
+ accent: {
47
+ DEFAULT: 'var(--accent)',
48
+ foreground: 'var(--accent-foreground)'
49
+ },
50
+ destructive: {
51
+ DEFAULT: 'var(--destructive)',
52
+ foreground: 'var(--destructive-foreground)'
53
+ },
54
+ border: 'var(--border)',
55
+ input: 'var(--input)',
56
+ ring: 'var(--ring)',
57
+ chart: {
58
+ '1': 'var(--chart-1)',
59
+ '2': 'var(--chart-2)',
60
+ '3': 'var(--chart-3)',
61
+ '4': 'var(--chart-4)',
62
+ '5': 'var(--chart-5)'
63
+ },
64
+ sidebar: {
65
+ DEFAULT: 'var(--sidebar)',
66
+ foreground: 'var(--sidebar-foreground)',
67
+ primary: 'var(--sidebar-primary)',
68
+ 'primary-foreground': 'var(--sidebar-primary-foreground)',
69
+ accent: 'var(--sidebar-accent)',
70
+ 'accent-foreground': 'var(--sidebar-accent-foreground)',
71
+ border: 'var(--sidebar-border)',
72
+ ring: 'var(--sidebar-ring)'
73
+ }
74
+ }
75
+ }
10
76
  },
11
77
  plugins: [
12
78
  require('@tailwindcss/typography'),
79
+ require("tailwindcss-animate")
13
80
  ],
14
81
  }
package/src/template/design/src/index.css CHANGED
@@ -1,59 +1,14 @@
1
- @import "tailwindcss";
2
- @import "tw-animate-css";
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
3
4
 
4
- @custom-variant dark (&:is(.dark *));
5
5
 
6
6
  /*
7
7
  Design OS - Refined Utility Design System
8
8
  A professional, editorial-inspired aesthetic with warm neutrals
9
9
  Using Tailwind's stone palette for warmth
10
10
  */
11
- @theme {
12
- /* Font families - DM Sans for clean, geometric type */
13
- --font-display: "DM Sans", system-ui, sans-serif;
14
- --font-body: "DM Sans", system-ui, sans-serif;
15
- --font-sans: "DM Sans", system-ui, sans-serif;
16
- --font-mono: "IBM Plex Mono", ui-monospace, monospace;
17
- }
18
11
 
19
- /* Shadcn theme integration */
20
- @theme inline {
21
- --radius-sm: calc(var(--radius) - 4px);
22
- --radius-md: calc(var(--radius) - 2px);
23
- --radius-lg: var(--radius);
24
- --radius-xl: calc(var(--radius) + 4px);
25
- --color-background: var(--background);
26
- --color-foreground: var(--foreground);
27
- --color-card: var(--card);
28
- --color-card-foreground: var(--card-foreground);
29
- --color-popover: var(--popover);
30
- --color-popover-foreground: var(--popover-foreground);
31
- --color-primary: var(--primary);
32
- --color-primary-foreground: var(--primary-foreground);
33
- --color-secondary: var(--secondary);
34
- --color-secondary-foreground: var(--secondary-foreground);
35
- --color-muted: var(--muted);
36
- --color-muted-foreground: var(--muted-foreground);
37
- --color-accent: var(--accent);
38
- --color-accent-foreground: var(--accent-foreground);
39
- --color-destructive: var(--destructive);
40
- --color-border: var(--border);
41
- --color-input: var(--input);
42
- --color-ring: var(--ring);
43
- --color-chart-1: var(--chart-1);
44
- --color-chart-2: var(--chart-2);
45
- --color-chart-3: var(--chart-3);
46
- --color-chart-4: var(--chart-4);
47
- --color-chart-5: var(--chart-5);
48
- --color-sidebar: var(--sidebar);
49
- --color-sidebar-foreground: var(--sidebar-foreground);
50
- --color-sidebar-primary: var(--sidebar-primary);
51
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
52
- --color-sidebar-accent: var(--sidebar-accent);
53
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
54
- --color-sidebar-border: var(--sidebar-border);
55
- --color-sidebar-ring: var(--sidebar-ring);
56
- }
57
12
 
58
13
  /*
59
14
  Light theme - Warm Stone palette
package/src/template/design/tailwind.config.js CHANGED
@@ -1,13 +1,80 @@
1
1
  /** @type {import('tailwindcss').Config} */
2
2
  export default {
3
+ darkMode: ["class"],
3
4
  content: [
4
5
  "./index.html",
5
6
  "./src/**/*.{js,ts,jsx,tsx}",
6
7
  ],
7
8
  theme: {
8
- extend: {},
9
+ extend: {
10
+ fontFamily: {
11
+ display: ["DM Sans", "system-ui", "sans-serif"],
12
+ body: ["DM Sans", "system-ui", "sans-serif"],
13
+ sans: ["DM Sans", "system-ui", "sans-serif"],
14
+ mono: ["IBM Plex Mono", "ui-monospace", "monospace"]
15
+ },
16
+ borderRadius: {
17
+ lg: 'var(--radius)',
18
+ md: 'calc(var(--radius) - 2px)',
19
+ sm: 'calc(var(--radius) - 4px)',
20
+ xl: 'calc(var(--radius) + 4px)'
21
+ },
22
+ colors: {
23
+ background: 'var(--background)',
24
+ foreground: 'var(--foreground)',
25
+ card: {
26
+ DEFAULT: 'var(--card)',
27
+ foreground: 'var(--card-foreground)'
28
+ },
29
+ popover: {
30
+ DEFAULT: 'var(--popover)',
31
+ foreground: 'var(--popover-foreground)'
32
+ },
33
+ primary: {
34
+ DEFAULT: 'var(--primary)',
35
+ foreground: 'var(--primary-foreground)'
36
+ },
37
+ secondary: {
38
+ DEFAULT: 'var(--secondary)',
39
+ foreground: 'var(--secondary-foreground)'
40
+ },
41
+ muted: {
42
+ DEFAULT: 'var(--muted)',
43
+ foreground: 'var(--muted-foreground)'
44
+ },
45
+ accent: {
46
+ DEFAULT: 'var(--accent)',
47
+ foreground: 'var(--accent-foreground)'
48
+ },
49
+ destructive: {
50
+ DEFAULT: 'var(--destructive)',
51
+ foreground: 'var(--destructive-foreground)'
52
+ },
53
+ border: 'var(--border)',
54
+ input: 'var(--input)',
55
+ ring: 'var(--ring)',
56
+ chart: {
57
+ '1': 'var(--chart-1)',
58
+ '2': 'var(--chart-2)',
59
+ '3': 'var(--chart-3)',
60
+ '4': 'var(--chart-4)',
61
+ '5': 'var(--chart-5)'
62
+ },
63
+ sidebar: {
64
+ DEFAULT: 'var(--sidebar)',
65
+ foreground: 'var(--sidebar-foreground)',
66
+ primary: 'var(--sidebar-primary)',
67
+ 'primary-foreground': 'var(--sidebar-primary-foreground)',
68
+ accent: 'var(--sidebar-accent)',
69
+ 'accent-foreground': 'var(--sidebar-accent-foreground)',
70
+ border: 'var(--sidebar-border)',
71
+ ring: 'var(--sidebar-ring)'
72
+ }
73
+ }
74
+ }
9
75
  },
10
76
  plugins: [
11
77
  require('@tailwindcss/typography'),
78
+ require("tailwindcss-animate")
12
79
  ],
13
80
  }
package/src/template/index.css CHANGED
@@ -2,6 +2,101 @@
2
2
  @tailwind components;
3
3
  @tailwind utilities;
4
4
 
5
- :root {
6
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
5
+ @layer base {
6
+ :root {
7
+ --radius: 0.5rem;
8
+ --background: 0.985 0.001 106.424;
9
+ /* oklch components if using tailwind 4, but for T3 we use values */
10
+ /* Reverting to hex/standard values or using the T3 CSS var format */
11
+ /* Actually, copying the Oklch values is fine if we use postcss-preset-env or if browser supports it.
12
+ Tailwind 3 doesn't automatically parse "0.985 0.001 106.424" without "oklch(...)".
13
+ The previous CSS file used `oklch(...)`. I should use that.
14
+ */
15
+ --background: oklch(0.985 0.001 106.424);
16
+ --foreground: oklch(0.216 0.006 56.043);
17
+ --card: oklch(1 0 0);
18
+ --card-foreground: oklch(0.216 0.006 56.043);
19
+ --popover: oklch(1 0 0);
20
+ --popover-foreground: oklch(0.216 0.006 56.043);
21
+ --primary: oklch(0.216 0.006 56.043);
22
+ --primary-foreground: oklch(0.985 0.001 106.424);
23
+ --secondary: oklch(0.970 0.001 106.424);
24
+ --secondary-foreground: oklch(0.216 0.006 56.043);
25
+ --muted: oklch(0.970 0.001 106.424);
26
+ --muted-foreground: oklch(0.370 0.010 67.558);
27
+ --accent: oklch(0.970 0.001 106.424);
28
+ --accent-foreground: oklch(0.216 0.006 56.043);
29
+ --destructive: oklch(0.586 0.253 17.585);
30
+ --destructive-foreground: oklch(0.985 0.001 106.424);
31
+ /* Added missing dest-bg */
32
+ --border: oklch(0.923 0.003 48.717);
33
+ --input: oklch(0.923 0.003 48.717);
34
+ --ring: oklch(0.553 0.013 58.071);
35
+
36
+ --chart-1: oklch(0.532 0.157 131.589);
37
+ --chart-2: oklch(0.6 0.118 184.704);
38
+ --chart-3: oklch(0.398 0.07 227.392);
39
+ --chart-4: oklch(0.828 0.189 84.429);
40
+ --chart-5: oklch(0.769 0.188 70.08);
41
+
42
+ --sidebar: oklch(0.985 0.001 106.424);
43
+ --sidebar-foreground: oklch(0.216 0.006 56.043);
44
+ --sidebar-primary: oklch(0.216 0.006 56.043);
45
+ --sidebar-primary-foreground: oklch(0.985 0.001 106.424);
46
+ --sidebar-accent: oklch(0.970 0.001 106.424);
47
+ --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
48
+ --sidebar-border: oklch(0.923 0.003 48.717);
49
+ --sidebar-ring: oklch(0.553 0.013 58.071);
50
+
51
+ --font-display: "DM Sans", system-ui, sans-serif;
52
+ --font-sans: "DM Sans", system-ui, sans-serif;
53
+ --font-mono: "IBM Plex Mono", ui-monospace, monospace;
54
+ }
55
+
56
+ .dark {
57
+ --background: oklch(0.216 0.006 56.043);
58
+ --foreground: oklch(0.985 0.001 106.424);
59
+ --card: oklch(0.268 0.007 34.298);
60
+ --card-foreground: oklch(0.985 0.001 106.424);
61
+ --popover: oklch(0.268 0.007 34.298);
62
+ --popover-foreground: oklch(0.985 0.001 106.424);
63
+ --primary: oklch(0.923 0.003 48.717);
64
+ --primary-foreground: oklch(0.216 0.006 56.043);
65
+ --secondary: oklch(0.318 0.008 43.185);
66
+ --secondary-foreground: oklch(0.985 0.001 106.424);
67
+ --muted: oklch(0.318 0.008 43.185);
68
+ --muted-foreground: oklch(0.709 0.01 56.259);
69
+ --accent: oklch(0.318 0.008 43.185);
70
+ --accent-foreground: oklch(0.985 0.001 106.424);
71
+ --destructive: oklch(0.712 0.194 13.428);
72
+ --destructive-foreground: oklch(0.985 0.001 106.424);
73
+ --border: oklch(0.370 0.010 67.558);
74
+ --input: oklch(0.370 0.010 67.558);
75
+ --ring: oklch(0.553 0.013 58.071);
76
+
77
+ --chart-1: oklch(0.648 0.2 131.684);
78
+ --chart-2: oklch(0.696 0.17 162.48);
79
+ --chart-3: oklch(0.769 0.188 70.08);
80
+ --chart-4: oklch(0.627 0.265 303.9);
81
+ --chart-5: oklch(0.645 0.246 16.439);
82
+
83
+ --sidebar: oklch(0.268 0.007 34.298);
84
+ --sidebar-foreground: oklch(0.985 0.001 106.424);
85
+ --sidebar-primary: oklch(0.648 0.2 131.684);
86
+ --sidebar-primary-foreground: oklch(0.216 0.006 56.043);
87
+ --sidebar-accent: oklch(0.318 0.008 43.185);
88
+ --sidebar-accent-foreground: oklch(0.985 0.001 106.424);
89
+ --sidebar-border: oklch(0.370 0.010 67.558);
90
+ --sidebar-ring: oklch(0.553 0.013 58.071);
91
+ }
92
+ }
93
+
94
+ @layer base {
95
+ * {
96
+ @apply border-border;
97
+ }
98
+
99
+ body {
100
+ @apply bg-background text-foreground font-sans;
101
+ }
7
102
  }
package/src/template/tailwind.config.js CHANGED
@@ -1,11 +1,80 @@
1
1
  /** @type {import('tailwindcss').Config} */
2
2
  export default {
3
+ darkMode: ["class"],
3
4
  content: [
4
5
  "./index.html",
5
6
  "./src/**/*.{js,ts,jsx,tsx}",
7
+ "./node_modules/@builderos/agent-os-ui/dist/**/*.{js,ts,jsx,tsx}" // Support for installed UI lib if built
6
8
  ],
7
9
  theme: {
8
- extend: {},
10
+ extend: {
11
+ fontFamily: {
12
+ display: ["DM Sans", "system-ui", "sans-serif"],
13
+ body: ["DM Sans", "system-ui", "sans-serif"],
14
+ sans: ["DM Sans", "system-ui", "sans-serif"],
15
+ mono: ["IBM Plex Mono", "ui-monospace", "monospace"]
16
+ },
17
+ borderRadius: {
18
+ lg: 'var(--radius)',
19
+ md: 'calc(var(--radius) - 2px)',
20
+ sm: 'calc(var(--radius) - 4px)',
21
+ xl: 'calc(var(--radius) + 4px)'
22
+ },
23
+ colors: {
24
+ background: 'var(--background)',
25
+ foreground: 'var(--foreground)',
26
+ card: {
27
+ DEFAULT: 'var(--card)',
28
+ foreground: 'var(--card-foreground)'
29
+ },
30
+ popover: {
31
+ DEFAULT: 'var(--popover)',
32
+ foreground: 'var(--popover-foreground)'
33
+ },
34
+ primary: {
35
+ DEFAULT: 'var(--primary)',
36
+ foreground: 'var(--primary-foreground)'
37
+ },
38
+ secondary: {
39
+ DEFAULT: 'var(--secondary)',
40
+ foreground: 'var(--secondary-foreground)'
41
+ },
42
+ muted: {
43
+ DEFAULT: 'var(--muted)',
44
+ foreground: 'var(--muted-foreground)'
45
+ },
46
+ accent: {
47
+ DEFAULT: 'var(--accent)',
48
+ foreground: 'var(--accent-foreground)'
49
+ },
50
+ destructive: {
51
+ DEFAULT: 'var(--destructive)',
52
+ foreground: 'var(--destructive-foreground)'
53
+ },
54
+ border: 'var(--border)',
55
+ input: 'var(--input)',
56
+ ring: 'var(--ring)',
57
+ chart: {
58
+ '1': 'var(--chart-1)',
59
+ '2': 'var(--chart-2)',
60
+ '3': 'var(--chart-3)',
61
+ '4': 'var(--chart-4)',
62
+ '5': 'var(--chart-5)'
63
+ },
64
+ sidebar: {
65
+ DEFAULT: 'var(--sidebar)',
66
+ foreground: 'var(--sidebar-foreground)',
67
+ primary: 'var(--sidebar-primary)',
68
+ 'primary-foreground': 'var(--sidebar-primary-foreground)',
69
+ accent: 'var(--sidebar-accent)',
70
+ 'accent-foreground': 'var(--sidebar-accent-foreground)',
71
+ border: 'var(--sidebar-border)',
72
+ ring: 'var(--sidebar-ring)'
73
+ }
74
+ }
75
+ }
9
76
  },
10
- plugins: [],
77
+ plugins: [
78
+ require("tailwindcss-animate")
79
+ ],
11
80
  }