@luquimbo/bi-superpowers 1.0.0

package/library/themes/power-bi/README.md

@@ -0,0 +1,271 @@
+# Power BI Themes
+
+Collection of professionally designed `.json` theme files for Power BI reports.
+
+## Available Themes
+
+| Theme | Description | Best For |
+|-------|-------------|----------|
+| [bi-superpowers-default.json](./bi-superpowers-default.json) | **Recommended** - Shadcn/UI + IBCS standards | Professional BI reports |
+| [corporate-blue.json](./corporate-blue.json) | Microsoft-style blue palette | Corporate dashboards |
+| [dark-mode.json](./dark-mode.json) | Dark background with vibrant accents | Extended viewing, demos |
+| [accessible.json](./accessible.json) | WCAG AA compliant, colorblind-friendly | Public-facing, accessibility-required |
+| [minimal.json](./minimal.json) | Ultra-clean, no borders, maximum white space | Executive presentations |
+| [print-friendly.json](./print-friendly.json) | High contrast, solid borders, grayscale-compatible | PDF export, printing |
+
+## Theme Comparison
+
+| Feature | Default | Corporate Blue | Dark Mode | Accessible | Minimal | Print |
+|---------|---------|----------------|-----------|------------|---------|-------|
+| Background | Light gray | Off-white | Dark gray | White | White | White |
+| Data colors | IBCS grayscale | Blues + accents | Vibrant | Colorblind-safe | Muted | High contrast |
+| Borders | Subtle (10px radius) | Subtle (8px) | Subtle (8px) | Strong (4px) | None | Solid (1px) |
+| Best contrast | Good | Good | Excellent | Excellent | Good | Excellent |
+| Print-friendly | Yes | Yes | No | Yes | Yes | Excellent |
+| Colorblind-safe | Yes | Partial | Partial | Yes | Partial | Yes |
+
+---
+
+## BI Agent Superpowers Default Theme
+
+Our recommended theme combines modern design with data visualization best practices.
+
+### Design System: Shadcn/UI
+
+- Clean, minimalist interface
+- System fonts (Segoe UI, SF Pro)
+- Subtle borders with 10px radius
+- Light backgrounds (#FAFAFA page, #FFFFFF cards)
+- Consistent spacing and typography
+
+### Data Colors: IBCS Standards
+
+Following [International Business Communication Standards](https://www.ibcs.com/):
+
+| Purpose | Color | Hex | Usage |
+|---------|-------|-----|-------|
+| Actual (Primary) | Black | `#000000` | Current period data |
+| Previous Year | Gray | `#737373` | Comparison data |
+| Secondary | Light Gray | `#A3A3A3` | Additional series |
+| Tertiary | Lighter Gray | `#D4D4D4` | Background data |
+| Positive/Good | Dark Green | `#166534` | Favorable variance |
+| Negative/Bad | Dark Red | `#991B1B` | Unfavorable variance |
+| Neutral | Gray | `#737373` | No change |
+
+---
+
+## Accessible Theme
+
+Designed for WCAG AA compliance and colorblind accessibility.
+
+### Features
+
+- **High contrast**: All text meets 4.5:1 contrast ratio
+- **Colorblind-safe palette**: Wong colorblind-friendly colors
+- **Larger fonts**: Increased base font sizes
+- **Stronger borders**: 2px borders for clear visual separation
+- **Pattern-friendly**: Colors work with patterns if needed
+
+### Color Palette
+
+Based on the Wong colorblind-friendly palette:
+
+| Color | Hex | RGB | Usage |
+|-------|-----|-----|-------|
+| Blue | `#0072B2` | 0, 114, 178 | Primary |
+| Orange | `#E69F00` | 230, 159, 0 | Secondary |
+| Green | `#009E73` | 0, 158, 115 | Positive |
+| Pink | `#CC79A7` | 204, 121, 167 | Accent |
+| Sky Blue | `#56B4E9` | 86, 180, 233 | Highlight |
+| Vermillion | `#D55E00` | 213, 94, 0 | Negative |
+
+---
+
+## Minimal Theme
+
+Ultra-clean design for executive presentations and storytelling.
+
+### Features
+
+- **No borders**: Visuals blend into the page
+- **Hidden axes**: Focus on data labels, not gridlines
+- **No legends**: Use direct labeling instead
+- **Maximum white space**: Clean, uncluttered appearance
+- **Transparent backgrounds**: Seamless visual integration
+
+### Best Practices with Minimal
+
+1. Use direct data labels instead of legends
+2. Limit visuals per page (3-4 maximum)
+3. Let the data speak - remove chart clutter
+4. Use titles sparingly - they should add context
+
+---
+
+## Print-Friendly Theme
+
+Optimized for PDF export and physical printing.
+
+### Features
+
+- **Black borders**: Clear separation when printed
+- **High contrast**: Readable at lower DPI
+- **No transparency**: Solid colors throughout
+- **Legends at bottom**: Better page flow
+- **Grayscale-compatible**: First 3 data colors are grayscale
+
+### Print Recommendations
+
+1. Export at 150 DPI minimum for quality
+2. Use landscape orientation for dashboards
+3. Test print in B&W to verify readability
+4. Check margins before final export
+
+---
+
+## How to Apply a Theme
+
+### In Power BI Desktop
+
+1. Go to **View** > **Themes** > **Browse for themes**
+2. Select the `.json` file from this folder
+3. Theme applies to all pages immediately
+
+### In Power BI Service
+
+1. Open report in **Edit** mode
+2. **View** > **Themes** > **Browse for themes**
+3. Upload the `.json` file
+
+### Switching Themes
+
+Changing themes preserves your visuals and data - only formatting changes. You can safely experiment with different themes.
+
+---
+
+## IBCS Color Philosophy
+
+IBCS recommends using **grayscale for data** and **color only for meaning**:
+
+```
+Grayscale = Data (Actual, PY, Plan, Forecast)
+Green = Positive variance / Good
+Red = Negative variance / Bad
+```
+
+This approach:
+- Reduces visual noise
+- Highlights what matters (variances)
+- Works for colorblind users
+- Prints well in B&W
+
+### IBCS Patterns Note
+
+Power BI native visuals don't support hatched patterns. For full IBCS compliance with patterns (outlined for Plan, hatched for Forecast), consider:
+- [Zebra BI](https://zebrabi.com/)
+- [Inforiver](https://inforiver.com/)
+
+---
+
+## Theme Structure
+
+```json
+{
+  "name": "Theme Name",
+  "description": "Brief description",
+  "dataColors": ["#000000", "#737373", "..."],
+  "background": "#FFFFFF",
+  "foreground": "#171717",
+  "tableAccent": "#0078D4",
+  "good": "#166534",
+  "bad": "#991B1B",
+  "neutral": "#737373",
+  "maximum": "#166534",
+  "minimum": "#991B1B",
+  "center": "#737373",
+  "textClasses": {
+    "callout": { "fontFace": "...", "fontSize": 28, "color": "..." },
+    "title": { ... },
+    "header": { ... },
+    "label": { ... }
+  },
+  "visualStyles": {
+    "*": { "*": { ... } },
+    "card": { "*": { ... } },
+    "lineChart": { "*": { ... } },
+    ...
+  }
+}
+```
+
+### Key Properties
+
+| Property | Description |
+|----------|-------------|
+| `name` | Theme name shown in Power BI |
+| `description` | Theme description |
+| `dataColors` | Array of colors for data series (8 recommended) |
+| `background` | Default visual background |
+| `foreground` | Default text color |
+| `tableAccent` | Table header and accent color |
+| `good` / `bad` / `neutral` | Sentiment colors for KPIs |
+| `maximum` / `minimum` / `center` | Conditional formatting colors |
+| `textClasses` | Typography definitions |
+| `visualStyles` | Visual-specific styling |
+
+---
+
+## Creating Custom Themes
+
+### Start from a Template
+
+1. Copy an existing theme as your starting point
+2. Modify colors to match your brand
+3. Test in Power BI Desktop
+4. Iterate until satisfied
+
+### Use Theme Tweaker
+
+The [Theme Tweaker Skill](../../skills/theme-tweaker/SKILL.md) can help you:
+- Generate a theme from brand colors
+- Modify existing themes interactively
+- Ensure accessibility compliance
+
+### Testing Checklist
+
+- [ ] Apply theme to a report with various visual types
+- [ ] Check all chart types render correctly
+- [ ] Verify text is readable (contrast)
+- [ ] Test conditional formatting (good/bad/neutral)
+- [ ] Export to PDF and verify appearance
+- [ ] Test on different screen sizes
+
+---
+
+## Contributing
+
+Add new themes following these guidelines:
+
+1. **Naming**: Use descriptive filenames (e.g., `healthcare-blue.json`)
+2. **Structure**: Include all required properties
+3. **Testing**: Verify with multiple visual types
+4. **Documentation**: Update this README with theme description
+5. **Rationale**: Explain the design philosophy
+
+### Submission Checklist
+
+- [ ] Valid JSON (no syntax errors)
+- [ ] All required properties present
+- [ ] 8 data colors defined
+- [ ] Tested in Power BI Desktop
+- [ ] README updated
+
+---
+
+## Resources
+
+- [IBCS Standards](https://www.ibcs.com/)
+- [Microsoft Theme Schema](https://github.com/microsoft/powerbi-desktop-samples/tree/main/Report%20Theme%20JSON%20Schema)
+- [Power BI Theme Templates](https://github.com/MattRudy/PowerBI-ThemeTemplates)
+- [Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Colorblind Simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/)

package/library/themes/power-bi/accessible.json

@@ -0,0 +1,307 @@
+{
+  "name": "Accessible",
+  "description": "WCAG AA compliant theme with high contrast and colorblind-friendly palette",
+  "dataColors": [
+    "#0072B2",
+    "#E69F00",
+    "#009E73",
+    "#CC79A7",
+    "#56B4E9",
+    "#D55E00",
+    "#F0E442",
+    "#000000"
+  ],
+  "background": "#FFFFFF",
+  "foreground": "#1A1A1A",
+  "tableAccent": "#0072B2",
+  "good": "#009E73",
+  "bad": "#D55E00",
+  "neutral": "#666666",
+  "maximum": "#009E73",
+  "minimum": "#D55E00",
+  "center": "#666666",
+  "textClasses": {
+    "callout": {
+      "fontFace": "'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+      "fontSize": 32,
+      "color": "#1A1A1A"
+    },
+    "title": {
+      "fontFace": "'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif",
+      "fontSize": 16,
+      "color": "#1A1A1A"
+    },
+    "header": {
+      "fontFace": "'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif",
+      "fontSize": 14,
+      "color": "#1A1A1A"
+    },
+    "label": {
+      "fontFace": "'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+      "fontSize": 12,
+      "color": "#333333"
+    }
+  },
+  "visualStyles": {
+    "*": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } }, "transparency": 0 }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "outlineColor": [{ "solid": { "color": "#333333" } }],
+        "outlineWeight": [{ "weight": 2 }],
+        "title": [{
+          "show": true,
+          "fontColor": { "solid": { "color": "#1A1A1A" } },
+          "fontSize": 16
+        }]
+      }
+    },
+    "page": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#F5F5F5" } }, "transparency": 0 }]
+      }
+    },
+    "card": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "categoryLabels": [{ "show": true, "color": { "solid": { "color": "#333333" } }, "fontSize": 14 }],
+        "wordWrap": [{ "show": true }]
+      }
+    },
+    "multiRowCard": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "cardTitle": [{ "color": { "solid": { "color": "#1A1A1A" } }, "fontSize": 14 }]
+      }
+    },
+    "clusteredColumnChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "legend": [{ "show": true, "position": "Top", "labelColor": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }],
+        "categoryAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": false,
+          "fontSize": 12
+        }],
+        "valueAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": true,
+          "gridlineColor": { "solid": { "color": "#CCCCCC" } },
+          "fontSize": 12
+        }],
+        "dataPoint": [{ "showAllDataPoints": true }]
+      }
+    },
+    "clusteredBarChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "legend": [{ "show": true, "position": "Top", "labelColor": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }],
+        "categoryAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": false,
+          "fontSize": 12
+        }],
+        "valueAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": true,
+          "gridlineColor": { "solid": { "color": "#CCCCCC" } },
+          "fontSize": 12
+        }]
+      }
+    },
+    "lineChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "legend": [{ "show": true, "position": "Top", "labelColor": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }],
+        "categoryAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": false,
+          "fontSize": 12
+        }],
+        "valueAxis": [{
+          "show": true,
+          "labelColor": { "solid": { "color": "#1A1A1A" } },
+          "gridlineShow": true,
+          "gridlineColor": { "solid": { "color": "#CCCCCC" } },
+          "fontSize": 12
+        }],
+        "dataPoint": [{ "markerSize": 8 }],
+        "lineStyles": [{ "strokeWidth": 3 }]
+      }
+    },
+    "areaChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "pieChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "legend": [{ "show": true, "position": "Right", "labelColor": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }],
+        "labels": [{ "show": true, "color": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }]
+      }
+    },
+    "donutChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "legend": [{ "show": true, "position": "Right", "labelColor": { "solid": { "color": "#1A1A1A" } }, "fontSize": 12 }]
+      }
+    },
+    "waterfallChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "sentimentColors": [{
+          "increaseFill": { "solid": { "color": "#009E73" } },
+          "decreaseFill": { "solid": { "color": "#D55E00" } },
+          "totalFill": { "solid": { "color": "#0072B2" } }
+        }]
+      }
+    },
+    "funnel": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "gauge": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "kpi": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "tableEx": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "grid": [{
+          "gridVertical": true,
+          "gridVerticalColor": { "solid": { "color": "#CCCCCC" } },
+          "gridHorizontal": true,
+          "gridHorizontalColor": { "solid": { "color": "#CCCCCC" } }
+        }],
+        "columnHeaders": [{
+          "fontColor": { "solid": { "color": "#FFFFFF" } },
+          "backColor": { "solid": { "color": "#0072B2" } },
+          "fontSize": 13
+        }],
+        "values": [{
+          "fontColor": { "solid": { "color": "#1A1A1A" } },
+          "backColor": { "solid": { "color": "#FFFFFF" } },
+          "fontSize": 12
+        }]
+      }
+    },
+    "pivotTable": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "grid": [{
+          "gridVertical": true,
+          "gridVerticalColor": { "solid": { "color": "#CCCCCC" } },
+          "gridHorizontal": true,
+          "gridHorizontalColor": { "solid": { "color": "#CCCCCC" } }
+        }],
+        "columnHeaders": [{
+          "fontColor": { "solid": { "color": "#FFFFFF" } },
+          "backColor": { "solid": { "color": "#0072B2" } },
+          "fontSize": 13
+        }],
+        "rowHeaders": [{
+          "fontColor": { "solid": { "color": "#1A1A1A" } },
+          "backColor": { "solid": { "color": "#E6E6E6" } },
+          "fontSize": 12
+        }]
+      }
+    },
+    "slicer": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "header": [{
+          "show": true,
+          "fontColor": { "solid": { "color": "#1A1A1A" } },
+          "fontSize": 14
+        }],
+        "items": [{
+          "fontColor": { "solid": { "color": "#1A1A1A" } },
+          "background": { "solid": { "color": "#FFFFFF" } },
+          "fontSize": 12
+        }]
+      }
+    },
+    "scatterChart": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "dataPoint": [{ "markerSize": 10 }]
+      }
+    },
+    "treemap": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }],
+        "labels": [{ "fontSize": 12 }]
+      }
+    },
+    "map": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "filledMap": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "shapeMap": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "#FFFFFF" } } }],
+        "border": [{ "color": "#333333", "radius": 4 }]
+      }
+    },
+    "textbox": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "transparent" } } }]
+      }
+    },
+    "image": {
+      "*": {
+        "background": [{ "color": { "solid": { "color": "transparent" } } }]
+      }
+    },
+    "shape": {
+      "*": {
+        "fill": [{ "solid": { "color": "#0072B2" } }],
+        "line": [{ "lineColor": { "solid": { "color": "#0072B2" } }, "weight": 2 }]
+      }
+    },
+    "actionButton": {
+      "*": {
+        "fill": [{ "solid": { "color": "#0072B2" } }],
+        "text": [{ "fontColor": { "solid": { "color": "#FFFFFF" } }, "fontSize": 14 }]
+      }
+    }
+  }
+}