@knitli/docs-components 1.1.2 → 1.1.4

package/src/assets/logos/README.md

@@ -1,180 +0,0 @@
-# Knitli Logo Usage Guidelines
-
-This directory contains the official Knitli logo assets for use in documentation components.
-
-## Logo Variants
-
-### Standard Logo (`knitli-logo.svg`)
-- **Colors**: Aubergine text (#1e061b) with rust knot accent (#ea5932)
-- **Use cases**:
-  - General documentation headers
-  - Light backgrounds
-  - Standard brand representation
-  - Navigation elements
-
-### Copper Logo (`knitli-logo-copper.svg`)
-- **Colors**: Full copper (#b56c30) for both text and knot
-- **Use cases**:
-  - CodeWeaver/technical documentation theme
-  - Integration with docs aesthetic
-  - Technical content headers
-  - Engineering-focused materials
-
-## Size Recommendations
-
-### Minimum Dimensions
-- **Minimum height**: 24px (for legibility)
-- **Minimum width**: 81px (maintains aspect ratio)
-- **Recommended base**: 32px height for standard UI elements
-
-### Common Sizes
-```css
-/* Small (navigation, inline) */
-height: 24px;
-width: auto;
-
-/* Medium (section headers) */
-height: 32px;
-width: auto;
-
-/* Large (page headers) */
-height: 48px;
-width: auto;
-
-/* Hero/landing */
-height: 64px;
-width: auto;
-```
-
-## Accessibility
-
-### Alt Text
-Always include descriptive alt text for screen readers:
-
-```html
-<!-- Standard implementation -->
-<img src="knitli-logo.svg" alt="Knitli" />
-
-<!-- With link (navigation) -->
-<a href="https://knitli.com">
-  <img src="knitli-logo.svg" alt="Knitli home" />
-</a>
-
-<!-- Decorative only (rare) -->
-<img src="knitli-logo.svg" alt="" role="presentation" />
-```
-
-### Link Navigation
-When using the logo as a navigation element, always link to the main site:
-
-```html
-<a href="https://knitli.com" aria-label="Return to Knitli homepage">
-  <img src="knitli-logo.svg" alt="Knitli" />
-</a>
-```
-
-## Usage Examples
-
-### Astro Component
-```astro
----
-import knitliLogo from '../assets/logos/knitli-logo.svg';
-import knitliLogoCopper from '../assets/logos/knitli-logo-copper.svg';
----
-
-<!-- Standard header -->
-<header>
-  <a href="https://knitli.com">
-    <img src={knitliLogo.src} alt="Knitli" height="32" />
-  </a>
-</header>
-
-<!-- Docs theme header -->
-<header class="docs-header">
-  <a href="https://knitli.com">
-    <img src={knitliLogoCopper.src} alt="Knitli" height="32" />
-  </a>
-</header>
-```
-
-### HTML/CSS
-```html
-<!-- Responsive with CSS sizing -->
-<a href="https://knitli.com" class="logo-link">
-  <img src="./logos/knitli-logo.svg" alt="Knitli" class="logo" />
-</a>
-
-<style>
-  .logo {
-    height: 2rem; /* 32px */
-    width: auto;
-    display: block;
-  }
-
-  .logo-link {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-  }
-
-  .logo-link:hover .logo,
-  .logo-link:focus .logo {
-    opacity: 0.85;
-    transition: opacity 0.2s ease;
-  }
-</style>
-```
-
-### React/TypeScript
-```tsx
-import knitliLogo from '../assets/logos/knitli-logo.svg';
-
-export function Logo() {
-  return (
-    <a href="https://knitli.com" aria-label="Return to Knitli homepage">
-      <img
-        src={knitliLogo}
-        alt="Knitli"
-        style={{ height: '32px', width: 'auto' }}
-      />
-    </a>
-  );
-}
-```
-
-## Technical Details
-
-### File Format
-- **Format**: SVG (Scalable Vector Graphics)
-- **Optimization**: Cleaned of unnecessary metadata and comments
-- **Viewbox**: `0 0 425.64246 125`
-- **Native aspect ratio**: ~3.4:1 (width:height)
-
-### Color Values
-```css
-/* Standard Logo */
---logo-text: #1e061b;    /* Aubergine */
---logo-knot: #ea5932;    /* Rust */
-
-/* Copper Logo */
---logo-copper: #b56c30;  /* Copper */
-```
-
-### Inline Styling
-Both logos use CSS classes (`.text`, `.knot`) for color application, allowing for potential theme customization if needed.
-
-## Best Practices
-
-1. **Always use vector format** - Never convert to raster unless absolutely necessary
-2. **Maintain aspect ratio** - Set either width OR height, let the other auto-scale
-3. **Respect minimum size** - Never display smaller than 24px height
-4. **Use semantic HTML** - Wrap in `<a>` tag when used for navigation
-5. **Provide context** - Use appropriate alt text for the use case
-6. **Consider contrast** - Ensure sufficient contrast with background colors
-7. **Test accessibility** - Verify screen reader announcements
-
-## Copyright
-
-© 2025 Knitli Inc. All Rights Reserved.
-
-Original design by Adam/Signcraft (DesignCrowd), owned by Knitli Inc.