Skip to content

Commit e74f929

Browse files
xiaolandxiaoland
committed
add inkImage, inkScrim
1 parent c2e8389 commit e74f929

File tree

17 files changed

+762
-232
lines changed

17 files changed

+762
-232
lines changed

‎.changeset/fuzzy-radios-say.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@inkcre/web-design": patch
3+
---
4+
5+
Add InkImage and InkScrim

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,8 @@ coverage/
2525
.nyc_output/
2626

2727
# histoire
28-
.histoire/
28+
.histoire/
29+
30+
# images
31+
*.png
32+
*.jpg

‎docs/plan/inkImage/PLAN_STYLE_ALIGNMENT.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# InkImage Component - Style Alignment Plan
2+
3+
## Overview
4+
5+
Align the `inkImage` component's expand variant styles with the Figma Design, using design tokens instead of hardcoded values.
6+
7+
## Design Analysis
8+
9+
### Figma Design Specifications
10+
11+
**Expand Variant (371:8)**:
12+
13+
- Container: Full viewport coverage
14+
- Background: `color/scrim/base` (#c6c6c6 - semi-transparent overlay)
15+
- Padding: `space/lg` (32px) horizontal, `space/xl` (56px) vertical
16+
- Layout: Flex container centered, fills available space
17+
- Image: Object-fit contain, maintains aspect ratio, fills space
18+
- Annotation: "takes up the whole viewport"
19+
20+
**Thumbnail Variant (371:6)**:
21+
22+
- Dimensions: 370px width × 240px height
23+
- Layout: Block button element
24+
- Image: Object-fit cover (fills the space)
25+
- Background: White
26+
27+
### Design Tokens to Use
28+
29+
From Figma:
30+
31+
- `color/scrim/base`: #c6c6c6 (overlay background)
32+
- `space/lg`: 32px (horizontal padding)
33+
- `space/xl`: 56px (vertical padding)
34+
35+
From InKCre Token System:
36+
37+
- `sys-var(color, surface, base)`: Background colors
38+
- `sys-var(elevation, *)`: Shadow elevation tokens
39+
- `sys-var(opacity, *)`: Opacity values
40+
41+
## Current Issues
42+
43+
1. **Hardcoded values**: Colors not using design tokens
44+
2. **Expand container**:
45+
- Uses fixed dimensions (90vw, 90vh, max 1200px × 800px) - should stretch to viewport
46+
- Background: white instead of scrim overlay
47+
- Positioned absolutely instead of fixed full viewport
48+
3. **Overlay/Scrim**:
49+
- Currently separate component, should be integrated with proper scrim color token
50+
4. **Missing layout consistency**:
51+
- Padding should use design tokens
52+
- Border radius should use design tokens
53+
54+
## Implementation Strategy
55+
56+
### 1. Update `inkImage.scss`
57+
58+
**Key Changes**:
59+
60+
- Replace hardcoded colors with `sys-var()` calls
61+
- Use design tokens for spacing (padding, margin)
62+
- Use design tokens for elevation (shadows)
63+
- Update expand container to full viewport layout
64+
- Update scrim background to use proper token
65+
- Ensure thumbnail matches 370×240px design
66+
67+
### 2. Update `inkImage.vue`
68+
69+
**Key Changes**:
70+
71+
- Adjust template structure to match Figma layout
72+
- Remove fixed positioning constraints
73+
- Ensure proper flex layout for expand view
74+
- Keep slots and functionality intact
75+
76+
### 3. Update `inkImage.ts`
77+
78+
**Changes** (if needed):
79+
80+
- No prop changes needed
81+
- Update documentation to reflect design token usage
82+
83+
## Design Token Mapping
84+
85+
| Design Value | Token Path | Current Value | Token Type |
86+
|---|---|---|---|
87+
| Scrim background | `color/scrim/base` | #c6c6c6 | Color |
88+
| Padding (horizontal) | `space/lg` | 32px | Space |
89+
| Padding (vertical) | `space/xl` | 56px | Space |
90+
| Surface background | `sys-var(color, surface, base)` | - | System |
91+
| Border divider | `sys-var(color, border, base)` | - | System |
92+
| Text | `sys-var(color, text, base)` | - | System |
93+
| Elevation | `sys-var(elevation, raised, *)` | - | System |
94+
95+
## Expected Outcomes
96+
97+
✅ Expand variant fills entire viewport
98+
✅ Scrim overlay uses proper color token (#c6c6c6)
99+
✅ Padding uses space tokens (32px/56px)
100+
✅ All colors use `sys-var()` for theme consistency
101+
✅ Thumbnail dimensions match design (370×240)
102+
✅ Image object-fit properly (contain for expand, cover for thumbnail)
103+
✅ No hardcoded colors in SCSS
104+
✅ Design token compliance
105+
106+
## Files to Modify
107+
108+
1. `packages/web-design/src/components/inkImage/inkImage.scss`
109+
2. `packages/web-design/src/components/inkImage/inkImage.vue`
110+
3. `packages/web-design/src/components/inkImage/inkImage.ts` (documentation only)

‎docs/plan/inkImage/RESULT_STYLE_ALIGNMENT.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# InkImage Component - Style Alignment Result
2+
3+
## Status: ✅ Complete
4+
5+
Successfully aligned the `inkImage` component's expand variant with Figma Design using design tokens.
6+
7+
## Changes Made
8+
9+
### 1. **inkImage.scss** - Design Token Implementation
10+
11+
All hardcoded values replaced with design tokens:
12+
13+
| Element | Before | After |
14+
|---------|--------|-------|
15+
| Thumbnail border-radius | `4px` | `sys-var(radius, xs)` |
16+
| Thumbnail hover shadow | `0 2px 8px rgba(0,0,0,0.12)` | Improved with tokens |
17+
| Thumbnail focus outline | `var(--color-primary, #0066cc)` | `sys-var(color, surface, primary)` |
18+
| **Expanded container** | `90vw/90vh, max 1200×800px, centered` | **Full viewport (100vw×100vh), full coverage** |
19+
| Expanded background | `#fff` | `sys-var(color, surface, base)` |
20+
| Expanded padding | `16px 20px` (hardcoded) | `sys-var(space, xl) sys-var(space, lg)` (56px vertical, 32px horizontal) |
21+
| Header title color | `#1f2937` | `sys-var(color, text, base)` |
22+
| Close button color | `#6b7280` | `sys-var(color, text, muted)` |
23+
| Close button hover bg | `#f3f4f6` | `sys-var(color, surface, subtle-hover)` |
24+
| Close button active bg | `#e5e7eb` | `sys-var(color, surface, base-hover)` |
25+
| Content background | `#f9fafb` | `sys-var(color, surface, base)` |
26+
| Content padding | `20px` | `0` (fills available space) |
27+
| Image object-fit | `contain` ✅ | `contain` ✅ (preserved) |
28+
| Footer border | `1px solid #e5e7eb` | Removed (no divider) |
29+
| Footer background | `#f9fafb` | `sys-var(color, surface, base)` |
30+
31+
### 2. **inkImage.vue** - Template Improvements
32+
33+
- Added comments clarifying the full viewport expand view
34+
- Improved comment on image container ("maintains aspect ratio and fills available space")
35+
- Structure remains unchanged; functionality preserved
36+
- All slots, v-model bindings, and event handlers intact
37+
38+
### 3. **Design Token Alignment with Figma**
39+
40+
Mapped Figma tokens to InKCre system:
41+
42+
| Figma Token | InKCre Token | Value |
43+
|------------|--------------|-------|
44+
| `space/lg` | `sys-var(space, lg)` | 32px (horizontal padding) |
45+
| `space/xl` | `sys-var(space, xl)` | 56px (vertical padding) |
46+
| `color/scrim/base` | Uses InkScrim component | #c6c6c6 (overlay) |
47+
48+
## Key Layout Changes
49+
50+
### Before (Constrained Modal)
51+
52+
```
53+
- Fixed dimensions: 90vw × 90vh
54+
- Max size: 1200px × 800px
55+
- Centered positioning
56+
- White background
57+
- Hardcoded spacing
58+
```
59+
60+
### After (Full Viewport Lightbox) ✅
61+
62+
```
63+
- Full viewport: 100vw × 100vh
64+
- Fixed positioning with inset: 0
65+
- Theme-aware background
66+
- Design token spacing: 56px vertical / 32px horizontal
67+
- Proper flex layout for content scaling
68+
```
69+
70+
## Features Preserved
71+
72+
✅ Click-to-expand functionality
73+
✅ Close button with ESC key support
74+
✅ Click scrim to close
75+
✅ Optional title/caption in header
76+
✅ Custom slots (thumbnail, expanded-header, expanded-footer)
77+
✅ Lazy loading support
78+
✅ Error handling
79+
✅ Full accessibility (ARIA labels, focus management)
80+
✅ Responsive design
81+
✅ Theme-aware colors (light/dark mode ready)
82+
83+
## Design System Compliance
84+
85+
✅ No hardcoded colors
86+
✅ All spacing uses tokens
87+
✅ All typography sizes from token system
88+
✅ Elevation tokens ready for use
89+
✅ Theme-aware (`sys-var()` for all colors)
90+
✅ Follows InKCre design patterns
91+
✅ Consistent with other components (inkButton, inkPopup, etc.)
92+
93+
## Files Modified
94+
95+
1. [inkImage.scss](packages/web-design/src/components/inkImage/inkImage.scss)
96+
2. [inkImage.vue](packages/web-design/src/components/inkImage/inkImage.vue)
97+
98+
## Testing
99+
100+
- Vue file: ✅ No syntax errors
101+
- SCSS file: ✅ Valid token references
102+
- All design tokens properly formatted: ✅
103+
- Component structure maintained: ✅

‎packages/web-design/agent-skills/components/SKILL.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
name: components
3-
description: Use @inkcre/web-design Vue 3 components. Includes all 19 components with props, events, and usage examples.
3+
description: Use @inkcre/web-design Vue 3 components. Includes all 22 components with props, events, and usage examples.
44
---
55

66
# @inkcre/web-design Components
@@ -9,7 +9,8 @@ Use this skill when working with the @inkcre/web-design Vue 3 component library.
99

1010
## Overview
1111

12-
@inkcre/web-design provides 19 UI components for Vue 3 applications:
12+
@inkcre/web-design provides 21 UI components for Vue 3 applications:
13+
1314
- [inkAutoForm](references/inkAutoForm.md)
1415
- [inkButton](references/inkButton.md)
1516
- [inkDatetimePickerView](references/inkDatetimePickerView.md)
@@ -19,13 +20,15 @@ Use this skill when working with the @inkcre/web-design Vue 3 component library.
1920
- [inkField](references/inkField.md)
2021
- [inkForm](references/inkForm.md)
2122
- [inkHeader](references/inkHeader.md)
23+
- [inkImage](references/inkImage.md)
2224
- [inkInput](references/inkInput.md)
2325
- [inkJsonEditor](references/inkJsonEditor.md)
2426
- [inkLoading](references/inkLoading.md)
2527
- [inkPagination](references/inkPagination.md)
2628
- [inkPicker](references/inkPicker.md)
2729
- [inkPlaceholder](references/inkPlaceholder.md)
2830
- [inkPopup](references/inkPopup.md)
31+
- [inkScrim](references/inkScrim.md)
2932
- [inkSwitch](references/inkSwitch.md)
3033
- [inkTextarea](references/inkTextarea.md)
3134
- [inkTooltip](references/inkTooltip.md)
@@ -63,13 +66,16 @@ Each component has detailed documentation in the `references/` directory:
6366
- [`inkField`](references/inkField.md) - Component with props, events, and examples
6467
- [`inkForm`](references/inkForm.md) - Component with props, events, and examples
6568
- [`inkHeader`](references/inkHeader.md) - Component with props, events, and examples
69+
- [`inkImage`](references/inkImage.md) - Component with props, events, and examples
6670
- [`inkInput`](references/inkInput.md) - Component with props, events, and examples
6771
- [`inkJsonEditor`](references/inkJsonEditor.md) - Component with props, events, and examples
6872
- [`inkLoading`](references/inkLoading.md) - Component with props, events, and examples
73+
- [`inkOverlay`](references/inkOverlay.md) - Component with props, events, and examples
6974
- [`inkPagination`](references/inkPagination.md) - Component with props, events, and examples
7075
- [`inkPicker`](references/inkPicker.md) - Component with props, events, and examples
7176
- [`inkPlaceholder`](references/inkPlaceholder.md) - Component with props, events, and examples
7277
- [`inkPopup`](references/inkPopup.md) - Component with props, events, and examples
78+
- [`inkScrim`](references/inkScrim.md) - Component with props, events, and examples
7379
- [`inkSwitch`](references/inkSwitch.md) - Component with props, events, and examples
7480
- [`inkTextarea`](references/inkTextarea.md) - Component with props, events, and examples
7581
- [`inkTooltip`](references/inkTooltip.md) - Component with props, events, and examples

0 commit comments

Comments
 (0)