@hitachivantara/uikit-styles
Version:
UI Kit styling solution.
298 lines (297 loc) • 10.5 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 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: {
base: "4px",
round: "8px",
large: "16px"
},
icons: {
viewBox: "0 0 256 256",
// Semantic icons
Success: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
Caution: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z",
Fail: "M128,72a8,8,0,0,1,8,8v56a8,8,0,0,1-16,0V80A8,8,0,0,1,128,72ZM116,172a12,12,0,1,0,12-12A12,12,0,0,0,116,172Zm124-44a15.85,15.85,0,0,1-4.67,11.28l-96.05,96.06a16,16,0,0,1-22.56,0h0l-96-96.06a16,16,0,0,1,0-22.56l96.05-96.06a16,16,0,0,1,22.56,0l96.05,96.06A15.85,15.85,0,0,1,240,128Zm-16,0L128,32,32,128,128,224h0Z",
Info: "M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
},
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;