@animus-ui/theming 0.0.1-fb698e5b.0 → 0.1.0-next.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +136 -0
- package/CLAUDE.md +28 -0
- package/package.json +11 -13
- package/tsconfig.build.json +8 -0
- package/tsconfig.json +3 -3
- package/LICENSE +0 -21
- package/babel.config.js +0 -5
- package/dist/core/ThemeBuilder.d.ts +0 -34
- package/dist/index.cjs.js +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +0 -1
- package/dist/utils/createTheme.d.ts +0 -53
- package/dist/utils/flattenScale.d.ts +0 -20
- package/dist/utils/index.d.ts +0 -3
- package/dist/utils/serializeTokens.d.ts +0 -18
- package/dist/utils/types.d.ts +0 -41
- package/rollup.config.js +0 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
## [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)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
9
|
+
|
|
10
|
+
## 0.1.1-beta.29 (2025-06-15)
|
|
11
|
+
|
|
12
|
+
## 0.1.1-beta.1 (2022-01-09)
|
|
13
|
+
|
|
14
|
+
## 0.1.1-beta.0 (2022-01-09)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
17
|
+
|
|
18
|
+
## [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)
|
|
19
|
+
|
|
20
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
21
|
+
|
|
22
|
+
## [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)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
25
|
+
|
|
26
|
+
## [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)
|
|
27
|
+
|
|
28
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
29
|
+
|
|
30
|
+
## [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)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
33
|
+
|
|
34
|
+
## [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)
|
|
35
|
+
|
|
36
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
37
|
+
|
|
38
|
+
## [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)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
41
|
+
|
|
42
|
+
## [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)
|
|
43
|
+
|
|
44
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
45
|
+
|
|
46
|
+
## [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)
|
|
47
|
+
|
|
48
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
49
|
+
|
|
50
|
+
## [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)
|
|
51
|
+
|
|
52
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
53
|
+
|
|
54
|
+
## [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)
|
|
55
|
+
|
|
56
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
57
|
+
|
|
58
|
+
## [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)
|
|
59
|
+
|
|
60
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
61
|
+
|
|
62
|
+
## [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)
|
|
63
|
+
|
|
64
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
65
|
+
|
|
66
|
+
## [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)
|
|
67
|
+
|
|
68
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
69
|
+
|
|
70
|
+
## [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)
|
|
71
|
+
|
|
72
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
73
|
+
|
|
74
|
+
## [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)
|
|
75
|
+
|
|
76
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
77
|
+
|
|
78
|
+
## [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)
|
|
79
|
+
|
|
80
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
81
|
+
|
|
82
|
+
## [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)
|
|
83
|
+
|
|
84
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
85
|
+
|
|
86
|
+
## [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)
|
|
87
|
+
|
|
88
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
89
|
+
|
|
90
|
+
## [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)
|
|
91
|
+
|
|
92
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
93
|
+
|
|
94
|
+
## [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)
|
|
95
|
+
|
|
96
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
97
|
+
|
|
98
|
+
## [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)
|
|
99
|
+
|
|
100
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
101
|
+
|
|
102
|
+
## [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)
|
|
103
|
+
|
|
104
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
105
|
+
|
|
106
|
+
## [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)
|
|
107
|
+
|
|
108
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
109
|
+
|
|
110
|
+
## [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)
|
|
111
|
+
|
|
112
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
113
|
+
|
|
114
|
+
## [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)
|
|
115
|
+
|
|
116
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
117
|
+
|
|
118
|
+
## [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)
|
|
119
|
+
|
|
120
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
121
|
+
|
|
122
|
+
## 0.1.1-beta.2 (2022-01-09)
|
|
123
|
+
|
|
124
|
+
## 0.1.1-beta.1 (2022-01-09)
|
|
125
|
+
|
|
126
|
+
## 0.1.1-beta.0 (2022-01-09)
|
|
127
|
+
|
|
128
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
129
|
+
|
|
130
|
+
## [0.1.1-beta.1](https://github.com/codecaaron/animus/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2022-01-09)
|
|
131
|
+
|
|
132
|
+
**Note:** Version bump only for package @animus-ui/theming
|
|
133
|
+
|
|
134
|
+
## 0.1.1-beta.0 (2022-01-09)
|
|
135
|
+
|
|
136
|
+
**Note:** Version bump only for package @animus-ui/theming
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# Animus Theming Package
|
|
2
|
+
|
|
3
|
+
## Key Files
|
|
4
|
+
|
|
5
|
+
- `src/utils/createTheme.ts` — ThemeBuilder fluent API
|
|
6
|
+
- `src/utils/serializeTokens.ts` — Token→CSS variable generation
|
|
7
|
+
- `src/utils/flattenScale.ts` — Nested object flattening with `-` separator
|
|
8
|
+
|
|
9
|
+
## Theme Flow
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
createTheme(base)
|
|
13
|
+
.addColors({...}) → flat colors + CSS vars
|
|
14
|
+
.addColorModes('dark', {}) → semantic aliases per mode
|
|
15
|
+
.addScale('shadows', fn) → custom scales (can reference colors)
|
|
16
|
+
.createScaleVariables(key) → convert scale to CSS vars
|
|
17
|
+
.build() → final theme object
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Theme Object Structure
|
|
21
|
+
|
|
22
|
+
- **Public scales** (`theme.colors.primary`): CSS var references (`var(--color-primary)`)
|
|
23
|
+
- **Private variables** (`theme._variables`): CSS var definitions for DOM injection
|
|
24
|
+
- **Private tokens** (`theme._tokens`): Original values
|
|
25
|
+
|
|
26
|
+
## Integration with Core
|
|
27
|
+
|
|
28
|
+
Props reference scales by name: `bg: { property: 'backgroundColor', scale: 'colors' }`. At runtime, `lookupScaleValue('primary', 'colors', theme)` resolves to `var(--color-primary)`.
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@animus-ui/theming",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.0-next.8",
|
|
4
|
+
"description": "Theming Utilities",
|
|
5
5
|
"author": "Aaron Robb <airrobb@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/codecaaron/animus#readme",
|
|
7
7
|
"license": "MIT",
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"types": "dist/index.d.ts",
|
|
8
|
+
"module": "./dist/index.mjs",
|
|
9
|
+
"main": "./dist/index.mjs",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
11
|
"publishConfig": {
|
|
12
12
|
"access": "public"
|
|
13
13
|
},
|
|
@@ -16,21 +16,19 @@
|
|
|
16
16
|
"url": "git+https://github.com/codecaaron/animus.git"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build
|
|
20
|
-
"
|
|
21
|
-
"lernaBuildTask": "yarn build"
|
|
19
|
+
"build": "tsdown && tsc -p tsconfig.build.json",
|
|
20
|
+
"compile": "tsc --noEmit"
|
|
22
21
|
},
|
|
23
22
|
"bugs": {
|
|
24
23
|
"url": "https://github.com/codecaaron/animus/issues"
|
|
25
24
|
},
|
|
26
25
|
"dependencies": {
|
|
27
|
-
"@animus-ui/core": "^0.0
|
|
26
|
+
"@animus-ui/core": "^0.2.0-beta.2",
|
|
27
|
+
"@emotion/react": "^11.14.0",
|
|
28
|
+
"@emotion/styled": "^11.14.0"
|
|
28
29
|
},
|
|
29
30
|
"peerDependencies": {
|
|
30
|
-
"@emotion/react": ">=11.0.0",
|
|
31
|
-
"@emotion/styled": ">=11.0.0",
|
|
32
31
|
"lodash": "*",
|
|
33
32
|
"typescript": ">=4.3.5"
|
|
34
|
-
}
|
|
35
|
-
"gitHead": "fb698e5b65cdb6e4af5e85e62fadc9ae1a3bf7bf"
|
|
33
|
+
}
|
|
36
34
|
}
|
package/tsconfig.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "../../tsconfig.json",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
-
|
|
4
|
+
"rootDir": "./src",
|
|
5
5
|
"outDir": "./dist"
|
|
6
6
|
},
|
|
7
|
-
"include": ["
|
|
8
|
-
"exclude": ["
|
|
7
|
+
"include": ["src/**/*.ts", "src/**/*.tsx"],
|
|
8
|
+
"exclude": ["**/*.test.ts", "**/*.test.tsx"]
|
|
9
9
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2021 Aaron Robb
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/babel.config.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { Breakpoints } from '@animus-ui/core';
|
|
2
|
-
/**
|
|
3
|
-
* 1. Breakpoints
|
|
4
|
-
* 2. Scales
|
|
5
|
-
* 3. Tokens
|
|
6
|
-
* 4. Variables
|
|
7
|
-
* 5. Colors
|
|
8
|
-
* 6. Color Modes
|
|
9
|
-
*/
|
|
10
|
-
export declare class ThemeWithAll<Bps, Scales, Tokens, Vars> {
|
|
11
|
-
breakpoints: Bps;
|
|
12
|
-
scales: Scales;
|
|
13
|
-
tokens: Tokens;
|
|
14
|
-
variables: Vars;
|
|
15
|
-
constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
|
|
16
|
-
addScale(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
|
|
17
|
-
build(): {
|
|
18
|
-
breakpoints: Bps;
|
|
19
|
-
} & Scales & {
|
|
20
|
-
_tokens: Tokens;
|
|
21
|
-
_variables: Vars;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
export declare class ThemeWithRawColors<Bps extends Breakpoints, Scales, Tokens, Vars> extends ThemeWithAll<Bps, Scales, Tokens, Vars> {
|
|
25
|
-
constructor(breakpoints: Bps, scales: Scales, tokens: Tokens, vars: Vars);
|
|
26
|
-
addColorModes(): ThemeWithAll<Bps, Scales, Tokens, Vars>;
|
|
27
|
-
}
|
|
28
|
-
export declare class ThemeWithBreakpoints<Bps extends Breakpoints> extends ThemeWithAll<Bps, {}, {}, {}> {
|
|
29
|
-
constructor(breakpoints: Bps);
|
|
30
|
-
addColors(): ThemeWithRawColors<Bps, {}, {}, {}>;
|
|
31
|
-
}
|
|
32
|
-
export declare class ThemeUnitialized {
|
|
33
|
-
addBreakpoints<Bps extends Breakpoints>(breakpoints: Bps): ThemeWithBreakpoints<Bps>;
|
|
34
|
-
}
|
package/dist/index.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"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.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './utils';
|
package/dist/index.esm.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
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};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { CSSObject, AbstractTheme } from '@animus-ui/core';
|
|
2
|
-
import { LiteralPaths } from './flattenScale';
|
|
3
|
-
import { KeyAsVariable } from './serializeTokens';
|
|
4
|
-
import { ColorModeConfig, Merge, MergeTheme, PrivateThemeKeys } from './types';
|
|
5
|
-
export declare class ThemeBuilder<T extends AbstractTheme> {
|
|
6
|
-
#private;
|
|
7
|
-
constructor(baseTheme: T);
|
|
8
|
-
/**
|
|
9
|
-
*
|
|
10
|
-
* @param key A key of the current theme to transform into CSS Variables and Variable References
|
|
11
|
-
* @example .createScaleVariables('fontSize')
|
|
12
|
-
*/
|
|
13
|
-
createScaleVariables<Key extends keyof Omit<T, 'breakpoints'> & string>(key: Key): ThemeBuilder<MergeTheme<T, PrivateThemeKeys, Record<Key, Record<Key, KeyAsVariable<T[Key], Key>>>>>;
|
|
14
|
-
/**
|
|
15
|
-
*
|
|
16
|
-
* @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
|
|
17
|
-
* @example .addColors({ navy: 'navy', hyper: 'purple' })
|
|
18
|
-
*/
|
|
19
|
-
addColors<Colors extends Record<string, string | number | CSSObject>, NextColors extends LiteralPaths<Colors, '-'>>(colors: Colors): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, Record<'colors', KeyAsVariable<NextColors, 'color'>>>>;
|
|
20
|
-
/**
|
|
21
|
-
*
|
|
22
|
-
* @param initialMode A key of the object passed for modes. This sets the default state for the theme and transforms the correct variables.
|
|
23
|
-
* @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`
|
|
24
|
-
* @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
|
|
25
|
-
*/
|
|
26
|
-
addColorModes<Modes extends string, InitialMode extends keyof Config, Colors extends keyof T['colors'], ModeColors extends ColorModeConfig<Colors>, Config extends Record<Modes, ModeColors>, ColorAliases extends {
|
|
27
|
-
[K in keyof Config]: LiteralPaths<Config[K], '-', '_'>;
|
|
28
|
-
}>(initialMode: InitialMode, modeConfig: Config): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, {
|
|
29
|
-
colors: KeyAsVariable<LiteralPaths<Config[keyof Config], '-', '_'>, 'colors'> & T['colors'];
|
|
30
|
-
modes: Merge<T['modes'], ColorAliases>;
|
|
31
|
-
mode: keyof Config;
|
|
32
|
-
_getColorValue: (color: keyof T['colors']) => string;
|
|
33
|
-
}>>;
|
|
34
|
-
/**
|
|
35
|
-
*
|
|
36
|
-
* @param key A new key of theme
|
|
37
|
-
* @param createScale A function that accepts the current theme and returns a new object of scale values.
|
|
38
|
-
* @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
|
|
39
|
-
*/
|
|
40
|
-
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>>>;
|
|
41
|
-
/**
|
|
42
|
-
*
|
|
43
|
-
* @param key A current key of theme to be updated with new or computed values
|
|
44
|
-
* @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.
|
|
45
|
-
* @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
|
|
46
|
-
*/
|
|
47
|
-
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>>>;
|
|
48
|
-
/**
|
|
49
|
-
* This finalizes the theme build and returns the final theme and variables to be provided.
|
|
50
|
-
*/
|
|
51
|
-
build(): T & PrivateThemeKeys;
|
|
52
|
-
}
|
|
53
|
-
export declare function createTheme<T extends AbstractTheme>(base: T): ThemeBuilder<T>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns an exhaustive list of all possible paths of an object T for keys K.
|
|
3
|
-
* Possibilities are returned as `k1.k2.k3`.
|
|
4
|
-
*/
|
|
5
|
-
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;
|
|
6
|
-
/** Returns valid paths of object T */
|
|
7
|
-
export declare type Path<T, D extends string = '.'> = FindPath<T, keyof T, D> | keyof T;
|
|
8
|
-
/** Returns the value of a valid path P `k1.k2.k3` in object T */
|
|
9
|
-
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;
|
|
10
|
-
/** Check if path has a primitive end value and return only the union of end paths */
|
|
11
|
-
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;
|
|
12
|
-
/**
|
|
13
|
-
* Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
|
|
14
|
-
* { path: { sub: 1 } } => { 'path-sub': 1 }
|
|
15
|
-
*
|
|
16
|
-
*/
|
|
17
|
-
export declare type LiteralPaths<T extends Record<string | number, any>, D extends string = '.', Base extends string = ''> = {
|
|
18
|
-
[K in Path<T, D> as PathToLiteral<T, K, D, Base>]: PathValue<T, PathToLiteral<T, K, D>, D>;
|
|
19
|
-
};
|
|
20
|
-
export declare function flattenScale<T extends Record<string | number, any>, P extends string>(object: T, path?: P): LiteralPaths<T, '-', '_'>;
|
package/dist/utils/index.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Theme } from '@emotion/react';
|
|
2
|
-
import { CSSObject } from '@animus-ui/core';
|
|
3
|
-
/**
|
|
4
|
-
* Returns an type of any object with { key: 'var(--key) }
|
|
5
|
-
*/
|
|
6
|
-
export declare type KeyAsVariable<T extends Record<string, any>, Prefix extends string> = {
|
|
7
|
-
[V in keyof T]: `var(--${Prefix}-${Extract<V, string>})`;
|
|
8
|
-
};
|
|
9
|
-
declare type SerializedTokensInput = Record<string, string | number | CSSObject | SerializedTokensInputRecursive>;
|
|
10
|
-
interface SerializedTokensInputRecursive {
|
|
11
|
-
[i: number]: SerializedTokensInput;
|
|
12
|
-
[i: string]: SerializedTokensInput;
|
|
13
|
-
}
|
|
14
|
-
export declare const serializeTokens: <T extends SerializedTokensInput, Prefix extends string>(tokens: T, prefix: Prefix, theme: Theme | undefined) => {
|
|
15
|
-
tokens: KeyAsVariable<T, Prefix>;
|
|
16
|
-
variables: CSSObject;
|
|
17
|
-
};
|
|
18
|
-
export {};
|
package/dist/utils/types.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { AbstractTheme, CSSObject } from '@animus-ui/core';
|
|
2
|
-
/**
|
|
3
|
-
* This is a custom generic that ensures the safety of adding additional values to a theme object without accidentally wiping out
|
|
4
|
-
* required keys like `breakpoints`. It works by creating a new mapped type and merging the values of the union of Base & Next:
|
|
5
|
-
* 1. If the key exists on both Base and Next return the intersection of both values
|
|
6
|
-
* 2. If the key exists on next use the value on next.
|
|
7
|
-
* 3. If the key exists on base but nothing else use the value on base.
|
|
8
|
-
*
|
|
9
|
-
* The resulting type is then rejoined with keys that cannot be mutated (breakpoints) as the next version of Theme
|
|
10
|
-
*/
|
|
11
|
-
export declare type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
|
|
12
|
-
/** This merges at 2 levels of depth */
|
|
13
|
-
export declare type Merge<A, B> = {
|
|
14
|
-
[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;
|
|
15
|
-
};
|
|
16
|
-
/** Extract mergable objects */
|
|
17
|
-
export declare type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
|
|
18
|
-
/** Return B if either A or B is unmergable */
|
|
19
|
-
export declare type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
|
|
20
|
-
/** Prefer all values from B */
|
|
21
|
-
export declare type Assign<A, B> = {
|
|
22
|
-
[K in keyof A | keyof B]: K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
|
|
23
|
-
};
|
|
24
|
-
/** These are keys that are consistent for all theme builds - they are loosely typed as they are not meant to be accessed directly */
|
|
25
|
-
export declare type PrivateThemeKeys = {
|
|
26
|
-
_variables: Record<string, CSSObject>;
|
|
27
|
-
_tokens: Record<string | number, any>;
|
|
28
|
-
};
|
|
29
|
-
/** This allows 3 layers of color aliases to be constructed when adding colorModes
|
|
30
|
-
* @example
|
|
31
|
-
* {
|
|
32
|
-
* button: {
|
|
33
|
-
* bg: {
|
|
34
|
-
* hover: 'someAlias'
|
|
35
|
-
* }
|
|
36
|
-
* }
|
|
37
|
-
* }
|
|
38
|
-
*
|
|
39
|
-
* `button-bg-hover`
|
|
40
|
-
* */
|
|
41
|
-
export declare type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;
|
package/rollup.config.js
DELETED