SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/src/styles.css

84 lines
2.8 KiB
CSS
Raw Normal View History

Initialize OpenPencil project with essential files and configurations - Added .cta.json for project settings including TypeScript, Tailwind, and Bun as package manager. - Created .gitignore to exclude common build and environment files. - Introduced bun.lock for dependency management. - Added CLAUDE.md for guidance on using Claude Code with the project. - Set up package.json with scripts for development, build, and testing. - Created README.md outlining project features, tech stack, and getting started instructions. - Configured TypeScript with tsconfig.json for strict type checking. - Established Vite configuration in vite.config.ts for project bundling. - Added VSCode settings to exclude generated files from linting. - Included public assets such as favicon and logos. - Implemented initial routing structure in src/router.tsx and generated route tree in src/routeTree.gen.ts. - Developed canvas functionality with multiple files for object management and event handling in src/canvas. - Styled the application using Tailwind CSS in src/styles.css.
2026-02-17 13:14:16 +00:00
@import "tailwindcss";
feat(editor): scaffold core canvas engine and editor layout Set up the Fabric.js v7 canvas integration with bidirectional sync to a Zustand document store. Includes drawing tools (select, rectangle, ellipse, line, text, frame, hand), viewport pan/zoom, smart guides, dimension labels, and the main editor layout with toolbar and status bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 13:49:16 +00:00
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--radius: 0.5rem;
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.178 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.178 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.623 0.214 259);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.321 0 0);
--input: oklch(0.321 0 0);
--ring: oklch(0.623 0.214 259);
--sidebar: oklch(0.178 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.321 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
}
Initialize OpenPencil project with essential files and configurations - Added .cta.json for project settings including TypeScript, Tailwind, and Bun as package manager. - Created .gitignore to exclude common build and environment files. - Introduced bun.lock for dependency management. - Added CLAUDE.md for guidance on using Claude Code with the project. - Set up package.json with scripts for development, build, and testing. - Created README.md outlining project features, tech stack, and getting started instructions. - Configured TypeScript with tsconfig.json for strict type checking. - Established Vite configuration in vite.config.ts for project bundling. - Added VSCode settings to exclude generated files from linting. - Included public assets such as favicon and logos. - Implemented initial routing structure in src/router.tsx and generated route tree in src/routeTree.gen.ts. - Developed canvas functionality with multiple files for object management and event handling in src/canvas. - Styled the application using Tailwind CSS in src/styles.css.
2026-02-17 13:14:16 +00:00
body {
feat(editor): scaffold core canvas engine and editor layout Set up the Fabric.js v7 canvas integration with bidirectional sync to a Zustand document store. Includes drawing tools (select, rectangle, ellipse, line, text, frame, hand), viewport pan/zoom, smart guides, dimension labels, and the main editor layout with toolbar and status bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 13:49:16 +00:00
@apply m-0 bg-background text-foreground antialiased;
Initialize OpenPencil project with essential files and configurations - Added .cta.json for project settings including TypeScript, Tailwind, and Bun as package manager. - Created .gitignore to exclude common build and environment files. - Introduced bun.lock for dependency management. - Added CLAUDE.md for guidance on using Claude Code with the project. - Set up package.json with scripts for development, build, and testing. - Created README.md outlining project features, tech stack, and getting started instructions. - Configured TypeScript with tsconfig.json for strict type checking. - Established Vite configuration in vite.config.ts for project bundling. - Added VSCode settings to exclude generated files from linting. - Included public assets such as favicon and logos. - Implemented initial routing structure in src/router.tsx and generated route tree in src/routeTree.gen.ts. - Developed canvas functionality with multiple files for object management and event handling in src/canvas. - Styled the application using Tailwind CSS in src/styles.css.
2026-02-17 13:14:16 +00:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
feat(editor): scaffold core canvas engine and editor layout Set up the Fabric.js v7 canvas integration with bidirectional sync to a Zustand document store. Includes drawing tools (select, rectangle, ellipse, line, text, frame, hand), viewport pan/zoom, smart guides, dimension labels, and the main editor layout with toolbar and status bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 13:49:16 +00:00
/* Syntax highlighting for code panel */
.syn-keyword { color: #c792ea; }
.syn-string { color: #c3e88d; }
.syn-tag { color: #f07178; }
.syn-attr { color: #ffcb6b; }
.syn-comment { color: #546e7a; font-style: italic; }
.syn-number { color: #f78c6c; }
.syn-bracket { color: #89ddff; }
Reference in a new issue Copy permalink