@udixio/theme 1.0.0-beta.2 → 1.0.0-beta.20
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/dist/app.container.d.ts +5 -0
- package/dist/app.module.d.ts +2 -2
- package/dist/app.service.d.ts +9 -3
- package/dist/color/color.interface.d.ts +1 -2
- package/dist/color/color.module.d.ts +2 -2
- package/dist/color/entities/color.entity.d.ts +6 -1
- package/dist/color/entities/index.d.ts +1 -0
- package/dist/color/index.d.ts +5 -0
- package/dist/color/models/default-color.model.d.ts +2 -3
- package/dist/color/models/index.d.ts +1 -0
- package/dist/color/services/color-manager.service.d.ts +18 -0
- package/dist/color/services/color.service.d.ts +21 -0
- package/dist/color/services/index.d.ts +2 -0
- package/dist/config/config.interface.d.ts +13 -0
- package/dist/config/config.module.d.ts +2 -0
- package/dist/config/config.service.d.ts +12 -0
- package/dist/config/index.d.ts +3 -0
- package/dist/index.d.ts +11 -0
- package/dist/main.d.ts +2 -1
- package/dist/material-color-utilities/index.d.ts +1 -0
- package/dist/plugin/index.d.ts +3 -0
- package/dist/plugin/plugin.abstract.d.ts +7 -0
- package/dist/plugin/plugin.module.d.ts +2 -0
- package/dist/plugin/plugin.service.d.ts +12 -0
- package/dist/plugins/font/font.plugin.d.ts +38 -0
- package/dist/plugins/font/index.d.ts +1 -0
- package/dist/plugins/tailwind/index.d.ts +3 -0
- package/dist/plugins/tailwind/main.d.ts +13 -0
- package/dist/plugins/tailwind/plugins-tailwind/font.d.ts +5 -0
- package/dist/plugins/tailwind/plugins-tailwind/index.d.ts +2 -0
- package/dist/plugins/tailwind/plugins-tailwind/state.d.ts +4 -0
- package/dist/plugins/tailwind/plugins-tailwind/themer.d.ts +4 -0
- package/dist/plugins/tailwind/tailwind.plugin.d.ts +17 -0
- package/dist/theme/entities/index.d.ts +2 -0
- package/dist/theme/entities/variant.entity.d.ts +2 -1
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/models/index.d.ts +1 -0
- package/dist/theme/services/index.d.ts +3 -0
- package/dist/theme/services/scheme.service.d.ts +7 -2
- package/dist/theme/services/theme.service.d.ts +16 -7
- package/dist/theme/services/variant.service.d.ts +8 -2
- package/dist/theme/theme.module.d.ts +2 -2
- package/dist/theme.cjs.development.js +1316 -579
- package/dist/theme.cjs.development.js.map +1 -1
- package/dist/theme.cjs.production.min.js +1 -1
- package/dist/theme.cjs.production.min.js.map +1 -1
- package/dist/theme.esm.js +1284 -580
- package/dist/theme.esm.js.map +1 -1
- package/package.json +21 -22
- package/src/app.container.ts +46 -0
- package/src/app.module.ts +5 -8
- package/src/app.service.spec.ts +1 -1
- package/src/app.service.ts +20 -8
- package/src/color/color.interface.ts +1 -3
- package/src/color/color.module.ts +8 -10
- package/src/color/entities/color.entity.ts +14 -3
- package/src/color/entities/index.ts +1 -0
- package/src/color/index.ts +5 -0
- package/src/color/models/default-color.model.ts +205 -202
- package/src/color/models/index.ts +1 -0
- package/src/color/{color-manager.service.ts → services/color-manager.service.ts} +22 -17
- package/src/color/{color.service.spec.ts → services/color.service.spec.ts} +1 -1
- package/src/color/services/color.service.ts +75 -0
- package/src/color/services/index.ts +2 -0
- package/src/config/config.interface.ts +14 -0
- package/src/config/config.module.ts +7 -0
- package/src/config/config.service.ts +95 -0
- package/src/config/index.ts +3 -0
- package/src/index.ts +11 -0
- package/src/main.ts +10 -7
- package/src/material-color-utilities/index.ts +1 -0
- package/src/plugin/index.ts +3 -0
- package/src/plugin/plugin.abstract.ts +9 -0
- package/src/plugin/plugin.module.ts +7 -0
- package/src/plugin/plugin.service.ts +48 -0
- package/src/plugins/font/font.plugin.ts +172 -0
- package/src/plugins/font/index.ts +1 -0
- package/src/plugins/tailwind/index.ts +3 -0
- package/src/plugins/tailwind/main.ts +19 -0
- package/src/plugins/tailwind/plugins-tailwind/font.ts +69 -0
- package/src/plugins/tailwind/plugins-tailwind/index.ts +2 -0
- package/src/plugins/tailwind/plugins-tailwind/state.ts +88 -0
- package/src/plugins/tailwind/plugins-tailwind/themer.ts +53 -0
- package/src/plugins/tailwind/tailwind.plugin.ts +64 -0
- package/src/theme/entities/index.ts +2 -0
- package/src/theme/entities/variant.entity.ts +2 -1
- package/src/theme/index.ts +4 -0
- package/src/theme/models/index.ts +1 -0
- package/src/theme/models/variant.model.ts +7 -0
- package/src/theme/services/index.ts +3 -0
- package/src/theme/services/scheme.service.ts +39 -11
- package/src/theme/services/theme.service.ts +30 -14
- package/src/theme/services/variant.service.ts +40 -5
- package/src/theme/theme.module.ts +8 -9
- package/dist/color/color-manager.service.d.ts +0 -15
- package/dist/color/color.service.d.ts +0 -13
- package/src/color/color.service.ts +0 -52
package/dist/theme.esm.js
CHANGED
|
@@ -1,33 +1,68 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
1
|
+
import { asClass, createContainer, InjectionMode } from 'awilix';
|
|
2
|
+
import { lerp, Contrast, clampDouble, hexFromArgb, Hct, argbFromHex, TonalPalette, DislikeAnalyzer, sanitizeDegreesDouble } from '@material/material-color-utilities';
|
|
3
|
+
import { resolve } from 'path';
|
|
4
|
+
import { existsSync } from 'node:fs';
|
|
5
|
+
import plugin from 'tailwindcss/plugin';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return void e(n);
|
|
7
|
+
var ColorService = /*#__PURE__*/function () {
|
|
8
|
+
function ColorService(_ref) {
|
|
9
|
+
var colorManagerService = _ref.colorManagerService;
|
|
10
|
+
this.colorManagerService = void 0;
|
|
11
|
+
this.colorManagerService = colorManagerService;
|
|
13
12
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
var _proto = ColorService.prototype;
|
|
14
|
+
_proto.getColors = function getColors() {
|
|
15
|
+
return this.colorManagerService.getAll();
|
|
16
|
+
}
|
|
17
|
+
// getColors() {
|
|
18
|
+
// const colors: Record<string, string> = {};
|
|
19
|
+
//
|
|
20
|
+
// for (const [key, value] of this.colorManagerService.getAll()) {
|
|
21
|
+
// colors[key] = hexFromArgb(value.getArgb(this.schemeService.get()));
|
|
22
|
+
// }
|
|
23
|
+
//
|
|
24
|
+
// return colors;
|
|
25
|
+
// }
|
|
26
|
+
;
|
|
27
|
+
_proto.addColor = function addColor(key, color) {
|
|
28
|
+
return this.colorManagerService.createOrUpdate(key, color);
|
|
29
|
+
};
|
|
30
|
+
_proto.addColors = function addColors(args) {
|
|
31
|
+
var _this = this;
|
|
32
|
+
if (!Array.isArray(args)) args = [args];
|
|
33
|
+
args.forEach(function (args) {
|
|
34
|
+
if (typeof args === 'function') {
|
|
35
|
+
args = args(_this);
|
|
36
|
+
}
|
|
37
|
+
if (args.fromPalettes) {
|
|
38
|
+
if (!Array.isArray(args.fromPalettes)) args.fromPalettes = [args.fromPalettes];
|
|
39
|
+
args.fromPalettes.map(function (paletteKey) {
|
|
40
|
+
_this.colorManagerService.addFromPalette(paletteKey);
|
|
41
|
+
});
|
|
24
42
|
}
|
|
25
|
-
|
|
26
|
-
|
|
43
|
+
if (args.colors) {
|
|
44
|
+
Object.keys(args.colors).map(function (key) {
|
|
45
|
+
return _this.addColor(key, args.colors[key]);
|
|
46
|
+
});
|
|
27
47
|
}
|
|
28
|
-
_next(void 0);
|
|
29
48
|
});
|
|
30
49
|
};
|
|
50
|
+
_proto.getColor = function getColor(key) {
|
|
51
|
+
return this.colorManagerService.get(key);
|
|
52
|
+
};
|
|
53
|
+
_proto.removeColor = function removeColor(key) {
|
|
54
|
+
return this.colorManagerService.remove(key);
|
|
55
|
+
};
|
|
56
|
+
_proto.updateColor = function updateColor(key, newColor) {
|
|
57
|
+
return this.colorManagerService.createOrUpdate(key, newColor);
|
|
58
|
+
};
|
|
59
|
+
return ColorService;
|
|
60
|
+
}();
|
|
61
|
+
|
|
62
|
+
function _arrayLikeToArray(r, a) {
|
|
63
|
+
(null == a || a > r.length) && (a = r.length);
|
|
64
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
65
|
+
return n;
|
|
31
66
|
}
|
|
32
67
|
function _defineProperties(e, r) {
|
|
33
68
|
for (var t = 0; t < r.length; t++) {
|
|
@@ -40,6 +75,23 @@ function _createClass(e, r, t) {
|
|
|
40
75
|
writable: !1
|
|
41
76
|
}), e;
|
|
42
77
|
}
|
|
78
|
+
function _createForOfIteratorHelperLoose(r, e) {
|
|
79
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
80
|
+
if (t) return (t = t.call(r)).next.bind(t);
|
|
81
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
|
|
82
|
+
t && (r = t);
|
|
83
|
+
var o = 0;
|
|
84
|
+
return function () {
|
|
85
|
+
return o >= r.length ? {
|
|
86
|
+
done: !0
|
|
87
|
+
} : {
|
|
88
|
+
done: !1,
|
|
89
|
+
value: r[o++]
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
94
|
+
}
|
|
43
95
|
function _extends() {
|
|
44
96
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
45
97
|
for (var e = 1; e < arguments.length; e++) {
|
|
@@ -49,306 +101,13 @@ function _extends() {
|
|
|
49
101
|
return n;
|
|
50
102
|
}, _extends.apply(null, arguments);
|
|
51
103
|
}
|
|
52
|
-
function
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
n = r.hasOwnProperty,
|
|
60
|
-
o = Object.defineProperty || function (t, e, r) {
|
|
61
|
-
t[e] = r.value;
|
|
62
|
-
},
|
|
63
|
-
i = "function" == typeof Symbol ? Symbol : {},
|
|
64
|
-
a = i.iterator || "@@iterator",
|
|
65
|
-
c = i.asyncIterator || "@@asyncIterator",
|
|
66
|
-
u = i.toStringTag || "@@toStringTag";
|
|
67
|
-
function define(t, e, r) {
|
|
68
|
-
return Object.defineProperty(t, e, {
|
|
69
|
-
value: r,
|
|
70
|
-
enumerable: !0,
|
|
71
|
-
configurable: !0,
|
|
72
|
-
writable: !0
|
|
73
|
-
}), t[e];
|
|
74
|
-
}
|
|
75
|
-
try {
|
|
76
|
-
define({}, "");
|
|
77
|
-
} catch (t) {
|
|
78
|
-
define = function (t, e, r) {
|
|
79
|
-
return t[e] = r;
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
function wrap(t, e, r, n) {
|
|
83
|
-
var i = e && e.prototype instanceof Generator ? e : Generator,
|
|
84
|
-
a = Object.create(i.prototype),
|
|
85
|
-
c = new Context(n || []);
|
|
86
|
-
return o(a, "_invoke", {
|
|
87
|
-
value: makeInvokeMethod(t, r, c)
|
|
88
|
-
}), a;
|
|
89
|
-
}
|
|
90
|
-
function tryCatch(t, e, r) {
|
|
91
|
-
try {
|
|
92
|
-
return {
|
|
93
|
-
type: "normal",
|
|
94
|
-
arg: t.call(e, r)
|
|
95
|
-
};
|
|
96
|
-
} catch (t) {
|
|
97
|
-
return {
|
|
98
|
-
type: "throw",
|
|
99
|
-
arg: t
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
e.wrap = wrap;
|
|
104
|
-
var h = "suspendedStart",
|
|
105
|
-
l = "suspendedYield",
|
|
106
|
-
f = "executing",
|
|
107
|
-
s = "completed",
|
|
108
|
-
y = {};
|
|
109
|
-
function Generator() {}
|
|
110
|
-
function GeneratorFunction() {}
|
|
111
|
-
function GeneratorFunctionPrototype() {}
|
|
112
|
-
var p = {};
|
|
113
|
-
define(p, a, function () {
|
|
114
|
-
return this;
|
|
115
|
-
});
|
|
116
|
-
var d = Object.getPrototypeOf,
|
|
117
|
-
v = d && d(d(values([])));
|
|
118
|
-
v && v !== r && n.call(v, a) && (p = v);
|
|
119
|
-
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
|
|
120
|
-
function defineIteratorMethods(t) {
|
|
121
|
-
["next", "throw", "return"].forEach(function (e) {
|
|
122
|
-
define(t, e, function (t) {
|
|
123
|
-
return this._invoke(e, t);
|
|
124
|
-
});
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
function AsyncIterator(t, e) {
|
|
128
|
-
function invoke(r, o, i, a) {
|
|
129
|
-
var c = tryCatch(t[r], t, o);
|
|
130
|
-
if ("throw" !== c.type) {
|
|
131
|
-
var u = c.arg,
|
|
132
|
-
h = u.value;
|
|
133
|
-
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
|
|
134
|
-
invoke("next", t, i, a);
|
|
135
|
-
}, function (t) {
|
|
136
|
-
invoke("throw", t, i, a);
|
|
137
|
-
}) : e.resolve(h).then(function (t) {
|
|
138
|
-
u.value = t, i(u);
|
|
139
|
-
}, function (t) {
|
|
140
|
-
return invoke("throw", t, i, a);
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
a(c.arg);
|
|
144
|
-
}
|
|
145
|
-
var r;
|
|
146
|
-
o(this, "_invoke", {
|
|
147
|
-
value: function (t, n) {
|
|
148
|
-
function callInvokeWithMethodAndArg() {
|
|
149
|
-
return new e(function (e, r) {
|
|
150
|
-
invoke(t, n, e, r);
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
function makeInvokeMethod(e, r, n) {
|
|
158
|
-
var o = h;
|
|
159
|
-
return function (i, a) {
|
|
160
|
-
if (o === f) throw Error("Generator is already running");
|
|
161
|
-
if (o === s) {
|
|
162
|
-
if ("throw" === i) throw a;
|
|
163
|
-
return {
|
|
164
|
-
value: t,
|
|
165
|
-
done: !0
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
for (n.method = i, n.arg = a;;) {
|
|
169
|
-
var c = n.delegate;
|
|
170
|
-
if (c) {
|
|
171
|
-
var u = maybeInvokeDelegate(c, n);
|
|
172
|
-
if (u) {
|
|
173
|
-
if (u === y) continue;
|
|
174
|
-
return u;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
|
|
178
|
-
if (o === h) throw o = s, n.arg;
|
|
179
|
-
n.dispatchException(n.arg);
|
|
180
|
-
} else "return" === n.method && n.abrupt("return", n.arg);
|
|
181
|
-
o = f;
|
|
182
|
-
var p = tryCatch(e, r, n);
|
|
183
|
-
if ("normal" === p.type) {
|
|
184
|
-
if (o = n.done ? s : l, p.arg === y) continue;
|
|
185
|
-
return {
|
|
186
|
-
value: p.arg,
|
|
187
|
-
done: n.done
|
|
188
|
-
};
|
|
189
|
-
}
|
|
190
|
-
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
|
|
191
|
-
}
|
|
192
|
-
};
|
|
193
|
-
}
|
|
194
|
-
function maybeInvokeDelegate(e, r) {
|
|
195
|
-
var n = r.method,
|
|
196
|
-
o = e.iterator[n];
|
|
197
|
-
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
|
|
198
|
-
var i = tryCatch(o, e.iterator, r.arg);
|
|
199
|
-
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
|
|
200
|
-
var a = i.arg;
|
|
201
|
-
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
|
|
202
|
-
}
|
|
203
|
-
function pushTryEntry(t) {
|
|
204
|
-
var e = {
|
|
205
|
-
tryLoc: t[0]
|
|
206
|
-
};
|
|
207
|
-
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
|
|
208
|
-
}
|
|
209
|
-
function resetTryEntry(t) {
|
|
210
|
-
var e = t.completion || {};
|
|
211
|
-
e.type = "normal", delete e.arg, t.completion = e;
|
|
212
|
-
}
|
|
213
|
-
function Context(t) {
|
|
214
|
-
this.tryEntries = [{
|
|
215
|
-
tryLoc: "root"
|
|
216
|
-
}], t.forEach(pushTryEntry, this), this.reset(!0);
|
|
217
|
-
}
|
|
218
|
-
function values(e) {
|
|
219
|
-
if (e || "" === e) {
|
|
220
|
-
var r = e[a];
|
|
221
|
-
if (r) return r.call(e);
|
|
222
|
-
if ("function" == typeof e.next) return e;
|
|
223
|
-
if (!isNaN(e.length)) {
|
|
224
|
-
var o = -1,
|
|
225
|
-
i = function next() {
|
|
226
|
-
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
|
|
227
|
-
return next.value = t, next.done = !0, next;
|
|
228
|
-
};
|
|
229
|
-
return i.next = i;
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
throw new TypeError(typeof e + " is not iterable");
|
|
233
|
-
}
|
|
234
|
-
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
|
|
235
|
-
value: GeneratorFunctionPrototype,
|
|
236
|
-
configurable: !0
|
|
237
|
-
}), o(GeneratorFunctionPrototype, "constructor", {
|
|
238
|
-
value: GeneratorFunction,
|
|
239
|
-
configurable: !0
|
|
240
|
-
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
|
|
241
|
-
var e = "function" == typeof t && t.constructor;
|
|
242
|
-
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
|
|
243
|
-
}, e.mark = function (t) {
|
|
244
|
-
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
|
|
245
|
-
}, e.awrap = function (t) {
|
|
246
|
-
return {
|
|
247
|
-
__await: t
|
|
248
|
-
};
|
|
249
|
-
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
|
|
250
|
-
return this;
|
|
251
|
-
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
|
|
252
|
-
void 0 === i && (i = Promise);
|
|
253
|
-
var a = new AsyncIterator(wrap(t, r, n, o), i);
|
|
254
|
-
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
|
|
255
|
-
return t.done ? t.value : a.next();
|
|
256
|
-
});
|
|
257
|
-
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
|
|
258
|
-
return this;
|
|
259
|
-
}), define(g, "toString", function () {
|
|
260
|
-
return "[object Generator]";
|
|
261
|
-
}), e.keys = function (t) {
|
|
262
|
-
var e = Object(t),
|
|
263
|
-
r = [];
|
|
264
|
-
for (var n in e) r.push(n);
|
|
265
|
-
return r.reverse(), function next() {
|
|
266
|
-
for (; r.length;) {
|
|
267
|
-
var t = r.pop();
|
|
268
|
-
if (t in e) return next.value = t, next.done = !1, next;
|
|
269
|
-
}
|
|
270
|
-
return next.done = !0, next;
|
|
271
|
-
};
|
|
272
|
-
}, e.values = values, Context.prototype = {
|
|
273
|
-
constructor: Context,
|
|
274
|
-
reset: function (e) {
|
|
275
|
-
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
|
|
276
|
-
},
|
|
277
|
-
stop: function () {
|
|
278
|
-
this.done = !0;
|
|
279
|
-
var t = this.tryEntries[0].completion;
|
|
280
|
-
if ("throw" === t.type) throw t.arg;
|
|
281
|
-
return this.rval;
|
|
282
|
-
},
|
|
283
|
-
dispatchException: function (e) {
|
|
284
|
-
if (this.done) throw e;
|
|
285
|
-
var r = this;
|
|
286
|
-
function handle(n, o) {
|
|
287
|
-
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
|
|
288
|
-
}
|
|
289
|
-
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
|
|
290
|
-
var i = this.tryEntries[o],
|
|
291
|
-
a = i.completion;
|
|
292
|
-
if ("root" === i.tryLoc) return handle("end");
|
|
293
|
-
if (i.tryLoc <= this.prev) {
|
|
294
|
-
var c = n.call(i, "catchLoc"),
|
|
295
|
-
u = n.call(i, "finallyLoc");
|
|
296
|
-
if (c && u) {
|
|
297
|
-
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
|
298
|
-
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
|
299
|
-
} else if (c) {
|
|
300
|
-
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
|
|
301
|
-
} else {
|
|
302
|
-
if (!u) throw Error("try statement without catch or finally");
|
|
303
|
-
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
},
|
|
308
|
-
abrupt: function (t, e) {
|
|
309
|
-
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
|
|
310
|
-
var o = this.tryEntries[r];
|
|
311
|
-
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
|
|
312
|
-
var i = o;
|
|
313
|
-
break;
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
|
|
317
|
-
var a = i ? i.completion : {};
|
|
318
|
-
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
|
|
319
|
-
},
|
|
320
|
-
complete: function (t, e) {
|
|
321
|
-
if ("throw" === t.type) throw t.arg;
|
|
322
|
-
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
|
|
323
|
-
},
|
|
324
|
-
finish: function (t) {
|
|
325
|
-
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
|
326
|
-
var r = this.tryEntries[e];
|
|
327
|
-
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
|
|
328
|
-
}
|
|
329
|
-
},
|
|
330
|
-
catch: function (t) {
|
|
331
|
-
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
|
|
332
|
-
var r = this.tryEntries[e];
|
|
333
|
-
if (r.tryLoc === t) {
|
|
334
|
-
var n = r.completion;
|
|
335
|
-
if ("throw" === n.type) {
|
|
336
|
-
var o = n.arg;
|
|
337
|
-
resetTryEntry(r);
|
|
338
|
-
}
|
|
339
|
-
return o;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
throw Error("illegal catch attempt");
|
|
343
|
-
},
|
|
344
|
-
delegateYield: function (e, r, n) {
|
|
345
|
-
return this.delegate = {
|
|
346
|
-
iterator: values(e),
|
|
347
|
-
resultName: r,
|
|
348
|
-
nextLoc: n
|
|
349
|
-
}, "next" === this.method && (this.arg = t), y;
|
|
350
|
-
}
|
|
351
|
-
}, e;
|
|
104
|
+
function _inheritsLoose(t, o) {
|
|
105
|
+
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
|
|
106
|
+
}
|
|
107
|
+
function _setPrototypeOf(t, e) {
|
|
108
|
+
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
|
|
109
|
+
return t.__proto__ = e, t;
|
|
110
|
+
}, _setPrototypeOf(t, e);
|
|
352
111
|
}
|
|
353
112
|
function _toPrimitive(t, r) {
|
|
354
113
|
if ("object" != typeof t || !t) return t;
|
|
@@ -364,6 +123,13 @@ function _toPropertyKey(t) {
|
|
|
364
123
|
var i = _toPrimitive(t, "string");
|
|
365
124
|
return "symbol" == typeof i ? i : i + "";
|
|
366
125
|
}
|
|
126
|
+
function _unsupportedIterableToArray(r, a) {
|
|
127
|
+
if (r) {
|
|
128
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
129
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
130
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
367
133
|
|
|
368
134
|
/**
|
|
369
135
|
* @license
|
|
@@ -431,67 +197,6 @@ var ContrastCurve = /*#__PURE__*/function () {
|
|
|
431
197
|
return ContrastCurve;
|
|
432
198
|
}();
|
|
433
199
|
|
|
434
|
-
/**
|
|
435
|
-
* @license
|
|
436
|
-
* Copyright 2023 Google LLC
|
|
437
|
-
*
|
|
438
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
439
|
-
* you may not use this file except in compliance with the License.
|
|
440
|
-
* You may obtain a copy of the License at
|
|
441
|
-
*
|
|
442
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
443
|
-
*
|
|
444
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
445
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
446
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
447
|
-
* See the License for the specific language governing permissions and
|
|
448
|
-
* limitations under the License.
|
|
449
|
-
*/
|
|
450
|
-
/**
|
|
451
|
-
* Documents a constraint between two DynamicColors, in which their tones must
|
|
452
|
-
* have a certain distance from each other.
|
|
453
|
-
*
|
|
454
|
-
* Prefer a DynamicColor with a background, this is for special cases when
|
|
455
|
-
* designers want tonal distance, literally contrast, between two colors that
|
|
456
|
-
* don't have a background / foreground relationship or a contrast guarantee.
|
|
457
|
-
*/
|
|
458
|
-
var ToneDeltaPair =
|
|
459
|
-
/**
|
|
460
|
-
* Documents a constraint in tone distance between two DynamicColors.
|
|
461
|
-
*
|
|
462
|
-
* The polarity is an adjective that describes "A", compared to "B".
|
|
463
|
-
*
|
|
464
|
-
* For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
|
|
465
|
-
* A's tone should be at least 15 darker than B's.
|
|
466
|
-
*
|
|
467
|
-
* 'nearer' and 'farther' describes closeness to the surface roles. For
|
|
468
|
-
* instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
|
|
469
|
-
* should be 10 lighter than B in light mode, and 10 darker than B in dark
|
|
470
|
-
* mode.
|
|
471
|
-
*
|
|
472
|
-
* @param roleA The first role in a pair.
|
|
473
|
-
* @param roleB The second role in a pair.
|
|
474
|
-
* @param delta Required difference between tones. Absolute value, negative
|
|
475
|
-
* values have undefined behavior.
|
|
476
|
-
* @param polarity The relative relation between tones of roleA and roleB,
|
|
477
|
-
* as described above.
|
|
478
|
-
* @param stayTogether Whether these two roles should stay on the same side of
|
|
479
|
-
* the "awkward zone" (T50-59). This is necessary for certain cases where
|
|
480
|
-
* one role has two backgrounds.
|
|
481
|
-
*/
|
|
482
|
-
function ToneDeltaPair(roleA, roleB, delta, polarity, stayTogether) {
|
|
483
|
-
this.roleA = void 0;
|
|
484
|
-
this.roleB = void 0;
|
|
485
|
-
this.delta = void 0;
|
|
486
|
-
this.polarity = void 0;
|
|
487
|
-
this.stayTogether = void 0;
|
|
488
|
-
this.roleA = roleA;
|
|
489
|
-
this.roleB = roleB;
|
|
490
|
-
this.delta = delta;
|
|
491
|
-
this.polarity = polarity;
|
|
492
|
-
this.stayTogether = stayTogether;
|
|
493
|
-
};
|
|
494
|
-
|
|
495
200
|
/**
|
|
496
201
|
* @license
|
|
497
202
|
* Copyright 2022 Google LLC
|
|
@@ -828,6 +533,74 @@ var DynamicColor = /*#__PURE__*/function () {
|
|
|
828
533
|
return DynamicColor;
|
|
829
534
|
}();
|
|
830
535
|
|
|
536
|
+
/**
|
|
537
|
+
* @license
|
|
538
|
+
* Copyright 2023 Google LLC
|
|
539
|
+
*
|
|
540
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
541
|
+
* you may not use this file except in compliance with the License.
|
|
542
|
+
* You may obtain a copy of the License at
|
|
543
|
+
*
|
|
544
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
545
|
+
*
|
|
546
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
547
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
548
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
549
|
+
* See the License for the specific language governing permissions and
|
|
550
|
+
* limitations under the License.
|
|
551
|
+
*/
|
|
552
|
+
/**
|
|
553
|
+
* Documents a constraint between two DynamicColors, in which their tones must
|
|
554
|
+
* have a certain distance from each other.
|
|
555
|
+
*
|
|
556
|
+
* Prefer a DynamicColor with a background, this is for special cases when
|
|
557
|
+
* designers want tonal distance, literally contrast, between two colors that
|
|
558
|
+
* don't have a background / foreground relationship or a contrast guarantee.
|
|
559
|
+
*/
|
|
560
|
+
var ToneDeltaPair =
|
|
561
|
+
/**
|
|
562
|
+
* Documents a constraint in tone distance between two DynamicColors.
|
|
563
|
+
*
|
|
564
|
+
* The polarity is an adjective that describes "A", compared to "B".
|
|
565
|
+
*
|
|
566
|
+
* For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
|
|
567
|
+
* A's tone should be at least 15 darker than B's.
|
|
568
|
+
*
|
|
569
|
+
* 'nearer' and 'farther' describes closeness to the surface roles. For
|
|
570
|
+
* instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
|
|
571
|
+
* should be 10 lighter than B in light mode, and 10 darker than B in dark
|
|
572
|
+
* mode.
|
|
573
|
+
*
|
|
574
|
+
* @param roleA The first role in a pair.
|
|
575
|
+
* @param roleB The second role in a pair.
|
|
576
|
+
* @param delta Required difference between tones. Absolute value, negative
|
|
577
|
+
* values have undefined behavior.
|
|
578
|
+
* @param polarity The relative relation between tones of roleA and roleB,
|
|
579
|
+
* as described above.
|
|
580
|
+
* @param stayTogether Whether these two roles should stay on the same side of
|
|
581
|
+
* the "awkward zone" (T50-59). This is necessary for certain cases where
|
|
582
|
+
* one role has two backgrounds.
|
|
583
|
+
*/
|
|
584
|
+
function ToneDeltaPair(roleA, roleB, delta, polarity, stayTogether) {
|
|
585
|
+
this.roleA = void 0;
|
|
586
|
+
this.roleB = void 0;
|
|
587
|
+
this.delta = void 0;
|
|
588
|
+
this.polarity = void 0;
|
|
589
|
+
this.stayTogether = void 0;
|
|
590
|
+
this.roleA = roleA;
|
|
591
|
+
this.roleB = roleB;
|
|
592
|
+
this.delta = delta;
|
|
593
|
+
this.polarity = polarity;
|
|
594
|
+
this.stayTogether = stayTogether;
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
function argbToRgb(argb) {
|
|
598
|
+
return {
|
|
599
|
+
r: argb >> 16 & 0xff,
|
|
600
|
+
g: argb >> 8 & 0xff,
|
|
601
|
+
b: argb & 0xff
|
|
602
|
+
};
|
|
603
|
+
}
|
|
831
604
|
var ColorEntity = /*#__PURE__*/function () {
|
|
832
605
|
function ColorEntity(option, schemeService, colorService) {
|
|
833
606
|
this.option = void 0;
|
|
@@ -841,7 +614,7 @@ var ColorEntity = /*#__PURE__*/function () {
|
|
|
841
614
|
var _proto = ColorEntity.prototype;
|
|
842
615
|
_proto.update = function update(args) {
|
|
843
616
|
this.dynamicColor = null;
|
|
844
|
-
this.option =
|
|
617
|
+
this.option = _extends({}, this.option, args);
|
|
845
618
|
};
|
|
846
619
|
_proto.getHex = function getHex() {
|
|
847
620
|
return hexFromArgb(this.getArgb());
|
|
@@ -849,6 +622,9 @@ var ColorEntity = /*#__PURE__*/function () {
|
|
|
849
622
|
_proto.getArgb = function getArgb() {
|
|
850
623
|
return this.getDynamicColor().getArgb(this.schemeService.get());
|
|
851
624
|
};
|
|
625
|
+
_proto.getRgb = function getRgb() {
|
|
626
|
+
return argbToRgb(this.getArgb());
|
|
627
|
+
};
|
|
852
628
|
_proto.getName = function getName() {
|
|
853
629
|
return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
|
|
854
630
|
};
|
|
@@ -863,95 +639,21 @@ var ColorEntity = /*#__PURE__*/function () {
|
|
|
863
639
|
return ColorEntity;
|
|
864
640
|
}();
|
|
865
641
|
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
642
|
+
function capitalizeFirstLetter(string) {
|
|
643
|
+
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
644
|
+
}
|
|
645
|
+
var highestSurface = function highestSurface(s, colorService) {
|
|
646
|
+
if (colorService instanceof ColorService) {
|
|
647
|
+
return s.isDark ? colorService.getColor('surfaceBright').getDynamicColor() : colorService.getColor('surfaceDim').getDynamicColor();
|
|
648
|
+
} else {
|
|
649
|
+
return s.isDark ? colorService.get('surfaceBright').getDynamicColor() : colorService.get('surfaceDim').getDynamicColor();
|
|
870
650
|
}
|
|
871
|
-
var _proto = SchemeEntity.prototype;
|
|
872
|
-
_proto.getPalette = function getPalette(key) {
|
|
873
|
-
if (!this.options) {
|
|
874
|
-
throw new Error('Scheme options is not set');
|
|
875
|
-
}
|
|
876
|
-
var palette = this.options.palettes.get(key);
|
|
877
|
-
if (!palette) {
|
|
878
|
-
throw new Error("Palette " + key + " not found");
|
|
879
|
-
}
|
|
880
|
-
return palette;
|
|
881
|
-
};
|
|
882
|
-
return _createClass(SchemeEntity, [{
|
|
883
|
-
key: "contrastLevel",
|
|
884
|
-
get: function get() {
|
|
885
|
-
if (!this.options) {
|
|
886
|
-
throw new Error('Scheme options is not set');
|
|
887
|
-
}
|
|
888
|
-
return this.options.contrastLevel;
|
|
889
|
-
}
|
|
890
|
-
}, {
|
|
891
|
-
key: "isDark",
|
|
892
|
-
get: function get() {
|
|
893
|
-
if (!this.options) {
|
|
894
|
-
throw new Error('Scheme options is not set');
|
|
895
|
-
}
|
|
896
|
-
return this.options.isDark;
|
|
897
|
-
}
|
|
898
|
-
}, {
|
|
899
|
-
key: "sourceColorHct",
|
|
900
|
-
get: function get() {
|
|
901
|
-
if (!this.options) {
|
|
902
|
-
throw new Error('Scheme options is not set');
|
|
903
|
-
}
|
|
904
|
-
return Hct.fromInt(this.options.sourceColorArgb);
|
|
905
|
-
}
|
|
906
|
-
}]);
|
|
907
|
-
}();
|
|
908
|
-
|
|
909
|
-
var SchemeService = /*#__PURE__*/function () {
|
|
910
|
-
function SchemeService() {
|
|
911
|
-
this.schemeEntity = void 0;
|
|
912
|
-
this.options = void 0;
|
|
913
|
-
}
|
|
914
|
-
var _proto = SchemeService.prototype;
|
|
915
|
-
_proto.createOrUpdate = function createOrUpdate(options) {
|
|
916
|
-
this.options = mergeDeep(this.options, options);
|
|
917
|
-
var palettes = new Map();
|
|
918
|
-
var sourceColorArgb = argbFromHex(this.options.sourceColorHex);
|
|
919
|
-
var sourceColorHct = Hct.fromInt(sourceColorArgb);
|
|
920
|
-
if (!this.options.palettes) {
|
|
921
|
-
return;
|
|
922
|
-
}
|
|
923
|
-
for (var _i = 0, _Object$entries = Object.entries(this.options.palettes); _i < _Object$entries.length; _i++) {
|
|
924
|
-
var _Object$entries$_i = _Object$entries[_i],
|
|
925
|
-
key = _Object$entries$_i[0],
|
|
926
|
-
paletteFunction = _Object$entries$_i[1];
|
|
927
|
-
var palette = paletteFunction(sourceColorHct);
|
|
928
|
-
palettes.set(key, palette);
|
|
929
|
-
}
|
|
930
|
-
this.schemeEntity = new SchemeEntity(_extends({}, this.options, {
|
|
931
|
-
palettes: palettes,
|
|
932
|
-
sourceColorArgb: sourceColorArgb
|
|
933
|
-
}));
|
|
934
|
-
};
|
|
935
|
-
_proto.get = function get() {
|
|
936
|
-
if (!this.schemeEntity) {
|
|
937
|
-
throw new Error('Scheme is not created');
|
|
938
|
-
}
|
|
939
|
-
return this.schemeEntity;
|
|
940
|
-
};
|
|
941
|
-
return SchemeService;
|
|
942
|
-
}();
|
|
943
|
-
SchemeService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable()], SchemeService);
|
|
944
|
-
|
|
945
|
-
function capitalizeFirstLetter(string) {
|
|
946
|
-
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
947
|
-
}
|
|
948
|
-
var highestSurface = function highestSurface(s, colorManagerService) {
|
|
949
|
-
return s.isDark ? colorManagerService.get('surfaceBright').getDynamicColor() : colorManagerService.get('surfaceDim').getDynamicColor();
|
|
950
651
|
};
|
|
951
652
|
var ColorManagerService = /*#__PURE__*/function () {
|
|
952
|
-
function ColorManagerService(
|
|
953
|
-
|
|
653
|
+
function ColorManagerService(_ref) {
|
|
654
|
+
var schemeService = _ref.schemeService;
|
|
954
655
|
this.colorMap = new Map();
|
|
656
|
+
this.schemeService = void 0;
|
|
955
657
|
this.schemeService = schemeService;
|
|
956
658
|
}
|
|
957
659
|
var _proto = ColorManagerService.prototype;
|
|
@@ -1137,78 +839,110 @@ var ColorManagerService = /*#__PURE__*/function () {
|
|
|
1137
839
|
};
|
|
1138
840
|
return ColorManagerService;
|
|
1139
841
|
}();
|
|
1140
|
-
ColorManagerService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService])], ColorManagerService);
|
|
1141
842
|
|
|
1142
|
-
var
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
843
|
+
var ColorModule = {
|
|
844
|
+
colorManagerService: /*#__PURE__*/asClass(ColorManagerService).singleton(),
|
|
845
|
+
colorService: /*#__PURE__*/asClass(ColorService).singleton()
|
|
846
|
+
};
|
|
847
|
+
|
|
848
|
+
var SchemeEntity = /*#__PURE__*/function () {
|
|
849
|
+
function SchemeEntity(options) {
|
|
850
|
+
this.options = void 0;
|
|
851
|
+
this.options = options;
|
|
1150
852
|
}
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
// addBaseColors() {
|
|
1162
|
-
// this.colorManagerService.addFromPalette('primary');
|
|
1163
|
-
// this.colorManagerService.addFromPalette('secondary');
|
|
1164
|
-
// this.colorManagerService.addFromPalette('tertiary');
|
|
1165
|
-
// for (const [key, value] of Object.entries(this.defaultColorModel.colors)) {
|
|
1166
|
-
// this.colorManagerService.createOrUpdate(key, value as any);
|
|
1167
|
-
// }
|
|
1168
|
-
// }
|
|
1169
|
-
;
|
|
1170
|
-
_proto.addColor = function addColor(key, color) {
|
|
1171
|
-
return this.colorManagerService.createOrUpdate(key, color);
|
|
1172
|
-
};
|
|
1173
|
-
_proto.addColors = function addColors(colors) {
|
|
1174
|
-
var _this = this;
|
|
1175
|
-
return Object.keys(colors).map(function (key) {
|
|
1176
|
-
return _this.addColor(key, colors[key]);
|
|
1177
|
-
});
|
|
1178
|
-
};
|
|
1179
|
-
_proto.getColor = function getColor(key) {
|
|
1180
|
-
return this.colorManagerService.get(key);
|
|
1181
|
-
};
|
|
1182
|
-
_proto.removeColor = function removeColor(key) {
|
|
1183
|
-
return this.colorManagerService.remove(key);
|
|
1184
|
-
};
|
|
1185
|
-
_proto.updateColor = function updateColor(key, newColor) {
|
|
1186
|
-
return this.colorManagerService.createOrUpdate(key, newColor);
|
|
853
|
+
var _proto = SchemeEntity.prototype;
|
|
854
|
+
_proto.getPalette = function getPalette(key) {
|
|
855
|
+
if (!this.options) {
|
|
856
|
+
throw new Error('Scheme options is not set');
|
|
857
|
+
}
|
|
858
|
+
var palette = this.options.palettes.get(key);
|
|
859
|
+
if (!palette) {
|
|
860
|
+
throw new Error("Palette " + key + " not found");
|
|
861
|
+
}
|
|
862
|
+
return palette;
|
|
1187
863
|
};
|
|
1188
|
-
return
|
|
864
|
+
return _createClass(SchemeEntity, [{
|
|
865
|
+
key: "contrastLevel",
|
|
866
|
+
get: function get() {
|
|
867
|
+
if (!this.options) {
|
|
868
|
+
throw new Error('Scheme options is not set');
|
|
869
|
+
}
|
|
870
|
+
return this.options.contrastLevel;
|
|
871
|
+
}
|
|
872
|
+
}, {
|
|
873
|
+
key: "isDark",
|
|
874
|
+
get: function get() {
|
|
875
|
+
if (!this.options) {
|
|
876
|
+
throw new Error('Scheme options is not set');
|
|
877
|
+
}
|
|
878
|
+
return this.options.isDark;
|
|
879
|
+
}
|
|
880
|
+
}, {
|
|
881
|
+
key: "sourceColorHct",
|
|
882
|
+
get: function get() {
|
|
883
|
+
if (!this.options) {
|
|
884
|
+
throw new Error('Scheme options is not set');
|
|
885
|
+
}
|
|
886
|
+
return Hct.fromInt(this.options.sourceColorArgb);
|
|
887
|
+
}
|
|
888
|
+
}]);
|
|
1189
889
|
}();
|
|
1190
|
-
ColorService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [ColorManagerService])], ColorService);
|
|
1191
890
|
|
|
1192
|
-
var
|
|
1193
|
-
function
|
|
1194
|
-
this.
|
|
1195
|
-
this.
|
|
891
|
+
var SchemeService = /*#__PURE__*/function () {
|
|
892
|
+
function SchemeService() {
|
|
893
|
+
this.schemeEntity = void 0;
|
|
894
|
+
this.options = void 0;
|
|
1196
895
|
}
|
|
1197
|
-
var _proto =
|
|
1198
|
-
_proto.
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
}
|
|
896
|
+
var _proto = SchemeService.prototype;
|
|
897
|
+
_proto.createOrUpdate = function createOrUpdate(options) {
|
|
898
|
+
var _this$options, _this$options2;
|
|
899
|
+
this.options = _extends({}, this.options, options, {
|
|
900
|
+
sourcesColorHex: _extends({}, (_this$options = this.options) == null ? void 0 : _this$options.sourcesColorHex, options.sourcesColorHex),
|
|
901
|
+
palettes: _extends({}, (_this$options2 = this.options) == null ? void 0 : _this$options2.palettes, options.palettes)
|
|
902
|
+
});
|
|
903
|
+
var palettes = new Map();
|
|
904
|
+
if (!this.options.sourcesColorHex.primary) {
|
|
905
|
+
throw new Error('Primary source color is not set');
|
|
906
|
+
}
|
|
907
|
+
var sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
|
|
908
|
+
var sourceColorHct = Hct.fromInt(sourceColorArgb);
|
|
909
|
+
if (!this.options.palettes) {
|
|
910
|
+
return;
|
|
911
|
+
}
|
|
912
|
+
for (var _i = 0, _Object$entries = Object.entries(this.options.palettes); _i < _Object$entries.length; _i++) {
|
|
913
|
+
var _Object$entries$_i = _Object$entries[_i],
|
|
914
|
+
key = _Object$entries$_i[0],
|
|
915
|
+
_Object$entries$_i$ = _Object$entries$_i[1],
|
|
916
|
+
sourceColorkey = _Object$entries$_i$.sourceColorkey,
|
|
917
|
+
paletteFunction = _Object$entries$_i$.tonalPalette;
|
|
918
|
+
var palette = void 0;
|
|
919
|
+
if (!sourceColorkey) {
|
|
920
|
+
palette = paletteFunction(sourceColorHct);
|
|
921
|
+
} else {
|
|
922
|
+
var _sourceColorArgb = argbFromHex(this.options.sourcesColorHex[sourceColorkey]);
|
|
923
|
+
var _sourceColorHct = Hct.fromInt(_sourceColorArgb);
|
|
924
|
+
palette = paletteFunction(_sourceColorHct);
|
|
925
|
+
}
|
|
926
|
+
palettes.set(key, palette);
|
|
1203
927
|
}
|
|
1204
|
-
this.
|
|
928
|
+
this.schemeEntity = new SchemeEntity(_extends({}, this.options, {
|
|
929
|
+
palettes: palettes,
|
|
930
|
+
sourceColorArgb: sourceColorArgb
|
|
931
|
+
}));
|
|
1205
932
|
};
|
|
1206
|
-
|
|
933
|
+
_proto.get = function get() {
|
|
934
|
+
if (!this.schemeEntity) {
|
|
935
|
+
throw new Error('Scheme is not created');
|
|
936
|
+
}
|
|
937
|
+
return this.schemeEntity;
|
|
938
|
+
};
|
|
939
|
+
return SchemeService;
|
|
1207
940
|
}();
|
|
1208
|
-
VariantService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService])], VariantService);
|
|
1209
941
|
|
|
1210
942
|
var ThemeService = /*#__PURE__*/function () {
|
|
1211
|
-
function ThemeService(
|
|
943
|
+
function ThemeService(_ref) {
|
|
944
|
+
var schemeService = _ref.schemeService,
|
|
945
|
+
variantService = _ref.variantService;
|
|
1212
946
|
this.schemeService = void 0;
|
|
1213
947
|
this.variantService = void 0;
|
|
1214
948
|
this.schemeService = schemeService;
|
|
@@ -1236,71 +970,1041 @@ var ThemeService = /*#__PURE__*/function () {
|
|
|
1236
970
|
// }
|
|
1237
971
|
var _proto = ThemeService.prototype;
|
|
1238
972
|
_proto.create = function create(options) {
|
|
1239
|
-
this.schemeService.createOrUpdate(options
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
973
|
+
this.schemeService.createOrUpdate(_extends({}, options, {
|
|
974
|
+
sourcesColorHex: {
|
|
975
|
+
primary: options.sourceColorHex
|
|
976
|
+
}
|
|
977
|
+
}));
|
|
978
|
+
this.variantService.set(options.variant);
|
|
1243
979
|
};
|
|
1244
980
|
_proto.update = function update(options) {
|
|
1245
|
-
|
|
981
|
+
var themeOptions = _extends({}, options);
|
|
982
|
+
if (options.sourceColorHex) themeOptions.sourcesColorHex = {
|
|
983
|
+
primary: options.sourceColorHex
|
|
984
|
+
};
|
|
985
|
+
this.schemeService.createOrUpdate(themeOptions);
|
|
986
|
+
if (options.variant) this.variantService.set(options.variant);
|
|
987
|
+
};
|
|
988
|
+
_proto.addCustomPalette = function addCustomPalette(key, colorHex) {
|
|
989
|
+
this.variantService.addCustomPalette(key, colorHex);
|
|
1246
990
|
};
|
|
1247
991
|
return ThemeService;
|
|
1248
992
|
}();
|
|
1249
|
-
ThemeService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService, VariantService])], ThemeService);
|
|
1250
993
|
|
|
1251
|
-
var
|
|
994
|
+
var VariantService = /*#__PURE__*/function () {
|
|
995
|
+
function VariantService(_ref) {
|
|
996
|
+
var schemeService = _ref.schemeService;
|
|
997
|
+
this.customPalettes = {};
|
|
998
|
+
this.variantEntity = void 0;
|
|
999
|
+
this.schemeService = void 0;
|
|
1000
|
+
this.schemeService = schemeService;
|
|
1001
|
+
}
|
|
1002
|
+
var _proto = VariantService.prototype;
|
|
1003
|
+
_proto.addCustomPalette = function addCustomPalette(key, colorHex) {
|
|
1004
|
+
this.customPalettes[key] = colorHex;
|
|
1005
|
+
this.update();
|
|
1006
|
+
};
|
|
1007
|
+
_proto.set = function set(variantEntity) {
|
|
1008
|
+
this.variantEntity = variantEntity;
|
|
1009
|
+
if (!variantEntity.palettes.error) {
|
|
1010
|
+
variantEntity.palettes.error = function () {
|
|
1011
|
+
return TonalPalette.fromHueAndChroma(25.0, 84.0);
|
|
1012
|
+
};
|
|
1013
|
+
}
|
|
1014
|
+
this.update();
|
|
1015
|
+
};
|
|
1016
|
+
_proto.update = function update() {
|
|
1017
|
+
var _this = this;
|
|
1018
|
+
if (!this.variantEntity) return;
|
|
1019
|
+
var palettes = {};
|
|
1020
|
+
Object.keys(this.variantEntity.palettes).forEach(function (key) {
|
|
1021
|
+
palettes[key] = {
|
|
1022
|
+
tonalPalette: _this.variantEntity.palettes[key]
|
|
1023
|
+
};
|
|
1024
|
+
});
|
|
1025
|
+
if (this.variantEntity.customPalettes) {
|
|
1026
|
+
Object.keys(this.customPalettes).forEach(function (key) {
|
|
1027
|
+
palettes[key] = {
|
|
1028
|
+
sourceColorkey: key,
|
|
1029
|
+
tonalPalette: _this.variantEntity.customPalettes
|
|
1030
|
+
};
|
|
1031
|
+
});
|
|
1032
|
+
}
|
|
1033
|
+
this.schemeService.createOrUpdate({
|
|
1034
|
+
sourcesColorHex: this.customPalettes,
|
|
1035
|
+
palettes: palettes
|
|
1036
|
+
});
|
|
1037
|
+
};
|
|
1038
|
+
return VariantService;
|
|
1039
|
+
}();
|
|
1040
|
+
|
|
1041
|
+
var ThemeModule = {
|
|
1042
|
+
schemeService: /*#__PURE__*/asClass(SchemeService).singleton(),
|
|
1043
|
+
variantService: /*#__PURE__*/asClass(VariantService).singleton(),
|
|
1044
|
+
themeService: /*#__PURE__*/asClass(ThemeService).singleton()
|
|
1045
|
+
};
|
|
1046
|
+
|
|
1047
|
+
var AppService = function AppService(_ref) {
|
|
1048
|
+
var colorService = _ref.colorService,
|
|
1049
|
+
themeService = _ref.themeService,
|
|
1050
|
+
pluginService = _ref.pluginService;
|
|
1252
1051
|
this.colorService = void 0;
|
|
1253
1052
|
this.themeService = void 0;
|
|
1053
|
+
this.pluginService = void 0;
|
|
1054
|
+
this.pluginService = pluginService;
|
|
1254
1055
|
this.colorService = colorService;
|
|
1255
1056
|
this.themeService = themeService;
|
|
1256
1057
|
};
|
|
1257
|
-
AppService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [ColorService, ThemeService])], AppService);
|
|
1258
1058
|
|
|
1259
|
-
var
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
exports: [ThemeService, SchemeService]
|
|
1263
|
-
})], ThemeModule);
|
|
1059
|
+
var AppModule = {
|
|
1060
|
+
appService: /*#__PURE__*/asClass(AppService).singleton()
|
|
1061
|
+
};
|
|
1264
1062
|
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1063
|
+
function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
|
|
1064
|
+
var answer = tone;
|
|
1065
|
+
var closestToChroma = Hct.from(hue, chroma, tone);
|
|
1066
|
+
if (closestToChroma.chroma < chroma) {
|
|
1067
|
+
var chromaPeak = closestToChroma.chroma;
|
|
1068
|
+
while (closestToChroma.chroma < chroma) {
|
|
1069
|
+
answer += byDecreasingTone ? -1.0 : 1.0;
|
|
1070
|
+
var potentialSolution = Hct.from(hue, chroma, answer);
|
|
1071
|
+
if (chromaPeak > potentialSolution.chroma) {
|
|
1072
|
+
break;
|
|
1073
|
+
}
|
|
1074
|
+
if (Math.abs(potentialSolution.chroma - chroma) < 0.4) {
|
|
1075
|
+
break;
|
|
1076
|
+
}
|
|
1077
|
+
var potentialDelta = Math.abs(potentialSolution.chroma - chroma);
|
|
1078
|
+
var currentDelta = Math.abs(closestToChroma.chroma - chroma);
|
|
1079
|
+
if (potentialDelta < currentDelta) {
|
|
1080
|
+
closestToChroma = potentialSolution;
|
|
1081
|
+
}
|
|
1082
|
+
chromaPeak = Math.max(chromaPeak, potentialSolution.chroma);
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
return answer;
|
|
1086
|
+
}
|
|
1087
|
+
var defaultColors = function defaultColors(colorService) {
|
|
1088
|
+
return {
|
|
1089
|
+
fromPalettes: ['primary', 'secondary', 'tertiary'],
|
|
1090
|
+
colors: {
|
|
1091
|
+
background: {
|
|
1092
|
+
palette: function palette(s) {
|
|
1093
|
+
return s.getPalette('neutral');
|
|
1094
|
+
},
|
|
1095
|
+
tone: function tone(s) {
|
|
1096
|
+
return s.isDark ? 6 : 98;
|
|
1097
|
+
},
|
|
1098
|
+
isBackground: true
|
|
1099
|
+
},
|
|
1100
|
+
onBackground: {
|
|
1101
|
+
palette: function palette(s) {
|
|
1102
|
+
return s.getPalette('neutral');
|
|
1103
|
+
},
|
|
1104
|
+
tone: function tone(s) {
|
|
1105
|
+
return s.isDark ? 90 : 10;
|
|
1106
|
+
},
|
|
1107
|
+
background: function background(s) {
|
|
1108
|
+
return colorService.getColor('background').getDynamicColor();
|
|
1109
|
+
},
|
|
1110
|
+
contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
|
|
1111
|
+
},
|
|
1112
|
+
surface: {
|
|
1113
|
+
palette: function palette(s) {
|
|
1114
|
+
return s.getPalette('neutral');
|
|
1115
|
+
},
|
|
1116
|
+
tone: function tone(s) {
|
|
1117
|
+
return s.isDark ? 6 : 98;
|
|
1118
|
+
},
|
|
1119
|
+
isBackground: true
|
|
1120
|
+
},
|
|
1121
|
+
surfaceDim: {
|
|
1122
|
+
palette: function palette(s) {
|
|
1123
|
+
return s.getPalette('neutral');
|
|
1124
|
+
},
|
|
1125
|
+
tone: function tone(s) {
|
|
1126
|
+
return s.isDark ? 6 : 87;
|
|
1127
|
+
},
|
|
1128
|
+
isBackground: true
|
|
1129
|
+
},
|
|
1130
|
+
surfaceBright: {
|
|
1131
|
+
palette: function palette(s) {
|
|
1132
|
+
return s.getPalette('neutral');
|
|
1133
|
+
},
|
|
1134
|
+
tone: function tone(s) {
|
|
1135
|
+
return s.isDark ? 24 : 98;
|
|
1136
|
+
},
|
|
1137
|
+
isBackground: true
|
|
1138
|
+
},
|
|
1139
|
+
surfaceContainerLowest: {
|
|
1140
|
+
palette: function palette(s) {
|
|
1141
|
+
return s.getPalette('neutral');
|
|
1142
|
+
},
|
|
1143
|
+
tone: function tone(s) {
|
|
1144
|
+
return s.isDark ? 4 : 100;
|
|
1145
|
+
},
|
|
1146
|
+
isBackground: true
|
|
1147
|
+
},
|
|
1148
|
+
surfaceContainerLow: {
|
|
1149
|
+
palette: function palette(s) {
|
|
1150
|
+
return s.getPalette('neutral');
|
|
1151
|
+
},
|
|
1152
|
+
tone: function tone(s) {
|
|
1153
|
+
return s.isDark ? 10 : 96;
|
|
1154
|
+
},
|
|
1155
|
+
isBackground: true
|
|
1156
|
+
},
|
|
1157
|
+
surfaceContainer: {
|
|
1158
|
+
palette: function palette(s) {
|
|
1159
|
+
return s.getPalette('neutral');
|
|
1160
|
+
},
|
|
1161
|
+
tone: function tone(s) {
|
|
1162
|
+
return s.isDark ? 12 : 94;
|
|
1163
|
+
},
|
|
1164
|
+
isBackground: true
|
|
1165
|
+
},
|
|
1166
|
+
surfaceContainerHigh: {
|
|
1167
|
+
palette: function palette(s) {
|
|
1168
|
+
return s.getPalette('neutral');
|
|
1169
|
+
},
|
|
1170
|
+
tone: function tone(s) {
|
|
1171
|
+
return s.isDark ? 17 : 92;
|
|
1172
|
+
},
|
|
1173
|
+
isBackground: true
|
|
1174
|
+
},
|
|
1175
|
+
surfaceContainerHighest: {
|
|
1176
|
+
palette: function palette(s) {
|
|
1177
|
+
return s.getPalette('neutral');
|
|
1178
|
+
},
|
|
1179
|
+
tone: function tone(s) {
|
|
1180
|
+
return s.isDark ? 22 : 90;
|
|
1181
|
+
},
|
|
1182
|
+
isBackground: true
|
|
1183
|
+
},
|
|
1184
|
+
onSurface: {
|
|
1185
|
+
palette: function palette(s) {
|
|
1186
|
+
return s.getPalette('neutral');
|
|
1187
|
+
},
|
|
1188
|
+
tone: function tone(s) {
|
|
1189
|
+
return s.isDark ? 90 : 10;
|
|
1190
|
+
},
|
|
1191
|
+
background: function background(s) {
|
|
1192
|
+
return highestSurface(s, colorService);
|
|
1193
|
+
},
|
|
1194
|
+
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
1195
|
+
},
|
|
1196
|
+
surfaceVariant: {
|
|
1197
|
+
palette: function palette(s) {
|
|
1198
|
+
return s.getPalette('neutralVariant');
|
|
1199
|
+
},
|
|
1200
|
+
tone: function tone(s) {
|
|
1201
|
+
return s.isDark ? 30 : 90;
|
|
1202
|
+
},
|
|
1203
|
+
isBackground: true
|
|
1204
|
+
},
|
|
1205
|
+
onSurfaceVariant: {
|
|
1206
|
+
palette: function palette(s) {
|
|
1207
|
+
return s.getPalette('neutralVariant');
|
|
1208
|
+
},
|
|
1209
|
+
tone: function tone(s) {
|
|
1210
|
+
return s.isDark ? 80 : 30;
|
|
1211
|
+
},
|
|
1212
|
+
background: function background(s) {
|
|
1213
|
+
return highestSurface(s, colorService);
|
|
1214
|
+
},
|
|
1215
|
+
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
1216
|
+
},
|
|
1217
|
+
inverseSurface: {
|
|
1218
|
+
palette: function palette(s) {
|
|
1219
|
+
return s.getPalette('neutral');
|
|
1220
|
+
},
|
|
1221
|
+
tone: function tone(s) {
|
|
1222
|
+
return s.isDark ? 90 : 20;
|
|
1223
|
+
}
|
|
1224
|
+
},
|
|
1225
|
+
inverseOnSurface: {
|
|
1226
|
+
palette: function palette(s) {
|
|
1227
|
+
return s.getPalette('neutral');
|
|
1228
|
+
},
|
|
1229
|
+
tone: function tone(s) {
|
|
1230
|
+
return s.isDark ? 20 : 95;
|
|
1231
|
+
},
|
|
1232
|
+
background: function background(s) {
|
|
1233
|
+
return colorService.getColor('inverseSurface').getDynamicColor();
|
|
1234
|
+
},
|
|
1235
|
+
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
1236
|
+
},
|
|
1237
|
+
outline: {
|
|
1238
|
+
palette: function palette(s) {
|
|
1239
|
+
return s.getPalette('neutralVariant');
|
|
1240
|
+
},
|
|
1241
|
+
tone: function tone(s) {
|
|
1242
|
+
return s.isDark ? 60 : 50;
|
|
1243
|
+
},
|
|
1244
|
+
background: function background(s) {
|
|
1245
|
+
return highestSurface(s, colorService);
|
|
1246
|
+
},
|
|
1247
|
+
contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
|
|
1248
|
+
},
|
|
1249
|
+
outlineVariant: {
|
|
1250
|
+
palette: function palette(s) {
|
|
1251
|
+
return s.getPalette('neutralVariant');
|
|
1252
|
+
},
|
|
1253
|
+
tone: function tone(s) {
|
|
1254
|
+
return s.isDark ? 30 : 80;
|
|
1255
|
+
},
|
|
1256
|
+
background: function background(s) {
|
|
1257
|
+
return highestSurface(s, colorService);
|
|
1258
|
+
},
|
|
1259
|
+
contrastCurve: new ContrastCurve(1, 1, 3, 7)
|
|
1260
|
+
},
|
|
1261
|
+
shadow: {
|
|
1262
|
+
palette: function palette(s) {
|
|
1263
|
+
return s.getPalette('neutral');
|
|
1264
|
+
},
|
|
1265
|
+
tone: function tone(s) {
|
|
1266
|
+
return 0;
|
|
1267
|
+
}
|
|
1268
|
+
},
|
|
1269
|
+
scrim: {
|
|
1270
|
+
palette: function palette(s) {
|
|
1271
|
+
return s.getPalette('neutral');
|
|
1272
|
+
},
|
|
1273
|
+
tone: function tone(s) {
|
|
1274
|
+
return 0;
|
|
1275
|
+
}
|
|
1276
|
+
},
|
|
1277
|
+
surfaceTint: {
|
|
1278
|
+
palette: function palette(s) {
|
|
1279
|
+
return s.getPalette('neutral');
|
|
1280
|
+
},
|
|
1281
|
+
tone: function tone(s) {
|
|
1282
|
+
return s.isDark ? 80 : 40;
|
|
1283
|
+
},
|
|
1284
|
+
isBackground: true
|
|
1285
|
+
},
|
|
1286
|
+
secondaryContainer: {
|
|
1287
|
+
tone: function tone(s) {
|
|
1288
|
+
var initialTone = s.isDark ? 30 : 90;
|
|
1289
|
+
return findDesiredChromaByTone(s.getPalette('secondary').hue, s.getPalette('secondary').chroma, initialTone, !s.isDark);
|
|
1290
|
+
}
|
|
1291
|
+
},
|
|
1292
|
+
onSecondaryContainer: {
|
|
1293
|
+
tone: function tone(s) {
|
|
1294
|
+
return DynamicColor.foregroundTone(colorService.getColor('secondaryContainer').getDynamicColor().tone(s), 4.5);
|
|
1295
|
+
}
|
|
1296
|
+
},
|
|
1297
|
+
tertiaryContainer: {
|
|
1298
|
+
palette: function palette(s) {
|
|
1299
|
+
return s.getPalette('tertiary');
|
|
1300
|
+
},
|
|
1301
|
+
tone: function tone(s) {
|
|
1302
|
+
var proposedHct = s.getPalette('tertiary').getHct(s.sourceColorHct.tone);
|
|
1303
|
+
return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
|
|
1304
|
+
}
|
|
1305
|
+
},
|
|
1306
|
+
onTertiaryContainer: {
|
|
1307
|
+
palette: function palette(s) {
|
|
1308
|
+
return s.getPalette('tertiary');
|
|
1309
|
+
},
|
|
1310
|
+
tone: function tone(s) {
|
|
1311
|
+
return DynamicColor.foregroundTone(colorService.getColor('tertiaryContainer').getDynamicColor().tone(s), 4.5);
|
|
1312
|
+
}
|
|
1313
|
+
},
|
|
1314
|
+
error: {
|
|
1315
|
+
palette: function palette(s) {
|
|
1316
|
+
return s.getPalette('error');
|
|
1317
|
+
},
|
|
1318
|
+
tone: function tone(s) {
|
|
1319
|
+
return s.isDark ? 80 : 40;
|
|
1320
|
+
},
|
|
1321
|
+
isBackground: true,
|
|
1322
|
+
background: function background(s) {
|
|
1323
|
+
return highestSurface(s, colorService);
|
|
1324
|
+
},
|
|
1325
|
+
contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
|
|
1326
|
+
toneDeltaPair: function toneDeltaPair(s) {
|
|
1327
|
+
return new ToneDeltaPair(colorService.getColor('errorContainer').getDynamicColor(), colorService.getColor('error').getDynamicColor(), 15, 'nearer', false);
|
|
1328
|
+
}
|
|
1329
|
+
},
|
|
1330
|
+
onError: {
|
|
1331
|
+
palette: function palette(s) {
|
|
1332
|
+
return s.getPalette('error');
|
|
1333
|
+
},
|
|
1334
|
+
tone: function tone(s) {
|
|
1335
|
+
return s.isDark ? 20 : 100;
|
|
1336
|
+
},
|
|
1337
|
+
background: function background(s) {
|
|
1338
|
+
return colorService.getColor('error').getDynamicColor();
|
|
1339
|
+
},
|
|
1340
|
+
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
1341
|
+
},
|
|
1342
|
+
errorContainer: {
|
|
1343
|
+
palette: function palette(s) {
|
|
1344
|
+
return s.getPalette('error');
|
|
1345
|
+
},
|
|
1346
|
+
tone: function tone(s) {
|
|
1347
|
+
return s.isDark ? 30 : 90;
|
|
1348
|
+
},
|
|
1349
|
+
isBackground: true,
|
|
1350
|
+
background: function background(s) {
|
|
1351
|
+
return highestSurface(s, colorService);
|
|
1352
|
+
},
|
|
1353
|
+
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
1354
|
+
toneDeltaPair: function toneDeltaPair(s) {
|
|
1355
|
+
return new ToneDeltaPair(colorService.getColor('errorContainer').getDynamicColor(), colorService.getColor('error').getDynamicColor(), 15, 'nearer', false);
|
|
1356
|
+
}
|
|
1357
|
+
},
|
|
1358
|
+
onErrorContainer: {
|
|
1359
|
+
palette: function palette(s) {
|
|
1360
|
+
return s.getPalette('error');
|
|
1361
|
+
},
|
|
1362
|
+
tone: function tone(s) {
|
|
1363
|
+
return s.isDark ? 90 : 10;
|
|
1364
|
+
},
|
|
1365
|
+
background: function background(s) {
|
|
1366
|
+
return colorService.getColor('errorContainer').getDynamicColor();
|
|
1367
|
+
},
|
|
1368
|
+
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
1369
|
+
},
|
|
1370
|
+
onTertiaryFixed: {
|
|
1371
|
+
palette: function palette(s) {
|
|
1372
|
+
return s.getPalette('tertiary');
|
|
1373
|
+
},
|
|
1374
|
+
tone: function tone(s) {
|
|
1375
|
+
return 10.0;
|
|
1376
|
+
},
|
|
1377
|
+
background: function background(s) {
|
|
1378
|
+
return colorService.getColor('tertiaryFixedDim').getDynamicColor();
|
|
1379
|
+
},
|
|
1380
|
+
secondBackground: function secondBackground(s) {
|
|
1381
|
+
return colorService.getColor('tertiaryFixed').getDynamicColor();
|
|
1382
|
+
},
|
|
1383
|
+
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
1384
|
+
},
|
|
1385
|
+
onTertiaryFixedVariant: {
|
|
1386
|
+
palette: function palette(s) {
|
|
1387
|
+
return s.getPalette('tertiary');
|
|
1388
|
+
},
|
|
1389
|
+
tone: function tone(s) {
|
|
1390
|
+
return 30.0;
|
|
1391
|
+
},
|
|
1392
|
+
background: function background(s) {
|
|
1393
|
+
return colorService.getColor('tertiaryFixedDim').getDynamicColor();
|
|
1394
|
+
},
|
|
1395
|
+
secondBackground: function secondBackground(s) {
|
|
1396
|
+
return colorService.getColor('tertiaryFixed').getDynamicColor();
|
|
1397
|
+
},
|
|
1398
|
+
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
};
|
|
1402
|
+
};
|
|
1271
1403
|
|
|
1272
|
-
var
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
}
|
|
1404
|
+
var getRotatedHue = function getRotatedHue(sourceColor, hues, rotations) {
|
|
1405
|
+
var sourceHue = sourceColor.hue;
|
|
1406
|
+
if (hues.length !== rotations.length) {
|
|
1407
|
+
throw new Error("mismatch between hue length " + hues.length + " & rotations " + rotations.length);
|
|
1408
|
+
}
|
|
1409
|
+
if (rotations.length === 1) {
|
|
1410
|
+
return sanitizeDegreesDouble(sourceColor.hue + rotations[0]);
|
|
1411
|
+
}
|
|
1412
|
+
var size = hues.length;
|
|
1413
|
+
for (var i = 0; i <= size - 2; i++) {
|
|
1414
|
+
var thisHue = hues[i];
|
|
1415
|
+
var nextHue = hues[i + 1];
|
|
1416
|
+
if (thisHue < sourceHue && sourceHue < nextHue) {
|
|
1417
|
+
return sanitizeDegreesDouble(sourceHue + rotations[i]);
|
|
1418
|
+
}
|
|
1419
|
+
}
|
|
1420
|
+
// If this statement executes, something is wrong, there should have been a
|
|
1421
|
+
// rotation found using the arrays.
|
|
1422
|
+
return sourceHue;
|
|
1423
|
+
};
|
|
1424
|
+
var VariantEntity = function VariantEntity(palettes, customPalettes) {
|
|
1425
|
+
if (palettes === void 0) {
|
|
1426
|
+
palettes = {};
|
|
1427
|
+
}
|
|
1428
|
+
this.palettes = void 0;
|
|
1429
|
+
this.customPalettes = void 0;
|
|
1430
|
+
this.palettes = palettes;
|
|
1431
|
+
this.customPalettes = customPalettes;
|
|
1432
|
+
};
|
|
1277
1433
|
|
|
1278
|
-
|
|
1279
|
-
|
|
1434
|
+
var _VariantModel;
|
|
1435
|
+
var VariantModel = function VariantModel() {};
|
|
1436
|
+
_VariantModel = VariantModel;
|
|
1437
|
+
VariantModel.tonalSpot = {
|
|
1438
|
+
palettes: {
|
|
1439
|
+
primary: function primary(sourceColorHct) {
|
|
1440
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0);
|
|
1441
|
+
},
|
|
1442
|
+
secondary: function secondary(sourceColorHct) {
|
|
1443
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0);
|
|
1444
|
+
},
|
|
1445
|
+
tertiary: function tertiary(sourceColorHct) {
|
|
1446
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 60.0), 24.0);
|
|
1447
|
+
},
|
|
1448
|
+
neutral: function neutral(sourceColorHct) {
|
|
1449
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0);
|
|
1450
|
+
},
|
|
1451
|
+
neutralVariant: function neutralVariant(sourceColorHct) {
|
|
1452
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0);
|
|
1453
|
+
}
|
|
1454
|
+
},
|
|
1455
|
+
customPalettes: function customPalettes(colorHct) {
|
|
1456
|
+
return TonalPalette.fromHueAndChroma(colorHct.hue, 16);
|
|
1457
|
+
}
|
|
1458
|
+
};
|
|
1459
|
+
VariantModel.vibrant = {
|
|
1460
|
+
palettes: {
|
|
1461
|
+
primary: function primary(sourceColorHct) {
|
|
1462
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200.0);
|
|
1463
|
+
},
|
|
1464
|
+
secondary: function secondary(sourceColorHct) {
|
|
1465
|
+
return TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, _VariantModel.hues, _VariantModel.secondaryRotations), 24.0);
|
|
1466
|
+
},
|
|
1467
|
+
tertiary: function tertiary(sourceColorHct) {
|
|
1468
|
+
return TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, _VariantModel.hues, _VariantModel.tertiaryRotations), 32.0);
|
|
1469
|
+
},
|
|
1470
|
+
neutral: function neutral(sourceColorHct) {
|
|
1471
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0);
|
|
1472
|
+
},
|
|
1473
|
+
neutralVariant: function neutralVariant(sourceColorHct) {
|
|
1474
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0);
|
|
1475
|
+
}
|
|
1476
|
+
},
|
|
1477
|
+
customPalettes: function customPalettes(colorHct) {
|
|
1478
|
+
return TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, _VariantModel.hues, _VariantModel.secondaryRotations), 24.0);
|
|
1479
|
+
}
|
|
1480
|
+
};
|
|
1481
|
+
VariantModel.hues = [0.0, 41.0, 61.0, 101.0, 131.0, 181.0, 251.0, 301.0, 360.0];
|
|
1482
|
+
VariantModel.secondaryRotations = [18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12.0, 12.0];
|
|
1483
|
+
VariantModel.tertiaryRotations = [35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0];
|
|
1484
|
+
|
|
1485
|
+
function defineConfig(configObject) {
|
|
1486
|
+
if (!configObject || typeof configObject !== 'object') {
|
|
1487
|
+
throw new Error('The configuration is missing or not an object');
|
|
1488
|
+
}
|
|
1489
|
+
if (!('sourceColor' in configObject)) {
|
|
1490
|
+
throw new Error('Invalid configuration');
|
|
1491
|
+
}
|
|
1492
|
+
return configObject;
|
|
1280
1493
|
}
|
|
1281
|
-
function
|
|
1282
|
-
|
|
1283
|
-
var
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1494
|
+
var ConfigService = /*#__PURE__*/function () {
|
|
1495
|
+
function ConfigService(_ref) {
|
|
1496
|
+
var appService = _ref.appService;
|
|
1497
|
+
this.configPath = './theme.config';
|
|
1498
|
+
this.appService = void 0;
|
|
1499
|
+
this.appService = appService;
|
|
1500
|
+
}
|
|
1501
|
+
var _proto = ConfigService.prototype;
|
|
1502
|
+
_proto.loadConfig = function loadConfig() {
|
|
1503
|
+
var _this$appService = this.appService,
|
|
1504
|
+
themeService = _this$appService.themeService,
|
|
1505
|
+
colorService = _this$appService.colorService,
|
|
1506
|
+
pluginService = _this$appService.pluginService;
|
|
1507
|
+
var _this$getConfig = this.getConfig(),
|
|
1508
|
+
sourceColor = _this$getConfig.sourceColor,
|
|
1509
|
+
_this$getConfig$contr = _this$getConfig.contrastLevel,
|
|
1510
|
+
contrastLevel = _this$getConfig$contr === void 0 ? 0 : _this$getConfig$contr,
|
|
1511
|
+
_this$getConfig$isDar = _this$getConfig.isDark,
|
|
1512
|
+
isDark = _this$getConfig$isDar === void 0 ? false : _this$getConfig$isDar,
|
|
1513
|
+
_this$getConfig$varia = _this$getConfig.variant,
|
|
1514
|
+
variant = _this$getConfig$varia === void 0 ? VariantModel.tonalSpot : _this$getConfig$varia,
|
|
1515
|
+
palettes = _this$getConfig.palettes,
|
|
1516
|
+
colors = _this$getConfig.colors,
|
|
1517
|
+
_this$getConfig$useDe = _this$getConfig.useDefaultColors,
|
|
1518
|
+
useDefaultColors = _this$getConfig$useDe === void 0 ? true : _this$getConfig$useDe,
|
|
1519
|
+
plugins = _this$getConfig.plugins;
|
|
1520
|
+
themeService.create({
|
|
1521
|
+
contrastLevel: contrastLevel,
|
|
1522
|
+
isDark: isDark,
|
|
1523
|
+
sourceColorHex: sourceColor,
|
|
1524
|
+
variant: variant
|
|
1525
|
+
});
|
|
1526
|
+
if (palettes) {
|
|
1527
|
+
Object.entries(palettes).forEach(function (_ref2) {
|
|
1528
|
+
var key = _ref2[0],
|
|
1529
|
+
value = _ref2[1];
|
|
1530
|
+
return themeService.addCustomPalette(key, value);
|
|
1531
|
+
});
|
|
1532
|
+
}
|
|
1533
|
+
if (useDefaultColors) {
|
|
1534
|
+
colorService.addColors(defaultColors);
|
|
1535
|
+
}
|
|
1536
|
+
if (colors) {
|
|
1537
|
+
colorService.addColors(colors);
|
|
1538
|
+
}
|
|
1539
|
+
if (plugins) {
|
|
1540
|
+
plugins.forEach(function (plugin) {
|
|
1541
|
+
if (Array.isArray(plugin)) {
|
|
1542
|
+
pluginService.addPlugin(plugin[0], plugin[1]);
|
|
1543
|
+
} else {
|
|
1544
|
+
pluginService.addPlugin(plugin, {});
|
|
1545
|
+
}
|
|
1546
|
+
});
|
|
1547
|
+
pluginService.loadPlugins(this.appService);
|
|
1548
|
+
}
|
|
1549
|
+
};
|
|
1550
|
+
_proto.getConfig = function getConfig() {
|
|
1551
|
+
var base = resolve(this.configPath);
|
|
1552
|
+
var extensions = ['.js', '.ts', '.jms', '.jcs'];
|
|
1553
|
+
var configImport = null;
|
|
1554
|
+
for (var _i = 0, _extensions = extensions; _i < _extensions.length; _i++) {
|
|
1555
|
+
var ext = _extensions[_i];
|
|
1556
|
+
var path = base + ext;
|
|
1557
|
+
if (existsSync(path)) {
|
|
1558
|
+
configImport = require(path);
|
|
1559
|
+
break;
|
|
1299
1560
|
}
|
|
1300
|
-
}
|
|
1301
|
-
|
|
1302
|
-
|
|
1561
|
+
}
|
|
1562
|
+
if (!configImport) {
|
|
1563
|
+
throw new Error('Configuration file not found');
|
|
1564
|
+
}
|
|
1565
|
+
var config;
|
|
1566
|
+
if ('default' in configImport) {
|
|
1567
|
+
config = configImport["default"];
|
|
1568
|
+
} else {
|
|
1569
|
+
config = configImport;
|
|
1570
|
+
}
|
|
1571
|
+
return config;
|
|
1572
|
+
};
|
|
1573
|
+
return ConfigService;
|
|
1574
|
+
}();
|
|
1575
|
+
|
|
1576
|
+
var ConfigModule = {
|
|
1577
|
+
configService: /*#__PURE__*/asClass(ConfigService).singleton()
|
|
1578
|
+
};
|
|
1579
|
+
|
|
1580
|
+
var PluginService = /*#__PURE__*/function () {
|
|
1581
|
+
function PluginService() {
|
|
1582
|
+
this.pluginInstances = new Map();
|
|
1583
|
+
this.pluginConstructors = new Map();
|
|
1584
|
+
}
|
|
1585
|
+
var _proto = PluginService.prototype;
|
|
1586
|
+
_proto.addPlugin = function addPlugin(plugin, config) {
|
|
1587
|
+
this.pluginConstructors.set(plugin.name, [plugin, config]);
|
|
1588
|
+
};
|
|
1589
|
+
_proto.loadPlugins = function loadPlugins(appService) {
|
|
1590
|
+
var _this = this;
|
|
1591
|
+
var plugins = new Map(this.pluginConstructors);
|
|
1592
|
+
var size = 0;
|
|
1593
|
+
do {
|
|
1594
|
+
size = plugins.size;
|
|
1595
|
+
plugins.forEach(function (_ref, key) {
|
|
1596
|
+
var plugin = _ref[0],
|
|
1597
|
+
option = _ref[1];
|
|
1598
|
+
var deps = plugin.dependencies.filter(function (dep) {
|
|
1599
|
+
return !_this.pluginInstances.has(dep.name);
|
|
1600
|
+
});
|
|
1601
|
+
if (deps.length === 0) {
|
|
1602
|
+
_this.pluginInstances.set(plugin.name, new plugin(appService, option));
|
|
1603
|
+
plugins["delete"](key);
|
|
1604
|
+
}
|
|
1605
|
+
});
|
|
1606
|
+
} while (plugins.size != 0 && plugins.size < size);
|
|
1607
|
+
if (plugins.size > 0) console.log("Some plugins couldn't be loaded due to missing dependencies: ", Array.from(plugins.keys()));
|
|
1608
|
+
};
|
|
1609
|
+
_proto.getPlugin = function getPlugin(plugin) {
|
|
1610
|
+
var pluginInstance = this.pluginInstances.get(plugin.name);
|
|
1611
|
+
if (!pluginInstance) throw new Error("Plugin " + plugin.name + " not found");
|
|
1612
|
+
return pluginInstance;
|
|
1613
|
+
};
|
|
1614
|
+
return PluginService;
|
|
1615
|
+
}();
|
|
1616
|
+
|
|
1617
|
+
var PluginModule = {
|
|
1618
|
+
pluginService: /*#__PURE__*/asClass(PluginService).singleton()
|
|
1619
|
+
};
|
|
1620
|
+
|
|
1621
|
+
function importContainer(container, services) {
|
|
1622
|
+
services.forEach(function (service) {
|
|
1623
|
+
Object.entries(service).forEach(function (_ref) {
|
|
1624
|
+
var name = _ref[0],
|
|
1625
|
+
serviceClass = _ref[1];
|
|
1626
|
+
container.register(name, serviceClass);
|
|
1627
|
+
});
|
|
1628
|
+
});
|
|
1629
|
+
return container;
|
|
1630
|
+
}
|
|
1631
|
+
var AppContainer = /*#__PURE__*/createContainer({
|
|
1632
|
+
injectionMode: InjectionMode.PROXY
|
|
1633
|
+
});
|
|
1634
|
+
importContainer(AppContainer, [ConfigModule, AppModule, PluginModule, ColorModule, ThemeModule]);
|
|
1635
|
+
|
|
1636
|
+
function bootstrap() {
|
|
1637
|
+
return AppContainer.resolve('appService');
|
|
1638
|
+
}
|
|
1639
|
+
function bootstrapFromConfig(path) {
|
|
1640
|
+
var configService = AppContainer.resolve('configService');
|
|
1641
|
+
if (path) configService.configPath = path;
|
|
1642
|
+
configService.loadConfig();
|
|
1643
|
+
return AppContainer.resolve('appService');
|
|
1303
1644
|
}
|
|
1304
1645
|
|
|
1305
|
-
|
|
1646
|
+
var PluginAbstract = function PluginAbstract() {};
|
|
1647
|
+
PluginAbstract.dependencies = [];
|
|
1648
|
+
|
|
1649
|
+
var FontFamily;
|
|
1650
|
+
(function (FontFamily) {
|
|
1651
|
+
FontFamily["Expressive"] = "expressive";
|
|
1652
|
+
FontFamily["Neutral"] = "neutral";
|
|
1653
|
+
})(FontFamily || (FontFamily = {}));
|
|
1654
|
+
var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
|
|
1655
|
+
function FontPlugin(appService, options) {
|
|
1656
|
+
var _options$fontFamily$e, _options$fontFamily, _options$fontFamily$n, _options$fontFamily2;
|
|
1657
|
+
var _this;
|
|
1658
|
+
_this = _PluginAbstract.call(this) || this;
|
|
1659
|
+
_this.appService = void 0;
|
|
1660
|
+
_this.options = void 0;
|
|
1661
|
+
_this.fontFamily = void 0;
|
|
1662
|
+
_this.fontStyles = void 0;
|
|
1663
|
+
_this.appService = appService;
|
|
1664
|
+
_this.options = options;
|
|
1665
|
+
_this.fontFamily = {
|
|
1666
|
+
expressive: (_options$fontFamily$e = options == null || (_options$fontFamily = options.fontFamily) == null ? void 0 : _options$fontFamily.expressive) != null ? _options$fontFamily$e : ['Roboto', 'sans-serif'],
|
|
1667
|
+
neutral: (_options$fontFamily$n = options == null || (_options$fontFamily2 = options.fontFamily) == null ? void 0 : _options$fontFamily2.neutral) != null ? _options$fontFamily$n : ['Roboto', 'sans-serif']
|
|
1668
|
+
};
|
|
1669
|
+
_this.fontStyles = {
|
|
1670
|
+
display: {
|
|
1671
|
+
large: {
|
|
1672
|
+
fontWeight: 400,
|
|
1673
|
+
fontSize: 3.5625,
|
|
1674
|
+
lineHeight: 4,
|
|
1675
|
+
letterSpacing: -0.015625,
|
|
1676
|
+
fontFamily: FontFamily.Expressive
|
|
1677
|
+
},
|
|
1678
|
+
medium: {
|
|
1679
|
+
fontWeight: 400,
|
|
1680
|
+
fontSize: 2.8125,
|
|
1681
|
+
lineHeight: 3.25,
|
|
1682
|
+
fontFamily: FontFamily.Expressive
|
|
1683
|
+
},
|
|
1684
|
+
small: {
|
|
1685
|
+
fontWeight: 400,
|
|
1686
|
+
fontSize: 2.25,
|
|
1687
|
+
lineHeight: 2.75,
|
|
1688
|
+
fontFamily: FontFamily.Expressive
|
|
1689
|
+
}
|
|
1690
|
+
},
|
|
1691
|
+
headline: {
|
|
1692
|
+
large: {
|
|
1693
|
+
fontWeight: 400,
|
|
1694
|
+
fontSize: 2,
|
|
1695
|
+
lineHeight: 2.5,
|
|
1696
|
+
fontFamily: FontFamily.Expressive
|
|
1697
|
+
},
|
|
1698
|
+
medium: {
|
|
1699
|
+
fontWeight: 400,
|
|
1700
|
+
fontSize: 1.75,
|
|
1701
|
+
lineHeight: 2.25,
|
|
1702
|
+
fontFamily: FontFamily.Expressive
|
|
1703
|
+
},
|
|
1704
|
+
small: {
|
|
1705
|
+
fontWeight: 400,
|
|
1706
|
+
fontSize: 1.5,
|
|
1707
|
+
lineHeight: 2,
|
|
1708
|
+
fontFamily: FontFamily.Expressive
|
|
1709
|
+
}
|
|
1710
|
+
},
|
|
1711
|
+
title: {
|
|
1712
|
+
large: {
|
|
1713
|
+
fontWeight: 400,
|
|
1714
|
+
fontSize: 1.375,
|
|
1715
|
+
lineHeight: 1.75,
|
|
1716
|
+
fontFamily: FontFamily.Neutral
|
|
1717
|
+
},
|
|
1718
|
+
medium: {
|
|
1719
|
+
fontWeight: 500,
|
|
1720
|
+
fontSize: 1,
|
|
1721
|
+
lineHeight: 1.5,
|
|
1722
|
+
fontFamily: FontFamily.Neutral,
|
|
1723
|
+
letterSpacing: 0.009375
|
|
1724
|
+
},
|
|
1725
|
+
small: {
|
|
1726
|
+
fontWeight: 500,
|
|
1727
|
+
fontSize: 0.875,
|
|
1728
|
+
lineHeight: 1.25,
|
|
1729
|
+
fontFamily: FontFamily.Neutral,
|
|
1730
|
+
letterSpacing: 0.00625
|
|
1731
|
+
}
|
|
1732
|
+
},
|
|
1733
|
+
label: {
|
|
1734
|
+
large: {
|
|
1735
|
+
fontWeight: 500,
|
|
1736
|
+
fontSize: 0.875,
|
|
1737
|
+
lineHeight: 1.25,
|
|
1738
|
+
fontFamily: FontFamily.Neutral,
|
|
1739
|
+
letterSpacing: 0.00625
|
|
1740
|
+
},
|
|
1741
|
+
medium: {
|
|
1742
|
+
fontWeight: 500,
|
|
1743
|
+
fontSize: 0.75,
|
|
1744
|
+
lineHeight: 1,
|
|
1745
|
+
fontFamily: FontFamily.Neutral,
|
|
1746
|
+
letterSpacing: 0.03125
|
|
1747
|
+
},
|
|
1748
|
+
small: {
|
|
1749
|
+
fontWeight: 500,
|
|
1750
|
+
fontSize: 0.6875,
|
|
1751
|
+
lineHeight: 1,
|
|
1752
|
+
fontFamily: FontFamily.Neutral,
|
|
1753
|
+
letterSpacing: 0.03125
|
|
1754
|
+
}
|
|
1755
|
+
},
|
|
1756
|
+
body: {
|
|
1757
|
+
large: {
|
|
1758
|
+
fontWeight: 400,
|
|
1759
|
+
fontSize: 1,
|
|
1760
|
+
lineHeight: 1.5625,
|
|
1761
|
+
fontFamily: FontFamily.Neutral,
|
|
1762
|
+
letterSpacing: 0.03125
|
|
1763
|
+
},
|
|
1764
|
+
medium: {
|
|
1765
|
+
fontWeight: 400,
|
|
1766
|
+
fontSize: 0.875,
|
|
1767
|
+
lineHeight: 1.25,
|
|
1768
|
+
fontFamily: FontFamily.Neutral,
|
|
1769
|
+
letterSpacing: 0.015625
|
|
1770
|
+
},
|
|
1771
|
+
small: {
|
|
1772
|
+
fontWeight: 400,
|
|
1773
|
+
fontSize: 0.75,
|
|
1774
|
+
lineHeight: 1,
|
|
1775
|
+
fontFamily: FontFamily.Neutral,
|
|
1776
|
+
letterSpacing: 0.025
|
|
1777
|
+
}
|
|
1778
|
+
}
|
|
1779
|
+
};
|
|
1780
|
+
if (options && options.fontStyles) Object.entries(options.fontStyles).forEach(function (_ref) {
|
|
1781
|
+
var key = _ref[0],
|
|
1782
|
+
fontParam = _ref[1];
|
|
1783
|
+
var fontRole = key;
|
|
1784
|
+
Object.entries(fontParam).forEach(function (_ref2) {
|
|
1785
|
+
var size = _ref2[0],
|
|
1786
|
+
fontStyle = _ref2[1];
|
|
1787
|
+
var fontSize = size;
|
|
1788
|
+
if (fontStyle) {
|
|
1789
|
+
_this.fontStyles[fontRole][fontSize] = _extends({}, _this.fontStyles[fontRole][fontSize], fontStyle);
|
|
1790
|
+
}
|
|
1791
|
+
});
|
|
1792
|
+
});
|
|
1793
|
+
return _this;
|
|
1794
|
+
}
|
|
1795
|
+
_inheritsLoose(FontPlugin, _PluginAbstract);
|
|
1796
|
+
FontPlugin.config = function config(options) {
|
|
1797
|
+
return options;
|
|
1798
|
+
};
|
|
1799
|
+
var _proto = FontPlugin.prototype;
|
|
1800
|
+
_proto.getFonts = function getFonts() {
|
|
1801
|
+
return {
|
|
1802
|
+
fontStyles: this.fontStyles,
|
|
1803
|
+
fontFamily: this.fontFamily
|
|
1804
|
+
};
|
|
1805
|
+
};
|
|
1806
|
+
return FontPlugin;
|
|
1807
|
+
}(PluginAbstract);
|
|
1808
|
+
|
|
1809
|
+
var state = function state(colorkeys) {
|
|
1810
|
+
return plugin(function (pluginArgs) {
|
|
1811
|
+
addAllNewComponents(pluginArgs, {
|
|
1812
|
+
statePrefix: 'state',
|
|
1813
|
+
disabledStyles: {
|
|
1814
|
+
textOpacity: 0.38,
|
|
1815
|
+
backgroundOpacity: 0.12
|
|
1816
|
+
},
|
|
1817
|
+
transition: {
|
|
1818
|
+
duration: 150
|
|
1819
|
+
}
|
|
1820
|
+
}, colorkeys);
|
|
1821
|
+
}, {});
|
|
1822
|
+
};
|
|
1823
|
+
var addAllNewComponents = function addAllNewComponents(_ref, _ref2, colorKeys) {
|
|
1824
|
+
var addComponents = _ref.addComponents;
|
|
1825
|
+
var statePrefix = _ref2.statePrefix,
|
|
1826
|
+
disabledStyles = _ref2.disabledStyles,
|
|
1827
|
+
transition = _ref2.transition;
|
|
1828
|
+
var newComponents = {};
|
|
1829
|
+
for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
|
|
1830
|
+
var isGroup = _arr[_i];
|
|
1831
|
+
var group = isGroup ? 'group-' : '';
|
|
1832
|
+
for (var _iterator = _createForOfIteratorHelperLoose(colorKeys), _step; !(_step = _iterator()).done;) {
|
|
1833
|
+
var _newComponents$classN;
|
|
1834
|
+
var colorName = _step.value;
|
|
1835
|
+
var className = "." + group + statePrefix + "-" + colorName;
|
|
1836
|
+
newComponents[className] = (_newComponents$classN = {}, _newComponents$classN["@apply " + group + "hover:bg-" + colorName + "/[0.08]"] = {}, _newComponents$classN["@apply " + group + "active:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN["@apply " + group + "focus-visible:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN);
|
|
1837
|
+
if (transition) {
|
|
1838
|
+
newComponents[className]["@apply transition-colors"] = {};
|
|
1839
|
+
newComponents[className]["@apply duration-" + transition.duration] = {};
|
|
1840
|
+
}
|
|
1841
|
+
if (disabledStyles) {
|
|
1842
|
+
newComponents[className]["@apply " + group + "disabled:text-on-surface/[" + disabledStyles.textOpacity + "]"] = {};
|
|
1843
|
+
newComponents[className]["@apply " + group + "disabled:bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {};
|
|
1844
|
+
}
|
|
1845
|
+
}
|
|
1846
|
+
}
|
|
1847
|
+
for (var _iterator2 = _createForOfIteratorHelperLoose(colorKeys), _step2; !(_step2 = _iterator2()).done;) {
|
|
1848
|
+
var _colorName = _step2.value;
|
|
1849
|
+
for (var _i2 = 0, _arr2 = ['hover', 'active', 'focus', 'disabled']; _i2 < _arr2.length; _i2++) {
|
|
1850
|
+
var stateName = _arr2[_i2];
|
|
1851
|
+
var _className = "." + stateName + "-" + statePrefix + "-" + _colorName;
|
|
1852
|
+
if (stateName === 'active' || stateName === 'focus') {
|
|
1853
|
+
var _newComponents$_class;
|
|
1854
|
+
newComponents[_className] = (_newComponents$_class = {}, _newComponents$_class["@apply bg-" + _colorName + "/[0.12]"] = {}, _newComponents$_class);
|
|
1855
|
+
} else if (stateName === 'hover') {
|
|
1856
|
+
var _newComponents$_class2;
|
|
1857
|
+
newComponents[_className] = (_newComponents$_class2 = {}, _newComponents$_class2["@apply bg-" + _colorName + "/[0.08]"] = {}, _newComponents$_class2);
|
|
1858
|
+
} else if (stateName === 'disabled') {
|
|
1859
|
+
var _newComponents$_class3, _newComponents$_class4;
|
|
1860
|
+
newComponents[_className] = (_newComponents$_class3 = {}, _newComponents$_class3["@apply text-on-surface/[" + disabledStyles.textOpacity + "]"] = {}, _newComponents$_class3);
|
|
1861
|
+
newComponents[_className] = (_newComponents$_class4 = {}, _newComponents$_class4["@apply bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {}, _newComponents$_class4);
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
}
|
|
1865
|
+
addComponents(newComponents);
|
|
1866
|
+
};
|
|
1867
|
+
|
|
1868
|
+
var themer = function themer(colors, darkMode) {
|
|
1869
|
+
var options = {
|
|
1870
|
+
defaultTheme: {
|
|
1871
|
+
extend: {
|
|
1872
|
+
colors: {}
|
|
1873
|
+
}
|
|
1874
|
+
},
|
|
1875
|
+
themes: [{
|
|
1876
|
+
name: 'darkTheme',
|
|
1877
|
+
extend: {
|
|
1878
|
+
colors: {}
|
|
1879
|
+
}
|
|
1880
|
+
}]
|
|
1881
|
+
};
|
|
1882
|
+
Object.entries(colors).forEach(function (_ref) {
|
|
1883
|
+
var key = _ref[0],
|
|
1884
|
+
value = _ref[1];
|
|
1885
|
+
options.defaultTheme.extend.colors[key] = value.light;
|
|
1886
|
+
options.themes[0].extend.colors[key] = value.dark;
|
|
1887
|
+
});
|
|
1888
|
+
options.themes[0].selectors = darkMode === 'class' ? ['.dark-mode', '[data-theme="dark"]'] : undefined;
|
|
1889
|
+
options.themes[0].mediaQuery = darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined;
|
|
1890
|
+
return require('tailwindcss-themer')(options);
|
|
1891
|
+
};
|
|
1892
|
+
|
|
1893
|
+
var font = function font(fontStyles, responsiveBreakPoints) {
|
|
1894
|
+
var createUtilities = function createUtilities(_ref) {
|
|
1895
|
+
var theme = _ref.theme;
|
|
1896
|
+
var pixelUnit = 'rem';
|
|
1897
|
+
var newUtilities = {};
|
|
1898
|
+
var baseTextStyle = function baseTextStyle(sizeValue) {
|
|
1899
|
+
return {
|
|
1900
|
+
fontSize: sizeValue.fontSize + pixelUnit,
|
|
1901
|
+
fontWeight: sizeValue.fontWeight,
|
|
1902
|
+
lineHeight: sizeValue.lineHeight + pixelUnit,
|
|
1903
|
+
letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
|
|
1904
|
+
fontFamily: theme('fontFamily.' + sizeValue.fontFamily)
|
|
1905
|
+
};
|
|
1906
|
+
};
|
|
1907
|
+
var responsiveTextStyle = function responsiveTextStyle(sizeValue, breakPointName, breakPointRatio) {
|
|
1908
|
+
var _ref2;
|
|
1909
|
+
return _ref2 = {}, _ref2["@media (min-width: " + theme('screens.' + breakPointName, {}) + ")"] = {
|
|
1910
|
+
fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
|
|
1911
|
+
lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
|
|
1912
|
+
}, _ref2;
|
|
1913
|
+
};
|
|
1914
|
+
for (var _i = 0, _Object$entries = Object.entries(fontStyles); _i < _Object$entries.length; _i++) {
|
|
1915
|
+
var _Object$entries$_i = _Object$entries[_i],
|
|
1916
|
+
roleName = _Object$entries$_i[0],
|
|
1917
|
+
roleValue = _Object$entries$_i[1];
|
|
1918
|
+
var _loop = function _loop() {
|
|
1919
|
+
var _Object$entries2$_i = _Object$entries2[_i2],
|
|
1920
|
+
sizeName = _Object$entries2$_i[0],
|
|
1921
|
+
sizeValue = _Object$entries2$_i[1];
|
|
1922
|
+
newUtilities['.text-' + roleName + '-' + sizeName] = _extends({}, baseTextStyle(sizeValue), Object.entries(responsiveBreakPoints).reduce(function (acc, _ref3) {
|
|
1923
|
+
var breakPointName = _ref3[0],
|
|
1924
|
+
breakPointRatio = _ref3[1];
|
|
1925
|
+
acc = _extends({}, acc, responsiveTextStyle(sizeValue, breakPointName, breakPointRatio));
|
|
1926
|
+
return acc;
|
|
1927
|
+
}, {}));
|
|
1928
|
+
};
|
|
1929
|
+
for (var _i2 = 0, _Object$entries2 = Object.entries(roleValue); _i2 < _Object$entries2.length; _i2++) {
|
|
1930
|
+
_loop();
|
|
1931
|
+
}
|
|
1932
|
+
}
|
|
1933
|
+
return newUtilities;
|
|
1934
|
+
};
|
|
1935
|
+
return plugin(function (_ref4) {
|
|
1936
|
+
var addUtilities = _ref4.addUtilities,
|
|
1937
|
+
theme = _ref4.theme;
|
|
1938
|
+
var newUtilities = createUtilities({
|
|
1939
|
+
theme: theme
|
|
1940
|
+
});
|
|
1941
|
+
addUtilities(newUtilities);
|
|
1942
|
+
});
|
|
1943
|
+
};
|
|
1944
|
+
|
|
1945
|
+
var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
|
|
1946
|
+
function TailwindPlugin(appService, options) {
|
|
1947
|
+
var _options$darkMode, _options$responsiveBr;
|
|
1948
|
+
var _this;
|
|
1949
|
+
(_options$darkMode = options.darkMode) != null ? _options$darkMode : options.darkMode = 'class';
|
|
1950
|
+
(_options$responsiveBr = options.responsiveBreakPoints) != null ? _options$responsiveBr : options.responsiveBreakPoints = {
|
|
1951
|
+
lg: 1.125
|
|
1952
|
+
};
|
|
1953
|
+
_this = _PluginAbstract.call(this) || this;
|
|
1954
|
+
_this.appService = void 0;
|
|
1955
|
+
_this.options = void 0;
|
|
1956
|
+
_this.appService = appService;
|
|
1957
|
+
_this.options = options;
|
|
1958
|
+
return _this;
|
|
1959
|
+
}
|
|
1960
|
+
_inheritsLoose(TailwindPlugin, _PluginAbstract);
|
|
1961
|
+
TailwindPlugin.config = function config(options) {
|
|
1962
|
+
return options;
|
|
1963
|
+
};
|
|
1964
|
+
var _proto = TailwindPlugin.prototype;
|
|
1965
|
+
_proto.getTheme = function getTheme() {
|
|
1966
|
+
var colors = {};
|
|
1967
|
+
for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
|
|
1968
|
+
var isDark = _arr[_i];
|
|
1969
|
+
this.appService.themeService.update({
|
|
1970
|
+
isDark: isDark
|
|
1971
|
+
});
|
|
1972
|
+
for (var _iterator = _createForOfIteratorHelperLoose(this.appService.colorService.getColors().entries()), _step; !(_step = _iterator()).done;) {
|
|
1973
|
+
var _colors$newKey;
|
|
1974
|
+
var _step$value = _step.value,
|
|
1975
|
+
key = _step$value[0],
|
|
1976
|
+
value = _step$value[1];
|
|
1977
|
+
var newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
|
|
1978
|
+
(_colors$newKey = colors[newKey]) != null ? _colors$newKey : colors[newKey] = {
|
|
1979
|
+
light: '',
|
|
1980
|
+
dark: ''
|
|
1981
|
+
};
|
|
1982
|
+
colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
|
|
1983
|
+
}
|
|
1984
|
+
}
|
|
1985
|
+
var _this$appService$plug = this.appService.pluginService.getPlugin(FontPlugin).getFonts(),
|
|
1986
|
+
fontStyles = _this$appService$plug.fontStyles,
|
|
1987
|
+
fontFamily = _this$appService$plug.fontFamily;
|
|
1988
|
+
return {
|
|
1989
|
+
colors: {},
|
|
1990
|
+
fontFamily: fontFamily,
|
|
1991
|
+
plugins: [state(Object.keys(colors)), themer(colors, this.options.darkMode), font(fontStyles, this.options.responsiveBreakPoints)]
|
|
1992
|
+
};
|
|
1993
|
+
};
|
|
1994
|
+
return TailwindPlugin;
|
|
1995
|
+
}(PluginAbstract);
|
|
1996
|
+
TailwindPlugin.dependencies = [FontPlugin];
|
|
1997
|
+
|
|
1998
|
+
var createTheme = function createTheme() {
|
|
1999
|
+
var app = bootstrapFromConfig();
|
|
2000
|
+
var plugin = app.pluginService.getPlugin(TailwindPlugin);
|
|
2001
|
+
if (!plugin) {
|
|
2002
|
+
throw new Error('Tailwind plugin not found');
|
|
2003
|
+
}
|
|
2004
|
+
return _extends({}, plugin.getTheme(), {
|
|
2005
|
+
appService: app
|
|
2006
|
+
});
|
|
2007
|
+
};
|
|
2008
|
+
|
|
2009
|
+
export { AppContainer, AppModule, AppService, ColorEntity, ColorManagerService, ColorModule, ColorService, ConfigModule, ConfigService, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginModule, PluginService, SchemeEntity, SchemeService, TailwindPlugin, ThemeModule, ThemeService, ToneDeltaPair, VariantEntity, VariantModel, VariantService, bootstrap, bootstrapFromConfig, createTheme, defaultColors, defineConfig, getRotatedHue, highestSurface, importContainer, state, themer };
|
|
1306
2010
|
//# sourceMappingURL=theme.esm.js.map
|