@animus-ui/theming 0.1.1-beta.3 → 0.1.1-beta.30

package/CHANGELOG.md

@@ -3,37 +3,133 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.1.1-beta.3](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.2...@animus-ui/theming@0.1.1-beta.3) (2022-01-09)
+## [0.1.1-beta.30](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.28...@animus-ui/theming@0.1.1-beta.30) (2025-07-01)
 
 **Note:** Version bump only for package @animus-ui/theming
 
+## 0.1.1-beta.29 (2025-06-15)
 
+## 0.1.1-beta.1 (2022-01-09)
 
+## 0.1.1-beta.0 (2022-01-09)
 
+**Note:** Version bump only for package @animus-ui/theming
 
-## 0.1.1-beta.2 (2022-01-09)
+## [0.1.1-beta.28](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.27...@animus-ui/theming@0.1.1-beta.28) (2025-06-13)
 
+**Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.27](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.26...@animus-ui/theming@0.1.1-beta.27) (2025-05-29)
 
-## 0.1.1-beta.1 (2022-01-09)
+**Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.26](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.25...@animus-ui/theming@0.1.1-beta.26) (2025-05-29)
 
+**Note:** Version bump only for package @animus-ui/theming
 
-## 0.1.1-beta.0 (2022-01-09)
+## [0.1.1-beta.25](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.24...@animus-ui/theming@0.1.1-beta.25) (2023-03-15)
 
 **Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.24](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.23...@animus-ui/theming@0.1.1-beta.24) (2023-03-15)
 
+**Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.23](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.21...@animus-ui/theming@0.1.1-beta.23) (2023-03-13)
 
+**Note:** Version bump only for package @animus-ui/theming
 
-## [0.1.1-beta.1](https://github.com/codecaaron/animus/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2022-01-09)
+## [0.1.1-beta.22](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.21...@animus-ui/theming@0.1.1-beta.22) (2022-03-25)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.21](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.20...@animus-ui/theming@0.1.1-beta.21) (2022-02-14)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.20](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.19...@animus-ui/theming@0.1.1-beta.20) (2022-02-14)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.19](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.18...@animus-ui/theming@0.1.1-beta.19) (2022-02-12)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.18](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.17...@animus-ui/theming@0.1.1-beta.18) (2022-02-11)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.17](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.16...@animus-ui/theming@0.1.1-beta.17) (2022-02-02)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.16](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.15...@animus-ui/theming@0.1.1-beta.16) (2022-02-02)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.15](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.14...@animus-ui/theming@0.1.1-beta.15) (2022-01-26)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.14](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.13...@animus-ui/theming@0.1.1-beta.14) (2022-01-24)
 
 **Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.13](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.12...@animus-ui/theming@0.1.1-beta.13) (2022-01-24)
 
+**Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.12](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.11...@animus-ui/theming@0.1.1-beta.12) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
 
+## [0.1.1-beta.11](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.10...@animus-ui/theming@0.1.1-beta.11) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.10](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.9...@animus-ui/theming@0.1.1-beta.10) (2022-01-23)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.9](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.8...@animus-ui/theming@0.1.1-beta.9) (2022-01-18)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.8](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.7...@animus-ui/theming@0.1.1-beta.8) (2022-01-16)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.7](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.6...@animus-ui/theming@0.1.1-beta.7) (2022-01-16)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.6](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.5...@animus-ui/theming@0.1.1-beta.6) (2022-01-11)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.5](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.4...@animus-ui/theming@0.1.1-beta.5) (2022-01-09)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.4](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.3...@animus-ui/theming@0.1.1-beta.4) (2022-01-09)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.3](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.2...@animus-ui/theming@0.1.1-beta.3) (2022-01-09)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## 0.1.1-beta.2 (2022-01-09)
+
+## 0.1.1-beta.1 (2022-01-09)
+
+## 0.1.1-beta.0 (2022-01-09)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+## [0.1.1-beta.1](https://github.com/codecaaron/animus/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2022-01-09)
+
+**Note:** Version bump only for package @animus-ui/theming
 
 ## 0.1.1-beta.0 (2022-01-09)
 

package/CLAUDE.md

@@ -0,0 +1,334 @@
+# ThemeBuilder Architecture & Animus Integration
+
+This document captures deep architectural insights about the ThemeBuilder system and its integration with the Animus builder from the core package.
+
+## Table of Contents
+
+1. [ThemeBuilder Architecture](#themebuilder-architecture)
+2. [Design Token Resolution Process](#design-token-resolution-process)
+3. [Animus Builder Integration](#animus-builder-integration)
+4. [Critical Integration Points](#critical-integration-points)
+5. [Recommendations & Improvements](#recommendations--improvements)
+6. [Open Questions](#open-questions)
+
+## ThemeBuilder Architecture
+
+### Overview
+
+The ThemeBuilder provides a fluent, type-safe API for building themes with design tokens, CSS variables, and color modes. It follows a Producer-Consumer pattern where ThemeBuilder produces theme configuration and Animus consumes it via Emotion's ThemeProvider.
+
+### Core Components
+
+#### 1. Current ThemeBuilder Implementation (`createTheme.ts`)
+
+```typescript
+export class ThemeBuilder<T extends AbstractTheme> {
+  #theme = {} as T;
+
+  constructor(baseTheme: T) { /* ... */ }
+}
+```
+
+**Key Methods:**
+- `createScaleVariables(key)` - Transforms theme scales into CSS variables
+- `addColors(colors)` - Adds color tokens to the theme
+- `addColorModes(initialMode, modeConfig)` - Implements color mode switching
+- `addScale(key, createScale)` - Adds new scale to the theme
+- `updateScale(key, updateFn)` - Updates existing scale values
+- `build()` - Finalizes the theme
+
+#### 2. Legacy ThemeBuilder (`ThemeBuilder.ts`)
+
+Uses class inheritance hierarchy:
+```
+ThemeUnitialized → ThemeWithBreakpoints → ThemeWithRawColors → ThemeWithAll
+```
+
+### Theme Object Structure
+
+The built theme contains three critical structures:
+
+1. **Public Scales** (e.g., `theme.colors`): CSS variable references (`'var(--colors-primary)'`)
+2. **Private Variables** (`theme._variables`): CSS variable definitions
+3. **Private Tokens** (`theme._tokens`): Original values (currently redundant)
+
+## Design Token Resolution Process
+
+### 1. Token Definition Phase
+
+```typescript
+createTheme(baseTheme)
+  .addColors({ primary: '#007bff' })
+```
+
+### 2. Serialization Phase
+
+The `serializeTokens` function creates:
+- **Token References**: `{ primary: 'var(--colors-primary)' }`
+- **Token Variables**: `{ '--colors-primary': '#007bff' }`
+
+### 3. Storage Phase
+
+- `theme.colors.primary` = `'var(--colors-primary)'`
+- `theme._variables.root['--colors-primary']` = `'#007bff'`
+- `theme._tokens.colors.primary` = `'#007bff'`
+
+### 4. Injection Phase (Critical Gap)
+
+**Currently missing**: A mechanism to inject CSS variables into the DOM. Applications must implement:
+
+```typescript
+const MyGlobalStyles = () => {
+  const theme = useTheme();
+  return (
+    <Global
+      styles={css`
+        :root {
+          /* Inject theme._variables.root here */
+        }
+      `}
+    />
+  );
+};
+```
+
+### 5. Component Usage Phase
+
+```typescript
+<MyComponent color="primary" />
+```
+
+### 6. Style Resolution Phase
+
+1. `createPropertyStyle` invoked for `color` prop
+2. Calls `lookupScaleValue('primary', 'colors', theme)`
+3. Returns `'var(--colors-primary)'`
+4. Emotion generates CSS: `color: var(--colors-primary);`
+
+### 7. Browser Resolution Phase
+
+Browser applies styles using CSS Custom Properties from injected variables.
+
+## Animus Builder Integration
+
+### Architecture Overview
+
+Animus uses a class hierarchy with fluent API:
+```
+Animus → AnimusWithBase → AnimusWithVariants → AnimusWithStates → AnimusWithSystem → AnimusWithAll
+```
+
+### Integration Points
+
+1. **Theme Access**: Animus components receive theme via Emotion's ThemeProvider
+2. **Scale Lookup**: `lookupScaleValue` resolves theme values from scales
+3. **CSS Variable Support**: Animus treats CSS variable strings as opaque values
+4. **Responsive Breakpoints**: Both systems use `theme.breakpoints` for media queries
+
+### Value Resolution Flow
+
+```
+Component Prop → createPropertyStyle → lookupScaleValue → Theme Scale → CSS Variable → Browser
+```
+
+## Critical Integration Points
+
+### 1. Scale Value Resolution
+
+The `lookupScaleValue` function in core/src/scales/lookupScaleValue.ts:
+- Resolves values from theme scales
+- Falls back to compatTheme
+- **Limitation**: Doesn't support negative values (e.g., `m="-4"`)
+
+### 2. Responsive Values
+
+- **ThemeBuilder**: Creates breakpoint CSS variables
+- **Animus**: Uses breakpoints for media query generation
+- Both systems must coordinate on breakpoint definitions
+
+### 3. Color Modes
+
+Current implementation has complexity:
+- `_variables.mode` contains initial mode values
+- `_tokens.modes` structure unclear
+- Application responsible for mode switching logic
+
+## Recommendations & Improvements
+
+### 1. Simplify Theme Contract
+
+Remove `_tokens` from final output, keeping only:
+- **Public Scales**: CSS variable references
+- **Private Variables**: CSS variable definitions
+
+### 2. Provide Global Styles Utility
+
+```typescript
+export const createGlobalStyles = (theme) => {
+  const { root, modes } = theme._variables;
+
+  return css`
+    :root {
+      ${varsToCss(root)}
+    }
+
+    ${Object.entries(modes).map(([mode, vars]) => `
+      [data-theme='${mode}'] {
+        ${varsToCss(vars)}
+      }
+    `).join('')}
+  `;
+};
+```
+
+### 3. Support Negative Values
+
+Update `lookupScaleValue` to handle string-prefixed negatives:
+
+```typescript
+if (isString(val) && val.startsWith('-')) {
+  const positiveKey = val.substring(1);
+  const scaleValue = get(usedScale, positiveKey);
+
+  if (isString(scaleValue) || isNumber(scaleValue)) {
+    return `-${scaleValue}`;
+  }
+}
+```
+
+### 4. Improve Color Mode Architecture
+
+Restructure `_variables` for clarity:
+```typescript
+{
+  _variables: {
+    root: { /* base tokens */ },
+    modes: {
+      light: { /* semantic aliases */ },
+      dark: { /* semantic aliases */ }
+    }
+  }
+}
+```
+
+### 5. Type Safety Enhancements
+
+- Create comprehensive type tests for chained builder calls
+- Provide `GetAnimusProps<T>` utility type
+- Make `build()` method generic for better inference
+
+## Open Questions
+
+### Critical Architecture Questions
+
+1. **Variable Injection Strategy**: Should we provide an official `ThemeProvider` wrapper that handles CSS variable injection automatically?
+   - Current gap: Apps must manually inject `theme._variables` into DOM
+   - Consideration: Auto-injection could simplify setup but reduce flexibility
+
+2. **Migration Path**: How do we support gradual migration from literal-value themes to CSS-variable-based themes?
+   - Challenge: Mixed themes with both literal values and CSS variables
+   - Need: Clear documentation and tooling for incremental adoption
+
+3. **Performance Optimization**: Is the extensive use of `lodash.merge` in builder chains a performance concern?
+   - Impact: Each builder method creates new merged objects
+   - Alternative: Investigate more performant merge strategies or lazy evaluation
+
+4. **Type Complexity**: How can we simplify the generic type chains while maintaining type safety?
+   - Current: Heavy generic usage can create complex error messages
+   - Goal: Better developer experience with clearer type errors
+
+### Integration Improvements
+
+5. **Negative Value Support**: Should negative values use string prefix pattern (like Chakra UI)?
+   - Current: `lookupScaleValue` doesn't support negative theme values
+   - Proposed: Support `m="-4"` syntax for negative margins
+
+6. **Color Mode Architecture**: Should we simplify the current three-source-of-truth pattern?
+   - Current: `_variables`, `_tokens`, and public scales create confusion
+   - Proposed: Eliminate `_tokens` from final build output
+
+7. **Responsive Value Coordination**: How to ensure array/object responsive syntax works consistently?
+   - Need: Integration tests between ThemeBuilder breakpoints and Animus responsive arrays
+   - Challenge: Both systems must coordinate on breakpoint definitions
+
+### Developer Experience
+
+8. **Official Global Styles Utility**: Should we provide `createGlobalStyles` helper?
+   - Benefit: Standardized way to inject CSS variables
+   - Implementation: Could be part of @animus-ui/theming package
+
+9. **Theme Structure Validation**: Should we validate theme structure at runtime?
+   - Use case: Catch missing CSS variable injections early
+   - Trade-off: Runtime validation vs. bundle size
+
+10. **Documentation Gaps**: Which patterns need more comprehensive examples?
+    - Compound components with theming
+    - Global styles and CSS resets
+    - Performance optimization patterns
+    - Common UI patterns (modals, dropdowns, forms)
+
+### Technical Debt
+
+11. **Legacy ThemeBuilder**: Should we deprecate the class inheritance version?
+    - Current: Two implementations create confusion
+    - Migration: Need clear upgrade path for existing users
+
+12. **Theme Contract Clarity**: How to better document the theme object contract?
+    - Issue: Unclear when to use `_variables` vs `_tokens` vs public scales
+    - Solution: Clearer separation of concerns in documentation
+
+### New Questions from Real-World Usage Analysis
+
+13. **Gradient Token System**: How should gradient tokens be defined in ThemeBuilder?
+    - Observed: Components use `gradient: 'flowX'` tokens
+    - Need: Clear pattern for defining complex gradient tokens as CSS variables
+
+14. **Numeric Value Normalization**: How do numeric theme values (0, 1, 0.5) map to CSS?
+    - Observed: `width: 1`, `size: 1`, `left: 0.5` in components
+    - Question: Is this a percentage system or theme scale reference?
+
+15. **Semantic Token Categories**: What token categories should ThemeBuilder support?
+    - Observed: text-shadow tokens ('flush', 'link-raised')
+    - Observed: gradient tokens ('flowX')
+    - Question: How to organize non-standard CSS tokens?
+
+16. **WebKit-Specific Properties**: Should ThemeBuilder handle vendor prefixes?
+    - Observed: `WebkitTextFillColor`, `WebkitBackgroundClip` usage
+    - Challenge: CSS variables with vendor prefixes
+
+17. **Grid Template Token Support**: Should grid templates be tokenized?
+    - Observed: Complex responsive grid templates in Layout
+    - Consideration: Token vs. inline definition trade-offs
+
+18. **Animation Token Integration**: How should keyframe animations work with tokens?
+    - Observed: Imported keyframes used with Animus styles
+    - Question: Can animations reference theme tokens?
+
+19. **Performance Benchmarks**: What's the performance impact of CSS variables?
+    - Heavy use of pseudo-elements with gradient variables
+    - Need: Benchmarks comparing literal values vs. CSS variables
+
+20. **Custom Property Mappings**: Should ThemeBuilder know about Animus prop shorthands?
+    - Observed: `area` → `gridArea`, `gradient` → complex gradient
+    - Question: Where should this mapping knowledge live?
+
+## Technical Notes
+
+### Key Files
+
+- `/packages/theming/src/utils/createTheme.ts` - Main builder implementation
+- `/packages/theming/src/utils/serializeTokens.ts` - CSS variable generation
+- `/packages/theming/src/utils/flattenScale.ts` - Object flattening utilities
+- `/packages/core/src/scales/lookupScaleValue.ts` - Theme value resolution
+- `/packages/core/src/Animus.ts` - Style builder integration
+
+### Dependencies
+
+- Emotion for CSS-in-JS and theming
+- Lodash for object manipulation
+- TypeScript for type safety
+
+---
+
+*Last Updated: January 2025*
+*Analysis based on deep architectural review and integration testing*

package/dist/core/ThemeBuilder.d.ts

@@ -1,34 +1,34 @@
-import { Breakpoints } from '@animus-ui/core';
-/**
- * 1. Breakpoints
- * 2. Scales
- * 3. Tokens
- * 4. Variables
- * 5. Colors
- * 6. Color Modes
- */
-export declare class ThemeWithAll<Bps, Scales, Tokens, Vars> {
-    breakpoints: Bps;
-    scales: Scales;
-    tokens: Tokens;
-    variables: Vars;
-    constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
-    addScale(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
-    build(): {
-        breakpoints: Bps;
-    } & Scales & {
-        _tokens: Tokens;
-        _variables: Vars;
-    };
-}
-export declare class ThemeWithRawColors<Bps extends Breakpoints, Scales, Tokens, Vars> extends ThemeWithAll<Bps, Scales, Tokens, Vars> {
-    constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
-    addColorModes(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
-}
-export declare class ThemeWithBreakpoints<Bps extends Breakpoints> extends ThemeWithAll<Bps, {}, {}, {}> {
-    constructor(breakpoints: Bps);
-    addColors(): ThemeWithRawColors<Bps, {}, {}, {}>;
-}
-export declare class ThemeUnitialized {
-    addBreakpoints<Bps extends Breakpoints>(breakpoints: Bps): ThemeWithBreakpoints<Bps>;
-}
+import { Breakpoints } from '@animus-ui/core';
+/**
+ * 1. Breakpoints
+ * 2. Scales
+ * 3. Tokens
+ * 4. Variables
+ * 5. Colors
+ * 6. Color Modes
+ */
+export declare class ThemeWithAll<Bps, Scales, Tokens, Vars> {
+    breakpoints: Bps;
+    scales: Scales;
+    tokens: Tokens;
+    variables: Vars;
+    constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
+    addScale(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
+    build(): {
+        breakpoints: Bps;
+    } & Scales & {
+        _tokens: Tokens;
+        _variables: Vars;
+    };
+}
+export declare class ThemeWithRawColors<Bps extends Breakpoints, Scales, Tokens, Vars> extends ThemeWithAll<Bps, Scales, Tokens, Vars> {
+    constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
+    addColorModes(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
+}
+export declare class ThemeWithBreakpoints<Bps extends Breakpoints> extends ThemeWithAll<Bps, {}, {}, {}> {
+    constructor(breakpoints: Bps);
+    addColors(): ThemeWithRawColors<Bps, {}, {}, {}>;
+}
+export declare class ThemeUnitialized {
+    addBreakpoints<Bps extends Breakpoints>(breakpoints: Bps): ThemeWithBreakpoints<Bps>;
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './utils';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,289 @@
+import { isObject, merge, mapValues } from 'lodash';
+
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _classPrivateFieldGet2(s, a) {
+  return s.get(_assertClassBrand(s, a));
+}
+function _classPrivateFieldInitSpec(e, t, a) {
+  _checkPrivateRedeclaration(e, t), t.set(e, a);
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _classApplyDescriptorGet(e, t) {
+  return t.get ? t.get.call(e) : t.value;
+}
+function _classApplyDescriptorSet(e, t, l) {
+  if (t.set) t.set.call(e, l);else {
+    if (!t.writable) throw new TypeError("attempted to set read only private field");
+    t.value = l;
+  }
+}
+function _classPrivateFieldGet(e, t) {
+  var r = _classPrivateFieldGet2(t, e);
+  return _classApplyDescriptorGet(e, r);
+}
+function _classPrivateFieldSet(e, t, r) {
+  var s = _classPrivateFieldGet2(t, e);
+  return _classApplyDescriptorSet(e, s, r), r;
+}
+
+function flattenScale(object, path) {
+  return Object.keys(object).reduce(function (carry, key) {
+    var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
+    var current = object[key];
+    if (isObject(current)) {
+      return _objectSpread2(_objectSpread2({}, carry), flattenScale(current, nextKey));
+    }
+    return _objectSpread2(_objectSpread2({}, carry), {}, _defineProperty({}, nextKey, object[key]));
+  }, {});
+}
+
+var _excluded = ["_"];
+var templateBreakpoints = function templateBreakpoints(value, alias, theme) {
+  if (isObject(value)) {
+    var _ = value._,
+      rest = _objectWithoutProperties(value, _excluded);
+    var css = _defineProperty({}, alias, _);
+    if (theme) {
+      var breakpoints = theme.breakpoints;
+      Object.keys(breakpoints).forEach(function (key) {
+        if (rest[key]) {
+          css[breakpoints[key]] = _defineProperty({}, alias, rest[key]);
+        }
+      });
+    }
+    return css;
+  }
+  return _defineProperty({}, alias, value);
+};
+var serializeTokens = function serializeTokens(tokens, prefix, theme) {
+  var tokenReferences = {};
+  var tokenVariables = {};
+  Object.keys(tokens).forEach(function (key) {
+    var varName = "--".concat(prefix, "-").concat(key.replace('$', ''));
+    tokenReferences[key] = "var(".concat(varName, ")");
+    merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
+  });
+  return {
+    tokens: tokenReferences,
+    variables: tokenVariables
+  };
+};
+
+var _theme = /*#__PURE__*/new WeakMap();
+var ThemeBuilder = /*#__PURE__*/function () {
+  function ThemeBuilder(baseTheme) {
+    _classCallCheck(this, ThemeBuilder);
+    _classPrivateFieldInitSpec(this, _theme, {
+      writable: true,
+      value: {}
+    });
+    _classPrivateFieldSet(this, _theme, baseTheme);
+  }
+  /**
+   *
+   * @param key A key of the current theme to transform into CSS Variables and Variable References
+   * @example .createScaleVariables('fontSize')
+   */
+  _createClass(ThemeBuilder, [{
+    key: "createScaleVariables",
+    value: function createScaleVariables(key) {
+      var _merge;
+      var _serializeTokens = serializeTokens(_classPrivateFieldGet(this, _theme)[key], key, _classPrivateFieldGet(this, _theme)),
+        variables = _serializeTokens.variables,
+        tokens = _serializeTokens.tokens;
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", _defineProperty({}, key, variables)), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
+      return this;
+    }
+    /**
+     *
+     * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
+     * @example .addColors({ navy: 'navy', hyper: 'purple' })
+     */
+  }, {
+    key: "addColors",
+    value: function addColors(colors) {
+      var flatColors = flattenScale(colors);
+      var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldGet(this, _theme)),
+        variables = _serializeTokens2.variables,
+        tokens = _serializeTokens2.tokens;
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
+        colors: tokens,
+        _variables: {
+          root: variables
+        },
+        _tokens: {
+          colors: flatColors
+        }
+      }));
+      return this;
+    }
+    /**
+     *
+     * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
+     * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
+     * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
+     */
+  }, {
+    key: "addColorModes",
+    value: function addColorModes(initialMode, modeConfig) {
+      var _classPrivateFieldGet2,
+        _this = this;
+      var modes = mapValues(modeConfig, function (mode) {
+        return flattenScale(mode);
+      });
+      var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _theme).modes) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[initialMode], modes[initialMode]), function (color) {
+          return _classPrivateFieldGet(_this, _theme).colors[color];
+        }), 'color', _classPrivateFieldGet(this, _theme)),
+        colors = _serializeTokens3.tokens,
+        variables = _serializeTokens3.variables;
+      var getColorValue = function getColorValue(color) {
+        var _classPrivateFieldGet3, _classPrivateFieldGet4;
+        return (_classPrivateFieldGet3 = _classPrivateFieldGet(_this, _theme)._tokens) === null || _classPrivateFieldGet3 === void 0 ? void 0 : (_classPrivateFieldGet4 = _classPrivateFieldGet3.colors) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4[color];
+      };
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
+        colors: colors,
+        modes: modes,
+        mode: initialMode,
+        _getColorValue: getColorValue,
+        _variables: {
+          mode: variables
+        },
+        _tokens: {
+          modes: mapValues(modes, function (mode) {
+            return mapValues(mode, getColorValue);
+          })
+        }
+      }));
+      return this;
+    }
+    /**
+     *
+     * @param key A new key of theme
+     * @param createScale A function that accepts the current theme and returns a new object of scale values.
+     * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
+     */
+  }, {
+    key: "addScale",
+    value: function addScale(key, createScale) {
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldGet(this, _theme))))));
+      return this;
+    }
+    /**
+     *
+     * @param key A current key of theme to be updated with new or computed values
+     * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
+     * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
+     */
+  }, {
+    key: "updateScale",
+    value: function updateScale(key, updateFn) {
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, updateFn(_classPrivateFieldGet(this, _theme)[key]))));
+      return this;
+    }
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+  }, {
+    key: "build",
+    value: function build() {
+      var _serializeTokens4 = serializeTokens(mapValues(_classPrivateFieldGet(this, _theme).breakpoints, function (val) {
+          return "".concat(val, "px");
+        }), 'breakpoint', _classPrivateFieldGet(this, _theme)),
+        variables = _serializeTokens4.variables;
+      return merge({}, _classPrivateFieldGet(this, _theme), {
+        _variables: {
+          breakpoints: variables
+        },
+        _tokens: {}
+      });
+    }
+  }]);
+  return ThemeBuilder;
+}();
+function createTheme(base) {
+  return new ThemeBuilder(base);
+}
+
+export { ThemeBuilder, createTheme, flattenScale, serializeTokens };

package/dist/utils/createTheme.d.ts

@@ -1,53 +1,53 @@
-import { CSSObject, AbstractTheme } from '@animus-ui/core';
-import { LiteralPaths } from './flattenScale';
-import { KeyAsVariable } from './serializeTokens';
-import { ColorModeConfig, Merge, MergeTheme, PrivateThemeKeys } from './types';
-export declare class ThemeBuilder<T extends AbstractTheme> {
-    #private;
-    constructor(baseTheme: T);
-    /**
-     *
-     * @param key A key of the current theme to transform into CSS Variables and Variable References
-     * @example .createScaleVariables('fontSize')
-     */
-    createScaleVariables<Key extends keyof Omit<T, 'breakpoints'> & string>(key: Key): ThemeBuilder<MergeTheme<T, PrivateThemeKeys, Record<Key, Record<Key, KeyAsVariable<T[Key], Key>>>>>;
-    /**
-     *
-     * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
-     * @example .addColors({ navy: 'navy', hyper: 'purple' })
-     */
-    addColors<Colors extends Record<string, string | number | CSSObject>, NextColors extends LiteralPaths<Colors, '-'>>(colors: Colors): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, Record<'colors', KeyAsVariable<NextColors, 'color'>>>>;
-    /**
-     *
-     * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
-     * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
-     * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
-     */
-    addColorModes<Modes extends string, InitialMode extends keyof Config, Colors extends keyof T['colors'], ModeColors extends ColorModeConfig<Colors>, Config extends Record<Modes, ModeColors>, ColorAliases extends {
-        [K in keyof Config]: LiteralPaths<Config[K], '-', '_'>;
-    }>(initialMode: InitialMode, modeConfig: Config): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, {
-        colors: KeyAsVariable<LiteralPaths<Config[keyof Config], '-', '_'>, 'colors'> & T['colors'];
-        modes: Merge<T['modes'], ColorAliases>;
-        mode: keyof Config;
-        _getColorValue: (color: keyof T['colors']) => string;
-    }>>;
-    /**
-     *
-     * @param key A new key of theme
-     * @param createScale A function that accepts the current theme and returns a new object of scale values.
-     * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
-     */
-    addScale<Key extends string, Fn extends (theme: T) => Record<string | number, string | number | Record<string, string | number>>, NewScale extends LiteralPaths<ReturnType<Fn>, '-'>>(key: Key, createScale: Fn): ThemeBuilder<MergeTheme<T, Record<Key, NewScale>>>;
-    /**
-     *
-     * @param key A current key of theme to be updated with new or computed values
-     * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
-     * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
-     */
-    updateScale<Key extends keyof T, Fn extends (tokens: T[Key]) => Record<string | number, unknown>>(key: Key, updateFn: Fn): ThemeBuilder<T & Record<Key, T[Key] & ReturnType<Fn>>>;
-    /**
-     * This finalizes the theme build and returns the final theme and variables to be provided.
-     */
-    build(): T & PrivateThemeKeys;
-}
-export declare function createTheme<T extends AbstractTheme>(base: T): ThemeBuilder<T>;
+import { AbstractTheme, CSSObject } from '@animus-ui/core';
+import { LiteralPaths } from './flattenScale';
+import { KeyAsVariable } from './serializeTokens';
+import { ColorModeConfig, Merge, MergeTheme, PrivateThemeKeys } from './types';
+export declare class ThemeBuilder<T extends AbstractTheme> {
+    #private;
+    constructor(baseTheme: T);
+    /**
+     *
+     * @param key A key of the current theme to transform into CSS Variables and Variable References
+     * @example .createScaleVariables('fontSize')
+     */
+    createScaleVariables<Key extends keyof Omit<T, 'breakpoints'> & string>(key: Key): ThemeBuilder<MergeTheme<T, PrivateThemeKeys, Record<Key, Record<Key, KeyAsVariable<T[Key], Key>>>>>;
+    /**
+     *
+     * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
+     * @example .addColors({ navy: 'navy', hyper: 'purple' })
+     */
+    addColors<Colors extends Record<string, string | number | CSSObject>, NextColors extends LiteralPaths<Colors, '-'>>(colors: Colors): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, Record<'colors', KeyAsVariable<NextColors, 'color'>>>>;
+    /**
+     *
+     * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
+     * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
+     * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
+     */
+    addColorModes<Modes extends string, InitialMode extends keyof Config, Colors extends keyof T['colors'], ModeColors extends ColorModeConfig<Colors>, Config extends Record<Modes, ModeColors>, ColorAliases extends {
+        [K in keyof Config]: LiteralPaths<Config[K], '-', '_'>;
+    }>(initialMode: InitialMode, modeConfig: Config): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, {
+        colors: KeyAsVariable<LiteralPaths<Config[keyof Config], '-', '_'>, 'colors'> & T['colors'];
+        modes: Merge<T['modes'], ColorAliases>;
+        mode: keyof Config;
+        _getColorValue: (color: keyof T['colors']) => string;
+    }>>;
+    /**
+     *
+     * @param key A new key of theme
+     * @param createScale A function that accepts the current theme and returns a new object of scale values.
+     * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
+     */
+    addScale<Key extends string, Fn extends (theme: T) => Record<string | number, string | number | Record<string, string | number>>, NewScale extends LiteralPaths<ReturnType<Fn>, '-'>>(key: Key, createScale: Fn): ThemeBuilder<MergeTheme<T, Record<Key, NewScale>>>;
+    /**
+     *
+     * @param key A current key of theme to be updated with new or computed values
+     * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
+     * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
+     */
+    updateScale<Key extends keyof T, Fn extends (tokens: T[Key]) => Record<string | number, unknown>>(key: Key, updateFn: Fn): ThemeBuilder<T & Record<Key, T[Key] & ReturnType<Fn>>>;
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+    build(): T & PrivateThemeKeys;
+}
+export declare function createTheme<T extends AbstractTheme>(base: T): ThemeBuilder<T>;

package/dist/utils/flattenScale.d.ts

@@ -1,20 +1,20 @@
-/**
- * Returns an exhaustive list of all possible paths of an object T for keys K.
- * Possibilities are returned as `k1.k2.k3`.
- */
-export declare type FindPath<T, K extends keyof T, D extends string = '.'> = K extends string | number ? T[K] extends Record<string | number, any> ? T[K] extends ArrayLike<any> ? K | `${K}${D}${FindPath<T[K], Exclude<keyof T[K], keyof any[]>, D>}` : K | `${K}${D}${FindPath<T[K], keyof T[K], D>}` : K : never;
-/** Returns valid paths of object T */
-export declare type Path<T, D extends string = '.'> = FindPath<T, keyof T, D> | keyof T;
-/** Returns the value of a valid path P `k1.k2.k3` in object T */
-export declare type PathValue<T, P extends Path<T, D>, D extends string = '.'> = P extends `${infer K}${D}${infer Rest}` ? K extends keyof T ? Rest extends Path<T[K], D> ? PathValue<T[K], Rest, D> : never : never : P extends keyof T ? T[P] : never;
-/** Check if path has a primitive end value and return only the union of end paths */
-export declare type PathToLiteral<T, K extends Path<T, D>, D extends string = '.', Base extends string = ''> = PathValue<T, K, D> extends string | number ? K extends string | number ? K extends `${infer BasePath}${D}${Base}` ? BasePath : K : never : never;
-/**
- * Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
- * { path: { sub: 1 } } => { 'path-sub': 1 }
- *
- */
-export declare type LiteralPaths<T extends Record<string | number, any>, D extends string = '.', Base extends string = ''> = {
-    [K in Path<T, D> as PathToLiteral<T, K, D, Base>]: PathValue<T, PathToLiteral<T, K, D>, D>;
-};
-export declare function flattenScale<T extends Record<string | number, any>, P extends string>(object: T, path?: P): LiteralPaths<T, '-', '_'>;
+/**
+ * Returns an exhaustive list of all possible paths of an object T for keys K.
+ * Possibilities are returned as `k1.k2.k3`.
+ */
+export type FindPath<T, K extends keyof T, D extends string = '.'> = K extends string | number ? T[K] extends Record<string | number, any> ? T[K] extends ArrayLike<any> ? K | `${K}${D}${FindPath<T[K], Exclude<keyof T[K], keyof any[]>, D>}` : K | `${K}${D}${FindPath<T[K], keyof T[K], D>}` : K : never;
+/** Returns valid paths of object T */
+export type Path<T, D extends string = '.'> = FindPath<T, keyof T, D> | keyof T;
+/** Returns the value of a valid path P `k1.k2.k3` in object T */
+export type PathValue<T, P extends Path<T, D>, D extends string = '.'> = P extends `${infer K}${D}${infer Rest}` ? K extends keyof T ? Rest extends Path<T[K], D> ? PathValue<T[K], Rest, D> : never : never : P extends keyof T ? T[P] : never;
+/** Check if path has a primitive end value and return only the union of end paths */
+export type PathToLiteral<T, K extends Path<T, D>, D extends string = '.', Base extends string = ''> = PathValue<T, K, D> extends string | number ? K extends string | number ? K extends `${infer BasePath}${D}${Base}` ? BasePath : K : never : never;
+/**
+ * Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
+ * { path: { sub: 1 } } => { 'path-sub': 1 }
+ *
+ */
+export type LiteralPaths<T extends Record<string | number, any>, D extends string = '.', Base extends string = ''> = {
+    [K in Path<T, D> as PathToLiteral<T, K, D, Base>]: PathValue<T, PathToLiteral<T, K, D>, D>;
+};
+export declare function flattenScale<T extends Record<string | number, unknown>, P extends string>(object: T, path?: P): LiteralPaths<T, '-', '_'>;

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from './createTheme';
-export * from './serializeTokens';
-export * from './flattenScale';
+export * from './createTheme';
+export * from './flattenScale';
+export * from './serializeTokens';

package/dist/utils/serializeTokens.d.ts

@@ -1,18 +1,19 @@
-import { Theme } from '@emotion/react';
-import { CSSObject } from '@animus-ui/core';
-/**
- * Returns an type of any object with { key: 'var(--key) }
- */
-export declare type KeyAsVariable<T extends Record<string, any>, Prefix extends string> = {
-    [V in keyof T]: `var(--${Prefix}-${Extract<V, string>})`;
-};
-declare type SerializedTokensInput = Record<string, string | number | CSSObject | SerializedTokensInputRecursive>;
-interface SerializedTokensInputRecursive {
-    [i: number]: SerializedTokensInput;
-    [i: string]: SerializedTokensInput;
-}
-export declare const serializeTokens: <T extends SerializedTokensInput, Prefix extends string>(tokens: T, prefix: Prefix, theme: Theme | undefined) => {
-    tokens: KeyAsVariable<T, Prefix>;
-    variables: CSSObject;
-};
-export {};
+import { CSSObject } from '@animus-ui/core';
+import { Theme } from '@emotion/react';
+/**
+ * Returns an type of any object with { key: 'var(--key) }
+ */
+export type KeyAsVariable<T extends Record<string, any>, Prefix extends string> = {
+    [V in keyof T]: `var(--${Prefix}-${SanitizeKey<Extract<V, string>>})`;
+};
+export type SanitizeKey<T extends string> = T extends `${'$'}${infer Y}` ? Y : T;
+type SerializedTokensInput = Record<string, string | number | CSSObject | SerializedTokensInputRecursive>;
+interface SerializedTokensInputRecursive {
+    [i: number]: SerializedTokensInput;
+    [i: string]: SerializedTokensInput;
+}
+export declare const serializeTokens: <T extends SerializedTokensInput, Prefix extends string>(tokens: T, prefix: Prefix, theme: Theme | undefined) => {
+    tokens: KeyAsVariable<T, Prefix>;
+    variables: CSSObject;
+};
+export {};

package/dist/utils/types.d.ts

@@ -1,41 +1,41 @@
-import { AbstractTheme, CSSObject } from '@animus-ui/core';
-/**
- * This is a custom generic that ensures the safety of adding additional values to a theme object without accidentally wiping out
- * required keys like `breakpoints`.  It works by creating a new mapped type and merging the values of the union of Base & Next:
- * 1. If the key exists on both Base and Next return the intersection of both values
- * 2. If the key exists on next use the value on next.
- * 3. If the key exists on base but nothing else use the value on base.
- *
- * The resulting type is then rejoined with keys that cannot be mutated (breakpoints) as the next version of Theme
- */
-export declare type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
-/** This merges at 2 levels of depth */
-export declare type Merge<A, B> = {
-    [K in keyof (A & B)]: K extends keyof B ? K extends keyof A ? AssignValueIfUnmergable<A[K], B[K]> : B[K] : K extends keyof A ? A[K] : never;
-};
-/** Extract mergable objects */
-export declare type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
-/** Return B if either A or B is unmergable */
-export declare type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
-/** Prefer all values from B */
-export declare type Assign<A, B> = {
-    [K in keyof A | keyof B]: K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
-};
-/** These are keys that are consistent for all theme builds - they are loosely typed as they are not meant to be accessed directly */
-export declare type PrivateThemeKeys = {
-    _variables: Record<string, CSSObject>;
-    _tokens: Record<string | number, any>;
-};
-/** This allows 3 layers of color aliases to be constructed when adding colorModes
- * @example
- * {
- *   button: {
- *     bg: {
- *       hover: 'someAlias'
- *     }
- *   }
- * }
- *
- * `button-bg-hover`
- * */
-export declare type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;
+import { AbstractTheme, CSSObject } from '@animus-ui/core';
+/**
+ * This is a custom generic that ensures the safety of adding additional values to a theme object without accidentally wiping out
+ * required keys like `breakpoints`.  It works by creating a new mapped type and merging the values of the union of Base & Next:
+ * 1. If the key exists on both Base and Next return the intersection of both values
+ * 2. If the key exists on next use the value on next.
+ * 3. If the key exists on base but nothing else use the value on base.
+ *
+ * The resulting type is then rejoined with keys that cannot be mutated (breakpoints) as the next version of Theme
+ */
+export type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
+/** This merges at 2 levels of depth */
+export type Merge<A, B> = {
+    [K in keyof (A & B)]: K extends keyof B ? K extends keyof A ? AssignValueIfUnmergable<A[K], B[K]> : B[K] : K extends keyof A ? A[K] : never;
+};
+/** Extract mergable objects */
+export type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
+/** Return B if either A or B is unmergable */
+export type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
+/** Prefer all values from B */
+export type Assign<A, B> = {
+    [K in keyof A | keyof B]: K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
+};
+/** These are keys that are consistent for all theme builds - they are loosely typed as they are not meant to be accessed directly */
+export type PrivateThemeKeys = {
+    _variables: Record<string, CSSObject>;
+    _tokens: Record<string | number, any>;
+};
+/** This allows 3 layers of color aliases to be constructed when adding colorModes
+ * @example
+ * {
+ *   button: {
+ *     bg: {
+ *       hover: 'someAlias'
+ *     }
+ *   }
+ * }
+ *
+ * `button-bg-hover`
+ * */
+export type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@animus-ui/theming",
-  "version": "0.1.1-beta.3",
-  "description": "> TODO: description",
+  "version": "0.1.1-beta.30",
+  "description": "Theming Utilities",
   "author": "Aaron Robb <airrobb@gmail.com>",
   "homepage": "https://github.com/codecaaron/animus#readme",
   "license": "MIT",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -18,19 +18,20 @@
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build": "yarn  build:clean && rollup -c",
-    "lernaBuildTask": "yarn build"
+    "lernaBuildTask": "yarn build",
+    "compile": "tsc --noEmit"
   },
   "bugs": {
     "url": "https://github.com/codecaaron/animus/issues"
   },
   "dependencies": {
-    "@animus-ui/core": "^0.1.1-beta.3"
+    "@animus-ui/core": "^0.2.0-beta.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11.0.0",
-    "@emotion/styled": ">=11.0.0",
     "lodash": "*",
     "typescript": ">=4.3.5"
   },
-  "gitHead": "76793243982d4b91436115077c74ac8b4444b471"
+  "gitHead": "fbc53708e472bbc9b68a06d81a97614c504c8025"
 }

package/rollup.config.js

@@ -1,3 +1,3 @@
-import config from '../../rollup.config';
+const config = require('../../rollup.config');
 
-export default config();
+module.exports = config();

package/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    // "emitDeclarationOnly": true,
+    "declaration": true,
+    "rootDir": "./src",
     "outDir": "./dist"
   },
-  "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],
-  "exclude": ["./**/*.test.tsx", "./**/*.test.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
 }

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash");function t(s,r){return Object.keys(s).reduce(((o,h)=>{const i=r?`${r}${"_"===h?"":`-${h}`}`:h,a=s[h];return e.isObject(a)?{...o,...t(a,i)}:{...o,[i]:s[h]}}),{})}const s=(t,s,r)=>{const o={},h={};return Object.keys(t).forEach((i=>{const a=`--${s}-${i}`;o[i]=`var(${a})`,e.merge(h,((t,s,r)=>{if(e.isObject(t)){const{_:e,base:o,...h}=t,i={[s]:e??o};if(r){const{breakpoints:e}=r;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(t[i],a,r))})),{tokens:o,variables:h}};class r{#e={};constructor(e){this.#e=e}createScaleVariables(t){const{variables:r,tokens:o}=s(this.#e[t],t,this.#e);return this.#e=e.merge({},this.#e,{[t]:o,_variables:{root:r},_tokens:{[t]:this.#e[t]}}),this}addColors(r){const o=t(r),{variables:h,tokens:i}=s(o,"color",this.#e);return this.#e=e.merge({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:o}}),this}addColorModes(r,o){const h=e.mapValues(o,(e=>t(e))),{tokens:i,variables:a}=s(e.mapValues(e.merge({},this.#e.modes?.[r],h[r]),(e=>this.#e.colors[e])),"color",this.#e),m=e=>this.#e._tokens?.colors?.[e];return this.#e=e.merge({},this.#e,{colors:i,modes:h,mode:r,_getColorValue:m,_variables:{mode:a},_tokens:{modes:e.mapValues(h,(t=>e.mapValues(t,m)))}}),this}addScale(s,r){return this.#e=e.merge({},this.#e,{[s]:t(r(this.#e))}),this}updateScale(t,s){return this.#e=e.merge({},this.#e,{[t]:s(this.#e[t])}),this}build(){return e.merge({},this.#e,{_variables:{},_tokens:{}})}}exports.ThemeBuilder=r,exports.createTheme=function(e){return new r(e)},exports.flattenScale=t,exports.serializeTokens=s;

package/dist/index.esm.js

@@ -1 +0,0 @@
-import{isObject as e,merge as t,mapValues as s}from"lodash";function o(t,s){return Object.keys(t).reduce(((r,h)=>{const i=s?`${s}${"_"===h?"":`-${h}`}`:h,n=t[h];return e(n)?{...r,...o(n,i)}:{...r,[i]:t[h]}}),{})}const r=(s,o,r)=>{const h={},i={};return Object.keys(s).forEach((n=>{const a=`--${o}-${n}`;h[n]=`var(${a})`,t(i,((t,s,o)=>{if(e(t)){const{_:e,base:r,...h}=t,i={[s]:e??r};if(o){const{breakpoints:e}=o;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(s[n],a,r))})),{tokens:h,variables:i}};class h{#e={};constructor(e){this.#e=e}createScaleVariables(e){const{variables:s,tokens:o}=r(this.#e[e],e,this.#e);return this.#e=t({},this.#e,{[e]:o,_variables:{root:s},_tokens:{[e]:this.#e[e]}}),this}addColors(e){const s=o(e),{variables:h,tokens:i}=r(s,"color",this.#e);return this.#e=t({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:s}}),this}addColorModes(e,h){const i=s(h,(e=>o(e))),{tokens:n,variables:a}=r(s(t({},this.#e.modes?.[e],i[e]),(e=>this.#e.colors[e])),"color",this.#e),c=e=>this.#e._tokens?.colors?.[e];return this.#e=t({},this.#e,{colors:n,modes:i,mode:e,_getColorValue:c,_variables:{mode:a},_tokens:{modes:s(i,(e=>s(e,c)))}}),this}addScale(e,s){return this.#e=t({},this.#e,{[e]:o(s(this.#e))}),this}updateScale(e,s){return this.#e=t({},this.#e,{[e]:s(this.#e[e])}),this}build(){return t({},this.#e,{_variables:{},_tokens:{}})}}function i(e){return new h(e)}export{h as ThemeBuilder,i as createTheme,o as flattenScale,r as serializeTokens};