@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
346 lines (342 loc) • 9.37 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const background = {
primary: "white/black.500",
secondary: "white/black.400",
accent: "purple.500/purple.400",
accentAlt: "purple.200/purple.1000",
info: "yellow.100/yellow.1000",
error: "red.500/red.500",
errorAlt: "red.100/red.1500",
success: "green.700/green.700",
successAlt: "green.300/green.1200",
connect: "newPurple.500/newPurple.200",
connectAlt: "turquoise.50/turquoise.900",
driver: "yellow.500/yellow.500",
owner: "navy.700/navy.700",
disabled: "navy.50/black.500",
neutral: "navy.100/black.50",
neutralAlt: "navy.50/black.100",
seasonLow: "season.100/season.300",
seasonMedium: "season.300/season.600",
seasonHigh: "season.700/season.900",
seasonVeryHigh: "season.1100/season.1200",
rental: "blue.500/blue.700",
rentalAlt: "blue.300/blue.500",
blocker: "grey.100/black.200",
rideshare: "black.1000/black.1000",
keyExchange: "newViolet.500/newViolet.200",
picked: "green.700/green.500",
base: "navy.900/navy.50",
secondaryInteractive: {
DEFAULT: "white/black.400",
hover: "navy.50/black.300"
},
accentInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.600/purple.700"
},
accentAltInteractive: {
DEFAULT: "purple.200/purple.1000",
hover: "purple.200/purple.900"
},
connectInteractive: {
DEFAULT: "newPurple.500/newPurple.200",
hover: "turquoise.700/turquoise.700"
},
errorInteractive: {
DEFAULT: "red.500/red.500",
hover: "red.700/red.500"
}
};
const text = {
base: "navy.700/grey.100",
subdued: "navy.300/grey.300",
accent: "purple.500/purple.400",
accentAlt: "purple.700/purple.200",
info: "yellow.900/yellow.400",
error: "red.500/red.400",
errorAlt: "red.500/red.200",
success: "green.700/green.400",
successAlt: "green.900/green.300",
connect: "newPurple.500/newPurple.200",
connectAlt: "turquoise.900/white",
driver: "navy.700/navy.700",
owner: "white/grey.100",
warning: "orange.500/orange.300",
infoAlt: "yellow.700/yellow.700",
disabled: "navy.120/black.50",
onAccent: "white/black.1000",
onRideshare: "white/white",
onError: "white/white",
onSuccess: "white/white",
onConnect: "white/black.1000",
onKeyExchange: "white/black.1000",
onPicked: "white/black.1000",
keyExchange: "newViolet.500/newViolet.200",
picked: "green.700/green.500",
rideshare: "black.1000/white",
onBase: "white/navy.900",
onSeasonLow: "black.800/black.800",
onSeasonMedium: "black.800/white",
onSeasonHigh: "white/white",
onSeasonVeryHigh: "white/white",
onRental: "white/white",
onRentalAlt: "black.300/black.1000",
inversed: "white/white",
baseInteractive: {
DEFAULT: "navy.700/grey.100",
hover: "navy.900/grey.300"
},
subduedInteractive: {
DEFAULT: "navy.300/grey.300",
hover: "navy.500/grey.400"
},
accentInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.700/purple.500"
},
accentAltInteractive: {
DEFAULT: "purple.700/purple.200",
hover: "purple.700/purple.400"
}
};
const icon = {
base: "navy.700/grey.100",
subdued: "navy.300/grey.300",
accent: "purple.500/purple.400",
accentAlt: "purple.700/purple.200",
info: "yellow.900/yellow.400",
error: "red.500/red.400",
errorAlt: "red.500/red.200",
success: "green.700/green.400",
successAlt: "green.900/green.300",
connect: "newPurple.500/newPurple.200",
connectAlt: "turquoise.900/turquoise.50",
driver: "navy.700/navy.700",
owner: "white/grey.100",
warning: "orange.500/orange.300",
infoAlt: "yellow.500/yellow.700",
disabled: "navy.200/black.75",
onAccent: "white/black.1000",
onRideshare: "white/white",
onError: "white/white",
onSuccess: "white/white",
onConnect: "white/black.1000",
onKeyExchange: "white/black.1000",
onPicked: "white/black.1000",
keyExchange: "newViolet.500/newViolet.200",
picked: "green.700/green.500",
rideshare: "black.1000/white",
onBase: "white/navy.900",
disabledAlt: "navy.120/black.50",
onRental: "white/white",
inversed: "white/white",
baseInteractive: {
DEFAULT: "navy.700/grey.100",
hover: "navy.900/grey.200"
},
subduedInteractive: {
DEFAULT: "navy.300/grey.300",
hover: "navy.500/grey.400"
},
accentInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.700/purple.500"
},
accentAltInteractive: {
DEFAULT: "purple.700/purple.200",
hover: "purple.700/purple.400"
}
};
const stroke = {
base: "navy.100/black.100",
subdued: "navy.50/black.100",
accent: "purple.500/purple.400",
accentAlt: "purple.600/purple.400",
success: "green.500/green.700",
successAlt: "green.500/green.700",
error: "red.500/red.400",
errorAlt: "red.500/red.200",
strong: "grey.300/grey.700",
onAccent: "white/grey.100",
rental: "blue.700/blue.500",
blocker: "grey.300/grey.500",
onError: "white/white",
onSuccess: "white/white",
connect: "newPurple.500/newPurple.200",
keyExchange: "newViolet.500/newViolet.200",
picked: "green.700/green.500",
onConnect: "white/black.75",
onKeyExchange: "white/black.75",
onPicked: "white/black.75",
onRideshare: "white/black.1000",
rideshare: "black.1000/white",
onBase: "white/black.600",
baseInteractive: {
DEFAULT: "navy.100/black.100",
hover: "navy.300/black.300",
press: "navy.500/black.500"
},
accentInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.700/purple.600",
press: "purple.900/purple.800"
},
strongInteractive: {
DEFAULT: "grey.300/grey.700",
hover: "grey.400/black.50",
press: "grey.500/black.100"
}
};
const buttonIcon = {
selected: "purple.500/grey.100",
primary: "white/black.1000",
secondary: "purple.500/purple.400",
tertiary: "purple.500/white",
destructive: "red.500/red.200",
success: "white/green.100",
successAlt: "green.900/green.100",
disabled: "navy.300/grey.300",
accentAlt: "purple.500/grey.100",
primaryInteractive: {
DEFAULT: "white/black.1000",
hover: "white/black.1000",
press: "white/black.1000"
},
secondaryInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.500/purple.300",
press: "purple.900/purple.900"
},
tertiaryInteractive: {
DEFAULT: "purple.500/white",
hover: "purple.500/white",
press: "purple.900/purple.1000"
},
destructiveInteractive: {
DEFAULT: "red.500/red.200",
hover: "red.500/red.200",
press: "red.500/red.200"
},
successAltInteractive: {
DEFAULT: "green.900/green.100",
hover: "green.900/green.100",
press: "green.900/green.100"
}
};
const buttonLabel = {
selected: "purple.500/grey.100",
primary: "white/black.1000",
secondary: "purple.500/purple.400",
tertiary: "purple.500/white",
disabled: "navy.300/grey.300",
accentAlt: "purple.500/grey.100",
destructive: "red.500/red.200",
success: "white/green.100",
successAlt: "green.900/green.100",
primaryInteractive: {
DEFAULT: "white/black.1000",
hover: "white/black.1000",
press: "white/black.1000"
},
secondaryInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.700/purple.300",
press: "purple.900/purple.900"
},
tertiaryInteractive: {
DEFAULT: "purple.500/white",
hover: "purple.700/white",
press: "purple.900/purple.1000"
},
destructiveInteractive: {
DEFAULT: "red.500/red.200",
hover: "red.500/red.200",
press: "red.500/red.200"
},
successAltInteractive: {
DEFAULT: "green.900/green.100",
hover: "green.900/green.100",
press: "green.900/green.100"
}
};
const buttonBackground = {
selected: "purple.100/purpleDeep.900",
primary: "purple.500/purple.400",
secondary: "white/black.100",
tertiary: "white/white",
accentAlt: "purple.100/purple.900",
destructive: "red.100/red.900",
success: "green.700/green.900",
successAlt: "green.100/green.1000",
disabled: "navy.100/black.50",
primaryInteractive: {
DEFAULT: "purple.500/purple.400",
hover: "purple.700/purple.800",
press: "purple.900/purple.1000"
},
secondaryInteractive: {
DEFAULT: "white/black.100",
hover: "white/black.500",
press: "white/black.500"
},
tertiaryInteractive: {
DEFAULT: "white/white",
hover: "white/black.500",
press: "white/black.500"
},
destructiveInteractive: {
DEFAULT: "red.100/red.900",
hover: "red.120/red.800",
press: "red.150/red.900"
},
successAltInteractive: {
DEFAULT: "green.100/green.1000",
hover: "green.300/green.900",
press: "green.400/green.1000"
}
};
const fill = {
base: "navy.500/navy.50",
accent: "purple.500/purple.400",
secondary: "yellow.500/yellow.400",
subdued: "navy.100/black.50",
neutral: "navy.50/black.100",
negative: "red.150/red.800",
accentAlt: "purple.100/purple.900",
disabled: "navy.300/grey.300",
error: "red.500/red.500",
success: "green.500/green.700",
rental: "blue.300/blue.700",
blocker: "grey.100/black.200",
primary: "white/black.1000"
};
const illustrations = {
primary: "navy.500/white",
secondary: "white/white",
accent1: "purple.500/white",
accent2: "blue.500/white"
};
var _theme = {
background: background,
text: text,
icon: icon,
stroke: stroke,
buttonIcon: buttonIcon,
buttonLabel: buttonLabel,
buttonBackground: buttonBackground,
fill: fill,
illustrations: illustrations
};
exports.background = background;
exports.buttonBackground = buttonBackground;
exports.buttonIcon = buttonIcon;
exports.buttonLabel = buttonLabel;
exports["default"] = _theme;
exports.fill = fill;
exports.icon = icon;
exports.illustrations = illustrations;
exports.stroke = stroke;
exports.text = text;
//# sourceMappingURL=theme.js.map