@haklex/rich-style-token 0.58.0 → 0.59.0

package/dist/chrome.d.ts

@@ -33,6 +33,11 @@ export declare const chromeHeight: {
     readonly md: "28px";
     readonly lg: "32px";
 };
+export declare const chromeWidth: {
+    readonly sm: "280px";
+    readonly md: "320px";
+    readonly lg: "400px";
+};
 export declare const focusRing: string;
 export declare const chromeMotion: {
     readonly popupIn: "120ms ease-out";

package/dist/chrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../src/chrome.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAC;AAEX,eAAO,MAAM,YAAY;;;;CAAgD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;CAAkD,CAAC;AAE5E,eAAO,MAAM,SAAS,QAAwE,CAAC;AAE/F,eAAO,MAAM,YAAY;;;;;CAKf,CAAC"}
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../src/chrome.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAC;AAEX,eAAO,MAAM,YAAY;;;;CAAgD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;CAAkD,CAAC;AAE5E,eAAO,MAAM,WAAW;;;;CAAqD,CAAC;AAE9E,eAAO,MAAM,SAAS,QAAwE,CAAC;AAE/F,eAAO,MAAM,YAAY;;;;;CAKf,CAAC"}

package/dist/styles.d.ts

@@ -1,8 +1,9 @@
 export { chromeTypography, contentTypography } from './baseline';
-export { chromeHeight, chromeMotion, chromeRadius, chromeText, focusRing } from './chrome';
+export { chromeHeight, chromeMotion, chromeRadius, chromeText, chromeWidth, focusRing, } from './chrome';
 export { type ThemeTokens } from './create-theme-style';
 export { createThemeStyle } from './create-theme-style';
 export { inDarkScheme } from './scheme';
+export { iconTone, type TextLevel, textLevel, toneDown } from './text-level';
 export { articleLayout, chatLayout, commentLayout, darkColors, fonts, lightArticleColors, lightCommentColors, noteLayout, } from './themes';
 export { articleTheme, chatTheme, commentTheme, noteTheme, vars } from './vars.css';
 //# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC3F,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EACL,aAAa,EACb,UAAU,EACV,aAAa,EACb,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EACL,aAAa,EACb,UAAU,EACV,aAAa,EACb,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC"}

package/dist/styles.mjs

@@ -58,6 +58,11 @@ var chromeHeight = {
 	md: "28px",
 	lg: "32px"
 };
+var chromeWidth = {
+	sm: "280px",
+	md: "320px",
+	lg: "400px"
+};
 var focusRing = `0 0 0 1px ${vars.color.accent}, 0 0 0 3px ${vars.color.accentLight}`;
 var chromeMotion = {
 	popupIn: "120ms ease-out",
@@ -71,4 +76,46 @@ function inDarkScheme(selectors) {
 	return selectors.split(",").map((selector) => selector.trim()).flatMap((selector) => [`[data-theme='dark'] ${selector}:not([data-theme='dark'] [data-theme='light'] *)`, `[data-theme='light'] [data-theme='dark'] ${selector}`]).join(", ");
 }
 //#endregion
-export { articleLayout, articleTheme, chatLayout, chatTheme, chromeHeight, chromeMotion, chromeRadius, chromeText, chromeTypography, commentLayout, commentTheme, contentTypography, createThemeStyle, darkColors, focusRing, fonts, inDarkScheme, lightArticleColors, lightCommentColors, noteLayout, noteTheme, vars };
+//#region src/text-level.ts
+/**
+* Neutral text emphasis as a single scale: level 1 is the faintest, level 4 the
+* strongest. Components color text by level instead of reaching for
+* `textSecondary` / `textTertiary` by hand, so a nested element can derive its
+* own tone from its owner's level.
+*
+* Only neutrals have an authored ladder. A colored label (accent, caution, a
+* consumer's own hue) has no such scale — and it should not need one: derive
+* its quieter step from the color itself with {@link toneDown}.
+*/
+var textLevel = {
+	1: vars.color.textQuaternary,
+	2: vars.color.textTertiary,
+	3: vars.color.textSecondary,
+	4: vars.color.text
+};
+/**
+* The color an icon takes when it sits next to a label at `level`: one step
+* quieter, clamped at 1. Icons never carry the label's own level.
+*/
+function iconTone(level) {
+	return textLevel[Math.max(level - 1, 1)];
+}
+/**
+* One quieter step for a label color that has no ladder: `accent`, `alertTone`,
+* or anything a consumer passes at runtime.
+*
+* Implemented as an alpha step of the *same* color rather than a second token,
+* so it holds for every hue, in both schemes, on any surface — and it keeps
+* tracking the label if that color is overridden. `color-mix` interpolates in
+* premultiplied sRGB, so mixing with `transparent` yields the exact color at
+* the given alpha instead of a washed-out blend.
+*
+* Solid fills (an inverted label on an accent ground) keep the icon at the
+* label's own color: a translucent glyph would let the fill through and read
+* as a third color rather than a quieter step.
+*/
+function toneDown(color, strength = 86) {
+	return `color-mix(in srgb, ${color} ${strength}%, transparent)`;
+}
+//#endregion
+export { articleLayout, articleTheme, chatLayout, chatTheme, chromeHeight, chromeMotion, chromeRadius, chromeText, chromeTypography, chromeWidth, commentLayout, commentTheme, contentTypography, createThemeStyle, darkColors, focusRing, fonts, iconTone, inDarkScheme, lightArticleColors, lightCommentColors, noteLayout, noteTheme, textLevel, toneDown, vars };

package/dist/text-level.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Neutral text emphasis as a single scale: level 1 is the faintest, level 4 the
+ * strongest. Components color text by level instead of reaching for
+ * `textSecondary` / `textTertiary` by hand, so a nested element can derive its
+ * own tone from its owner's level.
+ *
+ * Only neutrals have an authored ladder. A colored label (accent, caution, a
+ * consumer's own hue) has no such scale — and it should not need one: derive
+ * its quieter step from the color itself with {@link toneDown}.
+ */
+export declare const textLevel: {
+    readonly 1: `var(--${string})`;
+    readonly 2: `var(--${string})`;
+    readonly 3: `var(--${string})`;
+    readonly 4: `var(--${string})`;
+};
+export type TextLevel = keyof typeof textLevel;
+/**
+ * The color an icon takes when it sits next to a label at `level`: one step
+ * quieter, clamped at 1. Icons never carry the label's own level.
+ */
+export declare function iconTone(level: TextLevel): string;
+/**
+ * One quieter step for a label color that has no ladder: `accent`, `alertTone`,
+ * or anything a consumer passes at runtime.
+ *
+ * Implemented as an alpha step of the *same* color rather than a second token,
+ * so it holds for every hue, in both schemes, on any surface — and it keeps
+ * tracking the label if that color is overridden. `color-mix` interpolates in
+ * premultiplied sRGB, so mixing with `transparent` yields the exact color at
+ * the given alpha instead of a washed-out blend.
+ *
+ * Solid fills (an inverted label on an accent ground) keep the icon at the
+ * label's own color: a translucent glyph would let the fill through and read
+ * as a third color rather than a quieter step.
+ */
+export declare function toneDown(color: string, strength?: number): string;
+//# sourceMappingURL=text-level.d.ts.map

package/dist/text-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-level.d.ts","sourceRoot":"","sources":["../src/text-level.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,SAAS,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEjD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM,CAE7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-style-token",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Style tokens and CSS variables for haklex rich editor",
   "repository": {
     "type": "git",