@sps-woodland/tokens 7.0.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/README.md +128 -0
- package/config/config.js +89 -0
- package/config/config.js.map +1 -0
- package/config/formats/fontFace.js +73 -0
- package/config/formats/fontFace.js.map +1 -0
- package/config/formats/jsSimpleObject.js +59 -0
- package/config/formats/jsSimpleObject.js.map +1 -0
- package/config/formats/utility-class-builders/color.js +25 -0
- package/config/formats/utility-class-builders/color.js.map +1 -0
- package/config/formats/utility-class-builders/grid.js +31 -0
- package/config/formats/utility-class-builders/grid.js.map +1 -0
- package/config/formats/utility-class-builders/icon.js +26 -0
- package/config/formats/utility-class-builders/icon.js.map +1 -0
- package/config/formats/utility-class-builders/iconSize.js +15 -0
- package/config/formats/utility-class-builders/iconSize.js.map +1 -0
- package/config/formats/utility-class-builders/spacing.js +44 -0
- package/config/formats/utility-class-builders/spacing.js.map +1 -0
- package/config/formats/utility-class-builders/typeSize.js +30 -0
- package/config/formats/utility-class-builders/typeSize.js.map +1 -0
- package/config/formats/utility-class-builders/typeWeight.js +15 -0
- package/config/formats/utility-class-builders/typeWeight.js.map +1 -0
- package/config/formats/utilityClasses.js +91 -0
- package/config/formats/utilityClasses.js.map +1 -0
- package/config/formats/utils.js +19 -0
- package/config/formats/utils.js.map +1 -0
- package/config/formats/vanillaExtractSprinkleValues.js +86 -0
- package/config/formats/vanillaExtractSprinkleValues.js.map +1 -0
- package/config/transforms/attrFont.js +23 -0
- package/config/transforms/attrFont.js.map +1 -0
- package/config/transforms/attrGridColumns.js +20 -0
- package/config/transforms/attrGridColumns.js.map +1 -0
- package/config-src/config.js.map +1 -0
- package/config-src/config.ts +89 -0
- package/config-src/formats/fontFace.js.map +1 -0
- package/config-src/formats/fontFace.ts +68 -0
- package/config-src/formats/jsSimpleObject.js.map +1 -0
- package/config-src/formats/jsSimpleObject.ts +32 -0
- package/config-src/formats/utility-class-builders/UtilityClassBuilder.d.ts +7 -0
- package/config-src/formats/utility-class-builders/color.js.map +1 -0
- package/config-src/formats/utility-class-builders/color.ts +24 -0
- package/config-src/formats/utility-class-builders/grid.js.map +1 -0
- package/config-src/formats/utility-class-builders/grid.ts +30 -0
- package/config-src/formats/utility-class-builders/icon.js.map +1 -0
- package/config-src/formats/utility-class-builders/icon.ts +26 -0
- package/config-src/formats/utility-class-builders/iconSize.js.map +1 -0
- package/config-src/formats/utility-class-builders/iconSize.ts +13 -0
- package/config-src/formats/utility-class-builders/spacing.js.map +1 -0
- package/config-src/formats/utility-class-builders/spacing.ts +44 -0
- package/config-src/formats/utility-class-builders/typeSize.js.map +1 -0
- package/config-src/formats/utility-class-builders/typeSize.ts +30 -0
- package/config-src/formats/utility-class-builders/typeWeight.js.map +1 -0
- package/config-src/formats/utility-class-builders/typeWeight.ts +13 -0
- package/config-src/formats/utilityClasses.js.map +1 -0
- package/config-src/formats/utilityClasses.ts +77 -0
- package/config-src/formats/utils.js.map +1 -0
- package/config-src/formats/utils.ts +14 -0
- package/config-src/formats/vanillaExtractSprinkleValues.js.map +1 -0
- package/config-src/formats/vanillaExtractSprinkleValues.ts +73 -0
- package/config-src/transforms/attrFont.js.map +1 -0
- package/config-src/transforms/attrFont.ts +24 -0
- package/config-src/transforms/attrGridColumns.js.map +1 -0
- package/config-src/transforms/attrGridColumns.ts +15 -0
- package/config-src/tsconfig.json +22 -0
- package/lib/css/tokens.css +668 -0
- package/lib/css/utils.css +1318 -0
- package/lib/dictionary.d.ts +33847 -0
- package/lib/font.css +102 -0
- package/lib/index.cjs.js +1 -0
- package/lib/index.d.ts +8 -0
- package/lib/index.es.js +1611 -0
- package/lib/scss/tokens.scss +665 -0
- package/lib/scss/utils.scss +1318 -0
- package/lib/tokens.d.ts +1389 -0
- package/lib/types.d.ts +5 -0
- package/lib/utils/pxToRem.d.ts +5 -0
- package/lib/utils/rem.d.ts +7 -0
- package/lib/utils/transparentEquivalentColor.d.ts +29 -0
- package/lib/vanilla-extract/border.css.d.ts +37 -0
- package/lib/vanilla-extract/grid.css.d.ts +15 -0
- package/lib/vanilla-extract/properties/border.css.d.ts +1397 -0
- package/lib/vanilla-extract/properties/color.css.d.ts +464 -0
- package/lib/vanilla-extract/properties/conditions.d.ts +27 -0
- package/lib/vanilla-extract/properties/grid.css.d.ts +55 -0
- package/lib/vanilla-extract/properties/margin.css.d.ts +321 -0
- package/lib/vanilla-extract/properties/padding.css.d.ts +321 -0
- package/lib/vanilla-extract/properties/type.css.d.ts +80 -0
- package/lib/vanilla-extract/sprinkleValues.d.ts +1114 -0
- package/lib/vanilla-extract/sprinkles.css.d.ts +5267 -0
- package/lib/vanilla-extract/style.css +1 -0
- package/package.json +37 -0
- package/src/dictionary.ts +46007 -0
- package/src/index.ts +8 -0
- package/src/tokens.ts +785 -0
- package/src/types.ts +6 -0
- package/src/utils/pxToRem.ts +7 -0
- package/src/utils/rem.ts +27 -0
- package/src/utils/transparentEquivalentColor.ts +42 -0
- package/src/vanilla-extract/border.css.ts +46 -0
- package/src/vanilla-extract/grid.css.ts +49 -0
- package/src/vanilla-extract/properties/border.css.ts +33 -0
- package/src/vanilla-extract/properties/color.css.ts +16 -0
- package/src/vanilla-extract/properties/conditions.ts +14 -0
- package/src/vanilla-extract/properties/grid.css.ts +13 -0
- package/src/vanilla-extract/properties/margin.css.ts +40 -0
- package/src/vanilla-extract/properties/padding.css.ts +40 -0
- package/src/vanilla-extract/properties/type.css.ts +17 -0
- package/src/vanilla-extract/sprinkleValues.ts +605 -0
- package/src/vanilla-extract/sprinkles.css.ts +19 -0
- package/tsconfig.json +13 -0
- package/vite.config.js +21 -0
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const style_dictionary_1 = __importDefault(require("style-dictionary"));
|
|
30
|
+
const prettier = __importStar(require("prettier"));
|
|
31
|
+
const utils_1 = require("./utils");
|
|
32
|
+
const color_1 = require("./utility-class-builders/color");
|
|
33
|
+
const grid_1 = require("./utility-class-builders/grid");
|
|
34
|
+
const icon_1 = require("./utility-class-builders/icon");
|
|
35
|
+
const iconSize_1 = require("./utility-class-builders/iconSize");
|
|
36
|
+
const spacing_1 = require("./utility-class-builders/spacing");
|
|
37
|
+
const typeSize_1 = require("./utility-class-builders/typeSize");
|
|
38
|
+
const typeWeight_1 = require("./utility-class-builders/typeWeight");
|
|
39
|
+
const classBuilders = [
|
|
40
|
+
color_1.colorClasses,
|
|
41
|
+
grid_1.gridClasses,
|
|
42
|
+
icon_1.iconClasses,
|
|
43
|
+
iconSize_1.iconSizeClasses,
|
|
44
|
+
spacing_1.spacingClasses,
|
|
45
|
+
typeSize_1.typeSizeClasses,
|
|
46
|
+
typeWeight_1.typeWeightClasses,
|
|
47
|
+
];
|
|
48
|
+
function variableReference(varName, format) {
|
|
49
|
+
switch (format) {
|
|
50
|
+
case "css":
|
|
51
|
+
return `var(--${varName})`;
|
|
52
|
+
case "scss":
|
|
53
|
+
return `$${varName}`;
|
|
54
|
+
default:
|
|
55
|
+
throw new Error(`Unknown format: ${format}`);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function addVariableReferences(allTokens, format) {
|
|
59
|
+
for (const token of allTokens) {
|
|
60
|
+
token.variableReference = variableReference(token.name, format);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
function buildClasses(token, dictionary) {
|
|
64
|
+
const applicableBuilder = classBuilders.find((builder) => builder.appliesTo(token));
|
|
65
|
+
if (applicableBuilder) {
|
|
66
|
+
return (0, utils_1.trim)(applicableBuilder.build(token, dictionary));
|
|
67
|
+
}
|
|
68
|
+
// console.log("unhandled:", token);
|
|
69
|
+
return "";
|
|
70
|
+
}
|
|
71
|
+
["css", "scss"].forEach((lang) => {
|
|
72
|
+
style_dictionary_1.default.registerFormat({
|
|
73
|
+
name: `${lang}/utility-classes`,
|
|
74
|
+
formatter({ file, dictionary }) {
|
|
75
|
+
addVariableReferences(dictionary.allTokens, lang);
|
|
76
|
+
const builtClasses = dictionary.allTokens
|
|
77
|
+
.map((token) => buildClasses(token, dictionary))
|
|
78
|
+
.join("\n");
|
|
79
|
+
const staticClasses = classBuilders
|
|
80
|
+
.map((builder) => builder.staticClasses)
|
|
81
|
+
.filter(Boolean)
|
|
82
|
+
.join("\n");
|
|
83
|
+
return prettier.format(`
|
|
84
|
+
${style_dictionary_1.default.formatHelpers.fileHeader({ file })}
|
|
85
|
+
${builtClasses}
|
|
86
|
+
${staticClasses}
|
|
87
|
+
`, { parser: lang });
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
//# sourceMappingURL=utilityClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utilityClasses.js","sourceRoot":"","sources":["../../config-src/formats/utilityClasses.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAE/C,mDAAqC;AACrC,mCAA+B;AAE/B,0DAA8D;AAC9D,wDAA4D;AAC5D,wDAA4D;AAC5D,gEAAoE;AACpE,8DAAkE;AAClE,gEAAoE;AACpE,oEAAwE;AAGxE,MAAM,aAAa,GAA0B;IAC3C,oBAAY;IACZ,kBAAW;IACX,kBAAW;IACX,0BAAe;IACf,wBAAc;IACd,0BAAe;IACf,8BAAiB;CAClB,CAAC;AAEF,SAAS,iBAAiB,CAAC,OAAe,EAAE,MAAc;IACxD,QAAQ,MAAM,EAAE;QACd,KAAK,KAAK;YACR,OAAO,SAAS,OAAO,GAAG,CAAC;QAE7B,KAAK,MAAM;YACT,OAAO,IAAI,OAAO,EAAE,CAAC;QAEvB;YACE,MAAM,IAAI,KAAK,CAAC,mBAAmB,MAAM,EAAE,CAAC,CAAC;KAChD;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,SAA6B,EAAE,MAAc;IAC1E,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE;QAC7B,KAAK,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjE;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAuB,EAAE,UAAsB;IACnE,MAAM,iBAAiB,GAAG,aAAa,CAAC,IAAI,CAC1C,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CACtC,CAAC;IACF,IAAI,iBAAiB,EAAE;QACrB,OAAO,IAAA,YAAI,EAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;KACzD;IACD,oCAAoC;IACpC,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;IAC/B,0BAAe,CAAC,cAAc,CAAC;QAC7B,IAAI,EAAE,GAAG,IAAI,kBAAkB;QAC/B,SAAS,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;YAC5B,qBAAqB,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAElD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS;iBACtC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;iBAC/C,IAAI,CAAC,IAAI,CAAC,CAAC;YAEd,MAAM,aAAa,GAAG,aAAa;iBAChC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;iBACvC,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,IAAI,CAAC,CAAC;YAEd,OAAO,QAAQ,CAAC,MAAM,CAAC;UACnB,0BAAe,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;UAClD,YAAY;UACZ,aAAa;OAChB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.trim = exports.simplifyTokens = void 0;
|
|
4
|
+
function simplifyTokens(tokens) {
|
|
5
|
+
if (tokens.hasOwnProperty("value")) {
|
|
6
|
+
return tokens.value;
|
|
7
|
+
}
|
|
8
|
+
return Object.keys(tokens)
|
|
9
|
+
.reduce((acc, key) => {
|
|
10
|
+
acc[key] = simplifyTokens(tokens[key]);
|
|
11
|
+
return acc;
|
|
12
|
+
}, {});
|
|
13
|
+
}
|
|
14
|
+
exports.simplifyTokens = simplifyTokens;
|
|
15
|
+
function trim(str) {
|
|
16
|
+
return str.replace(/^\s+/gm, "").trim();
|
|
17
|
+
}
|
|
18
|
+
exports.trim = trim;
|
|
19
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../config-src/formats/utils.ts"],"names":[],"mappings":";;;AAAA,SAAgB,cAAc,CAAC,MAAW;IACxC,IAAI,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAClC,OAAO,MAAM,CAAC,KAAK,CAAC;KACrB;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;SACvB,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QACnB,GAAG,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACvC,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AATD,wCASC;AAED,SAAgB,IAAI,CAAC,GAAW;IAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;AAC1C,CAAC;AAFD,oBAEC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
const style_dictionary_1 = __importDefault(require("style-dictionary"));
|
|
41
|
+
const prettier = __importStar(require("prettier"));
|
|
42
|
+
const utils_1 = require("./utils");
|
|
43
|
+
style_dictionary_1.default.registerFormat({
|
|
44
|
+
name: "vanilla-extract/sprinkle-values",
|
|
45
|
+
formatter({ dictionary }) {
|
|
46
|
+
const _a = (0, utils_1.simplifyTokens)(dictionary.tokens), { color: colorTokens, size: sizeTokens } = _a, otherTokens = __rest(_a, ["color", "size"]);
|
|
47
|
+
const { type: typeSizeTokens, spacing: spacingSizeTokens } = sizeTokens, otherSizeTokens = __rest(sizeTokens, ["type", "spacing"]);
|
|
48
|
+
const colors = Object.keys(colorTokens)
|
|
49
|
+
.reduce((acc, key) => {
|
|
50
|
+
if (typeof colorTokens[key] === "object") {
|
|
51
|
+
for (const subkey of Object.keys(colorTokens[key])) {
|
|
52
|
+
acc[`${key}-${subkey}`] = colorTokens[key][subkey];
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
acc[key] = colorTokens[key];
|
|
57
|
+
}
|
|
58
|
+
return acc;
|
|
59
|
+
}, {});
|
|
60
|
+
const fontSizes = Object.keys(typeSizeTokens)
|
|
61
|
+
.reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: typeSizeTokens[key].font })), {});
|
|
62
|
+
const lineHeights = Object.keys(typeSizeTokens)
|
|
63
|
+
.reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: typeSizeTokens[key].line })), {});
|
|
64
|
+
const values = Object.assign({ colors,
|
|
65
|
+
fontSizes,
|
|
66
|
+
lineHeights, spacing: Object.assign(Object.assign({}, spacingSizeTokens), { none: 0, auto: "auto" }) }, otherTokens);
|
|
67
|
+
for (const key of Object.keys(otherSizeTokens)) {
|
|
68
|
+
// some need to be merged vs overwriting
|
|
69
|
+
if (values.hasOwnProperty(key)) {
|
|
70
|
+
Object.assign(values[key], otherSizeTokens[key]);
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
values[key] = otherSizeTokens[key];
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return prettier.format(`
|
|
77
|
+
/* eslint-disable */
|
|
78
|
+
/**
|
|
79
|
+
* GENERATED
|
|
80
|
+
* Do not edit directly
|
|
81
|
+
*/
|
|
82
|
+
export const sprinkleValues = Object.freeze(${JSON.stringify(values, null, 0)});
|
|
83
|
+
`, { parser: "typescript" });
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
//# sourceMappingURL=vanillaExtractSprinkleValues.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vanillaExtractSprinkleValues.js","sourceRoot":"","sources":["../../config-src/formats/vanillaExtractSprinkleValues.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAC/C,mDAAqC;AACrC,mCAAyC;AAEzC,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,iCAAiC;IACvC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,MAAM,KAIF,IAAA,sBAAc,EAAC,UAAU,CAAC,MAAM,CAAC,EAJ/B,EACJ,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,UAAU,OAEmB,EADhC,WAAW,cAHV,iBAIL,CAAoC,CAAC;QACtC,MAAM,EACJ,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,iBAAiB,KAExB,UAAU,EADT,eAAe,UAChB,UAAU,EAJR,mBAIL,CAAa,CAAC;QAEf,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;aACpC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,WAAW,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;gBACxC,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE;oBAClD,GAAG,CAAC,GAAG,GAAG,IAAI,MAAM,EAAE,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;iBACpD;aACF;iBAAM;gBACL,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;aAC7B;YACD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;aAC1C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,iCACjB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,IAC/B,EAAE,EAAE,CAAC,CAAC;QAEV,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;aAC5C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,iCACjB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,IAC/B,EAAE,EAAE,CAAC,CAAC;QAEV,MAAM,MAAM,mBACV,MAAM;YACN,SAAS;YACT,WAAW,EACX,OAAO,kCACF,iBAAiB,KACpB,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,OAEX,WAAW,CACf,CAAC;QAEF,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;YAC9C,wCAAwC;YACxC,IAAI,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;gBAC9B,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;aAClD;iBAAM;gBACL,MAAM,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;aACpC;SACF;QAED,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;oDAMyB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;KAC9E,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const style_dictionary_1 = __importDefault(require("style-dictionary"));
|
|
7
|
+
style_dictionary_1.default.registerTransform({
|
|
8
|
+
name: "attribute/font",
|
|
9
|
+
type: "attribute",
|
|
10
|
+
matcher: (token) => token.attributes.category === "asset"
|
|
11
|
+
&& token.attributes.type === "font",
|
|
12
|
+
transformer(token) {
|
|
13
|
+
const [category, type, family, weight, style,] = token.path;
|
|
14
|
+
return {
|
|
15
|
+
category,
|
|
16
|
+
type,
|
|
17
|
+
family,
|
|
18
|
+
weight,
|
|
19
|
+
style,
|
|
20
|
+
};
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=attrFont.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attrFont.js","sourceRoot":"","sources":["../../config-src/transforms/attrFont.ts"],"names":[],"mappings":";;;;;AAAA,wEAA+C;AAE/C,0BAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO;WACpD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,WAAW,CAAC,KAAK;QACf,MAAM,CACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACN,GAAG,KAAK,CAAC,IAAI,CAAC;QACf,OAAO;YACL,QAAQ;YACR,IAAI;YACJ,MAAM;YACN,MAAM;YACN,KAAK;SACN,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const style_dictionary_1 = __importDefault(require("style-dictionary"));
|
|
7
|
+
style_dictionary_1.default.registerTransform({
|
|
8
|
+
name: "attribute/grid-columns",
|
|
9
|
+
type: "attribute",
|
|
10
|
+
matcher: (token) => token.attributes.category === "grid"
|
|
11
|
+
&& token.attributes.type === "columns",
|
|
12
|
+
transformer(token) {
|
|
13
|
+
return {
|
|
14
|
+
cssValue: new Array(token.value)
|
|
15
|
+
.fill("1fr")
|
|
16
|
+
.join(" "),
|
|
17
|
+
};
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=attrGridColumns.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attrGridColumns.js","sourceRoot":"","sources":["../../config-src/transforms/attrGridColumns.ts"],"names":[],"mappings":";;;;;AAAA,wEAA+C;AAE/C,0BAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACnD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,WAAW,CAAC,KAAK;QACf,OAAO;YACL,QAAQ,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;iBAC7B,IAAI,CAAC,KAAK,CAAC;iBACX,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["config.ts"],"names":[],"mappings":";;;;;AAAA,wEAA+C;AAE/C,mCAAgC;AAEhC,8BAA4B;AAC5B,oCAAkC;AAClC,oCAAkC;AAClC,kDAAgD;AAEhD,iCAA+B;AAC/B,wCAAsC;AAEtC,IAAA,eAAM,EAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAElC,SAAS,mBAAmB,CAAC,QAAgB;IAC3C,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QACxD,QAAQ,CAAC,UAAU,GAAG;YACpB,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC;YACtE,cAAc;YACd,wBAAwB;YACxB,gBAAgB;SACjB,CAAC;KACH;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,kBAAe,mBAAmB,CAAC;IACjC,MAAM,EAAE,CAAC,wBAAwB,CAAC;IAClC,SAAS,EAAE;QACT,WAAW,EAAE;YACX,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,WAAW;oBACnB,WAAW,EAAE,UAAU;iBACxB;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,GAAG,EAAE;YACH,SAAS,EAAE,UAAU;YACrB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,eAAe;oBACvB,WAAW,EAAE,YAAY;iBAC1B;gBACD;oBACE,MAAM,EAAE,qBAAqB;oBAC7B,WAAW,EAAE,WAAW;iBACzB;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,WAAW;YACtB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,gBAAgB;oBACxB,WAAW,EAAE,aAAa;iBAC3B;gBACD;oBACE,MAAM,EAAE,sBAAsB;oBAC9B,WAAW,EAAE,YAAY;iBAC1B;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,IAAI;SAChD;QACD,EAAE,EAAE;YACF,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,4BAA4B;oBACpC,WAAW,EAAE,mBAAmB;iBACjC;gBACD;oBACE,MAAM,EAAE,0BAA0B;oBAClC,WAAW,EAAE,eAAe;iBAC7B;gBACD;oBACE,MAAM,EAAE,iCAAiC;oBACzC,WAAW,EAAE,uCAAuC;iBACrD;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,EAAE;SAC9C;KACF;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/* eslint-env node */
|
|
2
|
+
/* eslint-disable import/no-import-module-exports */
|
|
3
|
+
/* eslint-disable import/no-commonjs */
|
|
4
|
+
import StyleDictionary from "style-dictionary";
|
|
5
|
+
import type { Config } from "style-dictionary";
|
|
6
|
+
import { config } from "dotenv";
|
|
7
|
+
|
|
8
|
+
import "./formats/fontFace";
|
|
9
|
+
import "./formats/jsSimpleObject";
|
|
10
|
+
import "./formats/utilityClasses";
|
|
11
|
+
import "./formats/vanillaExtractSprinkleValues";
|
|
12
|
+
|
|
13
|
+
import "./transforms/attrFont";
|
|
14
|
+
import "./transforms/attrGridColumns";
|
|
15
|
+
|
|
16
|
+
config({ path: "../../../.env" });
|
|
17
|
+
|
|
18
|
+
function configureTransforms(sdConfig: Config): Config {
|
|
19
|
+
for (const platform of Object.values(sdConfig.platforms)) {
|
|
20
|
+
platform.transforms = [
|
|
21
|
+
...platform.transforms.filter((transform) => transform !== "size/rem"),
|
|
22
|
+
"size/pxToRem",
|
|
23
|
+
"attribute/grid-columns",
|
|
24
|
+
"attribute/font",
|
|
25
|
+
];
|
|
26
|
+
}
|
|
27
|
+
return sdConfig;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
module.exports = configureTransforms({
|
|
31
|
+
source: ["./src/tokens/**/*.json"],
|
|
32
|
+
platforms: {
|
|
33
|
+
"css-fonts": {
|
|
34
|
+
buildPath: "lib/",
|
|
35
|
+
files: [
|
|
36
|
+
{
|
|
37
|
+
format: "font-face",
|
|
38
|
+
destination: "font.css",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
transforms: StyleDictionary.transformGroup.css,
|
|
42
|
+
},
|
|
43
|
+
css: {
|
|
44
|
+
buildPath: "lib/css/",
|
|
45
|
+
files: [
|
|
46
|
+
{
|
|
47
|
+
format: "css/variables",
|
|
48
|
+
destination: "tokens.css",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
format: "css/utility-classes",
|
|
52
|
+
destination: "utils.css",
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
transforms: StyleDictionary.transformGroup.css,
|
|
56
|
+
},
|
|
57
|
+
scss: {
|
|
58
|
+
buildPath: "lib/scss/",
|
|
59
|
+
files: [
|
|
60
|
+
{
|
|
61
|
+
format: "scss/variables",
|
|
62
|
+
destination: "tokens.scss",
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
format: "scss/utility-classes",
|
|
66
|
+
destination: "utils.scss",
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
transforms: StyleDictionary.transformGroup.scss,
|
|
70
|
+
},
|
|
71
|
+
ts: {
|
|
72
|
+
files: [
|
|
73
|
+
{
|
|
74
|
+
format: "javascript/detailed-object",
|
|
75
|
+
destination: "src/dictionary.ts",
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
format: "javascript/simple-object",
|
|
79
|
+
destination: "src/tokens.ts",
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
format: "vanilla-extract/sprinkle-values",
|
|
83
|
+
destination: "src/vanilla-extract/sprinkleValues.ts",
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
transforms: StyleDictionary.transformGroup.js,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fontFace.js","sourceRoot":"","sources":["fontFace.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,wEAA+C;AAE/C,mDAAqC;AACrC,mCAA+B;AAE/B,kEAAkE;AAClE,MAAM,sBAAsB,GAAG;IAC7B,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,mBAAmB;CACzB,CAAC;AAaF,SAAS,qBAAqB,CAAC,KAAuB;IACpD,OAAO,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM,CAAC;AACnF,CAAC;AAED,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACjD,MAAM,aAAa,GAAG,SAAS;aAC5B,MAAM,CAAC,qBAAqB,CAAC;aAC7B,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACb,MAAM,EACJ,UAAU,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EACrC,OAAO,EACP,KAAK,EAAE,IAAI,GACZ,GAAG,KAAK,CAAC;YAEV,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CACtB,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,YAAI,EAAC;mBACX,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,IAAI,IAAI,SAAS,cAAc,sBAAsB,CAAC,SAAS,CAAC;WACxG,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEZ,OAAO,IAAA,YAAI,EAAC;;4BAEQ,MAAM;0BACR,KAAK;2BACJ,MAAM;mBACd,IAAI;;;SAGd,CAAC,CAAC;QACL,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB,0BAAe,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;QAClD,aAAa;;KAEhB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACxB,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/* eslint-env node */
|
|
2
|
+
import StyleDictionary from "style-dictionary";
|
|
3
|
+
import type { TransformedToken } from "style-dictionary";
|
|
4
|
+
import * as prettier from "prettier";
|
|
5
|
+
import { trim } from "./utils";
|
|
6
|
+
|
|
7
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
|
|
8
|
+
const MAP_EXT_TO_FORMAT_NAME = {
|
|
9
|
+
woff2: "woff2",
|
|
10
|
+
woff: "woff",
|
|
11
|
+
ttf: "truetype",
|
|
12
|
+
otf: "opentype",
|
|
13
|
+
svg: "svg",
|
|
14
|
+
eot: "embedded-opentype",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
interface FontAssetToken extends TransformedToken {
|
|
18
|
+
attributes: {
|
|
19
|
+
[key: string]: any;
|
|
20
|
+
family: string;
|
|
21
|
+
weight: string;
|
|
22
|
+
style: string;
|
|
23
|
+
};
|
|
24
|
+
formats: string[];
|
|
25
|
+
value: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function tokenIsFontAssetToken(token: TransformedToken): token is FontAssetToken {
|
|
29
|
+
return token.attributes.category === "asset" && token.attributes.type === "font";
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
StyleDictionary.registerFormat({
|
|
33
|
+
name: "font-face",
|
|
34
|
+
formatter: ({ dictionary: { allTokens }, file }) => {
|
|
35
|
+
const fontFaceRules = allTokens
|
|
36
|
+
.filter(tokenIsFontAssetToken)
|
|
37
|
+
.map((token) => {
|
|
38
|
+
const {
|
|
39
|
+
attributes: { family, weight, style },
|
|
40
|
+
formats,
|
|
41
|
+
value: path,
|
|
42
|
+
} = token;
|
|
43
|
+
|
|
44
|
+
const urls = formats.map(
|
|
45
|
+
(extension) => trim(`
|
|
46
|
+
url("${process.env.ASSETS_BASE_PATH}/${path}.${extension}") format("${MAP_EXT_TO_FORMAT_NAME[extension]}")
|
|
47
|
+
`),
|
|
48
|
+
).join(",");
|
|
49
|
+
|
|
50
|
+
return trim(`
|
|
51
|
+
@font-face {
|
|
52
|
+
font-family: "${family}";
|
|
53
|
+
font-style: ${style};
|
|
54
|
+
font-weight: ${weight};
|
|
55
|
+
src: ${urls};
|
|
56
|
+
font-display: fallback;
|
|
57
|
+
}
|
|
58
|
+
`);
|
|
59
|
+
})
|
|
60
|
+
.join("\n");
|
|
61
|
+
|
|
62
|
+
return prettier.format(`
|
|
63
|
+
${StyleDictionary.formatHelpers.fileHeader({ file })}
|
|
64
|
+
${fontFaceRules}
|
|
65
|
+
* { font-family: "Source Sans Pro", sans-serif; }
|
|
66
|
+
`, { parser: "css" });
|
|
67
|
+
},
|
|
68
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jsSimpleObject.js","sourceRoot":"","sources":["jsSimpleObject.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAC/C,mDAAqC;AACrC,mCAAyC;AAEzC,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,0BAA0B;IAChC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,MAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;4CAMiB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;KACtE,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC;AAEH,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,4BAA4B;IAClC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;gDAMqB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;KAC9E,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import StyleDictionary from "style-dictionary";
|
|
2
|
+
import * as prettier from "prettier";
|
|
3
|
+
import { simplifyTokens } from "./utils";
|
|
4
|
+
|
|
5
|
+
StyleDictionary.registerFormat({
|
|
6
|
+
name: "javascript/simple-object",
|
|
7
|
+
formatter({ dictionary }) {
|
|
8
|
+
const tokens = simplifyTokens(dictionary.tokens);
|
|
9
|
+
return prettier.format(`
|
|
10
|
+
/* eslint-disable */
|
|
11
|
+
/**
|
|
12
|
+
* GENERATED
|
|
13
|
+
* Do not edit directly
|
|
14
|
+
*/
|
|
15
|
+
export const Tokens = Object.freeze(${JSON.stringify(tokens, null, 0)});
|
|
16
|
+
`, { parser: "typescript" });
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
StyleDictionary.registerFormat({
|
|
21
|
+
name: "javascript/detailed-object",
|
|
22
|
+
formatter({ dictionary }) {
|
|
23
|
+
return prettier.format(`
|
|
24
|
+
/* eslint-disable */
|
|
25
|
+
/**
|
|
26
|
+
* GENERATED
|
|
27
|
+
* Do not edit directly
|
|
28
|
+
*/
|
|
29
|
+
export const dictionary = Object.freeze(${JSON.stringify(dictionary, null, 0)});
|
|
30
|
+
`, { parser: "typescript" });
|
|
31
|
+
},
|
|
32
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.js","sourceRoot":"","sources":["color.ts"],"names":[],"mappings":";;;AAEa,QAAA,YAAY,GAAwB;IAC/C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO;IAC3D,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;QACtD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC;QAEzC,OAAO;SACF,SAAS;iBACD,KAAK,CAAC,iBAAiB;;YAE5B,SAAS;4BACO,KAAK,CAAC,iBAAiB;;gBAEnC,SAAS;wBACD,KAAK,CAAC,iBAAiB;;wBAEvB,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB;;KAEjF,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { UtilityClassBuilder } from "./UtilityClassBuilder";
|
|
2
|
+
|
|
3
|
+
export const colorClasses: UtilityClassBuilder = {
|
|
4
|
+
appliesTo: (token) => token.attributes.category === "color",
|
|
5
|
+
build(token, dictionary) {
|
|
6
|
+
const { type: tType, item: tItem } = token.attributes;
|
|
7
|
+
const hyphenate = tItem ? `-${tItem}` : "";
|
|
8
|
+
const colorName = `${tType}${hyphenate}`;
|
|
9
|
+
|
|
10
|
+
return `
|
|
11
|
+
.${colorName} {
|
|
12
|
+
color: ${token.variableReference} !important;
|
|
13
|
+
}
|
|
14
|
+
.bg-${colorName} {
|
|
15
|
+
background-color: ${token.variableReference} !important;
|
|
16
|
+
}
|
|
17
|
+
.border-${colorName} {
|
|
18
|
+
border-color: ${token.variableReference} !important;
|
|
19
|
+
border-style: solid;
|
|
20
|
+
border-width: ${dictionary.tokens.size.border.width.standard.variableReference};
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
},
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["grid.ts"],"names":[],"mappings":";;;AAEa,QAAA,WAAW,GAAwB;IAC9C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB;;;WAGG;QACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;QACtD,MAAM,iBAAiB,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;aAC7C,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACT,KAAK,GAAG,CAAC;8BACK,KAAK,GAAG,CAAC;;OAEhC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO;;;iCAGsB,mBAAmB;eACrC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB;;QAE3D,iBAAiB;KACpB,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { UtilityClassBuilder } from "./UtilityClassBuilder";
|
|
2
|
+
|
|
3
|
+
export const gridClasses: UtilityClassBuilder = {
|
|
4
|
+
appliesTo: (token) => token.attributes.category === "grid"
|
|
5
|
+
&& token.attributes.type === "columns",
|
|
6
|
+
build(token, dictionary) {
|
|
7
|
+
/*
|
|
8
|
+
* this custom attribute is added for this token type only by the
|
|
9
|
+
* "grid/columns" custom transform defined in config.ts
|
|
10
|
+
*/
|
|
11
|
+
const gridTemplateColumns = token.attributes.cssValue;
|
|
12
|
+
const gridColumnClasses = new Array(token.value)
|
|
13
|
+
.fill(null)
|
|
14
|
+
.map((_, index) => `
|
|
15
|
+
.grid-${index + 1} {
|
|
16
|
+
grid-column: span ${index + 1} !important;
|
|
17
|
+
}
|
|
18
|
+
`)
|
|
19
|
+
.join("\n");
|
|
20
|
+
|
|
21
|
+
return `
|
|
22
|
+
.grid-root {
|
|
23
|
+
display: grid !important;
|
|
24
|
+
grid-template-columns: ${gridTemplateColumns} !important;
|
|
25
|
+
gap: ${dictionary.tokens.size.grid.gutter.variableReference} !important;
|
|
26
|
+
}
|
|
27
|
+
${gridColumnClasses}
|
|
28
|
+
`;
|
|
29
|
+
},
|
|
30
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":";;;AAAA,oCAAgC;AAGnB,QAAA,WAAW,GAAwB;IAC9C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,WAAW;IAC1C,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,SAAS,GAAG,SAAS,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QAEnD,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QACvE,IAAI,UAAU,EAAE;YACd,SAAS,GAAG,IAAA,YAAI,EAAC;UACb,SAAS;mBACA,UAAU,CAAC,iBAAiB;;OAExC,CAAC,CAAC;SACJ;QAED,OAAO,IAAA,YAAI,EAAC,GAAG,SAAS;QACpB,SAAS;mBACE,KAAK,CAAC,iBAAiB;;KAErC,CAAC,CAAC;IACL,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { trim } from "../utils";
|
|
2
|
+
import type { UtilityClassBuilder } from "./UtilityClassBuilder";
|
|
3
|
+
|
|
4
|
+
export const iconClasses: UtilityClassBuilder = {
|
|
5
|
+
appliesTo: (token) => token.attributes.category === "icon"
|
|
6
|
+
&& token.attributes.item === "character",
|
|
7
|
+
build(token, dictionary) {
|
|
8
|
+
const className = `.icon-${token.attributes.type}`;
|
|
9
|
+
|
|
10
|
+
let colorRule = "";
|
|
11
|
+
const colorToken = dictionary.tokens.icon[token.attributes.type].color;
|
|
12
|
+
if (colorToken) {
|
|
13
|
+
colorRule = trim(`
|
|
14
|
+
${className} {
|
|
15
|
+
color: ${colorToken.variableReference} !important;
|
|
16
|
+
}
|
|
17
|
+
`);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return trim(`${colorRule}
|
|
21
|
+
${className}::before {
|
|
22
|
+
content: ${token.variableReference} !important;
|
|
23
|
+
}
|
|
24
|
+
`);
|
|
25
|
+
},
|
|
26
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"iconSize.js","sourceRoot":"","sources":["iconSize.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAwB;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,KAAK,CAAC,KAAK;QACT,OAAO;mBACQ,KAAK,CAAC,UAAU,CAAC,IAAI;qBACnB,KAAK,CAAC,iBAAiB;;KAEvC,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { UtilityClassBuilder } from "./UtilityClassBuilder";
|
|
2
|
+
|
|
3
|
+
export const iconSizeClasses: UtilityClassBuilder = {
|
|
4
|
+
appliesTo: (token) => token.attributes.category === "size"
|
|
5
|
+
&& token.attributes.type === "icon",
|
|
6
|
+
build(token) {
|
|
7
|
+
return `
|
|
8
|
+
.icon_size-${token.attributes.item} {
|
|
9
|
+
font-size: ${token.variableReference} !important;
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
},
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spacing.js","sourceRoot":"","sources":["spacing.ts"],"names":[],"mappings":";;;AAAA,oCAAgC;AAGnB,QAAA,cAAc,GAAwB;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,KAAK,CAAC,KAAK;QACT,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;QAClC,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,OAAO,IAAA,YAAI,EAAC;WACP,CAAC,IAAI,IAAI;YACR,IAAI,KAAK,KAAK,CAAC,iBAAiB;;WAEjC,CAAC,KAAK,IAAI;YACT,IAAI,UAAU,KAAK,CAAC,iBAAiB;YACrC,IAAI,WAAW,KAAK,CAAC,iBAAiB;;WAEvC,CAAC,KAAK,IAAI;YACT,IAAI,SAAS,KAAK,CAAC,iBAAiB;YACpC,IAAI,YAAY,KAAK,CAAC,iBAAiB;;WAExC,CAAC,KAAK,IAAI;YACT,IAAI,SAAS,KAAK,CAAC,iBAAiB;;WAErC,CAAC,KAAK,IAAI;YACT,IAAI,WAAW,KAAK,CAAC,iBAAiB;;WAEvC,CAAC,KAAK,IAAI;YACT,IAAI,YAAY,KAAK,CAAC,iBAAiB;;WAExC,CAAC,KAAK,IAAI;YACT,IAAI,UAAU,KAAK,CAAC,iBAAiB;;OAE1C,CAAC,CAAC;QACL,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { trim } from "../utils";
|
|
2
|
+
import type { UtilityClassBuilder } from "./UtilityClassBuilder";
|
|
3
|
+
|
|
4
|
+
function buildClasses(item: string, value: string): string {
|
|
5
|
+
return ["margin", "padding"].map((prop) => {
|
|
6
|
+
const p = prop.charAt(0);
|
|
7
|
+
return trim(`
|
|
8
|
+
.${p}-${item} {
|
|
9
|
+
${prop}: ${value} !important;
|
|
10
|
+
}
|
|
11
|
+
.${p}x-${item} {
|
|
12
|
+
${prop}-left: ${value} !important;
|
|
13
|
+
${prop}-right: ${value} !important;
|
|
14
|
+
}
|
|
15
|
+
.${p}y-${item} {
|
|
16
|
+
${prop}-top: ${value} !important;
|
|
17
|
+
${prop}-bottom: ${value} !important;
|
|
18
|
+
}
|
|
19
|
+
.${p}t-${item} {
|
|
20
|
+
${prop}-top: ${value} !important;
|
|
21
|
+
}
|
|
22
|
+
.${p}r-${item} {
|
|
23
|
+
${prop}-right: ${value} !important;
|
|
24
|
+
}
|
|
25
|
+
.${p}b-${item} {
|
|
26
|
+
${prop}-bottom: ${value} !important;
|
|
27
|
+
}
|
|
28
|
+
.${p}l-${item} {
|
|
29
|
+
${prop}-left: ${value} !important;
|
|
30
|
+
}
|
|
31
|
+
`);
|
|
32
|
+
}).join("\n");
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export const spacingClasses: UtilityClassBuilder = {
|
|
36
|
+
appliesTo: (token) => token.attributes.category === "size"
|
|
37
|
+
&& token.attributes.type === "spacing",
|
|
38
|
+
build(token) {
|
|
39
|
+
return buildClasses(token.attributes.item, token.variableReference);
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
staticClasses: [["none", "0"], ["auto", "auto"]]
|
|
43
|
+
.map(([item, value]) => buildClasses(item, value)).join("\n"),
|
|
44
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typeSize.js","sourceRoot":"","sources":["typeSize.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAwB;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;YACrB,IAAI,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC;YACzB,IAAI,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC;SAC5B,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAE5B,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,KAAK,MAAM,EAAE;YACvC,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YACxE,SAAS,GAAG;gBACF,KAAK,CAAC,UAAU,CAAC,IAAI;uBACd,KAAK,CAAC,iBAAiB;yBACrB,OAAO,CAAC,iBAAiB;;OAE3C,CAAC;SACH;QAED,OAAO;SACF,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI;UAC9B,IAAI,KAAK,KAAK,CAAC,iBAAiB;;QAElC,SAAS;KACZ,CAAC;IACJ,CAAC;CACF,CAAC"}
|