@kaizen/tailwind 0.1.2 → 0.2.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/CHANGELOG.md +19 -0
- package/README.md +49 -1
- 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 +26 -0
- package/dist/kz-spacing.d.ts.map +1 -0
- package/dist/kz-spacing.js +29 -0
- package/dist/kz-spacing.js.map +1 -0
- package/dist/kz-width.d.ts +13 -0
- package/dist/kz-width.d.ts.map +1 -0
- package/dist/kz-width.js +16 -0
- package/dist/kz-width.js.map +1 -0
- package/dist/tailwind-presets.d.ts.map +1 -1
- package/dist/tailwind-presets.js +64 -81
- package/dist/tailwind-presets.js.map +1 -1
- package/package.json +2 -2
- package/src/kz-height.ts +12 -0
- package/src/kz-spacing.ts +27 -0
- package/src/kz-width.ts +12 -0
- package/src/tailwind-presets.ts +67 -76
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.2.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/tailwind@0.1.3...@kaizen/tailwind@0.2.0) (2022-12-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* update tokens presets ([#3165](https://github.com/cultureamp/kaizen-design-system/issues/3165)) ([ac963ef](https://github.com/cultureamp/kaizen-design-system/commit/ac963ef6bf5c30c345fc7f0911089b2ed4b15a49))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.1.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/tailwind@0.1.2...@kaizen/tailwind@0.1.3) (2022-12-15)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @kaizen/tailwind
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.1.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/tailwind@0.1.1...@kaizen/tailwind@0.1.2) (2022-12-09)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @kaizen/tailwind
|
package/README.md
CHANGED
|
@@ -1,5 +1,53 @@
|
|
|
1
1
|
# Install
|
|
2
2
|
|
|
3
3
|
```
|
|
4
|
-
yarn add @kaizen/tailwind
|
|
4
|
+
yarn add -D @kaizen/tailwind
|
|
5
5
|
```
|
|
6
|
+
|
|
7
|
+
## Table of contents
|
|
8
|
+
|
|
9
|
+
- [Caveat before use](#caveat-before-use)
|
|
10
|
+
- [What our package does](#what-our-package-does)
|
|
11
|
+
- [Getting started](#getting-started)
|
|
12
|
+
|
|
13
|
+
## Caveat before use
|
|
14
|
+
|
|
15
|
+
This is an early release of the Kaizen Tailwind Preset - the API may change and evolve as we receive feedback from our teams. We will endeavour to assist where possible if classes or utilities are updated in the future.
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## What our package does
|
|
19
|
+
|
|
20
|
+
This package is essentially a custom Tailwind preset. This package does not change how Tailwind works; it only changes the suffixes that can be attached to utilities.
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
These suffixes are based on our [design tokens](https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens).
|
|
25
|
+
|
|
26
|
+
For this reason, refer to the [Tailwind core concepts docs](https://tailwindcss.com/docs/utility-first) for getting up to speed on how Tailwind _works_, but refer to our [storybook](https://cultureamp.design/storybook/) as a reference guide for our _custom suffixes_.
|
|
27
|
+
|
|
28
|
+
As an example, if I wanted to know which font-family values are available as Tailwind classes, I would open our storybook and look under Tailwind > Typography > Font Family (or just search "Font Family").
|
|
29
|
+
|
|
30
|
+
## Getting started
|
|
31
|
+
|
|
32
|
+
>The assumption is that you have previously followed the FE Foundation guide for setting Tailwind up in your project.
|
|
33
|
+
|
|
34
|
+
Install `@kaizen/tailwind` as a dependency and require it into your Tailwind config. Then, pass it into your `presets` array.
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
// this originally lived in @kaizen/design-tokens but we've decoupled this for ease of versioning
|
|
38
|
+
const { Preset } = require("@kaizen/tailwind")
|
|
39
|
+
|
|
40
|
+
module.exports = {
|
|
41
|
+
content: ["./**/*.{ts,tsx}"],
|
|
42
|
+
presets: [Preset],
|
|
43
|
+
// important to add to the #root and #docs-root (for storybook) to ensure that Tailwind classes supersede component styles
|
|
44
|
+
important: ["#root", "#docs-root"],
|
|
45
|
+
theme: {
|
|
46
|
+
extend: {},
|
|
47
|
+
},
|
|
48
|
+
plugins: [],
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
For preset configuration options, see [CONFIGURATION.md](CONFIGURATION.md)
|
|
53
|
+
|
|
@@ -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,26 @@
|
|
|
1
|
+
export declare const kzSpacing: {
|
|
2
|
+
0: string;
|
|
3
|
+
1: string;
|
|
4
|
+
2: string;
|
|
5
|
+
4: string;
|
|
6
|
+
8: string;
|
|
7
|
+
12: string;
|
|
8
|
+
16: string;
|
|
9
|
+
24: string;
|
|
10
|
+
32: string;
|
|
11
|
+
40: string;
|
|
12
|
+
48: string;
|
|
13
|
+
56: string;
|
|
14
|
+
64: string;
|
|
15
|
+
72: string;
|
|
16
|
+
80: string;
|
|
17
|
+
96: string;
|
|
18
|
+
112: string;
|
|
19
|
+
128: string;
|
|
20
|
+
160: string;
|
|
21
|
+
200: string;
|
|
22
|
+
240: string;
|
|
23
|
+
280: string;
|
|
24
|
+
320: string;
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=kz-spacing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-spacing.d.ts","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.kzSpacing = void 0;
|
|
4
|
+
exports.kzSpacing = {
|
|
5
|
+
0: "0",
|
|
6
|
+
1: ".0625rem",
|
|
7
|
+
2: ".125rem",
|
|
8
|
+
4: ".25rem",
|
|
9
|
+
8: ".5rem",
|
|
10
|
+
12: ".75rem",
|
|
11
|
+
16: "1rem",
|
|
12
|
+
24: "1.5rem",
|
|
13
|
+
32: "2rem",
|
|
14
|
+
40: "2.5rem",
|
|
15
|
+
48: "3rem",
|
|
16
|
+
56: "3.5rem",
|
|
17
|
+
64: "4rem",
|
|
18
|
+
72: "4.5rem",
|
|
19
|
+
80: "5rem",
|
|
20
|
+
96: "6rem",
|
|
21
|
+
112: "7rem",
|
|
22
|
+
128: "8rem",
|
|
23
|
+
160: "10rem",
|
|
24
|
+
200: "12.5rem",
|
|
25
|
+
240: "15rem",
|
|
26
|
+
280: "17.5rem",
|
|
27
|
+
320: "20rem",
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=kz-spacing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-spacing.js","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":";;;AAEa,QAAA,SAAS,GAAG;IACvB,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,UAAU;IACb,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,OAAO;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,OAAO;CACb,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-width.d.ts","sourceRoot":"","sources":["../src/kz-width.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;CAWnB,CAAA"}
|
package/dist/kz-width.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.kzWidth = void 0;
|
|
4
|
+
exports.kzWidth = {
|
|
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-width.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kz-width.js","sourceRoot":"","sources":["../src/kz-width.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG;IACrB,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-presets.d.ts","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tailwind-presets.d.ts","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAMtD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AACtD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AAGD,eAAO,MAAM,mBAAmB,EAAE,mBA6GjC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,oBAEpB,CAAA"}
|
package/dist/tailwind-presets.js
CHANGED
|
@@ -10,56 +10,33 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
-
}
|
|
19
|
-
Object.defineProperty(o, k2, desc);
|
|
20
|
-
}) : (function(o, m, k, k2) {
|
|
21
|
-
if (k2 === undefined) k2 = k;
|
|
22
|
-
o[k2] = m[k];
|
|
23
|
-
}));
|
|
24
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
-
}) : function(o, v) {
|
|
27
|
-
o["default"] = v;
|
|
28
|
-
});
|
|
29
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
-
if (mod && mod.__esModule) return mod;
|
|
31
|
-
var result = {};
|
|
32
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
-
__setModuleDefault(result, mod);
|
|
34
|
-
return result;
|
|
35
|
-
};
|
|
36
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
14
|
exports.Preset = exports.kaizenTailwindTheme = void 0;
|
|
38
|
-
var twDefaultTheme = __importStar(require("tailwindcss/defaultTheme"));
|
|
39
15
|
var design_tokens_1 = require("@kaizen/design-tokens");
|
|
16
|
+
var kz_height_1 = require("./kz-height");
|
|
17
|
+
var kz_spacing_1 = require("./kz-spacing");
|
|
18
|
+
var kz_width_1 = require("./kz-width");
|
|
40
19
|
// Note: changing any token will require to to run build:ts from the root `design-tokens`
|
|
41
20
|
exports.kaizenTailwindTheme = {
|
|
42
21
|
colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, design_tokens_1.defaultTheme.color), design_tokens_1.defaultTheme.dataViz),
|
|
43
|
-
spacing:
|
|
22
|
+
spacing: kz_spacing_1.kzSpacing,
|
|
44
23
|
boxShadow: {
|
|
45
24
|
none: "none",
|
|
46
25
|
sm: design_tokens_1.defaultTheme.shadow.small.boxShadow,
|
|
47
26
|
lg: design_tokens_1.defaultTheme.shadow.large.boxShadow,
|
|
48
27
|
},
|
|
49
28
|
borderRadius: {
|
|
50
|
-
none: "0px",
|
|
51
29
|
default: "7px",
|
|
30
|
+
none: "0px",
|
|
52
31
|
"focus-ring": "10px",
|
|
53
32
|
full: "100%",
|
|
54
33
|
},
|
|
55
34
|
borderWidth: {
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
35
|
+
"w-none": "0px",
|
|
36
|
+
"w-default": "2px",
|
|
37
|
+
"w-focus-ring": "2px",
|
|
59
38
|
},
|
|
60
|
-
|
|
61
|
-
// tailwind used a `ring` property
|
|
62
|
-
borderColor: __assign({ "color-solid": "".concat(design_tokens_1.defaultTheme.border.solid.borderColor), "color-transparent": "".concat(design_tokens_1.defaultTheme.border.borderless.borderColor), "color-focus-ring": design_tokens_1.defaultTheme.color.blue[600] }, design_tokens_1.defaultTheme.color),
|
|
39
|
+
borderColor: __assign({ "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),
|
|
63
40
|
fontFamily: {
|
|
64
41
|
"family-paragraph": ["".concat(design_tokens_1.defaultTheme.typography.paragraphBody.fontFamily)],
|
|
65
42
|
"family-heading": ["".concat(design_tokens_1.defaultTheme.typography.heading1.fontFamily)],
|
|
@@ -67,70 +44,76 @@ exports.kaizenTailwindTheme = {
|
|
|
67
44
|
"family-display": ["".concat(design_tokens_1.defaultTheme.typography.display0.fontFamily)],
|
|
68
45
|
},
|
|
69
46
|
fontSize: {
|
|
70
|
-
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
47
|
+
display: "".concat(design_tokens_1.defaultTheme.typography.display0.fontSize),
|
|
48
|
+
"heading-1": "".concat(design_tokens_1.defaultTheme.typography.heading1.fontSize),
|
|
49
|
+
"heading-2": "".concat(design_tokens_1.defaultTheme.typography.heading2.fontSize),
|
|
50
|
+
"heading-3": "".concat(design_tokens_1.defaultTheme.typography.heading3.fontSize),
|
|
51
|
+
"heading-4": "".concat(design_tokens_1.defaultTheme.typography.heading4.fontSize),
|
|
52
|
+
"heading-5": "".concat(design_tokens_1.defaultTheme.typography.heading5.fontSize),
|
|
53
|
+
"heading-6": "".concat(design_tokens_1.defaultTheme.typography.heading6.fontSize),
|
|
54
|
+
paragraph: "".concat(design_tokens_1.defaultTheme.typography.paragraphBody.fontSize),
|
|
55
|
+
"paragraph-lede": "".concat(design_tokens_1.defaultTheme.typography.paragraphIntroLede.fontSize),
|
|
56
|
+
"paragraph-sm": "".concat(design_tokens_1.defaultTheme.typography.paragraphSmall.fontSize),
|
|
57
|
+
"paragraph-xs": "".concat(design_tokens_1.defaultTheme.typography.paragraphExtraSmall.fontSize),
|
|
58
|
+
"data-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLarge.fontSize),
|
|
59
|
+
"data-md": "".concat(design_tokens_1.defaultTheme.typography.dataMedium.fontSize),
|
|
60
|
+
"data-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmall.fontSize),
|
|
61
|
+
"data-units-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLargeUnits.fontSize),
|
|
62
|
+
"data-units-md": "".concat(design_tokens_1.defaultTheme.typography.dataMediumUnits.fontSize),
|
|
63
|
+
"data-units-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmallUnits.fontSize),
|
|
87
64
|
},
|
|
88
|
-
// font weights could have specific tokens (current don't)
|
|
89
65
|
fontWeight: {
|
|
90
66
|
"weight-paragraph": "400",
|
|
91
67
|
"weight-paragraph-bold": "600",
|
|
92
68
|
"weight-data": "700",
|
|
93
69
|
"weight-heading": "700",
|
|
94
70
|
"weight-display": "800",
|
|
95
|
-
"weight-normal": "400",
|
|
96
|
-
"weight-medium": "500",
|
|
97
|
-
"weight-semibold": "600",
|
|
98
|
-
"weight-bold": "700",
|
|
99
|
-
"weight-extrabold": "800",
|
|
100
71
|
},
|
|
101
72
|
lineHeight: {
|
|
102
|
-
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
108
|
-
"
|
|
109
|
-
|
|
110
|
-
"
|
|
111
|
-
"
|
|
112
|
-
"
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
73
|
+
display: "".concat(design_tokens_1.defaultTheme.typography.display0.lineHeight),
|
|
74
|
+
"heading-1": "".concat(design_tokens_1.defaultTheme.typography.heading1.lineHeight),
|
|
75
|
+
"heading-2": "".concat(design_tokens_1.defaultTheme.typography.heading2.lineHeight),
|
|
76
|
+
"heading-3": "".concat(design_tokens_1.defaultTheme.typography.heading3.lineHeight),
|
|
77
|
+
"heading-4": "".concat(design_tokens_1.defaultTheme.typography.heading4.lineHeight),
|
|
78
|
+
"heading-5": "".concat(design_tokens_1.defaultTheme.typography.heading5.lineHeight),
|
|
79
|
+
"heading-6": "".concat(design_tokens_1.defaultTheme.typography.heading6.lineHeight),
|
|
80
|
+
paragraph: "".concat(design_tokens_1.defaultTheme.typography.paragraphBody.lineHeight),
|
|
81
|
+
"paragraph-lede": "".concat(design_tokens_1.defaultTheme.typography.paragraphIntroLede.lineHeight),
|
|
82
|
+
"paragraph-sm": "".concat(design_tokens_1.defaultTheme.typography.paragraphSmall.lineHeight),
|
|
83
|
+
"paragraph-xs": "".concat(design_tokens_1.defaultTheme.typography.paragraphExtraSmall.lineHeight),
|
|
84
|
+
"data-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLarge.lineHeight),
|
|
85
|
+
"data-md": "".concat(design_tokens_1.defaultTheme.typography.dataMedium.lineHeight),
|
|
86
|
+
"data-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmall.lineHeight),
|
|
87
|
+
"data-units-lg": "".concat(design_tokens_1.defaultTheme.typography.dataLargeUnits.lineHeight),
|
|
88
|
+
"data-units-md": "".concat(design_tokens_1.defaultTheme.typography.dataMediumUnits.lineHeight),
|
|
89
|
+
"data-units-sm": "".concat(design_tokens_1.defaultTheme.typography.dataSmallUnits.lineHeight),
|
|
119
90
|
},
|
|
120
91
|
letterSpacing: {
|
|
121
|
-
"spacing-normal": "normal",
|
|
92
|
+
"letter-spacing-normal": "normal",
|
|
122
93
|
},
|
|
123
94
|
// A mix of layout styles
|
|
124
|
-
maxWidth:
|
|
125
|
-
width:
|
|
126
|
-
|
|
127
|
-
|
|
95
|
+
maxWidth: kz_width_1.kzWidth,
|
|
96
|
+
width: kz_width_1.kzWidth,
|
|
97
|
+
maxHeight: kz_height_1.kzHeight,
|
|
98
|
+
height: kz_height_1.kzHeight,
|
|
128
99
|
screens: {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
"
|
|
132
|
-
"
|
|
100
|
+
md: design_tokens_1.defaultTheme.layout.breakpoints.medium,
|
|
101
|
+
lg: design_tokens_1.defaultTheme.layout.breakpoints.large,
|
|
102
|
+
"md-max": { max: design_tokens_1.defaultTheme.layout.breakpoints.medium },
|
|
103
|
+
"lg-max": { max: design_tokens_1.defaultTheme.layout.breakpoints.large }, // => @media (min-width: 1080px) { ... }
|
|
133
104
|
},
|
|
105
|
+
// TODO: These work in TW Play but not in our Storybook config.
|
|
106
|
+
// Add these when we get them working in Storybook.
|
|
107
|
+
// ringWidth: {
|
|
108
|
+
// "default-width": `${defaultTheme.border.focusRing.borderWidth}`,
|
|
109
|
+
// },
|
|
110
|
+
// ringOffsetWidth: {
|
|
111
|
+
// "default-width": "2px",
|
|
112
|
+
// },
|
|
113
|
+
// ringColor: {
|
|
114
|
+
// "default-color": `${defaultTheme.color.blue[500]}`,
|
|
115
|
+
// },
|
|
116
|
+
// ringOffsetColor: {},
|
|
134
117
|
};
|
|
135
118
|
exports.Preset = {
|
|
136
119
|
theme: exports.kaizenTailwindTheme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-presets.js","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tailwind-presets.js","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/tailwind",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Kaizen Tailwind presets",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "yarn clean && yarn prepublish",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "185eec61c0ec3dc4cc01d7adae13e1c14f89a224"
|
|
43
43
|
}
|
package/src/kz-height.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { defaultTheme } from "@kaizen/design-tokens"
|
|
2
|
+
|
|
3
|
+
export const kzSpacing = {
|
|
4
|
+
0: "0",
|
|
5
|
+
1: ".0625rem",
|
|
6
|
+
2: ".125rem",
|
|
7
|
+
4: ".25rem",
|
|
8
|
+
8: ".5rem",
|
|
9
|
+
12: ".75rem",
|
|
10
|
+
16: "1rem",
|
|
11
|
+
24: "1.5rem",
|
|
12
|
+
32: "2rem",
|
|
13
|
+
40: "2.5rem",
|
|
14
|
+
48: "3rem",
|
|
15
|
+
56: "3.5rem",
|
|
16
|
+
64: "4rem",
|
|
17
|
+
72: "4.5rem",
|
|
18
|
+
80: "5rem",
|
|
19
|
+
96: "6rem",
|
|
20
|
+
112: "7rem",
|
|
21
|
+
128: "8rem",
|
|
22
|
+
160: "10rem",
|
|
23
|
+
200: "12.5rem",
|
|
24
|
+
240: "15rem",
|
|
25
|
+
280: "17.5rem",
|
|
26
|
+
320: "20rem",
|
|
27
|
+
}
|
package/src/kz-width.ts
ADDED
package/src/tailwind-presets.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import * as twDefaultTheme from "tailwindcss/defaultTheme"
|
|
2
1
|
import { ThemeConfig } from "tailwindcss/types/config"
|
|
3
|
-
|
|
4
2
|
import { defaultTheme } from "@kaizen/design-tokens"
|
|
3
|
+
import { kzHeight } from "./kz-height"
|
|
4
|
+
import { kzSpacing } from "./kz-spacing"
|
|
5
|
+
import { kzWidth } from "./kz-width"
|
|
5
6
|
|
|
6
7
|
export type KaizenTailwindTheme = Partial<ThemeConfig>
|
|
7
8
|
export interface KaizenTailwindPreset {
|
|
@@ -17,32 +18,28 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
|
|
|
17
18
|
...defaultTheme.color,
|
|
18
19
|
...defaultTheme.dataViz,
|
|
19
20
|
},
|
|
20
|
-
spacing:
|
|
21
|
-
...defaultTheme.spacing,
|
|
22
|
-
...twDefaultTheme.spacing,
|
|
23
|
-
},
|
|
21
|
+
spacing: kzSpacing,
|
|
24
22
|
boxShadow: {
|
|
25
23
|
none: "none",
|
|
26
24
|
sm: defaultTheme.shadow.small.boxShadow,
|
|
27
25
|
lg: defaultTheme.shadow.large.boxShadow,
|
|
28
26
|
},
|
|
29
27
|
borderRadius: {
|
|
30
|
-
none: "0px",
|
|
31
28
|
default: "7px",
|
|
29
|
+
none: "0px",
|
|
32
30
|
"focus-ring": "10px",
|
|
33
31
|
full: "100%",
|
|
34
32
|
},
|
|
33
|
+
|
|
35
34
|
borderWidth: {
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
35
|
+
"w-none": "0px",
|
|
36
|
+
"w-default": "2px",
|
|
37
|
+
"w-focus-ring": "2px",
|
|
39
38
|
},
|
|
40
|
-
// how do we want to handle our focus rings?
|
|
41
|
-
// tailwind used a `ring` property
|
|
42
39
|
borderColor: {
|
|
43
|
-
"color
|
|
44
|
-
|
|
45
|
-
"
|
|
40
|
+
"default-color": `${defaultTheme.border.solid.borderColor}`,
|
|
41
|
+
transparent: `${defaultTheme.border.borderless.borderColor}`,
|
|
42
|
+
"focus-ring": defaultTheme.color.blue[600],
|
|
46
43
|
...defaultTheme.color,
|
|
47
44
|
},
|
|
48
45
|
fontFamily: {
|
|
@@ -52,82 +49,76 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
|
|
|
52
49
|
"family-display": [`${defaultTheme.typography.display0.fontFamily}`],
|
|
53
50
|
},
|
|
54
51
|
fontSize: {
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
52
|
+
display: `${defaultTheme.typography.display0.fontSize}`,
|
|
53
|
+
"heading-1": `${defaultTheme.typography.heading1.fontSize}`,
|
|
54
|
+
"heading-2": `${defaultTheme.typography.heading2.fontSize}`,
|
|
55
|
+
"heading-3": `${defaultTheme.typography.heading3.fontSize}`,
|
|
56
|
+
"heading-4": `${defaultTheme.typography.heading4.fontSize}`,
|
|
57
|
+
"heading-5": `${defaultTheme.typography.heading5.fontSize}`,
|
|
58
|
+
"heading-6": `${defaultTheme.typography.heading6.fontSize}`,
|
|
59
|
+
paragraph: `${defaultTheme.typography.paragraphBody.fontSize}`,
|
|
60
|
+
"paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.fontSize}`,
|
|
61
|
+
"paragraph-sm": `${defaultTheme.typography.paragraphSmall.fontSize}`,
|
|
62
|
+
"paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.fontSize}`,
|
|
63
|
+
"data-lg": `${defaultTheme.typography.dataLarge.fontSize}`,
|
|
64
|
+
"data-md": `${defaultTheme.typography.dataMedium.fontSize}`,
|
|
65
|
+
"data-sm": `${defaultTheme.typography.dataSmall.fontSize}`,
|
|
66
|
+
"data-units-lg": `${defaultTheme.typography.dataLargeUnits.fontSize}`,
|
|
67
|
+
"data-units-md": `${defaultTheme.typography.dataMediumUnits.fontSize}`,
|
|
68
|
+
"data-units-sm": `${defaultTheme.typography.dataSmallUnits.fontSize}`,
|
|
72
69
|
},
|
|
73
|
-
// font weights could have specific tokens (current don't)
|
|
74
70
|
fontWeight: {
|
|
75
71
|
"weight-paragraph": "400",
|
|
76
72
|
"weight-paragraph-bold": "600",
|
|
77
73
|
"weight-data": "700",
|
|
78
74
|
"weight-heading": "700",
|
|
79
75
|
"weight-display": "800",
|
|
80
|
-
"weight-normal": "400",
|
|
81
|
-
"weight-medium": "500",
|
|
82
|
-
"weight-semibold": "600",
|
|
83
|
-
"weight-bold": "700",
|
|
84
|
-
"weight-extrabold": "800",
|
|
85
76
|
},
|
|
86
77
|
lineHeight: {
|
|
87
|
-
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
78
|
+
display: `${defaultTheme.typography.display0.lineHeight}`,
|
|
79
|
+
"heading-1": `${defaultTheme.typography.heading1.lineHeight}`,
|
|
80
|
+
"heading-2": `${defaultTheme.typography.heading2.lineHeight}`,
|
|
81
|
+
"heading-3": `${defaultTheme.typography.heading3.lineHeight}`,
|
|
82
|
+
"heading-4": `${defaultTheme.typography.heading4.lineHeight}`,
|
|
83
|
+
"heading-5": `${defaultTheme.typography.heading5.lineHeight}`,
|
|
84
|
+
"heading-6": `${defaultTheme.typography.heading6.lineHeight}`,
|
|
85
|
+
paragraph: `${defaultTheme.typography.paragraphBody.lineHeight}`,
|
|
86
|
+
"paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.lineHeight}`,
|
|
87
|
+
"paragraph-sm": `${defaultTheme.typography.paragraphSmall.lineHeight}`,
|
|
88
|
+
"paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.lineHeight}`,
|
|
89
|
+
"data-lg": `${defaultTheme.typography.dataLarge.lineHeight}`,
|
|
90
|
+
"data-md": `${defaultTheme.typography.dataMedium.lineHeight}`,
|
|
91
|
+
"data-sm": `${defaultTheme.typography.dataSmall.lineHeight}`,
|
|
92
|
+
"data-units-lg": `${defaultTheme.typography.dataLargeUnits.lineHeight}`,
|
|
93
|
+
"data-units-md": `${defaultTheme.typography.dataMediumUnits.lineHeight}`,
|
|
94
|
+
"data-units-sm": `${defaultTheme.typography.dataSmallUnits.lineHeight}`,
|
|
104
95
|
},
|
|
105
96
|
letterSpacing: {
|
|
106
|
-
"spacing-normal": "normal",
|
|
97
|
+
"letter-spacing-normal": "normal",
|
|
107
98
|
},
|
|
108
99
|
// A mix of layout styles
|
|
109
|
-
maxWidth:
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
},
|
|
114
|
-
width: {
|
|
115
|
-
...twDefaultTheme.width,
|
|
116
|
-
"content-side-margin": defaultTheme.layout.contentSideMargin,
|
|
117
|
-
},
|
|
118
|
-
height: {
|
|
119
|
-
...twDefaultTheme.height,
|
|
120
|
-
"mobile-actions-drawer-height":
|
|
121
|
-
defaultTheme.layout.mobileActionsDrawerHeight,
|
|
122
|
-
"navigation-bar-height": defaultTheme.layout.navigationBarHeight,
|
|
123
|
-
},
|
|
124
|
-
// we will probably want to review viewport sizing
|
|
100
|
+
maxWidth: kzWidth,
|
|
101
|
+
width: kzWidth,
|
|
102
|
+
maxHeight: kzHeight,
|
|
103
|
+
height: kzHeight,
|
|
125
104
|
screens: {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
"
|
|
129
|
-
"
|
|
105
|
+
md: defaultTheme.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
|
|
106
|
+
lg: defaultTheme.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
|
|
107
|
+
"md-max": { max: defaultTheme.layout.breakpoints.medium }, // => @media (max-width: 768px) { ... }
|
|
108
|
+
"lg-max": { max: defaultTheme.layout.breakpoints.large }, // => @media (min-width: 1080px) { ... }
|
|
130
109
|
},
|
|
110
|
+
// TODO: These work in TW Play but not in our Storybook config.
|
|
111
|
+
// Add these when we get them working in Storybook.
|
|
112
|
+
// ringWidth: {
|
|
113
|
+
// "default-width": `${defaultTheme.border.focusRing.borderWidth}`,
|
|
114
|
+
// },
|
|
115
|
+
// ringOffsetWidth: {
|
|
116
|
+
// "default-width": "2px",
|
|
117
|
+
// },
|
|
118
|
+
// ringColor: {
|
|
119
|
+
// "default-color": `${defaultTheme.color.blue[500]}`,
|
|
120
|
+
// },
|
|
121
|
+
// ringOffsetColor: {},
|
|
131
122
|
}
|
|
132
123
|
|
|
133
124
|
export const Preset: KaizenTailwindPreset = {
|