@ankhorage/surface 3.1.3 → 3.2.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 +6 -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/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 +1 -1
- package/src/components/navigation/helpers.test.ts +4 -4
- package/src/components/navigation/helpers.ts +17 -8
- package/src/index.test.ts +12 -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/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
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ColorContrastContext, ColorSelectionTarget, ColorSwatch, ColorSwatchTiePolicy, HexColor, SemanticColorToken } from '@ankhorage/color-theory';
|
|
2
|
+
import type { ContentSemantics, NeutralSemantics, SurfaceContrastDiagnostic, SurfaceSemantics } from './types';
|
|
3
|
+
type ResolvedSemanticColors = Record<SemanticColorToken, HexColor>;
|
|
4
|
+
interface SurfaceSemanticMeasurements {
|
|
5
|
+
measureForeground: (id: string, foreground: HexColor, background: HexColor, minimumContrast: number) => HexColor;
|
|
6
|
+
measureSurface: (id: string, foreground: HexColor, background: HexColor, minimumContrast: number) => SurfaceContrastDiagnostic;
|
|
7
|
+
}
|
|
8
|
+
/** Create the canonical Surface policy for selecting and measuring semantic colors. */
|
|
9
|
+
export declare function createSurfaceSemanticPolicy(resolved: ResolvedSemanticColors, isDark: boolean, measurements: SurfaceSemanticMeasurements): SurfaceSemanticPolicy;
|
|
10
|
+
declare class SurfaceSemanticPolicy {
|
|
11
|
+
private readonly resolved;
|
|
12
|
+
private readonly isDark;
|
|
13
|
+
private readonly measurements;
|
|
14
|
+
readonly adjacentSurfaceContexts: readonly ColorContrastContext[];
|
|
15
|
+
readonly textSurfaceContexts: readonly ColorContrastContext[];
|
|
16
|
+
readonly tiePolicy: ColorSwatchTiePolicy;
|
|
17
|
+
constructor(resolved: ResolvedSemanticColors, isDark: boolean, measurements: SurfaceSemanticMeasurements);
|
|
18
|
+
buildNeutral(neutralSwatch: ColorSwatch): NeutralSemantics;
|
|
19
|
+
buildSurface(inverse: HexColor): SurfaceSemantics;
|
|
20
|
+
measureContent(content: ContentSemantics, surface: SurfaceSemantics): void;
|
|
21
|
+
measureSurfaceSeparation(surface: SurfaceSemantics): SurfaceContrastDiagnostic[];
|
|
22
|
+
neutralTarget(): ColorSelectionTarget;
|
|
23
|
+
roleTarget(): ColorSelectionTarget;
|
|
24
|
+
strongNeutralTarget(): ColorSelectionTarget;
|
|
25
|
+
textTarget(): ColorSelectionTarget;
|
|
26
|
+
private createSurfaceContexts;
|
|
27
|
+
private measureSurface;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
30
|
+
//# sourceMappingURL=createSurfaceSemanticPolicy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSurfaceSemanticPolicy.d.ts","sourceRoot":"","sources":["../../src/theme/createSurfaceSemanticPolicy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,WAAW,EACX,oBAAoB,EACpB,QAAQ,EACR,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,yBAAyB,EACzB,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,KAAK,sBAAsB,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAEnE,UAAU,2BAA2B;IACnC,iBAAiB,EAAE,CACjB,EAAE,EAAE,MAAM,EACV,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,MAAM,KACpB,QAAQ,CAAC;IACd,cAAc,EAAE,CACd,EAAE,EAAE,MAAM,EACV,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,MAAM,KACpB,yBAAyB,CAAC;CAChC;AAED,uFAAuF;AACvF,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,sBAAsB,EAChC,MAAM,EAAE,OAAO,EACf,YAAY,EAAE,2BAA2B,yBAG1C;AAED,cAAM,qBAAqB;IAMvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAP/B,QAAQ,CAAC,uBAAuB,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAClE,QAAQ,CAAC,mBAAmB,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC9D,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC;gBAGtB,QAAQ,EAAE,sBAAsB,EAChC,MAAM,EAAE,OAAO,EACf,YAAY,EAAE,2BAA2B;IAO5D,YAAY,CAAC,aAAa,EAAE,WAAW,GAAG,gBAAgB;IAkB1D,YAAY,CAAC,OAAO,EAAE,QAAQ,GAAG,gBAAgB;IAajD,cAAc,CAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IA4C1E,wBAAwB,CAAC,OAAO,EAAE,gBAAgB,GAAG,yBAAyB,EAAE;IAQhF,aAAa,IAAI,oBAAoB;IAIrC,UAAU,IAAI,oBAAoB;IAIlC,mBAAmB,IAAI,oBAAoB;IAI3C,UAAU,IAAI,oBAAoB;IAIlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,cAAc;CAQvB"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { parseHexColorOrThrow } from '@ankhorage/color-theory';
|
|
2
|
+
import { SURFACE_COLOR_POLICY } from './surfaceColorPolicy';
|
|
3
|
+
/** Create the canonical Surface policy for selecting and measuring semantic colors. */
|
|
4
|
+
export function createSurfaceSemanticPolicy(resolved, isDark, measurements) {
|
|
5
|
+
return new SurfaceSemanticPolicy(resolved, isDark, measurements);
|
|
6
|
+
}
|
|
7
|
+
class SurfaceSemanticPolicy {
|
|
8
|
+
resolved;
|
|
9
|
+
isDark;
|
|
10
|
+
measurements;
|
|
11
|
+
adjacentSurfaceContexts;
|
|
12
|
+
textSurfaceContexts;
|
|
13
|
+
tiePolicy;
|
|
14
|
+
constructor(resolved, isDark, measurements) {
|
|
15
|
+
this.resolved = resolved;
|
|
16
|
+
this.isDark = isDark;
|
|
17
|
+
this.measurements = measurements;
|
|
18
|
+
this.adjacentSurfaceContexts = this.createSurfaceContexts(SURFACE_COLOR_POLICY.uiContrast);
|
|
19
|
+
this.textSurfaceContexts = this.createSurfaceContexts(SURFACE_COLOR_POLICY.textContrast);
|
|
20
|
+
this.tiePolicy = isDark ? 'lower-step' : 'higher-step';
|
|
21
|
+
}
|
|
22
|
+
buildNeutral(neutralSwatch) {
|
|
23
|
+
return {
|
|
24
|
+
bg: this.resolved.background,
|
|
25
|
+
bgSubtle: this.resolved.surface,
|
|
26
|
+
surface: this.resolved.surface,
|
|
27
|
+
surfaceHover: this.isDark ? neutralSwatch[800] : neutralSwatch[200],
|
|
28
|
+
surfaceActive: this.isDark ? neutralSwatch[700] : neutralSwatch[300],
|
|
29
|
+
border: this.resolved.border,
|
|
30
|
+
borderStrong: this.isDark ? neutralSwatch[600] : neutralSwatch[300],
|
|
31
|
+
divider: this.resolved.divider,
|
|
32
|
+
text: this.resolved.text,
|
|
33
|
+
textMuted: this.resolved.textMuted,
|
|
34
|
+
textSubtle: this.isDark ? neutralSwatch[300] : neutralSwatch[600],
|
|
35
|
+
disabledBg: this.resolved.disabledBg,
|
|
36
|
+
disabledText: this.resolved.disabledText,
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
buildSurface(inverse) {
|
|
40
|
+
return {
|
|
41
|
+
default: this.resolved.surface,
|
|
42
|
+
subtle: this.resolved.background,
|
|
43
|
+
raised: this.resolved.surfaceRaised,
|
|
44
|
+
sunken: this.resolved.background,
|
|
45
|
+
overlay: this.resolved.surfaceRaised,
|
|
46
|
+
scrim: '#0000008f',
|
|
47
|
+
disabled: this.resolved.disabledBg,
|
|
48
|
+
inverse,
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
measureContent(content, surface) {
|
|
52
|
+
const pairs = [
|
|
53
|
+
[
|
|
54
|
+
'content.default/background',
|
|
55
|
+
content.default,
|
|
56
|
+
surface.sunken,
|
|
57
|
+
SURFACE_COLOR_POLICY.textContrast,
|
|
58
|
+
],
|
|
59
|
+
[
|
|
60
|
+
'content.default/surface',
|
|
61
|
+
content.default,
|
|
62
|
+
surface.default,
|
|
63
|
+
SURFACE_COLOR_POLICY.textContrast,
|
|
64
|
+
],
|
|
65
|
+
['content.muted/surface', content.muted, surface.default, SURFACE_COLOR_POLICY.textContrast],
|
|
66
|
+
[
|
|
67
|
+
'content.subtle/surface',
|
|
68
|
+
content.subtle,
|
|
69
|
+
surface.default,
|
|
70
|
+
SURFACE_COLOR_POLICY.textContrast,
|
|
71
|
+
],
|
|
72
|
+
[
|
|
73
|
+
'content.disabled/disabled',
|
|
74
|
+
content.disabled,
|
|
75
|
+
surface.disabled,
|
|
76
|
+
SURFACE_COLOR_POLICY.disabledContrast,
|
|
77
|
+
],
|
|
78
|
+
[
|
|
79
|
+
'content.inverse/inverse',
|
|
80
|
+
content.inverse,
|
|
81
|
+
surface.inverse,
|
|
82
|
+
SURFACE_COLOR_POLICY.textContrast,
|
|
83
|
+
],
|
|
84
|
+
];
|
|
85
|
+
for (const [id, foreground, background, minimumContrast] of pairs) {
|
|
86
|
+
this.measurements.measureForeground(id, parseHexColorOrThrow(foreground), parseHexColorOrThrow(background), minimumContrast);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
measureSurfaceSeparation(surface) {
|
|
90
|
+
return [
|
|
91
|
+
this.measureSurface('surface.default', surface.default),
|
|
92
|
+
this.measureSurface('surface.raised', surface.raised),
|
|
93
|
+
this.measureSurface('surface.disabled', surface.disabled),
|
|
94
|
+
];
|
|
95
|
+
}
|
|
96
|
+
neutralTarget() {
|
|
97
|
+
return { lightness: this.isDark ? 0.65 : 0.55, chroma: 0.02 };
|
|
98
|
+
}
|
|
99
|
+
roleTarget() {
|
|
100
|
+
return { lightness: this.isDark ? 0.65 : 0.5, chroma: 0.15 };
|
|
101
|
+
}
|
|
102
|
+
strongNeutralTarget() {
|
|
103
|
+
return { lightness: this.isDark ? 0.8 : 0.4, chroma: 0.02 };
|
|
104
|
+
}
|
|
105
|
+
textTarget() {
|
|
106
|
+
return { lightness: this.isDark ? 0.75 : 0.45, chroma: 0.15 };
|
|
107
|
+
}
|
|
108
|
+
createSurfaceContexts(minimumContrast) {
|
|
109
|
+
return [
|
|
110
|
+
{ id: 'background', against: this.resolved.background, minimumContrast },
|
|
111
|
+
{ id: 'surface', against: this.resolved.surface, minimumContrast },
|
|
112
|
+
];
|
|
113
|
+
}
|
|
114
|
+
measureSurface(id, foreground) {
|
|
115
|
+
return this.measurements.measureSurface(id, parseHexColorOrThrow(foreground), this.resolved.background, SURFACE_COLOR_POLICY.surfaceSeparation);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
//# sourceMappingURL=createSurfaceSemanticPolicy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createSurfaceSemanticPolicy.js","sourceRoot":"","sources":["../../src/theme/createSurfaceSemanticPolicy.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ColorContrastContext,\n ColorSelectionTarget,\n ColorSwatch,\n ColorSwatchTiePolicy,\n HexColor,\n SemanticColorToken,\n} from '@ankhorage/color-theory';\nimport { parseHexColorOrThrow } from '@ankhorage/color-theory';\n\nimport { SURFACE_COLOR_POLICY } from './surfaceColorPolicy';\nimport type {\n ContentSemantics,\n NeutralSemantics,\n SurfaceContrastDiagnostic,\n SurfaceSemantics,\n} from './types';\n\ntype ResolvedSemanticColors = Record<SemanticColorToken, HexColor>;\n\ninterface SurfaceSemanticMeasurements {\n measureForeground: (\n id: string,\n foreground: HexColor,\n background: HexColor,\n minimumContrast: number,\n ) => HexColor;\n measureSurface: (\n id: string,\n foreground: HexColor,\n background: HexColor,\n minimumContrast: number,\n ) => SurfaceContrastDiagnostic;\n}\n\n/** Create the canonical Surface policy for selecting and measuring semantic colors. */\nexport function createSurfaceSemanticPolicy(\n resolved: ResolvedSemanticColors,\n isDark: boolean,\n measurements: SurfaceSemanticMeasurements,\n) {\n return new SurfaceSemanticPolicy(resolved, isDark, measurements);\n}\n\nclass SurfaceSemanticPolicy {\n readonly adjacentSurfaceContexts: readonly ColorContrastContext[];\n readonly textSurfaceContexts: readonly ColorContrastContext[];\n readonly tiePolicy: ColorSwatchTiePolicy;\n\n constructor(\n private readonly resolved: ResolvedSemanticColors,\n private readonly isDark: boolean,\n private readonly measurements: SurfaceSemanticMeasurements,\n ) {\n this.adjacentSurfaceContexts = this.createSurfaceContexts(SURFACE_COLOR_POLICY.uiContrast);\n this.textSurfaceContexts = this.createSurfaceContexts(SURFACE_COLOR_POLICY.textContrast);\n this.tiePolicy = isDark ? 'lower-step' : 'higher-step';\n }\n\n buildNeutral(neutralSwatch: ColorSwatch): NeutralSemantics {\n return {\n bg: this.resolved.background,\n bgSubtle: this.resolved.surface,\n surface: this.resolved.surface,\n surfaceHover: this.isDark ? neutralSwatch[800] : neutralSwatch[200],\n surfaceActive: this.isDark ? neutralSwatch[700] : neutralSwatch[300],\n border: this.resolved.border,\n borderStrong: this.isDark ? neutralSwatch[600] : neutralSwatch[300],\n divider: this.resolved.divider,\n text: this.resolved.text,\n textMuted: this.resolved.textMuted,\n textSubtle: this.isDark ? neutralSwatch[300] : neutralSwatch[600],\n disabledBg: this.resolved.disabledBg,\n disabledText: this.resolved.disabledText,\n };\n }\n\n buildSurface(inverse: HexColor): SurfaceSemantics {\n return {\n default: this.resolved.surface,\n subtle: this.resolved.background,\n raised: this.resolved.surfaceRaised,\n sunken: this.resolved.background,\n overlay: this.resolved.surfaceRaised,\n scrim: '#0000008f',\n disabled: this.resolved.disabledBg,\n inverse,\n };\n }\n\n measureContent(content: ContentSemantics, surface: SurfaceSemantics): void {\n const pairs = [\n [\n 'content.default/background',\n content.default,\n surface.sunken,\n SURFACE_COLOR_POLICY.textContrast,\n ],\n [\n 'content.default/surface',\n content.default,\n surface.default,\n SURFACE_COLOR_POLICY.textContrast,\n ],\n ['content.muted/surface', content.muted, surface.default, SURFACE_COLOR_POLICY.textContrast],\n [\n 'content.subtle/surface',\n content.subtle,\n surface.default,\n SURFACE_COLOR_POLICY.textContrast,\n ],\n [\n 'content.disabled/disabled',\n content.disabled,\n surface.disabled,\n SURFACE_COLOR_POLICY.disabledContrast,\n ],\n [\n 'content.inverse/inverse',\n content.inverse,\n surface.inverse,\n SURFACE_COLOR_POLICY.textContrast,\n ],\n ] as const;\n for (const [id, foreground, background, minimumContrast] of pairs) {\n this.measurements.measureForeground(\n id,\n parseHexColorOrThrow(foreground),\n parseHexColorOrThrow(background),\n minimumContrast,\n );\n }\n }\n\n measureSurfaceSeparation(surface: SurfaceSemantics): SurfaceContrastDiagnostic[] {\n return [\n this.measureSurface('surface.default', surface.default),\n this.measureSurface('surface.raised', surface.raised),\n this.measureSurface('surface.disabled', surface.disabled),\n ];\n }\n\n neutralTarget(): ColorSelectionTarget {\n return { lightness: this.isDark ? 0.65 : 0.55, chroma: 0.02 };\n }\n\n roleTarget(): ColorSelectionTarget {\n return { lightness: this.isDark ? 0.65 : 0.5, chroma: 0.15 };\n }\n\n strongNeutralTarget(): ColorSelectionTarget {\n return { lightness: this.isDark ? 0.8 : 0.4, chroma: 0.02 };\n }\n\n textTarget(): ColorSelectionTarget {\n return { lightness: this.isDark ? 0.75 : 0.45, chroma: 0.15 };\n }\n\n private createSurfaceContexts(minimumContrast: number): readonly ColorContrastContext[] {\n return [\n { id: 'background', against: this.resolved.background, minimumContrast },\n { id: 'surface', against: this.resolved.surface, minimumContrast },\n ];\n }\n\n private measureSurface(id: string, foreground: string): SurfaceContrastDiagnostic {\n return this.measurements.measureSurface(\n id,\n parseHexColorOrThrow(foreground),\n this.resolved.background,\n SURFACE_COLOR_POLICY.surfaceSeparation,\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../src/theme/createTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,eAAO,MAAM,cAAc,EAAE,WAK5B,CAAC;AAcF,wBAAgB,WAAW,CACzB,MAAM,GAAE,WAA4B,EACpC,IAAI,GAAE,OAAO,GAAG,MAAgB,EAChC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAC3B,YAAY,
|
|
1
|
+
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../src/theme/createTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,eAAO,MAAM,cAAc,EAAE,WAK5B,CAAC;AAcF,wBAAgB,WAAW,CACzB,MAAM,GAAE,WAA4B,EACpC,IAAI,GAAE,OAAO,GAAG,MAAgB,EAChC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAC3B,YAAY,CAad"}
|
|
@@ -19,12 +19,13 @@ const ACTIVE_FONT_WEIGHTS = [
|
|
|
19
19
|
'900',
|
|
20
20
|
];
|
|
21
21
|
export function createTheme(config = DEFAULT_CONFIG, mode = 'light', activeFontId) {
|
|
22
|
-
const { colors, swatches, semantics } = generatePalette(config, mode);
|
|
22
|
+
const { colors, swatches, semantics, colorDiagnostics } = generatePalette(config, mode);
|
|
23
23
|
const theme = {
|
|
24
24
|
...resolveGlobalTokens(config.tokens),
|
|
25
25
|
colors,
|
|
26
26
|
swatches,
|
|
27
27
|
semantics,
|
|
28
|
+
colorDiagnostics,
|
|
28
29
|
config,
|
|
29
30
|
};
|
|
30
31
|
applyActiveFont(theme, activeFontId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["../../src/theme/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE;IAC5D,IAAI,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE;CAC5D,CAAC;AAEF,MAAM,mBAAmB,GAA0B;IACjD,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,MAAM,UAAU,WAAW,CACzB,SAAsB,cAAc,EACpC,OAAyB,OAAO,EAChC,YAA4B;IAE5B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["../../src/theme/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE;IAC5D,IAAI,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE;CAC5D,CAAC;AAEF,MAAM,mBAAmB,GAA0B;IACjD,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,MAAM,UAAU,WAAW,CACzB,SAAsB,cAAc,EACpC,OAAyB,OAAO,EAChC,YAA4B;IAE5B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACxF,MAAM,KAAK,GAAiB;QAC1B,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC;QACrC,MAAM;QACN,QAAQ;QACR,SAAS;QACT,gBAAgB;QAChB,MAAM;KACP,CAAC;IAEF,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACrC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,eAAe,CAAC,KAAmB,EAAE,YAAuC;IACnF,IAAI,CAAC,YAAY;QAAE,OAAO;IAE1B,MAAM,UAAU,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC9C,KAAK,MAAM,MAAM,IAAI,mBAAmB,EAAE,CAAC;QACzC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,UAAU,IAAI,MAAM,SAAS,CAAC;QACzE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,UAAU,IAAI,MAAM,QAAQ,CAAC;IAC1E,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,OAAO,KAAK;SACT,KAAK,CAAC,OAAO,CAAC;SACd,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAC3D,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC","sourcesContent":["import { generatePalette } from './colorEngine';\nimport { resolveGlobalTokens } from './resolveGlobalTokens';\nimport type { FontWeight, SurfaceTheme, ThemeConfig } from './types';\n\nexport { DEFAULT_TOKENS } from './defaultTokens';\n\nexport const DEFAULT_CONFIG: ThemeConfig = {\n id: 'default',\n name: 'Default',\n light: { primaryColor: '#3B82F6', harmony: 'monochromatic' },\n dark: { primaryColor: '#3B82F6', harmony: 'monochromatic' },\n};\n\nconst ACTIVE_FONT_WEIGHTS: readonly FontWeight[] = [\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n];\n\nexport function createTheme(\n config: ThemeConfig = DEFAULT_CONFIG,\n mode: 'light' | 'dark' = 'light',\n activeFontId?: string | null,\n): SurfaceTheme {\n const { colors, swatches, semantics, colorDiagnostics } = generatePalette(config, mode);\n const theme: SurfaceTheme = {\n ...resolveGlobalTokens(config.tokens),\n colors,\n swatches,\n semantics,\n colorDiagnostics,\n config,\n };\n\n applyActiveFont(theme, activeFontId);\n return theme;\n}\n\nfunction applyActiveFont(theme: SurfaceTheme, activeFontId: string | null | undefined): void {\n if (!activeFontId) return;\n\n const familyName = toPascalCase(activeFontId);\n for (const weight of ACTIVE_FONT_WEIGHTS) {\n theme.typography.fonts.normal[weight] = `${familyName}_${weight}Regular`;\n theme.typography.fonts.italic[weight] = `${familyName}_${weight}Italic`;\n }\n}\n\nfunction toPascalCase(value: string): string {\n return value\n .split(/[- ]+/)\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join('');\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { ThemeTokens } from './types';
|
|
2
|
-
export declare const DEFAULT_TOKENS: Omit<ThemeTokens, 'colors' | 'swatches' | 'semantics'>;
|
|
2
|
+
export declare const DEFAULT_TOKENS: Omit<ThemeTokens, 'colors' | 'swatches' | 'semantics' | 'colorDiagnostics'>;
|
|
3
3
|
//# sourceMappingURL=defaultTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultTokens.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,SAAS,CAAC;AAgBvD,eAAO,MAAM,cAAc,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"defaultTokens.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,SAAS,CAAC;AAgBvD,eAAO,MAAM,cAAc,EAAE,IAAI,CAC/B,WAAW,EACX,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CA0CzD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultTokens.js","sourceRoot":"","sources":["../../src/theme/defaultTokens.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAA2C;IAC7D,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"defaultTokens.js","sourceRoot":"","sources":["../../src/theme/defaultTokens.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAA2C;IAC7D,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAGvB;IACF,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;IAChE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;IACjD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YAC/C,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YAC/C,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YAC/C,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;YACnD,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;YACnD,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;SACpD;QACD,KAAK,EAAE;YACL,EAAE,EAAE,EAAE;YACN,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,EAAE,EAAE,EAAE;YACN,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,EAAE;YACT,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;SACP;QACD,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,UAAU,EAAE,KAAK;YACjB,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,KAAK;YAChB,KAAK,EAAE,KAAK;SACb;QACD,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE;KACxE;IACD,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;CACzC,CAAC","sourcesContent":["import type { FontWeight, ThemeTokens } from './types';\n\nconst EMPTY_FONT_MAP: Record<FontWeight, string | undefined> = {\n '100': undefined,\n '200': undefined,\n '300': undefined,\n '400': undefined,\n '500': undefined,\n '600': undefined,\n '700': undefined,\n '800': undefined,\n '900': undefined,\n bold: undefined,\n normal: undefined,\n};\n\nexport const DEFAULT_TOKENS: Omit<\n ThemeTokens,\n 'colors' | 'swatches' | 'semantics' | 'colorDiagnostics'\n> = {\n spacing: { none: 0, xs: 4, s: 8, m: 16, l: 24, xl: 32, xxl: 48 },\n radii: { none: 0, s: 4, m: 8, l: 16, full: 9999 },\n typography: {\n headings: {\n 1: { size: 32, lineHeight: 40, weight: 'bold' },\n 2: { size: 24, lineHeight: 32, weight: 'bold' },\n 3: { size: 20, lineHeight: 28, weight: 'bold' },\n 4: { size: 18, lineHeight: 24, weight: 'semiBold' },\n 5: { size: 16, lineHeight: 22, weight: 'semiBold' },\n 6: { size: 14, lineHeight: 20, weight: 'semiBold' },\n },\n sizes: {\n xs: 12,\n s: 14,\n m: 16,\n l: 18,\n xl: 20,\n xxl: 24,\n '3xl': 30,\n h1: 32,\n h2: 24,\n h3: 20,\n h4: 18,\n h5: 16,\n h6: 14,\n },\n weights: {\n thin: '100',\n extraLight: '200',\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n extraBold: '800',\n black: '900',\n },\n fonts: { normal: { ...EMPTY_FONT_MAP }, italic: { ...EMPTY_FONT_MAP } },\n },\n shadows: { soft: 2, medium: 4, hard: 8 },\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ThemeGlobalTokenOverrides } from '@ankhorage/contracts';
|
|
2
2
|
import type { ThemeTokens } from './types';
|
|
3
|
-
type GlobalThemeTokens = Omit<ThemeTokens, 'colors' | 'swatches' | 'semantics'>;
|
|
3
|
+
type GlobalThemeTokens = Omit<ThemeTokens, 'colors' | 'swatches' | 'semantics' | 'colorDiagnostics'>;
|
|
4
4
|
export declare function resolveGlobalTokens(overrides?: ThemeGlobalTokenOverrides): GlobalThemeTokens;
|
|
5
5
|
export {};
|
|
6
6
|
//# sourceMappingURL=resolveGlobalTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveGlobalTokens.d.ts","sourceRoot":"","sources":["../../src/theme/resolveGlobalTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAMtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,iBAAiB,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"resolveGlobalTokens.d.ts","sourceRoot":"","sources":["../../src/theme/resolveGlobalTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAMtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,iBAAiB,GAAG,IAAI,CAC3B,WAAW,EACX,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CACzD,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,SAAS,CAAC,EAAE,yBAAyB,GAAG,iBAAiB,CAmC5F"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveGlobalTokens.js","sourceRoot":"","sources":["../../src/theme/resolveGlobalTokens.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"resolveGlobalTokens.js","sourceRoot":"","sources":["../../src/theme/resolveGlobalTokens.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAQ5E,MAAM,UAAU,mBAAmB,CAAC,SAAqC;IACvE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,UAAU,GAAG,SAAS,EAAE,UAAU,CAAC;IACzC,OAAO;QACL,OAAO,EAAE;YACP,GAAG,cAAc,CAAC,OAAO;YACzB,GAAG,4BAA4B,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAC/D;QACD,KAAK,EAAE;YACL,GAAG,cAAc,CAAC,KAAK;YACvB,GAAG,4BAA4B,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;SAC3D;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,4BAA4B,CACpC,cAAc,CAAC,UAAU,CAAC,QAAQ,EAClC,UAAU,EAAE,QAAQ,CACrB;YACD,KAAK,EAAE;gBACL,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK;gBAClC,GAAG,4BAA4B,CAAC,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC;aAC7E;YACD,OAAO,EAAE;gBACP,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO;gBACpC,GAAG,2BAA2B,CAAC,UAAU,EAAE,OAAO,CAAC;aACpD;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE;gBACrD,MAAM,EAAE,EAAE,GAAG,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE;aACtD;SACF;QACD,OAAO,EAAE;YACP,GAAG,cAAc,CAAC,OAAO;YACzB,GAAG,4BAA4B,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAC/D;KACF,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,SAAgD;IAC1E,IAAI,SAAS,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QAC3E,MAAM,IAAI,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAClE,CAAC;IACD,IAAI,SAAS,EAAE,KAAK,EAAE,IAAI,KAAK,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACvE,MAAM,IAAI,UAAU,CAAC,uCAAuC,CAAC,CAAC;IAChE,CAAC;AACH,CAAC","sourcesContent":["import type { ThemeGlobalTokenOverrides } from '@ankhorage/contracts';\n\nimport { DEFAULT_TOKENS } from './defaultTokens';\nimport { resolveHeadingTokenOverrides } from './resolveHeadingTokenOverrides';\nimport { resolveNumericTokenOverrides } from './resolveNumericTokenOverrides';\nimport { resolveWeightTokenOverrides } from './resolveWeightTokenOverrides';\nimport type { ThemeTokens } from './types';\n\ntype GlobalThemeTokens = Omit<\n ThemeTokens,\n 'colors' | 'swatches' | 'semantics' | 'colorDiagnostics'\n>;\n\nexport function resolveGlobalTokens(overrides?: ThemeGlobalTokenOverrides): GlobalThemeTokens {\n validateZeroTokens(overrides);\n const typography = overrides?.typography;\n return {\n spacing: {\n ...DEFAULT_TOKENS.spacing,\n ...resolveNumericTokenOverrides('spacing', overrides?.spacing),\n },\n radii: {\n ...DEFAULT_TOKENS.radii,\n ...resolveNumericTokenOverrides('radii', overrides?.radii),\n },\n typography: {\n headings: resolveHeadingTokenOverrides(\n DEFAULT_TOKENS.typography.headings,\n typography?.headings,\n ),\n sizes: {\n ...DEFAULT_TOKENS.typography.sizes,\n ...resolveNumericTokenOverrides('typography.sizes', typography?.sizes, true),\n },\n weights: {\n ...DEFAULT_TOKENS.typography.weights,\n ...resolveWeightTokenOverrides(typography?.weights),\n },\n fonts: {\n normal: { ...DEFAULT_TOKENS.typography.fonts.normal },\n italic: { ...DEFAULT_TOKENS.typography.fonts.italic },\n },\n },\n shadows: {\n ...DEFAULT_TOKENS.shadows,\n ...resolveNumericTokenOverrides('shadows', overrides?.shadows),\n },\n };\n}\n\nfunction validateZeroTokens(overrides: ThemeGlobalTokenOverrides | undefined): void {\n if (overrides?.spacing?.none !== undefined && overrides.spacing.none !== 0) {\n throw new RangeError('Theme token spacing.none must remain 0.');\n }\n if (overrides?.radii?.none !== undefined && overrides.radii.none !== 0) {\n throw new RangeError('Theme token radii.none must remain 0.');\n }\n}\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ColorSwatch, HexColor } from '@ankhorage/color-theory';
|
|
2
|
+
import type { RoleSemantics } from './types';
|
|
3
|
+
interface ResolveRoleSemanticsInput {
|
|
4
|
+
base?: HexColor;
|
|
5
|
+
disabledBg: HexColor;
|
|
6
|
+
disabledText: HexColor;
|
|
7
|
+
hover?: HexColor;
|
|
8
|
+
id: string;
|
|
9
|
+
isDark: boolean;
|
|
10
|
+
measureForeground: (id: string, foreground: HexColor, background: HexColor, minimumContrast: number) => HexColor;
|
|
11
|
+
onSurfaceText: HexColor;
|
|
12
|
+
outline: HexColor;
|
|
13
|
+
selectForeground: (id: string, background: HexColor, minimumContrast: number) => HexColor;
|
|
14
|
+
swatch: ColorSwatch;
|
|
15
|
+
}
|
|
16
|
+
/** Resolve every filled role state together with its measured foreground. */
|
|
17
|
+
export declare function resolveRoleSemantics({ base, disabledBg, disabledText, hover, id, isDark, measureForeground, onSurfaceText, outline, selectForeground, swatch, }: ResolveRoleSemanticsInput): RoleSemantics;
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=resolveRoleSemantics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveRoleSemantics.d.ts","sourceRoot":"","sources":["../../src/theme/resolveRoleSemantics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,QAAQ,CAAC;IACrB,YAAY,EAAE,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,CACjB,EAAE,EAAE,MAAM,EACV,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,MAAM,KACpB,QAAQ,CAAC;IACd,aAAa,EAAE,QAAQ,CAAC;IACxB,OAAO,EAAE,QAAQ,CAAC;IAClB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,KAAK,QAAQ,CAAC;IAC1F,MAAM,EAAE,WAAW,CAAC;CACrB;AAWD,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,KAAK,EACL,EAAE,EACF,MAAM,EACN,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,MAAM,GACP,EAAE,yBAAyB,GAAG,aAAa,CAiC3C"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SURFACE_COLOR_POLICY } from './surfaceColorPolicy';
|
|
2
|
+
/** Resolve every filled role state together with its measured foreground. */
|
|
3
|
+
export function resolveRoleSemantics({ base, disabledBg, disabledText, hover, id, isDark, measureForeground, onSurfaceText, outline, selectForeground, swatch, }) {
|
|
4
|
+
const states = resolveRoleStateColors(swatch, isDark, base, hover);
|
|
5
|
+
return {
|
|
6
|
+
...states,
|
|
7
|
+
outline,
|
|
8
|
+
onSurfaceText,
|
|
9
|
+
onSolidText: selectForeground(`${id}.base`, states.base, SURFACE_COLOR_POLICY.textContrast),
|
|
10
|
+
onHoverText: selectForeground(`${id}.hover`, states.hover, SURFACE_COLOR_POLICY.textContrast),
|
|
11
|
+
onStrongText: selectForeground(`${id}.strong`, states.strong, SURFACE_COLOR_POLICY.textContrast),
|
|
12
|
+
onSoftText: selectForeground(`${id}.soft`, states.softBg, SURFACE_COLOR_POLICY.textContrast),
|
|
13
|
+
onSoftHoverText: selectForeground(`${id}.softHover`, states.softHover, SURFACE_COLOR_POLICY.textContrast),
|
|
14
|
+
onSoftActiveText: selectForeground(`${id}.softActive`, states.softActive, SURFACE_COLOR_POLICY.textContrast),
|
|
15
|
+
disabledBg,
|
|
16
|
+
onDisabledText: measureForeground(`${id}.disabled`, disabledText, disabledBg, SURFACE_COLOR_POLICY.disabledContrast),
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
function resolveRoleStateColors(swatch, isDark, base, hover) {
|
|
20
|
+
return {
|
|
21
|
+
base: base ?? swatch[500],
|
|
22
|
+
hover: hover ?? (isDark ? swatch[400] : swatch[600]),
|
|
23
|
+
strong: isDark ? swatch[300] : swatch[700],
|
|
24
|
+
softBg: isDark ? swatch[900] : swatch[100],
|
|
25
|
+
softHover: isDark ? swatch[800] : swatch[200],
|
|
26
|
+
softActive: isDark ? swatch[700] : swatch[300],
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=resolveRoleSemantics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveRoleSemantics.js","sourceRoot":"","sources":["../../src/theme/resolveRoleSemantics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AA+B5D,6EAA6E;AAC7E,MAAM,UAAU,oBAAoB,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,KAAK,EACL,EAAE,EACF,MAAM,EACN,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,MAAM,GACoB;IAC1B,MAAM,MAAM,GAAG,sBAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAEnE,OAAO;QACL,GAAG,MAAM;QACT,OAAO;QACP,aAAa;QACb,WAAW,EAAE,gBAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,IAAI,EAAE,oBAAoB,CAAC,YAAY,CAAC;QAC3F,WAAW,EAAE,gBAAgB,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,EAAE,oBAAoB,CAAC,YAAY,CAAC;QAC7F,YAAY,EAAE,gBAAgB,CAC5B,GAAG,EAAE,SAAS,EACd,MAAM,CAAC,MAAM,EACb,oBAAoB,CAAC,YAAY,CAClC;QACD,UAAU,EAAE,gBAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,YAAY,CAAC;QAC5F,eAAe,EAAE,gBAAgB,CAC/B,GAAG,EAAE,YAAY,EACjB,MAAM,CAAC,SAAS,EAChB,oBAAoB,CAAC,YAAY,CAClC;QACD,gBAAgB,EAAE,gBAAgB,CAChC,GAAG,EAAE,aAAa,EAClB,MAAM,CAAC,UAAU,EACjB,oBAAoB,CAAC,YAAY,CAClC;QACD,UAAU;QACV,cAAc,EAAE,iBAAiB,CAC/B,GAAG,EAAE,WAAW,EAChB,YAAY,EACZ,UAAU,EACV,oBAAoB,CAAC,gBAAgB,CACtC;KACF,CAAC;AACJ,CAAC;AAED,SAAS,sBAAsB,CAC7B,MAAmB,EACnB,MAAe,EACf,IAAe,EACf,KAAgB;IAEhB,OAAO;QACL,IAAI,EAAE,IAAI,IAAI,MAAM,CAAC,GAAG,CAAC;QACzB,KAAK,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACpD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;QAC1C,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;QAC1C,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;KAC/C,CAAC;AACJ,CAAC","sourcesContent":["import type { ColorSwatch, HexColor } from '@ankhorage/color-theory';\n\nimport { SURFACE_COLOR_POLICY } from './surfaceColorPolicy';\nimport type { RoleSemantics } from './types';\n\ninterface ResolveRoleSemanticsInput {\n base?: HexColor;\n disabledBg: HexColor;\n disabledText: HexColor;\n hover?: HexColor;\n id: string;\n isDark: boolean;\n measureForeground: (\n id: string,\n foreground: HexColor,\n background: HexColor,\n minimumContrast: number,\n ) => HexColor;\n onSurfaceText: HexColor;\n outline: HexColor;\n selectForeground: (id: string, background: HexColor, minimumContrast: number) => HexColor;\n swatch: ColorSwatch;\n}\n\ninterface RoleStateColors {\n base: HexColor;\n hover: HexColor;\n softActive: HexColor;\n softBg: HexColor;\n softHover: HexColor;\n strong: HexColor;\n}\n\n/** Resolve every filled role state together with its measured foreground. */\nexport function resolveRoleSemantics({\n base,\n disabledBg,\n disabledText,\n hover,\n id,\n isDark,\n measureForeground,\n onSurfaceText,\n outline,\n selectForeground,\n swatch,\n}: ResolveRoleSemanticsInput): RoleSemantics {\n const states = resolveRoleStateColors(swatch, isDark, base, hover);\n\n return {\n ...states,\n outline,\n onSurfaceText,\n onSolidText: selectForeground(`${id}.base`, states.base, SURFACE_COLOR_POLICY.textContrast),\n onHoverText: selectForeground(`${id}.hover`, states.hover, SURFACE_COLOR_POLICY.textContrast),\n onStrongText: selectForeground(\n `${id}.strong`,\n states.strong,\n SURFACE_COLOR_POLICY.textContrast,\n ),\n onSoftText: selectForeground(`${id}.soft`, states.softBg, SURFACE_COLOR_POLICY.textContrast),\n onSoftHoverText: selectForeground(\n `${id}.softHover`,\n states.softHover,\n SURFACE_COLOR_POLICY.textContrast,\n ),\n onSoftActiveText: selectForeground(\n `${id}.softActive`,\n states.softActive,\n SURFACE_COLOR_POLICY.textContrast,\n ),\n disabledBg,\n onDisabledText: measureForeground(\n `${id}.disabled`,\n disabledText,\n disabledBg,\n SURFACE_COLOR_POLICY.disabledContrast,\n ),\n };\n}\n\nfunction resolveRoleStateColors(\n swatch: ColorSwatch,\n isDark: boolean,\n base?: HexColor,\n hover?: HexColor,\n): RoleStateColors {\n return {\n base: base ?? swatch[500],\n hover: hover ?? (isDark ? swatch[400] : swatch[600]),\n strong: isDark ? swatch[300] : swatch[700],\n softBg: isDark ? swatch[900] : swatch[100],\n softHover: isDark ? swatch[800] : swatch[200],\n softActive: isDark ? swatch[700] : swatch[300],\n };\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { GeneratedThemeModeColors, HexColor, SemanticColorReferenceMap, SemanticColorToken, ThemeColorMode } from '@ankhorage/color-theory';
|
|
2
|
+
import type { SurfaceColorDiagnostics, ThemeSemantics } from './types';
|
|
3
|
+
type ResolvedSemanticColors = Record<SemanticColorToken, HexColor>;
|
|
4
|
+
interface ResolveSurfaceSemanticModelInput {
|
|
5
|
+
generated: GeneratedThemeModeColors;
|
|
6
|
+
mode: ThemeColorMode;
|
|
7
|
+
references: SemanticColorReferenceMap;
|
|
8
|
+
resolved: ResolvedSemanticColors;
|
|
9
|
+
}
|
|
10
|
+
/** Resolve the complete Surface-owned semantic model from canonical Color Theory output. */
|
|
11
|
+
export declare function resolveSurfaceSemanticModel(input: ResolveSurfaceSemanticModelInput): {
|
|
12
|
+
semantics: ThemeSemantics;
|
|
13
|
+
colorDiagnostics: SurfaceColorDiagnostics;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=resolveSurfaceSemanticModel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveSurfaceSemanticModel.d.ts","sourceRoot":"","sources":["../../src/theme/resolveSurfaceSemanticModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,wBAAwB,EAExB,QAAQ,EACR,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAIV,uBAAuB,EACvB,cAAc,EACf,MAAM,SAAS,CAAC;AAEjB,KAAK,sBAAsB,GAAG,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAkBnE,UAAU,gCAAgC;IACxC,SAAS,EAAE,wBAAwB,CAAC;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,yBAAyB,CAAC;IACtC,QAAQ,EAAE,sBAAsB,CAAC;CAClC;AAED,4FAA4F;AAC5F,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,GAAG;IACpF,SAAS,EAAE,cAAc,CAAC;IAC1B,gBAAgB,EAAE,uBAAuB,CAAC;CAC3C,CA2CA"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { createDefaultSemanticStatusSwatches } from '@ankhorage/color-theory';
|
|
2
|
+
import { createSurfaceColorDiagnosticCollector } from './createSurfaceColorDiagnosticCollector';
|
|
3
|
+
import { createSurfaceSemanticPolicy } from './createSurfaceSemanticPolicy';
|
|
4
|
+
import { resolveRoleSemantics } from './resolveRoleSemantics';
|
|
5
|
+
/** Resolve the complete Surface-owned semantic model from canonical Color Theory output. */
|
|
6
|
+
export function resolveSurfaceSemanticModel(input) {
|
|
7
|
+
const context = createResolutionContext(input);
|
|
8
|
+
const roles = resolveSemanticRoles(context);
|
|
9
|
+
const inverseSurface = context.isDark ? context.neutralSwatch[50] : context.neutralSwatch[900];
|
|
10
|
+
const inverseContent = context.isDark ? context.neutralSwatch[900] : context.neutralSwatch[50];
|
|
11
|
+
const neutral = context.policy.buildNeutral(context.neutralSwatch);
|
|
12
|
+
const surface = context.policy.buildSurface(inverseSurface);
|
|
13
|
+
const content = resolveContentSemantics(context, neutral.textSubtle, inverseContent);
|
|
14
|
+
const border = resolveBorderSemantics(context, roles.brand.outline);
|
|
15
|
+
context.policy.measureContent(content, surface);
|
|
16
|
+
return {
|
|
17
|
+
semantics: {
|
|
18
|
+
neutral,
|
|
19
|
+
brand: roles.brand,
|
|
20
|
+
secondary: roles.secondary,
|
|
21
|
+
accent: roles.accent,
|
|
22
|
+
highlight: roles.highlight,
|
|
23
|
+
danger: roles.danger,
|
|
24
|
+
success: roles.success,
|
|
25
|
+
warning: roles.warning,
|
|
26
|
+
error: roles.danger,
|
|
27
|
+
info: roles.info,
|
|
28
|
+
surface,
|
|
29
|
+
content,
|
|
30
|
+
border,
|
|
31
|
+
selection: {
|
|
32
|
+
background: roles.brand.softBg,
|
|
33
|
+
content: roles.brand.onSoftText,
|
|
34
|
+
border: border.focus,
|
|
35
|
+
},
|
|
36
|
+
action: { primary: roles.brand, neutral: roles.neutralAction, danger: roles.danger },
|
|
37
|
+
},
|
|
38
|
+
colorDiagnostics: {
|
|
39
|
+
mode: context.mode,
|
|
40
|
+
generated: context.generated,
|
|
41
|
+
semanticReferences: context.references,
|
|
42
|
+
statusSwatches: context.statusSwatches.diagnostics,
|
|
43
|
+
selections: context.collector.selections,
|
|
44
|
+
contrasts: context.collector.contrasts,
|
|
45
|
+
surfaceSeparation: context.policy.measureSurfaceSeparation(surface),
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
function createResolutionContext(input) {
|
|
50
|
+
const { generated, mode, references, resolved } = input;
|
|
51
|
+
const { swatches } = generated;
|
|
52
|
+
const collector = createSurfaceColorDiagnosticCollector();
|
|
53
|
+
const isDark = mode === 'dark';
|
|
54
|
+
return {
|
|
55
|
+
collector,
|
|
56
|
+
generated,
|
|
57
|
+
isDark,
|
|
58
|
+
mode,
|
|
59
|
+
neutralSwatch: swatches.neutral,
|
|
60
|
+
policy: createSurfaceSemanticPolicy(resolved, isDark, collector),
|
|
61
|
+
quaternarySwatch: swatches.quaternary ?? swatches.primary,
|
|
62
|
+
references,
|
|
63
|
+
resolved,
|
|
64
|
+
secondarySwatch: swatches.secondary ?? swatches.primary,
|
|
65
|
+
statusSwatches: createDefaultSemanticStatusSwatches(),
|
|
66
|
+
swatches,
|
|
67
|
+
tertiarySwatch: swatches.tertiary ?? swatches.primary,
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
function resolveBorderSemantics(context, focus) {
|
|
71
|
+
const { collector, neutralSwatch, policy, resolved } = context;
|
|
72
|
+
return {
|
|
73
|
+
default: collector.selectColor('border.default', neutralSwatch, policy.neutralTarget(), policy.adjacentSurfaceContexts, policy.tiePolicy),
|
|
74
|
+
subtle: resolved.border,
|
|
75
|
+
strong: collector.selectColor('border.strong', neutralSwatch, policy.strongNeutralTarget(), policy.adjacentSurfaceContexts, policy.tiePolicy),
|
|
76
|
+
divider: resolved.divider,
|
|
77
|
+
focus,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
function resolveContentSemantics(context, subtle, inverse) {
|
|
81
|
+
const { collector, policy, resolved, secondarySwatch, swatches } = context;
|
|
82
|
+
return {
|
|
83
|
+
default: resolved.text,
|
|
84
|
+
muted: resolved.textMuted,
|
|
85
|
+
subtle,
|
|
86
|
+
disabled: resolved.disabledText,
|
|
87
|
+
icon: resolved.text,
|
|
88
|
+
link: collector.selectColor('content.link', swatches.primary, policy.textTarget(), policy.textSurfaceContexts, policy.tiePolicy),
|
|
89
|
+
visited: collector.selectColor('content.visited', secondarySwatch, policy.textTarget(), policy.textSurfaceContexts, policy.tiePolicy),
|
|
90
|
+
inverse,
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
function resolveRole(context, id, swatch, options = {}) {
|
|
94
|
+
const { collector, isDark, policy, resolved } = context;
|
|
95
|
+
return resolveRoleSemantics({
|
|
96
|
+
base: options.base,
|
|
97
|
+
disabledBg: resolved.disabledBg,
|
|
98
|
+
disabledText: resolved.disabledText,
|
|
99
|
+
hover: options.hover,
|
|
100
|
+
id,
|
|
101
|
+
isDark,
|
|
102
|
+
measureForeground: collector.measureForeground,
|
|
103
|
+
onSurfaceText: collector.selectColor(`${id}.content`, swatch, policy.textTarget(), policy.textSurfaceContexts, policy.tiePolicy),
|
|
104
|
+
outline: collector.selectColor(`${id}.outline`, swatch, options.target ?? policy.roleTarget(), policy.adjacentSurfaceContexts, policy.tiePolicy),
|
|
105
|
+
selectForeground: collector.selectForeground,
|
|
106
|
+
swatch,
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
function resolveSemanticRoles(context) {
|
|
110
|
+
const { neutralSwatch, resolved, secondarySwatch, statusSwatches, swatches } = context;
|
|
111
|
+
return {
|
|
112
|
+
brand: resolveRole(context, 'brand', swatches.primary, {
|
|
113
|
+
base: resolved.action,
|
|
114
|
+
hover: resolved.actionEmphasis,
|
|
115
|
+
}),
|
|
116
|
+
secondary: resolveRole(context, 'secondary', secondarySwatch),
|
|
117
|
+
accent: resolveRole(context, 'accent', context.tertiarySwatch),
|
|
118
|
+
highlight: resolveRole(context, 'highlight', context.quaternarySwatch),
|
|
119
|
+
danger: resolveRole(context, 'danger', statusSwatches.swatches.danger),
|
|
120
|
+
success: resolveRole(context, 'success', statusSwatches.swatches.success),
|
|
121
|
+
warning: resolveRole(context, 'warning', statusSwatches.swatches.warning),
|
|
122
|
+
info: resolveRole(context, 'info', statusSwatches.swatches.info),
|
|
123
|
+
neutralAction: resolveRole(context, 'neutral', neutralSwatch, {
|
|
124
|
+
target: context.policy.neutralTarget(),
|
|
125
|
+
}),
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
//# sourceMappingURL=resolveSurfaceSemanticModel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveSurfaceSemanticModel.js","sourceRoot":"","sources":["../../src/theme/resolveSurfaceSemanticModel.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ColorSelectionTarget,\n ColorSwatch,\n GeneratedThemeModeColors,\n GeneratedThemeSwatches,\n HexColor,\n SemanticColorReferenceMap,\n SemanticColorToken,\n ThemeColorMode,\n} from '@ankhorage/color-theory';\nimport { createDefaultSemanticStatusSwatches } from '@ankhorage/color-theory';\n\nimport { createSurfaceColorDiagnosticCollector } from './createSurfaceColorDiagnosticCollector';\nimport { createSurfaceSemanticPolicy } from './createSurfaceSemanticPolicy';\nimport { resolveRoleSemantics } from './resolveRoleSemantics';\nimport type {\n BorderSemantics,\n ContentSemantics,\n RoleSemantics,\n SurfaceColorDiagnostics,\n ThemeSemantics,\n} from './types';\n\ntype ResolvedSemanticColors = Record<SemanticColorToken, HexColor>;\n\ninterface SemanticResolutionContext {\n collector: ReturnType<typeof createSurfaceColorDiagnosticCollector>;\n generated: GeneratedThemeModeColors;\n isDark: boolean;\n mode: ThemeColorMode;\n neutralSwatch: ColorSwatch;\n policy: ReturnType<typeof createSurfaceSemanticPolicy>;\n quaternarySwatch: ColorSwatch;\n references: SemanticColorReferenceMap;\n resolved: ResolvedSemanticColors;\n secondarySwatch: ColorSwatch;\n statusSwatches: ReturnType<typeof createDefaultSemanticStatusSwatches>;\n swatches: GeneratedThemeSwatches;\n tertiarySwatch: ColorSwatch;\n}\n\ninterface ResolveSurfaceSemanticModelInput {\n generated: GeneratedThemeModeColors;\n mode: ThemeColorMode;\n references: SemanticColorReferenceMap;\n resolved: ResolvedSemanticColors;\n}\n\n/** Resolve the complete Surface-owned semantic model from canonical Color Theory output. */\nexport function resolveSurfaceSemanticModel(input: ResolveSurfaceSemanticModelInput): {\n semantics: ThemeSemantics;\n colorDiagnostics: SurfaceColorDiagnostics;\n} {\n const context = createResolutionContext(input);\n const roles = resolveSemanticRoles(context);\n const inverseSurface = context.isDark ? context.neutralSwatch[50] : context.neutralSwatch[900];\n const inverseContent = context.isDark ? context.neutralSwatch[900] : context.neutralSwatch[50];\n const neutral = context.policy.buildNeutral(context.neutralSwatch);\n const surface = context.policy.buildSurface(inverseSurface);\n const content = resolveContentSemantics(context, neutral.textSubtle, inverseContent);\n const border = resolveBorderSemantics(context, roles.brand.outline);\n context.policy.measureContent(content, surface);\n\n return {\n semantics: {\n neutral,\n brand: roles.brand,\n secondary: roles.secondary,\n accent: roles.accent,\n highlight: roles.highlight,\n danger: roles.danger,\n success: roles.success,\n warning: roles.warning,\n error: roles.danger,\n info: roles.info,\n surface,\n content,\n border,\n selection: {\n background: roles.brand.softBg,\n content: roles.brand.onSoftText,\n border: border.focus,\n },\n action: { primary: roles.brand, neutral: roles.neutralAction, danger: roles.danger },\n },\n colorDiagnostics: {\n mode: context.mode,\n generated: context.generated,\n semanticReferences: context.references,\n statusSwatches: context.statusSwatches.diagnostics,\n selections: context.collector.selections,\n contrasts: context.collector.contrasts,\n surfaceSeparation: context.policy.measureSurfaceSeparation(surface),\n },\n };\n}\n\nfunction createResolutionContext(\n input: ResolveSurfaceSemanticModelInput,\n): SemanticResolutionContext {\n const { generated, mode, references, resolved } = input;\n const { swatches } = generated;\n const collector = createSurfaceColorDiagnosticCollector();\n const isDark = mode === 'dark';\n return {\n collector,\n generated,\n isDark,\n mode,\n neutralSwatch: swatches.neutral,\n policy: createSurfaceSemanticPolicy(resolved, isDark, collector),\n quaternarySwatch: swatches.quaternary ?? swatches.primary,\n references,\n resolved,\n secondarySwatch: swatches.secondary ?? swatches.primary,\n statusSwatches: createDefaultSemanticStatusSwatches(),\n swatches,\n tertiarySwatch: swatches.tertiary ?? swatches.primary,\n };\n}\n\nfunction resolveBorderSemantics(\n context: SemanticResolutionContext,\n focus: string,\n): BorderSemantics {\n const { collector, neutralSwatch, policy, resolved } = context;\n return {\n default: collector.selectColor(\n 'border.default',\n neutralSwatch,\n policy.neutralTarget(),\n policy.adjacentSurfaceContexts,\n policy.tiePolicy,\n ),\n subtle: resolved.border,\n strong: collector.selectColor(\n 'border.strong',\n neutralSwatch,\n policy.strongNeutralTarget(),\n policy.adjacentSurfaceContexts,\n policy.tiePolicy,\n ),\n divider: resolved.divider,\n focus,\n };\n}\n\nfunction resolveContentSemantics(\n context: SemanticResolutionContext,\n subtle: string,\n inverse: string,\n): ContentSemantics {\n const { collector, policy, resolved, secondarySwatch, swatches } = context;\n return {\n default: resolved.text,\n muted: resolved.textMuted,\n subtle,\n disabled: resolved.disabledText,\n icon: resolved.text,\n link: collector.selectColor(\n 'content.link',\n swatches.primary,\n policy.textTarget(),\n policy.textSurfaceContexts,\n policy.tiePolicy,\n ),\n visited: collector.selectColor(\n 'content.visited',\n secondarySwatch,\n policy.textTarget(),\n policy.textSurfaceContexts,\n policy.tiePolicy,\n ),\n inverse,\n };\n}\n\nfunction resolveRole(\n context: SemanticResolutionContext,\n id: string,\n swatch: ColorSwatch,\n options: { base?: HexColor; hover?: HexColor; target?: ColorSelectionTarget } = {},\n): RoleSemantics {\n const { collector, isDark, policy, resolved } = context;\n return resolveRoleSemantics({\n base: options.base,\n disabledBg: resolved.disabledBg,\n disabledText: resolved.disabledText,\n hover: options.hover,\n id,\n isDark,\n measureForeground: collector.measureForeground,\n onSurfaceText: collector.selectColor(\n `${id}.content`,\n swatch,\n policy.textTarget(),\n policy.textSurfaceContexts,\n policy.tiePolicy,\n ),\n outline: collector.selectColor(\n `${id}.outline`,\n swatch,\n options.target ?? policy.roleTarget(),\n policy.adjacentSurfaceContexts,\n policy.tiePolicy,\n ),\n selectForeground: collector.selectForeground,\n swatch,\n });\n}\n\nfunction resolveSemanticRoles(context: SemanticResolutionContext) {\n const { neutralSwatch, resolved, secondarySwatch, statusSwatches, swatches } = context;\n return {\n brand: resolveRole(context, 'brand', swatches.primary, {\n base: resolved.action,\n hover: resolved.actionEmphasis,\n }),\n secondary: resolveRole(context, 'secondary', secondarySwatch),\n accent: resolveRole(context, 'accent', context.tertiarySwatch),\n highlight: resolveRole(context, 'highlight', context.quaternarySwatch),\n danger: resolveRole(context, 'danger', statusSwatches.swatches.danger),\n success: resolveRole(context, 'success', statusSwatches.swatches.success),\n warning: resolveRole(context, 'warning', statusSwatches.swatches.warning),\n info: resolveRole(context, 'info', statusSwatches.swatches.info),\n neutralAction: resolveRole(context, 'neutral', neutralSwatch, {\n target: context.policy.neutralTarget(),\n }),\n };\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/** Canonical measurable thresholds used while Surface resolves runtime color semantics. */
|
|
2
|
+
export declare const SURFACE_COLOR_POLICY: {
|
|
3
|
+
readonly disabledContrast: 3;
|
|
4
|
+
readonly surfaceSeparation: 1.05;
|
|
5
|
+
readonly textContrast: 4.5;
|
|
6
|
+
readonly uiContrast: 3;
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=surfaceColorPolicy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surfaceColorPolicy.d.ts","sourceRoot":"","sources":["../../src/theme/surfaceColorPolicy.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/** Canonical measurable thresholds used while Surface resolves runtime color semantics. */
|
|
2
|
+
export const SURFACE_COLOR_POLICY = {
|
|
3
|
+
disabledContrast: 3,
|
|
4
|
+
surfaceSeparation: 1.05,
|
|
5
|
+
textContrast: 4.5,
|
|
6
|
+
uiContrast: 3,
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=surfaceColorPolicy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surfaceColorPolicy.js","sourceRoot":"","sources":["../../src/theme/surfaceColorPolicy.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,gBAAgB,EAAE,CAAC;IACnB,iBAAiB,EAAE,IAAI;IACvB,YAAY,EAAE,GAAG;IACjB,UAAU,EAAE,CAAC;CACL,CAAC","sourcesContent":["/** Canonical measurable thresholds used while Surface resolves runtime color semantics. */\nexport const SURFACE_COLOR_POLICY = {\n disabledContrast: 3,\n surfaceSeparation: 1.05,\n textContrast: 4.5,\n uiContrast: 3,\n} as const;\n"]}
|