@kaizen/tailwind 0.0.0-canary-reset-20231103000558
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/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +18 -0
- package/dist/index.js.map +1 -0
- package/dist/kz-height.d.ts +13 -0
- package/dist/kz-height.d.ts.map +1 -0
- package/dist/kz-height.js +16 -0
- package/dist/kz-height.js.map +1 -0
- package/dist/kz-spacing.d.ts +3 -0
- package/dist/kz-spacing.d.ts.map +1 -0
- package/dist/kz-spacing.js +41 -0
- package/dist/kz-spacing.js.map +1 -0
- package/dist/tailwind-presets.d.ts +8 -0
- package/dist/tailwind-presets.d.ts.map +1 -0
- package/dist/tailwind-presets.js +110 -0
- package/dist/tailwind-presets.js.map +1 -0
- package/package.json +33 -0
- package/src/index.ts +1 -0
- package/src/kz-height.ts +12 -0
- package/src/kz-spacing.spec.ts +38 -0
- package/src/kz-spacing.ts +39 -0
- package/src/tailwind-presets.ts +116 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
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 __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./tailwind-presets"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-height.d.ts","sourceRoot":"","sources":["../src/kz-height.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWpB,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.kzHeight = void 0;
|
|
4
|
+
exports.kzHeight = {
|
|
5
|
+
0: "0",
|
|
6
|
+
25: "25%",
|
|
7
|
+
33: "33.333333%",
|
|
8
|
+
50: "50%",
|
|
9
|
+
75: "75%",
|
|
10
|
+
100: "100%",
|
|
11
|
+
auto: "auto",
|
|
12
|
+
min: "min-content",
|
|
13
|
+
max: "max-content",
|
|
14
|
+
fit: "fit-content",
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=kz-height.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-height.js","sourceRoot":"","sources":["../src/kz-height.ts"],"names":[],"mappings":";;;AAAa,QAAA,QAAQ,GAAG;IACtB,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;CACnB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-spacing.d.ts","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,oBAAoB,wBACV,OAAO,MAAM,EAAE,MAAM,CAAC,KAC1C,OAAO,MAAM,EAAE,MAAM,CAIvB,CAAA;AAED,eAAO,MAAM,SAAS,wBAA2C,CAAA"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.kzSpacing = exports.filterDenyListValues = void 0;
|
|
4
|
+
var design_tokens_1 = require("@kaizen/design-tokens");
|
|
5
|
+
var tokenDenyList = [
|
|
6
|
+
"xs",
|
|
7
|
+
"sm",
|
|
8
|
+
"md",
|
|
9
|
+
"lg",
|
|
10
|
+
"xl",
|
|
11
|
+
"xxl",
|
|
12
|
+
"xxxl",
|
|
13
|
+
"xxxxl",
|
|
14
|
+
"xxxxxl",
|
|
15
|
+
"xs-id",
|
|
16
|
+
"sm-id",
|
|
17
|
+
"md-id",
|
|
18
|
+
"lg-id",
|
|
19
|
+
"xl-id",
|
|
20
|
+
"xxl-id",
|
|
21
|
+
"xxxl-id",
|
|
22
|
+
"xxxxl-id",
|
|
23
|
+
"xxxxxl-id",
|
|
24
|
+
];
|
|
25
|
+
/**
|
|
26
|
+
* checks if a key from design tokens should be filtered from tailwind
|
|
27
|
+
*/
|
|
28
|
+
var isValidToken = function (key) {
|
|
29
|
+
return tokenDenyList.indexOf("".concat(key)) < 0;
|
|
30
|
+
};
|
|
31
|
+
// Filters out non-pixel-based spacing tokens, such as shirt sizes
|
|
32
|
+
var filterDenyListValues = function (spacingTokensObject) {
|
|
33
|
+
var keyValuePairs = Object.entries(spacingTokensObject);
|
|
34
|
+
return Object.fromEntries(keyValuePairs.filter(function (_a) {
|
|
35
|
+
var key = _a[0];
|
|
36
|
+
return isValidToken(key);
|
|
37
|
+
}));
|
|
38
|
+
};
|
|
39
|
+
exports.filterDenyListValues = filterDenyListValues;
|
|
40
|
+
exports.kzSpacing = (0, exports.filterDenyListValues)(design_tokens_1.heartTheme.spacing);
|
|
41
|
+
//# sourceMappingURL=kz-spacing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-spacing.js","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAElD,IAAM,aAAa,GAAa;IAC9B,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,QAAQ;IACR,SAAS;IACT,UAAU;IACV,WAAW;CACZ,CAAA;AAED;;GAEG;AACH,IAAM,YAAY,GAAG,UAAC,GAAoB;IACxC,OAAA,aAAa,CAAC,OAAO,CAAC,UAAG,GAAG,CAAE,CAAC,GAAG,CAAC;AAAnC,CAAmC,CAAA;AAErC,kEAAkE;AAC3D,IAAM,oBAAoB,GAAG,UAClC,mBAA2C;IAE3C,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAEzD,OAAO,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,EAAK;YAAJ,GAAG,QAAA;QAAM,OAAA,YAAY,CAAC,GAAG,CAAC;IAAjB,CAAiB,CAAC,CAAC,CAAA;AAC/E,CAAC,CAAA;AANY,QAAA,oBAAoB,wBAMhC;AAEY,QAAA,SAAS,GAAG,IAAA,4BAAoB,EAAC,0BAAU,CAAC,OAAO,CAAC,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ThemeConfig } from "tailwindcss/types/config";
|
|
2
|
+
export type KaizenTailwindTheme = Partial<ThemeConfig>;
|
|
3
|
+
export type KaizenTailwindPreset = {
|
|
4
|
+
theme: KaizenTailwindTheme;
|
|
5
|
+
};
|
|
6
|
+
export declare const kaizenTailwindTheme: KaizenTailwindTheme;
|
|
7
|
+
export declare const Preset: KaizenTailwindPreset;
|
|
8
|
+
//# sourceMappingURL=tailwind-presets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tailwind-presets.d.ts","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AACtD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,mBAqGjC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,oBAEpB,CAAA"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.Preset = exports.kaizenTailwindTheme = void 0;
|
|
15
|
+
var design_tokens_1 = require("@kaizen/design-tokens");
|
|
16
|
+
var kz_spacing_1 = require("./kz-spacing");
|
|
17
|
+
// Note: changing any token will require to to run build:ts from the root `design-tokens`
|
|
18
|
+
exports.kaizenTailwindTheme = {
|
|
19
|
+
extend: {
|
|
20
|
+
maxWidth: {
|
|
21
|
+
paragraph: "".concat(design_tokens_1.defaultTheme.typography.paragraphBody.maxWidth),
|
|
22
|
+
"paragraph-lede": "".concat(design_tokens_1.defaultTheme.typography.paragraphIntroLede.maxWidth),
|
|
23
|
+
"paragraph-sm": "".concat(design_tokens_1.defaultTheme.typography.paragraphSmall.maxWidth),
|
|
24
|
+
"paragraph-xs": "".concat(design_tokens_1.defaultTheme.typography.paragraphExtraSmall.maxWidth),
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, design_tokens_1.defaultTheme.color), design_tokens_1.defaultTheme.dataViz),
|
|
28
|
+
spacing: kz_spacing_1.kzSpacing,
|
|
29
|
+
boxShadow: {
|
|
30
|
+
none: "none",
|
|
31
|
+
sm: design_tokens_1.defaultTheme.shadow.small.boxShadow,
|
|
32
|
+
lg: design_tokens_1.defaultTheme.shadow.large.boxShadow,
|
|
33
|
+
},
|
|
34
|
+
borderRadius: {
|
|
35
|
+
default: "7px",
|
|
36
|
+
none: "0px",
|
|
37
|
+
"focus-ring": "10px",
|
|
38
|
+
full: "100%",
|
|
39
|
+
},
|
|
40
|
+
borderWidth: {
|
|
41
|
+
DEFAULT: "2px",
|
|
42
|
+
none: "0px",
|
|
43
|
+
default: "2px",
|
|
44
|
+
"focus-ring": "2px",
|
|
45
|
+
},
|
|
46
|
+
borderColor: __assign({ DEFAULT: "".concat(design_tokens_1.defaultTheme.border.solid.borderColor), "default-color": "".concat(design_tokens_1.defaultTheme.border.solid.borderColor), transparent: "".concat(design_tokens_1.defaultTheme.border.borderless.borderColor), "focus-ring": design_tokens_1.defaultTheme.color.blue[600] }, design_tokens_1.defaultTheme.color),
|
|
47
|
+
fontFamily: {
|
|
48
|
+
"family-paragraph": ["".concat(design_tokens_1.defaultTheme.typography.paragraphBody.fontFamily)],
|
|
49
|
+
"family-heading": ["".concat(design_tokens_1.defaultTheme.typography.heading1.fontFamily)],
|
|
50
|
+
"family-data": ["".concat(design_tokens_1.defaultTheme.typography.dataLarge.fontFamily)],
|
|
51
|
+
"family-display": ["".concat(design_tokens_1.defaultTheme.typography.display0.fontFamily)],
|
|
52
|
+
},
|
|
53
|
+
fontSize: {
|
|
54
|
+
display: "".concat(design_tokens_1.defaultTheme.typography.display0.fontSize),
|
|
55
|
+
"heading-1": "".concat(design_tokens_1.defaultTheme.typography.heading1.fontSize),
|
|
56
|
+
"heading-2": "".concat(design_tokens_1.defaultTheme.typography.heading2.fontSize),
|
|
57
|
+
"heading-3": "".concat(design_tokens_1.defaultTheme.typography.heading3.fontSize),
|
|
58
|
+
"heading-4": "".concat(design_tokens_1.defaultTheme.typography.heading4.fontSize),
|
|
59
|
+
"heading-5": "".concat(design_tokens_1.defaultTheme.typography.heading5.fontSize),
|
|
60
|
+
"heading-6": "".concat(design_tokens_1.defaultTheme.typography.heading6.fontSize),
|
|
61
|
+
paragraph: "".concat(design_tokens_1.defaultTheme.typography.paragraphBody.fontSize),
|
|
62
|
+
"paragraph-lede": "".concat(design_tokens_1.defaultTheme.typography.paragraphIntroLede.fontSize),
|
|
63
|
+
"paragraph-sm": "".concat(design_tokens_1.defaultTheme.typography.paragraphSmall.fontSize),
|
|
64
|
+
"paragraph-xs": "".concat(design_tokens_1.defaultTheme.typography.paragraphExtraSmall.fontSize),
|
|
65
|
+
"data-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLarge.fontSize),
|
|
66
|
+
"data-md": "".concat(design_tokens_1.defaultTheme.typography.dataMedium.fontSize),
|
|
67
|
+
"data-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmall.fontSize),
|
|
68
|
+
"data-units-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLargeUnits.fontSize),
|
|
69
|
+
"data-units-md": "".concat(design_tokens_1.defaultTheme.typography.dataMediumUnits.fontSize),
|
|
70
|
+
"data-units-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmallUnits.fontSize),
|
|
71
|
+
},
|
|
72
|
+
fontWeight: {
|
|
73
|
+
"weight-paragraph": "400",
|
|
74
|
+
"weight-paragraph-bold": "600",
|
|
75
|
+
"weight-data": "700",
|
|
76
|
+
"weight-heading": "700",
|
|
77
|
+
"weight-display": "800",
|
|
78
|
+
},
|
|
79
|
+
lineHeight: {
|
|
80
|
+
display: "".concat(design_tokens_1.defaultTheme.typography.display0.lineHeight),
|
|
81
|
+
"heading-1": "".concat(design_tokens_1.defaultTheme.typography.heading1.lineHeight),
|
|
82
|
+
"heading-2": "".concat(design_tokens_1.defaultTheme.typography.heading2.lineHeight),
|
|
83
|
+
"heading-3": "".concat(design_tokens_1.defaultTheme.typography.heading3.lineHeight),
|
|
84
|
+
"heading-4": "".concat(design_tokens_1.defaultTheme.typography.heading4.lineHeight),
|
|
85
|
+
"heading-5": "".concat(design_tokens_1.defaultTheme.typography.heading5.lineHeight),
|
|
86
|
+
"heading-6": "".concat(design_tokens_1.defaultTheme.typography.heading6.lineHeight),
|
|
87
|
+
paragraph: "".concat(design_tokens_1.defaultTheme.typography.paragraphBody.lineHeight),
|
|
88
|
+
"paragraph-lede": "".concat(design_tokens_1.defaultTheme.typography.paragraphIntroLede.lineHeight),
|
|
89
|
+
"paragraph-sm": "".concat(design_tokens_1.defaultTheme.typography.paragraphSmall.lineHeight),
|
|
90
|
+
"paragraph-xs": "".concat(design_tokens_1.defaultTheme.typography.paragraphExtraSmall.lineHeight),
|
|
91
|
+
"data-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLarge.lineHeight),
|
|
92
|
+
"data-md": "".concat(design_tokens_1.defaultTheme.typography.dataMedium.lineHeight),
|
|
93
|
+
"data-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmall.lineHeight),
|
|
94
|
+
"data-units-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLargeUnits.lineHeight),
|
|
95
|
+
"data-units-md": "".concat(design_tokens_1.defaultTheme.typography.dataMediumUnits.lineHeight),
|
|
96
|
+
"data-units-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmallUnits.lineHeight),
|
|
97
|
+
},
|
|
98
|
+
letterSpacing: {
|
|
99
|
+
"letter-spacing-normal": "normal",
|
|
100
|
+
},
|
|
101
|
+
// A mix of layout styles
|
|
102
|
+
screens: {
|
|
103
|
+
md: design_tokens_1.defaultTheme.layout.breakpoints.medium,
|
|
104
|
+
lg: design_tokens_1.defaultTheme.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
exports.Preset = {
|
|
108
|
+
theme: exports.kaizenTailwindTheme,
|
|
109
|
+
};
|
|
110
|
+
//# sourceMappingURL=tailwind-presets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tailwind-presets.js","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kaizen/tailwind",
|
|
3
|
+
"version": "0.0.0-canary-reset-20231103000558",
|
|
4
|
+
"description": "Kaizen Tailwind presets",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build": "yarn clean && yarn prepublishOnly",
|
|
7
|
+
"build:ts": "tsc --project tsconfig.dist.json",
|
|
8
|
+
"prepublishOnly": "tsc --project tsconfig.dist.json",
|
|
9
|
+
"clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/cultureamp/kaizen-design-system.git",
|
|
14
|
+
"directory": "packages/tailwind"
|
|
15
|
+
},
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/cultureamp/kaizen-design-system/issues"
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"src",
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
23
|
+
"main": "dist/index.js",
|
|
24
|
+
"author": "",
|
|
25
|
+
"private": false,
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@kaizen/design-tokens": "^10.3.14"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"tailwindcss": "^3.3.5"
|
|
32
|
+
}
|
|
33
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./tailwind-presets"
|
package/src/kz-height.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { filterDenyListValues } from "./kz-spacing"
|
|
2
|
+
|
|
3
|
+
describe("filterDenyListValues", () => {
|
|
4
|
+
it("Keeps all numeric keys", () => {
|
|
5
|
+
const result = filterDenyListValues({
|
|
6
|
+
0: "0",
|
|
7
|
+
xs: "0.375rem",
|
|
8
|
+
1: ".0625rem",
|
|
9
|
+
sm: "0.75rem",
|
|
10
|
+
2: ".125rem",
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
expect(result).toEqual({
|
|
14
|
+
0: "0",
|
|
15
|
+
1: ".0625rem",
|
|
16
|
+
2: ".125rem",
|
|
17
|
+
})
|
|
18
|
+
})
|
|
19
|
+
it("Keeps valid tailwind defaults", () => {
|
|
20
|
+
const result = filterDenyListValues({
|
|
21
|
+
0: "0",
|
|
22
|
+
xs: "0.375rem",
|
|
23
|
+
1: ".0625rem",
|
|
24
|
+
sm: "0.75rem",
|
|
25
|
+
2: ".125rem",
|
|
26
|
+
"w-1/2": "50%",
|
|
27
|
+
"w-full": "100%",
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
expect(result).toEqual({
|
|
31
|
+
0: "0",
|
|
32
|
+
1: ".0625rem",
|
|
33
|
+
2: ".125rem",
|
|
34
|
+
"w-1/2": "50%",
|
|
35
|
+
"w-full": "100%",
|
|
36
|
+
})
|
|
37
|
+
})
|
|
38
|
+
})
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { heartTheme } from "@kaizen/design-tokens"
|
|
2
|
+
|
|
3
|
+
const tokenDenyList: string[] = [
|
|
4
|
+
"xs",
|
|
5
|
+
"sm",
|
|
6
|
+
"md",
|
|
7
|
+
"lg",
|
|
8
|
+
"xl",
|
|
9
|
+
"xxl",
|
|
10
|
+
"xxxl",
|
|
11
|
+
"xxxxl",
|
|
12
|
+
"xxxxxl",
|
|
13
|
+
"xs-id",
|
|
14
|
+
"sm-id",
|
|
15
|
+
"md-id",
|
|
16
|
+
"lg-id",
|
|
17
|
+
"xl-id",
|
|
18
|
+
"xxl-id",
|
|
19
|
+
"xxxl-id",
|
|
20
|
+
"xxxxl-id",
|
|
21
|
+
"xxxxxl-id",
|
|
22
|
+
]
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* checks if a key from design tokens should be filtered from tailwind
|
|
26
|
+
*/
|
|
27
|
+
const isValidToken = (key: string | number): boolean =>
|
|
28
|
+
tokenDenyList.indexOf(`${key}`) < 0
|
|
29
|
+
|
|
30
|
+
// Filters out non-pixel-based spacing tokens, such as shirt sizes
|
|
31
|
+
export const filterDenyListValues = (
|
|
32
|
+
spacingTokensObject: Record<string, string>
|
|
33
|
+
): Record<string, string> => {
|
|
34
|
+
const keyValuePairs = Object.entries(spacingTokensObject)
|
|
35
|
+
|
|
36
|
+
return Object.fromEntries(keyValuePairs.filter(([key]) => isValidToken(key)))
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export const kzSpacing = filterDenyListValues(heartTheme.spacing)
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { ThemeConfig } from "tailwindcss/types/config"
|
|
2
|
+
import { defaultTheme } from "@kaizen/design-tokens"
|
|
3
|
+
import { kzSpacing } from "./kz-spacing"
|
|
4
|
+
|
|
5
|
+
export type KaizenTailwindTheme = Partial<ThemeConfig>
|
|
6
|
+
export type KaizenTailwindPreset = {
|
|
7
|
+
theme: KaizenTailwindTheme
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// Note: changing any token will require to to run build:ts from the root `design-tokens`
|
|
11
|
+
export const kaizenTailwindTheme: KaizenTailwindTheme = {
|
|
12
|
+
extend: {
|
|
13
|
+
maxWidth: {
|
|
14
|
+
paragraph: `${defaultTheme.typography.paragraphBody.maxWidth}`,
|
|
15
|
+
"paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.maxWidth}`,
|
|
16
|
+
"paragraph-sm": `${defaultTheme.typography.paragraphSmall.maxWidth}`,
|
|
17
|
+
"paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.maxWidth}`,
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
colors: {
|
|
21
|
+
transparent: "transparent",
|
|
22
|
+
current: "currentColor",
|
|
23
|
+
inherit: "inherit",
|
|
24
|
+
...defaultTheme.color,
|
|
25
|
+
...defaultTheme.dataViz,
|
|
26
|
+
},
|
|
27
|
+
spacing: kzSpacing,
|
|
28
|
+
boxShadow: {
|
|
29
|
+
none: "none",
|
|
30
|
+
sm: defaultTheme.shadow.small.boxShadow,
|
|
31
|
+
lg: defaultTheme.shadow.large.boxShadow,
|
|
32
|
+
},
|
|
33
|
+
borderRadius: {
|
|
34
|
+
default: "7px",
|
|
35
|
+
none: "0px",
|
|
36
|
+
"focus-ring": "10px",
|
|
37
|
+
full: "100%",
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
borderWidth: {
|
|
41
|
+
DEFAULT: "2px",
|
|
42
|
+
none: "0px",
|
|
43
|
+
default: "2px",
|
|
44
|
+
"focus-ring": "2px",
|
|
45
|
+
},
|
|
46
|
+
borderColor: {
|
|
47
|
+
DEFAULT: `${defaultTheme.border.solid.borderColor}`,
|
|
48
|
+
"default-color": `${defaultTheme.border.solid.borderColor}`,
|
|
49
|
+
transparent: `${defaultTheme.border.borderless.borderColor}`,
|
|
50
|
+
"focus-ring": defaultTheme.color.blue[600],
|
|
51
|
+
...defaultTheme.color,
|
|
52
|
+
},
|
|
53
|
+
fontFamily: {
|
|
54
|
+
"family-paragraph": [`${defaultTheme.typography.paragraphBody.fontFamily}`],
|
|
55
|
+
"family-heading": [`${defaultTheme.typography.heading1.fontFamily}`],
|
|
56
|
+
"family-data": [`${defaultTheme.typography.dataLarge.fontFamily}`],
|
|
57
|
+
"family-display": [`${defaultTheme.typography.display0.fontFamily}`],
|
|
58
|
+
},
|
|
59
|
+
fontSize: {
|
|
60
|
+
display: `${defaultTheme.typography.display0.fontSize}`,
|
|
61
|
+
"heading-1": `${defaultTheme.typography.heading1.fontSize}`,
|
|
62
|
+
"heading-2": `${defaultTheme.typography.heading2.fontSize}`,
|
|
63
|
+
"heading-3": `${defaultTheme.typography.heading3.fontSize}`,
|
|
64
|
+
"heading-4": `${defaultTheme.typography.heading4.fontSize}`,
|
|
65
|
+
"heading-5": `${defaultTheme.typography.heading5.fontSize}`,
|
|
66
|
+
"heading-6": `${defaultTheme.typography.heading6.fontSize}`,
|
|
67
|
+
paragraph: `${defaultTheme.typography.paragraphBody.fontSize}`,
|
|
68
|
+
"paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.fontSize}`,
|
|
69
|
+
"paragraph-sm": `${defaultTheme.typography.paragraphSmall.fontSize}`,
|
|
70
|
+
"paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.fontSize}`,
|
|
71
|
+
"data-lg": `${defaultTheme.typography.dataLarge.fontSize}`,
|
|
72
|
+
"data-md": `${defaultTheme.typography.dataMedium.fontSize}`,
|
|
73
|
+
"data-sm": `${defaultTheme.typography.dataSmall.fontSize}`,
|
|
74
|
+
"data-units-lg": `${defaultTheme.typography.dataLargeUnits.fontSize}`,
|
|
75
|
+
"data-units-md": `${defaultTheme.typography.dataMediumUnits.fontSize}`,
|
|
76
|
+
"data-units-sm": `${defaultTheme.typography.dataSmallUnits.fontSize}`,
|
|
77
|
+
},
|
|
78
|
+
fontWeight: {
|
|
79
|
+
"weight-paragraph": "400",
|
|
80
|
+
"weight-paragraph-bold": "600",
|
|
81
|
+
"weight-data": "700",
|
|
82
|
+
"weight-heading": "700",
|
|
83
|
+
"weight-display": "800",
|
|
84
|
+
},
|
|
85
|
+
lineHeight: {
|
|
86
|
+
display: `${defaultTheme.typography.display0.lineHeight}`,
|
|
87
|
+
"heading-1": `${defaultTheme.typography.heading1.lineHeight}`,
|
|
88
|
+
"heading-2": `${defaultTheme.typography.heading2.lineHeight}`,
|
|
89
|
+
"heading-3": `${defaultTheme.typography.heading3.lineHeight}`,
|
|
90
|
+
"heading-4": `${defaultTheme.typography.heading4.lineHeight}`,
|
|
91
|
+
"heading-5": `${defaultTheme.typography.heading5.lineHeight}`,
|
|
92
|
+
"heading-6": `${defaultTheme.typography.heading6.lineHeight}`,
|
|
93
|
+
paragraph: `${defaultTheme.typography.paragraphBody.lineHeight}`,
|
|
94
|
+
"paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.lineHeight}`,
|
|
95
|
+
"paragraph-sm": `${defaultTheme.typography.paragraphSmall.lineHeight}`,
|
|
96
|
+
"paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.lineHeight}`,
|
|
97
|
+
"data-lg": `${defaultTheme.typography.dataLarge.lineHeight}`,
|
|
98
|
+
"data-md": `${defaultTheme.typography.dataMedium.lineHeight}`,
|
|
99
|
+
"data-sm": `${defaultTheme.typography.dataSmall.lineHeight}`,
|
|
100
|
+
"data-units-lg": `${defaultTheme.typography.dataLargeUnits.lineHeight}`,
|
|
101
|
+
"data-units-md": `${defaultTheme.typography.dataMediumUnits.lineHeight}`,
|
|
102
|
+
"data-units-sm": `${defaultTheme.typography.dataSmallUnits.lineHeight}`,
|
|
103
|
+
},
|
|
104
|
+
letterSpacing: {
|
|
105
|
+
"letter-spacing-normal": "normal",
|
|
106
|
+
},
|
|
107
|
+
// A mix of layout styles
|
|
108
|
+
screens: {
|
|
109
|
+
md: defaultTheme.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
|
|
110
|
+
lg: defaultTheme.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
|
|
111
|
+
},
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
export const Preset: KaizenTailwindPreset = {
|
|
115
|
+
theme: kaizenTailwindTheme,
|
|
116
|
+
}
|