braid-design-system
Version:
Themeable design system for the SEEK Group
161 lines (160 loc) • 5.12 kB
JavaScript
;
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const polished = require("polished");
const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
const lib_css_outlineStyle_cjs = require("../../css/outlineStyle.cjs");
const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
fileScope.setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
const root = css.style({
textDecoration: "none",
// Necessary to overwrite Safari's default value for 'align-items' in 'button' elements (which is 'flex-start')
alignItems: "stretch",
// Necessary to overwrite browser default for 'a' elements (which is '1px'), keeping Button & ButtonLink uniform.
outlineOffset: 0
}, "root");
const forceActive = css.style({}, "forceActive");
const activeAnimation = css.style({
selectors: {
[`${root}:active &, ${forceActive}&`]: {
transform: lib_themes_vars_css_cjs.vars.transform.touchable
}
}
}, "activeAnimation");
const activeOverlay = css.style({
selectors: {
[`${root}:active &, ${forceActive}&`]: {
opacity: 1
}
}
}, "activeOverlay");
const hoverOverlay = css.style({
selectors: {
[`${root}:hover:not(:disabled) &`]: {
opacity: 1
}
}
}, "hoverOverlay");
const {
transition: outlineTransition,
...restOutlineStyles
} = lib_css_outlineStyle_cjs.outlineStyle(`${root}:focus-visible > &`);
const focusRing = css.style([{
transition: [lib_themes_vars_css_cjs.vars.transition.touchable, outlineTransition].join(", ")
}, restOutlineStyles], "focusRing");
const minHeightValueForSize = {
standard: lib_themes_vars_css_cjs.vars.touchableSize,
small: cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
};
const capHeightToMinHeight = css.createVar("capHeightToMinHeight");
const paddingVarForBreakpoint = (size, breakpoint) => ({
vars: {
[capHeightToMinHeight]: cssUtils.calc(minHeightValueForSize[size]).subtract(lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).toString()
}
});
const standard = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
mobile: paddingVarForBreakpoint("standard", "mobile"),
tablet: paddingVarForBreakpoint("standard", "tablet")
}), "standard");
const small = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
mobile: paddingVarForBreakpoint("small", "mobile"),
tablet: paddingVarForBreakpoint("small", "tablet")
}), "small");
const bleedVerticallyToCapHeight = css.style({
marginTop: cssUtils.calc.negate(capHeightToMinHeight),
marginBottom: cssUtils.calc.negate(capHeightToMinHeight)
}, "bleedVerticallyToCapHeight");
const padToMinHeight = css.style({
paddingTop: capHeightToMinHeight,
paddingBottom: capHeightToMinHeight
}, "padToMinHeight");
const dot1 = css.keyframes({
"14%": {
opacity: 0
},
"15%,100%": {
opacity: 1
}
}, "dot1");
const dot2 = css.keyframes({
"29%": {
opacity: 0
},
"30%,100%": {
opacity: 1
}
}, "dot2");
const dot3 = css.keyframes({
"44%": {
opacity: 0
},
"45%,100%": {
opacity: 1
}
}, "dot3");
const loadingDot = css.style({
animationDuration: "1s",
animationIterationCount: "infinite",
opacity: 0,
selectors: {
[`&:nth-child(1)`]: {
animationName: dot1
},
[`&:nth-child(2)`]: {
animationName: dot2
},
[`&:nth-child(3)`]: {
animationName: dot3
}
}
}, "loadingDot");
const invertedBackgroundsLightMode = css.styleVariants({
soft: lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: {
background: polished.rgba("#fff", 0.1)
}
}),
hover: lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: {
background: polished.rgba("#fff", 0.15)
}
}),
active: lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: {
background: polished.rgba("#fff", 0.15)
}
})
}, "invertedBackgroundsLightMode");
const invertedBackgroundsDarkMode = css.styleVariants({
soft: lib_css_colorModeStyle_cjs.colorModeStyle({
darkMode: {
background: polished.rgba("#fff", 0.1)
}
}),
hover: lib_css_colorModeStyle_cjs.colorModeStyle({
darkMode: {
background: polished.rgba("#fff", 0.15)
}
}),
active: lib_css_colorModeStyle_cjs.colorModeStyle({
darkMode: {
background: polished.rgba("#fff", 0.15)
}
})
}, "invertedBackgroundsDarkMode");
fileScope.endFileScope();
exports.activeAnimation = activeAnimation;
exports.activeOverlay = activeOverlay;
exports.bleedVerticallyToCapHeight = bleedVerticallyToCapHeight;
exports.focusRing = focusRing;
exports.forceActive = forceActive;
exports.hoverOverlay = hoverOverlay;
exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
exports.loadingDot = loadingDot;
exports.padToMinHeight = padToMinHeight;
exports.root = root;
exports.small = small;
exports.standard = standard;