@ankhorage/surface 3.1.3 → 3.3.0
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.
- package/CHANGELOG.md +12 -0
- package/dist/components/navigation/helpers.d.ts.map +1 -1
- package/dist/components/navigation/helpers.js +16 -8
- package/dist/components/navigation/helpers.js.map +1 -1
- package/dist/internal/resolvers/resolveInteractiveColors.d.ts.map +1 -1
- package/dist/internal/resolvers/resolveInteractiveColors.js +19 -13
- package/dist/internal/resolvers/resolveInteractiveColors.js.map +1 -1
- package/dist/internal/resolvers/resolveSelectionControlColors.d.ts.map +1 -1
- package/dist/internal/resolvers/resolveSelectionControlColors.js +19 -10
- package/dist/internal/resolvers/resolveSelectionControlColors.js.map +1 -1
- package/dist/theme/colorEngine.d.ts +4 -3
- package/dist/theme/colorEngine.d.ts.map +1 -1
- package/dist/theme/colorEngine.js +23 -122
- package/dist/theme/colorEngine.js.map +1 -1
- package/dist/theme/createSurfaceColorDiagnosticCollector.d.ts +14 -0
- package/dist/theme/createSurfaceColorDiagnosticCollector.d.ts.map +1 -0
- package/dist/theme/createSurfaceColorDiagnosticCollector.js +53 -0
- package/dist/theme/createSurfaceColorDiagnosticCollector.js.map +1 -0
- package/dist/theme/createSurfaceSemanticPolicy.d.ts +30 -0
- package/dist/theme/createSurfaceSemanticPolicy.d.ts.map +1 -0
- package/dist/theme/createSurfaceSemanticPolicy.js +118 -0
- package/dist/theme/createSurfaceSemanticPolicy.js.map +1 -0
- package/dist/theme/createTheme.d.ts.map +1 -1
- package/dist/theme/createTheme.js +2 -1
- package/dist/theme/createTheme.js.map +1 -1
- package/dist/theme/defaultTokens.d.ts +1 -1
- package/dist/theme/defaultTokens.d.ts.map +1 -1
- package/dist/theme/defaultTokens.js.map +1 -1
- package/dist/theme/index.d.ts +1 -4
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -4
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/public.d.ts +5 -0
- package/dist/theme/public.d.ts.map +1 -0
- package/dist/theme/public.js +5 -0
- package/dist/theme/public.js.map +1 -0
- package/dist/theme/resolveGlobalTokens.d.ts +1 -1
- package/dist/theme/resolveGlobalTokens.d.ts.map +1 -1
- package/dist/theme/resolveGlobalTokens.js.map +1 -1
- package/dist/theme/resolveRoleSemantics.d.ts +19 -0
- package/dist/theme/resolveRoleSemantics.d.ts.map +1 -0
- package/dist/theme/resolveRoleSemantics.js +29 -0
- package/dist/theme/resolveRoleSemantics.js.map +1 -0
- package/dist/theme/resolveSurfaceSemanticModel.d.ts +16 -0
- package/dist/theme/resolveSurfaceSemanticModel.d.ts.map +1 -0
- package/dist/theme/resolveSurfaceSemanticModel.js +128 -0
- package/dist/theme/resolveSurfaceSemanticModel.js.map +1 -0
- package/dist/theme/surfaceColorPolicy.d.ts +8 -0
- package/dist/theme/surfaceColorPolicy.d.ts.map +1 -0
- package/dist/theme/surfaceColorPolicy.js +8 -0
- package/dist/theme/surfaceColorPolicy.js.map +1 -0
- package/dist/theme/types.d.ts +52 -1
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/theme/types.js.map +1 -1
- package/package.json +9 -1
- package/src/components/navigation/helpers.test.ts +4 -4
- package/src/components/navigation/helpers.ts +17 -8
- package/src/index.test.ts +20 -0
- package/src/internal/resolvers/resolveInteractiveColors.test.ts +1 -0
- package/src/internal/resolvers/resolveInteractiveColors.ts +19 -13
- package/src/internal/resolvers/resolveSelectionControlColors.test.ts +3 -2
- package/src/internal/resolvers/resolveSelectionControlColors.ts +19 -10
- package/src/primitives/icon/PortableIcon.web.test.tsx +2 -7
- package/src/surfaceColor.test.ts +8 -10
- package/src/theme/colorEngine.test.ts +85 -34
- package/src/theme/colorEngine.ts +28 -147
- package/src/theme/createSurfaceColorDiagnosticCollector.ts +91 -0
- package/src/theme/createSurfaceSemanticPolicy.ts +174 -0
- package/src/theme/createTheme.ts +2 -1
- package/src/theme/defaultTokens.ts +4 -1
- package/src/theme/index.ts +1 -4
- package/src/theme/public.test.ts +43 -0
- package/src/theme/public.ts +4 -0
- package/src/theme/resolveGlobalTokens.ts +4 -1
- package/src/theme/resolveRoleSemantics.ts +96 -0
- package/src/theme/resolveSurfaceSemanticModel.ts +230 -0
- package/src/theme/surfaceColorPolicy.ts +7 -0
- package/src/theme/types.ts +65 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @ankhorage/surface
|
|
2
2
|
|
|
3
|
+
## 3.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 79e8f63: Add a pure `@ankhorage/surface/theme` package entrypoint so non-React tooling can resolve themes and inspect canonical color diagnostics without loading the component runtime.
|
|
8
|
+
|
|
9
|
+
## 3.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 6d870b5: Complete the resolved runtime color semantics with canonical status colors, accessible interaction states, and Color Theory selection and contrast diagnostics.
|
|
14
|
+
|
|
3
15
|
## 3.1.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,OAAO,EACjB,kBAAkB,CAAC,EAAE,kBAAkB,GACtC,kBAAkB,CAYpB;AAED,MAAM,WAAW,kCAAkC;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,YAAY,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GACN,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;CACzB,GACA,kCAAkC,
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,OAAO,EACjB,kBAAkB,CAAC,EAAE,kBAAkB,GACtC,kBAAkB,CAYpB;AAED,MAAM,WAAW,kCAAkC;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,YAAY,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GACN,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;CACzB,GACA,kCAAkC,CAwCpC"}
|
|
@@ -10,12 +10,20 @@ export function resolveNavigationAccessibilityState(active, disabled, accessibil
|
|
|
10
10
|
}
|
|
11
11
|
export function resolveNavigationItemPresentation(theme, { active, disabled, state, }) {
|
|
12
12
|
const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
if (disabled) {
|
|
14
|
+
return {
|
|
15
|
+
backgroundColor: theme.semantics.surface.disabled,
|
|
16
|
+
contentColor: theme.semantics.content.disabled,
|
|
17
|
+
opacity: 1,
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
const contentColor = active
|
|
21
|
+
? interactionState.pressed
|
|
22
|
+
? theme.semantics.action.primary.onSoftActiveText
|
|
23
|
+
: interactionState.hovered
|
|
24
|
+
? theme.semantics.action.primary.onSoftHoverText
|
|
25
|
+
: theme.semantics.action.primary.onSoftText
|
|
26
|
+
: theme.semantics.content.default;
|
|
19
27
|
if (active) {
|
|
20
28
|
return {
|
|
21
29
|
backgroundColor: interactionState.pressed
|
|
@@ -24,7 +32,7 @@ export function resolveNavigationItemPresentation(theme, { active, disabled, sta
|
|
|
24
32
|
? theme.semantics.action.primary.softHover
|
|
25
33
|
: theme.semantics.action.primary.softBg,
|
|
26
34
|
contentColor,
|
|
27
|
-
opacity,
|
|
35
|
+
opacity: 1,
|
|
28
36
|
};
|
|
29
37
|
}
|
|
30
38
|
return {
|
|
@@ -34,7 +42,7 @@ export function resolveNavigationItemPresentation(theme, { active, disabled, sta
|
|
|
34
42
|
? theme.semantics.neutral.surfaceHover
|
|
35
43
|
: 'transparent',
|
|
36
44
|
contentColor,
|
|
37
|
-
opacity,
|
|
45
|
+
opacity: 1,
|
|
38
46
|
};
|
|
39
47
|
}
|
|
40
48
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,mCAAmC,CACjD,MAAe,EACf,QAAiB,EACjB,kBAAuC;IAEvC,MAAM,QAAQ,GAAuB,EAAE,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,CAAC;IAEvE,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAQD,MAAM,UAAU,iCAAiC,CAC/C,KAAmB,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GAKN;IAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzF,
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/navigation/helpers.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,mCAAmC,CACjD,MAAe,EACf,QAAiB,EACjB,kBAAuC;IAEvC,MAAM,QAAQ,GAAuB,EAAE,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,CAAC;IAEvE,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAQD,MAAM,UAAU,iCAAiC,CAC/C,KAAmB,EACnB,EACE,MAAM,EACN,QAAQ,EACR,KAAK,GAKN;IAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YACjD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC9C,OAAO,EAAE,CAAC;SACX,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,MAAM;QACzB,CAAC,CAAC,gBAAgB,CAAC,OAAO;YACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB;YACjD,CAAC,CAAC,gBAAgB,CAAC,OAAO;gBACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe;gBAChD,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU;QAC/C,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;IAEpC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO;YACL,eAAe,EAAE,gBAAgB,CAAC,OAAO;gBACvC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU;gBAC3C,CAAC,CAAC,gBAAgB,CAAC,OAAO;oBACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS;oBAC1C,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;YAC3C,YAAY;YACZ,OAAO,EAAE,CAAC;SACX,CAAC;IACJ,CAAC;IAED,OAAO;QACL,eAAe,EAAE,gBAAgB,CAAC,OAAO;YACvC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;YACvC,CAAC,CAAC,gBAAgB,CAAC,OAAO;gBACxB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;gBACtC,CAAC,CAAC,aAAa;QACnB,YAAY;QACZ,OAAO,EAAE,CAAC;KACX,CAAC;AACJ,CAAC","sourcesContent":["import type { AccessibilityState } from 'react-native';\n\nimport type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';\nimport type { SurfaceTheme } from '../../theme/types';\n\nexport function resolveNavigationAccessibilityState(\n active: boolean,\n disabled: boolean,\n accessibilityState?: AccessibilityState,\n): AccessibilityState {\n const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };\n\n if (active) {\n resolved.selected = true;\n }\n\n if (disabled) {\n resolved.disabled = true;\n }\n\n return resolved;\n}\n\nexport interface ResolvedNavigationItemPresentation {\n backgroundColor: string;\n contentColor: string;\n opacity: number;\n}\n\nexport function resolveNavigationItemPresentation(\n theme: SurfaceTheme,\n {\n active,\n disabled,\n state,\n }: {\n active: boolean;\n disabled: boolean;\n state: InteractionState;\n },\n): ResolvedNavigationItemPresentation {\n const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;\n\n if (disabled) {\n return {\n backgroundColor: theme.semantics.surface.disabled,\n contentColor: theme.semantics.content.disabled,\n opacity: 1,\n };\n }\n\n const contentColor = active\n ? interactionState.pressed\n ? theme.semantics.action.primary.onSoftActiveText\n : interactionState.hovered\n ? theme.semantics.action.primary.onSoftHoverText\n : theme.semantics.action.primary.onSoftText\n : theme.semantics.content.default;\n\n if (active) {\n return {\n backgroundColor: interactionState.pressed\n ? theme.semantics.action.primary.softActive\n : interactionState.hovered\n ? theme.semantics.action.primary.softHover\n : theme.semantics.action.primary.softBg,\n contentColor,\n opacity: 1,\n };\n }\n\n return {\n backgroundColor: interactionState.pressed\n ? theme.semantics.neutral.surfaceActive\n : interactionState.hovered\n ? theme.semantics.neutral.surfaceHover\n : 'transparent',\n contentColor,\n opacity: 1,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveInteractiveColors.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveInteractiveColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,YAAY,EACnB,EACE,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;CACzB,GACA,yBAAyB,
|
|
1
|
+
{"version":3,"file":"resolveInteractiveColors.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveInteractiveColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,YAAY,EACnB,EACE,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;CACzB,GACA,yBAAyB,CA8D3B;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,GACrB,yBAAyB,GAAG;IAAE,gBAAgB,EAAE,MAAM,CAAA;CAAE,CA6C1D"}
|
|
@@ -2,10 +2,9 @@ import { resolveSurfaceColor } from './resolveSurfaceColor';
|
|
|
2
2
|
export function resolveButtonColors(theme, { variant, color, state, }) {
|
|
3
3
|
if (state.disabled) {
|
|
4
4
|
return {
|
|
5
|
-
backgroundColor: theme.semantics.
|
|
6
|
-
borderColor: theme.semantics.
|
|
7
|
-
contentColor: theme.semantics.content.
|
|
8
|
-
opacity: 0.72,
|
|
5
|
+
backgroundColor: theme.semantics.surface.disabled,
|
|
6
|
+
borderColor: theme.semantics.border.subtle,
|
|
7
|
+
contentColor: theme.semantics.content.disabled,
|
|
9
8
|
};
|
|
10
9
|
}
|
|
11
10
|
const semanticTone = resolveSurfaceColor(theme, color);
|
|
@@ -18,7 +17,7 @@ export function resolveButtonColors(theme, { variant, color, state, }) {
|
|
|
18
17
|
? semanticTone.softHover
|
|
19
18
|
: 'transparent',
|
|
20
19
|
borderColor: semanticTone.outline,
|
|
21
|
-
contentColor: semanticTone.
|
|
20
|
+
contentColor: semanticTone.onSurfaceText,
|
|
22
21
|
};
|
|
23
22
|
case 'ghost':
|
|
24
23
|
return {
|
|
@@ -28,7 +27,7 @@ export function resolveButtonColors(theme, { variant, color, state, }) {
|
|
|
28
27
|
? semanticTone.softHover
|
|
29
28
|
: 'transparent',
|
|
30
29
|
borderColor: 'transparent',
|
|
31
|
-
contentColor: semanticTone.
|
|
30
|
+
contentColor: semanticTone.onSurfaceText,
|
|
32
31
|
};
|
|
33
32
|
case 'soft':
|
|
34
33
|
return {
|
|
@@ -38,7 +37,11 @@ export function resolveButtonColors(theme, { variant, color, state, }) {
|
|
|
38
37
|
? semanticTone.softHover
|
|
39
38
|
: semanticTone.softBg,
|
|
40
39
|
borderColor: 'transparent',
|
|
41
|
-
contentColor:
|
|
40
|
+
contentColor: state.pressed
|
|
41
|
+
? semanticTone.onSoftActiveText
|
|
42
|
+
: state.hovered
|
|
43
|
+
? semanticTone.onSoftHoverText
|
|
44
|
+
: semanticTone.onSoftText,
|
|
42
45
|
};
|
|
43
46
|
case 'solid':
|
|
44
47
|
default:
|
|
@@ -49,18 +52,21 @@ export function resolveButtonColors(theme, { variant, color, state, }) {
|
|
|
49
52
|
? semanticTone.hover
|
|
50
53
|
: semanticTone.base,
|
|
51
54
|
borderColor: semanticTone.base,
|
|
52
|
-
contentColor:
|
|
55
|
+
contentColor: state.pressed
|
|
56
|
+
? semanticTone.onStrongText
|
|
57
|
+
: state.hovered
|
|
58
|
+
? semanticTone.onHoverText
|
|
59
|
+
: semanticTone.onSolidText,
|
|
53
60
|
};
|
|
54
61
|
}
|
|
55
62
|
}
|
|
56
63
|
export function resolveInputColors(theme, fieldState) {
|
|
57
64
|
if (fieldState.disabled) {
|
|
58
65
|
return {
|
|
59
|
-
backgroundColor: theme.semantics.surface.
|
|
60
|
-
borderColor: theme.semantics.border.
|
|
61
|
-
contentColor: theme.semantics.content.
|
|
62
|
-
placeholderColor: theme.semantics.content.
|
|
63
|
-
opacity: 0.72,
|
|
66
|
+
backgroundColor: theme.semantics.surface.disabled,
|
|
67
|
+
borderColor: theme.semantics.border.subtle,
|
|
68
|
+
contentColor: theme.semantics.content.disabled,
|
|
69
|
+
placeholderColor: theme.semantics.content.disabled,
|
|
64
70
|
};
|
|
65
71
|
}
|
|
66
72
|
if (fieldState.invalid) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveInteractiveColors.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveInteractiveColors.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAW5D,MAAM,UAAU,mBAAmB,CACjC,KAAmB,EACnB,EACE,OAAO,EACP,KAAK,EACL,KAAK,GAKN;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"resolveInteractiveColors.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveInteractiveColors.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAW5D,MAAM,UAAU,mBAAmB,CACjC,KAAmB,EACnB,EACE,OAAO,EACP,KAAK,EACL,KAAK,GAKN;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YACjD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM;YAC1C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;SAC/C,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEvD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO;gBACL,eAAe,EAAE,KAAK,CAAC,OAAO;oBAC5B,CAAC,CAAC,YAAY,CAAC,UAAU;oBACzB,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,SAAS;wBACxB,CAAC,CAAC,aAAa;gBACnB,WAAW,EAAE,YAAY,CAAC,OAAO;gBACjC,YAAY,EAAE,YAAY,CAAC,aAAa;aACzC,CAAC;QACJ,KAAK,OAAO;YACV,OAAO;gBACL,eAAe,EAAE,KAAK,CAAC,OAAO;oBAC5B,CAAC,CAAC,YAAY,CAAC,UAAU;oBACzB,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,SAAS;wBACxB,CAAC,CAAC,aAAa;gBACnB,WAAW,EAAE,aAAa;gBAC1B,YAAY,EAAE,YAAY,CAAC,aAAa;aACzC,CAAC;QACJ,KAAK,MAAM;YACT,OAAO;gBACL,eAAe,EAAE,KAAK,CAAC,OAAO;oBAC5B,CAAC,CAAC,YAAY,CAAC,UAAU;oBACzB,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,SAAS;wBACxB,CAAC,CAAC,YAAY,CAAC,MAAM;gBACzB,WAAW,EAAE,aAAa;gBAC1B,YAAY,EAAE,KAAK,CAAC,OAAO;oBACzB,CAAC,CAAC,YAAY,CAAC,gBAAgB;oBAC/B,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,eAAe;wBAC9B,CAAC,CAAC,YAAY,CAAC,UAAU;aAC9B,CAAC;QACJ,KAAK,OAAO,CAAC;QACb;YACE,OAAO;gBACL,eAAe,EAAE,KAAK,CAAC,OAAO;oBAC5B,CAAC,CAAC,YAAY,CAAC,MAAM;oBACrB,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,KAAK;wBACpB,CAAC,CAAC,YAAY,CAAC,IAAI;gBACvB,WAAW,EAAE,YAAY,CAAC,IAAI;gBAC9B,YAAY,EAAE,KAAK,CAAC,OAAO;oBACzB,CAAC,CAAC,YAAY,CAAC,YAAY;oBAC3B,CAAC,CAAC,KAAK,CAAC,OAAO;wBACb,CAAC,CAAC,YAAY,CAAC,WAAW;wBAC1B,CAAC,CAAC,YAAY,CAAC,WAAW;aAC/B,CAAC;IACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,KAAmB,EACnB,UAAsB;IAEtB,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;QACxB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YACjD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM;YAC1C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC9C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;SACnD,CAAC;IACJ,CAAC;IAED,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;QACvB,OAAO;YACL,eAAe,EAAE,UAAU,CAAC,QAAQ;gBAClC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;gBAChC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YACnC,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;YAC5F,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAC7C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;SAChD,CAAC;IACJ,CAAC;IAED,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;QACvB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAChD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;YACzC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAC7C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;SAChD,CAAC;IACJ,CAAC;IAED,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;QACxB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;YAC/C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;YAC3C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAC7C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;SAChD,CAAC;IACJ,CAAC;IAED,OAAO;QACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QAChD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;QAC3C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QAC7C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;KAChD,CAAC;AACJ,CAAC","sourcesContent":["import type { SurfaceColor } from '../../surfaceColor';\nimport type { SurfaceTheme } from '../../theme/types';\nimport type { FieldState } from './resolveFieldState';\nimport type { InteractionState } from './resolveInteractiveState';\nimport { resolveSurfaceColor } from './resolveSurfaceColor';\n\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft';\n\nexport interface ResolvedInteractiveColors {\n backgroundColor: string;\n borderColor: string;\n contentColor: string;\n opacity?: number;\n}\n\nexport function resolveButtonColors(\n theme: SurfaceTheme,\n {\n variant,\n color,\n state,\n }: {\n variant: ButtonVariant;\n color: SurfaceColor;\n state: InteractionState;\n },\n): ResolvedInteractiveColors {\n if (state.disabled) {\n return {\n backgroundColor: theme.semantics.surface.disabled,\n borderColor: theme.semantics.border.subtle,\n contentColor: theme.semantics.content.disabled,\n };\n }\n\n const semanticTone = resolveSurfaceColor(theme, color);\n\n switch (variant) {\n case 'outline':\n return {\n backgroundColor: state.pressed\n ? semanticTone.softActive\n : state.hovered\n ? semanticTone.softHover\n : 'transparent',\n borderColor: semanticTone.outline,\n contentColor: semanticTone.onSurfaceText,\n };\n case 'ghost':\n return {\n backgroundColor: state.pressed\n ? semanticTone.softActive\n : state.hovered\n ? semanticTone.softHover\n : 'transparent',\n borderColor: 'transparent',\n contentColor: semanticTone.onSurfaceText,\n };\n case 'soft':\n return {\n backgroundColor: state.pressed\n ? semanticTone.softActive\n : state.hovered\n ? semanticTone.softHover\n : semanticTone.softBg,\n borderColor: 'transparent',\n contentColor: state.pressed\n ? semanticTone.onSoftActiveText\n : state.hovered\n ? semanticTone.onSoftHoverText\n : semanticTone.onSoftText,\n };\n case 'solid':\n default:\n return {\n backgroundColor: state.pressed\n ? semanticTone.strong\n : state.hovered\n ? semanticTone.hover\n : semanticTone.base,\n borderColor: semanticTone.base,\n contentColor: state.pressed\n ? semanticTone.onStrongText\n : state.hovered\n ? semanticTone.onHoverText\n : semanticTone.onSolidText,\n };\n }\n}\n\nexport function resolveInputColors(\n theme: SurfaceTheme,\n fieldState: FieldState,\n): ResolvedInteractiveColors & { placeholderColor: string } {\n if (fieldState.disabled) {\n return {\n backgroundColor: theme.semantics.surface.disabled,\n borderColor: theme.semantics.border.subtle,\n contentColor: theme.semantics.content.disabled,\n placeholderColor: theme.semantics.content.disabled,\n };\n }\n\n if (fieldState.invalid) {\n return {\n backgroundColor: fieldState.readOnly\n ? theme.semantics.surface.subtle\n : theme.semantics.surface.default,\n borderColor: fieldState.focused ? theme.semantics.error.base : theme.semantics.error.outline,\n contentColor: theme.semantics.content.default,\n placeholderColor: theme.semantics.content.muted,\n };\n }\n\n if (fieldState.focused) {\n return {\n backgroundColor: theme.semantics.surface.default,\n borderColor: theme.semantics.border.focus,\n contentColor: theme.semantics.content.default,\n placeholderColor: theme.semantics.content.muted,\n };\n }\n\n if (fieldState.readOnly) {\n return {\n backgroundColor: theme.semantics.surface.subtle,\n borderColor: theme.semantics.border.default,\n contentColor: theme.semantics.content.default,\n placeholderColor: theme.semantics.content.muted,\n };\n }\n\n return {\n backgroundColor: theme.semantics.surface.default,\n borderColor: theme.semantics.border.default,\n contentColor: theme.semantics.content.default,\n placeholderColor: theme.semantics.content.muted,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveSelectionControlColors.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,MAAM,WAAW,8BAA8B;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,YAAY,EACnB,EACE,KAAiB,EACjB,UAAU,EACV,OAAO,EACP,OAAe,EACf,OAAe,GAChB,EAAE;IACD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GACA,8BAA8B,
|
|
1
|
+
{"version":3,"file":"resolveSelectionControlColors.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,MAAM,WAAW,8BAA8B;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,YAAY,EACnB,EACE,KAAiB,EACjB,UAAU,EACV,OAAO,EACP,OAAe,EACf,OAAe,GAChB,EAAE;IACD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GACA,8BAA8B,CA4DhC"}
|
|
@@ -5,15 +5,12 @@ export function resolveSelectionControlColors(theme, { color = 'primary', fieldS
|
|
|
5
5
|
const isInteractiveReadOnly = fieldState.readOnly && !fieldState.disabled;
|
|
6
6
|
if (isMuted) {
|
|
7
7
|
return {
|
|
8
|
-
backgroundColor:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
labelColor: theme.semantics.content.muted,
|
|
14
|
-
trackColor: checked ? theme.semantics.neutral.surfaceActive : theme.semantics.neutral.border,
|
|
8
|
+
backgroundColor: theme.semantics.surface.disabled,
|
|
9
|
+
borderColor: theme.semantics.border.subtle,
|
|
10
|
+
indicatorColor: checked ? theme.semantics.content.disabled : 'transparent',
|
|
11
|
+
labelColor: theme.semantics.content.disabled,
|
|
12
|
+
trackColor: theme.semantics.surface.disabled,
|
|
15
13
|
thumbColor: theme.semantics.surface.default,
|
|
16
|
-
opacity: 0.72,
|
|
17
14
|
};
|
|
18
15
|
}
|
|
19
16
|
const uncheckedBorderColor = fieldState.invalid
|
|
@@ -39,12 +36,24 @@ export function resolveSelectionControlColors(theme, { color = 'primary', fieldS
|
|
|
39
36
|
return {
|
|
40
37
|
backgroundColor: checked ? checkedBackgroundColor : uncheckedBackgroundColor,
|
|
41
38
|
borderColor: checked ? semanticTone.base : uncheckedBorderColor,
|
|
42
|
-
indicatorColor: checked
|
|
39
|
+
indicatorColor: checked
|
|
40
|
+
? pressed
|
|
41
|
+
? semanticTone.onStrongText
|
|
42
|
+
: hovered
|
|
43
|
+
? semanticTone.onHoverText
|
|
44
|
+
: semanticTone.onSolidText
|
|
45
|
+
: 'transparent',
|
|
43
46
|
labelColor: isInteractiveReadOnly
|
|
44
47
|
? theme.semantics.content.muted
|
|
45
48
|
: theme.semantics.content.default,
|
|
46
49
|
trackColor: checked ? checkedTrackColor : uncheckedBorderColor,
|
|
47
|
-
thumbColor: checked
|
|
50
|
+
thumbColor: checked
|
|
51
|
+
? pressed
|
|
52
|
+
? semanticTone.onStrongText
|
|
53
|
+
: hovered
|
|
54
|
+
? semanticTone.onHoverText
|
|
55
|
+
: semanticTone.onSolidText
|
|
56
|
+
: theme.semantics.surface.default,
|
|
48
57
|
opacity: isInteractiveReadOnly ? 0.88 : 1,
|
|
49
58
|
};
|
|
50
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveSelectionControlColors.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlColors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAY5D,MAAM,UAAU,6BAA6B,CAC3C,KAAmB,EACnB,EACE,KAAK,GAAG,SAAS,EACjB,UAAU,EACV,OAAO,EACP,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,GAOhB;IAED,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACtF,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC;IACpC,MAAM,qBAAqB,GAAG,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAE1E,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO;YACL,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"resolveSelectionControlColors.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveSelectionControlColors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAY5D,MAAM,UAAU,6BAA6B,CAC3C,KAAmB,EACnB,EACE,KAAK,GAAG,SAAS,EACjB,UAAU,EACV,OAAO,EACP,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,GAOhB;IAED,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACtF,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC;IACpC,MAAM,qBAAqB,GAAG,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAE1E,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YACjD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM;YAC1C,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa;YAC1E,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC5C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC5C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;SAC5C,CAAC;IACJ,CAAC;IAED,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO;QAC7C,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;QAC/B,CAAC,CAAC,UAAU,CAAC,OAAO;YAClB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;YAC9B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;IACpC,MAAM,wBAAwB,GAAG,OAAO;QACtC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;QACvC,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;YACtC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;IACtC,MAAM,sBAAsB,GAAG,OAAO;QACpC,CAAC,CAAC,YAAY,CAAC,MAAM;QACrB,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,YAAY,CAAC,KAAK;YACpB,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC;IACxB,MAAM,iBAAiB,GAAG,OAAO;QAC/B,CAAC,CAAC,YAAY,CAAC,MAAM;QACrB,CAAC,CAAC,OAAO;YACP,CAAC,CAAC,YAAY,CAAC,KAAK;YACpB,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC;IAExB,OAAO;QACL,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,wBAAwB;QAC5E,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB;QAC/D,cAAc,EAAE,OAAO;YACrB,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,YAAY,CAAC,YAAY;gBAC3B,CAAC,CAAC,OAAO;oBACP,CAAC,CAAC,YAAY,CAAC,WAAW;oBAC1B,CAAC,CAAC,YAAY,CAAC,WAAW;YAC9B,CAAC,CAAC,aAAa;QACjB,UAAU,EAAE,qBAAqB;YAC/B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YAC/B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACnC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB;QAC9D,UAAU,EAAE,OAAO;YACjB,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,YAAY,CAAC,YAAY;gBAC3B,CAAC,CAAC,OAAO;oBACP,CAAC,CAAC,YAAY,CAAC,WAAW;oBAC1B,CAAC,CAAC,YAAY,CAAC,WAAW;YAC9B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACnC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAC1C,CAAC;AACJ,CAAC","sourcesContent":["import type { SurfaceColor } from '../../surfaceColor';\nimport type { SurfaceTheme } from '../../theme/types';\nimport type { FieldState } from './resolveFieldState';\nimport { resolveSurfaceColor } from './resolveSurfaceColor';\n\nexport interface ResolvedSelectionControlColors {\n backgroundColor: string;\n borderColor: string;\n indicatorColor: string;\n labelColor: string;\n trackColor: string;\n thumbColor: string;\n opacity?: number;\n}\n\nexport function resolveSelectionControlColors(\n theme: SurfaceTheme,\n {\n color = 'primary',\n fieldState,\n checked,\n hovered = false,\n pressed = false,\n }: {\n color?: SurfaceColor;\n fieldState: FieldState;\n checked: boolean;\n hovered?: boolean;\n pressed?: boolean;\n },\n): ResolvedSelectionControlColors {\n const semanticTone = resolveSurfaceColor(theme, fieldState.invalid ? 'error' : color);\n const isMuted = fieldState.disabled;\n const isInteractiveReadOnly = fieldState.readOnly && !fieldState.disabled;\n\n if (isMuted) {\n return {\n backgroundColor: theme.semantics.surface.disabled,\n borderColor: theme.semantics.border.subtle,\n indicatorColor: checked ? theme.semantics.content.disabled : 'transparent',\n labelColor: theme.semantics.content.disabled,\n trackColor: theme.semantics.surface.disabled,\n thumbColor: theme.semantics.surface.default,\n };\n }\n\n const uncheckedBorderColor = fieldState.invalid\n ? theme.semantics.error.outline\n : fieldState.focused\n ? theme.semantics.border.focus\n : theme.semantics.border.strong;\n const uncheckedBackgroundColor = pressed\n ? theme.semantics.neutral.surfaceActive\n : hovered\n ? theme.semantics.neutral.surfaceHover\n : theme.semantics.surface.default;\n const checkedBackgroundColor = pressed\n ? semanticTone.strong\n : hovered\n ? semanticTone.hover\n : semanticTone.base;\n const checkedTrackColor = pressed\n ? semanticTone.strong\n : hovered\n ? semanticTone.hover\n : semanticTone.base;\n\n return {\n backgroundColor: checked ? checkedBackgroundColor : uncheckedBackgroundColor,\n borderColor: checked ? semanticTone.base : uncheckedBorderColor,\n indicatorColor: checked\n ? pressed\n ? semanticTone.onStrongText\n : hovered\n ? semanticTone.onHoverText\n : semanticTone.onSolidText\n : 'transparent',\n labelColor: isInteractiveReadOnly\n ? theme.semantics.content.muted\n : theme.semantics.content.default,\n trackColor: checked ? checkedTrackColor : uncheckedBorderColor,\n thumbColor: checked\n ? pressed\n ? semanticTone.onStrongText\n : hovered\n ? semanticTone.onHoverText\n : semanticTone.onSolidText\n : theme.semantics.surface.default,\n opacity: isInteractiveReadOnly ? 0.88 : 1,\n };\n}\n"]}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import type { GeneratedThemeModeColors, GeneratedThemeSwatches, HexColor, SemanticColorReferenceMap, SemanticColorToken } from '@ankhorage/color-theory';
|
|
1
|
+
import type { GeneratedThemeModeColors, GeneratedThemeSwatches, HexColor, SemanticColorReferenceMap, SemanticColorToken, ThemeColorMode } from '@ankhorage/color-theory';
|
|
2
2
|
import type { ThemeConfig } from '@ankhorage/contracts';
|
|
3
|
-
import type { ThemeSemantics, ThemeTokens } from './types';
|
|
3
|
+
import type { SurfaceColorDiagnostics, ThemeSemantics, ThemeTokens } from './types';
|
|
4
4
|
/**
|
|
5
5
|
* Surface semantic resolver: maps color-theory SemanticColorToken references
|
|
6
6
|
* to hex values from the generated swatches.
|
|
7
7
|
*/
|
|
8
8
|
export type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;
|
|
9
9
|
export declare function resolveSemanticColors(generated: GeneratedThemeModeColors, references: SemanticColorReferenceMap): SurfaceSemanticColors;
|
|
10
|
-
export declare function generatePalette(config: ThemeConfig, mode?:
|
|
10
|
+
export declare function generatePalette(config: ThemeConfig, mode?: ThemeColorMode): {
|
|
11
11
|
colors: ThemeTokens['colors'];
|
|
12
12
|
swatches: GeneratedThemeSwatches;
|
|
13
13
|
semantics: ThemeSemantics;
|
|
14
|
+
colorDiagnostics: SurfaceColorDiagnostics;
|
|
14
15
|
};
|
|
15
16
|
//# sourceMappingURL=colorEngine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorEngine.d.ts","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"colorEngine.d.ts","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAOjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEpF;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAEzE,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,wBAAwB,EACnC,UAAU,EAAE,yBAAyB,GACpC,qBAAqB,CAUvB;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,cAAwB,GAC7B;IACD,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,SAAS,EAAE,cAAc,CAAC;IAC1B,gBAAgB,EAAE,uBAAuB,CAAC;CAC3C,CA0CA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DARK_SEMANTIC_COLOR_REFERENCES, generateThemeModeColors, LIGHT_SEMANTIC_COLOR_REFERENCES, parseHexColorOrThrow, } from '@ankhorage/color-theory';
|
|
2
|
+
import { resolveSurfaceSemanticModel } from './resolveSurfaceSemanticModel';
|
|
2
3
|
export function resolveSemanticColors(generated, references) {
|
|
3
4
|
return Object.fromEntries(Object.entries(references).map(([token, ref]) => {
|
|
4
5
|
const swatch = generated.swatches[ref.role];
|
|
@@ -8,119 +9,33 @@ export function resolveSemanticColors(generated, references) {
|
|
|
8
9
|
return [token, swatch[ref.step]];
|
|
9
10
|
}));
|
|
10
11
|
}
|
|
11
|
-
function buildNeutralSemantics(neutralSwatch, isDark) {
|
|
12
|
-
if (isDark) {
|
|
13
|
-
return {
|
|
14
|
-
bg: neutralSwatch[950],
|
|
15
|
-
bgSubtle: neutralSwatch[900],
|
|
16
|
-
surface: neutralSwatch[900],
|
|
17
|
-
surfaceHover: neutralSwatch[800],
|
|
18
|
-
surfaceActive: neutralSwatch[700],
|
|
19
|
-
border: neutralSwatch[800],
|
|
20
|
-
borderStrong: neutralSwatch[600],
|
|
21
|
-
divider: neutralSwatch[800],
|
|
22
|
-
text: neutralSwatch[50],
|
|
23
|
-
textMuted: neutralSwatch[200],
|
|
24
|
-
textSubtle: neutralSwatch[300],
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
return {
|
|
28
|
-
bg: neutralSwatch[50],
|
|
29
|
-
bgSubtle: neutralSwatch[100],
|
|
30
|
-
surface: neutralSwatch[100],
|
|
31
|
-
surfaceHover: neutralSwatch[200],
|
|
32
|
-
surfaceActive: neutralSwatch[300],
|
|
33
|
-
border: neutralSwatch[200],
|
|
34
|
-
borderStrong: neutralSwatch[300],
|
|
35
|
-
divider: neutralSwatch[200],
|
|
36
|
-
text: neutralSwatch[900],
|
|
37
|
-
textMuted: neutralSwatch[700],
|
|
38
|
-
textSubtle: neutralSwatch[600],
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
function buildRoleSemantics(swatch, isDark) {
|
|
42
|
-
const base = swatch[500];
|
|
43
|
-
const { foreground: onSolidText } = getReadableForeground(base);
|
|
44
|
-
if (isDark) {
|
|
45
|
-
return {
|
|
46
|
-
base,
|
|
47
|
-
hover: swatch[400],
|
|
48
|
-
strong: swatch[300],
|
|
49
|
-
softBg: swatch[900],
|
|
50
|
-
softHover: swatch[800],
|
|
51
|
-
softActive: swatch[700],
|
|
52
|
-
outline: swatch[500],
|
|
53
|
-
onSolidText,
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
return {
|
|
57
|
-
base,
|
|
58
|
-
hover: swatch[600],
|
|
59
|
-
strong: swatch[700],
|
|
60
|
-
softBg: swatch[100],
|
|
61
|
-
softHover: swatch[200],
|
|
62
|
-
softActive: swatch[300],
|
|
63
|
-
outline: swatch[400],
|
|
64
|
-
onSolidText,
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
12
|
export function generatePalette(config, mode = 'light') {
|
|
68
13
|
const modeConfig = mode === 'dark' ? config.dark : config.light;
|
|
69
14
|
const isDark = mode === 'dark';
|
|
70
|
-
// Throws deterministically on invalid primary color
|
|
71
15
|
parseHexColorOrThrow(modeConfig.primaryColor);
|
|
72
16
|
const generated = generateThemeModeColors(modeConfig);
|
|
73
17
|
const { swatches } = generated;
|
|
74
|
-
const
|
|
75
|
-
const
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
const
|
|
83
|
-
const success = buildRoleSemantics(semanticStatusSwatches.success, isDark);
|
|
84
|
-
const warning = buildRoleSemantics(semanticStatusSwatches.warning, isDark);
|
|
85
|
-
// Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.
|
|
86
|
-
const error = danger;
|
|
87
|
-
const info = buildRoleSemantics(secondarySwatch, isDark);
|
|
88
|
-
const inverseSurface = isDark ? neutralSwatch[50] : neutralSwatch[900];
|
|
89
|
-
const inverseOnSurface = isDark ? neutralSwatch[900] : neutralSwatch[50];
|
|
90
|
-
const surfaceSemantics = {
|
|
91
|
-
default: neutral.surface,
|
|
92
|
-
subtle: neutral.bgSubtle,
|
|
93
|
-
raised: neutral.surface,
|
|
94
|
-
inverse: inverseSurface,
|
|
95
|
-
};
|
|
96
|
-
const content = {
|
|
97
|
-
default: neutral.text,
|
|
98
|
-
muted: neutral.textMuted,
|
|
99
|
-
subtle: neutral.textSubtle,
|
|
100
|
-
inverse: inverseOnSurface,
|
|
101
|
-
};
|
|
102
|
-
const border = {
|
|
103
|
-
default: neutral.border,
|
|
104
|
-
strong: neutral.borderStrong,
|
|
105
|
-
focus: brand.outline,
|
|
106
|
-
};
|
|
107
|
-
const action = {
|
|
108
|
-
primary: brand,
|
|
109
|
-
neutral: buildRoleSemantics(neutralSwatch, isDark),
|
|
110
|
-
danger,
|
|
111
|
-
};
|
|
18
|
+
const references = isDark ? DARK_SEMANTIC_COLOR_REFERENCES : LIGHT_SEMANTIC_COLOR_REFERENCES;
|
|
19
|
+
const resolved = resolveSemanticColors(generated, references);
|
|
20
|
+
const { semantics, colorDiagnostics } = resolveSurfaceSemanticModel({
|
|
21
|
+
generated,
|
|
22
|
+
mode,
|
|
23
|
+
references,
|
|
24
|
+
resolved,
|
|
25
|
+
});
|
|
26
|
+
const { border, content, error, info, neutral, success, surface, warning } = semantics;
|
|
112
27
|
const colors = {
|
|
113
|
-
primary:
|
|
114
|
-
secondary:
|
|
115
|
-
accent:
|
|
116
|
-
highlight:
|
|
117
|
-
tertiary:
|
|
118
|
-
quaternary:
|
|
28
|
+
primary: swatches.primary[500],
|
|
29
|
+
secondary: (swatches.secondary ?? swatches.primary)[500],
|
|
30
|
+
accent: (swatches.tertiary ?? swatches.primary)[500],
|
|
31
|
+
highlight: (swatches.quaternary ?? swatches.primary)[500],
|
|
32
|
+
tertiary: (swatches.tertiary ?? swatches.primary)[500],
|
|
33
|
+
quaternary: (swatches.quaternary ?? swatches.primary)[500],
|
|
119
34
|
background: neutral.bg,
|
|
120
|
-
surface:
|
|
121
|
-
text:
|
|
122
|
-
textSecondary:
|
|
123
|
-
border:
|
|
35
|
+
surface: surface.default,
|
|
36
|
+
text: content.default,
|
|
37
|
+
textSecondary: content.muted,
|
|
38
|
+
border: border.default,
|
|
124
39
|
error: error.base,
|
|
125
40
|
success: success.base,
|
|
126
41
|
warning: warning.base,
|
|
@@ -129,22 +44,8 @@ export function generatePalette(config, mode = 'light') {
|
|
|
129
44
|
return {
|
|
130
45
|
colors,
|
|
131
46
|
swatches,
|
|
132
|
-
semantics
|
|
133
|
-
|
|
134
|
-
brand,
|
|
135
|
-
secondary: buildRoleSemantics(secondarySwatch, isDark),
|
|
136
|
-
accent: buildRoleSemantics(tertiarySwatch, isDark),
|
|
137
|
-
highlight: buildRoleSemantics(quaternarySwatch, isDark),
|
|
138
|
-
danger,
|
|
139
|
-
success,
|
|
140
|
-
warning,
|
|
141
|
-
error,
|
|
142
|
-
info,
|
|
143
|
-
surface: surfaceSemantics,
|
|
144
|
-
content,
|
|
145
|
-
border,
|
|
146
|
-
action,
|
|
147
|
-
},
|
|
47
|
+
semantics,
|
|
48
|
+
colorDiagnostics,
|
|
148
49
|
};
|
|
149
50
|
}
|
|
150
51
|
//# sourceMappingURL=colorEngine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorEngine.js","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ColorSwatch,\n GeneratedThemeModeColors,\n GeneratedThemeSwatches,\n HexColor,\n SemanticColorReferenceMap,\n SemanticColorToken,\n} from '@ankhorage/color-theory';\nimport {\n createDefaultSemanticStatusSwatches,\n generateThemeModeColors,\n getReadableForeground,\n parseHexColorOrThrow,\n} from '@ankhorage/color-theory';\nimport type { ThemeConfig } from '@ankhorage/contracts';\n\nimport type {\n ActionSemantics,\n BorderSemantics,\n ContentSemantics,\n NeutralSemantics,\n RoleSemantics,\n SurfaceSemantics,\n ThemeSemantics,\n ThemeTokens,\n} from './types';\n\n/**\n * Surface semantic resolver: maps color-theory SemanticColorToken references\n * to hex values from the generated swatches.\n */\nexport type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;\n\nexport function resolveSemanticColors(\n generated: GeneratedThemeModeColors,\n references: SemanticColorReferenceMap,\n): SurfaceSemanticColors {\n return Object.fromEntries(\n Object.entries(references).map(([token, ref]) => {\n const swatch = generated.swatches[ref.role];\n if (!swatch) {\n throw new Error(`Missing swatch for role '${ref.role}' (token: '${token}')`);\n }\n return [token, swatch[ref.step]];\n }),\n ) as SurfaceSemanticColors;\n}\n\nfunction buildNeutralSemantics(neutralSwatch: ColorSwatch, isDark: boolean): NeutralSemantics {\n if (isDark) {\n return {\n bg: neutralSwatch[950],\n bgSubtle: neutralSwatch[900],\n surface: neutralSwatch[900],\n surfaceHover: neutralSwatch[800],\n surfaceActive: neutralSwatch[700],\n border: neutralSwatch[800],\n borderStrong: neutralSwatch[600],\n divider: neutralSwatch[800],\n text: neutralSwatch[50],\n textMuted: neutralSwatch[200],\n textSubtle: neutralSwatch[300],\n };\n }\n return {\n bg: neutralSwatch[50],\n bgSubtle: neutralSwatch[100],\n surface: neutralSwatch[100],\n surfaceHover: neutralSwatch[200],\n surfaceActive: neutralSwatch[300],\n border: neutralSwatch[200],\n borderStrong: neutralSwatch[300],\n divider: neutralSwatch[200],\n text: neutralSwatch[900],\n textMuted: neutralSwatch[700],\n textSubtle: neutralSwatch[600],\n };\n}\n\nfunction buildRoleSemantics(swatch: ColorSwatch, isDark: boolean): RoleSemantics {\n const base = swatch[500];\n const { foreground: onSolidText } = getReadableForeground(base);\n\n if (isDark) {\n return {\n base,\n hover: swatch[400],\n strong: swatch[300],\n softBg: swatch[900],\n softHover: swatch[800],\n softActive: swatch[700],\n outline: swatch[500],\n onSolidText,\n };\n }\n\n return {\n base,\n hover: swatch[600],\n strong: swatch[700],\n softBg: swatch[100],\n softHover: swatch[200],\n softActive: swatch[300],\n outline: swatch[400],\n onSolidText,\n };\n}\n\nexport function generatePalette(\n config: ThemeConfig,\n mode: 'light' | 'dark' = 'light',\n): {\n colors: ThemeTokens['colors'];\n swatches: GeneratedThemeSwatches;\n semantics: ThemeSemantics;\n} {\n const modeConfig = mode === 'dark' ? config.dark : config.light;\n const isDark = mode === 'dark';\n\n // Throws deterministically on invalid primary color\n parseHexColorOrThrow(modeConfig.primaryColor);\n\n const generated = generateThemeModeColors(modeConfig);\n const { swatches } = generated;\n const neutralSwatch = swatches.neutral;\n\n const neutral = buildNeutralSemantics(neutralSwatch, isDark);\n const brand = buildRoleSemantics(swatches.primary, isDark);\n\n // Fallback to primary swatch for missing ordinal roles\n const secondarySwatch = swatches.secondary ?? swatches.primary;\n const tertiarySwatch = swatches.tertiary ?? swatches.primary;\n const quaternarySwatch = swatches.quaternary ?? swatches.primary;\n\n const semanticStatusSwatches = createDefaultSemanticStatusSwatches().swatches;\n\n const danger = buildRoleSemantics(semanticStatusSwatches.danger, isDark);\n const success = buildRoleSemantics(semanticStatusSwatches.success, isDark);\n const warning = buildRoleSemantics(semanticStatusSwatches.warning, isDark);\n // Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.\n const error = danger;\n const info = buildRoleSemantics(secondarySwatch, isDark);\n const inverseSurface = isDark ? neutralSwatch[50] : neutralSwatch[900];\n const inverseOnSurface = isDark ? neutralSwatch[900] : neutralSwatch[50];\n\n const surfaceSemantics: SurfaceSemantics = {\n default: neutral.surface,\n subtle: neutral.bgSubtle,\n raised: neutral.surface,\n inverse: inverseSurface,\n };\n\n const content: ContentSemantics = {\n default: neutral.text,\n muted: neutral.textMuted,\n subtle: neutral.textSubtle,\n inverse: inverseOnSurface,\n };\n\n const border: BorderSemantics = {\n default: neutral.border,\n strong: neutral.borderStrong,\n focus: brand.outline,\n };\n\n const action: ActionSemantics = {\n primary: brand,\n neutral: buildRoleSemantics(neutralSwatch, isDark),\n danger,\n };\n\n const colors: ThemeTokens['colors'] = {\n primary: brand.base,\n secondary: secondarySwatch[500],\n accent: tertiarySwatch[500],\n highlight: quaternarySwatch[500],\n tertiary: tertiarySwatch[500],\n quaternary: quaternarySwatch[500],\n background: neutral.bg,\n surface: neutral.surface,\n text: neutral.text,\n textSecondary: neutral.textMuted,\n border: neutral.border,\n error: error.base,\n success: success.base,\n warning: warning.base,\n info: info.base,\n };\n\n return {\n colors,\n swatches,\n semantics: {\n neutral,\n brand,\n secondary: buildRoleSemantics(secondarySwatch, isDark),\n accent: buildRoleSemantics(tertiarySwatch, isDark),\n highlight: buildRoleSemantics(quaternarySwatch, isDark),\n danger,\n success,\n warning,\n error,\n info,\n surface: surfaceSemantics,\n content,\n border,\n action,\n },\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"colorEngine.js","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n GeneratedThemeModeColors,\n GeneratedThemeSwatches,\n HexColor,\n SemanticColorReferenceMap,\n SemanticColorToken,\n ThemeColorMode,\n} from '@ankhorage/color-theory';\nimport {\n DARK_SEMANTIC_COLOR_REFERENCES,\n generateThemeModeColors,\n LIGHT_SEMANTIC_COLOR_REFERENCES,\n parseHexColorOrThrow,\n} from '@ankhorage/color-theory';\nimport type { ThemeConfig } from '@ankhorage/contracts';\n\nimport { resolveSurfaceSemanticModel } from './resolveSurfaceSemanticModel';\nimport type { SurfaceColorDiagnostics, ThemeSemantics, ThemeTokens } from './types';\n\n/**\n * Surface semantic resolver: maps color-theory SemanticColorToken references\n * to hex values from the generated swatches.\n */\nexport type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;\n\nexport function resolveSemanticColors(\n generated: GeneratedThemeModeColors,\n references: SemanticColorReferenceMap,\n): SurfaceSemanticColors {\n return Object.fromEntries(\n Object.entries(references).map(([token, ref]) => {\n const swatch = generated.swatches[ref.role];\n if (!swatch) {\n throw new Error(`Missing swatch for role '${ref.role}' (token: '${token}')`);\n }\n return [token, swatch[ref.step]];\n }),\n ) as SurfaceSemanticColors;\n}\n\nexport function generatePalette(\n config: ThemeConfig,\n mode: ThemeColorMode = 'light',\n): {\n colors: ThemeTokens['colors'];\n swatches: GeneratedThemeSwatches;\n semantics: ThemeSemantics;\n colorDiagnostics: SurfaceColorDiagnostics;\n} {\n const modeConfig = mode === 'dark' ? config.dark : config.light;\n const isDark = mode === 'dark';\n\n parseHexColorOrThrow(modeConfig.primaryColor);\n\n const generated = generateThemeModeColors(modeConfig);\n const { swatches } = generated;\n const references = isDark ? DARK_SEMANTIC_COLOR_REFERENCES : LIGHT_SEMANTIC_COLOR_REFERENCES;\n const resolved = resolveSemanticColors(generated, references);\n const { semantics, colorDiagnostics } = resolveSurfaceSemanticModel({\n generated,\n mode,\n references,\n resolved,\n });\n const { border, content, error, info, neutral, success, surface, warning } = semantics;\n\n const colors: ThemeTokens['colors'] = {\n primary: swatches.primary[500],\n secondary: (swatches.secondary ?? swatches.primary)[500],\n accent: (swatches.tertiary ?? swatches.primary)[500],\n highlight: (swatches.quaternary ?? swatches.primary)[500],\n tertiary: (swatches.tertiary ?? swatches.primary)[500],\n quaternary: (swatches.quaternary ?? swatches.primary)[500],\n background: neutral.bg,\n surface: surface.default,\n text: content.default,\n textSecondary: content.muted,\n border: border.default,\n error: error.base,\n success: success.base,\n warning: warning.base,\n info: info.base,\n };\n\n return {\n colors,\n swatches,\n semantics,\n colorDiagnostics,\n };\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ColorContrastContext, ColorSelectionTarget, ColorSwatch, ColorSwatchTiePolicy, HexColor } from '@ankhorage/color-theory';
|
|
2
|
+
import type { SurfaceColorSelectionDiagnostic, SurfaceContrastDiagnostic } from './types';
|
|
3
|
+
/** Collect deterministic Color Theory evidence while Surface resolves semantic colors. */
|
|
4
|
+
export declare function createSurfaceColorDiagnosticCollector(): SurfaceColorDiagnosticCollector;
|
|
5
|
+
declare class SurfaceColorDiagnosticCollector {
|
|
6
|
+
readonly selections: SurfaceColorSelectionDiagnostic[];
|
|
7
|
+
readonly contrasts: SurfaceContrastDiagnostic[];
|
|
8
|
+
readonly measureForeground: (id: string, foreground: HexColor, background: HexColor, minimumContrast: number) => HexColor;
|
|
9
|
+
readonly measureSurface: (id: string, foreground: HexColor, background: HexColor, minimumContrast: number) => SurfaceContrastDiagnostic;
|
|
10
|
+
readonly selectColor: (id: string, swatch: ColorSwatch, target: ColorSelectionTarget, contexts: readonly ColorContrastContext[], tiePolicy: ColorSwatchTiePolicy) => HexColor;
|
|
11
|
+
readonly selectForeground: (id: string, background: HexColor, minimumContrast: number) => HexColor;
|
|
12
|
+
}
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=createSurfaceColorDiagnosticCollector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSurfaceColorDiagnosticCollector.d.ts","sourceRoot":"","sources":["../../src/theme/createSurfaceColorDiagnosticCollector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,WAAW,EACX,oBAAoB,EACpB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAOjC,OAAO,KAAK,EAAE,+BAA+B,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAE1F,0FAA0F;AAC1F,wBAAgB,qCAAqC,oCAEpD;AAED,cAAM,+BAA+B;IACnC,QAAQ,CAAC,UAAU,EAAE,+BAA+B,EAAE,CAAM;IAC5D,QAAQ,CAAC,SAAS,EAAE,yBAAyB,EAAE,CAAM;IAErD,QAAQ,CAAC,iBAAiB,GACxB,IAAI,MAAM,EACV,YAAY,QAAQ,EACpB,YAAY,QAAQ,EACpB,iBAAiB,MAAM,KACtB,QAAQ,CAWT;IAEF,QAAQ,CAAC,cAAc,GACrB,IAAI,MAAM,EACV,YAAY,QAAQ,EACpB,YAAY,QAAQ,EACpB,iBAAiB,MAAM,KACtB,yBAAyB,CAU1B;IAEF,QAAQ,CAAC,WAAW,GAClB,IAAI,MAAM,EACV,QAAQ,WAAW,EACnB,QAAQ,oBAAoB,EAC5B,UAAU,SAAS,oBAAoB,EAAE,EACzC,WAAW,oBAAoB,KAC9B,QAAQ,CAOT;IAEF,QAAQ,CAAC,gBAAgB,GACvB,IAAI,MAAM,EACV,YAAY,QAAQ,EACpB,iBAAiB,MAAM,KACtB,QAAQ,CAWT;CACH"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { getContrastRatio, getReadableForeground, selectColorSwatchStep, } from '@ankhorage/color-theory';
|
|
2
|
+
/** Collect deterministic Color Theory evidence while Surface resolves semantic colors. */
|
|
3
|
+
export function createSurfaceColorDiagnosticCollector() {
|
|
4
|
+
return new SurfaceColorDiagnosticCollector();
|
|
5
|
+
}
|
|
6
|
+
class SurfaceColorDiagnosticCollector {
|
|
7
|
+
selections = [];
|
|
8
|
+
contrasts = [];
|
|
9
|
+
measureForeground = (id, foreground, background, minimumContrast) => {
|
|
10
|
+
const contrast = getContrastRatio(foreground, background);
|
|
11
|
+
this.contrasts.push({
|
|
12
|
+
id,
|
|
13
|
+
foreground,
|
|
14
|
+
background,
|
|
15
|
+
contrast,
|
|
16
|
+
minimumContrast,
|
|
17
|
+
passes: contrast >= minimumContrast,
|
|
18
|
+
});
|
|
19
|
+
return foreground;
|
|
20
|
+
};
|
|
21
|
+
measureSurface = (id, foreground, background, minimumContrast) => {
|
|
22
|
+
const contrast = getContrastRatio(foreground, background);
|
|
23
|
+
return {
|
|
24
|
+
id,
|
|
25
|
+
foreground,
|
|
26
|
+
background,
|
|
27
|
+
contrast,
|
|
28
|
+
minimumContrast,
|
|
29
|
+
passes: contrast >= minimumContrast,
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
selectColor = (id, swatch, target, contexts, tiePolicy) => {
|
|
33
|
+
const result = selectColorSwatchStep(swatch, target, contexts, tiePolicy);
|
|
34
|
+
this.selections.push({ id, result });
|
|
35
|
+
if (!result.selected) {
|
|
36
|
+
throw new Error(`[surface] No '${id}' swatch step satisfies the required contrast.`);
|
|
37
|
+
}
|
|
38
|
+
return result.selected.hex;
|
|
39
|
+
};
|
|
40
|
+
selectForeground = (id, background, minimumContrast) => {
|
|
41
|
+
const selected = getReadableForeground(background);
|
|
42
|
+
this.contrasts.push({
|
|
43
|
+
id,
|
|
44
|
+
foreground: selected.foreground,
|
|
45
|
+
background,
|
|
46
|
+
contrast: selected.contrast,
|
|
47
|
+
minimumContrast,
|
|
48
|
+
passes: selected.contrast >= minimumContrast,
|
|
49
|
+
});
|
|
50
|
+
return selected.foreground;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=createSurfaceColorDiagnosticCollector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSurfaceColorDiagnosticCollector.js","sourceRoot":"","sources":["../../src/theme/createSurfaceColorDiagnosticCollector.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAIjC,0FAA0F;AAC1F,MAAM,UAAU,qCAAqC;IACnD,OAAO,IAAI,+BAA+B,EAAE,CAAC;AAC/C,CAAC;AAED,MAAM,+BAA+B;IAC1B,UAAU,GAAsC,EAAE,CAAC;IACnD,SAAS,GAAgC,EAAE,CAAC;IAE5C,iBAAiB,GAAG,CAC3B,EAAU,EACV,UAAoB,EACpB,UAAoB,EACpB,eAAuB,EACb,EAAE;QACZ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,EAAE;YACF,UAAU;YACV,UAAU;YACV,QAAQ;YACR,eAAe;YACf,MAAM,EAAE,QAAQ,IAAI,eAAe;SACpC,CAAC,CAAC;QACH,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IAEO,cAAc,GAAG,CACxB,EAAU,EACV,UAAoB,EACpB,UAAoB,EACpB,eAAuB,EACI,EAAE;QAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAC1D,OAAO;YACL,EAAE;YACF,UAAU;YACV,UAAU;YACV,QAAQ;YACR,eAAe;YACf,MAAM,EAAE,QAAQ,IAAI,eAAe;SACpC,CAAC;IACJ,CAAC,CAAC;IAEO,WAAW,GAAG,CACrB,EAAU,EACV,MAAmB,EACnB,MAA4B,EAC5B,QAAyC,EACzC,SAA+B,EACrB,EAAE;QACZ,MAAM,MAAM,GAAG,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QAC1E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CAAC,iBAAiB,EAAE,gDAAgD,CAAC,CAAC;QACvF,CAAC;QACD,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;IAC7B,CAAC,CAAC;IAEO,gBAAgB,GAAG,CAC1B,EAAU,EACV,UAAoB,EACpB,eAAuB,EACb,EAAE;QACZ,MAAM,QAAQ,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,EAAE;YACF,UAAU,EAAE,QAAQ,CAAC,UAAU;YAC/B,UAAU;YACV,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,eAAe;YACf,MAAM,EAAE,QAAQ,CAAC,QAAQ,IAAI,eAAe;SAC7C,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC,UAAU,CAAC;IAC7B,CAAC,CAAC;CACH","sourcesContent":["import type {\n ColorContrastContext,\n ColorSelectionTarget,\n ColorSwatch,\n ColorSwatchTiePolicy,\n HexColor,\n} from '@ankhorage/color-theory';\nimport {\n getContrastRatio,\n getReadableForeground,\n selectColorSwatchStep,\n} from '@ankhorage/color-theory';\n\nimport type { SurfaceColorSelectionDiagnostic, SurfaceContrastDiagnostic } from './types';\n\n/** Collect deterministic Color Theory evidence while Surface resolves semantic colors. */\nexport function createSurfaceColorDiagnosticCollector() {\n return new SurfaceColorDiagnosticCollector();\n}\n\nclass SurfaceColorDiagnosticCollector {\n readonly selections: SurfaceColorSelectionDiagnostic[] = [];\n readonly contrasts: SurfaceContrastDiagnostic[] = [];\n\n readonly measureForeground = (\n id: string,\n foreground: HexColor,\n background: HexColor,\n minimumContrast: number,\n ): HexColor => {\n const contrast = getContrastRatio(foreground, background);\n this.contrasts.push({\n id,\n foreground,\n background,\n contrast,\n minimumContrast,\n passes: contrast >= minimumContrast,\n });\n return foreground;\n };\n\n readonly measureSurface = (\n id: string,\n foreground: HexColor,\n background: HexColor,\n minimumContrast: number,\n ): SurfaceContrastDiagnostic => {\n const contrast = getContrastRatio(foreground, background);\n return {\n id,\n foreground,\n background,\n contrast,\n minimumContrast,\n passes: contrast >= minimumContrast,\n };\n };\n\n readonly selectColor = (\n id: string,\n swatch: ColorSwatch,\n target: ColorSelectionTarget,\n contexts: readonly ColorContrastContext[],\n tiePolicy: ColorSwatchTiePolicy,\n ): HexColor => {\n const result = selectColorSwatchStep(swatch, target, contexts, tiePolicy);\n this.selections.push({ id, result });\n if (!result.selected) {\n throw new Error(`[surface] No '${id}' swatch step satisfies the required contrast.`);\n }\n return result.selected.hex;\n };\n\n readonly selectForeground = (\n id: string,\n background: HexColor,\n minimumContrast: number,\n ): HexColor => {\n const selected = getReadableForeground(background);\n this.contrasts.push({\n id,\n foreground: selected.foreground,\n background,\n contrast: selected.contrast,\n minimumContrast,\n passes: selected.contrast >= minimumContrast,\n });\n return selected.foreground;\n };\n}\n"]}
|