@hitachivantara/uikit-styles/dist/themes/pentaho.js

UI Kit styling solution.

import { makeTheme, makeColors } from "../makeTheme.js";
import { indigo, green, rose, lime, cyan, fuchsia, yellow, pink, violet, teal, orange, blue, neutral, slate, sky, red, amber, emerald } from "../palette.js";
const pentaho = 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: `0 4px 4px 0 ${theme.alpha(slate[900], 0.02)}, 0 3px 3px 0 ${theme.alpha(slate[900], 0.04)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.06)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.08)}, 0 0 0 0 ${theme.alpha(slate[900], 0.1)}`,
    shad1: theme.alpha(slate[900], 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"],
    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"
  }
}));
export {
  pentaho as default
};