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:

https://github.com/jpmorganchase/mosaic/blob/85e074943c13a8e205fd71c119ee6c05cd72d780/packages/theme/src/color/navigable.css.ts#L7-L22

Could also be around

https://github.com/jpmorganchase/mosaic/blob/85e074943c13a8e205fd71c119ee6c05cd72d780/packages/theme/src/color/lightMode.ts#L4-L7

https://github.com/jpmorganchase/mosaic/blob/85e074943c13a8e205fd71c119ee6c05cd72d780/packages/theme/src/color/navigable.css.ts#L83

[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