From 018d3269eb1e92ff02653c0c58b1272737e2eea2 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 2 Sep 2024 10:47:10 +0100 Subject: [PATCH] Fixed link style generating light and dark modes together --- .changeset/weak-tigers-add.md | 7 + .../src/plugins/TableActionMenuPlugin.css.ts | 4 +- packages/theme/src/border/border.css.ts | 2 +- packages/theme/src/color/actionable.css.ts | 8 +- packages/theme/src/color/beforeElement.css.ts | 2 +- packages/theme/src/color/brand.css.ts | 4 +- packages/theme/src/color/callout.css.ts | 4 +- packages/theme/src/color/index.ts | 2 +- packages/theme/src/color/lightMode.ts | 7 - packages/theme/src/color/modes.ts | 30 +++ packages/theme/src/color/navigable.css.ts | 207 ++++++++++++------ packages/theme/src/color/neutral.css.ts | 6 +- packages/theme/src/color/selectable.css.ts | 4 +- packages/theme/src/color/status.css.ts | 4 +- .../componentExample/componentExample.css.ts | 6 +- packages/theme/src/link/link.css.ts | 50 +++-- packages/theme/src/opacity/opacity.css.ts | 4 +- packages/theme/src/salt/color.css.ts | 2 +- packages/theme/src/salt/salt.css.ts | 2 +- packages/theme/src/shadow/shadow.css.ts | 4 +- 20 files changed, 239 insertions(+), 120 deletions(-) create mode 100644 .changeset/weak-tigers-add.md delete mode 100644 packages/theme/src/color/lightMode.ts create mode 100644 packages/theme/src/color/modes.ts diff --git a/.changeset/weak-tigers-add.md b/.changeset/weak-tigers-add.md new file mode 100644 index 000000000..e3eb63a58 --- /dev/null +++ b/.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. diff --git a/packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.css.ts b/packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.css.ts index fda53e7c2..8d203acb1 100644 --- a/packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.css.ts +++ b/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: { diff --git a/packages/theme/src/border/border.css.ts b/packages/theme/src/border/border.css.ts index fef2a55b5..8ce6f646b 100644 --- a/packages/theme/src/border/border.css.ts +++ b/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'; diff --git a/packages/theme/src/color/actionable.css.ts b/packages/theme/src/color/actionable.css.ts index 29af9c27d..81aedf229 100644 --- a/packages/theme/src/color/actionable.css.ts +++ b/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; 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; export const secondaryColorProperties = defineProperties({ conditions: { - ...lightModeConditions, + ...bothModeConditions, lightModeHover: { selector: `${lightMode} &:hover` }, darkModeHover: { selector: `${darkMode} &:hover` }, lightModeActive: { selector: `${lightMode} &:active` }, diff --git a/packages/theme/src/color/beforeElement.css.ts b/packages/theme/src/color/beforeElement.css.ts index a4ca94158..18fce5c3f 100644 --- a/packages/theme/src/color/beforeElement.css.ts +++ b/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: { diff --git a/packages/theme/src/color/brand.css.ts b/packages/theme/src/color/brand.css.ts index 33a2292fd..4c57d27a0 100644 --- a/packages/theme/src/color/brand.css.ts +++ b/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)], diff --git a/packages/theme/src/color/callout.css.ts b/packages/theme/src/color/callout.css.ts index 781e52916..0bbe20be1 100644 --- a/packages/theme/src/color/callout.css.ts +++ b/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: [ diff --git a/packages/theme/src/color/index.ts b/packages/theme/src/color/index.ts index 146071185..5e1eee19d 100644 --- a/packages/theme/src/color/index.ts +++ b/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'; diff --git a/packages/theme/src/color/lightMode.ts b/packages/theme/src/color/lightMode.ts deleted file mode 100644 index 12722f0ab..000000000 --- a/packages/theme/src/color/lightMode.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const lightMode = '[data-mode="light"]'; -export const darkMode = '[data-mode="dark"]'; - -export const lightModeConditions = { - lightMode: { selector: `${lightMode} &` }, - darkMode: { selector: `${darkMode} &` } -}; diff --git a/packages/theme/src/color/modes.ts b/packages/theme/src/color/modes.ts new file mode 100644 index 000000000..a682bcab8 --- /dev/null +++ b/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 +}; diff --git a/packages/theme/src/color/navigable.css.ts b/packages/theme/src/color/navigable.css.ts index b09da8b20..c44b51628 100644 --- a/packages/theme/src/color/navigable.css.ts +++ b/packages/theme/src/color/navigable.css.ts @@ -2,50 +2,71 @@ 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, + lightModeInteractiveCondition, + darkModeInteractiveCondition +} from './modes'; -export const linkColorProperties = defineProperties({ +export const lightLinkColorProperties = defineProperties({ + conditions: lightModeInteractiveCondition, + defaultCondition: 'lightMode', + properties: { + color: [...Object.values(vars.color.light.navigable.link)] + } +}); +export const lightLinkColorSprinkles = createSprinkles(lightLinkColorProperties); +export type LightLinkColorSprinkles = Parameters[0]; + +export const darkLinkColorProperties = defineProperties({ + conditions: darkModeInteractiveCondition, + defaultCondition: 'darkMode', + properties: { + color: [...Object.values(vars.color.dark.navigable.link)] + } +}); +export const darkLinkColorSprinkles = createSprinkles(darkLinkColorProperties); +export type DarkLinkColorSprinkles = Parameters[0]; + +export const lightSelectableLinkColorProperties = 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` } + ...lightModeInteractiveCondition, + lightModeSelected: { selector: `${lightMode} &[data-dp-selected="true"]` } }, defaultCondition: 'lightMode', properties: { color: [ - ...Object.values(vars.color.light.navigable.link), - ...Object.values(vars.color.dark.navigable.link) + vars.color.light.navigable.selectableLink.selectedLabel, + vars.color.light.navigable.selectableLink.unselectedLabel + ], + backgroundColor: [ + vars.color.light.neutral.background.emphasis, + vars.color.light.navigable.selectableLink.selected, + vars.color.light.navigable.selectableLink.hover, + vars.color.light.navigable.selectableLink.unselected ] } }); -export const linkColorSprinkles = createSprinkles(linkColorProperties); -export type LinkColorSprinkles = Parameters[0]; +export const lightSelectableLinkColorSprinkles = createSprinkles( + lightSelectableLinkColorProperties +); +export type LightSelectableLinkColorSprinkles = Parameters< + typeof lightSelectableLinkColorSprinkles +>[0]; -export const selectableLinkColorProperties = defineProperties({ +export const darkSelectableLinkColorProperties = defineProperties({ conditions: { - ...lightModeConditions, - lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` }, - darkModeHover: { selector: `${darkMode} &:hover, ${darkMode} &[data-dp-hover="true"]` }, - lightModeSelected: { selector: `${lightMode} &[data-dp-selected="true"]` }, - darkModeSelected: { selector: `${darkMode} &[data-dp-selected="false"]` }, - lightModeDisabled: { selector: `${lightMode} &:disabled` }, - darkModeDisabled: { selector: `${darkMode} &:disabled` } + ...darkModeInteractiveCondition, + darkModeSelected: { selector: `${darkMode} &[data-dp-selected="true"]` } }, - defaultCondition: 'lightMode', + defaultCondition: 'darkMode', properties: { color: [ - vars.color.light.navigable.selectableLink.selectedLabel, - vars.color.light.navigable.selectableLink.unselectedLabel, vars.color.dark.navigable.selectableLink.selectedLabel, vars.color.dark.navigable.selectableLink.unselectedLabel ], backgroundColor: [ - vars.color.light.neutral.background.emphasis, - vars.color.light.navigable.selectableLink.selected, - vars.color.light.navigable.selectableLink.hover, - vars.color.light.navigable.selectableLink.unselected, vars.color.dark.neutral.background.emphasis, vars.color.dark.navigable.selectableLink.selected, vars.color.dark.navigable.selectableLink.hover, @@ -53,93 +74,139 @@ export const selectableLinkColorProperties = defineProperties({ ] } }); -export const selectableLinkColorSprinkles = createSprinkles(selectableLinkColorProperties); -export type SelectableLinkColorSprinkles = Parameters[0]; +export const darkSelectableLinkColorSprinkles = createSprinkles(darkSelectableLinkColorProperties); +export type DarkSelectableLinkColorSprinkles = Parameters< + typeof darkSelectableLinkColorSprinkles +>[0]; -export const documentLinkColorProperties = defineProperties({ +export const lightDocumentLinkColorProperties = defineProperties({ conditions: { - ...lightModeConditions, - lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` }, - darkModeHover: { selector: `${darkMode} &:hover, ${darkMode} &[data-dp-hover="true"]` }, - lightModeVisited: { selector: `${lightMode} &:visited` }, - darkModeVisited: { selector: `${darkMode} &:visited` }, - lightModeDisabled: { selector: `${lightMode} &:disabled` }, - darkModeDisabled: { selector: `${darkMode} &:disabled` } + ...lightModeInteractiveCondition, + lightModeVisited: { selector: `${lightMode} &:visited` } }, defaultCondition: 'lightMode', properties: { - color: [ - ...Object.values(vars.color.light.navigable.documentLink), - ...Object.values(vars.color.dark.navigable.documentLink) - ] + color: [...Object.values(vars.color.light.navigable.documentLink)] } }); -export const documentLinkColorSprinkles = createSprinkles(documentLinkColorProperties); -export type DocumentLinkColorSprinkles = Parameters[0]; +export const lightDocumentLinkColorSprinkles = createSprinkles(lightDocumentLinkColorProperties); +export type LightDocumentLinkColorSprinkles = Parameters[0]; -export const headingLinkColorProperties = defineProperties({ +export const darkDocumentLinkColorProperties = defineProperties({ conditions: { - ...lightModeConditions, - lightModeHover: { selector: `${lightMode} &:hover, ${lightMode} &[data-dp-hover="true"]` }, - darkModeHover: { selector: `${darkMode} &:hover, ${darkMode} &[data-dp-hover="true"]` }, - lightModeVisited: { selector: `${lightMode} &:visited` }, - darkModeVisited: { selector: `${darkMode} &:visited` }, - lightModeDisabled: { selector: `${lightMode} &:disabled` }, - darkModeDisabled: { selector: `${darkMode} &:disabled` } + ...darkModeInteractiveCondition, + darkModeVisited: { selector: `${darkMode} &:visited` } + }, + defaultCondition: 'darkMode', + properties: { + color: [...Object.values(vars.color.dark.navigable.documentLink)] + } +}); + +export const darkDocumentLinkColorSprinkles = createSprinkles(darkDocumentLinkColorProperties); +export type DarkDocumentLinkColorSprinkles = Parameters[0]; + +export const lightHeadingLinkColorProperties = defineProperties({ + conditions: { + ...lightModeInteractiveCondition, + lightModeVisited: { selector: `${lightMode} &:visited` } }, defaultCondition: 'lightMode', properties: { - color: [ - ...Object.values(vars.color.light.navigable.headingLink), - ...Object.values(vars.color.dark.navigable.headingLink) - ] + color: [...Object.values(vars.color.light.navigable.headingLink)] } }); -export const headingLinkColorSprinkles = createSprinkles(headingLinkColorProperties); -export type HeadingLinkColorSprinkles = Parameters[0]; +export const lightHeadingLinkColorSprinkles = createSprinkles(lightHeadingLinkColorProperties); +export type LightHeadingLinkColorSprinkles = Parameters[0]; + +export const darkHeadingLinkColorProperties = defineProperties({ + conditions: { + ...darkModeInteractiveCondition, + darkModeVisited: { selector: `${darkMode} &:visited` } + }, + defaultCondition: false, + properties: { + color: [...Object.values(vars.color.dark.navigable.headingLink)] + } +}); + +export const darkHeadingLinkColorSprinkles = createSprinkles(darkHeadingLinkColorProperties); +export type DarkHeadingLinkColorSprinkles = Parameters[0]; + +export const lightSelectableLinkColor = recipe({ + variants: { + variant: { + selected: lightSelectableLinkColorSprinkles({ + backgroundColor: { + lightModeSelected: vars.color.light.navigable.selectableLink.selected + } + }), + selectedLabel: lightSelectableLinkColorSprinkles({ + color: { + lightMode: vars.color.light.navigable.selectableLink.selectedLabel + } + }), + hover: lightSelectableLinkColorSprinkles({ + backgroundColor: { + lightModeHover: vars.color.light.navigable.selectableLink.hover + } + }), + backgroundHover: lightSelectableLinkColorSprinkles({ + backgroundColor: { + lightModeHover: vars.color.light.neutral.background.emphasis + } + }), + unselected: lightSelectableLinkColorSprinkles({ + backgroundColor: { + lightMode: vars.color.light.navigable.selectableLink.unselected + } + }), + unSelectedLabel: lightSelectableLinkColorSprinkles({ + color: { + lightMode: vars.color.light.navigable.selectableLink.unselectedLabel + } + }) + } + } +}); +export type LightSelectableLinkColorVariants = RecipeVariants; -export const selectableLinkColor = recipe({ +export const darkSelectableLinkColor = recipe({ variants: { variant: { - selected: selectableLinkColorSprinkles({ + selected: darkSelectableLinkColorSprinkles({ backgroundColor: { - lightModeSelected: vars.color.light.navigable.selectableLink.selected, darkModeSelected: vars.color.dark.navigable.selectableLink.selected } }), - selectedLabel: selectableLinkColorSprinkles({ + selectedLabel: darkSelectableLinkColorSprinkles({ color: { - lightMode: vars.color.light.navigable.selectableLink.selectedLabel, darkMode: vars.color.dark.navigable.selectableLink.selectedLabel } }), - hover: selectableLinkColorSprinkles({ + hover: darkSelectableLinkColorSprinkles({ backgroundColor: { - lightModeHover: vars.color.light.navigable.selectableLink.hover, darkModeHover: vars.color.dark.navigable.selectableLink.hover } }), - backgroundHover: selectableLinkColorSprinkles({ + backgroundHover: darkSelectableLinkColorSprinkles({ backgroundColor: { - lightModeHover: vars.color.light.neutral.background.emphasis, darkModeHover: vars.color.dark.neutral.background.emphasis } }), - unselected: selectableLinkColorSprinkles({ + unselected: darkSelectableLinkColorSprinkles({ backgroundColor: { - lightMode: vars.color.light.navigable.selectableLink.unselected, darkMode: vars.color.dark.navigable.selectableLink.unselected } }), - unSelectedLabel: selectableLinkColorSprinkles({ + unSelectedLabel: darkSelectableLinkColorSprinkles({ color: { - lightMode: vars.color.light.navigable.selectableLink.unselectedLabel, darkMode: vars.color.dark.navigable.selectableLink.unselectedLabel } }) } } }); -export type SelectableLinkColorVariants = RecipeVariants; +export type DarkSelectableLinkColorVariants = RecipeVariants; diff --git a/packages/theme/src/color/neutral.css.ts b/packages/theme/src/color/neutral.css.ts index 16de71023..22e9a5585 100644 --- a/packages/theme/src/color/neutral.css.ts +++ b/packages/theme/src/color/neutral.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 foregroundColorProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { color: [ @@ -46,7 +46,7 @@ export const foregroundColor = recipe({ export type ForegroundColorVariants = RecipeVariants; export const backgroundColorProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { backgroundColor: [ diff --git a/packages/theme/src/color/selectable.css.ts b/packages/theme/src/color/selectable.css.ts index 2d6c804b7..f45ae6c84 100644 --- a/packages/theme/src/color/selectable.css.ts +++ b/packages/theme/src/color/selectable.css.ts @@ -2,11 +2,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 selectableColorProperties = defineProperties({ conditions: { - ...lightModeConditions, + ...bothModeConditions, lightModeHover: { selector: `${lightMode} &:hover` }, darkModeHover: { selector: `${darkMode} &:hover` }, lightModeSelected: { selector: `${lightMode} &[data-dp-selected="true"]` }, diff --git a/packages/theme/src/color/status.css.ts b/packages/theme/src/color/status.css.ts index 4bda933cc..90c11ab88 100644 --- a/packages/theme/src/color/status.css.ts +++ b/packages/theme/src/color/status.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 statusColorProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { backgroundColor: [ diff --git a/packages/theme/src/componentExample/componentExample.css.ts b/packages/theme/src/componentExample/componentExample.css.ts index 6b2a526f2..8c6149ddb 100644 --- a/packages/theme/src/componentExample/componentExample.css.ts +++ b/packages/theme/src/componentExample/componentExample.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 { backgroundColorSprinkles, lightModeConditions } from '../color'; +import { backgroundColorSprinkles, bothModeConditions } from '../color'; export const innerBackgroundProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { backgroundColor: [ @@ -18,7 +18,7 @@ export const innerBackgroundSprinkles = createSprinkles(innerBackgroundPropertie export type InnerBackgroundSprinkles = Parameters[0]; export const outerBackgroundProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { backgroundColor: [ diff --git a/packages/theme/src/link/link.css.ts b/packages/theme/src/link/link.css.ts index 541f7857f..aff873149 100644 --- a/packages/theme/src/link/link.css.ts +++ b/packages/theme/src/link/link.css.ts @@ -3,10 +3,14 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes'; import { vars } from '../vars.css'; import { responsiveSprinkles } from '../responsive'; import { - documentLinkColorSprinkles, - headingLinkColorSprinkles, - linkColorSprinkles, - selectableLinkColorSprinkles + lightDocumentLinkColorSprinkles, + darkDocumentLinkColorSprinkles, + lightHeadingLinkColorSprinkles, + darkHeadingLinkColorSprinkles, + lightLinkColorSprinkles, + darkLinkColorSprinkles, + lightSelectableLinkColorSprinkles, + darkSelectableLinkColorSprinkles } from '../color'; import { textDecorationSprinkles } from '../typography'; @@ -26,10 +30,14 @@ export const link = recipe({ hover: 'none' } }), - linkColorSprinkles({ + lightLinkColorSprinkles({ color: { lightMode: vars.color.light.navigable.link.regular, - lightModeHover: vars.color.light.navigable.link.hover, + lightModeHover: vars.color.light.navigable.link.hover + } + }), + darkLinkColorSprinkles({ + color: { darkMode: vars.color.dark.navigable.link.regular, darkModeHover: vars.color.dark.navigable.link.hover } @@ -42,11 +50,15 @@ export const link = recipe({ hover: 'none' } }), - documentLinkColorSprinkles({ + lightDocumentLinkColorSprinkles({ color: { lightMode: vars.color.light.navigable.documentLink.regular, lightModeHover: vars.color.light.navigable.documentLink.hover, - lightModeVisited: vars.color.light.navigable.documentLink.visited, + lightModeVisited: vars.color.light.navigable.documentLink.visited + } + }), + darkDocumentLinkColorSprinkles({ + color: { darkMode: vars.color.dark.navigable.documentLink.regular, darkModeHover: vars.color.dark.navigable.documentLink.hover, darkModeVisited: vars.color.dark.navigable.documentLink.visited @@ -59,11 +71,15 @@ export const link = recipe({ regular: 'none' } }), - headingLinkColorSprinkles({ + lightHeadingLinkColorSprinkles({ color: { lightMode: vars.color.light.navigable.headingLink.regular, lightModeHover: vars.color.light.navigable.headingLink.hover, - lightModeVisited: vars.color.light.navigable.headingLink.visited, + lightModeVisited: vars.color.light.navigable.headingLink.visited + } + }), + darkHeadingLinkColorSprinkles({ + color: { darkMode: vars.color.dark.navigable.headingLink.regular, darkModeHover: vars.color.dark.navigable.headingLink.hover, darkModeVisited: vars.color.dark.navigable.headingLink.visited @@ -77,14 +93,20 @@ export const link = recipe({ hover: 'none' } }), - selectableLinkColorSprinkles({ + lightSelectableLinkColorSprinkles({ backgroundColor: { - lightModeHover: vars.color.light.neutral.background.emphasis, - darkModeHover: vars.color.dark.neutral.background.emphasis + lightModeHover: vars.color.light.neutral.background.emphasis }, color: { lightMode: vars.color.light.navigable.selectableLink.unselectedLabel, - lightModeSelected: vars.color.light.navigable.selectableLink.selectedLabel, + lightModeSelected: vars.color.light.navigable.selectableLink.selectedLabel + } + }), + darkSelectableLinkColorSprinkles({ + backgroundColor: { + darkModeHover: vars.color.dark.neutral.background.emphasis + }, + color: { darkMode: vars.color.dark.navigable.selectableLink.unselectedLabel, darkModeSelected: vars.color.dark.navigable.selectableLink.selectedLabel } diff --git a/packages/theme/src/opacity/opacity.css.ts b/packages/theme/src/opacity/opacity.css.ts index 329a6c72a..b4e4f8de4 100644 --- a/packages/theme/src/opacity/opacity.css.ts +++ b/packages/theme/src/opacity/opacity.css.ts @@ -1,12 +1,12 @@ import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; import { recipe, RecipeVariants } from '@vanilla-extract/recipes'; -import { darkMode, lightMode, lightModeConditions } from '../color'; +import { darkMode, lightMode, bothModeConditions } from '../color'; import { vars } from '../vars.css'; export const opacityProperties = defineProperties({ conditions: { - ...lightModeConditions, + ...bothModeConditions, lightModeActionableDisabled: { selector: `${lightMode} &:disabled` }, darkModeActionableDisabled: { selector: `${darkMode} &:disabled` } }, diff --git a/packages/theme/src/salt/color.css.ts b/packages/theme/src/salt/color.css.ts index 8cb0ebf74..6571ccc24 100644 --- a/packages/theme/src/salt/color.css.ts +++ b/packages/theme/src/salt/color.css.ts @@ -1,5 +1,5 @@ import { createGlobalTheme, createGlobalThemeContract } from '@vanilla-extract/css'; -import { darkMode, lightMode } from '../color/lightMode'; +import { darkMode, lightMode } from '../color/modes'; export const colorVars = createGlobalThemeContract({ white: '--salt-color-white', diff --git a/packages/theme/src/salt/salt.css.ts b/packages/theme/src/salt/salt.css.ts index b05f32cc0..50204fd80 100644 --- a/packages/theme/src/salt/salt.css.ts +++ b/packages/theme/src/salt/salt.css.ts @@ -1,6 +1,6 @@ import { createGlobalTheme, createGlobalThemeContract, globalStyle } from '@vanilla-extract/css'; import { horizontal } from '../responsive/vars.css'; -import { lightMode, darkMode } from '../color/lightMode'; +import { lightMode, darkMode } from '../color/modes'; import { fontWeightVars } from '../typography/vars.css'; import { colorVars as mosaicColorVars } from '../color/vars.css'; diff --git a/packages/theme/src/shadow/shadow.css.ts b/packages/theme/src/shadow/shadow.css.ts index 78d5f408b..dfc79a239 100644 --- a/packages/theme/src/shadow/shadow.css.ts +++ b/packages/theme/src/shadow/shadow.css.ts @@ -1,11 +1,11 @@ import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'; import { recipe, RecipeVariants } from '@vanilla-extract/recipes'; -import { lightModeConditions } from '../color'; +import { bothModeConditions } from '../color'; import { vars } from '../vars.css'; export const shadowProperties = defineProperties({ - conditions: lightModeConditions, + conditions: bothModeConditions, defaultCondition: ['lightMode', 'darkMode'], properties: { boxShadow: [