@aesthetic/system - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dts/Design.d.ts

 import Theme from './Theme';
-import { DeepPartial, DesignTokens, MixinTemplateMap, ThemeOptions, ThemeTokens } from './types';
+import { DeepPartial, DesignTokens, ThemeOptions, ThemeTokens } from './types';
 export default class Design<T extends object> {
-    readonly mixins?: MixinTemplateMap<T>;
     readonly name: string;
@@ -10,3 +9,3 @@ readonly rootLineHeight: number;
     readonly tokens: DesignTokens;
-    constructor(name: string, tokens: Omit<DesignTokens, 'depth'>, mixins?: MixinTemplateMap<T>);
+    constructor(name: string, tokens: Omit<DesignTokens, 'depth'>);
     /**
@@ -19,4 +18,4 @@ * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
      */
-    extend(name: string, tokens: DeepPartial<DesignTokens>, mixins?: MixinTemplateMap<T>): Design<T>;
+    extend(name: string, tokens: DeepPartial<DesignTokens>): Design<T>;
 }
 //# sourceMappingURL=Design.d.ts.map

dts/index.d.ts

@@ -6,2 +6,3 @@ /**
 import Design from './Design';
+import * as mixin from './mixins';
 import Theme from './Theme';
@@ -11,3 +12,3 @@ import ThemeRegistry from './ThemeRegistry';
 export * from './types';
-export { Design, Theme, ThemeRegistry };
+export { Design, mixin, Theme, ThemeRegistry };
 //# sourceMappingURL=index.d.ts.map

dts/Theme.d.ts

 import { ColorScheme, ContrastLevel, Unit, VariablesMap } from '@aesthetic/types';
 import Design from './Design';
-import { DeepPartial, MixinTemplate, MixinTemplateMap, MixinUtil, ThemeOptions, ThemeTokens, Tokens, Utilities, VariableName } from './types';
-declare type MixinTemplateCache<T extends object> = Record<string, Set<MixinTemplate<T>>>;
+import { DeepPartial, MixinType, ThemeOptions, ThemeTokens, Tokens, Utilities, VariableName } from './types';
 export default class Theme<T extends object> implements Utilities<T> {
     name: string;
     readonly contrast: ContrastLevel;
-    readonly mixin: MixinUtil<T>;
     readonly scheme: ColorScheme;
     readonly tokens: Tokens;
-    protected mixins: Record<string, MixinTemplate<T>>;
-    protected templates: MixinTemplateCache<T>;
     private cssVariables?;
     private design;
-    constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design<T>, parentTemplates?: MixinTemplateCache<T>);
+    constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design<T>);
     /**
@@ -21,10 +17,2 @@ * Extend and instantiate a new theme instance with customized tokens.
     /**
-     * Extend a registered mixin with additional CSS properties.
-     */
-    extendMixin(name: string, template: MixinTemplate<T>): this;
-    /**
-     * Register a mixin to provide reusable CSS properties.
-     */
-    registerMixin(name: string, template: MixinTemplate<T>): this;
-    /**
      * Return both design and theme tokens as a mapping of CSS variables.
@@ -37,17 +25,12 @@ */
      */
-    mixinBase(name: string, maybeOptions?: T | object, maybeRule?: T): T;
+    mixin: (name: MixinType, rule?: T | undefined) => T;
     /**
      * Return a `rem` unit equivalent for the current spacing type and unit.
      */
-    unit(...multipliers: number[]): Unit;
+    unit: (...multipliers: number[]) => Unit;
     /**
      * Return a CSS variable declaration with the defined name and fallbacks.
      */
-    var(name: VariableName, ...fallbacks: (number | string)[]): string;
-    /**
-     * Register the built-in mixin's as properties on the mixin method for easy access.
-     */
-    protected registerBuiltIns(mixins: MixinTemplateMap<T>): void;
+    var: (name: VariableName, ...fallbacks: (number | string)[]) => string;
 }
-export {};
 //# sourceMappingURL=Theme.d.ts.map

dts/types.d.ts

@@ -8,3 +8,3 @@ import { ColorScheme, ContrastLevel, Unit } from '@aesthetic/types';
 export declare type ElevationType = 'content' | 'dialog' | 'menu' | 'modal' | 'navigation' | 'overlay' | 'sheet' | 'toast' | 'tooltip';
-export declare type PaletteType = 'brand' | 'danger' | 'failure' | 'info' | 'muted' | 'neutral' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
+export declare type PaletteType = 'brand' | 'danger' | 'muted' | 'negative' | 'neutral' | 'positive' | 'primary' | 'secondary' | 'tertiary' | 'warning';
 export declare type ShadowSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -222,44 +222,2 @@ export declare type SpacingSize = CommonSize | 'md' | 'xl' | 'xs';
     'palette-danger-text': Hexcode;
-    'palette-failure-bg-base': Hexcode;
-    'palette-failure-bg-disabled': Hexcode;
-    'palette-failure-bg-focused': Hexcode;
-    'palette-failure-bg-hovered': Hexcode;
-    'palette-failure-bg-selected': Hexcode;
-    'palette-failure-color-00': Hexcode;
-    'palette-failure-color-10': Hexcode;
-    'palette-failure-color-20': Hexcode;
-    'palette-failure-color-30': Hexcode;
-    'palette-failure-color-40': Hexcode;
-    'palette-failure-color-50': Hexcode;
-    'palette-failure-color-60': Hexcode;
-    'palette-failure-color-70': Hexcode;
-    'palette-failure-color-80': Hexcode;
-    'palette-failure-color-90': Hexcode;
-    'palette-failure-fg-base': Hexcode;
-    'palette-failure-fg-disabled': Hexcode;
-    'palette-failure-fg-focused': Hexcode;
-    'palette-failure-fg-hovered': Hexcode;
-    'palette-failure-fg-selected': Hexcode;
-    'palette-failure-text': Hexcode;
-    'palette-info-bg-base': Hexcode;
-    'palette-info-bg-disabled': Hexcode;
-    'palette-info-bg-focused': Hexcode;
-    'palette-info-bg-hovered': Hexcode;
-    'palette-info-bg-selected': Hexcode;
-    'palette-info-color-00': Hexcode;
-    'palette-info-color-10': Hexcode;
-    'palette-info-color-20': Hexcode;
-    'palette-info-color-30': Hexcode;
-    'palette-info-color-40': Hexcode;
-    'palette-info-color-50': Hexcode;
-    'palette-info-color-60': Hexcode;
-    'palette-info-color-70': Hexcode;
-    'palette-info-color-80': Hexcode;
-    'palette-info-color-90': Hexcode;
-    'palette-info-fg-base': Hexcode;
-    'palette-info-fg-disabled': Hexcode;
-    'palette-info-fg-focused': Hexcode;
-    'palette-info-fg-hovered': Hexcode;
-    'palette-info-fg-selected': Hexcode;
-    'palette-info-text': Hexcode;
     'palette-muted-bg-base': Hexcode;
@@ -286,2 +244,23 @@ 'palette-muted-bg-disabled': Hexcode;
     'palette-muted-text': Hexcode;
+    'palette-negative-bg-base': Hexcode;
+    'palette-negative-bg-disabled': Hexcode;
+    'palette-negative-bg-focused': Hexcode;
+    'palette-negative-bg-hovered': Hexcode;
+    'palette-negative-bg-selected': Hexcode;
+    'palette-negative-color-00': Hexcode;
+    'palette-negative-color-10': Hexcode;
+    'palette-negative-color-20': Hexcode;
+    'palette-negative-color-30': Hexcode;
+    'palette-negative-color-40': Hexcode;
+    'palette-negative-color-50': Hexcode;
+    'palette-negative-color-60': Hexcode;
+    'palette-negative-color-70': Hexcode;
+    'palette-negative-color-80': Hexcode;
+    'palette-negative-color-90': Hexcode;
+    'palette-negative-fg-base': Hexcode;
+    'palette-negative-fg-disabled': Hexcode;
+    'palette-negative-fg-focused': Hexcode;
+    'palette-negative-fg-hovered': Hexcode;
+    'palette-negative-fg-selected': Hexcode;
+    'palette-negative-text': Hexcode;
     'palette-neutral-bg-base': Hexcode;
@@ -308,2 +287,23 @@ 'palette-neutral-bg-disabled': Hexcode;
     'palette-neutral-text': Hexcode;
+    'palette-positive-bg-base': Hexcode;
+    'palette-positive-bg-disabled': Hexcode;
+    'palette-positive-bg-focused': Hexcode;
+    'palette-positive-bg-hovered': Hexcode;
+    'palette-positive-bg-selected': Hexcode;
+    'palette-positive-color-00': Hexcode;
+    'palette-positive-color-10': Hexcode;
+    'palette-positive-color-20': Hexcode;
+    'palette-positive-color-30': Hexcode;
+    'palette-positive-color-40': Hexcode;
+    'palette-positive-color-50': Hexcode;
+    'palette-positive-color-60': Hexcode;
+    'palette-positive-color-70': Hexcode;
+    'palette-positive-color-80': Hexcode;
+    'palette-positive-color-90': Hexcode;
+    'palette-positive-fg-base': Hexcode;
+    'palette-positive-fg-disabled': Hexcode;
+    'palette-positive-fg-focused': Hexcode;
+    'palette-positive-fg-hovered': Hexcode;
+    'palette-positive-fg-selected': Hexcode;
+    'palette-positive-text': Hexcode;
     'palette-primary-bg-base': Hexcode;
@@ -351,23 +351,2 @@ 'palette-primary-bg-disabled': Hexcode;
     'palette-secondary-text': Hexcode;
-    'palette-success-bg-base': Hexcode;
-    'palette-success-bg-disabled': Hexcode;
-    'palette-success-bg-focused': Hexcode;
-    'palette-success-bg-hovered': Hexcode;
-    'palette-success-bg-selected': Hexcode;
-    'palette-success-color-00': Hexcode;
-    'palette-success-color-10': Hexcode;
-    'palette-success-color-20': Hexcode;
-    'palette-success-color-30': Hexcode;
-    'palette-success-color-40': Hexcode;
-    'palette-success-color-50': Hexcode;
-    'palette-success-color-60': Hexcode;
-    'palette-success-color-70': Hexcode;
-    'palette-success-color-80': Hexcode;
-    'palette-success-color-90': Hexcode;
-    'palette-success-fg-base': Hexcode;
-    'palette-success-fg-disabled': Hexcode;
-    'palette-success-fg-focused': Hexcode;
-    'palette-success-fg-hovered': Hexcode;
-    'palette-success-fg-selected': Hexcode;
-    'palette-success-text': Hexcode;
     'palette-tertiary-bg-base': Hexcode;
@@ -422,14 +401,5 @@ 'palette-tertiary-bg-disabled': Hexcode;
 export declare type UnitUtil = (...sizes: number[]) => Unit;
-export declare type MixinTemplate<T extends object, O extends object = object> = (options: O) => T;
-export declare type MixinTemplateMap<T extends object> = Record<string, MixinTemplate<T>>;
-export interface Mixin<T extends object, O extends object = object> {
-    (options: O, rule: T): T;
-    (rule?: T): T;
-}
-export interface Mixins<T extends object> {
-}
-export interface MixinUtil<T extends object, O extends object = object> extends Mixins<T> {
-    (name: string, options: O, rule: T): T;
-    (name: string, rule?: T): T;
-}
+export declare type MixinType = 'hide-offscreen' | 'hide-visually' | 'reset-button' | 'reset-input' | 'reset-list' | 'reset-media' | 'reset-typography' | 'root' | 'text-break' | 'text-truncate' | 'text-wrap';
+export declare type MixinTemplate<T extends object> = (utils: Utilities<T>) => T;
+export declare type MixinUtil<T extends object> = (name: MixinType, rule?: T) => T;
 export interface Utilities<T extends object> {
@@ -436,0 +406,0 @@ contrast: ContrastLevel;

esm/index.js

@@ -5,3 +5,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 // Platform: browser, Support: stable, Format: esm
-import { deepMerge, objectLoop, hyphenate, isObject } from '@aesthetic/utils';
+import { objectLoop, deepMerge, hyphenate, isObject } from '@aesthetic/utils';
 var DEPTHS = {
@@ -28,19 +28,214 @@ content: 100,
 var SHADE_RANGES = ['00', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
+
+function hideOffscreen() {
+  return {
+    clipPath: 'rect(1px, 1px, 1px, 1px)',
+    height: 1,
+    left: '-5vw',
+    overflow: 'hidden',
+    position: 'fixed',
+    width: 1
+  };
+}
+
+function hideVisually() {
+  return {
+    '@selectors': {
+      ':not(:focus):not(:active)': {
+        border: 0,
+        clip: 'rect(0, 0, 0, 0)',
+        clipPath: 'inset(50%)',
+        height: 1,
+        margin: 0,
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: 1
+      }
+    }
+  };
+}
+
+function resetButton() {
+  return {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    fontSize: 'inherit',
+    margin: 0,
+    padding: 0,
+    textDecoration: 'none',
+    userSelect: 'auto',
+    verticalAlign: 'middle'
+  };
+}
+
+function resetInput() {
+  return {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    '@selectors': {
+      '::-moz-focus-outer': {
+        border: 0
+      }
+    }
+  };
+}
+
+function resetList() {
+  return {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0
+  };
+}
+
+function resetMedia() {
+  return {
+    display: 'block',
+    verticalAlign: 'middle'
+  };
+}
+
+function resetTypography() {
+  return {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'normal',
+    wordWrap: 'break-word'
+  };
+}
+
+function root(css) {
+  var declaration = {
+    backgroundColor: css.var('palette-neutral-color-00'),
+    color: css.var('palette-neutral-text'),
+    fontFamily: css.var('typography-font-text'),
+    fontSize: css.var('typography-root-text-size'),
+    lineHeight: css.var('typography-root-line-height'),
+    textRendering: 'optimizeLegibility',
+    textSizeAdjust: '100%',
+    margin: 0,
+    padding: 0,
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    '@media': {}
+  }; // Fluid typography!
+
+  objectLoop(css.tokens.breakpoint, function (bp, size) {
+    declaration['@media'][bp.query] = {
+      fontSize: css.var("breakpoint-" + size + "-root-text-size"),
+      lineHeight: css.var("breakpoint-" + size + "-root-line-height")
+    };
+  });
+  return declaration;
+}
+
+function textBreak() {
+  return {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    wordBreak: 'break-word'
+  };
+}
+
+function textTruncate() {
+  return {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+
+function textWrap() {
+  return {
+    overflowWrap: 'normal',
+    wordWrap: 'normal',
+    wordBreak: 'normal'
+  };
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var MIXIN_MAP = {
+  'hide-offscreen': hideOffscreen,
+  'hide-visually': hideVisually,
+  'reset-button': resetButton,
+  'reset-input': resetInput,
+  'reset-list': resetList,
+  'reset-media': resetMedia,
+  'reset-typography': resetTypography,
+  root: root,
+  'text-break': textBreak,
+  'text-truncate': textTruncate,
+  'text-wrap': textWrap
+};
+var mixins = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  hideOffscreen: hideOffscreen,
+  hideVisually: hideVisually,
+  resetButton: resetButton,
+  resetInput: resetInput,
+  resetList: resetList,
+  resetMedia: resetMedia,
+  resetTypography: resetTypography,
+  root: root,
+  textBreak: textBreak,
+  textTruncate: textTruncate,
+  textWrap: textWrap,
+  MIXIN_MAP: MIXIN_MAP
+});
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
 
 var Theme = /*#__PURE__*/function () {
-  function Theme(options, tokens, design, parentTemplates) {
-    if (parentTemplates === void 0) {
-      parentTemplates = {};
-    }
+  function Theme(options, tokens, design) {
+    var _this = this;
 
     this.name = '';
     this.contrast = void 0;
-    this.mixin = void 0;
     this.scheme = void 0;
     this.tokens = void 0;
-    this.mixins = {};
-    this.templates = {};
     this.cssVariables = void 0;
     this.design = void 0;
+
+    this.mixin = function (name, rule) {
+      var properties = {};
+      var mixin = MIXIN_MAP[name];
+
+      if (mixin) {
+        Object.assign(properties, mixin(_this));
+      } else if (process.env.NODE_ENV !== "production") {
+        throw new Error("Unknown mixin \"" + name + "\".");
+      }
+
+      if (rule) {
+        return deepMerge(properties, rule);
+      }
+
+      return properties;
+    };
+
+    this.unit = function () {
+      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
+        multipliers[_key] = arguments[_key];
+      }
+
+      return multipliers.map(function (m) {
+        return (_this.design.spacingUnit * m / _this.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
+      }).join(' ');
+    };
+
+    this.var = function (name) {
+      for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        fallbacks[_key2 - 1] = arguments[_key2];
+      }
+
+      return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
+    };
+
     this.contrast = options.contrast;
@@ -50,13 +245,2 @@ this.scheme = options.scheme;
     this.tokens = _extends({}, design.tokens, tokens);
-    this.templates = parentTemplates; // Bind instead of using anonymous functions since we need
-    // to pass these around and define properties on them!
-
-    this.mixin = this.mixinBase.bind(this);
-    this.unit = this.unit.bind(this);
-    this.var = this.var.bind(this); // If the parent design has defined mixins,
-    // register them as special built-ins.
-
-    if (design.mixins) {
-      this.registerBuiltIns(design.mixins);
-    }
   }
@@ -78,29 +262,5 @@ /**
       scheme: this.scheme
-    }, options), deepMerge(this.tokens, tokens), this.design, _extends({}, this.templates));
+    }, options), deepMerge(this.tokens, tokens), this.design);
   }
   /**
-   * Extend a registered mixin with additional CSS properties.
-   */
-  ;
-
-  _proto.extendMixin = function extendMixin(name, template) {
-    this.templates[name] = (this.templates[name] || new Set()).add(template);
-    return this;
-  }
-  /**
-   * Register a mixin to provide reusable CSS properties.
-   */
-  ;
-
-  _proto.registerMixin = function registerMixin(name, template) {
-    if (process.env.NODE_ENV !== "production") {
-      if (this.mixins[name]) {
-        throw new Error("A mixin already exists for \"" + name + "\". Cannot overwrite.");
-      }
-    }
-
-    this.mixins[name] = template;
-    return this;
-  }
-  /**
    * Return both design and theme tokens as a mapping of CSS variables.
@@ -139,90 +299,2 @@ */
 
-  _proto.mixinBase = function mixinBase(name, maybeOptions, maybeRule) {
-    var _this = this;
-
-    var options = {};
-    var rule;
-
-    if (maybeOptions && maybeRule) {
-      options = maybeOptions;
-      rule = maybeRule;
-    } else if (maybeOptions) {
-      rule = maybeOptions;
-    }
-
-    var properties = {};
-    var mixin = this.mixins[name];
-
-    if (mixin) {
-      Object.assign(properties, mixin.call(this, options));
-    } else if (process.env.NODE_ENV !== "production") {
-      // Log instead of error since mixins are dynamic
-      // eslint-disable-next-line no-console
-      console.warn("Unknown mixin \"" + name + "\".");
-    }
-
-    var templates = this.templates[name];
-
-    if (templates) {
-      templates.forEach(function (template) {
-        Object.assign(properties, template.call(_this, options));
-      });
-    }
-
-    if (rule) {
-      Object.assign(properties, rule);
-    }
-
-    return properties;
-  }
-  /**
-   * Return a `rem` unit equivalent for the current spacing type and unit.
-   */
-  ;
-
-  _proto.unit = function unit() {
-    var _this2 = this;
-
-    for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
-      multipliers[_key] = arguments[_key];
-    }
-
-    return multipliers.map(function (m) {
-      return (_this2.design.spacingUnit * m / _this2.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
-    }).join(' ');
-  }
-  /**
-   * Return a CSS variable declaration with the defined name and fallbacks.
-   */
-  ;
-
-  _proto.var = function _var(name) {
-    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      fallbacks[_key2 - 1] = arguments[_key2];
-    }
-
-    return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
-  }
-  /**
-   * Register the built-in mixin's as properties on the mixin method for easy access.
-   */
-  ;
-
-  _proto.registerBuiltIns = function registerBuiltIns(mixins) {
-    var _this3 = this;
-
-    objectLoop(mixins, function (template, name) {
-      var type = hyphenate(name); // Register the mixin
-
-      _this3.registerMixin(type, template); // Provide a utility function
-
-
-      Object.defineProperty(_this3.mixin, name, {
-        value: function value(options, rule) {
-          return _this3.mixin(type, options, rule);
-        }
-      });
-    });
-  };
-
   return Theme;
@@ -232,4 +304,3 @@ }();
 var Design = /*#__PURE__*/function () {
-  function Design(name, tokens, mixins) {
-    this.mixins = void 0;
+  function Design(name, tokens) {
     this.name = void 0;
@@ -241,3 +312,2 @@ this.rootLineHeight = void 0;
     this.name = name;
-    this.mixins = mixins;
     this.tokens = _extends({}, tokens, {
@@ -266,4 +336,4 @@ depth: DEPTHS
 
-  _proto2.extend = function extend(name, tokens, mixins) {
-    return new Design(name, deepMerge(this.tokens, tokens), _extends({}, this.mixins, mixins));
+  _proto2.extend = function extend(name, tokens) {
+    return new Design(name, deepMerge(this.tokens, tokens));
   };
@@ -306,3 +376,3 @@
   _proto3.getPreferredTheme = function getPreferredTheme(_temp) {
-    var _this4 = this;
+    var _this2 = this;
 
@@ -337,3 +407,3 @@ var _ref = _temp === void 0 ? {} : _temp,
       return contrastCheckOrder.some(function (contrast) {
-        possibleTheme = _this4.query({
+        possibleTheme = _this2.query({
           contrast: contrast,
@@ -459,3 +529,3 @@ scheme: scheme
 
-export { DEPTHS, Design, SHADE_RANGES, Theme, ThemeRegistry };
+export { DEPTHS, Design, SHADE_RANGES, Theme, ThemeRegistry, mixins as mixin };
 //# sourceMappingURL=index.js.map

esm/test.js

@@ -330,31 +330,2 @@ // Generated with Packemon: https://packemon.dev
     },
-    info: {
-      color: {
-        '10': '#fff',
-        '20': '#fff',
-        '30': '#fff',
-        '40': '#fff',
-        '50': '#fff',
-        '60': '#fff',
-        '70': '#fff',
-        '80': '#fff',
-        '90': '#fff',
-        '00': '#fff'
-      },
-      text: '#fff',
-      bg: {
-        base: '#fff',
-        disabled: '#fff',
-        focused: '#fff',
-        hovered: '#fff',
-        selected: '#fff'
-      },
-      fg: {
-        base: '#fff',
-        disabled: '#fff',
-        focused: '#fff',
-        hovered: '#fff',
-        selected: '#fff'
-      }
-    },
     warning: {
@@ -418,3 +389,3 @@ color: {
     },
-    failure: {
+    negative: {
       color: {
@@ -448,3 +419,3 @@ '10': '#fff',
     },
-    success: {
+    positive: {
       color: {
@@ -659,31 +630,2 @@ '10': '#fff',
     },
-    info: {
-      color: {
-        '10': '#000',
-        '20': '#000',
-        '30': '#000',
-        '40': '#000',
-        '50': '#000',
-        '60': '#000',
-        '70': '#000',
-        '80': '#000',
-        '90': '#000',
-        '00': '#000'
-      },
-      text: '#000',
-      bg: {
-        base: '#000',
-        disabled: '#000',
-        focused: '#000',
-        hovered: '#000',
-        selected: '#000'
-      },
-      fg: {
-        base: '#000',
-        disabled: '#000',
-        focused: '#000',
-        hovered: '#000',
-        selected: '#000'
-      }
-    },
     warning: {
@@ -747,3 +689,3 @@ color: {
     },
-    failure: {
+    negative: {
       color: {
@@ -777,3 +719,3 @@ '10': '#000',
     },
-    success: {
+    positive: {
       color: {
@@ -780,0 +722,0 @@ '10': '#000',

lib/index.js

@@ -34,19 +34,214 @@ // Generated with Packemon: https://packemon.dev
 var SHADE_RANGES = ['00', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
+
+function hideOffscreen() {
+  return {
+    clipPath: 'rect(1px, 1px, 1px, 1px)',
+    height: 1,
+    left: '-5vw',
+    overflow: 'hidden',
+    position: 'fixed',
+    width: 1
+  };
+}
+
+function hideVisually() {
+  return {
+    '@selectors': {
+      ':not(:focus):not(:active)': {
+        border: 0,
+        clip: 'rect(0, 0, 0, 0)',
+        clipPath: 'inset(50%)',
+        height: 1,
+        margin: 0,
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: 1
+      }
+    }
+  };
+}
+
+function resetButton() {
+  return {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    fontSize: 'inherit',
+    margin: 0,
+    padding: 0,
+    textDecoration: 'none',
+    userSelect: 'auto',
+    verticalAlign: 'middle'
+  };
+}
+
+function resetInput() {
+  return {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    '@selectors': {
+      '::-moz-focus-outer': {
+        border: 0
+      }
+    }
+  };
+}
+
+function resetList() {
+  return {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0
+  };
+}
+
+function resetMedia() {
+  return {
+    display: 'block',
+    verticalAlign: 'middle'
+  };
+}
+
+function resetTypography() {
+  return {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'normal',
+    wordWrap: 'break-word'
+  };
+}
+
+function root(css) {
+  var declaration = {
+    backgroundColor: css.var('palette-neutral-color-00'),
+    color: css.var('palette-neutral-text'),
+    fontFamily: css.var('typography-font-text'),
+    fontSize: css.var('typography-root-text-size'),
+    lineHeight: css.var('typography-root-line-height'),
+    textRendering: 'optimizeLegibility',
+    textSizeAdjust: '100%',
+    margin: 0,
+    padding: 0,
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    '@media': {}
+  }; // Fluid typography!
+
+  utils.objectLoop(css.tokens.breakpoint, function (bp, size) {
+    declaration['@media'][bp.query] = {
+      fontSize: css.var("breakpoint-" + size + "-root-text-size"),
+      lineHeight: css.var("breakpoint-" + size + "-root-line-height")
+    };
+  });
+  return declaration;
+}
+
+function textBreak() {
+  return {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    wordBreak: 'break-word'
+  };
+}
+
+function textTruncate() {
+  return {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+
+function textWrap() {
+  return {
+    overflowWrap: 'normal',
+    wordWrap: 'normal',
+    wordBreak: 'normal'
+  };
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var MIXIN_MAP = {
+  'hide-offscreen': hideOffscreen,
+  'hide-visually': hideVisually,
+  'reset-button': resetButton,
+  'reset-input': resetInput,
+  'reset-list': resetList,
+  'reset-media': resetMedia,
+  'reset-typography': resetTypography,
+  root: root,
+  'text-break': textBreak,
+  'text-truncate': textTruncate,
+  'text-wrap': textWrap
+};
+var mixins = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  hideOffscreen: hideOffscreen,
+  hideVisually: hideVisually,
+  resetButton: resetButton,
+  resetInput: resetInput,
+  resetList: resetList,
+  resetMedia: resetMedia,
+  resetTypography: resetTypography,
+  root: root,
+  textBreak: textBreak,
+  textTruncate: textTruncate,
+  textWrap: textWrap,
+  MIXIN_MAP: MIXIN_MAP
+});
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
 
 var Theme = /*#__PURE__*/function () {
-  function Theme(options, tokens, design, parentTemplates) {
-    if (parentTemplates === void 0) {
-      parentTemplates = {};
-    }
+  function Theme(options, tokens, design) {
+    var _this = this;
 
     this.name = '';
     this.contrast = void 0;
-    this.mixin = void 0;
     this.scheme = void 0;
     this.tokens = void 0;
-    this.mixins = {};
-    this.templates = {};
     this.cssVariables = void 0;
     this.design = void 0;
+
+    this.mixin = function (name, rule) {
+      var properties = {};
+      var mixin = MIXIN_MAP[name];
+
+      if (mixin) {
+        Object.assign(properties, mixin(_this));
+      } else if (process.env.NODE_ENV !== "production") {
+        throw new Error("Unknown mixin \"" + name + "\".");
+      }
+
+      if (rule) {
+        return utils.deepMerge(properties, rule);
+      }
+
+      return properties;
+    };
+
+    this.unit = function () {
+      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
+        multipliers[_key] = arguments[_key];
+      }
+
+      return multipliers.map(function (m) {
+        return (_this.design.spacingUnit * m / _this.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
+      }).join(' ');
+    };
+
+    this.var = function (name) {
+      for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        fallbacks[_key2 - 1] = arguments[_key2];
+      }
+
+      return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
+    };
+
     this.contrast = options.contrast;
@@ -56,13 +251,2 @@ this.scheme = options.scheme;
     this.tokens = _extends({}, design.tokens, tokens);
-    this.templates = parentTemplates; // Bind instead of using anonymous functions since we need
-    // to pass these around and define properties on them!
-
-    this.mixin = this.mixinBase.bind(this);
-    this.unit = this.unit.bind(this);
-    this.var = this.var.bind(this); // If the parent design has defined mixins,
-    // register them as special built-ins.
-
-    if (design.mixins) {
-      this.registerBuiltIns(design.mixins);
-    }
   }
@@ -84,29 +268,5 @@ /**
       scheme: this.scheme
-    }, options), utils.deepMerge(this.tokens, tokens), this.design, _extends({}, this.templates));
+    }, options), utils.deepMerge(this.tokens, tokens), this.design);
   }
   /**
-   * Extend a registered mixin with additional CSS properties.
-   */
-  ;
-
-  _proto.extendMixin = function extendMixin(name, template) {
-    this.templates[name] = (this.templates[name] || new Set()).add(template);
-    return this;
-  }
-  /**
-   * Register a mixin to provide reusable CSS properties.
-   */
-  ;
-
-  _proto.registerMixin = function registerMixin(name, template) {
-    if (process.env.NODE_ENV !== "production") {
-      if (this.mixins[name]) {
-        throw new Error("A mixin already exists for \"" + name + "\". Cannot overwrite.");
-      }
-    }
-
-    this.mixins[name] = template;
-    return this;
-  }
-  /**
    * Return both design and theme tokens as a mapping of CSS variables.
@@ -145,90 +305,2 @@ */
 
-  _proto.mixinBase = function mixinBase(name, maybeOptions, maybeRule) {
-    var _this = this;
-
-    var options = {};
-    var rule;
-
-    if (maybeOptions && maybeRule) {
-      options = maybeOptions;
-      rule = maybeRule;
-    } else if (maybeOptions) {
-      rule = maybeOptions;
-    }
-
-    var properties = {};
-    var mixin = this.mixins[name];
-
-    if (mixin) {
-      Object.assign(properties, mixin.call(this, options));
-    } else if (process.env.NODE_ENV !== "production") {
-      // Log instead of error since mixins are dynamic
-      // eslint-disable-next-line no-console
-      console.warn("Unknown mixin \"" + name + "\".");
-    }
-
-    var templates = this.templates[name];
-
-    if (templates) {
-      templates.forEach(function (template) {
-        Object.assign(properties, template.call(_this, options));
-      });
-    }
-
-    if (rule) {
-      Object.assign(properties, rule);
-    }
-
-    return properties;
-  }
-  /**
-   * Return a `rem` unit equivalent for the current spacing type and unit.
-   */
-  ;
-
-  _proto.unit = function unit() {
-    var _this2 = this;
-
-    for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
-      multipliers[_key] = arguments[_key];
-    }
-
-    return multipliers.map(function (m) {
-      return (_this2.design.spacingUnit * m / _this2.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
-    }).join(' ');
-  }
-  /**
-   * Return a CSS variable declaration with the defined name and fallbacks.
-   */
-  ;
-
-  _proto.var = function _var(name) {
-    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      fallbacks[_key2 - 1] = arguments[_key2];
-    }
-
-    return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
-  }
-  /**
-   * Register the built-in mixin's as properties on the mixin method for easy access.
-   */
-  ;
-
-  _proto.registerBuiltIns = function registerBuiltIns(mixins) {
-    var _this3 = this;
-
-    utils.objectLoop(mixins, function (template, name) {
-      var type = utils.hyphenate(name); // Register the mixin
-
-      _this3.registerMixin(type, template); // Provide a utility function
-
-
-      Object.defineProperty(_this3.mixin, name, {
-        value: function value(options, rule) {
-          return _this3.mixin(type, options, rule);
-        }
-      });
-    });
-  };
-
   return Theme;
@@ -238,4 +310,3 @@ }();
 var Design = /*#__PURE__*/function () {
-  function Design(name, tokens, mixins) {
-    this.mixins = void 0;
+  function Design(name, tokens) {
     this.name = void 0;
@@ -247,3 +318,2 @@ this.rootLineHeight = void 0;
     this.name = name;
-    this.mixins = mixins;
     this.tokens = _extends({}, tokens, {
@@ -272,4 +342,4 @@ depth: DEPTHS
 
-  _proto2.extend = function extend(name, tokens, mixins) {
-    return new Design(name, utils.deepMerge(this.tokens, tokens), _extends({}, this.mixins, mixins));
+  _proto2.extend = function extend(name, tokens) {
+    return new Design(name, utils.deepMerge(this.tokens, tokens));
   };
@@ -312,3 +382,3 @@
   _proto3.getPreferredTheme = function getPreferredTheme(_temp) {
-    var _this4 = this;
+    var _this2 = this;
 
@@ -343,3 +413,3 @@ var _ref = _temp === void 0 ? {} : _temp,
       return contrastCheckOrder.some(function (contrast) {
-        possibleTheme = _this4.query({
+        possibleTheme = _this2.query({
           contrast: contrast,
@@ -470,2 +540,3 @@ scheme: scheme
 exports.ThemeRegistry = ThemeRegistry;
+exports.mixin = mixins;
 //# sourceMappingURL=index.js.map

lib/test.js

@@ -337,31 +337,2 @@ // Generated with Packemon: https://packemon.dev
     },
-    info: {
-      color: {
-        '10': '#fff',
-        '20': '#fff',
-        '30': '#fff',
-        '40': '#fff',
-        '50': '#fff',
-        '60': '#fff',
-        '70': '#fff',
-        '80': '#fff',
-        '90': '#fff',
-        '00': '#fff'
-      },
-      text: '#fff',
-      bg: {
-        base: '#fff',
-        disabled: '#fff',
-        focused: '#fff',
-        hovered: '#fff',
-        selected: '#fff'
-      },
-      fg: {
-        base: '#fff',
-        disabled: '#fff',
-        focused: '#fff',
-        hovered: '#fff',
-        selected: '#fff'
-      }
-    },
     warning: {
@@ -425,3 +396,3 @@ color: {
     },
-    failure: {
+    negative: {
       color: {
@@ -455,3 +426,3 @@ '10': '#fff',
     },
-    success: {
+    positive: {
       color: {
@@ -666,31 +637,2 @@ '10': '#fff',
     },
-    info: {
-      color: {
-        '10': '#000',
-        '20': '#000',
-        '30': '#000',
-        '40': '#000',
-        '50': '#000',
-        '60': '#000',
-        '70': '#000',
-        '80': '#000',
-        '90': '#000',
-        '00': '#000'
-      },
-      text: '#000',
-      bg: {
-        base: '#000',
-        disabled: '#000',
-        focused: '#000',
-        hovered: '#000',
-        selected: '#000'
-      },
-      fg: {
-        base: '#000',
-        disabled: '#000',
-        focused: '#000',
-        hovered: '#000',
-        selected: '#000'
-      }
-    },
     warning: {
@@ -754,3 +696,3 @@ color: {
     },
-    failure: {
+    negative: {
       color: {
@@ -784,3 +726,3 @@ '10': '#000',
     },
-    success: {
+    positive: {
       color: {
@@ -787,0 +729,0 @@ '10': '#000',

package.json

 {
   "name": "@aesthetic/system",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Web based building blocks for the Aesthetic design system.",
@@ -48,3 +48,3 @@ "keywords": [
   },
-  "gitHead": "dd20a1ddf36757a97401cff73f7f994b592bfa93"
+  "gitHead": "0fe023cc337d8cf349561ae5d06f5cb849e6b357"
 }

src/Design.ts

 import { deepMerge } from '@aesthetic/utils';
 import { DEPTHS } from './constants';
 import Theme from './Theme';
-import { DeepPartial, DesignTokens, MixinTemplateMap, ThemeOptions, ThemeTokens } from './types';
+import { DeepPartial, DesignTokens, ThemeOptions, ThemeTokens } from './types';
 
 export default class Design<T extends object> {
-  readonly mixins?: MixinTemplateMap<T>;
-
   readonly name: string;
@@ -19,5 +17,4 @@
 
-  constructor(name: string, tokens: Omit<DesignTokens, 'depth'>, mixins?: MixinTemplateMap<T>) {
+  constructor(name: string, tokens: Omit<DesignTokens, 'depth'>) {
     this.name = name;
-    this.mixins = mixins;
     this.tokens = { ...tokens, depth: DEPTHS };
@@ -41,5 +38,5 @@ this.rootLineHeight = tokens.typography.rootLineHeight;
    */
-  extend(name: string, tokens: DeepPartial<DesignTokens>, mixins?: MixinTemplateMap<T>): Design<T> {
-    return new Design(name, deepMerge(this.tokens, tokens), { ...this.mixins, ...mixins });
+  extend(name: string, tokens: DeepPartial<DesignTokens>): Design<T> {
+    return new Design(name, deepMerge(this.tokens, tokens));
   }
 }

src/index.ts

@@ -7,2 +7,3 @@ /**
 import Design from './Design';
+import * as mixin from './mixins';
 import Theme from './Theme';
@@ -14,2 +15,2 @@ import ThemeRegistry from './ThemeRegistry';
 
-export { Design, Theme, ThemeRegistry };
+export { Design, mixin, Theme, ThemeRegistry };

src/test.ts

@@ -263,19 +263,2 @@ import { Design, Theme } from './index';
       },
-      info: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
       warning: {
@@ -315,3 +298,3 @@ color: {
       },
-      failure: {
+      negative: {
         color: {
@@ -333,3 +316,3 @@ '10': '#fff',
       },
-      success: {
+      positive: {
         color: {
@@ -464,19 +447,2 @@ '10': '#fff',
       },
-      info: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
       warning: {
@@ -516,3 +482,3 @@ color: {
       },
-      failure: {
+      negative: {
         color: {
@@ -534,3 +500,3 @@ '10': '#000',
       },
-      success: {
+      positive: {
         color: {
@@ -537,0 +503,0 @@ '10': '#000',

src/Theme.ts

@@ -6,7 +6,6 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
 import Design from './Design';
+import { MIXIN_MAP } from './mixins';
 import {
   DeepPartial,
-  MixinTemplate,
-  MixinTemplateMap,
-  MixinUtil,
+  MixinType,
   ThemeOptions,
@@ -19,5 +18,2 @@ ThemeTokens,
 
-type AnyObject = Record<string, any>;
-type MixinTemplateCache<T extends object> = Record<string, Set<MixinTemplate<T>>>;
-
 export default class Theme<T extends object> implements Utilities<T> {
@@ -28,4 +24,2 @@ name: string = '';
 
-  readonly mixin: MixinUtil<T>;
-
   readonly scheme: ColorScheme;
@@ -35,6 +29,2 @@
 
-  protected mixins: Record<string, MixinTemplate<T>> = {};
-
-  protected templates: MixinTemplateCache<T> = {};
-
   private cssVariables?: VariablesMap;
@@ -44,8 +34,3 @@
 
-  constructor(
-    options: ThemeOptions,
-    tokens: ThemeTokens,
-    design: Design<T>,
-    parentTemplates: MixinTemplateCache<T> = {},
-  ) {
+  constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design<T>) {
     this.contrast = options.contrast;
@@ -55,15 +40,2 @@ this.scheme = options.scheme;
     this.tokens = { ...design.tokens, ...tokens };
-    this.templates = parentTemplates;
-
-    // Bind instead of using anonymous functions since we need
-    // to pass these around and define properties on them!
-    this.mixin = this.mixinBase.bind(this);
-    this.unit = this.unit.bind(this);
-    this.var = this.var.bind(this);
-
-    // If the parent design has defined mixins,
-    // register them as special built-ins.
-    if (design.mixins) {
-      this.registerBuiltIns(design.mixins);
-    }
   }
@@ -83,3 +55,2 @@
       this.design,
-      { ...this.templates },
     );
@@ -89,26 +60,2 @@ }
   /**
-   * Extend a registered mixin with additional CSS properties.
-   */
-  extendMixin(name: string, template: MixinTemplate<T>): this {
-    this.templates[name] = (this.templates[name] || new Set()).add(template);
-
-    return this;
-  }
-
-  /**
-   * Register a mixin to provide reusable CSS properties.
-   */
-  registerMixin(name: string, template: MixinTemplate<T>): this {
-    if (__DEV__) {
-      if (this.mixins[name]) {
-        throw new Error(`A mixin already exists for "${name}". Cannot overwrite.`);
-      }
-    }
-
-    this.mixins[name] = template;
-
-    return this;
-  }
-
-  /**
    * Return both design and theme tokens as a mapping of CSS variables.
@@ -122,3 +69,3 @@ */
     const vars: VariablesMap = {};
-    const collapseTree = (data: AnyObject, path: string[]) => {
+    const collapseTree = (data: Record<string, any>, path: string[]) => {
       objectLoop(data, (value, key) => {
@@ -146,38 +93,18 @@ const nextPath = [...path, hyphenate(key)];
    */
-  mixinBase(name: string, maybeOptions?: T | object, maybeRule?: T): T {
-    let options: object = {};
-    let rule: T | undefined;
-
-    if (maybeOptions && maybeRule) {
-      options = maybeOptions;
-      rule = maybeRule;
-    } else if (maybeOptions) {
-      rule = maybeOptions as T;
-    }
-
+  mixin = (name: MixinType, rule?: T): T => {
     const properties: object = {};
-    const mixin = this.mixins[name];
+    const mixin = MIXIN_MAP[name];
 
     if (mixin) {
-      Object.assign(properties, mixin.call(this, options));
+      Object.assign(properties, mixin(this));
     } else if (__DEV__) {
-      // Log instead of error since mixins are dynamic
-      // eslint-disable-next-line no-console
-      console.warn(`Unknown mixin "${name}".`);
+      throw new Error(`Unknown mixin "${name}".`);
     }
 
-    const templates = this.templates[name];
-
-    if (templates) {
-      templates.forEach((template) => {
-        Object.assign(properties, template.call(this, options));
-      });
-    }
-
     if (rule) {
-      Object.assign(properties, rule);
+      return deepMerge(properties, rule);
     }
 
     return properties as T;
-  }
+  };
 
@@ -187,4 +114,4 @@ /**
    */
-  unit(...multipliers: number[]): Unit {
-    return multipliers
+  unit = (...multipliers: number[]): Unit =>
+    multipliers
       .map(
@@ -197,3 +124,2 @@ (m) =>
       .join(' ');
-  }
 
@@ -203,22 +129,4 @@ /**
    */
-  var(name: VariableName, ...fallbacks: (number | string)[]): string {
-    return `var(${[`--${name}`, ...fallbacks].join(', ')})`;
-  }
-
-  /**
-   * Register the built-in mixin's as properties on the mixin method for easy access.
-   */
-  protected registerBuiltIns(mixins: MixinTemplateMap<T>) {
-    objectLoop(mixins, (template, name) => {
-      const type = hyphenate(name);
-
-      // Register the mixin
-      this.registerMixin(type, template);
-
-      // Provide a utility function
-      Object.defineProperty(this.mixin, name, {
-        value: (options?: object, rule?: T) => this.mixin(type, options!, rule!),
-      });
-    });
-  }
+  var = (name: VariableName, ...fallbacks: (number | string)[]): string =>
+    `var(${[`--${name}`, ...fallbacks].join(', ')})`;
 }

src/types.ts

@@ -27,9 +27,8 @@ import { ColorScheme, ContrastLevel, Unit } from '@aesthetic/types';
   | 'danger'
-  | 'failure'
-  | 'info'
   | 'muted'
+  | 'negative'
   | 'neutral'
+  | 'positive'
   | 'primary'
   | 'secondary'
-  | 'success'
   | 'tertiary'
@@ -279,44 +278,2 @@ | 'warning';
   'palette-danger-text': Hexcode;
-  'palette-failure-bg-base': Hexcode;
-  'palette-failure-bg-disabled': Hexcode;
-  'palette-failure-bg-focused': Hexcode;
-  'palette-failure-bg-hovered': Hexcode;
-  'palette-failure-bg-selected': Hexcode;
-  'palette-failure-color-00': Hexcode;
-  'palette-failure-color-10': Hexcode;
-  'palette-failure-color-20': Hexcode;
-  'palette-failure-color-30': Hexcode;
-  'palette-failure-color-40': Hexcode;
-  'palette-failure-color-50': Hexcode;
-  'palette-failure-color-60': Hexcode;
-  'palette-failure-color-70': Hexcode;
-  'palette-failure-color-80': Hexcode;
-  'palette-failure-color-90': Hexcode;
-  'palette-failure-fg-base': Hexcode;
-  'palette-failure-fg-disabled': Hexcode;
-  'palette-failure-fg-focused': Hexcode;
-  'palette-failure-fg-hovered': Hexcode;
-  'palette-failure-fg-selected': Hexcode;
-  'palette-failure-text': Hexcode;
-  'palette-info-bg-base': Hexcode;
-  'palette-info-bg-disabled': Hexcode;
-  'palette-info-bg-focused': Hexcode;
-  'palette-info-bg-hovered': Hexcode;
-  'palette-info-bg-selected': Hexcode;
-  'palette-info-color-00': Hexcode;
-  'palette-info-color-10': Hexcode;
-  'palette-info-color-20': Hexcode;
-  'palette-info-color-30': Hexcode;
-  'palette-info-color-40': Hexcode;
-  'palette-info-color-50': Hexcode;
-  'palette-info-color-60': Hexcode;
-  'palette-info-color-70': Hexcode;
-  'palette-info-color-80': Hexcode;
-  'palette-info-color-90': Hexcode;
-  'palette-info-fg-base': Hexcode;
-  'palette-info-fg-disabled': Hexcode;
-  'palette-info-fg-focused': Hexcode;
-  'palette-info-fg-hovered': Hexcode;
-  'palette-info-fg-selected': Hexcode;
-  'palette-info-text': Hexcode;
   'palette-muted-bg-base': Hexcode;
@@ -343,2 +300,23 @@ 'palette-muted-bg-disabled': Hexcode;
   'palette-muted-text': Hexcode;
+  'palette-negative-bg-base': Hexcode;
+  'palette-negative-bg-disabled': Hexcode;
+  'palette-negative-bg-focused': Hexcode;
+  'palette-negative-bg-hovered': Hexcode;
+  'palette-negative-bg-selected': Hexcode;
+  'palette-negative-color-00': Hexcode;
+  'palette-negative-color-10': Hexcode;
+  'palette-negative-color-20': Hexcode;
+  'palette-negative-color-30': Hexcode;
+  'palette-negative-color-40': Hexcode;
+  'palette-negative-color-50': Hexcode;
+  'palette-negative-color-60': Hexcode;
+  'palette-negative-color-70': Hexcode;
+  'palette-negative-color-80': Hexcode;
+  'palette-negative-color-90': Hexcode;
+  'palette-negative-fg-base': Hexcode;
+  'palette-negative-fg-disabled': Hexcode;
+  'palette-negative-fg-focused': Hexcode;
+  'palette-negative-fg-hovered': Hexcode;
+  'palette-negative-fg-selected': Hexcode;
+  'palette-negative-text': Hexcode;
   'palette-neutral-bg-base': Hexcode;
@@ -365,2 +343,23 @@ 'palette-neutral-bg-disabled': Hexcode;
   'palette-neutral-text': Hexcode;
+  'palette-positive-bg-base': Hexcode;
+  'palette-positive-bg-disabled': Hexcode;
+  'palette-positive-bg-focused': Hexcode;
+  'palette-positive-bg-hovered': Hexcode;
+  'palette-positive-bg-selected': Hexcode;
+  'palette-positive-color-00': Hexcode;
+  'palette-positive-color-10': Hexcode;
+  'palette-positive-color-20': Hexcode;
+  'palette-positive-color-30': Hexcode;
+  'palette-positive-color-40': Hexcode;
+  'palette-positive-color-50': Hexcode;
+  'palette-positive-color-60': Hexcode;
+  'palette-positive-color-70': Hexcode;
+  'palette-positive-color-80': Hexcode;
+  'palette-positive-color-90': Hexcode;
+  'palette-positive-fg-base': Hexcode;
+  'palette-positive-fg-disabled': Hexcode;
+  'palette-positive-fg-focused': Hexcode;
+  'palette-positive-fg-hovered': Hexcode;
+  'palette-positive-fg-selected': Hexcode;
+  'palette-positive-text': Hexcode;
   'palette-primary-bg-base': Hexcode;
@@ -408,23 +407,2 @@ 'palette-primary-bg-disabled': Hexcode;
   'palette-secondary-text': Hexcode;
-  'palette-success-bg-base': Hexcode;
-  'palette-success-bg-disabled': Hexcode;
-  'palette-success-bg-focused': Hexcode;
-  'palette-success-bg-hovered': Hexcode;
-  'palette-success-bg-selected': Hexcode;
-  'palette-success-color-00': Hexcode;
-  'palette-success-color-10': Hexcode;
-  'palette-success-color-20': Hexcode;
-  'palette-success-color-30': Hexcode;
-  'palette-success-color-40': Hexcode;
-  'palette-success-color-50': Hexcode;
-  'palette-success-color-60': Hexcode;
-  'palette-success-color-70': Hexcode;
-  'palette-success-color-80': Hexcode;
-  'palette-success-color-90': Hexcode;
-  'palette-success-fg-base': Hexcode;
-  'palette-success-fg-disabled': Hexcode;
-  'palette-success-fg-focused': Hexcode;
-  'palette-success-fg-hovered': Hexcode;
-  'palette-success-fg-selected': Hexcode;
-  'palette-success-text': Hexcode;
   'palette-tertiary-bg-base': Hexcode;
@@ -488,20 +466,20 @@ 'palette-tertiary-bg-disabled': Hexcode;
 
-export type MixinTemplate<T extends object, O extends object = object> = (options: O) => T;
+export type MixinType =
+  | 'hide-offscreen'
+  | 'hide-visually'
+  | 'reset-button'
+  | 'reset-input'
+  | 'reset-list'
+  | 'reset-media'
+  | 'reset-typography'
+  | 'root'
+  | 'text-break'
+  | 'text-truncate'
+  | 'text-wrap';
 
-export type MixinTemplateMap<T extends object> = Record<string, MixinTemplate<T>>;
+// eslint-disable-next-line no-use-before-define
+export type MixinTemplate<T extends object> = (utils: Utilities<T>) => T;
 
-export interface Mixin<T extends object, O extends object = object> {
-  (options: O, rule: T): T;
-  (rule?: T): T;
-}
+export type MixinUtil<T extends object> = (name: MixinType, rule?: T) => T;
 
-// Used for augmentation downstream
-// eslint-disable-next-line
-export interface Mixins<T extends object> {}
-
-export interface MixinUtil<T extends object, O extends object = object> extends Mixins<T> {
-  (name: string, options: O, rule: T): T;
-  (name: string, rule?: T): T;
-}
-
 // OTHER
@@ -508,0 +486,0 @@

No alert changes

Improved metrics

Number of package files

29

increased by7.41%

Lines of code

4420

increased by2.01%

Number of low supply chain risk alerts

10

decreased by-16.67%

Worsened metrics

Total package byte prevSize

177480

decreased by-0.36%

No dependency changes