diff --git a/input/includes/dmn.css b/input/includes/dmn.css deleted file mode 100644 index e39c92781c..0000000000 --- a/input/includes/dmn.css +++ /dev/null @@ -1,83 +0,0 @@ -/* WHO color palette: Light and Dark mode support */ -:root { - /* Light mode colors */ - --who-blue: #0093d0; - --who-header: #f0f9fc; - --who-table-border: #007ab7; - --who-bg-primary: #ffffff; - --who-bg-secondary: #f7fafc; - --who-bg-tertiary: #f6fafd; - --who-text-primary: #222; - --who-text-secondary: #555; - --who-input-bg: #e5f4fa; - --who-output-bg: #dff7ea; - --who-annotation-bg: #fffbe5; -} - -/* Dark mode colors */ -@media (prefers-color-scheme: dark) { - :root { - --who-blue: #4db8e8; - --who-header: #1a2332; - --who-table-border: #4db8e8; - --who-bg-primary: #0d1117; - --who-bg-secondary: #161b22; - --who-bg-tertiary: #21262d; - --who-text-primary: #e6edf3; - --who-text-secondary: #8b949e; - --who-input-bg: #0d2538; - --who-output-bg: #0f2419; - --who-annotation-bg: #2d2a1f; - } -} - -table.decision { - border-collapse: collapse; - width: 100%; - margin: 2em 0; - font-family: Arial, sans-serif; - background-color: var(--who-bg-primary); - color: var(--who-text-primary); -} - -table.decision tr.decision-header { - background: var(--who-blue); - color: white; - font-weight: bold; -} - -table.decision tr.io-row { - background: var(--who-header); - color: var(--who-text-primary); - font-weight: 600; -} - -table.decision td, table.decision th { - border: 1px solid var(--who-table-border); - padding: 0.5em 1em; -} - -.row-label { - font-weight: bold; - background: var(--who-bg-tertiary); - color: var(--who-text-secondary); -} - -.input, .inputEntry { - background: var(--who-input-bg); - color: var(--who-text-primary); -} - -.output, .outputEntry { - background: var(--who-output-bg); - color: var(--who-text-primary); -} - -.annotation, .annotationEntry { - background: var(--who-annotation-bg); - color: var(--who-text-primary); -} - -tr.rule:nth-child(even) { - background: var(--who-bg-secondary); -} \ No newline at end of file diff --git a/input/scripts/includes/dmn.css b/input/scripts/includes/dmn.css deleted file mode 100644 index e39c92781c..0000000000 --- a/input/scripts/includes/dmn.css +++ /dev/null @@ -1,83 +0,0 @@ -/* WHO color palette: Light and Dark mode support */ -:root { - /* Light mode colors */ - --who-blue: #0093d0; - --who-header: #f0f9fc; - --who-table-border: #007ab7; - --who-bg-primary: #ffffff; - --who-bg-secondary: #f7fafc; - --who-bg-tertiary: #f6fafd; - --who-text-primary: #222; - --who-text-secondary: #555; - --who-input-bg: #e5f4fa; - --who-output-bg: #dff7ea; - --who-annotation-bg: #fffbe5; -} - -/* Dark mode colors */ -@media (prefers-color-scheme: dark) { - :root { - --who-blue: #4db8e8; - --who-header: #1a2332; - --who-table-border: #4db8e8; - --who-bg-primary: #0d1117; - --who-bg-secondary: #161b22; - --who-bg-tertiary: #21262d; - --who-text-primary: #e6edf3; - --who-text-secondary: #8b949e; - --who-input-bg: #0d2538; - --who-output-bg: #0f2419; - --who-annotation-bg: #2d2a1f; - } -} - -table.decision { - border-collapse: collapse; - width: 100%; - margin: 2em 0; - font-family: Arial, sans-serif; - background-color: var(--who-bg-primary); - color: var(--who-text-primary); -} - -table.decision tr.decision-header { - background: var(--who-blue); - color: white; - font-weight: bold; -} - -table.decision tr.io-row { - background: var(--who-header); - color: var(--who-text-primary); - font-weight: 600; -} - -table.decision td, table.decision th { - border: 1px solid var(--who-table-border); - padding: 0.5em 1em; -} - -.row-label { - font-weight: bold; - background: var(--who-bg-tertiary); - color: var(--who-text-secondary); -} - -.input, .inputEntry { - background: var(--who-input-bg); - color: var(--who-text-primary); -} - -.output, .outputEntry { - background: var(--who-output-bg); - color: var(--who-text-primary); -} - -.annotation, .annotationEntry { - background: var(--who-annotation-bg); - color: var(--who-text-primary); -} - -tr.rule:nth-child(even) { - background: var(--who-bg-secondary); -} \ No newline at end of file diff --git a/local-template/DMN_STYLING.md b/local-template/DMN_STYLING.md new file mode 100644 index 0000000000..ffbed5abf3 --- /dev/null +++ b/local-template/DMN_STYLING.md @@ -0,0 +1,68 @@ +# Decision Table Enhancements for SMART Guidelines + +This local template enhancement provides **decision table specific styling** that complements the WHO FHIR IG template's dark/light mode functionality. + +## Integration with WHO Template + +The WHO FHIR IG template (smart-ig-template) now includes comprehensive dark/light mode theming with: +- Theme toggle button in the navbar +- System preference detection +- Theme persistence +- General template theming + +This enhancement focuses specifically on **DMN decision table styling** with WHO color palette integration. + +## Features + +### 🎨 WHO Color Palette for Decision Tables +- **Input columns**: Light blue (`#e5f4fa` / `#2c5282`) +- **Output columns**: Light green (`#dff7ea` / `#2f855a`) +- **Annotation columns**: Light yellow (`#fffbe5` / `#744210`) +- **Header rows**: WHO blue (`#0093d0`) +- **Border colors**: WHO blue tones + +### 🌓 Automatic Theme Integration +- Respects the WHO template's theme system +- Uses `[data-theme="dark"]` selector for consistency +- Supports system preference via `@media (prefers-color-scheme: dark)` + +### 📊 Decision Table Enhancement +- Enhanced styling for `.decision` tables +- Color-coded columns for better readability +- Proper contrast ratios in both themes +- WHO branding compliance + +## Usage + +The enhancement automatically applies to decision tables when using these CSS classes: + +```html + + + + + + + + + + + + + +
RuleInput 1OutputNotes
1ConditionActionComment
+``` + +## Implementation + +The enhancement is implemented through: +- `local-template/package/content/assets/css/dmn.css` - Decision table specific styling +- `local-template/package/includes/_append.fragment-css.html` - CSS inclusion + +No JavaScript is included as theme functionality is provided by the WHO template. + +## Relationship to WHO Template + +This enhancement is designed to work seamlessly with the WHO template's dark mode implementation. When the WHO template is updated with dark mode support, this enhancement will automatically integrate without conflicts. + +**Note**: Once the WHO template includes comprehensive dark mode support, only the decision table specific enhancements in this local template will be necessary. \ No newline at end of file diff --git a/local-template/package/content/assets/css/dmn.css b/local-template/package/content/assets/css/dmn.css index 069d9548fc..31ef1605ee 100644 --- a/local-template/package/content/assets/css/dmn.css +++ b/local-template/package/content/assets/css/dmn.css @@ -1,83 +1,92 @@ -/* WHO color palette: Light and Dark mode support */ +/* + * Decision Table Enhancements for SMART Guidelines + * Complements the WHO template dark/light mode theming + * Focuses on DMN-specific styling and WHO color integration + */ + +/* Decision table specific WHO color palette */ :root { - /* Light mode colors */ - --who-blue: #0093d0; - --who-header: #f0f9fc; - --who-table-border: #007ab7; - --who-bg-primary: #ffffff; - --who-bg-secondary: #f7fafc; - --who-bg-tertiary: #f6fafd; - --who-text-primary: #222; - --who-text-secondary: #555; - --who-input-bg: #e5f4fa; - --who-output-bg: #dff7ea; - --who-annotation-bg: #fffbe5; + --dmn-who-blue: #0093d0; + --dmn-input-bg: #e5f4fa; + --dmn-output-bg: #dff7ea; + --dmn-annotation-bg: #fffbe5; + --dmn-header-bg: #f0f9fc; + --dmn-border-color: #007ab7; + --dmn-row-label-bg: #f6fafd; + --dmn-row-label-text: #555555; + --dmn-table-stripe: #f9f9f9; +} + +/* Decision table dark mode colors */ +[data-theme="dark"] { + --dmn-input-bg: #2c5282; + --dmn-output-bg: #2f855a; + --dmn-annotation-bg: #744210; + --dmn-header-bg: #1a2332; + --dmn-border-color: #4a90a4; + --dmn-row-label-bg: #2d3748; + --dmn-row-label-text: #cbd5e0; + --dmn-table-stripe: #2a2a2a; } -/* Dark mode colors */ +/* Apply dark mode based on system preference if no explicit theme is set */ @media (prefers-color-scheme: dark) { - :root { - --who-blue: #4db8e8; - --who-header: #1a2332; - --who-table-border: #4db8e8; - --who-bg-primary: #0d1117; - --who-bg-secondary: #161b22; - --who-bg-tertiary: #21262d; - --who-text-primary: #e6edf3; - --who-text-secondary: #8b949e; - --who-input-bg: #0d2538; - --who-output-bg: #0f2419; - --who-annotation-bg: #2d2a1f; + :root:not([data-theme]) { + --dmn-input-bg: #2c5282; + --dmn-output-bg: #2f855a; + --dmn-annotation-bg: #744210; + --dmn-header-bg: #1a2332; + --dmn-border-color: #4a90a4; + --dmn-row-label-bg: #2d3748; + --dmn-row-label-text: #cbd5e0; + --dmn-table-stripe: #2a2a2a; } -} - +} + +/* DMN Decision Table Specific Styling */ table.decision { border-collapse: collapse; width: 100%; margin: 2em 0; font-family: Arial, sans-serif; - background-color: var(--who-bg-primary); - color: var(--who-text-primary); -} - -table.decision tr.decision-header { - background: var(--who-blue); - color: white; - font-weight: bold; -} - +} + +table.decision tr.decision-header { + background: var(--dmn-who-blue); + color: white; + font-weight: bold; +} + table.decision tr.io-row { - background: var(--who-header); - color: var(--who-text-primary); + background: var(--dmn-header-bg); font-weight: 600; -} - -table.decision td, table.decision th { - border: 1px solid var(--who-table-border); - padding: 0.5em 1em; -} - +} + +table.decision td, table.decision th { + border: 1px solid var(--dmn-border-color); + padding: 0.5em 1em; +} + +/* Decision table cell types with WHO color coding */ .row-label { font-weight: bold; - background: var(--who-bg-tertiary); - color: var(--who-text-secondary); + background: var(--dmn-row-label-bg); + color: var(--dmn-row-label-text); } .input, .inputEntry { - background: var(--who-input-bg); - color: var(--who-text-primary); + background: var(--dmn-input-bg); } .output, .outputEntry { - background: var(--who-output-bg); - color: var(--who-text-primary); + background: var(--dmn-output-bg); } .annotation, .annotationEntry { - background: var(--who-annotation-bg); - color: var(--who-text-primary); + background: var(--dmn-annotation-bg); } +/* Alternating row styling for decision tables */ tr.rule:nth-child(even) { - background: var(--who-bg-secondary); + background: var(--dmn-table-stripe); } \ No newline at end of file diff --git a/local-template/package/includes/_append.fragment-footer.html b/local-template/package/includes/_append.fragment-footer.html index 58b47beae7..042b46fb81 100644 --- a/local-template/package/includes/_append.fragment-footer.html +++ b/local-template/package/includes/_append.fragment-footer.html @@ -26,9 +26,16 @@ --footer-link: #0066cc; } - /* Dark mode */ + /* Dark mode - align with WHO template theming */ + [data-theme="dark"] { + --footer-border: #30363d; + --footer-text: #8b949e; + --footer-link: #4db8e8; + } + + /* Fallback for system preference when no explicit theme */ @media (prefers-color-scheme: dark) { - :root { + :root:not([data-theme]) { --footer-border: #30363d; --footer-text: #8b949e; --footer-link: #4db8e8;