tailwind-oklch 0.1.0
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/LICENSE +7 -0
- package/index.css +281 -0
- package/package.json +31 -0
- package/plugin.js +71 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
Copyright 2026 Michael Snook
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
|
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
+
|
|
7
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/index.css
ADDED
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
/* tailwind-oklch — OKLCH color composition system for Tailwind v4
|
|
2
|
+
*
|
|
3
|
+
* Usage:
|
|
4
|
+
* @import "tailwindcss";
|
|
5
|
+
* @import "tailwind-oklch";
|
|
6
|
+
* @plugin "tailwind-oklch/plugin";
|
|
7
|
+
*
|
|
8
|
+
* Every setter utility (bg-lu-*, bg-c-*, bg-h-*) both updates its
|
|
9
|
+
* axis variable AND applies the resolved oklch() color. Defaults
|
|
10
|
+
* cascade from :root, so a single class like `bg-lu-5` immediately
|
|
11
|
+
* produces a visible color — no helper class needed.
|
|
12
|
+
*
|
|
13
|
+
* Luminance scale: 0–10, anchored to the page surface.
|
|
14
|
+
* 0 / base = page surface (light in light mode, dark in dark mode)
|
|
15
|
+
* 10 / fore = maximum contrast with the surface
|
|
16
|
+
* 1–9 = evenly distributed between those endpoints
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
@theme {
|
|
20
|
+
/* ── Hue Definitions ─────────────────────────────────────────────────
|
|
21
|
+
Change these to re-theme your entire app. */
|
|
22
|
+
--hue-primary: 233;
|
|
23
|
+
--hue-accent: 350;
|
|
24
|
+
--hue-success: 145;
|
|
25
|
+
--hue-warning: 55;
|
|
26
|
+
--hue-danger: 15;
|
|
27
|
+
--hue-info: 220;
|
|
28
|
+
--hue-neutral: 260;
|
|
29
|
+
|
|
30
|
+
/* ── Luminance Range ───────────────────────────────────────────────
|
|
31
|
+
Defines the OKLCH lightness endpoints for the 0–10 scale.
|
|
32
|
+
Dark-mode defaults: base/0 is near black, fore/10 is near white.
|
|
33
|
+
Override --lu-range-start and --lu-range-end to shift the range. */
|
|
34
|
+
--lu-range-start: 0.12;
|
|
35
|
+
--lu-range-end: 0.92;
|
|
36
|
+
|
|
37
|
+
/* ── 0–10 Luminance Scale ──────────────────────────────────────────
|
|
38
|
+
Computed: step N = start + (end - start) × (N / 10)
|
|
39
|
+
Dark mode (default): 0→0.12, 5→0.52, 10→0.92
|
|
40
|
+
Light mode (override): 0→0.95, 5→0.55, 10→0.15 */
|
|
41
|
+
--l-0: 0.12;
|
|
42
|
+
--l-1: 0.20;
|
|
43
|
+
--l-2: 0.28;
|
|
44
|
+
--l-3: 0.36;
|
|
45
|
+
--l-4: 0.44;
|
|
46
|
+
--l-5: 0.52;
|
|
47
|
+
--l-6: 0.60;
|
|
48
|
+
--l-7: 0.68;
|
|
49
|
+
--l-8: 0.76;
|
|
50
|
+
--l-9: 0.84;
|
|
51
|
+
--l-10: 0.92;
|
|
52
|
+
|
|
53
|
+
/* Semantic aliases */
|
|
54
|
+
--l-base: 0.12;
|
|
55
|
+
--l-fore: 0.92;
|
|
56
|
+
|
|
57
|
+
/* ── Named Chroma Stops ──────────────────────────────────────────────
|
|
58
|
+
OKLCH chroma: practical range 0–0.25 */
|
|
59
|
+
--c-lo: 0.02;
|
|
60
|
+
--c-mlo: 0.06;
|
|
61
|
+
--c-mid: 0.12;
|
|
62
|
+
--c-mhi: 0.18;
|
|
63
|
+
--c-hi: 0.25;
|
|
64
|
+
|
|
65
|
+
/* ── Numeric Chroma Scale ────────────────────────────────────────── */
|
|
66
|
+
--c-10: 0.03;
|
|
67
|
+
--c-20: 0.06;
|
|
68
|
+
--c-30: 0.09;
|
|
69
|
+
--c-40: 0.12;
|
|
70
|
+
--c-50: 0.15;
|
|
71
|
+
--c-60: 0.18;
|
|
72
|
+
--c-70: 0.21;
|
|
73
|
+
--c-80: 0.24;
|
|
74
|
+
--c-90: 0.27;
|
|
75
|
+
--c-95: 0.30;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ── Light-mode luminance range ────────────────────────────────────────
|
|
79
|
+
Flipping the range makes 0/base = near white, 10/fore = near black.
|
|
80
|
+
All 0–10 stops are recalculated accordingly. */
|
|
81
|
+
|
|
82
|
+
:root:not(.dark) {
|
|
83
|
+
--lu-range-start: 0.95;
|
|
84
|
+
--lu-range-end: 0.15;
|
|
85
|
+
|
|
86
|
+
--l-0: 0.95;
|
|
87
|
+
--l-1: 0.87;
|
|
88
|
+
--l-2: 0.79;
|
|
89
|
+
--l-3: 0.71;
|
|
90
|
+
--l-4: 0.63;
|
|
91
|
+
--l-5: 0.55;
|
|
92
|
+
--l-6: 0.47;
|
|
93
|
+
--l-7: 0.39;
|
|
94
|
+
--l-8: 0.31;
|
|
95
|
+
--l-9: 0.23;
|
|
96
|
+
--l-10: 0.15;
|
|
97
|
+
|
|
98
|
+
--l-base: 0.95;
|
|
99
|
+
--l-fore: 0.15;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ── Cascade Defaults ────────────────────────────────────────────────────
|
|
103
|
+
Sensible fallbacks so any single-axis setter immediately resolves.
|
|
104
|
+
These inherit down the DOM tree, so a parent's bg-h-accent
|
|
105
|
+
naturally flows to children that only set bg-lu-* or bg-c-*. */
|
|
106
|
+
|
|
107
|
+
:root {
|
|
108
|
+
--bg-l: var(--l-5);
|
|
109
|
+
--bg-c: var(--c-lo);
|
|
110
|
+
--bg-h: var(--hue-primary);
|
|
111
|
+
|
|
112
|
+
--tx-l: var(--l-fore);
|
|
113
|
+
--tx-c: var(--c-lo);
|
|
114
|
+
--tx-h: var(--hue-primary);
|
|
115
|
+
|
|
116
|
+
--bd-l: var(--l-3);
|
|
117
|
+
--bd-c: var(--c-lo);
|
|
118
|
+
--bd-h: var(--hue-primary);
|
|
119
|
+
|
|
120
|
+
--ac-l: var(--l-5);
|
|
121
|
+
--ac-c: var(--c-mid);
|
|
122
|
+
--ac-h: var(--hue-primary);
|
|
123
|
+
|
|
124
|
+
--gf-l: var(--l-5);
|
|
125
|
+
--gf-c: var(--c-mid);
|
|
126
|
+
--gf-h: var(--hue-primary);
|
|
127
|
+
|
|
128
|
+
--gt-l: var(--l-5);
|
|
129
|
+
--gt-c: var(--c-mid);
|
|
130
|
+
--gt-h: var(--hue-primary);
|
|
131
|
+
|
|
132
|
+
--sh-l: var(--l-5);
|
|
133
|
+
--sh-c: var(--c-lo);
|
|
134
|
+
--sh-h: var(--hue-primary);
|
|
135
|
+
|
|
136
|
+
--bdb-l: var(--l-3);
|
|
137
|
+
--bdb-c: var(--c-lo);
|
|
138
|
+
--bdb-h: var(--hue-primary);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* ── Background ──────────────────────────────────────────────────────── */
|
|
142
|
+
|
|
143
|
+
@utility bg-lu-* {
|
|
144
|
+
--bg-l: --value(--l-*);
|
|
145
|
+
background-color: oklch(var(--bg-l) var(--bg-c) var(--bg-h));
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@utility bg-c-* {
|
|
149
|
+
--bg-c: --value(--c-*);
|
|
150
|
+
background-color: oklch(var(--bg-l) var(--bg-c) var(--bg-h));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@utility bg-h-* {
|
|
154
|
+
--bg-h: --value(--hue-*);
|
|
155
|
+
background-color: oklch(var(--bg-l) var(--bg-c) var(--bg-h));
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* ── Text ────────────────────────────────────────────────────────────── */
|
|
159
|
+
|
|
160
|
+
@utility text-lu-* {
|
|
161
|
+
--tx-l: --value(--l-*);
|
|
162
|
+
color: oklch(var(--tx-l) var(--tx-c) var(--tx-h));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@utility text-c-* {
|
|
166
|
+
--tx-c: --value(--c-*);
|
|
167
|
+
color: oklch(var(--tx-l) var(--tx-c) var(--tx-h));
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@utility text-h-* {
|
|
171
|
+
--tx-h: --value(--hue-*);
|
|
172
|
+
color: oklch(var(--tx-l) var(--tx-c) var(--tx-h));
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* ── Border ──────────────────────────────────────────────────────────── */
|
|
176
|
+
|
|
177
|
+
@utility border-lu-* {
|
|
178
|
+
--bd-l: --value(--l-*);
|
|
179
|
+
border-color: oklch(var(--bd-l) var(--bd-c) var(--bd-h));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@utility border-c-* {
|
|
183
|
+
--bd-c: --value(--c-*);
|
|
184
|
+
border-color: oklch(var(--bd-l) var(--bd-c) var(--bd-h));
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@utility border-h-* {
|
|
188
|
+
--bd-h: --value(--hue-*);
|
|
189
|
+
border-color: oklch(var(--bd-l) var(--bd-c) var(--bd-h));
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* ── Accent Color ────────────────────────────────────────────────────── */
|
|
193
|
+
|
|
194
|
+
@utility accent-lu-* {
|
|
195
|
+
--ac-l: --value(--l-*);
|
|
196
|
+
accent-color: oklch(var(--ac-l) var(--ac-c) var(--ac-h));
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@utility accent-c-* {
|
|
200
|
+
--ac-c: --value(--c-*);
|
|
201
|
+
accent-color: oklch(var(--ac-l) var(--ac-c) var(--ac-h));
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@utility accent-h-* {
|
|
205
|
+
--ac-h: --value(--hue-*);
|
|
206
|
+
accent-color: oklch(var(--ac-l) var(--ac-c) var(--ac-h));
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* ── Gradient From ───────────────────────────────────────────────────── */
|
|
210
|
+
|
|
211
|
+
@utility from-lu-* {
|
|
212
|
+
--gf-l: --value(--l-*);
|
|
213
|
+
--tw-gradient-from: oklch(var(--gf-l) var(--gf-c) var(--gf-h));
|
|
214
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@utility from-c-* {
|
|
218
|
+
--gf-c: --value(--c-*);
|
|
219
|
+
--tw-gradient-from: oklch(var(--gf-l) var(--gf-c) var(--gf-h));
|
|
220
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@utility from-h-* {
|
|
224
|
+
--gf-h: --value(--hue-*);
|
|
225
|
+
--tw-gradient-from: oklch(var(--gf-l) var(--gf-c) var(--gf-h));
|
|
226
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* ── Gradient To ─────────────────────────────────────────────────────── */
|
|
230
|
+
|
|
231
|
+
@utility to-lu-* {
|
|
232
|
+
--gt-l: --value(--l-*);
|
|
233
|
+
--tw-gradient-to: oklch(var(--gt-l) var(--gt-c) var(--gt-h));
|
|
234
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@utility to-c-* {
|
|
238
|
+
--gt-c: --value(--c-*);
|
|
239
|
+
--tw-gradient-to: oklch(var(--gt-l) var(--gt-c) var(--gt-h));
|
|
240
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
@utility to-h-* {
|
|
244
|
+
--gt-h: --value(--hue-*);
|
|
245
|
+
--tw-gradient-to: oklch(var(--gt-l) var(--gt-c) var(--gt-h));
|
|
246
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* ── Shadow Color ────────────────────────────────────────────────────── */
|
|
250
|
+
|
|
251
|
+
@utility shadow-lu-* {
|
|
252
|
+
--sh-l: --value(--l-*);
|
|
253
|
+
--tw-shadow-color: oklch(var(--sh-l) var(--sh-c) var(--sh-h));
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@utility shadow-c-* {
|
|
257
|
+
--sh-c: --value(--c-*);
|
|
258
|
+
--tw-shadow-color: oklch(var(--sh-l) var(--sh-c) var(--sh-h));
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
@utility shadow-h-* {
|
|
262
|
+
--sh-h: --value(--hue-*);
|
|
263
|
+
--tw-shadow-color: oklch(var(--sh-l) var(--sh-c) var(--sh-h));
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* ── Border Bottom ───────────────────────────────────────────────────── */
|
|
267
|
+
|
|
268
|
+
@utility border-b-lu-* {
|
|
269
|
+
--bdb-l: --value(--l-*);
|
|
270
|
+
border-bottom-color: oklch(var(--bdb-l) var(--bdb-c) var(--bdb-h));
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@utility border-b-c-* {
|
|
274
|
+
--bdb-c: --value(--c-*);
|
|
275
|
+
border-bottom-color: oklch(var(--bdb-l) var(--bdb-c) var(--bdb-h));
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@utility border-b-h-* {
|
|
279
|
+
--bdb-h: --value(--hue-*);
|
|
280
|
+
border-bottom-color: oklch(var(--bdb-l) var(--bdb-c) var(--bdb-h));
|
|
281
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tailwind-oklch",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "OKLCH color composition system for Tailwind CSS v4",
|
|
5
|
+
"style": "index.css",
|
|
6
|
+
"main": "index.css",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./index.css",
|
|
9
|
+
"./plugin": "./plugin.js"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"index.css",
|
|
13
|
+
"plugin.js"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"format": "oxfmt --write \"demo/src/**/*.{ts,tsx,js,mjs}\" \"demo/astro.config.mjs\""
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"tailwindcss": ">=4.0.0"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [
|
|
22
|
+
"tailwindcss",
|
|
23
|
+
"oklch",
|
|
24
|
+
"color",
|
|
25
|
+
"plugin"
|
|
26
|
+
],
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"oxfmt": "^0.32.0"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/plugin.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tailwind-oklch shorthand generator
|
|
3
|
+
*
|
|
4
|
+
* Generates .{prop}-{L}-{C}-{H} utilities for all combinations of
|
|
5
|
+
* the 0–10 luminance scale × chroma × hue stops across bg/text/border.
|
|
6
|
+
*
|
|
7
|
+
* Each shorthand sets the three axis variables AND applies the
|
|
8
|
+
* resolved color, so children can inherit and override single axes
|
|
9
|
+
* via decomposed utilities (e.g. hover:bg-lu-8).
|
|
10
|
+
*
|
|
11
|
+
* Load via: @plugin "tailwind-oklch/plugin";
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
module.exports = function ({ addUtilities }) {
|
|
15
|
+
const luminances = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'base', 'fore'];
|
|
16
|
+
const chromas = ['lo', 'mlo', 'mid', 'mhi', 'hi'];
|
|
17
|
+
const hues = ['primary', 'accent', 'success', 'warning', 'danger', 'info', 'neutral'];
|
|
18
|
+
|
|
19
|
+
// Map each prefix to its CSS property and internal variable names
|
|
20
|
+
const properties = [
|
|
21
|
+
{ prefix: 'bg', css: 'background-color', vars: ['--bg-l', '--bg-c', '--bg-h'] },
|
|
22
|
+
{ prefix: 'text', css: 'color', vars: ['--tx-l', '--tx-c', '--tx-h'] },
|
|
23
|
+
{ prefix: 'border', css: 'border-color', vars: ['--bd-l', '--bd-c', '--bd-h'] },
|
|
24
|
+
{ prefix: 'accent', css: 'accent-color', vars: ['--ac-l', '--ac-c', '--ac-h'] },
|
|
25
|
+
{ prefix: 'border-b', css: 'border-bottom-color', vars: ['--bdb-l', '--bdb-c', '--bdb-h'] },
|
|
26
|
+
];
|
|
27
|
+
|
|
28
|
+
const utilities = {};
|
|
29
|
+
|
|
30
|
+
for (const prop of properties) {
|
|
31
|
+
for (const l of luminances) {
|
|
32
|
+
for (const c of chromas) {
|
|
33
|
+
for (const h of hues) {
|
|
34
|
+
utilities[`.${prop.prefix}-${l}-${c}-${h}`] = {
|
|
35
|
+
[prop.vars[0]]: `var(--l-${l})`,
|
|
36
|
+
[prop.vars[1]]: `var(--c-${c})`,
|
|
37
|
+
[prop.vars[2]]: `var(--hue-${h})`,
|
|
38
|
+
[prop.css]: `oklch(var(${prop.vars[0]}) var(${prop.vars[1]}) var(${prop.vars[2]}))`,
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Gradient from/to shorthands — must compose --tw-gradient-stops
|
|
46
|
+
// to match Tailwind v4's internal gradient plumbing
|
|
47
|
+
const stopsExpr = 'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))';
|
|
48
|
+
|
|
49
|
+
for (const l of luminances) {
|
|
50
|
+
for (const c of chromas) {
|
|
51
|
+
for (const h of hues) {
|
|
52
|
+
utilities[`.from-${l}-${c}-${h}`] = {
|
|
53
|
+
'--gf-l': `var(--l-${l})`,
|
|
54
|
+
'--gf-c': `var(--c-${c})`,
|
|
55
|
+
'--gf-h': `var(--hue-${h})`,
|
|
56
|
+
'--tw-gradient-from': `oklch(var(--gf-l) var(--gf-c) var(--gf-h))`,
|
|
57
|
+
'--tw-gradient-stops': stopsExpr,
|
|
58
|
+
};
|
|
59
|
+
utilities[`.to-${l}-${c}-${h}`] = {
|
|
60
|
+
'--gt-l': `var(--l-${l})`,
|
|
61
|
+
'--gt-c': `var(--c-${c})`,
|
|
62
|
+
'--gt-h': `var(--hue-${h})`,
|
|
63
|
+
'--tw-gradient-to': `oklch(var(--gt-l) var(--gt-c) var(--gt-h))`,
|
|
64
|
+
'--tw-gradient-stops': stopsExpr,
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
addUtilities(utilities);
|
|
71
|
+
};
|