Run prettier

Author: osolmaz

typescript/src/renderer/styles/README.md

@@ -5,6 +5,7 @@ This directory contains the modular CSS architecture for the JSON-DOC renderer.
 ## Architecture
 
 ### File Structure
+
 ```
 styles/
 ├── index.css          # Main entry point - imports all modules
@@ -23,64 +24,74 @@ styles/
 ## Usage
 
 ### Default Import
+
 The renderer automatically imports the default styles:
+
 ```typescript
-import { JsonDocRenderer } from '@json-doc/typescript';
+import { JsonDocRenderer } from "@json-doc/typescript";
 // Styles are automatically included
 ```
 
 ### Custom Styling
+
 To customize styles, you can:
 
 1. **Override CSS Variables** (recommended):
+
 ```css
 :root {
   --jsondoc-text-primary: #2d3748;
-  --jsondoc-font-family-sans: 'Inter', sans-serif;
+  --jsondoc-font-family-sans: "Inter", sans-serif;
   --jsondoc-spacing-lg: 20px;
 }
 ```
 
 2. **Import Individual Modules**:
+
 ```css
-@import '@json-doc/typescript/dist/renderer/styles/variables.css';
-@import '@json-doc/typescript/dist/renderer/styles/base.css';
+@import "@json-doc/typescript/dist/renderer/styles/variables.css";
+@import "@json-doc/typescript/dist/renderer/styles/base.css";
 /* Import only what you need */
 ```
 
 3. **Create Your Own Theme**:
+
 ```css
 /* my-theme.css */
-@import '@json-doc/typescript/dist/renderer/styles/variables.css';
+@import "@json-doc/typescript/dist/renderer/styles/variables.css";
 
 :root {
   /* Override variables */
   --jsondoc-text-primary: #1a202c;
   --jsondoc-bg-code: #f7fafc;
 }
 
-@import '@json-doc/typescript/dist/renderer/styles/base.css';
+@import "@json-doc/typescript/dist/renderer/styles/base.css";
 /* Import other modules as needed */
 ```
 
 ## CSS Variables (Design Tokens)
 
 ### Colors
+
 - `--jsondoc-text-primary`: Primary text color
-- `--jsondoc-text-secondary`: Secondary text color  
+- `--jsondoc-text-secondary`: Secondary text color
 - `--jsondoc-text-muted`: Muted text color
 - `--jsondoc-border-light`: Light border color
 - `--jsondoc-border-medium`: Medium border color
 
 ### Background Colors
+
 - `--jsondoc-bg-code`: Code block background
 - `--jsondoc-bg-inline-code`: Inline code background
 - `--jsondoc-bg-unsupported`: Unsupported block background
 
 ### Text Colors
+
 - `--jsondoc-color-gray` through `--jsondoc-color-red`: Notion-style text colors
 
 ### Typography
+
 - `--jsondoc-font-family-sans`: Sans-serif font stack
 - `--jsondoc-font-family-mono`: Monospace font stack
 - `--jsondoc-font-family-serif`: Serif font stack
@@ -89,9 +100,11 @@ To customize styles, you can:
 - `--jsondoc-line-height-*`: Line heights
 
 ### Spacing
+
 - `--jsondoc-spacing-xs` through `--jsondoc-spacing-3xl`: Consistent spacing scale
 
 ### Layout
+
 - `--jsondoc-page-max-width`: Maximum page width
 - `--jsondoc-page-padding-desktop`: Desktop page padding
 - `--jsondoc-page-padding-mobile`: Mobile page padding
@@ -100,7 +113,9 @@ To customize styles, you can:
 ## Theming
 
 ### Light/Dark Mode
+
 The styles include automatic dark mode support:
+
 ```css
 @media (prefers-color-scheme: dark) {
   :root {
@@ -111,7 +126,9 @@ The styles include automatic dark mode support:
 ```
 
 ### Manual Theme Classes
+
 Force specific themes using classes:
+
 ```html
 <div class="jsondoc-theme-light">
   <!-- Always light theme -->
@@ -123,7 +140,9 @@ Force specific themes using classes:
 ```
 
 ### Custom Color Schemes
+
 Create your own color schemes:
+
 ```css
 .my-custom-theme {
   --jsondoc-text-primary: #2b6cb0;
@@ -135,11 +154,13 @@ Create your own color schemes:
 ## Responsive Design
 
 The styles include responsive breakpoints:
+
 - Desktop: Default styles
 - Tablet: `max-width: 768px`
 - Mobile: `max-width: 480px`
 
 Override responsive behavior:
+
 ```css
 @media (max-width: 768px) {
   :root {
@@ -151,6 +172,7 @@ Override responsive behavior:
 ## Block-Specific Styling
 
 Each block type has its own CSS class namespace:
+
 - `.notion-text-block`: Paragraph blocks
 - `.notion-header-block`: Heading 1 blocks
 - `.notion-sub_header-block`: Heading 2/3 blocks
@@ -164,35 +186,38 @@ Each block type has its own CSS class namespace:
 ## Advanced Customization
 
 ### Overriding Specific Components
+
 ```css
 /* Custom code block styling */
 .notion-code-block {
   background: var(--my-code-bg);
   border: 1px solid var(--my-code-border);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 ```
 
 ### Adding Custom Animations
+
 ```css
 .notion-selectable {
   transition: all 0.2s ease;
 }
 
 .notion-selectable:hover {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 ```
 
 ### Print Styles
+
 ```css
 @media print {
   .json-doc-page {
     padding: 0;
     max-width: none;
   }
-  
+
   .notion-toggle-block {
     /* Expand all toggles for print */
   }
@@ -202,11 +227,13 @@ Each block type has its own CSS class namespace:
 ## Browser Compatibility
 
 The styles use modern CSS features:
+
 - CSS Custom Properties (CSS Variables)
 - CSS Grid and Flexbox
 - CSS Logical Properties
 
 Supports:
+
 - Chrome/Edge 49+
 - Firefox 31+
 - Safari 9.1+
@@ -223,9 +250,10 @@ For older browser support, consider using a CSS preprocessor to compile variable
 ## Contributing
 
 When adding new styles:
+
 1. Add design tokens to `variables.css` first
 2. Use existing variables instead of hardcoded values
 3. Follow the modular structure
 4. Test responsive behavior
 5. Ensure dark mode compatibility
-6. Update this README with new variables or classes
+6. Update this README with new variables or classes

typescript/src/renderer/styles/layout.css

@@ -14,4 +14,4 @@
 .notion-column {
   flex: 1;
   min-width: 0;
-}
+}

typescript/src/renderer/styles/media.css

@@ -41,4 +41,4 @@
   color: var(--jsondoc-text-primary);
   font-size: var(--jsondoc-font-size-caption);
   margin-top: var(--jsondoc-spacing-md);
-}
+}

typescript/src/renderer/styles/responsive.css

@@ -2,7 +2,8 @@
 
 @media (max-width: 768px) {
   .json-doc-page {
-    padding: var(--jsondoc-spacing-2xl) var(--jsondoc-spacing-xl) var(--jsondoc-page-bottom-padding);
+    padding: var(--jsondoc-spacing-2xl) var(--jsondoc-spacing-xl)
+      var(--jsondoc-page-bottom-padding);
   }
 
   .json-doc-page-title {
@@ -17,7 +18,8 @@
 
 @media (max-width: 480px) {
   .json-doc-page {
-    padding: var(--jsondoc-spacing-xl) var(--jsondoc-spacing-lg) var(--jsondoc-page-bottom-padding);
+    padding: var(--jsondoc-spacing-xl) var(--jsondoc-spacing-lg)
+      var(--jsondoc-page-bottom-padding);
   }
 
   .json-doc-page-title {
@@ -27,4 +29,4 @@
   .json-doc-page-icon {
     font-size: 60px;
   }
-}
+}

typescript/src/renderer/styles/table.css

@@ -18,4 +18,4 @@
   padding: 6px var(--jsondoc-spacing-md);
   vertical-align: top;
   word-wrap: break-word;
-}
+}