@weasel-js/theme 1.7.3 → 1.8.0

package/README.md

@@ -62,6 +62,13 @@ In React, `<ThemeProvider theme={acme} selection={{ mode: 'light' }}>` from
 `useTheme()` — which is how canvas and WebGL surfaces stay in sync without
 reading the DOM.
 
+`--wzl-fg-muted` and `--wzl-fg-subtle` are not fixed colors: each is the text
+color in effect where it is used, at a lower alpha (`rgb(from currentColor r g b
+/ 0.7)`), so muted text on an accent fill steps down from the on-accent text
+beside it. The resolved record carries that CSS as is, because a canvas has no
+`currentColor`; flatten it with `resolveCurrentColor(value, resolved['--wzl-fg'])`,
+passing the color of the text it is drawn beside.
+
 ## The engine
 
 `@weasel-js/theme/engine` is for authoring layered theme definitions: seeds,

package/dist/{chunk-HO2AM2OB.js → chunk-BOC4EQ5K.js}

@@ -1,4 +1,4 @@
-import { themeAxes, fullSelection, selectionKey, resolveTheme, themeChain, isByAxis, generate, DEFAULT_CONSTRAINTS } from './chunk-AN5JVL2S.js';
+import { themeAxes, fullSelection, selectionKey, resolveTheme, themeChain, isByAxis, generate, DEFAULT_CONSTRAINTS } from './chunk-NUILKH2Z.js';
 
 // src/generated/themes.ts
 var THEMES = {
@@ -51,8 +51,8 @@ var THEMES = {
         "--wzl-surface-raised": "#25272c",
         "--wzl-surface-sunken": "#0e0f12",
         "--wzl-fg": "#e6e7e9",
-        "--wzl-fg-muted": "#9ea1a8",
-        "--wzl-fg-subtle": "#6f737b",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.7)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.54)",
         "--wzl-border": "#25272c",
         "--wzl-border-strong": "#6f737b",
         "--wzl-accent-fg": "#8c94ee",
@@ -87,8 +87,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#6f737b",
-        "--wzl-stance-advanced-title-color": "#6f737b",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.54)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.54)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -220,8 +220,8 @@ var THEMES = {
         "--wzl-surface-raised": "#25272c",
         "--wzl-surface-sunken": "#0e0f12",
         "--wzl-fg": "#e6e7e9",
-        "--wzl-fg-muted": "#9ea1a8",
-        "--wzl-fg-subtle": "#6f737b",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.7)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.54)",
         "--wzl-border": "#25272c",
         "--wzl-border-strong": "#6f737b",
         "--wzl-accent-fg": "#8c94ee",
@@ -256,8 +256,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#6f737b",
-        "--wzl-stance-advanced-title-color": "#6f737b",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.54)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.54)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -389,8 +389,8 @@ var THEMES = {
         "--wzl-surface-raised": "#25272c",
         "--wzl-surface-sunken": "#0e0f12",
         "--wzl-fg": "#e6e7e9",
-        "--wzl-fg-muted": "#9ea1a8",
-        "--wzl-fg-subtle": "#6f737b",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.7)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.54)",
         "--wzl-border": "#25272c",
         "--wzl-border-strong": "#6f737b",
         "--wzl-accent-fg": "#8c94ee",
@@ -425,8 +425,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(230, 231, 233, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#6f737b",
-        "--wzl-stance-advanced-title-color": "#6f737b",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.54)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.54)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -558,8 +558,8 @@ var THEMES = {
         "--wzl-surface-raised": "#e6e7e9",
         "--wzl-surface-sunken": "#c9cbcf",
         "--wzl-fg": "#0e0f12",
-        "--wzl-fg-muted": "#383b42",
-        "--wzl-fg-subtle": "#4d5058",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.78)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.64)",
         "--wzl-border": "#c9cbcf",
         "--wzl-border-strong": "#4d5058",
         "--wzl-accent-fg": "#4338ca",
@@ -594,8 +594,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#4d5058",
-        "--wzl-stance-advanced-title-color": "#4d5058",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.64)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.64)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -727,8 +727,8 @@ var THEMES = {
         "--wzl-surface-raised": "#e6e7e9",
         "--wzl-surface-sunken": "#c9cbcf",
         "--wzl-fg": "#0e0f12",
-        "--wzl-fg-muted": "#383b42",
-        "--wzl-fg-subtle": "#4d5058",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.78)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.64)",
         "--wzl-border": "#c9cbcf",
         "--wzl-border-strong": "#4d5058",
         "--wzl-accent-fg": "#4338ca",
@@ -763,8 +763,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#4d5058",
-        "--wzl-stance-advanced-title-color": "#4d5058",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.64)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.64)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -896,8 +896,8 @@ var THEMES = {
         "--wzl-surface-raised": "#e6e7e9",
         "--wzl-surface-sunken": "#c9cbcf",
         "--wzl-fg": "#0e0f12",
-        "--wzl-fg-muted": "#383b42",
-        "--wzl-fg-subtle": "#4d5058",
+        "--wzl-fg-muted": "rgb(from currentColor r g b / 0.78)",
+        "--wzl-fg-subtle": "rgb(from currentColor r g b / 0.64)",
         "--wzl-border": "#c9cbcf",
         "--wzl-border-strong": "#4d5058",
         "--wzl-accent-fg": "#4338ca",
@@ -932,8 +932,8 @@ var THEMES = {
         "--wzl-line-subtle": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-border-color": "rgba(14, 15, 18, 0.1)",
         "--wzl-stance-aside-blur": "0px",
-        "--wzl-stance-aside-title-color": "#4d5058",
-        "--wzl-stance-advanced-title-color": "#4d5058",
+        "--wzl-stance-aside-title-color": "rgb(from currentColor r g b / 0.64)",
+        "--wzl-stance-advanced-title-color": "rgb(from currentColor r g b / 0.64)",
         "--wzl-stance-debug-border-style": "dashed",
         "--wzl-font-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
         "--wzl-stance-debug-title-font": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
@@ -1247,23 +1247,27 @@ var THEME_SOURCES = {
       "fg-muted": {
         "by": "mode",
         "dark": {
-          "ref": "gray-300",
-          "type": "color"
+          "value": "rgb(from currentColor r g b / 0.7)",
+          "type": "color",
+          "description": "Secondary text: the text color in effect where it is used, at reduced alpha, so it steps down from whatever text it sits beside on any surface. The alpha is absolute, so muted text nested in muted text stays one step down. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         },
         "light": {
-          "ref": "gray-600",
-          "type": "color"
+          "value": "rgb(from currentColor r g b / 0.78)",
+          "type": "color",
+          "description": "Secondary text: the text color in effect where it is used, at reduced alpha, so it steps down from whatever text it sits beside on any surface. The alpha is absolute, so muted text nested in muted text stays one step down. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         }
       },
       "fg-subtle": {
         "by": "mode",
         "dark": {
-          "ref": "gray-400",
-          "type": "color"
+          "value": "rgb(from currentColor r g b / 0.54)",
+          "type": "color",
+          "description": "Tertiary text: a further step down from the text color in effect, by the same rule as fg-muted. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         },
         "light": {
-          "ref": "gray-500",
-          "type": "color"
+          "value": "rgb(from currentColor r g b / 0.64)",
+          "type": "color",
+          "description": "Tertiary text: a further step down from the text color in effect, by the same rule as fg-muted. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         }
       },
       "border": {
@@ -2451,22 +2455,26 @@ var BAKED_THEMES = {
         "by": "mode",
         "dark": {
           "type": "color",
-          "value": "{gray-300}"
+          "value": "rgb(from currentColor r g b / 0.7)",
+          "description": "Secondary text: the text color in effect where it is used, at reduced alpha, so it steps down from whatever text it sits beside on any surface. The alpha is absolute, so muted text nested in muted text stays one step down. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         },
         "light": {
           "type": "color",
-          "value": "{gray-600}"
+          "value": "rgb(from currentColor r g b / 0.78)",
+          "description": "Secondary text: the text color in effect where it is used, at reduced alpha, so it steps down from whatever text it sits beside on any surface. The alpha is absolute, so muted text nested in muted text stays one step down. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         }
       },
       "fg-subtle": {
         "by": "mode",
         "dark": {
           "type": "color",
-          "value": "{gray-400}"
+          "value": "rgb(from currentColor r g b / 0.54)",
+          "description": "Tertiary text: a further step down from the text color in effect, by the same rule as fg-muted. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         },
         "light": {
           "type": "color",
-          "value": "{gray-500}"
+          "value": "rgb(from currentColor r g b / 0.64)",
+          "description": "Tertiary text: a further step down from the text color in effect, by the same rule as fg-muted. Under fg it clears WCAG 4.5:1 on surface, surface-raised, and surface-sunken in both modes."
         }
       },
       "border": {
@@ -3347,5 +3355,5 @@ function colorCount(list, ctx = defaultContext()) {
 }
 
 export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, colorAt, colorCount, colorCssAt, defineTheme, isColorModePreference, rampSteps, themeTones, weaselTheme };
-//# sourceMappingURL=chunk-HO2AM2OB.js.map
-//# sourceMappingURL=chunk-HO2AM2OB.js.map
+//# sourceMappingURL=chunk-BOC4EQ5K.js.map
+//# sourceMappingURL=chunk-BOC4EQ5K.js.map