mchus/bible
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepare reusable Vapor theme bundle and canonical design map for cross-project integration

Browse Source
This commit is contained in:
Michael Chus
2026-02-28 14:50:06 +03:00
parent 45dc8a8868
commit 1553eb1394
20 changed files with 5071 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
kit/examples/integration/greenfield-app/README.md
View File

@@ -4,6 +4,7 @@ Suggested use:
- apply `ai-rules`
- apply `bible-core` (or merge selectively if a Bible already exists)
- apply `ui-theme-vapor` for active visual baseline (CSS + icon sprite)
- copy selected UI patterns into new modules/pages
Keep domain-specific business rules in the host project's own Bible.

7
kit/patterns/table-management/README.md
View File

@@ -9,7 +9,7 @@ This module is the canonical source for:
- select/actions narrow edge columns
- toolbar+table visual seam behavior (single continuous block)
- canonical SVG icon sprite for table actions (shared at theme layer)
- canonical Aqua style surface for the module (shared at theme layer)
- canonical table-management visual/interaction seams independent of host branding
Use this module as the base interaction contract for:
@@ -21,5 +21,6 @@ Pattern-specific contracts should only define additions or exceptions.
## Canonical Assets
- Behavior/layout contract: `contract.md`
- Global icon sprite: `../theme-aqua-legacy/templates/icon_sprite.html`
- Global Aqua stylesheet: `../theme-aqua-legacy/demo-aqua-freeze.css`
- Active icon sprite: `../theme-vapor/templates/icon_sprite.html`
- Active stylesheet baseline: `../theme-vapor/static/vapor.css`
- Legacy icon sprite archive: `../theme-aqua-legacy/templates/icon_sprite.html`

4
kit/patterns/table-management/contract.md
View File

@@ -4,8 +4,8 @@
Defines one canonical, reusable interaction model for table-driven operator/admin screens.
All patterns that expose table selection + bulk actions must inherit this contract.
Visual tokens and icon rendering are inherited from the global Aqua theme module:
`kit/patterns/theme-aqua-legacy`.
Visual styling is inherited from the active repository baseline (currently Vapor Soft / Vapor Night
in demo/scaffold). This contract remains theme-agnostic and defines geometry/semantics only.
## Canonical Regions

11
kit/patterns/theme-aqua-legacy/README.md
View File

@@ -1,17 +1,18 @@
# Aqua Theme Module (Canonical Design Layer)
# Aqua Theme Module (Legacy Archive Layer)
Status: canonical Aqua design layer for reusable UI primitives.
Status: legacy archive/reference layer (not the active demo/scaffold baseline).
This directory defines the shared Aqua visual language for the design code:
This directory preserves the Aqua visual language archive for the design code:
- global visual tokens and component surfaces
- reusable control geometry (buttons, segmented controls, table chrome)
- icon rendering baseline (stroke style + sprite integration)
Pattern modules consume this theme layer and then define behavior-specific contracts.
Active pattern contracts should target the current baseline and may reference this module only
for migration/comparison purposes.
Contents:
- `demo-aqua-freeze.css` — canonical Aqua stylesheet baseline used by demo/scaffold references
- `demo-aqua-freeze.css` — frozen Aqua stylesheet snapshot
- `templates/icon_sprite.html` — canonical icon sprite for reusable action semantics
- `notes.md` — scope and usage policy for this theme module

2
kit/patterns/theme-aqua-legacy/demo-aqua-freeze.css
View File

@@ -2865,7 +2865,7 @@ code {
background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96));
}
/* Aqua-first authoritative segmented controls for playground modules. */
/* Legacy Aqua snapshot segmented controls for playground modules. */
.style-playground.theme-aqua .status-filter-tabs {
display: inline-flex;
flex-wrap: nowrap;

9
kit/patterns/theme-aqua-legacy/notes.md
View File

@@ -1,6 +1,6 @@
# Aqua Theme Notes
This module is the reusable Aqua style source for design-code consumers.
This module is a reusable Aqua style archive for design-code consumers.
## What it captures
@@ -12,9 +12,10 @@ This module is the reusable Aqua style source for design-code consumers.
## How to use
- Treat this module as the visual baseline for reusable UI components in this repository.
- Pattern contracts should reference this module instead of redefining shared visual primitives.
- When visual behavior changes in demo/scaffold, sync the canonical rules here so host projects can reproduce the same output deterministically.
- Treat this module as a legacy reference snapshot, not the active baseline.
- Pattern contracts should inherit the active baseline first and use this module only when a host
project explicitly opts into Aqua-like styling.
- Do not move new baseline decisions here.
## Boundary

16
kit/patterns/theme-vapor/README.md Normal file
View File

@@ -0,0 +1,16 @@
# Vapor Theme Module (Active Design Layer)
Status: active visual baseline for reusable UI primitives.
This module defines the shared Vapor visual language used by the demo and intended host-project
integration:
- baseline tokens and surface treatment
- reusable component geometry (buttons, segmented controls, table chrome)
- shared icon sprite for table-management and operator workflows
Contents:
- `static/vapor.css` - active stylesheet baseline
- `templates/icon_sprite.html` - active icon sprite
- `notes.md` - usage boundaries and integration rules

22
kit/patterns/theme-vapor/notes.md Normal file
View File

@@ -0,0 +1,22 @@
# Vapor Theme Notes
This module is the active reusable theme source for design-code consumers.
## What it captures
- Vapor control surfaces and button hierarchy
- segmented controls and grouped tab geometry
- table/filter/toolbar primitives
- icon rendering baseline and shared sprite usage
- modal and status component style language
## How to use
- Use this module as the visual baseline for host projects that adopt the canonical demo style.
- Pattern contracts should reference shared behavior contracts and rely on this module for visual primitives.
- When baseline visuals change, update this module first to keep downstream integration deterministic.
## Boundary
- This module standardizes visual language only.
- Domain behavior, labels, and business workflow semantics belong to pattern contracts.

4807
kit/patterns/theme-vapor/static/vapor.css Normal file
View File

File diff suppressed because it is too large Load Diff

102
kit/patterns/theme-vapor/templates/icon_sprite.html Normal file
View File

@@ -0,0 +1,102 @@
<svg class="icon-sprite" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="ico-select-visible" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 8.2l2 2.1 4-4.3"></path>
</symbol>
<symbol id="ico-select-filtered" viewBox="0 0 16 16">
<path d="M2.5 3h11l-4.2 4.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
<path d="M11.4 10.2h3M12.9 8.7v3"></path>
</symbol>
<symbol id="ico-clear-visible" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 8h6"></path>
</symbol>
<symbol id="ico-clear-filtered" viewBox="0 0 16 16">
<path d="M2.5 3h11L9.3 7.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
<path d="M10.5 10.2l3 3M13.5 10.2l-3 3"></path>
</symbol>
<symbol id="ico-clear-selection" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 5l6 6M11 5l-6 6"></path>
</symbol>
<symbol id="ico-run" viewBox="0 0 16 16">
<path d="M5 3.5l7 4.5-7 4.5z"></path>
</symbol>
<symbol id="ico-edit" viewBox="0 0 16 16">
<path d="M3 13l1.2-3.6L10 3.6l2.4 2.4-5.8 5.8L3 13z"></path>
<path d="M8.8 4.8l2.4 2.4"></path>
</symbol>
<symbol id="ico-remove" viewBox="0 0 16 16">
<path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"></path>
</symbol>
<symbol id="ico-cancel" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="5.5"></circle>
<path d="M5.5 5.5l5 5M10.5 5.5l-5 5"></path>
</symbol>
<symbol id="ico-archive" viewBox="0 0 16 16">
<rect x="2.5" y="3" width="11" height="2.8" rx="1"></rect>
<path d="M3.5 5.8V13h9V5.8"></path>
<path d="M6.2 8h3.6"></path>
</symbol>
<symbol id="ico-import" viewBox="0 0 16 16">
<path d="M3 4.2v8.6h10V4.2"></path>
<path d="M8 1.8v6.2"></path>
<path d="M5.8 5.8L8 8l2.2-2.2"></path>
<path d="M5 10.2h6"></path>
</symbol>
<symbol id="ico-export" viewBox="0 0 16 16">
<path d="M3 4.2v8.6h10V4.2"></path>
<path d="M8 8V1.8"></path>
<path d="M5.8 4L8 1.8 10.2 4"></path>
<path d="M5 10.2h6"></path>
</symbol>
<symbol id="ico-export-filtered" viewBox="0 0 16 16">
<path d="M2 4.2v8.6h10.8"></path>
<path d="M7 8V1.8"></path>
<path d="M4.8 4L7 1.8 9.2 4"></path>
<path d="M10 5.1h5.2L13.1 7.5v3.1l-1.3.7V7.5z"></path>
</symbol>
<symbol id="ico-export-selected" viewBox="0 0 16 16">
<path d="M2 4.2v8.6h10.8"></path>
<path d="M7 8V1.8"></path>
<path d="M4.8 4L7 1.8 9.2 4"></path>
<rect x="10.1" y="5.2" width="5" height="5" rx="0.6"></rect>
<path d="M11.2 6.3l2.8 2.8M14 6.3l-2.8 2.8"></path>
</symbol>
<symbol id="ico-retry" viewBox="0 0 16 16">
<path d="M12.2 6A4.8 4.8 0 0 0 4.8 4.4"></path>
<path d="M5.6 2.9L4.1 4.6 5.9 5.8"></path>
<path d="M3.8 10A4.8 4.8 0 0 0 11.2 11.6"></path>
<path d="M10.4 13.1L11.9 11.4 10.1 10.2"></path>
</symbol>
<symbol id="ico-review" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="5.5"></circle>
<path d="M8 7.2v3.6"></path>
<path d="M8 5.1h.01"></path>
</symbol>
<symbol id="ico-mark-review" viewBox="0 0 16 16">
<path d="M8 2.6l5.2 2v3.7c0 2.3-1.5 4.4-5.2 5.7-3.7-1.3-5.2-3.4-5.2-5.7V4.6l5.2-2z"></path>
<path d="M8 6.1v3.2"></path>
<path d="M8 11.1h.01"></path>
</symbol>
<symbol id="ico-confirm" viewBox="0 0 16 16">
<path d="M8 2.5l5 2v3.8c0 2.2-1.3 4.1-5 5.3-3.7-1.2-5-3.1-5-5.3V4.5l5-2z"></path>
<path d="M5.7 8.3l1.6 1.7 3-3.1"></path>
</symbol>
<symbol id="ico-inspect" viewBox="0 0 16 16">
<circle cx="7" cy="7" r="3.8"></circle>
<path d="M9.8 9.8l3.2 3.2"></path>
</symbol>
<symbol id="ico-scope" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="4.2" height="4.2"></rect>
<rect x="9.3" y="2.5" width="4.2" height="4.2"></rect>
<rect x="2.5" y="9.3" width="4.2" height="4.2"></rect>
<rect x="9.3" y="9.3" width="4.2" height="4.2"></rect>
</symbol>
<symbol id="ico-queue" viewBox="0 0 16 16">
<path d="M5.4 4h8.1M5.4 8h8.1M5.4 12h8.1"></path>
<circle cx="3.2" cy="4" r="0.7"></circle>
<circle cx="3.2" cy="8" r="0.7"></circle>
<circle cx="3.2" cy="12" r="0.7"></circle>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB