@activecollab/components

Version:
ActiveCollab Components
89 lines (83 loc) • 3.38 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.resolveTheme = exports.isDarkTheme = exports.THEME_NAMES = exports.THEME_MODE_SYSTEM = exports.THEME_MODE_SINGLE = exports.THEMES = exports.LIGHT_THEME_NAMES = exports.DEFAULT_THEME = exports.DEFAULT_DARK_THEME = exports.DARK_THEME_SELECTOR = exports.DARK_THEME_NAMES = exports.DARK_THEME_MATCH = void 0;
// 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.

var THEMES = exports.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"]
}];
var THEME_NAMES = exports.THEME_NAMES = THEMES.map(function (theme) {
  return theme.name;
});
var DARK_THEME_NAMES = exports.DARK_THEME_NAMES = THEMES.filter(function (theme) {
  return theme.dark;
}).map(function (theme) {
  return theme.name;
});
var LIGHT_THEME_NAMES = exports.LIGHT_THEME_NAMES = THEMES.filter(function (theme) {
  return !theme.dark;
}).map(function (theme) {
  return theme.name;
});
var DEFAULT_THEME = exports.DEFAULT_THEME = "indigo";
var DEFAULT_DARK_THEME = exports.DEFAULT_DARK_THEME = "neon";
var THEME_MODE_SINGLE = exports.THEME_MODE_SINGLE = "single";
var THEME_MODE_SYSTEM = exports.THEME_MODE_SYSTEM = "system";
var isDarkTheme = exports.isDarkTheme = function isDarkTheme(name) {
  return Boolean(name) && DARK_THEME_NAMES.includes(name);
};
var knownTheme = function knownTheme(name, fallback) {
  return name && THEME_NAMES.includes(name) ? name : fallback;
};

// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
var resolveTheme = exports.resolveTheme = function resolveTheme(_ref, prefersDark) {
  var 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}`.
var DARK_THEME_MATCH = exports.DARK_THEME_MATCH = ":is(".concat(DARK_THEME_NAMES.map(function (name) {
  return ".".concat(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 `&`.
var DARK_THEME_SELECTOR = exports.DARK_THEME_SELECTOR = "*".concat(DARK_THEME_MATCH);
//# sourceMappingURL=themes.js.map