@crossed/theme
Version:
unicons
278 lines (277 loc) • 7.68 kB
JavaScript
import { space } from "../space";
import colors from "./colors";
import { font } from "../font";
var theme_default = {
colors,
boxShadow: "0px 4px 12px 0px rgba(0, 0, 0, 0.1)",
space,
font,
components: {
Banner: {
success: {
title: colors.success.dark,
background: colors.white,
border: colors.success.primary,
icon: colors.success.dark,
backgroundIcon: colors.success.light,
subtitle: colors.neutral[80]
},
info: {
title: colors.info.dark,
background: colors.white,
border: colors.info.primary,
icon: colors.info.dark,
backgroundIcon: colors.info.light,
subtitle: colors.neutral[80]
},
warning: {
title: colors.warning.dark,
background: colors.white,
border: colors.warning.primary,
icon: colors.warning.dark,
backgroundIcon: colors.warning.light,
subtitle: colors.neutral[80]
},
error: {
title: colors.error.satured,
background: colors.white,
border: colors.error.primary,
icon: colors.error.satured,
backgroundIcon: colors.error.low,
subtitle: colors.neutral[80]
}
},
Action: {
primary: {
default: {
text: colors.white,
icon: colors.white,
background: colors.primary.primary,
border: colors.primary.primary
},
hover: {
text: colors.white,
icon: colors.white,
background: colors.primary[50],
border: colors.primary[50]
},
active: {
text: colors.white,
icon: colors.white,
background: colors.primary[60],
border: colors.primary[60]
},
focus: {
background: colors.primary[60],
text: "",
icon: "",
border: colors.primary[40]
},
disabled: {
text: colors.primary[10],
icon: colors.primary[10],
background: colors.primary[40],
border: colors.primary[40]
}
},
secondary: {
default: {
text: colors.primary.primary,
icon: colors.primary.primary,
background: colors.neutral["60"],
border: colors.neutral["60"]
},
hover: {
text: colors.primary.primary,
icon: colors.primary.primary,
background: colors.neutral["50"],
border: colors.neutral["50"]
},
active: {
text: colors.primary.primary,
icon: colors.primary.primary,
background: colors.neutral["60"],
border: colors.neutral["40"]
},
focus: {
background: colors.neutral["60"],
text: "",
icon: "",
border: colors.primary.primary
},
disabled: {
text: colors.primary[10],
icon: colors.primary[10],
background: colors.primary[40],
border: colors.primary[40]
}
},
tertiary: {
default: {
text: colors.primary.primary,
icon: colors.primary.primary,
background: "transparent",
border: "transparent"
},
hover: {
text: colors.primary[50],
icon: colors.primary[50],
background: colors.neutral[60],
border: "transparent"
},
active: {
text: colors.primary[60],
icon: colors.primary[60],
background: "transparent",
border: "transparent"
},
focus: {
text: "",
icon: "",
background: colors.primary[10],
border: colors.primary[40]
},
disabled: {
text: colors.neutral[80],
icon: colors.neutral[80],
background: "transparent",
border: "transparent"
}
},
icon: {
default: {
color: colors.neutral[80],
background: "transparent",
border: "transparent"
},
hover: {
color: colors.neutral[80],
background: colors.primary[1],
border: colors.primary[1]
},
active: {
color: colors.neutral[80],
background: colors.primary[10],
border: colors.primary[10]
},
focus: {
background: colors.primary[1],
color: colors.neutral[80],
border: colors.primary[40]
},
disabled: {
color: colors.neutral[80],
background: "transparent",
border: "transparent"
}
}
},
Alert: {
error: {
background: colors.error.low,
border: colors.error.primary,
icon: colors.error.satured,
text: colors.error.satured
},
warning: {
background: colors.warning.light,
border: colors.warning.primary,
icon: colors.warning.dark,
text: colors.warning.dark
},
info: {
background: colors.info.light,
border: colors.info.primary,
icon: colors.info.dark,
text: colors.info.dark
},
success: {
background: colors.success.light,
border: colors.success.primary,
icon: colors.success.dark,
text: colors.success.dark
}
},
Input: {
primary: {
default: {
background: colors.background.secondary,
border: colors.border.secondary,
text: colors.text.primary,
icon: colors.text.primary,
placeholder: colors.text.secondary
},
active: {
background: colors.background.secondary,
border: colors.border.secondary,
text: colors.text.primary,
icon: colors.text.primary,
placeholder: colors.text.secondary
},
disabled: {
background: colors.primary[10],
border: colors.primary[10],
text: colors.text.secondary,
icon: colors.text.secondary,
placeholder: colors.text.secondary
},
focus: {
background: colors.background.secondary,
border: colors.border.brand,
text: colors.text.primary,
icon: colors.text.primary,
placeholder: colors.text.secondary
},
hover: {
background: colors.background.secondary,
border: colors.border.brand,
text: colors.text.primary,
icon: colors.text.primary,
placeholder: colors.text.secondary
}
}
},
Card: {
default: {
background: colors.background.secondary,
border: colors.border.primary,
description: colors.text.secondary,
title: colors.text.primary
},
active: {
background: colors.primary[10],
border: colors.border.primary,
description: colors.text.secondary,
title: colors.text.primary
},
hover: {
background: colors.primary[1],
border: colors.border.primary,
description: colors.text.secondary,
title: colors.text.primary
}
},
Tag: {
default: {
background: colors.background.primary,
text: colors.text.primary
},
green: {
background: colors.success.light,
text: colors.success.dark
},
red: {
background: colors.error.low,
text: colors.error.muted
}
},
Switch: {
on: { background: colors.primary.primary },
off: { background: colors.primary["10"] }
}
}
};
export {
theme_default as default
};
//# sourceMappingURL=theme.js.map