@trishchuk/coolors-mcp 1.0.0 → 1.0.1

package/docs/.vitepress/theme/custom-app.css

@@ -12,13 +12,13 @@
   --app-success: #10b981;
   --app-warning: #f59e0b;
   --app-error: #ef4444;
-  
+
   /* Override VitePress brand colors */
   --vp-c-brand-1: var(--app-primary);
   --vp-c-brand-2: var(--app-primary-dark);
   --vp-c-brand-3: var(--app-secondary);
   --vp-c-brand-soft: rgba(14, 165, 233, 0.14);
-  
+
   /* Home hero gradient */
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: linear-gradient(
@@ -26,7 +26,7 @@
     var(--app-primary) 30%,
     var(--app-secondary)
   );
-  
+
   /* Button styles */
   --vp-button-brand-border: transparent;
   --vp-button-brand-bg: var(--app-primary);
@@ -57,7 +57,9 @@
 
 /* Feature cards with hover effects */
 .VPFeature {
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .VPFeature:hover {
@@ -70,13 +72,13 @@
 }
 
 /* Code blocks styling */
-div[class*='language-'] {
+div[class*="language-"] {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
 }
 
-div[class*='language-']::before {
+div[class*="language-"]::before {
   content: attr(data-lang);
   position: absolute;
   top: 8px;
@@ -158,11 +160,15 @@ div[class*='language-']::before {
 .client-card--recommended {
   border-color: var(--app-primary);
   position: relative;
-  background: linear-gradient(135deg, var(--vp-c-bg) 0%, var(--vp-c-brand-soft) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--vp-c-bg) 0%,
+    var(--vp-c-brand-soft) 100%
+  );
 }
 
 .client-card--recommended::before {
-  content: 'RECOMMENDED';
+  content: "RECOMMENDED";
   position: absolute;
   top: -12px;
   left: 50%;
@@ -260,7 +266,7 @@ div[class*='language-']::before {
   .client-card {
     margin: 1rem 0;
   }
-  
+
   .tool-card {
     padding: 1rem;
   }
@@ -268,7 +274,8 @@ div[class*='language-']::before {
 
 /* Animation for loading states */
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -300,14 +307,14 @@ div[class*='language-']::before {
 }
 
 /* Code snippet copy button enhancement */
-div[class*='language-'] .copy {
+div[class*="language-"] .copy {
   background-color: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
   transition: all 0.2s ease;
 }
 
-div[class*='language-'] .copy:hover {
+div[class*="language-"] .copy:hover {
   background-color: var(--app-primary);
   border-color: var(--app-primary);
 }

package/docs/.vitepress/theme/custom.css

@@ -2,8 +2,11 @@
 
 /* Base colors and fonts */
 :root {
-  --vp-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --vp-font-family-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --vp-font-family-base:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --vp-font-family-mono:
+    "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /* Dark theme refinements */
@@ -142,7 +145,6 @@ html.dark {
   color: var(--vp-c-text-2);
 }
 
-
 /* Tables - wiki style */
 .vp-doc table {
   margin: 20px 0;
@@ -226,7 +228,6 @@ html.dark .VPNavBarTitle .logo {
   border-left: 4px solid var(--vp-c-brand);
 }
 
-
 /* Modern hero section */
 .VPHero {
   padding: 80px 24px;
@@ -280,7 +281,7 @@ html.dark .VPNavBarTitle .logo {
 
 /* Floating star on hover */
 .VPButton.alt::before {
-  content: '⭐';
+  content: "⭐";
   position: absolute;
   font-size: 18px;
   top: 50%;
@@ -294,7 +295,7 @@ html.dark .VPNavBarTitle .logo {
 
 /* Multiple burst particles */
 .VPButton.alt::after {
-  content: '✨ ⭐ ✨ ⭐ ✨';
+  content: "✨ ⭐ ✨ ⭐ ✨";
   position: absolute;
   font-size: 12px;
   top: 50%;
@@ -355,11 +356,13 @@ html.dark .VPNavBarTitle .logo {
   }
   50% {
     opacity: 1;
-    transform: translate(-50%, -50%) translateY(-100px) scale(1.5) rotate(180deg);
+    transform: translate(-50%, -50%) translateY(-100px) scale(1.5)
+      rotate(180deg);
   }
   100% {
     opacity: 0;
-    transform: translate(-50%, -50%) translateY(-100px) scale(2.5) rotate(360deg);
+    transform: translate(-50%, -50%) translateY(-100px) scale(2.5)
+      rotate(360deg);
   }
 }
 
@@ -421,7 +424,7 @@ html.dark .VPFeature {
 /* Light mode hover */
 .VPFeature:hover {
   border-color: var(--vp-c-brand-light);
-  box-shadow: 
+  box-shadow:
     0 12px 32px rgba(0, 0, 0, 0.1),
     0 2px 4px rgba(0, 0, 0, 0.05);
 }
@@ -430,7 +433,7 @@ html.dark .VPFeature {
 html.dark .VPFeature:hover {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(66, 184, 131, 0.5);
-  box-shadow: 
+  box-shadow:
     0 12px 32px rgba(0, 0, 0, 0.4),
     0 0 0 1px rgba(66, 184, 131, 0.3),
     inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
@@ -438,7 +441,7 @@ html.dark .VPFeature:hover {
 
 /* Gradient overlay for depth */
 .VPFeature::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -511,10 +514,11 @@ html.dark .VPFeature:hover {
 
 /* Pulse effect when actively exploring */
 @keyframes explorePulse {
-  0%, 100% { 
+  0%,
+  100% {
     transform: translateY(-3px) scale(1);
   }
-  50% { 
+  50% {
     transform: translateY(-6px) scale(1.05);
   }
 }
@@ -525,8 +529,13 @@ html.dark .VPFeature:hover {
 
 /* Animated dots while exploring */
 @keyframes dotDance {
-  0%, 100% { transform: translateY(0) scale(1); }
-  50% { transform: translateY(-4px) scale(1.5); }
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-4px) scale(1.5);
+  }
 }
 
 .VPHome:has(.VPFeature:hover) .explore-hint .dot:nth-child(1) {
@@ -560,7 +569,7 @@ html.dark .VPFeature:hover {
 
 /* Add diff symbols as pseudo-elements (hidden by default) */
 .diff-line::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 4px;
   font-family: var(--vp-font-family-mono);
@@ -571,7 +580,7 @@ html.dark .VPFeature:hover {
 
 /* Line numbers - typed out on hover */
 .diff-line::after {
-  content: '';
+  content: "";
   position: absolute;
   right: 100%;
   margin-right: 12px;
@@ -586,19 +595,19 @@ html.dark .VPFeature:hover {
 }
 
 .diff-delete::after {
-  content: '6739';
+  content: "6739";
 }
 
 .diff-add::after {
-  content: '6740';
+  content: "6740";
 }
 
 .diff-delete::before {
-  content: '-';
+  content: "-";
 }
 
 .diff-add::before {
-  content: '+';
+  content: "+";
 }
 
 /* Hover state - transform to diff view */
@@ -614,7 +623,9 @@ html.dark .VPFeature:hover {
 .VPFeature:first-child:hover .diff-line::after {
   opacity: 0.6;
   max-width: 50px;
-  transition: opacity 0.3s ease 0.3s, max-width 0.4s ease 0.3s;
+  transition:
+    opacity 0.3s ease 0.3s,
+    max-width 0.4s ease 0.3s;
 }
 
 /* Ensure space for line numbers only on File Analysis card */
@@ -694,6 +705,3 @@ html.dark .VPFeature:first-child:hover .diff-add::before {
 .VPSidebar::-webkit-scrollbar {
   display: none; /* Chrome/Safari/Webkit */
 }
-
-
-

package/docs/.vitepress/theme/index.js

@@ -1,25 +1,28 @@
-import DefaultTheme from 'vitepress/theme'
-import Layout from './Layout.vue'
-import FundingLayout from './FundingLayout.vue'
-import DiagramModal from '../components/DiagramModal.vue'
-import CodeBlock from '../components/CodeBlock.vue'
-import ClientGrid from '../components/ClientGrid.vue'
-import './custom.css'
-import './custom-app.css'
+import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
+import FundingLayout from "./FundingLayout.vue";
+import DiagramModal from "../components/DiagramModal.vue";
+import CodeBlock from "../components/CodeBlock.vue";
+import ClientGrid from "../components/ClientGrid.vue";
+import "./custom.css";
+import "./custom-app.css";
 
 export default {
   extends: DefaultTheme,
   Layout: Layout,
   enhanceApp({ app, router }) {
-    app.component('DiagramModal', DiagramModal)
-    app.component('CodeBlock', CodeBlock)
-    app.component('ClientGrid', ClientGrid)
-    app.component('FundingLayout', FundingLayout)
+    app.component("DiagramModal", DiagramModal);
+    app.component("CodeBlock", CodeBlock);
+    app.component("ClientGrid", ClientGrid);
+    app.component("FundingLayout", FundingLayout);
   },
   setup() {
     // Force dark mode on initial load
-    if (typeof window !== 'undefined' && !localStorage.getItem('vitepress-theme-appearance')) {
-      localStorage.setItem('vitepress-theme-appearance', 'dark')
+    if (
+      typeof window !== "undefined" &&
+      !localStorage.getItem("vitepress-theme-appearance")
+    ) {
+      localStorage.setItem("vitepress-theme-appearance", "dark");
     }
-  }
-}
+  },
+};

package/docs/concepts/accessibility.md

@@ -8,12 +8,13 @@ Coolors MCP ensures color choices meet accessibility standards through comprehen
 
 The Web Content Accessibility Guidelines (WCAG) define contrast requirements for readable content:
 
-| Level | Normal Text | Large Text | Non-Text |
-|-------|------------|------------|----------|
-| **AA** | 4.5:1 | 3:1 | 3:1 |
-| **AAA** | 7:1 | 4.5:1 | N/A |
+| Level   | Normal Text | Large Text | Non-Text |
+| ------- | ----------- | ---------- | -------- |
+| **AA**  | 4.5:1       | 3:1        | 3:1      |
+| **AAA** | 7:1         | 4.5:1      | N/A      |
 
 **Large text** is defined as:
+
 - 18pt (24px) or larger
 - 14pt (18.5px) or larger if bold
 
@@ -24,11 +25,9 @@ Contrast ratio is based on relative luminance:
 ```javascript
 // Relative luminance calculation
 function getLuminance(rgb) {
-  const [r, g, b] = rgb.map(val => {
+  const [r, g, b] = rgb.map((val) => {
     val = val / 255;
-    return val <= 0.03928
-      ? val / 12.92
-      : Math.pow((val + 0.055) / 1.055, 2.4);
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
   });
 
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
@@ -59,19 +58,19 @@ function getContrastRatio(color1, color2) {
 
 HCT's tone component directly correlates with contrast:
 
-| Tone Difference | Approximate Contrast | Use Case |
-|-----------------|---------------------|----------|
-| 40 | ~3:1 | Large text, UI elements |
-| 50 | ~4.5:1 | Normal text (AA) |
-| 70 | ~7:1 | Enhanced (AAA) |
-| 90 | ~15:1 | Maximum readability |
+| Tone Difference | Approximate Contrast | Use Case                |
+| --------------- | -------------------- | ----------------------- |
+| 40              | ~3:1                 | Large text, UI elements |
+| 50              | ~4.5:1               | Normal text (AA)        |
+| 70              | ~7:1                 | Enhanced (AAA)          |
+| 90              | ~15:1                | Maximum readability     |
 
 ### Predictable Relationships
 
 ```javascript
 // Guaranteed accessible pairs in HCT
-const background = { h: 200, c: 20, t: 95 };  // Light surface
-const text = { h: 200, c: 20, t: 20 };       // Dark text
+const background = { h: 200, c: 20, t: 95 }; // Light surface
+const text = { h: 200, c: 20, t: 20 }; // Dark text
 // Tone difference: 75 = guaranteed 7:1+ contrast
 ```
 
@@ -117,7 +116,9 @@ const text = { h: 200, c: 20, t: 20 };       // Dark text
 ## Material Design Contrast Levels
 
 ### Default Contrast (0.0)
+
 Meets AA accessibility:
+
 - **Guaranteed minimums**:
   - 4.5:1 for all text and icons
   - 3:1 for required non-text elements
@@ -125,7 +126,9 @@ Meets AA accessibility:
   - 7:1 for high emphasis text
 
 ### Medium Contrast (+0.5)
+
 Exceeds AA requirements:
+
 - **Guaranteed minimums**:
   - 4.5:1 for all text
   - 3:1 for all non-text elements
@@ -134,7 +137,9 @@ Exceeds AA requirements:
   - 11:1 for high emphasis
 
 ### High Contrast (+1.0)
+
 Meets AAA accessibility:
+
 - **Guaranteed minimums**:
   - 7:1 for all text and icons
   - 4.5:1 for all non-text elements
@@ -196,9 +201,9 @@ function getAccessibleTextColor(background) {
 
   // Use white or black based on background
   if (bgLuminance > 0.5) {
-    return '#000000'; // Dark text on light background
+    return "#000000"; // Dark text on light background
   } else {
-    return '#ffffff'; // Light text on dark background
+    return "#ffffff"; // Light text on dark background
   }
 }
 ```
@@ -209,12 +214,12 @@ function getAccessibleTextColor(background) {
 
 Material Design ensures these pairs always meet contrast requirements:
 
-| Background | Foreground | Min Contrast | Use Case |
-|------------|------------|--------------|----------|
-| surface | onSurface | 4.5:1 | Main content |
-| primary | onPrimary | 4.5:1 | Primary actions |
-| primaryContainer | onPrimaryContainer | 4.5:1 | Containers |
-| error | onError | 4.5:1 | Error states |
+| Background       | Foreground         | Min Contrast | Use Case        |
+| ---------------- | ------------------ | ------------ | --------------- |
+| surface          | onSurface          | 4.5:1        | Main content    |
+| primary          | onPrimary          | 4.5:1        | Primary actions |
+| primaryContainer | onPrimaryContainer | 4.5:1        | Containers      |
+| error            | onError            | 4.5:1        | Error states    |
 
 ### Role-Based Adjustments
 
@@ -225,17 +230,17 @@ function assignColorRoles(sourceColor, contrastLevel = 0) {
 
   // Adjust tone mappings based on contrast level
   const toneMap = {
-    primary: 40 - (contrastLevel * 10),
+    primary: 40 - contrastLevel * 10,
     onPrimary: 100,
-    primaryContainer: 90 + (contrastLevel * 5),
-    onPrimaryContainer: 10 - (contrastLevel * 5)
+    primaryContainer: 90 + contrastLevel * 5,
+    onPrimaryContainer: 10 - contrastLevel * 5,
   };
 
   // Ensure minimum contrast
   return Object.entries(toneMap).map(([role, tone]) => ({
     role,
     color: palette[tone],
-    meetsContrast: true
+    meetsContrast: true,
   }));
 }
 ```
@@ -245,6 +250,7 @@ function assignColorRoles(sourceColor, contrastLevel = 0) {
 ### Design Guidelines
 
 #### DO's
+
 - ✅ Test all color combinations for contrast
 - ✅ Provide high contrast mode options
 - ✅ Use semantic color roles consistently
@@ -252,6 +258,7 @@ function assignColorRoles(sourceColor, contrastLevel = 0) {
 - ✅ Test with real content, not just color swatches
 
 #### DON'Ts
+
 - ❌ Rely on color alone to convey information
 - ❌ Use low contrast for aesthetic reasons
 - ❌ Assume large text allows poor contrast
@@ -261,6 +268,7 @@ function assignColorRoles(sourceColor, contrastLevel = 0) {
 ### Testing Strategies
 
 #### Automated Testing
+
 ```javascript
 // Test all color combinations in theme
 function testThemeAccessibility(theme) {
@@ -276,7 +284,7 @@ function testThemeAccessibility(theme) {
       context,
       ratio,
       passes: ratio >= required,
-      recommendation: getRecommendation(ratio, context)
+      recommendation: getRecommendation(ratio, context),
     });
   });
 
@@ -285,6 +293,7 @@ function testThemeAccessibility(theme) {
 ```
 
 #### Manual Testing
+
 1. **Blur test**: Blur your vision - can you still read it?
 2. **Grayscale test**: Convert to grayscale - still distinguishable?
 3. **Sunlight test**: View in bright light conditions
@@ -297,14 +306,15 @@ function testThemeAccessibility(theme) {
 
 Approximately 8% of men and 0.5% of women have color vision deficiency:
 
-| Type | Frequency | Description | Design Impact |
-|------|-----------|-------------|---------------|
-| Protanopia | 1.3% | No red cones | Red/green confusion |
-| Deuteranopia | 1.2% | No green cones | Red/green confusion |
-| Tritanopia | 0.001% | No blue cones | Blue/yellow confusion |
-| Monochromacy | Rare | No color vision | Rely on contrast only |
+| Type         | Frequency | Description     | Design Impact         |
+| ------------ | --------- | --------------- | --------------------- |
+| Protanopia   | 1.3%      | No red cones    | Red/green confusion   |
+| Deuteranopia | 1.2%      | No green cones  | Red/green confusion   |
+| Tritanopia   | 0.001%    | No blue cones   | Blue/yellow confusion |
+| Monochromacy | Rare      | No color vision | Rely on contrast only |
 
 #### Design Strategies
+
 ```javascript
 // Ensure information isn't conveyed by color alone
 ✓ Error: "❌ Invalid input" (icon + text)
@@ -326,15 +336,15 @@ Dark themes require special attention:
 ```javascript
 // Light theme
 const lightTheme = {
-  surface: { tone: 99 },      // Very light
-  onSurface: { tone: 10 },    // Very dark
+  surface: { tone: 99 }, // Very light
+  onSurface: { tone: 10 }, // Very dark
   // Contrast: ~15:1
 };
 
 // Dark theme - NOT just inverted
 const darkTheme = {
-  surface: { tone: 10 },      // Very dark
-  onSurface: { tone: 90 },    // Light, not white
+  surface: { tone: 10 }, // Very dark
+  onSurface: { tone: 90 }, // Light, not white
   // Contrast: ~13:1 (slightly less harsh)
 };
 ```
@@ -354,9 +364,9 @@ function getEffectiveColor(foreground, background, alpha) {
 
 // Ensure minimum opacity for text
 const minOpacity = {
-  normalText: 0.87,  // ~87% opacity minimum
-  secondaryText: 0.60,  // ~60% for secondary
-  disabledText: 0.38   // ~38% for disabled
+  normalText: 0.87, // ~87% opacity minimum
+  secondaryText: 0.6, // ~60% for secondary
+  disabledText: 0.38, // ~38% for disabled
 };
 ```
 
@@ -366,7 +376,7 @@ const minOpacity = {
 
 ```jsx
 function AccessibleButton({ color, children }) {
-  const [textColor, setTextColor] = useState('#ffffff');
+  const [textColor, setTextColor] = useState("#ffffff");
 
   useEffect(() => {
     // Automatically choose accessible text color
@@ -378,7 +388,7 @@ function AccessibleButton({ color, children }) {
     <button
       style={{
         backgroundColor: color,
-        color: textColor
+        color: textColor,
       }}
       aria-label={children}
     >
@@ -434,14 +444,14 @@ class AccessibilityValidator {
           background,
           ratio,
           required: this.minRatio,
-          suggestion: this.suggestFix(color, background)
+          suggestion: this.suggestFix(color, background),
         });
       }
     });
 
     return {
       valid: issues.length === 0,
-      issues
+      issues,
     };
   }
 
@@ -454,6 +464,7 @@ class AccessibilityValidator {
 ## Resources
 
 ### Testing Tools
+
 - Chrome DevTools (Lighthouse)
 - Firefox Accessibility Inspector
 - axe DevTools
@@ -461,6 +472,7 @@ class AccessibilityValidator {
 - Stark (Figma/Sketch plugin)
 
 ### Guidelines
+
 - [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)
 - [Material Design Accessibility](https://m3.material.io/foundations/accessible-design)
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
@@ -470,4 +482,4 @@ class AccessibilityValidator {
 - [HCT System](./hct.md) - Tone-based contrast
 - [Material Design](./material-design.md) - Contrast levels
 - [Theme Matching](./theme-matching.md) - Accessibility scoring
-- [Color Spaces](./color-spaces.md) - Understanding luminance
+- [Color Spaces](./color-spaces.md) - Understanding luminance