continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,32 @@
+# Component Styles Rules
+
+When working with component-specific CSS in styles/components:
+
+## Architecture
+Each component that requires custom CSS has a corresponding file:
+- `button.css` - Fire-inspired button shadows and effects
+- `modal.css` - Modal animations and backdrop effects
+- `spinner.css` - Custom loading animations
+
+## Import Strategy
+All component CSS files are imported in `styles/main.css`:
+```css
+/* Component styles */
+@import "./components/button.css";
+@import "./components/modal.css";
+@import "./components/spinner.css";
+```
+
+## Guidelines
+1. **Only create CSS files for components that need them** - If Tailwind utilities suffice, don't create a CSS file
+2. **Use P3 colors with sRGB fallbacks** - Ensure wide gamut displays get enhanced colors
+3. **Keep animations performant** - Use transform and opacity for animations
+4. **Component classes should be prefixed** - e.g., `.button-primary`, `.modal-backdrop`
+
+## P3 Color Example
+```css
+.button-primary {
+  background: #fa5d19; /* sRGB fallback */
+  background: color(display-p3 0.9816 0.3634 0.0984); /* P3 color */
+}
+```
@@ -0,0 +1,72 @@
+.button {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:active {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.05s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button-primary {
+  background: #ff4c00;
+  background: color(display-p3 0.9816 0.3634 0.0984);
+
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:hover {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 4px 8px 0px rgba(255, 77, 0, 0.16),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 4px 8px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:active {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-background {
+  background: linear-gradient(to bottom, white, transparent);
+
+  opacity: 0.06;
+
+  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:hover .button-background {
+  opacity: 0.08;
+}
+
+.button:active .button-background {
+  opacity: 0;
+
+  transition: opacity 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
@@ -0,0 +1,45 @@
+.string,
+.language-html .tag:not(.punctuation, .attr-name, .attr-value, .special-attr) {
+  color: var(--heat-100) !important;
+}
+
+.punctuation,
+.operator {
+  color: #c2c2c2 !important;
+}
+
+.language-html .attr-name {
+  color: var(--black-alpha-64);
+}
+
+.comment {
+  color: #999999 !important;
+}
+
+code:not(.language-html) .property:not(.literal-property),
+.class-name,
+code:not(.language-html) .function,
+.language-json .boolean {
+  color: #9061ff;
+  color: color(display-p3 0.566 0.38 1);
+}
+
+.language-json .property {
+  color: inherit !important;
+}
+
+.prismjs {
+  padding-top: 20px;
+  @apply text-mono-medium font-mono;
+}
+
+.prismjs code {
+  color: var(--accent-black) !important;
+}
+
+.linenumber {
+  width: 48px;
+  padding: 0;
+  font-style: normal;
+  @apply !text-black-alpha-12 !pl-20 !pr-0 !text-left;
+}
@@ -0,0 +1,10 @@
+/* Component-specific styles from firecrawl-marketing */
+
+/* UI Components (for Dashboard v2) */
+@import "./button.css";
+@import "./code.css";
+
+/* Additional component CSS will be added as we migrate more components */
+/* @import "./modal.css"; */
+/* @import "./spinner.css"; */
+/* @import "./input.css"; */