Mosaic theme is using the same color for both light and dark modes

[origami-z]

One example -

[data-mode=light] ._651s9q6c, [data-mode=dark] ._651s9q6d, [data-mode=light] ._651s9q6e:hover, [data-mode=light] ._651s9q6e[data-dp-hover=true], [data-mode=dark] ._651s9q6f:hover, [data-mode=dark] ._651s9q6f[data-dp-hover=true], [data-mode=light] ._651s9q6g:visited, [data-mode=dark] ._651s9q6h:visited {
    color: var(--mosaic-color-dark-navigable-headingLink-regular);
}

I tracked it down around here:

mosaic/packages/theme/src/color/navigable.css.ts

Lines 7 to 22 in 85e0749

	export const linkColorProperties = defineProperties({
	conditions: {
	...lightModeConditions,
	lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` },
	darkModeHover: { selector: `${darkMode} &:hover, ${darkMode} &[data-dp-hover="true"]` },
	lightModeDisabled: { selector: `${lightMode} &:disabled` },
	darkModeDisabled: { selector: `${darkMode} &:disabled` }
	},
	defaultCondition: 'lightMode',
	properties: {
	color: [
	...Object.values(vars.color.light.navigable.link),
	...Object.values(vars.color.dark.navigable.link)
	]
	}
	});

Could also be around

mosaic/packages/theme/src/color/lightMode.ts

Lines 4 to 7 in 85e0749

	export const lightModeConditions = {
	lightMode: { selector: `${lightMode} &` },
	darkMode: { selector: `${darkMode} &` }
	};

mosaic/packages/theme/src/color/navigable.css.ts

Line 83 in 85e0749

...lightModeConditions,

[origami-z]

Each property (e.g. ...Object.values(vars.color.light.navigable.documentLink),) in properties are defined for all possible conditions, which generated CSS listed on the issue.

I tried (see below) defining separate light and dark properties, and pass them to createSprinkles, however, vanilla-extract will throw build error. It seems that color property available values are only resolved to whichever is passed in 2nd, maybe somewhere internally some overrides happened..?

export const lightDocumentLinkColorProperties = defineProperties({
  conditions: {
    ...lightModeCondition,
    lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` },
    lightModeVisited: { selector: `${lightMode} &:visited` },
    lightModeDisabled: { selector: `${lightMode} &:disabled` }
  },
  defaultCondition: false,
  properties: {
    color: [...Object.values(vars.color.light.navigable.documentLink)]
  }
});
export const darkDocumentLinkColorProperties = defineProperties({
  conditions: {
    ...darkModeCondition,
    darkModeHover: { selector: `${darkMode} &:hover, ${darkMode} &[data-dp-hover="true"]` },
    darkModeVisited: { selector: `${darkMode} &:visited` },
    darkModeDisabled: { selector: `${darkMode} &:disabled` }
  },
  defaultCondition: false,
  properties: {
    color: [...Object.values(vars.color.dark.navigable.documentLink)]
  }
});

export const documentLinkColorSprinkles = createSprinkles(
  lightDocumentLinkColorProperties,
  darkDocumentLinkColorProperties
);

with error

errors: [
    {
      detail: SprinklesError: "color" has no value "var(--mosaic-color-light-navigable-documentLink-regular)". Possible values are "var(--mosaic-color-dark-navigable-documentLink-regular)", "var(--mosaic-color-dark-navigable-documentLink-hover)", "var(--mosaic-color-dark-navigable-documentLink-disabled)", "var(--mosaic-color-dark-navigable-documentLink-visited)"

---

To debug change in theme, needs to run 4 dev processes

1. cd packages/theme && yarn dev
2. cd packages/components && yarn dev
3. cd packages/site-preset-styles && yarn dev
4. cd packages/site && yarn serve