@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
250 lines (249 loc) • 6.6 kB
JavaScript
const r = {
duration: {
100: "var(--ds-animation-duration, 100ms)",
250: "var(--ds-animation-duration, 250ms)",
400: "var(--ds-animation-duration, 400ms)"
},
motionFunctional: {
linear: "linear",
easeIn: "cubic-bezier(0.5, 0, 1, 1)",
easeOut: "cubic-bezier(0, 0, 0.5, 1)",
easeInOut: "cubic-bezier(0.5, 0, 0.5, 1)"
}
}, a = {
base: 0,
s: 320,
m: 768,
l: 1024,
xl: 1536,
xxl: 1668,
xxxl: 1920
}, i = {
0: "0px",
1: "1px",
2: "2px",
4: "4px",
6: "6px",
8: "8px",
12: "12px",
14: "14px",
16: "16px",
20: "20px",
24: "24px",
32: "32px",
40: "40px",
48: "48px",
56: "56px",
64: "64px",
80: "80px",
96: "96px",
128: "128px",
160: "160px"
}, e = {
black: {
base: "#050505",
opacity_10: "#0000001A",
opacity_50: "#00000080"
},
blue: {
base: "#249ABE",
dark: "#1E71A1",
deep: "#19618B",
light: "#D4ECF7",
mid: "#8DCFE8"
},
forest: {
base: "#4A9E5F",
dark: "#3C8653",
deep: "#2D7644",
light: "#DBF0E1",
mid: "#77C089"
},
green: {
base: "#749F4A",
dark: "#5B863C",
deep: "#46762D",
light: "#E5F0DB",
mid: "#9BC077"
},
grey: {
base: "#B1B1B1",
dark: "#666666",
deep: "#444444",
light: "#EDEDED",
mid: "#DADADA",
semiDark: "#8C8C8C",
ultraDeep: "#252525",
ultraLight: "#F8F8F8"
},
orange: {
base: "#F37A1F",
dark: "#E9640C",
deep: "#D9480F",
light: "#FEE2CD",
mid: "#F7A669"
},
red: {
base: "#D43B3B",
dark: "#B72427",
deep: "#A5181D",
light: "#EEBCBD",
mid: "#DA6B6D"
},
white: {
base: "#FFFFFF",
opacity_15: "#FFFFFF26",
opacity_50: "#FFFFFF80"
},
yellow: {
base: "#FDC543",
dark: "#F9A521",
deep: "#EE8F00",
light: "#FDECC3",
mid: "#FED277"
}
}, d = {
light: {
background: {
brandDisabled: e.grey.mid,
brandHover: e.orange.dark,
brandPressed: e.orange.dark,
brand: e.orange.base,
feedbackError: e.red.light,
feedbackInfo: e.grey.light,
feedbackSuccess: e.green.light,
feedbackWarning: e.yellow.light,
primaryDisabled: e.white.base,
primaryHover: e.grey.light,
primaryInverseDisabled: e.grey.mid,
primaryInverseHover: e.grey.deep,
primaryInversePressed: e.grey.deep,
primaryInverse: e.grey.ultraDeep,
primaryPressed: e.grey.light,
primary: e.white.base,
secondaryDisabled: e.grey.ultraLight,
secondaryInverseDisabled: e.grey.mid,
secondaryInverse: e.grey.deep,
secondary: e.grey.ultraLight,
sustainability: e.forest.light,
tertiary: e.grey.light,
transparentHover: e.black.opacity_10,
transparentPressed: e.black.opacity_10,
transparent: e.black.opacity_10
},
border: {
feedbackError: e.red.base,
feedbackInfo: e.grey.dark,
feedbackSuccess: e.green.base,
feedbackWarning: e.yellow.base,
focus: e.grey.ultraDeep,
primaryDisabled: e.black.opacity_50,
primaryInverse: e.white.base,
primary: e.grey.ultraDeep,
secondaryDisabled: e.black.opacity_10,
secondary: e.grey.base,
tertiary: e.grey.mid
},
content: {
brandDisabled: e.black.opacity_50,
brandHover: e.orange.deep,
brandPressed: e.orange.deep,
brand: e.orange.dark,
feedbackError: e.red.base,
feedbackInfo: e.grey.base,
feedbackSuccess: e.green.base,
feedbackWarning: e.yellow.base,
interactionAccentHover: e.blue.deep,
interactionAccentPressed: e.blue.deep,
interactionAccent: e.blue.dark,
interactionNeutral: e.grey.ultraDeep,
primaryDisabled: e.black.opacity_50,
primaryInverseDisabled: e.black.opacity_50,
primaryInverse: e.white.base,
primaryOnBrandDisabled: e.black.opacity_50,
primaryOnBrand: e.grey.ultraDeep,
primary: e.grey.ultraDeep,
secondaryDisabled: e.black.opacity_50,
secondary: e.grey.dark,
sustainability: e.forest.base,
tertiaryInverseDisabled: e.black.opacity_10,
tertiaryInverse: e.grey.semiDark,
tertiary: e.grey.base
}
},
dark: {
background: {
brandDisabled: e.grey.mid,
brandHover: e.orange.dark,
brandPressed: e.orange.dark,
brand: e.orange.base,
feedbackError: e.grey.deep,
feedbackInfo: e.grey.deep,
feedbackSuccess: e.grey.deep,
feedbackWarning: e.grey.deep,
primaryDisabled: e.black.base,
primaryHover: e.grey.deep,
primaryInverseDisabled: e.grey.mid,
primaryInverseHover: e.grey.mid,
primaryInversePressed: e.grey.mid,
primaryInverse: e.grey.ultraLight,
primaryPressed: e.grey.deep,
primary: e.black.base,
secondaryDisabled: e.grey.ultraDeep,
secondaryInverseDisabled: e.grey.base,
secondaryInverse: e.grey.light,
secondary: e.grey.ultraDeep,
sustainability: e.grey.deep,
tertiary: e.grey.ultraDeep,
transparentHover: e.white.opacity_15,
transparentPressed: e.white.opacity_15,
transparent: e.white.opacity_15
},
border: {
feedbackError: e.red.base,
feedbackInfo: e.grey.dark,
feedbackSuccess: e.green.base,
feedbackWarning: e.yellow.base,
focus: e.white.base,
primaryDisabled: e.white.opacity_50,
primaryInverse: e.grey.ultraDeep,
primary: e.grey.ultraLight,
secondaryDisabled: e.white.opacity_15,
secondary: e.grey.dark,
tertiary: e.grey.deep
},
content: {
brandDisabled: e.white.opacity_50,
brandHover: e.orange.mid,
brandPressed: e.orange.mid,
brand: e.orange.base,
feedbackError: e.red.mid,
feedbackInfo: e.grey.base,
feedbackSuccess: e.green.mid,
feedbackWarning: e.yellow.mid,
interactionAccentHover: e.blue.mid,
interactionAccentPressed: e.blue.mid,
interactionAccent: e.blue.mid,
interactionNeutral: e.white.base,
primaryDisabled: e.white.opacity_50,
primaryInverseDisabled: e.black.opacity_50,
primaryInverse: e.grey.ultraDeep,
primaryOnBrandDisabled: e.black.opacity_50,
primaryOnBrand: e.grey.ultraDeep,
primary: e.white.base,
secondaryDisabled: e.white.opacity_50,
secondary: e.grey.base,
sustainability: e.forest.mid,
tertiaryInverseDisabled: e.white.opacity_15,
tertiaryInverse: e.grey.dark,
tertiary: e.grey.dark
}
}
};
export {
r as DS_ANIMATION,
a as DS_BREAKPOINT,
e as DS_COLOR_CORE,
d as DS_COLOR_TOKEN,
i as DS_SPACING
};