Skip to content

fix: add reusable inverse surface semantics for tooltips #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
artiphishle merged 7 commits into from
Jul 21, 2026
Merged

fix: add reusable inverse surface semantics for tooltips #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
28e41a9
add reusable inverse surface semantic
artiphishle Jul 21, 2026
f1ca028
pair inverse surface and content semantics
artiphishle Jul 21, 2026
23b8b61
use inverse surface semantic for tooltips
artiphishle Jul 21, 2026
9608a2b
test reusable inverse color semantics
artiphishle Jul 21, 2026
7a63a04
add inverse semantics changeset
artiphishle Jul 21, 2026
c141b04
docs: update
artiphishle Jul 21, 2026
dd91013
test: update dark palette inverse semantics assertion
artiphishle Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-inverse-tooltip-semantics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ankhorage/surface': patch
---

Add reusable inverse surface/content semantics and use the paired colors for readable mode-aware tooltips.
21 changes: 14 additions & 7 deletions paradox/exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 61,
"line": 62,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -756,7 +756,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 55,
"line": 56,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -3604,7 +3604,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 48,
"line": 49,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -4572,7 +4572,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 84,
"line": 85,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -10160,6 +10160,13 @@
"required": true,
"description": null
},
{
"name": "inverse",
"kind": "property",
"type": "string",
"required": true,
"description": null
},
{
"name": "raised",
"kind": "property",
Expand Down Expand Up @@ -10204,7 +10211,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 186,
"line": 187,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -14152,7 +14159,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 67,
"line": 68,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -14276,7 +14283,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 97,
"line": 98,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down
15 changes: 8 additions & 7 deletions paradox/exports.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:61:1`
Source: `src/theme/types.ts:62:1`

### Members

Expand Down Expand Up @@ -252,7 +252,7 @@ Source: `src/components/badge/types.ts:7:1`

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:55:1`
Source: `src/theme/types.ts:56:1`

### Members

Expand Down Expand Up @@ -926,7 +926,7 @@ Source: `src/layout/Container.tsx:10:1`

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:48:1`
Source: `src/theme/types.ts:49:1`

### Members

Expand Down Expand Up @@ -1245,7 +1245,7 @@ Source: `src/context/FontContext.tsx:6:1`

Kind: `unknown`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:84:1`
Source: `src/theme/types.ts:85:1`

## GeneratedColorRole

Expand Down Expand Up @@ -2787,6 +2787,7 @@ Source: `src/theme/types.ts:42:1`
| Name | Kind | Type | Required | Description |
| ------- | -------- | -------- | -------- | ----------- |
| default | property | `string` | yes | |
| inverse | property | `string` | yes | |
| raised | property | `string` | yes | |
| subtle | property | `string` | yes | |

Expand All @@ -2800,7 +2801,7 @@ Source: `src/surfaceColor.ts:20:1`

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:186:1`
Source: `src/theme/types.ts:187:1`

### Members

Expand Down Expand Up @@ -3680,7 +3681,7 @@ Source: `src/theme/ThemeContext.tsx:31:14`

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:67:1`
Source: `src/theme/types.ts:68:1`

### Members

Expand All @@ -3705,7 +3706,7 @@ Source: `src/theme/types.ts:67:1`

Kind: `type`
Module: `src/theme/types.ts`
Source: `src/theme/types.ts:97:1`
Source: `src/theme/types.ts:98:1`

### Members

Expand Down
21 changes: 14 additions & 7 deletions paradox/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19849,7 +19849,7 @@ <h3>src/theme/types.ts</h3>
data-search="ActionSemantics type src/theme/types.ts RoleSemantics"
>
<h4>ActionSemantics</h4>
<p class="muted">type • <code>src/theme/types.ts:61:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:62:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div>
Expand Down Expand Up @@ -19900,7 +19900,7 @@ <h4>ActionSemantics</h4>
data-search="BorderSemantics type src/theme/types.ts "
>
<h4>BorderSemantics</h4>
<p class="muted">type • <code>src/theme/types.ts:55:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:56:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div><strong>Related symbols:</strong> <span class="empty">None</span></div>
Expand Down Expand Up @@ -19946,7 +19946,7 @@ <h4>BorderSemantics</h4>
data-search="ContentSemantics type src/theme/types.ts "
>
<h4>ContentSemantics</h4>
<p class="muted">type • <code>src/theme/types.ts:48:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:49:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div><strong>Related symbols:</strong> <span class="empty">None</span></div>
Expand Down Expand Up @@ -19999,7 +19999,7 @@ <h4>ContentSemantics</h4>
data-search="FontWeight unknown src/theme/types.ts "
>
<h4>FontWeight</h4>
<p class="muted">unknown • <code>src/theme/types.ts:84:1</code></p>
<p class="muted">unknown • <code>src/theme/types.ts:85:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div><strong>Related symbols:</strong> <span class="empty">None</span></div>
Expand Down Expand Up @@ -20216,6 +20216,13 @@ <h4>SurfaceSemantics</h4>
<td>yes</td>
<td></td>
</tr>
<tr>
<td><code>inverse</code></td>
<td>property</td>
<td><code>string</code></td>
<td>yes</td>
<td></td>
</tr>
<tr>
<td><code>raised</code></td>
<td>property</td>
Expand All @@ -20239,7 +20246,7 @@ <h4>SurfaceSemantics</h4>
data-search="SurfaceTheme type src/theme/types.ts FontWeight GeneratedThemeSwatches ThemeSemantics"
>
<h4>SurfaceTheme</h4>
<p class="muted">type • <code>src/theme/types.ts:186:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:187:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div>
Expand Down Expand Up @@ -20361,7 +20368,7 @@ <h4>SurfaceTheme</h4>
data-search="ThemeSemantics type src/theme/types.ts ActionSemantics BorderSemantics ContentSemantics NeutralSemantics RoleSemantics SurfaceSemantics"
>
<h4>ThemeSemantics</h4>
<p class="muted">type • <code>src/theme/types.ts:67:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:68:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div>
Expand Down Expand Up @@ -20494,7 +20501,7 @@ <h4>ThemeSemantics</h4>
data-search="ThemeTokens type src/theme/types.ts FontWeight GeneratedThemeSwatches ThemeSemantics"
>
<h4>ThemeTokens</h4>
<p class="muted">type • <code>src/theme/types.ts:97:1</code></p>
<p class="muted">type • <code>src/theme/types.ts:98:1</code></p>

<p><strong>Export paths:</strong> <code>src/index.ts</code></p>
<div>
Expand Down
23 changes: 15 additions & 8 deletions paradox/paradox.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1685,7 +1685,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 61,
"line": 62,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -2433,7 +2433,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 55,
"line": 56,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -5281,7 +5281,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 48,
"line": 49,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -6249,7 +6249,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 84,
"line": 85,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -11837,6 +11837,13 @@
"required": true,
"description": null
},
{
"name": "inverse",
"kind": "property",
"type": "string",
"required": true,
"description": null
},
{
"name": "raised",
"kind": "property",
Expand Down Expand Up @@ -11881,7 +11888,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 186,
"line": 187,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -15829,7 +15836,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 67,
"line": 68,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -15953,7 +15960,7 @@
"modulePath": "src/theme/types.ts",
"sourceLocation": {
"filePath": "src/theme/types.ts",
"line": 97,
"line": 98,
"column": 1
},
"exportPaths": ["src/index.ts"],
Expand Down Expand Up @@ -35953,7 +35960,7 @@
{
"fromComponent": "Tooltip",
"toComponent": "Surface",
"jsxElement": "<Surface\n p=\"s\"\n style={{\n backgroundColor: theme.semantics.neutral.text,\n }}\n testID={testID}\n variant=\"raised\"\n >",
"jsxElement": "<Surface\n p=\"s\"\n style={{\n backgroundColor: theme.semantics.surface.inverse,\n }}\n testID={testID}\n variant=\"raised\"\n >",
"sourcePath": "src/components/tooltip/Tooltip.tsx"
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/components/tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function Tooltip({
<Surface
p="s"
style={{
backgroundColor: theme.semantics.neutral.text,
backgroundColor: theme.semantics.surface.inverse,
}}
testID={testID}
variant="raised"
Expand Down
5 changes: 3 additions & 2 deletions src/theme/colorEngine.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,11 @@ describe('colorEngine', () => {
});

it('generates a valid palette for dark mode', () => {
const { colors, semantics } = generatePalette(mockConfig, 'dark');
const { colors, swatches, semantics } = generatePalette(mockConfig, 'dark');

expect(colors.background).toBe(semantics.neutral.bg);
expect(semantics.content.inverse).toBe(semantics.brand.onSolidText);
expect(semantics.surface.inverse).toBe(swatches.neutral[50]);
expect(semantics.content.inverse).toBe(swatches.neutral[900]);
});

it('uses the color-theory default semantic status seeds', () => {
Expand Down
6 changes: 4 additions & 2 deletions src/theme/colorEngine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ export function generatePalette(
parseHexColorOrThrow(modeConfig.primaryColor);

const generated = generateThemeModeColors(modeConfig);

const { swatches } = generated;
const neutralSwatch = swatches.neutral;

Expand All @@ -140,18 +139,21 @@ export function generatePalette(
// Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.
const error = danger;
const info = buildRoleSemantics(secondarySwatch, isDark);
const inverseSurface = isDark ? neutralSwatch[50] : neutralSwatch[900];
const inverseOnSurface = isDark ? neutralSwatch[900] : neutralSwatch[50];

const surfaceSemantics: SurfaceSemantics = {
default: neutral.surface,
subtle: neutral.bgSubtle,
raised: neutral.surface,
inverse: inverseSurface,
};

const content: ContentSemantics = {
default: neutral.text,
muted: neutral.textMuted,
subtle: neutral.textSubtle,
inverse: brand.onSolidText,
inverse: inverseOnSurface,
};

const border: BorderSemantics = {
Expand Down
Loading
Loading