Fixed link style generating light and dark modes together

.changeset/weak-tigers-add.md

@@ -0,0 +1,7 @@
+---
+'@jpmorganchase/mosaic-content-editor-plugin': patch
+'@jpmorganchase/mosaic-site': patch
+'@jpmorganchase/mosaic-theme': patch
+---
+
+Fixed link style CSS is generated against both light and dark modes. Fixed #640.

packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.css.ts

@@ -1,9 +1,9 @@
-import { lightModeConditions, vars } from '@jpmorganchase/mosaic-theme';
+import { bothModeConditions, vars } from '@jpmorganchase/mosaic-theme';
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 
 export const outlineProperties = defineProperties({
   conditions: {
-    ...lightModeConditions
+    ...bothModeConditions
   },
   defaultCondition: 'lightMode',
   properties: {

packages/theme/src/border/border.css.ts

@@ -1,5 +1,5 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { darkMode, lightMode } from '../color/lightMode';
+import { darkMode, lightMode } from '../color/modes';
 
 import { vars } from '../vars.css';
 

packages/theme/src/color/actionable.css.ts

@@ -1,11 +1,11 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { vars } from '../vars.css';
-import { darkMode, lightMode, lightModeConditions } from './lightMode';
+import { darkMode, lightMode, bothModeConditions } from './modes';
 
 export const ctaColorProperties = defineProperties({
   conditions: {
-    ...lightModeConditions,
+    ...bothModeConditions,
     lightModeHover: { selector: `${lightMode} &:hover` },
     darkModeHover: { selector: `${darkMode} &:hover` },
     lightModeActive: { selector: `${lightMode} &:active` },
@@ -63,7 +63,7 @@ export type CtaColorVariants = RecipeVariants<typeof ctaColor>;
 
 export const primaryColorProperties = defineProperties({
   conditions: {
-    ...lightModeConditions,
+    ...bothModeConditions,
     lightModeHover: { selector: `${lightMode} &:hover` },
     darkModeHover: { selector: `${darkMode} &:hover` },
     lightModeActive: { selector: `${lightMode} &:active` },
@@ -120,7 +120,7 @@ export type PrimaryColorVariants = RecipeVariants<typeof primaryColor>;
 
 export const secondaryColorProperties = defineProperties({
   conditions: {
-    ...lightModeConditions,
+    ...bothModeConditions,
     lightModeHover: { selector: `${lightMode} &:hover` },
     darkModeHover: { selector: `${darkMode} &:hover` },
     lightModeActive: { selector: `${lightMode} &:active` },

packages/theme/src/color/beforeElement.css.ts

@@ -1,7 +1,7 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 
 import { vars } from '../vars.css';
-import { darkMode, lightMode } from './lightMode';
+import { darkMode, lightMode } from './modes';
 
 export const beforeElementColorProperties = defineProperties({
   conditions: {

packages/theme/src/color/brand.css.ts

@@ -2,10 +2,10 @@ import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { vars } from '../vars.css';
-import { lightModeConditions } from './lightMode';
+import { bothModeConditions } from './modes';
 
 export const brandColorProperties = defineProperties({
-  conditions: lightModeConditions,
+  conditions: bothModeConditions,
   defaultCondition: ['lightMode', 'darkMode'],
   properties: {
     color: [...Object.values(vars.color.light.brand), ...Object.values(vars.color.dark.brand)],

packages/theme/src/color/callout.css.ts

@@ -2,10 +2,10 @@ import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { vars } from '../vars.css';
-import { lightModeConditions } from './lightMode';
+import { bothModeConditions } from './modes';
 
 export const calloutColorProperties = defineProperties({
-  conditions: lightModeConditions,
+  conditions: bothModeConditions,
   defaultCondition: ['lightMode', 'darkMode'],
   properties: {
     backgroundColor: [

packages/theme/src/color/index.ts

@@ -6,4 +6,4 @@ export * from './navigable.css';
 export * from './neutral.css';
 export * from './selectable.css';
 export * from './status.css';
-export * from './lightMode';
+export * from './modes';

packages/theme/src/color/modes.ts

@@ -0,0 +1,30 @@
+export const lightMode = '[data-mode="light"]';
+export const darkMode = '[data-mode="dark"]';
+
+export const lightModeCondition = {
+  lightMode: { selector: `${lightMode} &` }
+};
+export const lightModeInteractiveCondition = {
+  ...lightModeCondition,
+  lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` },
+  lightModeActive: { selector: `${lightMode} &:active` },
+  lightModeDisabled: { selector: `${lightMode} &:disabled` }
+};
+export const darkModeCondition = {
+  darkMode: { selector: `${darkMode} &` }
+};
+export const darkModeInteractiveCondition = {
+  ...darkModeCondition,
+  darkModeHover: { selector: `${darkMode} &:hover` },
+  darkModeActive: { selector: `${darkMode} &:active` },
+  darkModeDisabled: { selector: `${darkMode} &:disabled` }
+};
+
+/**
+ * Both modes conditions, use with caution.
+ * All properties will be generated against both modes, if you use with `defineProperties`.
+ * */
+export const bothModeConditions = {
+  ...lightModeCondition,
+  ...darkModeCondition
+};