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

package/dist/esm/styles/createTypography.js

@@ -0,0 +1,111 @@
+'use strict';
+import { precomputeValues } from '@capsizecss/core';
+import { defaultThemeOptions } from './defaultThemeOptions.js';
+
+function createTypographyStyle({
+  fontSize,
+  leading,
+  metrics,
+  ...options
+}) {
+  const capsizeValues = 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.typography.metrics,
+    fontFamily: typography.fontFamily ?? defaultThemeOptions.typography.fontFamily,
+    fontWeightRegular: typography.fontWeightRegular ?? defaultThemeOptions.typography.fontWeightRegular,
+    fontWeightMedium: typography.fontWeightMedium ?? defaultThemeOptions.typography.fontWeightMedium,
+    fontWeightBold: typography.fontWeightBold ?? 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.typography.title,
+      ...typography.title
+    }),
+    h1: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.h1,
+      ...typography.h1
+    }),
+    h2: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.h2,
+      ...typography.h2
+    }),
+    h3: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.h3,
+      ...typography.h3
+    }),
+    h4: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.h4,
+      ...typography.h4
+    }),
+    label: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.label,
+      ...typography.label
+    }),
+    paragraph1: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.paragraph1,
+      ...typography.paragraph1
+    }),
+    paragraph2: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.paragraph2,
+      ...typography.paragraph2
+    }),
+    paragraph3: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.paragraph3,
+      ...typography.paragraph3
+    }),
+    button: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.button,
+      ...typography.button
+    }),
+    buttonSmall: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.buttonSmall,
+      ...typography.buttonSmall
+    }),
+    input: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.input,
+      ...typography.input
+    }),
+    statusChip: createTypographyStyle({
+      ...inherit,
+      ...defaultThemeOptions.typography.statusChip,
+      ...typography.statusChip
+    })
+  };
+}
+
+export { createTypography, createTypographyStyle };

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

@@ -0,0 +1,81 @@
+'use strict';
+import createTheme from './createTheme.js';
+import { TypographyVariantKeys } from './typography.js';
+
+const themeCSSVariableNames = objectAsCSSVariableNames(createTheme(), "--vt-ce-theme");
+function createThemeCssVariableUsages(theme, cssVariableNames = themeCSSVariableNames) {
+  const usages = objectAsCSSVariableUsages(theme, cssVariableNames);
+  return {
+    ...usages,
+    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
+      };
+    }
+  }, {});
+}
+
+export { createThemeCssVariableDefinitions, createThemeCssVariableUsages, objectAsCSSVariableDefinitions, objectAsCSSVariableNames, objectAsCSSVariableUsages, themeCSSVariableNames };

package/dist/esm/styles/cx.js

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

package/dist/esm/styles/defaultTheme.js

@@ -0,0 +1,62 @@
+'use strict';
+import createTheme from './createTheme.js';
+import { createThemeCssVariableUsages, themeCSSVariableNames } from './css-vars.js';
+
+const defaultTheme = createTheme();
+const defaultThemeCssVariableUsages = createThemeCssVariableUsages(
+  defaultTheme,
+  themeCSSVariableNames
+);
+const defaultDarkTheme = createTheme({
+  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" }
+    }
+  }
+});
+
+export { defaultTheme as default, defaultDarkTheme, defaultThemeCssVariableUsages };

package/dist/esm/styles/defaultThemeOptions.js

@@ -0,0 +1,166 @@
+'use strict';
+import { FontMetricsBuiltin } from './font-metrics.js';
+
+const disabled = {
+  surface: "#FAFAFA",
+  on: "#7C848D"
+};
+const typographyBase = {
+  metrics: 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
+    }
+  }
+};
+
+export { defaultThemeOptions };

package/dist/esm/styles/external/baseline.css

@@ -0,0 +1 @@
+@import 'modern-normalize/modern-normalize.css';

package/dist/esm/styles/external/fonts/default.css

@@ -0,0 +1,3 @@
+@import '@fontsource/nunito-sans/400.css';
+@import '@fontsource/nunito-sans/600.css';
+@import '@fontsource/nunito-sans/700.css';

package/dist/esm/styles/font-metrics.js

@@ -0,0 +1,26 @@
+'use strict';
+const FontMetricsBuiltin = {
+  // generated from https://seek-oss.github.io/capsize/
+  nunitoSans: {
+    familyName: "Nunito Sans 12pt",
+    fullName: "Nunito Sans 12pt Regular",
+    postscriptName: "NunitoSans12pt-Regular",
+    capHeight: 705,
+    ascent: 1011,
+    descent: -353,
+    lineGap: 0,
+    unitsPerEm: 1e3,
+    xHeight: 486,
+    xWidthAvg: 452,
+    subsets: {
+      latin: {
+        xWidthAvg: 452
+      },
+      thai: {
+        xWidthAvg: 500
+      }
+    }
+  }
+};
+
+export { FontMetricsBuiltin };

package/dist/esm/styles/portal.js

@@ -0,0 +1,12 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { ThemeCssVarsProvider } from './provider.css-vars.js';
+import useTheme from './useTheme.js';
+
+function PortalThemeRelay(props) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(ThemeCssVarsProvider, { theme, children: props.children });
+}
+
+export { PortalThemeRelay };

package/dist/esm/styles/provider.client.js

@@ -0,0 +1,18 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ThemeCssVarsProvider } from './provider.css-vars.js';
+import defaultTheme from './defaultTheme.js';
+
+const ThemeContext = React.createContext({
+  theme: defaultTheme
+});
+function useThemeContext() {
+  return React.useContext(ThemeContext);
+}
+function ThemeContextProvider({ theme, includeCssVarWrapper, children }) {
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme }, children: includeCssVarWrapper ? /* @__PURE__ */ jsx(ThemeCssVarsProvider, { theme, children }) : children });
+}
+
+export { ThemeContext, ThemeContextProvider, useThemeContext };

package/dist/esm/styles/provider.css-vars.js

@@ -0,0 +1,30 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createThemeCssVariableDefinitions } from './css-vars.js';
+import styles from './components.module.scss.js';
+import { cx } from './cx.js';
+
+function ThemeCssVarsProvider({
+  theme: themeInput,
+  component: Component = "div",
+  style,
+  className,
+  children,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...otherProps,
+      style: {
+        ...createThemeCssVariableDefinitions(themeInput),
+        ...style
+      },
+      className: cx(styles["css-var-provider"], className),
+      children
+    }
+  );
+}
+
+export { ThemeCssVarsProvider };

package/dist/esm/styles/scss/_index.scss

@@ -0,0 +1 @@
+@import './theme.generated';