testio-tailwind 3.27.2 → 3.27.4

package/ai-reference/13-best-practices.md

@@ -0,0 +1,73 @@
+# Best Practices for AI Agents
+
+---
+
+## When Building Pages
+
+1. **Start with Layout Structure**
+   - Use semantic HTML5 elements
+   - Apply layout classes: `header`, `sidebar`, `main`, `section`
+   - Use grid or flex utilities for responsive layouts
+   - Use `.page-header` for dashboard pages
+   - Choose between standard full-width or centered layout (see [02-layout-patterns.md](02-layout-patterns.md))
+
+2. **Component Selection**
+   - Choose the appropriate component variant for the use case
+   - Use semantic button/alert types (primary, success, danger, etc.)
+   - Apply consistent spacing using the spacing scale
+
+3. **Responsive Design**
+   - Use responsive grid classes: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+   - Apply responsive utilities: `hidden md:block`, `flex-col md:flex-row`
+   - Mobile-first approach
+
+4. **Accessibility**
+   - Include proper ARIA labels
+   - Use semantic HTML elements
+   - Ensure proper heading hierarchy
+   - Include alt text for images
+   - Use `<label>` elements with `for` attributes
+
+5. **Layout Pattern Selection**
+   - **Full-Width:** Dashboards and data displays
+   - **Centered:** Documentation and forms (see [02-layout-patterns.md](02-layout-patterns.md))
+
+6. **Dark Mode** (see [12-dark-mode.md](12-dark-mode.md))
+   - Always test components with `.dark` class applied
+   - Border radius is larger in dark mode (12px vs 5px)
+   - Grid gutters are larger in dark mode (40px vs 20px)
+   - Use `dark:` prefix for conditional dark mode styles
+
+7. **Forms** (see [05-forms.md](05-forms.md))
+   - Use `.form-grid` for form layouts
+   - Apply `.form-group` wrapper around each field
+   - Use `.form-hint` for helper text
+   - Use `.field_with_errors` for validation states
+
+8. **Tables** (see [08-data-display.md](08-data-display.md))
+   - `.table` for standard data tables
+   - `.table-standard` for key-value style tables
+   - `.table-cellstyle` for status tracking tables
+   - `.action-cell` for right-aligned action buttons
+
+9. **Page Header**
+   - Use `.page-header` for dashboard/session pages
+   - Main card should have `.page-maincard` and `p-card-padding`
+   - Add `.with-chart` modifier when including charts
+   - Actions go in `.page-actions`
+
+---
+
+## Version & Support
+
+**Current Version:** 3.23.0
+**Tailwind Version:** 4.1.11
+**Node Version:** v23.11.0
+**Template Language:** HAML (primary) and Pug formats supported
+
+```bash
+npm install testio-tailwind@latest
+```
+
+Documentation is included in the package under `/dist/`.
+Source: GitHub repository (test-IO/testio-tailwind)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.27.2",
+	"version": "3.27.4",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "npx del-cli dist --force",

package/src/assets/scripts/modules/colors.js

@@ -1,3 +1,31 @@
+export const colorBlueLight = '#21bef4';
+export const colorBlueDark = '#326dd1';
+export const colorTeal = '#33BA9E';
+export const colorTealLight = '#6DDEBA';
+export const colorTealLighter = '#78EAC1';
+export const colorPurple = '#7954ff';
+export const colorPurpleLight = '#8988eb';
+export const colorPink = '#e83e8c';
+export const colorRed = '#e83e8c';
+export const colorRedLight = '#FF3131';
+export const colorPetrol = '#236a84';
+export const colorPetrolDark = '#263340';
+export const colorGreen = '#8cbd24';
+export const colorOrange = '#f48d21';
+export const colorYellow = '#d8ce0d';
+export const colorWhite = '#fff';
+export const colorGray100 = '#f8f9fa';
+export const colorGray200 = '#e9ecef';
+export const colorGray300 = '#dee2e6';
+export const colorGray400 = '#ced4da';
+export const colorGray500 = '#adb5bd';
+export const colorGray600 = '#6c757d';
+export const colorGray700 = '#495057';
+export const colorGray800 = '#343a40';
+export const colorGray900 = '#222222';
+export const colorBlack = '#1D1D1D';
+
+// Functional colors
 export const colorCritical = '#FF3131';
 export const colorHigh = '#d8ce0d';
 export const colorLow = '#9fa2a8';
@@ -8,11 +36,9 @@ export const colorSuccess = '#8cbd24';
 export const colorDanger = '#FF3131';
 export const colorNeutralBright = '#bfc1c5';
 export const colorInfo = '#326dd1';
-export const colorBlueLight = '#21bef4';
 export const colorBorderBright = '#e6e6e6';
 export const colorLabelBright = '#5f656d';
 export const colorValueBright = '#1d1d1d';
-export const colorTealLight = '#6ddeba';
 export const colorValueDark = '#ffffff';
 export const colorLabelDark = '#888888';
 export const colorNeutralDark = '#2E2E2E';