@activecollab/components

Version:
ActiveCollab Components
67 lines (62 loc) • 2.57 kB
JavaScript
// Single source of truth for theme identity. The theme name is the only class put on <html>;
// styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
// so a new theme never needs the selector updating by hand.

export const THEMES = [{
  name: "indigo",
  title: "Indigo",
  dark: false,
  swatch: ["#5d2bff", "#5d2bff", "#f4f5f7"]
}, {
  name: "cupcake",
  title: "Cupcake",
  dark: false,
  swatch: ["#fe6fa7", "#29bcdd", "#f4f5f7"]
}, {
  name: "classic",
  title: "Classic",
  dark: false,
  swatch: ["#4182f2", "#4182f2", "#f4f5f7"]
}, {
  name: "neon",
  title: "Neon",
  dark: true,
  swatch: ["#67ffc8", "#67ffc8", "#24262e"]
}, {
  name: "dracula",
  title: "Dracula",
  dark: true,
  swatch: ["#ff79c6", "#bd93f9", "#20222c"]
}, {
  name: "one-dark",
  title: "One Dark",
  dark: true,
  swatch: ["#c678dd", "#61afef", "#20232a"]
}];
export const THEME_NAMES = THEMES.map(theme => theme.name);
export const DARK_THEME_NAMES = THEMES.filter(theme => theme.dark).map(theme => theme.name);
export const LIGHT_THEME_NAMES = THEMES.filter(theme => !theme.dark).map(theme => theme.name);
export const DEFAULT_THEME = "indigo";
export const DEFAULT_DARK_THEME = "neon";
export const THEME_MODE_SINGLE = "single";
export const THEME_MODE_SYSTEM = "system";
export const isDarkTheme = name => Boolean(name) && DARK_THEME_NAMES.includes(name);
const knownTheme = (name, fallback) => name && THEME_NAMES.includes(name) ? name : fallback;

// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
export const resolveTheme = (_ref, prefersDark) => {
  let mode = _ref.mode,
    theme = _ref.theme,
    themeLight = _ref.themeLight,
    themeDark = _ref.themeDark;
  if (mode !== THEME_MODE_SYSTEM) {
    return knownTheme(theme, DEFAULT_THEME);
  }
  return prefersDark ? knownTheme(themeDark, DEFAULT_DARK_THEME) : knownTheme(themeLight, DEFAULT_THEME);
};

// :is() and not :where() — :where() is zero-specificity and would silently lose to the light
// declarations it is meant to override.

// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.
export const DARK_THEME_MATCH = ":is(" + DARK_THEME_NAMES.map(name => "." + name).join(", ") + ")";

// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity
// but stops stylis from reading a leading `:` as "attach to the parent" and gluing it onto `&`.
export const DARK_THEME_SELECTOR = "*" + DARK_THEME_MATCH;
//# sourceMappingURL=themes.js.map