braid-design-system
Version:
Themeable design system for the SEEK Group
134 lines (132 loc) • 3.57 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { styleVariants, style, assignVars, createThemeContract } from "@vanilla-extract/css";
import { darkMode } from "../../css/atoms/sprinkles.css.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/TextLink/TextLink.css.ts", "braid-design-system");
const textLinkVars = createThemeContract({
color: null,
colorHover: null
});
const lightModeRegularLinkVars = assignVars(textLinkVars, {
color: vars.foregroundColor.link,
colorHover: vars.foregroundColor.linkHover
});
const darkModeRegularLinkVars = assignVars(textLinkVars, {
color: vars.foregroundColor.linkLight,
colorHover: vars.foregroundColor.linkLight
});
const weakLinkVars = assignVars(textLinkVars, {
color: "inherit",
colorHover: "inherit"
});
const textDecorationThickness = "0.08em";
const base = style({
color: textLinkVars.color,
textDecoration: vars.linkDecoration,
textDecorationThickness,
textUnderlineOffset: 3,
outlineOffset: "0.2em",
borderRadius: vars.borderRadius.small,
// Ensures focus ring is rounded
":hover": {
color: textLinkVars.colorHover,
textDecoration: "underline",
/*
Duplicating the thickness property due to inconsistent support
for shorthand properties of `text-decoration`. Without this,
applying the above decoration rule resets the thickness in
browsers that do support shorthands.
We also cannot use the long-form `text-decoration-line` due
to browser support policy of Edge 16+.
*/
textDecorationThickness
},
":focus-visible": {
color: textLinkVars.colorHover
}
}, "base");
const weakLink = style({
vars: weakLinkVars,
textDecoration: "underline",
/*
Duplicating the thickness property again as the `textDecoration`
property above overrides the `textDecorationThickness` property
in the `base` style due to CSS rule ordering. Without this property,
weak links were receiving `auto` thickness instead of the desired
value.
*/
textDecorationThickness
}, "weakLink");
const regularLinkLightMode = styleVariants({
light: {
selectors: {
[`html:not(${darkMode}) &`]: {
vars: lightModeRegularLinkVars
}
}
},
dark: {
selectors: {
[`html:not(${darkMode}) &`]: {
vars: darkModeRegularLinkVars
}
}
}
}, "regularLinkLightMode");
const regularLinkDarkMode = styleVariants({
light: {
selectors: {
[`html${darkMode} &`]: {
vars: lightModeRegularLinkVars
}
}
},
dark: {
selectors: {
[`html${darkMode} &`]: {
vars: darkModeRegularLinkVars
}
}
}
}, "regularLinkDarkMode");
const visitedLightMode = styleVariants({
light: {
selectors: {
[`html:not(${darkMode}) &:visited`]: {
color: vars.foregroundColor.linkVisited
}
}
},
dark: {
selectors: {
[`html:not(${darkMode}) &:visited`]: {
color: vars.foregroundColor.linkLightVisited
}
}
}
}, "visitedLightMode");
const visitedDarkMode = styleVariants({
light: {
selectors: {
[`html${darkMode} &:visited`]: {
color: vars.foregroundColor.linkVisited
}
}
},
dark: {
selectors: {
[`html${darkMode} &:visited`]: {
color: vars.foregroundColor.linkLightVisited
}
}
}
}, "visitedDarkMode");
endFileScope();
export {
base,
regularLinkDarkMode,
regularLinkLightMode,
visitedDarkMode,
visitedLightMode,
weakLink
};