@hitachivantara/uikit-styles
Version:
UI Kit styling solution for the Next Design System.
292 lines (291 loc) • 9.12 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const makeTheme = require("../makeTheme.cjs");
const palette = require("../palette.cjs");
const radii = require("../tokens/radii.cjs");
const pentahoPlus = makeTheme.makeTheme((theme) => ({
name: "pentahoPlus",
colors: makeTheme.makeColors({
brand: palette.blue[600],
catastrophic: [palette.rose[800], palette.pink[600]],
// TODO: review _20 token differences
negative_20: palette.red[100],
warning_20: palette.amber[100],
positive_20: palette.green[100],
neutral_20: palette.sky[100],
shadow: `0px 2px 4px -1px ${theme.alpha(palette.slate[700], 0.08)}`,
shad1: theme.alpha(palette.slate[700], 0.08),
primary: [palette.blue[600], palette.blue[500]],
primaryStrong: [palette.blue[700], palette.blue[600]],
primaryDeep: [palette.blue[800], palette.blue[700]],
primarySubtle: [palette.blue[200], palette.blue[900]],
primaryDimmed: [palette.blue[100], palette.blue[950]],
positive: [palette.emerald[600], palette.green[600]],
positiveStrong: [palette.emerald[700], palette.green[500]],
positiveDeep: [palette.emerald[800], palette.green[300]],
positiveDimmed: [palette.emerald[50], palette.green[950]],
positiveSubtle: [palette.emerald[100], palette.green[900]],
positiveBorder: [palette.emerald[200], palette.green[800]],
warning: [palette.amber[500], palette.yellow[500]],
warningStrong: [palette.amber[600], palette.yellow[400]],
warningDeep: [palette.amber[700], palette.yellow[300]],
warningDimmed: [palette.amber[50], palette.yellow[950]],
warningSubtle: [palette.amber[100], palette.yellow[900]],
warningBorder: [palette.amber[200], palette.yellow[800]],
negative: palette.red[600],
negativeStrong: [palette.red[700], palette.red[500]],
negativeDeep: [palette.red[800], palette.red[300]],
negativeDimmed: [palette.red[50], palette.red[950]],
negativeSubtle: [palette.red[100], palette.red[900]],
negativeBorder: [palette.red[200], palette.red[800]],
info: [palette.sky[500], palette.cyan[500]],
infoStrong: [palette.sky[600], palette.cyan[400]],
infoDeep: [palette.sky[700], palette.cyan[300]],
infoDimmed: [palette.sky[50], palette.cyan[950]],
infoSubtle: [palette.sky[100], palette.cyan[900]],
infoBorder: [palette.sky[200], palette.cyan[800]],
text: [palette.slate[700], palette.slate[50]],
textSubtle: [palette.slate[500], palette.slate[400]],
textDisabled: [palette.neutral[400], palette.neutral[500]],
textDimmed: [palette.slate[400], palette.slate[600]],
textLight: palette.slate[50],
textDark: palette.slate[700],
border: [palette.slate[300], palette.slate[700]],
borderSubtle: [palette.slate[200], palette.slate[950]],
borderStrong: [palette.slate[500], palette.slate[400]],
borderDisabled: [palette.neutral[400], palette.neutral[700]],
bgPage: [palette.slate[100], palette.slate[900]],
bgContainer: [palette.slate[50], palette.slate[800]],
bgPageSecondary: [palette.slate[200], palette.slate[950]],
bgContainerSecondary: [palette.slate[100], palette.slate[900]],
bgHover: theme.alpha(palette.blue[600], 0.08),
bgDisabled: [palette.neutral[200], palette.neutral[900]],
bgOverlay: [theme.alpha(palette.slate[950], 0.6), theme.alpha(palette.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.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"
}
}));
exports.default = pentahoPlus;