kang-components 0.4.0 → 0.5.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/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/language.d.ts +23 -0
- package/dist/language.d.ts.map +1 -0
- package/dist/language.js +14 -0
- package/dist/language.js.map +1 -0
- package/dist/palettes.d.ts +87 -0
- package/dist/palettes.d.ts.map +1 -0
- package/dist/palettes.js +185 -0
- package/dist/palettes.js.map +1 -0
- package/dist/theme.d.ts +192 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +118 -0
- package/dist/theme.js.map +1 -0
- package/package.json +11 -2
package/dist/index.d.ts
CHANGED
|
@@ -7,4 +7,9 @@ export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESP
|
|
|
7
7
|
export type { SpringConfigConstant } from './spring.js';
|
|
8
8
|
export { default as AnimatedText } from './animated-text.js';
|
|
9
9
|
export type { AnimatedTextProps } from './animated-text.js';
|
|
10
|
+
export { buildTheme, theme, hexToRgb } from './theme.js';
|
|
11
|
+
export type { ThemeType } from './theme.js';
|
|
12
|
+
export { lightPalette, darkPalette } from './palettes.js';
|
|
13
|
+
export type { ModeColorPalette } from './palettes.js';
|
|
14
|
+
export type { DynamicLanguage, CharacterPreference, StaticLanguage, } from './language.js';
|
|
10
15
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -4,4 +4,6 @@ export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action
|
|
|
4
4
|
export { Ripple, rippleAnimation, useRipple } from './ripple.js';
|
|
5
5
|
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, } from './spring.js';
|
|
6
6
|
export { default as AnimatedText } from './animated-text.js';
|
|
7
|
+
export { buildTheme, theme, hexToRgb } from './theme.js';
|
|
8
|
+
export { lightPalette, darkPalette } from './palettes.js';
|
|
7
9
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared language types — ported from ymy-components.
|
|
3
|
+
*
|
|
4
|
+
* These describe a multilingual content model and the user's display
|
|
5
|
+
* preferences. They are pure types (no runtime), kept domain-light so consumers
|
|
6
|
+
* (e.g. an i18n layer) can map their own language model onto primitives like
|
|
7
|
+
* {@link AnimatedText}.
|
|
8
|
+
*
|
|
9
|
+
* In ymy these lived across `./types/DynamicLanguage` and
|
|
10
|
+
* `./animations/AnimatedText`; kang's `AnimatedText` is intentionally
|
|
11
|
+
* domain-free, so the language vocabulary is consolidated here.
|
|
12
|
+
*/
|
|
13
|
+
/** A single piece of content available in English, traditional, and simplified Chinese. */
|
|
14
|
+
export type DynamicLanguage = {
|
|
15
|
+
english: string;
|
|
16
|
+
traditional: string;
|
|
17
|
+
simplified: string;
|
|
18
|
+
};
|
|
19
|
+
/** Which Chinese character set the user prefers to read. */
|
|
20
|
+
export type CharacterPreference = 'simplified' | 'traditional';
|
|
21
|
+
/** Which static (non-cycling) language to display. */
|
|
22
|
+
export type StaticLanguage = 'english' | 'chinese';
|
|
23
|
+
//# sourceMappingURL=language.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../src/language.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,2FAA2F;AAC3F,MAAM,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC"}
|
package/dist/language.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared language types — ported from ymy-components.
|
|
3
|
+
*
|
|
4
|
+
* These describe a multilingual content model and the user's display
|
|
5
|
+
* preferences. They are pure types (no runtime), kept domain-light so consumers
|
|
6
|
+
* (e.g. an i18n layer) can map their own language model onto primitives like
|
|
7
|
+
* {@link AnimatedText}.
|
|
8
|
+
*
|
|
9
|
+
* In ymy these lived across `./types/DynamicLanguage` and
|
|
10
|
+
* `./animations/AnimatedText`; kang's `AnimatedText` is intentionally
|
|
11
|
+
* domain-free, so the language vocabulary is consolidated here.
|
|
12
|
+
*/
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=language.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"language.js","sourceRoot":"","sources":["../src/language.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-mode color palettes for the theme system.
|
|
3
|
+
*
|
|
4
|
+
* Bold minimal color system:
|
|
5
|
+
* - Light mode: refined teal primary, sky-blue background, warm white surfaces.
|
|
6
|
+
* - Dark mode: soft green primary, near-black with green tint.
|
|
7
|
+
*
|
|
8
|
+
* Every design token is a ready-to-use value; the theme builder is a mechanical
|
|
9
|
+
* mapping from a palette to the theme object. Ported from ymy-components.
|
|
10
|
+
*/
|
|
11
|
+
/** Per-mode color palette: every design token as a ready-to-use value */
|
|
12
|
+
export interface ModeColorPalette {
|
|
13
|
+
primary: string;
|
|
14
|
+
onPrimary: string;
|
|
15
|
+
primaryContainer: string;
|
|
16
|
+
onPrimaryContainer: string;
|
|
17
|
+
primaryDark: string;
|
|
18
|
+
primaryDarker: string;
|
|
19
|
+
secondary: string;
|
|
20
|
+
onSecondary: string;
|
|
21
|
+
secondaryContainer: string;
|
|
22
|
+
onSecondaryContainer: string;
|
|
23
|
+
secondaryLight: string;
|
|
24
|
+
success: string;
|
|
25
|
+
onSuccess: string;
|
|
26
|
+
successContainer: string;
|
|
27
|
+
onSuccessContainer: string;
|
|
28
|
+
successSurface: string;
|
|
29
|
+
successDark: string;
|
|
30
|
+
successMuted: string;
|
|
31
|
+
error: string;
|
|
32
|
+
onError: string;
|
|
33
|
+
errorMuted: string;
|
|
34
|
+
surface: string;
|
|
35
|
+
onSurface: string;
|
|
36
|
+
surfaceVariant: string;
|
|
37
|
+
onSurfaceVariant: string;
|
|
38
|
+
surfaceContainer: string;
|
|
39
|
+
surfaceContainerHigh: string;
|
|
40
|
+
background: string;
|
|
41
|
+
onBackground: string;
|
|
42
|
+
outline: string;
|
|
43
|
+
outlineVariant: string;
|
|
44
|
+
shadow: string;
|
|
45
|
+
shadowLight: string;
|
|
46
|
+
shadowLighter: string;
|
|
47
|
+
shadowSubtle: string;
|
|
48
|
+
shadowFaint: string;
|
|
49
|
+
scrim: string;
|
|
50
|
+
scrimLight: string;
|
|
51
|
+
ripple: string;
|
|
52
|
+
whiteHigh: string;
|
|
53
|
+
whiteMedium: string;
|
|
54
|
+
whiteLow: string;
|
|
55
|
+
whiteHover: string;
|
|
56
|
+
keyboardSurface: string;
|
|
57
|
+
keyCharacter: string;
|
|
58
|
+
keyCharacterText: string;
|
|
59
|
+
keyDefault: string;
|
|
60
|
+
keyDefaultText: string;
|
|
61
|
+
keyWrong: string;
|
|
62
|
+
keyWrongMuted: string;
|
|
63
|
+
keyCorrect: string;
|
|
64
|
+
keyCorrectMuted: string;
|
|
65
|
+
keyAccentText: string;
|
|
66
|
+
keyDisabled: string;
|
|
67
|
+
keyDisabledText: string;
|
|
68
|
+
toggleTrackOn: string;
|
|
69
|
+
toggleTrackOff: string;
|
|
70
|
+
toggleThumbOn: string;
|
|
71
|
+
toggleThumbOff: string;
|
|
72
|
+
toggleHoverOn: string;
|
|
73
|
+
toggleHoverOff: string;
|
|
74
|
+
toggleFocusOn: string;
|
|
75
|
+
toggleFocusOff: string;
|
|
76
|
+
textShadowDark: string;
|
|
77
|
+
textShadow1: string;
|
|
78
|
+
textShadow2: string;
|
|
79
|
+
textShadow3: string;
|
|
80
|
+
primaryRgb: string;
|
|
81
|
+
backgroundRgb: string;
|
|
82
|
+
surfaceRgb: string;
|
|
83
|
+
primaryDarkerRgb: string;
|
|
84
|
+
}
|
|
85
|
+
export declare const lightPalette: ModeColorPalette;
|
|
86
|
+
export declare const darkPalette: ModeColorPalette;
|
|
87
|
+
//# sourceMappingURL=palettes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAEhC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IAGtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IAGvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IAGrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAGnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAG7B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IAGrB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IAGvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAGpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IAGf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IAGnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IAGxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IAGvB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAGpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,gBAmG1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,gBAmGzB,CAAC"}
|
package/dist/palettes.js
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-mode color palettes for the theme system.
|
|
3
|
+
*
|
|
4
|
+
* Bold minimal color system:
|
|
5
|
+
* - Light mode: refined teal primary, sky-blue background, warm white surfaces.
|
|
6
|
+
* - Dark mode: soft green primary, near-black with green tint.
|
|
7
|
+
*
|
|
8
|
+
* Every design token is a ready-to-use value; the theme builder is a mechanical
|
|
9
|
+
* mapping from a palette to the theme object. Ported from ymy-components.
|
|
10
|
+
*/
|
|
11
|
+
export const lightPalette = {
|
|
12
|
+
// Primary — refined teal, calm and grounded
|
|
13
|
+
primary: '#2E7D8C',
|
|
14
|
+
onPrimary: '#ffffff',
|
|
15
|
+
primaryContainer: '#B2EBF2',
|
|
16
|
+
onPrimaryContainer: '#1A5C68',
|
|
17
|
+
primaryDark: '#256A77',
|
|
18
|
+
primaryDarker: '#1C5561',
|
|
19
|
+
// Secondary — bold goldenrod yellow
|
|
20
|
+
secondary: '#E8C840',
|
|
21
|
+
onSecondary: '#1A1A1A',
|
|
22
|
+
secondaryContainer: '#FFF8E0',
|
|
23
|
+
onSecondaryContainer: '#1A1A1A',
|
|
24
|
+
secondaryLight: '#E8C840',
|
|
25
|
+
// Success
|
|
26
|
+
success: '#4ade80',
|
|
27
|
+
onSuccess: '#0D3B70',
|
|
28
|
+
successContainer: '#bbf7d0',
|
|
29
|
+
onSuccessContainer: '#166534',
|
|
30
|
+
successSurface: '#f0fdf4',
|
|
31
|
+
successDark: '#22c55e',
|
|
32
|
+
successMuted: '#3d6b56',
|
|
33
|
+
// Error
|
|
34
|
+
error: '#BF4B3E',
|
|
35
|
+
onError: '#ffffff',
|
|
36
|
+
errorMuted: '#6b4a46',
|
|
37
|
+
// Surface — warm white
|
|
38
|
+
surface: '#ffffff',
|
|
39
|
+
onSurface: '#1A1A1A',
|
|
40
|
+
surfaceVariant: '#FFF9F2',
|
|
41
|
+
onSurfaceVariant: '#5A5550',
|
|
42
|
+
surfaceContainer: '#F8F6F4',
|
|
43
|
+
surfaceContainerHigh: '#F0EEEC',
|
|
44
|
+
// Background — bright sky blue splash
|
|
45
|
+
background: '#64B5F6',
|
|
46
|
+
onBackground: '#0A0A0A',
|
|
47
|
+
// Outline & Dividers
|
|
48
|
+
outline: '#9E9E9E',
|
|
49
|
+
outlineVariant: '#D0D0D0',
|
|
50
|
+
// Shadows
|
|
51
|
+
shadow: 'rgba(0, 0, 0, 0.28)',
|
|
52
|
+
shadowLight: 'rgba(0, 0, 0, 0.15)',
|
|
53
|
+
shadowLighter: 'rgba(0, 0, 0, 0.10)',
|
|
54
|
+
shadowSubtle: 'rgba(0, 0, 0, 0.08)',
|
|
55
|
+
shadowFaint: 'rgba(0, 0, 0, 0.05)',
|
|
56
|
+
// Overlay
|
|
57
|
+
scrim: 'rgba(0, 0, 0, 0.4)',
|
|
58
|
+
scrimLight: 'rgba(0, 0, 0, 0.3)',
|
|
59
|
+
ripple: 'rgba(0, 0, 0, 0.1)',
|
|
60
|
+
// Interactive states (white variants for dark backgrounds)
|
|
61
|
+
whiteHigh: 'rgba(255, 255, 255, 0.9)',
|
|
62
|
+
whiteMedium: 'rgba(255, 255, 255, 0.5)',
|
|
63
|
+
whiteLow: 'rgba(255, 255, 255, 0.4)',
|
|
64
|
+
whiteHover: 'rgba(255, 255, 255, 0.08)',
|
|
65
|
+
// Keyboard chrome — neutral gray (doesn't compete with blue)
|
|
66
|
+
keyboardSurface: '#D5D3D0',
|
|
67
|
+
keyCharacter: '#ffffff',
|
|
68
|
+
keyCharacterText: '#1A1A1A',
|
|
69
|
+
keyDefault: '#B5B2AE',
|
|
70
|
+
keyDefaultText: '#1A1A1A',
|
|
71
|
+
keyWrong: '#B5B2AE',
|
|
72
|
+
keyWrongMuted: '#B5B2AE',
|
|
73
|
+
keyCorrect: '#2E7D8C',
|
|
74
|
+
keyCorrectMuted: '#256A77',
|
|
75
|
+
keyAccentText: '#ffffff',
|
|
76
|
+
keyDisabled: '#6E6E6E',
|
|
77
|
+
keyDisabledText: '#9E9E9E',
|
|
78
|
+
// Toggle/Switch — teal
|
|
79
|
+
toggleTrackOn: 'rgba(46, 125, 140, 0.5)',
|
|
80
|
+
toggleTrackOff: 'rgba(0, 0, 0, 0.38)',
|
|
81
|
+
toggleThumbOn: '#2E7D8C',
|
|
82
|
+
toggleThumbOff: '#FAFAFA',
|
|
83
|
+
toggleHoverOn: 'rgba(46, 125, 140, 0.08)',
|
|
84
|
+
toggleHoverOff: 'rgba(0, 0, 0, 0.04)',
|
|
85
|
+
toggleFocusOn: 'rgba(46, 125, 140, 0.12)',
|
|
86
|
+
toggleFocusOff: 'rgba(0, 0, 0, 0.06)',
|
|
87
|
+
// 3D text shadows
|
|
88
|
+
textShadowDark: '#505050',
|
|
89
|
+
textShadow1: '#E0E0E0',
|
|
90
|
+
textShadow2: '#D0D0D0',
|
|
91
|
+
textShadow3: '#B8B8B8',
|
|
92
|
+
// RGB decompositions
|
|
93
|
+
primaryRgb: '46, 125, 140',
|
|
94
|
+
backgroundRgb: '100, 181, 246',
|
|
95
|
+
surfaceRgb: '255, 255, 255',
|
|
96
|
+
primaryDarkerRgb: '28, 85, 97',
|
|
97
|
+
};
|
|
98
|
+
export const darkPalette = {
|
|
99
|
+
// Primary — soft green for contrast on near-black
|
|
100
|
+
primary: '#81c784',
|
|
101
|
+
onPrimary: '#1a4f2e',
|
|
102
|
+
primaryContainer: '#1b5e20',
|
|
103
|
+
onPrimaryContainer: '#c8e6c9',
|
|
104
|
+
primaryDark: '#4caf50',
|
|
105
|
+
primaryDarker: '#2e7d32',
|
|
106
|
+
// Secondary — lighter orange/gold accents
|
|
107
|
+
secondary: '#E8C840',
|
|
108
|
+
onSecondary: '#161616',
|
|
109
|
+
secondaryContainer: '#2A3A2A',
|
|
110
|
+
onSecondaryContainer: '#FFF5E0',
|
|
111
|
+
secondaryLight: '#D4A520',
|
|
112
|
+
// Success
|
|
113
|
+
success: '#4ade80',
|
|
114
|
+
onSuccess: '#166534',
|
|
115
|
+
successContainer: '#243d2f',
|
|
116
|
+
onSuccessContainer: '#bbf7d0',
|
|
117
|
+
successSurface: '#1a3022',
|
|
118
|
+
successDark: '#4ade80',
|
|
119
|
+
successMuted: '#22c55e',
|
|
120
|
+
// Error — #f28078 gives >=4.5:1 on surface (#282C28)
|
|
121
|
+
error: '#f28078',
|
|
122
|
+
onError: '#161616',
|
|
123
|
+
errorMuted: '#8b5a55',
|
|
124
|
+
// Surface — near-black with subtle green tint
|
|
125
|
+
surface: '#282C28',
|
|
126
|
+
onSurface: '#eeeeee',
|
|
127
|
+
surfaceVariant: '#1C201C',
|
|
128
|
+
onSurfaceVariant: '#d0d0d0',
|
|
129
|
+
surfaceContainer: '#323632',
|
|
130
|
+
surfaceContainerHigh: '#3C403C',
|
|
131
|
+
// Background — near-black hero
|
|
132
|
+
background: '#0E110E',
|
|
133
|
+
onBackground: '#eeeeee',
|
|
134
|
+
// Outline & Dividers — neutral-tinted for green surfaces
|
|
135
|
+
outline: '#858885',
|
|
136
|
+
outlineVariant: '#656865',
|
|
137
|
+
// Shadows — subtler on dark backgrounds
|
|
138
|
+
shadow: 'rgba(0, 0, 0, 0.4)',
|
|
139
|
+
shadowLight: 'rgba(0, 0, 0, 0.25)',
|
|
140
|
+
shadowLighter: 'rgba(0, 0, 0, 0.15)',
|
|
141
|
+
shadowSubtle: 'rgba(0, 0, 0, 0.1)',
|
|
142
|
+
shadowFaint: 'rgba(0, 0, 0, 0.06)',
|
|
143
|
+
// Overlay
|
|
144
|
+
scrim: 'rgba(0, 0, 0, 0.6)',
|
|
145
|
+
scrimLight: 'rgba(0, 0, 0, 0.45)',
|
|
146
|
+
ripple: 'rgba(255, 255, 255, 0.1)',
|
|
147
|
+
// Interactive states (white variants)
|
|
148
|
+
whiteHigh: 'rgba(255, 255, 255, 0.87)',
|
|
149
|
+
whiteMedium: 'rgba(255, 255, 255, 0.5)',
|
|
150
|
+
whiteLow: 'rgba(255, 255, 255, 0.2)',
|
|
151
|
+
whiteHover: 'rgba(255, 255, 255, 0.08)',
|
|
152
|
+
// Keyboard chrome — dark green-tinted
|
|
153
|
+
keyboardSurface: '#1e241e',
|
|
154
|
+
keyCharacter: '#383e38',
|
|
155
|
+
keyCharacterText: '#eeeeee',
|
|
156
|
+
keyDefault: '#2a302a',
|
|
157
|
+
keyDefaultText: '#d0d0d0',
|
|
158
|
+
keyWrong: '#2a302a',
|
|
159
|
+
keyWrongMuted: '#2a302a',
|
|
160
|
+
keyCorrect: '#4caf50',
|
|
161
|
+
keyCorrectMuted: '#2e7d32',
|
|
162
|
+
keyAccentText: '#eeeeee',
|
|
163
|
+
keyDisabled: '#505050',
|
|
164
|
+
keyDisabledText: '#6E6E6E',
|
|
165
|
+
// Toggle/Switch — green teal
|
|
166
|
+
toggleTrackOn: 'rgba(129, 199, 132, 0.5)',
|
|
167
|
+
toggleTrackOff: 'rgba(255, 255, 255, 0.3)',
|
|
168
|
+
toggleThumbOn: '#81c784',
|
|
169
|
+
toggleThumbOff: '#6E6E6E',
|
|
170
|
+
toggleHoverOn: 'rgba(129, 199, 132, 0.08)',
|
|
171
|
+
toggleHoverOff: 'rgba(255, 255, 255, 0.04)',
|
|
172
|
+
toggleFocusOn: 'rgba(129, 199, 132, 0.12)',
|
|
173
|
+
toggleFocusOff: 'rgba(255, 255, 255, 0.06)',
|
|
174
|
+
// 3D text shadows
|
|
175
|
+
textShadowDark: '#000000',
|
|
176
|
+
textShadow1: '#2A2A2A',
|
|
177
|
+
textShadow2: '#161616',
|
|
178
|
+
textShadow3: '#000000',
|
|
179
|
+
// RGB decompositions
|
|
180
|
+
primaryRgb: '129, 199, 132',
|
|
181
|
+
backgroundRgb: '14, 17, 14',
|
|
182
|
+
surfaceRgb: '40, 44, 40',
|
|
183
|
+
primaryDarkerRgb: '46, 125, 50',
|
|
184
|
+
};
|
|
185
|
+
//# sourceMappingURL=palettes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.js","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"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"}
|
package/dist/theme.d.ts
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme system — a mechanical mapping from a per-mode {@link ModeColorPalette}
|
|
3
|
+
* to the theme object consumed via styled-components' `props.theme`.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components. The palettes carry all color values; this builder
|
|
6
|
+
* assembles them (plus spacing/styling tokens) into the shape the app reads.
|
|
7
|
+
*
|
|
8
|
+
* To wire global `DefaultTheme` typing in a consumer, augment styled-components
|
|
9
|
+
* with {@link ThemeType} (see the project's `styled.d.ts`).
|
|
10
|
+
*/
|
|
11
|
+
import type { ModeColorPalette } from './palettes.js';
|
|
12
|
+
/** Convert a hex color (`#rrggbb`) to an `"r, g, b"` string for rgba() usage */
|
|
13
|
+
export declare function hexToRgb(hex: string): string;
|
|
14
|
+
/** Build a theme object for the given mode */
|
|
15
|
+
export declare function buildTheme(mode: 'light' | 'dark'): {
|
|
16
|
+
readonly spacing: {
|
|
17
|
+
readonly appStandardPadding: "1rem";
|
|
18
|
+
};
|
|
19
|
+
readonly colors: {
|
|
20
|
+
readonly primary: string;
|
|
21
|
+
readonly onPrimary: string;
|
|
22
|
+
readonly primaryContainer: string;
|
|
23
|
+
readonly onPrimaryContainer: string;
|
|
24
|
+
readonly primaryDark: string;
|
|
25
|
+
readonly primaryDarker: string;
|
|
26
|
+
readonly secondary: string;
|
|
27
|
+
readonly onSecondary: string;
|
|
28
|
+
readonly secondaryContainer: string;
|
|
29
|
+
readonly onSecondaryContainer: string;
|
|
30
|
+
readonly secondaryLight: string;
|
|
31
|
+
readonly success: string;
|
|
32
|
+
readonly onSuccess: string;
|
|
33
|
+
readonly successContainer: string;
|
|
34
|
+
readonly onSuccessContainer: string;
|
|
35
|
+
readonly successSurface: string;
|
|
36
|
+
readonly successDark: string;
|
|
37
|
+
readonly successMuted: string;
|
|
38
|
+
readonly error: string;
|
|
39
|
+
readonly onError: string;
|
|
40
|
+
readonly errorMuted: string;
|
|
41
|
+
readonly surface: string;
|
|
42
|
+
readonly onSurface: string;
|
|
43
|
+
readonly surfaceVariant: string;
|
|
44
|
+
readonly onSurfaceVariant: string;
|
|
45
|
+
readonly surfaceContainer: string;
|
|
46
|
+
readonly surfaceContainerHigh: string;
|
|
47
|
+
readonly background: string;
|
|
48
|
+
readonly onBackground: string;
|
|
49
|
+
readonly outline: string;
|
|
50
|
+
readonly outlineVariant: string;
|
|
51
|
+
readonly shadow: string;
|
|
52
|
+
readonly shadowLight: string;
|
|
53
|
+
readonly shadowLighter: string;
|
|
54
|
+
readonly shadowSubtle: string;
|
|
55
|
+
readonly shadowFaint: string;
|
|
56
|
+
readonly scrim: string;
|
|
57
|
+
readonly scrimLight: string;
|
|
58
|
+
readonly ripple: string;
|
|
59
|
+
readonly whiteHigh: string;
|
|
60
|
+
readonly whiteMedium: string;
|
|
61
|
+
readonly whiteLow: string;
|
|
62
|
+
readonly whiteHover: string;
|
|
63
|
+
readonly keyboardSurface: string;
|
|
64
|
+
readonly keyCharacter: string;
|
|
65
|
+
readonly keyCharacterText: string;
|
|
66
|
+
readonly keyDefault: string;
|
|
67
|
+
readonly keyDefaultText: string;
|
|
68
|
+
readonly keyWrong: string;
|
|
69
|
+
readonly keyWrongMuted: string;
|
|
70
|
+
readonly keyCorrect: string;
|
|
71
|
+
readonly keyCorrectMuted: string;
|
|
72
|
+
readonly keyAccentText: string;
|
|
73
|
+
readonly keyDisabled: string;
|
|
74
|
+
readonly keyDisabledText: string;
|
|
75
|
+
readonly toggleTrackOn: string;
|
|
76
|
+
readonly toggleTrackOff: string;
|
|
77
|
+
readonly toggleThumbOn: string;
|
|
78
|
+
readonly toggleThumbOff: string;
|
|
79
|
+
readonly toggleHoverOn: string;
|
|
80
|
+
readonly toggleHoverOff: string;
|
|
81
|
+
readonly toggleFocusOn: string;
|
|
82
|
+
readonly toggleFocusOff: string;
|
|
83
|
+
readonly textShadowDark: string;
|
|
84
|
+
readonly textShadow1: string;
|
|
85
|
+
readonly textShadow2: string;
|
|
86
|
+
readonly textShadow3: string;
|
|
87
|
+
readonly primaryRgb: string;
|
|
88
|
+
readonly backgroundRgb: string;
|
|
89
|
+
readonly surfaceRgb: string;
|
|
90
|
+
readonly primaryDarkerRgb: string;
|
|
91
|
+
readonly primaryLight: string;
|
|
92
|
+
readonly backgroundHex: string;
|
|
93
|
+
readonly bottomNavBarBackgroundRgb: string;
|
|
94
|
+
readonly settingsBackgroundRgb: string;
|
|
95
|
+
readonly text: string;
|
|
96
|
+
};
|
|
97
|
+
readonly styling: {
|
|
98
|
+
readonly borderRadiusPixel: number;
|
|
99
|
+
};
|
|
100
|
+
readonly palette: ModeColorPalette;
|
|
101
|
+
};
|
|
102
|
+
/** Default light theme (for backwards compatibility and tests) */
|
|
103
|
+
export declare const theme: {
|
|
104
|
+
readonly spacing: {
|
|
105
|
+
readonly appStandardPadding: "1rem";
|
|
106
|
+
};
|
|
107
|
+
readonly colors: {
|
|
108
|
+
readonly primary: string;
|
|
109
|
+
readonly onPrimary: string;
|
|
110
|
+
readonly primaryContainer: string;
|
|
111
|
+
readonly onPrimaryContainer: string;
|
|
112
|
+
readonly primaryDark: string;
|
|
113
|
+
readonly primaryDarker: string;
|
|
114
|
+
readonly secondary: string;
|
|
115
|
+
readonly onSecondary: string;
|
|
116
|
+
readonly secondaryContainer: string;
|
|
117
|
+
readonly onSecondaryContainer: string;
|
|
118
|
+
readonly secondaryLight: string;
|
|
119
|
+
readonly success: string;
|
|
120
|
+
readonly onSuccess: string;
|
|
121
|
+
readonly successContainer: string;
|
|
122
|
+
readonly onSuccessContainer: string;
|
|
123
|
+
readonly successSurface: string;
|
|
124
|
+
readonly successDark: string;
|
|
125
|
+
readonly successMuted: string;
|
|
126
|
+
readonly error: string;
|
|
127
|
+
readonly onError: string;
|
|
128
|
+
readonly errorMuted: string;
|
|
129
|
+
readonly surface: string;
|
|
130
|
+
readonly onSurface: string;
|
|
131
|
+
readonly surfaceVariant: string;
|
|
132
|
+
readonly onSurfaceVariant: string;
|
|
133
|
+
readonly surfaceContainer: string;
|
|
134
|
+
readonly surfaceContainerHigh: string;
|
|
135
|
+
readonly background: string;
|
|
136
|
+
readonly onBackground: string;
|
|
137
|
+
readonly outline: string;
|
|
138
|
+
readonly outlineVariant: string;
|
|
139
|
+
readonly shadow: string;
|
|
140
|
+
readonly shadowLight: string;
|
|
141
|
+
readonly shadowLighter: string;
|
|
142
|
+
readonly shadowSubtle: string;
|
|
143
|
+
readonly shadowFaint: string;
|
|
144
|
+
readonly scrim: string;
|
|
145
|
+
readonly scrimLight: string;
|
|
146
|
+
readonly ripple: string;
|
|
147
|
+
readonly whiteHigh: string;
|
|
148
|
+
readonly whiteMedium: string;
|
|
149
|
+
readonly whiteLow: string;
|
|
150
|
+
readonly whiteHover: string;
|
|
151
|
+
readonly keyboardSurface: string;
|
|
152
|
+
readonly keyCharacter: string;
|
|
153
|
+
readonly keyCharacterText: string;
|
|
154
|
+
readonly keyDefault: string;
|
|
155
|
+
readonly keyDefaultText: string;
|
|
156
|
+
readonly keyWrong: string;
|
|
157
|
+
readonly keyWrongMuted: string;
|
|
158
|
+
readonly keyCorrect: string;
|
|
159
|
+
readonly keyCorrectMuted: string;
|
|
160
|
+
readonly keyAccentText: string;
|
|
161
|
+
readonly keyDisabled: string;
|
|
162
|
+
readonly keyDisabledText: string;
|
|
163
|
+
readonly toggleTrackOn: string;
|
|
164
|
+
readonly toggleTrackOff: string;
|
|
165
|
+
readonly toggleThumbOn: string;
|
|
166
|
+
readonly toggleThumbOff: string;
|
|
167
|
+
readonly toggleHoverOn: string;
|
|
168
|
+
readonly toggleHoverOff: string;
|
|
169
|
+
readonly toggleFocusOn: string;
|
|
170
|
+
readonly toggleFocusOff: string;
|
|
171
|
+
readonly textShadowDark: string;
|
|
172
|
+
readonly textShadow1: string;
|
|
173
|
+
readonly textShadow2: string;
|
|
174
|
+
readonly textShadow3: string;
|
|
175
|
+
readonly primaryRgb: string;
|
|
176
|
+
readonly backgroundRgb: string;
|
|
177
|
+
readonly surfaceRgb: string;
|
|
178
|
+
readonly primaryDarkerRgb: string;
|
|
179
|
+
readonly primaryLight: string;
|
|
180
|
+
readonly backgroundHex: string;
|
|
181
|
+
readonly bottomNavBarBackgroundRgb: string;
|
|
182
|
+
readonly settingsBackgroundRgb: string;
|
|
183
|
+
readonly text: string;
|
|
184
|
+
};
|
|
185
|
+
readonly styling: {
|
|
186
|
+
readonly borderRadiusPixel: number;
|
|
187
|
+
};
|
|
188
|
+
readonly palette: ModeColorPalette;
|
|
189
|
+
};
|
|
190
|
+
/** Type export for use in styled.d.ts augmentations */
|
|
191
|
+
export type ThemeType = ReturnType<typeof buildTheme>;
|
|
192
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM5C;AA6GD,8CAA8C;AAC9C,wBAAgB,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAPrB,MAAM;;;EASjC;AAED,kEAAkE;AAClE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAZU,MAAM;;;CAYM,CAAC;AAEzC,uDAAuD;AACvD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}
|
package/dist/theme.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme system — a mechanical mapping from a per-mode {@link ModeColorPalette}
|
|
3
|
+
* to the theme object consumed via styled-components' `props.theme`.
|
|
4
|
+
*
|
|
5
|
+
* Ported from ymy-components. The palettes carry all color values; this builder
|
|
6
|
+
* assembles them (plus spacing/styling tokens) into the shape the app reads.
|
|
7
|
+
*
|
|
8
|
+
* To wire global `DefaultTheme` typing in a consumer, augment styled-components
|
|
9
|
+
* with {@link ThemeType} (see the project's `styled.d.ts`).
|
|
10
|
+
*/
|
|
11
|
+
import { lightPalette, darkPalette } from './palettes.js';
|
|
12
|
+
/** Convert a hex color (`#rrggbb`) to an `"r, g, b"` string for rgba() usage */
|
|
13
|
+
export function hexToRgb(hex) {
|
|
14
|
+
const h = hex.replace('#', '');
|
|
15
|
+
const r = parseInt(h.substring(0, 2), 16);
|
|
16
|
+
const g = parseInt(h.substring(2, 4), 16);
|
|
17
|
+
const b = parseInt(h.substring(4, 6), 16);
|
|
18
|
+
return `${r}, ${g}, ${b}`;
|
|
19
|
+
}
|
|
20
|
+
function assembleTheme(palette) {
|
|
21
|
+
return {
|
|
22
|
+
spacing: {
|
|
23
|
+
appStandardPadding: '1rem',
|
|
24
|
+
},
|
|
25
|
+
colors: {
|
|
26
|
+
// Core tokens — 1:1 from palette
|
|
27
|
+
primary: palette.primary,
|
|
28
|
+
onPrimary: palette.onPrimary,
|
|
29
|
+
primaryContainer: palette.primaryContainer,
|
|
30
|
+
onPrimaryContainer: palette.onPrimaryContainer,
|
|
31
|
+
primaryDark: palette.primaryDark,
|
|
32
|
+
primaryDarker: palette.primaryDarker,
|
|
33
|
+
secondary: palette.secondary,
|
|
34
|
+
onSecondary: palette.onSecondary,
|
|
35
|
+
secondaryContainer: palette.secondaryContainer,
|
|
36
|
+
onSecondaryContainer: palette.onSecondaryContainer,
|
|
37
|
+
secondaryLight: palette.secondaryLight,
|
|
38
|
+
success: palette.success,
|
|
39
|
+
onSuccess: palette.onSuccess,
|
|
40
|
+
successContainer: palette.successContainer,
|
|
41
|
+
onSuccessContainer: palette.onSuccessContainer,
|
|
42
|
+
successSurface: palette.successSurface,
|
|
43
|
+
successDark: palette.successDark,
|
|
44
|
+
successMuted: palette.successMuted,
|
|
45
|
+
error: palette.error,
|
|
46
|
+
onError: palette.onError,
|
|
47
|
+
errorMuted: palette.errorMuted,
|
|
48
|
+
surface: palette.surface,
|
|
49
|
+
onSurface: palette.onSurface,
|
|
50
|
+
surfaceVariant: palette.surfaceVariant,
|
|
51
|
+
onSurfaceVariant: palette.onSurfaceVariant,
|
|
52
|
+
surfaceContainer: palette.surfaceContainer,
|
|
53
|
+
surfaceContainerHigh: palette.surfaceContainerHigh,
|
|
54
|
+
background: palette.background,
|
|
55
|
+
onBackground: palette.onBackground,
|
|
56
|
+
outline: palette.outline,
|
|
57
|
+
outlineVariant: palette.outlineVariant,
|
|
58
|
+
shadow: palette.shadow,
|
|
59
|
+
shadowLight: palette.shadowLight,
|
|
60
|
+
shadowLighter: palette.shadowLighter,
|
|
61
|
+
shadowSubtle: palette.shadowSubtle,
|
|
62
|
+
shadowFaint: palette.shadowFaint,
|
|
63
|
+
scrim: palette.scrim,
|
|
64
|
+
scrimLight: palette.scrimLight,
|
|
65
|
+
ripple: palette.ripple,
|
|
66
|
+
whiteHigh: palette.whiteHigh,
|
|
67
|
+
whiteMedium: palette.whiteMedium,
|
|
68
|
+
whiteLow: palette.whiteLow,
|
|
69
|
+
whiteHover: palette.whiteHover,
|
|
70
|
+
keyboardSurface: palette.keyboardSurface,
|
|
71
|
+
keyCharacter: palette.keyCharacter,
|
|
72
|
+
keyCharacterText: palette.keyCharacterText,
|
|
73
|
+
keyDefault: palette.keyDefault,
|
|
74
|
+
keyDefaultText: palette.keyDefaultText,
|
|
75
|
+
keyWrong: palette.keyWrong,
|
|
76
|
+
keyWrongMuted: palette.keyWrongMuted,
|
|
77
|
+
keyCorrect: palette.keyCorrect,
|
|
78
|
+
keyCorrectMuted: palette.keyCorrectMuted,
|
|
79
|
+
keyAccentText: palette.keyAccentText,
|
|
80
|
+
keyDisabled: palette.keyDisabled,
|
|
81
|
+
keyDisabledText: palette.keyDisabledText,
|
|
82
|
+
toggleTrackOn: palette.toggleTrackOn,
|
|
83
|
+
toggleTrackOff: palette.toggleTrackOff,
|
|
84
|
+
toggleThumbOn: palette.toggleThumbOn,
|
|
85
|
+
toggleThumbOff: palette.toggleThumbOff,
|
|
86
|
+
toggleHoverOn: palette.toggleHoverOn,
|
|
87
|
+
toggleHoverOff: palette.toggleHoverOff,
|
|
88
|
+
toggleFocusOn: palette.toggleFocusOn,
|
|
89
|
+
toggleFocusOff: palette.toggleFocusOff,
|
|
90
|
+
textShadowDark: palette.textShadowDark,
|
|
91
|
+
textShadow1: palette.textShadow1,
|
|
92
|
+
textShadow2: palette.textShadow2,
|
|
93
|
+
textShadow3: palette.textShadow3,
|
|
94
|
+
// RGB versions for rgba() usage in styled-components
|
|
95
|
+
primaryRgb: palette.primaryRgb,
|
|
96
|
+
backgroundRgb: palette.backgroundRgb,
|
|
97
|
+
surfaceRgb: palette.surfaceRgb,
|
|
98
|
+
primaryDarkerRgb: palette.primaryDarkerRgb,
|
|
99
|
+
// Legacy mappings (for gradual migration - can be removed later)
|
|
100
|
+
primaryLight: palette.primaryContainer,
|
|
101
|
+
backgroundHex: palette.background,
|
|
102
|
+
bottomNavBarBackgroundRgb: palette.primaryRgb,
|
|
103
|
+
settingsBackgroundRgb: palette.surfaceRgb,
|
|
104
|
+
text: palette.onSurface,
|
|
105
|
+
},
|
|
106
|
+
styling: {
|
|
107
|
+
borderRadiusPixel: 32,
|
|
108
|
+
},
|
|
109
|
+
palette,
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
/** Build a theme object for the given mode */
|
|
113
|
+
export function buildTheme(mode) {
|
|
114
|
+
return assembleTheme(mode === 'dark' ? darkPalette : lightPalette);
|
|
115
|
+
}
|
|
116
|
+
/** Default light theme (for backwards compatibility and tests) */
|
|
117
|
+
export const theme = buildTheme('light');
|
|
118
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kang-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "tsc -p tsconfig.build.json",
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
26
28
|
"prepublishOnly": "npm run build"
|
|
27
29
|
},
|
|
28
30
|
"peerDependencies": {
|
|
@@ -43,9 +45,16 @@
|
|
|
43
45
|
},
|
|
44
46
|
"devDependencies": {
|
|
45
47
|
"@react-spring/web": "^9.7.5",
|
|
48
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
49
|
+
"@testing-library/react": "^16.1.0",
|
|
46
50
|
"@types/react": "^18.3.18",
|
|
51
|
+
"@types/react-dom": "^18.3.5",
|
|
52
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
53
|
+
"jsdom": "^25.0.1",
|
|
47
54
|
"react": "^18.3.1",
|
|
55
|
+
"react-dom": "^18.3.1",
|
|
48
56
|
"styled-components": "^6.1.16",
|
|
49
|
-
"typescript": "~5.6.2"
|
|
57
|
+
"typescript": "~5.6.2",
|
|
58
|
+
"vitest": "^2.1.8"
|
|
50
59
|
}
|
|
51
60
|
}
|