@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

package/dist/cjs/styles/createPalette.js

@@ -0,0 +1,227 @@
+'use strict';
+'use strict';
+
+var color2k = require('color2k');
+var themeOptions = require('./themeOptions.js');
+var defaultThemeOptions = require('./defaultThemeOptions.js');
+
+function createPaletteColor(options) {
+  return options;
+}
+function contrastColor(surface) {
+  return color2k.readableColor(surface);
+}
+function createPaletteSurfaceColors(options) {
+  if (typeof options === "string") {
+    const surface = createPaletteColor(options);
+    return {
+      surface,
+      on: contrastColor(surface)
+    };
+  } else {
+    const surface = createPaletteColor(options.surface);
+    return {
+      surface,
+      on: options.on ? createPaletteColor(options.on) : contrastColor(surface)
+    };
+  }
+}
+function createPaletteActionVariantsColors(options, disabled) {
+  const hoverFromBase = (b) => ({
+    surface: color2k.toHex(color2k.desaturate(color2k.darken(b.surface, 1 / 10), 1 / 4)),
+    on: b.on
+  });
+  const activeFromBase = (b) => hoverFromBase(b);
+  if (themeOptions.isPaletteSurfaceColorsOptions(options)) {
+    const resolved = createPaletteSurfaceColors(options);
+    return {
+      base: resolved,
+      hover: hoverFromBase(resolved),
+      active: activeFromBase(resolved),
+      disabled
+    };
+  } else {
+    const base = createPaletteSurfaceColors(options.base);
+    return {
+      base,
+      hover: options.hover ? createPaletteSurfaceColors(options.hover) : hoverFromBase(base),
+      active: options.active ? createPaletteSurfaceColors(options.active) : activeFromBase(base),
+      disabled
+    };
+  }
+}
+function createPaletteBrand(options, disabled) {
+  const brandColorStepFromBase = (b, step) => createPaletteActionVariantsColors(
+    step >= 1 ? color2k.toHex(color2k.darken(b.base.surface, step / 20)) : color2k.toHex(color2k.lighten(b.base.surface, step / 2)),
+    disabled
+  );
+  if (themeOptions.isPaletteActionVariantsColorsOptions(options)) {
+    const resolved = createPaletteActionVariantsColors(options, disabled);
+    return {
+      1: resolved,
+      2: brandColorStepFromBase(resolved, 1),
+      3: brandColorStepFromBase(resolved, 2),
+      4: brandColorStepFromBase(resolved, 0.5),
+      5: brandColorStepFromBase(resolved, 0.25)
+    };
+  } else {
+    const base = createPaletteActionVariantsColors(options[1], disabled);
+    return {
+      1: base,
+      2: options[2] ? createPaletteActionVariantsColors(options[2], disabled) : brandColorStepFromBase(base, 1),
+      3: options[3] ? createPaletteActionVariantsColors(options[3], disabled) : brandColorStepFromBase(base, 2),
+      4: options[4] ? createPaletteActionVariantsColors(options[4], disabled) : brandColorStepFromBase(base, 0.5),
+      5: options[5] ? createPaletteActionVariantsColors(options[5], disabled) : brandColorStepFromBase(base, 0.25)
+    };
+  }
+}
+function createPaletteText(options) {
+  const textColorStepFromBase = (b, _step) => {
+    return b;
+  };
+  if (themeOptions.isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: textColorStepFromBase(resolved),
+      tertiary: textColorStepFromBase(resolved)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : textColorStepFromBase(base),
+      tertiary: options.tertiary ? createPaletteColor(options.tertiary) : textColorStepFromBase(base)
+    };
+  }
+}
+function createPaletteAction(options, disabled, text) {
+  const destructiveDefault = createPaletteActionVariantsColors(
+    defaultThemeOptions.defaultThemeOptions.palette.action.destructive,
+    disabled
+  );
+  const primary = createPaletteActionVariantsColors(options.primary, disabled);
+  const secondary = createPaletteActionVariantsColors(
+    options.secondary,
+    disabled
+  );
+  return {
+    primary,
+    secondary,
+    destructive: options.destructive ? createPaletteActionVariantsColors(options.destructive, disabled) : destructiveDefault,
+    text: options.text ? createPaletteActionVariantsColors(options.text, disabled) : createPaletteActionVariantsColors(
+      {
+        ...primary,
+        base: {
+          surface: text,
+          on: contrastColor(text)
+        }
+      },
+      disabled
+    )
+  };
+}
+function createPaletteIndicator(options, disabled) {
+  return {
+    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.success,
+      disabled
+    ),
+    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.info,
+      disabled
+    ),
+    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.warning,
+      disabled
+    ),
+    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.error,
+      disabled
+    ),
+    pending: options.pending ? createPaletteActionVariantsColors(options.pending, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.pending,
+      disabled
+    ),
+    processing: options.processing ? createPaletteActionVariantsColors(options.processing, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.defaultThemeOptions.palette.indicator.processing,
+      disabled
+    )
+  };
+}
+function createPaletteTable(options, disabled) {
+  return createPaletteActionVariantsColors(options, disabled);
+}
+function createPaletteTooltip(options) {
+  return createPaletteSurfaceColors(options);
+}
+function createPaletteBackground(options) {
+  const backgroundStepFromBase = (b, step) => {
+    return color2k.toHex(color2k.darken(b, step / 20));
+  };
+  if (themeOptions.isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: backgroundStepFromBase(resolved, 1)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : backgroundStepFromBase(base, 1)
+    };
+  }
+}
+function createPaletteStroke(options) {
+  if (themeOptions.isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base
+    };
+  }
+}
+function createPalette(options = {}) {
+  const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors(defaultThemeOptions.defaultThemeOptions.palette.disabled);
+  const text = createPaletteText(
+    options.text ?? defaultThemeOptions.defaultThemeOptions.palette.text
+  );
+  return {
+    brand: createPaletteBrand(
+      options.brand ?? defaultThemeOptions.defaultThemeOptions.palette.brand,
+      disabled
+    ),
+    text,
+    action: createPaletteAction(
+      options.action ?? defaultThemeOptions.defaultThemeOptions.palette.action,
+      disabled,
+      text.tertiary
+    ),
+    indicator: createPaletteIndicator(
+      options.indicator ?? defaultThemeOptions.defaultThemeOptions.palette.indicator,
+      disabled
+    ),
+    disabled,
+    background: createPaletteBackground(
+      options.background ?? defaultThemeOptions.defaultThemeOptions.palette.background
+    ),
+    stroke: createPaletteStroke(
+      options.stroke ?? defaultThemeOptions.defaultThemeOptions.palette.stroke
+    ),
+    table: createPaletteTable(
+      options.table ?? defaultThemeOptions.defaultThemeOptions.palette.table,
+      disabled
+    ),
+    tooltip: createPaletteTooltip(
+      options.tooltip ?? defaultThemeOptions.defaultThemeOptions.palette.tooltip
+    ),
+    thumbnailCheckbox: defaultThemeOptions.defaultThemeOptions.palette.thumbnailCheckbox
+  };
+}
+
+exports.createPalette = createPalette;

package/dist/cjs/styles/createTheme.js

@@ -0,0 +1,16 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createTypography = require('./createTypography.js');
+var createPalette = require('./createPalette.js');
+
+function createTheme(options = {}) {
+  return {
+    palette: createPalette.createPalette(options.palette),
+    typography: createTypography.createTypography(options.typography)
+  };
+}
+
+exports.default = createTheme;

package/dist/cjs/styles/createTypography.js

@@ -0,0 +1,114 @@
+'use strict';
+'use strict';
+
+var core = require('@capsizecss/core');
+var defaultThemeOptions = require('./defaultThemeOptions.js');
+
+function createTypographyStyle({
+  fontSize,
+  leading,
+  metrics,
+  ...options
+}) {
+  const capsizeValues = core.precomputeValues({
+    fontSize,
+    leading,
+    fontMetrics: metrics
+  });
+  return {
+    ...options,
+    fontSize: capsizeValues.fontSize,
+    lineHeight: capsizeValues.lineHeight,
+    capHeightTrim: capsizeValues.capHeightTrim,
+    baselineTrim: capsizeValues.baselineTrim
+  };
+}
+function createTypography(typography = {}) {
+  const base = {
+    metrics: typography.metrics ?? defaultThemeOptions.defaultThemeOptions.typography.metrics,
+    fontFamily: typography.fontFamily ?? defaultThemeOptions.defaultThemeOptions.typography.fontFamily,
+    fontWeightRegular: typography.fontWeightRegular ?? defaultThemeOptions.defaultThemeOptions.typography.fontWeightRegular,
+    fontWeightMedium: typography.fontWeightMedium ?? defaultThemeOptions.defaultThemeOptions.typography.fontWeightMedium,
+    fontWeightBold: typography.fontWeightBold ?? defaultThemeOptions.defaultThemeOptions.typography.fontWeightBold
+  };
+  const inherit = {
+    metrics: base.metrics,
+    // lineHeight: 'inherit',
+    fontFamily: base.fontFamily,
+    fontStyle: "normal",
+    fontWeight: base.fontWeightRegular,
+    letterSpacing: "inherit",
+    textTransform: "inherit"
+  };
+  return {
+    ...base,
+    title: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.title,
+      ...typography.title
+    }),
+    h1: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.h1,
+      ...typography.h1
+    }),
+    h2: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.h2,
+      ...typography.h2
+    }),
+    h3: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.h3,
+      ...typography.h3
+    }),
+    h4: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.h4,
+      ...typography.h4
+    }),
+    label: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.label,
+      ...typography.label
+    }),
+    paragraph1: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.paragraph1,
+      ...typography.paragraph1
+    }),
+    paragraph2: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.paragraph2,
+      ...typography.paragraph2
+    }),
+    paragraph3: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.paragraph3,
+      ...typography.paragraph3
+    }),
+    button: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.button,
+      ...typography.button
+    }),
+    buttonSmall: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.buttonSmall,
+      ...typography.buttonSmall
+    }),
+    input: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.input,
+      ...typography.input
+    }),
+    statusChip: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.defaultThemeOptions.typography.statusChip,
+      ...typography.statusChip
+    })
+  };
+}
+
+exports.createTypography = createTypography;
+exports.createTypographyStyle = createTypographyStyle;

package/dist/cjs/styles/css-vars.js

@@ -0,0 +1,88 @@
+'use strict';
+'use strict';
+
+var createTheme = require('./createTheme.js');
+var typography = require('./typography.js');
+
+const themeCSSVariableNames = objectAsCSSVariableNames(createTheme.default(), "--vt-ce-theme");
+function createThemeCssVariableUsages(theme, cssVariableNames = themeCSSVariableNames) {
+  const usages = objectAsCSSVariableUsages(theme, cssVariableNames);
+  return {
+    ...usages,
+    typography: {
+      ...typography.TypographyVariantKeys.reduce(
+        (acc, variantKey) => ({
+          ...acc,
+          [variantKey]: {
+            ...acc[variantKey],
+            all: theme.typography[variantKey]
+            // this is a little jank
+          }
+        }),
+        usages.typography
+      )
+      // TODO: fix typing
+    }
+  };
+}
+function createThemeCssVariableDefinitions(theme, cssVariableNames = themeCSSVariableNames) {
+  return objectAsCSSVariableDefinitions(theme, cssVariableNames);
+}
+function objectAsCSSVariableNames(obj, prefix) {
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      const inner = obj[key];
+      if (key.startsWith("_")) {
+        return acc;
+      }
+      return {
+        ...acc,
+        [key]: typeof inner === "object" ? objectAsCSSVariableNames(inner, prefix + "-" + key) : prefix + "-" + key
+      };
+    },
+    {}
+  );
+}
+function objectAsCSSVariableUsages(obj, cssVarNames) {
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      const value = obj[key];
+      const cssNameOrInnerNames = cssVarNames[key];
+      if (key.startsWith("_")) {
+        return acc;
+      }
+      return {
+        ...acc,
+        [key]: typeof value === "object" ? objectAsCSSVariableUsages(value, cssNameOrInnerNames) : `var(${cssNameOrInnerNames}, ${value})`
+      };
+    },
+    {}
+  );
+}
+function objectAsCSSVariableDefinitions(obj, cssVarNames) {
+  return Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+    const cssNameOrInnerNames = cssVarNames[key];
+    if (key.startsWith("_")) {
+      return acc;
+    }
+    if (typeof value === "object") {
+      return {
+        ...acc,
+        ...objectAsCSSVariableDefinitions(value, cssNameOrInnerNames)
+      };
+    } else {
+      return {
+        ...acc,
+        [cssNameOrInnerNames]: value
+      };
+    }
+  }, {});
+}
+
+exports.createThemeCssVariableDefinitions = createThemeCssVariableDefinitions;
+exports.createThemeCssVariableUsages = createThemeCssVariableUsages;
+exports.objectAsCSSVariableDefinitions = objectAsCSSVariableDefinitions;
+exports.objectAsCSSVariableNames = objectAsCSSVariableNames;
+exports.objectAsCSSVariableUsages = objectAsCSSVariableUsages;
+exports.themeCSSVariableNames = themeCSSVariableNames;

package/dist/cjs/styles/cx.js

@@ -0,0 +1,8 @@
+'use strict';
+'use strict';
+
+function cx(...args) {
+  return args.flat().filter((x) => typeof x === "string").join(" ").trim();
+}
+
+exports.cx = cx;

package/dist/cjs/styles/defaultTheme.js

@@ -0,0 +1,68 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createTheme = require('./createTheme.js');
+var cssVars = require('./css-vars.js');
+
+const defaultTheme = createTheme.default();
+const defaultThemeCssVariableUsages = cssVars.createThemeCssVariableUsages(
+  defaultTheme,
+  cssVars.themeCSSVariableNames
+);
+const defaultDarkTheme = createTheme.default({
+  palette: {
+    text: {
+      primary: "#DBE8F8",
+      secondary: "#D0D4D9",
+      tertiary: "#B0BDCE"
+    },
+    action: {
+      primary: {
+        base: {
+          surface: "#66A1EF",
+          on: "#FFFFFF"
+        },
+        hover: {
+          surface: "#6290CF",
+          on: "#FFFFFF"
+        }
+      },
+      secondary: {
+        base: {
+          surface: "#66A1EF",
+          on: "#FFFFFF"
+        },
+        hover: {
+          surface: "#6290CF",
+          on: "#FFFFFF"
+        }
+      },
+      destructive: {
+        base: "#EB0000",
+        hover: "#a63737"
+      }
+    },
+    background: {
+      primary: "#121212",
+      secondary: "#1F1F1F"
+    },
+    disabled: {
+      on: "#7C848D",
+      surface: "#444444"
+    },
+    table: {
+      base: {
+        surface: "#121212"
+      }
+    },
+    thumbnailCheckbox: {
+      fill: { primary: "#FFFFFF", secondary: "#2A323C" }
+    }
+  }
+});
+
+exports.default = defaultTheme;
+exports.defaultDarkTheme = defaultDarkTheme;
+exports.defaultThemeCssVariableUsages = defaultThemeCssVariableUsages;

package/dist/cjs/styles/defaultThemeOptions.js

@@ -0,0 +1,168 @@
+'use strict';
+'use strict';
+
+var fontMetrics = require('./font-metrics.js');
+
+const disabled = {
+  surface: "#FAFAFA",
+  on: "#7C848D"
+};
+const typographyBase = {
+  metrics: fontMetrics.FontMetricsBuiltin.nunitoSans,
+  fontFamily: '"Nunito Sans", Verdana, sans-serif',
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700
+};
+const defaultThemeOptions = {
+  palette: {
+    disabled,
+    text: {
+      primary: "#2A323C",
+      secondary: "#5C6269",
+      tertiary: "#465364"
+    },
+    brand: {
+      1: "#212121",
+      2: "#FA524D"
+    },
+    action: {
+      primary: {
+        base: {
+          surface: "#1871E8",
+          on: "#FFFFFF"
+        },
+        hover: {
+          surface: "#335B89",
+          on: "#FFFFFF"
+        }
+      },
+      secondary: {
+        base: {
+          surface: "#475364",
+          on: "#FFFFFF"
+        },
+        hover: {
+          surface: "#335B89",
+          on: "#FFFFFF"
+        }
+      },
+      destructive: {
+        base: {
+          surface: "#EB0000",
+          on: "#FFFFFF"
+        },
+        hover: {
+          surface: "#a63737",
+          on: "#FFFFFF"
+        }
+      }
+    },
+    indicator: {
+      success: { surface: "#28BA3F", on: "#FFFFFF" },
+      info: { surface: "#335B89", on: "#FFFFFF" },
+      warning: { surface: "#FFBB0A", on: "#FFFFFF" },
+      error: { surface: "#EB0000", on: "#FFFFFF" },
+      pending: { surface: "#7C848D", on: "#FFFFFF" },
+      processing: { surface: "#FFBB0A", on: "#FFFFFF" }
+    },
+    background: {
+      primary: "#FFFFFF",
+      secondary: "#F8F7F7"
+    },
+    stroke: {
+      primary: "#D8D8D8"
+    },
+    table: {
+      base: {
+        surface: "#FFFFFF",
+        on: "#2A323C"
+      },
+      hover: "#ECEFF2",
+      active: "#ECEFF2"
+    },
+    tooltip: {
+      surface: disabled.on,
+      on: disabled.surface
+    },
+    thumbnailCheckbox: {
+      fill: {
+        primary: "#FFFFFF",
+        secondary: "#2A323C"
+      }
+    }
+  },
+  typography: {
+    ...typographyBase,
+    title: {
+      fontFamily: '"Nunito Sans", Verdana, sans-serif',
+      fontSize: 18,
+      fontWeight: typographyBase.fontWeightMedium,
+      // lineHeight: 'normal',
+      letterSpacing: "0.25px",
+      textTransform: "uppercase"
+    },
+    h1: {
+      fontSize: 24,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 34
+    },
+    h2: {
+      fontSize: 20,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 30
+    },
+    h3: {
+      fontSize: 18,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 26
+    },
+    h4: {
+      fontSize: 16,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 24
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 17
+    },
+    paragraph1: {
+      fontSize: 16,
+      fontWeight: typographyBase.fontWeightRegular,
+      leading: 24
+    },
+    paragraph2: {
+      fontSize: 14,
+      fontWeight: typographyBase.fontWeightRegular,
+      leading: 20
+    },
+    paragraph3: {
+      fontSize: 12,
+      fontWeight: typographyBase.fontWeightRegular,
+      leading: 18
+    },
+    button: {
+      fontSize: 14,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 20
+    },
+    buttonSmall: {
+      fontSize: 12,
+      fontWeight: typographyBase.fontWeightMedium,
+      leading: 18
+    },
+    input: {
+      fontSize: 14,
+      fontWeight: typographyBase.fontWeightRegular
+      // leading: 20,
+    },
+    statusChip: {
+      fontSize: 9,
+      fontWeight: typographyBase.fontWeightBold,
+      leading: 12.28
+    }
+  }
+};
+
+exports.defaultThemeOptions = defaultThemeOptions;