@hiver/skills 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/collections/common/skills/discuss-problem/SKILL.md +2 -2
  2. package/collections/extension/skills/build-component/references/icons/brand-icons.png +0 -0
  3. package/collections/extension/skills/build-component/references/icons/mui-icons.png +0 -0
  4. package/collections/extension/skills/build-component/references/icons.md +79 -6
  5. package/collections/extension/skills/build-component/typography/variants.md +62 -2
  6. package/collections/web/skills/build-component/references/icons/brand-icons.png +0 -0
  7. package/collections/web/skills/build-component/references/icons/mui-icons.png +0 -0
  8. package/collections/web/skills/build-component/references/icons.md +79 -6
  9. package/collections/web/skills/build-component/typography/variants.md +62 -2
  10. package/package.json +1 -1
package/collections/common/skills/discuss-problem/SKILL.md CHANGED
@@ -36,8 +36,8 @@ Help the user to grill down on a problem to its core discussing all sorts of the
36
36
 
37
37
  1. Take input from the user related to the problem they want to discuss or grill down
38
38
  2. If the problem is related to building a new feature, check with the user if prototype designs are available
39
- 3. If Figma designs are available, use the Figma MCP tool to get the prototype details and analyze them
40
- 4. Keep asking if the user has more Figma designs available until all designs are provided; keep using the Figma MCP tool to load them into memory
39
+ 3. If Figma designs are available, use the claude Figma desktop MCP tool to get the prototype details and analyze them
40
+ 4. Keep asking if the user has more Figma designs available until all designs are provided; keep using the claude Figma desktop MCP tool to load them into memory
41
41
  5. Analyze the problem statement in context of the current codebase — use read and search tools to explore, never write tools
42
42
  6. Ask the right questions until you are clear on the problem statement
43
43
  7. Go through the codebase and figure out how the problem can be solved — discussion only
package/collections/extension/skills/build-component/references/icons.md CHANGED
@@ -1,8 +1,81 @@
1
1
  # Icons
2
2
 
3
- - **Use MUI icons only** - import from `@mui/icons-material` or `@hiver/hiver-ui-kit` icons
4
- - **For SVG icons**: Import SVG files directly and use them in `<img>` tags
5
- - Import SVG files: `import iconName from 'path/to/icon.svg'`
6
- - Use in component: `<img src={iconName} alt="description" />`
7
- - Example: `import AILogo from '../assets/ai_logo.svg'` then `<img src={AILogo} alt="AI Copilot" />`
8
- - **Do not import icons from other packages** (no FontAwesome, Heroicons, etc.)
3
+ How to import from `@hiver/hiver-ui-kit`:
4
+
5
+ ```js
6
+ import { brandIcons, icons } from '@hiver/hiver-ui-kit';
7
+ // <brandIcons.Star />
8
+ // <icons.AccountCircle />
9
+ ```
10
+
11
+ ## Resolution priority
12
+
13
+ When a Figma design contains an icon, resolve it in this order:
14
+
15
+ 1. **User-provided SVG asset** — if the user supplied an `.svg` file, import it directly:
16
+ ```js
17
+ import iconName from 'path/to/icon.svg';
18
+ <img src={iconName} alt="description" />
19
+ ```
20
+ 2. **`brandIcons`** — Hiver-designed icons (see "Brand icon catalog" below).
21
+ 3. **`icons`** — curated MUI icons re-exported from hui-kit (see "MUI icon catalog" below).
22
+ 4. **`@mui/icons-material`** — **last resort only**, when the icon is not in the design system **and** the user has not provided an asset.
23
+ 5. **Never** import icons from FontAwesome, Heroicons, or any other third-party icon library.
24
+
25
+ ## How to match a Figma icon to a code name
26
+
27
+ 1. **Prefer the Figma layer/component name** if the design exposes one (e.g. a layer named `Brand/Star` → `brandIcons.Star`).
28
+ 2. **Otherwise, match visually** against the catalog sheets embedded below. Each icon is rendered with its exact export name underneath.
29
+ 3. The export name is what you use in code — including any typos preserved from the design system (see Notes).
30
+
31
+ ## Brand icon catalog (`brandIcons`)
32
+
33
+ ![Brand icons catalog](./icons/brand-icons.png)
34
+
35
+ **Hiver Logo**
36
+ - `Logo`
37
+
38
+ **Brand icons** (box 20×20, live area 18×18, stroke 1.4)
39
+ - `SharedMailbox`, `Analytics`, `EmailTemplates`, `Settings`, `HiverAlerts`, `Activity`, `AutoAssignment`, `Workload`, `Lable`, `Permalink`
40
+ - `Star`, `Edit`, `Filters`, `HiverChat`, `AircallPhone`, `Aavatar`, `Unassigned`, `Mine`, `Team`, `Pending`
41
+ - `Closed`, `Tags`, `Crown`, `Dashboard`, `DashboardInactive`, `SharedInboxNav`, `SharedInboxNavInactive`, `SharedLabel`, `SharedLabelInactive`, `KnowledgeBase`
42
+ - `KnowledgeBaseInactive`, `Connector`, `ConnectorInactive`, `SettingsNav`, `SettingsNavInactive`, `UserRole`, `UserRoleInactive`
43
+
44
+ **Activity icons** (box 20×20, live area 16×16, stroke 1.4)
45
+ - `Status`, `Tag`, `Inbox`, `AlertTriangle`, `EnvelopeDownload`, `ActivityStar`, `EnvelopeUpload`, `Envelope`, `ActivityEdit`, `CloseCircle`, `CheckAction`, `UserCheck`
46
+
47
+ **Settings icons** (box 24×24, live area 22×22, stroke 1.4)
48
+ - `AdminPanel`, `Sliders`, `Compass`, `SwitchAccount`, `Gift`, `MessageCircle`, `LifeBuoy`
49
+
50
+ ## MUI icon catalog (`icons`)
51
+
52
+ ![MUI icons catalog](./icons/mui-icons.png)
53
+
54
+ - `AccountCircle`, `Add`, `Alarm`, `Close`, `Phone`, `ArchiveOutlined`, `ArrowBack`, `ArrowBackIos`, `ArrowDropDown`, `ArrowDropUp`, `ArrowForward`
55
+ - `ArrowOutward`, `CalendarToday`, `CalendarTodayOutlined`, `CalendarTodayOutlinedIcon`, `Cancel`, `CancelOutlined`, `CheckCircle`, `ChevronRightOutlined`, `CodeSharp`, `DeleteOutline`, `DownloadOutlined`
56
+ - `DragIndicator`, `EditOutlined`, `Error`, `ErrorOutline`, `GroupsOutlined`, `InfoOutlined`, `LabelOutlined`, `Link`, `LockOutlined`, `MailOutlined`, `MicNone`
57
+ - `MoreVert`, `NotificationsOutlined`, `OpenInNew`, `Pause`, `PersonOutline`, `PersonOutlined`, `PlayArrow`, `Public`, `Search`, `Settings`, `SettingsOutlined`
58
+ - `StickyNote2Outlined`, `ThumbDownAlt`, `ThumbDownOffAlt`, `ThumbUpAlt`, `ThumbUpOffAlt`, `TimerOutlined`, `TrackChanges`, `UnarchiveOutlined`, `Voicemail`, `Warning`, `WarningAmber`
59
+ - `ArrowRightAlt`, `Delete`, `Email`, `Favorite`
60
+
61
+ ## Notes — Figma → code gotchas
62
+
63
+ - **Typos preserved in exports** — these match the Figma names, so map literally; do not auto-correct:
64
+ - `Lable` (not `Label`)
65
+ - `Aavatar` (not `Avatar`)
66
+ - **`Edit` collision** — three similar icons:
67
+ - `brandIcons.Edit` — pen-on-paper brand icon (yellow accent)
68
+ - `brandIcons.ActivityEdit` — green envelope with a pen, activity style
69
+ - `icons.EditOutlined` — plain MUI outlined pencil
70
+ - **`Settings` collision** — five similar names:
71
+ - `brandIcons.Settings`, `brandIcons.SettingsNav`, `brandIcons.SettingsNavInactive`
72
+ - `icons.Settings`, `icons.SettingsOutlined`
73
+ Pick by Figma category section and visual.
74
+ - **`Star` collision**:
75
+ - `brandIcons.Star` — yellow filled brand star
76
+ - `brandIcons.ActivityStar` — purple activity star
77
+ - **`Tag` vs `Tags`**:
78
+ - `brandIcons.Tags` — brand (plural, box 20×20 live 18×18)
79
+ - `brandIcons.Tag` — activity (singular, box 20×20 live 16×16)
80
+ - **Inactive variants** — many brand icons have `*Inactive` siblings (`DashboardInactive`, `SharedInboxNavInactive`, `SharedLabelInactive`, `KnowledgeBaseInactive`, `ConnectorInactive`, `SettingsNavInactive`, `UserRoleInactive`). Use the inactive variant for the unselected/disabled state of a nav item.
81
+ - **`UserCheck`** — present in `brandIcons` exports but not visible on the current Figma sheet. Use it if a design clearly needs it; otherwise prefer the activity-style icons documented above.
package/collections/extension/skills/build-component/typography/variants.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # Typography reference (`@hiver/hiver-ui-kit`)
2
2
 
3
- Map Figma text styles to `<Typography variant="...">`. Font family is **Open Sans**. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
3
+ Map Figma text styles to `<Typography variant="...">`. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
4
+
5
+ **Font families:**
6
+ - Legacy variants (`h1_*`–`h5_*`, `body0_5_*`–`body4_*`, `caption1_*`, `caption2_*`, `overline_medium`, `overline_semiBold`, `buttonLarge`/`buttonMedium`/`buttonSmall`, `chip`) use **Open Sans**.
7
+ - 2026 tokens (`body_lg_*`–`body_xs_*`, `heading_lg_*`–`heading_sm_*`, `display_lg_*`/`display_md_*`, `caption_regular`/`caption_medium`, `overline_regular`) use **Inter**.
4
8
 
5
9
  ## Heading variants
6
10
 
@@ -68,12 +72,68 @@ Map Figma text styles to `<Typography variant="...">`. Font family is **Open San
68
72
  | `buttonSmall` | 12 | 500 | 20px | 0.4px |
69
73
  | `chip` | 12 | 500 | 12px | 0.4px |
70
74
 
75
+ ## Typography 2026 tokens (Inter)
76
+
77
+ Canonical 2026 design tokens. Use these for new UI built against the 2026 design system. Font family is **Inter**.
78
+
79
+ ### Display
80
+
81
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
82
+ |---------|----------|------------|------------|---------------|
83
+ | `display_lg_semiBold` | 28 | 600 | 36px | 0.01em |
84
+ | `display_lg_bold` | 28 | 700 | 36px | 0.01em |
85
+ | `display_md_semiBold` | 24 | 600 | 32px | 0.01em |
86
+ | `display_md_bold` | 24 | 700 | 32px | 0.01em |
87
+
88
+ ### Heading
89
+
90
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
91
+ |---------|----------|------------|------------|---------------|
92
+ | `heading_lg_medium` | 20 | 500 | 28px | -0.005em |
93
+ | `heading_lg_semiBold` | 20 | 600 | 28px | -0.005em |
94
+ | `heading_md_medium` | 18 | 500 | 28px | -0.005em |
95
+ | `heading_md_semiBold` | 18 | 600 | 28px | -0.005em |
96
+ | `heading_sm_medium` | 16 | 500 | 22px | -0.005em |
97
+ | `heading_sm_semiBold` | 16 | 600 | 22px | -0.005em |
98
+
99
+ ### Body
100
+
101
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
102
+ |---------|----------|------------|------------|---------------|
103
+ | `body_lg_regular` | 16 | 400 | 24px | -0.005em |
104
+ | `body_lg_medium` | 16 | 500 | 24px | -0.005em |
105
+ | `body_lg_semiBold` | 16 | 600 | 24px | -0.005em |
106
+ | `body_md_regular` | 14 | 400 | 20px | -0.005em |
107
+ | `body_md_medium` | 14 | 500 | 20px | -0.005em |
108
+ | `body_md_semiBold` | 14 | 600 | 20px | -0.005em |
109
+ | `body_sm_regular` | 13 | 400 | 19px | -0.005em |
110
+ | `body_sm_medium` | 13 | 500 | 19px | -0.005em |
111
+ | `body_sm_semiBold` | 13 | 600 | 19px | -0.005em |
112
+ | `body_xs_regular` | 12 | 400 | 18px | -0.005em |
113
+ | `body_xs_medium` | 12 | 500 | 18px | -0.005em |
114
+ | `body_xs_semiBold` | 12 | 600 | 18px | -0.005em |
115
+
116
+ ### Caption & overline (2026)
117
+
118
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing | Notes |
119
+ |---------|----------|------------|------------|---------------|-------|
120
+ | `caption_regular` | 12 | 400 | 14px | 0.01em | |
121
+ | `caption_medium` | 12 | 500 | 14px | 0.01em | |
122
+ | `overline_regular` | 12 | 400 | 14px | 0.01em | UPPERCASE |
123
+
124
+ > Note: a 2026 `overline_medium` token also exists in the theme (Inter, 12 / 500 / 14px / 0.01em / UPPERCASE) and shares its name with the legacy Open Sans `overline_medium` (11 / 500 / 18px). The 2026 spread is applied after the legacy block, so the Inter version wins at runtime — use accordingly.
125
+
71
126
  ## Usage
72
127
 
73
128
  ```jsx
74
129
  <Typography variant="h2_medium">Section title</Typography>
75
130
  <Typography variant="body1_regular">Body text</Typography>
76
131
  <Typography variant="caption1_medium" color="text.secondary">Caption</Typography>
132
+
133
+ // 2026 tokens
134
+ <Typography variant="heading_lg_semiBold">Page title</Typography>
135
+ <Typography variant="body_md_regular">Body text</Typography>
136
+ <Typography variant="display_lg_bold">Hero</Typography>
77
137
  ```
78
138
 
79
- **Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match.
139
+ **Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match. For new 2026 designs, prefer the Inter tokens.
package/collections/web/skills/build-component/references/icons.md CHANGED
@@ -1,8 +1,81 @@
1
1
  # Icons
2
2
 
3
- - **Use MUI icons only** - import from `@mui/icons-material` or `@hiver/hiver-ui-kit` icons
4
- - **For SVG icons**: Import SVG files directly and use them in `<img>` tags
5
- - Import SVG files: `import iconName from 'path/to/icon.svg'`
6
- - Use in component: `<img src={iconName} alt="description" />`
7
- - Example: `import AILogo from '../assets/ai_logo.svg'` then `<img src={AILogo} alt="AI Copilot" />`
8
- - **Do not import icons from other packages** (no FontAwesome, Heroicons, etc.)
3
+ How to import from `@hiver/hiver-ui-kit`:
4
+
5
+ ```js
6
+ import { brandIcons, icons } from '@hiver/hiver-ui-kit';
7
+ // <brandIcons.Star />
8
+ // <icons.AccountCircle />
9
+ ```
10
+
11
+ ## Resolution priority
12
+
13
+ When a Figma design contains an icon, resolve it in this order:
14
+
15
+ 1. **User-provided SVG asset** — if the user supplied an `.svg` file, import it directly:
16
+ ```js
17
+ import iconName from 'path/to/icon.svg';
18
+ <img src={iconName} alt="description" />
19
+ ```
20
+ 2. **`brandIcons`** — Hiver-designed icons (see "Brand icon catalog" below).
21
+ 3. **`icons`** — curated MUI icons re-exported from hui-kit (see "MUI icon catalog" below).
22
+ 4. **`@mui/icons-material`** — **last resort only**, when the icon is not in the design system **and** the user has not provided an asset.
23
+ 5. **Never** import icons from FontAwesome, Heroicons, or any other third-party icon library.
24
+
25
+ ## How to match a Figma icon to a code name
26
+
27
+ 1. **Prefer the Figma layer/component name** if the design exposes one (e.g. a layer named `Brand/Star` → `brandIcons.Star`).
28
+ 2. **Otherwise, match visually** against the catalog sheets embedded below. Each icon is rendered with its exact export name underneath.
29
+ 3. The export name is what you use in code — including any typos preserved from the design system (see Notes).
30
+
31
+ ## Brand icon catalog (`brandIcons`)
32
+
33
+ ![Brand icons catalog](./icons/brand-icons.png)
34
+
35
+ **Hiver Logo**
36
+ - `Logo`
37
+
38
+ **Brand icons** (box 20×20, live area 18×18, stroke 1.4)
39
+ - `SharedMailbox`, `Analytics`, `EmailTemplates`, `Settings`, `HiverAlerts`, `Activity`, `AutoAssignment`, `Workload`, `Lable`, `Permalink`
40
+ - `Star`, `Edit`, `Filters`, `HiverChat`, `AircallPhone`, `Aavatar`, `Unassigned`, `Mine`, `Team`, `Pending`
41
+ - `Closed`, `Tags`, `Crown`, `Dashboard`, `DashboardInactive`, `SharedInboxNav`, `SharedInboxNavInactive`, `SharedLabel`, `SharedLabelInactive`, `KnowledgeBase`
42
+ - `KnowledgeBaseInactive`, `Connector`, `ConnectorInactive`, `SettingsNav`, `SettingsNavInactive`, `UserRole`, `UserRoleInactive`
43
+
44
+ **Activity icons** (box 20×20, live area 16×16, stroke 1.4)
45
+ - `Status`, `Tag`, `Inbox`, `AlertTriangle`, `EnvelopeDownload`, `ActivityStar`, `EnvelopeUpload`, `Envelope`, `ActivityEdit`, `CloseCircle`, `CheckAction`, `UserCheck`
46
+
47
+ **Settings icons** (box 24×24, live area 22×22, stroke 1.4)
48
+ - `AdminPanel`, `Sliders`, `Compass`, `SwitchAccount`, `Gift`, `MessageCircle`, `LifeBuoy`
49
+
50
+ ## MUI icon catalog (`icons`)
51
+
52
+ ![MUI icons catalog](./icons/mui-icons.png)
53
+
54
+ - `AccountCircle`, `Add`, `Alarm`, `Close`, `Phone`, `ArchiveOutlined`, `ArrowBack`, `ArrowBackIos`, `ArrowDropDown`, `ArrowDropUp`, `ArrowForward`
55
+ - `ArrowOutward`, `CalendarToday`, `CalendarTodayOutlined`, `CalendarTodayOutlinedIcon`, `Cancel`, `CancelOutlined`, `CheckCircle`, `ChevronRightOutlined`, `CodeSharp`, `DeleteOutline`, `DownloadOutlined`
56
+ - `DragIndicator`, `EditOutlined`, `Error`, `ErrorOutline`, `GroupsOutlined`, `InfoOutlined`, `LabelOutlined`, `Link`, `LockOutlined`, `MailOutlined`, `MicNone`
57
+ - `MoreVert`, `NotificationsOutlined`, `OpenInNew`, `Pause`, `PersonOutline`, `PersonOutlined`, `PlayArrow`, `Public`, `Search`, `Settings`, `SettingsOutlined`
58
+ - `StickyNote2Outlined`, `ThumbDownAlt`, `ThumbDownOffAlt`, `ThumbUpAlt`, `ThumbUpOffAlt`, `TimerOutlined`, `TrackChanges`, `UnarchiveOutlined`, `Voicemail`, `Warning`, `WarningAmber`
59
+ - `ArrowRightAlt`, `Delete`, `Email`, `Favorite`
60
+
61
+ ## Notes — Figma → code gotchas
62
+
63
+ - **Typos preserved in exports** — these match the Figma names, so map literally; do not auto-correct:
64
+ - `Lable` (not `Label`)
65
+ - `Aavatar` (not `Avatar`)
66
+ - **`Edit` collision** — three similar icons:
67
+ - `brandIcons.Edit` — pen-on-paper brand icon (yellow accent)
68
+ - `brandIcons.ActivityEdit` — green envelope with a pen, activity style
69
+ - `icons.EditOutlined` — plain MUI outlined pencil
70
+ - **`Settings` collision** — five similar names:
71
+ - `brandIcons.Settings`, `brandIcons.SettingsNav`, `brandIcons.SettingsNavInactive`
72
+ - `icons.Settings`, `icons.SettingsOutlined`
73
+ Pick by Figma category section and visual.
74
+ - **`Star` collision**:
75
+ - `brandIcons.Star` — yellow filled brand star
76
+ - `brandIcons.ActivityStar` — purple activity star
77
+ - **`Tag` vs `Tags`**:
78
+ - `brandIcons.Tags` — brand (plural, box 20×20 live 18×18)
79
+ - `brandIcons.Tag` — activity (singular, box 20×20 live 16×16)
80
+ - **Inactive variants** — many brand icons have `*Inactive` siblings (`DashboardInactive`, `SharedInboxNavInactive`, `SharedLabelInactive`, `KnowledgeBaseInactive`, `ConnectorInactive`, `SettingsNavInactive`, `UserRoleInactive`). Use the inactive variant for the unselected/disabled state of a nav item.
81
+ - **`UserCheck`** — present in `brandIcons` exports but not visible on the current Figma sheet. Use it if a design clearly needs it; otherwise prefer the activity-style icons documented above.
package/collections/web/skills/build-component/typography/variants.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # Typography reference (`@hiver/hiver-ui-kit`)
2
2
 
3
- Map Figma text styles to `<Typography variant="...">`. Font family is **Open Sans**. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
3
+ Map Figma text styles to `<Typography variant="...">`. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
4
+
5
+ **Font families:**
6
+ - Legacy variants (`h1_*`–`h5_*`, `body0_5_*`–`body4_*`, `caption1_*`, `caption2_*`, `overline_medium`, `overline_semiBold`, `buttonLarge`/`buttonMedium`/`buttonSmall`, `chip`) use **Open Sans**.
7
+ - 2026 tokens (`body_lg_*`–`body_xs_*`, `heading_lg_*`–`heading_sm_*`, `display_lg_*`/`display_md_*`, `caption_regular`/`caption_medium`, `overline_regular`) use **Inter**.
4
8
 
5
9
  ## Heading variants
6
10
 
@@ -68,12 +72,68 @@ Map Figma text styles to `<Typography variant="...">`. Font family is **Open San
68
72
  | `buttonSmall` | 12 | 500 | 20px | 0.4px |
69
73
  | `chip` | 12 | 500 | 12px | 0.4px |
70
74
 
75
+ ## Typography 2026 tokens (Inter)
76
+
77
+ Canonical 2026 design tokens. Use these for new UI built against the 2026 design system. Font family is **Inter**.
78
+
79
+ ### Display
80
+
81
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
82
+ |---------|----------|------------|------------|---------------|
83
+ | `display_lg_semiBold` | 28 | 600 | 36px | 0.01em |
84
+ | `display_lg_bold` | 28 | 700 | 36px | 0.01em |
85
+ | `display_md_semiBold` | 24 | 600 | 32px | 0.01em |
86
+ | `display_md_bold` | 24 | 700 | 32px | 0.01em |
87
+
88
+ ### Heading
89
+
90
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
91
+ |---------|----------|------------|------------|---------------|
92
+ | `heading_lg_medium` | 20 | 500 | 28px | -0.005em |
93
+ | `heading_lg_semiBold` | 20 | 600 | 28px | -0.005em |
94
+ | `heading_md_medium` | 18 | 500 | 28px | -0.005em |
95
+ | `heading_md_semiBold` | 18 | 600 | 28px | -0.005em |
96
+ | `heading_sm_medium` | 16 | 500 | 22px | -0.005em |
97
+ | `heading_sm_semiBold` | 16 | 600 | 22px | -0.005em |
98
+
99
+ ### Body
100
+
101
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing |
102
+ |---------|----------|------------|------------|---------------|
103
+ | `body_lg_regular` | 16 | 400 | 24px | -0.005em |
104
+ | `body_lg_medium` | 16 | 500 | 24px | -0.005em |
105
+ | `body_lg_semiBold` | 16 | 600 | 24px | -0.005em |
106
+ | `body_md_regular` | 14 | 400 | 20px | -0.005em |
107
+ | `body_md_medium` | 14 | 500 | 20px | -0.005em |
108
+ | `body_md_semiBold` | 14 | 600 | 20px | -0.005em |
109
+ | `body_sm_regular` | 13 | 400 | 19px | -0.005em |
110
+ | `body_sm_medium` | 13 | 500 | 19px | -0.005em |
111
+ | `body_sm_semiBold` | 13 | 600 | 19px | -0.005em |
112
+ | `body_xs_regular` | 12 | 400 | 18px | -0.005em |
113
+ | `body_xs_medium` | 12 | 500 | 18px | -0.005em |
114
+ | `body_xs_semiBold` | 12 | 600 | 18px | -0.005em |
115
+
116
+ ### Caption & overline (2026)
117
+
118
+ | Variant | fontSize | fontWeight | lineHeight | letterSpacing | Notes |
119
+ |---------|----------|------------|------------|---------------|-------|
120
+ | `caption_regular` | 12 | 400 | 14px | 0.01em | |
121
+ | `caption_medium` | 12 | 500 | 14px | 0.01em | |
122
+ | `overline_regular` | 12 | 400 | 14px | 0.01em | UPPERCASE |
123
+
124
+ > Note: a 2026 `overline_medium` token also exists in the theme (Inter, 12 / 500 / 14px / 0.01em / UPPERCASE) and shares its name with the legacy Open Sans `overline_medium` (11 / 500 / 18px). The 2026 spread is applied after the legacy block, so the Inter version wins at runtime — use accordingly.
125
+
71
126
  ## Usage
72
127
 
73
128
  ```jsx
74
129
  <Typography variant="h2_medium">Section title</Typography>
75
130
  <Typography variant="body1_regular">Body text</Typography>
76
131
  <Typography variant="caption1_medium" color="text.secondary">Caption</Typography>
132
+
133
+ // 2026 tokens
134
+ <Typography variant="heading_lg_semiBold">Page title</Typography>
135
+ <Typography variant="body_md_regular">Body text</Typography>
136
+ <Typography variant="display_lg_bold">Hero</Typography>
77
137
  ```
78
138
 
79
- **Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match.
139
+ **Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match. For new 2026 designs, prefer the Inter tokens.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hiver/skills",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Shared Claude Code skills & agents for Hiver teams",
5
5
  "type": "module",
6
6
  "bin": {