@aesthetic/system/lib/index.js

Web based building blocks for the Aesthetic design system.

// Bundled with Packemon: https://packemon.dev
// Platform: browser, Support: stable, Format: lib
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

const Design = require('./bundle-f8d2e6ed.js');

require('@aesthetic/utils');

class ThemeRegistry {
  constructor() {
    this.darkTheme = '';
    this.defaultTheme = '';
    this.lightTheme = '';
    this.themes = {};
  }
  /**
   * Return the default dark theme.
   */


  getDarkTheme() {
    return this.getTheme(this.darkTheme);
  }
  /**
   * Return the default light theme.
   */


  getLightTheme() {
    return this.getTheme(this.lightTheme);
  }
  /**
   * Find an approprite theme based on the user's or device's preferences.
   * Will check for preferred color schemes and contrast levels.
   */


  getPreferredTheme({
    matchColorScheme,
    matchContrastLevel
  } = {}) {
    const prefersDarkScheme = matchColorScheme === null || matchColorScheme === void 0 ? void 0 : matchColorScheme('dark');
    const prefersLightScheme = matchColorScheme === null || matchColorScheme === void 0 ? void 0 : matchColorScheme('light');
    const prefersHighContrast = matchContrastLevel === null || matchContrastLevel === void 0 ? void 0 : matchContrastLevel('high');
    const prefersLowContrast = matchContrastLevel === null || matchContrastLevel === void 0 ? void 0 : matchContrastLevel('low');
    const schemeCheckOrder = [];

    if (prefersDarkScheme) {
      schemeCheckOrder.push('dark');
    } else if (prefersLightScheme) {
      schemeCheckOrder.push('light');
    }

    let possibleTheme; // Find a theme based on device preferences

    schemeCheckOrder.some(scheme => {
      const contrastCheckOrder = ['normal'];

      if (prefersHighContrast) {
        contrastCheckOrder.unshift('high');
      } else if (prefersLowContrast) {
        contrastCheckOrder.unshift('low');
      }

      return contrastCheckOrder.some(contrast => {
        possibleTheme = this.query({
          contrast,
          scheme
        });
        return !!possibleTheme;
      });
    });

    if (possibleTheme) {
      return possibleTheme;
    }

    if (this.defaultTheme) {
      return this.getTheme(this.defaultTheme);
    }

    throw new Error('No themes have been registered.');
  }
  /**
   * Return a theme by name or throw an error if not found.
   */


  getTheme(name) {
    if (process.env.NODE_ENV !== "production" && !name) {
      throw new Error('Cannot find a theme without a name.');
    }

    const theme = this.themes[name];

    if (process.env.NODE_ENV !== "production" && !theme) {
      throw new Error(`Theme "${name}" does not exist. Has it been registered?`);
    }

    return theme;
  }
  /**
   * Query for a theme that matches the defined parameters.
   */


  query(params) {
    return Object.values(this.themes).find(theme => {
      const conditions = [];

      if (params.contrast) {
        conditions.push(theme.contrast === params.contrast);
      }

      if (params.scheme) {
        conditions.push(theme.scheme === params.scheme);
      }

      return conditions.every(c => !!c);
    });
  }
  /**
   * Register a theme with a unique name. Can optionally mark a theme
   * as default for their defined color scheme.
   */


  register(name, theme, isDefault = false) {
    if (process.env.NODE_ENV !== "production" && !(theme instanceof Design.Theme)) {
      throw new TypeError('Only a `Theme` object can be registered.');
    }

    if (isDefault) {
      if (theme.scheme === 'dark') {
        this.darkTheme = name;
      } else {
        this.lightTheme = name;
      }
    }

    if (theme.name && theme.name !== name) {
      if (process.env.NODE_ENV !== "production") {
        throw new Error(`Theme "${name}" has already been registered under "${theme.name}".`);
      }
    } else {
      // eslint-disable-next-line no-param-reassign
      theme.name = name;
    }

    if (!this.defaultTheme) {
      this.defaultTheme = name;
    }

    this.themes[name] = theme;
    return this;
  }
  /**
   * Reset the registry to initial state.
   */


  reset() {
    this.darkTheme = '';
    this.lightTheme = '';
    this.defaultTheme = '';
    this.themes = {};
  }

}

exports.BORDER_SIZES = Design.BORDER_SIZES;
exports.BREAKPOINT_SIZES = Design.BREAKPOINT_SIZES;
exports.DEPTHS = Design.DEPTHS;
exports.Design = Design.Design;
exports.HEADING_LEVELS = Design.HEADING_LEVELS;
exports.HEADING_SIZES = Design.HEADING_SIZES;
exports.PALETTE_TYPES = Design.PALETTE_TYPES;
exports.SHADE_RANGES = Design.SHADE_RANGES;
exports.SHADOW_SIZES = Design.SHADOW_SIZES;
exports.SIZES = Design.SIZES;
exports.SPACING_SIZES = Design.SPACING_SIZES;
exports.TEXT_SIZES = Design.TEXT_SIZES;
exports.Theme = Design.Theme;
exports.mixin = Design.mixins;
exports.ThemeRegistry = ThemeRegistry;
//# sourceMappingURL=index.js.map