braid-design-system
Version:
Themeable design system for the SEEK Group
62 lines (61 loc) • 1.81 kB
JavaScript
"use strict";
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
fileScope.setFileScope("src/lib/components/private/Placeholder/Placeholder.css.ts", "braid-design-system");
const vars = css.createThemeContract({
background: null,
borderColor: null,
labelColor: null,
lineColor: null
});
const lightContextVars = {
vars: css.assignVars(vars, {
background: "hsla(0, 0%, 20%, 0.08)",
borderColor: "hsla(0, 0%, 20%, 0.3)",
labelColor: "hsla(0, 0%, 20%, 0.4)",
lineColor: "hsla(0, 0%, 20%, 0.1)"
})
};
const darkContextVars = {
vars: css.assignVars(vars, {
background: "hsla(0, 0%, 100%, 0.05)",
borderColor: "hsla(0, 0%, 100%, 0.4)",
labelColor: "hsla(0, 0%, 100%, 0.6)",
lineColor: "hsla(0, 0%, 100%, 0.2)"
})
};
const lightTheme = css.styleVariants({
light: lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: lightContextVars
}),
dark: lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: darkContextVars
})
}, "lightTheme");
const darkTheme = css.styleVariants({
light: lib_css_colorModeStyle_cjs.colorModeStyle({
darkMode: lightContextVars
}),
dark: lib_css_colorModeStyle_cjs.colorModeStyle({
darkMode: darkContextVars
})
}, "darkTheme");
const borderWidth = "2px";
const box = css.style({
background: vars.background,
border: `${borderWidth} solid ${vars.borderColor}`
}, "box");
const label = css.style({
color: vars.labelColor
}, "label");
const line = css.style({
strokeWidth: borderWidth,
stroke: vars.lineColor
}, "line");
fileScope.endFileScope();
exports.box = box;
exports.darkTheme = darkTheme;
exports.label = label;
exports.lightTheme = lightTheme;
exports.line = line;