eco-vue-js 0.20.1 → 0.20.2

package/dist/components/Chart/components/HeatmapCell.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ var HeatmapCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const tooltipRef = useTemplateRef("tooltip");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["group/cell relative rounded-sm p-(--w-chart-heatmap-gap,0.125rem)", __props.opacity !== null ? "cursor-crosshair" : void 0]) }, [createElementVNode("div", {
-				class: normalizeClass(["size-(--w-chart-heatmap-size,1rem) rounded-sm", __props.empty ? void 0 : __props.opacity !== null ? "bg-current" : "bg-surface-muted/50"]),
+				class: normalizeClass(["size-(--w-chart-heatmap-size,1rem) rounded-sm", __props.empty ? void 0 : __props.opacity !== null ? "bg-current" : "bg-surface-subtle"]),
 				style: normalizeStyle(__props.opacity !== null && !__props.empty ? { opacity: __props.opacity } : void 0)
 			}, null, 6), _ctx.$slots.default && __props.opacity !== null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(["absolute inset-(--w-chart-heatmap-gap,0.125rem) rounded-sm border-current group-hover/cell:border-2", tooltipRef.value?.isOpen ? "border-2" : void 0]) }, null, 2), createVNode(WTooltip_default, {
 				ref: "tooltip",

package/dist/components/List/components/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -150,7 +150,7 @@ var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					class: ["relative", {
 						[__props.cardWrapperClass ?? ""]: true,
 						"w-ripple-trigger-list": isActionShown.value,
-						"sm-not:even:bg-surface-muted/50 grid grid-cols-1": __props.card,
+						"sm-not:even:bg-surface-subtle grid grid-cols-1": __props.card,
 						"flex": !__props.card,
 						"-mb-px": !__props.card && isOpen.value,
 						"w-hover-checked": __props.allowSelectHover

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.20.1",
+  "version": "0.20.2",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/scripts/color-roles-codemod.js

@@ -7,6 +7,7 @@
  *   'border-gray-300 dark:border-gray-700'           → 'border-line'
  *   'text-negative dark:text-negative-dark'          → 'tone-negative text-tone'
  *   'bg-primary/10 dark:bg-primary-dark/10'          → 'tone-primary bg-tone-fill/10'
+ *   'bg-primary-light dark:bg-primary-darkest'       → 'tone-primary bg-tone-soft'
  *
  *   npx eco-vue-color-roles [--write] [--exact] [--theme <css>] [paths…]     default: src
  *
@@ -37,6 +38,7 @@ const ROLES = [
   {role: 'text-description', color: 'description', props: TEXT_PROPS, light: 'gray-500', dark: 'gray-400'},
   {role: 'text-subtle', color: 'subtle', props: TEXT_PROPS, light: 'gray-400', dark: 'gray-600'},
   {role: 'surface', color: 'surface', props: [...SURFACE_PROPS, 'text'], light: 'default', dark: 'default-dark'},
+  {role: 'surface-subtle', color: 'surface-subtle', props: SURFACE_PROPS, light: 'gray-50', dark: 'gray-850'},
   {role: 'surface-muted', color: 'surface-muted', props: SURFACE_PROPS, light: 'gray-100', dark: 'gray-800'},
   {role: 'surface-inset', color: 'surface-inset', props: SURFACE_PROPS, light: 'gray-200', dark: 'gray-700'},
   {role: 'track', color: 'track', props: ['bg', 'fill', 'stroke'], light: 'gray-300', dark: 'gray-700'},
@@ -59,6 +61,11 @@ const NEUTRAL_UNIFIED = {
   'border:gray-200|gray-800': 'border-line-subtle', // dark 800 → 700
   // Exactly `line-raised`, but in app code these are card borders, not the edge of a popup.
   'border:gray-100|gray-800': 'border-line-subtle', // light 100 → 200, dark 800 → 700
+  // Half of `surface-muted` over the surface, which is what `gray-850` is in dark mode.
+  'bg:gray-50|gray-800/50': 'bg-surface-subtle',
+  'bg:gray-50|gray-800/40': 'bg-surface-subtle', // dark a bit stronger
+  'bg:gray-100/50|gray-800/50': 'bg-surface-subtle',
+  'bg:gray-50|gray-800': 'bg-surface-muted', // light 50 → 100
 }
 
 /**
@@ -157,11 +164,16 @@ const transformClasses = (value, exact, table) => {
     } else {
       const tone = TONES.find(item => lightColor === item && darkColor === item + '-dark' && lightAlpha === darkAlpha)
       const toneProp = TONE_PROPS[/** @type {keyof typeof TONE_PROPS} */ (light.prop)]
+      // `bg-primary-light dark:bg-primary-darkest` is the soft background, which the tone mixes from its fill.
+      const soft = light.prop === 'bg' && TONES.find(item => lightColor === item + '-light' && darkColor === item + '-darkest' && lightAlpha === darkAlpha)
 
       // A tone is set on the whole string, so only strings with one tone and no state variant on it qualify.
       if (tone && toneProp && (toneProp.exact || !exact) && !light.variants && tonesInString.size === 1) {
         next = toneProp.utility + alpha
         addTone = 'tone-' + tone
+      } else if (soft && !exact && !light.variants && tonesInString.size === 1) {
+        next = 'bg-tone-soft' + alpha
+        addTone = 'tone-' + soft
       }
     }
 
@@ -173,14 +185,19 @@ const transformClasses = (value, exact, table) => {
     replaced.push(`${ light.raw } ${ dark.raw } → ${ next }`)
     words[index] = next
     words[darkIndex] = ''
+    // The removed class takes one separator with it: the one before, unless it starts the string or a line. Lines and
+    // their indentation stay as they were.
+    const before = words[darkIndex - 1]
+    const dropAfter = darkIndex === 0 || (before?.includes('\n') && darkIndex + 1 < words.length)
+
+    words[dropAfter ? darkIndex + 1 : darkIndex - 1] = ''
     tokens[index] = null
     tokens[darkIndex] = null
   })
 
-  // Removed classes leave gaps: collapse them, drop spaces left before line breaks, keep the string's own edges.
-  const lead = value.match(/^\s*/)?.[0] ?? ''
-  const trail = value.match(/\s*$/)?.[0] ?? ''
-  let text = lead + words.join('').trim().replace(/[ \t]{2,}/g, ' ').replace(/[ \t]+\n/g, '\n') + trail
+  if (!replaced.length) return {text: value, replaced, unmapped, left: tokens.filter(token => token !== null).map(token => token.raw)}
+
+  let text = words.join('')
 
   if (addTone && !text.split(/\s+/).includes(addTone)) text = text.replace(/^(\s*)/, `$1${ addTone } `)
 

package/tailwind-base/css/roles.css

@@ -21,6 +21,8 @@
 
   --role-surface: var(--color-default);
   --role-surface-dark: var(--color-default-dark);
+  --role-surface-subtle: var(--color-gray-50);
+  --role-surface-subtle-dark: var(--color-gray-850);
   --role-surface-muted: var(--color-gray-100);
   --role-surface-muted-dark: var(--color-gray-800);
   --role-surface-inset: var(--color-gray-200);
@@ -59,6 +61,7 @@
   --color-subtle: var(--w-text-subtle);
 
   --color-surface: var(--w-surface);
+  --color-surface-subtle: var(--w-surface-subtle);
   --color-surface-muted: var(--w-surface-muted);
   --color-surface-inset: var(--w-surface-inset);
   --color-overlay: var(--w-overlay);
@@ -112,6 +115,7 @@
     --w-text-subtle: light-dark(var(--role-text-subtle), var(--role-text-subtle-dark));
 
     --w-surface: light-dark(var(--role-surface), var(--role-surface-dark));
+    --w-surface-subtle: light-dark(var(--role-surface-subtle), var(--role-surface-subtle-dark));
     --w-surface-muted: light-dark(var(--role-surface-muted), var(--role-surface-muted-dark));
     --w-surface-inset: light-dark(var(--role-surface-inset), var(--role-surface-inset-dark));
     --w-overlay: light-dark(var(--role-overlay), var(--role-overlay-dark));

package/tailwind-base/css/theme.css

@@ -14,8 +14,8 @@
    */
   --color-primary: oklch(55% 0.17 286.8);
   --color-primary-dark: var(--color-primary);
-  --color-primary-light: color-mix(in oklab, var(--color-primary) 10%, var(--color-default));
-  --color-primary-darkest: color-mix(in oklab, var(--color-primary-dark) 20%, var(--color-default-dark));
+  --color-primary-light: color-mix(in oklab, var(--color-primary) 7%, var(--color-default));
+  --color-primary-darkest: color-mix(in oklab, var(--color-primary-dark) 10%, var(--color-default-dark));
 
   --color-black-default: #333333;
   --color-black-light: #4f4f4f;