@formant/ava-react/esm/InsightCard/Theme.js

React components of AVA.

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { createContext, useContext, useEffect, useState } from "react";
// Default theme colors
var defaultTheme = {
  background: {
    primary: "#2D3855",
    secondary: "#282F45",
    tertiary: "#1C1E2D",
    surface: "#000000",
    headerModule: "#1C1E2D",
    headerTable: "#2D3855"
  },
  text: {
    primary: "#FFFFFF",
    secondary: "#BAC4E2",
    tertiary: "#657197",
    muted: "#2D3855",
    headerModule: "#FFFFFF",
    headerTable: "#BAC4E2"
  },
  border: {
    primary: "#1C1E2D",
    secondary: "#282F45",
    tertiary: "#000000",
    current: "#FFFFFF",
    active: "#18D2FF"
  },
  action: {
    primary: "#18D2FF",
    secondary: "#BAC4E2",
    tertiary: "#3B4668",
    quaternary: "#2D3855"
  },
  status: {
    active: "#18D2FF",
    inactive: "#BAC4E2"
  },
  accentPrimary: "#20A0FF"
};

// Create theme context
var ThemeContext = /*#__PURE__*/createContext({
  theme: defaultTheme,
  setTheme: function setTheme() {}
});
export var useTheme = function useTheme() {
  return useContext(ThemeContext);
};
export function ThemeProvider(_ref) {
  var children = _ref.children;
  var _useState = useState(defaultTheme),
    _useState2 = _slicedToArray(_useState, 2),
    theme = _useState2[0],
    setTheme = _useState2[1];

  // Apply theme colors to CSS variables
  useEffect(function () {
    // Background colors
    document.documentElement.style.setProperty("--color-background-primary", theme.background.primary);
    document.documentElement.style.setProperty("--color-background-secondary", theme.background.secondary);
    document.documentElement.style.setProperty("--color-background-tertiary", theme.background.tertiary);
    document.documentElement.style.setProperty("--color-background-surface", theme.background.surface);
    document.documentElement.style.setProperty("--color-background-header-module", theme.background.headerModule);
    document.documentElement.style.setProperty("--color-background-header-table", theme.background.headerTable);

    // Text colors
    document.documentElement.style.setProperty("--color-text-primary", theme.text.primary);
    document.documentElement.style.setProperty("--color-text-secondary", theme.text.secondary);
    document.documentElement.style.setProperty("--color-text-tertiary", theme.text.tertiary);
    document.documentElement.style.setProperty("--color-text-muted", theme.text.muted);
    document.documentElement.style.setProperty("--color-text-header-module", theme.text.headerModule);
    document.documentElement.style.setProperty("--color-text-header-table", theme.text.headerTable);

    // Border colors
    document.documentElement.style.setProperty("--color-border-primary", theme.border.primary);
    document.documentElement.style.setProperty("--color-border-secondary", theme.border.secondary);
    document.documentElement.style.setProperty("--color-border-tertiary", theme.border.tertiary);
    document.documentElement.style.setProperty("--color-border-current", theme.border.current);
    document.documentElement.style.setProperty("--color-border-active", theme.border.active);

    // Action colors
    document.documentElement.style.setProperty("--color-action-primary", theme.action.primary);
    document.documentElement.style.setProperty("--color-action-secondary", theme.action.secondary);
    document.documentElement.style.setProperty("--color-action-tertiary", theme.action.tertiary);
    document.documentElement.style.setProperty("--color-action-quaternary", theme.action.quaternary);

    // Status colors
    document.documentElement.style.setProperty("--color-status-active", theme.status.active);
    document.documentElement.style.setProperty("--color-status-inactive", theme.status.inactive);

    // Accent color
    document.documentElement.style.setProperty("--color-accent-primary", theme.accentPrimary);
  }, [theme]);
  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
    value: {
      theme: theme,
      setTheme: setTheme
    }
  }, children);
}