@hitachivantara/uikit-styles
Version:
UI Kit styling solution.
180 lines (179 loc) • 5.52 kB
JavaScript
import { amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, red, rose, sky, slate, teal, violet, yellow } from "../palette.js";
import { makeColors, makeTheme } from "../makeTheme.js";
//#region src/themes/pentaho.ts
var pentaho = makeTheme((theme) => ({
name: "pentahoPlus",
colors: makeColors({
brand: blue[600],
catastrophic: [rose[800], pink[600]],
negative_20: red[100],
warning_20: amber[100],
positive_20: green[100],
neutral_20: sky[100],
shadow: `0 4px 4px 0 ${theme.alpha(slate[900], .02)}, 0 3px 3px 0 ${theme.alpha(slate[900], .04)}, 0 1px 1px 0 ${theme.alpha(slate[900], .06)}, 0 1px 1px 0 ${theme.alpha(slate[900], .08)}, 0 0 0 0 ${theme.alpha(slate[900], .1)}`,
shad1: theme.alpha(slate[900], .08),
primary: [blue[600], blue[500]],
primaryStrong: [blue[700], blue[600]],
primaryDeep: [blue[800], blue[700]],
primarySubtle: [blue[200], blue[900]],
primaryDimmed: [blue[100], blue[950]],
positive: [emerald[600], green[600]],
positiveStrong: [emerald[700], green[500]],
positiveDeep: [emerald[800], green[300]],
positiveDimmed: [emerald[50], green[950]],
positiveSubtle: [emerald[100], green[900]],
positiveBorder: [emerald[200], green[800]],
warning: [amber[500], yellow[500]],
warningStrong: [amber[600], yellow[400]],
warningDeep: [amber[700], yellow[300]],
warningDimmed: [amber[50], yellow[950]],
warningSubtle: [amber[100], yellow[900]],
warningBorder: [amber[200], yellow[800]],
negative: red[600],
negativeStrong: [red[700], red[500]],
negativeDeep: [red[800], red[300]],
negativeDimmed: [red[50], red[950]],
negativeSubtle: [red[100], red[900]],
negativeBorder: [red[200], red[800]],
info: [sky[500], cyan[500]],
infoStrong: [sky[600], cyan[400]],
infoDeep: [sky[700], cyan[300]],
infoDimmed: [sky[50], cyan[950]],
infoSubtle: [sky[100], cyan[900]],
infoBorder: [sky[200], cyan[800]],
text: [slate[700], slate[50]],
textSubtle: [slate[500], slate[400]],
textDisabled: [neutral[400], neutral[500]],
textDimmed: [slate[400], slate[600]],
textLight: slate[50],
textDark: slate[700],
border: [slate[300], slate[700]],
borderSubtle: [slate[200], slate[950]],
borderStrong: [slate[500], slate[400]],
borderDisabled: [neutral[400], neutral[700]],
bgPage: [slate[100], slate[900]],
bgContainer: [slate[50], slate[800]],
bgPageSecondary: [slate[200], slate[950]],
bgContainerSecondary: [slate[100], slate[900]],
bgHover: theme.alpha(blue[600], .08),
bgDisabled: [neutral[200], neutral[900]],
bgOverlay: [theme.alpha(slate[950], .6), theme.alpha(slate[900], .4)],
dimmer: ["#FFFFFF", "#000000"],
cat1: blue[300],
cat2: orange[300],
cat3: teal[400],
cat4: violet[400],
cat5: pink[400],
cat6: yellow[400],
cat7: fuchsia[300],
cat8: cyan[400],
cat9: lime[300],
cat10: rose[400],
cat11: green[600],
cat12: indigo[500]
}),
fontFamily: { body: "Inter, Arial, Helvetica, sans-serif" },
typography: {
display: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl4,
lineHeight: theme.lineHeights.xl4,
letterSpacing: "0.00504em"
},
title1: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl3,
lineHeight: theme.lineHeights.xl3,
letterSpacing: "0.00384em"
},
title2: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl2,
lineHeight: theme.lineHeights.xl2,
letterSpacing: "0.00288em"
},
title3: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl,
lineHeight: theme.lineHeights.xl,
letterSpacing: "0.0024em"
},
title4: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.lg,
lineHeight: theme.lineHeights.lg,
letterSpacing: "0.00192em"
},
label: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.base,
lineHeight: theme.lineHeights.base,
letterSpacing: "0.00168em"
},
body: {
color: theme.colors.text,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.base,
lineHeight: theme.lineHeights.base,
letterSpacing: "0.00168em"
},
captionLabel: {
color: theme.colors.text,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.sm,
lineHeight: theme.lineHeights.sm,
letterSpacing: 0
},
caption1: {
color: theme.colors.text,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.sm,
lineHeight: theme.lineHeights.sm,
letterSpacing: "0.00144em"
},
caption2: {
color: theme.colors.text,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.xs,
lineHeight: theme.lineHeights.xs,
letterSpacing: "0.0012em"
}
},
sizes: {
xs: "32px",
sm: "40px",
md: "48px",
lg: "56px",
xl: "64px"
},
radii: {
base: "4px",
round: "8px",
large: "16px"
},
header: {
height: "64px",
secondLevelHeight: "56px"
},
form: { errorColor: theme.colors.negative },
snackbar: { actionButtonVariant: "secondaryGhost" },
bulkActions: { actionButtonVariant: "primaryGhost" },
stepNavigation: {
separatorMargin: "4px",
defaultSeparatorHeight: 1,
simpleSeparatorHeight: 1
},
filterGroup: {
applyButtonVariant: "primary",
cancelButtonVariant: "secondarySubtle"
},
colorPicker: { hueDirection: "horizontal" }
}));
//#endregion
export { pentaho as default };