@hitachivantara/uikit-styles
Version:
UI Kit styling solution for the Next Design System.
292 lines (291 loc) • 8.28 kB
JavaScript
import { makeTheme, makeColors } from "../makeTheme.mjs";
import { slate, neutral, blue, sky, cyan, red, amber, yellow, emerald, green, rose, pink } from "../palette.mjs";
import { radii } from "../tokens/radii.mjs";
const pentahoPlus = makeTheme((theme) => ({
name: "pentahoPlus",
colors: makeColors({
brand: blue[600],
catastrophic: [rose[800], pink[600]],
// TODO: review _20 token differences
negative_20: red[100],
warning_20: amber[100],
positive_20: green[100],
neutral_20: sky[100],
shadow: `0px 2px 4px -1px ${theme.alpha(slate[700], 0.08)}`,
shad1: theme.alpha(slate[700], 0.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], 0.08),
bgDisabled: [neutral[200], neutral[900]],
bgOverlay: [theme.alpha(slate[950], 0.6), theme.alpha(slate[900], 0.4)],
dimmer: ["#FFFFFF", "#000000"]
}),
fontFamily: {
body: "Inter, Arial, Helvetica, sans-serif"
},
typography: {
display: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl4,
lineHeight: theme.lineHeights.xl4,
letterSpacing: "0.00504em"
},
title1: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl3,
lineHeight: theme.lineHeights.xl3,
letterSpacing: "0.00384em"
},
title2: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl2,
lineHeight: theme.lineHeights.xl2,
letterSpacing: "0.00288em"
},
title3: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.xl,
lineHeight: theme.lineHeights.xl,
letterSpacing: "0.0024em"
},
title4: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.lg,
lineHeight: theme.lineHeights.lg,
letterSpacing: "0.00192em"
},
label: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.base,
lineHeight: theme.lineHeights.base,
letterSpacing: "0.00168em"
},
body: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.base,
lineHeight: theme.lineHeights.base,
letterSpacing: "0.00168em"
},
captionLabel: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.semibold,
fontSize: theme.fontSizes.sm,
lineHeight: theme.lineHeights.sm,
letterSpacing: 0
},
caption1: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.sm,
lineHeight: theme.lineHeights.sm,
letterSpacing: "0.00144em"
},
caption2: {
color: theme.colors.secondary,
fontWeight: theme.fontWeights.normal,
fontSize: theme.fontSizes.xs,
lineHeight: theme.lineHeights.xs,
letterSpacing: "0.0012em"
},
// LEGACY
"5xlTitle": {
color: theme.colors.secondary,
fontSize: "52px",
letterSpacing: "0.02em",
lineHeight: "60px",
fontWeight: 600
},
"4xlTitle": {
color: theme.colors.secondary,
fontSize: "52px",
letterSpacing: "0.02em",
lineHeight: "60px",
fontWeight: 400
},
xxlTitle: {
color: theme.colors.secondary,
fontSize: "42px",
letterSpacing: "0.02em",
lineHeight: "52px",
fontWeight: 400
},
lTitle: {
color: theme.colors.secondary,
fontSize: "32px",
letterSpacing: "0.02em",
lineHeight: "40px",
fontWeight: 400
},
sTitle: {
color: theme.colors.secondary,
fontSize: "22px",
letterSpacing: "0.02em",
lineHeight: "30px",
fontWeight: 400
},
xxsTitle: {
color: theme.colors.secondary,
fontSize: "18px",
letterSpacing: "0.02em",
lineHeight: "28px",
fontWeight: 400
},
sectionTitle: {
color: theme.colors.secondary,
fontSize: "14px",
letterSpacing: "0.32em",
lineHeight: "18px",
fontWeight: 400,
textTransform: "uppercase"
},
placeholderText: {
color: theme.colors.secondary_60,
fontSize: "12px",
letterSpacing: "0.02em",
lineHeight: "16px",
fontWeight: 400
},
link: {
color: theme.colors.primary,
fontSize: "12px",
letterSpacing: "0.02em",
lineHeight: "16px",
fontWeight: 600
},
disabledText: {
color: theme.colors.secondary_60,
fontSize: "12px",
letterSpacing: "0.02em",
lineHeight: "16px",
fontWeight: 600
},
selectedNavText: {
color: theme.colors.brand,
fontSize: "12px",
letterSpacing: "0.02em",
lineHeight: "16px",
fontWeight: 600
},
vizTextDisabled: {
color: theme.colors.secondary_60,
fontSize: "10px",
letterSpacing: "0.02em",
lineHeight: "15px",
fontWeight: 400
},
xsInlineLink: {
color: theme.colors.primary,
fontSize: "10px",
letterSpacing: "0.02em",
lineHeight: "15px",
fontWeight: 600,
textDecoration: "underline"
}
},
sizes: {
xs: "32px",
sm: "40px",
md: "48px",
lg: "56px",
xl: "64px"
},
radii: {
...radii,
base: "4px",
round: "8px",
large: "16px"
},
header: {
height: "64px",
secondLevelHeight: "56px"
},
form: {
errorColor: theme.colors.negative
},
bulkActions: {
actionButtonVariant: "primaryGhost"
},
table: {
rowStripedBackgroundColorEven: theme.colors.atmo1,
// TODO - remove in v6
rowStripedBackgroundColorOdd: "transparent",
// TODO - remove in v6
rowExpandBackgroundColor: theme.colors.atmo2,
// TODO - remove in v6
rowSortedColor: theme.colors.primary,
// TODO - remove in v6
rowSortedColorAlpha: "0.1"
// TODO - remove in v6
},
stepNavigation: {
separatorMargin: "4px",
defaultSeparatorHeight: 1,
simpleSeparatorHeight: 1
},
filterGroup: {
applyButtonVariant: "primary",
cancelButtonVariant: "secondarySubtle"
},
scrollTo: {
dotSelectedSize: 6,
backgroundColorOpacity: 0.9
// TODO - remove in v6
},
colorPicker: {
hueDirection: "horizontal"
},
snackbar: {
actionButtonVariant: "secondaryGhost"
}
}));
export {
pentahoPlus as default
};